/* app.css — 全画面共通スタイル (DESIGN.md 3.9 / 12.4)
   基準幅: iPad横 1180px / スマホ縦 390px まで対応。最小文字14px・カード内15px以上 */

:root {
  /* OSのダークモードでUA既定色に引きずられないよう明示的にライト固定(設計は紙色ベース) */
  color-scheme: light;
  --board-reserve: 250px;   /* ヘッダー+タブバー+トレイ+余白 */
  --navy: #16233b;
  --navy2: #1f3050;
  --ink: #12203a;
  --paper: #f7f8fb;
  --line: #d9dfea;
  --accent: #2563c9;
  --accent2: #1a7f4e;
  --warn: #c9a227;
  --danger: #c2185b;
  --radius: 14px;
  --tap: 44px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* hidden属性は常に最優先。
   #overlay や .dialog-bg のように display を持つ要素は、この宣言が無いと
   hidden でも表示され続け、画面全体を覆って操作を奪う(2026-07-31 実機で発生) */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--paper); }
body {
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 16px; color: var(--ink); background: var(--paper);
  overscroll-behavior: none; touch-action: manipulation;
}
button { font-family: inherit; font-size: 16px; cursor: pointer; }
h1, h2, h3 { margin: 0 0 8px; }

/* ---------- ヘッダー ---------- */
#hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; background: var(--navy); color: #fff;
  position: sticky; top: 0; z-index: 30;
}
.hdr-ai { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 48px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: #fff;
}
.hdr-txt { min-width: 0; }
.hdr-name { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-goal { font-size: 13px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meters { display: flex; gap: 10px; margin-left: auto; }
.meter {
  background: rgba(255,255,255,.12); border-radius: 10px; padding: 6px 10px;
  display: flex; flex-direction: column; align-items: center; min-width: 84px;
}
.meter-k { font-size: 11px; opacity: .8; }
.meter-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.meter-v.roll { animation: roll .35s ease; }
@keyframes roll { from { transform: translateY(-8px); opacity: .2; } to { transform: none; opacity: 1; } }
.hdr-right { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  min-width: var(--tap); min-height: var(--tap); border: 0; border-radius: 12px;
  background: rgba(255,255,255,.14); color: #fff; font-size: 20px;
}

/* ---------- タブバー ---------- */
#tabbar { display: flex; gap: 6px; padding: 6px 12px; background: var(--navy2); position: sticky; top: 64px; z-index: 29; }
.tab {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px 10px 0 0;
  background: rgba(255,255,255,.12); color: #fff; font-weight: 700;
}
.tab.on { background: var(--paper); color: var(--ink); }
.tab.new { animation: pop .5s ease 2; }
@keyframes pop { 50% { transform: scale(1.12); } }

/* ---------- 共通 ---------- */
#main { padding: 12px; padding-bottom: 96px; }
section[data-screen] { max-width: 1180px; margin: 0 auto; }
.placeholder { padding: 60px 20px; text-align: center; color: #6b7890; }
.ph-title { font-size: 20px; font-weight: 700; }

/* S00 タイトル: 教室の開始画面。未実装プレースホルダと同じ見た目にしない */
.title-box { padding: 100px 20px; text-align: center; }
.title-main { font-size: 44px; font-weight: 800; color: var(--ink); letter-spacing: .02em; margin: 0 0 16px; }
.title-sub { font-size: 20px; font-weight: 700; color: var(--accent); margin-bottom: 40px; }
.title-wait { font-size: 17px; color: #5b6b82; }

.btn {
  min-height: var(--tap); padding: 10px 20px; border: 0; border-radius: 12px;
  background: var(--accent); color: #fff; font-weight: 700;
}
.btn.ghost { background: #fff; color: var(--ink); border: 2px solid var(--line); }
.btn.big { min-height: 60px; font-size: 20px; padding: 12px 28px; }
.btn:disabled { opacity: .4; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.card-note { font-size: 13px; color: #6b7890; }

#btn-help {
  position: fixed; right: 14px; bottom: 14px; z-index: 40;
  min-width: 96px; min-height: var(--tap); padding: 10px 16px;
  border: 0; border-radius: 22px; background: var(--danger); color: #fff; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

#toast {
  position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 60;
  background: rgba(18,32,58,.94); color: #fff; padding: 12px 18px; border-radius: 12px;
  font-weight: 700; max-width: 88vw; text-align: center;
}

#overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(8,12,22,.92); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px;
}
body.offline #hdr { box-shadow: inset 0 -3px 0 var(--warn); }

/* ---------- S01 ログイン ---------- */
.login-title { font-size: 26px; font-weight: 700; text-align: center; margin: 24px 0 18px; }
.name-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 720px; margin: 0 auto; }
.name-btn {
  min-height: 88px; border-radius: var(--radius); border: 2px solid var(--line);
  background: #fff; font-size: 22px; font-weight: 700;
}
.name-btn.seat { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,201,.15); }
.dialog-bg { position: fixed; inset: 0; background: rgba(10,16,30,.55); display: flex; align-items: center; justify-content: center; z-index: 55; }
.dialog { background: #fff; border-radius: 18px; padding: 24px; width: min(420px, 88vw); text-align: center; }
.dialog h2 { font-size: 22px; }

/* ---------- S02 アバター / S03 目標 ---------- */
.parts-row { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0; }
.part {
  min-width: 56px; min-height: 56px; border-radius: 12px; border: 2px solid var(--line);
  background: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.part.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,201,.15); }
.name-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.chip {
  min-height: 56px; padding: 10px 16px 8px; border-radius: 20px; border: 2px solid var(--line);
  background: #fff; font-size: 16px;
}
.chip.on { border-color: var(--accent); background: #eaf1fd; }

/* ---------- カードのルビ(漢字ポリシー第3次改定: 全学年・全端末で常時表示) ----------
   カードは漢字表記のまま出し、読みを <rt> で上に併記する。
   ルビ1行ぶんの高さを確保するため、カード系は min-height と padding-top を上乗せする。 */
ruby { ruby-position: over; -webkit-ruby-position: before; }
ruby rt {
  font-size: .6em; line-height: 1.15; color: #4a5a72; font-weight: 400;
  letter-spacing: 0; text-align: center;
}
.vcard, .tray-card, .chip, .test-btn, .slot { line-height: 1.5; }

/* ---------- S10 ルールタブ ---------- */
.slot-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 18px; margin: 12px 0; }
.slot {
  min-width: 140px; min-height: 64px; padding: 10px 14px; border-radius: 12px;
  border: 2px dashed var(--accent); background: #fff; font-size: 17px; font-weight: 700; color: var(--ink);
}
.slot.filled { border-style: solid; background: #eaf1fd; }
.slot.active { box-shadow: 0 0 0 4px rgba(37,99,201,.2); }
.slot.locked { border-color: var(--line); background: #eef1f6; color: #6b7890; }
.shelf { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px; }
.vcard {
  flex: 0 0 auto; min-width: 120px; min-height: 58px; padding: 12px 12px 10px;
  border-radius: 12px; border: 2px solid var(--line); background: #fff;
  font-size: 16px; text-align: left; line-height: 1.5;
}
.vcard:active { transform: scale(.97); }
.shelf-tabs { display: flex; gap: 6px; margin-top: 6px; }
.test-panel { margin-top: 18px; padding: 12px; background: #fff; border: 2px solid var(--line); border-radius: var(--radius); }
.test-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.test-btn { min-height: 56px; padding: 12px 14px 10px; border-radius: 12px; border: 2px solid var(--navy2); background: #fff; font-size: 16px; }
.test-btn.trap { border-color: var(--warn); }
.bubble { margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--navy); color: #fff; font-size: 18px; min-height: 56px; }
.bubble.robot { font-family: "Courier New", monospace; letter-spacing: .06em; }
.bubble-note { font-size: 13px; color: #6b7890; margin-top: 6px; }
.bubble-loop { margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: #fdf3e2; border: 2px solid var(--warn); }

/* ---------- S20 お手本ボード ---------- */
/* ボードは「ヘッダー+タブ+トレイ」を引いた高さに収める(iPad横820pxでトレイが画面外に出ないこと)。
   縦横比は wrap 側の aspect-ratio で保証し、canvas はそれに追従する(座標変換は rect 幅基準なので影響なし) */
.board-wrap {
  position: relative; margin: 0 auto; background: #fff;
  border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden;
  width: min(100%, calc((100dvh - var(--board-reserve)) * 1.6));
  aspect-ratio: 1024 / 640;
}
#board-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
/* テスト質問が出ているフェーズは、トレイ+テストパネルぶんの高さを追加で確保する */
section[data-screen="S20"].with-test .board-wrap { --board-reserve: 430px; }
.tray { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px; }
.tray-card {
  flex: 0 0 auto; min-width: 120px; min-height: 58px; padding: 12px 12px 10px; border-radius: 12px;
  border: 2px solid var(--line); background: #fff; font-size: 16px;
}
.tray-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,201,.15); }
.tray-card.used { opacity: .35; }
.skill-panel { position: fixed; inset: auto 0 0 0; background: #fff; border-top: 2px solid var(--line); padding: 14px; z-index: 45; max-height: 70vh; overflow: auto; }
.skill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.star { color: var(--warn); }

/* ---------- S21 学習演出 ---------- */
.count-num { font-size: 96px; font-weight: 800; font-variant-numeric: tabular-nums; }
.terminal { width: min(720px, 92vw); background: #05070d; border-radius: 12px; padding: 18px; font-family: "Courier New", monospace; color: #7CFC98; font-size: 15px; line-height: 1.9; }
.glow-edge { box-shadow: inset 0 0 0 6px rgba(124,252,152,.6); }

/* ---------- 応答表示(にてる度バー) ---------- */
.sim-bars { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sim-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sim-label { width: 120px; flex: 0 0 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-bar { flex: 1; height: 12px; background: #e7ebf2; border-radius: 6px; overflow: hidden; }
.sim-fill { height: 100%; background: var(--accent2); transition: width .6s ease; }
.sim-pct { width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .meters { width: 100%; margin: 6px 0 0; }
  #hdr { flex-wrap: wrap; }
  #tabbar { top: 0; }
  .name-grid { grid-template-columns: repeat(2, 1fr); }
  .sim-label { width: 88px; flex-basis: 88px; }
}