/* =====================================================================
   BIG TICKET GOLD PUSH — verified brand palette
   Source: assets/brand/BRAND-REFERENCE.md (pulled from live bigticket.ae
   production CSS, 2026-07-29). Do not hand-tune these away from the
   verified values without updating that file too.
===================================================================== */
:root {
  --bt-red-bright:     #D52930;
  --bt-red-main:       #C60400;
  --bt-red-shadow:     #590714;
  --bt-gold-highlight: #FFBA3A;
  --bt-gold-main:      #ED9004;
  --bt-gold-shadow:    #80520B;
  --bt-near-black:     #1C1401;
  --bt-warm-white:     #FFF9EE;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width:100%; height:100%; overflow:hidden; background:var(--bt-near-black);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  touch-action:none; overscroll-behavior:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
button { font-family:inherit; border:none; cursor:pointer; background:none; }

#viewport-wrapper { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bt-near-black); }
#stage {
  position:relative; width:390px; height:693px;
  background:linear-gradient(180deg, var(--bt-red-shadow) 0%, var(--bt-near-black) 70%);
  overflow:hidden; transform-origin:center center;
}

/* =====================================================================
   SCREENS — #game-screen (core loop) and #reveal-screen (live-draw
   reveal) are siblings inside #stage; exactly one has .active at a time.
===================================================================== */
.screen { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity 0.4s ease; }
.screen.active { opacity:1; pointer-events:auto; }

/* =====================================================================
   GAME SCREEN — HUD
===================================================================== */
.hud { position:absolute; top:0; left:0; right:0; padding:10px 14px 6px; display:flex; flex-direction:column; align-items:center; gap:3px; z-index:5; }
.hud .logo-mark { height:28px; width:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }

.jackpot-strip { display:flex; flex-direction:column; align-items:center; gap:0; }
.jackpot-strip .jackpot-label { color:var(--bt-warm-white); font-size:8px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; opacity:0.75; }
.jackpot-strip .jackpot-amount { color:var(--bt-gold-highlight); font-weight:900; font-size:16px; letter-spacing:0.02em; text-shadow:0 2px 4px rgba(0,0,0,0.6); }

.hud-counters { display:flex; gap:8px; margin-top:1px; }
.counter { display:flex; align-items:center; gap:5px; background:rgba(0,0,0,0.4); border:1px solid rgba(255,186,58,0.35); border-radius:20px; padding:3px 9px; }
.counter .icon { width:11px; height:11px; border-radius:50%; }
.counter .value { color:var(--bt-warm-white); font-weight:800; font-size:11px; }

/* BIG DRAW ACCESS progress — secondary info, deliberately smaller/quieter than the
   jackpot and counters above it (hierarchy rule: weight/size signals importance —
   this is a status indicator, not a headline number). */
.draw-access { display:flex; align-items:center; gap:4px; margin-top:1px; opacity:0.85; }
.draw-access .da-label { color:var(--bt-warm-white); font-size:7px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; opacity:0.7; margin-right:1px; }
.draw-access .da-pip { width:7px; height:7px; border-radius:50%; background:#3A2227; border:1px solid rgba(255,186,58,0.3); transition:background 0.3s, box-shadow 0.3s; }
.draw-access .da-pip.reached { background:var(--bt-gold-highlight); box-shadow:0 0 5px rgba(255,186,58,0.6); border-color:var(--bt-gold-highlight); }

/* =====================================================================
   MACHINE VIEWPORT
===================================================================== */
.machine-frame {
  position:absolute; left:14px; top:150px; width:362px; height:386px;
  border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, var(--bt-red-shadow) 0%, var(--bt-near-black) 85%);
  border:2px solid rgba(255,186,58,0.25);
}
#game-canvas { position:absolute; left:20px; top:186px; }

.reward-toast {
  position:absolute; left:0; right:0; top:470px; text-align:center; z-index:6;
  font-weight:900; font-size:16px; color:var(--bt-gold-highlight); opacity:0; pointer-events:none;
  text-shadow:0 2px 6px rgba(0,0,0,0.7); letter-spacing:0.02em;
}
.reward-toast.show { animation:toastPop 0.8s ease-out; }
@keyframes toastPop {
  0% { opacity:0; transform:translateY(8px) scale(0.9); }
  25% { opacity:1; transform:translateY(0) scale(1.05); }
  35% { transform:translateY(0) scale(1); }
  75% { opacity:1; }
  100% { opacity:0; transform:translateY(-10px); }
}

