/* ============================================================
   Lucky Light Zone — "Neon After Dark" theme
   A luminous neon-sign arcade. True near-black base, soft neon
   glow (electric cyan + hot ruby + warm bulb-amber), running
   lightbulb marquee frames, neon-tube lucky icons, Bungee signage
   + Space Grotesk body.

   STRUCTURE is intentionally different from every other brand:
   a FIXED LEFT SIDEBAR (not a top masthead), a BENTO-MOSAIC home
   (not stacked hero/stat/grid sections), marquee-bulb lobby tiles,
   and a wired neon-node "how it works".
   ============================================================ */

:root{
  /* ---- true near-black base ---- */
  --ink-0:#060608;
  --ink-1:#0b0b10;
  --ink-2:#101018;
  --ink-3:#16161f;
  --panel:#13131c;
  --panel-2:#181824;

  /* ---- neon ---- */
  --cyan:#19e3ff;
  --cyan-2:#86f1ff;
  --ruby:#ff3b6b;
  --ruby-2:#ff7da0;
  --amber:#ffd166;     /* warm bulb */
  --amber-2:#ffe3a3;
  --violet:#9b6bff;
  --lucky:#36e29a;     /* lucky-green, used sparingly */

  /* ---- text ---- */
  --bone:#f3f5ff;
  --bone-soft:#d4d8ee;
  --dim:#969cba;
  --dim-2:#646a86;

  /* ---- lines ---- */
  --line:rgba(134,241,255,.2);
  --line-soft:rgba(255,255,255,.08);
  --line-ruby:rgba(255,59,107,.4);

  /* ---- glow ---- */
  --glow-cyan:0 0 18px rgba(25,227,255,.55);
  --glow-ruby:0 0 18px rgba(255,59,107,.55);
  --glow-amber:0 0 16px rgba(255,209,102,.6);
  --shadow-lg:0 28px 64px -28px rgba(0,0,0,.85);

  /* ---- type ---- */
  --font-display:"Bungee", "Impact", system-ui, sans-serif;
  --font-body:"Space Grotesk", "Segoe UI", system-ui, sans-serif;

  /* ---- shape ---- */
  --r-lg:16px;
  --r-md:11px;
  --r-sm:7px;
  --sidebar-w:250px;
  --maxw:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(15.5px,1vw,17px);
  line-height:1.66;
  color:var(--bone-soft);
  background:var(--ink-1);
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; line-height:1.05; color:var(--bone); margin:0 0 .5em; letter-spacing:.005em; }
a{ color:var(--cyan-2); text-decoration:none; transition:color .18s ease; }
a:hover{ color:var(--cyan); }
img{ max-width:100%; display:block; }
p{ margin:0 0 1em; }
strong{ color:var(--bone); font-weight:700; }
::selection{ background:rgba(25,227,255,.3); color:#fff; }

/* neon text helpers */
.neon{ color:var(--cyan); text-shadow:0 0 6px rgba(25,227,255,.7), 0 0 18px rgba(25,227,255,.45); }
.neon--ruby{ color:var(--ruby); text-shadow:0 0 6px rgba(255,59,107,.7), 0 0 18px rgba(255,59,107,.45); }
.neon--amber{ color:var(--amber); text-shadow:0 0 6px rgba(255,209,102,.7), 0 0 18px rgba(255,209,102,.4); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--cyan); color:#022; padding:.6em 1em; z-index:300; border-radius:0 0 var(--r-sm) 0; font-family:var(--font-display); }
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{ display:inline-block; width:1em; height:1em; vertical-align:-.14em; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }

/* ============================================================
   Backdrop — dark room, neon haze pools, faint grid floor
   ============================================================ */
.zone-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(60% 40% at 16% 8%, rgba(25,227,255,.16), transparent 60%),
    radial-gradient(55% 40% at 88% 14%, rgba(255,59,107,.16), transparent 60%),
    radial-gradient(70% 50% at 50% 116%, rgba(255,209,102,.1), transparent 60%),
    linear-gradient(180deg, var(--ink-0), var(--ink-1) 60%, var(--ink-2));
}
/* perspective grid floor */
.zone-bg__floor{ position:absolute; left:-20%; right:-20%; bottom:0; height:46vh; opacity:.35;
  background-image:
    linear-gradient(rgba(25,227,255,.0), rgba(25,227,255,.0)),
    repeating-linear-gradient(90deg, rgba(134,241,255,.4) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(134,241,255,.3) 0 1px, transparent 1px 48px);
  transform:perspective(420px) rotateX(64deg); transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 70%); mask-image:linear-gradient(180deg, transparent, #000 70%); }
.zone-bg__specks{ position:absolute; inset:0; opacity:.8; background-repeat:no-repeat;
  background-image:
    radial-gradient(2px 2px at 22% 26%, var(--cyan-2), transparent),
    radial-gradient(2px 2px at 70% 18%, var(--ruby-2), transparent),
    radial-gradient(1.6px 1.6px at 46% 60%, var(--amber-2), transparent),
    radial-gradient(2px 2px at 84% 54%, var(--cyan-2), transparent),
    radial-gradient(1.6px 1.6px at 32% 80%, var(--ruby-2), transparent);
  animation:zflicker 7s ease-in-out infinite; }
@keyframes zflicker{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .zone-bg__specks{ animation:none; } }

/* ============================================================
   App shell — FIXED LEFT SIDEBAR + content column
   ============================================================ */
.shell{ min-height:100vh; }
.content{ margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.content > main{ flex:1; }
.wrap{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; }
.wrap--narrow{ max-width:720px; }
.section{ padding:clamp(2.6rem,5vw,4.4rem) 0; }

.sidebar{ position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); z-index:120;
  display:flex; flex-direction:column; gap:1.3rem; padding:1.5rem 1.2rem;
  background:linear-gradient(180deg, var(--ink-2), var(--ink-0));
  border-right:1px solid var(--line); overflow-y:auto; }
.sidebar::after{ content:""; position:absolute; top:0; bottom:0; right:0; width:1px;
  background:linear-gradient(180deg, transparent, var(--cyan), var(--ruby), transparent); opacity:.6; }

.brand{ display:flex; align-items:center; gap:.6rem; }
.brand__sigil{ width:42px; height:42px; flex:none; display:grid; place-items:center; }
.brand__word{ font-family:var(--font-display); font-size:1.04rem; line-height:1.1; color:var(--bone); letter-spacing:.01em; }
.brand__accent{ color:var(--cyan); text-shadow:var(--glow-cyan); }

.side-nav{ display:flex; flex-direction:column; gap:.2rem; margin-top:.4rem; }
.side-nav__head{ font-family:var(--font-body); font-weight:700; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim-2); margin:.4rem .6rem .3rem; }
.side-nav a{ display:flex; align-items:center; gap:.7rem; padding:.62rem .7rem; border-radius:var(--r-md);
  color:var(--dim); font-family:var(--font-body); font-weight:600; font-size:.92rem; letter-spacing:.01em;
  border:1px solid transparent; transition:background .18s, color .18s, border-color .18s; }
