/* /Components/About.razor.rz.scp.css */
/* Shares the clue-types dialog's centred scrim + floating-card look — a short,
   scrollable info box rather than a stepped walkthrough. */

.ab-scrim[b-f93nv69gcl] {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(8, 12, 20, .45);
}

.ab-card[b-f93nv69gcl] {
    position: fixed;
    z-index: 31;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(30rem, calc(100vw - 1.75rem));
    max-height: min(42rem, calc(100dvh - 2.5rem));
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* ── Header ────────────────────────────────────────────── */
.ab-head[b-f93nv69gcl] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .75rem .7rem 1.1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
}

.ab-title[b-f93nv69gcl] {
    font-weight: var(--fw-heavy);
    font-size: var(--fs-md);
    color: var(--ink-dim);
    letter-spacing: .02em;
}

.ab-x[b-f93nv69gcl] {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-dim);
    cursor: pointer;
    transition: background-color .08s ease;
}

.ab-x:hover[b-f93nv69gcl] {
    background: var(--key-active);
}

.ab-x svg[b-f93nv69gcl] {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* ── Body ──────────────────────────────────────────────── */
.ab-body[b-f93nv69gcl] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.2rem .5rem;
    color: var(--ink);
}

.ab-section[b-f93nv69gcl] {
    padding: .8rem 0;
    border-top: 1px solid var(--hairline);
}

.ab-section:first-of-type[b-f93nv69gcl] {
    border-top: none;
    padding-top: .2rem;
}

.ab-name[b-f93nv69gcl] {
    margin: 0 0 .35rem;
    font-size: var(--fs-lg);
    font-weight: var(--fw-heavy);
}

.ab-body p[b-f93nv69gcl] {
    margin: 0 0 .5rem;
    font-size: var(--fs-md);
    line-height: 1.5;
}

.ab-body p:last-child[b-f93nv69gcl] {
    margin-bottom: 0;
}

.ab-list[b-f93nv69gcl] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--ink-dim);
}

.ab-body a[b-f93nv69gcl] {
    color: var(--accent);
    text-decoration: none;
}

.ab-body a:hover[b-f93nv69gcl] {
    text-decoration: underline;
}

/* ── Footer ────────────────────────────────────────────── */
.ab-foot[b-f93nv69gcl] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--hairline);
}

.ab-foot .primary[b-f93nv69gcl] {
    padding: .55rem 1.3rem;
    border: none;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--fs-md);
    font-weight: var(--fw-heavy);
    cursor: pointer;
}

.ab-foot .primary:hover[b-f93nv69gcl] {
    filter: brightness(1.05);
}
/* /Components/AdBanner.razor.rz.scp.css */
/* A fixed-height band pinned at the top of the play surface, clearing the notch/status
   bar via the safe-area inset. The height is fixed and overflow hidden so the ad is
   always a slim strip — an unfilled or oversized ad can never expand the layout.
   flex:0 0 auto keeps it from being squeezed by the grid/keyboard below. */
.ad-slot[b-lhp51g0k6j] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    margin: calc(.4rem + env(safe-area-inset-top)) .75rem .25rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Only the empty placeholder shows the dashed outline; a live ad fills the slot cleanly. */
.ad-slot.is-placeholder[b-lhp51g0k6j] {
    border: 1px dashed var(--hairline);
    background: var(--surface);
}

.ad-tag[b-lhp51g0k6j] {
    font-size: var(--fs-2xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    opacity: .6;
}
/* /Components/AnswerBoxes.razor.rz.scp.css */
.answer[b-mlvl7bswhm] {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    padding: .35rem .25rem;
}

.abox[b-mlvl7bswhm] {
    position: relative;
    /* 2.9rem is the ideal box size, but the boxes shrink (min-width:0) so a long
       word's row fits the screen width instead of running off the sides. */
    flex: 0 1 2.9rem;
    min-width: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--cell-bg);
    color: var(--cell-ink);
    font-family: inherit;
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--shadow-sm);
    transition: background-color .08s ease, box-shadow .08s ease;
}

.abox.sel[b-mlvl7bswhm] {
    background: var(--cell-selected);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.anum[b-mlvl7bswhm] {
    position: absolute;
    top: 1px;
    left: 3px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--cell-num);
    pointer-events: none;
}

.aletter[b-mlvl7bswhm] {
    line-height: 1;
}

/* A letter flagged wrong by "check this word" — stays red until edited. */
.abox.incorrect .aletter[b-mlvl7bswhm] {
    color: #d6263b;
    font-weight: var(--fw-heavy);
}

/* A letter confirmed right by "check this word" — stays green until edited. */
.abox.correct .aletter[b-mlvl7bswhm] {
    color: #1a8f3c;
    font-weight: var(--fw-heavy);
}
/* /Components/Celebration.razor.rz.scp.css */
/* Full-screen celebration: dim scrim, confetti layer, then the card on top. */

