/*
  独自意匠（非交渉制約 #4: Tinder と酷似させない）。
  ホワイトテーマ基調。Tinder の赤〜オレンジ・グラデ／左右の丸ボタン意匠を避け、
  シアン＋藍紫のクール系アクセントと、角の効いたカード意匠を用いる。
  実際のスワイプUI/カードは Phase 2 で追加する。
*/
:root {
  --bg: #f6f8fc;          /* 明るい背景 */
  --bg-elev: #fbfcfe;     /* カード等の面（純白は平坦に見えるので地色側へ寄せる） */
  --fg: #131a2b;          /* 本文（濃紺グレー） */
  --fg-muted: #5c6a86;    /* 補助テキスト */
  --border: #e2e8f2;      /* 罫線・面の境界 */
  --accent: #12b3a4;      /* シアン系（白地でも視認できる濃度に調整） */
  --accent-2: #4f5dff;    /* 藍紫 */
  --danger: #e5484d;

  /* 祝祭の金（昇段・自己ベスト・ボーナス）。4色目のアクセントなのでトークン化し、
     ダークテーマでも必ず対になる値を持たせる（旧: 各所にハードコード） */
  --gold: #f5a623;        /* 枠・図表の線 */
  --gold-ink: #b8860b;    /* 金地に載る文字 */
  --gold-surface: #fff7e0;/* 金のピル面 */

  /* 画像の読込中／取得失敗プレースホルダ（旧: #e8edf6 / #dfe6f2 をハードコード） */
  --placeholder: #e8edf6;
  --placeholder-2: #dfe6f2;

  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
          "Noto Sans JP", sans-serif;

  /* イージング。ブラウザ既定の ease は「指定しなかった」の意なので使わない。
     --ease-pop だけがオーバーシュートを持ち、祝祭演出（スタンプ・紙吹雪・昇段）
     専用。ボタンやモーダルの状態変化には使わない。 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.12s;
  --dur-base: 0.2s;
  --dur-slow: 0.45s;

  /* 重なり順。その場限りの数値を避け、意味のある6段だけを使う */
  --z-deck: 1;
  --z-edge: 2;
  --z-confetti: 3;
  --z-tutorial: 5;
  --z-fx: 6;
  --z-overlay: 20;
  --z-zoom: 60;
  --z-toast: 100;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* キーボード・スイッチコントロール・外付けキーボードでの現在地。
   リングは遷移させない（フォーカスした瞬間に見えなければ意味がない）。
   Jelly UI の各要素は Shadow DOM 内のネイティブ button にフォーカスが入るため、
   ホスト側では :focus-within で拾う。 */
:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
jelly-button:focus-within,
jelly-icon-button:focus-within,
jelly-switch:focus-within,
jelly-chip:focus-within,
jelly-segmented:focus-within {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 999px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  /* 端末幅より広がる意匠のはみ出しを抑止。hidden は要素をスクロールコンテナ化して
     子孫の position:sticky を壊すため、対応ブラウザでは clip を優先させる
     （clip 非対応の古い WebView は上の hidden にフォールバックする） */
  overflow-x: hidden;
  overflow-x: clip;
}

.app { height: 100%; display: flex; }

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: max(2rem, env(safe-area-inset-top)) 1.5rem
           max(2rem, env(safe-area-inset-bottom));
  text-align: center;
  min-width: 0;            /* フレックス子の min-content 膨張を防ぐ */
}
.screen[hidden] { display: none; }

.brand__title {
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-2);
}

/* 呼びかけの一言。説明ではなく誘い文句なので、少し太く前に出す */
.brand__tagline { margin-top: 0.5rem; color: var(--fg-muted); font-size: 1.05rem; font-weight: 700; }

.btn {
  appearance: none;
  border: 0;
  border-radius: var(--radius);
  padding: 0.9rem 2.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.08s var(--ease-out), opacity 0.2s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.4; cursor: default; }

.btn--primary {
  color: #ffffff;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 18px rgba(79, 93, 255, 0.28);
}

/* タイトルの主役ボタン。高さと意匠は Jelly の size="large" が持ち、
   ここでは幅と「押してほしさ」の鼓動だけを担当する */
#btn-start { width: min(86%, 340px); }
#btn-start:not([disabled]) { animation: heroPulse 2.8s var(--ease-in-out) infinite; }
#btn-start:active { animation: none; }
@keyframes heroPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

.title-stats { color: var(--fg-muted); font-size: 0.85rem; }

.challenge-banner {
  background: var(--accent-2);
  color: #fff; font-weight: 700; font-size: 0.9rem;
  padding: 0.6rem 1.1rem; border-radius: 999px; cursor: pointer;
}

.btn--ghost {
  color: var(--accent-2);
  background: transparent;
  border: 1px solid var(--border);
  padding: 0.7rem 1.6rem;
  font-size: 0.95rem;
}

/* ===== 見抜きポイント（reveal）===== */
.hud__streak { color: var(--danger); font-weight: 800; }
.reveal-wrap { width: 100%; max-width: 360px; }
/* 正誤は「太い左帯」ではなく、枠の色と見出しの色で示す。
   4〜6px の片側ストライプは既視感が強く、情報量の割に主張しすぎる */
.reveal {
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-align: left;
}
.reveal[data-correct="0"] { border-color: var(--danger); }
.reveal__verdict { font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--accent); font-weight: 800; }
.reveal[data-correct="0"] .reveal__verdict { color: var(--danger); }
.reveal__prov { color: var(--fg-muted); font-size: 0.85rem; margin-bottom: 0.5rem; }
.reveal__tellhead { font-weight: 700; font-size: 0.8rem; color: var(--fg-muted); margin-bottom: 0.3rem; }
.tells { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.tell {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.8rem;
}
.reveal__report {
  appearance: none; border: 0; background: none;
  color: var(--fg-muted); font-size: 0.8rem; text-decoration: underline;
  cursor: pointer; padding: 0; font-family: inherit;
}
.reveal__continue { margin-top: 0.8rem; width: 100%; }

.boot-status { color: var(--fg-muted); font-size: 0.8rem; min-height: 1.2em; }

/* 言語切替 */
.lang { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg-muted); font-size: 0.85rem; }
.lang__select {
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--fg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
}

/* プロフィール入力（設定画面）とランキングの名前設定導線 */
.profile-name { width: 9.5rem; }
.ranking-setname {
  appearance: none;
  border: 1px dashed var(--accent-2);
  background: none;
  color: var(--accent-2);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.4rem 1rem;
  cursor: pointer;
}

