/* Carousel wheel: a glossy bottle-cap wheel under a top pointer. */

.dgs-wheel-wrap {
    display: grid;
    justify-items: center;
    gap: clamp(12px, 2.5vw, 20px);
    width: 100%;
    padding: clamp(12px, 3vw, 28px) 0;
    overflow: hidden; /* the spinning square box must never widen the page */
}

.dgs-wheel-stand {
    position: relative;
    width: min(100%, 440px);
    padding-top: 6%;
}

.dgs-wheel-stand::before {
    /* soft glow behind the wheel in the game's colour */
    content: "";
    position: absolute;
    inset: 8% 4% -2%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--tone, #f43f5e) 45%, transparent) 0%, transparent 68%);
    pointer-events: none;
}

.dgs-wheel-disc {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform-origin: 50% 50%;
    will-change: transform;
    filter: drop-shadow(0 14px 22px rgba(10, 2, 24, .55));
}

.dgs-wheel-disc::after {
    /* fixed-looking gloss: sits on the disc, rotates with it, kept faint */
    content: "";
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background: linear-gradient(160deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 42%);
    pointer-events: none;
}

.dgs-wheel-svg {
    display: block;
    width: 100%;
    height: auto;
}

.dgs-wheel-num {
    fill: #fff4e6;
    font: 800 12.5px/1 var(--dgs-display, system-ui, sans-serif);
    text-anchor: middle;
    dominant-baseline: central;
    paint-order: stroke;
    stroke: rgba(30, 11, 51, .55);
    stroke-width: 2px;
}

.dgs-wheel-num--dark {
    fill: #2a0f45;
    stroke: rgba(255, 255, 255, .35);
}

.dgs-wheel-slice path {
    transition: opacity 240ms ease-out;
}

.dgs-wheel-disc:has(.is-hit) .dgs-wheel-slice:not(.is-hit) path {
    opacity: .55;
}

.dgs-wheel-pointer {
    position: absolute;
    top: 0;
    left: 50%;
    width: clamp(28px, 9%, 40px);
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 4px 4px rgba(10, 2, 24, .5));
    z-index: 1;
}

.dgs-wheel-odds {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px;
    margin: 0;
    padding: 0 8px;
    list-style: none;
    font: 600 13px/1.3 var(--dgs-body, system-ui, sans-serif);
    color: var(--dgs-on-night, #fff4e6);
}

.dgs-wheel-odds li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.dgs-wheel-odds li::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chip);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
}

.dgs-wheel-wrap.is-up .dgs-wheel-stand {
    animation: dgs-wheel-nod 420ms ease-out;
}

@keyframes dgs-wheel-nod {
    40% { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
    .dgs-wheel-wrap.is-up .dgs-wheel-stand { animation: none; }
}