/* ============================================================
   crossword.css — Vocabulary Crossword exercise styling.

   Restyled from the prototype's newspaper aesthetic to match the
   rest of the site (cream warm bg, dashed borders, accent color).
   Mounted via ExerciseHost.enter() into .card-area-stage, same
   pattern as .vocab-match-game.
   ============================================================ */

/* ── Overlay container ─────────────────────────────────────── */
.crossword-game {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 2;
    background: var(--bg);
    border: var(--dash);
    border-radius: 14px;
    padding: 14px;
    box-sizing: border-box;
    overflow: auto;
}
.crossword-game.active {
    opacity: 1;
    pointer-events: auto;
}

.crossword-root {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 0;
    min-height: 0;
}

/* ── Header (Exit + status) ────────────────────────────────── */
.crossword-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.crossword-exit-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color 0.12s, background 0.12s;
}
@media (hover: hover) {
    .crossword-exit-btn:hover {
        color: var(--accent);
        background: var(--accent-bg);
    }
}
.crossword-status {
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* ── Active-clue banner ────────────────────────────────────── */
.crossword-banner {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--subtle-border);
    border-radius: 8px;
    background: var(--bg-outer);
    min-height: 40px;
    box-sizing: border-box;
}
.crossword-banner-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    font-size: 1rem;
}
.crossword-banner-dir {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.crossword-banner-text {
    font-size: 0.95rem;
    color: var(--text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crossword-banner-solved {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    color: var(--green, var(--accent));
}

/* ── Body (3-column grid on desktop) ───────────────────────── */
/* Across | Board | Down — Across left-justified against the game's
   left edge, Down right-justified against the right edge, board
   centered between them. The clue columns auto-size to share the
   remaining space evenly (1fr each), so they grow / shrink with the
   viewport. The writing canvas is rendered as an overlay (see
   .crossword-writing below) so it doesn't take a grid cell. */
.crossword-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    flex: 1 1 0;
    min-height: 0;
}
/* Vertical stack that owns the board + the actions toolbar so the
   buttons sit directly under the puzzle. Sized to content (the
   board's natural square + the actions) instead of stretching to
   fill remaining body width, which is what keeps the row gaps
   uniform. */
.crossword-board-col {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
}

.crossword-board-wrap {
    /* Height-driven on desktop: takes the full vertical space of the
       body row, board inside is a square with width derived from
       height (aspect-ratio 1/1). Width then naturally matches height
       so board-col packs tightly against the canvas + clue columns. */
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
}
/* Four-column desktop layout:
   Across clues | Puzzle | Canvas | Down clues
   Canvas flanks the puzzle directly so it doesn't steal vertical
   space from the board. Mobile collapses to a single column with the
   writing canvas overlayed (see @media block below). */
.crossword-clue-group-across,
.crossword-clue-group-down {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
    min-width: 0;
    padding: 0 4px;
}

/* Writing-canvas card — uses the site-wide GuidedTrace pipeline
   (CanvasDraw + GuidedTrace + ExerciseHost particles), so the user
   gets the same chevron / touchpoint / tapered-ink experience they
   know from Kana mode and the Vocabulary deck study session.
   Rendered as a centered overlay over the board on both desktop and
   mobile; hidden by default, fades in when a word is selected and
   fades out when the word is complete. */
.crossword-writing {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background-color: rgb(from var(--bg) r g b / 0.78);
    border: 1px dashed var(--subtle-border);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    aspect-ratio: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.crossword-writing.crossword-writing-visible {
    opacity: 1;
    pointer-events: auto;
}
.crossword-canvas {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1 / 1;
    height: auto;
    background: transparent;
    border-radius: 6px;
    touch-action: none;
    cursor: crosshair;
    display: block;
    position: relative;
    z-index: 1;
}

/* Portrait / narrow: stack the three body columns vertically. The
   writing canvas already overlays via the base rules above. */
@media (max-width: 720px) {
    .crossword-game {
        overflow-x: hidden;
    }
    .crossword-body {
        /* Mobile layout: board on top spanning full width, Across and
           Down sitting side by side underneath so the user can read
           both clue lists without scrolling between them. Override the
           desktop `flex: 1 1 0` so the grid rows can grow to fit their
           content; the outer .crossword-game scrolls if needed. */
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 12px;
        min-width: 0;
        flex: 0 0 auto;
    }
    .crossword-board-wrap {
        width: 100%;
        flex: 0 0 auto;
        aspect-ratio: 1 / 1;
        height: auto;
    }
    .crossword-board-col {
        grid-row: 1;
        grid-column: 1 / -1;
        width: 100%;
    }
    .crossword-clue-group-across {
        grid-row: 2;
        grid-column: 1;
        max-height: 28vh;
        min-width: 0;
    }
    .crossword-clue-group-down {
        grid-row: 2;
        grid-column: 2;
        max-height: 28vh;
        min-width: 0;
    }
    .crossword-canvas {
        max-width: 200px;
    }
}

/* ── Board ─────────────────────────────────────────────────── */
.crossword-board {
    display: grid;
    /* minmax(0, 1fr) instead of plain 1fr so cells can shrink below
       their min-content size (the kana glyph's intrinsic width).
       Without the explicit 0 floor, a board with many columns floors
       the total width above the viewport and clips on mobile. */
    grid-template-columns: repeat(var(--cw-cols, 10), minmax(0, 1fr));
    grid-template-rows: repeat(var(--cw-rows, 10), minmax(0, 1fr));
    /* Fill the wrap (which itself is sized via aspect-ratio 1/1 +
       height: 100% on desktop, or width: 100% + aspect-ratio: 1/1 on
       mobile). The cells are already constrained by minmax(0, 1fr)
       so they shrink uniformly. */
    width: 100%;
    height: 100%;
    background: var(--subtle-border);
    border: 1.5px solid var(--subtle-border);
    border-radius: 4px;
    gap: 1px;
    box-sizing: border-box;
}
.crossword-slot {
    background: var(--bg-outer);
    position: relative;
}
.crossword-blank {
    background: transparent;
}
.crossword-cell {
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s;
}
.crossword-cell-num {
    position: absolute;
    top: 1px;
    left: 3px;
    font-size: 0.55rem;
    line-height: 1;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.crossword-cell-val {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--text);
    padding-top: 4px;   /* visual centering with the small num glyph */
}
.crossword-cell.crossword-active-word {
    background: var(--accent-bg);
}
.crossword-cell.crossword-active-cell {
    background: var(--accent);
}
.crossword-cell.crossword-active-cell .crossword-cell-val,
.crossword-cell.crossword-active-cell .crossword-cell-num {
    color: #fff;
}
.crossword-cell.crossword-wrong {
    background: rgba(192, 57, 43, 0.18);
}
.crossword-cell.crossword-wrong .crossword-cell-val {
    color: var(--red, var(--accent));
}

/* ── Clue list ─────────────────────────────────────────────── */
.crossword-clue-heading {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--subtle-border);
}
.crossword-clue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.crossword-clue {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 8px;
    align-items: baseline;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s;
    line-height: 1.3;
}
.crossword-clue:hover {
    background: var(--accent-bg);
}
.crossword-clue.crossword-clue-active {
    background: var(--accent-bg);
    box-shadow: inset 2px 0 0 var(--accent);
}
/* Word fully written — strike out the clue text so the user can see
   at a glance what's done. The clue stays tappable for re-selection
   (corrections via Clear). */
.crossword-clue.crossword-clue-done .crossword-clue-text,
.crossword-clue.crossword-clue-done .crossword-clue-num {
    text-decoration: line-through;
    color: var(--text-faint);
}
.crossword-clue-num {
    font-weight: 700;
    text-align: right;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
}
.crossword-clue-text {
    font-size: 0.85rem;
    color: var(--text);
}
.crossword-clue-len {
    font-size: 0.72rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* ── Action toolbar ────────────────────────────────────────── */
.crossword-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 4px;
}
.crossword-action-btn {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1.5px dashed var(--subtle-border);
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
@media (hover: hover) {
    .crossword-action-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-bg);
    }
}
.crossword-action-btn.crossword-action-primary {
    border-style: dashed;
    border-color: var(--accent);
    color: var(--accent);
}