.cele-scrim[b-bpeboudgm5] {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(8, 12, 20, .55);
}

/* ── Confetti ──────────────────────────────────────────── */
.confetti[b-bpeboudgm5] {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow: hidden;
    pointer-events: none;
}

.confetti-piece[b-bpeboudgm5] {
    position: absolute;
    top: -6vh;
    border-radius: 1px;
    opacity: .92;
    will-change: transform;
    animation: confetti-fall-b-bpeboudgm5 var(--dur, 3s) linear var(--delay, 0s) infinite;
}

@keyframes confetti-fall-b-bpeboudgm5 {
    0% {
        transform: translateY(-6vh) translateX(0) rotateZ(0deg);
        opacity: 0;
    }
    8% {
        opacity: .92;
    }
    100% {
        transform: translateY(106vh) translateX(var(--drift, 0)) rotateZ(var(--spin, 360deg));
        opacity: .92;
    }
}

/* ── Card ──────────────────────────────────────────────── */
.cele-card[b-bpeboudgm5] {
    position: fixed;
    z-index: 41;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(24rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2.5rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.4rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom));
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    animation: cele-pop-b-bpeboudgm5 .25s ease-out;
}

@keyframes cele-pop-b-bpeboudgm5 {
    0% {
        transform: translate(-50%, -50%) scale(.85);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.cele-emoji[b-bpeboudgm5] {
    font-size: 2.6rem;
    line-height: 1;
}

.cele-title[b-bpeboudgm5] {
    margin: .5rem 0 .2rem;
    font-size: var(--fs-xl);
    font-weight: var(--fw-heavy);
}

.cele-sub[b-bpeboudgm5] {
    margin: 0 0 1rem;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--ink-dim);
}

/* Medal headline on the brand gradient, echoing the solved banner. */
.cele-medal[b-bpeboudgm5] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: var(--on-accent);
}

.cele-medal-icon[b-bpeboudgm5] {
    font-size: var(--fs-xl);
    line-height: 1;
}

.cele-medal-name[b-bpeboudgm5] {
    font-weight: var(--fw-heavy);
    letter-spacing: .02em;
}

/* Receipt-style breakdown: label left, value right. */
.cele-breakdown[b-bpeboudgm5] {
    width: 100%;
    margin: 0 0 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.cele-breakdown div[b-bpeboudgm5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: .45rem .2rem;
    font-size: var(--fs-md);
}

.cele-breakdown dt[b-bpeboudgm5] {
    margin: 0;
    color: var(--ink-dim);
}

.cele-breakdown dd[b-bpeboudgm5] {
    margin: 0;
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}

.cele-deduct dd[b-bpeboudgm5] {
    color: var(--danger);
}

/* The final score, ruled off and emphasised. */
.cele-total[b-bpeboudgm5] {
    border-top: 1px solid var(--hairline);
    margin-top: .25rem;
}

.cele-total dt[b-bpeboudgm5] {
    color: var(--ink) !important;
    font-weight: var(--fw-heavy);
}

.cele-total dd[b-bpeboudgm5] {
    font-size: var(--fs-xl);
    font-weight: var(--fw-heavy);
    color: var(--accent);
}

.cele-actions[b-bpeboudgm5] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.cele-actions button[b-bpeboudgm5] {
    width: 100%;
    padding: .7rem 1.1rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-heavy);
    cursor: pointer;
}

/* Share is the headline action: accent fill with a leading icon. */
.cele-share[b-bpeboudgm5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: none;
    background: var(--accent);
    color: var(--on-accent);
}

.cele-share:hover[b-bpeboudgm5] {
    filter: brightness(1.05);
}

.cele-share svg[b-bpeboudgm5] {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Done is the quiet way out. */
.cele-done[b-bpeboudgm5] {
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--ink);
}

.cele-done:hover[b-bpeboudgm5] {
    background: var(--key-active);
}

.cele-share-note[b-bpeboudgm5] {
    margin: .7rem 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-dim);
}

/* Respect a reduced-motion preference: keep the card, drop the moving confetti and
   the pop. */
