:root {
  --bg-primary: #000000;
  --bg-card: #0d0d0d;
  --bg-secondary: #1a1a1a;
  --orange-light: #ffb347;
  --orange: #FF6A00;
  --orange-dark: #e85d00;
  --gold: #FFAA00;
  --gold-dark: #c84e00;
  --text-white: #ffffff;
  --text-muted: #9e9e9e;
  --text-gray: #aaaaaa;
  --border-neon: #261C15;
  --border-dark: #2a2a2a;
  --reel-bg: #ede4d3;
  --reel-text: #1a1a1a;
  --neon-glow: 0 0 15px rgba(255, 106, 0, 0.5), 0 0 30px rgba(255, 170, 0, 0.2);
  --neon-glow-strong: 0 0 30px rgba(255, 106, 0, 0.7), 0 0 60px rgba(255, 170, 0, 0.3);
  --glow-pulse: 0 0 20px rgba(255, 106, 0, 0.4);
  --font-display: 'Montserrat', 'Arial Black', sans-serif;
  --font-script: 'Pacifico', 'Brush Script MT', cursive;
  --font-body: 'Poppins', 'Arial', sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height:100%; overflow:hidden;
  font-family:var(--font-body);
  background:var(--bg-primary);
  color:var(--text-white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--orange); text-decoration:none; }
img { max-width:100%; display:block; }

.app-wrapper {
  max-width:480px;
  margin:0 auto;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}
.container { max-width:480px; margin:0 auto; padding:0 20px; }

/* ─── LOGO ──────────────────────────────────── */
.logo-ganamatik {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
}
.logo-ganamatik .logo-img {
  display:block;
  width:400px;
  max-width:100%;
  height:auto;
}
.logo-ganamatik .logo-main {
  font-family:var(--font-display);
  font-size:28px;
  font-weight:800;
  text-transform:uppercase;
  background:linear-gradient(180deg,#ffd27a 0%,#ff7a00 50%,#c84e00 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.logo-ganamatik .logo-main .reg {
  font-size:10px;
  vertical-align:super;
  -webkit-text-fill-color:#ffd27a;
  color:#ffd27a;
}
.logo-ganamatik .logo-tagline {
  font-family:var(--font-script);
  font-size:14px;
  color:var(--text-white);
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:-2px;
}
.logo-ganamatik .logo-tagline .star {
  color:var(--gold);
  font-size:12px;
  animation:twinkle 1.5s ease-in-out infinite;
}
.logo-ganamatik .logo-tagline .star:nth-child(1) { animation-delay:0s; }
.logo-ganamatik .logo-tagline .star:nth-child(3) { animation-delay:0.75s; }
@keyframes twinkle {
  0%,100% { opacity:0.4; transform:scale(0.8); }
  50% { opacity:1; transform:scale(1.2); }
}

/* ─── HEADER ────────────────────────────────── */
.app-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:6px 12px;
  padding:6px 14px;
  background:var(--bg-primary);
  border:2px solid var(--orange);
  border-radius:100px;
  box-shadow:var(--neon-glow);
  animation:headerGlow 2s ease-in-out infinite alternate;
}
@keyframes headerGlow {
  0% { box-shadow:0 0 10px rgba(255,106,0,0.3),0 0 20px rgba(255,170,0,0.1); }
  100% { box-shadow:0 0 25px rgba(255,106,0,0.7),0 0 40px rgba(255,170,0,0.2); }
}
.header-menu {
  background:none;border:none;
  color:var(--text-white);
  font-size:18px;
  cursor:pointer;
  padding:4px;
  display:flex;
  align-items:center;
}
.header-menu:hover { color:var(--orange); }
.header-logo { flex:1; text-align:center; }
.header-logo .logo-main { font-size:22px; }
.header-logo .logo-img { max-width:140px; }
.header-logo .logo-tagline { font-size:11px; }
.header-notif {
  width:30px;height:30px;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--text-white);
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s;
  position:relative;
}
.header-notif:hover {
  background:rgba(255,106,0,0.15);
  border-color:var(--orange);
  color:var(--orange);
}
.header-notif .notif-badge {
  position:absolute;
  top:-2px;right:-2px;
  width:16px;height:16px;
  background:#FF3B30;
  border:2px solid var(--bg-primary);
  border-radius:50%;
  font-size:8px;font-weight:800;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ─── MARCA PLACEHOLDER ─────────────────────── */
.marca-placeholder {
  margin:4px 12px;
  padding:6px 14px;
  border:1px solid var(--orange);
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:16px;
  background:rgba(255,106,0,0.03);
  box-shadow:var(--neon-glow);
}
.marca-placeholder .ph-icon {
  font-size:24px;
  color:rgba(255,106,0,0.4);
  flex-shrink:0;
  width:36px;height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(255,106,0,0.06);
}
.marca-placeholder .ph-text { flex:1; }
.marca-placeholder .ph-title {
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--text-white);
}
.marca-placeholder .ph-sub {
  font-size:10px;
  color:var(--gold);
  margin-top:2px;
}

