/* =====================================================================
   themes.css — 3モード（rpg / outline / simple）のテーマと共通骨格
   - 色/角丸/影/余白は CSS変数で差し替え（:root[data-theme="…"]）。
   - 構造が違う部分は .rpg-only / .outline-only / .simple-only を DOM に置き、
     data-theme で display 制御（切替は CSS変数差替＋カード再描画のみ＝高速）。
   - 淡色は DASHBOARD_HANDOFF §5.6 に従い AA を満たすよう濃色化して採用。
   ===================================================================== */

/* ---------- 既定（simple ベースの中立値。data-theme 未設定でも成立） ---------- */
:root{
  --bg:#f4f2ed; --bg2:#ffffff; --panel:#ffffff; --line:#dcd8cf;
  --line-strong:#7d7a70;   /* 活性コントロールの枠（対 bg 3:1以上） */
  --focus:#12539f;         /* フォーカスリング（対 simple bg 6.8:1） */
  --text:#1d1d1b; --muted:#5c584c; --accent:#2f5d4f; --accent-ink:#ffffff;
  --radius:10px; --card-shadow:0 1px 3px rgba(0,0,0,.06);
  --header-text:#1d1d1b; --field:#ffffff;
  --fs:1;   /* もじの おおきさ倍率（data-textscale で差し替え。主要ラベルのみに掛ける） */
  /* アバター既定色（テーマで上書き可） */
  --av-skin:#f7d2b2; --av-hair:#5b4636; --av-outfit:#7fb0d6; --av-cheek:#f4a49c; --av-ink:#3a2f28;
}

/* ---------- もじの おおきさ（テーマと直交。CSS変数だけで効く＝再描画不要） ---------- */
:root[data-textscale="sm"]{ --fs:.9; }
:root[data-textscale="md"]{ --fs:1; }
:root[data-textscale="lg"]{ --fs:1.2; }
:root[data-textscale="xl"]{ --fs:1.4; }

/* ---------- simple（シンプル：クリーム地・罫線一覧・刺激最小） ---------- */
:root[data-theme="simple"]{
  --bg:#f4f2ed; --bg2:#faf9f6; --panel:#faf9f6; --line:#dcd8cf;
  --line-strong:#7d7a70; --focus:#12539f;
  --text:#1d1d1b; --muted:#5c584c; --accent:#2f5d4f; --accent-ink:#ffffff;
  --radius:4px; --card-shadow:none; --header-text:#1d1d1b; --field:#ffffff;
  --av-outfit:#8fb8a6;
}

/* ---------- outline（高学年：オフグレー地・枠＋押し込み影・落ち着き） ---------- */
:root[data-theme="outline"]{
  --bg:#eeece5; --bg2:#faf9f5; --panel:#faf9f5; --line:#c8c5bc;
  --line-strong:#7d7a70; --focus:#12539f;   /* focus 対 bg 6.4:1 */
  --text:#2c2a26; --muted:#5f5b52; --accent:#2c2a26; --accent-ink:#faf9f5;
  --radius:8px; --card-shadow:0 3px 0 #2c2a26; --header-text:#2c2a26; --field:#ffffff;
  --av-outfit:#b7a98d;
}

/* ---------- rpg（低学年：やさしいゲーム感・金枠・上キャラ/下教材） ---------- */
:root[data-theme="rpg"]{
  --bg:#160f09; --bg2:#241a11; --panel:#241a11; --line:#8a6a3a;
  --line-strong:#d9b26a; --focus:#f2d79c;   /* focus 対 bg 13.5:1 */
  --text:#f2e6cf; --muted:#cdb98f; --accent:#d9b26a; --accent-ink:#160f09;
  --radius:14px; --card-shadow:0 6px 18px rgba(0,0,0,.45);
  --header-text:#f2d79c; --field:#1b130b;
  --gold:#d9b26a; --gold-lit:#f2d79c; --good:#8fd2a0;
  --av-outfit:#c79a54; --av-hair:#4a3626;
}

/* =====================================================================
   共通骨格
   ===================================================================== */
