/* ============================================================================
 * sugar/styles.css — SUGAR.LAB full visual system
 * ============================================================================ */

:root {
  --bg-0:#050608; --bg-1:#0a0c12; --bg-2:#11141d;
  --ink-0:#f5f7fb; --ink-1:#c8cfdc; --ink-2:#7e879a; --ink-3:#4d566a;
  --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.12);
  --cyan:#4ee3ff; --magenta:#ff5ec8; --purple:#b794ff; --violet:#8b5cf6;
  --gold:#ffd255; --amber:#ff9a3c; --green:#4ade80; --red:#ff5e6b; --pink:#ff5ec8;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { margin:0; padding:0; }
body {
  font-family: var(--mono); color: var(--ink-0); background: var(--bg-0);
  min-height: 100vh; overflow-x: hidden;
}

/* ============== AMBIENT ============== */
.ambient { position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% -10%, rgba(139,92,246,.18), transparent 70%),
    radial-gradient(40% 35% at 90% 80%, rgba(78,227,255,.10), transparent 70%),
    radial-gradient(50% 40% at 10% 110%, rgba(255,94,200,.12), transparent 70%),
    linear-gradient(180deg, #07080c 0%, #050608 50%, #03040a 100%);
}
.ambient::before {
  content:""; position:absolute; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
  background-size: 200px 200px; opacity:.35; mix-blend-mode: overlay;
}
.ambient-orb {
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.35;
  animation: orb-drift 22s ease-in-out infinite;
}
.ambient-orb.o1 { width:480px; height:480px; background: radial-gradient(circle, rgba(139,92,246,.6), transparent 70%); top:-120px; left:-100px; animation-duration:28s; }
.ambient-orb.o2 { width:540px; height:540px; background: radial-gradient(circle, rgba(78,227,255,.5), transparent 70%); top:40%; right:-180px; animation-duration:34s; animation-delay:-5s; }
.ambient-orb.o3 { width:600px; height:600px; background: radial-gradient(circle, rgba(255,94,200,.45), transparent 70%); bottom:-200px; left:30%; animation-duration:40s; animation-delay:-10s; }
@keyframes orb-drift {
  0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(60px,-40px) scale(1.08)} 66%{transform:translate(-40px,60px) scale(.95)}
}
.ambient-stars {
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 15%, rgba(255,255,255,.4) 50%, transparent 51%);
  background-size: 800px 800px; opacity:.5; animation: star-drift 60s linear infinite;
}
@keyframes star-drift { to { background-position: 800px 800px; } }