/* ═══════════════════════════════════════════════
   CASINO SLOT MACHINE — Stake.com Style
   ═══════════════════════════════════════════════ */

.slot-machine {
  margin:6px 10px;
  flex:0 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.slot-screen {
  width:100%;
  border-radius:16px;
  background:linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 40%, #0a0a15 100%);
  border:2px solid rgba(255,140,0,0.25);
  box-shadow:
    0 0 40px rgba(255,106,0,0.15),
    inset 0 0 80px rgba(0,0,0,0.5);
  padding:14px;
  position:relative;
  overflow:hidden;
}

.slot-screen::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 30%, rgba(255,106,0,0.04) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

.slot-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  position:relative;
  z-index:1;
}

.reel-column {
  aspect-ratio:3/3.3;
  border-radius:10px;
  background:linear-gradient(180deg, #1e1e38, #151528);
  border:1.5px solid rgba(255,140,0,0.12);
  overflow:hidden;
  position:relative;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.4);
}

.reel-strip {
  position:relative;
  display:flex;
  flex-direction:column;
  will-change:transform;
}

.cell {
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  transition:border-color 0.3s, box-shadow 0.3s;
  position:relative;
  border-radius:8px;
  box-sizing:border-box;
}

.cell .cell-img {
  width:55%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.cell .cell-label {
  font-size:7px;
  font-weight:700;
  color:var(--text-gray);
  text-align:center;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:0.3px;
  max-width:90%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.cell.win {
  border:2px solid var(--gold) !important;
  box-shadow:0 0 20px rgba(255,170,0,0.5), inset 0 0 15px rgba(255,170,0,0.1) !important;
  animation:winPulse 0.6s ease-in-out 3;
}
.cell.win .cell-img {
  filter:drop-shadow(0 0 10px rgba(255,170,0,0.8)) brightness(1.15);
}
.cell.win .cell-label {
  color:var(--gold);
  font-weight:800;
}

@keyframes winPulse {
  0%,100% { box-shadow:0 0 15px rgba(255,170,0,0.4), inset 0 0 10px rgba(255,170,0,0.05); }
  50% { box-shadow:0 0 35px rgba(255,170,0,0.8), inset 0 0 25px rgba(255,170,0,0.2); }
}

/* Center-row payline overlay */
.slot-payline-overlay {
  position:absolute;
  top:50%;
  left:0;right:0;
  height:calc(33.33% - 15px);
  transform:translateY(-50%);
  border:2px solid transparent;
  border-left:none;border-right:none;
  border-image:linear-gradient(90deg, transparent 5%, rgba(255,140,0,0.3) 20%, rgba(255,170,0,0.5) 50%, rgba(255,140,0,0.3) 80%, transparent 95%) 1;
  pointer-events:none;
  z-index:5;
  border-radius:8px;
}

.slot-payline-overlay::before,
.slot-payline-overlay::after {
  content:'';
  position:absolute;
  top:50%;
  width:10px;height:10px;
  background:var(--orange);
  border-radius:50%;
  transform:translateY(-50%);
  box-shadow:0 0 8px rgba(255,106,0,0.8);
  border:1.5px solid var(--gold);
}
.slot-payline-overlay::before { left:-2px; }
.slot-payline-overlay::after { right:-2px; }

/* Win flash overlay */
.slot-win-flash {
  position:absolute;
  inset:0;
  background:rgba(255,170,0,0.08);
  z-index:4;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.2s;
}
.slot-win-flash.active {
  opacity:1;
  animation:flashWin 0.4s ease 6;
}
@keyframes flashWin { 0%,100% { opacity:0; } 50% { opacity:1; } }

/* ═══════════════════════════════════════════════
   CONTROLS & BUTTONS
   ═══════════════════════════════════════════════ */

.plays-indicator {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px 14px;
  margin:6px 12px;
  background:rgba(255,106,0,0.06);
  border:1px solid rgba(255,106,0,0.15);
  border-radius:10px;
  font-size:12px;
  font-weight:600;
  flex-shrink:0;
}
.plays-indicator .plays-count { color:var(--orange); font-size:20px; font-weight:800; }
.plays-indicator .history-btn {
  margin-left:auto;
  background:none;
  border:1px solid var(--border-dark);
  color:var(--text-gray);
  padding:4px 12px;
  border-radius:8px;
  font-size:10px;
  cursor:pointer;
  font-family:var(--font-body);
  transition:all 0.2s;
}
.plays-indicator .history-btn:hover { border-color:var(--orange); color:var(--orange); }
.demo-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 10px;
  background:rgba(255,106,0,0.12);
  border:1px solid rgba(255,106,0,0.25);
  border-radius:100px;
  font-size:10px;
  color:var(--orange);
  font-weight:600;
  text-transform:uppercase;
  flex-shrink:0;
}

.game-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:4px 12px;
  margin:0;
  flex-shrink:0;
}
.game-controls .btn-oval {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 14px;
  border-radius:8px;
  background:var(--bg-secondary);
  border:1px solid var(--border-dark);
  color:var(--text-gray);
  font-family:var(--font-body);
  font-size:10px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s;
  text-transform:uppercase;
  letter-spacing:0.5px;
  white-space:nowrap;
  text-decoration:none;
}
.game-controls .btn-oval i { font-size:13px; color:var(--orange); }
.game-controls .btn-oval:hover {
  border-color:var(--orange);
  color:var(--text-white);
  box-shadow:0 0 10px rgba(255,106,0,0.2);
}