.side-nav a .ico{ width:1.05em; height:1.05em; color:var(--dim-2); transition:color .18s; }
.side-nav a:hover{ color:var(--bone); background:rgba(134,241,255,.06); }
.side-nav a:hover .ico{ color:var(--cyan); }
.side-nav a[aria-current="page"]{ color:var(--bone); background:rgba(25,227,255,.1); border-color:var(--line); }
.side-nav a[aria-current="page"] .ico{ color:var(--cyan); }

.side-coins{ margin-top:auto; }
.coin-chip{ display:inline-flex; align-items:center; gap:.5rem; width:100%;
  font-family:var(--font-display); font-size:.92rem; color:var(--amber);
  background:rgba(255,209,102,.08); border:1px solid rgba(255,209,102,.32); padding:.55rem .8rem; border-radius:var(--r-md);
  box-shadow:inset 0 0 16px rgba(255,209,102,.1); }
.side-help{ font-size:.76rem; color:var(--dim-2); line-height:1.5; }
.side-help a{ color:var(--ruby-2); font-weight:600; }
.side-help strong{ color:var(--bone-soft); }
.side-legal{ display:flex; flex-wrap:wrap; gap:.4rem .8rem; }
.side-legal a{ font-size:.72rem; color:var(--dim-2); }
.side-legal a:hover{ color:var(--cyan); }