/* ---- タイトル画面の言語スイッチャー（RTL時は inset-inline-end で左右反転） ---- */
.screen--title {
  position: relative;
  /* 主役画面なので上下にゆとりを持たせる（一覧系は下でむしろ詰める） */
  padding-block: max(3rem, env(safe-area-inset-top)) max(2.5rem, env(safe-area-inset-bottom));
  gap: 1.25rem;
}
.title-lang {
  position: absolute;
  top: max(0.9rem, env(safe-area-inset-top));
  right: 0.9rem;              /* inset-inline-end 非対応の旧Safari向けフォールバック */
  inset-inline-end: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  z-index: var(--z-tutorial);
}
.title-lang__icon { font-size: 0.95rem; }
.lang__select--title {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  max-width: 8.5rem;
  color: var(--fg-muted);
}

/* ===== ゲーム画面（デイリーも同レイアウト） ===== */
/* 画像を最大化: デッキが余白全域を使い、テキスト行と余白は最小限に */
.screen--game, .screen--daily {
  justify-content: flex-start;
  gap: 0.6rem;
  padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem
           max(0.9rem, env(safe-area-inset-bottom));
}

.hud {
  width: 100%;
  max-width: 640px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  color: var(--fg-muted);
}
.hud__score {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
}
.hud__quit {
  appearance: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--fg-muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

/* HUD 右側（サウンド/バイブのトグルアイコン＋スコア） */
.hud__right { display: inline-flex; align-items: center; gap: 0.45rem; }
.hud__icon {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.15rem;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.15s var(--ease-out), transform 0.08s var(--ease-out);
}
.hud__icon:active { transform: scale(0.9); }
.hud__icon--off { opacity: 0.3; filter: grayscale(1); }

/* デッキは残り画面全域（デスクトップは 640px まで）。カードが領域いっぱいに広がる */
.deck-root {
  position: relative;  /* チュートリアルオーバーレイの基準 */
  width: 100%;
  max-width: 640px;
  min-width: 0;
  flex: 1;
  min-height: 0;      /* フレックス内で縮小を許可（これが無いと溢れる） */
  display: flex;
}

/* absolute で deck-root 全面に展開。flex 子への height:100% は WebKit(iOS Safari)
   で 0 に解決されることがあるため使わない */
.deck {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

/* 左右の固定ラベル（Tinder の like/nope スタンプとは別意匠） */
.deck__edge {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-edge);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  opacity: 0.25;
  transition: opacity 0.12s var(--ease-out);
  pointer-events: none;
}
.deck__edge--left  { left: -0.25rem;  color: var(--accent);   border: 2px solid var(--accent); }
.deck__edge--right { right: -0.25rem; color: var(--accent-2); border: 2px solid var(--accent-2); }

/* inset ショートハンドは iOS Safari 14.5 未満で無効（カードが 0×0 で消える）→ 個別指定 */
.deck__stack { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.card {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(19, 26, 43, 0.12);
  overflow: hidden;
  touch-action: none;      /* Pointer Events でドラッグを制御 */
  will-change: transform;
  cursor: grab;
}
.card:active { cursor: grabbing; }
.card__img {
  width: 100%;
  height: 100%;
  background-color: var(--placeholder);   /* 読込中プレースホルダ（ブランク防止） */
  background-size: contain;        /* 全体を切らずに最大表示（判定対象を隠さない） */
  background-repeat: no-repeat;
  background-position: center;
  transition: filter 0.35s var(--ease-out);   /* LQIP→本画像のフェード（機能拡張⑤） */
}
.card__img--lqip { filter: blur(10px); transform: scale(1.04); }
.card__img--error {
  background-image: repeating-linear-gradient(
    45deg, var(--placeholder) 0 12px, var(--placeholder-2) 12px 24px);  /* 取得失敗の明示 */
}

.game__prompt { color: var(--fg-muted); font-size: 0.9rem; }

/* ヒント（リワード広告・機能拡張⑦） */
.hint-row { display: flex; align-items: center; gap: 0.6rem; min-height: 2rem; }
.btn--hint {
  background: transparent; border: 1px solid var(--accent-2); color: var(--accent-2);
  border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.85rem; font-weight: 700;
}
.hint-text { color: var(--fg); font-size: 0.9rem; }

.choices {
  width: 100%;
  max-width: 480px;   /* 拡大したデッキ幅とバランスを取る */
  display: flex;
  gap: 0.75rem;
}
.btn--choice {
  flex: 1 1 0;
  min-width: 0;            /* 収縮を許可し横あふれを防ぐ */
  padding: 0.9rem 1rem;    /* CTA の広い横パディング(2.4rem)を上書き */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--bg-elev);
  border: 2px solid var(--border);
  color: var(--fg);
}
.btn--real { border-color: var(--accent); color: var(--accent); }
.btn--ai   { border-color: var(--accent-2); color: var(--accent-2); }
.choice__arrow { opacity: 0.7; font-weight: 800; }

/* 2行（正誤+正体 / 世界の正答率）ぶんを常時確保し、回答ごとのレイアウト揺れを防ぐ */
.feedback { min-height: 2.5em; font-weight: 700; line-height: 1.3; }
.feedback[data-correct="1"] { color: var(--accent); }
.feedback[data-correct="0"] { color: var(--danger); }
.feedback small {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* ===== 結果画面 ===== */
.result__title { color: var(--fg-muted); font-size: 1rem; font-weight: 700; }
/* 主役は正答数（2026-07-30 点数から交代）。点数は基準を知らないと読めない絶対値のため
   ⭐付きの内訳へ降格し、直感的な「17/20 正解」「上位◯%」を前面に出す */
.result__detail {
  font-size: clamp(2.6rem, 13vw, 4rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
  line-height: 1.1;
  margin: 0;
}
.result__detail-sep { margin: 0 0.12em; font-size: 0.6em; font-weight: 700; color: var(--fg-muted); }
.result__detail-suffix { font-size: 0.32em; font-weight: 700; color: var(--fg-muted); margin-left: 0.25em; }
/* 点数グラフ: 今回 vs 自己ベストの横棒ペア。今回=アクセント（強調）、
   ベスト=ニュートラル（基準）。ラベルと数値を直接添えるので凡例不要 */
.result__bars {
  width: min(100%, 340px);
  margin: 0 auto;
  display: grid;
  row-gap: 0.55rem;
}
.rbar {
  display: grid;
  grid-template-columns: 5.5em 1fr 3.2em;
  align-items: center;
  column-gap: 0.5rem;
}
.rbar__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fg-muted);
  text-align: start;   /* RTL(ar)では右寄せになる */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rbar__track {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  overflow: hidden;
}
.rbar__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: var(--accent-2);
  transition: width 0.8s var(--ease-out);
}
.rbar--best .rbar__fill { background: var(--fg-muted); opacity: 0.45; }
.rbar__num {
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  text-align: end;   /* RTL(ar)では左寄せになる */
}

/* スタットカード: ラベル＋数値のタイル（最大連続/IQ）。
   文字の羅列より視線が迷わない。dl/dt/dd で意味も持たせる */
.result__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  width: min(100%, 340px);
  margin: 0 auto;
}
.result__stats .stat {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.55rem 0.4rem 0.6rem;
  text-align: center;
}
.result__stats dt {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fg-muted);
}
.result__stats dd {
  margin: 0.15rem 0 0;
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  line-height: 1.1;
}
.result__stats dd[data-dir="up"] { color: var(--accent); }
/* 振り返る/共有を横並びに（縦積みボタンの壁を減らす） */
.result__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  width: min(86%, 340px);
}
.result__actions jelly-button { flex: 1 1 0; min-width: 0; }
/* 「🌍 上位◯%」— サーバー採点の着信後にフェードイン（result.js が is-in を付与） */
.result__pct {
  color: var(--accent);
  font-weight: 800;
  font-size: 1.05rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.result__pct.is-in { opacity: 1; transform: none; }
.result__reward {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  font-weight: 700;
}
.result__reward .reward__icon { font-size: 1.3rem; }

/* 段位（評価の主軸）。昇段時は金ピルで祝う */
.result__rank { color: var(--fg); font-size: 0.9rem; font-weight: 700; }
.result__rank--up {
  color: var(--gold-ink);
  font-size: 1.05rem;
  background: var(--gold-surface);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.35rem 1rem;
}
.result__goal {
  color: var(--gold-ink);
  font-size: 0.9rem;
  font-weight: 700;
  background: var(--gold-surface);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
}

/* ===== メニュー（タイトル画面） ===== */
.menu-row { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.btn--menu { padding: 0.55rem 1rem; font-size: 0.88rem; color: var(--fg-muted); }

/* ===== ランキング／統計／設定 共通 ===== */
.screen--ranking, .screen--stats, .screen--settings, .screen--collection,
.screen--review {
  justify-content: flex-start;
  gap: 0.85rem;
  padding-top: max(1.25rem, env(safe-area-inset-top));
  overflow-y: auto;   /* 小型端末で内容が縦に溢れてもスクロールで全要素（戻る等）に到達可 */
}
.panel-title { color: var(--fg-muted); font-size: 1rem; font-weight: 700; }

/* タブ（デイリー / 全期間） */
.tabs { display: flex; gap: 0.5rem; }
.tab {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: 999px;
  padding: 0.45rem 1.2rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--fg-muted);
  cursor: pointer;
}
.tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  border-color: transparent;
}

