/* =========================================================
   ブロックがくしゅう / スタイル
   配慮方針:
   - 背景は白ではなくクリーム（まぶしさ・文字のにじみを減らす）
   - UDフォントを最優先で指定
   - 行間ひろめ、文字おおきめ、タップ領域は最低 56px
   - 動くものは正解時のみ。待機中はアニメを出さない
   ========================================================= */

:root{
  --paper:#F4ECD8;      /* 背景クリーム */
  --paper-2:#EADFC4;
  --ink:#3A3226;        /* 文字 */
  --ink-soft:#7A6C55;
  --line:#D6C7A5;

  --grass:#6FA84B;
  --grass-d:#4E7C33;
  --dirt:#8B5E3C;
  --dirt-d:#6A4429;
  --stone:#9A9A94;
  --stone-d:#6E6E68;
  --iron:#C9A227;
  --iron-d:#9A7A17;
  --gold:#E8B923;
  --dia:#4FC3D9;
  --dia-d:#2E93A8;
  --danger:#C0563F;

  --radius:10px;
  --tap:56px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"UD デジタル 教科書体 NK-R","UD Digi Kyokasho NK-R","BIZ UDPGothic",
              "Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4",
              "Yu Gothic UI","Meiryo",sans-serif;
  font-size:18px;
  line-height:1.9;
  letter-spacing:.04em;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
}
/* 設定でONにできる読みやすさ強化 */
body.pref-bigtext{font-size:21px}
body.pref-noanim *{animation:none !important;transition:none !important}

#app{max-width:720px;margin:0 auto;min-height:100%;position:relative}

.screen{display:none;padding:16px 16px 40px}
.screen.is-active{display:block}
.screen-flat{padding-left:0;padding-right:0}
.screen-flat > .bar{margin:0 16px}

/* ---------- 共通バー ---------- */
.bar{
  display:flex;align-items:center;gap:12px;
  padding:8px 0 14px;
}
.bar h2{font-size:19px;margin:0;flex:1;text-align:center;
  word-break:keep-all;line-break:strict}
.bar-spacer{width:52px}
.bar-btns{display:flex;gap:6px;flex:none}

/* ---------- ボタン（ブロック風） ---------- */
.btn{
  font:inherit;font-weight:700;color:#fff;
  background:var(--stone);
  border:none;border-bottom:5px solid var(--stone-d);
  border-radius:var(--radius);
  padding:14px 20px;min-height:var(--tap);
  cursor:pointer;
}
.btn:active{transform:translateY(3px);border-bottom-width:2px}
.btn-sm{padding:8px 14px;min-height:44px;font-size:15px;border-bottom-width:4px}
.btn-icon{padding:8px 12px;min-width:52px;font-size:20px}
.btn-xl{font-size:26px;padding:20px 44px;border-radius:14px}
.btn-grass{background:var(--grass);border-bottom-color:var(--grass-d)}
.btn-iron{background:var(--iron);border-bottom-color:var(--iron-d)}
.btn-danger{background:var(--danger);border-bottom-color:#8E3A28}
.btn-ghost{background:transparent;color:var(--ink-soft);border-bottom:none;font-weight:600}
.btn-tool{background:var(--paper-2);color:var(--ink);border-bottom-color:var(--line);
  flex:1;white-space:nowrap;font-size:16px;padding:14px 8px}

/* ---------- タイトル ---------- */
.title-wrap{text-align:center;padding-top:10vh}
.title-logo{display:flex;justify-content:center;gap:7px;margin-bottom:20px}
.tblock{
  width:64px;height:64px;display:grid;place-items:center;
  font-size:32px;font-weight:800;color:#fff;border-radius:7px;
  background-size:100% 100%;image-rendering:pixelated;
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.30), inset 0 3px 0 rgba(255,255,255,.22),
             0 4px 0 rgba(0,0,0,.18);
  text-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 8px rgba(0,0,0,.45);
}
.title-sub{font-size:22px;margin:0 0 34px;color:var(--ink-soft);font-weight:700}
.title-wrap .btn{display:block;margin:0 auto 14px}

