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;
}
/* ---- Memory Trainer ---- */
: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: 1fr 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; }