/* SPIN BUTTON */
.spin-btn-container {
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0;
  position:relative;
}
.spin-btn {
  width:86px;height:86px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 28%,#ff8c1a,#c84e00);
  border:3px solid rgba(255,255,255,0.25);
  box-shadow:0 0 35px rgba(255,106,0,0.5),inset 0 -4px 10px rgba(0,0,0,0.35);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:all 0.15s;
  animation:spinBtnPulse 2s ease-in-out infinite;
  font-family:var(--font-body);
  flex-shrink:0;
}
@keyframes spinBtnPulse {
  0% { box-shadow:0 0 25px rgba(255,106,0,0.3),inset 0 -4px 10px rgba(0,0,0,0.35); transform:scale(1); }
  50% { box-shadow:0 0 55px rgba(255,106,0,0.7),0 0 90px rgba(255,170,0,0.2),inset 0 -4px 10px rgba(0,0,0,0.35); transform:scale(1.03); }
  100% { box-shadow:0 0 25px rgba(255,106,0,0.3),inset 0 -4px 10px rgba(0,0,0,0.35); transform:scale(1); }
}
.spin-btn::before {
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid rgba(255,170,0,0.2);
  animation:spinRing 4s linear infinite;
}
@keyframes spinRing {
  0% { transform:rotate(0deg); border-color:rgba(255,170,0,0.15); }
  50% { transform:rotate(180deg); border-color:rgba(255,106,0,0.5); }
  100% { transform:rotate(360deg); border-color:rgba(255,170,0,0.15); }
}
.spin-btn .spin-text {
  font-size:20px;
  font-weight:800;
  color:var(--text-white);
  text-transform:uppercase;
  line-height:1;
  text-shadow:0 2px 6px rgba(0,0,0,0.35);
}
.spin-btn .spin-sub {
  font-size:9px;
  color:rgba(255,255,255,0.75);
  text-transform:uppercase;
  margin-top:2px;
}
.spin-btn:disabled {
  opacity:0.35;
  cursor:not-allowed;
  animation:none;
}
.spin-btn:disabled::before { animation:none; }
.spin-btn:not(:disabled):hover {
  transform:scale(1.06);
  box-shadow:0 0 55px rgba(255,106,0,0.7),inset 0 -4px 10px rgba(0,0,0,0.35);
}
.spin-btn:not(:disabled):active { transform:scale(0.95); }