/* =====================================================================
   INSERT-TICKET CTA
===================================================================== */
.tap-zone { position:absolute; left:0; right:0; top:552px; height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.tap-instruction { color:var(--bt-warm-white); font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; opacity:0.8; }
.tap-btn {
  width:230px; padding:15px; background:linear-gradient(180deg, var(--bt-gold-highlight) 0%, var(--bt-gold-main) 100%);
  color:var(--bt-near-black); font-weight:900; font-size:14px; letter-spacing:0.03em; border-radius:30px; text-align:center;
  transition:transform 0.1s; box-shadow:0 3px 0 var(--bt-gold-shadow);
}
.tap-btn:active { transform:scale(0.96) translateY(2px); box-shadow:0 1px 0 var(--bt-gold-shadow); }

/* =====================================================================
   REVEAL SCREEN — full-screen live-draw takeover
===================================================================== */
#reveal-screen {
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:36px 20px 28px;
  background:radial-gradient(ellipse at 50% 20%, var(--bt-red-bright) 0%, var(--bt-red-shadow) 55%, var(--bt-near-black) 100%);
}
.reveal-logo { height:40px; width:auto; margin-bottom:14px; filter:drop-shadow(0 3px 8px rgba(0,0,0,0.5)); }
.reveal-headline {
  color:var(--bt-warm-white); font-weight:900; font-size:20px; text-align:center; text-transform:uppercase;
  letter-spacing:0.02em; line-height:1.25; margin-bottom:18px; text-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.reveal-drum-area {
  width:100%; max-width:300px; aspect-ratio:1/0.82; border-radius:16px; margin-bottom:18px;
  background:rgba(0,0,0,0.35); border:2px solid rgba(255,186,58,0.4); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.reveal-drum-area canvas { position:absolute; inset:0; }
.reveal-jackpot { display:flex; flex-direction:column; align-items:center; gap:2px; margin-bottom:10px; }
.reveal-jackpot .rj-label { color:var(--bt-warm-white); font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; opacity:0.85; }
.reveal-jackpot .rj-amount { color:var(--bt-gold-highlight); font-weight:900; font-size:30px; letter-spacing:0.01em; text-shadow:0 3px 10px rgba(0,0,0,0.6); }
.reveal-drawdate { color:var(--bt-warm-white); font-size:12px; font-weight:600; opacity:0.9; margin-bottom:20px; }
.reveal-drawdate strong { color:var(--bt-gold-highlight); font-weight:800; }

.reveal-cta {
  width:260px; padding:16px; background:linear-gradient(180deg, var(--bt-gold-highlight) 0%, var(--bt-gold-main) 100%);
  color:var(--bt-red-shadow); font-weight:900; font-size:14px; letter-spacing:0.03em; border-radius:30px; text-align:center;
  box-shadow:0 3px 0 var(--bt-gold-shadow); transition:transform 0.1s; margin-top:auto;
}
.reveal-cta:active { transform:scale(0.96) translateY(2px); box-shadow:0 1px 0 var(--bt-gold-shadow); }
.reveal-legal { color:var(--bt-warm-white); opacity:0.5; font-size:8px; text-align:center; margin-top:10px; line-height:1.4; }

/* =====================================================================
   DEV PANEL
===================================================================== */
/* Hidden by default so the deployed link shows the real design.
   Add ?dev=1 to the URL to show it (js/game.js sets .dev-visible). */
#dev-panel {
  position:absolute; bottom:0; left:0; right:0; z-index:999;
  background:rgba(0,0,0,0.78); color:#4dff4d; font-family:monospace; font-size:9px;
  padding:5px 8px; display:none; justify-content:space-between; align-items:center;
}
#dev-panel.dev-visible { display:flex; }
#dev-panel button { color:#4dff4d; border:1px solid #4dff4d; font-size:8px; padding:2px 6px; margin-left:4px; }