/* =====================================================================
   DESIGN SYSTEM — luxury casino direction. Palette discipline enforced:
   gold is the ONLY accent (three tonal shades), warm near-black
   background, warm-white text. No magenta/cyan/green/orange anywhere in
   this file — if a new rule needs a "pop" color, it must come from this
   gold scale, not a new hue.
   ===================================================================== */
:root {
  --color-bg-void: #0b0805;
  --color-bg-deep: #130e09;
  --color-gold-dark: #8a6a2f;
  --color-gold: #c9a253;
  --color-gold-bright: #f0d9a0;
  --color-text-primary: #f4ecd8;
  --color-text-secondary: #cdc0a4;
  --color-text-muted: #8d8069;

  --radius-card: 18px;
  --radius-pill: 999px;

  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Shared "object on a shelf" shadow — single light source, top-left.
     Every card-like surface on the page uses this same recipe. */
  --shadow-card:
    inset 1px 1px 0 rgba(240,217,160,0.16),
    inset -1px -1px 0 rgba(0,0,0,0.45),
    10px 16px 30px rgba(0,0,0,0.5);
}

* { 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-sans);
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  /* Single warm light source from the top, vignette darkening toward the
     edges — no colored bokeh blobs. */
  background:
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(201,162,83,0.14), transparent 62%),
    radial-gradient(ellipse 140% 90% at 50% 50%, transparent 45%, rgba(0,0,0,0.55) 100%),
    var(--color-bg-void);
  position: relative;
}

/* Sparse, low-opacity, static star dots — behind everything, never over text. */
.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(244,236,216,0.35), transparent),
    radial-gradient(1px 1px at 78% 12%, rgba(244,236,216,0.28), transparent),
    radial-gradient(1px 1px at 32% 42%, rgba(244,236,216,0.22), transparent),
    radial-gradient(1px 1px at 88% 55%, rgba(244,236,216,0.3), transparent),
    radial-gradient(1px 1px at 15% 70%, rgba(244,236,216,0.2), transparent),
    radial-gradient(1px 1px at 60% 82%, rgba(244,236,216,0.25), transparent),
    radial-gradient(1px 1px at 92% 88%, rgba(244,236,216,0.22), transparent);
  background-size: 100% 100%;
  animation: starsTwinkle 6s ease-in-out infinite;
}
@keyframes starsTwinkle {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
}

.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: 0.08em; }
.brand-mark { color: var(--color-gold); font-size: 18px; text-shadow: 0 0 10px rgba(201,162,83,0.5); }
.brand-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-gold-bright);
}

.lang-switch { display: flex; gap: 4px; background: rgba(244,236,216,0.04); border: 1px solid rgba(201,162,83,0.25); border-radius: var(--radius-pill); padding: 3px; }
.lang-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.lang-btn.active { background: rgba(201,162,83,0.18); color: var(--color-gold-bright); }

.page {
  position: relative;
  z-index: 1;
  max-width: 580px;
  margin: 0 auto;
  padding: 8px 20px 34px;
  text-align: center;
}

/* ── HERO — four elements only: badge, headline, subtitle, then the
   vaults follow immediately. ── */
.hero { margin: 10px 0 26px; }

.hero-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid rgba(201,162,83,0.4);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  margin-bottom: 18px;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 8vw, 3.1rem);
  line-height: 1.12;
  margin: 0 0 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}
.hero-title .accent {
  display: inline-block;
  color: var(--color-gold-bright);
  font-style: italic;
  text-shadow: 0 0 24px rgba(240,217,160,0.35);
}
.hero-sub {
  font-family: var(--font-sans);
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 420px;
}

/* =====================================================================
   THREE VAULTS — real dimensional treasure CHESTS (lid + body + seam),
   not flat cards. Still strict gold-only luxury palette — the "energy"
   comes from light and motion, never a new hue: a living trapped-glow
   breathing at the seam/lock as if treasure-light is escaping, rising
   spark motes, a shimmer sweep, gentle idle float, and a hover state
   where the lid visibly cracks and light bursts from the gap.
   Each chest has its own gold warmth (--vault-glow) so Emerald/Crown/
   Phoenix read as genuinely different treasures, never a different hue.
   ===================================================================== */
