/*
 * QueenK Study Crossword Playfield
 * =================================
 *
 * Owns:
 * - complete Study Crossword viewport composition
 * - Across / Crossword / Down placement
 * - clue-card presentation
 * - progress placement
 * - responsive Study layout
 *
 * Does NOT own:
 * - crossword matrix cell geometry
 * - crossword generation/placement
 * - word-wheel tile/ring geometry
 */


/* =========================================================
   Complete Study game viewport
   ========================================================= */

body.queenk-study-crossword-active {
    --study-wheel-max: 31dvh;

    height: 100dvh;

    overflow-x: hidden;
    overflow-y: hidden;
}


body.queenk-study-crossword-active
.game-shell {
    box-sizing: border-box;

    width: 100%;
    height: 100dvh;
    min-height: 0;

    align-items: stretch;

    overflow: hidden;
}


body.queenk-study-crossword-active
.game-card {
    box-sizing: border-box;

    width: 100%;
    height: 100dvh;
    min-height: 0;
    max-width: none;

    margin: 0 auto;

    padding:
        clamp(6px, 1dvh, 12px)
        clamp(8px, 1.6vw, 24px)
        clamp(6px, 1dvh, 12px);

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* =========================================================
   Compact header
   ========================================================= */

body.queenk-study-crossword-active
.game-header {
    box-sizing: border-box;

    flex: none;

    width: 100%;

    margin:
        0 auto
        clamp(2px, 0.45dvh, 5px);

    text-align: center;
}


body.queenk-study-crossword-active
.game-header h1 {
    margin: 0;
}


body.queenk-study-crossword-active
.game-header p {
    margin-top: 2px;
}


/* =========================================================
   Main playfield

       ACROSS | CROSSWORD | DOWN
       PROGRESS| CROSSWORD |

   Crossword occupies both rows so progress never pushes
   the crossword vertically or overlaps another component.
   ========================================================= */

body.queenk-study-crossword-active
.study-crossword-playfield {
    position: relative;

    left: auto;
    transform: none;

    box-sizing: border-box;

    flex:
        1 1 0;

    width:
        min(
            100%,
            1500px
        );

    min-width: 0;
    min-height: 0;

    margin:
        0 auto
        clamp(2px, 0.45dvh, 5px);

    padding: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.45fr)
        minmax(0, 1fr);

    /*
     * Desktop Study has one authoritative gameplay row.
     *
     * Progress is a fixed HUD element and therefore does not
     * receive playfield grid territory.
     */
    grid-template-rows:
        minmax(0, 1fr);

    grid-template-areas:
        "across crossword down";

    column-gap:
        clamp(
            8px,
            1.5vw,
            24px
        );

    row-gap:
        clamp(
            2px,
            0.5dvh,
            5px
        );

    justify-content: center;
    align-items: stretch;

    overflow: hidden;
}


/*
 * The JS wrappers provide semantics only.
 * The actual groups participate directly in the playfield grid.
 */

body.queenk-study-crossword-active
.study-game-clues {
    grid-column: 1 / 4;
    grid-row: 1;

    min-width: 0;
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.45fr)
        minmax(0, 1fr);

    column-gap:
        clamp(
            8px,
            1.5vw,
            24px
        );

    /*
     * The clue host spans the same row as the crossword.
     * Only the actual clue columns receive pointer events,
     * so the centre crossword remains fully interactive.
     */
    pointer-events: none;
}


body.queenk-study-crossword-active
.study-game-clues__columns {
    display: contents;
}


body.queenk-study-crossword-active
.study-game-clues__heading {
    display: none;
}


body.queenk-study-crossword-active
.study-game-clues__group:first-child {
    grid-column: 1;
    grid-row: 1;

    pointer-events: auto;
}


body.queenk-study-crossword-active
.study-game-clues__group:last-child {
    grid-column: 3;
    grid-row: 1;

    pointer-events: auto;
}


/* =========================================================
   Across / Down
   ========================================================= */