@media (prefers-reduced-motion: reduce) {
    .confetti[b-bpeboudgm5] {
        display: none;
    }

    .cele-card[b-bpeboudgm5] {
        animation: none;
    }
}
/* /Components/ClueBar.razor.rz.scp.css */
.clue-bar[b-v1akkq08r6] {
    display: flex;
    align-items: stretch;
    gap: 1px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.nav[b-v1akkq08r6] {
    flex: 0 0 auto;
    width: 2.75rem;
    border: none;
    background: transparent;
    color: var(--on-accent);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nav:active[b-v1akkq08r6] {
    background: rgba(0, 0, 0, .15);
}

.help[b-v1akkq08r6] {
    flex: 0 0 auto;
    width: 2.5rem;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .25);
    background: transparent;
    color: var(--on-accent);
    font-size: var(--fs-xl);
    font-weight: var(--fw-heavy);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.help:active[b-v1akkq08r6] {
    background: rgba(0, 0, 0, .15);
}

.body[b-v1akkq08r6] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    min-width: 0;
    padding: .7rem .5rem;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.label[b-v1akkq08r6] {
    flex: 0 0 auto;
    font-weight: var(--fw-heavy);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .85;
}

/* Full body width (label sits above, not beside) so the clue wraps less. */
.text[b-v1akkq08r6] {
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    line-height: 1.4;
}
/* /Components/ClueTypesGuide.razor.rz.scp.css */
/* Shares the tutorial dialog's centred scrim + floating-card look, but the body is a
   long scrollable reference rather than a stepped walkthrough. */

.ct-scrim[b-nwy65gri9l] {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(8, 12, 20, .45);
}

.ct-card[b-nwy65gri9l] {
    position: fixed;
    z-index: 31;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(32rem, calc(100vw - 1.75rem));
    max-height: min(46rem, calc(100dvh - 2.5rem));
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* ── Header ────────────────────────────────────────────── */
.ct-head[b-nwy65gri9l] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .75rem .7rem 1.1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
}

.ct-title[b-nwy65gri9l] {
    font-weight: var(--fw-heavy);
    font-size: var(--fs-md);
    color: var(--ink-dim);
    letter-spacing: .02em;
}

.ct-x[b-nwy65gri9l] {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-dim);
    cursor: pointer;
    transition: background-color .08s ease;
}

.ct-x:hover[b-nwy65gri9l] {
    background: var(--key-active);
}

.ct-x svg[b-nwy65gri9l] {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* ── Body ──────────────────────────────────────────────── */
.ct-body[b-nwy65gri9l] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.2rem .5rem;
    color: var(--ink);
}

.ct-intro[b-nwy65gri9l] {
    margin: 0 0 1rem;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--ink-dim);
}

.ct-item[b-nwy65gri9l] {
    padding: .8rem 0;
    border-top: 1px solid var(--hairline);
}

.ct-item:first-of-type[b-nwy65gri9l] {
    border-top: none;
    padding-top: .2rem;
}

.ct-name[b-nwy65gri9l] {
    margin: 0 0 .25rem;
    font-size: var(--fs-lg);
    font-weight: var(--fw-heavy);
}

.ct-what[b-nwy65gri9l] {
    margin: 0 0 .5rem;
    font-size: var(--fs-md);
    line-height: 1.4;
}

.ct-signals[b-nwy65gri9l] {
    margin: 0 0 .55rem;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--ink-dim);
}

.ct-tag[b-nwy65gri9l] {
    display: inline-block;
    margin-right: .4rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--cell-inword);
    color: var(--accent);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-heavy);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The worked one-liner: clue on a tinted band, then arrow, then answer. Wraps to two
   rows on a narrow screen rather than overflowing. */
.ct-example[b-nwy65gri9l] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.ct-clue[b-nwy65gri9l] {
    flex: 1 1 auto;
    padding: .4rem .6rem;
    background: var(--cell-inword);
    color: var(--cell-ink);
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    line-height: 1.35;
}

.ct-arrow[b-nwy65gri9l] {
    flex: 0 0 auto;
    color: var(--ink-dim);
    font-weight: var(--fw-heavy);
}

.ct-answer[b-nwy65gri9l] {
    flex: 0 0 auto;
    font-weight: var(--fw-heavy);
    letter-spacing: .04em;
    color: var(--accent);
}

/* Inline reference to the in-app help control. */
.chip[b-nwy65gri9l] {
    display: inline-block;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--cell-inword);
    color: var(--accent);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

/* ── Footer ────────────────────────────────────────────── */
.ct-foot[b-nwy65gri9l] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--hairline);
}

.ct-foot .primary[b-nwy65gri9l] {
    padding: .55rem 1.3rem;
    border: none;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--fs-md);
    font-weight: var(--fw-heavy);
    cursor: pointer;
}