/* ---------- 学年えらび ---------- */
.grade-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grade-card{
  border:none;border-radius:14px;padding:18px 14px;cursor:pointer;
  color:#fff;text-align:left;font:inherit;
  border-bottom:6px solid rgba(0,0,0,.28);
  display:flex;align-items:center;gap:14px;min-height:104px;
}
.grade-card:active{transform:translateY(3px);border-bottom-width:3px}
.gc-num{font-size:40px;font-weight:800;line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.gc-body{display:flex;flex-direction:column}
.gc-body b{font-size:17px}
.gc-body small{font-size:13px;opacity:.9;line-height:1.5}

/* ---------- ワールド ---------- */
.world-body{display:flex;flex-direction:column;gap:18px}
.subject-list{display:flex;flex-direction:column;gap:14px}
.subject-card{
  display:flex;align-items:center;gap:16px;text-align:left;
  font:inherit;color:#fff;border:none;border-radius:14px;
  padding:18px;cursor:pointer;border-bottom:6px solid rgba(0,0,0,.28);
  min-height:96px;
}
.subject-card:active{transform:translateY(3px);border-bottom-width:3px}
.s-kanji{background:#7B5EA7} .s-math{background:var(--grass)} .s-build{background:var(--dirt)}
.sc-icon{
  width:62px;height:62px;flex:none;display:grid;place-items:center;
  background:rgba(0,0,0,.18);border-radius:10px;font-size:30px;font-weight:800;
}
.sc-text{display:flex;flex-direction:column}
.sc-text strong{font-size:20px}
.sc-text small{font-size:14px;opacity:.9;line-height:1.5}

/* ---------- もちもの ---------- */
.inv-strip{display:flex;gap:8px;flex-wrap:wrap;padding:10px;background:var(--paper-2);border-radius:12px}
.inv-slot{
  display:flex;align-items:center;gap:7px;background:#FFFBF0;
  border:2px solid var(--line);border-radius:10px;padding:5px 11px 5px 6px;
  font-size:14px;font-weight:700;color:var(--ink);
}
.inv-slot b{margin-left:5px;font-size:16px}
.inv-slot canvas{display:block;flex:none}
.inv-cube{width:22px;height:22px;border-radius:4px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.22)}
.inv-pick .inv-slot{cursor:pointer;min-height:52px;font:inherit;font-size:14px;font-weight:700}
.inv-pick .inv-slot.is-sel{border-color:var(--grass);border-width:3px;background:#fff;
  box-shadow:0 0 0 3px rgba(111,168,75,.22)}
.inv-pick .inv-slot.is-empty{opacity:.42}

/* ---------- 漢字えらび ---------- */
.hint{color:var(--ink-soft);font-size:15px;margin:0 0 12px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{font:inherit;font-size:14px;font-weight:700;color:var(--ink-soft);
  background:var(--paper-2);border:none;border-bottom:4px solid transparent;
  border-radius:999px;padding:10px 16px;min-height:46px;cursor:pointer;white-space:nowrap}
.chip.is-on{background:var(--grass);color:#fff;border-bottom-color:var(--grass-d)}

.kanji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px}
.kanji-cell{
  aspect-ratio:1;font:inherit;font-size:34px;font-weight:700;color:var(--ink);
  background:#FFFBF0;border:3px solid var(--line);border-radius:10px;cursor:pointer;
  position:relative;display:grid;place-items:center;
}
.kanji-cell.is-ready{border-color:var(--grass)}
.kanji-cell.is-done::after{
  content:"★";position:absolute;right:4px;top:0;font-size:14px;color:var(--iron)
}
.kanji-cell.is-locked{opacity:.42;cursor:not-allowed}
.kanji-cell .kc-tag{position:absolute;left:4px;bottom:2px;font-size:10px;color:var(--ink-soft)}

/* ---------- 漢字れんしゅう ---------- */
.kp-head{flex:1;display:flex;align-items:center;justify-content:center;gap:12px}
.kp-char{font-size:34px;font-weight:700;line-height:1}
.kp-meta{display:flex;flex-direction:column;line-height:1.4}
.kp-meta b{font-size:15px}
.kp-meta small{font-size:13px;color:var(--ink-soft)}

.kp-stage{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 16px}
.kp-canvas-wrap{position:relative;width:min(92vw,420px);aspect-ratio:1}
#kpCanvas{width:100%;height:100%;display:block;background:#FFFBF0;
  border:4px solid var(--line);border-radius:12px;touch-action:none}
.kp-overlay{position:absolute;inset:0;display:grid;place-items:center;
  font-size:64px;font-weight:800;color:var(--grass);pointer-events:none}

.stroke-dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sdot{width:26px;height:26px;border-radius:50%;border:3px solid var(--line);
  background:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink-soft)}
