:root {
  /* Visual identity: BLACK + METALLIC WARM GOLD + ARCANE PURPLE. No acid neon. */
  --color-bg-void: #070409;
  --color-bg-deep: #0c0713;
  --color-bg-base: #110a1a;
  --color-arcane: #2a1236;      /* deep arcane purple */
  --color-purple-deep: #4c1d95;
  --color-purple-primary: #6d28d9;
  --color-purple-soft: #8b5cf6;
  --color-gold: #d8a04a;        /* metallic warm gold (not yellow) */
  --color-gold-bright: #f0c878;
  --color-gold-pale: #fff3c4;
  --color-gold-deep: #8a5a1f;
  --color-text-primary: #f6f1fa;
  --color-text-secondary: #d7cce8;
  --color-text-muted: #9d93b2;
  --color-ember: #ffb454;

  /* Fonts: display serif (Cinzel) + modern sans (Sora). */
  --font-display: 'Cinzel', 'Segoe UI', serif;
  --font-body: 'Sora', system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  background: var(--color-bg-void);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 55% at 50% -12%, rgba(216,160,74,0.20), transparent 60%),
    radial-gradient(ellipse 70% 50% at 95% 15%, rgba(76,29,149,0.30), transparent 60%),
    radial-gradient(ellipse 60% 45% at 5% 85%, rgba(42,18,54,0.45), transparent 60%),
    var(--color-bg-void);
  position: relative;
}

/* ── Ambient backdrop glows ─────────────────────────────────────────── */
.bg-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.bg-glow--2 { width: 390px; height: 390px; bottom: -120px; right: -90px; background: var(--color-purple-primary); opacity: 0.28; }

.stars {
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.32), transparent),
    radial-gradient(1px 1px at 45% 80%, rgba(255,255,255,0.28), transparent),
    radial-gradient(1px 1px at 85% 18%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 55% 48%, rgba(255,255,255,0.22), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ── Ambient embers (arcane particles, NOT confetti) ────────────────── */
.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ember {
  position: absolute;
  bottom: -12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,180,84,0.95) 0%, rgba(240,200,120,0.45) 55%, transparent 100%);
  box-shadow: 0 0 8px rgba(255,180,84,0.7);
  opacity: 0;
  animation: emberRise linear infinite;
}
.ember--1 { left: 8%;  animation-duration: 11s; animation-delay: 0s; }
.ember--2 { left: 24%; animation-duration: 14s; animation-delay: 2.2s; width: 5px; height: 5px; }
.ember--3 { left: 41%; animation-duration: 12s; animation-delay: 4.5s; }
.ember--4 { left: 58%; animation-duration: 16s; animation-delay: 1.1s; width: 6px; height: 6px; }
.ember--5 { left: 72%; animation-duration: 13s; animation-delay: 6s; }
.ember--6 { left: 86%; animation-duration: 15s; animation-delay: 3s; width: 5px; height: 5px; }
.ember--7 { left: 94%; animation-duration: 12s; animation-delay: 7.5s; }
@keyframes emberRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 0.8; }
  60% { opacity: 0.5; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 22px)); opacity: 0; }
}

/* ── Vignette (dark-room edge shading) ─────────────────────────────── */
.vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 120% at 50% 42%, transparent 48%, rgba(0,0,0,0.42) 82%),
    linear-gradient(180deg, rgba(0,0,0,0.32), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,0.42), transparent 26%);
  pointer-events: none;
}