.ct-foot .primary:hover[b-nwy65gri9l] {
    filter: brightness(1.05);
}
/* /Components/CrosswordGrid.razor.rz.scp.css */
.grid[b-85qsyrmvr5] {
    display: grid;
    grid-template-columns: repeat(var(--size), 1fr);
    gap: var(--grid-gap);
    width: 100%;
    max-width: min(92vw, 60vh);
    /* Cells are light "paper" in both themes. Pin the region to the light UA
       scheme so the native <button> cells never fall back to dark form-control
       rendering (dark face + light glyph) — which Firefox on mobile paints on
       resume from background when the author custom-property fill isn't
       re-resolved. See color-scheme: light dark at :root. */
    color-scheme: light;
    /* Approx rendered size of one cell, so glyphs scale with the grid
       (not the viewport) and stay legible from a 5×5 mini to a 13×13. */
    --cell-size: calc(min(92vw, 60vh) / var(--size));
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    background: var(--grid-line);
    border: var(--grid-gap) solid var(--grid-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-grid);
}

.cell[b-85qsyrmvr5] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    /* Fully author-styled — strip native control chrome so no UA background or
       text colour survives to be painted on resume. */
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--cell-ink);
    background: var(--cell-bg);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .08s ease;
}

.cell.block[b-85qsyrmvr5] {
    background: var(--block-bg);
    cursor: default;
}

.cell.in-word[b-85qsyrmvr5] {
    background: var(--cell-inword);
}

.cell.selected[b-85qsyrmvr5] {
    background: var(--cell-selected);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.letter[b-85qsyrmvr5] {
    font-size: calc(var(--cell-size) * .55);
    line-height: 1;
}

/* A letter flagged wrong by "check this word" — stays red until edited. */
.cell.incorrect .letter[b-85qsyrmvr5] {
    color: #d6263b;
    font-weight: var(--fw-heavy);
}

/* A letter confirmed right by "check this word" — stays green until edited. */
.cell.correct .letter[b-85qsyrmvr5] {
    color: #1a8f3c;
    font-weight: var(--fw-heavy);
}

.num[b-85qsyrmvr5] {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: calc(var(--cell-size) * .28);
    font-weight: var(--fw-semibold);
    color: var(--cell-num);
    pointer-events: none;
}
/* /Components/OnScreenKeyboard.razor.rz.scp.css */
.keyboard[b-qzp0zyrdvz] {
    /* Never shrink: the keyboard keeps its full height so its bottom row can't be
       clipped off-screen — the grid (and, if needed, the clue) give way instead. */
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    /* Cap and centre the keyboard so keys size off the container (not the raw
       viewport). Every row then fills the same width and stays aligned. */
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    background: var(--keyboard-bg);
    user-select: none;
}

.krow[b-qzp0zyrdvz] {
    display: flex;
    gap: 5px;
}

.key[b-qzp0zyrdvz] {
    flex: 1 1 0;
    min-width: 0;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--key-bg);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    box-shadow: 0 1px 0 var(--key-shadow);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .05s ease, transform .05s ease;
}

.key:active[b-qzp0zyrdvz] {
    background: var(--key-active);
    transform: translateY(1px);
}

/* The backspace and the balancing left spacer each span 1.5 letter-slots, so
   Z–M stays centred and the row aligns with the rows above. */
.key.wide[b-qzp0zyrdvz] {
    flex: 1.5 1 0;
    background: var(--key-special);
    font-size: var(--fs-xl);
}

/* Invisible filler that mirrors the backspace key's footprint. */
.key.spacer[b-qzp0zyrdvz] {
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}
/* /Components/Tutorial.razor.rz.scp.css */
/* Centred first-run dialog. Shares the scrim + floating-surface look of the help
   menu, but sized as a modal so the worked examples have room to breathe. */

.tut-scrim[b-6gfnu0fjbh] {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(8, 12, 20, .45);
}

.tut-card[b-6gfnu0fjbh] {
    position: fixed;
    z-index: 31;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(30rem, calc(100vw - 1.75rem));
    max-height: min(42rem, calc(100dvh - 2.5rem));
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* ── Header ────────────────────────────────────────────── */
.tut-head[b-6gfnu0fjbh] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .75rem .7rem 1.1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
}

.tut-title[b-6gfnu0fjbh] {
    font-weight: var(--fw-heavy);
    font-size: var(--fs-md);
    color: var(--ink-dim);
    letter-spacing: .02em;
}

.tut-x[b-6gfnu0fjbh] {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-dim);
    cursor: pointer;
    transition: background-color .08s ease;
}

.tut-x:hover[b-6gfnu0fjbh] {
    background: var(--key-active);
}

.tut-x svg[b-6gfnu0fjbh] {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* ── Body ──────────────────────────────────────────────── */
.tut-body[b-6gfnu0fjbh] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.1rem 1.2rem .4rem;
    color: var(--ink);
    line-height: 1.5;
}

.tut-body p[b-6gfnu0fjbh] {
    margin: 0 0 .8rem;
    font-size: var(--fs-md);
}

.tut-h[b-6gfnu0fjbh] {
    margin: 0 0 .9rem;
    font-size: var(--fs-xl);
    font-weight: var(--fw-heavy);
    line-height: 1.2;
}

