/* ══════════════════════════════════════════════════════════════════════════
   iGaming theme tokens + shared modal primitives.
   Reusable across games that share the Info/Menu UI.
   Game-specific components (spin/menu/info bottom controls) live in style.css.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — neutralised to near-black across the UI (was blue-tinted
     #06,06,28; #14,14,20). Keeping a tiny warm-cool drift via the alpha
     mixed surfaces but no overt blue. */
  --c-bg:            #0a0a0c;
  --c-bg-deep:       #0a0a0c;
  --c-surface:       #14141a;
  --c-surface-soft:  rgba(255,255,255,0.05);

  /* Text */
  --c-text:          #ffffff;
  --c-text-muted:    rgba(255,255,255,0.55);
  --c-text-dim:      rgba(255,255,255,0.35);
  --c-text-subtle:   rgba(255,255,255,0.7);

  /* Borders / dividers */
  --c-border:        rgba(255,255,255,0.1);
  --c-border-strong: rgba(255,255,255,0.15);

  /* Accent — gold */
  --c-accent:        #ffd055;
  --c-accent-strong: #f0a500;
  --c-accent-deep:   #b87800;
  --c-accent-soft:   #ffe08a;

  /* Semantic */
  --c-success:       #4ade80;
  --c-danger:        #f87171;
  --c-info:          #93c5fd;
  --c-warning:       #ffd055;

  /* Paytable tier colors */
  --c-gold:          #ffd055;
  --c-yellow:        #ffe08a;
  --c-purple:        #c084fc;
  --c-green:         #4ade80;
  --c-red:           #f87171;
  --c-blue:          #93c5fd;

  /* Line-grid cells (Lines info) */
  --c-cell-off:      #3a3a3a;
  --c-cell-on:       #f0c43a;

  /* Modal: backdrop darker so the game behind recedes; sheet itself
     near-black neutral (not the blue-tinted app bg) so it reads as a
     solid dark panel rather than a translucent layer of the game. */
  --c-modal-overlay: rgba(0, 0, 0, 0.7);
  --c-modal-sheet:   #0a0a0c;
  --modal-blur:      18px;
  --modal-radius:    24px;
  --modal-max-w:     480px;

  /* Shadows */
  --shadow-sm:       0 2px 4px rgba(0,0,0,0.35);
  --shadow-md:       0 4px 12px rgba(0,0,0,0.4);
  --shadow-glow:     0 4px 16px rgba(240,165,0,0.4);

  /* ── Universal slot-UI tokens (shared across games; override per-game) ──
     These drive the new controls/menu template. Individual games can
     re-map them in their own stylesheet to re-theme without touching
     component CSS. */
  --ui-surface:        rgba(22, 22, 26, 0.72);     /* glass pill/tile bg — neutral, not blue */
  --ui-surface-hover:  rgba(38, 38, 44, 0.82);
  --ui-surface-press:  rgba(14, 14, 16, 0.85);
  --ui-stroke:         rgba(255, 255, 255, 0.10);
  --ui-stroke-strong:  rgba(255, 255, 255, 0.22);
  --ui-icon:           #ffffff;
  --ui-icon-muted:     rgba(255, 255, 255, 0.75);
  --ui-label:          rgba(255, 255, 255, 0.55);
  --ui-value:          #ffffff;

  /* Spin button — large circular CTA (white icon on dark, matches
     Hacksaw/Stakelogic reference). Bg is nearly solid so the pill sitting
     behind (–/+ container) is fully hidden inside the spin circle. A
     solid-dark halo ring then masks the pill's top/bottom border from
     cutting visibly across the spin area. */
  --ui-spin-size:      100px;
  /* Fully opaque — so anything behind SPIN (pill seam, reels) is
     completely hidden. Previously at 0.96 alpha which leaked a faint
     vertical line from the pill split through the circle. */
  --ui-spin-bg:        rgb(10, 10, 12);
  --ui-spin-fg:        #ffffff;
  --ui-spin-stroke:    rgba(255, 255, 255, 0.22);
  --ui-spin-moat:      rgb(10, 10, 12);

  /* Footer gradient (fade from transparent reels → dark bottom) */
  --ui-footer-fade:    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0.95) 100%);
}

/* ── Shared modal primitives ────────────────────────────────────────────── */
/* z-index 1000 pins modals above game effects — canvas-confetti defaults
   to z-index 100 and the per-reel fire canvases live inside .reels-area
   (z-index 2), so 1000 clears both comfortably. */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--c-modal-overlay);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-sheet {
  background: var(--c-modal-sheet);
  -webkit-backdrop-filter: blur(var(--modal-blur));
  backdrop-filter: blur(var(--modal-blur));
  border-radius: var(--modal-radius) var(--modal-radius) 0 0;
  width: 100%;
  max-width: var(--modal-max-w);
  padding: 24px 24px 40px;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.modal-header {
  display: flex; align-items: center;
  margin-bottom: 20px;
}
/* Title sits flex:1 + centered. Left padding mirrors the close button's
   width on the right so the title is visually centered inside the row. */
.modal-title {
  flex: 1;
  text-align: center;
  padding-left: 28px;
  color: var(--c-text);
  font-size: 20px;
  font-weight: 700;
}
.modal-close {
  width: 28px; height: 28px;
  color: var(--c-text-muted);
  font-size: 28px; line-height: 1;
  background: none; border: none; cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}