/* ひらがな（読み・なぞり書き）。共通の base.css の上に */
/* なぞり書きのマスの地はダーク表示でも明るい（--board）。マスの中の線の色は、明るい地の上の色で固定する */
svg .st, .padsvg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fr, .fr2 { fill: none; }
.ks .fr, .padsvg .fr { stroke: var(--line-strong); stroke-width: 3; }
.ks .fr2 { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 6; }
.ks .st { stroke: var(--ink); stroke-width: 11; }

#trace { --pad-guide: #CFCAC0; --pad-guide-light: #E4E0D8; --pad-cur: #A9C6E2; --pad-dot: #2F5D8A; --pad-ink: #262626; --pad-red: #C8453B; }
.unitbar { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 10px; min-height: 64px; }
.preview { display: flex; gap: 4px; }
.preview .pv { width: 60px; height: 60px; background: var(--board); border-radius: 4px; flex: none; }
.preview .pv.now { outline: 3px solid var(--accent); outline-offset: 1px; }
.preview .pv .fr { stroke: #B9B5AC; stroke-width: 4; fill: none; }
.preview .pv .fr2 { stroke: #D9D6CE; stroke-width: 3; stroke-dasharray: 8 8; fill: none; }
.preview .pv-guide .st { stroke: #BDB8AE; stroke-width: 12; }
.preview .pv-faint .st { stroke: #E2DED6; stroke-width: 12; }
.preview .pv-ink { stroke: var(--pad-ink); stroke-width: 12; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.preview .pv-hana { fill: none; stroke: var(--pad-red); stroke-width: 7; }
.say { display: inline-flex; align-items: center; gap: 6px; }
.say .spk { width: 22px; height: 22px; fill: currentColor; }
.say .spk .w { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.pad-wrap { display: flex; justify-content: center; }
.pad { width: min(100%, 460px, calc(100vh - 290px)); min-width: 260px; aspect-ratio: 1; }
.padsvg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: var(--radius); }
.padsvg.on { cursor: crosshair; }
.padsvg .padbg { fill: var(--board); stroke: #B9B5AC; stroke-width: 2; }
.padsvg .padcross { stroke: #D3CFC6; stroke-width: 1.5; stroke-dasharray: 5 5; }
.padsvg .guide { stroke: var(--pad-guide); stroke-width: 22; }
.padsvg.g-light .guide { stroke: var(--pad-guide-light); stroke-width: 18; }
.padsvg .cur { stroke: var(--pad-cur); stroke-width: 22; }
.padsvg.g-light .cur { stroke-width: 18; }
.padsvg .sdot { fill: var(--pad-dot); }
.padsvg .snum { fill: #FFFFFF; font-family: var(--font); font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.padsvg .arrow { stroke: var(--pad-dot); fill: none; }
.padsvg .ink { stroke: var(--pad-ink); stroke-width: 9; }
.padsvg .ink.auto { stroke: #8A8A8A; }
.padsvg .ink.bad { stroke: var(--pad-red); stroke-width: 7; opacity: .55; }
.padsvg .ink.live { stroke: var(--pad-ink); stroke-width: 9; }
.padsvg .demo { stroke: var(--pad-red); stroke-width: 10; }
.padsvg .hm { stroke: var(--pad-red); stroke-width: 6; fill: none; opacity: .9; }
.padsvg .sdot, .padsvg .snum, .padsvg .arrow, .padsvg .cur, .padsvg .guide { pointer-events: none; }

/* 縦書き: 上の小さなマスの列は右に縦に並ぶ */
#trace.dir-tate { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "pad bar" "ctl ctl"; column-gap: 12px; align-items: start; }
#trace.dir-tate .pad-wrap { grid-area: pad; }
#trace.dir-tate .unitbar { grid-area: bar; flex-direction: column; margin: 0; }
#trace.dir-tate .preview { flex-direction: column; }
#trace.dir-tate #trace-ctl { grid-area: ctl; }
.preview.tate { flex-direction: column; }

/* 子どもが押すボタンの列（大きく・間を空ける）と、大人向けの列（下に離して小さく） */
.kid-row { justify-content: center; gap: 16px; margin-top: 16px; }
.kid-row .btn { min-height: 56px; font-size: 19px; padding: 0 24px; }
.adult-row { margin-top: 28px; padding-top: 12px; border-top: 1px dashed var(--line); }
.adult-label { color: var(--ink-sub); font-size: 14px; margin-right: 4px; }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }

/* 読み */
.qbox { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 200px; margin: 0 0 16px; }
.qpic img { display: block; width: min(52vw, 220px); height: auto; aspect-ratio: 1; object-fit: contain; }
.qletter .lt { display: block; width: min(46vw, 190px); height: auto; aspect-ratio: 1; background: var(--board); border-radius: var(--radius); }
.lt .st { stroke: #262626; stroke-width: 12; }
.qside { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qword { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: .08em; }
.wd b { color: var(--ng); }
.opts { display: grid; gap: 12px; justify-content: center; }
.opts.letters { grid-template-columns: repeat(var(--cols, 3), minmax(0, 120px)); }
.opts.letters.n4 { --cols: 4; }
.opts.pics { grid-template-columns: repeat(var(--cols, 3), minmax(0, 170px)); }
.opts.pics.n4 { --cols: 4; }
.opt {
  position: relative; appearance: none; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 3px solid var(--line-strong); border-radius: 10px; padding: 8px; min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.opt:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.opt:active:not([aria-disabled]) { transform: translateY(1px); }
.opt .lt { width: 100%; max-width: 96px; height: auto; aspect-ratio: 1; background: transparent; }
.opt img { width: 100%; max-width: 150px; height: auto; aspect-ratio: 1; object-fit: contain; }
.opt small { font-size: 18px; font-weight: 700; }
.opt .n { position: absolute; left: 6px; top: 2px; font-size: 14px; color: var(--ink-sub); }
.opt.ok { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok); }
.opt.show { border-color: var(--ok); border-style: dashed; }
.opt.ng { border-color: var(--ng); }
.opt.dim { opacity: .45; }
.opt.ok::after, .opt.show::after, .opt.ng::after { position: absolute; right: 8px; top: 2px; font-size: 22px; font-weight: 700; line-height: 1.2; }
.opt.ok::after, .opt.show::after { content: "○"; color: var(--ok); }
.opt.ng::after { content: "×"; color: var(--ng); }
.opt[aria-disabled] { cursor: default; }
.shake { animation: shake .35s; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }

/* 結果 */
.result-box { inset: 6% 4% auto; z-index: 20; }
.result-box .big { font-size: 1.5rem; font-weight: 700; margin: 0 0 8px; }
.rlist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px; }
.ri { display: inline-flex; flex-direction: column; align-items: center; padding: 4px 6px; border: 2px solid var(--line); border-radius: var(--radius); }
.ri.hana { border-color: var(--p-red); }
.ri .word-svg { height: 44px; width: auto; }
.ri .word-svg .st { stroke: var(--ink); stroke-width: 14; }
.ri small { font-size: 14px; }

.callout { z-index: 25; }

@media (max-width: 480px) {
  .stage { padding: 8px; }
  .pad { width: min(100%, calc(100vh - 300px)); min-width: 240px; }
  .preview .pv { width: 48px; height: 48px; }
  .kid-row { gap: 10px; }
  .kid-row .btn { padding: 0 16px; font-size: 18px; }
  .opts { gap: 8px; }
  .opts.letters.n4, .opts.pics.n4 { --cols: 2; }
  .opts.pics { --cols: 3; }
  .qbox { gap: 12px; min-height: 160px; }
}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; --tb-rt: 11px; --tb-st-rt: 11px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */