/* ═══════════════════════════════════════════════
   JUNGLE KING'S TREASURE™ — Fixed Layout v6
   • No more stacked cells (flexible grid)
   • Full viewport fit — no zoom required
   • Smooth spin (CSS only, no JS conflicts)
   • All control bar buttons functional
═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Exo+2:wght@400;600;700;800;900&display=swap');

:root {
  --gold:    #f5c842;
  --gold-l:  #fff0a0;
  --gold-d:  #a07010;
  --green:   #2a7a1a;
  --green-l: #3dbc28;
  --red:     #c82020;
  --purple:  #7c22d4;
  --blue:    #1a6aba;
  --stone:   #3a2808;
  --frame-bg:#1a3010;
  --cell-bg: #0e2010;
  --white:   #ffffff;
  --g-glow:  rgba(245,200,66,.6);
  --font-t:  'Lilita One', cursive;
  --font-b:  'Exo 2', sans-serif;
  --trans:   all .2s ease;

  /* Grid sizing — fluid via viewport */
  --cell-size: min(calc((100vw - 520px) / 6 - 5px), calc((100vh - 200px) / 5 - 5px));
  --cell-size: clamp(60px, calc((100vw - 500px) / 6.4), 115px);
}

/* ── Mobile overrides: cell size adapts to viewport ── */
@media (max-width: 900px) {
  :root {
    --cell-size: clamp(44px, calc((100vw - 20px) / 6.4), 85px);
  }
}
@media (max-width: 600px) {
  :root {
    --cell-size: clamp(38px, calc((100vw - 12px) / 6.3), 60px);
  }
}

/* ── Reset ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:var(--font-b);background:#0c1a0c}
img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font-family:inherit;-webkit-tap-highlight-color:transparent}

/* ── Game Root — fills the viewport ────── */
.game-root{
  position:relative;
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  user-select:none;
}

/* ── Scene Background ─────────────────── */
.scene-bg{
  position:absolute;inset:0;z-index:0;
}
.scene-bg-img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.scene-vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(6,16,6,.55) 0%, transparent 18%, transparent 75%, rgba(0,0,0,.7) 100%),
    radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(0,0,0,.35) 100%);
  transition:background 3s ease-in-out;
}

/* ── Ambient Environment Shift (Bonus Mode) ── */
.game-root.bonus-mode .scene-vignette{
  background:radial-gradient(circle at center, transparent 30%, rgba(60, 0, 80, 0.6) 70%, rgba(20, 0, 30, 0.9) 100%);
}

/* ── Title Bar ────────────────────────── */
.title-bar{
  position:relative;z-index:10;
  text-align:center;
  padding:.2rem 0 0;
  pointer-events:none;
  flex-shrink:0;
}

.game-logo{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  font-family:var(--font-t);
  line-height:1;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.8));
}

.logo-top{
  font-size:clamp(.65rem,1.4vw,1rem);
  color:var(--gold-l);
  letter-spacing:.25em;
  text-shadow: 0 2px 0 var(--gold-d), 0 0 20px var(--g-glow);
}

.logo-bottom{
  font-size:clamp(1.2rem,3.2vw,2.8rem);
  color:var(--gold);
  letter-spacing:.08em;
  text-shadow:
    0 3px 0 var(--gold-d),
    0 6px 0 rgba(0,0,0,.4),
    0 0 40px var(--g-glow);
  position:relative;
}

.tm{
  font-family:var(--font-b);
  font-size:.3em;
  font-weight:700;
  vertical-align:super;
  color:var(--gold-l);
  opacity:.8;
}

/* ── Play Area ────────────────────────── */
.play-area{
  position:relative;z-index:10;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  flex:1;
  min-height:0;
  gap:8px;
  padding:6px 10px 4px;
  overflow:hidden;
}

/* ═══════════════════════════════════════
   LEFT PANEL — Jackpots + Multiplier
═══════════════════════════════════════ */
.left-panel{
  width:clamp(140px, 14vw, 220px);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:linear-gradient(to bottom, rgba(50,30,20,0.95), rgba(20,10,5,0.95));
  border:3px solid #5d4037;
  border-radius:12px;
  padding:10px 8px;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.8), 0 10px 30px rgba(0,0,0,0.6);
  position:relative;
  overflow:hidden;
}

/* Jackpot panel */
.jackpot-panel{
  display:flex;flex-direction:column;gap:.25rem;width:100%;
}

.jp-item{
  position:relative;
  border-radius:8px;
  padding:.25rem .5rem;
  text-align:center;
  border:2px solid transparent;
  box-shadow:0 3px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15);
  transition:var(--trans);
  overflow:hidden;
}
.jp-item::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 50%);
  pointer-events:none;
}