/* ランキング表 */
.board {
  width: 100%;
  max-width: 420px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.board__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.board__rank { width: 2.2em; font-weight: 800; color: var(--fg-muted); text-align: right; }
.board__row--top .board__rank { color: var(--accent-2); }
.board__name {
  flex: 1;
  min-width: 0;
  text-align: left;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board__score { font-weight: 800; font-variant-numeric: tabular-nums; }
.board__score small { color: var(--fg-muted); font-weight: 400; margin-left: 0.3em; }
.board__row--you { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.board__row--you .board__name { color: var(--accent); font-weight: 800; }

/* 統計グリッド */
.stat-grid {
  width: 100%;
  max-width: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.stat {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem;
  text-align: left;
}
.stat__label { font-size: 0.75rem; font-weight: 700; color: var(--fg-muted); margin-bottom: 0.3rem; }
.stat__value { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* 設定リスト */
.settings-list {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-align: left;
}
.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.setting__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.setting__text small { color: var(--fg-muted); font-size: 0.75rem; }
.setting__value { color: var(--fg-muted); font-weight: 700; }

/* 押せる設定行（評価・問い合わせ）。button 要素なので既定の見た目を打ち消す */
.setting--action {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--fg);
  text-align: start;
  cursor: pointer;
  transition: transform 0.08s var(--ease-out), border-color 0.15s var(--ease-out);
}
.setting--action[hidden] { display: none; }
.setting--action:active { transform: scale(0.99); }
.setting--action:hover { border-color: var(--accent); }

/* トグルスイッチ（チェックボックス意匠） */
.switch {
  appearance: none;
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  cursor: pointer;
  transition: background 0.15s var(--ease-out);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(19, 26, 43, 0.25);
  transition: transform 0.15s var(--ease-out);
}
.switch:checked { background: linear-gradient(120deg, var(--accent), var(--accent-2)); }
.switch:checked::after { transform: translateX(20px); }

/* ===== 回答ジュース（fx.js / Phase A） ===== */
.fx-layer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: var(--z-fx);                 /* チュートリアル(5)より上・スワイプは透過 */
  pointer-events: none;
  overflow: visible;
}

/* ◯✕スタンプ */
/* 難問撃破（正解率40%以下を当てた時だけ出るレア演出） */
.fx-stamp--rare { color: var(--gold) !important; text-shadow: 0 0 26px rgba(245, 166, 35, 0.8); }
.fx-hard {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-fx);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--gold-ink);
  background: var(--gold-surface);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  white-space: nowrap;
  animation: fx-hard-pop 1.05s var(--ease-out) both;
  pointer-events: none;
}
@keyframes fx-hard-pop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.6); }
  18%  { opacity: 1; transform: translateX(-50%) scale(1.15); }
  32%  { transform: translateX(-50%) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.95); }
}

.fx-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   /* reduced-motion（animation無効）時の基準位置 */
  font-size: clamp(4rem, 24vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
  filter: drop-shadow(0 4px 14px rgba(19, 26, 43, 0.35));
  animation: fx-stamp 0.6s var(--ease-pop) both;
}
.fx-stamp--ok { color: var(--accent); }
.fx-stamp--ng { color: var(--danger); }
@keyframes fx-stamp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(-6deg); }
  28%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}

/* デッキ縁の正誤発光 */
.deck--ok .card, .deck--ng .card { transition: box-shadow 0.15s var(--ease-out); }
.deck--ok .card { box-shadow: 0 0 0 3px var(--accent), 0 12px 34px rgba(18, 179, 164, 0.4); }
.deck--ng .card { box-shadow: 0 0 0 3px var(--danger), 0 12px 34px rgba(229, 72, 77, 0.4); }

/* フローティングスコア（HUDへ吸い込まれる） */
.fx-float {
  position: absolute;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 1px 0 #ffffff, 0 3px 10px rgba(18, 179, 164, 0.4);
  transition: transform 0.5s var(--ease-in), opacity 0.5s var(--ease-out);
  will-change: transform;
}