/* ── Floating rune glyphs (faint, scattered, drifting/shimmering) ──── */
.rune-glyphs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}
.rune-glyphs span {
  position: absolute;
  font-family: var(--font-display);
  color: var(--color-gold-bright);
  text-shadow: 0 0 12px rgba(240,200,120,0.35);
  opacity: 0;
  animation: runeGlyphFloat linear infinite, runeGlyphShimmer ease-in-out infinite;
}
.rune-glyphs span:nth-child(1) { top: 14%; left: 6%; font-size: 30px; animation-duration: 22s, 4.5s; animation-delay: 0s, 0s; }
.rune-glyphs span:nth-child(2) { top: 34%; right: 8%; font-size: 22px; animation-duration: 26s, 5s; animation-delay: -4s, -2s; }
.rune-glyphs span:nth-child(3) { bottom: 28%; left: 12%; font-size: 26px; animation-duration: 24s, 4s; animation-delay: -8s, -1s; }
.rune-glyphs span:nth-child(4) { top: 60%; right: 14%; font-size: 20px; animation-duration: 28s, 5.5s; animation-delay: -12s, -3s; }
.rune-glyphs span:nth-child(5) { bottom: 12%; right: 26%; font-size: 18px; animation-duration: 30s, 4.8s; animation-delay: -16s, -1.5s; }
@keyframes runeGlyphFloat {
  0%   { transform: translateY(0) rotate(-4deg); opacity: 0; }
  15%  { opacity: 0.4; }
  50%  { opacity: 0.5; transform: translateY(-16px) rotate(4deg); }
  85%  { opacity: 0.4; }
  100% { transform: translateY(-30px) rotate(-3deg); opacity: 0; }
}
@keyframes runeGlyphShimmer {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.6; }
}

/* ── Topbar ─────────────────────────────────────────────────────────── */
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: 0.08em; }
.brand-mark { color: var(--color-gold); font-size: 20px; text-shadow: 0 0 12px rgba(216,160,74,0.7); }
.brand-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--color-gold-pale), var(--color-gold), var(--color-gold-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lang-switch { display: flex; gap: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 3px; }
.lang-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
}
.lang-btn.active { background: var(--color-purple-primary); color: #fff; }

/* ── Page ───────────────────────────────────────────────────────────── */
.page {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  padding: 6px 18px 34px;
  text-align: center;
}

/* ── HERO ───────────────────────────────────────────────────────────── */
/* BUG 3: the first screen shows ONLY the hero (eyebrow, title, subtitle,
   Plinko board, drop button). Everything below stays below the fold until
   the user scrolls (or the ball lands). Hero fills the viewport below the
   topbar and centers its content. */
.hero {
  position: relative; /* containing block for the absolute decorative rune */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: calc(100vh - 64px); /* tall phones */
  min-height: calc(100dvh - 64px);
  padding: 18px 0 28px;
}
.hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
  text-shadow: 0 0 14px rgba(216,160,74,0.5);
  margin: 0 0 8px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 7.5vw, 38px);
  line-height: 1.18;
  margin: 2px 0 12px;
  font-weight: 800;
  text-shadow: 0 0 26px rgba(216,160,74,0.22);
}
.hero-title .accent {
  background: linear-gradient(90deg, var(--color-gold-pale), var(--color-gold), var(--color-gold-bright));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: accentShimmer 3.2s linear infinite;
}
@keyframes accentShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.hero-sub {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 auto 18px;
  max-width: 430px;
}

/* ── Mystical-horror atmosphere: glowing eyes, witch typewriter, amulet ── */

/* 1) GLOWING EYES IN THE DARKNESS — "someone is watching you".
       Decorative, behind content, pointer-events:none. Flicker subtle;
       flares on the ball landing (#eyes.eyes--flare). */
.eyes {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 46px;
  z-index: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  gap: 26px;
}
.eyes .eye {
  width: 22px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd27a 0%, #d8a04a 45%, rgba(216,160,74,0) 72%);
  box-shadow: 0 0 14px rgba(240,200,120,0.8), 0 0 34px rgba(240,200,120,0.4);
  /* subtle pupil slit for a "witch watching" feel */
  position: relative;
  animation: eyesFlicker 2.6s ease-in-out infinite;
}
.eyes .eye::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: rgba(10,6,20,0.9);
}
.eyes .eye:nth-child(2) { animation-delay: -1.3s; }
@keyframes eyesFlicker {
  0%, 100% { opacity: 0.55; }
  45%      { opacity: 0.85; }
  50%      { opacity: 0.5; }
  60%      { opacity: 0.95; }
  70%      { opacity: 0.6; }
}
/* FLARE on win — brief brighter burst + wider glow */
.eyes.eyes--flare .eye {
  animation: eyesFlare 0.9s ease-out;
  opacity: 1;
  box-shadow: 0 0 26px rgba(255,220,150,1), 0 0 70px rgba(240,200,120,0.85);
}
@keyframes eyesFlare {
  0%   { transform: scale(1);     filter: brightness(1); opacity: 1; }
  45%  { transform: scale(1.25);  filter: brightness(1.9); opacity: 1; }
  100% { transform: scale(1);     filter: brightness(1); opacity: 0.9; }
}

