/* card — 「墨と朱」領域別スタイル（docs/CONCEPT.md）。brand.css の後に読み込む。
   ゲームカード（Study / Challenge / Daily の盤面）と、その下のセッションの数字、完了パネル、覚えたトースト。
   html[data-theme] を頭に付けて (0,3,1) の詳細度で後勝ちにする（theme.css は Batch 40 で廃止）。
   注意: .game-card / .stats--strip の余白・枠は必ずクラスで書く（path.css の畳み込み
   body:not(.home--playing) .app--home .game-card { height:0 } より強くしない）。 */

/* ===== カード本体 ===== */
html[data-theme] .game-card {
  padding: 24px 24px 20px;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: border-color var(--ease);
}

@media (max-width: 720px) {
  html[data-theme] .game-card {
    padding: 20px 16px 16px;
  }
}

/* 正解／思い出せず／覚えた: 光らせず、枠の色を短く変えるだけ */
html[data-theme] .game-card--recalled,
html[data-theme] .game-card--failed,
html[data-theme] .game-card--learned {
  animation: none;
  box-shadow: none;
}

html[data-theme] .game-card--recalled,
html[data-theme] .game-card--learned {
  border-color: var(--ok);
}

html[data-theme] .game-card--failed {
  border-color: var(--signal);
}

/* ===== 上段: 今日のセット進捗（Study） ===== */
html[data-theme] .set-progress {
  gap: 10px;
  margin: 0 0 12px;
  color: var(--ink-3);
  font-size: 12px;
}

html[data-theme] .set-progress__label {
  font-weight: 600;
}

html[data-theme] .set-progress__count {
  font-family: var(--font-mono);
  font-size: 12px;
}

html[data-theme] .set-progress__count b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

html[data-theme] .set-progress__bar {
  height: 2px;
  border-radius: 0;
  background: var(--line);
}

html[data-theme] .set-progress__bar i {
  background: var(--ink);
  background-image: none;
  transition: width var(--ease);
}

/* ===== 問題キュー（Study）: 単色の小さなチップ ===== */
html[data-theme] .study-queue {
  gap: 6px;
  margin: 0 0 16px;
}

html[data-theme] .queue-chip {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}

/* 未解決（もう一度出す語）: 文字は出さず点の強調だけ（出題の日本語と二重になるため）。title／aria-label は残る */
html[data-theme] .queue-chip--unresolved {
  width: 22px;
  max-width: none;
  padding: 0;
  gap: 0;
  background: var(--signal-soft);
  border-color: var(--signal);
  color: var(--signal-ink);
}

html[data-theme] .queue-chip__ja {
  display: none;
}

html[data-theme] .queue-chip--more {
  width: auto;
  padding: 0 6px;
  background: transparent;
  border-color: transparent;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
}

html[data-theme] .queue-chip--recalled {
  background: var(--ok-soft);
  border-color: transparent;
  color: var(--ok);
  animation: card-chip-fade 320ms var(--ease) forwards;
}

html[data-theme] .queue-chip--recalled .icon {
  margin: 0;
}

@keyframes card-chip-fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== 出題 ===== */
html[data-theme] .game-card .label {
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
}

html[data-theme] .word-meta {
  margin: 4px 0 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

html[data-theme] #japanese {
  margin: 8px 0 12px;
  color: var(--ink);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-shadow: none;
}

html[data-theme] .game-card--concept #japanese {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}

html[data-theme] .prompt-context {
  margin: -6px auto 12px;
  color: var(--ink-3);
  font-size: 13px;
}

/* 答え（#word）: 案内文は小さな補助文、答え・ヒントは等幅の墨 */
html[data-theme] .hidden-word {
  min-height: 28px;
  margin: 0 0 14px;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  text-shadow: none;
}