/* 不正解の画面シェイク */
.fx-shake { animation: fx-shake 0.32s linear; }
@keyframes fx-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* コンボバッジ（3連続〜。5連続で金） */
.fx-combo {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 1rem;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 2px solid var(--accent-2);
  color: var(--accent-2);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 18px rgba(79, 93, 255, 0.3);
  white-space: nowrap;
}
.fx-combo--gold {
  border-color: transparent;
  background: var(--gold);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(245, 166, 35, 0.45);
}
.fx-combo--pop { animation: fx-combo-pop 0.3s var(--ease-pop); }
@keyframes fx-combo-pop {
  0% { transform: translateX(-50%) scale(1.35); }
  100% { transform: translateX(-50%) scale(1); }
}
.fx-combo--break { animation: fx-combo-break 0.45s var(--ease-in) both; }
@keyframes fx-combo-break {
  to { transform: translateX(-50%) translateY(26px) rotate(8deg); opacity: 0; }
}

/* 次カードのポップイン＋スタック感（§2.3） */
.card--enter { animation: card-in 0.18s var(--ease-out); }
@keyframes card-in {
  from { transform: scale(0.96); opacity: 0.6; }
  to   { transform: scale(1); opacity: 1; }
}
.deck__stack::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 14px;
  bottom: -7px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 0;                 /* カード(--z-deck)の下に「次のカードの角」を見せる */
}
.card { z-index: var(--z-deck); }

@media (prefers-reduced-motion: reduce) {
  .fx-stamp, .fx-shake, .fx-combo--pop, .fx-combo--break, .card--enter,
  .fx-hard { animation: none !important; }
  .fx-float { transition: none !important; }
  /* 無限に往復する手のガイドとトーストの飛び込みも止める。
     無限アニメは前庭障害のある人に最も強く効くので、止め漏らしは事故になる */
  .tutorial__hand { animation: none !important; }
  .toast { animation: none !important; transition: opacity var(--dur-slow) var(--ease-out) !important; }
  .toast--hide { transform: translateX(-50%) !important; }
}