/* 2) WITCH'S VOICE typewriter — creeps up faintly, blinking cursor. */
.witch-line {
  margin: 6px auto 4px;
  max-width: 430px;
  min-height: 22px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  text-shadow: 0 0 12px rgba(216,160,74,0.18);
  opacity: 0.8;
  z-index: 1;
  pointer-events: none;
}
.witch-type { white-space: pre-wrap; }
.witch-cursor {
  display: inline-block;
  margin-left: 2px;
  color: var(--color-gold-bright);
  font-weight: 700;
  animation: witchCursorBlink 0.85s step-start infinite;
}
@keyframes witchCursorBlink { 50% { opacity: 0; } }

/* 3) BREATHING AMULET — gentle pulsing glow around the board before the
       first tap; calms/stops once the ball is dropped (ph-wrap--dropped). */
.amulet-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,200,120,0.30) 0%, rgba(139,92,246,0.18) 45%, transparent 70%);
  filter: blur(26px);
  z-index: 0;
  pointer-events: none;
  animation: amuletBreathe 3.2s ease-in-out infinite;
}
@keyframes amuletBreathe {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.96); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
.ph-wrap--dropped .amulet-glow {
  animation: none;
  opacity: 0;
  transition: opacity .6s ease;
}

/* Reduced motion: freeze the horror-motion too (eyes dim, witch static). */
@media (prefers-reduced-motion: reduce) {
  .eyes .eye,
  .eyes.eyes--flare .eye,
  .witch-cursor,
  .amulet-glow {
    animation: none !important;
  }
  .eyes .eye { opacity: 0.55 !important; }
  .witch-cursor { opacity: 1 !important; }
  .amulet-glow { opacity: 0.6 !important; }
}

.offer-badge {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 2px auto 20px;
  padding: 9px 18px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(216,160,74,0.16), rgba(109,40,217,0.16));
  border: 1px solid rgba(240,200,120,0.35);
  font-weight: 800;
  font-size: 14px;
  color: var(--color-gold-pale);
  box-shadow: 0 0 22px rgba(216,160,74,0.18);
  letter-spacing: 0.02em;
}
.offer-main { display: block; font-size: 15px; font-weight: 800; color: var(--color-gold-pale); line-height: 1.3; }
.offer-small { display: block; font-size: 11px; font-weight: 600; color: var(--color-text-muted); opacity: 0.85; margin-top: 3px; letter-spacing: 0.02em; }
.hero-reassure {
  margin: 16px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

/* ── PLINKO HERO ────────────────────────────────────────────────────── */
/* A small, tappable canvas board that fits a ~360px phone and keeps the
   amulet as the hero centerpiece (as a gold ball). */
.plinko-hero {
  position: relative;
  width: min(320px, 90vw);
  margin: 14px auto 18px;
}
.plinko-hero-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 30px rgba(216,160,74,0.14);
}
.plinko-hint {
  margin: 12px auto 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-gold-bright);
  text-shadow: 0 0 12px rgba(216,160,74,0.5);
  animation: plinkoHintPulse 1.8s ease-in-out infinite;
  transition: opacity .3s ease;
}
@keyframes plinkoHintPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.plinko-win {
  margin: 8px auto 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--color-gold-pale), var(--color-gold), var(--color-gold-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgba(240,200,120,0.55);
  opacity: 0;
  transition: opacity .3s ease;
}
.plinko-win--pop { animation: plinkoWinPop .5s ease-out; }
@keyframes plinkoWinPop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── TRUST STRIP ────────────────────────────────────────────────────── */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 26px 4px 4px;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(216,160,74,0.22);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-secondary);
  box-shadow: 0 0 14px rgba(109,40,217,0.12);
}

/* ── Sections ───────────────────────────────────────────────────────── */
.section-kicker {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
  text-shadow: 0 0 12px rgba(216,160,74,0.45);
  margin: 0 0 12px;
}

