/* ==========================================================================
   GOコンパス デザインシステム
   Material 3 Expressive の考え方をバニラCSSで再現したもの。
   外部UIライブラリ・ビルドツールには依存しない。

   方針:
     - surface / surface-container の「階層」で要素を浮かせる(発光やガラスに頼らない)
     - accent colorは限定的に使う。状態は色だけでなく形・アイコン・文字でも伝える
     - 最重要情報(今日のおすすめ)だけをサイズ・角丸・余白で強くExpressiveにする
     - モバイルファースト。ブラウザ実装依存の新しいCSS機能はできるだけ避ける
       (過去にSamsung Internetで position:sticky + width:fit-content が効かず
        ナビが全幅の帯になった事故があるため)
   ========================================================================== */

/* ================= design tokens ================= */
:root{
    /* --- color: primary (青〜シアン。GOコンパスの主色) --- */
    --md-sys-color-primary: #7fd0ff;
    --md-sys-color-on-primary: #00344a;
    --md-sys-color-primary-container: #004c69;
    --md-sys-color-on-primary-container: #c8e7ff;

    /* --- color: secondary (彩度を落とした青灰。chip等の脇役) --- */
    --md-sys-color-secondary: #b4cad6;
    --md-sys-color-on-secondary: #1f333d;
    --md-sys-color-secondary-container: #354a54;
    --md-sys-color-on-secondary-container: #d0e6f2;

    /* --- color: tertiary (紫。ごく限定的なアクセント) --- */
    --md-sys-color-tertiary: #c6c2ea;
    --md-sys-color-on-tertiary: #2f2d4d;
    --md-sys-color-tertiary-container: #464364;
    --md-sys-color-on-tertiary-container: #e3dfff;

    /* --- color: error / warning (終了間近・エラー) --- */
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;

    /* --- color: success (開催中。M3標準ロールには無いので独自追加) --- */
    --md-sys-color-success: #7bdba4;
    --md-sys-color-on-success: #00391e;
    --md-sys-color-success-container: #00522f;
    --md-sys-color-on-success-container: #97f8be;

    /* --- color: surface 階層 --- */
    --md-sys-color-surface-dim: #0a0e13;
    --md-sys-color-surface: #0e1319;
    --md-sys-color-surface-container-lowest: #080c11;
    --md-sys-color-surface-container-low: #161b21;
    --md-sys-color-surface-container: #1a1f26;
    --md-sys-color-surface-container-high: #242a31;
    --md-sys-color-surface-container-highest: #2f353c;
    --md-sys-color-on-surface: #e2e6ec;
    --md-sys-color-on-surface-variant: #aab4c0;
    --md-sys-color-outline: #78838f;
    --md-sys-color-outline-variant: #39414a;
    /* パネルを囲う線。外枠は outline-variant、入れ子の要素はもう一段細くして
       線が増えすぎて煩雑にならないようにする。 */
    --outline-panel: #333b45;
    --outline-nested: #2a313a;
    --md-sys-color-scrim: rgba(0,0,0,.6);

    /* 半透明のオーバーレイ(ホバー/押下)。色は on-surface 相当を薄く重ねる */
    --state-hover: rgba(226,230,236,.08);
    --state-press: rgba(226,230,236,.13);

    /* --- shape: M3 Expressive は大きめの角丸を多用する --- */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-full: 999px;

    /* --- spacing --- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    /* --- elevation --- */
    --elevation-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px 1px rgba(0,0,0,.22);
    --elevation-2: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px 2px rgba(0,0,0,.22);
    --elevation-3: 0 4px 8px 3px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.4);

    /* --- motion --- */
    --easing-standard: cubic-bezier(.2,0,0,1);
    --duration-short: .15s;
    --duration-medium: .25s;

    /* --- layout --- */
    --nav-height: 64px;
    --content-max: 720px;
}

/* ================= base ================= */
*{ box-sizing:border-box; }

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
    min-height:100vh;
    min-height:100dvh;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-family: "Hiragino Sans","Yu Gothic UI","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x:hidden;
    /* 画面下部のナビゲーションバーが本文を隠さないよう、その分の余白を確保する */
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + var(--space-lg));
}

h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; }
img{ max-width:100%; }
button{ font-family:inherit; }

a{ color: var(--md-sys-color-primary); }

/* キーボード操作時のみフォーカスリングを出す(マウス操作の邪魔をしない) */
:focus-visible{
    outline:3px solid var(--md-sys-color-primary);
    outline-offset:2px;
    border-radius: var(--radius-xs);
}