/* ===== トースト通知（画面上部・自動フェード） ===== */
.toast {
  position: fixed;
  top: max(1.2rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  max-width: min(88vw, 420px);
  background: var(--accent-2);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(79, 93, 255, 0.35);
  text-align: center;
  pointer-events: none;
  animation: toast-in 0.35s var(--ease-out);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.toast[hidden] { display: none; }
.toast--hide { opacity: 0; transform: translateX(-50%) translateY(-14px); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
}

/* ===== タイトル画面イントロ演出（初回のみ・app--intro を app.js が外す） ===== */
/* タイトルがズームインで着地 → グラデーションが走る → 各要素が順に登場 */
.app--intro .brand__title {
  animation: intro-title 0.75s var(--ease-out) both;
}
.app--intro .brand__tagline { animation: intro-rise 0.45s var(--ease-out) 0.6s both; }
.app--intro .challenge-banner,
.app--intro .title-stats     { animation: intro-rise 0.45s var(--ease-out) 1.1s both; }
.app--intro #btn-start       { animation: intro-pop 0.5s var(--ease-out) 0.9s both; }
.app--intro #btn-daily       { animation: intro-pop 0.5s var(--ease-out) 1.05s both; }
.app--intro .menu-row        { animation: intro-rise 0.45s var(--ease-out) 1.2s both; }
.app--intro .boot-status     { animation: intro-fade 0.6s var(--ease-out) 1.4s both; }

@keyframes intro-title {
  0%   { opacity: 0; transform: scale(1.7); filter: blur(10px); }
  55%  { opacity: 1; filter: blur(0); }
  78%  { transform: scale(0.965); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes intro-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-pop {
  0%   { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes intro-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* OSの「視差効果を減らす」設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .app--intro .screen--title *, .app--intro .brand__title { animation: none !important; }
}

/* ===== 初回チュートリアル（1・2問目の操作ガイド） ===== */
/* コンテナは pointer-events:none でスワイプを通しつつ、
   ガイド要素自体はタップ可能（タップで閉じる） */
.tutorial {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: var(--z-tutorial);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1rem;
  pointer-events: none;
  text-align: center;
}
.tutorial[hidden] { display: none; }
.tutorial > * { pointer-events: auto; cursor: pointer; }
.tutorial--bottom { justify-content: flex-end; padding-bottom: 1.25rem; }

.tutorial__hand {
  font-size: 2.2rem;
  filter: drop-shadow(0 2px 6px rgba(19, 26, 43, 0.4));
  animation: tut-swipe 1.6s var(--ease-in-out) infinite;
}
@keyframes tut-swipe {
  0%, 100% { transform: translateX(-30px) rotate(-8deg); }
  50%      { transform: translateX(30px) rotate(8deg); }
}

.tutorial__row { display: flex; gap: 1.2rem; }
.tutorial__chip {
  background: #ffffff;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(19, 26, 43, 0.25);
  animation: tut-pop 0.3s var(--ease-out);
}
.tutorial__chip--real { color: var(--accent);   border: 2px solid var(--accent); }
.tutorial__chip--ai   { color: var(--accent-2); border: 2px solid var(--accent-2); }

.tutorial__bubble {
  max-width: 280px;
  background: rgba(19, 26, 43, 0.85);
  color: #ffffff;
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(19, 26, 43, 0.35);
  animation: tut-pop 0.3s var(--ease-out);
}
@keyframes tut-pop {
  from { opacity: 0; transform: scale(0.92); }
}

/* ============================================================
   Phase B/C/E/F/G — カジュアル化の追加意匠
   ============================================================ */

/* ---- タイトル: チップ（ストリーク／レベル）＋Tips ---- */
.title-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
}
.chip--streak { color: var(--danger); border-color: rgba(229, 72, 77, 0.4); }
.chip--level {
  color: #fff; border-color: transparent;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
}
.title-tip {
  color: var(--fg-muted);
  font-size: 0.82rem;
  max-width: 320px;
  line-height: 1.4;
}
.title-updated { color: var(--fg-muted); font-size: 0.75rem; opacity: 0.85; }

/* ===== 正答率の推移グラフ（成績画面・SVG） ===== */
.acc-chart { width: 100%; max-width: 420px; }
.acc-chart:empty { display: none; }
.acc-chart__svg {
  width: 100%;
  height: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.acc-grid { stroke: var(--border); stroke-width: 1; }
.acc-axis { fill: var(--fg-muted); font-size: 8px; }
.acc-world { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 4; }
.acc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.acc-dot { fill: var(--accent); }
.acc-dot--last { fill: var(--accent-2); }
.acc-chart__legend { display: block; margin-top: 4px; color: var(--fg-muted); font-size: 0.75rem; }

/* ===== 見極めレポート（成績画面・progress.js renderBreakdown） ===== */
.breakdown {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.breakdown:empty { display: none; }
.bd-row { display: flex; align-items: center; gap: 0.6rem; }
.bd-row__label {
  flex: none;
  width: 7.2rem;
  text-align: start;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-row__track {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.bd-row__track i { display: block; height: 100%; border-radius: 999px; }
.bd-fill--good { background: var(--accent); }
.bd-fill--mid  { background: var(--gold); }
.bd-fill--bad  { background: var(--danger); }
.bd-fill--comp { background: var(--accent-2); }   /* コンプリート率（進捗の意味なので青系） */
.bd-row__value {
  flex: none;
  width: 4.4rem;
  text-align: end;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--fg);
}
.bd-row__value small { color: var(--fg-muted); font-weight: 400; margin-inline-start: 4px; }
.bd-verdict {
  margin: 0.2rem 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-2);
}

/* ===== 振り返り（結果→出題一覧・review.js） ===== */
.review-list {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.review-row {
  appearance: none;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: start;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.45rem;
  cursor: pointer;
}
/* 正誤は行末の ◯✕（.review-row__mark）が既に担っているので、
   枠は全周を薄く色づけるだけにして片側ストライプをやめる */
.review-row--ok { border-color: var(--accent); }
.review-row--ng { border-color: var(--danger); }
.review-row__thumb {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background-color: var(--placeholder);
  background-size: cover;
  background-position: center;
}
.review-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-row__label { font-weight: 700; font-size: 0.9rem; color: var(--fg); }
.review-row__body small {
  color: var(--fg-muted);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-row__mark { flex: none; font-weight: 800; font-size: 1.15rem; }
.review-row--ok .review-row__mark { color: var(--accent); }
.review-row--ng .review-row__mark { color: var(--danger); }

/* タップ拡大は zoom.js の共通ピンチズームオーバーレイ（.imgzoom）へ移行（2026-08-01） */
:root[data-theme="dark"] .review-row__thumb { background-color: #222c3f; }

/* ネイティブ広告スロット（結果画面・Android）。実体はネイティブビューのオーバーレイで、
   この div は「位置座標の基準」と「レイアウト上の場所取り」を担う */
.native-slot {
  width: min(100%, 360px);
  height: 132px;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px dashed var(--border);
}

/* ---- モード選択（スピード／エンドレス） ---- */
.modes-row { display: flex; gap: 0.6rem; }
.btn--mode {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0.65rem 1.1rem;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.mode__icon { font-size: 1.1rem; }

/* ---- デイリーボタンのバッジ（未挑戦=! / 完了=✓） ---- */
.btn--daily { position: relative; }
.daily-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-2);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(19, 26, 43, 0.25);
}
.daily-badge--done { background: var(--accent); }
.daily-badge--urgent { background: var(--danger); animation: badge-pulse 1.1s var(--ease-in-out) infinite; }
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}

/* ---- スピードモード: 制限時間バー ---- */
.speed-bar {
  width: 100%;
  max-width: 640px;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.speed-bar[hidden] { display: none; }
.speed-bar > i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: left center;
}
.speed-bar.speed-bar--run > i {
  animation: speed-drain var(--speed-ms, 5000ms) linear forwards;
}
@keyframes speed-drain {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ---- ボーナス最終問: 金枠＋×2チップ ---- */
.bonus-chip {
  align-self: center;
  background: var(--gold);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(245, 166, 35, 0.4);
}
.bonus-chip[hidden] { display: none; }
.deck-root.is-bonus .card {
  box-shadow: 0 0 0 3px var(--gold), 0 12px 30px rgba(245, 166, 35, 0.4);
}
.fx-float--bonus { color: var(--gold); font-size: 1.8rem; }

/* ---- 結果画面: NEW RECORD ＋ ビルドアップ ＋ 紙吹雪 ---- */
.result__record {
  background: var(--gold);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(245, 166, 35, 0.5);
  animation: record-pop 0.5s var(--ease-pop);
}
.result__record[hidden] { display: none; }
@keyframes record-pop {
  0% { opacity: 0; transform: scale(0.5) rotate(-6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.result__percentile { color: var(--accent-2); font-weight: 800; font-size: 0.95rem; }
.result__countdown { color: var(--fg-muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }

/* ビルドアップ: 各要素が順に登場（タップで .result--enter を外して即完了） */
.result--enter .result__title { animation: r-rise 0.4s var(--ease-out) both; }
.result--enter .result__detail { animation: r-pop 0.5s var(--ease-pop) 0.2s both; }
.result--enter .result__reward { animation: r-pop 0.5s var(--ease-pop) 0.9s both; }
.result--enter .result__bars { animation: r-rise 0.4s var(--ease-out) 1.3s both; }
.result--enter .result__stats { animation: r-rise 0.4s var(--ease-out) 1.45s both; }
.result--enter .result__rank { animation: r-pop 0.5s var(--ease-pop) 1.7s both; }
.result--enter .result__goal { animation: r-pop 0.5s var(--ease-pop) 1.85s both; }
.result--enter #btn-replay,
.result--enter .result__actions,
.result--enter #btn-result-home { animation: r-rise 0.4s var(--ease-out) 1.9s both; }
@keyframes r-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes r-pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }

.confetti { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; z-index: var(--z-confetti); }
.confetti > i {
  position: absolute;
  top: -12px;
  width: 9px; height: 14px;
  opacity: 0.9;
  animation: confetti-fall 2.4s linear forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(-10px) rotate(0); opacity: 1; }
  100% { transform: translateY(105vh) rotate(540deg); opacity: 0.4; }
}

/* ---- 統計: AI鑑定IQ カード ＋ バッジ棚 ---- */
.iq-card {
  width: 100%; max-width: 420px;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  text-align: center;
}
.iq-card[hidden] { display: none; }
.iq-card__label { font-size: 0.8rem; font-weight: 700; opacity: 0.9; }
.iq-card__value { font-size: 2.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.iq-card__level { font-size: 0.85rem; font-weight: 700; opacity: 0.95; }

.stats-subhead {
  width: 100%; max-width: 420px;
  text-align: left; color: var(--fg-muted);
  font-size: 0.82rem; font-weight: 700; margin-top: 0.3rem;
}
.badge-grid {
  width: 100%; max-width: 420px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.badge {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.2rem;
  text-align: center;
}
.badge__icon { font-size: 1.5rem; line-height: 1.2; }
.badge__name { font-size: 0.62rem; color: var(--fg-muted); margin-top: 0.15rem; line-height: 1.2; }
.badge--locked { opacity: 0.5; }
.badge--locked .badge__icon { filter: grayscale(1); }

/* ---- 見破りコレクション（図鑑） ---- */
.collection-progress { color: var(--fg-muted); font-weight: 700; font-size: 0.9rem; }
.collection-grid {
  width: 100%; max-width: 460px;
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 4px;
  align-content: start;
}
.collection-cell {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: var(--placeholder) center / cover no-repeat;
  border: 1px solid var(--border);
}

@media (prefers-reduced-motion: reduce) {
  .result__record, .result--enter .result__title, .result--enter .result__stats,
  .result--enter .result__bars,
  .result--enter .result__detail, .result--enter .result__reward,
  .result--enter .result__rank, .result--enter .result__goal,
  .result--enter #btn-replay, .result--enter .result__actions,
  .result--enter #btn-result-home, .daily-badge--urgent, .confetti > i,
  #btn-start:not([disabled]),
  .nextup--enter, .nextup--enter .nextup-card,
  .speed-bar.speed-bar--run > i { animation: none !important; }
  /* 項目は forwards で現れる作りなので、アニメ停止時は初期の透明を打ち消す */
  .nextup--enter .nextup__item { animation: none !important; opacity: 1 !important; }
  /* スピードバーは reduced 時も機能上は縮む必要があるため線形遷移で代替 */
  .speed-bar.speed-bar--run > i { transition: transform var(--speed-ms, 5000ms) linear; transform: scaleX(0); }
  /* 上位%と棒グラフは遷移なしで即時表示（transition は animation:none では消せない） */
  .result__pct { transition: none; }
  .rbar__fill { transition: none; }
}

/* ============================================================
   Phase D — エンドレス復活オファー（リワード広告）
   ============================================================ */
.screen--game { position: relative; }   /* オーバーレイの基準 */
.continue-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 20, 32, 0.62);
  padding: 1.5rem;
  animation: continue-fade 0.2s var(--ease-out);
}
.continue-overlay[hidden] { display: none; }
@keyframes continue-fade { from { opacity: 0; } }
.continue-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(19, 26, 43, 0.45);
  animation: record-pop 0.35s var(--ease-out);
}
.continue__title { font-weight: 800; font-size: 1.2rem; color: var(--fg); }
.continue__streak { color: var(--fg-muted); font-size: 0.9rem; }

/* ============================================================
   初回クリア後のモード提案（nextup.js）
   ============================================================ */
.screen--result { position: relative; }   /* オーバーレイの基準 */
.nextup-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 20, 32, 0.62);
  padding: 1.5rem;
}
.nextup-overlay[hidden] { display: none; }
.nextup-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 20px 50px rgba(19, 26, 43, 0.45);
}
.nextup__title { font-weight: 800; font-size: 1.2rem; color: var(--fg); }
.nextup__lead { color: var(--fg-muted); font-size: 0.85rem; }
.nextup__list { display: flex; flex-direction: column; gap: 0.5rem; }
.nextup__item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 1rem;
  text-align: start;
  cursor: pointer;
  transition: transform 0.08s var(--ease-out), border-color 0.15s var(--ease-out);
}
.nextup__item:active { transform: scale(0.98); }
.nextup__item:hover { border-color: var(--accent); }
.nextup__icon { font-size: 1.5rem; flex: none; }
.nextup__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.nextup__name { font-weight: 700; }
.nextup__desc { color: var(--fg-muted); font-size: 0.78rem; }
.nextup__go { color: var(--accent-2); font-weight: 800; flex: none; }

/* 登場演出: カードがせり上がり、各項目が少しずつ遅れて出る（--i は nextup.js が付与） */
.nextup--enter { animation: nextup-fade 0.25s var(--ease-out); }
.nextup--enter .nextup-card { animation: nextup-rise 0.4s var(--ease-out); }
.nextup--enter .nextup__item {
  opacity: 0;
  animation: nextup-item 0.34s var(--ease-out) forwards;
  animation-delay: calc(0.18s + var(--i) * 0.09s);
}
@keyframes nextup-fade { from { opacity: 0; } }
@keyframes nextup-rise { from { opacity: 0; transform: translateY(24px) scale(0.96); } }
@keyframes nextup-item {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Phase H — ダークテーマ（既定はライト。設定で light/dark/system）
   ============================================================ */
:root[data-theme="dark"] {
  --bg: #0f1420;          /* 濃紺の背景 */
  --bg-elev: #1a2233;     /* カード等の面 */
  --fg: #eef2fa;          /* 本文 */
  --fg-muted: #98a6c4;    /* 補助テキスト */
  --border: #2a3348;      /* 罫線・境界 */
  --accent: #2fd4c4;      /* シアン（暗背景で視認する明度に） */
  --accent-2: #7c88ff;    /* 藍紫（同上） */
  --danger: #ff6b6f;
  /* 金もダーク用に反転させる。ライトの淡い金地＋濃い金文字のままだと
     暗背景で浮いてコントラストも落ちるため、地を沈めて文字を明るくする */
  --gold: #f0b429;
  --gold-ink: #ffd479;
  --gold-surface: #3a2e12;
  --placeholder: #222c3f;
  --placeholder-2: #2a3550;
  color-scheme: dark;     /* ネイティブ select 等をダーク描画 */
}
/* 明示ライト指定（system→light 解決時も含む）。既定値と同一だが上書きの明確化 */
:root[data-theme="light"] { color-scheme: light; }

/* 画像プレースホルダは --placeholder トークンがダーク値を持つので個別上書きは不要。
   ただし deck.js が style 属性で直接 #e8edf6 を書く経路だけは残るため、そこだけ上書く */
:root[data-theme="dark"] .card__img[style*="e8edf6"] { background-color: var(--placeholder); }
/* チュートリアルの白チップはダークだとアクセント文字とコントラスト不足になるため面を暗く */
:root[data-theme="dark"] .tutorial__chip { background: var(--bg-elev); }

/* ============================================================
   Jelly UI（www/vendor/jelly.js・MIT・自己ホスト）
   ボタン/トグルの意匠と触感はライブラリ側が持つ。ここが持つのは
   「配置」と「ライブラリが定義される前／読めなかった場合の保険」だけ。
   ゲーム画面の判定ボタンとスワイプデッキは自前実装のまま（応答速度優先）。
   ============================================================ */
jelly-theme {
  display: contents;                     /* 未定義でもレイアウトを崩さない */
  --jelly-color-background-accent: var(--accent-2);
}
jelly-button { max-width: 100%; }
#btn-replay, #dr-share { width: min(86%, 340px); }
.modes-row jelly-button { flex: 1; }
/* 判定ボタン（実写／AI）。意匠は variant が持ち、ここは2つを均等に並べるだけ */
.j-choice { flex: 1 1 0; min-width: 0; }
/* 音・バイブが OFF のときは HUD アイコンを沈める（sfx.js が class を付け外し） */
.hud__icon--off { opacity: 0.35; filter: grayscale(1); }
/* Jelly のボタンは既存より背が高い。行数の多い結果系は余白を詰めて
   IQ・段位・次の目標が出そろっても1画面に収まるようにする */
.screen--result, .screen--dailyresult { gap: 1rem; }

/* :defined が付くまで（＝ESMが読めない環境では恒久的に）既存の意匠に見せる */
jelly-button:not(:defined) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  padding: 0.9rem 2.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 18px rgba(79, 93, 255, 0.28);
  cursor: pointer;
}
jelly-button:not(:defined)[variant="platinum"] {
  color: var(--accent-2);
  background: transparent;
  border: 1px solid var(--border);
  box-shadow: none;
  padding: 0.7rem 1.6rem;
  font-size: 0.95rem;
}
jelly-button:not(:defined)[disabled] { opacity: 0.4; cursor: default; }
jelly-switch:not(:defined) {
  display: inline-block;
  flex-shrink: 0;
  width: 62px; height: 34px;
  border-radius: 999px;
  background: var(--border);
}

/* ============================================================
   「生きているUI」— 全画面の登場演出と常時アイドルアニメ（2026-07-31）
   任天堂のゲームを見本に、静止した瞬間を作らない。ただし階層は守る:
   主役（はじめる・スコア・段位）ほど大きく動き、脇役は気配程度に留める。
   実装は CSS のみ（display:none→表示 でアニメが再スタートする性質を利用。
   JS 変更なし＝OTA の CSS チャネルで配信できる）。
   ・タイトル/ゲーム/結果画面は既存の intro／card-in／result--enter が担当。
     ここで足すのはそれ以外の画面の登場ステージングと、全画面のアイドル演出
   ・無限ループ系は末尾の reduced-motion ガードで必ず停止
   ============================================================ */

/* ---- 汎用キーフレーム ---- */
@keyframes amb-child-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes amb-row-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes amb-pop-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
/* ロゴの浮遊（ゆっくり上下＋僅かな傾き） */
@keyframes amb-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(-1deg); }
}
/* 「時々思い出したように身震いする」ウィグル。大半は静止＝うるさくならない */
@keyframes amb-wiggle {
  0%, 86%, 100% { transform: rotate(0deg); }
  88%  { transform: rotate(-12deg); }
  92%  { transform: rotate(9deg); }
  96%  { transform: rotate(-4deg); }
}
/* 矢印の「さそい」ナッジ */
@keyframes amb-nudge-l {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-4px); }
}
@keyframes amb-nudge-r {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
/* 炎・ボーナスの鼓動 */
@keyframes amb-flame {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.08); }
  60%      { transform: scale(0.98); }
  75%      { transform: scale(1.05); }
}
/* ヒントの呼吸（明滅しすぎない範囲） */
@keyframes amb-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}
/* 光沢スイープ（IQカード・自己ベスト帯） */
@keyframes amb-sheen {
  0%       { transform: translateX(-130%) skewX(-18deg); }
  22%, 100%{ transform: translateX(130%)  skewX(-18deg); }
}
/* タイトル背景の色玉ドリフト */
@keyframes amb-drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6vmin, -8vmin) scale(1.15); }
}
@keyframes amb-drift-b {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(-7vmin, 6vmin) scale(0.95); }
}

