/* ============================================================================
 * vault7/styles.css — VAULT.7 visual system
 * Shares ambient + chrome with sugar but has its own reel & cabinet styles.
 * ============================================================================ */

:root {
  --bg-0:#050608; --bg-1:#0a0c12;
  --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;
  --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 (shared shape with sugar) */
.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,.12), transparent 70%),
    radial-gradient(50% 40% at 10% 110%, rgba(255,94,200,.10), 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,.55), 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,.4), 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 + hero — same as sugar */
.vault-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); }
.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; }

.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); }

.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(78,227,255,.18), transparent 60%),
    radial-gradient(120% 60% at 50% 110%, rgba(139,92,246,.16), transparent 60%),
    linear-gradient(180deg, #131623 0%, #080a12 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 30px 60px rgba(0,0,0,.55),
    0 0 60px rgba(78,227,255,.14),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.5);
  overflow:hidden;
}

.machine-head {
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; margin-bottom:14px;
  border:1px solid rgba(255,255,255,.05); border-radius:8px;
  background: rgba(0,0,0,.3);
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
}
.machine-head .title {
  font-weight:800; letter-spacing:4px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.machine-head .pill {
  padding:4px 10px; border:1px solid var(--line-2); border-radius:2px; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:8px;
}
.machine-head .pill .dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.machine-head .pill.bonus { color:var(--gold); border-color: rgba(255,210,85,.4); }
.machine-head .pill.bonus .dot { background:var(--gold); box-shadow:0 0 8px var(--gold); }
.machine-head .right { margin-left:auto; display:flex; gap:16px; }
.machine-head .stat { display:flex; gap:8px; color:var(--ink-3); }
.machine-head .stat b { color:var(--ink-0); letter-spacing:1px; }
.machine-head .stat b.cyan { color:var(--cyan); }

/* anim mount + reels */
[data-anim-mount] { position: relative; }
.reels-frame {
  position:relative; padding:18px; border-radius:10px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    radial-gradient(60% 80% at 50% 50%, rgba(139,92,246,.08), transparent 70%),
    #08090e;
  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);
}
.reels-frame.bonus-mode {
  background:
    repeating-linear-gradient(180deg, rgba(255,210,85,.02) 0 2px, transparent 2px 4px),
    radial-gradient(60% 80% at 50% 50%, rgba(255,210,85,.16), transparent 70%),
    #110b06;
}
.reels-frame .glow-rim {
  position:absolute; inset:-1px; border-radius:11px; pointer-events:none;
  background: linear-gradient(120deg, var(--cyan), var(--purple), var(--magenta), var(--cyan));
  background-size: 200% 100%; opacity:.3; filter: blur(8px); z-index:-1;
  animation: rim-shift 6s linear infinite;
}
@keyframes rim-shift { to{background-position:-200% 0} }
.reels-frame.spinning .glow-rim { opacity:.55; }

.reels {
  position:relative; display:grid;
  /* CRITICAL: `repeat(5, 1fr)` is implicitly `minmax(auto, 1fr)`. With
     the responsive `font-size: clamp(36px, 4.2vw, 64px)` on .cell, one
     column's content can demand more than its 1fr share — the grid
     accommodates by stealing width from the other columns until they
     collapse to ~0. Result: only one column shows cells, the rest look
     empty. `minmax(0, 1fr)` forces every column to its exact 1fr share
     regardless of content size. This was the visible "only middle
     column has cells" bug. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:6px; max-width:760px; margin:0 auto;
  /* align-items:start so the grid never stretches a reel past the explicit
     3*cellW height that JS pins on it - keeps overflow:hidden clipping to
     exactly 3 rows during a spin. */
  align-items: start;
  min-height: 360px;
}
.reel {
  position:relative; overflow:hidden; border-radius:4px;
  background: linear-gradient(180deg, #0a0c12, #07090f);
  border:1px solid rgba(255,255,255,.04);
  /* Height is set in JS (_sizeReels / _spinToGrid) to exactly 3*cellW.
     A min-height floor avoids a 0-height flash in the brief window after
     the async wallet-gated mount but before _sizeReels measures width. */
  min-height: 110px;
  min-width: 0;
}
.reel.anticipating { filter: drop-shadow(0 0 14px rgba(255,210,85,.5)); }
.reel.anticipating::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 50%, rgba(255,210,85,.18), transparent 70%); pointer-events:none; animation: anticipate-pulse .5s ease-in-out infinite; }
@keyframes anticipate-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

