/* ============================================================
   チップカウント練習 — 画面スタイル(v3・無限チップカウント)
   明るいテーマ1本(承認済み: docs/mock_game_v3.html、ステージ青はA案 royal)。
   フェルトの緑は使わない(チップの緑と衝突するため)。ダーク/テーマ切替は廃止。
   ============================================================ */

:root{
  --bg:#FFF7E8; --panel:#FFFFFF; --panel2:#FFF1DC; --border:#F0DDBE;
  --ink:#2B2320; --mute:#9A8B7C;
  --red:#FF6B4A; --gold:#FFC93C; --gold-ink:#7A5A05;
  --ok:#3DCB6C; --warn:#FFC93C; --bad:#FF5A5F;
  /* 結果画面の速さランク(2026-09-23): S=金/A=緑/B=青/C=灰/D=薄い赤。
     既存トークンを流用できるものは流用し、青と薄い赤だけ新設する */
  --rank-s:var(--gold); --rank-a:var(--ok); --rank-b:#3D7DCB; --rank-c:var(--mute); --rank-d:#FF9B95;
  --stage-bg:#1B4F9C; --stage-bg2:#123566; --stage-rim:#241712; --stage-ink:#fff;
  --font-ui:"Segoe UI Variable Display","Segoe UI","Hiragino Sans","Yu Gothic UI",Meiryo,-apple-system,system-ui,sans-serif;
  --font-num:Consolas,"SF Mono",ui-monospace,monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(circle at 12% 8%, rgba(255,201,60,0.10), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(255,107,74,0.08), transparent 45%),
    var(--bg);
  color:var(--ink); font-family:var(--font-ui);
  font-size:14px; line-height:1.6; -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* 375px幅の横スクロール対策(モックの電話フレーム固定幅は写さない) */
}
b,.num,input,.best,.progress,.badge{ font-variant-numeric:tabular-nums; }

/* iPhone のノッチ/ホームバー対応。上・左右は env(safe-area-inset-*) を base の余白に足す
   (0px フォールバックは safe-area 未対応環境向け)。下端は #control-bar 側で個別に持つ
   (sticky 帯の内側で効かせる必要があるため、ここでは足さない)。 */
.app{
  max-width:520px; margin:0 auto; width:100%;
  padding:calc(14px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px))
          56px calc(16px + env(safe-area-inset-left, 0px));
}

/* ---- 画面切り替え ---- */
.screen{ display:none; flex-direction:column; gap:14px; }
.screen.active{ display:flex; }

/* ---- トップバー ---- */
.topbar{ display:flex; align-items:center; gap:10px; min-height:34px; }
.wordmark{ display:flex; flex-direction:column; line-height:1.15; margin-right:auto; }
.wordmark .en{ font-size:13px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.wordmark .ja{ font-size:11px; color:var(--mute); letter-spacing:.06em; font-weight:700; }
.icon-btn{
  background:var(--panel); border:1px solid var(--border); color:var(--mute);
  width:32px; height:32px; border-radius:10px; cursor:pointer; font-size:14px; line-height:1;
  box-shadow:0 2px 6px rgba(43,35,32,0.06);
}
.icon-btn:hover{ border-color:var(--red); color:var(--red); }

/* ---- ホーム: 成績タイル ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stat-grid .stat{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:10px 8px; text-align:center; box-shadow:0 4px 12px rgba(43,35,32,0.06);
}
.stat b{ display:block; font-family:var(--font-num); font-size:16px; font-weight:900; color:var(--ink); }
.stat span{ display:block; font-size:10px; color:var(--mute); font-weight:700; margin-top:3px; }

/* ---- ホーム: レベル・ステッパー ---- */
.stepper{
  display:flex; align-items:center; justify-content:center; gap:14px;
  background:var(--panel2); border:1px solid var(--border); border-radius:16px; padding:12px;
}
.stepper-label{ font-size:12px; font-weight:800; color:var(--mute); margin-right:2px; }
.stepper-btn{
  width:34px; height:34px; border-radius:10px; background:var(--panel); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:900;
  color:var(--red); box-shadow:0 2px 6px rgba(43,35,32,0.08); cursor:pointer; touch-action:manipulation;
}
.stepper-btn:hover{ border-color:var(--red); }
.stepper-btn[disabled]{ opacity:.4; cursor:default; }
.stepper-val{ font-size:20px; font-weight:900; min-width:30px; text-align:center; font-family:var(--font-num); }

/* ---- ホーム: 出走用アニメ・履歴スパーク ---- */
.home-stage{
  background:radial-gradient(120% 140% at 30% 8%, var(--stage-bg) 0%, var(--stage-bg2) 78%);
  border:3px solid var(--stage-rim); border-radius:16px; padding:8px; overflow:hidden;
}
.home-stage canvas{ display:block; width:100%; height:auto; }
.history-card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:11px 13px; }
.history-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:11px; color:var(--mute); font-weight:700; }
.history-head b{ font-family:var(--font-num); font-size:15px; color:var(--ink); }
.spark{ display:flex; align-items:flex-end; gap:3px; height:30px; margin-top:8px; }
.spark i{ flex:1; min-width:3px; background:var(--red); border-radius:2px 2px 0 0; display:block; opacity:.85; }
.spark.empty{ border-bottom:1px dashed var(--border); }