/* ---- 画面登場ステージング（パネル系6画面・直下の子を階段状に） ----
   result/dailyresult…既存 result--enter が担当 / title…intro が担当 /
   game…下で HUD と判定ボタンだけ個別に。:where で詳細度を0に抑え、
   既存の個別アニメ（continue-fade 等）と衝突させない */
:where(.screen--dailyresult, .screen--review, .screen--ranking,
       .screen--stats, .screen--collection, .screen--settings) > * {
  animation: amb-child-in 0.38s var(--ease-out) both;
}
:where(.screen--dailyresult, .screen--review, .screen--ranking,
       .screen--stats, .screen--collection, .screen--settings) > :nth-child(2) { animation-delay: 0.05s; }
:where(.screen--dailyresult, .screen--review, .screen--ranking,
       .screen--stats, .screen--collection, .screen--settings) > :nth-child(3) { animation-delay: 0.10s; }
:where(.screen--dailyresult, .screen--review, .screen--ranking,
       .screen--stats, .screen--collection, .screen--settings) > :nth-child(4) { animation-delay: 0.15s; }
:where(.screen--dailyresult, .screen--review, .screen--ranking,
       .screen--stats, .screen--collection, .screen--settings) > :nth-child(5) { animation-delay: 0.20s; }
:where(.screen--dailyresult, .screen--review, .screen--ranking,
       .screen--stats, .screen--collection, .screen--settings) > :nth-child(6) { animation-delay: 0.25s; }