.reel-strip {
  display:flex; flex-direction:column; will-change: transform;
  /* CRITICAL: the global frontend/styles.css (loaded before this file)
     defines `.reel-strip { animation: spin 2.4s infinite }` for the lobby's
     decorative background slot. That class name collides with ours, and
     since our rule never reset `animation`, the infinite scroll leaked into
     VAULT.7 - the reels spun forever on load with no spin button pressed
     ("slots move on their own / chaotic / only one symbol visible mid-
     scroll"). Reset it so our reels are dead-still until _spinToGrid drives
     them via an explicit transform. */
  animation: none !important;
}
.cell {
  position:relative; flex:0 0 auto; width:100%;
  /* Square cells: height is set in JS to equal the column width
     (_sizeReels for resting cells, _spinToGrid for the scrolling strip). */
  display:grid; place-items:center;
  font-size:clamp(36px, 4.2vw, 64px); font-weight:800; letter-spacing:-1px; line-height:1;
  border-radius:4px;
  background: linear-gradient(180deg, #14182280, #0c0f1880);
  border:1px solid rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.01), inset 0 -8px 20px rgba(0,0,0,.45);
  transition: box-shadow .25s ease, filter .25s ease;
}
.cell .glyph {
  display:grid; place-items:center;
  width:78%; height:78%; border-radius:6px;
  position:relative;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6));
}
.cell .glyph .sym { font-size: 1em; line-height: 1; }
.cell[data-sym="WILD"]  .glyph { background: linear-gradient(165deg, rgba(78,227,255,.4), rgba(139,92,246,.3)); border: 1px solid rgba(78,227,255,.5); color: #fff; text-shadow: 0 0 18px var(--cyan), 0 0 36px var(--cyan); }
.cell[data-sym="DIAM"]  .glyph { background: linear-gradient(165deg, rgba(78,227,255,.22), rgba(139,92,246,.12)); border: 1px solid rgba(78,227,255,.2); color: #b6f8ff; text-shadow: 0 0 14px rgba(78,227,255,.7); }
.cell[data-sym="CRYS"]  .glyph { background: linear-gradient(165deg, rgba(183,148,255,.22), rgba(139,92,246,.12)); border: 1px solid rgba(183,148,255,.25); color: var(--purple); text-shadow: 0 0 14px rgba(183,148,255,.6); }
.cell[data-sym="BOLT"]  .glyph { background: linear-gradient(165deg, rgba(255,210,85,.18), rgba(255,154,60,.08)); border: 1px solid rgba(255,210,85,.18); color: var(--gold); text-shadow: 0 0 12px rgba(255,210,85,.6); }
.cell[data-sym="COIN"]  .glyph { background: linear-gradient(165deg, rgba(255,154,60,.18), rgba(255,154,60,.08)); border: 1px solid rgba(255,154,60,.18); color: var(--amber); text-shadow: 0 0 12px rgba(255,154,60,.6); }
.cell[data-sym="A"]     .glyph { background: linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.04); color: #ff7a8a; }
.cell[data-sym="F"]     .glyph { background: linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.04); color: #6cd1ff; }
.cell[data-sym="D"]     .glyph { background: linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.04); color: #82e6a4; }
.cell[data-sym="E"]     .glyph { background: linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.04); color: #c7b3ff; }
.cell[data-sym="SCAT"]  .glyph { background: radial-gradient(circle at 50% 50%, rgba(255,210,85,.5), rgba(255,154,60,.1) 70%); border: 1px solid rgba(255,210,85,.45); color: var(--gold); text-shadow: 0 0 22px var(--gold), 0 0 44px var(--gold); }

.cell.winning { z-index:2; animation: win-pop .55s cubic-bezier(.2,1.4,.3,1) infinite alternate; }
.cell.winning .glyph { box-shadow: 0 0 22px rgba(78,227,255,.6), inset 0 0 18px rgba(78,227,255,.4); }
.cell.winning.scatter-win .glyph { box-shadow: 0 0 28px var(--gold), inset 0 0 20px rgba(255,210,85,.5); }
@keyframes win-pop { 0%{transform:scale(1)} 100%{transform:scale(1.08)} }
.cell.dim { opacity:.28; filter: grayscale(.6); transition: opacity .3s, filter .3s; }

.payline-svg { position:absolute; inset:18px; pointer-events:none; z-index:3; }
.payline-svg path {
  fill:none; stroke: var(--cyan); stroke-width:3; stroke-linejoin:round; stroke-linecap:round;
  filter: drop-shadow(0 0 6px currentColor);
  opacity:0; stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: line-draw .6s ease forwards, line-fade 1.6s ease 1s forwards;
}
@keyframes line-draw { to { stroke-dashoffset: 0; opacity:.9 } }
@keyframes line-fade { to { opacity: 0 } }

.particle-canvas { position:absolute; inset:0; pointer-events:none; z-index:6; }

.win-counter {
  position:absolute; left:50%; bottom:8px; transform: translateX(-50%);
  font-size: 28px; font-weight:800; letter-spacing:2px;
  color: var(--gold); text-shadow: 0 0 22px rgba(255,210,85,.8), 0 0 44px rgba(255,210,85,.4);
  pointer-events:none; z-index:5;
  opacity:0; transition: opacity .25s;
  display:flex; flex-direction:column; align-items:center;
}
.win-counter.show { opacity:1; }
.win-counter .lbl { font-size:10px; letter-spacing:3px; color:var(--ink-2); margin-bottom:2px; text-shadow:none; }

.paytable-strip {
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  padding:12px 14px; margin-top:14px;
  border:1px solid rgba(255,255,255,.04);
  border-radius:8px; background: rgba(0,0,0,.3);
  font-size:11px; letter-spacing:1px; color:var(--ink-3);
}
.paytable-strip .pt { display:flex; align-items:center; gap:6px; }
.paytable-strip .pt b { color:var(--ink-0); }
.paytable-strip .pt .ico-WILD { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }
.paytable-strip .pt .ico-DIAM { color: #b6f8ff; }
.paytable-strip .pt .ico-CRYS { color: var(--purple); }
.paytable-strip .pt .ico-BOLT { color: var(--gold); }
.paytable-strip .pt .ico-COIN { color: var(--amber); }
.paytable-strip .pt .ico-SCAT { color: var(--gold); text-shadow: 0 0 8px var(--gold); }

/* 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); }
.free-spins-badge .mult b { font-size:14px; }
.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); }
.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 — same shape as sugar */
.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:hover { transform:scale(1.04); }
.spin-btn:active { transform:scale(.96); }
.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); } }
.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; }

/* aside 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); background: rgba(255,255,255,.04); }
.pt-list .gly.ico-WILD { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }
.pt-list .gly.ico-DIAM { color: #b6f8ff; }
.pt-list .gly.ico-CRYS { color: var(--purple); }
.pt-list .gly.ico-BOLT { color: var(--gold); }
.pt-list .gly.ico-COIN { color: var(--amber); }
.pt-list .gly.ico-A    { color: #ff7a8a; }
.pt-list .gly.ico-F    { color: #6cd1ff; }
.pt-list .gly.ico-D    { color: #82e6a4; }
.pt-list .gly.ico-E    { color: #c7b3ff; }
.pt-list .gly.ico-SCAT { color: var(--gold); text-shadow: 0 0 8px var(--gold); }
.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-1); letter-spacing:.5px; font-size:11px; }
.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 (shared) */
.bigwin-ov, .fs-intro-ov {
  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)); }
.bigwin-ov.show, .fs-intro-ov.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 { text-align:center; transform: translateY(20px) scale(.92); transition: transform .55s cubic-bezier(.2,1.4,.3,1); }
.fs-intro-ov.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; }

.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; } }