/* ============== SHELL & NAV ============== */
.sugar-shell { max-width:1480px; margin:0 auto; padding:22px 32px 64px; }
.nav-bar {
  display:flex; align-items:center; gap:32px; padding:14px 22px;
  border:1px solid var(--line); border-radius:6px; margin-bottom:26px;
  background: linear-gradient(180deg, rgba(15,18,26,.86), rgba(10,12,18,.72));
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 12px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-bar .brand {
  font-weight:800; letter-spacing:3px; font-size:14px;
  background: linear-gradient(120deg, var(--cyan), var(--magenta), var(--gold));
  background-size: 200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: brand-shift 6s ease-in-out infinite;
}
@keyframes brand-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.nav-bar .navlinks { display:flex; gap:8px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; }
.nav-bar .navlinks a { color: var(--ink-2); padding:6px 12px; border-radius:3px; text-decoration:none; transition: color .2s, background .2s; }
.nav-bar .navlinks a:hover { color:var(--ink-0); background:rgba(255,255,255,.04); }
.nav-bar .navlinks a.active { color:var(--ink-0); background:rgba(78,227,255,.08); box-shadow:inset 0 0 0 1px rgba(78,227,255,.18); }
.nav-bar .right { margin-left:auto; display:flex; gap:12px; align-items:center; }
.nav-bar .bal {
  padding:8px 14px; border:1px solid var(--line-2); border-radius:3px;
  font-size:12px; letter-spacing:1.5px; color:var(--ink-0);
  background:rgba(255,255,255,.02);
  display:flex; gap:8px; align-items:center;
}
.nav-bar .bal .dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.nav-bar .deposit {
  padding:9px 18px; background: linear-gradient(180deg, var(--cyan), #18b6d4);
  color:#04161b; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; font-size:11px;
  border-radius:3px; cursor:pointer; border:0;
  box-shadow: 0 6px 20px rgba(78,227,255,.32), inset 0 1px 0 rgba(255,255,255,.4);
}
.nav-bar .deposit:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(78,227,255,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.nav-bar .sound-tog {
  width:36px; height:36px; border:1px solid var(--line-2); background:rgba(255,255,255,.02);
  color:var(--ink-2); border-radius:3px; cursor:pointer; display:grid; place-items:center;
}
.nav-bar .sound-tog:hover { color:var(--cyan); border-color:var(--cyan); }
.nav-bar .sound-tog.muted { color:var(--ink-3); }
.nav-bar .sound-tog svg { width:16px; height:16px; }

/* ============== HERO ============== */
.game-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:22px; }
.game-hero h1 { font-size:clamp(40px,5vw,64px); font-weight:800; margin:0; letter-spacing:-2px; line-height:.95; }
.game-hero h1 .grad {
  background: linear-gradient(120deg, var(--cyan), var(--magenta) 50%, var(--gold));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: brand-shift 5s ease-in-out infinite;
}
.game-hero .lede { color:var(--ink-2); max-width:600px; font-size:12px; line-height:1.7; margin:12px 0 0; }
.hero-meta { display:grid; grid-template-columns: repeat(4, auto); gap:28px; font-size:10px; }
.hero-meta .m { display:flex; flex-direction:column; gap:4px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-3); }
.hero-meta .m b { color:var(--ink-0); font-size:14px; letter-spacing:1px; }
.hero-meta .m b.cyan { color:var(--cyan); }
.hero-meta .m b.purple { color:var(--purple); }
.hero-meta .m b.gold { color:var(--gold); }
.hero-meta .m b.pink { color:var(--pink); }

/* ============== LAYOUT ============== */
.cl-layout { display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:18px; }

/* ============== CABINET ============== */
.cab {
  position:relative; border-radius:14px; padding:20px;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,94,200,.22), transparent 60%),
    radial-gradient(120% 60% at 50% 110%, rgba(78,227,255,.18), transparent 60%),
    linear-gradient(180deg, #15161e 0%, #0a0b12 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 30px 60px rgba(0,0,0,.55),
    0 0 60px rgba(139,92,246,.18),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.5);
  overflow:hidden;
}
.cab::before {
  content:""; position:absolute; left:0; right:0; top:0; height:50%;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  pointer-events:none;
}

