/* ==========================================================================
   SMOKIN' HOT STUFF — WICKED WHEEL cabinet shell
   Rebuilt to read as the reference cabinet: charred-black reel window inside
   a fire-red frame, 243-WAYS rails, gold coin crown with a pouring cauldron,
   six-tier progressive header, red flame control deck with gold-boxed
   CASH / WIN / BET MULTIPLIER / BET readouts.

   CSP: no external fonts — Impact/system condensed stacks only; data: URIs
   for images only. Legacy :root variable NAMES are kept (the UNIBOT portal
   shell at the bottom of this file cascades off them); the Hot Stuff palette
   (design doc §3) gets its own dedicated vars.

   JS-contract blocks preserved (ui.js/main.js/fx.js create these classes):
   bulbs/chase, odometers, mayhem meter, buffs, pets, banners, rollup,
   freespin chip, feed entries, takeover (tk-*) system, modal/paytable/stats,
   enter overlay, UNIBOT shell.
   ========================================================================== */

:root{
  /* legacy names (portal cascade) — values tuned to the Hot Stuff palette */
  --ink:        #070302;
  --cabinet-1:  #2b0d06;
  --cabinet-2:  #140503;
  --felt:       #3a0b08;
  --gold:       #f5b800;   /* molten gold (primary accent) */
  --gold-hot:   #ffd24a;   /* bright molten */
  --brass:      #b8742a;
  --magenta:    #ff2e5e;   /* legacy accent (portal pills) */
  --red:        #ff3b1e;
  --cyan:       #ffb000;   /* legacy name — molten amber */
  --green:      #3ad42e;   /* green accent (wheel wedges / ULTRA / free) */
  --violet:     #c0344f;
  --white:      #fff3e6;

  /* Hot Stuff palette — design doc §3 */
  --fire-red:     #e8240f;
  --fire-red-2:   #ff3b1e;
  --fire-orange:  #ff7a1e;
  --fire-orange-2:#ff9a2e;
  --molten:       #ffd24a;
  --molten-2:     #f5b800;
  --pale-gold:    #ffe9ae;
  --cell-black:   #0a0604;
  --cell-black-2: #160a06;
  --maroon:       #3a0b08;

  /* tier colors — consistent EVERYWHERE (design doc §3) */
  --tier-mini:  #aab0b6;
  --tier-minor: #c98b4a;
  --tier-major: #e8240f;
  --tier-mega:  #a23cff;
  --tier-ultra: #3ad42e;
  --tier-grand: #2e9bff;

  /* CSP-safe system stacks: heavy condensed display + condensed numerals */
  --marquee-font: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Arial Black', sans-serif;
  --num-font: 'Bahnschrift SemiCondensed', 'Arial Narrow', 'Franklin Gothic Medium', 'Segoe UI', Arial, sans-serif;

  --ui-speed: 1;          /* turbo scales micro-animations */
  --chase-dur: 3.4s;      /* crown light-bar chase period */
  --bulb-n: 40;

  --glow-gold: 0 0 6px rgba(255,210,74,.9), 0 0 18px rgba(245,184,0,.55), 0 0 44px rgba(255,122,30,.3);
  --glow-fire: 0 0 6px rgba(255,59,30,.9), 0 0 18px rgba(232,36,15,.55), 0 0 44px rgba(232,36,15,.3);
  --glow-magenta: 0 0 6px rgba(255,46,94,.9), 0 0 18px rgba(255,46,94,.55), 0 0 44px rgba(255,46,94,.3);
}

*{ margin:0; padding:0; box-sizing:border-box; }
[hidden]{ display:none !important; }

html,body{ min-height:100%; }
body{
  background:
    radial-gradient(1400px 900px at 50% 20%, #2e0a04 0%, var(--ink) 58%, #030100 100%) fixed;
  color:var(--white);
  font-family:var(--num-font);
  overflow-x:hidden;
  padding:22px 14px 58px;
  -webkit-font-smoothing:antialiased;
}

/* FULL-SCREEN CABINET (slots page only): the room is exactly one viewport
   tall — the cabinet flexes to fill it (crown / pots / reels / deck), no page
   scroll. Portal pages (.portal-page) keep the normal scrolling document. */
html:has(body.casino-floor){ height:100%; }
body.casino-floor{
  height:100dvh;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0 clamp(8px, 1.6vw, 22px);
}

/* Film grain over the whole room (CSS-only noise, inline SVG turbulence) */
body::after{
  content:'';
  position:fixed; inset:0;
  z-index:110;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Volumetric light from above — warmed to firelight */
#room-light{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 56% 48% at 50% -8%, rgba(255,160,60,.09), transparent 62%),
    radial-gradient(ellipse 90% 30% at 50% 108%, rgba(60,12,4,.55), transparent 70%);
}

button{
  font-family:var(--num-font);
  color:inherit;
  background:none;
  border:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
button:focus-visible{ outline:1px solid var(--gold); outline-offset:2px; }

/* ==========================================================================
   CABINET — fire-red frame, letterboxed to the viewport (~16:9 cabinet)
   ========================================================================== */

#cabinet{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-height:0;                 /* lets the reel row shrink-to-fit */
  display:flex;
  flex-direction:column;
  width:min(1720px, 100%);
  margin:6px auto 8px;
  border-radius:20px;
  padding:10px 16px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 12%, rgba(0,0,0,.4) 100%),
    radial-gradient(140% 120% at 50% -10%, #8c1206 0%, #4a0d04 38%, #1c0502 100%);
  box-shadow:
    0 40px 90px -18px rgba(0,0,0,.95),
    0 8px 34px rgba(0,0,0,.8),
    0 0 60px rgba(232,36,15,.18),
    inset 0 1px 0 rgba(255,233,174,.12);
  /* NOTE: no transform/transition here — fx.js shakes #cabinet via inline transform */
}
/* gold pinstripe inset ring */
#cabinet::before{
  content:'';
  position:absolute; inset:6px;
  border-radius:15px;
  border:1px solid rgba(255,210,74,.4);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 36px rgba(0,0,0,.45);
  pointer-events:none;
  z-index:0;
}
#cabinet > *{ position:relative; z-index:1; }

/* devil horns at the top corners */
.horn{
  position:absolute;
  top:-24px;
  width:44px; height:66px;
  z-index:3;
  filter:drop-shadow(0 0 8px rgba(232,36,15,.55));
  pointer-events:none;
}
#horn-left { left:-4px; }
#horn-right{ right:-4px; }

/* ==========================================================================
   CROWN — light bars + coin pile + pouring cauldron + flame title
   (#marquee/#bulbs ids kept: ui.js drives the chase classes + bulb strips)
   ========================================================================== */

#marquee{
  position:relative;
  flex:0 0 auto;
  height:clamp(118px, 18vh, 186px);
  margin:0 2px 8px;
  border-radius:12px;
  background:
    radial-gradient(130% 170% at 50% -45%, #5d1206 0%, #220803 52%, #0a0301 100%);
  border:1px solid rgba(255,210,74,.3);
  box-shadow:inset 0 0 30px rgba(0,0,0,.75), 0 4px 18px rgba(0,0,0,.5);
  overflow:hidden;
}
#marquee.chase-idle  { --chase-dur:3.4s; }
#marquee.chase-fast  { --chase-dur:1.05s; }
#marquee.chase-strobe{ --chase-dur:1.05s; }
#marquee.chase-slow  { --chase-dur:9s; }   /* anticipation: lights crawl */

/* coin-pile sheen sweep (gentle idle shimmer) */
#marquee::after{
  content:'';
  position:absolute; bottom:0; left:-30%;
  width:24%; height:62%;
  background:linear-gradient(100deg, rgba(255,243,196,0), rgba(255,243,196,.17) 50%, rgba(255,243,196,0));
  /* Sweep via transform (compositor-only) instead of animating `left` (layout
     every frame). left stays at -30%; translateX is relative to the element's
     own 24% width, so 155%/24% = 645.83% reproduces the old -30%→125% travel. */
  transform:translateX(0) skewX(-14deg);
  will-change:transform;
  animation:coinSheen 7s linear infinite;
  pointer-events:none;
  z-index:3;
}
@keyframes coinSheen{
  0%{ transform:translateX(0) skewX(-14deg); }
  55%,100%{ transform:translateX(645.83%) skewX(-14deg); }
}

#crown-coins{
  position:absolute;
  left:0; right:0; bottom:-2px;
  width:100%; height:56%;
  z-index:1;
  pointer-events:none;
}
#crown-cauldron{
  position:absolute;
  left:50%; bottom:30%;
  height:66%; width:auto;
  z-index:2;
  opacity:.92;
  transform:translateX(-50%);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));
  animation:cauldronBob 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cauldronBob{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(3px); }
}

/* CROWN GRID — [MONEY MAYHEM + BUFFS] (left) | flame title (center) | 2x3 pots (right) */
#crown-grid{
  position:absolute; inset:0;
  z-index:4;
  display:grid;
  /* left flank tucked; HOT STUFF centered; the pots column is wide enough for
     all six boxes in one row at their normal width (never cropped) */
  grid-template-columns:minmax(150px, .75fr) minmax(0, 1.05fr) minmax(340px, 1.95fr);
  grid-template-areas:"left title pots";
  align-items:center;
  gap:clamp(8px, 1.4vw, 22px);
  padding:14px clamp(18px, 2.2vw, 40px) 8px;
  pointer-events:none;
}
#crown-left{
  grid-area:left;
  justify-self:start;            /* tucked against the left edge */
  display:flex; flex-direction:row;   /* MONEY MAYHEM | BUFFS side by side */
  gap:8px;
  min-width:0; width:100%;
  align-self:stretch; align-items:stretch;   /* fill banner height; equal heights */
  justify-content:center;
  pointer-events:none;
}
#crown-left > *{ flex:1 1 0; min-width:0; }
.crown-panel-title{
  font-family:var(--marquee-font);
  font-size:clamp(8px, 12cqi, 17px); font-weight:400;   /* scales to fill the panel width */
  letter-spacing:.06em; padding-left:.06em;
  text-align:center;
  color:var(--brass);
  margin-bottom:4px;
  white-space:nowrap;
  max-width:100%;
}
/* drop the decorative emojis once the panel is too narrow for the full title,
   so the words fill the box instead of being shrunk/clipped */
@container (max-width: 178px){
  .crown-panel-title .cpt-emoji{ display:none; }
}
#crown-mayhem, #crown-buffs{
  pointer-events:auto;
  display:flex; flex-direction:column;     /* title + content; content expands */
  container-type:inline-size;              /* header scales to panel width (cqi) */
  overflow:hidden;                         /* hard stop: header can't leave the box */
  border-radius:10px;
  padding:4px 7px 5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.45)),
    rgba(10,3,1,.66);
  border:1px solid rgba(255,210,74,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -8px 18px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.45);
  min-width:0;
}
#crown-buffs{ position:relative; }

#marquee-inner{
  grid-area:title;
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  min-width:0;
  pointer-events:none;
}
#marquee-title{
  font-family:var(--marquee-font);
  font-weight:400;
  font-size:clamp(46px, 6vw, 96px);
  width:100%;
  text-align:center;
  line-height:.95;
  letter-spacing:.05em;
  padding:0 .1em;
  background:linear-gradient(180deg,
    #fff6cf 0%, var(--molten) 26%, var(--fire-orange-2) 50%,
    var(--fire-red) 78%, #6e0f04 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:
    drop-shadow(0 2px 0 rgba(50,6,2,.95))
    drop-shadow(0 0 14px rgba(255,122,30,.55))
    drop-shadow(0 0 38px rgba(232,36,15,.35));
  animation:neonBreath 4.2s ease-in-out infinite;
}
@keyframes neonBreath{
  0%,100%{ opacity:1; }
  50%{ opacity:.93; }
}

/* ---- crown light bars (ui.js buildBulbs fills #bulbs with 4 strips) ------ */
#bulbs{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.bulb-strip{ position:absolute; display:flex; }
.b-top   { top:5px;  left:12px;  right:12px;  flex-direction:row; gap:4px; }
.b-right { right:5px; top:30px;  bottom:36%;  flex-direction:column;         justify-content:space-between; }
.b-bottom{ display:none; }   /* the coin pile owns the crown bottom */
.b-left  { left:5px;  top:30px;  bottom:36%;  flex-direction:column-reverse; justify-content:space-between; }

.bulb{
  position:relative;
  width:11px; height:11px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #5d4326 0%, #33220c 60%, #1c1204 100%);
  box-shadow:inset 0 0 2px rgba(0,0,0,.8), 0 0 1px rgba(255,233,174,.2);
}
.bulb::after{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 35% 32%, #ffffff 0%, var(--bulbc, var(--gold-hot)) 38%, color-mix(in srgb, var(--bulbc, var(--gold)) 80%, #000) 88%);
  box-shadow:0 0 5px var(--bulbc, var(--gold)), 0 0 12px var(--bulbc, var(--gold)), 0 0 24px color-mix(in srgb, var(--bulbc, var(--gold)) 55%, transparent);
  opacity:0;
  animation:bulbChase var(--chase-dur) linear infinite;
  animation-delay:calc(-1 * var(--i, 0) / var(--bulb-n) * var(--chase-dur));
}
/* the top strip reads as the photo's colored tower light bars */
.b-top .bulb{
  flex:1;
  width:auto; height:15px;
  border-radius:3px;
  background:linear-gradient(180deg, #2a1407 0%, #140802 100%);
}
.b-top .bulb:nth-child(5n+1){ --bulbc:var(--fire-red-2); }
.b-top .bulb:nth-child(5n+2){ --bulbc:var(--green); }
.b-top .bulb:nth-child(5n+3){ --bulbc:var(--molten); }
.b-top .bulb:nth-child(5n+4){ --bulbc:var(--tier-mega); }
.b-top .bulb:nth-child(5n+5){ --bulbc:var(--tier-grand); }
.b-left .bulb, .b-right .bulb{ width:8px; height:8px; }

@keyframes bulbChase{
  0%   { opacity:1; }
  16%  { opacity:1; }
  34%  { opacity:.12; }
  100% { opacity:.12; }
}
#marquee.chase-strobe .bulb::after{
  animation:bulbStrobe .16s steps(2, jump-none) infinite;
  animation-delay:0s;
}
#marquee.chase-strobe .bulb:nth-child(even)::after{ animation-delay:.08s; }
@keyframes bulbStrobe{
  0%{ opacity:1; } 100%{ opacity:0; }
}

/* ---- win-type marquee flicker (ui.js marqueeWinFlash sets these one-shot) ---- */
/* small win — brisk gold chase */
#marquee.chase-win-small{ --chase-dur:.8s; }
#marquee.chase-win-small .bulb::after{ --bulbc:var(--molten); }
/* big win — faster, hotter gold */
#marquee.chase-win-big{ --chase-dur:.5s; }
#marquee.chase-win-big .bulb::after{ --bulbc:var(--gold-hot); }
/* mega/epic — orange strobe */
#marquee.chase-win-mega .bulb::after{
  animation:bulbStrobe .14s steps(2, jump-none) infinite; animation-delay:0s;
  --bulbc:var(--fire-orange);
}
#marquee.chase-win-mega .bulb:nth-child(even)::after{ animation-delay:.07s; }
/* jackpot/progressive/pitchfork — fastest full strobe, rainbow per-bulb */
#marquee.chase-win-jackpot .bulb::after{
  animation:bulbStrobe .1s steps(2, jump-none) infinite; animation-delay:0s;
  --bulbc:var(--gold-hot);
}
#marquee.chase-win-jackpot .bulb:nth-child(3n)::after{ --bulbc:var(--fire-orange); }
#marquee.chase-win-jackpot .bulb:nth-child(3n+1)::after{ --bulbc:var(--green); }
#marquee.chase-win-jackpot .bulb:nth-child(even)::after{ animation-delay:.05s; }
/* mayhem — red/black alarm strobe */
#marquee.chase-win-mayhem .bulb::after{
  animation:bulbStrobe .12s steps(2, jump-none) infinite; animation-delay:0s;
  --bulbc:var(--fire-red-2);
}
#marquee.chase-win-mayhem .bulb:nth-child(even)::after{ animation-delay:.06s; opacity:0; }
/* fire fury — warm red→orange medium strobe */
#marquee.chase-win-firefury .bulb::after{
  animation:bulbStrobe .16s steps(2, jump-none) infinite; animation-delay:0s;
  --bulbc:var(--fire-orange-2);
}
#marquee.chase-win-firefury .bulb:nth-child(3n)::after{ --bulbc:var(--fire-red); }
#marquee.chase-win-firefury .bulb:nth-child(even)::after{ animation-delay:.08s; }

