/* Gaming Bureau — wheel engine (Grand Dial). Scoped to .bx-eng--wheel. */

/* bureau.css gives a site-wide .bx-board a vertical margin; the stage needs none. */
.bx-eng--wheel .bx-dial__board {
    margin: 0;
    container-type: size;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 14px 16px 10px;
}

.bx-eng--wheel .bx-dial__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(94cqh, 94cqw, 520px);
    aspect-ratio: 1;
}

.bx-eng--wheel .bx-dial__halo {
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgba(245, 196, 81, .22), rgba(155, 47, 138, .16) 62%, rgba(18, 13, 28, 0) 100%);
    pointer-events: none;
}

.bx-eng--wheel .bx-dial {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: drop-shadow(0 18px 30px rgba(6, 3, 10, .7)) drop-shadow(0 0 1px rgba(255, 226, 160, .4));
}

.bx-eng--wheel .bx-dial__layer,
.bx-eng--wheel .bx-dial__spin {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.bx-eng--wheel .bx-dial__spin {
    transform-origin: 50% 50%;
    will-change: transform;
}

.bx-eng--wheel .bx-dial__front { pointer-events: none; }

/* Segments: jewel colours on a plum night. Gradients are radial so the
   segments catch light toward the rim. */
.bx-eng--wheel .bx-dial__seg { stroke: rgba(10, 5, 16, .55); stroke-width: .6; }
.bx-eng--wheel .bx-dial__seg--nil { fill: #26152f; }
.bx-eng--wheel .bx-dial__seg--nil.is-alt { fill: #321c3f; }
.bx-eng--wheel .bx-dial__seg--cobalt { fill: #2d4cb5; }
.bx-eng--wheel .bx-dial__seg--jade { fill: #11977a; }
.bx-eng--wheel .bx-dial__seg--plum { fill: #8a2c86; }
.bx-eng--wheel .bx-dial__seg--coral { fill: #e04c3c; }
.bx-eng--wheel .bx-dial__seg--amber { fill: #e2862b; }
.bx-eng--wheel .bx-dial__seg--gold { fill: #e9b23f; }
.bx-eng--wheel .bx-dial__seg--crown { fill: #f7d36b; }

.bx-eng--wheel .bx-dial__band { fill: rgba(255, 255, 255, .07); }

.bx-eng--wheel .bx-dial__hit {
    fill: #fff3cf;
    opacity: 0;
    transition: opacity .25s ease-out;
}

.bx-eng--wheel .bx-dial__hit.is-on { opacity: .26; }

.bx-eng--wheel .bx-dial__lbl {
    font: 800 17px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: .02em;
    fill: #fbf4e6;
    paint-order: stroke;
    stroke: rgba(12, 5, 18, .55);
    stroke-width: 2.4px;
}

.bx-eng--wheel .bx-dial__lbl--nil { fill: #8f80a6; font-size: 14px; font-weight: 700; stroke-width: 0; }
.bx-eng--wheel .bx-dial__lbl--gold,
.bx-eng--wheel .bx-dial__lbl--crown { fill: #2b1606; stroke: rgba(255, 246, 214, .7); font-size: 19px; }
.bx-eng--wheel .bx-dial__spark { fill: #fff8de; opacity: .9; }

/* Bulbs: a slow alternating glow; bright gold chase on a return above the stake. */
.bx-eng--wheel .bx-dial__lamp { opacity: .72; }

@keyframes bx-dial-twinkle {
    0%, 100% { opacity: .5; }
    50% { opacity: 1; }
}

.bx-eng--wheel .bx-dial__bulb .bx-dial__lamp { animation: bx-dial-twinkle 2.6s ease-in-out infinite; }
.bx-eng--wheel .bx-dial__bulb.is-odd .bx-dial__lamp { animation-delay: -1.3s; }
.bx-eng--wheel.is-busy .bx-dial__bulb .bx-dial__lamp,
.bx-eng--wheel .is-busy .bx-dial__bulb .bx-dial__lamp { animation-duration: .7s; }
.bx-eng--wheel .bx-dial.is-glow .bx-dial__bulb .bx-dial__lamp { animation-duration: .36s; }

.bx-eng--wheel .bx-dial__pointer {
    transform-box: fill-box;
    transform-origin: 50% 18%;
}

/* Hub: the static brass centre shows the result. */
.bx-eng--wheel .bx-dial__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 21%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    pointer-events: none;
}

.bx-eng--wheel .bx-dial__note {
    font-size: clamp(.5rem, 2.4cqmin, .7rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #c9b6d8;
    white-space: nowrap;
}

.bx-eng--wheel .bx-dial__value {
    font-size: clamp(1rem, 6.4cqmin, 2rem);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #f5c451;
    text-shadow: 0 1px 0 #5a3a10, 0 0 14px rgba(245, 196, 81, .45);
}

.bx-eng--wheel .bx-dial.is-glow + .bx-dial__hub,
.bx-eng--wheel .bx-dial.is-glow .bx-dial__value { color: #ffe08a; }

.bx-eng--wheel .bx-dial::after {
    content: "";
    position: absolute;
    inset: -3%;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(245, 196, 81, .55), 0 0 46px 10px rgba(245, 196, 81, .4);
    opacity: 0;
    transition: opacity .25s ease-out;
    pointer-events: none;
}

.bx-eng--wheel .bx-dial.is-glow::after { opacity: 1; }

/* Legend: the segment set, colour plus number plus count. */
.bx-eng--wheel .bx-dial__legend {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 12px;
    list-style: none;
    min-width: 150px;
    border: 1px solid rgba(245, 196, 81, .22);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(42, 20, 54, .78), rgba(18, 10, 26, .82));
    box-shadow: inset 0 1px 0 rgba(255, 236, 190, .12), 0 12px 28px -14px rgba(0, 0, 0, .8);
}

.bx-eng--wheel .bx-dial__key {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
}

.bx-eng--wheel .bx-dial__key i {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(0, 0, 0, .35);
}

.bx-eng--wheel .bx-dial__key b { font-variant-numeric: tabular-nums; }
.bx-eng--wheel .bx-dial__key small { color: var(--bx-muted, #b9aecb); font-size: .75rem; font-variant-numeric: tabular-nums; }
.bx-eng--wheel .bx-dial__key--nil i { background: #241430; }
.bx-eng--wheel .bx-dial__key--cobalt i { background: #2d4cb5; }
.bx-eng--wheel .bx-dial__key--jade i { background: #11977a; }
.bx-eng--wheel .bx-dial__key--plum i { background: #8a2c86; }
.bx-eng--wheel .bx-dial__key--coral i { background: #e04c3c; }
.bx-eng--wheel .bx-dial__key--amber i { background: #e2862b; }
.bx-eng--wheel .bx-dial__key--gold i { background: #e9b23f; }
.bx-eng--wheel .bx-dial__key--crown i { background: linear-gradient(135deg, #fff1b8, #f0be46); }
.bx-eng--wheel .bx-dial__key--gold b,
.bx-eng--wheel .bx-dial__key--crown b { color: var(--bx-gold, #f5c451); }

@container (max-width: 620px) {
    .bx-eng--wheel .bx-dial__legend { display: none; }
}

@media (max-width: 560px) {
    .bx-eng--wheel .bx-deck { gap: 8px 10px; }
    .bx-eng--wheel .bx-deck .bx-seg { order: -1; flex-basis: 100%; justify-content: center; }
    .bx-eng--wheel .bx-stake__label { display: none; }
    .bx-eng--wheel .bx-dial__board { padding: 10px 8px 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .bx-eng--wheel .bx-dial__lamp { animation: none !important; opacity: .85; }
    .bx-eng--wheel .bx-dial__spin { transition: none !important; }
}