/* SnakeRoyal — Retro Arcade Landing (static build)
   Design tokens + custom utilities. Layout utilities come from Tailwind Play CDN
   loaded in index.html. */

:root {
  --font-pixel: "Press Start 2P", monospace;
  --font-mono: "VT323", monospace;

  --background: oklch(0.08 0.03 260);
  --foreground: oklch(0.96 0.02 200);
  --card: oklch(0.12 0.05 260);
  --muted-foreground: oklch(0.7 0.05 220);
  --border: oklch(0.3 0.1 220);

  --neon: oklch(0.85 0.18 195);
  --gold: oklch(0.85 0.16 85);
  --magenta: oklch(0.7 0.28 340);

  --shadow-neon: 0 0 12px color-mix(in oklab, var(--neon) 70%, transparent),
                 0 0 32px color-mix(in oklab, var(--neon) 40%, transparent);
  --shadow-gold: 0 0 12px color-mix(in oklab, var(--gold) 70%, transparent),
                 0 0 32px color-mix(in oklab, var(--gold) 40%, transparent);
}

html.light {
  --background: oklch(0.96 0.02 90);
  --foreground: oklch(0.18 0.04 260);
  --card: oklch(0.99 0.015 90);
  --muted-foreground: oklch(0.4 0.04 260);
  --border: oklch(0.55 0.12 200);
  --neon: oklch(0.5 0.15 200);
  --gold: oklch(0.65 0.17 65);
  --magenta: oklch(0.5 0.24 340);
  --shadow-neon: none;
  --shadow-gold: none;
}

/* Base */
* { border-color: var(--border); box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
html, body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 18px;
}
h1, h2, h3, h4, h5, .pixel {
  font-family: var(--font-pixel);
  letter-spacing: 0.02em;
  font-weight: normal;
}
a { color: inherit; text-decoration: none; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
img.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }

/* Layout helpers */
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.bg-background { background-color: var(--background); }
.bg-card\/40 { background-color: color-mix(in oklab, var(--card) 40%, transparent); }
.bg-card\/60 { background-color: color-mix(in oklab, var(--card) 60%, transparent); }
.bg-card\/80 { background-color: color-mix(in oklab, var(--card) 80%, transparent); }
.bg-background\/60 { background-color: color-mix(in oklab, var(--background) 60%, transparent); }

/* Retro utilities */
.grid-bg {
  background-color: var(--background);
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--neon) 12%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--neon) 12%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}
.crt-scanlines {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    color-mix(in oklab, black 25%, transparent) 3px,
    transparent 4px
  );
}
.text-glow-neon {
  color: var(--neon);
  text-shadow:
    0 0 6px color-mix(in oklab, var(--neon) 80%, transparent),
    0 0 18px color-mix(in oklab, var(--neon) 60%, transparent);
}
.text-glow-gold {
  color: var(--gold);
  text-shadow:
    0 0 6px color-mix(in oklab, var(--gold) 80%, transparent),
    0 0 18px color-mix(in oklab, var(--gold) 55%, transparent);
}
.text-glow-magenta {
  color: var(--magenta);
  text-shadow: 0 0 8px color-mix(in oklab, var(--magenta) 70%, transparent);
}
.border-neon {
  border: 2px solid var(--neon);
  box-shadow: var(--shadow-neon), inset 0 0 12px color-mix(in oklab, var(--neon) 25%, transparent);
}
.border-gold {
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-gold), inset 0 0 12px color-mix(in oklab, var(--gold) 25%, transparent);
}
.border-neon-thin { border: 1px solid color-mix(in oklab, var(--neon) 40%, transparent); }
.border-gold-thin { border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); }
.border-y-neon { border-top: 1px solid color-mix(in oklab, var(--neon) 30%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--neon) 30%, transparent); }
.border-t-neon { border-top: 1px solid color-mix(in oklab, var(--neon) 25%, transparent); }