/* THE DROP */
.drop-section { margin: 40px 0 10px; }
.drop-kicker { margin-bottom: 2px; }
.drop-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 6.4vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 20px;
}
.drop-card {
  padding: 26px 20px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,160,74,0.18), transparent 60%),
    linear-gradient(160deg, rgba(76,29,149,0.30), rgba(20,10,26,0.9));
  border: 1px solid rgba(240,200,120,0.3);
  box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 30px rgba(216,160,74,0.16);
  margin-bottom: 22px;
}
.drop-pct {
  display: block;
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(90deg, var(--color-gold-pale), var(--color-gold), var(--color-gold-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(240,200,120,0.25);
}
.drop-cap { display: block; font-size: 15px; font-weight: 700; color: var(--color-text-primary); margin-top: 8px; }
.drop-max { display: block; font-size: 20px; font-weight: 800; color: var(--color-gold-bright); margin-top: 4px; letter-spacing: 0.02em; }
.drop-terms { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(216,160,74,0.16); }
.drop-note { font-size: 12px; line-height: 1.5; color: var(--color-text-muted); margin: 10px 0 0; }

/* GAMES */
.games-section { margin: 40px 0 10px; }
.games-strip {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.game-tile {
  flex: 1 1 30%;
  max-width: 33.333%;
  min-width: 0;
  text-align: center;
  padding: 16px 8px 14px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
  border: 1px solid rgba(216,160,74,0.14);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
.game-tile-icon {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  background: var(--color-gold-bright);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: drop-shadow(0 0 8px rgba(216,160,74,0.45));
}
.game-tile-icon--crash {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 20V10l5 4 6-8 7 9v5H3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 20V10l5 4 6-8 7 9v5H3Z'/%3E%3C/svg%3E");
}
.game-tile-icon--mines {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 3l2 2-3 3 2 2 3-3 2 2-2 6a4 4 0 0 1-8 0l-5 5H5v-2l5-5a4 4 0 0 1 0-8l2-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 3l2 2-3 3 2 2 3-3 2 2-2 6a4 4 0 0 1-8 0l-5 5H5v-2l5-5a4 4 0 0 1 0-8l2-2Z'/%3E%3C/svg%3E");
}
.game-tile-icon--plinko {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 8 9 12l3 4 3-4-3-4Z'/%3E%3Ccircle cx='6' cy='12' r='2'/%3E%3Ccircle cx='18' cy='12' r='2'/%3E%3Ccircle cx='12' cy='18' r='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 8 9 12l3 4 3-4-3-4Z'/%3E%3Ccircle cx='6' cy='12' r='2'/%3E%3Ccircle cx='18' cy='12' r='2'/%3E%3Ccircle cx='12' cy='18' r='2'/%3E%3C/svg%3E");
}
.game-tile-name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--color-text-primary);
}
.game-tile-desc { font-size: 11px; line-height: 1.5; color: var(--color-text-muted); margin: 0; }

/* FINAL CTA */
.final-cta {
  margin: 40px 0 6px;
  padding: 26px 20px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(76,29,149,0.28), rgba(20,10,26,0.55));
  border: 1px solid rgba(216,160,74,0.3);
  box-shadow: 0 0 32px rgba(216,160,74,0.14);
}
.final-cta-heading {
  font-family: var(--font-display);
  font-size: clamp(20px, 6vw, 27px);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--color-text-primary);
}
.final-cta-heading .accent {
  background: linear-gradient(90deg, var(--color-gold-pale), var(--color-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.final-cta-sub { font-size: 13.5px; color: var(--color-text-secondary); margin: 0 0 22px; }
.final-cta-reassure { margin: 16px 0 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--color-text-muted); }

.disclaimer { font-size: 11px; color: var(--color-text-muted); opacity: 0.7; margin-top: 18px; line-height: 1.5; }

/* CTA strip — a full-width decision button between sections so no single
   screen scrolls without a reachable CTA. */
.cta-strip { display: flex; justify-content: center; margin: 28px 0 6px; }

/* ── CTA button (signature gold/purple gradient — identical everywhere) ── */
.claim-btn {
  position: relative;
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 18px 10px;
  border-radius: 16px;
  border: 2px solid rgba(240,200,120,0.7);
  background: linear-gradient(90deg, var(--color-purple-primary), var(--color-purple-deep));
  color: #fff;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 10px 34px rgba(109,40,217,0.55), 0 0 26px rgba(216,160,74,0.3);
  animation: claimPulse 1.2s ease-in-out infinite;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.claim-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: claimSweep 2.4s ease-in-out infinite;
}
@keyframes claimPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(109,40,217,0.5), 0 0 20px rgba(216,160,74,0.25); }
  50% { transform: scale(1.035); box-shadow: 0 12px 40px rgba(109,40,217,0.6), 0 0 34px rgba(216,160,74,0.5); }
}
@keyframes claimSweep {
  0% { left: -60%; }
  60%, 100% { left: 130%; }
}

