.answer-area.crossword-board {
    display: grid !important;

    grid-template-columns:
        repeat(
            var(--crossword-columns),
            minmax(28px, 44px)
        );

    grid-auto-rows:
        minmax(28px, 44px);

    justify-content: center;
    align-content: center;

    gap: 3px;

    width: min(100%, 720px);

    margin-inline: auto;
}


.crossword-cell {
    display: grid;
    place-items: center;

    width: 100%;
    aspect-ratio: 1 / 1;

    border-radius: 7px;

    border:
        1px solid
        rgba(255, 255, 255, 0.50);

    background:
        rgba(19, 28, 51, 0.48);

    backdrop-filter:
        blur(5px);

    color: white;

    font-weight: 800;
    font-size:
        clamp(
            0.9rem,
            3vw,
            1.2rem
        );

    text-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.85);
}


.crossword-cell.is-filled {
    background:
        rgba(74, 137, 205, 0.76);

    border-color:
        rgba(210, 235, 255, 0.95);

    box-shadow:
        0 0 12px
        rgba(89, 174, 255, 0.30);
}


@media (max-width: 600px) {
    .answer-area.crossword-board {
        grid-template-columns:
            repeat(
                var(--crossword-columns),
                minmax(24px, 9vw)
            );

        grid-auto-rows:
            minmax(24px, 9vw);

        gap: 2px;
    }
}


/*
 * Crossword layout always owns answer-area presentation.
 */
.answer-area.crossword-board {
    display: grid !important;
    flex-direction: initial !important;
    align-items: initial !important;
}


/* =========================================================
   Study crossword numbering
   ========================================================= */

.crossword-cell[
    data-clue-number
] {
    position: relative;
}

.crossword-cell[
    data-clue-number
]::before {
    content:
        attr(
            data-clue-number
        );

    position: absolute;

    top: 2px;
    left: 4px;

    font-size: 0.48rem;
    font-weight: 800;

    line-height: 1;

    color:
        rgba(
            220,
            232,
            245,
            0.76
        );
}


/* Standard crossword start-cell numbering */

.crossword-cell {
    position: relative;
}

.crossword-cell[data-number]::before {
    content:
        attr(data-number);

    position: absolute;

    top: 2px;
    left: 3px;

    font-size:
        clamp(
            0.42rem,
            0.52vw,
            0.58rem
        );

    font-weight: 700;

    line-height: 1;

    color:
        rgba(
            232,
            203,
            128,
            0.86
        );

    pointer-events: none;
}