/* ─── BENEFITS ──────────────────────────────── */
.benefits-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:12px 16px;
}
.benefits-grid .benefit-item {
  text-align:center;
  padding:12px 4px;
  background:var(--bg-card);
  border:1px solid rgba(255,170,0,0.1);
  border-radius:14px;
  transition:border-color 0.2s;
}
.benefits-grid .benefit-item:hover { border-color:rgba(255,170,0,0.3); }
.benefits-grid .benefit-icon {
  font-size:22px;
  color:var(--gold);
  margin-bottom:4px;
  line-height:1;
}
.benefits-grid .benefit-title {
  font-family:var(--font-display);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--text-white);
  line-height:1.2;
}
.benefits-grid .benefit-sub {
  font-size:8px;
  color:var(--text-muted);
  margin-top:2px;
  line-height:1.2;
}

/* ─── FOOTER ────────────────────────────────── */
.footer-register {
  margin:4px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex-shrink:0;
}
.footer-register .btn-register {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:8px 16px;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  color:var(--bg-primary);
  border:none;
  border-radius:12px;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:0.5px;
  text-decoration:none;
  box-shadow:0 0 20px rgba(255,106,0,0.3);
  transition:all 0.2s;
}
.footer-register .btn-register:hover {
  box-shadow:0 0 30px rgba(255,106,0,0.5);
  transform:translateY(-1px);
}
.footer-register .btn-login {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:6px 16px;
  background:transparent;
  border:1px solid var(--border-dark);
  border-radius:12px;
  color:var(--text-gray);
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:all 0.2s;
}
.footer-register .btn-login:hover {
  border-color:var(--orange);
  color:var(--orange);
}
.footer-register .legal-text {
  font-size:9px;
  color:var(--text-muted);
  line-height:1.3;
  padding:2px 0;
  flex:1;
}
.footer-register .legal-text a {
  color:var(--text-muted);
  text-decoration:underline;
}
.footer-register .footer-row {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:4px;
}
.footer-register .footer-qr {
  flex-shrink:0;
  border:1px solid var(--border-dark);
  border-radius:8px;
  overflow:hidden;
  padding:4px;
  background:#fff;
}
.footer-register .footer-qr img { display:block; }

/* ─── BOTTOM NAV ────────────────────────────── */
.bottom-nav {
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:4px 0;
  padding-bottom:max(4px, env(safe-area-inset-bottom));
  background:var(--bg-primary);
  border-top:1px solid var(--gold);
  box-shadow:0 -2px 10px rgba(255,170,0,0.15);
  flex-shrink:0;
  z-index:100;
}
.bottom-nav .nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  background:none;
  border:none;
  color:var(--text-muted);
  font-size:9px;
  font-weight:500;
  cursor:pointer;
  padding:2px 8px;
  transition:color 0.2s;
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.bottom-nav .nav-item i { font-size:16px; transition:color 0.2s; }
.bottom-nav .nav-item.active { color:var(--orange); }
.bottom-nav .nav-item.active i { filter:drop-shadow(0 0 6px rgba(255,106,0,0.6)); }
.bottom-nav .nav-item:hover { color:var(--orange-light); }

/* ─── RESULT OVERLAY ────────────────────────── */
#resultArea {
  margin:6px 12px;
  flex-shrink:0;
  z-index:150;
}
.result-win {
  background:rgba(255,106,0,0.05);
  border:1px solid rgba(255,106,0,0.2);
  border-radius:10px;
  padding:12px 16px;
  text-align:center;
  animation:fadeIn 0.4s ease;
}
.result-win .result-emoji { font-size:28px; margin-bottom:4px; }
.result-win h3 { color:var(--orange); font-size:16px; font-weight:700; }
.result-lose {
  background:rgba(239,68,68,0.05);
  border:1px solid rgba(239,68,68,0.2);
  border-radius:10px;
  padding:12px 16px;
  text-align:center;
  animation:fadeIn 0.4s ease;
}
.result-lose .result-emoji { font-size:28px; margin-bottom:4px; }
.result-lose h3 { color:#ef4444; font-size:16px; font-weight:700; }
.prize-code {
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  color:var(--orange);
  letter-spacing:2px;
  padding:4px 12px;
  background:rgba(255,106,0,0.08);
  border:1px solid rgba(255,106,0,0.2);
  border-radius:6px;
  display:inline-block;
}
@keyframes fadeIn {
  0% { opacity:0; transform:translateY(10px); }
  100% { opacity:1; transform:translateY(0); }
}

/* ─── DEMO EXHAUSTED OVERLAY ────────────────── */
.demo-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.88);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:200;
  animation:fadeIn 0.3s ease;
}
.demo-overlay .demo-modal {
  text-align:center;
  padding:30px 20px;
  max-width:320px;
  width:100%;
}
.demo-overlay .demo-modal .demo-icon {
  font-size:56px;
  color:var(--orange);
  margin-bottom:12px;
}
.demo-overlay .demo-modal h2 {
  font-family:var(--font-display);
  font-size:20px;
  font-weight:800;
  margin-bottom:6px;
  color:var(--text-white);
}
.demo-overlay .demo-modal p {
  color:var(--text-gray);
  font-size:13px;
  margin-bottom:20px;
}