body.queenk-study-crossword-active
.study-game-clues__group {
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 2px;

    display: grid;
    grid-auto-rows: max-content;

    gap:
        clamp(
            4px,
            0.7dvh,
            7px
        );

    align-content: start;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    scrollbar-width: thin;
}


body.queenk-study-crossword-active
.study-game-clues__group h3 {
    position: sticky;

    top: 0;
    z-index: 2;

    margin: 0;

    padding:
        clamp(
            5px,
            0.75dvh,
            8px
        )
        8px;

    border-radius: 8px;

    background:
        rgba(
            3,
            14,
            28,
            0.94
        );

    color: #efcf75;

    text-align: center;

    font-size:
        clamp(
            0.68rem,
            0.78vw,
            0.90rem
        );

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


/* =========================================================
   Clue cards
   ========================================================= */

body.queenk-study-crossword-active
.study-game-clue {
    box-sizing: border-box;

    width: 100%;
    min-width: 0;

    min-height:
        clamp(
            42px,
            5.3dvh,
            62px
        );

    margin: 0;

    padding:
        clamp(
            5px,
            0.7dvh,
            8px
        );

    display: grid;

    grid-template-columns:
        24px minmax(0, 1fr);

    grid-template-rows:
        auto auto;

    gap:
        2px 6px;

    align-content: center;

    border:
        1px solid
        rgba(
            139,
            180,
            215,
            0.18
        );

    border-radius: 9px;

    background:
        rgba(
            4,
            17,
            31,
            0.74
        );

    color: #edf5ff;

    text-align: left;

    overflow: hidden;

    cursor: pointer;
}


body.queenk-study-crossword-active
.study-game-clue strong {
    grid-row:
        1 / span 2;

    color: #efca63;

    font-size:
        clamp(
            0.62rem,
            0.68vw,
            0.78rem
        );
}


body.queenk-study-crossword-active
.study-game-clue span {
    min-width: 0;

    font-size:
        clamp(
            0.64rem,
            0.74vw,
            0.84rem
        );

    line-height: 1.18;

    overflow-wrap: break-word;
}


body.queenk-study-crossword-active
.study-game-clue small {
    grid-column: 2;

    min-width: 0;

    margin-top: 1px;

    font-size:
        clamp(
            0.50rem,
            0.56vw,
            0.62rem
        );

    line-height: 1.1;

    opacity: 0.50;

    overflow-wrap: break-word;
}


body.queenk-study-crossword-active
.study-game-clue:hover {
    background:
        rgba(
            25,
            59,
            91,
            0.62
        );
}


body.queenk-study-crossword-active
.study-game-clue.is-active {
    border-color:
        rgba(
            235,
            199,
            102,
            0.75
        );

    background:
        rgba(
            30,
            70,
            110,
            0.78
        );

    box-shadow:
        0 0 14px
        rgba(
            77,
            151,
            219,
            0.12
        );
}


body.queenk-study-crossword-active
.study-game-clue.is-solved {
    opacity: 0.58;
}


/* =========================================================
   Crossword placement

   Matrix SIZE remains owned by crossword-fixed-grid.css.
   ========================================================= */

body.queenk-study-crossword-active
#answer-area {
    grid-area: crossword;

    min-width: 0;
    min-height: 0;

    align-self: center;
    justify-self: center;

    margin: 0 auto;
}


body.queenk-study-crossword-active
#answer-area.crossword-board.crossword-fixed-grid {
    align-self: center !important;
    justify-self: center !important;

    margin: 0 auto !important;
}


/* =========================================================
   Study progress

   study-crossword-progress.js inserts this immediately before
   #answer-area. Give it an explicit grid area.
   ========================================================= */

body.queenk-study-crossword-active
[data-study-crossword-progress],
body.queenk-study-crossword-active
.study-crossword-progress {
    grid-area: progress;

    position: relative !important;

    inset: auto !important;

    box-sizing: border-box;

    align-self: center;
    justify-self: center;

    width: max-content;
    max-width: 100%;

    margin:
        clamp(
            2px,
            0.4dvh,
            5px
        )
        auto
        0;

    text-align: center;
}