/* ---- ボタン ---- */
.btn{
  border:1px solid var(--border); background:var(--panel); color:var(--ink); font-family:var(--font-ui);
  font-size:13px; font-weight:800; padding:11px 18px; border-radius:14px; cursor:pointer;
  box-shadow:0 4px 10px rgba(43,35,32,0.06); touch-action:manipulation;
}
.btn:hover{ border-color:var(--red); color:var(--red); }
.btn.primary{
  display:block; width:100%; text-align:center; padding:16px; border-radius:20px; border:none;
  background:linear-gradient(180deg,#ff7e5f,var(--red)); color:#fff; font-size:17px; font-weight:900;
  letter-spacing:.02em; box-shadow:0 10px 22px rgba(255,107,74,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn.primary:hover{ color:#fff; }
.btn.primary:active{ transform:scale(0.97); }
.btn[disabled]{ opacity:.4; cursor:default; }
.btn-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.settings-link{
  display:flex; align-items:center; justify-content:center; gap:6px; font-size:12.5px;
  color:var(--mute); font-weight:700; background:none; border:none; cursor:pointer; width:100%; padding:6px;
}
.settings-link:hover{ color:var(--red); }

/* ============================================================
   ゲーム画面(#screen-drill)
   ============================================================ */

/* ---- HUD ---- */
.hud{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hud-spacer{ flex:1; }
.lives{ font-size:18px; letter-spacing:3px; display:flex; gap:2px; }
.heart{ color:var(--bad); display:inline-block; transition:none; }
.heart.lost{ color:var(--border); } /* 静的な到達状態: 割れて空になったハート */
.heart.breaking{ color:var(--bad); animation:ct-heart-break .7s ease-out; }
.level-pill{
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:900;
  background:var(--panel); border:1px solid var(--border); box-shadow:0 2px 6px rgba(43,35,32,0.05);
}
.score{
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:900; font-family:var(--font-num);
  background:var(--panel); border:1px solid var(--border); box-shadow:0 2px 6px rgba(43,35,32,0.05);
}
.combo{
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:900;
  background:linear-gradient(135deg,#ffe08a,var(--gold)); color:var(--gold-ink);
  box-shadow:0 3px 10px rgba(255,201,60,0.45); font-family:var(--font-num);
}
.combo.bump{ animation:ct-combo-bump .3s ease-out; color:var(--red); } /* 静的到達状態: 強調色で止まる */
.timer-box{ text-align:right; }
.timer-up{ font-size:17px; font-weight:900; font-family:var(--font-num); color:var(--ink); }
.timer-up.over-par{ color:var(--bad); } /* 静的到達状態: 目標秒超過は赤 */
.par{ font-size:10px; color:var(--mute); font-weight:700; font-family:var(--font-num); }

/* ---- ステージ(青の放射グラデーション + 黒の縁) ----
   2026-09-23: 高レベルは行数が増えて縦に伸び続ける(5行でH=950px)ため、難易度もチップの
   大きさも変えずに「ステージだけを箱の中でスクロールさせる」形にした(ユーザー決定)。
   .stage-wrap は伸びない外枠、.stage が実際にスクロールする箱。 */
.stage-wrap{
  position:relative; border-radius:20px; padding:3px;
  background:linear-gradient(160deg,#4a3423,#2a1c11 55%,#1c120a);
  box-shadow:0 10px 26px rgba(28,18,10,0.35), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.stage{
  position:relative; border-radius:17px; min-height:220px;
  /* 角丸クリップ(overflow:hidden の役目)は overflow-x:hidden が引き継ぐ。
     overflow-y だけ auto にして、はみ出した行を縦スクロールで読ませる。
     canvas 自身は width:100%/height:auto の等比のまま = チップの大きさ・厚みは不変。 */
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  /* 実測: 630px幅までは厚み3.5px以上を保てるが、それでも3行分が限度。
     これは JS が動かないときだけの保険値(2026-09-23)。通常は main.js の fitStage() が
     画面の縦・帯(#control-bar)の高さ・ステージ上端の実測から style.maxHeight を
     インラインで入れ、こちらより優先される(縦が短い端末でテンキーの帯がステージを
     覆う回帰を防ぐため)。fitStage が動けない/効かない環境でのみこの値が効く。 */
  max-height:min(46vh, 380px);
  border:3px solid var(--stage-rim);
  background:radial-gradient(120% 140% at 30% 8%, var(--stage-bg) 0%, var(--stage-bg2) 78%);
  color:var(--stage-ink);
}
.stage::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(0,0,0,0.35), transparent 60%);
}
/* スクロールできることが一目で分かるように、上下の縁にフェードを重ねる(CSSのみ・擬似要素)。
   .stage 自身は前段で ::before を使用中なので、動かない外枠 .stage-wrap 側に置く
   (.stage-wrap はスクロールしないため、フェードは常に上端/下端に固定されて見える)。
   チップの視認性を落とさないよう、帯は薄め・細めにする。
   2026-09-23 実機で指摘: 常時表示だと「その方向にまだ続きがある」印のはずのフェードが
   もう続きが無い側(一番上まで/一番下まで読み終えた側)でも出続け、常に最大額面が並ぶ
   一番上のレーンと、そこを指す不正解マークのラベルが毎回暗く沈んでいた。既定は非表示にし、
   js/main.js の updateStageScrollFade() が付け外す can-scroll-up/can-scroll-down が
   付いているときだけ出す(reduced-motion で transition が止まっても、この opacity の
   到達状態自体は正しい)。 */
.stage-wrap::before,
.stage-wrap::after{
  content:""; position:absolute; left:6px; right:6px; height:26px; z-index:5; pointer-events:none;
  opacity:0; transition:opacity .15s ease;
}
.stage-wrap::before{
  top:6px; border-radius:14px 14px 0 0;
  background:linear-gradient(to bottom, rgba(18,53,102,0.85), rgba(18,53,102,0));
}
.stage-wrap::after{
  bottom:6px; border-radius:0 0 14px 14px;
  background:linear-gradient(to top, rgba(18,53,102,0.85), rgba(18,53,102,0));
}
.stage-wrap.can-scroll-up::before{ opacity:1; }
.stage-wrap.can-scroll-down::after{ opacity:1; }
/* .scene-box は canvas(#scene) と誤答マーク(#scene-marks)を重ねる器。
   main.js が scene-box.style.maxWidth を canvas と同じ論理幅(layout.W)に揃えるので、
   .scene-marks の % 指定(CT.marks.rectsOf の出力)は常に canvas と同じ矩形を指す。 */
.scene-box{ position:relative; width:100%; }
#scene{ display:block; width:100%; height:auto; position:relative; z-index:1; }
#scene.fx-sweep{
  animation:ct-sweep .45s ease-in forwards;
  opacity:0; transform:translateX(30px); /* 静的到達状態: 右へ流れて消えた後の姿 */
}
/* 誤答の原因になった場所を指す枠。inset:0 で canvas と同じ矩形に重ね、
   pointer-events:none でチップの操作(スクロール等)を妨げない。
   z-index は #scene(1)より上、.popup-layer(3)より下でよい。 */
.scene-marks{ position:absolute; inset:0; pointer-events:none; z-index:2; }
/* #result-list にも同名の .mark(正誤の記号)があるので、必ず .scene-marks 配下に
   スコープする(裸の .mark にすると結果画面の行がすべて赤く光る事故になる)。 */
.scene-marks .mark{
  position:absolute; border:3px solid var(--bad); border-radius:10px;
  /* 静的到達状態: reduced-motion で animation が止まっても、この box-shadow で
     枠が光っていることが分かる(パルスは keyframes 側で強弱を付けるだけ) */
  box-shadow:0 0 0 4px rgba(255,90,95,0.22), 0 0 16px rgba(255,90,95,0.55);
  animation:ct-mark-pulse 1.1s ease-in-out infinite;
}
.scene-marks .mark-tag{
  /* 枠の上辺に「乗る」= 上辺をまたぐ位置(枠の外へはみ出してよいが、
     .scene-marks 自体は canvas と同じ矩形なので、はみ出しても canvas の外までは出ない) */
  position:absolute; left:50%; top:0; transform:translate(-50%, -50%);
  background:var(--bad); color:#fff; font-weight:900; font-size:10px;
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  padding:2px 7px; border-radius:6px; white-space:nowrap;
  box-shadow:0 3px 8px rgba(255,90,95,0.4);
}

/* 正解フラッシュ / 不正解の赤染め・揺れ */
.stage.fx-ok{
  animation:ct-stage-flash .35s ease-out;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,0.6); /* 静的到達状態: 白いリングで正解を示す */
}
.stage.fx-ng{
  animation:ct-red-wash .6s ease-out;
  box-shadow:inset 0 0 0 6px rgba(255,90,95,0.55); /* 静的到達状態: 赤いリングで誤答を示す */
}
.stage.fx-shake{ animation:ct-shake .45s ease-in-out; } /* 揺れは0地点で終わるので静的状態の追加指定は不要 */
/* 不正解時はfx-ng(赤染め)とfx-shake(揺れ)が同時付与される。animation単体指定だと後勝ちでct-shakeがct-red-washを上書きしてしまうため、comma区切りで両方指定する */
.stage.fx-ng.fx-shake{ animation:ct-red-wash .6s ease-out, ct-shake .45s ease-in-out; }

/* #stage-wash と #popup-layer は index.html 側で .stage-wrap の直接の子(#stage の外)
   に置いてある。.stage-wrap は 3px padding、#stage はさらに 3px border を持つので、
   #stage の内側(padding-box)に揃えるには外枠から 6px 内側にする必要がある
   (.stage-wrap::before/::after の上下フェードと同じ計算・同じ 14px の角丸)。 */
.stage-wash{
  position:absolute; top:6px; right:6px; bottom:6px; left:6px; border-radius:14px;
  z-index:2; pointer-events:none;
  background:rgba(255,90,95,0.32); opacity:0;
}
.stage-wash.on{ opacity:1; } /* 静的到達状態: フェードなしでも赤く覆われる */

.popup-layer{
  position:absolute; top:6px; right:6px; bottom:6px; left:6px; border-radius:14px;
  z-index:3; pointer-events:none; overflow:hidden;
}
#popup-points{
  position:absolute; top:16px; right:16px; background:var(--ok); color:#fff; font-weight:900;
  font-size:15px; padding:5px 12px; border-radius:10px; box-shadow:0 6px 14px rgba(61,203,108,0.4);
  opacity:0; transform:translateY(0);
}
#popup-points.on{
  animation:ct-pop-float .9s ease-out forwards;
  opacity:1; transform:translateY(-14px); /* 静的到達状態: 浮いた位置で不透明のまま見える */
}

.banner-level{
  position:absolute; top:10px; left:50%; transform:translateX(-50%) rotate(-1.5deg); z-index:4;
  background:linear-gradient(135deg,#ffe08a,var(--gold)); color:var(--gold-ink);
  font-weight:900; font-size:13px; letter-spacing:.08em; padding:6px 16px; border-radius:10px;
  box-shadow:0 6px 16px rgba(255,201,60,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
  opacity:0; pointer-events:none;
}
.banner-level.on{
  animation:ct-level-banner 1.4s ease-out forwards;
  opacity:1; /* 静的到達状態: バウンドなしでも表示される */
}

/* ---- 出題文・回答表示 ---- */
.prompt{ margin:0; text-align:center; font-size:14px; font-weight:800; color:var(--mute); }

/* ---- 下部固定帯(回答欄+テンキー+操作ヒント) ----
   2026-09-23: ステージが箱スクロールになっても、回答の入口(テンキー)まで画面外に
   押し出されては本末転倒なので、この3つは画面下に常時固定する(ユーザー決定)。
   position:sticky は最寄りのスクロール祖先(= body。overflow-x:hidden で
   overflow-y は auto 相当になる)基準で効く。中身が収まる通常時は素の配置のまま
   浮かず、はみ出したときだけ画面下に貼り付く。 */
.control-bar{
  position:sticky; bottom:0; z-index:10;
  display:flex; flex-direction:column; gap:14px;
  background:var(--bg);
  padding:8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  /* スクロールしてきたチップが帯の下に透けないよう、背景は body と同じ不透明色で敷く */
}
/* 縦がとても短い端末(横向きスマホ等)では、帯を画面下に固定するとテンキーが
   ステージを覆い隠して一切見えなくなる(2026-09-23 実機検証: 812×375 で発生)ので、
   固定をやめてページごとのスクロールに戻す。main.js の fitStage() もこの節目
   (同じメディアクエリ)では #stage.style.maxHeight を外す(中身の高さに任せる)。 */
@media (max-height:520px){
  .control-bar{ position:static; }
}
/* ---- 目標秒バー(2026-09-23) ----
   幅は main.js が毎フレーム style.width を直接書く(値がJSの正本)。CSSはここでは
   transitionを付けない -- transitionを付けると prefers-reduced-motion の
   グローバルキルスイッチ(下の @media)で止まってしまい、「間に合わなかった」が
   静止したまま伝わらなくなるため(この情報は演出ではなく計時そのもの)。
   幅0(spent)のとき金の塗りが消えるのは幅そのもので表現済みだが、丸めの端数で
   薄く残るのを防ぐため .spent 時は明示的に透明にする。 */
.par-bar{
  width:100%; height:6px; border-radius:999px; overflow:hidden; flex-shrink:0;
  /* 薄いグレーの溝。var(--border)(#F0DDBE)は --bg(#FFF7E8)とほぼ同じ暖色クリームで
     コントラストが足りず、地色に沈んで見えなくなる(2026-09-23 ブラウザ実測で確認)。
     半透明の暗色を重ねればどんな背景でも「薄いグレー」として視認できるので、
     固定の灰色トークンを新設する代わりにこちらを使う。 */
  background:rgba(43,35,32,0.14);
}
.par-bar-fill{ display:block; height:100%; width:100%; background:var(--gold); }
.par-bar.spent .par-bar-fill{ background:transparent; }

/* 回答欄(#answer-display)と正解額(#popup-answer)を横並びにする。#popup-answer は
   ステージ上部中央(旧: #popup-layer 内)から回答欄の隣へ移した(2026-09-23)。
   レーンは額面の降順で並ぶため、ステージ上部中央だと一番上(=一番大きい額面)の
   レーンの枠(.mark)とラベル(.mark-tag)に正解額のポップアップが必ず重なって
   しまっていた。回答欄の隣なら #stage の外なので構造的に重ならない。 */
.answer-wrap{
  display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:nowrap; text-align:center;
}
#answer-display{
  display:inline-block; font-size:34px; font-weight:900; font-family:var(--font-num);
  font-variant-numeric:tabular-nums; background:var(--panel); border:2px solid var(--border);
  border-radius:16px; padding:9px 22px; box-shadow:0 6px 16px rgba(43,35,32,0.08);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 不正解のとき、入力した額を赤字+取り消し線にする(effects.js の wrong() が直付けする。
   「出しっぱなし」の契約は #popup-answer と同じで、次の問題(clearWrongFeedback)か
   cancel() まで消えない)。帯の高さは増やさない = 縦には積まず、文字色と線だけを変える。 */
#answer-display.wrong{ color:var(--bad); text-decoration:line-through; }

/* ---- テンキー ---- */
.keypad{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.key{
  min-height:52px; border-radius:14px; background:var(--panel); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800;
  font-family:var(--font-num); color:var(--ink); box-shadow:0 3px 8px rgba(43,35,32,0.06);
  cursor:pointer; touch-action:manipulation; -webkit-user-select:none; user-select:none;
}
.key:hover{ border-color:var(--red); }
.key:active{ background:var(--panel2); }
.key[disabled]{ opacity:.4; cursor:default; }
.key-wide{ grid-column:span 3; }
.key-ok{
  background:linear-gradient(180deg,#ff7e5f,var(--red)); color:#fff; font-size:15px; letter-spacing:.04em;
  box-shadow:0 6px 14px rgba(255,107,74,0.4);
}
.key-del{ color:var(--bad); }

/* ---- フィードバック ---- */
.feedback{ display:none; flex-direction:column; gap:10px; }
.feedback.on{ display:flex; }
#feedback-banner{
  border:1px solid var(--border); border-radius:12px; padding:10px 14px;
  font-size:14px; font-weight:900; text-align:center; background:var(--panel);
}
#feedback-banner.ok{ color:var(--ok); border-color:var(--ok); }
#feedback-banner.bad{ color:var(--bad); border-color:var(--bad); }
.diagnosis{ margin:0; text-align:center; font-size:12px; color:var(--mute); font-weight:700; }
#breakdown{ width:100%; border-collapse:collapse; font-size:11.5px; }
#breakdown th,#breakdown td{
  border-bottom:1px dashed var(--border); padding:5px 6px; text-align:right; color:var(--mute);
}
#breakdown th{ font-weight:800; font-size:10px; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid var(--border); }
#breakdown th:first-child,#breakdown td:first-child{ text-align:left; }
#breakdown td.n{ font-family:var(--font-num); color:var(--ink); font-weight:700; }
#breakdown tr:last-child td{ border-bottom:0; }
#breakdown tr.foot td{ color:var(--ink); font-weight:900; border-top:2px solid var(--ink); border-bottom:none; }
#breakdown tr.hl td{ background:rgba(255,201,60,.18); color:var(--ink); font-weight:800; }
.tap-next{ text-align:center; font-size:11px; color:var(--mute); font-weight:700; opacity:.85; }

/* ---- 操作ヒント ---- */
.hint-row{ margin:0; text-align:center; font-size:11px; color:var(--mute); min-height:1em; }

/* ============================================================
   結果画面
   ============================================================ */
.result-banner{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; padding:4px 0; }
#result-title{
  margin:0; font-size:26px; font-weight:900;
  background:linear-gradient(135deg,var(--ink),#54453a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:translateY(6px);
}
#result-title.reveal{
  animation:ct-title-reveal 1.2s ease-out forwards;
  opacity:1; transform:translateY(0); /* 静的到達状態: そのまま表示 */
}
#result-badge{
  font-family:var(--font-num); font-size:24px; font-weight:900; color:var(--red);
  border:1px solid var(--red); border-radius:999px; padding:6px 20px; background:var(--panel);
}
.stats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stats-row .stat{
  background:var(--panel); border-radius:14px; padding:10px 6px; border:1px solid var(--border);
  box-shadow:0 4px 10px rgba(43,35,32,0.06); text-align:center;
}
/* 速さランク(#res-speed)の色分け。ratio は「目標秒に対する時間の割合」なので
   レベルを跨いでも比較できる指標(秒の平均は目標秒がレベルで変わるため使えない) */
#res-speed.rank-s{ color:var(--rank-s); }
#res-speed.rank-a{ color:var(--rank-a); }
#res-speed.rank-b{ color:var(--rank-b); }
#res-speed.rank-c{ color:var(--rank-c); }
#res-speed.rank-d{ color:var(--rank-d); }
#result-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
#result-list li{
  display:flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:7px 11px; font-size:11.5px; color:var(--mute);
}
#result-list .mark{ font-weight:900; }
#result-list .mark.ok{ color:var(--ok); }
#result-list .mark.bad{ color:var(--bad); }
#result-list .q{ flex:1; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#result-list .n{ font-family:var(--font-num); }

/* ---- 設定 ---- */
.section-title{
  margin:4px 0 0; font-size:11px; font-weight:900; letter-spacing:.1em;
  text-transform:uppercase; color:var(--red);
}
.palette-list{ display:flex; flex-direction:column; gap:8px; }
/* 非提携の注記(2026-09-23)。パレット一覧のすぐ下に小さく添える */
.hint-row.disclaimer{ margin-top:4px; }
.palette-option{
  display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:9px 11px; cursor:pointer;
}
.palette-option.on{ border-color:var(--red); }
.palette-option.off{ opacity:.45; cursor:default; }
.palette-option input{ accent-color:var(--red); margin:0; }
.palette-option .meta{ display:flex; flex-direction:column; min-width:0; }
.palette-option .meta b{ font-size:12.5px; font-weight:800; }
.palette-option .meta span{ font-size:10px; color:var(--mute); }
.palette-option canvas{ margin-left:auto; display:block; height:auto; max-width:40%; }

/* ---- 375px幅で崩れないための調整 ---- */
@media (max-width:400px){
  #answer-display{ font-size:26px; padding:8px 14px; }
  /* 回答欄(#answer-display)と正解額(#popup-answer)が1行に収まるよう、
     隙間と正解額側のフォントを詰める(2026-09-23 実測: 375px幅で2つ横並び) */
  .answer-wrap{ gap:6px; }
  #popup-answer{ font-size:12px; }
  .stage{ min-height:190px; }
  .stat b{ font-size:14px; }
}

/* canvas + rAF のモーション(ステージのチップ描画・出題アニメ)はCSSでは止まらないので
   js/main.js 側でも matchMedia を見て抑止している。ここは transition/animation の
   グローバルなキルスイッチ(各 .fx-*/.on/.lost/.reveal は上で静的な到達状態を用意済み)。 */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---- keyframes ---- */