.vaults-section { margin: 0 0 10px; }

.vault-kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-gold-bright);
  margin: 0 0 16px;
  text-shadow: 0 0 16px rgba(201,162,83,0.3);
}

.vault-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 460px;
  margin: 0 auto;
}

.vault-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border: none;
  background: transparent;
  padding: 10px 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  cursor: pointer;
  color: var(--color-gold-bright);
}
.vault-card--emerald { --vault-tint: #241d13; --vault-glow: 201,162,83; --vault-glow-bright: 240,217,160; animation-delay: 0s; }
.vault-card--crown   { --vault-tint: #201a10; --vault-glow: 224,188,110; --vault-glow-bright: 250,232,190; animation-delay: 0.7s; }
.vault-card--phoenix { --vault-tint: #251c10; --vault-glow: 214,168,86; --vault-glow-bright: 246,222,170; animation-delay: 1.4s; }

.vault-card.unchosen {
  opacity: 0.3;
  filter: saturate(0.55);
  pointer-events: none;
  transition: opacity 0.5s ease, filter 0.5s ease;
}

/* ── Rising spark motes — small embers escaping the sealed chest,
   proof that something alive/valuable is inside. ── */
.vault-motes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.vault-motes span {
  position: absolute;
  bottom: 30%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(var(--vault-glow-bright), 0.95);
  box-shadow: 0 0 6px 1px rgba(var(--vault-glow-bright), 0.8);
  opacity: 0;
  animation: moteRise 4.6s ease-in infinite;
}
.vault-motes span:nth-child(1) { left: 28%; animation-delay: 0.2s; }
.vault-motes span:nth-child(2) { left: 68%; animation-delay: 1.3s; }
.vault-motes span:nth-child(3) { left: 45%; animation-delay: 2.4s; width: 2px; height: 2px; }
.vault-motes span:nth-child(4) { left: 58%; animation-delay: 3.2s; }
.vault-motes span:nth-child(5) { left: 38%; animation-delay: 0.9s; width: 2px; height: 2px; }
@keyframes moteRise {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 0.4; }
  100% { transform: translate(var(--mote-drift, 6px), -130%) scale(1.1); opacity: 0; }
}
.vault-motes span:nth-child(odd) { --mote-drift: 10px; }
.vault-motes span:nth-child(even) { --mote-drift: -8px; }

/* ── The chest itself — an absolutely-positioned scene so the lid, seam
   and body read as real stacked volumes rather than a single flat panel.
   Gentle idle float on the whole scene; everything else is positioned
   as a percentage of this box so it scales cleanly at any card width. ── */
.vault-chest {
  position: relative;
  width: 84%;
  aspect-ratio: 10 / 9;
  animation: chestFloat 5s ease-in-out infinite;
  animation-delay: inherit;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1.1);
}
@keyframes chestFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Soft ambient bloom behind the whole chest — the "powered up, alive"
   glow. Breathes continuously, independent of hover. */
.chest-aura {
  position: absolute;
  inset: -18%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--vault-glow-bright),0.5), rgba(var(--vault-glow),0.18) 45%, transparent 72%);
  filter: blur(10px);
  opacity: 0.55;
  animation: auraPulse 3.2s ease-in-out infinite;
  animation-delay: inherit;
}
@keyframes auraPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.94); }
  50% { opacity: 0.85; transform: scale(1.06); }
}

/* Grounded shadow — keeps the chest reading as a tangible object sitting
   on a surface even while it gently floats. */