/* random win flash (ui.js startMarqueeRandomFlash): while a win flash is up,
   #marquee gets .marquee-rand and individual bulbs are toggled .bulb-rand-on
   at random each tick — the bulbs flash randomly instead of a synchronized
   chase/strobe. The chase-win-* rules above still set the per-tier --bulbc, so
   colour is preserved; these later rules only override the on/off animation. */
#marquee.marquee-rand .bulb::after,
#marquee.marquee-rand .bulb:nth-child(even)::after{   /* beat the mayhem nth-child(even) opacity:0 */
  animation:none;
  opacity:.08;
  transition:opacity .06s linear;
}
#marquee.marquee-rand .bulb.bulb-rand-on::after{ opacity:1; }

/* ==========================================================================
   PROGRESSIVE HEADER — six tier meters, gold-boxed black plates
   ========================================================================== */

/* 3x2 progressive grid nested in the crown's right region (row-major:
   Mini Minor Major / MEGA Ultra GRAND). The standalone header row is gone. */
#pots-bar.in-crown{
  grid-area:pots;
  justify-self:end;              /* tucked against the right edge */
  width:100%;
  align-self:stretch;
  display:grid;
  grid-template-columns:repeat(6, 1fr);   /* all six in ONE right-aligned row */
  grid-template-rows:1fr;
  gap:6px;
  margin:0;
  pointer-events:auto;
}
.pot{
  --accent:var(--gold);
  position:relative;
  border-radius:10px;
  padding:5px 8px 7px;
  text-align:center;
  display:flex; flex-direction:column; justify-content:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, #1c0a04, #070201);
  overflow:visible;            /* let the pot-value glow show (was clipped) */
  border:2px solid #9a6a16;
  box-shadow:
    inset 0 1px 0 rgba(255,233,174,.18),
    inset 0 -2px 12px color-mix(in srgb, var(--accent) 24%, transparent),
    inset 0 0 14px rgba(0,0,0,.65),
    0 4px 14px rgba(0,0,0,.5);
}
.pot::before{ /* glass sheen */
  content:'';
  position:absolute; top:0; left:8%; right:34%; height:42%;
  background:linear-gradient(178deg, rgba(255,255,255,.09), rgba(255,255,255,0));
  border-radius:50% / 70%;
  pointer-events:none;
}
.pot-mini   { --accent:var(--tier-mini); }
.pot-minor  { --accent:var(--tier-minor); }
.pot-major  { --accent:var(--tier-major); }
.pot-jackpot{ --accent:var(--tier-mega); }
.pot-ultra  { --accent:var(--tier-ultra); }
.pot-timepot{ --accent:var(--tier-grand); }
.pot-timepot{
  border-color:color-mix(in srgb, var(--tier-grand) 55%, #9a6a16);
  box-shadow:
    inset 0 1px 0 rgba(255,233,174,.18),
    inset 0 -2px 14px color-mix(in srgb, var(--tier-grand) 32%, transparent),
    inset 0 0 14px rgba(0,0,0,.65),
    0 0 16px color-mix(in srgb, var(--tier-grand) 35%, transparent),
    0 4px 14px rgba(0,0,0,.5);
}

.pot-label{
  font-family:var(--marquee-font);
  font-size:clamp(11px, 1.25vw, 15px);
  font-weight:400;
  letter-spacing:.24em; padding-left:.24em;
  color:var(--accent);
  text-shadow:0 0 10px color-mix(in srgb, var(--accent) 70%, transparent), 0 1px 0 rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center; gap:6px;
  line-height:1.15;
}
.pot-value{
  --odo-size:clamp(16px, 1.55vw, 27px);
  font-weight:700;
  color:var(--white);
  text-shadow:0 2px 2px rgba(0,0,0,.8);
  /* glow as a filter on the host so the digit-wheel clip can't crop it */
  filter:drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 60%, transparent));
  justify-content:center;
  min-height:calc(clamp(16px, 1.55vw, 27px) + 4px);
}
.pot.pot-flash{ animation:potFlash .8s ease-out 1; }
@keyframes potFlash{
  0%{ box-shadow:0 0 0 2px var(--accent), 0 0 40px var(--accent), inset 0 0 30px color-mix(in srgb, var(--accent) 50%, transparent); }
  100%{ box-shadow:inset 0 1px 0 rgba(255,233,174,.18), inset 0 0 14px rgba(0,0,0,.65), 0 4px 14px rgba(0,0,0,.5); }
}

/* devil badge on the GRAND label (ui.js decorate() also emits this class) */
.tpot-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.18em; height:1.18em;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-hot) 0%, var(--gold) 45%, #8a5c18 100%);
  color:#241300;
  font-family:Georgia, serif;
  font-weight:700;
  font-size:.82em;
  line-height:1;
  box-shadow:0 0 6px rgba(255,210,74,.8), inset 0 -1px 1px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.6);
  vertical-align:-.12em;
}

/* ==========================================================================
   ODOMETERS — per-digit rolling wheels (ui.js Odo) — structural, preserved
   ========================================================================== */

.odo{
  --dh:var(--odo-size, 38px);
  display:inline-flex;
  align-items:flex-end;
  font-family:inherit;
  font-weight:700;
  font-size:var(--odo-size, 38px);
  line-height:1;
  white-space:nowrap;
}
.odo-prefix{
  font-size:1em;            /* $ same size + height as the money digits */
  line-height:1;
  margin:0 .04em 0 0;
}
.odo-d{
  display:inline-block;
  height:var(--dh);
  overflow:hidden;
  min-width:.52em;
  text-align:center;
}
.odo-strip{
  display:flex; flex-direction:column;
  will-change:transform;
}
.odo-strip > span{
  display:block;
  height:var(--dh);
  line-height:var(--dh);
}
.odo-sep{
  display:inline-block;
  height:var(--dh);
  line-height:var(--dh);
  opacity:.75;
}
.odo-dec{
  /* cents render at the SAME size/height as the dollars (no shrink) */
  --dh:var(--odo-size, 38px);
  display:inline-flex;
  align-items:flex-end;
  font-size:var(--odo-size, 38px);
}
.odo.flash-up{ animation:flashUp .7s ease-out 1; }
@keyframes flashUp{
  0%{ color:var(--green); text-shadow:0 0 10px var(--green), 0 0 30px rgba(58,212,46,.6); }
  100%{ color:inherit; }
}
.odo.flash-down{ animation:flashDown .5s ease-out 1; }
@keyframes flashDown{
  0%{ color:#caa; text-shadow:0 0 8px rgba(255,100,100,.5); }
  100%{ color:inherit; }
}

/* ==========================================================================
   MAIN ROW — 5x3 reel window + FIRE FURY charge bar (replaces 243-WAYS rails)
   ========================================================================== */

#main-row{
  flex:1 1 auto;
  min-height:0;                /* the reel window sizes to the leftover space */
  display:flex;
  justify-content:center;      /* reel window hero, fire bar hugs the right */
  gap:10px;
  margin:0 2px;
  align-items:stretch;
}

/* ---------- FIRE FURY charge bars (two vertical strips flanking the reels) --- */
.fire-rail{
  flex:0 0 clamp(34px, 4vw, 64px);
  align-self:stretch;
  min-width:0;
  display:flex;
}
.fire-bar{
  --fill:0;
  position:relative;
  flex:1;
  display:flex; align-items:stretch; justify-content:center;
  padding:8px 0;
  border-radius:11px;
  background:linear-gradient(180deg, #2b0d06 0%, #0c0301 55%, #1c0702 100%);
  border:1px solid rgba(232,36,15,.55);
  box-shadow:inset 0 0 16px rgba(0,0,0,.85), 0 0 14px rgba(232,36,15,.22);
  overflow:hidden;
}
.fire-bar-track{
  position:relative;
  flex:1 1 auto;
  margin:0 auto;
  width:clamp(16px, 2vw, 30px);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.5));
  border:1px solid rgba(232,36,15,.5);
  box-shadow:inset 0 0 10px rgba(0,0,0,.85);
  overflow:hidden;
}
.fire-bar-fill{
  position:absolute; left:0; right:0; bottom:0;
  height:calc(var(--fill, 0) * 100%);
  background:linear-gradient(180deg, #ffe9ae 0%, #ffd24a 16%, #ff7a1e 52%, #e8240f 84%, #3a0d04 100%);
  box-shadow:0 0 14px rgba(255,122,30,.7);
  transition:height .5s cubic-bezier(.22,1,.36,1);
}
/* flame crown that rides the top of the fill */
.fire-bar-flames{
  display:none;                  /* flames removed — keep just the rising fill */
  position:absolute; left:0; right:0;
  bottom:calc(var(--fill, 0) * 100%);
  height:18px;
  margin-bottom:-9px;
  pointer-events:none;
  opacity:calc(.25 + var(--fill, 0) * .75);
  background:
    radial-gradient(7px 16px at 5px 100%, rgba(255,210,74,.95) 0 38%, transparent 41%),
    radial-gradient(10px 22px at 13px 100%, rgba(255,122,30,.92) 0 42%, transparent 45%),
    radial-gradient(8px 18px at 21px 100%, rgba(232,36,15,.85) 0 44%, transparent 47%);
  background-size:24px 18px;
  background-repeat:repeat-x;
  background-position:bottom;
  animation:fireBarFlicker 1.3s ease-in-out infinite;
  transition:bottom .5s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}
@keyframes fireBarFlicker{
  0%,100%{ filter:brightness(1); transform:scaleY(1); }
  30%    { filter:brightness(1.25); transform:scaleY(1.18); }
  60%    { filter:brightness(.92); transform:scaleY(.92); }
}
/* intensity tiers ramp the glow as the bars fill */
.fire-bar.tier-1{ box-shadow:inset 0 0 16px rgba(0,0,0,.85), 0 0 16px rgba(255,154,46,.32); }
.fire-bar.tier-2{ box-shadow:inset 0 0 16px rgba(0,0,0,.85), 0 0 22px rgba(255,122,30,.5); }
.fire-bar.tier-3{
  box-shadow:inset 0 0 16px rgba(0,0,0,.85), 0 0 30px rgba(232,36,15,.7);
  animation:fireBarReady 1s ease-in-out infinite;
}
@keyframes fireBarReady{
  0%,100%{ border-color:rgba(232,36,15,.55); }
  50%    { border-color:rgba(255,210,74,.95); }
}
.fire-bar.is-igniting{ animation:fireBarIgnite .6s ease-out 1; }
@keyframes fireBarIgnite{
  0%  { box-shadow:inset 0 0 16px rgba(0,0,0,.85), 0 0 4px rgba(255,210,74,1); filter:brightness(1); }
  35% { box-shadow:0 0 60px 20px rgba(255,210,74,1), 0 0 120px 40px rgba(255,122,30,.9); filter:brightness(2.4); }
  100%{ box-shadow:inset 0 0 16px rgba(0,0,0,.85), 0 0 14px rgba(232,36,15,.22); filter:brightness(1); }
}

/* ---- FIRE FURY mode: top/bottom chrome recedes so the bonus owns the screen.
   Uses opacity (not display:none) so e2e text assertions still read the DOM. ---- */
#cabinet.fire-fury-mode #marquee,
#cabinet.fire-fury-mode #pots-bar,
#cabinet.fire-fury-mode #deck,
#cabinet.fire-fury-mode .fire-rail{
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
}
#cabinet.fire-fury-mode #main-row{ transition:none; }

/* ---------- REEL WINDOW — black cells behind a fire bezel ---------- */

#reel-stage{
  flex:0 1 auto;               /* shrink-to-fit the fitted window */
  min-width:0; min-height:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
#reel-window{
  position:relative;
  /* main.js fitReelWindow() sets explicit px width/height (largest 5:3 box
     that fits the row) — these are only the pre-boot fallback. A pure-CSS
     contain here is a circular constraint (shrink-to-fit stage ↔ max-width)
     that collapses at some viewport sizes. */
  width:100%;
  aspect-ratio:5 / 3;        /* 5 reels x 3 rows — the canvas fills it */
  border-radius:9px;
  background:var(--cell-black);
  border:3px solid var(--fire-red);
  box-shadow:
    0 0 0 6px #3c0c04,
    0 0 0 7px rgba(255,122,30,.5),
    0 0 30px rgba(232,36,15,.4),
    inset 0 0 70px rgba(0,0,0,.85);
  overflow:hidden;
}
#reels-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
/* inner ember glow ring above the canvas (pointer-through) */
#reel-window::after{
  content:'';
  position:absolute; inset:0;
  border-radius:6px;
  box-shadow:
    inset 0 0 4px rgba(255,122,30,.5),
    inset 0 0 26px rgba(255,80,20,.18);
  pointer-events:none;
  z-index:4;
}
/* Glass: diagonal sheen + inner vignette, never intercepts pointer */
#reel-glass{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:2;
  box-shadow:inset 0 0 70px rgba(0,0,0,.7), inset 0 2px 14px rgba(0,0,0,.6);
  border-radius:6px;
}
#reel-glass::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 28%,
    rgba(255,255,255,.07) 41%,
    rgba(255,255,255,.02) 50%,
    rgba(255,255,255,0) 58%);
  border-radius:6px;
}
/* Attract-mode shimmer sweep (ui.js toggles .shimmer) */
#reel-window.shimmer::before{
  content:'';
  position:absolute; top:-20%; bottom:-20%; left:0; width:34%;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(105deg,
    rgba(255,233,174,0) 0%,
    rgba(255,233,174,.09) 50%,
    rgba(255,233,174,0) 100%);
  transform:translateX(-130%) rotate(0.001deg);
  animation:shimmerSweep 3.2s ease-in-out infinite;
}
@keyframes shimmerSweep{
  0%{ transform:translateX(-130%); }
  55%,100%{ transform:translateX(420%); }
}

/* Center-stage overlay (banners, rollup) — ui.js contract */
#stage{
  position:absolute; inset:0;
  z-index:5;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
  pointer-events:none; /* enabled while a skippable rollup runs */
}
#stage.clickable{ pointer-events:auto; cursor:pointer; }

/* Banners */
.banner{
  --bn-color:var(--gold);
  font-family:var(--marquee-font);
  font-size:clamp(40px, 6.2vw, 68px);
  line-height:1.08;
  text-align:center;
  letter-spacing:.1em;
  padding:0 .3em;
  color:var(--bn-color);
  /* heavy dark outline so the bright text reads clearly over the lit reels */
  text-shadow:
    3px 3px 0 #1a0502, -3px 3px 0 #1a0502, 3px -3px 0 #1a0502, -3px -3px 0 #1a0502,
    0 3px 0 #1a0502, 0 -3px 0 #1a0502, 3px 0 0 #1a0502, -3px 0 0 #1a0502,
    0 0 20px var(--bn-color),
    0 0 52px color-mix(in srgb, var(--bn-color) 60%, transparent),
    0 5px 3px rgba(0,0,0,.9);
  animation:bannerIn calc(var(--ui-speed) * .3s) cubic-bezier(.2,.9,.25,1.2) 1;
}
.banner.out{ animation:bannerOut calc(var(--ui-speed) * .26s) ease-in 1 forwards; }
@keyframes bannerIn{
  0%{ transform:scale(1.8); opacity:0; letter-spacing:.5em; }
  100%{ transform:scale(1); opacity:1; letter-spacing:.1em; }
}
@keyframes bannerOut{
  0%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(.85); opacity:0; }
}
.banner.bn-win     { --bn-color:var(--gold); }
.banner.bn-bigwin  { --bn-color:var(--gold-hot); font-size:clamp(34px, 5.4vw, 58px); }
.banner.bn-mega    { --bn-color:var(--fire-orange); font-size:clamp(36px, 5.8vw, 62px); }
.banner.bn-epic    { --bn-color:var(--fire-red-2); font-size:clamp(38px, 6vw, 66px); }
.banner.bn-jackpot { --bn-color:var(--gold-hot); font-size:clamp(38px, 6vw, 66px); }
.banner.bn-mayhem  { --bn-color:var(--fire-orange-2); }
.banner.bn-free    { --bn-color:var(--green); }
.banner.bn-nearmiss{
  --bn-color:#d8c2b6;
  font-size:clamp(34px, 5vw, 56px);
  letter-spacing:.4em;
  animation-duration:calc(var(--ui-speed) * .9s);
}
.banner.bn-info    { --bn-color:var(--white); font-size:clamp(22px, 3vw, 32px); }

