/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; overflow: hidden; }
/* Symbol tier colours – used on .sym-cell */
.sym-low    { color: #c8bfa0; }                           /* 1, 5       – muted cream */
.sym-mid    { color: #e2d08a; }                           /* 10, 16, 18 – warm gold */
.sym-high   { color: #e2b04a; text-shadow: 0 0 8px #e2b04a88; }   /* 20, D16     */
.sym-dhigh  { color: #f4a030; text-shadow: 0 0 12px #f4a03099; }  /* D20         */
.sym-premium{ color: #e07040; text-shadow: 0 0 14px #e0704099; }  /* T19         */
.sym-top    { color: #ff4444; text-shadow: 0 0 18px #ff444488, 0 0 30px #ff222244; } /* T20 */
.sym-bull   { color: #27ae60; text-shadow: 0 0 16px #27ae6099, 0 0 28px #27ae6044; } /* 🎯 */
.sym-win    { animation: sym-pulse 0.5s ease 2; }

/* ===== Per-symbol dartboard colours (override tier) ===== */
/* Low singles – each gets a distinct colour */
.sym-cell.sym-id-1  { color: #c8a860; text-shadow: 0 0 6px #c8a86055; }  /* warm amber */
.sym-cell.sym-id-5  { color: #3ec8a0; text-shadow: 0 0 6px #3ec8a055; }  /* teal       */
.sym-cell.sym-id-10 { color: #5a9fe0; text-shadow: 0 0 6px #5a9fe055; }  /* steel blue */
.sym-cell.sym-id-16 { color: #c06030; text-shadow: 0 0 6px #c0603055; }  /* burnt orange */
.sym-cell.sym-id-18 { color: #a060d0; text-shadow: 0 0 6px #a060d055; }  /* violet     */
/* High single – gold */
.sym-cell.sym-id-20 { color: #e8c030; text-shadow: 0 0 10px #e8c03088; }
/* Double ring – green */
.sym-cell.sym-id-D16 { color: #25b855; text-shadow: 0 0 12px #25b85599; }
.sym-cell.sym-id-D20 { color: #32e060; text-shadow: 0 0 14px #32e060aa; }
/* Triple ring – red */
.sym-cell.sym-id-T19 { color: #e03020; text-shadow: 0 0 14px #e0302099; }
.sym-cell.sym-id-T20 { color: #ff1818; text-shadow: 0 0 18px #ff1818bb, 0 0 32px #ff000055; }
/* Bullseye – vibrant green */
.sym-cell.sym-id-BULL { color: #22d058; text-shadow: 0 0 16px #22d058aa, 0 0 30px #22d05855; }

:root {
  --bg:       #0f1117;
  --panel:    #1a1d26;
  --border:   #2e3244;
  --red:      #c0392b;
  --green:    #27ae60;
  --cream:    #f0e6c8;
  --white:    #ffffff;
  --gold:     #e2b04a;
  --muted:    #7a7f94;
  --radius:   10px;
  --shadow:   0 4px 20px rgba(0,0,0,0.5);
  --row-h:    clamp(50px, min(calc((70vh - 100px) / 3), calc((100vw - 80px) / 5)), 160px);
}

body {
  background-color: #0c0a07;
  background-image:
    /* Edge vignette */
    radial-gradient(ellipse 130% 110% at 50% 50%,
      transparent 25%, rgba(0,0,0,0.60) 100%),
    /* Dartboard ghost – top right (pub wall) */
    radial-gradient(circle 220px at 89% 11%,
      rgba(22,68,22,0.28) 0%, rgba(22,68,22,0.14) 35%, transparent 65%),
    radial-gradient(circle 130px at 89% 11%,
      rgba(175,22,22,0.18) 0%, transparent 45%),
    radial-gradient(circle 55px  at 89% 11%,
      rgba(22,68,22,0.30) 0%, transparent 55%),
    radial-gradient(circle 18px  at 89% 11%,
      rgba(230,30,30,0.35) 0%, transparent 100%),
    /* Dartboard ghost – bottom left (smaller, distant) */
    radial-gradient(circle 110px at 9% 91%,
      rgba(22,68,22,0.15) 0%, transparent 60%),
    radial-gradient(circle 55px  at 9% 91%,
      rgba(175,22,22,0.10) 0%, transparent 50%),
    /* Warm depth – broad soft colour washes, no hard lines */
    linear-gradient(170deg,
      rgba(70,38,8,0.18)  0%,
      transparent         45%,
      rgba(45,22,4,0.14)  100%),
    linear-gradient(8deg,
      transparent         20%,
      rgba(90,48,10,0.10) 55%,
      transparent         80%),
    /* Base background image */
    url('img/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--cream);
  font-family: 'Segoe UI', system-ui, sans-serif;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
}

#app {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== Header Zone ===== */
header#header-zone {
  height: 15vh;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--border);
  background: rgba(8,9,14,0.6);
}

#logo {
  height: 80%;
  max-height: 80%;
  width: auto;
  object-fit: contain;
}

/* ===== Main Zone ===== */
main#main-zone {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
}

/* ===== Footer Zone ===== */
footer#footer-zone {
  height: 15vh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  position: relative;
  border-top: 1px solid var(--border);
  background: rgba(8,9,14,0.6);
  padding: 0.2rem;
}

/* ===== Header ===== */
header {
  text-align: center;
  padding: 0.4rem 0 0.2rem;
}

#logo {
  max-height: 80px;
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* ===== Bonus Banner ===== */
#bonus-banner {
  background: linear-gradient(135deg, #1a2e1a, #0f1e0f);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  text-align: center;
  box-shadow: 0 0 24px rgba(39,174,96,0.3);
  animation: pulse-green 2s ease-in-out infinite;
}

#bonus-banner > span {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.4rem;
}

#bonus-info {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--cream);
}

#bonus-info strong {
  color: var(--gold);
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 16px rgba(39,174,96,0.3); }
  50%       { box-shadow: 0 0 32px rgba(39,174,96,0.6); }
}

/* ===== T20 Fever Banner ===== */
#t20-fever-banner {
  background: linear-gradient(135deg, #2e1006, #1e0808);
  border: 2px solid #ff4020;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  text-align: center;
  box-shadow: 0 0 24px rgba(255,64,32,0.3);
  animation: pulse-red 1.5s ease-in-out infinite;
}

#t20-fever-banner > span {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ff6040;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.4rem;
}

#t20-fever-info {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--cream);
}

#t20-fever-info strong { color: #ffaa60; }

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 16px rgba(255,64,32,0.3); }
  50%       { box-shadow: 0 0 40px rgba(255,64,32,0.75); }
}

/* ===== Machine wrapper (payline labels + reels) ===== */
#machine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* ===== Payline labels ===== */
#payline-labels-left,
#payline-labels-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: space-around;
  height: calc(var(--row-h) * 3 + 4px); /* match reel height */
}

.pl-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--border);
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.pl-label.active { background: var(--green); color: #fff; }

/* ===== Reels container ===== */
#reels-container {
  display: flex;
  gap: 6px;
  position: relative;
}

/* ===== Payline SVG overlay ===== */
#payline-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}

#payline-svg polyline {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: line-pulse 0.65s ease-in-out infinite alternate;
}

@keyframes line-pulse {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

/* Per-line cell highlight colours (background tint + inner glow) */
.win-line-0 { background: rgba(240,192,48,0.20); box-shadow: inset 0 0 10px rgba(240,192,48,0.55); }
.win-line-1 { background: rgba(64,160,255,0.20); box-shadow: inset 0 0 10px rgba(64,160,255,0.55); }
.win-line-2 { background: rgba(48,208,96,0.20);  box-shadow: inset 0 0 10px rgba(48,208,96,0.55);  }
.win-line-3 { background: rgba(255,80,48,0.20);  box-shadow: inset 0 0 10px rgba(255,80,48,0.55);  }
.win-line-4 { background: rgba(192,80,255,0.20); box-shadow: inset 0 0 10px rgba(192,80,255,0.55); }
.win-line-5 { background: rgba(255,128,192,0.20); box-shadow: inset 0 0 10px rgba(255,128,192,0.55); }
.win-line-6 { background: rgba(64,224,224,0.20);  box-shadow: inset 0 0 10px rgba(64,224,224,0.55);  }
.win-line-7 { background: rgba(255,153,0,0.20);   box-shadow: inset 0 0 10px rgba(255,153,0,0.55);   }
.win-line-8 { background: rgba(160,255,96,0.20);  box-shadow: inset 0 0 10px rgba(160,255,96,0.55);  }
.win-line-9 { background: rgba(255,68,136,0.20);  box-shadow: inset 0 0 10px rgba(255,68,136,0.55);  }
.bonus-cell { background: rgba(39,174,96,0.22);  box-shadow: inset 0 0 10px rgba(39,174,96,0.6);   }

/* One reel column – clips to 3 visible rows */
.reel-outer {
  width: var(--row-h);
  height: calc(var(--row-h) * 3);
  overflow: hidden;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  position: relative;
}

/* Horizontal separator lines between rows */
.reel-outer::before,
.reel-outer::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--border);
  z-index: 2;
  pointer-events: none;
}
.reel-outer::before { top: calc(var(--row-h) - 1px); }
.reel-outer::after  { top: calc(var(--row-h) * 2 - 1px); }

/* The scrolling strip: SPIN_EXTRA + 3 visible + 1 padding symbols tall */
.reel-strip {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
}

/* Individual symbol cell on the strip */
.sym-cell {
  height: var(--row-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--row-h) * 0.30);
  font-weight: 900;
  user-select: none;
  transition: background 0.2s;
  flex-shrink: 0;
}

.sym-cell.win-cell {
  background: rgba(39,174,96,0.12);
  animation: sym-pulse 0.5s ease 2;
}

/* Image symbols (D16, D20, T19, T20, BULL) – dartboard as bg */
.sym-has-img {
  position: relative;
}

.sym-has-img::before {
  content: '';
  position: absolute;
  inset: 6px;
  background: url('img/dartboard.png') center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

.sym-img-label {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 8px rgba(0,0,0,1), 0 0 16px rgba(0,0,0,0.8);
}

.sym-cell.bonus-cell {
  background: rgba(39,174,96,0.18);
  animation: sym-pulse 0.4s ease 3;
}

@keyframes sym-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}

/* Winning reel border */
.reel-outer.reel-win   { border-color: var(--green); box-shadow: 0 0 16px rgba(39,174,96,0.4); }
.reel-outer.reel-bonus { border-color: var(--gold);  box-shadow: 0 0 20px rgba(226,176,74,0.4); }
.reel-outer.reel-fever { border-color: #ff4020; box-shadow: 0 0 18px rgba(255,64,32,0.5); }

.t20-sticky-overlay {
  background: var(--panel) !important;
  border: 2px solid #ff5530 !important;
  box-shadow: inset 0 0 14px rgba(255,85,48,0.45);
  border-radius: 4px;
}

/* Middle-row highlight bar (active win line) */
.reel-outer .win-line-bar {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 1;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

/* ===== Win Flash ===== */
#win-flash {
  text-align: center;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

/* Reserve layout space permanently – no jump when win appears */
#win-flash.hidden {
  display: flex !important;
  visibility: hidden;
  opacity: 0;
}

#win-flash-text {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.08em;
  animation: flash-in 0.4s ease;
}

@keyframes flash-in {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ===== Stats strip (thin secondary info bar) ===== */
#stats-strip {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.stat-chip {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.sc-label {
  font-size: 0.62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sc-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cream);
}

/* ===== Autoplay row ===== */
#autoplay-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.ap-label {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#autoplay-counts {
  display: flex;
  gap: 0.3rem;
}

.ap-btn {
  background: var(--border);
  border: 1px solid #3a3f56;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ap-btn:hover:not(:disabled) { background: #2e3244; color: var(--cream); }
.ap-btn:disabled { opacity: 0.35; cursor: default; }

#autoplay-stop-btn {
  background: #3a0f0f;
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}
#autoplay-stop-btn:hover { background: #5a1818; }

/* ===== Control Panel (footer) ===== */
#control-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

/* ===== Bottom Bar ===== */
#bottom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: linear-gradient(180deg, #1c1f2e 0%, #0d0f18 100%);
  border: 1px solid #2e3244;
  border-radius: 60px;
  padding: 0.65rem 1.1rem;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Display panels (CREDITS / BET / TOTAL BET) */
.display-panel {
  background: #07080f;
  border: 1px solid #1e2136;
  border-radius: 8px;
  padding: 0.3rem 0.9rem;
  min-width: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.7);
}

.dp-label {
  font-size: 0.55rem;
  font-weight: 600;
  color: #5a6080;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.dp-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dp-gold { color: var(--gold); }

/* Round buttons – shared base */
.round-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-weight: 900;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.08s;
  position: relative;
  flex-shrink: 0;
}
.round-btn::after {           /* inner highlight arc */
  content: '';
  position: absolute;
  top: 14%;
  left: 20%;
  width: 42%;
  height: 26%;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  pointer-events: none;
}
.round-btn:active:not(:disabled) { transform: scale(0.93); filter: brightness(0.88); }
.round-btn:disabled { opacity: 0.38; cursor: default; }

/* Bet − (red) */
.btn-minus {
  background: radial-gradient(circle at 38% 38%, #d94040, #7a1010);
  box-shadow: 0 4px 12px rgba(150,20,20,0.55),
              0 1px 0 rgba(255,255,255,0.12) inset;
  color: #fff;
}
.btn-minus:hover:not(:disabled) { box-shadow: 0 5px 18px rgba(200,30,30,0.6), 0 1px 0 rgba(255,255,255,0.15) inset; }

/* Bet + (silver/blue-grey) */
.btn-plus {
  background: radial-gradient(circle at 38% 38%, #9098b8, #404868);
  box-shadow: 0 4px 12px rgba(60,70,110,0.55),
              0 1px 0 rgba(255,255,255,0.2) inset;
  color: #fff;
}
.btn-plus:hover:not(:disabled) { box-shadow: 0 5px 18px rgba(80,90,140,0.6), 0 1px 0 rgba(255,255,255,0.25) inset; }

/* Spin (green, larger) */
.btn-spin {
  width: 70px;
  height: 70px;
  background: radial-gradient(circle at 38% 35%, #50e050, #1a8a1a);
  box-shadow: 0 5px 18px rgba(30,140,30,0.6),
              0 1px 0 rgba(255,255,255,0.2) inset,
              0 0 0 3px rgba(40,160,40,0.25);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn-spin:hover:not(:disabled) {
  box-shadow: 0 6px 24px rgba(40,180,40,0.7),
              0 1px 0 rgba(255,255,255,0.25) inset,
              0 0 0 4px rgba(50,200,50,0.3);
}
.btn-spin:disabled {
  background: radial-gradient(circle at 38% 35%, #2a3a2a, #111a11);
  box-shadow: none;
  color: #3a5a3a;
}

/* ===== Game Over Panel ===== */
#game-over-panel {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(30,16,16,0.97);
  border: 2px solid var(--red);
  border-radius: 0;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
#game-over-panel p { font-size: 1.1rem; color: var(--cream); }

#reset-btn, #new-game-btn {
  background: transparent;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-size: 0.78rem;
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
#reset-btn:hover, #new-game-btn:hover { border-color: var(--cream); color: var(--cream); }

#reset-area { position: absolute; bottom: 0.3rem; right: 0.6rem; }

#t20-fever-area {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
}

#t20-fever-btn {
  background: var(--panel);
  border: 1px solid #663020;
  color: #885040;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

#t20-fever-btn.t20-fever-active {
  background: linear-gradient(135deg, #3a1008, #200808);
  border-color: #ff4020;
  color: #ff7050;
  box-shadow: 0 0 10px rgba(255,64,32,0.6);
  animation: pulse-red 1.5s ease-in-out infinite;
}

/* ===== Paytable ===== */
#paytable {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}
#paytable summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  user-select: none;
}
#paytable summary:hover { color: var(--cream); }
#paytable table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  font-size: 0.8rem;
}
#paytable th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
#paytable td { padding: 0.25rem 0.4rem; color: var(--cream); border-bottom: 1px solid rgba(46,50,68,0.4); }
.bonus-row td  { color: var(--gold); }
.feature-row td { color: var(--green); }

/* ===== Footer ===== */
footer {
  text-align: center;
  font-size: 0.7rem;
  color: var(--muted);
  padding-bottom: 1rem;
}

/* ===== Hamburger button ===== */
#hamburger-btn {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--cream);
  font-size: 1.2rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
#hamburger-btn:hover { background: #252840; }

/* ===== Side menu ===== */
#side-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
}
#side-menu.hidden { display: none !important; }

#side-menu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
}

#side-menu-panel {
  position: relative;
  z-index: 1;
  width: 300px;
  max-width: 88vw;
  height: 100%;
  background: #13151f;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.side-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.side-menu-header h2 {
  color: var(--gold);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#side-menu-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#side-menu-close:hover { color: var(--cream); border-color: var(--cream); }

.paytable-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.paytable-table th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.paytable-table td { padding: 0.22rem 0.4rem; color: var(--cream); border-bottom: 1px solid rgba(46,50,68,0.4); }
.pt-bonus td  { color: var(--gold); }
.pt-feature td { color: var(--green); }

.menu-disclaimer {
  margin-top: auto;
  padding-top: 0.8rem;
  font-size: 0.68rem;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ===== Utilities ===== */
.hidden { display: none !important; }

/* ===== Responsive ===== */
@media (max-width: 580px) {
  /* header h1 removed (logo used) */
  /* reel width driven by --row-h formula */
  .sym-cell { font-size: 1.1rem; }
  #bottom-bar { padding: 0.5rem 0.6rem; gap: 0.35rem; border-radius: 40px; }
  .display-panel { min-width: 68px; padding: 0.25rem 0.5rem; }
  .dp-value { font-size: 1.05rem; }
  .round-btn { width: 46px; height: 46px; font-size: 1.1rem; }
  .btn-spin  { width: 58px; height: 58px; font-size: 0.68rem; }
  #stats-strip { gap: 0.8rem; }
}