.chest-shadow {
  position: absolute;
  left: 50%;
  bottom: -9%;
  width: 76%;
  height: 12%;
  z-index: 0;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 72%);
  transform: translateX(-50%);
  animation: chestShadowBreathe 5s ease-in-out infinite;
  animation-delay: inherit;
}
@keyframes chestShadowBreathe {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scaleX(1); }
  50% { opacity: 0.55; transform: translateX(-50%) scaleX(0.86); }
}

/* ── Lid — top-rounded volume, tilts open from its base edge on
   hover/opening so light can visibly burst from the gap. ── */
.chest-lid {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 4%;
  width: 92%;
  height: 40%;
  border-radius: 16px 16px 5px 5px;
  background: linear-gradient(160deg, rgba(var(--vault-glow-bright),0.9) 0%, rgba(var(--vault-glow),0.9) 38%, var(--vault-tint) 85%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.25),
    inset 0 -6px 10px rgba(0,0,0,0.4),
    0 6px 14px rgba(0,0,0,0.5);
  transform-origin: 50% 100%;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chest-lid-sheen {
  position: absolute;
  inset: 6% 10% auto 10%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.35), transparent 75%);
  pointer-events: none;
}
.chest-stud {
  position: absolute;
  top: 58%;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), rgba(var(--vault-glow),0.9) 55%, var(--vault-tint) 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.chest-stud--l { left: 12%; }
.chest-stud--r { right: 12%; }

.vault-emblem {
  position: relative;
  z-index: 1;
  width: 38%;
  height: auto;
  color: rgba(28,20,10,0.75);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.25));
}

/* ── Seam — the crack between lid and body where trapped treasure-light
   leaks out. This bar is the emotional core: it pulses on its own, and
   flares/widens on hover and on open. ── */
.chest-seam {
  position: absolute;
  z-index: 3;
  top: 38%;
  left: 6%;
  width: 88%;
  height: 6%;
  border-radius: 3px;
  overflow: visible;
  pointer-events: none;
}
.chest-seam-glow {
  position: absolute;
  inset: -60% -4%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(var(--vault-glow-bright),0.95) 20%, rgba(var(--vault-glow-bright),1) 50%, rgba(var(--vault-glow-bright),0.95) 80%, transparent);
  filter: blur(4px);
  opacity: 0.7;
  animation: seamGlowPulse 2.4s ease-in-out infinite;
  animation-delay: inherit;
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}
@keyframes seamGlowPulse {
  0%, 100% { opacity: 0.45; transform: scaleY(0.8); }
  50% { opacity: 0.95; transform: scaleY(1.3); }
}

/* ── Body — bottom-rounded volume with gold binding straps + rivets. ── */
.chest-body {
  position: absolute;
  z-index: 1;
  top: 42%;
  left: 1%;
  width: 98%;
  height: 58%;
  border-radius: 6px 6px 16px 16px;
  border: 1px solid rgba(var(--vault-glow),0.3);
  background: linear-gradient(170deg, var(--vault-tint) 0%, #150f08 60%, #0b0805 100%);
  box-shadow:
    inset 0 2px 0 rgba(var(--vault-glow),0.4),
    inset 0 -8px 14px rgba(0,0,0,0.5),
    0 10px 20px rgba(0,0,0,0.55);
}
.chest-strap {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 13%;
  background: linear-gradient(180deg, rgba(var(--vault-glow-bright),0.55), rgba(var(--vault-glow),0.75) 40%, var(--vault-tint) 100%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.15), inset -1px 0 0 rgba(0,0,0,0.3);
}
.chest-strap--l { left: 14%; }
.chest-strap--r { right: 14%; }

/* ── Lock plate — straddles the seam, the single brightest, most
   "trapped treasure" element on the chest. ── */
.chest-lock {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 32%;
  width: 26%;
  aspect-ratio: 1;
  transform: translateX(-50%);
}
.chest-lock-glow {
  position: absolute;
  inset: -55%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--vault-glow-bright),0.85), rgba(var(--vault-glow),0.3) 55%, transparent 75%);
  filter: blur(4px);
  opacity: 0.65;
  animation: lockGlowPulse 2.2s ease-in-out infinite;
  animation-delay: inherit;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@keyframes lockGlowPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.15); }
}
.chest-lock-ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--color-gold-bright), var(--color-gold) 55%, var(--color-gold-dark) 100%);
  box-shadow:
    0 3px 8px rgba(0,0,0,0.55),
    inset 0 1px 1px rgba(255,255,255,0.45),
    inset 0 -3px 5px rgba(0,0,0,0.4);
}
.chest-lock-emblem {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  font-style: italic;
  color: #5c4522;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.3);
}