@keyframes ct-stage-flash{
  0%{ box-shadow:inset 0 0 0 0 rgba(255,255,255,0); }
  35%{ box-shadow:inset 0 0 0 10px rgba(255,255,255,0.85); }
  100%{ box-shadow:inset 0 0 0 6px rgba(255,255,255,0.6); }
}
@keyframes ct-shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(7px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(3px); }
}
@keyframes ct-red-wash{
  0%{ box-shadow:inset 0 0 0 0 rgba(255,90,95,0); }
  35%{ box-shadow:inset 0 0 0 12px rgba(255,90,95,0.7); }
  100%{ box-shadow:inset 0 0 0 6px rgba(255,90,95,0.55); }
}
@keyframes ct-pop-float{
  0%{ opacity:0; transform:translateY(6px) scale(0.9); }
  25%{ opacity:1; transform:translateY(-2px) scale(1.05); }
  100%{ opacity:1; transform:translateY(-14px) scale(1); }
}
@keyframes ct-combo-bump{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.22); }
  100%{ transform:scale(1); }
}
@keyframes ct-heart-break{
  0%{ transform:scale(1) rotate(0deg); opacity:1; }
  40%{ transform:scale(1.3) rotate(-8deg); opacity:1; }
  100%{ transform:scale(0.9) rotate(6deg); opacity:0.35; }
}
@keyframes ct-level-banner{
  0%{ opacity:0; transform:translateX(-50%) translateY(-10px) rotate(-1.5deg); }
  60%{ opacity:1; transform:translateX(-50%) translateY(2px) rotate(-1.5deg); }
  100%{ opacity:1; transform:translateX(-50%) translateY(0) rotate(-1.5deg); }
}
@keyframes ct-title-reveal{
  0%{ opacity:0; transform:translateY(10px); }
  100%{ opacity:1; transform:translateY(0); }
}
@keyframes ct-sweep{
  0%{ opacity:1; transform:translateX(0); }
  100%{ opacity:0; transform:translateX(30px); }
}

