/*
 * QueenK Word Wheel
 *
 * JS owns:
 * - letter-count layout tier
 * - angular placement
 * - safe tile diameter
 *
 * CSS owns:
 * - responsive outer diameter
 * - stable square geometry
 * - presentation
 */

.wheel {
    position: relative;

    /*
     * JS supplies --wheel-target-size according to
     * letter count.
     *
     * The viewport limits can shrink that target,
     * while safeWheelTileSize() prevents overlap.
     */
    width:
        min(
            var(
                --wheel-target-size,
                310px
            ),
            calc(100vw - 32px),
            48vh
        );

    aspect-ratio:
        1 / 1;

    height: auto;

    margin:
        clamp(
            10px,
            2vh,
            22px
        )
        auto
        0;

    /*
     * One-finger pointer movement remains available to the
     * Word Wheel interaction.
     *
     * Two-finger gestures are handed back to the browser so
     * mobile users can pinch-zoom even when a finger starts
     * inside the wheel.
     */
    touch-action:
        pinch-zoom;
}


.wheel .letter {
    position: absolute;

    /*
     * Exact width/height are supplied by renderWheel().
     * Do not independently clamp them here.
     */
    margin: 0;

    border-radius: 50%;

    touch-action: pinch-zoom;

    user-select: none;
    -webkit-user-select: none;
}


.wheel .trail-layer {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


/* =========================================================
   Explicit letter-count tiers
   ========================================================= */

.wheel[
    data-wheel-layout="compact"
] {
    --wheel-ring-tier: 1;
}


.wheel[
    data-wheel-layout="standard"
] {
    --wheel-ring-tier: 2;
}


.wheel[
    data-wheel-layout="large"
] {
    --wheel-ring-tier: 3;
}


.wheel[
    data-wheel-layout="expanded"
] {
    --wheel-ring-tier: 4;
}


.wheel[
    data-wheel-layout="study-ring"
] {
    --wheel-ring-tier: 5;
}


/*
 * Large Study banks need more horizontal freedom.
 */
body.queenk-study-crossword-active
.wheel[
    data-wheel-layout="expanded"
],
body.queenk-study-crossword-active
.wheel[
    data-wheel-layout="study-ring"
] {
    width:
        min(
            var(--wheel-target-size),
            calc(100vw - 32px),
            50vh
        );
}


/* =========================================================
   Short landscape screens
   ========================================================= */

@media (
    max-height: 620px
) and (
    orientation: landscape
) {
    .wheel {
        width:
            min(
                var(
                    --wheel-target-size,
                    310px
                ),
                calc(100vw - 32px),
                42vh
            );
    }
}


/* =========================================================
   Exact wheel tile geometry
   ========================================================= */

/*
 * Wheel placement mathematics requires the button's CSS
 * width/height to equal its actual rendered dimensions.
 *
 * Global button padding/minimum sizes must not enlarge
 * wheel letters behind the geometry engine's back.
 */
.wheel .letter {
    box-sizing: border-box !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none;
    max-height: none;

    padding: 0 !important;

    display: grid;
    place-items: center;

    line-height: 1;

    flex: none;
}


/* =========================================================
   Study Crossword — HARD viewport wheel constraint

   This selector intentionally outranks the generic
   expanded/study-ring rules above.

   Study gameplay must fit inside one viewport.
   ========================================================= */

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

    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    aspect-ratio:
        1 / 1;

    margin:
        0 auto
        3px
        !important;
}


@media (max-height: 700px) {

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


@media (max-width: 760px) {

    body.queenk-study-crossword-active
    #wheel.wheel {
        width:
            min(
                var(--wheel-target-size, 310px),
                70vw,
                25dvh
            )
            !important;
    }
}


/*
 * Letter typography follows the physical tile.
 *
 * Browser zoom / responsive wheel sizing may reduce the tile
 * diameter. Text scales inside the tile instead of changing
 * the ring geometry.
 */
.wheel .letter {
    box-sizing: border-box;

    font-size:
        clamp(
            10px,
            calc(
                var(--wheel-tile-size, 48px)
                * 0.42
            ),
            24px
        );
}