/* WHOOPS Bounty Hunter — slot screen
   Modelled on the reference machine: deep-red moulded cabinet, gold bulb ring
   around the full perimeter, red marquee with gold lettering, bright drum
   reels behind glass, and a chrome lever standing proud on the right.
   All CSS — no image assets. */

/* in-page header (back / title pill / info) */
.bh-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4);}
.bh-iconbtn{width:38px;height:38px;border-radius:var(--r-pill);background:var(--color-panel-2);border:1px solid var(--color-line);
  color:var(--color-text);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  transition:border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast);}
.bh-iconbtn .wb-uic{width:18px;height:18px;}
.bh-iconbtn:hover{border-color:var(--color-yellow);color:var(--color-yellow-bright);transform:translateY(-1px);}
.bh-title-pill{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);
  padding:9px 20px;font-family:var(--font-display);letter-spacing:1.5px;font-size:1rem;color:var(--color-yellow);text-transform:uppercase;
  background:linear-gradient(180deg,#ff5470 0%,var(--color-red) 55%,#a30d16 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.3), 0 4px 16px rgba(232,35,26,.35);
  text-shadow:0 1px 0 #7a0a10, 0 0 10px rgba(255,193,7,.5);}
.bh-title-pill .wb-uic{width:14px;height:14px;color:var(--color-yellow);}

/* ===================== STAGE (halo + lever live here) ===================== */
/* The right padding reserves the strip the lever stands in — kept a little
   narrower than the lever itself so the mounting boss overlaps the cabinet's
   right edge and reads as bolted on, rather than floating beside it.
   The SAME padding is mirrored on the left purely so the cabinet stays
   centred in the column: with padding on one side only it sat ~9px left of
   centre, which visibly misaligned it against the centred topbar above. */
.cabinet-stage{position:relative;padding:0 18px;margin-bottom:var(--sp-4);}
/* Rotating light-ray halo behind the machine. Deliberately width:100% — any
   wider overflows the viewport and gives mobile a horizontal scrollbar; the
   radial mask fades it out well inside that box so it never reaches the
   panels below either. */
.cabinet-stage::before{content:"";position:absolute;left:50%;top:46%;width:100%;padding-bottom:100%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;opacity:.55;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,193,7,.16) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask-image:radial-gradient(circle, #000 10%, transparent 60%);
          mask-image:radial-gradient(circle, #000 10%, transparent 60%);
  animation:rayspin 26s linear infinite;}
.cabinet-stage.win::before{opacity:1;animation:rayspin 6s linear infinite;}
@keyframes rayspin{to{transform:translate(-50%,-50%) rotate(360deg);}}
/* warm pool of light on the "floor" the cabinet stands on — grounds the
   machine instead of leaving it floating on flat black */
.cabinet-stage::after{content:"";position:absolute;left:50%;bottom:-16px;width:78%;height:36px;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center, rgba(255,150,60,.3) 0%, rgba(255,110,40,.12) 42%, transparent 72%);
  filter:blur(9px);}

/* ---- ambient sparkles (positions from fillSparkles() in bountyHunter.js) ---- */
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:6;}
.sparkles i{position:absolute;width:13px;height:13px;opacity:0;
  animation:twinkle 3.6s ease-in-out infinite;}
