/* まるごと かなの 書き練習 — 画面
   盤面の CSS は もじ の おけいこ（shared/kana-app.css）と 同じ 値に そろえて ある
   （trace.js は #glyphPaths / #paths / #nums / #ink と --S・--pencil を 見る）。
   ちがう ところ: 下に 「その 行の もじ」と 「行の 一覧（11行）」を いつも 出して、
   すきな 行・すきな 字へ すぐ 移れる ように した（おとなの 学習者＝ 1日1行の 縛りなし）。 */
: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}
a.home .ar{font-size:1.15rem}
button.kind{min-width:auto; min-height:2.9rem; padding:.3rem .7rem; font-size:1rem; white-space:nowrap;
  color:var(--muted); box-shadow:0 2px 0 #f0e9dc}
button.kind.on{background:var(--accent-soft); border-color:var(--accent-dark); color:var(--accent-dark); font-weight:700}
#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}
#topicLabel{margin-left:auto}
@media (max-width:560px){
  a.home .txt{display:none}
  a.home{min-width:2.6rem; padding:0 .35rem}
  button.kind{font-size:.9rem; padding:.25rem .5rem}
  /* せまい 画面では 見出しを 出さない（行・字・位置は 下の 帯と 注記で わかる。ヘッダが 折り返す のを 防ぐ） */
  #topicLabel{display:none}
}

/* ---- いま の 字の バー（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.8rem; font-weight:600; line-height:1.15; color:var(--accent-dark)}
#subLine{display:flex; align-items:center; justify-content:center; gap:.5rem; margin:.05rem 0 .2rem; min-height:2.4rem}
#romajiLine{font-size:1.05rem; color:#6b6252; letter-spacing:.02em}
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)}

/* ---- その 行の もじ（タップで その 字へ）---- */
#charBar{gap:.4rem}
#charBar button{min-width:3.1rem; min-height:3.1rem; padding:.1rem .35rem; font-size:1.5rem; border-radius:1rem}
#charBar button.on{border-color:var(--accent-dark); background:var(--accent-soft); color:var(--accent-dark); box-shadow:0 3px 0 #ddd3f2}

/* ---- 行の 一覧（11行・1行の 帯。せまい 画面では 横に スワイプ）---- */
#rowBar{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:.1rem 0 .25rem;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin}
#rowBar button{min-width:auto; min-height:2.5rem; padding:.15rem .6rem; font-size:.95rem;
  border-radius:.8rem; box-shadow:0 2px 0 #f0e9dc; flex:0 0 auto}
#rowBar button.on{background:var(--accent); border-color:var(--accent-dark); color:#fff; box-shadow:0 2px 0 var(--accent-dark)}

/* ---- 出てくる おおい ---- */
.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)}