.tut-note[b-6gfnu0fjbh] {
    color: var(--ink-dim);
    font-size: var(--fs-sm);
}

/* ── Lists ─────────────────────────────────────────────── */
.tut-list[b-6gfnu0fjbh] {
    margin: 0 0 .9rem;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: var(--fs-md);
}

.tut-list li[b-6gfnu0fjbh] {
    line-height: 1.45;
}

/* Inline pills that label the two halves of a clue. */
.tag[b-6gfnu0fjbh] {
    display: inline-block;
    margin-right: .35rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-heavy);
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: .08em;
}

.def-tag[b-6gfnu0fjbh] {
    color: var(--on-accent);
    background: var(--accent);
}

.play-tag[b-6gfnu0fjbh] {
    color: var(--accent);
    background: var(--cell-inword);
}

.enum[b-6gfnu0fjbh] {
    font-weight: var(--fw-heavy);
    font-variant-numeric: tabular-nums;
    color: var(--ink-dim);
}

/* ── Worked example ────────────────────────────────────── */
.tut-clue[b-6gfnu0fjbh] {
    margin: 0 0 1rem !important;
    padding: .7rem .8rem;
    text-align: center;
    background: var(--cell-inword);
    color: var(--cell-ink);
    border-radius: var(--radius-md);
    font-size: var(--fs-lg);
    line-height: 1.4;
}

/* The definition: underlined in the brand accent. */
.tut-clue .def[b-6gfnu0fjbh] {
    font-weight: var(--fw-heavy);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 1px;
}

/* The wordplay signal word: quietly italic. */
.tut-clue .ind[b-6gfnu0fjbh] {
    font-style: italic;
    color: var(--ink-dim);
}

/* The raw letters the wordplay operates on. */
.tut-clue .fodder[b-6gfnu0fjbh] {
    font-weight: var(--fw-bold);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.tut-breakdown[b-6gfnu0fjbh] {
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.tut-breakdown div[b-6gfnu0fjbh] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
}

.tut-breakdown dt[b-6gfnu0fjbh] {
    flex: 0 0 5.2rem;
    margin: 0;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-heavy);
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
}

.tut-breakdown dd[b-6gfnu0fjbh] {
    margin: 0;
    flex: 1 1 auto;
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.tut-answer[b-6gfnu0fjbh] {
    margin: 0 0 .8rem !important;
    padding: .65rem .8rem;
    text-align: center;
    font-size: var(--fs-lg);
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: var(--on-accent);
    border-radius: var(--radius-md);
    font-variant-numeric: tabular-nums;
}

.tut-answer strong[b-6gfnu0fjbh] {
    letter-spacing: .08em;
}

/* The hidden answer, lit up inside its carrier letters. */
.tut-answer .hit[b-6gfnu0fjbh] {
    background: var(--cell-selected);
    color: var(--cell-ink);
    border-radius: var(--radius-sm);
    padding: 0 .15rem;
    font-weight: var(--fw-heavy);
}

/* Inline references to in-app controls. */
.chip[b-6gfnu0fjbh] {
    display: inline-block;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--cell-inword);
    color: var(--accent);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.medal[b-6gfnu0fjbh] {
    font-size: var(--fs-lg);
    vertical-align: -.1em;
}

/* ── Welcome fork ──────────────────────────────────────── */
.tut-choices[b-6gfnu0fjbh] {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin: 1rem 0 .9rem;
}

.choice[b-6gfnu0fjbh] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    width: 100%;
    padding: .8rem 1rem;
    text-align: left;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .08s ease, background-color .08s ease;
}

.choice:hover[b-6gfnu0fjbh] {
    border-color: var(--accent);
    background: var(--cell-inword);
}

/* The newcomer path is the steer for someone who opened the guide. */
.choice.primary[b-6gfnu0fjbh] {
    border-color: var(--accent);
    background: var(--cell-inword);
}

.choice.primary:hover[b-6gfnu0fjbh] {
    filter: brightness(1.03);
}

/* The primary card is highlighted by default, but once the cursor is over the group
   the highlight should follow it: drop the primary's default emphasis unless it's the
   card actually being hovered, so two cards never look selected at once. */
.tut-choices:hover .choice.primary:not(:hover)[b-6gfnu0fjbh] {
    border-color: var(--hairline);
    background: var(--surface);
    filter: none;
}

.tut-choices:hover .choice.primary:not(:hover) .choice-title[b-6gfnu0fjbh] {
    color: var(--ink);
}

.tut-choices:hover .choice.primary:not(:hover) .choice-sub[b-6gfnu0fjbh] {
    color: var(--ink-dim);
}

.choice-title[b-6gfnu0fjbh] {
    font-size: var(--fs-md);
    font-weight: var(--fw-heavy);
}