.jp-item.maxwin{
  background:linear-gradient(135deg,#8a0010,#cc1020,#8a0010);
  border-color:#ff4060;
  animation:jp-glow-red 2s ease-in-out infinite;
}
@keyframes jp-glow-red{0%,100%{box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 16px rgba(220,30,50,.4)}50%{box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 30px rgba(255,80,100,.8)}}

.jp-item.mega{
  background:linear-gradient(135deg,#5a0a8a,#9020c8,#5a0a8a);
  border-color:#c060ff;
  animation:jp-glow-purple 2.5s ease-in-out infinite;
}
@keyframes jp-glow-purple{0%,100%{box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 14px rgba(140,30,220,.4)}50%{box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 28px rgba(180,80,255,.8)}}

.jp-item.major{
  background:linear-gradient(135deg,#0a3a7a,#1060ba,#0a3a7a);
  border-color:#60a0ff;
  animation:jp-glow-blue 3s ease-in-out infinite;
}
@keyframes jp-glow-blue{0%,100%{box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 12px rgba(20,80,200,.4)}50%{box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 24px rgba(60,140,255,.8)}}

.jp-item.mini{
  background:linear-gradient(135deg,#0a5a10,#18901a,#0a5a10);
  border-color:#40d050;
  animation:jp-glow-green 3.5s ease-in-out infinite;
}
@keyframes jp-glow-green{0%,100%{box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 10px rgba(20,140,20,.4)}50%{box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 22px rgba(40,200,40,.8)}}

.jp-label{
  display:block;font-size:.5rem;font-weight:900;color:rgba(255,255,255,.75);
  letter-spacing:.1em;text-transform:uppercase;
}
.jp-val{
  display:block;font-family:var(--font-t);font-size:clamp(.65rem,.9vw,.9rem);color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}

/* Multiplier / Jungle Bloom tracker */
.mult-panel{
  background:linear-gradient(145deg, #1f1209, #0a0502);
  border:2px solid #5d4037;
  border-radius:10px;
  padding:8px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  box-shadow:inset 0 0 15px rgba(0,0,0,0.8);
}
.mp-label{
  color:#ffc107;
  font-family:'Lilita One', cursive;
  font-size:clamp(.5rem,.8vw,.75rem);
  letter-spacing:1px;
  text-transform:uppercase;
  text-shadow:0 2px 2px rgba(0,0,0,1);
  text-align:center;
}
.mp-track{
  display:flex;
  gap:4px;
  width:100%;
  justify-content:center;
}
.mp-step{
  background:linear-gradient(to bottom, #302015, #110a05);
  border:2px solid #3e2723;
  color:#8a6a57;
  flex:1;
  min-width:0;
  height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:5px;
  font-weight:800; font-size:clamp(.6rem,.8vw,.85rem);
  transition:all .3s;
  cursor:pointer;
  box-shadow:inset 0 2px 5px rgba(0,0,0,0.8);
}
.mp-step.active{
  background:linear-gradient(to bottom, #ffd54f, #ff8f00);
  border-color:#fff3e0;
  color:#4e2800;
  box-shadow:0 0 15px #ffb300, inset 0 2px 5px rgba(255,255,255,0.5);
  transform:scale(1.08);
  z-index:2;
}

/* ════════════════════════════════════════
   CENTER GRID — Flexible sizing
════════════════════════════════════════ */
.center-panel{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.grid-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.vine-left,.vine-right{
  position:absolute;
  top:0;bottom:0;width:20px;
  pointer-events:none;
  z-index:2;
}
.vine-left{left:-10px}
.vine-right{right:-10px}

.grid-frame{
  background:linear-gradient(to bottom, #110d0a, #050302);
  border:6px solid #5d4037;
  outline:3px solid #2e1a12;
  border-radius:8px;
  padding:4px;
  box-shadow:inset 0 0 30px rgba(0,0,0,1), 0 20px 50px rgba(0,0,0,0.8);
  position:relative;
  display:flex;
  flex-direction:column;
}

/* Corner decorations */
.gf-top-bar,.gf-bot-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:2px 4px;
  background:linear-gradient(90deg,#3e2508,#7a4a10,#a06318,#7a4a10,#3e2508);
  min-height:10px;
}
.gf-corner-gem{
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff0a0,#f5c842,#8b6914);
  box-shadow:0 0 6px var(--gold);
}
.gf-top-vine,.gf-bot-vine{
  flex:1;height:3px;
  background:linear-gradient(90deg,transparent,rgba(245,200,66,.4),transparent);
  border-radius:2px;
  margin:0 6px;
}

/* ── THE GRID ── */
.grid-body{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3px;
}

.slot-grid{
  display:grid;
  grid-template-columns:repeat(6, var(--cell-size));
  grid-template-rows:repeat(5, var(--cell-size));
  gap:3px;
  contain: layout style paint;
}

/* Cells */
.cell{
  width:var(--cell-size);
  height:var(--cell-size);
  background:linear-gradient(145deg, #1c1511, #0a0604);
  border:1px solid #3e2a1d;
  border-radius:5px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  box-shadow:inset 0 2px 8px rgba(255,255,255,0.05);
  flex-shrink:0;
}

.cell::after{
  content:'';position:absolute;top:0;left:0;right:0;height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 100%);
  border-radius:inherit;pointer-events:none;z-index:3;
}

.cell:hover{transform:scale(1.04);border-color:rgba(245,200,66,.5);z-index:4}

/* Symbol sprite */
.cell-sprite{
  position:absolute;
  inset:4px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  background-origin:content-box;
  z-index:1;
}

/* Wild Tarzan */
.cell.is-wild{
  border:2px solid #a040ff;
  box-shadow:0 0 14px rgba(160,64,255,.7);
  animation:wild-glow 2s ease-in-out infinite;
}
@keyframes wild-glow{0%,100%{box-shadow:0 0 12px rgba(160,64,255,.6)}50%{box-shadow:0 0 22px #a040ff}}

/* Sticky wild */
.cell.is-gwild{
  border:2px solid #a040ff;
  box-shadow:0 0 12px rgba(160,64,255,.6);
  animation:gwild-glow 2.2s ease-in-out infinite;
}
@keyframes gwild-glow{0%,100%{box-shadow:0 0 10px rgba(160,64,255,.6)}50%{box-shadow:0 0 20px rgba(160,64,255,.9)}}

/* Scatter FS */
.cell.is-scatter{
  border:2px solid var(--gold);
  box-shadow:0 0 14px rgba(245,200,66,.8);
  animation:sc-glow 1.8s ease-in-out infinite;
}
@keyframes sc-glow{0%,100%{box-shadow:0 0 12px rgba(245,200,66,.7)}50%{box-shadow:0 0 24px var(--gold)}}

/* ── Mobile GPU performance — transform/opacity only ── */
@media (max-width: 640px) {
  /* Kill all backdrop-filter (most expensive mobile op) */
  .win-overlay, .big-win-layer, .modal-back, .fss-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .win-overlay    { background: rgba(0,0,0,.75) !important; }
  .big-win-layer  { background: rgba(0,0,0,.85) !important; }
  .modal-back     { background: rgba(0,0,0,.88) !important; }
  .fss-backdrop   { background: rgba(0,0,0,.80) !important; }

  /* Kill all infinite box-shadow/filter animations */
  .cell.is-wild, .cell.is-gwild, .cell.is-scatter { animation: none; }
  /* Strip static box-shadows on persistent cells — repainting these glows
     on every frame of cascade-drop / explode is the #1 mobile paint cost,
     and the cost grows as sticky wilds accumulate spin-over-spin. */
  .cell.is-wild, .cell.is-gwild { box-shadow: none !important; border-color:#a040ff !important; }
  .cell.is-scatter { box-shadow: none !important; border-color:#f5c842 !important; }
  /* Win pulse: single quick beat, no shadow — reduces paint cost */
  .cell.is-win {
    animation: cell-win-pulse .35s ease-in-out 1;
    box-shadow: none !important;
    border-color: var(--gold) !important;
  }
  .cell.is-explode { animation-duration: 0.18s; }
  .cell.is-cascade-drop { animation-duration: 0.26s; }
  .btn-bonus   { animation: none; }
  .jp-item.maxwin, .jp-item.mega,
  .jp-item.major, .jp-item.mini { animation: none; }

  /* Stop rotating conic-gradient (brutal on mobile) */
  .bwl-rays           { animation: none; opacity: 0.4; }
  .fss-frame::before  { animation: none; }

  /* Kill filter on mascot (static ok but cheaper without) */
  .mascot-img { filter: none; }
  .game-logo  { filter: none; }

  /* Disable screen shake on mobile */
  .game-root.shake { animation: none; }

  /* Promote the whole slot-grid to ONE composite layer, not one per cell.
     30 permanent will-change cells exhaust GPU memory on low-end phones
     and cause stutter on the second spin. One parent layer + cheap
     transform repaints inside is the right balance. */
  .slot-grid {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .cell { transform: translateZ(0); }
  /* Spin button box-shadow keyframe is expensive on phones */
  .btn-spin.spin-anim { animation: none; }
  /* Mascot now shows on phone — keep its float (transform-only, cheap) */
}

/* ═══════════════════════════════════════════════
   WINNING — bright gold pulse, player clearly sees the connection
   Runs 2× cycles = player has ~1.1s to notice the winning cells
═══════════════════════════════════════════════ */
.cell.is-win{
  border-color:var(--gold);
  box-shadow:0 0 28px rgba(245,200,66,.95), inset 0 0 16px rgba(245,200,66,.3);
  animation:cell-win-pulse .55s ease-in-out 3;
  z-index:5;
}
@keyframes cell-win-pulse{
  0%   { transform:scale(1); }
  40%  { transform:scale(1.10); }
  100% { transform:scale(1); }
}

/* ═══════════════════════════════════════════════
   EXPLODE — 3-phase: expand+glow → white flash → implode
   Quick pop to leave empty space rapidly for falling blocks
═══════════════════════════════════════════════ */
.cell.is-explode { animation: cell-explode 0.25s ease-out forwards; z-index: 8; }
@keyframes cell-explode {
  0%   { transform: scale(1);   opacity: 1; }
  25%  { transform: scale(1.2); opacity: 1; }
  55%  { transform: scale(0);   opacity: 0; }
  100% { transform: scale(0);   opacity: 0; }
}

/* Legacy is-gone kept for compat */
.cell.is-gone{animation:cell-gone .42s ease forwards}
@keyframes cell-gone{0%{transform:scale(1);opacity:1}40%{transform:scale(1.15);opacity:0.5}100%{transform:scale(0);opacity:0}}

/* ═══════════════════════════════════════════════
   REEL SPIN — symbols streak down with blur, snap into place
   animation-delay set by JS per column (110ms × col index)
   Total settle time: 5 × 110ms + 650ms = ~1200ms for full grid
═══════════════════════════════════════════════ */
.cell.is-reel { animation: reel-spin 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; will-change: transform, opacity; }
@keyframes reel-spin {
  0%   { transform: translateY(-170%) scaleY(1.3);  opacity: 0; }
  40%  { opacity: 0.6; }
  70%  { transform: translateY(6%)    scaleY(0.94); opacity: 1; }
  85%  { transform: translateY(-3%)   scaleY(1.02); }
  100% { transform: translateY(0)     scaleY(1);    opacity: 1; }
}

/* ═══════════════════════════════════════════════
   CASCADE DROP — new symbols fall from top after an explosion
   Only applied to freshly-replaced cells; heavy gravity + squish bounce
   animation-delay set by JS per (col/row) so left columns arrive first
═══════════════════════════════════════════════ */
.cell.is-cascade-drop { animation: cascade-drop 0.38s cubic-bezier(0.34, 1.15, 0.64, 1) both; will-change: transform, opacity; }
@keyframes cascade-drop {
  0%   { transform: translateY(-200%) scaleY(0.75); opacity: 0; }
  50%  { transform: translateY(8%)    scaleY(0.93); opacity: 1; }
  75%  { transform: translateY(-4%)   scaleY(1.04); }
  100% { transform: translateY(0)     scaleY(1);    opacity: 1; }
}
@media (max-width: 640px) {
  .cell.is-cascade-drop { animation-duration: 0.32s; }
}

/* Legacy drop kept for scatter-land compat */
.cell.is-drop{animation:cell-drop .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes cell-drop{0%{transform:translateY(-30px) scaleY(.7);opacity:0}100%{transform:none;opacity:1}}

/* Anticipation animations for scatters dropping */
.cell.scatter-anticipate {
  animation: cell-shake 0.1s infinite alternate;
  box-shadow: inset 0 0 30px #fbc02d, 0 0 40px #fbc02d;
  border-color: #fff9c4;
  z-index: 20;
}
@keyframes cell-shake {
  0% { transform: translateY(-2px) translateX(2px); }
  100% { transform: translateY(2px) translateX(-2px); }
}

.cell.scatter-land {
  animation: scatter-blast 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  z-index: 25;
}
@keyframes scatter-blast {
  0%   { transform: scale(1.5); opacity: 0.7; }
  50%  { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1); }
}

/* ── WIN RIBBON ── */
.win-ribbon{
  position:absolute;
  top:-18px; left:50%;
  transform:translate(-50%, -100%);
  background:linear-gradient(180deg, #c07010 0%, #7a3d00 50%, #5a2800 100%);
  border:2px solid #e8a020;
  border-radius:8px;
  padding:6px 14px 6px 10px;
  color:#fff;
  font-family:'Lilita One', cursive;
  box-shadow:0 4px 18px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,220,100,0.3);
  opacity:0; pointer-events:none; transition:all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  white-space:nowrap;
  z-index:50;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:240px;
  justify-content:center;
}
.win-ribbon.show{ opacity:1; top:-8px; }

/* FS mode ribbon — taller two-line banner */
.win-ribbon.rib-fs {
  background:linear-gradient(180deg, #b06010 0%, #6a3000 50%, #4a2000 100%);
  border-color:#ffd060;
  min-width:280px;
  padding:8px 14px;
}

#win-ribbon-txt {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  flex:1;
}

.rib-main {
  font-size:.85rem;
  letter-spacing:.5px;
  color:#fff;
}

.rib-win {
  font-family:'Lilita One', cursive;
  font-size:1.15rem;
  letter-spacing:1px;
  color:#ffd700;
  text-shadow:0 1px 0 #7a3d00, 0 0 12px rgba(255,200,0,.6);
  line-height:1.1;
}

.rib-sub {
  font-size:.62rem;
  font-family:'Exo 2', sans-serif;
  font-weight:800;
  color:rgba(255,255,255,0.9);
  letter-spacing:.5px;
  text-transform:uppercase;
}

.rib-fs-sub {
  font-size:.65rem;
  font-family:'Exo 2', sans-serif;
  font-weight:800;
  color:#fff;
  letter-spacing:.5px;
  text-transform:uppercase;
  line-height:1.2;
}

.rib-coins {
  font-size:.9rem;
  opacity:.85;
  flex-shrink:0;
}

/* ════════════════════════════════════════
   RIGHT PANEL — Mascot + Scatter
════════════════════════════════════════ */
.right-panel{
  width:clamp(110px, 12vw, 190px);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:linear-gradient(to bottom, rgba(50,30,20,0.85), rgba(20,10,5,0.85));
  border:3px solid #5d4037;
  border-radius:12px;
  padding:10px 8px;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.8), 0 10px 30px rgba(0,0,0,0.6);
  position:relative;
  z-index:1;
  overflow:hidden;
}

.scatter-track{
  background:linear-gradient(145deg, #1f1209, #0a0502);
  border:2px solid #d4af37;
  border-radius:10px;
  padding:8px;
  text-align:center;
  box-shadow:inset 0 0 15px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.5);
}
.st-label{
  display:block;
  color:#d4af37;
  font-family:'Lilita One', cursive;
  font-size:clamp(.5rem,.7vw,.7rem);
  margin-bottom:6px;
  text-shadow:0 2px 4px #000;
  letter-spacing:.05em;
}
.st-dots{
  display:flex; justify-content:center; gap:8px; margin-bottom:5px;
}
.st-dot{
  width:14px; height:14px;
  background:#2e1a12; border:2px solid #5d4037;
  border-radius:50%;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.8);
  transition:all .3s ease;
}
.st-dot.lit{
  background:#00ff88; border-color:#fff;
  box-shadow:0 0 15px #00ff88, inset 0 0 5px #fff;
}
.st-sub{
  font-size:.55rem; color:#8a6a57; text-transform:uppercase; font-weight:700;
  display:block;
}

.mascot-wrap{
  flex:1;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  position:relative;
  min-height:0;
  overflow:hidden;
}

.mascot-img{
  width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:bottom center;
  filter:drop-shadow(3px 6px 12px rgba(0,0,0,.7));
  transform-origin:bottom center;
  transition:transform .3s ease;
  animation:mascot-float 3s ease-in-out infinite;
}

.mascot-img.celebrate{animation:mascot-cheer .6s ease-in-out 3}
@keyframes mascot-float{
  0%,100%{transform:translateY(0) scale(1.55)}
  50%{transform:translateY(-10px) scale(1.55)}
}
@keyframes mascot-cheer{
  0%{transform:scale(1.55)}
  40%{transform:scale(1.65) rotate(-4deg)}
  70%{transform:scale(1.65) rotate(4deg)}
  100%{transform:scale(1.55)}
}

.fs-display{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:rgba(0,50,20,.8);
  border:2px solid #00c866;
  border-radius:8px;
  padding:6px;
  text-align:center;
}
.fsd-n{
  font-family:var(--font-t);font-size:1.6rem;color:#00ff88;
  text-shadow:0 0 14px #00ff88;
}
.fsd-label{
  font-size:.55rem;color:rgba(200,220,200,.7);font-weight:700;
  text-transform:uppercase;line-height:1.2;
}

/* ════════════════════════════════════════
   CONTROL BAR (DASHBOARD)
   Key fix: explicit height, z-index, no overflow hidden
════════════════════════════════════════ */
.control-bar{
  background:linear-gradient(to bottom, #2c1e16, #120904);
  border-top:4px solid #5d4037;
  padding:8px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 -10px 30px rgba(0,0,0,0.8);
  position:relative;
  z-index:100;
  flex-shrink:0;
  min-height:70px;
  gap:10px;
}

/* Left buttons */
.cb-left{
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0;
}

.btn-sys{
  background:linear-gradient(to bottom, #3e2723, #1b0000);
  border:2px solid #5d4037;
  color:#d4af37;
  width:42px;height:42px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;cursor:pointer;transition:all .2s;
  box-shadow:inset 0 2px 5px rgba(255,255,255,0.1), 0 4px 8px rgba(0,0,0,0.6);
  pointer-events:all;
}
.btn-sys svg{width:20px;height:20px;pointer-events:none;}
.btn-sys:hover{background:linear-gradient(to bottom, #4e342e, #2e1a12); color:#fff; transform:translateY(-2px);}
.btn-sys.turbo-active{
  background:linear-gradient(to bottom, #00e676, #00b0ff);
  border-color:#b9f6ca; color:#fff;
  box-shadow:0 0 20px #00e676, inset 0 0 10px #b9f6ca;
  animation:turbo-pulse 1.5s infinite alternate;
}
@keyframes turbo-pulse{
  0%{opacity:1}
  100%{opacity:0.8}
}

.btn-bonus{
  background:linear-gradient(to bottom, #fbc02d, #f57f17);
  border:2px solid #fff9c4;border-radius:10px;
  color:#2e1a12;font-family:'Lilita One',cursive;
  font-size:clamp(.75rem,1.2vw,1rem);
  padding:0 12px;height:42px;cursor:pointer;transition:all .2s;
  box-shadow:0 0 15px rgba(251,192,45,0.5);
  white-space:nowrap;
  pointer-events:all;
  animation: bonus-idle-pulse 2s infinite ease-in-out;
}
@keyframes bonus-idle-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.88; transform: scale(1.03); }
}
.btn-bonus:hover{transform:scale(1.08); filter:brightness(1.1); animation:none;}

/* Center dashboard values */
.cb-center{
  display:flex;
  gap:8px;
  align-items:center;
  flex:1;
  justify-content:center;
  min-width:0;
}

.val-box{
  background:#0a0502;
  border:2px solid #3e2723;
  border-radius:8px;
  padding:4px 12px;
  text-align:center;
  box-shadow:inset 0 5px 10px rgba(0,0,0,0.8);
  min-width:100px;
  position:relative;
}
.vb-label{
  color:#8a6a57;font-size:.6rem;text-transform:uppercase;font-weight:800;
  margin-bottom:2px;display:block;
}
.vb-val{
  color:#d4af37;font-family:'Exo 2',sans-serif;
  font-size:clamp(.85rem,1.3vw,1.2rem);font-weight:800;text-shadow:0 2px 4px #000;
  white-space:nowrap;
}
.vb-val.gold{color:var(--gold);}
.flash-win .vb-val,.vb-val.win-flash{color:#00ff88;text-shadow:0 0 10px #00ff88;}
.rtp-box{min-width:70px;}

/* Bet control */
.bet-control{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:4px;
  padding:4px 8px;
}
.bet-info{
  display:flex;flex-direction:column;align-items:center;
}
.bet-btns{
  display:flex;flex-direction:column;gap:2px;
}
.btn-bet{
  background:#2e1a12;border:1px solid #5d4037;color:#d4af37;
  width:28px;height:24px;border-radius:4px;cursor:pointer;
  font-size:.8rem;display:flex;align-items:center;justify-content:center;
  pointer-events:all;
  position:relative;
  z-index:200;
  transition:all .15s;
}
.btn-bet:hover{background:#3e2723;color:#fff;}
.btn-bet:disabled{opacity:.4;pointer-events:none;}

/* Right: Spin button */
.cb-right{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.btn-spin{
  background:linear-gradient(to bottom, #00c853, #00796b);
  border:3px solid #b9f6ca;
  border-radius:50px;
  padding:12px 32px;
  color:#fff;
  font-family:'Lilita One',cursive;
  font-size:clamp(1.2rem,2vw,1.6rem);
  letter-spacing:2px;
  text-shadow:0 2px 5px rgba(0,0,0,0.5);
  box-shadow:0 8px 20px rgba(0,0,0,0.5), inset 0 5px 15px rgba(255,255,255,0.4);
  cursor:pointer;
  transition:all .1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events:all;
}
.btn-spin:hover{transform:scale(1.06); background:linear-gradient(to bottom, #00e676, #00897b); box-shadow:0 0 20px #00e676;}
.btn-spin:active{transform:scale(0.94); box-shadow:none;}
.btn-spin:disabled{filter:grayscale(1); opacity:0.5; pointer-events:none;}

/* Spin animation — CSS-only pulse, no class flip */
@keyframes spin-pulse{
  0%,100%{box-shadow:0 8px 20px rgba(0,0,0,0.5), inset 0 5px 15px rgba(255,255,255,0.4), 0 0 0 0 rgba(0,200,100,.6)}
  50%{box-shadow:0 8px 20px rgba(0,0,0,0.5), inset 0 5px 15px rgba(255,255,255,0.4), 0 0 0 8px rgba(0,200,100,0)}
}
.btn-spin.spin-anim{
  animation:spin-pulse .6s ease-in-out infinite;
}

/* ═══════════════════════════════════════
   WIN OVERLAY
═══════════════════════════════════════ */
.win-overlay{
  position:fixed;inset:0;z-index:500;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
}
.win-overlay.show{display:flex}

.wo-rays{
  position:absolute;inset:0;
  background:conic-gradient(from 0deg,transparent 50%,rgba(245,200,66,.08) 55%,transparent 60%);
  animation:wo-rot 5s linear infinite;
}
@keyframes wo-rot{to{transform:rotate(360deg)}}

.wo-card{
  position:relative;z-index:2;
  background:linear-gradient(145deg,rgba(6,18,7,.97),rgba(3,10,4,.98));
  border:2.5px solid var(--gold);border-radius:20px;
  padding:2rem 3rem;text-align:center;
  box-shadow:0 0 80px var(--g-glow),0 20px 60px rgba(0,0,0,.7);
  transform:scale(.8);
  animation:card-pop .45s cubic-bezier(.175,.885,.32,1.275) forwards;
  max-width:480px;
}
@keyframes card-pop{to{transform:scale(1)}}

.wo-coins{font-size:2rem;margin-bottom:.5rem}
.wo-tier{font-family:var(--font-t);font-size:1.8rem;color:var(--gold-l);text-shadow:0 0 20px var(--g-glow);letter-spacing:.1em}
.wo-amount{font-family:var(--font-t);font-size:3rem;color:#00c866;text-shadow:0 0 20px rgba(0,200,100,.7);margin:.2rem 0}
.wo-detail{font-size:.82rem;color:rgba(200,220,200,.5);font-weight:600;margin-bottom:1.2rem}

.wo-close{
  background:linear-gradient(135deg,#0a5010,#18a020);
  color:#fff;font-family:var(--font-t);font-size:.95rem;
  padding:.55rem 2.5rem;border-radius:50px;
  border:1.5px solid #00c866;
  box-shadow:0 0 14px rgba(0,200,100,.4);
  transition:var(--trans);
}
.wo-close:hover{box-shadow:0 0 28px rgba(0,200,100,.8);transform:scale(1.05)}

/* ═══════════════════════════════════════
   PAYTABLE MODAL
═══════════════════════════════════════ */
.modal-back{
  position:fixed;inset:0;z-index:600;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:1rem;
  overflow-y:auto;
}
.modal-back.open{display:flex}
.modal-back.show{display:flex; opacity:1 !important;}

/* Bonus Buy Confirmation Modal */
.bonus-buy-card{
  background:linear-gradient(135deg,#120904,#20140c);
  border:3px solid #fbc02d;
  box-shadow:0 10px 50px rgba(251,192,45,.2), inset 0 0 20px rgba(0,0,0,0.8);
  border-radius:12px;padding:30px;width:90%;max-width:420px;
  text-align:center; position:relative; color:#d8d0c0;
}
.bbc-icon{
  font-size:3rem; margin-bottom:10px; animation:bbc-float 2s infinite ease-in-out;
}
@keyframes bbc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.bbc-desc{
  font-family:'Exo 2', sans-serif;font-size:1rem; line-height:1.4; margin-bottom:20px; color:#cba;
}
.bbc-cost{
  background:#0a0502; border:2px solid #5d4037; border-radius:8px;
  padding:15px; margin-bottom:25px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.bbc-cost span{ font-size:0.8rem; text-transform:uppercase; color:#8a6a57; font-weight:800;}
.bbc-cost strong{ font-family:'Exo 2', sans-serif; font-size:2rem; font-weight:900; color:#00ff88; text-shadow:0 2px 10px rgba(0,255,136,0.3);}
.bbc-actions{
  display:flex; gap:15px; justify-content:center;
}
.bbc-btn{
  padding:12px 25px; font-family:'Lilita One', cursive; font-size:1.1rem;
  border-radius:8px; cursor:pointer; transition:all 0.2s; flex:1; border: none;
}
.bbc-btn.cancel{
  background:#2e1a12; border:2px solid #5d4037; color:#cba;
}
.bbc-btn.cancel:hover{ background:#4e342e; color:#fff;}
.bbc-btn.confirm{
  background:linear-gradient(to bottom, #d4af37, #b28a1c); border:2px solid #fff9c4; color:#2e1a12;
  box-shadow:0 5px 15px rgba(212,175,55,0.4);
}
.bbc-btn.confirm:hover{ transform:scale(1.05); filter:brightness(1.1); box-shadow:0 5px 25px rgba(212,175,55,0.7); }

.modal-card{
  background:linear-gradient(160deg,#0c1e0e,#060e07);
  border:2px solid rgba(245,200,66,.4);border-radius:18px;
  padding:2rem 2.5rem 2.5rem;max-width:740px;width:100%;
  box-shadow:0 0 60px rgba(245,200,66,.15),0 20px 60px rgba(0,0,0,.7);
  position:relative;max-height:90vh;overflow-y:auto;
}

.modal-x{
  position:absolute;top:.9rem;right:.9rem;
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid rgba(245,200,66,.3);background:rgba(10,24,12,.9);
  color:rgba(245,200,66,.7);font-size:1rem;
  display:flex;align-items:center;justify-content:center;transition:var(--trans);
}
.modal-x:hover{border-color:#e83c3c;color:#e83c3c}

.modal-title{
  font-family:var(--font-t);font-size:1.3rem;color:var(--gold);
  text-align:center;letter-spacing:.07em;margin-bottom:1.5rem;
  text-shadow:0 0 14px var(--g-glow);
}

.msec-h{
  font-family:var(--font-t);font-size:.78rem;
  color:rgba(245,200,66,.65);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:.75rem;
  border-bottom:1px solid rgba(245,200,66,.12);padding-bottom:.35rem;
}

/* ── Paytable: full RTP-compliant layout ──── */

.pay-grid{ display:flex; flex-direction:column; gap:.6rem; }

/* RTP badge + meta */
.pt-header{ background:linear-gradient(145deg,#0e2010,#061008); border:1px solid rgba(245,200,66,.2); border-radius:12px; padding:1rem; }
.pt-rtp-badge{ display:flex;align-items:baseline;gap:.5rem;margin-bottom:.75rem; }
.pt-rtp-label{ font-family:var(--font-b);font-size:.6rem;font-weight:900;letter-spacing:.15em;color:rgba(245,200,66,.5);text-transform:uppercase; }
.pt-rtp-value{ font-family:var(--font-t);font-size:2rem;color:var(--gold);text-shadow:0 0 20px var(--g-glow); }
.pt-meta-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem; }
.pt-meta-item{ background:rgba(0,0,0,.3);border-radius:8px;padding:.4rem;text-align:center;border:1px solid rgba(245,200,66,.08); }
.pt-meta-label{ display:block;font-size:.52rem;color:rgba(200,220,200,.4);font-weight:700;letter-spacing:.08em;text-transform:uppercase; }
.pt-meta-val{ display:block;font-family:var(--font-t);font-size:.85rem;color:var(--gold-l);margin:.1rem 0; }
.pt-meta-sub{ display:block;font-size:.5rem;color:rgba(200,220,200,.35);font-weight:600; }

/* Section titles */
.pt-section-title{ font-family:var(--font-t);font-size:.72rem;color:rgba(245,200,66,.55);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid rgba(245,200,66,.1);padding-bottom:.3rem;margin-top:.2rem; }

/* Column headers */
.pt-col-hdr{
  display:grid;
  grid-template-columns:180px repeat(5,42px) 56px;
  gap:2px;
  font-size:.52rem;font-weight:900;color:rgba(200,220,200,.35);text-transform:uppercase;letter-spacing:.08em;
  padding:0 .3rem;
}
.pt-ch-sym{ text-align:left; }
.pt-ch-cells,.pt-ch-freq{ text-align:center; }

/* Pay rows */
.pt-pay-row{
  display:grid;
  grid-template-columns:180px repeat(5,42px) 56px;
  gap:2px;align-items:center;
  background:rgba(8,20,10,.6);border:1px solid rgba(245,200,66,.07);
  border-radius:8px;padding:.3rem .4rem;
  transition:border-color .15s;
}
.pt-pay-row:hover{ border-color:rgba(245,200,66,.22); }

.pt-sym-cell{ display:flex;align-items:center;gap:.5rem; }
.pt-sym-img{ width:32px;height:32px;flex-shrink:0;background-size:contain;background-position:center;background-repeat:no-repeat;border-radius:5px;background-color:rgba(0,0,0,.3); }
.pt-sym-info{ display:flex;flex-direction:column;gap:.1rem; }
.pt-sym-name{ font-family:var(--font-t);font-size:.65rem;color:var(--gold-l);line-height:1; }
.pt-sym-freq{ font-size:.52rem;color:rgba(200,220,200,.4);font-weight:700; }
.pt-sym-freq.dev-ok{ color:#00c866; }
.pt-sym-freq.dev-hi{ color:#f5c842; }
.pt-sym-freq.dev-lo{ color:#e07030; }

.pt-pay-val{ font-family:var(--font-t);font-size:.7rem;color:rgba(245,200,66,.7);text-align:center; }
.pt-pay-hi{ color:var(--gold)!important;font-size:.75rem!important; }
.pt-rtp-contrib{ font-size:.55rem;color:rgba(0,200,100,.5);text-align:center;font-weight:700; }

/* Special symbols (scatter/wild) */
.pt-special-row{ grid-template-columns:180px 1fr 56px !important; }
.pt-special-desc{ font-size:.6rem;color:rgba(200,220,200,.55);font-weight:600; }
.pt-special-desc strong{ color:var(--gold-l); }

/* Session stats grid */
.pt-stat-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.4rem; }
.pt-stat-item{ background:rgba(8,20,10,.7);border:1px solid rgba(245,200,66,.08);border-radius:8px;padding:.45rem .6rem;display:flex;flex-direction:column;gap:.1rem; }
.pt-stat-label{ font-size:.52rem;color:rgba(200,220,200,.4);font-weight:700;letter-spacing:.06em;text-transform:uppercase; }
.pt-stat-val{ font-family:var(--font-t);font-size:.9rem;color:var(--gold); }
.pt-stat-sub{ font-size:.5rem;color:rgba(200,220,200,.3);font-weight:600; }

/* Connection probability table */
.pt-conn-hdr,.pt-conn-row{
  display:grid;
  grid-template-columns:90px 60px 60px 50px 55px 1fr;
  gap:4px;align-items:center;
  font-size:.55rem;padding:.25rem .3rem;
}
.pt-conn-hdr{ color:rgba(200,220,200,.35);font-weight:900;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(245,200,66,.08); }
.pt-conn-row{ background:rgba(8,20,10,.4);border-radius:5px; color:rgba(200,220,200,.6); }
.pt-conn-row:nth-child(even){ background:rgba(8,20,10,.65); }
.pt-conn-sym{ font-family:var(--font-t);font-size:.6rem;color:var(--gold-l); }

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#040c04}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold-d),var(--gold));border-radius:3px}

/* ═══════════════════════════════════════════════
   PARTICLE LAYER
═══════════════════════════════════════════════ */
.particle-layer{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:900;
  overflow:hidden;
}

.pt{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.pt-coin{
  width:16px;height:16px;
  background:radial-gradient(circle at 35% 30%,#fff0a0,#f5c842,#a07010);
  border:2px solid #d4980a;
  box-shadow:0 0 8px rgba(245,200,66,.8);
}
.pt-star{
  width:14px;height:14px;
  background:var(--gold);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  border-radius:0;
}
.pt-spark{
  width:4px;height:16px;
  border-radius:2px;
  background:linear-gradient(180deg,#ffffff,#f5c842);
  box-shadow:0 0 8px rgba(245,200,66,.9);
}
.pt-leaf{
  width:12px;height:8px;
  background:radial-gradient(ellipse,#2dce52,#1a8032);
  border-radius:50% 0 50% 0;
}

@keyframes pt-fly{
  0%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}
  80%{opacity:.8}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(var(--ds))}
}

/* ═══════════════════════════════════════════════
   WIN POPUP
═══════════════════════════════════════════════ */
.win-popup{
  position:fixed;
  pointer-events:none;
  z-index:800;
  font-family:var(--font-t);
  font-size:1.6rem;
  color:#00ff88;
  text-shadow:0 0 16px #00ff88, 0 2px 0 #004020, 0 0 32px rgba(0,255,136,.5);
  white-space:nowrap;
  opacity:0;
  transform:translateY(0);
  transition:none;
}
.win-popup.pop{
  animation:win-pop 1.8s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes win-pop{
  0%  {opacity:0; transform:translateY(0) scale(.8)}
  15% {opacity:1; transform:translateY(-20px) scale(1.15)}
  70% {opacity:1; transform:translateY(-60px) scale(1)}
  100%{opacity:0; transform:translateY(-90px) scale(.9)}
}

/* ═══════════════════════════════════════════════
   SCREEN SHAKE
═══════════════════════════════════════════════ */
@keyframes screen-shake{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-4px,2px)}
  20%{transform:translate(4px,-2px)}
  30%{transform:translate(-3px,3px)}
  40%{transform:translate(3px,-1px)}
  50%{transform:translate(-2px,2px)}
  60%{transform:translate(2px,-2px)}
  70%{transform:translate(-1px,1px)}
  80%{transform:translate(1px,-1px)}
  90%{transform:translate(-1px,0)}
}
.game-root.shake{animation:screen-shake .45s ease}

/* ═══════════════════════════════════════════════
   BIG WIN LAYER
═══════════════════════════════════════════════ */
.big-win-layer{
  position:fixed;inset:0;z-index:700;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px);
}
.big-win-layer.show{display:flex}

.bwl-rays{
  position:absolute;inset:0;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(245,200,66,.12) 5deg,transparent 10deg,
    transparent 30deg, rgba(245,200,66,.08) 35deg,transparent 40deg,
    transparent 60deg, rgba(245,200,66,.10) 65deg,transparent 70deg,
    transparent 90deg, rgba(245,200,66,.12) 95deg,transparent 100deg,
    transparent 120deg, rgba(245,200,66,.08) 125deg,transparent 130deg,
    transparent 150deg, rgba(245,200,66,.10) 155deg,transparent 160deg,
    transparent 180deg, rgba(245,200,66,.12) 185deg,transparent 190deg,
    transparent 210deg, rgba(245,200,66,.08) 215deg,transparent 220deg,
    transparent 240deg, rgba(245,200,66,.10) 245deg,transparent 250deg,
    transparent 270deg, rgba(245,200,66,.12) 275deg,transparent 280deg,
    transparent 300deg, rgba(245,200,66,.08) 305deg,transparent 310deg,
    transparent 330deg, rgba(245,200,66,.10) 335deg,transparent 340deg
  );
  animation:bwl-rotate 4s linear infinite;
}
@keyframes bwl-rotate{to{transform:rotate(360deg)}}

.bwl-center{
  position:relative;z-index:2;
  text-align:center;
  animation:bwl-pop .5s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes bwl-pop{
  0%{transform:scale(.5);opacity:0}
  100%{transform:scale(1);opacity:1}
}

.bwl-tier{
  font-family:var(--font-t);
  font-size:clamp(2rem,6vw,5rem);
  color:var(--gold-l);
  text-shadow:0 0 40px var(--gold), 0 4px 0 var(--gold-d), 0 8px 0 rgba(0,0,0,.5);
  letter-spacing:.12em;
  animation:bwl-glow 1.2s ease-in-out infinite;
}
@keyframes bwl-glow{
  0%,100%{opacity:1}
  50%{opacity:0.85}
}

.bwl-amount{
  font-family:var(--font-t);
  font-size:clamp(2.5rem,8vw,7rem);
  color:#00ff88;
  text-shadow:0 0 40px #00ff88, 0 4px 0 #004020, 0 0 80px rgba(0,255,136,.4);
  margin:.2rem 0;
  animation:bwl-count-pulse .3s ease-in-out infinite;
}
@keyframes bwl-count-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.02)}
}

.bwl-detail{
  font-family:var(--font-b);
  font-size:clamp(.9rem,2vw,1.4rem);
  color:rgba(245,200,66,.75);
  font-weight:700;
  letter-spacing:.06em;
  margin-top:.5rem;
}

.bwl-coins{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rain-coin{
  position:absolute;
  top:-30px;
  width:20px;height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff0a0,#f5c842,#a07010);
  border:2px solid #d4980a;
  animation:rain-fall linear forwards;
}
@keyframes rain-fall{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  90%{opacity:1}
  100%{transform:translateY(110vh) rotate(720deg);opacity:0}
}

/* ═══════════════════════════════════════════════
   BONUS CINEMATIC
═══════════════════════════════════════════════ */
.bonus-cinema{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:center;justify-content:center;
  overflow:hidden;
}
.bonus-cinema.playing{display:flex}

.bc-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,0);
  animation:bc-darken .4s ease forwards;
}
@keyframes bc-darken{to{background:rgba(0,10,0,.88)}}

.bc-vines-left,.bc-vines-right{
  position:absolute;top:0;bottom:0;width:35%;
  background-image:url('assets/bg_wide.png');
  background-size:280% auto;
  filter:brightness(.4) saturate(1.5);
  z-index:1;
}
.bc-vines-left{
  left:0;background-position:0% 30%;
  transform:translateX(-100%);
  animation:bc-vine-in-l .7s .3s cubic-bezier(.22,.61,.36,1) forwards;
}
.bc-vines-right{
  right:0;background-position:100% 30%;
  transform:translateX(100%);
  animation:bc-vine-in-r .7s .3s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes bc-vine-in-l{to{transform:translateX(0)}}
@keyframes bc-vine-in-r{to{transform:translateX(0)}}

.bc-center{
  position:relative;z-index:5;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}

.bc-subtitle{
  font-family:var(--font-t);font-size:1.2rem;
  color:rgba(245,200,66,.8);letter-spacing:.2em;
  opacity:0;
  animation:bc-fade-in .5s .8s ease forwards;
}

.bc-title{
  font-family:var(--font-t);
  font-size:clamp(2.5rem,7vw,6rem);
  color:var(--gold);
  text-shadow:0 0 60px var(--gold), 0 4px 0 var(--gold-d), 0 8px 0 rgba(0,0,0,.6);
  letter-spacing:.1em;
  line-height:1;
  opacity:0;transform:scale(.6);
  animation:bc-title-in .6s 1s cubic-bezier(.175,.885,.32,1.275) forwards;
}
@keyframes bc-title-in{to{opacity:1;transform:scale(1)}}

.bc-reveal{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  opacity:0;
  animation:bc-fade-in .5s 1.7s ease forwards;
}
.bc-n{
  font-family:var(--font-t);
  font-size:clamp(4rem,12vw,9rem);
  line-height:1;
  color:#00ff88;
  text-shadow:0 0 40px #00ff88, 0 4px 0 #004020;
  animation:bc-num-bounce .4s 2s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes bc-num-bounce{0%{transform:scale(.5)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.bc-label{
  font-family:var(--font-t);
  font-size:clamp(1.2rem,3.5vw,2.5rem);
  color:var(--gold-l);
  letter-spacing:.2em;
  text-shadow:0 0 20px var(--g-glow);
}
.bc-subtext{
  font-family:var(--font-b);font-size:1rem;
  color:rgba(200,220,200,.6);font-weight:600;
  letter-spacing:.08em;
  opacity:0;
  animation:bc-fade-in .5s 2.2s ease forwards;
}

@keyframes bc-fade-in{to{opacity:1}}

.bc-fireworks{position:absolute;inset:0;z-index:4;pointer-events:none}

/* ═══════════════════════════════════════════════
   FREE SPIN HUD — Brown banner style
═══════════════════════════════════════════════ */
.fs-hud{
  position:fixed;
  top:0; left:50%;
  transform:translateX(-50%) translateY(-110%);
  z-index:200;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
  border-radius:0 0 10px 10px;
  overflow:hidden;
}
.fs-hud.visible{ transform:translateX(-50%) translateY(0); }

.fsh-inner{
  display:flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(180deg, #c07010 0%, #7a3d00 55%, #4a2000 100%);
  border:2px solid #e8a020;
  border-top:none;
  border-radius:0 0 10px 10px;
  padding:7px 16px 9px;
  box-shadow:0 6px 24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,220,80,.25);
  min-width:260px;
  justify-content:center;
}

.fsh-coins{
  font-size:1.1rem;
  opacity:.85;
  flex-shrink:0;
  letter-spacing:-2px;
}

.fsh-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
}

.fsh-top{
  display:flex;
  align-items:baseline;
  gap:6px;
  line-height:1;
}

.fsh-win-label{
  font-family:var(--font-t);
  font-size:1.05rem;
  font-weight:900;
  color:#ffd700;
  letter-spacing:2px;
  text-shadow:0 1px 0 #5a2800, 0 0 10px rgba(255,210,0,.5);
}

.fsh-win-amt{
  font-family:var(--font-t);
  font-size:1.35rem;
  color:#fff;
  text-shadow:0 1px 0 #5a2800, 0 0 12px rgba(255,255,255,.3);
  letter-spacing:.5px;
}
.fsh-win-amt.bump{ animation:fsh-bump .3s ease; }
@keyframes fsh-bump{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.2); color:#ffd700; } }

.fsh-bot{
  font-family:'Exo 2', sans-serif;
  font-size:.62rem;
  font-weight:900;
  color:rgba(255,255,255,.92);
  letter-spacing:.8px;
  text-transform:uppercase;
  white-space:nowrap;
}

.fsh-bot #fsh-remain{
  color:#ffd700;
  font-family:var(--font-t);
  font-size:.75rem;
}

/* Free spin mode */
.game-root.free-spin-mode .grid-frame{
  border-color:#00a850;
  box-shadow:
    inset 0 0 30px rgba(0,200,80,.2),
    0 0 0 2px #00d860,
    0 0 0 5px #005020,
    0 8px 40px rgba(0,0,0,.7),
    0 0 50px rgba(0,200,80,.3);
  transition:box-shadow .5s,border-color .5s;
}
.game-root.free-spin-mode .gf-top-bar,
.game-root.free-spin-mode .gf-bot-bar{
  background:linear-gradient(90deg,#0a4010,#1a8028,#2aca40,#1a8028,#0a4010);
}
.game-root.free-spin-mode .scene-vignette{
  background:
    linear-gradient(180deg, rgba(0,30,5,.65) 0%, transparent 18%, transparent 75%, rgba(0,0,0,.7) 100%),
    radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(0,20,5,.5) 100%);
}

/* =======================================================
   FREE SPIN SUMMARY - Jungle Popup
======================================================= */

.fs-summary{
  position:fixed;inset:0;z-index:1100;
  display:none;align-items:center;justify-content:center;
  pointer-events:none;
}
.fs-summary.show{ display:flex; pointer-events:auto; }

.fss-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
  cursor:pointer;
}

.fss-popup{
  position:relative;
  width:clamp(320px,54vw,560px);
  margin-top:80px;
  animation:fss-pop-in .45s cubic-bezier(.175,.885,.32,1.275) both;
  z-index:1;
}
@keyframes fss-pop-in{
  0%  { transform:scale(.55) translateY(40px); opacity:0; }
  100%{ transform:scale(1)   translateY(0);    opacity:1; }
}

.fss-animals{
  position:absolute;top:-88px;left:0;right:0;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;z-index:2;
}
.fss-animal{ height:110px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.fss-animal--left { transform:scaleX(-1) rotate(-5deg);height:95px;margin-right:-12px; }
.fss-animal--mid  { height:115px;z-index:1;margin-bottom:4px; }
.fss-animal--right{ transform:rotate(5deg);height:95px;margin-left:-12px; }

.fss-close{
  position:absolute;top:-10px;right:-10px;
  width:36px;height:36px;
  background:linear-gradient(135deg,#8b4513,#5c2a06);
  border:2px solid #c8843a;border-radius:50%;
  color:#f5deb3;font-size:1rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:3;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:transform .15s,box-shadow .15s;
}
.fss-close:hover{ transform:scale(1.15);box-shadow:0 0 14px rgba(200,130,50,.7); }

.fss-frame{
  position:relative;
  background:radial-gradient(ellipse at 50% 40%,#1a4d10 0%,#0d2e08 60%,#081a05 100%);
  border-radius:18px;
  padding:1.6rem 2.2rem 1.8rem;
  text-align:center;
  border:6px solid #5c3310;
  box-shadow:
    inset 0 0 0 3px #8b5a2b,
    inset 0 0 0 6px #3d1f06,
    0 0 0 2px #c8843a,
    0 8px 40px rgba(0,0,0,.7),
    0 0 60px rgba(30,120,20,.25);
  overflow:visible;
}
.fss-frame::before{
  content:'';position:absolute;inset:-8px;border-radius:22px;
  background:conic-gradient(from 0deg,transparent 0%,rgba(0,160,40,.08) 15%,rgba(0,200,60,.18) 20%,transparent 25%,transparent 70%,rgba(0,160,40,.08) 85%,rgba(0,200,60,.18) 90%,transparent 95%);
  animation:bwl-rotate 6s linear infinite;pointer-events:none;
}
.fss-frame::after{
  content:'leaf';position:absolute;bottom:-18px;right:12px;
  font-size:2.2rem;transform:rotate(-20deg);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));pointer-events:none;
}

.fss-congrats{
  font-family:var(--font-t);
  font-size:clamp(2rem,6vw,3.2rem);
  letter-spacing:.1em;line-height:1;margin-bottom:.15rem;
  color:#f5c832;
  -webkit-text-stroke:2px #b22000;
  text-shadow:0 3px 0 #7a1200,0 0 30px rgba(245,200,50,.6);
  animation:fss-glow-title 2s ease-in-out infinite;
}
@keyframes fss-glow-title{
  0%,100%{ opacity:1; }
  50%    { opacity:0.85; }
}

.fss-youwon{
  font-family:var(--font-t);
  font-size:clamp(1.5rem,4.5vw,2.3rem);
  color:#4a9eff;letter-spacing:.08em;
  text-shadow:0 2px 0 #003080,0 0 20px rgba(74,158,255,.5);
  margin-bottom:1rem;
}

.fss-plaque{
  position:relative;
  background:linear-gradient(160deg,#7a3d10 0%,#5c2a06 40%,#4a2005 60%,#6b3510 100%);
  border-radius:10px;padding:.55rem 1.4rem .65rem;
  margin:0 auto .9rem;max-width:82%;
  border:3px solid #9c6030;
  box-shadow:inset 0 2px 6px rgba(255,200,100,.12),inset 0 -3px 8px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.5);
}
.fss-plaque::before{
  content:'';position:absolute;inset:0;border-radius:8px;
  background:repeating-linear-gradient(90deg,transparent,transparent 28px,rgba(255,180,80,.04) 28px,rgba(255,180,80,.04) 29px);
  pointer-events:none;
}

.fss-amount{
  display:block;
  font-family:var(--font-t);
  font-size:clamp(1.4rem,4.5vw,2.4rem);
  color:#f0d88a;
  text-shadow:0 2px 0 #4a2000,0 0 16px rgba(240,180,80,.5);
  letter-spacing:.05em;position:relative;
}
.fss-amount.fss-pop{
  animation:fss-amount-pop .5s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes fss-amount-pop{
  0%  { transform:scale(1); }
  50% { transform:scale(1.18);text-shadow:0 2px 0 #4a2000,0 0 40px rgba(255,220,80,.9); }
  100%{ transform:scale(1); }
}

.fss-spins{
  font-family:var(--font-t);
  font-size:clamp(1.3rem,4vw,2rem);
  color:#4a9eff;letter-spacing:.06em;
  text-shadow:0 2px 0 #002060,0 0 18px rgba(74,158,255,.4);
  margin-bottom:.7rem;
}

.fss-cta{
  display:inline-block;background:none;border:none;
  font-family:var(--font-b);font-size:clamp(.75rem,2vw,1rem);
  font-weight:800;letter-spacing:.18em;
  color:#00d4aa;text-shadow:0 0 12px rgba(0,212,170,.6);
  cursor:pointer;padding:.3rem 1rem;
  transition:opacity .2s,letter-spacing .2s;
  animation:fss-cta-blink 1.8s ease-in-out infinite;
}
@keyframes fss-cta-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.fss-cta:hover{ opacity:1!important;letter-spacing:.24em; }
/* ═══════════════════════════════════════════════
   IMPROVED WIN CELL ANIMATIONS
═══════════════════════════════════════════════ */
.cell.is-win{
  border-color:var(--gold);
  box-shadow:0 0 28px rgba(245,200,66,.9), inset 0 0 18px rgba(245,200,66,.25);
  animation:cell-win-v2 .6s ease-in-out;
  z-index:5;
}
@keyframes cell-win-v2{
  0%  {transform:scale(1)}
  20% {transform:scale(1.12)}
  50% {transform:scale(1.06)}
  100%{transform:scale(1.04)}
}

/* Cascade multiplier float */
.mult-float{
  position:fixed;
  font-family:var(--font-t);
  font-size:1.8rem;
  color:var(--gold);
  text-shadow:0 0 20px var(--gold), 0 3px 0 var(--gold-d);
  pointer-events:none;
  z-index:600;
  animation:mult-float-up 1.6s ease forwards;
}
@keyframes mult-float-up{
  0%  {opacity:0;transform:translateY(0) scale(.8)}
  15% {opacity:1;transform:translateY(-15px) scale(1.2)}
  70% {opacity:1;transform:translateY(-55px) scale(1)}
  100%{opacity:0;transform:translateY(-80px) scale(.9)}
}

/* ═══════════════════════════════════════════════
   AMBIENT / BONUS MODE GRID GLOW
═══════════════════════════════════════════════ */
.game-root.bonus-mode .grid-frame{
  border-color:#b030f0;
  box-shadow:inset 0 0 30px rgba(150,0,255,0.8), 0 20px 80px rgba(100,0,200,0.6);
  transition:border-color 2s, box-shadow 2s;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile
   Strategy:
     > 900px  → full desktop layout
     ≤ 900px  → hide right panel (mascot/scatter), compact left
     ≤ 640px  → hide left panel too, grid full-width, 2-row control bar
     ≤ 400px  → extreme compact, minimal chrome
═══════════════════════════════════════════════ */

/* ── Tablet (≤ 900px) ─────────────────────────── */
@media (max-width: 900px) {
  .right-panel { display: none; }

  .left-panel {
    width: clamp(100px, 12vw, 160px);
    padding: 6px 5px;
  }

  .jp-label { font-size: .44rem; }
  .jp-val   { font-size: clamp(.55rem, .75vw, .75rem); }
  .mp-label { font-size: clamp(.44rem, .65vw, .65rem); }
  .mp-step  { height: 22px; font-size: clamp(.55rem, .7vw, .75rem); }

  .control-bar { gap: 4px; padding: 4px 6px; }
  .btn-spin {
    padding: 10px 22px;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
  }

  .vb-label { font-size: clamp(.44rem, .9vw, .65rem); }
  .vb-val   { font-size: clamp(.72rem, 1.2vw, 1rem); }

  .title-bar { padding: .1rem 0; }
  .logo-bottom { font-size: clamp(1rem, 2.8vw, 2.4rem); }
}

/* ── Mobile portrait (≤ 640px) ───────────────── */
@media (max-width: 640px) {
  /* Hide left panel (jackpots) — too wide for portrait */
  .left-panel  { display: none; }

  /* Tarzan floats freely in the jungle sky above the grid — no box,
     no border, just the transparent PNG with a soft drop-shadow so he
     blends with the scene. */
  .right-panel {
    display: block;
    position: absolute;
    top: 30px;
    right: 8px;
    width: 78px;
    height: 110px;
    z-index: 9;
    pointer-events: none;
    /* override desktop panel chrome */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    gap: 0 !important;
  }
  .right-panel .scatter-track,
  .right-panel .fs-display { display: none; }
  .mascot-wrap {
    width: 100%;
    height: 100%;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
  .mascot-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top right;
    filter: drop-shadow(2px 4px 8px rgba(0,0,0,.65));
    /* re-scale to ~native size; the desktop animation scales 1.55× and
       overflows the small mobile container. */
    animation: mascot-float-mobile 3s ease-in-out infinite;
  }
  @keyframes mascot-float-mobile {
    0%,100% { transform: translateY(0) scale(1); }
    50%     { transform: translateY(-6px) scale(1); }
  }
  /* Override the desktop celebrate (scale 1.55–1.65) — at native mobile
     size that magnifies Tarzan past the 78×110 container and clips him. */
  .mascot-img.celebrate {
    animation: mascot-cheer-mobile .55s ease-in-out 3 !important;
  }
  @keyframes mascot-cheer-mobile {
    0%   { transform: scale(1) rotate(0); }
    40%  { transform: scale(1.08) rotate(-5deg); }
    70%  { transform: scale(1.08) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
  }
  .play-area { position: relative; }

  .play-area {
    padding: 4px 4px 2px;
    gap: 4px;
  }

  .center-panel { justify-content: flex-start; }

  /* Grid takes full viewport width */
  .grid-frame {
    border-width: 3px;
    padding: 2px;
  }
  .slot-grid { gap: 2px; }
  .cell { border-radius: 4px; }

  /* Win ribbon tighter */
  .win-ribbon { font-size: .65rem; padding: 2px 10px; }

  /* Control bar: stack into 2 rows */
  .control-bar {
    flex-wrap: wrap;
    height: auto;
    min-height: 64px;
    padding: 4px;
    gap: 4px;
    row-gap: 3px;
  }

  /* Row 1: left tools + spin button */
  .cb-left  { order: 1; flex: 0 0 auto; gap: 4px; }
  .cb-right { order: 2; flex: 0 0 auto; margin-left: auto; }

  /* Row 2: value boxes span full width */
  .cb-center {
    order: 3;
    flex: 0 0 100%;
    justify-content: space-around;
    gap: 3px;
  }

  .val-box { min-width: 0; padding: 2px 6px; }
  .vb-label { font-size: .5rem; }
  .vb-val   { font-size: clamp(.7rem, 3.5vw, .95rem); }

  .btn-sys {
    width: 36px; height: 36px;
    font-size: .75rem;
  }
  .btn-bonus {
    font-size: .65rem;
    padding: 4px 8px;
  }
  .btn-spin {
    padding: 9px 18px;
    font-size: 1.1rem;
    letter-spacing: 1px;
  }
  .btn-bet { width: 24px; height: 20px; font-size: .7rem; }

  /* FS HUD tighter */
  .fsh-inner {
    padding: 5px 10px 7px;
    min-width: 220px;
    gap: 6px;
  }
  .fsh-win-label { font-size: .9rem; }
  .fsh-win-amt   { font-size: 1.1rem; }
  .fsh-bot       { font-size: .56rem; }
  .fsh-coins     { font-size: .9rem; }

  /* Big win overlay: fit on phone */
  .bwl-tier   { font-size: clamp(1.4rem, 6vw, 3rem); }
  .bwl-amount { font-size: clamp(1.8rem, 8vw, 5rem); }
  .bwl-detail { font-size: clamp(.7rem, 2.5vw, 1.2rem); }

  /* Paytable modal: full screen on phone */
  .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 12px 12px 0 0;
    margin-top: auto;
    margin-bottom: 0;
    padding: .8rem;
  }
  .modal-title { font-size: .9rem; }
  .pt-col-hdr,
  .pt-pay-row  { grid-template-columns: 130px repeat(5,36px) 48px; font-size: .5rem; }
  .pt-sym-img  { width: 26px; height: 26px; }
  .pt-sym-name { font-size: .58rem; }
  .pt-pay-val  { font-size: .62rem; }
  .pt-meta-grid { grid-template-columns: repeat(2,1fr); }

  /* FS Summary popup: fit phone */
  .fss-popup { width: min(95vw, 420px); margin-top: 60px; }
  .fss-congrats { font-size: clamp(1.5rem, 7vw, 2.4rem); }
  .fss-youwon   { font-size: clamp(1.2rem, 5vw, 1.8rem); }
  .fss-amount   { font-size: clamp(1.1rem, 5vw, 2rem); }
  .fss-spins    { font-size: clamp(1rem, 4.5vw, 1.6rem); }
  .fss-animal   { height: 80px; }
  .fss-animal--mid { height: 90px; }

  /* Bonus cinematic */
  .bonus-cinema { padding: 1rem; }
  .bc-count { font-size: clamp(2rem, 12vw, 5rem); }
}

/* ── Small phones (≤ 400px) ─────────────────── */
@media (max-width: 400px) {
  .logo-top    { font-size: .5rem; }
  .logo-bottom { font-size: 1rem; }
  .title-bar   { padding: .05rem 0; }

  .slot-grid { gap: 1px; }
  .cell { border-radius: 3px; }

  .pt-col-hdr,
  .pt-pay-row { grid-template-columns: 100px repeat(5,30px) 40px; }
  .pt-meta-grid { grid-template-columns: 1fr 1fr; }
  .pt-stat-grid { grid-template-columns: 1fr 1fr; }

  .fss-animals { top: -60px; }
  .fss-animal  { height: 65px; }
  .fss-animal--mid { height: 75px; }
}

/* ── Landscape phone (short + wide) ─────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .title-bar { display: none; }

  .play-area { padding: 2px 4px 1px; }

  .left-panel {
    width: clamp(80px, 10vw, 130px);
    padding: 4px;
  }

  .right-panel { display: none; }

  .control-bar {
    height: auto;
    min-height: 50px;
    padding: 3px 6px;
  }

  .btn-spin { padding: 7px 16px; font-size: 1rem; }

  .vb-label { font-size: .42rem; }
  .vb-val   { font-size: .72rem; }

  .bwl-tier   { font-size: 1.5rem; }
  .bwl-amount { font-size: 2.5rem; }
}