/* two crossed tapered bars = a 4-point star, drawn without any asset */
.sparkles i::before,.sparkles i::after{content:"";position:absolute;left:50%;top:50%;
  background:#fff6d8;border-radius:2px;box-shadow:0 0 9px 2px rgba(255,214,120,.95);}
.sparkles i::before{width:2px;height:100%;transform:translate(-50%,-50%);}
.sparkles i::after{width:100%;height:2px;transform:translate(-50%,-50%);}
@keyframes twinkle{
  0%,100%{opacity:0;transform:scale(.35) rotate(0deg);}
  50%{opacity:1;transform:scale(1) rotate(90deg);}}

/* ===================== CABINET ===================== */
/* Depth is built from stacked light — bright top rim, dark bottom well,
   bevelled side walls, contact shadow. That reads as a solid moulded object
   at any zoom level, where a 3D rotate only looks right head-on. */
.cabinet{position:relative;z-index:1;border-radius:26px;padding:26px 20px 18px;
  background:
    /* barrel shading across the face: lit centre, dark side walls */
    linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.24) 9%,transparent 26%,transparent 74%,rgba(0,0,0,.28) 91%,rgba(0,0,0,.64) 100%),
    /* body: saturated red through the upper two-thirds before rolling into
       shadow — pulled brighter because at the previous values it read black */
    linear-gradient(180deg,#c2202a 0%,#a3161f 12%,#7d1018 34%,#530a11 58%,#2e070b 82%,#170406 100%);
  box-shadow:
    /* gold trim ring */
    0 0 0 3px #120306,
    0 0 0 6px var(--color-yellow-deep),
    0 0 0 8px #0a0203,
    /* top rim catches light, base sinks away */
    inset 0 3px 0 rgba(255,190,190,.32),
    inset 0 -3px 0 rgba(0,0,0,.9),
    /* side-wall bevels */
    inset 11px 0 22px -11px rgba(255,180,180,.2),
    inset -11px 0 22px -11px rgba(255,180,180,.11),
    inset 0 -36px 64px rgba(0,0,0,.6),
    /* lift, contact shadow, ambient bloom */
    0 30px 70px rgba(0,0,0,.85),
    0 10px 26px rgba(0,0,0,.65),
    0 0 90px rgba(232,35,26,.18);
  transition:box-shadow var(--dur-med) ease;}
/* warm light spill down the cabinet face */
.cabinet::before{content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none;z-index:1;
  background:radial-gradient(130% 58% at 50% -12%, rgba(255,196,150,.22), transparent 60%);}
.cabinet.win{box-shadow:
    0 0 0 3px #120306,
    0 0 0 6px var(--color-yellow),
    0 0 0 8px #0a0203,
    inset 0 3px 0 rgba(255,200,200,.38),
    inset 0 -3px 0 rgba(0,0,0,.9),
    inset 11px 0 22px -11px rgba(255,190,190,.24),
    inset -11px 0 22px -11px rgba(255,190,190,.15),
    inset 0 -36px 64px rgba(0,0,0,.5),
    0 30px 70px rgba(0,0,0,.8),
    0 0 130px 20px rgba(255,193,7,.6);}

/* ---- bulb ring: positions come from fillBulbRing() in bountyHunter.js ---- */
.bulb-ring{position:absolute;inset:11px;pointer-events:none;z-index:4;}
.bulb-ring i{position:absolute;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 36% 30%, #fffdf0 0%, #ffe488 32%, var(--color-yellow) 62%, #a97c00 100%);
  box-shadow:0 0 10px 3px rgba(255,193,7,.95), 0 0 24px 8px rgba(255,193,7,.38), inset 0 -1px 2px rgba(0,0,0,.45);
  animation:bulbChase 1.6s ease-in-out infinite;}
@keyframes bulbChase{0%,100%{opacity:.25;transform:translate(-50%,-50%) scale(.78);}
  45%{opacity:1;transform:translate(-50%,-50%) scale(1.1);}}
.cabinet.win .bulb-ring i{animation-duration:.5s;}

.cabinet-toolbar{position:absolute;top:8px;right:12px;z-index:7;display:flex;gap:6px;}
.cab-icon{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.55);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color var(--dur-fast),border-color var(--dur-fast);}
.cab-icon.on{color:var(--color-yellow);border-color:var(--color-yellow);box-shadow:0 0 9px rgba(255,193,7,.5);}
/* TEMPORARY test-only +1 button — dashed cyan so it can never be mistaken
   for real UI. Disappears when config.devTools is set to false at launch. */
.cab-icon-dev{border-style:dashed;border-color:#3AA0FF;color:#3AA0FF;font-weight:700;}
.cab-icon-dev:disabled{opacity:.4;cursor:default;}

/* ===================== MARQUEE ===================== */
.marquee{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;
  border-radius:var(--r-pill);padding:11px 18px;margin:0 0 16px;
  background:linear-gradient(180deg,#2a0508 0%,#170305 60%,#0d0203 100%);
  border:2px solid var(--color-red-bright);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -6px 14px rgba(0,0,0,.6),
    0 0 18px rgba(232,35,26,.5), 0 0 0 1px rgba(0,0,0,.6);}
.marquee .wb-uic{width:15px;height:15px;color:var(--color-red-bright);flex-shrink:0;
  filter:drop-shadow(0 0 6px rgba(255,59,92,.9));}
.marquee .big{font-family:var(--font-display);color:var(--color-red-bright);
  font-size:clamp(19px,4.6vw,25px);letter-spacing:2.5px;line-height:1;text-transform:uppercase;
  text-shadow:0 0 10px rgba(255,59,92,.9), 0 0 26px rgba(232,35,26,.7);
  animation:neonPulse 2.6s ease-in-out infinite;}
@keyframes neonPulse{
  0%,100%{filter:brightness(1) drop-shadow(0 0 3px rgba(255,59,92,.5));}
  50%{filter:brightness(1.25) drop-shadow(0 0 14px rgba(255,59,92,1));}}
/* slow glass sweep across the marquee */
.marquee::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:32%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-16deg);
  animation:sweep 5.5s ease-in-out infinite;}