.choice-sub[b-6gfnu0fjbh] {
    font-size: var(--fs-sm);
    color: var(--ink-dim);
}

/* The paper-blue background stays light in both themes, so its text must stay dark
   too (same reason cells use --cell-ink, not the theme-flipping --ink). Without this,
   dark mode renders near-white text on pale blue. */
.choice.primary .choice-title[b-6gfnu0fjbh],
.choice:hover .choice-title[b-6gfnu0fjbh] {
    color: var(--cell-ink);
}

.choice.primary .choice-sub[b-6gfnu0fjbh],
.choice:hover .choice-sub[b-6gfnu0fjbh] {
    color: var(--cell-num);
}

/* ── Footer ────────────────────────────────────────────── */
.tut-foot[b-6gfnu0fjbh] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--hairline);
}

/* Variant carrying a single centred tip instead of dots + nav. */
.tut-foot.tip[b-6gfnu0fjbh] {
    justify-content: center;
}

.tut-tip[b-6gfnu0fjbh] {
    font-size: var(--fs-sm);
    line-height: 1.4;
    text-align: center;
    color: var(--ink-dim);
}

.tut-dots[b-6gfnu0fjbh] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.dot[b-6gfnu0fjbh] {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--hairline);
    transition: background-color .12s ease, transform .12s ease;
}

.dot.on[b-6gfnu0fjbh] {
    background: var(--accent);
    transform: scale(1.25);
}

.tut-actions[b-6gfnu0fjbh] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tut-actions button[b-6gfnu0fjbh] {
    padding: .55rem 1.1rem;
    border-radius: 999px;
    font-size: var(--fs-md);
    font-weight: var(--fw-heavy);
    cursor: pointer;
}

.tut-actions .ghost[b-6gfnu0fjbh] {
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--ink);
}

.tut-actions .ghost:hover[b-6gfnu0fjbh] {
    background: var(--key-active);
}

.tut-actions .primary[b-6gfnu0fjbh] {
    border: none;
    background: var(--accent);
    color: var(--on-accent);
}

.tut-actions .primary:hover[b-6gfnu0fjbh] {
    filter: brightness(1.05);
}
/* /Pages/Play.razor.rz.scp.css */
.play[b-2b2dc7wxx5] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    /* Never let the play surface itself scroll — the flexible middle region
       absorbs any squeeze, so the ad slot stays pinned at the top in every view. */
    overflow: hidden;
    outline: none;
    background: var(--bg);
}

.loading[b-2b2dc7wxx5] {
    display: grid;
    place-items: center;
    height: 100dvh;
    color: var(--ink-dim);
}

/* The top ad slot lives in AdBanner.razor (+ AdBanner.razor.css). */

/* ── App bar ───────────────────────────────────────────── */
.app-bar[b-2b2dc7wxx5] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
}

.titles[b-2b2dc7wxx5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.title[b-2b2dc7wxx5] {
    font-weight: var(--fw-heavy);
    font-size: var(--fs-lg);
    line-height: 1.1;
}

.setter[b-2b2dc7wxx5] {
    font-size: var(--fs-xs);
    color: var(--ink-dim);
}

.setter a[b-2b2dc7wxx5] {
    color: var(--accent);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.setter a:hover[b-2b2dc7wxx5] {
    text-decoration: underline;
}

/* Score chip + its tap-to-open scoring popover. position:relative anchors the
   popover; z-index lifts the chip and popover above the full-screen close scrim. */
.score-wrap[b-2b2dc7wxx5] {
    margin-left: auto;
    position: relative;
    z-index: 16;
}

.score[b-2b2dc7wxx5] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: var(--key-bg);
    border: 1px solid var(--hairline);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-heavy);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .08s ease;
}

.score:hover[b-2b2dc7wxx5] {
    background: var(--key-active);
}

.score-icon[b-2b2dc7wxx5] {
    font-size: var(--fs-md);
    line-height: 1;
}

/* Scoring explainer, anchored under the chip and flush to the right edge. Mirrors
   the help/overflow menu surface language, sized for a short paragraph + medal key. */
.score-info[b-2b2dc7wxx5] {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    width: min(20rem, calc(100vw - 1.5rem));
    padding: .85rem 1rem 1rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--ink);
    font-weight: var(--fw-regular);
    text-align: left;
}

.si-head[b-2b2dc7wxx5] {
    font-size: var(--fs-xs);
    font-weight: var(--fw-heavy);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: .5rem;
}

.score-info p[b-2b2dc7wxx5] {
    margin: 0 0 .7rem;
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.si-medals[b-2b2dc7wxx5] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: var(--fs-sm);
}

.si-icon[b-2b2dc7wxx5] {
    display: inline-block;
    width: 1.4rem;
}