/* =========================================================
   Active clue
   ========================================================= */

body.queenk-study-crossword-active
#current-word {
    box-sizing: border-box;

    flex: none;

    width:
        min(
            100%,
            840px
        );

    min-height: 1.2em;

    margin:
        clamp(
            1px,
            0.3dvh,
            3px
        )
        auto
        clamp(
            2px,
            0.4dvh,
            5px
        );

    padding:
        0 8px;

    text-align: center;

    font-size:
        clamp(
            0.72rem,
            0.9vw,
            0.96rem
        );

    line-height: 1.15;
}


/* =========================================================
   Wheel placement

   Actual diameter remains in word-wheel.css.
   ========================================================= */

body.queenk-study-crossword-active
#wheel {
    flex: none;

    margin:
        0 auto
        clamp(
            2px,
            0.45dvh,
            5px
        );
}


/* =========================================================
   Controls
   ========================================================= */

body.queenk-study-crossword-active
.controls {
    box-sizing: border-box;

    flex: none;

    display: flex;
    flex-wrap: wrap;

    width: fit-content;
    max-width: 100%;

    margin:
        clamp(
            2px,
            0.4dvh,
            5px
        )
        auto
        0
        !important;

    gap:
        clamp(
            5px,
            0.7vw,
            9px
        );

    justify-content: center;
    align-items: center;
}


/* Study mode does not display the normal Crown purse. */

body.queenk-study-crossword-active
[data-word-currency] {
    display: none !important;
}


/* =========================================================
   Tablet / narrower desktop
   ========================================================= */

@media (
    min-width: 761px
) and (
    max-width: 1100px
) {

    body.queenk-study-crossword-active {
        --study-wheel-max: 30dvh;
    }


    body.queenk-study-crossword-active
    .study-crossword-playfield {
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(0, 1.35fr)
            minmax(0, 0.85fr);

        column-gap: 7px;
    }


    body.queenk-study-crossword-active
    .study-game-clues {
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(0, 1.35fr)
            minmax(0, 0.85fr);

        column-gap: 7px;
    }


    body.queenk-study-crossword-active
    .study-game-clue {
        grid-template-columns:
            20px minmax(0, 1fr);

        padding: 5px;
    }


    body.queenk-study-crossword-active
    .study-game-clue small {
        display: none;
    }
}


/* =========================================================
   Phone portrait / narrow viewport

       CROSSWORD
       ACROSS | DOWN
       PROGRESS

   Clue columns scroll internally. The page itself does not.
   ========================================================= */

@media (max-width: 760px) {

    body.queenk-study-crossword-active {
        --study-wheel-max: 29dvh;
    }


    body.queenk-study-crossword-active
    .game-card {
        padding:
            max(
                4px,
                env(safe-area-inset-top)
            )
            6px
            max(
                4px,
                env(safe-area-inset-bottom)
            );
    }


    body.queenk-study-crossword-active
    .study-game-clues__group {
        padding: 1px;

        gap: 3px;
    }


    body.queenk-study-crossword-active
    .study-game-clues__group h3 {
        padding: 4px 5px;

        font-size:
            clamp(
                0.60rem,
                2.5vw,
                0.72rem
            );
    }


    body.queenk-study-crossword-active
    .study-game-clue {
        min-height: 36px;

        grid-template-columns:
            17px minmax(0, 1fr);

        gap: 1px 3px;

        padding: 4px;
    }


    body.queenk-study-crossword-active
    .study-game-clue strong {
        font-size:
            clamp(
                0.55rem,
                2.3vw,
                0.68rem
            );
    }


    body.queenk-study-crossword-active
    .study-game-clue span {
        font-size:
            clamp(
                0.57rem,
                2.45vw,
                0.70rem
            );

        line-height: 1.12;
    }


    body.queenk-study-crossword-active
    .study-game-clue small {
        display: none;
    }


    body.queenk-study-crossword-active
    #current-word {
        font-size:
            clamp(
                0.68rem,
                2.8vw,
                0.84rem
            );
    }


    body.queenk-study-crossword-active
    .controls {
        gap: 4px;
    }


    body.queenk-study-crossword-active
    .controls button {
        padding:
            7px
            clamp(
                8px,
                3vw,
                13px
            );
    }
}