:where(.screen--dailyresult, .screen--review, .screen--ranking,
       .screen--stats, .screen--collection, .screen--settings) > :nth-child(7) { animation-delay: 0.30s; }
:where(.screen--dailyresult, .screen--review, .screen--ranking,
       .screen--stats, .screen--collection, .screen--settings) > :nth-child(n+8) { animation-delay: 0.34s; }

/* 拡大ビューはタップ即応が命。階段の遅延を外して素早くポップ */
.imgzoom { animation: amb-pop-in 0.22s var(--ease-out) both; animation-delay: 0s; }

/* ===== 画像ピンチズーム（zoom.js・2026-08-01） =====
   カード右下の🔍ボタン or カード上の2本指ピンチで開く。
   オーバーレイ上でピンチ/パン/ダブルタップ/ホイール。 */
.deck__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: var(--z-edge);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(19, 26, 43, 0.45);
  color: #ffffff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: transform 0.12s var(--ease-out);
}
.deck__zoom:active { transform: scale(0.88); }

.imgzoom {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* inset は iOS<14.5 非対応のため使わない */
  z-index: var(--z-zoom);
  background: rgba(10, 14, 24, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overscroll-behavior: contain;
}
.imgzoom[hidden] { display: none; }
.imgzoom__img {
  max-width: 94vw;
  max-height: 82vh;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  pointer-events: none;     /* ジェスチャはオーバーレイが受ける */
}
.imgzoom__close {
  position: absolute;
  top: max(0.9rem, env(safe-area-inset-top));
  right: 0.9rem;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}
.imgzoom__caption {
  position: absolute;
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  max-width: 88vw;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  pointer-events: none;
}

/* ゲーム画面はラウンド開始のたびに HUD と判定ボタンが着地（カードは card-in が担当） */
.screen--game .hud     { animation: amb-child-in 0.32s var(--ease-out) both; }
.screen--game .choices { animation: amb-child-in 0.38s var(--ease-out) 0.08s both; }

/* ---- リスト・グリッドの行単位ステージング ----
   （JS が後から挿入する行も、挿入時にアニメが始まる） */
:where(.board__row, .setting, .review-row, .bd-row) {
  animation: amb-row-in 0.3s var(--ease-out) both;
}
:where(.board__row, .setting, .review-row, .bd-row):nth-child(2) { animation-delay: 0.04s; }
:where(.board__row, .setting, .review-row, .bd-row):nth-child(3) { animation-delay: 0.08s; }
:where(.board__row, .setting, .review-row, .bd-row):nth-child(4) { animation-delay: 0.12s; }
:where(.board__row, .setting, .review-row, .bd-row):nth-child(5) { animation-delay: 0.16s; }
:where(.board__row, .setting, .review-row, .bd-row):nth-child(6) { animation-delay: 0.20s; }
:where(.board__row, .setting, .review-row, .bd-row):nth-child(7) { animation-delay: 0.24s; }
:where(.board__row, .setting, .review-row, .bd-row):nth-child(n+8) { animation-delay: 0.28s; }

:where(.badge, .collection-cell, .stat-grid .stat) {
  animation: amb-pop-in 0.3s var(--ease-pop) both;
}
:where(.badge, .collection-cell, .stat-grid .stat):nth-child(2)  { animation-delay: 0.03s; }
:where(.badge, .collection-cell, .stat-grid .stat):nth-child(3)  { animation-delay: 0.06s; }
:where(.badge, .collection-cell, .stat-grid .stat):nth-child(4)  { animation-delay: 0.09s; }
:where(.badge, .collection-cell, .stat-grid .stat):nth-child(5)  { animation-delay: 0.12s; }
:where(.badge, .collection-cell, .stat-grid .stat):nth-child(6)  { animation-delay: 0.15s; }
:where(.badge, .collection-cell, .stat-grid .stat):nth-child(7)  { animation-delay: 0.18s; }
:where(.badge, .collection-cell, .stat-grid .stat):nth-child(8)  { animation-delay: 0.21s; }
:where(.badge, .collection-cell, .stat-grid .stat):nth-child(9)  { animation-delay: 0.24s; }
:where(.badge, .collection-cell, .stat-grid .stat):nth-child(10) { animation-delay: 0.27s; }
:where(.badge, .collection-cell, .stat-grid .stat):nth-child(11) { animation-delay: 0.30s; }
:where(.badge, .collection-cell, .stat-grid .stat):nth-child(n+12){ animation-delay: 0.33s; }

/* ---- タイトル画面のアイドル演出 ---- */
/* ロゴは常にゆっくり浮遊（初回は intro-title が優先され、終了後に引き継ぐ） */
.brand__title { animation: amb-float 4s var(--ease-in-out) infinite; }
/* 地球儀・モードアイコンは時々身震い（開始位相をずらして同期させない） */
.title-lang__icon { display: inline-block; animation: amb-wiggle 7s linear 1.5s infinite; }
.hero__icon       { display: inline-block; animation: amb-nudge-r 2.2s var(--ease-in-out) infinite; }
#btn-mode-speed .mode__icon   { display: inline-block; animation: amb-wiggle 5.2s linear 0.8s infinite; }
#btn-mode-endless .mode__icon { display: inline-block; animation: amb-wiggle 6.1s linear 2.6s infinite; }
/* ストリーク🔥は鼓動。今日の見抜きポイントは呼吸 */
#title-streak { animation: amb-flame 2.6s var(--ease-in-out) infinite; }
.title-tip    { animation: amb-breathe 4.5s var(--ease-in-out) infinite; }
/* 背景にアクセント2色の色玉をゆっくり漂わせる（ブラー塗りの radial なので低負荷） */
.screen--title { position: relative; isolation: isolate; }
.screen--title::before, .screen--title::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 52vmin; height: 52vmin;
  border-radius: 50%;
  pointer-events: none;
}
.screen--title::before {
  top: 6%; left: -14%;
  background: radial-gradient(circle, rgba(18, 179, 164, 0.16), transparent 68%);
  animation: amb-drift-a 16s var(--ease-in-out) infinite alternate;
}
.screen--title::after {
  bottom: 4%; right: -16%;
  background: radial-gradient(circle, rgba(79, 93, 255, 0.14), transparent 68%);
  animation: amb-drift-b 21s var(--ease-in-out) infinite alternate;
}

