/* Game layout uses the shared stage tokens and replay control. */
[hidden] { display: none !important; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
#app { display: grid; grid-template-rows: auto 1fr; }
.game-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); min-width: 0; }
.screen { width: 100%; }
.screen.active { flex: 0 1 auto; }
.game-content:has(#start-screen.active) #caption { display: none; }
.stage-actions a, .stage-actions button { padding: var(--s2) var(--s4); border-radius: var(--radius); min-height: 48px; color: var(--card); }
#parent-btn { font: inherit; padding: var(--s2) var(--s3); border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink-soft); }
#parent-btn.holding { outline: 3px solid var(--accent); }
dialog { background: var(--card); }
dialog[open] { display: flex; flex-direction: column; gap: var(--s3); }
dialog h2, dialog p, dialog a, dialog button { margin: 0; }
dialog a, dialog button { padding: var(--s2) var(--s3); border-radius: var(--radius-sm); }
dialog button { color: var(--card); }
#parent-dialog label { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); }
select { font: inherit; max-width: 100%; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); }
#parent-summary { line-height: 1.8; }
.choice.correct { border-color: var(--accent); outline: 3px solid var(--accent); }
.choice.hinted { border-color: var(--accent); }
.round-dots span { border-radius: var(--radius-sm); }
.round-dots span.done { background: var(--accent); }

.symbol, .choice .symbol, .target-card .symbol { display: block; width: clamp(92px, 25vmin, 190px); height: auto; aspect-ratio: 1; object-fit: contain; }
.sticker-grid .symbol { width: clamp(44px, 9vmin, 70px); height: auto; }