/* ── Mobile-first adjustments ───────────────────────────────────────── */
@media (max-width: 480px) {
  .games-strip { gap: 8px; }
  .game-tile { padding: 14px 6px 13px; }
  .game-tile-desc { font-size: 10px; }
  .drop-pct { font-size: 48px; }
  .claim-btn { font-size: 15px; padding: 17px 8px; }
}

/* ── WHY US ─────────────────────────────────────────────────────────── */
.why-section { margin: 40px 0 10px; }
.why-heading {
  font-family: var(--font-display);
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 800;
  line-height: 1.22;
  margin: 0 0 22px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.why-card {
  text-align: left;
  padding: 18px 14px 16px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid rgba(216,160,74,0.16);
  box-shadow: 0 8px 22px rgba(0,0,0,0.3);
  transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease;
}
.why-card:hover {
  transform: translateY(-3px);
  border-color: rgba(240,200,120,0.45);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4), 0 0 22px rgba(216,160,74,0.22);
}
/* Description lines added to kill the emptiness — readable, muted, short. */
.why-card-title {
  display: block;
  font-weight: 700;
  color: var(--color-text-primary);
}
.why-card-desc {
  display: block;
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ── BONUS REVEAL ──────────────────────────────────────────────────── */
/* BUG 1: this is the SINGLE banner — hidden on load, revealed ONLY when the
   Plinko amulet lands (plinko-hero.js win() adds .banner--show). Not shown by
   the scroll observer; controlled solely by the win event. */
.bonus-reveal {
  margin: 6px 0 10px;
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transition: opacity .6s ease, visibility .6s ease, max-height .6s ease;
  scroll-margin-top: 12px;
}
.bonus-reveal.banner--show {
  opacity: 1;
  visibility: visible;
  max-height: none;
}
.bonus-card {
  padding: 26px 20px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,160,74,0.18), transparent 62%),
    linear-gradient(160deg, rgba(76,29,149,0.30), rgba(20,10,26,0.9));
  border: 1px solid rgba(240,200,120,0.3);
  box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 30px rgba(216,160,74,0.16);
}
.bonus-line {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(18px, 5.4vw, 24px);
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--color-gold-pale), var(--color-gold), var(--color-gold-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 26px rgba(240,200,120,0.28);
}
.bonus-text {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.bonus-card .claim-btn { margin-bottom: 4px; }

/* ── WIN MODAL (staged reveal — mirrors the wheel prelander's win modal,
   restyled to the amulet's gold/purple mystical palette). Pure CSS + a few
   JS-fired elements (.confetti-particle). Additional to — NOT replacing —
   the bottom .bonus-reveal banner: both show together when the ball lands. ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,4,9,0.86);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 20px;
}
.modal-overlay.visible { display: flex; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(160deg, rgba(76,29,149,0.62), rgba(12,7,19,0.96));
  border: 1px solid rgba(216,160,74,0.45);
  border-radius: 20px;
  padding: 30px 24px 26px;
  text-align: center;
  box-shadow: 0 0 60px rgba(216,160,74,0.4);
  animation: modalPop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  overflow: hidden;
}
@keyframes modalPop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Close control — ✕ top-right and click-outside both close (wired in app.js). */
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--color-gold-bright);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity .2s ease, background .2s ease, transform .2s ease;
}
.modal-close:hover { opacity: 1; background: rgba(216,160,74,0.25); transform: scale(1.08); }

/* Win-moment atmosphere: a quick gold flash, rotating ember rays, and
   JS-fired gold/violet confetti chips. Transform/opacity only. */
.modal-flash {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 32%, rgba(240,200,120,0.45), transparent 60%);
  opacity: 0;
  pointer-events: none;
  animation: modalFlash 0.9s ease-out;
}
@keyframes modalFlash {
  0% { opacity: 0.95; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.5); }
}