/* ---- ゲーム画面のアイドル演出 ---- */
/* 判定ボタンの矢印がスワイプ方向へさそう */
#btn-real .choice__arrow { display: inline-block; animation: amb-nudge-l 1.8s var(--ease-in-out) infinite; }
#btn-ai   .choice__arrow { display: inline-block; animation: amb-nudge-r 1.8s var(--ease-in-out) 0.9s infinite; }
/* ボーナス×2チップは登場ポップ→鼓動 */
.bonus-chip { animation: amb-pop-in 0.3s var(--ease-pop), amb-flame 1.9s var(--ease-in-out) 0.3s infinite; }

/* ---- 統計・結果のアイドル演出 ---- */
/* IQカードと自己ベスト帯に光沢が時々走る（面の上をハイライトが横断） */
.iq-card, .result__record { position: relative; overflow: hidden; }
.iq-card::after, .result__record::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 42%;
  left: 0;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
  animation: amb-sheen 4.6s linear 1s infinite;
}
.result__record::after { animation-duration: 3.2s; animation-delay: 0.6s; }
/* 獲得済みバッジは時々誇らしげに身震い（3拍子で位相をずらす） */
.badge:not(.badge--locked) .badge__icon { display: inline-block; animation: amb-wiggle 9s linear infinite; }
.badge:not(.badge--locked):nth-child(3n)   .badge__icon { animation-delay: 1.4s; }
.badge:not(.badge--locked):nth-child(3n+1) .badge__icon { animation-delay: 3.2s; }
.badge:not(.badge--locked):nth-child(3n+2) .badge__icon { animation-delay: 5.8s; }

/* ---- reduced-motion ガード（無限ループ系は全停止・登場系は即時表示） ---- */
@media (prefers-reduced-motion: reduce) {
  .brand__title, .title-lang__icon, .hero__icon, .mode__icon,
  #title-streak, .title-tip,
  .screen--title::before, .screen--title::after,
  .choice__arrow, .bonus-chip,
  .iq-card::after, .result__record::after,
  .badge:not(.badge--locked) .badge__icon,
  .screen--game .hud, .screen--game .choices, .imgzoom,
  :where(.screen--dailyresult, .screen--review, .screen--ranking,
         .screen--stats, .screen--collection, .screen--settings) > *,
  :where(.board__row, .setting, .review-row, .bd-row),
  :where(.badge, .collection-cell, .stat-grid .stat) {
    animation: none !important;
  }
}