/* ---- 実機確認(2026-09-22)での手直し ----
   HUD はコンボピルが出ると 470px で ✕ が2行目に落ちた。1行固定にして、余るときは
   コンボピルだけ縮む(数字は絶対に切らない: 連続数は演出、得点・残り時間は情報)。 */
.hud{ flex-wrap:nowrap; gap:6px; }
.hud-spacer{ flex:1 1 0; min-width:2px; }
.level-pill, .score{ white-space:nowrap; flex-shrink:0; }
.combo{ white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.timer-box, .icon-btn{ flex-shrink:0; }
@media (max-width:400px){
  .lives{ font-size:16px; letter-spacing:2px; }
  .level-pill, .score, .combo{ font-size:11px; padding:3px 8px; }
  .timer-up{ font-size:15px; }
}
/* 称号は「常連さんに名前を覚えられた」のように長い。タイル幅に収まらないので UI フォントで2行まで折り返す */
#stat-best-title{ font-family:var(--font-ui); font-size:12px; line-height:1.3; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; }

/* ---- ポット(2026-09-23: 得点 = 捌いた総額。カウントしたチップがそのまま点になる) ----
   HUD は狭いので、チップは「今ポットが届いている一番大きい額面」を表す点1つだけにする。
   額面が上がった瞬間に .up で弾ませる = カラーアップの演出。 */
.pot{ display:inline-flex; align-items:center; gap:5px; flex-shrink:0; }
.pot-chip{
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
  background:var(--pot-chip, var(--border));
  border:2px solid rgba(255,255,255,0.85);
  box-shadow:0 1px 3px rgba(43,35,32,0.35);
}
.pot-chip.up{ animation:ct-pot-up .5s ease-out; }
/* 静的到達状態: アニメが止まる環境でも色は変わっているので何もしない */

#popup-bonus{
  position:absolute; top:44px; right:16px; color:var(--gold-ink); font-weight:800; font-size:11px;
  font-family:var(--font-num); background:var(--gold); padding:3px 9px; border-radius:8px;
  box-shadow:0 4px 10px rgba(255,201,60,0.45); opacity:0;
}
#popup-bonus.on{
  animation:ct-pop-float .9s ease-out forwards;
  opacity:1; transform:translateY(-14px);
}