.vault-open-label {
  position: relative;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
  opacity: 0.9;
  text-shadow: 0 0 10px rgba(var(--vault-glow),0.6);
  transition: opacity 0.25s ease, letter-spacing 0.25s ease;
}

.vault-name {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: clamp(0.8rem, 3vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
}

.vault-flavor {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  opacity: 0.85;
}

/* Diagonal shimmer sweeping the chest, staggered per card so they light
   up one after another rather than all at once. */
.vault-shimmer {
  position: absolute;
  inset: -4%;
  overflow: hidden;
  border-radius: 16px;
  pointer-events: none;
  z-index: 2;
}
.vault-shimmer::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 45%;
  height: 220%;
  background: linear-gradient(100deg, transparent, rgba(var(--vault-glow-bright),0.35), transparent);
  transform: rotate(10deg);
  animation: vaultShimmer 7s ease-in-out infinite;
  animation-delay: inherit;
  transition: animation-duration 0.3s ease;
}
@keyframes vaultShimmer {
  0%, 12% { left: -70%; opacity: 0; }
  28% { opacity: 1; }
  48%, 100% { left: 130%; opacity: 0; }
}

/* ── Hover — irresistible: the whole chest lifts further, the lid
   visibly cracks open (rotates from its hinge), light bursts from the
   gap, the aura blooms, and the Open label intensifies. ── */
@media (hover: hover) {
  .vault-card:not(.opened):not(.unchosen):hover .vault-chest {
    transform: translateY(-10px);
    animation-play-state: paused;
  }
  .vault-card:not(.opened):not(.unchosen):hover .chest-lid {
    transform: translateY(-3px) rotate(-7deg);
  }
  .vault-card:not(.opened):not(.unchosen):hover .chest-aura {
    opacity: 1;
    transform: scale(1.22);
    animation-play-state: paused;
  }
  .vault-card:not(.opened):not(.unchosen):hover .chest-seam-glow {
    opacity: 1;
    filter: blur(6px);
    transform: scaleY(1.9);
    animation-play-state: paused;
  }
  .vault-card:not(.opened):not(.unchosen):hover .chest-lock-glow {
    opacity: 1;
    transform: scale(1.35);
    animation-play-state: paused;
  }
  .vault-card:not(.opened):not(.unchosen):hover .vault-shimmer::before { animation-duration: 1.3s; }
  .vault-card:not(.opened):not(.unchosen):hover .vault-open-label { opacity: 1; letter-spacing: 0.18em; }
  .vault-card:not(.opened):not(.unchosen):hover .chest-shadow {
    opacity: 0.9;
    transform: translateX(-50%) scaleX(1.1);
  }
}

