/* 全画面共通のスタイル: 色・影・幅のトークンと、全画面で同じ基本の見た目。
   各HTMLの<head>で、ページ固有の<style>より前に読む。トークンの意味と使い分けは docs/UI_UX.md。
   ダークは3つの書き方を揃えて持つ: OSの設定(@media)・data-theme="dark"・data-theme="light"(明示的にライト)。 */

:root{
  /* --sub は文字に使ってよい最も薄いグレー(--bg2の上で5.15:1)。これより薄い色を文字に使わない */
  --bg1:#f7f5ff; --bg2:#eef2ff; --card-bg:#ffffff; --text:#1f2430; --sub:#5f6675;
  /* --accent1/--accent2 は塗り(白文字を載せる)用の濃さ。文字に使う紫は --link */
  --accent1:#6a55e6; --accent2:#d01f6f; --accent3:#34d399; --accent4:#fbbf24;
  --link:#6a55e6;
  --border:#e5e7eb; --shadow: 0 10px 30px rgba(80,60,180,0.12);
  --danger:#ef4444; --success:#22c55e;
  /* 内容の最大幅は全画面で1つ(画面を移ってもカードの左右の端が動かない)。長文を読むノートだけ--reading-width */
  --content-width: 680px; --reading-width: 760px;
  --hl:#fff3b0;
  /* 今日のリングの色(engine.jsのringSvgが参照)。進行中=紫、達成=金、目標を超えた分=緑 */
  --ring:#7c6bf0; --ring-done:#f59e0b; --ring-bonus:#10b981;
  /* トピックの★の色。ライトは#fbbf24だと白地で読めないため濃い金にする */
  --star:#d97706; --star-off:#cbd5e1;
  /* 立体ボタンの下の帯(engine.jsのensurePressStylesが参照) */
  --btn-depth:rgba(0,0,0,.22);

  /* 文字サイズは7段だけ。12pxより小さい文字は使わない。階層は微妙なサイズ差ではなく段と太さで作る */
  --fs-xs:0.75rem;    /* 12px 画像のクレジット・キーの印・補助のラベル */
  --fs-sm:0.8125rem;  /* 13px 補足文・メタ情報・チップ */
  --fs-base:1rem;     /* 16px 本文・ボタン(M) */
  --fs-md:1.125rem;   /* 18px カードの問題文・答え・ボタン(L) */
  --fs-lg:1.375rem;   /* 22px 画面とセクションの見出し */
  --fs-xl:1.75rem;    /* 28px リザルトの大きな数字・リングの数字 */
  --fs-hero:3rem;     /* 48px 演出のバナー・空状態の絵文字 */
  /* 角丸は5段。xs=キーの印・細いバーなどの小物 / sm=チップ内の小物・小さいボタン / md=ボタン・入力欄・カード /
     lg=パネル・シート / pill=ピル型のチップ・トグル */
  --radius-xs:4px; --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px;
  /* 面の影は2段。card=カード・パネル / float=シート・固定バー・浮いているボタン */
  --shadow-card:var(--shadow);
  --shadow-float:0 12px 36px rgba(40,30,90,.22);
  /* 余白は4の倍数(新しく書くCSSから使う) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;

  /* ---- 色の役割(docs/UI_UX.md「色の役割表」)。画面側はこの役割のトークンだけを使い、色を直書きしない ---- */
  /* 次の一手(画面で1つの主ボタン・「次へ」「問題へ」などの進む操作) */
  --c-primary-1:#7059e8; --c-primary-2:#5b45d6;
  --c-primary:linear-gradient(135deg,var(--c-primary-1),var(--c-primary-2));
  /* 正解・覚えた。判定の瞬間だけに使う */
  --c-correct-1:#06855e; --c-correct-2:#047857; --c-correct-text:#047857;
  --c-correct:linear-gradient(135deg,var(--c-correct-1),var(--c-correct-2));
  /* 誤答。判定の瞬間だけに使う(答えを見る前の「わからない」には塗らない) */
  --c-wrong-1:#dc2626; --c-wrong-2:#b91c1c; --c-wrong-text:#dc2626;
  --c-wrong:linear-gradient(135deg,var(--c-wrong-1),var(--c-wrong-2));
  /* 情報・初見(ゲームの「✨予想してみよう」・初見で外れたときの答え) */
  --c-info-text:#2563eb;
  /* ご褒美だけ(リング達成・★・🏆・クリア)。操作のボタンの背景には使わない */
  --c-reward:var(--ring-done);
  /* ご褒美の色で文字を書くとき(白地で金の#f59e0bは2.15:1で読めない) */
  --c-reward-text:#92400e;
  /* 連続(🔥・コンボ) */
  --c-streak:#f97316;
  /* 選択中(トグルのON・セグメントの選択・フィルタの選択) */
  --c-selected:linear-gradient(90deg,var(--accent1),var(--accent2));
  /* 判定ではない選択のボタン(白い立体ボタン)の枠と帯 */
  --border-strong:#d4d0e6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg1:#12101c; --bg2:#191627; --card-bg:#211d33; --text:#f1eefc; --sub:#a7a3c0;
    --border:#332d4c; --shadow: 0 10px 30px rgba(0,0,0,0.5);
    --hl:#4a3f10;
    --ring:#a78bfa; --ring-done:#fbbf24; --ring-bonus:#34d399;
    --star:#fbbf24; --star-off:#4b4466;
    --btn-depth:rgba(0,0,0,.5);
    --c-correct-text:#34d399; --c-wrong-text:#f87171; --c-info-text:#93c5fd; --border-strong:#463e66;
    --link:#b4a5fb; --c-reward-text:#fbbf24;
  }
}
:root[data-theme="dark"]{
  --bg1:#12101c; --bg2:#191627; --card-bg:#211d33; --text:#f1eefc; --sub:#a7a3c0;
  --border:#332d4c; --shadow: 0 10px 30px rgba(0,0,0,0.5);
  --hl:#4a3f10;
  --ring:#a78bfa; --ring-done:#fbbf24; --ring-bonus:#34d399;
  --star:#fbbf24; --star-off:#4b4466;
  --btn-depth:rgba(0,0,0,.5);
  --c-correct-text:#34d399; --c-wrong-text:#f87171; --c-info-text:#93c5fd; --border-strong:#463e66;
  --link:#b4a5fb; --c-reward-text:#fbbf24;
}