/* 不正解のときの正解額。回答欄(#answer-display)の隣に横並びで出す(2026-09-23:
   ステージ上部中央にあると一番上のレーンの枠・ラベルに必ず重なるため、ステージの外・
   回答欄の隣へ移した)。「出しっぱなし」(effects.js の wrong() が addClass するだけで
   showTemp を使わない)契約は変わらないので、消えるアニメーションは付けない
   -- opacity の on/off だけで足りる。回答欄と横並びでも帯の高さは増やさない
   (縦に積まない)ので、色と文字だけで見せる軽い形にする。 */
#popup-answer{
  font-weight:900; font-size:15px; color:var(--ok);
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis;
  opacity:0;
}
#popup-answer.on{ opacity:1; } /* 静的到達状態: フェードなしでもそのまま見える */

.pot-panel{
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:12px;
  box-shadow:0 6px 16px rgba(43,35,32,0.08); text-align:center;
}
#res-pot{ display:block; width:100%; height:auto; }

@keyframes ct-pot-up{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.9); }
  100%{ transform:scale(1); }
}
@keyframes ct-mark-pulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(255,90,95,0.22), 0 0 16px rgba(255,90,95,0.55); }
  50%{ box-shadow:0 0 0 8px rgba(255,90,95,0.05), 0 0 26px rgba(255,90,95,0.85); }
}