/* v0.3 additions: compact Test chooser (fits a phone screen) */
.test-pick { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.8dvh, 14px); justify-content: center; width: 100%; max-width: 520px; margin: 0 auto; }
.test-pick .btn.big { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: clamp(56px, 11dvh, 88px); }
.test-pick .btn small { font-weight: 400; font-size: .85rem; opacity: .85; }
.test-one { flex-wrap: nowrap; }
.test-one select { min-height: clamp(56px, 11dvh, 88px); font-size: 1.2rem; }
.test-one .btn { flex: 1; }
/* Landscape phones: home buttons in one row so everything fits */
@media (orientation: landscape) and (max-height: 520px) {
  body.fit .home-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 720px; }
  body.fit .home-actions .btn { min-height: 56px; }
  body.fit .child-home { gap: 6px; }
  body.fit .child-home .hello { font-size: 1.2rem; }
  body.fit .child-home .next-up { margin: 0; }
}
input[type=search] { font: inherit; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface); color: var(--ink); }
.set-row { min-height: 60px; padding-top: 10px; padding-bottom: 10px; }

/* Thin games (ui/games.js) */
.qrow { display: flex; gap: 8px; align-items: stretch; width: 100%; min-height: 0; }
.qrow > .qwrap { flex: 1; }
.game-side { width: 40px; flex: 0 0 40px; }
.game-strip { width: 100%; height: 34px; flex: 0 0 auto; }
.g-svg { width: 100%; height: 100%; }
.g-track { fill: var(--surface-2); }
.g-ship { text-anchor: middle; transition: y .4s ease; }
.g-goal { text-anchor: middle; }
.g-bank { fill: var(--ink-3); }
.g-plank { fill: #b07a3c; }
.heat .c.practising { box-shadow: inset 0 0 0 2px #8a4fd1; }
.praise { font-weight: 700; color: var(--good); margin: 0; }

/* Hints are never covered (NK 2026-10-24): compact lines; when hints show, the question and keys give up space. */
body.fit .hint { overflow-y: auto; scrollbar-width: thin; gap: 2px; }
body.fit .hint .hline { font-size: calc(.98rem * var(--qscale, 1)); line-height: 1.25; }
body.fit .hint .hline.old { font-size: .88rem; }
body.fit .play.has-hints .hint { flex: 1 0 auto; min-height: calc(4 * 1.35em + 12px); }
body.fit .play.has-hints .question { font-size: calc(clamp(1.8rem, min(9vw, 7dvh), 3.6rem) * var(--qscale, 1)); }
body.fit .play.has-hints .key { height: clamp(40px, 7.2dvh, 68px); }
.see-slot { justify-self: end; display: flex; gap: 6px; }

/* NK 2026-10-25: answer on the question's line; the card takes the free space until hints need it; Delete fits. */
.qline { display: flex; align-items: baseline; justify-content: center; gap: .25em; flex-wrap: wrap; }
.qline .eq { font-size: calc(clamp(2rem, min(11vw, 9dvh), 4.4rem) * var(--qscale, 1)); font-weight: 700; }
.qline .answer { min-width: 2.2ch; text-align: left; border-bottom-width: 3px; padding: 0 4px; }
.qwrap.stacked .qline { flex-direction: column; align-items: center; }
.qwrap.stacked .qline .eq { display: none; }
body.fit .play:not(.has-hints) .qrow { flex: 1 1 auto; min-height: 0; }
body.fit .play:not(.has-hints) .qwrap { justify-content: center; }
body.fit .play:not(.has-hints) .hint { flex: 0 0 0; min-height: 0; padding: 0; border: 0; }
body.fit .key.del { font-size: calc(clamp(1.4rem, 4.2dvh, 2rem) * var(--qscale, 1)); }
.next-list { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.layer-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; }
.layer-empty p { margin: 0; }
.qwrap.missing .qline .eq { display: none; }
.qline .after { font-size: calc(clamp(2rem, min(11vw, 9dvh), 4.4rem) * var(--qscale, 1)); font-weight: 700; }
.qline .after:empty { display: none; }
/* A wrong answer on the question line is struck through, so "5 × 10 = 56" never reads as true (NK 2026-10-25). */
.qline .answer.wrong { text-decoration: line-through; text-decoration-thickness: 3px; }