/* =========================================================
   Very short viewport / landscape

   Browser zoom also reduces CSS viewport height, so this
   automatically activates while zooming in.
   ========================================================= */

@media (max-height: 620px) {

    body.queenk-study-crossword-active {
        --study-wheel-max: 27dvh;
    }


    body.queenk-study-crossword-active
    .game-card {
        padding-top: 4px;
        padding-bottom: 4px;
    }


    body.queenk-study-crossword-active
    .study-game-clue {
        min-height: 32px;

        padding: 3px 5px;
    }


    body.queenk-study-crossword-active
    .study-game-clues__group {
        gap: 2px;
    }


    body.queenk-study-crossword-active
    #current-word {
        margin-block: 1px 2px;
    }


    body.queenk-study-crossword-active
    .controls {
        margin-top: 2px !important;
    }
}


/* =========================================================
   Existing optional board-region wrappers
   ========================================================= */

body.queenk-study-crossword-active
.study-crossword-playfield__board,
body.queenk-study-crossword-active
.study-crossword-board-region {
    box-sizing: border-box;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* =========================================================
   Study Crossword is a viewport game, not a scrolling page.
   ========================================================= */

html:has(
    body.queenk-study-crossword-active
) {
    width: 100%;
    height: 100dvh;

    overflow: hidden;
}


body.queenk-study-crossword-active {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100dvh;

    margin: 0;

    overflow: hidden;
}


body.queenk-study-crossword-active
.game-shell,
body.queenk-study-crossword-active
.game-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;

    overflow: hidden;
}

/* =========================================================
   Phone Study three-view navigation

       ACROSS | CROSSWORD | DOWN

   The centre Crossword view is the default.

   The real crossword remains #answer-area. It is never
   cloned and none of its renderer geometry is changed.
   ========================================================= */

@media (max-width: 760px) {

    body.queenk-study-crossword-active
    .study-crossword-playfield {
        display: block;

        position: relative;

        width: 100%;
        min-width: 0;
        min-height: 0;

        overflow: hidden;
    }


    /*
     * The real crossword owns the centre phone view.
     */
    body.queenk-study-crossword-active
    #answer-area {
        position: relative;

        width: 100%;

        margin-inline: auto;
    }


    /*
     * Clue navigation overlays the same playfield territory.
     *
     * The three horizontal pages are:
     *
     *     Across | transparent centre | Down
     *
     * The transparent centre exposes the real crossword
     * underneath.
     */
    body.queenk-study-crossword-active
    .study-game-clues {
        position: absolute;

        inset: 0;

        z-index: 4;

        display: block;

        min-width: 0;
        min-height: 0;

        overflow: hidden;

        pointer-events: none;
    }


    body.queenk-study-crossword-active
    .study-game-clues__columns {
        display: flex;

        width: 100%;
        height: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type:
            x mandatory;

        overscroll-behavior-x:
            contain;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width: none;

        pointer-events: auto;
    }


    body.queenk-study-crossword-active
    .study-game-clues__columns::-webkit-scrollbar {
        display: none;
    }


    body.queenk-study-crossword-active
    .study-game-clues__group,
    body.queenk-study-crossword-active
    .study-game-clues__crossword-page {
        flex:
            0 0 100%;

        box-sizing: border-box;

        width: 100%;
        height: 100%;

        min-width: 100%;

        scroll-snap-align:
            start;

        scroll-snap-stop:
            always;
    }


    body.queenk-study-crossword-active
    .study-game-clues__group {
        overflow-x: hidden;
        overflow-y: auto;

        background:
            rgba(
                3,
                14,
                28,
                0.98
            );
    }


    /*
     * Centre page deliberately contains no gameplay DOM.
     * It exposes the real crossword beneath the pager.
     */
    body.queenk-study-crossword-active
    .study-game-clues__crossword-page {
        background: transparent;

        pointer-events: none;
    }
}