/* ─── CONFETTI ──────────────────────────────── */
#confetti-container {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  overflow:hidden;
}
.confetti-piece {
  position:absolute;
  top:-20px;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall {
  0% { transform:translateY(0) rotate(0deg) scale(1); opacity:1; }
  100% { transform:translateY(100vh) rotate(720deg) scale(0.5); opacity:0; }
}

/* ─── PRIZE MODAL ───────────────────────────── */
.prize-modal-overlay {
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s;
}
.prize-modal-overlay.active {
  opacity:1;
  pointer-events:all;
}
.prize-modal-box {
  background:var(--bg-card);
  border:2px solid var(--gold);
  border-radius:20px;
  padding:32px 24px;
  text-align:center;
  max-width:320px;
  width:90%;
  box-shadow:0 0 60px rgba(255,215,0,0.4);
  position:relative;
}
.prize-modal-box .prize-icon {
  font-size:56px;
  color:var(--gold);
  margin-bottom:12px;
}
.prize-modal-box h2 {
  color:var(--gold);
  font-size:22px;
  font-weight:800;
  margin-bottom:8px;
}
.prize-modal-box .prize-name {
  color:var(--text-white);
  font-size:18px;
  font-weight:700;
  margin:8px 0;
}
.prize-modal-box .prize-val {
  color:var(--orange);
  font-size:28px;
  font-weight:800;
  margin:4px 0 16px;
}
.prize-modal-box .prize-instruction {
  color:var(--text-gray);
  font-size:13px;
  margin-bottom:16px;
}

/* ─── BUTTONS ───────────────────────────────── */
.btn-gana {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:14px 32px;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  color:var(--bg-primary);
  border:none;
  border-radius:10px;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:all 0.2s;
  box-shadow:var(--neon-glow);
  text-decoration:none;
}
.btn-gana:hover { box-shadow:0 0 25px rgba(255,106,0,0.6); }
.btn-gana:disabled { opacity:0.5; cursor:not-allowed; box-shadow:none; }
.btn-gana-outline {
  background:transparent;
  border:2px solid var(--orange);
  color:var(--orange);
  box-shadow:none;
}
.btn-gana-outline:hover { background:rgba(255,106,0,0.1); box-shadow:none; }
.btn-gana-sm { padding:10px 20px; font-size:14px; width:auto; }
.alert-gana {
  background:rgba(255,106,0,0.1);
  border:1px solid rgba(255,106,0,0.3);
  border-radius:12px;
  padding:16px 20px;
  margin:16px 0;
  text-align:center;
}
.alert-gana h3 { color:var(--orange); font-size:18px; margin-bottom:4px; }
.alert-gana p { color:var(--text-gray); font-size:14px; }
.alert-error {
  background:rgba(239,68,68,0.1);
  border-color:rgba(239,68,68,0.3);
}
.alert-error h3, .alert-error i { color:#ef4444; }

/* ─── FORMS (registro, login, perfil) ───────── */
.form-card {
  background:var(--bg-card);
  border:1px solid var(--border-dark);
  border-radius:18px;
  padding:24px 20px;
  margin:16px 0;
}
.form-card label {
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.form-card input, .form-card select {
  width:100%;
  padding:12px 14px;
  background:#1a1a1a;
  border:1px solid var(--border-dark);
  border-radius:10px;
  font-family:var(--font-body);
  font-size:14px;
  color:var(--text-white);
  margin-bottom:16px;
  transition:border-color 0.2s;
}
.form-card input:focus, .form-card select:focus {
  border-color:var(--orange);
  outline:none;
  box-shadow:0 0 0 3px rgba(255,106,0,0.15);
}
.form-card input::placeholder { color:var(--text-gray); }

/* ─── PAGE ELEMENTS ─────────────────────────── */
.section-title {
  text-align:center;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:800;
  text-transform:uppercase;
  padding:16px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.section-title .star-icon { color:var(--gold); font-size:18px; }
.section-title .title-text {
  background:linear-gradient(180deg,var(--gold) 0%,var(--orange) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.page-title {
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  text-align:center;
  padding:24px 0 8px;
}
.page-subtitle {
  font-size:14px;
  color:var(--text-muted);
  text-align:center;
  margin-bottom:20px;
}

/* ─── CARDS / HISTORIAL / BRANDS ────────────── */
.card-grid { display:flex; flex-direction:column; gap:16px; padding:24px 0; }
.brand-card {
  background:var(--bg-card);
  border:1px solid var(--border-dark);
  border-radius:18px;
  padding:20px;
  display:flex;
  align-items:center;
  gap:16px;
  transition:all 0.2s;
}
.brand-card:hover { border-color:var(--orange); box-shadow:var(--neon-glow); }
.brand-card .brand-icon {
  width:56px;height:56px;
  border-radius:14px;
  background:linear-gradient(135deg,#2a2a2a,#1a1a1a);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:var(--orange);
  flex-shrink:0;overflow:hidden;
}
.brand-card .brand-icon img { width:100%;height:100%;object-fit:cover; border-radius:14px; }
.brand-card .brand-info { flex:1; }
.brand-card .brand-info h3 { font-size:16px;font-weight:700; }
.brand-card .brand-info p { font-size:13px;color:var(--text-gray);margin-top:2px; }

.historial-list { display:flex; flex-direction:column; gap:8px; margin:16px 0; }
.historial-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:var(--bg-card);
  border:1px solid var(--border-dark);
  border-radius:12px;
}
.historial-item .h-left { display:flex; align-items:center; gap:10px; }
.historial-item .h-icon { font-size:24px; color:var(--orange); }
.historial-item .h-info .h-premio { font-size:14px; font-weight:600; }
.historial-item .h-info .h-fecha { font-size:11px; color:var(--text-muted); }
.historial-item .h-badge {
  padding:4px 10px;
  border-radius:100px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
}
.historial-item .h-badge.pendiente { background:rgba(255,106,0,0.1); color:var(--orange); }
.historial-item .h-badge.canjeado { background:rgba(76,175,80,0.1); color:#4CAF50; }

/* ─── MISC ──────────────────────────────────── */
.text-center { text-align:center; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mb-16 { margin-bottom:16px; }
.divider-text {
  display:flex;align-items:center;gap:12px;
  margin:16px 0;
  color:var(--text-muted);
  font-size:12px;
}
.divider-text::before, .divider-text::after {
  content:'';
  flex:1;
  height:1px;
  background:var(--border-dark);
}
.login-link { text-align:center; margin-top:16px; font-size:13px; color:var(--text-gray); }
.login-link a { color:var(--orange); font-weight:600; }
.check-group {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:16px;
}
.check-group input[type="checkbox"] {
  width:18px;height:18px;
  accent-color:var(--orange);
  cursor:pointer;
  margin-top:3px;
  flex-shrink:0;
}
.check-group label {
  font-size:13px;
  color:var(--text-gray);
  cursor:pointer;
  margin-bottom:0;
}
.feature-list { display:flex; flex-direction:column; gap:8px; margin:16px 0; }
.feature-list .feature-item {
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--text-gray);
}
.feature-list .feature-item i { color:var(--orange); width:20px; }
.feature-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:20px 16px;
}
.feature-grid .feat-item {
  background:var(--bg-card);
  border:1px solid var(--border-dark);
  border-radius:14px;
  padding:16px 12px;
  text-align:center;
}
.feature-grid .feat-item .feat-icon { font-size:24px;color:var(--orange);margin-bottom:4px; }
.feature-grid .feat-item .feat-title {
  font-family:var(--font-display);
  font-size:13px;font-weight:700;
  text-transform:uppercase;
  color:var(--text-white);
}
.feature-grid .feat-item .feat-sub { font-size:10px;color:var(--text-muted);margin-top:2px; }
.steps-flow { display:flex;justify-content:center;gap:8px;margin-top:24px; }
.steps-flow .step-dot {
  width:36px;height:36px;
  border-radius:50%;
  background:var(--border-dark);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--text-muted);
  position:relative;
}
.steps-flow .step-dot.active { background:var(--orange);color:var(--bg-primary);box-shadow:var(--neon-glow); }
.steps-flow .step-dot.done { background:var(--orange);color:var(--bg-primary); }
.num-pad {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  max-width:260px;
  margin:20px auto;
}
.num-pad button {
  padding:16px;
  background:#1a1a1a;
  border:1px solid var(--border-dark);
  border-radius:12px;
  color:var(--text-white);
  font-size:22px;font-weight:700;
  cursor:pointer;
  transition:all 0.15s;
  font-family:var(--font-body);
}
.num-pad button:hover { background:#2a2a2a;border-color:var(--orange); }
.num-pad .num-back { color:#ef4444; }
.code-display {
  text-align:center;
  padding:16px;
  font-size:36px;font-weight:800;
  letter-spacing:10px;
  color:var(--orange);
  font-family:var(--font-display);
  min-height:56px;
}
.resend-timer { font-size:12px;color:var(--text-muted);margin-top:12px; }
.prize-display {
  text-align:center;
  padding:32px 20px;
  background:var(--bg-card);
  border:1px solid var(--border-dark);
  border-radius:18px;
  margin:24px 0;
}
.prize-display .prize-icon {
  width:80px;height:80px;
  border-radius:50%;
  background:rgba(255,106,0,0.1);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  font-size:36px;color:var(--orange);
}
.prize-display .prize-label { font-size:13px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px; }
.prize-display .prize-name { font-family:var(--font-display);font-size:28px;font-weight:800;margin:8px 0; }
.prize-display .prize-code {
  display:inline-block;
  background:rgba(255,106,0,0.1);
  border:1px solid rgba(255,106,0,0.3);
  border-radius:8px;
  padding:8px 20px;
  font-family:var(--font-display);
  font-size:18px;font-weight:700;
  color:var(--orange);
  letter-spacing:2px;
  margin-top:8px;
}
.nav-simple {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid var(--border-dark);
}
.nav-simple .nav-logo { flex:1; text-align:center; }
.nav-simple .nav-back { color:var(--text-muted); font-size:20px; padding:4px; }
.nav-simple .nav-back:hover { color:var(--orange); }
.landing-hero { text-align:center; padding:40px 20px 24px; }
.landing-hero .logo-ganamatik { margin-bottom:8px; }
.landing-hero .tagline { display:flex;align-items:center;justify-content:center;gap:6px; color:var(--text-gray);font-size:16px;margin-top:8px; }
.landing-hero .tagline i { color:var(--orange); }
.user-header {
  background:linear-gradient(135deg,#0d0d0d,#1a1a1a);
  padding:24px 0 16px;
  text-align:center;
  border-bottom:1px solid var(--border-dark);
}
.how-it-works { margin:24px 0; text-align:center; }
.how-it-works .how-toggle {
  background:none;border:none;
  color:var(--text-gray);
  font-size:14px;
  cursor:pointer;
  padding:8px 16px;
  font-family:var(--font-body);
  display:inline-flex;align-items:center;gap:6px;
  transition:color 0.2s;
}
.how-it-works .how-toggle:hover { color:var(--orange); }
.how-steps { overflow:hidden; max-height:0; transition:max-height 0.4s ease; }
.how-steps.open { max-height:600px; }
.how-step {
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  background:var(--bg-card);
  border:1px solid var(--border-dark);
  border-radius:12px;
  margin-bottom:8px;
  text-align:left;
}
.how-step .step-num {
  width:32px;height:32px;border-radius:50%;
  background:var(--orange);
  color:var(--bg-primary);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;flex-shrink:0;
  box-shadow:0 0 8px rgba(255,106,0,0.4);
}
.how-step .step-text { font-size:14px;color:var(--text-white);font-weight:500; }
.how-step .step-sub { font-size:12px;color:var(--text-gray); }
.gift-illustration {
  width:160px;height:160px;
  margin:20px auto;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.gift-illustration .gift-box {
  width:120px;height:120px;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:56px;
  color:var(--bg-primary);
  box-shadow:var(--neon-glow);
  position:relative;
  animation:giftPulse 2s ease-in-out infinite;
}
@keyframes giftPulse {
  0%,100% { box-shadow:var(--neon-glow); transform:scale(1); }
  50% { box-shadow:0 0 30px rgba(255,106,0,0.7); transform:scale(1.05); }
}
.gift-illustration .sparkle {
  position:absolute;
  width:8px;height:8px;
  background:var(--orange);
  border-radius:50%;
  box-shadow:0 0 6px var(--orange);
  animation:sparkleFloat 1.5s ease-in-out infinite;
}
.gift-illustration .sparkle:nth-child(1) { top:10%;left:10%;animation-delay:0.3s; }
.gift-illustration .sparkle:nth-child(2) { top:5%;right:15%;animation-delay:0.6s; }
.gift-illustration .sparkle:nth-child(3) { bottom:15%;left:5%;animation-delay:0.9s; }
.gift-illustration .sparkle:nth-child(4) { bottom:10%;right:10%;animation-delay:1.2s; }
@keyframes sparkleFloat {
  0%,100% { transform:translateY(0) scale(1); opacity:1; }
  50% { transform:translateY(-8px) scale(1.3); opacity:0.6; }
}
.landing-buttons {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0 20px;
  max-width:320px;
  margin:0 auto;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET & DESKTOP
   ═══════════════════════════════════════════════ */

@media (min-width: 600px) {
  .app-wrapper {
    max-width:500px;
    box-shadow:0 0 60px rgba(0,0,0,0.6);
  }

  .slot-machine {
    margin:10px 16px;
  }

  .slot-screen {
    padding:20px;
    border-radius:20px;
  }

  .slot-grid {
    gap:14px;
  }

  .cell .cell-img {
    width:60%;
  }

  .cell .cell-label {
    font-size:8px;
  }

  .spin-btn {
    width:96px;height:96px;
  }
  .spin-btn .spin-text { font-size:22px; }
  .spin-btn .spin-sub { font-size:10px; }

  .app-header {
    margin:10px 16px;
    padding:8px 18px;
  }

  .header-logo .logo-img { max-width:180px; }

  .plays-indicator {
    margin:8px 16px;
    font-size:13px;
  }
  .plays-indicator .plays-count { font-size:22px; }

  .game-controls .btn-oval {
    padding:10px 18px;
    font-size:11px;
  }
  .game-controls .btn-oval i { font-size:15px; }

  .bottom-nav .nav-item { font-size:10px; }
  .bottom-nav .nav-item i { font-size:18px; }

  .footer-register { margin:8px 16px; }

  .container { max-width:500px; }
}

@media (min-width: 768px) {
  body {
    background:radial-gradient(ellipse at 50% 0%, #1a1a2e 0%, #0a0a10 60%);
  }

  .app-wrapper {
    max-width:520px;
    border-radius:16px;
    border:1px solid rgba(255,140,0,0.1);
    box-shadow:0 0 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
    margin:20px auto;
    height:calc(100dvh - 40px);
  }

  .slot-screen {
    border-radius:24px;
  }

  .spin-btn {
    width:100px;height:100px;
  }
  .spin-btn .spin-text { font-size:24px; }

  .benefits-grid {
    margin:16px 20px;
    gap:12px;
  }
}

/* ═══════════════════════════════════════════════
   SIDE MENU (HAMBURGER)
   ═══════════════════════════════════════════════ */

.menu-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  z-index:9998;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s;
}
.menu-overlay.open {
  opacity:1;
  pointer-events:all;
}

.side-menu {
  position:fixed;
  top:0;left:0;
  width:280px;
  height:100dvh;
  background:var(--bg-card);
  z-index:9999;
  transform:translateX(-100%);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--orange);
  box-shadow:4px 0 30px rgba(0,0,0,0.6);
}
.side-menu.open {
  transform:translateX(0);
}

.side-menu-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border-dark);
}

.side-menu-close {
  background:none;
  border:none;
  color:var(--text-gray);
  font-size:22px;
  cursor:pointer;
  padding:4px;
  transition:color 0.2s;
}
.side-menu-close:hover { color:var(--orange); }

.side-menu-nav {
  flex:1;
  display:flex;
  flex-direction:column;
  padding:12px 0;
}

.side-menu-item {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 24px;
  color:var(--text-white);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:all 0.2s;
}
.side-menu-item i {
  font-size:18px;
  color:var(--orange);
  width:24px;
  text-align:center;
}
.side-menu-item:hover {
  background:rgba(255,106,0,0.08);
  color:var(--orange);
}

.side-menu-footer {
  padding:16px 24px 24px;
  border-top:1px solid var(--border-dark);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.side-menu-footer a {
  color:var(--text-muted);
  font-size:12px;
  text-decoration:none;
  transition:color 0.2s;
}
.side-menu-footer a:hover { color:var(--orange); }
.side-menu-copy {
  color:var(--text-muted);
  font-size:10px;
  margin-top:4px;
}