/* Win rollup counter (ui.js creates #rollup inside #stage) */
#rollup{
  font-family:var(--marquee-font);
  font-weight:400;
  font-size:clamp(58px, 8.5vw, 96px);
  line-height:1;
  color:var(--gold-hot);
  /* heavy dark outline (matches the win/free-spin banners) so the count-up reads */
  text-shadow:
    3px 3px 0 #1a0502, -3px 3px 0 #1a0502, 3px -3px 0 #1a0502, -3px -3px 0 #1a0502,
    0 3px 0 #1a0502, 0 -3px 0 #1a0502, 3px 0 0 #1a0502, -3px 0 0 #1a0502,
    0 0 24px rgba(255,184,0,.8),
    0 0 70px rgba(255,122,30,.45),
    0 5px 3px rgba(0,0,0,.9);
  animation:bannerIn calc(var(--ui-speed) * .22s) cubic-bezier(.2,.9,.25,1.2) 1;
}
#rollup.pop{ animation:rollPop .16s cubic-bezier(.2,.9,.25,1.2) 1; }
@keyframes rollPop{
  0%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}
#rollup.done{ animation:rollDone .5s cubic-bezier(.2,.9,.25,1.2) 1; }
@keyframes rollDone{
  0%{ transform:scale(1.35); filter:brightness(1.8); }
  100%{ transform:scale(1); filter:none; }
}
#rollup.out{ animation:bannerOut calc(var(--ui-speed) * .3s) ease-in 1 forwards; }

/* Free-spin chip */
#freespin-chip{
  position:absolute; top:10px; left:50%;
  z-index:6;
  transform:translateX(-50%) scale(0);
  padding:3px 16px 5px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(58,212,46,.22), rgba(8,52,8,.45));
  border:1px solid rgba(58,212,46,.55);
  box-shadow:0 0 16px rgba(58,212,46,.35), inset 0 1px 0 rgba(255,255,255,.2);
  color:var(--green);
  font-size:20px; font-weight:600; letter-spacing:.12em;
  line-height:1.2;
  text-shadow:0 0 8px rgba(58,212,46,.7);
  transition:transform .28s cubic-bezier(.2,.9,.25,1.2);
  pointer-events:none;
  white-space:nowrap;
}
#freespin-chip.show{ transform:translateX(-50%) scale(1); }

/* ==========================================================================
   CONTROL DECK — red flame deck, gold-boxed readouts (photo 123333)
   ========================================================================== */

#deck{
  position:relative;
  flex:0 0 auto;
  margin:8px 2px 0;
  padding:10px 14px 8px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 16%, rgba(0,0,0,.38) 100%),
    radial-gradient(60% 90% at 22% 0%, rgba(255,122,30,.28), transparent 60%),
    radial-gradient(60% 90% at 78% 0%, rgba(255,122,30,.28), transparent 60%),
    radial-gradient(130% 150% at 50% -20%, #c91d0c 0%, #8c1206 44%, #4a0d04 100%);
  border:2px solid var(--brass);
  box-shadow:
    inset 0 1px 0 rgba(255,233,174,.25),
    inset 0 0 0 1px rgba(0,0,0,.5),
    inset 0 -14px 30px rgba(0,0,0,.5),
    0 8px 26px rgba(0,0,0,.6);
}
/* flame texture grain over the deck red */
#deck::after{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012 0.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 0.45  0 0 0 0 0.05  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  opacity:.22;
  mix-blend-mode:overlay;
  pointer-events:none;
}
#deck > *{ position:relative; z-index:1; }

#deck-main{
  display:grid;
  /* CASH · WIN · BET are equal thirds; utility + spin hug the ends */
  grid-template-columns:auto 1fr 1fr 1fr auto;
  grid-template-areas:"utility cash win bet spin";
  gap:10px;
  align-items:stretch;
}
#deck-utility{ grid-area:utility; }
#deck-cash   { grid-area:cash; }
#deck-win    { grid-area:win; }
#deck-bet    { grid-area:bet; }
#deck-denom  { display:none; }                    /* 1c DENOM chip removed */
#deck-betmult{ display:none; }                    /* BET MULTIPLIER box removed */
#deck-spin   { grid-area:spin; }

.deck-cell{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2px;
  min-width:0;
}

/* gold-bordered black readout boxes */
.deck-box{
  padding:6px clamp(12px, 1.4vw, 20px) 10px;
  min-height:clamp(56px, 7vh, 84px);
  justify-content:center;
  border-radius:10px;
  background:linear-gradient(180deg, #1c0a04 0%, #050201 100%);
  border:2px solid var(--molten-2);
  box-shadow:
    0 0 0 1px #6e4a0c,
    inset 0 0 14px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,233,174,.12),
    0 3px 10px rgba(0,0,0,.55);
}
.deck-label{
  font-family:var(--marquee-font);
  font-weight:400;
  font-size:clamp(14px, 1.4vw, 18px);          /* CASH · WIN · BET all match */
  letter-spacing:.5em; padding-left:.5em;
  text-align:center;
  line-height:1.1;
  color:var(--molten);
  text-shadow:0 1px 0 rgba(0,0,0,.9), 0 0 8px rgba(255,210,74,.35);
  display:flex; align-items:center; justify-content:center; gap:6px;
}

/* digital readouts */
.digital{
  font-family:var(--num-font);
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.digital-white{
  color:#ffffff;
  text-shadow:0 0 6px rgba(255,255,255,.6), 0 0 18px rgba(160,200,255,.25), 0 2px 1px rgba(0,0,0,.9);
}
.digital-gold{
  color:var(--molten);
  text-shadow:0 0 8px rgba(255,210,74,.65), 0 0 24px rgba(255,154,46,.4), 0 2px 1px rgba(0,0,0,.9);
}
#balance-odo{ --odo-size:clamp(30px, 3.4vw, 52px); }
#bet-odo{ --odo-size:clamp(27px, 3vw, 46px); min-width:clamp(80px, 9vw, 130px); justify-content:center; }
/* #win-odo is an odometer: size it via --odo-size so the digit-wheel cell height
   matches the glyph (a raw font-size leaves the cells at the 38px default and
   crops the digits top/bottom). */
#win-odo{ --odo-size:clamp(40px, 4.4vw, 66px); padding:6px 2px 8px; }
#bet-mult-value{ font-size:clamp(30px, 3vw, 46px); min-width:44px; text-align:center; padding-top:2px; }

/* The digit-wheel viewport (.odo-d) clips overflow, which would crop a per-digit
   text-shadow glow. Move the glow to a filter on the (unclipped) odometer host so
   it haloes the whole number without cropping. #balance-odo/#bet-odo/#win-odo are
   all odometers; #bet-mult-value is plain text and keeps its own text-shadow. */
.odo.digital-white{
  text-shadow:0 2px 1px rgba(0,0,0,.9);
  filter:drop-shadow(0 0 5px rgba(255,255,255,.6)) drop-shadow(0 0 16px rgba(160,200,255,.32));
}
.odo.digital-gold{
  text-shadow:0 2px 1px rgba(0,0,0,.9);
  filter:drop-shadow(0 0 6px rgba(255,210,74,.7)) drop-shadow(0 0 20px rgba(255,154,46,.42));
}

/* the WIN box is the centerpiece — extra height so the big number isn't cramped */
.win-box{
  border-width:3px;
  border-color:var(--molten);
  min-height:clamp(66px, 8.5vh, 100px);
  box-shadow:
    0 0 0 1px #6e4a0c,
    0 0 18px rgba(255,184,0,.3),
    inset 0 0 18px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,233,174,.16),
    0 3px 10px rgba(0,0,0,.55);
}
.deck-label-win{ padding-left:0; }   /* WIN matches CASH/BET (base label); only WIN adds the gold balls */
/* cancel the trailing letter-spacing so the two balls sit equidistant from WIN */
.deck-label-win::after{ margin-left:-.5em; }
.deck-label-win::before, .deck-label-win::after{
  content:'';
  width:11px; height:8px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff3c4, var(--molten) 50%, #8a5c18);
  box-shadow:0 0 5px rgba(255,210,74,.8);
}

/* speaker + HELP */
#deck-utility{ gap:6px; position:relative; }
.util-btn{
  width:52px; height:36px;
  border-radius:9px;
  font-size:17px;
  line-height:1;
  background:linear-gradient(180deg, var(--gold-hot), var(--gold) 55%, #b87f1d);
  border:2px solid var(--pale-gold);
  color:#5d0c05;
  box-shadow:0 2px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6);
  transition:filter .12s ease, transform .1s ease;
}
.util-btn:hover{ filter:brightness(1.08); }
.util-btn:active{ transform:translateY(1px); }
.util-help{
  font-family:var(--marquee-font);
  font-size:14px;
  letter-spacing:.08em;
  color:#a3160a;
}

/* bet stepper */
#bet-row{ display:flex; align-items:center; gap:7px; }
.step-btn{
  width:28px; height:28px;
  border-radius:50%;
  font-size:21px; font-weight:700;
  line-height:1;
  color:#5d0c05;
  background:linear-gradient(180deg, var(--gold-hot), var(--gold) 60%, #b87f1d);
  border:1px solid var(--pale-gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 5px rgba(0,0,0,.5);
  transition:transform .1s ease, filter .12s ease;
  display:flex; align-items:center; justify-content:center;
  padding-bottom:2px;
}
.step-btn:hover{ filter:brightness(1.08); }
.step-btn:active{ transform:scale(.92); }

/* 1-cent denomination chip */
#denom-chip{
  width:56px; height:56px;
  border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0;
  background:radial-gradient(circle at 35% 30%, var(--pale-gold) 0%, var(--molten) 46%, #b87f1d 100%);
  border:3px solid #8a5c18;
  box-shadow:0 3px 8px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.7), inset 0 -2px 4px rgba(110,70,0,.6);
  font-family:var(--marquee-font);
  font-size:20px;
  line-height:1;
  color:#a3160a;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
#denom-chip span{
  font-size:8px;
  letter-spacing:.18em; padding-left:.18em;
  color:#5d0c05;
  margin-top:1px;
}

/* THE SPIN BUTTON */
#deck-spin{ align-items:center; justify-content:center; }
#btn-spin{
  position:relative;
  width:104px; height:104px;
  border-radius:50%;
  padding:7px;
  background:conic-gradient(from 210deg,
    #ffe9ae, #8a5c18 18%, #ffd24a 32%, #6e4a0c 52%, #fff3c4 68%, #8a5c18 84%, #ffe9ae);
  box-shadow:
    0 8px 24px rgba(0,0,0,.7),
    0 0 26px rgba(255,154,46,.35),
    inset 0 2px 4px rgba(255,255,255,.5),
    inset 0 -3px 6px rgba(0,0,0,.55);
  animation:spinBreathe 2.6s ease-in-out infinite;
  transition:filter .25s ease;
}
#btn-spin-face{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  border-radius:50%;
  background:radial-gradient(circle at 38% 30%, var(--gold-hot) 0%, var(--fire-orange-2) 45%, var(--fire-red) 82%, #8c1206 100%);
  box-shadow:inset 0 -6px 14px rgba(90,10,0,.7), inset 0 4px 8px rgba(255,255,255,.5);
  color:#2a0700;
  font-family:var(--marquee-font);
  font-size:30px; font-weight:400;
  letter-spacing:.1em;
  padding-left:.1em;
  text-shadow:0 1px 0 rgba(255,233,174,.5);
  transition:transform .08s ease;
}
@keyframes spinBreathe{
  0%,100%{ transform:scale(1);     box-shadow:0 8px 24px rgba(0,0,0,.7), 0 0 22px rgba(255,154,46,.3),  inset 0 2px 4px rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.55); }
  50%    { transform:scale(1.035); box-shadow:0 8px 24px rgba(0,0,0,.7), 0 0 46px rgba(255,122,30,.6),  inset 0 2px 4px rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.55); }
}
#btn-spin:active #btn-spin-face,
#btn-spin.pressing #btn-spin-face{
  transform:translateY(3px) scale(.965);
  filter:brightness(1.25);
}
#btn-spin:disabled{
  animation:none;
  filter:saturate(.45) brightness(.62);
  cursor:default;
}
#btn-spin:disabled #btn-spin-face{ transform:none; filter:none; }

/* ---- lower deck strip: bet presets + AUTO/TURBO/STATS ---- */

#deck-sub{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(255,210,74,.28);
}
#bet-presets{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px;
}
.presets-label{
  font-family:var(--marquee-font);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--pale-gold);
  text-shadow:0 1px 0 rgba(0,0,0,.8);
  margin-right:3px;
}
.preset, .betmod{
  font-size:15px; font-weight:700;
  letter-spacing:.05em;
  min-width:36px;
  padding:2px 8px 3px;
  border-radius:6px;
  line-height:1.2;
  color:var(--pale-gold);
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,210,74,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:color .12s ease, border-color .12s ease, background .12s ease, transform .1s ease;
}
.preset:hover, .betmod:hover{ color:var(--gold-hot); border-color:rgba(255,210,74,.85); }
.preset:active, .betmod:active{ transform:scale(.93); }
.preset.active{
  color:#241300;
  background:linear-gradient(180deg, var(--gold-hot), var(--gold));
  border-color:var(--gold-hot);
  box-shadow:0 0 10px rgba(255,210,74,.5);
}
.betmod{ color:var(--cyan); border-color:rgba(255,176,0,.4); }
.betmod:hover{ color:#ffe2a8; border-color:rgba(255,176,0,.8); }

#deck-toggles{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
}
.deck-btn{
  position:relative;
  font-size:15px; font-weight:700;
  letter-spacing:.14em;
  padding:4px 12px 5px;
  border-radius:8px;
  color:var(--pale-gold);
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,210,74,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.45);
  transition:transform .12s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
  line-height:1.1;
  white-space:nowrap;
}
.deck-btn:hover{ transform:translateY(-1px); border-color:rgba(255,210,74,.85); color:var(--gold-hot); }
.deck-btn:active{ transform:translateY(1px); }
.deck-btn.active{
  color:#241300;
  background:linear-gradient(180deg, var(--gold-hot), var(--gold) 60%, #b87f1d);
  border-color:var(--gold-hot);
  box-shadow:0 0 14px rgba(255,210,74,.55), inset 0 1px 0 rgba(255,255,255,.6);
  text-shadow:none;
}
/* EXIT CASINO — fire-red so it can't be mistaken for a toggle */
.deck-btn-exit{
  color:#ffd9c4;
  border-color:rgba(232,36,15,.7);
  background:linear-gradient(180deg, rgba(232,36,15,.3), rgba(60,8,2,.5));
}
.deck-btn-exit:hover{
  color:#fff;
  border-color:var(--fire-red-2);
  box-shadow:0 0 14px rgba(232,36,15,.5), inset 0 1px 0 rgba(255,255,255,.12);
}
#auto-badge{
  display:inline-block;
  margin-left:6px;
  padding:0 6px 1px;
  border-radius:9px;
  font-size:13px;
  background:rgba(0,0,0,.35);
  color:inherit;
  vertical-align:.06em;
}
#auto-menu{
  position:absolute;
  bottom:calc(100% + 10px);
  right:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:10px;
  background:linear-gradient(180deg, #2b0d06, #140503);
  border:1px solid rgba(255,210,74,.5);
  box-shadow:0 10px 30px rgba(0,0,0,.7), 0 0 18px rgba(255,210,74,.15);
  animation:menuIn .16s cubic-bezier(.2,.9,.25,1.2) 1;
}
@keyframes menuIn{
  0%{ transform:translateY(6px) scale(.94); opacity:0; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
.auto-menu-title{
  font-size:13px; font-weight:600; letter-spacing:.24em;
  color:var(--brass);
  margin-right:2px;
}
#auto-menu button{
  font-size:17px; font-weight:700;
  min-width:40px;
  padding:3px 8px 4px;
  border-radius:7px;
  color:var(--gold-hot);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,210,74,.4);
  line-height:1.1;
  transition:background .12s ease, transform .1s ease;
}
#auto-menu button:hover{ background:rgba(255,210,74,.18); }
#auto-menu button:active{ transform:scale(.93); }
#auto-menu .auto-stop{ color:var(--red); border-color:rgba(255,69,56,.5); }