*{ box-sizing:border-box; }
:focus-visible{ outline:2px solid var(--accent1); outline-offset:2px; }
/* ---- 役割ごとのボタンの色(学習・単元学習・模試・トップの今日の一問で共通) ----
   1段目(答えを見る前)の「わからない/わかる/答えを見る」は判定ではないので白い立体ボタンにし、色は文字だけに残す。
   2段目の採点で初めて誤答/正解の色を塗る。段が変わったことが色で分かり、K連打で採点まで飛ばしにくくする。
   ページ側の .act-btn{ border:none; color:#fff }・.d1-actions .act-btn より強くするため body と .act-btn を重ねて書く。 */
body .act-btn.act-dontknow, body .act-btn.act-know, body .act-btn.act-reveal{
  background:var(--card-bg); border:2px solid var(--border-strong); color:var(--text);
}
body .act-btn.act-dontknow{ color:var(--c-wrong-text); }
body .act-btn.act-know{ color:var(--c-info-text); }
body .act-btn.act-dontknow .kbd, body .act-btn.act-know .kbd, body .act-btn.act-reveal .kbd{
  background:var(--bg2); border-color:var(--border-strong); color:var(--sub);
}
body .act-btn.act-correct{ background:var(--c-correct); }
body .act-btn.act-wrong{ background:var(--c-wrong); }
body .act-btn.act-next{ background:var(--c-primary); }

