/* Spin to Win and Mystery Box.

   One stylesheet for the two, because they are one component - what differs is which
   drawing is on screen, and each of those is a block below. Tokens are the storefront's
   (--wx-*), the same set games.css and slots.css use.

   Drop Zone used to be a third drawing here; see dropzone.css for its own board, ball
   and gates now that it is a component of its own. */

.pg {
    /* The win celebration is positioned against this - see WinCelebration.razor. */
    position: relative;

    display: grid;
    /* Same grid-blowout fix as .hl/.ww/.tv in statefulgames.css - without an explicit
       track, the implicit one sizes to whatever its widest child asks for
       (.pg-wheel-wrap's own min(300px, 80vw), wider than this column on anything but a
       narrow phone) rather than to this element's own width:100%, so the wheel silently
       overflowed the column instead of shrinking to fit it. A circle rather than a
       rectangle is what kept this from reading as an obvious overflow on screen the way
       Higher or Lower's did - measuring it directly is what actually caught it. */
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    justify-items: center;
    color: var(--wx-ink, #fff);
    /* Same reasoning as .hl/.ww/.tv in statefulgames.css: the game column centres this
       with flexbox now, and a flex item with no width of its own sizes to its content
       rather than its container. Explicit here so it can't drift wider than its cell. */
    width: 100%;
    box-sizing: border-box;

    /* No padding of its own any more - .gstage-game (see gamestage.css) now draws the
       same bordered card .gi and .gwf always had, with its own inset built in, so a
       second inset here was spending width and height twice for one gap. Was fixed
       here for Higher or Lower when it first surfaced as an actual
       overflow; this and .slots/.scratch were only ever narrower and shorter than they
       needed to be, not broken, which is why the gap sat unfixed until it stood out
       next to the others. */
}

/* The title bar (.gh, .gh h2, .gh-meta) is shared with every other game - see
   gamestage.css. */

.pg-note { color: var(--wx-muted, #9a9a9a); font-size: 0.9rem; text-align: center; }
.pg-note.is-bad { color: var(--wx-signal, #d4af37); }

.pg-hint { margin: 0; color: var(--wx-muted, #9a9a9a); font-size: 0.82rem; text-align: center; }

/* Full width, same shape as Higher or Lower's own go-button (.hl-bank in
   statefulgames.css) rather than a pill sized to its own label - the two games sit in
   the same width column and used to read as two different weights of button because of
   it.

   width:100%, same as .gsb (the free-plays/tokens/cost bar up top - see gamestage.css)
   rather than the wheel's own min(300px, 80vw) - the wheel is deliberately wider than
   this column so it stays legible, but everything that isn't a prop drawn to a fixed
   size lines up with the one card every game already opens on instead. */
/* The play button is .gplay (gamestage.css). */

.pg-result {
    display: grid;
    gap: 2px;
    justify-items: center;
    padding: 10px 18px;
    border-radius: var(--wx-radius, 12px);
    background: var(--wx-surface-2, #151515);
    text-align: center;
}

.pg-result.is-win { border: 1px solid var(--wx-signal, #d4af37); }
.pg-result span { color: var(--wx-signal, #d4af37); font-weight: 700; }

/* Spin to Win's own always-on version of the box above - see the note on .pg-message
   in the markup for why this one never comes and goes.

   width:100%, same as .gsb (the free-plays/tokens/cost bar right above it - see
   gamestage.css), not the wheel's own min(300px, 80vw) - the wheel is deliberately
   wider than this column so it stays legible at any width, but this card sits directly
   under .gsb and reads as a continuation of it, not of the wheel below.

   height, not min-height - a min-height only sets a floor, and "Spin to Win!" (one
   line) versus a prize name plus a points line both already fit under the old 46px
   floor, so this never actually grew in practice. It is a real ceiling now instead:
   the title truncates rather than wrapping (see .pg-message strong below), so nothing
   drawn in here can ever push the wheel down a pixel, not just "usually doesn't". */
/* .pg-message: the box itself is .game-message in gamestage.css - one rule for every
   game. Only this game's own variants live here. */

/* ── Spin to Win's bump window ────────────────────────────────────────────────
   The short pause between a result landing and it actually being paid - called a
   "push" internally still (see RunPushWindowAsync/PushAsync/CanPush), "bump" wherever
   a player actually sees it. Its own card, under .pg-result, so what was just drawn
   stays on screen (unchanged) while this asks what to do about it. */

/* Same width as .pg-message and .gsb above it - see the note on .pg-message for why
   this and .pg-play both take the status bar's width rather than the wheel's. */
.pg-bump {
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 10px 14px;
    border: 1px dashed var(--wx-line, #2c2c2c);
    border-radius: var(--wx-radius, 12px);
    width: 100%;
    box-sizing: border-box;
}

.pg-bump-clock {
    margin: 0;
    font-size: 0.8rem;
    color: var(--wx-muted, #9a9a9a);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pg-bump-row { display: flex; gap: 8px; width: 100%; }

/* A .gx-btn (gamestage.css), two to a row, with an arrow drawn on each. Smaller
   than the base so both stay on one line at phone width. */
.pg-bump-btn {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 9px 8px;
    font-size: 0.72rem;
}

/* Direction, drawn rather than iconed - the same technique Higher or Lower's own
   Higher/Lower buttons use (see .hl-btn.is-up/.is-down in statefulgames.css): a
   triangle is two borders, it needs no icon font to have loaded, and it takes its
   colour from the button's own text colour instead of carrying one of its own, so a
   disabled bump button dims its arrow along with everything else on it for free. */
.pg-bump-btn.is-left::before,
.pg-bump-btn.is-right::after {
    content: '';
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.pg-bump-btn.is-left::before { border-right: 8px solid currentColor; }
.pg-bump-btn.is-right::after { border-left: 8px solid currentColor; }

@media (hover: hover) {
    .pg-bump-btn:not(:disabled):hover {
        background: var(--wx-signal, #d4af37);
        color: var(--wx-signal-ink, #111);
    }
}

/* ── The wheel ─────────────────────────────────────────────────────────────── */

.pg-wheel-wrap { position: relative; width: min(300px, 80vw); aspect-ratio: 1; }

/* The wheel is a prop, the same way the slot cabinet is one (see slots.css) - carnival
   pink and purple, a gold hub, black spokes, drawn to match the game's own card art
   (wwwroot/images/games/spintowin/hero.webp) rather than the partner's theme colours.
   The wheel looks like Spin to Win everywhere it's played, the same way a slot machine
   keeps its chrome regardless of which partner's storefront it's sitting in. */

/* The pointer sits above the wheel and never moves - the wheel turns under it, which is
   what makes the landing readable. Pale rather than gold, so it reads as a separate
   part (the thing that doesn't move) against wedges that do. */
.pg-wheel-pin {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 20px solid #e4e0f0;
    filter: drop-shadow(0 0 6px rgba(228, 224, 240, 0.6));
    z-index: 3;
}

.pg-wheel-wrap {
    /* The glow around the rim, on the wrapper rather than the wheel itself so it
       doesn't spin with it - a light source turning with the thing it's lighting
       would look wrong the instant it moved. */
    filter: drop-shadow(0 0 14px rgba(255, 46, 143, 0.45));
}

.pg-wheel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid #ff2e8f;
    box-shadow:
        0 0 0 2px #2a1a3d,
        inset 0 0 24px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

/* Long, and eased hard at the end so it creeps the last few degrees. A spin that stopped
   abruptly would look like the answer had been decided at the last moment, which is
   exactly the impression to avoid. */
.pg-wheel.is-spinning { transition: transform 6s cubic-bezier(0.12, 0.8, 0.1, 1); }

/* A bump moves one wedge, not several turns - the long, eased-out timing above is
   right for a draw and wrong for a nudge; at 3.1s a one-slice move would read as
   the wheel crawling rather than correcting. Its own, quicker curve instead,
   matched to PushAnimateAsync's own shorter watch (named for what it does
   internally - see the note on .pg-bump below). */
.pg-wheel.is-bumping { transition: transform 0.85s cubic-bezier(0.3, 0, 0.3, 1); }

/* One per slot, sitting on the boundary between it and the next (see SpokeStyle) - a
   line from the hub to the rim, the way the card art divides its own wedges. */
.pg-wheel-spoke {
    position: absolute;
    top: 0;
    left: calc(50% - 1px);
    width: 2px;
    height: 50%;
    background: #1a1024;
    transform-origin: bottom center;
}

.pg-wedge {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 12px;
    letter-spacing: 0.02em;
}

/* The payout is the biggest thing on a wedge now, not the name - it's the number
   someone glances at the wheel to compare, and the smaller label underneath is only
   there to say what to call it. Was the other way around: the name at 0.66rem over a
   0.6rem payout read as "here's a wedge called Jackpot" before "here's 250,000". */
.pg-wedge-points {
    font-family: var(--wx-font-data, ui-monospace, Consolas, monospace);
    font-size: 1rem;
    font-weight: 800;
    color: #ffe27a;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    line-height: 1.1;
}

/* Nought and the top prize carry their own colours in the gradient (see WheelBackground);
   the figure on them takes an ink that reads on each. */
.pg-wedge.is-nought .pg-wedge-points { color: #2e3040; text-shadow: none; }
.pg-wedge.is-top .pg-wedge-points { color: #1a1200; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }

.pg-wedge-label {
    max-width: 82px;
    text-align: center;
    line-height: 1.1;
    font-size: 0.56rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* The hub. A sibling of .pg-wheel rather than a child, so it stays put - a bearing
   doesn't spin with the wheel around it - and sits above the spokes/wedges by simply
   painting after them in source order. */
.pg-wheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22%;
    height: 22%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff3b0, #f5c542 45%, #b9822a 100%);
    border: 2px solid #2a1a3d;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ── The boxes ─────────────────────────────────────────────────────────────── */

.pg-boxes { display: flex; gap: 12px; width: 100%; max-width: 320px; box-sizing: border-box; }

/* flex:1, not a fixed width - three boxes at a fixed 92px each (300px, plus gaps) ran
   wider than this column and, like .pg-wheel-wrap above, overflowed it instead of
   shrinking to fit. A square that sizes itself off the space actually available fits
   any column width instead of assuming one. */
.pg-box {
    flex: 1;
    aspect-ratio: 1;
    min-width: 0;
    border: 2px solid var(--wx-line, #2c2c2c);
    border-radius: var(--wx-radius, 12px);
    background: var(--wx-surface-2, #151515);
    color: var(--wx-ink, #fff);
    font: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 150ms ease, border-color 150ms ease;
}

.pg-box:disabled { cursor: default; }
.pg-box:not(:disabled):hover { transform: translateY(-3px); border-color: var(--wx-signal, #d4af37); }
.pg-box.is-chosen { border-color: var(--wx-signal, #d4af37); }

.pg-box.is-open {
    background: var(--wx-signal, #d4af37);
    color: var(--wx-signal-ink, #111);
}

.pg-box-prize { font-size: 0.72rem; padding: 4px; text-align: center; line-height: 1.2; }

/* The odds table (.pg-info-odds, .pg-num, .pg-chance) is styled entirely by
   gamestage.css now, as one of the payout shapes .gi knows how to draw - see the note
   there. Nothing of its own needed here any more. */