@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/archivo.ttf") format("truetype")}
:root {
    --brand-navy:#011435; --brand-pitch:#d9dfc7; --brand-paper:#f7f4ee;
    --bg:#f7f4ee; --panel:#fff; --ink:#011435; --muted:#444141; --line:#c6c2b9;
    --accent:#ec3013; --accent-ink:#ae1800; --accent-soft:#d9dfc7; --bad:#ae1800;
    --home:#011435; --away:#605d5d; --tag-short:#011435; --tag-extended:#011435;
    --tag-full:#ae1800; --shadow:none; --rule:2px; --hairline:1px;
    --radius-sm:0px; --radius-md:0px; --radius-lg:0px; --score-loser:#605d5d;
    --font-heading:"Archivo","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
    --font-body:"Archivo","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
    --label-min:10.5px;
    /* why(#303 v2): シーズン・対戦カード共通の一覧部品(ヒーロー/見出し/行)が使う
       トークン。ライト・ダークで反転するのはここだけで、部品側のCSSに
       [data-theme] や prefers-color-scheme を直接書かなくて済むようにする。 */
    --hero-bg:#011435; --hero-rule:rgba(217,223,199,.35); --heading-rule:rgba(1,20,53,.35);
    --row-rule:rgba(1,20,53,.22); --thumb-rule:rgba(1,20,53,.3); --tag-ink:#fff;
  }
  @media (prefers-color-scheme:dark){
    :root{--bg:#060d20;--panel:#0e1832;--ink:#eef1f6;--muted:#c9d2e2;--line:rgba(217,223,199,.32);
      --accent:#ec3013;--accent-ink:#d9dfc7;--accent-soft:#0a1228;--bad:#ff9783;
      --home:#d9dfc7;--away:#aab4c8;--tag-short:#d9dfc7;--tag-extended:#d9dfc7;--tag-full:#ae1800;--score-loser:#aab4c8;
      --hero-bg:#0c1530;--hero-rule:rgba(217,223,199,.32);--heading-rule:rgba(217,223,199,.4);
      --row-rule:rgba(217,223,199,.25);--thumb-rule:rgba(217,223,199,.45);--tag-ink:#0a1228}
  }
  :root[data-theme="light"]{--bg:#f7f4ee;--panel:#fff;--ink:#011435;--muted:#444141;--line:#c6c2b9;--accent:#ec3013;--accent-ink:#ae1800;--accent-soft:#d9dfc7;--bad:#ae1800;--home:#011435;--away:#605d5d;--tag-short:#011435;--tag-extended:#011435;--tag-full:#ae1800;--shadow:none;--score-loser:#605d5d;--hero-bg:#011435;--hero-rule:rgba(217,223,199,.35);--heading-rule:rgba(1,20,53,.35);--row-rule:rgba(1,20,53,.22);--thumb-rule:rgba(1,20,53,.3);--tag-ink:#fff}
  :root[data-theme="dark"]{--bg:#060d20;--panel:#0e1832;--ink:#eef1f6;--muted:#c9d2e2;--line:rgba(217,223,199,.32);--accent:#ec3013;--accent-ink:#d9dfc7;--accent-soft:#0a1228;--bad:#ff9783;--home:#d9dfc7;--away:#aab4c8;--tag-short:#d9dfc7;--tag-extended:#d9dfc7;--tag-full:#ae1800;--shadow:none;--score-loser:#aab4c8;--hero-bg:#0c1530;--hero-rule:rgba(217,223,199,.32);--heading-rule:rgba(217,223,199,.4);--row-rule:rgba(217,223,199,.25);--thumb-rule:rgba(217,223,199,.45);--tag-ink:#0a1228}
  *{box-sizing:border-box}
  /* why: 「トップへ戻る」の滑らかな移動はCSS側で指定する。JS の scrollTo に
     behavior:"smooth" を渡す形は環境によって無視される(スクロールしない)ため。
     動きを減らす設定の利用者には即時ジャンプにする。 */
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;background:var(--bg);color:var(--ink);line-height:1.55;
    font-family:var(--font-body);
    font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%}
  a{color:inherit;text-decoration:none}

  /* --- ツールバー --- */
  .toolbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--panel) 88%,transparent);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-top:14px}
  /* why: 1段目=ブランドと言語、2段目=絞り込みと共有。役割ごとに行を分けると、
     セレクトが増えてもブランド行が押し出されない。 */
  .toolbar-inner{max-width:1120px;margin:0 auto;padding:12px 18px;display:flex;
    flex-direction:column;gap:10px}
  /* --tb-gap: 絞り込み行の列の余白。畳んだ行(issue #341)からも参照するので、
     数値はここ1か所だけで持つ。 */
  .tb-row{--tb-gap:22px;display:flex;align-items:flex-end;gap:16px var(--tb-gap);flex-wrap:wrap}
  .brand{font-weight:800;font-size:18px;margin-right:auto;display:flex;align-items:center;gap:8px}
  /* why: キャッチコピーはサイト名と同じく全言語共通の固定文言。3行で読ませたいので
     ブランド名の右に小さく積み、ロゴ・サイト名とはベースラインでなく中央で揃える。 */
  .brand small{font-weight:500;color:var(--muted);font-size:11.5px;line-height:1.35}
  /* why(issue #241): 3行の <br> をやめて空白区切りの3スパンにした。PC はここで
     各スパンをブロック化して従来どおり3行に見せ、幅720px以下だけ inline に
     戻して1行にする(見た目の3行/1行はブロック切り替えだけで実現する)。 */
  .tagline span{display:block}
  .brand-name{white-space:nowrap}
  /* why: 正式リリース前であることを示す表示。サイト名の従属要素なので、小さく
     ミュート色のピルに留める。折り返すと版数が読めなくなるので nowrap で
     サイト名と同じ行に固定し、幅が足りないときはキャッチコピー側を折り返させる。 */
  .brand-version{flex:none;white-space:nowrap;font-weight:600;font-size:11px;
    letter-spacing:.02em;color:var(--muted);border:1px solid var(--line);
    border-radius:999px;padding:2px 8px;line-height:1.3}
  .brand-logo{width:30px;height:30px;border-radius:8px;object-fit:cover;display:block;
    border:1px solid var(--line)}
  /* why: 更新告知の導線。サイト名と並ぶ主要素ではないので、セレクトと同じ高さの
     枠に収めたうえでミュート色に落とし、ホバー時だけアクセント色にする。 */
  .brand-x{flex:none;display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;color:var(--muted);border:1px solid var(--line);
    border-radius:9px;text-decoration:none}
  .brand-x:hover{color:var(--accent-ink);border-color:var(--accent)}
  .brand-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  /* why(issue #110): 問い合わせ・お知らせ・報告・協賛の導線はフッタにもあるが、
     一覧が長いので最下部まで届かない。上からも開けるようにする。
     why(畳む): 4項目を横に並べるとツールバーが1段高くなり、固定ぶんだけ一覧の
     見える範囲が減る。普段は 1 つのボタンに畳み、押したときだけ出す。 */
  .tb-menu{flex:none;position:relative}
  .tb-menu-btn{display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;background:none;color:var(--muted);
    border:1px solid var(--line);border-radius:9px;font:inherit;font-size:17px;
    line-height:1;cursor:pointer}
  .tb-menu-btn:hover{color:var(--accent-ink);border-color:var(--accent)}
  .tb-menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .tb-menu-btn[aria-expanded="true"]{color:var(--accent-ink);border-color:var(--accent)}
  /* why(不透明): ツールバー自体は半透明なので、同じ背景だと一覧の文字が透けて
     項目が読めない。ここだけ panel をそのまま敷く。 */
  .tb-menu-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:30;
    min-width:210px;display:flex;flex-direction:column;background:var(--panel);
    border:1px solid var(--line);border-radius:11px;padding:6px;
    box-shadow:0 10px 28px rgba(0,0,0,.14)}
  .tb-menu-panel[hidden]{display:none}
  .tb-menu-item{display:block;width:100%;text-align:left;background:none;border:0;
    border-radius:8px;color:var(--ink);font:inherit;font-size:13.5px;
    padding:9px 10px;cursor:pointer;text-decoration:none;white-space:nowrap}
  .tb-menu-item:hover{background:var(--accent-soft);color:var(--accent-ink)}
  .tb-menu-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .field{display:flex;flex-direction:column;gap:4px}
  .field label{font-size:11px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
  .field select{appearance:none;background:var(--panel);color:var(--ink);border:1px solid var(--line);
    border-radius:9px;padding:8px 30px 8px 12px;font:inherit;font-size:14px;cursor:pointer;min-width:150px;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .field select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .field-lang select{min-width:120px}
  /* 行の確保と背景の幅を分離し、背景はメニューの内容幅だけに合わせる。 */
  .search-tabs-row{width:100%;min-width:0}
  .search-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;max-width:100%;margin:0 auto 0 0;padding:5px;width:max-content;
    position:relative;isolation:isolate;border:1px solid var(--line);border-radius:12px;
    background:color-mix(in srgb,var(--muted) 12%,var(--panel));box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
  .search-tab-buttons{display:flex;flex-shrink:0;gap:4px}
  .search-tabs button,.search-tabs a{position:relative;z-index:1;border:0;border-radius:8px;background:transparent;
    color:var(--muted);font:inherit;font-weight:600;font-size:13px;padding:9px 16px;cursor:pointer;flex-shrink:0;white-space:nowrap}
  .search-tabs a{text-decoration:none;display:inline-flex;align-items:center}
  .search-tabs button[aria-selected="true"],.search-tabs a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-ink)}
  .search-tabs.liquid-ready button[aria-selected="true"],.search-tabs.liquid-ready a[aria-current="page"]{background:transparent}
  .search-tabs button:focus-visible,.search-tabs a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  #search-tab-indicator{display:none;position:absolute;left:0;pointer-events:none;z-index:0;border-radius:8px;
    background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 2px 7px rgba(0,0,0,.12)}
  .search-tabs.liquid-ready #search-tab-indicator{display:block;
    transition:transform .48s cubic-bezier(.34,1.4,.64,1),width .48s cubic-bezier(.34,1.4,.64,1)}
  @media (prefers-reduced-motion:reduce){.search-tabs.liquid-ready #search-tab-indicator{transition:none}}
  [hidden]{display:none!important}
  .h2h-side{display:flex;gap:12px;align-items:flex-end;border:0;margin:0;padding:0;min-width:0}
  .h2h-side legend{font-size:11px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;
    padding:0 0 4px}
  .h2h-vs{align-self:center;color:var(--muted);font-weight:700;padding:0 4px}
  body.h2h-mode .season-only-option,body.h2h-mode #nav-best{display:none}
  /* why(issue #337): 赤いボタンのパネル(#month-panel)は対戦カードでも使い回すが、
     月タイル・パネル見出しのシーズン名は月という概念が無いので出さない。
     大会チップ(#month-competitions)と .options-body はそのまま出す。 */
  body.h2h-mode #month-grid,body.h2h-mode #month-panel-season{display:none}
  /* why(issue #309): 新着タブは国/クラブ/シーズンを選ぶモードではないので、
     h2h-mode が隠しているのと同じ範囲(シーズン検索専用の検索オプション)を隠す。
     オプション欄自体は JS 側で hidden にするので、ここは保険。 */
  body.latest-mode .season-only-option,body.latest-mode #nav-best{display:none}

  /* --- 検索オプション(折りたたみ) --- */
  .options{flex-basis:100%;max-width:1120px;margin:0 auto;padding:0 18px 12px;width:100%}
  .options>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
    font-size:12px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);
    border-radius:999px;padding:5px 12px;user-select:none}
  .options>summary::-webkit-details-marker{display:none}
  .options>summary::before{content:"▸";font-size:10px;transition:transform .12s}
  .options[open]>summary::before{transform:rotate(90deg)}
  .options>summary:hover{border-color:var(--accent);color:var(--accent)}
  .options-body{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:flex-start;
    border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:12px 14px;margin-top:10px}
  .opt-group{display:flex;flex-direction:column;gap:7px}
  .opt-title{font-size:11px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
  .checks{display:flex;flex-wrap:wrap;gap:6px 14px}
  .checks label{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
  .checks input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
  .checks .none{font-size:13px;color:var(--muted)}
  .switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
  .switch input{appearance:none;margin:0;width:40px;height:22px;border-radius:999px;position:relative;
    background:var(--line);border:1px solid var(--line);cursor:pointer;transition:background .15s}
  .switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
    background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
  .switch input:checked{background:var(--accent);border-color:var(--accent)}
  .switch input:checked::after{transform:translateX(18px)}
  .switch input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .opt-search{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px;
    padding:8px 12px;font:inherit;font-size:14px;min-width:210px;max-width:100%}
  .opt-search:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  /* 並べ替えの軸。検索オプション内の他の入力と同じ見た目に揃える
     (既定のセレクトのままだと、この1つだけ配色が浮く)。 */
  .opt-select{appearance:none;background:var(--panel);color:var(--ink);border:1px solid var(--line);
    border-radius:9px;padding:8px 30px 8px 12px;font:inherit;font-size:14px;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
      linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .opt-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .opt-reset{align-self:flex-end;background:none;border:1px solid var(--line);border-radius:9px;
    color:var(--muted);font:inherit;font-size:12px;padding:7px 12px;cursor:pointer}
  .opt-reset:hover{border-color:var(--accent);color:var(--accent)}

  /* --- レイアウト --- */
  /* why: 広告は自動広告(Google が配置を決める)に任せるため、左右レール用の列を
     持たない。本文だけの1カラムにして、読み幅をツールバーと揃える。 */
  .layout{max-width:1120px;margin:22px auto 0;padding:0 18px}

  /* --- 共有ページ(/m/ /t/)の静的本文 --- */
  /* why(issue #146): match.html / team.html は単一静的ページ時代の <style> を
     head に持っていた(main{max-width:640px} など)。#135 で SPA と同居させたとき、
     app.css の .layout(1120px) より後のソース順で勝ってしまい、共有リンクだけ
     試合カードが狭く表示される事故になった。パンくず・前後の試合・試合一覧に
     必要な最小限のルールだけをここへ移す。
     why(クラスセレクタのみ): main/body/h1/p/a/ul などの要素セレクタを足すと、
     SPA が描画した中身までここで上書きしてしまう(今回の事故そのもの)。
     必ずクラスセレクタで書くこと。
     why(CSS変数): 色をハードコードすると、OS のダークモードしか見ない
     @media (prefers-color-scheme:dark) を別に持つことになり、data-theme による
     明示的なテーマ切替と食い違う。ここでは :root の変数だけを使い、
     専用の dark メディアクエリは持たない。
     why(.static でリンクを包む): app.css の a{color:inherit;text-decoration:none}
     (このファイル上部)は SPA のカードが自前で装飾する前提で、静的本文の
     クラス無し <a>(動画リンク・試合一覧など)にもそのまま効いてしまい、
     地の文と見分けが付かなくなっていた(issue #146 の追加報告。実測で確認済み)。
     .videos a のように個々に指定を積み増すと、将来リンクを足すたびに書き足しを
     忘れる余地が残るため、静的本文全体を .static というコンテナに包んで、
     その配下のリンクをまとめて1箇所で装飾する。 */
  .crumb{font-size:13px;color:var(--muted)}
  .around{display:flex;justify-content:space-between;gap:16px;margin-top:18px;
    border-top:1px solid var(--line);padding-top:12px;font-size:13px}
  .fixtures{list-style:none;padding:0;margin:16px 0 0}
  .fixtures li{border-top:1px solid var(--line);padding:9px 0;font-size:14px}
  .fixtures .when{display:block;font-size:12px;color:var(--muted)}
  /* 見出し・本文の字組み。単一静的ページ時代の h1{font-size:20px} / p{font-size:13px}
     相当を、要素セレクタではなく .static 配下に限定して戻す(UA既定のh1(2em)の
     ままだと元の意図より大きく見た目が変わる)。 */
  .static h1{font-size:20px;margin:6px 0}
  .static p{margin:6px 0;color:var(--muted);font-size:13px}
  /* why(色+下線の両方): 色だけだと色覚特性によっては地の文との区別が付かない。
     アクセントカラーと下線の両方で「これはリンクだ」を示す。 */
  .static a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  .static a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

  .summary{color:var(--muted);font-size:13px;margin:0 0 14px}
  .summary b{color:var(--ink)}
  /* why(issue #309): 新着タブの「新着リンク / 直近の試合」の見出し。他の本文見出しと
     同じトーンにするため .options>summary 等と同じ色・字間を流用する。 */
  .latest-heading{font-size:15px;font-weight:700;color:var(--ink);margin:18px 0 10px}
  .latest-heading:first-child{margin-top:0}
  /* why(issue #313): 大会タグは .search-tabs の選択済みタブと同じ見た目にして、
     「フィルタ中である」ことを既存の視覚言語で伝える。 */
  .latest-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
  .latest-tags button{border:1px solid var(--line);border-radius:999px;background:transparent;
    color:var(--muted);font:inherit;font-size:12px;padding:6px 12px;cursor:pointer}
  .latest-tags button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
  .latest-tags button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  /* why: ビルド時に #content へ焼き込む静的な新着一覧(クローラ・JS無効向け)の
     最低限のスタイル。JS 起動後は同じ #content が上の matchSection 描画に
     差し替わるので、ここは凝らず .fixtures と同じ調子に揃える。 */
  .latest-static{margin:0 0 18px}
  .latest-list{list-style:none;padding:0;margin:10px 0 0}
  .latest-list li{border-top:1px solid var(--line);padding:10px 0;font-size:14px}
  .latest-list li:first-child{border-top:0}
  .latest-meta{color:var(--muted);font-size:13px}

  /* --- 試合セクション --- */
  .match{background:var(--panel);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow);padding:16px 18px 18px;margin-bottom:18px}
  /* why: 1行目=日付/Home-Away/大会、2行目=チーム名 と行を固定する。試合数が多いので
     行の意味が揃っていた方が縦に流し読みしやすい。 */
  .mhead{display:flex;flex-direction:column;gap:8px;
    padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
  .mrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .mdate{font-size:12.5px;color:var(--muted);white-space:nowrap}
  .ha{font-size:11px;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:6px;color:#fff}
  .ha.H{background:var(--home)} .ha.A{background:var(--away)} .ha.N{background:var(--muted)}
  .mteams{font-weight:800;font-size:16px;overflow-wrap:anywhere}
  .mteams .vs{color:var(--muted);font-weight:600;margin:0 6px;font-size:13px}
  .mscore{font-weight:800;font-size:15px;background:var(--accent-soft);color:var(--accent-ink);
    padding:2px 10px;border-radius:7px}
  .mcomp{font-size:11.5px;color:var(--muted);margin-left:auto;text-align:right}

  /* --- 共有ボタン(サイト全体 / 試合ごと) --- */
  /* why: SNS ごとの共有URLは別々なので、ボタンを3つ並べるとカードの見出し行が埋まる。
     押したときだけ開くメニューにして、通常表示は1つのボタンに畳む。 */
  /* why(issue #261): PC・スマホで同じ X・リンクコピー・OS標準共有メニューを使う。 */
  .share{position:relative;display:inline-flex}
  .share-btn{display:inline-flex;align-items:center;gap:5px;background:none;
    border:1px solid var(--line);border-radius:9px;color:var(--muted);font:inherit;
    font-size:12px;line-height:1;padding:6px 10px;cursor:pointer}
  .share-btn:hover{border-color:var(--accent);color:var(--accent)}
  .share-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .share-btn svg{width:14px;height:14px;fill:currentColor;flex:0 0 auto}
  .share-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:25;display:none;
    flex-direction:column;min-width:160px;padding:5px;background:var(--panel);
    border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
  .share.open .share-menu{display:flex}
  /* why(PR #321): 試合カードの共有ボタンは行の右端なのでメニューは左へ開く
     (既定の right:0)。ツールバーの共有セルも #search-season/#search-h2h の帯の
     最後のセル(右端)になったので、同じ理屈がそのまま当てはまる。以前はツールバーの
     ボタンが帯の下に絶対配置され左右の位置が別だったため left:0 で上書きしていたが、
     位置が揃った今は上書き不要(残すと右端で画面外へはみ出す)。 */
  .share-menu a,.share-menu button{display:block;width:100%;text-align:left;background:none;
    border:0;border-radius:7px;color:var(--ink);font:inherit;font-size:13px;
    padding:8px 10px;cursor:pointer}
  .share-menu a:hover,.share-menu button:hover{background:var(--accent-soft);color:var(--accent-ink)}
  .share-menu a:focus-visible,.share-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .share-note{font-size:11.5px;color:var(--accent);padding:2px 10px 6px}
  .mshare{margin-left:auto}
  /* 共有リンクから開いた試合。どのカードのことか一目で分かるように縁取る。 */
  .match.target{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),var(--shadow)}

  /* --- 試合の評価(👍 / 👎) --- */
  /* why: カードの右下に寄せる。中身(動画・注記)の下に置くので、上に余白を取って
     カルーセルと近づきすぎないようにする。狭い画面で折り返しても右寄せは保つ。 */
  .mreact{display:flex;align-items:center;justify-content:flex-end;gap:8px;
    flex-wrap:wrap;margin:14px 0 0}
  .react{display:inline-flex;align-items:center;gap:7px;background:none;
    border:1px solid var(--line);border-radius:999px;color:var(--muted);font:inherit;
    font-size:13px;line-height:1;padding:6px 13px;cursor:pointer}
  .react:hover{border-color:var(--accent);color:var(--accent)}
  .react:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  /* 自分が押した票。押せる/押した の区別を、色と枠の両方で示す。 */
  .react[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);
    color:var(--accent-ink)}
  /* 投票済みの試合。押し直せないことを、押せる見た目との差で示す。 */
  .react:disabled{cursor:default}
  .react:disabled:not([aria-pressed="true"]){opacity:.5}
  .react:disabled:hover{border-color:var(--line);color:var(--muted)}
  .react:disabled[aria-pressed="true"]:hover{border-color:var(--accent);color:var(--accent-ink)}
  .react .emoji{font-size:15px;line-height:1}
  /* why: 桁が増えたときにボタンの幅が動くと、カード全体が横にずれる。等幅数字と
     最小幅で、9 → 10 になっても見た目が動かないようにする。 */
  .react .rcount{font-variant-numeric:tabular-nums;min-width:1.1em;text-align:left}
  .react-note{font-size:11.5px;color:var(--bad)}
  /* 全シーズン横断のランキング。どのクラブ・シーズンの試合かはカードから読めないので足す。
     置き場所は検索オプションの中(issue #124)。見出しを持たないので、opt-reset と同じく
     下端に揃えて、見出しから始まる他のグループと高さの基準を合わせる。 */
  .best-btn{align-self:flex-end;background:none;border:1px solid var(--line);border-radius:9px;
    color:var(--muted);font:inherit;font-size:12px;line-height:1;padding:9px 12px;
    cursor:pointer;white-space:nowrap}
  .best-btn:hover{border-color:var(--accent);color:var(--accent)}
  .best-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .best-btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);
    color:var(--accent-ink)}
  .mwhere{font-size:11.5px;color:var(--accent);font-weight:700;margin-bottom:8px}

  /* --- カルーセル --- */
  .carousel{position:relative}
  .viewport{overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none}
  .viewport::-webkit-scrollbar{display:none}
  .track{display:flex;gap:14px;padding:2px}
  .vcard{flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start;display:flex;flex-direction:column;
    border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--panel);
    transition:border-color .12s,transform .12s}
  .vcard:hover{border-color:var(--accent);transform:translateY(-2px)}
  .vcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* why(issue #95): ページ内で再生するカードは <a> ではなく <button>。見た目は
     リンクのカードと同じにしたいので、ブラウザ既定のボタン装飾だけ打ち消す。 */
  button.vcard{font:inherit;color:inherit;text-align:left;padding:0;cursor:pointer}
  @media (max-width:820px){.vcard{flex-basis:calc((100% - 14px)/2)}}
  @media (max-width:540px){.vcard{flex-basis:86%}}

  .media{position:relative;aspect-ratio:16/9;background:var(--accent-soft);
    display:flex;align-items:center;justify-content:center;overflow:hidden}
  .media img{width:100%;height:100%;object-fit:cover;display:block}
  .logo-badge{position:absolute;top:7px;left:7px;display:flex;height:22px;align-items:center;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
  /* why(issue #95): このカードは別タブへ飛ばずその場で再生する、を押す前に伝える印。
     サムネイル中央の再生マークは動画配信サービス共通の作法なので説明が要らない。 */
  .play-badge{position:absolute;width:46px;height:46px;border-radius:50%;
    background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;
    pointer-events:none;transition:background .12s,transform .12s}
  .play-badge svg{margin-left:3px}
  .vcard:hover .play-badge{background:rgba(0,0,0,.75);transform:scale(1.08)}
  .logo-box{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted)}
  .logo-box .big{height:34px}
  .logo-box small{font-size:10px;letter-spacing:.05em}

  .vmeta{padding:9px 11px 11px;display:flex;flex-direction:column;gap:6px}
  .tag{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.04em;
    padding:2px 8px;border-radius:6px;color:#fff}
  .vtitle{font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}

  .navbtn{position:absolute;top:calc(50% - 34px);transform:translateY(-50%);z-index:3;
    width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
    color:var(--ink);cursor:pointer;box-shadow:var(--shadow);display:none;align-items:center;
    justify-content:center;font-size:17px}
  .navbtn:hover{border-color:var(--accent);color:var(--accent)}
  .navbtn:focus-visible{outline:2px solid var(--accent)}
  .navbtn.prev{left:-6px} .navbtn.next{right:-6px}
  .carousel.has-overflow .navbtn{display:flex}

  .notfound{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;
    background:var(--accent-soft);border-radius:9px;padding:12px 14px;flex-wrap:wrap}
  .notfound .bad{color:var(--bad);font-weight:700}
  .notfound .soon{color:var(--accent-ink);font-weight:700}
  .nf-note{font-size:11.5px;color:var(--muted);margin-top:10px}
  .nf-note b{color:var(--bad)}

  footer{max-width:1120px;margin:8px auto 40px;padding:16px 18px;color:var(--muted);
    font-size:11.5px;border-top:1px solid var(--line);line-height:1.7}
  footer p{margin:0}
  .foot-links{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
  /* why(issue #134): クローラ向けのサイト内リンク一覧。閲覧者にはツールバーの選択と
     重複する情報なので、既定は畳んでおいて画面を占有させない(畳んでいても
     クローラからは見えている)。 */
  .site-index{margin-bottom:12px}
  .site-index summary{cursor:pointer;color:var(--accent);width:fit-content}
  .site-index summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
    border-radius:3px}
  .site-index-group{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 10px;
    align-items:baseline}
  .site-index-group a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  /* why: ポリシーは別ページではなくダイアログで開く(1ページSPAのままにする)。
     見た目はリンク、実体はボタン。href が無いので押しても遷移せず、キーボードでも押せる。 */
  .linklike{background:none;border:0;padding:0;font:inherit;color:var(--accent);
    cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .linklike:hover{color:var(--accent-ink)}
  .linklike:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
  .foot-sep{opacity:.5}
  .empty{padding:60px 20px;text-align:center;color:var(--muted)}

  /* --- ポリシー / 運営者情報ダイアログ --- */
  /* why: AdSense の審査ではプライバシーポリシーと連絡先の掲載が要る。1ページSPAの構成を
     崩さずに済ませるため <dialog> で重ねる。URL の #privacy / #contact でも開けるように
     してあるので、審査時にリンクとして提出できる。 */
  /* why: ダイアログ自身ではなく本文(.sheet-body)をスクロールさせる。列フレックスにして
     本文に余白を全部渡さないと、見出しごと dialog 側が縦スクロールしてしまい、
     #contact で開いたときに JS からスクロール位置を合わせられない。 */
  .sheet{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);
    padding:0;width:min(720px,calc(100vw - 32px));max-height:min(80vh,760px);box-shadow:var(--shadow);
    display:flex;flex-direction:column;overflow:hidden}
  .sheet:not([open]){display:none}
  .sheet::backdrop{background:rgba(0,0,0,.5)}
  .sheet-head{display:flex;align-items:center;gap:12px;padding:16px 18px 12px;flex:0 0 auto;
    border-bottom:1px solid var(--line);background:var(--panel);border-radius:14px 14px 0 0}
  .sheet-head h2{margin:0;font-size:16px;flex:1}
  .sheet-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
    background:var(--panel);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
  .sheet-close:hover{border-color:var(--accent);color:var(--accent)}
  .sheet-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .sheet-body{padding:14px 18px 20px;overflow-y:auto;font-size:13px;line-height:1.75;
    flex:1 1 auto;min-height:0}
  .sheet-body h3{margin:18px 0 6px;font-size:13.5px;color:var(--accent-ink)}
  .sheet-body h3:first-of-type{margin-top:4px}
  .sheet-body p{margin:0 0 8px}
  .sheet-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  .sheet-meta{color:var(--muted);font-size:11.5px;margin:0 0 10px}
  .sheet-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 8px}
  /* --- 協賛(スポンサー) --- */
  /* why: ポリシーと同じ <dialog>(.sheet)に載せる。決済は Stripe のページへ遷移する
     ので、こちら側に持つのは案内と規約だけ。等級は金額の高い順に並ぶ(整列は
     設定の読み込み側で済ませてある)。 */
  .spon-tiers{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
  /* why(縦積み): 1等級 = 1枠の中に、月額と年額の行を積む(issue #94)。横に
     並べると、金額2つとボタン2つが幅を奪い合って狭い画面で折り返しが読めなくなる。
     等級名を見出しにして、その下に支払い方ごとの行を置く形にしている。 */
  .spon-tier{display:flex;flex-direction:column;gap:6px;
    border:1px solid var(--line);border-radius:8px;padding:10px 12px}
  .spon-name{font-weight:700;font-size:13.5px}
  .spon-plan{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  /* why: 金額は縦に並ぶので等幅の数字にする(桁がずれると比較しにくい)。 */
  .spon-amount{color:var(--muted);font-variant-numeric:tabular-nums;
    margin-right:auto;white-space:nowrap}
  /* why: セレクタを .sheet-body a.spon-cta にしているのは詳細度のため。上の
     .sheet-body a{color:var(--accent)} の方が .spon-cta 単体より強く、単体だと
     文字色が背景と同じ緑になってラベルが消える(実際に一度そうなった)。 */
  .sheet-body a.spon-cta{display:inline-block;background:var(--accent);color:#fff;
    text-decoration:none;font-weight:700;font-size:12.5px;
    padding:7px 16px;border-radius:999px;white-space:nowrap}
  .sheet-body a.spon-cta:hover{background:var(--accent-ink);color:#fff}
  .sheet-body a.spon-cta:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* --- 常設のスポンサー欄(フッタ手前) --- */
  /* why: 中間ページを挟まず、読者が必ず通る本文の末尾に置く(docs/sponsorship.md
     「検討して採らなかった案」)。等級ごとにロゴの高さを変えて格の差を出す。 */
  .sponsors{max-width:1120px;margin:24px auto 0;padding:16px 18px 0;
    border-top:1px solid var(--line)}
  .sponsors-title{margin:0 0 12px;font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted);text-align:center}
  .sponsors-row{display:flex;flex-wrap:wrap;justify-content:center;
    align-items:center;gap:14px 26px;margin:0 0 14px}
  .sponsors-row:last-child{margin-bottom:0}
  .sponsor{display:inline-flex;align-items:center;color:var(--ink);
    text-decoration:none;font-weight:700}
  a.sponsor:hover{color:var(--accent-ink)}
  a.sponsor:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
  .sponsor img{display:block;width:auto;object-fit:contain}
  /* 等級ごとの見え方。高さと文字サイズだけを変え、並びの規則は共通にする。 */
  .sponsor-lg img{max-height:56px}
  .sponsor-lg{font-size:19px}
  .sponsor-md img{max-height:36px}
  .sponsor-md{font-size:15.5px}
  .sponsor-sm img{max-height:24px}
  .sponsor-sm{font-size:13px;font-weight:600;color:var(--muted)}
  @media (max-width:520px){
    .sponsors{padding:14px 12px 0}
    .sponsors-row{gap:12px 18px}
    .sponsor-lg img{max-height:44px}
    .sponsor-lg{font-size:17px}
  }

  /* ダイアログ内のスポンサー紹介(紹介文つき) --- */
  .spon-listed{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
  .spon-listed-item{border:1px solid var(--line);border-radius:8px;padding:10px 12px}
  .spon-listed-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .spon-listed-name{font-weight:700}
  .spon-listed-tier{font-size:11px;color:var(--muted)}
  .spon-listed-item p{margin:6px 0 0;color:var(--muted)}

  /* --- Thanks(支援してくれた方) --- */
  /* why: 名前が並ぶだけの一覧。人数が増えても読めるよう、複数列に流し込む。 */
  .thanks-list{list-style:none;margin:0 0 12px;padding:0;
    columns:2;column-gap:24px}
  .thanks-list li{break-inside:avoid;padding:3px 0}
  .thanks-since{color:var(--muted);font-size:11.5px;margin-left:8px;
    font-variant-numeric:tabular-nums}
  .thanks-year{margin:14px 0 6px;font-size:12px;color:var(--muted);
    font-variant-numeric:tabular-nums}
  @media (max-width:520px){ .thanks-list{columns:1} }

  /* 法定表記は日本語のみ。翻訳して食い違うより、原文のまま出す(理由は本文の注記)。 */
  .spon-legal{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
  .spon-legal dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 8px}
  .spon-legal dt{color:var(--muted)}
  .spon-legal dd{margin:0}
  @media (max-width:520px){
    .spon-legal dl{grid-template-columns:1fr;gap:0 0}
    .spon-legal dd{margin:0 0 6px}
  }
  /* --- 報告フォーム --- */
  /* why: ポリシーと同じ <dialog>(.sheet)に載せる。別ページへ飛ばすと、report したい
     対象(いま見ている試合)から離れてしまい、何について書いていたか分からなくなる。
     入力欄は常に1カラム。狭い画面で崩れる余地を最初から作らない。 */
  .fb-form{display:flex;flex-direction:column;gap:14px;margin-top:4px}
  .fb-field{display:flex;flex-direction:column;gap:5px}
  .fb-field > span{font-size:12px;font-weight:700;color:var(--accent-ink)}
  .fb-form select,.fb-form textarea,.fb-form input[type=email]{
    width:100%;font:inherit;font-size:13px;color:var(--ink);background:var(--panel);
    border:1px solid var(--line);border-radius:9px;padding:9px 10px}
  .fb-form textarea{resize:vertical;min-height:120px;line-height:1.6}
  .fb-form select:focus-visible,.fb-form textarea:focus-visible,
  .fb-form input[type=email]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .fb-hint{margin:0;font-size:11.5px;color:var(--muted)}
  /* 画像の受け口。クリック・ドロップのどちらでも同じ場所を狙えるようにする。 */
  .fb-drop{border:1px dashed var(--line);border-radius:10px;padding:14px;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:8px}
  .fb-drop.over{border-color:var(--accent);background:var(--accent-soft)}
  .fb-pick{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--accent-ink);
    background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 14px}
  .fb-pick:hover{border-color:var(--accent)}
  .fb-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .fb-thumbs{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
  .fb-thumb{position:relative;width:96px;height:96px;border-radius:9px;overflow:hidden;
    border:1px solid var(--line)}
  .fb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  /* why: タップ端末でも押せる大きさを確保する(角に寄せると画像の中身に被りにくい)。 */
  .fb-drop-item{position:absolute;top:3px;right:3px;width:26px;height:26px;border-radius:50%;
    border:0;background:rgba(0,0,0,.62);color:#fff;font-size:15px;line-height:1;cursor:pointer}
  .fb-drop-item:focus-visible{outline:2px solid #fff;outline-offset:1px}
  /* ハニーポット。人には見えず、支援技術にも読ませない(自動投稿だけが埋める)。 */
  .fb-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .fb-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .fb-submit{font:inherit;font-size:13px;font-weight:800;cursor:pointer;color:#fff;
    background:var(--accent);border:1px solid var(--accent);border-radius:9px;padding:10px 20px}
  .fb-submit:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
  .fb-submit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .fb-submit[disabled]{opacity:.55;cursor:default}
  .fb-status{margin:0;font-size:12px;font-weight:700}
  .fb-status.bad{color:var(--bad)}
  .fb-status.good{color:var(--accent-ink)}

  /* --- ページトップへ戻るボタン(右下オーバーレイ) --- */
  /* why: 一覧が長いので、どこまで下がっても1タップでツールバー(検索条件)へ戻れるようにする。
     少しでも下へ動いたときだけ出し、最上部では本文の邪魔をしない。 */
  .to-top{position:fixed;right:18px;bottom:18px;z-index:30;width:58px;height:58px;border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;
    box-shadow:var(--shadow);font:inherit;font-size:11px;font-weight:800;letter-spacing:.05em;
    opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity .15s,transform .15s,visibility .15s}
  .to-top .arrow{font-size:17px;line-height:1}
  .to-top.show{opacity:1;visibility:visible;transform:none}
  .to-top:hover{border-color:var(--accent);color:var(--accent)}
  .to-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* --- 動画プレーヤー(オーバーレイ再生) --- */
  /* why(issue #95): カードを押すと YouTube へ飛んでいたため、1本見るたびに一覧を
     離れて戻ってくることになっていた。同じ <dialog> に重ねて再生すれば、閉じた瞬間に
     さっきまで見ていた試合の並びがそのまま残る。
     why(.sheet と分けた): ポリシーは「本文が縦に流れる読み物」で最大幅720px・内側スクロール。
     プレーヤーは 16:9 を崩さず画面いっぱいまで広げたいので、寸法の決め方が逆になる。 */
  .player{border:0;border-radius:14px;background:#000;color:#fff;padding:0;
    width:min(1000px,calc(100vw - 32px));max-width:calc((100vh - 150px) * 16 / 9);
    box-shadow:var(--shadow);overflow:hidden}
  .player:not([open]){display:none}
  .player::backdrop{background:rgba(0,0,0,.78)}
  .player-frame{position:relative;aspect-ratio:16/9;background:#000}
  .player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .player-foot{display:flex;align-items:center;gap:12px;padding:11px 14px;
    background:#111;font-size:12.5px;line-height:1.5}
  .player-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* why: 埋め込みを許可していない動画は枠の中でエラーになる。そのときの出口として、
     再生できたかを判定せずに常に置いておく(判定は API を叩かないと分からない)。 */
  .player-out{color:#8ee5b3;text-decoration:underline;text-underline-offset:2px;
    white-space:nowrap;flex:0 0 auto}
  .player-out:hover{color:#fff}
  .player-close{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid #444;
    background:#1b1b1b;color:#fff;font-size:16px;line-height:1;cursor:pointer}
  .player-close:hover{border-color:#8ee5b3;color:#8ee5b3}
  .player-out:focus-visible,.player-close:focus-visible{outline:2px solid #8ee5b3;outline-offset:2px}

  /* --- スマホ最適化 --- */
  @media (max-width:720px){
    .toolbar{margin-top:12px}
    /* why: 狭い画面で2段構成のまま組むと、ブランド行・言語・セレクト行で縦に伸びる。
       display:contents で行の箱を外し、1つの折り返し列として詰め直す。
       --tb-lang-w は言語セレクトの固定幅。値は 1 箇所だけで持つ(360px以下の
       ブレークポイントで上書きする箇所も含め、参照は変数経由にする)。 */
    .toolbar-inner{--tb-lang-w:104px;
      flex-direction:row;flex-wrap:wrap;align-items:flex-end;padding:10px 12px;gap:10px 12px}
    .tb-row{display:contents}
    /* why(PR #321): 帯(#search-season/#search-h2h)は id 側の display 指定で
       display:contents から外れ、.toolbar-inner の flex アイテムとして並ぶ。
       flex-basis:auto のままだと中身の量で幅が決まり、シーズンの % 列
       (50% | 残り | 56px)がその縮んだ幅で確定して帯が画面幅に届かない。 */
    .tb-band{flex-basis:100%}
    /* why: display:contents で親が消えるため、order を書かない要素は 0 として
       段が決まる。絞り込みのセレクトは order:1 で次の段へ回す(タイトル行・
       キャッチコピーの order は下で個別に設定する)。 */
    .tb-filters .field{order:1}
    /* why(issue #124): X のアイコンは ≡ メニューの「Updates on X」と同じ導線。
       狭い画面では上段の項目数がそのまま一覧の見える範囲を削るので、重複する
       アイコン側を隠す(要素は残すので PC では従来どおり出る)。 */
    .brand-x{display:none}
    /* why(issue #241): .tb-row と同じく .brand も箱を外し、ロゴ・サイト名・言語・≡を
       タイトル行の直接の子として並べ直す。キャッチコピーだけ order を下げて
       次の行(絞り込みより前)へ回す。 */
    .brand{display:contents}
    /* why(issue #241): タイトル行はロゴ→サイト名→言語→≡の順。この4つを同じ order で
       まとめて先頭の段に固定する(グループ内の見た目順は DOM 順のまま)。 */
    .brand-logo,.brand-name,.field-lang,.tb-menu{order:-2}
    .brand-logo{width:26px;height:26px;align-self:center}
    /* why(issue #241): 言語・≡ を同じ行に収めるため、サイト名を伸縮させて余りを
       吸収する。flex-basis を auto のままだと縮む前に折り返して次の行へ落ちるので
       明示的に 0 にし、はみ出す分は省略記号にする。 */
    .brand-name{font-size:16px;flex:1 1 0;min-width:0;align-self:center;
      overflow:hidden;text-overflow:ellipsis}
    /* why(issue #241): バージョンバッジは表示面積が狭いスマホでは常に隠す
       (PCでは従来どおり表示する)。 */
    .brand-version{display:none}
    /* why(issue #241): キャッチコピーは order:-1 でタイトル行(order:-2)の次、
       絞り込み(order:1)より前に置き、flex-basis:100% で単独の行にする。span を
       inline に戻して1行に詰め、.brand small の詳細度に負けないよう
       同等以上のセレクタで font-size を上書きする(320px 幅でも全文が収まるよう
       clamp で縮める)。 */
    .tagline{order:-1;flex-basis:100%;white-space:nowrap;overflow:hidden}
    .tagline span{display:inline}
    .brand small.tagline{font-size:clamp(9.5px,2.9vw,11.5px)}
    .field{flex:1 1 140px;min-width:0}
    .field select{min-width:0;width:100%}
    /* why(issue #124): 言語セレクトの中身は母語表記の6語だけなので、絞り込みと同じ
       伸縮幅(段の約半分)は要らない。最長の Français が省略されない固定幅まで詰め、
       左右の余白も半分(12/30px → 6/17px)にする。右側は矢印の描画域を兼ねるため、
       background-position も同じだけ内側へ寄せて文字と重ならないようにする。 */
    .field-lang{flex:none}
    .field-lang select{width:var(--tb-lang-w);min-width:0;padding:8px 17px 8px 6px;
      background-position:calc(100% - 13px) 55%,calc(100% - 8px) 55%}
    /* why(issue #124): 「LANGUAGE」の見出しは出さない。選択肢が母語表記
       (日本語 / English / …)なので見出しが無くても何のセレクトか分かる一方、
       ブランド行の高さをラベルの分だけ押し上げる。読み上げ用の名前はセレクトの
       aria-label が持つので、隠しても失われない。 */
    .field-lang label{display:none}
    /* 検索条件の行がdisplay:contentsでも、タブの右へプルダウンを回り込ませない。 */
    .search-tabs-row{flex-basis:100%}
    .search-tabs{padding:5px}
    .search-tabs button,.search-tabs a{padding:7px 9px;font-size:12px}
    .h2h-side{flex:1 1 100%;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:8px}
    .h2h-side legend{padding:0 4px}
    .h2h-side .field{flex:1 1 120px}
    .h2h-vs{display:none}
    .options{padding:0 12px 10px}
    .options-body{gap:12px 16px}
    .opt-group{width:100%}
    .opt-search{min-width:0;width:100%}
    .opt-select{width:100%}
    .layout{padding:0 12px;margin-top:16px}
    .match{padding:14px 12px 16px}
    .mhead{gap:6px}
    .mrow{gap:8px 10px}
    /* why: 狭い画面ではチーム名だけで1行を使い切るので、スコアは3行目に固定して
       チーム名の折り返し位置が試合ごとにばらつかないようにする。 */
    .mteams{flex-basis:100%}
    footer{padding:16px 12px}
    .player{width:calc(100vw - 20px)}
    .player-foot{padding:10px 12px;gap:10px;font-size:12px}
    .sheet{width:calc(100vw - 20px);max-height:88vh}
    .sheet-body{padding:12px 14px 18px}
    .sheet-head{padding:14px 14px 10px}
    .to-top{right:12px;bottom:12px;width:52px;height:52px}
    /* why: 狭い画面でツールバーを出したままにすると縦幅を食うので、少しでも下へ
       スクロールしたら添え物とラベルを畳んで高さを詰める。固定は保ったまま、
       一覧に画面を譲る。
       why(issue #124): 畳むのはキャッチコピーだけで、**サイト名は残す**。ブランドごと
       消すと、同じ行にあった言語セレクトと ≡ が行頭(画面左端)へ動き、スクロールした
       だけで並びが変わって見える。サイト名を残せば行の幅が変わらないので、
       スクロールの前後で位置が動かない。
       why(issue #241): バージョンバッジは幅720px以下で常に非表示なので、ここでは
       もう畳む対象に含めない(含めても効果がなく死んだルールになる)。 */
    body.scrolled .tagline{display:none}
    body.scrolled .field label{display:none}
    body.scrolled .toolbar-inner{padding:8px 12px}
    body.scrolled .options{padding:0 12px 8px}
  }
  /* why(issue #241): 320〜360px はタイトル行(ロゴ / サイト名 / 言語 / ≡)の4項目が
     そのままだと収まらない。ロゴを消して項目数を減らす案は採らず、サイズと段間を
     さらに一段詰めて4項目を維持する。--tb-lang-w はこのブレークポイント専用の値を
     ここだけで上書きする(720px側の既定値104pxは変えない)。 */
  @media (max-width:360px){
    .toolbar-inner{--tb-lang-w:92px;gap:8px 6px}
    .brand-logo{width:24px;height:24px}
    .brand-name{font-size:14px}
  }
  /* タッチ端末向け: iOS のフォーカス時ズームを防ぐ 16px、指で押せるサイズの当たり判定、
     スワイプで送れるカルーセルの矢印は隠して情報量を優先する。 */
  @media (pointer:coarse){
    .field select,.opt-search,.opt-select{font-size:16px}
    .checks label{padding:4px 0}
    .checks input{width:20px;height:20px}
    .opt-reset{padding:10px 14px}
    /* 指で押せる大きさを確保する(絵文字と数字だけの小さなボタンなので特に効く)。 */
    .react{padding:9px 15px}
    .best-btn{padding:11px 14px}
    .carousel.has-overflow .navbtn{display:none}
  }

  /* --- 統計ページ(/stats/…、issue #172) --- */
  /* why: app.js を読み込まない完全に独立した静的ページ(design A)。ツールバーが
     無いので専用の簡易ヘッダを持たせる。表は .static 配下(既存の a 装飾ルール)を
     再利用しつつ、罫線と見出し行だけをここで足す。 */
  .stats-header{max-width:1120px;margin:0 auto;padding:14px 18px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    border-bottom:1px solid var(--line)}
  .stats-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;
    color:var(--ink)!important;text-decoration:none!important}
  .stats-lang a{color:var(--muted)!important;text-decoration:underline!important;
    text-underline-offset:2px;font-size:13px}
  .stats-nav{list-style:none;display:flex;flex-wrap:wrap;gap:8px 14px;padding:0;margin:14px 0 0}
  .stats-nav a{font-size:13px}
  .stats-lead p{max-width:64em}
  .stats-table-wrap{overflow-x:auto;margin:14px 0}
  .stats-table{border-collapse:collapse;width:100%;font-size:13px;white-space:nowrap}
  .stats-table caption{caption-side:top;text-align:left;color:var(--muted);
    font-size:12px;margin-bottom:6px}
  .stats-table th,.stats-table td{border-bottom:1px solid var(--line);padding:6px 10px;
    text-align:right}
  .stats-table th:first-child,.stats-table td:first-child{text-align:left;white-space:normal}
  .stats-table thead th{color:var(--muted);font-weight:600}
  .stats-table tfoot td,.stats-table tfoot th{font-weight:700;border-top:2px solid var(--line);
    border-bottom:none}
  .stats-table .num-muted{color:var(--muted);font-weight:400}
  /* 動画タイトルの列(フルマッチ一覧)。
     why: タイトルは取得元由来で 100 文字を超えるものがあり、既定の nowrap のままだと
          表が画面幅の数倍に伸びて、全行が横スクロールしないと読めなくなる(実測)。
          この列だけ折り返して行を縦に伸ばす。左寄せにするのは、右寄せのままだと
          長さの違うタイトルの先頭が行ごとにばらついて読み出しにくいため。 */
  .stats-table .stats-title{white-space:normal;text-align:left;min-width:16em;max-width:34em}
  .stats-section{margin-top:26px}
  .traffic-stats{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
  .traffic-stats h2{margin-top:0}
  .traffic-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
  .traffic-stat{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:10px;background:var(--bg)}
  .traffic-stat span,.traffic-stat small,.traffic-note,.traffic-unavailable{color:var(--muted)}
  .traffic-stat strong{font-size:28px;color:var(--ink)}
  .traffic-note,.traffic-unavailable{font-size:13px;line-height:1.65}
  /* why(issue #172 レビュー不具合3): .to-top(通常ページ)は JS がスクロールに応じて
     付ける .show が無いと opacity:0 / visibility:hidden のまま(キーボード操作にも
     乗らない)。統計ページには JS が無く一生 .show が付かないため、同じクラスの
     ボタンを置くと「押しても何も起きない」以前に、そもそも見えず触れない死んだ
     部品になる。ここは常に見える別クラスにして、<a href="#top"> による素の
     ページ内アンカー遷移だけで完結させる(.to-top と見た目は揃えつつ、
     opacity/visibility のトランジションは持たない)。 */
  .to-top-static{position:fixed;right:18px;bottom:18px;z-index:30;width:58px;height:58px;
    border-radius:50%;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:1px;border:1px solid var(--line);background:var(--panel);
    color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.05em;
    box-shadow:var(--shadow)}
  .to-top-static .arrow{font-size:17px;line-height:1}
  .to-top-static:hover{border-color:var(--accent);color:var(--accent)}
  .to-top-static:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  @media (max-width:640px){
    .to-top-static{right:12px;bottom:12px;width:52px;height:52px}
  }

  /* --- 編集型コレクション(issue #226) --- */
  .collection-page{max-width:900px;margin:0 auto}
  .collection-summary{font-size:17px;color:var(--muted);max-width:62em}
  .collection-intro{margin:18px 0 24px;padding:16px 18px;background:var(--panel);
    border-left:4px solid var(--accent);line-height:1.75}
  .collection-share{display:flex;gap:12px}
  .collection-controls{display:flex;flex-wrap:wrap;gap:12px 18px;margin:20px 0;
    padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
  .collection-controls label{display:grid;gap:5px;color:var(--muted);font-size:12px;font-weight:700}
  .collection-controls select{min-width:190px;padding:8px 30px 8px 10px;border:1px solid var(--line);
    border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
  .collection-empty{padding:18px;text-align:center;color:var(--muted)}
  .collection-matches{list-style:none;padding:0;display:grid;gap:24px}
  .collection-match{padding:20px;border:1px solid var(--line);border-radius:14px;
    background:var(--panel);box-shadow:var(--shadow);min-width:0}
  .collection-match-date{margin:0 0 5px;font-size:18px;font-weight:800;color:var(--ink)}
  .collection-match-title{margin:0;font-size:20px;line-height:1.3}
  .collection-match-meta{margin:6px 0;color:var(--muted);font-size:13px}
  .collection-reason{line-height:1.7}
  .collection-carousel{min-width:0;max-width:100%}
  .collection-carousel .viewport{overscroll-behavior-inline:contain}
  .collection-carousel .vcard{text-decoration:none!important;color:var(--ink)!important}
  .collection-carousel .vmeta small{color:var(--muted);font-size:11px}
  .collection-controls select:focus-visible{
    outline:2px solid var(--accent);outline-offset:2px}
  .collection-hub-section{margin:28px 0}
  .collection-hub-section h2{font-size:22px;margin:0 0 16px}
  .collection-hub-group{margin:0 0 26px}
  .collection-hub-group h3{font-size:15px;font-weight:800;color:var(--muted);
    text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px}
  /* why: auto-fit だと1件だけの国(Le Classique)が空き列を埋めて横いっぱいに伸びる。
     auto-fill で他国と同じ列幅を保ち、カード同士の視覚的な重みを揃える。 */
  .collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
  .collection-card{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;
    overflow:hidden;text-decoration:none;box-shadow:var(--shadow);background:var(--accent-soft)}
  .collection-card:hover{transform:translateY(-2px)}
  .collection-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .collection-card-media{position:absolute;inset:0}
  .collection-card-media img{width:100%;height:100%;object-fit:cover;display:block}
  .collection-card-overlay{position:absolute;inset:0;display:flex;flex-direction:column;
    justify-content:flex-end;gap:4px;padding:16px;color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,.9);
    background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.7) 58%,rgba(0,0,0,.94) 100%)}
  .collection-card--no-image .collection-card-overlay{
    background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.88) 100%)}
  .collection-card-title{font-size:18px;font-weight:800;line-height:1.25}
  .collection-card-summary{font-size:13px;color:rgba(255,255,255,.85);line-height:1.4}
  .collection-card-count{font-size:12px;font-weight:700;color:rgba(255,255,255,.75)}
  @media (max-width:640px){
    .collection-match{padding:15px}
    .collection-controls{display:grid}.collection-controls select{width:100%}
  }

  /* --- Football Archive v2 core surfaces ----------------------------------
     Shared classes are intentionally additive so /m/, /t/ and collections can
     use the same flat system while the older cards remain available to their
     page renderers. */
  h1,h2,h3,.brand,.top-nav,.selector-label,.selector-counters,.month-heading,.match-row,.tag,.mcomp{font-family:var(--font-heading)}
  .toolbar{margin-top:0;background:var(--brand-navy);border-bottom:0;color:#fff;backdrop-filter:none}
  .toolbar-inner{max-width:none;padding:0 32px;gap:0}
  .tb-head{min-height:56px;align-items:center;gap:12px}
  .brand{color:#fff;font-size:16px;letter-spacing:.02em}
  .brand small,.brand-version{color:rgba(255,255,255,.72)}
  .brand-version{border-color:rgba(255,255,255,.35);border-radius:var(--radius-sm)}
  .brand-logo{border:0;border-radius:var(--radius-sm)}
  .brand-x,.tb-menu-btn{color:#fff;border-color:rgba(255,255,255,.4);border-radius:var(--radius-sm)}
  .top-nav{display:flex;justify-content:flex-end;align-items:center;gap:24px;min-height:36px;margin-top:-36px;margin-bottom:0;pointer-events:none;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:700}
  .top-nav-link{pointer-events:auto;color:rgba(255,255,255,.78);background:none;border:0;border-bottom:2px solid transparent;padding:9px 0;cursor:pointer;font:inherit;text-decoration:none}
  .top-nav-link:hover,.top-nav-link.is-active{color:#fff;border-bottom-color:var(--accent)}
  .search-tabs-row{display:none}
  /* why(issue #332): 帯・セル・ラベル・セレクト・focus はシーズン検索と対戦カードで
     同じ値を2か所に手書きしていて、片方だけ直す事故が3回起きた(#327 ライトモードで
     文字が消えた/#329 値のコピー漏れ/#331 詳細度の逆転)。共通クラス .tb-band(帯)/
     .tb-cell(ラベル+セレクトのセル)へ一本化し、各画面にしかない段組み
     (grid-template-columns 等)だけ id 別に残す。 */
  /* why(issue #343): 帯の子(セル・赤いボタン・カウンタ)の高さは帯が決める。子の内容高に
     任せると、<select> を持つセルと素のテキストを持つボタンで内容高が7.65px違い、
     下端揃えだと差がそのまま上の隙間になる。grid のシーズン側は既定が stretch なので
     変化なし、対戦カード側(.h2h-filters)は #343 当時 flex だったため align-items:stretch
     が無いと隙間が出た。why(PR #321): 幅721px以上は対戦カード側も grid になり既定が
     stretch なので同じく変化なしになるが、畳んだ行(.is-collapsed)と幅720px以下は
     いまも flex/flow-root のままなので、この align-items:stretch は引き続き必要。
     ライト/ダークで寸法は同じで、生成りの帯(--accent-soft)でだけ隙間が見えていた。 */
  .tb-band{position:relative;background:var(--accent-soft);border-bottom:var(--rule) solid var(--brand-navy);margin:0 -32px;padding:0 32px;color:var(--brand-navy);align-items:stretch}
  .tb-band .tb-cell{display:flex;justify-content:center;gap:3px;padding:11px 20px;border-right:var(--rule) solid var(--brand-navy);min-width:0}
  .tb-band .tb-cell:last-child{border-right:0}
  .tb-band .tb-cell label,.selector-label{font-size:10.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ink)}
  .tb-band .tb-cell select{min-width:130px;border:0;border-radius:0;background:transparent;color:var(--ink);padding:0;font-size:17px;font-weight:800;background-image:none}
  .tb-band .tb-cell select:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  /* why(PR #321): 「この設定を共有」は絶対配置だと帯の外(下)へはみ出し、下の
     本文(ヒーロー画像等)に重なっていた。かつ絶対配置は行の外に置く前提なので、
     スマホ幅では置き場所が無く display:none にするしかなかった(#337 の負債)。
     帯(#search-season/#search-h2h)の最後のセルとして通常のフローに置き、
     カウンタのすぐ右・帯の右端に来るようにする。.tb-band の position:relative は
     引き続き必要(対戦カードの #month-panel の絶対配置の基準)。
     flex:0 0 56px で幅を固定する。スマホ幅の .field{flex:1 1 140px} を受けると
     畳んだ行で横に伸び、右端へ寄せる margin-left:auto が効かなくなる。
     地色も自分で持つ。スマホで畳んだ対戦カードは帯が透明になり、--ink の
     アイコンがライトモードで紺のツールバーに沈んで消えていた。 */
  .tb-band .field-share{display:flex;align-items:stretch;justify-content:center;
    flex:0 0 56px;min-width:56px;padding:0;border:0;border-left:var(--rule) solid var(--brand-navy);
    background:var(--accent-soft);color:var(--ink)}
  /* why(PR #321): 帯セルは「見出し+セレクト」の横幅が前提で、56px のセルには
     「この設定を共有」は入らない。アイコンのみにし、文言は aria-label と
     title(ホバー時のツールチップ)へ残す(shareWidget の iconOnly 引数)。 */
  .tb-band .field-share .share-btn{width:56px;height:100%;justify-content:center;
    border:0;border-radius:0;background:transparent;color:var(--ink);padding:0}
  .tb-band .field-share .share-btn:hover{border-color:transparent;color:var(--accent)}
  .tb-band .field-share .share-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .tb-band .field-share .share-btn svg{width:19px;height:19px}
  #search-season{display:grid;grid-template-columns:auto auto auto auto 1fr;gap:0;align-items:stretch;flex-wrap:nowrap}
  #search-season>.field:nth-of-type(3){background:var(--brand-navy)}
  #search-season>.field:nth-of-type(3) label,#search-season>.field:nth-of-type(3) select{color:#fff}
  .selector-month{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:11px 20px;border:0;border-right:var(--rule) solid var(--brand-navy);background:var(--accent-ink);color:#fff;text-align:left;cursor:pointer;font:800 17px/1.1 var(--font-heading);min-width:150px}
  .selector-month .selector-label{color:#fff}
  .selector-month:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  #month-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
  /* why(issue #334): カウンタ(#selector-counters)はシーズン・対戦カードの両方の
     帯(.tb-band)に置き場所が変わる単一ノード。#332 で帯・セルを共通クラスへ寄せた
     のと同じ理由(片方だけ直す事故を防ぐ)で、見た目は .tb-band 側の共通クラスに
     一本化する。段組み固有の指定(grid-column 等)だけ #search-season 側に残す。 */
  /* why(issue #334): 数字と地色は必ず同じテーマの組で持つ。地色は明るい帯
     (--accent-soft / --panel)なので文字は --ink。--brand-navy は常に紺の
     固定色なので、ダークの地に載せると数字が沈んで読めなくなる。 */
  .tb-band .selector-counters{display:flex;align-items:stretch;justify-content:flex-end;min-width:0;color:var(--ink)}
  .tb-band .selector-counters>div{display:flex;flex-direction:column;justify-content:center;padding:0 22px;border-left:1px solid rgba(1,20,53,.25);min-width:92px}
  .tb-band .selector-counters b{font-size:22px;line-height:1}
  .tb-band .selector-counters span{font-size:10.5px;line-height:1;margin-top:4px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)}
  .tb-band .selector-counters>div:last-child b{color:var(--accent-ink)}
  /* why(PR #321): #search-h2h は幅721px以上では下の @media (min-width:721px) ブロックで
     grid に変わるが、畳んだ行(.is-collapsed、ファイル末尾の共通規則)と幅720px以下
     (1174行目付近)ではいまも flex 行のままなので、カウンタを共有ボタン(#share-h2h)の
     左に自然に寄せるには margin-left:auto で右端へ押し出すだけでよい(シーズン側は
     grid で #search-season 側に別途 grid-column を持たせている)。 */
  /* why(issue #337): 赤いボタン(#month-toggle)も id 付きの単一ノードなので、対戦カード
     では複製せず applyModeUI が置き場所を移す(チーム欄の直後・共有ボタンの手前へ)。
     why(PR #321): 幅721px以上の展開時は下の @media ブロックで明示的な grid-column に
     置くため、「帯は flex で DOM の並びがそのまま表示順になる」という説明はいまは
     畳んだ行(flex)にだけ当てはまる。order は使わない(使うと畳んだときの並びまで
     別に面倒を見ることになる)。カウンタだけ margin-left:auto で右端へ押し出す
     (issue #336 と同じ)。畳んだときも同じ理屈で
     「検索条件を変更 | 赤いボタン | (余白) | カウンタ」になる。 */
  #search-h2h .selector-counters{margin-left:auto}
  .month-panel{position:absolute;left:calc(32px + 390px);top:100%;z-index:50;width:440px;background:var(--panel);color:var(--ink);border:var(--rule) solid var(--brand-navy);box-shadow:none}
  .month-panel[hidden]{display:none}
  .month-panel-head{display:flex;justify-content:space-between;align-items:center;background:var(--brand-navy);color:#fff;padding:12px 16px;font:800 12px/1 var(--font-heading);letter-spacing:.1em;text-transform:uppercase}
  .month-panel-head button{border:0;background:none;color:#fff;font-size:22px;cursor:pointer}
  .month-grid{display:grid;grid-template-columns:repeat(2,1fr)}
  .month-option{min-height:62px;border:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);background:var(--panel);color:var(--ink);padding:12px 14px;text-align:left;cursor:pointer}
  .month-option:nth-child(even){border-right:0}
  .month-option:hover,.month-option.is-active{background:var(--accent-soft)}
  .month-option strong{display:block;font:800 14px/1 var(--font-heading)}
  .month-option small{display:block;margin-top:5px;color:var(--muted);font:600 10.5px/1.3 var(--font-body)}
  .month-competitions{display:flex;flex-wrap:wrap;gap:7px;padding:12px 14px;border-top:var(--rule) solid var(--brand-navy)}
  .month-competitions button{padding:9px 11px;border:1px solid var(--line);background:transparent;color:var(--ink);font:700 10.5px var(--font-heading);cursor:pointer}
  .month-competitions button.is-active{background:var(--brand-navy);color:#fff}
  .layout{max-width:1280px;padding:0 32px;margin:0 auto}
  /* --- シーズン・対戦カード共通の一覧部品 ------------------------------------
     why(issue #303 v2): ヒーロー/要約行/見出し+罫線+件数/試合行はシーズンページと
     対戦カードで同じ部品(DOMは1つ)。差はライト・ダークの色(トークン、2行目の
     :root/@media(prefers-color-scheme:dark)/[data-theme]で定義)と、720px以下の
     段組み(このセクション内の@media(max-width:720px)1ブロックだけ)で表す。
     ここにはテーマ別セレクタ([data-theme]/prefers-color-scheme)や色のベタ書きを
     書かない(書くと面ごとに挙動が食い違う。issue #155/#161と同種の事故)。 */
  .summary{color:var(--muted);font:500 14px/1.5 var(--font-body);padding-top:26px;margin:0 0 14px}
  .summary b{color:var(--ink)}
  .season-hero{display:grid;grid-template-columns:1fr minmax(0,600px);gap:40px;align-items:center;background:var(--hero-bg);color:#fff;margin:0 -32px;padding:34px 40px 32px}
  .season-hero.has-record{padding-bottom:0}
  .season-hero-kicker{font:700 11px/1 var(--font-heading);letter-spacing:.3em;color:#fff;text-transform:uppercase}
  .season-hero h1{margin:22px 0 0;font:900 clamp(32px,4vw,52px)/.98 var(--font-heading);letter-spacing:-.02em;text-transform:uppercase}
  .season-hero h1 .hero-score{color:var(--brand-pitch)}
  .season-hero p{max-width:600px;margin:20px 0 0;color:#c9d2e2;font:500 14px/1.4 var(--font-body)}
  .hero-media{position:relative;aspect-ratio:16/9;border:1px solid var(--brand-pitch);overflow:hidden;background:var(--accent-soft)}
  .hero-media img{width:100%;height:100%;object-fit:cover;display:block}
  .hero-media .tag{position:absolute;left:0;bottom:0}
  .hero-actions{display:flex;gap:12px;margin-top:24px}
  .hero-primary{background:var(--tag-full);color:#fff;border:0;font:800 14px/1 var(--font-heading);padding:18px 26px;text-align:left;cursor:pointer}
  .hero-record{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;margin-top:30px;border-top:1px solid var(--hero-rule)}
  .hero-record>div{display:flex;align-items:baseline;gap:12px;padding:16px 0}
  .hero-record b{font:900 26px/1 var(--font-heading)}
  .hero-record span{font:700 11px/1 var(--font-heading);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
  .hero-record-a b,.hero-record-b b{color:var(--brand-pitch)}
  .hero-record-a span,.hero-record-b span{color:#fff}
  /* why: 各セルの既定は .hero-record>div(クラス+要素)。個別セルはそれより弱い単独クラスだと
     padding/揃えが負けるので、同じ .hero-record> を前置して詳細度を揃える。
     row-reverse の主軸は右→左なので、右端に寄せるのは flex-start。 */
  .hero-record>.hero-record-b{flex-direction:row-reverse;justify-content:flex-start}
  .hero-record>.hero-record-draw{padding:16px 34px;border-left:1px solid var(--hero-rule);border-right:1px solid var(--hero-rule)}
  .hero-record-draw b{color:#fff}
  .hero-record-draw span{color:#c9d2e2}
  /* why: グループ間の空きは見出しの margin-top だけで持つ(モック: 行末から次の見出しまで34px)。 */
  .month-group{padding:0}
  .month-heading{display:flex;align-items:baseline;gap:20px;margin-top:34px}
  .month-group:first-of-type .month-heading{margin-top:0}
  .month-heading h2{margin:0;font:900 30px/1 var(--font-heading)}
  .month-heading::after{content:"";height:1px;background:var(--heading-rule);flex:1;order:1}
  .month-heading .month-meta{order:2;font:700 12px/1 var(--font-heading);letter-spacing:.06em;color:var(--muted);white-space:nowrap}
  .match-row{display:grid;grid-template-columns:108px minmax(0,1fr) min(620px,48%);gap:22px;align-items:center;padding:20px 0;border-bottom:1px solid var(--row-rule);margin:0;border-top:0;border-left:0;border-right:0;border-radius:0;box-shadow:none;background:transparent}
  .match-row .mhead{display:contents}
  .match-row .mrow{display:block}
  .match-row .mrow:first-child{grid-column:1;grid-row:1}
  .match-row .mrow:nth-child(2){grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:start}
  .match-row .mdate{display:block;color:var(--ink);font:800 14px/1.2 var(--font-heading)}
  .match-row .ha{display:block;margin-top:5px;padding:0;background:none;color:var(--muted);font:700 11px/1.2 var(--font-heading);letter-spacing:.1em}
  .match-row .mcomp{display:none}
  .match-row .mteams{grid-column:1;grid-row:1;display:block;font:800 24px/1.15 var(--font-heading);letter-spacing:-.015em;color:var(--ink);text-decoration:none}
  .match-row .mteams:hover{text-decoration:underline}
  .match-row .mteams .vs{margin:0 6px;font-size:13px;color:var(--muted)}
  .match-row .mscore{font-size:inherit;background:transparent;color:var(--accent-ink);padding:0;margin:0 0 0 .25em}
  /* why: 枠は中の .share-btn が持つ。入れ物にも枠を付けると二重になる。タイトルと大会名の2段にまたがらせ、
     ボタンの高さで大会名の行が押し下げられないようにする。 */
  .match-row .mrow>.share{grid-column:2;grid-row:1/span 2;align-self:center;justify-self:end;margin-top:0}
  .match-row .share-btn{border:1px solid var(--thumb-rule);border-radius:0;color:var(--ink);font:700 12px/1 var(--font-heading);padding:11px 14px;white-space:nowrap}
  .match-row .row-meta{grid-column:1;grid-row:2;font:500 12.5px/1.3 var(--font-body);color:var(--muted);margin-top:6px}
  .match-row>.mreact{grid-column:2/-1;margin:0;padding:0}
  .match-video-strip{grid-column:3;grid-row:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
  .match-video-strip .vcard{min-width:0;border:0;border-radius:0;box-shadow:none;background:transparent;padding:0;text-align:left}
  .match-video-strip .vcard .media{border:1px solid var(--thumb-rule);border-radius:0;aspect-ratio:16/9}
  .match-video-strip .vcard .vmeta{padding:5px 0 0}
  .match-video-strip .vtitle{display:none}
  .match-video-strip .tag{display:block;font:700 10px/1 var(--font-heading);padding:5px;margin-top:5px}
  .match-video-missing{grid-column:3;border:1px dashed var(--row-rule);padding:14px 16px;color:var(--muted);font-size:11.5px}
  /* why: 全ページ共通のタグ配色。--tag-short/--tag-extended(ライトnavy/ダークpitch)、
     --tag-full(常に#ae1800)、--tag-ink(タグ地に対する文字色)を使う。行内(.match-video-strip
     .tag)だけでなくカルーセル(.vcard .tag)にも同じ規則で当たる。 */
  .tag-short,.tag-extended{background:var(--tag-short);color:var(--tag-ink)}
  .tag-full{background:var(--tag-full);color:#fff}
  /* 721〜1050px: はみ出さないよう、ヒーローは2カラム均等、行は日付列を詰める。 */
  @media (min-width:721px) and (max-width:1050px){
    .season-hero{grid-template-columns:1fr 1fr}
    .season-hero h1{font-size:42px}
    .match-row{grid-template-columns:96px minmax(0,1fr)}
    .match-video-strip{grid-column:1/-1;grid-row:2;margin-top:12px}
    .match-video-missing{grid-column:1/-1;grid-row:2;margin-top:12px}
  }
  @media(max-width:720px){
    /* モック13b/13c。season-hero-copy を display:contents にし、子は order で
       kicker→hero-media→h1→p→hero-actions→hero-record の順に積む。 */
    /* why: デスクトップの grid の gap:40px が flex にもそのまま効くので、間隔は各子の margin-top だけで持つ。 */
    .season-hero{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0 -14px;padding:16px 14px 20px}
    .season-hero.has-record{padding-bottom:0}
    .season-hero-copy{display:contents}
    .season-hero-kicker{order:0}
    .hero-media{order:1;margin-top:14px}
    .season-hero h1{order:2;margin-top:16px;font-size:30px}
    .season-hero p{order:3;margin-top:12px;font-size:12px}
    .hero-actions{order:4;margin-top:16px}
    .hero-actions .hero-primary{width:100%;font-size:13px;padding:16px 20px}
    .hero-record{order:5}
    .hero-record{margin-top:18px}
    .hero-record>div{flex-direction:column;align-items:flex-start;gap:6px;padding:13px 0}
    .hero-record b{font-size:20px}
    .hero-record span{font-size:9.5px;letter-spacing:.1em;white-space:normal}
    .hero-record>.hero-record-draw{padding:13px 16px;text-align:center;align-items:center}
    .hero-record>.hero-record-b{flex-direction:column;align-items:flex-end;text-align:right}
    .summary{font-size:12px;padding:14px 0 0}
    .month-heading{gap:12px;margin-top:22px}
    .month-heading h2{font-size:22px}
    .month-heading .month-meta{font-size:10.5px;white-space:nowrap}
    .match-row{grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:center;padding:14px 0}
    /* why(モック13b注記): 動画は先頭1枚だけ見せ、残数は試合ページ(/m/<id>、
       ledgerRow の .mteams リンク)から辿る。サムネ左下にタグを重ねる。 */
    .match-video-strip{grid-column:1;grid-row:1/span 2;display:block}
    .match-video-strip .vcard:not(:first-child){display:none}
    .match-video-strip .vcard{position:relative}
    .match-video-strip .vcard .vmeta{padding-top:0}
    .match-video-strip .tag{position:absolute;left:0;bottom:0;margin-top:0;padding:4px 5px;font-size:9px}
    /* 日付行「31日(月) · AWAY」を1行にする。 */
    /* why: デスクトップの grid-column:1 のままだとサムネと同じセルに重なって日付行が消える。
       本文(日付行・試合名)は2列目の1・2段目。動画が無い行はサムネが無いので全幅に広げる。 */
    .match-row .mrow:first-child{grid-column:2;grid-row:1;display:flex;align-items:baseline;gap:0}
    .match-row .mrow:nth-child(2){grid-column:2;grid-row:2}
    .match-row:not(:has(.match-video-strip)) .mrow{grid-column:1/-1}
    .match-row .mdate{font-size:10px;letter-spacing:.1em;color:var(--muted)}
    .match-row .ha{display:inline;margin-top:0;font-size:10px}
    /* why: flex の子の先頭・末尾の空白は詰められるので、区切りの前後は改行しない空白で持つ。 */
    .match-row .ha::before{content:"\00a0·\00a0"}
    .match-row .mrow:nth-child(2){display:block}
    .match-row .mteams{font-size:16px;margin-top:5px}
    .match-row .row-meta{font-size:11px;margin-top:4px}
    .match-row .mrow>.share{display:none}
    .match-row>.mreact{grid-column:1/-1}
    .match-video-missing{grid-column:1/-1}
  }
  .player-dialog .sheet-body{max-width:1120px}.player-dialog .player-other-videos{display:flex;gap:10px;overflow-x:auto}
  .player-dialog .player-other-videos .vcard{min-width:180px}
  @media(max-width:720px){
    /* why: 旧スマホ表示(issue #241)は、キャッチコピーを独立した行へ回すために
       .tb-head/.brand を display:contents で外していた。v2 はキャッチコピーを出さず、
       絞り込みも別の帯(.tb-band)に持つので、外す理由が無い。外したままだと
       ロゴ・サイト名・言語・≡ が .toolbar-inner(gap:0)の直接の子になり、下の
       .tb-head の padding と .brand の gap が効かずに密着する(ロゴと文字の間隔0px)。
       .brand は残り幅を吸って言語・≡ を右端へ寄せる。order は旧表示がタイトル行の
       4項目に付けた -2 に .brand も揃える(0 のままだと言語・≡ がロゴより前に来る)。 */
    .tb-head{display:flex;flex-basis:100%}
    .brand{display:flex;flex:1 1 0;min-width:0;order:-2}
    .toolbar-inner{padding:0}.tb-head{padding:8px 14px;min-height:44px}.brand{font-size:13.5px;gap:9px}.brand-logo{width:26px;height:26px}.brand small,.brand-version,.brand-x{display:none}
    /* why: .toolbar-inner は row 方向の flex(align-items:flex-end)なので、
       flex-basis を持たない項目は中身の幅(max-content)で止まる。日本語ラベルは5つ
       合わせても画面幅に届かず、メニューだけ画面より狭く見えた。全幅を占める行だと
       .tb-head と同じ書き方(flex-basis:100%)で示し、5列はその幅を等分する。
       minmax(0,1fr) にするのは、1fr の既定の最小値(auto)だと長いラベルで列が
       広がり、行そのものが画面からはみ出すため。 */
    .top-nav{margin:0;min-height:38px;display:grid;flex-basis:100%;
      grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:0 14px;background:var(--brand-navy);border-top:1px solid rgba(217,223,199,.3)}
    .top-nav-link{font-size:10.5px;letter-spacing:.06em;padding:11px 4px;text-align:center}#search-season{margin:0;padding:0;grid-template-columns:1fr 1fr;display:grid}
    /* why(issue #332): スマホ幅のセル・セレクトもシーズン/対戦カードで同じ値を
       2か所に手書きしていた。.tb-band .tb-cell へ一本化する(帯本体の指定は
       各画面の構造(グリッド/ブロック)に依るため id 別のまま)。 */
    .tb-band .tb-cell{padding:10px 14px;min-height:56px;border-right:var(--rule) solid var(--brand-navy);border-bottom:var(--rule) solid var(--brand-navy);align-items:flex-start;justify-content:center}.tb-band .tb-cell select{min-width:0;width:100%;font-size:15px}
    .selector-month{min-width:0;padding:10px 14px;min-height:56px;border-bottom:var(--rule) solid var(--brand-navy);font-size:15px}
    .tb-band .selector-counters{background:var(--panel);color:var(--ink);min-height:62px}.tb-band .selector-counters>div{flex:1;min-width:0;padding:9px 12px}.tb-band .selector-counters b{font-size:19px}.tb-band .selector-counters span{font-size:10.5px}
    .month-panel{position:fixed;left:0;right:0;top:44px;width:auto;max-height:calc(100vh - 44px);overflow:auto}.month-grid{grid-template-columns:1fr 1fr}.layout{padding:0 14px}
    .scrolled .brand-logo{width:22px;height:22px}.scrolled .brand-name{font-size:11.5px} .scrolled .selector-month{display:none}.scrolled .selector-counters{display:none}
  }
  @media(prefers-reduced-motion:reduce){.match-video-strip{scroll-behavior:auto}}

  /* --- 新着タブ v2(issue #319): マストヘッド・並び替えトグル・絞り込みチップ・
     日付グループ・先頭グループのポスターカード・「公式アップロード待ち」行。
     モック(10a/10b/10c)の inline style を、既存トークン(--brand-navy 等)と
     .month-heading / .match-row(ledgerRow)のクラス設計にそのまま乗せる。
     採らないもの(動画の長さ・追加時刻・Followed clubs 等)は #319 の対象外。 */
  .latest-masthead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
    gap:20px 32px;margin:0 -32px;padding:24px 32px 18px;border-bottom:var(--rule) solid var(--brand-navy)}
  .latest-masthead-copy{max-width:560px;min-width:0}
  .latest-kicker{font:800 11px/1 var(--font-heading);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink)}
  .latest-masthead h1{margin:12px 0 0;font:900 clamp(28px,4vw,42px)/.98 var(--font-heading);
    letter-spacing:-.03em;text-transform:uppercase;color:var(--ink)}
  .latest-desc{margin:10px 0 0;max-width:520px;color:var(--muted);font-size:13px;line-height:1.5}
  .latest-stats{display:flex;align-items:stretch;flex-wrap:wrap}
  .latest-stat{padding:0 20px;border-left:1px solid var(--line)}
  .latest-stat:first-child{padding-left:0;border-left:0}
  .latest-stat strong{display:block;font:900 22px/1 var(--font-heading);color:var(--ink)}
  .latest-stat span{display:block;margin-top:4px;font:700 10.5px/1 var(--font-heading);
    letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

  .latest-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 -32px;
    padding:0;background:var(--accent-soft);border-bottom:var(--rule) solid var(--brand-navy)}
  .latest-sort{display:flex;border-right:var(--rule) solid var(--brand-navy);flex:none}
  .latest-sort-btn{border:0;background:none;color:var(--ink);cursor:pointer;
    font:800 11.5px/1 var(--font-heading);letter-spacing:.1em;text-transform:uppercase;
    padding:14px 18px;min-height:44px}
  .latest-sort-btn+.latest-sort-btn{border-left:var(--rule) solid var(--brand-navy)}
  .latest-sort-btn[aria-pressed="true"]{background:var(--brand-navy);color:#fff}
  .latest-toolbar .latest-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    margin:0;padding:10px 16px}
  .latest-toolbar .latest-tags button{border-radius:0;min-height:36px}

  .latest-group-heading{margin:24px 0 12px}
  .latest-group-heading:first-of-type{margin-top:0}

  .latest-poster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 22px}
  .latest-poster{display:block;min-width:0}
  .latest-poster-media{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;
    border:2px solid var(--brand-navy);background:var(--accent-soft);cursor:pointer;overflow:hidden;
    font:inherit;color:inherit;text-decoration:none}
  .latest-poster-media img{width:100%;height:100%;object-fit:cover;display:block}
  .latest-poster-media .logo-box{position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:6px}
  .latest-poster-kicker{margin-top:10px;font:800 10.5px/1 var(--font-heading);letter-spacing:.12em;
    text-transform:uppercase;color:var(--accent-ink);overflow-wrap:anywhere}
  .latest-poster-teams{margin-top:6px;font:800 19px/1.15 var(--font-heading);letter-spacing:-.015em;
    color:var(--ink);overflow-wrap:anywhere}
  .latest-poster-teams .hero-score{color:var(--accent-ink)}
  .latest-poster-meta{margin-top:5px;font:500 11.5px/1.35 var(--font-body);color:var(--muted)}

  /* why(latest-pending): ledgerRow をそのまま使い、動画0本のときの
     .match-video-missing だけ破線を強めて「公式アップロード待ち」を目立たせる
     (文言自体は JS 側で latest.pendingNote に差し替え済み)。 */
  .latest-pending .match-video-missing{border-style:dashed;border-width:2px}

  @media(max-width:720px){
    .latest-masthead{display:block;margin:0 -14px;padding:16px 14px}
    .latest-stats{margin-top:14px}
    .latest-stat{padding:0 14px}
    .latest-toolbar{margin:0 -14px}
    .latest-sort-btn{flex:1;padding:13px 10px;font-size:10.5px;text-align:center}
    /* why(issue #319 フォローアップ): 大会・国・フルマッチのみを合わせると
       チップが10個を超えることがあり、折り返すと縦に何段も積み上がって
       下の一覧を押し出してしまう(実データの570px幅で確認)。モック10cと
       同じく、狭い幅では折り返さず横スクロールの1行にする。 */
    .latest-toolbar .latest-tags{flex-wrap:nowrap;overflow-x:auto;
      -webkit-overflow-scrolling:touch;padding:10px 14px}
    .latest-toolbar .latest-tags button{flex:none;white-space:nowrap}
    .latest-poster-grid{grid-template-columns:1fr;gap:18px}
  }

/* Shared v2 surfaces and responsive states. */
/* why(issue #323): 評価行のクラスは `.mreact`(reactionRow が付ける)。v2 の規則が
   `.reactions` を指していて何にも当たらず、評価がグリッドの暗黙の1列目へ落ちて
   カード左端に縦積みになっていた。動画ストリップと同じ右側へ回して、カードの
   右下に横並びで出す。 */
.toolbar-inner{position:relative}.tb-head{min-height:64px}.brand .tagline{display:none}.brand{font-weight:900;text-transform:uppercase}/* why: X は .brand の margin-right:auto と .field-lang の margin-left:auto に   挟まれ、余った幅を半分ずつ配られてツールバーの中央に取り残されていた。   空きを吸うのを X の右側だけにして、X をサイト名(とバージョン)のすぐ右へ置く。 */.brand{margin-right:0}.brand-x{margin-right:auto}.top-nav{position:absolute;top:0;right:245px;height:64px;margin:0;gap:22px}.top-nav-link{white-space:nowrap}.field-lang{margin-left:auto}.field-lang label{display:none}/* why: background のショートハンドで塗ると、.field select が背景画像で描いている   ▼(2枚のグラデーション)ごと消える。v2 の言語セレクトだけ矢印が無くなり、   押せる/選べることが分からなかった。色だけ差し替え、▼は紺地に合わせて白で描き直す。 */.field-lang select{max-width:112px;border-radius:0;color:#fff;background-color:var(--brand-navy);background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-repeat:no-repeat;background-size:5px 5px,5px 5px}
/* why(PR #321): 6番目の列(56px)は共有セル用。国・チーム・シーズン・赤いボタン・
   カウンタの5つが先に埋まるので、共有はこの最後の列へ自動的に収まる(明示配置は
   不要)。 */
#search-season{grid-template-columns:repeat(4,minmax(125px,auto)) minmax(250px,1fr) 56px}
#search-season>.field{order:0}
/* why(PR #321): 「この設定を共有」の位置・見た目は .tb-band .field-share
   (848行目付近)へ一本化した。ここには id 別の指定を残さない。 */
/* why(issue #327/#332): 対戦カードの検索欄だけ v2 へ移行しておらず、v1 のまま紺の
   ツールバーへ直接載っていた。ラベル(チームA/国/チーム/vs)は --muted のままなので、
   ライトモードでは濃いグレーが紺に沈んでほぼ読めない。帯・セル・ラベル・セレクトは
   シーズン検索と共通クラス(.tb-band/.tb-cell、840行目付近)で揃えるため、
   ここには「対戦カードにしか無いもの」だけ残す。 */
#search-h2h .h2h-side legend,#search-h2h .h2h-vs{color:var(--ink)}
/* why(issue #328): 「チームA」「チームB」は左右2組という配置から見て取れるうえ、
   各欄に「国」「チーム」のラベルが付いている。帯の中で2段のラベルが重なって
   かえって読みにくいので画面からは外す。ただし legend は fieldset の
   accessible name なので DOM からは消さない。消すと支援技術からは「国」「チーム」の
   select が2組並んでいるだけになり、どちらのクラブか区別が付かなくなる。 */
#search-h2h .h2h-side legend{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* why(issue #329/#332): 国・チームを選ぶ欄の組版(パディング・罫線・ラベル/セレクトの
   見た目)は .tb-band .tb-cell に一本化した。ここに残すのは h2h-side 自体の
   flex 配置(2つの fieldset を横に並べる)だけ。 */
#search-h2h .h2h-side{gap:0;align-items:stretch}
.selector-month{background:#ae1800;border-color:#ae1800;color:#fff}
/* why: v1 の .options は本文と同じ 1120px の中央寄せだったが、v2 のツールバーは
   全幅の帯。max-width と負の margin を残したままだと、親(.toolbar)に padding が
   無いぶん左へ 32px はみ出し、右は 160px 足りない帯になる(issue #326)。
   .toolbar-inner と同じ左右 32px の内側余白へ揃える。 */
.options{background:var(--bg);color:var(--ink);padding:7px 32px;margin:0;max-width:none;border-bottom:2px solid var(--line)}.options>summary{border-radius:0;min-height:32px;max-width:240px}
.month-panel{left:auto;right:15%;max-height:70vh;overflow:auto}.month-panel-head button,.month-competitions button{min-height:44px;min-width:44px}
/* why(issue #330): 検索オプションの中身を月パネルへ移したときの組版。
   月タイル・大会チップと同じ段組みに見えるよう、上に罫線を引いて1列で積む。
   月のセレクトと大会のチェックボックスは、すぐ上の月タイル・大会チップと
   同じ状態なのでパネルの中では出さない(要素自体は書き込み先として残す)。 */
.month-panel .options-body{display:block;padding:12px 14px;border:0;border-radius:0;background:transparent;margin:0;border-top:var(--rule) solid var(--brand-navy)}
.month-panel .opt-group{width:100%;margin-bottom:12px}
.month-panel #opt-comp-group,.month-panel #opt-month-group{display:none}
.month-panel .best-btn,.month-panel .opt-reset{width:100%;margin-top:6px}
.tag,.react,.options>summary,.match,.vcard,.sheet,.tb-menu-panel,.collection-card,button,select{border-radius:0}.tag{font-size:max(10.5px,.7rem)}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.match-hero{background:var(--brand-navy);color:#fff;padding:36px;margin:20px 0}.match-hero h1{font-size:clamp(28px,4vw,54px);line-height:1.1;font-weight:900}.match-hero p{color:var(--brand-pitch)}.match-video-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;gap:20px}.match-video{display:flex;flex-direction:column;gap:10px}.match-video img{width:100%;aspect-ratio:16/9;object-fit:cover}.match-video .tag{align-self:flex-start}.match-nav{display:flex;justify-content:space-between;gap:24px;padding:24px 0;border-top:2px solid var(--ink)}
.team-summary,.audience-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:2px solid var(--ink);margin:20px 0}.team-summary>div,.audience-stat{padding:20px;border-right:1px solid var(--line)}.team-summary strong,.audience-stat strong{display:block;font-size:32px;font-weight:900}.team-summary span,.audience-stat span,.audience-stat small{display:block;font-size:12px;color:var(--muted)}.team-form{display:flex;flex-wrap:wrap;gap:4px;padding:12px 0}.team-form a{padding:9px;color:#fff;background:var(--brand-navy);font-weight:800}.team-form .form-L{background:#ae1800}.team-form .form-D{background:var(--muted)}.team-filters{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.team-filters button{padding:10px;background:var(--panel);color:var(--ink);border:1px solid var(--line);min-height:44px}.team-filters button.is-active{background:var(--ink);color:var(--bg)}
.collection-card{box-shadow:none;border:2px solid var(--ink)}
.stats-header{background:var(--brand-navy);color:#fff;border-radius:0;padding:20px 32px}.stats-brand{color:#fff;font-weight:900}.stats-counters tbody{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.stats-counters tr{display:flex;flex-direction:column-reverse;border:1px solid var(--line);padding:16px}.stats-counters td{font-size:32px;font-weight:900}.stats-counters th,.stats-counters td{border:0}.stats-table{border-collapse:collapse}.stats-table th,.stats-table td{border-bottom:1px solid var(--line)}.stats-section h2{border-bottom:2px solid var(--ink);padding-bottom:12px}.stats-bar{display:block;width:var(--bar-width);height:8px;background:var(--ink);margin-top:6px}.audience-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.audience-chart{padding:24px;border:1px dashed var(--line)}.player-other-videos{display:flex;gap:10px;overflow:auto;padding:16px}.player-other-videos .vcard{min-width:150px;max-width:220px}
@media(max-width:1050px){.top-nav{gap:12px;right:200px}.top-nav-link{font-size:10.5px}.brand-version{display:none}}
/* why(PR #321): #search-season の段組みは ≤720px にも別の値があるので
   (982行目付近)、この帯の幅だけを指すブロックを @media(max-width:1050px) と
   共用すると、同じ id への指定同士が幅で切り分けられずに競合する
   (720px の画面でも「1050px 以下」に該当してしまい、あとに書かれたこちらが
   詳細度同点で勝ってしまっていた)。min-width:721px を足して
   ちょうど721〜1050pxの帯だけに絞り、720px 側とは重ならないようにする。 */
@media (min-width:721px) and (max-width:1050px){
  /* why(PR #321): 共有セルを最後の56px列として明示的に持たせる(暗黙列だと
     auto-placement がシーズン欄まで巻き込んで詰めてしまう事故が720px側で起きた)。
     国・チーム・シーズンは3列(25%ずつ)、赤いボタンは残り(4〜5列目)をまたいで
     行を埋め、カウンタは1〜4列目、共有は5列目だけに固定する。 */
  #search-season{grid-template-columns:25% 25% 25% minmax(0,1fr) 56px}
  #search-season .selector-month{grid-column:4/-1}
  #search-season .selector-counters{grid-column:1/-2;justify-content:flex-end;padding:10px 0}
  #search-season .field-share{grid-column:-2/-1}
}
/* why(PR #321): #search-h2h は .tb-row の flex-wrap:wrap 頼みで、折り返す位置が画面幅で
   連続的に動いていた(実測: 1515px以上は1行、1460〜1514pxは共有だけ折り返し、
   1400px未満はさらに赤いボタン・カウンタ・共有もまとめて折り返す)。#search-season と
   同じく、幅721px以上は grid で明示的な段組みに固定する。幅720px以下の
   flow-root/float(1180行目付近)は変えないので、@media (min-width:721px) でスコープする
   (スコープを外すと、あとに書いた非メディアの同詳細度ルールがモバイル側のブロックを
   上書きしてしまう事故が過去にあった)。 */
@media (min-width:721px){
  #search-h2h{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) 56px;column-gap:0;row-gap:0}
  #search-h2h .h2h-side:first-of-type{grid-column:1;grid-row:1}
  /* why(PR #321): sideA の team セルは .tb-band .tb-cell:last-child{border-right:0}
     (865行目)で右罫線が無いので、vs 自身に左右の罫線を持たせて sideA/sideB との
     区切りを出す(シーズン帯が .tb-cell の border-right で列を区切っているのと同じ
     見た目に揃える)。padding は元の .h2h-vs(0 4px、119行目)より広げて grid の
     セルとして中央に収まる余白にする。 */
  /* why(PR #321): .h2h-vs{align-self:center}(119行目)のままだと罫線が文字の高さで
     途切れる。セルとして帯の高さいっぱいに伸ばし、文字は flex で中央に置く。 */
  #search-h2h .h2h-vs{grid-column:2;grid-row:1;padding:0 16px;text-align:center;
    align-self:stretch;display:flex;align-items:center;justify-content:center;
    border-left:var(--rule) solid var(--brand-navy);border-right:var(--rule) solid var(--brand-navy)}
  #search-h2h .h2h-side:last-of-type{grid-column:3/-1;grid-row:1}
  /* why(PR #321): 2行目(721〜1279px)。赤いボタンは左端、カウンタは共有の左に隣接
     させたいので、1行目の sideB が4列目(共有の列)までまたいでいるのと同じ理屈で、
     2行目はチーム欄と同じ2〜3列目へ重ねて置く。justify-content:flex-end は
     .tb-band .selector-counters(904行目)がすでに持っているのでここでは書かない。 */
  #search-h2h #month-toggle{grid-column:1;grid-row:2;justify-self:start}
  #search-h2h #selector-counters{grid-column:2/-2;grid-row:2}
  #search-h2h .field-share{grid-column:-2/-1;grid-row:2}
  /* why(PR #321): 1行目と2行目の間の横罫線は1行目の側(チームA・vs・チームB)の
     下罫線で引く。1行目は3つで帯の全列を埋めるので線が途切れない(2行目の側に
     上罫線を付けると、赤いボタンとカウンタの間の空きで線が切れた)。畳んだ行
     (.is-collapsed)ではチーム欄ごと隠れるので罫線も一緒に消える。 */
  #search-h2h .h2h-side,#search-h2h .h2h-vs{border-bottom:var(--rule) solid var(--brand-navy)}
  /* why(PR #321): 1280px は4セル(国/チームを2組)の最小幅(select min-width:130px +
     セルpadding 40px)× 4 + vs(左右padding込み約58px)+ 赤いボタン(154px)+
     カウンタ(287px)+ 共有(56px)+ 帯の左右padding(64px)の合計 約1267px から。
     これを下回ると1行には収まらないので、1280px以上でだけ1行 grid に切り替える。 */
  @media (min-width:1280px){
    #search-h2h{grid-template-columns:minmax(auto,1fr) auto minmax(auto,1fr) auto auto 56px}
    #search-h2h .h2h-side:last-of-type{grid-column:3;grid-row:1}
    #search-h2h #month-toggle{grid-column:4;grid-row:1}
    #search-h2h #selector-counters{grid-column:5;grid-row:1}
    #search-h2h .field-share{grid-column:6;grid-row:1}
    #search-h2h .h2h-side,#search-h2h .h2h-vs{border-bottom:0}
  }
}
/* why: 言語セレクト(38.1px)を ≡ の 34px に揃える。縦の中央揃えは .tb-head の
   align-items:center が持つ(.tb-head を箱に戻したので、子に上下マージンを足して
   区切り線から離す代用は要らない)。 */
@media(max-width:720px){.field-lang select{height:34px;padding-top:0;padding-bottom:0}.tb-menu-btn{width:34px;height:34px}}
/* why(issue #327/#329): 狭い画面では .tb-row が display:contents になり、
   #search-h2h の箱ごと消えるため帯の地色が塗られない。display:block で箱を戻し、
   中身はシーズン検索のスマホ表示(2列・角丸なしのセル・罫線で区切る)へ合わせる。
   .toolbar-inner は狭い画面で padding:0 なので、そのまま画面幅いっぱいの帯になる。 */
@media(max-width:720px){ /* Jinja のコメント開始と読まれるため、波括弧の直後に # を置かない */
  /* why(PR #321): display:block のままだと、あとで float させるカウンタ・共有の
     2つが親の高さに含まれず、帯の地色・下罫線がその手前で終わってしまう
     (float は通常の block 内容には高さを渡さない)。display:flow-root は
     overflow:hidden と違って中身を切り取らない(position:fixed の #month-panel や
     共有メニューの position:absolute を隠さない)ので、これで float を包む。 */
  #search-h2h{display:flow-root;background:var(--accent-soft);margin:0;padding:0}
  #search-h2h .h2h-side{display:grid;grid-template-columns:1fr 1fr;gap:0;border:0;border-radius:0;padding:0;background:transparent}
  /* why(issue #332/#348): セル・セレクトのスマホ幅の値はシーズン検索と同じ
     (.tb-band .tb-cell、917行目付近の @media(max-width:720px) にまとめてある)。
     ここに残すのは h2h 固有の箱の組み方(display:flow-root / .h2h-side の2列グリッド)
     と、カウンタ・共有を1行にまとめる float だけ。 */
  /* why(issue #303 v2): 赤いボタン・カウンタ・共有を1行にまとめる(モック 13b/13c の
     ツールバー3段目)。赤いボタンは内容なりの幅で左、共有は56pxで右。どちらも
     float なので、間のカウンタは通常のブロックのままだと float とオーバーラップし、
     帯の地色だけが下に回り込む。overflow:hidden で新しい BFC を作ると、float の
     間を自動で埋める(width の計算をこちらで持つ必要が無い)。 */
  #search-h2h .selector-month{float:left;width:auto;border-bottom:0}
  /* why: 共有は DOM でカウンタより後ろにあり、後から来る float は先に置かれた BFC(カウンタ)の
     横へは回り込まず次の行へ落ちる。展開時だけ帯の右下へ絶対配置し、カウンタはその幅を
     margin-right で空ける。カウンタの地は帯の色のまま(モック13b/13cは帯と同じ面)。
     畳んだときの共有は「畳んだツールバー帯」の共通規則で通常フローへ戻す。 */
  #search-h2h{position:relative}
  #search-h2h .selector-counters{overflow:hidden;margin-right:56px;background:transparent}
  #search-h2h .field-share{position:absolute;right:0;bottom:0;width:56px;min-width:0;min-height:62px;border-left:var(--rule) solid var(--brand-navy)}
  /* 赤いボタンの横に3件を並べるので、ラベル(「フルマッチ」)は折り返さず左右の余白を詰める。 */
  #search-h2h .selector-counters>div{padding:9px 4px}
  #search-h2h .selector-counters span{white-space:nowrap;letter-spacing:.04em}
}
@media(max-width:720px){.top-nav{position:static;height:auto;gap:0;padding:0}.tb-head{min-height:52px}.top-nav-link{white-space:normal;font-size:10.5px;line-height:1.2}.brand-name{font-size:13px}.field-lang select{width:75px;font-size:13px}.brand-x{display:none}.options{margin:0;padding:6px 14px}#search-season .selector-counters{background:var(--panel);padding:0;min-height:56px}.selector-counters span{color:var(--muted)}.month-panel{top:52px;right:0;max-height:calc(100dvh - 52px)}.match-video-list{grid-template-columns:1fr}.team-summary,.audience-grid,.stats-counters tbody{grid-template-columns:repeat(2,minmax(0,1fr))}.match-hero{padding:24px}.stats-header{padding:16px}
/* why(PR #321): 共有セルは最後の56px列に固定し、各行の右端のセル(チーム・赤いボタン)を
   その列までまたがせる。行は「国|チーム」「シーズン|赤いボタン」「カウンタ|共有」。
   暗黙列(grid-auto-columns)に頼ると auto-placement が国〜赤いボタンを1行に詰めた。
   この段組みは必ずこの(最後の)スマホ幅ブロックに書く。上の非メディアクエリの
   #search-season{grid-template-columns:repeat(4,…) … 56px} より前に書くと、
   詳細度同点の後勝ちでPC用の6列がスマホにも効いてしまう。 */
#search-season{grid-template-columns:50% minmax(0,1fr) 56px}
#search-season>.field:nth-of-type(2),#search-season .selector-month{grid-column:2/-1}
#search-season .selector-counters{grid-column:1/-2}
#search-season .field-share{grid-column:-2/-1}
}
/* --- 畳んだツールバー帯(シーズン/対戦カード共通) ------------------------------
   why: スクロールで畳んだ帯の見た目は、帯要素の is-collapsed(createToolbarCollapse が
        自分の帯にだけ付け外しする)を正本にして、ここの1組だけで決める。以前は
        body のタブ別クラス(シーズン用/対戦カード用)+帯の id でタブごとに書き分け、モバイルの1行まとめ・対戦カード専用ブロックにも散っていたため、
        シーズンだけ「残り幅いっぱい・枠なし・44px・帯の色を残す」に直り、対戦カードは
        帯の色を消した(transparent)まま内容幅のボタンが残っていた。
   why(接頭辞 :is(#search-season,#search-h2h).is-collapsed): 展開時の組版は id で
        書かれている(#search-season{display:grid} / #search-h2h .h2h-side{display:grid} /
        スマホの #search-h2h .field-share{position:absolute} など)。畳んだ側も帯の id を
        ここで1度だけ束ねて詳細度を (1,1,0) 以上にそろえ、どちらの帯でも同じ規則が
        必ず勝つようにする(タブごとに勝ち負けを合わせ直す必要をなくす)。帯を増やしたら
        この :is() に id を足すだけでよい。 */
.tb-expand{display:none;border:1px solid var(--line);border-radius:8px;padding:8px 14px;
  background:var(--panel);color:var(--ink);font:inherit;cursor:pointer}
.tb-expand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:is(#search-season,#search-h2h).is-collapsed{display:flex;align-items:stretch;column-gap:var(--tb-gap)}
/* 入力欄(国・チーム・シーズン、対戦カードの左右の組と vs)は隠す。「検索条件を変更」は
   帯を開く唯一の手段がスマホにしかない(PC は最上部へ戻れば自動で開く)ので、
   表示は下の @media(max-width:720px) 側でだけ出す(issue #303)。 */
:is(#search-season,#search-h2h).is-collapsed>:is(.field,.h2h-side,.h2h-vs){display:none}
:is(#search-season,#search-h2h).is-collapsed>.field-share{display:flex}
/* カウンタは右端へ(畳む前後で位置を変えない。issue #336)。 */
:is(#search-season,#search-h2h).is-collapsed .selector-counters{margin-left:auto}
@media(max-width:720px){
  /* スマホは「検索条件を変更 | 共有」の2つだけ。ボタンは共有を除いた残り幅いっぱいにし、
     共有はボタンと同じ高さ(帯の stretch)で右端へ。展開時の共有の絶対配置・62px は
     畳んだ行には持ち込まない。帯の地色(--accent-soft)は消さない。 */
  :is(#search-season,#search-h2h).is-collapsed .selector-counters{display:none}
  :is(#search-season,#search-h2h).is-collapsed>.tb-expand{display:block}
  :is(#search-season,#search-h2h).is-collapsed>.tb-expand{flex:1 1 auto;min-height:44px;background:var(--panel);border:0}
  :is(#search-season,#search-h2h).is-collapsed>.field-share{position:static;float:none;width:56px;min-height:0;margin-left:auto}
}
/* why: 320〜360px は、ヘッダー4項目の間隔を取るとサイト名が省略記号で切れる。旧表示の
   #241 と同じく4項目とサイト名の全文を残し、間隔とサイズを一段詰める(0 にはしない)。
   v2 の 720px 側の値より後ろに書く必要があるので、ファイル末尾に置く。 */
@media(max-width:360px){.tb-head{padding:8px 10px;gap:8px}.brand{gap:6px}.brand-logo{width:24px;height:24px}.brand-name{font-size:12.5px}}