.modal-ray-burst {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.5;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(216,160,74,0.4) 6deg, transparent 14deg,
    transparent 56deg, rgba(216,160,74,0.32) 62deg, transparent 70deg,
    transparent 112deg, rgba(216,160,74,0.36) 118deg, transparent 126deg,
    transparent 168deg, rgba(216,160,74,0.32) 174deg, transparent 182deg,
    transparent 224deg, rgba(216,160,74,0.36) 230deg, transparent 238deg,
    transparent 280deg, rgba(216,160,74,0.32) 286deg, transparent 294deg,
    transparent 360deg
  );
  animation: rayBurstSpin 5s linear infinite;
}
@keyframes rayBurstSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Confetti chips — populated by app.js fireConfetti() at win time. */
.modal-confetti {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.confetti-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--particle-color, #f0c878);
  box-shadow: 0 0 6px var(--particle-color, #f0c878);
  opacity: 0;
  animation: confettiFly 1.15s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes confettiFly {
  0% { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(1) rotate(var(--rot, 180deg));
    opacity: 0;
  }
}

/* Staged reveal — a real "you won" burst first, THEN the offer + CTA fade in. */
.modal-congrats-stage {
  position: relative;
  z-index: 2;
  padding: 28px 0 22px;
  animation: congratsPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.modal-congrats-stage.exit {
  animation: congratsExit 0.4s ease forwards;
}
.modal-congrats-burst {
  display: block;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.25;
  background: linear-gradient(90deg, var(--color-gold-pale), var(--color-gold), var(--color-gold-bright));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: congratsShake 0.6s ease-in-out, accentShimmer 2.6s linear infinite;
}
.modal-congrats-sub {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--color-text-secondary);
}
@keyframes congratsPop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes congratsExit {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.85); }
}
@keyframes congratsShake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-3deg); }
  40% { transform: rotate(3deg); }
  60% { transform: rotate(-2deg); }
  80% { transform: rotate(2deg); }
}

.modal-offer-stage { display: none; }
.modal-offer-stage.revealed {
  display: block;
  animation: offerReveal 0.5s ease both;
}
@keyframes offerReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-badge {
  display: inline-block;
  background: var(--color-gold);
  color: #1a1020;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.modal-prize {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 12px;
  background: linear-gradient(90deg, var(--color-gold-pale), var(--color-gold), var(--color-gold-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.02em;
}

.modal-copy {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 22px;
}
.modal-card .claim-btn { margin-bottom: 0; }


/* ── GAMES ─────────────────────────────────────────────────────────── */
.games-heading {
  font-family: var(--font-display);
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 800;
  line-height: 1.22;
  margin: 0 0 10px;
}
.games-intro {
  margin: 0 auto 22px;
  max-width: 430px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.game-tile {
  transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease;
}
.game-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(240,200,120,0.5);
  box-shadow: 0 12px 26px rgba(0,0,0,0.4), 0 0 24px rgba(216,160,74,0.25);
}
.game-tile--more {
  background:
    radial-gradient(circle at 50% 30%, rgba(109,40,217,0.35), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border-style: dashed;
}
.game-tile-more {
  display: block;
  font-size: 24px;
  line-height: 34px;
  height: 34px;
  color: var(--color-gold-bright);
  filter: drop-shadow(0 0 8px rgba(216,160,74,0.55));
}
.game-tile-icon--boxes {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h6v6H4V4Zm10 0h6v6h-6V4ZM4 14h6v6H4v-6Zm10 0h6v6h-6v-6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h6v6H4V4Zm10 0h6v6h-6V4ZM4 14h6v6H4v-6Zm10 0h6v6h-6v-6Z'/%3E%3C/svg%3E");
}
.game-tile-icon--wheel {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v6M12 15v6M3 12h6M15 12h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v6M12 15v6M3 12h6M15 12h6'/%3E%3C/svg%3E");
}
.game-tile-icon--dice {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.3'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.3'/%3E%3Ccircle cx='8.5' cy='15.5' r='1.3'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.3'/%3E%3Ccircle cx='12' cy='12' r='1.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.3'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.3'/%3E%3Ccircle cx='8.5' cy='15.5' r='1.3'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.3'/%3E%3Ccircle cx='12' cy='12' r='1.3'/%3E%3C/svg%3E");
}

/* ── Arcane rune circle (hero decoration) ──────────────────────────── */
.rune {
  /* Decorative — out of flow (absolute) so it reserves NO layout space
     (it was 150px tall in-flow and pushed the whole hero content down,
     leaving a big empty gap at the top). Centered horizontally via
     margin-left (NOT transform) so runeSpin/runeFadeIn keyframes, which
     set transform, never clobber the centering. */
  position: absolute;
  top: 92px;
  left: 50%;
  margin-left: -75px; /* half of 150px width → centers the 150px rune */
  width: 150px;
  height: 150px;
  z-index: 0;
  opacity: 0;
  transform: scale(0.92);
  animation: runeFadeIn 1.2s ease forwards, runeSpin 26s linear infinite;
  pointer-events: none;
}
.rune-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(216,160,74,0.4);
  box-shadow: 0 0 26px rgba(216,160,74,0.25), inset 0 0 26px rgba(216,160,74,0.18);
}
.rune-ring::before,
.rune-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(240,200,120,0.35);
}
.rune-ring::before { inset: 12px; }
.rune-ring::after { inset: 26px; }
.rune-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--color-gold-bright);
  text-shadow: 0 0 18px rgba(240,200,120,0.85);
  animation: glyphPulse 3s ease-in-out infinite;
}
@keyframes runeFadeIn { to { opacity: 1; transform: scale(1); } }
@keyframes runeSpin { to { transform: rotate(360deg); } }
@keyframes glyphPulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

