h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---- App styles ---- */
:root {
    --bg: #f4f6fb;
    --surface: #ffffff;
    --text: #1f2430;
    --muted: #5d6475;
    --accent: #4f6ef7;
    --ok: #1f9d55;
    --bad: #d64545;
    --border: #dde2ee;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding: .75rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}


.topbar nav { display: flex; gap: .25rem; }
.topbar nav a {
    padding: .4rem .8rem;
    border-radius: 6px;
    color: var(--muted);
    text-decoration: none;
}
.topbar nav a:hover { background: var(--bg); }
.topbar nav a.active { background: var(--accent); color: #fff; }

.content { max-width: 820px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

button, select, input { font: inherit; }

button {
    padding: .45rem 1rem;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}
button:hover:not(:disabled) { filter: brightness(1.08); }
button.big { padding: .7rem 1.6rem; font-size: 1.1rem; }

/* Home: games in 2 columns; icon on the left, name + description on the right */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.tile {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: .9rem;
    row-gap: .15rem;
    padding: 1rem 2.6rem 1rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.tile-icon { grid-row: span 2; font-size: 2.2rem; }
.tile span:last-child { color: var(--muted); font-size: .92rem; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-bottom: 1rem; }

.result { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.result.success { background: #e3f6ea; color: var(--ok); }
.result.fail { background: #fbe7e7; color: var(--bad); }

/* Pairs */
.board { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: .6rem; }
.card {
    aspect-ratio: 1;
    padding: 0;
    border-radius: 10px;
    background: var(--accent);
    font-size: clamp(1.4rem, 6vw, 2.6rem);
    transition: background .2s, transform .2s;
}
.card:disabled { cursor: default; }
.card.flipped { background: var(--surface); border: 2px solid var(--border); color: var(--text); }
.card.matched { background: #e3f6ea; border-color: var(--ok); opacity: .75; }
.card:not(.flipped):hover { transform: scale(1.03); }

/* Numbers */
.panel {
    padding: 2rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
}
.digits { font-size: clamp(2rem, 9vw, 3.5rem); font-weight: 700; letter-spacing: .3em; font-variant-numeric: tabular-nums; word-break: break-all; }
.progress { height: 6px; margin-top: 1.25rem; background: var(--border); border-radius: 3px; overflow: hidden; }
.progress .bar { height: 100%; background: var(--accent); animation: shrink linear forwards; }
@keyframes shrink { from { width: 100%; } to { width: 0; } }
.panel form { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.answer {
    width: min(100%, 320px);
    padding: .6rem .8rem;
    font-size: 1.6rem;
    text-align: center;
    letter-spacing: .2em;
    border: 2px solid var(--border);
    border-radius: 8px;
}
.answer:focus { outline: none; border-color: var(--accent); }

.stats { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.nowrap { white-space: nowrap; }
.toolbar select { padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
h1 { margin-top: 0; }

/* Touch devices: no tap highlight, no double-tap zoom on controls */
button, a, select, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Phones */
@media (max-width: 560px) {
    .content { padding: 1rem 1rem 2rem; }
    h1 { font-size: 1.6rem; }

    .toolbar { gap: .6rem; }
    .toolbar .stats { width: 100%; justify-content: space-between; }

    /* Max 4 columns on narrow screens so cards stay tappable */
    .board { --cols: 4 !important; gap: .45rem; }
    .card { font-size: 1.8rem; border-radius: 8px; }

    .panel { padding: 1.5rem .75rem; }
    .digits { letter-spacing: .15em; }
    .panel form { flex-direction: column; align-items: stretch; }
    .answer { width: 100%; }
    button.big { width: 100%; padding: .8rem 1rem; }
}

/* Sequence */
.status { display: flex; flex-direction: column; align-items: center; gap: .75rem; min-height: 3rem; margin-bottom: 1rem; text-align: center; }
.status .result { margin: 0; width: 100%; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 380px; margin: 0 auto; }
.tile3 {
    aspect-ratio: 1;
    padding: 0;
    border-radius: 12px;
    background: hsl(var(--hue) 55% 72%);
    opacity: .45;
    transition: opacity .12s, transform .12s, box-shadow .12s;
}
.tile3:disabled { cursor: default; }
.tile3:not(:disabled) { opacity: .7; }
.tile3:not(:disabled):active { transform: scale(.96); }
.tile3.lit { opacity: 1; transform: scale(1.04); box-shadow: 0 0 0 4px #fff, 0 0 18px hsl(var(--hue) 70% 55%); }
.tile3.wrong { opacity: 1; background: var(--bad); }

/* Words */
.word-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.25rem; }
.word { padding: .5rem .9rem; border-radius: 8px; background: var(--bg); font-size: 1.25rem; font-weight: 600; }
.word-option {
    padding: .5rem .9rem;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 1.05rem;
}
.word-option.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.word-option.correct { background: #e3f6ea; border-color: var(--ok); color: var(--ok); }
.word-option.wrong { background: #fbe7e7; border-color: var(--bad); color: var(--bad); text-decoration: line-through; }
.word-option.missed { border-color: var(--ok); border-style: dashed; color: var(--ok); }
.word-option:disabled { cursor: default; }
.word-option:not(.correct, .wrong, .missed):disabled { opacity: .5; }
button.big:disabled { opacity: .45; cursor: default; }



/* Grid */
.gridn { display: grid; grid-template-columns: repeat(var(--size), 1fr); gap: .5rem; max-width: 400px; margin: 0 auto; }
.cell {
    aspect-ratio: 1;
    padding: 0;
    border-radius: 8px;
    background: var(--border);
    transition: background .15s, transform .12s;
}
.cell:disabled { cursor: default; }
.cell:not(:disabled):hover { background: #cdd4e6; }
.cell:not(:disabled):active { transform: scale(.95); }
.cell.lit, .cell.found { background: var(--accent); }
.cell.wrong { background: var(--bad); }
.cell.missed { background: var(--surface); box-shadow: inset 0 0 0 3px var(--accent); }

/* What's New */
.emoji-set { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.25rem; }
.emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    border-radius: 10px;
    background: var(--bg);
    font-size: 2.2rem;
}
button.emoji { border: 2px solid var(--border); background: var(--surface); }
button.emoji:not(:disabled):active { transform: scale(.94); }
button.emoji:disabled { cursor: default; opacity: .5; }
button.emoji.correct { opacity: 1; border-color: var(--ok); background: #e3f6ea; box-shadow: 0 0 0 2px var(--ok); }
button.emoji.wrong { opacity: 1; border-color: var(--bad); background: #fbe7e7; }
@media (max-width: 560px) {
    .emoji { width: 3.1rem; height: 3.1rem; font-size: 1.9rem; }
}

/* Language switch */
.lang { display: flex; margin-left: auto; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.lang a { padding: .3rem .6rem; font-size: .85rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.lang a + a { border-left: 1px solid var(--border); }
.lang a.active { background: var(--accent); color: #fff; }

/* Phones: nav scrolls sideways next to the language switch. Items must start at the left
   edge (no centering), otherwise the overflow spills left and can't be scrolled to. */
@media (max-width: 560px) {
    .topbar { flex-wrap: nowrap; gap: .5rem; padding: .6rem .75rem; }
    .topbar nav {
        flex: 1;
        min-width: 0;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .topbar nav::-webkit-scrollbar { display: none; }
    .topbar nav a { flex: 0 0 auto; white-space: nowrap; padding: .55rem .6rem; font-size: .92rem; }
}

/* Pairs online */
.button-link {
    padding: .45rem 1rem;
    border-radius: 6px;
    border: 2px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.button-link:hover { background: var(--accent); color: #fff; }
.muted { color: var(--muted); }
.share {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px dashed var(--accent);
    border-radius: 10px;
}
.share-row { display: flex; gap: .5rem; }
.share-row input {
    flex: 1;
    min-width: 0;
    padding: .45rem .6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
}
.players { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1rem; list-style: none; }
.players li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .8rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 999px;
}
.players li.turn { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 110, 247, .2); }
.players li strong { min-width: 1.4rem; text-align: center; padding: 0 .3rem; border-radius: 999px; background: var(--bg); }
.new-game { margin-top: 1rem; justify-content: center; }
@media (max-width: 560px) {
    .toolbar .button-link { width: 100%; text-align: center; }
}
.my-name { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.my-name input {
    width: min(100%, 220px);
    padding: .4rem .6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}
.my-name input:focus { outline: none; border-color: var(--accent); }
.players li.me .player-name { font-weight: 700; }
.players li.me .player-name::after { content: " ★"; color: var(--accent); }

/* Mode switch (solo / with others) */
.mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: -.25rem 0 1.25rem; }
.mode {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mode:hover { border-color: #b9c3e6; transform: translateY(-1px); }
.mode.active {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(79, 110, 247, .1), rgba(79, 110, 247, .02));
    box-shadow: 0 4px 14px rgba(79, 110, 247, .15);
    pointer-events: none;
}
.mode-icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg);
    font-size: 1.4rem;
}
.mode.active .mode-icon { background: var(--accent); }
.mode-text { display: flex; flex-direction: column; min-width: 0; }
.mode-text small { color: var(--muted); line-height: 1.25; }
.mode.active strong { color: var(--accent); }

/* Home tiles: multiplayer badge */
.badge {
    position: absolute;
    top: .8rem;
    right: .8rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: var(--bg);
    font-size: .9rem;
}


.lobby { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.lobby p { margin: 0 0 .5rem; }
.countdown { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.countdown-number {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
    animation: pop 1s ease-out infinite;
}
@keyframes pop { from { transform: scale(1.25); opacity: .6; } to { transform: scale(1); opacity: 1; } }
.race-over { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.restart-race { margin-top: 1rem; text-align: center; }
button.link { background: none; color: var(--muted); padding: .3rem .5rem; text-decoration: underline; }
button.link:hover { color: var(--accent); }

@media (max-width: 560px) {
    .mode-switch { gap: .45rem; }
    .mode { flex-direction: column; text-align: center; gap: .35rem; padding: .6rem .5rem; }
    .mode-icon { width: 2.2rem; height: 2.2rem; font-size: 1.2rem; }
    .mode-text small { font-size: .78rem; }
    .race-over button { width: 100%; }
}
.players .player-status { color: var(--muted); font-size: .85rem; }
.players li.done { border-color: var(--ok); }
.players li.done .player-status { color: var(--ok); }

/* Home on phones: still 2 columns, compact tiles with just icon + name */
@media (max-width: 720px) {
    .tiles { gap: .5rem; }
    .tile { column-gap: .55rem; padding: .7rem 1.6rem .7rem .7rem; }
    .tile span:last-child { display: none; }
    .tile-icon { grid-row: auto; font-size: 1.6rem; }
    .tile strong { font-size: .92rem; line-height: 1.2; }
    .badge { top: .3rem; right: .3rem; padding: 0 .3rem; font-size: .7rem; }
}

/* Animal math */
.difficulty-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.25rem; }
.difficulty {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 7.5rem;
    padding: .6rem 1rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
}
.difficulty small { color: var(--muted); }
.difficulty.active { border-color: var(--accent); background: rgba(79, 110, 247, .08); }
.difficulty.active strong { color: var(--accent); }
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; max-width: 320px; margin: 0 auto .75rem; }
.choice {
    padding: .8rem 0;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 1.6rem;
    font-weight: 700;
}
.choice:disabled { cursor: default; opacity: .5; }
.choice.correct { opacity: 1; border-color: var(--ok); background: #e3f6ea; color: var(--ok); }
.choice.wrong { opacity: 1; border-color: var(--bad); background: #fbe7e7; color: var(--bad); }
.variant-picker { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.variant-picker select { padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.race-over .variant-picker { margin: 0; }

/* N-back */
.nback { max-width: 300px; }
.nback .cell { cursor: default; }
.match-row { display: flex; justify-content: center; margin-top: 1rem; }
button.match { min-width: 12rem; transition: background .15s; }
button.match:disabled { opacity: .55; cursor: default; }
button.match.hit { background: var(--ok); opacity: 1; }
button.match.wrong { background: var(--bad); opacity: 1; }

/* Where was it? */
.spot {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: clamp(1.3rem, 6vw, 2.2rem);
}
.spot:disabled { cursor: default; }
.spot:not(:disabled):hover { border-color: var(--accent); }
.spot:not(:disabled):active { transform: scale(.95); }
.spot.answered { background: #e3f6ea; border-color: var(--ok); }
.spot.wrong { background: #fbe7e7; border-color: var(--bad); }
.spot.target { border-color: var(--ok); box-shadow: inset 0 0 0 3px var(--ok); }
.ask-prompt { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.2rem; }
.ask-item { font-size: 2.4rem; line-height: 1; }

/* Order */
.order-current { display: grid; place-items: center; height: 6rem; font-size: 4.5rem; }
.order-dots { display: flex; justify-content: center; gap: .35rem; margin-top: .75rem; }
.order-dots .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--border); }
.order-dots .dot.on { background: var(--accent); }
.slots { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: 1.25rem; }
.slot {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border: 2px dashed var(--border);
    border-radius: 10px;
    color: var(--muted);
    font-size: 1rem;
}
.slot.filled, .slot.revealed { border-style: solid; font-size: 1.9rem; color: var(--text); }
.slot.correct { border-color: var(--ok); background: #e3f6ea; }
.slot.revealed { border-color: var(--accent); }
@media (max-width: 560px) {
    .slot { width: 2.8rem; height: 2.8rem; }
    .slot.filled, .slot.revealed { font-size: 1.6rem; }
}
.animal-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .9rem;
    margin-bottom: 1.25rem;
}
.animal-group {
    display: inline-flex;
    flex-direction: column;
    gap: .15rem;
    padding: .4rem .6rem;
    border-radius: 12px;
    background: var(--bg);
}
.animal-row { font-size: clamp(1.5rem, 6vw, 2.2rem); letter-spacing: .1em; white-space: nowrap; }
.animal-sum .operator { font-size: clamp(1.8rem, 7vw, 2.4rem); font-weight: 700; color: var(--muted); }
.picker-label { margin: 0 0 .4rem; font-weight: 600; color: var(--muted); }

/* Home: with an odd number of games the last tile spans both columns */
.tile:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Graphic dictation */
.dictation-goal { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 600; }
.dictation-goal span { font-size: 1.6rem; vertical-align: middle; }
.commands { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: .9rem; }
.command {
    padding: .25rem .6rem;
    border-radius: 8px;
    background: var(--bg);
    font-size: 1.25rem;
    font-weight: 700;
    white-space: nowrap;
}
.paper {
    display: block;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background: #fdfdf8;
    border: 1px solid var(--border);
    border-radius: 8px;
    touch-action: manipulation;
}
.paper .grid-line { stroke: #b9cdf0; stroke-width: .35; }
.paper .figure { font-size: 8px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.paper .drawn-path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.paper .drawn-path.ok { stroke: var(--ok); }
.paper .drawn-path.bad { stroke: var(--bad); }
.paper .target-path { fill: none; stroke: var(--ok); stroke-width: 1.4; stroke-dasharray: 2.5 2; stroke-linecap: round; }
.paper .pen-dot { fill: var(--accent); pointer-events: none; }
.paper .hit { fill: transparent; cursor: pointer; }
.paper .hit.reachable:hover { fill: rgba(79, 110, 247, .18); }
.hint { margin: .6rem 0 0; color: var(--bad); }
.draw-actions { display: flex; justify-content: center; gap: .6rem; margin-top: .9rem; }
button.secondary { background: var(--surface); color: var(--text); border: 2px solid var(--border); }
.draw-actions button:disabled { opacity: .5; cursor: default; }
.player-names { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.25rem; }
.player-names input {
    width: min(100%, 160px);
    padding: .4rem .6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}
.player-names input:focus { outline: none; border-color: var(--accent); }
.turn-banner { margin: 0 0 .4rem; font-size: 1.1rem; }
.turn-banner strong { color: var(--accent); }

/* What's missing */
.emoji.gap { border: 2px dashed var(--border); background: transparent; color: var(--muted); font-size: 1.6rem; }

/* How many */
.meadow {
    position: relative;
    max-width: 480px;
    aspect-ratio: 7 / 5;
    margin: 0 auto 1rem;
    background: linear-gradient(#e6f5dc, #cfe9bd);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.meadow-animal {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: clamp(1.4rem, 6vw, 2.2rem);
    line-height: 1;
}
.meadow-animal.asked { filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 3px var(--accent)); }
.count-question { margin: 0 0 .75rem; font-size: 1.2rem; font-weight: 600; }
.count-question span { font-size: 1.8rem; vertical-align: middle; }

/* Dress the princess */
.dress-up { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.dress-up .stage { position: sticky; top: 1rem; width: min(100%, 360px, 40vh); margin: 0 auto; }
.dress-up .stage svg {
    display: block;
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.dress-up .stage text { text-anchor: middle; dominant-baseline: central; }
.dress-up .stage .decor { font-size: 16px; }
.wardrobe-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.wardrobe-tab {
    padding: .35rem .75rem;
    border: 2px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
}
.wardrobe-tab.active { border-color: var(--accent); background: rgba(79, 110, 247, .08); color: var(--accent); font-weight: 600; }
.wardrobe-items { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.wardrobe-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    min-width: 4.8rem;
    padding: .5rem .4rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
}
.wardrobe-item .icon { font-size: 1.6rem; line-height: 1.8rem; }
.wardrobe-item small { font-size: .75rem; }
.wardrobe-item.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 110, 247, .2); }
.swatch { width: 1.8rem; height: 1.8rem; border: 1px solid rgba(0, 0, 0, .2); border-radius: 50%; }
.wardrobe-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 720px) {
    .dress-up { grid-template-columns: minmax(0, 1fr); }
    .dress-up .stage { position: relative; top: 0; }
}
.curtain {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 12px;
    background: repeating-linear-gradient(90deg, #be185d 0 18px, #9d174d 18px 36px);
    color: #fff;
    text-align: center;
}
.curtain span { font-size: 4rem; line-height: 1; }
.quiz-question { margin: 0 0 .75rem; font-size: 1.2rem; font-weight: 600; }
.quiz-results { padding: 0; margin: 0 0 1rem; list-style: none; }
.quiz-results li { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.quiz-results li.ok { color: var(--ok); }
.quiz-results li.bad { color: var(--bad); }
.quiz-results li strong { color: var(--text); }
.hide-action { margin-top: 1rem; }
.quiz-results li .muted { margin-left: .35rem; }

/* Build a truck */
.dress-up.wide .stage { width: min(100%, 400px, 46vh); }
.curtain.garage { background: repeating-linear-gradient(180deg, #9ca3af 0 14px, #6b7280 14px 16px); }
.stage .beacon { animation: beacon .8s ease-in-out infinite; }
.stage .beacon.alt { animation-delay: .4s; }
@keyframes beacon { 50% { opacity: .3; } }
.stage .spray { animation: spray .5s linear infinite; }
@keyframes spray { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) {
    .stage .beacon, .stage .spray { animation: none; }
}
.stage .puff { transform-box: fill-box; transform-origin: center; animation: puff 1.4s ease-in-out infinite alternate; }
@keyframes puff { from { transform: translateY(3px) scale(.85); } to { transform: translateY(-3px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
    .stage .puff { animation: none; }
}

/* Colourful animals */
.emoji.color-tile { border: 3px solid rgba(0, 0, 0, .15); }
.color-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; max-width: 340px; margin: 0 auto 1rem; }
button.color-choice {
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    border: 3px solid rgba(0, 0, 0, .15);
    border-radius: 50%;
}
button.color-choice:active { transform: scale(.92); }

/* Phones: keep the picture in view while picking */
@media (max-width: 720px) {
    /* Tabs on the left edge, the first choice on the right edge, more choices below */
    .dress-up.dressing {
        grid-template-columns: 3.2rem minmax(0, 1fr) 4.2rem;
        grid-template-areas: "tabs stage slots" "more more more" "actions actions actions" "hide hide hide";
        gap: .5rem;
    }
    .dress-up.dressing .wardrobe { display: contents; }
    .dress-up.dressing .stage { grid-area: stage; width: 100%; }
    /* The side rails are as tall as the picture (height 0 + min-height 100% = the row's height) and scroll inside. */
    .dress-up.dressing .wardrobe-tabs,
    .dress-up.dressing .wardrobe-slots { height: 0; min-height: 100%; overflow-y: auto; }
    .dress-up.dressing .wardrobe-tabs { grid-area: tabs; flex-direction: column; flex-wrap: nowrap; margin: 0; }
    .dress-up.dressing .wardrobe-tab { flex-shrink: 0; padding: .4rem 0; border-radius: 12px; font-size: 1.3rem; }
    .dress-up.dressing .tab-name { display: none; }
    .dress-up.dressing .wardrobe-slots { grid-area: slots; }
    .dress-up.dressing .wardrobe-slots .picker-label { margin-bottom: .25rem; font-size: .7rem; text-align: center; }
    .dress-up.dressing .wardrobe-slots .wardrobe-items { flex-direction: column; flex-wrap: nowrap; gap: .35rem; margin-bottom: 0; }
    .dress-up.dressing .wardrobe-slots .wardrobe-item { width: 100%; min-width: 0; padding: .35rem .1rem; }
    .dress-up.dressing .wardrobe-more { grid-area: more; }
    .dress-up.dressing .wardrobe-more .picker-label { margin-bottom: .25rem; font-size: .8rem; }
    .dress-up.dressing .wardrobe-more .wardrobe-items { flex-wrap: nowrap; overflow-x: auto; gap: .35rem; margin-bottom: .5rem; padding-bottom: .2rem; }
    .dress-up.dressing .wardrobe-more .wardrobe-item { flex-shrink: 0; min-width: 3.2rem; padding: .35rem .3rem; }
    .dress-up.dressing .wardrobe-item small { display: none; }
    .dress-up.dressing .wardrobe-actions:not(.hide-action) { grid-area: actions; justify-content: center; }
    .dress-up.dressing .hide-action { grid-area: hide; justify-content: center; margin-top: 0; }

    /* Quiz and results: a smaller picture, so the answers are right below it */
    .dress-up.tall:not(.dressing) .stage { width: min(100%, 26vh); }
    .dress-up.wide:not(.dressing) .stage { width: min(100%, 36vh); }
}