/* mobile top bar (sidebar collapses) */
.topbar{ display:none; }
@media (max-width:900px){
  .content{ margin-left:0; }
  .sidebar{ transform:translateX(-100%); transition:transform .26s ease; width:min(82vw,300px); box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:none; }
  .topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; position:sticky; top:0; z-index:110;
    padding:.7rem 1.1rem; background:rgba(8,8,12,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .topbar__toggle{ display:inline-grid; gap:5px; width:42px; height:42px; place-content:center;
    background:rgba(134,241,255,.06); border:1px solid var(--line); border-radius:11px; cursor:pointer; }
  .topbar__toggle span{ display:block; width:20px; height:2px; background:var(--bone); border-radius:2px; }
  .scrim{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:115; opacity:0; pointer-events:none; transition:opacity .26s; }
  .scrim.show{ opacity:1; pointer-events:auto; }
}
@media (min-width:901px){ .scrim{ display:none; } }

/* ============================================================
   Buttons
   ============================================================ */
.btn{ font-family:var(--font-display); font-weight:400; font-size:.82rem; letter-spacing:.02em;
  border:0; cursor:pointer; border-radius:999px; padding:.74em 1.4em;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em; text-transform:uppercase;
  transition:transform .14s ease, box-shadow .25s ease, background .2s, color .2s; }
.btn--lg{ padding:.92em 1.7em; font-size:.92rem; }
.btn--sm{ padding:.5em 1em; font-size:.72rem; }
.btn--primary{ color:#04181c; background:linear-gradient(120deg, var(--cyan), var(--cyan-2));
  box-shadow:var(--glow-cyan), inset 0 1px 0 rgba(255,255,255,.4); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 0 28px rgba(25,227,255,.8); }
.btn--ruby{ color:#fff; background:linear-gradient(120deg, var(--ruby), var(--ruby-2)); box-shadow:var(--glow-ruby); }
.btn--ruby:hover{ transform:translateY(-2px); box-shadow:0 0 28px rgba(255,59,107,.8); }
.btn--ghost{ color:var(--bone); background:transparent; border:1.5px solid var(--line); }
.btn--ghost:hover{ color:#fff; border-color:var(--cyan); box-shadow:var(--glow-cyan); }

.eyebrow{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-body); font-weight:700;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); margin-bottom:.9rem; }
.eyebrow .ico{ width:1.1em; height:1.1em; }
.lead{ font-size:1.04rem; color:var(--bone-soft); }

/* ============================================================
   Marquee lightbulb frame (reusable) — running bulbs top & bottom
   ============================================================ */
.marquee-frame{ position:relative; border-radius:var(--r-lg); }
.marquee-frame::before,.marquee-frame::after{ content:""; position:absolute; left:8px; right:8px; height:6px; z-index:4;
  background-image:radial-gradient(circle, var(--amber-2) 0 2.4px, transparent 3px);
  background-size:17px 6px; background-repeat:repeat-x;
  filter:drop-shadow(0 0 4px rgba(255,209,102,.85));
  animation:chase 1.1s linear infinite; }
.marquee-frame::before{ top:5px; }
.marquee-frame::after{ bottom:5px; animation-direction:reverse; }
@keyframes chase{ to{ background-position-x:17px; } }
@media (prefers-reduced-motion:reduce){ .marquee-frame::before,.marquee-frame::after{ animation:none; } }

/* ============================================================
   BENTO hero cluster (home)
   ============================================================ */
.bento{ display:grid; grid-template-columns:2fr 1fr; gap:1.1rem; padding-top:clamp(1.4rem,3vw,2.4rem); }
.bento__hero{ grid-row:span 3; position:relative; overflow:hidden; padding:clamp(1.6rem,3vw,2.6rem);
  background:radial-gradient(120% 120% at 0% 0%, rgba(25,227,255,.12), transparent 55%), var(--panel);
  border:1px solid var(--line); border-radius:var(--r-lg); display:flex; flex-direction:column; justify-content:center; }
.bento__hero h1{ font-size:clamp(2rem,4.4vw,3.5rem); line-height:1; margin:0 0 1rem; }
.bento__hero p{ color:var(--bone-soft); max-width:42ch; font-size:clamp(1rem,1.4vw,1.12rem); }
.bento__hero .hero__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem; }