body{
  margin:0; min-height:100%;
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI",Meiryo,sans-serif;
  padding: max(env(safe-area-inset-top),14px) 14px calc(env(safe-area-inset-bottom) + 28px);
}
:root[data-theme="rpg"] body{
  background:
    radial-gradient(120% 90% at 50% -10%, #241a11 0%, #160f09 55%, #0e0a06 100%) fixed;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
button{ font-family:inherit; cursor:pointer; }
.hidden{ display:none !important; }

.shell{ max-width:720px; margin:0 auto; }

/* モード固有パーツの出し入れ（既定は全部隠す→該当テーマだけ表示） */
.rpg-only, .outline-only, .simple-only{ display:none; }
:root[data-theme="rpg"] .rpg-only{ display:block; }
:root[data-theme="outline"] .outline-only{ display:block; }
:root[data-theme="simple"] .simple-only{ display:block; }

/* ---------- ヘッダ（ブランド＝しょくいんメニュー入口。長押し/Enter・Space） ---------- */
.top{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
#brand{ display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:6px 8px; color:inherit;
  -webkit-touch-callout:none; user-select:none; -webkit-user-select:none;
  touch-action:manipulation; min-height:48px; min-width:48px; }
#brand.holding{ opacity:.6; }
@media (prefers-reduced-motion: no-preference){ #brand{ transition:opacity .15s ease; } }
#brand img{ height:30px; width:auto; }
.top .title{ flex:1; min-width:0; margin:0; font-weight:800; font-size:calc(17px * var(--fs));
  color:var(--header-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.foot-staff{ display:block; margin-top:4px; font-size:12px; }

/* ---------- キャラ帯（上層） ---------- */
.charband{
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; box-shadow:var(--card-shadow);
}
.av-wrap{
  flex:none; width:84px; height:84px; border-radius:50%;
  background:var(--bg2); border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.tm-avatar{ width:100%; height:100%; display:block; }
.char-meta{ flex:1; min-width:0; }
.char-name{ font-weight:800; font-size:calc(18px * var(--fs)); color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.char-sub{ font-size:13.5px; color:var(--muted); margin-top:2px; }
.kisekae{
  margin-top:8px; min-height:48px; padding:10px 16px; border-radius:99px;
  border:1px dashed var(--line-strong); background:transparent; color:var(--muted); font-size:13px; font-weight:700;
}

/* simple: アバターは小さくヘッダ脇（帯は最小・罫線1本で区切る） */
:root[data-theme="simple"] .charband{
  border:none; border-bottom:1px solid var(--line); border-radius:0;
  padding:6px 2px 12px; box-shadow:none; background:transparent;
}
:root[data-theme="simple"] .av-wrap{ width:52px; height:52px; border-width:1px; }
:root[data-theme="simple"] .char-name{ font-size:calc(16px * var(--fs)); }

/* outline: 中サイズ・枠内 */
:root[data-theme="outline"] .av-wrap{ width:78px; height:78px; }

/* rpg: 大きく・金枠・上キャラ構図（中央寄せ＋ステータス） */
:root[data-theme="rpg"] .charband{ flex-direction:column; text-align:center; padding:18px 14px 16px; }
/* 浮遊アニメは既定オフ（§5.6 過刺激回避）。金枠の静的グローで特別感を出す。 */
:root[data-theme="rpg"] .av-wrap{
  width:112px; height:112px; border:3px solid var(--gold);
  box-shadow:0 0 0 4px rgba(217,178,106,.18), 0 0 22px rgba(217,178,106,.28), 0 8px 20px rgba(0,0,0,.5);
}
:root[data-theme="rpg"] .char-name{ color:var(--gold-lit); font-size:20px; }

/* ステータス帯（⭐＋レベル＋がんばった日数。保存済みデータで描画・3モード共通） */
/* ⭐は装飾グリフ＝固定サイズ。「レベル」「◯にち」はよむ文字＝--fsで拡大。全て nowrap。 */
.status-strip{ margin-top:8px; }
.stars{ font-size:18px; letter-spacing:3px; line-height:1; color:var(--muted); }  /* 空☆はmuted、⭐emojiは自前色 */
.statline{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin-top:4px; }
.lvl{ font-size:calc(13px * var(--fs)); font-weight:800; color:var(--text); white-space:nowrap; }
.days{ font-size:calc(13px * var(--fs)); color:var(--muted); white-space:nowrap; }
.pbar{ height:10px; border-radius:99px; background:#1b130b; border:1px solid var(--line);
  margin-top:8px; overflow:hidden; }
.pbar > i{ display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lit)); }
/* simple: 極小1行（⭐とレベルだけ。バー・日数なし） */
:root[data-theme="simple"] .status-strip{ margin-top:6px; }
:root[data-theme="simple"] .stars{ font-size:15px; }
:root[data-theme="simple"] .days{ display:none; }
/* 特大は「レベル ◯」と日数が1行に収まらない（375px幅で245px必要／枠225px）。
   文字を大きく読みたい設定なので、補助情報の日数を省いて1行を保つ。 */
:root[data-textscale="xl"] .days{ display:none; }
/* rpg: ⭐主役・中央・大きめ */
:root[data-theme="rpg"] .status-strip{ margin-top:12px; text-align:center; }
:root[data-theme="rpg"] .stars{ font-size:24px; }
:root[data-theme="rpg"] .statline{ justify-content:center; }

/* ---------- 教材リスト（中層） ---------- */
.materials{ margin-bottom:18px; }
.section-label{ font-size:calc(13px * var(--fs)); font-weight:800; color:var(--muted); margin:0 2px 10px; white-space:nowrap; }

/* rpg: クエスト風カード（縦積み） */
.q-list{ display:grid; gap:12px; }
.q-card{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--text); min-width:0;
  min-height:76px; padding:14px; border-radius:var(--radius);
  background:linear-gradient(180deg,#2a1f13,#1d150c);
  border:1px solid var(--gold); box-shadow:var(--card-shadow);
  transition:transform .12s ease;
}
.q-card:active{ transform:scale(.98); }
.q-icon{ flex:none; width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:30px; background:#160f09; border:1px solid var(--gold); }
.q-body{ flex:1; min-width:0; }
.q-name{ font-weight:800; font-size:calc(17px * var(--fs)); color:var(--gold-lit);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q-desc{ font-size:13.5px; color:var(--muted); line-height:1.5; margin-top:2px; }
.q-cta{ flex:none; font-size:13px; font-weight:800; color:var(--accent-ink); white-space:nowrap;
  background:var(--gold); border-radius:99px; padding:10px 12px; min-height:40px; display:flex; align-items:center; }
/* 非活性は filter を使わず配色だけで表現（テキストのコントラストを落とさない） */
.q-card.coming{ border-color:#5b4a2c; background:linear-gradient(180deg,#221a10,#181109); }
.q-card.coming .q-name{ color:#cdb98f; }
.q-card.coming .q-cta{ background:#3a2f1c; color:#cdb98f; }

/* outline: 枠＋押し込みボタンの行 */
.o-list{ display:grid; gap:12px; }
.o-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px; min-width:0;
  background:var(--panel); border:1.5px solid var(--text); border-radius:var(--radius);
}
.o-emoji{ flex:none; font-size:26px; width:40px; text-align:center; }
.o-body{ flex:1; min-width:0; }
.o-name{ font-weight:800; font-size:calc(16px * var(--fs)); color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.o-meta{ font-size:13.5px; color:var(--muted); margin-top:2px; }
.o-btn{
  flex:none; text-decoration:none; text-align:center; min-height:48px; padding:12px 16px; white-space:nowrap;
  font-weight:800; font-size:14px; border-radius:8px; border:1.5px solid var(--text);
  background:var(--accent); color:var(--accent-ink); box-shadow:0 3px 0 var(--text);
  transition:transform .06s ease, box-shadow .06s ease; display:flex; align-items:center;
}
.o-btn:active{ transform:translateY(3px); box-shadow:0 0 0 var(--text); }
.o-btn.coming{ background:var(--bg2); color:var(--muted); border-color:var(--line);
  box-shadow:none; cursor:default; }

/* simple: 罫線区切りの番号付き行 */
.s-list{ border-top:1px solid var(--line); }
.s-row{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 4px; min-width:0;
  border-bottom:1px solid var(--line); text-decoration:none; color:var(--text);
}
.s-num{ flex:none; width:26px; height:26px; border-radius:50%; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center; color:var(--accent-ink); background:var(--accent); }
.s-body{ flex:1; min-width:0; }
.s-name{ font-weight:700; font-size:calc(16px * var(--fs)); color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-desc{ font-size:13.5px; color:var(--muted); margin-top:1px; }
.s-arrow{ flex:none; font-size:18px; color:var(--accent); font-weight:800; }
.s-row:active{ background:var(--bg2); }
.s-row.coming{ color:var(--muted); }
.s-row.coming .s-num{ background:var(--line); color:var(--muted); }
.s-row.coming .s-name{ color:var(--muted); }
.s-tag{ flex:none; font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; }

/* ---------- 下層（せってい：3モード共通。テーマ差は CSS で付ける） ---------- */
.bottom{ margin-top:6px; }
.settings{ background:var(--panel); border:1.5px solid var(--text); border-radius:var(--radius); overflow:hidden; }
/* simple: 刺激最小＝枠を消して罫線のみ / rpg: 金枠 */
:root[data-theme="simple"] .settings{ border:0; border-radius:0; background:transparent; }
:root[data-theme="rpg"] .settings{ border:1px solid var(--gold); background:var(--panel); }
.settings h3{ margin:0; padding:12px 14px 8px; font-size:calc(13px * var(--fs)); font-weight:800; color:var(--text); white-space:nowrap; }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:48px; padding:8px 14px; border-top:1px solid var(--line); }
.set-row .lbl{ flex:1; min-width:0; font-size:calc(14px * var(--fs)); color:var(--text); white-space:nowrap; }
.toggle{ flex:none; min-height:48px; padding:10px 16px; border-radius:99px; font-size:13px; font-weight:800;
  border:1.5px solid var(--line-strong); background:var(--bg2); color:var(--muted); white-space:nowrap; }
/* サウンド（じゅんびちゅう）＝押せない非活性表示 */
.toggle.coming{ background:var(--bg2); color:var(--muted); border-color:var(--line); cursor:default; }

/* もじの おおきさ 4段階セグメント（2段組み） */
.set-row-stack{ display:block; padding:10px 14px 12px; }
.set-row-stack .lbl{ display:block; margin-bottom:8px; }
.seg4{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.seg4 button{ min-height:48px; padding:8px 4px; border-radius:10px;
  border:1.5px solid var(--line-strong); background:var(--bg2); color:var(--text);
  font-weight:800; font-size:13px; white-space:nowrap; }
.seg4 button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* simple / rpg 下層の控えめメッセージ */
.note{ font-size:13px; color:var(--muted); text-align:center; padding:8px 4px; }

/* ---------- フッタ ---------- */
.foot{ margin-top:22px; text-align:center; font-size:12px; color:var(--muted); }

/* ---------- トースト（きせかえ等「じゅんびちゅう」告知） ---------- */
.toast{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 20px); transform:translateX(-50%);
  background:#1d1d1b; color:#fff; font-size:13px; font-weight:700; padding:10px 16px; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.3); z-index:60; animation:tmtoast .2s ease; }
@keyframes tmtoast{ from{ opacity:0; transform:translate(-50%,10px);} to{ opacity:1; transform:translate(-50%,0);} }

/* ---------- アクセシビリティ ---------- */
/* フォーカスリングは二重（テーマ別 --focus ＋外周ハロー）でどの背景でも3:1以上に。 */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  box-shadow:0 0 0 8px rgba(255,255,255,.55);
  border-radius:6px;
}
:root[data-theme="rpg"] :focus-visible{ box-shadow:0 0 0 5px rgba(0,0,0,.55); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* モード切替シート */
.sheet-mask{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:70;
  display:flex; align-items:flex-end; justify-content:center; }
.sheet{ width:100%; max-width:720px; background:var(--bg2); color:var(--text);
  border-radius:16px 16px 0 0; padding:16px 16px calc(env(safe-area-inset-bottom) + 16px); }
.sheet h3{ margin:0 0 4px; font-size:16px; }
.sheet p{ margin:0 0 12px; font-size:13px; color:var(--muted); }
.sheet .opt{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:12px 14px;
  margin-bottom:8px; border-radius:12px; border:1.5px solid var(--line-strong); background:var(--panel);
  color:var(--text); font-size:15px; font-weight:700; text-align:left; }
.sheet .opt.active{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.sheet .opt .em{ font-size:22px; flex:none; }
.sheet .opt-text{ display:flex; flex-direction:column; min-width:0; }
.sheet .opt-name{ font-size:15px; }
.sheet .opt[aria-current="true"] .opt-name::after{ content:" ✓"; color:var(--accent); font-weight:900; }
.sheet .opt .d{ font-size:13px; font-weight:600; color:var(--muted); margin-top:2px; }
.sheet .close{ width:100%; min-height:48px; border-radius:12px; border:1.5px solid var(--line-strong);
  background:transparent; color:var(--muted); font-weight:800; font-size:14px; margin-top:4px; white-space:nowrap; }

/* PIN シート */
.sheet .pin-input{ width:100%; min-height:52px; font-size:20px; text-align:center; letter-spacing:6px;
  padding:12px 14px; border-radius:12px; border:1.5px solid var(--line-strong);
  background:var(--field); color:var(--text); margin-bottom:8px; }
.sheet .pin-err{ min-height:20px; margin-bottom:8px; font-size:13px; font-weight:700; color:#b3261e; }
:root[data-theme="rpg"] .sheet .pin-err{ color:#ffb4a2; }
.sheet .sheet-primary{ width:100%; min-height:48px; border-radius:12px; border:0;
  background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:15px; margin-bottom:8px; white-space:nowrap; }
.sheet .sheet-primary:disabled{ opacity:.5; cursor:default; }

/* しょくいんメニューの「ロックする」— 誤タップ防止に他項目と離し、色は控えめ */
.sheet .menu-lock{ width:100%; min-height:48px; border-radius:12px; border:1.5px solid var(--line-strong);
  background:transparent; color:var(--muted); font-weight:700; font-size:14px; margin-top:14px; margin-bottom:8px; white-space:nowrap; }
.sheet .opt-reset{ opacity:.95; }

/* しょくいんメニューの注記（実名を入れない旨など）。赤字の .pin-err は使わず muted で。 */
.sheet-note{ font-size:13px; color:var(--muted); margin:0 0 10px; }

/* =====================================================================
   きせかえシート（P2）
   ===================================================================== */
/* ⚠️ 既存バグ修正: .sheet に縦あふれ対策が無い。きせかえシートは小さい端末＋特大で
   画面より高くなり、モーダル中 body は overflow:hidden なので到達できなくなる。 */
.sheet{ max-height:88vh; overflow:auto; overscroll-behavior:contain; }

.ks-top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.ks-av{ width:72px; height:72px; flex:none; }
.ks-days{ margin:0; font-size:calc(13px * var(--fs)); color:var(--muted); font-weight:700; min-width:0; }

.ks-axis{ margin-bottom:12px; min-width:0; }
.ks-label{ margin:0 0 6px; font-size:calc(14px * var(--fs)); font-weight:800; }
.ks-cur{ font-weight:700; color:var(--muted); }

.ks-opts{ display:flex; flex-wrap:wrap; gap:8px; min-width:0; }   /* min-width:0 は必須（P3の教訓） */
.ks-opt{ min-height:48px; padding:10px 14px; border-radius:12px;
  border:1.5px solid var(--line-strong); background:var(--panel); color:var(--text);
  font-size:14px; font-weight:700; }        /* おすボタンの文字は --fs を掛けない（P3の決定） */
.ks-opt[aria-pressed="true"]{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.ks-opt[aria-pressed="true"]::after{ content:" ✓"; color:var(--accent); font-weight:900; }
.ks-opt.locked{ border-style:dashed; border-color:var(--line); color:var(--muted); }

.ks-colors .ks-opt{ width:48px; height:48px; padding:0; border-radius:50%;
  display:grid; place-items:center; font-size:14px; }
.ks-colors .ks-opt[aria-pressed="true"]{ box-shadow:0 0 0 3px var(--bg2), 0 0 0 5px var(--accent); }
.ks-colors .ks-opt[aria-pressed="true"]::after{ content:"✓"; color:#fff;
  text-shadow:0 0 3px rgba(0,0,0,.85); font-size:20px; }   /* 白+影で どの色の上でも読める */
.ks-colors .ks-opt.locked{ border-style:solid; }

/* 「おまかせ」は色ではなく形で見分ける（テーマ色と偶然かぶっても崩れない。P2_REVIEW §1） */
.ks-colors .ks-opt[data-val=""]{ position:relative; }
.ks-colors .ks-opt[data-val=""]::before{
  content:""; position:absolute; inset:3px; border-radius:50%;
  border:2px dashed var(--bg2); pointer-events:none;
}

/* きせかえボタンは実機能になったので「じゅんびちゅう」の破線をやめる */
.kisekae{ border-style:solid; border-color:var(--line-strong); color:var(--text); }