/* Light shaft rising from the lock through the cracked lid on open. */
.vault-light-shaft {
  position: absolute;
  left: 50%;
  bottom: 58%;
  width: 2px;
  height: 0;
  background: linear-gradient(0deg, rgba(var(--vault-glow-bright),0.95), transparent);
  transform: translateX(-50%);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
}
.vault-card.opening .vault-light-shaft {
  animation: lightShaftRise 0.9s ease-out forwards;
}
@keyframes lightShaftRise {
  0% { height: 0; width: 2px; opacity: 0; }
  35% { opacity: 1; }
  100% { height: 220px; width: 60px; opacity: 0; }
}
.vault-card.opening .chest-lid {
  animation: chestLidPop 0.6s ease-out forwards;
}
@keyframes chestLidPop {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(-8px) rotate(-22deg); }
}
.vault-card.opening .chest-seam-glow,
.vault-card.opening .chest-lock-glow {
  animation: chestFlare 0.9s ease-out forwards;
}
@keyframes chestFlare {
  0% { opacity: 0.7; transform: scale(1); }
  55% { opacity: 1; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(3.4); }
}
.vault-card.opening .vault-emblem,
.vault-card.opening .chest-lock-ring,
.vault-card.opening .chest-lock-emblem,
.vault-card.opening .chest-strap,
.vault-card.opening .chest-stud,
.vault-card.opening .vault-open-label,
.vault-card.opening .vault-name,
.vault-card.opening .vault-flavor {
  animation: vaultFade 0.6s ease forwards;
}
@keyframes vaultFade {
  from { opacity: 1; }
  to { opacity: 0.15; }
}
.vault-card.opened { cursor: default; }
.vault-card.opened .vault-chest,
.vault-card.opened .chest-aura,
.vault-card.opened .chest-shadow { animation: none; }
.vault-card.opened .chest-lid { animation: none; transform: translateY(-8px) rotate(-22deg); }
.vault-card.opened .vault-shimmer::before { animation: none; opacity: 0; }
.vault-card.opened .chest-seam-glow,
.vault-card.opened .chest-lock-glow { animation: none; opacity: 0.85; }
.vault-card.opened .vault-motes span { animation: none; opacity: 0; }

.vault-hint {
  margin: 16px 0 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Connects the vault ritual to the unique product — sits alone between
   the two sections so it reads as a bridge, not either section's own
   heading. */
.section-bridge {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-gold);
  text-align: center;
  margin: 30px 0 6px;
  opacity: 0.9;
}

/* =====================================================================
   SHARED SECTION HEADERS
   ===================================================================== */
.section-kicker {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold-bright);
  margin: 0 0 4px;
}
.section-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0 0 16px;
}

/* =====================================================================
   GAMES SHOWCASE — the PROOF of "found nowhere else". Each tile is a
   live, looping micro-showcase of the real game mechanic, not a static
   icon — one unified card system, gold-only, no per-game color themes.
   Driven by js/gameTiles.js; fully independent of the vault/attribution
   logic in js/app.js.
   ===================================================================== */
.games-section { margin: 30px 0 8px; }
.games-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 560px) {
  .games-grid { grid-template-columns: repeat(4, 1fr); }
}

.game-tile {
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, #1a1510, #0a0704);
  border: 1px solid rgba(201,162,83,0.28);
  box-shadow: var(--shadow-card);
  padding: 12px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) {
  .game-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(201,162,83,0.5);
  }
}
.game-tile-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
}

.tile-stage {
  position: relative;
  width: 100%;
  height: 64px;
  border-radius: 10px;
  background: radial-gradient(ellipse 90% 100% at 50% 100%, rgba(201,162,83,0.08), transparent 70%), #0a0704;
  border: 1px solid rgba(201,162,83,0.16);
  overflow: hidden;
}

/* ── Crash — a rising gold curve + a live multiplier readout, driven in
   lockstep by gameTiles.js so they can never desync. ── */
.crash-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.crash-curve {
  fill: none;
  stroke: var(--color-gold-bright);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 4px rgba(240,217,160,0.6));
}
.crash-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 12%, rgba(240,217,160,0.55), transparent 55%);
  opacity: 0;
  pointer-events: none;
}
.crash-flash.flash-active { animation: crashFlashPulse 0.5s ease-out; }
@keyframes crashFlashPulse {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}
.crash-multiplier {
  position: absolute;
  right: 6px;
  bottom: 5px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-gold-bright);
  text-shadow: 0 0 8px rgba(201,162,83,0.6);
}

/* ── Plinko — a real peg grid + a ball that falls via a finite CSS
   animation, replayed via JS with a random landing lane each loop. ── */