/* ---- ボタンの大きさ(2026-10-16設計書のV2-2)。どのボタンも当たり判定は44px以上 ----
   新しく作るボタンは .btn + 大きさ(--l 56px / --m 48px / --s 44px) + 種類(--primary / --neutral / --ghost)で書く。
   既存のクラス(.toolbtn・.seg-btn など)はJSが要素を探すのに使うので名前は残し、大きさだけここで揃える。 */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:var(--radius-md);
  font-weight:700; cursor:pointer; text-decoration:none; line-height:1.3; }
.btn--l{ min-height:56px; padding:0 20px; font-size:var(--fs-md); }
.btn--m{ min-height:48px; padding:0 16px; font-size:var(--fs-base); }
.btn--s{ min-height:44px; padding:0 14px; font-size:var(--fs-sm); }
.btn--primary{ background:var(--c-primary); color:#fff; border:none; --lip:#3d2db0; }
.btn--neutral{ background:var(--card-bg); color:var(--text); border:2px solid var(--border-strong); --lip:var(--border-strong); }
.btn--ghost{ background:none; border:none; color:var(--link); }
body .toolbtn, body .seg-btn, body .fold-btn, body .link-btn{
  min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:4px; line-height:1.3;
}
body .icon-btn, body .g-menu{ min-width:44px; min-height:44px; }
body select, body .search-box{ min-height:44px; }
/* フィルタのチップ(.filter-btn)は1行に多数並ぶ密な並びなので、WCAG 2.5.8(AA)の24pxを下限にする(docs/UI_UX.md) */

/* ---- 画面の左上の「←」と右上のアイコンボタン(2026-10-16設計書のS-5)。どの画面からでも押す「戻る」を一番押しやすく ---- */
.nav-back, .nav-icon{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0;
  border-radius:var(--radius-pill); background:var(--card-bg); border:2px solid var(--border-strong); color:var(--text);
  font-size:var(--fs-md); font-weight:700; text-decoration:none; cursor:pointer; padding:0; }
.nav-back-label{ width:auto; padding:0 14px; font-size:var(--fs-sm); gap:4px; }

/* ---- 立体ボタンの帯(lip)。engine.jsのensurePressStylesが「0 var(--lip-h) 0 var(--lip)」で描き、押すと帯の高さぶん沈む ----
   帯は半透明の黒ではなく、面の色を暗くした同系色にする(灰色の台座に載って見えず、1つの塊が沈んで見える)。
   高さは大きいボタン4px・ツールバーなどの小さいボタン3px。 */
body .act-btn.act-correct{ --lip:#064e3b; }
body .act-btn.act-wrong{ --lip:#7f1d1d; }
body .act-btn.act-next, .start-btn, .read-cta, .review-btn, .continue-btn, .round-cta{ --lip:#3d2db0; }
.play-btn, .rs-primary, .restart-btn{ --lip:#4a1d7a; }
body .act-btn.act-dontknow, body .act-btn.act-know, body .act-btn.act-reveal, .quick-btn{ --lip:var(--border-strong); }
/* 白い2番手のボタン(毎回触る⚙️設定・🌐訳・↩️前のカード、模試の設定の選択など)にも帯を付け、主ボタンと同じ系統の押し心地にする */
body .toolbtn, body .seg-btn, body .fold-btn{
  border:2px solid var(--border-strong); --lip:var(--border-strong); --lip-h:3px; --press-glow:0 0 0 transparent;
}
body .toolbtn.active, body .seg-btn.active{ --lip:#4a1d7a; }

[hidden]{ display:none !important; }
/* 見出しの今日のリング(engine.jsのrenderRingMiniが20pxのSVGを描く)。描く前から場所を取り、読み込み後に行の高さが変わらないようにする */
.ring-mini{ min-height:20px; min-width:20px; }

/* ---- 読み込み中のスケルトン(2026-10-16設計書のS-3) ----
   「読み込み中…」の文字ではなく、完成形と同じ位置・大きさの灰色の線で待たせる(届いたら中身だけが入れ替わる)。
   光はゆっくり左右に流すだけ。OSの「視差効果を減らす」では止める。 */
.sk{ display:block; height:0.95em; margin:0.35em 0; border-radius:var(--radius-xs);
  background:linear-gradient(90deg, var(--border) 25%, var(--bg2) 37%, var(--border) 63%); background-size:400% 100%;
  animation:skShine 1.4s ease-in-out infinite; }
.sk-inline{ display:inline-block; vertical-align:middle; margin:0; }
@keyframes skShine{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
@media (prefers-reduced-motion: reduce){ .sk{ animation:none; } }

/* 🔥: 今日まだ解いていない間は灰色(engine.jsのrenderFlames/igniteFlames) */
.flame{ display:inline-block; transition:filter .3s ease, opacity .3s ease; }
.flame-off{ filter:grayscale(1); opacity:.5; }

/* 📌 あとで見る山に保存済みの印(カードの左上。engine-fx.jsのtogglePin) */
.pin-mark{ position:absolute; top:12px; left:14px; font-size:var(--fs-md); line-height:1; pointer-events:none; }

/* ---- 「なぜこのカード?」の理由のチップ(engine.jsのreasonChipHtml) ---- */
.reason-chip{ display:inline-block; margin-left:8px; padding:1px 8px; border-radius:var(--radius-pill); vertical-align:1px;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:0; line-height:1.5; }
.reason-new{ background:var(--bg2); color:var(--sub); }
.reason-missed{ background:rgba(220,38,38,.10); color:var(--c-wrong-text); }
.reason-due{ background:rgba(37,99,235,.10); color:var(--c-info-text); }
.reason-young{ background:rgba(4,120,87,.10); color:var(--c-correct-text); }
.d1-topic .reason-chip{ margin:0 6px 0 0; }

/* ---- 区切りのセグメントバー(学習・単元学習。engine-deck.jsのrenderSegmentsが.segを並べる) ---- */
.seg-row{ width:100%; max-width:var(--content-width); margin:0 auto 18px; display:flex; align-items:center; gap:10px; }
.seg-bar{ flex:1; display:flex; gap:4px; height:8px; }
.seg{ flex:1; border-radius:var(--radius-pill); background:var(--border); transition:background .2s ease, transform .2s ease; }
.seg.ok{ background:var(--c-correct-1); }
.seg.ng{ background:var(--c-wrong-1); opacity:.45; }
.seg.done{ background:var(--c-primary); }
.seg.now{ box-shadow:inset 0 0 0 2px var(--accent1); }
.seg-note{ flex-shrink:0; font-size:var(--fs-xs); font-weight:700; color:var(--c-reward-text); }
.seg-note:empty{ display:none; }
@media (prefers-reduced-motion: reduce){ .seg{ transition:none; } }

/* ---- ページ間のつながり(View Transitions、2026-10-16設計書のH-5) ----
   同一オリジンの画面の移動を白い切り替えではなくクロスフェードにする。未対応のブラウザでは普通に移動するだけ。
   主ボタン(トップ)と行き先の最初の面(学習のカード・単元学習の「読む」・模試の設定)は同じ名前 main-card を持ち、
   主ボタンが広がって行き先の面になる。名前は1画面に1つだけ(重なると遷移が無効になる)なので各画面のCSSで付け、
   トップ側は押したときだけ付ける(index.html)。
   ✨演出OFFのときは engine.js が pageswap/pagereveal で飛ばす。 */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation:none; } }
::view-transition-group(*){ animation-duration:.25s; animation-timing-function:ease-out; }

/* 画面の本体の幅(中身が狭いと<main>が縮み、模試の設定パネルが300px幅になっていた)。ゲームのフィード(main.feed)は全画面なので除く */
body > main:not(.feed){ width:100%; max-width:var(--content-width); }

body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  background: linear-gradient(160deg,var(--bg1),var(--bg2));
  color:var(--text);
}