@keyframes sweep{0%,12%{left:-40%;}55%,100%{left:120%;}}
.marquee.flash{animation:mflash .22s steps(1) 6;}
@keyframes mflash{0%{filter:brightness(1);}50%{filter:brightness(2.2);}100%{filter:brightness(1);}}

/* ===================== REEL SCREEN ===================== */
/* Recessed window: a dark shadow along the TOP inner edge (cast by the
   cabinet lip above it) and light bouncing along the BOTTOM edge is what
   makes a panel read as cut into the body rather than sitting on it. The
   outer highlight/shadow pair gives the gold frame its own raised bezel. */
.screen{position:relative;z-index:2;overflow:hidden;border-radius:var(--r-md);padding:11px;
  background:linear-gradient(180deg,#000,#0b0b0d);
  box-shadow:
    /* raised bezel around the opening */
    0 -1px 0 rgba(255,220,150,.22),
    0 2px 0 rgba(0,0,0,.75),
    0 6px 18px rgba(0,0,0,.65),
    /* gold frame */
    inset 0 0 0 2px #8a6400,
    inset 0 0 0 3px #d3a021,
    inset 0 0 0 5px #14100a,
    /* recess: shadow from the top lip, bounce light off the bottom */
    inset 0 12px 28px rgba(0,0,0,.95),
    inset 0 -7px 16px rgba(0,0,0,.75),
    inset 0 -1px 0 rgba(255,220,150,.12);
  transition:box-shadow var(--dur-med) ease;}
/* four bezel screws, one per corner */
.screen::before{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;
  background-image:
    radial-gradient(circle at 50% 45%, #e2ddcd 0%, #9a9384 42%, #43403a 70%, transparent 73%),
    radial-gradient(circle at 50% 45%, #e2ddcd 0%, #9a9384 42%, #43403a 70%, transparent 73%),
    radial-gradient(circle at 50% 45%, #e2ddcd 0%, #9a9384 42%, #43403a 70%, transparent 73%),
    radial-gradient(circle at 50% 45%, #e2ddcd 0%, #9a9384 42%, #43403a 70%, transparent 73%);
  background-size:7px 7px;
  background-repeat:no-repeat;
  background-position:
    7px 7px, calc(100% - 7px) 7px,
    7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px);}
/* fixed glass gloss over the whole window */
.screen::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:var(--r-md);
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.09) 47%,transparent 60%);}
.screen.win{box-shadow:
    inset 0 0 0 2px var(--color-yellow),
    inset 0 0 0 4px #14100a,
    inset 0 10px 26px rgba(0,0,0,.7),
    inset 0 0 34px rgba(255,193,7,.4),
    0 0 30px rgba(255,193,7,.4);
  animation:screenWin .42s ease 3;}
@keyframes screenWin{0%,100%{filter:brightness(1);}50%{filter:brightness(1.3);}}

/* The reels are opaque, so this chrome gradient is only visible through the
   8px gaps between them — which turns the gaps into metal divider strips
   separating the drums, with no extra markup. Top-lit so they match the
   cabinet's light direction. */
.reels{display:flex;gap:8px;position:relative;border-radius:3px;
  background:linear-gradient(180deg,#9b9ba4 0%,#63636c 22%,#3a3a42 58%,#1c1c22 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.8);}
.reels.antic{animation:anticShake .16s ease-in-out infinite;}
@keyframes anticShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-1px);}75%{transform:translateX(1px);}}

/* The drum: a hard vertical gradient does the cylinder. Edges fall to near
   black and the middle blows out to white — that contrast is what stops it
   reading as a flat cream card. */
