/* T-2: ランクプレートの色・シェイプは rank-plate.css（単一ソース）を先頭で読む */
@import "rank-plate.css";
      :root {
        --bg: #050505;
        --bg-paper: #0a0a0a;
        --panel: rgba(255, 255, 255, 0.045);
        --panel-strong: rgba(255, 255, 255, 0.075);
        --line: rgba(212, 175, 55, 0.32);
        --line-soft: rgba(212, 175, 55, 0.18);
        --gold: #d4af37;
        --gold-light: #f7ef8a;
        --red: #b91c1c;
        --text: #f7f3e8;
        --muted: #a7a29a;
        --dim: #6f6a62;
        --danger: #e36c61;
        --ok: #7ccf91;
        --jade: #2f9e6e; /* 友人対戦の差し色（翡翠） */
        --jade-light: #7fe0b0;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
        background: var(--bg);
        color: var(--text);
      }

      body {
        font-family: "Noto Sans JP", system-ui, sans-serif;
        min-height: 100dvh;
        padding-bottom: calc(76px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
        background:
          radial-gradient(circle at 50% -10%, rgba(212, 175, 55, 0.16), transparent 34rem),
          radial-gradient(circle at 100% 10%, rgba(185, 28, 28, 0.12), transparent 28rem),
          linear-gradient(180deg, #080808 0%, #030303 100%);
        letter-spacing: 0;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        opacity: 0.24;
        background-image: radial-gradient(rgba(247, 239, 138, 0.16) 1px, transparent 0);
        background-size: 38px 38px;
        mask-image: linear-gradient(to bottom, black, transparent 70%);
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      button {
        font: inherit;
      }

      .shell {
        position: relative;
        z-index: 1;
        width: min(1240px, calc(100% - 32px));
        margin: 0 auto;
        padding: calc(14px + var(--safe-top, env(safe-area-inset-top, 0px))) 0 28px;
      }

      .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        min-height: 48px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 20px;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

      .brand-mark {
        height: 38px;
        width: auto;
        display: block;
        object-fit: contain;
        border-radius: 4px;
        box-shadow: 0 0 18px rgba(212, 175, 55, 0.14);
      }

      .brand-name {
        font-weight: 900;
        letter-spacing: 0.16em;
        font-size: 13px;
        white-space: nowrap;
      }

      .global-nav {
        display: none;
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
      }

      .global-nav a,
      .global-nav button {
        border: 0;
        background: transparent;
        color: inherit;
        padding: 10px 12px;
        cursor: pointer;
      }

      .global-nav .active {
        color: var(--gold-light);
      }

      /* PC ヘッダーの赤丸（バッジ・レイアウトを崩さない絶対配置）。
         図鑑＝受取可能なコレクション／友達＝クラン（未所属 or 自分のクランへ加入申請）。
         ★★2 つは**同じ規則に相乗り**させる（☰ の #menuUpdates / #menuAccount と同じ作法）。
            別々に書くと、後から片方だけ色や位置を変えて「赤丸が 2 種類ある」画面になる。 */
      #navMission,
      #navCompanions {
        position: relative;
      }
      #navMission.has-unread::after,
      #navCompanions.has-unread::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 4px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #d24a4a;
      }

      .top-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
      }

      /* スマホのメニュー（Menu ボタンから開くドロップダウン） */
      .app-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 50;
        width: min(264px, calc(100vw - 28px));
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(14px);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
        display: grid;
        gap: 2px;
        max-height: min(78vh, calc(100dvh - 80px));
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .app-menu[hidden] {
        display: none;
      }
      .app-menu-head {
        padding: 6px 10px 10px;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .app-menu-name {
        font-weight: 900;
        font-size: 14px;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .app-menu-item {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        text-align: left;
        border: 0;
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        padding: 10px;
        border-radius: 8px;
        cursor: pointer;
      }
      /* display:flex は UA の [hidden]{display:none} を上書きするため、hidden 属性が効くよう
         救済ルールを明示（他コンポーネントの .X[hidden] と同じ対処）。これが無いと
         menuAdmin/menuLogin/menuLogout/menuAccount/menuSettings の hidden ガードが無効化され、
         非管理者にも admin リンク等が表示されてしまう。 */
      .app-menu-item[hidden] {
        display: none;
      }
      .app-menu-item:hover {
        background: rgba(255, 255, 255, 0.05);
      }
      .app-menu-item.danger {
        color: var(--danger);
      }
      .app-menu-sep {
        height: 1px;
        margin: 4px 6px;
        background: rgba(255, 255, 255, 0.08);
      }

      .top-action {
        min-width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: var(--text);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        cursor: pointer;
        font-weight: 800;
      }

      .login-link {
        border-color: var(--line);
        color: var(--gold-light);
      }

      /* 鳳凰コイン残高。トップ右上(名前の隣)と Menu 内に 🪙 数字 で表示。 */
      .coin-balance {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        color: var(--gold-light);
        font-weight: 800;
        letter-spacing: 0.02em;
      }
      #coinBalanceTop {
        padding: 6px 10px;
        font-size: 0.86rem;
      }
      .coin-balance-menu {
        margin-top: 2px;
        font-size: 12px;
      }

      .layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
      }

      .main-column {
        display: grid;
        gap: 14px;
      }

      .hero,
      .panel,
      .summary-shell,
      .partner,
      .partner-card {
        border: 1px solid var(--line-soft);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
          rgba(0, 0, 0, 0.34);
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
      }

      .hero {
        position: relative;
        min-height: min(500px, calc(100dvh - 148px));
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        text-align: center;
      }

      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          radial-gradient(circle at 50% 34%, rgba(247, 239, 138, 0.16), transparent 28%),
          radial-gradient(circle at 50% 60%, rgba(185, 28, 28, 0.13), transparent 38%);
      }

      /* ヒーロー背後にうっすら敷く背景画像（指定画像 toppage.png）。
         .hero-inner〔z-index:1〕の裏に置き、端は放射状マスクで黒地へ自然に溶かす。
         opacity は可読性優先で控えめ。 */
      .hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: url("/images/toppage.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0.08;
        -webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
        mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
      }

      .hero-inner {
        position: relative;
        z-index: 1;
        width: min(100%, 620px);
      }

      .kicker {
        color: var(--gold);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.48em;
        text-transform: uppercase;
      }

      /* 「ポーカー鳳凰戦」は全UIで同サイズの横1行。7文字が360px幅でも収まるサイズ
         (PCは @media 側の clamp で上書き)。 */
      .hero-title {
        margin: 12px 0 8px;
        font-family: "Noto Serif JP", serif;
        font-weight: 900;
        font-size: clamp(30px, 9vw, 60px);
        line-height: 1;
        white-space: nowrap;
      }

      .gold-text {
        color: var(--gold-light);
        text-shadow: 0 0 22px rgba(212, 175, 55, 0.35);
      }

      .hero-sub {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.9;
      }

      /* シーズン表示（罫線に挟んだ「SEASON N」）。旧ダイヤ型エンブレムの跡地で、
         数字はサーバーが起動時に焼き込む（src/shared/season-mark.ts）。 */
      .season-band {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 22px 0 20px;
      }

      /* 左右の罫線は外側へ向かって消える（中央の文字に向かって濃くなる）。 */
      .season-band::before,
      .season-band::after {
        content: "";
        flex: 1;
        height: 1px;
      }

      .season-band::before {
        background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.42));
      }

      .season-band::after {
        background: linear-gradient(90deg, rgba(212, 175, 55, 0.42), transparent);
      }

      /* ★letter-spacing は**最後の文字の右にも**入る。ここは flex の並びなので中央寄せの
         ズレではなく「数字との間隔が広く見える」形で出る。負の margin で 1 文字ぶん詰める。 */
      .season-band-kicker {
        color: var(--gold);
        font-size: clamp(15px, 4.2vw, 17px);
        font-weight: 900;
        letter-spacing: 0.42em;
        margin-right: -0.42em;
      }

      .season-band-number {
        font-family: "Noto Serif JP", serif;
        font-size: clamp(32px, 9vw, 44px);
        font-weight: 900;
        line-height: 1;
        color: var(--gold-light);
        text-shadow: 0 0 22px rgba(212, 175, 55, 0.35);
      }

      /* 累計ハンド・ライブティッカー（SEASON 帯直下・正本
         plans/toppage-total-hands-ticker-plan.md）。器は hidden 既定＝
         JS (applyHandsTicker) が /lobby/summary の total_hands で開く。
         意匠は「額縁プレート」（モック案2・2026-09-01 ユーザー選定）＝一重＋内側の
         二重線の枠・四隅の菱形飾り・枠上辺に食い込む LIVE ドット付きラベル。
         SEASON 帯（開いた罫線）に対して「閉じた枠」で対比を付ける。 */
      .hands-ticker {
        position: relative;
        width: fit-content;
        margin: -2px auto 4px;
        /* 1行構成（数字＋ハンド＋コピー）なので左右 padding は控えめ＝
           SP 390px で 7 桁（本番規模）でも枠が収まる幅に保つ。 */
        padding: 14px 20px 11px;
        border: 1px solid rgba(212, 175, 55, 0.5);
        background:
          radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.1), transparent 70%),
          rgba(0, 0, 0, 0.35);
        display: grid;
        justify-items: center;
        gap: 5px;
      }

      /* 内側の二重線（額縁）。 */
      .hands-ticker::before {
        content: "";
        position: absolute;
        inset: 3px;
        border: 1px solid rgba(212, 175, 55, 0.22);
        pointer-events: none;
      }

      /* ★display を明示した要素は UA の [hidden]{display:none} に勝ってしまうので
         明示の救済規則が必須（.install-gate[hidden] と同じ作法）。 */
      .hands-ticker[hidden] {
        display: none;
      }

      /* 枠の上辺に食い込むラベル。背景はヒーロー地色相当のマスク＝下を通る枠線を切る
         （モック案2と同じ技法。地色はグラデーションなので近似色＝ズレが見えたら実測調整）。 */
      .hands-ticker-label {
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 0 10px;
        background: #0a0906;
        color: var(--gold);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      /* 四隅の菱形飾り（正方形を 45° 回転・枠線の交点に被せる）。 */
      .hands-ticker-corner {
        position: absolute;
        width: 7px;
        height: 7px;
        border: 1px solid var(--gold);
        transform: rotate(45deg);
        background: #0a0906;
      }

      .hands-ticker-corner.tl { top: -4px; left: -4px; }
      .hands-ticker-corner.tr { top: -4px; right: -4px; }
      .hands-ticker-corner.bl { bottom: -4px; left: -4px; }
      .hands-ticker-corner.br { bottom: -4px; right: -4px; }

      .live-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold-light);
        box-shadow: 0 0 8px rgba(247, 239, 138, 0.8);
        animation: livePulse 1.6s ease-in-out infinite;
      }

      @keyframes livePulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.35;
          transform: scale(0.72);
        }
      }

      .hands-ticker-row {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 6px;
      }

      .hands-ticker-num {
        font-family: "Noto Serif JP", serif;
        font-size: 26px;
        font-weight: 900;
        line-height: 1;
        color: var(--gold-light);
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
        font-variant-numeric: tabular-nums;
      }

      .hands-ticker-unit {
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
      }

      /* 数字行に続けて「N ハンド の頂点を目指せ。」と1行で読ませる（2026-09-01 ユーザー確定）。
         ★flex gap(6px) は unit との間にも入るので、負 margin で詰めて「ハンドの頂点…」を
           連続した一句として読ませる。 */
      .hands-ticker-copy {
        margin-left: -6px;
        color: var(--text);
        font-family: "Noto Serif JP", serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
      }

      @media (prefers-reduced-motion: reduce) {
        .live-dot {
          animation: none;
        }
      }

      /* PWA インストール案内（ログイン後・ゲームページと同挙動） */
      .install-gate {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        padding-bottom: calc(20px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
        background: rgba(5, 5, 5, 0.78);
        backdrop-filter: blur(8px);
      }
      .install-gate[hidden] {
        display: none;
      }
      .install-card {
        width: min(440px, 100%);
        display: grid;
        gap: 14px;
        padding: 24px;
        border-radius: 16px;
        border: 1px solid var(--line);
        background:
          radial-gradient(circle at top, rgba(212, 175, 55, 0.12), transparent 60%),
          var(--bg-paper);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
      }
      .install-kicker {
        font-size: 0.72rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold-light);
      }
      .install-title {
        font-family: "Noto Serif JP", serif;
        font-size: 1.35rem;
        font-weight: 900;
        color: var(--text);
      }
      .install-copy {
        color: var(--muted);
        line-height: 1.55;
        font-size: 0.92rem;
      }
      .install-copy strong {
        color: var(--text);
      }
      .install-steps {
        margin: 0;
        padding-left: 1.2em;
        color: var(--muted);
        line-height: 1.5;
        font-size: 0.9rem;
      }
      .install-steps li + li {
        margin-top: 8px;
      }
      .install-steps strong {
        color: var(--text);
      }
      .install-steps[hidden],
      .install-native[hidden] {
        display: none;
      }
      .install-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
      }
      .install-btn {
        min-height: 44px;
        padding: 0 20px;
        border: 1px solid rgba(247, 239, 138, 0.68);
        border-radius: 10px;
        background: linear-gradient(135deg, var(--gold-light), var(--gold) 48%, #9b6d1a);
        color: #151006;
        font-weight: 900;
        letter-spacing: 0.08em;
        cursor: pointer;
      }
      .install-btn.ghost {
        background: transparent;
        border-color: var(--line);
        color: var(--muted);
      }

      /* PC/スマホでコピーを出し分ける汎用ユーティリティ(2択UIの説明文・heroキャッチの改行)。
         既定(スマホ)は .pc-only を隠し、≥760px で反転する。 */
      .pc-only {
        display: none;
      }

      /* スマホ: キャッチコピーは「運に左右される一戦を超え、」で改行して2行に。PCは1行へ復帰。 */
      .hero-sub-l1 {
        display: block;
      }

      /* 2択UI: 鳳凰戦カード内の選抜/一般リーグ。スマホ=縦積みの行(左=説明・右=バッジ+ボタン)、
         PC(≥760px)=横並びの縦型カード(説明の下にボタン)。grid-auto-rows:1fr でスマホの
         2つの box の高さを揃える。一般行は既存 .yosen-entry の is-highlight/is-closed
         (クラス起点) がそのまま効く。 */
      .league-rows {
        display: grid;
        grid-auto-rows: 1fr;
        gap: 10px;
        width: min(100%, 560px);
        margin: 18px auto 0;
        text-align: left;
      }

      .league-row {
        position: relative;
        overflow: hidden; /* スート装飾をカード内にクリップ */
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        min-height: 64px;
        padding: 12px 16px;
        border: 1px solid var(--line-soft);
        background: rgba(255, 255, 255, 0.035);
        color: var(--text);
      }

      /* 本文を装飾レイヤーより前面に(friend-entry と同じ作法)。 */
      .league-row > .league-info,
      .league-row > .league-action {
        position: relative;
        z-index: 1;
      }

      /* スートモチーフ(選抜=♠♣/一般=♥♦・金モノトーン)。friend-deco と同作法:
         絶対配置=flex不参加・背面z0・pointer-events無効・friendFloat流用。
         可読性優先で文字の背面は避け、説明とボタンの間の空きゾーンに控えめに置く。 */
      .league-deco {
        position: absolute;
        inset: 0;
        z-index: 0;
        margin: 0;
        pointer-events: none;
      }

      .league-deco i {
        position: absolute;
        font-style: normal;
        font-family: "Noto Serif JP", serif; /* U+FE0E と併用で絵文字化を抑止 */
        color: var(--gold-light);
        opacity: 0.1;
        animation: friendFloat 6s ease-in-out infinite alternate;
      }

      .league-deco i:nth-child(1) {
        right: 30%;
        top: 8%;
        font-size: 26px;
        animation-delay: 0s;
      }

      .league-deco i:nth-child(2) {
        right: 24%;
        bottom: 6%;
        font-size: 18px;
        animation-delay: 1.8s;
      }

      /* 2枚が同期して揺れないよう一般側は位相をずらす。 */
      .league-study .league-deco i:nth-child(1) {
        animation-delay: 2.6s;
      }

      .league-study .league-deco i:nth-child(2) {
        animation-delay: 4.4s;
      }

      button.league-row {
        width: 100%;
        font: inherit;
        cursor: pointer;
        text-align: left;
      }

      .league-info {
        min-width: 0;
      }

      /* リーグタイトル: hero の「POKER HOUOU LEAGUE＋鳳凰戦」と同作法の
         英字キッカー＋Serif大見出し(両リーグとも金トーンで統一)。 */
      .league-kicker {
        display: block;
        color: var(--gold);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.3em;
        text-transform: uppercase;
      }

      .league-info strong {
        display: block;
        margin-top: 2px;
        font-family: "Noto Serif JP", serif;
        font-size: 20px;
        font-weight: 900;
        /* 小サイズの明朝漢字はぼかし光彩(0 0 18px)だと輪郭ごと滲んで読みにくい。
           輪郭を締める下方向の影＋控えめな字間で可読性優先(金トーンは維持)。 */
        letter-spacing: 0.08em;
        color: var(--gold-light);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
      }

      .league-info .league-state {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 12px;
      }

      /* 右側のアクション列(確定ボタン)。PCでは説明の下・カード下端に揃う。 */
      .league-action {
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
      }

      /* レール内のボーダーカード/達成バーは縦圧縮(固定高に収めるため)。
         見出しラベルは読めるサイズへ(base 10px/PC 8px を上書き)。 */
      .season-box .border-grid {
        margin-top: 0;
      }

      .season-box .border-card {
        min-height: 0;
        padding: 8px 10px;
      }

      .season-box .border-card span,
      .season-box .progress-head span,
      .season-box .progress-scale {
        font-size: 11px;
        letter-spacing: 0.06em;
        color: var(--muted);
      }

      /* 一般リーグ休止中(is-closed)は説明文を休止文言へ差し替える(表示はCSSだけで切替)。 */
      .study-desc-closed {
        display: none;
      }

      .yosen-entry.is-closed .study-desc {
        display: none;
      }

      .yosen-entry.is-closed .study-desc-closed {
        display: inline;
      }

      /* 選抜リーグの文言バッジ: .yosen-cta と同型の金ピル(視覚表示専用・クリックは行が担う)。 */
      .league-cta {
        flex: none;
        white-space: nowrap;
        padding: 9px 18px;
        border: 1px solid rgba(247, 239, 138, 0.68);
        border-radius: 999px;
        background: linear-gradient(135deg, var(--gold-light), var(--gold) 48%, #9b6d1a);
        color: #151006;
        font-family: "Noto Serif JP", serif;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: 0.12em;
        box-shadow: 0 8px 24px rgba(212, 175, 55, 0.26);
      }

      /* 行(button)が disabled のときバッジをグレー表示(閉場中/資格なし)。 */
      button.league-row:disabled {
        cursor: not-allowed;
      }

      .league-row:disabled .league-cta {
        color: rgba(247, 243, 232, 0.6);
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.06);
        box-shadow: none;
      }

      .hero-note {
        min-height: 20px;
        margin-top: 12px;
        color: var(--muted);
        font-size: 12px;
      }

      .hero-consent {
        margin-top: 8px;
        color: var(--dim);
        font-size: 11px;
        line-height: 1.7;
      }
      .hero-consent a {
        color: var(--gold);
        text-decoration: underline;
      }

      /* 起動時広告モーダル（1日の最初のトップアクセスで1回・画像＋外部リンク）。 */
      .ad-gate {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        padding-top: calc(20px + var(--safe-top, env(safe-area-inset-top, 0px)));
        padding-bottom: calc(20px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
        background: rgba(5, 5, 5, 0.82);
        backdrop-filter: blur(6px);
      }
      .ad-gate[hidden] {
        display: none;
      }
      .ad-card {
        width: min(460px, 100%);
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 16px;
        border-radius: 16px;
        border: 1px solid var(--line);
        background: var(--bg-paper);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
      }
      .ad-card img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 10px;
      }
      .ad-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
      }
      .ad-btn {
        padding: 10px 24px;
        border-radius: 999px;
        cursor: pointer;
        border: 1px solid var(--line);
        background: transparent;
        color: var(--text);
        font-size: 0.95rem;
        text-decoration: none;
        line-height: 1.4;
      }
      .ad-btn:hover {
        border-color: var(--gold);
        color: var(--gold);
      }
      .ad-btn-primary {
        border-color: var(--gold);
        color: var(--gold);
        font-weight: 700;
      }
      .ad-btn-primary:hover {
        background: rgba(212, 175, 55, 0.12);
      }

      .terms-modal {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        padding-top: calc(20px + var(--safe-top, env(safe-area-inset-top, 0px)));
        padding-bottom: calc(20px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
        background: rgba(0, 0, 0, 0.72);
      }
      .terms-modal[hidden] {
        display: none;
      }
      .terms-card {
        width: min(680px, 100%);
        height: min(82vh, 900px);
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #0a0a0a;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
        overflow: hidden;
      }
      .terms-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid var(--line-soft);
      }
      .terms-title {
        font-family: "Noto Serif JP", serif;
        color: var(--gold-light);
        font-size: 14px;
        letter-spacing: 0.08em;
      }
      .terms-close {
        appearance: none;
        border: none;
        background: transparent;
        color: var(--muted);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 6px;
      }
      .terms-close:hover {
        color: var(--text);
      }
      .terms-frame {
        flex: 1;
        width: 100%;
        border: 0;
        background: #050505;
      }

      /* ログイン / 新規登録 チョイサー（terms-modal の backdrop を再利用した小型カード）。 */
      .login-card {
        width: min(380px, 100%);
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #0a0a0a;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
        overflow: hidden;
      }
      .login-choices {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 20px 18px 22px;
      }
      .webview-notice {
        margin: 16px 18px 0;
        padding: 14px;
        border: 1px solid #c8a24a;
        border-radius: 10px;
        background: rgba(200, 162, 74, 0.12);
      }
      .webview-notice[hidden] {
        display: none;
      }
      .webview-notice p {
        margin: 0 0 10px;
        font-size: 13px;
        line-height: 1.6;
        color: #f0e6cf;
      }
      .webview-url {
        width: 100%;
        margin-bottom: 10px;
        padding: 9px 10px;
        font-size: 13px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #0a0a0a;
        color: #fff;
        text-align: center;
      }
      .webview-copy {
        width: 100%;
        height: 40px;
        border: 0;
        border-radius: 8px;
        background: #c8a24a;
        color: #1a1a1a;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
      }
      .login-choice {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        border-radius: 10px;
        border: 1px solid var(--line);
        font-family: "Noto Sans JP", sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-decoration: none;
        color: #fff;
        transition: filter 0.15s ease, transform 0.05s ease;
      }
      .login-choice:hover {
        filter: brightness(1.08);
      }
      .login-choice:active {
        transform: translateY(1px);
      }
      .login-choice.discord {
        background: #5865f2;
        border-color: #5865f2;
      }
      .login-choice.google {
        background: #fff;
        border-color: #dadce0;
        color: #1f1f1f;
      }
      .login-choice.apple {
        background: #000;
        border-color: #000;
        color: #fff;
      }
      .login-choice[hidden] {
        display: none;
      }

      /* アップデート情報モーダルの本文（terms-card 内のスクロール領域）。 */
      .updates-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px 18px;
      }
      .upd-group {
        margin-bottom: 18px;
      }
      .upd-group:last-child {
        margin-bottom: 4px;
      }
      .upd-date {
        font-family: "Noto Serif JP", serif;
        color: var(--gold-light);
        font-size: 13px;
        letter-spacing: 0.06em;
        margin: 0 0 8px;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--line-soft);
      }
      .upd-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 6px 0;
        font-size: 13px;
        line-height: 1.5;
        color: var(--text);
      }
      .upd-badge {
        flex: none;
        margin-top: 1px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.04em;
        padding: 2px 7px;
        border-radius: 999px;
        white-space: nowrap;
      }
      .upd-badge.new {
        background: rgba(216, 173, 53, 0.18);
        color: var(--gold-light);
        border: 1px solid rgba(216, 173, 53, 0.4);
      }
      .upd-badge.improve {
        background: rgba(82, 160, 225, 0.16);
        color: #8fc4f0;
        border: 1px solid rgba(82, 160, 225, 0.38);
      }
      .upd-badge.fix {
        background: rgba(160, 160, 170, 0.14);
        color: #b9b9c2;
        border: 1px solid rgba(160, 160, 170, 0.32);
      }
      .upd-empty {
        color: var(--muted);
        font-size: 13px;
        text-align: center;
        padding: 24px;
      }
      .upd-new {
        display: inline-block;
        margin-left: 6px;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: #fff;
        background: #d24a4a;
        padding: 1px 5px;
        border-radius: 999px;
        vertical-align: middle;
      }

      /* クレジット（鳳凰戦サポーター）モーダル。updates-body と同じスクロール契約。
         ランク表示は現在なし（全員同じ見た目）。将来 tier を出すときは .credits-name に枠色を足す。 */
      /* ★このモーダルだけカードを中身なりの高さにする（.terms-card 既定の 82vh 固定だと
         支援者が少ないうちは 7〜8 割が余白になる）。共有クラスには触れず id でスコープする。 */
      #creditsModal .terms-card {
        height: auto;
        max-height: min(82vh, 900px);
      }
      .credits-body {
        flex: 1;
        overflow-y: auto;
        padding: 18px 18px 20px;
        /* ★読み込み決着まで本文は空。カード高が auto なので、これが無いとヘッダーだけに
           潰れてから中身の高さへ跳ねる。最小高を持たせて伸び幅を抑える。 */
        min-height: 140px;
      }
      .credits-lead {
        margin: 0 0 16px;
        color: var(--muted);
        font-size: 12.5px;
        line-height: 1.9;
        text-align: center;
      }
      /* 支援者パネル: 金の枠＋見出し＋名前グリッド。 */
      .credits-panel {
        margin: 0 0 18px;
        padding: 18px 14px 16px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: linear-gradient(180deg, rgba(212, 175, 55, 0.07), rgba(0, 0, 0, 0.25));
      }
      /* 見出しの左右へ金の罫線を伸ばす（hero と同じ serif ＋ 金の発光）。 */
      .credits-title {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 16px;
        font-family: "Noto Serif JP", serif;
        font-weight: 900;
        font-size: 15px;
        letter-spacing: 0.14em;
        color: var(--gold-light);
        text-shadow: 0 0 18px rgba(212, 175, 55, 0.3);
        white-space: nowrap;
      }
      .credits-title::before,
      .credits-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--line), transparent);
      }
      /* 名前は格子で並べる。スマホ2列 / PC(≥760px)3列は下の @media で上書き。 */
      .credits-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .credits-name {
        padding: 10px 8px;
        border: 1px solid var(--line-soft);
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.3);
        color: var(--gold-light);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-align: center;
        /* 申告ニックネームは長さが読めない。はみ出さず折り返す。 */
        overflow-wrap: anywhere;
      }
      /* CTA は支援者一覧より上に置く（一覧が社会的証明として後押しする）。
         意匠は toppage 既存の金グラデ（.rank-plate 等と同じ）を流用して浮かせない。 */
      .credits-cta {
        display: block;
        margin: 0 0 6px;
        padding: 13px 16px;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--gold-light), var(--gold) 48%, #9b6d1a);
        color: #1a1206;
        font-family: "Noto Serif JP", serif;
        font-weight: 900;
        font-size: 14px;
        letter-spacing: 0.06em;
        text-align: center;
        text-decoration: none;
        box-shadow: 0 12px 30px rgba(212, 175, 55, 0.22);
      }
      .credits-cta:hover {
        filter: brightness(1.08);
      }
      .credits-cta-note {
        margin: 0 0 18px;
        color: var(--dim);
        font-size: 11px;
        text-align: center;
      }
      .credits-foot {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.9;
        text-align: center;
      }
      .credits-foot a {
        color: var(--gold-light);
      }

      /* ロビー末尾を締める横長 CTA セクション（FRIEND MATCH → PARTNER → SUPPORTER）。
         幅は直上の .partner-cards と同じく .shell いっぱい（max-width を持たせない）。
         スマホ＝縦積み（テキスト→CTA）／PC(≥760px)＝左テキスト・右ボタンの横並び。 */
      .support-section {
        margin-top: 14px;
        margin-bottom: 18px;
      }
      .support-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        padding: 20px 18px;
        border: 1px solid var(--line);
        border-radius: 14px;
        /* 黒ベース＋濃いブラウン。金は装飾のみ（全面を金にしない）。 */
        background:
          radial-gradient(120% 90% at 100% 0%, rgba(212, 175, 55, 0.1), transparent 62%),
          linear-gradient(135deg, rgba(58, 40, 14, 0.5), rgba(0, 0, 0, 0.72) 58%),
          #060504;
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
        overflow: hidden;
      }
      .support-body {
        min-width: 0;
      }
      .support-kicker {
        display: block;
        color: var(--gold);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.4em;
      }
      .support-title {
        margin: 8px 0 10px;
        font-family: "Noto Serif JP", serif;
        font-weight: 900;
        font-size: 19px;
        letter-spacing: 0.08em;
        line-height: 1.5;
        color: var(--text);
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.22);
      }
      .support-copy {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.9;
      }
      .support-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 13px 22px;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--gold-light), var(--gold) 48%, #9b6d1a);
        color: #1a1206;
        font-family: "Noto Serif JP", serif;
        font-weight: 900;
        font-size: 14px;
        letter-spacing: 0.06em;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 12px 30px rgba(212, 175, 55, 0.18);
        transition: filter 0.15s ease, box-shadow 0.15s ease;
      }
      .support-cta:hover {
        filter: brightness(1.08);
        box-shadow: 0 14px 34px rgba(212, 175, 55, 0.3);
      }
      .support-cta-arrow {
        font-weight: 700;
      }
      /* 未読の更新があるとき Menu ボタンに赤ドット。 */
      .menu-btn.has-unread {
        position: relative;
      }
      .menu-btn.has-unread::after {
        content: "";
        position: absolute;
        top: 3px;
        right: 3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d24a4a;
        box-shadow: 0 0 0 2px rgba(10, 9, 7, 0.9);
      }

      /* スマホ topbar: ロゴ2行化・Menu をハンバーガー・表示名の折り返し防止。
         PC(≥760px)は @media (min-width: 760px) 側で従来へ復帰。 */

      /* ①ロゴ2行: SeekerStart を Seeker/Start 縦積みで brand-mark(38px)内に収める */
      .brand-name {
        font-size: 11px;
        line-height: 1.08;
      }
      .brand-name .bn-line {
        display: block;
      }

      /* ②Menu をハンバーガーに: テキスト(.menu-label)を隠し 3本線を ::before で描画。
         ::after(未読赤丸)とは別疑似要素で共存。 */
      .menu-btn .menu-label {
        display: none;
      }
      .menu-btn::before {
        content: "";
        display: block;
        width: 18px;
        height: 12px;
        background:
          linear-gradient(currentColor, currentColor) left top / 100% 2px no-repeat,
          linear-gradient(currentColor, currentColor) left center / 100% 2px no-repeat,
          linear-gradient(currentColor, currentColor) left bottom / 100% 2px no-repeat;
      }

      /* ③表示名(loginTop)の折り返し崩れ防止: 名前は残しつつ省略表示で1行に収める */
      #loginTop {
        display: inline-block;
        max-width: 40vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 38px; /* height40px − border2px。上下中央維持 */
      }
      /* 「アップデート情報」メニュー項目にも未読の赤丸（テキスト直後にインライン表示）。 */
      /* ★#menuAccount はアバター未設定の促し（未読ではない）だが、赤丸の見た目は
         アップデート未読と同一にする＝面ごとに別の丸を作らない。
         ★ミッションの赤丸は 2026-09-02 に下部ナビ「図鑑」へ移設（css/site-nav.css）＝
         ☰ 内の #menuMission は項目ごと撤去済み。 */
      #menuUpdates.has-unread::after,
      #menuAccount.has-unread::after {
        content: "";
        display: inline-block;
        margin-left: 8px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d24a4a;
        vertical-align: middle;
      }

      .rail {
        display: grid;
        gap: 14px;
      }

      .panel,
      .summary-shell,
      .partner {
        padding: 14px;
      }

      .partner-card {
        padding: 12px 16px;
      }

      .panel-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
      }

      .panel-title h2 {
        margin: 0;
        font-family: "Noto Serif JP", serif;
        font-size: 15px;
        letter-spacing: 0.16em;
      }

      .panel-title a,
      .panel-title button {
        border: 0;
        background: transparent;
        color: var(--gold);
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
      }

      .status-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }

      .metric {
        min-height: 74px;
        padding: 11px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.035);
      }

      .metric .label,
      .subtle {
        color: var(--dim);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* スマホでラベルが「…」省略されないよう字間を詰める（1行維持。デスクトップは
         @media(min-width:760px) の .metric .label,.subtle で上書きされ不変）。 */
      .metric .label {
        letter-spacing: 0.06em;
      }

      .metric .value {
        margin-top: 7px;
        font-family: "Noto Serif JP", serif;
        /* 値は1行維持のままフォントを可変縮小（折り返さない）。数値はテキストノード
           なのでこのサイズを継承し、単位 .unit のみ別サイズ。≥760px は下記 @media で 13px。 */
        font-size: clamp(13px, 4vw, 18px);
        font-weight: 900;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .metric .value.gold {
        color: var(--gold-light);
      }

      /* 単位（bb / bb/100）を数値の脇に小さく添える。数値(.value 直下テキスト)は
         .value のサイズを継承、単位だけ小さく・dim。≥760px は @media で本体同調。 */
      .metric .value .unit {
        font-size: clamp(8px, 2.4vw, 10px);
        color: var(--dim);
        white-space: nowrap;
        margin-left: 2px;
      }

      /* 最狭幅（~359px以下）は3カラムだと最長値(+18.5 BB/100)がギリ溢れるため2カラムに
         して1メトリクス幅を確保する（1行維持・折り返さない）。 */
      @media (max-width: 359px) {
        .status-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      /* 右レール: 外枠サマリーbox(枠/背景は .panel 系グループを共有)＋タイトル＋3子box。
         PC固定高に必ず収める(スクロールバー禁止)ため縦は詰め気味に。 */
      .summary-shell {
        display: grid;
        gap: 8px;
        align-content: start;
      }

      /* 外枠の看板見出し(リーグカード見出しと同系・中央・金Serif)。 */
      .summary-title {
        margin: 0 0 2px;
        text-align: center;
        font-family: "Noto Serif JP", serif;
        font-size: 17px;
        font-weight: 900;
        letter-spacing: 0.18em;
        color: var(--gold-light);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
      }

      /* 子box: リーグカードと同じ「押せるボタン風」の立体感(金縁+上面ハイライト+落ち影)。 */
      .rail-box,
      .today-box {
        display: grid;
        gap: 6px;
        padding: 10px 12px;
        border: 1px solid rgba(212, 175, 55, 0.28);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
          rgba(212, 175, 55, 0.04);
        box-shadow:
          0 6px 18px rgba(0, 0, 0, 0.32),
          inset 0 1px 0 rgba(255, 255, 255, 0.09);
        color: var(--text);
        text-align: left;
      }

      /* スコアボード風: 数値層は金グラデ文字(heroの金と同系)。text-fill を使うため
         子要素(単位 .unit / .rank-unit)には明示的に色を戻す。 */
      .gold-num {
        background: linear-gradient(180deg, var(--gold-light), var(--gold) 58%, #b8860b);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
      }

      /* 子boxの見出し(英字キッカーは縦圧縮のため廃止・2026-08-01)。 */
      .rail-heading {
        display: block;
        font-family: "Noto Serif JP", serif;
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 0.08em;
        color: var(--gold-light);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
      }

      .rail-heading .rail-scope {
        font-style: normal;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.06em;
        color: var(--text);
        margin-left: 6px;
        text-shadow: none;
      }

      /* 順位=boxの主役(ヒーロー数字)。数字は金グラデ大・「位」中・「/ M人」小を
         ベースライン揃えで中央に。数字/単位の分解は applyRailView(setRankValue) が行う。 */
      .rail-rank {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 5px;
        margin: 2px 0;
      }

      .rail-rank strong {
        font-family: "Noto Serif JP", serif;
        font-size: 36px;
        font-weight: 900;
        line-height: 1;
        background: linear-gradient(180deg, var(--gold-light), var(--gold) 58%, #b8860b);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
      }

      .rail-rank strong .rank-unit {
        font-size: 17px;
        margin-left: 1px;
        -webkit-text-fill-color: var(--gold);
      }

      .rail-rank-count {
        color: var(--muted);
        font-size: 13px;
        font-weight: 800;
      }

      /* 自分のランクプレート。台形・ランク色は rank-plate.css（単一ソース・T-2）から取得。
         サイズ(40px)はレール用の意図的差分としてここで上書きする。
         絶対配置の理由: 順位数字のセンタリングを保つ＋PC固定高のレール(.rail の height)に
         高さを足さない。 */
      .rail-rank {
        position: relative;
      }

      /* プレート幅(40px)ぶんの余白を左右**対称**に空け、中央寄せの「N位 / M人」が
         プレート領域へ食い込まないようにする。対称なので中央揃えは崩れない(実測: 中央ズレ0px)。
         これが無いと 320px 幅 × 4桁順位(例「1234位 / 1200人」)でプレートに重なる(実測)。
         全期間boxには不要なので .season-box スコープに限定する。 */
      .season-box .rail-rank {
        padding: 0 44px;
      }

      /* 基底 = 幾何 + D の色。「D は既定スタイル」は /play と同じ意味構造
         (app.js の STYLED_RANKS ゲート・src/shared/player-rank.ts)。 */
      .rank-plate {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 34px;
        display: grid;
        place-items: center;
        /* clip-path/background/border は rank-plate.css（共有シェイプ・T-2） */
        color: #ffffff;
        font-weight: 900;
        font-size: 1.1rem;
        line-height: 1;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
      }

      /* display:grid は UA の [hidden]{display:none} を上書きするため、hidden 属性が効くよう
         救済ルールを明示（他コンポーネントの .X[hidden] と同じ対処）。 */
      .rank-plate[hidden] {
        display: none;
      }

      /* S/A/B/C の色は rank-plate.css（単一ソース・T-2）の変数と消費者ルールが適用する */

      /* レール内の指標グリッドは常に2カラム(base/PCの .status-grid 3カラム指定に勝つ)。
         数値は大きくSerifで(視認性・スコアボード感)。単位は小さくdimへ戻す。 */
      .status-grid.rail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      /* ラベル層(Total bb/Win Rate)も読めるサイズに(base 10px/PC 8px を上書き)。 */
      .status-grid.rail-grid .metric .label {
        font-size: 12px;
        letter-spacing: 0.06em;
        color: var(--muted);
      }

      .status-grid.rail-grid .metric .value {
        margin-top: 4px;
        font-family: "Noto Serif JP", serif;
        font-size: 19px;
        font-weight: 900;
      }

      .status-grid.rail-grid .metric .value.gold {
        font-size: 19px;
        background: linear-gradient(180deg, var(--gold-light), var(--gold) 58%, #b8860b);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
      }

      .status-grid.rail-grid .metric .value .unit {
        font-size: 11px;
        color: var(--dim);
        -webkit-text-fill-color: var(--dim);
        background: none;
        margin-left: 0.3em;
      }

      /* 本日の戦績box: 大々的表示。box全体がボタン(タップで日別カード/ログイン)。 */
      button.today-box {
        width: 100%;
        font: inherit;
        cursor: pointer;
        justify-items: center;
        text-align: center;
        gap: 3px;
        padding: 11px 12px;
        transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease,
          background 0.15s ease;
      }

      button.today-box:hover,
      button.today-box:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(247, 239, 138, 0.55);
        background:
          linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.05) 62%),
          rgba(212, 175, 55, 0.06);
        box-shadow: 0 10px 26px rgba(212, 175, 55, 0.2);
      }

      button.today-box:focus-visible {
        outline: 2px solid var(--gold-light);
        outline-offset: 2px;
      }

      .today-bb {
        display: block;
        font-family: "Noto Serif JP", serif;
        font-size: 40px;
        font-weight: 900;
        line-height: 1.1;
        background: linear-gradient(180deg, var(--gold-light), var(--gold) 58%, #b8860b);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
      }

      .today-bb.is-minus {
        background: none;
        -webkit-text-fill-color: var(--danger);
        color: var(--danger);
      }

      .today-sub {
        display: block;
        color: var(--muted);
        font-size: 13px;
      }

      .progress-card {
        display: grid;
        gap: 8px;
        padding: 10px 11px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background:
          radial-gradient(circle at 18% 20%, rgba(247, 239, 138, 0.12), transparent 34%),
          rgba(255, 255, 255, 0.035);
      }

      .progress-head,
      .progress-scale {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .progress-head span,
      .progress-scale {
        color: var(--dim);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .progress-head strong {
        color: var(--gold-light);
        font-family: "Noto Serif JP", serif;
        font-size: 15px;
        white-space: nowrap;
      }

      .progress {
        height: 12px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.07);
      }

      .progress > i {
        display: block;
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--red), var(--gold), var(--gold-light));
        transition: width 320ms ease;
      }

      .border-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 4px;
      }

      .border-card {
        display: grid;
        align-content: start;
        gap: 0;
        min-height: 72px;
        padding: 11px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.035);
      }

      .border-card strong {
        color: var(--gold-light);
        font-family: "Noto Serif JP", serif;
        font-size: 17px;
        font-weight: 900;
        min-height: 24px;
        white-space: nowrap;
      }

      .border-card span {
        color: var(--dim);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .content-grid {
        display: grid;
        gap: 14px;
      }

      .desktop-inline {
        display: none;
      }

      .sub-link {
        width: 100%;
        min-height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 15px 16px;
        border: 1px solid var(--line-soft);
        background: rgba(255, 255, 255, 0.035);
        color: var(--text);
        cursor: pointer;
        text-align: left;
      }

      .sub-link > span {
        min-width: 0;
      }

      .sub-link strong {
        display: block;
        font-family: "Noto Serif JP", serif;
        font-size: 16px;
        white-space: nowrap;
      }

      .sub-link span {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 12px;
      }

      .sub-link b {
        flex: none;
        white-space: nowrap;
      }

      /* 予選サーバー: 「対戦開始」バッジをリーグ確定ボタン(.league-cta)と同系統の金グラデ・ピル形に。 */
      .yosen-cta {
        flex: none;
        white-space: nowrap;
        padding: 9px 18px;
        border: 1px solid rgba(247, 239, 138, 0.68);
        border-radius: 999px;
        background: linear-gradient(135deg, var(--gold-light), var(--gold) 48%, #9b6d1a);
        color: #151006;
        font-family: "Noto Serif JP", serif;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: 0.12em;
        box-shadow: 0 8px 24px rgba(212, 175, 55, 0.26);
      }

      /* 本戦が開催時間外のとき、予選導線(.yosen-entry)を金枠で強調して誘導する。 */
      .yosen-entry.is-highlight {
        border-color: rgba(247, 239, 138, 0.55);
        background: rgba(212, 175, 55, 0.08);
        box-shadow:
          0 0 0 1px rgba(212, 175, 55, 0.22),
          0 10px 28px rgba(212, 175, 55, 0.18);
      }

      /* 本戦開催中など予選が非開催のとき、予選導線をグレーアウトして休止を示す。 */
      .yosen-entry.is-closed {
        cursor: not-allowed;
        opacity: 0.5;
      }

      .yosen-entry.is-closed .yosen-cta {
        border-color: rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(247, 243, 232, 0.6);
        box-shadow: none;
      }

      /* 友人対戦カード: 鳳凰トーン+翡翠の差し色でリッチ化（配置・寸法は不変）。
         装飾はすべて transform/opacity/box-shadow のみ（レイアウト非干渉）。 */
      .friend-entry {
        position: relative;
        overflow: hidden; /* shimmer の帯をカード内にクリップ */
        border-color: rgba(47, 158, 110, 0.38);
        background:
          linear-gradient(135deg, rgba(47, 158, 110, 0.16), rgba(255, 255, 255, 0.03) 58%),
          rgba(0, 0, 0, 0.28);
        box-shadow: 0 8px 26px rgba(47, 158, 110, 0.12);
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
      }

      /* 本文を装飾レイヤーより前面に固定（positioned は非 positioned より上に描画されるため）。
         .friend-deco 自身に z-index:1 が付かないよう :not で除外。 */
      .friend-entry > span:not(.friend-deco),
      .friend-entry b {
        position: relative;
        z-index: 1;
      }

      /* shimmer: 斜めの光帯が 7s 周期の前半だけ横切る（残りは静止＝「たまに光る」上品さ） */
      .friend-entry::before {
        content: "";
        position: absolute;
        inset: -20% auto -20% 0;
        width: 42%;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(
          105deg,
          transparent,
          rgba(127, 224, 176, 0.16) 45%,
          rgba(247, 239, 138, 0.1) 55%,
          transparent
        );
        transform: translateX(-160%) skewX(-12deg);
        animation: friendShimmer 7s ease-in-out infinite;
      }

      @keyframes friendShimmer {
        0% {
          transform: translateX(-160%) skewX(-12deg);
        }
        35% {
          transform: translateX(360%) skewX(-12deg);
        }
        100% {
          transform: translateX(360%) skewX(-12deg);
        }
      }

      /* スートモチーフ: 本文とバッジの間の空きゾーンに %基準で時差浮遊。
         絶対配置＝flex 不参加でカード寸法に影響しない。margin:0 は .sub-link span 打ち消し。 */
      .friend-deco {
        position: absolute;
        inset: 0;
        z-index: 0;
        margin: 0;
        pointer-events: none;
      }

      .friend-deco i {
        position: absolute;
        font-style: normal;
        font-family: "Noto Serif JP", serif; /* U+FE0E と併用で絵文字化を抑止 */
        color: var(--jade-light);
        opacity: 0.16;
        animation: friendFloat 6s ease-in-out infinite alternate;
      }

      .friend-deco i:nth-child(1) {
        right: 45%;
        top: 5%;
        font-size: 28px;
        animation-delay: 0s;
      }

      .friend-deco i:nth-child(2) {
        right: 38%;
        bottom: 4%;
        font-size: 22px;
        animation-delay: 1.4s;
      }

      .friend-deco i:nth-child(3) {
        right: 36%;
        top: 10%;
        font-size: 18px;
        animation-delay: 2.8s;
      }

      .friend-deco i:nth-child(4) {
        right: 42%;
        top: 40%;
        font-size: 15px;
        animation-delay: 4.2s;
      }

      @keyframes friendFloat {
        from {
          transform: translateY(-3px);
        }
        to {
          transform: translateY(3px);
        }
      }

      /* 友人対戦タイトル: リーグと同型の英字キッカー＋Serif大見出し(翡翠トーン)。
         .sub-link span (0,1,1) に負けないよう .friend-entry を前置して詳細度を上げる。 */
      .friend-entry .friend-kicker {
        display: block;
        margin: 0;
        color: var(--jade-light);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.3em;
        text-transform: uppercase;
      }

      .friend-entry .friend-info {
        min-width: 0;
      }

      .friend-entry .friend-info strong {
        display: block;
        margin-top: 2px;
        font-family: "Noto Serif JP", serif;
        font-size: 20px;
        font-weight: 900;
        letter-spacing: 0.08em;
        color: var(--jade-light);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
        white-space: nowrap;
      }

      .friend-entry .friend-desc {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 12px;
      }

      /* カード自体はクリック対象でない(.sub-link の pointer を打ち消し)。 */
      .friend-entry {
        cursor: default;
      }

      /* 「対戦開始」ピル: .yosen-cta の翡翠版・同寸法。カード内で唯一のクリック対象(a)。 */
      .friend-cta {
        flex: none;
        white-space: nowrap;
        display: inline-block;
        padding: 9px 18px;
        border: 1px solid rgba(127, 224, 176, 0.65);
        border-radius: 999px;
        background: linear-gradient(135deg, var(--jade-light), var(--jade) 52%, #17573c);
        color: #06140d;
        text-decoration: none;
        font-family: "Noto Serif JP", serif;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: 0.12em;
        box-shadow: 0 8px 24px rgba(47, 158, 110, 0.28);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
      }

      /* hover(PC)/キーボードフォーカスはピルだけが浮上+グロー(カードは動かさない)。
         outline は消さず翡翠で明示(a11y)。 */
      .friend-cta:hover,
      .friend-cta:focus-visible {
        transform: translateY(-2px);
        box-shadow:
          0 0 0 1px rgba(127, 224, 176, 0.4),
          0 12px 30px rgba(47, 158, 110, 0.32);
      }

      .friend-cta:focus-visible {
        outline: 2px solid var(--jade-light);
        outline-offset: 2px;
      }

      .friend-cta:active {
        transform: translateY(0);
        box-shadow: 0 4px 14px rgba(47, 158, 110, 0.18);
      }

      /* motion 配慮: 常時アニメは停止（静的な色・グロー変化は維持） */
      @media (prefers-reduced-motion: reduce) {
        .friend-entry::before,
        .friend-deco i,
        .league-deco i {
          animation: none;
        }

        .friend-entry,
        .friend-cta,
        .friend-cta:hover,
        .friend-cta:focus-visible,
        .friend-cta:active,
        button.league-row,
        button.league-row:hover,
        button.league-row:focus-visible,
        button.league-row:active {
          transition: none;
          transform: none;
        }
      }

      .support-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .partner {
        color: var(--dim);
        text-align: center;
        font-family: "Noto Serif JP", serif;
        font-size: 12px;
        letter-spacing: 0.26em;
      }

      .partner-section {
        margin-top: 14px;
        display: grid;
        justify-items: center;
        gap: 10px;
      }

      .partner-kicker {
        color: var(--dim);
        font-size: 11px;
        letter-spacing: 0.26em;
      }

      .partner-cards {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      .partner-card {
        width: 100%;
        min-width: 0;
        border-radius: 12px;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 8px;
        text-decoration: none;
        transition: opacity 0.18s ease;
      }

      .partner-card:hover {
        opacity: 0.82;
      }

      .partner-img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
      }

      .toast {
        position: fixed;
        left: 50%;
        bottom: calc(86px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
        z-index: 20;
        transform: translateX(-50%) translateY(14px);
        opacity: 0;
        pointer-events: none;
        padding: 12px 16px;
        border: 1px solid var(--line);
        background: rgba(5, 5, 5, 0.94);
        color: var(--gold-light);
        font-size: 13px;
        font-weight: 800;
        transition: opacity 160ms ease, transform 160ms ease;
      }

      .toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }


      .hidden {
        display: none !important;
      }

      @media (min-width: 760px) {
        body {
          padding-bottom: 0;
        }

        /* サポーター名は PC では3列（スマホは既定の2列）。 */
        .credits-list {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        /* SUPPORTER セクション: PC は「左テキスト・右ボタン」の横並び。 */
        .support-card {
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          gap: 28px;
          padding: 24px 28px;
        }

        .support-cta {
          flex: 0 0 auto;
        }

        .global-nav {
          display: flex;
        }

        /* ★下部ナビ（.bottom-nav）の規則は css/site-nav.css へ移設した（2026-08-16）。
           DOM を app/site-nav.js が注入するようになり、toppage 以外の8ページにも
           出るようになったため（toppage.css を読むのは toppage だけ）。 */
        .menu-mobile-only {
          display: none;
        }

        /* スマホ topbar 改修の PC 復帰: ロゴ1行・Menu テキスト・表示名フル表示。 */
        .brand-name {
          font-size: 13px;
          line-height: normal;
        }
        .brand-name .bn-line {
          display: inline;
        }
        .menu-btn .menu-label {
          display: inline;
        }
        .menu-btn::before {
          display: none;
        }
        #loginTop {
          display: inline-flex;
          max-width: none;
          line-height: normal;
        }

        .layout {
          --hero-h: 520px;
          --sub-h: 138px;
          grid-template-columns: minmax(760px, 2.2fr) minmax(380px, 0.85fr);
          align-items: start;
        }

        .main-column {
          /* hero 行は固定でなく minmax: .hero は overflow:hidden なので、リーグ行増設で
             内容が --hero-h を超えたとき固定行だと無言クリップになる。超過時は行が伸び
             (右レールとの底辺揃えだけが崩れる)、内容欠けは構造的に起きない。 */
          grid-template-rows: minmax(var(--hero-h), auto) var(--sub-h);
        }

        .hero {
          min-height: var(--hero-h);
          padding: 30px 42px;
        }

        .hero-title {
          font-size: clamp(58px, 6.6vw, 74px);
        }

        .hero-sub {
          font-size: 12px;
        }

        .season-band {
          margin: 20px 0 18px;
        }

        .season-band-number {
          font-size: 34px;
        }

        /* 累計ハンド・ライブティッカー: PC は数字とコピーを一段大きく。 */
        .hands-ticker-num {
          font-size: 32px;
        }

        .hands-ticker-copy {
          font-size: 13px;
        }

        /* PC/スマホ出し分けユーティリティの反転(スマホ側の既定は base 参照)。 */
        .pc-only {
          display: inline;
        }

        .sp-only {
          display: none;
        }

        /* PC: キャッチコピーは1行へ復帰。 */
        .hero-sub-l1 {
          display: inline;
        }

        /* PC: 選抜(左)/一般(右)の横並びカード。説明の下にボタン(バッジ→対戦開始)を積む。 */
        .league-rows {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          grid-auto-rows: auto;
          width: 100%;
          margin-top: 20px;
        }

        .league-row {
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          gap: 6px;
          min-height: 0;
          padding: 10px 14px;
          text-align: center;
        }

        button.league-row {
          text-align: center;
        }

        .league-kicker {
          font-size: 10px;
        }

        .league-info strong {
          font-size: 22px;
        }

        /* PC: リーグ行はbox全体がボタン。文言バッジは非表示にし、常時から「押せるボタン」に
           見える立体感(金縁+上面ハイライト+落ち影)を持たせる。 */
        .league-action {
          display: none;
        }

        button.league-row:not(:disabled) {
          border-color: rgba(212, 175, 55, 0.45);
          background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
            rgba(212, 175, 55, 0.05);
          box-shadow:
            0 6px 18px rgba(0, 0, 0, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
          transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease,
            background 0.18s ease;
        }

        /* ホバー/フォーカス: box全体が金色に染まり大きく浮く(押せることを強く示す)。 */
        button.league-row:not(:disabled):hover,
        button.league-row:not(:disabled):focus-visible {
          transform: translateY(-3px) scale(1.015);
          border-color: rgba(247, 239, 138, 0.9);
          background:
            linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.1) 62%),
            rgba(212, 175, 55, 0.12);
          box-shadow:
            0 0 0 1px rgba(247, 239, 138, 0.5),
            0 18px 44px rgba(212, 175, 55, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.16);
        }

        /* ホバー中はスートが「札の本当の色」を見せる: 選抜♠♣=白銀(黒スートは暗背景で
           見えないため銀化)・一般♥♦=紅。文字の背面には置いていないので可読性に影響しない。 */
        .league-deco i {
          transition: color 0.18s ease, opacity 0.18s ease;
        }

        button.league-duel:not(:disabled):hover .league-deco i,
        button.league-duel:not(:disabled):focus-visible .league-deco i {
          color: #e6ecf4;
          opacity: 0.32;
        }

        button.league-study:not(:disabled):hover .league-deco i,
        button.league-study:not(:disabled):focus-visible .league-deco i {
          color: #ff8577;
          opacity: 0.34;
        }

        button.league-row:not(:disabled):focus-visible {
          outline: 2px solid var(--gold-light);
          outline-offset: 2px;
        }

        button.league-row:not(:disabled):active {
          transform: translateY(-1px) scale(1.005);
          box-shadow:
            0 0 0 1px rgba(247, 239, 138, 0.4),
            0 6px 16px rgba(212, 175, 55, 0.28);
        }

        /* 入れない状態(閉場中/資格なし)は行ごと沈める(スマホはバッジのグレーだけで表現)。 */
        button.league-row:disabled {
          opacity: 0.55;
        }

        /* PC: 縦型カードでは中央にテキストが集まるため、スートは左右の余白へ。 */
        .league-deco i:nth-child(1) {
          right: 7%;
          top: 12%;
          font-size: 30px;
        }

        .league-deco i:nth-child(2) {
          right: auto;
          left: 7%;
          top: auto;
          bottom: 10%;
          font-size: 22px;
        }

        /* ボタン列をカード下端へ揃える(左右カードの高さ差を吸収)。 */
        .league-action {
          margin-top: auto;
        }

        .rail {
          gap: 12px;
          /* ★min-height であって height ではない (2026-08-15)。固定高にすると、
             中身が超えたときに 1fr 行が圧縮されて box の外へ溢れる。
             同じ判断は .main-column の grid-template-rows でも採られている
             (「固定行だと無言クリップになる。超過時は行が伸び、右レールとの底辺揃えだけが
             崩れる」)= 底辺揃えより破綻回避を優先する。 */
          min-height: calc(var(--hero-h) + 14px + var(--sub-h));
          /* ★この宣言は「直下子が .summary-shell の1枚だけ」を前提にしている。
             子を増やすと**先頭の子**が 1fr 行を取り、サマリーが暗黙行(auto)へ落ちる＝
             余白を吸うのが先頭の子になり、レールが左カラムの固定高を超える。
             旧 #seasonBanner (Season終盤の予告) がこれを踏んだので、現シーズンbox内の
             状態行へ統合した (plans/toppage-season-box-merge-plan-C.md)。 */
          grid-template-rows: minmax(0, 1fr);
        }

        .panel,
        .summary-shell,
        .partner {
          padding: 14px 16px;
        }

        .partner-cards {
          flex-direction: row;
          flex-wrap: wrap;
          align-items: stretch;
          justify-content: center;
        }

        .partner-card {
          width: auto;
          flex: 0 1 auto;
        }

        .partner-img {
          width: auto;
          height: clamp(52px, 6.5vw, 76px);
          max-width: 100%;
        }

        .partner-img--gto {
          height: clamp(62px, 7.7vw, 90px);
        }

        .panel-title {
          margin-bottom: 12px;
        }

        .status-grid {
          grid-template-columns: minmax(88px, 1.15fr) minmax(76px, 0.95fr) minmax(76px, 0.95fr);
          gap: 8px;
        }

        .metric {
          min-height: 52px;
          padding: 8px;
        }

        .metric .label,
        .subtle {
          font-size: 8px;
          letter-spacing: 0.12em;
        }

        .metric .value {
          margin-top: 5px;
          font-size: 13px;
        }

        .metric .value.gold {
          font-size: 13px;
        }

        /* デスクトップは単位を本体と同調（従来の1文字列表示と同じ見た目に保つ）。 */
        .metric .value .unit {
          font-size: 13px;
          color: inherit;
          margin-left: 0.25em;
        }

        .progress-card {
          padding: 8px 10px;
          gap: 5px;
        }

        /* PC: スクロールバーは出さない(ユーザー決定・2026-08-01)。縦は圧縮設計で
           固定高(calc(--hero-h+14px+--sub-h))に収める。溢れたら中身側を詰めて直すこと。 */
        .summary-shell {
          min-height: 0;
        }

        .progress-head span,
        .progress-scale,
        .border-card span {
          font-size: 8px;
          letter-spacing: 0.1em;
        }

        .progress-head strong {
          font-size: 13px;
        }

        .progress {
          height: 7px;
        }

        .desktop-inline {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: 12px;
          height: var(--sub-h);
        }

        .desktop-inline > .panel {
          height: 100%;
        }

        .mobile-lower {
          display: none;
        }

        .support-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sub-link {
          min-height: 76px;
          padding: 14px 16px;
        }

        .desktop-inline .panel {
          padding: 14px;
        }

        .desktop-inline .support-grid {
          grid-template-columns: repeat(2, minmax(220px, 1fr));
        }

        /* 友人対戦パネルを1枚の大型ヒーローカードに(PC)。panel-title を廃し138px全面をカードに使い、
           右余白まで全幅化して大々的にアピール。他の desktop-inline support-grid は従来2カラムのまま。 */
        /* パネルの枠/背景/内側余白を外し、カード(friend-entry)が138px全面を占める(二重枠回避・高さ確保)。 */
        .desktop-inline .friend-hero-panel {
          padding: 0;
          border: 0;
          background: none;
          box-shadow: none;
        }
        .desktop-inline .friend-hero-panel .support-grid {
          grid-template-columns: 1fr;
          height: 100%;
        }
        .desktop-inline .friend-entry-hero {
          min-height: 0;
          height: 100%; /* パネル138px全面をカードで使い切る */
          padding: 8px 26px;
          align-items: center;
          gap: 24px;
        }
        .desktop-inline .friend-hero-body {
          position: relative;
          z-index: 1; /* 装飾(friend-deco z:0)より前面 */
          display: flex;
          flex-direction: column;
          gap: 5px;
          min-width: 0;
        }
        .desktop-inline .friend-kicker {
          font-size: 10px;
        }
        .desktop-inline .friend-hero-title {
          margin: 0;
          font-family: "Noto Serif JP", serif;
          font-size: 26px; /* 主見出し「友人対戦」をリーグタイトルと同格に */
          font-weight: 900;
          letter-spacing: 0.08em;
          color: var(--jade-light);
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
        }
        .desktop-inline .friend-hero-sub {
          font-size: 13px;
          color: var(--muted);
        }
        .desktop-inline .friend-entry-hero .friend-cta {
          padding: 13px 32px;
          font-size: 17px;
        }
        /* スート装飾を大型化し中央〜右余白へ展開(前バッチ friend-deco の PC 上書き) */
        .desktop-inline .friend-entry-hero .friend-deco i:nth-child(1) { right: 30%; font-size: 46px; }
        .desktop-inline .friend-entry-hero .friend-deco i:nth-child(2) { right: 22%; font-size: 36px; }
        .desktop-inline .friend-entry-hero .friend-deco i:nth-child(3) { right: 15%; font-size: 26px; }
        .desktop-inline .friend-entry-hero .friend-deco i:nth-child(4) { right: 25%; font-size: 22px; }

      }

      /* ===== 初回オンボーディング（ジャーニー通知 T01） ============================
       * terms-modal の器を借りる（開閉契約・背景・角丸は共通）。カード高だけ
       * #creditsModal と同じく中身なりにする（4枚のスライドは高さがまちまちなため）。
       * ★ランクプレートの色は css/rank-plate.css の単一ソースをそのまま使う
       *   （toppage.css は先頭でそれを @import 済み）。ここで色を再定義しない。 */
      #onboardModal .terms-card {
        height: auto;
        max-height: min(88vh, 860px);
        width: min(420px, 100%);
      }
      .onboard-body {
        display: flex;
        flex-direction: column;
        padding: 4px 18px 18px;
        overflow-y: auto;
      }
      .onboard-slide[hidden] {
        display: none;
      }
      /* ★画像は「あれば出る」。用意されるまでは onerror で hidden になるので、
       *   文字だけでレイアウトが崩れないよう margin は画像側に持たせる。 */
      .onboard-img {
        display: block;
        width: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 14px;
        background: #141109;
      }
      .onboard-img[hidden] {
        display: none;
      }
      .onboard-slide h3 {
        margin: 0 0 8px;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.45;
        color: var(--text);
      }
      .onboard-slide p {
        margin: 0;
        font-size: 14px;
        line-height: 1.8;
        color: var(--muted);
      }
      .onboard-ladder {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 14px;
      }
      /* ★通知モーダル内のランクプレートは「流し込み」で並べる。
       *   .rank-plate（このファイル上部）は**レールの順位行に重ねるための絶対配置**
       *   （position:absolute / left:0 / top:50% / translateY）を持っており、そのまま使うと
       *   5枚とも流れから外れて消え、基準となる positioned 祖先が無いぶん
       *   ビューポート左端へ飛ぶ（実機で確認）。
       *   css/rank-plate.css から共有しているのは**色と台形の形だけ**で、
       *   サイズ・配置は各ページが持つ、というのが本来の契約（CLAUDE.md）。
       *   ID スコープで打ち消してサイズをここで与える。 */
      #onboardModal .rank-plate,
      #rankUpModal .rank-plate {
        position: static;
        transform: none;
        width: 32px;
        height: 21px;
        font-size: 12px;
      }
      .onboard-arw {
        color: var(--dim);
        font-size: 12px;
      }
      .onboard-loop {
        margin-top: 14px;
        font-size: 11px;
        letter-spacing: 0.14em;
        color: var(--gold);
      }
      .onboard-dots {
        display: flex;
        justify-content: center;
        gap: 7px;
        margin: 18px 0 14px;
      }
      .onboard-dots i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
      }
      .onboard-dots i.on {
        background: var(--gold);
      }
      .onboard-actions {
        display: flex;
        gap: 10px;
      }
      .onboard-actions button {
        flex: 1;
        padding: 11px 12px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
      }
      .onboard-back {
        flex: 0 0 34%;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: transparent;
        color: var(--muted);
      }
      .onboard-back[hidden] {
        display: none;
      }
      .onboard-next {
        border: 1px solid var(--gold);
        background: rgba(212, 175, 55, 0.08);
        color: var(--gold-light);
      }

      /* ===== Season の見通し（現シーズンbox内の状態行と残り）====================
       * 旧「Season終盤バナー」(#seasonBanner) の統合先。バナーはレール直下子を2つにして
       * PC のレイアウトを崩していたため廃止した (plans/toppage-season-box-merge-plan-C.md)。
       * 判定はサーバー (src/league/season-outlook.ts)。ここは見た目だけ。 */

      /* 見出しの右に出す「あと6節 / あと23日」。★<em> なので font-style を戻す
         (.rail-scope と同じ扱い)。右寄せは margin-left:auto — 見出しは
         「テキストノード + .rail-scope + .rail-remain」の3項目なので
         justify-content: space-between にするとリーグ名が中央へ飛ぶ。 */
      .season-box .rail-heading {
        display: flex;
        align-items: baseline;
      }

      /* 本日の戦績: 見出しの右端に連続ログイン（.rail-remain を再利用）。
         正本 plans/first-100-hands-goal-plan-C.md S5。

         ★★**現シーズン box とは前提が違う**。あちらの見出しは左寄せなので flex + margin-left:auto
           だけで右端に付くが、**button.today-box は justify-items:center の grid**（1675 行）で、
           見出しはボックス幅に伸びず**内容幅のまま中央**に置かれる。
           ⇒ 素直に display:flex を足すだけでは**ストリークが右端に届かない**
             （実測: ボックス右端 352px に対しストリーク右端 295px）。width:100% が要る。

         ★★**しかし常に width:100% にすると、ストリークが無い人まで見出しが左へ動く**
           （中心 174 → 56）。それは連続ログインと無関係な全員に及ぶ見た目の変更なので、
           **:has() で「ストリークが出ているときだけ」開く**。
           実測: 非表示時は中心 174・高さ 116 で**変更前と完全に一致**／表示時は
           見出し左端 13px・ストリーク右端 13px・最長（連続120日 ・ 次は365日）でも余白 81.6px。
           ★高さは 4 ケースとも 116px＝**レールの固定高を押し広げない**。
         ★:has() はこのリポで既出（.table-card:has(...) / .season-box:has(...)）。 */
      .today-box .rail-heading:has(.rail-remain:not([hidden])) {
        display: flex;
        align-items: baseline;
        width: 100%;
      }

      .rail-remain {
        margin-left: auto;
        font-style: normal;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
        white-space: nowrap;
        color: var(--muted);
        text-shadow: none;
      }

      /* 状態行。tone は排他 (.is-warning / .is-ok / .is-chase)、終盤 (.is-endgame) は上乗せ。 */
      .season-verdict {
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        color: var(--muted);
      }

      /* ★display を与えたので [hidden] の救済規則を対で置く。author の display は
         UA の [hidden]{display:none} に勝つため、無いと未ログインでも状態行が出る
         (.rank-plate[hidden] と同じ罠)。 */
      .season-verdict[hidden],
      .rail-remain[hidden] {
        display: none;
      }

      .season-verdict.is-ok {
        color: var(--gold-light);
      }

      .season-verdict.is-chase {
        color: var(--text);
      }

      .season-verdict.is-warning {
        color: var(--danger);
      }

      /* 終盤は「色だけ」変える (文面は変えない)。残りピルも一緒に強調する。 */
      .season-verdict.is-endgame {
        font-weight: 900;
      }

      .season-verdict.is-endgame:not(.is-warning) {
        color: var(--gold);
      }

      .season-box:has(.season-verdict.is-endgame) .rail-remain {
        color: var(--gold);
      }

      /* ===== 次の目標 box（D→C／C→B 自動昇格・plans/houou-rank-auto-promotion-plan-C.md S4）===
       * 現シーズン box と**排他表示**（D/C かつ起点日ありのときだけ出す）。意匠は season-box の
       * トークンを流用し、固有のものだけここに足す。
       * ★.rail-box は display:grid なので [hidden] の救済規則が要る（.rank-plate[hidden] と同じ罠）。 */
      .rail-box[hidden],
      .border-grid[hidden],
      .goal-net[hidden],
      .goal-reset[hidden] {
        display: none;
      }

      .goal-box .rail-heading {
        display: flex;
        align-items: baseline;
      }

      /* 昇格条件の 1 文（goal.condition）。見出しの直下・折り返し可。hidden 属性で消える。 */
      .goal-condition {
        margin: -4px 0 0;
        font-size: 11px;
        line-height: 1.4;
        font-weight: 700;
        color: var(--muted);
      }

      /* 行き先のランク「D ▸ C」: 左のプレート(.rank-plate は left:0 の絶対配置)と対称に、
         右端へ次のプレート・その左に矢印。余白は .goal-box .rail-rank の padding(44px)が左右対称に
         取ってあるので、中央の数字は動かない。 */
      .goal-box .rank-plate.goal-next-plate {
        left: auto;
        right: 0;
      }

      .goal-next-arrow {
        position: absolute;
        right: 44px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        font-weight: 900;
        color: var(--muted);
      }

      .goal-next-arrow[hidden] {
        display: none;
      }

      /* プレート幅ぶんの左右対称の余白（.season-box .rail-rank と同じ理由）。 */
      .goal-box .rail-rank {
        padding: 0 44px;
        text-align: center;
      }

      .goal-box .rail-rank .goal-primary {
        display: block;
        font-family: "Noto Serif JP", serif;
        font-size: 18px;
        font-weight: 900;
        line-height: 1.3;
        color: var(--gold-light);
        white-space: nowrap;
      }

      .goal-secondary {
        margin: 0;
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        color: var(--muted);
      }

      /* button（2026-08-23・/account へのリンクから確認モーダルの起動へ）。リンクの見た目を保つ。 */
      .goal-reset {
        justify-self: center;
        appearance: none;
        border: 0;
        background: none;
        padding: 0;
        cursor: pointer;
        font-family: inherit;
        font-size: 11px;
        font-weight: 700;
        color: var(--muted);
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      .goal-reset:hover {
        color: var(--gold-light);
      }

      /* ===== 昇格演出（ジャーニー通知 T13）====================================
       * terms-modal の器を借りる。カード高は中身なり（#creditsModal と同じ作法）。 */
      #rankUpModal .terms-card {
        height: auto;
        max-height: min(80vh, 640px);
        width: min(380px, 100%);
      }
      .rankup-body {
        padding: 8px 20px 22px;
        text-align: center;
      }
      .rankup-ladder {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin: 10px 0 18px;
      }
      .rankup-arw {
        color: var(--gold);
        font-size: 14px;
      }
      /* 台形の形と色は css/rank-plate.css。位置の打ち消しは上の #rankUpModal .rank-plate。
       * ★ここは ID スコープで書く: 上の打ち消し規則（#rankUpModal .rank-plate）より
       *   詳細度が低いと width/height が効かない。 */
      #rankUpModal .rankup-from {
        width: 44px;
        height: 28px;
        font-size: 14px;
        opacity: 0.4;
      }
      #rankUpModal .rankup-to {
        width: 56px;
        height: 36px;
        font-size: 18px;
      }
      .rankup-lead {
        margin: 0 0 8px;
        font-size: 17px;
        font-weight: 700;
        color: var(--text);
      }
      .rankup-next {
        margin: 0 0 18px;
        font-size: 13px;
        line-height: 1.75;
        color: var(--muted);
      }
      .rankup-cta {
        display: block;
        padding: 11px 12px;
        border-radius: 4px;
        border: 1px solid var(--gold);
        background: rgba(212, 175, 55, 0.08);
        color: var(--gold-light);
        font-size: 14px;
        font-weight: 700;
      }

      /* ===== 成績リセットの確認（右レール #goalResetLink → #rankResetModal）================
       * terms-modal の器を借りる。カード高は中身なり（#rankUpModal と同じ作法）。
       * ★.rankreset-modal（HTML 側の目印クラス）には規則を書かない（.affil-modal と同じ理由）。 */
      #rankResetModal .terms-card {
        height: auto;
        max-height: min(80vh, 640px);
        width: min(380px, 100%);
      }
      .rankreset-body {
        padding: 16px 20px 22px;
        text-align: center;
      }
      .rankreset-lead {
        margin: 0 0 10px;
        font-size: 16px;
        font-weight: 700;
        color: var(--text);
      }
      .rankreset-note {
        margin: 0 0 16px;
        font-size: 13px;
        line-height: 1.75;
        color: var(--muted);
      }
      .rankreset-error {
        margin: 0 0 12px;
        font-size: 12px;
        line-height: 1.6;
        color: #e0756c;
      }
      .rankreset-error[hidden],
      .rankreset-actions[hidden] {
        display: none;
      }
      .rankreset-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
      }
      .rankreset-btn {
        flex: 1 1 0;
        padding: 11px 12px;
        border-radius: 4px;
        border: 1px solid var(--gold);
        background: rgba(212, 175, 55, 0.08);
        color: var(--gold-light);
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
      }
      .rankreset-btn.ghost {
        border-color: var(--line);
        background: transparent;
        color: var(--muted);
      }
      .rankreset-btn.danger {
        border-color: #b94a42;
        background: rgba(185, 74, 66, 0.12);
        color: #f0a39c;
      }
      .rankreset-btn:disabled {
        opacity: 0.5;
        cursor: default;
      }

      /* ===== 所属の案内（ジャーニー通知 T15）==================================
       * terms-modal の器を借りる。カード高は中身なり（#rankUpModal と同じ作法）。
       * ★.affil-modal（HTML 側の目印クラス）には規則を書かないこと。
       *   [hidden] が効いているのは .terms-modal{display:flex} と
       *   .terms-modal[hidden]{display:none} が対になっているからで、クラス側に
       *   display を足すと詳細度が並んで打ち消され、モーダルが開きっぱなしになる。
       *   幅・高さ・余白の調整はこの #affilModal .terms-card 側へ書く。 */
      #affilModal .terms-card {
        height: auto;
        max-height: min(80vh, 640px);
        width: min(380px, 100%);
      }
      .affil-body {
        padding: 8px 20px 22px;
      }
      .affil-lead {
        margin: 10px 0 8px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.6;
        color: var(--text);
      }
      .affil-note {
        margin: 0 0 18px;
        font-size: 13px;
        line-height: 1.75;
        color: var(--muted);
      }
      .affil-cta {
        display: block;
        text-align: center;
        padding: 11px 12px;
        border-radius: 4px;
        border: 1px solid var(--gold);
        background: rgba(212, 175, 55, 0.08);
        color: var(--gold-light);
        font-size: 14px;
        font-weight: 700;
      }

      /* ===== D12: 昇格の直後に出すクランの案内（#clanCtaModal）=====================
       * #affilModal と同じ器・同じ .affil-body / .affil-lead / .affil-note / .affil-cta を借りる
       * （同概念の 2 枚目を別スタイルで作らない）。増えるのは副 CTA の 1 本だけ。
       * ★.clan-cta-modal（HTML 側の目印クラス）には規則を書かない（理由は #affilModal の注記）。 */
      #clanCtaModal .terms-card {
        height: auto;
        max-height: min(80vh, 640px);
        width: min(380px, 100%);
      }
      /* 副 CTA（「クランを探す」）。主 CTA と役割が違うので枠を持たせない。 */
      .clan-cta-sub {
        display: block;
        margin-top: 10px;
        text-align: center;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 700;
        color: var(--muted);
      }

      /* ===== クラン招待URL（#clanInviteModal）=======================================
       * 器と意匠は #clanCtaModal を**そのまま借りる**（同概念の 2 枚目を別スタイルで作らない）。
       * ★★ここで打ち消しが要るのは、あちらの CTA が <a> なのに対しこちらは
       *   **<button>** だから（押した先が遷移ではなく POST /clans/invite/accept）。
       *   `display:block` は <a>（inline）を幅いっぱいにするが、<button> は既定で
       *   `width:auto` ＝内容幅のままなので、`width:100%` を足さないと 2 本のボタンの
       *   幅が揃わない。font-family も継承しない（ブラウザ既定のフォームフォントになる）。
       * ------------------------------------------------------------------------- */
      .clan-invite-modal .affil-cta,
      .clan-invite-modal .clan-cta-sub {
        width: 100%;
        font-family: inherit;
        cursor: pointer;
      }
      /* 副 CTA（閉じる / クランを見る）は文字だけ＝button の既定の地と枠を消す。 */
      .clan-invite-modal .clan-cta-sub {
        background: none;
        border: 0;
      }

      /* ===== 重要なお知らせ（admin 登録・notices key="announcement"）=================
       * terms-modal の器を借りる。カード高は中身なり（#affilModal と同じ作法）で、
       * 件数が多い・本文が長いときは一覧部だけがカード内でスクロールする（.updates-body と同じ契約）。
       * ★.announce-modal（HTML 側の目印クラス）には規則を書かないこと（理由は #affilModal の注記）。
       * ★本文はデータ由来のプレーンテキスト。改行は <br> でなく pre-wrap で活かす。 */
      #announceModal .terms-card {
        height: auto;
        max-height: min(82vh, 760px);
        width: min(520px, 100%);
      }
      .announce-body-wrap {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 6px 20px 4px;
      }
      .announce-item {
        padding: 14px 0 16px;
        border-bottom: 1px solid var(--line-soft);
      }
      .announce-item:last-child {
        border-bottom: none;
      }
      .announce-date {
        margin: 0 0 4px;
        font-family: "Noto Serif JP", serif;
        color: var(--gold-light);
        font-size: 12px;
        letter-spacing: 0.06em;
      }
      .announce-title {
        margin: 0 0 8px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.6;
        color: var(--text);
      }
      .announce-body {
        margin: 0;
        font-size: 13px;
        line-height: 1.8;
        color: var(--muted);
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      .announce-link {
        display: inline-block;
        margin-top: 10px;
        padding: 8px 14px;
        border-radius: 4px;
        border: 1px solid var(--gold);
        background: rgba(212, 175, 55, 0.08);
        color: var(--gold-light);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
      }
      .announce-actions {
        padding: 10px 20px 18px;
        border-top: 1px solid var(--line-soft);
      }
      .announce-close {
        display: block;
        width: 100%;
        padding: 11px 12px;
        border-radius: 4px;
        border: 1px solid var(--line);
        background: transparent;
        color: var(--text);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
      }
      .announce-close:hover {
        border-color: var(--gold);
        color: var(--gold-light);
      }