:root {
    --wheel-paper: #f4f3ee;
    --wheel-ink: #163c4d;
    --wheel-blue: #1f82c0;
    --wheel-gold: #e7b768;
    --wheel-gold-bright: #fff0bb;
    --wheel-panel: #17130e;
    --wheel-panel-edge: #6e4d25;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body[data-page="wheel"],
body[data-page="ruffle"] {
    min-height: 100vh;
    color: var(--wheel-ink);
    background-color: #000;
    background-image: url('img/wheel_bg.png');
    background-size: cover;
    font-family: Arial, Helvetica, sans-serif;
}

.wheel-only {
    width: 100%;
    min-height: 100vh;
}

.wheel-display {
    --wheel-overlay-center-x: 50%;
    --wheel-overlay-center-y: 50%;
    --wheel-overlay-scale: 1;
    --wheel-frame-width: min(82vw, 610px);
    --wheel-frame-height: min(90vh, 390px);
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 28px;
    isolation: isolate;
}

#scene {
    position: relative;
    width: min(48vw, 460px);
    min-width: 250px;
    height: min(82vh, 680px);
    min-height: 420px;
    perspective: 1800px;
    opacity: 0;
    transition: opacity 1s linear;
    transform: scale(0.5);
    z-index: 1;
    background:
        radial-gradient(ellipse at center, rgba(255, 199, 102, 0.14) 0%, rgba(255, 199, 102, 0.04) 32%, transparent 62%);
}

#wheel {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 4s cubic-bezier(0.1, 0.9, 0.2, 1);
}

#scene.shown {
    opacity: 1;
}