/* ---- audio settings popover (opens from #btn-mute, anchored in #deck-utility) ---- */
#audio-menu{
  position:absolute;
  bottom:calc(100% + 10px);
  left:0;
  z-index:25;
  width:min(86vw, 240px);
  display:flex; flex-direction:column;
  gap:10px;
  padding:12px 14px;
  border-radius:10px;
  background:linear-gradient(180deg, #2b0d06, #140503);
  border:1px solid rgba(255,210,74,.5);
  box-shadow:0 10px 30px rgba(0,0,0,.7), 0 0 18px rgba(255,210,74,.15);
  animation:menuIn .16s cubic-bezier(.2,.9,.25,1.2) 1;
}
.audio-pop-row{ display:flex; flex-direction:column; gap:4px; }
.audio-pop-row label{
  font-family:var(--marquee-font);
  font-size:11px; letter-spacing:.18em;
  color:var(--brass);
}
.audio-pop-row input[type=range]{
  width:100%;
  accent-color:var(--molten);
  cursor:pointer;
}
.audio-mute-btn{
  font-family:var(--marquee-font);
  font-size:13px; letter-spacing:.16em;
  padding:6px 8px;
  border-radius:7px;
  color:var(--gold-hot);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,210,74,.4);
  transition:background .12s ease, transform .1s ease;
}
.audio-mute-btn:hover{ background:rgba(255,210,74,.18); }
.audio-mute-btn:active{ transform:scale(.97); }
.audio-mute-btn.is-muted{ color:var(--red); border-color:rgba(255,69,56,.5); }

/* ==========================================================================
   CROWN INSTRUMENTS — Money Mayhem meter + buff slots (live in #crown-grid)
   ========================================================================== */

.rail-title-mayhem{
  color:var(--fire-orange-2);
  text-shadow:0 0 10px rgba(255,122,30,.5);
}

/* Money Mayhem 10-segment meter (ui.js fills #mayhem-meter with 10 .seg) */
#mayhem-meter{
  display:flex;
  flex-direction:row;          /* child 0 = leftmost segment */
  gap:3px;
  flex:1 1 auto;                 /* the lit segments expand to fill the panel */
  min-height:14px;
  padding:4px;
  border-radius:8px;
  background:linear-gradient(180deg, #0c0301, #1c0702);
  border:1px solid rgba(255,122,30,.3);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.8);
}
#mayhem-meter .seg{
  display:block;
  flex:1;
  border-radius:4px;
  background:#240a04;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}
#mayhem-meter .seg.lit{
  background:linear-gradient(180deg, var(--pale-gold), var(--fire-orange-2) 50%, var(--fire-red));
  box-shadow:0 0 7px rgba(255,122,30,.85), 0 0 16px rgba(232,36,15,.4), inset 0 1px 1px rgba(255,255,255,.5);
}
#mayhem-meter .seg.pop{ animation:segPop calc(var(--ui-speed) * .3s) cubic-bezier(.2,.9,.25,1.2) 1; }
@keyframes segPop{
  0%{ transform:scale(1.45); filter:brightness(2); }
  100%{ transform:scale(1); filter:none; }
}
#mayhem-meter.ominous .seg.lit{ animation:ominous 1s ease-in-out infinite; }
@keyframes ominous{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.7); }
}
#mayhem-meter.flash{ animation:meterFlash .9s steps(2, jump-none) 4; }
@keyframes meterFlash{
  0%{ filter:brightness(2.4) saturate(1.6); }
  100%{ filter:none; }
}
#mayhem-count{ display:none; }   /* the lit meter segments convey the count */

/* ---------- BUFF SLOTS (crown right panel; ui.js renderBuffBar) ---------- */

#buff-bar{
  display:grid;
  grid-auto-flow:column;          /* all buff slots on ONE line, never wraps */
  grid-auto-columns:minmax(0, 1fr);
  gap:3px;
  flex:1 1 auto;                  /* fill the panel height (matches MAYHEM) */
  min-height:14px;
}
.buff-slot{
  position:relative;
  container-type:size;          /* the emoji sizes to this box (see cqmin below) */
  display:flex; align-items:center; justify-content:center;
  min-width:0;
  border-radius:8px;
  background:linear-gradient(180deg, #160803, #0a0301);
  border:1px solid rgba(255,210,74,.16);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8);
  cursor:pointer;
}
.buff-slot-icon{
  /* scale to the slot's smaller side so the emoji always stays inside the box,
     however the window is stretched (cqmin = 1% of the slot's min dimension) */
  font-size:clamp(10px, 72cqmin, 30px);
  line-height:1;
  filter:grayscale(1) brightness(.45);
  transition:filter .25s ease;
}
.buff-slot.lit{
  border-color:rgba(58,212,46,.65);
  background:linear-gradient(180deg, rgba(58,212,46,.16), rgba(8,52,8,.4));
  box-shadow:0 0 10px rgba(58,212,46,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.buff-slot.lit .buff-slot-icon{ filter:none; }
.buff-slot.cookie.lit{
  border-color:rgba(255,210,74,.6);
  background:linear-gradient(180deg, rgba(245,184,0,.18), rgba(120,70,20,.12));
  box-shadow:0 0 10px rgba(255,210,74,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
.buff-slot-rounds{
  position:absolute; right:-4px; top:-5px;
  min-width:15px; height:15px;
  padding:0 3px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700;
  color:#06210a;
  background:linear-gradient(180deg, #8aff7a, var(--green));
  box-shadow:0 0 6px rgba(58,212,46,.7), 0 1px 2px rgba(0,0,0,.6);
}
.buff-slot.cookie .buff-slot-rounds{
  background:linear-gradient(180deg, #ffe9ae, var(--gold));
  color:#241300;
  font-size:8.5px;
}
.buff-slot.granted{ animation:buffGrantPop .8s cubic-bezier(.2,1.4,.3,1) 1; }
@keyframes buffGrantPop{
  0%{ transform:scale(.4); filter:brightness(3); box-shadow:0 0 30px rgba(58,212,46,.9); }
  55%{ transform:scale(1.35); }
  100%{ transform:scale(1); }
}

/* buff explainer box — opens under the crown panel */
#buff-tip{
  position:absolute;
  top:calc(100% + 8px); right:0;
  width:min(300px, 72vw);
  z-index:60;
  padding:10px 12px 11px;
  border-radius:10px;
  background:linear-gradient(180deg, #1f0a04 0%, #0c0301 100%);
  border:1px solid rgba(58,212,46,.45);
  box-shadow:0 14px 34px rgba(0,0,0,.75), 0 0 18px rgba(58,212,46,.18);
  pointer-events:auto;
}
.bt-head{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.bt-icon{ font-size:22px; line-height:1; filter:drop-shadow(0 0 6px rgba(58,212,46,.5)); }
.bt-name{
  font-family:var(--marquee-font);
  font-size:15px; letter-spacing:.12em;
  color:var(--gold-hot);
  text-shadow:0 0 8px rgba(255,210,74,.4);
}
.bt-desc{
  font-size:14px; line-height:1.35;
  color:rgba(255,247,232,.85);
}
.bt-status{ margin-top:6px; font-size:12px; letter-spacing:.08em; }
.bt-live{ color:var(--green); text-shadow:0 0 8px rgba(58,212,46,.5); font-weight:700; }
.bt-dim{ color:rgba(255,247,232,.4); }

/* ---------- EVENT TAPE (receipt feed) — slide-in drawer ---------- */

#feed-drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(380px, 86vw);
  z-index:70;                       /* under takeovers (80+), over the room */
  padding:10px;
  transform:translateX(102%);       /* tucked away (kept attached for e2e) */
  transition:transform .32s cubic-bezier(.25,.9,.3,1);
  pointer-events:none;
}
#feed-drawer.open{
  transform:translateX(0);
  pointer-events:auto;
}
#feed-card{
  position:relative;
  display:flex; flex-direction:column;
  height:100%;
  background:linear-gradient(180deg, #190703 0%, #0e0402 100%);
  border:1px solid rgba(255,210,74,.32);
  border-radius:12px;
  box-shadow:-14px 0 40px rgba(0,0,0,.7), inset 0 0 24px rgba(0,0,0,.4);
  min-width:0;
}
#feed-head{
  flex:0 0 auto;
  position:relative;
  text-align:center;
  padding:10px 30px 8px;
  font-family:var(--marquee-font);
  font-size:12px; font-weight:400;
  letter-spacing:.26em;
  color:var(--brass);
  border-bottom:1px dashed rgba(255,210,74,.3);
}
#btn-tape-close{
  position:absolute; right:6px; top:4px;
  width:24px; height:24px;
  font-size:18px; line-height:1;
  color:rgba(255,247,232,.6);
  border-radius:6px;
}
#btn-tape-close:hover{ color:var(--gold-hot); }
#feed{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:6px 9px 14px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,210,74,.3) transparent;
}
#feed::-webkit-scrollbar{ width:5px; }
#feed::-webkit-scrollbar-thumb{ background:rgba(255,210,74,.25); border-radius:3px; }

.fe{
  position:relative;
  padding:5px 2px 6px;
  border-bottom:1px dotted rgba(255,247,232,.1);
  font-weight:400;
  font-size:16px;
  letter-spacing:.05em;
  line-height:1.25;
  color:rgba(255,247,232,.82);
  animation:feedIn calc(var(--ui-speed) * .24s) ease-out 1;
  word-wrap:break-word;
}
@keyframes feedIn{
  0%{ transform:translateY(-9px); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}
.fe .fe-time{
  display:block;
  font-size:11px;
  letter-spacing:.18em;
  color:rgba(255,247,232,.25);
  margin-top:1px;
}
.fe.k-spin{ font-size:21px; letter-spacing:.22em; text-align:center; }
.fe.k-spin .fe-time{ text-align:center; letter-spacing:.18em; }
.fe.k-win{ color:var(--gold); }
.fe.k-bigwin{
  color:var(--gold-hot);
  font-weight:600;
  font-size:18px;
  text-shadow:0 0 10px rgba(255,210,74,.55);
}
.fe.k-jackpot{
  margin:4px 0;
  padding:7px 8px;
  border:1px solid rgba(255,210,74,.6);
  border-radius:6px;
  background:linear-gradient(180deg, rgba(255,210,74,.14), rgba(255,210,74,.04));
  color:var(--gold-hot);
  font-weight:600;
  font-size:18px;
  text-shadow:0 0 12px rgba(255,210,74,.7);
  box-shadow:0 0 16px rgba(255,210,74,.2);
}
.fe.k-mayhem{
  margin:4px 0;
  padding:7px 8px;
  border:1px solid rgba(232,36,15,.65);
  border-radius:6px;
  background:linear-gradient(180deg, rgba(232,36,15,.16), rgba(232,36,15,.04));
  color:#ffb59a;
  font-weight:600;
  text-shadow:0 0 12px rgba(255,122,30,.6);
  box-shadow:0 0 16px rgba(232,36,15,.2);
}
.fe.k-system{
  color:rgba(255,247,232,.34);
  font-size:14px;
  font-style:italic;
}
.fe.k-info{ color:rgba(255,247,232,.6); }

/* ==========================================================================
   FULL-BLEED CASINO FLOOR — the reels are the show. Edge-to-edge cabinet:
   lights on the very top edge, slim crown instruments, compact pots ribbon,
   compact deck flush with the bottom of the page. The shared portal nav is
   hidden here — EXIT (deck) is the way back to the account page.
   ========================================================================== */

body.casino-floor{ padding:0; }
body.casino-floor #unibot-nav{ display:none; }

body.casino-floor #cabinet{
  width:100%;
  margin:0;
  border-radius:0;
  border:none;
  box-shadow:none;
  padding:0 clamp(8px, 1vw, 16px) 0;
}
body.casino-floor #cabinet::before{ display:none; }
body.casino-floor .horn{ display:none; }

/* crown rides the top edge — FIXED, ~half height (one row of progressives) */
body.casino-floor #marquee{
  height:clamp(54px, 8vh, 78px);
  margin:0 0 6px;
  border-radius:0 0 12px 12px;
  border-top:none;
}
body.casino-floor #crown-coins,
body.casino-floor #crown-cauldron{ display:none; }
body.casino-floor .b-top{ top:3px; left:8px; right:8px; }
/* short top lights so the half-height crown content clears them */
body.casino-floor .b-top .bulb{ height:5px; }
body.casino-floor .b-left,
body.casino-floor .b-right{ display:none; }
body.casino-floor #crown-grid{
  padding:8px clamp(14px, 1.6vw, 28px) 7px;   /* compact for the half-height banner */
  gap:clamp(8px, 1.2vw, 18px);
}
body.casino-floor #marquee-title{ font-size:clamp(26px, 5vh, 52px); }
body.casino-floor #crown-mayhem,
body.casino-floor #crown-buffs{ padding:5px 8px 6px; }
body.casino-floor #crown-left{ gap:6px; }
body.casino-floor .crown-panel-title{ font-size:clamp(8px, 12cqi, 17px); margin-bottom:3px; }
/* meter expands to fill the panel (no fixed height) */
body.casino-floor #mayhem-meter{ flex:1 1 auto; height:auto; min-height:14px; padding:4px; gap:4px; }
/* buff emoji size is handled by container units (cqmin) so it always fits the slot */

/* compact 2x3 pot grid in the crown */
body.casino-floor #pots-bar.in-crown{ gap:5px; }
body.casino-floor .pot{ padding:2px 6px 3px; border-width:1px; border-radius:8px; }
body.casino-floor .pot-label{ font-size:clamp(9px, 1.5vh, 13px); }
body.casino-floor .pot-value{ --odo-size:clamp(13px, 2.2vh, 22px); min-height:0; }

/* compact deck, flush with the bottom edge */
body.casino-floor #deck{
  margin:6px 0 0;
  padding:7px 12px 6px;
  border-radius:14px 14px 0 0;
  border-bottom:none;
}
body.casino-floor #deck-main{ gap:8px; }
body.casino-floor #deck-sub{ margin-top:5px; }
body.casino-floor #btn-spin{ width:clamp(70px, 10.5vh, 98px); height:clamp(70px, 10.5vh, 98px); }
body.casino-floor #btn-spin-face{ font-size:clamp(19px, 3vh, 28px); }
body.casino-floor #win-odo{ --odo-size:clamp(30px, 5vh, 58px); padding:6px 2px 8px; }
body.casino-floor .win-box{ min-height:clamp(60px, 9vh, 92px); }
body.casino-floor #balance-odo{ --odo-size:clamp(24px, 4.2vh, 48px); }
body.casino-floor #bet-odo{ --odo-size:clamp(22px, 3.8vh, 42px); }
body.casino-floor #bet-mult-value{ font-size:clamp(24px, 4.2vh, 44px); }
body.casino-floor .deck-box{ min-height:clamp(50px, 7.5vh, 80px); }

/* tiny/short windows: a locked viewport would crush the reels to nothing —
   the reel row shrinks (flex) so the page still fits without scrolling */
@media (max-height: 640px){
  body.casino-floor{ height:100dvh; overflow:hidden; }
  body.casino-floor #marquee{ height:clamp(72px, 13vh, 110px); }
}

/* ==========================================================================
   FULL-ROOM FLASH (mayhem trigger wash)
   ========================================================================== */

#ui-flash{
  position:fixed; inset:0;
  z-index:70;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(ellipse 90% 90% at 50% 50%,
    rgba(255,122,30,.34) 0%, rgba(232,36,15,.16) 45%, rgba(90,10,2,.32) 100%);
}
#ui-flash.go{ animation:flashWash .85s ease-out 1; }
@keyframes flashWash{
  0%{ opacity:1; }
  18%{ opacity:.4; }
  32%{ opacity:.9; }
  100%{ opacity:0; }
}

/* ==========================================================================
   TAKEOVERS (ui.js phase machine — wheel.js/pickbonus.js self-style with
   their own injected ww-* / pb-* sheets; these tk-* skins keep the legacy
   jackpot/mayhem takeovers and the interim wheel/pitchfork looks alive)
   ========================================================================== */

#takeover{
  position:fixed; inset:0;
  z-index:80;
  cursor:pointer;
}
.tk{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px;
  animation:tkIn .35s ease-out 1;
  overflow:hidden;
}
.tk.out{ animation:tkOut .3s ease-in 1 forwards; }
@keyframes tkIn{ 0%{ opacity:0; } 100%{ opacity:1; } }
@keyframes tkOut{ 0%{ opacity:1; } 100%{ opacity:0; } }