html[data-theme] .hidden-word:has(.cl),
html[data-theme] .hidden-word--hint {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

html[data-theme] .hidden-word--hint {
  font-size: 22px;
  font-weight: 500;
}

html[data-theme] .hidden-word--long,
html[data-theme] .hidden-word--long:has(.cl) {
  font-size: 20px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

html[data-theme] .hidden-word .cl {
  color: var(--ink);
}

@media (max-width: 560px) {
  html[data-theme] .hidden-word:has(.cl) {
    font-size: 28px;
  }
  html[data-theme] .hidden-word--long:has(.cl) {
    font-size: 18px;
  }
}

@media (min-width: 900px) {
  html[data-theme] .hidden-word:has(.cl) {
    font-size: 36px;
  }
  html[data-theme] .hidden-word--long:has(.cl) {
    font-size: 20px;
  }
}

/* 履歴ドット（× × ○ ○） */
html[data-theme] .word-history {
  margin: -6px 0 10px;
}

html[data-theme] .game-card .hist {
  gap: 4px;
}

html[data-theme] .game-card .hist i {
  width: 8px;
  height: 8px;
}

html[data-theme] .hist__o { background: var(--ok); }
html[data-theme] .hist__x { background: var(--signal); }

/* 解説・例文・仲間 */
html[data-theme] .word-explain {
  margin: 0 auto 8px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}

html[data-theme] .word-example {
  margin: 0 auto 10px;
  max-width: 620px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}

html[data-theme] .word-example__en {
  font-family: var(--font-mono);
  font-size: 14px;
}

html[data-theme] .word-example__en b {
  color: var(--signal-ink);
  font-weight: 700;
}

html[data-theme] .word-example__ja {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 13px;
}

html[data-theme] .word-family {
  margin: 0 0 8px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.6;
}

/* ===== 答え表示後の操作: 3つの静かなチップ（メモ・覚え方を作る・発音／ヒント） ===== */
html[data-theme] .word-actions {
  gap: 6px 8px;
  margin: 0 0 12px;
}

html[data-theme] .word-note {
  gap: 6px;
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
}

/* 発音・ヒント・メモ・覚え方のボタン（28px の pill）は brand.css の部品節（単語詳細の .word-detail__speak と同じ 1 つの定義） */

html[data-theme] .word-note__edit--add {
  border-style: solid;
}

/* 保存したメモは1行の本文 */
html[data-theme] .word-note__text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
}

html[data-theme] .word-note__text .icon {
  width: 14px;
  height: 14px;
  margin: 0;
  color: var(--ink-3);
}

html[data-theme] .game-card .note-input {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 320px;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 13px;
}

/* 指で押す端末: メモの入力と保存は 44px・入力は 16px（単語詳細のメモ行と同値） */
@media (pointer: coarse) {
  html[data-theme] .game-card .note-input {
    min-height: 44px;
    padding: 0 12px;
    font-size: 16px;
  }
  html[data-theme] .game-card .note-save {
    min-height: 44px;
    padding: 0 14px;
    font-size: 13px;
  }
}

/* 覚え方（AI）の本文 */
html[data-theme] .word-ai {
  display: grid;
  gap: 4px;
  max-width: 520px;
  padding: 10px 12px;
  border: 0;
  text-align: left;
  border-radius: var(--radius);
  background: var(--paper-3);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}

html[data-theme] .word-ai__mnemonic {
  color: var(--ink);
  font-weight: 600;
}

html[data-theme] .word-ai__example {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 13px;
}

html[data-theme] .word-ai__ja {
  display: block;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 12px;
}

html[data-theme] .word-ai__pitfall {
  color: var(--warn);
  font-size: 12px;
}

html[data-theme] .word-ai__error {
  color: var(--ink-3);
  font-size: 12px;
}

/* 上限の文の中の「Pro について」は語の途中で折らない */
html[data-theme] .ai-upgrade {
  white-space: nowrap;
}

/* ===== 入力欄（brand.css の枠に寸法だけ足す） ===== */
html[data-theme] .input-wrapper {
  width: min(560px, 100%);
}

html[data-theme] #input {
  padding: 12px 16px;
  font-size: 22px;
}

html[data-theme] .typed-preview {
  padding: 12px 16px;
  font-size: 22px;
}

html[data-theme] body.free-answer #input {
  color: var(--ink);
  font-size: 20px;
}

/* ローマ字で読みを打つカード（日本語の答え。js/romaji.js）: 打ったかなの下に、打ったキーを小さく（2 段）。
   長い読みでも折り返せるように、打った表示を流れの中に置き、入力欄（読み取り専用・文字は透明）をその上に重ねる */
html[data-theme] body.romaji-answer .typed-preview {
  position: relative;
  inset: auto;
  min-height: 64px;
  flex-wrap: wrap;
  align-content: center;
  gap: 2px 1px;
  padding: 8px 12px;
  letter-spacing: 0;
}

html[data-theme] body.romaji-answer #input {
  position: absolute;
  inset: 0;
  height: 100%;
}

.typed-preview .rk {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 1em;
}