.btn-arcade, .btn-arcade-gold {
  font-family: var(--font-pixel);
  text-transform: uppercase;
  font-size: 0.7rem;
  padding: 0.75rem 1rem;
  transition: transform 120ms steps(2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1;
}
.btn-arcade {
  background: transparent;
  color: var(--neon);
  border: 2px solid var(--neon);
  box-shadow: var(--shadow-neon), inset 0 0 12px color-mix(in oklab, var(--neon) 20%, transparent);
}
.btn-arcade-gold {
  background: var(--gold);
  color: oklch(0.15 0.05 260);
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-gold);
}
.btn-arcade.icon-only { padding: 0.5rem; }
@media (min-width: 640px) {
  .btn-arcade, .btn-arcade-gold { font-size: 0.75rem; padding: 1rem 1.75rem; }
  .btn-arcade.icon-only { padding: 0.75rem; }
}
.btn-arcade:hover, .btn-arcade-gold:hover { transform: translate(-2px, -2px); }

@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.85; } 47% { opacity: 1; } }
.flicker { animation: flicker 4s infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { animation: marquee 30s linear infinite; }

/* Light-mode overrides */
html.light .text-glow-neon,
html.light .text-glow-gold,
html.light .text-glow-magenta { text-shadow: none; }
html.light .flicker { animation: none; }
html.light .btn-arcade,
html.light .btn-arcade-gold { box-shadow: 4px 4px 0 0 var(--foreground); }
html.light .btn-arcade:hover,
html.light .btn-arcade-gold:hover { box-shadow: 2px 2px 0 0 var(--foreground); }
html.light .border-neon { box-shadow: 4px 4px 0 0 color-mix(in oklab, var(--neon) 80%, transparent); }
html.light .border-gold { box-shadow: 4px 4px 0 0 color-mix(in oklab, var(--gold) 80%, transparent); }
html.light .crt-scanlines { display: none; }

/* --- Layout (no Tailwind needed) --- */
.container-x { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .container-x { padding-inline: 1.5rem; } }
.container-narrow { max-width: 56rem; margin-inline: auto; padding-inline: 1rem; }
.container-cta { max-width: 64rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .container-narrow, .container-cta { padding-inline: 1.5rem; } }

.min-h-screen { min-height: 100vh; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.pointer-events-none { pointer-events: none; }
.mix-blend-screen { mix-blend-mode: screen; }
.z-10 { z-index: 10; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.opacity-30 { opacity: .3; }
.opacity-40 { opacity: .4; }
.opacity-60 { opacity: .6; }

/* Header */
.header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; }
@media (min-width: 640px) { .header { padding: 1.5rem; } }
.brand { font-size: 0.75rem; }
@media (min-width: 640px) { .brand { font-size: 1rem; } }
.nav-desktop { display: none; gap: 2rem; }
@media (min-width: 768px) { .nav-desktop { display: flex; } }
.nav-link { font-family: var(--font-pixel); font-size: 10px; color: var(--muted-foreground); }
.nav-link:hover { color: var(--neon); text-shadow: 0 0 6px var(--neon); }
.nav-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.play-desktop { display: none; }
@media (min-width: 640px) { .play-desktop { display: inline-flex; } }
.menu-btn-mobile { display: inline-flex; }
@media (min-width: 768px) { .menu-btn-mobile { display: none; } }

/* Hero */
.section { padding-block: 4rem; }
@media (min-width: 640px) { .section { padding-block: 6rem; } }
.hero { padding-block: 1.5rem 4rem; }
@media (min-width: 640px) { .hero { padding-block: 2.5rem 6rem; } }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 3rem; } }
.badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 2px solid var(--gold); padding: 0.25rem 0.625rem; margin-bottom: 1.25rem;
}
@media (min-width: 640px) { .badge { padding: 0.375rem 0.75rem; margin-bottom: 1.5rem; } }
.badge span { font-family: var(--font-pixel); font-size: 8px; }
@media (min-width: 640px) { .badge span { font-size: 9px; } }
.h1 { font-size: 1.5rem; line-height: 1.25; margin: 0; }
@media (min-width: 640px) { .h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .h1 { font-size: 3.75rem; } }
.hero-desc { margin-top: 1.25rem; max-width: 36rem; font-size: 1rem; line-height: 1.35; color: var(--muted-foreground); font-family: var(--font-mono); }
@media (min-width: 640px) { .hero-desc { margin-top: 1.5rem; font-size: 1.25rem; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
@media (min-width: 640px) { .hero-cta { gap: 1rem; margin-top: 2.5rem; } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; max-width: 28rem; margin-top: 2rem; }
@media (min-width: 640px) { .stats { gap: 1rem; margin-top: 2.5rem; } }
.stat { border: 1px solid color-mix(in oklab, var(--neon) 40%, transparent); padding: 0.5rem; text-align: center; }
@media (min-width: 640px) { .stat { padding: 0.75rem; } }
.stat-num { font-family: var(--font-pixel); font-size: 0.875rem; }
@media (min-width: 640px) { .stat-num { font-size: 1.125rem; } }
.stat-label { font-family: var(--font-pixel); font-size: 7px; margin-top: 0.25rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .stat-label { font-size: 8px; } }

/* Arcade screen */
.arcade { padding: 0.75rem; }
.arcade-head, .arcade-foot { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.arcade-foot { margin-top: 0.5rem; margin-bottom: 0; }
.arcade-head span, .arcade-foot span { font-family: var(--font-pixel); font-size: 8px; }
.arcade-screen { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.arcade-screen img { width: 100%; height: 100%; object-fit: cover; }

/* Marquee */
.marquee-wrap {
  border-top: 1px solid color-mix(in oklab, var(--neon) 30%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--neon) 30%, transparent);
  background: color-mix(in oklab, var(--card) 40%, transparent);
  padding-block: 1rem;
  overflow: hidden;
}
.marquee-track { display: flex; white-space: nowrap; font-family: var(--font-pixel); font-size: 10px; }
.marquee-group { display: flex; gap: 3rem; padding-right: 3rem; flex-shrink: 0; }

/* Section headers */
.section-head { margin-bottom: 2.5rem; }
@media (min-width: 640px) { .section-head { margin-bottom: 3.5rem; } }
.eyebrow { font-family: var(--font-pixel); font-size: 10px; }
.h2 { font-family: var(--font-pixel); font-size: 1.25rem; margin: 0.75rem 0 0; }
@media (min-width: 640px) { .h2 { font-size: 1.875rem; } }

/* Cards grid */
.cards-3 { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.card { padding: 1.25rem; position: relative; }
@media (min-width: 640px) { .card { padding: 1.5rem; } }
.card-number {
  font-family: var(--font-pixel); position: absolute; top: -0.75rem; left: 1rem;
  background: var(--background); padding-inline: 0.5rem; font-size: 10px;
}
.card h3 { font-family: var(--font-pixel); font-size: 0.75rem; margin: 0 0 0.75rem; }
@media (min-width: 640px) { .card h3 { font-size: 0.875rem; } }
.card p { color: var(--muted-foreground); font-size: 1rem; line-height: 1.35; margin: 0; }
@media (min-width: 640px) { .card p { font-size: 1.125rem; } }
.card-icon { width: 2rem; height: 2rem; margin-bottom: 1rem; color: var(--neon); }

/* Rooms */
.room-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 0.75rem; }
.room-head h3 { font-family: var(--font-pixel); font-size: 0.75rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px) { .room-head h3 { font-size: 0.875rem; } }
.room-players { font-family: var(--font-pixel); font-size: 8px; color: var(--muted-foreground); flex-shrink: 0; }
.room-entry { margin-top: 1.25rem; display: flex; align-items: baseline; gap: 0.5rem; }
.room-entry .num { font-family: var(--font-pixel); font-size: 1.25rem; }
@media (min-width: 640px) { .room-entry .num { font-size: 1.5rem; } }
.room-entry .unit { font-family: var(--font-pixel); font-size: 10px; color: var(--muted-foreground); }
.room-pot { margin-top: 0.5rem; font-size: 1.125rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .room-pot { font-size: 1.25rem; } }
.room-cta { margin-top: 1.5rem; width: 100%; }

/* Tokenomics */
.tok-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .tok-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.tok-desc { margin-top: 1.25rem; font-size: 1rem; color: var(--muted-foreground); line-height: 1.35; }
@media (min-width: 640px) { .tok-desc { margin-top: 1.5rem; font-size: 1.25rem; } }
.tok-cards { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .tok-cards { margin-top: 2rem; grid-template-columns: 1fr 1fr; } }
.tok-card { display: flex; gap: 0.75rem; padding: 0.75rem; align-items: flex-start; }
@media (min-width: 640px) { .tok-card { padding: 1rem; } }
.tok-card svg { flex-shrink: 0; margin-top: 4px; color: var(--gold); width: 20px; height: 20px; }
.tok-card .t { font-family: var(--font-pixel); font-size: 10px; }
.tok-card .d { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .tok-card .d { font-size: 1rem; } }
.tok-coin { padding: 1.5rem; text-align: center; order: -1; }
@media (min-width: 1024px) { .tok-coin { padding: 2.5rem; order: 0; } }
.tok-coin img { width: 8rem; height: auto; margin-inline: auto; }
@media (min-width: 640px) { .tok-coin img { width: 220px; } }
.tok-coin .name { font-family: var(--font-pixel); font-size: 1rem; margin-top: 1rem; }
@media (min-width: 640px) { .tok-coin .name { font-size: 1.125rem; margin-top: 1.5rem; } }
.tok-coin .chain { font-family: var(--font-pixel); font-size: 10px; margin-top: 0.5rem; color: var(--muted-foreground); }

/* FAQ */
.faq details { padding: 1rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .faq details { padding: 1.25rem; } }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 0.75rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { font-family: var(--font-pixel); font-size: 10px; line-height: 1.6; }
@media (min-width: 640px) { .faq summary .q { font-size: 11px; } }
.faq summary .arr { font-family: var(--font-pixel); font-size: 12px; transition: transform 150ms; }
.faq details[open] summary .arr { transform: rotate(90deg); }
.faq details p { margin: 1rem 0 0; font-size: 1rem; color: var(--muted-foreground); line-height: 1.35; }
@media (min-width: 640px) { .faq details p { font-size: 1.125rem; } }

/* CTA */
.cta { padding: 1.5rem; text-align: center; }
@media (min-width: 640px) { .cta { padding: 2.5rem; } }
.cta .press { font-family: var(--font-pixel); font-size: 10px; }
.cta .h2 { font-size: 1.25rem; margin-top: 1rem; }
@media (min-width: 640px) { .cta .h2 { font-size: 2.25rem; } }
.cta p { margin: 1rem auto 0; max-width: 36rem; font-size: 1rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .cta p { font-size: 1.125rem; } }
.cta .btn-arcade-gold { margin-top: 1.5rem; }
@media (min-width: 640px) { .cta .btn-arcade-gold { margin-top: 2rem; } }

/* Footer */
footer {
  border-top: 1px solid color-mix(in oklab, var(--neon) 25%, transparent);
  padding-block: 1.5rem;
}
@media (min-width: 640px) { footer { padding-block: 2rem; } }
.footer-row { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
@media (min-width: 640px) { .footer-row { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-row span { font-family: var(--font-pixel); font-size: 9px; }

/* Mobile menu drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 60; opacity: 0; pointer-events: none; transition: opacity 200ms; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 18rem;
  background: var(--background);
  border-left: 2px solid var(--neon);
  padding: 1.5rem; z-index: 70;
  transform: translateX(100%); transition: transform 250ms ease-out;
  display: flex; flex-direction: column; gap: 1rem;
}
.drawer.open { transform: translateX(0); }
.drawer .title { font-family: var(--font-pixel); font-size: 12px; color: var(--neon); text-shadow: 0 0 6px var(--neon); margin-bottom: 1rem; }
.drawer .nav-link-m {
  font-family: var(--font-pixel); font-size: 11px; color: var(--neon);
  border-bottom: 1px solid color-mix(in oklab, var(--neon) 30%, transparent);
  padding-bottom: 0.75rem;
}
.drawer .close-btn { position: absolute; top: 1rem; right: 1rem; font-family: var(--font-pixel); font-size: 12px; color: var(--muted-foreground); }

/* Icon size helpers */
.icon-sm { width: 12px; height: 12px; }
.icon-md { width: 16px; height: 16px; }
.icon-lg { width: 32px; height: 32px; }

/* CRT vignette (dark only) */
.vignette { background: radial-gradient(ellipse at center, transparent 40%, oklch(0.05 0.02 260) 100%); }
html.light .vignette { display: none; }