/* --- jackpot: dark room, single spotlight --- */
.tk-jackpot{
  --accent:var(--gold);
  background:
    radial-gradient(ellipse 44% 56% at 50% 40%, rgba(50,18,4,.4) 0%, rgba(3,1,1,.97) 72%),
    #030101;
}
.tk-jackpot .tk-spotlight{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 30% 44% at 50% 38%,
    color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 70%);
  pointer-events:none;
}
.tk-kicker{
  font-size:clamp(16px, 2vw, 22px); font-weight:600;
  letter-spacing:.6em; padding-left:.6em;
  color:rgba(255,247,232,.55);
}
.tk-pot-name{
  font-family:var(--marquee-font);
  font-size:clamp(54px, 9vw, 110px);
  line-height:1;
  letter-spacing:.08em; padding-left:.08em;
  color:var(--accent);
  text-shadow:
    0 0 6px color-mix(in srgb, var(--accent) 90%, white),
    0 0 26px var(--accent),
    0 0 90px color-mix(in srgb, var(--accent) 60%, transparent),
    0 6px 2px rgba(0,0,0,.9);
  animation:bannerIn .4s cubic-bezier(.2,.9,.25,1.2) 1;
}
.tk-amount{
  font-family:var(--num-font);
  font-weight:700;
  font-size:clamp(64px, 11vw, 130px);
  line-height:1;
  color:var(--white);
  text-shadow:
    0 0 10px rgba(255,247,232,.9),
    0 0 34px color-mix(in srgb, var(--accent) 80%, transparent),
    0 6px 2px rgba(0,0,0,.9);
}
.tk-amount.pop{ animation:rollPop .15s cubic-bezier(.2,.9,.25,1.2) 1; }
.tk-bulb-row{
  display:flex; gap:14px;
  --chase-dur:1.05s;
}
.tk-bulb-row .bulb{ width:14px; height:14px; }
.tk-bulb-row .bulb::after{
  animation:bulbStrobe .18s steps(2, jump-none) infinite;
}
.tk-bulb-row .bulb:nth-child(even)::after{ animation-delay:.09s; }
.tk-continue{
  /* pinned to the panel bottom so it never overlaps the centered prize/total */
  position:absolute; left:0; right:0;
  bottom:clamp(18px, 4vh, 40px);
  text-align:center;
  pointer-events:none;
  font-size:17px; font-weight:600;
  letter-spacing:.5em; padding-left:.5em;
  color:rgba(255,247,232,.65);
  /* sit above the centered prize/total and keep the prompt legible even if a
     tall total reaches down into the prompt band */
  z-index:2;
  text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 5px rgba(0,0,0,.9);
  animation:blinkSoft 1s steps(2, jump-none) infinite;
}
/* tier accents — design doc §3, consistent everywhere */
.tk-accent-mini   { --accent:var(--tier-mini); }
.tk-accent-minor  { --accent:var(--tier-minor); }
.tk-accent-major  { --accent:var(--tier-major); }
.tk-accent-jackpot{ --accent:var(--tier-mega); }
.tk-accent-ultra  { --accent:var(--tier-ultra); }
.tk-accent-timepot{ --accent:var(--tier-grand); }

/* --- mayhem: fire/black diagonal stripes --- */
.tk-mayhem{
  background:#0c0301;
  /* stays vertically centered; scrolls only if the list is taller than the
     screen, and roomy gaps keep the step lines from overlapping */
  justify-content:center;
  overflow-y:auto;
  /* bottom padding shifts the centered column up so the total clears the
     bottom-pinned "TAP TO CONTINUE" prompt (which is position:absolute again
     for this panel — see the .tk-mayhem > .tk-continue rule) */
  padding:clamp(40px, 7vh, 90px) 14px clamp(88px, 12vh, 140px);
  gap:clamp(8px, 1.6vh, 16px);
}
.tk-stripes{
  position:absolute; top:-60%; left:-60%; width:220%; height:220%;
  background:repeating-linear-gradient(45deg,
    #120301 0 30px,
    #2b0703 30px 60px,
    rgba(255,122,30,.4) 60px 66px,
    #120301 66px 96px);
  animation:stripeSlide 4.5s linear infinite;
  pointer-events:none;
}
@keyframes stripeSlide{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(-135px,-135px); }
}
.tk-mayhem > *{ position:relative; }
/* keep the prompt pinned to the panel bottom — the rule above would otherwise
   make it position:relative, so its `bottom` offset shifted it UP into the total */
.tk-mayhem > .tk-continue{ position:absolute; }
/* a touch smaller than the generic total so a long step list + total still
   clears the prompt on short windows without needing to scroll */