/* =========================================================
   Study Crossword composition finishing rules

   Outer page rhythm only.
   Wheel and crossword internals remain independently owned.
   ========================================================= */

@media (min-width: 761px) {

    body.queenk-study-crossword-active
    .study-crossword-playfield {
        /*
         * The playfield receives the remaining viewport
         * height. Do not impose a second height ceiling here;
         * the crossword matrix must fit inside this region
         * without overflowing into progress.
         */
        flex:
            1 1 0;

        min-height: 0;
    }


    body.queenk-study-crossword-active
    #current-word {
        margin-top:
            clamp(
                3px,
                0.6dvh,
                7px
            );

        margin-bottom:
            clamp(
                3px,
                0.6dvh,
                7px
            );
    }


    body.queenk-study-crossword-active
    #wheel {
        margin-top: 0;

        margin-bottom:
            clamp(
                4px,
                0.7dvh,
                8px
            );
    }


    body.queenk-study-crossword-active
    .controls {
        margin-top:
            0 !important;
    }
}


/* =========================================================
   Desktop Study clue vertical position

   Across / Down sit slightly below the top of the crossword
   region. The crossword itself remains centred and untouched.
   ========================================================= */

@media (min-width: 761px) {
    body.queenk-study-crossword-active
    .study-game-clues__group {
        padding-top:
            clamp(
                54px,
                8dvh,
                84px
            );
    }

    body.queenk-study-crossword-active
    .study-game-clue {
        font-size:
            clamp(
                0.82rem,
                0.9vw,
                1rem
            );

        line-height: 1.25;
    }

    body.queenk-study-crossword-active
    .study-game-clue small {
        font-size:
            clamp(
                0.66rem,
                0.7vw,
                0.78rem
            );
    }

    body.queenk-study-crossword-active
    .study-game-clues__group h3 {
        font-size:
            clamp(
                0.78rem,
                0.85vw,
                0.95rem
            );
    }
}




/* =========================================================
   Study desktop accessibility composition

   IMPORTANT:
   This does not own or alter Word Wheel internals.

   word-wheel.css / game.js continue to own:
   - ring geometry
   - tile dimensions
   - tile positioning
   - interaction
   - letter-bank behaviour

   This rule only allocates outer page territory to the
   already-rendered wheel.

   Fixed CSS-pixel territory is intentional on desktop:
   browser zoom therefore magnifies the wheel instead of
   a shrinking dvh cap cancelling the user's zoom.
   ========================================================= */

@media (min-width: 761px) {

    body.queenk-study-crossword-active
    #wheel.wheel {
        width:
            min(
                var(--wheel-target-size, 310px),
                280px,
                calc(100vw - 48px)
            )
            !important;
    }
}


/*
 * A short CSS viewport commonly means:
 * - browser zoom
 * - laptop screen
 * - short desktop window
 *
 * Keep a substantial playable wheel, but reclaim a little
 * height for the crossword and controls.
 *
 * 240 CSS px also becomes physically larger when the user
 * increases browser zoom.
 */

@media (
    min-width: 761px
) and (
    max-height: 700px
) {

    body.queenk-study-crossword-active
    #wheel.wheel {
        width:
            min(
                var(--wheel-target-size, 310px),
                240px,
                calc(100vw - 40px)
            )
            !important;
    }


    body.queenk-study-crossword-active
    .study-crossword-progress {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    body.queenk-study-crossword-active
    #current-word {
        margin-block:
            2px 3px;
    }
}


/* =========================================================
   Study Crossword progress HUD

   Session progress is status information, not part of the
   crossword / clue / wheel composition.

   Taking it out of document flow returns that vertical
   territory to the Study playfield.
   ========================================================= */