/* MARQUEE */
.marquee {
  position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center;
  padding:14px 20px; margin-bottom:14px; border-radius:8px;
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.2));
  border:1px solid rgba(255,210,85,.18);
  box-shadow: inset 0 0 30px rgba(255,210,85,.06), 0 8px 24px rgba(0,0,0,.4);
}
.marquee .badge { font-size:10px; letter-spacing:3px; color:var(--gold); padding:4px 10px; border:1px solid rgba(255,210,85,.4); border-radius:2px; }
.marquee .scroll { overflow:hidden; position:relative; font-size:12px; letter-spacing:1.5px; color:var(--ink-1); }
.marquee .scroll .track { display:inline-flex; gap:36px; white-space:nowrap; animation: marquee-scroll 28s linear infinite; }
.marquee .scroll .track .item b { color:var(--cyan); }
.marquee .scroll .track .item b.gold { color:var(--gold); }
@keyframes marquee-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee .jp { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.marquee .jp .lbl { font-size:9px; letter-spacing:2.5px; color:var(--ink-3); }
.marquee .jp .v { font-size:22px; font-weight:800; letter-spacing:1px; color:var(--gold); text-shadow: 0 0 14px rgba(255,210,85,.5); }

/* CHARGE METER */
.charge-rail {
  position:relative; display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:10px;
  background: linear-gradient(180deg, rgba(40,15,50,.6), rgba(15,8,22,.6));
  border:1px solid rgba(255,94,200,.25);
  margin-bottom:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.4);
  overflow:hidden;
}
.charge-rail::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,94,200,.04) 50%, transparent 100%);
  background-size:200% 100%; animation: charge-sheen 5s linear infinite; pointer-events:none;
}
@keyframes charge-sheen { to{background-position:-200% 0} }
.charge-rail .ico {
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.4), transparent 55%),
    linear-gradient(135deg, var(--magenta), var(--violet));
  font-size:18px; font-weight:800;
  box-shadow: 0 0 16px rgba(255,94,200,.5), inset 0 -2px 4px rgba(0,0,0,.4), inset 0 2px 4px rgba(255,255,255,.4);
  color:#fff;
}
.charge-rail .col { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.charge-rail .top {
  display:flex; align-items:baseline; gap:10px;
  font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--magenta);
}
.charge-rail .top .lbl { color:var(--magenta); font-weight:800; }
.charge-rail .top .hint { color:var(--ink-3); font-weight:400; font-size:9px; letter-spacing:1.5px; }
.charge-rail .top .cycle { margin-left:auto; font-size:9px; color:var(--ink-3); letter-spacing:1.5px; }
.charge-rail .top .cycle b { color:var(--ink-1); }
.charge-bar { position:relative; height:10px; border-radius:99px; background:rgba(0,0,0,.4); overflow:hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
.charge-bar .fill {
  position:absolute; inset:0 100% 0 0;
  background: linear-gradient(90deg, var(--magenta), var(--gold) 50%, var(--cyan));
  background-size:200% 100%;
  border-radius:99px; transition: right .55s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 16px rgba(255,94,200,.6); animation: charge-pulse 2.5s ease-in-out infinite;
}
@keyframes charge-pulse { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.charge-bar .ticks { position:absolute; inset:0; pointer-events:none; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 16px); border-radius:99px; }
.charge-bar.hot .fill {
  box-shadow: 0 0 24px rgba(255,210,85,.85); filter: brightness(1.15) saturate(1.2);
  animation: charge-hot .8s ease-in-out infinite;
}
@keyframes charge-hot { 0%,100%{filter:brightness(1.15) saturate(1.2)} 50%{filter:brightness(1.45) saturate(1.4)} }
.charge-rail .next { font-size:10px; letter-spacing:1.5px; color:var(--ink-2); padding:0 4px; display:flex; gap:6px; align-items:center; }
.charge-rail .next .glyph { font-size:14px; color:var(--gold); }

/* GRID FRAME */
[data-anim-mount] { position: relative; }
.grid-frame {
  position:relative; padding:18px; border-radius:10px;
  background:
    radial-gradient(80% 70% at 50% 50%, rgba(78,227,255,.06), transparent 70%),
    linear-gradient(180deg, #06080d, #03050a);
  border:1px solid rgba(255,255,255,.04);
  box-shadow: inset 0 0 80px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.02);
}
.grid-frame.bonus-mode {
  background:
    radial-gradient(80% 70% at 50% 50%, rgba(255,210,85,.12), transparent 70%),
    linear-gradient(180deg, #100808, #0a0405);
  box-shadow: inset 0 0 80px rgba(255,150,40,.15), inset 0 0 0 1px rgba(255,210,85,.06);
}
.grid-frame .glow-rim {
  position:absolute; inset:-1px; border-radius:11px; pointer-events:none;
  background: linear-gradient(120deg, var(--cyan), var(--magenta), var(--gold), var(--violet));
  background-size:200% 100%; opacity:.35; filter: blur(8px); z-index:-1;
  animation: rim-shift 6s linear infinite;
}
@keyframes rim-shift { to{background-position:-200% 0} }
.grid-frame.spinning .glow-rim { opacity:.7; }
.grid-frame.bonus-mode .glow-rim {
  background: linear-gradient(120deg, var(--gold), var(--amber), #ff80a8, var(--gold));
  background-size:200% 100%; opacity:.6;
}

.coin-layer { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:8; }
.coin-fly {
  position:absolute; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ffd255 50%, #b07c10);
  box-shadow: 0 0 12px rgba(255,210,85,.8); pointer-events:none;
}

/* 7x7 grid */
.grid {
  position:relative; display:grid;
  /* Same fix as vault7's .reels — `1fr` is `minmax(auto, 1fr)` which lets
     one column's content steal width from the others. `minmax(0, 1fr)`
     guarantees every column/row is exactly its 1fr share. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap:6px; aspect-ratio:1/1; max-width:700px; margin:0 auto;
  min-height: 480px; min-width: 480px;
}
.slot {
  position:relative; border-radius:8px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.3));
  border:1px solid rgba(255,255,255,.025);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.01), inset 0 -6px 14px rgba(0,0,0,.5);
  overflow:hidden;
}
.sym {
  position:absolute; inset:5%;
  display:grid; place-items:center; border-radius:6px;
  font-weight:800; font-size: clamp(20px,3vw,36px); line-height:1; letter-spacing:-1px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 55%),
    var(--bg, #1a1d28);
  color: var(--col, #fff);
  text-shadow: 0 0 14px var(--glow, rgba(255,255,255,.4)), 0 2px 4px rgba(0,0,0,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 4px rgba(0,0,0,.5),
    0 4px 14px rgba(0,0,0,.5),
    0 0 18px var(--glow, transparent);
  will-change: transform, opacity;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sym.idle { animation: sym-idle 4s ease-in-out infinite; }
@keyframes sym-idle { 0%,100%{transform:scale(1)} 50%{transform:scale(.985)} }
.sym.popping { animation: sym-pop .4s cubic-bezier(.4,.2,.6,1) forwards; z-index:5; }
@keyframes sym-pop {
  0%{transform:scale(1); filter:brightness(1)}
  35%{transform:scale(1.35); filter:brightness(2) saturate(1.5)}
  100%{transform:scale(0); filter:brightness(3); opacity:0}
}
.sym.shaking { animation: sym-shake .35s ease-in-out; z-index:4; }
@keyframes sym-shake {
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-2px,1px) rotate(-2deg) scale(1.05)}
  40%{transform:translate(2px,-1px) rotate(2deg) scale(1.05)}
  60%{transform:translate(-2px,-1px) rotate(-2deg) scale(1.05)}
  80%{transform:translate(2px,1px) rotate(2deg) scale(1.05)}
}

.sym[data-sym="WILD"] { --bg: linear-gradient(135deg,#0e1421,#1b2238); --col:#fff;     --glow: rgba(78,227,255,.85); }
.sym[data-sym="H1"]   { --bg: linear-gradient(135deg,#2a1018,#421a2a); --col:#ff8aac; --glow: rgba(255,94,138,.6); }
.sym[data-sym="H2"]   { --bg: linear-gradient(135deg,#06262e,#0a3845); --col:#6cf2ff; --glow: rgba(78,227,255,.6); }
.sym[data-sym="H3"]   { --bg: linear-gradient(135deg,#1c1230,#2a1c4a); --col:#c8a8ff; --glow: rgba(183,148,255,.55); }
.sym[data-sym="M1"]   { --bg: linear-gradient(135deg,#2c2008,#443110); --col:#ffd870; --glow: rgba(255,200,71,.55); }
.sym[data-sym="M2"]   { --bg: linear-gradient(135deg,#082416,#0d3a23); --col:#82e6a4; --glow: rgba(74,222,128,.5); }
.sym[data-sym="M3"]   { --bg: linear-gradient(135deg,#2c1608,#422010); --col:#ffb070; --glow: rgba(255,154,60,.5); }
.sym[data-sym="L1"]   { --bg: linear-gradient(135deg,#14161e,#1c1f2c); --col:#b0bccf; --glow: rgba(127,138,165,.35); }
.sym[data-sym="L2"]   { --bg: linear-gradient(135deg,#0e1620,#182230); --col:#b6d4ec; --glow: rgba(143,179,208,.35); }
.sym[data-sym="SCAT"] { --bg: radial-gradient(circle,#4a2a08,#1c0f02); --col:#ffd870; --glow: rgba(255,210,85,.95); animation: scat-glow 1.6s ease-in-out infinite; }
@keyframes scat-glow {
  0%,100%{box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 4px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.5), 0 0 24px rgba(255,210,85,.6)}
  50%   {box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 4px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.5), 0 0 44px rgba(255,210,85,1)}
}

/* sticky orb */
.mult-orb {
  position:absolute; width:60%; aspect-ratio:1; left:20%; top:20%;
  border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-family:var(--mono);
  color:#fff; font-size:clamp(14px,1.8vw,20px);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(circle at 70% 75%, var(--orb-c2, var(--violet)), var(--orb-c1, var(--magenta)) 70%);
  box-shadow:
    0 0 20px var(--orb-glow, rgba(255,94,200,.6)),
    inset 0 -4px 8px rgba(0,0,0,.4),
    inset 0 4px 8px rgba(255,255,255,.4);
  z-index:6;
  animation: orb-land .6s cubic-bezier(.34,1.56,.64,1), orb-pulse 2.2s ease-in-out infinite .6s;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.mult-orb.firing { animation: orb-fire .6s ease-out; }
@keyframes orb-land { 0%{transform:scale(.2) rotate(-180deg); opacity:0} 60%{transform:scale(1.15); opacity:1} 100%{transform:scale(1) rotate(0); opacity:1} }
@keyframes orb-pulse { 0%,100%{box-shadow: 0 0 20px var(--orb-glow), inset 0 -4px 8px rgba(0,0,0,.4), inset 0 4px 8px rgba(255,255,255,.4)} 50%{box-shadow: 0 0 40px var(--orb-glow), inset 0 -4px 8px rgba(0,0,0,.4), inset 0 4px 8px rgba(255,255,255,.5); transform:scale(1.04)} }
@keyframes orb-fire { 0%{transform:scale(1)} 50%{transform:scale(1.4); filter:brightness(1.6)} 100%{transform:scale(1)} }

/* shock */
.shock {
  position:absolute; inset:0; border-radius:8px; pointer-events:none;
  background: radial-gradient(circle, rgba(255,255,255,.5), transparent 60%);
  opacity:0; animation: shock-burst .55s ease-out;
}
@keyframes shock-burst { 0%{opacity:.8; transform:scale(.4)} 100%{opacity:0; transform:scale(2.2)} }

/* HUD */
.win-hud {
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; gap:14px; align-items:center; padding:10px 22px;
  border-radius:999px; background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px); border:1px solid rgba(255,255,255,.08);
  font-family:var(--mono); font-size:13px; letter-spacing:1px;
  z-index:10; opacity:0; pointer-events:none;
  transition: opacity .2s, transform .2s;
}
.win-hud.show { opacity:1; transform:translate(-50%, 0); }
.win-hud .chain { display:flex; align-items:center; gap:6px; color:var(--ink-2); }
.win-hud .chain b { color:var(--magenta); font-size:16px; }
.win-hud .sep { width:1px; height:14px; background:rgba(255,255,255,.15); }
.win-hud .amount { color:var(--gold); font-weight:800; font-size:18px; text-shadow:0 0 12px rgba(255,210,85,.6); }
.win-hud .x-mult { color:var(--cyan); font-weight:700; font-size:13px; }

/* combo */
.combo-badge {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.5);
  z-index:11; opacity:0;
  font-family:var(--mono); font-weight:800; font-size:clamp(28px,4vw,44px);
  letter-spacing:2px; pointer-events:none;
  background: linear-gradient(120deg, var(--magenta), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 16px rgba(255,94,200,.6));
}
.combo-badge.show { animation: combo-burst .7s cubic-bezier(.2,1.6,.3,1) forwards; }
@keyframes combo-burst {
  0%{opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(-8deg)}
  35%{opacity:1; transform:translate(-50%,-50%) scale(1.15) rotate(2deg)}
  70%{opacity:1; transform:translate(-50%,-90%) scale(1)}
  100%{opacity:0; transform:translate(-50%,-140%) scale(.9)}
}

/* floating + amount */
.float-num {
  position:absolute; font-family:var(--mono); font-weight:800;
  color:var(--gold); font-size:14px; letter-spacing:.5px;
  pointer-events:none; z-index:9;
  text-shadow: 0 0 8px rgba(255,210,85,.7), 0 2px 4px rgba(0,0,0,.7);
  animation: float-up 1.1s ease-out forwards;
}
.float-num.cyan { color:var(--cyan); text-shadow: 0 0 8px rgba(78,227,255,.7), 0 2px 4px rgba(0,0,0,.7); }
.float-num.pink { color:var(--magenta); text-shadow: 0 0 8px rgba(255,94,200,.7), 0 2px 4px rgba(0,0,0,.7); }
@keyframes float-up {
  0%{opacity:0; transform:translateY(8px) scale(.6)}
  20%{opacity:1; transform:translateY(0) scale(1.1)}
  100%{opacity:0; transform:translateY(-60px) scale(.9)}
}

/* FS badge & buy bonus */
.free-spins-badge {
  position:absolute; top:36px; left:36px;
  padding:12px 20px; border:1px solid var(--gold);
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,210,85,.22), rgba(255,154,60,.06));
  border-radius:8px; z-index:5; text-align:center; display:none;
  box-shadow: 0 0 32px rgba(255,210,85,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
.free-spins-badge.show { display:block; }
.free-spins-badge .ttl { font-size:9px; letter-spacing:2.5px; color:var(--gold); }
.free-spins-badge .count { font-size:32px; font-weight:800; color:#fff; line-height:1; margin:4px 0; text-shadow: 0 0 12px rgba(255,210,85,.6); }
.free-spins-badge .mult { font-size:10px; letter-spacing:1.5px; color:var(--gold); }
.buy-bonus {
  position:absolute; top:36px; right:36px; display:flex; flex-direction:column; gap:2px;
  padding:12px 18px;
  background:
    radial-gradient(circle at 30% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,210,85,.22), rgba(255,154,60,.06));
  border:1px solid rgba(255,210,85,.5); border-radius:8px; cursor:pointer; z-index:5;
  text-align:left;
  box-shadow: 0 8px 24px rgba(255,154,60,.2), inset 0 1px 0 rgba(255,255,255,.2);
}
.buy-bonus:hover { transform:translateY(-2px); box-shadow: 0 16px 32px rgba(255,154,60,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.buy-bonus .ttl { font-size:10px; letter-spacing:2.5px; color:var(--gold); font-weight:800; }
.buy-bonus .price { font-size:20px; font-weight:800; color:#fff; }
.buy-bonus .price small { font-size:11px; color:var(--ink-2); margin-left:4px; }
.buy-bonus .sub { font-size:9px; letter-spacing:1.5px; color:var(--ink-2); text-transform:uppercase; }

/* CONTROL BAR */
.control-bar {
  display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center;
  margin-top:14px; padding:14px 18px; border-radius:10px;
  background: linear-gradient(180deg, rgba(15,18,26,.7), rgba(8,9,14,.7));
  border:1px solid rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.bet-block { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.bet-stepper { display:flex; align-items:center; border:1px solid rgba(255,255,255,.08); border-radius:4px; overflow:hidden; background:rgba(0,0,0,.3); }
.bet-stepper button { width:36px; height:40px; background:transparent; color:var(--cyan); border:0; font-family:var(--mono); font-size:18px; cursor:pointer; }
.bet-stepper button:hover { background: rgba(78,227,255,.1); }
.bet-stepper .val { min-width:96px; text-align:center; padding:0 12px; font-size:15px; font-weight:800; color:var(--cyan); letter-spacing:1px; }
.bet-stepper .val small { display:block; font-size:9px; letter-spacing:2px; color:var(--ink-3); font-weight:400; }
.bet-side { display:flex; flex-direction:column; gap:3px; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-3); }
.bet-side .v { color:var(--ink-0); font-size:13px; letter-spacing:1px; font-weight:700; }
.bet-side .v.cyan { color:var(--cyan); }
.bet-side .v.ev { color:var(--red); font-size:12px; }
.kbd-label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }

.spin-cluster { display:flex; align-items:center; gap:12px; }
.spin-cluster .mini {
  width:44px; height:44px; border:1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.3); color:var(--ink-2); cursor:pointer;
  font-family:var(--mono); font-size:10px; letter-spacing:1px; border-radius:4px;
  display:grid; place-items:center; transition: all .15s;
}
.spin-cluster .mini:hover { color:var(--cyan); border-color:rgba(78,227,255,.4); }
.spin-cluster .mini.active { color:var(--cyan); border-color:var(--cyan); background:rgba(78,227,255,.1); box-shadow:0 0 12px rgba(78,227,255,.3); }
.spin-cluster .mini svg { width:18px; height:18px; }
.spin-btn {
  position:relative; width:104px; height:104px; border-radius:50%;
  border:0; color:#04161b; font-family:var(--mono);
  font-size:14px; font-weight:800; letter-spacing:3px; cursor:pointer;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(78,227,255,.4), transparent 60%),
    linear-gradient(180deg, #6cf2ff, #18b6d4);
  box-shadow:
    0 0 0 4px rgba(78,227,255,.15),
    0 8px 28px rgba(78,227,255,.4),
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -4px 8px rgba(0,80,90,.4);
  transition: transform .15s, box-shadow .25s;
}
.spin-btn::after {
  content:""; position:absolute; inset:-8px; border-radius:50%; pointer-events:none;
  background: conic-gradient(from 0deg, transparent, rgba(78,227,255,.4), transparent);
  opacity:0; animation: spin-halo 2s linear infinite;
}
.spin-btn:hover { transform:scale(1.04); }
.spin-btn:hover::after { opacity:1; }
.spin-btn:active { transform:scale(.96); }
.spin-btn:disabled { filter:grayscale(.8); cursor:not-allowed; }
.spin-btn.spinning { animation: spin-rot 1.2s linear infinite; }
.spin-btn.spinning span { opacity:0; }
.spin-btn.spinning::before {
  content:""; position:absolute; inset:22px;
  border:3px solid transparent;
  border-top-color: rgba(255,255,255,.9); border-right-color: rgba(255,255,255,.4);
  border-radius:50%;
}
@keyframes spin-rot { to { transform: rotate(360deg); } }
@keyframes spin-halo { to { transform: rotate(360deg); } }

.balance-block { text-align:right; display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.balance-block .lbl { font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ink-3); }
.balance-block .balance { font-size:26px; font-weight:800; color:var(--cyan); letter-spacing:1px; text-shadow: 0 0 12px rgba(78,227,255,.4); }
.balance-block .balance .cur { font-size:11px; color:var(--ink-3); margin-right:6px; letter-spacing:2px; }
.balance-block .last-win { font-size:13px; letter-spacing:1px; color:var(--gold); min-height:18px; text-shadow: 0 0 8px rgba(255,210,85,.4); }
.balance-block .last-win.zero { color:var(--ink-3); text-shadow:none; }
.balance-block .ev-note { font-size:9px; letter-spacing:1.5px; color:var(--ink-3); margin-top:2px; }

/* ============== SIDE PANELS ============== */
.aside-stack { display:flex; flex-direction:column; gap:14px; min-width:0; }
.panel {
  position:relative; border:1px solid var(--line); padding:18px; border-radius:6px;
  background: linear-gradient(180deg, rgba(20,24,34,.78), rgba(10,12,18,.78));
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 12px 32px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04);
}
.panel::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); pointer-events:none; }
.panel h3 { font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px; font-weight:600; }
.panel h3 .pip { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--cyan); margin-right:8px; box-shadow: 0 0 8px var(--cyan); }
.ticker { max-height:320px; overflow:hidden; }
.ticker-list { display:flex; flex-direction:column; gap:5px; }
.ticker-row {
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px;
  padding:7px 10px; background:rgba(255,255,255,.015);
  border-left:2px solid rgba(255,255,255,.08); font-size:11px; border-radius: 0 3px 3px 0;
  animation: ticker-in .35s ease;
}
.ticker-row.fresh { border-left-color:var(--cyan); background: rgba(78,227,255,.06); }
.ticker-row.mega { border-left-color:var(--gold); background: rgba(255,210,85,.07); }
.ticker-row.mega .amt { color:var(--gold); }
.ticker-row .who { color:var(--ink-1); letter-spacing:.5px; }
.ticker-row .who small { color:var(--ink-3); margin-left:6px; letter-spacing:1px; font-size:9px; }
.ticker-row .amt { color:var(--cyan); font-weight:700; letter-spacing:1px; }
.ticker-row .amt small { color:var(--ink-3); margin-left:4px; font-weight:400; letter-spacing:1.5px; }
@keyframes ticker-in { from{opacity:0; transform:translateX(-12px)} to{opacity:1; transform:translateX(0)} }
.pt-list { display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:11px; }
.pt-list .pt { display:flex; align-items:center; gap:8px; padding:5px 8px; background:rgba(255,255,255,.015); border-radius:3px; }
.pt-list .gly { width:26px; height:26px; display:grid; place-items:center; border-radius:4px; font-size:14px; font-weight:800; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.pt-list .info { flex:1; min-width:0; }
.pt-list .info .nm { font-size:9px; letter-spacing:1.5px; color:var(--ink-3); }
.pt-list .info .px { color:var(--ink-0); letter-spacing:.5px; font-size:11px; }
.pt-list .info .px b { color:var(--cyan); }
.fair { font-size:11px; }
.fair .l { font-size:9px; letter-spacing:2px; color:var(--ink-3); text-transform:uppercase; margin-bottom:4px; }
.fair .v { word-break:break-all; margin-bottom:10px; }
.fair .v.cyan { color:var(--cyan); }
.fair .v.purple { color:var(--purple); }

/* ============== OVERLAYS ============== */
.bigwin-ov, .fs-intro-ov, .charge-pop {
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  opacity:0; pointer-events:none; transition: opacity .35s;
}
.bigwin-ov { background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.7), rgba(0,0,0,.96)); }
.fs-intro-ov { background: radial-gradient(circle at 50% 50%, rgba(255,210,85,.18), rgba(0,0,0,.94)); }
.charge-pop { background: radial-gradient(circle at 50% 50%, rgba(255,94,200,.18), rgba(0,0,0,.92)); }
.bigwin-ov.show, .fs-intro-ov.show, .charge-pop.show { opacity:1; pointer-events:auto; }
.bigwin-ov canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.bigwin-card { text-align:center; transform: scale(.5) rotate(-4deg); transition: transform .55s cubic-bezier(.2,1.6,.3,1); position:relative; z-index:1; }
.bigwin-ov.show .bigwin-card { transform: scale(1) rotate(0); }
.bigwin-card .tier {
  font-size: clamp(56px,8vw,96px); font-weight:800; letter-spacing:10px;
  background: linear-gradient(90deg, var(--gold), var(--amber), var(--gold));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: tier-shimmer 2s linear infinite;
  filter: drop-shadow(0 0 30px rgba(255,210,85,.6));
}
.bigwin-card .tier.mega { background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--cyan)); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; }
.bigwin-card .tier.epic { background: linear-gradient(90deg, #ff5e6b, var(--gold), var(--magenta), var(--cyan), #ff5e6b); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes tier-shimmer { to{background-position:-200% 0} }
.bigwin-card .amount { font-size:clamp(64px,10vw,120px); font-weight:800; color:var(--gold); margin-top:14px; letter-spacing:2px; text-shadow:0 0 40px rgba(255,210,85,.7); }
.bigwin-card .sub { font-size:12px; letter-spacing:4px; color:var(--ink-2); margin-top:10px; }
.bigwin-card .dismiss { margin-top:36px; font-size:11px; letter-spacing:3px; color:var(--ink-3); }
.fs-intro-ov .card, .charge-pop .card {
  text-align:center; transform: translateY(20px) scale(.92); transition: transform .55s cubic-bezier(.2,1.4,.3,1);
}
.fs-intro-ov.show .card, .charge-pop.show .card { transform: translateY(0) scale(1); }
.fs-intro-ov .ttl { font-size:12px; letter-spacing:5px; color:var(--gold); margin-bottom:12px; }
.fs-intro-ov .num { font-size:clamp(80px,12vw,130px); font-weight:800; line-height:1; color:#fff; text-shadow:0 0 40px rgba(255,210,85,.7); }
.fs-intro-ov .lbl { font-size:16px; letter-spacing:4px; color:var(--gold); margin-top:6px; }
.fs-intro-ov .mult { font-size:13px; letter-spacing:2px; color:var(--ink-2); margin-top:18px; }
.fs-intro-ov .mult b { color:var(--cyan); font-size:16px; font-weight:800; }
.fs-intro-ov .hint { font-size:10px; letter-spacing:2.5px; color:var(--ink-3); margin-top:28px; }
.charge-pop .eyebrow { font-size:11px; letter-spacing:4px; color:var(--magenta); margin-bottom:8px; }
.charge-pop .label {
  font-size:clamp(36px,6vw,64px); font-weight:800; letter-spacing:4px;
  background: linear-gradient(120deg, var(--magenta), var(--gold), var(--cyan));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: tier-shimmer 3s linear infinite;
  filter: drop-shadow(0 0 20px rgba(255,94,200,.5));
}
.charge-pop .prize { font-size:clamp(32px,5vw,56px); font-weight:800; color:var(--gold); margin-top:8px; text-shadow: 0 0 30px rgba(255,210,85,.6); }
.charge-pop .sub { font-size:11px; letter-spacing:3px; color:var(--ink-2); margin-top:10px; }

/* shake */
.shake-1 { animation: sh1 .4s ease-out; }
.shake-2 { animation: sh2 .6s ease-out; }
.shake-3 { animation: sh3 .9s ease-out; }
@keyframes sh1 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-3px,2px)} 50%{transform:translate(3px,-2px)} 75%{transform:translate(-2px,-2px)} }
@keyframes sh2 { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-6px,4px)} 40%{transform:translate(6px,-4px)} 60%{transform:translate(-5px,-4px)} 80%{transform:translate(5px,4px)} }
@keyframes sh3 { 0%,100%{transform:translate(0,0)} 10%{transform:translate(-12px,8px)} 30%{transform:translate(12px,-8px)} 50%{transform:translate(-10px,-8px)} 70%{transform:translate(10px,8px)} 90%{transform:translate(-5px,5px)} }

@media (max-width: 1100px) {
  .cl-layout { grid-template-columns: 1fr; }
}