/* まるごと 漢字の 書き練習 — 画面
   盤面の CSS は もじ の おけいこ（shared/kana-app.css）と 同じ 値に そろえて ある
   （trace.js は #glyphPaths / #paths / #nums / #ink と --S・--pencil を 見る）。 */
:root{
  --paper:#fffdf7; --ink:#2f2b26; --line:#e9e0cc;
  --accent:#7c6bb0; --accent-dark:#6b59a3; --accent-soft:#f1eefa;
  --ok:#2e9e4f; --warn:#c07a1f; --ng:#d9534f;
  --glyph:#ece7f5; --path:#c9bfe6; --pathon:#7c6bb0;
  --pencil:#ef6f4b; --muted:#8a7f68;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{
  font-family:'Klee One','Yu Gothic','Hiragino Maru Gothic ProN',system-ui,sans-serif;
  background:var(--paper); color:var(--ink);
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  display:flex; flex-direction:column;
}

/* ---- うえの バー ---- */
header{
  display:flex; align-items:center; gap:.45rem; padding:.4rem .7rem;
  border-bottom:2px solid var(--line); min-height:3.4rem; flex:0 0 auto; background:#fff;
}
a.home{
  display:flex; align-items:center; justify-content:center; min-width:2.9rem; min-height:2.9rem;
  padding:0 .6rem; white-space:nowrap; font-size:.95rem; font-weight:600; line-height:1;
  text-decoration:none; color:#fff; background:var(--accent);
  border:2px solid var(--accent-dark); border-radius:.9rem; box-shadow:0 2px 0 var(--accent-dark);
}
a.home:active{transform:translateY(2px); box-shadow:none}
#topicLabel{font-size:1.05rem; font-weight:600; color:var(--accent-dark);
  background:var(--accent-soft); border-radius:.8rem; padding:.2rem .6rem; white-space:nowrap}
/* ことばの ラベルは 右に よせる（経験値などの 表示は 2026-09-16 に 外した） */
#topicLabel{margin-left:auto}
a.home .ar{font-size:1.15rem}
/* せまい 画面では ヘッダを 詰めない */
@media (max-width:560px){
  a.home .txt{display:none}
  a.home{min-width:2.6rem; padding:0 .35rem}
  #topicLabel{font-size:.95rem; overflow:hidden; text-overflow:ellipsis; max-width:44vw}
}

/* ---- ことばの バー（漢字1文字が 主役・送り仮名は 横に 小さく・独語は 下に 小さく）---- */
#wordBar{flex:0 0 auto; padding:.3rem .7rem .1rem; text-align:center; background:#fff; border-bottom:2px solid var(--line)}
#wordLine{font-size:2.5rem; font-weight:600; line-height:1.18; letter-spacing:.02em}
#wordLine .main{color:var(--accent-dark)}
#wordLine .sub{font-size:1.1rem; color:var(--muted); font-weight:600; margin:0 .06rem}
/* 独語の となりに 🔊（語の 読みを 鳴らす） */
#subLine{display:flex; align-items:center; justify-content:center; gap:.5rem; margin:.05rem 0 .2rem; min-height:2.4rem}
#germanLine{font-size:.95rem; color:#6b6252}
button.speak{min-width:2.6rem; min-height:2.6rem; padding:0; font-size:1.2rem; border-radius:50%;
  box-shadow:0 2px 0 #f0e9dc; line-height:1}

/* ---- なぞる ところ ---- */
main{flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:.4rem; min-height:0}
#stage{position:relative; width:var(--S,300px); height:var(--S,300px);
  background:#fff; border:3px solid var(--line); border-radius:1.4rem; overflow:hidden; box-shadow:0 3px 0 #f3eee2}
#stage>svg,#stage>canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
#grid line{stroke:#efe8d8; stroke-width:1; stroke-dasharray:4 4}
#glyphPaths path{fill:none; stroke:var(--glyph); stroke-width:9; stroke-linecap:round; stroke-linejoin:round}
#paths path{fill:none; stroke:var(--path); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:.45}
#paths path.on{stroke:var(--pathon); opacity:1; stroke-width:3.4}
#nums text{font-size:7px; fill:#b3a8d1; font-family:system-ui,sans-serif}
#nums text.on{fill:var(--accent-dark); font-weight:700}
#ink{touch-action:none}

/* ---- したの ボタン ---- */
footer{flex:0 0 auto; padding:.45rem .7rem .7rem; border-top:2px solid var(--line); background:#fff}
.row{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; align-items:center}
.row + .row{margin-top:.35rem}
button{
  font-family:inherit; font-size:1.1rem; font-weight:600;
  border:2px solid var(--line); border-radius:1.1rem; background:#fff; color:var(--ink);
  padding:.55rem 1rem; min-width:4.4rem; min-height:3.2rem; cursor:pointer;
  box-shadow:0 3px 0 #f0e9dc; transition:transform .07s ease, box-shadow .07s ease;
}
button:active{transform:translateY(3px); box-shadow:none}
button.primary{background:var(--accent); border-color:var(--accent-dark); color:#fff; box-shadow:0 3px 0 var(--accent-dark)}
button.ghost{font-size:.95rem; min-width:auto; min-height:2.8rem; padding:.4rem .8rem; color:var(--muted); box-shadow:0 2px 0 #f0e9dc}
button[disabled]{opacity:.4; box-shadow:none}
.note{font-size:.85rem; color:var(--muted)}

/* ---- 出てくる おおい ---- */
.sheet{position:fixed; inset:0; background:rgba(47,43,38,.45); display:none;
  align-items:center; justify-content:center; padding:1rem; z-index:10}
.sheet.show{display:flex}
.card{background:#fff; border-radius:1.6rem; padding:1.1rem 1.2rem; max-width:34rem; width:100%;
  max-height:88vh; overflow:auto; box-shadow:0 10px 34px rgba(47,43,38,.22)}
.card h2{margin:.1rem 0 .6rem; font-size:1.25rem; font-weight:600}
.card p{margin:.3rem 0 .8rem; color:#6b6252; font-size:.95rem; line-height:1.75}
.verdict{font-size:1.9rem; text-align:center; font-weight:700; margin:.2rem 0}
.verdict.ok{color:var(--ok)} .verdict.warn{color:var(--warn)} .verdict.ng{color:var(--ng)}

/* トピックの 一覧 */
.topics{display:grid; gap:.5rem}
.topic{display:flex; align-items:center; gap:.6rem; text-align:left; min-height:3.6rem; padding:.5rem .7rem}
.topic .emoji{font-size:1.5rem}
.topic .badge{min-width:3.4rem; text-align:center; font-size:.95rem; font-weight:700; color:#fff;
  background:var(--accent); border-radius:.7rem; padding:.3rem .4rem; flex:0 0 auto}
.topic .nm{display:flex; flex-direction:column; line-height:1.25}
.topic .nm b{font-size:1.1rem}
.topic .nm i{font-style:normal; font-size:.85rem; color:var(--muted)}
.topic .cnt{margin-left:auto; font-size:.9rem; color:var(--muted); font-variant-numeric:tabular-nums}
.topic.done{border-color:var(--ok); box-shadow:0 3px 0 #cfe9d8}
.topic.done .cnt{color:var(--ok); font-weight:700}