/* Top-right overflow ("...") menu. position:relative anchors the dropdown; the
   z-index lifts the trigger + dropdown above the full-screen close scrim. */
.overflow[b-2b2dc7wxx5] {
    flex: 0 0 auto;
    position: relative;
    z-index: 16;
}

.kebab[b-2b2dc7wxx5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-dim);
    cursor: pointer;
    transition: background-color .08s ease, color .08s ease;
}

.kebab:hover[b-2b2dc7wxx5] {
    background: var(--key-active);
    color: var(--ink);
}

.kebab svg[b-2b2dc7wxx5] {
    width: 1.3rem;
    height: 1.3rem;
    fill: currentColor;
}

/* Dropdown anchored under the kebab, flush to the right edge. Mirrors the help
   menu's surface/hairline/shadow language. */
.overflow-menu[b-2b2dc7wxx5] {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    min-width: 11rem;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.overflow-menu button[b-2b2dc7wxx5] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    border: none;
    background: transparent;
    color: var(--ink);
    text-align: left;
    font-size: var(--fs-md);
    white-space: nowrap;
    cursor: pointer;
}

.overflow-menu button:not(:last-child)[b-2b2dc7wxx5] {
    border-bottom: 1px solid var(--hairline);
}

.overflow-menu button:hover[b-2b2dc7wxx5] {
    background: var(--cell-inword);
}

/* ── Help menu (anchored above the dock) ───────────────── */
.menu-scrim[b-2b2dc7wxx5] {
    position: fixed;
    inset: 0;
    z-index: 15;
}

.help-menu[b-2b2dc7wxx5] {
    position: fixed;
    left: 50%;
    bottom: calc(11.5rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 16;
    width: min(20rem, calc(100vw - 1.5rem));
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.help-head[b-2b2dc7wxx5] {
    padding: .7rem 1rem;
    font-size: var(--fs-sm);
    color: var(--ink-dim);
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
}

.help-menu button[b-2b2dc7wxx5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    border: none;
    background: transparent;
    color: var(--ink);
    text-align: left;
    font-size: var(--fs-md);
    cursor: pointer;
}

.help-menu button:not(:last-child)[b-2b2dc7wxx5] {
    border-bottom: 1px solid var(--hairline);
}

.help-menu button:active[b-2b2dc7wxx5] {
    background: var(--cell-inword);
}

.cost[b-2b2dc7wxx5] {
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    font-weight: var(--fw-heavy);
    color: var(--accent);
    background: var(--cell-inword);
    border-radius: 999px;
    padding: .1rem .45rem;
}

/* A free aid (e.g. "Check this word") reads as muted, not a spend. */
.free-cost[b-2b2dc7wxx5] {
    color: var(--ink-dim);
    background: transparent;
    border: 1px solid var(--hairline);
}

/* A revealed hint rung, shown read-only above the remaining actions. */
.hint-info[b-2b2dc7wxx5] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .7rem 1rem;
    font-size: var(--fs-sm);
    line-height: 1.35;
    color: var(--ink);
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
}

.hint-tag[b-2b2dc7wxx5] {
    flex: 0 0 auto;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-heavy);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ── Solved banner ─────────────────────────────────────── */
.solved-banner[b-2b2dc7wxx5] {
    flex: 0 0 auto;
    margin: .5rem 1rem 0;
    padding: .7rem;
    text-align: center;
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--on-accent);
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.solved-banner:hover[b-2b2dc7wxx5] {
    filter: brightness(1.04);
}

/* ── Board ─────────────────────────────────────────────── */
.board[b-2b2dc7wxx5] {
    flex: 1 1 auto;
    /* min-height:0 lets the board shrink instead of pushing the ad/app-bar
       off the top of a short viewport. */
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow: hidden;
}

/* ── Bottom dock ───────────────────────────────────────── */
.dock[b-2b2dc7wxx5] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .5rem .5rem 0;
    background: var(--keyboard-bg);
    border-top: 1px solid var(--hairline);
}

/* Hint + collapse toggle on one line, under the clue. Only useful where a
   physical keyboard exists, so hidden by default and revealed on fine-pointer
   devices. */
.dock-tools[b-2b2dc7wxx5] {
    display: none;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    padding: .15rem .25rem;
}

@media (hover: hover) and (pointer: fine) {
    .dock-tools[b-2b2dc7wxx5] {
        display: flex;
    }
}

/* When the keyboard is collapsed, this row is the last thing in the dock and
   must carry the bottom safe-area inset the keyboard would otherwise provide. */
.dock-tools:last-child[b-2b2dc7wxx5] {
    padding-bottom: calc(.45rem + env(safe-area-inset-bottom));
}

.kbd-hint[b-2b2dc7wxx5] {
    font-size: var(--fs-sm);
    color: var(--ink-dim);
}