.skip-link{
    position:absolute;
    left:-9999px;
    top:0;
    z-index:200;
    padding: var(--space-md) var(--space-lg);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: 0 0 var(--radius-md) 0;
    font-weight:700;
}

.skip-link:focus{
    left:0;
}

.visually-hidden{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
}

/* ================= app bar (ページ上部) =================
   ファーストビューの主役は「今日のおすすめ」カードなので、
   ヘッダーは名乗りと現在時刻だけのコンパクトな帯にとどめる。 */
.app-bar{
    background: var(--md-sys-color-surface-container-low);
    border-bottom:1px solid var(--md-sys-color-outline-variant);
    padding: calc(env(safe-area-inset-top) + var(--space-md)) var(--space-lg) var(--space-md);
}

.app-bar__inner{
    max-width: var(--content-max);
    margin:0 auto;
    display:flex;
    align-items:center;
    gap: var(--space-md);
}

.app-bar__mark{
    flex:none;
    width:40px;
    height:40px;
    border-radius: var(--radius-full);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.app-bar__text{
    flex:1;
    min-width:0;
}

.app-bar__title{
    font-size:18px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.01em;
}

.app-bar__tagline{
    font-size:12px;
    line-height:1.5;
    color: var(--md-sys-color-on-surface-variant);
}

.app-bar__clock{
    flex:none;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    line-height:1.2;
}

.app-bar__clock-label{
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    color: var(--md-sys-color-on-surface-variant);
}

.app-bar__clock-time{
    font-size:16px;
    font-weight:700;
    font-variant-numeric: tabular-nums;
    color: var(--md-sys-color-on-surface);
}

/* ================= navigation bar =================
   モバイルは画面下部固定 (M3 navigation bar)。
   デスクトップ(769px以上)は上部固定の横並びに切り替える。
   position:sticky + width:fit-content の組み合わせは一部モバイルブラウザで
   意図通りに縮まない事例があったため、ここでは position:fixed と
   全幅レイアウトだけで組んでいる。 */
.nav-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:90;
    display:flex;
    justify-content:center;
    gap: var(--space-xs);
    background: var(--md-sys-color-surface-container);
    border-top:1px solid var(--md-sys-color-outline-variant);
    padding: var(--space-sm) var(--space-sm) calc(var(--space-sm) + env(safe-area-inset-bottom));
}

.nav-item{
    flex:1 1 0;
    max-width:140px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:0;
    text-decoration:none;
    color: var(--md-sys-color-on-surface-variant);
    -webkit-tap-highlight-color: transparent;
}

.nav-item__indicator{
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:32px;
    border-radius: var(--radius-full);
    background:transparent;
    transition: background-color var(--duration-medium) var(--easing-standard);
}

.nav-item__indicator svg{
    width:24px;
    height:24px;
    display:block;
}

.nav-item__label{
    font-size:12px;
    font-weight:600;
    line-height:1.3;
}

.nav-item:hover .nav-item__indicator{ background: var(--state-hover); }
.nav-item:active .nav-item__indicator{ background: var(--state-press); }

/* 現在ページ: 色だけでなく「塗られたピル」という形でも区別できるようにする */
.nav-item.is-active{
    color: var(--md-sys-color-on-surface);
}

.nav-item.is-active .nav-item__indicator{
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.nav-item.is-active .nav-item__label{
    font-weight:800;
}

/* ================= layout ================= */
.container{
    width:100%;
    max-width: var(--content-max);
    margin:0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}

.section-header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: var(--space-md);
    margin: var(--space-2xl) 0 var(--space-md);
}

.section-header:first-child{ margin-top:0; }

.section-title{
    font-size:20px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:.01em;
}

.section-count{
    flex:none;
    font-size:13px;
    font-weight:600;
    color: var(--md-sys-color-on-surface-variant);
}

/* ================= surface (カード共通の下地) ================= */
.surface{
    background: var(--md-sys-color-surface-container-low);
    border:1px solid var(--outline-panel);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.surface--high{
    background: var(--md-sys-color-surface-container-high);
}

/* ================= buttons ================= */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: var(--space-sm);
    min-height:48px;
    padding: var(--space-md) var(--space-xl);
    border:none;
    border-radius: var(--radius-full);
    font-size:15px;
    font-weight:700;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration-short) var(--easing-standard),
                transform var(--duration-short) var(--easing-standard);
}

.btn:active{ transform: scale(.97); }

