/* /Components/AnswerBoxes.razor.rz.scp.css */
.answer[b-mlvl7bswhm] {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    padding: .35rem .25rem;
    /* Keep the row from being squeezed; let it scroll if the word is long. */
    scrollbar-width: none;
}

.answer[b-mlvl7bswhm]::-webkit-scrollbar {
    display: none;
}

.abox[b-mlvl7bswhm] {
    position: relative;
    flex: 0 0 auto;
    width: clamp(1.7rem, 8.5vw, 2.9rem);
    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: 700;
    font-size: 1.25rem;
    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: .55rem;
    font-weight: 600;
    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: 800;
}
/* /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: 1.2rem;
    font-weight: 800;
    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: 800;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .85;
}

/* Full body width (label sits above, not beside) so the clue wraps less. */
.text[b-v1akkq08r6] {
    font-size: 1.05rem;
    line-height: 1.4;
}
/* /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);
    /* 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;
    font-family: inherit;
    font-weight: 700;
    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: 800;
}

.num[b-85qsyrmvr5] {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: calc(var(--cell-size) * .28);
    font-weight: 600;
    color: var(--cell-num);
    pointer-events: none;
}
/* /Components/OnScreenKeyboard.razor.rz.scp.css */
.keyboard[b-qzp0zyrdvz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--keyboard-bg);
    user-select: none;
}

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

.key[b-qzp0zyrdvz] {
    flex: 1 1 0;
    min-width: 0;
    height: 3rem;
    max-width: 2.75rem;
    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: 1.1rem;
    font-weight: 600;
    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);
}

.key.wide[b-qzp0zyrdvz] {
    flex: 1.4 1 0;
    max-width: 3.4rem;
    background: var(--key-special);
    font-size: 1.25rem;
}

/* Invisible filler that mirrors the backspace key's footprint. */
.key.spacer[b-qzp0zyrdvz] {
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}
/* /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);
}

/* ── Ad slot ───────────────────────────────────────────── */
.ad-slot[b-2b2dc7wxx5] {
    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: 1px dashed var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.ad-tag[b-2b2dc7wxx5] {
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-dim);
    opacity: .6;
}

/* ── 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: 800;
    font-size: 1.05rem;
    line-height: 1.1;
}

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

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

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

.score[b-2b2dc7wxx5] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: var(--key-bg);
    border: 1px solid var(--hairline);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.score-icon[b-2b2dc7wxx5] {
    font-size: .95rem;
    line-height: 1;
}

/* ── 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: .8rem;
    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: .95rem;
    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: .72rem;
    font-weight: 800;
    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: .9rem;
    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: .62rem;
    font-weight: 800;
    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-weight: 700;
    color: var(--on-accent);
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* ── 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: .8rem;
    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: .7rem;
    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: .85rem;
    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);
}

.solve-tools[b-2b2dc7wxx5] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem .15rem;
}

.grid-btn[b-2b2dc7wxx5] {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

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

.solve-label[b-2b2dc7wxx5] {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    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] {
    flex: 1 1 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%;
}

/* The clue card sizes to its content rather than filling the screen, capped so
   long cryptics scroll internally instead of crowding out the grid above. */
.solve-clue[b-2b2dc7wxx5] {
    flex: 0 1 auto;
    max-height: 30vh;
    display: flex;
    align-items: center;
    gap: .25rem;
    min-height: 0;
    margin: .35rem .5rem .5rem;
    padding: .4rem .25rem;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.solve-text[b-2b2dc7wxx5] {
    flex: 1 1 auto;
    margin: 0;
    padding: 0 .35rem;
    font-size: 1.05rem;
    line-height: 1.3;
    text-align: center;
    overflow-y: auto;
    max-height: 100%;
}

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

.solve .help[b-2b2dc7wxx5] {
    flex: 0 0 auto;
    align-self: stretch;
    width: 2.25rem;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .25);
    background: transparent;
    color: var(--on-accent);
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.solve .nav:active[b-2b2dc7wxx5],
.solve .help:active[b-2b2dc7wxx5] {
    background: rgba(0, 0, 0, .15);
}