/* Compact chevron "handle" — collapses/expands the on-screen keyboard.
   margin-left:auto keeps it right-aligned whether or not the hint is shown. */
.kbd-toggle[b-2b2dc7wxx5] {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 1.1rem;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-dim);
    line-height: 1;
    cursor: pointer;
}

.kbd-toggle:hover[b-2b2dc7wxx5] {
    color: var(--ink);
}

.chevron[b-2b2dc7wxx5] {
    font-size: var(--fs-xs);
    line-height: 1;
}

/* ── Mobile grid overview ──────────────────────────────── */
.overview-hint[b-2b2dc7wxx5] {
    flex: 0 0 auto;
    text-align: center;
    padding: .5rem 0 calc(.9rem + env(safe-area-inset-bottom));
    font-size: var(--fs-sm);
    color: var(--ink-dim);
}

/* ── Mobile focused solve view ─────────────────────────── */
.solve[b-2b2dc7wxx5] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--keyboard-bg);
    border-top: 1px solid var(--hairline);
}

/* One cohesive card that groups the solving controls (header + answer + clue) and
   floats on the grey backdrop, with the context grid above it. It may shrink on a
   short viewport (the clue scrolls as a last resort) so the keyboard always fits. */
.solve-panel[b-2b2dc7wxx5] {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: .5rem .5rem .6rem;
    padding: .55rem .6rem .65rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* Header and answer keep their size; only the clue gives when the panel shrinks. */
.panel-head[b-2b2dc7wxx5] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.solve-panel[b-2b2dc7wxx5]  .answer {
    flex: 0 0 auto;
}

.solve-label[b-2b2dc7wxx5] {
    font-size: var(--fs-xs);
    font-weight: var(--fw-heavy);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

/* Context grid above the focused clue. Takes whatever vertical space the clue
   and keyboard leave, and scales to fit both dimensions so it grows on tall
   screens and collapses gracefully where there's nothing to spare. */
.solve-grid[b-2b2dc7wxx5] {
    /* High shrink factor: on a short viewport the context grid collapses away
       first, so the clue stays readable longer before the panel itself shrinks. */
    flex: 1 1000 auto;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: .5rem .5rem 0;
    overflow: hidden;
}

/* Size the grid to the smaller of the region's width and height (not just its
   width) so it never overflows the space the clue/keyboard leave. */
.solve-grid[b-2b2dc7wxx5]  .grid {
    width: auto;
    height: 100%;
    max-width: min(92vw, 100%);
    max-height: 100%;
}

/* Header controls: prev/next paired on the left of the help/close, all pushed to
   the right of the clue label. Round, low-key icon buttons that read as a toolbar
   rather than competing with the answer and clue below. */
.clue-controls[b-2b2dc7wxx5] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.cc-sep[b-2b2dc7wxx5] {
    width: .35rem;
}

.solve .nav[b-2b2dc7wxx5],
.solve .help[b-2b2dc7wxx5],
.solve .close[b-2b2dc7wxx5] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink-dim);
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .08s ease;
}

/* SVG icons centre exactly on the viewBox, unlike the angle-quote/✕ glyphs which
   sit low in the system font. currentColor inherits the button's ink. */
.solve .nav svg[b-2b2dc7wxx5],
.solve .close svg[b-2b2dc7wxx5] {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.solve .help[b-2b2dc7wxx5] {
    font-size: var(--fs-lg);
    font-weight: var(--fw-heavy);
    color: var(--accent);
}

.solve .nav:active[b-2b2dc7wxx5],
.solve .help:active[b-2b2dc7wxx5],
.solve .close:active[b-2b2dc7wxx5] {
    background: var(--key-active);
}

/* The clue sits at the foot of the panel as a soft accent-tinted band — echoing the
   highlighted in-word cells — rather than a loud solid block. It sizes to content,
   so a long clue grows the panel downward (the grid above flexes to absorb it)
   and the full width keeps it to as few lines as possible. */
.solve-text[b-2b2dc7wxx5] {
    flex: 0 1 auto;
    min-height: 0;
    margin: 0;
    padding: .5rem .65rem;
    background: var(--cell-inword);
    color: var(--cell-ink);
    border-radius: var(--radius-md);
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    line-height: 1.35;
    text-align: center;
    /* Wrap even an over-long token, so it grows the panel downward into the grid's
       space. It only scrolls as a last resort when the viewport is too short to show
       the whole clue and keep the keyboard on screen. */
    overflow-wrap: anywhere;
    overflow-y: auto;
}

/* Visually hidden but available to screen readers and as a focus target — the page's
   h1 landmark, which FocusOnNavigate moves focus to on navigation. */
.sr-only[b-2b2dc7wxx5] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}