.plinko-pegs {
  position: absolute;
  inset: 8px 6px 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px 0;
  align-items: end;
}
.plinko-pegs span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(201,162,83,0.55);
  margin: 0 auto;
  box-shadow: 0 0 3px rgba(201,162,83,0.4);
}
.plinko-pegs span:nth-child(3n) { opacity: 0.75; }
.plinko-ball {
  position: absolute;
  top: 6px;
  left: 46%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--color-gold-bright), var(--color-gold) 70%);
  box-shadow: 0 0 6px 1px rgba(240,217,160,0.8);
}
.plinko-ball.plinko-fall { animation: plinkoFall 2.4s cubic-bezier(0.3,0.1,0.3,1) forwards; }
.plinko-ball--rest { top: auto; bottom: 8px; }
@keyframes plinkoFall {
  0%   { top: 6px;  transform: translateX(0); }
  20%  { top: 22px; transform: translateX(-8px); }
  40%  { top: 34px; transform: translateX(6px); }
  60%  { top: 44px; transform: translateX(-4px); }
  100% { top: 50px; transform: translateX(0); }
}
.plinko-ball.lane-0.plinko-fall { left: 10%; }
.plinko-ball.lane-1.plinko-fall { left: 30%; }
.plinko-ball.lane-2.plinko-fall { left: 50%; }
.plinko-ball.lane-3.plinko-fall { left: 70%; }
.plinko-ball.lane-4.plinko-fall { left: 90%; }
.plinko-slots {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 4px;
  height: 8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.plinko-slots span {
  border-top: 1px solid rgba(201,162,83,0.35);
  margin: 0 2px;
}

/* ── Mines — pure CSS: each cell periodically flips to reveal a gem-shine,
   staggered so exactly one is "active" at a time, on continuous rotation. ── */
.mines-grid {
  position: absolute;
  inset: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
}
.mines-grid span {
  border-radius: 4px;
  background: linear-gradient(160deg, #1e1710, #0d0906);
  border: 1px solid rgba(201,162,83,0.22);
  position: relative;
  overflow: hidden;
  animation: mineReveal 7.2s ease-in-out infinite;
}
.mines-grid span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, var(--color-gold-bright), var(--color-gold) 60%, transparent 100%);
  opacity: 0;
}
.mines-grid span:nth-child(1) { animation-delay: 0s; }
.mines-grid span:nth-child(2) { animation-delay: 0.8s; }
.mines-grid span:nth-child(3) { animation-delay: 1.6s; }
.mines-grid span:nth-child(4) { animation-delay: 2.4s; }
.mines-grid span:nth-child(5) { animation-delay: 3.2s; }
.mines-grid span:nth-child(6) { animation-delay: 4.0s; }
.mines-grid span:nth-child(7) { animation-delay: 4.8s; }
.mines-grid span:nth-child(8) { animation-delay: 5.6s; }
.mines-grid span:nth-child(9) { animation-delay: 6.4s; }
@keyframes mineReveal {
  0%, 88%, 100% { border-color: rgba(201,162,83,0.22); transform: scale(1); }
  92% { border-color: rgba(240,217,160,0.85); transform: scale(1.06); }
}
.mines-grid span::after { animation: mineShineOpacity 7.2s ease-in-out infinite; animation-delay: inherit; }
@keyframes mineShineOpacity {
  0%, 88%, 100% { opacity: 0; }
  92% { opacity: 0.9; }
}

/* ── Chicken Road — a small silhouette hops across lanes, a live
   multiplier ticking up per hop, driven by gameTiles.js. ── */
