/* Slots screen. Mobile-first: the default rules target a phone, and the wider
   side-by-side cabinet is layered on at >=820px. Phone is the priority surface, so it
   gets the simple path and desktop is the adaptation - not the other way round.

   The cabinet is art, not surface. Its brushed metal, the reel window and the gold are
   the machine being drawn, and they stay as drawn under every theme - a chrome cabinet
   that turned white on a light theme would look broken rather than branded. What does
   follow the theme is the interface around it: the win and the buttons. Deliberate, not
   missed. */

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

    --slots-gold: #f5c542;
    /* The machine's own shell. It used to run #262626 to #4a4a4a - a light grey slab
       against the dark bordered card every game sits in, so slots was the one game whose
       middle was lighter than the panel around it. Now it is the same surface the Drop
       Zone board and the card table use, lifted very slightly at the bottom so it still
       reads as a cabinet rather than a flat area. */
    --slots-cabinet-top: var(--wx-surface-2, #151515);
    --slots-cabinet-bottom: #1e2128;

    display: flex;
    flex-direction: column;
    gap: 14px;
    /* No padding of its own any more - .gstage-game (see gamestage.css) now draws the
       same bordered card every game sits in, with its own inset built in. */
    /* width:100% is load-bearing, not decoration. On the website this is a block in normal
       flow, where margin:0 auto centres it at full width. In the app it is a flex item of
       AppChrome's column, and an auto cross-axis margin cancels the default align-self:
       stretch - so the width fell back to fit-content, i.e. driven by the content.
       The spin then changed the content ("Spinning..." vs "You Won 12,500 Points!", and
       symbols swapping between image and glyph), so the whole game resized on nearly every
       animation frame: measured on the emulator as 11 resizes in one spin, flipping between
       412.2px and 255.1px. Pinning the width makes it independent of content in both hosts. */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.slots-loading,
.slots-unavailable {
    padding: 40px 16px;
    text-align: center;
}

/* ---------- header ---------- */

/* The title bar (.gh, .gh h2, .gh-meta, .gh-meta.is-win for the win line) is shared
   with every other game now - see gamestage.css. This used to be its own large,
   centred header, which is why the title jumped in size and position against every
   other game on the rail. */

/* Free spins, token balance and cost moved to the shared GameStatusBar every game
   opens with now (see gamestage.css's .gsb) - this used to be its own row here. */

/* ---------- cabinet ---------- */

.slots-cabinet {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: var(--wx-radius, 12px);
    border: 1px solid var(--wx-line, #2c2c2c);
    background: linear-gradient(to bottom, var(--slots-cabinet-top), var(--slots-cabinet-bottom));
}

.slots-reels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.slots-reel {
    /* So the symbol can be sized from this square - see .slots-reel-art. */
    container-type: inline-size;
    aspect-ratio: 1;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    /* Grid items default to min-height/min-width:auto, which lets content override
       aspect-ratio and push the cell taller. During a spin the symbols swap every 90ms,
       so that showed up as the cabinet resizing on almost every frame. */
    min-width: 0;
    min-height: 0;
}

/* A fixed box, deliberately not max-width/max-height.
   Sized by max-* the element takes its content's size: an <img> uses the artwork's
   intrinsic dimensions - different per symbol, and momentarily zero while a new src
   loads - and an <i> uses its glyph metrics. Churning through symbols therefore resized
   the cell on every frame, and the whole game visibly flashed and jumped. A fixed box
   makes every symbol occupy identical space whatever it is and whether or not it has
   loaded yet. */
/* The symbol inside its window.

   Sized off the REEL rather than off the viewport. The glyph used to be
   clamp(1.75rem, 9vw, 3rem) while its box was 70% of the reel - two measures with nothing
   to do with each other, so how much of its window a symbol filled depended on how wide
   the browser happened to be. Container units tie it to the square it actually sits in.

   Smaller too: at 70% an uploaded image ran almost to the edges of a white window with an
   inset shadow around it, which read as crowded rather than as a symbol on a reel. */
.slots-reel-art {
    width: 60%;
    height: 60%;
    font-size: clamp(1.4rem, 7vw, 2.4rem);
}

@supports (container-type: inline-size) {
    .slots-reel-art { font-size: 40cqw; }
}

img.slots-reel-art {
    display: block;
    object-fit: contain;

    /* Centred within whatever the box leaves it. object-fit centres the IMAGE inside this
       box - so a source file with uneven transparent padding of its own will still sit off
       to one side, and that is the file rather than this. */
    object-position: center;
    margin: auto;
}

/* Centres the glyph inside the same fixed box the images get. */
i.slots-reel-art {
    display: grid;
    place-items: center;
    line-height: 1;
}

.is-spinning .slots-reel-art {
    opacity: 0.85;
}

/* Big enough to hit comfortably with a thumb - 44px is the usual minimum touch target. */
/* The same button Drop Zone and Higher or Lower put under their own boards - see
   .dz-play. It used to be a control ON the machine, sized and lettered like a cabinet
   button; out from under the shell it should be the press the rest of the games ask for,
   and look like it. */
/* The spin button is .gplay (gamestage.css) - the same button every game buys a go
   with. Nothing slots-specific is left on it. */

.slots-counter {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.slots-digit {
    width: 2ch;
    padding: 4px 0;
    text-align: center;
    background: var(--wx-good, #1f7a34);
    color: var(--wx-signal-ink, #fff);
    font-size: clamp(1.1rem, 5vw, 1.6rem);
    font-weight: 700;
    border-radius: 5px;
}

/* ---------- tray + coins ---------- */

.slots-tray-area {
    position: relative;
    min-height: 150px;
    flex: 1 1 auto;
}

.slots-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
    max-width: 60%;
    max-height: 70%;
    object-fit: contain;
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}

.slots-coins {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Above the tray (z-index 2): coins are emitted at the slot line, so they have to
       paint over the tray face to look like they are spilling out of it. Painting
       under the tray hid them until they had already fallen clear of it. */
    z-index: 3;
}

.slots-tray {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(280px, 70%);
    height: 24px;
    z-index: 2;
    background: linear-gradient(to bottom, #7a7a7a, #3d3d3d 55%, #2a2a2a);
    border: 2px solid #262626;
    border-radius: 4px 4px 12px 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
}

.slots-tray::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 5px;
    height: 8px;
    background: #0d0d0d;
    border-radius: 5px;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.95);
}

/* ---------- payout key ---------- */

/* Same story as Scratch's prize list (see scratch.css): this was its own card - a
   metal-gradient box, grey bordered rows, a centred title - before Slots moved its
   rules panel into .gi. The wrapper moved; these rules didn't, and being
   lower-specificity than .gi's own .slots-key* versions in gamestage.css meant they
   mostly lost rather than left - each row still carried this file's margin, border and
   grey background UNDER the flush hairline row gamestage.css was drawing, and the
   title stayed centred because gamestage.css never told it not to be. Deleted outright
   - .gi's copy is the whole design now. */

/* The wild row explains a rule instead of listing a combination and payout, so it has
   nothing to sit opposite and reads better centred. */
.slots-key-row-note {
    justify-content: center;
}

.slots-key-combo {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.slots-key-art {
    font-size: 1.15rem;
    width: 1.35rem;
    height: 1.35rem;
    object-fit: contain;
}

.slots-key-label {
    font-size: 0.95rem;
}

.slots-key-payout {
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- wider screens ---------- */

@media (min-width: 820px) {
    /* This used to be a two-column grid - the payout key on the left, the cabinet on
       the right - from when .slots drew its own key beside itself. The key moved into
       the shared .gi panel outside .slots entirely; .slots-key hasn't been a child of
       .slots for a while, so "key" was an empty area holding a 300px column open for
       nothing, forcing the cabinet into a column too narrow for its own reels and
       spin button. In three equal page-level columns there's no longer a spare few
       hundred pixels for that to hide in - it just overflowed into the wins column
       next door. .slots' own base rule is a flex column that already stretches
       .slots-cabinet across its full width, mobile or wide; nothing here needs to lay
       it out differently at this breakpoint any more. */
    .slots-reels {
        gap: 20px;
        padding: 10px;
    }

    .slots-reel {
        max-width: 120px;
    }

    .slots-tray-area {
        min-height: 220px;
    }
}

/* ── The message box ─────────────────────────────────────────────────────────────
   Under the status bar, the same fixed-height box Drop Zone keeps in the same place
   (see .dz-message). Fixed height on purpose: it changes on every spin, and a box that
   grew and shrank with its own text would move the machine under it each time. */
/* .slots-message: the box itself is .game-message in gamestage.css - one rule for every
   game. Only this game's own variants live here. */

/* ---------- the re-spin ----------
   After the reels stop, one may be spun again. Every reel becomes a target; the ones on
   the best line are dimmed and tagged "keep", the rest "re-spin". The picked reel gets
   the signal ring while its ad counts. */

.slots-reel { position: relative; }
.slots-reel.is-pickable { cursor: pointer; outline: 2px dashed var(--wx-signal, #d4af37); outline-offset: -2px; }
.slots-reel.is-pickable.is-kept { outline-style: dotted; opacity: 0.85; }
.slots-reel.is-picked { outline: 3px solid var(--wx-signal, #d4af37); }

.slots-reel-tag {
    position: absolute;
    left: 0; right: 0; bottom: 4px;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wx-signal, #d4af37);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}