.tile{ position:relative; overflow:hidden; padding:1.2rem 1.3rem; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-lg); display:flex; flex-direction:column; justify-content:center; gap:.2rem; }
.tile--sign{ align-items:center; text-align:center; background:
  radial-gradient(80% 80% at 50% 30%, rgba(255,59,107,.16), transparent 60%), var(--panel); }
.tile__sign-on{ font-family:var(--font-display); font-size:1.4rem; color:var(--ruby); text-shadow:var(--glow-ruby);
  animation:flicker 4s infinite; }
@keyframes flicker{ 0%,19%,21%,23%,80%,100%{ opacity:1; } 20%,22%{ opacity:.45; } }
@media (prefers-reduced-motion:reduce){ .tile__sign-on{ animation:none; } }
.tile__sign-sub{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.tile__num{ font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); color:var(--bone); line-height:1; }
.tile__label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
@media (max-width:760px){
  .bento{ grid-template-columns:1fr 1fr; }
  .bento__hero{ grid-column:1 / -1; grid-row:auto; }
}
@media (max-width:460px){ .bento{ grid-template-columns:1fr; } }

/* ============================================================
   "The Zone" lobby — marquee-bulb game tiles
   ============================================================ */
.zone-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.6rem; }
.zone-title{ font-size:clamp(1.7rem,3.2vw,2.4rem); margin:0; }
.zone-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media (max-width:820px){ .zone-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .zone-grid{ grid-template-columns:1fr; } }

.gtile{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; padding:14px 14px 0;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.gtile:hover{ transform:translateY(-5px); border-color:var(--cyan); box-shadow:var(--shadow-lg), var(--glow-cyan); }
.gtile__screen{ position:relative; border-radius:var(--r-md); overflow:hidden; aspect-ratio:16/10; background:var(--ink-0); }
.gtile__screen img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gtile:hover .gtile__screen img{ transform:scale(1.06); }
.gtile__tag{ position:absolute; top:8px; left:8px; z-index:5; font-family:var(--font-body); font-size:.6rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#04181c; background:var(--cyan); padding:.3em .6em; border-radius:999px; }
.gtile__body{ padding:.95rem .4rem 1.2rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.gtile__title{ font-family:var(--font-display); font-size:1.04rem; margin:0; color:var(--bone); }
.gtile__meta{ font-family:var(--font-body); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); margin:0; }
.gtile__blurb{ color:var(--dim); font-size:.86rem; margin:0; }
.gtile__cta{ margin-top:auto; align-self:flex-start; }

/* ============================================================
   Neon-node "how it works" (wired nodes, not step cards)
   ============================================================ */
.wire{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.4rem; }
.wire::before{ content:""; position:absolute; top:34px; left:12%; right:12%; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--ruby)); box-shadow:0 0 10px rgba(25,227,255,.6); opacity:.7; }
.node{ position:relative; text-align:center; padding:0 .6rem; }
.node__dot{ position:relative; z-index:2; width:68px; height:68px; margin:0 auto 1rem; border-radius:50%;
  display:grid; place-items:center; background:var(--ink-1); border:2px solid var(--cyan);
  box-shadow:var(--glow-cyan); font-family:var(--font-display); font-size:1.4rem; color:var(--cyan); }
.node:nth-child(2) .node__dot{ border-color:var(--amber); box-shadow:var(--glow-amber); color:var(--amber); }
.node:nth-child(3) .node__dot{ border-color:var(--ruby); box-shadow:var(--glow-ruby); color:var(--ruby); }
.node__title{ font-family:var(--font-display); font-size:1.02rem; margin:0 0 .35rem; }
.node p{ margin:0; color:var(--dim); font-size:.88rem; }
@media (max-width:680px){
  .wire{ grid-template-columns:1fr; gap:1.8rem; }
  .wire::before{ top:0; bottom:0; left:34px; right:auto; width:2px; height:auto; background:linear-gradient(180deg,var(--cyan),var(--ruby)); }
  .node{ display:grid; grid-template-columns:68px 1fr; gap:1rem; text-align:left; align-items:center; }
  .node__dot{ margin:0; }
}