/* The drum. The centre band deliberately stops short of pure white: at full
   white the printed symbols lose all contrast and wash out. A warm off-white
   keeps the cylinder read while letting the icons stay legible. */
.reel{flex:1;height:110px;overflow:hidden;border-radius:8px;position:relative;
  background:linear-gradient(180deg,
    #3f3b35 0%, #6d675e 6%, #a8a296 15%, #d5d0c4 28%,
    #ece8de 44%, #f2eee5 50%, #ece8de 56%,
    #d5d0c4 72%, #a8a296 85%, #6d675e 94%, #3f3b35 100%);
  box-shadow:inset 0 0 20px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.85),
    inset 0 -2px 3px rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.5);}
/* Drum lighting, layered like the real thing: a soft specular sits UNDER the
   symbols (it lights the surface they're printed on, z-index 1), symbols sit
   above it (.strip, z-index 2), and the curvature shadow falls OVER
   everything (z-index 3) so symbols darken as the drum wraps away. */
.reel::after{content:"";position:absolute;left:0;right:0;top:38%;height:22%;transform:translateY(-50%);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 85%);filter:blur(3px);}
.reel::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 8%, rgba(0,0,0,.3) 17%, rgba(0,0,0,.06) 30%, rgba(0,0,0,0) 40%,
    rgba(0,0,0,0) 60%, rgba(0,0,0,.06) 70%, rgba(0,0,0,.3) 83%, rgba(0,0,0,.62) 92%, rgba(0,0,0,.88) 100%);}
.reel.antic{box-shadow:inset 0 0 20px rgba(0,0,0,.5), inset 0 0 0 2px var(--color-yellow), 0 0 18px 3px rgba(255,196,0,.75);}
/* Impact jolt, not a bounce: 110ms, one hard shudder, no settle-back
   oscillation — it should read as the drum slamming against a stop, which
   reinforces the hard stop rather than softening it. */
.reel.landed{animation:reelLand .11s ease-out;}
@keyframes reelLand{0%{transform:translateY(-3px);}60%{transform:translateY(1px);}100%{transform:translateY(0);}}

/* position+z-index so symbols paint above the drum highlight (1) and below
   the curvature shadow (3).
   No transition on `filter` on purpose: the motion blur must snap off the
   frame the reel stops, otherwise it fades out over time and reads as the
   reel gliding to a halt instead of hard-stopping on the audio cue. */
.strip{position:relative;z-index:2;display:flex;flex-direction:column;will-change:transform;}
/* height must stay 88px — slotEngine.js SYM_H depends on it. Only the padding
   changes the icon's visual size, so it's safe to tune here. */
.sym{height:88px;display:flex;align-items:center;justify-content:center;padding:9px;}
.symimg{width:100%;height:100%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
.reel.spin .strip{filter:blur(2.6px);}

/* ===================== LEVER (stands beside the cabinet) ===================== */
.lever{position:absolute;right:0;bottom:34%;z-index:5;width:30px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;
  transform-origin:bottom center;transition:transform .3s cubic-bezier(.3,1.4,.5,1);}
.lever:hover{transform:translateY(-3px);}
.lever.go{transform:rotate(26deg);}
/* Ball knob: off-centre key light, dark terminator lower-right, a warm bounce
   light beneath, and two blurred catchlights — that combination is what makes
   a flat circle read as a sphere. */
.lever .knob{position:relative;width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:
    radial-gradient(circle at 68% 78%, rgba(255,140,120,.55) 0%, transparent 42%),
    radial-gradient(circle at 33% 26%,#ffffff 0%,#ffc4c4 8%,#ff6a6a 30%,var(--color-red) 56%,#8f0a12 82%,#3d0006 100%);
  box-shadow:inset -4px -5px 11px rgba(0,0,0,.6), inset 3px 3px 6px rgba(255,255,255,.34),
    0 5px 12px rgba(0,0,0,.7), 0 0 22px rgba(232,35,26,.5);}
.lever .knob::after{content:"";position:absolute;top:5px;left:7px;width:10px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.88);filter:blur(1.3px);}
.lever .knob::before{content:"";position:absolute;top:13px;left:5px;width:4px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.5);filter:blur(1px);}
/* chrome shaft: dark edge → hot specular → mid → dark edge */
.lever .stick{width:9px;height:74px;margin-top:-3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#2a2a2d 0%,#8c8c92 20%,#f4f4f7 42%,#cfcfd5 56%,#5c5c62 78%,#232326 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.6);}
/* Mounting boss where the shaft enters the cabinet. Sits slightly wider than
   the shaft and overlaps the cabinet's right edge, with a dark inner well so
   the shaft reads as disappearing into the housing rather than stopping on a
   floating block. */
.lever .lever-mount{position:relative;width:30px;height:16px;margin-top:-4px;border-radius:5px;
  background:linear-gradient(180deg,#55555c 0%,#2a2a30 42%,#101014 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 4px rgba(0,0,0,.8),
    0 4px 10px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.6);}
.lever .lever-mount::before{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  width:13px;height:6px;border-radius:3px;background:#0a0a0c;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.9);}

/* ===================== CONTROLS ===================== */
.controls{display:flex;align-items:stretch;gap:8px;margin-top:14px;position:relative;z-index:2;}
/* Fixed widths on both side chips: their labels differ in length between NL
   and EN ("JOUW SPINS"/"YOUR SPINS", "HISTORIEK"/"HISTORY"), and without a
   fixed width the SPIN button between them resized on every language switch. */
.chip-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;width:74px;
  border-radius:var(--r-md);padding:8px 10px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.09);}