/* Keep the side lights above the 3D wheel, but limit them to the centre. */
#wheel-state::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: var(--wheel-overlay-center-y);
    left: var(--wheel-overlay-center-x);
    width: min(92vw, 700px);
    height: min(20vh, 180px);
    transform: translate(-50%, -50%) scale(var(--wheel-overlay-scale));
    opacity: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, #fff 0 2px, #f7d486 3px 4px, transparent 7px),
        radial-gradient(circle, #fff 0 2px, #f7d486 3px 4px, transparent 7px),
        radial-gradient(circle, #fff 0 2px, #f7d486 3px 4px, transparent 7px),
        radial-gradient(circle, #fff 0 2px, #f7d486 3px 4px, transparent 7px),
        radial-gradient(circle, #fff 0 2px, #f7d486 3px 4px, transparent 7px),
        radial-gradient(circle, #fff 0 2px, #f7d486 3px 4px, transparent 7px),
        radial-gradient(circle, #fff 0 2px, #f7d486 3px 4px, transparent 7px),
        radial-gradient(circle, #fff 0 2px, #f7d486 3px 4px, transparent 7px),
        radial-gradient(circle, #fff 0 2px, #f7d486 3px 4px, transparent 7px),
        radial-gradient(circle, #fff 0 2px, #f7d486 3px 4px, transparent 7px);
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position:
        1% 10%, 1% 30%, 1% 50%, 1% 70%, 1% 90%,
        99% 10%, 99% 30%, 99% 50%, 99% 70%, 99% 90%;
    filter: drop-shadow(0 0 6px rgba(255, 199, 102, 0.8));
    transition: opacity 350ms ease;
}

/* Fixed frame above the wheel, highlighting the number at the centre. */
#wheel-state::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: var(--wheel-overlay-center-y);
    left: var(--wheel-overlay-center-x);
    width: var(--wheel-frame-width);
    height: var(--wheel-frame-height);
    transform: translate(-50%, -50%);
    opacity: 0;
    box-sizing: border-box;
    pointer-events: none;
    border: 6px solid var(--wheel-gold-bright);
    border-radius: 22px;
    box-shadow:
        0 0 0 2px rgba(255, 238, 181, 0.72) inset,
        0 0 14px rgba(255, 204, 112, 0.98),
        0 0 34px rgba(255, 173, 54, 0.78),
        0 0 70px rgba(255, 173, 54, 0.38);
    transition: opacity 350ms ease;
}

#wheel-state.is-wheel-visible::before,
#wheel-state.is-wheel-visible::after {
    opacity: 1;
}

.wheel_element {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: anywhere;
    padding: 16px 24px;

    border-left: 2px solid var(--wheel-panel-edge);
    border-right: 2px solid var(--wheel-panel-edge);
    border-top: 1px solid rgba(255, 219, 149, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.9);

    background-color: var(--wheel-panel);
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.96) 0%, rgba(47, 35, 20, 0.7) 48%, rgba(0, 0, 0, 0.96) 100%),
        linear-gradient(to bottom, rgba(255, 210, 123, 0.08), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.32));

    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    border-radius: 4px;
    color: #d8bd83;

    text-shadow:
            0 2px 0 rgba(0, 0, 0, 0.82),
            0 0 18px rgba(255, 200, 111, 0.12);

    backface-visibility: hidden;
    font-size: 150px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: center;
    transform-origin: center;

    box-shadow:
        inset 0 18px 24px -20px rgba(255, 220, 153, 0.28),
        inset 0 -20px 26px -18px rgba(0, 0, 0, 0.98),
        0 8px 18px rgba(0, 0, 0, 0.28);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    will-change: transform;
}

.is-spinning {
    filter: url(#motion-blur);
    transition: filter 0.1s ease;
}

.selected {
    border-top: 3px solid var(--wheel-gold-bright);
    border-bottom: 3px solid var(--wheel-gold-bright);
    border-left: 3px solid var(--wheel-gold-bright);
    border-right: 3px solid var(--wheel-gold-bright);

    background-color: #2d2111;
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.9) 0px, transparent 50px, transparent calc(100% - 50px), rgba(0,0,0,0.9) 100%);

    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    color: #fff6dc;
    box-shadow: none;
    text-shadow:
        0 0 5px rgba(255, 246, 220, 0.9),
        0 0 12px rgba(255, 202, 99, 0.58),
        0 0 24px rgba(255, 183, 0, 0.36);
    z-index: 10;
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

.selected .result-message {
    display: block;
    width: 100%;
}

.text_segment {
    font-size: 34px;
}

.wheel_element::before {
    display: none;
}

/* The glowing winning bulbs layer */
#wheel_bg_video {
    position: absolute;
}

.core_element {
    position: absolute;
    width: 230px; /* Narrower than the 200px outer segment to fit inside rims */
    box-sizing: border-box;

    /* Dark metallic gradient */
    background-color: #090806;
    background-image: linear-gradient(to right, #000 0%, #211a11 50%, #000 100%);

    /* Thin horizontal lines to look like mechanical joints */
    border-top: 1px solid #222;

    box-shadow: 0 0 24px 0 black;

    top: 50%;
    left: 50%;

    /* We want to see the front of the core through the gaps */
    backface-visibility: hidden;
}

.wheel-status {
    min-height: 28px;
    margin: 24px 0 0;
    color: #647385;
    font-size: clamp(1rem, 1.7vw, 1.35rem);
    font-weight: 800;
    text-align: center;
}

.wheel-status.is-error {
    color: #bd3b43;
}

.wheel-status.is-success {
    color: #2c9880;
}

.wheel-result {
    min-height: 42px;
    margin: 10px 0 0;
    color: var(--wheel-ink);
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
}

@media (max-width: 620px) {
    .wheel-display {
        padding: 18px 12px;
    }

    #scene {
        width: min(78vw, 360px);
        min-width: 190px;
        height: min(82vh, 620px);
        min-height: 360px;
        transform: scale(0.5);
    }

    #wheel-state::after {
        width: var(--wheel-frame-width);
        height: var(--wheel-frame-height);
    }

    #wheel-state {
        --wheel-frame-width: min(88vw, 610px);
    }
}