/* ============================================================
   BLOXHIT — Blue/Cyan brand (sampled from new logo gradient).
   Identity: deep near-black navy base, royal-blue → cyan accents.
   Variable NAMES kept (`--pink`, `--gold`, `--magenta`) so the
   cascade carries the new blue hue everywhere without rewriting
   thousands of call-sites.
============================================================ */

:root{
  /* Near-black navy base. Pure black with a barely-there cool tint
     so the blue accents sing without the panels themselves looking blue. */
  --bg-0:#070A14;
  --bg-1:#0B0F1F;
  --bg-2:#0F1428;
  --surface:#10172A;
  --surface-2:#161E36;
  --surface-3:#1B2541;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(59,130,246,.20);

  --text:#ffffff;
  --text-dim:#d8e3f5;
  --text-mute:#8a9bb8;

  /* Brand accents — royal blue → cyan, sampled from the new logo.
     Names preserved for cascade compatibility. */
  --pink:#3B82F6;          /* core CTA — royal blue */
  --pink-soft:#60A5FA;     /* hover / shimmer — light blue */
  --pink-deep:#1E3A8A;     /* deep navy for shadows */
  --pink-glow:rgba(59,130,246,.55);
  --magenta:#1D4ED8;       /* deep blue gradient stop */
  --berry-dark:#0F1F4D;
  --orange:#06B6D4;        /* "hit" highlight — cyan accent */
  --orange-deep:#0E7490;
  --gold:#3B82F6;          /* alias mapped to brand blue */
  --gold-deep:#1D4ED8;
  --cyan:#22D3EE;          /* light cyan glow */
  --green:#28c76f;         /* keep green for "win" cues */
  --red:#ef4444;           /* reserved for actual errors only */
  --plum:#0F1F4D;
  --plum-deep:#0A1733;

  --shadow-panel:0 12px 32px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.45);
  --shadow-glow:0 0 24px rgba(59,130,246,.50), 0 0 60px rgba(6,182,212,.22);

  /* === Pass 1 modern design tokens (bouncy stake-style)
     Smooth + spring easings + depth tiers. Future passes inherit. */
  --ease-smooth: cubic-bezier(.32, .72, 0, 1);          /* material-y smooth */
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);       /* spring overshoot */
  --ease-snap:   cubic-bezier(.5, 0, .1, 1);            /* snappy out */
  /* Pass 2 motion polish — unbloxed-inspired smoothness across every
     hover, click, and pop-in. The "pop" curve is the same one used in
     modalIn; promoting it to a token so other components can adopt
     the exact same feel. "Spin" mirrors the JS-driven case-reel
     easing so CSS animations can match the reel rhythm. */
  --ease-pop:    cubic-bezier(.16, 1, .3, 1);           /* unbloxed-y popup */
  --ease-spin:   cubic-bezier(.08, .92, .16, 1);        /* case reel curve */
  --ease-glide:  cubic-bezier(.22, .61, .36, 1);        /* effortless mid */
  /* Duration tokens — pulled into a scale so every component reads
     the same vocabulary instead of one-off magic numbers. */
  --motion-snap:  120ms;    /* taps, presses */
  --motion-fast:  180ms;    /* hovers, color shifts */
  --motion-base:  260ms;    /* transforms, depth */
  --motion-slow:  420ms;    /* modal entries, reveals */
  --shadow-card-rest: 0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  --shadow-card-lift: 0 18px 50px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.16);
  --shadow-glass: 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:500;color:var(--text);
  font-size:16px;
  overflow-x:hidden;position:relative;min-height:100vh;
  background:
    radial-gradient(ellipse 1200px 800px at 80% -10%, rgba(59,130,246,.14), transparent 60%),
    radial-gradient(ellipse 1200px 800px at -10% 110%, rgba(6,182,212,.18), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 50%, rgba(34,211,238,.05), transparent 70%),
    linear-gradient(180deg, #070A14 0%, #0B0F1F 50%, #070A14 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:.01em;
}

body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(59,130,246,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.05) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
}

#petals{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;opacity:.85}

.bg-orb{
  position:fixed;border-radius:50%;filter:blur(70px);
  z-index:-1;pointer-events:none;
  animation:orbDrift 18s ease-in-out infinite;
}
.bg-orb-1{
  top:-100px;right:-100px;width:500px;height:500px;
  background:radial-gradient(circle, rgba(59,130,246,.50), transparent 70%);
}
.bg-orb-2{
  bottom:-150px;left:-100px;width:600px;height:600px;
  background:radial-gradient(circle, rgba(6,182,212,.55), transparent 70%);
  animation-delay:-9s;
}
.bg-orb-3{
  top:40%;left:50%;width:400px;height:400px;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(96,165,250,.20), transparent 70%);
  animation-delay:-4s;
}
@keyframes orbDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(60px,-40px) scale(1.15)}
}

.fx-particle{
  position:fixed;pointer-events:none;z-index:400;
  border-radius:50% 0 50% 0;
  background:radial-gradient(circle at 30% 30%, #fff, #3B82F6);
  box-shadow:0 0 12px rgba(59,130,246,.7);
  transform:translate(-50%,-50%);
  animation:fxFly 1.1s cubic-bezier(.25,.7,.4,1) forwards;
  will-change:transform,opacity;
}
@keyframes fxFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}
  20%{opacity:1;transform:translate(calc(-50% + var(--dx,0) * .3), calc(-50% + var(--dy,0) * .3)) scale(1) rotate(calc(var(--rot,0) * .3))}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0)), calc(-50% + var(--dy,0))) scale(.4) rotate(var(--rot,0))}
}

/* ============================================================
   TOPBAR
============================================================ */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:16px;
  padding:10px 24px;
  background:rgba(7,10,20,.92);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 24px rgba(0,0,0,.45);
}
/* Brand logo block (image-based — see .bh-logo-img below). */
.logo{display:flex;align-items:center;cursor:pointer;flex-shrink:0;text-decoration:none}
.accent{
  background:linear-gradient(135deg,var(--pink),var(--orange));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.online-pill{
  display:flex;align-items:center;gap:12px;
  padding:8px 18px;border-radius:99px;
  background:linear-gradient(135deg, rgba(59,130,246,.15), rgba(59,130,246,.05));
  border:1px solid rgba(59,130,246,.4);
  font-family:'Inter';font-weight:700;font-size:15px;color:var(--text);
  flex-shrink:0;
}
.online-pill strong{font-family:'Sora';font-weight:400;color:var(--green)}
.online-dot{
  width:10px;height:10px;border-radius:50%;background:var(--green);
  box-shadow:0 0 12px var(--green);
  animation:onlineP 1.5s ease-in-out infinite;
}
@keyframes onlineP{
  0%{box-shadow:0 0 0 0 rgba(59,130,246,.6), 0 0 12px var(--green)}
  100%{box-shadow:0 0 0 12px rgba(59,130,246,0), 0 0 12px var(--green)}
}
.online-divider{width:1px;height:18px;background:rgba(255,255,255,.15)}

/* Center the balance group on the viewport's horizontal center by
   spanning the full topbar width via left:0 + right:0 and flex-centering
   the child. No transform — avoids cascade fights with .balance.bump's
   keyframe transform on the inner pill. */
.topbar{ position: sticky; }
.topbar-center{
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;       /* let logo / user-area receive clicks behind us */
}
.topbar-center > *{ pointer-events: auto; }
.user-area{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap;flex-shrink:0}
.balance{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(11,15,31,.85);
  border:1px solid rgba(96,165,250,.22);
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:15px;
  letter-spacing:-.005em;
  color:#ffffff;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 14px rgba(0,0,0,.35),
    0 0 18px rgba(59,130,246,.10);
  position:relative;
  transition: border-color .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth);
}
.balance:hover{
  border-color: rgba(96,165,250,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 18px rgba(0,0,0,.40),
    0 0 22px rgba(59,130,246,.20);
}
.balance-label{
  font-size:12px; letter-spacing:.04em;
  opacity:.95;
  display:inline-flex; align-items:center;
}
.balance-label .bc-glyph{ width:24px; height:24px; margin-left:0; vertical-align:middle }
.balance.bump{ animation: bump .4s }
@keyframes bump{
  0%,100%{ transform: scale(1) }
  50%    { transform: scale(1.07) }
}

/* Balance pill wrapper — gives the pill + USD-equivalent tooltip a shared
   positioning context. Inline-flex so it doesn't stretch and break the
   topbar layout. The wrap stays overflow-visible (the pill itself keeps
   overflow:hidden for its shine animation) so the tooltip below the pill
   isn't clipped. */
.balance-wrap{
  position:relative;
  display:inline-flex;
}
.balance#balance-pill{ cursor:default; }
.balance#balance-pill:focus-visible{
  outline:2px solid rgba(255,217,0,.7);
  outline-offset:3px;
}

/* Balance USD popover — translucent pill that pops on balance hover.
   No label, no rate footer. Glassy claret-tinted backdrop blur lets the
   page show through behind it (more transparent per user request).
   Animation: subtle staged entrance — fade + drop + scale-up with a
   gentle blur clear, plus the caret diamond pops in 60ms after the
   pill itself for a layered "settles into place" feel. */
.balance-tooltip{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform: translate(-50%, -6px) scale(.96);
  z-index:600;
  padding:10px 16px;
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(34,211,238,.10), rgba(59,130,246,.04)),
    rgba(11,15,31,.95);
  border:1px solid rgba(34,211,238,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 28px rgba(0,0,0,.55),
    0 0 26px rgba(34,211,238,.22);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  opacity:0;
  transition:
    transform .25s var(--ease-smooth),
    opacity .18s var(--ease-smooth);
  pointer-events:none;
  white-space:nowrap;
  font-family:'Inter','SF Pro Display',sans-serif;
  min-width: 132px;
}
.balance-tooltip::before{
  content:""; position:absolute;
  top:-6px; left:50%;
  width:11px; height:11px;
  margin-left:-5.5px;
  background:
    linear-gradient(180deg, rgba(34,211,238,.10), rgba(59,130,246,.04)),
    rgba(11,15,31,.95);
  border-top:1px solid rgba(34,211,238,.40);
  border-left:1px solid rgba(34,211,238,.40);
  transform:rotate(45deg) scale(0);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: transform .22s var(--ease-smooth) .04s;
}
/* Trigger is :hover (and :focus-visible for keyboard a11y) on the
   .balance pill itself — narrower than the prior .balance-wrap:hover
   which also fired when the cursor was over the empty area where the
   tooltip would appear. */
.balance:hover ~ .balance-tooltip,
.balance:focus-visible ~ .balance-tooltip,
.balance-tooltip:hover{
  opacity:1;
  transform: translate(-50%, 0) scale(1);
  pointer-events:auto;
}
.balance:hover ~ .balance-tooltip::before,
.balance:focus-visible ~ .balance-tooltip::before,
.balance-tooltip:hover::before{
  transform:rotate(45deg) scale(1);
}
.balance-tooltip-value{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:13.5px;
  letter-spacing:-.005em;
  font-variant-numeric: tabular-nums;
  display:flex; align-items:center; gap:8px;
  color:#ffffff;
  background:none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial;
  filter: none;
  line-height:1.1;
}
.balance-tooltip-value{
  color:#22D3EE;
}
.balance-tooltip-value::before{
  content:"USD";
  font-size:9.5px; font-weight:800; letter-spacing:.16em;
  color:#22D3EE;
  padding:3px 7px; border-radius:6px;
  background: rgba(34,211,238,.14);
  border: 1px solid rgba(34,211,238,.45);
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce){
  .balance-tooltip{ transition: opacity .18s ease; transform:none }
  .balance-wrap:hover .balance-tooltip,
  .balance-wrap:focus-within .balance-tooltip{ transform:none }
}

/* Hitcoin badge icon — uses the new Hitcoin currency PNG so it matches
   the brand. The image is the floating red square that says "HITCOIN"
   around its edge, so we never render an "HC" / "BC" acronym text. */
.bcoin-icon{
  width:26px;height:26px;
  background:url('assets/Hitcoin new.png') center/contain no-repeat;
  filter:
    drop-shadow(0 0 6px rgba(59,130,246,.55))
    drop-shadow(0 0 14px rgba(34,211,238,.30));
  flex-shrink:0;display:inline-block;
  animation:hitcoinFloat 3.6s ease-in-out infinite;
}
.bcoin-icon.small{width:22px;height:22px;animation-duration:4.2s}
.bcoin-icon.big{
  width:88px;height:88px;
  filter:
    drop-shadow(0 0 18px rgba(59,130,246,.65))
    drop-shadow(0 0 36px rgba(34,211,238,.32));
  animation-duration:4.4s;
}
@keyframes hitcoinFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%   {transform:translateY(-2px) rotate(2deg)}
}

/* Inline coin glyph used inside text strings (history rows, popups, toasts,
   leaderboard, live feed). Same image, sized to flow with surrounding text.
   Now 1.35em so the brand mark reads at parity with the digit baseline. */
.bc-glyph{
  display:inline-block;
  width:1.35em;height:1.35em;
  vertical-align:-.30em;margin-left:.14em;
  background:url('assets/Hitcoin new.png') center/contain no-repeat;
  filter:drop-shadow(0 0 5px rgba(59,130,246,.55)) drop-shadow(0 0 10px rgba(34,211,238,.25));
  flex-shrink:0;font-size:1em;
}

.profile{
  display:flex;align-items:center;gap:8px;
  padding:4px 14px 4px 4px;border-radius:99px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);
}
.profile-avatar{display:flex;animation:bobble 3s ease-in-out infinite}
@keyframes bobble{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.profile-name{font-family:'Inter';font-weight:700;font-size:15px;color:var(--text)}

.btn-icon-only{
  width:42px;height:42px;padding:0;border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1;
  display:none;align-items:center;justify-content:center;cursor:pointer;
  transition:
    background .22s var(--ease-smooth),
    color .22s var(--ease-smooth),
    border-color .22s var(--ease-smooth),
    transform .18s var(--ease-bounce),
    box-shadow .22s var(--ease-smooth);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 6px rgba(0,0,0,.25);
}
.btn-icon-only:hover{
  background:
    linear-gradient(180deg, rgba(96,165,250,.20), rgba(59,130,246,.10));
  border-color:rgba(96,165,250,.55);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 4px 12px rgba(59,130,246,.30);
}
.btn-icon-only:active{ transform:translateY(0) scale(.96); }
.btn-icon-only svg{ display:block; width:20px; height:20px; flex-shrink:0; }

/* ============================================================
   LAYOUT
============================================================ */
.layout{
  display:grid;
  grid-template-columns:208px 1fr 280px;
  gap:0;position:relative;z-index:5;
  min-height:calc(100dvh - 64px);
}
/* Chat-collapsed state — toggle in the topbar (#toggle-chat) sets this on
   <body>. Reclaims the 280px chat column for the main content and hides
   the chat panel itself. Wins over the mobile `.chat.open` overlay too,
   so the toggle behaves consistently regardless of viewport. */
body.chat-collapsed .layout{ grid-template-columns:208px 1fr }
body.chat-collapsed .chat,
body.chat-collapsed .chat.open{ display:none !important }
/* Visual feedback on the topbar button when chat is currently shown.
   The button itself is fine without this, but a subtle active state
   helps the user know whether their next click will hide or show. */
.btn-icon-only.chat-toggle-active{
  background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(59,130,246,.08));
  border-color:rgba(59,130,246,.45);
  color:#fff;
}

/* SIDEBAR */
.sidebar{
  position:sticky;
  top: var(--topbar-h, 104px);
  align-self:start;
  height: calc(100vh - var(--topbar-h, 104px));
  height: calc(100dvh - var(--topbar-h, 104px));
  overflow-y:auto;overflow-x:hidden; /* hover-translate must not flash a scrollbar */
  padding:20px 14px;
  background:linear-gradient(180deg, rgba(8,4,8,.6), rgba(4,2,4,.6));
  border-right:1px solid var(--line);
  backdrop-filter:blur(12px);
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}
.sb-section{margin-bottom:24px}
.sb-title{
  font-family:'Inter';font-weight:700;font-size:12px;letter-spacing:2.5px;
  color:var(--text-mute);margin-bottom:8px;padding:0 10px;
}
.sb-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;
  font-family:'Inter';font-weight:600;font-size:16px;color:var(--text-dim);
  cursor:pointer;
  transition:background .3s cubic-bezier(.2,.8,.25,1), color .3s, transform .3s, box-shadow .3s;
  margin-bottom:3px;
  position:relative;
  letter-spacing:.02em;
}
/* `display:flex` above shadows the browser default `[hidden]{display:none}`,
   which is what kept the Admin link visible for non-admin users despite
   `adminLink.hidden = true` running. The attribute selector below has
   higher specificity than the bare class, so [hidden] wins again. */
.sb-link[hidden]{ display:none !important }
.sb-link:hover{
  background:rgba(59,130,246,.1);color:var(--text);
  transform:translateX(4px);
}
.sb-link.active{
  background:linear-gradient(90deg, rgba(59,130,246,.25), rgba(29,78,216,.1));
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.4);
}
.sb-link.active::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  background:linear-gradient(180deg,var(--pink),var(--pink-deep));
  border-radius:0 4px 4px 0;
  box-shadow:0 0 12px var(--pink);
}
.sb-icon{
  width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-mute);
  transition:color .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
.sb-icon svg{width:100%;height:100%;display:block}
.sb-link:hover .sb-icon{color:var(--pink);transform:scale(1.08)}
.sb-link.active .sb-icon{color:var(--pink);filter:drop-shadow(0 0 6px rgba(59,130,246,.6))}
.sb-badge{
  margin-left:auto;font-size:9px;letter-spacing:.05em;font-weight:800;
  padding:3px 7px;border-radius:99px;
  border:1px solid;
}
.sb-hot{color:#3B82F6;border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.15)}
.sb-new{color:#7be8a3;border-color:rgba(123,232,163,.4);background:rgba(59,130,246,.15)}

.sb-rate-box{
  background:linear-gradient(135deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-2);border-radius:14px;
  padding:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.rate-row{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Inter';font-weight:700;font-size:15px;
  padding:6px 0;border-bottom:1px dashed var(--line-2);
}
.rate-row:last-child{border-bottom:none}
.rate-row span{color:var(--text-mute)}
.rate-row strong{color:var(--text);font-family:'Sora';font-weight:400;font-size:16px}

/* MAIN */
main{
  position:relative;z-index:5;
  padding:20px 22px 50px;min-width:0;
}

/* CHAT */
.chat{
  position:sticky;
  top: var(--topbar-h, 104px);
  align-self:start;
  /* Use dvh so mobile browsers (Safari URL bar) don't push the input
     off-screen; fall back to vh on browsers without dvh support. */
  height: calc(100vh - var(--topbar-h, 104px));
  height: calc(100dvh - var(--topbar-h, 104px));
  max-height: calc(100dvh - var(--topbar-h, 104px));
  display:flex;flex-direction:column;
  background:linear-gradient(180deg, rgba(11,15,31,.92), rgba(7,10,22,.92));
  border-left:1px solid rgba(59,130,246,.10);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.04),
    inset 0 1px 0 rgba(96,165,250,.08);
}
.chat-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.chat-tabs{
  display:flex;gap:4px;flex:1;
  position:relative;
  padding: 3px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
}
.ch-tab{
  flex:1;
  padding:7px 6px;border-radius:9px;cursor:pointer;
  font-family:'Inter';font-weight:700;font-size:10.5px;letter-spacing:.02em;
  background:transparent;border:1px solid transparent;color:rgba(219,234,254,.55);
  white-space:nowrap;
  transition:background .22s var(--ease-smooth), color .22s var(--ease-smooth);
}
.ch-tab:hover{color:#fff;background:rgba(255,255,255,.05)}
.ch-tab.active{
  background:linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%);
  color:#fff;
  border-color:rgba(96,165,250,.40);
  box-shadow:
    0 4px 12px rgba(59,130,246,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.chat-online{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;
  border-radius:99px;
  background:rgba(40,199,111,.12);
  border:1px solid rgba(40,199,111,.32);
  font-family:'Inter';font-weight:800;font-size:14px;
  color:#7be8a3;
  font-variant-numeric: tabular-nums;
  flex-shrink:0;
}
.chat-online-dot{
  position:relative;
  width:8px;height:8px;border-radius:50%;
  background:#28c76f;box-shadow:0 0 10px #28c76f;
  flex-shrink:0;
}
.chat-online-dot::after{
  content:""; position:absolute; inset:-3px;
  border-radius:50%;
  border:1.5px solid rgba(40,199,111,.55);
  animation: chatDotRing 1.8s ease-out infinite;
}
@keyframes chatDotRing{
  0%   { transform: scale(.6); opacity: 1 }
  100% { transform: scale(1.9); opacity: 0 }
}
@media (prefers-reduced-motion: reduce){
  .chat-online-dot::after{ animation: none; opacity: 0 }
}
.chat-body{
  flex:1;overflow-y:auto;
  padding:12px 14px;
  display:flex;flex-direction:column;gap:10px;
}
.chat-body::-webkit-scrollbar{width:6px}
.chat-body::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}
.cmsg{display:flex;gap:8px;align-items:flex-start;animation:msgIn .3s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.cmsg-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;border:2px solid rgba(255,255,255,.15);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  overflow:hidden;
}
.cmsg-avatar-img{padding:0;background:rgba(0,0,0,.3)}
.cmsg-avatar-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:50%;
}
.cmsg-avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:16px}
.cmsg-body{flex:1;min-width:0;font-size:15px;line-height:1.4}
.cmsg-name{font-family:'Inter';font-weight:700;font-size:14px}
.cmsg-rank{
  display:inline-flex; align-items:center;
  font-family:'Inter','SF Pro Text',sans-serif;
  font-size:9px; font-weight:700;
  letter-spacing:.06em;
  padding:2px 7px; border-radius:6px;
  margin-right:5px; color:#ffffff;
  vertical-align:middle;
  font-variant-caps: all-small-caps;
  text-transform:uppercase;
}
/* Refined rank chips — flat tinted glass + 1px brand-colored rim, no shine
   animations, no gradients fighting the typography. Reads as a system badge
   instead of a sticker. */
.rank-vip{
  background: rgba(251,191,36,.16);
  border:1px solid rgba(251,191,36,.45);
  color:#fde68a;
}
.rank-mod{
  background: rgba(96,165,250,.16);
  border:1px solid rgba(96,165,250,.45);
  color:#bfdbfe;
}
.rank-bot{
  background: rgba(148,163,184,.16);
  border:1px solid rgba(148,163,184,.40);
  color:#cbd5e1;
}
.rank-dev{
  background: rgba(167,139,250,.16);
  border:1px solid rgba(167,139,250,.45);
  color:#ddd6fe;
}
/* Admin: subtle navy-on-cyan flat pill. No shine, no gradient drift. */
.rank-admin{
  background: rgba(34,211,238,.14);
  border:1px solid rgba(34,211,238,.50);
  color:#a5f3fc;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 14px rgba(34,211,238,.18);
}
@keyframes rankAdminShine{ to{ background-position: 200% 0 } } /* kept as a noop so callers don't error */
.cmsg-text{color:var(--text-dim);word-break:break-word}
.cmsg-system{
  font-size:11.5px; color:#bae6fd; text-align:center;
  font-style:normal; font-weight:600;
  padding:8px 12px;
  background:
    linear-gradient(180deg, rgba(59,130,246,.10), rgba(59,130,246,.04));
  border-radius:10px;
  border:1px solid rgba(59,130,246,.28);
  letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.cmsg-system::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#60A5FA; box-shadow:0 0 6px #60A5FA;
  flex-shrink:0;
}
.chat-rules{
  font-size:10.5px;color:rgba(219,234,254,.45);text-align:center;
  padding:8px 12px;
  border-top:1px solid rgba(255,255,255,.04);
  letter-spacing:.04em;
}
.chat-input{
  display:flex;gap:8px;padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.25);
}
.chat-input input{
  flex:1;
  padding:11px 16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);
  font-family:'Inter';font-weight:500;font-size:15px;color:#fff;
  outline:none;
  letter-spacing:.005em;
  transition:border-color .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth), background .22s var(--ease-smooth);
}
.chat-input input::placeholder{ color:rgba(219,234,254,.40); }
.chat-input input:focus{
  border-color:rgba(96,165,250,.65);
  background:rgba(59,130,246,.06);
  box-shadow:
    0 0 0 3px rgba(59,130,246,.18),
    0 0 18px rgba(34,211,238,.18);
}
.btn-send{
  flex-shrink:0;
  width:42px;height:42px;
  border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg, #60A5FA 0%, #3B82F6 50%, #1D4ED8 100%);
  color:#fff;border:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 4px 14px rgba(59,130,246,.45);
  transition:transform .15s var(--ease-smooth), box-shadow .25s var(--ease-smooth), filter .2s ease;
  position:relative;
}
.btn-send::before{
  content:""; width:18px; height:18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2L11 13'/><path d='M22 2l-7 20-4-9-9-4 20-7z'/></svg>") center/contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.btn-send:hover{
  filter:brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 6px 20px rgba(59,130,246,.65),
    0 0 22px rgba(34,211,238,.30);
}
.btn-send:active{ transform:translateY(2px) }
/* Read-only chat — input + button dimmed when the current user lacks
   send permission (non-staff). The chat-rules row above the input is
   relabeled by JS to explain the lock. */
.chat-input input:disabled{
  opacity:.55; cursor:not-allowed;
  background:rgba(255,255,255,.02);
  border-style:dashed;
}
.btn-send:disabled{
  opacity:.45; cursor:not-allowed;
  box-shadow:none;
  filter:grayscale(.4);
}
/* .chat-rules-locked retired with the chat-rank gate. Kept the class
   name as a no-op selector so any stale JS references don't error. */
.chat-rules.chat-rules-locked{}

/* ============================================================
   BUTTONS
============================================================ */
/* HTML `hidden` attribute MUST win over .btn's display:inline-flex.
   Without this rule, [hidden] gets overridden by the cascade and the
   button still renders. Same trick the BJ contextual-buttons fix relies on. */
.btn[hidden]{ display: none !important; }

.btn{
  position:relative;
  font-family:'Inter',sans-serif;font-weight:700;
  font-size:15px;letter-spacing:.06em;
  padding:11px 20px;border-radius:14px;
  border:1px solid var(--line-2);cursor:pointer;color:var(--text);
  background:rgba(255,255,255,.05);
  overflow:hidden;
  /* keep label centered and never let it spill */
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;
  text-overflow:ellipsis;
  line-height:1.1;
  transition:transform .25s cubic-bezier(.2,.8,.25,1), box-shadow .25s, background .25s, border-color .25s, color .25s;
  will-change:transform;
}
.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(59,130,246,.7);
  color:#fff;
  box-shadow:
    0 0 0 1px rgba(59,130,246,.45),
    0 8px 22px rgba(59,130,246,.35),
    0 0 28px rgba(59,130,246,.25);
}
.btn:active{transform:translateY(0) scale(.96)}
.btn.big{padding:14px 26px;font-size:16px}
.btn-shine{
  position:absolute;top:0;left:-50%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-20deg);pointer-events:none;
}
.btn:hover .btn-shine{animation:btnShine .6s ease}
@keyframes btnShine{from{left:-50%}to{left:120%}}

.btn-primary{
  background:linear-gradient(180deg,#60A5FA 0%,var(--pink) 50%,var(--pink-deep) 100%);
  color:#fff;border-color:rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -2px 0 rgba(29,78,216,.4),
    0 1px 0 rgba(255,255,255,.15),
    0 4px 12px rgba(59,130,246,.45),
    0 0 0 1px rgba(59,130,246,.2);
}
.btn-primary:hover{
  filter:brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(29,78,216,.5),
    0 1px 0 rgba(255,255,255,.18),
    0 8px 24px rgba(59,130,246,.6),
    0 0 0 1px rgba(96,165,250,.45),
    0 0 28px rgba(34,211,238,.30);
}
.btn-primary:active{transform:translateY(1px)}

.btn-deposit{
  background:linear-gradient(180deg,#60A5FA 0%,#3B82F6 50%,#1D4ED8 100%);
  color:#fff;border:1px solid rgba(255,255,255,.18);font-weight:700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(29,78,216,.4),
    0 4px 14px rgba(59,130,246,.42),
    0 0 0 1px rgba(59,130,246,.22);
}
.btn-deposit:hover{
  filter:brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -2px 0 rgba(29,78,216,.5),
    0 8px 22px rgba(59,130,246,.55),
    0 0 26px rgba(34,211,238,.30);
}
.btn-deposit:active{transform:translateY(1px)}

.btn-ghost{background:rgba(255,255,255,.05);color:var(--text-dim);border:1px solid var(--line-2)}
.btn-ghost:hover{
  color:#fff;
  border-color:rgba(59,130,246,.65);
  box-shadow:
    0 0 0 1px rgba(59,130,246,.4),
    0 6px 18px rgba(59,130,246,.3),
    0 0 22px rgba(59,130,246,.2);
}

.btn-outline{
  background:transparent;border:2px solid var(--pink);color:var(--text);
  box-shadow:0 0 16px rgba(59,130,246,.2);
}
.btn-outline:hover{background:rgba(59,130,246,.12);box-shadow:0 0 24px rgba(59,130,246,.4)}

.btn-cashout{
  background:linear-gradient(180deg,#fde047 0%,#facc15 50%,#a16207 100%);
  color:#3a2400;border:1px solid rgba(255,255,255,.30);font-weight:800;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(120,53,15,.45),
    0 4px 14px rgba(250,204,21,.45),
    0 0 0 1px rgba(250,204,21,.22);
}
.btn-cashout:hover{
  filter:brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(120,53,15,.5),
    0 8px 22px rgba(250,204,21,.60),
    0 0 28px rgba(250,204,21,.32);
}
.btn-cashout:active{transform:translateY(1px)}
.btn-cashout:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}

/* ============================================================
   ROUTES
============================================================ */
.route{display:none;animation:routeIn .42s cubic-bezier(.16,1,.3,1)}
.route.active{display:block}
@keyframes routeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   PROMO STRIP (banner row)
============================================================ */
.promo-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;
}
.promo{
  position:relative;
  height:140px;border-radius:20px;
  padding:18px 20px;
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid var(--line-2);
  cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.promo:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.promo-1{background:linear-gradient(135deg,#3B82F6 0%,#06B6D4 60%,#1E3A8A 100%)}
.promo-2{background:linear-gradient(135deg,#1D4ED8 0%,#1E3A8A 50%,#06B6D4 100%)}
.promo-3{background:linear-gradient(135deg,#3B82F6 0%,#28c76f 60%,#3a0808 100%)}
.promo::before{content:"";position:absolute;top:-30%;right:-30%;width:80%;height:80%;background:radial-gradient(circle,rgba(255,255,255,.3),transparent 70%);pointer-events:none}
.promo-tag{
  align-self:flex-start;padding:4px 10px;border-radius:99px;
  background:rgba(255,255,255,.25);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.4);
  font-family:'Inter';font-weight:800;font-size:12px;color:#fff;letter-spacing:.1em;
}
.promo-title{
  font-family:'Sora';font-weight:400;font-size:24px;color:#fff;
  letter-spacing:.02em;
  text-shadow:0 2px 0 rgba(0,0,0,.3), 0 4px 0 rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.3);
}
.promo-sub{font-family:'Inter';font-weight:600;font-size:14px;color:rgba(255,255,255,.9);margin-top:-4px}
.promo-art{position:absolute;right:-10px;bottom:-10px;width:120px;height:120px;opacity:.85;pointer-events:none}
.promo-art-coins{
  background:radial-gradient(circle at 35% 25%,#dbeafe 0%,#3B82F6 35%,#3B82F6 60%,#b87800 100%);
  border-radius:50%;
  box-shadow:0 0 30px rgba(255,217,0,.5);
  animation:bobble 3s ease-in-out infinite;
}
.promo-art-coins::before{
  content:"BC";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Sora';font-size:38px;color:#5c3800;
}
.promo-art-crate{
  background:linear-gradient(135deg,#bd93ff,#7c3aed);
  border-radius:20px;border:3px solid #3B82F6;
  box-shadow:0 0 30px rgba(189,147,255,.5);
  animation:bobble 3s ease-in-out infinite -1s;
}
.promo-art-crate::before{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='g1' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23ff9b4a'/><stop offset='1' stop-color='%23c95a1a'/></linearGradient><linearGradient id='g2' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23ffd900'/><stop offset='1' stop-color='%23c97900'/></linearGradient></defs><rect x='10' y='22' width='44' height='34' rx='3' fill='url(%23g1)' stroke='%237a3a08' stroke-width='1.2'/><rect x='10' y='22' width='44' height='10' fill='url(%23g2)' stroke='%237a3a08' stroke-width='1.2'/><rect x='28' y='22' width='8' height='34' fill='%23c95a1a' stroke='%237a3a08' stroke-width='1.2'/><path d='M22 22 q4 -10 10 -10 q6 0 10 10 z M32 12 q-6 -8 -10 -2 q-2 4 4 8 z M32 12 q6 -8 10 -2 q2 4 -4 8 z' fill='%23ffd900' stroke='%237a3a08' stroke-width='1.2'/></svg>") center/72% no-repeat;
  filter:drop-shadow(0 6px 14px rgba(201,90,26,.45));
}
.promo-art-bonus{
  background:linear-gradient(135deg,#dbeafe,#3B82F6);
  border-radius:50%;box-shadow:0 0 30px rgba(255,217,0,.5);
  animation:bobble 3s ease-in-out infinite -2s;
}
.promo-art-bonus::before{
  content:"+25%";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Sora';font-size:24px;color:#5c3800;
}

/* ============================================================
   LIVE BET FEED
============================================================ */
.bet-feed-wrap{
  background:linear-gradient(135deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-2);border-radius:18px;
  padding:14px 18px;margin-bottom:24px;
  box-shadow:var(--shadow-panel);
}
.bet-feed-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;flex-wrap:wrap;gap:10px;
}
.bet-feed-title{
  display:flex;align-items:center;gap:8px;
  font-family:'Sora';font-size:18px;color:var(--text);
  letter-spacing:.04em;
  text-shadow:0 0 16px rgba(59,130,246,.3);
}
.live-dot{
  width:10px;height:10px;border-radius:50%;background:var(--red);
  box-shadow:0 0 10px var(--red);
  animation:livePulse 1s ease-in-out infinite;
}
@keyframes livePulse{50%{opacity:.3;transform:scale(.7)}}
.bet-feed-tabs{display:flex;gap:6px}
.bf-tab{
  padding:6px 14px;border-radius:99px;cursor:pointer;
  font-family:'Inter';font-weight:700;font-size:13px;
  background:rgba(255,255,255,.05);border:1px solid transparent;color:var(--text-dim);
  transition:background .3s, color .3s, transform .25s, box-shadow .3s;
}
.bf-tab:hover{color:var(--text);background:rgba(59,130,246,.12)}
.bf-tab:active{transform:scale(.96)}
.bf-tab.active{
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;border-color:rgba(255,255,255,.2);
  box-shadow:0 0 18px rgba(59,130,246,.45), inset 0 1px 0 rgba(255,255,255,.2);
  animation:segActivePop .35s cubic-bezier(.34,1.56,.64,1);
}
.bet-feed{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
.bet-feed::-webkit-scrollbar{width:6px}
.bet-feed::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}
.bf-row{
  display:grid;grid-template-columns:1.2fr 1.5fr 1fr .8fr 1.2fr;gap:10px;align-items:center;
  padding:8px 14px;border-radius:12px;
  font-family:'Inter';font-weight:700;font-size:15px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);
  animation:bfIn .4s ease;
}
@keyframes bfIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.bf-row.bf-head{
  background:transparent;border:none;
  font-size:12px;letter-spacing:1.5px;color:var(--text-mute);padding:4px 14px;
}
/* Live-feed game indicator: small colored pill — no chunky icon box.
   The colour itself encodes the game, name appears alongside as a label. */
.bf-game{display:flex;align-items:center;gap:8px;font-family:'Sora';font-weight:700;font-size:13px;letter-spacing:.14em}
.bf-game-icon{
  width:6px;height:6px;border-radius:50%;
  display:inline-block;flex-shrink:0;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
}
.bf-game-icon svg.bf-icon{display:none}
.bf-user{color:var(--text);display:flex;align-items:center;gap:8px}
.bf-avatar{
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.18);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
  overflow:hidden;background:rgba(0,0,0,.3);
}
.bf-avatar-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.bf-bet{color:#bae6fd;font-weight:600}
.bf-multi{font-family:'Sora';font-weight:700;letter-spacing:.04em}
/* Win indicators stay green so the player can still parse win-vs-loss at
   a glance — universal casino UX, even on a red-themed brand. */
.bf-multi-win{color:#28c76f;text-shadow:0 0 10px rgba(40,199,111,.35)}
.bf-multi-push{color:#bae6fd}
.bf-multi-loss{color:#ef4444;font-size:13px;letter-spacing:.18em;opacity:.85}
.bf-payout{font-family:'Sora';font-weight:700;letter-spacing:.04em}
.bf-win{color:#28c76f}
.bf-loss{color:#ef4444}

/* big-wins indicator: small dot, no boxy badge */
.bw-game-icon{
  width:5px;height:5px;border-radius:50%;
  background:currentColor;box-shadow:0 0 6px currentColor;
  display:inline-block;flex-shrink:0;
  vertical-align:middle;margin-right:6px;
}
.bw-game-icon svg{display:none}
.bw-info .bw-game{display:flex;align-items:center;gap:4px}

/* mines empty-tile placeholder — dim Hitcoin "ghost" so the whole grid
   reads on-brand. Saturated colors stripped via filter so it sits as a
   subtle hint of the prize underneath instead of competing with the
   tile chrome. Hover lights it up briefly. */
.mt-empty{
  width:48%;height:48%;
  display:block;margin:auto;
  object-fit:contain;
  opacity:.30;
  filter:grayscale(.7) brightness(.85)
         drop-shadow(0 1px 3px rgba(0,0,0,.5));
  transition:opacity .4s cubic-bezier(.4,0,.2,1),
             transform .4s cubic-bezier(.4,0,.2,1),
             filter .4s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  -webkit-user-drag:none;
}
.mine-tile:hover .mt-empty{
  opacity:.55;
  transform:scale(1.10);
  filter:grayscale(.3) brightness(1)
         drop-shadow(0 2px 6px rgba(59,130,246,.4));
}
.mine-tile.gem .mt-empty,
.mine-tile.bomb .mt-empty{display:none}

/* ============================================================
   HERO
============================================================ */
.hero{
  position:relative;
  display:grid;grid-template-columns:1.3fr .9fr;gap:40px;
  padding:48px;border-radius:28px;
  background:
    radial-gradient(ellipse at top right, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(29,78,216,.18), transparent 60%),
    linear-gradient(135deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-panel);
  overflow:hidden;
  margin-bottom:40px;
}
.hero::before{
  content:"";position:absolute;top:-100px;left:-100px;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.18),transparent 70%);
  filter:blur(40px);pointer-events:none;
}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 16px 7px 12px;border-radius:99px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(10,16,32,.55);
  border:1px solid rgba(40,199,111,.32);
  font-family:'Inter';font-size:11.5px;letter-spacing:.14em;font-weight:700;
  color:#ffffff;margin-bottom:22px;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 4px 14px rgba(0,0,0,.35),
    0 0 18px rgba(40,199,111,.18);
}
.badge #hero-online{
  font-family:'Sora','Inter',sans-serif;
  font-weight:800;
  font-size:15px;
  color:#7be8a3;
  font-variant-numeric: tabular-nums;
  letter-spacing:.02em;
}
.badge-dot{
  position:relative;
  width:8px;height:8px;border-radius:50%;
  background:#28c76f;
  box-shadow:0 0 12px #28c76f;
  flex-shrink:0;
}
.badge-dot::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1.5px solid rgba(40,199,111,.55);
  animation:badgeDotRing 1.8s ease-out infinite;
}
@keyframes badgeDotRing{
  0%   { transform: scale(.6); opacity: 1 }
  100% { transform: scale(1.9); opacity: 0 }
}
@media (prefers-reduced-motion: reduce){
  .badge-dot::after{ animation: none; opacity: 0 }
}
.hero-title{
  font-family:'Sora',sans-serif;font-weight:400;
  font-size:clamp(42px,5.2vw,76px);
  line-height:.96;letter-spacing:-.5px;
  margin-bottom:22px;color:var(--text);
  text-shadow:0 0 24px rgba(59,130,246,.4);
}
.title-pop{
  display:inline-block;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep) 50%,var(--gold));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 24px rgba(59,130,246,.5));
}
/* Hero logo — drops the "Bloxhit." text in favor of the actual brand image.
   Sized to feel proportionate next to the giant "Play. Win." cap-height. */
.hero-title-logo{
  display:block;
  height:1.9em;width:auto;
  margin:6px 0 0 -0.06em;
  filter:drop-shadow(0 10px 24px rgba(59,130,246,.5))
         drop-shadow(0 0 36px rgba(59,130,246,.32));
  user-select:none;-webkit-user-drag:none;
  animation:heroLogoFloat 3.8s ease-in-out infinite;
}
@keyframes heroLogoFloat{
  0%,100%{transform:translateY(0)   rotate(-1deg)}
  50%    {transform:translateY(-8px) rotate( 1deg)}
}
@media (max-width:760px){
  .hero-title-logo{height:1.6em}
}
.hero-sub{font-size:16px;color:var(--text-dim);max-width:560px;margin-bottom:24px;line-height:1.5;font-weight:600}
.hl{color:var(--gold);font-weight:700}
.hero-cta{display:flex;gap:14px;margin-bottom:28px;flex-wrap:wrap}

/* "Your balance" hero card — replaces the old fake site-wide stats grid. */
.hero-balance{
  position:relative;max-width:380px;
  padding:18px 22px;border-radius:18px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(59,130,246,.18), transparent 55%),
    linear-gradient(135deg, rgba(59,130,246,.06), rgba(59,130,246,.04));
  border:1px solid rgba(59,130,246,.28);
  box-shadow:0 12px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.hero-balance::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg, transparent 35%, rgba(59,130,246,.15) 50%, transparent 65%);
  background-size:300% 100%;
  animation:hbShine 5s linear infinite;
  pointer-events:none;
}
@keyframes hbShine{from{background-position:200% 0}to{background-position:-100% 0}}
.hb-label{
  font-family:'Inter';font-weight:700;font-size:13px;
  letter-spacing:.18em;color:#3B82F6;
  text-transform:uppercase;margin-bottom:10px;
}
.hb-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.hero-balance .bcoin-icon.big{
  width:48px;height:48px;flex-shrink:0;
}
.hb-amount{display:flex;align-items:baseline;gap:6px;line-height:1}
.hb-num{
  font-family:'Sora';font-weight:800;font-size:36px;letter-spacing:.01em;
  color:#f1f5f9;
}
.hb-unit{
  font-family:'Sora';font-weight:700;font-size:16px;
  color:#3B82F6;letter-spacing:.12em;
  display:inline-flex;align-items:center;
}
.hb-unit .bc-glyph{width:30px;height:30px;margin-left:0;vertical-align:middle;filter:drop-shadow(0 0 8px rgba(59,130,246,.6)) drop-shadow(0 0 18px rgba(34,211,238,.35))}
.hb-cta-row{display:flex;gap:10px;flex-wrap:wrap}
.hb-cta{padding:10px 18px;font-size:14px;letter-spacing:.12em}
.hb-signed-out-msg{
  display:none;font-family:'Inter';font-weight:600;
  color:var(--text-dim);font-size:15px;margin-top:6px;
}
.hero-balance[data-state="signed-out"] .hb-row,
.hero-balance[data-state="signed-out"] .hb-cta-row{display:none}
.hero-balance[data-state="signed-out"] .hb-signed-out-msg{display:block}

.hero-art{display:flex;align-items:center;justify-content:center;position:relative}
.hero-limited-stack{position:relative;width:340px;height:320px}
.hero-limited-stack::after{
  /* glowing ground beneath items */
  content:"";position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  width:260px;height:40px;
  background:radial-gradient(ellipse,rgba(96,165,250,.55),rgba(140,90,255,.25) 50%,transparent 75%);
  filter:blur(22px);z-index:0;pointer-events:none;
  animation:limGlowPulse 4s ease-in-out infinite;
}
@keyframes limGlowPulse{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}

/* Static-facing limited art — gentle bob only, no Y-axis spin.
   Sizes bumped from 160/180/150/160 → 200/220/180/200 so the showcased
   limiteds carry more visual weight on the home page. */
.hlim{
  position:absolute;width:200px;height:200px;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(96,165,250,.35));
}
.hlim img{
  width:100%;height:100%;object-fit:contain;
  -webkit-user-select:none;user-select:none;pointer-events:none;
}

/* Triangle arrangement with individual gentle bobs */
.hlim-1{ /* back center — purple dominus, biggest */
  top:8px;left:50%;margin-left:-110px;z-index:2;
  width:220px;height:220px;
  animation:limBobA 5s ease-in-out infinite;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(96,165,250,.55));
}
.hlim-2{ /* front-left — fedora */
  bottom:24px;left:0;z-index:4;
  width:180px;height:180px;
  animation:limBobB 5.5s ease-in-out infinite -1.5s;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,255,255,.35));
}
.hlim-3{ /* front-right — valkyrie */
  bottom:20px;right:-8px;z-index:3;
  width:200px;height:200px;
  animation:limBobC 6s ease-in-out infinite -3s;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(120,200,255,.45));
}
@keyframes limBobA{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes limBobB{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes limBobC{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* Floating Hitcoins — replaces the old sakura petals.
   Each .hero-petal element renders the brand Hitcoin PNG instead of a
   pink pixel, giving the hero "wealth raining around the limiteds"
   instead of "sakura". Class name kept (.hero-petal) so the existing
   HTML doesn't need to change. Five positions for a fuller swirl, with
   independent drift animations so they read as floating, not synced. */
.hero-petal{
  position:absolute;
  width:48px;height:48px;
  background:url('assets/Hitcoin new.png') center/contain no-repeat;
  filter:drop-shadow(0 4px 12px rgba(59,130,246,.65))
         drop-shadow(0 0 18px rgba(34,211,238,.45));
  pointer-events:none;
  z-index: 5;
}
/* Position the floating Hitcoins around the edges of the hat stack so the
   hats don't cover them. Sizes bumped from 22-30px → 40-52px so they read
   as a clear visual element instead of tiny dots. */
.hero-petal-1{ top:-18px;  left:-22px;  width:54px;height:54px;
                animation:hitcoinFloat1 6s ease-in-out infinite }
.hero-petal-2{ top:18px;   right:-20px; width:46px;height:46px;
                animation:hitcoinFloat2 7s ease-in-out infinite -2s }
.hero-petal-3{ bottom:-10px; right:-18px; width:42px;height:42px;
                animation:hitcoinFloat3 8s ease-in-out infinite -4s }
.hero-petal-4{ top:-12px;  right:46%; width:38px;height:38px;
                animation:hitcoinFloat2 8.5s ease-in-out infinite -1s; opacity:.92 }
.hero-petal-5{ bottom:-14px; left:-18px; width:50px;height:50px;
                animation:hitcoinFloat1 7.5s ease-in-out infinite -3s }
@keyframes hitcoinFloat1{
  0%,100%{ transform:translate(0,0) rotate(-8deg) }
  50%    { transform:translate(8px,-18px) rotate(8deg) }
}
@keyframes hitcoinFloat2{
  0%,100%{ transform:translate(0,0) rotate(6deg) }
  50%    { transform:translate(-10px,-14px) rotate(-10deg) }
}
@keyframes hitcoinFloat3{
  0%,100%{ transform:translate(0,0) rotate(0) }
  50%    { transform:translate(-6px,-22px) rotate(14deg) }
}

/* ============================================================
   SECTION TITLES
============================================================ */
.section-title{
  font-family:'Sora',sans-serif;font-weight:400;
  font-size:30px;color:var(--text);
  margin:36px 0 18px;
  display:flex;align-items:center;gap:12px;
  letter-spacing:.02em;
  text-shadow:0 0 20px rgba(59,130,246,.3);
}
.section-emoji{display:inline-block;animation:bobble 2s ease-in-out infinite;filter:drop-shadow(0 0 8px var(--pink))}

/* ============================================================
   GAME CARDS
============================================================ */
/* === Pass 1: prices ticker (scrolling marquee under the topbar)
   Glass pills with colored coin icons + USD price, scrolling slowly
   left-to-right on loop. Pills are duplicated in the DOM so the
   translateX(-50%) loop appears seamless. JS populates from the
   coingecko poll already in place. */
.prices-ticker{
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  margin: 0 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.prices-track{
  display: flex; gap: 12px;
  width: max-content;
  /* Animation shifts the track left by exactly one "copy width" — the
     `--prices-shift` CSS variable is set in JS based on how many
     duplicated pill sets we built (1 copy out of N total). The loop
     looks seamless because the next copy ends up where the previous
     one was. Falls back to -50% (2 copies) if JS hasn't run yet. */
  animation: pricesScroll 90s linear infinite;
  will-change: transform;
}
.prices-ticker:hover .prices-track{ animation-play-state: paused; }
@keyframes pricesScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(var(--prices-shift, -50%)); }
}
.price-pill{
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px;
  padding: 0 14px 0 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  box-shadow: var(--shadow-glass);
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 800; font-size: 12.5px;
  color: #fff; letter-spacing: .02em;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: default;
  transition:
    background-color .25s var(--ease-smooth),
    border-color    .25s var(--ease-smooth),
    box-shadow      .25s var(--ease-smooth),
    transform       .25s var(--ease-bounce);
}
img.price-icon{
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.price-amt{ font-variant-numeric: tabular-nums; }

/* Per-coin hover state — pill backlights with the coin's brand color,
   border lights up to a matching tint, and the icon gets a halo.
   Custom property --coin-rgb is the coin's RGB triplet so the rgba()
   stack stays compact. */
.price-pill:hover{
  transform: translateY(-2px);
  background: rgba(var(--coin-rgb), .14);
  border-color: rgba(var(--coin-rgb), .55);
  box-shadow:
    var(--shadow-glass),
    0 6px 18px rgba(var(--coin-rgb), .38),
    0 0 22px rgba(var(--coin-rgb), .25);
}
.price-pill:hover img.price-icon{
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.4))
    drop-shadow(0 0 8px rgba(var(--coin-rgb), .85));
}
.price-pill[data-coin="btc"]  { --coin-rgb: 247, 147, 26;  }
.price-pill[data-coin="eth"]  { --coin-rgb:  98, 126, 234; }
.price-pill[data-coin="sol"]  { --coin-rgb:  20, 241, 149; }
.price-pill[data-coin="ltc"]  { --coin-rgb:  52,  93, 157; }
.price-pill[data-coin="usdt"] { --coin-rgb:  38, 161, 123; }
.price-pill[data-coin="bnb"]  { --coin-rgb: 243, 186,  47; }
.price-pill[data-coin="doge"] { --coin-rgb: 194, 166,  51; }
.price-pill[data-coin="trx"]  { --coin-rgb: 255,   6,  10; }

/* === Pass 1: vertical game cards (bloxrain-inspired)
   Tighter grid, taller aspect, each game gets its own vibrant gradient
   instead of every card being a red variant. Centerpiece SVG art was
   stripped (see python migration that emptied .gc-scene-* divs) so the
   middle of every card is now an empty placeholder ready for user art. */
.game-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.game-card{
  position:relative;
  border:none; cursor:pointer;
  border-radius: 20px;
  aspect-ratio: 3 / 4;            /* pack-like portrait */
  min-height: 280px;
  padding: 22px 18px 18px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  overflow:hidden;
  /* Bouncy stake-style hover — overshoot + smooth recover */
  transition:
    transform .35s var(--ease-bounce),
    box-shadow .35s var(--ease-smooth),
    filter .25s var(--ease-smooth);
  box-shadow: var(--shadow-card-rest);
  font-family:'Inter', sans-serif;
  text-align:center; color:#fff;
  isolation: isolate;
}
.game-card:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--shadow-card-lift);
  filter: brightness(1.08) saturate(1.06);
}
.game-card:active{ transform: translateY(-2px) scale(.99); transition-duration: .12s }

/* Per-game vibrant tiles (bloxrain-style — single dominant color per
   card, top-bright → bottom-deep). Each game has its own signature hue
   so the home grid feels vibrant and varied. No reds anywhere. */
.gc-crash    { background: linear-gradient(180deg, #f97316 0%, #ea580c 60%, #9a3412 100%); }
.gc-blackjack{ background: linear-gradient(180deg, #10b981 0%, #059669 60%, #064e3b 100%); }
.gc-slots    { background: linear-gradient(180deg, #f59e0b 0%, #d97706 60%, #78350f 100%); }
.gc-dice     { background: linear-gradient(180deg, #a855f7 0%, #7e22ce 60%, #4c1d95 100%); }
.gc-mines    { background: linear-gradient(180deg, #06b6d4 0%, #0891b2 60%, #155e75 100%); }
.gc-limbo    { background: linear-gradient(180deg, #14b8a6 0%, #0d9488 60%, #134e4a 100%); }
.gc-plinko   { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 60%, #1e3a8a 100%); }
.gc-upgrader { background: linear-gradient(180deg, #ec4899 0%, #be185d 60%, #831843 100%); }
.gc-cases    { background: linear-gradient(180deg, #6366f1 0%, #4338ca 60%, #312e81 100%); }
/* All cards now use white text on saturated colors. */

/* Specular highlight + bottom shade — kept but softer */
.game-card::before{
  content:""; position:absolute;
  top:-30%; right:-30%; width:80%; height:80%;
  background:radial-gradient(circle, rgba(255,255,255,.25), transparent 70%);
  pointer-events:none; z-index:0;
}
.game-card::after{
  content:""; position:absolute;
  bottom:0; left:0; right:0; height:50%;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.30));
  pointer-events:none; z-index:0;
}

/* Card name — top-center label. Big, chunky, brand cartoony with a
   subtle text shadow for legibility on light backgrounds (slots/coinflip). */
.gc-name{
  font-family:'Sora',sans-serif;
  font-weight:900;
  font-size:22px;
  letter-spacing:.06em;
  color:#fff;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 rgba(0,0,0,.40),
    0 4px 0 rgba(0,0,0,.25),
    0 8px 16px rgba(0,0,0,.45);
  margin-top: 2px; margin-bottom: 0;
  position:relative; z-index:3;
  text-align:center;
}
/* Badge in the top-right corner (HOT / NEW / POPULAR / SOON). */
.gc-tag{
  position:absolute;
  top:14px; right:14px;
  bottom:auto; left:auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  font-family:'Inter';
  font-weight:800; font-size: 9.5px;
  letter-spacing:.18em; text-transform: uppercase;
  color:#fff; z-index:4;
}
/* "BLOXHIT ORIGINALS" subtitle — sits at the bottom of each card via
   ::after pseudo on the card so we don't need new HTML elements. */
.game-card::before{
  content:""; position:absolute;
  top:-30%; right:-30%; width:80%; height:80%;
  background:radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
  pointer-events:none; z-index:0;
}
.game-card{ /* augmenting — adds the subtitle via a new pseudo wouldn't
                conflict with the existing ::before/::after, so use a
                tiny inline-position div in HTML eventually. For now,
                skipping the subtitle to keep scope tight — the bold
                card name + center art slot already reads as a "pack". */ }
/* Legacy gc-bubble multiplier callouts (only on the crash card) — these
   were pinned to the old SVG diorama. Now that the SVGs are empty
   placeholder slots, they hang in empty space with no anchor. Hidden
   in Pass 1; can be re-introduced as a separate subtitle in Pass 2 if
   the user wants the "2.0×/23.2×" bubble flair back. */
.gc-bubble{ display: none; }

.gc-art{
  position:absolute;bottom:50px;left:50%;transform:translateX(-50%);
  width:65%;pointer-events:none;z-index:1;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.4));
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
.gc-art svg{width:100%;height:auto;display:block}

/* ---- DIORAMA SCENE — full-card backdrop variant ----------------
   Cards using <div class="gc-scene"> get a full-card-fill SVG that
   composes a real diorama (sky/floor backplate + props + foreground
   framing) instead of a flat gradient. The card's normal background
   gradient is hidden behind the scene. UI overlays (.gc-name,
   .gc-tag, .gc-bubble) sit ABOVE the scene at z-index 2+ so they
   stay readable.

   Scope per card: pure SVG composition (no extra DOM), CSS animates
   selected groups via class names within the SVG tree. Keeps the
   card's existing hover/tilt/3D-perspective behaviour intact. */
.gc-scene{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  overflow:hidden;
  /* Paint containment — tells the browser each card scene is its
     own self-contained visual unit. Animations, gradients, and
     filters inside don't trigger reflows or repaints on the rest
     of the page. Critical on iPhone where 9 simultaneously-
     animating cards would otherwise re-rasterize the whole grid
     every frame. */
  contain: layout paint style;
}
.gc-scene svg{
  display:block;
  width:100%;
  height:100%;
  /* Slight pre-multiplied filter for that "rendered look" — soft
     contrast lift + warm cast pulls all the SVG primitives toward
     a unified colour story instead of looking like clip-art layers. */
  filter:saturate(1.05) contrast(1.04);
}
/* Mobile: drop the per-scene saturate/contrast filter (an expensive
   per-frame compositor pass) on iPhone-width devices where the cost
   isn't worth the marginal colour boost. The cards still look fine. */
@media (max-width: 560px){
  .gc-scene svg{ filter:none }
  /* On iPhone, slow down all the twinkle animations a touch — saves
     paint cost without making the cards feel static. */
  .gc-scene .star-twink{ animation-duration: 4s !important }
}
/* Pass 1 — every card uses `.has-scene` historically but the centerpiece
   SVGs were stripped. The per-game gradient background (.gc-X above) is
   now the card's primary look, so DON'T black out has-scene cards.
   The empty .gc-scene-empty just reserves space; the gradient shows
   through. */
.gc-scene-empty{
  position: relative;
  inset: auto;
  flex: 1;
  min-height: 100px;
  width: 100%;
  margin-top: 14px;
  /* Subtle inset highlight so the empty area reads as a "centerpiece
     slot waiting for art" rather than a flat void. Disappears once art
     drops in (img fills the slot). */
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(255,255,255,.06), transparent 75%);
  border-radius: 14px;
  pointer-events: none;
}

/* ---- Crash diorama animations -------------------------------- */
.gc-scene-crash .rocket-grp{
  transform-origin:112px 200px;
  animation: crashRocketBob 3.6s ease-in-out infinite;
}
@keyframes crashRocketBob{
  0%,100%{ transform: translateY(0) rotate(-2deg) }
  50%   { transform: translateY(-6px) rotate(2deg) }
}
.gc-scene-crash .rocket-flame{
  transform-origin:112px 230px;
  animation: crashFlameWobble .14s steps(4) infinite;
}
@keyframes crashFlameWobble{
  0%   { transform: scaleY(1)    scaleX(1) }
  25%  { transform: scaleY(1.15) scaleX(.92) }
  50%  { transform: scaleY(.92)  scaleX(1.10) }
  75%  { transform: scaleY(1.05) scaleX(.95) }
  100% { transform: scaleY(1)    scaleX(1) }
}
.gc-scene-crash .star-twink{
  transform-origin:center;
  transform-box:fill-box;
  animation: crashStarTwink 2.4s ease-in-out infinite;
}
.gc-scene-crash .star-twink:nth-child(2n){ animation-delay:-.6s; animation-duration:3.1s }
.gc-scene-crash .star-twink:nth-child(3n){ animation-delay:-1.2s; animation-duration:1.9s }
.gc-scene-crash .star-twink:nth-child(5n){ animation-delay:-.3s }
@keyframes crashStarTwink{
  0%,100%{ opacity:.4; transform:scale(1)   }
  50%   { opacity:1;  transform:scale(1.6) }
}
/* prefers-reduced-motion ONLY mutes the decorative ambient (star
   twinkle). The rocket-grp + rocket-flame are brand-identity motion
   — the rocket flying IS Crash. Killing them under Reduce Motion
   left iPhone users staring at a static screenshot of the card
   (this was the user's "crash isn't animated on mobile" report,
   same root-cause as the iOS Reduce Motion bug we hit weeks ago in
   the actual crash game — fix is identical: be selective). */
@media (prefers-reduced-motion: reduce){
  .gc-scene-crash .star-twink{ animation:none }
}

/* ---- Generic .star-twink (used by every scene's particle layer) -- */
.gc-scene .star-twink{
  transform-origin:center;
  transform-box:fill-box;
  animation: gcStarTwink 2.4s ease-in-out infinite;
}
.gc-scene .star-twink:nth-child(2n){ animation-delay:-.6s; animation-duration:3.1s }
.gc-scene .star-twink:nth-child(3n){ animation-delay:-1.2s; animation-duration:1.9s }
.gc-scene .star-twink:nth-child(5n){ animation-delay:-.3s }
@keyframes gcStarTwink{
  0%,100%{ opacity:.4; transform:scale(1)   }
  50%   { opacity:1;  transform:scale(1.6) }
}

/* ---- Blackjack scene anims — DEAL/SHUFFLE motion -----
   Each card has its own independent animation on the INNER group
   (.bj-card-1 / .bj-card-2). Animating on the OUTER positioning
   group would clobber its inline `transform="translate(42 96)
   rotate(-14)"` attribute (CSS transform replaces SVG transform on
   the same element) — so the cards exploded off the top edge.
   Inner-group structure mirrors the dice-roll fix. */
.gc-scene-blackjack .bj-card-1{
  animation: gcBJDeal1 5s ease-in-out infinite;
}
.gc-scene-blackjack .bj-card-2{
  animation: gcBJDeal2 5s ease-in-out infinite;
}
@keyframes gcBJDeal1{
  /* A♠ card: brief lift-and-rotate every cycle, like a flick of the
     deck. The outer SVG transform (translate+rotate-14deg) is on a
     wrapper, so this CSS transform is purely the lift. */
  0%, 35%, 100%{ transform: translate(0,0) rotate(0) }
  45%         { transform: translate(-3px,-7px) rotate(-3deg) }
  60%         { transform: translate(0,-2px) rotate(0) }
}
@keyframes gcBJDeal2{
  /* J♥ card lifts on the OTHER half of the cycle so the two cards
     never lift simultaneously. Reads as a dealer alternating cards. */
  0%, 70%, 100%{ transform: translate(0,0) rotate(0) }
  82%         { transform: translate(3px,-7px) rotate(3deg) }
  92%         { transform: translate(0,-2px) rotate(0) }
}
.gc-scene-blackjack .suit-twink text{
  transform-box:fill-box; transform-origin:center;
  animation: gcStarTwink 3s ease-in-out infinite;
}
.gc-scene-blackjack .suit-twink text:nth-child(2n){ animation-delay:-1s; animation-duration:4s }
.gc-scene-blackjack .suit-twink text:nth-child(3n){ animation-delay:-.4s; animation-duration:2.4s }

/* ---- Slots scene anims ----- */
.gc-scene-slots .slots-machine-grp{
  transform-origin:112px 150px;
  animation: gcSlotsBob 5s ease-in-out infinite;
}
@keyframes gcSlotsBob{
  0%,100%{ transform: translateY(0)    rotate(-1.5deg) }
  50%   { transform: translateY(-4px)  rotate(1.5deg)  }
}
/* Rolling-reel animations on the slots scene. Each reel cycles its
   limiteds vertically inside its clipPath so they appear to spin
   continuously — exactly what the slot machine does in-game. Three
   different speeds + offsets so the reels never sync up (would read
   as one image moving instead of three independent reels). */
.gc-scene-slots .sl-reel{ transform-box: fill-box; }
.gc-scene-slots .sl-reel-1{ animation: gcSlotsReel 1.6s linear infinite }
.gc-scene-slots .sl-reel-2{ animation: gcSlotsReel 1.9s linear infinite -.4s }
.gc-scene-slots .sl-reel-3{ animation: gcSlotsReel 2.4s linear infinite -.9s }
@keyframes gcSlotsReel{
  0%   { transform: translateY(0) }
  100% { transform: translateY(-90px) }
}
/* When the player is hovering the card the reels speed up + the
   machine bobs harder — feels like you're "spinning" the card. */
.gc-scene-slots:hover .sl-reel-1{ animation-duration: .6s }
.gc-scene-slots:hover .sl-reel-2{ animation-duration: .75s }
.gc-scene-slots:hover .sl-reel-3{ animation-duration: .95s }

/* ---- Dice scene anims ----- */
/* Dice TUMBLE — periodic full 360° rotation reads as an actual
   dice roll. Most of the cycle the dice sit still; every ~4 seconds
   they tumble once. The two dice tumble at offset times so they
   feel like a real two-die roll (one settles, then the other). The
   outer SVG positioning transform (translate+rotate to angle the
   die on the felt) lives on the parent <g>, so this CSS transform
   is purely the tumble motion. */
.gc-scene-dice .die-blue{
  transform-origin:36px 37px;
  animation: gcDieTumble 4.2s cubic-bezier(.4,.05,.4,1) infinite;
}
.gc-scene-dice .die-red{
  transform-origin:36px 37px;
  animation: gcDieTumble 4.6s cubic-bezier(.4,.05,.4,1) infinite -1.4s;
}
@keyframes gcDieTumble{
  /* Long idle, then a sharp tumble — full 360° rotation + small
     "bounce up off the felt" then settle. Reads as one definitive
     roll per cycle, not constant motion. */
  0%, 35%   { transform: translateY(0)    rotate(0) scale(1) }
  45%       { transform: translateY(-12px) rotate(180deg) scale(1.05) }
  55%       { transform: translateY(-6px)  rotate(360deg) scale(1.02) }
  65%       { transform: translateY(0)     rotate(360deg) scale(1) }
  100%      { transform: translateY(0)     rotate(360deg) scale(1) }
}
/* Mines bomb — tense shake, not a relaxed bob. Long idle, then a
   quick lateral tremor (3 rapid jolts) like the fuse just got close
   enough to set it off. Resets and waits. Reads as "this thing is
   about to go." */
.gc-scene-mines .mn-bomb-grp{
  transform-origin:118px 200px;
  animation: gcMinesNervous 2.4s linear infinite;
}
@keyframes gcMinesNervous{
  0%, 65%, 100%{ transform: translate(0,0) }
  72%         { transform: translate(-2px,1px) }
  78%         { transform: translate(2px,-1px) }
  84%         { transform: translate(-1px,1px) }
  90%         { transform: translate(1px,0) }
}
/* Gem — sparkle pulse, faceted glint cycle. Faster + brighter
   than a generic bob; reads as a real gem catching the light. */
.gc-scene-mines .mn-gem{
  transform-origin:center;
  animation: gcMinesGemFlare 2s ease-in-out infinite;
}
@keyframes gcMinesGemFlare{
  0%,100%{ transform: scale(1);    filter:brightness(1) drop-shadow(0 0 0 rgba(60,160,255,0)) }
  35%   { transform: scale(1.06); filter:brightness(1.35) drop-shadow(0 0 6px rgba(60,160,255,.7)) }
  60%   { transform: scale(1.02); filter:brightness(1.15) drop-shadow(0 0 3px rgba(60,160,255,.4)) }
}

/* ---- Limbo scene anims — BOLT STRIKE -------------------------
   Long idle, then a sharp electric strike sweeps along the bolt
   path from start to end. Achieved by shifting stroke-dashoffset
   on a path with `pathLength=100` and `stroke-dasharray="8 92"` —
   the 8-unit dash (the "strike") slides along the 100-unit path. */
.gc-scene-limbo .lm-strike{
  stroke-dashoffset: 100;
  animation: gcLimboStrike 2.4s linear infinite;
}
@keyframes gcLimboStrike{
  0%   { stroke-dashoffset: 100;  opacity: 0 }
  10%  { stroke-dashoffset: 100;  opacity: .9 }
  60%  { stroke-dashoffset: -8;   opacity: .9 }
  72%  { stroke-dashoffset: -8;   opacity: 0 }
  100% { stroke-dashoffset: -8;   opacity: 0 }
}
.gc-scene-limbo .lm-target-grp{
  transform-origin:172px 36px;
  animation: gcLimboTargetPulse 2.4s ease-out infinite;
}
@keyframes gcLimboTargetPulse{
  0%, 55%, 100% { transform: scale(1)    ; filter: none }
  62%           { transform: scale(1.18) ; filter: brightness(1.5) drop-shadow(0 0 8px #ffd900) }
  72%           { transform: scale(1.04) ; filter: brightness(1.2) }
}
.gc-scene-limbo .lm-halo{
  animation: gcLimboHalo 2.4s ease-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes gcLimboHalo{
  0%, 55%, 100%{ transform: scale(1);   opacity: .5 }
  62%         { transform: scale(2);    opacity: .9 }
  85%         { transform: scale(2.6);  opacity: 0  }
}
.gc-scene-limbo .lm-multi{
  animation: gcLimboMultiPop 2.4s ease-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes gcLimboMultiPop{
  0%, 60%, 100%{ transform: scale(1) }
  68%         { transform: scale(1.10) }
  78%         { transform: scale(1.02) }
}

/* Plinko: removed the keyframe-based ball drop — it had no
   physics and read as an awkward sliding dot. The static ball at
   the top + peg grid + slot bins below communicates plinko fine
   at a glance. (Real-physics simulation would need JS + canvas;
   that's beyond what this card needs to do.) */

/* ---- Upgrader scene anims — PRIZE SHOWCASE -------------------
   Prize rotates slowly in place (presentation/lazy-Susan motion)
   while the progress ring sweeps. The Dominus image is the focal
   point — clean Y-axis rotation only, no bobbing. */
.gc-scene-upgrader .up-prize-grp{
  transform-origin:112px 130px;
  animation: gcUpgraderShowcase 4s ease-in-out infinite;
}
@keyframes gcUpgraderShowcase{
  0%,100%{ transform: scale(1)    rotate(-6deg) translateY(0) }
  50%   { transform: scale(1.06) rotate(6deg)  translateY(-4px) }
}
.gc-scene-upgrader .up-ring-fill{
  transform-origin:112px 130px;
  animation: gcUpgraderRing 5s linear infinite;
  stroke-dasharray: 100 290;
}
@keyframes gcUpgraderRing{
  0%   { stroke-dasharray: 30 360;  stroke-dashoffset: 0    }
  100% { stroke-dasharray: 360 30;  stroke-dashoffset: -390 }
}
.gc-scene-upgrader .up-rays{
  transform-origin:112px 130px;
  animation: gcUpgraderRays 16s linear infinite;
}
@keyframes gcUpgraderRays{
  to{ transform: rotate(360deg) }
}

/* prefers-reduced-motion: reduce — accessibility-respecting motion
   pause. ONLY pause purely-decorative ambient (twinkle, idle particle
   loops). Brand-identity centerpiece animations (rocket flying,
   cards dealing, reels spinning, dice tumbling, bomb shaking, bolt
   strike, prize showcasing, coin flipping) are LEFT ALIVE — they're
   how each game communicates its identity at a glance. iOS Safari
   has Reduce Motion ON by default for many users; nuking the
   centerpiece anims left every card looking like a static screenshot
   on iPhone (this was the user's "it's not animated on mobile"
   complaint, same root cause as the iOS Reduce Motion bug we hit
   in the crash game weeks ago — fix is identical: be selective
   about WHICH motion gets muted, don't blanket-kill everything). */
@media (prefers-reduced-motion: reduce){
  .gc-scene .star-twink,
  .gc-scene-blackjack .suit-twink text{
    animation:none;
  }
}

.art-rocket{animation:rocketFloat 3s ease-in-out infinite}
@keyframes rocketFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.rk-flame-grp{transform-origin:100px 175px;animation:flameWobble .25s steps(4) infinite}
@keyframes flameWobble{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.2)}}
.art-cards{animation:cardsHover 4s ease-in-out infinite}
@keyframes cardsHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.art-slots{animation:bobble 3s ease-in-out infinite}
.art-chest{animation:bobble 3s ease-in-out infinite -1s}
.art-dice{animation:diceRoll 5s ease-in-out infinite}
@keyframes diceRoll{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg) translateY(-4px)}75%{transform:rotate(5deg) translateY(-4px)}}
.art-mine{animation:bobble 3s ease-in-out infinite -.5s}

/* ============================================================
   BIG WINS
============================================================ */
.big-wins{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.bw-card{
  display:flex;align-items:center;gap:12px;
  padding:14px;border-radius:14px;
  background:linear-gradient(135deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-2);
  transition:transform .25s cubic-bezier(.2,.8,.25,1), border-color .25s, box-shadow .25s;
}
.bw-card:hover{transform:translateY(-3px);border-color:var(--pink);box-shadow:0 8px 24px rgba(59,130,246,.25)}
.bw-avatar{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;border:2px solid rgba(255,255,255,.2);
  box-shadow:0 4px 12px rgba(0,0,0,.4);flex-shrink:0;
}
.bw-info{flex:1;min-width:0}
.bw-info .bw-name{font-family:'Inter';font-weight:700;font-size:15px;color:var(--text)}
.bw-info .bw-game{font-size:13px;color:var(--text-mute)}
.bw-amount{font-family:'Sora';font-weight:400;font-size:18px;color:var(--green)}

/* ============================================================
   GAME SHELL
============================================================ */
/* Liquid-glass shell — translucent base + subtle inner highlights + blur
   so the bg orbs/grid show through faintly. Replaces the solid surface look. */
.game-shell{
  position:relative;
  background:
    linear-gradient(135deg, rgba(16,20,42,.55), rgba(10,14,30,.45));
  border:1px solid rgba(255,255,255,.08);border-radius:24px;
  padding:24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(59,130,246,.04),
    var(--shadow-panel);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  max-width:none;width:100%;margin:0;
  overflow:hidden;
}
.game-shell::before{
  /* Liquid sheen — soft pink/orange highlight that drifts across the top edge. */
  content:"";position:absolute;left:-20%;right:-20%;top:0;height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(59,130,246,.6) 25%, rgba(59,130,246,.5) 75%, transparent 100%);
  opacity:.45;pointer-events:none;
}
.game-shell::after{
  /* Subtle radial glow that "breathes" — gives the panel life without being noisy. */
  content:"";position:absolute;inset:-40%;
  background:radial-gradient(ellipse 60% 40% at 30% 0%, rgba(59,130,246,.08), transparent 60%),
             radial-gradient(ellipse 60% 40% at 70% 100%, rgba(29,78,216,.07), transparent 60%);
  pointer-events:none;z-index:0;
}
.game-shell > *{position:relative;z-index:1}

/* ============================================================
   GAME GUIDE — collapsible "How to play" panel under each game
============================================================ */
/* ============================================================
   GAME GUIDES — collapsible "How it works" strips at the bottom
   of every game page. Old design used a "?" pill icon and dense
   columns. New design: animated game thumbnail (lifted from the
   game-header SVG so it's a real image, not a glyph), three
   numbered sections (Rules / Tips / Payouts) with clean typography,
   per-game accent colors picked from GAME_COLORS in app.js so each
   guide reads as part of its game's brand.
============================================================ */
.game-guide{
  --gg-accent: rgba(59,130,246,.55);
  --gg-accent-soft: rgba(59,130,246,.10);
  margin-top:24px;
  border-radius:20px;
  background:
    radial-gradient(ellipse 360px 160px at 0% 0%, var(--gg-accent-soft), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  position:relative;
  transition:border-color .25s, box-shadow .25s;
}
.game-guide:hover{border-color:rgba(255,255,255,.12)}
.game-guide.open{
  border-color:var(--gg-accent);
  box-shadow:0 8px 30px rgba(0,0,0,.25), 0 0 0 1px var(--gg-accent-soft);
}
.game-guide::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--gg-accent), transparent);
  opacity:.6;
}

/* Per-game accent colors — drives the thumbnail glow, the section number
   gradient, and the open-state border. */
.game-guide.gg-crash    {--gg-accent:rgba(59,130,246,.6); --gg-accent-soft:rgba(59,130,246,.12)}
.game-guide.gg-bj       {--gg-accent:rgba(59,130,246,.6);  --gg-accent-soft:rgba(59,130,246,.12)}
.game-guide.gg-slots    {--gg-accent:rgba(255,170,58,.6);  --gg-accent-soft:rgba(255,170,58,.12)}
.game-guide.gg-dice     {--gg-accent:rgba(59,130,246,.6);  --gg-accent-soft:rgba(59,130,246,.12)}
.game-guide.gg-mines    {--gg-accent:rgba(95,232,212,.6);  --gg-accent-soft:rgba(95,232,212,.12)}
.game-guide.gg-limbo    {--gg-accent:rgba(59,130,246,.6);  --gg-accent-soft:rgba(59,130,246,.12)}
.game-guide.gg-plinko   {--gg-accent:rgba(59,130,246,.6);  --gg-accent-soft:rgba(59,130,246,.12)}
.game-guide.gg-upgrader {--gg-accent:rgba(29,78,216,.6);  --gg-accent-soft:rgba(29,78,216,.12)}

/* ---- Header (clickable) ---- */
.gg-head{
  display:flex;align-items:center;gap:16px;
  width:100%;
  padding:18px 22px;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
  color:var(--text);
  font-family:inherit;
  transition:background .25s;
}
.gg-head:hover{background:rgba(255,255,255,.025)}
.gg-head:focus-visible{outline:2px solid var(--gg-accent); outline-offset:-2px}

.gg-thumb{
  flex-shrink:0;
  width:64px; height:64px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 60% 60% at 50% 30%, var(--gg-accent-soft), transparent 70%),
    rgba(10,8,11,.55);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 24px var(--gg-accent-soft);
  position:relative;
  overflow:hidden;
}
.gg-thumb svg, .gg-thumb .gh-svg{
  width:42px; height:42px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
/* Subtle radial glow that pulses behind the thumb */
.gg-thumb::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 40% at 50% 100%, var(--gg-accent-soft), transparent 70%);
  pointer-events:none;
  animation:ggThumbGlow 4s ease-in-out infinite;
}
@keyframes ggThumbGlow{
  0%,100%{opacity:.5}
  50%{opacity:1}
}
.game-guide.open .gg-thumb{
  border-color:var(--gg-accent);
}

.gg-title-block{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.gg-eyebrow{
  font-family:'Inter',sans-serif;
  font-size:12px; font-weight:800; letter-spacing:.18em;
  color:var(--text-mute, #5a3030);
  text-transform:uppercase;
  opacity:.85;
}
.gg-title{
  font-family:'Sora',sans-serif;
  font-weight:700; font-size:20px;
  color:#fff;
  letter-spacing:-.005em;
  line-height:1.2;
}
.gg-subtitle{
  font-family:'Inter',sans-serif;
  font-size:14px; font-weight:600;
  color:var(--text-dim, #b6c0e4);
  letter-spacing:.01em;
}

.gg-cta{
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-family:'Inter',sans-serif;
  font-weight:700; font-size:13px; letter-spacing:.06em;
  color:var(--text-dim, #b6c0e4);
  text-transform:uppercase;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.gg-head:hover .gg-cta{
  background:var(--gg-accent-soft);
  border-color:var(--gg-accent);
  color:#fff;
  transform:translateX(2px);
}
.gg-cta-chev{
  display:inline-block;
  font-size:18px; line-height:1;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.game-guide.open .gg-cta-chev{transform:rotate(90deg)}
.game-guide.open .gg-cta{
  background:var(--gg-accent-soft);
  border-color:var(--gg-accent);
  color:#fff;
}
.game-guide.open .gg-cta .gg-cta-text::before{
  content:"Hide ";
}
.game-guide.open .gg-cta .gg-cta-text{
  font-size:0; /* hide original text, show "Hide" via ::before */
  letter-spacing:0;
}
.game-guide.open .gg-cta .gg-cta-text::before{
  font-size:13px; letter-spacing:.06em;
}

/* ---- Body ---- */
.gg-body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1);
}
.game-guide.open .gg-body{grid-template-rows:1fr}
.gg-body-inner{overflow:hidden; min-height:0}
.gg-content{
  padding:0 22px 22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "rules    tips"
    "payouts  payouts";
  gap:18px;
}
.gg-section-rules    {grid-area:rules}
.gg-section-tips     {grid-area:tips}
.gg-section-payouts  {grid-area:payouts}
@media (max-width:760px){
  .gg-content{
    grid-template-columns:1fr;
    grid-template-areas:"rules" "tips" "payouts";
    gap:14px;
  }
}
.gg-section{
  padding:16px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border:1px solid rgba(255,255,255,.05);
}
.gg-section h4{
  display:flex; align-items:center; gap:10px;
  font-family:'Sora',sans-serif;
  font-weight:600; font-size:15px;
  color:#fff;
  margin:0 0 12px;
  letter-spacing:0;
  text-transform:none;
}
.gg-section-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  border-radius:8px;
  background:linear-gradient(135deg, var(--gg-accent), rgba(255,255,255,.1));
  color:#fff;
  font-family:'JetBrains Mono','Sora',monospace;
  font-weight:700; font-size:13px;
  letter-spacing:0;
  box-shadow:0 0 12px var(--gg-accent-soft);
}
.gg-list{
  list-style:none;
  padding:0; margin:0;
  counter-reset:gg-step;
}
.gg-list li{
  position:relative;
  padding:6px 0 6px 22px;
  font-family:'Inter',sans-serif;
  font-weight:500; font-size:13.5px;
  line-height:1.55;
  color:var(--text-dim, #b6c0e4);
}
.gg-list li::before{
  content:"";
  position:absolute; left:0; top:13px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gg-accent);
  box-shadow:0 0 8px var(--gg-accent-soft);
}
.gg-list li strong{color:#fff; font-weight:700}
.gg-list li em{color:#fff; font-style:normal; font-weight:600}

.gg-payouts{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:8px;
}
.gg-payout-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  font-family:'Inter',sans-serif;
  font-weight:700; font-size:14px;
  transition:transform .12s, border-color .12s, background .12s;
}
.gg-payout-row:hover{
  transform:translateY(-1px);
  border-color:var(--gg-accent);
  background:var(--gg-accent-soft);
}
.gg-payout-row .gg-pay-label{color:var(--text-dim, #b6c0e4); letter-spacing:.02em}
.gg-payout-row .gg-pay-mult{
  color:#fff;
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

@media (max-width:560px){
  .gg-head{padding:14px 16px; gap:12px}
  .gg-thumb{width:52px; height:52px}
  .gg-thumb svg, .gg-thumb .gh-svg{width:34px; height:34px}
  .gg-title{font-size:17px}
  .gg-subtitle{font-size:13px}
  .gg-cta-text{display:none}
  .gg-cta{padding:8px 10px; min-width:34px}
  .gg-content{padding:0 16px 16px}
}
.game-header{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin-bottom:24px;padding:22px 22px 24px;gap:10px;
  border-radius:18px;
  background:
    radial-gradient(ellipse 380px 160px at 50% 0%, rgba(59,130,246,.18), transparent 70%),
    radial-gradient(ellipse 360px 140px at 50% 100%, rgba(29,78,216,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 6px 18px rgba(0,0,0,.3);
  text-align:center;
}
/* Compact variant — used for game routes where the EOS row + live multi
   already serve as the visual header. Avoids stealing 250px of vertical
   space with a redundant title block. */
.game-header.gh-compact{
  flex-direction:row;justify-content:space-between;align-items:center;
  padding:10px 16px;
  margin-bottom:14px;
  gap:12px;
  text-align:left;
}
.gh-compact .game-title{font-size:20px;letter-spacing:.04em;animation:none;filter:none}
.gh-compact .fair-pill{margin-left:auto}
/* Per-game animated icon — small, sits inline with the title. */
.gh-compact .gh-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex-shrink:0;
  filter:drop-shadow(0 0 10px rgba(59,130,246,.45)) drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.gh-compact .gh-icon svg{width:100%;height:100%;display:block;overflow:visible}
.gh-compact .gh-rocket-grp{
  transform-origin:24px 22px;transform-box:fill-box;
  animation:ghCompactBob 3.2s ease-in-out infinite;
}
@keyframes ghCompactBob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%    {transform:translateY(-3px) rotate(2deg)}
}
.gh-compact .gh-rocket-flame{
  transform-origin:24px 38px;transform-box:fill-box;
  animation:ghCompactFlame .25s ease-in-out infinite alternate;
}
@keyframes ghCompactFlame{
  from{transform:scaleY(.85) scaleX(.92)}
  to  {transform:scaleY(1.1)  scaleX(1.05)}
}
.game-header::before{
  /* soft drifting ambient glow */
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(circle 200px at 30% 50%, rgba(255,108,174,.16), transparent 70%),
    radial-gradient(circle 200px at 70% 50%, rgba(29,78,216,.16), transparent 70%);
  filter:blur(20px);
  animation:bgDriftA 14s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
.game-header::after{
  /* subtle pink underline accent — softer than the rainbow strip */
  content:"";position:absolute;left:50%;bottom:0;
  width:160px;height:2px;transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(59,130,246,.55), transparent);
  pointer-events:none;z-index:0;
}
/* Game titles ("Crash", "Blackjack", etc.) hidden site-wide per
   2026-05-19 polish — the nav tab + game art already say which game
   you're on, so the giant h2 was just shouting the same word again.
   Kept the element in the DOM so any code that reads it still works. */
.game-title{ display: none !important; }

/* =========== animated game art (per-game) =========== */
.gh-art{
  position:relative;z-index:1;
  width:96px;height:96px;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 0 18px rgba(59,130,246,.35)) drop-shadow(0 4px 10px rgba(0,0,0,.45));
  animation:ghArtFloat 4.5s ease-in-out infinite;
}
@keyframes ghArtFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.gh-svg{width:100%;height:100%;display:block;overflow:visible}

/* sparkle dots that twinkle on every header */
.gh-spark{transform-origin:center;transform-box:fill-box;animation:ghSparkle 2.4s ease-in-out infinite}
.gh-spark-a{animation-delay:-0s}
.gh-spark-b{animation-delay:-.6s}
.gh-spark-c{animation-delay:-1.2s}
.gh-spark-d{animation-delay:-1.8s}
@keyframes ghSparkle{
  0%,100%{opacity:.2;transform:scale(.6)}
  50%{opacity:1;transform:scale(1.4)}
}

/* status pill is no longer shown in the header — it lives off-screen but stays
   in the DOM so existing JS can keep updating its text/className without errors */
.game-header .game-status{
  position:absolute;left:-9999px;top:-9999px;
  pointer-events:none;
}

/* ----- Crash: rocket bobs + flame flickers ----- */
.gh-svg-rocket .gh-rocket-grp{
  transform-origin:40px 40px;transform-box:fill-box;
  animation:ghRocketBob 1.6s ease-in-out infinite;
}
.gh-svg-rocket .gh-rocket-flame{
  transform-origin:40px 60px;transform-box:fill-box;
  animation:ghFlameFlicker .26s ease-in-out infinite alternate;
}
@keyframes ghRocketBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes ghFlameFlicker{
  from{transform:scaleY(.85) scaleX(1.1);opacity:.85}
  to  {transform:scaleY(1.15) scaleX(.92);opacity:1}
}

/* ----- Blackjack: cards rock back and forth ----- */
.gh-svg-cards .gh-card-back{
  transform-origin:33px 47px;transform-box:fill-box;
  animation:ghCardRockA 3.2s ease-in-out infinite;
}
.gh-svg-cards .gh-card-front{
  transform-origin:51px 37px;transform-box:fill-box;
  animation:ghCardRockB 3.2s ease-in-out infinite;
}
@keyframes ghCardRockA{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(-4deg)}}
@keyframes ghCardRockB{0%,100%{transform:rotate(8deg)}50%{transform:rotate(2deg)}}

/* ----- Slots: reels spin/blur cycle ----- */
.gh-svg-slots .gh-reel{transform-origin:center;transform-box:fill-box}
.gh-svg-slots .gh-reel-1{animation:ghReelSpin 1.8s ease-in-out infinite}
.gh-svg-slots .gh-reel-2{animation:ghReelSpin 1.8s ease-in-out infinite -.3s}
.gh-svg-slots .gh-reel-3{animation:ghReelSpin 1.8s ease-in-out infinite -.6s}
@keyframes ghReelSpin{
  0%,80%,100%{transform:translateY(0);opacity:1}
  20%,60%{transform:translateY(-4px);opacity:.7}
}

/* ----- Dice: tumble in place ----- */
.gh-svg-dice .gh-die-blue{
  transform-origin:22px 38px;transform-box:fill-box;
  animation:ghDieTumbleA 3s ease-in-out infinite;
}
.gh-svg-dice .gh-die-red{
  transform-origin:56px 52px;transform-box:fill-box;
  animation:ghDieTumbleB 3s ease-in-out infinite -.4s;
}
@keyframes ghDieTumbleA{
  0%,100%{transform:rotate(-8deg) translateY(0)}
  50%{transform:rotate(8deg) translateY(-3px)}
}
@keyframes ghDieTumbleB{
  0%,100%{transform:rotate(10deg) translateY(0)}
  50%{transform:rotate(-6deg) translateY(-3px)}
}

/* ----- Mines: spark on fuse + bomb wobble ----- */
.gh-svg-mine .gh-mine-grp{
  transform-origin:40px 50px;transform-box:fill-box;
  animation:ghMineWobble 2.4s ease-in-out infinite;
}
.gh-svg-mine .gh-mine-spark{
  transform-origin:40px 9px;transform-box:fill-box;
  animation:ghMineSparkle .35s ease-in-out infinite alternate;
}
@keyframes ghMineWobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes ghMineSparkle{
  from{transform:scale(.85);opacity:.7}
  to  {transform:scale(1.25);opacity:1}
}

/* ----- Limbo: line draws from bottom-left to top-right repeatedly ----- */
.gh-svg-limbo .gh-limbo-line{
  animation:ghLimboDraw 3s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(59,130,246,.7));
}
.gh-svg-limbo .gh-limbo-star{
  transform-origin:72px 12px;transform-box:fill-box;
  animation:ghLimboStar 3s ease-in-out infinite;
}
.gh-svg-limbo .gh-limbo-x{
  animation:ghLimboNumber 3s ease-in-out infinite;
}
@keyframes ghLimboDraw{
  0%{stroke-dashoffset:120}
  60%{stroke-dashoffset:0}
  85%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:.2}
}
@keyframes ghLimboStar{
  0%,55%{transform:scale(.4);opacity:0}
  62%{transform:scale(1.4);opacity:1}
  85%{transform:scale(1);opacity:1}
  100%{transform:scale(1);opacity:0}
}
@keyframes ghLimboNumber{
  0%,55%{opacity:0}
  70%,90%{opacity:1}
  100%{opacity:0}
}

/* ----- Plinko: ball drops repeatedly through pegs ----- */
.gh-svg-plinko .gh-plinko-ball{
  transform-origin:center;transform-box:fill-box;
  animation:ghPlinkoBall 2.4s cubic-bezier(.4,1.6,.6,1) infinite;
  filter:drop-shadow(0 0 4px rgba(255,217,0,.8));
}
.gh-svg-plinko .gh-pegs circle{animation:ghPegFlash 2.4s ease-in-out infinite}
.gh-svg-plinko .gh-pegs circle:nth-child(2){animation-delay:.2s}
.gh-svg-plinko .gh-pegs circle:nth-child(3){animation-delay:.3s}
.gh-svg-plinko .gh-pegs circle:nth-child(5){animation-delay:.5s}
.gh-svg-plinko .gh-pegs circle:nth-child(6){animation-delay:.7s}
.gh-svg-plinko .gh-pegs circle:nth-child(8){animation-delay:.9s}
.gh-svg-plinko .gh-pegs circle:nth-child(9){animation-delay:1.1s}
@keyframes ghPlinkoBall{
  0%   {transform:translate(0,0)}
  20%  {transform:translate(-6px,16px)}
  40%  {transform:translate(4px,30px)}
  60%  {transform:translate(-4px,42px)}
  80%  {transform:translate(6px,52px)}
  100% {transform:translate(0,0);opacity:0}
}
@keyframes ghPegFlash{
  0%,100%{fill:rgba(255,255,255,.5)}
  50%{fill:#dbeafe;filter:drop-shadow(0 0 4px #3B82F6)}
}

/* ----- Upgrader: arc fills, pointer ticks ----- */
.gh-svg-upgrader .gh-up-arc{
  stroke-dasharray:175.93;
  stroke-dashoffset:175.93;
  animation:ghUpgraderFill 3s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(59,130,246,.6));
}
.gh-svg-upgrader .gh-up-pointer{
  transform-origin:40px 40px;transform-box:fill-box;
  animation:ghUpgraderTick 3s ease-in-out infinite;
}
@keyframes ghUpgraderFill{
  0%{stroke-dashoffset:175.93}
  60%{stroke-dashoffset:44}
  100%{stroke-dashoffset:175.93}
}
@keyframes ghUpgraderTick{
  0%,100%{transform:rotate(0deg)}
  60%{transform:rotate(270deg)}
}

/* ----- Affiliate: coins float up ----- */
.gh-svg-affiliate .gh-aff-coin{transform-origin:center;transform-box:fill-box}
.gh-svg-affiliate .gh-aff-coin-1{animation:ghAffCoin 2.4s ease-in-out infinite}
.gh-svg-affiliate .gh-aff-coin-2{animation:ghAffCoin 2.4s ease-in-out infinite -.4s}
.gh-svg-affiliate .gh-aff-coin-3{animation:ghAffCoin 2.4s ease-in-out infinite -.8s}
.gh-svg-affiliate .gh-aff-people{
  transform-origin:40px 36px;transform-box:fill-box;
  animation:ghAffPeople 3s ease-in-out infinite;
}
@keyframes ghAffCoin{
  0%   {transform:translateY(8px) scale(.7);opacity:0}
  35%  {opacity:1}
  100% {transform:translateY(-12px) scale(1);opacity:0}
}
@keyframes ghAffPeople{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

@media (max-width:760px){
  .game-header{padding:18px 14px 20px}
  .game-title{font-size:32px}
  .gh-art{width:78px;height:78px}
}
.game-status{
  font-family:'Inter';font-weight:700;font-size:14px;letter-spacing:1.5px;
  padding:8px 16px;border-radius:99px;
  background:linear-gradient(135deg, rgba(59,130,246,.2), rgba(59,130,246,.05));
  border:1px solid rgba(59,130,246,.5);color:var(--green);
}
.game-status.danger{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(59,130,246,.05));border-color:rgba(59,130,246,.5);color:#3B82F6}
.game-status.win{background:linear-gradient(135deg,rgba(255,217,0,.2),rgba(255,217,0,.05));border-color:rgba(255,217,0,.5);color:var(--gold)}
/* Flash pulse when the status text changes — applied via a tiny
   MutationObserver in app.js so PLACE BET → IN FLIGHT → CRASHED
   (and similar transitions on every game) get a visible pop
   instead of silently snapping to new text. */
.game-status.game-status-flash{ animation: gameStatusFlash .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes gameStatusFlash{
  0%   { transform: scale(1)    }
  50%  { transform: scale(1.10); filter: brightness(1.25) }
  100% { transform: scale(1)    }
}

.control-group label{
  display:block;font-family:'Inter';font-weight:700;font-size:13px;letter-spacing:2px;
  color:var(--text-mute);margin-bottom:8px;
}
.bet-input{
  display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(59,130,246,.18);border-radius:12px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s, box-shadow .2s;
}
.bet-input:focus-within{
  border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(59,130,246,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.bet-input input{
  flex:1 1 100%;
  min-width:0;
  /* Take the full row so any digit count fits cleanly. The hitcoin
     glyph + action buttons sit on the next wrap line. */
  width:100%;
  background:transparent;border:none;outline:none;
  color:var(--text);font-family:'Inter';font-weight:700;font-size:18px;
  text-overflow:ellipsis;
  font-variant-numeric: tabular-nums;
  letter-spacing:.005em;
  transition:color .25s, text-shadow .25s;
}
/* Inline hitcoin glyph + action buttons share a second row under the
   input so the value field always has its own clean line. */
.bet-input .bcoin-icon{ order: 2; }
.bet-input button[data-bet-action]{ order: 3; }
.bet-input > *:not(input){ flex-shrink: 0; }
.bet-input input.bet-input-bump{
  animation:betInputBump .32s cubic-bezier(.34,1.56,.64,1);
  color:#3B82F6;text-shadow:0 0 12px rgba(255,217,0,.7);
}
@keyframes betInputBump{
  0%{transform:scale(1)}
  45%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
.bet-input button{
  background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.3);color:var(--pink);
  font-family:'Inter';font-weight:700;font-size:13px;
  padding:4px 10px;border-radius:99px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  transition:background .2s, color .2s, transform .15s, box-shadow .25s;
}
.bet-input button:hover{background:var(--pink);color:#fff;border-color:#fff;box-shadow:0 0 10px rgba(59,130,246,.55)}
.bet-input button:active{transform:scale(.9);background:var(--pink-deep);color:#fff}
.bet-input button.bet-action-flash{
  animation:betActionFlash .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes betActionFlash{
  0%{transform:scale(1);box-shadow:0 0 0 rgba(59,130,246,0)}
  40%{transform:scale(1.18);box-shadow:0 0 22px rgba(255,217,0,.85), 0 0 40px rgba(59,130,246,.5);background:#3B82F6;color:#5b2640}
  100%{transform:scale(1);box-shadow:0 0 0 rgba(59,130,246,0)}
}
.suffix{color:var(--text-mute);font-family:'Inter';font-weight:700}

.history-bar{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  margin-top:18px;min-height:48px;
}
.hist-item{
  font-family:'Inter';font-weight:700;font-size:14px;
  padding:6px 14px;border-radius:99px;
  background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3);color:var(--pink);
}
.hist-item.low{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.4);color:#3B82F6}
.hist-item.high{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.4);color:var(--green)}
.hist-item.huge{background:linear-gradient(135deg,#3B82F6,#3B82F6);border-color:transparent;color:#000}

/* ============================================================
   CRASH — multi-player overlay (EOS row, history bar, players panel)
============================================================ */
.history-bar-top{margin:0 0 14px;max-width:none}

/* Two-column layout: bet controls + players list on the LEFT,
   big rocket board on the RIGHT. Stacks on narrow viewports. */
.crash-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:18px;align-items:start;
  margin-bottom:18px;
}
.crash-left{display:flex;flex-direction:column;gap:14px;min-width:0}
.crash-right{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:980px){
  .crash-layout{grid-template-columns:1fr}
}

.crash-eos-row{
  margin:0 0 4px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.crash-eos-block{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:10px;
  background:linear-gradient(135deg, rgba(29,78,216,.22), rgba(59,130,246,.1));
  border:1px solid rgba(29,78,216,.35);
  font-family:'JetBrains Mono','Sora',monospace;
}
.ceb-label{
  font-family:'Sora';font-weight:800;font-size:12px;letter-spacing:.18em;
  color:#1D4ED8;
}
.ceb-num{
  font-family:'JetBrains Mono',monospace;font-weight:600;font-size:15px;
  color:#fff;letter-spacing:.02em;
}
.crash-network{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:10px;
  background:rgba(0,0,0,.28);
  border:1px solid var(--line-2);
  font-family:'Sora';font-weight:700;font-size:13px;letter-spacing:.12em;
  color:var(--text-dim);
}
.cn-dot{width:8px;height:8px;border-radius:50%;background:#3B82F6;box-shadow:0 0 8px #3B82F6;animation:cnPulse 1.6s ease-in-out infinite}
.crash-network[data-status="down"] .cn-dot{background:#3B82F6;box-shadow:0 0 8px #3B82F6}
.crash-network[data-status="waiting"] .cn-dot{background:#3B82F6;box-shadow:0 0 8px #3B82F6}
@keyframes cnPulse{0%,100%{opacity:.7}50%{opacity:1}}
.crash-fairness{
  margin-left:auto;
  padding:8px 14px;font-size:13px;letter-spacing:.12em;
}


.crash-phase-pill{
  position:absolute;left:16px;top:14px;z-index:9;
  display:flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:99px;
  background:rgba(10,14,28,.72);
  border:1px solid rgba(59,130,246,.4);
  font-family:'Sora';font-weight:700;font-size:13px;letter-spacing:.12em;
  color:#dbeafe;
  backdrop-filter:blur(10px) saturate(140%);
}
.cph-dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);animation:cphPulse 1.4s ease-in-out infinite}
@keyframes cphPulse{0%,100%{opacity:.65}50%{opacity:1}}
.crash-phase-pill[data-phase="flight"] .cph-dot{background:#3B82F6;box-shadow:0 0 10px #3B82F6}
.crash-phase-pill[data-phase="crashed"] .cph-dot{background:#ef4444;box-shadow:0 0 10px #ef4444}
.crash-round-badge{
  position:absolute;right:16px;top:14px;z-index:9;
  padding:6px 12px;border-radius:99px;
  background:rgba(10,14,28,.72);
  border:1px solid rgba(255,255,255,.18);
  font-family:'Sora';font-weight:800;font-size:14px;letter-spacing:.08em;
  color:#dbe5f5;
  backdrop-filter:blur(10px);
}

/* Players panel — liquid-glass card matching the game-shell aesthetic. */
.crash-players{
  position:relative;
  width:100%;margin:0;
  padding:14px 16px;border-radius:14px;
  background:linear-gradient(180deg, rgba(16,20,42,.45), rgba(10,14,30,.4));
  border:1px solid rgba(59,130,246,.22);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.cp-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;
}
.cp-title{
  font-family:'Sora';font-weight:800;font-size:13px;letter-spacing:.18em;color:#3B82F6;
}
.cp-count{
  font-family:'Sora';font-weight:800;font-size:15px;color:var(--text);
  padding:2px 10px;border-radius:99px;
  background:rgba(59,130,246,.2);border:1px solid rgba(59,130,246,.4);
  min-width:32px;text-align:center;
}
.cp-list{
  display:flex;flex-direction:column;gap:4px;
  max-height:340px;overflow-y:auto;overflow-x:hidden; /* prevent hover-translate pulse */
  padding-right:4px;
  scrollbar-gutter:stable;
}
.cp-list::-webkit-scrollbar{width:6px}
.cp-list::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}
.cp-empty{
  padding:18px 12px;text-align:center;
  font-family:'Inter';font-weight:600;color:var(--text-mute);font-size:14px;
}
/* The row stays single-line with consistent column widths so 100 rows look
   uniform and don't shuffle widths on each poll. */
.cp-row{
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  gap:10px;align-items:center;
  padding:6px 10px;border-radius:8px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.05);
  font-size:12.5px;
  transition:background .2s, border-color .2s;
}
.cp-row.cp-mine{
  background:linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.05));
  border-color:rgba(59,130,246,.45);
  box-shadow:0 0 14px rgba(59,130,246,.25);
}
.cp-row.cp-cashed{border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.06)}
.cp-row.cp-lost{opacity:.5}
.cp-av{
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.18);
  overflow:hidden;background:rgba(0,0,0,.3);
}
.cp-av-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.cp-name{
  font-family:'Inter';font-weight:700;font-size:12.5px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.cp-right{
  display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;
  font-family:'Sora';font-weight:700;font-size:14px;
}
.cp-bet{color:var(--text-dim)}
.cp-auto{
  font-family:'Inter';font-weight:600;font-size:12px;
  padding:1px 7px;border-radius:99px;
  background:rgba(29,78,216,.18);color:#67E8F9;
  border:1px solid rgba(29,78,216,.4);
}
.cp-multi{font-weight:800}
.cp-multi.cp-cashed{color:#28c76f;text-shadow:0 0 8px rgba(40,199,111,.5)}
.cp-multi.cp-lost{color:#3B82F6}
.cp-payout{font-weight:800}
.cp-payout.cp-win{color:#28c76f}
.cp-payout.cp-loss{color:#3B82F6}

@media (min-width:1080px){
  .cp-list{max-height:480px}
}

/* Disabled-state action button (e.g. while waiting for next round). */
.crash-bet-btn.btn-disabled{
  opacity:.55;cursor:not-allowed;
  background:linear-gradient(135deg, var(--surface-2), var(--surface));
}

.crash-board{
  position:relative;
  width:100%;
  aspect-ratio:16 / 11;
  min-height:480px;
  max-height:660px;
  margin:0;
  border-radius:18px;
  border:1px solid var(--line-2);
  overflow:hidden;
  background:#04061a;
}
.crash-board.shake{animation:boardShake .35s cubic-bezier(.36,.07,.19,.97)}
@keyframes boardShake{
  0%,100%{transform:translate(0)}
  10%,30%,50%,70%,90%{transform:translate(-4px,2px)}
  20%,40%,60%,80%{transform:translate(4px,-2px)}
}

/* layered scrolling sky */
.crash-sky{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 600px 300px at 50% 100%, rgba(59,130,246,.18), transparent 70%),
    radial-gradient(ellipse 500px 400px at 50% -10%, rgba(29,78,216,.18), transparent 70%),
    linear-gradient(180deg,#04061a 0%, #0a0e30 40%, #1a0942 80%, #2a0e5a 100%);
}
/* Two parallax star layers — scroll faster as multi grows. The previous
   implementation stacked 12 radial-gradient images PER LAYER, which makes
   the browser re-rasterize the area on every scroll frame because gradient
   backgrounds aren't always tile-cached. Switched to a single inline-SVG
   data URI — paints once, gets cached as an image, just translates each
   frame. ~5× cheaper paint cost on Chromium's "Rendering" perf panel.
   `contain: strict` keeps the layer's repaint isolated from the rest of
   the board. */
.crash-stars{
  position:absolute;inset:-100% 0 -100% 0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><circle cx='32' cy='48' r='1.5' fill='%23fff'/><circle cx='88' cy='120' r='1' fill='%23fff'/><circle cx='160' cy='72' r='2' fill='%23ffd4e5'/><circle cx='240' cy='160' r='1' fill='%23fff'/><circle cx='312' cy='88' r='1.5' fill='%23fff'/><circle cx='360' cy='232' r='1' fill='%23fff'/><circle cx='56' cy='280' r='1.5' fill='%23cef0ff'/><circle cx='140' cy='352' r='2' fill='%23fff'/><circle cx='220' cy='300' r='1' fill='%23fff'/><circle cx='300' cy='368' r='1' fill='%23ffd900'/><circle cx='368' cy='336' r='2' fill='%23fff'/><circle cx='20' cy='200' r='1.5' fill='%23ffaecf'/></svg>");
  background-repeat:repeat;
  background-size:400px 400px;
  animation:starsScroll 6s linear infinite;
  will-change:transform;
  contain:strict;
}
.crash-stars-2{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><circle cx='48' cy='80' r='1' fill='rgba(255,255,255,0.6)'/><circle cx='100' cy='260' r='0.5' fill='rgba(255,255,255,0.5)'/><circle cx='200' cy='120' r='1' fill='rgba(255,255,255,0.7)'/><circle cx='280' cy='320' r='0.5' fill='rgba(255,255,255,0.5)'/><circle cx='352' cy='60' r='1' fill='rgba(255,255,255,0.6)'/><circle cx='120' cy='380' r='0.5' fill='rgba(255,255,255,0.5)'/></svg>");
  background-repeat:repeat;
  background-size:400px 400px;
  animation-duration:14s;
  opacity:.7;
}
/* Translate by exactly ONE tile height (400px) so the wrap looks identical
   to the frame before it. Translating 50% of the layer (which is 3× parent
   height) was NOT a multiple of the tile size and produced a visible seam
   every cycle. translate3d gets us a free GPU layer too. */
@keyframes starsScroll{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(0,400px,0)}
}
.crash-board[data-flying="1"] .crash-stars{animation-duration:var(--star-speed,3s)}
.crash-board[data-flying="1"] .crash-stars-2{animation-duration:calc(var(--star-speed,3s) * 2.5)}

/* horizon mountain silhouette */
.crash-mountain{
  position:absolute;left:0;right:0;bottom:0;height:80px;pointer-events:none;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.5)),
    radial-gradient(60px 40px at 10% 100%, #1f1042, transparent 70%),
    radial-gradient(80px 50px at 30% 100%, #2a0e5a, transparent 70%),
    radial-gradient(100px 60px at 65% 100%, #1a0942, transparent 70%),
    radial-gradient(70px 45px at 90% 100%, #2a0e5a, transparent 70%);
  filter:blur(2px);opacity:.7;
}

/* Trajectory curve canvas — the hero visual of the board. Sits above the
   grid/stars (z3) but below the rocket (z5) and the big multiplier (z8) so
   the rocket rides the curve's leading edge and the readout floats on top.
   Drawn per-frame in JS (renderCrashCurve); harmless when the board is
   hidden (0×0 → renderer no-ops). */
#crash-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:3;
  pointer-events:none;
}
/* During flight the rocket is positioned along the curve by JS (inline
   left/top/transform). Kill the CSS keyframes so they don't fight the
   per-frame transform, and drop `bottom` so `top` alone positions it. */
.crash-rocket.crash-rocket--curve{
  animation:none !important;
  bottom:auto;
}

/* Crash multi text — sized + centered consistently. Tightened from
   font-size 56-140px → 48-110px so the number doesn't feel like it
   overflows the rocket's airspace at desktop widths. tabular-nums
   keeps the digits from jiggling as they tick (was visibly jumping
   when going 9.99→10.00 etc.). */
.crash-multiplier{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  font-family:'Sora';font-weight:800;
  font-size:clamp(48px, 7.5vw, 110px);
  color:#fff;line-height:1;
  letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
  filter:drop-shadow(0 0 28px rgba(59,130,246,.7)) drop-shadow(0 10px 20px rgba(0,0,0,.65));
  pointer-events:none;z-index:8;
  transition:color .25s, filter .25s, top .45s cubic-bezier(.22,1,.36,1), font-size .45s cubic-bezier(.22,1,.36,1);
  text-align:center;white-space:nowrap;
  will-change:transform,filter;
}
.crash-multiplier.crashed{
  color:#ef4444;
  filter:drop-shadow(0 0 24px rgba(239,68,68,.9)) drop-shadow(0 0 60px rgba(239,68,68,.5));
  animation:crashTextShake .5s cubic-bezier(.36,.07,.19,.97);
}
/* Locked-in (auto-cashout fired) — green so the player sees the win was
   secured. Was accidentally swept to red by the broad #22ffaa→red pass;
   this is a "you won" cue and stays green for win/loss legibility. */
.crash-multiplier.locked{
  color:#28c76f;
  filter:drop-shadow(0 0 24px rgba(40,199,111,.9)) drop-shadow(0 0 60px rgba(40,199,111,.45));
}
.crash-multiplier.countdown{
  color:#fff;
  font-variant-numeric:tabular-nums;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.25)) drop-shadow(0 6px 12px rgba(0,0,0,.65));
}
/* The EOS block number is much wider than a "0:08" countdown — shrink it
   so #3a0808951 doesn't dwarf the board. Matches the proportional weight
   of a normal multiplier reading. */
.crash-multiplier.countdown.eos-block{
  font-size:clamp(28px, 4.4vw, 64px);
  letter-spacing:0;
  font-weight:700;
  color:#dbeafe;
}
@keyframes crashTextShake{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  20%{transform:translate(calc(-50% - 10px),-50%) scale(1.1) rotate(-4deg)}
  40%{transform:translate(calc(-50% + 10px),-50%) scale(1.1) rotate(4deg)}
  60%{transform:translate(calc(-50% - 6px),-50%) scale(1.1) rotate(-2deg)}
  80%{transform:translate(calc(-50% + 6px),-50%) scale(1.1) rotate(2deg)}
}

/* Rocket — fixed center-bottom, animates idle bobble & shake during flight */
.crash-rocket{
  position:absolute;left:50%;bottom:18%;
  transform:translateX(-50%);
  z-index:5;
  filter:drop-shadow(0 0 16px rgba(59,130,246,.6));
  animation:rocketIdle 2.5s ease-in-out infinite;
  will-change:transform;
}
@keyframes rocketIdle{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-1deg)}
  50%{transform:translateX(-50%) translateY(-6px) rotate(1deg)}
}
.crash-rocket.flying{
  animation:rocketFly .35s ease-in-out infinite;
}
@keyframes rocketFly{
  0%,100%{transform:translateX(-50%) translateY(0)}
  25%{transform:translateX(calc(-50% - 2px)) translateY(-3px)}
  50%{transform:translateX(-50%) translateY(0)}
  75%{transform:translateX(calc(-50% + 2px)) translateY(-3px)}
}
.crash-rocket.exploding{
  animation:rocketExplode .6s cubic-bezier(.32,.72,0,1) forwards;
}
@keyframes rocketExplode{
  0%{transform:translateX(-50%) scale(1) rotate(0);opacity:1;filter:brightness(1) drop-shadow(0 0 16px rgba(59,130,246,.6))}
  30%{transform:translateX(-50%) scale(1.3) rotate(-15deg);opacity:1;filter:brightness(2.5) drop-shadow(0 0 40px #3B82F6)}
  100%{transform:translateX(-50%) scale(.2) rotate(180deg);opacity:0;filter:brightness(3) drop-shadow(0 0 60px #3B82F6)}
}

/* flame trail under rocket */
.crash-flame{
  position:absolute;left:50%;top:100%;transform:translateX(-50%);
  width:34px;height:60px;
  pointer-events:none;
  display:flex;align-items:flex-start;justify-content:center;
  filter:blur(1px);
}
.crash-flame span{
  position:absolute;left:50%;top:0;
  width:24px;height:50px;border-radius:0 0 50% 50%;
  transform-origin:50% 0;
  background:linear-gradient(180deg, #dbeafe 0%, #3B82F6 35%, #3B82F6 70%, transparent 100%);
}
.crash-flame span:nth-child(1){animation:flameInner .12s steps(3) infinite}
.crash-flame span:nth-child(2){animation:flameMid .15s steps(3) infinite -.04s;width:32px;height:64px;opacity:.55}
.crash-flame span:nth-child(3){animation:flameOuter .18s steps(3) infinite -.08s;width:42px;height:78px;opacity:.3;filter:blur(4px)}
@keyframes flameInner{0%,100%{transform:translateX(-50%) scaleY(.85)}50%{transform:translateX(-50%) scaleY(1.15)}}
@keyframes flameMid{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(1.3)}}
@keyframes flameOuter{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(1.45)}}
.crash-rocket:not(.flying):not(.exploding) .crash-flame{opacity:.4}

/* Asteroid — flies in from top-right at crash time */
.crash-asteroid{
  position:absolute;right:-150px;top:-150px;
  z-index:6;opacity:0;
  filter:drop-shadow(0 0 16px rgba(255,170,58,.6));
  pointer-events:none;
}
.crash-asteroid.incoming{
  opacity:1;
  animation:asteroidStrike .5s cubic-bezier(.55,.05,.7,.5) forwards;
}
@keyframes asteroidStrike{
  0%{right:-150px;top:-150px;transform:rotate(0)}
  100%{right:calc(50% - 50px);top:calc(50% - 30px);transform:rotate(540deg)}
}
.crash-asteroid-trail{
  position:absolute;left:-160px;top:50%;
  width:200px;height:6px;
  background:linear-gradient(90deg, transparent, #3B82F6 50%, #fff 80%, #fff 100%);
  transform:translateY(-50%) rotate(35deg);
  opacity:0;
  filter:blur(2px);
}
.crash-asteroid.incoming .crash-asteroid-trail{
  animation:trailFade .5s ease-out forwards;
}
@keyframes trailFade{
  0%{opacity:0;width:0}
  60%{opacity:1;width:240px}
  100%{opacity:0;width:240px}
}

/* explosion */
.crash-explosion{
  position:absolute;left:50%;top:50%;
  width:0;height:0;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,#fff 0%,#3B82F6 25%,#3B82F6 55%,#3B82F6 75%,transparent 90%);
  pointer-events:none;z-index:7;
}
.crash-explosion.boom{animation:bigBoom .8s ease-out forwards}
@keyframes bigBoom{
  0%{width:0;height:0;opacity:1}
  60%{width:480px;height:480px;opacity:.9}
  100%{width:700px;height:700px;opacity:0}
}

/* falling debris pieces */
.crash-debris{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:6}
.debris-piece{
  position:absolute;width:14px;height:14px;border-radius:3px;
  background:linear-gradient(135deg,#fff,#dde6f5);
  box-shadow:0 0 8px rgba(255,170,58,.6);
}
.debris-piece.fall{animation:debrisFall 1.4s cubic-bezier(.4,0,.4,1) forwards}
@keyframes debrisFall{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),300px) rotate(720deg);opacity:0}
}

.crash-controls{display:flex;flex-direction:column;gap:12px;width:100%;margin:0}
.crash-controls .control-group{width:100%}
/* Keep all 4 button-bar items (½ / 2× / MAX) on the same row as the input.
   Previously flex-wrap:wrap pushed MAX to its own line on narrow viewports;
   now we tighten input min-width + button padding so they always fit. */
.crash-controls .bet-input{flex-wrap:nowrap;row-gap:0}
.crash-controls .bet-input input{min-width:60px;flex:1 1 80px}
.crash-controls .bet-input button{flex-shrink:0;padding:6px 10px;font-size:13px}
.crash-controls .crash-bet-btn{width:100%;margin-top:4px}
.crash-controls > .btn{grid-column:1 / -1;width:100%;height:54px;font-size:15px;letter-spacing:.18em;margin-top:4px}
.crash-bet-btn{height:54px}

/* ============================================================
   MINES
============================================================ */
.mines-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start;max-width:840px;margin:0 auto}
.mines-panel{display:flex;flex-direction:column;gap:14px}
.mines-panel > .btn{height:54px;font-size:16px;letter-spacing:.16em}
@media (max-width:760px){.mines-layout{grid-template-columns:1fr}}
.mines-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  aspect-ratio:1;padding:14px;
  width:100%;max-width:520px;margin:0 auto;
  background:linear-gradient(135deg,var(--bg-2),var(--bg-0));
  border:1px solid var(--line-2);border-radius:18px;
}
.mine-tile{font-size:32px}
.mine-tile{
  aspect-ratio:1;
  background:linear-gradient(145deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2);border-radius:14px;cursor:pointer;
  position:relative;
  transition:transform .25s cubic-bezier(.2,.8,.25,1), border-color .25s, box-shadow .25s;
  display:flex;align-items:center;justify-content:center;font-size:36px;
  user-select:none;
  box-shadow:
    0 6px 0 rgba(0,0,0,.35),
    0 8px 16px rgba(0,0,0,.4),
    inset 0 2px 0 rgba(255,255,255,.08);
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;will-change:transform;
}
.mine-tile::before{
  content:"";position:absolute;inset:4px;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 50%);
  pointer-events:none;
}
.mine-tile:hover{
  transform:translateY(-5px) rotateX(8deg);
  border-color:var(--pink);
  box-shadow:0 11px 0 rgba(0,0,0,.35), 0 14px 28px rgba(59,130,246,.35), inset 0 2px 0 rgba(255,255,255,.1);
}
.mine-tile:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.mine-tile.locked{cursor:not-allowed}
.mine-tile.gem{
  /* Was claret/red — shifted to a warm gold-into-claret gradient so
     the tile chrome supports the Hitcoin reveal underneath instead of
     fighting it for color attention. */
  background:linear-gradient(135deg, #fff3c0 0%, #e8a040 45%, #1D4ED8 100%);
  border-color:#7a4010;
  box-shadow:0 4px 0 #2a1808, 0 0 24px rgba(255,217,0,.45);
  animation:tileReveal .45s cubic-bezier(.16,1,.3,1);
}
.mine-tile.bomb{
  background:linear-gradient(135deg,#5b6680,#1a1f30);border-color:#0a0e1a;
  box-shadow:0 4px 0 #0a0e1a, 0 0 24px rgba(59,130,246,.5);
  animation:tileBomb .55s cubic-bezier(.36,.07,.19,.97);
}
.mine-tile.bomb-hit{
  animation:bombHit .7s cubic-bezier(.36,.07,.19,.97);
  z-index:10;
}
@keyframes bombHit{
  0%{transform:scale(1) rotate(0)}
  20%{transform:scale(1.4) rotate(-12deg);box-shadow:0 0 60px #3B82F6, 0 0 120px #3B82F6}
  35%{transform:scale(1.3) rotate(12deg);background:linear-gradient(135deg,#3B82F6,#3B82F6);border-color:#fff}
  60%{transform:scale(.9) rotate(-4deg);filter:brightness(2)}
  100%{transform:scale(1) rotate(0);filter:brightness(1)}
}
@keyframes tileBomb{
  0%{transform:scale(.6);opacity:0}
  60%{transform:scale(1.15);opacity:1}
  100%{transform:scale(1);opacity:1}
}
/* Shockwave under the bombed tile. Originally animated `inset` from
   50% 50% 50% 50% to -200% -200% -200% -200%, which makes the browser
   recompute layout AND repaint the radial-gradient at each new size on
   every frame — the most expensive thing this game does, and the reason
   mines lagged on hit. Switched to a fixed-size pseudo positioned dead
   center, animated via transform: scale() and opacity. transform/opacity
   are GPU-composited only — no layout, no paint, no repaint cost. */
.mine-tile.bomb-hit::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:100px; height:100px;
  margin-left:-50px; margin-top:-50px;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#3B82F6 30%,#3B82F6 60%,transparent 90%);
  transform:scale(0.1);
  opacity:0;
  animation:tileShockwave .7s ease-out forwards;
  pointer-events:none;
  will-change:transform, opacity;
  /* Once the animation finishes the shockwave is gone — promote it to its
     own compositor layer so it doesn't trigger the parent's repaint. */
  transform-origin:center;
}
@keyframes tileShockwave{
  0%  {transform:scale(0.1); opacity:1}
  100%{transform:scale(8);   opacity:0}
}
.mines-grid.shaking{animation:gridShake .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes gridShake{
  0%,100%{transform:translate(0)}
  10%,30%,50%,70%,90%{transform:translate(-3px,2px) rotate(-.4deg)}
  20%,40%,60%,80%{transform:translate(3px,-2px) rotate(.4deg)}
}
.game-shell.shake-shell{animation:shellShake .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes shellShake{
  0%,100%{transform:translate(0)}
  10%,30%,50%,70%,90%{transform:translate(-2px,1px)}
  20%,40%,60%,80%{transform:translate(2px,-1px)}
}

/* Pass 1 — game card per-game gradients are now defined inline with
   the rest of the .gc-* rules at the top of this file (~line 1235).
   The old all-red variants for limbo/plinko/upgrader/coinflip lived
   here and were overriding the new vibrant gradients via cascade
   order. Stripped. */

/* ============================================================
   LIMBO
============================================================ */
.limbo-stage{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  max-width:780px;
  min-height:320px;
  max-height:480px;
  margin:0 auto 16px;
  border-radius:18px;
  /* Stage tint reverted to soft pink — was bright red, made the multi
     reading hard to focus on. */
  background:
    radial-gradient(ellipse at center, rgba(255,109,180,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-0));
  border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.limbo-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
.limbo-glow{
  position:absolute;left:50%;top:50%;
  width:380px;height:380px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(59,130,246,.25), transparent 70%);
  filter:blur(40px);
  transition:background .4s, transform .4s;
  pointer-events:none;
}
.limbo-stage.win .limbo-glow{
  /* Win = green halo (was claret/pink, indistinguishable from loss). */
  background:radial-gradient(circle, rgba(40,199,111,.55), transparent 70%);
  transform:translate(-50%,-50%) scale(1.2);
}
.limbo-stage.loss .limbo-glow{
  background:radial-gradient(circle, rgba(59,130,246,.5), transparent 70%);
}
.limbo-multi{
  font-family:'Sora';font-weight:400;font-size:120px;
  letter-spacing:.02em;color:#fff;
  filter:drop-shadow(0 0 24px rgba(59,130,246,.5)) drop-shadow(0 8px 16px rgba(0,0,0,.6));
  position:relative;z-index:2;
  transition:color .25s;
}
.limbo-stage.win .limbo-multi{
  /* Win = green (was warm pink #3B82F6 — read as red, indistinguishable
     from the loss color, which was the user-reported confusion). */
  color:#28c76f;
  filter:drop-shadow(0 0 32px rgba(40,199,111,.85))
         drop-shadow(0 8px 16px rgba(0,0,0,.55));
  animation:limboWin .6s cubic-bezier(.16,1,.3,1);
}
.limbo-stage.loss .limbo-multi{
  color:#3B82F6;
  filter:drop-shadow(0 0 32px rgba(59,130,246,.7));
  animation:limboShake .35s cubic-bezier(.36,.07,.19,.97);
}
@keyframes limboWin{
  0%{transform:scale(1)}
  50%{transform:scale(1.1)}
  100%{transform:scale(1)}
}
@keyframes limboShake{
  0%,100%{transform:translate(0)}
  20%{transform:translate(-8px,2px) rotate(-2deg)}
  40%{transform:translate(8px,-2px) rotate(2deg)}
  60%{transform:translate(-5px,1px) rotate(-1deg)}
  80%{transform:translate(5px,-1px) rotate(1deg)}
}
.limbo-target-line{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:99px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  border:1px solid rgba(255,217,0,.4);
  font-family:'Inter';font-weight:700;font-size:14px;
  color:var(--text-mute);letter-spacing:.1em;
  z-index:3;
}
.limbo-target-line strong{
  font-family:'Sora';font-weight:400;font-size:18px;color:var(--gold);
  text-shadow:0 0 12px rgba(255,217,0,.5);
}
.limbo-controls{
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px;align-items:end;
  max-width:780px;margin:0 auto;
}
.limbo-controls > .btn{grid-column:1 / -1;width:100%;height:54px;font-size:15px;letter-spacing:.18em;margin-top:4px}
@media (max-width:760px){.limbo-controls{grid-template-columns:1fr 1fr}}
.limbo-info{
  padding:10px 14px;background:rgba(255,255,255,.04);
  border:1px solid var(--line-2);border-radius:12px;
}
.limbo-chance{
  font-family:'Sora';font-weight:400;font-size:20px;color:var(--green);
  letter-spacing:.04em;
}
.limbo-payout{font-family:'Inter';font-weight:700;font-size:13px;color:var(--text-mute);margin-top:2px}

/* ============================================================
   PLINKO
============================================================ */
.plinko-board{
  position:relative;
  width:100%;
  /* lock to a stable aspect ratio so the board looks the same on every screen.
     Bloxflip / Stake plinko boards use roughly this proportion. */
  aspect-ratio:16 / 11;
  max-width:820px;
  min-height:460px;
  max-height:640px;
  margin:0 auto 18px;
  border-radius:22px;
  /* Layered gradient — vignette at the top with a soft pink wash and a
     deeper indigo body. Cleaner and more "casino UI" than the flat panel. */
  /* Plinko table reverted to a pink-on-indigo wash — the all-red version
     made the chips/board hard to track because everything tinted toward
     the same hue. */
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255,109,180,.14), transparent 65%),
    radial-gradient(ellipse 70% 80% at 50% 110%, rgba(124,92,255,.10), transparent 70%),
    linear-gradient(180deg, #1a1c3e 0%, #14163a 50%, #0e1030 100%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -40px 60px rgba(0,0,0,.35),
    0 18px 40px rgba(0,0,0,.4);
  overflow:hidden;
}
#plinko-canvas{
  position:absolute;inset:0;width:100%;height:calc(100% - 56px);
  display:block;
}
.plinko-slots{
  position:absolute;left:0;right:0;bottom:0;
  height:60px;
  display:flex;align-items:stretch;
  padding:8px 18px;gap:4px;
  /* Subtle backdrop so the pills sit on a row that visually anchors them
     instead of floating above the board's bottom edge. */
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 100%);
}
.plinko-slot{
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  font-family:'Sora';font-weight:700;font-size:15px;color:#fff;
  letter-spacing:0;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  /* Pill embossing — top highlight + bottom shadow gives the cell a 3D
     "physical button" feel without being heavy. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 2px 4px rgba(0,0,0,.25);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, filter .15s;
  white-space:nowrap;
  overflow:hidden;
  padding:0 2px;
}
.plinko-slots[data-rows="16"] .plinko-slot{font-size:12px}
.plinko-slots[data-rows="14"] .plinko-slot{font-size:13px}
.plinko-slots[data-rows="12"] .plinko-slot{font-size:14px}
.plinko-slots[data-rows="10"] .plinko-slot{font-size:15px}
.plinko-slots[data-rows="8"]  .plinko-slot{font-size:16px}
.plinko-slot.flash{
  animation:slotFlash .8s cubic-bezier(.16,1,.3,1);
  z-index:5;
}
@keyframes slotFlash{
  0%  {transform:translateY(0)   scale(1);   filter:brightness(1);   box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.25)}
  30% {transform:translateY(-14px) scale(1.22); filter:brightness(1.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 36px rgba(255,255,255,.95), 0 4px 16px rgba(255,255,255,.4)}
  100%{transform:translateY(0)   scale(1);   filter:brightness(1);   box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.25)}
}
/* Slot color tiers — Stake/Bloxflip-style: yellow → orange → pink → purple
   from middle (low multi) to edges (high multi). The 0.5× middle stays
   yellow; 1× pills sit one step in (orange); 2-5× pills are bright orange;
   high multis (10×+) are pink/magenta; jackpot multis get purple. */
.plinko-slot.t-low {background:linear-gradient(180deg,#ffe169 0%, #f6b500 100%); color:#3a2300}
.plinko-slot.t-mid {background:linear-gradient(180deg,#fbbf24 0%, #d97706 100%); color:#3a1a00}
.plinko-slot.t-high{background:linear-gradient(180deg,#22D3EE 0%, #1D4ED8 100%); color:#fff}
.plinko-slot.t-fire{background:linear-gradient(180deg,#3B82F6 0%, #d12a6a 100%); color:#fff}
.plinko-slot.t-jack{background:linear-gradient(180deg,#1D4ED8 0%, #6a4fd8 100%); color:#fff}

.plinko-controls{
  display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:14px;align-items:end;
  max-width:780px;margin:0 auto;
}
.plinko-controls > .btn{grid-column:1 / -1;width:100%;height:54px;font-size:15px;letter-spacing:.18em;margin-top:4px}
@media (max-width:760px){.plinko-controls{grid-template-columns:1fr 1fr}}
.seg-toggle{
  display:flex;gap:4px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:14px;padding:4px;
}
.seg-btn{
  flex:1;position:relative;
  padding:9px 10px;border-radius:10px;cursor:pointer;
  background:transparent;border:none;color:var(--text-dim);
  font-family:'Inter';font-weight:700;font-size:14px;letter-spacing:.04em;
  transition:background .3s cubic-bezier(.16,1,.3,1), color .3s, transform .25s, box-shadow .35s;
  z-index:1;
}
.seg-btn:hover{color:var(--text);background:rgba(59,130,246,.1)}
.seg-btn:active{transform:scale(.96)}
.seg-btn.active{
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;
  box-shadow:
    0 0 18px rgba(59,130,246,.5),
    0 4px 14px rgba(59,130,246,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  animation:segActivePop .35s cubic-bezier(.34,1.56,.64,1);
}
.seg-btn.active::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,.35);
  pointer-events:none;
  animation:segActiveRing .9s ease-out;
}
@keyframes segActivePop{
  0%{transform:scale(.85)}
  70%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
@keyframes segActiveRing{
  0%{transform:scale(1);opacity:.9}
  100%{transform:scale(1.18);opacity:0}
}

/* ============================================================
   UPGRADER
============================================================ */
.upgrader-stage{
  position:relative;
  width:100%;
  aspect-ratio:16 / 11;
  max-width:780px;
  min-height:360px;
  max-height:520px;
  margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  /* Stage backdrop reverted to the original soft plum tint — the red
     stop made a bright crimson halo behind the wheel that fought with
     the wheel's own pink/green pie. */
  background:radial-gradient(ellipse at center, rgba(124,92,255,.12), transparent 65%);
  border-radius:18px;border:1px solid var(--line-2);
  overflow:hidden;
}
.upgrader-stage::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:40px 40px;pointer-events:none;
}
.upgrader-wheel-wrap{
  position:relative;
  width:300px;height:300px;
}
.upgrader-pointer{
  position:absolute;left:50%;top:-2px;
  width:0;height:0;
  transform:translateX(-50%);
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:24px solid var(--gold);
  filter:drop-shadow(0 4px 8px rgba(255,217,0,.6)) drop-shadow(0 0 16px rgba(255,217,0,.5));
  z-index:4;
}
.upgrader-wheel{
  width:100%;height:100%;
  filter:drop-shadow(0 0 30px rgba(29,78,216,.4));
  transform:rotate(0);
  will-change:transform;
  /* transition is set per-spin via JS to drive a more realistic ease-out */
}
.upgrader-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle, var(--surface), var(--bg-0));
  border:2px solid var(--line-2);
  box-shadow:inset 0 4px 12px rgba(0,0,0,.4);
  z-index:2;
}
.upgrader-percent{
  font-family:'Sora';font-weight:400;font-size:46px;
  color:var(--green);letter-spacing:.02em;
  text-shadow:0 0 16px rgba(59,130,246,.5);
}
.upgrader-mult-label{font-family:'Inter';font-size:9px;letter-spacing:.2em;color:var(--text-mute);font-weight:700}
.upgrader-mult{
  font-family:'Sora';font-weight:400;font-size:24px;
  color:var(--gold);letter-spacing:.02em;
}

.upgrader-controls{
  display:grid;grid-template-columns:1fr 2fr;gap:14px;align-items:end;
  max-width:780px;margin:0 auto;
}
.upgrader-controls > .btn{grid-column:1 / -1;width:100%;height:54px;font-size:15px;letter-spacing:.18em;margin-top:4px}
@media (max-width:760px){.upgrader-controls{grid-template-columns:1fr}}
.upgrader-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:8px;border-radius:99px;
  background:linear-gradient(90deg, var(--green) 0%, var(--green) var(--ufill,50%), rgba(255,255,255,.08) var(--ufill,50%));
  outline:none;cursor:pointer;
}
.upgrader-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#fff,var(--green));
  border:2px solid var(--green);
  box-shadow:0 0 12px rgba(59,130,246,.6);
  cursor:pointer;
}
.upgrader-slider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#fff,var(--green));
  border:2px solid var(--green);
  box-shadow:0 0 12px rgba(59,130,246,.6);
  cursor:pointer;
}
.upgrader-slider-meta{
  display:flex;justify-content:space-between;
  font-family:'Inter';font-weight:700;font-size:12px;color:var(--text-mute);
  margin-top:4px;letter-spacing:.1em;
}
.control-group-wide{grid-column:span 1}

@media (max-width:1000px){
  .limbo-controls{grid-template-columns:1fr 1fr;gap:10px}
  .limbo-controls>:last-child{grid-column:1/-1}
  .plinko-controls{grid-template-columns:1fr 1fr}
  .plinko-controls>:last-child{grid-column:1/-1}
  .upgrader-controls{grid-template-columns:1fr}
}
@media (max-width:600px){
  .limbo-stage{height:280px}
  .limbo-multi{font-size:84px}
  .limbo-controls{grid-template-columns:1fr;gap:10px}
  .plinko-board{height:380px}
  .plinko-slot{font-size:12px}
  .upgrader-wheel-wrap{width:240px;height:240px}
  .upgrader-center{width:128px;height:128px}
  .upgrader-percent{font-size:34px}
}

/* ============================================================
   ENHANCED GAME BACKGROUNDS — animated, more depth
============================================================ */
/* Limbo: floating gradient orbs + chart lines — reverted to the original
   pink/gold/purple wash so the stage doesn't read as red-on-red. */
.limbo-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,109,180,.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,217,0,.12), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(124,92,255,.15), transparent 50%);
  animation:bgFloat 20s ease-in-out infinite;
}
.limbo-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,109,180,.04) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,109,180,.04) 39px 40px);
  mask:radial-gradient(ellipse at center, black 50%, transparent 90%);
}
@keyframes bgFloat{
  0%,100%{background-position:0 0,0 0,0 0}
  50%{background-position:30px -20px,-30px 20px,0 -10px}
}

/* Plinko: subtle drifting nebula — reverted to the orange/pink/purple
   stops so the board doesn't fight the red brand on the chips. */
.plinko-board::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 600px 300px at 30% -10%, rgba(255,139,58,.15), transparent 70%),
    radial-gradient(ellipse 500px 250px at 70% 110%, rgba(255,109,180,.18), transparent 70%),
    radial-gradient(circle 200px at 50% 50%, rgba(124,92,255,.12), transparent 70%);
  animation:bgFloat 22s ease-in-out infinite -8s;
}

/* Upgrader: rotating rings behind wheel — original pink/purple/gold
   sweep so the conic doesn't double up red on top of the red brand. */
.upgrader-stage::after{
  content:"";position:absolute;left:50%;top:50%;
  width:560px;height:560px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,
    rgba(255,109,180,.0) 0deg, rgba(255,109,180,.18) 30deg,
    rgba(124,92,255,.18) 90deg, rgba(124,92,255,.18) 150deg,
    rgba(255,217,0,.0) 210deg);
  filter:blur(40px);
  pointer-events:none;
  animation:upRotate 20s linear infinite;
}
@keyframes upRotate{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Plinko ::after slot is now claimed by the aurora effect (defined further
   down). The previous "inset gold glow that pulses every .4s" was the
   visual the user disliked — we replaced it with a slow aurora drift that
   reads as atmospheric, not strobing. */

/* Limbo "rolling" pulse on stage */
.limbo-stage.rolling .limbo-glow{
  animation:limboRolling 1.2s ease-in-out infinite;
}
@keyframes limboRolling{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.15)}
}

/* ============================================================
   AFFILIATE PROGRAM
============================================================ */
.aff-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-bottom:18px;
}
.aff-stat{
  position:relative;
  padding:18px 20px;border-radius:16px;
  background:linear-gradient(135deg, rgba(15,8,12,.85), rgba(8,4,8,.95));
  border:1px solid var(--line-2);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .25s;
}
.aff-stat:hover{transform:translateY(-2px);border-color:rgba(59,130,246,.5)}
.aff-stat::before{
  content:"";position:absolute;top:-50%;right:-50%;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,.25), transparent 70%);
  filter:blur(20px);
}
.aff-stat-tier{
  background:linear-gradient(135deg, rgba(255,217,0,.18), rgba(29,78,216,.18));
  border-color:rgba(255,217,0,.45);
}
.aff-stat-tier::before{background:radial-gradient(circle, rgba(255,217,0,.4), transparent 70%)}
.aff-stat-label{
  font-family:'Inter';font-weight:700;font-size:12px;
  letter-spacing:.2em;color:var(--text-mute);
}
.aff-stat-value{
  font-family:'Sora';font-weight:800;font-size:30px;
  background:linear-gradient(135deg,#fff,var(--gold));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.02em;
  margin:6px 0 4px;
}
.aff-stat-trend{font-size:13px;color:var(--text-dim);font-weight:600}
.aff-stat-trend strong{color:var(--green)}
.aff-stat-tier .aff-stat-value{
  background:linear-gradient(135deg,#3B82F6,#3B82F6);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.aff-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-bottom:18px;
}
.aff-card{
  padding:22px;border-radius:18px;
  background:linear-gradient(135deg, rgba(15,8,12,.7), rgba(8,4,8,.7));
  border:1px solid var(--line-2);
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
}
.aff-card-head{margin-bottom:16px;position:relative;z-index:2}
.aff-card-title{
  font-family:'Sora';font-weight:700;font-size:18px;color:var(--text);
  letter-spacing:-.01em;
}
.aff-card-sub{font-size:15px;color:var(--text-dim);margin-top:2px;font-weight:500}

.aff-code-display{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-radius:12px;
  background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(29,78,216,.12));
  border:1px solid rgba(59,130,246,.35);
  margin-bottom:10px;
}
.aff-code-display code{
  flex:1;font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;
  color:var(--gold);letter-spacing:.08em;
  text-shadow:0 0 16px rgba(255,217,0,.3);
}
.aff-link-display{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
}
.aff-link-label{
  font-family:'Inter';font-weight:800;font-size:9px;
  letter-spacing:.2em;color:var(--text-mute);
}
.aff-link-display code{
  flex:1;font-family:'JetBrains Mono',monospace;font-size:13px;
  color:var(--cyan);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.aff-apply-row{
  display:flex;gap:10px;
}
.aff-apply-row input{
  flex:1;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  color:var(--text);
  font-family:'JetBrains Mono',monospace;font-weight:600;font-size:16px;
  letter-spacing:.1em;text-transform:uppercase;
  outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.aff-apply-row input:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
}
.aff-applied{
  margin-top:12px;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:10px;
  background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.45);
  color:var(--green);font-weight:700;font-size:15px;
}
.aff-check{
  width:18px;height:18px;border-radius:50%;
  background:var(--green);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.aff-check::before{
  content:"";width:6px;height:9px;
  border-right:2px solid #003322;border-bottom:2px solid #003322;
  transform:rotate(45deg) translateY(-1px);
}

.aff-tiers{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
.aff-tier{
  padding:14px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  text-align:center;
  position:relative;
  transition:transform .25s, border-color .25s;
}
.aff-tier.current{
  background:linear-gradient(135deg, rgba(255,217,0,.18), rgba(59,130,246,.12));
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold), 0 0 24px rgba(255,217,0,.25);
  transform:translateY(-2px);
}
.aff-tier-name{
  font-family:'Sora';font-weight:700;font-size:15px;letter-spacing:.04em;
  text-transform:uppercase;
}
.aff-tier-rate{
  font-family:'Sora';font-weight:800;font-size:24px;color:var(--gold);
  margin:6px 0 2px;letter-spacing:-.01em;
}
.aff-tier-req{font-size:12px;color:var(--text-mute);font-weight:600;letter-spacing:.05em}
.aff-tier-icon{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 6px;
  font-family:'Sora';font-weight:800;font-size:15px;
}
.tier-bronze .aff-tier-icon{background:linear-gradient(135deg,#ad6900,#7a4a18);color:#fff}
.tier-silver .aff-tier-icon{background:linear-gradient(135deg,#e0e6f0,#806060);color:#0a0f1f}
.tier-gold .aff-tier-icon{background:linear-gradient(135deg,#3B82F6,#3B82F6);color:#5c3800}
.tier-diamond .aff-tier-icon{background:linear-gradient(135deg,#dbeafe,#3B82F6);color:#3a0808}
.tier-mythic .aff-tier-icon{background:linear-gradient(135deg,#1D4ED8,#1D4ED8);color:#fff}

.aff-activity{
  display:flex;flex-direction:column;gap:6px;
  max-height:340px;overflow-y:auto;
}
.aff-activity::-webkit-scrollbar{width:4px}
.aff-activity::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:2px}
.aff-activity-row{
  display:grid;grid-template-columns:32px 1fr auto auto;align-items:center;gap:12px;
  padding:10px 14px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  font-family:'Inter';
  animation:aaIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes aaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.aff-act-avatar{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Sora';font-weight:800;font-size:15px;color:#fff;
  border:1.5px solid rgba(255,255,255,.2);
}
.aff-act-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.aff-act-name{font-weight:700;font-size:15px;color:var(--text);letter-spacing:.01em}
.aff-act-action{font-size:13px;color:var(--text-mute);font-weight:500}
.aff-act-amount{
  font-family:'Sora';font-weight:700;font-size:15px;color:var(--green);
  white-space:nowrap;
}
.aff-act-time{font-size:12px;color:var(--text-mute);font-weight:600}

@media (max-width:1100px){
  .aff-stats{grid-template-columns:repeat(2,1fr)}
  .aff-grid{grid-template-columns:1fr}
  .aff-tiers{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .aff-stats{grid-template-columns:1fr 1fr}
  .aff-tiers{grid-template-columns:1fr 1fr}
}

/* ============================================================
   TYPOGRAPHY POLISH (Plus Jakarta Sans + Sora)
============================================================ */
.logo-main, .hero-title, .title-pop, .section-title, .game-title,
.modal-title, .stat-num, .crash-multiplier, .limbo-multi, .upgrader-percent,
.gp-title, .gp-payout, .pt-mult, .ws-val, .ws-arrow, .wc-mult, .wc-payout,
.bw-amount, .ci-mult, .cig-mult, .lead-rank, .lead-pay, .hr-profit,
.bf-multi, .bf-payout, .balance, .stats-title, .slots-top, .upgrader-mult,
.aff-stat-value, .aff-tier-rate, .aff-card-title, .aff-act-amount,
.title-burst, .promo-title, .gc-name, .cc-name, .wc-rarity-label,
.win-card .wc-name {
  font-family:'Sora','Inter',system-ui,sans-serif;
  font-feature-settings:"ss01","cv01";
  letter-spacing:-.01em;
}
.balance{letter-spacing:.04em}
.gc-name, .promo-title, .crash-multiplier, .limbo-multi {
  letter-spacing:-.02em;
  font-weight:800;
}
.section-title, .game-title, .modal-title, .aff-card-title {
  font-weight:700;letter-spacing:-.01em;
}
.hero-title{font-weight:800}
.stats-title, .pt-name, .ws-label, .aff-stat-label, .aff-link-label, .ci-rarity-tag, .cig-rarity-tag {
  font-family:'Inter',sans-serif;font-weight:800;
}
.btn{font-weight:700;letter-spacing:.04em}
.btn.big{font-weight:800;letter-spacing:.06em}

/* (old ✨ emoji sparkle removed — replaced by the cyan ring flash below) */

/* ============================================================
   RESULT POPUP — fills the dead space below each game
============================================================ */
.game-popup{
  margin-top:16px;
  padding:18px 24px;border-radius:18px;
  background:linear-gradient(135deg, rgba(15,8,12,.9), rgba(8,4,8,.9));
  border:1px solid var(--line-2);
  display:flex;align-items:center;gap:18px;
  min-height:78px;
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(12px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.game-popup.show{opacity:1;transform:translateY(0)}
.game-popup.win{
  background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(15,8,12,.9));
  border-color:rgba(59,130,246,.55);
  box-shadow:0 12px 30px rgba(59,130,246,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.game-popup.loss{
  background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(15,8,12,.9));
  border-color:rgba(59,130,246,.55);
  box-shadow:0 12px 30px rgba(59,130,246,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.game-popup.push{
  background:linear-gradient(135deg, rgba(255,217,0,.15), rgba(15,8,12,.9));
  border-color:rgba(255,217,0,.5);
}
/* (gp-glow / gp-icon decoration removed — tacky and not in spec.) */
.gp-glow,.gp-icon{display:none !important}
.gp-content{flex:1;min-width:0}
.gp-title{
  font-family:'Sora';font-weight:400;font-size:22px;color:var(--text);
  letter-spacing:.04em;
}
.gp-sub{font-family:'Inter';font-weight:600;font-size:15px;color:var(--text-dim);margin-top:2px}
.gp-payout{
  font-family:'Sora';font-weight:400;font-size:26px;
  letter-spacing:.04em;flex-shrink:0;
  padding:8px 16px;border-radius:12px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);
}
.game-popup.win .gp-payout{color:var(--green);text-shadow:0 0 16px rgba(59,130,246,.55)}
.game-popup.loss .gp-payout{color:var(--red);text-shadow:0 0 16px rgba(59,130,246,.55)}
.game-popup.push .gp-payout{color:var(--gold)}

/* ============================================================
   COMPACT SPACING
============================================================ */
main{padding:20px 22px 50px}
.hero{padding:36px;border-radius:24px;margin-bottom:28px;gap:32px}
.promo{height:120px;padding:16px 18px;border-radius:18px}
.promo-strip{margin-bottom:20px;gap:12px}
.section-title{margin:30px 0 14px;font-size:28px}
.game-grid{gap:14px}
.game-card{height:280px;padding:18px 16px;border-radius:20px}
.game-shell{padding:20px;border-radius:22px;margin-bottom:20px}
.game-header{margin-bottom:18px;padding-bottom:14px}
.bet-feed-wrap{padding:12px 16px;border-radius:18px;margin-bottom:20px}
.big-wins{gap:10px}
.bw-card{padding:12px;border-radius:14px}
.history-bar{padding:10px;margin-top:14px;border-radius:14px}
.crash-controls{gap:14px}
.bj-table{padding:24px 26px;min-height:380px}
.dice-stage{height:340px;margin-bottom:16px}
.cases-stage{height:180px;margin-bottom:16px}
.cases-row{gap:12px;margin-bottom:18px}
.case-card{height:200px;padding:14px}
.modal{padding:26px;border-radius:22px}
@keyframes tileReveal{
  from{transform:scale(.6);opacity:0}
  to{transform:scale(1);opacity:1}
}
.mine-tile.faded{opacity:.4}

.mines-panel{
  background:linear-gradient(135deg,var(--surface),var(--bg-2));
  border:1px solid var(--line-2);border-radius:18px;
  padding:20px;display:flex;flex-direction:column;gap:14px;
}
.payout-display{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:14px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
}
.payout-display>div{display:flex;flex-direction:column;gap:4px}
.payout-display span{font-family:'Inter';font-size:9px;letter-spacing:1.5px;color:var(--text-mute);font-weight:700}
.payout-display strong{font-family:'Sora';font-size:20px;color:var(--gold);font-weight:400}

/* ============================================================
   BLACKJACK
============================================================ */
/* ----- BLACKJACK TABLE — cartoon claret felt -------------------
   Re-themed to match the site's bold red-brand cartoon vibe (the
   prior realistic green felt + brown leather rim looked off-brand
   on a red+gold casino). Now: deep claret felt with a subtle
   hitcoin-glyph pattern overlay, thick gold cartoon rim with a
   chunky black drop shadow (the "stamped on the page" look the
   home cards use), and big cartoon suit symbols in each corner
   that mirror the diorama-card composition language. */
.bj-table{
  position:relative;
  width:100%;max-width:780px;margin:0 auto 20px;
  background:
    radial-gradient(ellipse at center, rgba(255,217,0,.10), transparent 65%),
    radial-gradient(ellipse at top,    rgba(255,140,180,.18), transparent 70%),
    linear-gradient(165deg, #3B82F6 0%, #1D4ED8 40%, #0F1F4D 80%, #0A1733 100%);
  border:4px solid #ffd900;
  border-radius:36px;
  padding:36px 30px;
  box-shadow:
    /* Inner glow lifts the felt off the rim */
    inset 0 0 80px rgba(255,217,0,.10),
    inset 0 -8px 30px rgba(0,0,0,.50),
    inset 0 4px 0 rgba(255,255,255,.10),
    /* Chunky cartoon drop shadow — the same "stamped" depth the
       home cards use (0 14px 0 #3e0212 + 0 22px 50px #000). */
    0 12px 0 rgba(29,78,216,.55),
    0 26px 50px rgba(0,0,0,.60),
    0 0 60px rgba(34,211,238,.20);
  /* min-height was 440px back when .bj-suit corner ornaments were
     accidentally falling into flow (the .bj-table > * rule was
     clobbering their position:absolute) and inflating the felt to
     ~870px. Now that the suits are absolute again the felt's natural
     content height (~470px) is tight on its own; this floor just
     guarantees a comfortable felt even when the player zone is empty. */
  min-height:360px;
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  overflow:hidden;
}
/* Felt pattern — small Hitcoin-glyph silhouettes scattered on the
   felt for brand texture. Replaces the prior realistic diamond-
   hatching pattern (which read as "real-felt weave" — wrong vibe). */
.bj-table::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle 2px at 18px 14px,  rgba(255,217,0,.08) 0%, transparent 70%),
    radial-gradient(circle 1.5px at 46px 38px, rgba(255,255,255,.06) 0%, transparent 70%),
    radial-gradient(circle 2px at 74px 18px,  rgba(255,217,0,.07) 0%, transparent 70%);
  background-size: 96px 64px, 96px 64px, 96px 64px;
}
/* Cartoon suit-symbol corner ornaments. Each <span class="bj-suit">
   is positioned at one of the 4 corners with a unique rotation +
   color so they don't read as a regular pattern. Same composition
   trick the home cards use (decorative ornaments at corners) — it
   breaks the rectangular silhouette and adds the playful vibe. */
.bj-suit{
  position:absolute;
  font-family:serif; font-size:54px; font-weight:900;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.bj-suit-tl{
  top:14px; left:22px;
  color:rgba(255,255,255,.16);
  text-shadow:0 0 22px rgba(255,217,0,.30), 0 4px 0 rgba(0,0,0,.40);
  transform:rotate(-14deg);
}
.bj-suit-tr{
  top:14px; right:22px;
  color:rgba(255,140,180,.30);
  text-shadow:0 0 22px rgba(34,211,238,.45), 0 4px 0 rgba(0,0,0,.40);
  transform:rotate(12deg);
}
.bj-suit-bl{
  bottom:14px; left:22px;
  color:rgba(255,255,255,.14);
  text-shadow:0 0 18px rgba(255,217,0,.25), 0 4px 0 rgba(0,0,0,.40);
  transform:rotate(8deg);
}
.bj-suit-br{
  bottom:14px; right:22px;
  color:rgba(255,140,180,.28);
  text-shadow:0 0 18px rgba(34,211,238,.40), 0 4px 0 rgba(0,0,0,.40);
  transform:rotate(-10deg);
}

/* ---- BJ SHELL — Stake/Bloxflip-style 2-col layout ----------
   Left: controls panel (bet input + action buttons). Right: felt.
   Mobile collapses to single column with felt above controls. */
.bj-shell-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  /* Wider felt — was 1100px which left ~400px of empty space on each
     side at 1990px viewport. 1500px uses meaningfully more of the
     content column without getting ridiculous on ultra-wide monitors. */
  max-width:1500px;
  margin:0 auto 20px;
}
.bj-shell-grid{ align-items:start; }
.bj-shell-grid .bj-controls{
  background:linear-gradient(180deg, rgba(15,8,12,.85), rgba(4,2,4,.85));
  border:1px solid rgba(34,211,238,.22);
  border-radius:18px;
  padding:18px;
  display:flex;flex-direction:column;gap:10px;
  /* No align-self:stretch — it was making the panel match the felt's
     full height (~800px) when the actual content (bet input + presets
     + DEAL button) is ~250px. align-self:start keeps the panel sized
     to its content; the felt next to it is allowed to be taller. */
  align-self:start;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 22px rgba(0,0,0,.35);
}
.bj-shell-grid .bj-controls .control-group{
  /* Override legacy `.bj-controls > .control-group { flex: 0 0 100% }`.
     That rule was sized for the prior centered ROW layout — flex-basis
     100% tells the item to claim 100% of the main axis. In our COLUMN
     layout the main axis is VERTICAL, so the control-group was eating
     the full panel height (850px) and shoving every button below it
     off the panel's right edge. flex:0 0 auto sizes to its content. */
  flex:0 0 auto;
  width:100%;
  max-width:none;
  margin:0;
}
.bj-shell-grid .bj-controls .control-group label{
  display:block;
  font-family:'Inter',sans-serif;
  font-weight:800;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin-bottom:6px;
}
/* Action buttons stack vertically in the side panel — one per row.
   On mobile we re-grid them into a 2-column action row (HIT|STAND
   side-by-side, DOUBLE|SPLIT side-by-side) to stay compact. */
.bj-shell-grid .bj-controls .btn.big{
  /* Override the legacy .bj-controls > .btn flex sizing
     (flex:0 1 220px + max-width:280px) — those were for the
     centered single-row layout; in our 2-col side panel each
     button claims its full width on its own row. */
  width:100%;
  max-width:none;
  min-width:0;
  flex:0 0 auto;
  height:46px;
  font-size:15px;letter-spacing:.10em;
  margin:0;
}
.bj-shell-grid .bj-controls .btn-primary.bj-btn-deal{
  height:54px;
  font-size:15px;letter-spacing:.12em;
  margin-top:6px;
}

/* ---- DECK (top-right of felt) ----
   3 stacked card-backs. Cards fly from this position when dealt
   via the bjDealIn keyframes — the start translate matches the
   deck's offset from the dealer/player zones. */
/* `.bj-table > *{ position:relative }` (line 5879) was clobbering
   the absolute positioning. Bump specificity with .bj-table > .bj-deck. */
.bj-table > .bj-deck{
  position:absolute;
  top:18px; right:18px;
  width:62px; height:88px;
  z-index:1;
  pointer-events:none;
}
.bj-deck-card{
  position:absolute;
  width:62px; height:88px;
  border-radius:8px;
  border:2px solid rgba(0,0,0,.55);
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.20)),
    linear-gradient(180deg, var(--pink, #3B82F6) 0%, var(--pink-deep, #1D4ED8) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 8px rgba(0,0,0,.45);
  overflow:hidden;
}
.bj-deck-card::before{
  /* Bloxhit logo stamped onto each card-back. Sized 80% width (so
     it fills the card visibly without touching the rim) + centered,
     with a subtle drop-shadow so the logo lifts off the claret face. */
  content:""; position:absolute; inset:0;
  background-image: url("assets/newest-logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
.bj-deck-card:nth-child(1){ transform: translate(-4px, -4px) rotate(-4deg); }
.bj-deck-card:nth-child(2){ transform: translate(-1px, -2px) rotate(-1deg); }
.bj-deck-card:nth-child(3){ transform: translate(0, 0)       rotate(0); }

/* ---- PAYS-INFO badge in middle of felt ----
   "BLACKJACK PAYS 3 TO 2 / INSURANCE PAYS 2 TO 1" — visible always.
   Sits between the two zones (dealer up, player down) so it doesn't
   compete with cards for attention. */
/* Pays-info badge sits as a normal flex flow item between dealer
   and player zones. Parent .bj-table has flex-direction:column +
   justify-content:space-between so the 3 children (dealer / pays /
   player) distribute as top / middle / bottom automatically. */
.bj-pays{
  text-align:center;
  pointer-events:none;
  user-select:none;
  flex-shrink:0;
}
.bj-pays-main{
  font-family:'Sora',sans-serif;
  font-weight:900; font-size:16px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.32);
  text-shadow:0 2px 0 rgba(0,0,0,.40), 0 0 18px rgba(255,217,0,.18);
}
.bj-pays-sub{
  font-family:'Inter',sans-serif;
  font-weight:800; font-size:12px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.20);
  margin-top:4px;
}

/* ---- Empty card placeholders ----
   When a zone has no dealt cards (#bj-dealer or #bj-player is :empty),
   show 2 outlined card slots so the player sees where cards will land
   even before the hand starts. The :empty pseudo-class lights up
   only when the zone has no children — once cards are dealt, the
   placeholders are auto-hidden. */
.bj-cards:empty{
  position:relative;
  display:flex;
  gap:10px;
  justify-content:center;
}
.bj-cards:empty::before,
.bj-cards:empty::after{
  content:"";
  width:90px; height:130px;
  border:2px dashed rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}

/* Mobile sizing — felt was 86% of viewport on a 375×812 iPhone; now
   collapse 2-col grid to 1-col with felt-first, controls-below. */
@media (max-width: 880px){
  .bj-shell-grid{
    grid-template-columns: 1fr;
  }
  .bj-shell-grid .bj-controls{
    order: 2;
    /* Re-grid the contextual action buttons so they sit 2-up on
       mobile instead of 1-per-row (saves vertical real estate). */
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }
  .bj-shell-grid .bj-controls .control-group{ grid-column: 1 / -1 }
  .bj-shell-grid .bj-controls .bj-btn-deal{ grid-column: 1 / -1 }
  .bj-shell-grid .bj-controls .btn.big{ height:42px; font-size:14px }
}
@media (max-width: 640px){
  .bj-table{
    padding:18px 16px;
    min-height:300px;
    border-width:3px;
    border-radius:24px;
    gap:14px;
  }
  .bj-suit{ font-size:34px }
  .bj-suit-tl{ top:8px;    left:12px  }
  .bj-suit-tr{ top:8px;    right:12px }
  .bj-suit-bl{ bottom:8px; left:12px  }
  .bj-suit-br{ bottom:8px; right:12px }
  .bj-label{ font-size:17px; letter-spacing:.08em; gap:8px }
  .bj-label::before, .bj-label::after{ width:24px; height:2px }
  .bj-cards{ min-height:110px; gap:8px }
  .bj-cards:empty::before,
  .bj-cards:empty::after{ width:70px; height:104px }
  .bj-zone{ gap:10px }
  .bj-deck{ width:48px; height:68px; top:12px; right:12px }
  .bj-deck-card{ width:48px; height:68px }
  .bj-pays-main{ font-size:13px; letter-spacing:.14em }
  .bj-pays-sub{ font-size:8px; letter-spacing:.18em }
}
.bj-zone{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  position:relative;z-index:2;
}
.bj-label{
  font-family:'Sora',sans-serif;
  font-size:22px;font-weight:900;
  color:#fff;
  text-shadow:
    0 3px 0 rgba(0,0,0,.55),
    0 0 18px rgba(255,217,0,.55);
  letter-spacing:.10em;
  text-transform:uppercase;
  display:flex;align-items:center;gap:12px;
  /* Hidden until DEAL is pressed. The .bj-label-pop animation toggled
     by app.js animates opacity 0→1 (and scale + blur-clear) and uses
     `both` fill mode so the visible end state persists for the round. */
  opacity:0;
}
.bj-label::before,.bj-label::after{
  content:"";width:42px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,217,0,.7),transparent);
  box-shadow:0 0 8px rgba(255,217,0,.45);
}
/* DEAL pop — when the player presses DEAL, both DEALER and YOU labels
   animate in with a scale + blur-clear + spread→tighten letter-spacing
   for a "pops out of the felt" feel. The class is added by the deal
   handler in app.js and auto-removes via animationend so it can replay
   on the next round. The dealer label fires first; YOU follows ~120ms
   later via .bj-label-pop-2 so the eye reads top→bottom. */
.bj-label.bj-label-pop{
  animation: bjLabelPop .60s cubic-bezier(.34, 1.56, .64, 1) both;
  transform-origin: center;
  /* iOS-safe fallback: even if the @keyframes don't fire (older iOS
     Safari + Reduce Motion edge cases, or any future regression of the
     reduced-motion blocks at lines 12575 / 16368), the class alone
     makes the label visible the moment it's added. The fill-mode `both`
     above keeps opacity:1 after the animation completes; this rule
     guarantees opacity:1 even if the keyframes never play. Without it,
     `.bj-label{ opacity:0 }` would leave DEALER/YOU permanently invisible
     for any user whose browser silently skips the keyframes. */
  opacity: 1;
}
.bj-label.bj-label-pop-2{ animation-delay: .12s }
@keyframes bjLabelPop{
  0%   { opacity: 0; transform: scale(.55) translateY(-10px); filter: blur(8px); letter-spacing: .50em }
  55%  { opacity: 1; transform: scale(1.12) translateY(0);    filter: blur(0);   letter-spacing: .08em }
  100% { opacity: 1; transform: scale(1)    translateY(0);    filter: blur(0);   letter-spacing: .10em }
}
/* The gold side-rules grow from 0 width too so they sweep out from the
   text instead of just appearing. Slightly shorter than the text so the
   eye lands on "DEALER" / "YOU" first, then the rules finish drawing. */
.bj-label.bj-label-pop::before,
.bj-label.bj-label-pop::after{
  animation: bjLabelRulePop .60s cubic-bezier(.34, 1.56, .64, 1) both;
}
.bj-label.bj-label-pop-2::before,
.bj-label.bj-label-pop-2::after{ animation-delay: .14s }
@keyframes bjLabelRulePop{
  0%   { width: 0;    opacity: 0 }
  60%  { width: 50px; opacity: 1 }
  100% { width: 42px; opacity: 1 }
}
.bj-cards{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;min-height:140px}
.bj-card{
  width:90px;height:130px;border-radius:10px;
  background:#fff;border:2px solid #0a0f1f;
  box-shadow:0 6px 14px rgba(0,0,0,.5);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:8px 10px;
  font-family:'Sora';font-weight:400;
  position:relative;
  /* Deal-in animation only fires when the card is FIRST mounted —
     diff-render in JS keeps existing cards in DOM across re-renders
     so they don't replay on every state update. */
  animation:bjDealIn .55s cubic-bezier(.18,.7,.3,1.04) backwards;
}
/* Card flies in from the top-right of the felt (where the deck
   would be), travels with a slight tilt, lands with a tiny
   overshoot bounce. Reads as a real dealer flick — Stake/Bloxflip-
   style "live deal" feel. */
@keyframes bjDealIn{
  0%   { transform: translate(180px, -120px) rotate(32deg) scale(.85); opacity: 0; }
  40%  { opacity: 1; }
  85%  { transform: translate(-3px, 5px) rotate(-3deg) scale(1.02); }
  100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
}
/* Stagger each card so they deal one after another (the dealer's
   "first card to player, second to dealer, third to player, fourth
   to dealer" rhythm). nth-child gives each card its own delay. */
.bj-card:nth-child(1){ animation-delay: 0s }
.bj-card:nth-child(2){ animation-delay: .14s }
.bj-card:nth-child(3){ animation-delay: .28s }
.bj-card:nth-child(4){ animation-delay: .42s }
.bj-card:nth-child(5){ animation-delay: .56s }
.bj-card:nth-child(6){ animation-delay: .70s }
/* Hidden-to-revealed flip: when the dealer's face-down card finally
   shows its face (after STAND), the new face-up card replaces the
   back card with a flip-reveal animation in place — instead of
   re-flying-in from the deck. The .bj-card-reveal class is set by
   render() in app.js when a hidden card transitions to shown. */
.bj-card.bj-card-reveal{
  animation: bjFlipReveal .55s cubic-bezier(.4,.7,.3,1.05);
  transform-style: preserve-3d;
}
@keyframes bjFlipReveal{
  0%   { transform: rotateY(180deg)        scale(1)    }
  50%  { transform: rotateY(90deg)         scale(1.04) }
  100% { transform: rotateY(0)             scale(1)    }
}
.bj-card.red{color:#e63946}.bj-card.black{color:#0a0f1f}
/* Card "index" — rank above small suit, like a real playing card. The
   pair lives in both corners; the bottom-right pair is rotated 180° as
   a unit so the card reads correctly when flipped. */
.bj-card-index{
  display:flex;flex-direction:column;align-items:center;
  line-height:.95;
  font-family:'Sora',sans-serif;font-weight:700;
}
.bj-card-index-tl{align-self:flex-start}
.bj-card-index-br{align-self:flex-end;transform:rotate(180deg);transform-origin:center}
.bj-card-rank{font-size:20px;line-height:1}
.bj-card-suit-mini{font-size:16px;line-height:1;margin-top:1px}
.bj-card-suit{font-size:34px;align-self:center}
.bj-card.flipped{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;border-color:var(--berry-dark)}
.bj-card.flipped::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><defs><radialGradient id='b' cx='.5' cy='.5'><stop offset='0' stop-color='%23ffffff' stop-opacity='.85'/><stop offset='1' stop-color='%23ffffff' stop-opacity='.18'/></radialGradient></defs><g transform='translate(20 20)'><circle r='3' fill='%23fff'/><g><path d='M0 -3 q-7 -2 -8 5 q3 6 8 3 z' fill='url(%23b)'/><path d='M0 -3 q7 -2 8 5 q-3 6 -8 3 z' fill='url(%23b)'/><path d='M-3 0 q-2 7 5 8 q6 -3 3 -8 z' fill='url(%23b)'/><path d='M3 0 q2 7 -5 8 q-6 -3 -3 -8 z' fill='url(%23b)'/><path d='M-2 -2 q-6 -6 -8 -1 q-1 5 5 6 q4 0 3 -5 z' fill='url(%23b)'/></g></g></svg>") center/72% no-repeat}
/* BJ controls — flex-wrap row.
   - Bet-input `.control-group` claims the full row (flex-basis 100%) so
     it's always on its own line above the action buttons.
   - All `.btn` siblings flow as a centered cluster on the next row,
     wrapping if too many fit.
   - Hidden buttons collapse out completely (the .btn[hidden]!important
     rule handles that), so when only DEAL is visible at idle, it lands
     dead-center instead of being grid-anchored to the leftmost cell.
*/
.bj-controls{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  max-width: 780px;
  margin: 0 auto;
}
.bj-controls > .control-group{
  flex: 0 0 100%;          /* bet input always claims its own row */
  max-width: 280px;
  margin: 0 auto;
  width: 100%;
}
.bj-controls > .btn{
  height: 54px;
  font-size: 16px;
  letter-spacing: .16em;
  min-width: 200px;
  max-width: 280px;
  flex: 0 1 220px;
}
@media (max-width:760px){
  .bj-controls > .btn{ flex: 1 1 100%; max-width: 100%; }
}

/* ============================================================
   SLOTS — premium cabinet (deep red & gold)
============================================================ */
.slots-machine{
  position:relative;
  max-width:560px;margin:0 auto 28px;
  padding:22px 22px 28px;border-radius:34px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,217,0,.18), transparent 55%),
    linear-gradient(180deg,#d11b3f 0%, #a01030 35%, #7a0a25 70%, #5a0518 100%);
  border:4px solid #3B82F6;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -4px 0 rgba(0,0,0,.4),
    inset 0 0 0 6px rgba(0,0,0,.18),
    0 14px 0 #3e0212,
    0 22px 50px rgba(0,0,0,.6),
    0 0 60px rgba(59,130,246,.18);
}
.slots-machine::before{
  /* faint specular sheen across the cabinet */
  content:"";position:absolute;inset:0;border-radius:30px;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 35%, transparent 65%, rgba(0,0,0,.25) 100%);
  mix-blend-mode:overlay;
}
/* Floor ambient halo — soft red+gold pool of light beneath the cabinet
   so it doesn't look like it's floating on flat dark. Lives on a real
   element (.sm-floor-halo) instead of ::after because three other CSS
   rules already use .slots-machine::after for sparkle dots + iris rim
   glow + and both can't co-exist on a single pseudo. The halo sits
   BELOW the cabinet via bottom:-30px and a sliver of left/right inset
   keeps it narrower than the chassis so it reads as cast light. */
.slots-machine > .sm-floor-halo{
  position:absolute;
  left:8%; right:8%; bottom:-30px;
  height:64px;
  background:
    radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255,217,0,.22), transparent 65%),
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(59,130,246,.28), transparent 75%);
  filter:blur(14px);
  pointer-events:none;
  z-index:0;
  animation:smFloorPulse 4s ease-in-out infinite;
}
@keyframes smFloorPulse{
  0%,100%{ opacity:.75 }
  50%   { opacity:.95 }
}

/* ----- Crown / marquee ----- */
.sm-crown{
  margin-bottom:18px;
  position:relative;
}
.sm-crown-frame{
  position:relative;
  border-radius:18px;
  background:linear-gradient(180deg,#2a0008 0%, #100004 100%);
  border:2px solid #3B82F6;
  padding:10px 18px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.1),
    inset 0 -2px 0 rgba(0,0,0,.45),
    0 4px 0 rgba(0,0,0,.35),
    0 0 18px rgba(255,217,0,.18);
}
.sm-marquee-wrap{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:6px 0;
  position:relative;z-index:1;
}
.sm-star{
  font-family:'Sora';font-size:18px;color:#3B82F6;
  text-shadow:0 0 12px rgba(255,217,0,.85), 0 0 22px rgba(59,130,246,.6);
  animation:smStarSpin 4s linear infinite;
  display:inline-block;
}
.sm-star-r{animation-direction:reverse}
@keyframes smStarSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.sm-marquee{
  font-family:'Sora';font-weight:800;font-size:26px;letter-spacing:.32em;
  color:#dbeafe;
  background:linear-gradient(180deg, #dbeafe 0%, #3B82F6 35%, #06B6D4 70%, #1E3A8A 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,217,0,.65)) drop-shadow(0 2px 0 rgba(29,78,216,.6));
  white-space:nowrap;
  animation:smMarqueeGlow 2.6s ease-in-out infinite;
}
@keyframes smMarqueeGlow{
  0%,100%{filter:drop-shadow(0 0 14px rgba(255,217,0,.65)) drop-shadow(0 2px 0 rgba(29,78,216,.6))}
  50%   {filter:drop-shadow(0 0 22px rgba(255,217,0,1))    drop-shadow(0 2px 0 rgba(29,78,216,.6)) drop-shadow(0 0 36px rgba(59,130,246,.5))}
}

/* Marquee bulbs — perfectly centered using flex, fills the strip evenly */
.sm-bulbs{
  display:flex;align-items:center;justify-content:space-evenly;
  height:14px;width:100%;
  position:relative;z-index:1;
}
.sm-bulbs::before{
  /* generates the bulbs via repeating gradient so they're always evenly
     distributed; works at any width without manually placing 10 spans. */
  content:"";display:block;width:100%;height:10px;border-radius:5px;
  background-image:radial-gradient(circle 4px at 12px 5px, #dbeafe 0%, #3B82F6 40%, #b87800 75%, transparent 78%);
  background-size:24px 10px;
  background-repeat:repeat-x;
  background-position:50% 50%;
  filter:drop-shadow(0 0 4px rgba(255,217,0,.85));
  animation:smBulbChase 1.6s linear infinite;
}
.sm-bulbs-bottom::before{animation-direction:reverse;animation-duration:2s}
@keyframes smBulbChase{
  0%  {background-position:0 50%;filter:drop-shadow(0 0 4px rgba(255,217,0,.85))}
  50% {filter:drop-shadow(0 0 8px rgba(255,217,0,1)) drop-shadow(0 0 14px rgba(59,130,246,.5))}
  100%{background-position:24px 50%;filter:drop-shadow(0 0 4px rgba(255,217,0,.85))}
}

/* ----- Cabinet (chrome bezel around the reels) ----- */
.sm-cabinet{
  position:relative;
  background:
    linear-gradient(180deg, #0f1530 0%, #0a0f1f 50%, #0f1530 100%);
  border-radius:20px;padding:5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 6px 0 rgba(0,0,0,.4);
}
.sm-cabinet-inner{
  background:linear-gradient(180deg,#1a0008 0%, #3a0612 50%, #1a0008 100%);
  border:2px solid rgba(255,217,0,.7);border-radius:16px;padding:14px;
  box-shadow:
    inset 0 4px 18px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(0,0,0,.4);
  position:relative;
}
.sm-cabinet-inner::before{
  /* inner gold pinstripe */
  content:"";position:absolute;inset:5px;border-radius:13px;
  border:1px dashed rgba(255,217,0,.32);
  pointer-events:none;
}
.sm-window{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  background:linear-gradient(180deg,#ffffff 0%, #f3dde8 50%, #e2cad8 100%);
  border-radius:12px;padding:10px;
  border:2px solid #2a0008;
  box-shadow:
    inset 0 6px 16px rgba(0,0,0,.45),
    0 0 0 2px rgba(0,0,0,.4);
  height:200px;overflow:hidden;
  position:relative;
}
.sm-window .reel{height:180px;overflow:hidden}
.sm-window::before, .sm-window::after{
  content:"";position:absolute;left:0;right:0;height:46px;
  pointer-events:none;z-index:3;
}
.sm-window::before{
  top:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 60%, transparent);
}
.sm-window::after{
  bottom:0;
  background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 60%, transparent);
}

/* Glowing payline */
.sm-payline{
  position:absolute;left:14px;right:14px;top:50%;height:3px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, #3B82F6 12%, #3B82F6 50%, #3B82F6 88%, transparent);
  box-shadow:0 0 12px rgba(59,130,246,.85), 0 0 24px rgba(59,130,246,.4);
  pointer-events:none;z-index:2;
  animation:smPayline 2.2s ease-in-out infinite;
}
@keyframes smPayline{
  0%,100%{opacity:.55;box-shadow:0 0 8px rgba(59,130,246,.6)}
  50%   {opacity:1;   box-shadow:0 0 16px rgba(59,130,246,1), 0 0 32px rgba(59,130,246,.55)}
}
/* arrow tips on either side of the payline */
.sm-payline-tip{
  position:absolute;top:50%;width:14px;height:14px;
  transform:translateY(-50%);
  background:radial-gradient(circle at 35% 30%, #60A5FA, #1D4ED8 70%, #1E3A8A);
  border:1.5px solid #3B82F6;
  box-shadow:0 0 10px rgba(255,217,0,.6);
  z-index:3;
  animation:smPaylineTip 2.2s ease-in-out infinite;
}
.sm-payline-tip-l{left:-7px;clip-path:polygon(40% 0, 100% 50%, 40% 100%, 0 100%, 0 0)}
.sm-payline-tip-r{right:-7px;clip-path:polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%)}
@keyframes smPaylineTip{
  0%,100%{box-shadow:0 0 6px rgba(255,217,0,.5)}
  50%   {box-shadow:0 0 14px rgba(255,217,0,1), 0 0 24px rgba(59,130,246,.5)}
}

.reel{
  position:relative;
  background:linear-gradient(180deg, #ffffff 0%, #f3e0ea 50%, #ddc8d6 100%);
  border-radius:10px;border:1.5px solid #b890a4;
  overflow:hidden;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.18),
    inset 0 -2px 4px rgba(255,255,255,.4);
}
.reel::before{
  /* faint vertical reel rib so it reads as a real spinning reel cylinder */
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.06) 0%, transparent 8%, transparent 92%, rgba(0,0,0,.06) 100%);
  border-radius:inherit;
}
.reel-strip{display:flex;flex-direction:column;line-height:1;align-items:center;transition:transform 2s cubic-bezier(.17,.67,.21,.99)}
.reel-strip span{display:flex;align-items:center;justify-content:center;height:180px;width:100%;flex-shrink:0}
.reel-strip span svg{width:108px;height:108px;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.28))}
/* While spinning, blur the strip slightly so symbols read as motion */
.slots-machine.spinning .reel-strip{filter:blur(1.5px)}

/* ----- Coin tray with credits readout ----- */
.sm-tray{
  margin-top:18px;
  background:linear-gradient(180deg,#0a0f1f 0%, #18181f 50%, #0a0f1f 100%);
  border:2px solid #3B82F6;border-radius:14px;
  padding:10px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.6), 0 4px 0 rgba(0,0,0,.35);
}
.sm-tray-slot{
  flex:1;height:8px;border-radius:6px;
  background:linear-gradient(180deg, #050505, #2a0008);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.05);
}
.sm-tray-credits{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;
  font-family:'Sora';
}
.sm-tray-credits-label{
  font-family:'Inter';font-weight:800;font-size:9px;letter-spacing:.22em;
  color:#3B82F6;opacity:.75;
}
.sm-tray-credits-val{
  font-family:'Sora';font-weight:800;font-size:18px;letter-spacing:.05em;
  color:#3B82F6;
  text-shadow:0 0 10px rgba(255,217,0,.7);
  font-variant-numeric:tabular-nums;
}

/* ----- 3D pull lever ----- */
.sm-lever{
  position:absolute;right:-32px;top:80px;
  width:36px;height:160px;z-index:5;
}
.sm-lever-mount{
  position:absolute;left:50%;top:0;
  width:18px;height:14px;transform:translateX(-50%);
  background:linear-gradient(180deg,#5c5c66,#0a0f1f);
  border-radius:6px 6px 2px 2px;
  border:1px solid #1a1a1f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.sm-lever-arm{
  position:absolute;left:50%;top:8px;
  width:9px;height:120px;transform:translateX(-50%);
  background:linear-gradient(90deg,#0f1530 0%,#dbe5f5 35%,#fff 50%,#dbe5f5 65%,#0f1530 100%);
  border-radius:5px;
  box-shadow:
    0 2px 4px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.sm-lever-knob{
  position:absolute;left:50%;top:8px;
  width:30px;height:30px;border-radius:50%;
  transform:translate(-50%, -50%);
  background:radial-gradient(circle at 32% 28%, #fff 0%, #60A5FA 25%, #1D4ED8 65%, #0F1F4D 100%);
  border:2px solid #2a0008;
  box-shadow:
    0 5px 10px rgba(0,0,0,.55),
    inset 0 2px 6px rgba(255,255,255,.5),
    inset 0 -3px 6px rgba(0,0,0,.4),
    0 0 18px rgba(59,130,246,.4);
  animation:smLeverIdle 3.5s ease-in-out infinite;
}
.slots-machine.spinning .sm-lever-knob{animation:smLeverPull .65s cubic-bezier(.34,1.56,.64,1)}
.slots-machine.spinning .sm-lever-arm{animation:smLeverPullArm .65s cubic-bezier(.34,1.56,.64,1)}
@keyframes smLeverIdle{
  0%,100%{transform:translate(-50%,-50%)}
  50%   {transform:translate(-50%,-46%)}
}
@keyframes smLeverPull{
  0%  {transform:translate(-50%,-50%)}
  40% {transform:translate(-50%,55%)}
  100%{transform:translate(-50%,-50%)}
}
@keyframes smLeverPullArm{
  0%  {transform:translateX(-50%) scaleY(1)}
  40% {transform:translateX(-50%) scaleY(1.6)}
  100%{transform:translateX(-50%) scaleY(1)}
}

/* Win pump animation on the cabinet */
.slots-machine.win{animation:smWinPump .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes smWinPump{
  0%   {transform:scale(1)}
  35%  {transform:scale(1.025) rotate(-.5deg)}
  60%  {transform:scale(1.015) rotate(.5deg)}
  100% {transform:scale(1)}
}
.slots-machine.win .sm-marquee{animation:smMarqueeWin 1s ease-out}
@keyframes smMarqueeWin{
  0%{filter:drop-shadow(0 0 14px rgba(255,217,0,.65))}
  50%{filter:drop-shadow(0 0 28px rgba(59,130,246,1)) drop-shadow(0 0 60px rgba(255,217,0,.7))}
  100%{filter:drop-shadow(0 0 14px rgba(255,217,0,.65))}
}

/* ----- Win-tier celebrations -----
   The base .win class above gives a small pump + marquee glow. The tier
   modifiers escalate the cabinet pump magnitude, marquee glow intensity,
   and floor halo brightness so a 50× payout feels meaningfully bigger
   than a 5× payout. Tier classes are added by the slots win branch in
   app.js based on payout/bet ratio (5× / 15× / 50× thresholds). */

/* BIG WIN — pump harder, halo gets brighter, marquee glow doubles. */
.slots-machine.win.bigwin{
  animation:smWinPumpBig 1.4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes smWinPumpBig{
  0%   {transform:scale(1)}
  20%  {transform:scale(1.06) rotate(-1deg)}
  40%  {transform:scale(1.03) rotate(1deg)}
  60%  {transform:scale(1.05) rotate(-.5deg)}
  100% {transform:scale(1)}
}
.slots-machine.win.bigwin .sm-floor-halo{
  animation:smFloorBurstBig 1.4s ease-out;
}
@keyframes smFloorBurstBig{
  0%   {opacity:.75; transform:scaleX(1)}
  35%  {opacity:1;   transform:scaleX(1.30)}
  100% {opacity:.75; transform:scaleX(1)}
}

/* MEGA WIN — bigger pump still + faster marquee strobe + sustained
   halo flare. */
.slots-machine.win.megawin{
  animation:smWinPumpMega 1.4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes smWinPumpMega{
  0%   {transform:scale(1)}
  15%  {transform:scale(1.10) rotate(-1.5deg)}
  35%  {transform:scale(1.05) rotate(1.5deg)}
  55%  {transform:scale(1.08) rotate(-.5deg)}
  100% {transform:scale(1)}
}
.slots-machine.win.megawin .sm-marquee{
  animation:smMarqueeMega .55s ease-in-out 3;
}
@keyframes smMarqueeMega{
  0%,100%{filter:drop-shadow(0 0 14px rgba(255,217,0,.65)); transform:scale(1)}
  50%   {filter:drop-shadow(0 0 38px rgba(255,217,0,1)) drop-shadow(0 0 80px rgba(59,130,246,.8)); transform:scale(1.08)}
}
.slots-machine.win.megawin .sm-floor-halo{
  animation:smFloorBurstMega 1.4s ease-out;
}
@keyframes smFloorBurstMega{
  0%   {opacity:.75; transform:scaleX(1)}
  25%  {opacity:1;   transform:scaleX(1.55); filter:blur(8px)}
  100% {opacity:.75; transform:scaleX(1)}
}

/* JACKPOT — full theatrical: cabinet shakes laterally, marquee flashes
   white, halo blazes, payline pulses red+gold. */
.slots-machine.win.jackpot-win{
  animation:smJackpotShake 1.8s cubic-bezier(.36,.07,.19,.97);
}
@keyframes smJackpotShake{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  6%,18%,30%,42%,54%,66%,78%{ transform:translate3d(-4px,0,0) scale(1.02) }
  12%,24%,36%,48%,60%,72%,84%{ transform:translate3d(4px,0,0)  scale(1.02) }
  90%{ transform:translate3d(0,0,0) scale(1.05) }
}
.slots-machine.win.jackpot-win .sm-marquee{
  animation:smMarqueeJackpot .35s linear 5;
}
@keyframes smMarqueeJackpot{
  0%,100%{
    filter:drop-shadow(0 0 14px rgba(255,217,0,.65));
    -webkit-text-fill-color:transparent;
  }
  50%{
    filter:drop-shadow(0 0 30px #fff) drop-shadow(0 0 60px rgba(255,217,0,1));
    -webkit-text-fill-color:#fff;
  }
}
.slots-machine.win.jackpot-win .sm-floor-halo{
  animation:smFloorJackpot 1.8s ease-out;
}
@keyframes smFloorJackpot{
  0%   {opacity:.75; transform:scaleX(1); filter:blur(14px)}
  20%  {opacity:1;   transform:scaleX(1.85); filter:blur(20px)}
  60%  {opacity:.95; transform:scaleX(1.55); filter:blur(16px)}
  100% {opacity:.75; transform:scaleX(1);    filter:blur(14px)}
}
.slots-machine.win.jackpot-win .sm-payline{
  animation:smPaylineJackpot .25s linear 7;
}
@keyframes smPaylineJackpot{
  0%,100%{ box-shadow:0 0 12px rgba(59,130,246,.85), 0 0 24px rgba(59,130,246,.4) }
  50%   { box-shadow:0 0 24px #fff, 0 0 48px rgba(255,217,0,1), 0 0 80px rgba(59,130,246,.7) }
}

.slots-controls{display:grid;grid-template-columns:1fr;gap:14px;align-items:end;max-width:420px;margin:0 auto 16px;justify-items:stretch}
.slots-controls > .btn{width:100%;height:54px;font-size:15px;letter-spacing:.18em}

/* ---- SLOTS SHELL — Stake/Bloxflip-style 2-col layout ----------
   Mirrors .bj-shell-grid: controls panel on the left, slot machine
   on the right at >=880px. Mobile collapses to single column with
   the cabinet first, controls below. */
.slots-shell-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  /* Wider felt — was 1100px which left ~400px of empty space on each
     side at 1990px viewport. 1500px uses meaningfully more of the
     content column without getting ridiculous on ultra-wide monitors. */
  max-width:1500px;
  margin:0 auto 20px;
  align-items:start;
}
.slots-shell-grid > .slots-controls{
  /* Override the centred 1-col grid above — in the side panel we
     want a vertical flex stack matching blackjack's panel. */
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:none;
  margin:0;
  padding:18px;
  background:linear-gradient(180deg, rgba(15,8,12,.85), rgba(4,2,4,.85));
  border:1px solid rgba(34,211,238,.22);
  border-radius:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 22px rgba(0,0,0,.35);
}
.slots-shell-grid > .slots-controls .control-group{
  /* Same legacy-flex-100% override the BJ panel needed — flex-basis
     100% in column flex eats the panel height. Reset to auto. */
  flex:0 0 auto;
  width:100%;
  margin:0;
}
.slots-shell-grid > .slots-controls .control-group label{
  display:block;
  font-family:'Inter',sans-serif;
  font-weight:800;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin-bottom:6px;
}
.slots-shell-grid > .slots-controls .btn.big{
  width:100%;max-width:none;min-width:0;
  flex:0 0 auto;
  height:54px;font-size:15px;letter-spacing:.12em;
  margin-top:6px;
}
/* Cabinet sits in the right column — centered with a sane width cap.
   max-width:none was letting it stretch to the full ~1160px column at
   1500px grid width, giving a wide-and-squat aspect ratio (2.4:1) that
   read nothing like a real slot machine. 780px caps it at the same
   width as the BJ felt for a cohesive look across games. */
.slots-shell-grid > .slots-machine{
  margin:0 auto;
  max-width:780px;
  width:100%;
}
@media (max-width: 880px){
  .slots-shell-grid{ grid-template-columns: 1fr }
  .slots-shell-grid > .slots-controls{ order:2 }
}

/* ----- Paytable v2 (cards) ----- */
.paytable-v2{
  max-width:780px;margin:0 auto;
  background:rgba(255,255,255,.015);
  border:1px solid var(--pd-line-hover, rgba(255,255,255,.10));border-radius:14px;
  padding:16px 18px;
}
.paytable-v2 .pt-head{margin-bottom:14px;text-align:left}
.paytable-v2 .pt-head-title{
  font-family:'Manrope','Inter',sans-serif;font-weight:800;font-size:13px;letter-spacing:.24em;color:#e9eef5;text-transform:uppercase;
}
.paytable-v2 .pt-head-sub{
  font-family:'Inter';font-weight:600;font-size:11.5px;color:var(--text-mute);
  letter-spacing:.02em;margin-top:3px;
}
.paytable-v2 .pt-grid{
  display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:10px;
}
@media (max-width:760px){.paytable-v2 .pt-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
.paytable-v2 .pt-card{
  --tier:#9aa3ab; --tier-bd:rgba(154,163,171,.22); --tier-bg:rgba(154,163,171,.05);
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:12px 8px 13px;
  background:var(--tier-bg);
  border:1px solid var(--tier-bd);border-radius:10px;
  transition:transform .22s cubic-bezier(.16,1,.3,1), border-color .2s ease;
}
.paytable-v2 .pt-card:hover{
  transform:translateY(-2px);
  border-color:var(--tier);
}
.paytable-v2 .pt-card-name{
  font-family:'Inter';font-weight:800;font-size:12px;letter-spacing:.18em;
  color:var(--text-mute);text-transform:uppercase;
  position:relative;z-index:1;
}
.paytable-v2 .pt-card-syms{
  display:flex;align-items:center;gap:2px;
  position:relative;z-index:1;
}
.paytable-v2 .pt-card-syms .pt-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
.paytable-v2 .pt-card-syms .pt-icon svg{width:100%;height:100%}
.paytable-v2 .pt-card-syms-pair .pt-icon-q{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1.5px dashed rgba(255,255,255,.3);
  border-radius:8px;
  font-family:'Sora';font-weight:800;font-size:18px;color:var(--text-mute);
}
.paytable-v2 .pt-card-mult{
  font-family:'Manrope','Sora',sans-serif;font-weight:800;font-size:20px;letter-spacing:.01em;
  color:var(--tier);
  font-variant-numeric:tabular-nums;
}

/* ----- Rarity tag — squared hairline chip (matches the lobby cs-br-tag) ----- */
.paytable-v2 .pt-rarity-badge{
  font-family:'Inter';font-weight:800;font-size:9px;letter-spacing:.14em;
  padding:3px 7px;border-radius:4px;
  text-transform:uppercase;
  color:var(--tier);
  border:1px solid var(--tier-bd);
  background:var(--tier-bg);
  white-space:nowrap;line-height:1;font-style:normal;
}
/* Per-tier color tokens. Restrained ladder, cohesive with the site's blue
   accent; brightness rises with rarity. Full borders + a faint tint carry the
   tier — no glow box-shadows, no pills, no shimmer. The tag and the multiplier
   are the only color cues, so the grid reads as a calm tiered ledger. */
.paytable-v2 .pt-rarity-common    { --tier:#9aa3ab; --tier-bd:rgba(154,163,171,.22); --tier-bg:rgba(154,163,171,.05); }
.paytable-v2 .pt-rarity-uncommon  { --tier:#5fd39a; --tier-bd:rgba(95,211,154,.28);  --tier-bg:rgba(95,211,154,.06); }
.paytable-v2 .pt-rarity-rare      { --tier:#57abf8; --tier-bd:rgba(87,171,248,.32);   --tier-bg:rgba(87,171,248,.07); }
.paytable-v2 .pt-rarity-epic      { --tier:#b78cff; --tier-bd:rgba(183,140,255,.34);  --tier-bg:rgba(183,140,255,.08); }
.paytable-v2 .pt-rarity-legendary { --tier:#f0b54a; --tier-bd:rgba(240,181,74,.36);   --tier-bg:rgba(240,181,74,.08); }
.paytable-v2 .pt-rarity-mythic    { --tier:#ffd36b; --tier-bd:rgba(255,211,107,.44);  --tier-bg:rgba(255,211,107,.10); }
.paytable-v2 .pt-rarity-pair      { --tier:#9aa3ab; --tier-bd:rgba(154,163,171,.22);  --tier-bg:rgba(154,163,171,.05); }

/* ============================================================
   STATS ROW — fills the empty space below every game
   YOUR HISTORY + TOP WINS TODAY
============================================================ */
.stats-row{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-top:18px;
}
.stats-col{
  position:relative;
  background:linear-gradient(135deg, rgba(15,8,12,.85), rgba(4,2,4,.85));
  border:1px solid var(--line-2);border-radius:14px;
  padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
  min-height:240px;
  overflow:hidden;
}
/* Subtle brand-claret accent stripe at the very top of each card.
   Reads as the same "premium card top edge" treatment we ship on
   the coinflip result-card — visual signature of a BloxHit panel. */
.stats-col::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(59,130,246,.55) 35%,
    rgba(59,130,246,.55) 65%,
    transparent 100%);
  pointer-events:none;
}
.stats-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:10px;
  /* Solid hairline (claret-tinted) instead of the prior dashed line —
     reads cleaner and on-brand with the card's red trim language. */
  border-bottom:1px solid rgba(59,130,246,.18);
}
.stats-title{
  font-family:'Sora';font-weight:900;font-size:16px;letter-spacing:.08em;
  color:#fff;
}
.stats-meta{
  font-family:'Inter';font-weight:800;font-size:12px;letter-spacing:.12em;
  color:var(--text-mute);
  display:inline-flex;align-items:center;gap:6px;
  text-transform:uppercase;
}
.stats-meta.live{color:var(--green)}
.live-dot-mini{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:onlineP 1.4s ease-in-out infinite;
}
.stats-list{
  display:flex;flex-direction:column;gap:6px;
  flex:1;
  max-height:280px;
  overflow-y:auto;overflow-x:hidden; /* prevent hover-translate pulse */
}
.stats-list::-webkit-scrollbar{width:4px}
.stats-list::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:2px}
.stats-empty{
  text-align:center;color:var(--text-mute);
  padding:40px 16px;font-style:italic;font-size:15px;
  font-family:'Inter';font-weight:600;
}

/* History rows */
.hist-row{
  display:grid;
  /* Reserve a stable amount for the profit column so the meta (1fr)
     never collapses below readable. The auto-sized profit was eating
     the meta column when the row was narrow, causing the time-ago
     text to wrap into 2 lines and visually overlap the profit. */
  grid-template-columns:34px 1fr minmax(64px, auto);
  align-items:center;
  column-gap:12px;
  padding:9px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  font-family:'Inter';
  animation:histIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes histIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.hist-row.win{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.06)}
.hist-row.loss{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.06)}
.hist-row.push{border-color:rgba(255,217,0,.35);background:rgba(255,217,0,.06)}
.hr-icon{
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line-2);
  font-size:18px;
  overflow:hidden;
}
.hr-icon svg{width:22px;height:22px;display:block}
.hist-row.win  .hr-icon{background:linear-gradient(135deg, rgba(40,199,111,.22), rgba(59,130,246,.05));border-color:rgba(40,199,111,.35);color:#28c76f}
.hist-row.loss .hr-icon{background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(59,130,246,.05));border-color:rgba(59,130,246,.35);color:#3B82F6}
.hist-row.push .hr-icon{background:linear-gradient(135deg, rgba(255,217,0,.22), rgba(59,130,246,.05));border-color:rgba(255,217,0,.35);color:#3B82F6}

/* ----- per-icon idle animations ----- */
.hi{transform-origin:center;transform-box:fill-box}
.hi-rocket-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiRocket 2.4s ease-in-out infinite}
.hi-rocket-flame{transform-origin:50% 80%;transform-box:fill-box;animation:hiFlame .26s ease-in-out infinite alternate}
.hi-boom-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiBoom 1.4s ease-in-out infinite}
.hi-cards-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiCards 3.2s ease-in-out infinite}
.hi-gem-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiGem 2.6s ease-in-out infinite}
.hi-gem-spark{animation:hiGemSpark 1.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.hi-bomb-g{transform-origin:50% 65%;transform-box:fill-box;animation:hiBomb 2.4s ease-in-out infinite}
.hi-bomb-fuse{transform-origin:18px 6px;transform-box:fill-box;animation:hiBombFuse .35s ease-in-out infinite alternate}
.hi-dice-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiDice 2.8s ease-in-out infinite}
.hi-trend-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiTrend 2.4s ease-in-out infinite}
.hi-trend-tip{animation:hiTrendTip 1.8s ease-in-out infinite}
.hi-target-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiTarget 2.8s ease-in-out infinite}
.hi-arrow-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiArrow 1.8s ease-in-out infinite}
.hi-push-g{transform-origin:50% 50%;transform-box:fill-box;animation:hiPush 2s ease-in-out infinite}
@keyframes hiRocket{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-1.5px) rotate(2deg)}}
@keyframes hiFlame{from{transform:scaleY(.85)}to{transform:scaleY(1.15)}}
@keyframes hiBoom{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(20deg)}}
@keyframes hiCards{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes hiGem{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes hiGemSpark{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.6)}}
@keyframes hiBomb{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes hiBombFuse{from{transform:scale(.85);opacity:.7}to{transform:scale(1.25);opacity:1}}
@keyframes hiDice{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes hiTrend{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes hiTrendTip{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes hiTarget{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes hiArrow{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes hiPush{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.hr-meta{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.hr-label{
  font-weight:700;font-size:12.5px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.01em;
  line-height:1.25;
}
.hr-time{
  font-size:10.5px;color:var(--text-mute);font-weight:600;
  white-space:nowrap;        /* don't let "7h ago" wrap into 2 lines */
  overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.02em;
  line-height:1.2;
}
.hr-profit{
  font-family:'Sora';font-weight:700;font-size:15px;letter-spacing:.02em;
  flex-shrink:0;
  white-space:nowrap;
  text-align:right;
  justify-self:end;
}
.hist-row.win .hr-profit{color:var(--green)}
.hist-row.loss .hr-profit{color:var(--red)}
.hist-row.push .hr-profit{color:var(--gold)}

/* Leaderboard rows */
.lead-row{
  display:grid;grid-template-columns:32px 32px 1fr auto;align-items:center;gap:10px;
  padding:8px 12px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  font-family:'Inter';
}
.lead-row:nth-child(1){
  background:linear-gradient(135deg, rgba(255,217,0,.18), rgba(255,255,255,.03));
  border-color:rgba(255,217,0,.45);
}
.lead-row:nth-child(2){
  background:linear-gradient(135deg, rgba(192,192,192,.14), rgba(255,255,255,.03));
  border-color:rgba(192,192,192,.4);
}
.lead-row:nth-child(3){
  background:linear-gradient(135deg, rgba(205,127,50,.18), rgba(255,255,255,.03));
  border-color:rgba(205,127,50,.45);
}
.lead-rank{
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Sora';font-weight:400;font-size:14px;
  background:rgba(255,255,255,.05);color:var(--text-dim);
  border:1px solid var(--line-2);
}
.lead-rank.rank-1{background:linear-gradient(135deg,#3B82F6,#1E3A8A);color:#5c3800;border-color:#1E3A8A;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.lead-rank.rank-2{background:linear-gradient(135deg,#e8e8ee,#806060);color:#0a0f1f;border-color:#806060}
.lead-rank.rank-3{background:linear-gradient(135deg,#e0a060,#1E3A8A);color:#fff;border-color:#1E3A8A}
.lead-avatar{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;border:1.5px solid rgba(255,255,255,.2);
}
.lead-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.lead-name{font-weight:700;font-size:15px;color:var(--text);letter-spacing:.02em}
.lead-bet{font-size:12px;color:var(--text-mute);font-weight:600}
.lead-pay{
  font-family:'Sora';font-weight:400;font-size:16px;color:var(--green);
  letter-spacing:.04em;text-shadow:0 0 8px rgba(59,130,246,.4);
}

@media (max-width: 700px){
  .stats-row{grid-template-columns:1fr;gap:10px}
  .stats-col{min-height:200px}
}

/* ============================================================
   CASES
============================================================ */
.cases-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;
}
@media (max-width:1100px){ .cases-row{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .cases-row{grid-template-columns:repeat(2,1fr)} }
@media (max-width:440px){ .cases-row{grid-template-columns:1fr} }
.case-card{
  position:relative;
  border-radius:18px;padding:18px 16px 14px;
  cursor:pointer;
  background:linear-gradient(165deg, rgba(15,8,12,.85), rgba(8,4,8,.95));
  border:1px solid var(--line-2);
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .3s;
  display:flex;flex-direction:column;align-items:stretch;gap:10px;
  overflow:hidden;text-align:center;color:var(--text);font-family:'Inter';
  will-change:transform;
}
.case-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 28px var(--case-glow,rgba(59,130,246,.35));
  border-color:rgba(255,255,255,.25);
}
.case-card:hover .cc-art{transform:translateY(-3px) scale(1.04)}
.case-card.selected{
  border-color:var(--gold);
  box-shadow:0 0 0 2px var(--gold), 0 16px 36px rgba(255,217,0,.3), 0 0 28px var(--case-glow,rgba(59,130,246,.35));
}

.cc-art{
  position:relative;
  width:100%;aspect-ratio:11/10;
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.cc-art .case-art{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
/* gentle emerge animation on the items at top */
.case-emerge{transform-origin:50% 78px;animation:emergeBob 3.6s ease-in-out infinite}
@keyframes emergeBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

.case-card .cc-name{
  font-family:'Inter';font-weight:700;font-size:16px;
  color:var(--text-dim);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:2px;
}
.cc-price-row{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:'Sora';font-weight:400;font-size:24px;color:#fff;
  letter-spacing:.02em;
}
.cc-price-coin{display:inline-flex;align-items:center}
.cc-rarity-bar{
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;
  margin-top:6px;
}
.cc-bar-seg{
  height:4px;border-radius:99px;
  background:rgba(255,255,255,.08);
  transition:background .3s, box-shadow .3s;
}
.cc-bar-seg.active.seg-1{background:#3B82F6;box-shadow:0 0 8px #3B82F6}
.cc-bar-seg.active.seg-2{background:#28c76f;box-shadow:0 0 8px #28c76f}
.cc-bar-seg.active.seg-3{background:#3B82F6;box-shadow:0 0 8px #3B82F6}
.cc-bar-seg.active.seg-4{background:#06B6D4;box-shadow:0 0 8px #06B6D4}
.cc-bar-seg.active.seg-5{background:#3B82F6;box-shadow:0 0 10px #3B82F6}

.cases-stage{
  /* Stage height bumped 220 → 290px to give the 196×260 reel items
     room to render without crowding the spotlight pointers. */
  position:relative;height:290px;border-radius:16px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(59,130,246,.10) 0%, transparent 65%),
    linear-gradient(180deg, rgba(16,23,42,.65), rgba(7,10,22,.85));
  border:1px solid rgba(255,255,255,.05);
  margin-bottom:0;overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 28px rgba(0,0,0,.40);
  /* Isolate paint + layout from the rest of the page so the spinning
     reel doesn't trigger reflows / repaints in surrounding sections.
     Each stage gets its own composite layer via the reel transform
     below; contain: paint promotes that layer and clips repaint
     damage to within the stage box. Major win when 4 reels animate
     at once. */
  contain: layout paint;
}
/* The reel does the heavy lifting — translate transforms at 60fps
   across a 7800px-wide strip. Promote it to its own GPU layer so the
   compositor handles the animation without main-thread paint per
   frame. `will-change` is the modern hint browsers use to decide
   layer promotion. */
.cases-reel{ will-change: transform; }
/* Unbloxed-style: no center glow column. The ▲/▼ chevrons at the
   top + bottom of the stage carry the indicator job alone — the
   reel reads as "target column" between the two ticks without any
   colored line cutting through the items. The element stays in
   the DOM (kept by some legacy class toggles in the JS landing
   handler) but renders zero pixels. */
.cases-spotlight{
  position:absolute;left:50%;top:14px;bottom:14px;width:0;
  transform:translateX(-50%);
  background:none;
  pointer-events:none;
  z-index:2;
  box-shadow:none;
  display:none;
}
/* Triangle pointers retired — kept as no-op selectors so the legacy
   HTML still validates without throwing styles. */
.cases-pointer{ display:none !important; }
.cases-reel-wrap{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center}
.cases-reel{display:flex;gap:10px;padding:0 10px;height:160px;align-items:center;transition:transform 5s cubic-bezier(.05,.7,.1,1)}
.case-item{
  flex:0 0 140px;height:140px;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:4px;
  padding:14px 8px 10px;
  font-family:'Inter';font-weight:700;font-size:13px;color:#fff;
  border:2px solid rgba(255,255,255,.25);
  box-shadow:0 4px 0 rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.35);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  position:relative;overflow:hidden;
}
.ci-icon-wrap{
  width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), rgba(0,0,0,.3) 90%);
  border:2px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -4px 10px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);
  position:relative;z-index:2;
}
.ci-icon{font-size:30px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.ci-mult{font-family:'Sora';font-size:18px;font-weight:400;letter-spacing:.04em}
.ci-name{font-size:12px;opacity:.95;text-align:center;padding:0 6px;line-height:1.1;letter-spacing:.02em}
.ci-rarity{position:absolute;top:6px;left:6px;right:6px;height:3px;border-radius:2px}
.ci-rarity-tag{
  position:absolute;top:6px;right:6px;
  padding:2px 6px;border-radius:6px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.25);
  font-family:'Sora';font-weight:400;font-size:9px;letter-spacing:.1em;
  color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.6);
  z-index:3;
}
.ci-shine{
  position:absolute;left:-50%;top:0;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg);
  animation:itemShine 4s linear infinite;
  pointer-events:none;
}
@keyframes itemShine{
  0%{left:-60%}
  60%,100%{left:120%}
}

.rarity-common{background:linear-gradient(135deg,#806060,#5b6680)}
.rarity-common .ci-rarity{background:#cfd5e2}
.rarity-uncommon{background:linear-gradient(135deg,#3B82F6,#1E3A8A)}
.rarity-uncommon .ci-rarity{background:#a8c7ff}
.rarity-rare{background:linear-gradient(135deg,#1D4ED8,#380505)}
.rarity-rare .ci-rarity{background:#b8a3ff}
.rarity-epic{background:linear-gradient(135deg,#3B82F6,#1E3A8A)}
.rarity-epic .ci-rarity{background:#93c5fd}
.rarity-legendary{background:linear-gradient(135deg,#3B82F6,#1E3A8A)}
.rarity-legendary .ci-rarity{background:#ffe05c}
.rarity-mythic{background:linear-gradient(135deg,#1D4ED8,#1D4ED8)}
.rarity-mythic .ci-rarity{background:#93c5fd}
.rarity-mythic::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  background:conic-gradient(from 0deg,#1D4ED8,#3B82F6,#00ffd5,#1D4ED8,#1D4ED8);
  z-index:-1;animation:mythicSpin 3s linear infinite;
}
@keyframes mythicSpin{to{transform:rotate(360deg)}}

.case-items-section{margin:20px 0}
.case-items-title{
  font-family:'Sora';font-size:20px;color:var(--text);margin-bottom:12px;font-weight:400;
  letter-spacing:.02em;
}
.case-items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:16px}
/* Mobile: drop the min to 130 so 2 cards fit per row at 375px-ish
   viewports instead of dropping to 1-up giant cards. */
@media (max-width: 760px){
  .case-items-grid{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
}
.cig-item{
  border-radius:14px;padding:14px 10px 10px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border:1px solid rgba(255,255,255,.2);color:#fff;position:relative;
  font-family:'Inter';overflow:hidden;
  box-shadow:0 4px 0 rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.3);
  transition:transform .25s cubic-bezier(.2,.8,.25,1);
}
.cig-item:hover{transform:translateY(-3px) scale(1.03)}
.cig-rarity-tag{
  position:absolute;top:6px;right:6px;
  padding:2px 6px;border-radius:6px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);
  font-family:'Sora';font-size:9px;letter-spacing:.1em;color:#fff;
  z-index:3;
}
.cig-icon-wrap{
  width:48px;height:48px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), rgba(0,0,0,.3) 90%);
  border:2px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.3), 0 3px 6px rgba(0,0,0,.3);
}
.cig-icon{font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.cig-name{font-size:13px;font-weight:700;text-align:center;line-height:1.1;letter-spacing:.02em}
.cig-stats{
  display:flex;gap:8px;align-items:center;
  padding:3px 10px;border-radius:99px;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.18);
}
.cig-mult{font-family:'Sora';font-size:16px;letter-spacing:.04em}
.cig-pct{font-size:12px;opacity:.85}
.cig-shine{
  position:absolute;left:-50%;top:0;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-20deg);pointer-events:none;
  animation:itemShine 5s linear infinite;
}

.cases-controls{display:flex;justify-content:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}

.case-recent{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;
  padding:14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);min-height:100px;
}
.recent-empty{
  grid-column:1/-1;text-align:center;color:var(--text-mute);
  padding:20px;font-style:italic;font-size:15px;
}
.recent-item{
  position:relative;border-radius:10px;padding:10px 6px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:'Inter';color:#fff;border:1px solid rgba(255,255,255,.2);font-size:12px;
}
.recent-item .ri-icon{font-size:24px}
.recent-item .ri-mult{font-family:'Sora';font-weight:400;font-size:15px}

/* ============================================================
   DICE — 3D
============================================================ */
.dice-stage{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  max-width:780px;
  min-height:340px;
  max-height:480px;
  margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;gap:80px;
  perspective:1400px;
  /* Dice felt reverted to a pink wash — was red and washed out the white
     dice faces. */
  background:
    radial-gradient(ellipse at 50% 80%,rgba(0,0,0,.4),transparent 50%),
    radial-gradient(ellipse at center,rgba(255,109,180,.1),transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg-0));
  border:1px solid var(--line-2);
  border-radius:18px;
  overflow:hidden;
}
.dice-stage::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(59,130,246,.04) 0 20px,transparent 20px 40px);
  pointer-events:none;
}
.dice-shadow{
  position:absolute;bottom:60px;left:calc(50% - 140px);
  width:120px;height:30px;
  background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%);
  border-radius:50%;filter:blur(4px);
  animation:diceShadow 1.6s ease-in-out infinite;
}
.dice-shadow-2{left:calc(50% + 20px);animation-delay:-.3s}
@keyframes diceShadow{0%,100%{transform:scale(1) translateY(0);opacity:.6}50%{transform:scale(.7) translateY(-4px);opacity:.4}}
/* The wrapper carries idle bob, landing squash, win-pulse — and a baseline 3D
   tilt so the cube reads as 3D regardless of which face is forward.
   The inner .dice handles only the rotateX/rotateY for the chosen face,
   composed on top of the wrapper's tilt. */
.dice-cube-wrap{
  position:relative;
  width:120px;height:120px;
  perspective:1400px;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
  animation:diceIdle 4s ease-in-out infinite;
}
.dice-cube-wrap.landed{animation:diceLand .55s cubic-bezier(.36,.07,.19,.97)}
.dice-cube-wrap.win-pulse{animation:diceWinPulse .8s ease-out}
.dice-cube-wrap.loss-pulse{animation:diceLossPulse .8s ease-out}
.dice{
  position:relative;width:100%;height:100%;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
  transition:transform 2.4s cubic-bezier(.16,1,.3,1);
}
.dice-stage.rolling{animation:diceStageThrow .6s ease-out}
@keyframes diceStageThrow{
  0%{transform:translateY(0)}
  35%{transform:translateY(-18px)}
  100%{transform:translateY(0)}
}
@keyframes diceLand{
  0%  {transform-origin:center bottom; transform:translate3d(0,0,0)        rotateX(-18deg) rotateY(-18deg) scale(1,1)}
  20% {transform:translate3d(0,-10px,0) rotateX(-18deg) rotateY(-18deg) scale(1.06,.92)}
  45% {transform:translate3d(0,0,0)     rotateX(-18deg) rotateY(-18deg) scale(1.14,.84)}
  70% {transform:translate3d(0,-3px,0)  rotateX(-18deg) rotateY(-18deg) scale(.98,1.04)}
  100%{transform:translate3d(0,0,0)     rotateX(-18deg) rotateY(-18deg) scale(1,1)}
}
@keyframes diceIdle{
  0%,100%{transform:translate3d(0,0,0)    rotateX(-18deg) rotateY(-18deg)}
  50%    {transform:translate3d(0,-12px,0) rotateX(-18deg) rotateY(-18deg)}
}
.dice.rolling{animation:none}
.dface{
  position:absolute;width:120px;height:120px;border-radius:18px;
  display:grid;padding:14px;border:3px solid;
  box-shadow:inset 0 0 30px rgba(0,0,0,.25);
}
.dice-blue .dface{background:linear-gradient(135deg,#3B82F6,#1E3A8A);border-color:#3a0808}
.dice-red .dface{background:linear-gradient(135deg,#60A5FA,#1D4ED8);border-color:#1E3A8A}
.dice-blue .dface::after,.dice-red .dface::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 40%);
}
.dface i{
  background:#fff;border-radius:50%;display:block;
  box-shadow:inset 0 -3px 4px rgba(0,0,0,.5),0 1px 2px rgba(255,255,255,.3);
}
.df-1{place-items:center}.df-1 i{width:24px;height:24px}
.df-2{grid-template:repeat(3,1fr)/repeat(3,1fr)}
.df-2 i:nth-child(1){grid-area:1/1;width:18px;height:18px}.df-2 i:nth-child(2){grid-area:3/3;width:18px;height:18px}
.df-3{grid-template:repeat(3,1fr)/repeat(3,1fr)}
.df-3 i:nth-child(1){grid-area:1/1;width:18px;height:18px}
.df-3 i:nth-child(2){grid-area:2/2;width:18px;height:18px;justify-self:center;align-self:center}
.df-3 i:nth-child(3){grid-area:3/3;width:18px;height:18px}
.df-4,.df-5,.df-6{grid-template:repeat(3,1fr)/repeat(3,1fr)}
.df-4 i{width:18px;height:18px}
.df-4 i:nth-child(1){grid-area:1/1}.df-4 i:nth-child(2){grid-area:1/3}
.df-4 i:nth-child(3){grid-area:3/1}.df-4 i:nth-child(4){grid-area:3/3}
.df-5 i{width:18px;height:18px}
.df-5 i:nth-child(1){grid-area:1/1}.df-5 i:nth-child(2){grid-area:1/3}
.df-5 i:nth-child(3){grid-area:2/2;justify-self:center;align-self:center}
.df-5 i:nth-child(4){grid-area:3/1}.df-5 i:nth-child(5){grid-area:3/3}
.df-6 i{width:16px;height:16px}
.df-6 i:nth-child(1){grid-area:1/1}.df-6 i:nth-child(2){grid-area:1/3}
.df-6 i:nth-child(3){grid-area:2/1}.df-6 i:nth-child(4){grid-area:2/3}
.df-6 i:nth-child(5){grid-area:3/1}.df-6 i:nth-child(6){grid-area:3/3}

.df-1{transform:translateZ(60px)}
.df-6{transform:rotateY(180deg) translateZ(60px)}
.df-2{transform:rotateY(90deg) translateZ(60px)}
.df-5{transform:rotateY(-90deg) translateZ(60px)}
.df-3{transform:rotateX(90deg) translateZ(60px)}
.df-4{transform:rotateX(-90deg) translateZ(60px)}

.dice-controls{display:grid;grid-template-columns:1fr 2fr 1fr;gap:14px;align-items:end}
.dice-pred{display:flex;gap:8px;flex-wrap:wrap}
.dp-btn{
  flex:1;font-family:'Inter';font-weight:700;font-size:14px;
  padding:10px 12px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--text-dim);
  transition:all .25s cubic-bezier(.2,.8,.25,1);
}
.dp-btn:hover{background:rgba(59,130,246,.15);color:var(--text);border-color:var(--pink)}
.dp-btn.active{background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff;border-color:rgba(255,255,255,.2);box-shadow:0 0 16px rgba(59,130,246,.5)}

/* ============================================================
   MODAL — Stake-style: flat dark surface, smooth 16px edges,
   minimal chrome, blue accents only where meaningful.
============================================================ */
.modal-backdrop{
  position:fixed;inset:0;z-index:200;
  background:rgba(3,7,18,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:none;align-items:center;justify-content:center;
  /* max() so notched-iPhone safe-area insets push the modal panel away
     from the notch / home-indicator in landscape; desktop unchanged. */
  padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  animation:fadeIn .25s;
}
.modal-backdrop.open{display:flex}
@keyframes fadeIn{from{opacity:0}}
.modal{
  position:relative;width:min(620px,100%);
  /* 90vh fallback for browsers without dvh (older Safari, etc.); dvh
     value tracks the actual visible viewport on iOS so the modal
     doesn't extend under the URL bar / home-indicator. */
  max-height:90vh;
  max-height:90dvh;
  overflow-y:auto;
  background:#0F172A;
  border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:28px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.65),
    0 8px 22px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
  animation:modalIn .42s cubic-bezier(.16,1,.3,1);
}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1;cursor:pointer;font-size:18px;font-weight:600;
  transition:background .18s var(--ease-smooth), color .18s var(--ease-smooth), border-color .18s var(--ease-smooth);
}
.modal-close:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18)}
.modal-title{
  font-family:'Inter','Sora',sans-serif;
  font-weight:800;font-size:24px;color:#ffffff;margin-bottom:6px;
  letter-spacing:-.01em;
}
.modal-sub{color:#94a3b8;margin-bottom:22px;font-size:15px;font-weight:500}

.crypto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.crypto-card{
  padding:16px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  cursor:pointer;color:var(--text);text-align:left;font-family:'Inter';
  transition:transform .2s, border-color .2s;
}
.crypto-card:hover{transform:translateY(-3px);border-color:var(--pink)}
.crypto-card.selected{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,255,213,.18)}
.crypto-logo{
  width:36px;height:36px;border-radius:50%;margin-bottom:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Sora';font-weight:400;font-size:16px;color:#fff;
}
.crypto-btc{background:linear-gradient(135deg,#3B82F6,#fbbf24)}
.crypto-eth{background:linear-gradient(135deg,#627eea,#3b5998)}
.crypto-sol{background:linear-gradient(135deg,#1D4ED8,#14f195)}
.crypto-ltc{background:linear-gradient(135deg,#345d9d,#bebebe)}
.crypto-usdt{background:linear-gradient(135deg,#26a17b,#50af95)}
.crypto-doge{background:linear-gradient(135deg,#ad6900,#3B82F6)}
.crypto-name{font-weight:700;font-size:15px;letter-spacing:.5px;color:var(--text)}
.crypto-rate{font-size:13px;color:var(--text-mute);margin-top:2px;font-weight:600}

.deposit-detail{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:start}
.deposit-qr{
  width:160px;height:160px;border-radius:14px;
  background:#fff;border:3px solid var(--pink);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 0 24px rgba(59,130,246,.4);
}
.deposit-info label{display:block;font-family:'Inter';font-size:13px;letter-spacing:1.5px;font-weight:700;color:var(--text-mute);margin-bottom:6px}
.address-box{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);margin-bottom:10px}
.address-box code{flex:1;font-family:'Inter';font-size:13px;color:var(--cyan);word-break:break-all;font-weight:700}
.modal-note{font-size:14px;color:var(--text-mute);margin-bottom:14px;line-height:1.5;font-weight:600}

.modal-win{text-align:center;width:min(720px,100%)}
.modal-win .modal-title{display:flex;align-items:center;justify-content:center;gap:10px}
.title-burst{
  display:inline-block;font-size:34px;
  filter:drop-shadow(0 0 12px var(--gold));
  animation:burstSpin 3s ease-in-out infinite;
}
@keyframes burstSpin{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(12deg) scale(1.15)}}
.win-meta{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-bottom:18px;color:var(--text-dim);font-size:15px;
}
.wm-crate{
  font-family:'Sora';font-weight:400;color:var(--gold);
  letter-spacing:.04em;
}
.win-stage{
  display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;
  margin:8px 0 20px;min-height:240px;
}
.win-stage.multi .win-card{width:170px;height:220px}
.win-card{
  position:relative;
  width:220px;height:260px;
  border-radius:20px;
  padding:18px 14px 14px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:8px;
  border:3px solid rgba(255,255,255,.35);color:#fff;font-family:'Inter';
  animation:winPop .6s cubic-bezier(.34,1.56,.64,1) backwards;
  box-shadow:0 16px 40px rgba(0,0,0,.6), 0 0 32px rgba(255,255,255,.18);
  overflow:hidden;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
@keyframes winPop{
  0%{opacity:0;transform:scale(0) rotate(-180deg)}
  70%{transform:scale(1.1) rotate(8deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.wc-rarity-label{
  align-self:stretch;
  padding:4px 10px;border-radius:99px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.3);
  font-family:'Sora';font-size:13px;letter-spacing:.15em;
  text-transform:uppercase;text-align:center;
}
.wc-icon-wrap{
  width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.5), rgba(0,0,0,.35) 90%);
  border:3px solid rgba(255,255,255,.45);
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    inset 0 -8px 16px rgba(0,0,0,.35),
    inset 0 6px 12px rgba(255,255,255,.3),
    0 0 24px rgba(255,255,255,.25);
  margin:6px 0;
  animation:winIconBob 2.5s ease-in-out infinite;
}
@keyframes winIconBob{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-6px) rotate(4deg)}
}
.win-card .wc-icon{font-size:54px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.win-card .wc-name{font-size:16px;font-weight:700;letter-spacing:.02em;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.win-card .wc-mult{
  font-family:'Sora';font-weight:400;font-size:30px;letter-spacing:.04em;
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}
.win-card .wc-payout{
  padding:4px 12px;border-radius:99px;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.25);
  font-family:'Sora';font-size:16px;color:#dbeafe;
  letter-spacing:.04em;
}
.wc-shine{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:wcShine 3s ease-in-out infinite 1s;
}
@keyframes wcShine{
  0%,30%{transform:translateX(-100%)}
  50%,100%{transform:translateX(100%)}
}
/* mythic gets a rotating outer ring */
.win-card.rarity-mythic::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;
  background:conic-gradient(from 0deg,#1D4ED8,#3B82F6,#00ffd5,#1D4ED8,#1D4ED8);
  z-index:-1;animation:mythicSpin 3s linear infinite;
}
.win-card.rarity-legendary::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;
  background:conic-gradient(from 0deg,#3B82F6,#dbeafe,#3B82F6,#1E3A8A,#3B82F6);
  z-index:-1;animation:mythicSpin 5s linear infinite;
}

.win-summary{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px;
  padding:16px 20px;border-radius:14px;
  background:linear-gradient(135deg, rgba(59,130,246,.1), rgba(29,78,216,.1));
  border:1px solid var(--line-2);
  margin-bottom:18px;
}
.ws-cell{display:flex;flex-direction:column;align-items:center;gap:4px}
.ws-label{font-family:'Inter';font-size:12px;letter-spacing:.2em;color:var(--text-mute);font-weight:700}
.ws-val{font-family:'Sora';font-size:18px;color:var(--text);letter-spacing:.04em}
.ws-won{color:var(--gold)}
.ws-win{color:var(--green);text-shadow:0 0 14px rgba(59,130,246,.5)}
.ws-loss{color:var(--red);text-shadow:0 0 14px rgba(59,130,246,.5)}
.ws-arrow{font-family:'Sora';font-size:22px;color:var(--text-mute)}
.ws-cell-profit .ws-val{font-size:22px}

.win-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

/* ============================================================
   TOAST
============================================================ */
.toast-wrap{position:fixed;bottom:30px;right:30px;z-index:300;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
  padding:14px 20px;border-radius:14px;
  background:linear-gradient(135deg,var(--surface),var(--bg-2));
  border:1px solid var(--pink);
  font-family:'Inter';font-size:15px;font-weight:700;color:var(--text);
  box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 24px rgba(59,130,246,.3);
  animation:toastIn .3s ease, toastOut .3s ease 3s forwards;
  pointer-events:auto;
}
.toast.win{border-color:var(--green);box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 24px rgba(59,130,246,.45);color:#7be8a3}
.toast.loss{border-color:var(--red);box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 24px rgba(239,68,68,.45);color:#fca5a5}
.toast.info{border-color:var(--cyan);color:var(--cyan)}
@keyframes toastIn{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{to{opacity:0;transform:translateX(100px)}}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1300px){
  .layout{grid-template-columns:200px 1fr}
  .chat{display:none}
  .chat.open{display:flex;position:fixed;right:0;top:var(--topbar-h, 104px);width:320px;height:calc(100dvh - var(--topbar-h, 104px));z-index:60;box-shadow:-12px 0 40px rgba(0,0,0,.6)}
  .btn-icon-only{display:flex}
  .promo-strip{grid-template-columns:1fr 1fr}
  .promo-strip>:nth-child(3){display:none}
}
@media (max-width: 1000px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .online-pill{display:none}
  .hero{grid-template-columns:1fr;padding:32px}
  .hero-art{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .crash-controls{grid-template-columns:1fr 1fr}
  .crash-bet-btn{grid-column:1/-1}
  .mines-layout{grid-template-columns:1fr}
  .crypto-grid{grid-template-columns:repeat(2,1fr)}
  .deposit-detail{grid-template-columns:1fr}
  /* On narrow phones a fixed 160px QR is half the available width and
     wastes vertical space; let it scale down while keeping the design
     ceiling at 160px on slightly wider tablets. */
  .deposit-qr{margin:0 auto; width:min(160px, 60vw); height:min(160px, 60vw)}
  .bj-controls{grid-template-columns:1fr 1fr}
  .dice-controls{grid-template-columns:1fr}
  .bf-row{grid-template-columns:1fr 1fr 1fr 1fr;font-size:13px}
  .bf-row>*:nth-child(5){display:none}
  .promo-strip{grid-template-columns:1fr}
  .promo-strip>:nth-child(3){display:flex}
  .win-summary{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .win-summary .ws-arrow{display:none}
  .win-stage.multi .win-card{width:140px;height:200px}
}
@media (max-width: 700px){
  main{padding:14px 12px 40px}
  .topbar{padding:8px 12px;gap:8px}
  .logo-text{display:none}
  .balance{padding:6px 12px;font-size:15px}
  .balance-label{display:none}
  .btn-deposit{padding:8px 14px;font-size:13px}
  .btn-ghost{padding:8px 12px;font-size:13px}
  .profile{display:none}
  .hero{padding:24px 18px;border-radius:20px}
  .hero-title{font-size:42px}
  .hero-sub{font-size:16px}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:10px 12px}
  .stat-num{font-size:20px}
  .section-title{font-size:24px;margin:28px 0 14px}
  .game-grid{grid-template-columns:1fr 1fr;gap:12px}
  .game-card{height:210px;padding:14px}
  .gc-name{font-size:22px}
  .gc-tag{font-size:9px;padding:4px 10px;bottom:12px;left:14px}
  .gc-art{bottom:36px;width:60%}
  .gc-bubble{font-size:13px;padding:4px 9px}
  .gc-crash .gc-bubble{top:50px}
  .gc-crash .gc-bubble-2{bottom:40px}
  .promo{height:100px;padding:12px 14px}
  .promo-title{font-size:18px}
  .promo-sub{font-size:13px}
  .promo-art{width:80px;height:80px;right:-15px;bottom:-15px}
  .promo-art-coins::before,.promo-art-bonus::before{font-size:22px}
  .promo-art-crate::before{font-size:42px}
  .game-shell{padding:16px;border-radius:18px}
  .game-header{margin-bottom:16px;padding-bottom:14px}
  .game-title{font-size:22px}
  .game-status{font-size:12px;padding:6px 12px}
  /* CRASH */
  .crash-board{height:320px}
  .crash-multiplier{font-size:56px}
  .crash-rocket svg{width:42px;height:56px}
  /* MINES */
  .mines-grid{padding:8px;gap:6px;max-width:100%}
  .mine-tile{font-size:24px;border-radius:10px}
  .mines-panel{padding:14px}
  /* BLACKJACK */
  .bj-table{padding:18px 14px;min-height:320px;border-radius:140px / 22px}
  .bj-table::after{font-size:12px;letter-spacing:.2em}
  .bj-card{width:62px;height:90px;padding:6px 7px}
  .bj-card-rank{font-size:16px}
  .bj-card-suit-mini{font-size:12px}
  .bj-card-suit{font-size:24px}
  .bj-card.flipped::after{font-size:24px}
  .bj-cards{gap:6px;min-height:100px}
  .bj-controls{grid-template-columns:1fr 1fr;gap:10px}
  .bj-controls .control-group{grid-column:1/-1}
  /* SLOTS */
  .slots-machine{padding:14px 14px 18px;border-radius:22px}
  .sm-marquee{font-size:16px;letter-spacing:.12em}
  .sm-bulbs span{width:5px;height:5px}
  .sm-window{height:160px;padding:8px;gap:5px}
  .reel-strip span{height:140px}
  .reel-strip span svg{width:80px;height:80px}
  .sm-lever{display:none}
  .slots-controls{grid-template-columns:1fr;gap:10px}
  .paytable-v2{padding:14px}
  .paytable-v2 .pt-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .paytable-v2 .pt-card{padding:8px 6px 10px}
  .paytable-v2 .pt-card-syms .pt-icon{width:28px;height:28px}
  /* CASES */
  .cases-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .case-card{height:170px;padding:12px}
  .case-card .cc-name{font-size:18px}
  .case-card .cc-price{font-size:13px;padding:4px 10px}
  .cc-icon{font-size:54px}
  .cases-stage{height:160px}
  .case-item{flex:0 0 110px;height:110px;padding:10px 6px}
  .ci-icon-wrap{width:42px;height:42px}
  .ci-icon{font-size:22px}
  .ci-mult{font-size:16px}
  .ci-name{font-size:9px}
  .case-items-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  /* DICE */
  .dice-stage{height:280px;gap:24px}
  .dice{width:90px;height:90px;animation-name:diceIdleSm}
  .dface{width:90px;height:90px;padding:10px;border-radius:14px}
  .dface i{box-shadow:inset 0 -2px 3px rgba(0,0,0,.5)}
  .df-1 i{width:18px;height:18px}
  .df-2 i,.df-3 i,.df-4 i,.df-5 i{width:14px !important;height:14px !important}
  .df-6 i{width:12px !important;height:12px !important}
  .df-1{transform:translateZ(45px)}
  .df-6{transform:rotateY(180deg) translateZ(45px)}
  .df-2{transform:rotateY(90deg) translateZ(45px)}
  .df-5{transform:rotateY(-90deg) translateZ(45px)}
  .df-3{transform:rotateX(90deg) translateZ(45px)}
  .df-4{transform:rotateX(-90deg) translateZ(45px)}
  .dice-shadow{width:80px;left:calc(50% - 100px)}
  .dice-shadow-2{left:calc(50% + 16px)}
  .dice-controls{grid-template-columns:1fr;gap:10px}
  .dp-btn{font-size:13px;padding:8px 8px}
  /* MODALS */
  .modal{padding:20px 18px;border-radius:18px}
  .modal-title{font-size:24px}
  .crypto-grid{grid-template-columns:1fr 1fr}
  .crypto-card{padding:12px}
  /* WIN MODAL */
  .modal-win{width:min(520px,100%)}
  .win-stage{min-height:200px;gap:10px}
  .win-card{width:160px;height:200px;padding:12px 10px}
  .wc-icon-wrap{width:72px;height:72px}
  .win-card .wc-icon{font-size:40px}
  .win-card .wc-mult{font-size:24px}
  .win-card .wc-name{font-size:14px}
  .wc-rarity-label{font-size:12px}
  .win-card .wc-payout{font-size:14px;padding:3px 10px}
  .win-stage.multi .win-card{width:120px;height:170px}
  .win-stage.multi .wc-icon-wrap{width:58px;height:58px}
  .win-stage.multi .win-card .wc-icon{font-size:28px}
  .win-summary{padding:12px;font-size:14px}
  .ws-val{font-size:16px}
  .ws-cell-profit .ws-val{font-size:16px}
  /* TOPBAR */
  .toast{font-size:14px;padding:10px 16px}
  .toast-wrap{right:14px;bottom:14px;left:14px}
  .toast-wrap>.toast{max-width:100%}
}
@keyframes diceIdleSm{
  0%,100%{transform:translateY(0) rotateX(-15deg) rotateY(-15deg)}
  50%{transform:translateY(-8px) rotateX(-15deg) rotateY(-15deg)}
}
@media (max-width: 460px){
  .game-grid{grid-template-columns:1fr}
  .promo-strip{gap:10px;margin-bottom:16px}
  .stats{grid-template-columns:1fr 1fr}
  .hero-title{font-size:36px;line-height:1}
  .crash-multiplier{font-size:44px}
  .case-items-grid{grid-template-columns:1fr 1fr}
  .win-stage.multi .win-card{width:100%;max-width:200px}
  .win-summary{grid-template-columns:1fr;gap:6px;text-align:center}
  .win-summary .ws-arrow{display:none}
  .ws-cell{padding:6px 0;border-bottom:1px dashed var(--line-2)}
  .ws-cell-profit{border-bottom:none}
}

/* ============================================================
   BUSY BUTTON STATE — used by every game while in-progress
============================================================ */
.btn.is-busy{
  pointer-events:none;
  position:relative;
  cursor:wait;
  transform:translateY(0) scale(.99);
  filter:saturate(1.15);
  animation:btnBusyPulse 1.2s ease-in-out infinite;
}
.btn.is-busy::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
  background-size:240% 100%;
  background-position:130% 0;
  animation:btnBusySweep 1.1s linear infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}
.btn.is-busy .btn-shine{display:none}
.btn-busy-label{display:inline-flex;align-items:center;gap:8px;letter-spacing:.08em}
.btn-busy-dots{display:inline-flex;gap:3px;align-items:flex-end}
.btn-busy-dots i{
  width:5px;height:5px;border-radius:50%;
  background:currentColor;
  display:block;
  animation:btnBusyDot 1s ease-in-out infinite;
}
.btn-busy-dots i:nth-child(2){animation-delay:.15s}
.btn-busy-dots i:nth-child(3){animation-delay:.3s}
@keyframes btnBusyPulse{
  0%,100%{box-shadow:inherit}
  50%{filter:saturate(1.3) brightness(1.05)}
}
@keyframes btnBusySweep{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes btnBusyDot{
  0%,80%,100%{transform:translateY(0);opacity:.5}
  40%{transform:translateY(-4px);opacity:1}
}
/* primary busy variant — cycle through warm casino colors */
.btn-primary.is-busy{
  background:linear-gradient(180deg,#3B82F6 0%,#3B82F6 50%,#1E3A8A 100%);
  animation:btnBusyPulse 1.2s ease-in-out infinite, btnPrimaryBusyHue 2.6s linear infinite;
}
@keyframes btnPrimaryBusyHue{
  0%{filter:hue-rotate(0deg) saturate(1.2)}
  50%{filter:hue-rotate(-25deg) saturate(1.4) brightness(1.1)}
  100%{filter:hue-rotate(0deg) saturate(1.2)}
}
.btn-cashout.is-busy{
  animation:btnBusyPulse 1.2s ease-in-out infinite, btnCashoutBusyHue 2s linear infinite;
}
@keyframes btnCashoutBusyHue{
  0%,100%{filter:saturate(1.2) brightness(1)}
  50%{filter:saturate(1.4) brightness(1.1)}
}

/* ============================================================
   ANIMATED VIBRANT BACKGROUNDS — every game
============================================================ */
/* shared color noise dots layer (used inside game stages) */
@keyframes bgDriftA{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-30px,20px) scale(1.12)}
}
@keyframes bgDriftB{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-25px) scale(1.08)}
}
@keyframes bgDriftC{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-20px,-30px) scale(1.05)}
}
@keyframes bgScrollDots{
  from{background-position:0 0, 0 0}
  to  {background-position:80px 80px, -100px -120px}
}
@keyframes bgPanGrid{
  from{background-position:0 0, 0 0}
  to  {background-position:80px 0, 0 80px}
}

/* ---- Slots: sakura petals + neon glow drift ---- */
.slots-machine{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.slots-machine::before{
  content:"";position:absolute;inset:-30px;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 320px 200px at 18% 0%, rgba(255,108,174,.3), transparent 70%),
    radial-gradient(ellipse 360px 220px at 82% 100%, rgba(255,217,0,.22), transparent 70%),
    radial-gradient(ellipse 280px 220px at 50% 60%, rgba(29,78,216,.2), transparent 70%);
  animation:bgDriftA 14s ease-in-out infinite;
}
.slots-machine::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,140,200,.6) 0 1.5px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(255,217,0,.55) 0 1.5px, transparent 2px),
    radial-gradient(circle at 30% 90%, rgba(29,78,216,.55) 0 1.5px, transparent 2px),
    radial-gradient(circle at 65% 35%, rgba(255,108,174,.55) 0 1.5px, transparent 2px),
    radial-gradient(circle at 50% 70%, rgba(255,217,0,.5) 0 1.4px, transparent 2px);
  background-size:120px 120px, 160px 160px, 200px 200px, 140px 140px, 180px 180px;
  animation:bgScrollDots 26s linear infinite;
  opacity:.65;
}
/* :where() drops specificity to (0,0,0) so any explicit position:absolute
   on a direct child (e.g. .sm-lever, .slots-petals, .sm-floor-halo)
   wins this. Was previously clobbering .sm-lever's absolute positioning,
   forcing it into flow and adding 158px of empty space below the
   credits tray. */
:where(.slots-machine > *){position:relative;z-index:1}
/* falling petals */
.slots-petals{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
}
.slots-petal{
  position:absolute;top:-24px;
  width:14px;height:14px;
  background:radial-gradient(circle at 30% 30%, #dbeafe, #60A5FA 65%, #1D4ED8);
  border-radius:80% 0 80% 0;
  filter:drop-shadow(0 0 8px rgba(255,127,179,.7));
  animation:petalFall linear infinite;
  opacity:.85;
}
@keyframes petalFall{
  0%{transform:translate(0,-30px) rotate(0deg);opacity:0}
  10%{opacity:.8}
  100%{transform:translate(var(--drift,40px),520px) rotate(720deg);opacity:0}
}
/* slots reel shake while spinning */
.slots-machine.spinning{animation:slotsRumble .14s linear infinite}
@keyframes slotsRumble{
  0%{transform:translate(0,0)}
  25%{transform:translate(-1.5px,1px)}
  50%{transform:translate(1.5px,-1px)}
  75%{transform:translate(-1px,-1.5px)}
  100%{transform:translate(0,0)}
}
.slots-machine.win{animation:slotsWinPump .9s ease-out}
@keyframes slotsWinPump{
  0%{transform:scale(1)}
  35%{transform:scale(1.025)}
  100%{transform:scale(1)}
}

/* ---- Plinko: enhanced nebula + drifting particles + dropping pulse ---- */
.plinko-board{isolation:isolate}
.plinko-board::before{
  z-index:0;
  background:
    radial-gradient(ellipse 600px 320px at 30% -10%, rgba(59,130,246,.22), transparent 70%),
    radial-gradient(ellipse 500px 260px at 70% 110%, rgba(59,130,246,.24), transparent 70%),
    radial-gradient(circle 220px at 50% 50%, rgba(29,78,216,.18), transparent 70%) !important;
  animation:bgDriftB 18s ease-in-out infinite -8s !important;
}
.plinko-stars{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 40%, rgba(255,217,0,.6) 0 1.2px, transparent 2px),
    radial-gradient(circle at 36% 72%, rgba(124,225,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 80%, rgba(255,108,174,.6) 0 1.2px, transparent 2px),
    radial-gradient(circle at 50% 12%, rgba(59,130,246,.55) 0 1px, transparent 2px);
  background-size:140px 140px, 180px 180px, 200px 200px, 220px 220px, 160px 160px;
  animation:bgScrollDots 32s linear infinite;
  opacity:.55;
}
#plinko-canvas{z-index:1}
.plinko-slots{z-index:2}
/* AURORA — replaces the previous "pulsing light" both at rest and during
   a drop. A diagonal gloss sweep travels across the board on a 22s loop;
   when a ball is dropping the loop speeds up to 6s (still slower than the
   old 1.4s pulse, so it reads as motion not strobing) and the star layer
   accelerates to suggest depth + speed. ::after is the aurora layer; ::
   before stays as the radial nebula. */
.plinko-board::after{
  content:"";
  position:absolute; inset:0;
  background:
    /* Diagonal aurora gloss — sweeps left-to-right */
    linear-gradient(115deg,
      transparent 35%,
      rgba(29,78,216,.06) 47%,
      rgba(59,130,246,.05) 53%,
      transparent 65%),
    /* Slow pink-purple breathing wash on top of the radial nebula */
    radial-gradient(ellipse 70% 50% at 50% 0%,
      rgba(59,130,246,.04), transparent 70%);
  background-size:220% 100%, 100% 100%;
  background-position:-50% 0, 0 0;
  pointer-events:none;
  z-index:0;
  animation:plinkoAurora 22s linear infinite;
  mix-blend-mode:screen;
}
@keyframes plinkoAurora{
  0%   {background-position:-50% 0,  0 0}
  100% {background-position: 250% 0, 0 0}
}
/* When a ball is in flight: aurora speeds up ~3.7×, stars accelerate so
   the depth feels active. No strobe — the existing animations keep their
   character but in a higher gear. */
.plinko-board.dropping::after{
  animation-duration:6s;
}
.plinko-board.dropping .plinko-stars{
  animation-duration:9s;
  opacity:.85;
}
.plinko-board.dropping::before{
  animation-duration:9s !important;
}

/* Win flash — kept as a one-shot green sweep (this is a victory cue, not
   a continuous animation, so it doesn't read as strobing). Slightly
   shorter and cleaner: a single aurora pulse instead of the box-shadow
   bloom. */
.plinko-board.win-flash::after{animation:plinkoWinFlash 1s ease-out}
@keyframes plinkoWinFlash{
  0%   {background-position:-50% 0, 0 0; filter:hue-rotate(0deg) brightness(1)}
  20%  {filter:hue-rotate(80deg) brightness(1.3)}
  100% {background-position:250% 0, 0 0; filter:hue-rotate(0deg) brightness(1)}
}

/* ---- Upgrader: wheel shake while spinning + extra layers ---- */
/* Shake intensity is driven by a CSS variable controlled from JS so it can
   decay smoothly as the wheel slows down. --shakeI ranges 0..1. */
.upgrader-wheel-wrap{
  --shakeI: 0;
}
.upgrader-wheel-wrap.spinning{
  animation:upgraderShake 0.06s linear infinite;
}
@keyframes upgraderShake{
  0%  {transform:translate(calc(var(--shakeI) * -2px), calc(var(--shakeI) *  1px))}
  25% {transform:translate(calc(var(--shakeI) *  1.8px), calc(var(--shakeI) * -1.2px))}
  50% {transform:translate(calc(var(--shakeI) * -1.4px), calc(var(--shakeI) * -1.6px))}
  75% {transform:translate(calc(var(--shakeI) *  1.6px), calc(var(--shakeI) *  1.4px))}
  100%{transform:translate(calc(var(--shakeI) * -1px),   calc(var(--shakeI) *  1px))}
}
.upgrader-wheel-wrap.spinning .upgrader-pointer{
  animation:upgraderPointerBounce .35s ease-out infinite;
}
@keyframes upgraderPointerBounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(2.5px)}
}
.upgrader-wheel.spinning-blur{
  filter:drop-shadow(0 0 30px rgba(29,78,216,.5)) drop-shadow(0 0 60px rgba(59,130,246,.3));
}
.upgrader-stage{isolation:isolate}
.upgrader-stage::after{z-index:0}
.upgrader-stage > *{position:relative;z-index:1}
.upgrader-particles{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(59,130,246,.55) 0 1.4px, transparent 2px),
    radial-gradient(circle at 85% 25%, rgba(29,78,216,.6) 0 1.4px, transparent 2px),
    radial-gradient(circle at 70% 80%, rgba(255,217,0,.55) 0 1.4px, transparent 2px),
    radial-gradient(circle at 30% 80%, rgba(29,78,216,.55) 0 1.4px, transparent 2px);
  background-size:160px 160px, 200px 200px, 180px 180px, 220px 220px;
  animation:bgScrollDots 28s linear infinite reverse;
  opacity:.7;
}
.upgrader-wheel-wrap.win-burst::before{
  content:"";position:absolute;inset:-20px;border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,.55), transparent 70%);
  animation:upWinBurst .8s ease-out forwards;
  pointer-events:none;z-index:0;
}
@keyframes upWinBurst{
  0%{opacity:0;transform:scale(.6)}
  35%{opacity:1;transform:scale(1.1)}
  100%{opacity:0;transform:scale(1.6)}
}

/* ---- Dice: animated felt + glow drift ---- */
.dice-stage{isolation:isolate}
.dice-stage::before{z-index:0}
.dice-stage > *{position:relative;z-index:1}
.dice-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 280px 200px at 20% 20%, rgba(59,130,246,.2), transparent 70%),
    radial-gradient(ellipse 320px 220px at 80% 80%, rgba(29,78,216,.18), transparent 70%),
    radial-gradient(ellipse 260px 220px at 50% 50%, rgba(255,217,0,.1), transparent 70%);
  animation:bgDriftC 16s ease-in-out infinite;
}
.dice-particles{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 10% 30%, rgba(255,108,174,.6) 0 1.4px, transparent 2px),
    radial-gradient(circle at 70% 20%, rgba(255,217,0,.55) 0 1.2px, transparent 2px),
    radial-gradient(circle at 35% 80%, rgba(124,225,255,.5) 0 1.2px, transparent 2px),
    radial-gradient(circle at 80% 75%, rgba(59,130,246,.55) 0 1.2px, transparent 2px);
  background-size:140px 140px, 180px 180px, 220px 220px, 200px 200px;
  animation:bgScrollDots 24s linear infinite;
  opacity:.5;
}

/* ---- Mines: starfield + nebula ---- */
.mines-grid{
  position:relative;
  isolation:isolate;
  overflow:visible;
}
.mines-grid::before{
  content:"";position:absolute;inset:-12px;pointer-events:none;z-index:-1;
  border-radius:22px;
  background:
    radial-gradient(ellipse 380px 240px at 25% 0%, rgba(59,130,246,.18), transparent 70%),
    radial-gradient(ellipse 380px 240px at 75% 100%, rgba(29,78,216,.2), transparent 70%);
  animation:bgDriftA 18s ease-in-out infinite;
}
.mines-grid::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  border-radius:14px;
  background-image:
    radial-gradient(circle at 12% 25%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 35%, rgba(255,217,0,.55) 0 1.2px, transparent 2px),
    radial-gradient(circle at 36% 70%, rgba(124,225,255,.5) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 80%, rgba(255,108,174,.55) 0 1.2px, transparent 2px);
  background-size:140px 140px, 180px 180px, 200px 200px, 220px 220px;
  animation:bgScrollDots 30s linear infinite;
  opacity:.6;
}

/* ---- Limbo: enhanced floating orbs (existing layer kept) ---- */
.limbo-stage{isolation:isolate}
.limbo-particles{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(59,130,246,.55) 0 1.2px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(255,217,0,.5) 0 1.2px, transparent 2px),
    radial-gradient(circle at 50% 90%, rgba(29,78,216,.55) 0 1.2px, transparent 2px);
  background-size:160px 160px, 200px 200px, 180px 180px;
  animation:bgScrollDots 36s linear infinite;
  opacity:.5;
}

/* ---- Crash: existing — give the multi text a subtle pulse while flying ---- */
.crash-board[data-flying="1"] .crash-multiplier{
  animation:crashMultiPulse 1.1s ease-in-out infinite;
}
@keyframes crashMultiPulse{
  0%,100%{text-shadow:0 0 18px rgba(59,130,246,.5)}
  50%{text-shadow:0 0 32px rgba(59,130,246,.85), 0 0 48px rgba(255,217,0,.45)}
}

/* ---- Blackjack: animated felt swirl ---- */
.bj-table{isolation:isolate;overflow:hidden}
.bj-table::after{z-index:0}
/* :where() drops specificity to (0,0,0) so any explicit position:absolute
   on a direct child (.bj-suit-*, .bj-deck, .bj-particles) wins. Was
   previously clobbering .bj-suit-tl/tr/bl/br corner ornaments — they
   fell into flow as 150px-tall blocks, adding ~400px of empty layout
   above the dealer cards. */
:where(.bj-table > *){position:relative;z-index:1}
.bj-particles{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255,217,0,.5) 0 1.4px, transparent 2px),
    radial-gradient(circle at 80% 36%, rgba(255,108,174,.55) 0 1.2px, transparent 2px),
    radial-gradient(circle at 30% 75%, rgba(124,225,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 82%, rgba(59,130,246,.5) 0 1.2px, transparent 2px);
  background-size:160px 160px, 200px 200px, 220px 220px, 240px 240px;
  animation:bgScrollDots 34s linear infinite;
  opacity:.45;
}

/* ---- Plinko slot landing pop intensified ---- */
.plinko-slot.flash{
  z-index:5;
  animation:slotFlashV2 1s cubic-bezier(.16,1,.3,1);
}
@keyframes slotFlashV2{
  0%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(255,255,255,0)}
  20%{transform:translateY(-16px) scale(1.22);box-shadow:0 0 36px rgba(255,255,255,.95), 0 0 72px rgba(255,217,0,.6)}
  60%{transform:translateY(-4px) scale(1.06)}
  100%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(255,255,255,0)}
}

/* ============================================================
   DICE V2 — bloxgame-style controls + cleaner stage layout
============================================================ */
.dice-cube-row{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:80px;
  width:100%;
  /* Keep the 3D context unbroken between .dice-stage's perspective and
     the inner .dice-cube-wrap. Without preserve-3d here, the row's
     default `flat` transform-style flattens the cubes' 3D rotation
     before the user ever sees it — they look like 2D colored squares. */
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
.dice-roll-readout{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform .25s;
}
.dice-roll-readout .drr-label{
  font-family:'Inter';font-weight:800;font-size:12px;letter-spacing:.22em;
  color:var(--text-mute);
  padding:3px 10px;border-radius:99px;
  background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.08);
}
.dice-roll-readout .drr-value{
  font-family:'Sora';font-weight:800;font-size:52px;color:var(--text);
  letter-spacing:.04em;line-height:1;
  text-shadow:0 0 18px rgba(255,217,0,.55), 0 0 32px rgba(59,130,246,.35);
}
.dice-roll-readout.win  .drr-label{background:rgba(40,199,111,.2);border-color:rgba(40,199,111,.5);color:#28c76f}
.dice-roll-readout.loss .drr-label{background:rgba(59,130,246,.2);border-color:rgba(59,130,246,.5);color:#3B82F6}
/* OVER/UNDER badge — clear so the player knows what they're betting on */
.dice-mode-pill{
  position:absolute;top:18px;left:18px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:99px;
  background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(59,130,246,.06));
  border:1px solid rgba(59,130,246,.45);
  font-family:'Inter';font-weight:800;font-size:13px;letter-spacing:.18em;
  color:#9affd0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 0 18px rgba(59,130,246,.18);
  transition:background .3s, border-color .3s, color .3s, box-shadow .3s, transform .3s;
}
.dice-mode-pill .dmp-label{opacity:.65;letter-spacing:.2em}
.dice-mode-pill strong{
  color:#3B82F6;text-shadow:0 0 10px rgba(59,130,246,.7);font-size:15px;
}
.dice-mode-pill #dice-mode-target{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:rgba(255,255,255,.12);color:#fff;font-size:14px;font-weight:800;
  border:1px solid rgba(255,255,255,.2);
}
.dice-mode-pill.under{
  background:linear-gradient(135deg, rgba(29,78,216,.22), rgba(59,130,246,.08));
  border-color:rgba(29,78,216,.55);
  color:#67E8F9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 0 18px rgba(29,78,216,.25);
}
.dice-mode-pill.under strong{color:#a78bff;text-shadow:0 0 10px rgba(29,78,216,.7)}
.dice-mode-pill.flipping{animation:diceModePop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes diceModePop{
  0%{transform:scale(.8) rotate(-3deg)}
  60%{transform:scale(1.1) rotate(2deg)}
  100%{transform:scale(1) rotate(0)}
}
.dice-roll-readout.win  .drr-value{color:#28c76f;text-shadow:0 0 22px rgba(40,199,111,.85),0 0 40px rgba(40,199,111,.45)}
.dice-roll-readout.win  {transform:translateX(-50%) scale(1.08)}
.dice-roll-readout.loss .drr-value{color:#60A5FA;text-shadow:0 0 22px rgba(59,130,246,.85)}
.dice-target-bar{
  position:absolute;left:5%;right:5%;bottom:14px;
  z-index:3;
  pointer-events:auto;
}
.dtb-track{
  position:relative;height:34px;
  border-radius:99px;
  /* split fill: red zone left of thumb, green zone right of thumb */
  background:linear-gradient(90deg,
    #3B82F6 0,
    #3B82F6 var(--dtb-pct,50%),
    #3B82F6 var(--dtb-pct,50%),
    #3B82F6 100%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}
.dtb-fill{display:none}
.dtb-marks{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;
  pointer-events:none;
  font-family:'Inter';font-weight:700;font-size:12px;
  color:rgba(255,255,255,.85);letter-spacing:.1em;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.dtb-range{
  position:absolute;inset:0;
  width:100%;height:100%;
  -webkit-appearance:none;appearance:none;
  background:transparent;border:0;outline:none;
  cursor:pointer;margin:0;
  z-index:2;
}
.dtb-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:46px;background:transparent;border:0;
  cursor:grab;
}
.dtb-range::-moz-range-thumb{ width:16px;height:46px;background:transparent;border:0;cursor:grab; }
.dtb-thumb{
  position:absolute;top:50%;
  transform:translate(-50%,-50%);
  left:var(--dtb-pct,50%);
  pointer-events:none;
  z-index:3;
}
.dtb-thumb-bar{
  width:14px;height:50px;
  border-radius:8px;
  background:linear-gradient(180deg,#ffffff,#60A5FA 60%,#1D4ED8);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.25),
    0 0 18px rgba(59,130,246,.7),
    0 0 32px rgba(59,130,246,.4);
}
.dtb-thumb-val{
  position:absolute;left:50%;top:-26px;transform:translateX(-50%);
  font-family:'Inter';font-weight:800;font-size:13px;letter-spacing:.05em;
  color:#fff;
  background:rgba(10,8,11,.9);border:1px solid rgba(255,255,255,.18);
  padding:3px 9px;border-radius:99px;
  white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.5);
}
/* Dice controls — 2-row grid so each input gets enough room. Row 1 holds the
   3 numeric fields; row 2 holds the wide PREDICTION segment + TARGET SUM. */
.dice-controls-v2{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:14px 14px;align-items:end;
  max-width:none;margin:0;
}
.dice-controls-v2 .control-group:nth-child(1){grid-column:span 2}  /* BET AMOUNT */
.dice-controls-v2 .control-group:nth-child(2){grid-column:span 2}  /* MULTIPLIER */
.dice-controls-v2 .control-group:nth-child(5){grid-column:span 2}  /* WIN CHANCE */
.dice-controls-v2 .control-group:nth-child(3){grid-column:span 4}  /* PREDICTION (over/under) */
.dice-controls-v2 .control-group:nth-child(4){grid-column:span 2}  /* TARGET SUM */
.dice-controls-v2 > .btn{
  grid-column:1 / -1;
  width:100%;height:54px;
  margin-top:4px;
  font-size:15px;letter-spacing:.18em;
}
.dice-mode-toggle .seg-btn{font-size:14px;padding:10px 8px;letter-spacing:.06em;white-space:nowrap}
@media (max-width:980px){
  .dice-controls-v2{grid-template-columns:repeat(4, minmax(0, 1fr));}
  .dice-controls-v2 .control-group:nth-child(1),
  .dice-controls-v2 .control-group:nth-child(2),
  .dice-controls-v2 .control-group:nth-child(5){grid-column:span 2}
  .dice-controls-v2 .control-group:nth-child(3){grid-column:span 4}
  .dice-controls-v2 .control-group:nth-child(4){grid-column:span 2}
}
@media (max-width:600px){
  .dice-controls-v2{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .dice-controls-v2 .control-group{grid-column:span 2 !important}
}
.dice-flip{
  background:rgba(59,130,246,.18) !important;
  border:1px solid rgba(59,130,246,.45) !important;
  color:#bae6fd !important;
  font-size:15px !important;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .25s, box-shadow .25s !important;
}
.dice-flip:hover{background:var(--pink) !important;color:#fff !important;box-shadow:0 0 14px rgba(59,130,246,.55)}
.dice-flip:active{transform:rotate(180deg) scale(.92) !important}
.dice-flip.flipping{animation:diceFlipSpin .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes diceFlipSpin{
  0%{transform:rotate(0)}
  100%{transform:rotate(360deg)}
}

/* dice cube subtle landed flash on result */
.dice.win-pulse{animation:diceWinPulse .8s ease-out}
@keyframes diceWinPulse{
  0%{filter:drop-shadow(0 0 0 rgba(59,130,246,0))}
  35%{filter:drop-shadow(0 0 22px rgba(59,130,246,.85))}
  100%{filter:drop-shadow(0 0 0 rgba(59,130,246,0))}
}
.dice.loss-pulse{animation:diceLossPulse .8s ease-out}
@keyframes diceLossPulse{
  0%{filter:drop-shadow(0 0 0 rgba(59,130,246,0))}
  35%{filter:drop-shadow(0 0 22px rgba(59,130,246,.85))}
  100%{filter:drop-shadow(0 0 0 rgba(59,130,246,0))}
}

/* legacy .dice-pred no longer used — remove width side-effects */
.dice-pred{display:none}

/* ============================================================
   RESULT TOAST — compact corner notification, out of the way of gameplay.
   Slides in from top-right, holds briefly, slides out. No rainbow strip.
============================================================ */
.result-banner{
  position:fixed;top:96px;right:24px;
  transform:translateX(120%);
  z-index:9000;pointer-events:none;
  opacity:0;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1), opacity .3s ease-out;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));
}
.result-banner.show{opacity:1;transform:translateX(0)}
.result-banner.fading{opacity:0;transform:translateX(120%);transition-duration:.45s}
@media (max-width:760px){
  .result-banner{top:auto;bottom:88px;right:12px;left:12px}
  .result-banner{transform:translateY(160%)}
  .result-banner.show{transform:translateY(0)}
  .result-banner.fading{transform:translateY(160%)}
}

.rb-card{
  position:relative;
  min-width:240px;max-width:320px;
  padding:14px 18px 16px;border-radius:18px;
  text-align:left;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(59,130,246,.22), transparent 60%),
    linear-gradient(180deg, rgba(34,18,40,.96), rgba(14,8,22,.98));
  border:1px solid rgba(59,130,246,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(0,0,0,.4),
    0 18px 38px rgba(0,0,0,.55);
  overflow:hidden;
  display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;align-items:center;
}
/* (top rainbow strip removed — the user found it noisy) */

/* Minimal status glyph — small left bar, no chunky icon block. */
.rb-icon{
  width:4px;height:36px;
  margin:0;grid-row:span 2;
  border-radius:2px;
  font-size:0;line-height:0;color:transparent;
  background:rgba(59,130,246,.7);
  box-shadow:0 0 8px rgba(59,130,246,.5);
}
.result-banner.win  .rb-icon{background:#28c76f;box-shadow:0 0 8px rgba(40,199,111,.6)}
.result-banner.loss .rb-icon{background:#3B82F6;box-shadow:0 0 8px rgba(59,130,246,.6)}
.result-banner.push .rb-icon{background:#3B82F6;box-shadow:0 0 8px rgba(59,130,246,.6)}

.rb-title{
  font-family:'Sora';font-weight:800;font-size:16px;letter-spacing:.12em;
  margin:0;line-height:1.15;
  grid-column:2;
  background:linear-gradient(180deg, #ffffff, #f0f9ff 60%, #bae6fd 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.result-banner.win  .rb-title{color:#28c76f;filter:drop-shadow(0 0 10px rgba(40,199,111,.35))}
.result-banner.loss .rb-title{color:#3B82F6;filter:drop-shadow(0 0 10px rgba(59,130,246,.30))}
.result-banner.push .rb-title{color:#cbd5e1;filter:drop-shadow(0 0 10px rgba(203,213,225,.25))}

.rb-sub{
  font-family:'Inter';font-weight:600;font-size:13px;
  color:var(--text-dim);
  margin:2px 0 0;letter-spacing:.02em;line-height:1.25;
  grid-column:2;
}
.rb-payout{
  font-family:'Sora';font-weight:800;font-size:16px;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:99px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
  grid-column:3;grid-row:span 2;align-self:center;
  white-space:nowrap;
}
.result-banner.win  .rb-payout{color:#28c76f;text-shadow:0 0 18px rgba(40,199,111,.7);border-color:rgba(40,199,111,.5)}
.result-banner.loss .rb-payout{color:#3B82F6;text-shadow:0 0 18px rgba(59,130,246,.6);border-color:rgba(59,130,246,.5)}
.result-banner.push .rb-payout{color:#3B82F6;text-shadow:0 0 18px rgba(255,217,0,.6);border-color:rgba(255,217,0,.5)}

/* The big burst-ring is overkill for a corner toast — hide it. */
.rb-burst{display:none}

/* Subtle inner glow pulse on the card itself. */
.result-banner.win.show .rb-card{ animation:rbCardPulseWin 1.6s ease-out 1; }
.result-banner.loss.show .rb-card{ animation:rbCardPulseLoss 1.6s ease-out 1; }
@keyframes rbCardPulseWin{
  0%  {box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.4),0 18px 38px rgba(0,0,0,.55), 0 0 0 0 rgba(59,130,246,.55)}
  60% {box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.4),0 18px 38px rgba(0,0,0,.55), 0 0 0 12px rgba(59,130,246,0)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.4),0 18px 38px rgba(0,0,0,.55)}
}
@keyframes rbCardPulseLoss{
  0%  {box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.4),0 18px 38px rgba(0,0,0,.55), 0 0 0 0 rgba(59,130,246,.55)}
  60% {box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.4),0 18px 38px rgba(0,0,0,.55), 0 0 0 12px rgba(59,130,246,0)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.4),0 18px 38px rgba(0,0,0,.55)}
}

@media (max-width:760px){
  .rb-card{min-width:240px;max-width:92vw;padding:12px 14px}
  .rb-title{font-size:15px}
  .rb-payout{font-size:15px;padding:4px 8px}
}


/* =====================================================
   FAIRNESS — pill button + modals (history / detail / seeds)
   ===================================================== */
/* Fairness button — quiet glass pill that matches the rest of the brand
   instead of the loud blue/teal it used to be. Sits inline in headers. */
/* Universal Fairness pill — green-shield compact style, matched across
   every game's header + the watch-view fairness button. Replaces the
   prior loud blue/teal pill. Mirrors .cs-watch-fair so both pills read
   the same. The original .fp-shield mask span is repurposed as a small
   green shield outline. */
.fair-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  border-radius:8px;
  background: transparent;
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
  font-family:'Urbanist',sans-serif;
  font-size:12.5px; font-weight:700;
  letter-spacing:.01em;
  text-transform: none;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.fair-pill:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.18);
  color:#fff;
  transform: none;
  box-shadow: none;
}
/* Verify shield-with-check glyph — renders the SAME shield+check icon
   the watch-view fairness pill uses. Implemented as an inline SVG via
   background-image so the existing markup
   `<span class="fp-shield"></span>` doesn't have to change per-game.
   The previous flat-mask shape was just a silhouette ("a green box"
   in the user's words); this is the actual verified-shield glyph. */
.fair-pill .fp-shield{
  width: 14px; height: 14px;
  display: inline-block;
  flex-shrink: 0;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3Z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")
    center / contain no-repeat;
  -webkit-mask: none;
          mask: none;
  filter: none;
}
@media (max-width:760px){
  .fair-pill{ padding:5px 10px; font-size:11.5px; }
}

/* Inline variant — pushed to the right of the tabs strip so it sits
   next to + Create Pack Battle. Same look as the watch-view fair pill.
   Hidden on the Battles tab because each battle's watch view already
   has its own fairness button — surfacing both is just noise. */
.cs-watch-fair.cs-fair-inline{
  margin-left:auto;
  margin-right:10px;
}
section[data-route="cases"][data-cs-tab="battles"] .cs-fair-inline,
section[data-route="cases"][data-cs-tab="create-battle"] .cs-fair-inline,
section[data-route="cases"][data-cs-tab="watch-battle"] .cs-fair-inline{
  display: none !important;
}

/* Fairness modals share .modal-fair */
.modal-fair{width:min(680px,100%)}
.modal-fair .modal-title{font-size:26px;margin-bottom:6px}
.modal-fair .modal-sub{font-size:12.5px;line-height:1.55}
.modal-fair code{font-family:'Inter';font-size:11.5px;color:var(--cyan);word-break:break-all;font-weight:700}

/* Round list table */
.fair-table{
  border-radius:14px;overflow:hidden;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.025);
  margin-bottom:14px;
}
.fair-table-head, .fair-row{
  display:grid;grid-template-columns:1fr 1.2fr 1.4fr;gap:12px;
  padding:12px 16px;align-items:center;
}
.fair-table-head{
  background:rgba(0,0,0,.35);
  font-family:'Inter';font-size:13px;letter-spacing:.12em;
  font-weight:800;color:var(--text-mute);text-transform:uppercase;
}
.fair-table-body{max-height:420px;overflow-y:auto}
.fair-row{
  border-top:1px solid var(--line-2);
  font-family:'Inter';font-size:15px;color:var(--text);
  transition:background .15s;
}
.fair-row:hover{background:rgba(0,255,213,.06)}
.fair-row .fr-mult{font-family:'Sora';font-weight:700}
.fair-row .fr-mult.win{color:#28c76f}
.fair-row .fr-mult.loss{color:#3B82F6}
.fair-row .fr-mult.push{color:var(--text-dim)}
.fair-row .fr-link{color:var(--cyan);font-weight:700;cursor:pointer;text-decoration:none}
.fair-row .fr-link:hover{color:#fff;text-decoration:underline}
.fair-row .fr-date{color:var(--text-dim);font-size:14px}
.fair-empty{padding:40px 16px;text-align:center;color:var(--text-mute);font-size:15px}

/* Pager */
.fair-pager{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:0 0 16px;flex-wrap:wrap;
}
.fair-pager button{
  min-width:34px;height:32px;padding:0 10px;
  border-radius:8px;cursor:pointer;
  font-family:'Inter';font-weight:800;font-size:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--text);
  transition:background .15s, border-color .15s;
}
.fair-pager button:hover:not(:disabled){background:rgba(0,255,213,.1);border-color:var(--cyan)}
.fair-pager button.active{background:linear-gradient(135deg,var(--gold),#06B6D4);color:#1a0e08;border-color:transparent}
.fair-pager button:disabled{opacity:.35;cursor:not-allowed}
.fair-pager .fp-ellipsis{color:var(--text-mute);padding:0 4px}

/* Detail field rows */
.fair-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.fair-label{
  font-family:'Inter';font-size:13px;letter-spacing:.12em;font-weight:800;
  color:var(--text-mute);text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.fair-input-row{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.fair-input-row code{flex:1;min-width:0}
.fair-input-row input{
  flex:1;min-width:0;background:transparent;border:0;outline:0;
  color:var(--text);font-family:'Inter';font-size:15px;font-weight:700;
}
.fair-input-row .btn{padding:6px 12px;font-size:13px;flex-shrink:0}

.fair-pill-mini{
  display:inline-block;padding:2px 8px;border-radius:999px;
  background:rgba(0,255,213,.12);border:1px solid rgba(0,255,213,.45);
  color:#9ff5e3;font-size:9px;letter-spacing:.1em;font-weight:800;
}
.fair-pill-mini.next{background:rgba(255,217,0,.12);border-color:rgba(255,217,0,.45);color:#ffe680}
.fair-pill-mini.hidden-pill{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.45);color:#93c5fd}

.fair-verify-btn{
  display:flex;width:100%;justify-content:center;text-align:center;
  margin-bottom:10px;text-decoration:none;
}

.fair-actions{display:flex;gap:10px;flex-wrap:wrap}
.fair-actions .btn{flex:1;min-width:160px}

.fair-nonce-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;
  padding:10px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.fair-nonce-cell{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 10px;border-radius:8px;
  background:rgba(0,0,0,.25);
  font-family:'Inter';font-size:14px;
}
.fair-nonce-cell .fn-game{
  color:var(--text-mute);text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;font-weight:800;
}
.fair-nonce-cell .fn-num{color:var(--cyan);font-weight:800}

@media (max-width:600px){
  .fair-table-head, .fair-row{grid-template-columns:1fr 1fr 1.2fr;gap:8px;padding:10px 12px;font-size:14px}
  .fair-actions .btn{min-width:0}
}

/* Sign-in / profile sign-out */
.profile-signout{
  margin-left:6px;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);
  color:var(--text-mute);cursor:pointer;font-size:16px;font-weight:700;
  transition:background .15s, color .15s;
}
.profile-signout:hover{background:var(--red);color:#fff;border-color:var(--red)}
#sign-in-btn[hidden]{display:none}
#profile-pill[hidden]{display:none}

#balance-pill[hidden]{display:none}

/* ============== MINES — spinner + animated diamond ============== */
.mine-tile.loading{
  cursor:wait;
  background:radial-gradient(circle at 50% 45%, rgba(0,255,213,.18), rgba(29,78,216,.10) 60%, transparent 80%);
  border-color:rgba(0,255,213,.45);
}
.mt-spinner{
  position:absolute;left:50%;top:50%;
  width:48%;aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:#3B82F6;
  border-right-color:#60A5FA;
  animation:mtSpin .7s linear infinite;
}
@keyframes mtSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Hitcoin reveal — replaces the SVG diamond when the player hits a safe
   tile. Three-layer animation:
   - Wrapper (.mt-gem) holds the float bob and the pop-in entrance.
   - Halo (.mt-gem-halo) is a radial gold/claret glow that breathes
     behind the coin so even at rest the tile reads as "alive".
   - Img (.mt-gem-img) carries the gentle rotation wobble so the coin
     never looks frozen between bob frames.
   Reveal flash is gold (Hitcoin brand) instead of the old cyan. */
.mt-gem{
  position:relative;
  width:78%; height:78%;
  display:flex; align-items:center; justify-content:center;
  animation:mtGemFloat 2.4s ease-in-out infinite,
            mtGemPop   .55s cubic-bezier(.2,1.55,.5,1) backwards;
  transform-origin:center;
}
.mt-gem-img{
  width:100%; height:100%;
  object-fit:contain;
  display:block; position:relative; z-index:1;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))
         drop-shadow(0 0 10px rgba(255,217,0,.55));
  animation:mtGemSpin 4.5s ease-in-out infinite;
  -webkit-user-drag:none;
}
.mt-gem-halo{
  position:absolute; inset:-6%;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,217,0,.55) 0%,
    rgba(34,211,238,.32) 40%,
    transparent 72%);
  filter:blur(4px);
  animation:mtGemHalo 2.4s ease-in-out infinite;
  z-index:0;
  pointer-events:none;
}
@keyframes mtGemFloat{
  0%,100%{ transform:translateY(0) }
  50%   { transform:translateY(-3px) }
}
@keyframes mtGemPop{
  0%   { transform:scale(.25) rotate(-22deg); opacity:0 }
  60%  { transform:scale(1.16) rotate(8deg);  opacity:1 }
  100% { transform:scale(1)    rotate(0) }
}
@keyframes mtGemSpin{
  0%,100%{ transform:rotate(-4deg) scale(1) }
  50%   { transform:rotate(4deg)  scale(1.05) }
}
@keyframes mtGemHalo{
  0%,100%{ opacity:.55; transform:scale(1) }
  50%   { opacity:.95; transform:scale(1.12) }
}
@media (prefers-reduced-motion: reduce){
  .mt-gem, .mt-gem-img, .mt-gem-halo{ animation:none !important }
}

/* Reveal flash — quick gold ring that fades, replacing the cyan flash.
   Matches the Hitcoin brand tone now that the icon underneath is the
   coin, not a sci-fi gem. */
.mine-tile.gem-hit::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,217,0,.55), inset 0 0 0 0 rgba(255,217,0,.45);
  animation:mtGemFlash .6s ease-out forwards;
}
@keyframes mtGemFlash{
  0%  { box-shadow:0 0 0 0 rgba(255,217,0,.75),  inset 0 0 0 8px rgba(255,217,0,.45) }
  100%{ box-shadow:0 0 0 24px rgba(255,217,0,0), inset 0 0 0 0 rgba(255,217,0,0) }
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.profile-shell{padding:0}
.profile-header{
  display:grid;grid-template-columns:1.1fr 1.4fr;gap:24px;
  padding:28px 32px;
  background:
    radial-gradient(ellipse 460px 240px at 18% 0%, rgba(59,130,246,.18), transparent 70%),
    radial-gradient(ellipse 460px 240px at 82% 100%, rgba(0,255,213,.14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border-radius:18px;
  border:1px solid var(--line-2);
  margin-bottom:18px;
}
.profile-hero-left{display:flex;align-items:center;gap:18px}
.profile-hero-avatar{
  width:96px;height:96px;border-radius:50%;
  background:var(--pink);
  display:flex;align-items:center;justify-content:center;
  font-size:46px;
  box-shadow:0 0 0 4px rgba(255,255,255,.06), 0 0 28px rgba(59,130,246,.4);
}
.profile-hero-name{
  font-family:'Sora';font-weight:700;font-size:30px;color:var(--text);
  letter-spacing:.02em;margin-bottom:4px;
}
.profile-hero-uid{font-size:14px;color:var(--text-mute);font-family:'Inter'}
.profile-hero-uid code{color:var(--cyan);font-weight:700}
.profile-hero-meta{font-size:14px;color:var(--text-mute);margin-top:2px}

.profile-hero-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:center;
}
.ph-stat{
  padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.ph-stat-label{
  font-family:'Inter';font-size:12px;letter-spacing:.14em;font-weight:800;
  color:var(--text-mute);text-transform:uppercase;margin-bottom:4px;
}
.ph-stat-value{
  font-family:'Sora';font-weight:700;font-size:22px;color:var(--text);
}
.ph-stat-value.pos{color:#28c76f}
.ph-stat-value.neg{color:#3B82F6}

/* Tabs */
.profile-tabs{
  display:flex;gap:6px;margin-bottom:14px;
  border-bottom:1px solid var(--line-2);padding:0 4px;
}
.profile-tab{
  padding:11px 18px;border:0;background:transparent;cursor:pointer;
  color:var(--text-mute);font-family:'Inter';font-weight:800;font-size:15px;
  letter-spacing:.05em;border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.profile-tab:hover{color:var(--text)}
.profile-tab.active{color:#fff;border-bottom-color:var(--pink)}

.profile-pane{padding:18px 4px}
.profile-pane[hidden]{display:none}
.profile-pane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.profile-pane-title{
  font-family:'Sora';font-weight:700;font-size:20px;color:var(--text);margin:0;
}
.profile-select{
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--text);
  font-family:inherit;font-size:15px;font-weight:600;
  padding:9px 12px;border-radius:10px;outline:0;cursor:pointer;
}
.profile-select:focus{border-color:var(--cyan)}

.profile-empty{padding:40px 16px;text-align:center;color:var(--text-mute);font-size:15px}

/* Transactions table */
.profile-table{
  border-radius:14px;overflow:hidden;
  border:1px solid var(--line-2);background:rgba(255,255,255,.025);
}
.profile-thead, .profile-tr{
  display:grid;grid-template-columns:120px 1.4fr 1.2fr 1fr;gap:12px;
  padding:11px 16px;align-items:center;
}
.profile-thead{
  background:rgba(0,0,0,.35);
  font-family:'Inter';font-size:13px;letter-spacing:.14em;font-weight:800;
  color:var(--text-mute);text-transform:uppercase;
}
.profile-tbody{max-height:520px;overflow-y:auto}
.profile-tr{
  border-top:1px solid var(--line-2);
  font-family:'Inter';font-size:15px;color:var(--text);
}
.profile-tr:hover{background:rgba(0,255,213,.04)}
.ptr-id{font-family:'Inter';color:var(--text-mute);font-weight:700}
.ptr-desc{font-weight:600}
.ptr-date{color:var(--text-dim);font-size:14px}
.ptr-amt{font-family:'Sora';font-weight:700;text-align:right}
.ptr-amt.pos{color:#28c76f}
.ptr-amt.neg{color:#3B82F6}

.profile-pager{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:14px;flex-wrap:wrap;
}
.profile-pager button{
  min-width:36px;height:34px;padding:0 12px;
  border-radius:8px;cursor:pointer;
  font-family:'Inter';font-weight:800;font-size:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--text);
}
.profile-pager button:hover:not(:disabled){background:rgba(0,255,213,.1);border-color:var(--cyan)}
.profile-pager button.active{background:linear-gradient(135deg,var(--gold),#06B6D4);color:#1a0e08;border-color:transparent}
.profile-pager button:disabled{opacity:.35;cursor:not-allowed}
.profile-pager span{color:var(--text-mute);padding:0 4px}

/* By Game grid */
.profile-game-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;
}
.profile-game-card{
  padding:16px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.pgc-name{
  font-family:'Sora';font-weight:700;font-size:18px;color:var(--text);
  margin-bottom:10px;
}
.pgc-row{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Inter';font-size:12.5px;
  color:var(--text-dim);padding:5px 0;
  border-top:1px dashed rgba(255,255,255,.06);
}
.pgc-row strong{color:var(--text);font-weight:700}
.pgc-profit.pos strong{color:#28c76f}
.pgc-profit.neg strong{color:#3B82F6}

/* Settings */
.profile-settings{max-width:560px;display:flex;flex-direction:column;gap:14px}
.profile-label{
  font-family:'Inter';font-size:13px;letter-spacing:.14em;font-weight:800;
  color:var(--text-mute);text-transform:uppercase;margin-bottom:-4px;
}
.profile-input-row{
  padding:11px 13px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.profile-input-row input{
  width:100%;background:transparent;border:0;outline:0;
  color:var(--text);font-family:inherit;font-size:16px;font-weight:600;
}
/* (avatar emoji grid removed — Discord pfp is the avatar now) */
.profile-color-grid{display:flex;flex-wrap:wrap;gap:10px}
.pc-cell{
  width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  transition:transform .12s, border-color .12s;
}
.pc-cell:hover{transform:scale(1.08)}
.pc-cell.active{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.2)}

@media (max-width:760px){
  .profile-header{grid-template-columns:1fr;padding:20px 18px;gap:16px}
  .profile-hero-stats{grid-template-columns:1fr 1fr}
  .profile-thead, .profile-tr{grid-template-columns:80px 1.2fr 1fr 1fr;font-size:14px;padding:9px 12px}
  .ptr-date{font-size:13px}
}

#profile-pill{cursor:pointer}
#profile-pill:hover{background:rgba(59,130,246,.1)}

/* ==== Profile additions: level/tier progress, period, big-win, streaks ==== */
.ph-level, .ph-tier { padding-bottom:14px }
.ph-progress{
  height:6px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.06);
  margin-top:8px;
}
.ph-progress-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,#3B82F6 0%,#1D4ED8 60%,#3B82F6 100%);
  border-radius:999px;
  transition:width .35s cubic-bezier(.16,1,.3,1);
}
.ph-progress-fill-gold{
  background:linear-gradient(90deg,#3B82F6,#06B6D4 60%,#3B82F6);
}
.ph-progress-label{
  font-family:'Inter';font-size:13px;color:var(--text-mute);
  margin-top:6px;letter-spacing:.04em;
}

.profile-period{
  display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;
}
.profile-period-btn{
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  color:var(--text-mute);cursor:pointer;
  font-family:'Inter';font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  transition:color .15s, border-color .15s, background .15s;
}
.profile-period-btn:hover{color:var(--text);border-color:rgba(59,130,246,.5)}
.profile-period-btn.active{
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  color:#fff;border-color:transparent;
  box-shadow:0 0 18px rgba(59,130,246,.4);
}

.profile-cards{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:12px;
  margin-bottom:18px;
}
.profile-card{
  padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
}
.profile-card-label{
  font-family:'Inter';font-size:12px;letter-spacing:.14em;
  font-weight:800;color:var(--text-mute);text-transform:uppercase;
  margin-bottom:6px;
}
.profile-card-value{
  font-family:'Sora';font-weight:700;font-size:22px;color:var(--text);
}
.profile-card-big{
  background:linear-gradient(135deg, rgba(255,217,0,.10), rgba(59,130,246,.10));
  border-color:rgba(255,217,0,.25);
}
.bigwin-game{
  font-family:'Sora';font-weight:700;font-size:18px;color:var(--gold);
  margin-bottom:8px;
}
.bigwin-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bigwin-label{
  font-family:'Inter';font-size:9px;letter-spacing:.14em;
  font-weight:800;color:var(--text-mute);text-transform:uppercase;margin-bottom:2px;
}
.bigwin-value{font-family:'Sora';font-weight:700;font-size:16px;color:var(--text)}
.bigwin-value.pos{color:#28c76f}
.bigwin-when{font-size:13px;color:var(--text-dim);font-family:'Inter';font-weight:600}

.profile-streaks{display:flex;flex-direction:column;gap:4px}
.streak-current{
  font-family:'Sora';font-weight:700;font-size:22px;color:var(--text);
}
.streak-current.win{color:#28c76f}
.streak-current.loss{color:#3B82F6}
.streak-best{
  font-family:'Inter';font-size:13px;color:var(--text-mute);
}

@media (max-width:1100px){
  .profile-cards{grid-template-columns:1fr 1fr 1fr}
  .profile-card-big{grid-column:span 3}
}
@media (max-width:760px){
  .profile-cards{grid-template-columns:1fr 1fr}
  .profile-card-big{grid-column:span 2}
  .bigwin-row{grid-template-columns:1fr 1fr}
}

/* ============== Top-bar Discord avatar ============== */
.profile-avatar-img{
  width:32px;height:32px;border-radius:50%;display:block;
  object-fit:cover;border:2px solid rgba(255,255,255,.1);
}
.profile-avatar-emoji{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;background:var(--pink);
}

/* ============== Profile hero ============== */
.profile-hero-avatar{
  width:96px;height:96px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:46px;
  box-shadow:0 0 0 4px rgba(255,255,255,.06), 0 0 28px rgba(59,130,246,.4);
  overflow:hidden;background:var(--pink);
  position:relative;
}
.profile-hero-avatar::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  background:conic-gradient(from 90deg, rgba(59,130,246,.3), rgba(0,255,213,.3), rgba(255,217,0,.3), rgba(59,130,246,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:3px;
  animation:phRingSpin 8s linear infinite;
  pointer-events:none;
}
@keyframes phRingSpin{to{transform:rotate(360deg)}}
.profile-hero-avatar-img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
}

.profile-header{
  grid-template-columns:1fr 1.4fr;
}
/* 2x2 grid so each tile gets real breathing room. */
.profile-hero-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;
  gap:14px;
  align-items:stretch;
}
/* Level ring keeps a fixed visual size but lives inside its grid cell so
   the tier card next to it gets the rest of the row. */
.ph-level-ring{
  width:100%;height:auto;aspect-ratio:1/1;
  max-width:170px;justify-self:center;align-self:center;
}

/* ============== Level ring (circular progress) ============== */
.ph-level-ring{
  position:relative;width:130px;height:130px;
  display:flex;align-items:center;justify-content:center;
}
.ph-ring-svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 0 14px rgba(29,78,216,.45));
}
#prof-ring-fill{
  transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1);
}
.ph-ring-inner{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.ph-ring-label{
  font-family:'Inter';font-size:12px;letter-spacing:.18em;
  font-weight:800;color:var(--text-mute);
}
.ph-ring-value{
  font-family:'Sora';font-weight:700;font-size:42px;
  color:#f1f5f9;
  line-height:1;
}
@keyframes phLevelPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}

/* ============== Tier card with letter badge ============== */
.ph-tier-card{
  padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
}
.ph-tier-card::before{
  /* subtle gold sheen drifting across */
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 35%, rgba(255,217,0,.06) 50%, transparent 65%);
  background-size:220% 100%;
  animation:phTierShine 5s linear infinite;
  pointer-events:none;
}
@keyframes phTierShine{from{background-position:-110% 0}to{background-position:110% 0}}
.ph-tier-header{display:flex;gap:12px;align-items:center}
.ph-tier-badge{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Sora';font-weight:700;font-size:22px;color:#1a0e08;
  background:linear-gradient(135deg,#ad6900,#a05a2c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.35);
}
.ph-tier-badge[data-tier="silver"]  {background:linear-gradient(135deg,#dbe5f5,#806060);color:#252b3a}
.ph-tier-badge[data-tier="gold"]    {background:linear-gradient(135deg,#ffe680,#06B6D4);color:#3a2a08}
.ph-tier-badge[data-tier="platinum"]{background:linear-gradient(135deg,#dbeafe,#5fb8ff);color:#0e2a4a}
.ph-tier-badge[data-tier="diamond"] {background:linear-gradient(135deg,#dbeafe,#1D4ED8);color:#fff}
.ph-tier-badge[data-tier="mythic"]  {background:linear-gradient(135deg,#3B82F6,#3B82F6);color:#fff;
  animation:phMythicShimmer 2.4s ease-in-out infinite}
@keyframes phMythicShimmer{
  0%,100%{filter:hue-rotate(0)}
  50%{filter:hue-rotate(40deg)}
}

/* ============== Animated icons inside stat cards ============== */
.ph-stat-icon{display:flex;flex-direction:column;justify-content:center;gap:4px}
.ph-stat-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:2px;
}
.ph-icon{
  width:22px;height:22px;color:#3B82F6;
  filter:drop-shadow(0 0 6px rgba(95,232,212,.45));
  animation:phIconFloat 3s ease-in-out infinite;
  flex-shrink:0;
}
.ph-icon-trend{color:#3B82F6}
@keyframes phIconFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

@media (max-width:1100px){
  .profile-header{grid-template-columns:1fr;gap:18px}
  .profile-hero-stats{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:760px){
  .profile-hero-avatar{width:80px;height:80px;font-size:36px}
  .ph-level-ring{max-width:130px}
  .ph-ring-value{font-size:32px}
  .profile-hero-stats{grid-template-columns:1fr;gap:10px}
}

/* ============== Custom scrollbar — slim modern, matches the brand =========== */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent;border-radius:8px}
*::-webkit-scrollbar-thumb{
  background:rgba(96,165,250,.28);
  border-radius:99px;
  border:2px solid transparent;
  background-clip:padding-box;
  transition:background-color .2s ease;
}
*::-webkit-scrollbar-thumb:hover{background:rgba(96,165,250,.55);background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}
*{scrollbar-width:thin;scrollbar-color:rgba(96,165,250,.35) transparent}

/* ============== Username history chips ============== */
.profile-username-history{margin-top:-6px}
.profile-uh-label{
  font-family:'Inter';font-size:13px;letter-spacing:.12em;
  font-weight:800;color:var(--text-mute);text-transform:uppercase;margin-bottom:8px;
}
.profile-uh-list{display:flex;flex-wrap:wrap;gap:8px}
.profile-uh-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  color:var(--text);font-family:'Inter';font-size:12.5px;font-weight:700;
  transition:transform .15s, border-color .15s, color .15s, box-shadow .15s;
}
.profile-uh-chip:hover{
  transform:translateY(-1px);
  border-color:var(--cyan);
  color:#fff;
  box-shadow:0 0 0 1px rgba(0,255,213,.3), 0 6px 18px rgba(0,255,213,.18);
}
.profile-uh-revert{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);
}

/* ============== Better badge animations (VIP tier letter) ============== */
.ph-tier-badge{
  position:relative;overflow:hidden;
  animation:phBadgeFloat 4.2s ease-in-out infinite;
}
@keyframes phBadgeFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-3px) rotate(2deg)}
}
.ph-tier-badge::after{
  /* Sweeping shine streak across the badge face. */
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size:220% 100%;
  animation:phBadgeShine 3.4s linear infinite;
  pointer-events:none;mix-blend-mode:screen;
}
@keyframes phBadgeShine{
  from{background-position:-110% 0}
  to{background-position:110% 0}
}

/* ============== Anti-cramp: profile shell ============== */
.profile-shell{padding:24px}
.profile-header{padding:32px 36px;gap:32px;margin-bottom:24px}
.profile-hero-stats{gap:18px}
.profile-cards{gap:14px;margin-bottom:24px}
.profile-card{padding:18px 20px}
.profile-card-big{padding:20px 24px}
.profile-pane{padding:24px 8px}
.profile-thead, .profile-tr{padding:14px 20px;gap:16px}
.profile-tabs{gap:10px;padding:0 8px}
.profile-tab{padding:13px 22px}

/* Game shells — small breathing room bumps so games stop feeling cramped. */
.game-shell{padding:24px}
.game-header{padding:26px 26px 28px;margin-bottom:28px}

@media (min-width:1100px){
  .game-shell{padding:32px}
  .stats-row{gap:20px}
  .stats-col{padding:18px 20px}
}

/* Make the chat panel breathe a bit too. */
.cmsg{padding:8px 12px}
.cmsg-text{line-height:1.5}

/* Sidebar — wider gap between sections. */
.sb-section + .sb-section{margin-top:20px}

/* Bet feed rows — bump padding so they don't read as a wall of text. */
.bf-row{padding:11px 16px;gap:14px}

/* ============== Profile Activity timeline ============== */
.profile-timeline{display:flex;flex-direction:column;gap:10px}
.act-row{
  display:grid;
  grid-template-columns:44px 1fr auto auto;
  gap:14px;align-items:center;
  padding:14px 18px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
  transition:transform .15s, border-color .15s, box-shadow .15s;
  position:relative;overflow:hidden;
}
.act-row::before{
  /* Left accent bar — color codes outcome at a glance. */
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:rgba(255,255,255,.08);
}
.act-row.pos::before{background:linear-gradient(180deg,#28c76f,#28c76f)}
.act-row.neg::before{background:linear-gradient(180deg,#3B82F6,#3B82F6)}
.act-row.push::before{background:linear-gradient(180deg,#806060,#5a3030)}
.act-row:hover{
  /* No translateX — would push the row past its scroll container's right
     edge and pulse a horizontal scrollbar. Subtle pink glow instead. */
  border-color:rgba(59,130,246,.45);
  box-shadow:0 6px 18px rgba(0,0,0,.25), 0 0 14px rgba(59,130,246,.18);
}
.act-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);
  filter:drop-shadow(0 0 10px currentColor);
  border:1px solid var(--line-2);
}
.act-icon svg{width:24px;height:24px}
.act-meta{min-width:0}
.act-title{
  font-family:'Sora';font-size:14.5px;color:var(--text);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:2px;
}
.act-title strong{font-weight:700}
.act-tag{
  display:inline-block;padding:2px 8px;border-radius:999px;
  font-family:'Inter';font-size:12px;letter-spacing:.12em;
  font-weight:800;text-transform:uppercase;
}
.act-tag-pos{background:rgba(40,199,111,.14);color:#28c76f;border:1px solid rgba(40,199,111,.4)}
.act-tag-neg{background:rgba(239,68,68,.14);color:#fca5a5;border:1px solid rgba(239,68,68,.4)}
.act-tag-push{background:rgba(168,179,216,.12);color:var(--text-dim);border:1px solid rgba(168,179,216,.3)}
.act-sub{
  font-family:'Inter';font-size:12.5px;color:var(--text-dim);font-weight:600;
}
.act-amount{
  font-family:'Sora';font-weight:700;font-size:16px;text-align:right;
  white-space:nowrap;
}
.act-amount.pos{color:#28c76f}
.act-amount.neg{color:#3B82F6}
.act-time{
  font-family:'Inter';font-size:11.5px;color:var(--text-mute);font-weight:700;
  min-width:36px;text-align:right;
}

/* Animate row reveal so the timeline feels lively. */
.act-row{animation:actSlideIn .35s ease-out both}
.act-row:nth-child(1){animation-delay:.02s}
.act-row:nth-child(2){animation-delay:.05s}
.act-row:nth-child(3){animation-delay:.08s}
.act-row:nth-child(4){animation-delay:.11s}
.act-row:nth-child(5){animation-delay:.14s}
.act-row:nth-child(6){animation-delay:.17s}
.act-row:nth-child(n+7){animation-delay:.2s}
@keyframes actSlideIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:760px){
  .act-row{grid-template-columns:36px 1fr auto;gap:10px;padding:10px 12px}
  .act-time{display:none}
  .act-icon{width:36px;height:36px;border-radius:10px}
  .act-icon svg{width:20px;height:20px}
}

/* ============== Top-bar balance label: replace "BC" text with the icon ============== */
.balance-label{display:none}

/* ============== Achievements ============== */
.profile-tab-badge{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;
  background:rgba(0,255,213,.12);color:var(--cyan);
  font-size:12px;font-weight:800;letter-spacing:.06em;
  border:1px solid rgba(0,255,213,.3);
}
.profile-ach-summary{
  font-family:'Inter';font-size:15px;color:var(--text-dim);font-weight:700;
}
.profile-ach-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;
}
.ach-card{
  position:relative;
  display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;
  padding:18px 18px 18px 16px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
  overflow:hidden;
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.ach-card:hover{transform:translateY(-2px)}
.ach-icon{
  width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;line-height:1;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
}
.ach-name{
  font-family:'Sora';font-weight:700;font-size:15px;color:var(--text);
  margin-bottom:3px;
}
.ach-desc{
  font-family:'Inter';font-size:14px;color:var(--text-dim);
  line-height:1.45;
}
.ach-tier{
  position:absolute;top:10px;right:12px;
  font-family:'Inter';font-size:9px;letter-spacing:.16em;
  font-weight:800;text-transform:uppercase;color:var(--text-mute);
}
.ach-when{
  position:absolute;bottom:8px;right:12px;
  font-family:'Inter';font-size:12px;color:var(--text-mute);
  font-weight:700;
}

/* Per-tier accent — unlocked cards glow in their tier color. */
.ach-card.unlocked.ach-common    {border-color:rgba(168,179,216,.35);box-shadow:0 0 0 1px rgba(168,179,216,.18)}
.ach-card.unlocked.ach-rare      {border-color:rgba(95,184,255,.45);box-shadow:0 0 0 1px rgba(95,184,255,.22), 0 0 18px rgba(95,184,255,.12)}
.ach-card.unlocked.ach-epic      {border-color:rgba(29,78,216,.55);box-shadow:0 0 0 1px rgba(29,78,216,.3),  0 0 22px rgba(29,78,216,.18)}
.ach-card.unlocked.ach-legendary {border-color:rgba(255,217,0,.6);   box-shadow:0 0 0 1px rgba(255,217,0,.35),  0 0 28px rgba(255,217,0,.22)}
.ach-card.unlocked.ach-mythic    {border-color:rgba(59,130,246,.65); box-shadow:0 0 0 1px rgba(59,130,246,.4),  0 0 32px rgba(59,130,246,.3)}
.ach-card.unlocked.ach-mythic    {animation:achMythicPulse 2.6s ease-in-out infinite}
@keyframes achMythicPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(59,130,246,.4),  0 0 32px rgba(59,130,246,.3)}
  50%    {box-shadow:0 0 0 1px rgba(255,217,0,.55),  0 0 38px rgba(255,217,0,.4)}
}
.ach-card.unlocked .ach-icon{
  background:linear-gradient(135deg, rgba(0,255,213,.15), rgba(29,78,216,.15));
  border-color:transparent;
  filter:drop-shadow(0 0 8px rgba(0,255,213,.25));
}
.ach-card.unlocked.ach-legendary .ach-icon{
  background:linear-gradient(135deg, rgba(255,217,0,.18), rgba(255,148,42,.18));
  filter:drop-shadow(0 0 10px rgba(255,217,0,.4));
}
.ach-card.unlocked.ach-mythic .ach-icon{
  background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(255,217,0,.22));
  filter:drop-shadow(0 0 12px rgba(59,130,246,.45));
}

/* Locked card — desaturated and dimmer, with a lock badge corner. */
.ach-card.locked{opacity:.55}
.ach-card.locked .ach-icon{filter:grayscale(.8) brightness(.7)}
.ach-locked-overlay{
  position:absolute;bottom:8px;right:12px;
  font-size:16px;color:var(--text-mute);
}

/* ============== Achievement-unlocked toast ============== */
.ach-toast{
  position:fixed;bottom:24px;right:-380px;z-index:9999;
  width:340px;display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-radius:16px;
  background:linear-gradient(135deg,#1d2148,#171a3a);
  border:1px solid var(--line-2);
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  transition:right .45s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.ach-toast.show{right:24px}
.ach-toast-icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;flex-shrink:0;
  background:linear-gradient(135deg, rgba(0,255,213,.18), rgba(29,78,216,.18));
}
.ach-toast.ach-legendary .ach-toast-icon{
  background:linear-gradient(135deg, rgba(255,217,0,.22), rgba(255,148,42,.22));
}
.ach-toast.ach-mythic .ach-toast-icon{
  background:linear-gradient(135deg, rgba(59,130,246,.25), rgba(255,217,0,.25));
}
.ach-toast-eyebrow{
  font-family:'Inter';font-size:12px;letter-spacing:.16em;font-weight:800;
  color:var(--gold);text-transform:uppercase;
}
.ach-toast-name{
  font-family:'Sora';font-weight:700;font-size:16px;color:#fff;margin:2px 0;
}
.ach-toast-desc{
  font-family:'Inter';font-size:14px;color:var(--text-dim);line-height:1.45;
}
.ach-toast.ach-legendary, .ach-toast.ach-mythic{
  border-color:rgba(255,217,0,.4);
  box-shadow:0 20px 50px rgba(0,0,0,.55), 0 0 32px rgba(255,217,0,.25);
}

/* ============== Reusable inline game icon ============== */
.game-icon-inline{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.2em;height:1.2em;vertical-align:middle;
  filter:drop-shadow(0 0 6px currentColor);
}
.game-icon-inline svg{width:100%;height:100%;display:block}

/* ============== Animated achievement badge ============== */
.ach-badge{
  position:relative;width:64px;height:64px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.ach-badge-rings{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}
.ach-badge .ach-bg{
  fill:rgba(255,255,255,.04);
  stroke:rgba(255,255,255,.18);
  stroke-width:1.4;
  transition:fill .3s, stroke .3s;
}
.ach-badge .ach-spin{
  stroke:rgba(255,255,255,.35);
  transform-origin:50% 50%;
  animation:achSpin 12s linear infinite;
}
@keyframes achSpin{ to { transform:rotate(360deg) } }
.ach-badge .ach-orbit{
  fill:#fff;
  transform-origin:50% 50%;
  animation:achOrbit 4.5s linear infinite;
}
@keyframes achOrbit{ to { transform:rotate(360deg) } }
.ach-badge .ach-flare{
  opacity:.85;mix-blend-mode:screen;
  animation:achFlare 3.4s ease-in-out infinite;
}
@keyframes achFlare{
  0%,100%{opacity:.4;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.08)}
}
.ach-badge-emoji{
  position:relative;z-index:1;
  font-size:28px;line-height:1;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
  animation:achEmojiBob 3.6s ease-in-out infinite;
  transform-origin:center;
}
@keyframes achEmojiBob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-2px) rotate(2deg)}
}
.ach-badge-lock{
  position:absolute;bottom:-2px;right:-2px;z-index:2;
  font-size:16px;
}

/* Per-tier color accent */
.ach-badge-common .ach-bg{fill:rgba(168,179,216,.12);stroke:rgba(168,179,216,.5)}
.ach-badge-common .ach-spin{stroke:rgba(168,179,216,.55)}
.ach-badge-common .ach-orbit{fill:#806060}

.ach-badge-rare .ach-bg{fill:rgba(95,184,255,.16);stroke:rgba(95,184,255,.6)}
.ach-badge-rare .ach-spin{stroke:rgba(95,184,255,.7)}
.ach-badge-rare .ach-orbit{fill:#3B82F6}

.ach-badge-epic .ach-bg{fill:rgba(29,78,216,.18);stroke:rgba(29,78,216,.65)}
.ach-badge-epic .ach-spin{stroke:rgba(29,78,216,.8)}
.ach-badge-epic .ach-orbit{fill:#1D4ED8}

.ach-badge-legendary .ach-bg{fill:rgba(255,217,0,.20);stroke:rgba(255,217,0,.7)}
.ach-badge-legendary .ach-spin{stroke:rgba(255,217,0,.85)}
.ach-badge-legendary .ach-orbit{fill:#3B82F6}
.ach-badge-legendary{filter:drop-shadow(0 0 10px rgba(255,217,0,.55))}

.ach-badge-mythic .ach-bg{fill:rgba(59,130,246,.22);stroke:rgba(59,130,246,.75)}
.ach-badge-mythic .ach-spin{stroke:rgba(59,130,246,.85)}
.ach-badge-mythic .ach-orbit{fill:#3B82F6}
.ach-badge-mythic{
  filter:drop-shadow(0 0 14px rgba(59,130,246,.6));
  animation:achMythicHue 4.2s ease-in-out infinite;
}
@keyframes achMythicHue{
  0%,100%{filter:drop-shadow(0 0 14px rgba(59,130,246,.6))}
  50%    {filter:drop-shadow(0 0 18px rgba(255,217,0,.7))}
}

/* Locked badge: desaturate the orbit, dim emoji */
.ach-badge.locked .ach-orbit{fill:#5a6175;animation-duration:9s}
.ach-badge.locked .ach-flare{opacity:.18}
.ach-badge.locked .ach-badge-emoji{filter:grayscale(.85) brightness(.55)}

/* Update the achievement card to use the new badge layout. */
.ach-card{grid-template-columns:64px 1fr;gap:16px}
.ach-card .ach-icon{display:none}

/* ============== Public profile (read-only) ============== */
.profile-public-empty{
  padding:60px 16px;text-align:center;color:var(--text-mute);font-size:16px;
}
.profile-public-body{display:block}
.pubprof-back{margin-bottom:14px}

/* ============== Big game icons in activity / history rows ============== */
.act-icon-big{
  width:48px;height:48px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;
}
.act-icon-big .gh-svg{width:38px;height:38px;display:block;overflow:visible}

.hr-icon-big{
  /* Match the parent .hr-icon's 34px box — was 36px which overflowed
     the parent and got clipped by overflow:hidden. */
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
}
.hr-icon-big .gh-svg{width:26px;height:26px;display:block;overflow:visible}

/* ============== Achievement badge artwork (animated game/generic SVGs) ============== */
.ach-badge-art{
  position:relative;z-index:1;width:60%;height:60%;
  display:flex;align-items:center;justify-content:center;
}
.ach-badge-art .gh-svg, .ach-badge-art .ach-art{
  width:100%;height:100%;display:block;overflow:visible;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}

/* Generic achievement art animations */
.ach-art-trophy .ag-tro-grp{
  transform-origin:50% 60%;transform-box:fill-box;
  animation:atroBob 3.4s ease-in-out infinite;
}
@keyframes atroBob{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-3px) rotate(3deg)}
}
.ach-art-trophy .ag-tro-glint{animation:atroGlint 2s ease-in-out infinite}
@keyframes atroGlint{0%,100%{opacity:.2}50%{opacity:.95}}

.ach-art-flame .ag-fl-grp{
  transform-origin:50% 100%;transform-box:fill-box;
  animation:aflameDance 1.2s ease-in-out infinite;
}
@keyframes aflameDance{
  0%,100%{transform:scaleY(1) scaleX(1)}
  35%{transform:scaleY(1.08) scaleX(.94)}
  70%{transform:scaleY(.96) scaleX(1.05)}
}

.ach-art-diamond .ag-di-grp{
  transform-origin:50% 50%;transform-box:fill-box;
  animation:adiamondSpin 6s ease-in-out infinite;
}
@keyframes adiamondSpin{
  0%,100%{transform:rotate(-6deg) scale(1)}
  50%{transform:rotate(6deg) scale(1.06)}
}
.ach-art-diamond .ag-di-shine{
  animation:adiamondShine 2.2s ease-in-out infinite;
}
@keyframes adiamondShine{
  0%,100%{opacity:0;transform:translate(-4px,-4px)}
  40%{opacity:1;transform:translate(0,0)}
  70%{opacity:0;transform:translate(4px,4px)}
}

.ach-art-coins .ag-co-grp{
  transform-origin:50% 60%;transform-box:fill-box;
  animation:acoinBob 2.8s ease-in-out infinite;
}
@keyframes acoinBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
.ach-art-coins .ag-co-spark{
  animation:acoinSpark 1.8s ease-in-out infinite;
  transform-origin:center;transform-box:fill-box;
}
@keyframes acoinSpark{
  0%,100%{opacity:.2;transform:scale(.6)}
  50%{opacity:1;transform:scale(1.4)}
}

.ach-art-ctrl .ag-cr-grp{
  transform-origin:50% 50%;transform-box:fill-box;
  animation:actrlWobble 3.2s ease-in-out infinite;
}
@keyframes actrlWobble{
  0%,100%{transform:rotate(-3deg)}
  50%{transform:rotate(3deg)}
}

.ach-art-all .ag-all-grp{
  transform-origin:50% 50%;transform-box:fill-box;
  animation:aallSpin 8s linear infinite;
}
@keyframes aallSpin{
  0%{transform:rotate(0)}
  100%{transform:rotate(360deg)}
}

/* Override: game-icon-inside-badge fills more of the circle. */
.ach-badge .gh-svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}

/* Hide the central flare behind the new artwork (we let the artwork breathe). */
.ach-badge .ach-flare{display:none}

/* ============== VIP tier badge — animated SVG art per tier ============== */
.ph-tier-badge{
  /* Override the old letter-only style to fit the new SVG art. */
  background:transparent !important;
  box-shadow:none !important;
  padding:0;
  width:48px;height:48px;
  border-radius:0;
}
.tier-art{width:100%;height:100%;display:block;overflow:visible}
.tier-art-bronze .tab-grp{
  transform-origin:center;transform-box:fill-box;
  animation:tabBronzeBob 3.6s ease-in-out infinite;
}
@keyframes tabBronzeBob{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-2px) rotate(3deg)}
}

.tier-art-silver .tas-shine{
  animation:tasShine 2.2s ease-in-out infinite;
  transform-origin:50% 50%;
}
@keyframes tasShine{
  0%,100%{opacity:0;transform:translateX(-10px)}
  50%{opacity:1;transform:translateX(0)}
}

.tier-art-gold .tag-rays{
  transform-origin:50% 50%;transform-box:fill-box;
  animation:tagSpin 11s linear infinite;
}
@keyframes tagSpin{ to { transform:rotate(360deg) } }
.tier-art-gold .tag-grp{
  filter:drop-shadow(0 0 8px rgba(255,217,0,.5));
}

.tier-art-plat .tap-spark{
  transform-origin:60px 22px;transform-box:fill-box;
  animation:tapSpark 2s linear infinite;
}
@keyframes tapSpark{
  0%,100%{opacity:.3;transform:scale(.6)}
  50%{opacity:1;transform:scale(1.6)}
}

.tier-art-diamond .tad-grp{
  transform-origin:50% 50%;transform-box:fill-box;
  animation:tadSpin 5.5s ease-in-out infinite;
}
@keyframes tadSpin{
  0%,100%{transform:rotate(-6deg)}
  50%{transform:rotate(6deg)}
}
.tier-art-diamond .tad-shine{
  animation:tadShine 2.4s ease-in-out infinite;
}
@keyframes tadShine{
  0%,100%{opacity:0;transform:translate(-3px,-3px)}
  45%{opacity:1;transform:translate(0,0)}
  80%{opacity:0;transform:translate(4px,4px)}
}

.tier-art-mythic .tam-grp{
  filter:drop-shadow(0 0 14px rgba(59,130,246,.6));
  animation:tamHueShift 4.2s ease-in-out infinite;
  transform-origin:50% 50%;transform-box:fill-box;
}
@keyframes tamHueShift{
  0%,100%{filter:drop-shadow(0 0 14px rgba(59,130,246,.6)) hue-rotate(0deg)}
  50%    {filter:drop-shadow(0 0 18px rgba(255,217,0,.7)) hue-rotate(40deg)}
}
.tier-art-mythic .tam-aura{
  transform-origin:50% 50%;transform-box:fill-box;
  animation:tamPulse 2.6s ease-in-out infinite;
}
@keyframes tamPulse{
  0%,100%{opacity:.3;transform:scale(.9)}
  50%{opacity:.7;transform:scale(1.15)}
}

/* ============== User popup — refined Apple-style ============== */
.user-popup-card{
  width:min(560px,100%); max-height:86vh;
  padding:32px;
}
.up-hero{
  display:flex; gap:20px; align-items:center;
  padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:22px;
}
.up-avatar{
  width:84px; height:84px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; flex-shrink:0; overflow:hidden;
  background:linear-gradient(135deg, #1E3A8A, #0F1F4D);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(255,255,255,.06),
    0 12px 32px rgba(0,0,0,.45);
}
.up-avatar-img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
.up-name{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:26px;
  letter-spacing:-.02em; line-height:1.1;
  color:#ffffff;
  margin-bottom:4px;
}
.up-meta{
  font-family:'Inter',sans-serif;
  font-size:12.5px; font-weight:500;
  color:rgba(219,234,254,.55);
  letter-spacing:.01em;
  margin-bottom:12px;
}
.up-tags{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.up-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:99px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-family:'Inter',sans-serif;
  font-size:13px; letter-spacing:.04em;
  font-weight:700; color:rgba(219,234,254,.85);
  font-variant-numeric: tabular-nums;
}
/* Tier chip: subtle tinted glass + 1px brand-colored rim, no chrome gradient. */
.up-tag-tier{
  background: rgba(var(--tier-rgb, 96,165,250), .12);
  border-color: rgba(var(--tier-rgb, 96,165,250), .45);
  color: rgb(var(--tier-rgb, 96,165,250));
  box-shadow: 0 0 18px rgba(var(--tier-rgb, 96,165,250), .15);
}
.up-tag-tier::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: rgb(var(--tier-rgb, 96,165,250));
  box-shadow: 0 0 6px rgb(var(--tier-rgb, 96,165,250));
  flex-shrink:0;
}
.up-tag-tier[data-tier="bronze"]   { --tier-rgb: 205, 127, 50;  color:#fbd6a8 }
.up-tag-tier[data-tier="silver"]   { --tier-rgb: 209, 213, 219; color:#e5e7eb }
.up-tag-tier[data-tier="gold"]     { --tier-rgb: 251, 191,  36; color:#fde68a }
.up-tag-tier[data-tier="platinum"] { --tier-rgb: 165, 243, 252; color:#a5f3fc }
.up-tag-tier[data-tier="diamond"]  { --tier-rgb:  96, 165, 250; color:#bfdbfe }
.up-tag-tier[data-tier="mythic"]   { --tier-rgb: 167, 139, 250; color:#ddd6fe }

.up-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:10px; margin-bottom:22px;
}
.up-stat{
  padding:14px 12px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06);
  text-align:left;
  transition:
    transform .25s var(--ease-smooth),
    border-color .25s var(--ease-smooth),
    box-shadow .25s var(--ease-smooth);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 2px 8px rgba(0,0,0,.18);
}
.up-stat:hover{
  transform: translateY(-2px);
  border-color: rgba(96,165,250,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 22px rgba(0,0,0,.32);
}
.up-stat-label{
  font-family:'Inter',sans-serif;
  font-size:12px; letter-spacing:.12em;
  font-weight:700; color:rgba(219,234,254,.50);
  text-transform:uppercase;
  margin-bottom:6px;
}
.up-stat-value{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:18px;
  color:#ffffff;
  letter-spacing:-.01em;
  font-variant-numeric: tabular-nums;
  line-height:1.1;
}
.up-stat-value.pos{ color:#34d399 }
.up-stat-value.neg{ color:#f87171 }

.up-bigwin{margin-bottom:22px}
.up-bigwin-eyebrow{
  font-family:'Inter',sans-serif;
  font-size:12px; letter-spacing:.12em;
  font-weight:700; color:rgba(219,234,254,.50);
  text-transform:uppercase;
  margin-bottom:8px;
}
.up-bigwin-row{
  display:flex; align-items:center; gap:16px;
  padding:14px 16px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(40,199,111,.06), rgba(40,199,111,.02));
  border:1px solid rgba(40,199,111,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 2px 8px rgba(0,0,0,.18);
}
.up-bigwin-game{
  font-family:'Inter',sans-serif;
  font-weight:700; font-size:16px;
  color:#ffffff;
  letter-spacing:-.005em;
  flex:1;
}
.up-bigwin-multi{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:700; font-size:16px;
  color:rgba(219,234,254,.70);
  font-variant-numeric: tabular-nums;
}
.up-bigwin-profit{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:16px;
  color:#34d399;
  font-variant-numeric: tabular-nums;
  letter-spacing:-.005em;
}

.up-section-title{
  font-family:'Inter',sans-serif;
  font-size:13px; letter-spacing:.12em;
  font-weight:700; color:rgba(219,234,254,.50);
  text-transform:uppercase;
  margin-bottom:12px;
  display:flex; justify-content:space-between; align-items:center;
}
.up-section-title span{ color:#60A5FA }

.up-ach-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:10px;
}
.up-ach-cell{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1;
}
.up-ach-cell.off .ach-badge{ opacity:.28; filter:saturate(.4) }
.up-ach-cell .ach-badge{ width:48px; height:48px }
.up-ach-cell .ach-badge .ach-badge-emoji{ font-size:20px }

@media (max-width:560px){
  .up-stats{grid-template-columns:repeat(2,1fr)}
  .up-ach-grid{grid-template-columns:repeat(5,1fr)}
}

/* ============== Bloxhit logo (uses the actual brand asset) ============== */
.logo{display:flex;align-items:center;text-decoration:none}
.logo{
  perspective: 600px;
  padding-left: 24px;
}
.bh-logo-img{
  display:block;height:84px;width:auto;
  filter:drop-shadow(0 4px 14px rgba(59,130,246,.55))
         drop-shadow(0 0 18px rgba(6,182,212,.32));
  transition:
    filter .35s var(--ease-smooth),
    transform .55s var(--ease-bounce);
  transform-origin: center;
  user-select:none;-webkit-user-drag:none;
}
.logo:hover .bh-logo-img{
  transform: scale(1.08) rotate(-4deg);
  filter:
    drop-shadow(0 8px 24px rgba(59,130,246,.85))
    drop-shadow(0 0 32px rgba(34,211,238,.75))
    drop-shadow(0 0 60px rgba(96,165,250,.45));
  animation: bhLogoHoverShine 1.1s var(--ease-smooth);
}
@keyframes bhLogoHoverShine{
  0%   { filter: drop-shadow(0 4px 14px rgba(59,130,246,.55)) drop-shadow(0 0 18px rgba(6,182,212,.32)) }
  35%  { filter: drop-shadow(0 8px 26px rgba(255,255,255,.55)) drop-shadow(0 0 36px rgba(34,211,238,.85)) drop-shadow(0 0 60px rgba(96,165,250,.55)) }
  100% { filter: drop-shadow(0 8px 24px rgba(59,130,246,.85)) drop-shadow(0 0 32px rgba(34,211,238,.75)) drop-shadow(0 0 60px rgba(96,165,250,.45)) }
}
.logo:active .bh-logo-img{
  transform: scale(1.02) rotate(-2deg);
  transition: transform .12s var(--ease-smooth);
}
@media (max-width:760px){
  .bh-logo-img{height:56px}
  .logo{ padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce){
  .bh-logo-img, .logo:hover .bh-logo-img{ animation:none; transition:none }
}

/* ============== Reset old badge styles + add chunky cartoony badges ============== */
.ach-badge{
  position:relative;width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  cursor:pointer;
  transition:transform .2s cubic-bezier(.2,1.4,.5,1);
  animation:bdgIdle 3.4s ease-in-out infinite;
}
.ach-badge:hover{transform:translateY(-3px) scale(1.08)}
@keyframes bdgIdle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.ach-badge .ach-badge-bg{
  position:absolute;inset:0;border-radius:14px;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,.25),
    inset 0 2px 0 rgba(255,255,255,.25),
    0 6px 14px rgba(0,0,0,.4);
}
.ach-badge .ach-badge-art{
  position:relative;z-index:1;width:64%;height:64%;
  display:flex;align-items:center;justify-content:center;
}
.ach-badge .ach-badge-art svg{width:100%;height:100%;display:block;overflow:visible}

/* Per-badge bright cartoony backgrounds */
.ach-badge-first_blood .ach-badge-bg{background:linear-gradient(135deg,#ffe680 0%,#3B82F6 100%);}
.ach-badge-high_roller .ach-badge-bg{background:linear-gradient(135deg,#a8e0ff 0%,#3B82F6 50%,#1E3A8A 100%);}
.ach-badge-hot_streak  .ach-badge-bg{background:linear-gradient(135deg,#06B6D4 0%,#3B82F6 60%,#1E3A8A 100%);}
.ach-badge-whale       .ach-badge-bg{background:linear-gradient(135deg,#dbeafe 0%,#3B82F6 60%,#0a2a6a 100%);}
.ach-badge-mythic_pull .ach-badge-bg{background:linear-gradient(135deg,#3B82F6 0%,#3B82F6 50%,#1D4ED8 100%);}
.ach-badge-mythic_pull{animation:bdgMythicShimmer 3s ease-in-out infinite}
@keyframes bdgMythicShimmer{
  0%,100%{filter:drop-shadow(0 0 0 transparent)}
  50%    {filter:drop-shadow(0 0 14px rgba(255,217,0,.65))}
}

/* Locked badges: greyscale + dim */
.ach-badge.locked .ach-badge-bg{
  background:linear-gradient(135deg,#3a3f55 0%,#1a1d2e 100%) !important;
}
.ach-badge.locked .ach-badge-art{filter:grayscale(1) brightness(.5)}
.ach-badge.locked{animation:none}
.ach-badge.locked:hover{transform:none}

/* Per-icon fine-grained animation */
.ach-art-trophy .bg-tro-grp{animation:bgTroBob 2.4s ease-in-out infinite;transform-origin:50% 50%;transform-box:fill-box}
@keyframes bgTroBob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.ach-art-trophy .bg-glint{animation:bgGlint 1.6s ease-in-out infinite}
@keyframes bgGlint{0%,100%{opacity:.2}50%{opacity:.95}}

.ach-art-diamond .bg-di-grp{animation:bgDiSpin 4s ease-in-out infinite;transform-origin:50% 50%;transform-box:fill-box}
@keyframes bgDiSpin{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.05)}}
.ach-art-diamond .bg-di-shine{animation:bgDiShine 2s ease-in-out infinite}
@keyframes bgDiShine{0%,100%{opacity:0;transform:translate(-3px,-3px)}50%{opacity:1;transform:translate(0,0)}}

.ach-art-flame .bg-fl-grp{animation:bgFlame 1s ease-in-out infinite;transform-origin:50% 100%;transform-box:fill-box}
@keyframes bgFlame{
  0%,100%{transform:scaleY(1) scaleX(1)}
  35%{transform:scaleY(1.08) scaleX(.94)}
  70%{transform:scaleY(.96) scaleX(1.06)}
}

.ach-art-whale .bg-wh-grp{animation:bgWhale 3.4s ease-in-out infinite;transform-origin:50% 50%;transform-box:fill-box}
@keyframes bgWhale{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(2px) rotate(2deg)}
}
.ach-art-whale .bg-wh-spout{animation:bgSpout 2.2s ease-in-out infinite}
@keyframes bgSpout{
  0%,100%{opacity:0;transform:translateY(4px)}
  50%{opacity:1;transform:translateY(0)}
}

.ach-art-thunder .bg-th-grp{
  animation:bgThunder 1.8s ease-in-out infinite;
  transform-origin:50% 50%;transform-box:fill-box;
  filter:drop-shadow(0 0 8px rgba(255,217,0,.55));
}
@keyframes bgThunder{
  0%,100%{transform:rotate(-4deg) scale(1)}
  50%{transform:rotate(4deg) scale(1.06)}
}

/* Achievement card now wraps the new chunky badge */
.ach-card{grid-template-columns:64px 1fr}
.ach-card .ach-icon{display:none}
.ach-card.unlocked.ach-common,
.ach-card.unlocked.ach-rare,
.ach-card.unlocked.ach-epic,
.ach-card.unlocked.ach-legendary,
.ach-card.unlocked.ach-mythic{
  /* Keep existing tier glow rules — but ensure the new badge isn't double-bordered. */
}

/* User popup — only show unlocked, lay them out chunky and big */
.up-ach-grid{grid-template-columns:repeat(5,1fr);gap:10px}
.up-ach-cell{aspect-ratio:1/1}
.up-ach-cell .ach-badge{width:100%;height:100%;border-radius:16px}
.up-ach-empty{
  grid-column:1/-1;text-align:center;
  font-family:'Inter';font-size:15px;color:var(--text-mute);
  padding:20px;
}

/* Rename old "Achievement Unlocked" toast — eyebrow already updated in HTML */

/* ============== LIQUID GLASS — Apple-style frosted surfaces ==============
   Applied broadly to floating panels: top bar, sidebar, modals, game shells,
   chat. Each gets a subtle backdrop-blur + translucent gradient + thin
   inner highlight. */
.topbar, .sidebar, .modal, .modal-fair,
.game-shell, .profile-shell,
.bet-feed-wrap, .stats-col, .game-popup, #chat,
.user-popup-card, .game-header, .ach-card,
.profile-game-card, .ph-stat, .ph-tier-card,
.profile-card, .ach-toast,
.act-row, .hist-row, .fair-pill, .fair-table {
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
/* Soft inner highlight on the most prominent surfaces. */
.topbar, .sidebar, .modal, .modal-fair, .game-shell, .profile-shell, .user-popup-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 30%, rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(20,12,14,.62), rgba(10,8,11,.62));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 22px 60px rgba(0,0,0,.45);
  border-radius:22px;
}

/* ============== Bigger top bar with scroll-aware liquid glass ============== */
.topbar{
  position:sticky;top:0;z-index:50;
  padding:18px 26px;
  margin:0 14px 16px;
  border-radius:20px;
  transition:none;
}
.topbar:hover{
  /* Subtle liquid-glass lift on hover. */
  border-color:rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 26px 70px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,255,213,.08);
}
/* Logo gets a touch larger to match the bigger bar. */
.logo-mark{width:48px;height:48px}
.logo-text .logo-main{font-size:24px;letter-spacing:.04em}

/* ============== Animated logo — per-letter bounce + color shift ============== */
.logo-main{
  display:inline-flex;
  letter-spacing:.04em;
}
.ll{
  display:inline-block;
  background:linear-gradient(180deg,#fff 0%,#bae6fd 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:llBounce 2.6s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .08s);
  transform-origin:50% 80%;
}
.ll-accent{
  background:linear-gradient(180deg,#3B82F6 0%,#1D4ED8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes llBounce{
  0%,100%{transform:translateY(0) scale(1)}
  40%   {transform:translateY(-4px) scale(1.06)}
  70%   {transform:translateY(0) scale(.98)}
}
/* Quick rainbow shimmer pass on hover. */
.logo-main:hover .ll{animation-duration:1.2s}

/* ============== Smoother shapes, glass-card buttons ============== */
.btn{border-radius:14px}
.btn:hover{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.modal-backdrop{
  background:rgba(8,10,24,.55);
  backdrop-filter:blur(8px) saturate(140%);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
}

/* ============== Live feed sidebar (in-game) — real round rows ============== */
.lead-row{
  cursor:pointer;
  display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;border-radius:12px;
  transition:background .15s, border-color .15s;
}
/* No transform on hover — was causing the same horizontal-scrollbar pulse
   as the coin list (parents that only have overflow-y:auto get a phantom
   x-axis scrollbar from the 2px shift). */
.lead-row:hover{background:rgba(59,130,246,.07);border-color:rgba(59,130,246,.5)}
.lead-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.lead-avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.lead-avatar-emoji{
  width:100%;height:100%;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.lead-name{font-family:'Inter';font-weight:700;font-size:15px;color:var(--text)}
.lead-bet{font-family:'Inter';font-size:13px;color:var(--text-mute)}
.lead-pay{font-family:'Sora';font-weight:700;font-size:15px}
.lead-pay.win{color:#28c76f}
.lead-pay.loss{color:#ef4444}
.lead-pay.push{color:var(--text-dim)}
.lead-rank{display:none}


/* ============== Buy BC modal ============== */
.modal-buy{width:min(680px,100%)}
.buy-tabs{display:flex;gap:8px;margin-bottom:16px;border-bottom:1px solid var(--line-2)}
.buy-tab{
  padding:10px 18px;border:0;background:transparent;cursor:pointer;
  color:var(--text-mute);font-family:'Inter';font-weight:800;font-size:12.5px;
  letter-spacing:.06em;border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.buy-tab:hover{color:var(--text)}
.buy-tab.active{color:#fff;border-bottom-color:var(--pink)}

.buy-packages-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;
}
.buy-pack{
  position:relative;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:18px 14px;border-radius:16px;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border:1px solid var(--line-2);
  transition:transform .18s, border-color .18s, box-shadow .18s;
  font-family:inherit;color:var(--text);
}
.buy-pack:hover{
  transform:translateY(-3px);
  border-color:rgba(0,255,213,.55);
  box-shadow:0 0 0 1px rgba(0,255,213,.4), 0 8px 24px rgba(0,0,0,.4);
}
.buy-pack.popular{
  border-color:rgba(255,217,0,.55);
  background:linear-gradient(135deg, rgba(255,217,0,.10), rgba(59,130,246,.06));
}
.buy-pack.popular:hover{
  box-shadow:0 0 0 1px rgba(255,217,0,.5), 0 8px 28px rgba(255,217,0,.25);
}
.buy-pack-badge{
  position:absolute;top:-8px;right:-6px;
  background:linear-gradient(135deg,#3B82F6,#3B82F6);
  color:#1a0e08;padding:3px 8px;border-radius:6px;
  font-family:'Inter';font-size:9px;font-weight:800;letter-spacing:.12em;
}
.buy-pack-name{
  font-family:'Inter';font-size:13px;letter-spacing:.1em;
  font-weight:800;color:var(--text-mute);text-transform:uppercase;
}
.buy-pack-amount{
  font-family:'Sora';font-weight:700;font-size:18px;color:var(--text);
  display:flex;align-items:center;gap:4px;
}
.buy-pack-price{
  font-family:'Sora';font-weight:700;font-size:16px;color:var(--gold);
}
.buy-pack.busy{opacity:.4;pointer-events:none}

/* ============== Registration / agreement modal ============== */
.register-card{width:min(640px,100%)}
.register-check{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 0;cursor:pointer;
  font-family:'Inter';font-size:15px;line-height:1.55;
  color:var(--text-dim);
}
.register-check + .register-check{border-top:1px solid var(--line-2)}
.register-check input{position:absolute;opacity:0;pointer-events:none}
.register-cb{
  flex-shrink:0;width:22px;height:22px;border-radius:6px;
  background:rgba(255,255,255,.04);
  border:1.5px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;transition:background .15s, border-color .15s;
}
.register-cb::after{
  content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(0,-1px);
  opacity:0;transition:opacity .15s;
}
.register-check input:checked + .register-cb{
  background:linear-gradient(135deg,var(--pink),#1D4ED8);
  border-color:transparent;
}
.register-check input:checked + .register-cb::after{opacity:1}
.register-text{flex:1;color:var(--text)}
.register-text strong{color:#fff}
.register-text a{color:var(--gold);text-decoration:none}
.register-text a:hover{text-decoration:underline}

/* (Hero limited illustrations are styled near the top of this file under
   `.hero-limited-stack` — kept here as a no-op section so the historic
   anchor still resolves.) */

/* ============== Buy modal — payment-method chooser ============== */
.buy-stage{display:block}
.buy-stage[hidden]{display:none}
.buy-back{
  background:transparent;border:0;cursor:pointer;
  color:var(--text-mute);font-family:'Inter';
  font-weight:700;font-size:12.5px;padding:0 0 12px;
  transition:color .15s;
}
.buy-back:hover{color:var(--cyan)}

.pay-method-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-top:6px;
}
@media (max-width:640px){.pay-method-grid{grid-template-columns:1fr}}

.pay-method{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:22px 16px;border-radius:18px;cursor:pointer;
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--line-2);
  font-family:inherit;color:var(--text);
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.pay-method:hover{
  transform:translateY(-3px);
  border-color:rgba(255,217,0,.55);
  box-shadow:0 8px 28px rgba(255,217,0,.15);
}
.pay-method:hover .pay-method-icon{transform:scale(1.06)}
.pay-method-icon{
  width:80px;height:80px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.28);
  border:1px solid var(--line-2);
  transition:transform .2s;
  overflow:hidden;
}
.pay-method-icon svg{width:80%;height:80%;display:block}
.pay-method-icon img{
  width:60px;height:60px;display:block;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
  user-select:none;-webkit-user-drag:none;
}
.pay-method-icon-crypto{box-shadow:0 0 18px rgba(255,165,0,.25)}
.pay-method-icon-robux{box-shadow:0 0 18px rgba(165,165,165,.25)}
.pay-method-title{
  font-family:'Sora';font-weight:700;font-size:17px;color:var(--text);
}
.pay-method-sub{
  font-family:'Inter';font-size:11.5px;color:var(--text-mute);
  font-weight:600;text-align:center;line-height:1.4;
}
.pay-method-sub.pay-method-soon{
  color:var(--gold);
  letter-spacing:.06em;text-transform:uppercase;font-weight:800;
}

/* ============== Withdraw modal: Robux interim card ==============
   Shown when the user picks Robux from the withdraw chooser. The
   on-site payout pipeline isn't wired yet; this is the manual
   Discord-ticket flow. Card mirrors the .pay-method visual idiom
   (rounded panel + iconography) so it doesn't feel like an error
   state — it's a deliberate "request a ticket" path. */
.wd-robux-card{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:22px 18px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  text-align:center;
}
.wd-robux-icon{
  width:96px;height:96px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.10), rgba(255,255,255,.02) 60%, transparent 80%);
  box-shadow:0 0 24px rgba(255,255,255,.10), inset 0 0 14px rgba(255,255,255,.08);
}
.wd-robux-icon img{
  width:62%;height:62%;object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.45)) drop-shadow(0 0 16px rgba(125,211,252,.25));
}
.wd-robux-headline{
  font-size:18px;font-weight:800;letter-spacing:.02em;color:#fff;
}
.wd-robux-body{
  margin:0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.78);
  max-width:38ch;
}
.wd-robux-cta{
  margin-top:6px;width:100%;
  /* Strip default <a> underline; the .btn base class handles the
     primary color + shine, but anchors still get a default link
     underline in some browsers. */
  text-decoration:none;
}

/* =====================================================================
   LOADING SPLASH (#bh-loader)
   Apple/Stake-style: a clean dark background, the brand mark
   centered with a subtle breathing pulse, and a thin indeterminate
   progress sliver underneath. Hidden once <html class="bh-loaded">
   is set by app.js after DOMContentLoaded + a 500ms minimum dwell.
===================================================================== */
#bh-loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:32px;
  background: #060713;
  /* 380ms fade-out is long enough not to pop but short enough that
     the user moves into the real UI quickly. Visibility delay matches
     so the layer becomes non-interactive only AFTER it's invisible. */
  transition: opacity 380ms ease, visibility 0s linear 380ms;
  pointer-events: all;
}
html.bh-loaded #bh-loader{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Brand logo — single subtle breathing pulse. No drop-shadows, no
   gradients on top. The image is the focal point; everything else
   stays quiet. */
.bh-loader-logo{
  width:72px;height:72px;object-fit:contain;
  animation: bhLoaderBreath 2.2s ease-in-out infinite;
}
@keyframes bhLoaderBreath{
  0%,100% { opacity: 0.78; transform: scale(1); }
  50%     { opacity: 1;    transform: scale(1.04); }
}

/* Indeterminate progress bar — 1px high, soft, plain white. The
   chasing sheen is the only motion besides the logo breath. */
.bh-loader-bar{
  position:relative;width:160px;height:1.5px;border-radius:1px;
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.bh-loader-bar-fill{
  position:absolute;left:0;top:0;height:100%;width:40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 50%, transparent);
  border-radius:1px;
  animation: bhLoaderBar 1.4s cubic-bezier(.55,.05,.35,1) infinite;
}
@keyframes bhLoaderBar{
  0%   { left: -40%; }
  100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .bh-loader-logo,
  .bh-loader-bar-fill{ animation: none !important; }
  .bh-loader-logo{ opacity: 1; }
}

/* ============== Crypto coin list (your wallets) ============== */
.buy-coin-list{
  display:flex;flex-direction:column;gap:8px;max-height:60vh;
  overflow-y:auto;overflow-x:hidden; /* hover translate must not trigger an x-axis scrollbar */
  padding-right:4px;
}
.coin-row{
  display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;
  padding:12px 14px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(59,130,246,.18);
  font-family:inherit;color:var(--text);text-align:left;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
/* No transform on hover — was causing horizontal overflow that pulsed a
   scrollbar in/out and made the modal shake under the cursor. */
.coin-row:hover{
  border-color:rgba(59,130,246,.55);
  background:linear-gradient(90deg, rgba(59,130,246,.08), rgba(59,130,246,.04));
  box-shadow:0 0 14px rgba(59,130,246,.18);
}
.coin-row-icon{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Sora';font-weight:800;font-size:22px;
  background:transparent;border:none;
  flex-shrink:0;
}
.coin-row-icon svg,
.coin-row-icon img{
  width:42px;height:42px;display:block;border-radius:50%;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
  object-fit:contain;
}
.coin-btc{background:linear-gradient(135deg,#3B82F6,#a85f00);color:#fff}
.coin-eth{background:linear-gradient(135deg,#627eea,#3b5998);color:#fff}
.coin-sol{background:linear-gradient(135deg,#1D4ED8,#14f195);color:#fff}
.coin-ltc{background:linear-gradient(135deg,#345d9d,#bebebe);color:#fff}
.coin-doge{background:linear-gradient(135deg,#ad6900,#3B82F6);color:#3a2a08}
.coin-usdt{background:linear-gradient(135deg,#26a17b,#1f7d5e);color:#fff}
.coin-usdc{background:linear-gradient(135deg,#2775ca,#1c5a9c);color:#fff}
.coin-trx{background:linear-gradient(135deg,#ef0027,#a8001b);color:#fff}
.coin-bnb{background:linear-gradient(135deg,#f3ba2f,#a87a00);color:#3a2a08}
.coin-matic{background:linear-gradient(135deg,#8247e5,#4a2780);color:#fff}
.coin-row-meta{min-width:0}
.coin-row-name{font-family:'Sora';font-weight:700;font-size:15px;color:var(--text)}
.coin-row-net{font-family:'Inter';font-size:13px;color:var(--text-mute);font-weight:700}
.coin-row-arrow{font-size:24px;color:var(--text-mute)}

/* On nested deposit stages (crypto, coin-detail, bonus) the Back button is
   the close affordance — hide the modal's global X to avoid the duplicate. */
#deposit-modal[data-active-stage="crypto"]  .modal-close,
#deposit-modal[data-active-stage="coin-detail"] .modal-close,
#deposit-modal[data-active-stage="bonus"]   .modal-close{display:none}

/* ============== Bloxflip-style per-coin deposit screen ============== */
/* ============================================================
   CRYPTO DEPOSIT (coin-detail) — reworked to the site's matte/premium
   aesthetic: hairline ledger panels (no nested black boxes), on-brand
   navy + single blue accent, 16px-scale type, tactile copy button, and
   NO glow halos. Breadcrumb is the back-nav; the shared × closes.
============================================================ */
.buy-stage-coin{display:flex;flex-direction:column;gap:16px}

/* Header — breadcrumb only (mono eyebrow). "Crypto" is the back-link. The
   right padding keeps it clear of the modal's corner × on a long crumb. */
.cd-crumbs{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-family:'Inter',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-mute);padding-right:34px;
}
.cd-crumb{color:var(--text-mute)}
.cd-crumb-link{cursor:pointer;color:var(--pink-soft);transition:color .15s var(--ease-smooth,ease)}
.cd-crumb-link:hover{color:var(--text)}
.cd-crumb-active{color:var(--text)}
.cd-sep{color:var(--text-mute);opacity:.55}

.cd-title{
  font-family:'Urbanist','Inter',sans-serif;font-weight:800;font-size:23px;color:var(--text);
  margin:0;letter-spacing:-.01em;
}
.cd-rate{
  font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;
  color:var(--text-mute);margin:-8px 0 0;
}
.cd-rate strong,.cd-rate b{color:var(--text-dim);font-weight:700}

/* Estimate panel (BC ↔ USD ↔ coin) — ONE matte card, hairline-separated
   ledger rows instead of nested boxes. */
.cd-estimate{
  border-radius:14px;
  background:var(--bg-1);
  border:1px solid var(--line);
  overflow:hidden;
}
.cd-estimate-head{
  font-family:'Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.16em;
  color:var(--text-mute);text-align:left;text-transform:uppercase;
  margin:0;padding:13px 16px 11px;border-bottom:1px solid var(--line);
}
.cd-est-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--line);
}
.cd-est-row:last-child{border-bottom:none}
.cd-est-label{
  font-family:'Inter',sans-serif;font-weight:600;font-size:15px;
  color:var(--text-dim);
}
.cd-est-label-coin{display:flex;align-items:center;gap:9px}
.cd-est-coin-img{width:20px;height:20px;border-radius:50%;display:block}
.cd-est-input{
  background:transparent;border:none;outline:none;
  font-family:'Urbanist','Inter',sans-serif;font-weight:800;font-size:17px;color:var(--text);
  text-align:right;width:170px;min-width:0;font-variant-numeric:tabular-nums;
  border-radius:8px;padding:3px 4px;
  transition:background .15s var(--ease-smooth,ease);
}
.cd-est-input:not([readonly]):focus{background:rgba(255,255,255,.05)}
.cd-est-input::-webkit-inner-spin-button,
.cd-est-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cd-est-input[readonly]{color:var(--pink-soft);cursor:default}
.cd-est-row.cd-row-below-min .cd-est-input{color:var(--pink-soft)}
.cd-est-warn{
  margin:0;padding:10px 16px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:12.5px;
  color:var(--pink-soft);background:rgba(59,130,246,.08);
  border-top:1px solid var(--line);
  text-align:center;letter-spacing:.01em;
}
.cd-est-warn span{color:var(--text);font-weight:800}
/* The deposit modal's generic phase2 input skin gives every <input> a boxed
   fill + border; for the estimate ledger we want FLAT values (the row hairlines
   are the only containers). Override at .modal scope so it wins, and show a
   subtle fill only while an editable field is focused (signals editability). */
#deposit-modal .cd-est-input{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:3px 4px !important;
  height:auto !important;
  text-align:right !important;
  color:var(--text) !important;
}
#deposit-modal .cd-est-input[readonly]{ color:var(--pink-soft) !important; }
#deposit-modal .cd-est-input:not([readonly]):focus{ background:rgba(255,255,255,.06) !important; }

.cd-network-line{
  font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;
  color:var(--text-mute);text-align:left;margin:0;
}
.cd-network-line strong{color:var(--text);font-weight:800}

/* QR — clean white card with a soft DROP shadow (depth), not a blue glow halo. */
.cd-qr-wrap{display:flex;justify-content:center;margin:2px 0}
.cd-qr{
  width:188px;height:188px;border-radius:14px;
  background:#fff;padding:12px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.cd-qr svg,.cd-qr img,.cd-qr canvas{width:100%;height:100%;display:block}

.cd-addr-label{
  display:block;
  font-family:'Inter',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);
}
.cd-addr-hint{color:var(--text-mute);font-weight:600;text-transform:none;letter-spacing:0}
.cd-addr-row{
  display:flex;gap:10px;align-items:center;
  padding:11px 12px 11px 14px;border-radius:12px;
  background:var(--bg-1);border:1px solid var(--line);
}
.cd-addr-row code{
  flex:1;min-width:0;
  font-family:'JetBrains Mono','Inter',monospace;
  font-size:13px;color:var(--text);
  font-weight:600;word-break:break-all;letter-spacing:.01em;
}
/* Tactile copy button — matches the site's premium key treatment. */
.cd-addr-copy{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:var(--surface-2);color:var(--text-dim);
  width:40px;height:40px;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .15s var(--ease-smooth,ease),border-color .15s var(--ease-smooth,ease),transform .12s var(--ease-smooth,ease);
}
.cd-addr-copy:hover{background:var(--surface-3);border-color:var(--line-2);color:var(--text)}
.cd-addr-copy:active{transform:translateY(1px)}

/* Warnings — flat matte panels, hairline border, clear bold label. No glow. */
.cd-warn{
  padding:12px 14px;border-radius:12px;
  font-family:'Inter',sans-serif;font-size:13px;line-height:1.55;
  background:var(--bg-1);border:1px solid var(--line);color:var(--text-mute);
}
.cd-warn strong{display:block;color:var(--text);font-weight:800;font-size:14px;margin-bottom:2px}
.cd-warn-info strong{color:var(--pink-soft)}
/* Fund-loss caution — a single restrained amber accent so "wrong network = lost
   funds" reads as a real warning without the brand blue swallowing it. */
.cd-warn-danger{background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.24)}
.cd-warn-danger strong{color:#fbbf24}

.cd-foot{
  font-family:'Inter',sans-serif;font-size:12.5px;color:var(--text-mute);
  text-align:center;line-height:1.6;margin:0;
}

/* Legacy classes still referenced elsewhere — kept compatible. */
.coin-detail-card{display:none}
.coin-detail-qr{width:200px;height:200px}
.coin-detail-qr svg{width:100%;height:100%}
.coin-detail-addr{display:flex;gap:8px;align-items:center}
.coin-detail-addr code{flex:1;min-width:0;font-family:'Inter';font-size:11.5px;color:#fff;font-weight:700;word-break:break-all}
.coin-detail-note{font-family:'Inter';font-size:11.5px;color:var(--text-mute);line-height:1.55}

/* ============================================================
   AGE PILL + LEGAL FOOTER
   ----------------------------------------------------------------
   Required visible 18+ marker (regulators expect a clear age gate
   indicator) and Roblox trademark disclaimer (so we don't get hit
   with a takedown for the playful "Blox" branding). Lives in the
   topbar online-pill row and at the bottom of the home page.
============================================================ */
/* Hero legal strip — the 18+ image badge + Roblox trademark disclaimer.
   Sits at the bottom of the hero card so the legal warnings live with
   the brand statement above ("Play. Win.") instead of being scattered
   around the topbar / footer. Designed to blend, not shout: muted text,
   subtle border, the 18+ image as the only attention-grabber. */
.hero-legal{
  display:flex; align-items:flex-start; gap:14px;
  margin-top:18px; padding:14px 16px 12px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005)),
    rgba(10,8,11,.45);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  max-width:560px;
}
.hero-legal .hl-18{
  flex-shrink:0;
  width:56px; height:56px;
  filter:drop-shadow(0 4px 10px rgba(59,130,246,.4));
  /* Slow, almost-still pulse so the badge feels alive without being
     distracting next to the busy hero art. */
  animation:hl18Pulse 3.4s ease-in-out infinite;
}
@keyframes hl18Pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}
.hero-legal .hl-text{
  font-family:'Inter',sans-serif;
  font-size:13px; line-height:1.55;
  color:rgba(182,192,228,.72);
}
.hero-legal .hl-text strong{color:rgba(255,255,255,.88); font-weight:700}
.hero-legal .hl-text a{
  color:rgba(168,213,240,.85); text-decoration:underline;
  text-decoration-color:rgba(168,213,240,.35);
  transition:color .12s, text-decoration-color .12s;
}
.hero-legal .hl-text a:hover{
  color:#dbeafe; text-decoration-color:#dbeafe;
}
.hero-legal .hl-meta{
  display:block;
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.05);
  color:rgba(106,114,153,.85);
  font-size:10.5px; letter-spacing:.02em;
}
@media (max-width:560px){
  .hero-legal{padding:12px; gap:10px; margin-top:14px}
  .hero-legal .hl-18{width:46px; height:46px}
  .hero-legal .hl-text{font-size:10.5px; line-height:1.5}
  .hero-legal .hl-meta{font-size:12px}
}

/* ============================================================
   COIN SLIDER (bet-input redesign)
   ----------------------------------------------------------------
   Replaces the original number-input-with-tiny-buttons pattern. A
   wide track with a coin thumb, glowing fill that follows the
   slider, big readable amount + USD equivalent, ½/2× quick pills.
   The original <input type=number> stays in the DOM (hidden) so
   existing handlers keep working.
============================================================ */
.cs-hidden-input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:1px !important; height:1px !important;
  left:-9999px !important;
}
.coin-slider-host{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px 8px;
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    rgba(10,8,11,.45);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 2px 8px rgba(0,0,0,.18);
}
/* Top row — coin glyph, big amount, "BC" suffix on left; USD inline-right.
   Single line keeps the component dense; previous layout split coin+amount
   from USD which doubled the vertical real estate. */
.cs-readout{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:24px;
}
.cs-amount-row{
  display:flex; align-items:baseline; gap:6px; min-width:0;
}
.cs-coin-glyph{
  width:22px; height:22px;
  background:url('assets/Hitcoin new.png') center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(59,130,246,.5));
  flex-shrink:0;
  align-self:center;
  /* Slow horizontal coin "spin" — ovalizing scaleX cycle between 1 and 0.2
     gives the optical illusion of a 3D coin rotating without needing a real
     SVG. Paused while hovering or dragging because that's busy enough on
     screen already. */
  animation:csCoinSpin 5.2s ease-in-out infinite;
  transform-origin:center;
}
@keyframes csCoinSpin{
  0%   {transform:scaleX(1)   rotate(0)}
  45%  {transform:scaleX(.18) rotate(0)}
  55%  {transform:scaleX(.18) rotate(0)}
  100% {transform:scaleX(1)   rotate(0)}
}
.coin-slider-host:hover .cs-coin-glyph,
.coin-slider-host.cs-dragging .cs-coin-glyph{
  animation-play-state:paused;
  /* Hover/drag = quick acknowledgement spin that locks the coin upright */
  transform:scaleX(1) rotate(0);
}
.cs-amount{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:18px;
  line-height:1;
  color:#fff;
  letter-spacing:-.005em;
  cursor:text;
  outline:none;
  padding:1px 3px;
  border-radius:5px;
  transition:background .12s, color .12s;
  min-width:36px;
  /* Number value uses tabular figures so the width doesn't jitter as digits
     change during a drag. Without this, the fill width and amount width
     would both update each frame and the layout micro-shifts. */
  font-variant-numeric:tabular-nums;
}
.cs-amount:hover{background:rgba(255,255,255,.04)}
.cs-amount.editing{
  background:rgba(255,217,0,.1);
  outline:1px solid rgba(255,217,0,.45);
  color:#3B82F6;
}
.cs-amount-suffix{
  font-family:'Inter',sans-serif;
  font-weight:700; font-size:13px; color:var(--text-mute,#5a3030);
  letter-spacing:.06em;
}
.cs-usd{
  font-family:'JetBrains Mono','Inter',monospace;
  font-size:13px; color:var(--text-mute, #5a3030);
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
  /* Subtle "live update" pulse class added when the value changes — JS
     toggles `cs-usd-pulse` for one frame so the eye catches the update. */
}
.cs-usd.cs-usd-pulse{animation:csUsdPulse .35s ease-out}
@keyframes csUsdPulse{
  0%  {color:#3B82F6}
  100%{color:var(--text-mute, #5a3030)}
}
.cs-slider-row{
  display:flex; align-items:center; gap:8px;
}
.cs-track-wrap{
  position:relative;
  flex:1;
  height:24px;
  display:flex; align-items:center;
}
.cs-range{
  appearance:none; -webkit-appearance:none;
  width:100%; height:24px;
  background:transparent;
  margin:0; padding:0;
  position:relative; z-index:3;
  cursor:grab;
}
.cs-range:active{cursor:grabbing}

/* Slim track — 5px (was 8px). Inset shadow keeps the depth illusion. */
.cs-track-wrap::before{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height:5px; transform:translateY(-50%);
  background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.16));
  border-radius:4px;
  border:1px solid rgba(255,255,255,.04);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}

/* Fill — gradient bar with a moving shimmer overlay. The shimmer is a
   diagonal white gloss that translates across the fill independent of the
   width animation; gives the bar a "liquid" quality without the cost of
   re-rendering the gradient. */
.cs-track-fill{
  position:absolute; left:0; top:50%;
  height:5px; transform:translateY(-50%);
  width:0%;
  background:linear-gradient(90deg, #3B82F6 0%, #06B6D4 55%, #3B82F6 100%);
  border-radius:4px;
  box-shadow:0 0 8px rgba(255,180,40,.4);
  pointer-events:none;
  z-index:2;
  will-change:width;
  overflow:hidden;
}
.cs-track-fill::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(110deg,
    transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size:60px 100%;
  background-repeat:no-repeat;
  animation:csFillShimmer 2.4s linear infinite;
  pointer-events:none;
}
@keyframes csFillShimmer{
  0%  {background-position:-80px 0}
  100%{background-position:calc(100% + 80px) 0}
}
.coin-slider-host.cs-dragging .cs-track-fill::after{
  /* During a drag the user is creating their own motion — pause the
     shimmer so it doesn't compete visually with the thumb. */
  animation-play-state:paused;
}

.cs-ticks{
  position:absolute; left:0; right:0; top:50%;
  height:10px; transform:translateY(-50%);
  display:flex; justify-content:space-between;
  pointer-events:none;
  z-index:1;
}
.cs-tick{
  width:1px; height:5px;
  background:rgba(255,255,255,.16);
  border-radius:1px;
  align-self:center;
}

/* Coin thumb — actual bloxcoin from assets/ico.png. 22px (was 30px) so it
   sits flush in the slimmer track. Spins on drag for the "tossing a coin"
   feel — distinct from the readout coin's slow horizontal spin. */
.cs-range::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px;
  background:url('assets/Hitcoin new.png') center/contain no-repeat;
  border:0;
  filter:drop-shadow(0 0 6px rgba(59,130,246,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.35));
  cursor:grab;
  transition:transform .14s cubic-bezier(.16,1,.3,1);
  margin-top:0;
}
.cs-range::-webkit-slider-thumb:hover{transform:scale(1.18) rotate(8deg)}
.cs-range:active::-webkit-slider-thumb{
  transform:scale(1.22);
  cursor:grabbing;
  filter:drop-shadow(0 0 14px rgba(255,217,0,.7)) drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
/* When dragging, give the thumb a fast 3D-coin spin via the host class. */
.coin-slider-host.cs-dragging .cs-range::-webkit-slider-thumb{
  animation:csThumbSpin .9s linear infinite;
}
@keyframes csThumbSpin{
  0%  {transform:scale(1.22) rotateY(0deg)}
  100%{transform:scale(1.22) rotateY(360deg)}
}
.cs-range::-moz-range-thumb{
  width:22px; height:22px;
  background:url('assets/Hitcoin new.png') center/contain no-repeat;
  border:0;
  filter:drop-shadow(0 0 6px rgba(59,130,246,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.35));
  cursor:grab;
}
.cs-range::-moz-range-track{background:transparent; height:5px}

/* ½ / 2× quick pills — slimmer, glassy. */
.cs-quick{
  flex-shrink:0;
  height:24px; min-width:32px;
  padding:0 8px;
  border-radius:6px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  color:var(--text-dim, #b6c0e4);
  font-family:'Sora',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.03em;
  cursor:pointer;
  transition:transform .12s, background .12s, color .12s, border-color .12s;
}
.cs-quick:hover{
  background:rgba(255,217,0,.1);
  border-color:rgba(255,217,0,.4);
  color:#3B82F6;
  transform:translateY(-1px);
}
.cs-quick:active{transform:translateY(0) scale(.94)}

.cs-min-max{
  display:flex; justify-content:space-between;
  font-family:'JetBrains Mono','Inter',monospace;
  font-size:9.5px; color:var(--text-mute, #5a3030);
  letter-spacing:.02em;
  padding:0 2px;
  margin-top:-1px;
  font-variant-numeric:tabular-nums;
  opacity:.75;
}

/* Compact variant for tight game panels */
@media (max-width:560px){
  .coin-slider-host{padding:8px 10px 6px}
  .cs-amount{font-size:16px}
  .cs-coin-glyph{width:18px; height:18px}
  .cs-usd{font-size:12px}
  .cs-quick{min-width:28px; padding:0 6px; font-size:12px}
}

/* When the coin slider replaces a .bet-input, hide the legacy wrapper.
   We don't `display:none` it because the original input must keep
   participating in form-element events (focus calls, value reads). It
   shrinks to a 0×0 footprint with overflow hidden, so it stays in the
   accessibility tree but takes no visible space. */
.bet-input.bet-input-replaced{
  width:0; height:0; overflow:hidden;
  padding:0; margin:0; border:0;
  opacity:0; pointer-events:none;
}

/* ============================================================
   PERFORMANCE — pause/skip work on inactive routes
   ----------------------------------------------------------------
   Every game route has decorative animations (rocket flame, dice
   bounce, plinko peg flash, crash starfield, etc.) that keep
   running even when the route is hidden. On low-spec laptops this
   eats GPU time for no visible benefit. Two big levers:

   1) `content-visibility: auto` on inactive routes. The browser
      skips layout/paint entirely until the route enters the
      viewport. Modern browsers (Chrome 85+, Safari 18+) honor this.

   2) `animation-play-state: paused` on every animated descendant
      of an inactive route. Lighter-touch fallback for browsers
      that haven't shipped content-visibility yet.

   The history-row icons (.hi-* classes) animate forever on every
   row in your transactions list. We pause them when their row is
   off-screen via IntersectionObserver in app.js — pure CSS can't
   express "in viewport" without IO support.
============================================================ */
.route:not(.active){
  content-visibility:auto;
  contain-intrinsic-size:1000px;
}
.route:not(.active) *{
  animation-play-state:paused !important;
}

/* History icons + tier badges animate on every row regardless of
   visibility. We add a helper class .anim-paused via JS and pause
   here. CSS-only fallback uses prefers-reduced-motion. */
.anim-paused, .anim-paused *{
  animation-play-state:paused !important;
}
@media (prefers-reduced-motion: reduce){
  /* Hi-row decorative icons (history rows) are micro-loops on dozens
     of rows — pause them under reduce-motion. The crash STARS were
     in this list too, but they're the visual signal that the rocket
     is flying (the rocket itself doesn't translate up the screen —
     the stars scroll DOWN to fake the parallax). Stripping them
     leaves the player staring at a static crash board even mid-flight.
     Keep them running so the gameplay reads. */
  .hi-rocket-g, .hi-rocket-flame, .hi-boom-g, .hi-cards-g,
  .hi-gem-g, .hi-gem-spark, .hi-bomb-g, .hi-bomb-fuse,
  .hi-dice-g, .hi-trend-g, .hi-trend-tip, .hi-target-g,
  .hi-arrow-g, .hi-push-g{
    animation:none !important;
  }
}

/* When the browser tab is in the background, pause all decorative
   animations site-wide. The user can't see them and they're costing
   battery on laptops / phones. */
body.tab-hidden *{
  animation-play-state:paused !important;
}

/* ============================================================
   MULTI SLIDER (target-multiplier inputs)
   ----------------------------------------------------------------
   Distinct from the coin slider: thinner, faster, more "instrument
   panel" than "wallet". One readout row, one slim track with stop
   markers at the popular multipliers (2x / 5x / 10x / 100x), and
   a themed thumb that visually hints at the game it lives in.
   Two themes ship: ms-crash (rocket, pink-purple) and ms-limbo
   (lightning bolt, cyan->gold). Adding a theme = ~10 lines.
============================================================ */
.multi-slider-host{
  display:flex; flex-direction:column; gap:8px;
  padding:10px 12px;
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    rgba(10,8,11,.45);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 2px 8px rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
}
.multi-slider-host::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(110deg,
    transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%);
  background-size:140% 100%;
  background-repeat:no-repeat;
  animation:msHostSweep 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes msHostSweep{
  0%  {background-position:-50% 0; opacity:0}
  20% {opacity:1}
  80% {opacity:1}
  100%{background-position:150% 0; opacity:0}
}
.multi-slider-host.ms-dragging::before{animation-play-state:paused; opacity:0}

.ms-readout{
  display:flex; align-items:baseline; gap:6px;
  position:relative;
  z-index:1;
}

/* ---------- AUTO CASHOUT opt-in toggle (crash) ----------
   Auto-cashout is OFF by default; this switch enables it. Restrained pill
   switch (no glow). While off, the target slider dims so it reads inactive. */
.control-label-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.bx-switch{
  position:relative; flex:0 0 auto;
  width:38px; height:22px;
  margin:0; padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.10);
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.bx-switch-knob{
  position:absolute; top:50%; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:#cfd3dc;
  transform:translateY(-50%);
  transition:left .18s cubic-bezier(.22,1,.36,1), background .18s ease;
}
.bx-switch[aria-checked="true"]{
  background:var(--brand, #3b82f6);
  border-color:var(--brand, #3b82f6);
}
.bx-switch[aria-checked="true"] .bx-switch-knob{ left:19px; background:#fff; }
.bx-switch:focus-visible{ outline:2px solid var(--brand, #3b82f6); outline-offset:2px; }
#crash-auto-group.auto-off .multi-slider-host{
  opacity:.42; pointer-events:none; filter:grayscale(.4);
}
.ms-icon{
  width:18px; height:18px; align-self:center;
  flex-shrink:0;
  background-position:center; background-repeat:no-repeat; background-size:contain;
}
.ms-icon-crash{
  /* Standard auto-cashout target — concentric crosshair in brand blue. */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='9' stroke='%233B82F6' stroke-width='1.8'/><circle cx='12' cy='12' r='5.5' stroke='%2360A5FA' stroke-width='1.5'/><circle cx='12' cy='12' r='2.2' fill='%2322D3EE'/><line x1='12' y1='1' x2='12' y2='5' stroke='%233B82F6' stroke-width='1.6' stroke-linecap='round'/><line x1='12' y1='19' x2='12' y2='23' stroke='%233B82F6' stroke-width='1.6' stroke-linecap='round'/><line x1='1' y1='12' x2='5' y2='12' stroke='%233B82F6' stroke-width='1.6' stroke-linecap='round'/><line x1='19' y1='12' x2='23' y2='12' stroke='%233B82F6' stroke-width='1.6' stroke-linecap='round'/></svg>");
  filter:drop-shadow(0 0 4px rgba(59,130,246,.55));
  transition:transform .25s cubic-bezier(.16,1,.3,1);
  animation:msTargetPulse 2.4s ease-in-out infinite;
}
@keyframes msTargetPulse{
  0%,100%{ transform: scale(1);    filter:drop-shadow(0 0 4px rgba(59,130,246,.5)) }
  50%    { transform: scale(1.08); filter:drop-shadow(0 0 9px rgba(34,211,238,.7)) }
}
.ms-crash[data-risk="medium"] .ms-icon-crash{animation:none; transform:scale(1.04)}
.ms-crash[data-risk="high"]   .ms-icon-crash{animation:none; transform:scale(1.10)}
.ms-crash[data-risk="extreme"] .ms-icon-crash{animation:none; transform:scale(1.18)}

.ms-icon-limbo{
  /* Multi-ring bullseye — same "set a target" mental model as the crash
     auto-cashout, in matching brand blue + cyan so the two sliders feel
     part of the same system. */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='%233B82F6' stroke-width='1.6'/><circle cx='12' cy='12' r='6.5' fill='none' stroke='%2360A5FA' stroke-width='1.4'/><circle cx='12' cy='12' r='3.2' fill='%2322D3EE' stroke='%233B82F6' stroke-width='1.2'/><circle cx='12' cy='12' r='1.1' fill='%231D4ED8'/></svg>");
  filter:drop-shadow(0 0 4px rgba(59,130,246,.55));
  animation:msLimboPulse 2.2s ease-in-out infinite;
}
@keyframes msLimboPulse{
  0%,100%{transform:scale(1)   ; filter:drop-shadow(0 0 3px rgba(59,130,246,.45))}
  50%    {transform:scale(1.10); filter:drop-shadow(0 0 8px rgba(34,211,238,.70))}
}
.ms-limbo.ms-dragging .ms-icon-limbo{animation-play-state:paused}

.ms-value{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:18px;
  line-height:1;
  color:#fff;
  letter-spacing:-.005em;
  cursor:text;
  outline:none;
  padding:1px 3px;
  border-radius:5px;
  transition:background .12s, color .15s;
  font-variant-numeric:tabular-nums;
  min-width:42px;
}
.ms-value:hover{background:rgba(255,255,255,.04)}
.ms-value.editing{
  background:rgba(255,255,255,.08);
  outline:1px solid rgba(255,255,255,.25);
}
.ms-suffix{
  font-family:'Sora',sans-serif;
  font-weight:600; font-size:15px;
  color:var(--text-mute,#5a3030);
  margin-left:-2px;
}
.ms-chance{
  margin-left:auto;
  font-family:'JetBrains Mono','Inter',monospace;
  font-size:10.5px; color:var(--text-mute,#5a3030);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  align-self:center;
}
.ms-chance::before{
  content:"chance ";
  font-family:'Inter',sans-serif;
  font-weight:700; font-size:9px; letter-spacing:.08em;
  color:rgba(255,255,255,.32); text-transform:uppercase;
  margin-right:4px;
}

.ms-crash[data-risk="safe"]    .ms-value{color:#3B82F6}
.ms-crash[data-risk="medium"]  .ms-value{color:#3B82F6}
.ms-crash[data-risk="high"]    .ms-value{color:#60A5FA}
.ms-crash[data-risk="extreme"] .ms-value{color:#1D4ED8}
.ms-limbo[data-risk="safe"]    .ms-value{color:#dbeafe}
.ms-limbo[data-risk="medium"]  .ms-value{color:#3B82F6}
.ms-limbo[data-risk="high"]    .ms-value{color:#06B6D4}
.ms-limbo[data-risk="extreme"] .ms-value{color:#3B82F6}

.ms-track-wrap{
  position:relative;
  height:28px;
  display:flex; align-items:center;
}
.ms-range{
  appearance:none; -webkit-appearance:none;
  width:100%; height:28px;
  background:transparent;
  margin:0; padding:0;
  position:relative; z-index:3;
  cursor:grab;
}
.ms-range:active{cursor:grabbing}
.ms-track-wrap::before{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height:4px; transform:translateY(-50%);
  background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.16));
  border-radius:3px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.ms-track-fill{
  position:absolute; left:0; top:50%;
  height:4px; transform:translateY(-50%);
  width:0%;
  border-radius:3px;
  pointer-events:none;
  z-index:2;
  will-change:width;
}
.ms-crash .ms-track-fill{
  background:linear-gradient(90deg, #3B82F6 0%, #3B82F6 30%, #3B82F6 70%, #1D4ED8 100%);
  box-shadow:0 0 8px rgba(59,130,246,.4);
}
.ms-limbo .ms-track-fill{
  background:linear-gradient(90deg, #3B82F6 0%, #3B82F6 30%, #3B82F6 65%, #3B82F6 100%);
  box-shadow:0 0 8px rgba(255,217,0,.35);
}
.ms-track-glow{
  position:absolute; left:0; top:50%;
  width:14px; height:14px; transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  z-index:2;
  opacity:.75;
  animation:msGlowPulse 1.8s ease-in-out infinite;
}
.ms-crash .ms-track-glow{background:radial-gradient(circle, rgba(59,130,246,.7) 0%, transparent 70%)}
.ms-limbo .ms-track-glow{background:radial-gradient(circle, rgba(255,217,0,.7)  0%, transparent 70%)}
@keyframes msGlowPulse{
  0%,100%{opacity:.55; transform:translate(-50%,-50%) scale(.9)}
  50%    {opacity:.95; transform:translate(-50%,-50%) scale(1.25)}
}
.multi-slider-host.ms-dragging .ms-track-glow{animation-duration:.6s; opacity:1}

.ms-stops{
  position:absolute; left:0; right:0; top:0;
  height:8px;
  pointer-events:none;
}
.ms-stop{
  position:absolute; top:0;
  transform:translateX(-50%);
  font-family:'Inter',sans-serif;
  font-weight:700; font-size:9px;
  color:rgba(255,255,255,.35);
  letter-spacing:.04em;
  pointer-events:auto;
  cursor:pointer;
  padding:1px 5px;
  border-radius:3px;
  transition:color .12s, background .12s, transform .12s;
}
.ms-stop:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
  transform:translateX(-50%) translateY(-1px);
}

.ms-crash .ms-range::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px;
  border:0;
  border-radius:50%;
  background:radial-gradient(60% 60% at 35% 30%, #ffe0ec 0%, #3B82F6 50%, #8e1530 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 0 0 2px rgba(59,130,246,.18),
    0 0 12px rgba(59,130,246,.55),
    0 3px 6px rgba(0,0,0,.35);
  cursor:grab;
  transition:transform .14s cubic-bezier(.16,1,.3,1), box-shadow .14s;
}
.ms-crash .ms-range::-moz-range-thumb{
  width:22px; height:22px;
  border:0;
  border-radius:50%;
  background:radial-gradient(60% 60% at 35% 30%, #ffe0ec 0%, #3B82F6 50%, #8e1530 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 0 0 2px rgba(59,130,246,.18),
    0 0 12px rgba(59,130,246,.55),
    0 3px 6px rgba(0,0,0,.35);
  cursor:grab;
}
.ms-crash .ms-range:active::-webkit-slider-thumb{
  transform:scale(1.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 0 0 4px rgba(59,130,246,.3),
    0 0 22px rgba(59,130,246,.85),
    0 4px 10px rgba(0,0,0,.4);
}
.ms-limbo .ms-range::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px;
  border:0;
  border-radius:6px;
  background:linear-gradient(135deg, #dbeafe 0%, #3B82F6 45%, #1E3A8A 100%);
  transform:rotate(45deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 0 0 2px rgba(255,217,0,.2),
    0 0 12px rgba(255,217,0,.55),
    0 3px 6px rgba(0,0,0,.35);
  cursor:grab;
  transition:transform .14s cubic-bezier(.16,1,.3,1), box-shadow .14s;
}
.ms-limbo .ms-range::-moz-range-thumb{
  width:22px; height:22px;
  border:0;
  border-radius:6px;
  background:linear-gradient(135deg, #dbeafe 0%, #3B82F6 45%, #1E3A8A 100%);
  transform:rotate(45deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 0 0 2px rgba(255,217,0,.2),
    0 0 12px rgba(255,217,0,.55),
    0 3px 6px rgba(0,0,0,.35);
  cursor:grab;
}
.ms-limbo .ms-range:active::-webkit-slider-thumb{
  transform:rotate(45deg) scale(1.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 0 0 4px rgba(255,217,0,.32),
    0 0 22px rgba(255,217,0,.85),
    0 4px 10px rgba(0,0,0,.4);
}
.ms-range::-moz-range-track{background:transparent; height:4px}

.multi-slider-host[data-risk="extreme"] .ms-track-fill{
  filter:saturate(1.3) brightness(1.1);
}

@media (max-width:560px){
  .multi-slider-host{padding:8px 10px}
  .ms-value{font-size:16px}
  .ms-chance{font-size:9.5px}
}

/* ============================================================
   v4 PRO POLISH — overrides applied last, win specificity battles
   - Glassmorphic toast w/ icon + progress bar + close button
   - Buttons: ripple + spring press + smoother hover bezier
   - Game cards: 3D mouse tilt + cursor-follow glow trail
   - Sidebar: bouncier hover snap
   - Custom gradient scrollbars
============================================================ */

/* ---- TOAST v4 ---------------------------------------------- */
.toast-wrap{
  position:fixed;
  bottom:30px;right:30px;
  z-index:300;
  display:flex;flex-direction:column-reverse;gap:12px;
  pointer-events:none;
  width:380px;max-width:calc(100vw - 28px);
}
.toast{
  position:relative;
  display:grid;grid-template-columns:46px 1fr 22px;align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(16,20,42,.92), rgba(8,12,24,.96));
  border:1px solid rgba(255,255,255,.08);
  font-family:'Inter';font-size:15px;font-weight:600;
  color:var(--text);
  letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  box-shadow:
    0 18px 38px rgba(0,0,0,.55),
    0 4px 10px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  transform-origin:right center;
  pointer-events:auto;
  overflow:hidden;
  isolation:isolate;
  animation:
    toastSlideIn .55s cubic-bezier(.22,1,.36,1) both,
    toastSlideOut .45s cubic-bezier(.5,0,.75,0) 3.25s forwards !important;
}
.toast::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 4px 4px 0;
  background:currentColor;
  box-shadow:0 0 14px currentColor;
  opacity:.95;
}
.toast::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:-1;
  background:radial-gradient(140% 140% at 0% 50%, currentColor, transparent 55%);
  opacity:.10;
}
/* Brand badge on the toast — Bloxhit logo image. Reads as "this
   notification came from Bloxhit" without being heavy-handed. The
   colored left border on the toast itself signals win/loss/info. */
.toast-brand{
  position:relative;width:44px;height:44px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.35);
}
.toast-brand-img{
  width:34px;height:34px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(59,130,246,.35));
  user-select:none;-webkit-user-drag:none;
}
.toast .toast-body{
  font-weight:600;color:var(--text);
  line-height:1.35;letter-spacing:.01em;
  padding-right:2px;min-width:0;
}
.toast .toast-body strong{color:#fff;font-weight:800}
.toast .toast-close{
  width:22px;height:22px;border-radius:7px;
  background:transparent;border:0;color:var(--text-mute);
  font-size:15px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:0;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.toast .toast-close:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
  transform:scale(1.12) rotate(90deg);
}
.toast .toast-progress{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg, currentColor, transparent);
  transform-origin:left center;
  animation:toastProgress 3.5s linear forwards;
  opacity:.85;
}

/* tinted variants — currentColor drives the accent bar + progress */
.toast.win{
  color:#3B82F6;border-color:rgba(59,130,246,.32);
  box-shadow:
    0 18px 38px rgba(0,0,0,.55),
    0 0 28px rgba(59,130,246,.28),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.toast.loss{
  color:#fca5a5;border-color:rgba(239,68,68,.42);
  box-shadow:
    0 18px 38px rgba(0,0,0,.55),
    0 0 28px rgba(239,68,68,.32),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.toast.info{
  color:#3B82F6;border-color:rgba(118,228,255,.32);
  box-shadow:
    0 18px 38px rgba(0,0,0,.55),
    0 0 28px rgba(118,228,255,.26),
    inset 0 1px 0 rgba(255,255,255,.06);
}

@keyframes toastSlideIn{
  0%{opacity:0;transform:translateX(60px) scale(.92);filter:blur(4px)}
  60%{filter:blur(0)}
  100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}
}
@keyframes toastSlideOut{
  0%{opacity:1;transform:translateX(0) scale(1)}
  100%{opacity:0;transform:translateX(80px) scale(.85);filter:blur(2px)}
}
@keyframes toastProgress{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media (max-width:700px){
  .toast-wrap{right:14px;bottom:14px;left:14px;width:auto}
}

/* ---- BUTTON v4 --------------------------------------------- */
.btn{
  transition:
    transform .22s cubic-bezier(.34,1.56,.64,1),
    box-shadow .25s cubic-bezier(.2,.8,.25,1),
    background .25s cubic-bezier(.2,.8,.25,1),
    border-color .25s ease,
    color .25s ease,
    filter .25s ease;
}
.btn:hover{filter:brightness(1.04) saturate(1.08)}
.btn:active{transform:translateY(1px) scale(.96);transition-duration:.08s}
.btn:hover .btn-shine{animation:btnShine .55s cubic-bezier(.22,1,.36,1)}

/* JS-spawned ripple wave that radiates from the click point. */
.btn-ripple{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,.22) 40%, rgba(255,255,255,0) 70%);
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;
  z-index:1;
  mix-blend-mode:screen;
  animation:btnRipple .65s cubic-bezier(.22,1,.36,1) forwards;
  width:14px;height:14px;
}
@keyframes btnRipple{
  0%{opacity:.65;transform:translate(-50%,-50%) scale(0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(28)}
}

/* The .btn-shine span and any nested label must sit ABOVE the ripple
   layer so text never disappears mid-animation. EXCLUDE .btn-shine —
   it has its own `position:absolute; left:-50%` (line 537) so the shine
   sweeps across the button face. Marking it position:relative here
   accidentally turned it into an in-flow flex item with width:50%, so
   it ate ~half the button's content area and pushed centered text
   visibly off-center (most noticeable on PLACE BET / START PLAYING).
   The z-index it needs is set separately at line 8245. */
.btn > *:not(.btn-ripple):not(.btn-shine){position:relative;z-index:2}

/* ---- GAME CARD v4 ------------------------------------------ */
/* NOTE: do NOT set `will-change: transform` here. The card has 3D-parallax
   children (.gc-name/.gc-art/.gc-tag/.gc-bubble use translateZ when
   .is-tilting). will-change:transform promotes the card to its own
   compositing layer which forces flat rendering on descendants — same
   class of bug that broke the dice 3D cube. The transform animations
   composite fine without the hint. */
.game-card{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,0,0);
  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    box-shadow .55s cubic-bezier(.16,1,.3,1),
    filter .35s ease;
}
.game-card.is-tilting{transition:transform .12s linear, box-shadow .35s, filter .35s}
.game-card:hover{
  filter:saturate(1.08) brightness(1.04);
  box-shadow:
    0 30px 60px rgba(0,0,0,.55),
    0 0 60px rgba(59,130,246,.35),
    inset 0 0 0 1px rgba(255,255,255,.10);
}
.game-card.is-tilting:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.game-card .gc-glow{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:1;
  background:radial-gradient(280px 280px at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.30), rgba(255,255,255,0) 60%);
  opacity:0;
  transition:opacity .35s cubic-bezier(.16,1,.3,1);
  mix-blend-mode:screen;
}
.game-card:hover .gc-glow{opacity:1}
.game-card .gc-name,
.game-card .gc-art,
.game-card .gc-tag,
.game-card .gc-bubble{transform-style:preserve-3d}
.game-card.is-tilting .gc-name{transform:translateZ(40px)}
.game-card.is-tilting .gc-art{transform:translateZ(30px)}
.game-card.is-tilting .gc-tag{transform:translateZ(34px)}
.game-card.is-tilting .gc-bubble{transform:translateZ(46px)}

/* ---- SIDEBAR v4 -------------------------------------------- */
.sb-link{
  transition:
    background .25s cubic-bezier(.34,1.56,.64,1),
    color .2s ease,
    transform .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow .25s ease;
}
.sb-link:hover{transform:translateX(5px)}

/* ---- BG ORB DRIFT (gentle parallax follow) ----------------- */
.bg-orb{
  transition:transform 1.6s cubic-bezier(.16,1,.3,1);
}

/* ---- SCROLLBARS — gradient pink/plum ----------------------- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(59,130,246,.40), rgba(29,78,216,.40));
  border-radius:8px;
  border:2px solid transparent;
  background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(59,130,246,.65), rgba(29,78,216,.65));
  background-clip:padding-box;
}

/* ---- ROUTE TRANSITION refinement --------------------------- */
.route.active{
  animation:routeIn .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes routeIn{
  0%{opacity:0;transform:translateY(14px) scale(.99);filter:blur(6px)}
  60%{filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

/* ---- BALANCE PILL — refined coin bump ---------------------- */
.balance.bump{animation:bumpV4 .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes bumpV4{
  0%,100%{transform:scale(1)}
  35%{transform:scale(1.14);box-shadow:0 0 36px var(--pink), 0 0 12px rgba(255,255,255,.4)}
  70%{transform:scale(.98)}
}

/* ---- REDUCED MOTION ---------------------------------------- */
@media (prefers-reduced-motion: reduce){
  /* Keep toast slide-in (it's the only signal a notification arrived)
     + button ripples (feedback the click registered) + route entry
     anim (page-change cue). Only the pure decorative background orb
     + game-card tilt-on-hover (purely cosmetic 3D) get muted — those
     are easy on the eye to drop without losing app feedback. */
  .bg-orb{animation:none !important}
  .game-card{transform:none !important}
  .game-card .gc-glow{display:none}
}

/* ============================================================
   v5 PREMIUM POLISH — refined gradients, depth, proportions
   Loaded last so it wins specificity battles against legacy rules.
   - Buttons: multi-stop gradients + 3D depth + soft inner highlight
   - Modals: glassy glow border, refined close X, title gradient
   - Topbar: subtle border highlight + scroll glow
   - Sidebar: gradient active state + smoother badges
   - Inputs: glassmorphic with glow focus ring
   - Section titles: gradient text fill
============================================================ */

/* ---- BUTTON v5 — premium multi-stop gradients + depth ------- */
.btn{
  border-radius:12px;
  font-weight:800;
  letter-spacing:.07em;
  isolation:isolate;
}
.btn::after{
  /* Inner top highlight that catches the light. */
  content:"";position:absolute;inset:1px;border-radius:11px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 36%);
  pointer-events:none;z-index:1;
  opacity:.85;
  transition:opacity .25s ease;
}
.btn:hover::after{opacity:1}
.btn:active::after{opacity:.55}
.btn .btn-shine{z-index:2}

/* PRIMARY — pink-to-magenta with depth */
.btn-primary{
  background:
    radial-gradient(120% 180% at 50% 0%, #67E8F9 0%, transparent 45%),
    linear-gradient(180deg, #3B82F6 0%, #3B82F6 45%, #1D4ED8 75%, #1E3A8A 100%);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;
  text-shadow:0 1px 0 rgba(29,78,216,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(29,78,216,.55),
    0 1px 0 rgba(255,255,255,.10),
    0 6px 14px rgba(59,130,246,.45),
    0 0 0 1px rgba(59,130,246,.30),
    0 0 26px rgba(59,130,246,.32);
}
/* Hover stays inside the brand-red palette — was previously fading to a
   pink/magenta tail (leftover from the pre-revamp palette). */
.btn-primary:hover{
  background:
    radial-gradient(120% 180% at 50% 0%, #dbeafe 0%, transparent 45%),
    linear-gradient(180deg, #93c5fd 0%, #3B82F6 45%, #3B82F6 75%, #1E3A8A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(29,78,216,.70),
    0 8px 22px rgba(59,130,246,.70),
    0 0 0 1px rgba(59,130,246,.55),
    0 0 38px rgba(59,130,246,.55);
}
.btn-primary:active{
  transform:translateY(1px) scale(.97);
  box-shadow:
    inset 0 2px 4px rgba(29,78,216,.45),
    0 2px 6px rgba(59,130,246,.3);
}

/* DEPOSIT — Hitcoin red gradient */
.btn-deposit{
  background:
    radial-gradient(120% 180% at 50% 0%, #dbeafe 0%, transparent 45%),
    linear-gradient(180deg, #67E8F9 0%, #06B6D4 45%, #3B82F6 75%, #1E3A8A 100%);
  border:1px solid rgba(255,255,255,.30);
  color:#fff;
  font-weight:900;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(29,78,216,.65),
    0 1px 0 rgba(255,255,255,.14),
    0 6px 14px rgba(59,130,246,.50),
    0 0 0 1px rgba(59,130,246,.30),
    0 0 26px rgba(59,130,246,.45);
}
.btn-deposit:hover{
  background:
    radial-gradient(120% 180% at 50% 0%, #dbeafe 0%, transparent 45%),
    linear-gradient(180deg, #93c5fd 0%, #3B82F6 45%, #06B6D4 75%, #1D4ED8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(29,78,216,.7),
    0 8px 20px rgba(59,130,246,.75),
    0 0 38px rgba(59,130,246,.55);
}
.btn-deposit:active{transform:translateY(1px) scale(.97)}

/* CASHOUT — gold gradient (kept actually-gold for the "you got money out"
   feel; on a red-themed brand this stays distinct from the SIGN-IN red). */
.btn-cashout{
  background:
    radial-gradient(120% 180% at 50% 0%, #fff5cc 0%, transparent 45%),
    linear-gradient(180deg, #ffe066 0%, #ffc933 45%, #f59e0b 75%, #ad6900 100%);
  border:1px solid rgba(255,255,255,.30);
  color:#3a1d00;
  font-weight:900;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 0 -1px 0 rgba(173,105,0,.60),
    0 6px 14px rgba(255,168,0,.55),
    0 0 0 1px rgba(255,168,0,.30),
    0 0 28px rgba(255,168,0,.40);
}
.btn-cashout:hover{
  background:
    radial-gradient(120% 180% at 50% 0%, #fff8d6 0%, transparent 45%),
    linear-gradient(180deg, #fff09a 0%, #ffe21a 45%, #ffb820 75%, #c87a0a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -1px 0 rgba(173,105,0,.70),
    0 8px 20px rgba(255,168,0,.75),
    0 0 38px rgba(255,168,0,.50);
}
.btn-cashout:active{transform:translateY(1px) scale(.97)}

/* GHOST — refined glass */
.btn-ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  color:var(--text-dim);
  font-weight:700;
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}
.btn-ghost::after{display:none}
.btn-ghost:hover{
  background:linear-gradient(180deg, rgba(59,130,246,.16), rgba(59,130,246,.06));
  border-color:rgba(59,130,246,.55);
  color:#fff;
  box-shadow:
    0 0 0 1px rgba(59,130,246,.45),
    0 8px 20px rgba(59,130,246,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* OUTLINE — refined */
.btn-outline{
  background:linear-gradient(180deg, rgba(59,130,246,.04), rgba(59,130,246,0));
  border:1.5px solid var(--pink);
  color:#fff;
  box-shadow:0 0 22px rgba(59,130,246,.22), inset 0 0 18px rgba(59,130,246,.06);
}
.btn-outline::after{display:none}
.btn-outline:hover{
  background:linear-gradient(180deg, rgba(59,130,246,.18), rgba(59,130,246,.06));
  box-shadow:0 0 32px rgba(59,130,246,.45), inset 0 0 22px rgba(59,130,246,.15);
}

/* big buttons get a touch more heft */
.btn.big{padding:15px 28px;font-size:13.5px;letter-spacing:.10em;border-radius:14px}
.btn.big::after{border-radius:13px}

/* ---- TOPBAR v5 — refined border + subtle glow on scroll ---- */
.topbar{
  background:linear-gradient(180deg, rgba(14,20,42,.92), rgba(7,10,22,.88));
  border-bottom:1px solid rgba(59,130,246,.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 6px 24px rgba(0,0,0,.45);
}
.topbar::after{
  /* Hairline highlight at the very bottom edge */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(59,130,246,.45) 25%, rgba(29,78,216,.45) 50%, rgba(59,130,246,.45) 75%, transparent 100%);
  opacity:.6;pointer-events:none;
}
.topbar{position:sticky;top:0}

/* ---- BALANCE PILL — refined gradient + finer border ---- */
.balance{
  background:
    linear-gradient(180deg, rgba(59,130,246,.22), rgba(59,130,246,.08)),
    rgba(16,20,42,.5);
  border:1px solid rgba(59,130,246,.45);
  padding:7px 14px 7px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 18px rgba(59,130,246,.20),
    0 2px 8px rgba(0,0,0,.35);
}

/* ---- SIDEBAR LINK v5 — refined active gradient + badges ---- */
.sb-link{
  border-radius:11px;
}
.sb-link.active{
  background:
    linear-gradient(90deg, rgba(59,130,246,.30) 0%, rgba(29,78,216,.16) 60%, rgba(29,78,216,0) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(59,130,246,.30),
    0 0 18px rgba(59,130,246,.10);
}
.sb-link.active::before{
  width:3px;left:-1px;
  background:linear-gradient(180deg,#bae6fd 0%, var(--pink) 40%, var(--pink-deep) 100%);
  box-shadow:0 0 14px var(--pink), 0 0 6px rgba(255,255,255,.4);
}
.sb-badge{
  font-size:9px;letter-spacing:.08em;font-weight:800;
  padding:3px 8px;border-radius:7px;line-height:1;
  border:1px solid;
}
.sb-hot{
  color:#3B82F6;
  border-color:rgba(59,130,246,.45);
  background:linear-gradient(180deg, rgba(59,130,246,.22), rgba(59,130,246,.10));
  box-shadow:0 0 10px rgba(59,130,246,.20);
}
.sb-new{
  color:#7be8a3;
  border-color:rgba(123,232,163,.45);
  background:linear-gradient(180deg, rgba(59,130,246,.22), rgba(59,130,246,.10));
  box-shadow:0 0 10px rgba(59,130,246,.20);
}

/* ---- BET INPUT v5 — refined glass with glow focus ---- */
.bet-input{
  padding:11px 14px;
  border-radius:13px;
  flex-wrap:wrap;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    rgba(8,12,24,.55);
  border:1px solid rgba(59,130,246,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 22px rgba(59,130,246,.04);
}
.bet-input:focus-within{
  border-color:var(--pink);
  box-shadow:
    0 0 0 4px rgba(59,130,246,.16),
    0 0 18px rgba(59,130,246,.25),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.bet-input button{
  border-radius:8px;
  background:linear-gradient(180deg, rgba(59,130,246,.20), rgba(59,130,246,.08));
  border:1px solid rgba(59,130,246,.30);
  font-weight:800;letter-spacing:.04em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---- MODAL v5 — premium glass with glow border ---- */
.modal-backdrop{
  background:rgba(8,5,18,.62);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.modal{
  border-radius:24px;
  background:
    linear-gradient(165deg, rgba(16,20,42,.96) 0%, rgba(12,16,34,.98) 100%);
  border:1px solid rgba(59,130,246,.18);
  box-shadow:
    0 30px 80px rgba(0,0,0,.7),
    0 0 0 1px rgba(59,130,246,.12),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 60px rgba(59,130,246,.08);
  padding:34px 32px;
}
/* Glow ring removed — the prior `mask-composite: exclude` trick rendered
   visible artifacts at the corners on certain GPUs/browsers (see user
   screenshot). Replaced with a subtle multi-stop box-shadow on the
   .modal itself which is uniform on every renderer. */
.modal-close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:11px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text-dim);
  cursor:pointer;font-size:0;line-height:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
  z-index:2;
}
/* Render an SVG-like X using CSS pseudo-elements so we don't have to
   change the existing `<button class="modal-close">×</button>` markup. */
.modal-close::before,
.modal-close::after{
  content:"";position:absolute;width:14px;height:1.5px;border-radius:1px;
  background:currentColor;
  transition:background .2s;
}
.modal-close::before{transform:rotate(45deg)}
.modal-close::after{transform:rotate(-45deg)}
.modal-close:hover{
  background:rgba(59,130,246,.20);
  border-color:rgba(59,130,246,.55);
  color:#bae6fd;
  transform:rotate(90deg);
}
.modal-title{
  font-family:'Sora';font-weight:400;font-size:30px;letter-spacing:.01em;
  background:linear-gradient(180deg, #ffffff 0%, #dbeafe 60%, #3B82F6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(59,130,246,.35));
  margin-bottom:8px;
  text-shadow:none;
}
.modal-sub{color:var(--text-dim);margin-bottom:22px;font-size:13.5px;font-weight:600;line-height:1.5}

@keyframes modalIn{
  0%{opacity:0;transform:scale(.97) translateY(14px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

/* ---- SECTION TITLE v5 — gradient text fill ---- */
.section-title{
  background:linear-gradient(180deg, #ffffff 0%, #dbeafe 65%, #3B82F6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 12px rgba(59,130,246,.18));
  letter-spacing:.01em;
}

/* ---- LIVE BET FEED v5 — refined tabs ---- */
.bf-tab{
  border-radius:10px;
  font-weight:800;letter-spacing:.06em;
  transition:background .2s, color .2s, transform .15s, box-shadow .25s;
}
.bf-tab.active{
  background:linear-gradient(180deg, var(--pink), var(--pink-deep));
  color:#fff;border-color:rgba(255,255,255,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(29,78,216,.5),
    0 4px 12px rgba(59,130,246,.40);
  text-shadow:0 1px 0 rgba(29,78,216,.4);
}

/* ---- FAIR PILL v5 — slimmer + premium ---- */
.fair-pill{
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(59,130,246,.30);
  letter-spacing:.06em;font-weight:800;font-size:13px;
  transition:background .25s, border-color .25s, transform .2s, box-shadow .25s;
}
.fair-pill:hover{
  background:linear-gradient(180deg, rgba(59,130,246,.18), rgba(59,130,246,.06));
  border-color:rgba(59,130,246,.65);
  box-shadow:0 0 20px rgba(59,130,246,.30);
}

/* ---- BC GLYPH inside toast bodies — hairline halo ---- */
.toast .bc-glyph{filter:drop-shadow(0 0 6px rgba(59,130,246,.5))}

/* ---- CHAT input v5 ---- */
.chat-input input{
  background:rgba(8,12,24,.55);
  border:1px solid rgba(59,130,246,.16);
  border-radius:11px;
  transition:border-color .25s, box-shadow .25s;
}
.chat-input input:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(59,130,246,.20), 0 0 14px rgba(59,130,246,.20);
}

/* ---- ONLINE PILL v5 — refined emerald ---- */
.online-pill{
  background:
    linear-gradient(180deg, rgba(59,130,246,.18), rgba(59,130,246,.06)),
    rgba(8,12,24,.4);
  border:1px solid rgba(59,130,246,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 18px rgba(59,130,246,.16);
  border-radius:10px;
  padding:7px 14px;
}

/* ---- PROFILE PILL v5 ---- */
.profile{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(59,130,246,.20);
  border-radius:99px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.25);
}

/* ---- CRYPTO CARD v5 — refined hover ---- */
.crypto-card{
  border-radius:13px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s, box-shadow .25s, background .25s;
}
.crypto-card:hover{
  transform:translateY(-3px);
  border-color:rgba(59,130,246,.55);
  background:linear-gradient(180deg, rgba(59,130,246,.10), rgba(59,130,246,.02));
  box-shadow:0 10px 24px rgba(0,0,0,.4), 0 0 22px rgba(59,130,246,.20);
}
.crypto-card.selected{
  border-color:var(--cyan);
  box-shadow:
    0 0 0 1px var(--cyan),
    0 0 28px rgba(118,228,255,.30),
    0 10px 24px rgba(0,0,0,.4);
  background:linear-gradient(180deg, rgba(118,228,255,.08), rgba(118,228,255,.02));
}

/* ---- BG ORB v5 — softer pink/purple/orange (reverted from red so the
   game shells don't read as red-on-red-on-red). ---- */
.bg-orb-1{
  background:radial-gradient(circle, rgba(59,130,246,.38), transparent 70%);
  filter:blur(80px);
}
.bg-orb-2{
  background:radial-gradient(circle, rgba(29,78,216,.36), transparent 70%);
  filter:blur(80px);
}
.bg-orb-3{
  background:radial-gradient(circle, rgba(59,130,246,.18), transparent 70%);
  filter:blur(70px);
}

/* ---- BODY GRID — finer red overlay ---- */
body::before{
  background-image:
    linear-gradient(rgba(59,130,246,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.035) 1px, transparent 1px);
  background-size:64px 64px;
}

/* ---- SCROLLBAR v5 — slimmer track + corner softening ---- */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(59,130,246,.50), rgba(29,78,216,.50));
  border-radius:9px;border:2px solid transparent;background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(59,130,246,.75), rgba(29,78,216,.75));
  background-clip:padding-box;
}
* { scrollbar-width:thin; scrollbar-color: rgba(59,130,246,.55) transparent }

/* ---- HISTORY BAR v5 ---- */
.history-bar{
  border-radius:13px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(59,130,246,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---- FOCUS RING — accessibility + premium feel ---- */
:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:2px;
  border-radius:6px;
}
.btn:focus-visible{outline-offset:4px}
.sb-link:focus-visible, .bf-tab:focus-visible{outline-offset:1px}

/* ============================================================
   v6 QUIRKS — playful micro-touches
   - Bet coin scales with bet/balance ratio
   - Fire emoji + MAX→"ALL IN" when betting all your money
   - Smooth number ticker via JS, no extra CSS
   - Top scroll progress bar
   - BC coin pulse + click spin
   - Live feed row entry highlight
============================================================ */

/* ---- Bet input v9 — bloxflip-style: large number, hex-coin, soft pills ----
   The fire/coin-scale/ALL IN system was scrapped per user feedback. The
   ½ / 2× / MAX buttons (and any optional bet-preset chips) all share one
   uniform pill style so the row reads as a single calm strip. */
.bet-input{
  position:relative;
  /* Reset to the cleaner bloxflip silhouette: dark inset, rounded rect. */
  padding:12px 14px !important;
  background:linear-gradient(180deg, rgba(8,12,24,.50), rgba(8,12,24,.30)) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
  gap:10px !important;
  align-items:center;
  flex-wrap:wrap !important;
}
.bet-input:focus-within{
  border-color:rgba(59,130,246,.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(59,130,246,.12) !important;
}
.bet-input input[type="number"]{
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  /* Hide the spinner buttons — they don't fit the minimal aesthetic. */
  -moz-appearance:textfield;
}
.bet-input input[type="number"]::-webkit-outer-spin-button,
.bet-input input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.bet-input .bcoin-icon{
  flex-shrink:0;
  width:28px;height:28px;
  transition:filter .25s ease;
}

/* Modern quick-select chips — glassy, slightly raised, blue tint on hover. */
.bet-input button[data-bet-action]{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;height:34px;padding:0 14px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#cbd5e1 !important;
  font-family:'Inter',sans-serif;
  font-weight:800;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition:
    background .22s var(--ease-smooth),
    color .22s var(--ease-smooth),
    border-color .22s var(--ease-smooth),
    transform .18s var(--ease-bounce),
    box-shadow .22s var(--ease-smooth) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 6px rgba(0,0,0,.25) !important;
}
.bet-input button[data-bet-action]:hover{
  background:
    linear-gradient(180deg, rgba(96,165,250,.20), rgba(59,130,246,.10)) !important;
  color:#fff !important;
  border-color:rgba(96,165,250,.55) !important;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 4px 12px rgba(59,130,246,.30) !important;
}
.bet-input button[data-bet-action]:active{
  transform:translateY(0) scale(.96);
  background:rgba(59,130,246,.30) !important;
}

/* Bet preset chips — inline row of value-shortcuts shown UNDER the bet
   input (e.g. 5 / 25 / 100 / 500). Mirrors bloxflip's "Amount of rows"
   strip — pure quick-pick, no slider. */
.bet-presets{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-top:8px;
}
.bet-presets button{
  flex:1 1 0;
  min-width:0;
  height:36px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1;
  font-family:'Inter',sans-serif;
  font-weight:800;font-size:14px;letter-spacing:.04em;line-height:1;
  cursor:pointer;
  transition:
    background .22s var(--ease-smooth),
    color .22s var(--ease-smooth),
    border-color .22s var(--ease-smooth),
    transform .18s var(--ease-bounce),
    box-shadow .22s var(--ease-smooth);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 6px rgba(0,0,0,.25);
}
.bet-presets button:hover{
  background:
    linear-gradient(180deg, rgba(96,165,250,.20), rgba(59,130,246,.10));
  color:#fff;
  border-color:rgba(96,165,250,.55);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 4px 12px rgba(59,130,246,.30);
}
.bet-presets button.active{
  background:linear-gradient(180deg, #3B82F6, #1D4ED8);
  color:#fff;
  border-color:rgba(96,165,250,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 4px 14px rgba(59,130,246,.45);
}
.bet-presets button:active{
  transform:translateY(0) scale(.96);
}

/* ---- Top scroll progress bar ---- */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;
  z-index:120;pointer-events:none;
  transform:scaleX(var(--scroll-progress, 0));
  transform-origin:left center;
  background:linear-gradient(90deg, var(--pink) 0%, var(--plum) 50%, var(--orange) 100%);
  box-shadow:0 0 12px rgba(59,130,246,.55), 0 0 2px rgba(255,255,255,.4);
  transition:transform .08s linear;
}

/* ---- Hitcoin badge pulse + click spin ----
   The .bcoin-icon CSS class name is kept to avoid breaking 30+ existing
   call-sites in index.html / app.js — but the visual identity is now
   the floating Hitcoin red square. The pulse glow is red, and the spin
   on click is paired with a brief red halo for extra punch. */
.bcoin-icon{
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.balance .bcoin-icon{
  animation:bcPulse 3s ease-in-out infinite, hitcoinFloat 4s ease-in-out infinite;
}
@keyframes bcPulse{
  0%,100%{filter:drop-shadow(0 0 6px rgba(59,130,246,.55))}
  50%   {filter:drop-shadow(0 0 14px rgba(59,130,246,.95)) drop-shadow(0 0 4px rgba(255,255,255,.4))}
}
.bcoin-icon.coin-spin{
  animation:bcSpin .65s cubic-bezier(.16,1,.3,1) 1;
}
@keyframes bcSpin{
  0%  {transform:rotate(0deg) scale(1);filter:drop-shadow(0 0 6px rgba(59,130,246,.55))}
  50% {transform:rotate(180deg) scale(1.25);filter:drop-shadow(0 0 18px rgba(59,130,246,1)) drop-shadow(0 0 4px rgba(255,255,255,.6))}
  100%{transform:rotate(360deg) scale(1);filter:drop-shadow(0 0 6px rgba(59,130,246,.55))}
}

/* ---- Live bet feed entry highlight ---- */
.bf-row.bf-new{
  animation:bfNewIn .55s cubic-bezier(.16,1,.3,1) 1, bfNewFlash 1.2s ease-out 1;
}
@keyframes bfNewIn{
  0%  {opacity:0;transform:translateY(-8px) scale(.98)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes bfNewFlash{
  0%  {background:linear-gradient(90deg, rgba(59,130,246,.18), transparent 40%)}
  100%{background:transparent}
}

/* ---- Smooth number ticker — JS-driven, just style hooks ---- */
.num-ticker{
  display:inline-block;
  transition:color .25s ease, text-shadow .25s ease;
}
.num-ticker.ticking{
  color:#3B82F6;
  text-shadow:0 0 12px rgba(255,217,0,.55);
}

/* ---- Game card subtle sparkle pass ---- */
.game-card{position:relative}
.game-card::before{
  /* refresh: faint sweeping highlight every cycle */
  background:radial-gradient(circle, rgba(255,255,255,.30), transparent 70%);
}
.game-card .gc-sparkle{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  background-size:240% 100%;
  background-position:130% 0;
  opacity:0;
  z-index:1;
  mix-blend-mode:screen;
}
.game-card:hover .gc-sparkle{
  opacity:1;
  animation:gcSparkleSweep 1.1s cubic-bezier(.16,1,.3,1) 1;
}
@keyframes gcSparkleSweep{
  0%  {background-position:130% 0;opacity:0}
  20% {opacity:1}
  100%{background-position:-130% 0;opacity:0}
}

/* ============================================================
   v7 SVG ICON KIT — animated inline replacements for emojis.
   All icons use SVG data URIs with multi-stop gradients to match
   the visual quality of .gh-svg game-header art.
============================================================ */

/* Tiny dice — used in topbar rounds/min indicator. Tumbles gently. */
.ico-dice-tiny{
  display:inline-block;
  width:14px;height:14px;
  vertical-align:-2px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><linearGradient id='dg' x1='0' x2='1' y1='0' y2='1'><stop offset='0' stop-color='%23ffffff'/><stop offset='1' stop-color='%23ffd0e8'/></linearGradient></defs><rect x='3' y='3' width='18' height='18' rx='3.5' fill='url(%23dg)' stroke='%23c8276e' stroke-width='1.4'/><circle cx='8' cy='8' r='1.6' fill='%23c8276e'/><circle cx='16' cy='8' r='1.6' fill='%23c8276e'/><circle cx='12' cy='12' r='1.6' fill='%23c8276e'/><circle cx='8' cy='16' r='1.6' fill='%23c8276e'/><circle cx='16' cy='16' r='1.6' fill='%23c8276e'/></svg>") center/contain no-repeat;
  animation:diceTumble 4s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(59,130,246,.4));
}
@keyframes diceTumble{
  0%,100%{transform:rotate(-6deg)}
  50%{transform:rotate(6deg)}
}

/* Tiny mine — used in mines suffix slot. */
.ico-mine-tiny{
  display:inline-block;
  width:18px;height:18px;
  vertical-align:-3px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><radialGradient id='mb' cx='.4' cy='.35'><stop offset='0' stop-color='%237b87a3'/><stop offset='.55' stop-color='%233b4258'/><stop offset='1' stop-color='%230f1320'/></radialGradient></defs><circle cx='12' cy='15' r='7' fill='url(%23mb)' stroke='%23000' stroke-width='.8'/><ellipse cx='9.5' cy='12.5' rx='1.8' ry='1' fill='%23ffffff' opacity='.30'/><path d='M14 9 q2 -2 2 -5' stroke='%237a3a55' stroke-width='1.1' fill='none' stroke-linecap='round'/><circle cx='16.5' cy='3.5' r='1.6' fill='%23ffd900'/><circle cx='16.5' cy='3.5' r='2.6' fill='none' stroke='%23ff8c2a' stroke-width='.5' opacity='.7'/></svg>") center/contain no-repeat;
  animation:mineSpark 1.4s ease-in-out infinite;
  filter:drop-shadow(0 0 5px rgba(255,140,40,.4));
}
@keyframes mineSpark{
  0%,100%{filter:drop-shadow(0 0 4px rgba(255,140,40,.35))}
  50%   {filter:drop-shadow(0 0 9px rgba(255,217,0,.7))}
}

/* Tiny flame — used in streak labels, etc. */
.ico-flame-tiny{
  display:inline-block;
  width:12px;height:14px;
  vertical-align:-3px;
  margin-right:4px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><defs><linearGradient id='fl' x1='0' x2='0' y1='1' y2='0'><stop offset='0' stop-color='%23ff3860'/><stop offset='.5' stop-color='%23ff8b3a'/><stop offset='1' stop-color='%23ffd900'/></linearGradient></defs><path d='M12 2 C 7 7 5 12 8 17 C 9 20 5 22 8 25 C 11 28 17 27 18 23 C 19 19 16 17 17 14 C 18 9 16 5 12 2 Z' fill='url(%23fl)'/></svg>") center/contain no-repeat;
  animation:fireFlick .35s ease-in-out infinite alternate;
}

/* Section header icon — animated Hitcoin brand mark (was a sakura
   petal cluster, off-brand). Same gentle bob animation so the section
   title still reads as alive. */
.section-icon{
  display:inline-block;
  width:32px;height:32px;
  vertical-align:-8px;
  margin-left:10px;
  background:url('assets/Hitcoin new.png') center/contain no-repeat;
  animation:sectionIconBob 4s ease-in-out infinite;
  filter:drop-shadow(0 2px 6px rgba(59,130,246,.45))
         drop-shadow(0 0 8px rgba(232, 217, 90,.30));
}
@keyframes sectionIconBob{
  0%,100%{transform:translateY(0) rotate(-6deg)}
  50%   {transform:translateY(-3px) rotate(6deg)}
}

/* Burst variant for celebratory section (e.g. Latest big wins) — gold star burst. */
.section-icon--burst{
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='sb' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23fff8c2'/><stop offset='.5' stop-color='%23ffd900'/><stop offset='1' stop-color='%23ff8b3a'/></linearGradient></defs><g transform='translate(16 16)'><path d='M0 -13 L3 -4 L13 -4 L5 1 L8 11 L0 5 L-8 11 L-5 1 L-13 -4 L-3 -4 Z' fill='url(%23sb)' stroke='%23c95a1a' stroke-width='.8'/><circle r='2' fill='%23ffffff' opacity='.6'/></g></svg>") center/contain no-repeat;
  animation:burstSpinSlow 3s ease-in-out infinite;
  filter:drop-shadow(0 2px 8px rgba(255,217,0,.55));
}
@keyframes burstSpinSlow{
  0%,100%{transform:rotate(-12deg) scale(1)}
  50%   {transform:rotate(12deg)  scale(1.10)}
}

/* Title-burst (case opening title) — uses same star but bigger. */
.title-burst{
  display:inline-block;
  width:34px;height:34px;
  vertical-align:-9px;
  margin-right:8px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='sb' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23fff8c2'/><stop offset='.5' stop-color='%23ffd900'/><stop offset='1' stop-color='%23ff8b3a'/></linearGradient></defs><g transform='translate(16 16)'><path d='M0 -13 L3 -4 L13 -4 L5 1 L8 11 L0 5 L-8 11 L-5 1 L-13 -4 L-3 -4 Z' fill='url(%23sb)' stroke='%23c95a1a' stroke-width='.8'/><circle r='2' fill='%23ffffff' opacity='.6'/></g></svg>") center/contain no-repeat;
  animation:burstSpinSlow 3s ease-in-out infinite;
  filter:drop-shadow(0 0 12px var(--gold));
}

/* In-game mine bomb tile (BOMB_SVG inserted by app.js). */
.mt-bomb{ width:80%; height:80%; display:block; margin:auto; }
.mt-bomb-body{ animation:mtBombShake .5s ease-in-out infinite alternate }
@keyframes mtBombShake{
  from{transform-origin:center;transform:translate(0,0)}
  to  {transform:translate(-.6px,.6px)}
}
.mt-bomb-spark{ animation:mtBombSpark .35s ease-in-out infinite alternate; transform-origin:center }
@keyframes mtBombSpark{
  from{transform:scale(.85)}
  to  {transform:scale(1.20)}
}
.mt-bomb-fuse{ stroke-dasharray:18; stroke-dashoffset:0; animation:mtBombFuse 1.4s linear infinite }
@keyframes mtBombFuse{
  from{stroke-dashoffset:0}
  to  {stroke-dashoffset:-18}
}

/* ============================================================
   v7 RESULT BANNER — premium glass + animated SVG icon
============================================================ */
.result-banner .rb-card{
  /* Override prior corner-toast layout: now has SVG icon block, premium
     glass, color-coded ring border. */
  display:grid;
  grid-template-columns:46px 1fr auto;
  column-gap:14px;
  padding:14px 18px 16px 14px;
  border-radius:18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(59,130,246,.20), transparent 65%),
    linear-gradient(180deg, rgba(16,20,42,.94), rgba(8,12,24,.97));
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 22px 50px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,0,0,.4);
  overflow:visible; /* let the icon's pulsing ring extend */
  isolation:isolate;
}
/* Replace the previous 4px left bar with a real SVG icon box. */
.result-banner .rb-icon{
  width:46px;height:46px;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  display:flex;align-items:center;justify-content:center;
  grid-row:span 2;
  font-size:0;line-height:0;
  position:relative;
}
.result-banner .rb-icon .rbi{
  width:100%;height:100%;display:block;
  animation:rbiPop .55s cubic-bezier(.34,1.56,.64,1) 1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
}
.result-banner .rb-icon .rbi-stroke{
  stroke-dasharray:42;
  stroke-dashoffset:42;
  animation:rbiDraw .55s cubic-bezier(.16,1,.3,1) .15s forwards;
}
.result-banner .rb-icon .rbi-ring{
  transform-origin:center;
  animation:rbiRing 1.6s ease-out infinite;
  opacity:.55;
}
@keyframes rbiPop{
  0%  {transform:scale(.5) rotate(-30deg);opacity:0}
  60% {transform:scale(1.12) rotate(0);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes rbiDraw{
  to{stroke-dashoffset:0}
}
@keyframes rbiRing{
  0%  {transform:scale(.85);opacity:.7}
  60% {transform:scale(1.25);opacity:0}
  100%{transform:scale(1.25);opacity:0}
}
/* Color tints (override the small-glyph colors from earlier). */
.result-banner.win{ filter:drop-shadow(0 18px 40px rgba(59,130,246,.35)) drop-shadow(0 0 24px rgba(0,0,0,.5)) }
.result-banner.loss{ filter:drop-shadow(0 18px 40px rgba(59,130,246,.35)) drop-shadow(0 0 24px rgba(0,0,0,.5)) }
.result-banner.push{ filter:drop-shadow(0 18px 40px rgba(255,217,0,.35)) drop-shadow(0 0 24px rgba(0,0,0,.5)) }

.result-banner.win  .rb-card{ border-color:rgba(59,130,246,.35) }
.result-banner.loss .rb-card{ border-color:rgba(59,130,246,.35) }
.result-banner.push .rb-card{ border-color:rgba(255,217,0,.35) }

.result-banner .rb-title{
  font-family:'Sora';font-weight:800;font-size:15px;letter-spacing:.10em;
  text-shadow:none;
  filter:drop-shadow(0 0 14px currentColor);
}
.result-banner .rb-sub{
  font-size:11.5px;color:var(--text-dim);
  letter-spacing:.02em;line-height:1.3;
  font-weight:600;
}
.result-banner .rb-payout{
  font-family:'Sora';font-weight:900;font-size:14.5px;
  padding:6px 12px;border-radius:99px;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.35);
}

/* ============================================================
   v8 CENTERING + LIMITS — final polish
============================================================ */
/* Modal title and sub centered for cleaner premium look. */
.modal-title{ text-align:center }
.modal-sub{ text-align:center }
/* Fair history modal table left-aligned for data clarity. */
.modal-fair .fair-table-head, .modal-fair .fair-table-body{ text-align:left }
/* Empty state in fair-history centered. */
.fair-empty{ text-align:center; padding:24px 8px; color:var(--text-mute) }

/* History bar gets a max width + centered scroll for compactness. */
.history-bar-top{
  justify-content:center;
  max-width:780px;
  margin:14px auto 18px;
  flex-wrap:nowrap;overflow-x:auto;
}
.history-bar-top::-webkit-scrollbar{display:none}
.history-bar .hist-item{flex-shrink:0}

/* Suffix-mine inline icon container */
.suffix-mine{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;
}

/* Generic .ico utility class — used when an inline SVG bg-image is set */
.ico{ display:inline-block; vertical-align:-2px; }

/* ============================================================
   Hitcoin glyph — subtle ambient shimmer everywhere it appears.
   The glyph is the inline coin chip shown wherever we used to
   write the literal text "BC". Hover gives it a gentle scale +
   red halo so it feels alive without being noisy.
============================================================ */
.bc-glyph{
  filter:drop-shadow(0 0 5px rgba(59,130,246,.55)) drop-shadow(0 0 10px rgba(34,211,238,.22));
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), filter .25s ease;
  animation:bcGlyphShimmer 3.4s ease-in-out infinite;
}
.bc-glyph:hover{
  transform:scale(1.22) rotate(-8deg);
  filter:drop-shadow(0 0 12px rgba(59,130,246,.95)) drop-shadow(0 0 22px rgba(34,211,238,.55));
}
@keyframes bcGlyphShimmer{
  0%,100%{
    filter:drop-shadow(0 0 4px rgba(59,130,246,.45)) drop-shadow(0 0 10px rgba(34,211,238,.18));
  }
  50%{
    filter:drop-shadow(0 0 10px rgba(59,130,246,.75)) drop-shadow(0 0 22px rgba(34,211,238,.45)) drop-shadow(0 0 3px rgba(255,255,255,.35));
  }
}
/* Inline variant — slightly wider for headings/labels. */
.bc-glyph-inline{ width:1.05em;height:1.05em;vertical-align:-.18em }
@media (prefers-reduced-motion: reduce){
  .bc-glyph{ animation:none }
}

/* ============================================================
   v10 USD readout under bet inputs — replaces the cramped ".cs-usd"
   that lived inside the now-removed coin-slider-host.
============================================================ */
.bet-usd-readout{
  margin-top:8px;
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  color:var(--text-mute);
  text-align:right;
  padding-right:4px;
  transition:color .25s ease;
}
.bet-usd-readout:not(:empty){ color:var(--text-dim) }

/* ============================================================
   v10 PLINKO landing badge — bloxflip-style per-ball inline
   notification. Floats above the slot the ball lands in, color-
   coded by outcome, auto-dismisses after ~1.4s. Multiple balls
   each spawn their own badge without overlap (z-stack).
============================================================ */
.plinko-land{
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(16,20,42,.96), rgba(8,12,24,.98));
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:6px 10px;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-family:'Inter', sans-serif;
  font-weight:800;font-size:13px;letter-spacing:.04em;
  color:#fff;
  white-space:nowrap;
  pointer-events:none;
  z-index:6;
  box-shadow:0 8px 18px rgba(0,0,0,.5);
  animation:plinkoLandIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
.plinko-land strong{
  font-family:'Sora', sans-serif;
  font-weight:800;font-size:16px;letter-spacing:.01em;
}
.plinko-land .plinko-land-pl{ font-size:10.5px; letter-spacing:.04em }
.plinko-land-win{
  border-color:rgba(59,130,246,.45);
  box-shadow:0 8px 18px rgba(0,0,0,.5), 0 0 18px rgba(59,130,246,.35);
}
.plinko-land-win strong{ color:#28c76f; text-shadow:0 0 10px rgba(40,199,111,.6) }
.plinko-land-win .plinko-land-pl{ color:#67E8F9 }
.plinko-land-loss{
  border-color:rgba(59,130,246,.40);
  box-shadow:0 8px 18px rgba(0,0,0,.5), 0 0 14px rgba(59,130,246,.30);
}
.plinko-land-loss strong{ color:#3B82F6 }
.plinko-land-loss .plinko-land-pl{ color:#3B82F6 }
.plinko-land-push strong{ color:#3B82F6 }
.plinko-land-push .plinko-land-pl{ color:#3B82F6 }
.plinko-land-out{
  animation:plinkoLandOut .45s ease forwards;
}
@keyframes plinkoLandIn{
  from{ opacity:0; transform:translate(-50%, 6px) scale(.85) }
  to  { opacity:1; transform:translate(-50%, 0)   scale(1)   }
}
@keyframes plinkoLandOut{
  to{ opacity:0; transform:translate(-50%, -22px) scale(.9) }
}
@media (prefers-reduced-motion: reduce){
  .plinko-land{ animation:none; opacity:1 }
  .plinko-land-out{ opacity:0; transition:opacity .25s }
}

/* ============================================================
   v11 COMING SOON state — used by Affiliate route (and any future
   placeholder routes). Centered, glassmorphic card with a slow
   pulse on the icon ring + sparkle stars.
============================================================ */
.coming-soon{
  margin:32px auto;
  max-width:560px;
  padding:48px 36px;
  text-align:center;
  border-radius:24px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(165deg, rgba(16,20,42,.92) 0%, rgba(12,16,34,.96) 100%);
  border:1px solid rgba(59,130,246,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 22px 50px rgba(0,0,0,.55),
    0 0 60px rgba(59,130,246,.10);
  position:relative;
}
.coming-soon-art{
  width:96px;height:96px;margin:0 auto 18px;
  filter:drop-shadow(0 0 18px rgba(59,130,246,.45));
}
.coming-soon-art svg{ width:100%; height:100%; display:block }
.coming-soon-art .cs-ring{
  transform-origin:32px 32px;
  animation:csRingSpin 14s linear infinite;
}
@keyframes csRingSpin{ to { transform:rotate(360deg) } }
.coming-soon-art .cs-spark-a{ animation:csSpark 1.6s ease-in-out -0s   infinite alternate }
.coming-soon-art .cs-spark-b{ animation:csSpark 1.6s ease-in-out -.4s  infinite alternate }
.coming-soon-art .cs-spark-c{ animation:csSpark 1.6s ease-in-out -.8s  infinite alternate }
.coming-soon-art .cs-spark-d{ animation:csSpark 1.6s ease-in-out -1.2s infinite alternate }
@keyframes csSpark{ from { opacity:.2 } to { opacity:1 } }
.coming-soon-title{
  font-family:'Sora', sans-serif; font-weight:800; font-size:24px;
  letter-spacing:.02em; margin-bottom:12px;
  background:linear-gradient(180deg, #ffffff 0%, #dbeafe 65%, #3B82F6 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 12px rgba(59,130,246,.30));
}
.coming-soon-sub{
  font-family:'Inter', sans-serif; font-weight:600; font-size:16px;
  color:var(--text-dim); line-height:1.55; margin-bottom:14px;
  letter-spacing:.01em;
}
.coming-soon-meta{
  font-family:'Inter', sans-serif; font-weight:600; font-size:14px;
  color:var(--text-mute); line-height:1.5;
  letter-spacing:.02em;
}
@media (prefers-reduced-motion: reduce){
  .coming-soon-art .cs-ring,
  .coming-soon-art .cs-spark-a,
  .coming-soon-art .cs-spark-b,
  .coming-soon-art .cs-spark-c,
  .coming-soon-art .cs-spark-d{ animation:none }
}

/* ============================================================
   v11 SLOTS PAYTABLE — collapsible disclosure
   Replaces the always-visible giant multiplier grid with a
   tap-to-reveal panel that integrates into the slots layout.
   When closed: a single clean row shows "Payouts" + chevron.
   When open: the existing paytable-v2 grid renders inside.
============================================================ */
.paytable-collapse{
  margin-top:18px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(8,12,24,.50), rgba(8,12,24,.30));
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.paytable-collapse[open]{
  border-color:var(--pd-line-hover, rgba(255,255,255,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 8px 22px rgba(0,0,0,.30);
}
.paytable-summary{
  list-style:none;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  cursor:pointer;
  user-select:none;
  font-family:'Inter', sans-serif;
  transition:background .2s ease;
}
.paytable-summary::-webkit-details-marker{display:none}
.paytable-summary::marker{content:''}
.paytable-summary:hover{ background:rgba(59,130,246,.06) }
.paytable-summary .ps-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;
  color:var(--text-mute);
  flex-shrink:0;
}
.paytable-summary .ps-icon svg{width:16px;height:16px;display:block}
.paytable-summary .ps-label{
  font-weight:800;font-size:15px;letter-spacing:.10em;text-transform:uppercase;
  color:#fff;
}
.paytable-summary .ps-meta{
  font-weight:600;font-size:11.5px;color:var(--text-mute);
  letter-spacing:.04em;
  margin-left:auto;
}
.paytable-summary .ps-chev{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;color:var(--text-dim);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.paytable-collapse[open] .paytable-summary .ps-chev{ transform:rotate(180deg); color:#bae6fd }

/* Inside: tighten the existing .paytable-v2 grid so the open state
   is information-dense without feeling cramped. */
.paytable-collapse .paytable-v2{
  margin:0;
  padding:14px 16px 18px;
  background:transparent;
  border:0;
  box-shadow:none;
  animation:paytableReveal .35s cubic-bezier(.16,1,.3,1);
}
.paytable-collapse .paytable-v2 .pt-grid{
  gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
}
.paytable-collapse .paytable-v2 .pt-card{
  padding:10px 8px 12px;
  border-radius:12px;
}
.paytable-collapse .paytable-v2 .pt-card-name{ font-size:11.5px }
.paytable-collapse .paytable-v2 .pt-card-syms .pt-icon{ width:24px;height:24px }
.paytable-collapse .paytable-v2 .pt-card-mult{ font-size:18px }
.paytable-collapse .paytable-v2 .pt-rarity-badge{
  font-size:8.5px; padding:2px 6px; letter-spacing:.06em;
}
.paytable-collapse .paytable-v2 .pt-head{ display:none }   /* duplicates the summary */

@keyframes paytableReveal{
  0%{ opacity:0; transform:translateY(-6px) }
  100%{ opacity:1; transform:translateY(0) }
}
@media (prefers-reduced-motion: reduce){
  .paytable-collapse .paytable-v2{ animation:none }
  .paytable-summary .ps-chev{ transition:none }
}
@media (max-width:760px){
  .paytable-summary .ps-meta{ display:none }
  .paytable-collapse .paytable-v2 .pt-grid{
    grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  }
}

/* ============================================================
   v12 HISTORY MODAL — user's audit_log timeline
============================================================ */
.hist-tabs{
  display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid var(--line-2);
}
.hist-tab{
  padding:7px 14px; border-radius:9px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text-dim);
  font-family:'Inter', sans-serif;
  font-weight:700; font-size:11.5px; letter-spacing:.06em;
  cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .15s cubic-bezier(.34,1.56,.64,1);
}
.hist-tab:hover{
  background:rgba(59,130,246,.10);
  color:#fff;
  border-color:rgba(59,130,246,.35);
}
.hist-tab.active{
  background:linear-gradient(180deg, rgba(59,130,246,.22), rgba(59,130,246,.10));
  color:#fff;
  border-color:rgba(59,130,246,.55);
  box-shadow:0 0 12px rgba(59,130,246,.20);
}
.hist-table{
  background:rgba(8,12,24,.50);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  overflow:hidden;
}
.hist-table-head{
  display:grid;
  grid-template-columns:110px 1fr 130px 130px 90px;
  gap:10px;
  padding:10px 14px;
  background:rgba(59,130,246,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  font-family:'Inter', sans-serif;
  font-weight:800; font-size:10.5px; letter-spacing:.10em;
  color:var(--text-mute); text-transform:uppercase;
}
.hist-table-body{ max-height:50vh; overflow-y:auto }
/* Scoped to .hist-table-body so the 5-column "Type / Detail / Amount /
   Balance / Date" layout doesn't clobber the per-game sidebar `.hist-row`
   (3-column "icon / meta / profit"). Without this scope the modal grid
   bled into the sidebar list and caused the time + profit overlap the
   user reported. */
.hist-table-body .hist-row{
  display:grid;
  grid-template-columns:110px 1fr 130px 130px 90px;
  gap:10px;
  padding:11px 14px;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-family:'Inter', sans-serif;
  font-size:15px; align-items:center;
  transition:background .15s ease;
}
.hist-table-body .hist-row:last-child{ border-bottom:none }
.hist-table-body .hist-row:hover{ background:rgba(59,130,246,.04) }
.hist-kind{
  display:flex; align-items:center; gap:8px;
  font-weight:700; color:var(--text);
}
.hist-dot{
  width:7px; height:7px; border-radius:50%;
  flex-shrink:0;
}
.hist-detail{ color:var(--text-dim); font-weight:600 }
.hist-amount{
  font-family:'Sora', sans-serif; font-weight:800;
  text-align:right;
}
.hist-amount.hist-pos{ color:#28c76f }
.hist-amount.hist-neg{ color:#3B82F6 }
.hist-balance{
  font-family:'Sora', sans-serif; font-weight:600; font-size:12.5px;
  color:var(--text-dim); text-align:right;
}
.hist-date{
  color:var(--text-mute); font-weight:600; font-size:11.5px;
  text-align:right;
}
.hist-foot{
  margin-top:14px;
  text-align:center;
  font-family:'Inter', sans-serif;
  font-size:11.5px; color:var(--text-mute);
  letter-spacing:.04em;
}
@media (max-width:760px){
  .hist-table-head{ display:none }
  .hist-table-body .hist-row{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "kind     amount"
      "detail   balance"
      "date     date";
    gap:6px;
  }
  .hist-kind{ grid-area:kind }
  .hist-detail{ grid-area:detail; font-size:14px }
  .hist-amount{ grid-area:amount }
  .hist-balance{ grid-area:balance; font-size:11.5px }
  .hist-date{ grid-area:date; text-align:left }
}

/* ============================================================
   v12 SETTINGS MODAL — sound, motion, account
============================================================ */
.settings-section{
  padding:18px 0;
  border-bottom:1px dashed rgba(59,130,246,.10);
}
.settings-section:last-child{ border-bottom:none }
.settings-section-title{
  font-family:'Inter', sans-serif;
  font-weight:800; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-mute); margin-bottom:12px;
}
.settings-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; gap:14px;
  cursor:pointer;
}
.settings-row.settings-row-stack{
  flex-direction:column; align-items:stretch; gap:6px; cursor:default;
}
.settings-row-stack > .settings-row-label{ display:flex; align-items:center; justify-content:space-between }
.settings-row-label{
  font-family:'Inter', sans-serif;
  font-weight:700; font-size:16px;
  color:var(--text);
}
.settings-row-meta{
  font-family:'Inter', sans-serif;
  font-weight:600; font-size:14px;
  color:var(--text-mute);
  margin:0 0 12px;
  letter-spacing:.02em;
}
/* Toggle pill (input checkbox visually swapped for a switch). */
.settings-toggle{
  position:relative;
  width:44px; height:24px;
  display:inline-block;
  flex-shrink:0;
}
.settings-toggle input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2;
}
.settings-toggle-pill{
  position:absolute; inset:0;
  border-radius:99px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
  transition:background .25s ease, border-color .25s ease;
}
.settings-toggle-pill::after{
  content:""; position:absolute;
  top:2px; left:2px;
  width:18px; height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .25s ease;
}
.settings-toggle input:checked ~ .settings-toggle-pill{
  background:linear-gradient(180deg, var(--pink), var(--pink-deep));
  border-color:rgba(59,130,246,.5);
}
.settings-toggle input:checked ~ .settings-toggle-pill::after{
  transform:translateX(20px);
  background:#fff;
}
/* Range slider */
.settings-range{
  flex:1;
  -webkit-appearance:none; appearance:none;
  height:6px; border-radius:99px;
  background:linear-gradient(90deg,
    rgba(59,130,246,.6) 0%,
    rgba(59,130,246,.6) calc(var(--vol, 55%) * 1%),
    rgba(255,255,255,.10) calc(var(--vol, 55%) * 1%),
    rgba(255,255,255,.10) 100%);
  outline:none;
  cursor:pointer;
}
.settings-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff;
  border:2px solid var(--pink);
  box-shadow:0 0 10px rgba(59,130,246,.55), 0 2px 4px rgba(0,0,0,.3);
  cursor:grab;
}
.settings-range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--pink);
  box-shadow:0 0 10px rgba(59,130,246,.55);
  cursor:grab;
}
.settings-range-value{
  font-family:'Sora', sans-serif; font-weight:800; font-size:15px;
  color:var(--text); min-width:48px; text-align:right;
  letter-spacing:.02em;
}

/* Reduce motion (user-toggled) — disables DECORATIVE motion only.
   Functional state-transition animations (dice rolling, slot reels,
   plinko ball flight) MUST keep playing — without them the player
   can't see the result land. The previous blanket `*` rule was
   killing everything including the dice roll, so dice snapped to
   the result face with no tumble. Now we kill only:
     1. infinite-iteration animations (idle bobs, sparkles)
     2. transitions on cosmetic-only properties */
html.user-reduce-motion .bg-orb,
html.user-reduce-motion .hero-petal,
html.user-reduce-motion .gh-spark,
html.user-reduce-motion .balance::before,
html.user-reduce-motion .bc-glyph,
html.user-reduce-motion .ico-flame-tiny,
html.user-reduce-motion .ico-mine-tiny,
html.user-reduce-motion .ico-dice-tiny,
html.user-reduce-motion .section-icon,
html.user-reduce-motion .title-burst,
html.user-reduce-motion .coming-soon-art .cs-ring,
html.user-reduce-motion .coming-soon-art .cs-spark-a,
html.user-reduce-motion .coming-soon-art .cs-spark-b,
html.user-reduce-motion .coming-soon-art .cs-spark-c,
html.user-reduce-motion .coming-soon-art .cs-spark-d,
html.user-reduce-motion .dice-cube-wrap,
html.user-reduce-motion .dice-shadow,
html.user-reduce-motion .gh-rocket-grp,
html.user-reduce-motion .gh-rocket-flame,
html.user-reduce-motion .hi-rocket-g,
html.user-reduce-motion .hi-rocket-flame,
html.user-reduce-motion .hi-boom-g,
html.user-reduce-motion .hi-cards-g,
html.user-reduce-motion .hi-gem-g,
html.user-reduce-motion .hi-gem-spark,
html.user-reduce-motion .hi-bomb-g,
html.user-reduce-motion .hi-bomb-fuse,
html.user-reduce-motion .hi-dice-g,
html.user-reduce-motion .hi-trend-g,
html.user-reduce-motion .hi-target-g,
html.user-reduce-motion .hi-arrow-g,
html.user-reduce-motion .hi-push-g{
  animation:none !important;
}
/* Toast slide-in/out — keep but shorten */
html.user-reduce-motion .toast{
  animation-duration:.15s, .15s !important;
}
/* Plinko peg flash + shimmer — purely decorative */
html.user-reduce-motion .game-card .gc-glow,
html.user-reduce-motion .game-card .gc-sparkle{
  display:none !important;
}
/* Modal entrance: snappy not slow */
html.user-reduce-motion .modal{
  animation-duration:.15s !important;
}

/* ============================================================
   v14 ROW LAYOUT HARDENING — fixes overlap/wrap on every grid-row
   pattern that ships in narrow sidebars (per-game history list,
   live feed, players-in-round, leaderboard, fairness table, etc).
   Common failure mode: `1fr` middle column collapsed when the
   right-side amount string was bigger than the row had room for,
   so meta text wrapped into two lines and visually overlapped
   the profit on the right (per user screenshot).
   Pattern applied:
     - white-space:nowrap on every meta line (never wrap a label/time)
     - text-overflow:ellipsis when overflow does happen
     - min-width:0 on the meta column so flex-basis is correct
     - flex-shrink:0 + nowrap on the right amount column
============================================================ */

/* per-game history list (sidebar) */
.hist-row .hr-meta{ overflow:hidden }
.hist-row .hr-label{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.hist-row .hr-time { white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.hist-row .hr-profit{ flex-shrink:0;white-space:nowrap;justify-self:end }

/* leaderboard / live-feed sidebar / "players in round" */
.lead-row .lead-meta{ overflow:hidden }
.lead-row .lead-name{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.lead-row .lead-bet { white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.lead-row .lead-pay { flex-shrink:0;white-space:nowrap;justify-self:end }

/* live bet feed at top of home + in-game */
.bf-row{ align-items:center }
.bf-row > *{ min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis }

/* "Players in round" panel — keeps name from wrapping into the multi */
.cp-row{ display:grid;grid-template-columns:24px 1fr auto;column-gap:10px;align-items:center }
.cp-name{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0 }
.cp-bet { white-space:nowrap }
.cp-multi{ flex-shrink:0;white-space:nowrap;justify-self:end }

/* fair-history table rows — also a 3-col grid that gets cramped */
.fair-row > *{ min-width:0 }
.fair-row .fr-mult{ white-space:nowrap }
.fair-row .fr-date{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.fair-row .fr-link{ white-space:nowrap }

/* "Recent activity" feed (act-row) */
.act-row{ align-items:center }
.act-row > *{ min-width:0 }

/* ============================================================
   v13 DESIGN POLISH — fixes from screenshot review.
   - Replaces the broken modal `::before` glow ring with a clean
     multi-stop box-shadow (no corner artifacts)
   - Modernizes the close button (X stays, but is now a smaller,
     calmer chip with a subtler hover instead of a square frame)
   - Modern range slider — flat track, gradient fill, larger
     hit area, no clunky native chrome
   - Same treatment to the multi-slider thumbs so crash/limbo
     target sliders match
============================================================ */

/* ---- Modal: cleaner ring + better depth, no corner artifacts ---- */
.modal{
  border:1px solid rgba(59,130,246,.20);
  box-shadow:
    0 30px 80px rgba(0,0,0,.70),
    0 0 0 1px rgba(59,130,246,.14),
    0 0 32px -4px rgba(59,130,246,.30),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- Close button: smaller, calmer, refined hover ---- */
.modal-close{
  width:30px; height:30px;
  top:18px; right:18px;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.modal-close::before,
.modal-close::after{
  width:11px; height:1.4px;
}
.modal-close:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#fff;
  transform:none;     /* prior 90° rotate clashed with the glow border */
}
.modal-close:hover::before{ transform:rotate(45deg) scale(1.1) }
.modal-close:hover::after { transform:rotate(-45deg) scale(1.1) }
.modal-close:active{ transform:scale(.92) }

/* ---- Modern range slider — base style for any <input type="range"> ---- */
.settings-range,
input[type="range"].cs-range,
input[type="range"].ms-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:18px;
  background:transparent;
  cursor:pointer;
  outline:none;
}
/* WebKit track */
.settings-range::-webkit-slider-runnable-track{
  height:6px; border-radius:99px;
  background:rgba(255,255,255,.10);
}
/* The fill is rendered as a gradient on the track in v9 — for v13 we
   keep the same look but normalize across browsers. The `--vol` var is
   set inline by the JS so the fill width tracks the value. */
.settings-range{
  background:linear-gradient(90deg,
    var(--pink) 0%,
    var(--pink) calc(var(--vol, 55%)),
    rgba(255,255,255,.10) calc(var(--vol, 55%)),
    rgba(255,255,255,.10) 100%) !important;
  border-radius:99px;
  height:6px;
}
.settings-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:#fff;
  border:2px solid var(--pink);
  margin-top:0;
  box-shadow:
    0 0 0 4px rgba(59,130,246,.18),
    0 0 12px rgba(59,130,246,.45),
    0 2px 4px rgba(0,0,0,.4);
  cursor:grab;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.settings-range::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:2px solid var(--pink);
  box-shadow:
    0 0 0 4px rgba(59,130,246,.18),
    0 0 12px rgba(59,130,246,.45);
  cursor:grab;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
.settings-range::-moz-range-track{
  background:transparent; height:6px;
}
.settings-range:hover::-webkit-slider-thumb{
  transform:scale(1.10);
  box-shadow:
    0 0 0 5px rgba(59,130,246,.24),
    0 0 18px rgba(59,130,246,.65),
    0 2px 4px rgba(0,0,0,.4);
}
.settings-range:active::-webkit-slider-thumb{
  cursor:grabbing;
  transform:scale(1.18);
}
.settings-range:focus-visible::-webkit-slider-thumb{
  outline:2px solid var(--pink);
  outline-offset:3px;
}

/* ---- Multi-slider (crash auto / limbo target) thumb modernization ---- */
.ms-crash .ms-range::-webkit-slider-thumb,
.ms-limbo .ms-range::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; border-radius:50%;
  border:2px solid #fff;
  transform:none !important;
  margin-top:-7px;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.10),
    0 0 14px rgba(255,255,255,.30),
    0 3px 6px rgba(0,0,0,.4) !important;
}
.ms-crash .ms-range::-webkit-slider-thumb{
  background:radial-gradient(circle at 35% 30%, #dbeafe, #3B82F6 60%, #1D4ED8);
}
.ms-limbo .ms-range::-webkit-slider-thumb{
  background:radial-gradient(circle at 35% 30%, #dbeafe, #3B82F6 55%, #1E3A8A);
}
.ms-crash .ms-range::-moz-range-thumb,
.ms-limbo .ms-range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  border:2px solid #fff;
  transform:none !important;
}
.ms-crash .ms-range::-moz-range-thumb{
  background:radial-gradient(circle at 35% 30%, #dbeafe, #3B82F6 60%, #1D4ED8);
}
.ms-limbo .ms-range::-moz-range-thumb{
  background:radial-gradient(circle at 35% 30%, #dbeafe, #3B82F6 55%, #1E3A8A);
}
.ms-crash .ms-range:active::-webkit-slider-thumb,
.ms-limbo .ms-range:active::-webkit-slider-thumb{
  transform:scale(1.18) !important;
}

/* ============================================================
   v15 DESIGN UPGRADES — autonomous polish pass
   - Section-title icon vertical alignment (em-relative, scales w/ text)
   - Latest-big-wins cards: refined gradient, multiplier chip, hover lift
   - Game cards: subtle "PLAY ▸" badge that fades in on hover
============================================================ */

/* Section title icon — was using a hardcoded `vertical-align: -7px` that
   didn't scale with font size. Switched to em-relative so the bob-rotation
   animation lands centered against the text baseline at any heading size. */
.section-icon,
.section-icon--burst{
  vertical-align:-.22em;
  width:.95em; height:.95em;
}
.title-burst{
  vertical-align:-.22em;
  width:1em; height:1em;
}

/* ---- Latest big wins cards — refined ---- */
.big-wins{ gap:12px }
.bw-card{
  position:relative;
  padding:13px 14px;
  background:
    linear-gradient(165deg, rgba(16,20,42,.70), rgba(12,16,34,.92));
  border:1px solid rgba(59,130,246,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 4px 12px rgba(0,0,0,.30);
  isolation:isolate;
  overflow:hidden;
}
.bw-card::before{
  /* faint pink glow that intensifies on hover */
  content:""; position:absolute; inset:-1px;
  background:radial-gradient(140% 100% at 100% 0%, rgba(59,130,246,.20), transparent 60%);
  pointer-events:none; z-index:-1;
  opacity:.6; transition:opacity .25s ease;
}
.bw-card:hover{
  transform:translateY(-3px);
  border-color:rgba(59,130,246,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px rgba(0,0,0,.45),
    0 0 22px rgba(59,130,246,.22);
}
.bw-card:hover::before{ opacity:1 }
.bw-avatar{
  width:42px; height:42px;
  font-size:18px;
  border:1.5px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 3px rgba(59,130,246,.10),
    0 4px 10px rgba(0,0,0,.4);
  flex-shrink:0;
}
.bw-info{ min-width:0 }
.bw-info .bw-name{
  font-weight:800; font-size:15px; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bw-info .bw-game{
  font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.10em;
  color:var(--pink-soft);
}
.bw-amount{
  font-family:'Sora',sans-serif; font-weight:800;
  font-size:16px; letter-spacing:.01em;
  color:#3B82F6;
  text-shadow:0 0 12px rgba(59,130,246,.40);
  white-space:nowrap;
  flex-shrink:0;
}

/* ---- Game card hover hint ----
   A small "PLAY ▸" chip that fades in on hover so users new to the site
   know the colorful card is a click target. Sits above the existing
   gc-glow trail and behind the bubble pricing chips. */
.game-card .gc-play-hint{
  position:absolute;
  top:14px; right:14px;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px;
  border-radius:99px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;
  font-family:'Inter',sans-serif;
  font-weight:800; font-size:12px;
  letter-spacing:.10em; text-transform:uppercase;
  pointer-events:none;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  z-index:5;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.game-card:hover .gc-play-hint{
  opacity:1;
  transform:translateY(0);
}
.game-card .gc-play-hint::after{
  content:"▸";
  font-size:13px;
  margin-left:1px;
}
@media (prefers-reduced-motion: reduce){
  .game-card .gc-play-hint{ transition:opacity .15s ease }
}

/* ============================================================
   v16 MODAL CONSISTENCY PASS
   - Unify modal-title sizes (was a mix of 26/30px) → 26px
   - Tighten padding so titles don't dominate (34→28 / 32→28)
   - Safe max-height with vertical scroll for tall modals
   - Tighten the gap between title and sub
   - Modal-close pinned upper-right with breathing room
============================================================ */
.modal{
  /* Tighter shell — was 34px 32px which made every modal feel like a
     blog post. 28px all-around reads as a focused card. */
  padding:28px 28px;
  max-height:min(90vh, 880px);
}
.modal-title{
  font-size:24px;     /* unify (was 26 OR 30) — premium casino weight */
  letter-spacing:.01em;
  margin-bottom:6px;
}
.modal-sub{
  font-size:15px;
  margin-bottom:20px;
  line-height:1.5;
}
/* Close button: bigger tap target on touch, same visual size */
.modal-close{
  top:14px; right:14px;
  width:32px; height:32px;
}

/* Slimmer scrollbar inside the modal body when content overflows */
.modal::-webkit-scrollbar{ width:8px }
.modal::-webkit-scrollbar-track{ background:transparent }
.modal::-webkit-scrollbar-thumb{
  background:rgba(59,130,246,.35);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:padding-box;
}

/* Mobile padding refinement — phones can't afford 28px gutters */
@media (max-width:560px){
  .modal{
    padding:20px 18px;
    border-radius:18px;
    /* 100dvh = dynamic viewport height — iOS Safari's URL bar collapses
       on scroll, and 100vh refers to the LARGE viewport (URL bar shown)
       so modals would overflow the small visible area. dvh tracks the
       actual visible viewport so the cap works at both URL-bar states. */
    max-height:calc(100dvh - 24px);
  }
  .modal-title{ font-size:20px }
  .modal-sub{ font-size:12.5px; margin-bottom:14px }
}

/* ============================================================
   ARCADE POLISH v1 — FOUNDATIONS
   Layered on top of the existing design system. Every rule here
   is additive (raises specificity or layers on existing classes
   via :hover/::before/::after). Nothing existing is replaced —
   all original transitions/animations still work. Game logic,
   API contract, and balance rendering are not touched.
============================================================ */
:root{
  /* Unified motion language — every animated surface uses these. */
  --arcade-spring: cubic-bezier(.34, 1.56, .64, 1);
  --arcade-out:    cubic-bezier(.16, 1, .3, 1);
  --arcade-in:     cubic-bezier(.7, 0, .84, 0);
  --arcade-snap:   cubic-bezier(.2, .8, .2, 1);
  --dur-fast:   .14s;
  --dur-base:   .28s;
  --dur-slow:   .55s;
  --dur-flow:   .95s;
  /* Layered glow tokens — any surface can reuse the brand stack. */
  --glow-pink:    0 0 24px rgba(59,130,246,.45), 0 0 60px rgba(59,130,246,.18);
  --glow-orange:  0 0 24px rgba(59,130,246,.42), 0 0 60px rgba(59,130,246,.16);
  --glow-violet:  0 0 24px rgba(29,78,216,.45),  0 0 60px rgba(29,78,216,.18);
  --glow-gold:    0 0 28px rgba(255,200,80,.55),  0 0 70px rgba(255,168,0,.22);
  --glow-green:   0 0 22px rgba(59,130,246,.45),  0 0 60px rgba(59,130,246,.16);
  --glow-red:     0 0 24px rgba(239,68,68,.55),   0 0 60px rgba(239,68,68,.18);
  /* Depth stack — multiplicative shadow for cards. */
  --depth-1: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.4);
  --depth-2: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.5);
  --depth-3: inset 0 1px 0 rgba(255,255,255,.09), 0 30px 70px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.55);
  /* Iridescent border conic — used as ::before mask on premium cards. */
  --grad-iris:
    conic-gradient(from var(--ang, 0turn),
      rgba(59,130,246,.7) 0%, rgba(59,130,246,.7) 18%,
      rgba(255,217,0,.55) 32%,  rgba(29,78,216,.7) 56%,
      rgba(118,228,255,.55) 72%, rgba(59,130,246,.7) 100%);
}

/* CSS custom-property registration so we can animate the conic angle. */
@property --ang { syntax:'<angle>'; inherits:false; initial-value:0turn }

/* ----- BUTTONS — magnetic-spring upgrade. Existing :hover lift kept;
   we add a faster spring on press release, a brighter focus ring,
   and a subtle inner-rim glow that comes alive on hover. ----- */
.btn{
  transition:
    transform var(--dur-base) var(--arcade-spring),
    box-shadow var(--dur-base) var(--arcade-out),
    background var(--dur-base) var(--arcade-out),
    border-color var(--dur-base) var(--arcade-out),
    color var(--dur-base) var(--arcade-out),
    filter var(--dur-fast) var(--arcade-out);
  isolation:isolate;
}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.18), transparent 60%);
  transition:opacity var(--dur-base) var(--arcade-out);
  z-index:1;
}
.btn:hover::after{opacity:1}
.btn:active{
  transform:translateY(0) scale(.94);
  filter:brightness(1.06) saturate(1.12);
  transition-duration: var(--dur-fast);
}
.btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.6),
    0 0 0 4px rgba(59,130,246,.85),
    0 0 28px rgba(59,130,246,.45);
}
.btn-primary{ background-size:200% 200%; }
.btn-primary:hover{ background-position: 50% 100%; }
.btn-primary:active{ transform:translateY(1px) scale(.96) }
.btn-deposit{ background-size:200% 200%; }
.btn-deposit:hover{ background-position:50% 100%; }
.btn-cashout{ background-size:200% 200%; }
.btn-cashout:hover{ background-position:50% 100%; }
.btn-cashout:not(:disabled){ animation: cashoutPulse 2.4s ease-in-out infinite; }
@keyframes cashoutPulse{
  0%,100%{ box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(201,121,0,.4),
    0 4px 12px rgba(255,168,0,.45),
    0 0 0 1px rgba(255,168,0,.2),
    0 0 18px rgba(255,168,0,.25); }
  50%{ box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(201,121,0,.45),
    0 6px 16px rgba(255,168,0,.6),
    0 0 0 1px rgba(255,168,0,.35),
    0 0 38px rgba(255,200,80,.55); }
}

/* ----- CARDS — universal depth + iridescent rim on hover (opt-in via .arc-card). ----- */
.arc-card{
  position:relative;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--depth-1);
  transition:
    transform var(--dur-base) var(--arcade-out),
    box-shadow var(--dur-base) var(--arcade-out),
    border-color var(--dur-base) var(--arcade-out);
  isolation:isolate;
}
.arc-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none;
  background: var(--grad-iris);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0;
  transition:opacity var(--dur-base) var(--arcade-out);
  animation: irisSpin 9s linear infinite;
}
.arc-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--depth-2), var(--glow-pink);
  border-color: rgba(59,130,246,.35);
}
.arc-card:hover::before{ opacity:.85; }
@keyframes irisSpin{ to{ --ang: 1turn } }

/* ----- LIVE BETS / leaderboards — gentle row-hover + win-row gold flash. ----- */
.bf, .bw, .lead-row{
  transition:
    transform var(--dur-base) var(--arcade-out),
    box-shadow var(--dur-base) var(--arcade-out),
    background var(--dur-base) var(--arcade-out);
}
.bf:hover, .bw:hover, .lead-row:hover{
  transform: translateY(-2px) scale(1.005);
  background: rgba(255,255,255,.04);
  box-shadow: var(--depth-1), 0 0 0 1px rgba(59,130,246,.18);
}
@keyframes goldFlash{
  0%{ background: rgba(255,200,80,.0); }
  20%{ background: rgba(255,200,80,.18); }
  100%{ background: rgba(255,200,80,.0); }
}
.bf.bf-win-flash{ animation: goldFlash 1.4s ease-out 1; }

/* ----- GAME TILES — 3D parallax tilt + animated halo.
   IMPORTANT: preserve-3d is required so the .gc-name/.gc-art/.gc-tag/.gc-bubble
   translateZ children extrude into 3D space when .is-tilting is set. NO
   will-change here — see note in the v4 .game-card block. */
.game-card{
  transition:
    transform var(--dur-slow) var(--arcade-spring),
    box-shadow var(--dur-base) var(--arcade-out),
    filter var(--dur-base) var(--arcade-out);
  -webkit-transform-style:preserve-3d;
  transform-style: preserve-3d;
}
.game-card::after{
  /* Hover halo around the card edge. Was a multi-color conic
     gradient (claret/pink/gold/blue/cyan) blurred 18px which read
     as a "pink leaf smudge" on hover. Replaced with a clean dual-
     color brand halo: gold inner, claret outer — pure BloxHit
     palette, no errant pink/cyan. Stays a soft glow, not a smudge. */
  content:""; position:absolute; inset:-3px; border-radius:inherit;
  pointer-events:none; opacity:0; z-index:-1;
  background:
    radial-gradient(ellipse 65% 50% at 50% 0%,  rgba(255,217,0,.45), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(59,130,246,.55), transparent 70%);
  filter: blur(16px);
  transition: opacity var(--dur-base) var(--arcade-out);
}
.game-card:hover::after{ opacity:.85; }
.game-card:hover{
  transform: perspective(900px) translateY(-6px) rotateX(2deg) rotateY(-3deg) scale(1.012);
  filter: brightness(1.06) saturate(1.08);
}
.game-card:active{
  transform: perspective(900px) translateY(-2px) rotateX(0deg) rotateY(0deg) scale(.99);
  transition-duration: var(--dur-fast);
}

/* ----- BALANCE — stronger pulse on credit. ----- */
.balance.bump{ animation: balanceBumpV2 .65s var(--arcade-spring); }
@keyframes balanceBumpV2{
  0%   { transform:scale(1);    box-shadow:0 0 16px rgba(59,130,246,.22) }
  35%  { transform:scale(1.16); box-shadow:0 0 0 8px rgba(59,130,246,.18), var(--glow-pink) }
  70%  { transform:scale(.98);  box-shadow:0 0 0 0 rgba(59,130,246,0), var(--glow-pink) }
  100% { transform:scale(1);    box-shadow:0 0 16px rgba(59,130,246,.22) }
}

/* Topbar stays static on scroll — no padding shift, no background re-glaze. */
.topbar{ transition: none; }

/* ----- TOAST — entrance/exit symmetry + soft drop-shadow. ----- */
.toast{
  transform: translateY(-8px) scale(.96);
  opacity: 0;
  transition:
    transform var(--dur-base) var(--arcade-spring),
    opacity var(--dur-base) var(--arcade-out);
  box-shadow: var(--depth-2);
}
.toast.show{ transform: translateY(0) scale(1); opacity:1; }
.toast.toast-win{ box-shadow: var(--depth-2), var(--glow-gold); }
.toast.toast-loss{ box-shadow: var(--depth-2), var(--glow-red); }

/* ----- MODAL — backdrop blur scale-in + symmetrical exit. ----- */
.modal-backdrop{
  transition: opacity var(--dur-base) var(--arcade-out), backdrop-filter var(--dur-base) var(--arcade-out);
}
.modal{
  transition:
    transform var(--dur-base) var(--arcade-spring),
    opacity var(--dur-base) var(--arcade-out);
  box-shadow: var(--depth-3), 0 0 60px rgba(59,130,246,.12);
}
.modal-backdrop.show .modal{ transform: scale(1); opacity:1; }

/* ----- CHAT MESSAGE — slide+fade entry. ----- */
.cmsg{ animation: cmsgInV2 .45s var(--arcade-spring); }
@keyframes cmsgInV2{
  from{ opacity:0; transform: translateX(-12px) scale(.98); filter: blur(2px); }
  to  { opacity:1; transform: translateX(0)    scale(1);    filter: blur(0);  }
}

/* ----- INPUT focus ring — unified. ----- */
input:not([type=range]):focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.4),
    0 0 0 3px rgba(59,130,246,.65),
    0 0 22px rgba(59,130,246,.35) !important;
}

/* ----- SCROLLBAR — themed, slim, gradient. ----- */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(59,130,246,.45), rgba(29,78,216,.45));
  border-radius:10px;
  border:2px solid transparent;
  background-clip: padding-box;
  transition: background var(--dur-base) var(--arcade-out);
}
*::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(59,130,246,.75), rgba(29,78,216,.75));
  background-clip: padding-box;
}
html{ scrollbar-width: thin; scrollbar-color: rgba(59,130,246,.45) transparent; }

/* ----- TEXT-SELECTION. ----- */
::selection{ background: rgba(59,130,246,.35); color:#fff; }

/* ----- WIN PARTICLE BURST — fired by JS via `.fx-win-burst > i`. ----- */
.fx-win-burst{ position:fixed; pointer-events:none; z-index:500; width:0; height:0; }
.fx-win-burst > i{
  position:absolute; left:0; top:0;
  width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--gold) 60%, var(--orange-deep));
  box-shadow: 0 0 14px var(--gold);
  transform: translate(-50%, -50%);
  animation: winBurst 1.1s var(--arcade-out) forwards;
}
@keyframes winBurst{
  0%   { opacity:0; transform: translate(-50%,-50%) scale(.2); }
  18%  { opacity:1; }
  100% { opacity:0; transform:
    translate(calc(-50% + var(--bx,0px)), calc(-50% + var(--by,0px)))
    scale(.4); }
}
/* Reduced-motion: keep the win celebration (it's positive-outcome feedback,
   not idle decoration) but swap the outward particle explosion for a soft,
   contained sparkle that fades in place — particles travel only ~18% of their
   normal distance, so a win still POPS without the vestibular fly-out. Mirrors
   the balance-pop chip's gentle reduced-motion variant. */
@media (prefers-reduced-motion: reduce){
  .fx-win-burst > i{ animation: winBurstRM 1s var(--arcade-out, ease-out) forwards; }
}
@keyframes winBurstRM{
  0%   { opacity:0; transform: translate(-50%,-50%) scale(.4); }
  25%  { opacity:1; }
  100% { opacity:0; transform:
    translate(calc(-50% + var(--bx,0px) * 0.18), calc(-50% + var(--by,0px) * 0.18))
    scale(.7); }
}

/* ----- REDUCED MOTION. -----
   The previous nuclear `*, *::before, *::after { animation-duration:.001s }`
   sat here and froze every animation site-wide on iOS the moment the user
   turned on Settings → Accessibility → Motion → Reduce Motion: floating
   hats, floating hitcoins, hero logo float, button micro-interactions,
   modal slides, gameplay anims — all dead in 0.001s. iPad reports were
   "nothing on the page moves at all." Removed the universal clause and
   kept only the specific decorative selectors. The other two reduced-
   motion blocks (around 7643 and 11497) already enumerate the rest of
   the decorative loops to mute. */
@media (prefers-reduced-motion: reduce){
  /* btn-cashout pulse is a gameplay urgency cue (it's the "tap me
     now before crash!" signal) — kept under reduce-motion. Only the
     pure decorative card shimmers + body backdrop animation muted. */
  .arc-card::before, .game-card::after{ animation: none !important; }
  body::before{ background: none; }
}

/* ============================================================
   ARCADE POLISH v1 — END FOUNDATIONS
============================================================ */

/* ============================================================
   ARCADE POLISH v2 — TOPBAR / HERO / LIVE BETS
============================================================ */

/* ----- LOGO — soft halo + click squish. Layered on .logo (the brand link). */
.logo{
  position:relative;
  transition:
    transform var(--dur-base) var(--arcade-spring),
    filter var(--dur-base) var(--arcade-out);
}
.logo::after{
  content:""; position:absolute; inset:-12px; border-radius:50%;
  background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(59,130,246,.25), transparent 70%);
  pointer-events:none; opacity:.6; z-index:-1;
  filter: blur(10px);
  animation: logoHalo 4.6s ease-in-out infinite;
}
@keyframes logoHalo{
  0%,100%{ opacity:.45; transform:scale(1) }
  50%    { opacity:.85; transform:scale(1.08) }
}
.logo:hover{ transform: translateY(-1px) rotate(-2deg) scale(1.04); filter: brightness(1.1); }
.logo:active{ transform: scale(.96); transition-duration: var(--dur-fast); }

/* ----- TOPBAR — drop a faint top-rim highlight + iridescent underline. */
.topbar{
  position:sticky; top:0;
  background:
    linear-gradient(180deg, rgba(14,20,42,.75), rgba(7,10,22,.88)),
    rgba(7,10,20,.92);
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg,
    transparent, rgba(59,130,246,.55) 22%, rgba(59,130,246,.45) 50%,
    rgba(29,78,216,.55) 78%, transparent);
  opacity:.6; pointer-events:none;
  animation: topbarRim 7s linear infinite;
  background-size: 200% 100%;
}
@keyframes topbarRim{
  from{ background-position: 0 0 } to{ background-position: 200% 0 }
}

/* ----- BALANCE PILL — tighter inner bevel + brighter shine. */
.balance{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    linear-gradient(135deg,rgba(59,130,246,.22),rgba(59,130,246,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(59,130,246,.35),
    0 6px 18px rgba(59,130,246,.25),
    var(--glow-pink);
}
.balance:hover{ filter: brightness(1.06); }

/* ----- ONLINE PILL — same depth treatment, green theme. */
.online-pill{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(59,130,246,.16), rgba(59,130,246,.04));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(59,130,246,.35),
    0 6px 18px rgba(59,130,246,.18),
    var(--glow-green);
}

/* ----- HERO — aurora aura + parallax-friendly inner glow. */
.hero{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 85% 5%, rgba(59,130,246,.28), transparent 55%),
    radial-gradient(ellipse at 5% 95%, rgba(29,78,216,.28), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(59,130,246,.10), transparent 70%),
    linear-gradient(135deg, var(--surface), var(--bg-2));
  box-shadow: var(--depth-3), 0 0 80px rgba(59,130,246,.12);
}
.hero::after{
  /* slow auroral sheen across the whole panel */
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background: linear-gradient(110deg,
    transparent 35%, rgba(59,130,246,.18) 47%, rgba(255,217,128,.10) 53%, transparent 65%);
  background-size: 250% 100%;
  animation: heroAurora 8s linear infinite;
  pointer-events:none; mix-blend-mode: screen;
  z-index: 0;
}
@keyframes heroAurora{ from{ background-position: 200% 0 } to{ background-position: -100% 0 } }
.hero > *{ position:relative; z-index:1; }

.hero-title{
  letter-spacing:-.5px;
  text-shadow: 0 0 24px rgba(59,130,246,.4), 0 0 48px rgba(29,78,216,.18);
}
.title-pop{
  background: linear-gradient(135deg, #dbeafe 0%, var(--pink) 35%, var(--pink-deep) 60%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size: 200% 200%;
  animation: titleShift 6s ease-in-out infinite;
}
@keyframes titleShift{
  0%,100%{ background-position: 0% 50% }
  50%    { background-position: 100% 50% }
}

.hero-balance{
  /* Layered depth so it pops off the hero panel. */
  box-shadow:
    var(--depth-2),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 40px rgba(59,130,246,.12);
  transition: transform var(--dur-base) var(--arcade-out), box-shadow var(--dur-base) var(--arcade-out);
}
.hero-balance:hover{
  transform: translateY(-2px);
  box-shadow:
    var(--depth-3),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 60px rgba(59,130,246,.22),
    var(--glow-pink);
}
/* Counter-up animation hook — fired by JS by toggling .hb-counting on the number. */
.hb-num.hb-counting{
  animation: hbCount .9s var(--arcade-out);
}
@keyframes hbCount{
  0%   { transform: translateY(8px); filter: blur(4px); opacity:.6 }
  100% { transform: translateY(0);   filter: blur(0);   opacity:1  }
}

/* ----- LIVE BETS panel — stronger frame + animated tab indicator. */
.live-bets{
  position:relative;
  border-radius: 22px;
  box-shadow: var(--depth-2), 0 0 50px rgba(59,130,246,.06);
}
.bf-tab{
  position:relative;
  transition:
    color var(--dur-base) var(--arcade-out),
    background var(--dur-base) var(--arcade-out),
    transform var(--dur-fast) var(--arcade-spring);
}
.bf-tab:hover{ transform: translateY(-1px); }
.bf-tab.active{
  background: linear-gradient(180deg, rgba(59,130,246,.30), rgba(59,130,246,.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 14px rgba(59,130,246,.35),
    0 0 0 1px rgba(59,130,246,.45);
}
.bf-tab.active::after{
  content:""; position:absolute; left:14%; right:14%; bottom:-6px; height:2px;
  border-radius:2px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--gold), transparent);
  filter: drop-shadow(0 0 6px var(--pink));
}

/* ----- LIVE BET ROW — staggered entry + win/loss accent stripe. */
.bf-row{
  position:relative;
  animation: bfRowIn .55s var(--arcade-spring) backwards;
  transition:
    transform var(--dur-base) var(--arcade-out),
    background var(--dur-base) var(--arcade-out),
    box-shadow var(--dur-base) var(--arcade-out);
}
@keyframes bfRowIn{
  from{ opacity:0; transform: translateY(-10px) scale(.98); filter: blur(3px); }
  to  { opacity:1; transform: translateY(0)     scale(1);    filter: blur(0);  }
}
/* Stagger the first 8 rows for a satisfying intro cascade */
.bf-row:nth-child(1){ animation-delay:.02s }
.bf-row:nth-child(2){ animation-delay:.06s }
.bf-row:nth-child(3){ animation-delay:.10s }
.bf-row:nth-child(4){ animation-delay:.14s }
.bf-row:nth-child(5){ animation-delay:.18s }
.bf-row:nth-child(6){ animation-delay:.22s }
.bf-row:nth-child(7){ animation-delay:.26s }
.bf-row:nth-child(8){ animation-delay:.30s }
.bf-row:not(.bf-head)::before{
  /* Color accent stripe on the leading edge — themed by win/loss. */
  content:""; position:absolute; left:0; top:14%; bottom:14%; width:3px;
  border-radius:0 3px 3px 0;
  background: rgba(255,255,255,.06);
  transition: background var(--dur-base) var(--arcade-out), box-shadow var(--dur-base) var(--arcade-out);
}
.bf-row:not(.bf-head):hover{
  transform: translateX(2px);
  background: rgba(255,255,255,.04);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(59,130,246,.18);
}
/* Win row: green stripe + faint glow */
.bf-row:has(.bf-multi-win)::before,
.bf-row:has(.bf-win)::before{
  background: linear-gradient(180deg, var(--green), #28c76f);
  box-shadow: 0 0 12px rgba(59,130,246,.55);
}
/* Loss row: red stripe */
.bf-row:has(.bf-multi-loss)::before,
.bf-row:has(.bf-loss)::before{
  background: linear-gradient(180deg, #ef4444, #991b1b);
  box-shadow: 0 0 10px rgba(239,68,68,.45);
}
/* New row pop: layer goldFlash from foundations on top for high-multi wins. */
.bf-row.bf-row-jackpot{
  animation: bfRowJackpot 1.6s var(--arcade-out) 1;
}
@keyframes bfRowJackpot{
  0%   { background: rgba(255,200,80,.28); box-shadow: inset 0 0 0 1px rgba(255,200,80,.55), var(--glow-gold); }
  60%  { background: rgba(255,200,80,.10); }
  100% { background: rgba(255,255,255,.0); box-shadow: none; }
}

/* ----- BF HEADER row — lock it stronger so the live data feels framed. */
.bf-row.bf-head{
  position: sticky; top: 0; z-index: 2;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(10,14,28,.75), rgba(10,14,28,.55));
  border-bottom: 1px solid rgba(59,130,246,.18);
}

/* ----- BF user link — magnetic feel on the avatar+name. */
[data-user-link]{
  cursor: pointer;
  transition: transform var(--dur-fast) var(--arcade-spring), color var(--dur-fast) var(--arcade-out);
}
[data-user-link]:hover{ transform: translateY(-1px); color: #dbeafe; }

/* ============================================================
   ARCADE POLISH v2 — END
============================================================ */

/* ============================================================
   ARCADE POLISH v3 — GAME TILES + SIDEBAR NAV
   Layered on top of the v4 game-card system (the tilt + glow
   logic at line ~7799). Adds badge polish, multiplier bubble
   float, press-pop, and the iridescent active sidebar indicator.
============================================================ */

/* ----- GAME-CARD BADGES (POPULAR / NEW RELEASE / NEW) — shimmer + lift.
   IMPORTANT: do NOT change position; the originals are position:absolute
   anchored to bottom-left. We only enhance shadow + transition + add a
   shimmer pseudo-element that stays inside the badge. ----- */
.game-card .gc-tag{
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 4px 12px rgba(0,0,0,.35);
  transition:
    box-shadow var(--dur-base) var(--arcade-out),
    filter var(--dur-base) var(--arcade-out);
}
.game-card .gc-tag::after{
  content:""; position:absolute; top:0; left:-150%; width:60%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-22deg);
  pointer-events:none;
}
.game-card:hover .gc-tag{
  filter: brightness(1.12) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 16px rgba(0,0,0,.45),
    0 0 14px rgba(255,255,255,.18);
}
.game-card:hover .gc-tag::after{
  animation: gcTagShine .9s var(--arcade-out) 1;
}
@keyframes gcTagShine{
  to{ left: 160%; }
}

/* ----- GAME-CARD multiplier bubbles (2.0×, 23.2×, 100×) — extra glow only.
   The originals are position:absolute with their own bubbleFloat keyframe;
   we layer shadow polish without touching position or animation. ----- */
.game-card .gc-bubble{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 16px rgba(0,0,0,.4),
    0 0 18px rgba(255,255,255,.18);
  transition: filter var(--dur-base) var(--arcade-out);
}
.game-card:hover .gc-bubble{
  filter: brightness(1.12) saturate(1.1);
}

/* ----- GAME-CARD title — gradient sweep on hover. ----- */
.game-card .gc-name{
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position var(--dur-slow) var(--arcade-out);
}
.game-card:hover .gc-name{ background-position: 100% 50%; }

/* ----- GAME-CARD pressed (post-click) burst hook — JS toggles .gc-pressed. ----- */
.game-card.gc-pressed{
  animation: gcPress .55s var(--arcade-spring);
}
@keyframes gcPress{
  0%   { transform: perspective(900px) scale(1)   rotateX(0)   rotateY(0)   }
  35%  { transform: perspective(900px) scale(.97) rotateX(0)   rotateY(0)   }
  100% { transform: perspective(900px) scale(1)   rotateX(0)   rotateY(0)   }
}

/* ----- SIDEBAR NAV LINK — iridescent active indicator + magnetic hover. ----- */
.sb-link{
  position:relative;
  isolation:isolate;
  transition:
    background var(--dur-base) var(--arcade-out),
    color var(--dur-base) var(--arcade-out),
    transform var(--dur-base) var(--arcade-spring),
    box-shadow var(--dur-base) var(--arcade-out);
}
.sb-link::after{
  content:""; position:absolute; left:6px; right:6px; bottom:2px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.55), transparent);
  opacity:0;
  transition: opacity var(--dur-base) var(--arcade-out);
  pointer-events:none;
}
.sb-link:hover{
  transform: translateX(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(59,130,246,.18);
}
.sb-link:hover::after{ opacity:1; }
.sb-link.active{
  background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.06) 60%, transparent);
  color: #dbeafe;
  box-shadow:
    0 6px 18px rgba(0,0,0,.4),
    0 0 0 1px rgba(59,130,246,.4),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.sb-link.active::before{
  content:""; position:absolute; left:0; top:18%; bottom:18%; width:3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--pink), var(--orange));
  box-shadow: 0 0 14px rgba(59,130,246,.7);
}
.sb-link.active::after{ opacity:1; }

/* ----- SIDEBAR ICONS — wobble on active. ----- */
.sb-link.active .sb-icon{
  animation: sbIconWobble 3.2s ease-in-out infinite;
}
@keyframes sbIconWobble{
  0%,100%{ transform: scale(1.06) rotate(0deg) }
  25%    { transform: scale(1.10) rotate(-3deg) }
  75%    { transform: scale(1.10) rotate( 3deg) }
}

/* ----- SIDEBAR BADGES (HOT / NEW) — pulse. ----- */
.sb-hot{ animation: sbBadgeHot 1.8s ease-in-out infinite; }
.sb-new{ animation: sbBadgeNew 2.2s ease-in-out infinite; }
@keyframes sbBadgeHot{
  0%,100%{ box-shadow: 0 0 0 0 rgba(59,130,246,.0); }
  50%    { box-shadow: 0 0 0 6px rgba(59,130,246,.0), 0 0 14px rgba(59,130,246,.55); }
}
@keyframes sbBadgeNew{
  0%,100%{ box-shadow: 0 0 0 0 rgba(59,130,246,.0); }
  50%    { box-shadow: 0 0 12px rgba(59,130,246,.55); }
}

/* ============================================================
   ARCADE POLISH v3 — END
============================================================ */

/* ============================================================
   ARCADE POLISH v4 — CRASH + MINES
   Layers on the existing rich animation system. Only enhances:
   no replacement of the rocket fly/explode keyframes.
============================================================ */

/* ----- CRASH: multiplier text — slow pulse during flight (drum-roll feel). ----- */
.crash-board[data-flying="1"] .crash-multiplier:not(.crashed):not(.locked):not(.countdown){
  animation: crashMultiBeat 1.6s ease-in-out infinite;
}
@keyframes crashMultiBeat{
  0%,100%{ filter: drop-shadow(0 0 22px rgba(59,130,246,.55)) drop-shadow(0 10px 18px rgba(0,0,0,.65)); }
  50%    { filter: drop-shadow(0 0 36px rgba(255,200,80,.7))  drop-shadow(0 14px 24px rgba(0,0,0,.7)); }
}

/* ----- CRASH: during flight the curve owns center stage, so the readout
   rides up to the top as a smaller number and the "CURRENT PAYOUT" label
   steps aside. On crash (data-flying removed) it drops back to the big
   centered hero. The slide is choreographed by the `top`/`font-size`
   transition on .crash-multiplier above. ----- */
.crash-board[data-flying="1"] .crash-multiplier{
  top: 24%;
  font-size: clamp(40px, 5.4vw, 78px);
}
.crash-board[data-flying="1"] .crash-multi-sub{
  opacity: 0;
}

/* ----- CRASH: board frame — iridescent rim on hover that fades during flight
   so the player isn't distracted, then re-engages on crash for drama. ----- */
.crash-board{
  position:relative;
  isolation:isolate;
  box-shadow: var(--depth-3), 0 0 60px rgba(59,130,246,.10);
}
.crash-board::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: var(--grad-iris);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; pointer-events:none;
  transition: opacity var(--dur-base) var(--arcade-out);
  animation: irisSpin 12s linear infinite;
  z-index: 1;
}
.crash-board:hover::before,
.crash-board.shake::before{ opacity: .8; }

/* ----- CRASH: bet button — give it more presence pre-launch. ----- */
.crash-bet-btn{
  font-size:15px;
  letter-spacing:.16em;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}

/* ----- CRASH: phase pill state pulses (betting / flight). ----- */
.crash-phase-pill[data-phase="betting"] .cph-dot{
  animation: phaseDotBlink 1s ease-in-out infinite;
}
@keyframes phaseDotBlink{
  0%,100%{ opacity:1; box-shadow: 0 0 10px currentColor; }
  50%    { opacity:.55; box-shadow: 0 0 4px currentColor; }
}

/* ----- CRASH: stars / sky get a tiny extra parallax depth on flight ----- */
.crash-board[data-flying="1"] .crash-sky{
  filter: brightness(1.06) saturate(1.1);
  transition: filter var(--dur-slow) var(--arcade-out);
}

/* ----- MINES: grid frame — rim glow + iridescent border on hover. ----- */
.mines-grid{
  position:relative;
  isolation:isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 40px rgba(0,0,0,.5),
    0 0 0 1px rgba(59,130,246,.18);
  transition: box-shadow var(--dur-base) var(--arcade-out);
}
.mines-grid::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: var(--grad-iris);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; pointer-events:none;
  transition: opacity var(--dur-base) var(--arcade-out);
  animation: irisSpin 11s linear infinite;
  z-index: 1;
}
.mines-grid:hover::before{ opacity: .55; }

/* ----- MINES: tile hover — add an inner shimmer hint so untouched tiles
   feel "alive" before being clicked. ----- */
.mine-tile:not(.gem):not(.bomb):not(.locked){
  transition:
    transform var(--dur-base) var(--arcade-spring),
    border-color var(--dur-base) var(--arcade-out),
    box-shadow var(--dur-base) var(--arcade-out),
    filter var(--dur-fast) var(--arcade-out);
}
.mine-tile:not(.gem):not(.bomb):not(.locked)::after{
  content:""; position:absolute; inset:4px; border-radius:10px;
  background: radial-gradient(circle at 50% 0%, rgba(59,130,246,.18), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--arcade-out);
  pointer-events: none;
}
.mine-tile:not(.gem):not(.bomb):not(.locked):hover::after{ opacity: 1; }
.mine-tile:not(.gem):not(.bomb):not(.locked):hover{
  filter: brightness(1.1);
}
.mine-tile:not(.gem):not(.bomb):not(.locked):active{
  transform: translateY(2px) scale(.96);
  filter: brightness(1.2);
  transition-duration: var(--dur-fast);
}

/* ----- MINES: gem reveal — sparkle sweep over the Hitcoin face. ----- */
.mine-tile.gem{
  /* Was claret/red — shifted to a warm gold-into-claret gradient so the
     tile chrome supports the Hitcoin reveal underneath instead of
     fighting it for color attention. */
  background:
    linear-gradient(135deg, #fff3c0 0%, #e8a040 45%, #1D4ED8 100%),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 50%);
  box-shadow:
    0 4px 0 #2a1808,
    0 0 24px rgba(255,217,0,.45),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.mine-tile.gem::before{
  /* sparkling sweep that fires once on reveal then idles softly */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:
    linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size: 200% 100%;
  pointer-events: none;
  animation: gemSparkle 1.2s var(--arcade-out) 1, gemSparkleIdle 4s ease-in-out infinite 1.4s;
}
@keyframes gemSparkle{
  from{ background-position: 200% 0 } to{ background-position: -100% 0 }
}
@keyframes gemSparkleIdle{
  0%,100%{ opacity: .55 }
  50%    { opacity: .9 }
}

/* ----- MINES: gem follow-up glow inside the tile (a slow inner pulse). ----- */
.mine-tile.gem::after{
  content:""; position:absolute; inset:50% 50% 50% 50%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(59,130,246,.0) 70%);
  pointer-events:none;
  animation: gemPulse 2.8s ease-in-out infinite;
}
@keyframes gemPulse{
  0%,100%{ inset: 50% 50% 50% 50%; opacity:.0 }
  50%    { inset: 30% 30% 30% 30%; opacity:.9 }
}

/* ----- MINES: cleared-all victory ring on the grid. JS toggles .cleared. ----- */
.mines-grid.cleared{
  animation: minesCleared .8s var(--arcade-spring);
}
.mines-grid.cleared::before{ opacity: 1; }
@keyframes minesCleared{
  0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 0 rgba(255,200,80,0); }
  40%  { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 18px rgba(255,200,80,.45), var(--glow-gold); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 0 rgba(255,200,80,0); }
}

/* ============================================================
   ARCADE POLISH v4 — END
============================================================ */

/* ============================================================
   ARCADE POLISH v5 — REMAINING GAMES
   Plinko / Dice / Limbo / Upgrader / Slots / Blackjack
============================================================ */

/* ----- COMMON: every game stage gets an iridescent rim that fades in on hover. */
.limbo-stage, .plinko-board, .upgrader-stage,
.dice-stage, .slots-machine, .bj-table{
  position:relative;
  isolation:isolate;
  box-shadow: var(--depth-2), 0 0 60px rgba(59,130,246,.08);
  transition: box-shadow var(--dur-base) var(--arcade-out);
}
.limbo-stage::after, .plinko-board::after, .upgrader-stage::after,
.dice-stage::after, .slots-machine::after, .bj-table::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: var(--grad-iris);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; pointer-events:none; z-index: 5;
  transition: opacity var(--dur-base) var(--arcade-out);
  animation: irisSpin 13s linear infinite;
}
/* NOTE: limbo + dice + plinko + upgrader + bj already have their own ::after
   pseudo for stars/glow — the new one above with z-index:5 sits on the rim
   and both can coexist because they target different inset/positions. */

/* ----- PLINKO: slot-flash hot color + win-burst on landing. */
.plinko-slot{
  transition:
    transform var(--dur-base) var(--arcade-spring),
    box-shadow var(--dur-base) var(--arcade-out),
    filter var(--dur-base) var(--arcade-out);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.4);
}
.plinko-slot.flash{
  filter: brightness(1.18) saturate(1.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 8px 22px rgba(0,0,0,.5),
    0 0 28px currentColor,
    0 0 0 1px rgba(255,255,255,.35);
  transform: translateY(-3px) scale(1.05);
}
.plinko-slot.t-jack.flash{ box-shadow:
  inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px rgba(0,0,0,.5),
  0 0 28px rgba(29,78,216,.85), var(--glow-violet); }
.plinko-slot.t-fire.flash{ box-shadow:
  inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px rgba(0,0,0,.5),
  0 0 28px rgba(59,130,246,.85), var(--glow-pink); }

/* ----- LIMBO: large multiplier crawl on win, redshift on loss. */
.limbo-stage.win .limbo-multi{
  animation: limboWinPump 1.1s var(--arcade-spring) 1;
}
@keyframes limboWinPump{
  0%   { transform: scale(.7); filter: blur(8px); opacity:0; }
  45%  { transform: scale(1.18); filter: blur(0); opacity:1; }
  70%  { transform: scale(.95); }
  100% { transform: scale(1);   filter: blur(0); opacity:1; }
}
.limbo-stage.loss .limbo-multi{
  animation: limboLossDrop .7s var(--arcade-out) 1;
}
@keyframes limboLossDrop{
  0%   { transform: translateY(0)   scale(1);    filter: blur(0); opacity:1; }
  100% { transform: translateY(20px) scale(.85); filter: blur(2px); opacity:.6; }
}

/* ----- DICE: stage shake + cube glow on win. */
.dice-cube-wrap.win-pulse{
  filter: drop-shadow(0 0 28px rgba(59,130,246,.7));
}
.dice-cube-wrap.loss-pulse{
  filter: drop-shadow(0 0 24px rgba(59,130,246,.6));
}
.dice-pred .btn{
  transition: transform var(--dur-fast) var(--arcade-spring),
              box-shadow var(--dur-base) var(--arcade-out),
              background var(--dur-base) var(--arcade-out);
}
.dice-pred .btn:hover{ transform: translateY(-2px) scale(1.03); }

/* ----- UPGRADER: pointer subtle pulse, mult bigger feel. */
.upgrader-pointer{
  filter: drop-shadow(0 0 8px rgba(59,130,246,.65));
  animation: upgPointerPulse 2.2s ease-in-out infinite;
}
@keyframes upgPointerPulse{
  0%,100%{ filter: drop-shadow(0 0 6px rgba(59,130,246,.55)); }
  50%    { filter: drop-shadow(0 0 16px rgba(255,200,80,.75)); }
}
.upgrader-mult{
  text-shadow: 0 0 14px rgba(255,200,80,.45);
}

/* ----- SLOTS: marquee shimmer, win pump enhanced. */
.slots-machine{
  box-shadow:
    var(--depth-3),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 60px rgba(59,130,246,.10);
}
.slots-machine.win{
  box-shadow:
    var(--depth-3),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 80px rgba(255,200,80,.45),
    var(--glow-gold);
}
.reel{
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,.55),
    inset 0 -4px 12px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.05);
}
.slots-machine.win .reel{
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,.55),
    inset 0 -4px 12px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,200,80,.55),
    0 0 22px rgba(255,200,80,.45);
  animation: reelWinShimmer 1.4s ease-in-out;
}
@keyframes reelWinShimmer{
  0%,100%{ filter: brightness(1) saturate(1); }
  50%    { filter: brightness(1.18) saturate(1.18); }
}

/* ----- BLACKJACK: card hover lift, flipped-card depth, win/loss zone glow. */
.bj-card{
  transition:
    transform var(--dur-base) var(--arcade-spring),
    box-shadow var(--dur-base) var(--arcade-out),
    filter var(--dur-base) var(--arcade-out);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 12px 22px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.3);
}
.bj-card:hover{
  transform: translateY(-4px) rotate(-1deg) scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 18px 32px rgba(0,0,0,.55),
    0 0 24px rgba(59,130,246,.25);
}
.bj-card.flipped{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 12px 22px rgba(0,0,0,.55),
    0 0 18px rgba(59,130,246,.35);
}
/* Win/loss glow on the dealer/player zones. Was previously using
   --glow-green and --glow-red CSS vars that BOTH resolved to brand-red
   rgba — so wins and losses looked identical. Now uses actual green
   for the winner zone (gold-green casino "money" feel) and red for the
   loser zone, so the felt visually announces who won the round long
   after the floating popup auto-dismisses. */
.bj-zone.bj-win{
  box-shadow:
    0 0 0 2px rgba(40, 199, 111, .60),
    0 0 24px rgba(40, 199, 111, .55),
    0 0 60px rgba(40, 199, 111, .20);
  animation: bjZonePulse 1.6s ease-in-out;
  border-radius: 12px;
}
.bj-zone.bj-loss{
  box-shadow:
    0 0 0 2px rgba(59,130,246, .55),
    0 0 24px rgba(59,130,246, .50),
    0 0 60px rgba(59,130,246, .18);
  border-radius: 12px;
}
@keyframes bjZonePulse{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(40, 199, 111, .60),
      0 0 24px rgba(40, 199, 111, .55),
      0 0 60px rgba(40, 199, 111, .20);
  }
  50%{
    box-shadow:
      0 0 0 4px rgba(40, 199, 111, .75),
      0 0 36px rgba(40, 199, 111, .80),
      0 0 90px rgba(40, 199, 111, .35);
  }
}

/* ----- TARGET-LINE / chance / payout text — small but uniform polish. */
.limbo-target-line strong,
.upgrader-percent,
.upgrader-mult{
  text-shadow: 0 0 10px rgba(255,200,80,.35);
}

/* ----- BET INPUT row — every game has one. Polished with focus state. */
.bet-input{
  transition:
    border-color var(--dur-base) var(--arcade-out),
    box-shadow var(--dur-base) var(--arcade-out),
    background var(--dur-base) var(--arcade-out);
}
.bet-input:focus-within{
  border-color: rgba(59,130,246,.55);
  box-shadow:
    0 0 0 2px rgba(59,130,246,.35),
    0 6px 18px rgba(59,130,246,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* ----- BIG GAME ACTION BUTTONS — every game's PLACE BET / CASHOUT / SPIN
   already inherits .btn; lift them visually with a subtle outer shadow. */
.crash-controls > .btn,
.mines-panel > .btn,
.limbo-controls > .btn,
.plinko-controls > .btn,
.upgrader-controls > .btn,
.slots-controls > .btn,
.dice-controls > .btn,
.bj-controls > .btn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 8px 22px rgba(0,0,0,.45),
    0 0 0 1px rgba(59,130,246,.18),
    0 0 28px rgba(59,130,246,.14);
}

/* ============================================================
   ARCADE POLISH v5 — END
============================================================ */

/* ============================================================
   ARCADE POLISH v6 — CHAT + MODALS + TOASTS
============================================================ */

/* ----- CHAT panel — frosted depth + iridescent header. */
.chat{
  box-shadow: var(--depth-3), 0 0 60px rgba(59,130,246,.10);
  backdrop-filter: blur(18px) saturate(160%);
}
.chat-head{
  position: relative;
  /* Was rgba(16,20,42,...) — that's a dark burgundy that bled through
     as a visible red patch at the top of the chat sidebar. Repainted
     to navy matching the rest of the chat panel + topbar. */
  background: linear-gradient(180deg, rgba(16,20,42,.85), rgba(10,14,30,.6));
}
.chat-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.55), transparent);
}

/* ----- CHAT TABS — animated underline like the bf-tabs. */
.chat-tabs button, .chat-tab{
  position: relative;
  transition:
    color var(--dur-base) var(--arcade-out),
    background var(--dur-base) var(--arcade-out),
    transform var(--dur-fast) var(--arcade-spring);
}
.chat-tabs button:hover, .chat-tab:hover{ transform: translateY(-1px); }
.chat-tabs button.active::after,
.chat-tab.active::after{
  content:""; position:absolute; left:18%; right:18%; bottom:-4px; height:2px;
  border-radius:2px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--gold), transparent);
  filter: drop-shadow(0 0 5px var(--pink));
}

/* ----- CHAT message hover state — subtle row highlight. */
.cmsg{
  padding: 6px 10px;
  border-radius: 10px;
  transition: background var(--dur-base) var(--arcade-out);
}
.cmsg:hover{ background: rgba(255,255,255,.04); }

/* ----- CHAT system message — subtler look + soft pulsing dot. */
.cmsg-system{
  background: linear-gradient(135deg, rgba(118,228,255,.10), rgba(29,78,216,.06));
  border: 1px solid rgba(118,228,255,.15);
  border-radius: 10px;
  padding: 6px 10px;
  position: relative;
}
.cmsg-system::before{
  content:""; display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  margin-right:8px; vertical-align:middle;
  animation: chatSysDot 2s ease-in-out infinite;
}
@keyframes chatSysDot{
  0%,100%{ opacity:.55; transform: scale(.85); }
  50%    { opacity:1;   transform: scale(1.2); }
}

/* ----- CHAT input — focus glow that matches the global design. */
.chat-input input:focus{
  border-color: rgba(59,130,246,.6);
  box-shadow:
    0 0 0 2px rgba(59,130,246,.35),
    0 0 22px rgba(59,130,246,.25),
    inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.btn-send{
  transition:
    transform var(--dur-fast) var(--arcade-spring),
    box-shadow var(--dur-base) var(--arcade-out),
    filter var(--dur-fast) var(--arcade-out);
}
.btn-send:hover{ transform: translateY(-2px) scale(1.05); filter: brightness(1.1); }
.btn-send:active{ transform: translateY(1px) scale(.96); }

/* ----- CHAT body scrollbar — match brand tokens. */
.chat-body::-webkit-scrollbar{ width: 6px; }
.chat-body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(59,130,246,.45), rgba(29,78,216,.45));
  border-radius: 6px;
}

/* ----- MODAL backdrop — deeper blur, softer fade. */
.modal-backdrop{
  background: rgba(8, 4, 20, .68);
  backdrop-filter: blur(14px) saturate(160%);
}
.modal{
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.12), transparent 50%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid rgba(255,255,255,.08);
}
.modal::before{
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: var(--grad-iris);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .35;
  pointer-events: none;
  animation: irisSpin 14s linear infinite;
}
.modal-close{
  transition:
    background var(--dur-base) var(--arcade-out),
    transform var(--dur-fast) var(--arcade-spring),
    box-shadow var(--dur-base) var(--arcade-out);
}
.modal-close:hover{
  background: var(--red);
  transform: rotate(90deg) scale(1.06);
  box-shadow: 0 0 16px rgba(59,130,246,.6);
}

/* ----- MODAL title — gradient + soft drop shadow for that arcade feel. */
.modal-title{
  background: linear-gradient(135deg, #fff 0%, #dbeafe 60%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 4px 14px rgba(59,130,246,.25));
}

/* ----- MODAL win special variant — already has .modal-win. Big vibe. */
.modal-win .modal-title{
  background: linear-gradient(135deg, #fff 0%, var(--gold) 50%, var(--orange) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(255,200,80,.55));
  animation: modalWinTitleShimmer 2.4s ease-in-out infinite;
}
@keyframes modalWinTitleShimmer{
  0%,100%{ filter: drop-shadow(0 0 14px rgba(255,200,80,.45)); }
  50%    { filter: drop-shadow(0 0 28px rgba(255,200,80,.85)); }
}

/* ----- TOAST — richer borders/shadows, kind-aware glow. */
.toast{
  background:
    linear-gradient(180deg, rgba(16,20,42,.95), rgba(10,14,28,.95));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 700;
  letter-spacing: .02em;
}
.toast.win{
  border-color: rgba(59,130,246,.55);
  box-shadow:
    0 12px 32px rgba(0,0,0,.5),
    0 0 0 1px rgba(59,130,246,.35),
    var(--glow-green);
}
.toast.loss{
  border-color: rgba(239,68,68,.5);
  box-shadow:
    0 12px 32px rgba(0,0,0,.5),
    0 0 0 1px rgba(239,68,68,.3),
    var(--glow-red);
}
.toast.info{
  border-color: rgba(118,228,255,.45);
  box-shadow:
    0 12px 32px rgba(0,0,0,.5),
    0 0 0 1px rgba(118,228,255,.25),
    0 0 22px rgba(118,228,255,.3);
}

/* ============================================================
   ARCADE POLISH v6 — END
============================================================ */

/* ============================================================
   ARCADE POLISH v7 — PROFILE / ACHIEVEMENTS / WALLET
============================================================ */

/* ----- PROFILE TOPBAR pill — soft hover lift. */
.profile{
  transition:
    transform var(--dur-fast) var(--arcade-spring),
    background var(--dur-base) var(--arcade-out),
    box-shadow var(--dur-base) var(--arcade-out);
}
.profile:hover{
  transform: translateY(-1px) scale(1.02);
  background: rgba(255,255,255,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 0 1px rgba(59,130,246,.25);
}

/* ----- PROFILE HERO HEADER — depth + iridescent rim. */
.profile-header{
  position: relative;
  isolation: isolate;
  box-shadow: var(--depth-3), 0 0 60px rgba(59,130,246,.10);
}
.profile-header::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: var(--grad-iris);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .4; pointer-events: none;
  animation: irisSpin 14s linear infinite;
}

/* ----- PROFILE TABS — animated underline like the bf-tabs. */
.profile-tab{
  position: relative;
  transition:
    color var(--dur-base) var(--arcade-out),
    transform var(--dur-fast) var(--arcade-spring);
}
.profile-tab:hover{ transform: translateY(-1px); }
.profile-tab.active::after{
  content:""; position:absolute; left:14%; right:14%; bottom:-6px; height:2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--gold), transparent);
  filter: drop-shadow(0 0 6px var(--pink));
}

/* ----- ACHIEVEMENT BADGE — 3D wobble on hover. */
.ach-badge{
  position: relative;
  isolation: isolate;
  transition:
    transform var(--dur-base) var(--arcade-spring),
    filter var(--dur-base) var(--arcade-out);
  -webkit-transform-style:preserve-3d;
  transform-style: preserve-3d;
}
.ach-badge:hover{
  transform: perspective(600px) translateY(-3px) rotateX(8deg) rotateY(-6deg) scale(1.08);
  filter: brightness(1.1) saturate(1.15);
}
.ach-badge.unlocked{
  animation: achIdleBob 3.6s ease-in-out infinite;
}
@keyframes achIdleBob{
  0%,100%{ transform: translateY(0)   rotate(-1deg) }
  50%    { transform: translateY(-3px) rotate( 1deg) }
}
.ach-badge.locked{ filter: grayscale(.85) brightness(.6) saturate(.5); }
.ach-badge.locked:hover{ filter: grayscale(.6) brightness(.8) saturate(.7); }

/* ----- ACHIEVEMENT CARD — depth + tier-glow. */
.ach-card{
  transition:
    transform var(--dur-base) var(--arcade-spring),
    box-shadow var(--dur-base) var(--arcade-out),
    border-color var(--dur-base) var(--arcade-out);
}
.ach-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--depth-2), 0 0 30px rgba(59,130,246,.18);
}
.ach-card.unlocked.ach-mythic{   box-shadow: 0 0 0 1px rgba(29,78,216,.45), var(--glow-violet); }
.ach-card.unlocked.ach-legendary{ box-shadow: 0 0 0 1px rgba(255,200,80,.45), var(--glow-gold); }
.ach-card.unlocked.ach-epic{     box-shadow: 0 0 0 1px rgba(29,78,216,.35), 0 0 20px rgba(29,78,216,.25); }
.ach-card.unlocked.ach-rare{     box-shadow: 0 0 0 1px rgba(118,228,255,.35), 0 0 18px rgba(118,228,255,.22); }

/* ----- ACHIEVEMENT TOAST — gold glow + scale-in. */
.ach-toast{
  background:
    radial-gradient(ellipse at top right, rgba(255,200,80,.18), transparent 50%),
    linear-gradient(180deg, rgba(16,20,42,.96), rgba(10,14,28,.95));
  box-shadow: var(--depth-3), 0 0 80px rgba(255,200,80,.35), var(--glow-gold);
  transform: translateX(420px);
  opacity: 0;
  transition:
    transform var(--dur-slow) var(--arcade-spring),
    opacity var(--dur-base) var(--arcade-out);
}
.ach-toast.show{ transform: translateX(0); opacity: 1; }

/* ----- TIER BADGES (Bronze/Silver/Gold/Diamond/Mythic) — extra glow. */
[class*="tier-"] .aff-tier-icon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 10px rgba(0,0,0,.4);
}
.tier-bronze .aff-tier-icon{   box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.4), 0 0 14px rgba(205,127,50,.5); }
.tier-silver .aff-tier-icon{   box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.4), 0 0 14px rgba(224,230,240,.5); }
.tier-gold .aff-tier-icon{     box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 10px rgba(0,0,0,.4), var(--glow-gold); }
.tier-diamond .aff-tier-icon{  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 10px rgba(0,0,0,.4), 0 0 18px rgba(59,130,246,.5); }
.tier-mythic .aff-tier-icon{   box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.4), var(--glow-violet); }

/* ----- WALLET COIN ROW — magnetic hover, glows in coin's brand color. */
.coin-row{
  position: relative;
  transition:
    transform var(--dur-base) var(--arcade-spring),
    background var(--dur-base) var(--arcade-out),
    box-shadow var(--dur-base) var(--arcade-out);
  isolation: isolate;
}
.coin-row::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(ellipse at left, rgba(59,130,246,.18), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--arcade-out);
  pointer-events:none;
}
.coin-row:hover{
  transform: translateX(4px) translateY(-1px);
  background: rgba(255,255,255,.05);
  box-shadow: var(--depth-1), 0 0 0 1px rgba(59,130,246,.2);
}
.coin-row:hover::after{ opacity: .8; }
.coin-row[data-symbol="BTC"]:hover::after{  background: radial-gradient(ellipse at left, rgba(247,147,26,.22), transparent 60%); }
.coin-row[data-symbol="ETH"]:hover::after{  background: radial-gradient(ellipse at left, rgba(98,126,234,.22), transparent 60%); }
.coin-row[data-symbol="SOL"]:hover::after{  background: radial-gradient(ellipse at left, rgba(20,241,149,.22), transparent 60%); }
.coin-row[data-symbol="USDT"]:hover::after{ background: radial-gradient(ellipse at left, rgba(38,161,123,.22), transparent 60%); }
.coin-row[data-symbol="USDC"]:hover::after{ background: radial-gradient(ellipse at left, rgba(40,108,210,.22), transparent 60%); }
.coin-row[data-symbol="DOGE"]:hover::after{ background: radial-gradient(ellipse at left, rgba(193,176,123,.22), transparent 60%); }
.coin-row[data-symbol="LTC"]:hover::after{  background: radial-gradient(ellipse at left, rgba(180,180,200,.22), transparent 60%); }
.coin-row[data-symbol="TRX"]:hover::after{  background: radial-gradient(ellipse at left, rgba(59,130,246,.22), transparent 60%); }
.coin-row[data-symbol="BNB"]:hover::after{  background: radial-gradient(ellipse at left, rgba(243,186,47,.22), transparent 60%); }
.coin-row[data-symbol="MATIC"]:hover::after{ background: radial-gradient(ellipse at left, rgba(130,71,229,.22), transparent 60%); }

/* ----- DEPOSIT QR area — subtle shimmer hint when address is shown. */
.deposit-qr{
  position: relative;
  overflow: hidden;
}
.deposit-qr::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: depositQrShine 4.5s linear infinite;
  pointer-events:none;
}
@keyframes depositQrShine{
  from{ background-position: 200% 0 } to{ background-position: -100% 0 }
}

/* ----- HISTORY ROWS in profile/transactions — hover lift + side accent. */
.hist-row{
  position: relative;
  transition:
    transform var(--dur-base) var(--arcade-out),
    box-shadow var(--dur-base) var(--arcade-out),
    background var(--dur-base) var(--arcade-out);
}
.hist-row:hover{
  transform: translateX(2px);
  box-shadow: var(--depth-1), 0 0 0 1px rgba(59,130,246,.25);
}
.hist-row.win::before{ box-shadow: 0 0 12px rgba(59,130,246,.5); }
.hist-row.loss::before{ box-shadow: 0 0 12px rgba(59,130,246,.4); }

/* ----- STATS HEAD — solid white + heavy weight. Per user direction:
   the previous white→pink→gold gradient text read as off-brand pink
   on a dark card; section-header labels site-wide should be a clean
   bold white. The .ws-label / .aff-stat-label / .aff-link-label /
   .ci-rarity-tag / .cig-rarity-tag rule-grouping is also picked up
   by this override (see also the heavier weight bumped below). */
.stats-title,
.ws-label,
.aff-stat-label,
.aff-link-label,
.pt-name{
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #fff;
  font-weight: 900;
  letter-spacing: .06em;
}

/* ============================================================
   ARCADE POLISH v7 — END
============================================================ */

/* ============================================================
   ARCADE POLISH v8 — FINAL SWEEP
   GPU-only animations, will-change discipline, motion safety.
============================================================ */

/* will-change ONLY on elements that animate continuously or per-frame.
   Lifting will-change off everything else lets the compositor reclaim
   memory between interactions. */
.btn, .ach-badge,
.crash-rocket, .crash-multiplier,
.reel-strip,
.balance, .toast, .ach-toast,
.bf-row, .cmsg, .modal,
.plinko-slot{
  will-change: transform, opacity;
}
/* IMPORTANT: elements EXCLUDED from the will-change list above because
   they (or their descendants) rely on transform-style: preserve-3d.
   will-change:transform promotes an element to its own composited layer,
   which forces transform-style: flat on descendants in WebKit/Blink and
   silently breaks any 3D scene built underneath. Excluded:
     - .dice-cube-wrap → faces with translateZ(60) collapse to a plane
     - .game-card      → .gc-name/.gc-art/.gc-tag/.gc-bubble translateZ
                          parallax collapses to a flat tilt
     - .mine-tile      → rotateX(8deg) hover lift collapses to 2D shear
   The transform animations on these still composite fine without the hint. */
/* idle elements should NOT carry will-change — the compositor caches them. */
.cmsg-text, .bf-bet, .bf-game, .bf-payout,
.modal-title, .modal-sub,
.ach-name, .ach-desc{ will-change: auto; }

/* ----- Smoother route transitions on top of the existing routeIn/routeIn v4. */
.route{ contain: layout style; }    /* hint browser to skip parent reflows */

/* ----- Force GPU compositing on the heavy-motion stages.
   IMPORTANT: any stage whose CHILDREN use `transform-style: preserve-3d`
   must NOT be in this list. `transform: translateZ(0)` (and `contain: paint`)
   creates a compositing layer that forces the descendants into flat
   rendering, which kills the cube's 3D context. Same root cause as the
   dice 2D regression. Stages with 3D children are excluded:
     - .dice-stage  (.dice-cube-wrap → .dice → 6 faces with translateZ:60)
     - .mines-grid  (.mine-tile uses preserve-3d + rotateX(8deg) hover lift)
*/
.crash-board, .plinko-board,
.upgrader-stage, .slots-machine, .bj-table{
  transform: translateZ(0);
  contain: layout paint style;
}
.dice-stage, .mines-grid{
  /* keep paint isolation but no GPU-promote transform that would flatten 3D */
  contain: layout style;
}

/* ----- Tabular numbers everywhere they tick — eliminates digit-jitter. */
.balance, .hb-num, .crash-multiplier, .limbo-multi,
.upgrader-percent, .upgrader-mult,
.bf-multi, .bf-payout, .bf-bet,
.hist-amount, .hr-payout, .hr-bet,
.crash-eos-block,
.toast-body{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on;
}

/* ----- Ensure backdrop-filter falls back gracefully when not supported. */
@supports not (backdrop-filter: blur(1px)){
  .topbar{ background: rgba(7,10,20,.96); }
  .modal-backdrop{ background: rgba(4,6,16,.88); }
  .chat{ background: rgba(7,10,20,.96); }
}

/* ----- Stronger motion-safety: kill heavy continuous decoration loops.
   Excludes gameplay-essential animations (.crash-rocket bobble,
   .reel-strip spin, .crash-multiplier ticker) — those communicate
   game state via motion. Stripping them on iOS Reduce Motion meant
   players saw a static rocket / static reels even during active play
   and concluded the game was broken. The decorative loops below are
   pure ambient effects that DO get muted. */
@media (prefers-reduced-motion: reduce){
  .ach-badge.unlocked,
  .balance::before, .hero-balance::before,
  .topbar::after, .ach-toast,
  .game-card .gc-bubble{
    animation: none !important;
  }
  .upgrader-pointer{ animation: none !important; filter: drop-shadow(0 0 6px rgba(59,130,246,.55)) !important; }
}

/* ============================================================
   ARCADE POLISH v8 — END
============================================================ */

/* ============================================================
   ARCADE POLISH v9 — BADGES (Discord-style)
   New matte+shine SVG badges, profile-header badge row,
   click-to-detail popover, tier-tinted glow rings.
============================================================ */

/* ----- The .ach-badge wrapper houses the new SVG art. Reset old conflicting
   gradients and let the SVG drive its own gradients via per-call defs. ----- */
.ach-badge{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.45));
  transition:
    transform var(--dur-base) var(--arcade-spring),
    filter   var(--dur-base) var(--arcade-out);
  -webkit-transform-style:preserve-3d;
  transform-style: preserve-3d;
}
.ach-badge .ach-badge-bg{ display: none; }   /* old bg layer no longer needed */
.ach-badge .ach-badge-art{
  width: 100%; height: 100%;
  position: relative;
}
.ach-badge .ach-art{
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
}
/* Animated polish sweep across the .ach-shine highlight. */
.ach-badge .ach-shine{
  transform-origin: 32px 22px;
  animation: achShineSweep 3.6s ease-in-out infinite;
  transform-box: fill-box;
}
@keyframes achShineSweep{
  0%,100%{ opacity:.55; transform: translateY(0)   scaleX(1) }
  50%    { opacity:1;   transform: translateY(-1px) scaleX(1.06) }
}

/* Idle bob for unlocked badges — ach-card already had achIdleBob;
   kept here as a hard fallback in case parent .ach-card is absent. */
.profile-badge-row .ach-badge.unlocked,
.up-ach-cell.on .ach-badge.unlocked{
  animation: achIdleBob 4.2s ease-in-out infinite;
}

/* Locked desaturation — overlay the lock icon centered. */
.ach-badge.locked{
  filter: grayscale(.85) brightness(.55) saturate(.5)
          drop-shadow(0 6px 10px rgba(0,0,0,.5));
}
.ach-badge-lock{
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
  pointer-events: none;
  opacity: .92;
}

/* Hover wobble — works on every site that uses .ach-badge. */
.ach-badge:hover{
  transform: perspective(600px) translateY(-3px) rotateX(8deg) rotateY(-6deg) scale(1.06);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.5))
          drop-shadow(0 0 18px rgba(59,130,246,.35));
}

/* Tier-keyed glow on hover (each tier projects its own halo). */
.ach-badge.ach-tier-common:hover{   filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(180,196,232,.55)); }
.ach-badge.ach-tier-rare:hover{     filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(95,184,255,.65)); }
.ach-badge.ach-tier-epic:hover{     filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(165,138,255,.7)); }
.ach-badge.ach-tier-legendary:hover{filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(255,200,80,.8)); }
.ach-badge.ach-tier-mythic:hover{   filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)) drop-shadow(0 0 28px rgba(59,130,246,.85)); }

/* ============================================================
   PROFILE BADGE ROW — Discord-style chip strip
============================================================ */
.profile-badge-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--depth-1);
  max-width: max-content;
  align-items: center;
}
.profile-badge-row.is-empty{ display: none; }

.pbr-chip{
  position: relative;
  width: 36px; height: 36px;
  border: 0; padding: 0; margin: 0;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition:
    transform var(--dur-base) var(--arcade-spring),
    filter   var(--dur-base) var(--arcade-out),
    background var(--dur-base) var(--arcade-out);
  isolation: isolate;
}
.pbr-chip .ach-art{
  width: 100%; height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45));
}
.pbr-chip:hover{
  transform: translateY(-3px) scale(1.12);
  background: rgba(255,255,255,.06);
}
.pbr-chip:hover .ach-art{
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.55))
          drop-shadow(0 0 12px var(--pbr-glow, rgba(59,130,246,.55)));
}
.pbr-chip:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.6),
    0 0 0 3px rgba(59,130,246,.85);
}
.pbr-chip.pbr-tier-common{    --pbr-glow: rgba(180,196,232,.55); }
.pbr-chip.pbr-tier-rare{      --pbr-glow: rgba(95,184,255,.65); }
.pbr-chip.pbr-tier-epic{      --pbr-glow: rgba(165,138,255,.7);  }
.pbr-chip.pbr-tier-legendary{ --pbr-glow: rgba(255,200,80,.75); }
.pbr-chip.pbr-tier-mythic{    --pbr-glow: rgba(59,130,246,.8);  }
/* Subtle continuous shine on rarer tiers in the row. */
.pbr-chip.pbr-tier-legendary,
.pbr-chip.pbr-tier-mythic{
  animation: pbrIdle 3.2s ease-in-out infinite;
}
@keyframes pbrIdle{
  0%,100%{ filter: brightness(1) saturate(1); }
  50%    { filter: brightness(1.08) saturate(1.1); }
}

/* Inline (in user popup) — slightly more compact and tighter spacing. */
.up-badge-row{
  margin-top: 6px;
  padding: 6px 8px;
  gap: 5px;
}
.up-badge-row .pbr-chip{ width: 30px; height: 30px; border-radius: 10px; }

/* ============================================================
   ACHIEVEMENT DETAIL POPOVER — opens on chip click
============================================================ */
.ach-detail{
  position: fixed;
  z-index: 600;
  width: 280px;
  padding: 14px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.18), transparent 55%),
    linear-gradient(180deg, rgba(16,20,42,.96), rgba(10,14,28,.96));
  border: 1px solid rgba(59,130,246,.4);
  box-shadow: var(--depth-3), 0 0 60px rgba(59,130,246,.18);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: center;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition:
    transform var(--dur-base) var(--arcade-spring),
    opacity   var(--dur-base) var(--arcade-out);
  pointer-events: auto;
}
.ach-detail.show{ opacity: 1; transform: translateY(0) scale(1); }
.ach-detail-art{
  width: 60px; height: 60px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
.ach-detail-art .ach-art{ width: 100%; height: 100%; display: block; }
.ach-detail-body{ min-width: 0; }
.ach-detail-name{
  font-family: 'Sora'; font-weight: 800;
  font-size: 16px; color: #fff;
  background: linear-gradient(135deg, #fff, #dbeafe 60%, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 2px;
}
.ach-detail-tier{
  font-family: 'Inter'; font-weight: 700;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.ach-detail-desc{
  font-family: 'Inter'; font-weight: 600;
  font-size: 14px; line-height: 1.4;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.ach-detail-when{
  font-family: 'Inter'; font-weight: 700;
  font-size: 13px;
  color: var(--cyan);
}
.ach-detail-mythic{    border-color: rgba(59,130,246,.55); box-shadow: var(--depth-3), var(--glow-pink); }
.ach-detail-legendary{ border-color: rgba(255,200,80,.55); box-shadow: var(--depth-3), var(--glow-gold); }
.ach-detail-epic{      border-color: rgba(165,138,255,.55); box-shadow: var(--depth-3), var(--glow-violet); }
.ach-detail-rare{      border-color: rgba(95,184,255,.45); box-shadow: var(--depth-3), 0 0 30px rgba(95,184,255,.35); }

/* ============================================================
   ACH GRID CARD — refresh look so it matches the new badge art
============================================================ */
.ach-card{
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--depth-1);
  transition:
    transform var(--dur-base) var(--arcade-out),
    box-shadow var(--dur-base) var(--arcade-out),
    border-color var(--dur-base) var(--arcade-out);
}
.ach-card.locked{ opacity: .68; }
.ach-card .ach-badge{ width: 80px; height: 80px; }
.ach-name{
  font-family:'Sora'; font-weight:800; font-size:15px; color:#fff;
  margin-bottom: 4px;
}
.ach-desc{
  font-family:'Inter'; font-weight:600;
  font-size: 12.5px; color: var(--text-dim); line-height: 1.4;
}
.ach-tier{
  font-family:'Inter'; font-weight: 800;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim);
}
.ach-card.ach-mythic .ach-tier{    background: rgba(59,130,246,.18); color: #dbeafe; border-color: rgba(59,130,246,.45); }
.ach-card.ach-legendary .ach-tier{ background: rgba(255,200,80,.16); color: #ffe0a0; border-color: rgba(255,200,80,.45); }
.ach-card.ach-epic .ach-tier{      background: rgba(165,138,255,.18); color: #67E8F9; border-color: rgba(165,138,255,.45); }
.ach-card.ach-rare .ach-tier{      background: rgba(95,184,255,.18); color: #dbeafe; border-color: rgba(95,184,255,.45); }

.ach-when{
  font-family:'Inter'; font-weight: 700;
  font-size: 13px;
  color: var(--cyan);
  grid-column: 2 / 4;
  margin-top: 4px;
}

/* ============================================================
   ACH UNLOCK TOAST — refreshed for new badge art sizes
============================================================ */
.ach-toast{
  position: fixed;
  /* Reset bottom/left from the older v1 declaration at line ~6120
     (bottom:24px) — when BOTH top and bottom are set the toast
     stretches to fill the viewport height (was 700px tall on a
     800px screen). Anchoring from top only. */
  top: 76px; right: 16px;
  bottom: auto; left: auto;
  width: 268px;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top right, rgba(255,200,80,.18), transparent 50%),
    linear-gradient(180deg, rgba(16,20,42,.96), rgba(10,14,28,.95));
  border: 1px solid rgba(255,200,80,.4);
  box-shadow: var(--depth-3), 0 0 60px rgba(255,200,80,.28), var(--glow-gold);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  z-index: 700;
}
/* Override the older `.ach-toast.show {right: 24px}` declaration —
   matched specificity gets us the smaller offset. */
.ach-toast.show{ right: 16px }
.ach-toast .ach-badge{ width: 44px; height: 44px; }
.ach-toast .ach-toast-icon{ width: 44px; height: 44px }
.ach-toast-eyebrow{
  font-family:'Inter'; font-weight:800;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--gold);
  margin-bottom: 1px;
}
.ach-toast-name{
  font-family:'Sora'; font-weight:800; font-size:15px; color:#fff;
  background: linear-gradient(135deg, #fff, #ffe0a0, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
}
.ach-toast-desc{
  font-family:'Inter'; font-weight: 600;
  font-size: 13px; color: var(--text-dim); line-height: 1.35;
}
@media (max-width: 480px){
  .ach-toast{
    top: auto; bottom: 16px;
    left: 16px; right: 16px;
    width: auto;
  }
}

/* ============================================================
   TIER ART REFRESH — shadow + animation polish
============================================================ */
.tier-art{
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
.tier-art .tier-shine{
  transform-origin: center;
  animation: tierShineSweep 4.6s ease-in-out infinite;
  transform-box: fill-box;
}
@keyframes tierShineSweep{
  0%,100%{ opacity:.55; transform: scaleX(1) }
  50%    { opacity:1;   transform: scaleX(1.06) }
}
.tier-art-mythic .tier-aura{
  transform-origin: 40px 38px;
  animation: tierMythicAura 3.2s ease-in-out infinite;
  transform-box: fill-box;
}
@keyframes tierMythicAura{
  0%,100%{ opacity:.4;  transform: scale(1)   }
  50%    { opacity:.85; transform: scale(1.08) }
}
.ph-tier-badge{
  width: 64px; height: 64px;
  flex-shrink: 0;
}

/* ============================================================
   ARCADE POLISH v9 — END
============================================================ */

/* ============================================================
   ARCADE POLISH v10 — SLOTS REWORK
   PNG limited-item symbols on the reels + image-only paytable
   with hover/tap reveal showing multiplier and chance.
============================================================ */

/* ----- Reel-strip images. The reel-strip span used to host an SVG; now it
   hosts an <img>. Reset the legacy svg sizing and apply matte-shine treatment
   so the image reads like an item card on the reel. ----- */
.reel-strip span{
  position: relative;
  perspective: 600px;
}
.reel-strip span > .slot-img{
  width: 108px;
  height: 108px;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 6px 8px rgba(0,0,0,.45))
    drop-shadow(0 0 14px rgba(255,255,255,.06));
  transition: filter var(--dur-base) var(--arcade-out),
              transform var(--dur-base) var(--arcade-spring);
  /* gentle idle bobble so static reels don't feel dead */
  animation: slotImgIdle 3.4s ease-in-out infinite;
}
.reel-strip span:nth-child(2n) > .slot-img{ animation-delay: -1.4s; }
.reel-strip span:nth-child(3n) > .slot-img{ animation-delay: -2.6s; }
@keyframes slotImgIdle{
  0%,100%{ transform: translateY(0)   rotate(-1deg) }
  50%    { transform: translateY(-3px) rotate( 1deg) }
}
/* Pause idle bobble while the reel is spinning so the motion doesn't
   compound with the strip translation (looks twitchy). */
.slots-machine.spinning .reel-strip span > .slot-img{
  animation: none;
}
/* Win flash — fired by JS by adding .win to the .reel containing the
   matched symbol; the inner image gets a brief gold pulse + bounce. */
.reel.win .slot-img{
  filter:
    drop-shadow(0 0 24px rgba(255,217,0,.95))
    drop-shadow(0 0 48px rgba(255,138,0,.6));
  animation: slotImgWin 1.1s var(--arcade-spring);
}
@keyframes slotImgWin{
  0%   { transform: scale(1)    rotate(0) }
  35%  { transform: scale(1.18) rotate(-4deg) }
  70%  { transform: scale(.96)  rotate(3deg)  }
  100% { transform: scale(1)    rotate(0) }
}
/* Tier-aware idle aura behind the image when paused on a high-tier symbol.
   Driven by adding the symbol class to the reel via the existing reel-strip
   data flow. Cheap — single ::before, no extra DOM. */
.reel-strip span{
  isolation: isolate;
}
.reel-strip span::before{
  content:""; position:absolute; inset:8px; border-radius:50%;
  pointer-events:none; opacity:.55; z-index:-1;
  background: radial-gradient(circle, rgba(255,255,255,.15), transparent 65%);
  filter: blur(8px);
}

/* ----- Paytable cards (image-only, name hidden). ----- */
.paytable-v2 .pt-card{
  cursor: pointer;
  /* Cards used to be <div>; they're now <button>. Reset native button styles. */
  font-family: inherit;
  color: inherit;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}
.paytable-v2 .pt-card:focus-visible{
  outline: none;
  border-color: var(--tier);
  box-shadow: 0 0 0 2px var(--tier);
}
/* Hide the now-removed item-name line, just in case some older cache renders it. */
.paytable-v2 .pt-card-name{ display:none !important; }

.paytable-v2 .pt-card-syms .pt-icon{
  width: 44px;
  height: 44px;
  position: relative;
}
.paytable-v2 .pt-card-syms .pt-icon .pt-img{
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
  transition: transform var(--dur-base) var(--arcade-spring),
              filter   var(--dur-base) var(--arcade-out);
}
.paytable-v2 .pt-card:hover .pt-card-syms .pt-icon .pt-img{
  transform: translateY(-2px) scale(1.05);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.5));
}
/* The "?" placeholder for the third tile in the pair card stays neutral. */
.paytable-v2 .pt-card-syms-pair .pt-icon-q{
  width: 44px; height: 44px;
}

/* Inline chance row — small + dim by default, brightens on hover. */
.paytable-v2 .pt-card-chance{
  display: inline-flex; align-items: center; gap: 6px;
  font-family:'Inter'; font-weight: 800;
  font-size: 12px; letter-spacing: .14em;
  color: var(--text-mute);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  position: relative; z-index: 1;
}
.paytable-v2 .pt-chance-dot{
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.paytable-v2 .pt-card:hover .pt-card-chance{ color: var(--cyan); }
.paytable-v2 .pt-rarity-mythic .pt-card-chance{ color: #dbeafe; }
.paytable-v2 .pt-rarity-legendary .pt-card-chance{ color: #ffe0a0; }

/* ----- Floating tooltip (hover/tap reveal). ----- */
.pt-tip{
  position: fixed;
  z-index: 650;
  width: 212px;
  padding: 11px 13px;
  border-radius: 8px;
  background: rgba(14,18,32,.97);
  border: 1px solid var(--pd-line-hover, rgba(255,255,255,.10));
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(5px);
  transition: transform var(--dur-base, .2s) cubic-bezier(.16,1,.3,1),
              opacity var(--dur-base, .2s) ease;
  pointer-events: auto;
  --tier:#9aa3ab;
}
.pt-tip.show{ opacity: 1; transform: translateY(0); }
.pt-tip-eyebrow{
  font-family:'Inter'; font-weight: 800;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tier);
  margin-bottom: 9px;
}
.pt-tip-row{
  display: flex; justify-content: space-between; align-items: center;
  font-family:'Inter'; font-weight: 600;
  font-size: 12.5px;
  color: var(--text-dim);
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pt-tip-row:last-of-type{ border-bottom: 0; }
.pt-tip-label{ color: var(--text-mute); letter-spacing: .03em; }
.pt-tip-row strong{
  color: #fff;
  font-family:'Manrope','Sora',sans-serif; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pt-tip-foot{
  font-family:'Inter'; font-weight: 600;
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 8px;
}
/* Tier eyebrow color only — calm matte tooltip, no colored glow. */
.pt-tip-mythic   { --tier:#ffd36b; }
.pt-tip-legendary{ --tier:#f0b54a; }
.pt-tip-epic     { --tier:#b78cff; }
.pt-tip-rare     { --tier:#57abf8; }
.pt-tip-uncommon { --tier:#5fd39a; }
.pt-tip-pair     { --tier:#9aa3ab; }

/* ----- Mobile sizing override — match the existing .reel-strip span svg
   80px override at the same media query so PNGs scale identically. ----- */
@media (max-width:760px){
  .reel-strip span > .slot-img{ width:80px; height:80px; }
  .paytable-v2 .pt-card-syms .pt-icon{ width:36px; height:36px; }
}

/* ----- Reduced motion guard. ----- */
@media (prefers-reduced-motion: reduce){
  .reel-strip span > .slot-img{ animation: none !important; }
}

/* ============================================================
   ARCADE POLISH v10 — END
============================================================ */

/* ============================================================
   ARCADE POLISH v11 — DEVELOPER BADGE + ADMIN VISUAL POLISH
   Animated hammer SVG + cyan-violet tier glow. Distinctive enough
   that admins read as "official site staff" everywhere they appear.
============================================================ */

/* Hammer swing — the entire .ach-hammer-grp pivots around the handle base
   with a Discord-style "raise + strike" rhythm. transform-origin is set
   inline (32px 33px) so the rotate centers on the handle pivot. */
.ach-art-developer .ach-hammer-grp{
  animation: devHammerSwing 2.4s cubic-bezier(.5,.05,.4,1.4) infinite;
  transform-box: fill-box;
}
@keyframes devHammerSwing{
  0%   { transform: rotate(-8deg); }
  35%  { transform: rotate(-32deg); }   /* wind-up */
  55%  { transform: rotate(14deg); }    /* strike */
  70%  { transform: rotate(2deg); }     /* recoil */
  100% { transform: rotate(-8deg); }
}
/* Shine streak that sweeps across the hammer head between swings. */
.ach-art-developer .ach-hammer-shine{
  animation: devHammerShine 2.4s ease-in-out infinite;
  transform-box: fill-box;
}
@keyframes devHammerShine{
  0%,100%{ transform: translateX(0);  opacity: 0; }
  20%   { transform: translateX(0);   opacity: 0; }
  35%   { transform: translateX(2px); opacity: .7; }
  55%   { transform: translateX(18px); opacity: 0; }
}
/* Sparks that flash on the strike beat. */
.ach-art-developer .ach-hammer-spark{
  transform-origin: center;
  transform-box: fill-box;
  animation: devHammerSparkA 2.4s ease-in-out infinite;
}
.ach-art-developer .ach-hammer-spark-2{
  animation: devHammerSparkB 2.4s ease-in-out infinite;
}
@keyframes devHammerSparkA{
  0%,55%,100%{ opacity: 0; transform: scale(.4); }
  60%       { opacity: 1; transform: scale(1.6) translate(2px,-2px); }
  75%       { opacity: 0; transform: scale(1.2) translate(6px,-4px); }
}
@keyframes devHammerSparkB{
  0%,55%,100%{ opacity: 0; transform: scale(.4); }
  62%       { opacity: 1; transform: scale(1.4) translate(3px,2px); }
  78%       { opacity: 0; transform: scale(1.1) translate(8px,5px); }
}

/* Tier-keyed glow on the developer badge — stronger and more distinctive
   than the player rarity tiers so a player on chat can immediately tell
   "this is staff", not just rare. */
.ach-badge.ach-tier-developer:hover{
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.5))
          drop-shadow(0 0 26px rgba(118,228,255,.85))
          drop-shadow(0 0 40px rgba(165,138,255,.55));
}
.ach-badge.ach-tier-developer.unlocked{
  /* idle aura — subtle continuous pulse so admins are always visually flagged */
  animation: devBadgeAura 3.4s ease-in-out infinite;
}
@keyframes devBadgeAura{
  0%,100%{ filter: drop-shadow(0 8px 14px rgba(0,0,0,.45))
                   drop-shadow(0 0 12px rgba(118,228,255,.35)); }
  50%   { filter: drop-shadow(0 8px 14px rgba(0,0,0,.45))
                   drop-shadow(0 0 22px rgba(118,228,255,.7))
                   drop-shadow(0 0 32px rgba(165,138,255,.4)); }
}

/* Profile-row + popup chip glow when this badge is rendered as a small chip */
.pbr-chip.pbr-tier-developer{
  --pbr-glow: rgba(118,228,255,.85);
}
.pbr-chip.pbr-tier-developer{
  animation: pbrIdle 2.6s ease-in-out infinite;
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce){
  .ach-art-developer .ach-hammer-grp,
  .ach-art-developer .ach-hammer-shine,
  .ach-art-developer .ach-hammer-spark{
    animation: none !important;
  }
  .rank-admin{ animation: none !important; }
  .ach-badge.ach-tier-developer.unlocked{ animation: none !important; }
}

/* ============================================================
   ARCADE POLISH v11 — END
============================================================ */

/* ============================================================
   ARCADE POLISH v12 — PLINKO REDESIGN (Stake/Bloxflip-style)
   Strips the busy nebula+aurora background, replaces with a
   clean dark casino board that lets the pegs and slots own the
   visual weight (the way Stake / Bloxflip render plinko).
============================================================ */

/* Override the busy ::before / ::after layers from earlier polish so the
   board is a clean dark surface. We use !important strategically because
   v4-era polish at line 4480+ has its own !important; without matching
   weight, this block wouldn't take. */
.plinko-board{
  /* Switched palette to Stake-style: deep navy with a faint top vignette,
     no animated swirl. Lets the pegs (white) pop and the slot pills (color)
     anchor the eye at the bottom. */
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, #0a0508 0%, #060306 60%, #020102 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -60px 80px rgba(0,0,0,.5),
    0 22px 48px rgba(0,0,0,.55) !important;
}
.plinko-board::before,
.plinko-board::after{
  /* Kill the nebula + aurora animations entirely — Stake plinko has
     neither. The board is a calm dark stage; only the ball + peg-flashes
     move during a drop. */
  display: none !important;
  content: none !important;
  animation: none !important;
}
.plinko-stars{
  /* Stars layer reduced to a near-imperceptible glint so the board has
     subtle depth without the busy multi-tile dot scroll. */
  background-image: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* Slot row — bigger, taller, cleaner. Stake's plinko slots are full-width
   pill-buttons with strong color saturation. We bump the row height + add
   a subtle separator line from the play area above. */
.plinko-slots{
  height: 64px;
  padding: 10px 14px;
  gap: 5px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.30) 100%);
  border-top: 1px solid rgba(255,255,255,.06);
}
.plinko-slot{
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  /* Deeper bevel + colored bottom rim so the pills feel chunky. */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -3px 0 rgba(0,0,0,.35),
    0 4px 0 rgba(0,0,0,.4),
    0 6px 14px rgba(0,0,0,.4);
}
/* Tier-keyed glow ring (visible on hover and during slot-flash) so the
   bigger multipliers always read as more "alive". */
.plinko-slot.t-fire{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -3px 0 rgba(0,0,0,.35),
    0 4px 0 rgba(0,0,0,.4),
    0 0 14px rgba(59,130,246,.5);
}
.plinko-slot.t-jack{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -3px 0 rgba(0,0,0,.35),
    0 4px 0 rgba(0,0,0,.4),
    0 0 18px rgba(165,138,255,.6),
    0 0 30px rgba(29,78,216,.3);
}

/* Controls panel — Stake-style 2-column. BET on the left (spans 2 rows),
   DIFFICULTY top-right, ROWS bottom-right, DROP BALL spans full bottom.
   Each control-group lands in its own grid cell — no overlap.
   Uses !important to override the legacy 3-column grid at line 2406. */
.plinko-controls{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas:
    "bet  diff"
    "bet  rows"
    "drop drop" !important;
  gap: 12px 16px !important;
  align-items: stretch !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--depth-1);
}
.plinko-controls > .control-group:nth-of-type(1){
  grid-area: bet;
  display: flex; flex-direction: column; gap: 8px;
}
.plinko-controls > .control-group:nth-of-type(2){ grid-area: diff; }
.plinko-controls > .control-group:nth-of-type(3){ grid-area: rows; }
.plinko-controls > #plinko-drop{ grid-area: drop; margin-top: 4px; }

@media (max-width:760px){
  .plinko-controls{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas:
      "bet"
      "diff"
      "rows"
      "drop" !important;
  }
}
.plinko-controls .control-group label{
  color: var(--text-mute);
  letter-spacing: .14em;
  font-weight: 800;
}
.plinko-controls .seg-toggle{
  background: rgba(0,0,0,.3);
  border-radius: 10px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.05);
}
.plinko-controls .seg-btn{
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  transition:
    background var(--dur-base) var(--arcade-out),
    color var(--dur-base) var(--arcade-out),
    transform var(--dur-fast) var(--arcade-spring);
}
.plinko-controls .seg-btn.active{
  background: linear-gradient(180deg, rgba(59,130,246,.32), rgba(255,138,30,.16));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 8px rgba(59,130,246,.35);
}

/* Drop button — bigger, more "go" presence. */
.plinko-controls > #plinko-drop{
  height: 56px;
  font-size: 16px;
  letter-spacing: .2em;
}

/* ============================================================
   ARCADE POLISH v12 — END
============================================================ */

/* ============================================================
   ARCADE POLISH v13 — BALANCE POP + DIRECTIONAL PILL GLOW
   Stake-style ±X floating chip near the balance pill on every
   credit/debit, plus a one-shot green/red glow on the pill.
============================================================ */
.balance-pop{
  position: fixed;
  z-index: 700;
  transform: translate(-50%, 0);
  font-family:'Sora'; font-weight: 800; font-size: 15px;
  letter-spacing: .04em;
  padding: 5px 12px; border-radius: 99px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: var(--depth-2);
  animation: balancePopFloat 1.5s cubic-bezier(.18,.7,.3,1) forwards;
  will-change: transform, opacity;
}
.balance-pop-up{
  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(26,138,77,.92));
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    0 8px 22px rgba(59,130,246,.45),
    0 0 28px rgba(59,130,246,.55),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.balance-pop-down{
  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(178,18,50,.92));
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 8px 22px rgba(59,130,246,.4),
    0 0 28px rgba(59,130,246,.45),
    inset 0 1px 0 rgba(255,255,255,.3);
}
@keyframes balancePopFloat{
  0%   { opacity: 0; transform: translate(-50%, -2px) scale(.85); }
  18%  { opacity: 1; transform: translate(-50%, 0)    scale(1.05); }
  35%  { opacity: 1; transform: translate(-50%, 2px)  scale(1);    }
  100% { opacity: 0; transform: translate(-50%, -22px) scale(.95); }
}

/* Directional one-shot glow on the balance pill itself, themed by sign.
   Layers ON TOP of the existing balanceBumpV2 (which handles the scale
   pulse) — adds the colored halo without fighting the bump. */
.balance.balance-up{
  animation: balanceUpGlow 1.1s var(--arcade-out);
}
.balance.balance-down{
  animation: balanceDownGlow 1.1s var(--arcade-out);
}
@keyframes balanceUpGlow{
  0%   { box-shadow: 0 0 16px rgba(59,130,246,.22); }
  35%  { box-shadow: 0 0 0 4px rgba(40,199,111,.45),
                     0 0 28px rgba(40,199,111,.65),
                     0 0 56px rgba(40,199,111,.35); }
  100% { box-shadow: 0 0 16px rgba(59,130,246,.22); }
}
@keyframes balanceDownGlow{
  0%   { box-shadow: 0 0 16px rgba(59,130,246,.22); }
  35%  { box-shadow: 0 0 0 4px rgba(239,68,68,.42),
                     0 0 28px rgba(239,68,68,.55),
                     0 0 56px rgba(239,68,68,.3); }
  100% { box-shadow: 0 0 16px rgba(59,130,246,.22); }
}

/* Reduced-motion: the floating ±X chip (balance-pop) is a money-movement
   CONFIRMATION — the bold signal players rely on to register a win/loss,
   NOT ambient decoration. An earlier build set `display:none` here, which
   made the balance feedback feel dead on iOS (Reduce Motion is on by
   default for many users) — the "red/green balance effect doesn't play on
   mobile" report. So we KEEP the chip; we only swap the lively float+scale
   for a gentle fade with a small rise, honouring the motion preference
   without erasing the feedback. Same principle as the pack-preview reveal
   + battle pot-split finale we keep alive under reduce-motion. The
   green/red pill glow (.balance-up / .balance-down) already survives. */
@media (prefers-reduced-motion: reduce){
  .balance-pop{ animation: balancePopFloatRM 1.4s ease forwards; }
}
@keyframes balancePopFloatRM{
  0%   { opacity: 0; transform: translate(-50%, 3px);   }
  22%  { opacity: 1; transform: translate(-50%, 0);     }
  72%  { opacity: 1; transform: translate(-50%, -4px);  }
  100% { opacity: 0; transform: translate(-50%, -11px); }
}

/* ============================================================
   ARCADE POLISH v13 — END
============================================================ */

/* ============================================================
   ARCADE POLISH v14 — QUICK-REBET PILL + PLINKO POLISH
============================================================ */

/* Floating "Same again" pill that appears below the play button after each
   round. Anchored at fixed coords (set by JS), centered horizontally on the
   button. Auto-dismisses; click re-fires the play action. */
.quick-rebet{
  position: fixed;
  z-index: 600;
  transform: translate(-50%, -4px) scale(.94);
  opacity: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-family:'Inter'; font-weight: 800;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 99px;
  background: linear-gradient(180deg, rgba(165,138,255,.95), rgba(29,78,216,.92));
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    0 10px 26px rgba(0,0,0,.5),
    0 0 24px rgba(165,138,255,.5),
    inset 0 1px 0 rgba(255,255,255,.35);
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform var(--dur-base) var(--arcade-spring),
    opacity var(--dur-base) var(--arcade-out),
    box-shadow var(--dur-base) var(--arcade-out);
}
.quick-rebet.show{
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.quick-rebet:hover{
  box-shadow:
    0 14px 32px rgba(0,0,0,.55),
    0 0 36px rgba(165,138,255,.75),
    inset 0 1px 0 rgba(255,255,255,.45);
  transform: translate(-50%, -2px) scale(1.04);
}
.quick-rebet .qr-icon{
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  animation: qrSpin 2.4s linear infinite;
}
@keyframes qrSpin{
  from{ transform: rotate(0) }
  to  { transform: rotate(360deg) }
}
@media (prefers-reduced-motion: reduce){
  .quick-rebet{ display: none !important; }
}

/* ============================================================
   ARCADE POLISH v14 — END
============================================================ */

/* ============================================================
   ADMIN PANEL — operator UI. Denser layout than the player-facing
   surfaces (admin work needs information density), but still tied
   to the brand palette so it reads as part of the same product.
============================================================ */
.adm-shell{
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 28px 40px;
  font-family: 'Inter', system-ui, sans-serif;
}
.adm-header{
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at top right, rgba(59,130,246,.18), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--depth-2), 0 0 60px rgba(59,130,246,.10);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.adm-header-left{ display: flex; align-items: center; gap: 12px; }
.adm-title{
  font-family:'Sora'; font-weight: 800;
  font-size: 22px; color: #fff;
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.adm-shield{
  width: 28px; height: 28px; color: var(--gold);
  filter: drop-shadow(0 0 10px rgba(255,200,80,.6));
}
.adm-shield svg{ width: 100%; height: 100%; }
.adm-rank{
  font-family:'Inter'; font-weight: 800;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px;
  background: linear-gradient(135deg, rgba(255,200,80,.22), rgba(255,138,30,.16));
  border: 1px solid rgba(255,200,80,.45);
  color: #dbeafe;
}
.adm-header-right{ display: flex; gap: 18px; flex-wrap: wrap; }
.adm-quick{
  display: flex; flex-direction: column; align-items: flex-end;
  font-variant-numeric: tabular-nums;
}
.adm-quick-label{
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 800;
}
.adm-quick-val{
  font-family:'Sora'; font-weight: 800; font-size: 18px; color: #fff;
}

/* Tabs */
.adm-nav{
  display: flex; gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 14px;
  overflow-x: auto;
}
.adm-tab{
  flex: 1; min-width: 110px;
  font-family:'Inter'; font-weight: 800;
  font-size: 14px; letter-spacing: .12em;
  padding: 10px 14px; border-radius: 10px;
  background: transparent; border: 0; color: var(--text-mute);
  cursor: pointer;
  transition: background var(--dur-base) var(--arcade-out),
              color var(--dur-base) var(--arcade-out),
              transform var(--dur-fast) var(--arcade-spring);
}
.adm-tab:hover{ color: #fff; transform: translateY(-1px); }
.adm-tab.active{
  color: #fff;
  background: linear-gradient(180deg, rgba(59,130,246,.28), rgba(255,138,30,.16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
              0 4px 14px rgba(59,130,246,.35);
}

/* Pane */
.adm-pane{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--depth-1);
}
.adm-pane[hidden]{ display: none; }

/* Search row + inputs */
.adm-search-row, .adm-filter-row{
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px; align-items: center;
}
.adm-input{
  flex: 1; min-width: 220px;
  padding: 10px 14px;
  background: rgba(0,0,0,.3); color: #fff;
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  font-family: 'Inter'; font-size: 15px;
  outline: none;
}
.adm-input:focus{
  border-color: rgba(59,130,246,.55);
}
.adm-select{ flex: 0 0 180px; min-width: 160px; }
.adm-label{
  font-family:'Inter'; font-weight: 800;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
}

/* Search results list */
.adm-results{
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.adm-row{
  display: grid;
  grid-template-columns: 32px 1fr auto auto auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--dur-base) var(--arcade-out),
              transform var(--dur-fast) var(--arcade-spring),
              border-color var(--dur-base) var(--arcade-out);
}
.adm-row:hover{
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.28);
  transform: translateX(2px);
}
.adm-row-avatar{
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--orange));
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
/* Image PFP variant — uses the user's actual Discord/Google avatar. */
.adm-row-pfp{
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: rgba(0,0,0,.4);
  box-shadow: 0 2px 6px rgba(0,0,0,.45),
              0 0 0 1px rgba(255,255,255,.08);
}
/* Emoji-on-color fallback when no image_url */
.adm-row-avatar-emoji{
  background: var(--pink);   /* overridden by inline style attribute */
  font-size: 16px;
}

/* Detail-card large avatar — same three-tier render as the row */
.adm-detail-id{
  display: flex; align-items: center; gap: 14px;
}
.adm-detail-pfp{
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: rgba(0,0,0,.4);
  box-shadow: 0 6px 16px rgba(0,0,0,.5),
              0 0 0 1px rgba(255,255,255,.1),
              0 0 18px rgba(59,130,246,.18);
}
.adm-detail-avatar{
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pink), var(--orange));
  color: #fff; font-weight: 800; font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.5),
              0 0 0 1px rgba(255,255,255,.1);
}
.adm-detail-avatar-emoji{
  font-size: 28px;
}

/* Avatar fallback wrappers — used when an <img> 404s. The wrapper gives the
   inline-flex sibling a sized box to flex into; the fallback spans inherit
   from .adm-row-avatar / .adm-detail-avatar so styling matches the no-image
   path. Same idea is reused for crash player list (.cp-av-fallback), the
   live-bet feed (.bf-avatar-fallback), and chat (existing rule above). */
.adm-row-pfp-wrap{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; }
.adm-detail-pfp-wrap{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; flex-shrink:0; }
.bf-avatar-fallback{ width:100%; height:100%; display:inline-flex; align-items:center; justify-content:center; font-size:15px; border-radius:50%; }
.cp-av-fallback{ width:100%; height:100%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; border-radius:50%; }
.qr-fallback{
  width:160px; height:160px; display:flex; align-items:center; justify-content:center;
  background:#0d0f24; color:#fff; font-size:15px; text-align:center; padding:12px;
  border-radius:8px; box-sizing:border-box;
}

.adm-row-name{ font-weight: 800; color: #fff; }
.adm-row-meta{ font-size: 13px; color: var(--text-mute); margin-top: 2px; }
.adm-row-bal{
  font-family:'Sora'; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.adm-row-rank{
  font-family:'Inter'; font-weight: 800;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim);
}
.adm-row-rank.adm-row-rank-mod   { background: rgba(95,184,255,.18); color: #dbeafe; border-color: rgba(95,184,255,.45); }
.adm-row-rank.adm-row-rank-admin { background: rgba(255,200,80,.2);  color: #ffe0a0; border-color: rgba(255,200,80,.5); }
.adm-row-rank.adm-row-rank-vip   { background: rgba(165,138,255,.18); color: #67E8F9; border-color: rgba(165,138,255,.45); }
.adm-row-banned{
  background: rgba(59,130,246,.2); color: #3B82F6; border-color: rgba(59,130,246,.5);
}

/* Player detail card */
.adm-detail{
  margin-top: 14px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--depth-2);
}
.adm-detail[hidden]{ display: none; }
.adm-detail-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap; gap: 12px;
}
.adm-detail-name{
  font-family:'Sora'; font-weight: 800; font-size: 22px; color: #fff;
}
.adm-detail-uid{
  font-family:'Inter'; font-size: 13px;
  color: var(--text-mute); letter-spacing: .04em;
}
.adm-detail-uid code{
  background: rgba(0,0,0,.4);
  padding: 2px 8px; border-radius: 6px;
  font-family:'Inter'; font-weight: 600;
  color: var(--cyan);
}
.adm-detail-actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.adm-action-btn{
  font-family:'Inter'; font-weight: 800;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid currentColor; cursor: pointer;
  background: rgba(0,0,0,.3);
  transition: background var(--dur-base) var(--arcade-out),
              transform var(--dur-fast) var(--arcade-spring);
}
.adm-action-btn:hover{ transform: translateY(-1px); }
.adm-action-credit  { color: #7be8a3; }
.adm-action-debit   { color: #3B82F6; }
.adm-action-ban     { color: #3B82F6; }
.adm-action-unban   { color: #3B82F6; }

.adm-detail-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.adm-stat{
  padding: 12px; border-radius: 10px;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.05);
}
.adm-stat-label{
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 800; margin-bottom: 4px;
}
.adm-stat-val{
  font-family:'Sora'; font-weight: 800; font-size: 18px; color: #fff;
  font-variant-numeric: tabular-nums;
}
.adm-stat-val.pos{ color: var(--green); }
.adm-stat-val.neg{ color: var(--red); }

.adm-section-title{
  font-family:'Inter'; font-weight: 800;
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-mute);
  margin: 18px 0 8px;
}

/* Tables */
.adm-table-wrap{
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
}
.adm-table{
  width: 100%; border-collapse: collapse;
  font-size: 14px; color: var(--text-dim);
}
.adm-table thead{
  background: rgba(255,255,255,.04);
}
.adm-table th{
  padding: 10px 12px; text-align: left;
  font-family:'Inter'; font-weight: 800;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.adm-table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-variant-numeric: tabular-nums;
}
.adm-table tr:last-child td{ border-bottom: 0; }
.adm-table tr:hover td{ background: rgba(59,130,246,.04); }
.adm-table .pos{ color: var(--green); font-weight: 700; }
.adm-table .neg{ color: var(--red);   font-weight: 700; }
.adm-table .muted{ color: var(--text-mute); }

/* Dashboard cards */
.adm-cards{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.adm-card{
  padding: 16px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--depth-1);
}
.adm-card-label{
  font-family:'Inter'; font-weight: 800;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 8px;
}
.adm-card-val{
  font-family:'Sora'; font-weight: 800; font-size: 22px; color: #fff;
  font-variant-numeric: tabular-nums;
}
.adm-card-profit{
  background: linear-gradient(180deg, rgba(255,200,80,.15), rgba(255,138,30,.05));
  border-color: rgba(255,200,80,.35);
}
.adm-card-profit .adm-card-val{ color: var(--gold); }

.adm-empty{
  padding: 28px; text-align: center;
  color: var(--text-mute); font-style: italic;
  font-family:'Inter'; font-size: 15px;
}

/* Sidebar Admin pill — same Hot/New badge style with gold tint. */
#sb-admin .sb-badge{
  background: linear-gradient(135deg, rgba(255,200,80,.22), rgba(255,138,30,.16));
  color: #ffe0a0; border-color: rgba(255,200,80,.55);
}

/* ============================================================
   ADMIN PANEL — END
============================================================ */


.game-shell-wide{ max-width:1100px; }
.game-header-spacer{ flex:1 }

/* Inline play-triangle icon — used on the hero "START PLAYING" button.
   Replaces the bare ▶ unicode glyph (which the design treats as an
   emoji and renders flat). Sized to the surrounding text + a soft
   pulse so the button reads as a "play me" affordance, not a label. */
.btn-play-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.05em;
  height:1.05em;
  margin-right:9px;
  vertical-align:-.16em;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
  animation:btnPlayPulse 1.6s ease-in-out infinite;
  transform-origin:center;
}
.btn-play-icon svg{ width:100%; height:100%; display:block }
@keyframes btnPlayPulse{
  0%,100%{ transform:scale(1)    translateX(0) }
  50%   { transform:scale(1.10) translateX(1px) }
}
@media (prefers-reduced-motion: reduce){
  .btn-play-icon{ animation:none }
}
/* ============================================================
   BRAND CONFIRM / PROMPT MODAL — replaces native confirm()/alert()/prompt()
============================================================ */
.modal-brand-confirm{
  max-width:420px;text-align:center;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(59,130,246,.20), transparent 60%),
    linear-gradient(180deg, #10172A 0%, #0a0f1f 100%);
  border:1px solid rgba(59,130,246,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 60px rgba(0,0,0,.7),
    0 0 60px rgba(59,130,246,.18);
}
.bc-icon{
  width:54px;height:54px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  margin:0 auto 12px;
  color:#3B82F6;
  background:radial-gradient(circle, rgba(59,130,246,.35), rgba(29,78,216,.10));
  border:1px solid rgba(59,130,246,.55);
  box-shadow:0 0 24px rgba(59,130,246,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
.bc-icon svg{ width:28px;height:28px }
.modal-brand-confirm.danger .bc-icon{ color:#67E8F9 }
.modal-brand-confirm.info   .bc-icon{
  color:#ffd900;
  background:radial-gradient(circle, rgba(255,217,0,.30), rgba(166,118,0,.10));
  border-color:rgba(255,217,0,.55);
  box-shadow:0 0 24px rgba(255,217,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
.modal-brand-confirm .modal-title{
  font-family:'Sora';font-weight:800;letter-spacing:.04em;
  font-size:18px;color:#fff;margin-bottom:6px;
}
.bc-body{
  font-size:15px;color:var(--text-dim);line-height:1.55;margin-bottom:18px;
}
.bc-input-wrap{ text-align:left;margin-bottom:16px }
.bc-input-label{
  display:block;font-family:'Inter',sans-serif;
  font-size:12px;letter-spacing:.20em;color:var(--text-mute);
  font-weight:800;margin-bottom:6px;
}
.bc-input{
  width:100%;padding:11px 13px;border-radius:10px;
  background:rgba(0,0,0,.45);border:1px solid var(--line-2);
  color:#fff;font-family:'Inter',sans-serif;font-size:16px;
}
.bc-input:focus{ outline:2px solid rgba(59,130,246,.6);outline-offset:1px;border-color:rgba(59,130,246,.6) }
.bc-actions{
  display:flex;gap:10px;justify-content:center;
}
.bc-cancel, .bc-confirm{
  flex:1;max-width:160px;height:46px;
  font-family:'Inter',sans-serif;font-weight:900;
  font-size:14px;letter-spacing:.16em;
}
.modal-brand-confirm.danger .bc-confirm{
  background:
    radial-gradient(120% 180% at 50% 0%, rgb(232, 140, 150) 0%, transparent 45%),
    linear-gradient(180deg, rgb(232, 85, 101) 0%, rgb(221,28,28) 45%, rgb(160,24,24) 75%, rgb(122,14,14) 100%);
}

/* ============================================================
   AUTH MODALS — chooser (2-column) + Roblox multi-step flow.
   Casino-brand red/dark aesthetic; left brand panel mirrors the
   reference design but uses the Bloxhit logo with a slow float.
============================================================ */
.modal-auth{
  max-width:880px;width:96vw;
  padding:0;
  display:grid;grid-template-columns:minmax(0, 360px) minmax(0, 1fr);
  gap:0;
  background:linear-gradient(180deg, #110509 0%, #06060a 100%);
  border:1px solid rgba(59,130,246,.32);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.65), 0 0 80px rgba(59,130,246,.18);
}
.modal-auth .modal-close{
  position:absolute;top:14px;right:14px;z-index:5;
}

/* Auth form (brand panel removed — single-column modal). */
.auth-form{ padding:34px 32px;display:flex;flex-direction:column;gap:14px }
/* Sign In / Register tab toggle — sits at the top of the auth form.
   Both tabs lead to the same Roblox-username form; the toggle just
   swaps the title + sub copy so the user sees the wording they expect
   for their situation. */
.auth-tabs{
  display:inline-flex;
  align-self:flex-start;
  gap:4px;
  padding:4px;
  background:#15171f;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  margin-bottom:6px;
}
.auth-tab{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.55);
  font-family:'Urbanist','Inter',sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  padding:8px 16px;
  border-radius:9px;
  cursor:pointer;
  transition:
    color .22s cubic-bezier(.22, 1, .36, 1),
    background .22s cubic-bezier(.22, 1, .36, 1);
}
.auth-tab:hover{ color:rgba(255,255,255,.85); }
.auth-tab.active{
  background:#1c1f29;
  color:#ffffff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.auth-header{ margin-bottom:4px }
.auth-header .modal-title{ font-family:'Sora';font-weight:800;font-size:22px;color:#fff;letter-spacing:.04em;margin:0 }
.auth-header .modal-sub{
  font-family:'Inter',sans-serif;font-size:15px;color:var(--text-mute);
  line-height:1.55;margin-top:6px;
}

/* (Legacy auth input-row / continue / disclaimer / divider / oauth-button
   styles removed — the redesigned modal uses .auth-input, .auth-or and
   .auth-social instead.) */

.auth-foot{
  display:flex;align-items:flex-start;gap:10px;
  margin:10px 0 0;
  font-family:'Inter',sans-serif;font-size:11.5px;
  color:var(--text-mute);line-height:1.55;
}
.auth-foot a{ color:#67E8F9;text-decoration:none }
.auth-foot a:hover{ text-decoration:underline }

/* Phone: stack the two panels vertically. */
@media (max-width:720px){
  .modal-auth{ grid-template-columns:1fr;max-width:420px }
  .auth-brand{ padding:22px 20px;border-right:0;border-bottom:1px solid rgba(59,130,246,.22);gap:10px }
  .auth-brand-logo-wrap{ width:140px }
  .auth-brand-tag{ font-size:15px }
  .auth-brand-sub{ font-size:10.5px;letter-spacing:.14em }
  .auth-form{ padding:22px 20px }
  .auth-oauth-row{ grid-template-columns:1fr }
}

/* ----- ROBLOX MULTI-STEP MODAL ----- */
.modal-rbx{
  max-width:440px;
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(59,130,246,.18), transparent 70%),
    linear-gradient(180deg, #0a0f1f 0%, #070A14 100%);
  border:1px solid rgba(59,130,246,.30);
  text-align:center;
}
.rbx-step{ display:flex;flex-direction:column;align-items:stretch;gap:14px }
/* HTML `hidden` attribute MUST win over the flex display above (same trick
   as .btn[hidden] near the top of this file). Without this, all three
   Roblox steps render simultaneously instead of swapping. */
.rbx-step[hidden]{ display:none !important }
.modal-rbx .modal-title{ font-family:'Sora';font-weight:800;letter-spacing:.16em;font-size:18px;color:#fff;margin-bottom:2px }
.modal-rbx .modal-sub{ font-size:12.5px;color:var(--text-mute);letter-spacing:.04em;line-height:1.55 }

.rbx-label{
  display:block;font-family:'Inter',sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.2em;
  color:var(--text-mute);text-transform:uppercase;text-align:left;
  margin-top:4px;
}
.rbx-input-row{
  display:flex;align-items:center;gap:8px;
  padding:12px 14px;border-radius:12px;
  background:rgba(0,0,0,.35);border:1px solid var(--line-2);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.rbx-input-row:focus-within{
  border-color:rgba(59,130,246,.55);
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.rbx-input-row input{
  flex:1;background:transparent;border:0;outline:0;
  color:#fff;font-family:'Inter',sans-serif;
  font-weight:700;font-size:15px;letter-spacing:.02em;min-width:0;
}
.rbx-input-row input::placeholder{ color:var(--text-mute) }

.rbx-error{
  font-family:'Inter',sans-serif;font-size:14px;
  color:#67E8F9;text-align:left;line-height:1.5;
  background:rgba(59,130,246,.10);border:1px solid rgba(59,130,246,.32);
  border-radius:10px;padding:9px 12px;
}
.rbx-cta{ width:100% }
.rbx-cta.is-busy{ opacity:.65;cursor:wait }

/* Turnstile widget container — Cloudflare's iframe is ~300x65 in
   Managed mode. Center it, give it room between the input and the
   NEXT button so it doesn't feel crammed. The widget renders nothing
   visible 99% of the time (invisible challenge) so an empty block
   here is normal. */
.auth-turnstile{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0 4px;
  min-height: 0; /* collapses to 0 when invisible; grows when challenge appears */
}
.auth-turnstile:empty{ margin: 0; }
.auth-turnstile iframe{
  /* Cloudflare-injected iframe — match the input's rounded corners
     so the visible challenge (when it appears) doesn't break the
     modal's rhythm. */
  border-radius: 10px;
}

.auth-back-link{
  background:transparent;border:0;cursor:pointer;
  font-family:'Inter',sans-serif;
  color:var(--text-mute);font-size:14px;font-weight:700;
  padding:6px;
  transition:color .15s ease;
}
.auth-back-link:hover{ color:#fff }

/* ----- step 2: avatar confirm ----- */
.rbx-avatar-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:18px;border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--line-2);
}
.rbx-avatar-img{
  width:140px;height:140px;border-radius:50%;
  background:#0a0a0a center/cover no-repeat;
  border:3px solid rgba(59,130,246,.55);
  box-shadow:
    0 8px 24px rgba(0,0,0,.55),
    0 0 28px rgba(59,130,246,.25),
    inset 0 0 0 2px rgba(255,255,255,.05);
  margin-bottom:6px;
}
.rbx-avatar-name{ font-family:'Sora';font-weight:800;font-size:18px;color:#fff }
.rbx-avatar-id{ font-family:'Inter',sans-serif;font-size:14px;color:var(--text-mute);letter-spacing:.04em }

.rbx-confirm-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;
}
.rbx-confirm-no, .rbx-confirm-yes{ width:100% }

/* ----- step 3: phrase ----- */
.rbx-phrase-card{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px;border-radius:12px;
  background:rgba(0,0,0,.5);border:1.5px dashed rgba(59,130,246,.55);
}
.rbx-phrase{
  flex:1;font-family:'JetBrains Mono','Courier New',monospace;
  font-weight:800;font-size:15px;letter-spacing:.06em;
  /* On-brand light blue (was gold + glow) so it pops against the dashed
     blue card without clashing with the site's blue palette. */
  color:#9ecbff;
  word-break:break-all;text-align:left;
}
.rbx-phrase-copy{
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  color:var(--text);cursor:pointer;
  width:34px;height:34px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;
  transition:background .2s ease, border-color .2s ease;
}
.rbx-phrase-copy:hover{ background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.5);color:#fff }

.rbx-steps{
  margin:6px 0 0;padding-left:20px;text-align:left;
  font-family:'Inter',sans-serif;font-size:12.5px;
  color:var(--text);line-height:1.7;
}
.rbx-steps li{ margin-bottom:2px }
.rbx-steps a{ color:var(--pink);text-decoration:none }
.rbx-steps a:hover{ text-decoration:underline }

.rbx-foot{
  margin:0;font-size:13px;color:var(--text-mute);text-align:center;
  font-family:'Inter',sans-serif;letter-spacing:.04em;
}
.rbx-foot #rbx-countdown{ color:#7ab8ff;font-weight:700;font-variant-numeric:tabular-nums }

@media (max-width:480px){
  .modal-auth, .modal-rbx{ max-width:96vw }
  .rbx-avatar-img{ width:110px;height:110px }
  .rbx-confirm-row{ grid-template-columns:1fr }
}


/* ============================================================
   LEGAL PAGES — TOS / Privacy / Responsible Gaming
   Single-column readable article layout that inherits the
   dark casino chrome but keeps line lengths comfortable.
============================================================ */
.legal-shell{
  max-width:780px;margin:24px auto;padding:32px 28px 56px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line-2);border-radius:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}
.legal-header{ margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line-2) }
.legal-title{
  font-family:'Sora','Inter',sans-serif;font-weight:800;
  font-size:30px;letter-spacing:.02em;color:#fff;margin:0;
}
.legal-sub{
  margin:6px 0 0;font-family:'Inter',sans-serif;
  font-size:12.5px;color:var(--text-mute);letter-spacing:.04em;
}
.legal-body{
  font-family:'Inter',sans-serif;font-size:16px;line-height:1.7;
  color:var(--text);
}
.legal-body h2{
  margin:28px 0 8px;
  font-family:'Sora','Inter',sans-serif;font-weight:800;
  font-size:17px;letter-spacing:.04em;color:#fff;
}
.legal-body p{ margin:0 0 12px }
.legal-body ul{ margin:0 0 14px;padding-left:22px }
.legal-body li{ margin-bottom:6px }
.legal-body strong{ color:#fff;font-weight:800 }
.legal-body a{ color:var(--pink);text-decoration:none }
.legal-body a:hover{ text-decoration:underline }
.legal-body code{
  background:rgba(0,0,0,.45);border:1px solid var(--line-2);
  padding:2px 6px;border-radius:6px;font-size:.92em;
  font-family:'JetBrains Mono','Courier New',monospace;color:#ffd900;
}
@media (max-width:640px){
  .legal-shell{ margin:14px;padding:22px 18px 40px }
  .legal-title{ font-size:24px }
  .legal-body{ font-size:13.5px }
}

/* ============================================================
   MOBILE PERFORMANCE OVERRIDES
   ----------------------------------------------------------------
   Mobile GPUs choke on the desktop chrome — large filter:blur(),
   backdrop-filter on sticky surfaces, fixed-attachment radial
   gradients, and a dozen concurrent infinite SVG animations.
   This block strips the cost without removing any actual content,
   so the games and UI stay fully visible while frames stay smooth.

   Triggers below 760px (matches the existing primary mobile
   breakpoint), with extra trims at 460px and 360px.
============================================================ */
@media (max-width: 760px){
  /* The three .bg-orb circles each have filter:blur(70px) on a
     500-600px square — about the worst possible thing to paint
     on a mobile GPU, especially with an infinite drift animation.
     Hide them; the body radial-gradients still give the red wash. */
  .bg-orb{ display:none !important }

  /* Faint grid overlay is a fixed full-screen background-image
     that repaints on every scroll. Drop it on mobile. */
  body::before{ display:none !important }

  /* phase2 carries the SITE BACKGROUND IMAGE on this fixed pseudo (a
     single static image — no animation, no blur, no grid). It's a
     composited fixed layer, so content scrolls over it smoothly; keep
     it visible on mobile so the background isn't a flat colour there. */
  html[data-theme="phase2"] body::before{ display:block !important }

  /* background-attachment:fixed forces a full-page repaint per
     scroll frame on mobile browsers. Switch to scroll. */
  body{ background-attachment:scroll !important }

  /* Topbar is sticky — every scroll repaints the blurred area
     behind it. Solid background is faster and visually fine. */
  .topbar{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(7,10,20,.96) !important;
  }

  /* Each game card has a .gc-tag with backdrop-filter:blur(10px).
     With 9 cards on the home grid that's 9 separate blur regions.
     Solid translucent fill looks identical, costs nothing. */
  .gc-tag{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(255,255,255,.22) !important;
  }

  /* Hover-driven box-shadow transitions don't apply on touch
     anyway, but they still get evaluated and can fire from
     :focus-visible. Strip the shadow transition; keep transform. */
  .game-card{
    transition:transform .35s cubic-bezier(.16,1,.3,1) !important;
  }
  .game-card:hover{
    box-shadow:0 10px 30px rgba(0,0,0,.45), 0 4px 8px rgba(0,0,0,.3) !important;
  }

  /* The home-grid SVG art animations (rocket float, card hover,
     dice roll, bobble x3, flame wobble, crash bubbles) all use
     pure `transform` keyframes — they composite on the GPU and
     don't trigger layout/paint, so the cost is negligible even
     on mid-range phones. Earlier they were paused here for
     "perf"; that turned out to be cargo-cult — the actual perf
     killers were the .bg-orb blurs + backdrop-filters, both
     still disabled above. Re-enabling so the home grid feels
     alive on mobile. `will-change:transform` hints the
     compositor so each card's animation lands on its own layer
     and doesn't disturb the others. */
  .art-rocket, .art-cards, .art-slots, .art-chest,
  .art-dice, .art-mine, .rk-flame-grp,
  .gc-crash .gc-bubble{
    will-change:transform;
  }
}

/* Below 460px (iPhone SE etc.) keep games in 2 columns instead
   of collapsing to a single 350px-tall stack. This is what
   the user means by "games should be visible on mobile" — at
   1fr they require scrolling past 9 full cards to see the rest
   of the page. 2-col halves the height and feels far denser. */
@media (max-width: 460px){
  .game-grid{ grid-template-columns:1fr 1fr; gap:10px }
  .game-card{ height:200px; padding:12px 10px }
  .gc-name{ font-size:18px }
  /* POPULAR / NEW pill — moves out of the bottom-left (where it was
     sitting on top of the rocket art and the flames bled into the
     badge). Goes RIGHT-ALIGNED but BELOW the title row so it can't
     fight long titles like "BLACKJACK" / "UPGRADER" either. */
  .gc-tag{
    font-size:8px; padding:3px 7px;
    top:38px; right:10px;
    bottom:auto; left:auto;
  }
  /* Art shrinks slightly and lifts off the bottom edge so the
     POPULAR pill (now top-right) and the bottom of the card both
     have clear breathing room — no overlap. */
  .gc-art{ bottom:14px; width:54%; max-height:62% }
  /* Decorative multiplier ghosts on CRASH ("2.0×" / "23.2×") are
     too cramped at this size and were stretching across the card
     because the desktop "top:auto;left:auto" reset wasn't carried
     over for gc-bubble-2. Hide them on small mobile — they're
     pure decoration, the rocket art still tells the story. */
  .gc-bubble{ display:none }
}

/* Very narrow (< 360px — old SE, Galaxy Fold cover). 1-col is
   the only readable option here; the cards are still reasonable. */
@media (max-width: 359px){
  .game-grid{ grid-template-columns:1fr; gap:10px }
  .game-card{ height:170px }
}

/* ----- Mobile overflow fixes -----
   Game-control grids (plinko/limbo/upgrader/dice/etc.) contain a
   shared bet-amount block whose .bet-presets row (4 quick-bet
   buttons) and .seg-toggle rows (3-5 setting buttons) have an
   intrinsic min-content of ~380px. Inside a CSS Grid track those
   set the column to min-content (380px), which then bleeds past
   a 375px viewport and gets clipped by the parent's overflow:hidden.
   Two-part fix: let the grid items shrink (min-width:0), and let
   the button rows themselves compress (flex:1; min-width:0). */
@media (max-width: 760px){
  .plinko-controls > *,
  .limbo-controls > *,
  .upgrader-controls > *,
  .crash-controls > *,
  .dice-controls > *,
  .slots-controls > *,
  .mines-panel > *,
  .bj-controls > *,
  .control-group{
    min-width:0;
  }
  /* Button rows that won't naturally shrink. flex:1 + min-width:0
     forces equal share of available space with no hard min. */
  .seg-toggle{ min-width:0 }
  .seg-toggle > *{ flex:1 1 0; min-width:0 }
  .bet-presets{ min-width:0 }
  .bet-presets > *{ flex:1 1 0; min-width:0; padding-left:0; padding-right:0 }
  .bet-input{ min-width:0 }
  .bet-input > *{ min-width:0 }
  /* seg-btn has letter-spacing + uppercase; tighten on mobile so
     "NORMAL" / "16" / "500" still fit in their compressed cells. */
  .seg-btn{ padding-left:6px; padding-right:6px; letter-spacing:.06em; font-size:13px }

  /* Game-panel grid items: even with grid-template-columns:1fr, a
     panel whose min-content is 400px+ (because of bet controls) will
     expand the column past viewport. Allow these panels to shrink. */
  .mines-panel,
  .crash-panel,
  .crash-side,
  .plinko-side,
  .blackjack-side,
  .game-shell{
    min-width:0;
  }
}

/* Strengthen prefers-reduced-motion: the existing blocks
   only target specific SVGs. Catch the remaining decoration. */
@media (prefers-reduced-motion: reduce){
  .bg-orb,
  .art-rocket, .art-cards, .art-slots, .art-chest,
  .art-dice, .art-mine, .rk-flame-grp,
  .gc-bubble, .balance::before, .bcoin-icon,
  .online-dot, .section-emoji, .hero-shine{
    animation:none !important;
  }
}

/* ============================================================
   CASES — new diceblox-style scaffold (overrides + additions for
   the v2 cases route). Uses the existing .case-card / .case-item /
   .cig-* / rarity-* styles from the legacy block above; this section
   adds the catalog/open view toggle, the back-pill, count pills, the
   per-case open header, and the image-based item rendering.
============================================================ */

/* View toggle on the section level. Catalog mode shows the grid +
   hides the open panel; open mode does the opposite. Stats row sits
   below in both modes (always visible). */
section[data-route='cases'][data-cs-view='catalog'] .cs-open-view{ display:none }
section[data-route='cases'][data-cs-view='open']    .cs-catalog-view{ display:none }
/* Tab toggle on the section. Three states:
     'single'        → catalog grid + opener (existing)
     'battles'       → battles lobby
     'create-battle' → bloxflip-style create page (NOT a modal — own pane)
   Each state shows exactly one of the three panes and hides the other two. */
section[data-route='cases'][data-cs-tab='battles'] .cs-catalog-view,
section[data-route='cases'][data-cs-tab='battles'] .cs-open-view,
section[data-route='cases'][data-cs-tab='battles'] .cs-create-view{ display:none }
section[data-route='cases'][data-cs-tab='single'] .cs-battles-view,
section[data-route='cases'][data-cs-tab='single'] .cs-create-view{ display:none }
section[data-route='cases'][data-cs-tab='create-battle'] .cs-catalog-view,
section[data-route='cases'][data-cs-tab='create-battle'] .cs-open-view,
section[data-route='cases'][data-cs-tab='create-battle'] .cs-battles-view,
section[data-route='cases'][data-cs-tab='create-battle'] .cs-watch-view,
section[data-route='cases'][data-cs-tab='create-battle'] .cs-tabs-strip{ display:none }
/* Watch state hides everything else (catalog/open/lobby/create+strip)
   and reveals only the live-battle stage. */
section[data-route='cases'][data-cs-tab='watch-battle'] .cs-catalog-view,
section[data-route='cases'][data-cs-tab='watch-battle'] .cs-open-view,
section[data-route='cases'][data-cs-tab='watch-battle'] .cs-battles-view,
section[data-route='cases'][data-cs-tab='watch-battle'] .cs-create-view,
section[data-route='cases'][data-cs-tab='watch-battle'] .cs-tabs-strip{ display:none }
section[data-route='cases']:not([data-cs-tab='watch-battle']) .cs-watch-view{ display:none }

/* Loading curtain — openWatch() sets data-cs-watch-loading="1" before
   the new battle's fetch lands and clears it once renderWatchView has
   painted fresh content. Hides the entire watch-view subtree in the
   gap so the user never sees a flash of the previous battle's chrome
   (title pill, pot, finale, columns). visibility (not display) keeps
   the layout sized so the transition in doesn't reflow. */
section[data-route='cases'][data-cs-watch-loading='1'] .cs-watch-view{
  visibility:hidden;
}

/* ---- Tabs strip — modern flat-tab style: no surrounding box, no
   gradient fill on the active state; clean rounded-rect tab pills
   separated only by their hover/active state. Both tabs read as
   peer surfaces instead of one being a "cut shape" inside a
   container. ---- */
.cs-tabs-strip{
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px; flex-wrap:wrap;
}
.cs-tabs{
  display:inline-flex; gap:8px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
  flex:1; min-width:0; flex-wrap:wrap;
}
.cs-tab{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 18px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(11,15,31,.55);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(219,234,254,.65);
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
  transition:
    background .22s var(--ease-smooth),
    color .22s var(--ease-smooth),
    border-color .22s var(--ease-smooth),
    transform .18s var(--ease-bounce);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 2px 6px rgba(0,0,0,.25);
}
.cs-tab:hover{
  color:#fff;
  border-color: rgba(96,165,250,.32);
  transform: translateY(-1px);
}
.cs-tab.active{
  background: linear-gradient(180deg, #3B82F6, #1D4ED8);
  border-color: rgba(96,165,250,.55);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 4px 14px rgba(59,130,246,.45);
}
.cs-tab-icon{
  width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center;
}
.cs-tab-icon svg{ width:100%; height:100% }
.cs-tab-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:18px; padding:0 6px;
  border-radius:6px;
  background:rgba(34,211,238,.20);
  border:1px solid rgba(34,211,238,.45);
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:10.5px;
  letter-spacing:.02em;
  color:#a5f3fc;
  font-variant-numeric: tabular-nums;
}
.cs-tab.active .cs-tab-count{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.32);
  color:#ffffff;
}
.cs-create-battle{
  height:40px; padding:0 18px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; letter-spacing:.12em;
  text-transform: uppercase;
  flex:0 0 auto;
  border-radius:10px;
}
.cs-create-icon{
  width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center;
}
.cs-create-icon svg{ width:100%; height:100% }

/* ---- Battles lobby toolbar + list ---- */
.cs-battles-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px; flex-wrap:wrap;
}
.cs-battles-filters{ display:inline-flex; gap:8px }
.cs-bf-pill{
  height:36px; padding:0 16px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(11,15,31,.55);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(219,234,254,.65);
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
  transition:
    background .22s var(--ease-smooth),
    color .22s var(--ease-smooth),
    border-color .22s var(--ease-smooth),
    transform .18s var(--ease-bounce);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 2px 6px rgba(0,0,0,.25);
}
.cs-bf-pill:hover{
  color:#fff;
  border-color: rgba(96,165,250,.32);
  transform: translateY(-1px);
}
.cs-bf-pill.active{
  background: linear-gradient(180deg, #3B82F6, #1D4ED8);
  border-color: rgba(96,165,250,.55);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 4px 14px rgba(59,130,246,.45);
}
.cs-battles-meta{
  font-family:'Inter',sans-serif;
  font-weight:600; font-size:11.5px;
  color:var(--text-mute);
  letter-spacing:.08em; text-transform:uppercase;
}

.cs-battles-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px }

/* Empty state for the battles lobby. Sits where the rows would. */
.cs-battles-empty{
  text-align:center;
  padding:54px 18px;
  border:1px dashed rgba(255,255,255,.10);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10));
}
.cs-be-icon{
  width:48px; height:48px; margin:0 auto 14px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(34,211,238,.10);
  border:1px solid rgba(34,211,238,.25);
  color:rgba(34,211,238,.85);
}
.cs-be-icon svg{ width:24px; height:24px }
.cs-be-title{
  font-family:'Sora',sans-serif; font-weight:800; font-size:16px;
  color:#fff; margin-bottom:4px;
}
.cs-be-sub{
  font-family:'Inter',sans-serif; font-weight:500; font-size:12.5px;
  color:var(--text-mute);
  letter-spacing:.02em;
}

/* Battle row — 5-column horizontal layout matching bloxflip's lobby:
   round-count | pot | case strip | players (vs) | action buttons.
   Collapses to stacked on narrow viewports. */
.cs-battle-row{
  display:grid;
  grid-template-columns: 60px 130px 1fr 220px auto;
  align-items:center; gap:18px;
  padding:14px 18px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%),
    rgba(15,8,12,.55);
  border:1px solid rgba(255,255,255,.06);
  transition: background .18s, border-color .18s;
}
.cs-battle-row:hover{
  background:linear-gradient(180deg, rgba(34,211,238,.08), rgba(15,8,12,.55));
  border-color:rgba(34,211,238,.25);
}
.cs-battle-row.cs-br-full{ border-color:rgba(255,255,255,.08); opacity:.92 }

/* Round-count hex badge: shows total rounds (= sum of case quantities). */
.cs-br-rounds{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  position:relative;
}
.cs-br-rcount{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(34,211,238,.20), rgba(122,16,36,.15));
  border:1.5px solid rgba(34,211,238,.45);
  font-family:'Sora',sans-serif; font-weight:900; font-size:18px;
  color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.30);
}
.cs-br-rsub{
  font-family:'Inter',sans-serif; font-weight:700; font-size:9px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-mute);
}

/* Pot pill */
.cs-br-pot{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 14px;
  border-radius:999px;
  background:rgba(255,217,0,.10);
  border:1px solid rgba(255,217,0,.35);
  font-family:'Sora',sans-serif; font-weight:800; font-size:16px;
  color:#ffd900;
  letter-spacing:.02em;
  white-space:nowrap;
}
.cs-br-pot .bc-glyph{ width:16px; height:16px }

/* Case thumbnail strip */
.cs-br-cases{ display:flex; align-items:center; gap:6px; overflow:hidden }
.cs-br-case{
  position:relative; flex:0 0 auto;
  width:54px; height:54px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(34,211,238,.10), rgba(0,0,0,.30));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 3px 8px rgba(0,0,0,.30);
  overflow:hidden;
}
.cs-br-case img{ max-width:80%; max-height:80%; object-fit:contain }
.cs-br-case-qty{
  position:absolute; right:-2px; bottom:-2px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:18px; padding:0 5px;
  border-radius:7px;
  background:linear-gradient(180deg, #ffd900, #c97900);
  border:1.5px solid #0a0f1f;
  font-family:'Sora',sans-serif; font-weight:900; font-size:12px;
  color:#0a0f1f;
  letter-spacing:.02em;
}
.cs-br-case-more{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:54px;
  font-family:'Sora',sans-serif; font-weight:800; font-size:15px;
  color:var(--text-dim);
}

/* Players row: avatars + vs hex between teams.
   .cs-br-empty is the silhouette for unfilled slots. */
.cs-br-players{
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
}
.cs-br-team{ display:flex; align-items:center; gap:5px }
.cs-br-avatar{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(180deg, rgba(34,211,238,.35), rgba(122,16,36,.25));
  border:2px solid rgba(34,211,238,.40);
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:14px;
  color:#fff;
  overflow:hidden;
}
.cs-br-avatar img{ width:100%; height:100%; object-fit:cover }
.cs-br-empty{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.30);
}
.cs-br-empty::before{
  content:""; width:14px; height:14px; border-radius:50%;
  background:rgba(255,255,255,.18);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.20), 0 6px 0 -2px rgba(255,255,255,.18);
  transform:translateY(-2px);
}
.cs-br-vs{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px;
  border-radius:7px;
  background:linear-gradient(180deg, rgba(34,211,238,.30), rgba(122,16,36,.20));
  border:1.5px solid rgba(34,211,238,.45);
  font-family:'Sora',sans-serif; font-weight:900; font-size:9px;
  color:#fff;
  letter-spacing:.06em;
  margin:0 2px;
}

/* Action column: Join/View button + eye spectate */
.cs-br-actions{ display:inline-flex; align-items:center; gap:8px }
.cs-br-join{
  height:38px; padding:0 16px;
  border-radius:10px;
  background:linear-gradient(180deg, #ff7593 0%, #3B82F6 100%);
  border:1px solid rgba(34,211,238,.55);
  color:#fff;
  font-family:'Sora',sans-serif; font-weight:800; font-size:14px;
  letter-spacing:.10em; text-transform:uppercase;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 4px 12px rgba(34,211,238,.30);
  display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.cs-br-join:hover{ filter:brightness(1.08) }
.cs-br-join.cs-br-view{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
  color:var(--text-dim);
  box-shadow:none;
}
.cs-br-join.cs-br-view:hover{ background:rgba(255,255,255,.07); color:#fff }
.cs-br-eye{
  width:38px; height:38px; border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text-dim);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.cs-br-eye svg{ width:16px; height:16px }
.cs-br-eye:hover{ background:rgba(255,255,255,.08); color:#fff }

/* Demo badge for placeholder rows (only visible until backend lands). */
.cs-br-demo{
  position:absolute; top:-7px; left:14px;
  padding:2px 7px; border-radius:999px;
  background:rgba(255,217,0,.85);
  color:#0a0f1f;
  font-family:'Inter',sans-serif; font-weight:800; font-size:8.5px;
  letter-spacing:.16em; text-transform:uppercase;
  box-shadow: 0 4px 8px rgba(0,0,0,.30);
}

/* Mobile: collapse row into stacked cells */
@media (max-width: 880px){
  .cs-battle-row{
    grid-template-columns: 1fr;
    gap:10px;
  }
  .cs-br-players{ justify-content:flex-start }
  .cs-br-actions{ justify-content:stretch }
  .cs-br-join{ flex:1; justify-content:center }
}

/* ============================================================
   CREATE-BATTLE PAGE — bloxflip-style dedicated view (not a modal).
   Lives inside the cases route, shown when data-cs-tab='create-battle'.
============================================================ */

/* Header row: Go-Back pill | title | pot counter */
.cs-create-head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:24px; flex-wrap:wrap;
}
.cs-cb-title-block{
  flex:1; min-width:0;
  font-family:'Sora',sans-serif; font-weight:900;
  font-size:22px; color:#fff;
  letter-spacing:.04em;
}
.cs-cb-pot{
  display:inline-flex; align-items:center; gap:7px;
  height:40px; padding:0 18px;
  border-radius:999px;
  background:rgba(255,217,0,.10);
  border:1.5px solid rgba(255,217,0,.40);
  font-family:'Sora',sans-serif; font-weight:800; font-size:16px;
  color:#ffd900;
  letter-spacing:.02em;
}
.cs-cb-pot .bc-glyph{ width:18px; height:18px }

/* Strip: selected case tiles + the "+ Add case" tile at the end.
   Horizontally scrolls when many cases are queued. */
.cs-cb-strip-wrap{
  display:flex; align-items:stretch; gap:12px;
  margin-bottom:24px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:thin;
}
.cs-cb-strip{
  display:flex; gap:12px;
  align-items:stretch;
}
.cs-cb-tile{
  position:relative; flex:0 0 auto;
  width:200px; min-height:200px;
  border-radius:14px;
  /* Borderless / chrome-less — the pack JPG IS the visual. Lift comes
     from a single soft drop-shadow + a gentle idle float (keyframes
     below). Removed the cyan border + gradient bg that boxed in the
     image. */
  background: transparent;
  border: none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  padding:0;
  box-shadow: none;
  animation: cs-pack-float 4.5s ease-in-out infinite;
  transition: transform .25s cubic-bezier(.32,.72,0,1);
}
.cs-cb-tile:hover{
  transform: translateY(-4px) scale(1.02);
}
@keyframes cs-pack-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce){
  .cs-cb-tile{ animation: none; }
  .cs-cb-tile:hover{ transform: none; }
}
.cs-cb-tile-thumb{
  /* Borderless full-bleed by default — the pack JPG sits edge-to-edge
     and IS the visual. The previous 84x84 thumb was only there for
     packs without card art; now we always render at full card aspect
     and let object-fit handle the smaller-art case. */
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
}
.cs-cb-tile-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
/* For art-less packs the image needs to keep its small intrinsic size,
   not stretch to fill — fall back to contain there. */
.cs-cb-tile:not(.cs-cb-tile-card) .cs-cb-tile-thumb img{
  object-fit: contain;
  padding: 10%;
}
/* Hide the redundant pack-name label when the card art already shows
   the name baked into the image. */
.cs-cb-tile-card .cs-cb-tile-name{ display: none; }
.cs-cb-tile-name{
  font-family:'Inter',sans-serif; font-weight:700; font-size:15px;
  color:#fff; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:100%;
}
.cs-cb-tile-step{
  /* Floats over the bottom of the pack art instead of stacking below
     it. Blurred backdrop so the quantity reads against any pack image
     without a frame around the whole tile. */
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 4px 4px 8px;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.06);
}
.cs-cb-tile-step button{
  width:22px; height:22px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-family:'Sora',sans-serif; font-weight:900; font-size:14px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.cs-cb-tile-step button:hover{ background:rgba(34,211,238,.35) }
.cs-cb-tile-qty{
  min-width:24px; text-align:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:15px;
  color:#fff;
}
.cs-cb-tile-remove{
  position:absolute; top:8px; right:8px;
  width:22px; height:22px;
  border-radius:50%; border:0;
  background:rgba(0,0,0,.55);
  color:rgba(255,255,255,.85);
  cursor:pointer;
  font-size:15px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.cs-cb-tile-remove:hover{ background:rgba(34,211,238,.85); color:#fff }
/* Add-case tile — empty, dashed, hover lifts. */
.cs-cb-add-tile{
  flex:0 0 auto;
  width:200px; min-height:200px;
  border-radius:18px;
  background:rgba(34,211,238,.06);
  border:2px dashed rgba(34,211,238,.45);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  cursor:pointer;
  color:#3B82F6;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
}
.cs-cb-add-tile:hover{
  background:rgba(34,211,238,.12);
  border-color:rgba(34,211,238,.75);
  transform:translateY(-2px);
}
.cs-cb-add-plus{
  width:50px; height:50px; border-radius:50%;
  background:rgba(34,211,238,.18);
  border:1.5px solid rgba(34,211,238,.50);
  display:inline-flex; align-items:center; justify-content:center;
}
.cs-cb-add-plus svg{ width:22px; height:22px }
.cs-cb-add-label{
  font-family:'Inter',sans-serif; font-weight:800; font-size:15px;
  letter-spacing:.10em; text-transform:uppercase;
}

/* Toggles section — Quick Opening + Crazy Mode. */
.cs-cb-toggles{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;
  margin-bottom:24px;
}
@media (max-width:600px){ .cs-cb-toggles{ grid-template-columns:1fr } }
.cs-cb-toggle{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition: all .18s;
}
.cs-cb-toggle:hover{ border-color:rgba(255,255,255,.18) }
/* Mutually-exclusive modes — Shared overrides Terminal + Jackpot. JS
   sets this class on the disabled siblings so users get visual feedback
   that the toggle is currently unavailable, instead of toggling and
   wondering why nothing happened. */
.cs-cb-toggle.cs-cb-toggle-disabled{
  opacity: .42;
  pointer-events: none;
  cursor: not-allowed;
}
/* Switch track — fixed 44x24, box-sizing:border-box so the 1.5px border
   stays inside the declared dimensions (otherwise the visible size grows
   when the border is added). */
.cs-cb-switch{
  flex:0 0 auto;
  box-sizing:border-box;
  width:44px; height:24px; border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.14);
  position:relative;
  transition: background .22s ease, border-color .22s ease;
}
/* Thumb — 18×18, inset 2px from left when off. The transform combines
   translateX (for the slide) AND translateY(-50%) (for vertical center).
   The prior :checked rule overrode the centering by setting only
   translateX — the thumb visibly snapped to the top of the track. */
.cs-cb-switch-thumb{
  position:absolute; left:0; top:50%;
  box-sizing:border-box;
  width:18px; height:18px; border-radius:50%;
  background:#fff;
  transform: translate(2px, -50%);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 2px 5px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.50);
}
.cs-cb-toggle input:checked ~ .cs-cb-switch{
  background:linear-gradient(90deg, #ff7593 0%, #3B82F6 100%);
  border-color:transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(34,211,238,.50);
}
.cs-cb-toggle input:checked ~ .cs-cb-switch .cs-cb-switch-thumb{
  transform: translate(22px, -50%);
}
.cs-cb-toggle-text{ flex:1; min-width:0 }
.cs-cb-toggle-name{
  font-family:'Sora',sans-serif; font-weight:800; font-size:16px;
  color:#fff; letter-spacing:.02em;
  margin-bottom:2px;
}
.cs-cb-toggle-sub{
  font-family:'Inter',sans-serif; font-weight:600; font-size:11.5px;
  color:var(--text-mute);
  letter-spacing:.02em;
}

/* Mode pills + CREATE row — single horizontal row centered, like
   bloxflip's [2-player] [3-player] [4-player] [2v2] [Create Battle 0]. */
.cs-cb-modes-row{
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.cs-cb-mode{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 18px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.10);
  cursor:pointer;
  transition: all .18s cubic-bezier(.34,1.56,.64,1);
}
.cs-cb-mode:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
}
.cs-cb-mode.active{
  background:linear-gradient(180deg, rgba(34,211,238,.30), rgba(122,16,36,.18));
  border-color:rgba(34,211,238,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 6px 18px rgba(34,211,238,.25);
}
.cs-cb-dots{
  display:inline-flex; align-items:center; gap:5px;
}
.cs-cb-dot{
  width:12px; height:12px; border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.15));
  border:1.5px solid rgba(255,255,255,.40);
  flex:0 0 auto;
}
.cs-cb-mode.active .cs-cb-dot{
  background:linear-gradient(180deg, #fff, #ff7593);
  border-color:#fff;
}
.cs-cb-vs{
  font-family:'Inter',sans-serif; font-weight:800; font-size:9px;
  color:var(--text-mute);
  letter-spacing:.10em;
  text-transform:uppercase;
}
.cs-cb-mode.active .cs-cb-vs{ color:rgba(255,255,255,.65) }

/* CREATE button — sits inline at the end of the mode row (bloxflip pattern). */
.cs-cb-create{
  height:48px; padding:0 22px;
  display:inline-flex; align-items:center; gap:7px;
  border-radius:12px;
  font-family:'Sora',sans-serif; font-weight:800; font-size:15px;
  letter-spacing:.10em; text-transform:uppercase;
}
.cs-cb-create:disabled{ opacity:.55; cursor:not-allowed }
.cs-cb-create-sep{ opacity:.50; padding:0 2px }
.cs-cb-create-cost{ font-family:'Sora',sans-serif; font-weight:900 }
.cs-cb-create .bc-glyph{ width:16px; height:16px }

/* Mobile: stack the create-head + scroll the strip + wrap modes */
@media (max-width: 620px){
  .cs-create-head{ gap:10px }
  .cs-cb-title-block{ font-size:17px }
  .cs-cb-pot{ font-size:16px; padding:0 14px; height:34px }
  .cs-cb-tile, .cs-cb-add-tile{ width:160px; min-height:170px }
  .cs-cb-create{ width:100%; justify-content:center; margin-top:6px }
}

/* ============================================================
   WATCH BATTLE — live multiplayer reels.
   Layout: title row + case strip + parallel player columns. Each
   column has a head (avatar + name + running total), a small
   horizontal reel that scrolls round-by-round, and a results strip.
============================================================ */
.cs-watch-status{
  display:inline-block; margin-left:10px;
  font-family:'Inter',sans-serif;
  font-weight:700; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-mute);
}
.cs-watch-cases{
  display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;
}
.cs-watch-cases .cs-br-case{
  width:46px; height:46px;
}

/* Parallel player columns — count is set via inline style on the
   element to match the battle's slot count. */
.cs-watch-stage{
  display:grid;
  grid-template-columns: repeat(var(--cs-watch-cols, 2), minmax(0, 1fr));
  gap:12px;
  margin-bottom:18px;
}
@media (max-width: 760px){
  .cs-watch-stage{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 480px){
  .cs-watch-stage{ grid-template-columns: 1fr }
}
.cs-wp-col{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(15,8,12,.55), rgba(0,0,0,.30));
  border:1.5px solid rgba(34,211,238,.20);
  border-radius:16px;
  overflow:hidden;
  transition: border-color .3s, box-shadow .3s, opacity .3s;
}
.cs-wp-col.cs-wp-empty{ border-color:rgba(255,255,255,.08); opacity:.6 }
.cs-wp-col.cs-wp-winner{
  border-color:#28c76f;
  box-shadow:0 0 24px rgba(40,199,111,.45);
}
.cs-wp-col.cs-wp-loser{ opacity:.55 }
.cs-wp-col.cs-wp-team-0{ border-left:4px solid rgba(60,180,255,.55) }
.cs-wp-col.cs-wp-team-1{ border-left:4px solid rgba(34,211,238,.65) }
.cs-wp-head{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px;
  background:rgba(34,211,238,.08);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cs-wp-avatar{
  width:34px; height:34px; flex:0 0 auto; border-radius:50%;
  background:linear-gradient(180deg, rgba(34,211,238,.40), rgba(122,16,36,.30));
  border:2px solid rgba(34,211,238,.55);
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:16px;
  color:#fff; overflow:hidden;
}
.cs-wp-avatar img{ width:100%; height:100%; object-fit:cover }
.cs-wp-avatar.cs-wp-avatar-empty{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
}
.cs-wp-avatar.cs-wp-avatar-empty::before{
  content:""; width:14px; height:14px; border-radius:50%;
  background:rgba(255,255,255,.20);
  box-shadow: 0 6px 0 -2px rgba(255,255,255,.20);
}
.cs-wp-name{
  flex:1; min-width:0;
  font-family:'Inter',sans-serif; font-weight:700; font-size:15px;
  color:#fff;
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}
.cs-wp-total{
  display:inline-flex; align-items:center; gap:4px;
  font-family:'Sora',sans-serif; font-weight:900; font-size:16px;
  color:#ffd900;
  letter-spacing:.02em;
}
.cs-wp-total .bc-glyph{ width:14px; height:14px }
.cs-wp-reel-frame{
  height:120px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.30));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cs-wp-payline{
  position:absolute; left:0; right:0; top:50%;
  height:2px; transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, #ffd900 50%, transparent);
  box-shadow:0 0 10px rgba(255,217,0,.55);
  z-index:2;
}
.cs-wp-reel{
  display:flex; align-items:center;
  height:100%;
  padding:0 50%;
  transform: translateX(0);
}
.cs-wp-reel.cs-wp-spinning{
  transition: transform 2.5s cubic-bezier(.07,.7,.18,1);
}
.cs-wp-reel-item{
  flex:0 0 92px; width:92px; height:92px;
  margin:0 4px;
  border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.30));
  border:1.5px solid rgba(255,255,255,.10);
}
.cs-wp-reel-item img{
  width:48px; height:48px; object-fit:contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.cs-wp-reel-item-mult{
  font-family:'Sora',sans-serif; font-weight:800; font-size:13px;
  color:#fff; letter-spacing:.02em;
}
/* Past-pulls strip below each player's reel — every locked-in result
   appears here. Color tints by rarity (reuses .rarity-* hue logic). */
.cs-wp-results{
  display:flex; flex-wrap:wrap; gap:3px;
  padding:8px 10px 10px;
  min-height:34px;
}
.cs-wp-result-pill{
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 7px;
  border-radius:7px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  font-family:'Sora',sans-serif; font-weight:800; font-size:12px;
  color:#fff;
  letter-spacing:.02em;
}
.cs-wp-result-pill.rarity-rare       { background:rgba(34,211,238,.18); border-color:rgba(34,211,238,.35) }
.cs-wp-result-pill.rarity-epic       { background:rgba(34,211,238,.30); border-color:rgba(34,211,238,.50) }
.cs-wp-result-pill.rarity-legendary  { background:rgba(255,217,0,.22); border-color:rgba(255,217,0,.50); color:#ffe6a0 }
.cs-wp-result-pill.rarity-mythic     {
  background:linear-gradient(135deg, rgba(34,211,238,.55), rgba(122,16,36,.50));
  border-color:#ff7593; color:#fff;
  box-shadow: 0 0 8px rgba(34,211,238,.45);
}

/* Waiting-state notice */
.cs-watch-waiting{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px; margin-bottom:18px;
  border-radius:14px;
  background:rgba(255,217,0,.06);
  border:1px solid rgba(255,217,0,.25);
}
.cs-ww-text{
  font-family:'Inter',sans-serif; font-weight:700; font-size:15px;
  color:#ffd900; letter-spacing:.04em;
}
.cs-watch-cancel{
  height:34px; padding:0 18px;
  font-size:13px; letter-spacing:.16em;
}

/* Winner banner */
.cs-watch-result{
  text-align:center;
  padding:18px 16px;
  border-radius:14px;
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(40,199,111,.22), transparent 70%),
    linear-gradient(180deg, rgba(40,199,111,.10), rgba(15,8,12,.55));
  border:1.5px solid rgba(40,199,111,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(40,199,111,.20);
}
.cs-wr-title{
  font-family:'Sora',sans-serif; font-weight:900;
  font-size:24px; letter-spacing:.10em; text-transform:uppercase;
  background:linear-gradient(180deg, #aef5cd 0%, #28c76f 55%, #066d35 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 0 14px rgba(40,199,111,.55));
  margin-bottom:4px;
}
.cs-wr-sub{
  font-family:'Inter',sans-serif; font-weight:700; font-size:15px;
  color:#fff;
  letter-spacing:.04em;
}

/* ============================================================
   CASE PICKER MODAL — opens from "+ Add case" tile.
   Slim modal with a grid of cases; tap to add, modal stays open.
============================================================ */
.modal-cs-picker{
  max-width:640px;
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(34,211,238,.16), transparent 65%),
    linear-gradient(180deg, #14060c 0%, #08040a 100%);
  border:1px solid rgba(34,211,238,.25);
  padding:30px 28px 22px;
}
.cs-picker-head{ text-align:center; margin-bottom:18px }
.cs-picker-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
  max-height:420px; overflow-y:auto;
  padding:6px;
  margin-bottom:14px;
  border-radius:12px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.05);
}
.cs-picker-tile{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1.5px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition: all .18s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
.cs-picker-tile:hover{
  background:rgba(34,211,238,.10);
  border-color:rgba(34,211,238,.45);
  transform:translateY(-2px);
}
.cs-picker-tile-thumb{
  width:60px; height:60px;
  display:flex; align-items:center; justify-content:center;
}
.cs-picker-tile-thumb img{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)) }
.cs-picker-tile-name{
  font-family:'Inter',sans-serif; font-weight:700; font-size:11.5px;
  color:#fff; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:100%;
}
.cs-picker-tile-price{
  font-family:'Sora',sans-serif; font-weight:800; font-size:13px;
  color:#ffd900;
  display:inline-flex; align-items:center; gap:3px;
}
.cs-picker-tile-price .bc-glyph{ width:14px; height:14px }
.cs-picker-tile-badge{
  position:absolute; top:6px; right:6px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:9px;
  background:linear-gradient(180deg, #ff7593, #3B82F6);
  color:#fff;
  font-family:'Sora',sans-serif; font-weight:900; font-size:12px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px rgba(34,211,238,.40);
}
.cs-picker-foot{
  display:flex; justify-content:center;
}
.cs-picker-done{ min-width:200px; height:48px; font-size:15px; letter-spacing:.14em }
@media (max-width:520px){
  .cs-picker-done{ width:100% }
}

/* Catalog empty state */
.cs-catalog-empty{
  grid-column:1/-1;
  text-align:center;
  font-family:'Inter',sans-serif;
  font-weight:600; font-size:16px;
  color:var(--text-dim);
  padding:48px 16px;
  border:1px dashed rgba(255,255,255,.10);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10));
}

/* Catalog card: image-based item preview row at the top */
.case-card .cc-preview-row{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; height:100%;
}
.case-card .cc-preview-item{
  width:48px; height:48px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  border:1.5px solid rgba(255,255,255,.20);
  box-shadow:0 4px 10px rgba(0,0,0,.40);
}
.case-card .cc-preview-item:nth-child(2){
  width:62px; height:62px;
  z-index:2;
  transform:translateY(-4px);
  box-shadow:0 6px 16px rgba(0,0,0,.50), 0 0 18px var(--case-glow, rgba(34,211,238,.35));
}
.case-card .cc-preview-img{
  max-width:80%; max-height:80%;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
}

/* Open view header — back arrow only; pack art + name move into
   the centered hero below. */
.cs-open-head{
  display:flex; align-items:center; gap:14px; margin-bottom:10px;
}
.cs-back-pill{
  display:inline-flex; align-items:center; gap:10px;
  height:36px; padding:0 4px;
  background: transparent;
  border: none;
  color:#ffffff;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:18px; letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition: transform .18s var(--ease-smooth), opacity .18s var(--ease-smooth);
}
.cs-back-pill.cs-back-icon-only{ padding: 0; gap: 0; }

/* Hero: case art centered above the reel + name below it. */
.cs-hero{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  margin: 4px 0 18px;
}
.cs-hero-img{
  display:block;
  width:auto;
  height:160px;
  max-width: 240px;
  object-fit:contain;
  filter:
    drop-shadow(0 12px 28px rgba(0,0,0,.55))
    drop-shadow(0 0 24px rgba(59,130,246,.32));
  animation: csHeroBob 4.6s ease-in-out infinite;
}
.cs-hero-name{
  margin:0;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:24px;
  letter-spacing:-.01em;
  color:#ffffff;
}
@keyframes csHeroBob{
  0%,100%{ transform: translateY(0) rotate(0) }
  50%   { transform: translateY(-6px) rotate(.5deg) }
}
@media (prefers-reduced-motion: reduce){
  .cs-hero-img{ animation: none }
}
@media (max-width: 600px){
  .cs-hero-img{ height: 120px; max-width: 180px; }
  .cs-hero-name{ font-size: 20px }
}
.cs-back-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(219,234,254,.78);
  transition: background .18s var(--ease-smooth), color .18s var(--ease-smooth), border-color .18s var(--ease-smooth);
}
.cs-back-pill:hover .cs-back-arrow{
  background: rgba(96,165,250,.16);
  border-color: rgba(96,165,250,.45);
  color:#fff;
}
.cs-back-pill:hover{ transform: translateX(-2px); }
.cs-open-name{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:18px;
  color:#ffffff; letter-spacing:.04em;
  text-transform:uppercase;
}

/* Controls strip below the reel — count pills, price chip, Open CTA,
   fast toggle, Demo Spin. Single row that wraps on narrow viewports. */
.cs-controls{
  display:flex; align-items:center; gap:10px;
  margin:20px 0 10px;
  flex-wrap:wrap;
}
.cs-count-pills{
  display:inline-flex; gap:0;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
}
.cs-count-pill{
  height:44px; width:44px;
  padding:0;
  border-radius:10px;
  margin-right:6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(11,15,31,.55);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(219,234,254,.65);
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:16px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:
    background .22s var(--ease-smooth),
    color .22s var(--ease-smooth),
    border-color .22s var(--ease-smooth),
    transform .18s var(--ease-bounce);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 2px 6px rgba(0,0,0,.25);
}
.cs-count-pill:last-child{ margin-right:0 }
.cs-count-pill:hover{
  color:#fff;
  border-color: rgba(96,165,250,.32);
  transform: translateY(-1px);
}
.cs-count-pill.active{
  background:linear-gradient(180deg, #3B82F6, #1D4ED8);
  border-color: rgba(96,165,250,.55);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 4px 14px rgba(59,130,246,.45);
}
.cs-cost-chip{
  display:inline-flex; align-items:center; gap:9px;
  height:44px; padding:0 18px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(11,15,31,.55);
  border:1px solid rgba(96,165,250,.32);
  color:#ffffff;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:16px;
  font-variant-numeric: tabular-nums;
  letter-spacing:-.01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 8px rgba(0,0,0,.30);
}
.cs-cost-chip .bc-glyph{
  width:26px; height:26px;
  filter: drop-shadow(0 0 6px rgba(34,211,238,.80)) drop-shadow(0 0 12px rgba(59,130,246,.45));
}
.cs-open-cta{
  flex:1; min-width:180px; height:44px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:0 22px;
  border-radius:10px;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:16px;
  letter-spacing:.04em;
  text-transform:none;
}
.cs-cta-label{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800;
  letter-spacing:.02em;
}
.cs-fast-toggle{
  flex-shrink:0;
  width:44px; height:44px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(11,15,31,.55);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(219,234,254,.70);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:
    background .22s var(--ease-smooth),
    color .22s var(--ease-smooth),
    border-color .22s var(--ease-smooth),
    transform .18s var(--ease-bounce);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 2px 6px rgba(0,0,0,.25);
}
.cs-fast-toggle:hover{
  color:#fbbf24;
  border-color: rgba(251,191,36,.40);
  transform: translateY(-1px);
}
.cs-fast-toggle[aria-pressed="true"]{
  background:linear-gradient(180deg, rgba(251,191,36,.22), rgba(217,119,6,.12));
  border-color: rgba(251,191,36,.55);
  color:#fde68a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 14px rgba(251,191,36,.30);
}
.cs-demo-btn{
  height:44px; padding:0 18px;
  border-radius:10px;
  background: transparent;
  border:1px solid rgba(255,255,255,.10);
  color:rgba(219,234,254,.65);
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:700; font-size:15px;
  letter-spacing:.01em;
  cursor:pointer;
  transition:
    background .22s var(--ease-smooth),
    color .22s var(--ease-smooth),
    border-color .22s var(--ease-smooth);
}
.cs-demo-btn:hover{
  color:#fff;
  border-color: rgba(96,165,250,.40);
  background: rgba(96,165,250,.06);
}

/* Item-pool grid uses image instead of text icon */
.cig-img{
  max-width:80%; max-height:80%;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.cig-mult{
  font-family:'Sora',sans-serif; font-weight:800; font-size:15px;
  color:#fff; letter-spacing:.04em;
}

/* Reel item: image instead of text icon (matches the catalog preview style) */
.ci-img{
  max-width:80%; max-height:80%;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
}

/* Game-header art — basic gold-chest accent */
.gh-svg-cases .gh-spark{ animation:ghSparkPulse 2s ease-in-out infinite }
@keyframes ghSparkPulse{
  0%,100%{ opacity:.6; transform:scale(1) }
  50%   { opacity:1;  transform:scale(1.4) }
}

/* Mobile: collapse the open-head and controls into a vertical stack */
@media (max-width: 600px){
  .cs-open-head{ gap:10px }
  .cs-open-name{ font-size:18px }
  .cs-open-price{ font-size:16px; padding:5px 11px }
  .cs-controls{ flex-direction:column; align-items:stretch }
  .cs-count-pills{ justify-content:space-between }
  .cs-count-pill{ flex:1 }
  .cs-open-cta{ width:100% }
}

/* Home-grid cases card: gems bob like the other game cards' centerpieces */
.gc-scene-cases .gc-cs-gems{
  transform-origin: 112px 80px;
  animation: gcCsBob 3.6s ease-in-out infinite;
}
@keyframes gcCsBob{
  0%,100%{ transform: translateY(0) }
  50%   { transform: translateY(-6px) }
}

/* ============================================================
   MODERN MODAL CHROME — late-cascade overrides for:
   - .modal-close   → modern "Back" pill at top-left (was an X at top-right)

   All selectors use .modal-backdrop .X for (0,2,0) specificity so they
   win over the multiple .X (0,1,0) definitions earlier in the file
   without needing to surgery-edit each one.
============================================================ */

/* ---- Back pill (replaces every modal's "×" close button) ----
   Markup unchanged: <button class="modal-close">×</button>. We hide
   the literal "×" with font-size:0, then render an SVG arrow via
   ::before and the word "Close" via ::after. Position moves from
   top-right → top-left (matches the "back" mental model the user
   asked for) and the chip slides 1.5px left on hover for a subtle
   "pull-to-go-back" cue. */
.modal-backdrop .modal-close{
  position:absolute;
  top:14px; left:14px; right:auto; bottom:auto;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:32px; width:auto; min-width:32px; max-width:none;
  padding:0 13px 0 10px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.78);
  font-size:0; line-height:0;
  cursor:pointer;
  transform:none;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  transition:
    background .18s cubic-bezier(.34,1.56,.64,1),
    border-color .18s cubic-bezier(.34,1.56,.64,1),
    color .18s ease,
    transform .18s cubic-bezier(.34,1.56,.64,1),
    box-shadow .18s ease;
  z-index:10;
}
.modal-backdrop .modal-close::before{
  content:"" !important;
  position:static; inset:auto;
  display:block;
  width:13px !important; height:13px !important;
  margin:0 !important; padding:0 !important;
  border:0 !important;
  background:currentColor !important;
  transform:none !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5M12 19l-7-7 7-7'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5M12 19l-7-7 7-7'/></svg>") center/contain no-repeat;
  opacity:1 !important;
}
.modal-backdrop .modal-close::after{
  content:"Close" !important;
  position:static; inset:auto;
  display:block;
  font-family:'Inter',sans-serif !important;
  font-size:10.5px !important; font-weight:800 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase;
  line-height:1 !important;
  color:currentColor !important;
  background:transparent !important;
  border:0 !important;
  margin:0 !important; padding:0 !important;
  width:auto !important; height:auto !important;
  transform:none !important;
  opacity:1 !important;
}
.modal-backdrop .modal-close:hover{
  background:rgba(59,130,246, .14);
  border-color:rgba(59,130,246, .50);
  color:#fff;
  transform:translateX(-1.5px);
  box-shadow:
    0 4px 14px rgba(0,0,0, .35),
    0 0 0 1px rgba(59,130,246, .25);
}
.modal-backdrop .modal-close:active{
  transform:translateX(-2.5px) scale(.97);
}
@media (prefers-reduced-motion: reduce){
  .modal-backdrop .modal-close{ transition:none }
  .modal-backdrop .modal-close:hover{ transform:none }
  .modal-backdrop .modal-close:active{ transform:none }
}

/* ============================================================
   UI PASS 2 — banner carousel, sidebar revamp, modal chrome,
   hero polish, button refinements. Uses Pass-1 tokens
   (--ease-smooth/bounce/snap, --shadow-card-rest/lift/glass).
   Lives at the end so cascade beats earlier arcade-y rules.
============================================================ */

/* ---------- BANNER CAROUSEL ---------- */
.home-banners{
  position:relative;
  margin: 0 0 20px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-card-rest);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid rgba(255,255,255,.06);
}
.hb-track{
  position: relative;
  height: 220px;
}
.hb-slide{
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: center;
  padding: 26px 32px;
  opacity: 0;
  transform: translateX(24px);
  pointer-events: none;
  transition:
    opacity .55s var(--ease-smooth),
    transform .55s var(--ease-smooth);
  border-radius: inherit;
}
.hb-slide.is-active{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
/* Per-banner gradient backgrounds, set on the slide itself so we can
   reuse the same .hb-* layout/typography for every slide. */
.hb-slide-welcome{
  background:
    radial-gradient(ellipse at 85% 10%, rgba(34,211,238,.35), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(154,29,54,.35), transparent 55%),
    linear-gradient(135deg, #2a0d17 0%, #18070d 65%, #0a0408 100%);
}
.hb-slide-deposit{
  background:
    radial-gradient(ellipse at 85% 10%, rgba(247,147,26,.32), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(98,126,234,.28), transparent 55%),
    linear-gradient(135deg, #1c1304 0%, #0d0e1b 65%, #060710 100%);
}
.hb-slide-discord{
  background:
    radial-gradient(ellipse at 85% 10%, rgba(88,101,242,.38), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(160,80,255,.28), transparent 55%),
    linear-gradient(135deg, #100e2a 0%, #0a0820 65%, #050414 100%);
}
.hb-copy{
  display: flex; flex-direction: column;
  gap: 10px;
  max-width: 520px;
}
.hb-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-family: 'Sora', sans-serif;
  font-size: 10.5px; font-weight: 800; letter-spacing: .22em;
  color: rgba(255,255,255,.78);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-glass);
}
.hb-eyebrow-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
  animation: hbDotPulse 1.6s ease-in-out infinite;
}
@keyframes hbDotPulse{
  0%,100%{ opacity: 1;  transform: scale(1); }
  50%   { opacity: .55; transform: scale(1.35); }
}
.hb-title{
  font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: 34px; line-height: 1.05;
  letter-spacing: -.5px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.hb-title-accent{
  background: linear-gradient(135deg, #dbeafe 0%, var(--pink-soft) 50%, var(--pink) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hb-sub{
  font-size: 13.5px; line-height: 1.5;
  color: rgba(255,255,255,.72);
  max-width: 460px;
  font-weight: 500;
}
.hb-cta-row{
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 6px;
}
.hb-cta.btn{
  padding: 11px 20px;
  font-size: 14px;
  letter-spacing: .10em;
}
.hb-art{
  position: relative;
  height: 100%;
  pointer-events: none;
}
/* Decorative art per-banner — pure CSS for now (replace later with
   user-supplied PNGs by hooking img tags into .hb-art-*). */
.hb-art-welcome::before,
.hb-art-deposit::before,
.hb-art-discord::before{
  content: "";
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .9;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.55));
  animation: hbFloat 5.5s ease-in-out infinite;
}
@keyframes hbFloat{
  0%,100%{ transform: translateY(0) rotate(0) }
  50%   { transform: translateY(-10px) rotate(-2deg) }
}
.hb-art-welcome::before{
  background-image:
    radial-gradient(circle at 60% 40%, rgba(34,211,238,.85) 0%, rgba(59,130,246,.55) 35%, transparent 70%),
    radial-gradient(circle at 35% 65%, rgba(255,217,128,.6) 0%, rgba(34,211,238,.0) 45%);
}
.hb-art-deposit::before{
  background-image:
    radial-gradient(circle at 50% 50%, rgba(247,147,26,.7) 0%, transparent 55%),
    radial-gradient(circle at 70% 30%, rgba(98,126,234,.55) 0%, transparent 50%);
}
.hb-art-discord::before{
  background-image:
    radial-gradient(circle at 50% 50%, rgba(88,101,242,.7) 0%, transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(180,100,255,.55) 0%, transparent 50%);
}
.hb-dots{
  position: absolute; left: 50%; bottom: 14px;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 4;
}
.hb-dot{
  width: 22px; height: 6px; border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.22);
  cursor: pointer;
  transition: background .3s var(--ease-smooth), width .35s var(--ease-bounce);
  padding: 0;
}
.hb-dot:hover{ background: rgba(255,255,255,.4); }
.hb-dot.is-active{
  background: linear-gradient(90deg, var(--pink), var(--pink-soft));
  width: 36px;
  box-shadow: 0 0 14px var(--pink-glow);
}
@media (max-width: 720px){
  .hb-track{ height: 260px; }
  .hb-slide{
    grid-template-columns: 1fr;
    padding: 22px;
  }
  .hb-art{ display: none; }
  .hb-title{ font-size: 26px; }
  .hb-sub{ font-size: 12.5px; }
  .home-banners{ border-radius: 18px; }
}

/* ---------- SIDEBAR REVAMP ---------- */
/* Refines the existing sidebar look — glassier section blocks, calmer
   hover, modern link rows. Beats the earlier arcade-spring rules via
   cascade order (this section is last in the file). */
.sidebar{
  padding: 22px 12px;
  background:
    radial-gradient(ellipse 320px 200px at 50% 0%, rgba(59,130,246,.12), transparent 60%),
    linear-gradient(180deg, rgba(12,6,10,.78), rgba(6,3,6,.85));
}
.sb-section{
  padding: 10px 6px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: var(--shadow-glass);
}
.sb-section + .sb-section{ margin-top: 0; }
.sb-title{
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 9.5px; letter-spacing: .26em;
  color: rgba(255,255,255,.45);
  padding: 4px 10px 10px;
  margin: 0;
  text-transform: uppercase;
}
.sb-link{
  padding: 9px 12px;
  border-radius: 10px;
  font-weight: 600; font-size: 13.5px;
  color: rgba(255,255,255,.72);
  margin: 1px 2px;
  letter-spacing: .01em;
  transition:
    background .25s var(--ease-smooth),
    color .25s var(--ease-smooth),
    transform .35s var(--ease-bounce),
    box-shadow .25s var(--ease-smooth);
}
.sb-link::after{ display: none; }
.sb-link:hover{
  background: rgba(255,255,255,.06);
  color: #fff;
  transform: translateX(3px);
  box-shadow: none;
}
.sb-link.active{
  background: linear-gradient(90deg, rgba(59,130,246,.20), rgba(59,130,246,.04) 70%, transparent);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(34,211,238,.28),
    var(--shadow-glass);
}
.sb-link.active::before{
  content: "";
  position: absolute; left: -2px; top: 18%; bottom: 18%; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--pink-soft), var(--pink));
  box-shadow: 0 0 10px var(--pink-glow);
}
.sb-link.active::after{ display: none; }
.sb-link.active .sb-icon{
  animation: none;
  color: var(--pink-soft);
  filter: drop-shadow(0 0 8px var(--pink-glow));
}
.sb-icon{
  width: 20px; height: 20px;
}
.sb-badge{
  font-size: 8.5px; padding: 2.5px 7px;
  letter-spacing: .08em;
  font-weight: 800;
  text-transform: uppercase;
}
.sb-hot{
  color: #ffd5db;
  background: linear-gradient(135deg, rgba(59,130,246,.35), rgba(34,211,238,.18));
  border-color: rgba(34,211,238,.45);
  animation: none;
}
.sb-new{
  color: #c8ffd8;
  background: linear-gradient(135deg, rgba(40,199,111,.30), rgba(40,199,111,.10));
  border-color: rgba(40,199,111,.45);
  animation: none;
}
/* The little crypto-rate tile at the bottom — pull it into the Pass-2
   glass language. */
.sb-rate-box{
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow-glass);
  border-radius: 14px;
  padding: 12px 14px;
}
.rate-row{
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.rate-row span{
  font-family: 'Sora', sans-serif;
  font-weight: 700; letter-spacing: .08em;
  color: rgba(255,255,255,.5);
  font-size: 10.5px;
}
.rate-row strong{
  font-family: 'Sora', sans-serif;
  font-weight: 700; font-size: 12.5px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ---------- MODAL CHROME ---------- */
.modal-backdrop{
  background: rgba(4, 2, 6, .72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.modal{
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.10), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  box-shadow:
    var(--shadow-card-lift),
    0 0 60px rgba(59,130,246, .12);
}
.modal::before{
  /* Tone down the spinning iris border from the arcade pass — make it
     a single, soft static rim so the modal feels calmer. */
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  opacity: .6;
  animation: none;
}
.modal-close{
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-glass);
  transition:
    background .25s var(--ease-smooth),
    transform .35s var(--ease-bounce),
    box-shadow .25s var(--ease-smooth);
}
.modal-close:hover{
  background: rgba(59,130,246,.30);
  border-color: rgba(34,211,238,.45);
  transform: rotate(90deg) scale(1.05);
  box-shadow:
    var(--shadow-card-rest),
    0 0 18px var(--pink-glow);
}
.modal-title{
  background: linear-gradient(135deg, #fff 0%, #dbeafe 70%, var(--pink-soft) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
}

/* ---------- HERO POLISH ---------- */
/* Calmer hero — keep the floating hat-coins art, tone down the
   aurora sheen so it doesn't compete with the new banner, refine
   the balance card with Pass-1 depth. */
.hero{
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 88% 8%, rgba(59,130,246,.20), transparent 55%),
    radial-gradient(ellipse at 8% 92%, rgba(154,29,54,.20), transparent 55%),
    linear-gradient(135deg, var(--surface), var(--bg-2));
  box-shadow:
    var(--shadow-card-rest),
    0 0 60px rgba(59,130,246,.10);
  border: 1px solid rgba(255,255,255,.05);
}
.hero::after{
  /* Slow aurora kept but at half-strength — feels premium without
     being twitchy. */
  background: linear-gradient(110deg,
    transparent 38%, rgba(34,211,238,.10) 48%, rgba(255,217,128,.06) 52%, transparent 62%);
  background-size: 250% 100%;
  animation: heroAurora 14s linear infinite;
  mix-blend-mode: screen;
  opacity: .85;
}
.hero-title{
  text-shadow: 0 0 24px rgba(34,211,238,.25), 0 0 48px rgba(14,116,144,.12);
  letter-spacing: -1px;
}
.hero-cta{
  gap: 12px;
  margin-bottom: 24px;
}
.hero-balance{
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    rgba(20, 10, 14, .55);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow:
    var(--shadow-card-rest),
    0 0 32px rgba(59,130,246,.10);
}
.hero-balance:hover{
  transform: translateY(-3px);
  box-shadow:
    var(--shadow-card-lift),
    0 0 48px rgba(59,130,246,.18);
}
/* Re-stack the hero on tablet/mobile so the floating art doesn't
   crowd the headline. Limited stack art simply hides at narrow widths. */
@media (max-width: 980px){
  .hero{ padding: 28px; gap: 20px; }
  .hero-title{ font-size: clamp(28px, 6vw, 44px); }
}
@media (max-width: 720px){
  .hero-art{ display: none; }
}

/* ---------- BUTTON REFINEMENTS ---------- */
/* Calmer, more minimal feel. Smaller corner radius on big CTAs, less
   saturated shadow, springier press, single subtle highlight on hover. */
.btn{
  letter-spacing: .08em;
  border-radius: 12px;
  transition:
    transform .3s var(--ease-bounce),
    box-shadow .3s var(--ease-smooth),
    background .3s var(--ease-smooth),
    filter .15s var(--ease-smooth);
}
.btn:hover{
  transform: translateY(-1px);
}
.btn:active{
  transform: translateY(1px) scale(.97);
  filter: brightness(1.04);
  transition-duration: .1s;
}
.btn::after{
  /* Soft single highlight on hover — replaces the heavier arcade
     radial. Inherits border-radius from the button. */
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 55%);
  opacity: 0;
  transition: opacity .25s var(--ease-smooth);
  z-index: 1;
}
.btn:hover::after{ opacity: .8; }
.btn.big{
  padding: 14px 26px;
  font-size: 15px;
  letter-spacing: .10em;
  border-radius: 14px;
}
.btn-primary{
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--pink) 55%, var(--pink-deep) 100%);
  border: none;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 6px 18px rgba(59,130,246,.40),
    0 0 0 1px rgba(34,211,238,.25);
}
.btn-primary:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.2),
    0 10px 28px rgba(59,130,246,.55),
    0 0 0 1px rgba(34,211,238,.45),
    0 0 32px rgba(59,130,246,.25);
}
.btn-deposit{
  background: linear-gradient(180deg, #ffd060 0%, #f7931a 55%, #b86d0a 100%);
  border: none;
  color: #1a0a00;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.2),
    0 6px 18px rgba(247,147,26,.35),
    0 0 0 1px rgba(255,200,80,.3);
}
.btn-deposit:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.2),
    0 10px 28px rgba(247,147,26,.55),
    0 0 0 1px rgba(255,200,80,.5);
}
.btn-outline{
  background: rgba(255,255,255,.03);
  color: #fff;
  border: 1.5px solid rgba(34,211,238,.35);
  box-shadow: var(--shadow-glass);
}
.btn-outline:hover{
  background: rgba(34,211,238,.10);
  border-color: rgba(34,211,238,.7);
  box-shadow:
    var(--shadow-glass),
    0 0 22px rgba(34,211,238,.30);
}
.btn-ghost{
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-glass);
}
.btn-ghost:hover{
  background: rgba(255,255,255,.07);
  color: #fff;
  border-color: rgba(255,255,255,.16);
}

/* ============================================================
   UI PASS 2 — END
============================================================ */

/* ============================================================
   UI PASS 3 — CRASH route polish (first per-game pass).
   Layers cleanly on the cosmic crash-board: tier-coloured
   recent-multipliers strip, decorative grid + axes inside the
   board, "Current payout" subtitle, glassy bet panel with a
   Manual/Auto tab strip, refined EOS + network row.
============================================================ */

/* ----- Recent multipliers strip (tier-coloured glossy pills). ----- */
.history-bar.history-bar-top{
  padding: 12px 14px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow-glass);
  display: flex; gap: 6px;
  overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: none;
}
.history-bar.history-bar-top::-webkit-scrollbar{ display:none }
/* Crash history chips — unified modern look. Single dark-navy glass
   pill across every tier, with the multiplier color carrying the
   semantic signal (low=red, mid=white, high=green, huge=gold). */
.history-bar .hist-item{
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 10px;
  font-family: 'Inter','SF Pro Display',sans-serif;
  font-weight: 800; font-size: 14px;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(11,15,31,.55);
  border: 1px solid rgba(255,255,255,.07);
  color: #ffffff;
  position: relative;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 8px rgba(0,0,0,.30);
  transition:
    transform .25s var(--ease-bounce),
    border-color .25s var(--ease-smooth),
    box-shadow .25s var(--ease-smooth);
}
.history-bar .hist-item:hover{
  transform: translateY(-2px);
  border-color: rgba(96,165,250,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 14px rgba(0,0,0,.40);
}
/* Tier — color is on the TEXT, not the pill, so the row reads as one
   system and the multiplier value carries the win/loss signal. */
.history-bar .hist-item.low { color: #f87171; }
.history-bar .hist-item.high{ color: #34d399; }
.history-bar .hist-item.huge{
  color: #fbbf24;
  border-color: rgba(251,191,36,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 4px 14px rgba(251,191,36,.22),
    0 0 18px rgba(251,191,36,.18);
}

/* ----- Crash board chrome — calmer rim + axes overlay. ----- */
.crash-board{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    var(--shadow-card-lift),
    0 0 80px rgba(59,130,246,.08);
}
.crash-board::before{
  /* Tone down the iridescent spinning rim from the arcade pass — keep a
     soft static glow so the board still feels framed. */
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  opacity: .65;
  animation: none;
}
.crash-axes{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.35);
  font-variant-numeric: tabular-nums;
}
.crash-axes .cax-y{
  position: absolute; left: 14px; top: 16px; bottom: 18px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: right;
  width: 38px;
}
.crash-axes .cax-y span{
  transition: color .25s var(--ease-smooth);
}
.crash-axes .cax-grid{
  position: absolute; left: 56px; right: 14px; top: 18px; bottom: 18px;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 100% 25%;
  background-repeat: repeat;
  opacity: .55;
}

/* ----- Big multiplier — "CURRENT PAYOUT" subtitle below. ----- */
.crash-multi-sub{
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, 0);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .26em;
  color: rgba(255,255,255,.55);
  pointer-events: none;
  z-index: 8;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,.65);
  transition: color .25s var(--ease-smooth), opacity .25s var(--ease-smooth);
}
.crash-board[data-flying="1"] .crash-multi-sub{ color: rgba(34,211,238,.85); }
.crash-board .crash-multiplier.crashed ~ .crash-multi-sub{ color: rgba(239,68,68,.85); }
.crash-board .crash-multiplier.locked ~ .crash-multi-sub{ color: rgba(40,199,111,.85); }
.crash-board .crash-multiplier.countdown ~ .crash-multi-sub{ opacity: 0; }

/* ----- Bet panel — glass card with Manual/Auto tab head. ----- */
.crash-panel{
  position: relative;
  padding: 14px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow-card-rest);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.cp-panel-head{ margin: 0 0 10px; }
.cp-panel-tabs{
  display: inline-flex; gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.05);
}
.cp-panel-tab{
  font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: 13px;
  letter-spacing: .14em;
  padding: 7px 14px;
  border-radius: 7px;
  background: transparent;
  color: rgba(255,255,255,.55);
  border: none; cursor: pointer;
  transition:
    background .25s var(--ease-smooth),
    color .25s var(--ease-smooth),
    transform .25s var(--ease-bounce);
}
.cp-panel-tab:hover:not(:disabled):not(.is-active){
  color: #fff;
  background: rgba(255,255,255,.04);
}
.cp-panel-tab.is-active{
  background: linear-gradient(180deg, rgba(34,211,238,.30), rgba(59,130,246,.18));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 4px 12px rgba(59,130,246,.30);
}
.cp-panel-tab.is-disabled,
.cp-panel-tab:disabled{
  cursor: not-allowed;
  opacity: .45;
}
.crash-panel .control-group label{
  font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: 12px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}
.crash-panel .bet-input{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 6px 8px 6px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .25s var(--ease-smooth), box-shadow .25s var(--ease-smooth);
}
.crash-panel .bet-input:focus-within{
  border-color: rgba(34,211,238,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(34,211,238,.18);
}
.crash-panel .bet-input button[data-bet-action]{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  transition:
    background .2s var(--ease-smooth),
    color .2s var(--ease-smooth),
    transform .25s var(--ease-bounce);
}
.crash-panel .bet-input button[data-bet-action]:hover{
  background: rgba(34,211,238,.20);
  color: #fff;
  border-color: rgba(34,211,238,.45);
}
.crash-panel .bet-input button[data-bet-action]:active{ transform: scale(.92); }
.crash-panel .crash-bet-btn,
.crash-panel > .btn.big{
  height: 52px;
  font-size: 16px;
  letter-spacing: .16em;
  border-radius: 12px;
  margin-top: 6px;
}

/* ----- EOS block + network status row. ----- */
.crash-eos-row{
  gap: 8px;
}
.crash-eos-block{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    rgba(12,16,34,.55);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: var(--shadow-glass);
}
.ceb-label{ color: rgba(34,211,238,.85); }
.ceb-num{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  color: rgba(255,255,255,.92);
}
.crash-network{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    rgba(12,16,34,.55);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: var(--shadow-glass);
  color: rgba(255,255,255,.78);
}
.crash-network .cn-dot{ background: #28c76f; box-shadow: 0 0 8px #28c76f; }
.crash-network[data-status="down"] .cn-dot{ background:#3B82F6; box-shadow:0 0 8px #3B82F6 }
.crash-network[data-status="waiting"] .cn-dot{ background:#ffc94d; box-shadow:0 0 8px #ffc94d }

/* ----- Phase pill + round badge — match the Pass 2 glass language. ----- */
.crash-phase-pill,
.crash-round-badge{
  background: rgba(8,4,10,.7);
  border-color: rgba(255,255,255,.08);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* ----- Players panel — refined rows, calmer accents. ----- */
.crash-players{
  border-radius: 16px;
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow-card-rest);
}
.crash-players .cp-title{
  font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: 10.5px;
  letter-spacing: .26em;
  color: rgba(255,255,255,.55);
}
.crash-players .cp-count{
  background: rgba(34,211,238,.18);
  border-color: rgba(34,211,238,.35);
  color: #fff;
  font-size: 11.5px;
  padding: 3px 10px;
}
.crash-players .cp-row{
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 7px 10px;
  transition:
    background .25s var(--ease-smooth),
    border-color .25s var(--ease-smooth),
    transform .25s var(--ease-bounce);
}
.crash-players .cp-row:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.crash-players .cp-row.cp-mine{
  background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(34,211,238,.04) 80%);
  border-color: rgba(34,211,238,.40);
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.18);
}
.crash-players .cp-av{
  border: 1.5px solid rgba(255,255,255,.10);
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* ----- Stats row (Your History + Live Feed) — apply Pass 2 glass. ----- */
.stats-row .stats-col{
  border-radius: 16px;
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow-card-rest);
}
.stats-row .stats-title{
  font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: 10.5px;
  letter-spacing: .26em;
  color: rgba(255,255,255,.55);
}

/* ----- Crash-board axes hide once the canvas is actively drawing the
   real curve, so we don't pile decorative grid on top of the real line. ----- */
.crash-board[data-flying="1"] .crash-axes .cax-grid{ opacity: .25; }

@media (max-width: 980px){
  .crash-panel{ padding: 12px; }
  .crash-axes .cax-y span{ font-size: 9.5px; }
}

/* ============================================================
   UI PASS 3 — CRASH — END
============================================================ */

/* ============================================================
   UI PASS 4 — Modern theme overhaul.
   Pivot from red/black to a deep cosmic navy base with electric
   blue + vivid purple accents (Stake / BloxRain inspired). The
   Bloxhit red logo stays untouched as the brand anchor; the rest
   of the site moves to the new palette.

   Strategy: repoint the existing --pink/--pink-soft/--pink-deep
   tokens (used in ~300 rules as cascade aliases) to the new
   blue/purple. Then override literal red rgba/hex in the
   highest-visibility surfaces (body bg, orbs, topbar, sidebar,
   hero, banner, modal, CTAs, panels). Semantic loss/danger
   states stay explicitly red so the UX stays readable.
============================================================ */

:root{
  /* Brand accent — electric blue + vivid purple */
  --pink:        #3b82f6;
  --pink-soft:   #60a5fa;
  --pink-deep:   #1e40af;
  --pink-glow:   rgba(59,130,246,.55);
  --magenta:     #a855f7;
  --berry-dark:  #1e1b4b;

  /* Gold / orange kept for win highlights */
  --gold:        #fbbf24;
  --gold-deep:   #b45309;
  --orange:      #f97316;
  --orange-deep: #c2410c;

  /* Real cyan now (used in scattered alias spots) */
  --cyan:        #06b6d4;

  /* Surface ramp → cosmic navy */
  --bg-0:        #0a0e1a;
  --bg-1:        #0f1428;
  --bg-2:        #0a1024;
  --surface:     #161b35;
  --surface-2:   #1c2245;
  --surface-3:   #252b58;
  --line:        rgba(255,255,255,.07);
  --line-2:      rgba(95,163,255,.18);
  --plum:        #0f172a;
  --plum-deep:   #060912;

  /* Semantics kept (win/loss legibility) */
  --green:       #28c76f;
  --red:         #ef4444;

  --shadow-panel: 0 12px 32px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.45);
  --shadow-glow:  0 0 24px rgba(59,130,246,.55), 0 0 60px rgba(168,85,247,.22);
}

/* ----- Body: cosmic navy aura + blue-tinted grid ----- */
body{
  background:
    radial-gradient(ellipse 1200px 800px at 80% -10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(ellipse 1200px 800px at -10% 110%, rgba(168,85,247,.20), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 50%, rgba(95,163,255,.05), transparent 70%),
    linear-gradient(180deg, #0a0e1a 0%, #0f1428 50%, #0a0e1a 100%);
}
body::before{
  background-image:
    linear-gradient(rgba(95,163,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,163,255,.05) 1px, transparent 1px);
}

/* ----- Drifting background orbs → blue + purple ----- */
.bg-orb-1{
  background: radial-gradient(circle, rgba(59,130,246,.45), transparent 70%);
}
.bg-orb-2{
  background: radial-gradient(circle, rgba(168,85,247,.50), transparent 70%);
}
.bg-orb-3{
  background: radial-gradient(circle, rgba(192,132,252,.18), transparent 70%);
}

/* ----- Topbar: cosmic glass ----- */
.topbar{
  background: linear-gradient(180deg, rgba(14,18,40,.78), rgba(8,12,28,.78));
  border-color: rgba(95,163,255,.10);
}
.topbar::after{
  background: linear-gradient(90deg, transparent 0%, rgba(95,163,255,.45) 50%, transparent 100%);
}

/* ----- Sidebar: navy glass with subtle blue top glow ----- */
.sidebar{
  background:
    radial-gradient(ellipse 320px 200px at 50% 0%, rgba(59,130,246,.12), transparent 60%),
    linear-gradient(180deg, rgba(10,14,26,.82), rgba(6,10,20,.88));
  border-right-color: rgba(95,163,255,.08);
}
.sb-link.active{
  background: linear-gradient(90deg, rgba(59,130,246,.22), rgba(168,85,247,.06) 70%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(95,163,255,.32),
    var(--shadow-glass);
}
.sb-link.active::before{
  background: linear-gradient(180deg, var(--pink-soft), var(--magenta));
  box-shadow: 0 0 10px var(--pink-glow);
}
.sb-link.active .sb-icon{
  color: var(--pink-soft);
  filter: drop-shadow(0 0 8px var(--pink-glow));
}
.sb-link:hover{
  background: rgba(95,163,255,.06);
}
/* HOT and NEW badges — HOT now a warm orange instead of red (so it reads
   "trending" rather than "danger"). NEW stays green. */
.sb-hot{
  color: #ffd9a8;
  background: linear-gradient(135deg, rgba(249,115,22,.30), rgba(251,191,36,.15));
  border-color: rgba(249,115,22,.40);
}
.sb-new{
  color: #c8ffd8;
  background: linear-gradient(135deg, rgba(40,199,111,.30), rgba(40,199,111,.10));
  border-color: rgba(40,199,111,.45);
}
.sb-rate-box{
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border-color: rgba(95,163,255,.10);
}

/* ----- Prices ticker — calmer divider ----- */
.prices-ticker{
  border-bottom-color: rgba(95,163,255,.08);
}

/* ----- Hero: navy aura, no more red glow ----- */
.hero{
  background:
    radial-gradient(ellipse at 88% 8%, rgba(59,130,246,.22), transparent 55%),
    radial-gradient(ellipse at 8% 92%, rgba(168,85,247,.22), transparent 55%),
    linear-gradient(135deg, var(--surface), var(--bg-2));
  border-color: rgba(95,163,255,.08);
  box-shadow:
    var(--shadow-card-rest),
    0 0 60px rgba(59,130,246,.10);
}
.hero::after{
  background: linear-gradient(110deg,
    transparent 38%, rgba(95,163,255,.12) 48%, rgba(168,85,247,.08) 52%, transparent 62%);
}
.hero-title{
  text-shadow: 0 0 24px rgba(95,163,255,.30), 0 0 48px rgba(168,85,247,.15);
}
.title-pop{
  background: linear-gradient(135deg, #e0e8ff 0%, var(--pink) 35%, var(--magenta) 60%, var(--pink-soft) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-balance{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    rgba(14, 22, 42, .55);
  border-color: rgba(95,163,255,.10);
  box-shadow:
    var(--shadow-card-rest),
    0 0 32px rgba(59,130,246,.10);
}
.hero-balance:hover{
  box-shadow:
    var(--shadow-card-lift),
    0 0 48px rgba(59,130,246,.18);
}

/* ----- Live bets feed ----- */
.bet-feed-wrap{
  border-color: rgba(95,163,255,.10);
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.live-dot{
  background: var(--pink-soft);
  box-shadow: 0 0 8px var(--pink-soft);
}
.bf-tab.active{
  background: linear-gradient(180deg, rgba(59,130,246,.30), rgba(168,85,247,.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 14px rgba(59,130,246,.35),
    0 0 0 1px rgba(95,163,255,.45);
}
.bf-tab.active::after{
  background: linear-gradient(90deg, transparent, var(--pink), var(--magenta), transparent);
  filter: drop-shadow(0 0 6px var(--pink));
}

/* ----- Home banner: re-skin welcome slide; others kept. ----- */
.home-banners{
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border-color: rgba(95,163,255,.10);
}
.hb-slide-welcome{
  background:
    radial-gradient(ellipse at 85% 10%, rgba(59,130,246,.40), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(168,85,247,.38), transparent 55%),
    linear-gradient(135deg, #131938 0%, #0c1230 65%, #060a1c 100%);
}
.hb-eyebrow-dot{
  background: var(--pink-soft);
  box-shadow: 0 0 8px var(--pink-soft);
}
.hb-title-accent{
  background: linear-gradient(135deg, #e0e8ff 0%, var(--pink-soft) 50%, var(--magenta) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hb-art-welcome::before{
  background-image:
    radial-gradient(circle at 60% 40%, rgba(95,163,255,.85) 0%, rgba(59,130,246,.55) 35%, transparent 70%),
    radial-gradient(circle at 35% 65%, rgba(168,85,247,.60) 0%, rgba(95,163,255,.0) 45%);
}
.hb-dot.is-active{
  background: linear-gradient(90deg, var(--pink), var(--magenta));
  box-shadow: 0 0 14px var(--pink-glow);
}

/* ----- Modal chrome: navy panel with blue rim glow ----- */
.modal-backdrop{
  background: rgba(4, 6, 14, .72);
}
.modal{
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.10), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border-color: rgba(95,163,255,.08);
  box-shadow:
    var(--shadow-card-lift),
    0 0 60px rgba(59,130,246, .15);
}
.modal-close{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.modal-close:hover{
  background: rgba(59,130,246,.30);
  border-color: rgba(95,163,255,.45);
  box-shadow:
    var(--shadow-card-rest),
    0 0 18px var(--pink-glow);
}
.modal-title{
  background: linear-gradient(135deg, #fff 0%, #e0e8ff 70%, var(--pink-soft) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----- Buttons: primary now blue → purple gradient ----- */
.btn-primary{
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--pink) 50%, var(--magenta) 100%);
  border: none;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 6px 18px rgba(59,130,246,.40),
    0 0 0 1px rgba(95,163,255,.25);
}
.btn-primary:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.2),
    0 10px 28px rgba(59,130,246,.55),
    0 0 0 1px rgba(95,163,255,.45),
    0 0 32px rgba(168,85,247,.30);
}
.btn-outline{
  background: rgba(255,255,255,.03);
  color: #fff;
  border: 1.5px solid rgba(95,163,255,.35);
}
.btn-outline:hover{
  background: rgba(95,163,255,.10);
  border-color: rgba(95,163,255,.7);
  box-shadow:
    var(--shadow-glass),
    0 0 22px rgba(95,163,255,.30);
}

/* ----- Crash panel & friends: blue-tinted glass ----- */
.crash-panel{
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border-color: rgba(95,163,255,.10);
}
.crash-panel .bet-input:focus-within{
  border-color: rgba(95,163,255,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(59,130,246,.20);
}
.crash-panel .bet-input button[data-bet-action]:hover{
  background: rgba(59,130,246,.22);
  color: #fff;
  border-color: rgba(95,163,255,.50);
}
.crash-eos-block,
.crash-network{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    rgba(14, 22, 42, .55);
  border-color: rgba(95,163,255,.10);
}
.ceb-label{ color: var(--pink-soft); }
.crash-players{
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border-color: rgba(95,163,255,.10);
}
.crash-players .cp-count{
  background: rgba(95,163,255,.18);
  border-color: rgba(95,163,255,.35);
  color: #fff;
}
.crash-players .cp-title{
  color: rgba(192,212,255,.62);
}
.crash-players .cp-row.cp-mine{
  background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.04) 80%);
  border-color: rgba(95,163,255,.40);
  box-shadow: inset 0 0 0 1px rgba(95,163,255,.18);
}
.stats-row .stats-col{
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border-color: rgba(95,163,255,.08);
}
.history-bar.history-bar-top{
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-color: rgba(95,163,255,.08);
}
/* Phase pill + round badge */
.crash-phase-pill,
.crash-round-badge{
  border-color: rgba(95,163,255,.18);
}
.crash-board{
  border-color: rgba(95,163,255,.08);
  box-shadow:
    var(--shadow-card-lift),
    0 0 80px rgba(59,130,246,.10);
}
/* Hero CTA shadow swap (was red glow) */
.crash-multiplier{
  filter:
    drop-shadow(0 0 28px rgba(59,130,246,.55))
    drop-shadow(0 10px 20px rgba(0,0,0,.65));
}
.crash-multiplier.crashed{
  /* loss state — KEEP RED */
  color: #ef4444;
  filter:
    drop-shadow(0 0 24px rgba(239,68,68,.9))
    drop-shadow(0 0 60px rgba(239,68,68,.5));
}
.crash-multiplier.locked{
  /* win state — keep green */
  color: #28c76f;
  filter:
    drop-shadow(0 0 24px rgba(40,199,111,.9))
    drop-shadow(0 0 60px rgba(40,199,111,.45));
}

/* ----- Game shell + game header tints ----- */
.game-shell{
  border-color: rgba(95,163,255,.08);
}
.game-header{
  border-bottom-color: rgba(95,163,255,.08);
}

/* ----- Toasts — base toast should be neutral matte slate (was
   inheriting a red border + red glow from line 5641-5648). Only the
   .win and .loss variants get semantic colour. ----- */
.toast{
  border: 1px solid rgba(140,160,210,.18) !important;
  background: linear-gradient(180deg, #181e36, #131830) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  color: #ffffff !important;
}
.toast.win{
  border-color: rgba(40,199,111,.55) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,.55),
    0 0 24px rgba(40,199,111,.30),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  color: #7be8a3 !important;
}
.toast.loss{
  border-color: rgba(239,68,68,.55) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,.55),
    0 0 24px rgba(239,68,68,.30),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  color: #fca5a5 !important;
}
.toast.info{
  border-color: rgba(95,163,255,.55) !important;
  color: #a5c8ff !important;
}

/* ----- Chat panel ----- */
.chat{
  border-left-color: rgba(95,163,255,.08);
  background: linear-gradient(180deg, rgba(14,18,40,.62), rgba(8,12,28,.62));
}

/* ----- Manual/Auto tab strip — re-paint to the new palette. ----- */
.cp-panel-tab.is-active{
  background: linear-gradient(180deg, rgba(59,130,246,.32), rgba(168,85,247,.20));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 4px 12px rgba(59,130,246,.30);
}

/* ----- Topbar online pill ----- */
.online-pill{
  background: linear-gradient(180deg, rgba(59,130,246,.16), rgba(168,85,247,.10));
  border: 1px solid rgba(95,163,255,.20);
}
.online-dot{
  background: #28c76f;
  box-shadow: 0 0 8px #28c76f;
}

/* ----- Sidebar rate row dividers ----- */
.rate-row{
  border-bottom-color: rgba(95,163,255,.08);
}

/* ----- Pass 4 sidebar header (.sb-title) calmer tint ----- */
.sb-title{
  color: rgba(192,212,255,.50);
}

/* ----- Pass 3 Manual/Auto tab inactive color ----- */
.cp-panel-tab{
  color: rgba(192,212,255,.55);
}
.cp-panel-tab:hover:not(:disabled):not(.is-active){
  color: #fff;
  background: rgba(95,163,255,.06);
}

/* ============================================================
   UI PASS 4 — END
============================================================ */

/* ============================================================
   UI PASS 5 — Brand-red CTAs + Inter typography + layout
   restructure. User wants the buttons & primary brand accents
   back in red (matching the Bloxhit logo), but keeps the
   navy/purple cosmic base. Buttons get a Stake-style glossy
   pill treatment with white text. Typography moves to Inter.
   Home + Crash layouts get restructured for breathing room.
============================================================ */

:root{
  /* Brand-red CTA family — used by .btn-primary and active accents.
     Pass 4 repointed --pink to blue, but the USER asked for red
     buttons to match the logo. We keep --pink as blue (still used
     for decorative cosmic glows / sidebar shimmer / chat) and
     introduce a dedicated --brand red ramp for CTAs + sidebar active. */
  --brand:        #2563EB;   /* Bloxhit-red, slightly punchier than logo */
  --brand-soft:   #ff5260;   /* hover coral */
  --brand-deep:   #8c0a1c;   /* shadow / pressed */
  --brand-glow:   rgba(59,130,246,.55);
}

/* ----- Typography: Inter everywhere, Manrope for big stake-style
   uppercase labels, Sora kept for big multiplier numbers. ----- */
body,
.btn, button, input, select, textarea{
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
/* Big display numerics — multiplier, balance — keep Sora since
   it has a great tabular set + tight letterforms at big sizes. */
.crash-multiplier,
.balance,
.hb-amount,
.stat-num,
.limbo-multi,
.upgrader-percent,
.dice-num,
.plinko-multi{
  font-family: 'Sora', 'Inter', sans-serif;
}
/* Uppercase eyebrows / labels — Manrope's medium weights read crisper
   than Inter at small caps tracking. */
.sb-title,
.cp-panel-tab,
.bf-tab,
.hb-eyebrow,
.cs-tab,
.game-status,
.cp-title,
.cp-auto-stat-label,
.stats-title,
.cp-panel-tab,
.ceb-label{
  font-family: 'Manrope', 'Inter', sans-serif;
  letter-spacing: .14em;
}

/* ----- Brand-red button system (Stake/BloxFlip-style glossy pill).
   White text, subtle inner highlight at the top, soft drop-shadow.
   Hover lifts slightly and the glow blooms. Active = compressed. ----- */
.btn-primary,
.btn-deposit{
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--brand) 50%, var(--brand-deep) 100%);
  border: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(0,0,0,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -2px 0 rgba(0,0,0,.20),
    0 6px 16px rgba(59,130,246,.42),
    0 0 0 1px rgba(59,130,246,.30);
}
.btn-primary:hover,
.btn-deposit:hover{
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 10px 26px rgba(59,130,246,.55),
    0 0 0 1px rgba(96,165,250,.45),
    0 0 28px rgba(59,130,246,.30);
}
.btn-primary:active,
.btn-deposit:active{
  transform: translateY(1px) scale(.97);
  filter: brightness(.96);
}
/* Outline keeps brand-red as the rim accent so the duo reads together. */
.btn-outline{
  background: rgba(255,255,255,.04);
  color: #fff;
  border: 1.5px solid rgba(59,130,246,.42);
}
.btn-outline:hover{
  background: rgba(59,130,246,.10);
  border-color: rgba(96,165,250,.85);
  box-shadow:
    var(--shadow-glass),
    0 0 22px rgba(59,130,246,.32);
}
/* Banner CTAs (welcome banner, etc.) inherit the new red automatically
   since they use .btn-primary / .btn-outline. */

/* ----- Sidebar active link — red accent that matches the logo. ----- */
.sb-link.active{
  background: linear-gradient(90deg, rgba(59,130,246,.22), rgba(59,130,246,.04) 70%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(59,130,246,.32),
    var(--shadow-glass);
}
.sb-link.active::before{
  background: linear-gradient(180deg, var(--brand-soft), var(--brand));
  box-shadow: 0 0 12px var(--brand-glow);
}
.sb-link.active .sb-icon{
  color: var(--brand-soft);
  filter: drop-shadow(0 0 8px var(--brand-glow));
}
.sb-link:hover{
  background: rgba(59,130,246,.06);
}

/* HOT badge → brand red (was tonal-orange in Pass 4). */
.sb-hot{
  color: #dbeafe;
  background: linear-gradient(135deg, rgba(59,130,246,.32), rgba(96,165,250,.15));
  border-color: rgba(59,130,246,.42);
}

/* ----- Hero: a touch of brand-red in the corner glow + balance border. ----- */
.hero{
  background:
    radial-gradient(ellipse at 88% 8%, rgba(59,130,246,.22), transparent 55%),
    radial-gradient(ellipse at 8% 92%, rgba(168,85,247,.20), transparent 55%),
    linear-gradient(135deg, var(--surface), var(--bg-2));
  border-color: rgba(59,130,246,.10);
  box-shadow:
    var(--shadow-card-rest),
    0 0 60px rgba(59,130,246,.10);
}
.hero::after{
  background: linear-gradient(110deg,
    transparent 38%, rgba(96,165,250,.10) 48%, rgba(168,85,247,.08) 52%, transparent 62%);
}
.hero-title{
  text-shadow: 0 0 24px rgba(96,165,250,.25), 0 0 48px rgba(168,85,247,.12);
}
.title-pop{
  background: linear-gradient(135deg, #dbeafe 0%, var(--brand) 35%, var(--brand-deep) 60%, var(--brand-soft) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-balance{
  border-color: rgba(59,130,246,.14);
  box-shadow:
    var(--shadow-card-rest),
    0 0 32px rgba(59,130,246,.10);
}
.hero-balance:hover{
  box-shadow:
    var(--shadow-card-lift),
    0 0 48px rgba(59,130,246,.18);
}

/* ----- Live bets header live dot back to brand red. ----- */
.live-dot{ background: var(--brand-soft); box-shadow: 0 0 8px var(--brand-soft); }
.bf-tab.active{
  background: linear-gradient(180deg, rgba(59,130,246,.30), rgba(168,85,247,.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 14px rgba(59,130,246,.35),
    0 0 0 1px rgba(96,165,250,.45);
}
.bf-tab.active::after{
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand-soft), transparent);
  filter: drop-shadow(0 0 6px var(--brand));
}

/* ----- Banner welcome slide — brand-red gradient (was navy/blue). ----- */
.hb-slide-welcome{
  background:
    radial-gradient(ellipse at 85% 10%, rgba(59,130,246,.45), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(168,85,247,.32), transparent 55%),
    linear-gradient(135deg, #260a13 0%, #150610 65%, #07020a 100%);
}
.hb-eyebrow-dot{
  background: var(--brand-soft);
  box-shadow: 0 0 8px var(--brand-soft);
}
.hb-title-accent{
  background: linear-gradient(135deg, #dbeafe 0%, var(--brand-soft) 50%, var(--brand) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hb-art-welcome::before{
  background-image:
    radial-gradient(circle at 60% 40%, rgba(96,165,250,.85) 0%, rgba(59,130,246,.55) 35%, transparent 70%),
    radial-gradient(circle at 35% 65%, rgba(34,211,238,.55) 0%, rgba(59,130,246,.0) 45%);
}
.hb-dot.is-active{
  background: linear-gradient(90deg, var(--brand), var(--brand-soft));
  box-shadow: 0 0 14px var(--brand-glow);
}

/* ----- Modal: rim glow back to brand red. ----- */
.modal{
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.10), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border-color: rgba(59,130,246,.12);
  box-shadow:
    var(--shadow-card-lift),
    0 0 60px rgba(59,130,246, .14);
}
.modal-close:hover{
  background: rgba(59,130,246,.30);
  border-color: rgba(96,165,250,.45);
  box-shadow:
    var(--shadow-card-rest),
    0 0 18px var(--brand-glow);
}
.modal-title{
  background: linear-gradient(135deg, #fff 0%, #dbeafe 70%, var(--brand-soft) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----- Crash bet panel — brand-red focus rings + preset hovers. ----- */
.crash-panel{
  background:
    radial-gradient(ellipse at top, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border-color: rgba(59,130,246,.12);
}
.crash-panel .bet-input:focus-within{
  border-color: rgba(59,130,246,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(59,130,246,.20);
}
.crash-panel .bet-input button[data-bet-action]:hover{
  background: rgba(59,130,246,.22);
  color: #fff;
  border-color: rgba(96,165,250,.55);
}
.cp-panel-tab.is-active{
  background: linear-gradient(180deg, rgba(59,130,246,.35), rgba(168,85,247,.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 12px rgba(59,130,246,.30);
}
.crash-players .cp-row.cp-mine{
  background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.04) 80%);
  border-color: rgba(59,130,246,.40);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.18);
}
.ceb-label{ color: var(--brand-soft); }
.crash-multiplier{
  filter:
    drop-shadow(0 0 28px rgba(59,130,246,.55))
    drop-shadow(0 10px 20px rgba(0,0,0,.65));
}

/* ============================================================
   HOME LAYOUT RESTRUCTURE
   - Game grid moves to the top of home (right under the banner)
   - Hero downsizes to a "promo strip" beside the welcome banner
   - Live bets feed moves below the game grid, in a tighter shell
   - Section title styling refined
============================================================ */
.route.active[data-route="home"]{
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* Reorder: 1) banners row 2) continue playing 3) game grid 4) live-bets 5) hero 6) legal 7) ... */
.route.active[data-route="home"] > .home-banners,
.route.active[data-route="home"] > .home-banners-row{ order: 1; }
.route.active[data-route="home"] > .recent-played{ order: 2; }
.route.active[data-route="home"] > .section-title,
.route.active[data-route="home"] > .game-grid{ order: 3; }
.route.active[data-route="home"] > .bet-feed-wrap{ order: 4; }
.route.active[data-route="home"] > .hero{ order: 5; }
.route.active[data-route="home"] > *:not(.home-banners):not(.home-banners-row):not(.recent-played):not(.section-title):not(.game-grid):not(.bet-feed-wrap):not(.hero){ order: 6; }

/* "Choose your game" section title — Stake-style header strip. */
.section-title{
  font-family: 'Inter', sans-serif;
  font-weight: 800; font-size: 18px;
  letter-spacing: -.005em;
  color: #fff;
  margin: 4px 0 0;
  display: flex; align-items: center; gap: 10px;
  text-transform: none;
}
.section-title::before{
  content: ""; width: 4px; height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--brand-deep));
  box-shadow: 0 0 8px var(--brand-glow);
}
.section-icon{ display: none; }

/* Tighter, more compact game grid — 5 columns on wide screens. */
.game-grid{
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.game-card{
  aspect-ratio: 3 / 4;
  min-height: 240px;
  border-radius: 18px;
}

/* Hero turns into a "promo strip" — shorter, denser, side-by-side art. */
.hero{
  padding: 24px 28px;
  border-radius: 22px;
}
.hero-title{
  font-size: clamp(28px, 4.4vw, 56px) !important;
  line-height: 1.0;
  margin-bottom: 10px;
}
.hero-sub{
  font-size: 16px;
  margin-bottom: 18px;
}
.hero-art{ display: flex; }
.hero-limited-stack{
  width: 360px; height: 300px;
}
.hero-limited-stack .hlim-1{
  /* Dominus — back center, lifted up */
  top: 0;
  left: 50%; margin-left: -95px;
  width: 190px; height: 190px;
  transform: rotate(-3deg);
}
.hero-limited-stack .hlim-2{
  /* Fedora — front-left, closer in */
  bottom: 22px;
  left: 28px;
  width: 160px; height: 160px;
  transform: rotate(-8deg);
}
.hero-limited-stack .hlim-3{
  /* Valkyrie — front-right, closer in */
  bottom: 18px;
  right: 18px;
  width: 175px; height: 175px;
  transform: rotate(6deg);
}
.hero-limited-stack .hlim-1{ animation: limBobSpreadA 5.4s ease-in-out infinite; }
.hero-limited-stack .hlim-2{ animation: limBobSpreadB 5.9s ease-in-out infinite -1.6s; }
.hero-limited-stack .hlim-3{ animation: limBobSpreadC 6.4s ease-in-out infinite -3.1s; }
@keyframes limBobSpreadA{ 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-12px) rotate(-1deg)} }
@keyframes limBobSpreadB{ 0%,100%{transform:translateY(0) rotate(-10deg)} 50%{transform:translateY(-8px)  rotate(-7deg)} }
@keyframes limBobSpreadC{ 0%,100%{transform:translateY(0) rotate(8deg)}   50%{transform:translateY(-14px) rotate(5deg)} }
@media (max-width: 1180px){
  .hero-limited-stack{ width: 360px; height: 280px; }
  .hero-limited-stack .hlim-1{ width: 150px; height: 150px; margin-left: -75px; }
  .hero-limited-stack .hlim-2{ width: 125px; height: 125px; }
  .hero-limited-stack .hlim-3{ width: 140px; height: 140px; }
}

/* Live bets feed — slimmer wrapper, denser rows. */
.bet-feed-wrap{
  padding: 16px 18px;
  border-radius: 18px;
}

/* ============================================================
   CRASH ROUTE RESTRUCTURE
   - Hide the giant gh-art rocket SVG header (decorative — the
     real rocket lives inside the crash board).
   - Compact the game-header into a slim title-row.
   - Expand the crash board (already aspect-ratio 16/11, but bump
     min-height so the rocket dominates the screen).
============================================================ */
.route[data-route="crash"] .gh-art{ display: none; }
.route[data-route="crash"] .game-header{
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 14px;
}
.route[data-route="crash"] .game-title{
  font-size: 22px;
  letter-spacing: -.01em;
  margin: 0;
}
.route[data-route="crash"] .game-header::before,
.route[data-route="crash"] .game-header::after{ display: none; }
.route[data-route="crash"] .game-status{
  margin-left: auto;
  font-size: 10.5px;
}
.crash-board{
  min-height: 520px;
}
.crash-layout{
  grid-template-columns: 300px 1fr;
  gap: 16px;
}

/* ============================================================
   MODAL ALIGNMENT + CHROME
   - Center modal-title across the full panel (close pill is
     absolute-positioned so it doesn't push the title off-center)
   - Consistent body padding
   - Tight max-width so modal-shells don't sprawl on huge screens
============================================================ */
.modal-backdrop .modal{
  padding: 28px 28px 24px;
  border-radius: 22px;
  max-width: min(640px, 92vw);
  min-width: 0;
}
.modal-backdrop .modal-head{
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  margin-bottom: 14px;
}
.modal-backdrop .modal-title{
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
  padding: 0 60px;          /* leave room for the absolute close pill */
}
.modal-backdrop .modal-sub{
  text-align: center;
  color: rgba(255,255,255,.62);
  font-size: 15px;
  margin: 6px auto 16px;
  font-weight: 500;
  max-width: 520px;
}
.modal-backdrop .modal-close{
  position: absolute;
  top: 14px; left: 14px;
  z-index: 10;
}
/* Auth modal — narrower, since it's an inline sign-in flow */
/* Auth modal keeps its native 880px size (it's a wide 2-col layout —
   brand panel + form). My Pass 5 rule was forcing it down to 440px,
   which crushed the form column to ~80px and made every word stack
   vertically. Now an explicit override with higher specificity that
   beats both the 440 (gone) and the global Pass-5 640 (still there). */
.modal-backdrop .modal.modal-auth{
  max-width: min(880px, 96vw) !important;
  padding: 0 !important;
}

/* ============================================================
   UI PASS 5 — END
============================================================ */

/* ============================================================
   UI PASS 6 — Matte the navy, strip red bleed, breathing room,
   Blackjack restructure (BloxRain reference).

   User feedback after Pass 5:
   - "blue is too vibrant, should be more matte"
   - "parts of the site as literally still red lol" — meaning
     decorative red glows leaking onto hero/modal/banner that
     shouldn't be there. Red should live on CTAs only.
   - "this is too cramped" — need more breathing room.
   - Blackjack reference (BloxRain): 2×2 action grid, "How to
     Play" link, big primary CTA, centered felt with no red.
============================================================ */

/* ----- Matte navy: tone down ALL the radial blues/purples. ----- */
body{
  background:
    radial-gradient(ellipse 1400px 900px at 80% -20%, rgba(48,68,110,.18), transparent 65%),
    radial-gradient(ellipse 1400px 900px at -20% 110%, rgba(60,40,90,.16), transparent 65%),
    linear-gradient(180deg, #0c1020 0%, #10142a 50%, #0a0e1e 100%);
}
body::before{
  background-image:
    linear-gradient(rgba(70,90,140,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,90,140,.04) 1px, transparent 1px);
}
.bg-orb-1{
  background: radial-gradient(circle, rgba(48,68,110,.18), transparent 70%);
  filter: blur(110px);
}
.bg-orb-2{
  background: radial-gradient(circle, rgba(80,55,110,.20), transparent 70%);
  filter: blur(110px);
}
.bg-orb-3{
  background: radial-gradient(circle, rgba(95,110,150,.08), transparent 70%);
  filter: blur(110px);
}
/* Refresh the matte surface ramp — colder, less vibrant. */
:root{
  --bg-0:      #0c1020;
  --bg-1:      #10142a;
  --bg-2:      #0a0e1e;
  --surface:   #141a30;
  --surface-2: #1a2040;
  --surface-3: #232a52;
  --line:      rgba(255,255,255,.06);
  --line-2:    rgba(140,160,210,.10);
}

/* ----- Strip red bleed from non-CTA surfaces. ----- */
/* Hero: flat matte panel, no red aurora, subtle border. */
.hero{
  background: linear-gradient(180deg, #141a30, #10142a);
  border: 1px solid rgba(140,160,210,.08);
  box-shadow:
    0 14px 36px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.hero::after{ display: none; }   /* kill the aurora sheen */
.hero-title{ text-shadow: none; }
.hero-balance{
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005)), #131930;
  border: 1px solid rgba(140,160,210,.10);
  box-shadow: 0 8px 22px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.04);
}
.hero-balance:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Modal: flat navy panel, no red rim glow. */
.modal{
  background: linear-gradient(180deg, #181e36, #131830);
  border: 1px solid rgba(140,160,210,.10);
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.modal-title{
  background: linear-gradient(180deg, #ffffff 0%, #c8d2ec 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none;
}

/* Banner welcome: matte dark panel + subtle warm accents (no big red overlay). */
.hb-slide-welcome{
  background: linear-gradient(135deg, #1a1e3a 0%, #131830 65%, #0d1124 100%);
}
.hb-slide-deposit{
  background: linear-gradient(135deg, #1a1c2e 0%, #14172a 65%, #0c0f1e 100%);
}
.hb-slide-discord{
  background: linear-gradient(135deg, #1a1d36 0%, #14172e 65%, #0c0f24 100%);
}
.hb-eyebrow{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.home-banners{
  background: linear-gradient(180deg, #141a30, #10142a);
  border: 1px solid rgba(140,160,210,.08);
}

/* Live bets + crash panels + stats: flat matte glass. */
.bet-feed-wrap,
.crash-panel,
.crash-players,
.crash-eos-block,
.crash-network,
.stats-row .stats-col,
.history-bar.history-bar-top,
.sb-section,
.sb-rate-box{
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)), #131830;
  border: 1px solid rgba(140,160,210,.10);
  box-shadow: 0 4px 14px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.03);
}
/* Sidebar — matte navy, single subtle top glow. */
.sidebar{
  background: linear-gradient(180deg, #10142a 0%, #0a0e1e 100%);
  border-right: 1px solid rgba(140,160,210,.06);
}
/* Topbar — fully opaque navy that matches the body background. No
   semi-transparent layers, no backdrop-filter (any of those make
   the bar "darken" as page content scrolls under it). */
.topbar{
  background: #070A14;
  border-bottom: 1px solid rgba(140,160,210,.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.topbar::after{ display: none; }

/* Chat panel matte. */
.chat{
  background: linear-gradient(180deg, #10142a, #0a0e1e);
  border-left: 1px solid rgba(140,160,210,.06);
}

/* Crash board: matte navy frame with one calm blue rim — no red glow. */
.crash-board{
  border: 1px solid rgba(140,160,210,.10);
  box-shadow:
    0 18px 40px rgba(0,0,0,.55),
    0 0 40px rgba(60,80,120,.10),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.crash-multiplier{
  filter:
    drop-shadow(0 0 22px rgba(255,255,255,.15))
    drop-shadow(0 10px 20px rgba(0,0,0,.7));
}
.crash-multiplier.crashed{
  filter:
    drop-shadow(0 0 24px rgba(239,68,68,.85))
    drop-shadow(0 0 60px rgba(239,68,68,.5));
}

/* ----- Breathing room. Pass 5 was too tight. ----- */
main{ padding: 24px 28px 60px; }
.route.active[data-route="home"]{ gap: 28px; }
.home-banners{ border-radius: 22px; }
.hb-track{ height: 240px; }
.hb-slide{ padding: 32px 36px; }
.hero{ padding: 32px 36px; }
.game-grid{ gap: 18px; }
.game-card{ min-height: 260px; }
.bet-feed-wrap{ padding: 18px 22px; }
.crash-panel{ padding: 18px; }
.crash-players{ padding: 16px 18px; }
.crash-layout{ gap: 20px; }
.modal-backdrop .modal{ padding: 32px 32px 28px; }
.stats-row{ gap: 18px; }
.stats-row .stats-col{ padding: 16px 18px; }
/* Mobile: pull padding back so the welcome banner copy + CTA fit. */
@media (max-width: 720px){
  main{ padding: 16px 14px 50px; }
  .hb-slide{ padding: 22px 20px; }
  .hb-track{ height: 290px; }
  .hb-title{ font-size: 22px !important; }
  .hb-sub{ font-size: 12.5px; }
  .hb-cta.btn{ padding: 10px 14px; font-size: 11.5px; letter-spacing: .06em; }
  .hero{ padding: 22px 20px; }
  .modal-backdrop .modal{ padding: 22px 20px 20px; }
}

/* ============================================================
   BLACKJACK — Restructure to BloxRain reference.
   Goals: hide the cards art header, slim title row, 2×2 action
   grid (Hit / Stand / Split / Double), big DEAL CTA, "How to
   Play" link below, hide SURRENDER + INSURE from main UI, felt
   stays clean matte navy with NO red anywhere.
============================================================ */
.route[data-route="blackjack"] .gh-art{ display: none; }
.route[data-route="blackjack"] .game-header{
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 14px;
}
.route[data-route="blackjack"] .game-header::before,
.route[data-route="blackjack"] .game-header::after{ display: none; }
.route[data-route="blackjack"] .game-title{
  font-size: 22px;
  letter-spacing: -.01em;
  margin: 0;
}
.route[data-route="blackjack"] .game-status{
  margin-left: auto;
  font-size: 10.5px;
}

/* Bet panel — kill the red border, add matte chrome. */
.bj-shell-grid{
  grid-template-columns: 300px 1fr;
  gap: 20px;
  max-width: none;
  margin: 0;
}
.bj-shell-grid .bj-controls{
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)), #141a30;
  border: 1px solid rgba(140,160,210,.10);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.04);
}
.bj-shell-grid .bj-controls .control-group label{
  font-family: 'Manrope', 'Inter', sans-serif;
  color: rgba(255,255,255,.45);
}
.bj-shell-grid .bj-controls .bet-input{
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(140,160,210,.12);
  border-radius: 12px;
  padding: 6px 10px;
}
/* Hide the deal-only contextual buttons UNTIL the hand starts. We use
   a 2×2 grid container for HIT/STAND/SPLIT/DOUBLE. JS still toggles
   the [hidden] attribute the same way; new layout is purely CSS. */
.bj-shell-grid .bj-controls{
  /* Add a CSS grid sub-layout for the action buttons. We achieve the
     2×2 grid by giving the 4 action buttons a uniform width and
     wrapping them in a flex/grid via subgrid-style targeting. */
}
.bj-shell-grid .bj-controls .bj-btn-hit,
.bj-shell-grid .bj-controls .bj-btn-stand,
.bj-shell-grid .bj-controls .bj-btn-split,
.bj-shell-grid .bj-controls .bj-btn-double,
.bj-shell-grid .bj-controls .bj-btn-insure,
.bj-shell-grid .bj-controls .bj-btn-surrender{
  height: 46px;
  font-size: 15px;
  letter-spacing: .10em;
  border-radius: 12px;
  width: calc(50% - 4px);
  display: inline-flex;
  align-items: center; justify-content: center;
  margin: 0;
  font-weight: 700;
  /* Default action button = matte slate, NOT red. The brand red is
     reserved for the single DEAL primary CTA. */
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(140,160,210,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.bj-shell-grid .bj-controls .bj-btn-hit:hover,
.bj-shell-grid .bj-controls .bj-btn-stand:hover,
.bj-shell-grid .bj-controls .bj-btn-split:hover,
.bj-shell-grid .bj-controls .bj-btn-double:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(140,160,210,.22);
}
/* Pair the actions into a wrapping flex row inside .bj-controls so they
   line up two-per-row (HIT|STAND, SPLIT|DOUBLE). Use ::before/::after
   trickery? Cleanest: add a CSS rule that says the four buttons are flex
   items wrapping. They're already direct children of .bj-controls; just
   layer a row-wrap container around them via inline-block + width 50%. */
.bj-shell-grid .bj-controls .bj-btn-hit{ margin-right: 4px; }
.bj-shell-grid .bj-controls .bj-btn-split{ margin-right: 4px; }
.bj-shell-grid .bj-controls .bj-btn-stand,
.bj-shell-grid .bj-controls .bj-btn-double{ margin-left: 4px; }
/* DEAL CTA — full-width, red brand gradient, bigger. */
.bj-shell-grid .bj-controls .bj-btn-deal{
  width: 100%;
  height: 54px;
  font-size: 15px;
  letter-spacing: .12em;
  border-radius: 14px;
  margin-top: 4px;
}
/* Hide INSURE and SURRENDER unless the JS reveals them. Keep them out
   of the main 2×2 grid layout entirely. */
.bj-shell-grid .bj-controls .bj-btn-insure,
.bj-shell-grid .bj-controls .bj-btn-surrender{
  width: 100%;
  margin-top: 4px;
}

/* "How to Play" link below the DEAL button. Inline since JS may not
   render it for us — we use a CSS-only pseudo. Wrap is the bj-controls
   container; we attach the link as its ::after content. */
.bj-shell-grid .bj-controls::after{
  content: "? How to Play";
  display: block;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(140,160,210,.55);
  margin-top: 10px;
  cursor: pointer;
  letter-spacing: .04em;
  transition: color .25s var(--ease-smooth);
}
.bj-shell-grid .bj-controls:hover::after{
  color: rgba(255,255,255,.85);
}

/* Felt — flat matte navy, NO red corner suits, very subtle rim. */
.bj-shell-grid .bj-table{
  background: linear-gradient(180deg, #131830, #0e1224);
  border: 1px solid rgba(140,160,210,.08);
  border-radius: 18px;
  padding: 36px 32px;
  min-height: 480px;
  box-shadow:
    0 14px 36px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.bj-shell-grid .bj-table::before{
  /* Kill any animated red overlay. */
  display: none;
}
/* Hide the giant corner suit ornaments (♠♥♣♦) — they read as decoration
   noise and the BloxRain reference has a totally clean felt. */
.bj-shell-grid .bj-suit{ display: none; }
/* Hide the bj-particles layer (was used for confetti — kept the DOM
   intact so JS doesn't error, just visually empty). */
.bj-shell-grid .bj-particles{ display: none; }
.bj-shell-grid .bj-label{
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 700; font-size: 15px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  text-transform: none;
  text-shadow: none;
}
.bj-shell-grid .bj-label::before,
.bj-shell-grid .bj-label::after{ display: none; }
.bj-shell-grid .bj-pays-main{
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 700; font-size: 16px;
  letter-spacing: .20em;
  color: rgba(255,255,255,.42);
  text-shadow: none;
  text-transform: uppercase;
}
.bj-shell-grid .bj-pays-sub{
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 600; font-size: 13px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.28);
  text-shadow: none;
  text-transform: uppercase;
  margin-top: 4px;
}
.bj-shell-grid .bj-pays{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 14px 20px;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(140,160,210,.08);
}
/* Card deck (top-right of felt) — keep but tone down. */
.bj-shell-grid .bj-deck-card{
  background: linear-gradient(135deg, rgba(140,160,210,.40), rgba(40,55,100,.45));
  border: 1px solid rgba(140,160,210,.30);
}

/* ============================================================
   UI PASS 6 — END
============================================================ */

/* ============================================================
   UI PASS 7 — Pure-red palette + slim game headers + audit
   pink remnants.

   User feedback after Pass 6:
   - "some of the buttons are pink make them actually red not pink"
   - "still parts are red and anything pink should just be red"
   - Marked the Crash header panel as having a big empty left half
     and the preset chip row as visually unbalanced.

   Fix: drop the coral-pink `--brand-soft` from the CTA gradient
   so the top of the button is pure red, not pink. Override the
   leftover pink-coral rgba(59,130,246, …) / #3B82F6 / #60A5FA
   surfaces that Pass 5/6 didn't catch (fair-pill, game-header
   pseudo-elements, title shimmer, multi-slider crash track).
   Slim down game-headers for Crash + Blackjack so there's no
   empty panel real-estate above the bet panel.
============================================================ */

:root{
  /* Royal blue → cyan brand ramp — sampled from the new logo gradient. */
  --brand:        #3B82F6;
  --brand-soft:   #60A5FA;
  --brand-deep:   #1D4ED8;
  --brand-glow:   rgba(59,130,246,.55);
  --brand-cyan:   #06B6D4;
  --brand-cyan-soft: #22D3EE;
}

/* Primary CTA — royal blue → cyan gradient sampled from the logo. */
.btn-primary,
.btn-deposit{
  background: linear-gradient(180deg, #60A5FA 0%, var(--brand) 50%, #1D4ED8 100%);
  border: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(0,0,0,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 6px 16px rgba(59,130,246,.40),
    0 0 0 1px rgba(59,130,246,.30);
}
.btn-primary:hover,
.btn-deposit:hover{
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 10px 26px rgba(59,130,246,.55),
    0 0 0 1px rgba(96,165,250,.45),
    0 0 26px rgba(6,182,212,.30);
}

/* Fair-pill override block was deleted in the 2026-05-19 polish pass —
   it used to repaint the pill blue + drop the green-shield glyph, which
   fought the unified compact pill style defined ~line 6800. Removing
   it lets the green-shield watch-view look win site-wide. */

/* Multi-slider (Crash auto-cashout, Limbo target) — coral track → red. */
.ms-crash .ms-track-fill,
.ms-limbo .ms-track-fill{
  background: linear-gradient(90deg, #60A5FA 0%, var(--brand) 50%, var(--brand-deep) 100%);
  box-shadow: 0 0 8px rgba(59,130,246,.40);
}
.ms-crash .ms-track-glow,
.ms-limbo .ms-track-glow{
  background: radial-gradient(circle, rgba(59,130,246,.70) 0%, transparent 70%);
}

/* Slider lock-icon next to the AUTO CASHOUT value — converts the pink
   padlock to pure brand red. The icon is rendered via .ms-lock pseudo
   or an SVG inside .multi-slider-host; tint via filter. */
.multi-slider-host .ms-lock,
.crash-panel .control-group [class*="lock"]{
  color: var(--brand);
  filter: drop-shadow(0 0 6px var(--brand-glow));
}

/* Game-header — slim, transparent row for Crash + Blackjack so there's
   no big empty panel above the bet column. (Pass 5 hid .gh-art but the
   panel chrome stayed.) */
.route[data-route="crash"] .game-header,
.route[data-route="blackjack"] .game-header{
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 4px !important;
  margin-bottom: 14px !important;
  gap: 12px !important;
  overflow: visible !important;
}
.route[data-route="crash"] .game-header::before,
.route[data-route="crash"] .game-header::after,
.route[data-route="blackjack"] .game-header::before,
.route[data-route="blackjack"] .game-header::after{
  display: none !important;
}
.route[data-route="crash"] .game-title,
.route[data-route="blackjack"] .game-title{
  font-family: 'Inter', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  filter: none !important;
  animation: none !important;
  text-align: left !important;
  flex: 0 0 auto !important;
  text-shadow: none !important;
}

/* Sidebar HOT badge in pure red (was Pass 6 orange/amber). */
.sb-hot{
  color: #dbeafe;
  background: linear-gradient(135deg, rgba(59,130,246,.32), rgba(96,165,250,.16));
  border-color: rgba(59,130,246,.42);
}

/* Live bets active tab — pure red. */
.bf-tab.active{
  background: linear-gradient(180deg, rgba(59,130,246,.30), rgba(59,130,246,.16));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 14px rgba(59,130,246,.35),
    0 0 0 1px rgba(96,165,250,.45);
}
.bf-tab.active::after{
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand-soft), transparent);
  filter: drop-shadow(0 0 6px var(--brand));
}

/* Manual/Auto active tab — pure red. */
.cp-panel-tab.is-active{
  background: linear-gradient(180deg, rgba(59,130,246,.32), rgba(96,165,250,.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 12px rgba(59,130,246,.30);
}

/* Sidebar active link — already red, reinforce with pure red token. */
.sb-link.active{
  background: linear-gradient(90deg, rgba(59,130,246,.22), rgba(59,130,246,.04) 70%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(59,130,246,.32),
    0 4px 14px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.sb-link.active::before{
  background: linear-gradient(180deg, var(--brand-soft), var(--brand));
  box-shadow: 0 0 12px var(--brand-glow);
}
.sb-link.active .sb-icon{
  color: var(--brand-soft);
  filter: drop-shadow(0 0 8px var(--brand-glow));
}

/* Hero balance — kill its red ::before sparkle ring (was pink). */
.hero-balance::before{
  background: linear-gradient(135deg, rgba(59,130,246,.06), transparent 60%);
}

/* Crash bet panel — focus ring + preset hover use pure red. */
.crash-panel .bet-input:focus-within{
  border-color: rgba(59,130,246,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(59,130,246,.20);
}
.crash-panel .bet-input button[data-bet-action]:hover{
  background: rgba(59,130,246,.22);
  color: #fff;
  border-color: rgba(96,165,250,.55);
}
.crash-players .cp-row.cp-mine{
  background: linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.04) 80%);
  border-color: rgba(59,130,246,.40);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.18);
}

/* Modal-close pill — pure red on hover (was pink-tinged). */
.modal-close:hover{
  background: rgba(59,130,246,.30);
  border-color: rgba(96,165,250,.45);
  box-shadow:
    var(--shadow-card-rest),
    0 0 18px var(--brand-glow);
}

/* Banner welcome dot + eyebrow accent → pure red. */
.hb-eyebrow-dot{
  background: var(--brand);
  box-shadow: 0 0 8px var(--brand-glow);
}
.hb-dot.is-active{
  background: linear-gradient(90deg, var(--brand), var(--brand-soft));
  box-shadow: 0 0 14px var(--brand-glow);
}

/* Section title accent bar — pure red. */
.section-title::before{
  background: linear-gradient(180deg, var(--brand), var(--brand-deep));
  box-shadow: 0 0 8px var(--brand-glow);
}

/* Live dot on the live-bets header — pure red. */
.live-dot{
  background: var(--brand);
  box-shadow: 0 0 8px var(--brand-glow);
}

/* Section title text — calmer hue (was rgba pink). */
.section-title{
  color: #ffffff;
}

/* History-bar "low" / huge / etc. were tier colors that are fine — keep
   intact. But the BUST / LOSS toasts and crash-multiplier crash state
   keep semantic red, which IS pure red since we semantic-mapped --red. */
.crash-multiplier.crashed{ color: #ef4444; }

/* ============================================================
   UI PASS 7 — END
============================================================ */

/* ============================================================
   UI PASS 8 — Final red audit + slim game shell + remove result
   banner + kill "How to Play" link.

   User feedback after Pass 7:
   - "theres still redish parts even on the crash" — circled the
     game-shell area, which has pink ::before edge-sheen + ::after
     radial glow + a pink inset border that Pass 7 didn't catch.
   - "its not centered with nice text" — wants the game title
     prominent + centered.
   - "remove the how it works thing" — kill the "? How to Play"
     pseudo under DEAL on Blackjack.
   - "when u cashout or loose theres another notification ui that
     pops up there remove that aswell" — kill the .result-banner
     side popup that fires from showResult().
============================================================ */

/* Kill the result-banner popup entirely. showResult() still gets
   called by gameplay code but the DOM element it manipulates is
   now hidden, so nothing flashes on cashout / loss / win. */
.result-banner{ display: none !important; }

/* Game-shell — strip the pink-inset border, pink top sheen, pink
   radial drift glow. Now a flat matte navy panel. */
.game-shell{
  background:
    linear-gradient(135deg, rgba(20,26,48,.65), rgba(14,18,36,.55));
  border: 1px solid rgba(140,160,210,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    var(--shadow-panel);
}
.game-shell::before,
.game-shell::after{ display: none !important; }

/* Game-title — bigger, centered, calm white. Override Pass 7
   left-align so the title becomes a hero element of the route. */
.route[data-route="crash"] .game-header,
.route[data-route="blackjack"] .game-header{
  justify-content: center !important;
  position: relative !important;
  padding: 10px 4px !important;
  gap: 14px !important;
}
.route[data-route="crash"] .game-title,
.route[data-route="blackjack"] .game-title{
  font-family: 'Inter', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  filter: none !important;
  animation: none !important;
  text-align: center !important;
  flex: 0 0 auto !important;
  text-shadow: none !important;
}

/* Kill the "? How to Play" pseudo under Blackjack DEAL button. */
.bj-shell-grid .bj-controls::after{ display: none !important; }

/* Final pink/coral audit — explicit overrides for surfaces that
   STILL carried the old red rgba values after Pass 4–7. */

/* Crash phase pill, round badge — the inactive border + dot were
   still tinted with the old pink rgba. Now neutral navy. */
.crash-phase-pill{
  border-color: rgba(140,160,210,.18);
  background: rgba(10,14,30,.70);
}
.cph-dot{
  background: var(--brand-soft);
  box-shadow: 0 0 10px var(--brand-glow);
}
.crash-phase-pill[data-phase="flight"] .cph-dot{
  background: #ffcc44;
  box-shadow: 0 0 10px rgba(255,204,68,.7);
}
.crash-phase-pill[data-phase="crashed"] .cph-dot{
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand-glow);
}
.crash-round-badge{
  border-color: rgba(140,160,210,.18);
  background: rgba(10,14,30,.70);
  color: #ffffff;
}

/* Crash players panel — kill old pink border tint on the wrapper. */
.crash-players{
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)), #131830;
  border: 1px solid rgba(140,160,210,.10);
}
.crash-players .cp-title{
  color: rgba(192,212,255,.62);
}
.crash-players .cp-count{
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.35);
}

/* Crash-eos label was pink-tinted via Pass 4–7. Use a calm muted slate. */
.ceb-label{ color: rgba(192,212,255,.55); }
.ceb-num{ color: rgba(255,255,255,.92); }

/* Network pill text + dot — neutral state white, semantic green/red. */
.crash-network{ color: rgba(255,255,255,.78); }
.crash-network .cn-dot{ background: #28c76f; box-shadow: 0 0 8px #28c76f; }
.crash-network[data-status="down"] .cn-dot{ background: var(--brand); box-shadow: 0 0 8px var(--brand-glow); }
.crash-network[data-status="waiting"] .cn-dot{ background: #ffcc44; box-shadow: 0 0 8px rgba(255,204,68,.7); }

/* Crash auto-cashout slider host (multi-slider) — older purple/pink
   ambient. Re-tint. */
.multi-slider-host::before{
  background: radial-gradient(circle at 50% 50%, rgba(59,130,246,.10), transparent 70%);
}

/* Hero balance ::before sparkle ring was rgba pink. Already overridden in
   Pass 7 but reinforce with a totally neutral version. */
.hero-balance::before{
  background: linear-gradient(135deg, rgba(59,130,246,.05), transparent 60%);
  opacity: .6;
}

/* fair-pill text colour — match the muted slate for legibility. */
.fair-pill{
  color: rgba(255,230,232,.95);
}

/* Crash multi sub "CURRENT PAYOUT" caption — neutral slate (was pink during flight). */
.crash-multi-sub{ color: rgba(255,255,255,.55); }
.crash-board[data-flying="1"] .crash-multi-sub{ color: rgba(255,255,255,.65); }

/* Status pills (.game-status) — kill ANY red bg unless danger state. */
.game-status{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(140,160,210,.14);
  color: rgba(255,255,255,.78);
}
.game-status.danger{
  background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(59,130,246,.06));
  border-color: rgba(59,130,246,.45);
  color: #dbeafe;
}
.game-status.win{
  background: linear-gradient(135deg, rgba(40,199,111,.25), rgba(40,199,111,.06));
  border-color: rgba(40,199,111,.45);
  color: #c8ffd8;
}

/* ============================================================
   UI PASS 8 — END
============================================================ */

/* ============================================================
   UI PASS 3b — MINES restructure (BloxFlip/BloxRain reference).
   Slim header, side bet rail on LEFT, 5×5 grid in centre, big
   payout strip above the CTA, matte navy throughout. Red lives
   only on the BET CTA + bust state.
============================================================ */
.route[data-route="mines"] .gh-art{ display: none; }
.route[data-route="mines"] .game-header{
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 4px !important;
  margin-bottom: 14px !important;
  gap: 14px !important;
  overflow: visible !important;
  position: relative !important;
}
.route[data-route="mines"] .game-header::before,
.route[data-route="mines"] .game-header::after{
  display: none !important;
}
.route[data-route="mines"] .game-title{
  font-family: 'Inter', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  filter: none !important;
  animation: none !important;
  text-align: center !important;
  flex: 0 0 auto !important;
  text-shadow: none !important;
}

/* Layout: bet rail LEFT (300px), grid CENTER. (Was grid LEFT
   + panel RIGHT; flipped to match BloxFlip/BloxRain.) */
.mines-layout{
  grid-template-columns: 280px minmax(0, 560px) !important;
  gap: 18px !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  align-items: start !important;
  justify-content: center !important;
}
/* Re-order so panel renders first (left), grid second (right). */
.mines-layout .mines-panel{ order: 1; }
.mines-layout .mines-grid{ order: 2; }

/* Bet panel — matte glass card matching Crash + Blackjack. */
.mines-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)),
    #141a30;
  border: 1px solid rgba(140,160,210,.10);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.04);
}
.mines-panel .control-group label{
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 800; font-size: 12px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}
.mines-panel .bet-input{
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(140,160,210,.12);
  border-radius: 12px;
  padding: 6px 10px;
}
.mines-panel .bet-input:focus-within{
  border-color: rgba(59,130,246,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(59,130,246,.20);
}
.mines-panel .bet-input button[data-bet-action]{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(140,160,210,.14);
  color: rgba(255,255,255,.78);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 13px;
}
.mines-panel .bet-input button[data-bet-action]:hover{
  background: rgba(59,130,246,.20);
  color: #fff;
  border-color: rgba(96,165,250,.50);
}

/* NEXT / TOTAL payout strip — denser, two-column glass row. */
.mines-panel .payout-display{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(140,160,210,.10);
}
.mines-panel .payout-display > div{
  display: flex; flex-direction: column;
  gap: 4px;
}
.mines-panel .payout-display span{
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 800; font-size: 9.5px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
}
.mines-panel .payout-display strong{
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 800; font-size: 18px;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

/* START / CASHOUT — only the active one is bright red. */
.mines-panel .btn{
  height: 52px;
  font-size: 16px;
  letter-spacing: .12em;
  border-radius: 12px;
}

/* 5×5 grid — flat matte navy frame, capped width to keep tiles
   comfortable (was 780px+ which dwarfed the bet rail). */
.mines-grid{
  background: linear-gradient(180deg, #141a30, #0e1224) !important;
  border: 1px solid rgba(140,160,210,.10) !important;
  padding: 14px !important;
  border-radius: 18px !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 560px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.mines-grid::before,
.mines-grid::after{ display: none !important; }

/* Closed tile — matte navy with subtle hover lift. Was a heavy
   3D button with 6px drop shadow; we soften to a flat chip. */
.mine-tile{
  background: linear-gradient(180deg, #1c2240, #161b35) !important;
  border: 1px solid rgba(140,160,210,.12) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 4px 10px rgba(0,0,0,.30) !important;
  transition:
    transform .25s var(--ease-bounce),
    border-color .25s var(--ease-smooth),
    box-shadow .25s var(--ease-smooth) !important;
}
.mine-tile:not(.gem):not(.bomb):not(.locked):hover{
  transform: translateY(-3px) !important;
  border-color: rgba(59,130,246,.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 18px rgba(0,0,0,.45),
    0 0 22px rgba(59,130,246,.18) !important;
}
.mine-tile:active{
  transform: translateY(0) scale(.97) !important;
}
/* Empty-state hint coin (the dim Hitcoin) — slightly smaller. */
.mt-empty{ opacity: .25; }

/* Revealed gem tile — calm gold tint instead of the loud
   gold→claret gradient (was bleeding red onto the grid). */
.mine-tile.gem{
  background: linear-gradient(180deg, #2a2840 0%, #1a1f3a 100%) !important;
  border-color: rgba(251,191,36,.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 22px rgba(251,191,36,.22) !important;
}

/* Bomb tile (revealed mine after bust) — semantic warning red rim. */
.mine-tile.bomb{
  background: linear-gradient(180deg, #2a1118 0%, #1a0a0d 100%) !important;
  border-color: rgba(239,68,68,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 24px rgba(239,68,68,.35) !important;
}

/* Mobile: stack panel above grid. */
@media (max-width: 760px){
  .mines-layout{
    grid-template-columns: 1fr !important;
  }
  .mines-layout .mines-panel{ order: 1; }
  .mines-layout .mines-grid{ order: 2; }
}

/* ============================================================
   UI PASS 3b — MINES — END
============================================================ */

/* ============================================================
   UI PASS 3c — SLOTS restructure (BloxFlip/BloxRain).
   - Slim header with centred "Slots" title.
   - Bet panel = matte glass like Crash/BJ/Mines.
   - Slot machine cabinet: re-skinned from Vegas red/gold to
     matte navy with subtle gold rim accents (still reads as a
     real slot machine, just modern instead of arcade).
   - Floor halo + crown bulbs toned to ambient — no aggressive
     red glow.
   - Hide the lever — Stake/BloxFlip slots are pull-button
     based, not lever-pulled, and the chunky 3D lever was the
     loudest red element on the cabinet.
============================================================ */
.route[data-route="slots"] .gh-art{ display: none; }
.route[data-route="slots"] .game-header{
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 4px !important;
  margin-bottom: 14px !important;
  gap: 14px !important;
  overflow: visible !important;
  position: relative !important;
}
.route[data-route="slots"] .game-header::before,
.route[data-route="slots"] .game-header::after{ display: none !important; }
.route[data-route="slots"] .game-title{
  font-family: 'Inter', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  filter: none !important;
  animation: none !important;
  text-align: center !important;
  flex: 0 0 auto !important;
  text-shadow: none !important;
}

/* Bet panel — matte glass language. */
.slots-shell-grid > .slots-controls{
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)),
    #141a30 !important;
  border: 1px solid rgba(140,160,210,.10) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.slots-shell-grid > .slots-controls .control-group label{
  font-family: 'Manrope', 'Inter', sans-serif !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,.45) !important;
  letter-spacing: .22em !important;
  font-size: 12px !important;
}
.slots-shell-grid > .slots-controls .bet-input{
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(140,160,210,.12);
  border-radius: 12px;
  padding: 6px 10px;
}
.slots-shell-grid > .slots-controls .bet-input:focus-within{
  border-color: rgba(59,130,246,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(59,130,246,.20);
}

/* Slot machine cabinet — re-skin from Vegas red/gold to matte navy
   with subtle gold rim accents. Still reads as a real cabinet. */
.slots-machine{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251,191,36,.10), transparent 55%),
    linear-gradient(180deg, #181f3c 0%, #131830 40%, #0e1224 100%) !important;
  border: 2px solid rgba(140,160,210,.16) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.06),
    inset 0 -4px 0 rgba(0,0,0,.4),
    0 14px 36px rgba(0,0,0,.55),
    0 0 60px rgba(140,160,210,.05) !important;
}
.slots-machine::before{
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.30) 100%) !important;
}
.slots-machine > .sm-floor-halo{
  background:
    radial-gradient(ellipse 50% 100% at 50% 0%, rgba(251,191,36,.14), transparent 65%),
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(140,160,210,.20), transparent 75%) !important;
}

/* Crown — slim navy frame with gold accent (was red bordered). */
.sm-crown-frame{
  background: linear-gradient(180deg, #1c2240 0%, #131830 100%) !important;
  border: 1.5px solid rgba(251,191,36,.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -2px 0 rgba(0,0,0,.4),
    0 4px 0 rgba(0,0,0,.30),
    0 0 18px rgba(251,191,36,.10) !important;
}
.sm-star{
  color: #fbbf24 !important;
  text-shadow: 0 0 10px rgba(251,191,36,.65) !important;
}
.sm-marquee{
  background: linear-gradient(180deg, #fff7d6 0%, #fbbf24 50%, #b45309 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Cabinet inner + window — matte navy frame. */
.sm-cabinet,
.sm-cabinet-inner{
  background: linear-gradient(180deg, #0e1224, #06091a) !important;
  border-color: rgba(140,160,210,.12) !important;
}
.sm-window{
  background: linear-gradient(180deg, #0a0e1c, #060912) !important;
  border-color: rgba(140,160,210,.16) !important;
}

/* Tray credits — neutral slate. */
.sm-tray{
  background: linear-gradient(180deg, #131830, #0e1224) !important;
  border-color: rgba(140,160,210,.12) !important;
}
.sm-tray-credits-label{ color: rgba(255,255,255,.45); }
.sm-tray-credits-val{ color: #fbbf24; }

/* Hide the chunky 3D pull lever — Stake/BloxFlip slots are
   button-driven, and the lever was the loudest red element. */
.sm-lever{ display: none !important; }

/* Stats row + paytable summary — matte glass. */
.paytable-summary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)),
    #141a30 !important;
  border: 1px solid rgba(140,160,210,.10) !important;
}
.paytable-v2{
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)),
    #141a30 !important;
  border: 1px solid rgba(140,160,210,.10) !important;
}

/* Win state — reduce the red flash, keep gold accent on big wins. */
.slots-machine.win{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -4px 0 rgba(0,0,0,.4),
    0 14px 36px rgba(0,0,0,.55),
    0 0 60px rgba(251,191,36,.22) !important;
}

/* ============================================================
   UI PASS 3c — SLOTS — END
============================================================ */

/* ============================================================
   UI PASS 3d — PLINKO restructure (BloxFlip/BloxRain).
   - Slim header.
   - 2-column layout: controls LEFT (300px), board RIGHT.
     Implemented via the game-shell becoming a CSS grid + order
     on the children. Plinko-board is BEFORE plinko-controls in
     the DOM, so we flip with `order:`.
   - Controls panel matte glass; segmented toggles re-skinned.
   - Plinko board matte navy frame (already close, just calmer).
============================================================ */
.route[data-route="plinko"] .gh-art{ display: none; }
.route[data-route="plinko"] .game-header{
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 4px !important;
  margin-bottom: 14px !important;
  gap: 14px !important;
  overflow: visible !important;
  position: relative !important;
}
.route[data-route="plinko"] .game-header::before,
.route[data-route="plinko"] .game-header::after{ display: none !important; }
.route[data-route="plinko"] .game-title{
  font-family: 'Inter', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  filter: none !important;
  animation: none !important;
  text-align: center !important;
  flex: 0 0 auto !important;
  text-shadow: none !important;
}

/* Layout: the game-shell becomes a 2-col grid (controls 300px +
   board capped at 780px). The board needs the 780px cap so the
   pegs cluster into a proper bloxflip-style pyramid instead of
   spreading thin — but the cap leaves dead space on wide viewports.
   `justify-content: center` recenters the columns within the main
   column so the gutter splits evenly on both sides instead of
   piling up entirely on the right. Header / stats / popup span
   the full grid (their `slots` track is the union of both cols)
   so they keep their natural full width below the centered pair. */
.route[data-route="plinko"] .game-shell{
  display: grid;
  grid-template-columns: 300px minmax(0, 780px);
  grid-template-areas:
    "header   header"
    "controls board"
    "stats    stats"
    "popup    popup";
  gap: 20px;
  align-items: start;
  justify-content: center;
}
.route[data-route="plinko"] .game-header{ grid-area: header; }
.route[data-route="plinko"] .plinko-controls{ grid-area: controls; }
.route[data-route="plinko"] .plinko-board{ grid-area: board; }
.route[data-route="plinko"] .stats-row{ grid-area: stats; }
.route[data-route="plinko"] .game-popup{ grid-area: popup; }

/* Controls panel = matte glass card (was a 3-col grid floating
   below the board). Stacks vertically. */
.route[data-route="plinko"] .plinko-controls{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)),
    #141a30 !important;
  border: 1px solid rgba(140,160,210,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.route[data-route="plinko"] .plinko-controls > .control-group{
  grid-area: unset !important;
  width: 100%;
}
.route[data-route="plinko"] .plinko-controls .control-group label{
  font-family: 'Manrope', 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: .22em !important;
  color: rgba(255,255,255,.45) !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
.route[data-route="plinko"] .plinko-controls .bet-input{
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(140,160,210,.12);
  border-radius: 12px;
  padding: 6px 10px;
}
.route[data-route="plinko"] .plinko-controls .bet-input:focus-within{
  border-color: rgba(59,130,246,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(59,130,246,.20);
}
.route[data-route="plinko"] .plinko-controls > #plinko-drop{
  grid-area: unset !important;
  width: 100% !important;
  height: 52px !important;
  font-size: 16px !important;
  letter-spacing: .12em !important;
  border-radius: 12px !important;
  margin-top: 4px !important;
}

/* Seg-toggle (DIFFICULTY/ROWS) — refine to matte glass row. */
.route[data-route="plinko"] .seg-toggle{
  background: rgba(0,0,0,.30) !important;
  border: 1px solid rgba(140,160,210,.12) !important;
  border-radius: 12px !important;
  padding: 4px !important;
}
.route[data-route="plinko"] .seg-btn{
  font-family: 'Manrope', 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .10em !important;
  color: rgba(255,255,255,.55) !important;
  border-radius: 8px !important;
  padding: 9px 10px !important;
}
.route[data-route="plinko"] .seg-btn:hover:not(.active){
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
}
.route[data-route="plinko"] .seg-btn.active{
  background: linear-gradient(180deg, rgba(59,130,246,.32), rgba(59,130,246,.18)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 4px 12px rgba(59,130,246,.30) !important;
  color: #fff !important;
  animation: none !important;
}
.route[data-route="plinko"] .seg-btn.active::before{ display: none !important; }

/* Board — matte navy, calmer ambient. Constrained to the 780px grid
   column so it never stretches into the right gutter on wide viewports.
   Aspect ratio 11/10 matches bloxflip's near-square plinko table —
   wider boards (the old 16/11) spread the pegs too thin and the
   triangle stopped reading as a proper plinko pyramid. */
.route[data-route="plinko"] .plinko-board{
  margin: 0 !important;
  max-width: 780px !important;
  width: 100% !important;
  /* height: auto + aspect-ratio is what drives the near-square shape.
     The base CSS sets height: 380px under 600px viewport which would
     otherwise pin the height and break the aspect ratio. */
  height: auto !important;
  aspect-ratio: 11 / 10 !important;
  min-height: 0 !important;
  max-height: none !important;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(59,130,246,.10), transparent 65%),
    radial-gradient(ellipse 70% 80% at 50% 110%, rgba(140,160,210,.08), transparent 70%),
    linear-gradient(180deg, #141a30 0%, #0e1224 50%, #07091a 100%) !important;
  border: 1px solid rgba(140,160,210,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -40px 60px rgba(0,0,0,.40),
    0 18px 40px rgba(0,0,0,.55) !important;
}

/* Mobile: stack controls above board. */
@media (max-width: 880px){
  .route[data-route="plinko"] .game-shell{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "header"
      "controls"
      "board"
      "stats"
      "popup" !important;
  }
}

/* ============================================================
   UI PASS 3d — PLINKO — END
============================================================ */

/* ============================================================
   UI PASS 3e — DICE / LIMBO / UPGRADER / COINFLIP / PACKS.
   Batch: same slim-header treatment for every remaining game,
   matte-glass control panels, 2-col stage/controls layouts
   where helpful (Dice/Limbo/Upgrader). Coinflip + Cases get
   slim header + colour tidy since their structure is already
   custom and would be disruptive to flip.
============================================================ */

/* ---- Shared slim-header treatment for the last 5 games ---- */
.route[data-route="dice"] .gh-art,
.route[data-route="limbo"] .gh-art,
.route[data-route="upgrader"] .gh-art,
.route[data-route="cases"] .gh-art{
  display: none;
}
.route[data-route="dice"] .game-header,
.route[data-route="limbo"] .game-header,
.route[data-route="upgrader"] .game-header,
.route[data-route="cases"] .game-header{
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 4px !important;
  margin-bottom: 14px !important;
  gap: 14px !important;
  overflow: visible !important;
  position: relative !important;
}
.route[data-route="dice"] .game-header::before,
.route[data-route="dice"] .game-header::after,
.route[data-route="limbo"] .game-header::before,
.route[data-route="limbo"] .game-header::after,
.route[data-route="upgrader"] .game-header::before,
.route[data-route="upgrader"] .game-header::after,
.route[data-route="cases"] .game-header::before,
.route[data-route="cases"] .game-header::after{
  display: none !important;
}
.route[data-route="dice"] .game-title,
.route[data-route="limbo"] .game-title,
.route[data-route="upgrader"] .game-title,
.route[data-route="cases"] .game-title{
  font-family: 'Inter', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  filter: none !important;
  animation: none !important;
  text-align: center !important;
  flex: 0 0 auto !important;
  text-shadow: none !important;
}

/* ---- DICE — 2-col stage + controls (controls LEFT, dice stage RIGHT). */
.route[data-route="dice"] .game-shell{
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-areas:
    "header header"
    "controls stage"
    "stats stats"
    "popup popup";
  gap: 20px;
  align-items: start;
}
.route[data-route="dice"] .game-header{ grid-area: header; }
.route[data-route="dice"] .dice-controls{ grid-area: controls; }
.route[data-route="dice"] .dice-stage{ grid-area: stage; }
.route[data-route="dice"] .stats-row{ grid-area: stats; }
.route[data-route="dice"] .game-popup{ grid-area: popup; }
.route[data-route="dice"] .dice-controls{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)),
    #141a30 !important;
  border: 1px solid rgba(140,160,210,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.route[data-route="dice"] .dice-controls .control-group label{
  font-family: 'Manrope', 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: .22em !important;
  color: rgba(255,255,255,.45) !important;
}
.route[data-route="dice"] .dice-controls .bet-input{
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(140,160,210,.12);
  border-radius: 12px;
}
.route[data-route="dice"] .dice-controls .bet-input:focus-within{
  border-color: rgba(59,130,246,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(59,130,246,.20);
}
.route[data-route="dice"] .dice-controls > .btn{
  width: 100% !important;
  height: 52px !important;
  font-size: 16px !important;
  letter-spacing: .12em !important;
  border-radius: 12px !important;
  margin-top: 4px !important;
}
.route[data-route="dice"] .dice-stage{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(59,130,246,.08), transparent 60%),
    linear-gradient(180deg, #141a30, #0e1224) !important;
  border: 1px solid rgba(140,160,210,.10) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  min-height: 360px !important;
}

/* ---- LIMBO — 2-col stage + controls. */
.route[data-route="limbo"] .game-shell{
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-areas:
    "header header"
    "controls stage"
    "history history"
    "stats stats"
    "popup popup";
  gap: 20px;
  align-items: start;
}
.route[data-route="limbo"] .game-header{ grid-area: header; }
.route[data-route="limbo"] .limbo-controls{ grid-area: controls; }
.route[data-route="limbo"] .limbo-stage{ grid-area: stage; }
.route[data-route="limbo"] .history-bar{ grid-area: history; }
.route[data-route="limbo"] .stats-row{ grid-area: stats; }
.route[data-route="limbo"] .game-popup{ grid-area: popup; }
.route[data-route="limbo"] .limbo-controls{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)),
    #141a30 !important;
  border: 1px solid rgba(140,160,210,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.route[data-route="limbo"] .limbo-controls .control-group label{
  font-family: 'Manrope', 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: .22em !important;
  color: rgba(255,255,255,.45) !important;
}
.route[data-route="limbo"] .limbo-controls .bet-input{
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(140,160,210,.12);
  border-radius: 12px;
}
.route[data-route="limbo"] .limbo-controls .bet-input:focus-within{
  border-color: rgba(59,130,246,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(59,130,246,.20);
}
.route[data-route="limbo"] .limbo-controls > .btn{
  width: 100% !important;
  height: 52px !important;
  font-size: 16px !important;
  letter-spacing: .12em !important;
  border-radius: 12px !important;
  margin-top: 4px !important;
}
.route[data-route="limbo"] .limbo-stage{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(59,130,246,.08), transparent 60%),
    linear-gradient(180deg, #141a30, #0e1224) !important;
  border: 1px solid rgba(140,160,210,.10) !important;
  border-radius: 18px !important;
  min-height: 360px !important;
}

/* ---- UPGRADER — 2-col wheel + controls. */
.route[data-route="upgrader"] .game-shell{
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-areas:
    "header header"
    "controls stage"
    "stats stats"
    "popup popup";
  gap: 20px;
  align-items: start;
}
.route[data-route="upgrader"] .game-header{ grid-area: header; }
.route[data-route="upgrader"] .upgrader-controls{ grid-area: controls; }
.route[data-route="upgrader"] .upgrader-stage{ grid-area: stage; }
.route[data-route="upgrader"] .stats-row{ grid-area: stats; }
.route[data-route="upgrader"] .game-popup{ grid-area: popup; }
.route[data-route="upgrader"] .upgrader-controls{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)),
    #141a30 !important;
  border: 1px solid rgba(140,160,210,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.route[data-route="upgrader"] .upgrader-controls .control-group label{
  font-family: 'Manrope', 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: .22em !important;
  color: rgba(255,255,255,.45) !important;
}
.route[data-route="upgrader"] .upgrader-controls .bet-input{
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(140,160,210,.12);
  border-radius: 12px;
}
.route[data-route="upgrader"] .upgrader-controls .bet-input:focus-within{
  border-color: rgba(59,130,246,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(59,130,246,.20);
}
.route[data-route="upgrader"] .upgrader-controls > .btn{
  width: 100% !important;
  height: 52px !important;
  font-size: 16px !important;
  letter-spacing: .12em !important;
  border-radius: 12px !important;
  margin-top: 4px !important;
}
.route[data-route="upgrader"] .upgrader-stage{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(59,130,246,.08), transparent 60%),
    linear-gradient(180deg, #141a30, #0e1224) !important;
  border: 1px solid rgba(140,160,210,.10) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  min-height: 360px !important;
}

/* ---- CASES / PACKS — slim header + matte panels. */
.route[data-route="cases"] .cs-shell,
.route[data-route="cases"] .cs-catalog,
.route[data-route="cases"] .cs-tabs{
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)),
    #141a30;
  border: 1px solid rgba(140,160,210,.10);
}
.route[data-route="cases"] .cs-tab.is-active{
  background: linear-gradient(180deg, rgba(59,130,246,.32), rgba(59,130,246,.18)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 4px 12px rgba(59,130,246,.30) !important;
}

/* Mobile: stack panel above stage for Dice/Limbo/Upgrader. */
@media (max-width: 880px){
  .route[data-route="dice"] .game-shell,
  .route[data-route="limbo"] .game-shell,
  .route[data-route="upgrader"] .game-shell{
    grid-template-columns: 1fr !important;
  }
  .route[data-route="dice"] .game-shell{
    grid-template-areas:
      "header"
      "controls"
      "stage"
      "stats"
      "popup" !important;
  }
  .route[data-route="limbo"] .game-shell{
    grid-template-areas:
      "header"
      "controls"
      "stage"
      "history"
      "stats"
      "popup" !important;
  }
  .route[data-route="upgrader"] .game-shell{
    grid-template-areas:
      "header"
      "controls"
      "stage"
      "stats"
      "popup" !important;
  }
}

/* ============================================================
   UI PASS 3e — END
============================================================ */

/* ============================================================
   BLACKJACK "HOW TO PLAY" — small subtle trigger under the
   action buttons, full rules in a clean centered modal. The
   trigger reads as a quiet support link, not a primary CTA,
   so it doesn't compete with DEAL / HIT / STAND.
============================================================ */
.bj-howto-trigger{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px auto 0;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(216, 227, 245, .55);
  font-family: 'Inter', 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .18s var(--ease-smooth), background-color .18s var(--ease-smooth);
}
.bj-howto-trigger:hover{
  color: #fff;
  background: rgba(255,255,255,.04);
}
.bj-howto-trigger svg{
  opacity: .75;
  flex-shrink: 0;
}
.bj-howto-trigger:hover svg{ opacity: 1; }

/* Modal — bullet list of rules with a blue title and a single
   full-width "Got it" CTA. Reference: bloxflip's blackjack rules
   modal — same calm, focused layout. */
.modal.modal-bj-rules{
  padding: 30px 32px 26px;
  width: min(560px, 100%);
}
.bj-rules-title{
  color: #60a5fa;
  font-family: 'Inter', 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 18px;
}
.bj-rules-list{
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bj-rules-list li{
  position: relative;
  padding-left: 22px;
  color: rgba(216, 227, 245, .92);
  font-family: 'Inter', 'Sora', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 600;
}
.bj-rules-list li::before{
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(96, 165, 250, .70);
  box-shadow: 0 0 8px rgba(96,165,250,.35);
}
.bj-rules-list strong{
  color: #fff;
  font-weight: 800;
}
.bj-rules-ok{
  width: 100%;
  height: 50px;
  font-size: 16px;
  letter-spacing: .14em;
  border-radius: 12px;
}

@media (max-width: 540px){
  .modal.modal-bj-rules{ padding: 24px 22px 22px; }
  .bj-rules-title{ font-size: 20px; }
  .bj-rules-list li{ font-size: 13.5px; }
}

/* ============================================================
   GENERIC GAME GUIDES — compact "How to Play" trigger + modal
   Same pattern as Blackjack, applied to every other game by
   the gameGuides IIFE in app.js. The trigger reuses
   .bj-howto-trigger styles; this block centers it in the
   block-level .game-shell parent and styles modal-only bits
   (section headings, payout rows) the BJ modal doesn't have.
============================================================ */
.gg-howto-trigger{
  /* Override the inline-flex centering — game-shell is block-level,
     not flex like .bj-controls. Promote to a centered flex container. */
  display: flex !important;
  width: max-content;
  margin: 18px auto 4px !important;
}

/* Section headings between rules → tips → payouts in the modal. */
.gg-modal-h{
  margin: 18px 0 12px;
  font-family: 'Inter', 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #60a5fa;
  text-transform: uppercase;
}
.gg-modal-h::before{
  content: '';
  display: inline-block;
  width: 4px; height: 14px;
  background: #60a5fa;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: -2px;
  opacity: .75;
}

/* Payout grid — two columns, label left, multiplier right. Matte
   navy rows so the data reads as a payout table not body copy. */
.gg-modal-payouts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-bottom: 22px;
}
.gg-modal-payout-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px;
  font-family: 'Inter', 'Sora', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(216, 227, 245, .85);
}
.gg-modal-payout-row span:last-child{
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 540px){
  .gg-modal-payouts{ grid-template-columns: 1fr; }
}

/* ============================================================
   UI PASS 9 — Polish pass after the per-game restructure.

   User feedback: "some accents on the site are still red ...
   none of the actual UI should be red except the buttons and
   the bottom highlight thing". Also wants every game's bet
   amount input to match Crash's clean style with the MAX button.

   Buttons + active highlights stay red. NON-INTERACTIVE status
   pills / target indicators / decorative glows get neutralized.
============================================================ */

/* ---- Dice mode pill (top-left of stage) — status indicator, not a button. */
.dice-mode-pill{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    rgba(14, 22, 42, .70) !important;
  border: 1px solid rgba(140,160,210,.18) !important;
  color: rgba(255,255,255,.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 6px 14px rgba(0,0,0,.35) !important;
}
.dice-mode-pill strong{
  color: #ffffff !important;
  text-shadow: none !important;
}
.dice-mode-pill #dice-mode-target{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.dice-mode-pill.under{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    rgba(14, 22, 42, .70) !important;
  border: 1px solid rgba(140,160,210,.18) !important;
  color: rgba(255,255,255,.78) !important;
}
.dice-mode-pill.under strong{ color: #ffffff !important; text-shadow: none !important; }

/* ---- Dice flip button next to TARGET SUM — neutral slate. */
.dice-flip{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(140,160,210,.14) !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 16px !important;
}
.dice-flip:hover{
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border-color: rgba(140,160,210,.30) !important;
  box-shadow: none !important;
}

/* ---- Limbo target line (top-center of stage) — status indicator. */
.limbo-target-line{
  background: rgba(14, 22, 42, .70) !important;
  border: 1px solid rgba(140,160,210,.18) !important;
  color: rgba(255,255,255,.65) !important;
}
.limbo-target-line strong{
  color: #ffffff !important;
  text-shadow: none !important;
}

/* ---- Dice roll readout — calmer text-shadow on idle, semantic green/red only on result. */
.dice-roll-readout .drr-label{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(140,160,210,.18) !important;
  color: rgba(255,255,255,.55) !important;
}
.dice-roll-readout .drr-value{
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.55) !important;
}
/* Win/loss states keep semantic colour. */
.dice-roll-readout.win .drr-label{
  background: rgba(40,199,111,.20) !important;
  border-color: rgba(40,199,111,.50) !important;
  color: #28c76f !important;
}
.dice-roll-readout.loss .drr-label{
  background: rgba(59,130,246,.20) !important;
  border-color: rgba(59,130,246,.50) !important;
  color: #ef4444 !important;
}

/* ---- Upgrader pointer arrow — keep gold tip but tone down. */
.upgrader-pointer{
  filter: drop-shadow(0 0 8px rgba(251,191,36,.45));
}

/* ---- Bet-input MAX button styling — keep parity with ½/2×. */
.bet-input button[data-bet-action="max"]{
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .10em;
}

/* ============================================================
   UI PASS 9 — END
============================================================ */

/* ============================================================
   UI PASS 9b — Dice die colours + flip icon polish.
   Pass 8's hex-literal bulk-replace converted the original
   dice-blue (#6ba8ff→#1f5fb0) gradient into the brand-red
   ramp, so both dice ended up rendering red. The .dice-blue
   and .dice-red class names are layout identifiers — the
   actual paint is now two muted navy slate gradients with a
   subtle hue split for visual distinction.
============================================================ */
.dice-blue .dface{
  background: linear-gradient(135deg, #4a7fbf, #1e3a6e) !important;
  border-color: #0e1c3a !important;
}
.dice-red .dface{
  background: linear-gradient(135deg, #6b4f8f, #3a2058) !important;
  border-color: #1e1230 !important;
}

/* ---- Dice flip button: replace the ⇅ glyph with a clean SVG arrow.
   Inter doesn't ship a glyph for U+21C5 and falls back to a glyph
   that visually reads as "1L". JS doesn't care about the button
   content, so an inline SVG is safe. */
.dice-flip{
  font-size: 0 !important;       /* hide the unicode fallback */
  position: relative;
  width: 28px; height: 28px;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  padding: 0 !important;
}
.dice-flip::before{
  content: "";
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4 L7 16 L3 12 M7 16 L11 12 M17 20 L17 8 L21 12 M17 8 L13 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4 L7 16 L3 12 M7 16 L11 12 M17 20 L17 8 L21 12 M17 8 L13 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  display: block;
}

/* ============================================================
   UI PASS 9b — END
============================================================ */

/* ============================================================
   UI PASS 9c — Blackjack + Slots sizing.
   Original .bj-shell-grid had max-width:1500px + a fixed-width
   .bj-table that capped the second column at 500px, so the
   `.bj-controls` column overflowed to 519px and the new
   ½/2×/MAX buttons sat off-canvas. Force the grid columns
   and constrain bj-controls to the 300px lane.
============================================================ */
.bj-shell-grid{
  grid-template-columns: 300px minmax(0, 1fr) !important;
  max-width: none !important;
  margin: 0 !important;
}
.bj-shell-grid > .bj-controls{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
.bj-shell-grid > .bj-table{
  max-width: none !important;
  width: 100% !important;
}
.bj-shell-grid .bet-input{
  flex-wrap: wrap;
}

/* Slots — same logic, the felt was capped at 780px which shoved
   the .slots-controls column wider than 300px. */
.slots-shell-grid{
  grid-template-columns: 300px minmax(0, 1fr) !important;
  max-width: none !important;
  margin: 0 !important;
}
.slots-shell-grid > .slots-controls{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
.slots-shell-grid > .slots-machine{
  max-width: 640px !important;
  margin: 0 auto !important;
}
.slots-shell-grid .bet-input{
  flex-wrap: wrap;
}

/* ============================================================
   UI PASS 9c — END
============================================================ */

/* ============================================================
   CRASH AUTO MODE — Manual/Auto tab strip + Auto-only controls.
   Reuses the Pass-3 crash panel chrome. Tab swap is driven by
   `data-mode` on the panel; live state by `.is-running`.
============================================================ */
.auto-panel .cp-auto-only,
.crash-panel .cp-auto-only{
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.auto-panel[data-mode="auto"] .cp-auto-only,
.crash-panel[data-mode="auto"] .cp-auto-only{
  display: flex;
}
.auto-panel .cp-auto-stops,
.crash-panel .cp-auto-stops{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.auto-panel .cp-auto-stats,
.crash-panel .cp-auto-stats{
  display: none;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(95,163,255,.10);
  box-shadow: var(--shadow-glass);
}
.auto-panel.is-running .cp-auto-stats,
.crash-panel.is-running .cp-auto-stats{
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}
.cp-auto-stat{
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.cp-auto-stat-label{
  font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: 9.5px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
}
.cp-auto-stat-val{
  font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: 16px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cp-auto-stat-val strong{ font-weight: 800; }
.cp-auto-pnl.is-profit{ color: #28c76f; text-shadow: 0 0 14px rgba(40,199,111,.45); }
.cp-auto-pnl.is-loss  { color: #ef4444; text-shadow: 0 0 14px rgba(239,68,68,.45); }
/* Lock the inputs while Auto is running — visually muted, cursor change. */
.auto-panel.is-running .control-group input,
.auto-panel.is-running .bet-input button[data-bet-action]{
  pointer-events: none;
  opacity: .55;
}

/* Critical: .limbo-controls and .slots-controls had `align-items: end`
   from the original grid layout. When Pass 3 flipped them to flex
   column, that align-items kept children at their intrinsic content
   width instead of stretching to the panel — pushing bet-input +
   presets to ~477px wide and overflowing the 300px left rail. Pin
   align-items + min-width so every direct child fills the panel. */
.auto-panel{
  align-items: stretch !important;
}
.auto-panel > .control-group,
.auto-panel > .cp-auto-only,
.auto-panel > .cp-panel-head,
.auto-panel > .btn,
.auto-panel > .cp-auto-stats{
  width: 100%;
  min-width: 0;
}
.auto-panel .cp-auto-only > .control-group{
  width: 100%;
  min-width: 0;
}
.auto-panel .cp-auto-stops > .control-group{
  width: auto;
  min-width: 0;
}
.auto-panel .bet-input{
  width: 100%;
  min-width: 0;
}
.auto-panel .bet-input > input{
  min-width: 0;
}

/* ============================================================
   Global panel-overflow fix.
   Every game's controls panel was originally a grid with
   `align-items: end` (so the big primary CTA hugged the bottom
   of a 3-col row). Pass 3 flipped most of them to flex column,
   but the original `align-items: end` stayed and prevented
   children from stretching to the panel width — leaving the
   bet-input + injected preset row at intrinsic content width
   (~477px), overflowing every 300px side-rail by ~220px to
   the left. Force stretch on every game's controls + clamp
   min-width on the children so flexbox can shrink them.
============================================================ */
.dice-controls,
.upgrader-controls,
.plinko-controls,
.limbo-controls,
.slots-controls,
.crash-controls,
.bj-controls,
.mines-panel{
  align-items: stretch !important;
}
.dice-controls > .control-group,
.upgrader-controls > .control-group,
.plinko-controls > .control-group,
.limbo-controls > .control-group,
.slots-controls > .control-group,
.crash-controls > .control-group,
.bj-controls > .control-group,
.mines-panel > .control-group{
  width: 100%;
  min-width: 0;
  max-width: none;
}
.dice-controls .bet-input,
.upgrader-controls .bet-input,
.plinko-controls .bet-input,
.limbo-controls .bet-input,
.slots-controls .bet-input,
.crash-controls .bet-input,
.bj-controls .bet-input,
.mines-panel .bet-input{
  width: 100%;
  min-width: 0;
}
.dice-controls .bet-input > input,
.upgrader-controls .bet-input > input,
.plinko-controls .bet-input > input,
.limbo-controls .bet-input > input,
.slots-controls .bet-input > input,
.crash-controls .bet-input > input,
.bj-controls .bet-input > input,
.mines-panel .bet-input > input{
  min-width: 0;
}
/* Inside .cp-auto-stops grid, items shouldn't be forced 100% wide. */
.cp-auto-stops > .control-group{
  width: auto !important;
  min-width: 0;
}
/* Start/Stop action button gets a calmer stop-state colour (so STOP feels
   distinct from a normal CTA). Applies to any .btn that picks up
   .btn-auto-stop class (slots-spin, limbo-roll). */
.btn.btn-auto-stop{
  background: linear-gradient(180deg, #f87171 0%, #ef4444 50%, #991b1b 100%) !important;
  color:#fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 0 rgba(0,0,0,.2),
    0 6px 18px rgba(239,68,68,.45),
    0 0 0 1px rgba(248,113,113,.30) !important;
}

/* ============================================================
   Game card art — full-bleed image cards (Limbo, Packs)
   + Stake-style shine-sweep on hover + subtle idle float.
============================================================ */
.game-card.has-img{
  background: #0a0e1a !important;
  padding: 0 !important;
  overflow: hidden;
  position: relative;
}
.game-card.has-img > .gc-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  z-index: 0;
  /* The provided art has ~3-4% of black padding baked in around the
     outside. Baseline-scale the image 1.07x so the card's
     `overflow:hidden` clips that border out and the artwork meets
     the rounded card edge cleanly. */
  transform: scale(1.07);
  transition:
    transform .6s var(--ease-smooth),
    filter .4s var(--ease-smooth);
}
.game-card.has-img:hover > .gc-img{
  transform: scale(1.12);
  filter: brightness(1.06) saturate(1.08);
}
/* Tags (POPULAR / NEW) sit on top of the image. */
.game-card.has-img .gc-tag{
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
}
/* Hide the placeholder centerpiece scene + the gc-name text (the
   image already has the title baked in). */
.game-card.has-img .gc-scene,
.game-card.has-img .gc-name,
.game-card.has-img .gc-bubble{
  display: none;
}

/* ---- Shine sweep — diagonal glossy band crosses the card on hover. */
.game-card .gc-shine{
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,.0) 35%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.0) 65%,
    transparent 100%);
  transform: skewX(-18deg);
  opacity: 0;
  transition: none;
}
.game-card:hover .gc-shine{
  animation: gcShine .9s var(--ease-smooth) forwards;
}
@keyframes gcShine{
  0%   { left: -75%; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 125%; opacity: 0; }
}

/* ---- Idle float — gentle 4px bob on a long loop, staggered per
   card so the row doesn't pulse in sync (looks more alive). */
.game-card.has-img{
  animation: gcFloat 4.8s ease-in-out infinite;
}
/* ---- Two-section banner row (BloxRain layout) ----
   Left = rotating carousel (Welcome / Crypto Deposits). Right = a
   smaller static Discord card that's a click-through to the invite.
   At ≤720px the side card hides so the main carousel takes full width. */
.home-banners-row{
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin: 0 0 20px;
}
.home-banners-row .home-banners{
  margin: 0;
}
.home-banner-side{
  display: block;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(239,68,68,.55);
  box-shadow: var(--shadow-card-rest), 0 0 22px rgba(239,68,68,.22);
  cursor: pointer;
  isolation: isolate;
  background: linear-gradient(135deg, #5865F2 0%, #4752C4 60%, #2D38AA 100%);
  /* Match the artwork's aspect (~2.76:1) so the image fills the card
     edge-to-edge with no letterbox gap. align-self: start pins it to
     the top of the row — the left carousel can be taller without
     pulling this card to stretch and break the aspect. */
  aspect-ratio: 1740 / 630;
  width: 100%;
  align-self: start;
  transition:
    transform .35s var(--ease-bounce),
    box-shadow .35s var(--ease-smooth);
}
.home-banner-side:hover{
  transform: translateY(-3px);
  border-color: rgba(239,68,68,.85);
  box-shadow: var(--shadow-card-lift), 0 0 42px rgba(239,68,68,.45);
}
.home-banner-side-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .8s var(--ease-smooth);
}
.home-banner-side:hover .home-banner-side-img{
  transform: scale(1.04);
}
@media (max-width: 720px){
  .home-banners-row{
    grid-template-columns: 1fr;
  }
  .home-banner-side{ min-height: 140px; }
}

.game-card.gc-crash.has-img    { animation-delay: -0.0s; }
.game-card.gc-blackjack.has-img{ animation-delay: -0.5s; }
.game-card.gc-slots.has-img    { animation-delay: -1.0s; }
.game-card.gc-dice.has-img     { animation-delay: -1.4s; }
.game-card.gc-mines.has-img    { animation-delay: -1.9s; }
.game-card.gc-limbo.has-img    { animation-delay: -2.4s; }
.game-card.gc-plinko.has-img   { animation-delay: -2.9s; }
.game-card.gc-upgrader.has-img { animation-delay: -3.4s; }
.game-card.gc-cases.has-img    { animation-delay: -4.4s; }
@keyframes gcFloat{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* Suspend the idle float while hovered so the lift transition takes
   over cleanly without fighting the bob keyframe. */
.game-card.has-img:hover{
  animation: none;
  transform: translateY(-6px) scale(1.02);
}
@media (prefers-reduced-motion: reduce){
  .game-card.has-img{ animation: none; }
  .game-card:hover .gc-shine{ animation: none; opacity: 0; }
}

/* ============================================================
   MODERN PASS — Continue playing strip, sliding tabs,
   count-up balance, animated badges, donut loader.
============================================================ */

/* ---- Continue playing strip ---- */
.recent-played{
  margin: 4px 0 8px;
}
.recent-played-head{
  display:flex; align-items:center; justify-content:space-between;
  margin: 0 0 12px;
}
.recent-played-title{
  font-family:'Inter',sans-serif;
  font-weight:800; font-size:16px;
  letter-spacing:.02em;
  color: rgba(219,234,254,.78);
  display:inline-flex; align-items:center; gap:8px;
  margin:0;
  text-transform:none;
}
.recent-played-title .rp-icon{ color: #60A5FA; opacity:.85 }
.recent-played-list{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.rp-card{
  position:relative;
  aspect-ratio: 16 / 9;
  border:none; padding:0; cursor:pointer;
  border-radius: 12px;
  overflow:hidden;
  background:#0a0e1a;
  box-shadow: var(--shadow-card-rest);
  transition:
    transform .3s var(--ease-bounce),
    box-shadow .3s var(--ease-smooth);
  isolation:isolate;
}
.rp-card-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.05);
  transition: transform .6s var(--ease-smooth), filter .3s ease;
  filter: saturate(.95) brightness(.78);
  z-index:0;
}
.rp-card-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding: 10px 12px;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.62) 100%);
  z-index:1;
  text-align:left;
}
.rp-card-resume{
  font-family:'Inter',sans-serif;
  font-weight:800; font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#bae6fd;
  padding: 3px 7px;
  border-radius: 99px;
  background: rgba(59,130,246,.22);
  border: 1px solid rgba(59,130,246,.45);
  margin-bottom: 6px;
}
.rp-card-name{
  font-family:'Inter',sans-serif;
  font-weight:800; font-size:16px;
  letter-spacing:-.005em;
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.rp-card:hover{
  transform: translateY(-3px);
  box-shadow:
    var(--shadow-card-lift),
    0 0 22px rgba(59,130,246,.22);
}
.rp-card:hover .rp-card-img{
  transform: scale(1.10);
  filter: saturate(1.05) brightness(.92);
}
.rp-card:active{ transform: translateY(-1px) scale(.99) }

/* ---- LIVE BETS sliding tab indicator ---- */
.bet-feed-tabs{
  position:relative;
}
.bet-feed-tabs::after{
  content:"";
  position:absolute;
  left: var(--bf-ind-x, 0);
  bottom: -2px;
  width: var(--bf-ind-w, 0);
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, #22D3EE, #3B82F6);
  box-shadow: 0 0 12px rgba(59,130,246,.55);
  transition:
    left .35s var(--ease-smooth),
    width .35s var(--ease-smooth);
  pointer-events:none;
}
.bf-tab{
  position:relative;
}
.bf-tab.active::after{ display:none; }  /* legacy underline pseudo from earlier pass — sliding bar replaces it */

/* New-row pulse: a row sliding in gets a brief blue flash, then settles. */
@keyframes bfRowSlideIn{
  0%   { transform: translateY(-8px); opacity: 0; background: rgba(59,130,246,.18); }
  60%  { background: rgba(59,130,246,.08); }
  100% { transform: translateY(0); opacity: 1; background: transparent; }
}
.bet-feed .bf-row.bf-new{
  animation: bfRowSlideIn .55s var(--ease-smooth) both;
}
.bet-feed .bf-row{
  transition: background-color .2s ease;
}
.bet-feed .bf-row:hover{
  background-color: rgba(59,130,246,.06);
}

/* ---- Balance count-up tick highlight ---- */
.balance.bh-tick-up   { animation: balanceTickUp   .9s var(--ease-smooth); }
.balance.bh-tick-down { animation: balanceTickDown .9s var(--ease-smooth); }
@keyframes balanceTickUp{
  0%   { box-shadow: 0 0 16px rgba(59,130,246,.22); }
  35%  { box-shadow: 0 0 32px rgba(40,199,111,.65), inset 0 0 0 1px rgba(40,199,111,.45); transform: scale(1.04); }
  100% { box-shadow: 0 0 16px rgba(59,130,246,.22); transform: scale(1); }
}
@keyframes balanceTickDown{
  0%   { box-shadow: 0 0 16px rgba(59,130,246,.22); }
  35%  { box-shadow: 0 0 28px rgba(239,68,68,.45), inset 0 0 0 1px rgba(239,68,68,.35); }
  100% { box-shadow: 0 0 16px rgba(59,130,246,.22); }
}

/* ---- Sidebar HOT / NEW badge subtle pulse ---- */
.sb-hot, .sb-new{
  position:relative;
  overflow:hidden;
}
.sb-hot::after, .sb-new::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255,255,255,.35), transparent 60%);
  opacity:0;
  animation: badgePulse 2.6s ease-in-out infinite;
}
.sb-new::after{
  animation-delay: -1.3s;
}
@keyframes badgePulse{
  0%, 100% { opacity: 0 }
  50%      { opacity: 1 }
}

/* ---- Modern donut loader — replaces ad-hoc spinners ---- */
.bh-loader{
  width:36px; height:36px;
  border-radius:50%;
  background:
    conic-gradient(from 0deg, transparent 0deg, transparent 270deg, #3B82F6 360deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, black 40%);
          mask: radial-gradient(circle, transparent 38%, black 40%);
  animation: bhLoaderSpin .9s linear infinite;
}
@keyframes bhLoaderSpin{
  to { transform: rotate(360deg) }
}

/* ---- Bet-feed empty state ---- */
.bet-feed-empty{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding: 28px 16px;
  color: rgba(219,234,254,.55);
  font-family:'Inter',sans-serif; font-size:15px;
}
.bet-feed-empty .bfe-icon{
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(34,211,238,.10));
  border:1px solid rgba(59,130,246,.22);
  color:#60A5FA;
}
.bet-feed-empty .bfe-text{
  letter-spacing:.02em;
}

@media (prefers-reduced-motion: reduce){
  .recent-played, .rp-card-img, .bf-tab, .balance, .sb-hot::after, .sb-new::after, .bh-loader{
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   CASE OPENING — premium reveal animations
   - Stage shake on reel stop, intensity scales with rarity
   - Winner card pulse + colored glow ring
   - Particle burst on epic / legendary / mythic
============================================================ */

/* Stage shake — tiers by intensity. Small is barely perceptible,
   XL is a satisfying jackpot kick. */
/* Redesigned stop animations (2026-05-25) — the old csShake*
   set translated the entire stage 2-10px with rotation. That's
   casino-slot-machine slop and clashes with the site's otherwise
   calm motion vocabulary. Replaced with a SETTLE pulse: a brief
   scale-down (the "weight" of the landing) easing back to 1.0 on
   ease-out-expo. Intensity scales with rarity via depth of the
   dip. JS keeps the same csShakeS/M/L/XL class names so no app.js
   change needed; only the visual behavior is replaced. */
@keyframes csShakeS{
  0%   { transform: scale(1)     }
  35%  { transform: scale(.998)  }
  100% { transform: scale(1)     }
}
@keyframes csShakeM{
  0%   { transform: scale(1)     }
  35%  { transform: scale(.995)  }
  100% { transform: scale(1)     }
}
@keyframes csShakeL{
  0%   { transform: scale(1)     }
  35%  { transform: scale(.99)   }
  100% { transform: scale(1)     }
}
@keyframes csShakeXL{
  0%   { transform: scale(1)     }
  35%  { transform: scale(.985)  }
  100% { transform: scale(1)     }
}
.cases-stage.csShakeS  { animation: csShakeS  .26s cubic-bezier(0.19, 1, 0.22, 1); }
.cases-stage.csShakeM  { animation: csShakeM  .30s cubic-bezier(0.19, 1, 0.22, 1); }
.cases-stage.csShakeL  { animation: csShakeL  .34s cubic-bezier(0.19, 1, 0.22, 1); }
.cases-stage.csShakeXL { animation: csShakeXL .38s cubic-bezier(0.19, 1, 0.22, 1); }

/* Soft rarity-tinted glow that fades in once when the winner is
   revealed. Replaces the strobe spotlight-flash with something
   that breathes instead of strobing. Painted via ::after on the
   stage so it sits BEHIND the spotlight + winner card. Auto-
   triggered by the cs-revealed class JS already adds. */
@keyframes csRevealGlow{
  0%   { opacity: 0;   transform: scale(.7); }
  40%  { opacity: .55; }
  100% { opacity: 0;   transform: scale(1.15); }
}

/* Winner card — fixed under the spotlight, pulses + glows in its
   rarity color so the reveal reads instantly. */
.case-item.cs-winner{
  z-index: 4;
  /* Smooth zoom-in — no overshoot, no bounce. The card scales up
     once and stays at 1.10, reading as "this is the one" without
     the strobing pop that fought the matte-navy slider vibe. The
     `forwards` fill-mode locks the end scale so the card doesn't
     snap back when the keyframe finishes. */
  animation: csWinnerZoom .42s cubic-bezier(.19,1,.22,1) forwards;
}
@keyframes csWinnerZoom{
  0%   { transform: scale(1)    }
  100% { transform: scale(1.10) }
}
.case-item.cs-winner.rarity-common,
.case-item.cs-winner.rarity-uncommon{
  box-shadow:
    0 0 0 2px rgba(96,165,250,.55),
    0 0 24px rgba(96,165,250,.45),
    0 0 48px rgba(34,211,238,.32);
}
.case-item.cs-winner.rarity-rare{
  box-shadow:
    0 0 0 2px rgba(96,165,250,.85),
    0 0 26px rgba(59,130,246,.65),
    0 0 56px rgba(59,130,246,.40);
}
.case-item.cs-winner.rarity-epic{
  box-shadow:
    0 0 0 2px rgba(168,85,247,.85),
    0 0 28px rgba(168,85,247,.70),
    0 0 60px rgba(217,70,239,.45);
}
.case-item.cs-winner.rarity-legendary{
  box-shadow:
    0 0 0 2px rgba(251,191,36,.95),
    0 0 32px rgba(251,191,36,.80),
    0 0 70px rgba(245,158,11,.55);
  /* No infinite glow pulse — the static gold shadow is enough tier
     signal without strobing against the matte-navy stage. */
}
.case-item.cs-winner.rarity-mythic{
  box-shadow:
    0 0 0 2px rgba(239,68,68,.95),
    0 0 36px rgba(239,68,68,.85),
    0 0 80px rgba(244,114,182,.55);
  /* Same: no infinite filter pulse / hue-rotate — competes with the
     restrained reel slider vibe and reads as a glitch on rapid demos. */
}
@keyframes csLegendaryGlow{
  0%,100%{ filter: drop-shadow(0 0 8px rgba(251,191,36,.6)) }
  50%   { filter: drop-shadow(0 0 18px rgba(251,191,36,1))   }
}
@keyframes csMythicGlow{
  0%,100%{ filter: drop-shadow(0 0 10px rgba(239,68,68,.6))  hue-rotate(0deg) }
  50%   { filter: drop-shadow(0 0 22px rgba(239,68,68,1))    hue-rotate(15deg) }
}

/* Particle burst — spawned around the winner for epic+. Pure CSS
   keyframe; the JS sets --dx / --dy / --rot per-particle. */
.cs-particle{
  position:absolute;
  width:8px; height:8px;
  border-radius:2px;
  pointer-events:none;
  z-index:6;
  transform: translate(-50%, -50%);
  animation: csParticleFly 1.2s var(--ease-smooth) forwards;
  will-change: transform, opacity;
}
.cs-p-epic   { background: linear-gradient(135deg, #a855f7, #d946ef); box-shadow: 0 0 8px rgba(168,85,247,.85); }
.cs-p-legend { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 0 10px rgba(251,191,36,.90); }
.cs-p-mythic { background: linear-gradient(135deg, #ef4444, #f472b6); box-shadow: 0 0 12px rgba(239,68,68,.95); }
@keyframes csParticleFly{
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(0) }
  15%  { opacity: 1 }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(.6) rotate(var(--rot,180deg)) }
}

@media (prefers-reduced-motion: reduce){
  .cases-stage.csShakeS,
  .cases-stage.csShakeM,
  .cases-stage.csShakeL,
  .cases-stage.csShakeXL{ animation: none; }
  .case-item.cs-winner{ animation: none; }
  .cs-particle{ display: none; }
}

/* ============================================================
   PACK CARD with full-bleed art — premium hover + glow
   Applied to .case-card.has-card-img (Clockwork-style packs that
   ship their own card image instead of a 3-icon preview).
============================================================ */
.case-card.has-card-img{
  position: relative;
  /* Override the .case-card base (height:200px). The card art is
     portrait, so reset height and let aspect-ratio drive the box. */
  height: auto !important;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 14px;
  /* Borderless / frameless — pack JPG IS the visual. Soft drop-shadow
     does the lifting; no inset highlight, no outline. */
  background: transparent;
  border: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  isolation: isolate;
  cursor: pointer;
  justify-self: start;
  transition:
    transform .45s var(--ease-bounce),
    box-shadow .35s var(--ease-smooth);
  animation: ccCardIdle 4.8s ease-in-out infinite;
}
.case-card.has-card-img .cc-card-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  z-index: 0;
  transform: scale(1.02);
  transition: transform .6s var(--ease-smooth), filter .35s var(--ease-smooth);
  filter: saturate(.95) brightness(.95);
  user-select: none; -webkit-user-drag: none;
}
.case-card.has-card-img .cc-card-aura{
  position: absolute; inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  /* Cyan + brand-blue + glow color (--case-glow) layered ring that
     intensifies on hover. */
  background:
    conic-gradient(from 0deg,
      rgba(96,165,250,.55) 0deg,
      rgba(34,211,238,.55) 90deg,
      var(--case-glow, rgba(168,85,247,.55)) 180deg,
      rgba(96,165,250,.55) 270deg,
      rgba(96,165,250,.55) 360deg);
  filter: blur(14px);
  opacity: 0;
  transition: opacity .45s var(--ease-smooth);
  animation: ccAuraSpin 10s linear infinite;
}
.case-card.has-card-img .cc-card-shine{
  position: absolute; top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,.0) 35%,
    rgba(255,255,255,.40) 50%,
    rgba(255,255,255,.0) 65%,
    transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: none;
}
.case-card.has-card-img .cc-card-foot{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 14px 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.78) 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  z-index: 2;
  transform: translateY(2px);
  transition: transform .35s var(--ease-smooth);
}
.case-card.has-card-img .cc-name{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:16px;
  letter-spacing:.02em;
  color:#ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
  margin: 0;
}
/* Price block on the catalog card — bigger digits, brighter Hitcoin
   glyph, sat on a dark glass chip so it stays readable against any
   card art behind it. */
.case-card.has-card-img .cc-price-row{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(96,165,250,.30);
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight:800; font-size:15px;
  color:#ffffff;
  font-variant-numeric: tabular-nums;
  letter-spacing:-.005em;
  text-shadow: 0 1px 4px rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.case-card.has-card-img .cc-price-row .bc-glyph{
  width: 22px; height: 22px;
  filter: drop-shadow(0 0 6px rgba(34,211,238,.85)) drop-shadow(0 0 12px rgba(59,130,246,.45));
}

/* Idle float — a gentle 4px bob loop so the row reads as alive.
   Hover overrides it with the lift+rotate combo. */
@keyframes ccCardIdle{
  0%,100%{ transform: translateY(0) rotate(0) }
  50%   { transform: translateY(-3px) rotate(.4deg) }
}
@keyframes ccAuraSpin{
  to{ transform: rotate(360deg) }
}
@keyframes ccCardShine{
  0%   { left: -80%; opacity: 0 }
  10%  { opacity: 1 }
  85%  { opacity: 1 }
  100% { left: 130%; opacity: 0 }
}

/* HOVER — the premium reveal */
.case-card.has-card-img:hover{
  transform: translateY(-10px) scale(1.04) rotate(-1deg);
  animation: none;
  border-color: rgba(96,165,250,.45);
  box-shadow:
    0 24px 60px rgba(0,0,0,.65),
    0 0 38px var(--case-glow, rgba(168,85,247,.55)),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.case-card.has-card-img:hover .cc-card-img{
  transform: scale(1.08);
  filter: saturate(1.10) brightness(1.05);
}
.case-card.has-card-img:hover .cc-card-aura{
  opacity: 1;
}
.case-card.has-card-img:hover .cc-card-shine{
  animation: ccCardShine 1.1s var(--ease-smooth);
}
.case-card.has-card-img:hover .cc-card-foot{
  transform: translateY(0);
}
.case-card.has-card-img:active{
  transform: translateY(-4px) scale(1.01) rotate(-.5deg);
  transition-duration: .15s;
}

@media (prefers-reduced-motion: reduce){
  .case-card.has-card-img,
  .case-card.has-card-img .cc-card-aura,
  .case-card.has-card-img .cc-card-shine{
    animation: none !important;
    transition: none !important;
  }
}


/* ============================================================
   CASE ITEMS — strip colored rarity backgrounds, leave glass
   transparent tiles with bigger artwork and a rarity-tinted rim.
   Applies to both the reel (.case-item) and the "Case contains"
   grid (.cig-item).
============================================================ */

/* --- Reel item --- */
.case-item{
  flex: 0 0 150px;
  height: 150px;
  border-radius: 14px;
  padding: 12px 10px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 6px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:13px; color:#fff;
  /* GLASS — translucent navy, rarity-tinted rim. No solid color fill. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(11,15,31,.55) !important;
  border: 1px solid rgba(96,165,250,.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 12px rgba(0,0,0,.35) !important;
  text-shadow: none;
  position: relative; overflow: hidden;
}
.case-item .ci-icon-wrap{
  width: 78px; height: 78px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display:flex; align-items:center; justify-content:center;
}
.case-item .ci-img{
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
.case-item .ci-mult{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight: 800; font-size: 16px;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  margin-top: -2px;
}

/* Unbloxed-style reel: NO per-rarity halos. Items are flat against
   the dark stage; the only thing that pops is the artwork itself.
   A single neutral drop-shadow gives the tiles minimal depth so
   they don't look pasted onto the background, but no colored glow
   bleeds into adjacent tiles during the spin. The .cs-winner
   highlight at line ~24275 still carries the reveal moment. */
.case-item.rarity-common,
.case-item.rarity-uncommon,
.case-item.rarity-rare,
.case-item.rarity-epic,
.case-item.rarity-legendary,
.case-item.rarity-mythic{
  border-color: rgba(255,255,255,.06) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 4px 14px rgba(0,0,0,.40) !important;
}
.case-item.rarity-mythic::before{ display: none; }   /* drop the spinning conic ring */

/* --- Possible items grid --- */
.cig-item{
  border-radius: 14px;
  padding: 14px 10px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    rgba(11,15,31,.55) !important;
  border: 1px solid rgba(96,165,250,.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 12px rgba(0,0,0,.35) !important;
  text-shadow: none;
  color: #fff;
  font-family:'Inter',sans-serif;
  position: relative; overflow: hidden;
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth);
}
.cig-item:hover{ transform: translateY(-3px); }
.cig-item .cig-icon-wrap{
  width: 84px; height: 84px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display:flex; align-items:center; justify-content:center;
}
.cig-item .cig-img{
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.55));
}
.cig-item .cig-name{
  font-size: 14px; font-weight: 700;
  text-align: center; line-height: 1.15;
  color: rgba(255,255,255,.92);
}
.cig-item .cig-mult{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight: 800; font-size: 16px;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}
/* Per-rarity rim for the grid items too. */
.cig-item.rarity-common,
.cig-item.rarity-uncommon{ border-color: rgba(148,163,184,.45) !important; }
.cig-item.rarity-rare     { border-color: rgba(96,165,250,.55) !important; }
.cig-item.rarity-epic     { border-color: rgba(168,85,247,.60) !important; }
.cig-item.rarity-legendary{ border-color: rgba(251,191,36,.65) !important; }
.cig-item.rarity-mythic   { border-color: rgba(239,68,68,.70) !important; }

/* ============================================================
   PACK CARD HOVER — drop the conic gradient ring (it clashed
   with the card art) and the shine sweep. Replace with a subtle
   premium "shift" + warm glow lift.
============================================================ */
.case-card.has-card-img .cc-card-aura{ display: none !important; }
.case-card.has-card-img .cc-card-shine{ display: none !important; }
.case-card.has-card-img{
  /* Smoother transition curve for the lift. */
  transition:
    transform .55s cubic-bezier(.16, 1, .3, 1),
    box-shadow .45s var(--ease-smooth),
    border-color .35s var(--ease-smooth);
}
.case-card.has-card-img:hover{
  /* Premium "rise + slight tilt" — no color overlay, no gradient,
     just refined movement. */
  transform: translateY(-12px) scale(1.045) rotate(-1.5deg) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow:
    0 28px 60px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.10),
    0 0 50px rgba(0,0,0,.35) !important;
}
.case-card.has-card-img:hover .cc-card-img{
  /* Gentle inner parallax — image scales a hair more than the card
     so it reads as "popping forward" under the lift. */
  transform: scale(1.06) !important;
  filter: saturate(1.06) brightness(1.04) !important;
}
@media (prefers-reduced-motion: reduce){
  .case-card.has-card-img:hover{
    transform: translateY(-4px) !important;
  }
  .case-card.has-card-img:hover .cc-card-img{ transform: scale(1) !important; }
}


/* ============================================================
   UNBOXING REVEAL — premium spotlight + selector brackets
   When the reel stops, the stage gets .cs-revealed which:
   1. Drops a radial vignette darkening the sides (focus the eye)
   2. Paints animated corner brackets around the centered winner
   3. The winner card already lifts/glows from cs-winner
   4. All items pick up an ambient drop-shadow during scroll so
      the artwork pops, not the box
============================================================ */

/* Ambient item glow during scroll (subtle, scales with rarity). */
.case-item .ci-img{
  transition: filter .25s var(--ease-smooth);
}
.case-item.rarity-rare      .ci-img{ filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(59,130,246,.30))  }
.case-item.rarity-epic      .ci-img{ filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(168,85,247,.40))  }
.case-item.rarity-legendary .ci-img{ filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(251,191,36,.55))  }
.case-item.rarity-mythic    .ci-img{ filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(239,68,68,.60))   }

/* The winner card picks up an extra inner halo behind the artwork
   so the item itself glows independently of the rim. */
/* Image pulse retired — the card zoom carries the reveal, and an
   infinite scale pulse on the inner image fought the matte-navy
   slider vibe + made rapid demo spins feel jumpy. */
.case-item.cs-winner .ci-img{ animation: none; }

/* SPOTLIGHT — a radial vignette over the stage that only renders
   when .cs-revealed is set. Dark at the corners, transparent in
   the center column so the winner stays bright. */
.cases-stage::after{
  content:"";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 22% 86% at 50% 50%, transparent 0%, transparent 38%, rgba(7,10,22,.55) 78%, rgba(7,10,22,.80) 100%);
  opacity: 0;
  transition: opacity .35s var(--ease-smooth);
  z-index: 3;
  border-radius: inherit;
}
.cases-stage.cs-revealed::after{ opacity: 1; }

/* SELECTOR — animated corner brackets that frame the winning slot.
   Sit at the center of the stage, behind the winner card so they
   read as a "this is the one" indicator. Rarity colors via
   data-rarity on the stage. */
.cs-selector{ display: none; }
.cases-stage::before{
  content:"";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 160px; height: 168px;
  pointer-events: none;
  border-radius: 14px;
  opacity: 0;
  z-index: 4;
  /* Four corner brackets via gradient backgrounds — only the
     corners are painted, the center stays transparent. */
  background:
    /* top-left corner */
    linear-gradient(to right, var(--sel-color, #60A5FA) 0 18px, transparent 18px) top left / 18px 3px no-repeat,
    linear-gradient(to bottom, var(--sel-color, #60A5FA) 0 18px, transparent 18px) top left / 3px 18px no-repeat,
    /* top-right corner */
    linear-gradient(to left, var(--sel-color, #60A5FA) 0 18px, transparent 18px) top right / 18px 3px no-repeat,
    linear-gradient(to bottom, var(--sel-color, #60A5FA) 0 18px, transparent 18px) top right / 3px 18px no-repeat,
    /* bottom-left corner */
    linear-gradient(to right, var(--sel-color, #60A5FA) 0 18px, transparent 18px) bottom left / 18px 3px no-repeat,
    linear-gradient(to top, var(--sel-color, #60A5FA) 0 18px, transparent 18px) bottom left / 3px 18px no-repeat,
    /* bottom-right corner */
    linear-gradient(to left, var(--sel-color, #60A5FA) 0 18px, transparent 18px) bottom right / 18px 3px no-repeat,
    linear-gradient(to top, var(--sel-color, #60A5FA) 0 18px, transparent 18px) bottom right / 3px 18px no-repeat;
  filter:
    drop-shadow(0 0 8px var(--sel-color, rgba(96,165,250,.85)))
    drop-shadow(0 0 18px var(--sel-color, rgba(96,165,250,.50)));
  transition: opacity .35s var(--ease-smooth);
}
.cases-stage.cs-revealed::before{
  opacity: 1;
  animation: csSelectorPulse 1.4s ease-in-out infinite;
}
@keyframes csSelectorPulse{
  0%,100%{ transform: translate(-50%, -50%) scale(1)    }
  50%   { transform: translate(-50%, -50%) scale(1.04) }
}

/* Rarity-tinted selector colors. */
.cases-stage[data-rarity="common"],
.cases-stage[data-rarity="uncommon"]{ --sel-color: #93c5fd; }
.cases-stage[data-rarity="rare"]     { --sel-color: #60A5FA; }
.cases-stage[data-rarity="epic"]     { --sel-color: #c084fc; }
.cases-stage[data-rarity="legendary"]{ --sel-color: #fbbf24; }
.cases-stage[data-rarity="mythic"]   { --sel-color: #f87171; }

/* The spotlight hairline (already exists as .cases-spotlight) fades
   out once a winner is revealed — the selector brackets take over. */
.cases-stage.cs-revealed .cases-spotlight{ opacity: 0; transition: opacity .25s ease; }

@media (prefers-reduced-motion: reduce){
  .cases-stage::before{ animation: none }
  .case-item.cs-winner .ci-img{ animation: none }
}


/* ============================================================
   FINAL-STRETCH SUSPENSE — fires in the last 35% of the spin.
   Center hairline grows + pulses faster, ambient vignette dims
   the corners early so the eye is locked on the slowing crawl.
============================================================ */
.cases-stage.cs-final::after{
  /* Vignette darker but smaller hole than full cs-revealed — so
     the crawling items stay visible but the corners go quiet. */
  content:"";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 28% 90% at 50% 50%, transparent 0%, transparent 32%, rgba(7,10,22,.42) 70%, rgba(7,10,22,.62) 100%);
  opacity: 1;
  z-index: 3;
  border-radius: inherit;
  animation: csFinalVignettePulse 1.1s ease-in-out infinite;
}
@keyframes csFinalVignettePulse{
  0%,100%{ opacity: .85 }
  50%   { opacity: 1    }
}
/* Once we hit the full revealed state, the post-spin vignette
   (.cases-stage::after) takes over. */
.cases-stage.cs-revealed.cs-final::after{
  animation: none;
  background:
    radial-gradient(ellipse 22% 86% at 50% 50%, transparent 0%, transparent 38%, rgba(7,10,22,.55) 78%, rgba(7,10,22,.80) 100%);
}
/* Center hairline beats faster + thicker during the final stretch
   to amp the anticipation. */
.cases-stage.cs-final .cases-spotlight{
  width: 3px;
  animation: csSpotlightBeat .55s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(59,130,246,.85)) drop-shadow(0 0 22px rgba(34,211,238,.55));
}
@keyframes csSpotlightBeat{
  0%,100%{ transform: translateX(-50%) scaleY(1)    ; opacity: .85 }
  50%   { transform: translateX(-50%) scaleY(1.04) ; opacity: 1    }
}

/* Smooth zoom-in reveal — single scale up to 1.10 with a clean
   ease-out, no slam/overshoot, no rebound, no infinite glow
   pulse. The bouncy 1.28 → .94 → 1.10 → 1.06 slam felt loud
   against the matte-navy slider vibe and read as glitchy on
   rapid demo spins. The static rarity glow box-shadow further
   below handles tier signal without strobing. */
.case-item.cs-winner{
  z-index: 5;
  animation: csWinnerZoom .42s cubic-bezier(.19,1,.22,1) forwards !important;
}
/* Legendary + mythic share the same zoom — no infinite glow pulse
   compound. The static gold/red rim shadow tells you the tier. */
.case-item.cs-winner.rarity-legendary,
.case-item.cs-winner.rarity-mythic{
  animation: csWinnerZoom .42s cubic-bezier(.19,1,.22,1) forwards !important;
}

@media (prefers-reduced-motion: reduce){
  .cases-stage.cs-final::after,
  .cases-stage.cs-final .cases-spotlight,
  .case-item.cs-winner{
    animation: none !important;
  }
}


/* ============================================================
   UNBOXING REEL — HypeDrop / RBXValk-inspired modern layout
   Taller stage, dot-grid backdrop, edge-fade mask, chevron
   pointers, vertical-card items with bigger artwork + rarity
   strip.
============================================================ */

/* --- Stage chrome --- */
.cases-stage{
  height: 260px !important;
  border-radius: 18px !important;
  /* Pure dark canvas + a sparse dot grid for the "machine"
     texture. No competing radial-gradient halo. */
  background:
    radial-gradient(circle, rgba(96,165,250,.05) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(11,15,31,.95), rgba(7,10,22,.95)) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 50px rgba(0,0,0,.55) !important;
  position: relative;
  overflow: hidden;
}
/* Side-fade mask so items at the far edges blur into the stage
   background — keeps focus on the center while the reel scrolls. */
.cases-reel-wrap{
  position: absolute; inset: 0;
  display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Center hairline — softer + thinner during scroll; gives way to
   chevron pointers as the dominant indicator. */
.cases-spotlight{
  left: 50% !important;
  width: 1px !important;
  top: 18px !important;
  bottom: 18px !important;
  background: linear-gradient(180deg,
    rgba(96,165,250,0)  0%,
    rgba(96,165,250,.55) 30%,
    rgba(34,211,238,.85) 50%,
    rgba(96,165,250,.55) 70%,
    rgba(96,165,250,0) 100%) !important;
  box-shadow:
    0 0 4px rgba(59,130,246,.45),
    0 0 14px rgba(34,211,238,.25) !important;
  z-index: 4 !important;
}

/* Chevron pointers — top and bottom of the center column, point
   inward. Anchored modern HypeDrop-style indicators. */
.cs-pointer{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: #60A5FA;
  z-index: 5;
  pointer-events: none;
  filter:
    drop-shadow(0 0 8px rgba(59,130,246,.85))
    drop-shadow(0 0 16px rgba(34,211,238,.40));
}
.cs-pointer-top{ top: -2px; }
.cs-pointer-bot{ bottom: -2px; }
/* Final-stretch pointer pulses removed — they were keyframe-animating
   concurrently with the reel transition's slow tail, competing for
   compositor frames at the exact moment any stutter is most visible.
   The cs-final box-shadow edge dim already carries the suspense beat. */
.cases-stage.cs-final .cs-pointer-top,
.cases-stage.cs-final .cs-pointer-bot{ animation: none; }
@keyframes csPtrTopBeat{
  0%,100%{ transform: translateX(-50%) translateY(0)   ; color: #60A5FA }
  50%   { transform: translateX(-50%) translateY(3px) ; color: #22D3EE }
}
@keyframes csPtrBotBeat{
  0%,100%{ transform: translateX(-50%) translateY(0)    ; color: #60A5FA }
  50%   { transform: translateX(-50%) translateY(-3px) ; color: #22D3EE }
}
/* Once revealed (winner locked), chevrons tint to the rarity
   color so they read as the selection frame indicator. */
.cases-stage.cs-revealed .cs-pointer{ color: var(--sel-color, #60A5FA); transition: color .25s ease; }
.cases-stage.cs-revealed.cs-final .cs-pointer-top,
.cases-stage.cs-revealed.cs-final .cs-pointer-bot{ animation: none; }

/* --- Reel item: vertical card layout --- */
.cases-reel{
  display: flex !important;
  gap: 12px !important;
  padding: 0 14px !important;
  height: 200px !important;
  align-items: center !important;
}
.case-item{
  flex: 0 0 140px !important;
  height: 180px !important;
  width: 140px !important;
  padding: 8px 8px 10px !important;
  display: grid !important;
  grid-template-rows: 4px 1fr auto !important;
  gap: 8px !important;
  border-radius: 12px !important;
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
    rgba(11,15,31,.65) !important;
}
/* The "rarity strip" at the very top of the card — a clean color
   bar so the rarity reads at a glance even when the image hasn't
   loaded yet. */
.case-item::before{
  content:"";
  display: block;
  width: 100%; height: 4px;
  border-radius: 2px;
  background: var(--it-color, rgba(125,211,252,.85));
  box-shadow: 0 0 8px var(--it-color, rgba(125,211,252,.55));
  align-self: start;
}
.case-item.rarity-common,
.case-item.rarity-uncommon{ --it-color: #7dd3fc; }
.case-item.rarity-rare     { --it-color: #60A5FA; }
.case-item.rarity-epic     { --it-color: #c084fc; }
.case-item.rarity-legendary{ --it-color: #fde047; }
.case-item.rarity-mythic   { --it-color: #f87171; }

.case-item .ci-icon-wrap{
  width: 100% !important; height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.case-item .ci-img{
  max-width: 88%; max-height: 100%;
  object-fit: contain;
}
.case-item .ci-name{
  display: none;   /* name is on the Possible Items grid; reel cards just need image + multi */
}
.case-item .ci-mult{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight: 800; font-size: 16px;
  letter-spacing: -.005em;
  color: #ffffff;
  text-align: center;
  align-self: end;
  font-variant-numeric: tabular-nums;
}
.case-item .ci-rarity-tag,
.case-item .ci-rarity{
  display: none;   /* rarity is communicated by the top strip + rim glow */
}
.case-item .ci-shine{ display: none; }

@media (prefers-reduced-motion: reduce){
  .cs-pointer{ animation: none !important; }
}

/* ============================================================
   UNBOXING REVAMP — Item-centric highlights
   The card chrome fades; the artwork itself carries the rarity
   glow via drop-shadow. A rarity hairline strip at the bottom
   marks the tier without a heavy colored border. A center
   selector frame paints around the WINNING ITEM (not abstract
   corner brackets) so the highlight is anchored to the actual
   pull. Inspired by HypeDrop / Stake's clean item-first reel.
============================================================ */

/* --- Stage: cleaner, no double radial halos --- */
.cases-stage{
  height: 280px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle, rgba(96,165,250,.045) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(11,15,31,.96), rgba(7,10,22,.96)) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 0 0 60px rgba(0,0,0,.55),
    0 14px 40px rgba(0,0,0,.45) !important;
}

/* Drop the vertical light bar entirely — replaced by horizontal
   rails that frame the item row (CS:GO / HypeDrop style). */
.cases-spotlight{
  display: none !important;
}

/* No bracket / rail / line at the center — just two clean chevron
   triangles, one above and one below the row, pointing inward at
   the winning column. This is the pattern every successful modern
   unboxing site converged on (HypeDrop / DatDrop / Stake / RBXValk):
   the indicator gets out of the way, and the winning ITEM itself
   carries the dramatic highlight when it lands. */
.cases-stage > .cases-reel-wrap::before,
.cases-stage > .cases-reel-wrap::after{ display: none !important; }

/* Restore the chevron pointers — clean, larger, modern. They tint
   to the winning rarity on reveal via the existing --sel-color
   cascade (legendary → gold, epic → purple, etc). */
.cs-pointer{
  display: flex !important;
  position: absolute;
  left: 50% !important;
  transform: translateX(-50%);
  width: 26px !important;
  height: 18px !important;
  align-items: center; justify-content: center;
  color: rgba(125,211,252,.95) !important;
  pointer-events: none;
  z-index: 7 !important;
  filter:
    drop-shadow(0 0 8px rgba(125,211,252,.75))
    drop-shadow(0 0 16px rgba(125,211,252,.35)) !important;
  transition: color .25s var(--ease-smooth, ease), filter .25s var(--ease-smooth, ease);
}
.cs-pointer-top{ top: 10px !important; bottom: auto !important; }
.cs-pointer-bot{ bottom: 10px !important; top: auto !important; }
.cs-pointer svg{ width: 26px; height: 18px; display: block; }

/* Final-stretch chevron pulse removed (see note at the earlier
   cs-final pointer rule) — keyframe animations during the slow tail
   of the reel transition were stealing compositor frames. */
.cases-stage.cs-final .cs-pointer-top,
.cases-stage.cs-final .cs-pointer-bot{ animation: none; }
@keyframes csChevTopBeat{
  0%,100%{ transform: translateX(-50%) translateY(0)    }
  50%   { transform: translateX(-50%) translateY(3px)  }
}
@keyframes csChevBotBeat{
  0%,100%{ transform: translateX(-50%) translateY(0)    }
  50%   { transform: translateX(-50%) translateY(-3px) }
}

/* Revealed: chevrons tint to the rarity of the pulled item so they
   match the winning card's glow without screaming. */
.cases-stage.cs-revealed .cs-pointer{
  color: var(--sel-color, #7dd3fc) !important;
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, var(--sel-color, #7dd3fc) 85%, transparent))
    drop-shadow(0 0 20px color-mix(in srgb, var(--sel-color, #7dd3fc) 45%, transparent)) !important;
}
.cases-stage.cs-revealed .cs-pointer-top,
.cases-stage.cs-revealed .cs-pointer-bot{ animation: none !important; }

@media (max-width: 760px){
  .cs-pointer-top{ top: 6px !important; }
  .cs-pointer-bot{ bottom: 6px !important; }
}
@media (prefers-reduced-motion: reduce){
  .cs-pointer-top,
  .cs-pointer-bot{ animation: none !important; }
}

/* Edge vignettes — solid dark gradient overlays on the L/R sides.
   Stronger than the mask fade so the center is the clear focal area
   and the sides feel like they bleed into the stage chrome. */
.cases-reel-wrap{
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
.cases-stage::before{
  /* repurpose the old corner-bracket pseudo — now a left-side dark wash */
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: 22% !important;
  height: 100% !important;
  pointer-events: none;
  z-index: 3 !important;
  background-image: linear-gradient(90deg,
    rgba(7,10,22,.95) 0%,
    rgba(7,10,22,.75) 35%,
    rgba(7,10,22,.35) 70%,
    rgba(7,10,22,0) 100%) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  border-radius: 20px 0 0 20px !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
}
/* Don't let the reveal pulse re-trigger transform/scale on this
   repurposed pseudo. */
.cases-stage.cs-revealed::before{
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}
/* Right-side dark wash via a sibling pseudo on the stage. The
   existing cases-stage::after is used by .cs-revealed for the
   vignette during reveal — so we layer the side fade on a new
   helper pseudo via a wrapper-style stacked gradient on the stage
   itself. Implementation: stack a second background on .cases-stage. */
.cases-stage{
  background:
    /* right-side dark wash (drawn first, sits at the right) */
    linear-gradient(270deg,
      rgba(7,10,22,.95) 0%,
      rgba(7,10,22,.75) 8%,
      rgba(7,10,22,.35) 16%,
      rgba(7,10,22,0) 22%) right top / 100% 100% no-repeat,
    radial-gradient(circle, rgba(96,165,250,.045) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(11,15,31,.96), rgba(7,10,22,.96)) !important;
}

/* --- Reel cards: NEAR-INVISIBLE chrome, item is the focus.
   Bumped from 158×210 → 196×260 so the artwork + drop-chance %
   have room to breathe. The cases-stage height + the multi-row
   responsive vars below scale to match. --- */
.case-item{
  flex: 0 0 196px !important;
  width: 196px !important;
  height: 260px !important;
  padding: 16px 14px 14px !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  /* Almost-transparent tile so the artwork floats. The rarity
     comes from the bottom hairline strip + the image's own glow. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.005) 100%),
    rgba(11,15,31,.35) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 14px rgba(0,0,0,.30) !important;
  position: relative; overflow: visible !important;
}
/* Kill the legacy top strip + ::before bar */
.case-item::before{ display: none !important; }

/* Bottom hairline rarity strip — clean modern tier marker. */
.case-item::after{
  content: "";
  position: absolute;
  left: 18%; right: 18%;
  bottom: 0;
  height: 2px;
  border-radius: 99px;
  background: var(--it-color, rgba(125,211,252,.80));
  box-shadow: 0 0 10px var(--it-color, rgba(125,211,252,.60));
  opacity: .85;
  z-index: 1;
  pointer-events: none;
}

/* Per-rarity color token consumed by the artwork drop-shadow,
   the bottom strip, and the multi color. */
.case-item.rarity-common,
.case-item.rarity-uncommon{ --it-color: #94a3b8; }
.case-item.rarity-rare    { --it-color: #60A5FA; }
.case-item.rarity-epic    { --it-color: #c084fc; }
.case-item.rarity-legendary{ --it-color: #fbbf24; }
.case-item.rarity-mythic  { --it-color: #f87171; }

/* No more neon rim glow box-shadows — the artwork carries it. */
.case-item.rarity-common,
.case-item.rarity-uncommon,
.case-item.rarity-rare,
.case-item.rarity-epic,
.case-item.rarity-legendary,
.case-item.rarity-mythic{
  border: 1px solid rgba(255,255,255,.04) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 14px rgba(0,0,0,.30) !important;
}

/* Icon wrap — square, transparent, fills the artwork zone.
   Height scaled with the larger tile so the artwork doesn't crop. */
.case-item .ci-icon-wrap{
  width: 100% !important;
  height: 158px !important;
  border-radius: 0 !important;       /* drop legacy circle radius */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex; align-items: center; justify-content: center;
}
/* The artwork carries the rarity glow as a drop-shadow halo.
   This is the "highlight around the ACTUAL items" the user asked for. */
.case-item .ci-img{
  max-width: 96% !important;
  max-height: 100% !important;
  object-fit: contain;
  transition: filter .25s var(--ease-smooth, ease), transform .25s var(--ease-smooth, ease);
}
.case-item.rarity-common    .ci-img,
.case-item.rarity-uncommon  .ci-img{ filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(148,163,184,.30)); }
.case-item.rarity-rare      .ci-img{ filter: drop-shadow(0 8px 16px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(96,165,250,.55)); }
.case-item.rarity-epic      .ci-img{ filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(192,132,252,.65)); }
.case-item.rarity-legendary .ci-img{ filter: drop-shadow(0 8px 20px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(251,191,36,.75)); }
.case-item.rarity-mythic    .ci-img{ filter: drop-shadow(0 8px 22px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(248,113,113,.85)); }

/* Reel item name — bumped 10.5 → 13px for the bigger tile. */
.case-item .ci-name{
  display: block !important;
  font-family: 'Inter','SF Pro Display',sans-serif;
  font-size: 15px; font-weight: 700;
  color: rgba(255,255,255,.85);
  text-align: center;
  line-height: 1.18;
  letter-spacing: .005em;
  margin-top: 4px;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.case-item .ci-mult{
  font-family: 'Inter','SF Pro Display',sans-serif;
  /* Bumped 14 → 22px on the wider tile so the drop chance is the
     loud number on the card. With the new 196×260 tile size, this
     reads cleanly even at arm's length. */
  font-size: 22px; font-weight: 800;
  letter-spacing: -.01em;
  color: var(--it-color, #fff);
  /* Strong inset shadow so the % stays legible against any rarity
     drop-shadow halo. */
  text-shadow:
    0 1px 2px rgba(0,0,0,.90),
    0 0 18px rgba(0,0,0,.80);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
  /* Subtle pill backdrop so the number sits above the artwork glow
     instead of fighting it. */
  padding: 2px 10px;
  border-radius: 99px;
  background: rgba(11,15,31,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* --- Reveal: center selector frame paints around the WINNING ITEM
   card, not generic corner brackets in the middle of the stage.
   The legacy ::before corner-bracket pseudo is repurposed further
   down as a left-side dark wash, so we don't kill it here. --- */

/* Selector ring around the winning card — gradient outline halo. */
/* ============================================================
   PREMIUM SPIN ANIMATION POLISH — motion blur, speed scale,
   spotlight flash, spring overshoot. Layered via classes the
   spinReel JS toggles on/off at the right moments.
============================================================ */

/* DURING SPIN — pure GPU translation, zero per-item raster work.
   Items become flat PNG icons that translate on the compositor
   layer with no filters, no transforms, no transitions, nothing
   else animating. Exactly how packdraw/unbloxed move their reels.
   Specificity-boosted with html[data-theme="phase2"] + section
   prefix so we beat the open-view base rule at line 37346 which
   sets `transition: transform .26s !important` on every .case-item. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage.cs-spinning .case-item,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-reel.cs-spinning > .case-item,
section[data-route="cases"][data-cs-view="open"] .cases-stage.cs-spinning .case-item,
section[data-route="cases"][data-cs-view="open"] .cases-reel.cs-spinning > .case-item,
.cs-open-view .cases-stage.cs-spinning .case-item,
.cs-open-view .cases-reel.cs-spinning > .case-item{
  filter: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto;
  /* contain: layout paint isolates each item as its own paint
     context so the browser skips re-painting items when only the
     parent reel's transform changes. */
  contain: layout paint;
}
.cases-stage.cs-spinning .ci-img,
.cases-reel.cs-spinning .ci-img{
  filter: none !important;
  transition: none !important;
}
.cases-stage.cs-spinning .ci-mult,
.cases-reel.cs-spinning .ci-mult{
  opacity: 0 !important;
  transition: none !important;
}
.cases-stage.cs-spinning .ci-name,
.cases-reel.cs-spinning .ci-name{
  opacity: 0 !important;
  transition: none !important;
}
/* Reel itself during spin — GPU layer hints. The inline transform
   set by JS is translate3d() which already promotes the layer; the
   backface-visibility + will-change here are belt-and-braces for
   browsers that need extra nudging to keep the layer composited. */
.cases-reel.cs-spinning{
  will-change: transform !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* No transition on anything except transform — the inline style
     sets transform with the spin easing; nothing else should animate. */
  transition-property: transform !important;
}

/* Landing flash + final-stretch vignette dim — both retired to
   match unbloxed's clean settle. The reel just decelerates to a
   stop with no flash and no edge darkening. JS still adds the
   .cs-spotlight-flash and .cs-final classes; we keep them as
   no-op hooks so the JS doesn't need to branch. */
.cases-stage.cs-spotlight-flash::before{ content: none; }
.cases-stage.cs-final{ box-shadow: none !important; }
.cases-stage.cs-final .cases-spotlight{ animation: none; }

@media (prefers-reduced-motion: reduce){
  .cases-stage.cs-spinning .case-item,
  .cases-reel.cs-spinning > .case-item,
  .cases-stage.cs-spinning .ci-img,
  .cases-stage.cs-spinning .ci-mult{
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .cases-stage.cs-spotlight-flash::before,
  .cases-stage.cs-final .cases-spotlight{ animation: none !important; }
}

.case-item.cs-winner{
  z-index: 6 !important;
  border-color: var(--it-color, #60A5FA) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%),
    rgba(11,15,31,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px var(--it-color, #60A5FA),
    0 0 22px color-mix(in srgb, var(--it-color, #60A5FA) 65%, transparent),
    0 0 48px color-mix(in srgb, var(--it-color, #60A5FA) 35%, transparent),
    0 10px 28px rgba(0,0,0,.55) !important;
}
.case-item.cs-winner::after{
  height: 3px !important;
  left: 12% !important; right: 12% !important;
  opacity: 1 !important;
  box-shadow: 0 0 18px var(--it-color, rgba(125,211,252,.85)) !important;
}
.case-item.cs-winner .ci-img{
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.55))
    drop-shadow(0 0 28px var(--it-color, rgba(96,165,250,.85)))
    drop-shadow(0 0 56px color-mix(in srgb, var(--it-color, #60A5FA) 55%, transparent)) !important;
}
.case-item.cs-winner .ci-name{ color: #fff !important; }
.case-item.cs-winner .ci-mult{
  font-size: 16px !important;
  color: #fff !important;
  text-shadow: 0 0 14px color-mix(in srgb, var(--it-color, #60A5FA) 65%, transparent) !important;
}

/* Stage vignette during reveal — keep the existing darkening but
   tighten the focused column so only the winner shines through. */
.cases-stage.cs-revealed::after{
  background:
    radial-gradient(ellipse 18% 90% at 50% 50%, transparent 0%, transparent 42%, rgba(7,10,22,.62) 78%, rgba(7,10,22,.85) 100%) !important;
}

/* ============================================================
   PACK CONTAINS — squarer, image-dominant tiles (packdraw style)
   Aspect close to 1:1.15 with the artwork zone flex-growing to
   fill ~60% of vertical real estate. Padding + gap tightened so
   the card doesn't read as a vertical column of separated rows.
============================================================ */
.cig-item{
  border-radius: 12px !important;
  padding: 10px 8px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  /* Squarer aspect — slight portrait so the % pill + name + payout
     have room to breathe without dominating the card. */
  aspect-ratio: 1 / 1.18;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.005) 100%),
    rgba(11,15,31,.45) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 18px rgba(0,0,0,.30) !important;
  position: relative; overflow: visible !important;
  transition: transform .25s var(--ease-smooth, ease), border-color .25s var(--ease-smooth, ease), box-shadow .25s var(--ease-smooth, ease);
}
.cig-item.rarity-common,
.cig-item.rarity-uncommon{ --it-color: #94a3b8; }
.cig-item.rarity-rare    { --it-color: #60A5FA; }
.cig-item.rarity-epic    { --it-color: #c084fc; }
.cig-item.rarity-legendary{ --it-color: #fbbf24; }
.cig-item.rarity-mythic  { --it-color: #f87171; }

.cig-item:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--it-color, #60A5FA) 50%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.40),
    0 0 28px color-mix(in srgb, var(--it-color, #60A5FA) 28%, transparent) !important;
}
/* Packdraw-style inner-image scale on hover. Their site keeps the
   card chrome still and scales just the artwork inside (scale-100 →
   scale-125 in Tailwind speak) so the item appears to "pop forward".
   Slightly more conservative here (1.10) to match the rest of the
   site's hover language. */
.cig-item .cig-img{
  transition: transform .25s cubic-bezier(.4,0,.2,1), filter .25s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.cig-item:hover .cig-img{ transform: scale(1.10); }

/* Bottom rarity strip on the grid tile — clean solid bar (no glow halo). */
.cig-item::after{
  content: "";
  position: absolute;
  left: 18%; right: 18%;
  bottom: 0;
  height: 2px;
  border-radius: 99px;
  background: var(--it-color, rgba(125,211,252,.80));
  opacity: .9;
  pointer-events: none;
}

/* Drop the bulky LEGENDARY / EPIC / COMMON pill tags — rarity is
   already conveyed by the artwork glow + hairline strip. */
.cig-rarity-tag{ display: none !important; }

/* Kill the rotating rainbow conic ring on mythic grid items — the
   .case-item variant already has this override (line ~23223) but the
   .cig-item rarity-mythic was still inheriting the base .rarity-mythic
   pseudo from line ~5521. Looks out of place in the static grid; the
   rarity is already telegraphed by the bottom hairline + image glow. */
.cig-item.rarity-mythic::before{ display: none !important; }

.cig-icon-wrap{
  width: 100% !important;
  /* Grow to fill the card's available height — the squarer parent
     gives ~60-65% of vertical real estate, dwarfing the prior fixed
     96px box that left the artwork stranded. min-height: 0 lets
     flex actually shrink/grow this child instead of using content
     height (the default for column flex parents). */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 0 !important;          /* drop legacy circle radius */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex; align-items: center; justify-content: center;
}
.cig-img{
  /* Fill the wrap — both axes. object-fit:contain preserves aspect
     ratio so square or wide artworks don't distort. Bumped from
     86% to 100% so the artwork doesn't sit in a margin-padded
     island inside the wrap. */
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
}
.cig-item.rarity-common    .cig-img,
.cig-item.rarity-uncommon  .cig-img{ filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(148,163,184,.30)); }
.cig-item.rarity-rare      .cig-img{ filter: drop-shadow(0 8px 16px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(96,165,250,.55)); }
.cig-item.rarity-epic      .cig-img{ filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(192,132,252,.65)); }
.cig-item.rarity-legendary .cig-img{ filter: drop-shadow(0 8px 20px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(251,191,36,.75)); }
.cig-item.rarity-mythic    .cig-img{ filter: drop-shadow(0 8px 22px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(248,113,113,.85)); }

.cig-item .cig-name{
  font-family: 'Inter','SF Pro Display',sans-serif;
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,.92);
  text-align: center;
  line-height: 1.15;
  letter-spacing: -.005em;
  /* Single-line ellipsis so a long name doesn't push the payout
     pill off-card when the tile is at min width. */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.cig-item .cig-stats{
  display: flex; gap: 8px; align-items: center;
  padding: 4px 12px;
  background: rgba(0,0,0,.30) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 99px !important;
}
.cig-item .cig-mult{
  font-family: 'Inter','SF Pro Display',sans-serif;
  font-size: 15px; font-weight: 800;
  letter-spacing: -.005em;
  color: var(--it-color, #fff) !important;
  font-variant-numeric: tabular-nums;
}
.cig-item .cig-pct{
  /* Bumped from 10.5px → 13px so the per-item drop chance reads
     cleanly at a glance instead of forcing the player to lean in. */
  font-size: 15px;
  color: rgba(255,255,255,.78) !important;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

/* Section header refresh */
.case-items-title{
  font-family: 'Inter','SF Pro Display',sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .12em !important;
  color: rgba(216,227,245,.70) !important;
  margin-bottom: 14px !important;
}

@media (prefers-reduced-motion: reduce){
  .case-item .ci-img,
  .cig-img,
  .case-item.cs-winner .ci-img{ transition: none; }
  /* Reduce-motion: skip the cig-img scale-up on hover too */
  .cig-item:hover .cig-img{ transform: none; }
}

/* ============================================================
   PACKDRAW-STYLE IN-FLOW CENTER LABEL — appears below the
   spotlight when the reel lands, showing the winning item's
   name + payout-in-BC. Mirrors packdraw's primary feedback
   channel (their reel reveal centers a "name / price" caption
   under the spotlight tile before any modal pops). Slides + fades
   in for a clean entrance; rarity-tinted accent matches the
   item's --it-color token used elsewhere on the stage.
============================================================ */
.cs-stage-label{
  position: absolute;
  left: 50%;
  bottom: -52px;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 18px 8px;
  pointer-events: none;
  z-index: 7;
  transition:
    transform .35s cubic-bezier(.4,0,.2,1),
    opacity   .25s cubic-bezier(.4,0,.2,1);
  font-family: 'Inter','SF Pro Display',sans-serif;
  text-align: center;
}
.cs-stage-label-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.cs-stage-label-name{
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.005em;
  line-height: 1.2;
  max-width: 280px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.cs-stage-label-payout{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 14px rgba(0,0,0,.55);
}
/* Per-rarity tint for the payout number — uses the same --it-color
   tokens defined on .case-item / .cig-item further up. */
.cs-stage-label[data-rarity="common"],
.cs-stage-label[data-rarity="uncommon"]{ --it-color: #b9c0c8; }
.cs-stage-label[data-rarity="rare"]     { --it-color: #57abf8; }
.cs-stage-label[data-rarity="epic"]     { --it-color: #b07cf0; }
.cs-stage-label[data-rarity="legendary"]{ --it-color: #f0b232; }
.cs-stage-label[data-rarity="mythic"]   { --it-color: #eb6a6a; }
.cs-stage-label .cs-stage-label-payout{
  color: var(--it-color, #fff);
  text-shadow:
    0 0 12px color-mix(in srgb, var(--it-color, #60A5FA) 55%, transparent),
    0 1px 2px rgba(0,0,0,.55);
}
@media (prefers-reduced-motion: reduce){
  .cs-stage-label{ transition: opacity .15s ease; transform: translateX(-50%); }
  .cs-stage-label-show{ transform: translateX(-50%); }
}

/* ============================================================
   PACKDRAW-STYLE MULTI-OPEN QUEUE — five horizontal slots
   below the Open button. Slot 0 is the anchor (auto-filled
   with the current pack thumbnail, not removable). Slots 1-4
   are `+` placeholders; clicking adds another instance of
   the active pack to the next-open batch. Filled non-anchor
   slots show a small × to remove. Empty slots are clickable
   (cursor: pointer) so the affordance is clear.
============================================================ */
.cs-tray{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 18px auto 22px;
  width: 100%;
  max-width: 640px;
  padding: 10px;
  background: rgba(11,15,31,.35);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 14px;
}
.cs-tray-slot{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1.5px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.40);
  cursor: pointer;
  transition:
    transform .2s cubic-bezier(.4,0,.2,1),
    border-color .2s cubic-bezier(.4,0,.2,1),
    background-color .2s cubic-bezier(.4,0,.2,1),
    color .2s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
/* Empty-slot hover affordance — invites click to add another pack. */
.cs-tray-slot:not(.filled):hover{
  border-color: rgba(96,165,250,.55);
  background: rgba(96,165,250,.06);
  color: rgba(255,255,255,.85);
  transform: translateY(-2px);
}
.cs-tray-plus{ pointer-events: none; opacity: .80; }
/* FILLED — pack thumbnail visible, solid blue border (NOT rarity-
   tinted any more; rarity is irrelevant for the pre-spin queue). */
.cs-tray-slot.filled{
  cursor: default;
  border: 1px solid rgba(96,165,250,.45);
  background:
    radial-gradient(circle at 50% 35%, rgba(96,165,250,.10), transparent 70%),
    rgba(11,15,31,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 14px rgba(0,0,0,.30);
}
/* Anchor (slot 0) — slightly stronger tint to signal "this is the
   pack you're opening; the others are extras". */
.cs-tray-slot.cs-tray-anchor{
  border-color: rgba(96,165,250,.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 16px rgba(0,0,0,.32),
    0 0 20px rgba(96,165,250,.18);
}
.cs-tray-slot.filled .cs-tray-plus{ display: none; }
.cs-tray-slot .cs-tray-img-wrap{
  position: absolute; inset: 10px;
  display: flex; align-items: center; justify-content: center;
}
.cs-tray-slot .cs-tray-img{
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
/* × remove button — top-right corner of non-anchor filled slots */
.cs-tray-remove{
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(20,28,48,.85);
  color: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: transform .2s cubic-bezier(.4,0,.2,1), background-color .2s, color .2s;
}
.cs-tray-remove:hover{
  background: rgba(239,68,68,.85);
  color: #fff;
  transform: scale(1.08);
}
.cs-tray-anchor .cs-tray-remove{ display: none; }
/* Pop animation when a slot transitions empty → filled */
.cs-tray-slot.cs-tray-pop{
  animation: csTrayPop .3s cubic-bezier(.4,0,.2,1);
}
@keyframes csTrayPop{
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ACTIVE — the slot whose pack is currently spinning on the reel.
   Pulsing blue border + glow draws the eye to the "you are here"
   marker during a multi-pack batch open. */
.cs-tray-slot.cs-tray-active{
  border-color: rgba(96,165,250,.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 2px rgba(96,165,250,.45),
    0 0 24px rgba(96,165,250,.55) !important;
  animation: csTrayActivePulse 1.4s cubic-bezier(.4,0,.2,1) infinite;
  z-index: 2;
}
@keyframes csTrayActivePulse{
  0%, 100% { box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 2px rgba(96,165,250,.40),
    0 0 22px rgba(96,165,250,.50); }
  50%      { box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 3px rgba(96,165,250,.75),
    0 0 34px rgba(96,165,250,.80); }
}

/* RESULT — after each pack lands, tint the slot green (profit) or
   red (loss) so the player can scan the tray and see how each pull
   went at a glance. The result-color overlays the standard filled
   border via a more-specific selector. */
.cs-tray-slot.cs-tray-result-win{
  border-color: rgba(56,176,103,.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 14px rgba(0,0,0,.30),
    0 0 18px rgba(56,176,103,.35) !important;
}
.cs-tray-slot.cs-tray-result-win::after{
  content: "";
  position: absolute;
  left: 14%; right: 14%; bottom: 3px;
  height: 2.5px;
  border-radius: 99px;
  background: #38b067;
  box-shadow: 0 0 10px rgba(56,176,103,.85);
  pointer-events: none;
}
.cs-tray-slot.cs-tray-result-loss{
  border-color: rgba(239,68,68,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 14px rgba(0,0,0,.30),
    0 0 14px rgba(239,68,68,.20) !important;
}
.cs-tray-slot.cs-tray-result-loss::after{
  content: "";
  position: absolute;
  left: 14%; right: 14%; bottom: 3px;
  height: 2.5px;
  border-radius: 99px;
  background: rgba(239,68,68,.65);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .cs-tray-slot, .cs-tray-slot.cs-tray-pop{ animation: none; transition: none; }
}
@media (max-width: 760px){
  .cs-tray{ gap: 6px; padding: 8px; max-width: 100%; }
  .cs-tray-slot .cs-tray-img-wrap{ inset: 6px; }
}

@media (max-width: 760px){
  /* Mobile reel — scaled proportionally to the new desktop tile.
     The drop-chance % stays readable on a small screen by virtue of
     the pill background (no need to shrink the font). */
  .cases-stage{ height: 240px !important; }
  .case-item{ flex: 0 0 156px !important; width: 156px !important; height: 210px !important; }
  .case-item .ci-icon-wrap{ height: 124px !important; }
  .cig-icon-wrap{ height: 82px !important; }
}

/* ============================================================
   ADMIN: ALL-USERS TAB
============================================================ */
.adm-au-toolbar{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px; flex-wrap: wrap;
}
.adm-au-meta{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 15px; font-weight: 700;
  color: rgba(216,227,245,.85);
  font-variant-numeric: tabular-nums;
}
.adm-au-page-meta{
  margin-left: 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(216,227,245,.55);
}
.adm-au-paging{
  display: inline-flex; align-items: center; gap: 8px;
}
.adm-au-size{
  width: 70px;
  padding: 6px 10px !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.adm-au-page-btn{
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(96,165,250,.30);
  background: rgba(11,15,31,.65);
  color: rgba(216,227,245,.92);
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: border-color .18s var(--ease-smooth), background .18s var(--ease-smooth);
}
.adm-au-page-btn:hover:not(:disabled){
  border-color: rgba(96,165,250,.60);
  background: rgba(96,165,250,.08);
}
.adm-au-page-btn:disabled{ opacity: .35; cursor: not-allowed; }

.adm-au-table tbody tr{
  cursor: pointer;
  transition: background .15s var(--ease-smooth);
}
.adm-au-table tbody tr:hover{
  background: rgba(96,165,250,.06);
}
.adm-au-user-cell{
  display: flex; align-items: center; gap: 10px;
}
.adm-au-pfp{
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(11,15,31,.6);
}
.adm-au-pfp-fallback{
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight: 800; font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}
.adm-au-user-name{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-weight: 700; font-size: 15px;
  color: rgba(255,255,255,.95);
}
.adm-au-user-uid{
  font-size: 13px;
  font-weight: 600;
  color: rgba(216,227,245,.50);
  font-variant-numeric: tabular-nums;
}
.adm-au-rank{
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(96,165,250,.14);
  color: rgba(125,211,252,.95);
  border: 1px solid rgba(96,165,250,.30);
}
.adm-au-rank-admin{ background: rgba(248,113,113,.16); color: #fca5a5; border-color: rgba(248,113,113,.40); }
.adm-au-rank-mod  { background: rgba(192,132,252,.16); color: #d8b4fe; border-color: rgba(192,132,252,.40); }
.adm-au-rank-banned{ background: rgba(239,68,68,.18); color: #fca5a5; border-color: rgba(239,68,68,.50); }
.adm-au-bal-bx{
  display: inline-flex; align-items: center; gap: 4px;
  color: rgba(125,211,252,.95);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Bloxcoin credit/debit buttons in the player detail card */
.adm-action-btn.adm-action-bx-credit{
  background: rgba(34,211,238,.16);
  border-color: rgba(34,211,238,.50);
  color: #67e8f9;
}
.adm-action-btn.adm-action-bx-credit:hover{
  background: rgba(34,211,238,.28);
  border-color: rgba(34,211,238,.75);
}
.adm-action-btn.adm-action-bx-debit{
  background: rgba(192,132,252,.16);
  border-color: rgba(192,132,252,.50);
  color: #e9d5ff;
}
.adm-action-btn.adm-action-bx-debit:hover{
  background: rgba(192,132,252,.28);
  border-color: rgba(192,132,252,.75);
}

/* ============================================================
   ROBUX DEPOSIT MODAL — 4-stage flow matching Bloxflip pattern
   (username entry → confirm account → amount → gamepass purchase).
   All four stages share the modal-buy shell + .rb-stage layout
   so transitions feel like one cohesive flow.
============================================================ */

.rb-stage{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 4px;
}

/* Breadcrumbs at the top — "Deposit › Robux" */
.rb-crumbs{
  display: flex; align-items: center; gap: 8px;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 12.5px;
  color: rgba(216,227,245,.55);
  font-weight: 600;
}
.rb-crumb{ color: rgba(216,227,245,.55); }
.rb-crumb-active{ color: #fff; }
.rb-sep{ color: rgba(216,227,245,.35); }

/* Modal title — bigger + tighter than the generic .modal-title */
.rb-title{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: #fff;
  margin: 2px 0 4px;
}
.rb-bc-inline{
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800;
}
.rb-bc-glyph-inline{
  width: 22px !important; height: 22px !important;
  display: inline-block; vertical-align: middle;
}

/* Field label */
.rb-field-label{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(96,165,250,.95);
  text-transform: none;
  letter-spacing: .01em;
  margin-bottom: 4px;
}
.rb-field-label-mute{
  color: rgba(96,165,250,.85);
}

/* Username input */
.rb-input{
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(96,165,250,.20);
  background: rgba(11,15,31,.85);
  color: #fff;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.005em;
  outline: none;
  transition: border-color .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth);
}
.rb-input::placeholder{ color: rgba(216,227,245,.40); }
.rb-input:hover{ border-color: rgba(96,165,250,.35); }
.rb-input:focus{
  border-color: rgba(96,165,250,.65);
  box-shadow: 0 0 0 3px rgba(96,165,250,.18);
}
.rb-input-err{
  color: #f87171;
  font-size: 14px;
  font-weight: 600;
  margin-top: -8px;
}

/* Custom checkbox row */
.rb-check{
  display: flex; align-items: flex-start; gap: 10px;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(216,227,245,.82);
  cursor: pointer;
  line-height: 1.45;
  user-select: none;
}
.rb-check input[type=checkbox]{
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.rb-check-box{
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(96,165,250,.40);
  background: rgba(11,15,31,.85);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s var(--ease-smooth), border-color .18s var(--ease-smooth);
  margin-top: 1px;
}
.rb-check input:checked + .rb-check-box{
  background: var(--pink, #3B82F6);
  border-color: var(--pink, #3B82F6);
}
.rb-check input:checked + .rb-check-box::after{
  content: "";
  width: 5px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
}
.rb-check-username{ color: var(--pink-soft, #60A5FA); font-weight: 700; }

/* Continue CTA — full-width, large */
.rb-continue{
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
}
.rb-continue:disabled{ opacity: .35; cursor: not-allowed; }
.rb-continue-tight{
  flex: 1;
  width: auto;
}
.rb-arrow{
  font-family:'SF Pro Display','Inter',sans-serif;
  font-size: 18px; line-height: 1;
  font-weight: 600;
  margin-left: 2px;
  opacity: .85;
}

/* Account confirm card */
.rb-q{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 15px; font-weight: 700;
  color: rgba(96,165,250,.95);
  margin-bottom: -8px;
}
.rb-q-sub{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 16px; font-weight: 500;
  color: rgba(216,227,245,.85);
  line-height: 1.45;
  margin-bottom: 4px;
}
.rb-q-sub strong{ color: #fff; font-weight: 700; }

.rb-account-card{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(11,15,31,.85);
  border: 1px solid rgba(96,165,250,.20);
}
.rb-account-avatar{
  width: 48px; height: 48px;
  border-radius: 10px;
  background: rgba(11,15,31,.6);
  object-fit: cover;
}
.rb-account-meta{
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.rb-account-name{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 15px; font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.rb-account-id{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 14px; font-weight: 600;
  color: rgba(216,227,245,.55);
}

/* Warnings */
.rb-warn{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(216,227,245,.92);
}
.rb-warn-danger{
  background: rgba(248,113,113,.06);
  border: 1px solid rgba(248,113,113,.20);
}
.rb-warn-warning{
  background: rgba(251,191,36,.06);
  border: 1px solid rgba(251,191,36,.20);
}
/* Info-level (neutral / FYI) — used for the Roblox gamepass moderation
   delay notice. Cooler blue than the warning yellow so the player can
   distinguish "wait a moment" from "do not delete your gamepass". */
.rb-warn-info{
  background: rgba(96,165,250,.06);
  border: 1px solid rgba(96,165,250,.22);
}
.rb-warn strong{ color: #fff; font-weight: 700; }
.rb-warn-bullet{
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #f87171;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.rb-warn-bullet-warn{ background: #fbbf24; color: #4a3000; }
.rb-warn-bullet-info{ background: #60a5fa; color: #0b1424; }
.rb-link{ color: var(--pink-soft, #60A5FA); text-decoration: none; font-weight: 700; }
.rb-link:hover{ text-decoration: underline; }

/* Button row */
.rb-btn-row{
  display: flex; align-items: center; gap: 10px;
}
.rb-btn-row .rb-back-btn{
  flex: 1;
  font-size: 16px;
  padding: 13px 16px;
  border-radius: 10px;
  font-weight: 700;
}
.rb-btn-row .rb-view-acct{
  flex: 1;
  font-size: 16px;
  padding: 13px 16px;
  border-radius: 10px;
  font-weight: 700;
  background: var(--pink, #3B82F6);
  color: #fff;
  border: 1px solid var(--pink, #3B82F6);
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter .18s var(--ease-smooth);
}
.rb-btn-row .rb-view-acct:hover{ filter: brightness(1.1); }
.rb-btn-row-bottom{ margin-top: 4px; }

/* Amount entry */
.rb-amount-row{
  position: relative;
  border-radius: 10px;
  background: rgba(11,15,31,.85);
  border: 1px solid rgba(96,165,250,.20);
  padding: 8px 12px;
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.rb-amount-prefix{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(96,165,250,.95);
  flex-shrink: 0;
}
.rb-amount-input{
  flex: 1;
  min-width: 60px;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 16px; font-weight: 800;
  letter-spacing: -.005em;
  padding: 8px 0;
  /* Hide spinners (number-input ergonomics) */
  appearance: textfield;
  -moz-appearance: textfield;
}
.rb-amount-input::-webkit-outer-spin-button,
.rb-amount-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.rb-amount-quick{
  display: flex; gap: 6px; flex-wrap: wrap;
}
.rb-quick-amt{
  border: 1px solid rgba(96,165,250,.20);
  background: rgba(11,15,31,.65);
  color: rgba(216,227,245,.55);
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .18s var(--ease-smooth), color .18s var(--ease-smooth);
}
.rb-quick-amt:hover{
  border-color: rgba(96,165,250,.50);
  color: #fff;
}

.rb-receive-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(96,165,250,.06);
  border: 1px solid rgba(96,165,250,.18);
  font-family:'Inter','SF Pro Display',sans-serif;
}
.rb-receive-label{
  font-size: 15px;
  font-weight: 600;
  color: rgba(216,227,245,.78);
}
.rb-receive-amt{
  font-size: 16px;
  font-weight: 600;
  color: rgba(216,227,245,.78);
}
.rb-receive-amt strong{
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* Progress bar (gamepass purchase stage) */
.rb-progress{
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(11,15,31,.85);
  border: 1px solid rgba(96,165,250,.20);
}
.rb-progress-bar{
  width: 100%;
  height: 6px;
  background: rgba(96,165,250,.10);
  border-radius: 99px;
  overflow: hidden;
}
.rb-progress-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--pink, #3B82F6) 0%, var(--cyan, #22D3EE) 100%);
  border-radius: 99px;
  transition: width .3s var(--ease-smooth);
}
.rb-progress-labels{
  display: flex; align-items: center; justify-content: space-between;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(216,227,245,.85);
  font-variant-numeric: tabular-nums;
}
.rb-progress-pct{ color: var(--pink-soft, #60A5FA); }

.rb-pay-hint{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: rgba(96,165,250,.95);
}
.rb-pay-sub{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(216,227,245,.78);
  line-height: 1.45;
  margin-top: -8px;
}

/* Countdown timer row */
.rb-timer-row{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(251,191,36,.06);
  border: 1px solid rgba(251,191,36,.20);
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: rgba(251,191,36,.95);
}
.rb-timer-icon{
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(251,191,36,.95);
}
.rb-timer-label{
  flex: 1;
  color: rgba(251,191,36,.95);
  font-weight: 600;
}
.rb-timer-value{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Gamepass details card */
.rb-gamepass-card{
  display: flex; flex-direction: column; gap: 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(11,15,31,.65);
  border: 1px solid rgba(96,165,250,.14);
}
.rb-gp-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 15px;
}
.rb-gp-row + .rb-gp-row{
  border-top: 1px solid rgba(96,165,250,.08);
}
.rb-gp-label{ color: rgba(216,227,245,.65); font-weight: 600; }
.rb-gp-value{ color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.rb-gp-bc{
  display: inline-flex; align-items: center; gap: 6px;
}

/* Open gamepass page CTA */
.rb-open-gp{
  width: 100%;
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 800;
  border-radius: 10px;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
}
.rb-extlink{
  display: inline-flex; align-items: center;
  opacity: .85;
}

.rb-bought-btn{
  flex: 1;
  font-size: 16px;
  padding: 13px 16px;
  border-radius: 10px;
  font-weight: 800;
}

/* Paused state */
.rb-paused-card{
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 32px 20px;
  text-align: center;
}
.rb-paused-icon{
  color: rgba(251,191,36,.85);
  margin-bottom: 4px;
}
.rb-paused-title{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.rb-paused-sub{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(216,227,245,.65);
  line-height: 1.5;
  max-width: 340px;
}
.rb-paused-retry{
  margin-top: 8px;
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 10px;
}

@media (max-width: 600px){
  .rb-title{ font-size: 18px; }
  .rb-btn-row{ flex-wrap: wrap; }
  .rb-btn-row .rb-back-btn,
  .rb-btn-row .rb-view-acct{ flex: 1 1 calc(50% - 5px); }
  .rb-btn-row .rb-continue-tight,
  .rb-btn-row .rb-bought-btn{ flex: 1 1 100%; }
}

/* ============================================================
   MODERN MODAL CHROME — final pass
   Replaces the dated "← CLOSE" pill with a clean ✕ icon top-right
   (Apple / Stake / Linear pattern), strengthens the backdrop blur,
   layers the modal shadows, and pumps title font-weight for a more
   confident hierarchy.
   Override target: the "Back pill" block at line ~18144 of this file.
   Same selector specificity → wins by being later in the cascade.
============================================================ */

/* ---- Backdrop: deeper darken, frosted glass ---- */
.modal-backdrop{
  background: rgba(4,7,16,.74) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
}

/* ---- Modal shell: larger radius, layered shadow, soft glow ---- */
.modal-backdrop .modal{
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background:
    linear-gradient(180deg, rgba(20,28,52,.92) 0%, rgba(10,16,34,.96) 100%) !important;
  box-shadow:
    /* Outer key shadow — drives depth */
    0 24px 60px -12px rgba(0,0,0,.75),
    /* Ambient outer — picks up the brand cyan glow */
    0 0 0 1px rgba(96,165,250,.08),
    0 0 80px rgba(96,165,250,.06),
    /* Inset top highlight */
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* ---- Close button: clean circular ✕ at top-right ----
   Markup is still <button class="modal-close">×</button>. We hide the
   literal "×" with font-size:0 and re-draw it as two rotated rectangles
   via ::before / ::after. The "Close" word from the pill is hidden by
   forcing ::after's content back to empty.

   Selector: `.modal-backdrop .modal .modal-close` has specificity (0,3,0),
   higher than the earlier "Back pill" rule (0,2,0) at line 18144 — wins
   regardless of order. */
.modal-backdrop .modal .modal-close{
  position: absolute !important;
  /* Minimal, calm close used by every modal: a quiet glyph in the corner
     that just brightens on hover. No circle, no blur, no rotate, no
     transition (the rotate-on-hover gimmick was removed site-wide). */
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  max-width: 36px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,.45) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
  transform: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
  z-index: 10 !important;
}
/* The ✕ — two rotated rectangles drawn by the pseudo-elements. The
   `content: ""` and `text-transform: none` forces the earlier "Close"
   text-content to disappear. */
.modal-backdrop .modal .modal-close::before,
.modal-backdrop .modal .modal-close::after{
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  display: block !important;
  width: 13px !important;
  height: 1.6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 1px !important;
  background: currentColor !important;
  -webkit-mask: none !important;
          mask: none !important;
  opacity: 1 !important;
  font-size: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  color: currentColor !important;
}
.modal-backdrop .modal .modal-close::before{
  transform: rotate(45deg) !important;
}
.modal-backdrop .modal .modal-close::after{
  transform: rotate(-45deg) !important;
}
.modal-backdrop .modal .modal-close:hover{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  transform: none !important;
}
.modal-backdrop .modal .modal-close:active{
  transform: none !important;
}
@media (prefers-reduced-motion: reduce){
  .modal-backdrop .modal .modal-close{ transition: none !important; }
  .modal-backdrop .modal .modal-close:hover,
  .modal-backdrop .modal .modal-close:active{ transform: none !important; }
}

/* ---- Modal title: bolder, tighter, less gradient ---- */
.modal-backdrop .modal-title{
  font-family: 'Inter', 'SF Pro Display', sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  letter-spacing: -.018em !important;
  /* Strip the legacy gradient text-fill that read dated; flat white
     with a tiny opacity for hierarchy is the modern pattern. */
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  filter: none !important;
  text-shadow: none !important;
  margin: 0 0 8px !important;
}
.modal-backdrop .modal-sub{
  font-family: 'Inter', 'SF Pro Display', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: -.003em !important;
  color: rgba(216,227,245,.65) !important;
  margin-bottom: 22px !important;
}
.modal-backdrop .modal-sub strong{
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ---- Modal entry: subtle scale-in spring ---- */
@keyframes modernModalIn{
  from {
    opacity: 0;
    transform: translateY(12px) scale(.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.modal-backdrop.open .modal{
  animation: modernModalIn .28s cubic-bezier(.16, 1, .3, 1) !important;
}
@media (prefers-reduced-motion: reduce){
  .modal-backdrop.open .modal{ animation: none !important; }
}

/* ---- Modal padding: slightly more generous on desktop, tight on mobile ---- */
.modal-backdrop .modal{
  padding: 32px !important;
}
@media (max-width: 600px){
  .modal-backdrop .modal{ padding: 22px 20px 26px !important; }
  .modal-backdrop .modal-title{ font-size: 22px !important; }
}

/* ---- Buttons inside modals — modern radius + tighter type ---- */
.modal-backdrop .btn{
  border-radius: 12px;
  font-family: 'Inter', 'SF Pro Display', sans-serif;
  font-weight: 800;
  letter-spacing: -.005em;
  transition: transform .18s var(--ease-smooth, ease),
              filter .18s var(--ease-smooth, ease),
              border-color .18s var(--ease-smooth, ease),
              box-shadow .18s var(--ease-smooth, ease);
}
.modal-backdrop .btn-primary:hover{
  filter: brightness(1.08);
}

/* ---- Inputs inside modals — match the modal radius and type ---- */
.modal-backdrop input[type="text"],
.modal-backdrop input[type="number"],
.modal-backdrop input[type="email"],
.modal-backdrop .rb-input,
.modal-backdrop .adm-input{
  font-family: 'Inter', 'SF Pro Display', sans-serif;
  font-weight: 600;
  letter-spacing: -.003em;
}

/* ============================================================
   PACK REVEAL MODAL — modern unbox-reveal screen
   Pops after every pack open(s). Big rarity-tinted item cards
   so the player gets a satisfying "this is what I got" moment
   regardless of whether it was a jackpot or a common.
============================================================ */

.modal-backdrop .modal-pack-reveal{
  max-width: 640px !important;
  text-align: center;
}

/* Items grid — flex-row so 1/2/3/4 cards center cleanly. Wraps on
   narrow viewports. Each card carries its own rarity color halo. */
.pack-reveal-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 6px;
}

.pack-reveal-card{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 18px 14px 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%),
    rgba(11,15,31,.55);
  border: 1px solid var(--rev-color, rgba(125,211,252,.40));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px color-mix(in srgb, var(--rev-color, #60A5FA) 25%, transparent),
    0 0 26px color-mix(in srgb, var(--rev-color, #60A5FA) 22%, transparent),
    0 10px 24px rgba(0,0,0,.45);
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: 160px;
  /* Subtle entry spring when the modal opens */
  animation: packRevealCardIn .35s cubic-bezier(.34, 1.56, .64, 1);
}
.pack-reveal-card.rarity-common,
.pack-reveal-card.rarity-uncommon{ --rev-color: #94a3b8; }
.pack-reveal-card.rarity-rare    { --rev-color: #60A5FA; }
.pack-reveal-card.rarity-epic    { --rev-color: #c084fc; }
.pack-reveal-card.rarity-legendary{ --rev-color: #fbbf24; }
.pack-reveal-card.rarity-mythic  { --rev-color: #f87171; }

.pack-reveal-img-wrap{
  width: 100%;
  height: 110px;
  display: flex; align-items: center; justify-content: center;
}
.pack-reveal-img{
  max-width: 92%;
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 18px rgba(0,0,0,.55))
    drop-shadow(0 0 22px color-mix(in srgb, var(--rev-color, #60A5FA) 55%, transparent));
}
.pack-reveal-name{
  font-family: 'Inter','SF Pro Display',sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.005em;
  text-align: center;
  line-height: 1.2;
}
.pack-reveal-rarity{
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  font-family: 'Inter','SF Pro Display',sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rev-color, #fff);
  background: color-mix(in srgb, var(--rev-color, #60A5FA) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rev-color, #60A5FA) 38%, transparent);
}
.pack-reveal-multi{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter','SF Pro Display',sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pack-reveal-multi .bc-glyph{
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  vertical-align: middle;
}
/* Secondary line beneath the BC payout — shows the effective multi
   so the player can mentally calibrate (e.g. "1,000,000 BC = 2.86×"). */
.pack-reveal-eff-multi{
  font-family: 'Inter','SF Pro Display',sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(216,227,245,.55);
  font-variant-numeric: tabular-nums;
  margin-top: -4px;
}

/* ============================================================
   PACK MULTI-OPEN — N parallel reels stacked vertically
   When the player opens 2/3/4 packs at once, we hide the single
   #cs-stage and render N temporary stages inside .cases-multi-stack
   below. Each one spins in parallel via Promise.all so the player
   sees every pull animating at once. Cleaned up after the reveal.
============================================================ */
.cases-multi-stack{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}
/* Multi rows mirror the single-reel proportions: items stay generous
   (120px desktop / 100px mobile, close to the 140px single-reel size),
   row height tracks item height + breathing room. The earlier 84px
   items were too small to read at a glance — players couldn't tell
   which pack landed without leaning in. */
.cases-multi-stack .cases-stage-multi-row{
  height: 150px !important;
  border-radius: 14px !important;
}
.cases-multi-stack .cases-stage-multi-row .cases-reel{
  height: 160px !important;
  padding: 0 12px !important;
  gap: 10px !important;
}
.cases-multi-stack .cases-stage-multi-row .case-item{
  height: 160px !important;
  flex: 0 0 160px !important;
  width: 160px !important;
  padding: 10px !important;
  gap: 3px !important;
}
.cases-multi-stack .cases-stage-multi-row .case-item .ci-icon-wrap{
  height: 110px !important;
}
.cases-multi-stack .cases-stage-multi-row .case-item .ci-name{
  font-size: 12px !important;
  margin-top: 1px !important;
}
.cases-multi-stack .cases-stage-multi-row .case-item .ci-mult{
  font-size: 14px !important;
  margin-bottom: 2px !important;
}
.cases-multi-stack .cases-stage-multi-row .cs-pointer-top{ top: 4px !important; }
.cases-multi-stack .cases-stage-multi-row .cs-pointer-bot{ bottom: 4px !important; }

/* Mobile: scale down item width and row height a touch so the stack
   still fits 4 rows on a phone, but keep items readable (100px). */
@media (max-width: 760px){
  .cases-multi-stack{ gap: 6px; }
  .cases-multi-stack .cases-stage-multi-row{ height: 124px !important; }
  .cases-multi-stack .cases-stage-multi-row .cases-reel{ height: 108px !important; padding: 0 10px !important; gap: 8px !important; }
  .cases-multi-stack .cases-stage-multi-row .case-item{ height: 108px !important; flex-basis: 100px !important; width: 100px !important; }
  .cases-multi-stack .cases-stage-multi-row .case-item .ci-icon-wrap{ height: 58px !important; }
  .cases-multi-stack .cases-stage-multi-row .case-item .ci-name{ font-size: 9px !important; }
  .cases-multi-stack .cases-stage-multi-row .case-item .ci-mult{ font-size: 13px !important; }
}

/* Enter animation when a new row joins the stack — pure transform +
   opacity so it's GPU-composited (no layout / paint per frame).
   The previous version animated max-height + margin which forced a
   reflow of everything below the stack every frame; with 4 rows
   animating at once the main thread couldn't keep up and the user
   saw stutter. */
@keyframes csRowEnter {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cases-multi-stack .cases-stage-multi-row.cs-row-enter{
  animation: csRowEnter .22s cubic-bezier(.2,.75,.3,1) both;
  will-change: transform, opacity;
}

/* Exit animation — fade + tiny upward nudge. DOM removal happens at
   the end via the JS setTimeout. The trailing layout reflow when
   the row leaves the tree is unavoidable, but a single reflow at
   removal is much cheaper than 240ms of max-height interpolation. */
@keyframes csRowExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}
.cases-multi-stack .cases-stage-multi-row.cs-row-exit{
  animation: csRowExit .18s ease-in both;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Stack collapse on count → 1 — pure opacity fade. Matched to the
   stage entry duration (140ms ease-out-expo) so 4x→1x crossfade
   completes in one beat instead of multi exiting mid stage-entry. */
@keyframes csStackExit {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.cases-multi-stack.cs-stack-exit{
  animation: csStackExit .14s cubic-bezier(0.19, 1, 0.22, 1) both;
  will-change: opacity;
  pointer-events: none;
}

/* Honor reduce-motion: snap straight to final state. */
@media (prefers-reduced-motion: reduce){
  .cases-multi-stack .cases-stage-multi-row.cs-row-enter,
  .cases-multi-stack .cases-stage-multi-row.cs-row-exit,
  .cases-multi-stack.cs-stack-exit{
    animation: none !important;
  }
}

/* ============================================================
   iOS / reduced-motion FINAL SAFETY OVERRIDE
   iOS Safari treats prefers-reduced-motion: reduce as the default
   for many users (especially after iOS 17 power-saving defaults).
   The codebase has 45 reduce-motion blocks; some were over-zealous
   and muted GAMEPLAY animations the player needs to read the round
   result (crash multiplier, slot reels, coinflip, pack reel, etc).
   This final override re-enables those animations under reduce-
   motion so the games are still playable on iOS without dropping
   the truly decorative animation suppression elsewhere.
============================================================ */
@media (prefers-reduced-motion: reduce){
  /* Crash — multiplier ticker is THE entire feedback signal. */
  .crash-multiplier,
  .crash-multiplier *,
  .crash-track-mark{
    animation: revert !important;
    transition: revert !important;
  }
  /* Crash rocket — keep it ALIVE under reduce-motion. `animation: revert`
     rolls back to the UA value (none) = a STATIC rocket, which past feedback
     showed reads as "the game is broken" during active play. Re-declare the
     author flight / idle-bob / explode animations explicitly so the rocket
     still moves (the stars + multiplier already move; a frozen rocket alone
     looks dead). */
  .crash-rocket{ transition: revert !important; }
  .crash-rocket.flying{ animation: rocketFly .35s ease-in-out infinite !important; }
  .crash-rocket.exploding{ animation: rocketExplode .6s cubic-bezier(.32,.72,0,1) forwards !important; }
  .crash-rocket:not(.flying):not(.exploding){ animation: rocketIdle 2.5s ease-in-out infinite !important; }
  /* Slots — reel spin needs to play, the win lines too */
  .reel-strip,
  .slots-machine.win,
  .slots-machine.win .sm-marquee{
    animation: revert !important;
  }
  /* Plinko — ball drop trajectory + bin highlight */
  .plinko-ball,
  .plinko-bin.lit{
    animation: revert !important;
    transition: revert !important;
  }
  /* Packs — the single-open reel scroll IS the gameplay. Its spin is set
     INLINE by spinReel() as `transition: transform 6s` (2s in fast mode), and
     the per-tile tick SFX cadence is scheduled in JS from that SAME duration.
     An earlier reduce-motion build crushed the reel to `transform 0.45s linear`
     ("reduce motion = make it quick") — but 0.45s is so fast it reads as a
     broken instant snap (the user's "the spin goes too fast on mobile" report)
     AND it desynced the audio: the ticks kept firing for ~6s after the reel had
     already stopped. The reel is a contained, single-axis, decelerating scroll
     — the same gameplay-centerpiece category as the crash ticker / slot reels
     we KEEP alive under reduce-motion above. So we deliberately do NOT override
     its transition here: the inline value drives both the visual and the synced
     SFX, giving iOS users the exact same readable, decelerating spin everyone
     else gets. DO NOT re-add a `.cases-reel.cs-spinning { transition: …
     !important }` rule — a stylesheet !important beats the inline transition, and
     any fixed duration would (a) reintroduce the "too fast" snap and (b) break
     the 2s fast-mode path, which only the inline value tracks correctly. */
  .case-item.cs-winner,
  .case-item.cs-winner .ci-img,
  .pack-reveal-card{
    animation: revert !important;
    transition: revert !important;
  }
  /* Dice / Limbo — multiplier counter + result flash */
  .dice-die,
  .limbo-multi,
  .limbo-payout{
    animation: revert !important;
    transition: revert !important;
  }
  /* Upgrader — wheel spin */
  .upgrader-wheel.spinning,
  .upgrader-wheel-wrap.spinning{
    animation: revert !important;
  }
  /* Mines — tile flip + result feedback */
  .mine-tile.revealed,
  .mine-tile.bomb,
  .mine-tile.gem{
    animation: revert !important;
    transition: revert !important;
  }
  /* Blackjack — card deal + flip */
  .bj-card,
  .bj-card.flip,
  .bj-action-result{
    animation: revert !important;
    transition: revert !important;
  }
  /* Toast slide-in is feedback (a notification arrived) — keep it */
  .toast{
    animation: revert !important;
    transition: revert !important;
    opacity: revert !important;
    transform: revert !important;
  }
  /* Route entry on tab change is page-navigation feedback — keep it */
  .route.active{
    animation: revert !important;
  }
  /* Buy-button cashout pulse is a "tap me NOW" cue — keep it */
  .btn-cashout:not(:disabled){
    animation: revert !important;
  }
}

@keyframes packRevealCardIn{
  from { opacity: 0; transform: translateY(12px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Stagger the entry of multiple cards so they cascade in 80ms apart. */
.pack-reveal-card:nth-child(2){ animation-delay: 80ms; animation-fill-mode: backwards; }
.pack-reveal-card:nth-child(3){ animation-delay: 160ms; animation-fill-mode: backwards; }
.pack-reveal-card:nth-child(4){ animation-delay: 240ms; animation-fill-mode: backwards; }

/* Summary row — total payout + net profit, color-tinted by sign */
.pack-reveal-summary{
  margin: 14px 0 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(11,15,31,.65);
  border: 1px solid rgba(96,165,250,.14);
}
.pack-reveal-summary-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0;
  font-family: 'Inter','SF Pro Display',sans-serif;
}
.pack-reveal-summary-row + .pack-reveal-summary-row{
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(96,165,250,.08);
}
.pack-reveal-summary-label{
  font-size: 15px;
  font-weight: 600;
  color: rgba(216,227,245,.65);
  letter-spacing: -.005em;
}
.pack-reveal-summary-value{
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.pack-reveal-net[data-sign="positive"]{ color: #4ade80; }
.pack-reveal-net[data-sign="negative"]{ color: #f87171; }
.pack-reveal-net[data-sign="neutral"] { color: rgba(216,227,245,.75); }

.pack-reveal-continue{
  width: 100%;
  padding: 14px 18px;
  font-family: 'Inter','SF Pro Display',sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 12px;
}

@media (max-width: 600px){
  .pack-reveal-card{ width: 140px; }
  .pack-reveal-img-wrap{ height: 90px; }
}
@media (prefers-reduced-motion: reduce){
  .pack-reveal-card{ animation: none !important; }
}

/* ============================================================
   PACK CONTAINS — drop-chance % top-right + payout at the bottom
   Matches the bloxrain "Possible Items" reference the user shared.
   Replaces the old "5.44×" multi display with the raw BC payout so
   the player can mentally map a drop to their balance directly.
============================================================ */

/* Top-right drop-chance pill */
.cig-item .cig-pct{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  font-family: 'Inter','SF Pro Display',sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -.005em;
  color: rgba(216,227,245,.85);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Bottom payout row — coin glyph + amount in tabular numerics.
   Tighter padding + smaller font than the prior chunky pill so the
   card's image zone keeps dominating the visual hierarchy. */
.cig-item .cig-payout{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.08);
  font-family: 'Inter','SF Pro Display',sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--it-color, #fff);
  font-variant-numeric: tabular-nums;
}
.cig-item .cig-payout .bc-glyph{
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  vertical-align: middle;
  flex-shrink: 0;
}
.cig-item .cig-payout-val{
  /* Reserve enough breathing room for huge payouts (e.g. 1,900,000) */
  font-variant-numeric: tabular-nums;
}

/* Hide the old multi + stats pill — the new payout pill replaces them */
.cig-item .cig-stats,
.cig-item .cig-mult{
  display: none !important;
}

/* Make sure the card relative-positions so the % pill anchors top-right */
.cig-item{ position: relative !important; }

/* ============================================================
   PROFILE CARD v2 — Discord-style identity card + 3-stat row.
   Replaces the old hero (level ring + tier + wagered + profit
   panel) per "make it only show deposited, wagered, bets".
   The old `.profile-header` selectors are still on the body in
   case any unrelated layout query touches them, but the visual
   element is now the v2 markup.
============================================================ */
.profile-card2-shell{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 24px;
}
.profile-card2{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(140,160,210,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)),
    #141a30;
  box-shadow:
    0 12px 32px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* Identity row — avatar | (name + XP rail + badges + meta) */
.profile-card2-identity{
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 24px;
}
.profile-card2-avatar{
  flex: 0 0 86px;
  width: 86px; height: 86px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: #1f2540;
  border: 2px solid rgba(96,165,250,.55);
  font-size: 38px;
  color: rgba(216,227,245,.85);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.40);
}
.profile-card2-avatar img,
.profile-card2-avatar .profile-hero-avatar-img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.profile-card2-body{
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.profile-card2-name{
  font-family: 'Inter','Sora',sans-serif;
  font-size: 22px; font-weight: 800; color: #fff;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.profile-card2-uid{
  font-family: 'Inter','Sora',sans-serif;
  font-size: 11.5px; font-weight: 700;
  color: rgba(216,227,245,.45);
  letter-spacing: .04em;
}
.profile-card2-uid code{
  font-family: 'JetBrains Mono','SF Mono',monospace;
  color: rgba(216,227,245,.65);
  background: rgba(255,255,255,.04);
  padding: 1px 6px; border-radius: 4px;
  font-size: 13px;
}
.profile-card2-meta{
  font-family: 'Inter','Sora',sans-serif;
  font-size: 11.5px; font-weight: 600;
  color: rgba(216,227,245,.38);
  letter-spacing: .02em;
  margin-top: 2px;
}

/* XP rail — LEVEL pill + bar + numeric */
.profile-xp-row{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.profile-xp-level{
  font-family: 'Inter','Sora',sans-serif;
  font-size: 11.5px; font-weight: 900;
  letter-spacing: .12em;
  color: #60a5fa;
  white-space: nowrap;
  flex-shrink: 0;
}
.profile-xp-bar{
  flex: 1 1 auto;
  height: 8px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  overflow: hidden;
  min-width: 0;
}
.profile-xp-fill{
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%);
  box-shadow: 0 0 8px rgba(96,165,250,.45);
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.profile-xp-text{
  font-family: 'Inter','Sora',sans-serif;
  font-size: 13px; font-weight: 700;
  color: rgba(216,227,245,.55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Stats row — 3 tiles */
.profile-card2-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 0 4px;
}
.profile-stat2{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(140,160,210,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)),
    #141a30;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.profile-stat2-icon{
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.stat2-dep .profile-stat2-icon{
  background: rgba(59,130,246,.14);
  color: #60a5fa;
}
.stat2-wag .profile-stat2-icon{
  background: rgba(34,197,94,.14);
  color: #4ade80;
}
.stat2-bets .profile-stat2-icon{
  background: rgba(251,191,36,.14);
  color: #fbbf24;
}
.profile-stat2-body{
  flex: 1 1 auto; min-width: 0;
}
.profile-stat2-label{
  font-family: 'Inter','Sora',sans-serif;
  font-size: 12px; font-weight: 800;
  letter-spacing: .14em;
  color: rgba(216,227,245,.45);
  margin-bottom: 4px;
}
.profile-stat2-value{
  font-family: 'Inter','Sora',sans-serif;
  font-size: 20px; font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  word-break: break-word;
}

/* Badge row spacing inside the identity card */
.profile-card2 .profile-badge-row{
  margin: 4px 0 0;
}
.profile-card2 .profile-badge-row:empty{
  display: none;
}

@media (max-width: 760px){
  .profile-card2-identity{ flex-direction: column; align-items: flex-start; padding: 20px; gap: 16px; }
  .profile-card2-avatar{ width: 72px; height: 72px; flex-basis: 72px; font-size: 32px; }
  .profile-card2-name{ font-size: 20px; }
  .profile-card2-stats{ grid-template-columns: 1fr; }
  .profile-stat2-value{ font-size: 18px; }
  .profile-xp-row{ flex-wrap: wrap; gap: 8px; }
  .profile-xp-bar{ order: 3; flex-basis: 100%; }
}

/* ============================================================
   PHASE 2 — PACKDRAW REBUILD (foundation, 2026-05-18)
   ------------------------------------------------------------
   Tokens + primitive components sampled from packdraw.com.
   Namespace: every selector starts with .pd-* so it cannot
   collide with the existing site (which uses .btn, .card,
   .sb-*, .gh-*, etc).

   Activation: routes opt in by setting [data-theme="phase2"]
   on <html>. Without it, only the .pd-* primitives style their
   own elements — body/topbar/sidebar stay untouched. This lets
   us flip routes over one at a time across Sessions 2-N.

   See memory/project_ui_revamp.md "PHASE 2" for the full plan.
   ============================================================ */
:root{
  /* Surfaces — sampled hex values from packdraw.com DOM 2026-05-18 */
  --pd-bg-0:#1d2125;          /* body background — warm dark gray */
  --pd-bg-1:#161a1d;          /* darker section / right rail */
  --pd-bg-2:#22272b;          /* slight elevation / inputs */
  --pd-surface:#34383c;       /* cards, secondary buttons */
  --pd-surface-2:#3e4347;     /* hover state for surface */
  --pd-glass:rgba(90,94,98,.3);

  /* Hairlines */
  --pd-line:rgba(250,250,250,.05);
  --pd-line-hover:rgba(250,250,250,.12);

  /* Text */
  --pd-text:#fafafa;
  --pd-text-mute:#7a8084;

  /* Brand — soft blue (Tailwind blue-400 family) */
  --pd-blue:#4299e1;
  --pd-blue-hover:#3182ce;
  --pd-blue-accent:#57abf8;
  --pd-blue-glow:rgba(66,153,225,.45);

  /* Semantic */
  --pd-green:#48bb78;         /* primary "Open for $X" CTA */
  --pd-green-hover:#38a169;
  --pd-red:#eb4b4b;
  --pd-yellow:#e4ae33;

  /* CS:GO-style rarity tiers — packdraw uses literal CS:GO hex
     for item glows. Wire via [data-tier="…"] on item containers. */
  --pd-tier-common:#829dbb;
  --pd-tier-uncommon:#4b69ff;
  --pd-tier-rare:#8847ff;
  --pd-tier-epic:#d32ce6;
  --pd-tier-legendary:#eb4b4b;
  --pd-tier-mythic:#e4ae33;

  /* Motion easings */
  --pd-ease-smooth:cubic-bezier(.32,.72,0,1);
  --pd-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --pd-ease-snap:cubic-bezier(.5,0,.1,1);

  /* Shape */
  --pd-radius-sm:6px;         /* buttons, pills */
  --pd-radius-md:8px;
  --pd-radius-lg:12px;        /* cards */
  --pd-radius-xl:16px;        /* hero cards */

  /* Selected-state treatment — a restrained accent ring/line + soft blue
     glow, shared by the nav active pill and every in-game option selector
     so "what you have selected" reads the same everywhere (Bloxflip-style
     line + glow). Kept low-alpha + static (no pulsing) to stay calm. */
  --pd-sel-bg:rgba(66,153,225,.14);
  --pd-sel-ring:inset 0 0 0 1.5px var(--pd-blue);
  --pd-sel-glow:0 0 16px var(--pd-blue-glow);

  /* Depth */
  --pd-shadow-card:0 4px 16px rgba(0,0,0,.35);
  --pd-shadow-lifted:0 12px 32px rgba(0,0,0,.5);
}

/* Theme flip — only affects routes that opt in. */
html[data-theme="phase2"] body{
  background:var(--pd-bg-0);
  color:var(--pd-text);
  font-family:'Urbanist','Inter',system-ui,sans-serif;
}

/* ---------- PRIMITIVE COMPONENTS ---------- */

/* Card */
.pd-card{
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-lg);
  padding:16px;
  transition:border-color .18s var(--pd-ease-smooth),
             transform .18s var(--pd-ease-smooth);
}
.pd-card:hover{ border-color:var(--pd-line-hover); }
.pd-card-lifted{
  background:var(--pd-surface);
  box-shadow:var(--pd-shadow-card);
}

/* Buttons */
.pd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px;
  border:1px solid transparent;
  border-radius:var(--pd-radius-sm);
  font-family:'Urbanist','Inter',sans-serif;
  font-weight:700; font-size:16px;
  color:var(--pd-text);
  background:transparent;
  cursor:pointer;
  user-select:none;
  transition:transform .15s var(--pd-ease-snap),
             background .18s var(--pd-ease-smooth),
             border-color .18s var(--pd-ease-smooth),
             filter .18s var(--pd-ease-smooth);
}
.pd-btn:active{ transform:scale(.97); }
.pd-btn-primary{ background:var(--pd-blue); color:#fff; }
.pd-btn-primary:hover{ background:var(--pd-blue-hover); }
.pd-btn-success{ background:var(--pd-green); color:#fff; }
.pd-btn-success:hover{ background:var(--pd-green-hover); }
.pd-btn-secondary{ background:var(--pd-surface); color:var(--pd-text); }
.pd-btn-secondary:hover{ background:var(--pd-surface-2); }
.pd-btn-ghost{ color:var(--pd-text-mute); }
.pd-btn-ghost:hover{ color:var(--pd-text); background:rgba(250,250,250,.04); }
.pd-btn-sm{ height:32px; padding:0 12px; font-size:15px; }
.pd-btn-lg{ height:48px; padding:0 22px; font-size:16px; }

/* Pills (filter chips / badges) */
.pd-pill{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 12px;
  border-radius:var(--pd-radius-sm);
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  font-family:'Urbanist',sans-serif;
  font-weight:600; font-size:14px;
  color:var(--pd-text-mute);
  letter-spacing:.02em;
  cursor:pointer;
  transition:color .15s var(--pd-ease-smooth),
             background .15s var(--pd-ease-smooth);
}
.pd-pill:hover{ color:var(--pd-text); }
.pd-pill-active{ color:var(--pd-text); background:var(--pd-surface); }

/* Section header */
.pd-section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:24px 0 12px;
}
.pd-section-title{
  display:flex; align-items:center; gap:8px;
  font-family:'Urbanist',sans-serif;
  font-weight:700; font-size:18px;
  color:var(--pd-text);
}
.pd-section-title-icon{
  color:var(--pd-text-mute);
  font-size:18px; line-height:1;
}
.pd-section-title-icon.pd-icon-accent{ color:var(--pd-yellow); }
.pd-section-view-all{
  font-family:'Urbanist',sans-serif;
  font-weight:600; font-size:15px;
  color:var(--pd-text-mute);
  text-decoration:none;
  cursor:pointer;
}
.pd-section-view-all:hover{ color:var(--pd-text); }

/* Pack tile (Packs grid, New Packs row, battle thumbnails) */
.pd-pack-tile-wrap{ display:flex; flex-direction:column; gap:8px; }
.pd-pack-tile{
  position:relative;
  display:flex; flex-direction:column;
  aspect-ratio:3/4;
  border-radius:var(--pd-radius-lg);
  overflow:hidden;
  cursor:pointer;
  /* Borderless / frameless — the pack JPG is the visual. The chrome that
     was here (panel bg + line border) made every tile read as a card
     INSIDE a card. Drop-shadow gives the only lift. */
  background: transparent;
  border: none;
  transition: transform .2s var(--pd-ease-spring);
}
.pd-pack-tile:hover{
  transform: translateY(-4px);
}
.pd-pack-tile-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* Pack name caption — sits BELOW the pack art (in the wrap, next to
   the price), not overlaying it. The previous absolute-top placement
   doubled up with the pack name baked into the card art and looked
   muddy/illegible against bright pack JPGs. Bumped from 13 → 15 for
   scannability — feedback was the labels read too small relative to
   the pack art above them. */
.pd-pack-tile-title{
  font-family:'Urbanist',sans-serif;
  font-weight:800; font-size:15px;
  color: var(--pd-text);
  text-align:center;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top: 4px;
  padding: 0 4px;
}
.pd-pack-tile-price{
  font-family:'Urbanist',sans-serif;
  font-weight:800; font-size:15px;
  color: var(--pd-text);
  text-align:center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
/* Bigger coin glyph on the price line — at the prior 1.35em base,
   the icon was visually thin next to bold price text, reading as
   ambiguous decoration rather than a currency badge. */
.pd-pack-tile-price .bc-glyph{
  width: 18px;
  height: 18px;
  margin-left: 0;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Feed item — right-rail Live Opens / Top Opens.
   Flat matte-navy panel matching the bloxrain reference: NO border
   hairline, NO gradient, just a solid contained box with rounded
   corners. Tier glow lives on the artwork halo, not the card edge. */
.pd-feed-item{
  --pd-tier-glow:var(--pd-tier-common);
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  /* Roughly square aspect — image sits centered with moderate
     vertical breathing room above and below. */
  padding:46px 18px 40px;
  border-radius:14px;
  /* Flat neutral dark-gray panel — matches the reference exactly:
     no purple/blue tint, no floating shadow, just a contained box
     that sits cleanly on the rail background. */
  background: #1c1f29;
  border:0;
  text-align:center;
  width:100%;
  cursor:pointer;
  font:inherit; color:inherit;
  overflow:hidden;
  box-shadow:none;
  transition:
    background-color .2s cubic-bezier(.4,0,.2,1),
    transform .2s cubic-bezier(.4,0,.2,1),
    box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.pd-feed-item:hover{
  background: #232734;
  transform: translateY(-1px);
  box-shadow:none;
}
/* Empty-state placeholder while waiting for first fetch */
.pd-feed-empty{
  padding:30px 14px;
  font-family:'Urbanist',sans-serif;
  font-size:14px; font-weight:500;
  color:var(--pd-text-mute);
  text-align:center;
  letter-spacing:.06em;
  text-transform:uppercase;
}
/* Pack-preview overlay — shows the source pack's RAW card art on hover.
   Borderless, no chrome — the JPEG IS the visual. Slides up from below
   the item with a clean spring curve. The item-img + name/price stay
   visible behind so the player sees "won X / from Y pack" at a glance. */
.pd-feed-item-pack-preview{
  position:absolute;
  /* Spans nearly the full card on reveal — leaves a small margin on
     all sides so the rounded card corners stay visible around the
     pack art. Avatar (z-index:8) still sits above the preview. */
  left:8px; right:8px;
  top:8px;
  bottom:8px;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:10px;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  /* CARD-DRAW initial state — translated fully below the card AND
     scaled slightly down so the entry reads as a card being drawn
     up from below. The card's overflow:hidden clips the preview
     until it slides into the visible area. */
  transform: translate3d(0, calc(100% + 24px), 0) scale(.92);
  transform-origin: center bottom;
  /* GPU layer promotion — critical for iOS Safari to avoid jank on
     the long transform. */
  will-change: transform, opacity;
  backface-visibility: hidden;
  /* Gradual emergence — opacity fades in early and quickly, transform
     keeps moving for nearly a full second so the card has time to
     glide into place. cubic-bezier(.16, 1, .3, 1) is a long velvety
     ease-out — the card builds momentum, slows, and settles. */
  transition:
    opacity .42s cubic-bezier(.22, 1, .36, 1),
    transform .85s cubic-bezier(.16, 1, .3, 1);
  z-index:5;
}
.pd-feed-item:hover .pd-feed-item-pack-preview,
.pd-feed-item:active .pd-feed-item-pack-preview,
.pd-feed-item.is-touch-peek .pd-feed-item-pack-preview{
  opacity:1;
  transform: translate3d(0, 0, 0) scale(1);
}
.pd-feed-item-pack-img{
  /* Bigger pack art — fills most of the now-larger preview area. */
  max-width: 94%;
  max-height: 94%;
  object-fit:contain;
  /* Single soft drop-shadow — multiple filter() layers tank iOS
     compositing during the transform. */
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.55));
  /* Mouse-tracked tilt — perspective gives depth; rotation values
     come from --pd-mx / --pd-my set by JS on mousemove (range -1..1,
     0 when cursor is centered or absent). translateZ(0) forces a
     compositor layer so the tilt stays buttery. Short transition lets
     the card track the cursor smoothly without lag and settles back
     to flat when the cursor leaves. */
  transform:
    perspective(700px)
    rotateY(calc(var(--pd-mx, 0) * 14deg))
    rotateX(calc(var(--pd-my, 0) * -14deg))
    translateZ(0);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
/* Fade the original item image AND name on hover so the pack-card
   slide-in reads as a clean replacement, not an overlay collage. */
.pd-feed-item .pd-feed-item-img,
.pd-feed-item .pd-feed-item-name,
.pd-feed-item .pd-feed-item-price{
  transition: opacity .22s cubic-bezier(.32,.72,0,1);
}
.pd-feed-item:hover .pd-feed-item-img,
.pd-feed-item:hover .pd-feed-item-name,
.pd-feed-item:hover .pd-feed-item-price{
  opacity: 0;
}
@media (prefers-reduced-motion: reduce){
  /* The pack-preview reveal IS how a player sees WHICH pack an item was
     unboxed from — a deliberate, user-initiated interaction (hover on
     desktop, press-and-hold on touch), not ambient decoration. The old
     rule set `transition: none` on the preview here, so it snapped open
     with no animation — the user's "on mobile the animation is flat, it
     just pops up" report, hit because iOS Safari runs reduce-motion by
     default for many users. So we KEEP the slide + fade, just a touch
     shorter/gentler than the full-motion .85s. Only the cursor-tracked
     3D tilt — a genuine vestibular trigger, and meaningless on touch —
     stays disabled. */
  .pd-feed-item-pack-preview{
    transition:
      opacity .28s ease,
      transform .42s cubic-bezier(.16, 1, .3, 1);
  }
  .pd-feed-item-pack-img{ transform: none; transition: none; }
}

/* Entrance for new rows + exit for retired rows.
   These animate ONLY transform + opacity — both are compositor
   properties, so each frame is a GPU layer composite with zero
   layout/reflow cost. The vertical RESHUFFLE of surviving rows
   (making room for the new one, closing the gap left by the
   retired one) is handled separately in JS via a FLIP transform
   glide, NOT by animating max-height/padding here. Mixing the two
   was the old jank source: keyframing max-height forced a synchronous
   reflow of the whole rail on every single frame. */
@keyframes pd-feed-slide-in{
  0%   { opacity: 0; transform: translate3d(0, -16px, 0) scale(.94); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes pd-feed-slide-out{
  0%   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.95); }
}
.pd-feed-item.is-new{
  /* Long velvety ease-out (.16,1,.3,1) — the row builds momentum,
     decelerates, and settles, exactly like packdraw's drop-in. */
  animation: pd-feed-slide-in .5s cubic-bezier(.16, 1, .3, 1) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.pd-feed-item.is-removing{
  animation: pd-feed-slide-out .32s cubic-bezier(.4, 0, .4, 1) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .pd-feed-item.is-new,
  .pd-feed-item.is-removing{ animation: none; }
}
.pd-feed-item[data-tier="uncommon"] { --pd-tier-glow:var(--pd-tier-uncommon); }
.pd-feed-item[data-tier="rare"]     { --pd-tier-glow:var(--pd-tier-rare); }
.pd-feed-item[data-tier="epic"]     { --pd-tier-glow:var(--pd-tier-epic); }
.pd-feed-item[data-tier="legendary"]{ --pd-tier-glow:var(--pd-tier-legendary); }
.pd-feed-item[data-tier="mythic"]   { --pd-tier-glow:var(--pd-tier-mythic); }
.pd-feed-item-img-wrap{
  position:relative;
  /* Smaller artwork box — image takes less of the card so the
     overall card reads taller / more rectangular, matching the
     reference. */
  width:78px; height:78px;
  display:grid; place-items:center;
  margin-bottom:18px;
}
.pd-feed-item-img-wrap::before{
  /* Halo glow removed — reference renders a flat backdrop behind
     the item, no radial light behind the artwork. */
  content:none;
}
.pd-feed-item-img{
  position:relative; z-index:1;
  max-width:100%; max-height:100%;
  object-fit:contain;
  /* Single soft drop-shadow — no tier-colored second shadow which
     was reading as an extra glow layer. */
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.pd-feed-item-name{
  font-family:'Urbanist',sans-serif;
  font-size:15px; font-weight:500;
  color: rgba(148,163,184,.92);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
.pd-feed-item-price{
  font-family:'Urbanist',sans-serif;
  font-size:16px; font-weight:800;
  color:#ffffff;
  font-variant-numeric:tabular-nums;
  margin-top:6px;
  /* Tight centered row: amount + glyph baseline-aligned with the
     text x-height so the BC/HC icon doesn't read as floating
     next to the number. */
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px;
}
/* Coin glyph next to feed-item price — sized to match the price
   text height so the icon sits on the same baseline. The default
   .bc-glyph CSS pulls a 14×14 image; we want it to read at the
   x-height of the 16px price font (~12px) for a clean inline feel. */
.pd-feed-item-price .bc-glyph{
  width:13px !important;
  height:13px !important;
  margin:0 !important;
  vertical-align:middle;
  flex-shrink:0;
}
.pd-feed-item-avatar{
  position:absolute;
  /* Inside the card top-right corner (not overflowing) with
     breathing room from the edges, matching the bloxrain reference
     exactly. The prior overflow-the-corner position was too tight
     against the edge. */
  top:14px; right:14px;
  /* Bumped 24 → 32 — the reference avatars read clearly at a
     glance instead of being a tiny dot. */
  width:32px; height:32px;
  border-radius:50%;
  background:var(--pd-surface);
  display:grid; place-items:center;
  font-size:15px; font-weight:700;
  /* Subtle dark ring + faint shadow so the avatar pops off the
     panel cleanly, no harsh stroke. */
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 2px 6px rgba(0,0,0,.40),
    inset 0 0 0 2px rgba(0,0,0,.20);
  /* Above the hover pack-preview so the avatar stays visible on hover. */
  z-index:8;
  overflow:hidden;
}
/* When the player has a Roblox CDN headshot, the bubble contains an
   <img> instead of a letter. Strip padding and let the image fill. */
.pd-feed-item-avatar.pd-feed-item-avatar-img{
  background: var(--pd-bg-2);
  padding: 0;
}
.pd-feed-item-avatar.pd-feed-item-avatar-img > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Modal open → fade the right rail ─────────────────────────────────
   Every modal-backdrop sits at z-index 200, above the live-feed rail (z-index
   auto) — but at 82% backdrop opacity the bright player headshots still read
   through and "pop" against the dimmed page (the "profile images pop out"
   report on the pack-reveal modal). Fading the rail to near-zero while ANY
   modal is open keeps the focus on the modal. :has() is supported in all
   current browsers; older ones simply keep the prior behaviour. */
body:has(.modal-backdrop.open) #pd-rightrail{
  opacity:.05;
  pointer-events:none;
  transition:opacity .2s ease;
}

/* Right-rail container */
.pd-rightrail{
  width:300px;
  flex:0 0 300px;
  background:var(--pd-bg-1);
  border-left:0;
  display:flex; flex-direction:column;
  /* No inner scroll — the rail flows with the page so the main page
     scroll moves the rail too, instead of trapping it in its own
     scrollable column. */
  padding:0 12px 16px 16px;
}
.pd-rail-section{ padding:18px 0 8px; }
/* List rule — gap between cards, no internal padding. Gap bumped
   to 14px so the floating cards have visible space between them. */
.pd-rail-list{ position:relative; display:flex; flex-direction:column; gap:14px; padding:0; }
.pd-rail-title{
  display:flex; align-items:center; gap:6px;
  /* Title's left edge aligns with the cards' left edge (rail
     already supplies the 16px gap). Right padding matches the
     card-aligned right (no extra gap). */
  padding:0 0 12px 4px;
  font-family:'Urbanist',sans-serif;
  font-weight:700; font-size:16px;
  color:var(--pd-text);
  letter-spacing:.02em;
}
.pd-rail-title-icon{
  font-size:16px; line-height:1;
  color:var(--pd-yellow);
}
.pd-rail-title-icon.pd-icon-live{
  color:var(--pd-red);
  animation:pd-pulse 1.6s ease-in-out infinite;
}
@keyframes pd-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.4; }
}
/* (Superseded by the gap-aware .pd-rail-list rule above — kept as a
   harmless no-op so any later rule appending properties still hits a
   matching selector.) */
.pd-rail-list{ /* see redesigned rule earlier */ }

/* Top nav (used by Phase 2 chrome — built in Session 2) */
.pd-topnav{ display:flex; align-items:center; gap:6px; }
.pd-topnav-link{
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 14px;
  border-radius:var(--pd-radius-sm);
  font-family:'Urbanist',sans-serif;
  font-weight:600; font-size:16px;
  color:var(--pd-text-mute);
  text-decoration:none;
  transition:color .15s var(--pd-ease-smooth),
             background .15s var(--pd-ease-smooth);
  cursor:pointer;
}
.pd-topnav-link:hover{ color:var(--pd-text); }
.pd-topnav-link.pd-active{
  color:var(--pd-text);
  background:var(--pd-surface);
}
/* `display:inline-flex` above shadows the browser-default [hidden]{display:none},
   so the rank-gated #pd-admin-link (which app.js keeps `hidden` on for
   non-admins) was rendering for EVERYONE. Restore the attribute's effect —
   same pattern as .sb-link[hidden] / .btn[hidden] elsewhere in this file. */
.pd-topnav-link[hidden]{ display:none !important; }
.pd-topnav-link-icon{ font-size:16px; line-height:1; }

@media (max-width: 1100px){
  .pd-rightrail{ display:none; }
}
@media (max-width: 720px){
  .pd-topnav-link{ padding:0 10px; font-size:15px; }
}

/* ============================================================
   PHASE 2 — ACTIVATION + LAYOUT
   When html[data-theme="phase2"] is set: hide old chrome, lay out
   new chrome (pd-topbar + pd-rightrail), and reveal pd-home content
   while hiding the legacy home sections. Outside phase2 mode the
   site is unchanged.
   ============================================================ */

/* Hide the new chrome by default; pd-chrome.js drops the hidden
   attribute when phase2 turns on. */
#pd-topbar[hidden], #pd-rightrail[hidden]{ display:none !important; }

/* Pd-home block: rendered only when JS sets data-pd-home="1" on <html>
   (currently means: on the home route). Other routes show their existing
   inner content unchanged. */
.pd-home{ display:none; }
html[data-pd-home="1"] .pd-home{ display:block; }

/* When phase2 is on (every route): hide legacy chrome wholesale.
   NOTE: aside.chat is NOT hidden — it's re-styled below as a compact
   bottom-left modal (see "phase2 chat modal" block at end of file). */
html[data-theme="phase2"] header.topbar,
html[data-theme="phase2"] aside.sidebar,
html[data-theme="phase2"] .prices-ticker,
html[data-theme="phase2"] .bg-orb{
  display:none !important;
}

/* On the home route, hide legacy home children so only .pd-home renders. */
html[data-pd-home="1"] section.route[data-route="home"] > :not(.pd-home){
  display:none !important;
}

/* Re-layout the page in phase2: pd-topbar fixed up top, pd-layout
   below it = main + rightrail. */
html[data-theme="phase2"] body{
  padding-top:72px;  /* room for the fixed 72px top bar */
}
html[data-theme="phase2"] .layout{
  display:flex;
  margin:0;
  padding:0;
  gap:0;
  /* dvh — iOS Safari URL bar otherwise reports the LARGE viewport for
     100vh, leaving 100vh-72px taller than the actually-visible area
     and creating a phantom-scroll page-jump on every URL-bar toggle. */
  min-height:calc(100dvh - 72px);
  /* transparent so the fixed page background image (body::before) shows
     through the main content column, like the reference site */
  background:transparent;
}
html[data-theme="phase2"] main#app{
  flex:1 1 auto;
  min-width:0;
  padding:0;
  background:transparent;
}

/* ── Seamless scroll — no visible scrollbars ──────────────────────────
   The single far-right "slider" was the body scrollbar that dragged the
   whole page. Hide it: the center column still scrolls (the rail + chat
   are sticky and pin to the viewport), it just scrolls with no track.
   Then strip the remaining inner scrollbars on the persistent chrome so
   the layout reads as one clean surface. Scrolling stays fully working —
   only the visual track is removed. */
html[data-theme="phase2"],
html[data-theme="phase2"] body,
html[data-theme="phase2"] .chat-body{
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* legacy Edge/IE */
}
html[data-theme="phase2"]::-webkit-scrollbar,
html[data-theme="phase2"] body::-webkit-scrollbar,
html[data-theme="phase2"] .chat-body::-webkit-scrollbar{
  width:0; height:0; display:none;   /* WebKit / Blink */
}

/* ---------- pd-topbar ---------- */
#pd-topbar{
  position:fixed;
  top:0; left:0; right:0;
  /* 72px — bumped from 64 to give the larger wordmark logo and the
     account pill more breathing room (packdraw's link wraps a 64px
     bar with the brand text + icon = ~125px wide; mine needs slightly
     more vertical room so the image-based logo doesn't read tiny). */
  height:72px;
  /* 3-zone grid: brand+nav (left) · wallet (centered) · HUD (right).
     The centre `auto` track sizes to the wallet cluster and sits dead-centre
     between two equal flexible side tracks, so the balance is screen-centred
     (splits.gg style). minmax(0,1fr) lets the side tracks shrink below their
     content — the nav then scrolls inside its own track instead of ever
     overlapping the wallet. Falls back to flex (grouped-right) on phones. */
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  /* max() so notched-iPhone safe-area insets EXPAND the gutter when
     present, but desktop / Android still get the designed 20px gutter.
     Without this, the wordmark + balance pill render UNDER the notch
     on iPhone 14 Pro etc. in landscape. */
  padding:0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  /* translucent glass so the page background image shows through the bar */
  background:var(--pd-glass-bar);
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  border-bottom:1px solid var(--pd-line);
  z-index:80;
  gap:16px;
}
/* Left zone — brand + nav share one flex row inside the grid's first
   track. min-width:0 lets the track shrink so the nav can scroll inside
   it (the nav owns overflow-x) rather than pushing the wallet off-centre. */
.pd-topbar-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  /* Stretch to FILL the left grid track (not content-sized) so the nav is
     clamped to the track and scrolls inside it, instead of spilling over
     the centred wallet. justify-self:start would size it to content (562px)
     and overflow into the centre — stretch + overflow:hidden enforces the
     clamp, and the nav's own overflow-x:auto handles the horizontal scroll. */
  justify-self:stretch;
  overflow:hidden;
}
.pd-topbar-logo{
  display:inline-flex; align-items:center;
  text-decoration:none;
  flex:0 0 auto;
}
.pd-topbar-logo-img{
  /* 60px — image is 1672×941 so the rendered width auto-resolves to
     ~107px wide, matching packdraw's 125px-wide brand link. With the
     72px bar this leaves 6px breathing space top + bottom. */
  height:60px; width:auto;
  display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
@media (max-width:760px){
  .pd-topbar-logo-img{ height:44px; }
}

/* Horizontal-scroll wrapper. Fade-edge mask hints overflow without showing
   an ugly scrollbar. On wider viewports all items fit and the mask is moot. */
.pd-topnav-scroll{
  flex:1 1 auto;
  min-width:0;
  margin-left:4px;
  /* Hug the logo (left-aligned). The wallet now owns the centre of the bar,
     so the nav lives in the left grid track and starts from the brand —
     three zones read as logo+nav · wallet · HUD. The nav scrolls inside its
     own track on narrow widths, so it can never overlap the centred wallet. */
  display:flex;
  justify-content:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.pd-topnav-scroll::-webkit-scrollbar{ display:none; }
.pd-topnav{
  display:inline-flex; align-items:center; gap:2px;
  padding:0 24px;
  width:max-content;
}
/* Override the .pd-topnav-link primitive padding to fit more items in the
   bar without making the row taller. */
#pd-topbar .pd-topnav-link{
  height:36px; padding:0 11px;
  font-size:13.5px;
  white-space:nowrap;
  flex-shrink:0;
}

/* Game items show a small circular thumbnail of the game's art instead of
   a line icon. Lifts the nav visually so players spot games at a glance. */
.pd-topnav-game-icon{
  width:22px; height:22px;
  border-radius:50%;
  overflow:hidden;
  background:var(--pd-surface);
  display:grid; place-items:center;
  flex-shrink:0;
}
.pd-topnav-game-icon img{
  width:100%; height:100%;
  object-fit:cover;
}

/* Visual separator between category and game groups. Just a thin pip. */
.pd-topnav-sep{
  display:inline-block;
  width:1px; height:18px;
  background:var(--pd-line-hover);
  margin:0 6px;
  flex-shrink:0;
}

/* ============================================================
   ORIGINALS DROPDOWN — single "Originals" tab that pops a
   panel listing all 9 game shortcuts. Themed against the
   site's --pd-* palette (matte navy + blue accents).
============================================================ */
.pd-topnav-dropdown{
  position: relative;
  display: inline-flex;
}
.pd-topnav-dropdown-trigger{
  cursor: pointer;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  transition: background-color .2s cubic-bezier(.4,0,.2,1),
              color .2s cubic-bezier(.4,0,.2,1);
}
.pd-topnav-dropdown-trigger:hover{
  background: var(--pd-bg-2);
  color: var(--pd-text);
}
.pd-topnav-dropdown-caret{
  margin-left: 4px;
  opacity: .55;
  transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.pd-topnav-dropdown.open .pd-topnav-dropdown-trigger{
  background: var(--pd-bg-2);
  color: var(--pd-text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px var(--pd-line-hover);
}
.pd-topnav-dropdown.open .pd-topnav-dropdown-caret{
  transform: rotate(180deg);
  opacity: 1;
  color: var(--pd-blue-accent);
}
.pd-topnav-dropdown-menu{
  /* position: fixed so we escape the .pd-topnav-scroll container's
     mask-image clip (the scroll wrapper has overflow:hidden + a
     mask gradient for the fade edges, both of which chop fixed-
     positioned descendants). JS also re-parents the menu out of
     the scroll wrapper into #pd-topbar so the mask doesn't clip it.
     JS sets top + left from the trigger's getBoundingClientRect. */
  position: fixed;
  top: 72px;
  left: 0;
  min-width: 230px;
  padding: 8px;
  /* Matte panel that matches the site's card chrome — flat dark with
     a subtle blue radial wash at top for the "modern dark UI" feel,
     plus an inset top hairline for elevation. */
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--pd-blue-accent, #57abf8) 8%, transparent), transparent 60%),
    var(--pd-bg-1);
  border: 1px solid var(--pd-line-hover);
  border-radius: var(--pd-radius-md, 10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 40px rgba(0,0,0,.55),
    0 2px 8px rgba(0,0,0,.40),
    0 0 0 1px rgba(0,0,0,.30);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
  /* Hidden by default, JS toggles .open to show. Animation: scale up
     from 96% + 6px slide-up + fade-in over 220ms with a soft ease. */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.96);
  transform-origin: top left;
  transition:
    opacity .22s cubic-bezier(.32,.72,0,1),
    transform .22s cubic-bezier(.32,.72,0,1);
}
.pd-topnav-dropdown.open .pd-topnav-dropdown-menu,
.pd-topnav-dropdown-menu.open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
/* Staggered entrance for items — they fade + slide in after the
   panel finishes its scale-up so the panel reads as "opening" then
   "filling". CSS-only via delay-per-child. */
.pd-topnav-dropdown-menu .pd-topnav-dropdown-item{
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity .18s cubic-bezier(.32,.72,0,1),
    transform .18s cubic-bezier(.32,.72,0,1),
    background-color .15s ease,
    color .15s ease;
}
.pd-topnav-dropdown-menu.open .pd-topnav-dropdown-item,
.pd-topnav-dropdown.open .pd-topnav-dropdown-menu .pd-topnav-dropdown-item{
  opacity: 1;
  transform: translateY(0);
}
.pd-topnav-dropdown-menu.open .pd-topnav-dropdown-item:nth-child(1){ transition-delay: .04s; }
.pd-topnav-dropdown-menu.open .pd-topnav-dropdown-item:nth-child(2){ transition-delay: .07s; }
.pd-topnav-dropdown-menu.open .pd-topnav-dropdown-item:nth-child(3){ transition-delay: .10s; }
.pd-topnav-dropdown-menu.open .pd-topnav-dropdown-item:nth-child(4){ transition-delay: .13s; }
.pd-topnav-dropdown-menu.open .pd-topnav-dropdown-item:nth-child(5){ transition-delay: .16s; }
.pd-topnav-dropdown-menu.open .pd-topnav-dropdown-item:nth-child(6){ transition-delay: .19s; }
.pd-topnav-dropdown-menu.open .pd-topnav-dropdown-item:nth-child(7){ transition-delay: .22s; }
.pd-topnav-dropdown-menu.open .pd-topnav-dropdown-item:nth-child(8){ transition-delay: .25s; }
.pd-topnav-dropdown-menu.open .pd-topnav-dropdown-item:nth-child(9){ transition-delay: .28s; }
.pd-topnav-dropdown-item{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px 9px 10px;
  border-radius: 7px;
  font-family: 'Urbanist', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pd-text-mute);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.pd-topnav-dropdown-item:hover{
  background: var(--pd-bg-2);
  color: var(--pd-text);
  padding-left: 12px;
}
/* Subtle left-edge blue accent on hover — the brand color flickering
   in matches the site's card-hover language without overcommitting. */
.pd-topnav-dropdown-item::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--pd-blue-accent, #57abf8);
  border-radius: 99px;
  transform: translateY(-50%);
  transition: height .2s cubic-bezier(.32,.72,0,1);
}
.pd-topnav-dropdown-item:hover::before{ height: 60%; }
.pd-topnav-dropdown-item.pd-active{
  background: color-mix(in srgb, var(--pd-blue-accent, #57abf8) 14%, var(--pd-bg-2));
  color: var(--pd-text);
}
.pd-topnav-dropdown-item.pd-active::before{ height: 70%; }
/* Slight scale-up on the game-icon when the row is hovered — same
   inner-image scale pattern packdraw uses on card hover. */
.pd-topnav-dropdown-item .pd-topnav-game-icon{
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.pd-topnav-dropdown-item:hover .pd-topnav-game-icon{
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce){
  .pd-topnav-dropdown-menu,
  .pd-topnav-dropdown-caret,
  .pd-topnav-dropdown-item,
  .pd-topnav-dropdown-item::before,
  .pd-topnav-dropdown-item .pd-topnav-game-icon{ transition: none; }
  .pd-topnav-dropdown-menu .pd-topnav-dropdown-item{ opacity: 1; transform: none; }
}

#pd-topbar-right{
  display:flex; align-items:center; gap:10px;
  /* Stretch to the third grid track with content hugged to the far edge.
     (justify-self:end would content-size it and let it spill left over the
     wallet on tight widths — same trap as the left zone.) */
  justify-self:stretch;
  justify-content:flex-end;
  min-width:0;
}

/* ============================================================
   CENTER WALLET ZONE (splits.gg-style)
   The balance pill + Deposit, centred in the topbar. pd-chrome.js
   re-parents the existing #balance-pill + #open-deposit in here, so
   these rules fully (re)style them — they no longer inherit the
   #pd-topbar-right HUD normalizers. Deliberately a touch larger +
   more tactile than the right HUD: this is the hero of the bar.
   Premium feel = glossy top highlight, a pressed-in bottom edge, and
   a snappy translate on :active. Matte, NOT glowing (no AI-slop halo).
============================================================ */
.pd-topbar-center{
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:center;   /* dead-centre auto track */
  gap:10px;
  min-width:0;
}
.pd-topbar-center .balance-wrap{ margin:0; }

/* Balance pill — tactile matte chip. Prefixed with the phase2 theme +
   nested under .pd-topbar-center so it OUT-specifies (and !important-beats)
   the global `html[data-theme="phase2"] .balance` rule that forces
   box-shadow:none + a flat bg. */
html[data-theme="phase2"] .pd-topbar-center .balance{
  height:42px !important;
  padding:0 16px !important;
  display:inline-flex; align-items:center; gap:9px;
  border-radius:11px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 46%),
    var(--pd-bg-2) !important;
  border:1px solid var(--pd-line-hover, rgba(250,250,250,.10)) !important;
  box-shadow:
    0 4px 10px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 0 rgba(0,0,0,.30) !important;
  color:var(--pd-text) !important;
  font-family:'Urbanist','Inter',sans-serif;
  font-size:16px; font-weight:800; letter-spacing:.01em;
  cursor:pointer;
  transition:
    transform var(--motion-fast,180ms) var(--pd-ease-smooth),
    border-color var(--motion-fast,180ms) var(--pd-ease-smooth),
    box-shadow var(--motion-fast,180ms) var(--pd-ease-smooth);
}
html[data-theme="phase2"] .pd-topbar-center .balance:hover{
  border-color:color-mix(in srgb, var(--pd-blue-accent, #57abf8) 45%, var(--pd-line-hover, rgba(250,250,250,.10))) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.30) !important;
  filter:none !important;
}
html[data-theme="phase2"] .pd-topbar-center .balance:active{ transform:translateY(1px); }
html[data-theme="phase2"] .pd-topbar-center .balance .balance-coin-icon,
html[data-theme="phase2"] .pd-topbar-center .balance .bcoin-icon{
  width:20px !important; height:20px !important;
}
html[data-theme="phase2"] .pd-topbar-center .balance #balance-amount{ font-weight:800; }

/* Deposit — the premium primary CTA. Glossy blue "physical key":
   top highlight + body gradient + dark bottom edge, soft cast shadow.
   Press = key travels down 1px and the bottom edge collapses inward.
   Prefixed + !important to beat the global phase2 .btn-deposit box-shadow. */
html[data-theme="phase2"] .pd-topbar-center .btn-deposit{
  height:42px !important;
  padding:0 22px !important;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none !important;
  border-radius:11px !important;
  background:linear-gradient(180deg,
    color-mix(in srgb, #ffffff 16%, var(--pd-blue, #4299e1)) 0%,
    var(--pd-blue, #4299e1) 50%,
    var(--pd-blue-hover, #3182ce) 100%) !important;
  color:#fff !important;
  font-family:'Urbanist','Inter',sans-serif;
  font-weight:800; font-size:15px; letter-spacing:.02em;
  cursor:pointer;
  box-shadow:
    0 6px 16px rgba(40,110,210,.34),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 0 rgba(0,0,0,.22) !important;
  transition:
    transform var(--motion-snap,120ms) var(--pd-ease-smooth),
    box-shadow var(--motion-fast,180ms) var(--pd-ease-smooth),
    filter var(--motion-fast,180ms) var(--pd-ease-smooth);
}
html[data-theme="phase2"] .pd-topbar-center .btn-deposit:hover{
  filter:brightness(1.06);
  box-shadow:
    0 8px 22px rgba(40,110,210,.42),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -2px 0 rgba(0,0,0,.22) !important;
}
html[data-theme="phase2"] .pd-topbar-center .btn-deposit:active{
  transform:translateY(1px);
  filter:brightness(.98);
  box-shadow:
    0 3px 8px rgba(40,110,210,.28),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 2px 5px rgba(0,0,0,.26) !important;
}
html[data-theme="phase2"] .pd-topbar-center .btn-deposit .btn-shine{ display:none !important; } /* mute legacy red shimmer */

/* Reduced-motion — keep the depth/feedback (shadow swap stays) but drop the
   translate so nothing slides for motion-sensitive users. */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] .pd-topbar-center .balance,
  html[data-theme="phase2"] .pd-topbar-center .btn-deposit{ transition:box-shadow var(--motion-fast,180ms) linear, filter var(--motion-fast,180ms) linear; }
  html[data-theme="phase2"] .pd-topbar-center .balance:active,
  html[data-theme="phase2"] .pd-topbar-center .btn-deposit:active{ transform:none; }
}

/* ---- ≤1100px: below the wide-desktop band (this is also where the side
   rail hides), three balanced zones no longer fit, so collapse the grid to
   a flex row and group the wallet WITH the right HUD — i.e. the pre-existing
   "everything on the right" behaviour. The nav reclaims the full left. ---- */
@media (max-width:1100px){
  #pd-topbar{
    display:flex;
    align-items:center;
  }
  /* Only the brand+nav zone absorbs the squeeze (the nav scrolls inside it);
     the wallet + HUD keep their content width so the Deposit button never
     compresses into the profile/icons on a narrow phone. */
  .pd-topbar-left{ flex:1 1 auto; min-width:0; }
  .pd-topbar-center{
    justify-self:auto;
    flex:0 0 auto;
    margin-left:auto;   /* float the wallet to the right, beside the HUD */
    gap:8px;
  }
  #pd-topbar-right{ justify-self:auto; flex:0 0 auto; }
  html[data-theme="phase2"] .pd-topbar-center .balance{ height:38px !important; padding:0 13px !important; font-size:15px; border-radius:10px !important; }
  html[data-theme="phase2"] .pd-topbar-center .btn-deposit{ height:38px !important; padding:0 17px !important; font-size:14px; border-radius:10px !important; }
}

/* ---- Phones (≤640px): tighten further + drop the trailing glyph (the
   leading coin icon already marks the currency). Mirrors the prior
   right-HUD phone shrink so the bar still fits a narrow viewport. ---- */
@media (max-width:640px){
  html[data-theme="phase2"] .pd-topbar-center{ gap:6px; }
  html[data-theme="phase2"] .pd-topbar-center .balance{ height:36px !important; padding:0 11px !important; font-size:13.5px; border-radius:9px !important; }
  html[data-theme="phase2"] .pd-topbar-center .balance .balance-coin-icon,
  html[data-theme="phase2"] .pd-topbar-center .balance .bcoin-icon{ width:18px !important; height:18px !important; }
  html[data-theme="phase2"] .pd-topbar-center .balance .balance-label{ display:none !important; }
  html[data-theme="phase2"] .pd-topbar-center .btn-deposit{ height:36px !important; padding:0 14px !important; font-size:12.5px; border-radius:9px !important; }
}

/* Restyle the MOVED legacy buttons so they sit naturally in the new bar.
   We only touch them inside the pd-topbar — original styles still apply
   when those elements live in the old topbar (non-phase2 routes). */
#pd-topbar-right .balance-wrap{
  margin:0;
}
#pd-topbar-right .balance{
  height:38px;
  padding:0 14px;
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-sm);
  color:var(--pd-text);
  font-family:'Urbanist','Inter',sans-serif;
}
#pd-topbar-right .btn-deposit,
#pd-topbar-right .btn-primary{
  background:var(--pd-blue) !important;
  border-color:var(--pd-blue) !important;
  color:#fff !important;
  border-radius:var(--pd-radius-sm) !important;
  height:38px !important;
  padding:0 18px !important;
  font-family:'Urbanist','Inter',sans-serif !important;
  font-weight:700 !important;
  font-size:16px !important;
  box-shadow:none !important;
}
#pd-topbar-right .btn-deposit:hover,
#pd-topbar-right .btn-primary:hover{
  background:var(--pd-blue-hover) !important;
  border-color:var(--pd-blue-hover) !important;
}
#pd-topbar-right .btn-deposit .btn-shine,
#pd-topbar-right .btn-primary .btn-shine{ display:none; } /* mute the red shimmer */
#pd-topbar-right .btn-ghost{
  background:var(--pd-bg-2) !important;
  color:var(--pd-text) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  height:38px !important;
  padding:0 14px !important;
  font-family:'Urbanist','Inter',sans-serif !important;
  font-weight:700 !important;
  font-size:16px !important;
}
#pd-topbar-right .btn-ghost:hover{ background:var(--pd-surface) !important; }
/* Register button — match the chat-icon's grey so the topbar reads
   as one cohesive control set (same bg, border, radius family as
   the icon-only button next to it). */
html[data-theme="phase2"] .btn.btn-register,
html[data-theme="phase2"] #pd-topbar-right .btn-register,
.btn.btn-register,
#pd-topbar-right .btn-register{
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  color:var(--pd-text) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  height:38px !important;
  padding:0 16px !important;
  font-family:'Urbanist','Inter',sans-serif !important;
  font-weight:700 !important;
  font-size:15px !important;
  letter-spacing:.02em !important;
  cursor:pointer;
  transition:background .2s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-theme="phase2"] .btn.btn-register:hover,
html[data-theme="phase2"] #pd-topbar-right .btn-register:hover,
.btn.btn-register:hover,
#pd-topbar-right .btn-register:hover{
  background:var(--pd-surface) !important;
  transform:translateY(-1px);
}
#pd-topbar-right .btn-icon-only{
  width:38px; height:38px;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text) !important;
}
#pd-topbar-right .profile{
  height:44px;
  padding:0 14px 0 4px;
  gap:10px !important;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
}
/* Bigger profile avatar — was 32px tucked inside a 38px pill, way too
   tiny against the bigger topbar logo. 36px image inside a 44px pill
   reads at the same weight as packdraw/bloxflip's account chip. */
#pd-topbar-right .profile .profile-avatar{
  width:36px; height:36px;
}
#pd-topbar-right .profile .profile-avatar svg,
#pd-topbar-right .profile .profile-avatar-img,
#pd-topbar-right .profile .profile-avatar-emoji{
  width:36px !important; height:36px !important;
}
#pd-topbar-right .profile .profile-name{
  font-size:16px;
  font-weight:800;
}

/* ---------- pd-rightrail ---------- */
#pd-rightrail{
  /* Pinned column — mirrors the sticky left chat. Live Opens / Top
     Opens stay still under the 72px topbar while ONLY the center
     column scrolls. If the feed grows past the viewport the rail
     scrolls internally, with the scrollbar hidden (seamless / clean). */
  align-self:flex-start;
  position:sticky;
  top:72px;
  height:calc(100vh - 72px);
  height:calc(100dvh - 72px);
  max-height:calc(100dvh - 72px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;   /* don't chain rail scroll to the page */
  scrollbar-width:none;          /* Firefox — no visible track */
  -ms-overflow-style:none;       /* legacy Edge/IE */
}
#pd-rightrail::-webkit-scrollbar{ width:0; height:0; display:none; }

/* ---------- pd-home — page padding + section rhythm ---------- */
.pd-home{
  /* 32px horizontal gutter so content doesn't hug the viewport edge
     (or the right rail seam) — fixes the "raw content dumped in a
     window" feel from the previous edge-to-edge pass. */
  padding: 24px 32px 48px;
  /* Match packdraw's xl breakpoint (Tailwind max-w-screen-xl = 1280)
     so the page reads as a designed layout instead of stadium-sized
     stretched content. The dead space on wide monitors is intentional
     — packdraw runs ~25% void on each side at 2560px. */
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
.pd-section{
  margin-top:12px;
}
.pd-section:first-of-type{ margin-top:0; }

/* ---------- challenge hero cards ---------- */
.pd-challenge-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}
/* Two-card variant — used when the Your-Best-Battle filler is gone. */
.pd-challenge-row.pd-challenge-row-2{
  /* Equal columns so the Discord card is wide enough for its 3:1 asset
     to fit at object-fit:cover without center-cropping the text down to
     "DIN OUR SCORD". 5fr/1fr collapsed Discord to ~170px and the wider
     image overflowed each side. */
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px){
  .pd-challenge-row.pd-challenge-row-2{ grid-template-columns: 1fr; }
}
.pd-challenge-card{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  height:138px;
  padding:22px 24px;
  border-radius:var(--pd-radius-lg);
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  color:var(--pd-text);
  font-family:'Urbanist',sans-serif;
  transition:transform .2s var(--pd-ease-spring),
             border-color .18s var(--pd-ease-smooth);
}
.pd-challenge-card:hover{
  transform:translateY(-3px);
  border-color:var(--pd-line-hover);
}
.pd-challenge-text{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:10px;
}
.pd-challenge-eyebrow{
  width:30px; height:30px;
  border-radius:8px;
  background:rgba(250,250,250,.06);
  display:grid; place-items:center;
  color:var(--pd-text);
}
.pd-challenge-title{
  font-weight:800; font-size:18px;
  letter-spacing:.04em;
  line-height:1.15;
}
.pd-challenge-art{
  position:absolute; top:50%; right:-12px;
  transform:translateY(-50%);
  height:140%;
  max-width:55%;
  pointer-events:none;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.pd-challenge-art-img{
  height:100%;
  max-width:50%;
}
.pd-challenge-battle{
  background:radial-gradient(ellipse at 80% 50%, rgba(251,191,36,.15), transparent 55%), var(--pd-bg-2);
}
.pd-challenge-pack{
  background:radial-gradient(ellipse at 80% 50%, rgba(66,153,225,.15), transparent 55%), var(--pd-bg-2);
}
/* Cards-image variant — pack fan art on the LEFT, text on the RIGHT.
   cards.png has the actual pack cards clustered on the LEFT and a big
   empty peach/cream space on the right; we use object-fit:cover with
   object-position:left so the empty space gets cropped off-screen
   and only the cards show. The image is bumped to ~62% width so the
   pack art reads clearly on small cards. */
.pd-challenge-pack-cards{
  /* Brand-blue glow keeps the card visually dominant vs. the muted
     Discord secondary, but the prior 168px stadium height + 28px
     headline blew up empty space. Right-sized to ~120px (a hair
     taller than packdraw's 123px banners) so the gradient/glow has
     a defined panel and the icon+title fill it rather than swim. */
  background:
    radial-gradient(ellipse at 25% 50%, rgba(66,153,225,.32), transparent 60%),
    radial-gradient(ellipse at 85% 50%, rgba(34,211,238,.14), transparent 50%),
    linear-gradient(135deg, #1e3a8a 0%, #1e293b 60%, #0f172a 100%);
  border-color: rgba(96,165,250,.40);
  box-shadow:
    0 8px 22px rgba(0,0,0,.45),
    0 0 40px rgba(66,153,225,.14) inset;
  height: 120px;
}
.pd-challenge-pack-cards:hover{
  border-color: rgba(96,165,250,.75);
  box-shadow:
    0 14px 30px rgba(0,0,0,.55),
    0 0 60px rgba(66,153,225,.22) inset;
}
.pd-challenge-pack-cards .pd-challenge-art-img{
  left: 0;
  right: auto;
  top: 0;
  height: 100%;
  width: 62%;
  max-width: 62%;
  transform: none;
  object-fit: cover;
  object-position: left center;
}
/* Flex column inside the text block right-aligns when the cards
   variant is on, so the eyebrow icon + title sit hard against the
   right edge instead of crowding the artwork on the left. */
.pd-challenge-pack-cards .pd-challenge-text{
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}
.pd-challenge-deal{
  background:radial-gradient(ellipse at 80% 50%, rgba(168,85,247,.15), transparent 55%), var(--pd-bg-2);
}
/* Discord join card — image is wider than the card (image is ~3:1,
   card is ~2:1), so cover-fit was clipping the "JOIN OUR DISCORD"
   text on the sides. Switch to contain + match the image's red so the
   letterboxed edges look intentional (the cards.png-style sides). */
.pd-challenge-discord{
  padding:0;
  display:block;
  text-decoration:none;
  color:var(--pd-text);
  /* Secondary CTA — same 120px height as the Pack hero so the row
     stays aligned. Flat dark-red gradient + reduced saturation keeps
     it from competing with the primary blue hero. */
  background:
    linear-gradient(135deg, #7a0d09 0%, #4a0806 100%);
  border-color: rgba(193,24,15,.30);
  height: 120px;
  filter: saturate(.85);
  transition: filter .18s ease, border-color .18s ease, transform .2s var(--pd-ease-spring);
}
.pd-challenge-discord:hover{
  filter: saturate(1);
  border-color: rgba(193,24,15,.65);
}
.pd-challenge-discord-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* cover (not contain) so the image fills the card. The asset is ~3:1
     and the card is wider than that — `contain` left a thick red band
     on each side of the logo. The Discord text + 3D logo are centered
     in the artwork, so a small top/bottom crop from `cover` clips
     decorative space only and the message stays legible. */
  object-fit:cover;
  object-position:center;
  display:block;
  pointer-events:none;
}
.pd-challenge-discord:hover{
  border-color: rgba(193,24,15,.85);
}

/* ---------- Promo carousel (sits in the old Discord slot) ----------
   A smooth banner panel that cycles between promotional images. Keeps
   the EXACT same 120px footprint + radius as the Pack hero so the row
   stays perfectly aligned — swapping the static card for this causes
   zero layout shift. The art is full-bleed object-fit:cover, so it
   scales cleanly at any viewport width without overflowing or changing
   the row height. Arrows + dots change the slide; nothing navigates. */
.pd-promo{
  padding:0;
  display:block;
  height:120px;
  background:#0e1014;                 /* dark fallback behind the art */
  border-color:var(--pd-line);
  cursor:default;
}
.pd-promo:hover{ border-color:var(--pd-line-hover); }
.pd-promo-track{
  position:absolute; inset:0;
  display:flex;
  width:100%; height:100%;
  transition:transform .5s var(--pd-ease-smooth);
  will-change:transform;
}
.pd-promo-slide{
  position:relative;
  flex:0 0 100%;
  width:100%; height:100%;
}
.pd-promo-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  pointer-events:none;
  user-select:none;
}
/* Edge arrows — fade in on hover; soft dark scrim (no circle frame, so
   the chrome stays restrained rather than reading as an icon button). */
.pd-promo-arrow{
  position:absolute; top:0; bottom:0;
  width:46px;
  display:grid; place-items:center;
  border:none; margin:0; padding:0;
  color:#fff; cursor:pointer;
  opacity:0;
  transition:opacity .2s ease;
  z-index:3;
}
.pd-promo-prev{ left:0;  justify-items:start; padding-left:8px;
  background:linear-gradient(90deg, rgba(0,0,0,.5), transparent); }
.pd-promo-next{ right:0; justify-items:end;   padding-right:8px;
  background:linear-gradient(270deg, rgba(0,0,0,.5), transparent); }
.pd-promo:hover .pd-promo-arrow{ opacity:.9; }
.pd-promo-arrow:hover,
.pd-promo-arrow:focus-visible{ opacity:1; }
/* Position dots — thin bars, no glow. */
.pd-promo-dots{
  position:absolute; left:50%; bottom:10px;
  transform:translateX(-50%);
  display:flex; gap:6px;
  z-index:4;
}
.pd-promo-dot{
  width:20px; height:5px; border-radius:999px;
  border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.4);
  transition:background .25s ease, width .3s var(--pd-ease-spring);
}
.pd-promo-dot:hover{ background:rgba(255,255,255,.65); }
.pd-promo-dot.is-active{ background:#fff; width:28px; }
/* Touch / no-hover devices: keep arrows faintly visible so the change
   affordance is discoverable without a pointer. */
@media (hover:none){
  .pd-promo-arrow{ opacity:.7; }
}
@media (prefers-reduced-motion: reduce){
  .pd-promo-track{ transition:none; }
}

/* ---------- New Packs row ---------- */
.pd-pack-row{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 1280px){
  .pd-pack-row{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .pd-pack-row{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .pd-pack-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ---------- Battle Highlights ---------- */
.pd-battles-list{
  display:flex; flex-direction:column;
  gap:8px;
}
.pd-battle-row{
  position:relative;
  display:grid;
  grid-template-columns:21rem 1fr auto;
  align-items:center;
  gap:18px;
  padding:14px 18px 14px 18px;
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-lg);
  border-left:4px solid var(--pd-blue);
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .2s var(--pd-ease-spring);
}
.pd-battle-row:hover{
  background: color-mix(in srgb, var(--pd-bg-2) 80%, #fff 4%);
  border-color: var(--pd-line-hover);
  transform: translateY(-1px);
}
.pd-battle-row[data-mode="JACKPOT"]{ border-left-color:var(--pd-tier-rare); }
.pd-battle-row[data-mode="NORMAL"] { border-left-color:var(--pd-text-mute); }
.pd-battle-row[data-mode="SHARE"]  { border-left-color:var(--pd-green); }
.pd-battle-meta{
  display:flex; flex-direction:column;
  gap:8px;
  font-family:'Urbanist',sans-serif;
}
.pd-battle-mode{
  font-size:15px; font-weight:800;
  letter-spacing:.06em;
  color:var(--pd-text-mute);
  text-transform:uppercase;
}
.pd-battle-players{
  display:flex; align-items:center; gap:6px;
}
.pd-battle-avatar{
  width:32px; height:32px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--pd-blue-accent), var(--pd-tier-rare));
  display:grid; place-items:center;
  font-size:15px; font-weight:800;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.06);
  flex-shrink:0;
  overflow:hidden;
}
.pd-battle-avatar.pd-battle-avatar-img{
  background:var(--pd-bg-1);
  padding:0;
}
.pd-battle-avatar.pd-battle-avatar-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.pd-battle-avatar.pd-battle-avatar-bot{
  background:linear-gradient(135deg, #6b7280, #374151);
  font-size:14px;
}
/* Bot pfp variant — when the bot avatar contains the shared bot pfp PNG
   (.pd-battle-avatar-bot.pd-battle-avatar-img), drop the grey gradient
   so the image isn't tinted, and let the .pd-battle-avatar-img rules
   above handle the image-fill. */
.pd-battle-avatar.pd-battle-avatar-bot.pd-battle-avatar-img{
  background: var(--pd-bg-1);
  font-size: inherit;
}
/* Watch-view + lobby-row bot pfp — same visual contract as the highlight
   row: image-only bubble, no letter, no tint. The .cs-wp-avatar and
   .cs-br-avatar base rules already set the size + border-radius. */
.cs-wp-avatar.cs-wp-avatar-bot,
.cs-br-avatar.cs-br-avatar-bot{
  padding:0;
  background:transparent;
  overflow:hidden;
}
.cs-wp-avatar.cs-wp-avatar-bot img,
.cs-br-avatar.cs-br-avatar-bot img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-avatar.cs-wp-avatar-bot,
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-avatar.cs-br-avatar-bot{
  padding:0 !important;
  background:transparent !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-avatar.cs-wp-avatar-bot img,
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-avatar.cs-br-avatar-bot img{
  width:100% !important; height:100% !important;
  object-fit:cover;
  display:block;
}
.pd-battle-avatar.pd-battle-avatar-empty{
  background:transparent;
  border:1.5px dashed rgba(255,255,255,.14);
}
.pd-battle-cost{
  font-size:16px;
  color:var(--pd-text-mute);
  font-weight:700;
}
.pd-battle-cost-amt{
  color:var(--pd-text);
  font-weight:800;
  margin-left:4px;
}
/* Pack-card strip: each pack as a 60×88 trading-card thumb, packed in
   a row. Overflow-x scrolls on really long battles (e.g. 30+ qty); the
   pd-battle-pack-count badge sits at the right end as a "+N more" tag
   or just the round total when everything fits. */
.pd-battle-packs{
  position:relative;
  display:flex; align-items:center; gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  padding:2px 0;
}
.pd-battle-packs::-webkit-scrollbar{ display:none; }
.pd-battle-pack-img{
  width:60px; height:88px;
  object-fit:cover;
  border-radius:6px;
  background:var(--pd-bg-1);
  border:1px solid rgba(255,255,255,.04);
  flex-shrink:0;
}
.pd-battle-pack-count{
  flex-shrink:0;
  background:rgba(0,0,0,.40);
  color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  padding:4px 10px;
  font-family:'Urbanist',sans-serif;
  font-size:14px; font-weight:800;
  margin-left:2px;
}
.pd-battle-actions{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:8px;
  min-width:140px;
}
.pd-battle-unboxed{
  font-family:'Urbanist',sans-serif;
  font-size:15px;
  color:var(--pd-text-mute);
  font-weight:600;
}
.pd-battle-unboxed strong{
  color:var(--pd-text);
  font-weight:800;
  font-size:16px;
}
.pd-battle-row .pd-btn-sm{
  height:34px;
  padding:0 16px;
  font-size:15px;
  font-weight:800;
}

/* ---------- Games grid ---------- */
.pd-games-grid{
  display:grid;
  /* 5 per row → the 10 game tiles fit exactly in 2 rows of 5 instead
     of a 6+4 split that left Coinflip orphaned in row 2. */
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 1280px){
  .pd-games-grid{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .pd-games-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width: 700px){
  .pd-games-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 480px){
  .pd-games-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* Game tile — show the full source PNG (game name is baked into the
   artwork, so no typed label is needed). Tile aspect matches the
   1086×1448 source so the full image fits edge-to-edge without
   cropping or letterboxing. */
.pd-game-tile{
  position:relative;
  display:block;
  aspect-ratio: 1086 / 1448;
  border-radius:var(--pd-radius-lg);
  overflow:hidden;
  cursor:pointer;
  background:transparent;
  border:1px solid transparent;
  padding:0;
  text-decoration: none;
  transition:transform .2s var(--pd-ease-spring),
             border-color .18s var(--pd-ease-smooth),
             box-shadow .2s var(--pd-ease-smooth);
}
.pd-game-tile:hover{
  transform:translateY(-4px);
  border-color: var(--pd-blue-accent, #57abf8);
  box-shadow:
    0 12px 28px rgba(0,0,0,.45),
    0 0 28px color-mix(in srgb, var(--pd-blue-accent, #57abf8) 22%, transparent);
}
.pd-game-tile img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: contain;
  object-position: center;
  pointer-events:none;
  display: block;
  transition: transform .25s var(--pd-ease-spring);
}
.pd-game-tile:hover img{
  transform: scale(1.04);
}

/* ---------- How It Works ---------- */
.pd-how-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 900px){
  .pd-how-grid{ grid-template-columns:1fr; }
}
.pd-how-card{
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-lg);
  padding:24px 22px 22px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.pd-how-art-wrap{
  width:140px; height:140px;
  display:grid; place-items:center;
  position:relative;
  margin-bottom:12px;
}
.pd-how-art-wrap::before{
  content:'';
  position:absolute; inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle, var(--pd-blue-glow) 0%, transparent 60%);
  filter:blur(20px);
  z-index:0;
}
.pd-how-art{
  position:relative; z-index:1;
  max-width:100%; max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.pd-how-step{
  font-family:'Urbanist',sans-serif;
  font-weight:800; font-size:16px;
  color:var(--pd-text);
  letter-spacing:.04em;
  margin-bottom:6px;
  text-transform:uppercase;
}
.pd-how-text{
  font-family:'Urbanist',sans-serif;
  font-size:15px;
  color:var(--pd-text-mute);
  line-height:1.45;
  max-width:280px;
}

/* ---------- FAQ ---------- */
.pd-faq-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 760px){
  .pd-faq-grid{ grid-template-columns:1fr; }
}
.pd-faq-item{
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-md);
  font-family:'Urbanist',sans-serif;
  overflow:hidden;
}
.pd-faq-item > summary{
  list-style:none;
  cursor:pointer;
  padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  color:var(--pd-text);
  font-size:16px; font-weight:600;
}
.pd-faq-item > summary::-webkit-details-marker{ display:none; }
.pd-faq-item > summary:hover{ background:rgba(250,250,250,.02); }
.pd-faq-chev{
  color:var(--pd-text-mute);
  font-size:18px; line-height:1;
  transition:transform .2s var(--pd-ease-smooth);
}
.pd-faq-item[open] .pd-faq-chev{ transform:rotate(180deg); }
.pd-faq-item > p{
  margin:0;
  padding:0 18px 14px;
  font-size:15px;
  color:var(--pd-text-mute);
  line-height:1.55;
}
.pd-faq-item > p a{ color:var(--pd-blue-accent); }

/* ---------- Footer ---------- */
.pd-footer{
  margin-top:32px;
  padding:28px 0 12px;
  border-top:1px solid var(--pd-line);
}
.pd-footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
}
@media (max-width: 900px){
  .pd-footer-grid{ grid-template-columns:1fr 1fr; gap:24px; }
}
.pd-footer-col{
  display:flex; flex-direction:column; gap:8px;
}
.pd-footer-logo img{
  height:36px; width:auto;
  margin-bottom:6px;
}
.pd-footer-tagline{
  font-family:'Urbanist',sans-serif;
  font-size:15px;
  color:var(--pd-text-mute);
  line-height:1.5;
  margin:0;
}
.pd-footer-title{
  font-family:'Urbanist',sans-serif;
  font-weight:700; font-size:15px;
  letter-spacing:.06em;
  color:var(--pd-text-mute);
  margin-bottom:4px;
}
.pd-footer-link{
  font-family:'Urbanist',sans-serif;
  font-size:16px;
  color:var(--pd-text);
  text-decoration:none;
  cursor:pointer;
  transition:color .15s var(--pd-ease-smooth);
}
.pd-footer-link:hover{ color:var(--pd-blue-accent); }
.pd-footer-legal{
  display:flex; align-items:center; gap:14px;
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--pd-line);
}
.pd-footer-18{ width:36px; height:36px; flex-shrink:0; }
.pd-footer-legal p{
  font-family:'Urbanist',sans-serif;
  font-size:14px;
  color:var(--pd-text-mute);
  margin:0;
  line-height:1.5;
}
.pd-footer-legal a{ color:var(--pd-blue-accent); }

/* ---------- Mobile shrink for topbar ---------- */
@media (max-width: 1100px){
  /* rail already hidden by primitive rule above */
  html[data-theme="phase2"] body{ padding-top:66px; }
  #pd-topbar{ height:66px; }
}
@media (max-width: 720px){
  .pd-topnav{ gap:0; }
  .pd-topnav-link{ padding:0 8px; }
  .pd-topnav-link span.pd-topnav-link-icon{ margin:0; }
  .pd-challenge-row{ grid-template-columns:1fr; }
  .pd-challenge-card{ height:96px; }
  .pd-battle-row{
    grid-template-columns:1fr;
    gap:12px;
  }
  .pd-battle-actions{ align-items:flex-start; min-width:0; }
}

/* ============================================================
   PHASE 2 — CASES (Packs) ROUTE SKIN
   Skins the existing cases route (catalog, opener, items grid) in
   packdraw style without changing app.js. All selectors are scoped
   to html[data-theme="phase2"] section[data-route="cases"] so the
   existing styles still apply outside phase2 mode (defensive — phase2
   is currently always-on, but keeping the scope tight makes it easier
   to switch back if needed).
   Battles / create-battle / watch views get a lighter pass here;
   Session 4 will do the full battles rebuild.
   ============================================================ */

html[data-theme="phase2"] section[data-route="cases"]{
  /* The base section is positioned inside main; let it use full width. */
  padding:0;
}
html[data-theme="phase2"] section[data-route="cases"] .game-shell{
  max-width:1280px;
  margin:0 auto;
  padding:20px 28px 48px;
  background:transparent;
  border:none;
  box-shadow:none;
}

/* Header: kill the chest SVG, reuse the Packs title + small Fairness pill */
html[data-theme="phase2"] section[data-route="cases"] .game-header{
  display:flex; align-items:center;
  gap:14px;
  padding:0 0 14px;
  margin-bottom:14px;
  border-bottom:1px solid var(--pd-line);
  background:transparent !important;
  position:relative;
}
html[data-theme="phase2"] section[data-route="cases"] .gh-art{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"] .game-title{
  font-family:'Urbanist',sans-serif;
  font-size:22px; font-weight:800;
  color:var(--pd-text);
  margin:0;
  letter-spacing:.01em;
}
html[data-theme="phase2"] section[data-route="cases"] .game-status{
  font-family:'Urbanist',sans-serif;
  font-size:13px; font-weight:700;
  letter-spacing:.08em;
  color:var(--pd-text-mute);
  margin-left:auto;
  background:transparent !important;
  padding:0 !important;
}
/* The phase2 .fair-pill override that lived here used to restyle the
   cases-header Fairness button (with !important + a square radius).
   That button was removed in the 2026-05-19 polish pass, replaced by a
   compact .cs-watch-fair.cs-fair-inline pill in the tabs strip — so the
   override is gone too. The global .fair-pill rule (~line 6800) now
   drives the look on every game's header consistently. */

/* Tab strip: Open Packs / Battles + Create Battle */
/* The watch view is a focused screen (leave it with its own Back button), so
   hide the sub-tab strip there. The base rule (~line 17199) intended this but
   the phase2 display:flex below outranks it — this higher-specificity rule
   restores the hide, so a player can't tab away mid-spin and the watch chrome
   stays clean. (setTab also aborts the animation if they leave another way.) */
html[data-theme="phase2"] section[data-route="cases"][data-cs-tab="watch-battle"] .cs-tabs-strip{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"] .cs-tabs-strip{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  margin:0 0 18px;
  padding:0;
  background:transparent;
  border:none;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-tabs{
  display:inline-flex;
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-sm);
  padding:4px;
  gap:2px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-tab{
  height:32px;
  padding:0 14px;
  background:transparent !important;
  border:none !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:var(--pd-text-mute) !important;
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-tab.active{
  background:var(--pd-surface) !important;
  color:var(--pd-text) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-tab-icon svg{ width:14px; height:14px; }
html[data-theme="phase2"] section[data-route="cases"] .cs-tab-count{
  background:var(--pd-bg-1);
  color:var(--pd-text-mute);
  font-size:13px; font-weight:700;
  padding:1px 6px;
  border-radius:10px;
  margin-left:4px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-create-battle{
  background:var(--pd-blue) !important;
  border:none !important;
  color:#fff !important;
  height:36px !important;
  padding:0 14px !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-create-battle:hover{
  background:var(--pd-blue-hover) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-create-battle .btn-shine{ display:none; }

/* Mobile (≤640px) tab-strip cleanup.
   The base .cs-tabs has `flex-wrap: wrap` (styles.css:17148) which at
   narrow widths broke the OPEN PACKS / BATTLES buttons onto two
   stacked rows, then the Fairness pill's `margin-left:auto` landed
   visually BETWEEN them — exactly the user-reported "OPEN PACKS,
   Fairness, BATTLES stacked + overlapping" mobile bug. Lock the tabs
   to a single row, let the strip itself wrap so Create/Fairness drop
   below the tabs cleanly, and hide the inline Fairness pill on the
   narrowest viewports (the same fairness verifier is one tap away
   inside any open battle / pack-preview, so removing it on phone
   widths costs nothing). */
@media (max-width: 640px){
  html[data-theme="phase2"] section[data-route="cases"] .cs-tabs-strip{
    flex-wrap: wrap;
    row-gap: 10px;
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-tabs{
    flex-wrap: nowrap;
    flex: 0 1 auto;
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-tab{
    padding: 0 10px;
    font-size: 14px !important;
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-fair.cs-fair-inline{
    /* Hidden on phone — same Fairness modal is reachable from any
       opened pack / battle without taking toolbar real estate here. */
    display: none !important;
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-create-battle{
    /* Push to its own row alongside any remaining toolbar items so it
       gets the full width budget instead of squeezing the tabs. */
    margin-left: auto;
    font-size: 14px !important;
    padding: 0 12px !important;
  }
}

/* ---- Catalog grid: packdraw-style pack tiles ---- */
html[data-theme="phase2"] section[data-route="cases"] .cases-row{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:14px;
  margin:0;
}
@media (max-width: 1200px){
  html[data-theme="phase2"] section[data-route="cases"] .cases-row{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width: 900px){
  html[data-theme="phase2"] section[data-route="cases"] .cases-row{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 600px){
  html[data-theme="phase2"] section[data-route="cases"] .cases-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

html[data-theme="phase2"] section[data-route="cases"] .case-card{
  position:relative;
  display:flex; flex-direction:column;
  aspect-ratio:3/4;
  height:auto !important;
  padding:0 !important;
  border-radius:var(--pd-radius-lg);
  overflow:hidden;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  box-shadow:none !important;
  transition:transform .2s var(--pd-ease-spring),
             border-color .18s var(--pd-ease-smooth) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card:hover{
  transform:translateY(-4px) !important;
  border-color:var(--pd-line-hover) !important;
}

/* Has full-bleed card art (the common case) — image fills the tile, name + price overlay bottom */
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-card-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card .cc-card-aura,
html[data-theme="phase2"] section[data-route="cases"] .case-card .cc-card-shine{ display:none; }
html[data-theme="phase2"] section[data-route="cases"] .case-card .cc-card-foot{
  position:absolute; bottom:0; left:0; right:0;
  padding:10px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
  display:flex; flex-direction:column;
  gap:2px;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card .cc-name{
  font-family:'Urbanist',sans-serif;
  font-weight:800; font-size:15px;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card .cc-price-row{
  font-family:'Urbanist',sans-serif;
  font-weight:700; font-size:16px;
  color:var(--pd-text);
  display:inline-flex; align-items:center; gap:4px;
}

/* Non-card variant (preview row of items) — slim down to fit the new tile */
html[data-theme="phase2"] section[data-route="cases"] .case-card:not(.has-card-img) .cc-art{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:var(--pd-bg-1);
}
html[data-theme="phase2"] section[data-route="cases"] .case-card:not(.has-card-img) .cc-preview-row{
  display:flex; gap:4px;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card:not(.has-card-img) .cc-preview-img{
  width:42px; height:42px;
  object-fit:contain;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card:not(.has-card-img) .cc-name,
html[data-theme="phase2"] section[data-route="cases"] .case-card:not(.has-card-img) .cc-price-row{
  position:absolute; left:0; right:0;
  padding:0 10px;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card:not(.has-card-img) .cc-name{ bottom:30px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.6); }
html[data-theme="phase2"] section[data-route="cases"] .case-card:not(.has-card-img) .cc-price-row{ bottom:8px; color:var(--pd-text); }

/* ---- Opener ---- */
html[data-theme="phase2"] section[data-route="cases"] .cs-open-view{
  background:transparent;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-open-head{
  margin-bottom:14px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-back-pill{
  height:32px;
  padding:0 12px 0 8px;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-back-pill:hover{ color:var(--pd-text) !important; }

/* === Watch-view "All Battles" back button ===
   Match the site's existing icon-only back aesthetic (.cs-back-icon-only):
   flat #1c1f29 panel, 12px radius, naked chevron, hover #232734 + slide-
   left. Labeled variant, so we keep padding for the "All Battles" text
   instead of a fixed 40px square. Scoped to #cs-watch-back so the create-
   view back (#cs-cb-back) keeps its current look. */
html[data-theme="phase2"] section[data-route="cases"] #cs-watch-back{
  display:inline-flex; align-items:center; gap:8px;
  flex:0 0 auto;
  white-space:nowrap;
  height:40px;
  padding:0 14px 0 11px !important;
  background:#1c1f29 !important;
  border:0 !important;
  border-radius:12px !important;
  color:rgba(255,255,255,.7) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important; font-weight:700 !important;
  letter-spacing:.2px !important;
  text-transform:none !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:
    background-color .22s cubic-bezier(.22, 1, .36, 1),
    transform .22s cubic-bezier(.22, 1, .36, 1),
    color .22s cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-theme="phase2"] section[data-route="cases"] #cs-watch-back:hover{
  background:#232734 !important;
  transform:translateX(-2px);
  color:#ffffff !important;
}
html[data-theme="phase2"] section[data-route="cases"] #cs-watch-back:active{
  transform:translateX(-2px) scale(.96);
  transition-duration:.12s !important;
}
html[data-theme="phase2"] section[data-route="cases"] #cs-watch-back:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(96,165,250,.55) !important;
}
/* Naked chevron — strip the base bordered arrow box; sits as just an icon. */
html[data-theme="phase2"] section[data-route="cases"] #cs-watch-back .cs-back-arrow{
  width:auto !important; height:auto !important;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  color:inherit !important;
}
html[data-theme="phase2"] section[data-route="cases"] #cs-watch-back:hover .cs-back-arrow{
  background:transparent !important;
  border:0 !important;
  color:inherit !important;
}
html[data-theme="phase2"] section[data-route="cases"] #cs-watch-back .cs-back-arrow svg{
  width:15px !important; height:15px !important;
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] #cs-watch-back{
    transition:none !important;
  }
  html[data-theme="phase2"] section[data-route="cases"] #cs-watch-back:hover{
    transform:none !important;
  }
}

/* Icon-only back button — clean 40px square matching the Live Opens
   / pack-open tile aesthetic. Flat dark-gray panel, centered chevron,
   no nested inner pill. The labeled variant (with "Go Back" text)
   keeps the smaller-pill styling above. */
html[data-theme="phase2"] section[data-route="cases"] .cs-back-pill.cs-back-icon-only{
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  background: #1c1f29 !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,.7) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition:
    background-color .22s cubic-bezier(.22, 1, .36, 1),
    transform .22s cubic-bezier(.22, 1, .36, 1),
    color .22s cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-back-pill.cs-back-icon-only:hover{
  background: #232734 !important;
  transform: translateX(-2px);
  color: #ffffff !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-back-pill.cs-back-icon-only:active{
  transform: translateX(-2px) scale(.96);
  transition-duration: .12s !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-back-pill.cs-back-icon-only:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(96,165,250,.55) !important;
}
/* Strip the inner arrow's nested pill — its bg/border was creating
   the double-rectangle look. SVG sits naked, centered, just an icon
   inside the outer button. */
html[data-theme="phase2"] section[data-route="cases"] .cs-back-pill.cs-back-icon-only .cs-back-arrow{
  width: 100%;
  height: 100%;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-back-pill.cs-back-icon-only:hover .cs-back-arrow{
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-back-pill.cs-back-icon-only .cs-back-arrow svg{
  width: 18px !important;
  height: 18px !important;
}

html[data-theme="phase2"] section[data-route="cases"] .cs-hero{
  display:flex; flex-direction:column; align-items:center;
  margin:8px auto 14px;
  gap:8px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-hero-img{
  width:auto; height:90px;
  max-width:200px;
  object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
html[data-theme="phase2"] section[data-route="cases"] .cs-hero-name{
  font-family:'Urbanist',sans-serif;
  font-weight:800; font-size:22px;
  color:var(--pd-text);
  margin:0;
}

/* The horizontal reel stage — packdraw style. Reel mechanics unchanged
   (existing JS animates translate on .cases-reel). We restyle the frame:
   transparent bg, a subtle blue spotlight line at center via the existing
   .cases-spotlight + .cs-pointer arrows, item glow via tier color. */
html[data-theme="phase2"] section[data-route="cases"] .cases-stage{
  /* Bumped from 160px → 290px so the 196×260 reel tiles render fully
     instead of being clipped at the percentage label. */
  height:290px !important;
  background:var(--pd-bg-1);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-lg);
  overflow:hidden;
  position:relative;
  margin-bottom:16px;
}
html[data-theme="phase2"] section[data-route="cases"] .cases-spotlight{
  background:linear-gradient(to right, transparent, var(--pd-blue-glow), transparent) !important;
  width:120px !important;
  height:100% !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  opacity:.5 !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-pointer{
  color:var(--pd-blue-accent) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cases-reel{
  gap:8px !important;
}
/* Each item card in the reel — small thumbnail with tier glow */
html[data-theme="phase2"] section[data-route="cases"] .cases-reel > *{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:8px !important;
  box-shadow:none !important;
}

/* ---- Controls bar ---- */
html[data-theme="phase2"] section[data-route="cases"] .cs-controls{
  display:flex; align-items:center;
  gap:10px;
  padding:0;
  margin:0 auto 18px;
  background:transparent !important;
  border:none !important;
  flex-wrap:wrap;
  justify-content:center;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-count-pills{
  display:inline-flex;
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-sm);
  padding:4px;
  gap:2px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-count-pill{
  width:36px; height:32px;
  background:transparent !important;
  border:none !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:var(--pd-text-mute) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-count-pill.active{
  background:var(--pd-surface) !important;
  color:var(--pd-text) !important;
}
/* Locked state — applied to every queue control while a demo or
   real open is spinning. Dims the group and blocks pointer events
   so the user can't add / remove / re-count packs mid-spin (which
   rebuilt the multi-stack and detached the running reel, throwing
   inside spinReel and locking the buttons). Smooth fade via the
   parent transition. */
html[data-theme="phase2"] section[data-route="cases"] .cs-count-pills,
html[data-theme="phase2"] section[data-route="cases"] #cs-tray{
  transition: opacity .22s cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-count-pills.is-locked,
html[data-theme="phase2"] section[data-route="cases"] #cs-tray.is-locked{
  opacity: .4 !important;
  pointer-events: none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-count-pill:disabled{
  cursor: not-allowed !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cost-chip{
  display:none; /* The Open button below carries the total — chip duplicates it */
}
html[data-theme="phase2"] section[data-route="cases"] .cs-open-cta{
  background:#3B82F6 !important;
  border:none !important;
  color:#fff !important;
  height:42px !important;
  padding:0 22px !important;
  min-width:200px;
  border-radius:10px !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.02em;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-open-cta:hover{
  background:#2563EB !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-open-cta .btn-shine{ display:none; }
html[data-theme="phase2"] section[data-route="cases"] .cs-fast-toggle,
html[data-theme="phase2"] section[data-route="cases"] .cs-demo-btn{
  height:40px;
  padding:0 14px;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-fast-toggle{
  width:40px; padding:0; display:grid; place-items:center;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-fast-toggle[aria-pressed="true"]{
  color:var(--pd-yellow) !important;
  border-color:var(--pd-yellow) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-demo-btn:hover,
html[data-theme="phase2"] section[data-route="cases"] .cs-fast-toggle:hover{
  color:var(--pd-text) !important;
}

/* ---- Drop table (item pool) ---- */
html[data-theme="phase2"] section[data-route="cases"] .case-items-section{
  background:transparent;
  border:none;
  padding:0;
  margin-top:12px;
}
html[data-theme="phase2"] section[data-route="cases"] .case-items-title{
  font-family:'Urbanist',sans-serif;
  font-weight:700; font-size:16px;
  color:var(--pd-text-mute);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:10px;
}
html[data-theme="phase2"] section[data-route="cases"] .case-items-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:8px;
}
/* "Pack contains" item card — reworked to the site's matte-navy premium look
   (was --pd-bg-2 GREY, which washed out over the page background and read as a
   foreign shade). Opaque navy + soft top highlight + depth shadow, hairline
   border, a clean rarity cue (subtle artwork spotlight + bottom bar), a
   scannable corner drop-chance pill, and a recessed value chip. */
html[data-theme="phase2"] section[data-route="cases"] .cig-item{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 46%),
    var(--surface, #10172A) !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  padding:13px 11px 14px !important;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 6px 18px rgba(0,0,0,.34) !important;
  overflow:hidden;
  transition:transform .2s var(--ease-smooth,ease), border-color .2s var(--ease-smooth,ease), box-shadow .2s var(--ease-smooth,ease) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cig-item:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--it-color, var(--pink,#3B82F6)) 50%, var(--line)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 26px rgba(0,0,0,.42) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cig-icon-wrap{
  position:relative;
  width:86px; height:86px;
  display:grid; place-items:center;
  margin-bottom:9px;
}
/* Subtle rarity spotlight BEHIND the artwork (toned right down — a premium
   glow on the item itself, not an AI-slop halo on the card). */
html[data-theme="phase2"] section[data-route="cases"] .cig-icon-wrap::before{
  content:'';
  position:absolute; inset:2px;
  border-radius:50%;
  background:radial-gradient(circle, var(--it-color, transparent) 0%, transparent 64%);
  opacity:.14;
  filter:blur(13px);
  z-index:0;
}
html[data-theme="phase2"] section[data-route="cases"] .cig-img{
  position:relative; z-index:1;
  max-width:100%; max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.5));
}
html[data-theme="phase2"] section[data-route="cases"] .cig-name{
  font-family:'Manrope','Urbanist',sans-serif;
  font-weight:600; font-size:13.5px;
  color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
  margin-bottom:8px;
}
/* Value chip — coin glyph + payout in a clean recessed pill. */
html[data-theme="phase2"] section[data-route="cases"] .cig-payout{
  display:inline-flex; align-items:center; gap:5px;
  font-family:'Manrope','Urbanist',sans-serif;
  font-weight:800; font-size:13.5px;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  background:var(--bg-0, #070A14);
  border:1px solid var(--line);
  padding:4px 11px;
  border-radius:8px;
}
html[data-theme="phase2"] section[data-route="cases"] .cig-payout .bc-glyph{ width:14px; height:14px; }
/* Drop-chance — clean top-left corner pill (scannable EV, packdraw-style). */
html[data-theme="phase2"] section[data-route="cases"] .cig-item .cig-pct,
html[data-theme="phase2"] section[data-route="cases"] .cig-item .cig-drop-pct{
  position:absolute; top:8px; left:8px;
  background:rgba(7,10,22,.62);
  border:1px solid rgba(255,255,255,.07);
  color:var(--text-dim) !important;
  font-family:'Manrope','Urbanist',sans-serif !important;
  font-weight:700 !important; font-size:11px !important;
  padding:2px 7px;
  border-radius:6px;
  letter-spacing:.02em;
  opacity:1 !important;
  z-index:3;
}

/* Empty state */
html[data-theme="phase2"] section[data-route="cases"] .cs-catalog-empty{
  grid-column:1/-1;
  text-align:center;
  padding:60px 20px;
  color:var(--pd-text-mute);
  font-family:'Urbanist',sans-serif;
  font-size:16px;
}

/* ---- Home Battle Highlights empty state (Session 4 Part 1) ---- */
.pd-battles-empty{
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-lg);
  padding:32px 20px;
  text-align:center;
  font-family:'Urbanist',sans-serif;
}
.pd-battles-empty-title{
  color:var(--pd-text);
  font-weight:700;
  font-size:15px;
  margin-bottom:4px;
}
.pd-battles-empty-sub{
  color:var(--pd-text-mute);
  font-size:15px;
}

/* ============================================================
   PHASE 2 — CASES BATTLES LIST SKIN (Session 4 Part 2)
   The existing .cs-battle-row markup is preserved; we restyle the
   blocks (rounds / pot / cases / players / actions) into packdraw
   format: mode badge + avatars + cost on left, thumbs + count badge
   in middle, unboxed + action on right, color-coded left border.
   ============================================================ */

html[data-theme="phase2"] section[data-route="cases"] .cs-battles-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding:0;
  background:transparent !important;
  border:none !important;
}
/* Legacy filter pills — hidden but kept in DOM so nothing else
   that targets them errors out. The sort dropdown below replaced
   them in the packdraw-style toolbar refresh. */
html[data-theme="phase2"] section[data-route="cases"] .cs-battles-filters{ display:none; }

/* Sort dropdown (packdraw "Price: High to Low" pattern) */
html[data-theme="phase2"] section[data-route="cases"] .cs-battles-sort{
  position: relative;
  display: inline-flex;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-bsort-btn{
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  background: var(--pd-bg-2);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius-sm);
  font-family: 'Urbanist', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--pd-text);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-bsort-btn:hover{
  border-color: var(--pd-line-hover);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-bsort-caret{
  opacity: .65;
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-battles-sort.open .cs-bsort-caret{
  transform: rotate(180deg);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-bsort-menu{
  position: absolute;
  top: calc(100% + 6px); left: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--pd-bg-1);
  border: 1px solid var(--pd-line-hover);
  border-radius: var(--pd-radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(.97);
  transform-origin: top left;
  transition: opacity .18s cubic-bezier(.32,.72,0,1), transform .18s cubic-bezier(.32,.72,0,1);
  z-index: 50;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-battles-sort.open .cs-bsort-menu{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-bsort-item{
  display: flex; align-items: center;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-family: 'Urbanist', sans-serif;
  font-size: 15px; font-weight: 600;
  color: var(--pd-text-mute);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-bsort-item:hover{
  background: var(--pd-bg-2);
  color: var(--pd-text);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-bsort-item.active{
  color: var(--pd-text);
  background: color-mix(in srgb, var(--pd-blue-accent, #57abf8) 14%, var(--pd-bg-2));
}
html[data-theme="phase2"] section[data-route="cases"] .cs-battles-meta{
  font-family:'Urbanist',sans-serif;
  font-size:14px; font-weight:600;
  color:var(--pd-text-mute);
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Battles list container */
html[data-theme="phase2"] section[data-route="cases"] .cs-battles-list{
  display:flex; flex-direction:column;
  gap:8px;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
}

/* Each battle row — packdraw layout. Three logical columns:
     LEFT     — mode label + avatars + cost   (.cs-br-left)
     CENTER   — pack thumbnail strip + total  (.cs-br-cases)
     RIGHT    — status + Join/View button     (.cs-br-actions)
   plus a 6px mode-tinted absolute accent bar pinned to the left edge. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row{
  position: relative;
  display:grid !important;
  grid-template-columns:minmax(160px, 210px) minmax(0, 1fr) minmax(160px, 190px) !important;
  align-items:center;
  gap:16px;
  padding:18px !important;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-left:none !important;
  border-radius:var(--pd-radius-lg) !important;
  box-shadow:none !important;
  margin:0 !important;
  cursor: pointer;
  transition: background-color .18s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row:hover{
  background: var(--pd-bg-1) !important;
}
/* (The old 6px mode-tinted left stripe was removed — a colored side-stripe
   reads as AI-slop chrome. The mode tier now lives in the .cs-br-tag chips
   on the left and the live sweep in the case well.) */

/* LEFT column — mode tags on top, avatar row, cost at the bottom.
   Left-aligned (ledger style) instead of the old centered stack. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-left{
  display: flex !important; flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 11px;
  grid-column: 1;
  min-width: 0;
}

/* Mode tags — squared hairline chips (NOT pills, NOT emoji-led pills). A
   muted base-format tag (1V1 / 2V2 / 1V1V1) plus one tier-colored tag per
   modifier. Full 1px border + faint tint; no side-stripe, no glow. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-tags{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-tag{
  display: inline-flex; align-items: center;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--pd-line-hover);
  background: rgba(255,255,255,.03);
  font-family: 'Urbanist', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9aa3ab;
  white-space: nowrap;
  line-height: 1;
}
/* base / normal stay neutral; team takes the site blue */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-tag[data-tier="team"]{
  color: #8cc6ff; border-color: rgba(87,171,248,.36); background: rgba(87,171,248,.11);
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-tag[data-tier="jackpot"]{
  color: #53e296; border-color: rgba(83,226,150,.38); background: rgba(83,226,150,.10);
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-tag[data-tier="crazy"]{
  color: #c2a3ff; border-color: rgba(183,140,255,.40); background: rgba(183,140,255,.13);
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-tag[data-tier="shared"]{
  color: #ffb13a; border-color: rgba(255,177,58,.38); background: rgba(255,177,58,.10);
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-tag[data-tier="terminal"]{
  color: #ec5a6e; border-color: rgba(236,90,110,.38); background: rgba(236,90,110,.10);
}
/* Quick Opening — a minor modifier, kept calm (soft slate, not a loud accent). */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-tag[data-tier="quick"]{
  color: #9fb4c9; border-color: rgba(159,180,201,.30); background: rgba(159,180,201,.07);
}
/* Borrow — money-relevant, so a warm gold tag distinct from the win-condition
   modes. The "X% off" reads as the upfront discount. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-tag[data-tier="borrow"]{
  color: #e8b24a; border-color: rgba(232,178,74,.38); background: rgba(232,178,74,.10);
}

/* Watch header active-mode chip row — breaks to its own line under the
   back/status line and wraps; chips themselves use the shared .cs-br-tag
   styling above. Hidden when the battle has no modifiers. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-modes{
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  margin-top: 1px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-modes:empty{ display: none; }

/* "(N% payout)" beside a borrowing player's name in their battle column —
   small, gold (matches the Borrow tag), never wraps off the name. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-payout{
  font-size: 11px;
  font-weight: 700;
  color: #e8b24a;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Watch-view title block — switch to flex so the new mode badge can
   sit cleanly between the title and status without inheriting the
   block's default text alignment. The title element keeps its big
   typography; badge + status pill render as chips beside it. */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-title-block{
  display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}

/* Watch-view mode badge — small pill that sits between the title and
   status. Tier color matches the lobby row's accent so a player can
   visually link "the green jackpot battle I joined" to the watch
   screen they're now looking at. */
html[data-theme="phase2"] .cs-watch-mode-badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: 'Urbanist', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--pd-text-mute, #7a8084);
  background: rgba(255,255,255,.03);
  white-space: nowrap;
}
html[data-theme="phase2"] .cs-watch-mode-badge[data-mode-tier="team"]    { color: var(--pd-blue-accent, #57abf8); }
html[data-theme="phase2"] .cs-watch-mode-badge[data-mode-tier="jackpot"] { color: #53e296; background: rgba(83,226,150,.08); }
html[data-theme="phase2"] .cs-watch-mode-badge[data-mode-tier="shared"]  { color: #ffb13a; background: rgba(255,177,58,.08); }
html[data-theme="phase2"] .cs-watch-mode-badge[data-mode-tier="terminal"]{ color: #ec5a6e; background: rgba(236,90,110,.08); }
html[data-theme="phase2"] .cs-watch-mode-badge[data-mode-tier="crazy"]   { color: #b78cff; background: rgba(183,140,255,.08); }

/* Odds % stamped on each Jackpot spinner card so the viewer sees the
   weight distribution before the draw lands. Tie cards skip this
   element entirely (every tied player has equal odds). */
html[data-theme="phase2"] .cs-tb-card-odds{
  font-family: 'Urbanist', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #53e296;
  margin-top: 2px;
}

/* Jackpot draw — green arrow + green winner caption instead of the
   default cyan tie color. Same component, different tint to match
   the mode tier. */
html[data-theme="phase2"] .cs-watch-tiebreaker[data-tb-kind="jackpot"] .cs-tb-eyebrow,
html[data-theme="phase2"] .cs-watch-tiebreaker[data-tb-kind="jackpot"] .cs-tb-caption.cs-tb-caption-won{
  color: #53e296;
}
html[data-theme="phase2"] .cs-watch-tiebreaker[data-tb-kind="jackpot"] .cs-tb-arrow{
  background: linear-gradient(180deg, #53e296 0%, #2fb56a 50%, rgba(83,226,150,0) 100%);
  box-shadow: 0 0 12px rgba(83,226,150,.55);
}
html[data-theme="phase2"] .cs-watch-tiebreaker[data-tb-kind="jackpot"] .cs-tb-arrow::before{
  background: #53e296;
  box-shadow: 0 0 14px rgba(83,226,150,.65);
}

/* Full-battle (in-progress/resolved) — keep mode color but dim slightly */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row.cs-br-full{
  opacity: .92;
}

/* Left column: rounds badge + pot below (compact) — restyled
   to look like "X MODE / cost: $Y" with avatars. We use existing
   .cs-br-rounds for the mode-ish header, .cs-br-pot for cost. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-rounds{
  display:none !important; /* Replaced by the .cs-br-cases-total badge */
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-pot{
  font-family:'Urbanist',sans-serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  color:var(--pd-text) !important;
  background:transparent !important;
  padding:0 !important;
  border:none !important;
  display:inline-flex; align-items:center; gap:4px;
  margin: 0 !important;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-pot::before{
  content:'cost: ';
  color:var(--pd-text-mute);
  font-weight:600;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-right:4px;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-pot .bc-glyph{
  width: 14px; height: 14px;
}

/* Players: avatar row — sits between mode label and cost */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-players{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-avatar{
  width:42px; height:42px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg, var(--pd-blue-accent), var(--pd-tier-rare)) !important;
  display:grid; place-items:center;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px; font-weight:700;
  color:#fff !important;
  border:2px solid var(--pd-line-hover) !important;
  overflow:hidden;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-avatar img{
  width:100%; height:100%;
  object-fit:cover;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-avatar.cs-br-empty{
  background:var(--pd-bg-1) !important;
  border:1px dashed var(--pd-line-hover) !important;
}
/* Separator between seats/teams. packdraw uses a crossed-swords glyph in
   PvP and a sparkle in Share mode; both render as inline SVG icons here. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-vs{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px;
  flex:0 0 auto;
  margin:0 1px;
  color:var(--pd-text-mute) !important;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-vs svg{
  width:15px; height:15px; display:block;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-vs-spark{
  color:#ffb13a !important;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-vs-spark svg{
  width:12px; height:12px;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-team{
  display:flex; gap:5px;
}

/* Center column — the case "well" (casing). A wide inset rounded panel that
   fills the column and holds the full strip of pack cards, one per round,
   with a round-count chip pinned to its top-right corner. The well IS the
   frame; the cards stay border-free, and the live/active card lifts out of
   the well rather than getting a glow halo. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-cases{
  display:block !important;
  grid-column:2;
  position:relative;
  min-width:0;
  overflow:visible;            /* let the lifting card breathe past the well */
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-cases-well{
  position:relative;
  width:100%;                  /* the casing fills the column — the "stage" the cards sit in */
  min-width:0;
  padding:13px 14px 14px;
  background:var(--pd-bg-1);
  border:1px solid var(--pd-line);
  border-radius:14px;
  overflow:hidden;             /* clip the strip horizontally */
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-cases-track{
  display:flex; align-items:flex-end; justify-content:flex-start;
  gap:10px;
  min-width:0;
}
/* Each card sits in its own cell of the casing. The art is the raw image —
   NO border / outline / frame of any kind (house rule: never box a picture).
   The cell's dark fill only shows while the art loads, then it's covered.
   Cards GROW to fill the well (no trailing dead space) and only shrink once a
   long run can't fit, so a 2-card battle gets big cards instead of a half-
   empty strip. max-width keeps a 1–2 round battle from going comically wide. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-cases-track > .cs-br-case{
  position:relative;
  flex:0 1 auto;            /* explicit width below is the hug size AND the flex basis */
  width:94px;               /* portrait cell matched to the ~0.7 card-art aspect (big, no crop) */
  min-width:44px;           /* a long run shrinks the cards down to here so all rounds stay visible */
  height:132px;             /* tall portrait — reads "big/live", shows the full card art */
  border-radius:10px;
  overflow:hidden;
  background:var(--pd-bg-2);
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
  transition:transform .22s var(--pd-ease-smooth);
  will-change:transform;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-cases-track > .cs-br-case img{
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;   /* beat the base .cs-br-case img 80% clamp */
  object-fit:cover; border-radius:10px;
  display:block;
}
/* "+N more rounds" overflow cell — same footprint, just the remainder count */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-cases-track > .cs-br-case-more{
  display:grid; place-items:center;
  background:var(--pd-bg-2);
  color:var(--pd-text-mute);
  font-family:'Urbanist',sans-serif;
  font-size:15px; font-weight:800; letter-spacing:.01em;
}
/* Round-count chip — pinned over the well's top-right padding (stacked-paper
   glyph + total round count). Floats in the corner; never frames a card. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-cases-total{
  position:absolute; top:7px; right:7px;
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 7px;
  background:rgba(11,14,16,.72);
  border:1px solid var(--pd-line);
  border-radius:7px;
  font-family:'Urbanist',sans-serif;
  font-size:11.5px; font-weight:800;
  color:var(--pd-text);
  pointer-events:none;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-cases-total::before{
  content:""; display:inline-block;
  width:11px; height:12px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 3h7l4 4v11H9z' fill='none' stroke='black' stroke-width='2'/><path d='M5 7v13h11' fill='none' stroke='black' stroke-width='2'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 3h7l4 4v11H9z' fill='none' stroke='black' stroke-width='2'/><path d='M5 7v13h11' fill='none' stroke='black' stroke-width='2'/></svg>") no-repeat center / contain;
  opacity:.85;
}

/* Right column: status label + action button stacked */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-actions{
  display:flex !important;
  flex-direction:column;
  align-items:flex-end;
  justify-content: center;
  gap:8px;
  grid-column:3;
  min-width:158px;
}
/* Status subhead (packdraw's "unboxed: $X" / "waiting for block") */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-status{
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--pd-text-mute);
  display: inline-flex; align-items: center; gap: 4px;
  letter-spacing: .02em;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-status-done{
  color: var(--pd-text);
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-status .bc-glyph{
  width: 13px; height: 13px;
}
/* Hide the legacy eye spectate button — packdraw's row doesn't use a
   separate icon; the "View Battle" button covers spectating. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-eye{ display: none !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-join{
  background:var(--pd-green) !important;
  border:none !important;
  color:#fff !important;
  min-height:38px !important;
  padding:6px 14px !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  line-height:1.2;
  box-shadow:none !important;
  min-width:140px;
  max-width:100%;
  cursor:pointer;
  display:inline-flex !important;
  align-items:center; justify-content:center;
  flex-wrap:wrap;
  gap:0 5px;
  text-align:center;
  white-space:normal;
}
/* Keep the buy-in amount + coin glyph together so they never split across
   a wrap (the label "Join Battle for" can drop to its own line on narrow
   columns, but "3,490,470 [coin]" always stays as one unit). */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-join-amt{
  display:inline-flex; align-items:center; gap:4px;
  white-space:nowrap;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-join .bc-glyph{
  width:15px; height:15px; flex:0 0 auto;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-join:hover{
  background:var(--pd-green-hover) !important;
}
/* "View Battle" / "WAITING" / "CANCEL" are the alt action states */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-join.cs-br-view,
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row.cs-br-full .cs-br-join{
  background:var(--pd-surface) !important;
  color:var(--pd-text) !important;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-join.cs-br-view:hover,
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row.cs-br-full .cs-br-join:hover{
  background:var(--pd-surface-2) !important;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-eye{
  width:36px; height:36px;
  background:var(--pd-surface) !important;
  border:none !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text-mute) !important;
  display:grid; place-items:center;
  cursor:pointer;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-eye:hover{
  color:var(--pd-text) !important;
  background:var(--pd-surface-2) !important;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-eye svg{
  width:16px; height:16px;
}

/* Empty state inside cases-battles-list */
html[data-theme="phase2"] section[data-route="cases"] .cs-battles-empty{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:48px 20px !important;
  text-align:center;
  font-family:'Urbanist',sans-serif;
  display:flex; flex-direction:column; align-items:center;
  gap:8px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-be-icon{
  width:48px; height:48px;
  background:var(--pd-bg-1);
  border-radius:var(--pd-radius-lg);
  display:grid; place-items:center;
  color:var(--pd-text-mute);
  margin-bottom:6px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-be-icon svg{ width:22px; height:22px; }
html[data-theme="phase2"] section[data-route="cases"] .cs-be-title{
  color:var(--pd-text);
  font-weight:700;
  font-size:16px;
  margin:0;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-be-sub{
  font-size:15px;
  color:var(--pd-text-mute);
  margin:0;
}

/* Responsive: stack at <760px */
@media (max-width: 760px){
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-cases,
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-actions{
    grid-row:auto !important;
    grid-column:auto !important;
  }
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-actions{
    align-items:flex-start;
    min-width:0;
  }
  /* Shorter, narrower cells on phones so the stacked strip stays proportionate
     and a few more rounds fit before the casing clips (count chip still shows
     the true total). */
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-cases-well{
    padding:10px 10px 11px;
  }
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-cases-track > .cs-br-case{
    height:90px; flex-basis:58px; min-width:32px; max-width:80px;
  }
}

/* ============================================================
   PHASE 2 — CASES CREATE-BATTLE + WATCH VIEW (Session 4 Part 3+4)
   Light skin pass — repaint surfaces, buttons, toggles, mode pills
   in packdraw colors. Doesn't change layout/structure (existing JS
   manipulates these classes). Full polish can come in a later session
   once battles get real traffic.
   ============================================================ */

/* Create-battle head: back pill + title + live pot */
html[data-theme="phase2"] section[data-route="cases"] .cs-create-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  padding:0;
  background:transparent !important;
  border:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-title{
  font-family:'Urbanist',sans-serif !important;
  font-size:20px; font-weight:800;
  color:var(--pd-text);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-pot,
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-pot,
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-status{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:6px 12px !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:16px; font-weight:700;
  color:var(--pd-text) !important;
  display:inline-flex; align-items:center; gap:4px;
}

/* === Watch-view 3-cell top bar (packdraw-style) ===
   left = back + mode tag + status · center = pack strip + round line ·
   right = Fairness + Share + buy-in. Scoped to .cs-watch-head-bar so the
   create view's .cs-create-head keeps its plain flex layout. */
html[data-theme="phase2"] section[data-route="cases"] .cs-create-head.cs-watch-head-bar{
  display:grid;
  /* Sides prefer their content width but can shrink to min-content under
     pressure (badge/status + Fairness/Share wrap below their anchors), so
     they never starve the center to 0. The center pack strip takes the
     leftover and clips via its windowed slider + "+N" chip. The back pill
     itself is nowrap, so it's the left cell's min-content anchor. */
  grid-template-columns: minmax(min-content,auto) minmax(180px,1fr) minmax(min-content,auto);
  align-items:center;
  gap:16px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-bar-left{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px;
  min-width:0;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-bar-right{
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap;
  gap:10px;
  min-width:0;
}
/* Status is a small muted inline line in the bar (not a pill). */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-head-bar .cs-watch-status{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  color:var(--pd-text-mute) !important;
}
/* Center cell: pack strip + round line, centered, free to shrink/scroll
   without shoving the side cells. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-head-bar .cs-watch-header{
  min-width:0;
  /* Cap the strip so it doesn't sprawl on wide screens; center it within
     the flexible center track. On narrow screens the track shrinks below
     this and the strip clips (windowed slider + "+N" chip). */
  max-width: min(100%, 560px);
  margin-inline:auto;
}
/* In the bar the fair/share pills space via the flex gap, not their own
   margins. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-bar-right .cs-watch-fair{
  margin-left:0;
  margin-right:0;
}
/* Share pill reuses .cs-watch-fair chrome but not its green shield tint —
   its share-nodes glyph reads neutral, blue on hover. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-share-top svg{
  color: var(--pd-text-mute);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-share-top:hover svg{
  color: var(--pd-blue-accent, #57abf8);
}
/* Cancel Battle pill — reuses the .cs-watch-fair outline chrome so it
   sits flush with Fairness/Share, but reads as the one destructive
   action: a faint red tint that deepens on hover. Creator-only +
   waiting-only (JS toggles [hidden]). The doubled .cs-watch-fair
   .cs-watch-cancel-top selector outranks the plain .cs-watch-fair
   colour rule defined later in the file. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-fair.cs-watch-cancel-top{
  border-color: rgba(239,68,68,.30);
  color: rgba(248,113,113,.92);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-fair.cs-watch-cancel-top svg{
  color: rgba(248,113,113,.92);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-fair.cs-watch-cancel-top:hover{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.55);
  color: #fecaca;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-fair.cs-watch-cancel-top:hover svg{
  color: #fecaca;
}

/* === Mobile: bands scroll horizontally in lockstep === */
@media (max-width:640px){
  /* Stack the 3-cell bar. */
  html[data-theme="phase2"] section[data-route="cases"] .cs-create-head.cs-watch-head-bar{
    grid-template-columns: 1fr;
    gap:10px;
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-bar-right{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  /* The stage scrolls; each band keeps a 140px min column so reels stay
     full-size. All three bands share the template + scroll together, so
     the reel / card / grid columns stay aligned and the VS overlay (which
     spans the band, not the scroll viewport) tracks its seams. */
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-stage{
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-stage::-webkit-scrollbar{ display:none; }
  /* NOTE: the mobile band-column (minmax(140px)) + arrow-hide overrides
     live in the reel-sizing media block further down (~line 30630), AFTER
     the desktop minmax(0,1fr) / arrow display:grid base rules — media
     queries add no specificity, so an override placed BEFORE the base rule
     loses on source order. Don't move them back up here. */
}

/* Selected-cases strip */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip-wrap{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:14px !important;
  margin-bottom:16px !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip{
  display:flex; align-items:center;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip::-webkit-scrollbar{ display:none; }
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-tile{
  flex-shrink:0;
  /* Sized to match real pack tiles (.cs-cb-tile is 200×200) so the
     empty-state placeholder reads at the same scale as a selected
     pack card — was 90×120, which felt undersized for the panel. */
  width:200px; height:240px;
  background:var(--pd-bg-1) !important;
  border:1px dashed var(--pd-line-hover) !important;
  border-radius:var(--pd-radius-md) !important;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px; font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  transition:border-color .15s var(--pd-ease-smooth), color .15s var(--pd-ease-smooth), transform .18s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-tile:hover{
  border-color:var(--pd-blue) !important;
  color:var(--pd-text) !important;
  transform: translateY(-2px);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-plus{
  /* Plus icon scaled with the bigger tile so the affordance stays
     readable at the new size. */
  width:48px; height:48px;
  display:grid; place-items:center;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-plus svg{
  width:30px; height:30px;
  color:currentColor;
}

/* Toggles — rebuilt 2026-05-19. The base .cs-cb-switch-thumb had a
   transform:translate(2px,-50%) baked in. The previous phase2 thumb
   override didn't reset transform, so the base translate added on top
   of phase2's `left:N` and pushed the white circle right off the
   switch and on top of the "Quick Opening" label text. Now we use a
   single transform-driven slide (no `left` override), reset top to a
   clean fixed position, and bump the track to 44×24 to match the rest
   of the site's switch sizing. */
/* Modifiers panel: same matte-navy panel + micro-caps label treatment as
   the Packs strip + Mode row, so the three option groups read as a set.
   The 6 toggles ride a responsive grid (3-up on desktop, collapsing to
   2/1) instead of a single flex row — the old flex:1 row couldn't fit 6
   cards in the column and pushed Borrow Coins off-screen entirely. */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggles{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:10px;
  padding:22px 14px 14px !important;
  margin-bottom:14px;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggles::before{
  content:'Modifiers';
  position:absolute;
  top:8px; left:18px;
  font-family:'Urbanist',sans-serif;
  font-size:13px; font-weight:800;
  letter-spacing:.10em;
  color:var(--pd-text-mute);
  text-transform:uppercase;
  pointer-events:none;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle{
  display:flex; align-items:center; gap:14px;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-md, 12px) !important;
  padding:14px 16px !important;
  cursor:pointer;
  font-family:'Urbanist',sans-serif !important;
  transition: border-color .18s ease, background .18s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle:hover{
  border-color: var(--pd-line-hover) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-switch{
  position:relative;
  box-sizing:border-box !important;
  width:44px !important; height:24px !important;
  background: var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:999px !important;
  transition: background .18s ease, border-color .18s ease;
  flex-shrink:0;
  box-shadow: none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-switch-thumb{
  position:absolute !important;
  top:50% !important;
  left:0 !important;
  box-sizing:border-box !important;
  width:18px !important; height:18px !important;
  background: var(--pd-text-mute, #94a3b8) !important;
  border-radius:50% !important;
  /* SINGLE source of truth for thumb position — slide on X, center on Y.
     Resets any transform from the base rule so the two don't compose. */
  transform: translate(3px, -50%) !important;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), background .18s ease !important;
  box-shadow: none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle input:checked ~ .cs-cb-switch,
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle input:checked + .cs-cb-switch{
  background: var(--pd-blue, #4299e1) !important;
  border-color: var(--pd-blue, #4299e1) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle input:checked ~ .cs-cb-switch .cs-cb-switch-thumb,
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle input:checked + .cs-cb-switch .cs-cb-switch-thumb{
  transform: translate(23px, -50%) !important;
  background: #fff !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle-text{
  flex: 1;
  min-width: 0;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle-name{
  font-family:'Urbanist',sans-serif !important;
  font-weight:800 !important;
  font-size:13.5px !important;
  color:var(--pd-text) !important;
  letter-spacing: .01em;
  margin: 0 !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle-sub{
  font-family:'Urbanist',sans-serif !important;
  font-size:11.5px !important;
  font-weight:500 !important;
  color:var(--pd-text-mute) !important;
  margin-top: 3px !important;
  letter-spacing: 0;
}

/* Mode pills + Create button row. Pills kept at their original
   compact size — the bigger version made the page top-heavy. Per-pill
   glyphs are person silhouettes (head + body) via mask-image so the
   currentColor cascade lights them up white on the active pill and
   leaves them muted-grey on idle pills. */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-modes-row{
  display:flex; align-items:center;
  gap:8px;
  padding:14px;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode{
  height:38px;
  padding:0 14px;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px; font-weight:700;
  display:inline-flex; align-items:center;
  cursor:pointer;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode.active{
  background:var(--pd-blue) !important;
  border-color:var(--pd-blue) !important;
  color:#fff !important;
}
/* Squared mode tag label — mono uppercase, matching the battle-highlights
   tag treatment (replaces the old person-silhouette dot glyphs). */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode-label{
  font-family:'Urbanist',sans-serif !important;
  font-size:12.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  line-height:1;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-dots{
  display:inline-flex; align-items:center; gap:4px;
}
/* Person silhouette — head circle stacked on a rounded body. Rendered
   via mask-image so currentColor styles it (matches the pill text
   color, so the active state's white glyphs and the idle state's
   muted-grey glyphs both work without a second color override). */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-dot{
  width: 9px;
  height: 12px;
  border-radius: 0;
  background: currentColor;
  opacity: .80;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Ccircle cx='7' cy='4' r='3'/%3E%3Cpath d='M2 17a5 5 0 0 1 10 0v1H2z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Ccircle cx='7' cy='4' r='3'/%3E%3Cpath d='M2 17a5 5 0 0 1 10 0v1H2z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode.active .cs-cb-dot{
  opacity: 1;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-vs{
  font-size: 12px;
  font-weight: 700;
  opacity: .5;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-create{
  margin-left:auto;
  background:var(--pd-green) !important;
  border:none !important;
  color:#fff !important;
  height:38px !important;
  padding:0 18px !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:16px; font-weight:800;
  letter-spacing:.02em;
  box-shadow:none !important;
  display:inline-flex; align-items:center; gap:6px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-create:hover{
  background:var(--pd-green-hover) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-create:disabled{
  background:var(--pd-surface) !important;
  color:var(--pd-text-mute) !important;
  cursor:not-allowed;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-create .btn-shine{ display:none; }
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-create-cost{
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   CREATE PACK BATTLE — packdraw-clone layout (2026-05-31).
   Centered, sectioned vertical flow (Mode · Modifiers · Selected Packs ·
   Battle Summary · full-width Create) matching packdraw's create-battle
   page, using OUR controls/semantics. These rules come AFTER the originals
   above so they win on source order; !important where the originals use it.
   ============================================================ */
html[data-theme="phase2"] section[data-route="cases"] .cs-create-view{
  max-width:760px; margin:0 auto;
}
/* Header: back pill far-left, title centered (3-col grid avoids overlap) */
html[data-theme="phase2"] section[data-route="cases"] .cs-create-head{
  display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center;
  margin-bottom:26px !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-create-head .cs-back-pill{ justify-self:start; }
html[data-theme="phase2"] section[data-route="cases"] .cs-create-head .cs-cb-title-block{ grid-column:2; text-align:center; }
/* Go Back — match the site's clean secondary back button (the #cs-watch-back
   "All Battles" pill): flat dark panel, naked chevron, Urbanist, title-case,
   hover lighten + slide-left. Scoped to .cs-create-head so the case-open
   back pill keeps its own (larger) treatment. */
html[data-theme="phase2"] section[data-route="cases"] .cs-create-head .cs-back-pill{
  height:38px; gap:8px;
  white-space:nowrap;
  padding:0 14px 0 11px !important;
  background:#1c1f29 !important;
  border:0 !important;
  border-radius:10px !important;
  color:rgba(255,255,255,.72) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important; font-weight:700 !important;
  letter-spacing:.2px !important;
  text-transform:none !important;
  box-shadow:none !important;
  transition:background-color .2s ease, color .2s ease, transform .2s ease !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-create-head .cs-back-pill:hover{
  background:#232734 !important;
  color:#ffffff !important;
  transform:translateX(-2px);
}
/* Naked chevron — strip the base bordered arrow box. */
html[data-theme="phase2"] section[data-route="cases"] .cs-create-head .cs-back-pill .cs-back-arrow{
  width:auto !important; height:auto !important;
  background:transparent !important; border:0 !important; border-radius:0 !important;
  color:inherit !important; font-size:15px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-create-head .cs-back-pill:hover .cs-back-arrow{
  background:transparent !important; border:0 !important; color:inherit !important;
}
/* Old inner panel eyebrows ("Mode"/"Packs") replaced by centered labels */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-modes-row::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip-wrap::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggles::before{ display:none !important; }
/* Sections + centered labels */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-section{ margin:0 0 22px; }
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-section-label{
  text-align:center; font-family:'Urbanist',sans-serif; font-size:15px; font-weight:600;
  letter-spacing:.01em; text-transform:none; color:var(--pd-text-mute); margin:0 0 14px;
}
/* MODE — selectable cards (label + player-count sub) */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-modes-row{
  display:flex !important; justify-content:center; gap:10px;
  padding:0 !important; background:none !important; border:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode{
  flex:1 1 0; max-width:170px; min-width:0; height:auto !important;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:16px 10px !important;
  background:var(--pd-bg-2) !important; border:1px solid var(--pd-line) !important;
  border-radius:12px !important; color:var(--pd-text) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode:hover{ border-color:var(--pd-line-hover) !important; }
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode.active{
  background:rgba(66,153,225,.10) !important; border-color:var(--pd-blue) !important; color:#fff !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode-label{
  font-family:'Urbanist',sans-serif !important; font-size:16px !important; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; line-height:1;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode-sub{
  font-family:'Urbanist',sans-serif; font-size:13px; font-weight:600; color:var(--pd-text-mute); letter-spacing:.02em;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode.active .cs-cb-mode-sub{ color:#9fc7f5; }
/* MODIFIERS — toggle cells in a grid (no panel; switch on the right) */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggles{
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr)) !important;
  gap:10px !important; padding:0 !important; margin:0 !important;
  background:none !important; border:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle{
  display:flex; align-items:center; gap:12px; padding:13px 15px !important;
  background:var(--pd-bg-2) !important; border:1px solid var(--pd-line) !important; border-radius:11px !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle-text{ flex:1; }
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-switch{ margin-left:auto; }
/* SELECTED PACKS — casing well + compact border-free portrait cards */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip-wrap{
  background:var(--pd-bg-2) !important; border:1px solid var(--pd-line) !important;
  border-radius:14px !important; padding:14px !important; margin:0 !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip{ align-items:stretch; }
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-tile{ width:130px !important; min-height:0 !important; animation:none !important; }
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-tile{
  width:130px !important; height:auto !important; min-height:0 !important; align-self:stretch; border-radius:12px !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-plus{ width:36px !important; height:36px !important; }
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-plus svg{ width:24px !important; height:24px !important; }
/* BATTLE SUMMARY — label/value rows */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-summary{
  background:var(--pd-bg-2); border:1px solid var(--pd-line); border-radius:14px; overflow:hidden;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-sum-row{
  display:flex; align-items:center; justify-content:space-between; padding:13px 16px;
  font-family:'Urbanist',sans-serif; font-size:13.5px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-sum-row + .cs-cb-sum-row{ border-top:1px solid var(--pd-line); }
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-sum-key{ color:var(--pd-text-mute); font-weight:600; }
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-sum-val{ color:var(--pd-text); font-weight:800; display:inline-flex; align-items:center; gap:4px; }
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-sum-val .bc-glyph{ width:14px; height:14px; }
/* CREATE — full-width; flat site-blue (skin/colors finalized in the later
   create-polish block; this sets the full-width layout + kills the
   .btn-primary blue gradient). */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-create{
  margin:0 !important; width:100% !important; justify-content:center;
  background:var(--pd-blue) !important; background-image:none !important; color:#fff !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-create:disabled{
  background:var(--pd-surface) !important; background-image:none !important; color:var(--pd-text-mute) !important;
}

/* Fairness pill in the watch-view header — opens the existing
   /api/fair seed modal. Packdraw shows this right of the title. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-fair{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  margin-left:auto;
  margin-right:10px;
  border-radius:8px;
  background:transparent;
  border:1px solid var(--pd-line);
  color:rgba(255,255,255,.85);
  font-family:'Urbanist',sans-serif;
  font-size:12.5px; font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-fair:hover{
  background:var(--pd-bg-2);
  border-color:var(--pd-line-hover);
  color:#fff;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-fair svg{
  color:#22c55e;
}

/* Watch view — packdraw-style header */
/* Wrapper around the pack-cards row + the plain-text round line. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-header{
  display:flex; flex-direction:column; align-items:center;
  gap:8px;
  margin: 4px 0 18px;
}
/* Pack-cards row: full vertical card art, current pack highlighted +
   scaled up, others dim + smaller. Horizontal scroll on overflow so a
   29-round battle can still slide through. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases{
  position:relative;
  display:block;
  padding:6px 14px;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  margin:0 !important;
  max-width:100%;
  /* Clip the windowed track to ~5 packs; the track slides under this. */
  overflow:hidden;
}
/* Inner track holds every round's pack and slides left as rounds open. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases .cs-wh-track{
  display:flex; align-items:flex-end;
  gap:10px;
  width:max-content;
  /* Centers a short strip; clamps to 0 (left-aligned) once it overflows. */
  margin-inline:auto;
  transform: translate3d(0,0,0);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
/* "+N more" chip pinned at the right edge of the window. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases .cs-wh-more{
  position:absolute; top:50%; right:10px;
  transform: translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  min-width:30px; height:52px; padding:0 9px;
  border-radius:9px;
  background:rgba(11,16,26,.86);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 12px rgba(0,0,0,.45);
  color:#e8eefc; font-weight:800; font-size:15px; letter-spacing:.2px;
  pointer-events:none;
  z-index:3;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases .cs-wh-more[hidden]{ display:none; }
/* Soft right-edge scrim so packs fade out under the chip rather than
   hard-cutting; only shown when the window actually overflows. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases::after{
  content:''; position:absolute; top:0; right:0; bottom:0; width:72px;
  background:linear-gradient(to right, rgba(11,16,26,0), rgba(11,16,26,.92));
  pointer-events:none; z-index:2;
  opacity:0; transition:opacity .3s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases.cs-has-overflow::after{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases .cs-wh-track{ transition:none; }
}
/* Each pack: vertical trading-card aspect (~85x114). Pulls cs.card art
   when set, else falls back to the highest-multi item icon. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases .cs-wh-pack{
  flex:0 0 auto;
  width:78px; height:104px;
  border-radius:8px;
  /* Borderless / frameless — pack JPG is the visual, no card chrome. */
  background:transparent;
  border:none;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  opacity:.50;
  transform:scale(.92);
  transition: transform .35s cubic-bezier(.18,.9,.32,1.2), opacity .35s ease, box-shadow .35s ease;
  scroll-snap-align: center;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases .cs-wh-pack img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases .cs-wh-pack.is-done{
  opacity:.30;
  transform:scale(.86);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases .cs-wh-pack.is-current{
  opacity:1;
  transform:scale(1.12);
  /* Active round gets a yellow glow halo (no border line). */
  box-shadow:
    0 0 22px rgba(251,191,36,.55),
    0 8px 18px rgba(0,0,0,.50);
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases .cs-wh-pack{ transition:none }
}

/* Plain-text round line: "Round X / Y · Pack Name · cost". No pill —
   just typography sized like packdraw's header subtitle. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-round-line{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  margin: 4px 0 0;
  font-family:'Urbanist',sans-serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--pd-text);
}
/* The HTML [hidden] attribute needs explicit override here — the
   display:inline-flex above outranks the browser default of [hidden]. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-round-line[hidden]{
  display:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-round-label{
  color:var(--pd-text);
  font-weight:800;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-round-pack{
  color:rgba(255,255,255,.92);
  max-width:280px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-round-cost{
  display:inline-flex; align-items:center; gap:4px;
  color:#fbbf24;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-round-cost .bc-glyph{
  width:13px; height:13px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-round-sep{
  color:rgba(255,255,255,.30);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-stage{
  /* packdraw-style 3-band stage: reels row on top, a roster row of player
     cards beneath, then per-player loot grids. The stage is a vertical
     flex of three band grids; every band shares the SAME column template
     (repeat(--cs-watch-cols, …)) so each player's reel / card / grid line
     up into one vertical column across the three rows. --cs-watch-cols is
     set per-battle in renderWatchView (= slots_total), so the layout adapts
     to 2 (1v1), 3 (1v1v1), or 4 (2v2 / 1v1v1v1) seats. */
  display:flex;
  flex-direction:column;
  gap:14px;
  margin: 24px 0 16px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-reels,
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-roster,
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-loot{
  display:grid;
  grid-template-columns: repeat(var(--cs-watch-cols, 2), minmax(0, 1fr));
  gap:18px;
  align-items:start;
}
/* Reels band is the positioning context for the VS dividers + framing
   arrows (an absolute overlay, see below). */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-reels{
  position:relative;
}
/* Reel cell — centers the fixed-width reel frame in its column. No chrome
   of its own; the frame carries the visual. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-cell{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-lootcol{
  min-width:0;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-lootcol .cs-wp-grid{
  margin-top:0;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-roster-cell{
  min-width:0;
}
/* Roster head becomes a subtle borderless card so the roster row "flows"
   under the reels rather than reading as a bordered box (per the
   no-hard-borders direction). Override the head-on-top margin from the
   shared .cs-wp-head rule. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-roster-cell .cs-wp-head{
  margin:0 !important;
  background: rgba(255,255,255,.022) !important;
  border:none !important;
  border-radius:12px !important;
}
/* Soft team tag (2v2) — a tinted inset edge, not a hard side-border. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-roster-cell.cs-wp-team-0 .cs-wp-head{
  box-shadow: inset 3px 0 0 rgba(87,171,248,.55);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-roster-cell.cs-wp-team-1 .cs-wp-head{
  box-shadow: inset 3px 0 0 rgba(239,68,68,.55);
}
/* Loser dimming spans all three band cells sharing a data-slot (reel +
   roster + loot) so a knocked-out player fades as one unit. The roster
   cell also carries .cs-wp-col, covered by the base loser rule. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-cell.cs-wp-loser,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-lootcol.cs-wp-loser{
  opacity:.5;
  transition: opacity .4s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-cell.cs-wp-winner,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-lootcol.cs-wp-winner{
  opacity:1;
}

/* === VS / team dividers + framing arrows over the reel row === */
/* buildWatchDividers() fills .cs-watch-dividers with VS chips at the seam
   percentages (single 50% boundary for 2v2 teams; one per gap for FFA)
   plus left/right framing chevrons. The overlay spans the reels band's
   full content width; the STAGE is what scrolls on mobile (not the band),
   so chips stay locked to their seams even mid-scroll. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-dividers{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:3;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-vs{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:42px; height:42px;
  border-radius:50%;
  display:grid; place-items:center;
  color: var(--pd-blue-accent, #57abf8);
  background: radial-gradient(circle at 50% 32%, #1b2533, #0c1118);
  box-shadow:
    0 0 0 1px rgba(87,171,248,.14),
    0 8px 20px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color: rgba(255,255,255,.24);
  display:grid; place-items:center;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-arrow-l{ left:-6px; }
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-arrow-r{ right:-6px; }

/* Player column: NO box chrome (no bg, no border, no padding). Each
   column is just a flow of: head pill → reel → loot grid. This matches
   packdraw — the page feels open instead of compartmentalised. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col{
  position: relative;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transition: none !important;
}
/* Player head is a small subtle pill at the top of each column —
   avatar + name + total in a single row, like packdraw's. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-head{
  display: grid !important;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  margin: 0 0 10px;
  background: var(--pd-bg-2);
  border: 1px solid var(--pd-line);
  border-radius: 10px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-avatar{
  width: 56px !important; height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--pd-blue-accent, #57abf8), var(--pd-tier-rare, #60A5FA)) !important;
  border: 2px solid var(--pd-line-hover) !important;
  display: grid; place-items: center;
  font-family: 'Urbanist', sans-serif !important;
  font-size: 22px !important; font-weight: 800 !important;
  color: #fff !important;
  overflow: hidden;
  flex-shrink: 0;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-head{
  /* 3-column grid: avatar (56px) + name (1fr) + balance pip / Call Bot
     pill (auto). The 3rd track holds the .cs-wp-total balance for
     filled slots and the .cs-wp-call-bot pill for empty slots — they
     never both render, so the auto column always collapses or fits
     whichever one is visible. Without the auto column the button
     wrapped onto a 2nd grid row, which read as a sloppy 2-line head. */
  grid-template-columns: 56px 1fr auto !important;
  gap: 12px !important;
  padding: 12px 14px !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-avatar img{
  width: 100%; height: 100%; object-fit: cover;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-name{
  font-family: 'Urbanist', sans-serif;
  font-size: 17px; font-weight: 800;
  color: var(--pd-text);
  letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-total{
  font-family: 'Urbanist', sans-serif;
  font-size: 17px; font-weight: 900;
  color: #fbbf24;
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-total .bc-glyph{
  width: 15px; height: 15px;
}
/* Drained — applied to every per-player column total after the split
   animation lands. Number reads as "0" with a muted colour + soft
   strikethrough so the user understands "this was paid out to the
   winner" instead of "this player rolled 0." Per-round item grid
   below the total still shows what was actually pulled. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-total.cs-wp-total-drained{
  color: rgba(255,255,255,.32);
  font-weight: 700;
  transition: color 400ms ease;
}
/* Total Won — applied to the winning slot's chip after the drain
   animation lands. Used to be a gold-tinted pill (background + border
   + border-radius 999px) but that read as a foreign decorative tag
   that didn't match the site's data-display language. Now matches
   the central winner card's gold-text-on-transparent treatment:
   bold gold value, no chrome. The rarity is communicated by COLOR
   (#fbbf24 = gold) the same way the central card's "TOTAL WON"
   number reads as the winning amount. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-total.cs-wp-total-won{
  color: #fbbf24;
  font-weight: 900;
  transition: color 400ms ease;
}

/* Winner column — the crown above the head already calls out the
   winner. The gold halo + tinted background around the head pill
   was REMOVED 2026-05-23 per user request ("remove those background
   highlights"). Column stays visually neutral; only the crown +
   payout amount mark the winner. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col.cs-wp-winner{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col.cs-wp-winner .cs-wp-head{
  /* Neutral — inherits the same background/border the non-winner
     columns use. The crown above is the only winner indicator now. */
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-crown{
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 32px; height: 26px;
  color: #fbbf24;
  filter: drop-shadow(0 4px 10px rgba(251,191,36,.55));
  z-index: 3;
  animation: cs-wp-crown-bob 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
/* The crown SVG is baked into renderPlayerColumn whenever the battle's
   server status is 'resolved', but during a live replay we shouldn't
   reveal the winner before the reels settle. Hide until the section
   flips into data-cs-battle-state="resolved" (set at the end of
   runBattleAnimation + by showBattleResolvedInstantly). */
html[data-theme="phase2"] section[data-route="cases"]:not([data-cs-battle-state="resolved"]) .cs-wp-col .cs-wp-crown{
  display: none !important;
}
@keyframes cs-wp-crown-bob{
  0%, 100% { transform: translateX(-50%) translateY(0)    rotate(-4deg); }
  50%      { transform: translateX(-50%) translateY(-3px) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-crown{ animation: none; }
}

/* Reel item polish — bigger, clearer borders */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item{
  border-radius: 8px !important;
  border: 1px solid var(--pd-line) !important;
  background: var(--pd-bg-1) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-waiting{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:24px 20px !important;
  text-align:center;
  font-family:'Urbanist',sans-serif;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-ww-text{
  color:var(--pd-text);
  font-weight:700;
  margin-bottom:10px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cancel{
  background:var(--pd-surface) !important;
  border:1px solid var(--pd-line) !important;
  color:var(--pd-text) !important;
  border-radius:var(--pd-radius-sm) !important;
  height:36px !important;
  padding:0 16px !important;
  font-family:'Urbanist',sans-serif !important;
  font-weight:700 !important;
}
/* Waiting-state action row — Call Bot + Cancel side by side. */
html[data-theme="phase2"] section[data-route="cases"] .cs-ww-actions{
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-call-bots{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 18px;
  border-radius:10px;
  background: linear-gradient(180deg, #57abf8, #3b82f6) !important;
  border: 1px solid rgba(59,130,246,.65) !important;
  color:#fff !important;
  font-family:'Urbanist',sans-serif !important;
  font-weight:800 !important; font-size:15px !important;
  letter-spacing:.02em !important;
  cursor:pointer;
  box-shadow:
    0 6px 14px rgba(59,130,246,.30),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition: transform .15s ease, background .15s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-call-bots:hover{
  background: linear-gradient(180deg, #6dbafa, #4f8ff7) !important;
  transform:translateY(-1px);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-call-bots:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}
/* Premium finish banner — gold-on-charcoal with a sliding shine sweep,
   subtle starburst rays from center, and a heavier typographic
   treatment. Replaces the previous green→pink linear gradient that
   read cheap. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-result{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(251,191,36,.20) 0%, transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(251,191,36,.08) 0%, transparent 60%),
    linear-gradient(180deg, #1a1410 0%, #0c0a08 100%);
  border: 1px solid rgba(251,191,36,.40);
  border-radius: var(--pd-radius-lg);
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 16px;
  font-family: 'Urbanist',sans-serif;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px rgba(0,0,0,.45),
    0 0 0 1px rgba(251,191,36,.18);
}
/* Light sweep that animates across the banner once on entry. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-result::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(251,191,36,.20) 48%,
    rgba(255,255,255,.10) 50%,
    rgba(251,191,36,.20) 52%,
    transparent 70%
  );
  background-size: 200% 100%;
  background-position: 200% 0;
  animation: cs-wr-sweep 1.6s cubic-bezier(.2,1,.18,1) forwards;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes cs-wr-sweep{
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
/* Trophy / crown SVG floats above the title — drawn via ::before */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-result::before{
  content: "";
  display: block;
  width: 44px; height: 44px;
  margin: 0 auto 10px;
  background: currentColor;
  color: #fbbf24;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 4l2 4 5-4 5 4 2-4v6a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V4zm3 13h8v3H8z' fill='currentColor'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 4l2 4 5-4 5 4 2-4v6a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V4zm3 13h8v3H8z' fill='currentColor'/></svg>") no-repeat center / contain;
  filter: drop-shadow(0 4px 10px rgba(251,191,36,.6));
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-title{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff2c4 0%, #fbbf24 55%, #b97a09 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 2px 16px rgba(251,191,36,.35);
  position: relative;
  z-index: 1;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-sub{
  font-size: 15px; font-weight: 700;
  color: rgba(255,255,255,.92);
  margin-top: 6px;
  letter-spacing: .02em;
  position: relative;
  z-index: 1;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-sub .bc-glyph{
  width: 14px; height: 14px;
  vertical-align: -2px;
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-result::after{ animation: none; opacity: 0; }
}

/* ============================================================
   PACKDRAW-STYLE BATTLE OPENING — vertical reels, payline glow,
   per-round loot grid, countdown overlay, centered winner hero.
   Overrides the horizontal-strip look defined in the base CSS
   (see lines ~17791-17898). Scoped to phase2 theme + cases route
   so it can't leak.
============================================================ */

/* (round-meta pill was removed — now lives as a single plain-text line
   inside .cs-watch-header above. See .cs-watch-round-line.) */

/* Stage needs a positioning context for the countdown overlay. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-stage{
  position:relative;
}

/* Countdown overlay — big 3/2/1 numerals over the stage. JS toggles
   .show; the animation runs once per number. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-countdown{
  position:absolute; inset:0;
  display:none; align-items:center; justify-content:center;
  pointer-events:none;
  font-family:'Urbanist',sans-serif;
  font-weight:900; font-size:180px; line-height:1;
  color:#fff;
  z-index:6;
  letter-spacing:.02em;
  text-shadow:
    0 0 36px rgba(87,171,248,.55),
    0 0 80px rgba(87,171,248,.30),
    0 6px 24px rgba(0,0,0,.65);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-countdown.show{
  display:flex;
  /* .6s matches the JS step (playCountdown stepMs=600). Was .9s when the
     JS step was 900ms; the new tighter cadence shaves ~900ms of dead
     time before reels spin. */
  animation: cs-watch-cd-pop .6s cubic-bezier(.18,.9,.32,1.2) both;
}
@keyframes cs-watch-cd-pop{
  0%   { transform:scale(1.45); opacity:0  }
  20%  { transform:scale(1.00); opacity:1  }
  80%  { transform:scale(1.00); opacity:1  }
  100% { transform:scale(.78);  opacity:0  }
}
@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-countdown{ font-size:130px }
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-countdown.show{ animation:none }
}

/* === Vertical reel === */
/* Replaces the horizontal 120px strip from base CSS. The strip slides
   on Y; cards are 180px squares; 3 visible (top peek, center, bottom). */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-frame{
  --reel-half: 240px;     /* half the frame height — used by reel padding */
  --reel-cell: 180px;     /* one item row — height of the centered landing window */
  position:relative;
  height:480px !important;
  width:180px;
  max-width:100%;
  margin:8px auto 14px;
  overflow:hidden;
  /* Flat matte-navy panel. The top/bottom item fade is handled by a mask
     on the strip (.cs-wp-reel) below — not a black vignette — so items
     dissolve cleanly into the panel instead of into a dark haze. */
  background: var(--pd-bg-1);
  border:1px solid var(--pd-line);
  border-radius:16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), inset 0 0 40px rgba(0,0,0,.38);
}
/* Landing indicator — a pair of crisp blue carets on the side walls,
   pointing inward at the winning row. Solid shapes, NO glow: the single
   restrained accent that replaces the old ±90px blue glow lines (which
   read as "AI slop" floating on the empty matte stage). */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-frame::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-frame::after{
  content:"";
  position:absolute;
  top:50%;
  width:0; height:0;
  transform:translateY(-50%);
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  z-index:4;
  pointer-events:none;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-frame::before{
  left:0;
  border-left:9px solid var(--pd-blue-accent, #5cb4ff);    /* points inward */
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-frame::after{
  right:0;
  border-right:9px solid var(--pd-blue-accent, #5cb4ff);   /* points inward */
}
/* Center selection window — a calm focus band (faint tint + hairline
   top/bottom rules) marking the row the reel lands on. Sits BEHIND the
   strip so the item art stays crisp; the carets above are the focal cue.
   No colored glow, no pulse — matte + restrained, matches the chrome. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-payline{
  position:absolute; left:0; right:0; top:50%;
  height: var(--reel-cell, 180px);
  transform:translateY(-50%);
  background: rgba(255,255,255,.02) !important;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:none !important;
  z-index:1;
  pointer-events:none;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-payline::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-payline::after{
  content:none !important;   /* retired: the old blue glow lines */
}

/* The strip itself — flex-column, slides on Y. Top/bottom padding equal
   to half the frame height so item 0 sits at the center when
   translateY(0). JS then translates negatively to shift items past. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel{
  display:flex !important; flex-direction:column !important;
  align-items:center;
  padding-top: var(--reel-half) !important;
  padding-bottom: var(--reel-half) !important;
  padding-left:0 !important;
  padding-right:0 !important;
  width:180px;
  max-width:100%;
  height:auto !important;
  transform:translateY(0);
  will-change:transform;
  position:relative;
  z-index:2;                 /* item art rides above the focus band */
  /* Edge dissolve — items fade into the panel at the top/bottom rather
     than hard-cutting at the frame border. The "roulette window" look,
     and it replaces the old black vignette gradient on the frame. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel.cs-wp-spinning{
  /* Long ride + heavy decel curve — feels closer to a CSGO-style reel
     where the strip rips past quickly then settles into the winner over
     the final third. cubic-bezier(.12,.86,.20,1) gives a sharper "fast
     start, soft landing" feel than the prior bezier.

     NO prefers-reduced-motion override here, on purpose. The battle reel
     spin is gameplay-critical motion — it IS the unboxing; it shows which
     item each player won — not decoration. A prior 0.4s reduced-motion
     override collapsed the spin to a blur on phones with Reduce Motion on
     (the "replay spins so fast the animation doesn't even play" bug),
     worst on replay where every round fires back-to-back with no live
     pacing. That's the same mistake already fixed for the single-open reel
     (add105d). Keep the full 3.6s ride under Reduce Motion, per the policy
     documented above (brand / gameplay-centerpiece motion is preserved;
     only pure decoration is muted). */
  transition: transform 3.6s cubic-bezier(.12,.86,.20,1) !important;
}

/* Reel item — 180×180 square. No border / background — the pack art is
   the entire visual. Subtle drop-shadow on the image gives lift without
   a card frame. The rarity glow on settle is the only visible chrome. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item{
  flex:0 0 180px !important;
  width:180px !important; height:180px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:12px !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  position:relative;
  border:none !important;
  background: transparent !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item img{
  width:170px !important; height:170px !important;
  object-fit:contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
/* Multi label hidden during spin — the loot grid below shows it. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item-mult{
  display:none !important;
}
/* Rarity tint moved off the card border (which we now strip) onto the
   image drop-shadow — winning items keep their glow on settle via the
   :not(.cs-wp-spinning) .cs-wp-reel-item-win box-shadow rules below. */
/* Kill the legacy ::before rotating-conic mythic glow that bleeds in
   from the base CSS (styles.css ~5523). Packdraw uses a clean static
   border + glow per tier, no spinning ring. Same patch for the grid
   cells below. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item.rarity-mythic::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item.rarity-legendary::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item.rarity-epic::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item.rarity-rare::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item.rarity-uncommon::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item.rarity-common::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.rarity-mythic::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.rarity-legendary::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.rarity-epic::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.rarity-rare::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.rarity-uncommon::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.rarity-common::before{
  content:none !important;
  animation:none !important;
  background:none !important;
}

/* Once the spin stops, neighbours dim + the winner pops with glow.
   JS marks the centered item with .cs-wp-reel-item-win on settle. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item{
  opacity:.40;
  transform:scale(.86);
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item.cs-wp-reel-item-win{
  opacity:1;
  /* Slight overshoot + spring back when the winner card lands — adds
     juice without obscuring the rarity glow halo below. */
  animation: cs-wp-land-pop .55s cubic-bezier(.22, 1.4, .32, 1) both;
  transform: scale(1.06);
}
@keyframes cs-wp-land-pop{
  0%   { transform: scale(.92); }
  55%  { transform: scale(1.15); }
  100% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item.cs-wp-reel-item-win{
    animation: none;
  }
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item-win                  { box-shadow: 0 0 24px rgba(180,188,200,.26), inset 0 0 0 2px rgba(255,255,255,.06) }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item-win.rarity-rare      { box-shadow: 0 0 30px rgba(87,171,248,.42), inset 0 0 0 2px rgba(87,171,248,.30) }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item-win.rarity-epic      { box-shadow: 0 0 36px rgba(168,85,247,.55), inset 0 0 0 2px rgba(168,85,247,.35) }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item-win.rarity-legendary { box-shadow: 0 0 40px rgba(251,191,36,.65), inset 0 0 0 2px rgba(251,191,36,.42) }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item-win.rarity-mythic    { box-shadow: 0 0 44px rgba(255,117,147,.70), inset 0 0 0 2px rgba(255,117,147,.45) }
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item{
    transition: none;
  }
}

/* Land-snap flash for BATTLE reels — mirrors the single-open csLandFlash so the
   whole site lands the same. A single non-looping bloom behind the winning tile.
   It rides a DEDICATED layer (.cs-wp-land-flash-el) because the frame's own
   ::before/::after are the landing carets — can't reuse them. z1 = behind the
   reel (z2), so it glows through the dimmed neighbours + around the popped
   winner. opacity:0 base so prefers-reduced-motion stays dark. JS adds
   .cs-wp-land-flash to the .cs-wp-reel-frame on land, removes it ~520ms later. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-land-flash-el{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(ellipse 78% 56% at 50% 50%, rgba(190,224,255,.55), rgba(96,165,250,.24) 45%, transparent 76%);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-frame.cs-wp-land-flash .cs-wp-land-flash-el{
  animation:csWpLandFlash .5s cubic-bezier(.2,.8,.2,1) 1 both;
}
@keyframes csWpLandFlash{
  0%   { opacity:0; transform:scale(.7);  }
  28%  { opacity:1;                        }
  100% { opacity:0; transform:scale(1.12); }
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-frame.cs-wp-land-flash .cs-wp-land-flash-el{ animation:none; }
}

/* Mobile sizing — shorter frame, smaller cards so reel fits tight columns. */
@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-frame{
    --reel-half:180px;
    --reel-cell:140px;     /* mobile item row → focus-window height */
    height:360px !important;
    width:140px;
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel{ width:140px }
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item{
    flex-basis:140px !important; width:140px !important; height:140px !important;
    padding:10px !important;
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item img{
    width:92px !important; height:92px !important;
  }
  /* Keep a 140px min per band column so the 140px reel frame isn't capped
     by its own max-width:100% inside a squished track (which clipped reel
     art to ~66px). At 3-4 seats the bands exceed the viewport and the
     STAGE scrolls horizontally in lockstep (reel/card/loot stay aligned,
     VS overlay tracks its seams). Placed here — after the desktop
     minmax(0,1fr) base rule — so it wins on source order. */
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-reels,
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-roster,
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-loot{
    grid-template-columns: repeat(var(--cs-watch-cols, 2), minmax(0, 1fr));
    gap:12px;
    /* All three bands take the SAME width — at least the viewport, or the
       natural 140px-per-seat width when that's wider (3-4 seats) so the
       STAGE scrolls. Identical width keeps the columns column-aligned AND
       makes the band box match its cells, so the absolute VS overlay
       (inset:0) spans the real content and its seams stay locked while
       scrolling. flex-shrink:0 stops the column-flex stage from squeezing
       the band back down to the viewport width. */
    width: max(100%, calc(var(--cs-watch-cols, 2) * 140px + (var(--cs-watch-cols, 2) - 1) * 12px));
    flex-shrink: 0;
  }
  /* Framing arrows are a desktop affordance — drop them on mobile. */
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-arrow{ display:none; }
}

/* === Loot grid (per-player results below the reel) === */
/* Replaces the pill row from base CSS. One cell per round; cells fill
   left-to-right as rounds settle. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid{
  display:grid;
  /* Auto-fill at 120px+ — bigger packdraw-style cells. On a 1920px
     viewport with 3 player columns that gives ~3 cells per row per
     player; narrower columns shrink gracefully. */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid{
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap:8px;
  }
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell{
  /* Taller portrait cell so a 2-line item name fits underneath the art
     without crowding the % badge or the value pill (was 1/1.15, which only
     left room for a single clipped line — "the names don't fit in the
     boxes"). Matches packdraw's portrait loot cells. */
  aspect-ratio: 1 / 1.28;
  border-radius:10px;
  /* No border / card background — let the item art and the bottom
     value pill be the visual. Rarity tint applies as a subtle
     gradient below; empty cells fall back to a tinted bg so they
     don't read as missing. */
  background: transparent;
  border: none;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:3px;
  padding:8px 6px;
  font-family:'Urbanist',sans-serif;
  position:relative;
  overflow:hidden;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-empty{
  background: var(--pd-bg-1);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-empty .cs-wp-grid-empty-label{
  font-size:12px; font-weight:700;
  color:rgba(255,255,255,.30);
  letter-spacing:.04em;
  text-transform:uppercase;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-filled{
  animation: cs-wp-grid-pop .35s cubic-bezier(.18,.9,.32,1.2) both;
  /* Filled cells get a rarity-tinted radial glow from the bottom — same
     vibe as packdraw's loot grids. Tint var defaults to common; each
     rarity below overrides it. */
  --pd-tier-glow: rgba(150,160,180,.20);
  background:
    radial-gradient(70% 60% at 50% 100%, var(--pd-tier-glow) 0%, transparent 70%),
    rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-filled.rarity-uncommon { --pd-tier-glow: rgba(92,176,74,.30); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-filled.rarity-rare     { --pd-tier-glow: rgba(87,171,248,.34); box-shadow: inset 0 0 0 1px rgba(87,171,248,.18); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-filled.rarity-epic     { --pd-tier-glow: rgba(168,85,247,.42); box-shadow: inset 0 0 0 1px rgba(168,85,247,.22); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-filled.rarity-legendary{ --pd-tier-glow: rgba(251,191,36,.50); box-shadow: inset 0 0 0 1px rgba(251,191,36,.28); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-filled.rarity-mythic   { --pd-tier-glow: rgba(255,117,147,.58); box-shadow: inset 0 0 0 1px rgba(255,117,147,.32); }
@keyframes cs-wp-grid-pop{
  0%   { transform:scale(.85); opacity:0 }
  100% { transform:scale(1);   opacity:1 }
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-filled{ animation:none }
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-pct{
  font-size:13px; font-weight:700;
  color:rgba(255,255,255,.55);
  letter-spacing:.02em;
  align-self:flex-start;
  margin-left:2px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-img{
  width:60px; height:60px;
  object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-name{
  font-size:13px; font-weight:700;
  line-height:1.18;
  color:rgba(255,255,255,.90);
  text-align:center;
  width:100%;
  /* Wrap to TWO lines then ellipsize — a single nowrap line clipped most
     item names ("Cool Sungla…", "The Crown of…"). overflow:hidden keeps a
     pathologically long name from ever breaking the cell height. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere; word-break:break-word;
  letter-spacing:.01em;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-value{
  display:inline-flex; align-items:center; gap:3px;
  font-size:16px; font-weight:900;
  color:#fbbf24;
  font-variant-numeric:tabular-nums;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-value .bc-glyph{
  width:13px; height:13px;
}
@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-img{
    width:48px; height:48px;
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-name{ font-size:12px; }
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-value{ font-size:14px; }
}

/* Resolved-state layout — once the animation finishes the section gets
   data-cs-battle-state="resolved" so the page becomes a finale + grids
   view (no reels). Matches packdraw's post-battle screen. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="resolved"] .cs-wp-reel-frame{
  display:none !important;
}
/* Drop the whole reels band post-battle — collapses the row + its VS
   divider overlay so the resolved page is just roster totals + loot
   grids (packdraw's results screen). */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="resolved"] .cs-watch-reels{
  display:none !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="resolved"] .cs-watch-cases .cs-wh-pack{
  width:52px; height:70px;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="resolved"] .cs-watch-cases{
  padding-top:2px; padding-bottom:2px;
  /* Post-battle the reels collapse and the strip is the header's focal
     point — clamp it to a ~5-pack window (52px packs) so a 10/20-round
     battle reads as "a few packs + N" instead of a long wrapping row.
     The windowed track + "+N" chip already handle the overflow. */
  max-width:360px !important;
  margin-inline:auto !important;
}
/* Rarity tint on filled cells — radial glow behind the item, no
   border. The image carries the visual identity; the glow only
   sets the rarity vibe. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-filled.rarity-rare{
  background: radial-gradient(70% 50% at 50% 45%, rgba(34,211,238,.20), transparent 75%);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-filled.rarity-epic{
  background: radial-gradient(70% 50% at 50% 45%, rgba(168,85,247,.24), transparent 75%);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-filled.rarity-legendary{
  background: radial-gradient(70% 50% at 50% 45%, rgba(251,191,36,.28), transparent 75%);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-filled.rarity-mythic{
  background: radial-gradient(70% 50% at 50% 45%, rgba(255,117,147,.30), transparent 75%);
}
/* Hide the deprecated pill row (still rendered for backward-compat
   in case some users have stale HTML; the new grid sits beside it). */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-results{
  display:none !important;
}

/* === Winner finale (packdraw-style: horizontal row of crowned winners) === */
/* Override the old gold-banner finale completely. The HTML inside the
   .cs-watch-result block is rebuilt by JS into a row of winner cards,
   so this block defines: the surrounding container, the title, the
   winners row + per-winner card, and the recreate / new-battle CTAs. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-result{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 24px 0 18px !important;
  text-align:center;
  margin: 8px 0 18px;
  font-family:'Urbanist',sans-serif;
  position:relative;
  overflow:visible !important;
  box-shadow: none !important;
}
/* Cancel the old ::before trophy + ::after sweep — they don't fit the
   new layout. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-result::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-result::after{
  content:none !important;
}
/* "Battle Completed" headline */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-result .cs-wr-title{
  font-family:'Urbanist',sans-serif !important;
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  color:rgba(255,255,255,.92) !important;
  background:none !important;
  -webkit-background-clip:initial !important;
          background-clip:initial !important;
  -webkit-text-fill-color:rgba(255,255,255,.92) !important;
  text-shadow:none !important;
  filter:none !important;
  margin:0 0 18px !important;
}
/* Row of winner avatar cards (1 for FFA, 2 for 2v2). */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winners{
  display:flex; align-items:flex-start; justify-content:center;
  flex-wrap:wrap;
  gap:32px;
  margin: 0 0 22px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner{
  display:flex; flex-direction:column; align-items:center;
  gap:6px;
  min-width:120px;
  animation: cs-wr-winner-pop .55s cubic-bezier(.18,.9,.32,1.2) both;
}
@keyframes cs-wr-winner-pop{
  0%   { transform:scale(.70) translateY(8px); opacity:0 }
  60%  { transform:scale(1.06) translateY(0);  opacity:1 }
  100% { transform:scale(1)    translateY(0);  opacity:1 }
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner{ animation:none }
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-avatar{
  position:relative;
  width:96px; height:96px;
  border-radius:50%;
  background: linear-gradient(135deg, rgba(87,171,248,.95), rgba(96,165,250,.95));
  display:grid; place-items:center;
  font-family:'Urbanist',sans-serif;
  font-weight:900; font-size:36px;
  color:#fff;
  overflow:visible;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-avatar img{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-crown{
  position:absolute;
  top:-22px; left:50%;
  transform:translateX(-50%) rotate(-6deg);
  width:42px; height:34px;
  color:#fbbf24;
  filter: drop-shadow(0 6px 14px rgba(251,191,36,.55));
  animation: cs-watch-crown-bob 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes cs-watch-crown-bob{
  0%, 100% { transform:translateX(-50%) translateY(0)    rotate(-6deg); }
  50%      { transform:translateX(-50%) translateY(-4px) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-crown{ animation:none }
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-name{
  margin-top:8px;
  font-family:'Urbanist',sans-serif;
  font-size:15px; font-weight:800;
  color:#fff;
  max-width:140px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-cost{
  font-family:'Urbanist',sans-serif;
  font-size:15px; font-weight:600;
  color:rgba(255,255,255,.45);
  text-decoration:line-through;
  font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:center; gap:3px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-cost .bc-glyph{
  width:11px; height:11px; opacity:.55;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-payout{
  font-family:'Urbanist',sans-serif;
  /* Bigger + brighter than before — user wants the gross win to read
     instantly at-a-glance. The "Total Won" label below sits above it. */
  font-size:30px; font-weight:900;
  color:#fbbf24;
  font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:center; gap:6px;
  margin-top:2px;
  text-shadow: 0 0 18px rgba(251,191,36,.32);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-payout .bc-glyph{
  width:24px; height:24px;
}
/* Label above the headline payout — "Total Won" (FFA / 1v1) or
   "Team Share" (2v2 share-mode). Compact, mute, all-caps so it reads
   as a heading without competing with the number. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-won-label{
  font-family:'Urbanist',sans-serif;
  font-size:13px; font-weight:800;
  letter-spacing:.10em;
  color: rgba(255,255,255,.55);
  text-transform:uppercase;
  margin-top:10px;
}
/* Secondary line below the headline payout — "25,000 HC paid in" +
   "Net +25,000 HC" so players see entry-cost and net profit at-a-glance
   without the prior strikethrough being the only signal. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-cost-line{
  display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap;
  margin-top:6px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-cost-paid{
  font-family:'Urbanist',sans-serif;
  font-size:14px; font-weight:600;
  color:rgba(255,255,255,.45);
  display:inline-flex; align-items:center; gap:3px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-cost-paid .bc-glyph{
  width:11px; height:11px; opacity:.55;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-net{
  font-family:'Urbanist',sans-serif;
  font-size:14px; font-weight:800;
  color: var(--pd-green, #22c55e);
  display:inline-flex; align-items:center; gap:3px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-net .bc-glyph{
  width:11px; height:11px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-net.cs-wr-winner-net-refund{
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 3px 9px;
}
/* Bot winner: use the shared bot pfp PNG instead of the blue gradient
   bubble with "P". Same image-fill treatment as the rest of the site. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-avatar.cs-wr-winner-avatar-bot{
  background: var(--pd-bg-1);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-avatar.cs-wr-winner-avatar-bot img{
  object-fit:cover;
}
/* Bot teammate on a winning 2v2 team — share evaporates to the house.
   Crown stays so the user sees their team won, but the payout slot
   shows a muted em-dash and a "share to house" caption instead of the
   big green payout number (server credited the bot nothing). */

/* ============================================================
   Tiebreaker spinner — provably-fair single-winner selection on
   any team / FFA tie. Flat matte navy panel that matches the rest
   of the case-battles surface (jackpot pill, recreate button,
   pool grid). The gold variant for jackpot mode lives at the
   bottom of this block.
   ============================================================ */
html[data-theme="phase2"] .cs-watch-tiebreaker{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:14px auto 18px;
  width:100%;
  max-width:780px;
  padding:18px 18px 20px;
  border-radius: var(--pd-radius-lg);
  background: var(--pd-bg-1);
  border:1px solid var(--pd-line);
}
/* Specificity bump — the phase2 selector above (0,2,1) outranks a plain
   `.cs-watch-tiebreaker[hidden]` (0,1,1), so the [hidden] attribute
   was being ignored and the tiebreaker block was painting during
   waiting/resolving states (when the strip is empty, just a faint
   vertical line). Match the phase2 prefix here so [hidden] wins.
   Same pattern applies to every watch-view child that has a phase2
   `display:` rule — round-line, call-bots, etc. all set display in
   phase2 styles, which silently neutralised their hidden attribute. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-view [hidden],
html[data-theme="phase2"] .cs-watch-tiebreaker[hidden]{
  display:none !important;
}
/* Strip the text chrome — sleek bar mode. Eyebrow / title / caption
   elements are kept in the DOM for layout stability but render as
   empty (the JS clears their text content too). */
html[data-theme="phase2"] .cs-tb-eyebrow,
html[data-theme="phase2"] .cs-tb-title,
html[data-theme="phase2"] .cs-tb-caption{
  display: none !important;
}
/* Bar wrap — short flat track. Side fades keep the focal mass in
   the middle. */
html[data-theme="phase2"] .cs-tb-track-wrap{
  position: relative;
  width: 100%;
  height: 48px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--pd-bg-2);
  border: 1px solid var(--pd-line);
}
/* Ticker — fixed vertical line at the centre of the wrap. The
   TRACK slides past it; the ticker itself never moves. */
html[data-theme="phase2"] .cs-tb-arrow{
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: var(--pd-blue-accent, #57abf8);
  box-shadow: 0 0 10px rgba(87,171,248,.55);
  border: none;
  z-index: 3;
  pointer-events: none;
  border-radius: 2px;
}
html[data-theme="phase2"] .cs-tb-arrow::before,
html[data-theme="phase2"] .cs-tb-arrow::after{ content: none; }
/* Track — horizontal flex strip of segments that gets translated
   left during the spin. Held at left:0; JS animates transform
   translateX to scroll the picked segment under the ticker. */
html[data-theme="phase2"] .cs-tb-track{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  right: auto;
  display: flex !important;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
/* Segment — width set inline by JS in PIXELS so weights map cleanly
   without flex rounding drift. Each segment renders the player's
   colour fill + avatar (when wide enough). */
html[data-theme="phase2"] .cs-tb-seg{
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid rgba(0,0,0,.40);
  transition: opacity .35s ease, background .25s ease;
}
html[data-theme="phase2"] .cs-tb-seg:last-child{
  border-right: none;
}
/* Per-team / per-slot fill colours — flat, on the site's palette.
   No gradients. Each segment is one solid tinted background; the
   tint level is consistent so a 60% segment doesn't read brighter
   than a 5% segment of the same colour. */
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-team-0{ background: rgba(87,171,248,.28); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-team-1{ background: rgba(239,68,68,.28); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-slot-0{ background: rgba(248,113,113,.28); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-slot-1{ background: rgba(167,139,250,.28); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-slot-2{ background: rgba(87,171,248,.28); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-slot-3{ background: rgba(251,146,60,.28); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-slot-4{ background: rgba(52,211,153,.28); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-slot-5{ background: rgba(244,114,182,.28); }
/* Avatar inside a segment — only renders when the segment is wide
   enough (>= 9% weight, gated in JS). Small circle, centred. */
html[data-theme="phase2"] .cs-tb-seg-av{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.18);
  background: var(--pd-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.85);
  font-weight: 700;
  font-size: 13px;
  z-index: 1;
  flex-shrink: 0;
}
html[data-theme="phase2"] .cs-tb-seg-av + .cs-tb-seg-av{
  margin-left: -8px;
}
html[data-theme="phase2"] .cs-tb-seg-av img{
  width: 100%; height: 100%; object-fit: cover;
}
/* Loser segments dim after the pick lands. */
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-loser{
  opacity: .25;
}
/* Picked segment lights up — solid colour fill (no halo), white
   avatar ring. The ticker line above already marks the column. */
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-picked.cs-tb-seg-team-0,
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-picked.cs-tb-seg-slot-2{ background: rgba(87,171,248,.62); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-picked.cs-tb-seg-team-1{ background: rgba(239,68,68,.62); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-picked.cs-tb-seg-slot-0{ background: rgba(248,113,113,.62); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-picked.cs-tb-seg-slot-1{ background: rgba(167,139,250,.62); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-picked.cs-tb-seg-slot-3{ background: rgba(251,146,60,.62); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-picked.cs-tb-seg-slot-4{ background: rgba(52,211,153,.62); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-picked.cs-tb-seg-slot-5{ background: rgba(244,114,182,.62); }
html[data-theme="phase2"] .cs-tb-seg.cs-tb-seg-picked .cs-tb-seg-av{
  border-color: #fff;
}
/* Jackpot variant — amber ticker so the draw moment carries the
   same amber vocabulary as the jackpot pill. */
html[data-theme="phase2"] .cs-watch-tiebreaker[data-tb-kind="jackpot"] .cs-tb-arrow{
  background: var(--pd-yellow, #e4ae33);
  box-shadow: 0 0 10px rgba(228,174,51,.55);
}
/* Mobile — shorter bar height. */
@media (max-width: 540px){
  html[data-theme="phase2"] .cs-tb-track-wrap{ height: 40px; }
  html[data-theme="phase2"] .cs-tb-seg-av{ width: 22px; height: 22px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce){
  /* Tiebreaker spin is GAMEPLAY-essential — it's the user-facing
     reveal of how the server picked the winner. Killing it entirely
     under reduce-motion turned the moment into a silent snap, which
     iOS users mistook for a bug. Shorten the duration instead so the
     reveal still plays, just faster. */
  html[data-theme="phase2"] .cs-tb-track{ transition-duration: 0.8s !important }
}

/* ============================================================
   POT-SPLIT ANIMATION
   Fires in shared / 2v2-win / FFA-tie finales. A "Pool" / "Pot"
   pill scales in above the winner row, holds for a beat, then
   one coin chip per winner flies to that player's payout slot
   and the on-card payout number flashes in as the chip lands.

   Aesthetic mirrors the existing balance-pop chip (Sora 800/13px,
   blue→green gradient, triple-shadow, tabular-nums, arcade-out
   easing) so the split reads as the same money-movement language
   the rest of the site already speaks.
   ============================================================ */
html[data-theme="phase2"] .cs-wr-split-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
/* Flow variant — mounted on <body> with position:fixed so chip
   transforms can span from the bottom player columns up to the top
   winner cards in viewport coordinates. Scroll-safe. */
html[data-theme="phase2"] .cs-wr-split-overlay.cs-wr-split-overlay-flow{
  position: fixed;
  inset: 0;
  z-index: 600;
}
/* Anchor the overlay to the finale block when present so chip
   absolute-positioning is in the same coordinate space as the
   winner cards. Only fires when the overlay exists — single-winner
   finales aren't perturbed. */
html[data-theme="phase2"] section[data-route="cases"] #cs-watch-result:has(.cs-wr-split-overlay){
  position: relative;
}

/* "Pool" / "Pot" pill — same gradient + shadow stack as .balance-pop-up
   so the source of the money reads with the site's existing credit
   visual language. Slightly larger than the chip since it represents
   the WHOLE pool before the split. */
html[data-theme="phase2"] .cs-wr-split-pot{
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translate(-50%, -2px) scale(.85);
  opacity: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 99px;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: #fff;
  white-space: nowrap;
  z-index: 6;
  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(26,138,77,.92));
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    0 8px 22px rgba(59,130,246,.45),
    0 0 28px rgba(59,130,246,.55),
    inset 0 1px 0 rgba(255,255,255,.4);
  will-change: transform, opacity;
}
html[data-theme="phase2"] .cs-wr-split-pot-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
html[data-theme="phase2"] .cs-wr-split-pot-amount{
  font-size: 17px;
  font-weight: 900;
  color: #fff;
}
html[data-theme="phase2"] .cs-wr-split-pot .bc-glyph{
  width: 16px;
  height: 16px;
}

/* Pot scale-in — same overshoot beat as balancePopFloat's first 35%.
   Borrows the cubic-bezier(.18,.7,.3,1) easing for the appear, then
   holds the settled state via animation-fill-mode: forwards. */
@keyframes cs-wr-split-pot-pop{
  0%   { opacity: 0; transform: translate(-50%, -2px) scale(.85); }
  55%  { opacity: 1; transform: translate(-50%, 0)    scale(1.05); }
  100% { opacity: 1; transform: translate(-50%, 2px)  scale(1);    }
}
html[data-theme="phase2"] .cs-wr-split-pot.cs-wr-split-pot-in{
  animation: cs-wr-split-pot-pop var(--cs-split-pot-in-dur, 400ms) cubic-bezier(.18,.7,.3,1) forwards;
}

/* Chip — one per winner. Identical aesthetic to .balance-pop-up: same
   gradient, same border, same triple-shadow stack, same typography.
   This is the SAME visual language as "+5,000 BC floats off the
   balance pill" — just landing on a winner card instead of fading up. */
html[data-theme="phase2"] .cs-wr-split-chip{
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 99px;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  z-index: 7;
  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(26,138,77,.92));
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    0 8px 22px rgba(59,130,246,.45),
    0 0 28px rgba(59,130,246,.55),
    inset 0 1px 0 rgba(255,255,255,.4);
  /* Flight easing matches --arcade-out so the chip travels with the
     same "fast then settle" feel the rest of the site's motion uses. */
  transition:
    transform var(--cs-split-chip-dur, 700ms) cubic-bezier(.16, 1, .3, 1),
    opacity   180ms ease;
  will-change: transform, opacity;
}
html[data-theme="phase2"] .cs-wr-split-chip .bc-glyph{
  width: 14px;
  height: 14px;
}
html[data-theme="phase2"] .cs-wr-split-chip.cs-wr-split-chip-flying{
  opacity: 1;
}
html[data-theme="phase2"] .cs-wr-split-chip.cs-wr-split-chip-landed{
  opacity: 0;
  /* Brighter, more saturated flash at the impact point so each coin
     reads as "landing" rather than just fading out mid-air. */
  filter: brightness(1.7) saturate(1.35);
}

/* Mini chip — the stream particles that flow from sources to winner
   card. Just the currency glyph itself (Hitcoin diamond or Robux
   coin), NO disc background. The whole point is that what's flying
   is the actual currency — bug report 2026-05-23: "make sure the
   currency going is the hitcoin or bloxcoin image depending on
   which one its switched to." Sized larger than the inline glyph so
   it reads at distance during the flight, with a coloured halo glow
   that matches the currency's natural drop-shadow tint. */
html[data-theme="phase2"] .cs-wr-split-chip.cs-wr-split-chip-mini{
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html[data-theme="phase2"] .cs-wr-split-chip.cs-wr-split-chip-mini .bc-glyph{
  width: 28px;
  height: 28px;
  /* Brighter blue halo than the inline glyph default — chip-in-flight
     wants to grab the eye, not blend with surrounding text. */
  filter: drop-shadow(0 0 6px rgba(59,130,246,.85))
          drop-shadow(0 0 14px rgba(34,211,238,.45));
}

/* Landing pop on the winner card — the green HALO around the pfp was
   removed 2026-05-23 ("remove the highlights that happen around the
   pfps"), and we keep it gone. But the user 2026-05-29 wants the finale
   to "pop more", so we punch the PAYOUT NUMBER itself (not the avatar)
   when its ticker lands: a quick scale-up + gold bloom that settles back
   to the resting state. This reads as "the win amount slams home" while
   leaving the pfp untouched. .cs-wr-winner-land is added by the JS when
   a card's count-up completes (and auto-removed ~1.1s later). */
@keyframes cs-wr-payout-pop{
  0%   { transform: scale(1);    text-shadow: 0 0 18px rgba(251,191,36,.32); }
  42%  { transform: scale(1.24); text-shadow: 0 0 26px rgba(251,191,36,.8); }
  100% { transform: scale(1);    text-shadow: 0 0 18px rgba(251,191,36,.32); }
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner.cs-wr-winner-land .cs-wr-winner-payout{
  animation: cs-wr-payout-pop 560ms cubic-bezier(.2,.8,.3,1.3);
  transform-origin: left center;
}
/* Decorative pop only — under reduce-motion the number still lands at
   its final value, just without the scale/bloom flourish (enumerated,
   never a universal selector — memory/project_ios_reduce_motion.md). */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner.cs-wr-winner-land .cs-wr-winner-payout{
    animation: none;
  }
}

/* Tabular numerics on the per-card payout AND per-player column
   total so the digits don't jitter as the ticker counts up/down —
   each digit reserves the same width so "9 → 10" doesn't shift
   the whole row left/right. Same trick the topbar balance pill uses. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-payout,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-total{
  font-variant-numeric: tabular-nums;
}

/* Shared-mode lobby tile — drop the "vs" separator between avatars.
   The whole team-shared cluster sits as one group (left-aligned),
   matching the "everyone's on the same side" semantics of shared
   mode. The base .cs-br-team styling carries the spacing. */
html[data-theme="phase2"] .cs-br-team.cs-br-team-shared{
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Live "now opening" sweep across the case well — when a battle is locked
   (slots full + waiting/resolving), the cards lift out of the casing one at a
   time, left to right, so the row reads as "this battle is unboxing right
   now." NO glow/halo: a clean lift plus a crisp (zero-blur) tier-colored
   underline carry it. Tier color is --cs-tier, set per row below. The sweep
   tiles the strip (duration scales with the card count) so it stays a
   continuous march for both 2-round and 12-round battles. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row{ --cs-tier: var(--pd-blue-accent, #57abf8); }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row[data-mode-tier="jackpot"]  { --cs-tier:#53e296; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row[data-mode-tier="crazy"]    { --cs-tier:#b78cff; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row[data-mode-tier="shared"]   { --cs-tier:#ffb13a; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row[data-mode-tier="terminal"] { --cs-tier:#ec5a6e; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row[data-mode-tier="normal"]   { --cs-tier:#7a8084; }

@keyframes cs-br-case-march{
  0%        { transform: translateY(0);    box-shadow: 0 0 0 0 transparent; }
  6%        { transform: translateY(-7px); box-shadow: 0 4px 0 0 var(--cs-tier, #57abf8); }
  13%       { transform: translateY(-7px); box-shadow: 0 4px 0 0 var(--cs-tier, #57abf8); }
  20%, 100% { transform: translateY(0);    box-shadow: 0 0 0 0 transparent; }
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-cases-live .cs-br-case{
  animation: cs-br-case-march calc(var(--cs-n, 5) * 240ms) var(--pd-ease-smooth, cubic-bezier(.32,.72,0,1)) infinite;
  animation-delay: calc(var(--cs-br-case-i, 0) * 240ms);
  z-index: 1;
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-cases-live .cs-br-case{
    animation: none;
  }
}

/* New-battle pop-in — packdraw slides a freshly-created battle into the
   lobby. renderBattlesList tags ONLY rows whose battle wasn't present
   last render with .cs-br-enter, so existing rows never re-animate on a
   poll tick. --cs-br-enter-i staggers the first-load cascade (capped). */
@keyframes cs-br-enter{
  0%   { opacity:0; transform: translateY(-14px) scale(.984); }
  60%  { opacity:1; }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row.cs-br-enter{
  animation: cs-br-enter .46s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--cs-br-enter-i, 0) * 60ms);
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row.cs-br-enter{
    animation: none;
  }
}

/* Waiting-for-players cue — empty seat circles in a not-yet-full row
   breathe so a half-filled battle reads as "still filling" at a glance,
   matching packdraw's open-seat treatment. Stops once the row is full
   (.cs-br-full) or resolved. */
@keyframes cs-br-empty-pulse{
  0%,100% { opacity:.5;  box-shadow:0 0 0 0 rgba(87,171,248,0); }
  50%     { opacity:.95; box-shadow:0 0 0 3px rgba(87,171,248,.16); }
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row:not(.cs-br-full) .cs-br-avatar.cs-br-empty{
  animation: cs-br-empty-pulse 1.9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row .cs-br-avatar.cs-br-empty{
    animation: none;
  }
}

/* Cancel-battle / generic confirm modal action row — buttons spaced
   evenly, destructive Yes uses a red gradient to signal "this is
   irreversible," ghost No is neutral. */
html[data-theme="phase2"] #cs-confirm-modal .cs-confirm-actions{
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 18px;
}
html[data-theme="phase2"] #cs-confirm-modal .cs-confirm-actions .btn{
  flex: 0 0 auto;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
}
html[data-theme="phase2"] #cs-confirm-modal .cs-confirm-yes{
  background: linear-gradient(180deg, rgba(239,68,68,.95), rgba(178,18,50,.95));
  border: 1px solid rgba(239,68,68,.55);
  color: #fff;
  box-shadow:
    0 4px 14px rgba(239,68,68,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s var(--arcade-out, cubic-bezier(.16,1,.3,1)),
              box-shadow .2s var(--arcade-out, cubic-bezier(.16,1,.3,1));
}
html[data-theme="phase2"] #cs-confirm-modal .cs-confirm-yes:hover{
  transform: translateY(-1px);
  box-shadow:
    0 6px 18px rgba(239,68,68,.45),
    inset 0 1px 0 rgba(255,255,255,.22);
}

/* Bot just-landed — single smooth fade+scale-in on the optimistic
   stub the moment Call Bot is clicked. Replaces the prior
   .cs-wp-bot-stub treatment which used a "Joining…" placeholder text
   that visibly differed from the real bot row, causing a flash when
   renderWatchView swapped one for the other. Now the stub IS the
   real row structurally; this animation just gives the column a
   gentle entrance so the bot's arrival reads as intentional motion. */
@keyframes cs-wp-bot-land{
  0%   { opacity: 0; transform: translateY(8px) scale(.96); }
  60%  { opacity: 1; transform: translateY(0)   scale(1.01); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col.cs-wp-bot-just-landed{
  animation: cs-wp-bot-land 280ms cubic-bezier(.16, 1, .3, 1) both;
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col.cs-wp-bot-just-landed{
    animation: none;
  }
}

/* Reduced-motion handling — split flow is GAMEPLAY-essential (same
   status as reel spin, multiplier ticker), so we don't kill it under
   prefers-reduced-motion. Only shorten the durations so users with
   the OS-level reduce-motion preference get a faster, less-busy
   version of the same beat instead of a sudden snap to the finale.
   Memory: project_ios_reduce_motion.md — "Never put a universal
   selector inside reduce-motion blocks." We enumerate specific
   non-essential pieces (the bot-just-landed entrance) elsewhere. */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] .cs-wr-split-pot.cs-wr-split-pot-in{
    animation-duration: 180ms;
  }
  html[data-theme="phase2"] .cs-wr-split-chip{
    transition-duration: 320ms, 120ms;
  }
}

/* Negative-net pill — "Net -1,357,692" for losses under the items-
   payout model. Red so it reads as a loss at a glance, paired with
   the existing green Net+ pill. Sized to match the refund chip. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-net.cs-wr-winner-net-loss{
  color: #ef4444;
  font-weight: 800;
  font-size: 14px;
  font-family:'Urbanist',sans-serif;
  display:inline-flex;
  align-items:center;
  gap:3px;
}
/* Open Pack CTA — show the qty × price total on the button itself so
   "Open 3 Packs · 450 HC" reads as the action. Replaces the duplicate
   .cs-cost-chip pill (still hidden via phase2 CSS). */
html[data-theme="phase2"] section[data-route="cases"] .cs-open-cta{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-open-cta .cs-open-cta-sep{
  opacity:.55;
  font-weight:700;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-open-cta .cs-open-cta-cost{
  font-variant-numeric:tabular-nums;
  font-weight:900;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-open-cta .bc-glyph{
  width:18px; height:18px;
}
/* Actions row: big green recreate button + outlined new battle. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-actions{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-recreate{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  height:44px; padding:0 24px;
  border-radius:10px;
  background: linear-gradient(180deg, #34d399, #10b981) !important;
  border: 1px solid rgba(16,185,129,.65) !important;
  color:#062b1a !important;
  font-family:'Urbanist',sans-serif !important;
  font-weight:800 !important; font-size:16px !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  cursor:pointer;
  box-shadow:
    0 8px 20px rgba(16,185,129,.30),
    inset 0 1px 0 rgba(255,255,255,.30);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-recreate:hover{
  background: linear-gradient(180deg, #3ddca5, #14c08a) !important;
  transform:translateY(-1px);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-recreate-cost{
  display:inline-flex; align-items:center; gap:3px;
  font-variant-numeric:tabular-nums;
  font-weight:800;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-recreate-cost .bc-glyph{
  width:13px; height:13px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-new{
  height:44px; padding:0 18px;
  border-radius:10px;
  background: var(--pd-bg-1) !important;
  border: 1px solid var(--pd-line) !important;
  color:var(--pd-text) !important;
  font-family:'Urbanist',sans-serif !important;
  font-weight:700 !important; font-size:15px !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  cursor:pointer;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-new:hover{
  background: var(--pd-surface) !important;
  border-color: var(--pd-line-hover) !important;
}

/* Join-button loading spinner — small ring that spins inline next to
   "Joining…" text while the API call resolves. The server's resolve
   path runs sync when the last slot fills, so this can take a beat. */
.cs-br-spinner{
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 6px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.30);
  border-top-color: #fff;
  animation: cs-br-spin .7s linear infinite;
  vertical-align: -1px;
}
@keyframes cs-br-spin{ to { transform: rotate(360deg); } }
.cs-br-join-loading{
  opacity: .85;
  cursor: progress !important;
}

/* Case-picker modal */
/* ============================================================
   PACKDRAW-STYLE CASE PICKER — wider modal, 5-col tile grid,
   full-bleed card art with no separate name label (pack art
   already has the name baked in). Mirrors the "Select Packs"
   modal from /battles/create on packdraw.
============================================================ */
html[data-theme="phase2"] .modal-cs-picker{
  /* Wide modal so 5 columns of 150px-ish tiles breathe properly */
  max-width: 900px !important;
  width: calc(100vw - 40px);
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--pd-blue-accent, #57abf8) 6%, transparent), transparent 60%),
    var(--pd-bg-1) !important;
  border:1px solid var(--pd-line-hover) !important;
  color:var(--pd-text);
  padding: 22px 22px 18px !important;
}
html[data-theme="phase2"] .modal-cs-picker .modal-title{
  font-family:'Urbanist',sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color:var(--pd-text) !important;
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-head{
  text-align: left !important;
  margin-bottom: 16px !important;
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-grid{
  display:grid !important;
  /* 5-col grid like packdraw on desktop; auto-fits to fewer on
     narrower viewports. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 10px !important;
  max-height: 60vh !important;
  padding: 4px !important;
  background: transparent !important;
  border: none !important;
}
/* Full-bleed pack-art tile — packdraw style. No separate name label
   (the card art has the pack name baked in); just show price below
   in a clean pill. */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  /* Borderless / frameless — same treatment as the rest of the pack art
     on the site. The JPG is the visual; we only render a subtle drop-
     shadow + slight float for lift. Hover scale = the only chrome. */
  background: transparent !important;
  border: none !important;
  overflow: visible;
  position: relative;
  transition: transform .25s cubic-bezier(.32,.72,0,1);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile:hover{
  transform: translateY(-3px) scale(1.025);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55))
          drop-shadow(0 0 18px color-mix(in srgb, var(--pd-blue-accent, #57abf8) 28%, transparent));
}
/* When already selected, give a subtle ring (the picker already shows
   the qty badge — this is a secondary signal so the eye finds it). */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile.is-selected .cs-picker-tile-thumb{
  box-shadow: 0 0 0 2px var(--pd-blue-accent, #57abf8) inset;
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-thumb{
  width: 100% !important;
  /* Base CSS sets height:60px which beat aspect-ratio. Force auto so
     aspect-ratio:3/4 actually takes effect → vertical trading-card
     style tiles like packdraw. */
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  background: var(--pd-bg-1);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 0 !important;
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-thumb img{
  width: 100% !important; height: 100% !important;
  max-width: 100% !important; max-height: 100% !important;
  object-fit: cover !important;
  filter: none !important;
  display: block;
}
/* When pack has full-bleed card art (cs.card set), let the art fill
   the entire tile edge-to-edge. */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-card .cs-picker-tile-thumb{
  background: transparent;
}
/* Hide the redundant name label — pack cards have the name in art */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-name{
  display: none;
}
/* Price pill at the bottom of the tile (packdraw pattern) */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-price{
  font-family: 'Urbanist', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--pd-text) !important;
  background: var(--pd-bg-2) !important;
  padding: 8px 0;
  display: flex !important; align-items: center; justify-content: center;
  gap: 4px !important;
  border-top: 1px solid var(--pd-line);
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-price .bc-glyph{
  width: 12px !important; height: 12px !important;
}
/* Selected-quantity badge — packdraw shows a small filled circle */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-badge{
  position: absolute !important;
  top: 6px; right: 6px;
  z-index: 2;
  min-width: 22px; height: 22px;
  padding: 0 6px !important;
  border-radius: 11px !important;
  background: var(--pd-blue-accent, #57abf8) !important;
  border: 2px solid var(--pd-bg-1) !important;
  font-family: 'Urbanist', sans-serif !important;
  font-size: 13px !important; font-weight: 800 !important;
  color: #fff !important;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-done{
  background:var(--pd-blue-accent, #57abf8) !important;
  color:#fff !important;
  border:none !important;
  border-radius:var(--pd-radius-sm) !important;
  font-weight: 700;
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-foot{
  margin-top: 14px;
  padding-top: 0;
  border-top: none;
  display: flex; justify-content: center;
}

/* ============================================================
   PHASE 2 — UPGRADER (Deals) ROUTE SKIN (Session 5)
   Skins the existing Upgrader page in packdraw "Deals" style.
   Three-panel layout: bet input (left) · circular gauge (center) ·
   target preview (right). The existing mechanics (.upgrader-bet input,
   .upgrader-slider target, #upgrader-spin button, .upgrader-wheel SVG)
   are preserved and re-arranged by CSS grid. No JS changes.
   ============================================================ */

html[data-theme="phase2"] section[data-route="upgrader"]{
  padding:0;
}
html[data-theme="phase2"] section[data-route="upgrader"] .game-shell{
  max-width:1200px;
  margin:0 auto;
  padding:20px 28px 48px;
  background:transparent;
  border:none;
  box-shadow:none;
}

/* Slim header (existing pattern from Phase 1 Pass 3 — gh-art hidden) */
html[data-theme="phase2"] section[data-route="upgrader"] .gh-art{ display:none !important; }
html[data-theme="phase2"] section[data-route="upgrader"] .game-header{
  display:flex; align-items:center; gap:14px;
  padding:0 0 14px;
  margin-bottom:18px;
  border-bottom:1px solid var(--pd-line);
  background:transparent !important;
}
html[data-theme="phase2"] section[data-route="upgrader"] .game-title{
  font-family:'Urbanist',sans-serif !important;
  font-size:22px !important;
  font-weight:800 !important;
  color:var(--pd-text) !important;
  margin:0 !important;
}
html[data-theme="phase2"] section[data-route="upgrader"] .game-status{
  font-family:'Urbanist',sans-serif;
  font-size:13px; font-weight:700;
  letter-spacing:.08em;
  color:var(--pd-text-mute) !important;
  background:transparent !important;
  padding:0 !important;
  margin-left:auto;
}
html[data-theme="phase2"] section[data-route="upgrader"] .fair-pill{
  height:30px;
  padding:0 10px 0 8px;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--pd-text-mute) !important;
  box-shadow:none !important;
}

/* Layout: Phase 1 already lays out .game-shell as a 300px 1fr grid with
   grid-template-areas ("header header" / "controls stage" / "stats stats" /
   "popup popup"). We keep that layout and only skin the children. */
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-stage{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:28px 20px !important;
  display:flex !important; align-items:center; justify-content:center;
  margin:0 !important;
  min-height:auto !important;
}
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-particles{ display:none; }
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-wheel-wrap{
  position:relative;
  width:280px; height:280px;
}
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-wheel{
  width:100%; height:100%;
}
/* Repaint the SVG wheel rings — recolor the existing strokes via CSS overrides.
   Track ring (#1c1f47 hardcoded) gets a matte gray; fail (red) muted; win (green) stays prominent. */
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-wheel circle[stroke="#1c1f47"]{
  stroke:var(--pd-bg-1) !important;
}
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-pointer{
  border-bottom-color:var(--pd-blue-accent) !important;
}
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-center{
  background:transparent;
}
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-percent{
  font-family:'Urbanist',sans-serif !important;
  font-size:42px; font-weight:800;
  color:var(--pd-text) !important;
}
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-mult-label{
  font-family:'Urbanist',sans-serif !important;
  font-size:13px; font-weight:700;
  letter-spacing:.1em;
  color:var(--pd-text-mute) !important;
  margin-top:2px;
}
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-mult{
  font-family:'Urbanist',sans-serif !important;
  font-size:24px; font-weight:800;
  color:var(--pd-green) !important;
  margin-top:4px;
}

/* Controls panel — packdraw form-card style */
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-controls{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:22px !important;
  display:flex !important; flex-direction:column !important;
  gap:18px !important;
  margin:0 !important;
  max-width:none !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="upgrader"] .control-group label{
  font-family:'Urbanist',sans-serif !important;
  font-size:13px; font-weight:700 !important;
  letter-spacing:.08em;
  color:var(--pd-text-mute) !important;
  text-transform:uppercase;
  margin-bottom:8px;
  display:block;
}
/* Reset Phase 1's heavy bet-input chrome and let it size naturally. The
   container is flex with wrap allowed at narrow widths; we drop the fixed
   42px height (paired with Phase 1 padding it was clipping the children
   and forcing the inner ½/2×/MAX row to overlap the preset-strip row). */
html[data-theme="phase2"] section[data-route="upgrader"] .bet-input{
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:8px 10px !important;
  display:flex !important; align-items:center;
  gap:6px !important;
  flex-wrap:wrap !important;
  height:auto !important;
  min-height:42px;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="upgrader"] .bet-input input{
  flex:1 1 80px;
  min-width:60px;
}
html[data-theme="phase2"] section[data-route="upgrader"] .bet-input input{
  background:transparent !important;
  border:none !important;
  color:var(--pd-text) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  flex:1 1 auto; min-width:0;
}
html[data-theme="phase2"] section[data-route="upgrader"] .bet-input button{
  height:30px !important;
  padding:0 10px !important;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  cursor:pointer;
  box-shadow:none !important;
  flex:0 0 auto;
}
html[data-theme="phase2"] section[data-route="upgrader"] .bet-input button:hover{
  color:var(--pd-text) !important;
}

/* Preset chips (5 / 25 / 100 / 500) — separate row below bet-input */
html[data-theme="phase2"] section[data-route="upgrader"] .bet-presets{
  display:flex !important;
  gap:6px !important;
  margin-top:6px !important;
  flex-wrap:wrap;
}
html[data-theme="phase2"] section[data-route="upgrader"] .bet-presets button{
  flex:1 1 0 !important;
  min-width:0 !important;
  height:32px !important;
  padding:0 10px !important;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  cursor:pointer;
  box-shadow:none !important;
  transition:color .15s var(--pd-ease-smooth), background .15s var(--pd-ease-smooth);
}
html[data-theme="phase2"] section[data-route="upgrader"] .bet-presets button:hover{
  color:var(--pd-text) !important;
  background:var(--pd-bg-2) !important;
  transform:none !important;
}
html[data-theme="phase2"] section[data-route="upgrader"] .bet-presets button.active{
  background:var(--pd-blue) !important;
  color:#fff !important;
  border-color:var(--pd-blue) !important;
}

/* USD-equivalent readout under bet-presets */
html[data-theme="phase2"] section[data-route="upgrader"] .bet-usd-readout{
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  font-weight:600;
  color:var(--pd-text-mute) !important;
  text-align:right;
  margin-top:6px;
}

/* ============================================================
   PHASE 2 — IN-GAME GUIDE CARDS (.game-guide)
   The collapsible "How it works" card that app.js builds for mines
   + upgrader (skipped for crash/blackjack/slots/dice/limbo/plinko).
   User feedback 2026-05-18: the existing card looks busy — remove
   the per-game thumb icon, slim the chrome, use packdraw matte+blue.
   Applies to every game route by scoping under the theme attr only.
   ============================================================ */

html[data-theme="phase2"] .game-guide{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  margin-top:16px !important;
  overflow:hidden;
  box-shadow:none !important;
  padding:0 !important;
}
html[data-theme="phase2"] .game-guide::before{ display:none !important; }
html[data-theme="phase2"] .game-guide:hover{
  border-color:var(--pd-line-hover) !important;
}
html[data-theme="phase2"] .game-guide.open{
  border-color:var(--pd-line-hover) !important;
  box-shadow:none !important;
}

/* Hide the per-game decorative thumb icon entirely (user request) */
html[data-theme="phase2"] .game-guide .gg-thumb{ display:none !important; }

/* Head row: eyebrow + title + subtitle on left, Read-guide CTA on right */
html[data-theme="phase2"] .game-guide .gg-head{
  display:flex !important; align-items:center;
  gap:16px;
  padding:14px 18px !important;
  background:transparent !important;
  border:none !important;
  width:100%;
  text-align:left;
  cursor:pointer;
}
html[data-theme="phase2"] .game-guide .gg-head:hover{
  background:rgba(250,250,250,.02) !important;
}
html[data-theme="phase2"] .game-guide .gg-title-block{
  display:flex; flex-direction:column;
  gap:2px;
  flex:1 1 auto; min-width:0;
}
html[data-theme="phase2"] .game-guide .gg-eyebrow{
  font-family:'Urbanist',sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pd-text-mute) !important;
  background:transparent !important;
  padding:0 !important;
  border:none !important;
  display:inline-block;
}
html[data-theme="phase2"] .game-guide .gg-title{
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  color:var(--pd-text) !important;
  background:none !important;
  -webkit-text-fill-color:var(--pd-text) !important;
}
html[data-theme="phase2"] .game-guide .gg-subtitle{
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:500 !important;
  color:var(--pd-text-mute) !important;
  margin-top:2px;
}

/* Read-guide CTA: packdraw outline pill */
html[data-theme="phase2"] .game-guide .gg-cta{
  display:inline-flex; align-items:center; gap:6px;
  height:34px;
  padding:0 12px;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.04em;
  transition:color .15s var(--pd-ease-smooth), background .15s var(--pd-ease-smooth);
  flex-shrink:0;
}
html[data-theme="phase2"] .game-guide .gg-head:hover .gg-cta{
  color:var(--pd-text) !important;
  background:var(--pd-surface) !important;
}
html[data-theme="phase2"] .game-guide .gg-cta-text{
  color:inherit !important;
  font-size:14px !important;
  font-weight:700 !important;
  width:auto !important;
  opacity:1 !important;
}
html[data-theme="phase2"] .game-guide .gg-cta-text::before{ display:none !important; content:'' !important; }
html[data-theme="phase2"] .game-guide .gg-cta-chev{
  font-size:16px; line-height:1;
  transition:transform .2s var(--pd-ease-smooth);
}
html[data-theme="phase2"] .game-guide.open .gg-cta-chev{ transform:rotate(90deg); }
html[data-theme="phase2"] .game-guide.open .gg-cta{
  color:var(--pd-text) !important;
  background:var(--pd-surface) !important;
}

/* Body sections */
html[data-theme="phase2"] .game-guide .gg-body{
  background:transparent !important;
}
html[data-theme="phase2"] .game-guide .gg-body-inner{
  padding:0 18px 18px !important;
}
html[data-theme="phase2"] .game-guide .gg-content{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
  background:transparent !important;
}
@media (max-width: 900px){
  html[data-theme="phase2"] .game-guide .gg-content{ grid-template-columns:1fr; }
}
html[data-theme="phase2"] .game-guide .gg-section{
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-md) !important;
  padding:14px !important;
}
html[data-theme="phase2"] .game-guide .gg-section h4{
  display:flex; align-items:center; gap:8px;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  color:var(--pd-text) !important;
  margin:0 0 10px !important;
  letter-spacing:.02em;
  border:none !important;
  background:none !important;
  -webkit-text-fill-color:var(--pd-text) !important;
}
html[data-theme="phase2"] .game-guide .gg-section-num{
  display:inline-grid; place-items:center;
  width:22px; height:22px;
  border-radius:6px;
  background:var(--pd-blue) !important;
  color:#fff !important;
  font-size:13px; font-weight:800;
  flex-shrink:0;
}
html[data-theme="phase2"] .game-guide .gg-list{
  margin:0 !important; padding:0 0 0 18px !important;
  display:flex; flex-direction:column;
  gap:8px;
  list-style-position:outside;
  list-style-type:decimal;
}
html[data-theme="phase2"] .game-guide .gg-list li{
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  line-height:1.5;
  color:var(--pd-text) !important;
}
html[data-theme="phase2"] .game-guide .gg-list li strong{
  color:var(--pd-blue-accent) !important;
  font-weight:700;
}
html[data-theme="phase2"] .game-guide .gg-payouts{
  display:flex; flex-direction:column;
  gap:4px;
}
html[data-theme="phase2"] .game-guide .gg-payout-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 10px;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
}
html[data-theme="phase2"] .game-guide .gg-pay-label{
  color:var(--pd-text-mute) !important;
  font-size:14px;
  font-weight:600;
}
html[data-theme="phase2"] .game-guide .gg-pay-mult{
  color:var(--pd-text) !important;
  font-size:15px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   PHASE 2 — SHARED GAME-ROUTE PRIMITIVES
   Reused across crash / blackjack / mines / dice / slots / etc.
   Slim header, matte glass control panels, packdraw bet-input.
   Each game then adds its own per-section overrides below.
   ============================================================ */

/* Game-shell wrapper — full-width container with consistent padding */
html[data-theme="phase2"] section.route[data-game-skin] .game-shell,
html[data-theme="phase2"] section[data-route="crash"] .game-shell,
html[data-theme="phase2"] section[data-route="blackjack"] .game-shell,
html[data-theme="phase2"] section[data-route="mines"] .game-shell,
html[data-theme="phase2"] section[data-route="dice"] .game-shell,
html[data-theme="phase2"] section[data-route="slots"] .game-shell,
html[data-theme="phase2"] section[data-route="plinko"] .game-shell,
html[data-theme="phase2"] section[data-route="limbo"] .game-shell{
  max-width:1280px;
  margin:0 auto;
  padding:20px 28px 48px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Slim header — hide the gh-art SVG, restyle title + status + fairness */
html[data-theme="phase2"] section[data-route="crash"] .gh-art,
html[data-theme="phase2"] section[data-route="blackjack"] .gh-art,
html[data-theme="phase2"] section[data-route="mines"] .gh-art,
html[data-theme="phase2"] section[data-route="dice"] .gh-art,
html[data-theme="phase2"] section[data-route="slots"] .gh-art,
html[data-theme="phase2"] section[data-route="plinko"] .gh-art,
html[data-theme="phase2"] section[data-route="limbo"] .gh-art{
  display:none !important;
}
html[data-theme="phase2"] section[data-route="crash"] .game-header,
html[data-theme="phase2"] section[data-route="blackjack"] .game-header,
html[data-theme="phase2"] section[data-route="mines"] .game-header,
html[data-theme="phase2"] section[data-route="dice"] .game-header,
html[data-theme="phase2"] section[data-route="slots"] .game-header,
html[data-theme="phase2"] section[data-route="plinko"] .game-header,
html[data-theme="phase2"] section[data-route="limbo"] .game-header{
  display:flex !important;
  align-items:center;
  gap:14px;
  padding:0 0 14px !important;
  margin-bottom:14px !important;
  border-bottom:1px solid var(--pd-line) !important;
  background:transparent !important;
  min-height:auto !important;
}
html[data-theme="phase2"] section[data-route="crash"] .game-title,
html[data-theme="phase2"] section[data-route="blackjack"] .game-title,
html[data-theme="phase2"] section[data-route="mines"] .game-title,
html[data-theme="phase2"] section[data-route="dice"] .game-title,
html[data-theme="phase2"] section[data-route="slots"] .game-title,
html[data-theme="phase2"] section[data-route="plinko"] .game-title,
html[data-theme="phase2"] section[data-route="limbo"] .game-title{
  font-family:'Urbanist',sans-serif !important;
  font-size:22px !important;
  font-weight:800 !important;
  color:var(--pd-text) !important;
  margin:0 !important;
  letter-spacing:.01em;
}
html[data-theme="phase2"] section[data-route="crash"] .game-status,
html[data-theme="phase2"] section[data-route="blackjack"] .game-status,
html[data-theme="phase2"] section[data-route="mines"] .game-status,
html[data-theme="phase2"] section[data-route="dice"] .game-status,
html[data-theme="phase2"] section[data-route="slots"] .game-status,
html[data-theme="phase2"] section[data-route="plinko"] .game-status,
html[data-theme="phase2"] section[data-route="limbo"] .game-status{
  font-family:'Urbanist',sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.08em;
  color:var(--pd-text-mute) !important;
  background:transparent !important;
  padding:0 !important;
  border:none !important;
  margin-left:auto;
}
html[data-theme="phase2"] section[data-route="crash"] .fair-pill,
html[data-theme="phase2"] section[data-route="blackjack"] .fair-pill,
html[data-theme="phase2"] section[data-route="mines"] .fair-pill,
html[data-theme="phase2"] section[data-route="dice"] .fair-pill,
html[data-theme="phase2"] section[data-route="slots"] .fair-pill,
html[data-theme="phase2"] section[data-route="plinko"] .fair-pill,
html[data-theme="phase2"] section[data-route="limbo"] .fair-pill{
  height:30px !important;
  padding:0 10px 0 8px !important;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--pd-text-mute) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="crash"] .fair-pill:hover,
html[data-theme="phase2"] section[data-route="blackjack"] .fair-pill:hover,
html[data-theme="phase2"] section[data-route="mines"] .fair-pill:hover,
html[data-theme="phase2"] section[data-route="dice"] .fair-pill:hover,
html[data-theme="phase2"] section[data-route="slots"] .fair-pill:hover,
html[data-theme="phase2"] section[data-route="plinko"] .fair-pill:hover,
html[data-theme="phase2"] section[data-route="limbo"] .fair-pill:hover{
  color:var(--pd-text) !important;
}

/* Shared bet-input — packdraw matte. Same fix as upgrader (no fixed
   height, allow flex-wrap, .bet-input button is matte chip). */
html[data-theme="phase2"] section[data-route="crash"] .bet-input,
html[data-theme="phase2"] section[data-route="blackjack"] .bet-input,
html[data-theme="phase2"] section[data-route="mines"] .bet-input,
html[data-theme="phase2"] section[data-route="dice"] .bet-input,
html[data-theme="phase2"] section[data-route="slots"] .bet-input,
html[data-theme="phase2"] section[data-route="plinko"] .bet-input,
html[data-theme="phase2"] section[data-route="limbo"] .bet-input{
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:8px 10px !important;
  display:flex !important; align-items:center;
  gap:6px !important;
  flex-wrap:wrap !important;
  height:auto !important;
  min-height:42px;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="crash"] .bet-input:focus-within,
html[data-theme="phase2"] section[data-route="blackjack"] .bet-input:focus-within,
html[data-theme="phase2"] section[data-route="mines"] .bet-input:focus-within,
html[data-theme="phase2"] section[data-route="dice"] .bet-input:focus-within,
html[data-theme="phase2"] section[data-route="slots"] .bet-input:focus-within,
html[data-theme="phase2"] section[data-route="plinko"] .bet-input:focus-within,
html[data-theme="phase2"] section[data-route="limbo"] .bet-input:focus-within{
  border-color:var(--pd-blue) !important;
  box-shadow:0 0 0 3px var(--pd-blue-glow) !important;
}
html[data-theme="phase2"] section[data-route="crash"] .bet-input input,
html[data-theme="phase2"] section[data-route="blackjack"] .bet-input input,
html[data-theme="phase2"] section[data-route="mines"] .bet-input input,
html[data-theme="phase2"] section[data-route="dice"] .bet-input input,
html[data-theme="phase2"] section[data-route="slots"] .bet-input input,
html[data-theme="phase2"] section[data-route="plinko"] .bet-input input,
html[data-theme="phase2"] section[data-route="limbo"] .bet-input input{
  background:transparent !important;
  border:none !important;
  color:var(--pd-text) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  flex:1 1 80px;
  min-width:60px;
}
html[data-theme="phase2"] section[data-route="crash"] .bet-input button,
html[data-theme="phase2"] section[data-route="blackjack"] .bet-input button,
html[data-theme="phase2"] section[data-route="mines"] .bet-input button,
html[data-theme="phase2"] section[data-route="dice"] .bet-input button,
html[data-theme="phase2"] section[data-route="slots"] .bet-input button,
html[data-theme="phase2"] section[data-route="plinko"] .bet-input button,
html[data-theme="phase2"] section[data-route="limbo"] .bet-input button{
  height:30px !important;
  padding:0 10px !important;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  cursor:pointer;
  box-shadow:none !important;
  flex:0 0 auto;
  background-image:none !important;
}
html[data-theme="phase2"] section[data-route="crash"] .bet-input button:hover,
html[data-theme="phase2"] section[data-route="blackjack"] .bet-input button:hover,
html[data-theme="phase2"] section[data-route="mines"] .bet-input button:hover,
html[data-theme="phase2"] section[data-route="dice"] .bet-input button:hover,
html[data-theme="phase2"] section[data-route="slots"] .bet-input button:hover,
html[data-theme="phase2"] section[data-route="plinko"] .bet-input button:hover,
html[data-theme="phase2"] section[data-route="limbo"] .bet-input button:hover{
  color:var(--pd-text) !important;
}
html[data-theme="phase2"] section[data-route="crash"] .bet-input .suffix,
html[data-theme="phase2"] section[data-route="blackjack"] .bet-input .suffix,
html[data-theme="phase2"] section[data-route="mines"] .bet-input .suffix,
html[data-theme="phase2"] section[data-route="dice"] .bet-input .suffix,
html[data-theme="phase2"] section[data-route="slots"] .bet-input .suffix,
html[data-theme="phase2"] section[data-route="plinko"] .bet-input .suffix,
html[data-theme="phase2"] section[data-route="limbo"] .bet-input .suffix{
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif;
  font-weight:700;
  font-size:16px;
}

/* Shared label */
html[data-theme="phase2"] section[data-route="crash"] .control-group label,
html[data-theme="phase2"] section[data-route="blackjack"] .control-group label,
html[data-theme="phase2"] section[data-route="mines"] .control-group label,
html[data-theme="phase2"] section[data-route="dice"] .control-group label,
html[data-theme="phase2"] section[data-route="slots"] .control-group label,
html[data-theme="phase2"] section[data-route="plinko"] .control-group label,
html[data-theme="phase2"] section[data-route="limbo"] .control-group label{
  font-family:'Urbanist',sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.08em;
  color:var(--pd-text-mute) !important;
  text-transform:uppercase;
  margin-bottom:8px;
  display:block;
}

/* Shared bet-presets and bet-usd-readout (siblings of .bet-input) */
html[data-theme="phase2"] section[data-route="crash"] .bet-presets,
html[data-theme="phase2"] section[data-route="blackjack"] .bet-presets,
html[data-theme="phase2"] section[data-route="mines"] .bet-presets,
html[data-theme="phase2"] section[data-route="dice"] .bet-presets,
html[data-theme="phase2"] section[data-route="slots"] .bet-presets,
html[data-theme="phase2"] section[data-route="plinko"] .bet-presets,
html[data-theme="phase2"] section[data-route="limbo"] .bet-presets{
  display:flex !important; gap:6px !important; margin-top:6px !important; flex-wrap:wrap;
}
html[data-theme="phase2"] section[data-route="crash"] .bet-presets button,
html[data-theme="phase2"] section[data-route="blackjack"] .bet-presets button,
html[data-theme="phase2"] section[data-route="mines"] .bet-presets button,
html[data-theme="phase2"] section[data-route="dice"] .bet-presets button,
html[data-theme="phase2"] section[data-route="slots"] .bet-presets button,
html[data-theme="phase2"] section[data-route="plinko"] .bet-presets button,
html[data-theme="phase2"] section[data-route="limbo"] .bet-presets button{
  flex:1 1 0 !important; min-width:0 !important;
  height:32px !important; padding:0 10px !important;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important; font-weight:700 !important;
  cursor:pointer; box-shadow:none !important;
  background-image:none !important;
  transform:none !important;
}
html[data-theme="phase2"] section[data-route="crash"] .bet-presets button:hover,
html[data-theme="phase2"] section[data-route="blackjack"] .bet-presets button:hover,
html[data-theme="phase2"] section[data-route="mines"] .bet-presets button:hover,
html[data-theme="phase2"] section[data-route="dice"] .bet-presets button:hover,
html[data-theme="phase2"] section[data-route="slots"] .bet-presets button:hover,
html[data-theme="phase2"] section[data-route="plinko"] .bet-presets button:hover,
html[data-theme="phase2"] section[data-route="limbo"] .bet-presets button:hover{
  color:var(--pd-text) !important; background:var(--pd-bg-2) !important;
}
html[data-theme="phase2"] section[data-route="crash"] .bet-presets button.active,
html[data-theme="phase2"] section[data-route="blackjack"] .bet-presets button.active,
html[data-theme="phase2"] section[data-route="mines"] .bet-presets button.active,
html[data-theme="phase2"] section[data-route="dice"] .bet-presets button.active,
html[data-theme="phase2"] section[data-route="slots"] .bet-presets button.active,
html[data-theme="phase2"] section[data-route="plinko"] .bet-presets button.active,
html[data-theme="phase2"] section[data-route="limbo"] .bet-presets button.active{
  background:var(--pd-blue) !important; color:#fff !important; border-color:var(--pd-blue) !important;
}
html[data-theme="phase2"] section[data-route="crash"] .bet-usd-readout,
html[data-theme="phase2"] section[data-route="blackjack"] .bet-usd-readout,
html[data-theme="phase2"] section[data-route="mines"] .bet-usd-readout,
html[data-theme="phase2"] section[data-route="dice"] .bet-usd-readout,
html[data-theme="phase2"] section[data-route="slots"] .bet-usd-readout,
html[data-theme="phase2"] section[data-route="plinko"] .bet-usd-readout,
html[data-theme="phase2"] section[data-route="limbo"] .bet-usd-readout{
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important; font-weight:600;
  color:var(--pd-text-mute) !important;
  text-align:right; margin-top:6px;
}

/* MANUAL/AUTO tab strip (.cp-panel-tabs) — packdraw matte tabs */
html[data-theme="phase2"] .cp-panel-tabs{
  display:inline-flex !important;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:4px !important;
  gap:2px !important;
  margin-bottom:12px;
}
html[data-theme="phase2"] .cp-panel-tab{
  height:30px !important;
  padding:0 14px !important;
  background:transparent !important;
  border:none !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:none !important;
  background-image:none !important;
}
html[data-theme="phase2"] .cp-panel-tab.is-active{
  background:var(--pd-surface) !important;
  color:var(--pd-text) !important;
}

/* Stats rows (history + live feed below the game stage) — matte cards */
html[data-theme="phase2"] section[data-route="crash"] .stats-row,
html[data-theme="phase2"] section[data-route="blackjack"] .stats-row,
html[data-theme="phase2"] section[data-route="mines"] .stats-row,
html[data-theme="phase2"] section[data-route="dice"] .stats-row,
html[data-theme="phase2"] section[data-route="slots"] .stats-row,
html[data-theme="phase2"] section[data-route="plinko"] .stats-row,
html[data-theme="phase2"] section[data-route="limbo"] .stats-row{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:14px 0 0 !important;
}
@media (max-width: 760px){
  html[data-theme="phase2"] section[data-route="crash"] .stats-row,
  html[data-theme="phase2"] section[data-route="blackjack"] .stats-row,
  html[data-theme="phase2"] section[data-route="mines"] .stats-row,
  html[data-theme="phase2"] section[data-route="dice"] .stats-row,
  html[data-theme="phase2"] section[data-route="slots"] .stats-row,
  html[data-theme="phase2"] section[data-route="plinko"] .stats-row,
  html[data-theme="phase2"] section[data-route="limbo"] .stats-row{ grid-template-columns:1fr !important; }
}
html[data-theme="phase2"] section[data-route="crash"] .stats-col,
html[data-theme="phase2"] section[data-route="blackjack"] .stats-col,
html[data-theme="phase2"] section[data-route="mines"] .stats-col,
html[data-theme="phase2"] section[data-route="dice"] .stats-col,
html[data-theme="phase2"] section[data-route="slots"] .stats-col,
html[data-theme="phase2"] section[data-route="plinko"] .stats-col,
html[data-theme="phase2"] section[data-route="limbo"] .stats-col{
  /* Borderless, recessed "well" — reads as carved INTO the page rather
     than a raised card. Darker than the body bg (--pd-bg-0) + an inset
     shadow sells the embed; no border, soft xl radius for the digital
     feel. The row list inside carries the structure. */
  background:var(--pd-bg-1) !important;
  border:none !important;
  border-radius:var(--pd-radius-xl) !important;
  padding:16px 16px 14px !important;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.02) !important;
}
html[data-theme="phase2"] section[data-route="crash"] .stats-title,
html[data-theme="phase2"] section[data-route="blackjack"] .stats-title,
html[data-theme="phase2"] section[data-route="mines"] .stats-title,
html[data-theme="phase2"] section[data-route="dice"] .stats-title,
html[data-theme="phase2"] section[data-route="slots"] .stats-title,
html[data-theme="phase2"] section[data-route="plinko"] .stats-title,
html[data-theme="phase2"] section[data-route="limbo"] .stats-title{
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important; font-weight:700 !important;
  letter-spacing:.08em;
  color:var(--pd-text-mute) !important;
  text-transform:uppercase;
}

/* ============================================================
   PHASE 2 — IN-GAME FEED PANELS (history + live feed)
   Borderless recessed wells with a crisp "digital" list inside.
   Scoped to .stats-list / .stats-col / .stats-head (the per-game
   sidebar) so the profile + transactions history modals — which
   use .hist-table-body .hist-row, NOT .stats-list — are untouched.
   One block reskins every game's feed at once (shared classes).
   ============================================================ */

/* Panel: kill the legacy brand accent stripe + heavy head hairline. */
html[data-theme="phase2"] .stats-col::before{ display:none !important; }
html[data-theme="phase2"] .stats-head{
  border-bottom:1px solid rgba(255,255,255,.05) !important;
  padding-bottom:12px !important;
}
html[data-theme="phase2"] .stats-meta{
  font-family:'Urbanist',sans-serif !important;
  font-size:12px !important; font-weight:800 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase;
  color:var(--pd-text-mute) !important;
}
html[data-theme="phase2"] .stats-meta.live{ color:var(--pd-green) !important; }
html[data-theme="phase2"] .stats-col .live-dot-mini{
  background:var(--pd-green) !important; box-shadow:0 0 8px var(--pd-green) !important;
}
html[data-theme="phase2"] .stats-list{ gap:8px !important; max-height:none !important; }
html[data-theme="phase2"] .stats-list::-webkit-scrollbar-thumb{
  background:var(--pd-line-hover) !important; border-radius:2px;
}
html[data-theme="phase2"] .stats-empty{
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
  font-style:normal !important; font-weight:600 !important;
  font-size:15px !important; padding:34px 16px !important;
}

/* Row chrome: flat translucent chip, NO border, soft hover, and a
   crisp outcome rail down the left edge. Both history + live rows. */
html[data-theme="phase2"] .stats-list .hist-row,
html[data-theme="phase2"] .stats-list .lead-row{
  position:relative;
  display:grid !important;
  grid-template-columns:40px minmax(0,1fr) auto !important;
  column-gap:14px !important;
  align-items:center;
  min-height:60px;                       /* fits the 40px tile + padding, no clip */
  border:none !important;
  background:rgba(255,255,255,.03) !important;
  border-radius:13px !important;
  padding:9px 16px 9px 18px !important;   /* 18px left clears the outcome rail */
  overflow:hidden;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transition:background .16s ease !important;
}
html[data-theme="phase2"] .stats-list .hist-row:hover,
html[data-theme="phase2"] .stats-list .lead-row:hover{
  background:rgba(255,255,255,.05) !important;
  transform:none !important;            /* kill the legacy translateX pulse */
  box-shadow:none !important; border:none !important;
}
/* Outcome rail — absolute so it never disturbs the row's grid columns. */
html[data-theme="phase2"] .stats-list .hist-row::before,
html[data-theme="phase2"] .stats-list .lead-row::before{
  content:""; position:absolute; left:0; top:9px; bottom:9px;
  width:4px; border-radius:0 4px 4px 0;
  background:var(--pd-text-mute); opacity:.4;
  box-shadow:none !important;
}
html[data-theme="phase2"] .stats-list .hist-row.win::before,
html[data-theme="phase2"] .stats-list .lead-row.win::before{ background:var(--pd-green) !important; opacity:1; box-shadow:0 0 10px rgba(72,187,120,.5) !important; }
html[data-theme="phase2"] .stats-list .hist-row.loss::before,
html[data-theme="phase2"] .stats-list .lead-row.loss::before{ background:var(--pd-red) !important; opacity:1; box-shadow:0 0 10px rgba(235,75,75,.45) !important; }
html[data-theme="phase2"] .stats-list .hist-row.push::before,
html[data-theme="phase2"] .stats-list .lead-row.push::before{ background:var(--pd-yellow) !important; opacity:1; box-shadow:0 0 10px rgba(228,174,51,.4) !important; }
/* Faint result wash (also overrides the misleading gold/silver/bronze
   podium tints on the first 3 live rows — this is a chronological feed,
   not a ranked board). */
html[data-theme="phase2"] .stats-list .hist-row.win,
html[data-theme="phase2"] .stats-list .lead-row.win{ background:rgba(72,187,120,.06) !important; }
html[data-theme="phase2"] .stats-list .hist-row.loss,
html[data-theme="phase2"] .stats-list .lead-row.loss{ background:rgba(235,75,75,.055) !important; }
html[data-theme="phase2"] .stats-list .hist-row.push,
html[data-theme="phase2"] .stats-list .lead-row.push{ background:rgba(228,174,51,.06) !important; }

/* History row icon — per-game tile: crisp flat glyph in the game's
   accent on a glassy square. Replaces the harvested header SVG that
   muddied to a featureless blue block at this size. --g is set inline
   per row in renderHistory(). */
html[data-theme="phase2"] .stats-list .hist-row .hr-icon{
  position:relative;
  width:40px !important; height:40px !important;
  border-radius:11px !important;
  border:none !important;
  background:var(--pd-bg-0) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.08) !important;
  color:#fff !important;
  overflow:hidden;
}
/* Accent fill — tints the tile with the game's colour (--g, set inline in
   renderHistory) so each game reads as its own; the glyph sits crisp white
   on top for contrast. */
html[data-theme="phase2"] .stats-list .hist-row .hr-icon::before{
  content:""; position:absolute; inset:0;
  background:var(--g, var(--pd-blue-accent)); opacity:.22;
}
html[data-theme="phase2"] .stats-list .hist-row .hr-icon svg{
  position:relative; z-index:1;
  width:23px !important; height:23px !important; display:block;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* Row typography — Urbanist, tabular figures, semantic outcome colours. */
html[data-theme="phase2"] .stats-list .hr-label,
html[data-theme="phase2"] .stats-list .lead-name{
  font-family:'Urbanist',sans-serif !important;
  font-size:16px !important; font-weight:800 !important;
  letter-spacing:.005em !important; color:var(--pd-text) !important;
  line-height:1.25 !important;
}
html[data-theme="phase2"] .stats-list .hr-time,
html[data-theme="phase2"] .stats-list .lead-bet{
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important; font-weight:600 !important;
  color:var(--pd-text-mute) !important; line-height:1.3 !important;
}
html[data-theme="phase2"] .stats-list .hr-profit,
html[data-theme="phase2"] .stats-list .lead-pay{
  display:inline-flex !important; align-items:center; gap:5px;
  font-family:'Urbanist',sans-serif !important;
  font-weight:800 !important; font-size:15px !important;
  letter-spacing:.005em !important; text-shadow:none !important;
  font-variant-numeric:tabular-nums; color:var(--pd-text) !important;
  justify-self:end;
}
html[data-theme="phase2"] .stats-list .hr-profit svg,
html[data-theme="phase2"] .stats-list .hr-profit img,
html[data-theme="phase2"] .stats-list .lead-pay svg,
html[data-theme="phase2"] .stats-list .lead-pay img{ width:14px !important; height:14px !important; }
html[data-theme="phase2"] .stats-list .hist-row.win  .hr-profit,
html[data-theme="phase2"] .stats-list .lead-pay.win{ color:var(--pd-green) !important; }
html[data-theme="phase2"] .stats-list .hist-row.loss .hr-profit,
html[data-theme="phase2"] .stats-list .lead-pay.loss{ color:var(--pd-red) !important; }
html[data-theme="phase2"] .stats-list .hist-row.push .hr-profit,
html[data-theme="phase2"] .stats-list .lead-pay.push{ color:var(--pd-text-mute) !important; }
/* Live-feed avatar — match the 40px icon footprint, subtle ring. */
html[data-theme="phase2"] .stats-list .lead-avatar{
  width:40px !important; height:40px !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
html[data-theme="phase2"] .stats-list .lead-avatar-emoji{ font-size:18px !important; }

/* Per-game icon tile on the GLOBAL live feed — sits between the player meta
   and the payout so each row reads "who · what game · result". Mirrors the
   history row's .hr-icon: glassy square, game accent via --g (set inline in
   renderGlobalFeed), crisp white glyph. The 4th grid column is added to
   .lead-row only — history rows stay 3-col. */
html[data-theme="phase2"] .stats-list .lead-row{
  grid-template-columns:40px minmax(0,1fr) auto auto !important;
}
html[data-theme="phase2"] .stats-list .lead-game{
  position:relative;
  width:34px; height:34px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:var(--pd-bg-0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.08);
  color:#fff; overflow:hidden;
}
html[data-theme="phase2"] .stats-list .lead-game::before{
  content:""; position:absolute; inset:0;
  background:var(--g, var(--pd-blue-accent)); opacity:.22;
}
html[data-theme="phase2"] .stats-list .lead-game svg{
  position:relative; z-index:1;
  width:19px; height:19px; display:block;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* Mobile — tighten the chip + icon a touch so nothing crowds at <480px.
   (The two-column stats-row already collapses to one column at <=760px.) */
@media (max-width:480px){
  /* Cap the list so two stacked feeds don't take over the phone page;
     it scrolls internally past ~6 rows. Desktop stays uncapped to fill
     the otherwise-empty page. */
  html[data-theme="phase2"] .stats-list{ max-height:360px !important; }
  html[data-theme="phase2"] .stats-list .hist-row,
  html[data-theme="phase2"] .stats-list .lead-row{
    grid-template-columns:36px minmax(0,1fr) auto !important;
    column-gap:11px !important; min-height:54px;
    padding:8px 13px 8px 15px !important; border-radius:11px !important;
  }
  /* Live-feed rows keep the 4th column (game tile) on mobile too — the
     2-col stats-row collapses to full width here, so there's room. */
  html[data-theme="phase2"] .stats-list .lead-row{
    grid-template-columns:36px minmax(0,1fr) auto auto !important;
  }
  html[data-theme="phase2"] .stats-list .lead-game{ width:30px; height:30px; border-radius:9px; }
  html[data-theme="phase2"] .stats-list .lead-game svg{ width:17px; height:17px; }
  html[data-theme="phase2"] .stats-list .hist-row .hr-icon,
  html[data-theme="phase2"] .stats-list .lead-avatar{ width:36px !important; height:36px !important; }
  html[data-theme="phase2"] .stats-list .hist-row .hr-icon svg{ width:21px !important; height:21px !important; }
  html[data-theme="phase2"] .stats-list .hr-label,
  html[data-theme="phase2"] .stats-list .lead-name{ font-size:13.5px !important; }
  html[data-theme="phase2"] .stats-list .hr-profit,
  html[data-theme="phase2"] .stats-list .lead-pay{ font-size:16px !important; }
}

/* ------------------------------------------------------------
   PHASE 2 — FEED MOTION
   Premium entry animation for the in-game feeds. Both renderers
   (renderLeaders / renderHistory) replace the list via innerHTML,
   so JS tags the genuinely-new top row with .feed-row-enter and,
   on first paint, staggers every row with .feed-row-in (delay set
   inline). Resting state = visible/no-transform, so disabling the
   animation (reduced-motion) can never leave a row stuck hidden.
   ------------------------------------------------------------ */

/* New round drops in at the top: slides down + settles with a soft
   overshoot, while its outcome rail wipes open from the centre. */
html[data-theme="phase2"] .stats-list .lead-row.feed-row-enter,
html[data-theme="phase2"] .stats-list .hist-row.feed-row-enter{
  animation:feedRowEnter .46s cubic-bezier(.22,1,.36,1) both;
  z-index:1;
}
html[data-theme="phase2"] .stats-list .lead-row.feed-row-enter::before,
html[data-theme="phase2"] .stats-list .hist-row.feed-row-enter::before{
  animation:feedRailIn .56s cubic-bezier(.22,1,.36,1) both;
}
/* One-shot sheen that sweeps across the fresh row, then clears. */
html[data-theme="phase2"] .stats-list .lead-row.feed-row-enter::after,
html[data-theme="phase2"] .stats-list .hist-row.feed-row-enter::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:2;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,0) 70%);
  background-size:220% 100%;
  animation:feedRowSheen .7s ease-out both;
}
@keyframes feedRowEnter{
  0%{   opacity:0; transform:translateY(-16px) scale(.975); }
  55%{  opacity:1; }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes feedRailIn{
  0%{   transform:scaleY(.12); opacity:.25; }
  100%{ transform:scaleY(1);   opacity:1; }
}
@keyframes feedRowSheen{
  0%{   background-position:140% 0; opacity:0; }
  35%{  opacity:1; }
  100%{ background-position:-40% 0; opacity:0; }
}

/* First paint: the whole feed eases up in a gentle stagger. */
html[data-theme="phase2"] .stats-list .lead-row.feed-row-in,
html[data-theme="phase2"] .stats-list .hist-row.feed-row-in{
  animation:feedRowStagger .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes feedRowStagger{
  0%{   opacity:0; transform:translateY(10px); }
  100%{ opacity:1; transform:translateY(0); }
}

/* Accessibility — keep the layout, drop the motion. Scoped to the
   feed row classes only (no universal selector inside the query, per
   past iOS reduced-motion regressions). */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] .stats-list .lead-row.feed-row-enter,
  html[data-theme="phase2"] .stats-list .hist-row.feed-row-enter,
  html[data-theme="phase2"] .stats-list .lead-row.feed-row-in,
  html[data-theme="phase2"] .stats-list .hist-row.feed-row-in,
  html[data-theme="phase2"] .stats-list .lead-row.feed-row-enter::before,
  html[data-theme="phase2"] .stats-list .hist-row.feed-row-enter::before,
  html[data-theme="phase2"] .stats-list .lead-row.feed-row-enter::after,
  html[data-theme="phase2"] .stats-list .hist-row.feed-row-enter::after{
    animation:none !important;
  }
}

/* ============================================================
   PHASE 2 — CRASH
   ============================================================ */

html[data-theme="phase2"] section[data-route="crash"] .crash-panel,
html[data-theme="phase2"] section[data-route="crash"] .crash-controls,
html[data-theme="phase2"] section[data-route="crash"] .crash-players{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:18px !important;
  box-shadow:none !important;
  background-image:none !important;
}

html[data-theme="phase2"] section[data-route="crash"] .crash-controls{
  display:flex !important; flex-direction:column;
  gap:14px;
}

/* PLACE BET / CASH OUT / locked states — green primary */
html[data-theme="phase2"] section[data-route="crash"] #crash-action,
html[data-theme="phase2"] section[data-route="crash"] .crash-bet-btn{
  background:var(--pd-green) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  height:48px !important;
  padding:0 18px !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.04em;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="crash"] #crash-action:hover,
html[data-theme="phase2"] section[data-route="crash"] .crash-bet-btn:hover{
  background:var(--pd-green-hover) !important;
}
html[data-theme="phase2"] section[data-route="crash"] #crash-action .btn-shine,
html[data-theme="phase2"] section[data-route="crash"] .crash-bet-btn .btn-shine{ display:none !important; }

/* Players list */
html[data-theme="phase2"] section[data-route="crash"] .cp-head{
  display:flex !important; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
html[data-theme="phase2"] section[data-route="crash"] .cp-title{
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important; font-weight:700 !important;
  letter-spacing:.08em;
  color:var(--pd-text-mute) !important;
}
html[data-theme="phase2"] section[data-route="crash"] .cp-count{
  background:var(--pd-bg-1) !important;
  color:var(--pd-text) !important;
  padding:2px 8px;
  border-radius:6px;
  font-family:'Urbanist',sans-serif;
  font-size:14px; font-weight:700;
}
html[data-theme="phase2"] section[data-route="crash"] .cp-empty{
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px;
  text-align:center;
  padding:18px 8px;
}

/* History bar (recent multiplier pills above the board) */
html[data-theme="phase2"] section[data-route="crash"] .history-bar{
  background:transparent !important;
  border:none !important;
  padding:0 0 12px !important;
  display:flex !important; gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
}
html[data-theme="phase2"] section[data-route="crash"] .history-bar::-webkit-scrollbar{ display:none; }
html[data-theme="phase2"] section[data-route="crash"] .history-bar > *{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  padding:5px 10px !important;
  box-shadow:none !important;
  flex-shrink:0;
}

/* EOS block + network pill */
html[data-theme="phase2"] section[data-route="crash"] .crash-eos-row{
  display:flex !important; align-items:center; gap:8px;
  margin-bottom:12px;
}
html[data-theme="phase2"] section[data-route="crash"] .crash-eos-block,
html[data-theme="phase2"] section[data-route="crash"] .crash-network{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:6px 10px !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  color:var(--pd-text-mute) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="crash"] .ceb-label,
html[data-theme="phase2"] section[data-route="crash"] .cn-label{
  color:var(--pd-text-mute) !important;
  font-weight:700;
  letter-spacing:.04em;
}
html[data-theme="phase2"] section[data-route="crash"] .ceb-num{
  color:var(--pd-text) !important;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
html[data-theme="phase2"] section[data-route="crash"] .cn-dot{
  width:8px; height:8px;
  background:var(--pd-green);
  border-radius:50%;
  box-shadow:0 0 8px var(--pd-green);
}

/* Crash board frame — matte rounded card. The canvas + sky + multi
   live INSIDE and we don't touch them (game-critical visuals). */
html[data-theme="phase2"] section[data-route="crash"] .crash-board{
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  /* Lit-panel depth so the board reads as a recessed surface under light,
     matching the .pd-card treatment — not a flat sticker, not an arcade glow. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 16px 40px rgba(0,0,0,.45) !important;
  overflow:hidden;
}

/* ============================================================
   PHASE 2 — BLACKJACK
   ============================================================ */

html[data-theme="phase2"] section[data-route="blackjack"] .bj-controls{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:18px !important;
  display:flex !important; flex-direction:column;
  gap:14px;
  box-shadow:none !important;
  background-image:none !important;
}

/* DEAL = primary green CTA */
html[data-theme="phase2"] section[data-route="blackjack"] #bj-deal,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-deal{
  background:var(--pd-green) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  height:48px !important;
  padding:0 18px !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.04em;
  box-shadow:none !important;
  width:100%;
}
html[data-theme="phase2"] section[data-route="blackjack"] #bj-deal:hover,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-deal:hover{
  background:var(--pd-green-hover) !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] #bj-deal .btn-shine,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-deal .btn-shine{ display:none !important; }

/* In-hand action buttons: HIT/STAND/DOUBLE/INSURE/SURRENDER. Phase 1
   arranges these in a 2x2-ish grid via width:calc(50% - 4px) + margins.
   We restyle each in packdraw matte; DOUBLE keeps a stronger highlight
   since it's the "big bet" option. */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-hit,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-stand,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-double,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-insure,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-surrender{
  background:var(--pd-surface) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  color:var(--pd-text) !important;
  height:42px !important;
  padding:0 14px !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.04em;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-hit:hover,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-stand:hover,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-double:hover,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-insure:hover,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-surrender:hover{
  background:var(--pd-surface-2) !important;
  border-color:var(--pd-line-hover) !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-double{
  background:var(--pd-blue) !important;
  border-color:var(--pd-blue) !important;
  color:#fff !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-btn-double:hover{
  background:var(--pd-blue-hover) !important;
  border-color:var(--pd-blue-hover) !important;
}

/* "How to play" subtle text link below action stack */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-howto-trigger{
  display:inline-flex !important; align-items:center; gap:6px;
  background:transparent !important;
  border:none !important;
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  cursor:pointer;
  padding:4px 8px !important;
  align-self:center;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-howto-trigger:hover{
  color:var(--pd-text) !important;
}

/* Felt — matte navy, no green casino felt, no decorative red borders */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-table{
  background:linear-gradient(180deg, var(--pd-bg-2), var(--pd-bg-1)) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:28px 24px !important;
  min-height:420px;
  display:flex !important; flex-direction:column; justify-content:space-between;
  position:relative;
  box-shadow:none !important;
}
/* Hide decorative suit-symbol corners + particles */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-suit,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-particles{
  display:none !important;
}
/* Deck at top-right of felt */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-deck{
  position:absolute; top:16px; right:18px;
  display:flex; flex-direction:column;
  width:30px; height:42px;
  pointer-events:none;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-deck-card{
  background:var(--pd-surface);
  border:1px solid var(--pd-line);
  border-radius:4px;
  position:absolute; inset:0;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-deck-card:nth-child(2){
  transform:translate(2px,2px);
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-deck-card:nth-child(3){
  transform:translate(4px,4px);
}

/* DEALER / YOU zones */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-zone{
  display:flex !important; flex-direction:column; align-items:center;
  gap:10px;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label{
  font-family:'Urbanist',sans-serif !important;
  font-size:13px !important; font-weight:700 !important;
  letter-spacing:.12em;
  color:var(--pd-text-mute) !important;
  text-transform:uppercase;
  background:transparent !important;
  padding:0 !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span{
  color:var(--pd-text) !important;
  font-weight:800;
  font-size:15px;
  letter-spacing:.04em;
}

/* Pays info text */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays{
  display:flex !important; flex-direction:column; align-items:center;
  gap:2px;
  font-family:'Urbanist',sans-serif !important;
  color:var(--pd-text-mute) !important;
  background:transparent !important;
  border:none !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays-main{
  font-size:15px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays-sub{
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
  opacity:.7;
  text-transform:uppercase;
}

/* Round-end result strip — repurposes .bj-pays (which during play shows
   the static "BLACKJACK PAYS 3 TO 2 · INSURANCE PAYS 2 TO 1" rules
   panel) into a persistent "YOU 21 vs DEALER 19 · YOU WIN +$50"
   display once a hand ends. Stays up until the next DEAL restores the
   default pays text. Colours are tied to outcome via the win/loss/push
   modifier classes app.js toggles in finish(). */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays.bj-pays-result{
  gap: 6px;
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(0,0,0,.32) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  animation: bjPaysResultIn .35s cubic-bezier(.16,1,.3,1);
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays.bj-pays-result .bj-pays-main{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays.bj-pays-result .bj-pays-sub{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .14em;
  opacity: 1;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays.bj-pays-win{
  border-color: rgba(74,222,128,.45) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 36px rgba(74,222,128,.22);
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays.bj-pays-win .bj-pays-sub{
  color: #4ade80 !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays.bj-pays-loss{
  border-color: rgba(248,113,113,.40) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 32px rgba(248,113,113,.18);
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays.bj-pays-loss .bj-pays-sub{
  color: #f87171 !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays.bj-pays-push .bj-pays-sub{
  color: var(--pd-text-mute) !important;
}
@keyframes bjPaysResultIn{
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

/* ============================================================
   PHASE 2 — MINES
   ============================================================ */

html[data-theme="phase2"] section[data-route="mines"] .mines-panel{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:18px !important;
  display:flex !important; flex-direction:column;
  gap:14px;
  box-shadow:none !important;
  background-image:none !important;
}

/* NEXT / TOTAL payout chip */
html[data-theme="phase2"] section[data-route="mines"] .payout-display{
  display:grid !important; grid-template-columns:1fr 1fr;
  gap:8px;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:12px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="mines"] .payout-display > div{
  display:flex !important; flex-direction:column;
  gap:2px;
  font-family:'Urbanist',sans-serif !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
}
html[data-theme="phase2"] section[data-route="mines"] .payout-display span{
  font-size:12px !important; font-weight:700 !important;
  letter-spacing:.1em;
  color:var(--pd-text-mute) !important;
  text-transform:uppercase;
}
html[data-theme="phase2"] section[data-route="mines"] .payout-display strong{
  font-size:15px !important; font-weight:800 !important;
  color:var(--pd-text) !important;
  font-variant-numeric:tabular-nums;
}

/* START GAME = green primary */
html[data-theme="phase2"] section[data-route="mines"] #mines-start{
  background:var(--pd-green) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  height:48px !important;
  padding:0 18px !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.04em;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="mines"] #mines-start:hover{
  background:var(--pd-green-hover) !important;
}
html[data-theme="phase2"] section[data-route="mines"] #mines-start .btn-shine{ display:none !important; }

/* CASHOUT — blue primary when enabled, muted when disabled */
html[data-theme="phase2"] section[data-route="mines"] #mines-cashout{
  background:var(--pd-blue) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  height:48px !important;
  padding:0 18px !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.04em;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="mines"] #mines-cashout:hover:not(:disabled){
  background:var(--pd-blue-hover) !important;
}
html[data-theme="phase2"] section[data-route="mines"] #mines-cashout:disabled{
  background:var(--pd-surface) !important;
  color:var(--pd-text-mute) !important;
  cursor:not-allowed;
  opacity:.6;
}
html[data-theme="phase2"] section[data-route="mines"] #mines-cashout .btn-shine{ display:none !important; }

/* 5x5 grid frame */
html[data-theme="phase2"] section[data-route="mines"] .mines-grid{
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:14px !important;
  display:grid !important;
  grid-template-columns:repeat(5, 1fr);
  grid-template-rows:repeat(5, 1fr);
  gap:8px;
  aspect-ratio:1;
  max-width:520px;
  margin:0 auto;
  box-shadow:none !important;
}

/* Each tile — matte navy, hover lift, no heavy 3D button look */
html[data-theme="phase2"] section[data-route="mines"] .mine-tile{
  background:var(--pd-surface) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .15s var(--pd-ease-spring),
             background .15s var(--pd-ease-smooth),
             border-color .15s var(--pd-ease-smooth) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="mines"] .mine-tile:not(.locked):hover{
  transform:translateY(-2px);
  background:var(--pd-surface-2) !important;
  border-color:var(--pd-line-hover) !important;
}
/* Gem reveal — gold tint */
html[data-theme="phase2"] section[data-route="mines"] .mine-tile.gem{
  background:radial-gradient(circle at 50% 40%, rgba(228,174,51,.4), var(--pd-bg-2) 80%) !important;
  border-color:var(--pd-yellow) !important;
}
/* Bomb reveal — red tint */
html[data-theme="phase2"] section[data-route="mines"] .mine-tile.bomb{
  background:radial-gradient(circle at 50% 40%, rgba(235,75,75,.45), var(--pd-bg-2) 80%) !important;
  border-color:var(--pd-red) !important;
}
/* Faded (locked / un-revealed after end-of-round) */
html[data-theme="phase2"] section[data-route="mines"] .mine-tile.faded{
  opacity:.4;
}

/* ============================================================
   PHASE 2 — SLOTS
   Most cabinet/marquee styling kept from Phase 1 Pass 3c (matte
   navy + gold rims). We re-skin the surrounding control panel
   and SPIN button to match packdraw, plus the auto-mode area.
   ============================================================ */

html[data-theme="phase2"] section[data-route="slots"] .slots-controls,
html[data-theme="phase2"] section[data-route="slots"] .auto-panel{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:18px !important;
  display:flex !important; flex-direction:column;
  gap:14px;
  box-shadow:none !important;
  background-image:none !important;
}

html[data-theme="phase2"] section[data-route="slots"] .cp-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:4px;
}

/* SPIN button — green primary */
html[data-theme="phase2"] section[data-route="slots"] #slots-spin{
  background:var(--pd-green) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  height:48px !important;
  padding:0 18px !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.04em;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="slots"] #slots-spin:hover{
  background:var(--pd-green-hover) !important;
}
html[data-theme="phase2"] section[data-route="slots"] #slots-spin .btn-shine{ display:none !important; }

/* Auto-stats display (SPINS / PROFIT row) */
html[data-theme="phase2"] section[data-route="slots"] .cp-auto-stats{
  display:grid !important; grid-template-columns:1fr 1fr;
  gap:8px;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:12px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="slots"] .cp-auto-stat{
  display:flex !important; flex-direction:column;
  gap:2px;
  font-family:'Urbanist',sans-serif !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
}
html[data-theme="phase2"] section[data-route="slots"] .cp-auto-stat-label{
  font-size:12px !important; font-weight:700 !important;
  letter-spacing:.1em;
  color:var(--pd-text-mute) !important;
  text-transform:uppercase;
}
html[data-theme="phase2"] section[data-route="slots"] .cp-auto-stat-val{
  font-size:15px !important; font-weight:800 !important;
  color:var(--pd-text) !important;
  font-variant-numeric:tabular-nums;
}
html[data-theme="phase2"] section[data-route="slots"] .cp-auto-pnl{
  color:var(--pd-green) !important;
}

/* Cabinet frame — flat matte navy. Drop the Phase 1 "stamped on the page"
   drop-shadow (0 14px 0 #3e0212) + the 60px blue-glow halo. */
html[data-theme="phase2"] section[data-route="slots"] .slots-machine{
  background:var(--pd-bg-1) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:24px !important;
  box-shadow:none !important;
}
/* Kill the cabinet sheen + the radial gold halo at top — those leaked the
   red/yellow Vegas vibe through onto the matte chrome. */
html[data-theme="phase2"] section[data-route="slots"] .slots-machine::before{
  display:none !important;
}
/* Floor halo + petals — both pure decoration that read as casino. */
html[data-theme="phase2"] section[data-route="slots"] .sm-floor-halo,
html[data-theme="phase2"] section[data-route="slots"] .slots-petals{
  display:none !important;
}

/* Crown / marquee — drop the chase-light bulbs + spinning stars + gold
   gradient text. Replace with a clean matte chip + muted "JACKPOT"
   label in our blue accent. Reads as a quiet game title, not a Vegas
   sign demanding attention. */
html[data-theme="phase2"] section[data-route="slots"] .sm-crown-frame{
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-md) !important;
  padding:10px 16px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="slots"] .sm-bulbs,
html[data-theme="phase2"] section[data-route="slots"] .sm-star{
  display:none !important;
}
html[data-theme="phase2"] section[data-route="slots"] .sm-marquee-wrap{
  padding:2px 0 !important;
  gap:0 !important;
}
html[data-theme="phase2"] section[data-route="slots"] .sm-marquee{
  font-family:'Inter','Sora',sans-serif !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:.22em !important;
  color:var(--pd-blue, #4299e1) !important;
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:initial !important;
  filter:none !important;
  text-shadow:none !important;
  animation:none !important;
}

/* Cabinet (chrome bezel around the reels) — flat matte body, no
   gold dashed pinstripe, no 6px outer drop. */
html[data-theme="phase2"] section[data-route="slots"] .sm-cabinet{
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-md) !important;
  padding:3px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="slots"] .sm-cabinet-inner{
  background:var(--pd-bg-1) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:12px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="slots"] .sm-cabinet-inner::before{
  display:none !important;
}

/* Reel window — clean off-white panel with a thin matte border, no
   pink gradient. Symbols still pop because the background is mostly
   neutral, but the cabinet doesn't read as Vegas anymore. */
html[data-theme="phase2"] section[data-route="slots"] .sm-window{
  background:#e8eaee !important;
  background-image:none !important;
  border:1px solid rgba(0,0,0,.18) !important;
  border-radius:var(--pd-radius-sm) !important;
  box-shadow:inset 0 4px 12px rgba(0,0,0,.25) !important;
}
html[data-theme="phase2"] section[data-route="slots"] .sm-window::before,
html[data-theme="phase2"] section[data-route="slots"] .sm-window::after{
  display:none !important;
}
html[data-theme="phase2"] section[data-route="slots"] .reel{
  background:#e8eaee !important;
  background-image:none !important;
  border:1px solid rgba(0,0,0,.12) !important;
  border-radius:6px !important;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.10) !important;
}
html[data-theme="phase2"] section[data-route="slots"] .reel::before{
  display:none !important;
}

/* Payline — single thin blue line, no glow halo. Arrow tips kept
   subtle (no yellow shadow, smaller). */
html[data-theme="phase2"] section[data-route="slots"] .sm-payline{
  background:linear-gradient(90deg, transparent, var(--pd-blue, #4299e1) 12%, var(--pd-blue, #4299e1) 88%, transparent) !important;
  box-shadow:none !important;
  animation:none !important;
  opacity:.65 !important;
  height:2px !important;
}
html[data-theme="phase2"] section[data-route="slots"] .sm-payline-tip{
  background:var(--pd-blue, #4299e1) !important;
  border:none !important;
  box-shadow:none !important;
  animation:none !important;
  width:10px !important; height:10px !important;
}

/* Credit tray — matte navy, muted label, blue accent number (matches
   the rest of the Phase 2 numeric readouts). No yellow text-shadow. */
html[data-theme="phase2"] section[data-route="slots"] .sm-tray{
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:10px 16px !important;
  margin-top:14px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="slots"] .sm-tray-slot{
  background:rgba(0,0,0,.32) !important;
  background-image:none !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55) !important;
  border-radius:4px !important;
  height:6px !important;
}
html[data-theme="phase2"] section[data-route="slots"] .sm-tray-credits-label{
  font-family:'Inter',sans-serif !important;
  color:var(--pd-text-mute) !important;
  opacity:1 !important;
  font-weight:700 !important;
}
html[data-theme="phase2"] section[data-route="slots"] .sm-tray-credits-val{
  font-family:'Inter','Sora',sans-serif !important;
  color:var(--pd-text) !important;
  text-shadow:none !important;
  font-weight:800 !important;
}

/* 3D pull lever — Phase 2 is button-driven (SPIN button on the control
   panel). The big chrome lever was a Vegas affectation that no longer
   fits the chrome. Hide it. */
html[data-theme="phase2"] section[data-route="slots"] .sm-lever{
  display:none !important;
}

/* ============================================================
   PHASE 2 — DICE
   ============================================================ */

html[data-theme="phase2"] section[data-route="dice"] .dice-stage{
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:24px !important;
  margin-bottom:14px;
  display:flex !important; flex-direction:column; align-items:center;
  gap:14px;
  position:relative;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="dice"] .dice-particles{ display:none !important; }
html[data-theme="phase2"] section[data-route="dice"] .dice-mode-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:6px 12px !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  color:var(--pd-text-mute) !important;
  font-weight:600;
}
html[data-theme="phase2"] section[data-route="dice"] .dice-mode-pill strong{
  color:var(--pd-blue-accent) !important;
  font-weight:800;
  letter-spacing:.04em;
}
html[data-theme="phase2"] section[data-route="dice"] .dice-roll-readout{
  text-align:center;
  font-family:'Urbanist',sans-serif !important;
}
html[data-theme="phase2"] section[data-route="dice"] .drr-label{
  font-size:13px !important; font-weight:700 !important;
  letter-spacing:.1em;
  color:var(--pd-text-mute) !important;
}
html[data-theme="phase2"] section[data-route="dice"] .drr-value{
  font-size:42px !important; font-weight:800 !important;
  color:var(--pd-text) !important;
  line-height:1.1;
}

/* Target-sum slider track.
   Base CSS positions this absolute (bottom:14px) — designed for the
   old "stage as felt" layout. In Phase 2 the dice-stage is a flex
   column with gap:14px, so the absolute slider was clipping the
   bottom of the dice cubes ("dice cut off" bug report).
   Unset the absolute positioning so the slider flows as a real flex
   item BELOW the dice-cube-row, with breathing room from the cubes. */
html[data-theme="phase2"] section[data-route="dice"] .dice-target-bar{
  position:relative !important;
  left:auto !important; right:auto !important; bottom:auto !important;
  width:90% !important;
  padding:8px 0;
  margin-top:10px;
}
/* Now that the dice-stage is no longer the canvas the slider overlays,
   it can let content overflow if a die's idle bob extends slightly past
   the felt border — `overflow:hidden` on the base rule was the other
   half of the clipping (a die nudging into the slider zone got clipped
   instead of just being visible). */
html[data-theme="phase2"] section[data-route="dice"] .dice-stage{
  overflow:visible !important;
}
/* Ensure the dice row has its own breathing room from the slider — gap
   from the parent flex (14px) is fine when the slider is in-flow. */
html[data-theme="phase2"] section[data-route="dice"] .dice-cube-row{
  margin-bottom:6px;
}
html[data-theme="phase2"] section[data-route="dice"] .dtb-track{
  position:relative;
  height:32px;
}
html[data-theme="phase2"] section[data-route="dice"] .dtb-fill{
  position:absolute; top:14px; left:0;
  height:6px;
  background:var(--pd-blue);
  border-radius:3px;
}

/* Dice controls panel — Phase 1 forces flex column inside a 300px left
   grid area; keep that layout and just skin the matte chrome. */
html[data-theme="phase2"] section[data-route="dice"] .dice-controls,
html[data-theme="phase2"] section[data-route="dice"] .dice-controls-v2{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:18px !important;
  gap:14px !important;
  box-shadow:none !important;
  background-image:none !important;
}
html[data-theme="phase2"] section[data-route="dice"] .dice-controls > button,
html[data-theme="phase2"] section[data-route="dice"] .dice-controls-v2 > button{
  width:100% !important;
  align-self:stretch !important;
}

/* Segmented over/under toggle */
html[data-theme="phase2"] section[data-route="dice"] .seg-toggle{
  display:flex !important;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:4px;
  gap:2px;
}
html[data-theme="phase2"] section[data-route="dice"] .seg-btn{
  flex:1 1 0;
  height:34px;
  background:transparent !important;
  border:none !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--pd-text-mute) !important;
  cursor:pointer;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="dice"] .seg-btn.active{
  background:var(--pd-surface) !important;
  color:var(--pd-text) !important;
}

/* ROLL DICE button */
html[data-theme="phase2"] section[data-route="dice"] #dice-roll{
  background:var(--pd-green) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  height:48px !important;
  padding:0 18px !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important; font-weight:800 !important;
  letter-spacing:.04em;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="dice"] #dice-roll:hover{ background:var(--pd-green-hover) !important; }
html[data-theme="phase2"] section[data-route="dice"] #dice-roll .btn-shine{ display:none !important; }

/* ============================================================
   PHASE 2 — DICE CUBE POLISH
   Perfects the die shape: a polished resin surface with a corner
   sheen, a clean rounded bevel instead of the flat 3px stroke,
   crisper domed pips, and a tighter contact shadow. Scoped to
   phase2/dice so it wins over the base + UI-pass-9b cube rules.
   The 3D transforms (df-* translateZ) + roll JS are untouched —
   only each facet's surface + the pips change.
   ============================================================ */
/* Facet shell — the flat 3px border becomes a moulded bevel: a bright
   top-edge catch-light, a deep bottom inner shade, side ambient, and a
   hairline rim, so each face reads as a real cube edge, not a tile. */
html[data-theme="phase2"] section[data-route="dice"] .dface{
  border:none !important;
  border-radius:18px !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.10),
    inset 0 4px 6px rgba(255,255,255,.22),
    inset 0 -11px 17px rgba(0,0,0,.46),
    inset 8px 0 15px rgba(0,0,0,.18),
    inset -7px 0 14px rgba(255,255,255,.05) !important;
}
/* Polished surface — a radial sheen pooled top-left over a richer body
   gradient. Kept per-die so the blue / violet identity stays. */
html[data-theme="phase2"] section[data-route="dice"] .dice-blue .dface{
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.30), rgba(255,255,255,0) 48%),
    linear-gradient(150deg, #4d86d6 0%, #2a5cab 45%, #163566 100%) !important;
}
html[data-theme="phase2"] section[data-route="dice"] .dice-red .dface{
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.26), rgba(255,255,255,0) 48%),
    linear-gradient(150deg, #875fb4 0%, #5a3486 45%, #311b50 100%) !important;
}
/* Specular streak + a faint bottom ambient-occlusion so the facet looks
   moulded, not printed. */
html[data-theme="phase2"] section[data-route="dice"] .dface::after{
  background:
    linear-gradient(152deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.05) 20%, transparent 42%),
    radial-gradient(ellipse 80% 60% at 50% 116%, rgba(0,0,0,.28), transparent 62%) !important;
  border-radius:18px !important;
}
/* Pips — crisp domed studs: soft radial body, tight top catch-light, a
   grounded bottom shade so they read as polished and evenly set. */
html[data-theme="phase2"] section[data-route="dice"] .dface i{
  background:radial-gradient(circle at 38% 30%, #ffffff 0%, #eef2f7 55%, #cdd7e4 100%) !important;
  box-shadow:
    inset 0 -2px 3px rgba(10,20,40,.45),
    inset 0 2px 2px rgba(255,255,255,.95),
    0 1px 1.5px rgba(0,0,0,.4) !important;
}
/* Contact shadow — tighter + softer so the dice feel grounded. */
html[data-theme="phase2"] section[data-route="dice"] .dice-shadow{
  background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 68%) !important;
  height:24px !important;
  filter:blur(6px) !important;
}

/* ============================================================
   PHASE 2 — LIMBO
   ============================================================ */

html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage{
  background:var(--pd-bg-1) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:48px 24px !important;
  margin-bottom:14px;
  text-align:center;
  position:relative;
  overflow:hidden;
  min-height:240px;
  box-shadow:none !important;
}
/* Kill the Phase 1 decorations on the stage:
   - .limbo-particles + .limbo-grid: decorative children
   - .limbo-stage::before: triple radial blob (pink + gold + purple) with
     20s bgFloat animation — that was the loud "colorful glow on the
     corners" the user called out
   - .limbo-stage::after: pink 40px grid mask
   - .limbo-glow: the 380px blue radial halo behind the multi text */
html[data-theme="phase2"] section[data-route="limbo"] .limbo-particles,
html[data-theme="phase2"] section[data-route="limbo"] .limbo-grid{
  display:none !important;
}
html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage::before,
html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage::after{
  display:none !important;
  content:none !important;
  background:none !important;
  animation:none !important;
}
/* Glow: keep the element (the win/loss tint logic uses it) but drop
   its idle blue halo to zero. Win/loss handlers still toggle the
   background to green/red — those paint ON TOP of the stage's matte
   bg via the .limbo-stage.win / .loss rules. */
html[data-theme="phase2"] section[data-route="limbo"] .limbo-glow{
  background:none !important;
  opacity:0 !important;
  filter:none !important;
}
html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.win .limbo-glow{
  background:radial-gradient(circle, rgba(74,222,128,.35), transparent 70%) !important;
  opacity:1 !important;
  filter:blur(40px);
}
html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.loss .limbo-glow{
  background:radial-gradient(circle, rgba(248,113,113,.30), transparent 70%) !important;
  opacity:1 !important;
  filter:blur(40px);
}
/* Multi text — drop the Phase 1 blue drop-shadow halo. The text stays
   bright white during play; .win turns it green and .loss turns it
   red via existing rules, which we override below with our muted
   palette. */
html[data-theme="phase2"] section[data-route="limbo"] .limbo-multi{
  filter:none !important;
}
html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.win .limbo-multi{
  color:#4ade80 !important;
  filter:drop-shadow(0 0 18px rgba(74,222,128,.45)) !important;
}
html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.loss .limbo-multi{
  color:#f87171 !important;
  filter:drop-shadow(0 0 18px rgba(248,113,113,.40)) !important;
}

/* ============================================================
   LIMBO — premium animation layer (rolling / win / loss)
   The base Phase-2 stage is flat matte navy. Layered on top:
     ROLLING → diagonal scanning beam + border-color pulse
     WIN     → green burst ring + 12-spoke confetti + multi bounce
     LOSS    → soft red flash + multi shake
   All keyframes are gated by .rolling / .win / .loss classes that
   app.js's Limbo IIFE already toggles, so no JS changes needed.
   Mobile sizes the confetti spread smaller. prefers-reduced-motion
   kills every keyframe for accessibility.
   ============================================================ */

/* --- ROLLING: scanning blue beam sweeps across the stage --- */
html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.rolling::before{
  display:block !important;
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(66,153,225,.06) 30%,
    rgba(66,153,225,.20) 50%,
    rgba(66,153,225,.06) 70%,
    transparent 100%) !important;
  background-size:250% 100% !important;
  background-repeat:no-repeat !important;
  animation:limboPhase2Scan 1.2s ease-in-out infinite !important;
  pointer-events:none;
  z-index:1;
}
@keyframes limboPhase2Scan{
  0%   { background-position: -100% 0; }
  100% { background-position:  200% 0; }
}
/* Stage border breathes blue during the climb */
html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.rolling{
  animation:limboPhase2RollPulse 1.4s ease-in-out infinite;
}
@keyframes limboPhase2RollPulse{
  0%,100% { border-color: rgba(250,250,250,.05); box-shadow:none; }
  50%     { border-color: rgba(66,153,225,.35); box-shadow:0 0 24px rgba(66,153,225,.10); }
}

/* --- WIN: expanding green burst ring (replaces ::before during win) --- */
html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.win::before{
  display:block !important;
  content:'' !important;
  position:absolute !important;
  left:50% !important; top:50% !important;
  width:60% !important; height:120% !important;
  border-radius:50% !important;
  background:radial-gradient(circle,
    rgba(74,222,128,.55) 0%,
    rgba(74,222,128,.18) 35%,
    transparent 70%) !important;
  background-size:auto !important;
  background-repeat:no-repeat !important;
  filter:blur(22px);
  transform:translate(-50%,-50%) scale(.4);
  opacity:0;
  animation:limboPhase2WinBurst .95s cubic-bezier(.16,1,.3,1) forwards !important;
  pointer-events:none;
  z-index:1;
}
@keyframes limboPhase2WinBurst{
  0%   { transform:translate(-50%,-50%) scale(.4);  opacity:0; }
  18%  { opacity:1; }
  100% { transform:translate(-50%,-50%) scale(2.4); opacity:0; }
}

/* --- WIN: 12-spoke confetti burst from centre --- */
html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.win::after{
  display:block !important;
  content:'' !important;
  position:absolute !important;
  left:50% !important; top:50% !important;
  width:8px !important; height:8px !important;
  background:transparent !important;
  border-radius:50% !important;
  /* 12 confetti dots arranged in a circle, 30deg apart.
     Mix of greens, golds, blues, pinks — cheerful celebration palette
     that still respects the matte chrome (no fluorescent neon). */
  box-shadow:
       0px -120px 0 0 #4ade80,
      60px -104px 0 0 #fde047,
     104px  -60px 0 0 #60a5fa,
     120px    0px 0 0 #f472b6,
     104px   60px 0 0 #4ade80,
      60px  104px 0 0 #fde047,
       0px  120px 0 0 #60a5fa,
     -60px  104px 0 0 #f472b6,
    -104px   60px 0 0 #4ade80,
    -120px    0px 0 0 #fde047,
    -104px  -60px 0 0 #60a5fa,
     -60px -104px 0 0 #f472b6 !important;
  transform:translate(-50%,-50%) scale(.2);
  opacity:0;
  animation:limboPhase2Confetti 1.05s cubic-bezier(.18,.7,.3,1) forwards !important;
  pointer-events:none;
  z-index:2;
}
@keyframes limboPhase2Confetti{
  0%   { transform:translate(-50%,-50%) scale(.2); opacity:0; }
  18%  { opacity:1; }
  85%  { opacity:1; }
  100% { transform:translate(-50%,-50%) scale(2.4); opacity:0; }
}

/* --- WIN: multi text bounce + green halo --- */
html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.win .limbo-multi{
  animation:limboPhase2WinMulti .95s cubic-bezier(.34,1.56,.64,1) !important;
}
@keyframes limboPhase2WinMulti{
  0%   { transform:scale(1);    filter:drop-shadow(0 0 0 transparent); }
  25%  { transform:scale(1.16); filter:drop-shadow(0 0 32px rgba(74,222,128,.85)); }
  60%  { transform:scale(.97);  }
  100% { transform:scale(1);    filter:drop-shadow(0 0 18px rgba(74,222,128,.45)); }
}

/* --- LOSS: brief red radial flash --- */
html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.loss::before{
  display:block !important;
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:radial-gradient(circle at center,
    rgba(248,113,113,.22) 0%,
    rgba(248,113,113,.05) 40%,
    transparent 75%) !important;
  background-size:auto !important;
  opacity:0;
  animation:limboPhase2LossFlash .85s ease-out forwards !important;
  pointer-events:none;
  z-index:0;
}
@keyframes limboPhase2LossFlash{
  0%   { opacity:0; }
  12%  { opacity:1; }
  100% { opacity:0; }
}

/* --- LOSS: multi text shake + red --- */
html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.loss .limbo-multi{
  animation:limboPhase2LossMulti .55s cubic-bezier(.36,.07,.19,.97) !important;
}
@keyframes limboPhase2LossMulti{
  0%,100% { transform:translateX(0); }
  15%     { transform:translateX(-10px) rotate(-1deg); }
  30%     { transform:translateX(9px)   rotate(1deg); }
  45%     { transform:translateX(-5px); }
  60%     { transform:translateX(3px);  }
}

/* --- Mobile sizing: smaller confetti spread + tighter multi --- */
@media (max-width:600px){
  html[data-theme="phase2"] section[data-route="limbo"] .limbo-multi{
    font-size:54px !important;
  }
  html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.win::after{
    box-shadow:
         0px  -78px 0 0 #4ade80,
       40px  -68px 0 0 #fde047,
       68px  -40px 0 0 #60a5fa,
       80px    0px 0 0 #f472b6,
       68px   40px 0 0 #4ade80,
       40px   68px 0 0 #fde047,
        0px   78px 0 0 #60a5fa,
      -40px   68px 0 0 #f472b6,
      -68px   40px 0 0 #4ade80,
      -80px    0px 0 0 #fde047,
      -68px  -40px 0 0 #60a5fa,
      -40px  -68px 0 0 #f472b6 !important;
  }
  html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.win::before{
    width:80% !important;
  }
}

/* --- Reduced motion: accessibility opt-out for every keyframe --- */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.rolling,
  html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.rolling::before,
  html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.win::before,
  html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.win::after,
  html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.win .limbo-multi,
  html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.loss::before,
  html[data-theme="phase2"] section[data-route="limbo"] .limbo-stage.loss .limbo-multi{
    animation:none !important;
  }
}
html[data-theme="phase2"] section[data-route="limbo"] .limbo-multi{
  font-family:'Urbanist',sans-serif !important;
  font-size:64px !important; font-weight:800 !important;
  color:var(--pd-text) !important;
  background:none !important;
  -webkit-text-fill-color:var(--pd-text) !important;
  line-height:1;
}
html[data-theme="phase2"] section[data-route="limbo"] .limbo-target-line{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:6px 12px !important;
  margin-top:14px;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  color:var(--pd-text-mute) !important;
  font-weight:600;
}
html[data-theme="phase2"] section[data-route="limbo"] .limbo-target-line strong{
  color:var(--pd-blue-accent) !important;
  font-weight:800;
}

html[data-theme="phase2"] section[data-route="limbo"] .limbo-controls,
html[data-theme="phase2"] section[data-route="limbo"] .auto-panel{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:18px !important;
  display:flex !important; flex-direction:column;
  gap:14px;
  box-shadow:none !important;
}

html[data-theme="phase2"] section[data-route="limbo"] .limbo-info{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:12px !important;
}
html[data-theme="phase2"] section[data-route="limbo"] .limbo-chance{
  font-family:'Urbanist',sans-serif !important;
  font-size:16px; font-weight:800;
  color:var(--pd-text) !important;
}
html[data-theme="phase2"] section[data-route="limbo"] .limbo-payout{
  font-family:'Urbanist',sans-serif !important;
  font-size:15px; font-weight:700;
  color:var(--pd-green) !important;
}

html[data-theme="phase2"] section[data-route="limbo"] #limbo-roll{
  background:var(--pd-green) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  height:48px !important;
  padding:0 18px !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important; font-weight:800 !important;
  letter-spacing:.04em;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="limbo"] #limbo-roll:hover{ background:var(--pd-green-hover) !important; }
html[data-theme="phase2"] section[data-route="limbo"] #limbo-roll .btn-shine{ display:none !important; }

html[data-theme="phase2"] section[data-route="limbo"] .cp-auto-stats{
  display:grid !important; grid-template-columns:1fr 1fr;
  gap:8px;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:12px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="limbo"] .cp-auto-stat{
  display:flex !important; flex-direction:column;
  gap:2px;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  font-family:'Urbanist',sans-serif !important;
}
html[data-theme="phase2"] section[data-route="limbo"] .cp-auto-stat-label{
  font-size:12px !important; font-weight:700 !important;
  letter-spacing:.1em;
  color:var(--pd-text-mute) !important;
  text-transform:uppercase;
}
html[data-theme="phase2"] section[data-route="limbo"] .cp-auto-stat-val{
  font-size:15px !important; font-weight:800 !important;
  color:var(--pd-text) !important;
}

/* ============================================================
   PHASE 2 — PLINKO
   ============================================================ */

html[data-theme="phase2"] section[data-route="plinko"] .plinko-controls{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:18px !important;
  display:flex !important; flex-direction:column;
  gap:14px;
  box-shadow:none !important;
  background-image:none !important;
}
html[data-theme="phase2"] section[data-route="plinko"] .plinko-board{
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:24px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="plinko"] .seg-toggle{
  display:flex !important;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:4px;
  gap:2px;
}
html[data-theme="phase2"] section[data-route="plinko"] .seg-btn{
  flex:1 1 0;
  height:34px;
  background:transparent !important;
  border:none !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--pd-text-mute) !important;
  cursor:pointer;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="plinko"] .seg-btn.active{
  background:var(--pd-blue) !important;
  color:#fff !important;
}
html[data-theme="phase2"] section[data-route="plinko"] #plinko-drop,
html[data-theme="phase2"] section[data-route="plinko"] .btn-primary.big{
  background:var(--pd-green) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  height:48px !important;
  padding:0 18px !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important; font-weight:800 !important;
  letter-spacing:.04em;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="plinko"] #plinko-drop:hover{ background:var(--pd-green-hover) !important; }
html[data-theme="phase2"] section[data-route="plinko"] .btn-shine{ display:none !important; }

/* ============================================================
   PHASE 2 — GENERIC BUTTON SAFETY NET
   Any .btn-primary / .btn-deposit / .btn-outline / .btn-cashout /
   .btn-ghost that I didn't explicitly skin per-route gets a sensible
   matte packdraw default while phase2 is on. Excludes the moved
   topbar buttons (already styled) and modal buttons (already styled
   under .modal scope).
   ============================================================ */

/* :where() wraps the :not() exclusions so they contribute ZERO specificity
   — that keeps the safety net at the lowest possible (.btn-primary = 0,1,0
   + the html attr = 0,1,1) so per-route explicit rules with IDs always
   win the cascade. Without this, the complex :not(#x .y) selector boosted
   specificity to (1,3,1) and clobbered every game-specific override. */
html[data-theme="phase2"] .btn-primary:not(:where(#pd-topbar-right .btn-primary, .modal .btn-primary)){
  background:var(--pd-blue) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.02em;
  box-shadow:none !important;
}
html[data-theme="phase2"] .btn-primary:not(:where(#pd-topbar-right .btn-primary, .modal .btn-primary)):hover{
  background:var(--pd-blue-hover) !important;
}
html[data-theme="phase2"] .btn-primary .btn-shine{ display:none !important; }

html[data-theme="phase2"] .btn-cashout:not(:where(.modal .btn-cashout)){
  background:var(--pd-green) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-weight:800 !important;
  letter-spacing:.02em;
  box-shadow:none !important;
}
html[data-theme="phase2"] .btn-cashout:not(:where(.modal .btn-cashout)):hover{
  background:var(--pd-green-hover) !important;
}

html[data-theme="phase2"] .btn-outline:not(:where(.modal .btn-outline)){
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  color:var(--pd-text) !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-weight:700 !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .btn-outline:not(:where(.modal .btn-outline)):hover{
  background:var(--pd-surface) !important;
  border-color:var(--pd-line-hover) !important;
}

html[data-theme="phase2"] .btn-ghost:not(:where(#pd-topbar-right .btn-ghost, .modal .btn-ghost)){
  background:transparent !important;
  background-image:none !important;
  color:var(--pd-text-mute) !important;
  border:1px solid transparent !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-weight:700 !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .btn-ghost:not(:where(#pd-topbar-right .btn-ghost, .modal .btn-ghost)):hover{
  color:var(--pd-text) !important;
  background:var(--pd-bg-2) !important;
}

/* ============================================================
   PHASE 2 — PLINKO MULTIPLIER SLOTS
   Replace Phase 1's vivid yellow→orange→cyan→pink→purple Vegas
   gradients with the CS:GO rarity tier palette already used by
   item glows + feed items. Solid matte chips, no gradients, no
   inset embossing — same visual language as packdraw cards. */
html[data-theme="phase2"] section[data-route="plinko"] .plinko-slots{
  background:transparent !important;
  padding:8px 16px;
  gap:5px;
}
html[data-theme="phase2"] section[data-route="plinko"] .plinko-slot{
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-weight:800 !important;
  font-size:15px !important;
  color:var(--pd-text-mute) !important;
  text-shadow:none !important;
  box-shadow:none !important;
}
/* Tier color map (lowest → highest) — matches the rarity tokens used
   by .pd-feed-item, .cig-item, the home Live Opens, etc. */
html[data-theme="phase2"] section[data-route="plinko"] .plinko-slot.t-low{
  background:var(--pd-bg-2) !important;
  color:var(--pd-text-mute) !important;
  border-color:var(--pd-line) !important;
}
html[data-theme="phase2"] section[data-route="plinko"] .plinko-slot.t-mid{
  background:var(--pd-tier-mythic) !important;
  color:var(--pd-bg-0) !important;
  border-color:rgba(0,0,0,.18) !important;
}
html[data-theme="phase2"] section[data-route="plinko"] .plinko-slot.t-high{
  background:var(--pd-tier-uncommon) !important;
  color:#fff !important;
  border-color:rgba(0,0,0,.18) !important;
}
html[data-theme="phase2"] section[data-route="plinko"] .plinko-slot.t-fire{
  background:var(--pd-tier-rare) !important;
  color:#fff !important;
  border-color:rgba(0,0,0,.18) !important;
}
html[data-theme="phase2"] section[data-route="plinko"] .plinko-slot.t-jack{
  background:var(--pd-tier-epic) !important;
  color:#fff !important;
  border-color:rgba(0,0,0,.18) !important;
}
/* Win-flash animation: soft white glow instead of harsh white burst */
html[data-theme="phase2"] section[data-route="plinko"] .plinko-slot.flash{
  animation:pdSlotFlash .8s cubic-bezier(.16,1,.3,1) !important;
  z-index:5;
}
@keyframes pdSlotFlash{
  0%   { transform:translateY(0)    scale(1);    filter:brightness(1); }
  30%  { transform:translateY(-8px) scale(1.12); filter:brightness(1.4) drop-shadow(0 0 18px currentColor); }
  100% { transform:translateY(0)    scale(1);    filter:brightness(1); }
}

/* ============================================================
   PHASE 2 — BLACKJACK CARDS + DECK
   Rebuilt as TRUE 3D flip cards (front/back faces on a preserve-3d
   inner) replacing the old flat matte card whose "flip" was a fake
   scaleX squish. JS appends a .bj-card (rises in showing its back),
   then toggles .is-face-up to rotate the inner 180° and reveal the
   front. See the .bj-card / .bj-card-inner / .bj-card-face block below.
   ============================================================ */
/* ---- TRUE 3D flip card (rebuild) ----
   Outer .bj-card owns the perspective + the deal-in "rise". .bj-card-inner
   is the preserve-3d rotator that flips 180° when the wrapper gets
   .is-face-up. Two faces: .bj-card-back (navy weave, shown at rest) and
   .bj-card-front (rank + centre pip, shown once flipped). Replaces the old
   flat card whose "flip" was a fake scaleX squish with no real faces. */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card{
  width:80px !important;
  height:116px !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  /* radius matches the faces so the grounded drop-shadow takes the card's
     shape (the wrapper itself is transparent — only its shadow shows). */
  border-radius:8px !important;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.6), 0 3px 7px -2px rgba(0,0,0,.42) !important;
  padding:0 !important;
  position:relative;
  perspective:900px;
  animation:bjP2CardRise .34s cubic-bezier(.22,.85,.32,1) backwards !important;
}
/* Seated card — no entrance rise (reveal-in-place + resume-after-refresh) */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card.bj-card-seated{
  animation:none !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-inner{
  position:relative;
  width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.2,.7,.25,1);
  transform:rotateY(0deg);
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card.is-face-up .bj-card-inner{
  transform:rotateY(180deg);
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-face{
  position:absolute; inset:0;
  width:100%; height:100%;
  box-sizing:border-box;
  border-radius:8px;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  overflow:hidden;
}
/* FRONT — matte off-white card stock: rank tl/br + big centre pip */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-front{
  transform:rotateY(180deg);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:7px 8px;
  background:#f6f7f4;
  border:1px solid rgba(0,0,0,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  font-family:'Sora',sans-serif !important;
  font-weight:800 !important;
  color:#0a0f1f;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-front.red{ color:#d12e3a; }
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-front.black{ color:#0a0f1f; }
/* BACK — matte navy weave with the Bloxhit logo stamped on top via ::before,
   using the SAME size (80%), position (center) + drop-shadow as the deck
   stack (.bj-deck-card::before) so a card flying out of the deck looks
   seamless with it. Shown on every face-down card (dealer hole + every card
   while it flies in). */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-back{
  transform:rotateY(0deg);
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 6px, rgba(74,144,226,.14) 6px, rgba(74,144,226,.14) 12px),
    linear-gradient(150deg, #232a3a 0%, #11151f 100%);
  border:1px solid rgba(74,144,226,.30);
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-back::before{
  content:''; position:absolute; inset:0;
  background-image:url('assets/opt/logo.webp');
  background-repeat:no-repeat;
  background-position:center;
  background-size:80%;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
/* Card typography */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-rank{
  font-family:'Sora',sans-serif !important;
  font-size:17px !important;
  font-weight:800 !important;
  line-height:1;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-suit{
  font-size:30px !important;
  align-self:center;
  line-height:1;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-suit-mini{
  font-size:14px !important;
  line-height:1;
  margin-top:2px;
}

/* Deck visual at top-right of felt — clean matte card stack */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-deck{
  width:48px !important;
  height:66px !important;
  top:18px !important;
  right:20px !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-deck-card{
  background:linear-gradient(135deg, var(--pd-bg-2) 0%, var(--pd-bg-1) 100%) !important;
  background-image:
    repeating-linear-gradient(45deg,
      transparent 0,
      transparent 4px,
      rgba(66,153,225,.18) 4px,
      rgba(66,153,225,.18) 8px),
    linear-gradient(135deg, var(--pd-bg-2) 0%, var(--pd-bg-1) 100%) !important;
  border:1px solid var(--pd-line-hover) !important;
  border-radius:6px !important;
  box-shadow:0 2px 6px rgba(0,0,0,.4) !important;
}

/* Tighten card spacing inside zones */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-cards{
  gap:8px !important;
  min-height:130px;
}

/* ============================================================
   PHASE 2 — BLACKJACK Bloxflip-style felt + deal cadence
   Layer of overrides on top of the existing phase2 BJ block.
   - Felt: dark base with soft horseshoe arc + horizon silhouette
   - Banner: ribbon "BLACKJACK PAYS 3 TO 2" with pennant tails
   - Cards: slide UP from below (Bloxflip "live deal" cadence)
   - Totals: state-coloured pill chips next to DEALER/YOU
   - Empty slots: cleaner outlined "land here" placeholders
   ============================================================ */

/* Felt body: navy base, no longer the matte-blue ramp from above */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-table{
  background:linear-gradient(180deg, #1a2030 0%, #0c1018 100%) !important;
  background-image:linear-gradient(180deg, #1a2030 0%, #0c1018 100%) !important;
  padding:36px 28px 70px !important;
  min-height:460px;
  overflow:hidden;
  position:relative;
}
/* Horseshoe felt arc — lighter ellipse where play happens.
   Sits BEHIND the cards (z-index:0). Cards / deck / banner are
   bumped to z-index:2 below so they float over the arc. */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-table::before{
  content:''; position:absolute;
  inset:6% 6% 22% 6%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(72,96,140,.34) 0%,
    rgba(72,96,140,.20) 45%,
    transparent 75%);
  border:1px solid rgba(74,144,226,.14);
  pointer-events:none;
  z-index:0;
}
/* Horizon mountain silhouette — Bloxflip's ambient "distance" depth */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-table::after{
  content:''; position:absolute;
  left:0; right:0; bottom:0; height:42%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'><path d='M0 200 L0 132 L60 105 L130 130 L210 80 L300 122 L390 96 L470 130 L555 90 L630 124 L710 108 L780 130 L800 118 L800 200 Z' fill='rgba(34,48,72,.55)'/><path d='M0 200 L0 168 L80 148 L170 168 L255 142 L345 162 L430 148 L520 164 L610 144 L710 160 L800 148 L800 200 Z' fill='rgba(18,26,40,.70)'/></svg>");
  background-position:bottom center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:0;
}
/* Bring zones / banner above the felt overlays. The deck only gets a
   z-index bump — leaving its `position:absolute` from the base rule
   intact so it stays parked top-right (a sibling override here would
   collapse it back into the felt's normal flow at the left edge). */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-zone,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays{
  position:relative; z-index:2;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-deck{
  z-index:2;
}

/* "BLACKJACK PAYS 3 TO 2" ribbon banner — pennant tails.
   Only applied during PLAY (the `bj-pays-result` class added by
   finish() suppresses this so the result strip styling wins). */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays:not(.bj-pays-result){
  position:relative !important;
  padding:9px 28px !important;
  background:rgba(0,0,0,.32) !important;
  border:1px solid rgba(255,255,255,.05) !important;
  border-radius:3px !important;
  width:max-content;
  margin:0 auto;
  align-self:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays:not(.bj-pays-result)::before,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays:not(.bj-pays-result)::after{
  content:''; position:absolute;
  top:50%; transform:translateY(-50%);
  width:22px; height:calc(100% + 2px);
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.05);
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays:not(.bj-pays-result)::before{
  left:-22px;
  clip-path:polygon(0 50%, 60% 0, 100% 0, 100% 100%, 60% 100%);
  border-right:none;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays:not(.bj-pays-result)::after{
  right:-22px;
  clip-path:polygon(0 0, 40% 0, 100% 50%, 40% 100%, 0 100%);
  border-left:none;
}

/* Deal-in "rise": each card lifts into its seat from just below with a
   soft overshoot. JS drives the inter-card beat (CARD_RISE_MS /
   CARD_SETTLE_MS) and toggles .is-face-up to play the real 3D flip —
   this keyframe is purely the entrance, no scaleX fakery. */
@keyframes bjP2CardRise{
  0%   { transform: translateY(34px) scale(.92); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0)    scale(1);   opacity: 1; }
}
/* Zero out the legacy nth-child stagger (Phase-1 base CSS delays each
   .bj-card by 0.14s·n). JS now owns the inter-card timing, so without
   this every card past the first would wait before rising. */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card:nth-child(1),
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card:nth-child(2),
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card:nth-child(3),
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card:nth-child(4),
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card:nth-child(5),
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card:nth-child(6){
  animation-delay: 0s !important;
}
/* Reduced motion: no rise, and the flip state snaps instantly (the card
   still ends face-up, it just doesn't rotate). Specific selectors only —
   never a universal selector inside the media query. */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="blackjack"] .bj-card{
    animation:none !important;
  }
  html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-inner{
    transition:none !important;
  }
}

/* ---- Deck "deal" recoil — the top deck card kicks toward the felt as each
   card is flicked out of the shoe (JS toggles .bj-deck-deal per dealt card).
   Sells that the flying card actually came FROM the deck. ---- */
@keyframes bjDeckDealPulse{
  0%   { transform:translate(4px,4px) rotate(0); }
  42%  { transform:translate(-2px,10px) rotate(-5deg); }
  100% { transform:translate(4px,4px) rotate(0); }
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-deck.bj-deck-deal .bj-deck-card:nth-child(3){
  animation:bjDeckDealPulse .34s cubic-bezier(.3,.7,.3,1);
}

/* ---- Winning-hand lift — a gentle staggered pop on the player's cards at
   round end (win / blackjack). No glow; the motion alone carries the cheer.
   !important so it beats the seated card's animation:none. ---- */
@keyframes bjCardWin{
  0%   { transform:translateY(0)     scale(1); }
  34%  { transform:translateY(-10px) scale(1.05); }
  66%  { transform:translateY(-2px)  scale(1.01); }
  100% { transform:translateY(0)     scale(1); }
}
html[data-theme="phase2"] section[data-route="blackjack"] #bj-player .bj-card.bj-card-won{
  animation:bjCardWin .62s cubic-bezier(.2,.7,.25,1) !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] #bj-player .bj-card.bj-card-won:nth-child(2){ animation-delay:.06s !important; }
html[data-theme="phase2"] section[data-route="blackjack"] #bj-player .bj-card.bj-card-won:nth-child(3){ animation-delay:.12s !important; }
html[data-theme="phase2"] section[data-route="blackjack"] #bj-player .bj-card.bj-card-won:nth-child(4){ animation-delay:.18s !important; }
html[data-theme="phase2"] section[data-route="blackjack"] #bj-player .bj-card.bj-card-won:nth-child(5){ animation-delay:.24s !important; }
html[data-theme="phase2"] section[data-route="blackjack"] #bj-player .bj-card.bj-card-won:nth-child(6){ animation-delay:.30s !important; }

/* Reduced motion: kill the deck recoil + the win lift (must come AFTER the
   rules above so it wins the cascade). The fly itself is WAAPI, gated off
   in JS via bjReduceMotion(), so there's nothing to disable here for it. */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="blackjack"] .bj-deck.bj-deck-deal .bj-deck-card:nth-child(3){
    animation:none !important;
  }
  html[data-theme="phase2"] section[data-route="blackjack"] #bj-player .bj-card.bj-card-won{
    animation:none !important;
  }
}

/* Hand-total chips — state-coloured pills next to DEALER / YOU.
   The JS render() pipeline sets these classes; the span itself is
   the existing #bj-dealer-total / #bj-player-total element. */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span{
  background:rgba(122,128,132,.40) !important;
  color:#fff !important;
  border-radius:4px;
  padding:2px 8px;
  font-size:13px !important;
  letter-spacing:.04em !important;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums;
  transition:background-color .18s ease, color .18s ease;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span:empty{
  display:none;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span.bj-total-win{
  background:linear-gradient(90deg, #4ade80, #22c55e) !important;
  color:#0a1f0c !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span.bj-total-lose,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span.bj-total-bust{
  background:linear-gradient(90deg, #f87171, #ef4444) !important;
  color:#1c0808 !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span.bj-total-bj{
  background:linear-gradient(90deg, #fde047, #facc15) !important;
  color:#3b2c00 !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span.bj-total-active{
  background:linear-gradient(90deg, #60a5fa, #3b82f6) !important;
  color:#fff !important;
  box-shadow:0 0 12px rgba(59,130,246,.40);
}

/* Empty card slot placeholders — clean "land here" outline */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-cards:empty::before,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-cards:empty::after{
  width:80px !important; height:116px !important;
  border:1px dashed rgba(255,255,255,.10) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.015) !important;
}

/* Tighter zone gap so dealer/player feel like they sit on the same arc */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-zone{
  gap:8px !important;
}

/* No zone-wide glow on result — Bloxflip doesn't wrap the whole
   dealer/player area in a green/red ring. The chip colour alone
   carries the win/loss signal. The result strip below the felt also
   says it explicitly. */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-zone.bj-win,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-zone.bj-loss{
  box-shadow:none !important;
  animation:none !important;
}

/* ============================================================
   BLACKJACK — PREMIUM TABLE REDESIGN  (Stake/Roobet-grade)
   The earlier phase2 pass flattened BJ to a plain navy box. This
   lifts it into a real, lit card table: deep green felt with a
   soft overhead spotlight + edge vignette, a classic curved
   betting arc, printed-on-felt pays text, a refined rail, and
   crisper white cards with state-coloured total chips. Appended
   last so it wins the cascade. Markup + deal/flip JS untouched.
   ============================================================ */
section[data-route="blackjack"]{
  --bj-felt-lit:#21604f;
  --bj-felt-mid:#123e34;
  --bj-felt-rim:#091f1a;
  --bj-print:rgba(236,228,201,.5);
}
/* --- Felt body + padded rail. Top layers = a fine cross-weave nap so the
   green reads as real felt; bottom = the lit radial that pools light at the
   play area and falls to a dark rim. --- */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-table{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 82% 64% at 50% 33%,
      var(--bj-felt-lit) 0%, var(--bj-felt-mid) 48%, var(--bj-felt-rim) 100%) !important;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 82% 64% at 50% 33%,
      var(--bj-felt-lit) 0%, var(--bj-felt-mid) 48%, var(--bj-felt-rim) 100%) !important;
  border:1px solid rgba(0,0,0,.6) !important;
  border-radius:24px !important;
  padding:40px 30px 58px !important;
  min-height:480px;
  box-shadow:
    inset 0 0 0 7px rgba(0,0,0,.22),
    inset 0 0 0 8px rgba(255,255,255,.025),
    inset 0 3px 1px rgba(255,255,255,.06),
    inset 0 -60px 120px rgba(0,0,0,.5),
    0 28px 64px -22px rgba(0,0,0,.8) !important;
  overflow:hidden;
}
/* Overhead spotlight pooled on the play area + top sheen */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-table::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 56% 46% at 50% 40%, rgba(255,251,235,.13), transparent 72%),
    radial-gradient(circle at 50% -12%, rgba(255,255,255,.06), transparent 46%) !important;
  background-image:
    radial-gradient(ellipse 56% 46% at 50% 40%, rgba(255,251,235,.13), transparent 72%),
    radial-gradient(circle at 50% -12%, rgba(255,255,255,.06), transparent 46%) !important;
  border:none !important; border-radius:0 !important;
  pointer-events:none; z-index:0;
}
/* Betting arc — the classic curved table line below the pays print */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-table::after{
  content:''; position:absolute;
  left:50%; bottom:-48%;
  width:130%; height:92%;
  transform:translateX(-50%);
  border-radius:50%;
  border:1.5px solid var(--bj-print);
  border-bottom:none;
  opacity:.45;
  background:none !important;
  background-image:none !important;
  pointer-events:none; z-index:0;
}
/* --- Pays text printed straight onto the felt (drop the dark ribbon) --- */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays:not(.bj-pays-result){
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  width:auto;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays:not(.bj-pays-result)::before,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays:not(.bj-pays-result)::after{
  display:none !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays:not(.bj-pays-result) .bj-pays-main{
  color:var(--bj-print) !important;
  font-family:'Sora',sans-serif !important;
  font-weight:700 !important;
  font-size:15px !important;
  letter-spacing:.32em !important;
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays:not(.bj-pays-result) .bj-pays-sub{
  color:var(--bj-print) !important;
  opacity:.66 !important;
  font-size:11px !important;
  letter-spacing:.36em !important;
}
/* --- DEALER / YOU labels --- */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label{
  color:rgba(255,255,255,.6) !important;
  letter-spacing:.2em !important;
}
/* --- Hand-total chips: solid, clean, no glow --- */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span{
  background:rgba(0,0,0,.35) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:6px !important;
  padding:2px 9px !important;
  font-size:14px !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span.bj-total-active{
  background:#3a85d6 !important; border-color:#3a85d6 !important; color:#fff !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span.bj-total-win{
  background:#3ec46b !important; border-color:#3ec46b !important; color:#06210f !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span.bj-total-lose,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span.bj-total-bust{
  background:#e2555f !important; border-color:#e2555f !important; color:#2a0709 !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-label span.bj-total-bj{
  background:#f2cf52 !important; border-color:#f2cf52 !important; color:#2f2400 !important;
}
/* --- Cards: crisper, a touch larger, premium gloss + grounded shadow --- */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card{
  width:86px !important;
  height:122px !important;
  border-radius:9px !important;
  box-shadow:0 16px 28px -10px rgba(0,0,0,.72), 0 4px 9px -2px rgba(0,0,0,.5) !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-face{ border-radius:9px !important; }
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-front{
  background:linear-gradient(158deg, #ffffff 0%, #eef1f4 100%) !important;
  border:1px solid rgba(10,18,30,.20) !important;
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.5) !important;
  padding:8px 9px !important;
}
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-front.red{ color:#c4313d !important; }
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-front.black{ color:#1a2230 !important; }
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-rank{ font-size:18px !important; font-weight:800 !important; }
html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-suit{ font-size:32px !important; }
/* Empty "land here" slots — cream hairline so they sit on the felt */
html[data-theme="phase2"] section[data-route="blackjack"] .bj-cards:empty::before,
html[data-theme="phase2"] section[data-route="blackjack"] .bj-cards:empty::after{
  border:1.5px dashed rgba(236,228,201,.20) !important;
  background:rgba(0,0,0,.06) !important;
}
/* Phones: shrink cards so multi-card hands (after hits) fit the narrow felt
   instead of overflowing — the !important sizing above otherwise clobbers the
   legacy mobile shrink. */
@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="blackjack"] .bj-table{
    padding:30px 16px 46px !important;
    border-radius:20px !important;
  }
  html[data-theme="phase2"] section[data-route="blackjack"] .bj-card{
    width:66px !important; height:94px !important;
  }
  html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-rank{ font-size:15px !important; }
  html[data-theme="phase2"] section[data-route="blackjack"] .bj-card-suit{ font-size:25px !important; }
  html[data-theme="phase2"] section[data-route="blackjack"] .bj-cards:empty::before,
  html[data-theme="phase2"] section[data-route="blackjack"] .bj-cards:empty::after{
    width:66px !important; height:94px !important;
  }
  html[data-theme="phase2"] section[data-route="blackjack"] .bj-pays:not(.bj-pays-result) .bj-pays-main{
    font-size:13px !important; letter-spacing:.24em !important;
  }
}

/* ============================================================
   PHASE 2 — BALANCE-POP CHIP + DIRECTIONAL PILL GLOW
   Phase 1's chip was a rounded pill with a heavy blue→green/red
   gradient + 28-56px coloured halo — read as arcade slot-machine,
   not the matte packdraw vibe. Phase 2 swaps it for a small clean
   matte chip (same family as the Phase 2 toasts): tiny radius,
   hairline accent border, monochrome accent text, no halo. The
   sign + colour carry the message instead of the chip glowing.
   ============================================================ */
html[data-theme="phase2"] .balance-pop{
  font-family:'Inter','Sora',sans-serif !important;
  font-weight:700 !important;
  font-size:14px !important;
  letter-spacing:.02em !important;
  padding:5px 10px !important;
  border-radius:var(--pd-radius-sm, 6px) !important;
  background:var(--pd-bg-1) !important;
  background-image:none !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  text-shadow:none !important;
}
html[data-theme="phase2"] .balance-pop-up{
  color:#4ade80 !important;
  background:var(--pd-bg-1) !important;
  background-image:none !important;
  border:1px solid rgba(74,222,128,.30) !important;
}
html[data-theme="phase2"] .balance-pop-down{
  color:#f87171 !important;
  background:var(--pd-bg-1) !important;
  background-image:none !important;
  border:1px solid rgba(248,113,113,.30) !important;
}
/* Slightly mute the inline currency glyph so it reads as part of the
   chip, not a saturated focal point. The chip's accent comes from
   the bordered text colour now, not the icon. */
html[data-theme="phase2"] .balance-pop .bc-glyph,
html[data-theme="phase2"] .balance-pop img,
html[data-theme="phase2"] .balance-pop svg{
  opacity:.85 !important;
  margin-left:2px;
}

/* Directional pill glow — drop the 56px casino halo for a tight
   1px accent ring + a 14px feather. Same animation lifetime but
   the visual footprint matches the matte chrome. */
html[data-theme="phase2"] .balance.balance-up{
  animation: balanceUpGlowP2 1.0s var(--arcade-out, ease-out) !important;
}
html[data-theme="phase2"] .balance.balance-down{
  animation: balanceDownGlowP2 1.0s var(--arcade-out, ease-out) !important;
}
@keyframes balanceUpGlowP2{
  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  35%  { box-shadow:
           0 0 0 1px rgba(74,222,128,.55),
           0 0 14px rgba(74,222,128,.35); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
@keyframes balanceDownGlowP2{
  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  35%  { box-shadow:
           0 0 0 1px rgba(248,113,113,.50),
           0 0 14px rgba(248,113,113,.30); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* ============================================================
   PHASE 2 — TOASTS, GAME-POPUP, SCROLL PROGRESS BAR
   ============================================================ */

/* Hide the top scroll-progress indicator entirely — user feedback:
   "remove it that slider loding thing". Phase 1's app.js mounts a
   <div class="scroll-progress"> on body that animates a colored bar
   as the page scrolls. CSS-level hide is enough; the JS still updates
   the CSS var but the element renders nothing. */
html[data-theme="phase2"] .scroll-progress{
  display:none !important;
}

/* Toast notifications — packdraw matte. The Phase 1 toast had heavy
   gradient + glow box-shadow + colored radial backdrop. Replace with
   a clean matte panel + thin colored accent strip on the left. */
html[data-theme="phase2"] .toast{
  background:var(--pd-bg-1) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-md) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--pd-text) !important;
  text-shadow:none !important;
  box-shadow:0 12px 28px rgba(0,0,0,.5) !important;
  padding:12px 14px !important;
  grid-template-columns:38px 1fr 22px !important;
  gap:10px !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-theme="phase2"] .toast::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important; top:8px !important; bottom:8px !important;
  width:3px !important;
  border-radius:0 4px 4px 0 !important;
  background:currentColor !important;
  box-shadow:none !important;
  opacity:1 !important;
}
html[data-theme="phase2"] .toast::after{
  display:none !important;
}
html[data-theme="phase2"] .toast-brand{
  width:36px !important; height:36px !important;
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .toast-brand-img{
  width:26px !important; height:26px !important;
  filter:none !important;
}
html[data-theme="phase2"] .toast .toast-body{
  font-family:'Urbanist',sans-serif !important;
  color:var(--pd-text) !important;
  font-weight:600 !important;
}
html[data-theme="phase2"] .toast .toast-body strong{
  color:#fff !important;
}
html[data-theme="phase2"] .toast .toast-close{
  background:transparent !important;
  border:none !important;
  color:var(--pd-text-mute) !important;
  border-radius:var(--pd-radius-sm) !important;
  transform:none !important;
}
html[data-theme="phase2"] .toast .toast-close:hover{
  color:var(--pd-text) !important;
  background:var(--pd-bg-2) !important;
  transform:none !important;
}
html[data-theme="phase2"] .toast .toast-progress{
  background:currentColor !important;
  opacity:.4 !important;
}
/* Variant accent colors — packdraw palette */
html[data-theme="phase2"] .toast.win{
  color:var(--pd-green) !important;
  border-color:var(--pd-line) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.5) !important;
}
html[data-theme="phase2"] .toast.loss{
  color:var(--pd-red) !important;
  border-color:var(--pd-line) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.5) !important;
}
html[data-theme="phase2"] .toast.info{
  color:var(--pd-blue) !important;
  border-color:var(--pd-line) !important;
}
html[data-theme="phase2"] .toast.warn,
html[data-theme="phase2"] .toast.push{
  color:var(--pd-yellow) !important;
  border-color:var(--pd-line) !important;
}

/* In-game result popup (.game-popup) — appears below the game stage
   when a round resolves. Old version had heavy gradients + box-shadows
   that read as a separate dramatic banner. New: subtle matte card with
   color-tinted left border. */
html[data-theme="phase2"] .game-popup{
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-left:3px solid var(--pd-text-mute) !important;
  border-radius:var(--pd-radius-lg) !important;
  box-shadow:none !important;
  padding:14px 18px !important;
  min-height:auto !important;
}
html[data-theme="phase2"] .game-popup.win{
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border-left-color:var(--pd-green) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .game-popup.loss{
  border-left-color:var(--pd-red) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .game-popup.push{
  border-left-color:var(--pd-yellow) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .game-popup .gp-title{
  font-family:'Urbanist',sans-serif !important;
  font-size:16px !important;
  font-weight:800 !important;
  color:var(--pd-text) !important;
}
html[data-theme="phase2"] .game-popup .gp-sub,
html[data-theme="phase2"] .game-popup .gp-line,
html[data-theme="phase2"] .game-popup .gp-text{
  font-family:'Urbanist',sans-serif !important;
  color:var(--pd-text-mute) !important;
  font-size:15px !important;
}

/* Balance tooltip (USD-equivalent on hover over the balance pill) */
html[data-theme="phase2"] .balance-tooltip{
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text) !important;
  font-family:'Urbanist',sans-serif !important;
  box-shadow:var(--pd-shadow-card) !important;
}
html[data-theme="phase2"] .balance-tooltip-value{
  font-family:'Urbanist',sans-serif !important;
  font-weight:700;
  color:var(--pd-text) !important;
}

/* Recently-played strip (if it shows on phase2 routes) — matte */
html[data-theme="phase2"] .recent-played{
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:14px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .recent-played-title{
  font-family:'Urbanist',sans-serif !important;
  color:var(--pd-text-mute) !important;
  font-weight:700 !important;
  letter-spacing:.04em;
}

/* ============================================================
   PHASE 2 — MODALS
   Restyles every modal chrome (backdrop / panel / title / close /
   form inputs / CTAs) in packdraw style. Doesn't change behaviour
   or per-modal markup — all existing modal JS keeps working.
   Covers: deposit, withdraw, auth, register, settings, history,
   limits, age-gate, fair, cf-create, cf-flip, cs-picker, pack-reveal,
   bj-rules, user-popup, rbx, fair-history, etc.
   ============================================================ */

html[data-theme="phase2"] .modal-backdrop{
  background:rgba(0,0,0,.6) !important;
  backdrop-filter:blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
}

html[data-theme="phase2"] .modal{
  background:var(--pd-bg-1) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-radius:20px !important;                            /* match the auth card */
  box-shadow:0 28px 70px -28px rgba(0,0,0,.8) !important;   /* clean premium lift, no glow */
  padding:28px 28px 24px !important;
  font-family:'Manrope',sans-serif !important;
  color:var(--pd-text);
}

html[data-theme="phase2"] .modal-close{
  position:absolute !important;
  /* 40×40 (iOS-friendly tap target); top/right adjusted -3px so the
     visual centre stays where it was at the prior 34×34 size. */
  top:11px !important; right:11px !important;
  width:40px !important; height:40px !important;
  border-radius:var(--pd-radius-sm) !important;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  color:var(--pd-text-mute) !important;
  cursor:pointer;
  font-size:18px !important;
  line-height:1 !important;
  display:grid !important;
  place-items:center;
  transition:color .15s var(--pd-ease-smooth), background .15s var(--pd-ease-smooth) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .modal-close:hover{
  color:var(--pd-text) !important;
  background:var(--pd-surface) !important;
}

html[data-theme="phase2"] .modal-title{
  font-family:'Manrope',sans-serif !important;
  font-size:21px !important;
  font-weight:800 !important;
  color:var(--pd-text) !important;
  margin:0 0 5px !important;
  letter-spacing:-.01em;
  background:none !important;
  -webkit-text-fill-color:var(--pd-text) !important;
}

html[data-theme="phase2"] .modal-sub{
  font-family:'Manrope',sans-serif !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  color:var(--pd-text-mute) !important;
  margin-bottom:18px !important;
}

/* Form inputs inside modals */
html[data-theme="phase2"] .modal input[type="text"],
html[data-theme="phase2"] .modal input[type="number"],
html[data-theme="phase2"] .modal input[type="email"],
html[data-theme="phase2"] .modal input[type="password"],
html[data-theme="phase2"] .modal input[type="search"],
html[data-theme="phase2"] .modal textarea,
html[data-theme="phase2"] .modal select{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  color:var(--pd-text) !important;
  font-family:'Manrope',sans-serif !important;
  font-size:16px !important; /* 16px = iOS won't focus-zoom modal inputs */
  padding:12px 14px !important;
  border-radius:var(--pd-radius-sm) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .modal input:focus,
html[data-theme="phase2"] .modal textarea:focus,
html[data-theme="phase2"] .modal select:focus{
  border-color:var(--pd-blue) !important;
  outline:none !important;
  box-shadow:0 0 0 3px var(--pd-blue-glow) !important;
}
html[data-theme="phase2"] .modal label{
  font-family:'Manrope',sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.08em;
  color:var(--pd-text-mute) !important;
  text-transform:uppercase;
  margin-bottom:6px;
  display:block;
}

/* CTAs inside modals — primary blue (default) / success green / outline */
html[data-theme="phase2"] .modal .btn-primary,
html[data-theme="phase2"] .modal .btn-deposit{
  background:var(--pd-blue) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.02em;
  box-shadow:none !important;
}
html[data-theme="phase2"] .modal .btn-primary:hover,
html[data-theme="phase2"] .modal .btn-deposit:hover{
  background:var(--pd-blue-hover) !important;
}
html[data-theme="phase2"] .modal .btn-primary.big,
html[data-theme="phase2"] .modal .btn-deposit.big{
  height:48px !important;
  padding:0 22px !important;
  font-size:15px !important;
  font-weight:800 !important;
}
html[data-theme="phase2"] .modal .btn-primary .btn-shine,
html[data-theme="phase2"] .modal .btn-deposit .btn-shine{ display:none !important; }
html[data-theme="phase2"] .modal .btn-outline,
html[data-theme="phase2"] .modal .btn-ghost{
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  color:var(--pd-text) !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:700 !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .modal .btn-outline:hover,
html[data-theme="phase2"] .modal .btn-ghost:hover{
  background:var(--pd-surface) !important;
  border-color:var(--pd-line-hover) !important;
}
html[data-theme="phase2"] .modal .btn-cashout{
  background:var(--pd-green) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .modal .btn-cashout:hover{
  background:var(--pd-green-hover) !important;
}

/* Tabs/pill rows that appear inside modals (e.g. crypto picker, settings) */
html[data-theme="phase2"] .modal .seg-toggle,
html[data-theme="phase2"] .modal .tab-strip,
html[data-theme="phase2"] .modal .crypto-tabs,
html[data-theme="phase2"] .modal .auth-tabs{
  display:inline-flex !important;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  padding:4px;
  gap:2px;
}
html[data-theme="phase2"] .modal .seg-btn,
html[data-theme="phase2"] .modal .tab-btn,
html[data-theme="phase2"] .modal .crypto-tab,
html[data-theme="phase2"] .modal .auth-tab{
  height:32px;
  padding:0 14px;
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Manrope',sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:var(--pd-text-mute) !important;
  cursor:pointer;
  box-shadow:none !important;
}
html[data-theme="phase2"] .modal .seg-btn.active,
html[data-theme="phase2"] .modal .tab-btn.active,
html[data-theme="phase2"] .modal .crypto-tab.active,
html[data-theme="phase2"] .modal .auth-tab.active{
  background:var(--pd-surface) !important;
  color:var(--pd-text) !important;
}

/* Crypto coin tiles in the Deposit/Withdraw modals */
html[data-theme="phase2"] .modal .coin-tile,
html[data-theme="phase2"] .modal .deposit-coin,
html[data-theme="phase2"] .modal .crypto-card{
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-md) !important;
  color:var(--pd-text) !important;
  font-family:'Urbanist',sans-serif !important;
  box-shadow:none !important;
  transition:border-color .15s var(--pd-ease-smooth), background .15s var(--pd-ease-smooth);
}
html[data-theme="phase2"] .modal .coin-tile:hover,
html[data-theme="phase2"] .modal .deposit-coin:hover,
html[data-theme="phase2"] .modal .crypto-card:hover{
  background:var(--pd-surface) !important;
  border-color:var(--pd-line-hover) !important;
}

/* Auth modal — SSO buttons (Google / Discord / Roblox) */
html[data-theme="phase2"] .modal .sso-btn,
html[data-theme="phase2"] .modal .auth-sso-btn,
html[data-theme="phase2"] .modal .btn-discord,
html[data-theme="phase2"] .modal .btn-google,
html[data-theme="phase2"] .modal .btn-roblox{
  height:48px !important;
  padding:0 18px !important;
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  color:var(--pd-text) !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  cursor:pointer;
  box-shadow:none !important;
}
html[data-theme="phase2"] .modal .sso-btn:hover,
html[data-theme="phase2"] .modal .auth-sso-btn:hover,
html[data-theme="phase2"] .modal .btn-discord:hover,
html[data-theme="phase2"] .modal .btn-google:hover,
html[data-theme="phase2"] .modal .btn-roblox:hover{
  background:var(--pd-surface) !important;
  border-color:var(--pd-line-hover) !important;
}

/* QR code containers / wallet address copy fields */
html[data-theme="phase2"] .modal .qr-wrap,
html[data-theme="phase2"] .modal .qr-frame,
html[data-theme="phase2"] .modal .wallet-addr,
html[data-theme="phase2"] .modal .address-display{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-md) !important;
  box-shadow:none !important;
}

/* Spacing tweak for content inside */
html[data-theme="phase2"] .modal h2,
html[data-theme="phase2"] .modal h3,
html[data-theme="phase2"] .modal h4{
  font-family:'Urbanist',sans-serif !important;
  color:var(--pd-text) !important;
  background:none !important;
  -webkit-text-fill-color:var(--pd-text) !important;
}
html[data-theme="phase2"] .modal p{
  font-family:'Urbanist',sans-serif !important;
  color:var(--pd-text-mute) !important;
  line-height:1.5;
}
html[data-theme="phase2"] .modal a{
  color:var(--pd-blue-accent) !important;
}

/* Pack reveal modal — keep tier glow but matte the chrome */
html[data-theme="phase2"] .modal-pack-reveal{
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
}
html[data-theme="phase2"] .pack-reveal-card{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-md) !important;
}

/* User popup — profile card style */
/* ============================================================
   PHASE 2 — User-popup modal
   Compact card on the packdraw palette: warm-gray surface, subtle
   pd-line borders, blue accents. The legacy 4-stat grid + biggest-win
   row collapsed down to identity + XP bar + 3 stat cards
   (Deposited / Wagered / Games Played).
   ============================================================ */
html[data-theme="phase2"] .modal.user-popup-card{
  max-width: 420px;
  width: min(420px, 100%);
  padding: 22px !important;
  background: var(--pd-bg-2) !important;
  border: 1px solid var(--pd-line-hover) !important;
  border-radius: var(--pd-radius-lg) !important;
  box-shadow: var(--pd-shadow-lifted) !important;
  color: var(--pd-text) !important;
}
html[data-theme="phase2"] #user-popup .modal-close{
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--pd-line);
  color: var(--pd-text-mute);
  font-size: 18px;
  transition:
    background .15s var(--pd-ease-smooth),
    color .15s var(--pd-ease-smooth),
    border-color .15s var(--pd-ease-smooth);
}
html[data-theme="phase2"] #user-popup .modal-close:hover{
  background: rgba(235,75,75,.14);
  border-color: rgba(235,75,75,.35);
  color: #ff8b8b;
}

/* Hero row — avatar + identity. Tighter than legacy and on the warm-gray
   surface so the avatar pops without a separate gradient bg. */
html[data-theme="phase2"] #user-popup .up-hero{
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--pd-line);
}
html[data-theme="phase2"] #user-popup .up-avatar{
  width: 64px; height: 64px;
  font-size: 28px;
  background: var(--pd-surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px var(--pd-line),
    0 6px 16px rgba(0,0,0,.45);
}
html[data-theme="phase2"] #user-popup .up-name{
  font-size: 21px;
  margin-bottom: 2px;
  color: var(--pd-text);
}
html[data-theme="phase2"] #user-popup .up-meta{
  font-size: 11.5px;
  color: var(--pd-text-mute);
  margin-bottom: 10px;
}
html[data-theme="phase2"] #user-popup .up-tags{
  gap: 6px;
}
html[data-theme="phase2"] #user-popup .up-tag{
  padding: 4px 10px;
  font-size: 10.5px;
  background: rgba(255,255,255,.04);
  border-color: var(--pd-line-hover);
  color: var(--pd-text);
  border-radius: 99px;
}
html[data-theme="phase2"] #user-popup .up-badge-row{
  margin-top: 10px;
}

/* XP bar — sits below the hero. Slim track + pd-blue gradient fill,
   header line shows the current level number on the left and the
   xp-toward-next ratio on the right. */
.up-xp{
  margin-bottom: 16px;
}
.up-xp-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(219,234,254,.55);
}
.up-xp-label strong{
  color: #fff;
  font-weight: 800;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}
.up-xp-progress{
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.up-xp-track{
  height: 6px;
  border-radius: 99px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.04);
  overflow: hidden;
  position: relative;
}
.up-xp-fill{
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #57abf8 0%, #4299e1 50%, #3182ce 100%);
  box-shadow:
    0 0 12px rgba(66,153,225,.45),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition: width .5s cubic-bezier(.32,.72,0,1);
}
@media (prefers-reduced-motion: reduce){
  .up-xp-fill{ transition: none; }
}
html[data-theme="phase2"] .up-xp-head{
  color: var(--pd-text-mute);
}
html[data-theme="phase2"] .up-xp-label strong{
  color: var(--pd-text);
}
html[data-theme="phase2"] .up-xp-track{
  background: rgba(0,0,0,.4);
  border-color: var(--pd-line);
}

/* Stats grid — 3 columns in phase2 (Deposited / Wagered / Games Played).
   Cards are flat pd-bg-2 with a pd-line border, no gradient noise. */
html[data-theme="phase2"] #user-popup .up-stats{
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 0;
}
html[data-theme="phase2"] #user-popup .up-stat{
  padding: 12px 10px;
  background: var(--pd-bg-1);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius-md);
  box-shadow: none;
  text-align: center;
  transition:
    background .15s var(--pd-ease-smooth),
    border-color .15s var(--pd-ease-smooth),
    transform .15s var(--pd-ease-smooth);
}
html[data-theme="phase2"] #user-popup .up-stat:hover{
  background: var(--pd-surface);
  border-color: var(--pd-line-hover);
  transform: none;
  box-shadow: none;
}
html[data-theme="phase2"] #user-popup .up-stat-label{
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--pd-text-mute);
  margin-bottom: 4px;
}
html[data-theme="phase2"] #user-popup .up-stat-value{
  font-size: 15px;
  font-weight: 800;
  color: var(--pd-text);
}

/* Phone — keep 3-col but shrink padding so it doesn't crowd. */
@media (max-width: 420px){
  html[data-theme="phase2"] #user-popup .up-stat{ padding: 10px 6px; }
  html[data-theme="phase2"] #user-popup .up-stat-value{ font-size: 13.5px; }
}

/* ============================================================
   PHASE 2 — Badge detail popover
   Click any chip in the badge row → small floating card. Default
   skin is the legacy navy + teal-Unlocked-text — we override here
   to use the packdraw warm-gray + blue accent so it reads as part
   of the same modal it floats above.
   ============================================================ */
html[data-theme="phase2"] .ach-detail{
  width: 260px;
  padding: 12px;
  border-radius: var(--pd-radius-lg, 12px);
  background: var(--pd-bg-2, #22272b);
  background-image: none;
  border: 1px solid var(--pd-line-hover, rgba(250,250,250,.12));
  box-shadow: var(--pd-shadow-lifted, 0 12px 32px rgba(0,0,0,.5));
  grid-template-columns: 52px 1fr;
  gap: 10px;
}
html[data-theme="phase2"] .ach-detail-art{
  width: 52px; height: 52px;
}
html[data-theme="phase2"] .ach-detail-name{
  font-family: 'Inter', 'SF Pro Display', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--pd-text, #fafafa);
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
}
html[data-theme="phase2"] .ach-detail-tier{
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--pd-text-mute, #7a8084);
  margin-bottom: 4px;
}
html[data-theme="phase2"] .ach-detail-desc{
  font-size: 11.5px;
  color: var(--pd-text, #fafafa);
  opacity: .72;
  margin-bottom: 6px;
}
html[data-theme="phase2"] .ach-detail-when{
  font-size: 10.5px;
  font-weight: 700;
  color: var(--pd-blue-accent, #57abf8);
  letter-spacing: .02em;
}

/* Per-tier rim — keep the tier as the only color cue, dropped down
   in intensity so it doesn't overwhelm the warm-gray surface. */
html[data-theme="phase2"] .ach-detail-mythic{
  border-color: rgba(235,75,75,.45);
  box-shadow: var(--pd-shadow-lifted), 0 0 22px rgba(235,75,75,.15);
}
html[data-theme="phase2"] .ach-detail-legendary{
  border-color: rgba(228,174,51,.45);
  box-shadow: var(--pd-shadow-lifted), 0 0 22px rgba(228,174,51,.15);
}
html[data-theme="phase2"] .ach-detail-epic{
  border-color: rgba(211,44,230,.40);
  box-shadow: var(--pd-shadow-lifted), 0 0 22px rgba(211,44,230,.15);
}
html[data-theme="phase2"] .ach-detail-rare{
  border-color: rgba(75,105,255,.40);
  box-shadow: var(--pd-shadow-lifted), 0 0 22px rgba(75,105,255,.15);
}

/* ============================================================
   PHASE 2 — Live motion polish
   ------------------------------------------------------------
   These are pure-CSS additions that compound the "site feels
   alive" perception: home sections cascade in on first paint,
   the deposit CTA breathes, the LIVE icon in the right rail has
   a heartbeat. Transform/opacity only, no layout reflow, no
   measurable perf cost. All gated on data-theme="phase2" so the
   legacy chrome is untouched.
   ============================================================ */

/* 1. Home-route section cascade.
   Each .pd-section under .pd-home fades up with a 60ms-per-row
   stagger so the page composes itself rather than slamming in
   flat. Re-runs whenever the home route is (re-)activated, since
   .route flips display:none/block which restarts CSS animations.
   `backwards` fill so the pre-animation opacity:0 state is held
   from frame 0 — without it the first frame flashes the final
   state before the keyframes start. */
@keyframes pdSectionIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
html[data-theme="phase2"][data-pd-home="1"] .pd-home > .pd-section {
  animation: pdSectionIn .42s cubic-bezier(.16,1,.3,1) backwards;
}
/* Stagger first 6 rows; beyond that the cumulative delay reads
   as lag instead of rhythm. The 6th+ row just enters un-delayed. */
html[data-theme="phase2"][data-pd-home="1"] .pd-home > .pd-section:nth-child(1) { animation-delay: 0ms;   }
html[data-theme="phase2"][data-pd-home="1"] .pd-home > .pd-section:nth-child(2) { animation-delay: 60ms;  }
html[data-theme="phase2"][data-pd-home="1"] .pd-home > .pd-section:nth-child(3) { animation-delay: 120ms; }
html[data-theme="phase2"][data-pd-home="1"] .pd-home > .pd-section:nth-child(4) { animation-delay: 180ms; }
html[data-theme="phase2"][data-pd-home="1"] .pd-home > .pd-section:nth-child(5) { animation-delay: 240ms; }
html[data-theme="phase2"][data-pd-home="1"] .pd-home > .pd-section:nth-child(6) { animation-delay: 300ms; }

/* 2. Deposit CTA breathing pulse.
   Slow, soft green glow loops on the topbar Deposit button so the
   conversion target catches the eye without nagging. Pauses on
   hover / focus so the click feedback isn't muddled by the loop.
   Scoped to the phase2 topbar slot since pd-chrome.js moves the
   button there at boot. */
@keyframes pdDepositBreathe {
  0%, 100% {
    box-shadow:
      0 4px 14px rgba(72,187,120,.35),
      inset 0 1px 0 rgba(255,255,255,.22);
  }
  50% {
    box-shadow:
      0 6px 22px rgba(72,187,120,.55),
      0 0 30px rgba(72,187,120,.28),
      inset 0 1px 0 rgba(255,255,255,.30);
  }
}
html[data-theme="phase2"] #pd-topbar-right .btn-deposit {
  /* Perpetual green "breathe" glow removed — it was the only animated control
     in the HUD and clashed (green glow on a blue fill), making deposit read as
     a different size/weight than its neighbours. The solid blue fill already
     marks it as the primary CTA. */
  animation: none;
}
html[data-theme="phase2"] #pd-topbar-right .btn-deposit:hover,
html[data-theme="phase2"] #pd-topbar-right .btn-deposit:focus-visible {
  animation-play-state: paused;
}

/* NOTE: a LIVE-icon heartbeat is intentionally NOT added here —
   the existing `pd-pulse` keyframe on .pd-rail-title-icon.pd-icon-live
   (declared near the top of the phase2 section above) already runs a
   1.6s opacity pulse on the same element. Adding a scale animation
   would override the existing opacity loop via cascade and read as
   a downgrade. Leave the dot alone. */

/* Respect motion-reduced preference — pulses + cascade go static. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="phase2"][data-pd-home="1"] .pd-home > .pd-section,
  html[data-theme="phase2"] #pd-topbar-right .btn-deposit {
    animation: none;
  }
}

/* ============================================================
   PHASE 2 — PROFILE / ACCOUNT ROUTES SKIN
   Covers profile, affiliate, admin (and other secondary routes).
   ============================================================ */

html[data-theme="phase2"] section[data-route="profile"],
html[data-theme="phase2"] section[data-route="affiliate"],
html[data-theme="phase2"] section[data-route="admin"]{
  padding:0;
}
html[data-theme="phase2"] section[data-route="profile"] .game-shell,
html[data-theme="phase2"] section[data-route="affiliate"] .game-shell,
html[data-theme="phase2"] section[data-route="admin"] .game-shell{
  max-width:1280px;
  margin:0 auto;
  padding:20px 28px 48px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Identity card */
html[data-theme="phase2"] section[data-route="profile"] .profile-card2,
html[data-theme="phase2"] section[data-route="profile"] .profile-card{
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  padding:22px !important;
  box-shadow:none !important;
  margin-bottom:14px;
  color:var(--pd-text) !important;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-card2-identity{
  display:flex !important; align-items:center;
  gap:18px;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-card2-avatar{
  width:88px; height:88px;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:40px !important;
  flex-shrink:0;
  overflow:hidden;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-card2-name{
  font-family:'Urbanist',sans-serif !important;
  font-size:22px !important;
  font-weight:800 !important;
  color:var(--pd-text) !important;
  background:none !important;
  -webkit-text-fill-color:var(--pd-text) !important;
  margin-bottom:4px;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-card2-uid{
  font-family:'Urbanist',sans-serif !important;
  font-size:14px;
  color:var(--pd-text-mute) !important;
  margin-bottom:10px;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-card2-uid code{
  background:var(--pd-bg-1) !important;
  color:var(--pd-text) !important;
  padding:2px 6px;
  border-radius:4px;
  font-family:'JetBrains Mono','Urbanist',monospace !important;
  font-size:13px;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-card2-meta{
  font-family:'Urbanist',sans-serif !important;
  font-size:14px;
  color:var(--pd-text-mute) !important;
  margin-top:8px;
}

/* XP row */
html[data-theme="phase2"] section[data-route="profile"] .profile-xp-row{
  display:flex !important; align-items:center;
  gap:10px;
  margin-top:6px;
  flex-wrap:wrap;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-xp-level{
  background:var(--pd-blue) !important;
  background-image:none !important;
  color:#fff !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.08em;
  padding:4px 10px;
  border-radius:var(--pd-radius-sm);
  border:none !important;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-xp-bar{
  flex:1 1 200px;
  height:8px;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:4px;
  overflow:hidden;
  min-width:120px;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-xp-fill{
  height:100% !important;
  background:var(--pd-blue) !important;
  background-image:linear-gradient(90deg, var(--pd-blue), var(--pd-blue-accent)) !important;
  border-radius:4px;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-xp-text{
  font-family:'Urbanist',sans-serif !important;
  font-size:13px;
  font-weight:700;
  color:var(--pd-text-mute) !important;
  font-variant-numeric:tabular-nums;
}

/* Stats row (3 tiles: deposited / wagered / bets) */
html[data-theme="phase2"] section[data-route="profile"] .profile-card2-stats{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
@media (max-width: 760px){
  html[data-theme="phase2"] section[data-route="profile"] .profile-card2-stats{ grid-template-columns:1fr; }
}
html[data-theme="phase2"] section[data-route="profile"] .profile-stat2{
  display:flex !important; align-items:center;
  gap:14px;
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-md) !important;
  padding:14px 16px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-stat2-icon{
  width:38px; height:38px;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm);
  display:grid; place-items:center;
  color:var(--pd-blue-accent) !important;
  flex-shrink:0;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-stat2-label{
  font-family:'Urbanist',sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.12em;
  color:var(--pd-text-mute) !important;
  text-transform:uppercase;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-stat2-value{
  font-family:'Urbanist',sans-serif !important;
  font-size:18px !important;
  font-weight:800 !important;
  color:var(--pd-text) !important;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
  margin-top:2px;
}

/* Profile sub-cards: biggest win / total rounds / activity etc. */
html[data-theme="phase2"] section[data-route="profile"] .profile-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  gap:14px;
  margin-top:14px;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-card-label{
  font-family:'Urbanist',sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.08em;
  color:var(--pd-text-mute) !important;
  text-transform:uppercase;
  margin-bottom:4px;
}

/* Affiliate / Admin routes — basic skin so they don't look broken */
html[data-theme="phase2"] section[data-route="affiliate"] .affiliate-shell,
html[data-theme="phase2"] section[data-route="admin"] .admin-shell{
  background:transparent !important;
}
html[data-theme="phase2"] section[data-route="affiliate"] h1,
html[data-theme="phase2"] section[data-route="affiliate"] h2,
html[data-theme="phase2"] section[data-route="admin"] h1,
html[data-theme="phase2"] section[data-route="admin"] h2{
  font-family:'Urbanist',sans-serif !important;
  color:var(--pd-text) !important;
  background:none !important;
  -webkit-text-fill-color:var(--pd-text) !important;
}

/* Privacy / TOS / Responsible Play / etc. — long-form content pages */
html[data-theme="phase2"] section[data-route="privacy"],
html[data-theme="phase2"] section[data-route="tos"],
html[data-theme="phase2"] section[data-route="responsible"]{
  padding:0;
}
html[data-theme="phase2"] section[data-route="privacy"] .game-shell,
html[data-theme="phase2"] section[data-route="tos"] .game-shell,
html[data-theme="phase2"] section[data-route="responsible"] .game-shell,
html[data-theme="phase2"] section[data-route="privacy"] .legal-shell,
html[data-theme="phase2"] section[data-route="tos"] .legal-shell,
html[data-theme="phase2"] section[data-route="responsible"] .legal-shell{
  max-width:880px;
  margin:0 auto;
  padding:32px 28px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:var(--pd-text);
  font-family:'Urbanist',sans-serif;
  line-height:1.6;
}
html[data-theme="phase2"] section[data-route="privacy"] h1,
html[data-theme="phase2"] section[data-route="privacy"] h2,
html[data-theme="phase2"] section[data-route="privacy"] h3,
html[data-theme="phase2"] section[data-route="tos"] h1,
html[data-theme="phase2"] section[data-route="tos"] h2,
html[data-theme="phase2"] section[data-route="tos"] h3,
html[data-theme="phase2"] section[data-route="responsible"] h1,
html[data-theme="phase2"] section[data-route="responsible"] h2,
html[data-theme="phase2"] section[data-route="responsible"] h3{
  font-family:'Urbanist',sans-serif !important;
  color:var(--pd-text) !important;
  background:none !important;
  -webkit-text-fill-color:var(--pd-text) !important;
}
html[data-theme="phase2"] section[data-route="privacy"] p,
html[data-theme="phase2"] section[data-route="tos"] p,
html[data-theme="phase2"] section[data-route="responsible"] p,
html[data-theme="phase2"] section[data-route="privacy"] li,
html[data-theme="phase2"] section[data-route="tos"] li,
html[data-theme="phase2"] section[data-route="responsible"] li{
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist',sans-serif !important;
}
html[data-theme="phase2"] section[data-route="privacy"] a,
html[data-theme="phase2"] section[data-route="tos"] a,
html[data-theme="phase2"] section[data-route="responsible"] a{
  color:var(--pd-blue-accent) !important;
}
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-slider{
  width:100%;
  -webkit-appearance:none; appearance:none;
  height:6px;
  background:var(--pd-bg-1);
  border-radius:3px;
  outline:none;
}
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px; height:18px;
  background:var(--pd-blue);
  border-radius:50%;
  cursor:pointer;
  border:2px solid var(--pd-text);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-slider::-moz-range-thumb{
  width:18px; height:18px;
  background:var(--pd-blue);
  border-radius:50%;
  cursor:pointer;
  border:2px solid var(--pd-text);
}
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-slider-meta{
  display:flex; justify-content:space-between;
  font-family:'Urbanist',sans-serif !important;
  font-size:13px; font-weight:700;
  color:var(--pd-text-mute);
  margin-top:6px;
}
html[data-theme="phase2"] section[data-route="upgrader"] #upgrader-spin{
  background:var(--pd-green) !important;
  border:none !important;
  color:#fff !important;
  height:48px !important;
  padding:0 22px !important;
  border-radius:var(--pd-radius-sm) !important;
  font-family:'Urbanist',sans-serif !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:.02em;
  box-shadow:none !important;
  margin-top:4px;
}
html[data-theme="phase2"] section[data-route="upgrader"] #upgrader-spin:hover{
  background:var(--pd-green-hover) !important;
}
html[data-theme="phase2"] section[data-route="upgrader"] #upgrader-spin .btn-shine{ display:none; }

/* Stats row (history + live feed) restyled */
html[data-theme="phase2"] section[data-route="upgrader"] .stats-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:0;
}
@media (max-width: 760px){
  html[data-theme="phase2"] section[data-route="upgrader"] .stats-row{
    grid-template-columns:1fr;
  }
}
html[data-theme="phase2"] section[data-route="upgrader"] .stats-col{
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-lg);
  padding:16px;
}
html[data-theme="phase2"] section[data-route="upgrader"] .stats-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
html[data-theme="phase2"] section[data-route="upgrader"] .stats-title{
  font-family:'Urbanist',sans-serif !important;
  font-size:14px; font-weight:700;
  letter-spacing:.08em;
  color:var(--pd-text-mute) !important;
  text-transform:uppercase;
}
html[data-theme="phase2"] section[data-route="upgrader"] .stats-meta{
  font-family:'Urbanist',sans-serif !important;
  font-size:14px; font-weight:700;
  color:var(--pd-text-mute) !important;
}
html[data-theme="phase2"] section[data-route="upgrader"] .stats-empty{
  color:var(--pd-text-mute);
  font-family:'Urbanist',sans-serif;
  font-size:15px;
  text-align:center;
  padding:20px 12px;
}

/* ===================================================================
   New Packs — packdraw-vibe polish
   Hover affordances (star + eye chips), mouse-tracked 3D tilt, lift,
   diagonal foil sheen sweep. JS sets --pd-tilt-x/--pd-tilt-y inline
   on mousemove; CSS reads those vars in the transform.
   =================================================================== */
.pd-pack-tile-wrap{
  /* Give the card depth context so rotateX/Y actually tilts in 3D
     instead of just shearing the 2D plane. */
  perspective: 900px;
}
.pd-pack-tile{
  transform-style: preserve-3d;
  transform:
    rotateX(var(--pd-tilt-x, 0deg))
    rotateY(var(--pd-tilt-y, 0deg));
  will-change: transform;
}
/* Existing rule already sets transition + hover translate; layer the
   tilt-aware transform over it. The hover state also adds a glow ring
   so the focused card pops out of the row. */
.pd-pack-tile-wrap:hover .pd-pack-tile{
  transform:
    translateY(-6px)
    rotateX(var(--pd-tilt-x, 0deg))
    rotateY(var(--pd-tilt-y, 0deg));
  box-shadow:
    0 18px 38px rgba(0,0,0,.55),
    0 0 24px color-mix(in srgb, var(--pd-blue-accent, #57abf8) 30%, transparent);
}

/* Diagonal foil sheen sweep on hover */
.pd-pack-tile::after{
  content:'';
  position:absolute;
  top:0; left:-60%;
  width:50%; height:100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.18) 50%,
    transparent 100%);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.32,.72,0,1);
  pointer-events:none;
  z-index:2;
}
.pd-pack-tile-wrap:hover .pd-pack-tile::after{ left: 130%; }

/* Floating action chips (star + eye) — top-right corner */
.pd-pack-tile-actions{
  position:absolute;
  top:10px; right:10px;
  display:flex; gap:6px;
  z-index:3;
  opacity:0;
  transform: translateY(-4px);
  transition:
    opacity .18s cubic-bezier(.32,.72,0,1),
    transform .22s var(--pd-ease-spring);
  pointer-events:none;
}
.pd-pack-tile-wrap:hover .pd-pack-tile-actions{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.pd-pack-tile-chip{
  width:30px; height:30px;
  display:grid; place-items:center;
  border-radius:8px;
  background: rgba(15,18,26,.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  cursor:pointer;
  padding:0;
  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}
.pd-pack-tile-chip:hover{
  background: rgba(30,40,55,.92);
  color:#fff;
  transform: translateY(-1px);
}
.pd-pack-tile-chip.is-active{ color: var(--pd-yellow, #ffd60a); }
.pd-pack-tile-chip svg{ width:16px; height:16px; display:block; }

/* Reduced-motion: kill tilt + sheen sweep but keep the lift so the
   hover state still has affordance. iOS Safari fires this for the
   system "Reduce Motion" toggle as well. */
@media (prefers-reduced-motion: reduce){
  .pd-pack-tile{ transform: none; }
  .pd-pack-tile-wrap:hover .pd-pack-tile{
    transform: translateY(-4px);
    box-shadow: none;
  }
  .pd-pack-tile::after{ display:none; }
}

/* ===================================================================
   Pack Preview Modal — opened by the eye-icon on a pack tile.
   Shows every item in the pack with its drop % + max payout, sorted
   rarest-first so the chase items sit at the top of the grid.
   =================================================================== */
.pd-preview-backdrop{
  position: fixed; inset: 0;
  background: rgba(7,10,16,.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 1200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 4vw;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .2s ease;
}
.pd-preview-backdrop.open{
  display: flex;
  opacity: 1;
}
.pd-preview-panel{
  width: 100%;
  max-width: 1080px;
  background: var(--pd-bg-1, #0f131c);
  border: 1px solid var(--pd-line, rgba(255,255,255,.08));
  border-radius: var(--pd-radius-xl, 16px);
  padding: 24px 26px 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform: translateY(14px) scale(.98);
  transition: transform .22s var(--pd-ease-spring);
  position: relative;
}
.pd-preview-backdrop.open .pd-preview-panel{
  transform: translateY(0) scale(1);
}
.pd-preview-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.pd-preview-title{
  font-family:'Urbanist',sans-serif;
  font-weight:800; font-size:20px;
  color:var(--pd-text);
  display:flex; align-items:center; gap:10px;
}
.pd-preview-title-price{
  font-family:'Urbanist',sans-serif;
  font-weight:700; font-size:16px;
  color:var(--pd-text-mute);
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--pd-line);
  border-radius:99px;
}
.pd-preview-close{
  width:34px; height:34px;
  background: rgba(255,255,255,.05);
  border:1px solid var(--pd-line);
  border-radius:8px;
  color:var(--pd-text-mute);
  font-size:18px;
  cursor:pointer;
  display:grid; place-items:center;
  transition: background .15s ease, color .15s ease;
}
.pd-preview-close:hover{
  background: rgba(255,255,255,.1);
  color:#fff;
}
.pd-preview-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 880px){
  .pd-preview-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 620px){
  .pd-preview-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 420px){
  .pd-preview-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.pd-preview-item{
  position:relative;
  background: var(--pd-bg-2);
  border:1px solid var(--pd-line);
  border-radius: var(--pd-radius-lg, 12px);
  padding: 28px 10px 12px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  overflow:hidden;
  --pd-tier-glow: var(--pd-tier-common, #8aa1c8);
}
.pd-preview-item[data-rarity="uncommon"] { --pd-tier-glow: var(--pd-tier-uncommon, #5cb04a); }
.pd-preview-item[data-rarity="rare"]     { --pd-tier-glow: var(--pd-tier-rare,     #3284ff); }
.pd-preview-item[data-rarity="epic"]     { --pd-tier-glow: var(--pd-tier-epic,     #a560ff); }
.pd-preview-item[data-rarity="legendary"]{ --pd-tier-glow: var(--pd-tier-legendary,#ff8a2e); }
.pd-preview-item[data-rarity="mythic"]   { --pd-tier-glow: var(--pd-tier-mythic,   #ff3263); }
.pd-preview-item::before{
  content:'';
  position:absolute; left:0; right:0; bottom:-30%; height: 70%;
  background: radial-gradient(60% 60% at 50% 100%, var(--pd-tier-glow) 0%, transparent 70%);
  opacity:.18;
  pointer-events:none;
}
.pd-preview-item-drop{
  position:absolute; top:8px; left:10px;
  font-family:'Urbanist',sans-serif;
  font-weight:800; font-size:13px;
  color: rgba(255,255,255,.6);
  letter-spacing:.04em;
}
.pd-preview-item-img-wrap{
  position:relative;
  width:78px; height:78px;
  margin: 4px 0 8px;
  display:grid; place-items:center;
}
.pd-preview-item-img-wrap::after{
  content:'';
  position:absolute; inset:-8px;
  background: radial-gradient(circle, var(--pd-tier-glow) 0%, transparent 60%);
  opacity:.30;
  filter: blur(10px);
  z-index:0;
}
.pd-preview-item-img{
  position:relative; z-index:1;
  max-width:100%; max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.pd-preview-item-name{
  font-family:'Urbanist',sans-serif;
  font-weight:600; font-size:14px;
  color: var(--pd-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
.pd-preview-item-price{
  font-family:'Urbanist',sans-serif;
  font-weight:800; font-size:15px;
  color:#fff;
  margin-top:3px;
  display:inline-flex; align-items:center; gap:4px;
}

/* Watch view error banner (battle 404 / deleted) — replaces the empty
   stage so the user has a way out instead of being stuck on a hung
   "Waiting…" screen. */
.cs-watch-error{
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:14px;
  padding: 64px 24px;
  text-align:center;
  font-family:'Urbanist',sans-serif;
  font-size: 15px; font-weight:600;
  color: var(--pd-text-mute, rgba(255,255,255,.65));
  background: var(--pd-bg-2, rgba(255,255,255,.02));
  border: 1px solid var(--pd-line, rgba(255,255,255,.06));
  border-radius: var(--pd-radius-lg, 12px);
  margin: 24px 0;
}
.cs-watch-error-back{
  background: var(--pd-blue, #3b82f6);
  color:#fff;
  border:none;
  border-radius: var(--pd-radius-sm, 8px);
  padding: 10px 22px;
  font-family:'Urbanist',sans-serif;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.cs-watch-error-back:hover{
  background: var(--pd-blue-hover, #2563eb);
  transform: translateY(-1px);
}
/* Retired-item placeholder in the loot grid — same dim look as the
   empty cells, so it's visually distinct from real wins without being
   alarming. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-missing{
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-grid-cell.cs-wp-grid-missing::before{
  content: none;
}

/* ===================================================================
   Pack sort toolbar — shared between the cases catalog (above the grid)
   and the picker modal (inside .cs-picker-head). One JS state powers
   both, so the active pill mirrors across surfaces.
   =================================================================== */
.cs-sort-bar{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
  margin: 6px 0 16px;
  font-family:'Urbanist',sans-serif;
}
.cs-sort-bar-picker{
  margin-top: 10px;
}
.cs-sort-label{
  font-size:14px; font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--pd-text-mute, rgba(255,255,255,.55));
}
.cs-sort-pills{
  display:inline-flex;
  background: var(--pd-bg-2, rgba(255,255,255,.04));
  border: 1px solid var(--pd-line, rgba(255,255,255,.08));
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.cs-sort-pill{
  appearance: none;
  background: transparent;
  border: none;
  padding: 6px 12px;
  border-radius: 999px;
  font-family:'Urbanist',sans-serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: .02em;
  color: var(--pd-text-mute, rgba(255,255,255,.55));
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cs-sort-pill:hover{ color: var(--pd-text, #fff); }
.cs-sort-pill.active{
  background: var(--pd-surface, rgba(255,255,255,.08));
  color: var(--pd-text, #fff);
}

/* Picker tile — step pill (−/qty/+) shown on selected tiles so users
   can add/remove without leaving the modal. Floats at the bottom of
   the tile over the art, mirroring the strip-tile pattern. */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-step{
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08);
  z-index: 4;
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-step-btn{
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-family:'Sora',sans-serif;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, transform .12s ease;
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-step-btn:hover{
  background: var(--pd-blue-accent, #57abf8);
  transform: scale(1.06);
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-step-qty{
  min-width: 22px;
  text-align: center;
  font-family:'Sora',sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}

/* ===================================================================
   Per-slot "Call Bot" CTA — rendered as its own row below the empty
   player column's head. One click fills THAT seat with a single bot;
   other empty seats stay open for real humans.
   Solid brand-blue button, full column width, matches the "DEPOSIT"
   topbar pill + "+ Create Pack Battle" CTA palette. No more cramming
   the pill inside the head's flex row — that's what wrapped the
   "Call" / "Bot" label onto two lines.
   =================================================================== */
/* Call Bot pill — inline in the empty slot's header row, on the far
   right (where a filled slot's balance pip sits). Mirrors bloxflip's
   placement so the empty-slot header reads as a single tidy row.
   Compact text-only pill — no avatar icon, no full-width stretch. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-call-bot{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 14px;
  margin-left: auto;
  border-radius: var(--pd-radius-sm, 8px);
  background: var(--pd-blue, #4299e1);
  border: none;
  color: #fff;
  font-family:'Urbanist',sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .03em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(66,153,225,.28);
  transition:
    background .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-call-bot:hover{
  background: var(--pd-blue-hover, #3182ce);
  box-shadow: 0 6px 16px rgba(66,153,225,.38);
  transform: translateY(-1px);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-call-bot:active{
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(66,153,225,.30);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-call-bot:disabled,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col .cs-wp-call-bot.is-busy{
  opacity: .55;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* Pulse removed — bloxflip's reference UI is intentionally clean, the
   solid blue pill against the muted "Looking for player…" row already
   reads as the primary action. Pulsing on top muddies the design and
   competes with the empty-avatar spinner that hints "waiting…". The
   hover lift + soft glow are enough feedback for clickability. */

/* ===================================================================
   Optimistic bot stub — paintCallBotStub replaces an empty slot's DOM
   with a "Pack Bot N — Joining…" head BEFORE the server's call-bots
   roundtrip lands. These styles animate the stub in (slide+fade from
   the dashed empty state) and run the trailing-dots loop on the
   "Joining" label so the slot feels alive while the request is in
   flight. --cs-wp-stub-delay is set by JS per stub when filling
   multiple slots (Call All Bots) to stagger the entrance.
   =================================================================== */
@keyframes cs-wp-bot-stub-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col.cs-wp-bot-stub{
  animation: cs-wp-bot-stub-in .26s cubic-bezier(.18,.85,.32,1.05) both;
  animation-delay: var(--cs-wp-stub-delay, 0ms);
  /* Subtle cyan halo while the stub is in flight so it reads as
     "joining" not "joined". Server response replaces the stub with
     the real bot row, which doesn't carry this class. */
  border-color: rgba(87,171,248,.40) !important;
  box-shadow: 0 0 0 1px rgba(87,171,248,.20), 0 10px 28px rgba(87,171,248,.18);
}

/* Trailing-dots loop on "Joining" — three dots fade in one at a time
   then loop. CSS-only, no JS keepalive needed. */
@keyframes cs-wp-bot-stub-dots {
  0%   { content: ''       }
  25%  { content: '.'      }
  50%  { content: '..'     }
  75%  { content: '...'    }
  100% { content: '...'    }
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-bot-stub-dots{
  color: rgba(255,255,255,.55);
  font-family:'Urbanist',sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-bot-stub-ellipsis::after{
  content: '';
  display:inline-block;
  width: 1ch;
  animation: cs-wp-bot-stub-dots 1.2s steps(4, end) infinite;
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-bot-stub-ellipsis::after{
    animation: none;
    content: '...';
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-col.cs-wp-bot-stub{
    animation: none;
  }
}

/* "Call All Bots" topbar button — the existing phase2 rule above
   (~line 29686) already covers gradient, hover lift, disabled state.
   Only adding a press feedback + a 'Calling…' busy hint here so the
   button doesn't read as inert during the in-flight roundtrip. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-call-bots:active{
  transform: translateY(0) !important;
  box-shadow: 0 4px 10px rgba(59,130,246,.30) !important;
}

/* ===================================================================
   Fairness modals — packdraw/phase2 revamp.
   Covers all three: history list, per-round detail, seeds editor.
   Same visual contract as .pd-preview-backdrop / .modal-cs-picker so
   the whole modal family reads as one design system. The legacy
   Inter+cyan styling above this block stays for non-phase2 fallback;
   phase2 overrides (data-theme=phase2 on <html>) win site-wide.
   =================================================================== */

html[data-theme="phase2"] .modal-backdrop:where(#fair-history-modal, #fair-detail-modal, #fair-seeds-modal){
  background: rgba(7,10,16,.78);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
/* Keep the topbar (and its balance pill) sharp + steady while a Provably Fair
   modal is open. The pill itself never changes on open (verified) — but the
   backdrop's blur+dim washes over the fixed topbar as it fades in, which read
   as the balance "pulsing/glowing" just from opening the fairness panel.
   Lifting the topbar above the backdrop stops that. Gated to tall viewports so
   the lifted (fixed) topbar can't overlap the vertically-centred modal panel
   on short windows; those keep the prior behaviour. */
@media (min-height: 860px){
  html[data-theme="phase2"]:has(#fair-seeds-modal.open) #pd-topbar,
  html[data-theme="phase2"]:has(#fair-history-modal.open) #pd-topbar,
  html[data-theme="phase2"]:has(#fair-detail-modal.open) #pd-topbar{
    z-index: 260;
  }
}
html[data-theme="phase2"] .modal-fair{
  width: min(720px, 100%);
  max-width: 92vw;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--pd-blue-accent, #57abf8) 6%, transparent), transparent 60%),
    var(--pd-bg-1) !important;
  border: 1px solid var(--pd-line) !important;
  border-radius: var(--pd-radius-xl, 16px) !important;
  padding: 26px 28px 24px !important;
  color: var(--pd-text);
  box-shadow: 0 30px 80px rgba(0,0,0,.6) !important;
  font-family:'Urbanist', sans-serif !important;
}
html[data-theme="phase2"] .modal-fair .modal-title{
  font-family:'Urbanist', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: var(--pd-text) !important;
  margin: 0 0 6px !important;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Shield+check verify badge sits next to the modal title — the same
   glyph the fair-pill button uses, so the modal advertises its
   purpose at a glance. */
html[data-theme="phase2"] .modal-fair .modal-title::before{
  content:'';
  width: 20px; height: 20px;
  display: inline-block;
  flex-shrink: 0;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3Z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
html[data-theme="phase2"] .modal-fair .modal-sub{
  font-family:'Urbanist', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--pd-text-mute) !important;
  margin: 0 0 18px !important;
  line-height: 1.5;
}
html[data-theme="phase2"] .modal-fair code{
  font-family: 'Sora','SF Mono', ui-monospace, monospace !important;
  font-size: 14px !important;
  color: var(--pd-text) !important;
  font-weight: 600 !important;
  background: transparent !important;
}
html[data-theme="phase2"] .modal-fair .modal-close{
  /* 40×40 iOS-friendly tap target; top/right pulled in 4px so the
     visual centre lands where the old 32×32 button's did. */
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--pd-bg-2) !important;
  border: 1px solid var(--pd-line) !important;
  color: var(--pd-text-mute) !important;
  font-size: 16px;
  display: grid; place-items: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  top: 14px; right: 14px;
}
html[data-theme="phase2"] .modal-fair .modal-close:hover{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border-color: var(--pd-line-hover) !important;
}

/* History table — clean rows with column-aligned values, blue hover. */
html[data-theme="phase2"] .modal-fair .fair-table{
  background: transparent !important;
  border: 1px solid var(--pd-line) !important;
  border-radius: var(--pd-radius-lg, 12px) !important;
  overflow: hidden;
  margin-bottom: 14px;
}
html[data-theme="phase2"] .modal-fair .fair-table-head,
html[data-theme="phase2"] .modal-fair .fair-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.4fr !important;
  gap: 14px;
  padding: 12px 16px;
  align-items: center;
  font-family:'Urbanist', sans-serif !important;
}
html[data-theme="phase2"] .modal-fair .fair-table-head{
  background: var(--pd-bg-2) !important;
  font-size: 13px !important;
  letter-spacing: .10em;
  font-weight: 800 !important;
  color: var(--pd-text-mute) !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--pd-line);
}
html[data-theme="phase2"] .modal-fair .fair-table-body{
  max-height: 440px;
  overflow-y: auto;
  scrollbar-width: thin;
}
html[data-theme="phase2"] .modal-fair .fair-row{
  background: transparent !important;
  border-top: 1px solid var(--pd-line) !important;
  font-size: 15px !important;
  color: var(--pd-text) !important;
  font-weight: 600;
  transition: background .15s ease;
}
html[data-theme="phase2"] .modal-fair .fair-row:hover{
  background: color-mix(in srgb, var(--pd-blue-accent, #57abf8) 8%, transparent) !important;
}
html[data-theme="phase2"] .modal-fair .fair-row .fr-mult{
  font-family:'Urbanist', sans-serif !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
}
html[data-theme="phase2"] .modal-fair .fair-row .fr-mult.win  { color: var(--pd-green, #48bb78); }
html[data-theme="phase2"] .modal-fair .fair-row .fr-mult.loss { color: var(--pd-text-mute); }
html[data-theme="phase2"] .modal-fair .fair-row .fr-mult.push { color: var(--pd-text-mute); }
html[data-theme="phase2"] .modal-fair .fair-row .fr-link{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.35);
  color: #86efac !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
html[data-theme="phase2"] .modal-fair .fair-row .fr-link::before{
  content:'';
  width: 11px; height: 11px;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3Z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
html[data-theme="phase2"] .modal-fair .fair-row .fr-link:hover{
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.55);
  color: #bbf7d0 !important;
  text-decoration: none !important;
}
html[data-theme="phase2"] .modal-fair .fair-row .fr-date{
  color: var(--pd-text-mute) !important;
  font-size: 14px !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
html[data-theme="phase2"] .modal-fair .fair-empty{
  padding: 52px 16px;
  text-align: center;
  color: var(--pd-text-mute);
  font-family:'Urbanist', sans-serif;
  font-size: 15px;
  font-weight: 600;
}

/* Pager — clean square pills, blue-ring active state */
html[data-theme="phase2"] .modal-fair .fair-pager{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 4px;
  flex-wrap: wrap;
  background: transparent;
}
html[data-theme="phase2"] .modal-fair .fair-pager button{
  min-width: 34px; height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family:'Urbanist', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  background: var(--pd-bg-2) !important;
  border: 1px solid var(--pd-line) !important;
  color: var(--pd-text-mute) !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
html[data-theme="phase2"] .modal-fair .fair-pager button:not(:disabled):hover{
  background: rgba(255,255,255,.04) !important;
  border-color: var(--pd-line-hover) !important;
  color: var(--pd-text) !important;
}
html[data-theme="phase2"] .modal-fair .fair-pager button.active{
  background: var(--pd-blue, #4299e1) !important;
  border-color: var(--pd-blue, #4299e1) !important;
  color: #fff !important;
}
html[data-theme="phase2"] .modal-fair .fair-pager button:disabled{
  opacity: .45;
  cursor: not-allowed;
}
html[data-theme="phase2"] .modal-fair .fair-pager .fp-ellipsis{
  color: var(--pd-text-mute);
  padding: 0 4px;
}

/* Detail modal — field rows + verify CTA */
html[data-theme="phase2"] .modal-fair .fair-fields{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
html[data-theme="phase2"] .modal-fair .fair-label{
  font-family:'Urbanist', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: .08em;
  font-weight: 800 !important;
  color: var(--pd-text-mute) !important;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
html[data-theme="phase2"] .modal-fair .fair-input-row{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--pd-bg-2) !important;
  border: 1px solid var(--pd-line) !important;
  transition: border-color .15s ease;
}
html[data-theme="phase2"] .modal-fair .fair-input-row:focus-within{
  border-color: var(--pd-blue-accent, #57abf8) !important;
}
html[data-theme="phase2"] .modal-fair .fair-input-row input{
  flex: 1; min-width: 0;
  background: transparent;
  border: 0; outline: 0;
  color: var(--pd-text) !important;
  font-family:'Sora','SF Mono', ui-monospace, monospace !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
html[data-theme="phase2"] .modal-fair .fair-input-row code{
  flex: 1; min-width: 0;
  color: var(--pd-text) !important;
}
html[data-theme="phase2"] .modal-fair .fair-input-row .btn,
html[data-theme="phase2"] .modal-fair .fair-input-row .fair-copy{
  padding: 6px 12px !important;
  font-family:'Urbanist', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  border-radius: 8px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--pd-line) !important;
  color: var(--pd-text-mute) !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
html[data-theme="phase2"] .modal-fair .fair-input-row .btn:hover,
html[data-theme="phase2"] .modal-fair .fair-input-row .fair-copy:hover{
  background: rgba(255,255,255,.08) !important;
  color: var(--pd-text) !important;
}

/* "Hidden until rotated" mini-pill in detail modal */
html[data-theme="phase2"] .modal-fair .fair-pill-mini{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family:'Urbanist', sans-serif;
  font-size: 9px;
  letter-spacing: .10em;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(66,153,225,.14);
  border: 1px solid rgba(66,153,225,.40);
  color: var(--pd-blue-accent, #57abf8);
}
html[data-theme="phase2"] .modal-fair .fair-pill-mini.hidden-pill{
  background: rgba(148,163,184,.12);
  border-color: rgba(148,163,184,.32);
  color: #cbd5e1;
}
html[data-theme="phase2"] .modal-fair .fair-pill-mini.next{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.40);
  color: #86efac;
}

/* External verify CTA — full-width blue button */
html[data-theme="phase2"] .modal-fair .fair-verify-btn{
  display: flex !important;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 18px !important;
  border-radius: var(--pd-radius-sm, 8px) !important;
  background: var(--pd-blue, #4299e1) !important;
  color: #fff !important;
  font-family:'Urbanist', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(66,153,225,.32);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
html[data-theme="phase2"] .modal-fair .fair-verify-btn:hover{
  background: var(--pd-blue-hover, #3182ce) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(66,153,225,.45);
}

/* Seeds modal: action row at the bottom (Save + Rotate Server Seed) */
html[data-theme="phase2"] .modal-fair .fair-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
html[data-theme="phase2"] .modal-fair .fair-actions .btn{
  flex: 1;
  min-width: 160px;
  padding: 12px 18px !important;
  border-radius: var(--pd-radius-sm, 8px) !important;
  font-family:'Urbanist', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  border: 1px solid var(--pd-line) !important;
  background: var(--pd-bg-2) !important;
  color: var(--pd-text) !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
html[data-theme="phase2"] .modal-fair .fair-actions .btn:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: var(--pd-line-hover) !important;
  transform: translateY(-1px);
}
/* Rotate Server Seed is the "danger" action — re-roll the seed,
   reveal the old one. Distinguished as a primary blue CTA. */
html[data-theme="phase2"] .modal-fair .fair-actions #fair-seeds-rotate{
  background: var(--pd-blue, #4299e1) !important;
  border-color: var(--pd-blue, #4299e1) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(66,153,225,.28);
}
html[data-theme="phase2"] .modal-fair .fair-actions #fair-seeds-rotate:hover{
  background: var(--pd-blue-hover, #3182ce) !important;
  border-color: var(--pd-blue-hover, #3182ce) !important;
}
html[data-theme="phase2"] .modal-fair .fair-actions #fair-seeds-rotate .btn-shine{ display: none; }

@media (max-width: 600px){
  html[data-theme="phase2"] .modal-fair{ padding: 22px 18px 18px !important; }
  html[data-theme="phase2"] .modal-fair .modal-title{ font-size: 18px !important; }
  html[data-theme="phase2"] .modal-fair .fair-table-head,
  html[data-theme="phase2"] .modal-fair .fair-row{
    grid-template-columns: 1fr 1fr 1.2fr !important;
    gap: 8px;
    padding: 10px 12px;
    font-size: 14px !important;
  }
  html[data-theme="phase2"] .modal-fair .fair-actions .btn{ min-width: 0; }
}

/* ===================================================================
   Create Pack Battle — visual polish pass.
   Wraps the pack strip + toggles + mode row in clean sections with
   subtle dividers + section labels. Matches the rest of the cases
   chrome (homepage New Packs row, picker modal).
   =================================================================== */

/* Strip wrap: gentle dark panel so the empty add-tile state doesn't
   look like a giant void. Adds a small caption ("PACKS") above. */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip-wrap{
  position: relative;
  background: var(--pd-bg-2) !important;
  border: 1px solid var(--pd-line) !important;
  border-radius: var(--pd-radius-lg, 12px) !important;
  padding: 22px 18px 18px !important;
  margin-bottom: 14px;
  min-height: 280px;
}
/* "PACKS" label tucked into the top-left corner of the panel. Uses
   the same micro-caps treatment the modal headers use. */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip-wrap::before{
  content: 'Packs';
  position: absolute;
  top: 12px; left: 18px;
  font-family:'Urbanist',sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .10em;
  color: var(--pd-text-mute);
  text-transform: uppercase;
  pointer-events: none;
}
/* Push strip + add-tile down a touch so the section label sits clear. */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip-wrap > .cs-cb-strip,
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip-wrap > .cs-cb-add-tile{
  margin-top: 16px;
}

/* Empty-state caption when no packs have been added. The .cs-cb-strip
   is empty in that case — render a hint via :empty + ::after so the
   massive blank space reads as "nothing here yet" instead of broken. */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip:empty + .cs-cb-add-tile{
  /* When no packs selected, center the Add Pack tile within the panel
     so it doesn't sit awkwardly at the top-left. */
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}

/* Add Pack tile — matte dashed placeholder. Cleaner background + lift
   on hover, matching the rest of the site's interactive surfaces. */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-tile{
  background: var(--pd-bg-1) !important;
  border: 2px dashed var(--pd-line) !important;
  border-radius: var(--pd-radius-lg, 12px) !important;
  color: var(--pd-text-mute) !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-tile:hover{
  border-color: var(--pd-blue-accent, #57abf8) !important;
  background: color-mix(in srgb, var(--pd-blue-accent, #57abf8) 6%, var(--pd-bg-1)) !important;
  color: var(--pd-text) !important;
  transform: translateY(-2px);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-plus{
  color: var(--pd-blue-accent, #57abf8);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-label{
  font-family:'Urbanist',sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Mode row gets a small "MODE" label tucked into the top-left, same
   treatment as the Packs panel. The CREATE button on the right is
   already styled; we just tighten spacing here. */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-modes-row{
  position: relative;
  padding: 22px 14px 14px !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-modes-row::before{
  content: 'Mode';
  position: absolute;
  top: 8px; left: 18px;
  font-family:'Urbanist',sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .10em;
  color: var(--pd-text-mute);
  text-transform: uppercase;
  pointer-events: none;
}

/* Lobby row — creator-on-waiting gets BOTH "View Battle" + "Cancel"
   stacked vertically so they can re-enter their own battle (the old
   row showed Cancel only and left no way back in). View Battle is the
   primary brand-blue CTA; Cancel is a small muted secondary link.
   The stack keeps the action column from blowing up wider than the
   rest of the lobby rows. */
.cs-br-action-stack{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.cs-br-cancel-link{
  appearance: none;
  background: transparent;
  border: none;
  color: var(--pd-text-mute, rgba(255,255,255,.55));
  font-family:'Urbanist',sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}
.cs-br-cancel-link:hover{
  color: #fca5a5;
  background: rgba(248,113,113,.08);
}
.cs-br-cancel-link:active{
  transform: translateY(1px);
}

/* ===================================================================
   Borrow Coins slider panel — appears below the modifier toggles when
   Borrow Coins is on. Matches the matte navy + cyan accent palette.
   Slider is a native range input restyled to look like bloxflip's
   gradient track + glowing handle, but using bloxhit's --pd-blue.
   =================================================================== */
.cs-cb-borrow-panel{
  display:flex; flex-direction:column; gap:10px;
  padding:14px 18px 16px;
  margin: -6px 0 18px;
  border-radius: 12px;
  background: var(--pd-bg-2, #22272b);
  border: 1px solid rgba(87,171,248,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.cs-cb-borrow-panel[hidden]{ display:none }
.cs-cb-borrow-head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Urbanist',sans-serif;
}
.cs-cb-borrow-label{
  font-size: 13px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.50);
}
.cs-cb-borrow-amt{
  font-size: 16px; font-weight: 800;
  color: var(--pd-blue-accent, #57abf8);
  font-variant-numeric: tabular-nums;
}
.cs-cb-borrow-slider{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  outline: none;
  cursor: pointer;
}
.cs-cb-borrow-slider::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--pd-blue, #4299e1) 0%,
    var(--pd-blue, #4299e1) var(--cs-cb-borrow-fill, 0%),
    rgba(255,255,255,.06) var(--cs-cb-borrow-fill, 0%),
    rgba(255,255,255,.06) 100%);
}
.cs-cb-borrow-slider::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
}
.cs-cb-borrow-slider::-moz-range-progress{
  height: 6px;
  border-radius: 999px;
  background: var(--pd-blue, #4299e1);
}
.cs-cb-borrow-slider::-webkit-slider-thumb{
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--pd-blue-accent, #57abf8);
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(87,171,248,.25), 0 2px 6px rgba(0,0,0,.40);
  cursor: grab;
}
.cs-cb-borrow-slider::-moz-range-thumb{
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--pd-blue-accent, #57abf8);
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(87,171,248,.25), 0 2px 6px rgba(0,0,0,.40);
  cursor: grab;
}
.cs-cb-borrow-slider:active::-webkit-slider-thumb{ cursor: grabbing }
.cs-cb-borrow-slider:active::-moz-range-thumb{ cursor: grabbing }
.cs-cb-borrow-marks{
  display:flex; justify-content:space-between;
  font-family:'Urbanist',sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,.40);
  letter-spacing: .02em;
  padding: 0 2px;
}
.cs-cb-borrow-foot{
  font-family:'Urbanist',sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  text-align: center;
  letter-spacing: .02em;
}
.cs-cb-borrow-foot strong{
  color: var(--pd-blue-accent, #57abf8);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   PHASE 2 — Unbloxed-style tall left-sidebar chat
   ------------------------------------------------------------
   Chat becomes a full-height column on the LEFT (order:-1 puts
   it before main in the flex layout). Sticky-positioned under
   the 72px topbar so it tracks the viewport like #pd-rightrail
   does on the opposite side.
   ------------------------------------------------------------
   - body.chat-collapsed hides the column (display:none) so
     main reclaims the full width — same toggle path as before.
   - The X close button inside the head (chat-close-pd) is the
     same toggle target as the topbar chat icon.
   ============================================================ */
html[data-theme="phase2"] aside.chat{
  /* Sticky flex column — mirrors #pd-rightrail's pattern on the
     opposite side. No fixed/floating modal positioning. */
  position: sticky;
  top: 72px;
  left: auto;
  right: auto;
  bottom: auto;
  align-self: flex-start;
  order: -1;                  /* pulls it before main in flex order */

  flex: 0 0 300px;
  width: 300px;
  height: calc(100dvh - 72px);
  max-height: calc(100dvh - 72px);

  display: flex;
  flex-direction: column;

  background: var(--pd-bg-1);
  border-right: 1px solid var(--pd-line);
  border-left: 0;
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  z-index: auto;
  overflow: hidden;            /* contained scroll on chat-body */
  animation: none;             /* no pop-in for a static column */
  transform-origin: top left;
}

/* Default-closed in phase2 — body.chat-collapsed (set by chat init or
   the topbar toggle) hides the modal. The existing legacy rule already
   sets display:none for chat-collapsed; we just need this rule to win
   over .chat.open (mobile overlay) so the modal stays closed when the
   user explicitly closes it on small screens. */
html[data-theme="phase2"] body.chat-collapsed aside.chat,
html[data-theme="phase2"] body.chat-collapsed aside.chat.open{
  display: none !important;
}

/* Re-skin the head for phase2 — packdraw matte. Flat dark bar, no
   warm-gray gradient (the prior gradient leaked a brown tint that
   read off against the surrounding navy chrome). */
html[data-theme="phase2"] .chat-head{
  padding: 10px 10px 8px 12px;
  border-bottom: 1px solid var(--pd-line, rgba(250,250,250,.05));
  background: transparent;
  gap: 8px;
  flex-shrink: 0;
}

/* Tabs — segmented control, matte bg, subtle inset border, active tab
   uses the same blue accent as the rest of the Phase 2 CTAs but WITHOUT
   the casino-style gradient + glow (which used to read as "this is the
   only thing alive on the page"). */
html[data-theme="phase2"] .chat-tabs{
  padding: 3px;
  background: var(--pd-bg-2, #22272b);
  border: 1px solid var(--pd-line, rgba(250,250,250,.05));
  border-radius: 8px;
  gap: 2px;
}
html[data-theme="phase2"] .ch-tab{
  padding: 5px 10px;
  border-radius: 5px;
  font-family:'Inter','Sora',sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing:.02em;
  color: var(--pd-text-mute, #7a8084);
  background: transparent;
  border: 0;
  transition: background .15s ease, color .15s ease;
}
html[data-theme="phase2"] .ch-tab:hover{
  color: var(--pd-text, #fafafa);
  background: rgba(255,255,255,.04);
}
html[data-theme="phase2"] .ch-tab.active{
  background: rgba(66,153,225,.14) !important;
  background-image: none !important;
  color: var(--pd-blue, #4299e1) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(66,153,225,.30) !important;
}

/* Online indicator — was a saturated green pill with a pulsing ring
   ("circle shape" the user called out). Phase 2: drop the pill bg
   and the pulse ring, keep just a tiny green dot + a count number
   on the matte bg. Reads as a status indicator, not a notification
   badge demanding attention. */
html[data-theme="phase2"] .chat-online{
  background: transparent !important;
  border: 0 !important;
  padding: 0 4px !important;
  gap: 6px !important;
  font-family:'Inter',sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--pd-text-mute, #7a8084) !important;
  font-variant-numeric: tabular-nums;
}
html[data-theme="phase2"] .chat-online-dot{
  width: 6px !important; height: 6px !important;
  background: #4ade80 !important;
  box-shadow: 0 0 6px rgba(74,222,128,.55) !important;
}
/* Suppress the pulse ring — in matte chrome it reads as a clock-
   radar blip, not a real "live" cue. The dot + glow handles "live"
   on its own. */
html[data-theme="phase2"] .chat-online-dot::after{
  display: none !important;
  animation: none !important;
}

/* Close (X) button — visible only in phase2; the legacy chat in phase1
   uses the topbar toggle exclusively, so this button is hidden there. */
.chat-close-pd{
  display: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--pd-text-mute, #7a8084);
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background .15s var(--pd-ease-smooth, cubic-bezier(.32,.72,0,1)),
    color .15s var(--pd-ease-smooth, cubic-bezier(.32,.72,0,1)),
    border-color .15s var(--pd-ease-smooth, cubic-bezier(.32,.72,0,1));
}
.chat-close-pd:hover{
  background: rgba(235, 75, 75, .14);
  border-color: rgba(235, 75, 75, .35);
  color: #ff8b8b;
}
.chat-close-pd:active{ transform: translateY(1px); }
.chat-close-pd svg{ display: block; }
html[data-theme="phase2"] .chat-close-pd{ display: inline-flex; }

/* Body: tighter padding + smaller messages so the modal feels right at
   340×480. */
html[data-theme="phase2"] .chat-body{
  padding: 10px 12px;
  gap: 8px;
}
html[data-theme="phase2"] .chat-body::-webkit-scrollbar{ width: 4px; }
html[data-theme="phase2"] .chat-body::-webkit-scrollbar-thumb{
  background: var(--pd-surface, #34383c);
  border-radius: 2px;
}
html[data-theme="phase2"] .cmsg-avatar{
  width: 28px; height: 28px;
  font-size: 16px;
  border-width: 1px;
  border-color: var(--pd-line, rgba(250,250,250,.05));
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
html[data-theme="phase2"] .cmsg-body{ font-size: 12.5px; }
html[data-theme="phase2"] .cmsg-name{
  font-family:'Inter',sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing:.01em;
}
/* Rank chips inside messages — same family as the balance-pop chip
   and toast accent strip. Matte bg, hairline accent border, accent-
   coloured monochrome text. The old cyan ADMIN sticker / yellow VIP
   etc. were saturated rounded rectangles that fought the matte rest
   of the message row. */
html[data-theme="phase2"] .cmsg-rank{
  font-family:'Inter',sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing:.10em !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  margin-right: 5px !important;
  background: var(--pd-bg-1, #161a1d) !important;
  text-shadow: none !important;
  vertical-align: middle;
}
html[data-theme="phase2"] .rank-admin{
  color: #f87171 !important;
  background: rgba(248,113,113,.08) !important;
  border: 1px solid rgba(248,113,113,.32) !important;
}
html[data-theme="phase2"] .rank-mod{
  color: #60a5fa !important;
  background: rgba(96,165,250,.08) !important;
  border: 1px solid rgba(96,165,250,.32) !important;
}
html[data-theme="phase2"] .rank-vip{
  color: #fde047 !important;
  background: rgba(253,224,71,.08) !important;
  border: 1px solid rgba(253,224,71,.32) !important;
}
html[data-theme="phase2"] .rank-dev{
  color: #c4b5fd !important;
  background: rgba(196,181,253,.08) !important;
  border: 1px solid rgba(196,181,253,.32) !important;
}
html[data-theme="phase2"] .rank-bot{
  color: var(--pd-text-mute, #7a8084) !important;
  background: rgba(122,128,132,.08) !important;
  border: 1px solid rgba(122,128,132,.32) !important;
}
/* User-injected colour on the username — tone it down so wild
   pinks/oranges don't dominate the matte palette. The inline
   style="color:..." rule still wins on the colour itself; we just
   knock saturation back via opacity at the message level. */
html[data-theme="phase2"] .cmsg-name{
  filter: saturate(.75) brightness(.95);
}

html[data-theme="phase2"] .chat-rules{
  font-size: 12px;
  padding: 6px 12px;
  color: var(--pd-text-mute, #7a8084);
  border-top: 1px solid var(--pd-line, rgba(250,250,250,.05));
  flex-shrink: 0;
}

/* Input row — match pd-card / pd-input aesthetic. */
html[data-theme="phase2"] .chat-input{
  padding: 10px 12px;
  background: rgba(0,0,0,.32);
  border-top: 1px solid var(--pd-line, rgba(250,250,250,.05));
  gap: 6px;
  flex-shrink: 0;
}
html[data-theme="phase2"] .chat-input input{
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--pd-bg-2, #22272b);
  border: 1px solid var(--pd-line, rgba(250,250,250,.05));
  font-size: 16px; /* 16px = iOS won't focus-zoom the chat input */
  color: var(--pd-text, #fafafa);
}
html[data-theme="phase2"] .chat-input input::placeholder{
  color: var(--pd-text-mute, #7a8084);
}
html[data-theme="phase2"] .chat-input input:focus{
  border-color: var(--pd-blue, #4299e1);
  background: var(--pd-bg-2, #22272b);
  box-shadow:
    0 0 0 2px rgba(66,153,225,.25),
    0 0 12px rgba(66,153,225,.18);
}
html[data-theme="phase2"] .btn-send{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  /* Solid Phase 2 blue, no gradient + no glow halo — matches the
     primary CTA buttons elsewhere in the chrome (e.g. /loop, deals,
     deposit). The old gradient + 30% rgba shadow read as a separate
     "casino" button family. */
  background: var(--pd-blue, #4299e1) !important;
  background-image: none !important;
  border: 1px solid rgba(66,153,225,.40);
  box-shadow:
    0 2px 6px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}
html[data-theme="phase2"] .btn-send::before{ width: 18px; height: 18px; }
html[data-theme="phase2"] .btn-send:hover{
  background: var(--pd-blue-hover, #3182ce) !important;
  filter: none;
  box-shadow:
    0 4px 10px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* Narrow viewports: chat becomes a fullscreen overlay since a 300px
   sticky sidebar would crowd everything else on a phone. The legacy
   .chat.open mobile-overlay rules already handle position; we just
   reset the column-specific bits and let it span the screen. */
@media (max-width: 900px){
  html[data-theme="phase2"] aside.chat{
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    flex: none;
    height: calc(100dvh - 72px);
    max-height: calc(100dvh - 72px);
    border-right: 0;
    z-index: 75;
    order: 0;
  }
}

/* ============================================================
   PHASE 2 — Unbloxed-style chat rework
   ------------------------------------------------------------
   Replaces the text "English / High Rollers" tabs with two
   compact icon tabs (chat + rules), and adds a footer bar
   with social links + online-count moved from the head.
   The legacy text rules row is hidden (rules now live in a
   dedicated overlay activated by the rules icon tab).
============================================================ */

/* Icon tab buttons in the head — left-aligned cluster, close X on the right. */
html[data-theme="phase2"] .chat-icon-tabs{
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
html[data-theme="phase2"] .chat-icon-tab{
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--pd-bg-2, #22272b);
  border: 1px solid var(--pd-line, rgba(250,250,250,.05));
  color: var(--pd-text-mute, #7a8084);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition:
    background .15s var(--pd-ease-smooth, cubic-bezier(.32,.72,0,1)),
    color .15s var(--pd-ease-smooth, cubic-bezier(.32,.72,0,1)),
    border-color .15s var(--pd-ease-smooth, cubic-bezier(.32,.72,0,1));
}
html[data-theme="phase2"] .chat-icon-tab:hover{
  color: var(--pd-text, #fafafa);
  background: rgba(255,255,255,.05);
}
html[data-theme="phase2"] .chat-icon-tab.active{
  background: var(--pd-blue, #4299e1);
  color: #ffffff;
  border-color: rgba(66,153,225,.55);
  box-shadow:
    0 2px 6px rgba(66,153,225,.30),
    inset 0 1px 0 rgba(255,255,255,.14);
}
html[data-theme="phase2"] .chat-icon-tab svg{ display: block; }

/* Rules panel — replaces chat-body when the rules icon tab is active. */
html[data-theme="phase2"] .chat-rules-panel{
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 12px;
  color: var(--pd-text, #fafafa);
  font-family:'Urbanist',sans-serif;
}
html[data-theme="phase2"] .chat-rules-panel::-webkit-scrollbar{ width: 4px; }
html[data-theme="phase2"] .chat-rules-panel::-webkit-scrollbar-thumb{
  background: var(--pd-surface, #34383c);
  border-radius: 2px;
}
html[data-theme="phase2"] .chat-rules-title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--pd-blue, #4299e1);
  margin: 0 0 10px;
}
html[data-theme="phase2"] .chat-rules-list{
  margin: 0 0 12px;
  padding: 0 0 0 16px;
  color: var(--pd-text, #fafafa);
  font-size: 14px;
  line-height: 1.55;
}
html[data-theme="phase2"] .chat-rules-list li{ margin: 0 0 6px; }
html[data-theme="phase2"] .chat-rules-foot{
  margin: 0;
  font-size: 13px;
  color: var(--pd-text-mute, #7a8084);
  padding-top: 10px;
  border-top: 1px solid var(--pd-line, rgba(250,250,250,.05));
  line-height: 1.5;
}

/* View switch — JS flips data-view on the aside. */
html[data-theme="phase2"] aside.chat[data-view="rules"] #chat-body,
html[data-theme="phase2"] aside.chat[data-view="rules"] #chat-form{
  display: none;
}
html[data-theme="phase2"] aside.chat[data-view="rules"] #chat-rules-panel{
  display: block;
}
html[data-theme="phase2"] aside.chat[data-view="messages"] #chat-rules-panel{
  display: none;
}

/* Hide the legacy one-line rules text row (was above the input). The
   rules now live in the dedicated panel above. */
html[data-theme="phase2"] .chat-rules{ display: none; }

/* Tighter message rows — match the compact density of the reference. */
html[data-theme="phase2"] .cmsg{
  padding: 6px 8px;
  gap: 10px;
  align-items: flex-start;
}
/* Avatar fallback — unified dark-blue gradient with a centered white
   initial. Overrides the per-user inline color so the column reads as
   one coherent system instead of a kindergarten of saturated circles.
   The image variant (.cmsg-avatar-img) skips this override. */
html[data-theme="phase2"] .cmsg-avatar{
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Inter','Sora',system-ui,sans-serif;
  letter-spacing: 0;
  border-color: rgba(255,255,255,.06);
}
html[data-theme="phase2"] .cmsg-avatar:not(.cmsg-avatar-img){
  background: linear-gradient(135deg, #3457a3 0%, #1c2f5e 100%) !important;
  text-transform: uppercase;
}
html[data-theme="phase2"] .cmsg-avatar-img img{ border-radius: 5px; }
/* Username — bold and near-white, with the per-user color desaturated
   to a subtle tint rather than full neon. Reference uses near-white
   uniform names; full saturation made every row look mismatched. */
html[data-theme="phase2"] .cmsg-name{
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: .005em;
  filter: saturate(.30) brightness(1.55) !important;
}
html[data-theme="phase2"] .cmsg-text{
  font-size: 12.5px;
  line-height: 1.45;
  /* Was #b8bcc0 grey @ 500 — hard to read against the glass chat panel.
     Brighter + a touch heavier so messages read clearly. */
  color: #e7ebf2;
  font-weight: 600;
}
html[data-theme="phase2"] .cmsg-rank{
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  margin-right: 5px !important;
  letter-spacing: .08em !important;
  vertical-align: middle;
}
/* @mentions in message bodies — rendered with .cmsg-mention by the
   chat formatBody() helper. Reads as a soft inline link, not a button. */
html[data-theme="phase2"] .cmsg-mention{
  color: var(--pd-blue-accent);
  font-weight: 600;
}

/* Footer bar — social icons on the left, green-dot online count on the right. */
html[data-theme="phase2"] .chat-footer-bar{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-top: 1px solid var(--pd-line, rgba(250,250,250,.05));
  background: rgba(0,0,0,.32);
  flex-shrink: 0;
}
html[data-theme="phase2"] .chat-foot-icon{
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pd-text-mute, #7a8084);
  text-decoration: none;
  background: transparent;
  transition:
    background .15s var(--pd-ease-smooth, cubic-bezier(.32,.72,0,1)),
    color .15s var(--pd-ease-smooth, cubic-bezier(.32,.72,0,1));
}
html[data-theme="phase2"] .chat-foot-icon:hover{
  background: rgba(255,255,255,.05);
  color: var(--pd-text, #fafafa);
}
html[data-theme="phase2"] .chat-foot-icon svg{ display: block; }
html[data-theme="phase2"] .chat-foot-spacer{ flex: 1; }
html[data-theme="phase2"] .chat-foot-online{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family:'Sora','Inter',sans-serif;   /* number → site number font */
  font-weight: 700;
  font-size: 12.5px;
  color: var(--pd-text-mute, #7a8084);
  font-variant-numeric: tabular-nums;
  padding-right: 4px;
}
html[data-theme="phase2"] .chat-foot-online .chat-online-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,.55);
  position: static;
}
html[data-theme="phase2"] .chat-foot-online .chat-online-dot::after{ display: none; }

/* Hide new structural elements outside phase2 so phase1 keeps the
   legacy layout untouched. */
html:not([data-theme="phase2"]) .chat-icon-tabs,
html:not([data-theme="phase2"]) .chat-rules-panel,
html:not([data-theme="phase2"]) .chat-footer-bar{ display: none; }

/* ============================================================
   BLOXHIT MOTION POLISH — unbloxed-inspired global smoothness.

   Pass-2 layer: low-specificity :where() selectors fill in a
   uniform interaction baseline without overriding any of the
   highly-tuned per-component styles above. Anywhere a component
   already declares its own transition we leave the override
   intact; this layer just establishes a consistent hover lift,
   tap-snap, and pop-in cadence for the long tail of unstyled
   elements (and tightens a few common patterns).
============================================================ */

/* Tactile press for ALL buttons + clickable cards/links. The cubic
   curve is the same shape unbloxed uses for its 200ms button
   transitions; the duration token keeps every interactive element
   reading the same hover-press rhythm. */
:where(button, a.btn, .btn, [role="button"], .nav-pill, .cs-action,
       .cs-cta, .cs-fast-toggle, .cs-multi-pill, .seg-item, .tab,
       .toggle, .pill, .quick-btn, .cig-item, .case-card,
       .crypto-card){
  transition:
    transform var(--motion-fast) var(--ease-glide),
    filter    var(--motion-fast) var(--ease-glide),
    box-shadow var(--motion-base) var(--ease-glide),
    background-color var(--motion-fast) var(--ease-glide),
    border-color var(--motion-fast) var(--ease-glide),
    color var(--motion-fast) var(--ease-glide);
}
:where(button, a.btn, .btn, [role="button"]):not([disabled]):not([aria-disabled="true"]):hover{
  filter: brightness(1.08) saturate(1.04);
}
:where(button, a.btn, .btn, [role="button"]):not([disabled]):not([aria-disabled="true"]):active{
  transform: translateY(1px) scale(.985);
  transition-duration: var(--motion-snap);
}

/* Page sections + route enter — give every newly mounted route a
   subtle fade-up. Already declared at line 904 with --ease-pop
   shape; making sure that anything routed-in inherits the same
   feel even if its specific route class doesn't add an animation. */
:where(.route[data-route]){
  --motion-route-dur: var(--motion-slow);
}

/* Modal entry — backdrop blur ramps in alongside the panel pop so
   the page doesn't snap-blur on open. The existing fadeIn keyframe
   only animates opacity; we add a backdrop-filter ramp here. */
.modal-backdrop{
  animation:
    fadeIn var(--motion-base) var(--ease-pop),
    bxBackdropBlur var(--motion-base) var(--ease-pop);
}
@keyframes bxBackdropBlur{
  from{ backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to  { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}

/* Generic pop-in utility — components can opt in by adding .bx-pop
   for an unbloxed-style scale-fade entry. Used by toasts, info
   chips, the in-flow center label, etc. */
.bx-pop{
  animation: bxPopIn var(--motion-slow) var(--ease-pop) both;
}
@keyframes bxPopIn{
  from{ opacity: 0; transform: scale(.94) translateY(8px); }
  to  { opacity: 1; transform: scale(1)   translateY(0);   }
}

/* Card lift — every tile that doesn't already declare a hover
   transform gets a subtle 2px lift + soft brighten. Highly-tuned
   per-component hovers (case-card:hover already lifts 3px) win
   via cascade specificity. */
:where(.case-card, .cig-item, .crypto-card, .gh-card,
       .game-card, .ar-card, .lb-card):not(:hover){
  transform: translateY(0);
}
:where(.case-card, .cig-item, .crypto-card, .gh-card,
       .game-card, .ar-card, .lb-card):hover{
  transform: translateY(-2px);
}

/* The 4× tray slot pop — keep the explicit cs-tray-pop keyframe but
   add a generic fallback so any tile gaining .filled gets a tiny
   scale punch. */
@keyframes bxSlotPop{
  0%  { transform: scale(.78); opacity: .55; }
  60% { transform: scale(1.08); opacity: 1; }
  100%{ transform: scale(1);    opacity: 1; }
}

/* Pack reel spin transition lives on the base .cases-reel rule
   (transform 5s cubic-bezier(.05,.7,.1,1) at line 5476). A previous
   "reset transition on display:none" rule here used inverted logic:
   the :not(display:none) selector matched the VISIBLE reel and
   overrode the 5s spin curve with --motion-base (260ms) + a generic
   ease, collapsing every pack open into a quarter-second blip that
   read as "no animation" — visible especially on mobile where the
   already-short spin felt instant. Removed the override; the base
   transition is correct on its own. */

/* prefers-reduced-motion respect — collapse all motion-polish
   transforms to instant. We already disable game-specific motion
   in the per-component blocks above; this is the universal safety
   net for the new tokens. */
@media (prefers-reduced-motion: reduce){
  :where(button, a.btn, .btn, [role="button"], .case-card,
         .cig-item, .crypto-card, .nav-pill, .seg-item):hover,
  :where(button, a.btn, .btn, [role="button"]):active{
    transform: none !important;
    filter: none !important;
  }
  .modal-backdrop{
    animation: fadeIn var(--motion-fast) ease !important;
  }
  .bx-pop{ animation: none !important; opacity: 1 !important; }
}

/* ============================================================
   PACK OPENER — VERTICAL REEL (v4).

   Reel now scrolls TOP → BOTTOM with items stacked in a column,
   passing through a horizontal center indicator (datdrop / cases.gg
   style). Chevrons sit above + below the indicator pointing inward
   at the winning row. Item pool tiles stay flat with bottom rarity
   hairlines from the v3 pass.

   The reel JS now translates Y instead of X and measures
   offsetTop/offsetHeight to center the winner. CSS below reorients
   the strip + viewport accordingly.
============================================================ */

/* Hide hero + tray — unbloxed has neither. Multiplier pills now drive
   multi-open. */
.cs-open-view .cs-hero,
section[data-route="cases"][data-cs-view="open"] .cs-hero{
  display: none !important;
}
.cs-open-view .cs-tray,
section[data-route="cases"][data-cs-view="open"] .cs-tray{
  display: none !important;
}

/* Stage container — full-width horizontal row, matching the unbloxed
   reference. Items scroll LEFT past a vertical center indicator with
   chevrons on the LEFT and RIGHT pointing inward.
   border-radius bumped DOWN to 6px to match unbloxed's subtle frame. */
.cs-open-view .cases-stage,
section[data-route="cases"][data-cs-view="open"] .cases-stage,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage{
  height: 260px !important;
  max-width: none !important;
  width: 100% !important;
  /* Extra bottom margin reserves room for the name + payout label
     that sits below the winning item. Without it the label either
     gets clipped (overflow:hidden) or pushes into the Open button
     below. The label is ~40px tall + 8px gap above. */
  margin: 12px 0 56px !important;
  border-radius: 6px !important;
  /* Let the label extend below the stage box. The .cases-reel-wrap
     inside still handles its own horizontal-scroll clipping, so the
     reel doesn't bleed out. contain:layout (no `paint`) keeps the
     reel-isolation perf win without paint-clipping the label. */
  overflow: visible !important;
  contain: layout !important;
}
/* Hide the corner-block dark vignettes — we draw cleaner left/right
   edge fades below. */
.cs-open-view .cases-stage::before,
.cs-open-view .cases-stage::after,
section[data-route="cases"][data-cs-view="open"] .cases-stage::before,
section[data-route="cases"][data-cs-view="open"] .cases-stage::after{
  display: none !important;
}
/* Viewport wrap clips the strip and centers the reel vertically. */
.cs-open-view .cases-reel-wrap,
section[data-route="cases"][data-cs-view="open"] .cases-reel-wrap{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}
/* Scrolling strip — horizontal row of items. JS sets transform:
   translateX(N) so the strip slides past the vertical indicator. */
.cs-open-view .cases-reel,
section[data-route="cases"][data-cs-view="open"] .cases-reel,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-reel{
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  padding: 0 14px !important;
  height: 100% !important;
  width: auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
/* CARTOONY items: no card chrome, just the 3D image floating on the
   flat dark bg with a soft drop shadow. Matches the unbloxed look
   where each item is just the rendered art with no surrounding panel.
   Drop-chance % sits in the bottom-right corner of each tile slot,
   with a rarity-colored hairline strip directly below it. */
.cs-open-view .case-item,
section[data-route="cases"][data-cs-view="open"] .case-item,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item{
  flex: 0 0 200px !important;
  width: 200px !important;
  height: 220px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  border-radius: 0 !important;
  position: relative;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: transform var(--motion-base, .26s) var(--ease-glide, ease) !important;
}
.cs-open-view .case-item .ci-icon-wrap,
section[data-route="cases"][data-cs-view="open"] .case-item .ci-icon-wrap{
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 18px 18px;
}
.cs-open-view .case-item .ci-img,
section[data-route="cases"][data-cs-view="open"] .case-item .ci-img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.55))
          drop-shadow(0 0 18px color-mix(in srgb, var(--it-color, #60A5FA) 40%, transparent)) !important;
}
/* Per-rarity tint for the floating-item glow */
.cs-open-view .case-item.rarity-common    { --it-color: #94a3b8; }
.cs-open-view .case-item.rarity-uncommon  { --it-color: #7dd3fc; }
.cs-open-view .case-item.rarity-rare      { --it-color: #60A5FA; }
.cs-open-view .case-item.rarity-epic      { --it-color: #c084fc; }
.cs-open-view .case-item.rarity-legendary { --it-color: #fbbf24; }
.cs-open-view .case-item.rarity-mythic    { --it-color: #f87171; }
/* Drop the old top rarity strip — replaced by the bottom hairline
   below each item. */
.cs-open-view .case-item::before,
section[data-route="cases"][data-cs-view="open"] .case-item::before{
  content: "" !important;
  position: absolute !important;
  left: 22px !important; right: 22px !important;
  bottom: 30px !important; top: auto !important;
  width: auto !important; height: 2px !important;
  border-radius: 2px !important;
  background: var(--it-color, rgba(125,211,252,.85)) !important;
  box-shadow: 0 0 8px var(--it-color, rgba(125,211,252,.55)) !important;
  display: block !important;
  z-index: 1 !important;
  animation: none !important;
  transform: none !important;
}
.cs-open-view .case-item .ci-name,
section[data-route="cases"][data-cs-view="open"] .case-item .ci-name{
  display: none !important;
}
/* Drop chance % — small label in the lower portion of each tile.
   Reads as "12%" / "0.2%" beneath the item image, above the rarity
   hairline. */
.cs-open-view .case-item .ci-mult,
section[data-route="cases"][data-cs-view="open"] .case-item .ci-mult{
  position: absolute !important;
  bottom: 8px !important;
  right: 16px !important;
  font-family: 'Inter','SF Pro Display',sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #ffffff !important;
  letter-spacing: .01em !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.55);
  z-index: 2;
}

/* Edge fades — LEFT + RIGHT so items fade into the stage bg as they
   approach the horizontal viewport edges (unbloxed-style). */
.cs-open-view .cases-reel-wrap::before,
.cs-open-view .cases-reel-wrap::after,
section[data-route="cases"][data-cs-view="open"] .cases-reel-wrap::before,
section[data-route="cases"][data-cs-view="open"] .cases-reel-wrap::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0; bottom: 0;
  width: 100px;
  pointer-events: none;
  z-index: 4;
}
.cs-open-view .cases-reel-wrap::before,
section[data-route="cases"][data-cs-view="open"] .cases-reel-wrap::before{
  left: 0 !important; right: auto !important;
  background: linear-gradient(90deg,
    var(--pd-bg-1, rgba(11, 15, 27, .96)) 0%,
    rgba(11, 15, 27, .55) 55%,
    transparent 100%) !important;
}
.cs-open-view .cases-reel-wrap::after,
section[data-route="cases"][data-cs-view="open"] .cases-reel-wrap::after{
  right: 0 !important; left: auto !important;
  background: linear-gradient(270deg,
    var(--pd-bg-1, rgba(11, 15, 27, .96)) 0%,
    rgba(11, 15, 27, .55) 55%,
    transparent 100%) !important;
}

/* Vertical center indicator hairline — subtle blue glow column
   marking the winning position. Phase 2's wider spotlight is
   replaced here with a clean thin line. */
.cs-open-view .cases-spotlight,
section[data-route="cases"][data-cs-view="open"] .cases-spotlight,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-spotlight{
  display: block !important;
  position: absolute !important;
  left: 50% !important; top: 14px !important; bottom: 14px !important;
  right: auto !important;
  width: 1px !important; height: auto !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg,
    rgba(125,211,252,0)   0%,
    rgba(125,211,252,.65) 25%,
    rgba(125,211,252,.65) 75%,
    rgba(125,211,252,0)   100%) !important;
  box-shadow: 0 0 8px rgba(125,211,252,.40) !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  pointer-events: none;
  z-index: 5;
}

/* Top + bottom chevrons (1x mode): centered horizontally above and
   below the indicator column, pointing INWARD at it. Big white
   arrows (no blue tint) to match the unbloxed reference exactly.
   Selector prefixed with html[data-theme="phase2"] to beat the
   Phase 2 rule that forces color to --pd-blue-accent. */
html[data-theme="phase2"] section[data-route="cases"] .cs-pointer,
.cs-open-view .cs-pointer,
section[data-route="cases"][data-cs-view="open"] .cs-pointer{
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 20px !important; height: 14px !important;
  color: #ffffff !important;
  z-index: 7 !important;
  pointer-events: none;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.35))
    drop-shadow(0 1px 2px rgba(0,0,0,.55)) !important;
}
.cs-open-view .cs-pointer-top,
section[data-route="cases"][data-cs-view="open"] .cs-pointer-top{
  top: 6px !important; bottom: auto !important;
}
.cs-open-view .cs-pointer-bot,
section[data-route="cases"][data-cs-view="open"] .cs-pointer-bot{
  bottom: 6px !important; top: auto !important;
}
.cs-open-view .cs-pointer svg,
section[data-route="cases"][data-cs-view="open"] .cs-pointer svg{
  width: 20px !important; height: 14px !important;
}

/* Final-stretch beat — chevrons nudge inward (top drifts down, bottom
   drifts up) as the reel decelerates. */
/* Final-stretch pointer beat removed — see earlier cs-final note.
   Static, no animation, no compositor competition during the reel
   transition's slow tail. */
.cases-stage.cs-final .cs-pointer-top,
.cases-stage.cs-final .cs-pointer-bot{
  animation: none !important;
}
@keyframes csChevTopDownBeat{
  0%,100%{ transform: translateX(-50%) translateY(0)   }
  50%   { transform: translateX(-50%) translateY(4px) }
}
@keyframes csChevBotUpBeat{
  0%,100%{ transform: translateX(-50%) translateY(0)    }
  50%   { transform: translateX(-50%) translateY(-4px) }
}
@media (prefers-reduced-motion: reduce){
  .cases-stage.cs-final .cs-pointer-top,
  .cases-stage.cs-final .cs-pointer-bot{ animation: none !important; }
}

/* Winner highlight — instead of card chrome (which we just stripped),
   add a soft radial glow behind the winning floating item and a
   stronger drop-shadow on its image. Keeps the cartoony look. */
.cs-open-view .case-item.cs-winner,
section[data-route="cases"][data-cs-view="open"] .case-item.cs-winner{
  background:
    radial-gradient(ellipse 70% 60% at 50% 60%,
      color-mix(in srgb, var(--it-color, #60A5FA) 28%, transparent) 0%,
      transparent 70%) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.cs-open-view .case-item.cs-winner .ci-img,
section[data-route="cases"][data-cs-view="open"] .case-item.cs-winner .ci-img{
  filter:
    drop-shadow(0 12px 24px rgba(0,0,0,.55))
    drop-shadow(0 0 28px var(--it-color, #60A5FA))
    drop-shadow(0 0 48px color-mix(in srgb, var(--it-color, #60A5FA) 55%, transparent)) !important;
  /* Image stays at 1.0 — the parent card scales to 1.10 via
     csWinnerZoom, which already moves the image with it. A second
     bouncy scale on the image desynced from the card zoom and
     read as a glitch when demo respins removed cs-winner. */
  transform: none;
  transition: transform .42s cubic-bezier(.19,1,.22,1);
}
.cs-open-view .case-item.cs-winner::before,
section[data-route="cases"][data-cs-view="open"] .case-item.cs-winner::before{
  height: 3px !important;
  box-shadow: 0 0 18px var(--it-color, rgba(125,211,252,.85)) !important;
}
.cs-open-view .case-item.cs-winner .ci-mult,
section[data-route="cases"][data-cs-view="open"] .case-item.cs-winner .ci-mult{
  font-size: 16px !important;
  color: #fff !important;
}

/* ===== Controls row: multiplier pills + blue CTA + fast + demo =====
   Matches unbloxed's layout exactly:
   [1x 2x 3x 4x  (LEFT)] [Open N case for $X.XX  (CENTER, blue)]
                         [⚡ fast | Demo  (RIGHT)]
*/
.cs-open-view .cs-controls,
section[data-route="cases"][data-cs-view="open"] .cs-controls,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-controls{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin: 8px 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
/* Auto-margin layout: pills push left, fast+demo push right, CTA
   floats in the center (auto margins split the remaining space). */
.cs-open-view .cs-count-pills,
section[data-route="cases"][data-cs-view="open"] .cs-count-pills{
  margin-right: auto !important;
}
.cs-open-view .cs-fast-toggle,
section[data-route="cases"][data-cs-view="open"] .cs-fast-toggle{
  margin-left: auto !important;
}

/* Multiplier pill group — left column of the controls grid. */
.cs-open-view .cs-count-pills,
section[data-route="cases"][data-cs-view="open"] .cs-count-pills,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-count-pills{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  justify-self: start !important;
}
/* Individual pill — 40×32 with rounded-sm corners. Inactive
   transparent + light gray text; active darker bg + white text. */
.cs-open-view .cs-count-pill,
section[data-route="cases"][data-cs-view="open"] .cs-count-pill,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-count-pill{
  width: 40px !important; height: 32px !important;
  margin: 0 !important; padding: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(177,182,198,.95) !important;
  font-family: 'Inter','SF Pro Display',sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: background-color var(--motion-fast, .18s) var(--ease-smooth, ease),
              color var(--motion-fast, .18s) var(--ease-smooth, ease) !important;
}
.cs-open-view .cs-count-pill:hover,
section[data-route="cases"][data-cs-view="open"] .cs-count-pill:hover{
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  transform: none !important;
}
.cs-open-view .cs-count-pill.active,
section[data-route="cases"][data-cs-view="open"] .cs-count-pill.active,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-count-pill.active{
  background: rgb(31, 35, 48) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Cost chip — hide; the CTA already shows the total cost inline. */
.cs-open-view .cs-cost-chip,
section[data-route="cases"][data-cs-view="open"] .cs-cost-chip{
  display: none !important;
}

/* Open Pack CTA — BLUE (Phase 2 token), inline 210×36, 6px radius.
   Sits in the center column of the controls grid. */
.cs-open-view .cs-open-cta,
section[data-route="cases"][data-cs-view="open"] .cs-open-cta,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-open-cta{
  min-width: 240px !important;
  width: auto !important;
  height: 36px !important;
  padding: 0 24px !important;
  flex: 0 0 auto !important;
  border-radius: 6px !important;
  background: var(--pd-blue, #2F8FF6) !important;
  background-image: linear-gradient(180deg, #3B97FF, #1F7DEA) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-family: 'Inter','SF Pro Display',sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 2px 8px rgba(31, 125, 234, .25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  justify-self: center !important;
  transition: filter var(--motion-fast, .18s) var(--ease-smooth, ease) !important;
}
.cs-open-view .cs-open-cta:hover,
section[data-route="cases"][data-cs-view="open"] .cs-open-cta:hover{
  filter: brightness(1.08);
  transform: none !important;
}
.cs-open-view .cs-open-cta .btn-shine,
section[data-route="cases"][data-cs-view="open"] .cs-open-cta .btn-shine{
  display: none !important;
}
.cs-open-view .cs-open-cta .cs-cta-label{
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
}
.cs-open-view .cs-open-cta-sep{
  opacity: .55;
  font-weight: 500;
}
.cs-open-view .cs-open-cta .bc-glyph{
  width: 18px; height: 18px;
}

/* Fast toggle + Demo — right column of the controls grid. */
.cs-open-view .cs-fast-toggle,
section[data-route="cases"][data-cs-view="open"] .cs-fast-toggle,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-fast-toggle{
  width: 40px !important; height: 36px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(177,182,198,.95) !important;
  justify-self: end !important;
  margin-left: auto;
}
.cs-open-view .cs-fast-toggle:hover{
  background: rgba(255,255,255,.04) !important;
  color: #fbbf24 !important;
}
.cs-open-view .cs-fast-toggle[aria-pressed="true"]{
  background: rgba(251,191,36,.16) !important;
  color: #fbbf24 !important;
  box-shadow: none !important;
}
.cs-open-view .cs-demo-btn,
section[data-route="cases"][data-cs-view="open"] .cs-demo-btn,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-demo-btn{
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  background: rgb(31, 35, 48) !important;
  border: 0 !important;
  color: rgba(220,224,236,.95) !important;
  font-family: 'Inter','SF Pro Display',sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
.cs-open-view .cs-demo-btn:hover{
  background: rgb(43, 48, 64) !important;
  color: #fff !important;
}
/* Pack the right-column controls (fast + demo) into a single inline
   group so they sit together at the right edge. */
.cs-open-view .cs-fast-toggle{ justify-self: end; margin-left: auto; }
.cs-open-view .cs-fast-toggle + .cs-demo-btn,
.cs-open-view .cs-demo-btn{
  margin-left: 8px;
}

/* Multi-row stack: stages rendered when count >= 2. UNBLOXED PATTERN
   — N side-by-side VERTICAL reels (columns). Each column scrolls
   items DOWN through a horizontal center indicator that spans the
   whole stack. Container is a flex ROW of columns. */
.cs-open-view .cases-multi-stack,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack{
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 320px !important;
  margin: 12px 0 14px !important;
  border-radius: 6px !important;
  background: rgba(11, 15, 27, .55) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  overflow: hidden !important;
  padding: 0 14px !important;
  animation: bxMultiStackEnter var(--motion-base, .26s) var(--ease-pop, ease) both !important;
}
@keyframes bxMultiStackEnter{
  from{ opacity: 0; transform: scaleY(.94); transform-origin: top center; }
  to  { opacity: 1; transform: scaleY(1);    transform-origin: top center; }
}

/* Row enter/exit when adding or removing rows mid-flight (e.g., user
   bumps 2x → 3x). */
.cs-open-view .cases-stage-multi-row.cs-row-enter,
section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row.cs-row-enter{
  animation: bxRowEnter var(--motion-base, .26s) var(--ease-pop, ease) both !important;
}
.cs-open-view .cases-stage-multi-row.cs-row-exit,
section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row.cs-row-exit{
  animation: bxRowExit var(--motion-fast, .18s) var(--ease-smooth, ease) both !important;
}
@keyframes bxRowEnter{
  from{ opacity: 0; max-height: 0; }
  to  { opacity: 1; max-height: 200px; }
}
@keyframes bxRowExit{
  from{ opacity: 1; max-height: 200px; }
  to  { opacity: 0; max-height: 0; }
}

/* Stage fade-in too — when switching back to 1x from multi, the
   single stage smoothly reappears. Matched to the multi-stack
   exit duration (140ms ease-out-expo) so the 4x→1x swap reads
   as one crossfade instead of two overlapping animations of
   different lengths. */
.cs-open-view #cs-stage:not([style*="display: none"]),
section[data-route="cases"][data-cs-view="open"] #cs-stage:not([style*="display: none"]){
  animation: bxStageEnter 140ms cubic-bezier(0.19, 1, 0.22, 1) both !important;
  will-change: opacity;
}
@keyframes bxStageEnter{
  from{ opacity: 0; }
  to  { opacity: 1; }
}
/* Each multi-row container is now a VERTICAL COLUMN (despite the
   legacy "row" name). 160px wide × full stack height, items stack
   vertically inside it scrolling DOWN through a horizontal indicator. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row,
.cs-open-view .cases-stage-multi-row,
section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row{
  position: relative !important;
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: 200px !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Inside each multi-stack COLUMN, the strip (.cases-reel) is a
   vertical flex column. JS translates Y to scroll items DOWN past
   the horizontal center indicator. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-reel,
.cs-open-view .cases-multi-stack .cases-reel{
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  gap: 4px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-reel-wrap,
.cs-open-view .cases-multi-stack .cases-reel-wrap{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  position: absolute !important;
  inset: 0 !important;
}
/* Items in vertical multi-stack reels. Bumped 91 -> 140 so they
   actually feel like pack contents (was reading as tiny icons under
   the reel chrome). Glow extends beyond via ::after so they need
   breathing room. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item,
.cs-open-view .cases-multi-stack .case-item{
  flex: 0 0 140px !important;
  width: 140px !important;
  height: 140px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
html[data-theme="phase2"] .cs-open-view .cases-multi-stack .case-item .ci-icon-wrap,
.cs-open-view .cases-multi-stack .case-item .ci-icon-wrap{
  padding: 6px !important;
  width: 100% !important;
  height: 100% !important;
}
/* % label + rarity hairline hidden in multi-row spinning cells. */
html[data-theme="phase2"] .cs-open-view .cases-multi-stack .case-item .ci-mult,
.cs-open-view .cases-multi-stack .case-item .ci-mult{
  display: none !important;
}
html[data-theme="phase2"] .cs-open-view .cases-multi-stack .case-item::before,
.cs-open-view .cases-multi-stack .case-item::before{
  display: none !important;
}

/* Horizontal center indicator across multi-stack — killed. Packdraw
   doesn't show this line; just the side chevrons. Was painting a
   bright cyan hairline across all columns that competed with the
   floating-items composition. */
.cs-open-view .cases-multi-stack::before,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack::before{
  content: none !important;
  display: none !important;
}
/* Make the multi-stack a positioning context for the indicator + chevrons */
.cs-open-view .cases-multi-stack{ position: relative !important; }
/* Multi-row needs its own side chevrons at vertical center of the
   whole stack (unbloxed pattern). Tag them as direct children. */
.cs-open-view .cases-multi-stack::after{
  content: "" !important;
}
/* Per-row spotlight + chevrons inside each multi-row are unwanted —
   the JS createMultiRow() injects .cs-pointer-top + .cs-pointer-bot
   into EVERY row template. Without this kill the user sees "an arrow
   every row". Stronger specificity (theme + route + view) so the kill
   wins regardless of later cascade additions. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row .cases-spotlight,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row .cs-pointer,
section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row .cases-spotlight,
section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row .cs-pointer,
.cs-open-view .cases-stage-multi-row .cases-spotlight,
.cs-open-view .cases-stage-multi-row .cs-pointer{
  display: none !important;
  visibility: hidden !important;
}
/* Stack-level side chevrons (cs-multi-chev) at the vertical center of
   the whole multi-row stack, pointing inward at the indicator column.
   White (matching the 1x top/bottom chevrons). Phase 2 prefix to win
   over the --pd-blue-accent color rule. */
html[data-theme="phase2"] section[data-route="cases"] .cs-multi-chev,
.cs-open-view .cs-multi-chev,
section[data-route="cases"][data-cs-view="open"] .cs-multi-chev{
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 32px !important; height: 48px !important;
  color: rgba(255,255,255,.85) !important;
  z-index: 8 !important;
  pointer-events: none;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.30))
    drop-shadow(0 2px 4px rgba(0,0,0,.55)) !important;
  display: block !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-multi-chev.cs-pointer-top,
.cs-open-view .cs-multi-chev.cs-pointer-top{
  left: 10px !important; right: auto !important;
  top: 50% !important; bottom: auto !important;
  transform: translateY(-50%) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-multi-chev.cs-pointer-bot,
.cs-open-view .cs-multi-chev.cs-pointer-bot{
  right: 10px !important; left: auto !important;
  top: 50% !important; bottom: auto !important;
  transform: translateY(-50%) !important;
}
.cs-open-view .cs-multi-chev svg{
  width: 32px !important; height: 48px !important;
}

/* Per-row edge fades inside multi-stack — keep horizontal fades. */
.cs-open-view .cases-multi-stack .cases-reel-wrap::before{
  width: 60px !important;
}
.cs-open-view .cases-multi-stack .cases-reel-wrap::after{
  width: 60px !important;
}

/* Item pool tiles — flatten to a single dark bg with a rarity-
   colored hairline at the BOTTOM edge. Drops the gradient panel +
   inset highlight + heavy shadows. Drop-chance label stays top-
   right (no chip bg). Tiles read as clean rectangles, not "glass
   cards".

   Selector is prefixed with html[data-theme="phase2"] to beat the
   existing Phase 2 theme rule that sets bg/radius to packdraw
   tokens — without that prefix, those tokens win on specificity. */
html[data-theme="phase2"] .cs-open-view .cig-item,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item,
.cs-open-view .cig-item,
section[data-route="cases"][data-cs-view="open"] .cig-item{
  border-radius: 12px !important;
  padding: 14px 12px 16px !important;
  background: rgba(11, 15, 27, .85) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}
/* Bottom rarity-color hairline strip — replaces the previous TOP
   thin strip. Anchored to the bottom edge of the tile so it reads
   as "tier marker" without dominating the card. animation+transform
   forced to none — without that the mythic items inherited the
   .rarity-mythic::before { animation: mythicSpin } rotation, which
   made the 2px hairline spin around the tile (the "spinning red
   thing" the user flagged). */
html[data-theme="phase2"] .cs-open-view .cig-item::before,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item::before,
.cs-open-view .cig-item::before,
section[data-route="cases"][data-cs-view="open"] .cig-item::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 14px; right: 14px;
  bottom: 0; top: auto !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--it-color, rgba(125,211,252,.85)) !important;
  box-shadow: 0 0 10px var(--it-color, rgba(125,211,252,.55)) !important;
  align-self: unset !important;
  width: auto !important;
  inset: auto 14px 0 14px !important;
  animation: none !important;
  transform: none !important;
  z-index: 1 !important;
}
/* Also kill the .rarity-mythic conic-spin ring directly in the
   pack-contains grid — belt-and-suspenders so no rotation leaks
   onto any rarity tier in this view. */
.cs-open-view .cig-item.rarity-mythic::before,
section[data-route="cases"][data-cs-view="open"] .cig-item.rarity-mythic::before,
.cs-open-view .cig-item.rarity-legendary::before,
section[data-route="cases"][data-cs-view="open"] .cig-item.rarity-legendary::before{
  animation: none !important;
  transform: none !important;
}
html[data-theme="phase2"] .cs-open-view .cig-item:hover,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item:hover,
.cs-open-view .cig-item:hover,
section[data-route="cases"][data-cs-view="open"] .cig-item:hover{
  background: rgba(15, 20, 35, .92) !important;
  border-color: rgba(255,255,255,.04) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.30) !important;
}
/* Drop-chance label: simpler — small text top-right, no
   background. Reads as a label rather than a chip. */
html[data-theme="phase2"] .cs-open-view .cig-pct,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-pct,
.cs-open-view .cig-pct,
section[data-route="cases"][data-cs-view="open"] .cig-pct{
  position: absolute !important;
  top: 10px; right: 12px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: rgba(241,245,249,.65) !important;
  font-family: 'Inter','SF Pro Display',sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .02em !important;
}
html[data-theme="phase2"] .cs-open-view .cig-name,
.cs-open-view .cig-name,
section[data-route="cases"][data-cs-view="open"] .cig-name{
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(241,245,249,.92) !important;
  letter-spacing: .01em !important;
  margin-top: 2px;
}
html[data-theme="phase2"] .cs-open-view .cig-payout,
.cs-open-view .cig-payout,
section[data-route="cases"][data-cs-view="open"] .cig-payout{
  font-size: 14px !important;
  color: rgba(241,245,249,.78) !important;
  font-weight: 700 !important;
}

/* "Pack contains" section heading — light + minimal to match the
   unbloxed "Item Pool" label feel. */
.cs-open-view .case-items-title,
section[data-route="cases"][data-cs-view="open"] .case-items-title{
  font-family: 'Inter','SF Pro Display',sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  color: rgba(241,245,249,.92) !important;
  margin: 22px 2px 12px !important;
}

/* Hero: keep the image but tone down — smaller, less heavy
   drop-shadow, less aura. */
.cs-open-view .cs-hero,
section[data-route="cases"][data-cs-view="open"] .cs-hero{
  margin: 2px 0 14px !important;
  gap: 8px !important;
}
.cs-open-view .cs-hero-img,
section[data-route="cases"][data-cs-view="open"] .cs-hero-img{
  height: 110px !important;
  max-width: 170px !important;
  filter:
    drop-shadow(0 8px 18px rgba(0,0,0,.45))
    drop-shadow(0 0 16px rgba(96,165,250,.18)) !important;
}
.cs-open-view .cs-hero-name,
section[data-route="cases"][data-cs-view="open"] .cs-hero-name{
  font-size: 20px !important;
  letter-spacing: -.005em !important;
  color: #f1f5f9 !important;
  font-weight: 700 !important;
}

@media (max-width: 600px){
  .cs-open-view .cs-hero-img{ height: 90px !important; max-width: 140px !important; }
  .cs-open-view .cs-hero-name{ font-size: 17px !important; }
}

/* ============================================================
   UNBLOXED-STYLE SPIN CLEANUP — image-2 reference rework.
   The earlier multi-row look had:
     1. A bright horizontal divider line across the whole stack
     2. Per-rarity colored drop-shadow halos behind each ci-img
     3. Per-item rarity strip lines at the top of each cell
   …which together made the spin feel busy and noisy.
   The reference (unbloxed) is much cleaner: items read as small,
   sticker-like icons floating on a dark panel, with only a pair
   of side chevrons indicating the winning row. No center hairline,
   no rarity-tinted auras, no top strips.
   The 1x horizontal reel gets the same colored-aura cleanup so it
   feels consistent — only the cs-winner card keeps its rarity
   halo (so the reveal moment still pops).
   This block is appended LAST so it wins the cascade over the
   earlier per-rarity .ci-img filters + the ::before divider rule.
============================================================ */

/* --- 1. Kill the bright horizontal divider line in multi-stack. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack::before,
.cs-open-view .cases-multi-stack::before,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack::before{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* --- 1b. Kill the per-row VERTICAL spotlight hairline + per-row
       chevrons inside each multi-stack column. The earlier override
       used `.cs-open-view` only, but the JS toggles `data-cs-view`
       (attribute) not a class — so the rule never matched, leaving
       a bright blue vertical bar painted between items in every
       column. Mirror the attribute selector here so it actually
       wins, and beat the phase2 rule too. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-spotlight,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-spotlight,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row .cases-spotlight,
section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row .cases-spotlight{
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}
/* Per-row 1x-style top/bottom chevrons are also unwanted in multi-
   stack (the stack uses cs-multi-chev on the sides instead). Hide
   any cs-pointer inside a column that isn't tagged cs-multi-chev. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row .cs-pointer:not(.cs-multi-chev),
section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row .cs-pointer:not(.cs-multi-chev){
  display: none !important;
}

/* --- 1c. Per-item rarity GLOW (was the rarity bottom-hairline kill;
        repurposed for the packdraw-style soft radial halo behind
        each item). Same selectors as before so the higher-specificity
        version wins for both #cs-stage and .cases-multi-stack scopes.
        Color driven by --it-color which is set per .rarity-* class
        at 37369-37374. --- */
/* Halo circle removed per user request — only the per-rarity
   drop-shadow on .ci-img stays. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item:not(.cs-winner)::after,
.cs-open-view .cases-multi-stack .case-item:not(.cs-winner)::after,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item:not(.cs-winner)::after,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item:not(.cs-winner)::after,
.cs-open-view #cs-stage .case-item:not(.cs-winner)::after,
section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item:not(.cs-winner)::after{
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
}

/* --- 2. Force-hide rarity strip lines on items inside multi-stack
        columns (the earlier rule had specificity gaps under phase2). --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item::before,
html[data-theme="phase2"] .cs-open-view .cases-multi-stack .case-item::before,
.cs-open-view .cases-multi-stack .case-item::before,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item::before{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* Items inside multi-stack are a grid (4px / 1fr / auto). The first
   row was reserved for the now-hidden rarity strip — collapse it so
   the icon centers properly with no phantom gap at the top. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item,
.cs-open-view .cases-multi-stack .case-item{
  grid-template-rows: 0 1fr 0 !important;
}

/* --- 3. Kill rarity-tinted halos in multi-stack columns. Replace
        with a subtle WHITE drop-shadow under the icon so it reads
        as floating off a dark panel (image-2 unbloxed look) without
        painting a colored aura. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item .ci-img,
/* Multi-stack item glow — matches 1x. Common/uncommon get only a
   depth shadow; higher rarities a small subtle colored tint. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item .ci-img,
.cs-open-view .cases-multi-stack .case-item .ci-img{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item.rarity-rare .ci-img,
.cs-open-view .cases-multi-stack .case-item.rarity-rare .ci-img{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(96,165,250,.18)) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item.rarity-epic .ci-img,
.cs-open-view .cases-multi-stack .case-item.rarity-epic .ci-img{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) drop-shadow(0 0 7px rgba(192,132,252,.22)) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item.rarity-legendary .ci-img,
.cs-open-view .cases-multi-stack .case-item.rarity-legendary .ci-img{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(251,191,36,.25)) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item.rarity-mythic .ci-img,
.cs-open-view .cases-multi-stack .case-item.rarity-mythic .ci-img{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(248,113,113,.28)) !important;
}

/* --- 3b. Drop the gradient panel bg on items inside multi-stack
        columns. Image-2 items float as icons on the unified dark
        stack panel, NOT as individual rounded tiles. The cs-winner
        keeps its highlight via its own bg + border rules. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item:not(.cs-winner),
.cs-open-view .cases-multi-stack .case-item:not(.cs-winner),
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item:not(.cs-winner){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Winner card inside multi-stack still gets a rarity halo so the
   landing pop reads. Re-apply explicitly because rule 3 above is
   broader and would otherwise neutralize it. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item.cs-winner .ci-img,
.cs-open-view .cases-multi-stack .case-item.cs-winner .ci-img{
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.55))
    drop-shadow(0 0 22px var(--it-color, rgba(96,165,250,.85)))
    drop-shadow(0 0 44px color-mix(in srgb, var(--it-color, #60A5FA) 45%, transparent)) !important;
}

/* --- 4. EXACT unbloxed values (inspected via DevTools 2026-05-25):
        - Reel panel bg: #171A24 (darker than page bg = recessed)
        - Border: 2px solid #1F2330
        - Border radius: 6px
        - Pool tiles: #242936 (lighter than page bg = elevated)
        Page body sits at #1A1D28 between them. Surface hierarchy
        is: panel (deepest) < body < tiles (highest). --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack,
.cs-open-view .cases-multi-stack,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack{
  gap: 0 !important;
  border-radius: 6px !important;
  background: #171A24 !important;
  border: 2px solid #1F2330 !important;
  padding: 0 !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage,
.cs-open-view #cs-stage,
section[data-route="cases"][data-cs-view="open"] #cs-stage{
  /* Packdraw 1x layout — frameless. Items float on the page bg with
     no box around them. Previously this rule painted a 2px navy frame
     + lighter inner panel; both removed so the reel matches packdraw. */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Kill the inset frame + outer drop-shadow from the base
   .cases-stage rule (inset 0 1px 0 highlight + inset 0 0 60px
   black vignette + 0 14px 40px outer shadow). The multi-stack
   path has these stripped naturally because .cases-stage-multi-
   row overrides bg/border/shadow to transparent/0/none; the 1x
   #cs-stage was inheriting the heavy shadow chain, which was
   the "dark outline + backdrop shadow" the user flagged on 1x. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage::before,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage::after,
.cs-open-view #cs-stage::before,
.cs-open-view #cs-stage::after,
section[data-route="cases"][data-cs-view="open"] #cs-stage::before,
section[data-route="cases"][data-cs-view="open"] #cs-stage::after{
  box-shadow: none !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item,
.cs-open-view .cig-item,
section[data-route="cases"][data-cs-view="open"] .cig-item{
  /* Match the right-rail Live Opens card exactly — flat neutral
     dark-gray panel, no border, no shadow. */
  background: #1c1f29 !important;
  border-radius: 14px !important;
  padding: 14px !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* --- 4d. Subtle white-fade column separators in the multi-stack.
        Between every pair of columns sits a 1px hairline that
        gradient-fades top + bottom — matches the site's other
        "subtle dividers" aesthetic. Drop the visible row borders
        first so it's only this hairline between columns. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-stage-multi-row,
.cs-open-view .cases-multi-stack .cases-stage-multi-row,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-stage-multi-row{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- 4e. KILL the per-column left/right edge-fade wash inside
        the multi-stack. The earlier rule painted a 60px-wide dark
        gradient on each column's reel-wrap::before/::after (left
        over from the 1x horizontal-scroll mode where it makes
        sense). In vertical-scroll columns it just paints dark
        bands on either side of every item — exactly what the
        user circled. Force them off. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-reel-wrap::before,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-reel-wrap::after,
.cs-open-view .cases-multi-stack .cases-reel-wrap::before,
.cs-open-view .cases-multi-stack .cases-reel-wrap::after,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-reel-wrap::before,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-reel-wrap::after{
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  opacity: 0 !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-stage-multi-row + .cases-stage-multi-row,
.cs-open-view .cases-multi-stack .cases-stage-multi-row + .cases-stage-multi-row,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-stage-multi-row + .cases-stage-multi-row{
  /* Column dividers killed — packdraw shows just whitespace between
     columns. The previous fading-hairline border looked like ruled
     paper between every column. */
  border-left: 0 !important;
  border-image: none !important;
}

/* --- 4d-1x. Mirror the same subtle hairline separators in the 1x
        horizontal reel. User: "the 1x one doesnt look the same as
        the 2x or others". Multi-stack already had vertical white-
        fade dividers between columns, but the 1x reel had nothing
        between items. Drop the 4px reel gap so the hairlines sit
        flush against the item edges, and add the same fading
        border-image on each non-first item. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-reel,
.cs-open-view #cs-stage .cases-reel,
section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-reel{
  /* Restore breathing-room gap between items (was 0 to make the
     fading separator below sit flush). Now that we kill the
     separator entirely, gap returns so items don't feel crammed. */
  gap: 18px !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-reel .case-item + .case-item,
.cs-open-view #cs-stage .cases-reel .case-item + .case-item,
section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-reel .case-item + .case-item{
  /* Inter-item separator killed — packdraw shows only whitespace
     between items, no fading hairline. */
  border-left: 0 !important;
  border-image: none !important;
}

/* --- 5. Each column reads as a clean reel slot. Drop the inner
        per-row background/borders so the panel is unified. NO
        max-width — columns flex:1 to fill the whole panel evenly
        (unbloxed pattern: 4 columns share the panel width edge-
        to-edge, no dark margin around the stack). --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row,
.cs-open-view .cases-stage-multi-row,
section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
}

/* More vertical breathing between items so the column doesn't feel
   tight when the reel stops. Items stay 91px square. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-reel,
.cs-open-view .cases-multi-stack .cases-reel{
  gap: 14px !important;
}

/* --- 5b. Items in multi-stack — sized to match the unbloxed
        reference. 110×110 square with a generous inner padding so
        the icon reads cleanly without filling the cell. Items stay
        the same size across 2x / 3x / 4x (no distortion when
        switching counts). --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item,
.cs-open-view .cases-multi-stack .case-item{
  flex: 0 0 160px !important;
  width: 160px !important;
  height: 160px !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item .ci-icon-wrap,
.cs-open-view .cases-multi-stack .case-item .ci-icon-wrap{
  padding: 12px !important;
  width: 140px !important;
  height: 140px !important;
}
/* Stack height — taller now that items are 160px so 3 items
   still fit comfortably per column. Also bigger so the chevrons
   have a tall edge to sit at. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack,
.cs-open-view .cases-multi-stack,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack{
  height: 520px !important;
}

/* --- 5b-1x. EXACT unbloxed reel item structure (inspected):
        - slot: 160px wide × full stage height, flex-col centered
        - INNER image area: fixed 110×110, centered in the slot
        - NO filter on images (no shadows, no halos, no auras)
        - Stage height: 260px (matches unbloxed)

        The previous build had .ci-icon-wrap filling the whole slot
        which made images render larger than the reference. Lock the
        inner wrap to 110×110 so the image always renders at the
        exact reference size regardless of slot height. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item,
.cs-open-view #cs-stage .case-item,
section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item{
  flex: 0 0 160px !important;
  width: 160px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item .ci-icon-wrap,
.cs-open-view #cs-stage .case-item .ci-icon-wrap,
section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item .ci-icon-wrap{
  width: 110px !important;
  height: 110px !important;
  flex: 0 0 110px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item .ci-img,
.cs-open-view #cs-stage .case-item .ci-img,
section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item .ci-img{
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: none !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage,
.cs-open-view #cs-stage,
section[data-route="cases"][data-cs-view="open"] #cs-stage{
  height: 260px !important;
}

/* --- 5b-1x MOBILE. On a phone the 160px reel slot let only ~1.8 tiles
        sit in the ~320px window, so the spin was a featureless blur with
        no neighbouring tiles to anchor the deceleration against — it read
        as "the spin goes too fast" even at the full 6s (measured: 1.79
        tiles visible @375px vs 5.13 @1280px). Shrink the slot so ~3 tiles
        show (matching packdraw's mobile reel), which restores the spatial
        reference that makes the ease-out legible. Stage height drops in
        proportion so the smaller art doesn't float in a tall void. Scoped
        to ≤600px so tablets keep the desktop-sized 160px slot (they already
        show ~4+ tiles). The #cs-stage ID gives these the specificity to win
        over the 160px rule above; placed after it so equal-specificity
        ties resolve our way. --- */
@media (max-width: 600px){
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage,
  .cs-open-view #cs-stage,
  section[data-route="cases"][data-cs-view="open"] #cs-stage{
    height: 196px !important;
  }
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item,
  .cs-open-view #cs-stage .case-item,
  section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item{
    flex: 0 0 96px !important;
    width: 96px !important;
  }
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item .ci-icon-wrap,
  .cs-open-view #cs-stage .case-item .ci-icon-wrap,
  section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item .ci-icon-wrap{
    width: 80px !important;
    height: 80px !important;
    flex: 0 0 80px !important;
  }
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-reel,
  .cs-open-view #cs-stage .cases-reel,
  section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-reel{
    gap: 10px !important;
  }
}

/* --- 5c. Soften 1x edge fades. The earlier 100px wide dark wash
        on .cases-reel-wrap::before/::after made the leftmost +
        rightmost items disappear into a heavy black gradient — user
        flagged "x1 still has the edges blured". Shrink to a thin
        40px alpha-only fade so items only soften at the very edge
        instead of vanishing 1/4 into the stage. Bg color is dropped
        too so we don't paint a dark wash on top of the (now lighter)
        stage bg. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-reel-wrap::before,
.cs-open-view #cs-stage .cases-reel-wrap::before,
section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-reel-wrap::before{
  width: 40px !important;
  background: linear-gradient(90deg,
    rgba(20, 28, 52, .85) 0%,
    rgba(20, 28, 52, .35) 60%,
    transparent 100%) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-reel-wrap::after,
.cs-open-view #cs-stage .cases-reel-wrap::after,
section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-reel-wrap::after{
  width: 40px !important;
  background: linear-gradient(270deg,
    rgba(20, 28, 52, .85) 0%,
    rgba(20, 28, 52, .35) 60%,
    transparent 100%) !important;
}

/* --- 5d. Pop count-pill transitions (1↔2↔3↔4). User flagged the
        prior version felt laggy + distorted item sizes. Snappy
        ~140ms pop on the multi-stack appearance using a tiny
        scale (.985→1) + opacity — no vertical squish, no slow
        fade. Items stay at their final 150×150 throughout, the
        pop is on the panel container only. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack,
.cs-open-view .cases-multi-stack,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack{
  animation: bxStackPop 140ms cubic-bezier(0.19, 1, 0.22, 1) both !important;
  transform-origin: top center;
  will-change: opacity, transform;
}
@keyframes bxStackPop{
  from{ opacity: 0; transform: scale(.985); }
  to  { opacity: 1; transform: scale(1);    }
}
/* Row enter/exit — drop the max-height interpolation (caused the
   slow expand feel) and use pure opacity + tiny translateY. */
.cs-open-view .cases-stage-multi-row.cs-row-enter,
section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row.cs-row-enter,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row.cs-row-enter{
  animation: bxColPop 140ms cubic-bezier(0.19, 1, 0.22, 1) both !important;
}
.cs-open-view .cases-stage-multi-row.cs-row-exit,
section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row.cs-row-exit,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row.cs-row-exit{
  animation: bxColPopOut 100ms ease-in both !important;
  pointer-events: none;
}
@keyframes bxColPop{
  from{ opacity: 0; transform: translateY(-4px) scale(.97); }
  to  { opacity: 1; transform: translateY(0) scale(1);    }
}
@keyframes bxColPopOut{
  from{ opacity: 1; transform: scale(1);    }
  to  { opacity: 0; transform: scale(.97); }
}
/* Single stage fades out instantly when hidden — no 200ms wait.
   The cs-fading class (added by JS) just hides it; the multi-
   stack's pop covers the swap visually. */
.cs-open-view #cs-stage,
section[data-route="cases"][data-cs-view="open"] #cs-stage{
  transition: opacity 100ms cubic-bezier(.4, 0, .2, 1) !important;
}
.cs-open-view #cs-stage.cs-fading,
section[data-route="cases"][data-cs-view="open"] #cs-stage.cs-fading{
  opacity: 0 !important;
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce){
  .cs-open-view .cases-multi-stack,
  .cs-open-view .cases-stage-multi-row.cs-row-enter,
  .cs-open-view .cases-stage-multi-row.cs-row-exit,
  .cs-open-view #cs-stage{
    animation: none !important;
    transition: none !important;
  }
}

/* --- 6. Side chevrons — bigger + brighter + tighter to the panel
        edge to match image 2 proportions. The earlier 14-16px chev
        looked tiny against the wide multi-stack panel; bumping to
        ~20×30 reads as a clear indicator without dominating. --- */
html[data-theme="phase2"] section[data-route="cases"] .cs-multi-chev,
.cs-open-view .cs-multi-chev,
section[data-route="cases"][data-cs-view="open"] .cs-multi-chev{
  width: 40px !important;
  height: 64px !important;
  color: #ffffff !important;
  opacity: .9;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.32))
    drop-shadow(0 2px 5px rgba(0,0,0,.6)) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-multi-chev.cs-pointer-top,
.cs-open-view .cs-multi-chev.cs-pointer-top{
  left: 12px !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-multi-chev.cs-pointer-bot,
.cs-open-view .cs-multi-chev.cs-pointer-bot{
  right: 12px !important;
}
/* Highest-specificity SVG sizing so it beats the generic
   `section[data-route="cases"][data-cs-view="open"] .cs-pointer svg`
   rule at line 37496 (which forces 20x14). */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-multi-chev svg,
section[data-route="cases"][data-cs-view="open"] .cs-multi-chev svg,
.cs-open-view .cs-multi-chev svg{
  width: 40px !important;
  height: 64px !important;
  display: block !important;
}

/* --- 7. 1x horizontal reel — very subtle floating-shadow on items.
        Common/uncommon get only a depth shadow (no colored glow).
        Higher rarities get a faint colored tint at low opacity
        + small radius so it reads as a hint, not a halo disc.
        Strip during spin happens further down via cs-spinning rule. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item:not(.cs-winner) .ci-img,
.cs-open-view #cs-stage .case-item:not(.cs-winner) .ci-img{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item.rarity-rare:not(.cs-winner) .ci-img,
.cs-open-view #cs-stage .case-item.rarity-rare:not(.cs-winner) .ci-img{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(96,165,250,.18)) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item.rarity-epic:not(.cs-winner) .ci-img,
.cs-open-view #cs-stage .case-item.rarity-epic:not(.cs-winner) .ci-img{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) drop-shadow(0 0 7px rgba(192,132,252,.22)) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item.rarity-legendary:not(.cs-winner) .ci-img,
.cs-open-view #cs-stage .case-item.rarity-legendary:not(.cs-winner) .ci-img{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(251,191,36,.25)) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item.rarity-mythic:not(.cs-winner) .ci-img,
.cs-open-view #cs-stage .case-item.rarity-mythic:not(.cs-winner) .ci-img{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(248,113,113,.28)) !important;
}

/* --- 7b. Kill the vertical center hairline in 1x mode. The earlier
        rule at the phase-2 layer explicitly DISPLAYS .cases-spotlight
        as a blue gradient column — the unbloxed reference doesn't
        have any visible center line, just the top/bottom chevrons.
        Suppress both inside #cs-stage and any cs-pointer-* line glow. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-spotlight,
.cs-open-view #cs-stage .cases-spotlight,
section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-spotlight{
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

/* --- 7c. 1x chevrons — image-2 reference has noticeably chunkier
        top/bottom arrows than the 20×14 we ship. Bump to ~36×24
        with a brighter glow so they read as a clear indicator and
        stay visible at all spin speeds. Inside #cs-stage only — the
        multi-stack side chevrons keep their own sizing. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .cs-pointer,
.cs-open-view #cs-stage .cs-pointer,
section[data-route="cases"][data-cs-view="open"] #cs-stage .cs-pointer{
  width: 36px !important;
  height: 24px !important;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.55))
    drop-shadow(0 1px 3px rgba(0,0,0,.65)) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .cs-pointer svg,
.cs-open-view #cs-stage .cs-pointer svg,
section[data-route="cases"][data-cs-view="open"] #cs-stage .cs-pointer svg{
  width: 36px !important;
  height: 24px !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .cs-pointer-top,
.cs-open-view #cs-stage .cs-pointer-top,
section[data-route="cases"][data-cs-view="open"] #cs-stage .cs-pointer-top{
  top: 4px !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .cs-pointer-bot,
.cs-open-view #cs-stage .cs-pointer-bot,
section[data-route="cases"][data-cs-view="open"] #cs-stage .cs-pointer-bot{
  bottom: 4px !important;
}

/* --- 7d. Stage border-radius locked to 6px (matches unbloxed). */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage,
.cs-open-view #cs-stage,
.cs-open-view .cases-stage,
section[data-route="cases"][data-cs-view="open"] #cs-stage,
section[data-route="cases"][data-cs-view="open"] .cases-stage{
  border-radius: 6px !important;
}

/* --- 7g. EXACT unbloxed pool tile content styling.
        Inspected from grid-cols-[repeat(auto-fill,minmax(10rem,1fr))]:
        - tile: bg #242936, radius 8px, padding 12px
        - %: top-2 right-2 (8px), 12px bold #848794
        - name: 14px bold white, truncate
        - price: bg-white/5 (rgba(255,255,255,.05)), 14px bold white,
          6px radius, padding 2px 8px (subtle pill, NOT plain text)
        - bottom rarity hairline: 2px GRADIENT (not solid)
        - img: 80×80 inside 80×80 wrapper, mx-auto
        Grid container: gap 8px, columns minmax(10rem, 1fr). */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-pct,
.cs-open-view .cig-pct,
section[data-route="cases"][data-cs-view="open"] .cig-pct{
  /* Top-center placement to match packdraw — sits above the item
     image as a small muted label. Value stays at whatever fmtPct()
     returns (trailing zeros already stripped per app.js). */
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%);
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.55) !important;
  font-family: 'Inter','SF Pro Display',sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  z-index: 3 !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-name,
.cs-open-view .cig-name,
section[data-route="cases"][data-cs-view="open"] .cig-name{
  text-align: center !important;
  width: 100% !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #ffffff !important;
  letter-spacing: 0 !important;
  /* Tightened: 12 → 4 so the name sits close under the artwork
     instead of floating with a 12px gap that ate card height. */
  margin-top: 4px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item .cig-payout,
.cs-open-view .cig-item .cig-payout,
section[data-route="cases"][data-cs-view="open"] .cig-item .cig-payout{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin-top: 4px !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 0 !important;
  font-family: 'Inter','SF Pro Display',sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #ffffff !important;
  letter-spacing: 0 !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item .cig-payout .bc-glyph,
.cs-open-view .cig-item .cig-payout .bc-glyph,
section[data-route="cases"][data-cs-view="open"] .cig-item .cig-payout .bc-glyph{
  width: 12px !important;
  height: 12px !important;
}
/* Tile image — 80×80 centered, with a rarity-tinted radial halo
   behind it (packdraw effect: pop the item off the matte card with
   a soft colored glow). Color follows --it-color set per .rarity-*
   class. The halo sits via ::before so the <img> can stay clean. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item .cig-icon-wrap,
.cs-open-view .cig-item .cig-icon-wrap,
section[data-route="cases"][data-cs-view="open"] .cig-item .cig-icon-wrap{
  /* Square artwork zone that scales with card width — this gives
     a predictable card aspect (square image + small name/payout
     row) regardless of grid column size. Replaces the fixed
     120×120 box and the prior flex-grow approach (which made card
     height depend on the name's line count and ran past
     aspect-ratio on wider columns). */
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item .cig-icon-wrap::before,
.cs-open-view .cig-item .cig-icon-wrap::before,
section[data-route="cases"][data-cs-view="open"] .cig-item .cig-icon-wrap::before{
  /* Halo removed to match the live-opens flat backdrop — rarity is
     still conveyed by the bottom hairline + image drop-shadow. */
  content: none !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item .cig-img,
.cs-open-view .cig-item .cig-img,
section[data-route="cases"][data-cs-view="open"] .cig-item .cig-img{
  /* Force every <img> to render in an identical 72% × 72% square
     box inside the icon-wrap — object-fit:contain then centers the
     natural artwork within that uniform frame. Without this, the
     IMG's intrinsic dimensions varied per asset (wide hats, tall
     turkeys, square eggs) and the visible artwork ended up at
     different positions / sizes despite the flex centering. */
  width: 72% !important;
  height: 72% !important;
  max-width: 72% !important;
  max-height: 72% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: auto !important;
  position: relative;
  z-index: 1;
}
/* Bottom rarity hairline — gradient (90deg), 2px tall, full
   width of the tile (no left/right inset like before). */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item::before,
.cs-open-view .cig-item::before,
section[data-route="cases"][data-cs-view="open"] .cig-item::before{
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  height: 2px !important;
  width: auto !important;
  inset: auto 0 0 0 !important;
  background: linear-gradient(90deg,
    var(--it-color, rgba(125,211,252,1)) 0%,
    color-mix(in srgb, var(--it-color, #7dd3fc) 60%, white) 100%) !important;
  box-shadow: none !important;
  border-radius: 0 0 8px 8px !important;
  opacity: 1 !important;
}
/* Grid container — bigger tiles with more breathing room so the
   row breaks naturally at 5-6 per row on typical viewports and
   the leftover items flow to a second row instead of cramming all
   on one. justify-content:center keeps any short-row remainder
   centered under the section. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-items-grid,
.cs-open-view .case-items-grid,
section[data-route="cases"][data-cs-view="open"] .case-items-grid{
  gap: 14px !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  justify-content: center !important;
}
/* Mobile: smaller min so 2 cards still fit per row at ~375px. */
@media (max-width: 760px){
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-items-grid,
  .cs-open-view .case-items-grid,
  section[data-route="cases"][data-cs-view="open"] .case-items-grid{
    gap: 8px !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }
}

/* --- 7e. Item rarity glow (packdraw-style). Previously this rule
        *killed* ::after entirely (the original was a 2px rarity
        hairline strip). Now ::after carries the soft radial-gradient
        glow behind each item — the visual cue packdraw bakes into
        the item PNGs themselves. Color is driven by --it-color set
        per rarity class at lines 37369-37374. cs-winner gets a
        stronger override below. --- */
/* Halo circle removed per user request — only the per-rarity
   drop-shadow on .ci-img stays. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item:not(.cs-winner)::after,
.cs-open-view .case-item:not(.cs-winner)::after,
section[data-route="cases"][data-cs-view="open"] .case-item:not(.cs-winner)::after{
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
}

/* --- 7f. Mirror the multi-stack item cleanup to the 1x reel. The
        earlier 1x changes targeted ci-img (halos) but left items
        with their gradient tile bg + the legacy `.case-item::before`
        rarity strip + the `.ci-mult` chip's dark pill — so items
        still read as "individual cards" rather than icons floating
        on the stage panel.

        User noticed: "1 case is different from 2-3-4 and maybe u
        didnt change it for the one w 1". So apply the same flat-
        icon treatment to #cs-stage items: transparent bg, no rarity
        strip, no chip backdrop on the % label.

        cs-winner keeps its own bg + box-shadow via the existing
        winner rules so the landing card still pops. --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item:not(.cs-winner),
.cs-open-view #cs-stage .case-item:not(.cs-winner),
section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item:not(.cs-winner){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item:not(.cs-winner)::before,
.cs-open-view #cs-stage .case-item:not(.cs-winner)::before,
section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item:not(.cs-winner)::before{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  height: 0 !important;
}
/* The 1x grid-template-rows reserves a 4px top row for the now-
   hidden rarity strip. Collapse it so the icon centers cleanly. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item,
.cs-open-view #cs-stage .case-item,
section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item{
  grid-template-rows: 0 1fr auto !important;
}
/* Drop the dark pill backdrop on the % label so the number floats
   over the icon like image-2's clean look. Keep the strong text-
   shadow for legibility against any artwork. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item:not(.cs-winner) .ci-mult,
.cs-open-view #cs-stage .case-item:not(.cs-winner) .ci-mult,
section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item:not(.cs-winner) .ci-mult{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* --- 8. Mobile: tighten the chevrons + side padding so the panel
        doesn't waste space on small screens. --- */
@media (max-width: 760px){
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack,
  .cs-open-view .cases-multi-stack{
    padding: 0 14px !important;
    border-radius: 10px !important;
  }
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-multi-chev,
  .cs-open-view .cs-multi-chev{
    width: 13px !important;
    height: 20px !important;
  }
  .cs-open-view .cs-multi-chev svg{
    width: 13px !important;
    height: 20px !important;
  }
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-reel,
  .cs-open-view .cases-multi-stack .cases-reel{
    gap: 10px !important;
  }
  /* Multi-open (2x/3x/4x): the 140px-locked item overflowed its flex column
     on phones (column is overflow:hidden) -> tiles clipped. Let items shrink
     to share the row instead of a fixed width. */
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item,
  .cs-open-view .cases-multi-stack .case-item{
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 140px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* ============================================================
   FULL-SITE SLOP AUDIT — sweep #2

   Targets, ordered by impact:
   1. Decorative animations (motion that conveys nothing).
   2. Pack catalog tiles → match the polished Item Pool style.
   3. Logo-letter bounce → flatten.

   Per the impeccable shared design laws: motion serves state, not
   decoration. Kill rotating rings, slow bursts, bouncing letters,
   conic-spin halos. Each replaced with no-op `animation: none`
   so the @keyframes themselves stay defined (no perf cost) for
   safety, but no element animates by them anymore.
============================================================ */

/* (1) Decorative rotations / pulses on rarity-mythic items. The
       conic-gradient ring spinning 3s/5s around every mythic and
       legendary item is the loudest decorative motion on the site,
       and it spins forever — exactly the kind of "AI made that"
       move impeccable flags. Replaced with a static halo via the
       existing background; rotation killed. */
.rarity-mythic::before,
.case-item.rarity-mythic::before,
.case-item.rarity-legendary::before,
.cig-item.rarity-mythic::before,
.cig-item.rarity-legendary::before{
  animation: none !important;
}

/* (2) Slots-machine decorative chrome: floor pulse + spinning star.
       Both are purely visual sparkle that doesn't tell the player
       anything about game state. */
.sm-floor-halo{ animation: none !important; }
.sm-star-l,
.sm-star-r{ animation: none !important; }

/* (3) Decorative burst spins (legendary/mythic item glow rings on
       game cards / win screens). Same family as mythicSpin — slow
       rotation that conveys nothing. */
[class*="burstSpin"],
.case-emerge{ animation: none !important; }

/* (4) Logo wordmark bounce. The bouncing letters in the main logo
       are pure decoration; the wordmark reads fine without motion.
       The gradient text on .ll stays for brand identity (defensible
       exception to the gradient-text ban) but the bounce goes. */
.ll{ animation: none !important; }

/* (5) Game-card emerge bob on case-card previews. Subtle but
       persistent motion that doesn't help the user pick a pack. */
.case-card .cc-art .case-emerge,
.case-card .case-emerge{ animation: none !important; }

/* ============================================================
   Pack catalog tiles — match the Item Pool tile aesthetic.
   The legacy .case-card is heavy: 18px radius, heavy gradient bg,
   reddish-black wash, large drop shadow, big hover lift. Migrate
   to the same flat panel + subtle rarity-tinted hover language
   we just polished on .cig-item.
============================================================ */
html[data-theme="phase2"] section[data-route="cases"] .case-card,
section[data-route="cases"] .case-card{
  border-radius: 8px !important;
  padding: 14px 12px 16px !important;
  background: #242936 !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  box-shadow: none !important;
  transition:
    transform 200ms cubic-bezier(0.19, 1, 0.22, 1),
    background-color 200ms cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 200ms cubic-bezier(0.19, 1, 0.22, 1) !important;
  will-change: transform;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card:hover,
section[data-route="cases"] .case-card:hover{
  transform: translateY(-3px) scale(1.015) !important;
  background: #2A3046 !important;
  border-color: rgba(255,255,255,.06) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .35),
    0 0 0 1px color-mix(in srgb, var(--case-glow, #7dd3fc) 35%, transparent),
    0 0 20px color-mix(in srgb, var(--case-glow, #7dd3fc) 18%, transparent) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card:hover .cc-art,
section[data-route="cases"] .case-card:hover .cc-art{
  transform: translateY(-2px) scale(1.06) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.selected,
section[data-route="cases"] .case-card.selected{
  border-color: color-mix(in srgb, var(--case-glow, #fbbf24) 70%, transparent) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--case-glow, #fbbf24) 60%, transparent),
    0 12px 28px rgba(0, 0, 0, .35),
    0 0 24px color-mix(in srgb, var(--case-glow, #fbbf24) 30%, transparent) !important;
}
/* Catalog tile name — match Item Pool tile name treatment. */
html[data-theme="phase2"] section[data-route="cases"] .case-card .cc-name,
section[data-route="cases"] .case-card .cc-name{
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #ffffff !important;
  letter-spacing: 0 !important;
  margin-top: 8px !important;
}

/* Catalog tile price row — drop the chunky 24px display number,
   match the pool tile bg-white/5 pill instead. */
html[data-theme="phase2"] section[data-route="cases"] .case-card .cc-price-row,
section[data-route="cases"] .case-card .cc-price-row{
  font-family: 'Inter','SF Pro Display',sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  width: max-content !important;
  margin: 6px auto 0 !important;
  letter-spacing: 0 !important;
  gap: 4px !important;
}

/* Respect reduced-motion: drop all transforms. */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .case-card,
  html[data-theme="phase2"] section[data-route="cases"] .case-card:hover,
  html[data-theme="phase2"] section[data-route="cases"] .case-card:hover .cc-art{
    transform: none !important;
    transition: background-color 120ms ease !important;
  }
}

/* ============================================================
   UNBLOXED-MATCH PASS — diff between current build (image 1)
   vs unbloxed reference (image 2).

   1) Reel items must NOT show the % label under each icon. The
      multi-stack already hides .ci-mult; the 1x #cs-stage was
      still showing the chip + number. Hide it entirely in the
      open view for non-winner items.

   2) Pack-contains tiles: drop the dark pill chip around the
      currency. Reference shows a plain "$6.48" / "$1.79" — no
      backdrop, no border, no pill. Center everything in the tile.

   3) Force-kill any rarity-tinted halos painted via .case-item
      ::before in the reel — the reference items have NO colored
      vignette behind them, just a subtle white drop shadow on
      the artwork itself.

   4) Stronger rarity hairline at the bottom of pool tiles +
      slightly lighter gradient bg, matching the reference card
      look. cs-winner halos in the reel still keep their rarity
      glow so the landing card pops.
============================================================ */

/* (1) Hide % label under reel items in BOTH 1x and multi-stack.
       No :not(.cs-winner) — even the winning item should not show
       a chip below the icon (the chevron indicator + center
       alignment communicates "this one" without a chip). User
       reported the chip was still showing on the centered item;
       that was because the previous rule excluded cs-winner. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item .ci-mult,
.cs-open-view #cs-stage .case-item .ci-mult,
section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item .ci-mult,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item .ci-mult,
.cs-open-view .cases-multi-stack .case-item .ci-mult,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item .ci-mult{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* (2) Pool tile currency — bg-white/5 pill, exact unbloxed values:
       bg rgba(255,255,255,.05), padding 2px 8px, radius 6px,
       14px bold white, centered. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item .cig-payout,
.cs-open-view .cig-item .cig-payout,
section[data-route="cases"][data-cs-view="open"] .cig-item .cig-payout{
  background: rgba(255, 255, 255, 0.05) !important;
  border: 0 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  gap: 4px !important;
  margin-top: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tile layout — squarer aspect (close to 1:1.18) so the artwork
   zone dominates instead of the prior tall-and-narrow column shape.
   Padding + gap tightened. Transitions on transform + box-shadow
   only (never layout properties) so hover stays GPU-composited. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item,
.cs-open-view .cig-item,
section[data-route="cases"][data-cs-view="open"] .cig-item{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 4px !important;
  padding: 14px 12px 14px !important;
  /* No aspect-ratio on the card itself — the icon-wrap is a square
     (aspect 1/1) and the name + payout add a short fixed-height
     row below. Net card aspect lands at ~0.77-0.85 depending on
     column width, with the artwork zone always dominating. */
  cursor: pointer;
  transition:
    transform 200ms cubic-bezier(0.19, 1, 0.22, 1),
    background-color 200ms cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 200ms cubic-bezier(0.19, 1, 0.22, 1) !important;
  will-change: transform;
}

/* Hover state — subtle rarity-tinted lift + glow + image pop.
   Hover state lives on .cig-item; descendants pick up the
   :hover via combinator so the image inside also scales for a
   "pop" effect. Outer ring uses the rarity color at low opacity
   to telegraph the tier without screaming.

   Pattern: lift 3px, scale 1.015, image scale 1.04, rarity-tinted
   shadow halo. 200ms ease-out-expo across the board. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item:hover,
.cs-open-view .cig-item:hover,
section[data-route="cases"][data-cs-view="open"] .cig-item:hover{
  /* Match the live-opens hover — small lift, slightly lighter bg,
     no glow shadow. The image still scales 1.06 via the rule below
     so the hover still reads as "alive". */
  background: #232734 !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item .cig-img,
.cs-open-view .cig-item .cig-img,
section[data-route="cases"][data-cs-view="open"] .cig-item .cig-img{
  transition: transform 200ms cubic-bezier(0.19, 1, 0.22, 1) !important;
  will-change: transform;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item:hover .cig-img,
.cs-open-view .cig-item:hover .cig-img,
section[data-route="cases"][data-cs-view="open"] .cig-item:hover .cig-img{
  transform: scale(1.06) !important;
}

/* Bottom hairline brightens on hover — the rarity color reads
   more saturated, matching the lifted card. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item::before,
.cs-open-view .cig-item::before,
section[data-route="cases"][data-cs-view="open"] .cig-item::before{
  transition: filter 200ms cubic-bezier(0.19, 1, 0.22, 1) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item:hover::before,
.cs-open-view .cig-item:hover::before,
section[data-route="cases"][data-cs-view="open"] .cig-item:hover::before{
  filter: brightness(1.25) saturate(1.15) !important;
}

/* Focus state — keyboard nav gets the same ring as hover
   (without the lift), so the affordance is visible without a
   tab-only second design. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item:focus-visible,
.cs-open-view .cig-item:focus-visible,
section[data-route="cases"][data-cs-view="open"] .cig-item:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--it-color, #7dd3fc) 60%, transparent),
    0 0 18px color-mix(in srgb, var(--it-color, #7dd3fc) 25%, transparent) !important;
}

/* Active state — slight depress on press for tactile feedback. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item:active,
.cs-open-view .cig-item:active,
section[data-route="cases"][data-cs-view="open"] .cig-item:active{
  transform: translateY(-1px) scale(1.005) !important;
  transition-duration: 80ms !important;
}

/* Respect reduced-motion — drop all hover transforms + transitions. */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item,
  .cs-open-view .cig-item,
  section[data-route="cases"][data-cs-view="open"] .cig-item,
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item:hover,
  .cs-open-view .cig-item:hover,
  section[data-route="cases"][data-cs-view="open"] .cig-item:hover,
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item:hover .cig-img,
  .cs-open-view .cig-item:hover .cig-img,
  section[data-route="cases"][data-cs-view="open"] .cig-item:hover .cig-img{
    transform: none !important;
    transition: background-color 120ms ease !important;
  }
}

/* Name — 14px bold white, wraps to 2 lines max. Single-line
   ellipsis truncation looked awful with names like "Christmas
   Baseba..." — wrapping reads as polished and shows more of the
   item name. Line-clamp to 2 keeps tiles uniform height. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-name,
.cs-open-view .cig-name,
section[data-route="cases"][data-cs-view="open"] .cig-name{
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  /* Tightened to a single ellipsized line. The prior 2-line clamp
     reserved 2.5em min-height (~35px) for every card whether the
     name needed it or not, blowing past the aspect-ratio target
     and making the card visibly taller than wider. */
  margin-top: 4px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  min-height: 0 !important;
}

/* (3) Force-kill any rarity ::before on reel items (1x AND multi).
       The earlier kill rules existed but a phase-2 rule was
       redirecting ::before back to a bottom strip — re-broadening
       the kill so nothing paints. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item:not(.cs-winner)::before,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item:not(.cs-winner)::before,
.cs-open-view #cs-stage .case-item:not(.cs-winner)::before,
.cs-open-view .cases-multi-stack .case-item:not(.cs-winner)::before,
section[data-route="cases"][data-cs-view="open"] #cs-stage .case-item:not(.cs-winner)::before,
section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .case-item:not(.cs-winner)::before{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  height: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
}

/* (4) Stronger rarity hairline at the bottom of pool tiles —
       the reference has a more saturated 2px bar that reads as
       the tier marker. Bump shadow + opacity. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item::before,
.cs-open-view .cig-item::before,
section[data-route="cases"][data-cs-view="open"] .cig-item::before{
  left: 10px !important;
  right: 10px !important;
  bottom: 0 !important;
  height: 2px !important;
  inset: auto 10px 0 10px !important;
  background: var(--it-color, rgba(125,211,252,1)) !important;
  box-shadow: 0 0 14px var(--it-color, rgba(125,211,252,.65)) !important;
  opacity: 1 !important;
}

/* (5) Kill the heavy per-rarity drop-shadow halo on pool-tile
       artwork. The earlier rule at line 24372-24376 painted big
       colored auras behind each .cig-img (purple behind epic eggs,
       gold behind legendary, red behind mythic) — that's the
       "glow is too much" the user flagged. Replace with a single
       neutral dark drop-shadow so items float subtly without a
       rarity-tinted aura. The bottom hairline strip from rule (4)
       above still carries the rarity color. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item .cig-img,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item.rarity-common .cig-img,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item.rarity-uncommon .cig-img,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item.rarity-rare .cig-img,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item.rarity-epic .cig-img,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item.rarity-legendary .cig-img,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item.rarity-mythic .cig-img,
.cs-open-view .cig-item .cig-img,
.cs-open-view .cig-item.rarity-common .cig-img,
.cs-open-view .cig-item.rarity-uncommon .cig-img,
.cs-open-view .cig-item.rarity-rare .cig-img,
.cs-open-view .cig-item.rarity-epic .cig-img,
.cs-open-view .cig-item.rarity-legendary .cig-img,
.cs-open-view .cig-item.rarity-mythic .cig-img{
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,.55))
    drop-shadow(0 0 12px rgba(255,255,255,.08)) !important;
}

/* (6) Pool tile artwork wrap — transparent bg, no decorative pseudos.
       (Earlier polish pass added a blurred 96px rarity-colored circle
       behind the artwork as a "halo", but the blur extended past the
       tile clip and rendered as visible floating blobs above each
       tile. The unbloxed reference's equivalent circle is SOLID + sits
       behind opaque artwork, so it isn't actually a visible halo on
       their site either — it was a misread. Drop the whole effect.
       Rarity color stays expressed via the bottom hairline strip.) */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item .cig-icon-wrap,
.cs-open-view .cig-item .cig-icon-wrap,
section[data-route="cases"][data-cs-view="open"] .cig-item .cig-icon-wrap{
  background: transparent !important;
  position: relative !important;
}
/* Rarity halo removed — match the live-opens flat-backdrop look.
   The per-rarity image drop-shadow + bottom hairline strip still
   carry the tier cue without the colored glow behind the artwork. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item .cig-icon-wrap::before,
.cs-open-view .cig-item .cig-icon-wrap::before,
section[data-route="cases"][data-cs-view="open"] .cig-item .cig-icon-wrap::before{
  content: none !important;
  display: none !important;
  background: none !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cig-item .cig-icon-wrap::after,
.cs-open-view .cig-item .cig-icon-wrap::after,
section[data-route="cases"][data-cs-view="open"] .cig-item .cig-icon-wrap::after{
  content: none !important;
  display: none !important;
}

/* ============================================================
   CASE BATTLES — REVAMP 2026-05-25
   Reference: packdraw.com battles result page (jackpot pill,
   VS sigils, big blue Recreate CTA flanked by undo/share, per-
   slot roster strip, pool composition grid). The waiting room
   gets a roster-style pre-arena instead of empty reels; the
   in-progress reels get a tighter frame; the resolved screen
   gets the full reference treatment.
   ============================================================ */

/* ---- WAITING STATE ----
   No more separate "lobby" screen: creating/joining a battle drops
   straight into the arena. The reel columns show immediately (static —
   nothing spins until every seat is filled and the countdown runs),
   and each player's seat renders as a box below its reel. Empty seats
   read as open boxes with a per-slot "Call Bot" pill. Only the loot
   grids stay hidden pre-battle (no pulls yet — empty cells would just
   be clutter). */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-watch-loot,
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-grid,
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-results{
  display: none !important;
}
/* Reels are visible but idle — soften them a touch so an un-spun frame
   reads as "ready / waiting" rather than a broken live reel. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-reel-frame{
  opacity: .9;
}
/* Stage keeps the same band layout + horizontal-scroll behaviour as the
   live battle (base + mobile rules own overflow), so the arena looks
   identical the moment a seat fills and the countdown starts — no
   relayout. Just a touch of top/bottom breathing room. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-watch-stage{
  margin: 18px 0 22px !important;
}
/* NOTE: the roster band gets NO waiting-specific grid override anymore.
   It inherits the shared band template (repeat(--cs-watch-cols) + gap +
   mobile scroll width) from the base/mobile rules — identical to the
   reels band — so each seat box stays column-aligned directly beneath
   its reel on every viewport. (The old auto-fit lobby grid lived here.) */
/* Seat box during waiting — a single rounded card BELOW its reel,
   holding the avatar, name, and (on the first empty seat) the
   "Call Bot" CTA. The reel above stays idle until the battle starts. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-col{
  background: var(--pd-bg-1) !important;
  border: 1px solid var(--pd-line) !important;
  border-radius: 14px !important;
  padding: 18px 16px 16px !important;
  position: relative;
  overflow: hidden !important;
  min-height: 168px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transition: border-color .2s ease, background .2s ease;
}
/* Subtle hover lift on filled seat boxes — signals "this is the
   player who joined" without competing with the reels above. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-col:not(.cs-wp-empty):hover{
  border-color: rgba(87,171,248,.32) !important;
}
/* Empty-slot variant — dashed border + dim background to read as
   "still open, waiting for someone." */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-col.cs-wp-empty{
  background: rgba(255,255,255,.015) !important;
  border-style: dashed !important;
  border-color: rgba(255,255,255,.10) !important;
}
/* Faint accent rail down the left edge — color-coded per team
   (2v2) or per slot (FFA). Replaces the dim payline that used
   to show through during waiting. Kept thin (3px) so it reads
   as a side-tag not a side-stripe-border (banned). The 3px
   inset accent is structural — it tells you whose slot this is
   at-a-glance, same role as the colored slot tag in the
   reference. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-col::before{
  content: '';
  position: absolute;
  left: 0; top: 14%; bottom: 14%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: rgba(255,255,255,.10);
  transition: background .25s ease;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-col.cs-wp-team-0::before{
  background: linear-gradient(180deg, #57abf8, #3b82f6);
  box-shadow: 0 0 12px rgba(87,171,248,.45);
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-col.cs-wp-team-1::before{
  background: linear-gradient(180deg, #f87171, #ef4444);
  box-shadow: 0 0 12px rgba(239,68,68,.45);
}
/* During waiting, push the head into a vertical centered layout
   so name + buy-in stack neatly under the avatar. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-col .cs-wp-head{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  text-align: center;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-col .cs-wp-avatar{
  width: 70px !important; height: 70px !important;
  font-size: 27px !important;
  position: relative !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-col.cs-wp-empty .cs-wp-avatar{
  border: 1.5px dashed rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.02) !important;
}
/* packdraw-style loading spinner inside an open seat — a thin ring with
   one bright arc rotating, signalling "waiting for a player to take this
   seat." Sits over the dashed empty bubble. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-wait-spin{
  position: absolute; inset: 9px;
  border-radius: 50%;
  border: 3px solid rgba(87,171,248,.16);
  border-top-color: var(--pd-blue-accent, #57abf8);
  border-right-color: rgba(87,171,248,.55);
  animation: cs-wp-wait-spin .85s linear infinite;
}
@keyframes cs-wp-wait-spin{ to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-wait-spin{
    animation: none;
    border-top-color: rgba(87,171,248,.45);
    border-right-color: rgba(87,171,248,.30);
  }
}
/* During waiting, the "$0.00 hitcoin" total is meaningless —
   collapse it. The roster-style tile keeps it visually clean. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-col .cs-wp-total{
  display: none !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-col .cs-wp-name{
  font-size: 15px !important;
  text-align: center;
}
/* Call Bot pill — bigger, more prominent during waiting since
   it's the only action available on empty slots. The base style
   pushes the pill right with margin-left:auto (for the playing
   layout's row-style head); reset it here since the waiting head
   is column-stacked + centered. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-call-bot{
  margin-top: 6px;
  margin-left: 0 !important;
  padding: 6px 14px !important;
  font-size: 14px !important;
  background: linear-gradient(180deg, #57abf8, #3b82f6) !important;
  border: 1px solid rgba(59,130,246,.55) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(59,130,246,.30),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .15s ease, box-shadow .2s ease;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="waiting"] .cs-wp-call-bot:hover{
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(59,130,246,.40),
    inset 0 1px 0 rgba(255,255,255,.28);
}
/* (The old full-width "Waiting for players" banner + its pulse-dot were
   removed 2026-05-30 — the arena now IS the waiting UI, with the live
   status in the top bar and Cancel relocated beside Fairness/Share.) */

/* ---- IN-PROGRESS POLISH (playing state) ----
   The reel frame already exists; just tighten the chrome a touch
   so the column reads as a slot machine in motion. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-battle-state="playing"] .cs-wp-reel-frame{
  /* Spin = a quiet neutral border lift + depth. No blue ring glow. */
  border-color: rgba(255,255,255,.11) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 40px rgba(0,0,0,.42),
    0 8px 26px rgba(0,0,0,.34) !important;
}
/* (The old payline glow-pulse was removed along with the blue glow lines.
   The static carets + neutral focus window already mark the landing row,
   and the rushing strip conveys "active" on its own — no decorative
   pulse, nothing to special-case for reduced-motion here.) */

/* ---- RESOLVED STATE — packdraw-style results page ---- */

/* Container relaxes to give the new vertical rhythm room.
   Existing rule already strips bg/border; we add bottom padding
   so the new pool grid breathes. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-result{
  padding: 12px 0 28px !important;
}

/* Jackpot pill — flat dark info chip with amber number. Matches
   the site's matte navy aesthetic instead of the trophy-stand
   gradient + halo treatment that read as AI/SaaS. No gradient
   background, no glow ring, no shadow stack. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-jackpot{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 18px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--pd-bg-1);
  border: 1px solid var(--pd-line);
  font-family: 'Urbanist', sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--pd-text);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-jackpot[hidden]{
  display: none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-jackpot-label{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pd-text-mute);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-jackpot-amount{
  font-size: 16px;
  font-weight: 800;
  color: var(--pd-yellow, #e4ae33);
  font-variant-numeric: tabular-nums;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-jackpot-glyph{
  width: 14px !important;
  height: 14px !important;
}

/* Action row: undo | recreate | share. Recreate is the hero
   blue CTA, undo + share are dim square ghost buttons. The wrap
   is flex (centered) so the inline-flex inside lays out cleanly. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-action-row{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  margin: 4px 0 14px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--pd-bg-1);
  border: 1px solid var(--pd-line);
  color: rgba(255,255,255,.72);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-icon-btn:hover{
  background: var(--pd-bg-2);
  border-color: var(--pd-line-hover);
  color: #fff;
  transform: translateY(-1px);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-icon-btn:active{
  transform: translateY(0);
}
/* Recreate — flat blue, same pattern as .cs-cb-create (Create
   Pack Battle). Solid var(--pd-blue), no gradient, no glow,
   no transform on hover — just a darker blue. Matches the
   site's existing primary-button language exactly. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-recreate{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--pd-radius-sm);
  background: var(--pd-blue) !important;
  border: none !important;
  color: #fff !important;
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .15s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-recreate:hover{
  background: var(--pd-blue-hover) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-recreate-ico{
  opacity: .8;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-recreate-label{
  font-weight: 800;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-recreate-cost{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid rgba(255,255,255,.22);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-recreate-cost .bc-glyph{
  width: 13px; height: 13px;
}
/* Icon buttons match height of the primary button now (38px). */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-icon-btn{
  width: 38px;
  height: 38px;
  border-radius: var(--pd-radius-sm);
}
/* Secondary button below the action row — keeps its quiet
   ghost treatment. Block-level so it sits on its own line
   centered, instead of stacking next to the action row buttons. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-new{
  display: block;
  width: max-content;
  height: 32px;
  padding: 0 14px;
  margin: 0 auto 22px;
  border-radius: 8px;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(255,255,255,.55) !important;
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .02em !important;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-new:hover{
  color: #fff !important;
  background: rgba(255,255,255,.04) !important;
}
/* Hide the old .cs-wr-actions wrapper if anything still emits it. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-actions{ display: none !important; }

/* ---- Pool composition grid ---- */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool{
  text-align: left;
  margin: 4px auto 0;
  max-width: 100%;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-head{
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin: 8px 0 12px;
  padding: 0 2px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-tile{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 10px;
  /* !important — crushes the bare .rarity-X { background: linear-gradient }
     rules at styles.css:5521-5531 that would otherwise leak a blue
     gradient through any tile that picks up a rarity class. */
  background: var(--pd-bg-1) !important;
  border: 1px solid var(--pd-line);
  border-radius: 10px;
  font-family: 'Urbanist', sans-serif;
  overflow: hidden;
  transition: transform .15s ease, border-color .2s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-tile:hover{
  transform: translateY(-1px);
  border-color: var(--pd-line-hover);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-pct{
  position: absolute;
  top: 6px; right: 8px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.55);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-img{
  /* Mirror the catalog (.cig-img) approach: scale the image to fill
     ~86% of the tile width with contain, so the item dominates and
     the asset's baked-in shop-card background (Roblox CDN sometimes
     ships items on coloured backplates) is no longer the visual
     center. Tried a radial mask first — didn't work because the
     baked bg is centred on the item, not at the corners. Letting
     the item BE the focal mass + a rarity drop-shadow halo carries
     the visual identity cleanly across the mixed asset library. */
  max-width: 86%;
  max-height: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-top: 6px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
/* Rarity drop-shadow halos on the image — same palette + magnitudes
   the catalog uses (.cig-item.rarity-X .cig-img filters around line
   24373) so the visual language matches. The halo also draws focus
   to the item silhouette so any leftover bg edges fade into noise. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-tile.rarity-uncommon  .cs-wr-pool-img{ filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(148,163,184,.30)); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-tile.rarity-rare      .cs-wr-pool-img{ filter: drop-shadow(0 8px 16px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(96,165,250,.55)); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-tile.rarity-epic      .cs-wr-pool-img{ filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(192,132,252,.65)); }
/* saturate(0) on legendary/mythic kills the vibrant holographic
   shimmer baked into Roblox CDN thumbnails for UGC limiteds —
   the colored gradient was bleeding through the cap silhouette
   and reading as a busy hover halo on the otherwise-flat tile.
   Drop-shadow halos keep their declared rgba (they're not sampled
   from source pixels), so the gold/red rarity signal survives the
   desaturate. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-tile.rarity-legendary .cs-wr-pool-img{ filter: saturate(0) drop-shadow(0 8px 20px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(251,191,36,.75)); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-tile.rarity-mythic    .cs-wr-pool-img{ filter: saturate(0) drop-shadow(0 8px 22px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(248,113,113,.85)); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-name{
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,.86);
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-value{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 900;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-value .bc-glyph{
  width: 11px; height: 11px;
}
/* Rarity tint — moved off the body of the tile (the inset glow
   read as a gradient sweep / AI cliché) onto a thin top-edge
   accent bar. Mirrors the rarity color from the site's tier
   tokens. Common stays plain. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-tile.rarity-uncommon { border-top: 2px solid var(--pd-tier-uncommon); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-tile.rarity-rare     { border-top: 2px solid var(--pd-tier-rare); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-tile.rarity-epic     { border-top: 2px solid var(--pd-tier-epic); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-tile.rarity-legendary{ border-top: 2px solid var(--pd-tier-legendary); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-tile.rarity-mythic   { border-top: 2px solid var(--pd-tier-mythic); }

/* Mobile — pool tiles get a tighter grid. */
@media (max-width: 640px){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-grid{
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 8px;
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-wr-pool-img{
    width: 52px; height: 52px;
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-wr-jackpot-amount{
    font-size: 18px;
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-wr-recreate{
    padding: 0 16px;
    font-size: 15px !important;
  }
}

/* ============================================================
   BATTLE LOBBY — alive pass (2026-05-25)
   The list rows already render cleanly, but they read static —
   no real signal that a battle is mid-unboxing, hover feels
   dead, and the status text just sits there. This block adds:
     - a subtle hover lift + brighter mode rail on hover
     - a status dot that pulses on live / about-to-resolve rows
     - a traveling scan-beam overlay on the pack strip when the
       battle is unboxing (replaces the all-at-once stagger pulse
       which was busy without being directional)
   Watch-view current-pack also gets a slow ring pulse so the
   "right now" pack reads more strongly during animation.
   ============================================================ */

/* Row hover — lift + brighter border + brighten the mode rail.
   The base rule (line 29018) only swaps bg on hover; this layers
   a 1px lift and a brighter border on top so the row feels
   responsive without bouncing. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row{
  transition:
    background-color .18s cubic-bezier(.4,0,.2,1),
    border-color .18s cubic-bezier(.4,0,.2,1),
    transform .18s cubic-bezier(.4,0,.2,1) !important;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row:hover{
  border-color: var(--pd-line-hover) !important;
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row:hover{
    transform: none;
  }
}

/* Status dot — small leading circle that signals the row's
   lifecycle at a glance. Colour + animation per state:
     waiting (open seats)   → muted blue, static
     waiting (full / about  → amber, fast pulse (resolution
       to resolve)            imminent)
     resolving / unboxing   → green, breathing pulse
     resolved (done)        → muted, no dot
   The dot lives on .cs-br-status::before so JS doesn't need
   to inject any new markup — class hooks on the row drive it. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-status::before{
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pd-text-mute);
  margin-right: 6px;
  flex-shrink: 0;
  transition: background .2s ease;
}
/* Live (resolving) — the row's case well is marked live (slots full +
   waiting/resolving). A tier-green status dot with a soft scale pulse. No
   glow box-shadow — the pulse alone conveys "this one's going." */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row:has(.cs-br-cases-live) .cs-br-status::before{
  background: #53e296;
  animation: cs-br-status-pulse 1.4s ease-in-out infinite;
}
/* Resolved status — done battles get a faint check rather than
   a dot. .cs-br-status-done is set on the lobby's "unboxed: $X"
   row state. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-br-status.cs-br-status-done::before{
  background: transparent;
  width: 0;
  margin-right: 0;
}
@keyframes cs-br-status-pulse{
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .55; transform: scale(.72); }
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row:has(.cs-br-cases-live) .cs-br-status::before{
    animation: none;
  }
}

/* (The old left-to-right green scan beam over the strip and the per-pack glow
   pulse were both removed — they were glow effects. The live read now comes
   from the casing-lift march on the cards, the status dot, and the CTA tint.) */

/* View Battle button on live rows — green accent matches the status dot so
   the "alive" rows surface their CTA more strongly. */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row:has(.cs-br-cases-live) .cs-br-join:not(.cs-br-view){
  background: #53e296 !important;
  border-color: rgba(83,226,150,.65) !important;
  color: #06301a !important;
}
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list) .cs-battle-row:has(.cs-br-cases-live) .cs-br-join:not(.cs-br-view):hover{
  background: #5cefa0 !important;
}

/* ============================================================
   HOME "Battle Highlights" — packdraw-faithful skin OVER the shared
   battle-row base. The lobby keeps its squared-tag layout; the home rail
   gets packdraw's centred plain "X MODE" label, a centred meta column, and
   the thin mode-tinted left accent. Scoped to #pd-battles-list so none of
   it touches the Case Battles lobby (#id + .class wins on specificity, and
   it sits after the shared rules besides).
   ============================================================ */
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-left{
  align-items:center !important;
  text-align:center;
}
/* Centred plain "X MODE" label — it's the row's heading, so keep it a
   readable size (the shrunk version read as tiny). */
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .pdh-mode{
  font-family:'Urbanist',sans-serif;
  font-size:16px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--pd-text-mute);
  white-space:nowrap;
}
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .pdh-mode[data-tier="jackpot"] { color:#53e296; }
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .pdh-mode[data-tier="crazy"]   { color:#c2a3ff; }
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .pdh-mode[data-tier="shared"]  { color:#ffb13a; }
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .pdh-mode[data-tier="terminal"]{ color:#ec5a6e; }
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .pdh-mode[data-tier="team"]    { color:#8cc6ff; }
/* Layout: a narrowish CENTRED meta column, the casing HUGS its cards (so the
   strip has no empty trailing space — packdraw sizes the panel to the packs),
   and the CTA sits at the right. The meta column being snug + the bigger
   avatars below stop it reading "empty". */
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-battle-row{
  position:relative;
  grid-template-columns:minmax(176px, 232px) auto minmax(150px, 1fr) !important;
  padding:15px 16px !important;
  gap:16px;
}
/* Avatars + cost back UP from the shrunk pass — the meta column was reading
   tiny. Tight gaps + small separators so up to 4 seats stay on one line. */
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-avatar{
  width:40px; height:40px !important; font-size:16px;
}
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-players{ gap:3px; }
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-vs{ width:13px; margin:0; }
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-vs svg{ width:12px; height:12px; }
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-pot{ font-size:14.5px !important; }
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-pot::before{ font-size:13px; }
/* packdraw's thin mode-tinted accent down the left edge of each row (the
   row's overflow:hidden + radius clip it to the rounded corner) */
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-battle-row::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--cs-tier, var(--pd-blue-accent));
  opacity:.85;
}
/* Cards a touch smaller than the full lobby (94px) but not tiny — sized so
   the hugged casing reads as a tidy, FULL strip rather than sparse. */
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-cases-well{ padding:11px 12px 12px; }
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-cases-track{ gap:8px; }
html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-cases-track > .cs-br-case{ width:78px; height:108px; }

/* Mobile: the home-rail grid above (`minmax(176px,232px) auto minmax(150px,1fr)`,
   NO media query) has higher specificity than the shared ≤760px collapse, so on
   phones the home Battle Highlights stayed a 3-column grid — left+cost on the
   left, the case strip crushed to ~0 in the middle, and "unboxed: …" + View
   Battle overlapping + clipping off the right edge (the reported bug). Re-collapse
   to a single stacked column at the SAME specificity here so left → cases →
   actions stack as full-width rows, and shrink the cards to share the now
   full-width well instead of the fixed 78px (which overflowed). */
@media (max-width: 760px){
  html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-battle-row{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-left,
  html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-cases,
  html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-actions{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Status + button as one full-width row at the bottom. */
  html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-actions{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  /* Cards shrink to share the full-width well (the fixed 78px overflowed). */
  html[data-theme="phase2"] #pd-battles-list.pd-battles-list .cs-br-cases-track > .cs-br-case{
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 72px !important;
    height: 96px !important;
  }
}

/* ============================================================
   WATCH VIEW — current-pack indicator (already exists at line
   ~29697 as .is-current with yellow halo + scale 1.12). Add a
   slow concentric ring pulse so the user's eye is drawn to the
   pack that's mid-spin instead of needing to read the round
   line text below.
   ============================================================ */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases .cs-wh-pack.is-current{
  position: relative;
  z-index: 1;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases .cs-wh-pack.is-current::after{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  border: 1.5px solid rgba(251,191,36,.55);
  pointer-events: none;
  animation: cs-wh-pack-ring 1.8s ease-in-out infinite;
}
@keyframes cs-wh-pack-ring{
  0%, 100% { opacity: .85; transform: scale(1);    }
  50%      { opacity: .25; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-watch-cases .cs-wh-pack.is-current::after{
    animation: none;
  }
}

/* Borrowed-X% chip on the finale card. Slots into the cost-line between
   "X paid in" and "Net +Y" so the player can see at a glance that their
   stake was reduced by a borrow. Uses the brand blue at low opacity so
   it reads as a neutral fact, not a warning. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-winner-borrow{
  display:inline-flex;
  align-items:center;
  height:18px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(59,130,246,.14);
  color:#60A5FA;
  font-family:'Urbanist','Inter',sans-serif;
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Win-share callout inside the borrow panel — surfaces the "you keep
   X% of any wins" number more prominently so the user understands the
   borrow tradeoff before clicking CREATE. */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-borrow-foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-top:10px !important;
  padding-top:10px !important;
  border-top:1px solid rgba(255,255,255,.05);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-borrow-foot strong{
  font-family:'Sora','Inter',sans-serif !important;
  font-weight:800 !important;
  font-size:18px !important;
  color:#22c55e !important;
  font-variant-numeric:tabular-nums !important;
  letter-spacing:0 !important;
}

/* Shared Mode: drop the "v" separators between player dots. It's not
   a versus mode — every participant gets a slice of the pool — so
   showing "1 v 1" reads wrong. Hide on every mode pill, including the
   2v2 team pill where the v still divides the two pairs.
   The JS sets data-cb-shared="on" on .cs-cb-modes-row when the Shared
   toggle is checked; the rule below removes the .cs-cb-vs glyph and
   tightens the gap so the dots don't drift apart. */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-modes-row[data-cb-shared="on"] .cs-cb-vs{
  display:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-modes-row[data-cb-shared="on"] .cs-cb-dots{
  gap:5px !important;
}

/* Modal backdrop: lighter blur + slightly thinner scrim so the page
   reads clearly through the modal. The legacy stack stacks three rules
   (lines 5739 / 10213 / 12931) and a phase2-prefixed override at line
   ~25560 that uses `html[data-theme="phase2"] .modal-backdrop`
   (specificity 0,2,1). Plain `.modal-backdrop !important` loses to
   that. Match the prefix here so this is the LAST rule the cascade
   sees at that specificity. */
html[data-theme="phase2"] .modal-backdrop,
html .modal-backdrop{
  background: rgba(6, 9, 20, .55) !important;
  backdrop-filter: blur(4px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(4px) saturate(130%) !important;
}
/* Keep the fallback (no backdrop-filter support) slightly darker since
   it loses the blur entirely — the scrim has to carry all the focus
   shift on those browsers. */
@supports not (backdrop-filter: blur(1px)){
  html[data-theme="phase2"] .modal-backdrop,
  html .modal-backdrop{ background: rgba(6, 9, 20, .82) !important; }
}

/* ============================================================
   VISUAL REWORK — PASS 1 (2026-05-26)
   Tokens + navbar + buttons + base card primitive.

   Strategy: appended at end of file so the cascade lets these
   rules win against anything earlier. Revert via `git revert
   HEAD` if the look isn't right. Pass 2 (game surfaces) and
   Pass 3 (modals/sidebar/inputs) follow as separate commits.

   Spec source: user prompt 2026-05-26 — premium dark, cleaner
   navbar, subtle blue accent, less arcade glow.
============================================================ */

/* ----- TOKENS — override the existing Phase 2 palette ----- */
:root{
  /* Surfaces — cooler/slightly darker than the Phase 2 baseline. */
  --pd-bg-0:#181D20;
  --pd-bg-1:#1C2226;
  --pd-bg-2:#22292E;
  --pd-surface:#252D33;
  --pd-surface-2:#2A3138;
  --pd-glass:rgba(34,41,46,.55);
  /* Translucent chrome surfaces so the page background image (the misty
     -forest body::before) tints through the topbar / chat / rail. Each is
     paired with a backdrop-blur on the element so text stays readable. */
  --pd-glass-bar:rgba(21,26,30,.62);    /* topbar */
  --pd-glass-panel:rgba(22,28,32,.50);  /* chat column */
  --pd-glass-card:rgba(26,33,42,.30);   /* rail items — low alpha so the bg image clearly shows through the cards */

  /* Hairlines — neutral white at low alpha (was off-white .05/.12). */
  --pd-line:rgba(255,255,255,.06);
  --pd-line-hover:rgba(255,255,255,.10);

  /* Text */
  --pd-text:#F4F7FA;
  --pd-text-secondary:#9AA5AD;
  --pd-text-mute:#6F7A82;

  /* Blue — slightly cooler, more "premium light blue" than #4299e1. */
  --pd-blue:#3BA7FF;
  --pd-blue-hover:#2992ED;
  --pd-blue-accent:#5CB4FF;
  --pd-blue-glow:rgba(59,167,255,.25);

  /* Shape — buttons up to 10px so they read less arcade-y. */
  --pd-radius-sm:8px;
  --pd-radius-md:10px;
  --pd-radius-lg:12px;
  --pd-radius-xl:16px;

  /* Depth — softer, longer shadows than the original card shadow. */
  --pd-shadow-soft:0 8px 24px rgba(0,0,0,.18);
  --pd-shadow-soft-hover:0 12px 35px rgba(0,0,0,.28);
}

/* ----- BODY — flat matte bg, no animated rims. ----- */
html[data-theme="phase2"] body{
  background:var(--pd-bg-0) !important;
}

/* ----- TOPBAR — kill the animated rim + heavy gradient, replace
   with a clean flat dark bar with a single hairline underline.
   Sticky/sizing behaviour from the base rule stays intact. */
html[data-theme="phase2"] .topbar{
  background:var(--pd-bg-0) !important;
  border-bottom:1px solid var(--pd-line) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  min-height:64px;
  padding:12px 28px;
}
html[data-theme="phase2"] .topbar::after{
  /* Kill the animated topbarRim — reads as "arcade" per the brief. */
  content:none !important;
  display:none !important;
  animation:none !important;
}

/* ----- BALANCE PILL — dark with a SUBTLE blue border + glow.
   Was layered linear-gradients + pink glow + heavy blue shadow.
   Now: matte bg, thin blue outline, gentle soft-glow on hover. */
html[data-theme="phase2"] .balance{
  background:var(--pd-bg-2) !important;
  border:1px solid rgba(59,167,255,.28) !important;
  box-shadow:none !important;
  color:var(--pd-text) !important;
  padding:8px 16px;
  border-radius:var(--pd-radius-sm);
}
html[data-theme="phase2"] .balance:hover{
  border-color:rgba(59,167,255,.55) !important;
  box-shadow:0 0 0 1px var(--pd-blue-glow), 0 4px 14px var(--pd-blue-glow) !important;
  filter:none !important;
}

/* ----- ONLINE PILL — same neutral treatment, green accent kept
   subtle (no pulsing dot glow blowout). */
html[data-theme="phase2"] .online-pill{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  box-shadow:none !important;
  color:var(--pd-text-secondary);
  padding:6px 14px;
  border-radius:var(--pd-radius-sm);
}

/* ----- CARDS — premium baseline.
   Adds a soft drop shadow + blue hover border per spec.
   .pd-card was bg+border+radius only; this layers the depth on. */
html[data-theme="phase2"] .pd-card{
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-lg);
  box-shadow:var(--pd-shadow-soft);
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}
html[data-theme="phase2"] .pd-card:hover{
  border-color:rgba(59,167,255,.35);
  box-shadow:var(--pd-shadow-soft-hover);
}

/* ----- BUTTONS — slightly larger radius (8px vs 6px) for a more
   premium feel. Primary (.pd-btn-primary) gets the new blue. */
html[data-theme="phase2"] .pd-btn{
  border-radius:var(--pd-radius-sm);
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .2s ease,
    transform .12s ease;
}
html[data-theme="phase2"] .pd-btn-primary{
  background:var(--pd-blue) !important;
  color:#fff !important;
  box-shadow:0 4px 14px rgba(59,167,255,.20);
}
html[data-theme="phase2"] .pd-btn-primary:hover{
  background:var(--pd-blue-hover) !important;
  box-shadow:0 6px 18px rgba(59,167,255,.30);
}
html[data-theme="phase2"] .pd-btn-primary:active{
  transform:translateY(1px);
  box-shadow:0 2px 8px rgba(59,167,255,.18);
}

/* ----- DEPOSIT button family — the standalone `.deposit-btn`,
   `.cs-deposit`, and any blue CTA falls under .btn-blue / .btn-primary
   in the legacy chrome. Apply the same blue + radius so the CTA
   feels cohesive across the navbar and modals. */
html[data-theme="phase2"] .deposit-btn,
html[data-theme="phase2"] .btn.btn-primary,
html[data-theme="phase2"] .btn-blue,
html[data-theme="phase2"] .cs-cb-create{
  background:var(--pd-blue) !important;
  border:1px solid transparent !important;
  border-radius:var(--pd-radius-sm) !important;
  color:#fff !important;
  box-shadow:0 4px 14px rgba(59,167,255,.20) !important;
  transition:background .18s ease, box-shadow .2s ease !important;
}
html[data-theme="phase2"] .deposit-btn:hover,
html[data-theme="phase2"] .btn.btn-primary:hover,
html[data-theme="phase2"] .btn-blue:hover,
html[data-theme="phase2"] .cs-cb-create:hover{
  background:var(--pd-blue-hover) !important;
  box-shadow:0 6px 18px rgba(59,167,255,.30) !important;
}

/* ----- NAV LINKS — muted gray default, white on hover.
   The .sb-link family is the sidebar nav; the new pd-topbar lives
   under .pd-nav. Catch both so behaviour is consistent. */
html[data-theme="phase2"] .sb-link,
html[data-theme="phase2"] .pd-nav a,
html[data-theme="phase2"] .pd-nav button{
  color:var(--pd-text-secondary) !important;
  transition:color .15s ease, background .15s ease;
}
html[data-theme="phase2"] .sb-link:hover,
html[data-theme="phase2"] .pd-nav a:hover,
html[data-theme="phase2"] .pd-nav button:hover{
  color:var(--pd-text) !important;
}
html[data-theme="phase2"] .sb-link.active,
html[data-theme="phase2"] .pd-nav a.active,
html[data-theme="phase2"] .pd-nav button.active{
  color:var(--pd-text) !important;
}

/* END VISUAL REWORK PASS 1 */

/* ============================================================
   VISUAL REWORK — PASS 2 (2026-05-26)
   Game surfaces — pack/case cards, item pool tiles, reel items,
   battle rows, originals/games cards.

   Same revert pattern as Pass 1 — `git revert HEAD` removes the
   whole pass cleanly.
============================================================ */

/* ----- PACK / CASE CARDS — the catalog tiles. Was an 18px radius
   card with a hard layered black gradient + heavy bouncy hover.
   Now matches the global card primitive: dark matte bg, 12px
   radius, soft shadow, blue hover border + gentle lift. */
html[data-theme="phase2"] .case-card{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  box-shadow:var(--pd-shadow-soft) !important;
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    border-color .2s ease,
    box-shadow .2s ease !important;
}
html[data-theme="phase2"] .case-card:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(59,167,255,.35) !important;
  box-shadow:var(--pd-shadow-soft-hover) !important;
  filter:none !important;
}
/* Selected state — keep a meaningful highlight but blue, not gold. */
html[data-theme="phase2"] .case-card.selected{
  border-color:var(--pd-blue) !important;
  box-shadow:
    0 0 0 1px var(--pd-blue),
    var(--pd-shadow-soft-hover),
    0 0 24px var(--pd-blue-glow) !important;
}
/* Image inside the pack card — soft dark overlay/vignette so the
   loud Roblox CDN baked-in backplates fade into the card depth
   instead of competing with it. */
html[data-theme="phase2"] .case-card .cc-art::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(24,29,32,.45) 100%);
  pointer-events:none;
  border-radius:inherit;
}

/* ----- ITEM POOL TILES (case open view — .cig-item).
   Match the right-rail Live Opens card style exactly — flat
   neutral dark-gray panel, no border, no float shadow. The
   per-rarity bottom hairline (::after) and the image drop-shadow
   still telegraph rarity without the panel chrome shouting. */
html[data-theme="phase2"] .cig-item{
  background:#1c1f29 !important;
  border:0 !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .cig-item:hover{
  background:#232734 !important;
  box-shadow:none !important;
  transform:translateY(-1px);
}
/* Rarity hairline at the BOTTOM of each tile — communicates tier
   without the neon halo. Matches the cs-wr-pool-tile pattern. */
html[data-theme="phase2"] .cig-item::before{
  /* Drop any existing decorative ::before so our hairline wins. */
  background:transparent !important;
  animation:none !important;
}

/* ----- REEL ITEMS during spin (.case-item) — these scroll fast
   so the card chrome shouldn't fight the motion. Subtle borders
   only; the winner-glow handler already adds rarity glow at the
   moment of land. */
html[data-theme="phase2"] .case-item{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-md) !important;
}

/* ----- BATTLE LOBBY ROWS (.cs-battle-row).
   Was a row with subtle bg + animated mode-rail accent. Keep the
   accent but on the global palette. */
html[data-theme="phase2"] .cs-battle-row{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  box-shadow:var(--pd-shadow-soft) !important;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease !important;
}
html[data-theme="phase2"] .cs-battle-row:hover{
  background:var(--pd-surface) !important;
  border-color:rgba(59,167,255,.30) !important;
  box-shadow:var(--pd-shadow-soft-hover) !important;
  transform:translateY(-1px) !important;
}

/* ----- ORIGINALS / GAME CARDS (.game-card) — the home grid.
   The base styles use FULL-saturation single-color gradients per
   game (orange crash, green BJ, etc.) which read as "arcade." The
   user wants the per-game identity kept but DETUNED. Approach:
   dim the card with a dark overlay, soften the radius to match
   the rest of the design system, replace the bouncy hover with
   the global "lift + blue border" pattern. */
html[data-theme="phase2"] .game-card{
  border-radius:var(--pd-radius-lg) !important;
  box-shadow:var(--pd-shadow-soft) !important;
  border:1px solid var(--pd-line) !important;
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    border-color .2s ease,
    box-shadow .2s ease !important;
  isolation:isolate;
}
html[data-theme="phase2"] .game-card::before{
  /* Dark vignette layer on TOP of the per-game gradient. Sits at
     z-index:0 (above the bg layer, below the content). Drops the
     overall card luminance ~40% so the per-game color stays as an
     identity hint without screaming. */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    rgba(24,29,32,.20) 0%,
    rgba(24,29,32,.55) 100%);
  pointer-events:none;
  border-radius:inherit;
  z-index:0;
}
/* Push the card's CONTENT above the vignette. The game-card spec
   already has `isolation: isolate` so the stacking context is
   self-contained. */
html[data-theme="phase2"] .game-card > *{
  position:relative;
  z-index:1;
}
html[data-theme="phase2"] .game-card:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(59,167,255,.35) !important;
  box-shadow:var(--pd-shadow-soft-hover) !important;
  filter:none !important;
}

/* ----- POT/PRIZE PILLS on the battle finale + watch chrome
   (.cs-cb-pot / .cs-watch-pot). Now uses card bg + new blue. */
html[data-theme="phase2"] .cs-cb-pot,
html[data-theme="phase2"] .cs-watch-pot{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  color:var(--pd-text) !important;
}

/* END VISUAL REWORK PASS 2 */

/* ============================================================
   VISUAL REWORK — PASS 3 (2026-05-26)
   Chrome surfaces — modals, dropdowns, tabs, inputs, sidebar.

   Same revert pattern as Passes 1 & 2 — appended block,
   `git revert HEAD` undoes everything cleanly.
============================================================ */

/* ----- MODAL BACKDROP — strong opaque scrim + heavy blur so
   saturated colors behind (right-rail avatars, Discord pills,
   pack JPEGs) don't bleed through and pull focus from the modal.
   Was .62 alpha + 8px blur which left avatars clearly visible. */
html[data-theme="phase2"] .modal-backdrop{
  background:rgba(8,11,14,.82) !important;
  backdrop-filter:blur(20px) saturate(110%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(110%) !important;
}

/* ----- MODAL PANEL — was #0F172A (cool navy) + heavy layered
   shadow. Switch to the global card bg + lighter shadow set so
   modals feel consistent with everything else. */
html[data-theme="phase2"] .modal{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-xl) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,.45),
    0 4px 14px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}
/* Modal close button — match the new button radius + neutral
   surface. */
html[data-theme="phase2"] .modal-close{
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text-secondary) !important;
}
html[data-theme="phase2"] .modal-close:hover{
  background:var(--pd-surface) !important;
  border-color:var(--pd-line-hover) !important;
  color:var(--pd-text) !important;
}

/* ----- USER POPUP / DROPDOWN CARDS — the small floating cards
   that hang off the avatar, balance, and currency pickers. Move
   to the elevated surface so they read as "on top of" the page. */
html[data-theme="phase2"] .user-popup-card,
html[data-theme="phase2"] .dropdown-menu,
html[data-theme="phase2"] .popup-card,
html[data-theme="phase2"] .cs-bsort-menu{
  background:var(--pd-surface) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  box-shadow:var(--pd-shadow-soft-hover) !important;
}

/* ----- INPUTS — dark bg, subtle border, blue focus state.
   Covers most form fields across the site. Doesn't touch the
   bet-amount-styled inputs (.bet-amount) which carry their own
   currency-glyph chrome — those keep their per-game shells but
   pick up the new border + focus colors via shared selectors. */
html[data-theme="phase2"] input[type="text"],
html[data-theme="phase2"] input[type="number"],
html[data-theme="phase2"] input[type="email"],
html[data-theme="phase2"] input[type="password"],
html[data-theme="phase2"] input[type="search"],
html[data-theme="phase2"] textarea,
html[data-theme="phase2"] select{
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-sm) !important;
  color:var(--pd-text) !important;
  transition:
    border-color .15s ease,
    box-shadow .15s ease !important;
}
html[data-theme="phase2"] input[type="text"]:focus,
html[data-theme="phase2"] input[type="number"]:focus,
html[data-theme="phase2"] input[type="email"]:focus,
html[data-theme="phase2"] input[type="password"]:focus,
html[data-theme="phase2"] input[type="search"]:focus,
html[data-theme="phase2"] textarea:focus,
html[data-theme="phase2"] select:focus{
  outline:none !important;
  border-color:var(--pd-blue) !important;
  box-shadow:0 0 0 3px var(--pd-blue-glow) !important;
}
html[data-theme="phase2"] input::placeholder,
html[data-theme="phase2"] textarea::placeholder{
  color:var(--pd-text-mute) !important;
}

/* ----- TABS — the common pattern is a button-styled element
   with an .active class. Muted gray default → white text +
   subtle blue underline (via box-shadow) when active. Catches
   the open/battles/originals/rewards subtabs across the cases
   route and any other route using the same idiom. */
html[data-theme="phase2"] .tab,
html[data-theme="phase2"] .cs-cb-tab,
html[data-theme="phase2"] .cs-tab,
html[data-theme="phase2"] [role="tab"]{
  background:transparent !important;
  border:1px solid transparent !important;
  color:var(--pd-text-secondary) !important;
  border-radius:var(--pd-radius-sm) !important;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
html[data-theme="phase2"] .tab:hover,
html[data-theme="phase2"] .cs-cb-tab:hover,
html[data-theme="phase2"] .cs-tab:hover,
html[data-theme="phase2"] [role="tab"]:hover{
  color:var(--pd-text) !important;
}
html[data-theme="phase2"] .tab.active,
html[data-theme="phase2"] .cs-cb-tab.active,
html[data-theme="phase2"] .cs-tab.active,
html[data-theme="phase2"] [role="tab"][aria-selected="true"]{
  color:var(--pd-text) !important;
  background:var(--pd-bg-2) !important;
  border-color:var(--pd-line-hover) !important;
}

/* ----- RIGHT LIVE-OPENS SIDEBAR — already uses tokens. Tighten
   the rail width (300px stays — within 280-320 spec), confirm
   left border + bg blend with the new page bg. Style each rail
   list item to match the global card primitive so the rail reads
   as a stack of premium cards instead of plain rows. */
html[data-theme="phase2"] .pd-rightrail{
  background:var(--pd-bg-0) !important;
  /* Border-left dropped — the user called it out as a visible
     "slider/divider" stroke and the new flat panel cards don't
     need a column separator. */
  border-left:0 !important;
}
html[data-theme="phase2"] .pd-rail-item{
  /* very translucent so the page background image clearly shows through
     the card; blur frosts it so the contents stay readable */
  background:var(--pd-glass-card);
  backdrop-filter:blur(12px) saturate(125%);
  -webkit-backdrop-filter:blur(12px) saturate(125%);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-md);
  margin:0 12px 8px;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}
html[data-theme="phase2"] .pd-rail-item:hover{
  border-color:rgba(59,167,255,.30);
  box-shadow:var(--pd-shadow-soft);
  transform:translateX(-2px);
}
/* Rail item names — truncate cleanly per spec. */
html[data-theme="phase2"] .pd-rail-item .pd-rail-name,
html[data-theme="phase2"] .pd-rail-item .name,
html[data-theme="phase2"] .pd-rail-item-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  /* keep legible over the now-translucent card / background image */
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
/* Rail item prices — bold + tabular numerals so they line up
   cleanly down the column. */
html[data-theme="phase2"] .pd-rail-item .pd-rail-price,
html[data-theme="phase2"] .pd-rail-item .price,
html[data-theme="phase2"] .pd-rail-item-price{
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--pd-text);
  /* keep legible over the now-translucent card / background image */
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* ----- TOP-NAV PILLS in the new pd-topnav (Packs / Battles /
   Originals / Rewards). Make the active state cleaner. */
html[data-theme="phase2"] .pd-topnav-link{
  color:var(--pd-text-secondary) !important;
  border-radius:var(--pd-radius-sm) !important;
  transition:color .15s ease, background .15s ease;
}
html[data-theme="phase2"] .pd-topnav-link:hover{
  color:var(--pd-text) !important;
  background:var(--pd-bg-2) !important;
}
/* Active nav pill. NOTE: pd-chrome.js toggles `.pd-active` (not `.active`),
   so the old `.active` selector here never matched and the accent line never
   rendered. Targets `.pd-active` now — the selected game/section gets a blue
   accent line + a soft inset glow rising from it. The glow is INSET (contained
   in the pill) on purpose: the nav lives in an overflow-hidden scroll strip,
   so an outer box-shadow would be clipped. */
html[data-theme="phase2"] .pd-topnav-link.pd-active{
  color:var(--pd-text) !important;
  background:var(--pd-sel-bg) !important;
  box-shadow:
    inset 0 -2px 0 0 var(--pd-blue),
    inset 0 -12px 16px -10px var(--pd-blue-glow) !important;
}

/* END VISUAL REWORK PASS 3 */

/* ============================================================
   VISUAL REWORK — PASS 3a POLISH (2026-05-26)
   Leaks caught during the post-pass-3 audit:
     - .rp-card (home game illustrations) — was bright/arcade
     - .pd-challenge-card (FIRST PACK / Discord promo banners)
   Both not touched by Passes 1-3 because they use different
   class roots than the .game-card / .case-card primitives.
============================================================ */

/* ----- HOME GAME TILES (.rp-card) — these wrap the bright per-
   game illustration art (PACKS, CRASH, BLACKJACK, etc.). The
   illustrations carry the per-game identity; we don't want to
   strip that, just dim them so the grid reads as polished
   instead of arcade-bright. Same blue-hover-border treatment
   as the global card primitive. */
html[data-theme="phase2"] .rp-card{
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  background:var(--pd-bg-2) !important;
  box-shadow:var(--pd-shadow-soft) !important;
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    border-color .2s ease,
    box-shadow .2s ease !important;
}
html[data-theme="phase2"] .rp-card:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(59,167,255,.35) !important;
  box-shadow:var(--pd-shadow-soft-hover) !important;
  filter:none !important;
}
/* Dim the illustration itself a bit more (was brightness .78) so
   the colour reads as a polished accent instead of fluorescent. */
html[data-theme="phase2"] .rp-card .rp-card-img{
  filter:saturate(.88) brightness(.62) !important;
  transition:filter .25s ease, transform .6s var(--ease-smooth) !important;
}
html[data-theme="phase2"] .rp-card:hover .rp-card-img{
  filter:saturate(.95) brightness(.72) !important;
}
/* Vignette overlay on top of the illustration — gives the card
   visible depth even on the brighter games (orange Slots, etc.) */
html[data-theme="phase2"] .rp-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    rgba(24,29,32,.05) 0%,
    rgba(24,29,32,.45) 100%);
  pointer-events:none;
  z-index:1;
  border-radius:inherit;
}
/* Push the label/text over the vignette so it stays legible. */
html[data-theme="phase2"] .rp-card .rp-card-overlay,
html[data-theme="phase2"] .rp-card .rp-card-name,
html[data-theme="phase2"] .rp-card .rp-card-resume{
  position:relative;
  z-index:2;
}

/* ----- HOME PROMO BANNERS (.pd-challenge-card) — the FIRST PACK
   and Discord promo cards at the top of home. Were styled
   independently; bring them into the card system. */
html[data-theme="phase2"] .pd-challenge-card{
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-lg);
  box-shadow:var(--pd-shadow-soft);
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    border-color .2s ease,
    box-shadow .2s ease;
  isolation:isolate;
}
html[data-theme="phase2"] .pd-challenge-card:hover{
  transform:translateY(-2px);
  border-color:rgba(59,167,255,.30);
  box-shadow:var(--pd-shadow-soft-hover);
}

/* ----- BATTLE HIGHLIGHTS EMPTY-STATE PANEL — the dark "No active
   battles right now" card. Make sure its bg matches the new
   palette (it already looked close in the screenshot but let's
   pin it so it can't drift). */
html[data-theme="phase2"] .bh-empty,
html[data-theme="phase2"] .battle-highlights-empty,
html[data-theme="phase2"] .pd-empty-state{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:var(--pd-radius-lg) !important;
  box-shadow:var(--pd-shadow-soft) !important;
}

/* END VISUAL REWORK PASS 3a POLISH */

/* ============================================================
   VISUAL REWORK — PASS 4 (2026-05-26)
   User feedback: prior passes too subtle. This pass bumps the
   differentiator hard — typography hierarchy, layout density,
   button polish, section rhythm.
============================================================ */

/* ----- LAYOUT WIDTH — was 1280px max + 32px padding which read
   as "narrow with dead space" on 1440+ monitors. Widen to 1440
   and tighten outer padding so content uses the viewport. */
html[data-theme="phase2"] .pd-home,
html[data-theme="phase2"] .pd-content,
html[data-theme="phase2"] .pd-main{
  max-width:1440px !important;
  padding:28px 36px 56px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ----- SECTION RHYTHM — wider gaps between top-level sections
   so the page breathes. 40-52px per spec. */
html[data-theme="phase2"] .pd-section{
  margin-bottom:48px;
}

/* ----- SECTION TITLES — was 18px / 700. Bump to a real h2 feel:
   22px desktop, 800 weight, tighter letter-spacing, stronger
   contrast, thin blue accent bar to the left so each section
   reads as a deliberate header. */
html[data-theme="phase2"] .pd-section-title{
  font-family:'Urbanist','Inter',sans-serif !important;
  font-size:22px !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  color:var(--pd-text) !important;
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px !important;
  padding-left:14px;
  position:relative;
}
html[data-theme="phase2"] .pd-section-title::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:3px; height:20px;
  background:var(--pd-blue);
  border-radius:2px;
  box-shadow:0 0 12px var(--pd-blue-glow);
}

/* ----- "View All" links — muted by default, blue on hover. */
html[data-theme="phase2"] .pd-section-link,
html[data-theme="phase2"] .view-all,
html[data-theme="phase2"] .pd-view-all{
  color:var(--pd-text-secondary) !important;
  font-weight:600 !important;
  font-size:15px !important;
  text-transform:uppercase !important;
  letter-spacing:.10em !important;
  transition:color .15s ease;
}
html[data-theme="phase2"] .pd-section-link:hover,
html[data-theme="phase2"] .view-all:hover,
html[data-theme="phase2"] .pd-view-all:hover{
  color:var(--pd-blue) !important;
}

/* ----- ITEM NAMES — single weight, predictable line-height. */
html[data-theme="phase2"] .pd-rail-name,
html[data-theme="phase2"] .pd-rail-item-name,
html[data-theme="phase2"] .pd-rail-item .name,
html[data-theme="phase2"] .cc-name,
html[data-theme="phase2"] .cig-name,
html[data-theme="phase2"] .ci-name{
  font-family:'Urbanist','Inter',sans-serif !important;
  font-weight:700 !important;
  font-size:15px !important;
  color:var(--pd-text) !important;
  line-height:1.3 !important;
  letter-spacing:-.005em;
}

/* ----- PRICES — bigger, bolder, tabular-nums everywhere.
   Hierarchically dominant on cards. */
html[data-theme="phase2"] .pd-rail-price,
html[data-theme="phase2"] .pd-rail-item-price,
html[data-theme="phase2"] .pd-rail-item .price,
html[data-theme="phase2"] .cc-price,
html[data-theme="phase2"] .cig-payout,
html[data-theme="phase2"] .ci-mult,
html[data-theme="phase2"] .cs-wr-pool-value{
  font-family:'Urbanist','Inter',sans-serif !important;
  font-weight:800 !important;
  font-size:16px !important;
  color:var(--pd-text) !important;
  font-variant-numeric:tabular-nums !important;
  letter-spacing:-.005em;
}

/* ----- META LABELS — muted, uppercase, small. */
html[data-theme="phase2"] .pd-rail-meta,
html[data-theme="phase2"] .pd-rail-item-meta,
html[data-theme="phase2"] .pd-rail-item .meta,
html[data-theme="phase2"] .cig-pct,
html[data-theme="phase2"] .cs-wr-pool-pct{
  color:var(--pd-text-mute) !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.05em !important;
  text-transform:uppercase !important;
}

/* ----- BUTTONS — primary CTA gets a stronger hover glow + lift.
   Reads as premium instead of subtle. */
html[data-theme="phase2"] .pd-btn-primary:hover,
html[data-theme="phase2"] .deposit-btn:hover,
html[data-theme="phase2"] .btn-blue:hover,
html[data-theme="phase2"] .btn.btn-primary:hover,
html[data-theme="phase2"] .cs-cb-create:hover{
  transform:translateY(-1px) !important;
  box-shadow:
    0 8px 24px rgba(59,167,255,.30),
    0 0 0 1px rgba(59,167,255,.40) !important;
}
html[data-theme="phase2"] .pd-btn-primary:active,
html[data-theme="phase2"] .deposit-btn:active,
html[data-theme="phase2"] .btn-blue:active,
html[data-theme="phase2"] .btn.btn-primary:active,
html[data-theme="phase2"] .cs-cb-create:active{
  transform:translateY(0) !important;
}

/* ----- BALANCE PILL — bigger, more deliberate. The amount is the
   most-glanced number on the page; make it carry weight. */
html[data-theme="phase2"] .balance{
  font-family:'Urbanist','Inter',sans-serif !important;
  font-size:16px !important;
  font-weight:800 !important;
  font-variant-numeric:tabular-nums !important;
  padding:10px 18px !important;
  letter-spacing:-.01em !important;
}

/* ----- ONLINE PILL — refined w/ tabular-nums. */
html[data-theme="phase2"] .online-pill{
  font-weight:700 !important;
  font-size:15px !important;
  letter-spacing:.02em !important;
  padding:8px 14px !important;
}
html[data-theme="phase2"] .online-pill strong{
  font-family:'Urbanist','Inter',sans-serif !important;
  font-weight:800 !important;
  color:var(--pd-text) !important;
  font-variant-numeric:tabular-nums !important;
}

/* ----- LOGO — premium wordmark tightening. */
html[data-theme="phase2"] .logo{
  letter-spacing:-.01em;
}

/* ----- TOPBAR — extra padding for the bigger pills. */
html[data-theme="phase2"] .topbar{
  padding:14px 36px !important;
  gap:20px !important;
}

/* ----- CARDS — stronger hover lift (was -2/-3, now -4) so
   polish reads on first glance. */
html[data-theme="phase2"] .pd-card:hover,
html[data-theme="phase2"] .case-card:hover,
html[data-theme="phase2"] .cig-item:hover,
html[data-theme="phase2"] .rp-card:hover{
  transform:translateY(-4px) !important;
}

/* END VISUAL REWORK PASS 4 */


/* ============================================================
   PACK OPENER — packdraw layout parity
   ------------------------------------------------------------
   Scoped strictly to .cs-open-view so the catalog grid, odds
   grid, top nav, and other routes are untouched. Goals:
   - Soft pastel-green Open CTA (packdraw uses #48BB78; we go
     a touch softer per the brief).
   - Demo + lightning buttons match: dark gray, 6px radius, 44px.
   - Reel items keep the existing frameless treatment but get a
     rarity-tinted radial glow behind the item image.
   - Tray slots: dashed-border empties, clean filled state with
     pack thumbnail + add (+) + delete (trash) icons.
   - Button label format: "Open for · [amount]" at 1x (no
     visible separator); "Open N Packs · [amount]" at 2x+.
============================================================ */

/* --- Open CTA — site-brand blue (matches Sign In button family) --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-open-btn.cs-open-cta{
  background: #3B82F6 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  height: 44px !important;
  padding: 0 22px !important;
  font-family: 'Urbanist','Inter',sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  box-shadow:
    0 2px 10px rgba(59,130,246,.32),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition: background .15s ease, transform .12s ease, box-shadow .2s ease;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-open-btn.cs-open-cta:hover{
  background: #2563EB !important;
  transform: translateY(-1px);
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-open-btn.cs-open-cta:active{
  transform: translateY(0) scale(.985);
}
/* Hide the legacy red-shimmer band on the green CTA. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-open-btn.cs-open-cta .btn-shine{
  display: none !important;
}
/* The · separator only shows for multi (2x+) — at 1x we read
   "Open for [amount]" inline. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-open-btn[data-count="1"] .cs-open-cta-sep{
  display: none !important;
}

/* --- Demo Spin + Lightning fast-toggle — dark gray pill buttons --- */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-demo-btn{
  height: 44px !important;
  padding: 0 22px !important;
  border-radius: 8px !important;
  background: #34383C !important;
  border: 0 !important;
  color: #ffffff !important;
  font-family: 'Urbanist','Inter',sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: background .15s ease;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-demo-btn:hover{
  background: #3F4448 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-fast-toggle{
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  background: #34383C !important;
  background-image: none !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-fast-toggle:hover{
  background: #3F4448 !important;
  color: #ffffff !important;
  transform: none !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-fast-toggle[aria-pressed="true"]{
  background: #FBBF24 !important;
  color: #1a1d22 !important;
  border-color: transparent !important;
}

/* --- Reel item rarity glow --- */
/* The .case-item in .cs-open-view is already frameless from prior
   passes. Add a centered radial-gradient glow behind the item image
   via a ::before pseudo, tinted by rarity. The glow lives at the
   item's natural size; image floats on top via stacking. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item{
  position: relative;
  isolation: isolate;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item::before{
  content: "";
  position: absolute;
  inset: 12% 8% 20%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    var(--rarity-glow, rgba(148,163,184,.32)) 0%,
    transparent 75%
  );
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
/* The .ci-img wrap sits above the glow. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item > *{
  position: relative;
  z-index: 1;
}
/* Per-rarity glow color tokens. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item.rarity-common,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item[data-rarity="common"]{
  --rarity-glow: rgba(148,163,184,.30);
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item.rarity-uncommon,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item[data-rarity="uncommon"]{
  --rarity-glow: rgba(147,197,253,.40);
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item.rarity-rare,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item[data-rarity="rare"]{
  --rarity-glow: rgba(96,165,250,.55);
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item.rarity-epic,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item[data-rarity="epic"]{
  --rarity-glow: rgba(192,132,252,.55);
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item.rarity-legendary,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item[data-rarity="legendary"]{
  --rarity-glow: rgba(251,191,36,.55);
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item.rarity-mythic,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item[data-rarity="mythic"]{
  --rarity-glow: rgba(248,113,113,.55);
}
/* The winner item gets a brighter, larger glow during the reveal. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item.cs-winner::before{
  inset: 5% 0% 15%;
  filter: blur(14px);
  opacity: 1.1;
}

/* --- Multi-pack tray — packdraw slot styling --- */
/* Empty slots: dashed hairline border, transparent. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-tray-slot:not(.filled){
  background: transparent !important;
  border: 1px dashed rgba(255,255,255,.14) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-tray-slot:not(.filled):hover{
  border-color: rgba(91,200,143,.40) !important;
  background: rgba(91,200,143,.03) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-tray-slot:not(.filled) .cs-tray-plus{
  color: rgba(255,255,255,.45);
  opacity: .8;
}
/* Filled slots: solid hairline, pack thumbnail, small add (+) corner button. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-tray-slot.filled{
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-tray-slot .cs-tray-img{
  object-fit: contain !important;
}
/* Trash/delete icon — top-right of filled non-anchor slots. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-tray-remove{
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px !important;
  background: rgba(0,0,0,.55) !important;
  border: 0 !important;
  color: rgba(255,255,255,.85) !important;
  top: 6px !important;
  right: 6px !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-tray-remove:hover{
  background: rgba(239,68,68,.75) !important;
  color: #fff !important;
}

/* END PACK OPENER — packdraw layout parity */


/* ============================================================
   PACK OPENER (continued) — multi-stack frameless + bigger glow
   ------------------------------------------------------------
   Pass 1 above restyled the buttons + tray. This addresses the
   actual REEL display:
   - Multi-stack: drop the dark navy box + border that wrapped
     the column grid. Packdraw shows the items floating directly
     on the page background.
   - Rarity glow: pump up the radial-gradient so it's actually
     visible (was buried under blur + low opacity).
   - Side chevron arrows: add decorative ◄ ► at the far edges of
     the multi-stack so it reads as "reels scrolling" the way
     packdraw shows.
============================================================ */

/* Multi-stack: kill the framing box — items float on page bg. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  height: 520px !important;
  padding: 0 60px !important;   /* room for chevron arrows */
  gap: 18px !important;
  position: relative;
}
/* Multi-stack chevrons are NOT painted via pseudo-elements anymore —
   the JS in buildMultiStages() (app.js ~7886) appends real DOM
   elements with class .cs-multi-chev.cs-pointer-top / cs-pointer-bot.
   The styling for those lives at lines 37899-37933. Painting more
   chevrons via ::before/::after on the stack would duplicate them. */

/* Each multi-stack column needs to be visually separated by
   whitespace only — kill any background, border, or pre/post
   fade gradients on the columns themselves. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row{
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row .cases-reel-wrap{
  overflow: hidden !important;
}

/* RARITY GLOW — make it actually visible. Packdraw bakes the
   glow into the item PNG; we don't have that, so we render a
   bigger, less-blurred radial-gradient backdrop. The glow lives
   under the item image via the existing ::before from Pass 1
   above, but with stronger opacity + larger inset. */
/* Glow lives on ::after because the existing ::before paints the
   bottom rarity hairline at lines 37377+. Use the existing --it-color
   variable (set per .rarity-* class at 37369-37374) so the colors stay
   in sync with the rest of the item styling. */
/* Halo circle removed per user request. Only the subtle per-rarity
   drop-shadow on .ci-img remains as the single glow source. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item::after{
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
}
/* DURING SPIN — kill the halo entirely. Items translate as plain
   PNGs with zero per-item raster work, exactly how packdraw moves
   its reel. Applies to BOTH 1x (#cs-stage) and multi-stack columns
   (.cases-stage-multi-row) via the shared .cs-spinning selector.
   Uses #cs-stage ID + extra .case-item:not(.cs-winner) so we win
   the cascade against the legacy `:not(.cs-winner)::after` overrides
   at lines 38142 / 38803 (both !important, same specificity
   otherwise). */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage.cs-spinning .case-item:not(.cs-winner)::after,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-reel.cs-spinning .case-item:not(.cs-winner)::after,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-stage-multi-row.cs-spinning .case-item:not(.cs-winner)::after,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-reel.cs-spinning .case-item:not(.cs-winner)::after{
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}
/* DURING SPIN — strip per-rarity drop-shadows on item images. Each
   drop-shadow forces a GPU rasterization of the shadow shape on
   every frame the image translates. Restored on idle. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage.cs-spinning .case-item .ci-img,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-reel.cs-spinning .case-item .ci-img,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row.cs-spinning .case-item .ci-img{
  filter: none !important;
}
/* DURING SPIN — drop the reel-wrap mask. Masks on a parent with
   translating content force the compositor to re-apply the mask
   per frame. Hard-clip via overflow:hidden is enough during
   motion; mask returns on landing for the static fade. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage.cs-spinning .cases-reel-wrap{
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
/* GPU layer promotion hints — keep the reel on its own composited
   layer. will-change is already set in the base .cases-reel rule;
   backface-visibility:hidden is a belt-and-braces GPU promotion hint
   that some browsers use even when will-change isn't enough.
   (No `transform` here — the JS sets reel.style.transform inline
   each spin, and a CSS transform on the same element would compete.) */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-reel.cs-spinning{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Pump per-rarity colors so they're saturated enough to read
   through the blur. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item.rarity-common,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item[data-rarity="common"]{
  --rarity-glow: rgba(148,163,184,.50);
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item.rarity-uncommon,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item[data-rarity="uncommon"]{
  --rarity-glow: rgba(96,165,250,.60);
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item.rarity-rare,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item[data-rarity="rare"]{
  --rarity-glow: rgba(96,165,250,.75);
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item.rarity-epic,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item[data-rarity="epic"]{
  --rarity-glow: rgba(192,132,252,.75);
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item.rarity-legendary,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item[data-rarity="legendary"]{
  --rarity-glow: rgba(251,191,36,.75);
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item.rarity-mythic,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .case-item[data-rarity="mythic"]{
  --rarity-glow: rgba(248,113,113,.75);
}

/* END PACK OPENER multi-stack pass */


/* ============================================================
   PACK OPENER (continued) — 1x mode frameless horizontal row
   ------------------------------------------------------------
   In 1x mode the reel should look identical in spirit to packdraw:
   - The .cases-stage wrapper is transparent — no border, no bg,
     no corner radius. Just an invisible track holding the items.
   - Items run full-width as a horizontal row with breathing room.
   - Each item shows its rarity glow via the existing ::before.
   - Side chevrons (◄ ►) sit at the far left/right edges.
============================================================ */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
  padding: 0 60px !important;   /* leave room for the chevrons */
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-reel-wrap{
  background: transparent !important;
  border: 0 !important;
  overflow: hidden !important;
}
/* Soft transparent fade at the left/right edges of the 1x reel so items
   at the reel boundary blend into whatever background sits behind, instead
   of hard-clipping into a visible vertical sliver. Uses mask (not a
   gradient overlay) so it's bg-agnostic. Scoped to #cs-stage only —
   multi-stack columns are narrow vertical reels and a horizontal fade
   would chop their items. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage .cases-reel-wrap{
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%) !important;
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%) !important;
  -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
          mask-size: 100% 100% !important;
}
/* Hide the legacy dark vignette overlays on the stage edges — replaced
   by the mask-image fade on the wrap above. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-reel-wrap::before,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-reel-wrap::after{
  display: none !important;
}
/* Side chevron arrows on the 1x stage -- ONLY on #cs-stage, not any
   .cases-stage element. The multi-stack columns also have the
   .cases-stage class (`.cases-stage.cases-stage-multi-row`), so a
   `.cases-stage::before` selector would paint these chevrons in
   front of EVERY column too, stacking ◄ + ► into hourglass shapes
   between items. Scoping to #cs-stage limits to the 1x reel. */
/* 1x stage has no side chevrons — items overlap the arrows and they
   read as clutter. Multi-stack keeps its own chevrons via .cs-multi-chev. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage::before,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-stage::after{
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask: none !important;
          mask: none !important;
}
/* Kill any inherited ::before/::after on per-column .cases-stage-multi-
   row elements (defensive -- in case the broader .cases-stage::before/
   ::after rule at line 23551 leaks through). */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row::before,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row::after{
  content: none !important;
  display: none !important;
  background: none !important;
}
/* Top + bottom chevrons (1x mode pointer overlays from index.html)
   — unbloxed-style: KEEP visible. They are the only indicator on
   the stage; the center hairline is hidden separately.
   Exclude .cs-multi-chev because the multi-stack reuses the same
   .cs-pointer-top / .cs-pointer-bot class names for its SIDE chevrons
   (the JS in buildMultiStages adds .cs-multi-chev to differentiate). */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-pointer-top:not(.cs-multi-chev),
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-pointer-bot:not(.cs-multi-chev){
  display: flex !important;
}
/* Center hairline retired — chevrons alone carry the indicator job.
   The .cases-spotlight base rule at line ~5456 already sets display:
   none; this override is just defensive against later cascade rules. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-spotlight{
  display: none !important;
}

/* END PACK OPENER 1x frameless pass */

/* ============================================================
   BATTLE HIGHLIGHTS (homepage preview rows)
   Match the flat live-opens panel aesthetic — clean #1c1f29
   surfaces, blue mode accent on the left rail, subtle hover lift.
   ============================================================ */
html[data-theme="phase2"] .pd-battles-list{ gap:10px !important; }
html[data-theme="phase2"] .pd-battle-row{
  background:#1c1f29 !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.05) !important;
  border-radius:14px !important;
  border-left:3px solid #3B82F6 !important;
  padding:16px 20px 16px 18px !important;
  box-shadow:none !important;
  transition:
    background .2s cubic-bezier(.22, 1, .36, 1),
    transform .2s cubic-bezier(.22, 1, .36, 1),
    border-color .2s cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-theme="phase2"] .pd-battle-row:hover{
  background:#232734 !important;
  transform:translateY(-1px);
}
/* Mode accent stripes — JACKPOT keeps a warmer hint; the rest stay
   in the blue family so the lobby reads as one design system. */
html[data-theme="phase2"] .pd-battle-row[data-mode="JACKPOT"]{
  border-left-color:#f59e0b !important;
}
html[data-theme="phase2"] .pd-battle-row[data-mode="NORMAL"]{
  border-left-color:#3B82F6 !important;
}
html[data-theme="phase2"] .pd-battle-row[data-mode="SHARE"]{
  border-left-color:#10b981 !important;
}
html[data-theme="phase2"] .pd-battle-mode{
  color:rgba(255,255,255,.55) !important;
  font-size:13px !important;
  letter-spacing:.12em !important;
}
html[data-theme="phase2"] .pd-battle-avatar{
  background:#15171f !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .pd-battles-empty{
  background:#1c1f29 !important;
  border:1px dashed rgba(255,255,255,.08) !important;
  border-radius:14px !important;
  padding:36px 24px !important;
  color:rgba(255,255,255,.45) !important;
  text-align:center !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .pd-battles-empty-title{
  color:rgba(255,255,255,.7) !important;
  font-family:'Urbanist','Inter',sans-serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  margin-bottom:4px !important;
}
html[data-theme="phase2"] .pd-battles-empty-sub{
  color:rgba(255,255,255,.4) !important;
  font-size:14px !important;
}

/* "View All" link in section header */
html[data-theme="phase2"] .pd-section-view-all{
  background:#1c1f29 !important;
  border:1px solid rgba(255,255,255,.05) !important;
  border-radius:10px !important;
  color:#3B82F6 !important;
  padding:6px 14px !important;
  font-family:'Urbanist','Inter',sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  transition:background .2s cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-theme="phase2"] .pd-section-view-all:hover{
  background:#232734 !important;
}

/* ============================================================
   PASS 9 — MODERN POLISH (2026-05-28)
   GOAL: thicker text, whiter whites, softer greys, cohesive
   feel across every route. PLUS: rebuilt auth modal — single-
   column packdraw-style card with clean tab pill, big bold
   blue CTA, and Roblox / Discord / Google all clearly wired.
   This block is the LAST in the file so the cascade wins.
============================================================ */

/* ---------- A. Global type lift + softer palette ---------- */

/* Body: bump default weight 500 → 600 for more presence everywhere
   that doesn't set its own weight. Smoother subpixel rendering.    */
body{
  font-weight:600;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Lift base text colors — phase2 (the always-on theme) gets a
   crisper near-white and a lighter, easier-on-the-eyes mute. */
html[data-theme="phase2"]{
  /* Whiter primary + brighter secondary/mute. The page chrome is
     translucent glass over the forest bg, which sapped text contrast —
     lifting these tokens raises legibility everywhere at once (the mute
     token alone drives 300+ secondary-text usages). */
  --pd-text:#ffffff;            /* primary — crisp white (was #f4f6fa) */
  --pd-text-secondary:#bcc5d0;  /* between primary + mute (was #9AA5AD) */
  --pd-text-mute:#c8d1dc;       /* readable, still secondary (was #a3acb7) */
  --pd-line:rgba(255,255,255,.06);
  --pd-line-hover:rgba(255,255,255,.14);
}
html[data-theme="phase2"] body{ color:#ffffff; }

/* Legacy tokens used by older non-pd surfaces — lift for cohesion. */
:root{
  --text-dim:#eef2f8;
  --text-mute:#c8d1dc;
}

/* Strengthen common copy classes wherever they bleed through.
   Targeted not blanket so we don't accidentally bold display
   numerics or nav titles that already set their own weight. */
.modal-sub, .auth-disclaimer, .auth-foot, .pd-section-sub{
  font-weight:500;
}

/* ---------- B. Auth modal — brand-forward single-column card ---------- */
/* Redesign 2026-09. The real logo asset (assets/newest-logo.png — the same
   file the topbar uses) replaces the text wordmark; the provider buttons carry
   the official Roblox and Discord marks; inputs are icon-led; the CTA is a
   blue gradient; and a soft blue→cyan "aurora" sampled from the logo sits
   behind the header. Every id / class / data-attribute app.js binds to
   (setAuthMode, handleEmailAuth, the Turnstile mount, [data-auth-provider])
   is unchanged. Specificity + !important carried over from the previous
   block so earlier phase2 modal rules cannot fight it. */

.modal-backdrop#auth-modal .modal-auth{
  position:relative;
  isolation:isolate;
  max-width:480px !important;
  width:100% !important;
  display:block !important;
  grid-template-columns:none !important;
  padding:0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 150px),
    var(--pd-bg-1) !important;
  border:1px solid rgba(255,255,255,.085) !important;
  border-radius:24px !important;
  overflow:hidden auto;
  max-height:92vh;
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.85),
    0 0 0 1px rgba(59,130,246,.10),
    0 30px 80px -40px rgba(59,130,246,.35) !important;
}
/* Aurora — two soft brand-colour pools behind the header. Negative z inside
   the card's own stacking context: above the card background, under content. */
.modal-backdrop#auth-modal .modal-auth::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:270px;
  background:
    radial-gradient(420px 230px at 14% -8%,  rgba(34,211,238,.22), transparent 62%),
    radial-gradient(470px 250px at 92% -14%, rgba(59,130,246,.27), transparent 64%);
  pointer-events:none;
  z-index:-1;
  /* The shared .modal::before is a masked 1px gradient rim (padding:1px +
     mask-composite:exclude + opacity:.6). Reset every one of those here or
     the aurora is clipped to a faint ring. The card's own 1px border + the
     blue box-shadow ring above replace that rim. */
  inset:auto;
  bottom:auto;
  padding:0;
  border-radius:0;
  opacity:1;
  animation:none;
  -webkit-mask:none;
          mask:none;
  -webkit-mask-composite:source-over;
          mask-composite:add;
}
/* Hairline gradient rule along the very top edge. */
.modal-backdrop#auth-modal .modal-auth::after{
  content:'';
  position:absolute; left:28px; right:28px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.6) 30%, rgba(59,130,246,.6) 70%, transparent);
  pointer-events:none;
}

.modal-backdrop#auth-modal .auth-form{
  padding:34px 36px 26px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
}

/* ----- Header: real logo, then title + sub ----- */
.modal-backdrop#auth-modal .auth-header{ margin:0 0 20px !important; text-align:left !important; }
/* The legacy two-column layout's phone rule (@media 720px, ~line 14681) pads
   .auth-brand 22px/20px and draws a blue border-bottom under it — that was the
   20px the logo sat right of the text column on phones. Neutralise it. */
.modal-backdrop#auth-modal .auth-brand{ margin:0 !important; padding:0 !important; border:0 !important; background:none !important; line-height:0; }
/* The PNG carries generous transparent padding (the mark + wordmark occupy
   roughly x=380..1445 of 1672, y=300..610 of 941). Render it wide and pull the
   transparent margins back so the VISIBLE mark aligns with the text column
   and sits ~10px above the title. Visible size ends up ~170x44px. */
.modal-backdrop#auth-modal .auth-brand-logo{
  display:block;
  width:236px; height:auto;
  margin:-38px 0 -36px -54px;
  filter:drop-shadow(0 8px 24px rgba(59,130,246,.38));
  user-select:none; -webkit-user-drag:none;
}
.modal-backdrop#auth-modal .auth-header .modal-title{
  font-family:'Manrope',sans-serif !important;
  font-weight:800 !important;
  font-size:28px !important;
  color:#ffffff !important;
  letter-spacing:-.02em !important;
  line-height:1.1 !important;
  margin:0 !important;
  /* Shared .modal-title rules reserve room for a leading icon; that indent
     is what pushed "Sign In" ~60px right of the logo and subtitle. */
  padding:0 !important;
  text-indent:0 !important;
  display:block !important;
  text-align:left !important;
}
.modal-backdrop#auth-modal .auth-header .modal-title::before,
.modal-backdrop#auth-modal .auth-header .modal-title::after{ content:none !important; display:none !important; }
.modal-backdrop#auth-modal .auth-header .modal-sub{
  font-family:'Manrope',sans-serif !important;
  font-weight:500 !important;
  font-size:14.5px !important;
  color:rgba(255,255,255,.58) !important;
  line-height:1.5 !important;
  margin:8px 0 0 !important;
  letter-spacing:0 !important;
  text-align:left !important;
}

/* ----- Sign In / Sign Up segmented control ----- */
.modal-backdrop#auth-modal .auth-tabs{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  align-self:stretch !important;
  gap:4px !important;
  padding:4px !important;
  background:rgba(0,0,0,.30) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:14px !important;
  margin:0 0 20px !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.modal-backdrop#auth-modal .auth-tab{
  height:44px !important;
  padding:0 14px !important;
  border:0 !important;
  background:transparent !important;
  color:rgba(255,255,255,.55) !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:700 !important;
  font-size:14.5px !important;
  letter-spacing:0 !important;
  border-radius:11px !important;
  cursor:pointer;
  transition:
    color .22s var(--ease-smooth),
    background .22s var(--ease-smooth),
    box-shadow .22s var(--ease-smooth) !important;
}
.modal-backdrop#auth-modal .auth-tab:hover{ color:#fff !important; }
.modal-backdrop#auth-modal .auth-tab.active{
  background:linear-gradient(135deg,#3B82F6,#2563EB) !important;
  color:#fff !important;
  box-shadow:0 8px 20px -10px rgba(59,130,246,.85), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* ----- Email + password ----- */
.modal-backdrop#auth-modal .auth-emailform{ display:flex; flex-direction:column; }
.modal-backdrop#auth-modal .auth-field{ display:flex; flex-direction:column; margin:0 0 14px; }
.modal-backdrop#auth-modal .auth-label{
  font-family:'Manrope',sans-serif !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.55) !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
  margin:0 0 8px;
}
.modal-backdrop#auth-modal .auth-input-wrap{ position:relative; }
.modal-backdrop#auth-modal .auth-input-wrap > svg{
  position:absolute; left:16px; top:50%;
  width:18px; height:18px;
  transform:translateY(-50%);
  color:rgba(255,255,255,.38);
  pointer-events:none;
  transition:color .16s var(--ease-smooth);
}
.modal-backdrop#auth-modal .auth-input-wrap:focus-within > svg{ color:#60A5FA; }
.modal-backdrop#auth-modal .auth-input{
  box-sizing:border-box;
  width:100%;
  height:52px;
  padding:0 16px 0 46px !important;
  background:rgba(0,0,0,.26) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:13px !important;
  color:#fff !important;
  font-family:'Manrope',sans-serif !important;
  font-size:16px !important; /* 16px = iOS won't focus-zoom the form */
  outline:none !important;
  box-shadow:none !important;
  transition:border-color .16s var(--ease-smooth), box-shadow .16s var(--ease-smooth), background .16s var(--ease-smooth);
}
.modal-backdrop#auth-modal .auth-input:hover{ border-color:rgba(255,255,255,.16) !important; }
.modal-backdrop#auth-modal .auth-input:focus{
  border-color:rgba(96,165,250,.9) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.22) !important;
  background:rgba(0,0,0,.34) !important;
}
.modal-backdrop#auth-modal .auth-input::placeholder{ color:rgba(255,255,255,.32) !important; }
.modal-backdrop#auth-modal .auth-input:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  transition:background-color 9999s ease-in-out 0s;   /* suppress the white autofill flash on dark inputs */
}

/* Inline validation / server error */
.modal-backdrop#auth-modal .auth-error{
  margin:-2px 0 12px;
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  font-weight:500;
  color:#ff7d7d;
  line-height:1.4;
}
.modal-backdrop#auth-modal .auth-error[hidden]{ display:none; }

/* Cloudflare Turnstile — rounded surface; collapses to zero until it mounts */
.modal-backdrop#auth-modal .auth-turnstile{ margin:2px 0 16px; border-radius:12px; overflow:hidden; }
.modal-backdrop#auth-modal .auth-turnstile:empty{ margin:0; }

/* ----- Primary CTA ----- */
.modal-backdrop#auth-modal .auth-submit{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:54px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#3B82F6 0%,#2563EB 55%,#1D4ED8 100%);
  color:#fff;
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:15.5px;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(59,130,246,.75), inset 0 1px 0 rgba(255,255,255,.22);
  transition:filter .16s var(--ease-smooth),
             transform .12s var(--ease-smooth),
             box-shadow .16s var(--ease-smooth),
             opacity .16s var(--ease-smooth);
}
.modal-backdrop#auth-modal .auth-submit:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 18px 34px -12px rgba(59,130,246,.85), inset 0 1px 0 rgba(255,255,255,.22);
}
.modal-backdrop#auth-modal .auth-submit:active{ transform:translateY(0); filter:brightness(.98); }
.modal-backdrop#auth-modal .auth-submit:disabled{ opacity:.6; cursor:default; transform:none; filter:none; }
.modal-backdrop#auth-modal .auth-submit-label{ transition:opacity .16s var(--ease-smooth); }
.modal-backdrop#auth-modal .auth-submit.is-busy .auth-submit-label{ opacity:.5; }
.modal-backdrop#auth-modal .auth-submit-spin{
  display:none;
  width:16px; height:16px;
  margin-right:9px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:bhAuthSpin .6s linear infinite;
}
.modal-backdrop#auth-modal .auth-submit.is-busy .auth-submit-spin{ display:inline-block; }
@keyframes bhAuthSpin{ to { transform:rotate(360deg); } }

/* "or continue with" divider */
.modal-backdrop#auth-modal .auth-or{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  color:rgba(255,255,255,.42);
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.modal-backdrop#auth-modal .auth-or::before,
.modal-backdrop#auth-modal .auth-or::after{
  content:'';
  flex:1 1 auto;
  height:1px;
  background:rgba(255,255,255,.09);
}
.modal-backdrop#auth-modal .auth-or span{ flex:0 0 auto; }

/* ----- Providers — official marks, brand colour on hover only ----- */
.modal-backdrop#auth-modal .auth-socials{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.modal-backdrop#auth-modal .auth-social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:52px;
  padding:0 12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  border-radius:13px;
  color:#fff;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:14.5px;
  cursor:pointer;
  transition:background .16s var(--ease-smooth),
             border-color .16s var(--ease-smooth),
             transform .12s var(--ease-smooth);
}
.modal-backdrop#auth-modal .auth-social svg{ display:block; flex:none; width:20px; height:20px; }
.modal-backdrop#auth-modal .auth-social-roblox svg{ color:#fff; }
.modal-backdrop#auth-modal .auth-social:hover{ transform:translateY(-1px); }
.modal-backdrop#auth-modal .auth-social:active{ transform:translateY(0); }
.modal-backdrop#auth-modal .auth-social-roblox:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.26);
}
.modal-backdrop#auth-modal .auth-social-discord:hover{
  background:rgba(88,101,242,.12);
  border-color:rgba(88,101,242,.55);
}

/* ----- Footer — quiet legal line ----- */
.modal-backdrop#auth-modal .auth-foot{
  display:block !important;
  margin:22px 0 0 !important;
  padding-top:18px !important;
  border-top:1px solid rgba(255,255,255,.06);
  font-family:'Manrope',sans-serif !important;
  font-size:11.5px !important;
  font-weight:500 !important;
  color:rgba(255,255,255,.42) !important;
  letter-spacing:0 !important;
  line-height:1.6 !important;
  text-align:left !important;
}
.modal-backdrop#auth-modal .auth-foot a{
  color:rgba(255,255,255,.66) !important;
  font-weight:600 !important;
  text-decoration:none;
}
.modal-backdrop#auth-modal .auth-foot a:hover{ color:#fff !important; text-decoration:underline !important; }

/* Phone — tighter padding; keep >=300px inner width for the Turnstile widget. */
@media (max-width:560px){
  .modal-backdrop#auth-modal .auth-form{ padding:26px 22px 20px !important; }
  .modal-backdrop#auth-modal .auth-brand-logo{ width:212px; margin:-34px 0 -33px -48px; }
  .modal-backdrop#auth-modal .auth-header .modal-title{ font-size:26px !important; }
  .modal-backdrop#auth-modal .auth-input{ height:50px; }
  .modal-backdrop#auth-modal .auth-submit{ height:52px; }
  .modal-backdrop#auth-modal .auth-social{ height:50px; font-size:15px; }
  .modal-backdrop#auth-modal .modal-close{ top:16px !important; right:16px !important; }
}
@media (max-width:400px){
  .modal-backdrop#auth-modal .auth-form{ padding:24px 16px 18px !important; }
  /* Turnstile "flexible" has a 300px minimum. On the narrowest phones the card
     nets ~295px of content width, so let the widget bleed 8px into the side
     padding rather than clip its right edge. */
  .modal-backdrop#auth-modal .auth-turnstile{ margin-left:-8px; margin-right:-8px; }
}

/* ---------- C. Roblox multi-step modal — match the polish ---------- */

.modal-backdrop#rbx-modal .modal-rbx{
  /* Flat matte surface (was a navy gradient) to match the phase2 panels. */
  background:#171a21 !important;
  background-image:none !important;
  border:1px solid var(--pd-line, rgba(255,255,255,.07)) !important;
  border-radius:18px !important;
  padding:32px 28px 26px !important;
}
.modal-backdrop#rbx-modal .modal-title{
  font-family:'Urbanist','Sora','Inter',sans-serif !important;
  font-weight:900 !important;
  font-size:22px !important;
  letter-spacing:-.005em !important;
  color:#fff !important;
  text-transform:none !important;
}
.modal-backdrop#rbx-modal .modal-sub{
  font-weight:500 !important;
  font-size:13.5px !important;
  color:rgba(255,255,255,.58) !important;
  line-height:1.55 !important;
}
.modal-backdrop#rbx-modal .rbx-label{
  font-family:'Urbanist','Inter',sans-serif;
  font-weight:800;
  font-size:11.5px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.62);
  text-transform:uppercase;
  text-align:left;
  display:block;
  margin-top:4px;
}
.modal-backdrop#rbx-modal .rbx-input-row{
  height:54px;
  padding:0 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  display:flex;align-items:center;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.modal-backdrop#rbx-modal .rbx-input-row:focus-within{
  border-color:#3B82F6;
  background:rgba(59,130,246,.06);
  box-shadow:0 0 0 4px rgba(59,130,246,.14);
}
.modal-backdrop#rbx-modal .rbx-input-row input{
  flex:1;background:transparent;border:0;outline:0;
  font-family:'Inter',sans-serif;
  font-weight:600;font-size:15px;color:#fff;
  letter-spacing:.01em;
}
.modal-backdrop#rbx-modal .rbx-input-row input::placeholder{
  color:rgba(255,255,255,.4);font-weight:500;
}
.modal-backdrop#rbx-modal .rbx-cta{
  width:100%;
  height:52px;
  margin-top:4px;
  /* Flat phase2 brand blue — no gradient, no glow halo — to match the
     primary CTAs across the rest of the site (DEAL, deposit, etc.). */
  background:var(--pd-blue, #4299e1) !important;
  background-image:none !important;
  border:0 !important;
  border-radius:12px !important;
  font-family:'Urbanist','Sora','Inter',sans-serif !important;
  font-weight:800 !important;
  font-size:16px !important;
  letter-spacing:.06em !important;
  color:#fff !important;
  box-shadow:none !important;
  transition:background .18s ease, transform .15s var(--ease-bounce) !important;
}
.modal-backdrop#rbx-modal .rbx-cta:hover{
  background:var(--pd-blue-hover, #3182ce) !important;
  background-image:none !important;
  box-shadow:none !important;
  transform:translateY(-1px);
}
/* Kill the legacy diagonal sheen sweep on the modal CTAs (arcade tell). */
.modal-backdrop#rbx-modal .rbx-cta .btn-shine{ display:none !important; }
.modal-backdrop#rbx-modal .auth-back-link{
  margin-top:2px;
  background:transparent;border:0;
  color:rgba(255,255,255,.5);
  font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;
  cursor:pointer;
  transition:color .15s ease;
}
.modal-backdrop#rbx-modal .auth-back-link:hover{ color:#fff; }

/* ---------- D. Site-wide cohesion (tiny touches) ---------- */

/* Sidebar links read whiter, more confident. */
.sb-link{ color:#cdd6e3; }
.sb-link:hover{ color:#fff; }
.sb-title{ color:rgba(255,255,255,.5); }

/* Section headings on rebuilt routes — whiter, less mushy. */
html[data-theme="phase2"] .pd-section-title{ color:#f5f7fa !important; }
html[data-theme="phase2"] .pd-section-sub{ color:#a8b0bb !important; }

/* Topbar SIGN IN / REGISTER buttons — match the modal's CTA weight. */
#sign-in-btn, #register-btn{
  letter-spacing:.08em;
  font-weight:800;
}

/* ============================================================
   PACK REVEAL — NAME + WORTH (impeccable redesign, 2026-05-28)
   Plain centered type, no pill, no border, no backdrop blur.
   Two-line stack under the winning item:
     1) Item name — Urbanist 800, near-white, tracked tight
     2) Coin glyph + payout — Sora 900, rarity-tinted solid color
   Hierarchy via weight + scale (~1.17 ratio, product spec). Soft
   text-shadow keeps it readable against the dark stage. Solid
   color on payout (NO gradient text per shared design laws).
============================================================ */
/* The JS sets inline `top:Xpx` to anchor 8px below the winning
   card's actual bottom edge (stage / item sizes vary by view).
   The static `bottom:auto` here lets that inline `top` work even
   in cascade with the original `bottom:-52px` rule. The fallback
   `top:55%` is only used if the JS measurement path errors. */
.cases-stage .cs-stage-label{
  bottom:auto !important;
  top:55%;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-radius:0 !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:3px !important;
  transform:translateX(-50%) translateY(6px);
  /* `top` is set ONCE by JS (positionLabel) BEFORE the label is shown, so it
     never re-measures or glides. Only the entrance (transform + opacity)
     animates — a clean ease-out slide-up, no `top` transition. */
  transition:
    transform .32s cubic-bezier(.16,1,.3,1),
    opacity   .26s cubic-bezier(.16,1,.3,1) !important;
}
.cases-stage .cs-stage-label.cs-stage-label-show{
  /* Settle to rest and HOLD still. The breathing float read as restless next to
     the already-floating winner; a clean static caption is calmer + premium. */
  transform:translateX(-50%) translateY(0);
}
@keyframes csLabelFloat{
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

/* Item name — a quiet uppercase eyebrow so the payout figure is the hero. Reads
   like a price tag (label over figure), not two competing white lines. */
.cases-stage .cs-stage-label .cs-stage-label-name{
  font-family:'Inter',sans-serif;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(255,255,255,.5);
  line-height:1.2;
  max-width:240px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Coin glyph + payout — Sora numerics, solid rarity color, now the hero figure. */
.cases-stage .cs-stage-label .cs-stage-label-payout{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Sora','Inter',sans-serif;
  font-size:19px;
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
  /* Legibility shadow only — no coloured bloom (even the soft one still read as
     a faint AI glow). The rarity is carried by the figure's colour alone. */
  text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 9px rgba(0,0,0,.42);
}
.cases-stage .cs-stage-label .cs-stage-label-payout .bc-glyph{
  width:18px;
  height:18px;
  display:inline-block;
  flex-shrink:0;
}
/* Decorative breathing only — hold the label still under reduce-motion. */
@media (prefers-reduced-motion: reduce){
  .cases-stage .cs-stage-label.cs-stage-label-show{ animation: none; transform: translateX(-50%) translateY(0); }
}

/* Phone — JS handles position. Just tighten the type scale. */
@media (max-width:520px){
  .cases-stage .cs-stage-label{ gap:2px !important; }
  .cases-stage .cs-stage-label .cs-stage-label-name{ font-size:9.5px; letter-spacing:.12em; max-width:170px; }
  .cases-stage .cs-stage-label .cs-stage-label-payout{ font-size:16px; }
  .cases-stage .cs-stage-label .cs-stage-label-payout .bc-glyph{ width:15px;height:15px; }
}

/* ============================================================
   PACK REVEAL POLISH (2026-05-28)
   Replace the hard rarity box-shadow + one-shot zoom keyframe
   on .case-item.cs-winner with a packdraw-style SOFT TILE:
   - Rarity-tinted gradient background fades in via ::after
   - Card lifts smoothly and slow-bobs while shown
   - Border tightens to a 1.5px tint glow (no harsh rim)
   - Transitions on transform/border/opacity drive BOTH the
     entrance AND exit smoothly (removing .cs-winner reverses
     the same path), so it no longer "pops up and disappears
     plainly" when the reel resets.
============================================================ */

/* Base case-item: prep for smooth winner transitions.
   These additions don't alter the resting state — they just give
   the transition engine something to interpolate when .cs-winner
   is toggled. */
.case-item{
  transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    box-shadow .45s cubic-bezier(.22,1,.36,1),
    border-color .35s cubic-bezier(.22,1,.36,1) !important;
}

/* Soft rarity tile — sits inside the card, fades in on winner.
   pointer-events:none so it doesn't block clicks on overlays. */
.case-item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:0;
  opacity:0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.12), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
  transition:opacity .45s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
/* Keep the icon-wrap + name/multi labels ABOVE the new tile overlay. */
.case-item > *{ position:relative; z-index:1; }

/* WINNER state — soft lift + slow bob, gentle ambient shadow.
   Two animations: a one-shot lift (lands on the held position
   with `forwards`) and an infinite bob that breathes around it.
   When .cs-winner is removed, BOTH animations stop, transform
   falls back to the base value, and the transition on transform
   above carries the card smoothly back to rest. */
.case-item.cs-winner{
  z-index:4;
  /* The two animations replace the old csWinnerZoom. The lift
     uses forwards so the held value (translateY(-5px) scale(1.06))
     is the starting point for the bob, avoiding a jump between
     the two. */
  animation:
    csWinnerLift .45s cubic-bezier(.22,1,.36,1) forwards,
    csWinnerBob 2.6s ease-in-out .45s infinite !important;
  /* Soft ambient shadow — replaces the per-rarity hard rim that
     used to scream out of the matte slider. Rarity tint comes
     from ::after instead. */
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.10),
    0 0 32px rgba(255,255,255,.08) !important;
}
.case-item.cs-winner::after{ opacity:1; }

/* Per-rarity ::after tint — soft inner glow that hugs the tile. */
.case-item.cs-winner.rarity-common::after,
.case-item.cs-winner.rarity-uncommon::after{
  background:
    radial-gradient(ellipse at 50% 40%, rgba(96,165,250,.22), transparent 65%),
    linear-gradient(180deg, rgba(96,165,250,.08), rgba(0,0,0,.20));
}
.case-item.cs-winner.rarity-rare::after{
  background:
    radial-gradient(ellipse at 50% 40%, rgba(59,130,246,.34), transparent 65%),
    linear-gradient(180deg, rgba(59,130,246,.12), rgba(0,0,0,.22));
}
.case-item.cs-winner.rarity-epic::after{
  background:
    radial-gradient(ellipse at 50% 40%, rgba(168,85,247,.38), transparent 65%),
    linear-gradient(180deg, rgba(168,85,247,.14), rgba(0,0,0,.22));
}
.case-item.cs-winner.rarity-legendary::after{
  background:
    radial-gradient(ellipse at 50% 38%, rgba(251,191,36,.42), transparent 65%),
    linear-gradient(180deg, rgba(251,191,36,.16), rgba(0,0,0,.22));
}
.case-item.cs-winner.rarity-mythic::after{
  background:
    radial-gradient(ellipse at 50% 38%, rgba(239,68,68,.46), transparent 65%),
    linear-gradient(180deg, rgba(239,68,68,.18), rgba(0,0,0,.24));
}

/* Per-rarity 1.5px border accent — replaces the harsh rim shadows. */
.case-item.cs-winner.rarity-common,
.case-item.cs-winner.rarity-uncommon{ border-color:rgba(96,165,250,.6) !important; }
.case-item.cs-winner.rarity-rare    { border-color:rgba(59,130,246,.85) !important; }
.case-item.cs-winner.rarity-epic    { border-color:rgba(168,85,247,.9)  !important; }
.case-item.cs-winner.rarity-legendary{ border-color:rgba(251,191,36,.95) !important; }
.case-item.cs-winner.rarity-mythic  { border-color:rgba(239,68,68,.95)  !important; }

/* Override the per-rarity box-shadow rules from the earlier block — we
   want all rarities to share the soft ambient shadow set above; the
   tint lives on ::after, not on the rim. */
.case-item.cs-winner.rarity-common,
.case-item.cs-winner.rarity-uncommon,
.case-item.cs-winner.rarity-rare,
.case-item.cs-winner.rarity-epic,
.case-item.cs-winner.rarity-legendary,
.case-item.cs-winner.rarity-mythic{
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.10),
    0 0 32px rgba(255,255,255,.08) !important;
}

@keyframes csWinnerLift{
  /* Subtle settle "pop" — overshoots to 1.10 then eases back to the held
     1.06 (a single pop, NOT an oscillating bounce). The bob picks up from
     1.06 so there's no jump. */
  0%   { transform:translateY(0)    scale(1);    }
  60%  { transform:translateY(-8px) scale(1.10); }
  100% { transform:translateY(-5px) scale(1.06); }
}
@keyframes csWinnerBob{
  0%,100% { transform:translateY(-5px) scale(1.06); }
  50%     { transform:translateY(-9px) scale(1.065);}
}

/* ----- Land-snap (2026-06): a single clean bloom on the centre column the
   instant the reel stops. Re-enables the retired spotlight flash, but as ONE
   non-looping pulse (iteration 1) so it reads as a satisfying "snap into
   place", not the old strobe. opacity:0 base keeps it invisible under
   prefers-reduced-motion (where the 21944 rule kills the animation). Sits
   behind the winner card (z3). Covers single + multi-row stages. ----- */
.cs-open-view .cases-stage.cs-spotlight-flash::before,
.cs-open-view .cases-stage-multi-row.cs-spotlight-flash::before,
section[data-route="cases"][data-cs-view="open"] .cases-stage.cs-spotlight-flash::before,
section[data-route="cases"][data-cs-view="open"] .cases-stage-multi-row.cs-spotlight-flash::before{
  content:"" !important;
  position:absolute;
  left:50%; top:6px; bottom:6px;
  width:130px;
  transform:translateX(-50%);
  opacity:0;
  pointer-events:none;
  z-index:3;
  background:radial-gradient(ellipse 46% 60% at 50% 50%, rgba(190,224,255,.58), rgba(96,165,250,.26) 42%, transparent 74%);
  animation:csLandFlash .5s cubic-bezier(.2,.8,.2,1) 1 both;
}
@keyframes csLandFlash{
  0%   { opacity:0; transform:translateX(-50%) scaleX(.55); }
  28%  { opacity:1; }
  100% { opacity:0; transform:translateX(-50%) scaleX(1.18); }
}

/* Reduced-motion: keep the soft tile (it's a non-essential
   reveal cue but visually load-bearing for prize feedback), but
   drop the float bob to a single static lift. */
@media (prefers-reduced-motion: reduce){
  .case-item.cs-winner{
    animation:none !important;
    transform:translateY(-3px) scale(1.04) !important;
  }
}

/* ============================================================
   PACK CONTAINS — square cards + clean rarity hairline
   User feedback: the grid tiles read as too round and the
   bottom rarity strip looked curved/glowy. Tighten the radius,
   square the inner stats pill, and turn the bottom strip into
   a flat edge-to-edge hairline (no pill shape, no outer glow).
   Selectors mirror the phase2 prefix so this beats the earlier
   `html[data-theme="phase2"] .cig-item { border-radius:14 }`
   override and not just the original `.cig-item` rule.
============================================================ */
html[data-theme="phase2"] .cig-item,
.cig-item{
  border-radius:8px !important;
  background:#1c1f29 !important;
  border:1px solid rgba(255,255,255,.05) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.30) !important;
}
html[data-theme="phase2"] .cig-item:hover,
.cig-item:hover{
  transform:translateY(-2px) !important;
  background:#232734 !important;
  border-color:color-mix(in srgb, var(--it-color, #60A5FA) 45%, transparent) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.38),
    0 0 0 1px color-mix(in srgb, var(--it-color, #60A5FA) 30%, transparent) !important;
}

/* Bottom strip — flat edge-to-edge, 2px, no glow, no pill. */
html[data-theme="phase2"] .cig-item::after,
.cig-item::after{
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:2px !important;
  border-radius:0 !important;
  background:var(--it-color, rgba(125,211,252,.85)) !important;
  box-shadow:none !important;
  opacity:1 !important;
}

/* Inner stats pill — square it up to match the new card chrome. */
html[data-theme="phase2"] .cig-item .cig-stats,
.cig-item .cig-stats{
  border-radius:6px !important;
  background:rgba(0,0,0,.32) !important;
  border:1px solid rgba(255,255,255,.05) !important;
}

/* Multi-stack mode: suppress the soft-tile reveal entirely. In 2x-
   4x the same cue fires once per row simultaneously, reading as
   glow on every row. The spotlight chevrons + the spin landing
   already say "this one"; the per-card lift + tile is overkill
   when multiplied. Keeps the .cs-winner class addressable for any
   non-visual hooks (sound, particles, JS state). */
.cases-stage-multi-row .case-item.cs-winner{
  animation:none !important;
  transform:none !important;
  box-shadow:none !important;
  border-color:inherit !important;
}
.cases-stage-multi-row .case-item.cs-winner::after{
  opacity:0 !important;
  background:none !important;
}

/* ============================================================
   MULTI-STACK ROWS: room for the name + payout label
   The floating .cs-stage-label is now appended per row in 2x-4x
   too (each row gets a data-compact="1" smaller variant). Rows
   need to (a) let the label overflow downward, and (b) sit far
   enough apart that the label doesn't crash into the next row.
============================================================ */
.cases-multi-stack{ gap:56px !important; }
.cases-multi-stack .cases-stage-multi-row{
  overflow:visible !important;
  contain:layout !important;
}

/* Compact label variant — used in multi-stack rows. Smaller type
   so it reads as a caption per row rather than a hero callout. */
.cases-stage .cs-stage-label[data-compact="1"]{ gap:1px !important; }
.cases-stage .cs-stage-label[data-compact="1"] .cs-stage-label-name{
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  max-width:170px;
}
.cases-stage .cs-stage-label[data-compact="1"] .cs-stage-label-payout{
  font-size:15px;
  gap:5px;
}
.cases-stage .cs-stage-label[data-compact="1"] .cs-stage-label-payout .bc-glyph{
  width:14px;height:14px;
}

/* Mobile multi-stack: tighten the row gap a touch since the label
   variant already shrinks via the @media block below. */
@media (max-width:760px){
  .cases-multi-stack{ gap:44px !important; }
}

/* ============================================================
   PACKS CATALOG TILE — match the home-page pack hover feel
   The phase2 theme block at line ~28675 forces translateY(-4px)
   with `html[data-theme="phase2"] section[data-route="cases"]
   .case-card:hover` — specificity (0,4,1). My earlier .case-card
   (0,2,0) rules lost the cascade, which is why the user said
   "still feels the same." Match the phase2 + cases prefix so
   this block actually wins. Same trick for the .cc-card-shine
   which the earlier block hid via display:none.

   Effect: 3D mouse-tracked tilt + clean lift + diagonal foil
   sheen sweep. JS in renderCatalog sets --cc-tilt-x/y on
   mousemove. Mobile drops the tilt and keeps a tap-friendly lift.
============================================================ */
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img{
  perspective:900px;
  transform-style:preserve-3d;
  transform:
    rotateX(var(--cc-tilt-x, 0deg))
    rotateY(var(--cc-tilt-y, 0deg)) !important;
  will-change:transform;
  animation:none !important;
  transition:
    transform .25s cubic-bezier(.22,1,.36,1),
    box-shadow .35s cubic-bezier(.22,1,.36,1) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:hover{
  transform:
    translateY(-8px)
    rotateX(var(--cc-tilt-x, 0deg))
    rotateY(var(--cc-tilt-y, 0deg)) !important;
  box-shadow:
    0 22px 48px rgba(0,0,0,.6),
    0 0 30px color-mix(in srgb, var(--case-glow, #3B82F6) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.18) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:active{
  transform:
    translateY(-4px)
    rotateX(var(--cc-tilt-x, 0deg))
    rotateY(var(--cc-tilt-y, 0deg)) !important;
  transition-duration:.12s !important;
}

/* Resurrect the shine span the phase2 block hid, then style it as
   the home-tile-style diagonal foil sweep. */
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-card-shine{
  display:block !important;
  position:absolute;
  top:0; left:-70%;
  width:55%; height:100%;
  background:linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.0) 35%,
    rgba(255,255,255,.40) 50%,
    rgba(255,255,255,.0) 65%,
    transparent 100%);
  transform:skewX(-18deg);
  opacity:1;
  pointer-events:none;
  z-index:3;
  transition:left .55s cubic-bezier(.32,.72,0,1);
  animation:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:hover .cc-card-shine{
  left:130%;
}

/* Mobile / touch — no mousemove, no tilt. Keep a clean lift + a
   one-shot sheen on :active so tapping still gives feedback.
   Same phase2 prefix so it beats the desktop override. */
@media (max-width:720px), (hover:none){
  html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img{
    transform:none !important;
    animation:none !important;
  }
  html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:hover,
  html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:active{
    transform:translateY(-3px) !important;
    box-shadow:
      0 14px 30px rgba(0,0,0,.55),
      0 0 18px color-mix(in srgb, var(--case-glow, #3B82F6) 25%, transparent) !important;
  }
  html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:active .cc-card-shine{
    left:130% !important;
  }
}
@media (max-width:480px){
  html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img{
    max-width:none;
  }
}

/* ============================================================
   Pack tile name + price cleanup
   The pack JPG already has the name baked into the artwork
   (BACK ALLEY, SUBWAY STASH, etc.), so the .cc-name caption
   in the bottom overlay was a duplicate. Drop it. Also strip
   the dark pill + blue border around .cc-price-row so the
   price reads as smooth text on the gradient. Same for the
   home-page .pd-pack-tile-title (also a duplicate of the
   art-baked name). All scoped with the phase2+cases prefix
   so they actually win the cascade.
============================================================ */
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-name{
  display:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-card-foot{
  /* Center the lone price now that the name is gone — was
     justify-content:space-between expecting two children. */
  justify-content:center !important;
  /* Lighter gradient so the price floats over the art instead of
     sitting on a heavy black bar. */
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,.30) 55%,
    rgba(0,0,0,.55) 100%) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-price-row{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  font-size:17px !important;
  font-weight:900 !important;
  color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.8) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-price-row .bc-glyph{
  /* Keep the glyph readable without the chip backdrop. */
  filter:drop-shadow(0 0 4px rgba(0,0,0,.6))
         drop-shadow(0 0 8px rgba(34,211,238,.5)) !important;
}

/* Home page — also drop the duplicate caption below the pack art.
   The pack JPG already names itself. */
.pd-pack-tile-title{ display:none !important; }
html[data-theme="phase2"] .pd-pack-tile-title{ display:none !important; }

/* ===================================================================
   CREATE PACK BATTLE — visual redesign (2026-05-29)
   Bold skin pass over the same DOM/layout (every id + class is load-
   bearing for app.js, so nothing structural moves). Replaces the three
   flat matte-navy rectangles with glassy, top-lit gradient panels that
   have real depth (inset highlight + drop shadow), glowing blue active
   states on the modifier cards + mode pills, a hero green CTA, and
   accent-tab section labels. Appended at EOF so it wins the cascade
   over the earlier flat pass (identical 0,3,1 specificity, later
   position) without editing those rules.
   =================================================================== */

/* ---- Header / title: more presence ---- */
html[data-theme="phase2"] section[data-route="cases"] .cs-create-view .cs-create-head{
  margin-bottom:22px !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-create-view .cs-cb-title{
  font-size:25px !important;
  font-weight:900 !important;
  letter-spacing:-.015em !important;
  color:#ffffff !important;
  text-shadow:0 2px 18px rgba(66,153,225,.18) !important;
}

/* ---- FLAT layout (2026-05-31): packdraw's create page floats its cells
   directly on the page — no glassy wrapper panels, no gradients, no big
   ambient shadows (that depth read as "sci-fi 3D"). Mode + Modifiers get
   NO container; only the Packs tray keeps a subtle flat well so the
   portrait cards read as a group. "Plain professional", like packdraw. ---- */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggles,
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-modes-row{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggles{ gap:10px !important; }
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-modes-row{ gap:10px !important; }
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip-wrap{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:14px !important;
  box-shadow:none !important;
  padding:14px !important;
  margin:0 !important;
}

/* ---- Accent-tab section labels (Packs / Modifiers / Mode) ----
   Content stays from the earlier ::before rules; here we promote them
   from a tiny muted micro-cap to a brighter labelled tab with a 3px
   color bar. Per-section accent gives the page identity without icons. */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip-wrap::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggles::before,
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-modes-row::before{
  top:15px !important; left:18px !important;
  font-size:14px !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
  color:#d6dde3 !important;
  padding-left:9px !important;
  line-height:12px !important;
  border-left:3px solid var(--pd-blue-accent) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggles::before{
  border-left-color:#a78bfa !important; /* modifiers = violet accent */
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-modes-row::before{
  border-left-color:var(--pd-blue-accent) !important;  /* mode = blue, links to the blue CTA */
}

/* ---- Modifier toggle cells: flat matte; on = subtle blue border + blue
   switch only (no cell tint, no gradient, no shadow). Like packdraw. ---- */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:12px !important;
  padding:14px 16px !important;
  box-shadow:none !important;
  transition:border-color .16s ease, background .16s ease !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle:hover{
  border-color:var(--pd-line-hover) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle:has(input:checked){
  background:var(--pd-bg-2) !important;
  border-color:rgba(87,171,248,.40) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle:has(input:checked) .cs-cb-toggle-name{
  color:var(--pd-text) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle:has(input:checked) .cs-cb-toggle-sub{
  color:var(--pd-text-mute) !important;
}
/* Switch on — flat blue (no halo). */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle input:checked ~ .cs-cb-switch,
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle input:checked + .cs-cb-switch{
  background:var(--pd-blue) !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* ---- Mode cards: flat matte; active = blue tint + border (no gradient/glow) ---- */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode{
  height:auto !important;
  padding:16px 10px !important;
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  transition:border-color .16s ease, background .16s ease !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode:hover{
  border-color:var(--pd-line-hover) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode.active{
  background:rgba(66,153,225,.12) !important;
  border-color:var(--pd-blue) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}

/* ---- Create CTA — flat site-blue (matches the Sign In / Deposit primary
   buttons: same --pd-blue, Urbanist, no gradient, no glow). Disabled = muted
   matte slab. ---- */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-create{
  height:50px !important;
  padding:0 24px !important;
  border-radius:10px !important;
  font-family:'Urbanist','Inter',sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.04em !important;
  text-transform:none !important;
  background:var(--pd-blue) !important;
  background-image:none !important;
  color:#fff !important;
  box-shadow:none !important;
  transition:background .15s ease, filter .15s ease !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-create:hover:not(:disabled){
  background:var(--pd-blue) !important;
  background-image:none !important;
  filter:brightness(1.08) !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-create:disabled{
  background:var(--pd-surface) !important;
  background-image:none !important;
  color:var(--pd-text-mute) !important;
  box-shadow:none !important;
}

/* ---- Add Pack tile — flat dashed cell (no gradient/glow) ---- */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-tile{
  background:var(--pd-bg-1) !important;
  border:1px dashed var(--pd-line-hover) !important;
  border-radius:12px !important;
  transition:border-color .18s ease, color .18s ease !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-tile:hover{
  border-color:var(--pd-blue) !important;
  color:var(--pd-text) !important;
  background:var(--pd-bg-1) !important;
}
/* ---- Empty PACKS state: full-width inviting band (not a lone tile in a
   void). Gated with :has(.cs-cb-tile) on the wrap, NOT :empty — the strip
   holds an HTML comment + whitespace so :empty never matches. When no real
   pack tile is present yet, the Add tile spans the panel and a short prompt
   sits under its label; once a .cs-cb-tile is injected the wrap matches
   :has() and the tile reverts to its compact end-of-row size. ---- */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip-wrap:not(:has(.cs-cb-tile)) .cs-cb-strip{
  display:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip-wrap:not(:has(.cs-cb-tile)) .cs-cb-add-tile{
  width:100% !important;
  min-height:200px !important;
  height:auto !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-strip-wrap:not(:has(.cs-cb-tile)) .cs-cb-add-label::after{
  content:'Pick 1 to 5 packs to build your battle';
  display:block;
  margin-top:6px;
  font-family:'Urbanist',sans-serif;
  font-size:14px; font-weight:500;
  letter-spacing:0;
  color:var(--pd-text-mute);
  text-transform:none;
}

/* ---- Borrow slider panel — flat matte ---- */
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-borrow-panel{
  background:var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-borrow-slider{
  accent-color:var(--pd-blue-accent) !important;
}

/* ---- Reduce Motion: drop the hover lifts only (keep instant color
   state changes — those aren't animations). Scoped to these elements,
   never a universal selector. ---- */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle,
  html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode,
  html[data-theme="phase2"] section[data-route="cases"] .cs-cb-create,
  html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-tile{
    transition:background .01s, border-color .01s, box-shadow .01s !important;
  }
  html[data-theme="phase2"] section[data-route="cases"] .cs-cb-toggle:hover,
  html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode:hover,
  html[data-theme="phase2"] section[data-route="cases"] .cs-cb-mode.active,
  html[data-theme="phase2"] section[data-route="cases"] .cs-cb-create:hover:not(:disabled),
  html[data-theme="phase2"] section[data-route="cases"] .cs-cb-add-tile:hover{
    transform:none !important;
  }
}

/* ============================================================
   PREMIUM ATMOSPHERE PASS (2026-05-29)
   The site already has rich per-component detail (reveal tiles, 3D
   catalog tilt, glassy create panels). What read flatter than
   packdraw / unbloxed / bloxflip was AMBIENT DEPTH: a lit backdrop,
   surfaces that look lit instead of matte, and a consistent richer
   hover lift on the hero surfaces. Additive + at EOF so it wins the
   cascade; reduced-motion safe; never a universal selector.
============================================================ */

/* 1 — Ambient backdrop. BASE (all routes): a cohesive dark-grey gradient that
   matches the matte chrome (replaced the misty-forest photo, which read as
   off-brand against the dark UI). Sits behind ALL content (z-index:-1), fixed
   (composited — no scroll repaint), never intercepts clicks. A faint top sheen
   gives depth; the column darkens toward the footer so long pages don't read
   flat. Tints stay in the site's cool-charcoal family (near --pd-bg-0). */
html[data-theme="phase2"] body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1300px 820px at 50% -12%, rgba(255,255,255,.035), transparent 60%),
    linear-gradient(176deg, #242b31 0%, #1b2127 42%, #13171b 100%);
}

/* 1b — SCENE backdrop. Home + Packs + Pack-battles (body[data-bg-scene="1"], set
   by go() in app.js) get a SUBTLY richer version of the same grey gradient — a
   faint cool top glow + a soft bottom vignette for depth — so the showcase
   surfaces feel a touch more alive without the off-brand forest photo. Still
   pure grey/charcoal, no image, no blur (kept iOS-smooth on the fixed pseudo). */
html[data-theme="phase2"] body[data-bg-scene="1"]::before{
  inset:0;
  filter:none;
  background:
    radial-gradient(1200px 760px at 50% -8%,  rgba(150,172,205,.085), transparent 58%),
    radial-gradient(1500px 1040px at 50% 122%, rgba(0,0,0,.34), transparent 72%),
    linear-gradient(176deg, #262d35 0%, #1b2228 44%, #11151a 100%);
}

/* 2 — Lit surfaces. Flat panels get a hairline top-highlight + soft drop
   shadow, so they read as panels under a light instead of flat stickers. */
html[data-theme="phase2"] .pd-card,
html[data-theme="phase2"] .pd-challenge-card,
html[data-theme="phase2"] .pd-battle-row{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    var(--pd-shadow-card) !important;
}

/* 3 — Hero challenge cards: richer lift + let the art breathe on hover.
   (They already carry the per-variant radial glow; this adds depth.) */
html[data-theme="phase2"] .pd-challenge-card{
  transition:transform .24s var(--pd-ease-spring),
             box-shadow .24s var(--pd-ease-smooth),
             border-color .18s var(--pd-ease-smooth) !important;
}
html[data-theme="phase2"] .pd-challenge-card:hover{
  transform:translateY(-4px) !important;
  border-color:var(--pd-line-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    var(--pd-shadow-lifted) !important;
}
html[data-theme="phase2"] .pd-challenge-art,
html[data-theme="phase2"] .pd-challenge-art-img{
  transition:transform .3s var(--pd-ease-spring) !important;
}
html[data-theme="phase2"] .pd-challenge-card:hover .pd-challenge-art{
  transform:translateY(-50%) scale(1.045) !important;
}
html[data-theme="phase2"] .pd-challenge-card:hover .pd-challenge-art-img{
  transform:scale(1.045) !important;
}

/* 4 — Home Battle Highlights: real hover lift + lit gradient so the
   section matches the polish of the redesigned Battles-tab rows. */
html[data-theme="phase2"] .pd-battle-row{
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 58%),
    #1c1f29 !important;
}
html[data-theme="phase2"] .pd-battle-row:hover{
  transform:translateY(-3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    var(--pd-shadow-lifted) !important;
}
/* Home-highlight pack thumbs: drop the 1px frame so they match the clean
   borderless cards on the Battles tab (and the no-border-on-art rule). */
html[data-theme="phase2"] .pd-battle-pack-img{
  border:none !important;
  border-radius:8px !important;
}

/* 5 — Game tiles: ground them with a soft base shadow (they already lift
   + glow on hover), so the row reads as a set of lit objects. */
html[data-theme="phase2"] .pd-game-tile{
  box-shadow:var(--pd-shadow-card);
}

/* 6 — Top-bar Deposit CTA: a subtle brand glow so "the money action" is
   obviously the hero button, the way it reads on the reference sites. */
html[data-theme="phase2"] .btn-deposit{
  box-shadow:
    0 6px 18px -6px var(--pd-blue-glow),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}
html[data-theme="phase2"] .btn-deposit:hover{
  box-shadow:
    0 9px 24px -6px var(--pd-blue-glow),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* Reduced motion: keep the lit look + shadows, drop the hover transforms. */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] .pd-challenge-card:hover,
  html[data-theme="phase2"] .pd-battle-row:hover,
  html[data-theme="phase2"] .pd-challenge-card:hover .pd-challenge-art,
  html[data-theme="phase2"] .pd-challenge-card:hover .pd-challenge-art-img{
    transform:none !important;
  }
}

/* ============================================================
   SOFT DISCORD CHAT (impeccable redesign, 2026-05-29)
   Replaces the glowy "AI slop" pass (tinted boxes, halo circles,
   glowing send). Calm + familiar, the way Discord earns trust: a
   faintly-cooler neutral panel, circular avatars, full-bleed row
   hover, a soft rounded composer, a quiet empty state, and motion
   that conveys STATE only (row slide-in on a new message, fade+slide
   on open/close). Restrained colour: blue is for actions/state, never
   glow decoration. EOF so it wins the cascade over the matte rework.
============================================================ */

/* Surface — a calm, slightly cooler neutral than the warm content bg
   (a sidebar should be its own quiet neutral layer). Flat; the only
   edge is a hairline. No gradient, no inner glow. */
html[data-theme="phase2"] aside.chat{
  /* translucent glass so the page background image shows through the chat */
  background: var(--pd-glass-panel) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
  border-right: 1px solid var(--pd-line) !important;
  box-shadow: none !important;
  transition:
    transform .22s cubic-bezier(.22,1,.36,1),
    opacity .2s cubic-bezier(.22,1,.36,1);
}
/* Open / close motion — soft fade + short slide. JS toggles these
   classes around the display flip so the panel eases instead of
   snapping. Transform + opacity only (never layout). */
html[data-theme="phase2"] aside.chat.chat-closing,
html[data-theme="phase2"] aside.chat.chat-opening{
  opacity: 0;
  transform: translateX(-14px);
}
html[data-theme="phase2"] aside.chat.chat-closing{ pointer-events: none; }

/* Header — quiet bar, hairline base, no glow line. */
html[data-theme="phase2"] .chat-head{
  background: transparent !important;
  border-bottom: 1px solid var(--pd-line) !important;
  box-shadow: none !important;
  padding: 11px 10px 10px 12px !important;
}
/* Icon tabs — ghosted; active is a soft neutral fill (no blue glow). */
html[data-theme="phase2"] .chat-icon-tab{
  background: transparent !important;
  border: 0 !important;
  color: var(--pd-text-mute) !important;
  border-radius: 8px !important;
}
html[data-theme="phase2"] .chat-icon-tab:hover{
  background: rgba(255,255,255,.05) !important;
  color: var(--pd-text) !important;
}
html[data-theme="phase2"] .chat-icon-tab.active{
  background: rgba(255,255,255,.09) !important;
  color: var(--pd-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Body — full-bleed rows (no side padding here; the rows own it so the
   hover highlight runs edge to edge, Discord-style). */
html[data-theme="phase2"] .chat-body{
  padding: 8px 0 10px !important;
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Anchor messages to the bottom (Discord-style) so a quiet chat fills
   toward the composer instead of leaving a void below the last message.
   margin-top:auto collapses to 0 once the list overflows, so scrolled-up
   history is never clipped. */
html[data-theme="phase2"] .chat-body > :first-child{ margin-top: auto !important; }

/* Message row — full-width hover highlight, calm type, soft slide-in. */
html[data-theme="phase2"] .cmsg{
  padding: 9px 16px !important;
  gap: 13px !important;
  border-radius: 0 !important;
  align-items: flex-start;
  transition: background .12s ease;
  animation: chatMsgIn .22s cubic-bezier(.22,1,.36,1) both;
}
html[data-theme="phase2"] .cmsg:hover{
  background: rgba(255,255,255,.035) !important;
}
@keyframes chatMsgIn{
  from{ opacity: 0; transform: translateY(7px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* Avatar — clean circle, no ring/glow; the image is the token. The
   fallback is a calm neutral, not a saturated gradient. */
html[data-theme="phase2"] .cmsg-avatar{
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="phase2"] .cmsg-avatar:not(.cmsg-avatar-img){
  background: #3a4150 !important;
  color: #e6e9ee !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}
html[data-theme="phase2"] .cmsg-avatar-img,
html[data-theme="phase2"] .cmsg-avatar-img img{ border-radius: 50% !important; }

/* Name — Discord weight; role colour tints the name calmly (no neon). */
html[data-theme="phase2"] .cmsg-name{
  font-family:'Urbanist',sans-serif !important;   /* was Inter (base rule); match site text font */
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  filter: saturate(.85) !important;
}
html[data-theme="phase2"] .cmsg-text{
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  /* Brighter + slightly heavier so chat is easy to read against the
     glass panel (was #c4c9d1 @ 400 — too grey). */
  color: #e7ebf2 !important;
  font-weight: 500 !important;
}

/* Rank — soft inline role tag (muted bg + role-tinted text), not a chip. */
html[data-theme="phase2"] .cmsg-rank{
  font-family:'Urbanist',sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 0 !important;
}
html[data-theme="phase2"] .rank-admin{ color:#f0a8a8 !important; background:rgba(240,113,113,.14) !important; }
html[data-theme="phase2"] .rank-mod  { color:#a4c8fb !important; background:rgba(96,165,250,.14)  !important; }
html[data-theme="phase2"] .rank-vip  { color:#f2dc94 !important; background:rgba(253,224,71,.14)  !important; }
html[data-theme="phase2"] .rank-dev  { color:#d0c2fb !important; background:rgba(196,181,253,.14) !important; }
html[data-theme="phase2"] .rank-bot  { color:var(--pd-text-mute) !important; background:rgba(255,255,255,.06) !important; }

/* Empty / signed-out — a quiet, friendly line, NOT a glow card. The
   default ::before dot (the "glowing circle") is dropped. */
html[data-theme="phase2"] .cmsg-system{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 18px 18px !important;
  margin: 2px 0 !important;
  color: var(--pd-text-mute) !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}
html[data-theme="phase2"] .cmsg-system::before{ content: none !important; display: none !important; }

/* Composer — soft rounded bar, calm. No focus glow ring. */
html[data-theme="phase2"] .chat-input{
  background: transparent !important;
  border-top: 1px solid var(--pd-line) !important;
  padding: 12px 12px !important;
  gap: 8px !important;
}
html[data-theme="phase2"] .chat-input input{
  background: var(--pd-bg-2) !important;
  border: 1px solid var(--pd-line) !important;
  border-radius: 12px !important;
  padding: 13px 14px !important;
  font-family:'Urbanist',sans-serif !important;
  font-size: 14.5px !important;
  color: var(--pd-text) !important;
}
html[data-theme="phase2"] .chat-input input::placeholder{ color: var(--pd-text-mute) !important; }
html[data-theme="phase2"] .chat-input input:focus{
  border-color: var(--pd-line-hover) !important;
  background: var(--pd-surface) !important;
  box-shadow: none !important;
}
/* Send — quiet icon button; blue is the hover state, not a resting halo. */
html[data-theme="phase2"] .btn-send{
  width: 46px !important; height: 46px !important;
  border-radius: 12px !important;
  background: var(--pd-bg-2) !important;
  background-image: none !important;
  border: 1px solid var(--pd-line) !important;
  color: var(--pd-text-mute) !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
html[data-theme="phase2"] .btn-send:hover{
  background: var(--pd-blue) !important;
  border-color: var(--pd-blue) !important;
  color: #ffffff !important;
  filter: none !important;
  box-shadow: none !important;
}
html[data-theme="phase2"] .btn-send:active{ transform: scale(.94); }

/* Footer — calm. Online dot small + soft (no radar glow). */
html[data-theme="phase2"] .chat-footer-bar{
  background: transparent !important;
  border-top: 1px solid var(--pd-line) !important;
}
html[data-theme="phase2"] .chat-online-dot,
html[data-theme="phase2"] .chat-foot-online .chat-online-dot{
  width: 7px !important; height: 7px !important;
  background: #43b581 !important;
  box-shadow: none !important;
}

/* Undo the earlier Sign In glow — keep the top bar restrained (Deposit
   stays the single subtly-lit primary action). */
html[data-theme="phase2"] #sign-in-btn{ box-shadow: none !important; }

/* Reduced motion: no row slide-in, no open/close transform. */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] .cmsg{ animation: none !important; }
  html[data-theme="phase2"] aside.chat{ transition: none !important; }
  html[data-theme="phase2"] aside.chat.chat-closing,
  html[data-theme="phase2"] aside.chat.chat-opening{ opacity: 1; transform: none; }
}

/* ============================================================
   MODAL UNIFICATION — appended last so it wins over the many
   per-pass / duplicate modal rules scattered above. Brings EVERY
   popup modal to the premium auth look: Manrope type, a calm
   no-rotate close, and a consistent 20px card. Covers both the
   `.modal` family and the `.modal-fair` family (fair / limits /
   register / age-gate / user-popup), which lacks the `.modal` class.
   ============================================================ */
html[data-theme="phase2"] .modal-backdrop .modal,
html[data-theme="phase2"] .modal-backdrop .modal-fair{
  border-radius:20px !important;
  font-family:'Manrope',sans-serif !important;
}
html[data-theme="phase2"] .modal-backdrop .modal-title,
html[data-theme="phase2"] .modal-backdrop .modal-sub,
html[data-theme="phase2"] .modal-backdrop label,
html[data-theme="phase2"] .modal-backdrop p,
html[data-theme="phase2"] .modal-backdrop li,
html[data-theme="phase2"] .modal-backdrop button,
html[data-theme="phase2"] .modal-backdrop input,
html[data-theme="phase2"] .modal-backdrop textarea,
html[data-theme="phase2"] .modal-backdrop select{
  font-family:'Manrope',sans-serif !important;
}
/* Keep monospace where it carries meaning (seed hashes, codes, phrases). */
html[data-theme="phase2"] .modal-backdrop code,
html[data-theme="phase2"] .modal-backdrop pre,
html[data-theme="phase2"] .modal-backdrop .mono,
html[data-theme="phase2"] .modal-backdrop [class*="seed"],
html[data-theme="phase2"] .modal-backdrop [class*="hash"],
html[data-theme="phase2"] .modal-backdrop [class*="phrase"]{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
}
/* Calm minimal close on every modal — transparent, crisp line-X drawn by the
   pseudo-elements, no rotate, no transition. Reaches the .modal-fair family
   that the `.modal .modal-close` rule above misses. */
html[data-theme="phase2"] .modal-backdrop .modal-close{
  background:transparent !important;
  border:0 !important;
  border-radius:8px !important;
  color:rgba(255,255,255,.45) !important;
  font-size:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transition:none !important;
  transform:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
html[data-theme="phase2"] .modal-backdrop .modal-close::before,
html[data-theme="phase2"] .modal-backdrop .modal-close::after{
  content:"" !important;
  position:absolute !important;
  width:14px !important;
  height:1.6px !important;
  border-radius:1px !important;
  background:currentColor !important;
}
html[data-theme="phase2"] .modal-backdrop .modal-close::before{ transform:rotate(45deg) !important; }
html[data-theme="phase2"] .modal-backdrop .modal-close::after{ transform:rotate(-45deg) !important; }
html[data-theme="phase2"] .modal-backdrop .modal-close:hover{
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  transform:none !important;
}
html[data-theme="phase2"] .modal-backdrop .modal-close:active{ transform:none !important; }

/* ============================================================
   PACK CARD POLISH — 2026-05-31
   Two requested fixes: (1) hovering a pack zoom-cropped its JPG;
   (2) the price read as a faint afterthought. This block is
   last-in-source with a +1-class specificity bump (.has-card-img)
   over the winning rules above (23390 image-zoom, 40052 card-hover,
   40084 price) so it wins deterministically without touching that
   tangle of stacked overrides.
============================================================ */
/* (1) No zoom — the pack JPG holds its frame at rest AND on hover, so
   nothing ever crops. The whole card simply lifts. */
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-card-img{
  transform: none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:hover .cc-card-img{
  transform: none !important;
  filter: saturate(1.05) brightness(1.04) !important;   /* subtle life, no scale */
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:hover{
  transform: translateY(-6px) !important;               /* calm lift, no zoom */
  animation: none !important;
}
/* (2) Price: each pack JPG already has its name baked in, so hide the
   duplicate HTML name and present the price as confident, refined type on
   a clean bottom scrim — no pill, no glow, no chip. */
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-name{
  display: none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-card-foot{
  padding: 26px 12px 14px !important;
  background: linear-gradient(to top, rgba(4,7,15,.94) 0%, rgba(4,7,15,.60) 48%, rgba(4,7,15,0) 100%) !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-price-row{
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  font-family: 'Inter','SF Pro Display',sans-serif !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  color: #fff !important;
  letter-spacing: .005em !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.9) !important;
  width: max-content !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-price-row .bc-glyph{
  width: 18px !important; height: 18px !important;
  filter: none !important;                              /* drop the cyan glow */
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:hover{
    transform: translateY(-2px) !important;
  }
}

/* ============================================================
   PACK GRID — POSTER-ABOVE / PRICE-BELOW  (2026-06-01)
   Two requests:
   (1) Some pack JPGs showed cropped tops. The card box was
       aspect-ratio 3/4 (0.75) but the art is 2/3 (0.667 — taller),
       so object-fit:cover sliced the top, exactly where the baked-in
       pack name sits. Fix: the poster now lives in its own 2/3 wrap
       that matches the 1024×1536 art, so the WHOLE image shows.
   (2) Price moved OUT of the bottom overlay scrim onto its own line
       BELOW the card (packdraw-style), with breathing room, and the
       grid rows are spaced further apart to seat it.
   New DOM: .case-card > .cc-card-imgwrap(img+shine+aura) + .cc-card-foot(price).
   Scoped phase2 + cases-route + .has-card-img and placed last so it
   wins the stacked-override tangle without editing those blocks.
============================================================ */
/* Roomier grid so each card's price gets clear air below it. */
html[data-theme="phase2"] section[data-route="cases"] .cases-row{
  gap: 26px 16px !important;
}
/* Card becomes a frameless column: poster on top, price beneath. No
   box / clip / shadow on the card itself — the imgwrap carries the
   frame + shadow so the price text floats free below it. */
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img{
  aspect-ratio: auto !important;
  height: auto !important;
  max-width: none !important;
  width: 100% !important;
  justify-self: stretch !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
/* The poster: a 2/3 frame matching the art exactly, so object-fit:cover
   fills it with zero crop. Carries the rounded frame + drop shadow that
   used to live on the card; clips the shine sweep to the image. */
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-card-imgwrap{
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  transition: box-shadow .35s cubic-bezier(.22,1,.36,1);
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-card-img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: none !important;
  filter: none !important;
  border-radius: inherit !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:hover .cc-card-img{
  filter: saturate(1.05) brightness(1.05) !important;
}
/* Price: its own centred line BELOW the poster, with space above. No
   scrim, no chip — clean type on the page. */
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-card-foot{
  position: static !important;
  inset: auto !important;
  left: auto !important; right: auto !important; bottom: auto !important;
  background: none !important;
  padding: 0 !important;
  margin-top: 12px !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: auto !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-name{
  display: none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-price-row{
  width: max-content !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 7px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  font-family: 'Inter','SF Pro Display',sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .005em !important;
  text-shadow: none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-price-row .bc-glyph{
  width: 17px !important; height: 17px !important;
  filter: none !important;
}
/* Hover: clean lift; the glow now hugs the POSTER (imgwrap), not the
   taller card+price bounding box. */
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:hover{
  transform: translateY(-6px) !important;
  box-shadow: none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:hover .cc-card-imgwrap{
  box-shadow:
    0 22px 48px rgba(0,0,0,.6),
    0 0 30px color-mix(in srgb, var(--case-glow, #3B82F6) 35%, transparent) !important;
}
@media (max-width:720px), (hover:none){
  html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:hover,
  html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:active{
    transform: translateY(-3px) !important;
  }
  html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:hover .cc-card-imgwrap,
  html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:active .cc-card-imgwrap{
    box-shadow:
      0 14px 30px rgba(0,0,0,.55),
      0 0 18px color-mix(in srgb, var(--case-glow, #3B82F6) 25%, transparent) !important;
  }
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img:hover{
    transform: translateY(-2px) !important;
  }
}

/* ============================================================
   PACK PICKER MODAL — POLISH + POSTER/PRICE PARITY  (2026-06-01)
   Brings the "Choose Packs" battle picker in line with the catalog:
   (1) tile art was boxed at 3/4 but the posters are 2/3, so cover
       sliced the baked-in title off the top — same crop bug as the
       catalog. Posters now sit in a 2/3 frame: the whole art shows.
   (2) price moved off its filled footer bar onto a clean centered
       line below the poster, matching the catalog.
   (3) modal chrome: centered header, roomier grid + breathing gap,
       thin rounded scrollbar, calmer tile hover, refined DONE button.
   Last-in-source so it wins over the 31914 + 36857 picker blocks.
============================================================ */
html[data-theme="phase2"] .modal-cs-picker{
  max-width: 940px !important;
  padding: 24px 26px 20px !important;
  border-radius: 18px !important;
}
/* Centered, confident header. */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-head{
  text-align: center !important;
  margin-bottom: 18px !important;
}
html[data-theme="phase2"] .modal-cs-picker .modal-title{
  font-size: 20px !important;
  letter-spacing: .01em !important;
}
html[data-theme="phase2"] .modal-cs-picker .modal-sub{
  color: rgba(255,255,255,.55) !important;
  margin-top: 5px !important;
}
/* Roomier grid + a thin, rounded scrollbar instead of the chunky default. */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-grid{
  grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)) !important;
  gap: 20px 14px !important;
  max-height: 62vh !important;
  padding: 4px 8px 6px 4px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-grid::-webkit-scrollbar{ width: 8px; }
html[data-theme="phase2"] .modal-cs-picker .cs-picker-grid::-webkit-scrollbar-track{ background: transparent; }
html[data-theme="phase2"] .modal-cs-picker .cs-picker-grid::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-grid::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.30);
  background-clip: padding-box;
}
/* Poster frame — 2/3 to match the 1024×1536 art, rounded, no crop. */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-thumb{
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-thumb img{
  object-fit: cover !important;
  border-radius: inherit !important;
}
/* Price — clean centered text below the poster (no footer bar). */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-price{
  background: none !important;
  border: 0 !important;
  border-top: 0 !important;
  padding: 0 !important;
  margin-top: 10px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-variant-numeric: tabular-nums !important;
  gap: 6px !important;
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-price .bc-glyph{
  width: 14px !important; height: 14px !important;
}
/* Calmer hover — keep the lift, drop the blue halo (matches the
   restrained catalog hover). */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile:hover{
  transform: translateY(-4px) !important;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.55)) !important;
}
/* Selected ring hugs the rounded poster. */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile.is-selected .cs-picker-tile-thumb{
  box-shadow: 0 0 0 2px var(--pd-blue-accent, #57abf8) inset !important;
}
/* Qty step pill — keep it over the lower image, clear of the price text. */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-step{
  bottom: 46px !important;
}
/* DONE — a touch more presence. */
html[data-theme="phase2"] .modal-cs-picker .cs-picker-done{
  padding: 11px 32px !important;
  border-radius: 10px !important;
  letter-spacing: .04em !important;
}
/* Mobile — keep a 2-up grid (matches the catalog) instead of a single
   giant column; trim modal padding so the posters aren't oversized. */
@media (max-width:560px){
  html[data-theme="phase2"] .modal-cs-picker{
    padding: 18px 14px 16px !important;
  }
  html[data-theme="phase2"] .modal-cs-picker .cs-picker-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 16px 10px !important;
  }
}

/* ============================================================
   MOBILE GAME LAYOUTS — fit + playability  (2026-06-01)
   The phase2 redesign re-declared each game's desktop shell grid
   (a 300px control column + 1fr play area) AFTER the old mobile
   breakpoints, clobbering them — so the games never stacked on a
   phone. The fixed 300px column then eats the width and the play
   area (crash graph, blackjack table, slot reels, dice stage)
   collapses to ~0 and is clipped: unplayable. This block is last in
   source, !important, phase2-scoped — it forces every game shell to a
   single column on small screens with the PLAY AREA on top and the
   controls beneath, and lets intrinsic-width stages shrink to fit.
============================================================ */
@media (max-width: 760px){
  /* Simple 2-col grids (no named areas) → one column. */
  html[data-theme="phase2"] .crash-layout,
  html[data-theme="phase2"] .bj-shell-grid,
  html[data-theme="phase2"] .slots-shell-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 14px !important;
  }
  /* Play area on top, controls below. */
  html[data-theme="phase2"] .crash-layout > .crash-right,
  html[data-theme="phase2"] .bj-shell-grid > .bj-table,
  html[data-theme="phase2"] .slots-shell-grid > .slots-machine{ order: -1 !important; }
  html[data-theme="phase2"] .crash-layout > .crash-left,
  html[data-theme="phase2"] .bj-shell-grid > .bj-controls,
  html[data-theme="phase2"] .slots-shell-grid > .slots-controls{ order: 2 !important; }
  /* Let every game grid item shrink instead of forcing min-content overflow. */
  html[data-theme="phase2"] .crash-layout > *,
  html[data-theme="phase2"] .bj-shell-grid > *,
  html[data-theme="phase2"] .slots-shell-grid > *,
  html[data-theme="phase2"] .route[data-route="dice"] .game-shell > *{
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html[data-theme="phase2"] .crash-layout > .crash-right,
  html[data-theme="phase2"] #crash-board{ width: 100% !important; }
  /* DICE — named-area grid → single column, stage on top. */
  html[data-theme="phase2"] .route[data-route="dice"] .game-shell{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "header"
      "stage"
      "controls"
      "stats"
      "popup" !important;
  }
  html[data-theme="phase2"] .route[data-route="dice"] .dice-stage{
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* Provably-Fair modal action row: "Save" + "Rotate Server Seed" flexed
   side-by-side squeezes the long label until it clips. On phones, stack
   them full-width so every label fits. */
@media (max-width: 560px){
  html[data-theme="phase2"] .modal .fair-actions{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  html[data-theme="phase2"] .modal .fair-actions > .btn{
    width: 100% !important;
    white-space: normal !important;
  }
}

/* ============================================================
   NO ACCIDENTAL TEXT / IMAGE SELECTION  (2026-06-01)
   Click-dragging across the UI was highlighting labels, prices and
   item images (the blue selection band) — reads unprofessional on an
   app-like surface. Disable selection globally, kill native image
   drag-ghosting + the mobile tap-highlight box, then re-enable real
   selection ONLY where copying is genuinely useful: form fields, chat
   messages, and the legal pages. (Copy buttons still cover provably-
   fair seeds/hashes regardless of selection.)
============================================================ */
html, body{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
img{ -webkit-user-drag: none; }
/* Re-enable selection where users actually copy text. */
input, textarea, select, [contenteditable], [contenteditable] *,
.cmsg-text, .cmsg-name, .cmsg-system,
section[data-route="tos"], section[data-route="privacy"], section[data-route="responsible"],
.allow-select, .allow-select *{
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
/* Themed selection highlight where selection is allowed. */
::selection{ background: rgba(59,130,246,.40); color: #fff; }
::-moz-selection{ background: rgba(59,130,246,.40); color: #fff; }

/* ============================================================
   PACK RISK — meter on each card + filter slider  (2026-06-01)
   bloxflip-style volatility readout: a small colored bar under each
   pack's price (green=low → red=extreme; fill width = how volatile),
   plus a Risk slider in the catalog toolbar that filters the grid by
   tier. Risk is computed per pack from its payout spread (in app.js).
============================================================ */
/* Toolbar gains a second control — let it wrap cleanly. */
html[data-theme="phase2"] section[data-route="cases"] .cs-sort-bar{
  flex-wrap: wrap;
  row-gap: 10px;
}
/* Stack price + risk meter, centered under the poster. */
html[data-theme="phase2"] section[data-route="cases"] .case-card.has-card-img .cc-card-foot{
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
}
.cc-risk{
  width: 46px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  margin: 0 auto;
}
.cc-risk-fill{ display: block; height: 100%; border-radius: 2px; }

/* Risk filter slider in the catalog toolbar. */
html[data-theme="phase2"] .cs-risk-filter{
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: 6px;
}
html[data-theme="phase2"] .cs-risk-filter .cs-risk-cap{ margin: 0; }
/* Flat neutral rail with a tier-tinted fill that stops under the thumb.
   The previous build painted a fixed green -> blue -> yellow -> orange ->
   red rainbow across the whole rail. That had two problems: the rail has
   six stops (All + five tiers) but the ramp only five colours, so the
   colour under the thumb disagreed with the tier the thumb was tinted to
   at every position except Extreme; and because the ramp never moved, the
   control looked identical at "All" and at "Extreme" and so never showed
   its own value. Now the fill is the value.
   --cs-risk-pos (0..1) and --cs-risk-tint come from setRiskFilter() in
   app.js; the 15px / 7.5px terms are the thumb width and half of it, which
   is the travel a native range input insets at each end, so the fill edge
   tracks the thumb centre at any rail width without measuring in JS. */
.cs-risk-slider{
  -webkit-appearance: none; appearance: none;
  width: 118px; height: 5px; border-radius: 3px; cursor: pointer;
  --cs-risk-pos: 0;
  --cs-risk-tint: #9fb0c8;
  --cs-risk-edge: calc(7.5px + var(--cs-risk-pos) * (100% - 15px));
  background: linear-gradient(90deg,
    var(--cs-risk-tint) 0 var(--cs-risk-edge),
    rgba(255,255,255,.10) var(--cs-risk-edge) 100%);
  outline: none;
}
/* Firefox paints its own track over the element background unless the
   pseudo-elements are cleared, which would hide the fill above. */
.cs-risk-slider::-moz-range-track{ background: transparent; border: 0; height: 5px; }
.cs-risk-slider::-moz-range-progress{ background: transparent; border: 0; height: 5px; }
.cs-risk-slider:focus-visible{ outline: 2px solid rgba(255,255,255,.32); outline-offset: 4px; }
.cs-risk-slider::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--cs-risk-thumb, #9fb0c8);
  border: 2px solid #0b0f1a;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  cursor: pointer;
}
.cs-risk-slider::-moz-range-thumb{
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--cs-risk-thumb, #9fb0c8);
  border: 2px solid #0b0f1a;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  cursor: pointer;
}
.cs-risk-val{
  min-width: 60px;
  font-family: 'Inter','SF Pro Display',sans-serif;
  font-weight: 800; font-size: 14px; letter-spacing: .02em;
  color: #9fb0c8;
}
@media (max-width: 560px){
  html[data-theme="phase2"] .cs-risk-filter{ margin-left: 0; }
  .cs-risk-slider{ width: 104px; }
}
/* Risk meter + filter inside the battle "Choose Packs" picker. */
html[data-theme="phase2"] .modal-cs-picker .cs-sort-bar-picker{
  flex-wrap: wrap;
  row-gap: 10px;
  justify-content: center;
}
html[data-theme="phase2"] .modal-cs-picker .cs-picker-tile-risk{
  width: 42px;
  margin: 7px auto 0;
}

/* ============================================================
   VIEW-PROFILE MODAL REVAMP — Discord-style popout  (2026-06-01)
   Two columns: identity (left) + stats (right), bigger PFP + type per
   the reference screenshot. Last-in-source so it overrides the earlier
   single-column .up-* rules; every wired id is preserved
   (#up-avatar / #up-name / #up-rounds / #up-xp-* / #up-badge-row …).
============================================================ */
html[data-theme="phase2"] .modal.user-popup-card{
  max-width: 640px !important;
  width: min(640px, calc(100vw - 28px)) !important;
  padding: 28px !important;
  background: var(--pd-bg-2) !important;
  border: 1px solid var(--pd-line-hover) !important;
  border-radius: 18px !important;
}
html[data-theme="phase2"] #user-popup .up-grid{
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 26px;
  align-items: start;
}
html[data-theme="phase2"] #user-popup .up-left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}
/* Big avatar — the identity anchor. */
html[data-theme="phase2"] #user-popup .up-avatar{
  width: 104px !important;
  height: 104px !important;
  font-size: 46px !important;
  border-radius: 50%;
  margin: 0 0 14px !important;
  flex: 0 0 auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px var(--pd-line),
    0 10px 28px rgba(0,0,0,.5) !important;
}
/* Big name. */
html[data-theme="phase2"] #user-popup .up-name{
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin: 0 0 4px !important;
  max-width: 100%;
  overflow-wrap: anywhere;
}
html[data-theme="phase2"] #user-popup .up-meta{
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pd-text-mute) !important;
  margin: 0 0 13px !important;
}
html[data-theme="phase2"] #user-popup .up-badge-row{
  margin: 0 0 15px !important;
  gap: 8px;
  flex-wrap: wrap;
}
html[data-theme="phase2"] #user-popup .up-badge-row .pbr-chip{
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
}
html[data-theme="phase2"] #user-popup .up-tags{
  gap: 8px;
  margin: 0 0 18px !important;
  flex-wrap: wrap;
}
html[data-theme="phase2"] #user-popup .up-tag{
  padding: 6px 13px !important;
  font-size: 14px !important;
  border-radius: 99px !important;
}
/* Member Since block. */
html[data-theme="phase2"] #user-popup .up-since{
  width: 100%;
  border-top: 1px solid var(--pd-line);
  padding-top: 15px;
  margin-top: auto;
}
html[data-theme="phase2"] #user-popup .up-since-label{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pd-text-mute);
  margin-bottom: 5px;
}
html[data-theme="phase2"] #user-popup .up-since-val{
  font-size: 14.5px;
  font-weight: 600;
  color: var(--pd-text);
}
/* RIGHT — stats / activity panel. */
html[data-theme="phase2"] #user-popup .up-right{
  background: var(--pd-bg-1);
  border: 1px solid var(--pd-line);
  border-radius: 14px;
  padding: 18px;
  min-width: 0;
}
html[data-theme="phase2"] #user-popup .up-right-head{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pd-text-mute);
  margin: 0 0 14px;
}
html[data-theme="phase2"] #user-popup .up-xp{
  margin: 0 0 16px !important;
}
/* Stats as full-width rows (Discord activity-card style): label left,
   big value right. */
html[data-theme="phase2"] #user-popup .up-stats{
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  grid-template-columns: none !important;
  margin: 0 !important;
}
html[data-theme="phase2"] #user-popup .up-stat{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px !important;
  background: var(--pd-bg-2) !important;
  border: 1px solid var(--pd-line) !important;
  border-radius: 12px !important;
  text-align: left !important;
}
html[data-theme="phase2"] #user-popup .up-stat-label{
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--pd-text-mute) !important;
  margin: 0 !important;
}
html[data-theme="phase2"] #user-popup .up-stat-value{
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--pd-text) !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Mobile — stack to one column, center the identity. */
@media (max-width: 560px){
  html[data-theme="phase2"] #user-popup .up-grid{ grid-template-columns: 1fr; gap: 20px; }
  html[data-theme="phase2"] #user-popup .up-left{ align-items: center; text-align: center; }
  html[data-theme="phase2"] #user-popup .up-badge-row{ justify-content: center; }
  html[data-theme="phase2"] #user-popup .up-tags{ justify-content: center; }
  html[data-theme="phase2"] #user-popup .up-since{ text-align: center; }
  html[data-theme="phase2"] #user-popup .up-name{ font-size: 26px !important; }
}

/* ============================================================
   PROFILE PAGE — match the revamped view-profile modal  (2026-06-01)
   The full profile page already shares the pd design tokens; bump the
   identity scale (avatar + name + stat values) and adopt the modal's
   avatar lift + roomier card so the page reads as the same family as the
   popup. Last-in-source, scoped to the profile route, overrides 36192.
============================================================ */
html[data-theme="phase2"] section[data-route="profile"] .profile-card2{
  padding: 26px !important;
  border-radius: 18px !important;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-card2-identity{
  gap: 22px;
}
/* Big circular avatar with the modal's lift (ring + drop shadow), no flat
   border/box — matches #user-popup .up-avatar. */
html[data-theme="phase2"] section[data-route="profile"] .profile-card2-avatar{
  width: 104px !important; height: 104px !important;
  font-size: 46px !important;
  background: var(--pd-surface) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px var(--pd-line),
    0 10px 28px rgba(0,0,0,.5) !important;
}
/* Big name, matching the modal. */
html[data-theme="phase2"] section[data-route="profile"] .profile-card2-name{
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin-bottom: 5px !important;
}
/* Meta as the modal's quiet, letter-spaced caption. */
html[data-theme="phase2"] section[data-route="profile"] .profile-card2-meta{
  font-size: 15px !important;
  letter-spacing: .02em;
}
/* Stat values up to the modal's scale. */
html[data-theme="phase2"] section[data-route="profile"] .profile-stat2-value{
  font-size: 20px !important;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-stat2{
  padding: 16px 18px !important;
  border-radius: 14px !important;
}
@media (max-width: 760px){
  html[data-theme="phase2"] section[data-route="profile"] .profile-card2-avatar{
    width: 84px !important; height: 84px !important; font-size: 38px !important;
  }
  html[data-theme="phase2"] section[data-route="profile"] .profile-card2-name{ font-size: 24px !important; }
}

/* ============================================================
   PROFILE CONTROLS — onto the phase2 flat-blue token language
   (2026-06-20). The stat cards already used --pd-* (warm-grey
   surface, hairline --pd-line, flat --pd-blue accent), but the
   period filter, tabs, refresh button and activity rows were
   still on the legacy --pink/--gold treatment: blue-pink GRADIENT
   actives, a GOLD-tailed underline, drop-shadow GLOWS, and a 3px
   colored SIDE-STRIPE on every activity row. That's what clashed.
   Migrate them all: flat blue actives, hairline borders, squared
   outcome tags, no glow / gradient / stripe. Refresh becomes a
   quiet secondary action instead of a selected-looking pill.
============================================================ */
html[data-theme="phase2"] section[data-route="profile"]{
  --prof-win:#34c77b;          /* outcome green, tuned for warm-grey */
  --prof-loss:#e2796f;         /* outcome red (was brand blue = wrong) */
}

/* --- Period filter (All Time / Month / Week / 24h) --- */
html[data-theme="phase2"] section[data-route="profile"] .profile-period{ gap:8px; }
html[data-theme="phase2"] section[data-route="profile"] .profile-period-btn{
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  color:var(--pd-text-mute);
  border-radius:999px;
  padding:8px 16px;
  font-family:'Inter',sans-serif;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:none;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-period-btn:hover{
  color:var(--pd-text);
  border-color:var(--pd-blue);
  background:var(--pd-surface);
}
html[data-theme="phase2"] section[data-route="profile"] .profile-period-btn.active{
  background:var(--pd-blue);
  border-color:var(--pd-blue);
  color:#fff;
  box-shadow:none;             /* kill the legacy 18px glow */
}
html[data-theme="phase2"] section[data-route="profile"] .profile-period-btn.active:hover{
  background:var(--pd-blue-accent);
  border-color:var(--pd-blue-accent);
  color:#fff;
}

/* --- Tabs (Activity / Transactions / By Game / Settings) --- */
html[data-theme="phase2"] section[data-route="profile"] .profile-tabs{
  border-bottom:1px solid var(--pd-line);
  gap:4px;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-tab{
  color:var(--pd-text-mute);
  font-family:'Inter',sans-serif;
  font-weight:800; letter-spacing:.04em;
  border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
html[data-theme="phase2"] section[data-route="profile"] .profile-tab:hover{
  color:var(--pd-text);
  transform:none;              /* drop the gimmick lift */
}
html[data-theme="phase2"] section[data-route="profile"] .profile-tab.active{
  color:var(--pd-text);
  border-bottom-color:var(--pd-blue);
}
/* Remove the legacy gradient + gold + drop-shadow underline. */
html[data-theme="phase2"] section[data-route="profile"] .profile-tab.active::after{ display:none; }

/* --- Refresh: quiet secondary action, NOT a selected pill --- */
html[data-theme="phase2"] section[data-route="profile"] #prof-act-refresh.profile-period-btn,
html[data-theme="phase2"] section[data-route="profile"] #prof-act-refresh.profile-period-btn.active{
  background:transparent;
  border:1px solid var(--pd-line);
  color:var(--pd-text-mute);
  box-shadow:none;
}
html[data-theme="phase2"] section[data-route="profile"] #prof-act-refresh.profile-period-btn:hover{
  color:var(--pd-blue-accent);
  border-color:var(--pd-blue);
  background:var(--pd-bg-2);
}

/* --- Activity rows --- */
html[data-theme="phase2"] section[data-route="profile"] .act-row{
  background:var(--pd-bg-1);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-md);
}
/* Kill the banned 3px side-stripe; outcome reads from tag + amount color. */
html[data-theme="phase2"] section[data-route="profile"] .act-row::before{ display:none; }
html[data-theme="phase2"] section[data-route="profile"] .act-row:hover{
  border-color:var(--pd-blue);
  background:var(--pd-bg-2);
  box-shadow:none;             /* no glow */
}
/* Icon tiles: flat, hairline, no drop-shadow glow. */
html[data-theme="phase2"] section[data-route="profile"] .act-icon,
html[data-theme="phase2"] section[data-route="profile"] .act-icon-big{
  background:var(--pd-bg-2);
  border:1px solid var(--pd-line);
  filter:none;
}
/* Squared outcome tag (was a 999px pill badge). */
html[data-theme="phase2"] section[data-route="profile"] .act-tag{
  border-radius:var(--pd-radius-sm);
  letter-spacing:.08em;
  padding:2px 7px;
}
html[data-theme="phase2"] section[data-route="profile"] .act-tag-pos{
  background:rgba(52,199,123,.12); color:var(--prof-win); border:1px solid rgba(52,199,123,.34);
}
html[data-theme="phase2"] section[data-route="profile"] .act-tag-neg{
  background:rgba(226,121,111,.12); color:var(--prof-loss); border:1px solid rgba(226,121,111,.34);
}
html[data-theme="phase2"] section[data-route="profile"] .act-tag-push{
  background:var(--pd-bg-2); color:var(--pd-text-mute); border:1px solid var(--pd-line);
}
/* Amount: win green, loss muted red (was brand blue, which read as a CTA). */
html[data-theme="phase2"] section[data-route="profile"] .act-amount.pos{ color:var(--prof-win); }
html[data-theme="phase2"] section[data-route="profile"] .act-amount.neg{ color:var(--prof-loss); }
html[data-theme="phase2"] section[data-route="profile"] .act-title strong{ color:var(--pd-text); }

/* ============================================================
   Hide the post-round result banner  (2026-06-01)
   The big bottom "YOU WON / OPENED N× / +amount" banner (#result-banner,
   shown by showResult() after every game round + pack open) was unwanted.
   Hide it everywhere. showResult() still runs harmlessly — the SFX,
   history feed and balance updates are separate calls; only the banner
   paint is suppressed.
============================================================ */
#result-banner{ display: none !important; }

/* ============================================================
   WITHDRAW MODAL — themed crypto coin picker + manual payout form
   (2026-06-01). Mirrors the deposit coin-menu look (matte navy +
   brand-blue accents) so deposit/withdraw feel like one system.
============================================================ */
/* "Coming soon" badge on the Robux payout tile */
.pay-method-soon{ position:relative; }
.pay-method-soon .pay-method-icon,
.pay-method-soon .pay-method-title,
.pay-method-soon .pay-method-sub{ opacity:.5; }
.pay-method-badge{
  position:absolute; top:10px; right:10px; z-index:2;
  font-family:'Inter',sans-serif; font-size:12px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:#cfe0ff;
  background:rgba(59,130,246,.16); border:1px solid rgba(59,130,246,.42);
  padding:3px 8px; border-radius:999px;
}

/* Coin picker grid */
.wd-coin-grid{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.wd-coin{
  display:grid; grid-template-columns:46px 1fr auto; gap:14px; align-items:center;
  width:100%; text-align:left; cursor:pointer;
  padding:12px 14px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(59,130,246,.18);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wd-coin:hover{
  transform:translateY(-1px);
  border-color:rgba(59,130,246,.5);
  background:linear-gradient(90deg, rgba(59,130,246,.08), rgba(59,130,246,.03));
  box-shadow:0 8px 22px rgba(59,130,246,.16);
}
.wd-coin-icon{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; }
.wd-coin-icon img{ width:42px; height:42px; border-radius:50%; object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.wd-coin-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wd-coin-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:15px; color:var(--text); }
.wd-coin-net{ font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; color:var(--text-mute); }
.wd-coin-code,
.wd-coin-head-code{
  font-family:'Sora',sans-serif; font-weight:800; font-size:15px; color:#9db7ff;
  background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.28);
  padding:4px 9px; border-radius:9px;
}

/* Selected-coin header on the amount form */
.wd-coin-head{
  display:grid; grid-template-columns:46px 1fr auto; gap:13px; align-items:center;
  padding:12px 14px; border-radius:14px; margin-bottom:14px;
  background:rgba(59,130,246,.07); border:1px solid rgba(59,130,246,.22);
}
.wd-coin-head-icon img{ width:42px; height:42px; border-radius:50%; object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.wd-coin-head-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:15px; color:var(--text); }
.wd-coin-head-net{ font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; color:var(--text-mute); }

.wd-bal-line{ font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; color:var(--text-mute); margin-top:7px; }
.wd-bal-line #wd-bal{ color:var(--text); font-weight:800; }
.wd-bal-line #wd-usd{ color:#9db7ff; }
.wd-foot{ font-family:'Inter',sans-serif; font-size:13px; color:var(--text-mute); line-height:1.5; margin-top:12px; text-align:center; }

/* Admin withdrawals pane — USD hint, copyable address, status badge, approve */
.adm-wd-usd{ display:inline-block; margin-left:7px; font-size:13px; font-weight:700; color:#7f9cff; opacity:.9; }
.adm-wd-addr-cell{ white-space:nowrap; }
.adm-wd-addr{ font-size:14px; }
.adm-wd-copy{
  margin-left:6px; cursor:pointer; border:1px solid rgba(59,130,246,.3);
  background:rgba(59,130,246,.1); color:#cfe0ff; border-radius:7px;
  padding:2px 7px; font-size:14px; line-height:1; vertical-align:middle;
}
.adm-wd-copy:hover{ background:rgba(59,130,246,.22); }
.adm-wd-actions{ white-space:nowrap; }
.adm-action-approve{
  background:rgba(40,199,111,.14) !important; border-color:rgba(40,199,111,.4) !important;
  color:#7ee2a8 !important; margin-right:6px;
}
.adm-action-approve:hover{ background:rgba(40,199,111,.26) !important; }
.adm-wd-badge{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:13px; font-weight:800;
  text-transform:capitalize; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--text-mute); }
.adm-wd-badge-pending{ color:#ffd27f; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); }
.adm-wd-badge-confirmed{ color:#7ee2a8; background:rgba(40,199,111,.12); border-color:rgba(40,199,111,.35); }
.adm-wd-badge-failed,
.adm-wd-badge-cancelled{ color:#ff9d9d; background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.3); }
.adm-wd-badge-processing{ color:#9db7ff; background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.32); }

/* ============================================================
   Hide the per-game result popup (2026-06-02)
   The inline ".game-popup" (e.g. slots "NO MATCH / Try again / -10",
   mines "BUSTED", dice/limbo/upgrader/bj/cs result cards) shown by
   showPopup() after each round was unwanted — same call as the global
   #result-banner, just per-game. Hide it everywhere. showPopup() still
   runs harmlessly (it only paints this element); SFX, the balance tick,
   and the history feed are separate and still fire.
============================================================ */
.game-popup{ display: none !important; }

/* ============================================================
   ADMIN PANEL — dashboard revamp polish (2026-06-02)
   Adds a dashboard header + refresh, clickable/hover-lift stat cards,
   a card sub-line, the pending-W/D accent, and proportional coin
   glyphs inside the big card values + per-game table.
============================================================ */
.adm-dash-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;
}
.adm-dash-head-title{ font-family:'Sora',sans-serif; font-weight:800; font-size:16px; color:#fff; }
.adm-dash-window{
  font-family:'Inter',sans-serif; font-weight:700; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-mute);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  padding:3px 9px; border-radius:999px; margin-left:8px; vertical-align:middle;
}
.adm-dash-refresh{ font-size:14px !important; padding:7px 14px !important; flex-shrink:0; }

/* Card hover-lift + clickable cards + sub line */
.adm-card{ transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.adm-card-tap{ cursor:pointer; }
.adm-card-tap:hover{
  transform:translateY(-2px);
  border-color:rgba(59,130,246,.4);
  box-shadow:0 10px 26px rgba(59,130,246,.14);
}
.adm-card-sub{ margin-top:6px; font-family:'Inter',sans-serif; font-weight:600; font-size:13px; color:var(--text-mute); }
.adm-card-sub span{ color:#9db7ff; font-weight:800; }
.adm-card-pending{
  background:linear-gradient(180deg, rgba(245,158,11,.12), rgba(245,158,11,.02));
  border-color:rgba(245,158,11,.3);
}
.adm-card-pending .adm-card-val{ color:#ffd27f; }
/* Keep the coin glyph proportional to the big card value (base glyph is 1.35em) */
.adm-card-val .bc-glyph{ width:.78em; height:.78em; vertical-align:-.04em; }

/* ============================================================
   DEPOSIT MODAL — sectioned chooser redesign (2026-06-02)
   Reference-matched: section label + sub, then a row of coin tiles
   (circular icon + name + ticker). The old credit-card row is replaced
   by a single Robux tile. Crypto + Robux flows are unchanged — tiles
   just route into the existing per-coin detail / Robux gamepass stages.
============================================================ */
/* The chooser stage gets its own wide, airy shell. The base
   `.modal-backdrop .modal` caps width at min(640px,92vw) AND that max-width
   wins over any plain `width`, so we override BOTH (with !important) for this
   stage only. coin-detail / Robux stages keep their designed 640px width
   (showStage() sets data-active-stage on the modal). */
#deposit-modal[data-active-stage="chooser"] .modal{
  width:min(880px,100%) !important;
  max-width:min(880px,94vw) !important;
  padding:38px 40px 30px !important;
}
/* Reference is left-aligned: title sits top-left, the close pill top-right on
   the same line (it's absolutely positioned, so it doesn't shift the title). */
/* Base .modal-title pads 0 60px to center-clear the close pill; we're flush
   left, so drop the left pad and keep just enough on the right for the X.
   Scoped under the modal id so it outranks `html[data-theme="phase2"]
   .modal-title{font-size:21px!important}`, which otherwise shrinks the title. */
#deposit-modal[data-active-stage="chooser"] .dep-chooser-title{ text-align:left !important; padding:0 52px 0 0 !important; font-size:29px !important; margin-bottom:30px !important; letter-spacing:-.02em; }
.dep-section{ margin-bottom:30px; }
.dep-section-title{ font-family:'Sora',sans-serif; font-weight:800; font-size:17px; color:#fff; margin-bottom:4px; }
.dep-section-sub{ font-family:'Inter',sans-serif; font-size:15px; font-weight:500; color:var(--text-mute); margin-bottom:16px; }
/* Even rows of tiles — 3 across (6 coins = 3+3) reads cleaner than 4+2. */
.dep-coin-grid{ display:flex; flex-wrap:wrap; gap:13px; }
.dep-coin{
  flex:0 0 calc(33.333% - 9px); min-width:215px;
  display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer;
  padding:15px 18px; border-radius:14px; min-height:72px;
  background:rgba(255,255,255,.038); border:1px solid rgba(255,255,255,.075);
  transition:transform .16s cubic-bezier(.22,1,.36,1), border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
/* Calm, Discord-soft hover: border brightens, surface lifts a hair, a neutral
   (not colored) shadow gives depth. No blue halo glow. */
.dep-coin:hover{
  transform:translateY(-1px);
  border-color:rgba(99,160,255,.42);
  background:rgba(255,255,255,.065);
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.dep-coin:focus-visible{ outline:2px solid rgba(99,160,255,.6); outline-offset:2px; }
.dep-coin:active{ transform:translateY(0); }
.dep-coin-icon{
  width:48px; height:48px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.22);
}
/* Logos are pre-shaped transparent PNGs (some round, some not e.g. Solana's
   bars) — drop the circle clip so non-round marks aren't cut, and sit them a
   touch inside the dark plate so every coin reads as a consistent badge. */
.dep-coin-icon img{ width:42px; height:42px; border-radius:0; object-fit:contain; }
/* Robux art is a transparent hexagon, not a full-bleed circle — keep a subtle
   plate so it reads as a coin alongside the others. */
.dep-coin-icon-robux{ background:rgba(0,0,0,.32); }
.dep-coin-icon-robux img{ width:34px; height:34px; }
.dep-coin-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dep-coin-name{ font-family:'Sora',sans-serif; font-weight:800; font-size:15.5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.dep-coin-ticker{
  font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; color:var(--text-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Robux sits alone in its section — let it take a normal tile width (not full
   bleed) so it lines up with the crypto row above, like the reference. */
.dep-coin-robux .dep-coin-ticker{ white-space:normal; line-height:1.3; }
/* Footer link, set off by a hairline rule (echoes the reference's divider). */
.dep-limits-note{ margin-top:4px; padding-top:18px; border-top:1px solid rgba(255,255,255,.07); text-align:left; font-size:12.5px; }
.dep-limits-note a{ color:var(--cyan); text-decoration:none; }
.dep-limits-note a:hover{ text-decoration:underline; }
@media (max-width:620px){
  #deposit-modal[data-active-stage="chooser"] .modal{ padding:22px !important; }
  /* Full-width tiles on phones: 2-across clips the longer names (Ethereum,
     Dogecoin) and the Robux ticker. One per row keeps every label on a single
     readable line. */
  .dep-coin{ flex:0 0 100%; min-width:0; }
  #deposit-modal[data-active-stage="chooser"] .dep-chooser-title{ font-size:23px !important; margin-bottom:22px !important; }
  .dep-section{ margin-bottom:24px; }
}

/* ============================================================
   MOBILE LIVE OPENS STRIP  (≤1100px)
   ------------------------------------------------------------
   The 300px right-rail Live Opens is display:none below 1100px (it has
   nowhere to sit beside the content), so phones never saw recent
   unboxings. Reuse the SAME already-populated rail by floating it to a
   full-width horizontal scroller pinned to the top of the page — the
   packdraw / bloxrain mobile pattern. Only the Live Opens section shows
   (Top Opens is hidden so the strip stays one compact row). The
   press-and-hold peek reveal works here too (its reduced-motion slide is
   restored above). `.layout` is a flex row; flex-wrap + order:-1 +
   flex-basis:100% lifts the rail onto its own first row without any DOM
   reparenting, so desktop is untouched.
   ============================================================ */
@media (max-width: 1100px){
  .layout{ flex-wrap: wrap !important; }
  #pd-rightrail{
    display: block !important;
    order: -1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    position: static !important;
    margin: 0 0 6px !important;
    padding: 10px 12px 8px !important;
    /* translucent glass so the background image shows through the mobile strip */
    background: var(--pd-glass-bar) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pd-line, rgba(255,255,255,.07)) !important;
  }
  /* Keep only Live Opens; drop Top Opens so the strip is a single row. */
  #pd-rightrail .pd-rail-section:has(> #pd-rail-top-opens){ display: none !important; }
  #pd-rightrail .pd-rail-section{ margin: 0 !important; }
  #pd-rightrail .pd-rail-section:has(> #pd-rail-live-opens) .pd-rail-title{
    margin: 0 0 8px !important;
    font-size: 14px !important;
  }
  /* List → horizontal scroller (hidden scrollbar, momentum scroll). */
  #pd-rail-live-opens{
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding: 0 0 2px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  #pd-rail-live-opens::-webkit-scrollbar{ display: none !important; }
  /* Compact fixed-width cards; don't shrink so they scroll instead. */
  #pd-rail-live-opens .pd-feed-item{
    flex: 0 0 auto !important;
    width: 92px !important;
    padding: 24px 8px 10px !important;
  }
  #pd-rail-live-opens .pd-feed-item-img-wrap{
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 8px !important;
  }
  #pd-rail-live-opens .pd-feed-item-name{ font-size: 13px !important; }
  #pd-rail-live-opens .pd-feed-item-price{ font-size: 14px !important; }
  /* Avatar bubble smaller in the strip. */
  #pd-rail-live-opens .pd-feed-item-avatar{ width: 18px !important; height: 18px !important; font-size: 12px !important; }
}

/* ============================================================
   CRASH — CLEAN TERMINAL REDESIGN (2026-06)
   Retire the space-cartoon scene (purple sky, parallax stars,
   horizon, rocket, asteroid) for a Stake-style trading terminal:
   a deep charcoal field with a faint precision grid and the
   trajectory curve as the hero, tipped with a glowing comet.
   The grid + curve + comet are painted on #crash-canvas (see
   renderCrashCurve / renderCrashIdle in app.js); this block clears
   the old scene and reskins the surrounding chrome. Scoped to the
   crash route and appended last so it wins the cascade.
============================================================ */
@keyframes crashFlashClean{
  0%   { width:0; height:0; opacity:.85; }
  100% { width:240px; height:240px; opacity:0; }
}
/* ROCKET/SPACE RESTORE: the field is the original purple space sky again
   (deep blue-violet horizon glow) so the rocket flies through space, not a
   trading terminal. */
section[data-route="crash"] .crash-sky{
  background:
    radial-gradient(ellipse 600px 300px at 50% 100%, rgba(59,130,246,.18), transparent 70%),
    radial-gradient(ellipse 500px 400px at 50% -10%, rgba(29,78,216,.18), transparent 70%),
    linear-gradient(180deg,#04061a 0%, #0a0e30 40%, #1a0942 80%, #2a0e5a 100%) !important;
}
/* ROCKET/SPACE RESTORE: hide the trajectory-curve TERMINAL overlays instead.
   The space scene (sky / stars / mountain / rocket / asteroid / explosion /
   debris) shows again; the canvas curve, axis ticks and "current payout"
   sub-label are the things that get retired. */
section[data-route="crash"] #crash-canvas,
section[data-route="crash"] .crash-axes,
section[data-route="crash"] .crash-multi-sub{
  display:none !important;
}
/* Board frame: clean hairline on deep charcoal, soft depth, no rim glow. */
section[data-route="crash"] .crash-board{
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:16px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
/* Y-axis: quiet monospace ticks. */
section[data-route="crash"] .crash-axes .cax-y{ left:16px !important; }
section[data-route="crash"] .crash-axes .cax-y span{
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-weight:500 !important; font-size:10.5px !important;
  letter-spacing:.02em !important; color:rgba(180,195,225,.34) !important;
}
/* Readout: crisp number, no decorative pulse/halo during flight. */
section[data-route="crash"] .crash-board[data-flying="1"] .crash-multiplier{
  animation:none !important;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.7)) !important;
}
/* ROCKET/SPACE RESTORE: the original rocket blast (base .crash-explosion +
   bigBoom keyframe) owns the crash again — no clean terminal ring override. */
/* Phase pill + round badge: squared monospace tags, hairline border. */
section[data-route="crash"] .crash-phase-pill,
section[data-route="crash"] .crash-round-badge{
  border-radius:8px !important;
  background:rgba(12,15,20,.74) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  box-shadow:none !important;
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-weight:600 !important; letter-spacing:.03em !important;
  backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important;
}

/* ----- Crash revamp 2026-06: single-blue terminal on the packdraw palette.
   Restores the tier signal on the recent-multiplier chips (the phase2 pass had
   flattened them all to white), and quiets the status dots to soft pd accents
   with no glow halos / no royal-blue holdovers from the old navy build. ----- */
/* Recent multipliers: colour the NUMBER by tier so the row reads at a glance
   (low=red, mid=neutral, high=green, jackpot=gold), like Stake's recent row. */
html[data-theme="phase2"] section[data-route="crash"] .history-bar .hist-item.low{ color:#eb4b4b !important; }
html[data-theme="phase2"] section[data-route="crash"] .history-bar .hist-item.high{ color:#48bb78 !important; }
html[data-theme="phase2"] section[data-route="crash"] .history-bar .hist-item.huge{
  color:#f0b232 !important;
  border-color:rgba(240,178,50,.40) !important;
}
/* Status dots removed entirely — glowing/pulsing dots are a standing AI-tell
   for this project. The phase pill + network tag carry their state as clean
   squared mono text instead (the round phase is already in the label). */
section[data-route="crash"] .cph-dot,
section[data-route="crash"] .cn-dot{ display:none !important; }

/* Readout: strip the neon halo to a single soft legibility shadow. The state
   colours (red bust / green cashout) keep ONE restrained same-hue shadow, and
   the bust uses a calm scale-settle instead of the old rotate/screen-shake. */
section[data-route="crash"] .crash-multiplier{
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)) !important;
}
section[data-route="crash"] .crash-multiplier.crashed{
  filter: drop-shadow(0 0 16px rgba(239,68,68,.42)) drop-shadow(0 6px 14px rgba(0,0,0,.55)) !important;
  animation: crashSettleClean .32s cubic-bezier(.22,1,.36,1) both !important;
}
section[data-route="crash"] .crash-multiplier.locked{
  filter: drop-shadow(0 0 16px rgba(40,199,111,.42)) drop-shadow(0 6px 14px rgba(0,0,0,.55)) !important;
}
@keyframes crashSettleClean{
  0%   { transform: translate(-50%,-50%) scale(1.05); opacity:.35; }
  100% { transform: translate(-50%,-50%) scale(1);    opacity:1; }
}

/* ROCKET/SPACE RESTORE: the big multiplier sits centred over the rocket again
   during flight (the terminal pass lifted it to the top to clear the curve). */
section[data-route="crash"] .crash-board[data-flying="1"] .crash-multiplier{
  top: 38% !important;
  font-size: clamp(48px, 7.5vw, 110px) !important;
}

/* ============================================================
   PACKDRAW POLISH PASS — 2026-06-19
   Closes the "compact / professional" gap vs packdraw.com after a
   live side-by-side study through Chrome. Refinement, NOT a
   restructure (the centered shell + chat-left/opens-right layout
   already match packdraw and stay put):
     • Section heads drop the decorative blue side-stripe + its glow
       (an AI-tell) — clean muted icon + bold title, packdraw-style.
     • "View All" reads as a quiet text link, not an uppercase pill
       (the real .pd-section-view-all class was never styled before).
     • Top-nav weight relaxes to 500 (packdraw cadence); active = 600.
     • Game tiles: crisp radius, soft branded hover lift, never a frame.
     • Topbar action buttons compacted to packdraw's 38px / 8px / 700.
     • Right-rail empty/loading becomes a premium shimmer skeleton
       instead of a bare "LOADING…" (paired with pd-chrome.js).
   All scoped to html[data-theme="phase2"] and appended last so it
   wins the cascade over the earlier duplicate phase2 rules.
   ============================================================ */

/* --- Section heads: kill the side-stripe + glow, calm the icon --- */
html[data-theme="phase2"] .pd-section-title::before{
  display:none !important; content:none !important; box-shadow:none !important;
}
html[data-theme="phase2"] .pd-section-title{
  padding-left:0 !important;
  gap:10px !important;
  margin-bottom:16px !important;
  letter-spacing:-.015em !important;
}
html[data-theme="phase2"] .pd-section-title .pd-section-title-icon{
  color:var(--pd-text-mute) !important;
  display:inline-flex; align-items:center;
}
html[data-theme="phase2"] .pd-section-head{ align-items:center; }

/* --- "View All": quiet text link (the older .view-all / .pd-view-all
   rules targeted classes that never render — this is the real one) --- */
html[data-theme="phase2"] .pd-section-view-all{
  color:var(--pd-text-mute) !important;
  font-family:'Urbanist','Inter',sans-serif !important;
  font-weight:700 !important;
  font-size:14px !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  text-decoration:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  transition:color .15s ease !important;
}
html[data-theme="phase2"] .pd-section-view-all:hover{ color:var(--pd-text) !important; }

/* --- Top nav: packdraw weight 500, active 600 --- */
html[data-theme="phase2"] .pd-topnav-link{ font-weight:500 !important; }
html[data-theme="phase2"] .pd-topnav-link.pd-active,
html[data-theme="phase2"] .pd-topnav-link.active{ font-weight:600 !important; }

/* --- Games grid: tighter gutter, crisp frameless tiles, soft lift --- */
html[data-theme="phase2"] .pd-games-grid{ gap:12px !important; }
html[data-theme="phase2"] .pd-game-tile{
  border:0 !important; border-radius:13px !important; overflow:hidden;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease !important;
}
html[data-theme="phase2"] .pd-game-tile img{ border-radius:13px !important; display:block; }
html[data-theme="phase2"] .pd-game-tile:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.45) !important;
}

/* --- Hero cards: packdraw 10px radius --- */
html[data-theme="phase2"] .pd-challenge-card{ border-radius:10px !important; }

/* --- Topbar action buttons: compact packdraw pill (icon-only chat
   toggle left untouched) --- */
html[data-theme="phase2"] #pd-topbar-right .btn:not(.btn-icon-only){
  height:38px !important; padding:0 16px !important;
  border-radius:8px !important; font-weight:700 !important;
  font-size:14.5px !important; letter-spacing:.005em !important;
}

/* --- Right-rail premium skeleton (paired with pd-chrome.js
   populateRail / railSkeletonHTML). The wrapper keeps the
   .pd-feed-empty class so reconcileFeed() clears it the instant the
   first real open lands. --- */
html[data-theme="phase2"] .pd-feed-empty.pd-rail-skel-wrap{
  padding:0 !important; text-transform:none !important;
  display:flex !important; flex-direction:column; gap:9px;
}
html[data-theme="phase2"] .pd-rail-skel{
  display:flex; align-items:center; gap:10px;
  background:var(--pd-bg-2); border:1px solid var(--pd-line);
  border-radius:10px; padding:9px 10px;
}
html[data-theme="phase2"] .pd-rail-skel .s-th{ width:46px; height:46px; border-radius:8px; flex:0 0 auto; }
html[data-theme="phase2"] .pd-rail-skel .s-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
html[data-theme="phase2"] .pd-rail-skel .s-l1{ height:9px; width:78%; border-radius:5px; }
html[data-theme="phase2"] .pd-rail-skel .s-l2{ height:9px; width:42%; border-radius:5px; }
html[data-theme="phase2"] .pd-rail-skel .sh{
  background:linear-gradient(90deg, rgba(255,255,255,.045) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.045) 63%);
  background-size:400% 100%;
  animation:pd-rail-shimmer 1.4s ease-in-out infinite;
}
@keyframes pd-rail-shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] .pd-rail-skel .sh{ animation:none; background:rgba(255,255,255,.06); }
}

/* ============================================================
   AFFILIATE DASHBOARD
   Restrained ledger aesthetic — mono eyebrows, hairline rules,
   no glow/halos. Reuses the phase2 --pd-* tokens.
   ============================================================ */
.aff-dash{ max-width:920px; margin:0 auto; }
.aff-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pd-text-mute); margin:0;
}

/* page header — replaces the old glow banner. Quiet title + hairline rule. */
.aff-head{ padding:4px 0 20px; border-bottom:1px solid var(--pd-line); margin-bottom:22px; }
.aff-head-title{ font-size:22px; font-weight:800; color:var(--pd-text); margin:0 0 6px; letter-spacing:-.01em; }
.aff-head-sub{ font-size:14px; color:var(--pd-text-mute); margin:0; max-width:560px; line-height:1.5; }

/* ===== branded art banner ===== */
.aff-banner{
  position:relative; width:100%; max-width:920px; margin:0 auto 18px;
  height:300px; border-radius:16px; overflow:hidden;
  background:#171228; border:1px solid var(--pd-line);
}
.aff-banner img{ width:100%; height:100%; object-fit:cover; object-position:center 54%; display:block; }
.aff-banner::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent 64%, rgba(13,16,18,.45));
}
@media (max-width:640px){ .aff-banner{ height:172px; } }

/* ===== hero — identity + earnings + ledger, with geometric deco ===== */
.aff-hero{
  position:relative; overflow:hidden;
  border:1px solid var(--pd-line); border-radius:16px;
  background:linear-gradient(135deg, rgba(66,153,225,.12), rgba(66,153,225,0) 58%), var(--pd-bg-1);
  padding:24px 26px; margin-bottom:18px; color:var(--pd-blue);
}
.aff-hero-deco{ position:absolute; inset:0; width:100%; height:100%; color:var(--pd-blue); pointer-events:none; }
.aff-hero-body{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.aff-hero-id{ display:flex; align-items:center; gap:15px; min-width:0; }
.aff-hero-avatar{
  position:relative;
  width:56px; height:56px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:25px; color:#fff; background:var(--pd-surface);
}
.aff-hero-avatar-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .15s ease;
}
.aff-hero-name{ font-size:21px; font-weight:800; color:var(--pd-text); letter-spacing:-.015em; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.aff-hero-tierline{ margin-top:4px; font-size:13px; color:var(--pd-text-mute); }
#aff-hero-tier{ color:var(--pd-blue-accent); font-weight:700; }
#aff-hero-rate{ color:var(--pd-text); font-weight:700; }
.aff-hero-sep{ margin:0 8px; opacity:.45; }
.aff-hero-earned{ text-align:right; flex:0 0 auto; }
.aff-hero-earned .aff-eyebrow{ display:block; margin-bottom:6px; }
.aff-hero-earned-val{ font-size:29px; font-weight:800; color:var(--pd-text); letter-spacing:-.02em; display:inline-flex; align-items:center; gap:7px; }
/* full-bleed bottom ledger */
.aff-hero-foot{
  position:relative; display:flex; align-items:stretch;
  margin:22px -26px -24px; border-top:1px solid var(--pd-line); background:rgba(13,16,18,.35);
}
.aff-hero-stat{ flex:1; display:flex; flex-direction:column; gap:4px; justify-content:center; padding:14px 18px; }
.aff-hero-stat + .aff-hero-stat{ border-left:1px solid var(--pd-line); }
.aff-hero-stat-num{ font-size:17px; font-weight:700; color:var(--pd-text); }
.aff-hero-stat-lab{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--pd-text-mute); }
.aff-hero-claim{
  flex:1.5; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 16px 11px 18px; border-left:1px solid var(--pd-line);
}
.aff-hero-claim-txt{ display:flex; flex-direction:column; gap:3px; }
.aff-hero-claim-amt{ font-size:18px; font-weight:800; color:var(--pd-text); display:inline-flex; align-items:center; gap:6px; }
.aff-hero-claim-lab{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--pd-text-mute); }
.aff-hero .aff-claim-btn{ min-width:96px; }
.aff-hero .aff-claim-btn:disabled{ opacity:.4; cursor:not-allowed; }
@media (max-width:640px){
  .aff-hero{ padding:20px 18px; }
  .aff-hero-body{ flex-direction:column; align-items:flex-start; gap:14px; }
  .aff-hero-earned{ text-align:left; }
  .aff-hero-earned-val{ font-size:26px; }
  .aff-hero-foot{ flex-wrap:wrap; margin:18px -18px -20px; }
  .aff-hero-stat{ flex:1 1 0; padding:12px 14px; }
  .aff-hero-claim{ flex:1 1 100%; border-left:0; border-top:1px solid var(--pd-line); }
}

/* signed-out gate */
.aff-gate{ text-align:center; padding:54px 24px; }
.aff-gate-title{ font-size:24px; font-weight:800; margin:10px 0 8px; color:var(--pd-text); }
.aff-gate-sub{ color:var(--pd-text-mute); max-width:460px; margin:0 auto 22px; line-height:1.55; }
.aff-gate-btn{ min-width:160px; }

/* share: code + link */
.aff-share{ display:grid; gap:12px; margin-bottom:16px; }
.aff-share-row{ display:flex; flex-direction:column; gap:7px; }
.aff-copyfield{
  display:flex; align-items:stretch; gap:0;
  background:var(--pd-bg-2); border:1px solid var(--pd-line); border-radius:10px; overflow:hidden;
}
.aff-copyfield[hidden]{ display:none; }  /* [hidden] is otherwise overridden by display:flex */
.aff-copyfield code{
  flex:1; min-width:0; padding:13px 14px; font-family:inherit; font-size:15px;
  color:var(--pd-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.aff-copy-btn{
  flex:0 0 auto; padding:0 18px; border:0; border-left:1px solid var(--pd-line);
  background:transparent; color:var(--pd-blue-accent); font-weight:700; font-size:14px; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.aff-copy-btn:hover{ background:rgba(66,153,225,.08); color:var(--pd-blue); }
/* customise-code row */
.aff-row-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.aff-edit-link{
  background:none; border:0; color:var(--pd-blue-accent); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer; padding:2px 0;
}
.aff-edit-link:hover{ color:var(--pd-blue); }
.aff-codeedit{ display:flex; gap:8px; }
.aff-codeedit[hidden]{ display:none; }  /* [hidden] is otherwise overridden by display:flex */
.aff-codeedit input{
  flex:1; min-width:0; padding:12px 14px; background:var(--pd-bg-2); border:1px solid var(--pd-line);
  border-radius:10px; color:var(--pd-text); font-size:15px;
}
.aff-codeedit input:focus{ outline:none; border-color:var(--pd-blue); }
.aff-codeedit .aff-copy-btn{ border:1px solid var(--pd-line); border-radius:10px; padding:0 16px; }
.aff-code-cancel{ color:var(--pd-text-mute) !important; }
.aff-code-cancel:hover{ color:var(--pd-text) !important; background:rgba(250,250,250,.04) !important; }
.aff-code-hint{ font-size:12px; color:var(--pd-text-mute); line-height:1.45; }

/* claim bar */
.aff-claim{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--pd-bg-2); border:1px solid var(--pd-line); border-radius:12px;
  padding:16px 18px; margin-bottom:16px;
}
.aff-claim-info{ display:flex; flex-direction:column; gap:2px; }
.aff-claim-amount{ font-size:24px; font-weight:800; color:var(--pd-text); display:flex; align-items:center; gap:6px; }
.aff-claim-hint{ font-size:12px; color:var(--pd-text-mute); }
.aff-claim-btn{ min-width:120px; }
.aff-claim-btn:disabled{ opacity:.42; cursor:not-allowed; }

/* stat ledger */
.aff-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--pd-line); border:1px solid var(--pd-line); border-radius:12px; overflow:hidden; margin-bottom:16px;
}
.aff-stat{ background:var(--pd-bg-2); padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.aff-stat-label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--pd-text-mute); }
.aff-stat-val{ font-size:18px; font-weight:700; color:var(--pd-text); display:flex; align-items:center; gap:5px; }

/* tier card */
.aff-tier-card{ background:var(--pd-bg-2); border:1px solid var(--pd-line); border-radius:12px; padding:16px 18px; margin-bottom:16px; }
.aff-tier-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.aff-tier-now{ font-size:14px; color:var(--pd-text-mute); }
.aff-tier-now strong{ color:var(--pd-text); }
.aff-tier-bar{ height:6px; background:var(--pd-bg-0); border-radius:99px; overflow:hidden; }
.aff-tier-fill{ height:100%; width:0; background:var(--pd-blue); border-radius:99px; transition:width .5s ease; }
.aff-tier-next{ margin-top:9px; font-size:12px; color:var(--pd-text-mute); }

/* referrals table */
.aff-refs-block{ margin-bottom:16px; }
.aff-refs-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.aff-period{ display:flex; gap:2px; background:var(--pd-bg-2); border:1px solid var(--pd-line); border-radius:9px; padding:3px; }
.aff-period button{
  border:0; background:transparent; color:var(--pd-text-mute); font-weight:600; font-size:13px;
  padding:5px 11px; border-radius:6px; cursor:pointer; transition:color .15s, background .15s;
}
.aff-period button:hover{ color:var(--pd-text); }
.aff-period button.active{ color:var(--pd-text); background:var(--pd-surface); }
.aff-table-wrap{ border:1px solid var(--pd-line); border-radius:12px; overflow:hidden; }
.aff-table{ width:100%; border-collapse:collapse; font-size:14px; }
.aff-table thead th{
  text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:var(--pd-text-mute); padding:11px 16px; background:var(--pd-bg-1); border-bottom:1px solid var(--pd-line);
}
.aff-table th.num, .aff-table td.num{ text-align:right; }
.aff-table tbody td{ padding:12px 16px; border-bottom:1px solid var(--pd-line); color:var(--pd-text); white-space:nowrap; }
.aff-table tbody tr:last-child td{ border-bottom:0; }
.aff-table tbody tr:hover td{ background:rgba(250,250,250,.02); }
.aff-table td.aff-earn{ color:var(--pd-green); font-weight:700; }
.aff-user{ display:flex; align-items:center; gap:10px; }
.aff-av{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.aff-av-letter{ display:flex; align-items:center; justify-content:center; background:var(--pd-surface); color:var(--pd-text); font-size:12px; font-weight:700; }
.aff-empty{ text-align:center; color:var(--pd-text-mute); padding:26px 16px !important; grid-column:1/-1; }

/* referral cards (bloxflip-style) */
.aff-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(282px, 1fr)); gap:14px; }
.aff-rc{ background:var(--pd-bg-2); border:1px solid var(--pd-line); border-radius:14px; padding:18px 18px 0; display:flex; flex-direction:column; }
.aff-rc-head{ display:flex; align-items:center; gap:11px; margin-bottom:17px; min-width:0; }
.aff-rc-av{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--pd-surface); color:var(--pd-text); font-size:14px; font-weight:700; }
.aff-rc-name{ font-size:15px; font-weight:700; color:var(--pd-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aff-rc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px 16px; }
.aff-rc-cell{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.aff-rc-lab{ font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--pd-text-mute); }
.aff-rc-val{ font-size:15px; font-weight:700; color:var(--pd-text); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.aff-rc-foot{ margin:17px -18px 0; padding:13px 18px 15px; border-top:1px solid var(--pd-line); display:flex; flex-direction:column; gap:7px; }
.aff-rc-frow{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px; }
.aff-rc-frow > span:first-child{ color:var(--pd-text-mute); }
.aff-rc-frow > span:last-child{ color:var(--pd-text); font-weight:600; white-space:nowrap; }

/* tier ladder */
.aff-ladder{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--pd-line); border:1px solid var(--pd-line); border-radius:12px; overflow:hidden; margin-bottom:16px;
}
.aff-rung{ background:var(--pd-bg-2); padding:14px 12px; display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.aff-rung.is-current{ background:var(--pd-bg-1); box-shadow:inset 2px 0 0 var(--pd-blue); }
.aff-rung-name{ font-size:13px; font-weight:700; color:var(--pd-text); }
.aff-rung-rate{ font-size:17px; font-weight:800; color:var(--pd-blue-accent); }
.aff-rung-req{ font-size:11px; color:var(--pd-text-mute); }

/* apply a code */
.aff-apply{ background:var(--pd-bg-2); border:1px solid var(--pd-line); border-radius:12px; padding:16px 18px; }
.aff-apply-row{ display:flex; gap:9px; margin-top:9px; }
.aff-apply-row input{
  flex:1; min-width:0; padding:11px 13px; background:var(--pd-bg-0); border:1px solid var(--pd-line);
  border-radius:9px; color:var(--pd-text); font-size:15px; text-transform:uppercase;
}
.aff-apply-row input:focus{ outline:none; border-color:var(--pd-line-hover); }
.aff-apply-btn{ flex:0 0 auto; min-width:96px; }

@media (max-width:640px){
  .aff-stats{ grid-template-columns:repeat(2,1fr); }
  .aff-ladder{ grid-template-columns:repeat(2,1fr); }
  .aff-table thead th:nth-child(3), .aff-table tbody td:nth-child(3){ display:none; } /* hide Deposits on phones */
}

/* ============================================================
   ARCADE CHAT REVAMP (2026-06-19)
   Gives the chat real gaming identity while staying on the phase2
   palette (matte warm-grey, brand blue, NO glow): a titled header,
   display-font player names that keep their colour, rank badges
   with icon glyphs, ranked avatar rings, a livelier system line +
   online readout, and a faint brand watermark behind a quiet feed.
   Appended at EOF so it wins over the earlier "calm/muted" chat
   passes. Only markup change is the .chat-title header label.
   ============================================================ */

/* ---- Header: a real title beside the icon-tab cluster ---- */
html[data-theme="phase2"] .chat-head{ align-items:center; gap:8px; }
html[data-theme="phase2"] .chat-title{
  margin-right:auto;
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Sora',sans-serif;
  font-weight:800; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--pd-text,#fafafa);
  white-space:nowrap;
}
html[data-theme="phase2"] .chat-title::before{
  content:''; width:11px; height:11px; flex:none;
  border-radius:3px;
  background:linear-gradient(135deg, var(--pd-blue,#4299e1), #2f6fb0);
  transform:rotate(45deg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
/* Title removed — push the icon cluster to the right edge of the head
   (the .chat-title's margin-right:auto used to do this). */
html[data-theme="phase2"] .chat-icon-tabs{ flex:0 0 auto; margin-left:auto; }

/* ---- Player names: display font, colour restored (gamey, not neon) ---- */
html[data-theme="phase2"] .cmsg-name{
  font-family:'Sora',sans-serif !important;
  font-weight:700 !important;
  font-size:12.5px !important;
  letter-spacing:.004em !important;
  filter:saturate(.92) brightness(1.06) !important;
}

/* ---- Rank badges: an icon glyph before the label (crown / shield /
   star / code / bot), tinted to the badge's accent colour ---- */
html[data-theme="phase2"] .cmsg-rank{
  display:inline-flex !important; align-items:center; gap:3px;
}
html[data-theme="phase2"] .cmsg-rank::before{
  content:''; width:9px; height:9px; flex:none;
  background:currentColor;
  -webkit-mask:var(--rank-ico) center/contain no-repeat;
          mask:var(--rank-ico) center/contain no-repeat;
}
html[data-theme="phase2"] .rank-admin{ --rank-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 8l4.6 3.4L12 4.5l4.4 6.9L21 8l-1.7 11.2H4.7z'/></svg>"); }
html[data-theme="phase2"] .rank-mod{   --rank-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 4 5v6c0 4.6 3.2 7.9 8 9.7 4.8-1.8 8-5.1 8-9.7V5z'/></svg>"); }
html[data-theme="phase2"] .rank-vip{   --rank-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5l2.9 6 6.6.8-4.9 4.5 1.3 6.5L12 17.2 6.1 20.3l1.3-6.5L2.5 9.3l6.6-.8z'/></svg>"); }
html[data-theme="phase2"] .rank-dev{   --rank-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.5 6.5 3 12l5.5 5.5M15.5 6.5 21 12l-5.5 5.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
html[data-theme="phase2"] .rank-bot{   --rank-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4.5' y='7.5' width='15' height='11' rx='3'/><circle cx='9.5' cy='13' r='1.6' fill='white'/><circle cx='14.5' cy='13' r='1.6' fill='white'/></svg>"); }

/* ---- Ranked avatars get a thin accent ring (gamey hierarchy) ---- */
html[data-theme="phase2"] .cmsg:has(.rank-admin) .cmsg-avatar{ box-shadow:0 0 0 1.5px rgba(248,113,113,.65), 0 2px 6px rgba(0,0,0,.4) !important; }
html[data-theme="phase2"] .cmsg:has(.rank-mod) .cmsg-avatar{   box-shadow:0 0 0 1.5px rgba(96,165,250,.65), 0 2px 6px rgba(0,0,0,.4) !important; }
html[data-theme="phase2"] .cmsg:has(.rank-vip) .cmsg-avatar{   box-shadow:0 0 0 1.5px rgba(253,224,71,.7),  0 2px 6px rgba(0,0,0,.4) !important; }
html[data-theme="phase2"] .cmsg:has(.rank-dev) .cmsg-avatar{   box-shadow:0 0 0 1.5px rgba(196,181,253,.65),0 2px 6px rgba(0,0,0,.4) !important; }

/* ---- Row hover: a touch more presence ---- */
html[data-theme="phase2"] .cmsg{ border-radius:7px; transition:background .14s ease; }
html[data-theme="phase2"] .cmsg:hover{ background:rgba(255,255,255,.035); }

/* ---- System line: a centred "event" rule with side hairlines ---- */
html[data-theme="phase2"] .cmsg-system{
  flex:1 1 auto;
  font-family:'Sora',sans-serif !important;
  font-size:10.5px !important; font-weight:700 !important;
  letter-spacing:.12em !important; text-transform:uppercase;
  color:var(--pd-text-mute,#7a8084) !important;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:none !important;
}
html[data-theme="phase2"] .cmsg-system::before,
html[data-theme="phase2"] .cmsg-system::after{
  content:''; height:1px; flex:1; max-width:42px;
  width:auto !important; border-radius:0 !important;
  background:var(--pd-line,rgba(250,250,250,.08)) !important;
  animation:none !important;
}

/* ---- Online readout: add an ONLINE label after the count ---- */
html[data-theme="phase2"] .chat-foot-online::after{
  content:'online';
  font-family:'Inter',sans-serif;
  font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pd-text-mute,#7a8084);
  margin-left:1px;
}

/* ---- Composer: keep the input matte; SEND stays the brand-blue CTA.
   A hair more focus presence so typing feels responsive. ---- */
html[data-theme="phase2"] .chat-input input:focus{
  box-shadow:0 0 0 2px rgba(66,153,225,.22) !important;
}

/* ============================================================
   PROMO CAROUSEL HERO
   The promo carousel now lives above the challenge row as a full-
   width banner (the Discord card moved back into the row beside the
   Pack card). Full content width, crop-free 3:1 — capped so it
   doesn't tower on wide screens. Overrides the 120px in-grid card
   sizing from the .pd-promo base. JS (#pd-promo) is unchanged.
   ============================================================ */
.pd-promo-hero{
  position:relative;
  height:auto !important;
  width:100%;
  margin:0 0 18px;
  aspect-ratio:3 / 1;
  max-height:300px;
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-lg);
  overflow:hidden;
  background:#0e1014;
  cursor:default;
}
@media (max-width:640px){
  .pd-promo-hero{ border-radius:12px; }
}

/* ============================================================
   CHAT — calm rework (2026-06-20)
   The 2026-06-19 arcade pass over-decorated the MESSAGE feed:
   every staff line stacked THREE colour signals — a tinted avatar
   RING + an icon-glyph (crown/shield/star) rank chip + a neon
   username. Strip to ONE clean rank tag, clamp the neon names so
   they settle on the matte field, and bump readability. The
   composer + footer were already calm (see the block at ~41113:
   matte input, quiet blue-on-hover SEND, no-glow online dot), so
   those are intentionally left untouched. Appended at EOF so the
   feed rules win over the arcade pass above.
   ============================================================ */

/* Rail: drop the ambient blue glow so the panel reads fully matte. */
html[data-theme="phase2"] .chat{ box-shadow:none; }

/* Feed: more air + readable type. */
html[data-theme="phase2"] .chat-body{ padding:10px; gap:2px; }
html[data-theme="phase2"] .cmsg{ padding:8px 10px; border-radius:8px; gap:10px; }
html[data-theme="phase2"] .cmsg:hover{ background:rgba(255,255,255,.03); }
html[data-theme="phase2"] .cmsg-body{ font-size:14px !important; line-height:1.45; }
html[data-theme="phase2"] .cmsg-text{ color:#e7ebf2 !important; margin-top:1px; }
html[data-theme="phase2"] .cmsg-mention{ color:var(--pd-blue-accent,#57abf8); font-weight:700; }

/* Avatar: clean circle, single hairline, NO redundant rank ring. */
html[data-theme="phase2"] .cmsg-avatar{
  width:32px !important; height:32px !important;
  border:1px solid var(--pd-line,rgba(250,250,250,.07)) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .cmsg:has(.rank-admin) .cmsg-avatar,
html[data-theme="phase2"] .cmsg:has(.rank-mod) .cmsg-avatar,
html[data-theme="phase2"] .cmsg:has(.rank-vip) .cmsg-avatar,
html[data-theme="phase2"] .cmsg:has(.rank-dev) .cmsg-avatar,
html[data-theme="phase2"] .cmsg:has(.rank-bot) .cmsg-avatar{ box-shadow:none !important; }

/* Name: clean sans, user colour kept but clamped so neon pinks/yellows
   settle onto the matte field instead of vibrating. */
html[data-theme="phase2"] .cmsg-name{
  font-family:'Inter',sans-serif !important;
  font-weight:700 !important; font-size:13.5px !important;
  letter-spacing:0 !important;
  filter:saturate(.78) brightness(1.03) !important;
}

/* Rank: ONE clean squared mono tag — drop the crown/shield/star icon
   glyph; keep the per-rank accent colour set at ~34996. */
html[data-theme="phase2"] .cmsg-rank::before{ display:none !important; }
html[data-theme="phase2"] .cmsg-rank{
  font-family:'Inter',sans-serif !important;
  font-size:9px !important; font-weight:800 !important;
  letter-spacing:.10em !important;
  padding:2px 5px !important; border-radius:4px !important;
  margin-right:6px !important; gap:0 !important;
  vertical-align:middle;
}

/* Chat header: remove the blue tilted-square EMBLEM before "LIVE CHAT"
   (.chat-title::before). NOTE: an earlier pass removed the ::after underline
   here by misreading "the blue thing" — that's been reverted; the only header
   change now is hiding the diamond emblem. */
html[data-theme="phase2"] .chat-title::before{ display:none !important; }

/* ============================================================
   PACK REVEAL CAPTION — clean matte "prize tag" (2026-06-20)
   The won-item caption (name + value) under the landed pack was bare
   floating text that read unfinished and off-brand. Give it the site's
   matte-chip language: a warm-grey plate + hairline + soft depth (NO
   glow / backdrop-blur), a muted uppercase eyebrow name over a hero
   value figure in the rarity colour. CSS-only; overrides the earlier
   "bare text" pass (~40129).
   ============================================================ */
html[data-theme="phase2"] .cases-stage .cs-stage-label{
  flex-direction:column !important;
  align-items:center !important;
  gap:2px !important;
  padding:7px 16px 8px !important;
  background:color-mix(in srgb, var(--pd-bg-2,#22272b) 90%, transparent) !important;
  border:1px solid var(--pd-line,rgba(250,250,250,.07)) !important;
  border-radius:10px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.34) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-theme="phase2"] .cases-stage .cs-stage-label .cs-stage-label-name{
  font-family:'Inter',sans-serif !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.18em !important;
  color:var(--pd-text-mute,#7a8084) !important;
  text-shadow:none !important;
}
html[data-theme="phase2"] .cases-stage .cs-stage-label .cs-stage-label-payout{
  font-family:'Sora','Inter',sans-serif !important;
  font-size:20px !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
  color:var(--it-color,#fff) !important;
  text-shadow:none !important;
}
html[data-theme="phase2"] .cases-stage .cs-stage-label .cs-stage-label-payout .bc-glyph{
  width:17px !important; height:17px !important;
}
/* Brighter neutral for low-rarity wins so the value stays legible on the
   plate (the old #b9c0c8 grey was murky against the matte field). */
html[data-theme="phase2"] .cases-stage .cs-stage-label[data-rarity="common"],
html[data-theme="phase2"] .cases-stage .cs-stage-label[data-rarity="uncommon"]{
  --it-color:#e3e7ec !important;
}

/* ============================================================
   TOPBAR HUD — one unified control size (2026-06-20)
   Every right-cluster control (balance pill, deposit, withdraw,
   sign-in/register, profile, support, chat) was a slightly
   different height + corner radius: profile 44px vs everything
   else 38px, radius split 6px (balance/profile/chat) vs 8px
   (buttons). They now share ONE height (40px) + radius (10px)
   so the HUD reads as a single, lined-up set.
============================================================ */
/* :not(.btn-icon-only) matches the specificity of the earlier normalizer at
   ~line 42571 so this (later in source) wins and lifts deposit/withdraw to the
   shared 40px / 10px too. */
html[data-theme="phase2"] #pd-topbar-right > .btn:not(.btn-icon-only),
html[data-theme="phase2"] #pd-topbar-right > .balance-wrap > .balance,
html[data-theme="phase2"] #pd-topbar-right > .profile{
  height:40px !important;
  border-radius:10px !important;
}
/* Icon-square controls (chat + support) — keep them square at the shared height. */
html[data-theme="phase2"] #pd-topbar-right > .btn.btn-icon-only{
  width:40px !important;
  height:40px !important;
  border-radius:10px !important;
  padding:0 !important;
}
/* Balance pill — drop the residual blue halo (base .balance box-shadow) so it
   sits flat/matte like the buttons instead of faintly glowing. */
html[data-theme="phase2"] #pd-topbar-right > .balance-wrap > .balance{
  box-shadow:none !important;
}
/* Profile chip — match the 40px row, shrink the avatar to fit cleanly, and
   stop the perpetual bobble so the chip sits still + stays baseline-aligned. */
html[data-theme="phase2"] #pd-topbar-right > .profile{
  padding:0 12px 0 5px !important;
}
html[data-theme="phase2"] #pd-topbar-right > .profile .profile-avatar{
  width:30px !important;
  height:30px !important;
  animation:none !important;
}
html[data-theme="phase2"] #pd-topbar-right > .profile .profile-avatar svg,
html[data-theme="phase2"] #pd-topbar-right > .profile .profile-avatar img,
html[data-theme="phase2"] #pd-topbar-right > .profile .profile-avatar > *{
  width:30px !important;
  height:30px !important;
}
html[data-theme="phase2"] #pd-topbar-right > .profile .profile-name{
  font-size:14.5px !important;
  font-weight:700 !important;
}
/* Phones — the relocated HUD (balance + deposit + withdraw + profile +
   support + chat) never compacted on mobile and overflowed the right edge.
   Shrink the controls, tighten the gap, and drop the profile NAME to an
   avatar-only chip so the whole set fits the narrow topbar. */
@media (max-width:640px){
  /* Tighten the bar's own gaps/padding so logo + nav + HUD fit the phone
     width without the right edge clipping. */
  html[data-theme="phase2"] #pd-topbar{ gap:8px !important; padding-left:12px !important; padding-right:12px !important; }
  html[data-theme="phase2"] .pd-topnav-scroll{ margin-left:0 !important; }
  html[data-theme="phase2"] #pd-topbar-right{ gap:6px !important; }
  html[data-theme="phase2"] #pd-topbar-right > .btn:not(.btn-icon-only),
  html[data-theme="phase2"] #pd-topbar-right > .balance-wrap > .balance,
  html[data-theme="phase2"] #pd-topbar-right > .profile{
    height:36px !important;
    border-radius:9px !important;
  }
  html[data-theme="phase2"] #pd-topbar-right > .btn.btn-icon-only{
    width:36px !important; height:36px !important; border-radius:9px !important;
  }
  html[data-theme="phase2"] #pd-topbar-right > .btn:not(.btn-icon-only){
    padding:0 10px !important; font-size:12.5px !important; letter-spacing:.01em !important;
  }
  html[data-theme="phase2"] #pd-topbar-right > .balance-wrap > .balance{
    padding:0 9px !important; font-size:13.5px !important;
  }
  /* The balance already leads with the coin icon, so the trailing glyph is a
     redundant second currency mark — drop it on phones to reclaim width. */
  html[data-theme="phase2"] #pd-topbar-right > .balance-wrap > .balance .balance-label{ display:none !important; }
  html[data-theme="phase2"] #pd-topbar-right > .balance-wrap > .balance .balance-coin-icon,
  html[data-theme="phase2"] #pd-topbar-right > .balance-wrap > .balance .bcoin-icon{
    width:18px !important; height:18px !important;
  }
  /* WITHDRAW is the widest secondary control and the flow is currently dormant
     pre-launch — hide it on phones so the live essentials (balance · deposit ·
     account · support · chat) fit without clipping. It returns on desktop. */
  html[data-theme="phase2"] #pd-topbar-right > #open-withdraw{ display:none !important; }
  /* Slightly smaller logo on phones to give the HUD a touch more room. */
  html[data-theme="phase2"] .pd-topbar-logo-img{ height:38px !important; }
  html[data-theme="phase2"] #pd-topbar-right > .profile{ padding:0 4px !important; gap:0 !important; }
  html[data-theme="phase2"] #pd-topbar-right > .profile .profile-name{ display:none !important; }
  /* Sign-out arrow is redundant on the phone topbar (also on the profile page);
     drop it to reclaim width so the chip is just the tappable avatar. */
  html[data-theme="phase2"] #pd-topbar-right > .profile .profile-signout{ display:none !important; }
  html[data-theme="phase2"] #pd-topbar-right > .profile .profile-avatar{ width:28px !important; height:28px !important; }
  html[data-theme="phase2"] #pd-topbar-right > .profile .profile-avatar svg,
  html[data-theme="phase2"] #pd-topbar-right > .profile .profile-avatar img,
  html[data-theme="phase2"] #pd-topbar-right > .profile .profile-avatar > *{ width:28px !important; height:28px !important; }
}

/* ============================================================
   SELECTED-STATE — unified accent line + soft glow (2026-06-20)
   The in-game option selectors used three different "selected"
   looks (grey fill / solid-blue fill / blue-bordered tint) and
   none had the glow the user asked for. They now share one
   restrained treatment: a tinted bg + 1.5px blue ring (the
   "line") + a soft blue glow. Momentary controls (½/2×/MAX
   quick-bet, on/off switches) are intentionally excluded so we
   never have an always-glowing control. Placed at end-of-file so
   it wins over the earlier per-route !important rules.
============================================================ */
html[data-theme="phase2"] section[data-route="dice"] .seg-toggle .seg-btn.active,
html[data-theme="phase2"] .route[data-route="plinko"] .seg-toggle .seg-btn.active,
html[data-theme="phase2"] section[data-route="plinko"] .seg-toggle .seg-btn.active,
html[data-theme="phase2"] .auto-panel .cp-panel-tab.is-active,
html[data-theme="phase2"] .cp-panel-tabs .cp-panel-tab.is-active,
html[data-theme="phase2"] .cs-tabs .cs-tab.active,
html[data-theme="phase2"] .cs-sort-pills .cs-sort-pill.active,
html[data-theme="phase2"] section[data-route="cases"] .cs-count-pill.active,
html[data-theme="phase2"] section[data-route="cases"] .cs-cb-modes-row .cs-cb-mode.active{
  background:var(--pd-sel-bg) !important;
  color:var(--pd-text) !important;
  box-shadow:var(--pd-sel-ring), var(--pd-sel-glow) !important;
}
/* Static glow only — never animate it (keeps the iOS reduce-motion contract
   and the "no AI-slop pulsing halo" rule). */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] .seg-btn.active,
  html[data-theme="phase2"] .cp-panel-tab.is-active,
  html[data-theme="phase2"] .cs-tab.active{ transition:none !important; }
}

/* ============================================================
   PLINKO AUTO — SPEED SLIDER (2026-06-20)
   Blue variant of the site's range primitive; the filled portion
   (up to the thumb) is painted via --val, set inline by app.js.
============================================================ */
input[type="range"].cp-auto-speed{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; margin:2px 0 0;
  border-radius:99px; cursor:pointer; outline:none;
  background:linear-gradient(90deg,
    var(--pd-blue) 0%,
    var(--pd-blue) var(--val,75%),
    rgba(255,255,255,.12) var(--val,75%),
    rgba(255,255,255,.12) 100%);
}
input[type="range"].cp-auto-speed::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:2px solid var(--pd-blue);
  box-shadow:0 0 0 4px rgba(66,153,225,.18), 0 2px 5px rgba(0,0,0,.45);
  cursor:grab; transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
input[type="range"].cp-auto-speed::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:2px solid var(--pd-blue);
  box-shadow:0 0 0 4px rgba(66,153,225,.18), 0 2px 5px rgba(0,0,0,.45);
  cursor:grab;
}
input[type="range"].cp-auto-speed::-moz-range-track{ background:transparent; height:6px; }
input[type="range"].cp-auto-speed:hover::-webkit-slider-thumb{ transform:scale(1.1); }
input[type="range"].cp-auto-speed:active::-webkit-slider-thumb{ cursor:grabbing; transform:scale(1.16); }
.cp-auto-speed-ends{
  display:flex; justify-content:space-between;
  margin-top:6px;
  font-family:'Manrope','Inter',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--pd-text-mute);
}

/* ============================================================
   LIVE OPENS RAIL — show the site background through it (2026-06-20)
   The rail + its feed cards were flat opaque grey (a later
   `.pd-rightrail{background:var(--pd-bg-0)!important}` had overridden
   the earlier glass treatment), so the Live/Top Opens strip read as
   "off" against the rest of the glass-over-forest chrome. Make the
   rail transparent and the feed cards frosted glass so the misty
   background tints through — the item image, name + price (the card's
   child content) are untouched.
============================================================ */
html[data-theme="phase2"] .pd-rightrail{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-theme="phase2"] .pd-feed-item{
  background:var(--pd-glass-card) !important;
  backdrop-filter:blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(120%) !important;
  border:1px solid var(--pd-line) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
html[data-theme="phase2"] .pd-feed-item:hover{
  background:rgba(46,56,68,.46) !important;
  border-color:rgba(59,167,255,.22) !important;
}

/* ============================================================
   TACTILE IN-GAME CTAs (splits.gg "physical key" feel)
   Extends the centred wallet's premium treatment to the buttons
   players actually press: bet (.btn-primary), cashout (.btn-cashout),
   plinko drop, and battle Join/Create. Adds a glossy top sheen +
   tactile depth (top highlight + dark bottom edge) + a snappy press
   (key sinks 1px on :active), KEEPING each button's own colour
   (blue / green). Replaces the old hover glow-ring with clean depth.

   Scoped under #app (the routes container) so the topbar/wallet and
   anything outside the routes are untouched; #app also boosts
   specificity to (1,2,1) so this beats the per-route / .btn.btn-primary
   overrides without a per-rule edit war. Colour is NEVER overridden —
   only background-image (the sheen), box-shadow, transform, transition.
============================================================ */
/* Target group: per-route action buttons carry their own high-specificity
   rules (e.g. `section[data-route="crash"] #crash-action` = (1,2,2)), so the
   class catch-all is boosted to `#app section[data-route] .btn-*` = (1,3,2)
   and each known action-button id is listed under #app = (2,1,1) — both beat
   the per-route overrides. Colour is left to those rules; we add depth only. */
html[data-theme="phase2"] #app section[data-route] .btn-primary:not(:where(.modal *)),
html[data-theme="phase2"] #app section[data-route] .btn-cashout:not(:where(.modal *)),
html[data-theme="phase2"] #app #crash-action,
html[data-theme="phase2"] #app #dice-roll,
html[data-theme="phase2"] #app #limbo-roll,
html[data-theme="phase2"] #app #slots-spin,
html[data-theme="phase2"] #app #mines-start,
html[data-theme="phase2"] #app #mines-cashout,
html[data-theme="phase2"] #app #bj-deal,
html[data-theme="phase2"] #app #plinko-drop,
html[data-theme="phase2"] :is(#app,#pd-battles-list) .cs-br-join:not(.cs-br-view),
html[data-theme="phase2"] :is(#app,#pd-battles-list) .cs-cb-create{
  /* Depth only — we never touch each button's own colour (some games paint
     their CTA via background-image, so a sheen layer would wipe it). The
     inset top-highlight reads as the gloss edge; the dark inset bottom + soft
     drop give the "physical key" body. */
  box-shadow:
    0 4px 12px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 0 rgba(0,0,0,.22) !important;
  transition:
    transform var(--motion-snap,120ms) var(--pd-ease-smooth),
    box-shadow var(--motion-fast,180ms) var(--pd-ease-smooth),
    filter var(--motion-fast,180ms) var(--pd-ease-smooth),
    background-color var(--motion-fast,180ms) var(--pd-ease-smooth) !important;
}
html[data-theme="phase2"] #app section[data-route] .btn-primary:not(:where(.modal *)):hover,
html[data-theme="phase2"] #app section[data-route] .btn-cashout:not(:where(.modal *)):hover,
html[data-theme="phase2"] #app #crash-action:hover,
html[data-theme="phase2"] #app #dice-roll:hover,
html[data-theme="phase2"] #app #limbo-roll:hover,
html[data-theme="phase2"] #app #slots-spin:hover,
html[data-theme="phase2"] #app #mines-start:hover,
html[data-theme="phase2"] #app #mines-cashout:hover:not(:disabled),
html[data-theme="phase2"] #app #bj-deal:hover,
html[data-theme="phase2"] #app #plinko-drop:hover,
html[data-theme="phase2"] :is(#app,#pd-battles-list) .cs-br-join:not(.cs-br-view):hover,
html[data-theme="phase2"] :is(#app,#pd-battles-list) .cs-cb-create:hover:not(:disabled){
  transform:translateY(-1px) !important;
  filter:brightness(1.06);
  box-shadow:
    0 8px 20px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -2px 0 rgba(0,0,0,.22) !important;
}
html[data-theme="phase2"] #app section[data-route] .btn-primary:not(:where(.modal *)):active,
html[data-theme="phase2"] #app section[data-route] .btn-cashout:not(:where(.modal *)):active,
html[data-theme="phase2"] #app #crash-action:active,
html[data-theme="phase2"] #app #dice-roll:active,
html[data-theme="phase2"] #app #limbo-roll:active,
html[data-theme="phase2"] #app #slots-spin:active,
html[data-theme="phase2"] #app #mines-start:active,
html[data-theme="phase2"] #app #mines-cashout:active:not(:disabled),
html[data-theme="phase2"] #app #bj-deal:active,
html[data-theme="phase2"] #app #plinko-drop:active,
html[data-theme="phase2"] :is(#app,#pd-battles-list) .cs-br-join:not(.cs-br-view):active,
html[data-theme="phase2"] :is(#app,#pd-battles-list) .cs-cb-create:active:not(:disabled){
  transform:translateY(1px) !important;
  filter:brightness(.98);
  box-shadow:
    0 2px 6px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 2px 5px rgba(0,0,0,.26) !important;
}
/* Disabled CTAs stay flat (no tactile depth / press). */
html[data-theme="phase2"] #app section[data-route] .btn-primary:disabled,
html[data-theme="phase2"] #app section[data-route] .btn-cashout:disabled,
html[data-theme="phase2"] #app #mines-cashout:disabled,
html[data-theme="phase2"] :is(#app,#pd-battles-list) .cs-cb-create:disabled{
  box-shadow:none !important;
  transform:none !important;
}
/* Reduced motion — keep the depth, drop the translate. */
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] #app section[data-route] .btn-primary:hover,
  html[data-theme="phase2"] #app section[data-route] .btn-primary:active,
  html[data-theme="phase2"] #app section[data-route] .btn-cashout:hover,
  html[data-theme="phase2"] #app section[data-route] .btn-cashout:active,
  html[data-theme="phase2"] #app #crash-action:hover, html[data-theme="phase2"] #app #crash-action:active,
  html[data-theme="phase2"] #app #dice-roll:hover, html[data-theme="phase2"] #app #dice-roll:active,
  html[data-theme="phase2"] #app #limbo-roll:hover, html[data-theme="phase2"] #app #limbo-roll:active,
  html[data-theme="phase2"] #app #slots-spin:hover, html[data-theme="phase2"] #app #slots-spin:active,
  html[data-theme="phase2"] #app #mines-start:hover, html[data-theme="phase2"] #app #mines-start:active,
  html[data-theme="phase2"] #app #mines-cashout:hover, html[data-theme="phase2"] #app #mines-cashout:active,
  html[data-theme="phase2"] #app #bj-deal:hover, html[data-theme="phase2"] #app #bj-deal:active,
  html[data-theme="phase2"] #app #plinko-drop:hover, html[data-theme="phase2"] #app #plinko-drop:active,
  html[data-theme="phase2"] :is(#app,#pd-battles-list) .cs-br-join:hover,
  html[data-theme="phase2"] :is(#app,#pd-battles-list) .cs-br-join:active,
  html[data-theme="phase2"] :is(#app,#pd-battles-list) .cs-cb-create:hover,
  html[data-theme="phase2"] :is(#app,#pd-battles-list) .cs-cb-create:active{
    transform:none !important;
  }
}

/* ============================================================
   DEPOSIT MODAL — unified premium skin (one cohesive shade)
   The modal read as "two shades": its custom panels (.dep-coin, .cd-*,
   .rb-* cards) are matte-NAVY, but the global phase2 modal skin forced
   every shared <input>/.btn-primary onto GREY (--pd-bg-2) + a grey-blue
   fill — so inputs/buttons clashed with the navy panels. This id-scoped
   layer out-specifies the phase2 .modal rules and pulls ALL stages
   (chooser · crypto · coin-detail · Robux) onto ONE navy palette with the
   site's premium blue "physical key" CTAs. Surfaces + type only; the
   existing per-stage layouts are left intact.
============================================================ */

/* ---- Inputs → matte navy (restores rb-input's intended navy that the grey
   phase2 skin had overridden). The crypto estimate stays a flat ledger value
   (its own #deposit-modal .cd-est-input rule, excluded here). ---- */
#deposit-modal input[type="text"]:not(.cd-est-input),
#deposit-modal input[type="number"]:not(.cd-est-input),
#deposit-modal input[type="email"]:not(.cd-est-input),
#deposit-modal input[type="search"]:not(.cd-est-input),
#deposit-modal textarea{
  background:var(--bg-0) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:12px !important;
  font-family:'Manrope','Inter',sans-serif !important;
  box-shadow:none !important;
  transition:border-color .15s var(--ease-smooth,ease), box-shadow .15s var(--ease-smooth,ease) !important;
}
#deposit-modal input:not(.cd-est-input):hover{ border-color:var(--line-2) !important; }
#deposit-modal input:not(.cd-est-input):focus,
#deposit-modal textarea:focus{
  border-color:rgba(59,130,246,.6) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.16) !important;
}

/* ---- Primary CTA → the site's premium blue "physical key" (matches the
   topbar Deposit + in-game CTAs): glossy top highlight, dark bottom edge,
   soft cast shadow, snappy 1px press. ---- */
#deposit-modal .btn-primary{
  /* Clean blue depth (NOT var(--magenta) — that resolves to purple here). */
  background:linear-gradient(180deg,
    #5a97ff 0%,
    var(--pink,#3B82F6) 52%,
    #1d4ed8 100%) !important;
  border:none !important;
  color:#fff !important;
  border-radius:12px !important;
  font-family:'Manrope','Inter',sans-serif !important;font-weight:800 !important;
  box-shadow:
    0 6px 16px rgba(40,90,200,.30),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.20) !important;
  transition:filter .15s var(--ease-smooth,ease), transform .12s var(--ease-smooth,ease), box-shadow .15s var(--ease-smooth,ease) !important;
}
#deposit-modal .btn-primary:hover:not(:disabled){ filter:brightness(1.06); }
#deposit-modal .btn-primary:active:not(:disabled){
  transform:translateY(1px);
  box-shadow:
    0 3px 8px rgba(40,90,200,.26),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 2px 5px rgba(0,0,0,.24) !important;
}
#deposit-modal .btn-primary:disabled{ box-shadow:none !important;filter:saturate(.65) }
#deposit-modal .btn-primary .btn-shine{ display:none !important; }

/* ---- Secondary / outline → matte navy chip, tactile press. ---- */
#deposit-modal .btn-outline{
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  color:var(--text-dim) !important;
  border-radius:12px !important;
  font-family:'Manrope','Inter',sans-serif !important;font-weight:700 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition:background .15s var(--ease-smooth,ease), border-color .15s var(--ease-smooth,ease), transform .12s var(--ease-smooth,ease) !important;
}
#deposit-modal .btn-outline:hover{ background:var(--surface-3) !important;border-color:var(--line-2) !important;color:var(--text) !important; }
#deposit-modal .btn-outline:active{ transform:translateY(1px); }

/* ---- Type cohesion — section/stage heads onto the modal's Manrope family
   (was a mix of Sora + Inter). ---- */
#deposit-modal .dep-section-title,
#deposit-modal .rb-title{
  font-family:'Manrope','Inter',sans-serif !important;
  letter-spacing:-.012em;
}
@media (prefers-reduced-motion: reduce){
  #deposit-modal .btn-primary:active:not(:disabled),
  #deposit-modal .btn-outline:active{ transform:none; }
}

/* ============================================================
   "PACK CONTAINS" ITEM GRID — single authoritative premium skin.
   The card had ~5 conflicting rule-sets across the file (open-view +
   catalog-view + legacy), several painting a GREY #1c1f29 fill that
   didn't fit the navy site. Scope to the grid id (#cs-items-grid →
   id specificity) at end-of-file + !important so THIS wins in BOTH the
   catalog and the pack-opener views. Matte navy, hairline border, a
   subtle rarity spotlight + clean bottom bar, scannable corner pct
   pill, recessed value chip. No grey, no glow halos.
============================================================ */
#cs-items-grid .cig-item{
  position:relative !important;
  border-radius:14px !important;
  padding:13px 11px 15px !important;
  display:flex !important; flex-direction:column !important; align-items:center !important;
  text-align:center !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 46%),
    #0f1730 !important;
  border:1px solid rgba(255,255,255,.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 6px 18px rgba(0,0,0,.34) !important;
  overflow:hidden !important;
  transition:transform .2s var(--ease-smooth,ease), border-color .2s var(--ease-smooth,ease), box-shadow .2s var(--ease-smooth,ease) !important;
}
#cs-items-grid .cig-item:hover{
  transform:translateY(-3px) !important;
  border-color:color-mix(in srgb, var(--it-color, #3B82F6) 50%, rgba(255,255,255,.07)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 26px rgba(0,0,0,.42) !important;
}
/* Subtle rarity spotlight behind the artwork (premium, not a slop halo). */
#cs-items-grid .cig-icon-wrap{
  position:relative !important; width:86px !important; height:86px !important;
  display:grid !important; place-items:center !important; margin-bottom:9px !important;
  flex:0 0 auto !important; background:transparent !important; border:0 !important; box-shadow:none !important;
}
#cs-items-grid .cig-icon-wrap::before{
  content:'' !important; position:absolute !important; inset:2px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, var(--it-color, transparent) 0%, transparent 64%) !important;
  opacity:.14 !important; filter:blur(13px) !important; z-index:0 !important;
}
#cs-items-grid .cig-img{
  position:relative !important; z-index:1 !important;
  max-width:100% !important; max-height:100% !important; object-fit:contain !important;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.5)) !important;
}
#cs-items-grid .cig-name{
  font-family:'Manrope','Urbanist',sans-serif !important;
  font-weight:600 !important; font-size:13.5px !important;
  color:var(--text-dim, #d8e3f5) !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  max-width:100% !important; margin:0 0 8px !important;
}
/* Value chip — coin glyph + payout in a recessed pill. */
#cs-items-grid .cig-payout{
  display:inline-flex !important; align-items:center !important; gap:5px !important;
  font-family:'Manrope','Urbanist',sans-serif !important;
  font-weight:800 !important; font-size:13.5px !important;
  color:var(--text, #fff) !important; font-variant-numeric:tabular-nums !important;
  background:rgba(0,0,0,.30) !important; border:1px solid rgba(255,255,255,.07) !important;
  padding:4px 11px !important; border-radius:8px !important;
}
#cs-items-grid .cig-payout .bc-glyph{ width:14px !important; height:14px !important; }
/* Drop-chance — clean top-left corner pill (scannable EV). */
#cs-items-grid .cig-pct,
#cs-items-grid .cig-drop-pct{
  position:absolute !important; top:8px !important; left:8px !important; right:auto !important;
  transform:none !important;   /* kill a competing translateX(-50%) that pushed the pill off-card */
  background:rgba(7,10,22,.6) !important; border:1px solid rgba(255,255,255,.07) !important;
  color:var(--text-dim, #d8e3f5) !important;
  font-family:'Manrope','Urbanist',sans-serif !important;
  font-weight:700 !important; font-size:11px !important;
  padding:2px 7px !important; border-radius:6px !important;
  letter-spacing:.02em !important; opacity:1 !important; z-index:3 !important;
}
/* Single clean bottom rarity bar via ::after; neutralize the open-view ::before
   strip (it carried a glow + double-drew the bar). */
#cs-items-grid .cig-item::after{
  content:"" !important; position:absolute !important;
  left:18% !important; right:18% !important; bottom:0 !important; top:auto !important;
  height:2px !important; border-radius:99px !important;
  background:var(--it-color, rgba(125,211,252,.8)) !important;
  box-shadow:none !important; opacity:.9 !important; transform:none !important; animation:none !important;
  z-index:2 !important;
}
#cs-items-grid .cig-item::before{ display:none !important; }
@media (prefers-reduced-motion: reduce){
  #cs-items-grid .cig-item:hover{ transform:none !important; }
}

/* ============================================================
   ADMIN PANEL — authoritative matte-navy premium skin.
   The .adm-* panel was authored against the old gold/translucent-white
   palette (3 visual eras) and looked mismatched vs the navy site. This
   end-of-file block scoped to section[data-route="admin"] re-skins every
   surface onto the site's matte-navy system: opaque navy panels, hairline
   borders, Manrope heads, SQUARED rank/status tags (no pill chips), calm
   hover (no springs/glow), tactile action buttons. No new behaviour.
============================================================ */
#A{}  /* anchor */
html[data-theme="phase2"] section[data-route="admin"] .adm-shell{
  max-width:1180px; margin:0 auto; padding:18px 24px 56px;
}
/* ---- Header: flat matte panel (drop the blue radial + 60px glow). ---- */
html[data-theme="phase2"] section[data-route="admin"] .adm-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), #101a33 !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.34) !important;
  padding:16px 20px !important;
  margin-bottom:16px;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-header-left{ display:flex; align-items:center; gap:12px; }
html[data-theme="phase2"] section[data-route="admin"] .adm-title{
  font-family:'Manrope','Inter',sans-serif !important; font-weight:800 !important; font-size:21px !important;
  color:#fff !important; letter-spacing:-.01em !important; display:flex; align-items:center; gap:10px; margin:0 !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-shield{
  width:26px !important; height:26px !important; color:var(--pink,#3B82F6) !important;
  filter:none !important;   /* drop the gold glow */
}
/* Rank pill -> squared tag. */
html[data-theme="phase2"] section[data-route="admin"] .adm-rank{
  font-family:'Inter',sans-serif !important; font-weight:800 !important; font-size:11px !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  color:#bcd5ff !important; background:rgba(59,130,246,.14) !important;
  border:1px solid rgba(96,165,250,.30) !important; border-radius:6px !important;
  padding:3px 9px !important; box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-header-right{ display:flex; gap:10px; flex-wrap:wrap; }
html[data-theme="phase2"] section[data-route="admin"] .adm-quick{
  display:flex; flex-direction:column; gap:2px; align-items:flex-end;
  background:rgba(0,0,0,.22) !important; border:1px solid rgba(255,255,255,.06) !important;
  border-radius:10px !important; padding:8px 14px !important; min-width:84px;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-quick-label{
  font-family:'Inter',sans-serif !important; font-size:10.5px !important; font-weight:700 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important; color:var(--text-mute,#8a9bb8) !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-quick-val{
  font-family:'Manrope','Inter',sans-serif !important; font-weight:800 !important; font-size:17px !important;
  color:#fff !important; font-variant-numeric:tabular-nums !important;
}
/* ---- Tab nav: calm pills -> clean segmented row. ---- */
html[data-theme="phase2"] section[data-route="admin"] .adm-nav{
  display:flex; gap:4px; flex-wrap:wrap; margin-bottom:16px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:5px;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-tab{
  font-family:'Manrope','Inter',sans-serif !important; font-weight:700 !important; font-size:13.5px !important;
  color:var(--text-mute,#8a9bb8) !important; background:transparent !important; border:none !important;
  border-radius:8px !important; padding:8px 16px !important; cursor:pointer;
  transform:none !important; box-shadow:none !important;
  transition:background .15s var(--ease-smooth,ease), color .15s var(--ease-smooth,ease) !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-tab:hover{ color:#fff !important; background:rgba(255,255,255,.04) !important; transform:none !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-tab.active{
  color:#fff !important;
  background:linear-gradient(180deg, color-mix(in srgb,#fff 12%, var(--pink,#3B82F6)), var(--pink,#3B82F6)) !important;
  box-shadow:0 2px 8px rgba(40,90,200,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
/* ---- Panes / sub-panels ---- */
html[data-theme="phase2"] section[data-route="admin"] .adm-pane{
  background:transparent !important; border:none !important; padding:0 !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-search-row,
html[data-theme="phase2"] section[data-route="admin"] .adm-filter-row,
html[data-theme="phase2"] section[data-route="admin"] .adm-au-toolbar,
html[data-theme="phase2"] section[data-route="admin"] .adm-dash-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-au-toolbar,
html[data-theme="phase2"] section[data-route="admin"] .adm-dash-head{ justify-content:space-between; }
/* Inputs / selects -> matte navy. */
html[data-theme="phase2"] section[data-route="admin"] .adm-input,
html[data-theme="phase2"] section[data-route="admin"] .adm-select{
  background:var(--bg-0,#070A14) !important; border:1px solid rgba(255,255,255,.08) !important;
  color:#fff !important; border-radius:10px !important; padding:11px 14px !important;
  font-family:'Manrope','Inter',sans-serif !important; font-size:14px !important; box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-search-row .adm-input{ flex:1; min-width:0; }
html[data-theme="phase2"] section[data-route="admin"] .adm-input:focus,
html[data-theme="phase2"] section[data-route="admin"] .adm-select:focus{
  outline:none !important; border-color:rgba(59,130,246,.6) !important; box-shadow:0 0 0 3px rgba(59,130,246,.16) !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-au-size{ width:64px !important; flex:0 0 auto; text-align:center; }
html[data-theme="phase2"] section[data-route="admin"] .adm-label{ color:var(--text-mute,#8a9bb8); font-weight:700; font-size:13px; }
html[data-theme="phase2"] section[data-route="admin"] .adm-empty{
  color:var(--text-mute,#8a9bb8) !important; font-family:'Inter',sans-serif !important; font-size:14px !important;
  text-align:center; padding:26px 16px !important;
}
/* ---- Result rows + detail + stat tiles ---- */
html[data-theme="phase2"] section[data-route="admin"] .adm-row{
  background:#101a33 !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
  transform:none !important;
  transition:border-color .15s var(--ease-smooth,ease), background .15s var(--ease-smooth,ease) !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-row:hover{ transform:none !important; background:#13203d !important; border-color:rgba(96,165,250,.28) !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-detail{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), #101a33 !important;
  border:1px solid rgba(255,255,255,.07) !important; border-radius:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.34) !important;
  padding:20px !important; margin-top:16px;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-detail-name{
  font-family:'Manrope','Inter',sans-serif !important; font-weight:800 !important; font-size:20px !important; color:#fff !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-stat{
  background:rgba(0,0,0,.24) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:11px !important;
  padding:11px 13px !important; box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-stat-label{
  font-family:'Inter',sans-serif !important; font-size:10.5px !important; font-weight:700 !important;
  letter-spacing:.07em !important; text-transform:uppercase !important; color:var(--text-mute,#8a9bb8) !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-stat-val{
  font-family:'Manrope','Inter',sans-serif !important; font-weight:800 !important; font-size:17px !important; color:#fff !important;
  font-variant-numeric:tabular-nums !important; margin-top:2px;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-section-title{
  font-family:'Inter',sans-serif !important; font-size:11.5px !important; font-weight:700 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--text-mute,#8a9bb8) !important;
  margin:20px 0 10px !important;
}
/* ---- Tables: navy header + hairline rows ---- */
html[data-theme="phase2"] section[data-route="admin"] .adm-table-wrap{
  background:#0d1730 !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:12px !important;
  overflow:auto; box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-table{ width:100%; border-collapse:collapse; font-family:'Inter',sans-serif; }
html[data-theme="phase2"] section[data-route="admin"] .adm-table thead th{
  font-size:10.5px !important; font-weight:700 !important; letter-spacing:.07em !important; text-transform:uppercase !important;
  color:var(--text-mute,#8a9bb8) !important; text-align:left; padding:11px 14px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important; background:rgba(0,0,0,.22) !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-table tbody td{
  padding:11px 14px !important; font-size:13.5px !important; color:var(--text-dim,#d8e3f5) !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important; font-variant-numeric:tabular-nums;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-table tbody tr:last-child td{ border-bottom:none !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-table tbody tr:hover td{ background:rgba(96,165,250,.05) !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-table .muted{ color:var(--text-mute,#8a9bb8) !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-table .pos{ color:#28c76f !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-table .neg{ color:#ef4444 !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-table code{ font-family:'JetBrains Mono','Inter',monospace; font-size:12px; color:#cfe0ff; }
/* ---- Rank / status TAGS (squared, not pills) ---- */
html[data-theme="phase2"] section[data-route="admin"] .adm-row-rank,
html[data-theme="phase2"] section[data-route="admin"] .adm-au-rank,
html[data-theme="phase2"] section[data-route="admin"] .adm-wd-badge{
  display:inline-block; font-family:'Inter',sans-serif !important; font-weight:800 !important; font-size:10.5px !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  border-radius:5px !important; padding:2px 7px !important; box-shadow:none !important;
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.10) !important; color:var(--text-dim,#d8e3f5) !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-wd-badge.pending{ background:rgba(245,158,11,.12) !important; border-color:rgba(245,158,11,.32) !important; color:#fbbf24 !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-wd-badge.confirmed,
html[data-theme="phase2"] section[data-route="admin"] .adm-wd-badge.paid{ background:rgba(40,199,111,.12) !important; border-color:rgba(40,199,111,.32) !important; color:#34d399 !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-wd-badge.failed,
html[data-theme="phase2"] section[data-route="admin"] .adm-wd-badge.cancelled{ background:rgba(239,68,68,.12) !important; border-color:rgba(239,68,68,.30) !important; color:#f87171 !important; }
/* ---- Dashboard cards ---- */
html[data-theme="phase2"] section[data-route="admin"] .adm-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:8px; }
html[data-theme="phase2"] section[data-route="admin"] .adm-card{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), #101a33 !important;
  border:1px solid rgba(255,255,255,.07) !important; border-radius:13px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 5px 14px rgba(0,0,0,.30) !important; padding:15px 16px !important;
  transition:transform .16s var(--ease-smooth,ease), border-color .16s var(--ease-smooth,ease) !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-card-tap{ cursor:pointer; }
html[data-theme="phase2"] section[data-route="admin"] .adm-card-tap:hover{ transform:translateY(-2px); border-color:rgba(96,165,250,.30) !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-card-label{
  font-family:'Inter',sans-serif !important; font-size:10.5px !important; font-weight:700 !important;
  letter-spacing:.07em !important; text-transform:uppercase !important; color:var(--text-mute,#8a9bb8) !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-card-val{
  font-family:'Manrope','Inter',sans-serif !important; font-weight:800 !important; font-size:23px !important; color:#fff !important;
  font-variant-numeric:tabular-nums !important; margin-top:3px;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-card-sub{ font-family:'Inter',sans-serif !important; font-size:12px !important; color:var(--text-mute,#8a9bb8) !important; margin-top:2px; }
html[data-theme="phase2"] section[data-route="admin"] .adm-card-profit .adm-card-val{ color:#34d399 !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-card-pending{ border-color:rgba(245,158,11,.28) !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-card-pending .adm-card-val{ color:#fbbf24 !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-dash-head-title{ font-family:'Manrope','Inter',sans-serif !important; font-weight:800 !important; font-size:17px !important; color:#fff !important; display:flex; align-items:center; gap:10px; }
html[data-theme="phase2"] section[data-route="admin"] .adm-dash-window{ font-family:'Inter',sans-serif !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute,#8a9bb8) !important; }
/* ---- Action buttons + paging: tactile, calm ---- */
html[data-theme="phase2"] section[data-route="admin"] .adm-action-btn,
html[data-theme="phase2"] section[data-route="admin"] .adm-au-page-btn{
  font-family:'Manrope','Inter',sans-serif !important; font-weight:700 !important; font-size:13px !important;
  color:var(--text-dim,#d8e3f5) !important; background:var(--surface-2,#161E36) !important;
  border:1px solid rgba(255,255,255,.08) !important; border-radius:10px !important; padding:9px 14px !important; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition:background .15s var(--ease-smooth,ease), border-color .15s var(--ease-smooth,ease), transform .12s var(--ease-smooth,ease) !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-action-btn:hover,
html[data-theme="phase2"] section[data-route="admin"] .adm-au-page-btn:hover:not(:disabled){ background:var(--surface-3,#1B2541) !important; border-color:rgba(96,165,250,.30) !important; color:#fff !important; transform:none !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-action-btn:active,
html[data-theme="phase2"] section[data-route="admin"] .adm-au-page-btn:active{ transform:translateY(1px); }
html[data-theme="phase2"] section[data-route="admin"] .adm-au-page-btn:disabled{ opacity:.4; cursor:not-allowed; }
html[data-theme="phase2"] section[data-route="admin"] .adm-action-credit{ background:rgba(40,199,111,.14) !important; border-color:rgba(40,199,111,.34) !important; color:#5ee0a0 !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-action-debit{ background:rgba(245,158,11,.12) !important; border-color:rgba(245,158,11,.30) !important; color:#fbbf24 !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-action-ban{ background:rgba(239,68,68,.12) !important; border-color:rgba(239,68,68,.30) !important; color:#f87171 !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-action-unban{ background:rgba(59,130,246,.14) !important; border-color:rgba(96,165,250,.34) !important; color:#8fb8ff !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-detail-actions,
html[data-theme="phase2"] section[data-route="admin"] .adm-actions-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
/* Rank control — compact select + button inline in the detail actions row. */
html[data-theme="phase2"] section[data-route="admin"] .adm-rank-ctl{ display:inline-flex; align-items:center; gap:6px; }
html[data-theme="phase2"] section[data-route="admin"] .adm-rank-select{ width:104px !important; min-width:0 !important; padding:8px 10px !important; font-size:13px !important; }
/* ---- Mobile ---- */
@media (max-width:760px){
  html[data-theme="phase2"] section[data-route="admin"] .adm-shell{ padding:14px 12px 48px; }
  html[data-theme="phase2"] section[data-route="admin"] .adm-header{ flex-direction:column; align-items:flex-start; gap:12px; }
  html[data-theme="phase2"] section[data-route="admin"] .adm-header-right{ width:100%; }
  html[data-theme="phase2"] section[data-route="admin"] .adm-quick{ flex:1; align-items:flex-start; min-width:0; }
  html[data-theme="phase2"] section[data-route="admin"] .adm-nav{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  html[data-theme="phase2"] section[data-route="admin"] .adm-tab{ white-space:nowrap; flex:0 0 auto; }
  html[data-theme="phase2"] section[data-route="admin"] .adm-cards{ grid-template-columns:repeat(2,1fr); }
  html[data-theme="phase2"] section[data-route="admin"] .adm-card-val{ font-size:20px !important; }
}

/* ============================================================================
   ADMIN · Settings pane — runtime operational config (matte-navy, squared,
   no glow). Scoped under section[data-route="admin"] at end-of-file so it
   beats the phase2-era admin rules without !important wars on layout.
   ========================================================================== */
html[data-theme="phase2"] section[data-route="admin"] .adm-set-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; margin-top:4px;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-set-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), #101a33 !important;
  border:1px solid rgba(255,255,255,.07) !important; border-radius:14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.30) !important;
  padding:16px 16px 18px !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-set-eyebrow{
  font-family:'Inter',sans-serif !important; font-size:11px !important; font-weight:700 !important;
  letter-spacing:.13em !important; text-transform:uppercase !important; color:var(--text-mute,#8a9bb8) !important;
  margin-bottom:12px !important;
}
/* effective-state row */
html[data-theme="phase2"] section[data-route="admin"] .adm-set-state{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
html[data-theme="phase2"] section[data-route="admin"] .adm-set-flag{
  font-family:'Manrope','Inter',sans-serif !important; font-weight:800 !important; font-size:11.5px !important;
  letter-spacing:.08em !important; padding:4px 9px !important; border-radius:6px !important; border:1px solid transparent;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-set-flag.on{ color:#5ee0a0 !important; background:rgba(40,199,111,.13) !important; border-color:rgba(40,199,111,.32) !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-set-flag.off{ color:#f87171 !important; background:rgba(239,68,68,.12) !important; border-color:rgba(239,68,68,.30) !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-set-state-note{ font-family:'Inter',sans-serif; font-size:12px; color:var(--text-mute,#8a9bb8); }
/* hairline ledger */
html[data-theme="phase2"] section[data-route="admin"] .adm-set-ledger{ margin:0 0 13px; padding:0; border-top:1px solid rgba(255,255,255,.06); }
html[data-theme="phase2"] section[data-route="admin"] .adm-set-line{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
html[data-theme="phase2"] section[data-route="admin"] .adm-set-line dt{ font-family:'Inter',sans-serif; font-size:12.5px; color:var(--text-mute,#8a9bb8); margin:0; }
html[data-theme="phase2"] section[data-route="admin"] .adm-set-line dd{ font-family:'Manrope','Inter',sans-serif; font-weight:700; font-size:13px; color:#dbe6fb; margin:0; }
html[data-theme="phase2"] section[data-route="admin"] .adm-set-line code,
html[data-theme="phase2"] section[data-route="admin"] .adm-set-hint code{ font-family:'JetBrains Mono','SFMono-Regular',monospace; font-size:11.5px; color:#9db8e8; background:rgba(0,0,0,.28); padding:1px 5px; border-radius:4px; }
/* toggle */
html[data-theme="phase2"] section[data-route="admin"] .adm-set-toggle{ display:flex; align-items:center; gap:9px; cursor:pointer; font-family:'Manrope','Inter',sans-serif; font-weight:700; font-size:14px; color:#eaf1ff; }
html[data-theme="phase2"] section[data-route="admin"] .adm-set-toggle input{ width:17px; height:17px; accent-color:#3b82f6; cursor:pointer; }
html[data-theme="phase2"] section[data-route="admin"] .adm-set-dim{ color:var(--text-mute,#8a9bb8); font-weight:600; }
/* helper text */
html[data-theme="phase2"] section[data-route="admin"] .adm-set-hint{ font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.5; color:var(--text-mute,#8a9bb8); margin:11px 0 0; }
html[data-theme="phase2"] section[data-route="admin"] .adm-set-hint strong{ color:#dbe6fb; font-weight:700; }
/* number field + unit */
html[data-theme="phase2"] section[data-route="admin"] .adm-set-field{ display:flex; align-items:center; gap:10px; margin-top:12px; }
html[data-theme="phase2"] section[data-route="admin"] .adm-set-field .adm-input{ flex:1; min-width:0; }
html[data-theme="phase2"] section[data-route="admin"] .adm-set-unit{ font-family:'Manrope','Inter',sans-serif; font-weight:700; font-size:13px; color:var(--text-mute,#8a9bb8); white-space:nowrap; }
/* save row */
html[data-theme="phase2"] section[data-route="admin"] .adm-set-actions{ display:flex; align-items:center; gap:12px; margin-top:18px; }

/* ============================================================================
   ADMIN · player-detail responsible-gaming controls (set/lift self-exclusion +
   deposit limits). Matte-navy, squared, no glow — same family as the rest.
   ========================================================================== */
html[data-theme="phase2"] section[data-route="admin"] .adm-rg-ctl{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px;
  margin-top:4px; padding:14px; border:1px solid rgba(255,255,255,.07);
  border-radius:12px; background:rgba(0,0,0,.18);
}
html[data-theme="phase2"] section[data-route="admin"] .adm-rg-field{ display:flex; flex-direction:column; gap:5px; }
html[data-theme="phase2"] section[data-route="admin"] .adm-rg-label{
  font-family:'Inter',sans-serif !important; font-size:10.5px !important; font-weight:700 !important;
  letter-spacing:.07em !important; text-transform:uppercase !important; color:var(--text-mute,#8a9bb8) !important;
}
html[data-theme="phase2"] section[data-route="admin"] .adm-rg-select{ width:128px !important; min-width:0 !important; padding:9px 10px !important; font-size:13px !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-rg-num{ width:104px !important; min-width:0 !important; padding:9px 10px !important; font-size:13px !important; }
html[data-theme="phase2"] section[data-route="admin"] .adm-rg-ctl .adm-action-btn{ margin-bottom:1px; }
html[data-theme="phase2"] section[data-route="admin"] .adm-rg-hint{
  font-family:'Inter',sans-serif; font-size:12px; line-height:1.5; color:var(--text-mute,#8a9bb8); margin:9px 0 2px;
}

/* ============================================================================
   HOME · Battle Highlights rail — premium lifted panels on the new grey
   gradient. Scoped to #pd-battles-list ONLY (the Packs/Battles lobby keeps its
   own treatment). Rows pick up a faint top sheen + soft drop shadow so they
   read as panels under a light, with a touch more breathing room between them —
   cohesive with the backdrop, not stickers floating on it.
   ========================================================================== */
html[data-theme="phase2"] #pd-battles-list{ gap:10px; }
html[data-theme="phase2"] #pd-battles-list .cs-battle-row{
  background:
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,0) 42%),
    var(--pd-bg-2) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 6px 18px rgba(0,0,0,.30) !important;
  transition:background-color .18s var(--pd-ease-smooth, ease),
             border-color .18s var(--pd-ease-smooth, ease),
             box-shadow .2s var(--pd-ease-smooth, ease),
             transform .2s var(--pd-ease-spring, ease) !important;
}
html[data-theme="phase2"] #pd-battles-list .cs-battle-row:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 46%),
    var(--pd-bg-2) !important;
  border-color:var(--pd-line-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 26px rgba(0,0,0,.38) !important;
  transform:translateY(-1px) !important;
}

/* ============================================================================
   SLOTS · Payouts paytable — matte professional re-skin. Authoritative, scoped
   to #slots-paytable (id beats the several .paytable-v2 class-era rules), at
   end-of-file. The old grid read as a "rainbow" of glowing tier-tinted/bordered
   cards with colored multipliers (AI-slop). This makes every card a UNIFORM
   matte-navy panel, keeps a single small squared rarity eyebrow as the only
   colour cue (reusing the per-tier --tier vars already set on each card), gives
   near-white multipliers, and a quiet hover (subtle lift + hairline brighten,
   no glow, no jumpy image scale). Matches the admin/topbar restraint.
   ========================================================================== */
html[data-theme="phase2"] #slots-paytable.paytable-v2{
  background:var(--pd-bg-1, #161a1d) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:14px !important;
}
/* Uniform matte cards — drop the per-tier tint + tier border so the grid reads
   as a calm ledger, not a row of glowing coloured cards. */
html[data-theme="phase2"] #slots-paytable .pt-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 46%),
    #141a24 !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
  gap:10px !important;
  padding:13px 9px 14px !important;
  transition:border-color .18s ease, background-color .18s ease,
             transform .2s cubic-bezier(.16,1,.3,1) !important;
}
html[data-theme="phase2"] #slots-paytable .pt-card:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(255,255,255,.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 46%),
    #161d28 !important;
}
html[data-theme="phase2"] #slots-paytable .pt-card:focus-visible{
  outline:none !important;
  border-color:rgba(122,170,255,.6) !important;
  box-shadow:0 0 0 2px rgba(122,170,255,.32) !important;
}
/* Rarity eyebrow — the ONLY colour cue. Squared mono tag: tier colour as text +
   a faint hairline tint (the --tier* vars stay defined per .pt-rarity-* above).
   No loud fill, no pill, no glow. */
html[data-theme="phase2"] #slots-paytable .pt-rarity-badge{
  font-family:'Inter',sans-serif !important; font-weight:800 !important; font-style:normal !important;
  font-size:9px !important; letter-spacing:.16em !important; text-transform:uppercase !important;
  padding:3px 7px !important; border-radius:5px !important; line-height:1 !important;
  color:var(--tier) !important;
  border:1px solid var(--tier-bd) !important;
  background:var(--tier-bg) !important;
}
/* Symbols — clean, no rectangular frame. A faint static drop-shadow follows the
   PNG silhouette so items pop on the matte card; NO jumpy scale/shadow on hover
   (that was the disliked hover). */
html[data-theme="phase2"] #slots-paytable .pt-card-syms{ gap:3px !important; }
html[data-theme="phase2"] #slots-paytable .pt-card-syms .pt-icon{ width:42px !important; height:42px !important; }
html[data-theme="phase2"] #slots-paytable .pt-card-syms .pt-icon .pt-img{
  width:100% !important; height:100% !important; object-fit:contain !important;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.42)) !important;
  transition:none !important;
}
html[data-theme="phase2"] #slots-paytable .pt-card:hover .pt-card-syms .pt-icon .pt-img{
  transform:none !important;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.42)) !important;
}
/* "?" tile (pair card) — neutral squared, matches the matte. */
html[data-theme="phase2"] #slots-paytable .pt-card-syms-pair .pt-icon-q{
  width:42px !important; height:42px !important; border-radius:9px !important;
  background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.10) !important;
  color:var(--text-mute) !important; font-family:'Manrope','Inter',sans-serif !important;
  font-weight:800 !important; font-size:18px !important;
}
/* Multiplier — the hero, near-white + tabular (tier colour stays in the eyebrow
   only, so no rainbow numbers). */
html[data-theme="phase2"] #slots-paytable .pt-card-mult{
  font-family:'Manrope','Inter',sans-serif !important; font-weight:800 !important;
  font-size:21px !important; color:#eef3fa !important; letter-spacing:0 !important;
  font-variant-numeric:tabular-nums !important;
}

/* ============================================================
   RELEASE POLISH — 2026-07-02
   Final pre-launch pass, appended last so it wins the cascade.
   Three parts:
     1. CRASH PRO BOARD — the rocket/space scene is gone; the board
        is a flat matte chart (canvas curve + live axes) in the
        Stake tradition, matched to the pd-* grey palette.
     2. SITE-WIDE — retire the last glow/shine tells, harmonize the
        modal shell, unify display-number typography.
     3. HOME — spacing rhythm, matte challenge cards, quiet promo
        controls, FAQ + footer polish.
============================================================ */

/* ---------- 1. CRASH PRO BOARD ---------- */

/* Re-enable the chart layers that the rocket-restore pass had hidden. */
section[data-route="crash"] #crash-canvas,
section[data-route="crash"] .crash-axes,
section[data-route="crash"] .crash-multi-sub{
  display:block !important;
}

/* Board: flat matte field, one hairline, no rim glow, no vignette.
   The chart field sits one step DARKER than the surrounding panels so the
   curve carries the light (Stake pattern). The phase2-scoped variant is
   required to out-rank the earlier lit-panel rule at ~line 30817. */
html[data-theme="phase2"] section[data-route="crash"] .crash-board,
section[data-route="crash"] .crash-board{
  aspect-ratio:auto !important;
  height:clamp(400px, 52vh, 540px) !important;
  min-height:400px !important;
  max-height:none !important;
  background:linear-gradient(180deg, #14181C 0%, #101317 100%) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
section[data-route="crash"] .crash-board::before,
section[data-route="crash"] .crash-board::after{
  content:none !important;
}
section[data-route="crash"] .crash-board.shake{ animation:none !important; }

/* Y-axis ticks: live data, quiet mono. Aligned to the canvas plot padding
   (padT 26 / padB 20 / labels end before plotL 50 — see crashPlot()). */
section[data-route="crash"] .crash-axes .cax-y{
  left:8px !important; top:20px !important; bottom:14px !important;
  width:38px !important;
}
section[data-route="crash"] .crash-axes .cax-y span{
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-weight:500 !important; font-size:10.5px !important;
  letter-spacing:.02em !important; color:rgba(190,205,225,.38) !important;
}
/* The canvas draws its own plot grid — drop the CSS one so lines don't double. */
section[data-route="crash"] .crash-axes .cax-grid{ display:none !important; }

/* The multiplier is the hero: huge, flat, tabular. No halo filters. */
section[data-route="crash"] .crash-multiplier,
section[data-route="crash"] .crash-board[data-flying="1"] .crash-multiplier{
  top:34% !important;
  font-family:'Manrope','Inter',sans-serif !important;
  font-weight:800 !important;
  font-size:clamp(56px, 8vw, 96px) !important;
  letter-spacing:-.02em !important;
  color:#fff !important;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)) !important;
  animation:none !important;
  transition:color .18s ease !important;
}
html[data-theme="phase2"] section[data-route="crash"] .crash-board .crash-multiplier.crashed,
section[data-route="crash"] .crash-multiplier.crashed{
  color:#ef4444 !important;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)) !important;
  animation:crashSettleClean .32s cubic-bezier(.22,1,.36,1) both !important;
}
html[data-theme="phase2"] section[data-route="crash"] .crash-board .crash-multiplier.locked,
section[data-route="crash"] .crash-multiplier.locked{
  color:#28c76f !important;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)) !important;
}
html[data-theme="phase2"] section[data-route="crash"] .crash-board .crash-multiplier.countdown,
section[data-route="crash"] .crash-multiplier.countdown{
  color:#eef3f8 !important;
  font-weight:700 !important;
}
html[data-theme="phase2"] section[data-route="crash"] .crash-board .crash-multiplier.countdown.eos-block,
section[data-route="crash"] .crash-multiplier.countdown.eos-block{
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-size:clamp(22px, 3.4vw, 40px) !important;
  font-weight:600 !important;
  color:rgba(190,205,225,.85) !important;
}
section[data-route="crash"] .crash-multi-sub{
  top:calc(34% + clamp(34px, 4.6vw, 56px)) !important;
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-weight:500 !important;
  font-size:11px !important;
  letter-spacing:.22em !important;
  color:rgba(150,165,185,.75) !important;
  text-shadow:none !important;
}
section[data-route="crash"] .crash-board[data-flying="1"] .crash-multi-sub{ color:rgba(150,165,185,.75) !important; }
section[data-route="crash"] .crash-multiplier.crashed ~ .crash-multi-sub{ color:rgba(239,68,68,.7) !important; }
section[data-route="crash"] .crash-multiplier.locked ~ .crash-multi-sub{ color:rgba(40,199,111,.7) !important; }

/* Betting intermission: thin drain bar under the countdown. */
section[data-route="crash"] .crash-countdown-bar{
  position:absolute; left:50%; top:56%;
  transform:translateX(-50%);
  width:min(240px, 46%); height:3px;
  border-radius:2px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  opacity:0; transition:opacity .2s ease;
  z-index:8; pointer-events:none;
}
section[data-route="crash"] .crash-board[data-phase="betting"] .crash-countdown-bar{ opacity:1; }
section[data-route="crash"] .crash-countdown-bar span{
  display:block; height:100%; width:100%;
  border-radius:2px;
  background:var(--pd-blue, #3BA7FF);
  transition:width .12s linear;
}

/* Phase + round tags: squared mono, pinned to the board's bottom corners
   so the top corners stay clean for the curve. */
section[data-route="crash"] .crash-phase-pill{
  top:auto !important; bottom:12px !important; left:12px !important;
  padding:6px 10px !important;
  border-radius:6px !important;
  background:rgba(10,12,15,.72) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-weight:500 !important; font-size:11px !important;
  letter-spacing:.05em !important;
  color:rgba(200,212,228,.85) !important;
  text-transform:uppercase;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
section[data-route="crash"] .crash-phase-pill[data-phase="crashed"]{ color:rgba(239,68,68,.85) !important; }
section[data-route="crash"] .crash-round-badge{
  top:auto !important; bottom:12px !important; right:12px !important;
  padding:6px 10px !important;
  border-radius:6px !important;
  background:rgba(10,12,15,.72) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-weight:500 !important; font-size:11px !important;
  letter-spacing:.05em !important;
  color:rgba(150,165,185,.8) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* EOS + network row: quiet mono ledger strip, no branded fills. */
section[data-route="crash"] .crash-eos-block{
  padding:7px 12px !important; border-radius:6px !important;
  background:var(--pd-bg-1, #1C2226) !important;
  border:1px solid rgba(255,255,255,.07) !important;
}
section[data-route="crash"] .ceb-label{
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-weight:500 !important; font-size:10.5px !important;
  letter-spacing:.14em !important;
  color:rgba(150,165,185,.75) !important;
}
section[data-route="crash"] .ceb-num{
  font-size:13px !important; font-weight:600 !important;
  color:var(--pd-text, #fff) !important;
}
section[data-route="crash"] .crash-network{
  padding:7px 12px !important; border-radius:6px !important;
  background:var(--pd-bg-1, #1C2226) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-weight:500 !important; font-size:10.5px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
  color:rgba(150,165,185,.75) !important;
}
/* Network state reads as a text mark, not a glowing dot. */
section[data-route="crash"] .crash-network .cn-label::after{
  content:' ·';
  color:rgba(150,165,185,.75);
}
section[data-route="crash"] .crash-network[data-status="ok"] .cn-label::after{ content:' ✓'; color:#28c76f; }
section[data-route="crash"] .crash-network[data-status="waiting"] .cn-label::after{ content:' …'; color:rgba(190,205,225,.7); }
section[data-route="crash"] .crash-network[data-status="down"] .cn-label::after{ content:' ✕'; color:#ef4444; }

/* Bet panel + players: matte cards, no glass, no radial washes. */
section[data-route="crash"] .crash-panel,
section[data-route="crash"] .crash-players{
  background:var(--pd-bg-1, #1C2226) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
section[data-route="crash"] .crash-panel{ padding:16px !important; }
section[data-route="crash"] .crash-players{ padding:14px 16px 10px !important; }
section[data-route="crash"] .cp-title{
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-weight:500 !important; font-size:10.5px !important;
  letter-spacing:.14em !important;
  color:rgba(150,165,185,.8) !important;
}
section[data-route="crash"] .cp-count{
  font-family:'Manrope','Inter',sans-serif !important;
  font-weight:800 !important; font-size:14px !important;
  color:var(--pd-text, #fff) !important;
  padding:0 !important; border-radius:0 !important;
  background:transparent !important; border:none !important;
  min-width:0 !important;
  font-variant-numeric:tabular-nums;
}
/* Player rows: hairline ledger, not chips. */
section[data-route="crash"] .cp-list{ gap:0 !important; }
section[data-route="crash"] .cp-row{
  background:transparent !important;
  border:none !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
  border-radius:0 !important;
  padding:8px 2px !important;
  box-shadow:none !important;
}
section[data-route="crash"] .cp-row:last-child{ border-bottom:none !important; }
section[data-route="crash"] .cp-row.cp-mine{
  background:rgba(59,167,255,.05) !important;
  border-bottom-color:rgba(59,167,255,.16) !important;
}
section[data-route="crash"] .cp-row.cp-cashed{ background:transparent !important; }
section[data-route="crash"] .cp-row.cp-lost{ opacity:.42 !important; }
section[data-route="crash"] .cp-name{ font-weight:600 !important; color:var(--pd-text, #fff) !important; }
section[data-route="crash"] .cp-right{
  font-family:'Manrope','Inter',sans-serif !important;
  font-weight:700 !important; font-size:13px !important;
  font-variant-numeric:tabular-nums;
}
section[data-route="crash"] .cp-bet{ color:rgba(200,212,228,.85) !important; }
section[data-route="crash"] .cp-auto{
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-weight:500 !important; font-size:10.5px !important;
  padding:2px 6px !important; border-radius:4px !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  color:rgba(150,165,185,.85) !important;
}
section[data-route="crash"] .cp-multi.cp-cashed{ color:#28c76f !important; text-shadow:none !important; }
section[data-route="crash"] .cp-multi.cp-lost{ color:#ef4444 !important; }
section[data-route="crash"] .cp-payout.cp-win{ color:#28c76f !important; }
section[data-route="crash"] .cp-payout.cp-loss{ color:#ef4444 !important; }
section[data-route="crash"] .cp-empty{
  font-family:'Inter',sans-serif !important;
  font-weight:500 !important;
  color:rgba(150,165,185,.7) !important;
}

/* Action button: flat confident block; cashout goes solid green. */
section[data-route="crash"] .crash-bet-btn{
  height:52px !important;
  border-radius:10px !important;
  font-size:15px !important; font-weight:800 !important;
  letter-spacing:.04em !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
section[data-route="crash"] .crash-bet-btn.btn-cashout{
  background:#22A55E !important;
  background-image:none !important;
  color:#fff !important;
  font-variant-numeric:tabular-nums;
}
section[data-route="crash"] .crash-bet-btn.btn-cashout:hover{ background:#27B968 !important; }

/* Recent-multiplier tags: squared matte, tier read via text color
   (tier colors themselves come from the earlier tier rules). */
section[data-route="crash"] .history-bar .hist-item{
  border-radius:6px !important;
  background:var(--pd-bg-1, #1C2226) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.07) !important;
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-weight:500 !important; font-size:12px !important;
  letter-spacing:.01em !important;
  box-shadow:none !important;
  font-variant-numeric:tabular-nums;
}
html[data-theme="phase2"] section[data-route="crash"] .history-bar .hist-item.huge{
  color:#f0b232 !important;
  background:var(--pd-bg-1, #1C2226) !important;
  background-image:none !important;
  border-color:rgba(240,178,50,.35) !important;
}

/* Tighter column rhythm. */
section[data-route="crash"] .crash-layout{ gap:16px !important; grid-template-columns:340px 1fr; }
@media (max-width:980px){
  section[data-route="crash"] .crash-layout{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="crash"] .crash-board,
  section[data-route="crash"] .crash-board{
    height:340px !important; min-height:340px !important;
  }
  section[data-route="crash"] .crash-multiplier,
  section[data-route="crash"] .crash-board[data-flying="1"] .crash-multiplier{
    font-size:clamp(44px, 13vw, 64px) !important;
  }
  section[data-route="crash"] .crash-axes .cax-y span{ font-size:9.5px !important; }
}

/* ---------- 2. SITE-WIDE POLISH ---------- */

/* The shine sweep is retired everywhere — buttons carry weight, not gloss. */
.btn-shine{ display:none !important; }

/* Mines: the gold halo sweep behind revealed coins reads as glow-tell. */
.mt-gem-halo{ display:none !important; }

/* Display numbers share one voice: Manrope, tabular, flat shadow only.
   (phase2-scoped variants out-rank the per-game Urbanist skins.) */
html[data-theme="phase2"] section[data-route="limbo"] .limbo-multi,
html[data-theme="phase2"] section[data-route="upgrader"] .upgrader-percent,
.limbo-multi,
.upgrader-percent{
  font-family:'Manrope','Inter',sans-serif !important;
  font-variant-numeric:tabular-nums !important;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)) !important;
  text-shadow:none !important;
}

/* Modal shell: one shape site-wide — 20px radius (the auth-card standard
   the stronger per-modal rules already use), hairline, matte. */
html[data-theme="phase2"] .modal{
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 24px 64px -24px rgba(0,0,0,.85) !important;
}
html[data-theme="phase2"] .modal-close{
  border-radius:8px !important;
}
html[data-theme="phase2"] .modal-title{
  font-size:20px !important;
  letter-spacing:-.01em !important;
}
html[data-theme="phase2"] .modal-sub{
  font-size:14px !important;
  line-height:1.5 !important;
}

/* Keyboard focus is visible and consistent (buttons, links, inputs). */
html[data-theme="phase2"] button:focus-visible,
html[data-theme="phase2"] a:focus-visible,
html[data-theme="phase2"] [role="switch"]:focus-visible{
  outline:2px solid rgba(59,167,255,.6) !important;
  outline-offset:2px !important;
}

/* ---------- 3. HOME — LAYOUT + SPACING ---------- */

/* Page rhythm: generous, deliberate vertical air between blocks. */
html[data-theme="phase2"] .pd-home{
  padding:28px 36px 72px !important;
}
html[data-theme="phase2"] .pd-promo-hero{ margin-bottom:22px !important; }
html[data-theme="phase2"] .pd-challenge-row{ margin:22px 0 0 !important; gap:16px !important; }
html[data-theme="phase2"] .pd-section{ margin-top:48px !important; }
html[data-theme="phase2"] .pd-section-head{ margin-bottom:0 !important; }
html[data-theme="phase2"] .pd-section-title{
  font-size:20px !important;
  margin-bottom:18px !important;
}

/* Promo hero: quiet squared controls, bar-style position markers. */
html[data-theme="phase2"] .pd-promo{
  border-radius:14px !important;
  overflow:hidden;
}
html[data-theme="phase2"] .pd-promo-arrow{
  width:38px !important; height:38px !important;
  border-radius:10px !important;
  background:rgba(8,10,12,.55) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:rgba(255,255,255,.85) !important;
  box-shadow:none !important;
  transition:background .15s ease !important;
}
html[data-theme="phase2"] .pd-promo-arrow:hover{ background:rgba(8,10,12,.8) !important; }
html[data-theme="phase2"] .pd-promo-dots{ gap:6px !important; }
html[data-theme="phase2"] .pd-promo-dot{
  width:22px !important; height:3px !important;
  border-radius:2px !important;
  background:rgba(255,255,255,.28) !important;
  border:none !important;
  box-shadow:none !important;
  transition:background .15s ease !important;
}
html[data-theme="phase2"] .pd-promo-dot.is-active{ background:#fff !important; }

/* Challenge cards: matte panels — the art carries them, not glow washes. */
html[data-theme="phase2"] .pd-challenge-card{
  height:128px !important;
  border-radius:12px !important;
  background:var(--pd-bg-2) !important;
  background-image:none !important;
  border:1px solid var(--pd-line) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .pd-challenge-card:hover{
  border-color:var(--pd-line-hover) !important;
  box-shadow:none !important;
  transform:translateY(-3px) !important;
}
html[data-theme="phase2"] .pd-challenge-eyebrow{
  width:auto !important; height:auto !important;
  background:transparent !important;
  border-radius:0 !important;
  color:var(--pd-text-mute) !important;
}
html[data-theme="phase2"] .pd-challenge-title{
  font-size:19px !important;
  letter-spacing:.03em !important;
}

/* Games grid: bigger gutters, pure image tiles, calm lift (no shadow frame). */
html[data-theme="phase2"] .pd-games-grid{ gap:14px !important; }
html[data-theme="phase2"] .pd-game-tile{
  border-radius:12px !important;
}
html[data-theme="phase2"] .pd-game-tile img{ border-radius:12px !important; }
html[data-theme="phase2"] .pd-game-tile:hover{
  transform:translateY(-3px) !important;
  box-shadow:none !important;
}

/* Pack rail spacing matches the grid. */
html[data-theme="phase2"] .pd-pack-row{ gap:14px !important; }

/* FAQ: ledger-quiet accordions. */
html[data-theme="phase2"] .pd-faq-grid{ gap:12px !important; }
html[data-theme="phase2"] .pd-faq-item{
  background:var(--pd-bg-1) !important;
  border:1px solid var(--pd-line) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] .pd-faq-item[open]{ border-color:var(--pd-line-hover) !important; }
html[data-theme="phase2"] .pd-faq-item summary{
  padding:16px 18px !important;
  font-size:15px !important; font-weight:700 !important;
  color:var(--pd-text) !important;
}
html[data-theme="phase2"] .pd-faq-item p{
  padding:0 18px 16px !important;
  margin:0 !important;
  font-size:14px !important; line-height:1.55 !important;
  color:var(--pd-text-mute) !important;
}
html[data-theme="phase2"] .pd-faq-chev{ color:var(--pd-text-mute) !important; }

/* Footer: hairline top rule, mono column titles, quiet links. */
html[data-theme="phase2"] .pd-footer{
  margin-top:72px !important;
  padding:40px 0 24px !important;
  border-top:1px solid var(--pd-line) !important;
  background:transparent !important;
}
html[data-theme="phase2"] .pd-footer-grid{ gap:32px !important; }
html[data-theme="phase2"] .pd-footer-title{
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-weight:500 !important; font-size:11px !important;
  letter-spacing:.14em !important;
  color:var(--pd-text-mute) !important;
  margin-bottom:12px !important;
}
html[data-theme="phase2"] .pd-footer-link{
  font-size:14px !important; font-weight:500 !important;
  color:var(--pd-text-mute) !important;
  transition:color .15s ease !important;
}
html[data-theme="phase2"] .pd-footer-link:hover{ color:var(--pd-text) !important; }
html[data-theme="phase2"] .pd-footer-tagline{
  font-size:14px !important;
  color:var(--pd-text-mute) !important;
  line-height:1.5 !important;
}

/* Top banner row — promo carousel + Discord share one line, both 3:1 so
   they land at the same height with zero cropping. Halves the vertical
   bulk of the old stacked full-width banners. */
html[data-theme="phase2"] .pd-top-banners{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:stretch;
}
html[data-theme="phase2"] .pd-top-banners .pd-promo-hero{ margin:0 !important; }
html[data-theme="phase2"] .pd-community-banner{
  display:block;
  aspect-ratio:3 / 1;
  height:auto !important;
  border-radius:14px !important;
  border:1px solid var(--pd-line) !important;
  overflow:hidden;
  padding:0 !important;
  background:var(--pd-bg-2) !important;
  transition:transform .2s cubic-bezier(.16,1,.3,1) !important;
}
html[data-theme="phase2"] .pd-community-banner:hover{ transform:translateY(-2px) !important; }
html[data-theme="phase2"] .pd-community-banner .pd-challenge-discord-img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
html[data-theme="phase2"] .pd-community-banner:hover .pd-challenge-discord-img{ transform:scale(1.03); }
@media (max-width:860px){
  html[data-theme="phase2"] .pd-top-banners{ grid-template-columns:1fr; }
}

/* Section titles step up a notch beside the hero. */
html[data-theme="phase2"] .pd-section-title{ font-size:21px !important; }
html[data-theme="phase2"] .pd-section-view-all::after{ content:' \2192'; }

/* Crafted hovers — quiet lift outside, slow art zoom inside the rounded
   mask. No rings, no shadows, no glow. */
html[data-theme="phase2"] .pd-game-tile{ overflow:hidden !important; }
html[data-theme="phase2"] .pd-game-tile img{
  transition:transform .32s cubic-bezier(.16,1,.3,1) !important;
}
html[data-theme="phase2"] .pd-game-tile:hover img{ transform:scale(1.045); }
html[data-theme="phase2"] .pd-pack-tile{ overflow:hidden; border-radius:12px; }
html[data-theme="phase2"] .pd-pack-tile .pd-pack-tile-img{
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
html[data-theme="phase2"] .pd-pack-tile-wrap:hover .pd-pack-tile-img{ transform:scale(1.045); }

/* Modal shell tightened — less padding, calmer title, reads compact. */
html[data-theme="phase2"] .modal{ padding:24px 24px 22px !important; }
html[data-theme="phase2"] .modal-title{ font-size:19px !important; }

/* Home on small screens: keep the air, drop the gutter width. */
@media (max-width:640px){
  html[data-theme="phase2"] .pd-home{ padding:16px 16px 56px !important; }
  html[data-theme="phase2"] .pd-section{ margin-top:36px !important; }
  html[data-theme="phase2"] .pd-footer{ margin-top:56px !important; }
}

/* ============================================================
   PACK OPENING — PACKDRAW REEL (2026-07-02)
   Studied live at packdraw.com (packs + battles): the reel is a
   full-bleed strip of BIG floating item renders — no tile boxes,
   no cabinet chrome — with a soft rarity-colored bloom behind each
   item, two small plain markers pointing at the center, and the
   landed item carrying the moment: it scales up, its bloom blooms,
   and name + value appear beneath it. Spin physics, eased tick
   SFX, suspense beat, and the in-flow label already exist in
   spinReel(); this skin retires the boxed-tile look. Scoped to
   the cases route so battle reels are untouched; appended last to
   win the cabinet-era cascade (~21620).
============================================================ */

/* Stage: no cabinet — transparent full-bleed strip, items fade out
   at the edges via mask instead of vignette washes. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage,
html[data-theme="phase2"] section[data-route="cases"] .cases-stage,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage,
section[data-route="cases"] .cases-stage{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  height:auto !important;
  min-height:236px;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage::before,
section[data-route="cases"] .cases-stage::before,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage::after,
section[data-route="cases"] .cases-stage::after{
  content:none !important;
  display:none !important;
}
section[data-route="cases"] .cases-stage.cs-final::after{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-reel-wrap,
section[data-route="cases"] .cases-reel-wrap{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%) !important;
          mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%) !important;
}
/* Vertical multi-open columns fade top/bottom instead. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-multi-stack .cases-reel-wrap,
section[data-route="cases"] .cases-multi-stack .cases-reel-wrap{
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%) !important;
          mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%) !important;
}

/* Markers: small plain white triangles, no neon. They still tint to
   the winning rarity on reveal (quietly). */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-pointer,
section[data-route="cases"] .cs-pointer{
  color:rgba(255,255,255,.92) !important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)) !important;
}
section[data-route="cases"] .cs-pointer svg{ width:20px !important; height:13px !important; }
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage.cs-revealed .cs-pointer,
section[data-route="cases"] .cases-stage.cs-revealed .cs-pointer{
  color:var(--sel-color, #fff) !important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)) !important;
}

/* Reel items: the box is gone. Just the render, big, breathing room,
   soft rarity bloom behind it. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage .case-item,
section[data-route="cases"] .cases-stage .case-item{
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  justify-content:center !important;
  overflow:visible !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage .case-item .ci-name,
section[data-route="cases"] .cases-stage .case-item .ci-name,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage .case-item .ci-mult,
section[data-route="cases"] .cases-stage .case-item .ci-mult{
  display:none !important;
}
/* Single 1x reel: large renders, generous rhythm. */
section[data-route="cases"] #cs-reel{ gap:30px !important; height:100% !important; padding:0 16px !important; }
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-reel .case-item,
section[data-route="cases"] #cs-reel .case-item{
  flex:0 0 150px !important;
  height:100% !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-reel .case-item .ci-icon-wrap,
section[data-route="cases"] #cs-reel .case-item .ci-icon-wrap{
  width:132px !important; height:132px !important;
}
/* Rarity bloom — a soft radial wash BEHIND the render (packdraw's
   signature). Sits on the icon-wrap so it scales with the winner. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage .case-item .ci-icon-wrap,
section[data-route="cases"] .cases-stage .case-item .ci-icon-wrap{
  position:relative;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage .case-item .ci-icon-wrap::before,
section[data-route="cases"] .cases-stage .case-item .ci-icon-wrap::before{
  content:'';
  position:absolute; inset:-18%;
  border-radius:50%;
  background:radial-gradient(circle, var(--bloom, rgba(160,175,195,.10)) 0%, transparent 66%);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
section[data-route="cases"] .cases-stage .case-item .ci-img{ position:relative; z-index:1; }
section[data-route="cases"] .case-item.rarity-common   { --bloom:rgba(160,175,195,.10); }
section[data-route="cases"] .case-item.rarity-uncommon { --bloom:rgba(52,211,153,.15); }
section[data-route="cases"] .case-item.rarity-rare     { --bloom:rgba(59,130,246,.22); }
section[data-route="cases"] .case-item.rarity-epic     { --bloom:rgba(168,85,247,.25); }
section[data-route="cases"] .case-item.rarity-legendary{ --bloom:rgba(251,191,36,.26); }
section[data-route="cases"] .case-item.rarity-mythic   { --bloom:rgba(239,68,68,.28); }

/* Landing: the winner carries the drama — bigger, bloom at full
   strength, neighbors intact (packdraw keeps them visible). The old
   rarity box-shadow ring is retired with the box. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage .case-item.cs-winner,
section[data-route="cases"] .cases-stage .case-item.cs-winner{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage .case-item.cs-winner .ci-icon-wrap::before,
section[data-route="cases"] .cases-stage .case-item.cs-winner .ci-icon-wrap::before{
  transform:scale(1.28);
  background:radial-gradient(circle, var(--bloom, rgba(160,175,195,.2)) 0%, transparent 70%);
  opacity:1;
  filter:saturate(1.3) brightness(1.35);
}

/* In-flow result label — bold name + value under the landed item,
   packdraw's exact feedback beat. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-stage-label,
section[data-route="cases"] .cs-stage-label{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  text-align:center;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-stage-label .cs-stage-label-name,
section[data-route="cases"] .cs-stage-label .cs-stage-label-name{
  font-family:'Manrope','Inter',sans-serif !important;
  font-size:14px !important; font-weight:800 !important;
  color:#fff !important;
  letter-spacing:0 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-stage-label .cs-stage-label-payout,
section[data-route="cases"] .cs-stage-label .cs-stage-label-payout{
  font-family:'Manrope','Inter',sans-serif !important;
  font-size:15px !important; font-weight:800 !important;
  color:#fff !important;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
  margin-top:2px;
}

/* Controls: one slim packdraw bar — quantity queue left, green Open
   center, quiet Demo + fast toggle right. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-controls,
section[data-route="cases"] .cs-controls{
  display:flex !important; align-items:center !important;
  gap:12px !important;
  background:var(--pd-bg-1, #1C2226) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:12px !important;
  padding:10px 12px !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-open-btn.cs-open-cta,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-open-cta,
section[data-route="cases"] .cs-open-cta,
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-open-cta,
html[data-theme="phase2"] section[data-route="cases"] .cs-open-cta{
  background:var(--pd-green, #48bb78) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  height:44px !important;
  border-radius:8px !important;
  font-family:'Manrope','Inter',sans-serif !important;
  font-weight:800 !important; font-size:15px !important;
  letter-spacing:.01em !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
section[data-route="cases"] .cs-open-cta:hover{ background:var(--pd-green-hover, #38a169) !important; }
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-demo-btn,
section[data-route="cases"] .cs-demo-btn{
  height:44px !important; padding:0 16px !important;
  background:var(--pd-bg-2, #22292E) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:8px !important;
  color:var(--pd-text, #fff) !important;
  font-family:'Manrope','Inter',sans-serif !important;
  font-weight:700 !important; font-size:14px !important;
  cursor:pointer;
  transition:background .15s ease !important;
}
section[data-route="cases"] .cs-demo-btn:hover{ background:var(--pd-surface, #252D33) !important; }
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-fast-toggle,
section[data-route="cases"] .cs-fast-toggle{
  width:44px !important; height:44px !important;
  background:var(--pd-bg-2, #22292E) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:8px !important;
  box-shadow:none !important;
  color:rgba(200,212,228,.7) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-fast-toggle[aria-pressed="true"],
section[data-route="cases"] .cs-fast-toggle[aria-pressed="true"]{
  color:#fff !important;
  background:var(--pd-surface, #252D33) !important;
  border-color:rgba(255,255,255,.14) !important;
}
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-cost-chip,
section[data-route="cases"] .cs-cost-chip{
  font-family:'Manrope','Inter',sans-serif !important;
  font-weight:800 !important;
  font-variant-numeric:tabular-nums;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Queue tray: quiet hairline slots instead of dashed boxes. */
html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-tray-slot,
section[data-route="cases"] .cs-tray-slot{
  background:var(--pd-bg-1, #1C2226) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:10px !important;
  box-shadow:none !important;
  transition:border-color .15s ease !important;
}
section[data-route="cases"] .cs-tray-slot:hover{ border-color:rgba(255,255,255,.14) !important; }

@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cases-stage,
  section[data-route="cases"] .cases-stage{ min-height:190px; }
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-reel,
  section[data-route="cases"] #cs-reel{ gap:20px !important; }
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-reel .case-item,
  section[data-route="cases"] #cs-reel .case-item{ flex:0 0 112px !important; }
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-reel .case-item .ci-icon-wrap,
  section[data-route="cases"] #cs-reel .case-item .ci-icon-wrap{ width:96px !important; height:96px !important; }
  /* Controls stack: Open CTA gets the full row, secondaries share one. */
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] .cs-controls,
  section[data-route="cases"] .cs-controls{ flex-wrap:wrap !important; }
  html[data-theme="phase2"] section[data-route="cases"][data-cs-view="open"] #cs-open-btn.cs-open-cta,
  section[data-route="cases"] .cs-open-cta{ flex:1 1 100% !important; order:-1; }
}

/* ============================================================
   PACK BATTLES — PACKDRAW ARENA (2026-07-02)
   Studied live at packdraw.com/battles mid-battle: the columns are
   NOT boxed panels — items float on the page field, separated by
   thin hairlines, with small plain markers pointing at the center
   row. The landed item carries the round: it pops, its rarity
   bloom flares, and bold name + value appear beneath it (the
   .cs-wp-win-label injected on land in app.js). The finale is a
   flat matte panel with crowned winners and a GREEN recreate CTA —
   no gold radials, no shine sweeps. Same visual language as the
   single-open reel shipped earlier today.
============================================================ */

/* Columns: panel-free. The frame keeps its size (the reel math
   measures the DOM) but loses the box; a hairline on the cell's left
   edge separates players, packdraw-style. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-frame{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-cell + .cs-wp-reel-cell{
  border-left:1px solid rgba(255,255,255,.05);
}
/* Landing markers: plain white, smaller — the quiet packdraw triangle. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-frame::before{
  border-left-color:rgba(255,255,255,.85) !important;
  border-left-width:7px !important;
  border-top-width:5px !important; border-bottom-width:5px !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-frame::after{
  border-right-color:rgba(255,255,255,.85) !important;
  border-right-width:7px !important;
  border-top-width:5px !important; border-bottom-width:5px !important;
}
/* Focus band: gone — packdraw marks the center with the markers and
   the landed item itself, not a tinted window. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-payline{
  background:transparent !important;
  border-top:none !important;
  border-bottom:none !important;
}

/* Items ride a soft rarity bloom (same language as the single-open
   reel). The img keeps its neutral lift shadow. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item{ overflow:visible !important; }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item::after{
  content:'';
  position:absolute; inset:6%;
  border-radius:50%;
  background:radial-gradient(circle, var(--bloom, rgba(160,175,195,.10)) 0%, transparent 66%);
  z-index:0;
  pointer-events:none;
  transition:transform .3s ease, filter .3s ease;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item img{ position:relative; z-index:1; }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item.rarity-common   { --bloom:rgba(160,175,195,.10); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item.rarity-uncommon { --bloom:rgba(52,211,153,.15); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item.rarity-rare     { --bloom:rgba(59,130,246,.22); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item.rarity-epic     { --bloom:rgba(168,85,247,.25); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item.rarity-legendary{ --bloom:rgba(251,191,36,.26); }
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel-item.rarity-mythic   { --bloom:rgba(239,68,68,.28); }

/* Winner: the ring is retired — the bloom flares instead, and the
   land-pop scale already carries the beat. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item-win,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item-win.rarity-rare,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item-win.rarity-epic,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item-win.rarity-legendary,
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item-win.rarity-mythic{
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item-win::after{
  transform:scale(1.3);
  filter:saturate(1.3) brightness(1.35);
}

/* Landed name + value — injected by app.js on settle, hangs just
   below the winner over the dimmed neighbor. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-win-label{
  position:absolute;
  top:calc(100% - 6px); left:50%;
  transform:translateX(-50%);
  z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  width:max-content; max-width:170px;
  pointer-events:none;
  animation:csWpLabelIn .3s cubic-bezier(.16,1,.3,1) .12s both;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-win-label b{
  font-family:'Manrope','Inter',sans-serif;
  font-size:13px; font-weight:800;
  color:#fff; line-height:1.2;
  text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:170px;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wp-win-label i{
  font-family:'Manrope','Inter',sans-serif;
  font-style:normal;
  font-size:13px; font-weight:800;
  color:#fff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
  display:inline-flex; align-items:center; gap:4px;
}
@keyframes csWpLabelIn{
  from{ opacity:0; transform:translateX(-50%) translateY(5px); }
  to  { opacity:1; transform:translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-win-label{ animation:none; }
}

/* Finale: flat matte panel — the crowned winners and the numbers are
   the celebration, not gold washes and shine sweeps. */
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-result{
  background:var(--pd-bg-1, #1C2226) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-watch-result::after{
  content:none !important;
  animation:none !important;
}
/* Recreate: green, packdraw's exact CTA. */
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-recreate{
  background:var(--pd-green, #48bb78) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  box-shadow:none !important;
  font-family:'Manrope','Inter',sans-serif !important;
  font-weight:800 !important;
}
html[data-theme="phase2"] section[data-route="cases"] .cs-wr-recreate:hover{
  background:var(--pd-green-hover, #38a169) !important;
}

@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-win-label b,
  html[data-theme="phase2"] section[data-route="cases"] .cs-wp-win-label i{
    font-size:11px; max-width:130px;
  }
}

/* ============================================================
   "PACK CONTAINS" GRID — matched to the packdraw reel language
   (2026-07-02). The navy cards, value chips, corner pct pills and
   bottom rarity bars are retired: warm matte pd-grey tile, mono
   odds top-center, item render on the SAME rarity bloom the reel
   uses, muted name, bold white value. Appended after the earlier
   #cs-items-grid skin so it wins at equal id specificity.
============================================================ */
#cs-items-grid .cig-item{
  background:var(--pd-bg-1, #1C2226) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:12px !important;
  box-shadow:none !important;
  padding:32px 12px 16px !important;
  transition:transform .2s cubic-bezier(.16,1,.3,1), border-color .15s ease !important;
}
#cs-items-grid .cig-item:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:none !important;
}
/* Bottom rarity bar: retired — rarity reads from the bloom. */
#cs-items-grid .cig-item::after{ content:none !important; display:none !important; }
/* Odds: quiet mono, top-center (packdraw's placement). */
#cs-items-grid .cig-pct,
#cs-items-grid .cig-drop-pct{
  top:10px !important; left:50% !important; right:auto !important;
  transform:translateX(-50%) !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-weight:500 !important; font-size:10.5px !important;
  letter-spacing:.06em !important;
  color:rgba(150,165,185,.8) !important;
}
/* Render on the reel's rarity bloom — same vars, same shape. */
#cs-items-grid .cig-icon-wrap{
  width:96px !important; height:96px !important;
  margin:4px 0 10px !important;
}
#cs-items-grid .cig-icon-wrap::before{
  inset:-14% !important;
  background:radial-gradient(circle, var(--bloom, rgba(160,175,195,.10)) 0%, transparent 66%) !important;
  opacity:1 !important;
  filter:none !important;
}
#cs-items-grid .cig-item.rarity-common   { --bloom:rgba(160,175,195,.10); }
#cs-items-grid .cig-item.rarity-uncommon { --bloom:rgba(52,211,153,.15); }
#cs-items-grid .cig-item.rarity-rare     { --bloom:rgba(59,130,246,.22); }
#cs-items-grid .cig-item.rarity-epic     { --bloom:rgba(168,85,247,.25); }
#cs-items-grid .cig-item.rarity-legendary{ --bloom:rgba(251,191,36,.26); }
#cs-items-grid .cig-item.rarity-mythic   { --bloom:rgba(239,68,68,.28); }
/* Name muted, value bold white — no chip. */
#cs-items-grid .cig-name{
  font-family:'Inter',sans-serif !important;
  font-weight:600 !important; font-size:13px !important;
  color:rgba(200,212,228,.72) !important;
  margin:0 0 6px !important;
}
#cs-items-grid .cig-payout{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  font-family:'Manrope','Inter',sans-serif !important;
  font-weight:800 !important; font-size:15px !important;
  color:#fff !important;
  gap:6px !important;
}
@media (max-width:640px){
  #cs-items-grid .cig-icon-wrap{ width:80px !important; height:80px !important; }
}

/* ============================================================================
   Robux deposit — "Getting a 404?" fallback help (pay stage). Matte panel
   matching .rb-gamepass-card; quiet, no glow. The button is a full-width
   outline link to the bot experience's game page (Store tab fallback).
   ========================================================================== */
.rb-404-help{
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(11,15,31,.65);
  border: 1px solid rgba(96,165,250,.14);
}
.rb-404-title{
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}
.rb-404-sub{
  margin: 0;
  font-family:'Inter','SF Pro Display',sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(216,227,245,.85);
}
.rb-404-sub strong{ color: #fff; }
.rb-404-game-btn{
  margin-top: 2px;
  justify-content: center;
  text-align: center;
}

/* ===========================================================================
   Admin chat moderation — hover ✕ to soft-delete a message.
   The button is emitted on every non-system message but stays fully hidden
   unless the current user is a mod/admin (JS toggles .chat-can-moderate on
   #chat). Server (requireAdmin) is the real gate; this is UX only. Restrained,
   Discord-style: neutral until hovered, red only on the button itself.
   =========================================================================== */
#chat-body .cmsg{ position: relative; }
.cmsg-del{
  position: absolute; top: 4px; right: 4px;
  display: none; place-items: center;
  width: 20px; height: 20px; padding: 0; margin: 0;
  border: 0; border-radius: 6px;
  background: rgba(0,0,0,.28);
  color: var(--text-dim, #9aa4b2);
  font-size: 12px; line-height: 1; cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease, color .12s ease;
}
#chat.chat-can-moderate .cmsg-del{ display: grid; }
#chat.chat-can-moderate .cmsg:hover .cmsg-del{ opacity: .7; }
.cmsg-del:hover{ opacity: 1 !important; background: rgba(220,38,38,.92); color: #fff; }
.cmsg-del:focus-visible{
  opacity: 1; outline: 2px solid var(--pd-blue-accent, #57abf8); outline-offset: 1px;
}
.cmsg-del:disabled{ opacity: .4 !important; cursor: default; }

/* ---------- Image loading: fade in, never paint a broken frame ----------
   .bx-ld is set by app.js on every <img> that is still loading (or has
   failed) and removed on `load`; .bx-fade carries the transition only for
   the moment of reveal so no element's own transition rules are altered. */
img.bx-ld{ opacity:0 !important; }
img.bx-fade{ transition:opacity .18s var(--ease-smooth, ease-out) !important; }
@media (prefers-reduced-motion:reduce){ img.bx-fade{ transition:none !important; } }

/* ---------- Polish from the 2026-09 design pass ---------- */
/* Rank badges were 8.5–9px; 10px is the legibility floor. */
.cmsg-rank, html[data-theme="phase2"] .cmsg-rank{ font-size:10px !important; }
/* Phone tap targets: topnav links and dropdown rows up to 40px. */
@media (max-width:900px){
  .pd-topnav-link{ height:40px !important; }
  .pd-topnav-dropdown-item{ min-height:40px; }
}

/* ======================================================================
   DEPOSIT MODAL — brand card (2026-09). Same shell language as the sign-in
   modal: navy card, blue→cyan aurora behind the header, hairline top rule,
   icon-led tiles with each coin's own accent, the real Robux mark. Every id /
   data-attribute the deposit flows bind to is unchanged.
   ====================================================================== */
.modal-backdrop#deposit-modal .modal{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 150px), var(--pd-bg-1) !important;
  border:1px solid rgba(255,255,255,.085) !important;
  border-radius:24px !important;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(59,130,246,.10), 0 30px 80px -40px rgba(59,130,246,.35) !important;
}
.modal-backdrop#deposit-modal .modal::before{
  content:''; position:absolute; inset:auto; left:0; right:0; top:0; bottom:auto; height:240px;
  background:radial-gradient(420px 220px at 12% -8%, rgba(34,211,238,.20), transparent 62%), radial-gradient(470px 240px at 94% -14%, rgba(59,130,246,.24), transparent 64%);
  -webkit-mask:none !important; mask:none !important; padding:0; border-radius:0; opacity:1; animation:none;
  pointer-events:none; z-index:-1;
}
.modal-backdrop#deposit-modal .modal::after{
  content:''; position:absolute; left:28px; right:28px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.6) 30%, rgba(59,130,246,.6) 70%, transparent);
  pointer-events:none;
}
#deposit-modal[data-active-stage="chooser"] .modal{ width:min(860px,100%) !important; max-width:min(860px,94vw) !important; padding:34px 40px 26px !important; }
#deposit-modal .dep-head{ margin:0 0 24px; padding-right:52px; }
#deposit-modal .dep-eyebrow{ display:block; font-family:'Manrope',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#60A5FA; margin:0 0 8px; }
#deposit-modal[data-active-stage="chooser"] .dep-chooser-title{ font-family:'Manrope',sans-serif !important; font-weight:800 !important; font-size:30px !important; letter-spacing:-.02em !important; line-height:1.1 !important; margin:0 0 8px !important; padding:0 !important; text-align:left !important; color:#fff !important; }
#deposit-modal .dep-chooser-sub{ font-family:'Manrope',sans-serif; font-weight:500; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.58); margin:0; max-width:62ch; }
#deposit-modal .dep-section{ margin-bottom:26px; }
#deposit-modal .dep-section-title{ font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; color:#fff; margin-bottom:3px; }
#deposit-modal .dep-section-sub{ font-family:'Manrope',sans-serif; font-weight:500; font-size:13.5px; color:rgba(255,255,255,.5); margin-bottom:14px; }
#deposit-modal .dep-coin-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
#deposit-modal .dep-coin{
  flex:none; min-width:0; width:100%;
  position:relative; display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer;
  padding:14px 16px; min-height:78px; border-radius:16px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
  transition:transform .16s var(--ease-smooth), border-color .16s var(--ease-smooth), background .16s var(--ease-smooth), box-shadow .16s var(--ease-smooth);
}
#deposit-modal .dep-coin::after{
  content:''; margin-left:auto; width:8px; height:8px; flex:none;
  border-right:2px solid rgba(255,255,255,.32); border-bottom:2px solid rgba(255,255,255,.32);
  transform:rotate(-45deg); transition:border-color .16s var(--ease-smooth), transform .16s var(--ease-smooth);
}
#deposit-modal .dep-coin[data-dep-coin="BTC"]{ --coin:#F7931A; }
#deposit-modal .dep-coin[data-dep-coin="ETH"]{ --coin:#8B9CFF; }
#deposit-modal .dep-coin[data-dep-coin="LTC"]{ --coin:#B8C2D6; }
#deposit-modal .dep-coin[data-dep-coin="SOL"]{ --coin:#A46BFF; }
#deposit-modal .dep-coin[data-dep-coin="USDT"]{ --coin:#2BC49A; }
#deposit-modal .dep-coin[data-dep-coin="DOGE"]{ --coin:#D8B54A; }
#deposit-modal .dep-coin-robux{ --coin:#D9BC6C; }
#deposit-modal .dep-coin:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  border-color:color-mix(in srgb, var(--coin, #60A5FA) 55%, transparent);
  box-shadow:0 12px 26px -16px color-mix(in srgb, var(--coin, #60A5FA) 70%, transparent);
}
#deposit-modal .dep-coin:hover::after{ border-color:#fff; transform:translate(2px,0) rotate(-45deg); }
#deposit-modal .dep-coin:focus-visible{ outline:2px solid rgba(96,165,250,.7); outline-offset:2px; }
#deposit-modal .dep-coin-icon{
  width:50px; height:50px; flex:none; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.28);
  background:color-mix(in srgb, var(--coin, #60A5FA) 14%, rgba(0,0,0,.28));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--coin, #60A5FA) 30%, transparent);
}
#deposit-modal .dep-coin-icon img{ width:34px; height:34px; object-fit:contain; border-radius:0; }
#deposit-modal .dep-coin-icon-robux img{ width:32px; height:32px; }
#deposit-modal .dep-coin-name{ font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; color:#fff; }
#deposit-modal .dep-coin-ticker{ font-family:'Manrope',sans-serif; font-weight:600; font-size:12.5px; color:rgba(255,255,255,.5); }
#deposit-modal .dep-limits-note{ margin-top:2px; padding-top:18px; border-top:1px solid rgba(255,255,255,.06); font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:500; text-align:left; }
#deposit-modal .dep-limits-note a{ color:rgba(255,255,255,.66); font-weight:600; text-decoration:none; }
#deposit-modal .dep-limits-note a:hover{ color:#fff; text-decoration:underline; }

/* Coin detail + Robux stages — same inputs, chips, callouts and CTA language */
#deposit-modal .cd-crumbs, #deposit-modal .rb-crumbs{ font-family:'Manrope',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); }
#deposit-modal .cd-crumb-link, #deposit-modal .rb-crumb-link{ color:#60A5FA; }
#deposit-modal .cd-crumb-active, #deposit-modal .rb-crumb-active{ color:#fff; }
#deposit-modal .cd-title{ font-family:'Manrope',sans-serif; font-weight:800; font-size:26px; letter-spacing:-.02em; color:#fff; text-align:left !important; padding:0 52px 0 0 !important; }
#deposit-modal .rb-title{ font-family:'Manrope',sans-serif; font-weight:800; font-size:24px; letter-spacing:-.02em; }
#deposit-modal .cd-rate, #deposit-modal .cd-network-line{ font-family:'Manrope',sans-serif; font-weight:500; font-size:14px; color:rgba(255,255,255,.55); }
#deposit-modal .cd-estimate{ border-radius:14px; background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.09); }
#deposit-modal .cd-estimate-head{ font-family:'Manrope',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.14em; color:rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.07); }
#deposit-modal .cd-est-row{ border-bottom:1px solid rgba(255,255,255,.07); }
#deposit-modal .cd-est-label{ font-family:'Manrope',sans-serif; font-weight:600; font-size:14.5px; color:rgba(255,255,255,.85); }
#deposit-modal .cd-est-input{ font-family:'Manrope',sans-serif; font-weight:800; font-size:17px; color:#fff; }
#deposit-modal .cd-est-input:focus{ background:rgba(59,130,246,.14); box-shadow:0 0 0 2px rgba(59,130,246,.35); }
#deposit-modal .cd-qr{ border-radius:16px; box-shadow:0 18px 44px -18px rgba(59,130,246,.55), 0 10px 28px rgba(0,0,0,.45); }
#deposit-modal .cd-addr-label, #deposit-modal .rb-field-label{ font-family:'Manrope',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
#deposit-modal .cd-addr-row{ border-radius:13px; background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.09); }
#deposit-modal .cd-addr-row code{ font-size:13px; color:#fff; }
#deposit-modal .cd-addr-copy{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#fff; }
#deposit-modal .cd-addr-copy:hover{ background:rgba(59,130,246,.18); border-color:rgba(96,165,250,.6); }
#deposit-modal .cd-warn{ border-radius:13px; font-family:'Manrope',sans-serif; font-size:13px; }
#deposit-modal .cd-warn-info{ background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.28); color:rgba(255,255,255,.72); }
#deposit-modal .cd-warn-info strong{ color:#93C5FD; }
#deposit-modal .cd-foot{ font-family:'Manrope',sans-serif; font-size:12.5px; color:rgba(255,255,255,.45); }
#deposit-modal .rb-input, #deposit-modal input.rb-input{ border-radius:13px !important; background:rgba(0,0,0,.26) !important; border:1px solid rgba(255,255,255,.09) !important; font-family:'Manrope',sans-serif !important; font-size:16px !important; height:52px; padding:0 16px !important; }
#deposit-modal .rb-input:focus{ border-color:rgba(96,165,250,.9) !important; box-shadow:0 0 0 3px rgba(59,130,246,.22) !important; }
#deposit-modal .rb-account-card{ border-radius:14px; background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.09); }
#deposit-modal .rb-continue, #deposit-modal .rb-stage .btn-primary{
  height:52px; padding:0 18px; border-radius:14px; border:0;
  background:linear-gradient(135deg,#3B82F6 0%,#2563EB 55%,#1D4ED8 100%);
  color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; letter-spacing:.01em;
  box-shadow:0 14px 30px -12px rgba(59,130,246,.75), inset 0 1px 0 rgba(255,255,255,.22);
  transition:filter .16s var(--ease-smooth), transform .12s var(--ease-smooth), opacity .16s var(--ease-smooth);
}
#deposit-modal .rb-continue:hover:not(:disabled){ filter:brightness(1.08); transform:translateY(-1px); }
#deposit-modal .rb-continue:disabled{ opacity:.45; box-shadow:none; }
#deposit-modal .rb-continue .btn-shine{ display:none; }
@media (max-width:620px){
  #deposit-modal[data-active-stage="chooser"] .modal{ padding:24px 18px 18px !important; }
  #deposit-modal .dep-coin-grid{ grid-template-columns:1fr; }
  #deposit-modal .dep-coin{ flex:none; }
  #deposit-modal[data-active-stage="chooser"] .dep-chooser-title{ font-size:24px !important; }
  #deposit-modal .dep-head{ margin-bottom:20px; padding-right:44px; }
}

/* ======================================================================
   CRASH — clean board (2026-09). Stake-style restraint, laid out like a
   single stacked card: recent-round chips → graph → action → bet amount →
   auto cashout → players → provably-fair footer; then a game-info card
   (tile art, RTP / max multiplier / max win, description) and the history
   cards. Flat navy surfaces, one blue, green for wins, purple for huge
   rounds, rose only for busts. No gradients, glows or fills. The canvas is
   a single 2.6px stroke (app.js). Every id/class the engine sets is kept;
   the reorder is CSS `order` on existing markup, plus one static info card.
   ====================================================================== */
html[data-theme="phase2"] section[data-route="crash"]{ --cr-card:var(--pd-bg-1); --cr-inset:var(--pd-bg-0); --cr-raised:rgba(255,255,255,.06); --cr-line:rgba(255,255,255,.06); --cr-text:#cfd8e8; --cr-mute:rgba(255,255,255,.5); --cr-blue:#3B82F6; --cr-green:#22c55e; --cr-purple:#7c3aed; --cr-rose:#F43F5E; }
html[data-theme="phase2"] section[data-route="crash"] .game-shell{
  display:flex !important; flex-direction:column; gap:14px;
  max-width:960px; margin:0 auto !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  overflow:visible !important;
}
html[data-theme="phase2"] section[data-route="crash"] .history-bar{ order:0; }
html[data-theme="phase2"] section[data-route="crash"] .crash-layout{ order:1; }
html[data-theme="phase2"] section[data-route="crash"] .game-header{ order:2; }
html[data-theme="phase2"] section[data-route="crash"] .crash-info{ order:3; }
html[data-theme="phase2"] section[data-route="crash"] .stats-row{ order:4; margin:0 !important; }
html[data-theme="phase2"] section[data-route="crash"] .game-popup{ order:5; }

/* recent rounds */
html[data-theme="phase2"] section[data-route="crash"] .history-bar{
  background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important;
  display:flex !important; gap:8px; min-height:0 !important; overflow-x:auto; scrollbar-width:none;
}
html[data-theme="phase2"] section[data-route="crash"] .history-bar > .hist-item,
html[data-theme="phase2"] section[data-route="crash"] .history-bar > .hist-item.low{
  background:var(--cr-raised) !important; border:0 !important; color:var(--cr-text) !important;
  border-radius:8px !important; padding:7px 12px !important; box-shadow:none !important;
  font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:13px !important; flex-shrink:0;
}
html[data-theme="phase2"] section[data-route="crash"] .history-bar > .hist-item.high{ background:var(--cr-green) !important; color:#052e16 !important; }
html[data-theme="phase2"] section[data-route="crash"] .history-bar > .hist-item.huge{ background:var(--cr-purple) !important; color:#fff !important; }

/* the game card: graph on top, controls under it */
html[data-theme="phase2"] section[data-route="crash"] .crash-layout{
  display:flex !important; flex-direction:column; align-items:stretch !important; gap:0 !important; margin:0 !important;
  background:var(--cr-card) !important; border:1px solid var(--cr-line); border-bottom:0; border-radius:12px 12px 0 0;
  padding:14px 14px 0;
}
html[data-theme="phase2"] section[data-route="crash"] .crash-right{ order:0; width:100%; min-width:0; }
html[data-theme="phase2"] section[data-route="crash"] .crash-left{ width:100%; min-width:0; }
html[data-theme="phase2"] section[data-route="crash"] .crash-left{ order:1; padding:14px 0 0; }
html[data-theme="phase2"] section[data-route="crash"] .crash-eos-row{ display:flex !important; align-items:center; gap:14px; margin:0 0 10px !important; }
html[data-theme="phase2"] section[data-route="crash"] .crash-eos-block,
html[data-theme="phase2"] section[data-route="crash"] .crash-network{
  background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important;
  font-family:'Manrope',sans-serif !important; font-size:12px !important; color:var(--cr-mute) !important;
}
html[data-theme="phase2"] section[data-route="crash"] .ceb-label, html[data-theme="phase2"] section[data-route="crash"] .cn-label{ font-weight:600; letter-spacing:.02em; text-transform:none; font-size:12px !important; color:var(--cr-mute) !important; }
html[data-theme="phase2"] section[data-route="crash"] .ceb-num{ font-family:'JetBrains Mono',monospace !important; color:var(--cr-text) !important; font-weight:600; font-size:12px !important; }

/* graph */
html[data-theme="phase2"] section[data-route="crash"] .crash-board{
  background:var(--cr-inset) !important; border:1px solid rgba(255,255,255,.05) !important; border-radius:10px !important;
  box-shadow:none !important; aspect-ratio:16 / 9; min-height:320px !important; max-height:460px !important;
}
html[data-theme="phase2"] section[data-route="crash"] .crash-board::before,
html[data-theme="phase2"] section[data-route="crash"] .crash-board::after{ display:none !important; }
html[data-theme="phase2"] section[data-route="crash"] .crash-axes{ display:none !important; }
html[data-theme="phase2"] section[data-route="crash"] .crash-multiplier{
  top:50% !important;
  font-family:'Manrope',sans-serif !important; font-weight:800 !important;
  font-size:clamp(48px, 6.5vw, 88px) !important; letter-spacing:-.03em !important;
  color:#fff; filter:none !important; text-shadow:none !important; animation:none !important;
}
html[data-theme="phase2"] section[data-route="crash"] .crash-multiplier.crashed{ color:var(--cr-rose); filter:none !important; animation:none !important; }
html[data-theme="phase2"] section[data-route="crash"] .crash-multiplier.locked{ color:var(--cr-green); filter:none !important; }
html[data-theme="phase2"] section[data-route="crash"] .crash-multiplier.countdown{ color:#fff; filter:none !important; letter-spacing:0 !important; }
/* the label sits ABOVE the number and names the state; the static text in
   the element is collapsed and the wording comes from the board's phase */
html[data-theme="phase2"] section[data-route="crash"] .crash-multi-sub{
  top:50% !important; transform:translate(-50%, calc(-50% - 58px)) !important;
  font-size:0 !important; letter-spacing:0 !important; text-shadow:none !important; color:transparent;
}
html[data-theme="phase2"] section[data-route="crash"] .crash-multi-sub::before{
  content:'Current payout'; display:block; text-align:center;
  font-family:'Manrope',sans-serif; font-weight:600; font-size:14px; letter-spacing:0; text-transform:none; color:var(--cr-mute);
}
html[data-theme="phase2"] section[data-route="crash"] .crash-board[data-phase="crashed"] .crash-multi-sub::before{ content:'Crashed at'; color:var(--cr-rose); }
html[data-theme="phase2"] section[data-route="crash"] .crash-board[data-phase="betting"] .crash-multi-sub::before{ content:'Next round in'; }
html[data-theme="phase2"] section[data-route="crash"] .crash-board .crash-multiplier.countdown ~ .crash-multi-sub{ opacity:1 !important; }
html[data-theme="phase2"] section[data-route="crash"] .crash-board[data-phase="waiting"] .crash-multi-sub::before,
html[data-theme="phase2"] section[data-route="crash"] .crash-board[data-phase="idle"] .crash-multi-sub::before{ content:'Preparing round'; }
html[data-theme="phase2"] section[data-route="crash"] .crash-phase-pill,
html[data-theme="phase2"] section[data-route="crash"] .crash-round-badge{
  top:auto !important; bottom:12px !important; background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  font-family:'Manrope',sans-serif !important; font-weight:600 !important; font-size:12px !important; letter-spacing:0 !important; text-transform:none !important;
  color:var(--cr-mute) !important;
}
html[data-theme="phase2"] section[data-route="crash"] .crash-phase-pill{ left:14px !important; }
html[data-theme="phase2"] section[data-route="crash"] .crash-round-badge{ right:14px !important; font-family:'JetBrains Mono',monospace !important; }
html[data-theme="phase2"] section[data-route="crash"] .cph-dot{ display:none !important; }
html[data-theme="phase2"] section[data-route="crash"] #crash-countdown-bar{ background:rgba(255,255,255,.08) !important; height:3px; border-radius:2px; overflow:hidden; }
html[data-theme="phase2"] section[data-route="crash"] #crash-countdown-fill{ display:block; height:100%; background:var(--cr-blue) !important; box-shadow:none !important; }

/* controls: action first, then bet amount, then auto cashout */
html[data-theme="phase2"] section[data-route="crash"] .crash-panel,
html[data-theme="phase2"] section[data-route="crash"] .crash-controls{
  background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important;
  display:flex !important; flex-direction:column; gap:12px !important;
}
html[data-theme="phase2"] section[data-route="crash"] #crash-action,
html[data-theme="phase2"] section[data-route="crash"] .crash-bet-btn{
  order:-1; margin:0 0 2px;
  height:44px !important; border-radius:8px !important; border:0 !important;
  background:var(--cr-blue) !important; color:#fff !important;
  font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:14.5px !important; letter-spacing:0 !important;
  box-shadow:none !important; transition:filter .15s var(--ease-smooth), opacity .15s var(--ease-smooth);
  animation:none !important; transform:none !important;
}
html[data-theme="phase2"] section[data-route="crash"] #crash-action:hover:not(:disabled){ filter:brightness(1.1); }
html[data-theme="phase2"] section[data-route="crash"] #crash-action.btn-cashout{ background:var(--cr-green) !important; color:#052e16 !important; }
html[data-theme="phase2"] section[data-route="crash"] #crash-action.btn-disabled,
html[data-theme="phase2"] section[data-route="crash"] #crash-action:disabled{ background:var(--cr-raised) !important; color:rgba(255,255,255,.45) !important; filter:none; }
html[data-theme="phase2"] section[data-route="crash"] .control-group{ display:flex; flex-direction:column; gap:6px; }
html[data-theme="phase2"] section[data-route="crash"] .control-group label,
html[data-theme="phase2"] section[data-route="crash"] .cp-title,
html[data-theme="phase2"] section[data-route="crash"] .stats-title{
  font-family:'Manrope',sans-serif !important; font-weight:600 !important; font-size:13px !important;
  letter-spacing:0 !important; text-transform:lowercase !important; color:var(--cr-text) !important; margin:0 !important;
}
html[data-theme="phase2"] section[data-route="crash"] .control-group label::first-letter,
html[data-theme="phase2"] section[data-route="crash"] .cp-title::first-letter,
html[data-theme="phase2"] section[data-route="crash"] .stats-title::first-letter{ text-transform:uppercase; }
html[data-theme="phase2"] section[data-route="crash"] .control-label-row{ display:flex; align-items:center; justify-content:space-between; }
html[data-theme="phase2"] section[data-route="crash"] .bet-input{
  min-height:44px; padding:0 8px 0 12px !important; flex-wrap:nowrap !important;
  background:var(--cr-inset) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:8px !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transition:border-color .15s var(--ease-smooth);
}
html[data-theme="phase2"] section[data-route="crash"] .bet-input:focus-within{ border-color:rgba(255,255,255,.28) !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="crash"] .bet-input input{ font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:15px !important; color:#fff !important; flex:1 1 60px !important; width:auto !important; }
html[data-theme="phase2"] section[data-route="crash"] .bet-input button{
  background:transparent !important; border:0 !important; color:var(--cr-text) !important; box-shadow:none !important;
  border-radius:6px !important; font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:13px !important; padding:6px 9px !important;
}
html[data-theme="phase2"] section[data-route="crash"] .bet-input button:hover{ background:var(--cr-raised) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="crash"] .bet-presets{ gap:8px; }
html[data-theme="phase2"] section[data-route="crash"] .bet-presets > *{
  background:var(--cr-raised) !important; border:0 !important; color:var(--cr-text) !important; box-shadow:none !important;
  border-radius:6px !important; font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:12.5px !important;
}
html[data-theme="phase2"] section[data-route="crash"] .bet-presets > *:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }

/* players */
html[data-theme="phase2"] section[data-route="crash"] .crash-players{
  background:transparent !important; border:0 !important; border-top:1px solid var(--cr-line) !important; border-radius:0 !important;
  padding:14px 0 16px !important; margin:14px 0 0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html[data-theme="phase2"] section[data-route="crash"] .cp-head{ margin-bottom:10px !important; }
html[data-theme="phase2"] section[data-route="crash"] .cp-count{ background:var(--cr-raised) !important; color:#fff !important; border-radius:6px; padding:3px 9px; font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; }
html[data-theme="phase2"] section[data-route="crash"] .cp-list{ min-height:120px; }
html[data-theme="phase2"] section[data-route="crash"] .cp-empty{ font-family:'Manrope',sans-serif !important; font-size:13px !important; color:var(--cr-mute) !important; text-align:left !important; padding:6px 0 !important; }

/* provably-fair footer strip (the old game header, re-purposed) */
html[data-theme="phase2"] section[data-route="crash"] .game-header{
  display:flex !important; align-items:center; justify-content:space-between; gap:12px;
  background:var(--cr-card) !important; border:1px solid var(--cr-line); border-top:1px solid var(--cr-line); border-radius:0 0 12px 12px;
  height:44px !important; min-height:0 !important; padding:0 14px !important; margin:-14px 0 0 !important;
}
html[data-theme="phase2"] section[data-route="crash"] .gh-art,
html[data-theme="phase2"] section[data-route="crash"] .game-title,
html[data-theme="phase2"] section[data-route="crash"] .game-status{ display:none !important; }
html[data-theme="phase2"] section[data-route="crash"] .game-header{ justify-content:flex-start !important; text-align:left !important; position:relative; }
html[data-theme="phase2"] section[data-route="crash"] .fair-pill{
  position:static !important; transform:none !important; left:auto !important; right:auto !important; top:auto !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Manrope',sans-serif !important; font-weight:600 !important; font-size:13px !important; color:var(--cr-text) !important; letter-spacing:0 !important; text-transform:none !important;
}
html[data-theme="phase2"] section[data-route="crash"] .fair-pill:hover{ color:#fff !important; }
/* "How to Play" is appended by app.js as the shell's last child; seat it at
   the right end of the footer strip, opposite Fairness. */
html[data-theme="phase2"] section[data-route="crash"] .gg-howto-trigger{
  order:2; align-self:flex-end; position:relative; z-index:2; width:max-content;
  height:44px; margin:-58px 14px 0 auto !important; padding:0 !important;   /* -(strip 44 + shell gap 14); the shell's own gap follows */
  display:inline-flex !important; align-items:center; gap:6px;
  background:transparent !important; border:0 !important; border-radius:0 !important;
  font-family:'Manrope',sans-serif !important; font-weight:600 !important; font-size:13px !important; color:var(--cr-mute) !important;
}
html[data-theme="phase2"] section[data-route="crash"] .gg-howto-trigger:hover{ color:#fff !important; }


/* game info */
html[data-theme="phase2"] section[data-route="crash"] .crash-info{ background:var(--cr-card); border:1px solid var(--cr-line); border-radius:12px; padding:18px; font-family:'Manrope',sans-serif; }
html[data-theme="phase2"] section[data-route="crash"] .ci-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
html[data-theme="phase2"] section[data-route="crash"] .ci-name{ font-weight:800; font-size:16px; color:#fff; }
html[data-theme="phase2"] section[data-route="crash"] .ci-brand{ margin-left:8px; font-weight:600; font-size:14px; color:var(--cr-mute); }
html[data-theme="phase2"] section[data-route="crash"] .ci-tag{ background:var(--cr-raised); border-radius:6px; padding:5px 10px; font-size:12px; font-weight:700; color:var(--cr-text); white-space:nowrap; }
html[data-theme="phase2"] section[data-route="crash"] .ci-body{ display:flex; gap:18px; align-items:flex-start; }
html[data-theme="phase2"] section[data-route="crash"] .ci-art{ width:96px; height:auto; flex:none; border-radius:10px; }
html[data-theme="phase2"] section[data-route="crash"] .ci-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
html[data-theme="phase2"] section[data-route="crash"] .ci-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--cr-raised); border-radius:6px; padding:6px 10px; font-size:12.5px; font-weight:600; color:var(--cr-mute); }
html[data-theme="phase2"] section[data-route="crash"] .ci-chip strong{ color:#fff; font-weight:800; display:inline-flex; align-items:center; gap:4px; }
html[data-theme="phase2"] section[data-route="crash"] .ci-desc{ margin:0; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.7); }

/* history cards */
html[data-theme="phase2"] section[data-route="crash"] .stats-row{ gap:14px; }
html[data-theme="phase2"] section[data-route="crash"] .stats-col{
  background:var(--cr-card) !important; border:1px solid var(--cr-line) !important; border-radius:12px !important;
  box-shadow:none !important; padding:16px !important; min-height:200px !important;
}
html[data-theme="phase2"] section[data-route="crash"] .stats-head{ border-bottom:1px solid var(--cr-line) !important; padding-bottom:10px !important; }
html[data-theme="phase2"] section[data-route="crash"] .stats-title{ font-size:14px !important; font-weight:700 !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="crash"] .stats-meta{ font-family:'Manrope',sans-serif; font-size:12px; color:var(--cr-mute); }
html[data-theme="phase2"] section[data-route="crash"] .stats-empty{ font-family:'Manrope',sans-serif; font-size:13px; color:var(--cr-mute); }

@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="crash"] .crash-layout{ padding:12px 12px 0; }
  html[data-theme="phase2"] section[data-route="crash"] .crash-board{ aspect-ratio:4 / 3; min-height:240px !important; }
  html[data-theme="phase2"] section[data-route="crash"] .crash-multiplier{ font-size:clamp(40px, 12vw, 64px) !important; }
  html[data-theme="phase2"] section[data-route="crash"] .crash-multi-sub{ transform:translate(-50%, calc(-50% - 44px)) !important; }
  html[data-theme="phase2"] section[data-route="crash"] .game-header{ padding:0 12px !important; margin-top:-14px !important; }
  html[data-theme="phase2"] section[data-route="crash"] .gg-howto-trigger{ margin-right:12px !important; }
  html[data-theme="phase2"] section[data-route="crash"] .ci-body{ flex-direction:column; gap:12px; }
  html[data-theme="phase2"] section[data-route="crash"] .ci-art{ width:80px; }
  html[data-theme="phase2"] section[data-route="crash"] .stats-row{ grid-template-columns:1fr; }
}

/* ======================================================================
   ORIGINALS — clean game system (2026-09). Dice, Limbo, Plinko, Upgrader,
   Mines, Blackjack and Slots get the Crash treatment: transparent shell,
   one stacked card (board on top, controls under it, provably-fair strip),
   a game-info card, then the history cards. Flat navy, one blue, green for
   wins, 8px radii, Manrope, sentence-case labels; arcade decoration
   (particles, halos, bulbs, glows) hidden. Every id/class the engines set
   is untouched — the reorder is CSS `order` on existing markup.
   ====================================================================== */
html[data-theme="phase2"] section[data-route="dice"]:not(#_), html[data-theme="phase2"] section[data-route="limbo"]:not(#_), html[data-theme="phase2"] section[data-route="plinko"]:not(#_), html[data-theme="phase2"] section[data-route="upgrader"]:not(#_), html[data-theme="phase2"] section[data-route="mines"]:not(#_), html[data-theme="phase2"] section[data-route="blackjack"]:not(#_), html[data-theme="phase2"] section[data-route="slots"]:not(#_){ --cr-card:var(--pd-bg-1); --cr-inset:var(--pd-bg-0); --cr-raised:rgba(255,255,255,.06); --cr-line:rgba(255,255,255,.06); --cr-text:#cfd8e8; --cr-mute:rgba(255,255,255,.5); --cr-blue:#3B82F6; --cr-green:#22c55e; --cr-purple:#7c3aed; --cr-rose:#F43F5E; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-shell, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-shell, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-shell, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-shell, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-shell, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-shell, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-shell{
  display:flex !important; flex-direction:column; align-items:stretch; gap:14px;
  max-width:960px; margin:0 auto !important; width:100%;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; overflow:visible !important;
  grid-template-columns:none !important;
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .history-bar, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .history-bar, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .history-bar, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .history-bar, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .history-bar, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .history-bar, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .history-bar{ order:0; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-header, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-header, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-header, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-header, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-header, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-header, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-header{ order:3; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .gg-howto-trigger, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .gg-howto-trigger, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .gg-howto-trigger, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .gg-howto-trigger, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .gg-howto-trigger, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .gg-howto-trigger, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .gg-howto-trigger{ order:3; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-info, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-info, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-info, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-info, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-info, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-info, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-info{ order:4; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .stats-row, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .stats-row, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .stats-row, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .stats-row, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .stats-row, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .stats-row, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .stats-row{ order:5; margin:0 !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-popup{ order:6; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .gh-art, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .gh-art, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .gh-art, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .gh-art, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .gh-art, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .gh-art, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .gh-art, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-title, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-title, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-title, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-title, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-title, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-title, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-title, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-status, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-status, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-status, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-status, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-status, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-status, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-status{ display:none !important; }
/* provably-fair strip (the old game header) */
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-header, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-header, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-header, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-header, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-header, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-header, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-header{
  display:flex !important; align-items:center; justify-content:flex-start !important; text-align:left !important; gap:12px; position:relative;
  background:var(--cr-card) !important; border:1px solid var(--cr-line); border-radius:0 0 12px 12px;
  height:44px !important; min-height:0 !important; padding:0 14px !important; margin:-14px 0 0 !important; box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .fair-pill, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .fair-pill, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .fair-pill, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .fair-pill, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .fair-pill, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .fair-pill, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .fair-pill{
  position:static !important; transform:none !important; left:auto !important; right:auto !important; top:auto !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Manrope',sans-serif !important; font-weight:600 !important; font-size:13px !important; color:var(--cr-text) !important; letter-spacing:0 !important; text-transform:none !important;
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .fair-pill:hover, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .fair-pill:hover, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .fair-pill:hover, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .fair-pill:hover, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .fair-pill:hover, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .fair-pill:hover, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .fair-pill:hover{ color:#fff !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .gg-howto-trigger, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .gg-howto-trigger, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .gg-howto-trigger, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .gg-howto-trigger, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .gg-howto-trigger, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .gg-howto-trigger, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .gg-howto-trigger{
  align-self:flex-end; position:relative; z-index:2; width:max-content;
  height:44px; margin:-58px 14px 0 auto !important; padding:0 !important;
  display:inline-flex !important; align-items:center; gap:6px;
  background:transparent !important; border:0 !important; border-radius:0 !important;
  font-family:'Manrope',sans-serif !important; font-weight:600 !important; font-size:13px !important; color:var(--cr-mute) !important;
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .gg-howto-trigger:hover, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .gg-howto-trigger:hover, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .gg-howto-trigger:hover, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .gg-howto-trigger:hover, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .gg-howto-trigger:hover, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .gg-howto-trigger:hover, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .gg-howto-trigger:hover{ color:#fff !important; }
/* history chips (limbo) */
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .history-bar, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .history-bar, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .history-bar, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .history-bar, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .history-bar, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .history-bar, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .history-bar{
  background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important;
  display:flex !important; gap:8px; min-height:0 !important; overflow-x:auto; scrollbar-width:none;
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .history-bar > *, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .history-bar > *, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .history-bar > *, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .history-bar > *, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .history-bar > *, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .history-bar > *, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .history-bar > *{
  background:var(--cr-raised) !important; border:0 !important; color:var(--cr-text) !important;
  border-radius:8px !important; padding:7px 12px !important; box-shadow:none !important;
  font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:13px !important; flex-shrink:0;
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .history-bar > .high, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .history-bar > .high, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .history-bar > .high, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .history-bar > .high, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .history-bar > .high, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .history-bar > .high, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .history-bar > .high, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .history-bar > .win, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .history-bar > .win, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .history-bar > .win, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .history-bar > .win, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .history-bar > .win, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .history-bar > .win, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .history-bar > .win{ background:var(--cr-green) !important; color:#052e16 !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .history-bar > .huge, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .history-bar > .huge, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .history-bar > .huge, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .history-bar > .huge, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .history-bar > .huge, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .history-bar > .huge, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .history-bar > .huge{ background:var(--cr-purple) !important; color:#fff !important; }
/* controls: labels, inputs, chips, toggles, buttons */
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .control-group, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .control-group, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .control-group, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .control-group, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .control-group, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .control-group, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .control-group{ display:flex; flex-direction:column; gap:6px; width:100%; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .control-group label, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .control-group label, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .control-group label, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .control-group label, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .control-group label, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .control-group label, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .control-group label, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .cp-auto-stat-label, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .cp-auto-stat-label, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .cp-auto-stat-label, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .cp-auto-stat-label, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .cp-auto-stat-label, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .cp-auto-stat-label, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .cp-auto-stat-label, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .stats-title, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .stats-title, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .stats-title, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .stats-title, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .stats-title, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .stats-title, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .stats-title, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .payout-display .pd-label, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .payout-display .pd-label, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .payout-display .pd-label, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .payout-display .pd-label, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .payout-display .pd-label, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .payout-display .pd-label, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .payout-display .pd-label, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .limbo-info .li-label, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-info .li-label, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .limbo-info .li-label, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .limbo-info .li-label, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .limbo-info .li-label, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .limbo-info .li-label, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .limbo-info .li-label{
  font-family:'Manrope',sans-serif !important; font-weight:600 !important; font-size:13px !important;
  letter-spacing:0 !important; text-transform:lowercase !important; color:var(--cr-text) !important; margin:0 !important;
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .control-group label::first-letter, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .control-group label::first-letter, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .control-group label::first-letter, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .control-group label::first-letter, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .control-group label::first-letter, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .control-group label::first-letter, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .control-group label::first-letter, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .stats-title::first-letter, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .stats-title::first-letter, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .stats-title::first-letter, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .stats-title::first-letter, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .stats-title::first-letter, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .stats-title::first-letter, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .stats-title::first-letter{ text-transform:uppercase; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .control-label-row, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .control-label-row, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .control-label-row, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .control-label-row, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .control-label-row, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .control-label-row, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .control-label-row{ display:flex; align-items:center; justify-content:space-between; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .bet-input, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .bet-input, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .bet-input, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .bet-input, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .bet-input, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bet-input, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .bet-input{
  min-height:44px; padding:0 8px 0 12px !important; flex-wrap:nowrap !important; align-items:center;
  background:var(--cr-inset) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:8px !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transition:border-color .15s var(--ease-smooth);
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .bet-input:focus-within, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .bet-input:focus-within, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .bet-input:focus-within, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .bet-input:focus-within, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .bet-input:focus-within, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bet-input:focus-within, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .bet-input:focus-within{ border-color:rgba(255,255,255,.28) !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .bet-input input, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .bet-input input, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .bet-input input, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .bet-input input, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .bet-input input, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bet-input input, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .bet-input input{ font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:15px !important; color:#fff !important; flex:1 1 60px !important; width:auto !important; text-shadow:none !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .bet-input .suffix, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .bet-input .suffix, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .bet-input .suffix, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .bet-input .suffix, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .bet-input .suffix, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bet-input .suffix, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .bet-input .suffix{ color:var(--cr-mute); font-family:'Manrope',sans-serif; font-weight:700; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .bet-input button, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .bet-input button, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .bet-input button, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .bet-input button, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .bet-input button, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bet-input button, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .bet-input button{
  background:transparent !important; border:0 !important; color:var(--cr-text) !important; box-shadow:none !important;
  border-radius:6px !important; font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:13px !important; padding:6px 9px !important;
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .bet-input button:hover, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .bet-input button:hover, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .bet-input button:hover, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .bet-input button:hover, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .bet-input button:hover, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bet-input button:hover, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .bet-input button:hover{ background:var(--cr-raised) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .bet-presets, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .bet-presets, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .bet-presets, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .bet-presets, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .bet-presets, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bet-presets, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .bet-presets{ gap:8px; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .bet-presets > *, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .bet-presets > *, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .bet-presets > *, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .bet-presets > *, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .bet-presets > *, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bet-presets > *, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .bet-presets > *{
  background:var(--cr-raised) !important; border:0 !important; color:var(--cr-text) !important; box-shadow:none !important;
  border-radius:6px !important; font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:12.5px !important;
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .bet-presets > *:hover, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .bet-presets > *:hover, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .bet-presets > *:hover, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .bet-presets > *:hover, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .bet-presets > *:hover, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bet-presets > *:hover, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .bet-presets > *:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .seg-toggle, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .seg-toggle, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .seg-toggle, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .seg-toggle, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .seg-toggle, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .seg-toggle, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .seg-toggle{ display:flex; gap:3px; padding:3px; background:var(--cr-inset) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:8px !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .seg-btn, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .seg-btn, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .seg-btn, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .seg-btn, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .seg-btn, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .seg-btn, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .seg-btn{
  flex:1; height:36px; background:transparent !important; border:0 !important; color:var(--cr-text) !important; box-shadow:none !important;
  border-radius:6px !important; font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:13px !important; letter-spacing:0 !important; text-transform:none !important;
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .seg-btn.active, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .seg-btn.active, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .seg-btn.active, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .seg-btn.active, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .seg-btn.active, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .seg-btn.active, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .seg-btn.active{ background:var(--cr-raised) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .cp-panel-head, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .cp-panel-head, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .cp-panel-head, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .cp-panel-head, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .cp-panel-head, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .cp-panel-head, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .cp-panel-head{ order:-2; margin:0 0 2px !important; padding:0 !important; background:transparent !important; border:0 !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .cp-panel-tabs, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .cp-panel-tabs, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .cp-panel-tabs, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .cp-panel-tabs, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .cp-panel-tabs, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .cp-panel-tabs, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .cp-panel-tabs{ display:flex; gap:3px; padding:3px; background:var(--cr-inset) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:8px !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .cp-panel-tab, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .cp-panel-tab, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .cp-panel-tab, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .cp-panel-tab, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .cp-panel-tab, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .cp-panel-tab, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .cp-panel-tab{
  flex:1; height:40px; background:transparent !important; border:0 !important; color:var(--cr-text) !important; box-shadow:none !important;
  border-radius:6px !important; font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:13.5px !important; letter-spacing:0 !important; text-transform:lowercase !important;
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .cp-panel-tab::first-letter, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .cp-panel-tab::first-letter, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .cp-panel-tab::first-letter, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .cp-panel-tab::first-letter, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .cp-panel-tab::first-letter, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .cp-panel-tab::first-letter, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .cp-panel-tab::first-letter{ text-transform:uppercase; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .cp-panel-tab.is-active, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .cp-panel-tab.is-active, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .cp-panel-tab.is-active, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .cp-panel-tab.is-active, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .cp-panel-tab.is-active, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .cp-panel-tab.is-active, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .cp-panel-tab.is-active{ background:var(--cr-raised) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .cp-auto-stats, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .cp-auto-stats, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .cp-auto-stats, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .cp-auto-stats, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .cp-auto-stats, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .cp-auto-stats, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .cp-auto-stats{ order:1; display:flex; gap:10px; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .cp-auto-stat, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .cp-auto-stat, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .cp-auto-stat, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .cp-auto-stat, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .cp-auto-stat, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .cp-auto-stat, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .cp-auto-stat, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .payout-display, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .payout-display, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .payout-display, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .payout-display, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .payout-display, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .payout-display, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .payout-display, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .limbo-info, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-info, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .limbo-info, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .limbo-info, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .limbo-info, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .limbo-info, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .limbo-info{ flex:1; background:var(--cr-inset) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:8px !important; padding:10px 12px !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .cp-auto-stat-val, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .cp-auto-stat-val, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .cp-auto-stat-val, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .cp-auto-stat-val, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .cp-auto-stat-val, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .cp-auto-stat-val, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .cp-auto-stat-val, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .payout-display strong, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .payout-display strong, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .payout-display strong, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .payout-display strong, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .payout-display strong, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .payout-display strong, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .payout-display strong, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .payout-display b, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .payout-display b, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .payout-display b, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .payout-display b, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .payout-display b, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .payout-display b, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .payout-display b, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .limbo-chance, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-chance, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .limbo-chance, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .limbo-chance, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .limbo-chance, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .limbo-chance, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .limbo-chance, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .limbo-payout, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-payout, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .limbo-payout, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .limbo-payout, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .limbo-payout, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .limbo-payout, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .limbo-payout{ font-family:'Manrope',sans-serif !important; font-weight:800 !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .btn.big, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .btn.big, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .btn.big, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .btn.big, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .btn.big, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .btn.big, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .btn.big{
  height:44px !important; min-height:0 !important; border-radius:8px !important; border:0 !important;
  font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:14.5px !important; letter-spacing:0 !important; text-transform:none !important;
  box-shadow:none !important; background-image:none !important; animation:none !important; transform:none !important;
  transition:filter .15s var(--ease-smooth), opacity .15s var(--ease-smooth);
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .btn.big::first-letter, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .btn.big::first-letter, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .btn.big::first-letter, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .btn.big::first-letter, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .btn.big::first-letter, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .btn.big::first-letter, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .btn.big::first-letter{ text-transform:uppercase; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .btn.big .btn-shine, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .btn.big .btn-shine, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .btn.big .btn-shine, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .btn.big .btn-shine, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .btn.big .btn-shine, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .btn.big .btn-shine, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .btn.big .btn-shine{ display:none !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .btn-primary.big, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .btn-primary.big, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .btn-primary.big, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .btn-primary.big, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .btn-primary.big, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .btn-primary.big, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .btn-primary.big{ background:var(--cr-blue) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .btn-cashout.big, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .btn-cashout.big, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .btn-cashout.big, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .btn-cashout.big, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .btn-cashout.big, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .btn-cashout.big, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .btn-cashout.big{ background:var(--cr-green) !important; color:#052e16 !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .btn-outline.big, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .btn-outline.big, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .btn-outline.big, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .btn-outline.big, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .btn-outline.big, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .btn-outline.big, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .btn-outline.big, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .btn-ghost.big, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .btn-ghost.big, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .btn-ghost.big, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .btn-ghost.big, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .btn-ghost.big, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .btn-ghost.big, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .btn-ghost.big, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .btn-deposit.big, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .btn-deposit.big, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .btn-deposit.big, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .btn-deposit.big, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .btn-deposit.big, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .btn-deposit.big, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .btn-deposit.big{ background:var(--cr-raised) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .btn.big:hover:not(:disabled), html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .btn.big:hover:not(:disabled), html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .btn.big:hover:not(:disabled), html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .btn.big:hover:not(:disabled), html[data-theme="phase2"] section[data-route="mines"]:not(#_) .btn.big:hover:not(:disabled), html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .btn.big:hover:not(:disabled), html[data-theme="phase2"] section[data-route="slots"]:not(#_) .btn.big:hover:not(:disabled){ filter:brightness(1.1); }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .btn.big:disabled, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .btn.big:disabled, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .btn.big:disabled, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .btn.big:disabled, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .btn.big:disabled, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .btn.big:disabled, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .btn.big:disabled, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .btn.big.btn-disabled, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .btn.big.btn-disabled, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .btn.big.btn-disabled, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .btn.big.btn-disabled, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .btn.big.btn-disabled, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .btn.big.btn-disabled, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .btn.big.btn-disabled{ background:var(--cr-raised) !important; color:rgba(255,255,255,.45) !important; filter:none; }
/* game info + history cards */
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-info, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-info, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-info, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-info, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-info, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-info, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-info{ background:var(--cr-card); border:1px solid var(--cr-line); border-radius:12px; padding:18px; font-family:'Manrope',sans-serif; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .ci-head, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .ci-head, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .ci-head, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .ci-head, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .ci-head, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .ci-head, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .ci-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .ci-name, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .ci-name, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .ci-name, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .ci-name, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .ci-name, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .ci-name, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .ci-name{ font-weight:800; font-size:16px; color:#fff; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .ci-brand, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .ci-brand, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .ci-brand, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .ci-brand, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .ci-brand, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .ci-brand, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .ci-brand{ margin-left:8px; font-weight:600; font-size:14px; color:var(--cr-mute); }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .ci-tag, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .ci-tag, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .ci-tag, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .ci-tag, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .ci-tag, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .ci-tag, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .ci-tag{ background:var(--cr-raised); border-radius:6px; padding:5px 10px; font-size:12px; font-weight:700; color:var(--cr-text); white-space:nowrap; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .ci-body, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .ci-body, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .ci-body, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .ci-body, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .ci-body, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .ci-body, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .ci-body{ display:flex; gap:18px; align-items:flex-start; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .ci-art, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .ci-art, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .ci-art, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .ci-art, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .ci-art, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .ci-art, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .ci-art{ width:96px; height:auto; flex:none; border-radius:10px; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .ci-chips, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .ci-chips, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .ci-chips, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .ci-chips, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .ci-chips, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .ci-chips, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .ci-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .ci-chip, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .ci-chip, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .ci-chip, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .ci-chip, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .ci-chip, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .ci-chip, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .ci-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--cr-raised); border-radius:6px; padding:6px 10px; font-size:12.5px; font-weight:600; color:var(--cr-mute); }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .ci-chip strong, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .ci-chip strong, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .ci-chip strong, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .ci-chip strong, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .ci-chip strong, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .ci-chip strong, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .ci-chip strong{ color:#fff; font-weight:800; display:inline-flex; align-items:center; gap:4px; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .ci-desc, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .ci-desc, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .ci-desc, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .ci-desc, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .ci-desc, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .ci-desc, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .ci-desc{ margin:0; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.7); }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .stats-row, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .stats-row, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .stats-row, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .stats-row, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .stats-row, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .stats-row, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .stats-row{ gap:14px; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .stats-col, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .stats-col, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .stats-col, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .stats-col, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .stats-col, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .stats-col, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .stats-col{ background:var(--cr-card) !important; border:1px solid var(--cr-line) !important; border-radius:12px !important; box-shadow:none !important; padding:16px !important; min-height:200px !important; background-image:none !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .stats-head, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .stats-head, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .stats-head, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .stats-head, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .stats-head, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .stats-head, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .stats-head{ border-bottom:1px solid var(--cr-line) !important; padding-bottom:10px !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .stats-title, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .stats-title, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .stats-title, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .stats-title, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .stats-title, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .stats-title, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .stats-title{ font-size:14px !important; font-weight:700 !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .stats-meta, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .stats-meta, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .stats-meta, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .stats-meta, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .stats-meta, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .stats-meta, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .stats-meta{ font-family:'Manrope',sans-serif; font-size:12px; color:var(--cr-mute); }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .stats-empty, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .stats-empty, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .stats-empty, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .stats-empty, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .stats-empty, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .stats-empty, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .stats-empty{ font-family:'Manrope',sans-serif; font-size:13px; color:var(--cr-mute); }

html[data-theme="phase2"] section[data-route="dice"]:not(#_) .dice-particles{ display:none !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .dice-stage{ order:1; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .dice-controls{ order:2; margin-top:-14px !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .dice-stage{
  width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important;
  background:var(--cr-inset) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-bottom:0 !important; border-radius:12px 12px 0 0 !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .dice-controls{
  width:100% !important; max-width:none !important;
  background:var(--cr-card) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-top:0 !important; border-radius:0 !important;
  padding:14px !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  display:flex !important; flex-direction:column; gap:12px !important;
}
html[data-theme="phase2"] section[data-route="dice"]:not(#_) #dice-roll{ order:-1; margin:0 0 2px !important; width:100% !important; }

html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-particles, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-grid, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-glow{ display:none !important; }
html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-stage{ order:1; }
html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-controls{ order:2; margin-top:-14px !important; }
html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-stage{
  width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important;
  background:var(--cr-inset) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-bottom:0 !important; border-radius:12px 12px 0 0 !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-controls{
  width:100% !important; max-width:none !important;
  background:var(--cr-card) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-top:0 !important; border-radius:0 !important;
  padding:14px !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  display:flex !important; flex-direction:column; gap:12px !important;
}
html[data-theme="phase2"] section[data-route="limbo"]:not(#_) #limbo-roll{ order:-1; margin:0 0 2px !important; width:100% !important; }

html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .plinko-stars{ display:none !important; }
html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .plinko-board{ order:1; }
html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .plinko-controls{ order:2; margin-top:-14px !important; }
html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .plinko-board{
  width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important;
  background:var(--cr-inset) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-bottom:0 !important; border-radius:12px 12px 0 0 !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .plinko-controls{
  width:100% !important; max-width:none !important;
  background:var(--cr-card) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-top:0 !important; border-radius:0 !important;
  padding:14px !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  display:flex !important; flex-direction:column; gap:12px !important;
}
html[data-theme="phase2"] section[data-route="plinko"]:not(#_) #plinko-drop{ order:-1; margin:0 0 2px !important; width:100% !important; }

html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .upgrader-particles{ display:none !important; }
html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .upgrader-stage{ order:1; }
html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .upgrader-controls{ order:2; margin-top:-14px !important; }
html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .upgrader-stage{
  width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important;
  background:var(--cr-inset) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-bottom:0 !important; border-radius:12px 12px 0 0 !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .upgrader-controls{
  width:100% !important; max-width:none !important;
  background:var(--cr-card) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-top:0 !important; border-radius:0 !important;
  padding:14px !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  display:flex !important; flex-direction:column; gap:12px !important;
}
html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) #upgrader-spin{ order:-1; margin:0 0 2px !important; width:100% !important; }

html[data-theme="phase2"] section[data-route="mines"]:not(#_) .mines-layout{
  order:1; display:flex !important; flex-direction:column; align-items:stretch; gap:0 !important; margin:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; grid-template-columns:none !important; width:100%;
}
html[data-theme="phase2"] section[data-route="mines"]:not(#_) .mines-grid{ order:0; }
html[data-theme="phase2"] section[data-route="mines"]:not(#_) .mines-panel{ order:1; margin-top:0 !important; }
html[data-theme="phase2"] section[data-route="mines"]:not(#_) .mines-grid{
  width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important;
  background:var(--cr-inset) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-bottom:0 !important; border-radius:12px 12px 0 0 !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html[data-theme="phase2"] section[data-route="mines"]:not(#_) .mines-panel{
  width:100% !important; max-width:none !important;
  background:var(--cr-card) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-top:0 !important; border-radius:0 !important;
  padding:14px !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  display:flex !important; flex-direction:column; gap:12px !important;
}
html[data-theme="phase2"] section[data-route="mines"]:not(#_) #mines-start, html[data-theme="phase2"] section[data-route="mines"]:not(#_) #mines-cashout{ order:-1; margin:0 0 2px !important; width:100% !important; }

html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bj-particles{ display:none !important; }
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bj-shell-grid{
  order:1; display:flex !important; flex-direction:column; align-items:stretch; gap:0 !important; margin:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; grid-template-columns:none !important; width:100%;
}
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bj-table{ order:0; }
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bj-controls{ order:1; margin-top:0 !important; }
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bj-table{
  width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important;
  background:var(--cr-inset) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-bottom:0 !important; border-radius:12px 12px 0 0 !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bj-controls{
  width:100% !important; max-width:none !important;
  background:var(--cr-card) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-top:0 !important; border-radius:0 !important;
  padding:14px !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  display:flex !important; flex-direction:column; gap:12px !important;
}
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) #bj-deal{ order:-1; margin:0 0 2px !important; width:100% !important; }

html[data-theme="phase2"] section[data-route="slots"]:not(#_) .slots-petals, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .sm-floor-halo, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .sm-bulbs{ display:none !important; }
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .slots-shell-grid{ order:1; display:flex !important; flex-direction:column; align-items:stretch; gap:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; grid-template-columns:none !important; width:100%; }
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .slots-machine{ order:0; }
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .slots-controls{ order:1; margin-top:0 !important; }
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .paytable-collapse{ order:2; margin:-14px 0 0 !important; background:var(--cr-card) !important; border:1px solid var(--cr-line) !important; border-top:0 !important; border-radius:0 !important; padding:0 14px 14px !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .slots-machine{
  width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important;
  background:var(--cr-inset) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-bottom:0 !important; border-radius:12px 12px 0 0 !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .slots-controls{
  width:100% !important; max-width:none !important;
  background:var(--cr-card) !important; background-image:none !important;
  border:1px solid var(--cr-line) !important; border-top:0 !important; border-radius:0 !important;
  padding:14px !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  display:flex !important; flex-direction:column; gap:12px !important;
}
html[data-theme="phase2"] section[data-route="slots"]:not(#_) #slots-spin{ order:-1; margin:0 0 2px !important; width:100% !important; }

/* dice: stage keeps its cubes + target bar; chips flattened */
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .dice-stage{ padding:28px 24px 24px !important; min-height:300px; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .dice-mode-pill, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .dice-roll-readout{
  background:var(--cr-raised) !important; border:0 !important; border-radius:8px !important; box-shadow:none !important;
  font-family:'Manrope',sans-serif !important; color:var(--cr-text) !important;
}
/* limbo: the number is the whole board */
html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-stage{ min-height:300px; padding:24px !important; }
html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-multi{ font-family:'Manrope',sans-serif !important; font-weight:800 !important; text-shadow:none !important; filter:none !important; }
html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-target-line{ background:var(--cr-raised) !important; border:0 !important; border-radius:8px !important; box-shadow:none !important; font-family:'Manrope',sans-serif !important; }
/* plinko: buckets flat */
html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .plinko-board{ padding:18px 18px 14px !important; }
html[data-theme="phase2"] section[data-route="plinko"]:not(#_) #plinko-slots > *{ border-radius:6px !important; box-shadow:none !important; font-family:'Manrope',sans-serif !important; font-weight:800 !important; border:0 !important; text-shadow:none !important; }
/* upgrader */
html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .upgrader-stage{ padding:24px !important; min-height:320px; }
html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .upgrader-percent, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .upgrader-mult{ font-family:'Manrope',sans-serif !important; text-shadow:none !important; filter:none !important; }
/* mines: 5x5 grid centred in the inset, flat tiles */
html[data-theme="phase2"] section[data-route="mines"]:not(#_) .mines-grid{ padding:28px 24px !important; display:grid !important; grid-template-columns:repeat(5, 76px) !important; grid-template-rows:repeat(5, 76px) !important; grid-auto-rows:76px; justify-content:center !important; align-content:center; gap:8px !important; max-width:none !important; min-height:0 !important; height:auto !important; aspect-ratio:auto !important; }
html[data-theme="phase2"] section[data-route="mines"]:not(#_) .mines-grid > *{ max-width:none !important; }
html[data-theme="phase2"] section[data-route="mines"]:not(#_) .mine-tile{
  background:var(--cr-raised) !important; background-image:none !important; border:1px solid rgba(255,255,255,.06) !important;
  border-radius:8px !important; box-shadow:none !important; aspect-ratio:1 / 1; width:100% !important; height:auto !important;
}
html[data-theme="phase2"] section[data-route="mines"]:not(#_) .mine-tile:hover:not(.revealed):not(.mine):not(.gem){ background:rgba(255,255,255,.1) !important; }

/* blackjack: flat felt, action buttons in a row under the deal button */
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bj-table{
  background:radial-gradient(ellipse at 50% 20%, #0f2a24, #0a1a18 70%) !important; padding:22px !important; min-height:340px;
}
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bj-suit{ opacity:.06 !important; }
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bj-controls{ flex-direction:row !important; flex-wrap:wrap; }
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bj-controls > .control-group{ flex:1 1 100%; order:0; }
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) #bj-deal{ flex:1 1 100%; order:-1; }
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) #bj-hit, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) #bj-stand,
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) #bj-double, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) #bj-insure,
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) #bj-surrender{ flex:1 1 calc(20% - 10px); min-width:120px; order:1; width:auto !important; }
html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) #bj-howto-btn{ flex:1 1 100%; order:2; margin:2px 0 0 !important; justify-content:center; background:transparent !important; border:0 !important; color:var(--cr-mute) !important; font-family:'Manrope',sans-serif !important; font-size:13px !important; }
/* slots: keep the cabinet, drop the arcade dressing */
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .slots-machine{ padding:22px !important; }
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .sm-crown-frame, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .sm-cabinet, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .sm-cabinet-inner, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .sm-tray{
  background:var(--cr-card) !important; background-image:none !important; border:1px solid var(--cr-line) !important; border-radius:10px !important; box-shadow:none !important;
}
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .paytable{ background:var(--cr-card) !important; border:1px solid var(--cr-line) !important; border-radius:10px !important; box-shadow:none !important; }
@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="dice"]:not(#_) .dice-stage, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .limbo-stage, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .upgrader-stage{ min-height:240px; padding:18px !important; }
  html[data-theme="phase2"] section[data-route="mines"]:not(#_) .mines-grid{ padding:14px !important; gap:6px !important; grid-template-columns:repeat(5, minmax(0,1fr)) !important; grid-template-rows:none !important; grid-auto-rows:auto; }
  html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .bj-table{ padding:14px !important; min-height:280px; }
  html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) #bj-hit, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) #bj-stand, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) #bj-double, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) #bj-insure, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) #bj-surrender{ flex:1 1 calc(50% - 10px); }
  html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-header{ padding:0 12px !important; } html[data-theme="phase2"] section[data-route="dice"]:not(#_) .gg-howto-trigger{ margin-right:12px !important; } html[data-theme="phase2"] section[data-route="dice"]:not(#_) .ci-body{ flex-direction:column; gap:12px; } html[data-theme="phase2"] section[data-route="dice"]:not(#_) .ci-art{ width:80px; } html[data-theme="phase2"] section[data-route="dice"]:not(#_) .stats-row{ grid-template-columns:1fr; }
  html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-header{ padding:0 12px !important; } html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .gg-howto-trigger{ margin-right:12px !important; } html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .ci-body{ flex-direction:column; gap:12px; } html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .ci-art{ width:80px; } html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .stats-row{ grid-template-columns:1fr; }
  html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-header{ padding:0 12px !important; } html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .gg-howto-trigger{ margin-right:12px !important; } html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .ci-body{ flex-direction:column; gap:12px; } html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .ci-art{ width:80px; } html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .stats-row{ grid-template-columns:1fr; }
  html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-header{ padding:0 12px !important; } html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .gg-howto-trigger{ margin-right:12px !important; } html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .ci-body{ flex-direction:column; gap:12px; } html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .ci-art{ width:80px; } html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .stats-row{ grid-template-columns:1fr; }
  html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-header{ padding:0 12px !important; } html[data-theme="phase2"] section[data-route="mines"]:not(#_) .gg-howto-trigger{ margin-right:12px !important; } html[data-theme="phase2"] section[data-route="mines"]:not(#_) .ci-body{ flex-direction:column; gap:12px; } html[data-theme="phase2"] section[data-route="mines"]:not(#_) .ci-art{ width:80px; } html[data-theme="phase2"] section[data-route="mines"]:not(#_) .stats-row{ grid-template-columns:1fr; }
  html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-header{ padding:0 12px !important; } html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .gg-howto-trigger{ margin-right:12px !important; } html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .ci-body{ flex-direction:column; gap:12px; } html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .ci-art{ width:80px; } html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .stats-row{ grid-template-columns:1fr; }
  html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-header{ padding:0 12px !important; } html[data-theme="phase2"] section[data-route="slots"]:not(#_) .gg-howto-trigger{ margin-right:12px !important; } html[data-theme="phase2"] section[data-route="slots"]:not(#_) .ci-body{ flex-direction:column; gap:12px; } html[data-theme="phase2"] section[data-route="slots"]:not(#_) .ci-art{ width:80px; } html[data-theme="phase2"] section[data-route="slots"]:not(#_) .stats-row{ grid-template-columns:1fr; }
}

/* ---------- Result popups: overlay over the board (all Originals) ---------- */
html[data-theme="phase2"] section[data-route="crash"]:not(#_) .game-shell, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-shell, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-shell, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-shell, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-shell, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-shell, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-shell, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-shell{ position:relative !important; }
html[data-theme="phase2"] section[data-route="crash"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-popup{
  position:absolute !important; left:50% !important; top:18px; right:auto !important; bottom:auto !important;
  transform:translate(-50%,-10px) scale(.98) !important; width:min(440px, calc(100% - 32px)); margin:0 !important; z-index:20; order:0;
  display:flex !important; align-items:center; gap:14px; padding:12px 16px !important; min-height:0 !important; height:auto !important;
  background:var(--cr-card, var(--pd-bg-1)) !important; background-image:none !important;
  border:1px solid rgba(255,255,255,.1) !important; border-left:3px solid #22c55e !important; border-radius:10px !important;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.75) !important; opacity:0; pointer-events:none; text-align:left;
  transition:opacity .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1) !important;
}
html[data-theme="phase2"] section[data-route="crash"]:not(#_) .game-popup.show, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-popup.show, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-popup.show, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-popup.show, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-popup.show, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-popup.show, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-popup.show, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-popup.show{ opacity:1; transform:translate(-50%,0) scale(1) !important; }
html[data-theme="phase2"] section[data-route="crash"]:not(#_) .game-popup.loss, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-popup.loss, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-popup.loss, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-popup.loss, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-popup.loss, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-popup.loss, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-popup.loss, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-popup.loss{ border-left-color:#F43F5E !important; }
html[data-theme="phase2"] section[data-route="crash"]:not(#_) .game-popup.push, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-popup.push, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-popup.push, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-popup.push, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-popup.push, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-popup.push, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-popup.push, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-popup.push{ border-left-color:#eab308 !important; }
html[data-theme="phase2"] section[data-route="crash"]:not(#_) .game-popup .gp-content, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-popup .gp-content, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-popup .gp-content, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-popup .gp-content, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-popup .gp-content, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-popup .gp-content, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-popup .gp-content, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-popup .gp-content{ display:flex; flex-direction:column; align-items:flex-start; gap:0; min-width:0; }
html[data-theme="phase2"] section[data-route="crash"]:not(#_) .gp-title, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .gp-title, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .gp-title, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .gp-title, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .gp-title, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .gp-title, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .gp-title, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .gp-title{ font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:800 !important; color:#fff !important; letter-spacing:0 !important; margin:0 !important; }
html[data-theme="phase2"] section[data-route="crash"]:not(#_) .gp-sub, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .gp-sub, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .gp-sub, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .gp-sub, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .gp-sub, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .gp-sub, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .gp-sub, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .gp-sub{ font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:600 !important; color:rgba(255,255,255,.55) !important; margin:1px 0 0 !important; }
html[data-theme="phase2"] section[data-route="crash"]:not(#_) .gp-payout, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .gp-payout, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .gp-payout, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .gp-payout, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .gp-payout, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .gp-payout, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .gp-payout, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .gp-payout{ font-family:'Manrope',sans-serif !important; font-size:18px !important; font-weight:800 !important; color:#22c55e !important; margin:0 0 0 auto !important; letter-spacing:0 !important; white-space:nowrap; }
html[data-theme="phase2"] section[data-route="crash"]:not(#_) .game-popup.loss .gp-payout, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-popup.loss .gp-payout, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-popup.loss .gp-payout, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-popup.loss .gp-payout, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-popup.loss .gp-payout, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-popup.loss .gp-payout, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-popup.loss .gp-payout, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-popup.loss .gp-payout{ color:#F43F5E !important; }

/* Crash: cashed-out number is the site green; countdown drain sits under the digits, not through them */
html[data-theme="phase2"] section[data-route="crash"]:not(#_) .crash-multiplier.locked{ color:#22c55e !important; }
html[data-theme="phase2"] section[data-route="crash"] #crash-countdown-bar{ top:calc(50% + 66px) !important; }
/* Dice: mode pill left, roll readout right — they used to share the top-centre */
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .dice-mode-pill{ left:18px !important; right:auto !important; top:18px !important; transform:none !important; }
html[data-theme="phase2"] section[data-route="dice"]:not(#_) .dice-roll-readout{ left:auto !important; right:18px !important; top:18px !important; transform:none !important; text-align:right; }
/* Slots: the payouts bar in the card palette */
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .paytable-collapse[open]{ box-shadow:none !important; border-color:var(--cr-line) !important; }
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .paytable-summary{ background:var(--cr-raised) !important; background-image:none !important; border:0 !important; border-radius:8px !important; padding:12px 14px !important; font-family:'Manrope',sans-serif !important; }
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .paytable-summary:hover{ background:rgba(255,255,255,.1) !important; }
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .paytable-summary .ps-label{ font-size:13px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .paytable-summary .ps-meta{ font-size:12px !important; letter-spacing:0 !important; text-transform:none !important; color:var(--cr-mute) !important; }
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .paytable-summary .ps-icon,
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .paytable-summary .ps-chev{ color:var(--cr-mute) !important; }
html[data-theme="phase2"] section[data-route="slots"]:not(#_) .paytable-collapse .paytable-v2{ background:transparent !important; border:0 !important; box-shadow:none !important; margin-top:10px; }
@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="crash"] #crash-countdown-bar{ top:calc(50% + 50px) !important; }
  html[data-theme="phase2"] section[data-route="crash"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="dice"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="limbo"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="plinko"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="upgrader"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="mines"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="blackjack"]:not(#_) .game-popup, html[data-theme="phase2"] section[data-route="slots"]:not(#_) .game-popup{ width:calc(100% - 24px); }
}

/* ======================================================================
   CHAT — clean card system (2026-09). Same language as the Originals:
   solid navy panel, hairlines, 8px radii, Manrope, sentence-case, one
   blue. No glass, no glow, no uppercase dividers. Every id / class the
   chat engine binds to is unchanged; this is skin only.
   ====================================================================== */
html[data-theme="phase2"] aside.chat:not(#_){
  background:var(--pd-bg-1) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-right:1px solid rgba(255,255,255,.06) !important; box-shadow:none !important;
  font-family:'Manrope',sans-serif;
}
/* Header — title left, ghost icon tabs right */
html[data-theme="phase2"] aside.chat:not(#_) .chat-head{
  display:flex !important; align-items:center !important; gap:6px !important;
  height:52px !important; padding:0 10px 0 16px !important;
  background:transparent !important; border-bottom:1px solid rgba(255,255,255,.06) !important; box-shadow:none !important;
}
html[data-theme="phase2"] aside.chat:not(#_) .chat-title{
  display:inline-flex !important; align-items:center; margin:0 auto 0 0 !important;
  font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:800 !important;
  letter-spacing:0 !important; text-transform:none !important; color:#fff !important; white-space:nowrap;
}
html[data-theme="phase2"] aside.chat:not(#_) .chat-title::before, html[data-theme="phase2"] aside.chat:not(#_) .chat-title::after{ display:none !important; content:none !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-icon-tabs{ display:flex !important; gap:4px !important; margin-left:auto !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-icon-tab{
  width:32px !important; height:32px !important; padding:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border-radius:8px !important; border:0 !important; background:transparent !important;
  color:rgba(255,255,255,.5) !important; box-shadow:none !important;
}
html[data-theme="phase2"] aside.chat:not(#_) .chat-icon-tab:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-icon-tab.active{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-icon-tab svg{ width:15px !important; height:15px !important; }

/* Feed */
html[data-theme="phase2"] aside.chat:not(#_) .chat-body{ padding:10px 8px !important; gap:2px !important; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.12) transparent; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-body::-webkit-scrollbar{ width:4px; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:2px; }
html[data-theme="phase2"] aside.chat:not(#_) .cmsg{
  padding:8px 10px !important; gap:10px !important; border-radius:8px !important; align-items:flex-start !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
html[data-theme="phase2"] aside.chat:not(#_) .cmsg:hover{ background:rgba(255,255,255,.035) !important; }
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-avatar{
  width:30px !important; height:30px !important; flex:0 0 30px !important; border-radius:50% !important;
  border:1px solid rgba(255,255,255,.08) !important; box-shadow:none !important; margin-top:1px; font-size:14px !important;
  display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden;
}
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-avatar img{ width:100% !important; height:100% !important; border-radius:50% !important; object-fit:cover; }
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-body{ min-width:0; flex:1 1 auto; font-size:13.5px !important; line-height:1.45 !important; }
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-line{ display:flex; align-items:center; gap:6px; min-width:0; }
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-name{
  display:inline-flex !important; align-items:center; gap:6px; min-width:0;
  font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:800 !important; letter-spacing:0 !important;
  filter:saturate(.8) brightness(1.05) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-text{ color:#dfe5ee !important; font-size:13.5px !important; font-weight:500; margin-top:1px !important; overflow-wrap:anywhere; }
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-mention{ color:#3B82F6 !important; font-weight:700 !important; background:rgba(59,130,246,.12); border-radius:4px; padding:0 3px; }
/* Rank tag — the one uppercase element, as a tiny raised chip */
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-rank{
  display:inline-flex !important; align-items:center; height:16px; padding:0 5px !important; border-radius:4px !important;
  font-family:'Manrope',sans-serif !important; font-size:9.5px !important; font-weight:800 !important; letter-spacing:.06em !important;
  background:rgba(255,255,255,.08) !important; color:#fff !important; border:0 !important; box-shadow:none !important; filter:none !important;
  margin:0 !important; vertical-align:middle; line-height:1 !important;
}
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-rank::before, html[data-theme="phase2"] aside.chat:not(#_) .cmsg-rank::after{ display:none !important; content:none !important; }
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-rank.rank-admin, html[data-theme="phase2"] aside.chat:not(#_) .cmsg-rank.rank-dev, html[data-theme="phase2"] aside.chat:not(#_) .cmsg-rank.rank-owner{ background:rgba(244,63,94,.18) !important; color:#fda4af !important; }
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-rank.rank-mod{ background:rgba(59,130,246,.18) !important; color:#93c5fd !important; }
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-rank.rank-vip{ background:rgba(234,179,8,.18) !important; color:#fde68a !important; }
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-rank.rank-bot{ background:rgba(255,255,255,.08) !important; color:rgba(255,255,255,.7) !important; }
/* System rows — quiet centred chip, sentence-case */
html[data-theme="phase2"] aside.chat:not(#_) .cmsg:has(> .cmsg-system){ justify-content:center !important; padding:4px 0 !important; }
html[data-theme="phase2"] aside.chat:not(#_) .cmsg:has(> .cmsg-system):hover{ background:transparent !important; }
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-system{
  flex:0 1 auto !important; display:inline-flex !important; align-items:center; gap:0 !important;
  padding:7px 12px !important; border-radius:8px !important;
  background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.06) !important;
  font-family:'Manrope',sans-serif !important; font-size:12px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important; color:rgba(255,255,255,.55) !important; text-align:center;
}
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-system::before, html[data-theme="phase2"] aside.chat:not(#_) .cmsg-system::after{ content:none !important; display:none !important; }
/* Moderator delete */
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-del{ border-radius:6px !important; background:rgba(255,255,255,.06) !important; color:rgba(255,255,255,.6) !important; border:0 !important; box-shadow:none !important; font-size:11px !important; }
html[data-theme="phase2"] aside.chat:not(#_) .cmsg-del:hover{ background:rgba(244,63,94,.2) !important; color:#fda4af !important; }

/* Composer */
html[data-theme="phase2"] aside.chat:not(#_) .chat-input{ display:flex !important; align-items:center !important; gap:8px !important; padding:12px 12px !important; background:transparent !important; border-top:1px solid rgba(255,255,255,.06) !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-input input{
  flex:1 1 auto !important; min-width:0; height:44px !important; padding:0 14px !important;
  background:var(--pd-bg-0) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:8px !important;
  font-family:'Manrope',sans-serif !important; font-size:13.5px !important; font-weight:600 !important; color:#fff !important; box-shadow:none !important;
}
html[data-theme="phase2"] aside.chat:not(#_) .chat-input input::placeholder{ color:rgba(255,255,255,.4) !important; font-weight:600; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-input input:focus{ border-color:#3B82F6 !important; background:var(--pd-bg-0) !important; box-shadow:0 0 0 2px rgba(59,130,246,.2) !important; outline:none !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-input input:disabled{ opacity:1 !important; border-style:solid !important; background:var(--pd-bg-0) !important; color:rgba(255,255,255,.4) !important; cursor:not-allowed; }
html[data-theme="phase2"] aside.chat:not(#_) .btn-send{
  width:44px !important; height:44px !important; flex:0 0 44px !important; border-radius:8px !important;
  background:#3B82F6 !important; background-image:none !important; border:0 !important; color:#fff !important;
  box-shadow:none !important; filter:none !important; transform:none !important; opacity:1 !important;
}
html[data-theme="phase2"] aside.chat:not(#_) .btn-send::before{ width:17px !important; height:17px !important; filter:none !important; }
html[data-theme="phase2"] aside.chat:not(#_) .btn-send:hover{ background:#2f6fd6 !important; filter:none !important; transform:none !important; box-shadow:none !important; }
html[data-theme="phase2"] aside.chat:not(#_) .btn-send:active{ transform:scale(.96) !important; }
html[data-theme="phase2"] aside.chat:not(#_) .btn-send:disabled{ background:rgba(255,255,255,.06) !important; color:rgba(255,255,255,.4) !important; opacity:1 !important; filter:none !important; cursor:not-allowed; }
html[data-theme="phase2"] aside.chat:not(#_) .btn-send:disabled::before{ opacity:.45; }

/* Footer — fairness shield left, online readout right */
html[data-theme="phase2"] aside.chat:not(#_) .chat-footer-bar{ display:flex !important; align-items:center !important; height:40px !important; padding:0 14px 0 10px !important; background:transparent !important; border-top:1px solid rgba(255,255,255,.06) !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-foot-icon{ width:30px !important; height:30px !important; border-radius:8px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; color:rgba(255,255,255,.5) !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-foot-icon:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-foot-icon svg path[stroke]{ stroke:var(--pd-bg-1); }
html[data-theme="phase2"] aside.chat:not(#_) .chat-foot-online{ display:inline-flex !important; align-items:center !important; gap:6px !important; font-family:'Manrope',sans-serif !important; font-size:12px !important; font-weight:800 !important; color:#fff !important; letter-spacing:0 !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-foot-online::after{ content:'online' !important; font-family:'Manrope',sans-serif !important; font-size:12px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; color:rgba(255,255,255,.5) !important; margin-left:0 !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-online-dot{ width:7px !important; height:7px !important; border-radius:50% !important; background:#22c55e !important; box-shadow:none !important; animation:none !important; }

/* Rules panel */
html[data-theme="phase2"] aside.chat:not(#_) .chat-rules-panel{ padding:16px 16px 14px !important; font-family:'Manrope',sans-serif !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-rules-title{ font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:800 !important; letter-spacing:0 !important; text-transform:none !important; color:#fff !important; margin:0 0 10px !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-rules-list{ font-family:'Manrope',sans-serif !important; font-size:13px !important; line-height:1.5 !important; color:#dfe5ee !important; padding-left:16px !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-rules-list li{ margin:0 0 6px !important; }
html[data-theme="phase2"] aside.chat:not(#_) .chat-rules-foot{ font-family:'Manrope',sans-serif !important; font-size:12.5px !important; color:rgba(255,255,255,.5) !important; border-top:1px solid rgba(255,255,255,.06) !important; padding-top:10px !important; line-height:1.5; }

/* Mobile overlay keeps the same skin; a touch more row padding for thumbs */
@media (max-width:900px){
  html[data-theme="phase2"] aside.chat:not(#_) .cmsg{ padding:9px 12px !important; }
  html[data-theme="phase2"] aside.chat:not(#_) .chat-body{ padding:10px 6px !important; }
}

/* Rules view: the older `.chat-body{display:flex !important}` (41390) used to
   beat the non-important hide, so rules rendered UNDER the messages. */
html[data-theme="phase2"] aside.chat:not(#_)[data-view="rules"] #chat-body,
html[data-theme="phase2"] aside.chat:not(#_)[data-view="rules"] #chat-form{ display:none !important; }
html[data-theme="phase2"] aside.chat:not(#_)[data-view="rules"] #chat-rules-panel{ display:block !important; }
html[data-theme="phase2"] aside.chat:not(#_)[data-view="messages"] #chat-rules-panel{ display:none !important; }

/* ======================================================================
   HOME — clean card system (2026-09). Same language as the Originals and
   the chat: flat navy, hairlines, 8px–12px radii, Manrope, sentence-case,
   one blue. Section heads unified (raised icon square, "View all" pill),
   Games row is a scroll-snap rail with header arrows, FAQ/footer quieted.
   ====================================================================== */
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home{ font-family:'Manrope',sans-serif !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-section{ margin-top:40px !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-top-banners{ gap:14px !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-promo, html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-community-banner{ border-radius:12px !important; border:1px solid rgba(255,255,255,.06) !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-section-head{ display:flex !important; align-items:center !important; gap:10px !important; margin:0 0 14px !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-section-title{ display:inline-flex !important; align-items:center !important; gap:10px !important; margin:0 !important; font-family:'Manrope',sans-serif !important; font-size:16px !important; font-weight:800 !important; letter-spacing:0 !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-section-title-icon{ width:28px !important; height:28px !important; border-radius:8px !important; background:rgba(255,255,255,.06) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; color:#3B82F6 !important; font-size:0 !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-section-title-icon svg{ width:15px !important; height:15px !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-section-view-all{ margin-left:auto !important; display:inline-flex !important; align-items:center !important; gap:2px !important; height:30px !important; padding:0 10px 0 12px !important; border-radius:8px !important; background:rgba(255,255,255,.06) !important; font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; color:#fff !important; text-decoration:none !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-section-view-all:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-section-view-all::after{ content:'' !important; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); margin-left:6px; opacity:.7; }
/* Games — one scroll-snap rail, 6 tiles visible, arrows in the head */
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-games-grid{ display:flex !important; gap:12px !important; overflow-x:auto !important; scroll-snap-type:x mandatory; padding:2px 0 6px !important; scrollbar-width:none; -ms-overflow-style:none; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-games-grid::-webkit-scrollbar{ display:none; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-game-tile{ flex:0 0 calc((100% - 60px) / 6) !important; scroll-snap-align:start; border-radius:10px !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-game-tile img{ border-radius:10px !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-scroll-nav{ display:inline-flex; gap:6px; margin-left:auto; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-scroll-btn{ width:30px; height:30px; border-radius:8px; border:0; background:rgba(255,255,255,.06); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-scroll-btn:hover{ background:rgba(255,255,255,.1); }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-scroll-btn:disabled{ opacity:.3; cursor:default; background:rgba(255,255,255,.06); }
/* Packs row + tiles */
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-pack-row{ gap:12px !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-pack-tile{ border-radius:10px !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-pack-tile-title{ font-family:'Manrope',sans-serif !important; font-size:13.5px !important; font-weight:700 !important; letter-spacing:0 !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-pack-tile-price{ font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:800 !important; color:rgba(255,255,255,.8) !important; }
/* Battle highlights empty state */
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-battles-empty{ background:var(--pd-bg-1) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:10px !important; padding:28px 20px !important; font-family:'Manrope',sans-serif !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-battles-empty-title{ font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:800 !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-battles-empty-sub{ font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:500 !important; color:rgba(255,255,255,.5) !important; margin-top:4px !important; }
/* FAQ */
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-faq-grid{ gap:10px !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-faq-item{ background:var(--pd-bg-1) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:10px !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-faq-item[open]{ border-color:rgba(255,255,255,.12) !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-faq-item summary{ padding:14px 16px !important; font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:700 !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-faq-item p{ padding:0 16px 14px !important; margin:0 !important; font-family:'Manrope',sans-serif !important; font-size:13.5px !important; line-height:1.55 !important; color:rgba(255,255,255,.6) !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-faq-item p a{ color:#3B82F6 !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-faq-chev{ color:rgba(255,255,255,.4) !important; }
/* Footer */
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-footer{ margin-top:44px !important; padding:28px 0 8px !important; border-top:1px solid rgba(255,255,255,.06) !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-footer-title{ font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:800 !important; letter-spacing:0 !important; text-transform:lowercase !important; color:rgba(255,255,255,.5) !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-footer-title::first-letter{ text-transform:uppercase; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-footer-link{ font-family:'Manrope',sans-serif !important; font-size:13.5px !important; font-weight:600 !important; color:rgba(255,255,255,.65) !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-footer-link:hover{ color:#fff !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-footer-tagline{ font-family:'Manrope',sans-serif !important; font-size:13.5px !important; font-weight:500 !important; color:rgba(255,255,255,.55) !important; }
html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-footer-legal{ font-family:'Manrope',sans-serif !important; font-size:12.5px !important; color:rgba(255,255,255,.45) !important; }
@media (max-width:900px){
  html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-game-tile{ flex-basis:calc((100% - 36px) / 4) !important; }
  html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-section{ margin-top:32px !important; }
}
@media (max-width:600px){
  html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-games-grid{ gap:10px !important; }
  html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-game-tile{ flex-basis:calc((100% - 20px) / 3.2) !important; }
  html[data-theme="phase2"] section[data-route="home"]:not(#_) .pd-home .pd-scroll-nav{ display:none; }
}

/* ======================================================================
   BATTLE ROWS — home "Battle highlights" + Battles lobby share one skin:
   flat navy card, mode as a dotted chip, plain avatars, "Cost" readout,
   a row of pack thumbs with a rounds chip, muted status + blue action.
   ====================================================================== */
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-battle-row{ display:grid !important; grid-template-columns:minmax(180px,204px) minmax(0,1fr) auto !important; align-items:center !important; gap:16px !important; padding:14px 16px !important; background:var(--pd-bg-1) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:10px !important; box-shadow:none !important; transform:none !important; font-family:'Manrope',sans-serif !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-battle-row:hover{ background:var(--pd-bg-1) !important; border-color:rgba(255,255,255,.12) !important; box-shadow:none !important; transform:none !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-left{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; text-align:left !important; gap:10px !important; grid-column:auto !important; grid-row:auto !important; width:auto !important; min-width:0; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .pdh-mode{ display:inline-block !important; height:22px !important; line-height:22px !important; padding:0 8px 0 20px !important; border-radius:6px !important; background-color:rgba(255,255,255,.06) !important; background-image:radial-gradient(circle, rgba(255,255,255,.45) 2.6px, transparent 3.2px) !important; background-size:8px 8px !important; background-position:8px 50% !important; background-repeat:no-repeat !important; font-family:'Manrope',sans-serif !important; font-size:11.5px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:lowercase !important; color:rgba(255,255,255,.75) !important; margin:0 !important; white-space:nowrap; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .pdh-mode::first-letter{ text-transform:uppercase; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-players{ display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:4px !important; flex-wrap:wrap; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-team{ display:flex !important; align-items:center !important; gap:4px !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-avatar{ width:32px !important; height:32px !important; border-radius:50% !important; background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.1) !important; font-family:'Manrope',sans-serif !important; font-size:12px !important; font-weight:800 !important; color:#fff !important; box-shadow:none !important; display:grid !important; place-items:center; overflow:hidden; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-empty{ background:transparent !important; border:1px dashed rgba(255,255,255,.2) !important; color:transparent !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-empty::before{ display:none !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-vs{ width:16px !important; height:16px !important; color:rgba(255,255,255,.35) !important; display:inline-flex !important; align-items:center; justify-content:center; margin:0 1px !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-vs svg{ width:12px !important; height:12px !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-pot{ display:inline-flex !important; align-items:center !important; gap:5px !important; font-family:'Manrope',sans-serif !important; font-size:13.5px !important; font-weight:800 !important; color:#fff !important; background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; height:auto !important; letter-spacing:0 !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-pot::before{ content:'Cost' !important; font-family:'Manrope',sans-serif !important; font-size:12px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; color:rgba(255,255,255,.5) !important; margin-right:2px !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-pot .bc-glyph{ width:14px !important; height:14px !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-cases{ display:block !important; min-width:0 !important; overflow:visible !important; grid-column:auto !important; grid-row:auto !important; width:auto !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-cases-well{ position:relative !important; display:flex !important; align-items:center !important; gap:10px !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; width:auto !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-cases-track{ display:flex !important; align-items:center !important; gap:6px !important; overflow:hidden !important; padding:0 !important; flex:1 1 auto !important; min-width:0 !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-cases-track > .cs-br-case{ flex:1 1 0 !important; width:auto !important; height:auto !important; min-width:34px !important; max-width:56px !important; aspect-ratio:56/74 !important; border-radius:8px !important; background:var(--pd-bg-0) !important; border:1px solid rgba(255,255,255,.06) !important; box-shadow:none !important; transform:none !important; display:grid !important; place-items:center; overflow:hidden; margin:0 !important; padding:0 !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-battle-row:hover .cs-br-cases-track > .cs-br-case{ transform:none !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-cases-track > .cs-br-case img{ width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-cases-track > .cs-br-case-more{ background:rgba(255,255,255,.06) !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:800 !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-cases-total{ position:static !important; display:inline-flex !important; align-items:center !important; height:22px !important; padding:0 8px !important; border-radius:6px !important; background:rgba(255,255,255,.06) !important; border:0 !important; font-family:'Manrope',sans-serif !important; font-size:11.5px !important; font-weight:700 !important; color:rgba(255,255,255,.8) !important; white-space:nowrap; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-cases-total::before{ display:none !important; content:none !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-cases-total::after{ content:' rounds'; white-space:pre; font-weight:600; color:rgba(255,255,255,.5); }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-cases-live .cs-br-cases-track > .cs-br-case{ border-color:rgba(34,197,94,.4) !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-actions{ display:flex !important; flex-direction:column !important; align-items:flex-end !important; justify-content:center !important; gap:8px !important; grid-column:auto !important; grid-row:auto !important; width:auto !important; min-width:0; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-status{ font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:600 !important; color:rgba(255,255,255,.5) !important; letter-spacing:0 !important; text-transform:none !important; white-space:nowrap; display:inline-flex !important; align-items:center; gap:4px; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-status-done{ color:#fff !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-status .bc-glyph{ width:13px !important; height:13px !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-join{ display:inline-block !important; height:36px !important; min-height:0 !important; line-height:36px !important; padding:0 14px !important; border-radius:8px !important; background:#3B82F6 !important; background-image:none !important; border:0 !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:lowercase !important; box-shadow:none !important; filter:none !important; white-space:nowrap; cursor:pointer; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-join::first-letter{ text-transform:uppercase; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-join:hover{ background:#2f6fd6 !important; filter:none !important; transform:none !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-join.cs-br-view{ background:rgba(255,255,255,.06) !important; color:#fff !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-join.cs-br-view:hover{ background:rgba(255,255,255,.1) !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-join .bc-glyph{ width:14px !important; height:14px !important; vertical-align:middle; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-join-amt{ display:inline-flex !important; align-items:center; gap:4px; vertical-align:middle; }
@media (max-width:760px){
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-battle-row{ grid-template-columns:1fr !important; gap:12px !important; padding:12px 14px !important; }
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-actions{ flex-direction:row !important; align-items:center !important; justify-content:space-between !important; }
  html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-cases-track > .cs-br-case{ width:48px !important; height:64px !important; }
}

/* ======================================================================
   BATTLES LOBBY chrome — tabs strip, toolbar, empty state in the same skin.
   ====================================================================== */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-tabs-strip{ display:flex !important; align-items:center !important; gap:10px !important; margin-bottom:16px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-tabs{ display:inline-flex !important; gap:2px !important; padding:3px !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:8px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-tab{ height:32px !important; padding:0 12px !important; border-radius:6px !important; font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:700 !important; color:rgba(255,255,255,.55) !important; letter-spacing:0 !important; text-transform:none !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-tab:hover{ color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-tab.active{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-tab-count{ background:rgba(255,255,255,.08) !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:11.5px !important; font-weight:800 !important; padding:1px 6px !important; border-radius:6px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-fair-inline{ height:32px !important; padding:0 12px !important; border-radius:8px !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.06) !important; font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; color:rgba(255,255,255,.7) !important; letter-spacing:0 !important; text-transform:none !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-fair-inline:hover{ color:#fff !important; background:rgba(255,255,255,.08) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-create-battle{ display:inline-block !important; height:36px !important; line-height:36px !important; padding:0 14px !important; border-radius:8px !important; background:#3B82F6 !important; background-image:none !important; border:0 !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; box-shadow:none !important; filter:none !important; transform:none !important; margin-left:auto !important; white-space:nowrap; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-create-battle:hover{ background:#2f6fd6 !important; filter:none !important; transform:none !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-create-battle .btn-shine{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-create-battle .cs-create-icon{ display:inline-block !important; vertical-align:middle !important; margin:0 4px 2px 0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-create-battle .cs-create-icon svg{ width:14px !important; height:14px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-battles-toolbar{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin-bottom:12px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-bsort-btn{ height:34px !important; padding:0 12px !important; border-radius:8px !important; background:rgba(255,255,255,.06) !important; border:0 !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; gap:8px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-bsort-btn:hover{ background:rgba(255,255,255,.1) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-bsort-menu{ background:var(--pd-bg-1) !important; border:1px solid rgba(255,255,255,.1) !important; border-radius:10px !important; box-shadow:0 18px 40px -14px rgba(0,0,0,.7) !important; padding:4px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-bsort-item{ font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:600 !important; border-radius:6px !important; color:rgba(255,255,255,.7) !important; background:transparent !important; letter-spacing:0 !important; text-transform:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-bsort-item:hover, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-bsort-item.active{ background:rgba(255,255,255,.06) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-battles-meta{ font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:600 !important; color:rgba(255,255,255,.5) !important; letter-spacing:0 !important; text-transform:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-battles-list{ gap:10px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-battles-empty{ background:var(--pd-bg-1) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:10px !important; padding:40px 20px !important; font-family:'Manrope',sans-serif !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-be-icon{ width:44px !important; height:44px !important; border-radius:10px !important; background:rgba(255,255,255,.06) !important; color:rgba(255,255,255,.6) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-be-title{ font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:800 !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-be-sub{ font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:500 !important; color:rgba(255,255,255,.5) !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .pdh-mode[data-tier="jackpot"]{ background-image:radial-gradient(circle, #22c55e 2.6px, transparent 3.2px) !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .pdh-mode[data-tier="crazy"]{ background-image:radial-gradient(circle, #a78bfa 2.6px, transparent 3.2px) !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .pdh-mode[data-tier="terminal"]{ background-image:radial-gradient(circle, #F43F5E 2.6px, transparent 3.2px) !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .pdh-mode[data-tier="shared"], html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .pdh-mode[data-tier="team"]{ background-image:radial-gradient(circle, #3B82F6 2.6px, transparent 3.2px) !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-action-stack{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-cancel-link{ background:transparent !important; border:0 !important; padding:0 !important; font-family:'Manrope',sans-serif !important; font-size:12px !important; font-weight:600 !important; color:rgba(255,255,255,.5) !important; cursor:pointer; letter-spacing:0 !important; text-transform:none !important; }
html[data-theme="phase2"] :is(section[data-route="cases"],#pd-battles-list):not(#_) .cs-br-cancel-link:hover{ color:#F43F5E !important; }

/* ======================================================================
   PACK BATTLES — watch view on the clean card system (2026-09).
   Reel math (180px tiles / 480px frame desktop, 140 / 360 on phones) is
   untouched — reelMetrics() in app.js owns it. This block only re-skins:
   one flat column card per player (reel → roster → loot), tile-based reel
   items with a blue centre marker and a green landing tile, quiet head
   chips, a flat finale card and loot tiles. No blooms, glows or carets.
   ====================================================================== */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-view{ font-family:'Manrope',sans-serif !important; }
/* ---- Head bar ---- */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-create-head.cs-watch-head-bar{ gap:12px !important; align-items:center !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-bar-left{ display:flex !important; align-items:center !important; flex-wrap:wrap; gap:8px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-create-head .cs-back-pill{ height:34px !important; padding:0 12px 0 10px !important; border-radius:8px !important; background:rgba(255,255,255,.06) !important; border:0 !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-create-head .cs-back-pill:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-head-bar .cs-watch-status{ font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; color:rgba(255,255,255,.55) !important; letter-spacing:0 !important; text-transform:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-mode-badge{ display:inline-flex !important; align-items:center !important; height:24px !important; padding:0 8px !important; border-radius:6px !important; background:rgba(255,255,255,.06) !important; border:0 !important; font-family:'Manrope',sans-serif !important; font-size:11.5px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; color:rgba(255,255,255,.8) !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-br-tags{ display:flex !important; flex-wrap:wrap; gap:6px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-br-tags .cs-br-tag{ display:inline-block !important; height:22px !important; line-height:22px !important; padding:0 8px !important; border-radius:6px !important; border:0 !important; background:rgba(255,255,255,.06) !important; font-family:'Manrope',sans-serif !important; font-size:11px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:lowercase !important; color:rgba(255,255,255,.75) !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-br-tags .cs-br-tag::first-letter{ text-transform:uppercase; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-bar-right{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; flex-wrap:wrap; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-fair{ height:32px !important; padding:0 12px !important; margin:0 !important; border-radius:8px !important; background:rgba(255,255,255,.06) !important; border:0 !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; gap:6px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-fair:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-cancel-top{ color:#F43F5E !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-bar-right .cs-cb-pot{ height:32px !important; padding:0 12px !important; border-radius:8px !important; background:rgba(255,255,255,.06) !important; border:0 !important; font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:800 !important; color:#fff !important; display:inline-flex !important; align-items:center !important; gap:6px !important; box-shadow:none !important; }
/* Pack strip + round line */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-header{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:8px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-cases{ padding:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-cases .cs-wh-track{ display:flex !important; align-items:center !important; gap:6px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-cases .cs-wh-pack{ width:46px !important; height:62px !important; border-radius:8px !important; overflow:hidden !important; background:var(--pd-bg-0) !important; border:1px solid rgba(255,255,255,.06) !important; box-shadow:none !important; opacity:.5; transition:opacity .2s ease, border-color .2s ease; transform:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-cases .cs-wh-pack img{ width:100% !important; height:100% !important; object-fit:cover !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-cases .cs-wh-pack.is-current{ opacity:1; border-color:#3B82F6 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-cases .cs-wh-pack.is-current::after, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-cases .cs-wh-pack.is-current::before{ content:none !important; display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-cases .cs-wh-pack.is-done{ opacity:.3; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wh-more{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:6px; background:rgba(255,255,255,.06); font-family:'Manrope',sans-serif !important; font-size:11px !important; font-weight:700 !important; color:rgba(255,255,255,.75) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-round-line{ font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:600 !important; color:rgba(255,255,255,.55) !important; letter-spacing:0 !important; text-transform:none !important; margin:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-round-line .cs-wr-round-label, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-round-line .cs-wr-round-cost{ color:#fff !important; font-weight:800 !important; display:inline-flex; align-items:center; gap:4px; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-round-line .cs-wr-round-sep{ opacity:.4; }

/* ---- Stage: one column card per player across the three bands ---- */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-stage{ gap:0 !important; margin:16px 0 16px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-reels, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-roster, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-loot{ gap:12px !important; align-items:stretch !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-cell{ background:var(--pd-bg-1) !important; border:1px solid rgba(255,255,255,.06) !important; border-bottom:0 !important; border-radius:12px 12px 0 0 !important; padding:14px 12px 0 !important; overflow:hidden !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-cell + .cs-wp-reel-cell{ border-left:1px solid rgba(255,255,255,.06) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-roster-cell{ background:var(--pd-bg-1) !important; border:1px solid rgba(255,255,255,.06) !important; border-top:0 !important; border-bottom:0 !important; border-radius:0 !important; padding:10px 14px !important; min-height:0 !important; overflow:visible !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-lootcol{ background:var(--pd-bg-1) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:0 0 12px 12px !important; padding:12px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-battle-state="resolved"] .cs-wp-roster-cell{ border-top:1px solid rgba(255,255,255,.06) !important; border-radius:12px 12px 0 0 !important; padding-top:14px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-battle-state="waiting"] .cs-wp-roster-cell{ border-bottom:1px solid rgba(255,255,255,.06) !important; border-radius:0 0 12px 12px !important; padding-bottom:14px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-arrow{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-vs{ width:30px !important; height:30px !important; border-radius:8px !important; background:var(--pd-bg-0) !important; border:1px solid rgba(255,255,255,.1) !important; color:rgba(255,255,255,.7) !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-vs svg{ width:14px !important; height:14px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-countdown{ font-family:'Manrope',sans-serif !important; font-size:96px !important; font-weight:800 !important; color:#fff !important; text-shadow:none !important; }

/* ---- Reel: frame, marker, landing window ---- */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-frame{ margin:0 auto !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-frame::before, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-frame::after{ content:'' !important; position:absolute; top:50%; width:3px !important; height:24px !important; border:0 !important; border-radius:2px; background:#3B82F6 !important; transform:translateY(-50%) !important; z-index:4; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-frame::before{ left:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-frame::after{ right:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-payline{ left:6px !important; right:6px !important; border-radius:10px; background:rgba(255,255,255,.035) !important; border-top:1px solid rgba(255,255,255,.08) !important; border-bottom:1px solid rgba(255,255,255,.08) !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-land-flash-el{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-frame.cs-wp-land-flash .cs-wp-land-flash-el{ animation:none !important; }
/* Reel items: flat tiles (drawn by ::before so the 180px stride is untouched), no blooms */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-item{ overflow:visible !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-item::after{ content:none !important; display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-item::before{ content:'' !important; display:block !important; position:absolute !important; inset:10px !important; border-radius:10px !important; background:var(--pd-bg-0) !important; border:1px solid rgba(255,255,255,.06) !important; box-shadow:none !important; z-index:0 !important; animation:none !important; transition:border-color .2s ease, background .2s ease !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-item img{ position:relative; z-index:1; width:104px !important; height:104px !important; object-fit:contain !important; filter:none !important; box-shadow:none !important; margin-bottom:14px; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-item-mult{ display:inline-flex !important; position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:2; height:20px; padding:0 7px; border-radius:6px; background:rgba(255,255,255,.08); font-family:'Manrope',sans-serif !important; font-size:11px !important; font-weight:800 !important; color:rgba(255,255,255,.85) !important; letter-spacing:0 !important; white-space:nowrap; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-item.rarity-uncommon .cs-wp-reel-item-mult{ background:rgba(52,211,153,.16); color:#6ee7b7 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-item.rarity-rare .cs-wp-reel-item-mult{ background:rgba(59,130,246,.18); color:#93c5fd !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-item.rarity-epic .cs-wp-reel-item-mult{ background:rgba(168,85,247,.2); color:#d8b4fe !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-item.rarity-legendary .cs-wp-reel-item-mult{ background:rgba(251,191,36,.2); color:#fde68a !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-item.rarity-mythic .cs-wp-reel-item-mult{ background:rgba(244,63,94,.2); color:#fda4af !important; }
/* Settle: neighbours dim, the landed tile turns green */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item{ opacity:.35 !important; transform:scale(.92) !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item.cs-wp-reel-item-win{ opacity:1 !important; transform:scale(1) !important; animation:none !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item.cs-wp-reel-item-win::before{ border-color:#22c55e !important; background:rgba(34,197,94,.08) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel:not(.cs-wp-spinning) .cs-wp-reel-item.cs-wp-reel-item-win .cs-wp-reel-item-mult{ background:#22c55e !important; color:#052e16 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-win-label{ top:calc(100% - 4px) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-win-label b, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-win-label i{ font-family:'Manrope',sans-serif !important; text-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-win-label b{ font-size:12.5px !important; font-weight:700 !important; color:rgba(255,255,255,.85) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-win-label i{ font-size:13px !important; font-weight:800 !important; color:#22c55e !important; }

/* ---- Roster row: avatar · name · total ---- */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-col{ background:transparent; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-roster-cell .cs-wp-head{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:10px !important; padding:0 !important; margin:0 !important; background:transparent !important; border:0 !important; text-align:left !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-roster-cell .cs-wp-avatar{ width:34px !important; height:34px !important; flex:none !important; border-radius:50% !important; border:1px solid rgba(255,255,255,.1) !important; background:rgba(255,255,255,.06) !important; box-shadow:none !important; font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:800 !important; color:#fff !important; display:grid !important; place-items:center !important; overflow:hidden !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-roster-cell .cs-wp-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-roster-cell .cs-wp-col.cs-wp-empty .cs-wp-avatar, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-roster-cell.cs-wp-empty .cs-wp-avatar{ border:1px dashed rgba(255,255,255,.22) !important; background:transparent !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-roster-cell .cs-wp-name{ font-family:'Manrope',sans-serif !important; font-size:13.5px !important; font-weight:800 !important; color:#fff !important; text-align:left !important; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; display:flex; align-items:center; gap:6px; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-roster-cell.cs-wp-empty .cs-wp-name{ color:rgba(255,255,255,.45) !important; font-weight:600 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-payout{ font-family:'Manrope',sans-serif !important; font-size:11.5px !important; font-weight:600 !important; color:rgba(255,255,255,.5) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-roster-cell .cs-wp-total{ margin-left:auto !important; flex:none; font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:800 !important; color:#fff !important; display:inline-flex !important; align-items:center !important; gap:4px !important; background:transparent !important; border:0 !important; padding:0 !important; box-shadow:none !important; font-variant-numeric:tabular-nums; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-roster-cell .cs-wp-total.cs-wp-total-won{ color:#22c55e !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-roster-cell.cs-wp-winner .cs-wp-name::after{ content:'Winner'; display:inline-flex; align-items:center; height:18px; padding:0 6px; border-radius:5px; background:rgba(34,197,94,.18); color:#4ade80; font-size:10.5px; font-weight:800; letter-spacing:0; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-call-bot{ margin:0 0 0 auto !important; height:30px !important; padding:0 12px !important; border-radius:8px !important; background:#3B82F6 !important; background-image:none !important; border:0 !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-call-bot:hover{ background:#2f6fd6 !important; }

/* ---- Loot grid tiles ---- */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid{ gap:8px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-cell{ aspect-ratio:auto !important; min-height:120px; border-radius:8px !important; background:var(--pd-bg-0) !important; border:1px solid rgba(255,255,255,.06) !important; padding:8px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; gap:4px !important; box-shadow:none !important; overflow:hidden; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-cell::before, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-cell::after{ content:none !important; display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-cell.cs-wp-grid-empty{ background:transparent !important; border:1px dashed rgba(255,255,255,.1) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-cell.rarity-rare{ border-color:rgba(59,130,246,.4) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-cell.rarity-epic{ border-color:rgba(168,85,247,.4) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-cell.rarity-legendary{ border-color:rgba(251,191,36,.45) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-cell.rarity-mythic{ border-color:rgba(244,63,94,.45) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-pct{ align-self:flex-start !important; height:18px; padding:0 6px; border-radius:5px; background:rgba(255,255,255,.06); font-family:'Manrope',sans-serif !important; font-size:10.5px !important; font-weight:800 !important; color:rgba(255,255,255,.6) !important; margin:0 !important; letter-spacing:0 !important; display:inline-flex; align-items:center; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-img{ width:54px !important; height:54px !important; object-fit:contain !important; filter:none !important; box-shadow:none !important; margin:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-name{ font-family:'Manrope',sans-serif !important; font-size:11.5px !important; font-weight:600 !important; color:rgba(255,255,255,.6) !important; text-align:center; line-height:1.2 !important; max-width:100%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-value{ font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:800 !important; color:#fff !important; background:transparent !important; border:0 !important; padding:0 !important; display:inline-flex; align-items:center; gap:3px; margin-top:auto; }

/* ---- Finale card ---- */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-result{ background:var(--pd-bg-1) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:12px !important; box-shadow:none !important; padding:26px 20px 20px !important; margin:14px 0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-result .cs-wr-title{ font-family:'Manrope',sans-serif !important; font-size:15px !important; font-weight:800 !important; color:#fff !important; letter-spacing:0 !important; text-transform:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winners{ display:flex !important; justify-content:center !important; gap:28px !important; flex-wrap:wrap; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:6px !important; background:transparent !important; border:0 !important; box-shadow:none !important; animation:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner-avatar{ width:84px !important; height:84px !important; border-radius:50% !important; background:rgba(255,255,255,.06) !important; border:2px solid #22c55e !important; box-shadow:none !important; font-family:'Manrope',sans-serif !important; font-size:30px !important; font-weight:800 !important; color:#fff !important; overflow:visible !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner-avatar img{ width:100% !important; height:100% !important; border-radius:50% !important; object-fit:cover !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner-crown{ color:#fbbf24 !important; filter:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner-name{ font-family:'Manrope',sans-serif !important; font-size:15px !important; font-weight:800 !important; color:#fff !important; letter-spacing:0 !important; text-transform:none !important; text-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner-won-label{ font-family:'Manrope',sans-serif !important; font-size:11.5px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:lowercase !important; color:rgba(255,255,255,.5) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner-won-label::first-letter{ text-transform:uppercase; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner-payout{ font-family:'Manrope',sans-serif !important; font-size:28px !important; font-weight:800 !important; color:#22c55e !important; letter-spacing:-.01em !important; text-shadow:none !important; background:transparent !important; display:inline-flex; align-items:center; gap:6px; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner-cost-line{ font-family:'Manrope',sans-serif !important; font-size:12px !important; font-weight:600 !important; color:rgba(255,255,255,.5) !important; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner-borrow{ height:18px; padding:0 6px; border-radius:5px; background:rgba(255,255,255,.06); display:inline-flex; align-items:center; font-size:11px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner-net{ color:#22c55e !important; font-weight:800 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner-net.cs-wr-winner-net-loss{ color:#F43F5E !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner-net.cs-wr-winner-net-refund{ color:rgba(255,255,255,.7) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-action-row{ display:flex !important; justify-content:center !important; align-items:center !important; gap:8px !important; margin-top:16px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-icon-btn{ width:36px !important; height:36px !important; border-radius:8px !important; background:rgba(255,255,255,.06) !important; border:0 !important; color:#fff !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-icon-btn:hover{ background:rgba(255,255,255,.1) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-recreate{ height:36px !important; padding:0 16px !important; border-radius:8px !important; background:#3B82F6 !important; background-image:none !important; border:0 !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; gap:8px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-recreate:hover{ background:#2f6fd6 !important; filter:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-recreate-cost{ display:inline-flex; align-items:center; gap:4px; padding-left:8px; border-left:1px solid rgba(255,255,255,.25); }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-new{ font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:600 !important; color:rgba(255,255,255,.5) !important; margin:10px auto 0 !important; background:transparent !important; border:0 !important; letter-spacing:0 !important; text-transform:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-new:hover{ color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-tiebreaker{ background:var(--pd-bg-1) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:12px !important; font-family:'Manrope',sans-serif !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-error{ font-family:'Manrope',sans-serif !important; color:rgba(255,255,255,.6); }

@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-item img{ width:80px !important; height:80px !important; margin-bottom:10px; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-item::before{ inset:8px !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-item-mult{ bottom:14px; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-reel-cell{ padding:10px 8px 0 !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-roster-cell{ padding:8px 10px !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-lootcol{ padding:8px !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-watch-countdown{ font-size:72px !important; }
}
/* Watch head: one row on desktop (back · chips | pack strip | fairness · share · pot) */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-create-head.cs-watch-head-bar{ display:grid !important; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important; align-items:center !important; }
@media (max-width:900px){ html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-create-head.cs-watch-head-bar{ grid-template-columns:1fr !important; } }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-cell, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wp-grid-cell.cs-wp-grid-empty{ min-height:120px !important; height:auto !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner{ padding-top:22px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-wr-winner-avatar .cs-wr-winner-crown{ position:absolute !important; top:-28px !important; left:50% !important; transform:translateX(-50%) !important; width:34px !important; height:28px !important; margin:0 !important; }

/* ======================================================================
   PACKS — catalog + opener on the clean card system (2026-09).
   Catalog: flat art cards, raised sort chips, quiet risk meter.
   Opener: pack title row, a flat stage with a single blue centre line,
   reel items as tiles (art · name · drop chip), landed tile turns green
   and carries the name/value label; blue Open button; "Pack contains"
   tiles; flat reveal modal. Reel maths measure the DOM, so tile sizes
   are free to change here. No blooms, glows, shine or chevrons.
   ====================================================================== */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-catalog-view, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-open-view{ font-family:'Manrope',sans-serif !important; }
/* ---- Catalog toolbar ---- */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-sort-bar{ display:flex !important; align-items:center !important; gap:10px !important; flex-wrap:wrap !important; margin:0 0 14px !important; padding:0 !important; background:transparent !important; border:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-sort-label{ font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; color:rgba(255,255,255,.5) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-sort-pills{ display:inline-flex !important; gap:2px !important; padding:3px !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:8px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-sort-pill{ height:28px !important; padding:0 10px !important; border-radius:6px !important; background:transparent !important; border:0 !important; font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; color:rgba(255,255,255,.55) !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-sort-pill:hover{ color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-sort-pill.active{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-risk-filter{ display:inline-flex !important; align-items:center !important; gap:8px !important; margin-left:auto !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-risk-slider{ width:110px !important; accent-color:#3B82F6; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-risk-val{ min-width:0 !important; height:28px; padding:0 8px; border-radius:6px; background:rgba(255,255,255,.06); display:inline-flex; align-items:center; font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:0 !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-catalog-empty{ font-family:'Manrope',sans-serif !important; font-size:13px !important; color:rgba(255,255,255,.5) !important; }
/* ---- Catalog cards ---- */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-row{ gap:16px 12px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-card{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:10px !important; padding:0 !important; transform:none !important; filter:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-card:hover, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-card:active, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-card:focus-visible{ transform:none !important; box-shadow:none !important; filter:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-card .cc-card-imgwrap{ border-radius:10px !important; border:1px solid rgba(255,255,255,.06) !important; box-shadow:none !important; overflow:hidden !important; background:var(--pd-bg-0) !important; transform:none; transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .2s ease !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-card:hover .cc-card-imgwrap{ transform:translateY(-3px) !important; border-color:rgba(255,255,255,.16) !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-card:active .cc-card-imgwrap{ transform:translateY(-1px) !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-card .cc-card-img{ filter:none !important; transform:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cc-card-shine, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cc-card-aura{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-card .cc-card-foot{ gap:6px !important; padding:8px 0 0 !important; background:transparent !important; border:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-card .cc-price-row{ font-family:'Manrope',sans-serif !important; font-size:13.5px !important; font-weight:800 !important; color:#fff !important; gap:5px !important; letter-spacing:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-card .cc-price-row .bc-glyph{ width:14px; height:14px; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-card .cc-risk{ width:44px !important; height:3px !important; border-radius:2px !important; background:rgba(255,255,255,.1) !important; }

/* ---- Opener: head + title row ---- */
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-open-head{ display:flex !important; align-items:center !important; height:40px !important; margin:0 0 14px !important; padding:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-back-pill.cs-back-icon-only{ width:36px !important; height:36px !important; padding:0 !important; border-radius:8px !important; background:rgba(255,255,255,.06) !important; border:0 !important; color:#fff !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-back-pill.cs-back-icon-only:hover{ background:rgba(255,255,255,.1) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-hero{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:10px !important; height:40px !important; margin:-54px 0 14px 46px !important; padding:0 !important; pointer-events:none; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-hero-img{ height:36px !important; width:auto !important; max-width:48px !important; max-height:36px !important; border-radius:6px !important; object-fit:cover !important; box-shadow:none !important; filter:none !important; margin:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-hero-name{ font-family:'Manrope',sans-serif !important; font-size:16px !important; font-weight:800 !important; letter-spacing:0 !important; text-transform:none !important; color:#fff !important; margin:0 !important; text-shadow:none !important; }
/* ---- Stage: flat card, one blue centre line ---- */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row{ position:relative; background:var(--pd-bg-1) !important; background-image:none !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:12px !important; box-shadow:none !important; overflow:hidden !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage{ min-height:0 !important; height:256px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row{ height:auto !important; min-height:340px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-pointer, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-multi-chev, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-spotlight{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage::after, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row::after{ content:'' !important; display:block !important; position:absolute !important; left:50% !important; top:12px !important; bottom:12px !important; width:2px !important; height:auto !important; margin-left:-1px !important; background:#3B82F6 !important; border-radius:1px !important; z-index:5 !important; pointer-events:none !important; box-shadow:none !important; opacity:1 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row::after{ left:12px !important; right:12px !important; top:50% !important; bottom:auto !important; width:auto !important; height:2px !important; margin:-1px 0 0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage::before, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row::before{ content:none !important; display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-reel-wrap{ height:100% !important; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) !important; mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .cases-reel-wrap{ -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%) !important; mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel{ gap:12px !important; padding:0 14px !important; height:100% !important; align-items:center !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .cases-reel{ gap:10px !important; }
/* Reel items: tiles */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item{ flex:0 0 150px !important; width:150px !important; min-width:0 !important; height:164px !important; margin:0 !important; padding:10px !important; border-radius:10px !important; background:var(--pd-bg-0) !important; background-image:none !important; border:1px solid rgba(255,255,255,.06) !important; box-shadow:none !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:6px !important; position:relative !important; overflow:visible !important; opacity:1; transition:opacity .25s ease, border-color .25s ease, background-color .25s ease !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item{ flex:0 0 auto !important; width:128px !important; height:140px !important; padding:8px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item::before, html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item::after, html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item .ci-icon-wrap::before, html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item .ci-icon-wrap::after, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item::before, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item::after, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-icon-wrap::before, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-icon-wrap::after{ content:none !important; display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item .ci-icon-wrap, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-icon-wrap{ flex:0 0 auto !important; width:84px !important; height:84px !important; background:transparent !important; border:0 !important; box-shadow:none !important; filter:none !important; border-radius:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-icon-wrap{ flex:0 0 auto !important; width:68px !important; height:68px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item .ci-img, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-img{ max-width:100% !important; max-height:100% !important; width:auto !important; height:auto !important; object-fit:contain !important; filter:none !important; box-shadow:none !important; transform:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item .ci-name, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-name{ flex:0 0 auto !important; display:block !important; height:auto !important; min-height:0 !important; max-height:none !important; line-height:1.3 !important; width:auto !important; padding:0 !important; opacity:1 !important; visibility:visible !important; font-family:'Manrope',sans-serif !important; font-size:11.5px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; color:rgba(255,255,255,.6) !important; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; margin:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item .ci-mult, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-mult{ flex:0 0 auto !important; display:inline-flex !important; visibility:visible !important; opacity:1 !important; position:static !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; transform:none !important; width:auto !important; align-items:center !important; height:20px !important; padding:0 7px !important; border-radius:6px !important; background:rgba(255,255,255,.08) !important; border:0 !important; font-family:'Manrope',sans-serif !important; font-size:11px !important; font-weight:800 !important; letter-spacing:0 !important; color:rgba(255,255,255,.85) !important; margin:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item.rarity-uncommon .ci-mult, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item.rarity-uncommon .ci-mult{ background:rgba(52,211,153,.16) !important; color:#6ee7b7 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item.rarity-rare .ci-mult, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item.rarity-rare .ci-mult{ background:rgba(59,130,246,.18) !important; color:#93c5fd !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item.rarity-epic .ci-mult, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item.rarity-epic .ci-mult{ background:rgba(168,85,247,.2) !important; color:#d8b4fe !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item.rarity-legendary .ci-mult, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item.rarity-legendary .ci-mult{ background:rgba(251,191,36,.2) !important; color:#fde68a !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item.rarity-mythic .ci-mult, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item.rarity-mythic .ci-mult{ background:rgba(244,63,94,.2) !important; color:#fda4af !important; }
/* Landing: neighbours dim, winner tile goes green and carries the label */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-revealed #cs-reel .case-item:not(.cs-winner), html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row.cs-revealed .case-item:not(.cs-winner){ opacity:.35 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-revealed #cs-reel .case-item.cs-winner, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row.cs-revealed .case-item.cs-winner{ opacity:1 !important; border-color:#22c55e !important; background:rgba(34,197,94,.08) !important; box-shadow:none !important; transform:none !important; animation:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-revealed #cs-reel .case-item.cs-winner .ci-name, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-revealed #cs-reel .case-item.cs-winner .ci-mult, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row.cs-revealed .case-item.cs-winner .ci-name, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row.cs-revealed .case-item.cs-winner .ci-mult{ visibility:hidden !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-stage-label{ position:absolute !important; left:50% !important; transform:translateX(-50%) !important; width:max-content !important; max-width:150px !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:2px !important; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; z-index:6 !important; pointer-events:none; animation:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-stage-label .cs-stage-label-name{ font-family:'Manrope',sans-serif !important; font-size:11.5px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; color:#fff !important; text-shadow:none !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-stage-label .cs-stage-label-payout{ font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:800 !important; letter-spacing:0 !important; color:#22c55e !important; text-shadow:none !important; display:inline-flex; align-items:center; gap:4px; }
/* ---- Controls ---- */
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-controls{ display:flex !important; align-items:center !important; gap:8px !important; margin:14px 0 0 !important; flex-wrap:wrap; padding:0 !important; background:transparent !important; border:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-count-pills{ display:inline-flex !important; gap:2px !important; padding:3px !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:8px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-count-pill{ width:38px !important; height:32px !important; border-radius:6px !important; background:transparent !important; border:0 !important; font-family:'Manrope',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:0 !important; color:rgba(255,255,255,.55) !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-count-pill:hover{ color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-count-pill.active{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-cost-chip{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-open-btn.cs-open-cta{ flex:1 1 auto !important; order:0 !important; height:44px !important; padding:0 18px !important; border-radius:8px !important; background:#3B82F6 !important; background-image:none !important; border:0 !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; box-shadow:none !important; filter:none !important; transform:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-open-btn.cs-open-cta:hover{ background:#2f6fd6 !important; filter:none !important; transform:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-open-btn.cs-open-cta:disabled{ background:rgba(255,255,255,.06) !important; color:rgba(255,255,255,.4) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-open-cta .btn-shine{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-open-cta-sep{ opacity:.5; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-fast-toggle{ width:44px !important; height:44px !important; border-radius:8px !important; background:rgba(255,255,255,.06) !important; border:0 !important; color:rgba(255,255,255,.7) !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-fast-toggle:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-fast-toggle[aria-pressed="true"]{ background:rgba(59,130,246,.2) !important; color:#93c5fd !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-demo-btn{ display:inline-block !important; height:44px !important; line-height:44px !important; padding:0 14px !important; border-radius:8px !important; background:rgba(255,255,255,.06) !important; border:0 !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:lowercase !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-demo-btn::first-letter{ text-transform:uppercase; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-demo-btn:hover{ background:rgba(255,255,255,.1) !important; }
/* ---- Pack contains ---- */
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .case-items-title{ font-family:'Manrope',sans-serif !important; font-size:15px !important; font-weight:800 !important; letter-spacing:0 !important; text-transform:none !important; color:#fff !important; margin:22px 0 12px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .case-items-grid{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) !important; gap:10px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item{ background:var(--pd-bg-1) !important; background-image:none !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:10px !important; box-shadow:none !important; padding:10px 10px 12px !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:6px !important; min-height:0 !important; aspect-ratio:auto !important; transform:none !important; position:relative; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item:hover{ transform:none !important; border-color:rgba(255,255,255,.14) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item::before, html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item::after{ content:none !important; display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item.rarity-rare{ border-color:rgba(59,130,246,.35) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item.rarity-epic{ border-color:rgba(168,85,247,.35) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item.rarity-legendary{ border-color:rgba(251,191,36,.4) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item.rarity-mythic{ border-color:rgba(244,63,94,.4) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cig-pct{ position:static !important; transform:none !important; align-self:flex-start !important; height:18px !important; padding:0 6px !important; border-radius:5px !important; background:rgba(255,255,255,.06) !important; font-family:'Manrope',sans-serif !important; font-size:10.5px !important; font-weight:800 !important; letter-spacing:0 !important; color:rgba(255,255,255,.6) !important; margin:0 !important; display:inline-flex !important; align-items:center !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-icon-wrap{ width:72px !important; height:72px !important; background:transparent !important; box-shadow:none !important; border:0 !important; margin:2px 0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-img{ filter:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-name{ font-family:'Manrope',sans-serif !important; font-size:12px !important; font-weight:600 !important; letter-spacing:0 !important; color:rgba(255,255,255,.7) !important; text-align:center !important; line-height:1.25 !important; margin:0 !important; max-width:100%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-payout{ font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:800 !important; letter-spacing:0 !important; color:#fff !important; background:transparent !important; border:0 !important; padding:0 !important; gap:4px !important; display:inline-flex !important; align-items:center !important; margin-top:auto !important; }
/* ---- Reveal modal ---- */
html[data-theme="phase2"] .modal-backdrop#pack-reveal-modal .modal-pack-reveal{ background:var(--pd-bg-1) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:14px !important; box-shadow:0 30px 80px -30px rgba(0,0,0,.8) !important; font-family:'Manrope',sans-serif !important; }
html[data-theme="phase2"] #pack-reveal-modal .modal-title{ font-family:'Manrope',sans-serif !important; font-size:18px !important; font-weight:800 !important; letter-spacing:0 !important; text-transform:lowercase !important; color:#fff !important; padding:0 !important; }
html[data-theme="phase2"] #pack-reveal-modal .modal-title::first-letter{ text-transform:uppercase; }
html[data-theme="phase2"] #pack-reveal-modal .modal-sub{ font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:600 !important; color:rgba(255,255,255,.5) !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-card{ background:var(--pd-bg-0) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:10px !important; box-shadow:none !important; padding:12px !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:4px !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-card::before, html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-card::after{ content:none !important; display:none !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-card.rarity-rare{ border-color:rgba(59,130,246,.4) !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-card.rarity-epic{ border-color:rgba(168,85,247,.4) !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-card.rarity-legendary{ border-color:rgba(251,191,36,.45) !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-card.rarity-mythic{ border-color:rgba(244,63,94,.45) !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-img-wrap{ width:96px !important; height:96px !important; background:transparent !important; box-shadow:none !important; border:0 !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-img{ filter:none !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-name{ font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:700 !important; color:#fff !important; letter-spacing:0 !important; text-align:center; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-rarity{ height:18px; padding:0 6px; border-radius:5px; background:rgba(255,255,255,.06); font-family:'Manrope',sans-serif !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.06em !important; color:rgba(255,255,255,.6) !important; display:inline-flex; align-items:center; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-multi{ font-family:'Manrope',sans-serif !important; font-size:16px !important; font-weight:800 !important; color:#22c55e !important; letter-spacing:0 !important; text-shadow:none !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-eff-multi{ font-family:'Manrope',sans-serif !important; font-size:11.5px !important; font-weight:700 !important; color:rgba(255,255,255,.5) !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-summary{ background:var(--pd-bg-0) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:10px !important; padding:12px 14px !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-summary-row + .pack-reveal-summary-row{ border-top:1px solid rgba(255,255,255,.06) !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-summary-label{ font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:600 !important; color:rgba(255,255,255,.5) !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-summary-value{ font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:800 !important; color:#fff !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-net{ color:#22c55e !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-net[data-sign="negative"]{ color:#F43F5E !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-net[data-sign="neutral"]{ color:rgba(255,255,255,.7) !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-continue{ height:44px !important; padding:0 18px !important; border-radius:8px !important; background:#3B82F6 !important; background-image:none !important; border:0 !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; box-shadow:none !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-continue:hover{ background:#2f6fd6 !important; filter:none !important; }
html[data-theme="phase2"] #pack-reveal-modal .pack-reveal-continue .btn-shine{ display:none !important; }

@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage{ height:220px !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item{ flex-basis:124px !important; width:124px !important; height:144px !important; padding:8px !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item .ci-icon-wrap, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-icon-wrap{ flex:0 0 auto !important; width:68px !important; height:68px !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-hero{ margin-left:44px !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-hero-name{ font-size:14px !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .case-items-grid{ grid-template-columns:repeat(auto-fill, minmax(124px, 1fr)) !important; gap:8px !important; }
}

/* ======================================================================
   PACK OPENER — PackDraw layout (2026-09). Owner reference:
   packdraw.com/en/packs/…  Order: back link → reel strip (bare renders,
   soft rarity glow, white top/bottom markers, blurred pack-art backdrop)
   → controls card (−/x1/+ · Open · Demo · fast) → pack info row (thumb,
   name, price · Items (N)) → odds/name/value cards. Overrides the tile
   opener block above; engine ids/classes untouched.
   ====================================================================== */
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-open-view{ display:flex !important; flex-direction:column !important; gap:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-open-head{ order:0; height:auto !important; margin:0 0 10px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cases-stage{ order:1; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cases-multi-stack{ order:1; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-controls{ order:2; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-hero{ order:3; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-tray{ order:4; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .case-items-section{ order:5; }
/* Back link */
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-back-pill.cs-back-icon-only{ width:auto !important; height:36px !important; padding:0 10px 0 4px !important; border-radius:8px !important; background:transparent !important; color:rgba(255,255,255,.5) !important; font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:600 !important; gap:6px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-back-pill.cs-back-icon-only::after{ content:'Back to packs'; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-back-pill.cs-back-icon-only:hover{ background:transparent !important; color:#fff !important; }
/* Reel strip: no card, blurred pack art behind, white markers */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage{ height:300px !important; background:var(--pd-bg-1) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:12px !important; overflow:hidden !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage::before{ content:'' !important; display:block !important; position:absolute !important; inset:-40px !important; background:var(--pack-art, none) center/cover no-repeat !important; filter:blur(34px) saturate(.9) brightness(.55) !important; opacity:.45 !important; z-index:0 !important; pointer-events:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage::after, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row::after{ display:none !important; content:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-pointer{ display:block !important; position:absolute !important; left:50% !important; transform:translateX(-50%) !important; width:20px !important; height:14px !important; color:#fff !important; z-index:6 !important; filter:none !important; opacity:1 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-pointer svg{ width:20px !important; height:14px !important; display:block !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage .cs-pointer-top{ top:10px !important; bottom:auto !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage .cs-pointer-bot{ bottom:10px !important; top:auto !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-multi-chev{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-reel-wrap{ position:relative !important; z-index:2 !important; height:100% !important; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%) !important; mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel{ gap:0 !important; padding:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item{ flex:0 0 190px !important; width:190px !important; height:100% !important; padding:0 !important; margin:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:0 !important; overflow:visible !important; transition:opacity .25s ease, transform .25s ease !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item{ width:100% !important; flex:0 0 150px !important; height:150px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item .ci-icon-wrap, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-icon-wrap{ flex:0 0 auto !important; width:108px !important; height:108px !important; position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; background:transparent !important; border:0 !important; box-shadow:none !important; overflow:visible !important; transition:transform .3s cubic-bezier(.2,.8,.2,1) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-icon-wrap{ width:96px !important; height:96px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item .ci-icon-wrap::before, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-icon-wrap::before{ content:'' !important; display:block !important; position:absolute !important; inset:12% !important; border-radius:50% !important; background:var(--glow, #9aa4b2) !important; filter:blur(22px) !important; opacity:.32 !important; z-index:0 !important; pointer-events:none !important; transition:opacity .3s ease !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item .ci-img, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-img{ position:relative !important; z-index:1 !important; max-width:100% !important; max-height:100% !important; width:auto !important; height:auto !important; object-fit:contain !important; filter:drop-shadow(0 6px 12px rgba(0,0,0,.45)) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item .ci-name, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-name, html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item .ci-mult, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-mult{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-item.rarity-common{ --glow:#9aa4b2; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-item.rarity-uncommon{ --glow:#34d399; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-item.rarity-rare{ --glow:#3B82F6; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-item.rarity-epic{ --glow:#a855f7; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-item.rarity-legendary{ --glow:#E4AE33; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .case-item.rarity-mythic{ --glow:#F43F5E; }
/* Landing: neighbours fade, the winner lifts and its glow brightens */
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-revealed #cs-reel .case-item:not(.cs-winner), html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row.cs-revealed .case-item:not(.cs-winner){ opacity:.3 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-revealed #cs-reel .case-item.cs-winner, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row.cs-revealed .case-item.cs-winner{ opacity:1 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-revealed #cs-reel .case-item.cs-winner .ci-icon-wrap, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row.cs-revealed .case-item.cs-winner .ci-icon-wrap{ transform:scale(1.1) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-revealed #cs-reel .case-item.cs-winner .ci-icon-wrap::before, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row.cs-revealed .case-item.cs-winner .ci-icon-wrap::before{ opacity:.75 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-stage-label{ max-width:190px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-stage-label .cs-stage-label-name{ font-size:13px !important; max-width:180px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cs-stage-label .cs-stage-label-payout{ font-size:14px !important; color:#fff !important; }
/* Controls card */
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-controls{ display:flex !important; align-items:center !important; gap:10px !important; margin:12px 0 0 !important; padding:12px !important; background:var(--pd-bg-2) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:12px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-count-pills{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-qty{ display:inline-flex; align-items:center; gap:6px; flex:none; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-qty-btn{ width:44px; height:44px; border-radius:6px; border:0; background:rgba(255,255,255,.08); color:#fff; font-family:'Manrope',sans-serif !important; font-size:20px !important; font-weight:600 !important; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-qty-btn:hover{ background:rgba(255,255,255,.14); }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-qty-btn:disabled{ opacity:.35; cursor:default; background:rgba(255,255,255,.08); }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-qty-val{ min-width:36px; text-align:center; font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:800 !important; color:#fff; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-cost-chip{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-open-btn.cs-open-cta{ flex:0 1 auto !important; min-width:200px; margin-left:auto !important; order:0 !important; height:44px !important; padding:0 22px !important; border-radius:6px !important; background:#3B82F6 !important; background-image:none !important; border:0 !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:15px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; box-shadow:none !important; filter:none !important; transform:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-open-btn.cs-open-cta:hover{ background:#2f6fd6 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-demo-btn{ display:inline-block !important; height:44px !important; line-height:44px !important; padding:0 18px !important; border-radius:6px !important; background:rgba(255,255,255,.1) !important; border:0 !important; color:#fff !important; font-family:'Manrope',sans-serif !important; font-size:14px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; box-shadow:none !important; margin-right:auto !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-demo-btn::first-letter{ text-transform:uppercase; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-demo-btn:hover{ background:rgba(255,255,255,.16) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-fast-toggle{ width:44px !important; height:44px !important; border-radius:6px !important; background:transparent !important; border:0 !important; color:rgba(255,255,255,.55) !important; box-shadow:none !important; flex:none; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-fast-toggle:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-fast-toggle[aria-pressed="true"]{ background:rgba(59,130,246,.2) !important; color:#93c5fd !important; }
/* Pack info row */
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-hero{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:12px !important; height:auto !important; margin:22px 0 14px !important; padding:0 !important; pointer-events:auto; flex-wrap:wrap; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-hero-img{ height:60px !important; width:44px !important; max-width:none !important; max-height:none !important; border-radius:6px !important; object-fit:cover !important; box-shadow:none !important; filter:none !important; margin:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-hero-name{ font-family:'Manrope',sans-serif !important; font-size:16px !important; font-weight:800 !important; letter-spacing:0 !important; text-transform:none !important; color:#fff !important; margin:0 !important; text-shadow:none !important; flex:1 1 auto; min-width:0; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-hero-meta{ flex:1 1 100%; margin:-4px 0 0 56px; display:flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:600 !important; color:rgba(255,255,255,.5) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-hero-price{ color:#fff; font-weight:800; display:inline-flex; align-items:center; gap:4px; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-hero-price + .cs-hero-count::before{ content:'·'; margin-right:10px; opacity:.5; }
/* Contents cards */
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .case-items-title{ display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .case-items-section{ margin:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .case-items-grid{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(146px, 1fr)) !important; gap:12px !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item{ background:var(--pd-bg-2) !important; background-image:none !important; border:0 !important; border-radius:8px !important; box-shadow:none !important; padding:14px 12px 12px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; min-height:186px !important; aspect-ratio:auto !important; transform:none !important; position:relative !important; overflow:hidden !important; transition:background-color .2s ease !important; cursor:default; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item:hover{ background:var(--pd-surface) !important; transform:none !important; border:0 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item::before, html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item::after{ content:none !important; display:none !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cig-pct{ position:static !important; transform:none !important; align-self:center !important; height:auto !important; padding:0 !important; border-radius:0 !important; background:transparent !important; font-family:'Manrope',sans-serif !important; font-size:12px !important; font-weight:600 !important; letter-spacing:0 !important; color:rgba(255,255,255,.5) !important; margin:0 !important; display:block !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-icon-wrap{ width:76px !important; height:76px !important; position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; background:transparent !important; box-shadow:none !important; border:0 !important; margin:0 !important; overflow:visible !important; flex:0 0 auto !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-icon-wrap::before{ content:'' !important; display:block !important; position:absolute !important; inset:8% !important; border-radius:50% !important; background:var(--glow, #9aa4b2) !important; filter:blur(22px) !important; opacity:.38 !important; z-index:0 !important; pointer-events:none !important; transition:opacity .2s ease !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item:hover .cig-icon-wrap::before{ opacity:.8 !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-img{ position:relative !important; z-index:1 !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; filter:drop-shadow(0 6px 12px rgba(0,0,0,.45)) !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item.rarity-common{ --glow:#9aa4b2; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item.rarity-uncommon{ --glow:#34d399; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item.rarity-rare{ --glow:#3B82F6; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item.rarity-epic{ --glow:#a855f7; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item.rarity-legendary{ --glow:#E4AE33; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item.rarity-mythic{ --glow:#F43F5E; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-name{ font-family:'Manrope',sans-serif !important; font-size:12px !important; font-weight:600 !important; letter-spacing:0 !important; color:rgba(255,255,255,.55) !important; text-align:center !important; line-height:1.25 !important; margin:0 !important; max-width:100%; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; display:block !important; -webkit-line-clamp:unset !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-payout{ font-family:'Manrope',sans-serif !important; font-size:13.5px !important; font-weight:800 !important; letter-spacing:0 !important; color:#fff !important; background:transparent !important; border:0 !important; padding:0 !important; gap:4px !important; display:inline-flex !important; align-items:center !important; margin:0 !important; }
@media (max-width:640px){
  html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage{ height:240px !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item{ flex-basis:140px !important; width:140px !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_) #cs-reel .case-item .ci-icon-wrap, html[data-theme="phase2"] section[data-route="cases"]:not(#_) .cases-stage-multi-row .case-item .ci-icon-wrap{ width:84px !important; height:84px !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-controls{ flex-wrap:wrap !important; gap:8px !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-open-btn.cs-open-cta{ flex:1 1 100% !important; order:-1 !important; margin-left:0 !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-demo-btn{ margin-right:0 !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-hero-meta{ margin-left:0; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .case-items-grid{ grid-template-columns:repeat(auto-fill, minmax(124px, 1fr)) !important; gap:8px !important; }
  html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-items-grid .cig-item{ min-height:160px !important; padding:10px 8px !important; }
}
/* Opener back link: one line, sentence case (an id-based legacy rule kept it 40px wide + uppercase) */
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-back.cs-back-pill{ width:auto !important; min-width:0 !important; max-width:none !important; height:36px !important; white-space:nowrap !important; text-transform:none !important; letter-spacing:0 !important; font-size:14px !important; line-height:1 !important; display:inline-flex !important; align-items:center !important; gap:6px !important; padding:0 10px 0 4px !important; flex-direction:row !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-back.cs-back-pill::after{ content:'Back to packs' !important; text-transform:none !important; letter-spacing:0 !important; white-space:nowrap !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] #cs-back.cs-back-pill .cs-back-arrow{ display:inline-flex !important; width:auto !important; height:auto !important; }
html[data-theme="phase2"] section[data-route="cases"]:not(#_)[data-cs-view="open"] .cs-demo-btn{ text-transform:lowercase !important; }