.chip-stat b{font-family:var(--font-display);font-size:1.2rem;color:var(--color-yellow);line-height:1;
  text-shadow:0 0 12px rgba(255,193,7,.6);}
.chip-stat span{font-family:var(--font-body);font-size:.54rem;letter-spacing:1px;color:rgba(255,255,255,.5);
  text-transform:uppercase;margin-top:3px;text-align:center;}

.pull{position:relative;flex:1;overflow:hidden;border:none;cursor:pointer;color:var(--color-on-yellow);
  border-radius:var(--r-md);padding:0 14px;
  font-family:var(--font-display);font-weight:400;font-size:clamp(20px,5vw,26px);letter-spacing:2.5px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;
  background:linear-gradient(180deg,#ffe479 0%,var(--color-yellow-bright) 26%,var(--color-yellow) 55%,#e0a800 78%,#b17e00 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8), inset 0 -5px 10px rgba(120,80,0,.35),
    0 6px 0 #8a6400, 0 12px 26px rgba(255,193,7,.32);
  transition:transform .07s ease, box-shadow .12s ease, filter var(--dur-fast) ease;}
.pull small{font-family:var(--font-body);font-weight:700;font-size:.55rem;letter-spacing:1px;opacity:.7;text-transform:uppercase;}
/* shine sweep — only while the button is actually usable */
.pull::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:38%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);
  animation:sweep 3.4s ease-in-out infinite;}
.pull:not(:disabled){animation:pullBreathe 2.6s ease-in-out infinite;}
@keyframes pullBreathe{
  0%,100%{box-shadow:inset 0 2px 0 rgba(255,255,255,.8), inset 0 -5px 10px rgba(120,80,0,.35), 0 6px 0 #8a6400, 0 12px 26px rgba(255,193,7,.3);}
  50%{box-shadow:inset 0 2px 0 rgba(255,255,255,.8), inset 0 -5px 10px rgba(120,80,0,.35), 0 6px 0 #8a6400, 0 12px 36px rgba(255,193,7,.6);}}
.pull:not(:disabled):hover{filter:brightness(1.05);}
.pull:active{transform:translateY(5px);animation:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 8px rgba(120,80,0,.4), 0 1px 0 #8a6400, 0 4px 12px rgba(0,0,0,.45);}
.pull:disabled{filter:grayscale(.65) brightness(.5);cursor:default;animation:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25), 0 3px 0 #4a3700;}
.pull:disabled::after{display:none;}

.chip-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex-shrink:0;
  border-radius:var(--r-md);padding:8px 6px;cursor:pointer;text-transform:uppercase;width:74px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.78));border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.09);
  color:rgba(255,255,255,.6);font-family:var(--font-body);font-weight:700;font-size:.54rem;letter-spacing:.5px;
  transition:color var(--dur-fast),box-shadow var(--dur-fast);}
.chip-btn:hover{color:var(--color-yellow-bright);box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px var(--color-yellow);}
.chip-btn .wb-uic{width:15px;height:15px;}