.typed-preview .rk__kana {
  color: var(--signal);
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

.typed-preview .rk__keys {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}

.typed-preview .rk--pending .rk__keys {
  color: var(--signal);
}

/* 答えの下の読み（鎌倉幕府 ／ かまくらばくふ） */
html[data-theme] .hidden-word .hidden-word__reading {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

@media (max-width: 560px) {
  .typed-preview .rk__kana {
    font-size: 20px;
  }
}

/* ===== コンボ（Study では出さない。Challenge は小さな等幅） ===== */
html[data-theme] .combo {
  min-height: 0;
  margin: 8px 0 0;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: none;
  animation: none;
}

/* Study では出さない。Challenge/Daily でもコンボは右上の #playScore（×N）に1か所だけ */
html[data-theme] .game-card .combo {
  display: none;
}

html[data-theme] .combo--on,
html[data-theme] .combo--hot,
html[data-theme] .combo--blaze,
html[data-theme] .combo--max {
  color: var(--signal-ink);
  font-size: 13px;
  letter-spacing: 0;
  animation: none;
  text-shadow: none;
}

/* ===== メッセージ ===== */
html[data-theme] .message {
  min-height: 24px;
  margin: 12px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  animation: none;
}

html[data-theme] .message.correct { color: var(--ok); animation: none; }
html[data-theme] .message.wrong { color: var(--signal-ink); animation: none; }
/* 別解を受け入れたときの案内。正解でも間違いでもないので墨のまま */
html[data-theme] .message.info { color: var(--ink); animation: none; }
html[data-theme] .message.revealed { color: var(--ink-2); }
html[data-theme] .message.finished { color: var(--ink); animation: none; }
html[data-theme] .message.learned { color: var(--ink); font-weight: 700; }
/* 前の語の結果の行（次の語が出た後）: 見えなくするが、読み上げの途中で文を消さない（js/game.js hideStaleMessage）。場所は保つ */
html[data-theme] .message.message--stale { opacity: 0; }

/* もう一回（Challenge のみ表示。結果パネルにも同じ操作があるので控えめに） */
html[data-theme] .game-card > #restart {
  margin-top: 12px;
}

/* ===== Challenge / Daily: 残り時間とスコアは小さな等幅の数字 ===== */
html[data-theme] .big-timer {
  top: 16px;
  left: 20px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  text-shadow: none;
  animation: none;
}

html[data-theme] .big-timer--danger {
  color: var(--signal);
  animation: none;
}

/* 四隅の数字にラベル（残り／正解）。12px の補助文、数字は等幅のまま */
html[data-theme] .big-timer::before,
html[data-theme] .play-score__value::before {
  content: "残り";
  display: inline;
  margin-right: 4px;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
}

html[data-theme] .play-score__value::before {
  content: "正解";
}

html[data-theme] .play-score {
  top: 16px;
  right: 20px;
  gap: 8px;
}

html[data-theme] .play-score__value {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
}

html[data-theme] .play-score__combo,
html[data-theme] .play-score__combo--on,
html[data-theme] .play-score__combo--hot,
html[data-theme] .play-score__combo--blaze,
html[data-theme] .play-score__combo--max {
  color: var(--signal-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-shadow: none;
}

/* Challenge 中は上の角に数字があるので、出題ラベルを少し下げる */
html[data-theme] body.is-playing:not(.mode-study) .game-card .label {
  padding-top: 8px;
}

/* Challenge／Daily のプレイ中はカード下の数字を出さない（残り・正解は盤面に、結果はパネルに） */
html[data-theme] body.is-playing:not(.mode-study) .stats--strip {
  display: none;
}

/* 同じく 60 秒の最中は読み物（仲間の語・例文の訳）と「もう一回」を出さない（要素は残す。やり直しは結果パネルの「もう一回」に一本化） */
html[data-theme] body.is-playing:not(.mode-study) :is(#wordFamily, .game-card > #restart, .word-example__ja) {
  display: none;
}

/* ===== 覚えた: 墨の文字だけ。160ms で現れて消える ===== */
html[data-theme] .learn-stamp {
  top: 50%;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  transform: translate(-50%, -50%);
  animation: card-stamp 1.4s linear forwards;
}

@keyframes card-stamp {
  0% { opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}

html[data-theme] .learn-toast {
  margin-top: 12px;
  animation: card-fade-in var(--ease);
}

@keyframes card-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* はちゃん（カード内の2場面: 覚えた／セット完了）: 32px、紙の吹き出し */
html[data-theme] .game-card .hasumi {
  gap: 8px;
  justify-content: center;
}

html[data-theme] .game-card .hasumi--result {
  margin: 8px 0 0;
}

html[data-theme] .result-panel .hasumi {
  justify-content: flex-start;
  margin: 0 0 10px;
}

html[data-theme] .game-card .hasumi__avatar {
  width: 32px;
  height: 32px;
  border: 1px solid var(--gold-dk);
  background: var(--paper-3);
}

/* 紙片（鋲なし）: 縁なし・2px・小口 1 段。縁の 1px は透明で残す（外寸と下の部品の位置を変えない）。
   盤面の中なので --paper-3（夜は room.css が --parchment-2 に差し替える）。--sheet*・--slip-shadow は使わない */
html[data-theme] .game-card .hasumi__bubble {
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--paper-3);
  box-shadow: 0 1px 0 var(--line-2), 0 4px 10px -8px rgba(var(--shadow-rgb), 0.5);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

/* ===== 完了パネル ===== */
html[data-theme] .result-panel {
  margin-top: 16px;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  scroll-margin-top: 72px;
}

/* ===== 完了（今日のセット／Challenge／Daily）: 出題 UI とカード下の数字を畳み、結果パネルだけにする =====
   要素は残す（id は E2E と他モジュールが参照する）。body.set-done は js/game.js が付け外しする */
html[data-theme] body.set-done .game-card .label,
html[data-theme] body.set-done #wordMeta,
html[data-theme] body.set-done #japanese,
html[data-theme] body.set-done #promptContext,
html[data-theme] body.set-done #word,
html[data-theme] body.set-done #wordHistory,
html[data-theme] body.set-done #wordExplain,
html[data-theme] body.set-done #wordExample,
html[data-theme] body.set-done #wordFamily,
html[data-theme] body.set-done .word-actions,
html[data-theme] body.set-done .input-wrapper,
html[data-theme] body.set-done #combo,
html[data-theme] body.set-done .message,
html[data-theme] body.set-done #learnToast,
html[data-theme] body.set-done .game-card > #restart,
html[data-theme] body.set-done .stats--strip {
  display: none;
}

html[data-theme] body.set-done .result-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

html[data-theme] .result-panel__title {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

html[data-theme] .result-panel__best {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

html[data-theme] .result-panel__diff,
html[data-theme] .result-panel__cat,
html[data-theme] .result-panel__level,
html[data-theme] .result-panel__tomorrow {
  margin: 4px 0 0;
  color: var(--ink-3);
  font-size: 13px;
  text-align: left;
}

html[data-theme] .result-panel__tomorrow b {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

html[data-theme] .result-panel__diff--up { color: var(--ok); }
html[data-theme] .result-panel__diff--down { color: var(--ink-2); }

/* 数字は1行の等幅 */
html[data-theme] .result-panel__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0 0 10px;
}

html[data-theme] .result-panel__grid > div {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

html[data-theme] .result-panel__grid span {
  display: inline;
  color: var(--ink-3);
  font-size: 12px;
}

html[data-theme] .result-panel__grid strong {
  color: var(--ink);
  font-family: var(--font-num-ui);
  font-variant-numeric: lining-nums proportional-nums;
  font-size: 14px;
  font-weight: 600;
}

/* 語チップ */
html[data-theme] .word-chips {
  gap: 6px;
  margin: 8px 0 0;
}

@media (pointer: coarse) {
  html[data-theme] .word-chips {
    gap: 8px; /* 36px のチップの間隔。brand.css の coarse 規則は読み込み順でここに負けるので同じ値を置く */
  }
}

html[data-theme] .word-chips__title {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}

html[data-theme] .word-chip,
html[data-theme] .word-chip--learned,
html[data-theme] .word-chip--recovered,
html[data-theme] .word-chip--failed {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-room);
  background: var(--paper-3);
  color: var(--ink);
  box-shadow: none;
}

html[data-theme] .word-chip:hover {
  border-color: var(--line-2);
  background: var(--paper-2);
}

html[data-theme] .word-chip b {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

html[data-theme] .word-chip small {
  color: var(--ink-3);
  font-size: 12px;
}

html[data-theme] .word-chip--failed b {
  color: var(--signal-ink);
}

/* 60 秒の終わりのパネル: この回に答えた語を段ごとに（群の題は目盛り＋段の名前 = .rank は brand.css。js/game.js renderRankGroups）。
   語チップは長い訳でも箱をはみ出さない（中で折り返す。語数のセットの語チップの寸法は変えない） */
html[data-theme] .rank-groups__title {
  margin: 14px 0 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

html[data-theme] .rank-group .word-chips__title {
  display: flex;
  align-items: center;
}

html[data-theme] .rank-group .word-chip {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

html[data-theme] .rank-group .word-chip small {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 語チップの中の変化（初めて／上がった／下がった／時間がかかった）。文字だけ（矢印・記号・色の信号は使わない） */
html[data-theme] .word-chip__move {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

/* 段が動いた語の行（語数のセットの完了パネル・Challenge／Daily の結果）と、同じ日の 2 回目では上がらないことの注記 */
html[data-theme] .rank-moves,
html[data-theme] .rank-groups__note {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  text-align: left;
  overflow-wrap: anywhere;
}

html[data-theme] .rank-groups__note {
  color: var(--ink-3);
  font-size: 12px;
}

/* 明日の予定・週の目標 */
html[data-theme] .result-panel__tomorrow {
  margin-top: 12px;
  color: var(--ink-2);
}

html[data-theme] .result-panel__goal {
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
}

html[data-theme] .result-panel__goal {
  color: var(--ok);
}

/* 操作: 主は墨の塗り、副は罫線 */
html[data-theme] .result-panel__actions {
  gap: 8px;
  margin-top: 14px;
}

html[data-theme] .result-panel__action {
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-room);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  box-shadow: none;
}

html[data-theme] .result-panel__action:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}

html[data-theme] .result-panel__action--ghost {
  border-color: var(--line-2);
  background: transparent;
  color: var(--ink);
}

html[data-theme] .result-panel__action--ghost:hover {
  background: var(--paper-3);
  border-color: var(--line-2);
  color: var(--ink);
}

/* ===== カード下: セッションの数字を1行に（正解 3 ・ 思い出せず 1 ・ 今日 20） ===== */
html[data-theme] .stats--strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 0;
  margin: 10px 0 16px;
  color: var(--ink-3);
  font-size: 12px;
}

html[data-theme] .stats--strip .stat-card {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme] .stats--strip .stat-card + .stat-card::before {
  content: "・";
  margin: 0 6px;
  color: var(--ink-4);
}

html[data-theme] .stats--strip .stat-card span {
  display: inline;
  color: var(--ink-3);
  font-size: 12px;
}

html[data-theme] .stats--strip .stat-card strong {
  display: inline;
  margin: 0;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

html[data-theme] .stats--strip .stat-card strong.stat-pulse {
  animation: none;
}

html[data-theme] .stats--strip .stat-card__sub {
  display: block;
  margin-top: 4px;
  margin-left: 4px;
  color: var(--ok);
  font-size: 12px;
  font-weight: 700;
}

html[data-theme] .stats--strip .stat-card__sub:empty {
  display: none;
}

/* 出し分け（game.css の body.mode-study 規則より詳細度を上げて書き直す）:
   Study = 正解・思い出せず・今日。Challenge/Daily = 正解・思い出せず・ミスタイプ・速度・ベスト。
   残り時間は盤面の #bigTimer にあるので出さない */
html[data-theme] body.mode-study .stats--strip .stat-card--challenge,
html[data-theme] body.mode-study .stats--strip .stat-card--miss,
html[data-theme] body:not(.mode-study) .stats--strip .stat-card--study,
html[data-theme] .stats--strip .stat-card--time {
  display: none;
}

/* 390 でも 1 行に収める: 区切りの余白を詰め、ベストは結果パネルにあるので出さない */
@media (max-width: 560px) {
  html[data-theme] .stats--strip {
    gap: 2px 0;
    font-size: 12px;
  }
  html[data-theme] .stats--strip .stat-card + .stat-card::before {
    margin: 0 4px;
  }
  html[data-theme] .stats--strip .stat-card--challenge:has(#bestScore) {
    display: none;
  }
  /* 結果パネルの 4 枚（スコア・正確さ・最長・経験値）を 1 行に収める */
  html[data-theme] .result-panel__grid {
    gap: 2px 10px;
  }
  html[data-theme] .result-panel__grid strong {
    font-size: 13px;
  }
}

/* ===== 動きを減らす設定 ===== */
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .learn-stamp,
  html[data-theme] .learn-toast,
  html[data-theme] .queue-chip--recalled {
    animation: none;
    opacity: 1;
  }
  html[data-theme] .game-card--recalled,
  html[data-theme] .game-card--failed,
  html[data-theme] .game-card--learned {
    box-shadow: none;
  }
}

/* 発音・ヒントが全部 hidden のときは行の余白も消す（旧 game.css の規則の置き換え） */
html[data-theme] .word-tools:not(:has(> :not([hidden]))) {
  margin: 0;
}