.sdot.is-now{border-color:var(--grass);background:#EAF6E2;color:var(--grass-d)}
.sdot.is-ok{border-color:var(--grass);background:var(--grass);color:#fff}

/* 練習モードのタブ */
.mode-tabs{display:flex;gap:8px;padding:0 16px 12px}
.mtab{flex:1;font:inherit;font-size:15px;font-weight:700;color:var(--ink-soft);
  background:var(--paper-2);border:none;border-bottom:4px solid transparent;
  border-radius:10px;padding:12px 6px;min-height:48px;cursor:pointer;white-space:nowrap}
.mtab.is-on{background:#7B5EA7;color:#fff;border-bottom-color:#5B4380}

/* よみクイズ */
.read-quiz{padding:0 16px;text-align:center}
.read-quiz[hidden]{display:none}
.rq-char{font-size:120px;font-weight:700;line-height:1.2;
  background:#FFFBF0;border:4px solid var(--line);border-radius:14px;
  width:min(70vw,260px);aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.rq-ask{font-size:18px;font-weight:700;margin:16px 0}
.rq-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rq-choices .btn{font-size:19px;padding:16px 8px}
.rq-say{min-height:1.9em;font-weight:700;margin:12px 0 0}
.rq-say.warn{color:#B5701F}

.kp-stage[hidden],.kp-tools[hidden]{display:none}
.kp-say{margin:0;font-size:17px;font-weight:700;text-align:center;min-height:1.9em}
.kp-say.warn{color:#B5701F}
.kp-tools{display:flex;gap:10px;padding:14px 16px 0}

/* 採点シート */
.result-sheet{position:fixed;inset:0;background:rgba(58,50,38,.45);
  display:grid;place-items:end center;z-index:20}
.result-sheet[hidden]{display:none}
.kp-overlay[hidden]{display:none}
.rs-inner{width:100%;max-width:720px;background:var(--paper);
  border-radius:20px 20px 0 0;padding:20px 20px 28px;text-align:center}
.rs-stars{font-size:40px;letter-spacing:6px;color:var(--iron);min-height:52px}
.rs-score{font-size:46px;font-weight:800;line-height:1}
.rs-score small{font-size:18px;margin-left:4px}
.rs-breakdown{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:6px}
.rs-breakdown li{display:flex;justify-content:space-between;font-size:16px;
  background:#FFFBF0;border:2px solid var(--line);border-radius:8px;padding:8px 12px}
.rs-breakdown li b{font-weight:700}
.rs-breakdown li.bad b{color:#B5701F}
.rs-reward{font-size:17px;font-weight:700;margin-bottom:14px;min-height:1.9em}
.rs-btns{display:flex;gap:12px}
.rs-btns .btn{flex:1}

/* ---------- さんすう ---------- */
.mine-canvas{width:100%;max-width:720px;display:block;margin:0 auto;touch-action:none}
.q-area{padding:8px 16px 0;text-align:center}
.q-text{font-size:30px;font-weight:800;margin:6px 0 16px;letter-spacing:.08em}
.q-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.q-choices .btn{font-size:26px;padding:18px}
.q-say{min-height:1.9em;font-weight:700;margin:12px 0 0}
.q-say.warn{color:#B5701F}

/* ---------- 建築 ---------- */
.stage-wrap{position:relative}
.build-canvas{width:100%;max-width:720px;display:block;margin:0 auto;touch-action:none}
.stage-msg{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  margin:0;padding:8px 18px;border-radius:999px;white-space:nowrap;
  background:rgba(30,24,18,.82);color:#fff;font-size:15px;font-weight:700;
  opacity:0;pointer-events:none;transition:opacity .18s}
.stage-msg.show{opacity:1}

/* どうぐバー */
.tool-row{display:flex;gap:8px;padding:12px 16px 0}
.tool{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  font:inherit;font-size:13px;font-weight:700;color:var(--ink-soft);
  background:var(--paper-2);border:none;border-bottom:4px solid var(--line);
  border-radius:12px;padding:9px 2px;min-height:62px;cursor:pointer}
.tool:active{transform:translateY(2px);border-bottom-width:2px}
.tool .tool-ic{font-size:21px;line-height:1.1}
.tool.is-on{background:var(--grass);color:#fff;border-bottom-color:var(--grass-d)}
.tool.is-off{opacity:.4}
.tool[data-action="buildClear"]{color:var(--danger)}
.tool[data-action="buildClear"].is-off{color:var(--ink-soft)}

.inv-pick{margin:12px 16px 0}

/* かくにんダイアログ */
.confirm{position:fixed;inset:0;z-index:30;background:rgba(58,50,38,.5);
  display:grid;place-items:center;padding:20px}
.confirm[hidden]{display:none}
.confirm-box{background:var(--paper);border-radius:18px;padding:24px 22px;
  max-width:380px;width:100%;text-align:center}
.confirm-box p{font-size:19px;font-weight:700;margin:0 0 4px}
.confirm-box small{display:block;color:var(--ink-soft);font-size:14px;margin-bottom:20px}
.confirm-btns{display:flex;gap:12px}
.confirm-btns .btn{flex:1}

/* ---------- おうちの人へ（記録） ---------- */
.rep-note{font-size:14px;color:var(--ink-soft);line-height:1.7;margin:0 0 18px}
.rep-sec{margin-bottom:26px}
.rep-sec > h3{font-size:16px;margin:0 0 10px;padding-left:10px;border-left:5px solid var(--grass)}
.rep-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rep-card{background:#FFFBF0;border:2px solid var(--line);border-radius:12px;
  padding:12px 8px;text-align:center}
.rep-card b{display:block;font-size:26px;line-height:1.2}
.rep-card small{font-size:11.5px;color:var(--ink-soft);line-height:1.45;
  display:block;word-break:keep-all;line-break:strict}
.rep-bars{display:flex;flex-direction:column;gap:10px}
.rep-bar{display:grid;grid-template-columns:64px 1fr 46px;align-items:center;gap:10px;font-size:15px}
.rep-bar .track{display:block;height:16px;background:var(--paper-2);border-radius:8px;overflow:hidden}
.rep-bar .fill{display:block;height:100%;background:var(--grass);border-radius:8px}
.rep-bar .fill.low{background:#D9A03C}
.rep-bar em{font-style:normal;text-align:right;font-weight:700}
.rep-table{width:100%;border-collapse:collapse;font-size:15px}
.rep-table th,.rep-table td{border-bottom:1px solid var(--line);padding:9px 6px;text-align:left}
.rep-table th{font-size:13px;color:var(--ink-soft);font-weight:600}
.rep-table td:first-child{font-size:22px;width:2.4em}
.rep-table td.num{text-align:right;font-weight:700}
.rep-empty{background:#FFFBF0;border:2px dashed var(--line);border-radius:12px;
  padding:24px;text-align:center;color:var(--ink-soft)}
.rep-days{display:flex;gap:6px;align-items:flex-end;height:90px}
.rep-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.rep-day .col{width:100%;background:var(--grass);border-radius:4px 4px 0 0;min-height:3px}
.rep-day small{font-size:10px;color:var(--ink-soft)}

/* ---------- 設定 ---------- */
.settings-list{display:flex;flex-direction:column;gap:10px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#FFFBF0;border:2px solid var(--line);border-radius:12px;padding:12px 16px;min-height:var(--tap)}
.set-row span{font-size:16px}
.set-row small{display:block;font-size:13px;color:var(--ink-soft);line-height:1.5}
.toggle{width:70px;height:38px;border-radius:19px;border:none;background:var(--line);
  position:relative;cursor:pointer;flex:none}
.toggle::after{content:"";position:absolute;top:4px;left:4px;width:30px;height:30px;
  border-radius:50%;background:#fff;transition:left .15s}
.toggle.on{background:var(--grass)}
.toggle.on::after{left:36px}
.settings-foot{margin-top:28px;text-align:center}
.credits{margin-top:26px;font-size:12px;line-height:1.9;color:var(--ink-soft)}
.credits a{color:var(--ink-soft)}

@media (max-width:400px){
  .grade-grid{grid-template-columns:1fr}
  .q-text{font-size:26px}
}