body.queenk-study-crossword-active
.study-crossword-progress {
    position: fixed !important;

    z-index: 40;

    top:
        max(
            14px,
            env(safe-area-inset-top)
        );

    left:
        clamp(
            88px,
            6vw,
            112px
        );

    display: inline-flex;

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

    gap: 7px;

    width: auto;
    max-width: none;

    margin: 0 !important;

    padding:
        6px 10px;

    border:
        1px solid
        rgba(
            245,
            198,
            73,
            0.72
        );

    border-radius:
        999px;

    background:
        rgba(
            5,
            18,
            34,
            0.82
        );

    box-shadow:
        0 4px 14px
        rgba(
            0,
            0,
            0,
            0.22
        );

    text-align: center;

    pointer-events: none;
}


body.queenk-study-crossword-active
.study-crossword-progress__icon {
    display: grid;

    place-items: center;

    width: 18px;
    height: 18px;

    color:
        rgb(
            247,
            210,
            105
        );

    font-size: 0.9rem;

    line-height: 1;
}


body.queenk-study-crossword-active
.study-crossword-progress__count {
    color: white;

    font-size:
        clamp(
            0.72rem,
            1vw,
            0.88rem
        );

    line-height: 1;

    white-space: nowrap;
}


/*
 * At narrower effective desktop widths, keep the badge
 * compact so browser zoom does not turn status information
 * into a major piece of the interface.
 */

@media (
    min-width: 761px
) and (
    max-width: 1100px
) {

    body.queenk-study-crossword-active
    .study-crossword-progress {
        left: 76px;

        padding:
            5px 8px;

        gap: 5px;
    }
}


/*
 * Phone placement.
 *
 * Keep it away from the centre gameplay stack and allow
 * the existing mobile crossword/clue composition to remain
 * authoritative.
 */

@media (max-width: 760px) {

    body.queenk-study-crossword-active
    .study-crossword-progress {
        top:
            max(
                8px,
                env(safe-area-inset-top)
            );

        left: 58px;

        padding:
            4px 7px;
    }
}


/* =========================================================
   Study progress HUD final placement

   Keep session progress out of the gameplay stack.
   ========================================================= */

body.queenk-study-crossword-active
.study-crossword-progress {
    top:
        max(
            18px,
            env(safe-area-inset-top)
        ) !important;

    left: 92px !important;

    padding:
        5px 9px !important;

    gap: 5px !important;

    border-radius: 999px;

    font-size: 0.8rem;

    pointer-events: none;
}


body.queenk-study-crossword-active
.study-crossword-progress__icon {
    width: 14px;
    height: 14px;

    font-size: 0.72rem;
}


body.queenk-study-crossword-active
.study-crossword-progress__count {
    font-size: 0.78rem;
}


/* =========================================================
   Desktop Study vertical rebalance
   ========================================================= */

@media (min-width: 761px) {

    body.queenk-study-crossword-active
    #current-word {
        margin-top:
            clamp(
                1px,
                0.3dvh,
                4px
            );

        margin-bottom:
            clamp(
                2px,
                0.4dvh,
                5px
            );
    }
}

/* =========================================================
   Mobile Study swipe affordance
   ========================================================= */

.study-crossword-swipe-hints {
    display: none;
}