/* ============================================================
   Marquee ticker of perks (replaces stat band repeats)
   ============================================================ */
.perks{ border-block:1px solid var(--line-soft); overflow:hidden; background:rgba(11,11,16,.6); }
.perks__track{ display:flex; gap:2.6rem; align-items:center; white-space:nowrap; width:max-content; padding:.8rem 0; animation:scroll 30s linear infinite; }
.perks__track span{ font-family:var(--font-display); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-soft); display:inline-flex; align-items:center; gap:.6rem; }
.perks__track .ico{ width:1.1em; height:1.1em; color:var(--amber); }
@keyframes scroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .perks__track{ animation:none; } }

/* ============================================================
   Highlights rotator
   ============================================================ */
.highlights{ position:relative; min-height:140px; }
.hi{ position:absolute; inset:0; opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s; text-align:center; }
.hi.is-active{ position:relative; opacity:1; transform:none; }
.hi__big{ font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2rem); color:var(--bone); margin:0 0 .5rem; }
.hi__sub{ color:var(--dim); max-width:52ch; margin:0 auto; }
.hi-dots{ display:flex; gap:.5rem; justify-content:center; margin-top:1.4rem; }
.hi-dots button{ width:10px; height:10px; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer; padding:0; transition:background .2s, box-shadow .2s; }
.hi-dots button[aria-selected="true"]{ background:var(--cyan); box-shadow:var(--glow-cyan); border-color:var(--cyan); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ display:grid; gap:.7rem; }
.faq__item{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.faq__q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; color:var(--bone);
  font-family:var(--font-display); font-size:.94rem; padding:1.05rem 1.2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq__icon{ position:relative; width:15px; height:15px; flex:none; }
.faq__icon::before,.faq__icon::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--cyan); box-shadow:var(--glow-cyan); }
.faq__icon::before{ width:15px; height:2px; }
.faq__icon::after{ width:2px; height:15px; transition:transform .25s; }
.faq__q[aria-expanded="true"] .faq__icon::after{ transform:scaleY(0); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq__a p{ padding:0 1.2rem 1.15rem; margin:0; color:var(--dim); }

/* ============================================================
   Trust band
   ============================================================ */
.trust{ text-align:center; }
.trust__panel{ display:inline-flex; flex-wrap:wrap; gap:1.4rem 2rem; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem 2rem; margin-top:1.6rem; }
.partner-logo{ height:42px; width:auto; filter:brightness(0) invert(1); opacity:.82; transition:opacity .2s; }
.partner-logo:hover{ opacity:1; }
.partner-logo--badge{ filter:none; border-radius:8px; }

/* ============================================================
   Footer (bottom of content column)
   ============================================================ */
.footer{ border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(11,11,16,.4), var(--ink-0)); }
.footer__inner{ display:grid; grid-template-columns:2fr 1fr 1.4fr; gap:2rem; padding:clamp(2.2rem,4vw,3.2rem) 0 1.6rem; }
.footer__blurb{ color:var(--dim); font-size:.88rem; max-width:42ch; }
.footer__age{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%;
  font-family:var(--font-display); font-size:.9rem; color:var(--bone); border:2px solid var(--cyan); box-shadow:var(--glow-cyan); margin-top:.4rem; }