/* ── Drifting arcane fog (subtle, alive) ───────────────────────────── */
.drift {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.18;
  animation: driftFloat linear infinite;
}
.drift--1 { top: 12%; left: -60px; background: var(--color-purple-primary); animation-duration: 26s; }
.drift--2 { top: 42%; right: -80px; background: var(--color-gold); opacity: 0.12; animation-duration: 30s; animation-delay: -10s; }
.drift--3 { bottom: 6%; left: 22%; background: var(--color-purple-deep); opacity: 0.15; animation-duration: 34s; animation-delay: -20s; }
@keyframes driftFloat {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(30px,-22px) scale(1.12); }
  66%  { transform: translate(-20px,16px) scale(0.95); }
  100% { transform: translate(0,0) scale(1); }
}

/* ── Twinkling stars in the dark background ────────────────────────── */
.stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.4px 1.4px at 36% 12%, rgba(240,200,120,0.7), transparent),
    radial-gradient(1.4px 1.4px at 66% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.4px 1.4px at 88% 52%, rgba(240,200,120,0.65), transparent),
    radial-gradient(1.4px 1.4px at 24% 68%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.4px 1.4px at 74% 84%, rgba(255,255,255,0.5), transparent);
  animation: starTwinkle 5s ease-in-out infinite;
}
@keyframes starTwinkle {
  0%,100% { opacity: 0.35; }
  50%     { opacity: 1; }
}

/* ── Reveal-on-scroll fade-in (progressive enhancement) ────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.reveal.in-view { opacity: 1; transform: none; }

/* ── Mobile-first adjustments ───────────────────────────────────────── */
@media (max-width: 480px) {
  .games-strip { gap: 8px; }
  .game-tile { padding: 14px 6px 13px; }
  .game-tile-desc { font-size: 10px; }
  .drop-pct { font-size: 48px; }
  .claim-btn { font-size: 15px; padding: 17px 8px; }
}

/* ── Reduced motion: freeze ambient animation ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bg-glow,
  .ember,
  .drift,
  .rune,
  .rune-glyph,
  .rune-glyphs,
  .rune-glyphs span,
  .stars::after,
  .hero-title .accent,
  .plinko-hint,
  .plinko-win,
  .claim-btn,
  .claim-btn::before,
  .modal-card,
  .modal-flash,
  .modal-ray-burst,
  .confetti-particle,
  .modal-congrats-burst,
  .modal-congrats-stage,
  .modal-congrats-stage.exit,
  .modal-offer-stage.revealed {
    animation: none !important;
  }
  .rune-glyphs span { opacity: 0.35 !important; }
  .plinko-win--pop { animation: none !important; }
  .game-tile,
  .why-card,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}