.tk-mayhem .tk-total{ font-size:clamp(52px, 8.5vw, 104px); }
.tk-mayhem-title{
  font-family:var(--marquee-font);
  font-size:clamp(34px, 6vw, 66px);
  line-height:1.1;
  letter-spacing:.08em;
  text-align:center;
  color:var(--fire-orange-2);
  text-shadow:
    0 0 6px #ffce8a,
    0 0 26px var(--fire-orange),
    0 0 80px rgba(232,36,15,.55),
    0 5px 2px rgba(0,0,0,.9);
  animation:bannerIn .35s cubic-bezier(.2,.9,.25,1.2) 1;
}
.tk-steps{
  display:flex; flex-direction:column;
  align-items:center;
  gap:clamp(8px, 1.6vh, 16px);
  justify-content:flex-start;
}
.tk-step{
  font-family:var(--num-font);
  font-weight:600;
  font-size:clamp(26px, 3.6vw, 42px);
  line-height:1.15;
  letter-spacing:.06em;
  color:var(--white);
  text-shadow:0 0 14px rgba(255,122,30,.7), 0 3px 1px rgba(0,0,0,.9);
  animation:stepHit .3s cubic-bezier(.2,.9,.25,1.2) 1;
  text-align:center;
}
@keyframes stepHit{
  0%{ transform:scale(2.1); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.tk-step.s-override{ color:var(--gold-hot); text-shadow:0 0 16px rgba(255,210,74,.85), 0 3px 1px rgba(0,0,0,.9); }
.tk-step.s-holyshit{ color:#ffd9c4; font-size:clamp(30px, 4.2vw, 50px); }
.tk-step.s-wtf{ color:#b6ffb0; font-size:clamp(32px, 4.6vw, 54px); text-shadow:0 0 18px rgba(58,212,46,.8), 0 3px 1px rgba(0,0,0,.9); }
/* Money Mayhem EXTRAS */
.tk-step.s-cascade{ color:#ff9a6b; text-shadow:0 0 16px rgba(255,90,30,.8), 0 3px 1px rgba(0,0,0,.9); }
.tk-step.s-potraid{ color:#ffd24a; text-shadow:0 0 16px rgba(255,176,0,.8), 0 3px 1px rgba(0,0,0,.9); }
.tk-step.s-double{ color:#ff7adf; font-size:clamp(30px, 4.2vw, 50px); text-shadow:0 0 18px rgba(255,46,136,.8), 0 3px 1px rgba(0,0,0,.9); }
.tk-step.s-double-miss{ color:#9a8d86; font-size:clamp(24px, 3.2vw, 38px); text-shadow:0 2px 1px rgba(0,0,0,.9); }
.tk-step.s-frenzy{ color:#8aff7a; text-shadow:0 0 16px rgba(58,212,46,.8), 0 3px 1px rgba(0,0,0,.9); }
.tk-step.s-refund{ color:#ffe9ae; font-size:clamp(22px, 3vw, 36px); text-shadow:0 0 12px rgba(255,210,74,.6), 0 3px 1px rgba(0,0,0,.9); }
.tk-total-label{
  font-size:clamp(15px, 1.8vw, 20px); font-weight:600;
  letter-spacing:.55em; padding-left:.55em;
  color:#ffb59a;
}
.tk-total{
  font-family:var(--num-font);
  font-weight:700;
  font-size:clamp(60px, 10vw, 120px);
  line-height:1;
  color:var(--white);
  text-shadow:
    0 0 10px #ffd9c4,
    0 0 36px var(--fire-orange),
    0 0 90px rgba(232,36,15,.6),
    0 6px 2px rgba(0,0,0,.95);
}
.tk-total.pop{ animation:rollPop .15s cubic-bezier(.2,.9,.25,1.2) 1; }

/* --- interim Wicked Wheel takeover (replaced by wheel.js canvas) --- */
.tk-wheel{
  --accent:var(--gold);
  background:
    radial-gradient(ellipse 60% 70% at 50% 46%, rgba(70,18,5,.55) 0%, rgba(4,1,1,.97) 74%),
    #060101;
}
.tk-wheel-title{
  font-family:var(--marquee-font);
  font-size:clamp(26px, 4.4vw, 48px);
  letter-spacing:.06em;
  color:var(--gold);
  text-shadow:var(--glow-gold), 0 4px 2px rgba(0,0,0,.9);
}
.tk-wheel-wrap{
  position:relative;
  width:clamp(240px, 42vw, 320px);
  height:clamp(240px, 42vw, 320px);
}
.tk-wheel-disc{
  position:absolute; inset:0;
  border-radius:50%;
  transform:rotate(0deg);
  box-shadow:
    0 0 0 8px #1b0703,
    0 0 0 12px color-mix(in srgb, var(--gold) 70%, #000),
    0 0 38px rgba(255,120,0,.55),
    inset 0 0 60px rgba(0,0,0,.6);
}
.tk-wheel-label{
  position:absolute; left:50%; top:50%;
  transform-origin:0 0;
  font-family:var(--num-font);
  font-weight:700;
  font-size:clamp(11px, 1.7vw, 16px);
  color:#ffeccd;
  text-shadow:0 1px 2px rgba(0,0,0,.95);
  white-space:nowrap;
  pointer-events:none;
}
.tk-wheel-label.is-prog{
  color:#1b0703;
  font-size:clamp(12px, 1.9vw, 18px);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.tk-wheel-hub{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:30px;
  background:radial-gradient(circle at 40% 35%, #ffb000, #7a1e06);
  box-shadow:0 0 0 4px #1b0703, 0 0 22px rgba(255,140,0,.7);
  z-index:2;
}
.tk-wheel-pointer{
  position:absolute; left:50%; top:-14px;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:26px solid var(--green);
  filter:drop-shadow(0 0 6px rgba(58,212,46,.9));
  z-index:3;
}
.tk-wheel-nudge{
  font-family:var(--num-font); font-weight:700;
  font-size:clamp(18px,2.6vw,26px);
  color:var(--green);
  text-shadow:0 0 10px rgba(58,212,46,.8);
  animation:rollPop .25s cubic-bezier(.2,.9,.25,1.2) 1;
}
.tk-wheel-prize{
  font-family:var(--num-font); font-weight:700;
  font-size:clamp(44px, 8vw, 92px); line-height:1;
  color:var(--white);
  text-shadow:0 0 10px rgba(255,247,232,.9),
    0 0 34px color-mix(in srgb, var(--accent) 80%, transparent),
    0 6px 2px rgba(0,0,0,.9);
}

/* --- interim pitchfork pick takeover (replaced by pickbonus.js) --- */
.tk-pitchfork{
  --accent:var(--red);
  background:
    radial-gradient(ellipse 70% 80% at 50% 100%, rgba(130,32,6,.6) 0%, rgba(5,1,1,.97) 70%),
    #070101;
}
.tk-pitchfork-title{
  font-family:var(--marquee-font);
  font-size:clamp(26px, 4.4vw, 48px);
  color:var(--red);
  text-shadow:var(--glow-fire), 0 4px 2px rgba(0,0,0,.9);
}
.tk-pitchfork-sub{
  font-size:clamp(11px,1.5vw,15px); letter-spacing:.32em; padding-left:.32em;
  color:rgba(255,220,200,.6);
}
.tk-pitchfork-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:8px;
  max-width:min(92vw, 520px);
  margin:6px 0;
}
.tk-coin{
  position:relative;
  width:clamp(38px, 9vw, 62px); height:clamp(38px, 9vw, 62px);
  border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #2b0d06, #140503);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 3px 8px rgba(0,0,0,.5);
  font-size:0;
  animation:rollPop .2s cubic-bezier(.2,.9,.25,1.2) 1;
}
.tk-coin-face{ font-size:clamp(20px, 4.4vw, 30px); line-height:1; }
.tk-coin-label{
  font-family:var(--num-font); font-weight:700;
  font-size:clamp(8px, 1.4vw, 11px); letter-spacing:.03em;
  color:var(--gold-hot); margin-top:1px;
}
.tk-coin.is-live{
  border-color:color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow:inset 0 0 12px color-mix(in srgb, var(--gold) 30%, transparent), 0 3px 8px rgba(0,0,0,.5);
}
.tk-coin.is-dead{ opacity:.42; filter:grayscale(.6); }
.tk-coin.is-fork{
  background:radial-gradient(circle at 50% 40%, #ff5a2a, #7a1206);
  border-color:#ff8a3d;
  box-shadow:0 0 16px rgba(255,90,20,.7);
}
.tk-coin.is-fork .tk-coin-face{ font-size:clamp(22px, 4.6vw, 32px); }
.tk-pitchfork-won{
  font-family:var(--marquee-font);
  font-size:clamp(28px, 5vw, 58px); line-height:1;
  color:var(--accent);
  text-shadow:0 0 8px color-mix(in srgb, var(--accent) 90%, white), 0 0 28px var(--accent), 0 6px 2px rgba(0,0,0,.9);
  animation:bannerIn .4s cubic-bezier(.2,.9,.25,1.2) 1;
}
.tk-pitchfork-prize{
  font-family:var(--num-font); font-weight:700;
  font-size:clamp(40px, 7.5vw, 84px); line-height:1;
  color:var(--white);
  text-shadow:0 0 10px rgba(255,247,232,.9),
    0 0 34px color-mix(in srgb, var(--accent) 80%, transparent), 0 6px 2px rgba(0,0,0,.9);
}
@media (max-width: 680px){
  .tk-pitchfork-grid{ grid-template-columns:repeat(5, 1fr); }
}

/* --- full-overlay room quake ---
   Applied to the #takeover HOST (not .tk panels: swapping a panel's
   `animation` would restart its tkIn entry fade and blink the overlay). */
#takeover.room-quake-1{ animation:tkRoomQuake1 .12s linear infinite; }
#takeover.room-quake-2{ animation:tkRoomQuake2 .1s linear infinite; }
#takeover.room-quake-3{ animation:tkRoomQuake3 .08s linear infinite; }
@keyframes tkRoomQuake1{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(2px,-1px); }
  50%{ transform:translate(-2px,1px); }
  75%{ transform:translate(1px,2px); }
  100%{ transform:translate(-1px,-2px); }
}
@keyframes tkRoomQuake2{
  0%{ transform:translate(0,0) rotate(0); }
  25%{ transform:translate(4px,-3px) rotate(.2deg); }
  50%{ transform:translate(-4px,3px) rotate(-.2deg); }
  75%{ transform:translate(3px,4px) rotate(.15deg); }
  100%{ transform:translate(-3px,-4px) rotate(-.15deg); }
}
@keyframes tkRoomQuake3{
  0%{ transform:translate(0,0) rotate(0); }
  25%{ transform:translate(7px,-5px) rotate(.4deg); }
  50%{ transform:translate(-7px,5px) rotate(-.4deg); }
  75%{ transform:translate(5px,7px) rotate(.3deg); }
  100%{ transform:translate(-6px,-7px) rotate(-.35deg); }
}

/* --- jackpot count-up escalation: the amount grows + shakes harder --- */
.tk-amount{ transition:none; will-change:transform; }
.tk-amount.quake-1{ animation:tkQuake1 .12s linear infinite; }
.tk-amount.quake-2{ animation:tkQuake2 .1s linear infinite; }
.tk-amount.quake-3{ animation:tkQuake3 .08s linear infinite; }
/* scale rides a CSS var so the quake keyframes can keep it */
.tk-amount{ --tk-grow:1; }
@keyframes tkQuake1{
  0%{ transform:scale(var(--tk-grow)) translate(0,0); }
  25%{ transform:scale(var(--tk-grow)) translate(2px,-1px); }
  50%{ transform:scale(var(--tk-grow)) translate(-2px,1px); }
  75%{ transform:scale(var(--tk-grow)) translate(1px,2px); }
  100%{ transform:scale(var(--tk-grow)) translate(-1px,-2px); }
}
@keyframes tkQuake2{
  0%{ transform:scale(var(--tk-grow)) translate(0,0) rotate(0); }
  25%{ transform:scale(var(--tk-grow)) translate(4px,-3px) rotate(.3deg); }
  50%{ transform:scale(var(--tk-grow)) translate(-4px,3px) rotate(-.3deg); }
  75%{ transform:scale(var(--tk-grow)) translate(3px,4px) rotate(.2deg); }
  100%{ transform:scale(var(--tk-grow)) translate(-3px,-4px) rotate(-.2deg); }
}
@keyframes tkQuake3{
  0%{ transform:scale(var(--tk-grow)) translate(0,0) rotate(0); }
  25%{ transform:scale(var(--tk-grow)) translate(7px,-5px) rotate(.6deg); }
  50%{ transform:scale(var(--tk-grow)) translate(-7px,5px) rotate(-.6deg); }
  75%{ transform:scale(var(--tk-grow)) translate(5px,7px) rotate(.4deg); }
  100%{ transform:scale(var(--tk-grow)) translate(-6px,-7px) rotate(-.5deg); }
}
.tk-amount.slam{ animation:tkSlam .5s cubic-bezier(.2,1.4,.4,1) 1; }
@keyframes tkSlam{
  0%{ transform:scale(2.2); filter:brightness(2.4); }
  100%{ transform:scale(var(--tk-grow)); filter:brightness(1); }
}

/* --- prize boxes: full-screen shake-and-explode reveal --- */
.tk-prizebox{
  background:
    radial-gradient(ellipse 60% 60% at 50% 42%, rgba(60,8,40,.55) 0%, rgba(5,1,3,.97) 74%),
    #050103;
}
.tk-prizebox-title{
  font-family:var(--marquee-font);
  font-size:clamp(30px, 5.4vw, 62px); line-height:1.1;
  letter-spacing:.08em; text-align:center;
  color:#ff2e88;
  text-shadow:0 0 8px #ffb3d4, 0 0 30px #ff2e88, 0 5px 2px rgba(0,0,0,.9);
  animation:bannerIn .35s cubic-bezier(.2,.9,.25,1.2) 1;
}
.tk-pbox-row{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:clamp(14px, 3vw, 40px);
  padding:10px;
}
.tk-pbox{
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  width:clamp(96px, 15vw, 180px);
  height:clamp(110px, 17vw, 200px);
}
.tk-pbox-gift{
  font-size:clamp(58px, 9.5vw, 120px); line-height:1;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(255,46,136,.45));
  transform:scale(0);
}
.tk-pbox.is-in .tk-pbox-gift{ animation:tkPboxIn .3s cubic-bezier(.2,1.5,.4,1) 1 forwards; }
@keyframes tkPboxIn{ 0%{ transform:scale(0) rotate(-20deg); } 100%{ transform:scale(1) rotate(0); } }
.tk-pbox.is-shaking .tk-pbox-gift{
  transform:scale(1);
  animation:tkPboxShake .55s cubic-bezier(.36,.07,.19,.97) 1;
}
@keyframes tkPboxShake{
  0%{ transform:scale(1) translate(0,0) rotate(0); }
  12%{ transform:scale(1.03) translate(-4px,1px) rotate(-4deg); }
  24%{ transform:scale(1.06) translate(5px,-1px) rotate(5deg); }
  36%{ transform:scale(1.1) translate(-7px,2px) rotate(-7deg); }
  48%{ transform:scale(1.14) translate(8px,-2px) rotate(8deg); }
  60%{ transform:scale(1.18) translate(-9px,2px) rotate(-9deg); }
  72%{ transform:scale(1.24) translate(10px,-3px) rotate(10deg); }
  84%{ transform:scale(1.3) translate(-11px,3px) rotate(-11deg); }
  100%{ transform:scale(1.4) translate(0,0) rotate(0); }
}
.tk-pbox.is-burst .tk-pbox-gift{
  animation:tkPboxBurst .3s ease-out 1 forwards;
}
@keyframes tkPboxBurst{
  0%{ transform:scale(1.4); opacity:1; filter:brightness(3); }
  100%{ transform:scale(2.6); opacity:0; filter:brightness(4); }
}
.tk-pbox-prize{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(0);
  font-family:var(--num-font); font-weight:700;
  font-size:clamp(20px, 3.4vw, 40px); line-height:1;
  white-space:nowrap;
  color:var(--white);
  text-shadow:0 0 10px rgba(255,247,232,.9), 0 0 30px rgba(255,46,136,.85), 0 4px 2px rgba(0,0,0,.9);
}
.tk-pbox.is-burst .tk-pbox-prize{ animation:tkPboxPrize .4s cubic-bezier(.2,1.5,.4,1) .08s 1 forwards; }
@keyframes tkPboxPrize{
  0%{ transform:translate(-50%,-50%) scale(0); }
  100%{ transform:translate(-50%,-50%) scale(1); }
}
.tk-prizebox .tk-total-label{ opacity:0; transition:opacity .2s; }
.tk-prizebox .tk-total{ color:#ffd2e8; text-shadow:0 0 12px rgba(255,46,136,.9), 0 0 40px rgba(255,46,136,.6), 0 5px 2px rgba(0,0,0,.9); }

/* --- round multiplier: meteor crash + collision count-up --- */
.tk-multiplier{
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(70,18,4,.6) 0%, rgba(4,1,1,.97) 70%),
    #040101;
}
.tk-meteor{
  position:absolute;
  left:50%; top:-18%;
  width:clamp(54px, 9vw, 110px); height:clamp(54px, 9vw, 110px);
  margin-left:calc(clamp(54px, 9vw, 110px) / -2);
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff7e8 0%, #ffd24a 24%, #ff7a1e 55%, #e8240f 80%, #6e0f04 100%);
  box-shadow:0 0 30px 10px rgba(255,122,30,.85), 0 0 80px 30px rgba(232,36,15,.5);
  will-change:transform;
}
.tk-meteor::before{ /* fire trail */
  content:""; position:absolute;
  left:50%; bottom:62%;
  width:46%; height:520%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,
    rgba(255,210,74,0) 0%, rgba(255,122,30,.32) 55%, rgba(255,210,74,.85) 100%);
  border-radius:50% 50% 0 0;
  filter:blur(3px);
}
.tk-meteor.is-falling{ animation:tkMeteorFall .9s cubic-bezier(.5,0,.9,.4) 1 forwards; }
@keyframes tkMeteorFall{
  0%{ transform:translateY(0) scale(.6); }
  100%{ transform:translateY(112vh) scale(1.15); }
}
.tk-mult-value, .tk-mult-prize{
  position:absolute; top:50%;
  font-family:var(--marquee-font);
  line-height:1;
  will-change:transform;
}
.tk-mult-value{
  left:50%;
  font-size:clamp(70px, 13vw, 170px);
  color:var(--fire-orange-2);
  text-shadow:0 0 10px #ffce8a, 0 0 40px var(--fire-orange), 0 0 110px rgba(232,36,15,.7), 0 7px 2px rgba(0,0,0,.9);
  transform:translate(-50%,-50%) scale(0);
}
.tk-mult-value.is-on{ animation:tkMultPop .45s cubic-bezier(.2,1.5,.4,1) 1 forwards; }
@keyframes tkMultPop{
  0%{ transform:translate(-50%,-50%) scale(0) rotate(-8deg); }
  60%{ transform:translate(-50%,-50%) scale(1.25) rotate(3deg); }
  100%{ transform:translate(-50%,-50%) scale(1) rotate(0); }
}
.tk-mult-value.is-left{ left:31%; transition:left .45s cubic-bezier(.6,-.2,.9,.6); }
.tk-mult-prize{
  left:50%;
  font-family:var(--num-font); font-weight:700;
  font-size:clamp(40px, 7.5vw, 96px);
  color:var(--white);
  text-shadow:0 0 10px rgba(255,247,232,.9), 0 0 34px rgba(255,196,81,.8), 0 6px 2px rgba(0,0,0,.9);
  transform:translate(-50%,-50%) scale(0);
}
.tk-mult-prize.is-on{
  left:69%;
  animation:tkMultPop .4s cubic-bezier(.2,1.5,.4,1) 1 forwards;
}
.tk-mult-prize.is-left{ transition:left .45s cubic-bezier(.6,-.2,.9,.6); }
/* collision: both rush the center */
.tk-multiplier.is-colliding .tk-mult-value{ left:50% !important; }
.tk-multiplier.is-colliding .tk-mult-prize{ left:50% !important; }
.tk-mult-total{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(0);
  font-family:var(--num-font); font-weight:700;
  font-size:clamp(56px, 10.5vw, 140px); line-height:1;
  color:var(--white);
  text-shadow:0 0 12px rgba(255,247,232,.95), 0 0 44px rgba(255,122,30,.9), 0 0 120px rgba(232,36,15,.6), 0 7px 2px rgba(0,0,0,.9);
}
.tk-mult-total.is-on{ animation:tkMultTotal .5s cubic-bezier(.2,1.5,.4,1) 1 forwards; }
@keyframes tkMultTotal{
  0%{ transform:translate(-50%,-50%) scale(2.4); filter:brightness(3); }
  100%{ transform:translate(-50%,-50%) scale(1); filter:brightness(1); }
}
/* .pop must keep the centering translate: the generic rollPop animates a bare
   scale(), which made the absolutely-positioned total jump to the bottom-right
   for a beat (its top-left corner landed at the 50%/50% anchor). `forwards`
   also keeps it at scale(1) after the pop — rollPop's no-fill end used to hand
   the transform back to the base class's scale(0). */
.tk-mult-total.pop{ animation:tkMultPopIn .15s cubic-bezier(.2,.9,.25,1.2) 1 forwards; }
@keyframes tkMultPopIn{
  0%{ transform:translate(-50%,-50%) scale(1.18); }
  100%{ transform:translate(-50%,-50%) scale(1); }
}

/* --- briefcase: full-screen open + count-up (+ optional ×N multiplier smash) --- */
.tk-briefcase{
  --accent:#c9a24b;
  background:
    radial-gradient(ellipse 60% 60% at 50% 42%, rgba(60,45,12,.5) 0%, rgba(6,4,1,.97) 74%),
    #060401;
}
.tk-briefcase-title{
  font-family:var(--marquee-font);
  font-size:clamp(30px, 5.4vw, 64px); line-height:1.1;
  letter-spacing:.08em; text-align:center;
  color:#ffe9ae;
  text-shadow:0 0 8px #fff0c4, 0 0 30px #c9a24b, 0 5px 2px rgba(0,0,0,.9);
  animation:bannerIn .35s cubic-bezier(.2,.9,.25,1.2) 1;
}
.tk-case-wrap{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:clamp(120px, 20vw, 240px);
}
.tk-case{
  font-size:clamp(80px, 14vw, 180px); line-height:1;
  transform:scale(0);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(201,162,75,.5));
  animation:tkCaseIn .35s cubic-bezier(.2,1.5,.4,1) 1 forwards;
}
@keyframes tkCaseIn{ 0%{ transform:scale(0) rotate(-16deg); } 100%{ transform:scale(1) rotate(0); } }
.tk-case.is-shaking{ animation:tkPboxShake .55s cubic-bezier(.36,.07,.19,.97) 1; }
.tk-case.is-open{ animation:tkCaseOpen .35s ease-out 1 forwards; }
@keyframes tkCaseOpen{
  0%{ transform:scale(1.4); opacity:1; filter:brightness(1.4) drop-shadow(0 0 30px rgba(255,210,74,.9)); }
  60%{ transform:scale(1.9); opacity:1; filter:brightness(3) drop-shadow(0 0 60px rgba(255,210,74,1)); }
  100%{ transform:scale(2.4); opacity:0; filter:brightness(4); }
}
.tk-briefcase .tk-total-label{ transition:opacity .2s; }
.tk-briefcase .tk-amount{ transition:opacity .2s; will-change:transform; }
.tk-case-mult{
  position:absolute; left:50%; top:40%;
  transform:translate(-50%,-50%) scale(0);
  font-family:var(--marquee-font);
  font-size:clamp(60px, 11vw, 150px); line-height:1;
  color:var(--fire-orange-2);
  text-shadow:0 0 10px #ffce8a, 0 0 40px var(--fire-orange), 0 0 110px rgba(232,36,15,.7), 0 7px 2px rgba(0,0,0,.9);
  pointer-events:none; opacity:0;
}
.tk-case-mult.is-on{ opacity:1; animation:tkMultPop .45s cubic-bezier(.2,1.5,.4,1) 1 forwards; }
.tk-case-mult.is-spent{ animation:tkCaseMultSpent .4s ease-in .1s 1 forwards; }
@keyframes tkCaseMultSpent{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(.4); opacity:0; }
}
.tk-mult-kicker{
  position:absolute; left:50%; top:32%;
  transform:translateX(-50%);
  font-size:clamp(15px, 2vw, 22px); font-weight:600;
  letter-spacing:.6em; padding-left:.6em;
  color:rgba(255,247,232,.6);
  opacity:0; transition:opacity .25s;
}
.tk-mult-kicker.is-on{ opacity:1; }

/* ==========================================================================
   OVERLAY ROOT — wheel.js / pickbonus.js full-screen mount
   (between #takeover 80 and #modal-layer 90)
   ========================================================================== */

#overlay-root{
  position:fixed; inset:0;
  z-index:85;
}

/* ==========================================================================
   MODALS  (help-paytable / stats)
   ========================================================================== */

#modal-layer{ position:fixed; inset:0; z-index:90; }
#modal-backdrop{
  position:absolute; inset:0;
  background:rgba(5,1,1,.8);
  animation:tkIn .2s ease-out 1;
}
#modal{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(860px, 94vw);
  max-height:86vh;
  display:flex; flex-direction:column;
  border-radius:18px;
  background:linear-gradient(178deg, var(--cabinet-1), var(--cabinet-2));
  border:1px solid rgba(255,210,74,.5);
  box-shadow:0 30px 80px rgba(0,0,0,.9), 0 0 40px rgba(255,210,74,.12), inset 0 1px 0 rgba(255,233,174,.12);
  animation:modalIn .26s cubic-bezier(.2,.9,.25,1.2) 1;
  overflow:hidden;
}
@keyframes modalIn{
  0%{ transform:translate(-50%,-46%) scale(.92); opacity:0; }
  100%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
}
#modal-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 10px;
  border-bottom:1px solid rgba(255,210,74,.25);
}
#modal-title{
  font-family:var(--marquee-font);
  font-size:24px;
  letter-spacing:.14em;
  color:var(--gold-hot);
  text-shadow:0 0 12px rgba(255,210,74,.6);
}
#modal-close{
  width:34px; height:34px;
  border-radius:50%;
  font-size:22px; line-height:1;
  color:rgba(255,247,232,.7);
  border:1px solid rgba(255,210,74,.35);
  background:rgba(255,255,255,.04);
  transition:color .12s ease, border-color .12s ease, transform .1s ease;
}
#modal-close:hover{ color:var(--gold-hot); border-color:var(--gold); }
#modal-close:active{ transform:scale(.9); }
#modal-body{
  flex:1;
  overflow-y:auto;
  padding:16px 20px 26px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,210,74,.3) transparent;
}
#modal-body::-webkit-scrollbar{ width:6px; }
#modal-body::-webkit-scrollbar-thumb{ background:rgba(255,210,74,.25); border-radius:3px; }

/* --- paytable --- */
.pt-note{
  text-align:center;
  font-size:17px;
  letter-spacing:.14em;
  color:rgba(255,247,232,.55);
  margin-bottom:14px;
}
.pt-section-title{
  font-family:var(--marquee-font);
  font-size:18px;
  letter-spacing:.18em;
  color:var(--gold);
  text-shadow:0 0 10px rgba(255,210,74,.4);
  margin:22px 0 10px;
  padding-bottom:4px;
  border-bottom:1px dashed rgba(255,210,74,.3);
}
.pt-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(152px, 1fr));
  gap:8px;
}
.pt-card{
  --accent:var(--gold);
  position:relative;
  border-radius:10px;
  padding:9px 10px 10px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.32));
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.pt-emoji{
  font-size:30px; line-height:1.15;
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 60%, transparent));
}
.pt-name{
  font-size:14px; font-weight:600;
  letter-spacing:.2em;
  color:rgba(255,247,232,.6);
  margin-top:2px;
}
.pt-pay{
  font-size:25px; font-weight:700;
  line-height:1.05;
  color:var(--accent);
  text-shadow:0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}