@media (max-width: 760px) {

    body.queenk-study-crossword-active
    .study-crossword-swipe-hints {
        display: block;

        position: fixed;
        inset: 0;

        z-index: 30;

        pointer-events: none;
    }


    body.queenk-study-crossword-active
    .study-crossword-swipe-hint {
        position: absolute;

        top: 40%;

        width: 30px;
        height: 54px;

        transform:
            translateY(-50%);

        opacity: 0.62;

        transition:
            opacity 140ms ease;
    }


    body.queenk-study-crossword-active
    .study-crossword-swipe-hint.is-hidden {
        opacity: 0;
    }


    body.queenk-study-crossword-active
    .study-crossword-swipe-hint span {
        position: absolute;

        top: 50%;

        width: 20px;
        height: 20px;

        border-top:
            3px solid
            rgba(
                255,
                255,
                255,
                0.88
            );

        border-left:
            3px solid
            rgba(
                255,
                255,
                255,
                0.88
            );

        filter:
            drop-shadow(
                0 1px 3px
                rgba(0, 0, 0, 0.45)
            );
    }


    body.queenk-study-crossword-active
    .study-crossword-swipe-hint--left {
        left: 4px;
    }


    body.queenk-study-crossword-active
    .study-crossword-swipe-hint--left span {
        transform:
            translateY(-50%)
            rotate(-45deg);
    }


    body.queenk-study-crossword-active
    .study-crossword-swipe-hint--left
    span:first-child {
        left: 7px;
    }


    body.queenk-study-crossword-active
    .study-crossword-swipe-hint--left
    span:last-child {
        left: 14px;

        opacity: 0.52;
    }


    body.queenk-study-crossword-active
    .study-crossword-swipe-hint--right {
        right: 4px;
    }


    body.queenk-study-crossword-active
    .study-crossword-swipe-hint--right span {
        transform:
            translateY(-50%)
            rotate(135deg);
    }


    body.queenk-study-crossword-active
    .study-crossword-swipe-hint--right
    span:first-child {
        right: 7px;
    }


    body.queenk-study-crossword-active
    .study-crossword-swipe-hint--right
    span:last-child {
        right: 14px;

        opacity: 0.52;
    }
}


/* =========================================================
   Mobile Study wheel and compact action controls
   ========================================================= */

@media (max-width: 760px) {

    body.queenk-study-crossword-active
    #wheel.wheel {
        width:
            min(
                74vw,
                33dvh,
                330px
            )
            !important;

        margin-bottom:
            max(
                8px,
                env(safe-area-inset-bottom)
            )
            !important;
    }


    body.queenk-study-crossword-active
    .controls {
        position: fixed;

        right:
            max(
                10px,
                env(safe-area-inset-right)
            );

        bottom:
            max(
                18px,
                env(safe-area-inset-bottom)
            );

        z-index: 40;

        display: flex;
        flex-direction: column;

        gap: 10px;

        margin: 0 !important;
        padding: 0;
    }


    body.queenk-study-crossword-active
    .controls button {
        width: 48px;
        height: 48px;

        min-width: 48px;
        min-height: 48px;

        padding: 0;

        border-radius: 50%;

        overflow: hidden;

        color: transparent;

        font-size: 0;
    }


    body.queenk-study-crossword-active
    .controls button::before {
        display: grid;

        width: 100%;
        height: 100%;

        place-items: center;

        color: var(--queenk-text);

        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1;
    }


    body.queenk-study-crossword-active
    #shuffle::before {
        content: "↻";
    }


    body.queenk-study-crossword-active
    #hint::before {
        content: "?";
    }


    body.queenk-study-crossword-active
    #reveal-letter::before {
        content: "A✦";

        font-size: 0.95rem;
    }


    /*
     * Across and Down occupy the full mobile playfield.
     * Remove unrelated corner controls while either clue
     * page is visible.
     */
    body.queenk-study-crossword-active[
        data-study-mobile-page="across"
    ]
    .game-menu-launcher,
    body.queenk-study-crossword-active[
        data-study-mobile-page="down"
    ]
    .game-menu-launcher,
    body.queenk-study-crossword-active[
        data-study-mobile-page="across"
    ]
    .destination-rail,
    body.queenk-study-crossword-active[
        data-study-mobile-page="down"
    ]
    .destination-rail,
    body.queenk-study-crossword-active[
        data-study-mobile-page="across"
    ]
    .study-crossword-progress,
    body.queenk-study-crossword-active[
        data-study-mobile-page="down"
    ]
    .study-crossword-progress {
        visibility: hidden !important;
        pointer-events: none !important;
    }


    body.queenk-study-crossword-active
    .study-crossword-swipe-hint {
        width: 22px;
        height: 42px;

        opacity: 0.48;
    }


    body.queenk-study-crossword-active
    .study-crossword-swipe-hint span {
        width: 14px;
        height: 14px;

        border-width: 2px;
    }
}