.no-spins-note{display:none;font-family:var(--font-body);font-weight:600;color:#ff8b8b;font-size:.78rem;
  text-align:center;margin:12px 0 0;position:relative;z-index:2;}
.no-spins-note.show{display:block;}

/* ===================== RESULT / PRIZE CARD ===================== */
/* Hidden until there is actually a prize to show — an always-visible empty
   panel pushed the rewards grid off the first phone screen. */
.result{display:none;margin:0 0 var(--sp-5);background:var(--grad-panel);border:1px solid var(--color-yellow);
  border-radius:var(--r-lg);padding:16px;text-align:center;
  box-shadow:var(--shadow-card), 0 0 30px rgba(255,193,7,.2);}
.result.show{display:block;}

.prize{display:flex;align-items:center;gap:14px;text-align:left;animation:prizeIn .5s var(--ease-pop);}
@keyframes prizeIn{0%{transform:scale(.82);opacity:0;}100%{transform:scale(1);opacity:1;}}
/* icon sits in a lit gold well with a rotating conic shimmer behind it */
.prize-badge{position:relative;width:62px;height:62px;flex-shrink:0;border-radius:50%;padding:13px;overflow:hidden;
  background:radial-gradient(circle at 36% 30%, #4a4132, #120e07 78%);
  border:2px solid var(--color-yellow);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7), 0 0 24px rgba(255,193,7,.5);}
.prize-badge::before{content:"";position:absolute;inset:-40%;z-index:0;opacity:.5;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,193,7,.6) 40deg, transparent 80deg,
    transparent 180deg, rgba(255,193,7,.5) 220deg, transparent 260deg);
  animation:rayspin 3.4s linear infinite;}
.prize-badge .wb-ic{position:relative;z-index:1;}
.prize-body{display:flex;flex-direction:column;min-width:0;}
.prize-tag{font-family:var(--font-body);font-weight:700;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--color-yellow);opacity:.9;}
.prize-name{font-family:var(--font-display);font-size:1.5rem;line-height:1.05;color:var(--color-text);letter-spacing:.5px;margin:2px 0 3px;
  text-shadow:0 0 22px rgba(255,193,7,.35);}
.prize-sub{font-family:var(--font-body);font-size:11.5px;font-weight:600;color:var(--color-text-mute);}
/* Extra Spin uses the blue accent its icon already carries */
.prize.is-respin .prize-badge{border-color:#3AA0FF;box-shadow:inset 0 2px 6px rgba(0,0,0,.7), 0 0 24px rgba(58,160,255,.5);}
.prize.is-respin .prize-badge::before{background:conic-gradient(from 0deg, transparent 0deg, rgba(58,160,255,.6) 40deg, transparent 80deg,
    transparent 180deg, rgba(58,160,255,.5) 220deg, transparent 260deg);}
.prize.is-respin .prize-tag{color:#7cc4ff;}
.prize-cta{margin-top:14px;}
.prize-cta .wb-uic{width:15px;height:15px;}

.hint{font-family:var(--font-body);color:var(--color-text-mute);font-weight:600;font-size:11px;text-align:center;margin-top:12px;line-height:1.5;}

/* ===================== BIG WIN + COINS ===================== */
.bigwin{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:58;pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(255,193,7,.16), rgba(0,0,0,.62) 60%);}
.bigwin.show{display:flex;}
.bigwin .txt{font-family:var(--font-display);font-size:clamp(42px,11vw,72px);color:var(--color-yellow);letter-spacing:2px;text-align:center;
  text-shadow:0 3px 0 #8a6400, 0 5px 0 #5c4300, 0 8px 22px rgba(0,0,0,.7), 0 0 40px rgba(255,193,7,.8);
  animation:bw 1s var(--ease-pop);}
@keyframes bw{0%{transform:scale(.2) rotate(-14deg);opacity:0;}45%{transform:scale(1.28) rotate(5deg);opacity:1;}
  70%{transform:scale(.96) rotate(-1deg);}100%{transform:scale(1) rotate(0);opacity:1;}}

/* gold coin particles (CSS discs, so they match the flat icon set) */
.coin{position:fixed;top:-24px;width:16px;height:16px;border-radius:50%;z-index:55;pointer-events:none;
  background:radial-gradient(circle at 34% 30%, #fff6cf 0%, var(--color-yellow-bright) 38%, var(--color-yellow) 62%, #a97c00 100%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.3), 0 0 8px rgba(255,193,7,.55);
  animation:coinFall linear forwards;}
.coin.red{background:radial-gradient(circle at 34% 30%, #ffd7dd 0%, #ff6b83 38%, var(--color-red) 66%, #7a0a10 100%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.3), 0 0 8px rgba(232,35,26,.5);}
@keyframes coinFall{
  0%{transform:translateY(0) rotateY(0deg) rotateZ(0deg);opacity:1;}
  100%{transform:translateY(108vh) rotateY(900deg) rotateZ(220deg);opacity:.85;}}

/* ===================== POSSIBLE REWARDS ===================== */
/* tighter rhythm on the play screen so the machine and the rewards grid
   both land inside the first phone screen */
.container-play .home-section{margin-top:var(--sp-4);}
.container-play .bh-topbar{margin-bottom:var(--sp-3);}

.rewards-title{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:var(--sp-3);}
.rewards-title h2{font-size:1.15rem;letter-spacing:1px;}
.rewards-title .wb-uic{width:14px;height:14px;color:var(--color-yellow);}

/* Continuously drifting row (driven from bountyHunter.js). Native
   overflow-x so a finger drag scrolls it; the drift pauses while touched.
   Edges are masked so tiles fade out instead of being cut off hard. */
.rewards-ticker{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
  padding:2px 0 8px;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);}
.rewards-ticker::-webkit-scrollbar{display:none;}
.rewards-ticker .reward-tile{flex:0 0 104px;}

.rewards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
/* collectible-card treatment: warm top light, gold hairline, lift on hover */
.reward-tile{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:15px 8px 12px;text-align:center;
  background:
    radial-gradient(120% 70% at 50% -18%, rgba(255,193,7,.12), transparent 62%),
    var(--grad-panel);
  border:1px solid var(--color-line);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;}
.reward-tile:hover{transform:translateY(-4px);border-color:rgba(255,193,7,.5);
  box-shadow:var(--shadow-card-hover), 0 0 26px rgba(255,193,7,.14);}
/* diagonal sheen that sweeps across on hover */
.reward-tile::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);
  transition:left .55s ease;}
.reward-tile:hover::after{left:130%;}
.reward-tile-badge{position:relative;width:50px;height:50px;margin:0 auto 9px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:10px;
  background:radial-gradient(circle at 35% 26%, #45443f, #0b0b0b 78%);
  border:2px solid #4a4740;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7), inset 0 -1px 2px rgba(255,255,255,.09), 0 2px 6px rgba(0,0,0,.5);}
.reward-tile .lbl{font-family:var(--font-body);font-size:11.5px;font-weight:700;color:var(--color-text-dim);position:relative;z-index:1;}

@media (max-width:639px){
  .rewards-grid{display:flex;grid-template-columns:none;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
    margin:0 calc(var(--sp-4) * -1);padding:2px var(--sp-4) 6px;-webkit-overflow-scrolling:touch;}
  .rewards-grid::-webkit-scrollbar{display:none;}
  .reward-tile{flex:0 0 100px;scroll-snap-align:start;}
}

/* ===================== DESKTOP SCALE-UP ===================== */
@media (min-width:768px){
  /* A slot cabinet is a portrait object — stretching it across the full
     1180px content column is what made this look wrong on a wide screen.
     Keep the playfield a centred column and let it grow in scale, not width. */
  .container-play{max-width:520px;}
  .cabinet-stage{padding:0 22px;}
  .cabinet{padding:36px 26px 26px;}
  /* a little more of the drum visible; the engine measures this at runtime,
     so no JS constant needs to change alongside it */
  .reel{height:124px;}
  .lever{width:38px;}
  .lever .knob{width:36px;height:36px;}
  .lever .stick{height:88px;width:10px;}
  .lever .lever-mount{width:36px;height:18px;}
  .controls{gap:10px;margin-top:16px;}
}

/* Respect users who ask for less motion: keep the game readable, drop the
   ambient loops (chase, breathing, sweeps) that never stop on their own. */
@media (prefers-reduced-motion: reduce){
  .bulb-ring i,.marquee .big,.marquee::after,.pull::after,.pull:not(:disabled),
  .reels.antic,.screen.win,.cabinet-stage::before,.sparkles i,.prize-badge::before{animation:none;}
  .sparkles{display:none;}
  .coin{animation-duration:1.2s;}
}