.pt-card .pt-sub{
  font-size:13px;
  line-height:1.25;
  letter-spacing:.03em;
  color:rgba(255,247,232,.45);
  margin-top:3px;
}
.pt-rows{ display:flex; flex-direction:column; gap:7px; }
.pt-row{
  display:flex; align-items:baseline; gap:12px;
  padding:8px 10px;
  border-radius:9px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
}
.pt-row .pt-row-what{
  flex:1;
  font-size:17px;
  letter-spacing:.04em;
  color:rgba(255,247,232,.85);
  line-height:1.3;
}
.pt-row .pt-row-what small{
  display:block;
  font-size:13px;
  color:rgba(255,247,232,.42);
  letter-spacing:.04em;
}
.odds-chip{
  flex:0 0 auto;
  font-size:15px; font-weight:600;
  letter-spacing:.1em;
  padding:1px 9px 2px;
  border-radius:20px;
  color:var(--cyan);
  border:1px solid rgba(255,176,0,.4);
  background:rgba(255,176,0,.06);
  white-space:nowrap;
}
.odds-chip.gold{ color:var(--gold-hot); border-color:rgba(255,210,74,.45); background:rgba(255,210,74,.07); }
.odds-chip.magenta{ color:#ffb59a; border-color:rgba(232,36,15,.5); background:rgba(232,36,15,.08); }
.pt-tiers{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:8px;
}
.pt-tier{
  text-align:center;
  padding:8px 6px 10px;
  border-radius:9px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,210,74,.2);
}
.pt-tier b{
  display:block;
  font-family:var(--marquee-font);
  font-weight:400;
  font-size:16px;
  letter-spacing:.1em;
  color:var(--gold-hot);
}
.pt-tier span{
  font-size:14px;
  color:rgba(255,247,232,.5);
  letter-spacing:.08em;
}

/* --- stats --- */
.stats-rows{ display:flex; flex-direction:column; }
.stats-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px;
  padding:8px 4px;
  border-bottom:1px dotted rgba(255,247,232,.12);
}
.stats-row .sk{
  font-size:16px;
  letter-spacing:.16em;
  color:rgba(255,247,232,.55);
}
.stats-row .sv{
  font-size:24px; font-weight:600;
  color:var(--gold-hot);
  text-shadow:0 0 10px rgba(255,210,74,.3);
}
.stats-row .sv.dim{ color:rgba(255,247,232,.75); text-shadow:none; }
.stats-row .sv.green{ color:var(--green); text-shadow:0 0 10px rgba(58,212,46,.35); }
.stats-row .sv.magenta{ color:#ffb59a; text-shadow:0 0 10px rgba(232,36,15,.35); }
.stats-sub{
  font-size:13px;
  letter-spacing:.06em;
  color:rgba(255,247,232,.35);
  text-align:right;
}

/* ==========================================================================
   FX CANVAS — topmost, never blocks pointer
   ========================================================================== */

#fx-canvas{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:100;
  pointer-events:none;
}

/* ==========================================================================
   TURBO — compress micro-animations
   ========================================================================== */

body.turbo{ --ui-speed:.4; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px){
  body{ padding:0 8px; }
  #cabinet{ width:100%; padding:8px 10px 10px; }
  .horn{ display:none; }
  #marquee{ height:auto; min-height:170px; }
  /* crown: title spans the top; [mayhem+buffs] left and the 2x3 pot grid right */
  #crown-grid{
    position:relative;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"title title" "left pots";
    padding:10px 12px 8px;
    gap:8px;
  }
  #marquee-inner{ grid-area:title; }
  #crown-left{ grid-area:left; flex-direction:column; }
  #pots-bar.in-crown{ grid-area:pots; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); }
  #marquee-title{ font-size:clamp(34px, 7vw, 56px); }

  .pot-value{ --odo-size:clamp(14px, 4vw, 20px); min-height:0; }
  .pot-label{ font-size:11px; }

  #main-row{ gap:6px; }
  .fire-rail{ flex-basis:26px; }
  #reel-stage{ flex:1 1 auto; }

  #deck{ padding:10px 10px 8px; }
  #deck-main{
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-areas:
      "cash    win"
      "bet     bet"
      "utility spin";
    gap:8px;
  }
  #deck-utility{ flex-direction:row; }
  /* tighter boxes + compact digits so CASH/BET fit inside their half-width cells */
  .deck-box{ padding:5px 8px 7px; }
  .odo-d{ min-width:.44em; }
  #win-odo{ --odo-size:clamp(24px, 6.2vw, 38px); }
  #balance-odo{ --odo-size:clamp(18px, 4.6vw, 30px); }
  #bet-odo{ --odo-size:clamp(16px, 4.2vw, 28px); }
  #deck-sub{ justify-content:center; }
  #auto-menu{ left:auto; right:0; }
}

/* ---- PORTRAIT / vertical: single column, ALWAYS fits 100dvh (no scrolling).
   The reel takes its natural size, the deck absorbs the slack, and on a tall
   screen the full-width SPIN button grows to fill the leftover space. ---- */
@media (orientation:portrait){
  body.casino-floor{ height:100dvh; overflow:hidden; }
  #cabinet{ width:100%; padding:6px 8px 6px; }
  .horn{ display:none; }
  body.casino-floor #marquee,
  #marquee{ height:auto; flex:0 0 auto; }     /* crown sizes to its content */
  #crown-grid{
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:"title" "pots" "left";
    gap:5px;
    padding:8px 10px 6px;
  }
  #marquee-inner{ grid-area:title; }
  /* six progressives in a centered 3x2 grid that fills the width (not cut off) */
  #pots-bar.in-crown{
    grid-area:pots;
    justify-self:center; width:100%; margin:0;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,1fr);
    gap:5px;
  }
  #crown-left{ grid-area:left; flex-direction:row; gap:8px; align-items:stretch; }
  #crown-left > *{ flex:1 1 0; min-width:0; }
  #mayhem-count{ display:none; }
  #crown-mayhem{ padding:3px 7px 4px; }
  #marquee-title{ font-size:clamp(30px, 8vw, 60px); }
  body.casino-floor .b-top{ left:8px; right:8px; }

  /* the REEL takes the leftover space — keep the grid generously large */
  #main-row{ flex:1 1 auto; min-height:0; }
  .fire-rail{ flex-basis:18px; }

  /* compact deck that always fits the viewport (no scroll, nothing cut off);
     speaker + HELP stacked on the LEFT of the BET box (top & bottom) */
  #deck{ flex:0 0 auto; display:flex; flex-direction:column; padding:8px 10px 8px; }
  #deck-main{
    display:grid;
    grid-template-columns:auto 1fr 1fr;
    grid-template-areas:
      "utility cash win"
      "utility bet  bet"
      "spin    spin spin";
    gap:6px;
  }
  #deck-utility{ grid-area:utility; flex-direction:column; justify-content:space-between; gap:6px; }
  .deck-box{ min-height:clamp(40px, 5.4vh, 62px); padding:4px 8px 6px; }
  #deck-cash{ grid-area:cash; }
  #deck-win{ grid-area:win; }
  #deck-bet{ grid-area:bet; }
  #deck-spin{ grid-area:spin; width:100%; }
  body.casino-floor #btn-spin{
    width:100%; height:clamp(46px, 7.5vh, 86px); aspect-ratio:auto;
    border-radius:14px; padding:5px; animation:none;
  }
  body.casino-floor #btn-spin-face{
    height:100%; border-radius:11px; font-size:clamp(22px, 3.6vh, 36px);
  }

  /* bet presets on ONE line; toggles on one line below — keeps the bar short */
  #deck-sub{ flex-direction:column; align-items:stretch; gap:6px; margin-top:6px; padding-top:6px; }
  #bet-presets{ flex-wrap:nowrap; gap:3px; justify-content:center; }
  #bet-presets .presets-label{ display:none; }
  #bet-presets .preset, #bet-presets .betmod{ flex:1 1 0; min-width:0; padding:6px 0; font-size:clamp(11px, 3vw, 15px); }
  #deck-toggles{ flex-wrap:nowrap; gap:4px; justify-content:center; }
}

/* ===========================================================================
   ENTER CASINO overlay (server login gate, shown on 401)
   =========================================================================== */
#enter-overlay{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 40%, rgba(70,14,4,0.94), rgba(10,3,1,0.97));
}
#enter-overlay[hidden]{ display:none; }
#enter-card{
  text-align:center;
  padding:48px 64px;
  border:2px solid rgba(255,210,74,0.5);
  border-radius:18px;
  background:rgba(28,7,2,0.88);
  box-shadow:0 0 60px rgba(232,36,15,0.25), 0 24px 60px rgba(0,0,0,0.6);
}
#enter-card h2{
  font-family:var(--marquee-font);
  font-size:42px; line-height:1;
  letter-spacing:3px;
  margin:0 0 10px;
  background:linear-gradient(180deg, #fff6cf 0%, var(--molten) 30%, var(--fire-orange-2) 55%, var(--fire-red) 85%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 0 rgba(50,6,2,.95)) drop-shadow(0 0 18px rgba(255,122,30,.5));
}
#enter-sub{
  font-family:var(--num-font);
  font-size:19px; letter-spacing:6px;
  color:var(--fire-orange-2); margin:0 0 26px;
  text-shadow:0 0 12px rgba(255,122,30,.5);
}
#btn-enter{
  font-family:var(--marquee-font);
  font-size:26px; font-weight:400; letter-spacing:3px;
  padding:14px 46px 12px;
  color:#2a0700; cursor:pointer;
  background:linear-gradient(180deg, var(--pale-gold), var(--molten) 55%, #d99a14);
  border:2px solid var(--pale-gold); border-radius:999px;
  box-shadow:0 6px 0 #8a5c18, 0 10px 26px rgba(0,0,0,0.5), 0 0 30px rgba(255,154,46,.3);
}
#btn-enter:hover{ filter:brightness(1.08); }
#btn-enter:active{ transform:translateY(3px); box-shadow:0 3px 0 #8a5c18, 0 6px 18px rgba(0,0,0,0.5); }
#btn-enter:disabled{ opacity:0.55; cursor:wait; }

/* ===========================================================================
   UNIBOT SHELL (contract R3) — shared nav / portal pages / tabs / tables /
   cards / forms / toasts. Cascades off the legacy :root variable names.
   =========================================================================== */

/* ---- shared portal header (injected by js/nav.js) ------------------------ */

#unibot-nav{
  position:sticky;
  top:10px;
  z-index:60;                /* under modals(90)/takeovers(80)/flash(70) */
  width:min(1280px, 100%);
  margin:0 auto 18px;
  flex:0 0 auto;             /* body is a flex column on the slots cabinet */
}
/* the full-screen cabinet packs the nav tight (its body has no padding) */
body.casino-floor > #unibot-nav{ margin:6px auto 8px; }
.nav-inner{
  display:flex;
  align-items:center;
  gap:18px;
  padding:8px 16px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.012) 22%, rgba(0,0,0,.42) 100%),
    linear-gradient(180deg, #2b0d06, #140503);
  border:1px solid rgba(255,210,74,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -8px 18px rgba(0,0,0,.4),
    0 10px 30px rgba(0,0,0,.55);
}
.nav-brand{
  font-family:var(--marquee-font);
  font-size:22px;
  letter-spacing:.14em;
  color:var(--gold-hot);
  text-decoration:none;
  text-shadow:0 0 6px rgba(255,233,174,.8), 0 0 18px rgba(255,210,74,.5);
  white-space:nowrap;
  line-height:1;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.nav-brand-sub{
  font-family:var(--num-font);
  font-size:10px;
  font-weight:600;
  letter-spacing:.42em;
  color:var(--brass);
  text-shadow:none;
}
.nav-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  flex:1;
  min-width:0;
}
.nav-link{
  font-family:var(--num-font);
  font-size:17px;
  font-weight:600;
  letter-spacing:.16em;
  padding:4px 11px 5px;
  border-radius:8px;
  line-height:1.1;
  color:rgba(255,247,232,.72);
  text-decoration:none;
  border:1px solid transparent;
  transition:color .12s ease, border-color .12s ease, background .12s ease;
  white-space:nowrap;
}
.nav-link:hover{ color:var(--gold-hot); border-color:rgba(255,210,74,.45); }
.nav-link.active{
  color:#241300;
  background:linear-gradient(180deg, var(--gold-hot), var(--gold) 60%, #b87f1d);
  border-color:var(--gold-hot);
  box-shadow:0 0 12px rgba(255,210,74,.45), inset 0 1px 0 rgba(255,255,255,.55);
}
.nav-status{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.nav-balance-chip{
  font-family:var(--num-font);
  font-size:21px;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.1;
  padding:3px 14px 4px;
  border-radius:30px;
  color:var(--green);
  background:linear-gradient(180deg, rgba(58,212,46,.12), rgba(8,52,8,.25));
  border:1px solid rgba(58,212,46,.4);
  text-shadow:0 0 8px rgba(58,212,46,.5);
  white-space:nowrap;
}
.nav-balance-chip.chip-flash{ animation:chipFlash .7s ease-out 1; }
@keyframes chipFlash{
  0%{ box-shadow:0 0 16px rgba(58,212,46,.75); filter:brightness(1.5); }
  100%{ box-shadow:none; filter:none; }
}
.nav-user{
  display:flex;
  align-items:center;
  font-size:15px;
  letter-spacing:.12em;
  color:rgba(255,247,232,.5);
}

/* ---- account / login widget (rendered into .nav-user by nav.js) ---------- */
.nav-login{
  font-family:inherit;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg, #5865f2, #4752c4);   /* Discord blurple */
  border:0;
  border-radius:8px;
  padding:8px 14px;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(88,101,242,.4);
}
.nav-login:hover{ filter:brightness(1.12); }
.nav-acct{ position:relative; flex:0 0 auto; }
.nav-acct-btn{
  padding:0; border:0; background:none; cursor:pointer; line-height:0;
  border-radius:50%;
}
.nav-avatar{
  width:34px; height:34px;
  border-radius:50%;
  display:block;
  background:#42312a;
  border:2px solid rgba(255,210,74,.55);
  box-shadow:0 0 8px rgba(0,0,0,.5);
  object-fit:cover;
}
.nav-acct-btn:hover .nav-avatar{ border-color:var(--gold-hot, #ffd24a); }
.nav-acct-pop{
  position:absolute;
  right:0; top:calc(100% + 8px);
  min-width:180px;
  background:linear-gradient(180deg, #2b0d06, #140503);
  border:1px solid rgba(255,210,74,.4);
  border-radius:10px;
  padding:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.7);
  z-index:95;
  display:flex; flex-direction:column; gap:10px;
}
.nav-acct-pop[hidden]{ display:none; }
.nav-acct-name{
  font-size:15px;
  color:#fff7e8;
  letter-spacing:.06em;
  white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  max-width:220px;
  text-align:center;
}
.nav-acct-logout{
  font-family:inherit;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg, #e8240f, #a51808);
  border:0; border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
}
.nav-acct-logout:hover{ filter:brightness(1.12); }
.nav-acct-logout:disabled{ opacity:.6; cursor:default; }
.conn-dot{
  width:10px; height:10px;
  border-radius:50%;
  flex:0 0 auto;
  background:#42312a;
  box-shadow:inset 0 0 2px rgba(0,0,0,.8);
}
.conn-dot.conn-open{
  background:radial-gradient(circle at 35% 30%, #b8ffd6 0%, var(--green) 60%, #1d8a2e 100%);
  box-shadow:0 0 7px rgba(58,212,46,.85), 0 0 16px rgba(58,212,46,.4);
}
.conn-dot.conn-connecting{
  background:radial-gradient(circle at 35% 30%, var(--gold-hot) 0%, var(--gold) 60%, #8a5c18 100%);
  box-shadow:0 0 7px rgba(255,210,74,.8);
  animation:connPulse 1s ease-in-out infinite;
}
.conn-dot.conn-closed{
  background:radial-gradient(circle at 35% 30%, #ff9a92 0%, var(--red) 60%, #7a1410 100%);
  box-shadow:0 0 7px rgba(255,69,56,.7);
}
@keyframes connPulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.8); }
}

@media (max-width: 980px){
  #unibot-nav{ position:static; }
  .nav-inner{ flex-wrap:wrap; gap:8px; padding:8px 12px; }
  .nav-links{ order:3; flex-basis:100%; }
  .nav-status{ margin-left:auto; }
}

/* ---- portal page chrome (every page except the slots cabinet) ------------ */

body.portal-page{ padding-top:18px; }
#page-root{
  position:relative;
  z-index:1;
  width:min(1280px, 100%);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-bottom:30px;
}

/* ---- panels & cards ------------------------------------------------------- */

.panel-card{
  position:relative;
  border-radius:16px;
  padding:18px 20px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 24%, rgba(0,0,0,.38) 100%),
    linear-gradient(178deg, var(--cabinet-1) 0%, var(--cabinet-2) 80%);
  border:1px solid rgba(255,210,74,.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -10px 24px rgba(0,0,0,.4),
    0 14px 40px rgba(0,0,0,.55);
}
.panel-title{
  font-family:var(--marquee-font);
  font-weight:400;
  font-size:26px;
  letter-spacing:.16em;
  color:var(--gold-hot);
  text-shadow:0 0 14px rgba(255,210,74,.55);
  margin-bottom:10px;
  line-height:1.1;
}
.panel-sub{
  font-size:15px;
  letter-spacing:.18em;
  color:var(--brass);
  margin:-6px 0 12px;
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:12px;
}
.tile-card{
  border-radius:12px;
  padding:12px 13px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.34));
  border:1px solid rgba(255,210,74,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -8px 18px rgba(0,0,0,.35);
}
.tile-title{
  font-size:17px; font-weight:600;
  letter-spacing:.14em;
  color:var(--gold);
  margin-bottom:6px;
  line-height:1.15;
}
.tile-meta{
  font-size:14px;
  letter-spacing:.06em;
  color:rgba(255,247,232,.55);
  line-height:1.35;
}

/* placeholder card (lane pages replace this) */
.placeholder-card{ text-align:center; padding:60px 24px 64px; }
.placeholder-sub{
  font-size:16px;
  letter-spacing:.3em;
  color:var(--brass);
  margin-bottom:18px;
  text-transform:uppercase;
}
.placeholder-msg{
  font-size:26px;
  letter-spacing:.22em;
  color:rgba(255,247,232,.5);
  animation:blinkSoft 1.4s steps(2, jump-none) infinite;
}

/* ---- stat strips ----------------------------------------------------------- */

.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
}
.stat-cell{
  text-align:center;
  border-radius:10px;
  padding:9px 8px 11px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,210,74,.18);
}
.stat-label{
  font-size:12px; font-weight:600;
  letter-spacing:.3em; padding-left:.3em;
  color:var(--brass);
  line-height:1.2;
}
.stat-value{
  font-family:var(--num-font);
  font-size:28px; font-weight:600;
  color:var(--white);
  line-height:1.1;
  text-shadow:0 0 12px rgba(255,210,74,.18);
}
.stat-value.pos, .delta-pos{ color:var(--green); text-shadow:0 0 10px rgba(58,212,46,.4); }
.stat-value.neg, .delta-neg{ color:var(--red);   text-shadow:0 0 10px rgba(255,69,56,.4); }

/* ---- tabs ------------------------------------------------------------------- */

.tab-bar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px;
  border-radius:12px;
  background:linear-gradient(180deg, #1c0702, #0e0402);
  border:1px solid rgba(255,210,74,.18);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6);
}
.tab-btn{
  font-size:17px; font-weight:600;
  letter-spacing:.16em;
  padding:5px 16px 6px;
  border-radius:8px;
  line-height:1.1;
  color:rgba(255,247,232,.65);
  border:1px solid transparent;
  transition:color .12s ease, border-color .12s ease, background .12s ease;
  white-space:nowrap;
}
.tab-btn:hover{ color:var(--gold-hot); border-color:rgba(255,210,74,.4); }
.tab-btn.active{
  color:#241300;
  background:linear-gradient(180deg, var(--gold-hot), var(--gold) 60%, #b87f1d);
  border-color:var(--gold-hot);
  box-shadow:0 0 12px rgba(255,210,74,.5), inset 0 1px 0 rgba(255,255,255,.55);
}

/* ---- tables ------------------------------------------------------------------ */

.table-wrap{ overflow-x:auto; }
.data-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--num-font);
}
.data-table th{
  font-size:13px; font-weight:600;
  letter-spacing:.26em;
  text-align:left;
  color:var(--brass);
  padding:7px 10px 6px;
  border-bottom:1px solid rgba(255,210,74,.3);
  white-space:nowrap;
}
.data-table td{
  font-size:17px;
  letter-spacing:.04em;
  color:rgba(255,247,232,.85);
  padding:7px 10px;
  border-bottom:1px dotted rgba(255,247,232,.12);
  line-height:1.25;
}
.data-table tr:hover td{ background:rgba(255,210,74,.05); }
.data-table td.num, .data-table th.num{ text-align:right; }
.data-table td.delta-pos{ color:var(--green); }
.data-table td.delta-neg{ color:var(--red); }