.footer__head{ font-family:var(--font-display); font-size:.92rem; color:var(--bone); margin-bottom:1rem; }
.footer__links{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.footer__links a{ color:var(--dim); font-size:.88rem; }
.footer__links a:hover{ color:var(--cyan); }
.footer__help{ color:var(--dim); font-size:.88rem; }
.partners{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1rem; }
.footer__base{ border-top:1px solid var(--line-soft); }
.footer__base p{ margin:.4rem 0; color:var(--dim-2); font-size:.78rem; }
.footer__base p:first-child{ padding-top:1.1rem; }
@media (max-width:760px){ .footer__inner{ grid-template-columns:1fr; gap:1.6rem; } }

/* ============================================================
   Page hero (interior) + prose (legal)
   ============================================================ */
.page-hero{ padding:clamp(2.2rem,5vw,3.6rem) 0 1.4rem; border-bottom:1px solid var(--line-soft); }
.page-hero h1{ font-size:clamp(1.9rem,4.4vw,2.9rem); margin:.2rem 0; }
.page-hero p{ color:var(--dim); max-width:60ch; }

.prose{ max-width:740px; }
.prose h2{ font-family:var(--font-display); font-size:1.14rem; margin:2rem 0 .6rem; color:var(--bone); }
.prose h3{ font-size:1.02rem; margin:1.4rem 0 .4rem; }
.prose p,.prose li{ color:var(--bone-soft); }
.prose ul{ padding-left:1.2rem; display:grid; gap:.4rem; margin:0 0 1em; }
.prose a{ text-decoration:underline; text-underline-offset:3px; }
.prose code{ font-family:ui-monospace,Menlo,monospace; font-size:.86em; background:rgba(25,227,255,.12); padding:.1em .4em; border-radius:5px; color:var(--cyan-2); }
.callout{ background:rgba(255,59,107,.1); border:1px solid var(--line-ruby); border-left-width:4px; border-radius:var(--r-md); padding:1rem 1.2rem; margin:1.2rem 0; color:var(--bone-soft); }
.callout--cyan{ background:rgba(25,227,255,.08); border-color:var(--line); }

.cookie-table{ width:100%; border-collapse:collapse; margin:.6rem 0 1.4rem; font-size:.86rem; }
.cookie-table th,.cookie-table td{ text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.cookie-table th{ color:var(--bone); font-family:var(--font-display); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; }
.cookie-table td{ color:var(--bone-soft); }
.cookie-table code{ color:var(--cyan-2); }

.checklist{ list-style:none; padding:0; margin:0 0 1.4rem; display:grid; gap:.6rem; }
.checklist li{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:.85rem 1.1rem; display:flex; gap:.7rem; align-items:flex-start; color:var(--bone-soft); }
.checklist li::before{ content:"?"; flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font-family:var(--font-display); font-size:.78rem; color:#04181c; background:var(--cyan); }

.rg-tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.4rem 0; }
.rg-tool{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem; }
.rg-tool h3{ margin-top:0; }
@media (max-width:760px){ .rg-tools{ grid-template-columns:1fr; } }

/* ============================================================
   Game page
   ============================================================ */
.gamebar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.gamebar h1{ font-size:clamp(1.5rem,3.2vw,2.2rem); margin:0; }
.game-stage{ position:relative; padding:14px; }
.game-frame{ position:relative; width:100%; aspect-ratio:16/10; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--cyan); box-shadow:var(--glow-cyan), var(--shadow-lg); background:var(--ink-0); }
.game-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.game-desc{ color:var(--dim); margin-top:1.2rem; max-width:70ch; }
.game-meta{ display:inline-flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.gchip{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-soft);
  background:rgba(134,241,255,.06); border:1px solid var(--line); border-radius:999px; padding:.4em .9em; }
@media (max-width:680px){ .game-frame{ aspect-ratio:4/5; } }

/* ============================================================
   Contact form
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1.4fr .9fr; gap:2rem; align-items:start; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
.form{ display:grid; gap:1rem; }
.field{ display:grid; gap:.4rem; }
.field__label{ font-family:var(--font-display); font-size:.74rem; letter-spacing:.04em; color:var(--bone-soft); }
.field input,.field textarea{ font-family:var(--font-body); font-size:1rem; color:var(--bone);
  background:rgba(6,6,8,.6); border:1px solid var(--line); border-radius:var(--r-md); padding:.74em .9em;
  transition:border-color .2s, box-shadow .2s; }
.field input:focus,.field textarea:focus{ outline:0; border-color:var(--cyan); box-shadow:var(--glow-cyan); }
.field textarea{ min-height:140px; resize:vertical; }
.form__error{ color:var(--ruby-2); font-size:.88rem; margin:0; }
.form__success{ color:var(--cyan-2); font-size:.9rem; margin:0; }
.info-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem; }
.info-card h3{ margin-top:0; }
.info-card p{ color:var(--bone-soft); font-size:.92rem; }

/* ============================================================
   Age gate + cookie banner
   ============================================================ */
.agegate{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:1.4rem;
  background:radial-gradient(circle at 50% 30%, rgba(16,16,24,.9), rgba(4,4,6,.97)); backdrop-filter:blur(8px); }
.agegate[hidden]{ display:none; }
.agegate__panel{ width:min(100%,470px); text-align:center; background:var(--panel-2);
  border:1px solid var(--cyan); border-radius:var(--r-lg); padding:2.4rem 2rem 2rem; box-shadow:var(--shadow-lg), var(--glow-cyan); }
.agegate__sigil{ display:inline-grid; place-items:center; margin-bottom:.6rem; }
.agegate__title{ font-size:1.5rem; margin:0 0 .6rem; }
.agegate__copy{ color:var(--bone-soft); font-size:.95rem; margin-bottom:1.4rem; }
.agegate__actions{ display:flex; flex-direction:column; gap:.6rem; }
.agegate__fine{ font-size:.76rem; color:var(--dim-2); margin:1.2rem 0 0; }

.cookiebar{ position:fixed; left:1.2rem; right:1.2rem; bottom:1.2rem; z-index:350;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:space-between;
  background:var(--panel); border:1px solid var(--cyan); border-radius:var(--r-lg); padding:1rem 1.3rem;
  box-shadow:var(--shadow-lg); max-width:760px; margin-inline:auto; }
.cookiebar[hidden]{ display:none; }
.cookiebar p{ margin:0; font-size:.86rem; color:var(--bone-soft); flex:1 1 280px; }
.cookiebar__actions{ display:flex; gap:.6rem; }

/* ===================== Signup modal ===================== */
.signup-modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:1.4rem;
  background:rgba(0,0,0,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.signup-modal[hidden]{display:none;}
.signup-modal__panel{width:min(100%,460px);max-height:88vh;overflow-y:auto;
  background:var(--panel-2);border:1px solid var(--cyan);border-radius:var(--r-lg);
  padding:2rem 1.8rem;position:relative;box-shadow:var(--shadow-lg),var(--glow-cyan);}
.signup-modal__close{position:absolute;top:.9rem;right:1rem;background:none;border:0;
  color:var(--dim);font-size:1.5rem;line-height:1;cursor:pointer;padding:.2rem .4rem;
  border-radius:var(--r-sm);transition:color .15s;}
.signup-modal__close:hover{color:var(--bone);}
.signup-modal__title{font-size:1.4rem;margin:0 0 .4rem;padding-right:2rem;}
.signup-modal__lead{color:var(--bone-soft);font-size:.9rem;margin:0 0 1.4rem;}
.sform{display:grid;gap:.85rem;}
.sfield{display:grid;gap:.3rem;}
.sfield__label{font-family:var(--font-display);font-size:.74rem;
  letter-spacing:.04em;color:var(--bone-soft);}
.sfield__hint{font-weight:400;opacity:.75;}
.sfield input,.sfield select{font-family:var(--font-body);font-size:.97rem;color:var(--bone);
  background:rgba(6,6,8,.6);border:1px solid var(--line);border-radius:var(--r-md);
  padding:.66em .85em;width:100%;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;}
.sfield input:focus,.sfield select:focus{outline:0;border-color:var(--cyan);box-shadow:var(--glow-cyan);}
.sfield.is-invalid input,.sfield.is-invalid select{border-color:var(--ruby)!important;}
.sfield__error{font-size:.76rem;color:var(--ruby-2);min-height:1.1em;}
.dob-row{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:.4rem;}
.btn--block{width:100%;}
.sf-error{color:var(--ruby-2);font-size:.82rem;margin:.3rem 0 0;}
.sf-success{color:var(--lucky);font-size:.9rem;margin:.3rem 0 0;}
.sf-footer{font-size:.75rem;color:var(--dim-2);margin:.8rem 0 0;text-align:center;}
.sf-footer a{color:inherit;text-decoration:underline;}

/* reveal */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }