/* Drop Zone.

   A real fall through a peg field, through gates the player sets first - see
   DropZoneGame.razor. Tokens are the storefront's (--wx-*), the same set every other
   game's stylesheet uses. */

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

    display: grid;
    /* Same grid-blowout fix every other game's top-level class needs (see the identical
       note on .pg/.hl/.ww/.tv) - without an explicit track, the implicit one sizes to
       whatever its widest child asks for (.dz-board's own min(360px, 92vw)) rather than
       to this element's own width:100%. */
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    justify-items: center;
    color: var(--wx-ink, #fff);
    width: 100%;
    box-sizing: border-box;
}

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

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

/* Always on screen, fixed height - same reasoning as Spin to Win's own .pg-message
   (see prizedraw.css): a card that only appears once something has landed changes the
   whole game's height the first time somebody actually wins, and everything below it
   steps down to make room. width:100%, matching .gsb right above it. */
/* .dz-message: the box itself is .game-message in gamestage.css - one rule for every
   game. Only this game's own variants live here. */

/* ── The board ─────────────────────────────────────────────────────────────── */

/* Wider than the rest of the column - the message card, the gates row and the play
   button all match .gsb's own 100%, but the peg field earns being the one deliberately
   wide thing on screen the same way Spin to Win's wheel already is. */
.dz-board {
    position: relative;
    width: min(360px, 92vw);
    box-sizing: border-box;
}

/* ── The wipe picker ───────────────────────────────────────────────────────── */

/* Laid ON the board rather than above it.

   The board already opens with an empty strip - the pegs start six per cent down, and
   the ball is released into it - so a rail sitting above the board was asking for its
   own 48px of screen next to 60px of board that was doing nothing. On a phone that is
   the difference between the whole game fitting and not. Now it occupies the strip, the
   arrow points straight down into the pegs instead of at a gap between two elements, and
   the ball is released from underneath it, which reads as a chute.

   left/right 0 against .dz-board, which is exactly .dz-pegs' own width: the drop column
   is read off where the arrow sits across this against the board underneath (see
   pickerColumn in dropZonePhysics.js), and the two only agree while the two are the same
   width. z-index puts it over the canvas; the canvas is a sibling, so nothing here is
   clipped by the board's own overflow. */
.dz-picker {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 36px;
    z-index: 2;
}

/* A button, not a rail with a button somewhere else.

   inset: 0 with border-box is what keeps this EXACTLY the board's width, which is the
   one thing here that has to stay true: the drop column is read off where the arrow sits
   across this element against the board underneath (see pickerColumn in
   dropZonePhysics.js), so any padding or margin of its own would quietly shift every
   column the player picks. Hence the reset - a button brings its own. */