/* ---- pills / badges ----------------------------------------------------------- */

.pill{
  display:inline-block;
  font-size:14px; font-weight:600;
  letter-spacing:.1em;
  padding:1px 10px 2px;
  border-radius:20px;
  line-height:1.3;
  color:var(--cyan);
  border:1px solid rgba(255,176,0,.4);
  background:rgba(255,176,0,.06);
  white-space:nowrap;
}
.pill.gold{ color:var(--gold-hot); border-color:rgba(255,210,74,.45); background:rgba(255,210,74,.07); }
.pill.green{ color:var(--green); border-color:rgba(58,212,46,.45); background:rgba(58,212,46,.07); }
.pill.red{ color:#ff9a92; border-color:rgba(255,69,56,.5); background:rgba(255,69,56,.08); }
.pill.magenta{ color:#ff9cc8; border-color:rgba(255,46,94,.45); background:rgba(255,46,94,.07); }

/* ---- forms ----------------------------------------------------------------------- */

.form-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:12px;
  margin-bottom:12px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.field-label{
  font-size:12px; font-weight:600;
  letter-spacing:.3em; padding-left:.3em;
  color:var(--brass);
  line-height:1;
}
.text-input, .select-input, .textarea-input{
  font-family:var(--num-font);
  font-size:19px;
  color:var(--white);
  padding:6px 12px 7px;
  border-radius:8px;
  background:linear-gradient(180deg, #0e0402, #1c0702);
  border:1px solid rgba(255,210,74,.3);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
  line-height:1.2;
  min-width:0;
}
.text-input::placeholder, .textarea-input::placeholder{ color:rgba(255,247,232,.3); }
.text-input:focus, .select-input:focus, .textarea-input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6), 0 0 10px rgba(255,210,74,.35);
}
.select-input{ appearance:none; -webkit-appearance:none; cursor:pointer; }
.textarea-input{ resize:vertical; min-height:80px; }
.field-help{
  font-size:13px;
  letter-spacing:.05em;
  color:rgba(255,247,232,.4);
}

.btn{
  font-family:var(--num-font);
  font-size:18px; font-weight:600;
  letter-spacing:.14em;
  padding:6px 18px 7px;
  border-radius:9px;
  line-height:1.1;
  color:rgba(255,247,232,.88);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.32));
  border:1px solid rgba(255,210,74,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.45);
  transition:transform .1s ease, box-shadow .15s ease, color .12s ease, border-color .12s ease, filter .12s ease;
  white-space:nowrap;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); color:var(--gold-hot); border-color:rgba(255,210,74,.7); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:default; transform:none; }
.btn-gold{
  color:#241300;
  background:linear-gradient(180deg, var(--gold-hot), var(--gold) 58%, #b87f1d);
  border-color:var(--gold-hot);
  box-shadow:0 0 14px rgba(255,210,74,.4), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-gold:hover{ color:#241300; filter:brightness(1.07); }
.btn-ghost{ background:none; border-color:rgba(255,247,232,.22); }
.btn-danger{
  color:#ffb7b1;
  border-color:rgba(255,69,56,.55);
  background:linear-gradient(180deg, rgba(255,69,56,.12), rgba(80,8,4,.25));
}
.btn-danger:hover{ color:#ffd9d6; border-color:var(--red); }

/* ---- toasts (UNIBOT.dom.toast) -------------------------------------------------- */

#unibot-toasts{
  position:fixed;
  right:18px; bottom:18px;
  z-index:600;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
  max-width:min(360px, 86vw);
}
.toast{
  font-family:var(--num-font);
  font-size:17px;
  letter-spacing:.06em;
  line-height:1.3;
  padding:9px 16px 10px;
  border-radius:10px;
  color:var(--white);
  background:linear-gradient(180deg, #2b0d06, #140503);
  border:1px solid rgba(255,210,74,.4);
  box-shadow:0 10px 30px rgba(0,0,0,.7), 0 0 18px rgba(255,210,74,.12);
  animation:toastIn .22s cubic-bezier(.2,.9,.25,1.2) 1;
  word-wrap:break-word;
}
.toast-error{
  border-color:rgba(255,69,56,.6);
  box-shadow:0 10px 30px rgba(0,0,0,.7), 0 0 18px rgba(255,69,56,.2);
  color:#ffd9d6;
}
.toast-success{
  border-color:rgba(58,212,46,.55);
  box-shadow:0 10px 30px rgba(0,0,0,.7), 0 0 18px rgba(58,212,46,.2);
  color:#d6ffe9;
}
.toast-out{ animation:toastOut .35s ease-in 1 forwards; }
@keyframes toastIn{
  0%{ transform:translateY(10px); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}
@keyframes toastOut{
  0%{ opacity:1; }
  100%{ transform:translateY(8px); opacity:0; }
}

/* ---- shared login overlay (UNIBOT.api, non-index pages) -------------------------- */

.unibot-overlay{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 40%, rgba(70,14,4,0.94), rgba(10,3,1,0.97));
}
.unibot-overlay-card{
  text-align:center;
  padding:48px 64px;
  border:2px solid rgba(255,210,74,0.45);
  border-radius:18px;
  background:rgba(28,7,2,0.85);
  box-shadow:0 0 60px rgba(255,210,74,0.18), 0 24px 60px rgba(0,0,0,0.6);
}
.unibot-overlay-title{
  font-family:var(--marquee-font);
  font-size:44px; line-height:1;
  color:var(--gold); letter-spacing:4px;
  margin:0 0 10px;
  text-shadow:0 0 24px rgba(255,210,74,0.55);
}
.unibot-overlay-sub{
  font-family:var(--num-font);
  font-size:20px; letter-spacing:6px;
  color:var(--violet); margin:0 0 26px;
}
.unibot-overlay-btn{
  font-family:var(--num-font);
  font-size:30px; font-weight:600; letter-spacing:3px;
  padding:12px 46px 8px;
  color:#2a0700; cursor:pointer;
  background:linear-gradient(180deg, var(--pale-gold), var(--molten) 55%, #d99a14);
  border:2px solid var(--pale-gold); border-radius:999px;
  box-shadow:0 6px 0 #8a5c18, 0 10px 26px rgba(0,0,0,0.5);
}
.unibot-overlay-btn:hover{ filter:brightness(1.08); }
.unibot-overlay-btn:active{ transform:translateY(3px); box-shadow:0 3px 0 #8a5c18, 0 6px 18px rgba(0,0,0,0.5); }
.unibot-overlay-btn:disabled{ opacity:0.55; cursor:wait; }

/* ===========================================================================
 * ADMIN CONSOLE (js/pages/admin.js) — appended admin-only styles.
 * Dashboard chrome: 8-tab bar, unread chip, filter pills, DM inbox layout,
 * chat bubbles, hand-rolled SVG chart craft, empty states, multi-selects.
 * =========================================================================== */

/* tab bar: 8 tabs — wraps by default, scrolls instead of squishing on narrow */
.admin-tab-bar{ row-gap:6px; }
@media (max-width:640px){
  .admin-tab-bar{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .admin-tab-bar .tab-btn{ padding:5px 11px 6px; font-size:15px; }
}

/* unread chip on the DMS tab */
.tab-badge{
  display:inline-block;
  min-width:20px;
  margin-left:7px;
  padding:0 6px 1px;
  border-radius:999px;
  font-size:13px; font-weight:700;
  letter-spacing:.02em;
  line-height:1.4;
  text-align:center;
  color:#241300;
  background:var(--gold-hot);
  box-shadow:0 0 8px rgba(255,210,74,.55);
  vertical-align:2px;
}
.tab-btn.active .tab-badge{ background:#241300; color:var(--gold-hot); box-shadow:none; }

/* filter pills (DM status, analytics window) */
.pill-row{ display:inline-flex; flex-wrap:wrap; gap:6px; }
.pill-btn{
  font-family:var(--num-font);
  font-size:15px; font-weight:600;
  letter-spacing:.12em;
  padding:3px 14px 4px;
  border-radius:999px;
  line-height:1.2;
  color:rgba(255,247,232,.6);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,210,74,.22);
  cursor:pointer;
  transition:color .12s ease, border-color .12s ease, background .12s ease;
}
.pill-btn:hover{ color:var(--gold-hot); border-color:rgba(255,210,74,.5); }
.pill-btn.active{
  color:#241300;
  background:linear-gradient(180deg, var(--gold-hot), var(--gold) 70%);
  border-color:var(--gold-hot);
}

/* consistent empty states */
.empty-state{
  padding:26px 14px;
  text-align:center;
  font-size:15px;
  letter-spacing:.14em;
  color:rgba(255,247,232,.4);
}
.data-table td.empty-cell{
  text-align:center;
  padding:22px 10px;
  color:rgba(255,247,232,.4);
  letter-spacing:.12em;
}

/* ---- DM inbox (modmail) ---------------------------------------------------- */

.dm-layout{
  display:grid;
  grid-template-columns:minmax(240px, 320px) 1fr;
  gap:14px;
  align-items:start;
}
@media (max-width:820px){
  .dm-layout{ grid-template-columns:1fr; }
}
.dm-side{ min-width:0; }
.dm-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:520px;
  overflow-y:auto;
  padding-right:2px;
}
.dm-item{
  border-radius:10px;
  padding:8px 10px 9px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,210,74,.14);
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.dm-item:hover{ border-color:rgba(255,210,74,.4); background:rgba(255,210,74,.05); }
.dm-item.active{
  border-color:var(--gold-hot);
  background:rgba(255,210,74,.09);
  box-shadow:0 0 10px rgba(255,210,74,.25);
}
.dm-item.unread{ border-left:3px solid var(--gold-hot); }
.dm-item-top{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.dm-item-name{
  font-family:var(--num-font);
  font-size:17px; font-weight:600;
  letter-spacing:.04em;
  color:rgba(255,247,232,.9);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1 1 auto;
  min-width:0;
}
.dm-item-meta{
  margin-top:2px;
  font-size:13px;
  letter-spacing:.05em;
  color:rgba(255,247,232,.4);
}

.dm-main{
  min-width:0;
  border-radius:12px;
  padding:12px 14px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.3));
  border:1px solid rgba(255,210,74,.16);
}
.dm-thread-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}
.dm-thread-head .field-help{ flex:1 1 auto; }

.dm-transcript{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:420px;
  overflow-y:auto;
  padding:8px 6px;
  border-radius:10px;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,247,232,.08);
}
.dm-row{ display:flex; }
.dm-row.in{ justify-content:flex-start; }
.dm-row.out{ justify-content:flex-end; }
.dm-bubble{
  max-width:78%;
  border-radius:14px;
  padding:8px 12px 7px;
  font-size:16px;
  line-height:1.35;
}
.dm-bubble.in{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,247,232,.14);
  border-bottom-left-radius:4px;
  color:rgba(255,247,232,.92);
}
.dm-bubble.out{
  background:rgba(255,210,74,.1);
  border:1px solid rgba(255,210,74,.35);
  border-bottom-right-radius:4px;
  color:var(--pale-gold, #ffe9b0);
}
.dm-bubble-text{ white-space:pre-wrap; word-wrap:break-word; }
.dm-bubble-meta{
  margin-top:4px;
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(255,247,232,.42);
}
.dm-attachment{
  margin-top:4px;
  font-size:13px;
  color:rgba(255,247,232,.55);
  word-break:break-all;
}
.dm-reply-row{ margin-top:10px; }
.dm-reply-row .textarea-input{ width:100%; }

/* ---- analytics charts (inline SVG) ------------------------------------------ */

.chart-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.chart-card{ overflow:hidden; }
.chart-svg{
  display:block;
  width:100%;
  height:auto;
  margin-top:4px;
}
.chart-grid{ stroke:rgba(255,247,232,.07); stroke-width:1; }
.chart-axis{ stroke:rgba(255,247,232,.2); stroke-width:1; }
.chart-tick{
  fill:rgba(255,247,232,.45);
  font-family:var(--num-font);
  font-size:12.5px;
  letter-spacing:.04em;
}
.chart-label{
  fill:rgba(255,247,232,.6);
  font-family:var(--num-font);
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
}
.chart-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin:2px 0 4px;
  font-size:13px;
  letter-spacing:.12em;
  color:rgba(255,247,232,.55);
}
.chart-key{ display:inline-flex; align-items:center; gap:6px; }
.chart-swatch{
  display:inline-block;
  width:11px; height:11px;
  border-radius:3px;
}
.chart-note{ color:rgba(255,247,232,.35); letter-spacing:.08em; }

/* ---- settings pickers -------------------------------------------------------- */

.settings-grid{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.toggle-row{
  display:flex;
  gap:6px;
  align-items:center;
  margin:6px 0;
}
.multi-select{
  min-height:90px;
  font-size:16px;
  padding:4px 8px;
}
.multi-select option{ padding:2px 4px; }