.chicken-lanes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.chicken-lanes span { border-right: 1px solid rgba(201,162,83,0.14); }
.chicken-lanes span:last-child { border-right: none; }
.chicken-figure {
  position: absolute;
  bottom: 8px;
  left: 6%;
  width: 16px;
  height: 16px;
  color: var(--color-gold-bright);
  filter: drop-shadow(0 0 4px rgba(201,162,83,0.6));
  transition: left 0.5s cubic-bezier(0.3, 0.6, 0.3, 1.2);
  transform: translateX(-50%);
}
.chicken-figure.chicken-hop { animation: chickenHop 0.5s ease-out; }
.chicken-figure.chicken-reset { animation: chickenFall 0.45s ease-in forwards; }
@keyframes chickenHop {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-9px); }
}
@keyframes chickenFall {
  0% { transform: translateX(-50%) translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateX(-50%) translateY(14px) rotate(35deg); opacity: 0; }
}
.chicken-multiplier {
  position: absolute;
  right: 6px;
  top: 5px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-gold-bright);
  text-shadow: 0 0 8px rgba(201,162,83,0.6);
}

/* =====================================================================
   WHY AMULETDROP — one consistent icon system, real advantages only.
   ===================================================================== */
.features-section { margin: 34px 0 8px; }
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.feature-card {
  position: relative;
  text-align: left;
  padding: 18px 18px 16px;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, #17130d, #0a0704);
  border: 1px solid rgba(201,162,83,0.25);
  box-shadow: var(--shadow-card);
}
.feature-card--hero {
  grid-column: 1 / -1;
  padding: 24px 24px 20px;
  border: 1px solid rgba(201,162,83,0.45);
  background: linear-gradient(160deg, #1d1710, #0a0704);
}
.feature-card--hero .feature-icon { width: 32px; height: 32px; }
.feature-card--hero .feature-title { font-size: 1.2rem; }
.feature-card--hero .feature-desc { font-size: 0.92rem; }
.feature-card--secondary .feature-icon--sm { width: 22px; height: 22px; }

.feature-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  color: var(--color-gold-bright);
  filter: drop-shadow(0 0 6px rgba(201,162,83,0.35));
}
.feature-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 5px;
  color: var(--color-text-primary);
}
.feature-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

@media (min-width: 560px) {
  .features-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   FINAL CTA — one button, one glow color (gold). Trust reassurance sits
   quietly beside it, not as its own loud section.
   ===================================================================== */
.final-cta {
  margin: 38px 0 8px;
  padding: 28px 24px 24px;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, #1d1710, #0a0704);
  border: 1px solid rgba(201,162,83,0.35);
  box-shadow: var(--shadow-card);
}
.final-cta-heading {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--color-text-primary);
}
.final-cta-sub {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0 0 18px;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(244,236,216,0.03);
  border: 1px solid rgba(201,162,83,0.2);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.trust-icon { width: 13px; height: 13px; flex-shrink: 0; color: var(--color-gold); }

.disclaimer {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  opacity: 0.75;
  margin-top: 14px;
}

/* =====================================================================
   WIN MODAL — same structure/classes as before (state machine untouched),
   restyled to the gold-only luxury palette.
   ===================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,3,2,0.88);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.modal-overlay.visible { display: flex; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(160deg, #1d1710, #0a0704);
  border: 1px solid rgba(201,162,83,0.4);
  border-radius: 20px;
  padding: 32px 26px 28px;
  text-align: center;
  box-shadow: 0 0 60px rgba(201,162,83,0.25), var(--shadow-card);
  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; }
}

.modal-flash {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 32%, rgba(240,217,160,0.35), transparent 60%);
  opacity: 0;
  pointer-events: none;
  animation: modalFlash 0.9s ease-out;
}
@keyframes modalFlash {
  0% { opacity: 0.9; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.5); }
}

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

.modal-confetti {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.confetti-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--particle-color, #c9a253);
  box-shadow: 0 0 6px var(--particle-color, #c9a253);
  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;
  }
}

.modal-congrats-stage {
  position: relative;
  z-index: 2;
  padding: 22px 0 18px;
  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-serif);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-gold-bright);
  text-shadow: 0 0 20px rgba(240,217,160,0.5);
  animation: congratsShake 0.6s ease-in-out;
}
.modal-congrats-sub {
  display: block;
  margin-top: 10px;
  font-size: 0.85rem;
  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(-2deg); }
  40% { transform: rotate(2deg); }
  60% { transform: rotate(-1deg); }
  80% { transform: rotate(1deg); }
}

.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: #1a1410;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}

.modal-prize {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--color-gold-bright);
}

.modal-copy {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin: 0 0 22px;
  line-height: 1.5;
}

/* CTA — a single gold gradient, a single glow color. No competing outlines. */
.claim-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 17px 10px;
  border-radius: 14px;
  border: 1px solid rgba(240,217,160,0.5);
  background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold) 50%, var(--color-gold-bright));
  color: #1a1410;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 8px 28px rgba(201,162,83,0.35);
  animation: claimPulse 1.6s ease-in-out infinite;
  overflow: hidden;
}
.claim-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: claimSweep 2.6s ease-in-out infinite;
}
@keyframes claimPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(201,162,83,0.3); }
  50% { box-shadow: 0 10px 34px rgba(201,162,83,0.55); }
}
@keyframes claimSweep {
  0% { left: -60%; }
  60%, 100% { left: 130%; }
}