.dz-picker-track {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(10, 10, 10, .72);
    border: 1px dashed var(--wx-line, #2c2c2c);
    overflow: hidden;
    font: inherit;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(2px);
}

/* Live: bought, the vaults settled, the arrow running. Solid where it was dashed, gold
   where it was grey, and lit - the whole board changes state at once and this is the
   part of it the player has to press. */
.dz-picker.is-live .dz-picker-track:not(:disabled) {
    border-style: solid;
    border-color: var(--wx-signal, #d4af37);
    background: rgba(48, 38, 8, .82);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, .18), 0 0 14px rgba(212, 175, 55, .22);
    cursor: pointer;
}

@media (hover: hover) {
    .dz-picker.is-live .dz-picker-track:not(:disabled):hover {
        background: rgba(66, 52, 10, .88);
        box-shadow: 0 0 0 1px rgba(212, 175, 55, .3), 0 0 18px rgba(212, 175, 55, .32);
    }
}

.dz-picker.is-live .dz-picker-track:not(:disabled):active {
    background: rgba(92, 72, 14, .92);
}

/* The words the arrow sweeps through.

   Kept UNDER the arrow on purpose (the arrow is the higher layer): the arrow is the
   thing that says where, and a label passing over it would break the one illusion this
   control has. Letter-spaced wide so the arrow spends most of its journey between
   letters rather than on top of one, and dimmed right back until the press is live so
   it reads as a place the button will be rather than a button that is not working. */
.dz-picker-label {
    position: relative;
    z-index: 1;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    color: var(--wx-muted, #9a9a9a);
    opacity: 0.4;
    user-select: none;
}

.dz-picker.is-live .dz-picker-label {
    color: var(--wx-signal, #d4af37);
    opacity: 1;
    text-shadow: 0 0 10px rgba(212, 175, 55, .45), 0 1px 2px rgba(0, 0, 0, .8);
}

/* The board's zone colours, as the board actually shows them.

   A band on the board is a very faint wash with a faint line at its boundary, so a chip
   painted in the saturated gate colour was not the same colour at all - it was the colour
   that band's GATES are drawn in. These are the wash and the edge, which is what a band
   looks like.

   They live here because the key in the info panel is HTML and the board is a canvas;
   dropZonePhysics.js carries the same values in ZONE_TINTS/VAULT_TINT. Change one, change
   the other. */
:root {
    --dz-zone-1-wash: rgba(96, 150, 220, .09);
    --dz-zone-1-edge: rgba(96, 150, 220, .22);
    --dz-zone-2-wash: rgba(150, 120, 220, .10);
    --dz-zone-2-edge: rgba(150, 120, 220, .24);
    --dz-zone-3-wash: rgba(212, 175, 55, .12);
    --dz-zone-3-edge: rgba(212, 175, 55, .28);
    --dz-zone-vault-wash: rgba(64, 190, 120, .17);
    --dz-zone-vault-edge: #43c47c;
}

/* A silver arrow pointing down at the board, not a ball.

   It used to be a 14px sphere matching the ball that drops, which read as the ball
   already being up there and sliding about rather than as a pointer to the column it is
   about to appear in. An arrow says where, and says nothing about what. */
.dz-picker-mark {
    position: absolute;
    z-index: 2;
    top: 9px;
    left: 0;
    width: 16px;
    height: 18px;
    margin-left: -8px;

    /* A stem with a head under it: a narrow bar down the middle, then the point. The
       gradient runs across it so the two faces catch the light differently, which is what
       makes it read as metal rather than as a flat glyph. */
    background: linear-gradient(100deg, #6b747c 0%, #cfd8de 34%, #ffffff 50%, #b9c2c9 66%, #59616a 100%);
    clip-path: polygon(38% 0%, 62% 0%, 62% 52%, 100% 52%, 50% 100%, 0% 52%, 38% 52%);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));

    /* Not shown at all until it is sweeping. A parked arrow is an arrow pointing at a
       column nobody chose, on a board where where it points is the whole promise.

       Hidden rather than removed so it keeps its place in the layout and JS can still
       measure it - the column comes from where this element actually is when DROP NOW is
       pressed (see pickerColumn in dropZonePhysics.js), so the animation only has to look
       right rather than agree with a second clock. */
    left: 50%;
    visibility: hidden;
}

.dz-picker.is-live .dz-picker-mark {
    visibility: visible;
    animation: dz-wipe 650ms linear infinite alternate;
}

@keyframes dz-wipe {
    /* 3% either side accounts for the mark's own half-width against the track's
       rounded ends - 0%/100% would centre it half off the edge at each turn. */
    from { left: 3%; }
    to   { left: 97%; }
}

/* On a phone the whole game has to fit without scrolling to reach the thing that drops
   the ball. The board is the biggest single thing on screen and everything on it is
   drawn from its own height (see rowSpacing in dropZonePhysics.js), so it can simply be
   told to be shorter and the pegs, bands and vaults come with it. */
@media (max-width: 430px) {
    .dz { gap: 10px; }
    /* The message box keeps the height every other game's has - it is .game-message,
       and the same size on every game was the point of making it one rule. The eight
       pixels come out of the board instead. */
    .dz-pegs { height: 68vh; min-height: 392px; max-height: 512px; }
}

/* ── The peg field ─────────────────────────────────────────────────────────── */

/* Pegs, gates and the ball are all canvas-drawn (dropZonePhysics.js) - this div only
   ever provides the size a ResizeObserver on the JS side keeps the canvas matched to.
   A fixed height, not a min-height, and the canvas absolutely positioned inside it:
   the canvas must be OUT of flow, or its own size feeds back into the div's, the
   observer fires, the canvas grows to match, and the page climbs a few pixels a
   frame forever. */
.dz-pegs {
    position: relative;
    height: 560px;
    border-radius: var(--wx-radius, 12px);
    background: var(--wx-surface-2, #151515);
    overflow: hidden;
}

.dz-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    touch-action: manipulation;
}

/* ── The gates row ─────────────────────────────────────────────────────────── */

/* Same shape and width as Spin to Win's own .pg-bump (see prizedraw.css) - always on
   screen, so what the gates cost is never a surprise. */
/* Three pills under the board, the same shape as each other and as the Clear button
   always was: gates set, vaults open, clear. A grid of three equal tracks rather than
   flex with space-between, so the middle one is genuinely in the middle and the outer
   two are the same distance from it whatever the numbers say. */
.dz-gates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.dz-pill {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    padding: 7px 12px;
    border: 1px solid var(--wx-line, #2c2c2c);
    border-radius: 999px;
    background: none;
    color: var(--wx-muted, #9a9a9a);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
}

.dz-pill strong {
    color: var(--wx-ink, #fff);
    font-size: 0.95rem;
}

/* How many vaults are still open. Green to match them (see VAULT_TINT in
   dropZonePhysics.js) once the go has started shutting them - a full row is the
   board before a drop, not an achievement. */
.dz-pill-vaults.is-thinned,
.dz-pill-vaults.is-thinned strong { color: #43c47c; }

/* What the go has collected so far, in the signal gold. */
.dz-pill-total strong { color: var(--wx-signal, #d4af37); }

/* The unlock's clock, under the pills - the wheel's .pg-bump-clock. */
.dz-unlock-clock {
    margin: 0;
    font-size: 0.8rem;
    color: var(--wx-muted, #9a9a9a);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── The play button ───────────────────────────────────────────────────────── */

/* Same shape as Higher or Lower's own go-button and Spin to Win's own play button -
   full width, matching .gsb rather than the board's own wider size (see the note on
   .dz-board). */
/* The start button is .gplay (gamestage.css). */

@media (prefers-reduced-motion: reduce) {
    .dz-picker.is-live .dz-picker-mark { animation: none; left: 50%; }
}

/* ── The zone key ────────────────────────────────────────────────────────────────
   Lives in the info panel and borrows the shape .slots-key already set (see
   gamestage.css). Spaced out rather than packed, because it is read once to learn the
   board and then only glanced at. */
.gi .dz-key-row {
    padding: 11px 12px;
}

/* A chip painted exactly the way a band is painted: the board's own background, the
   band's wash over it, the band's edge line around it. At this size a .09-alpha wash is
   nearly nothing on its own - the border is what makes it a colour rather than a smudge,
   and it is the same border the band has. */
.gi .dz-key-swatch {
    flex: 0 0 auto;
    width: 34px;
    height: 18px;
    border-radius: 4px;
    background-color: var(--wx-surface-2, #151515);
    border: 1px solid transparent;
}

.gi .dz-key-swatch.is-z0 {
    background-image: linear-gradient(var(--dz-zone-1-wash), var(--dz-zone-1-wash));
    border-color: var(--dz-zone-1-edge);
}

.gi .dz-key-swatch.is-z1 {
    background-image: linear-gradient(var(--dz-zone-2-wash), var(--dz-zone-2-wash));
    border-color: var(--dz-zone-2-edge);
}

.gi .dz-key-swatch.is-z2 {
    background-image: linear-gradient(var(--dz-zone-3-wash), var(--dz-zone-3-wash));
    border-color: var(--dz-zone-3-edge);
}

/* A gate in every zone: the three bands' washes stacked in one chip, top to bottom in
   the order they are on the board - the prize is the board itself, read down. */
.gi .dz-key-swatch.is-triple {
    background-image: linear-gradient(
        to bottom,
        var(--dz-zone-1-wash) 0 33.4%,
        var(--dz-zone-2-wash) 33.4% 66.7%,
        var(--dz-zone-3-wash) 66.7% 100%);
    border-color: var(--dz-zone-3-edge);
}

/* Not a wash with a hairline round it like the bands above: a vault is a solid-walled
   green box on the board, so its chip is drawn with the walls the box has. */
.gi .dz-key-swatch.is-vault {
    background-image: linear-gradient(var(--dz-zone-vault-wash), var(--dz-zone-vault-wash));
    border-color: var(--dz-zone-vault-edge);
    border-top-color: transparent;
    border-radius: 2px 2px 6px 6px;
}

/* The chip and the band's name travel together, so they are one item against the payout
   on the far side rather than three things spread across the row. */
.gi .dz-key-name {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

/* Armed: the drop is bought and this button is spent - the release is the rail at the
   top of the board now (see .dz-picker-track). It stays on screen greyed rather than
   disappearing, both so the layout holds still and so the label can point up at where
   the press moved to. */