.btn--filled{
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.btn--filled:hover{ background:#98daff; }

.btn--tonal{
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.btn--tonal:hover{ background:#3f5560; }

.btn--outlined{
    background:transparent;
    color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
}

.btn--outlined:hover{ background: var(--state-hover); }

.btn--text{
    background:transparent;
    color: var(--md-sys-color-primary);
    padding: var(--space-md) var(--space-lg);
}

.btn--text:hover{ background: var(--state-hover); }

/* ================= chips ================= */
.chip-row{
    display:flex;
    flex-wrap:wrap;
    gap: var(--space-sm);
}

.chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:32px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    font-size:12.5px;
    font-weight:600;
    line-height:1.4;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* 状態チップ: 色に加えて必ずドットの形とテキストでも状態を示す */
.chip__dot{
    flex:none;
    width:8px;
    height:8px;
    border-radius: var(--radius-full);
    background: currentColor;
}

.chip--status.is-live{
    background: var(--md-sys-color-success-container);
    color: var(--md-sys-color-on-success-container);
}

.chip--status.is-soon{
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.chip--status.is-soon .chip__dot{
    border-radius:2px; /* 開催中(丸)と終了間近(四角)を形でも区別する */
}

.chip--status.is-ended{
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
}

.chip--status.is-ended .chip__dot{
    background:transparent;
    box-shadow: inset 0 0 0 2px currentColor;
}

/* イベント種別チップ。
   種別ごとの色を「彩度を抑えた地 + 明るい文字」(M3の container / on-container)で当てる。
   全部同じ灰色だとテキストを読むまで種別が分からず、視線の手がかりにならないため。
   色相は既存の TYPE_META の各色をそのまま使い、明度と彩度だけダークテーマ向けに
   調整している(全種別でコントラスト比6.9:1以上)。
   クラスの付与は common.js の typeChipHtml() 側。 */
.chip--type{
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.chip.etype-event,       .legend-chip.etype-event{       background:#2d1c4a; color:#bf9efa; }
.chip.etype-raid,        .legend-chip.etype-raid{        background:#4a1c24; color:#fa9ead; }
.chip.etype-festival,    .legend-chip.etype-festival{    background:#4a1c36; color:#fa9ed3; }
.chip.etype-news,        .legend-chip.etype-news{        background:#29303d; color:#c2c9d6; }
.chip.etype-hatch,       .legend-chip.etype-hatch{       background:#1c4a38; color:#a8f0d4; }
.chip.etype-gopass,      .legend-chip.etype-gopass{      background:#4a3f1c; color:#fae49e; }
.chip.etype-community,   .legend-chip.etype-community{   background:#4a321c; color:#facb9e; }
/* マックスバトルはレイドと色相が同じなので、地をさらに暗く落として濃淡で区別する */
.chip.etype-maxbattle,   .legend-chip.etype-maxbattle{   background:#2b1015; color:#d9707f; }
.chip.etype-ultraunlock, .legend-chip.etype-ultraunlock{ background:#1c424a; color:#9eeafa; }
.chip.etype-gofest,      .legend-chip.etype-gofest{      background:#461c4a; color:#eba7f1; }
.chip.etype-wildarea,    .legend-chip.etype-wildarea{    background:#1c4a46; color:#acece6; }
.chip.etype-default,     .legend-chip.etype-default{     background:#1c3a4a; color:#9edbfa; }

.chip--priority{
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.chip--plain{
    background:transparent;
    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
}

.chip--new{
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    font-weight:800;
    letter-spacing:.04em;
}


/* ================= ポケモンのタイプ色 =================
   各攻略サイト(Bulbapedia/PokemonDB等)で共通して使われているタイプ別の
   イメージカラーに合わせる。文字色は背景とのコントラスト比が4.5:1以上に
   なる方(濃い文字 or 白文字)を1タイプずつ選んである。
   日本語タイプ名 → スラッグの変換は common.js の POKEMON_TYPE_SLUG 側。 */
.chip--ptype{
    font-weight:700;
}

.chip.ptype-normal{   background:#a8a77a; color:#0e1319; }
.chip.ptype-fire{     background:#ee8130; color:#0e1319; }
.chip.ptype-water{    background:#6390f0; color:#0e1319; }
.chip.ptype-electric{ background:#f7d02c; color:#0e1319; }
.chip.ptype-grass{    background:#7ac74c; color:#0e1319; }
.chip.ptype-ice{      background:#96d9d6; color:#0e1319; }
.chip.ptype-fighting{ background:#c22e28; color:#ffffff; }
.chip.ptype-poison{   background:#a33ea1; color:#ffffff; }
.chip.ptype-ground{   background:#e2bf65; color:#0e1319; }
.chip.ptype-flying{   background:#a98ff3; color:#0e1319; }
.chip.ptype-psychic{  background:#f95587; color:#0e1319; }
.chip.ptype-bug{      background:#a6b91a; color:#0e1319; }
.chip.ptype-rock{     background:#b6a136; color:#0e1319; }
.chip.ptype-ghost{    background:#735797; color:#ffffff; }
.chip.ptype-dragon{   background:#6f35fc; color:#ffffff; }
.chip.ptype-dark{     background:#705746; color:#ffffff; }
.chip.ptype-steel{    background:#b7b7ce; color:#0e1319; }
.chip.ptype-fairy{    background:#d685ad; color:#0e1319; }

/* ================= today hero =================
   ページで最も重要な要素。他のカードより一段大きい角丸・余白・文字サイズにし、
   surface-container-high で背景から浮かせて主役であることを示す。
   発光やグラデーションには頼らない。 */
.today-hero{
    position:relative;
    background: var(--md-sys-color-surface-container-high);
    border:1px solid var(--outline-panel);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    box-shadow: var(--elevation-2);
    margin-bottom: var(--space-xl);
}

.today-hero__label{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap: var(--space-sm);
    font-size:13px;
    font-weight:800;
    letter-spacing:.04em;
    color: var(--md-sys-color-primary);
    margin-bottom: var(--space-md);
}

.today-hero__label-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius: var(--radius-full);
    background: var(--md-sys-color-primary-container);
    font-size:14px;
}

.today-hero__stamp{
    margin-left:auto;
    font-size:11px;
    font-weight:600;
    letter-spacing:0;
    color: var(--md-sys-color-on-surface-variant);
}

.today-hero__action{
    font-size:26px;
    line-height:1.4;
    font-weight:800;
    letter-spacing:.005em;
    color: var(--md-sys-color-on-surface);
    overflow-wrap:anywhere;
    margin-bottom: var(--space-md);
}

.today-hero__reason{
    font-size:15px;
    line-height:1.8;
    color: var(--md-sys-color-on-surface-variant);
    overflow-wrap:anywhere;
    margin-bottom: var(--space-lg);
}

.today-hero .chip-row{
    margin-bottom: var(--space-lg);
}

.today-hero__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap: var(--space-sm);
}

.today-hero__actions .btn--filled{
    flex:1 1 auto;
    min-width:180px;
}

.today-hero__note{
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top:1px solid var(--md-sys-color-outline-variant);
    font-size:12.5px;
    line-height:1.7;
    color: var(--md-sys-color-on-surface-variant);
}

/* ================= sort control ================= */
.sort-field{
    position:relative;
    flex:none;
}

.sort-select{
    appearance:none;
    -webkit-appearance:none;
    min-height:40px;
    padding: 0 38px 0 var(--space-lg);
    border-radius: var(--radius-full);
    border:1px solid var(--md-sys-color-outline);
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font-family:inherit;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
}

.sort-select option{
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.sort-field::after{
    content:"";
    position:absolute;
    right:16px;
    top:50%;
    width:8px;
    height:8px;
    margin-top:-6px;
    border-right:2px solid var(--md-sys-color-on-surface-variant);
    border-bottom:2px solid var(--md-sys-color-on-surface-variant);
    transform: rotate(45deg);
    pointer-events:none;
}

/* ================= event list / card ================= */
.event-grid{
    display:grid;
    grid-template-columns:1fr;
    gap: var(--space-md);
}

.event-card{
    position:relative;
    background: var(--md-sys-color-surface-container-low);
    border:1px solid var(--outline-panel);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: background-color var(--duration-short) var(--easing-standard);
}

.event-card.is-highlighted{
    background: var(--md-sys-color-surface-container-high);
    box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}

.event-card__head{
    display:flex;
    align-items:flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.event-card__icon{
    flex:none;
    width:44px;
    height:44px;
    border-radius: var(--radius-md);
    background: var(--md-sys-color-surface-container-high);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.event-card__headings{
    flex:1;
    min-width:0;
}

.event-card__title{
    font-size:17px;
    line-height:1.5;
    font-weight:800;
    color: var(--md-sys-color-on-surface);
    overflow-wrap:anywhere;
}

.event-card__chips{
    margin-top: var(--space-sm);
}

.event-card__date{
    font-size:13px;
    line-height:1.7;
    color: var(--md-sys-color-on-surface-variant);
    overflow-wrap:anywhere;
    margin-bottom: var(--space-md);
}

.event-card__digest{
    font-size:14.5px;
    line-height:1.8;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container);
    border:1px solid var(--outline-nested);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    overflow-wrap:anywhere;
    margin-bottom: var(--space-md);
}

.event-card__digest-label{
    display:block;
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    color: var(--md-sys-color-primary);
    margin-bottom:2px;
}

.event-card__footer{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* ================= details (詳細を見る / ボーナス) ================= */
.detail-block{
    border:1px solid var(--outline-nested);
    border-radius: var(--radius-md);
    background: var(--md-sys-color-surface-container);
    margin-bottom: var(--space-md);
    overflow:hidden;
}

.detail-block > summary{
    display:flex;
    align-items:center;
    gap: var(--space-sm);
    min-height:48px;
    padding: 0 var(--space-lg);
    font-size:13.5px;
    font-weight:700;
    color: var(--md-sys-color-on-surface-variant);
    cursor:pointer;
    list-style:none;
    -webkit-tap-highlight-color: transparent;
}

.detail-block > summary::-webkit-details-marker{ display:none; }

.detail-block > summary::after{
    content:"";
    margin-left:auto;
    width:8px;
    height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--duration-short) var(--easing-standard);
}

.detail-block[open] > summary::after{
    transform: rotate(-135deg) translateY(-2px);
}

.detail-block > summary:hover{ background: var(--state-hover); }

/* 親の overflow:hidden(角丸のためのクリップ)で外側のフォーカスリングが
   切り取られてしまうため、summaryのリングだけ内側に描く。 */
.detail-block > summary:focus-visible{
    outline-offset:-3px;
    border-radius: var(--radius-md);
}

.detail-block__body{
    padding: 0 var(--space-lg) var(--space-lg);
    font-size:13.5px;
    line-height:1.9;
    color: var(--md-sys-color-on-surface-variant);
}

.detail-block__body p{
    overflow-wrap:anywhere;
}

.detail-block__body p + p,
.detail-block__body .chip-row + p,
.detail-block__body p + .chip-row,
.detail-block__body p + .bonus-list{
    margin-top: var(--space-md);
}

.detail-heading{
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: var(--space-xs);
}

.bonus-list{
    list-style:none;
    display:grid;
    gap: var(--space-sm);
}

.bonus-list li{
    position:relative;
    padding-left: var(--space-lg);
    overflow-wrap:anywhere;
}

.bonus-list li::before{
    content:"";
    position:absolute;
    left:2px;
    top:11px;
    width:6px;
    height:6px;
    border-radius: var(--radius-full);
    background: var(--md-sys-color-primary);
}

/* ================= raid boss ================= */
.raid-boss-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.raid-boss-card{
    display:flex;
    align-items:center;
    gap: var(--space-md);
    padding: var(--space-md);
    border:1px solid var(--outline-nested);
    border-radius: var(--radius-md);
    background: var(--md-sys-color-surface-container);
    min-width:0;
}

.raid-boss-img-wrap{
    position:relative;
    flex:none;
    width:56px;
    height:56px;
    border-radius: var(--radius-full);
    background: var(--md-sys-color-surface-container-highest);
    display:flex;
    align-items:center;
    justify-content:center;
}

.raid-boss-img{
    width:48px;
    height:48px;
    object-fit:contain;
    display:block;
}

.shiny-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    width:22px;
    height:22px;
    border-radius: var(--radius-full);
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.raid-boss-info{
    flex:1;
    min-width:0;
}

.raid-boss-name{
    font-size:14.5px;
    font-weight:800;
    line-height:1.4;
    overflow-wrap:anywhere;
}

.raid-boss-types{
    margin: var(--space-xs) 0;
}

.raid-boss-types .chip{
    min-height:24px;
    padding: 0 var(--space-sm);
    font-size:11px;
    border-radius: var(--radius-xs);
}

.raid-boss-cp{
    font-size:13px;
    font-weight:700;
    color: var(--md-sys-color-on-surface);
    font-variant-numeric: tabular-nums;
}

.raid-boss-cp-note{
    font-size:11px;
    font-weight:600;
    color: var(--md-sys-color-on-surface-variant);
}

.raid-boss-shiny{
    font-size:11.5px;
    font-weight:700;
    margin-top:2px;
}

.raid-boss-shiny.available{ color: var(--md-sys-color-tertiary); }
.raid-boss-shiny.unavailable{ color: var(--md-sys-color-on-surface-variant); }

/* ================= states (loading / error / empty) ================= */
.skeleton-wrap{
    display:grid;
    gap: var(--space-md);
}

.skeleton-card{
    height:132px;
    border-radius: var(--radius-lg);
    background: var(--md-sys-color-surface-container-low);
    position:relative;
    overflow:hidden;
}

.skeleton-card::after{
    content:"";
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background: linear-gradient(90deg, transparent, var(--state-hover), transparent);
    transform: translateX(-100%);
    animation: skeletonSweep 1.4s infinite;
}

@keyframes skeletonSweep{
    100%{ transform: translateX(100%); }
}

.skeleton-card:first-child{ height:196px; }

.state-card{
    background: var(--md-sys-color-surface-container-low);
    border:1px solid var(--outline-panel);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-lg);
    text-align:center;
}

.state-card .state-icon{
    font-size:36px;
    display:block;
    margin-bottom: var(--space-md);
}

.state-card h2{
    font-size:18px;
    font-weight:800;
    margin-bottom: var(--space-sm);
}

.state-card p{
    font-size:14px;
    line-height:1.8;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: var(--space-lg);
}

.waking-notice{
    font-size:13.5px;
    line-height:1.7;
    text-align:center;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: var(--space-lg);
}

.stale-banner{
    display:flex;
    align-items:flex-start;
    gap: var(--space-md);
    text-align:left;
    padding: var(--space-lg);
    background: var(--md-sys-color-error-container);
    margin-bottom: var(--space-lg);
}

.stale-banner .state-icon{
    font-size:20px;
    margin:0;
}

.stale-banner p{
    margin:0;
    font-size:13px;
    line-height:1.7;
    color: var(--md-sys-color-on-error-container);
}

.retry-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding: var(--space-md) var(--space-xl);
    border:none;
    border-radius: var(--radius-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

.retry-btn:hover{ background:#98daff; }

/* ================= footer ================= */
.site-footer{
    max-width: var(--content-max);
    margin:0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-2xl);
    text-align:center;
    font-size:12px;
    line-height:1.8;
    color: var(--md-sys-color-on-surface-variant);
    border-top:1px solid var(--md-sys-color-outline-variant);
}

.site-footer p{ margin:0; }

.footer-sub{
    font-size:11px;
    max-width:520px;
    margin: var(--space-xs) auto 0;
}

/* ================= calendar page =================
   情報量が多いページなので、トップほどExpressiveにせず可読性を優先する。 */
.cal-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.cal-range{
    font-size:15px;
    font-weight:800;
    font-variant-numeric: tabular-nums;
}

.cal-legend{
    display:flex;
    flex-wrap:wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.legend-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:28px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-xs);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    font-size:11.5px;
    font-weight:600;
    white-space:nowrap;
}

.legend-dot{
    width:8px;
    height:8px;
    border-radius:2px;
    background: var(--dot-color, var(--md-sys-color-primary));
}

.cal-hint{
    margin-top: var(--space-md);
    font-size:12.5px;
    line-height:1.7;
    color: var(--md-sys-color-on-surface-variant);
    text-align:center;
}

/* ---- timeline ---- */
.cal-timeline-wrap{
    position:relative;
    padding: var(--space-lg) var(--space-md) var(--space-md);
}

.cal-timeline-scroll{
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom: var(--space-sm);
    -webkit-overflow-scrolling:touch;
}

/* 「今日」は常に一番左だが2週間分は横に収まりきらないことが多いため、
   まだ右にスクロールできる間だけ右端をフェードさせて続きがあることを示す
   (calendar.js の initTimelineScrollShadow がクラスを付け外しする)。 */
.cal-timeline-wrap.has-more-right::after{
    content:"";
    position:absolute;
    top: var(--space-lg);
    right:0;
    bottom: var(--space-xl);
    width:36px;
    background: linear-gradient(to right, rgba(22,27,33,0), rgba(22,27,33,.95));
    pointer-events:none;
}

.cal-timeline{
    display:grid;
    grid-template-columns: repeat(14, 56px);
    column-gap:4px;
    row-gap:6px;
    min-width:max-content;
}

.cal-day-header{
    grid-row:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:2px;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom:1px solid var(--md-sys-color-outline-variant);
}

.cal-day-header .wd{
    font-size:10px;
    font-weight:700;
    color: var(--md-sys-color-on-surface-variant);
}

.cal-day-header .num{
    font-size:14px;
    font-weight:800;
    color: var(--md-sys-color-on-surface);
    font-variant-numeric: tabular-nums;
}

.cal-day-header.sat .num{ color: var(--md-sys-color-primary); }
.cal-day-header.sun .num{ color: var(--md-sys-color-error); }

/* 今日: 下線の色だけでなく、日付を塗りつぶしたピルにして形でも分かるようにする */
.cal-day-header.today{
    border-bottom-color: var(--md-sys-color-primary);
    border-bottom-width:2px;
}

.cal-day-header.today .num{
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-radius: var(--radius-full);
    min-width:26px;
    text-align:center;
}

.cal-bar{
    border:none;
    border-radius: var(--radius-xs);
    background: var(--type-color, var(--md-sys-color-primary));
    color:#0b1016;
    font-size:12px;
    line-height:26px;
    height:26px;
    text-align:center;
    padding:0;
    cursor:pointer;
    overflow:hidden;
    white-space:nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: filter var(--duration-short) var(--easing-standard);
}

.cal-bar:hover,
.cal-bar:focus-visible,
.cal-bar.active{
    filter: brightness(1.12);
    box-shadow: 0 0 0 2px var(--md-sys-color-on-surface);
    position:relative;
    z-index:2;
}

/* ---- raid panel ---- */
.raid-panel{
    margin-bottom: var(--space-xl);
}

.raid-panel-head{
    margin-bottom: var(--space-lg);
}

.raid-panel-head h2{
    font-size:19px;
    font-weight:800;
}

.raid-block{
    padding-top: var(--space-lg);
    border-top:1px solid var(--md-sys-color-outline-variant);
}

.raid-block:first-of-type{
    padding-top:0;
    border-top:none;
}

.raid-block-title{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap: var(--space-sm);
    font-size:14px;
    font-weight:800;
    margin-bottom: var(--space-md);
}

.raid-block-dot{
    width:10px;
    height:10px;
    border-radius: var(--radius-full);
    flex:none;
}

.raid-block-dot.live{ background: var(--md-sys-color-success); }

/* 「次のレイド」は塗りつぶしではなく輪郭にして、開催中と形でも区別する */
.raid-block-dot.next{
    background:transparent;
    box-shadow: inset 0 0 0 2px var(--md-sys-color-on-surface-variant);
    border-radius:2px;
}

.raid-block-range{
    font-size:12px;
    font-weight:600;
    color: var(--md-sys-color-on-surface-variant);
    font-variant-numeric: tabular-nums;
}

.raid-block-next .raid-boss-card{
    opacity:.85;
}

.raid-boss-card-link{
    cursor:pointer;
    text-align:left;
    width:100%;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration-short) var(--easing-standard);
}

.raid-boss-card-link:hover,
.raid-boss-card-link:focus-visible,
.raid-boss-card-link.active{
    background: var(--md-sys-color-surface-container-highest);
}

/* ---- パネル内の汎用カード (マックスバトルなど、レイドボス以外の情報) ---- */
.panel-card-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: var(--space-sm);
}

.panel-card{
    display:flex;
    align-items:flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border:1px solid var(--outline-nested);
    border-radius: var(--radius-md);
    background: var(--md-sys-color-surface-container);
    min-width:0;
    cursor:pointer;
    text-align:left;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration-short) var(--easing-standard);
}

.panel-card:hover,
.panel-card:focus-visible,
.panel-card.active{
    background: var(--md-sys-color-surface-container-highest);
}

.panel-card__icon{
    flex:none;
    width:40px;
    height:40px;
    border-radius: var(--radius-full);
    background: var(--md-sys-color-surface-container-highest);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

/* 対象ポケモンの画像をアイコン位置に出す場合 */
.panel-card__icon--boss{
    display:flex;
    align-items:center;
    width:48px;
    height:48px;
    background:transparent;
}

.panel-card__icon--boss .raid-boss-img-wrap{
    width:48px;
    height:48px;
}

.panel-card__icon--boss .raid-boss-img{
    width:40px;
    height:40px;
}

.panel-card__body{
    flex:1;
    min-width:0;
}

/* 複数匹が対象の回(スポットライトアワー等)はアイコンを横に並べる */
.panel-card__icon--boss.is-multi{
    width:auto;
    gap:2px;
}

.panel-card__icon--boss.is-multi .raid-boss-img-wrap{
    width:36px;
    height:36px;
}

.panel-card__icon--boss.is-multi .raid-boss-img{
    width:30px;
    height:30px;
}

.panel-card__icon--boss.is-multi .shiny-badge{
    width:16px;
    height:16px;
    font-size:9px;
    top:-2px;
    right:-2px;
}

.panel-card__types{
    margin-top: var(--space-xs);
}

.panel-card__bonus{
    margin-top: var(--space-xs);
    font-size:12.5px;
    line-height:1.6;
    color: var(--md-sys-color-on-surface-variant);
    overflow-wrap:anywhere;
}

.panel-card__title{
    font-size:14.5px;
    font-weight:800;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.panel-card__period{
    margin-top:2px;
    font-size:12.5px;
    font-weight:600;
    color: var(--md-sys-color-primary);
    font-variant-numeric: tabular-nums;
}

.panel-card__digest{
    margin-top: var(--space-xs);
    font-size:12.5px;
    line-height:1.7;
    color: var(--md-sys-color-on-surface-variant);
    overflow-wrap:anywhere;
}

.raid-later-list{
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top:1px solid var(--md-sys-color-outline-variant);
}

.raid-later-label{
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: var(--space-sm);
}

.raid-later-list ul{
    list-style:none;
    display:grid;
    gap: var(--space-sm);
}

.raid-later-list li{
    font-size:13px;
    line-height:1.7;
    color: var(--md-sys-color-on-surface);
    overflow-wrap:anywhere;
}

.raid-later-date{
    display:inline-block;
    margin-right: var(--space-sm);
    font-weight:800;
    color: var(--md-sys-color-primary);
    font-variant-numeric: tabular-nums;
}

/* ================= event popover =================
   デスクトップはアンカー付近に浮かぶカード、640px以下はボトムシート
   (calendar.js の positionPopover が 640px 以下では位置指定をスキップする)。 */
.event-popover{
    position:fixed;
    border:1px solid var(--outline-panel);
    top:0; left:0;
    width: min(360px, calc(100vw - 24px));
    max-height: min(70vh, 540px);
    overflow-y:auto;
    z-index:100;
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--radius-xl);
    box-shadow: var(--elevation-3);
    padding: var(--space-sm);
}

.event-popover .event-card{
    background:transparent;
    border:none;
    padding: var(--space-md);
}

.popover-close{
    position:sticky;
    top: var(--space-xs);
    float:right;
    width:36px;
    height:36px;
    border-radius: var(--radius-full);
    border:none;
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface-variant);
    cursor:pointer;
    font-size:13px;
    line-height:1;
    z-index:2;
}

.popover-close:hover{ color: var(--md-sys-color-on-surface); }

/* ================= install guide page ================= */
.install-intro h2{
    font-size:20px;
    font-weight:800;
    margin-bottom: var(--space-md);
}

.install-intro p{
    font-size:14px;
    line-height:1.9;
    color: var(--md-sys-color-on-surface-variant);
}

.install-steps ol{
    padding-left: var(--space-xl);
    font-size:14.5px;
    line-height:2;
}

.install-steps li{ margin-bottom: var(--space-xs); }

.install-note{
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top:1px solid var(--md-sys-color-outline-variant);
    font-size:12.5px;
    line-height:1.8;
    color: var(--md-sys-color-on-surface-variant);
}

.install-note-card{
    text-align:center;
    font-size:13.5px;
    line-height:1.8;
    color: var(--md-sys-color-on-surface-variant);
}

.install-guide .surface{
    margin-bottom: var(--space-md);
}

/* ================= responsive ================= */
@media (max-width: 400px){
    .container{ padding-left: var(--space-md); padding-right: var(--space-md); }
    .today-hero{ padding: var(--space-lg) var(--space-lg) var(--space-md); }
    .today-hero__action{ font-size:23px; }
    .today-hero__actions .btn--filled{ min-width:0; width:100%; }
    .nav-item__indicator{ width:56px; }
    .raid-boss-grid{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
    /* モバイルではポップオーバーをボトムシートにする */
    .event-popover{
        top:auto !important;
        left:0 !important;
        right:0;
        bottom:0;
        width:100%;
        max-width:100%;
        max-height:78vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
    }
}

@media (min-width: 641px){
    .today-hero__action{ font-size:30px; }
    .event-grid{ grid-template-columns: repeat(2, 1fr); }
    .event-popover .event-card{ padding: var(--space-lg); }

    /* 画面が広いときはCTAを横いっぱいに伸ばさず、内容ぶんの幅にとどめる */
    .today-hero__actions .btn--filled{ flex:0 0 auto; }
}

/* デスクトップではナビゲーションを画面上部に移す */
@media (min-width: 769px){
    body{
        padding-bottom: var(--space-2xl);
        padding-top: var(--nav-height);
    }

    .nav-bar{
        top:0;
        bottom:auto;
        border-top:none;
        border-bottom:1px solid var(--md-sys-color-outline-variant);
        gap: var(--space-md);
        padding: var(--space-sm) var(--space-lg);
    }

    .nav-item{
        flex:0 0 auto;
        max-width:none;
        flex-direction:row;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-lg);
        border-radius: var(--radius-full);
    }

    .nav-item__indicator{
        width:auto;
        height:auto;
        background:transparent;
    }

    .nav-item.is-active{
        background: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
    }

    .nav-item.is-active .nav-item__indicator{
        background:transparent;
    }

    .nav-item__label{ font-size:14px; }
}

/* ================= motion preferences ================= */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }

    *,
    *::before,
    *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}