.modal-timer {
  margin: 16px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}
#countdown {
  display: inline-block;
  color: var(--color-gold-bright);
  font-weight: 700;
  font-size: 0.95rem;
  text-shadow: 0 0 10px rgba(201,162,83,0.5);
  animation: countdownPulse 1s ease-in-out infinite;
}
@keyframes countdownPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
/* Last 60 seconds — JS adds this class. Stays gold, just pulses faster and
   brighter — urgency communicated through intensity, not a new hue. */
.modal-timer--critical #countdown {
  animation: countdownCritical 0.5s ease-in-out infinite;
}
@keyframes countdownCritical {
  0%, 100% { transform: scale(1); text-shadow: 0 0 10px rgba(201,162,83,0.5); }
  50% { transform: scale(1.18); text-shadow: 0 0 20px rgba(240,217,160,0.9); }
}

@media (max-width: 480px) {
  .vault-kicker { font-size: 1rem; margin-bottom: 12px; }
  .vault-grid { gap: 8px; }
  .vault-card { padding: 6px 4px 8px; gap: 4px; }
  .vault-name { font-size: 0.72rem; }
  .vault-flavor { font-size: 0.66rem; }
  .chest-lock-emblem { font-size: 0.78rem; }
  .vault-open-label { font-size: 0.6rem; }
  .section-bridge { font-size: 0.9rem; margin: 24px 0 4px; }
  .games-grid { gap: 8px; }
  .game-tile { padding: 10px 8px 12px; }
  .tile-stage { height: 56px; }
  .feature-card { padding: 14px 14px 13px; }
  .feature-card--hero { padding: 18px 18px 16px; }
  .final-cta { padding: 22px 18px 18px; }
}

/* Respect reduced-motion preference — freeze ambient/idle decoration, keep
   the vault-open interaction (user-initiated) working normally. Game-tile
   JS loops (crash/plinko/chicken) already self-check matchMedia and never
   start their intervals under reduced motion; only Mines' pure-CSS loop
   needs an explicit freeze here. */
@media (prefers-reduced-motion: reduce) {
  .stars,
  .hero-title .accent,
  .claim-btn,
  .claim-btn::before,
  #countdown,
  .modal-ray-burst,
  .confetti-particle,
  .vault-chest,
  .chest-aura,
  .chest-shadow,
  .chest-seam-glow,
  .chest-lock-glow,
  .vault-motes span,
  .vault-shimmer::before,
  .game-tile,
  .mines-grid span,
  .mines-grid span::after,
  .modal-congrats-burst,
  .modal-congrats-stage,
  .modal-congrats-stage.exit,
  .modal-offer-stage.revealed {
    animation: none !important;
  }
}