/* FOMO GUYS landing, candy arcade: vivid-to-night violet sections, candy sticker panels with ink outlines,
   chunky game buttons, clean type (no outlined text) and real game renders of the guys with the live fomo eyes.
   How it works, Extra lives and Where the money goes sit in it as dark bands (.dk): the arcade-night look, candy fonts and edges. */
:root{
  --ink:#230c3f;--ink-2:#3b1a60;--night:#1a0833;
  --v9:#2a0c57;--v8:#3d1382;--v7:#5219b0;--v6:#6a26db;--v5:#8544f5;--v4:#a57bff;--v3:#c9b0ff;--v2:#e8ddff;
  --mint:#5fe6bf;--mint-2:#a4f7de;--mint-d:#1fa882;
  --gold:#ffcd3c;--gold-2:#ffe68a;--gold-d:#d98a0b;
  --pink:#ff6fb8;--pink-2:#ffb0d8;--pink-d:#c7338a;
  --lava:#ff7a3d;--lava-2:#ffb27a;--lava-d:#c8481c;
  --sky:#6fd3ff;--sky-2:#b8ecff;--sky-d:#2394c9;
  --text:#f7f0ff;--text-2:#dccbff;
  --display:Fredoka,"Nunito Sans",system-ui,sans-serif;
  --body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:32px;--hud-h:96px;
}
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--body);scroll-behavior:auto;-webkit-text-size-adjust:100%;font-synthesis:none;overflow-x:clip}
p{text-wrap:pretty}
body{margin:0;background:var(--v8);color:var(--text);font:600 17px/1.55 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
/* The owner's rule: never italic, anywhere. */
em,i,cite,dfn,var,address,q{font-style:normal}
img,svg,video,canvas{display:block}
a{color:inherit}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(1240px,100% - var(--gutter)*2);margin-inline:auto;position:relative}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:12px;border:3px solid var(--ink);font:700 15px var(--display);text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:12px}
section[id]{scroll-margin-top:88px}

/* ---------- shared pieces ---------- */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff4fa8;box-shadow:0 0 0 0 #ff4fa8aa;animation:pulse 1.6s ease-out infinite;flex-shrink:0}
.chip{display:inline-flex;align-items:center;gap:7px;font:700 13px/1 var(--display);letter-spacing:.9px;text-transform:uppercase;padding:7px 12px 8px;border-radius:999px;border:3px solid var(--ink);white-space:nowrap}
.chip svg{width:16px;height:16px}
.chip[hidden]{display:none}
.chip-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip-ink svg{color:var(--gold)}
.chip-pink{background:var(--pink);color:#fff;text-shadow:0 1px 0 var(--pink-d)}
.chip-pink .dot{background:#fff;animation-name:pulse-w}
.sticker{display:inline-flex;align-items:center;gap:9px;font:700 14px/1 var(--display);letter-spacing:1.4px;text-transform:uppercase;color:var(--ink);background:var(--gold);border:3px solid var(--ink);border-radius:999px;padding:9px 18px 10px;box-shadow:0 4px 0 var(--ink);transform:rotate(-2deg)}
.sticker svg{width:20px;height:20px}
.sticker-pink{background:var(--pink);color:#fff;text-shadow:0 1px 0 var(--pink-d)}
.num{font-variant-numeric:tabular-nums}

/* Chunky game buttons: gloss on top, darker lip at the bottom, ink edge underneath that presses in. */
.btn{--b:var(--gold);--b2:var(--gold-2);--bd:var(--gold-d);--fg:var(--ink);--edge:6px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:700 18px/1 var(--display);letter-spacing:.4px;text-transform:uppercase;color:var(--fg);text-decoration:none;white-space:nowrap;
  padding:15px 24px 17px;border:3px solid var(--ink);border-radius:18px;cursor:pointer;
  background:linear-gradient(180deg,var(--b2) 0%,var(--b) 52%);
  box-shadow:inset 0 -5px 0 var(--bd),inset 0 2px 0 #ffffff80,0 var(--edge) 0 var(--ink),0 14px 22px #14003259;
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;-webkit-tap-highlight-color:transparent}
.btn::before{content:"";position:absolute;left:9px;right:9px;top:4px;height:34%;border-radius:12px 12px 20px 20px;background:linear-gradient(#ffffff8c,#ffffff00);pointer-events:none}
.btn>*{position:relative}
.btn svg{width:24px;height:24px;flex-shrink:0}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06) saturate(1.05);box-shadow:inset 0 -5px 0 var(--bd),inset 0 2px 0 #ffffff80,0 calc(var(--edge) + 2px) 0 var(--ink),0 18px 26px #14003266}
.btn:hover svg{animation:hop .38s ease-out}
.btn:active{transform:translateY(calc(var(--edge) - 1px));box-shadow:inset 0 -3px 0 var(--bd),inset 0 2px 0 #ffffff80,0 1px 0 var(--ink),0 4px 8px #14003240}
.btn-violet{--b:#8a4dff;--b2:#b18cff;--bd:#5a22c4;--fg:#fff}
.btn-violet span,.btn-violet{text-shadow:0 2px 0 #3a137c}
.btn-mint{--b:var(--mint);--b2:#b6fbe6;--bd:var(--mint-d)}
.btn-gold{--b:var(--gold);--b2:#fff0a8;--bd:var(--gold-d)}
.btn-lg{font-size:20px;padding:19px 28px 21px;border-radius:20px;--edge:7px}
.btn-lg svg{width:26px;height:26px}
.btn-sm{font-size:15px;padding:9px 14px 11px;border-radius:14px;gap:7px;--edge:4px}
.btn-sm svg{width:24px;height:24px;margin:-4px 0}
.btn-sm::before{top:3px;left:6px;right:6px;border-radius:9px 9px 14px 14px}
.btn-icon{padding:10px;border-radius:14px;--edge:4px}

/* ---------- live ticker ---------- */
.ticker{position:relative;z-index:60;height:38px;overflow:hidden;background:var(--night);border-bottom:3px solid var(--ink);color:var(--text-2);font:700 13px/35px var(--display);letter-spacing:1.1px;text-transform:uppercase;user-select:none}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--night),#1a083300)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--night),#1a083300)}
.ticker-track{display:flex;width:max-content;animation:marquee var(--tick-dur,48s) linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;flex-shrink:0}
.tk{position:relative;display:inline-flex;align-items:center;gap:8px;padding:0 26px;white-space:nowrap}
.tk::after{content:"";position:absolute;right:-4px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:2px;background:var(--v5);transform:rotate(45deg)}
.tk b{color:#fff;font-weight:700}
.tk b.gold,.tk .gold{color:var(--gold)}
.tk b.mint{color:var(--mint)}
.tk-live{color:#ff9fd0}
.tk img{width:18px;height:18px;border-radius:50%}

/* ---------- header / HUD ---------- */
.hud{position:sticky;top:0;z-index:50;height:var(--hud-h);margin-bottom:calc(var(--hud-h) * -1);padding:12px var(--gutter) 0;pointer-events:none}
/* Once scrolled, a soft night band behind the floating bar keeps passing content from poking out around it. */
.hud::before{content:"";position:absolute;inset:0 0 -56px;background:#1f0a45f5;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask:linear-gradient(#000 0,#000 calc(100% - 34px),#0000 100%);mask:linear-gradient(#000 0,#000 calc(100% - 34px),#0000 100%);
  opacity:0;transition:opacity .25s ease;pointer-events:none}
.hud.scrolled::before{opacity:1}
.hud-bar{pointer-events:auto;position:relative;max-width:1320px;height:70px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:0 10px 0 132px;
  border:3px solid var(--ink);border-radius:24px;background:linear-gradient(180deg,#5a1fc0 0%,#3d1382 100%);
  box-shadow:inset 0 2px 0 #ffffff26,inset 0 -4px 0 #2a0c5c,0 6px 0 var(--ink),0 18px 34px #12002a66}
/* Section links are light tabs; only Leaderboard and PLAY are chunky buttons. */
.tab{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:14px;
  font:700 15px/1 var(--display);letter-spacing:.8px;text-transform:uppercase;color:#e6dbff;text-decoration:none;white-space:nowrap;transition:background .18s,color .18s}
.tab::after{content:"";position:absolute;left:50%;bottom:5px;width:0;height:4px;border-radius:4px;background:var(--mint);transform:translateX(-50%);transition:width .22s cubic-bezier(.3,1.5,.5,1)}
.tab:hover{background:#ffffff14;color:#fff}
.tab[aria-current="true"]{color:#fff}
.tab[aria-current="true"]::after{width:22px}
.hud-nav .btn-gold{margin-left:6px}
.hud-logo{position:absolute;left:14px;top:-12px;width:108px;height:108px;transform:rotate(-5deg);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.hud-logo img{width:100%;height:100%;filter:drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 8px 12px #12002a55)}
.hud-logo:hover{transform:rotate(3deg) scale(1.06)}
.hud-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.btn-play{margin-left:6px;padding:7px 18px 9px 12px;border-radius:16px;--edge:5px;gap:8px}
.btn-play svg{width:34px;height:34px;margin:-6px -2px}
.play-label{display:flex;flex-direction:column;align-items:flex-start;font-size:24px;line-height:.95;letter-spacing:1px}
.play-label small{font:800 10px/1 var(--body);letter-spacing:1.4px;opacity:.8;margin-top:3px}
.hud-menu{display:none}
.hud-menu svg{width:26px;height:26px}
.hud-menu .i-close{display:none}
.hud.open .hud-menu .i-menu{display:none}
.hud.open .hud-menu .i-close{display:block}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:calc(var(--hud-h) + 44px) 0 120px;min-height:min(100vh - 38px,1000px);display:flex;align-items:center;
  background:radial-gradient(1100px 760px at 72% 44%,#a468ff 0%,#7f3bf2 34%,#5b1ec4 66%,#43138f 100%)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
/* The hero sinks into deep violet under the ribbon; the dark How it works band picks it up from there. */
.hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:170px;background:linear-gradient(#2a0c5700,var(--v9))}
.rays{position:absolute;left:70%;top:48%;width:2000px;height:2000px;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,#ffffff14 0deg 7deg,#ffffff00 7deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0 14%,#0000 52%);mask:radial-gradient(circle,#000 0 14%,#0000 52%);animation:spin 120s linear infinite}
.dots{position:absolute;inset:0;background:radial-gradient(#ffffff26 1.6px,#0000 2.2px) 0 0/28px 28px;
  -webkit-mask:linear-gradient(90deg,#000 0,#0000 40%,#0000 70%,#000 100%);mask:linear-gradient(90deg,#000 0,#0000 40%,#0000 70%,#000 100%);opacity:.7}
.cf{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:calc(var(--s) * var(--h,1));transform:rotate(var(--r));animation:drift var(--d,8s) ease-in-out infinite alternate;filter:drop-shadow(0 3px 0 #23093f55)}
.hero-grid{width:min(1320px,100% - var(--gutter)*2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:52px;align-items:center}
.hero-left{container-type:inline-size;position:relative;z-index:2}
.hero-kicker{margin-bottom:22px;font-size:15px;padding:10px 18px 11px}
.hero-title{font:700 clamp(40px,10.4cqi,86px)/.98 var(--display);letter-spacing:-1px;color:#fff;margin:0 0 24px}
/* One soft extrude and a glow, no outline: a game title, not a sticker. */
.hero-title span{display:block;text-shadow:0 5px 0 #2a0b5e8c,0 22px 44px #1a064099}
.hero-title .t1{animation:pop-in .7s cubic-bezier(.2,1.5,.4,1) .05s both}
.hero-title .t2{color:var(--mint);animation:pop-in .7s cubic-bezier(.2,1.5,.4,1) .17s both}
.hero-title .t3{color:var(--gold);animation:pop-in .7s cubic-bezier(.2,1.5,.4,1) .29s both}
.lede{font-size:18px;line-height:1.6;color:var(--text);max-width:560px;margin-bottom:24px;text-shadow:0 1px 0 #2a0c5766}
.ticket{position:relative;display:flex;align-items:center;gap:18px;max-width:600px;padding:14px 22px 14px 14px;margin-bottom:26px;overflow:hidden;
  border:4px solid var(--ink);border-radius:24px;background:linear-gradient(180deg,#fff0a6 0%,#ffd33f 55%,#ffc21f 100%);
  box-shadow:inset 0 -5px 0 #e39a12,inset 0 3px 0 #fff8d0,0 8px 0 var(--ink),0 22px 34px #14003259;transform:rotate(-1.2deg)}
.ticket::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(90deg,#fff0,#ffffffb0,#fff0);transform:translateX(-160%) skewX(-18deg);animation:glare 4.8s ease-in-out 1.2s infinite;pointer-events:none}
.ticket-coin{width:72px;height:72px;flex-shrink:0;border-radius:50%;filter:drop-shadow(0 4px 0 var(--ink));animation:coin 5s ease-in-out infinite}
.ticket-text{display:flex;flex-direction:column;gap:3px;padding-left:18px;border-left:3px dashed #23093f55;min-width:0}
.ticket-text small{font:800 12px/1.2 var(--body);letter-spacing:1.6px;text-transform:uppercase;color:#8a4f0a}
.ticket-text strong{font:700 25px/1.1 var(--display);color:var(--ink);letter-spacing:-.2px}
.ticket-text strong .num{font-size:1.28em;color:#6a1fd8;text-shadow:0 2px 0 #fff6c8}
.ticket-text span{font:700 13.5px/1.4 var(--body);color:#6b3f10}
.ticket.off{background:linear-gradient(180deg,#e2d6ff,#b9a0ff);box-shadow:inset 0 -5px 0 #8a6ad8,inset 0 3px 0 #f4eeff,0 8px 0 var(--ink),0 22px 34px #14003259}
.ticket.off .ticket-text small{color:#4d2a8a}.ticket.off .ticket-text span{color:#43246f}
.ticket.off .ticket-coin{filter:grayscale(.7) drop-shadow(0 4px 0 var(--ink))}
.cta-row{display:flex;flex-wrap:wrap;gap:16px 14px;align-items:center}
.live-line{display:inline-flex;align-items:center;gap:12px;margin-top:24px;padding:9px 16px 10px 14px;border:3px solid var(--ink);border-radius:999px;background:#1f0a3fd9;box-shadow:0 4px 0 var(--ink);font:700 14px/1 var(--display);letter-spacing:.8px;text-transform:uppercase;color:#fff;max-width:100%}
.live-line[hidden]{display:none}
.ll-label{white-space:nowrap}
.ll-bar{position:relative;width:120px;height:14px;border-radius:999px;background:#ffffff1f;border:2px solid #ffffff2e;overflow:hidden;flex-shrink:1;min-width:50px}
.ll-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(180deg,#b6fbe6,var(--mint));transition:width .6s ease}
.ll-bar[hidden],.ll-count[hidden]{display:none}
.ll-count{color:var(--mint);white-space:nowrap;font-variant-numeric:tabular-nums}
.ll-value{color:var(--gold);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.entry-note{margin-top:14px;font:700 13.5px/1.5 var(--body);color:var(--text-2);max-width:520px}

.hero-stage{position:relative;z-index:1;padding-top:96px;animation:hover-y 7s ease-in-out infinite}
.screen{position:relative;z-index:2;padding:12px 12px 0;border:4px solid var(--ink);border-radius:32px;transform:rotate(1.6deg);
  background:linear-gradient(180deg,#4a179c,#2c0c66);box-shadow:inset 0 2px 0 #ffffff2e,0 12px 0 var(--ink),0 40px 70px #12002a80}
.screen video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px;border:3px solid var(--ink);background:#e7dcfb url("./media/hero-poster.jpg") center/cover}
.screen-top{position:absolute;left:28px;right:28px;top:26px;z-index:2;display:flex;justify-content:space-between;gap:10px;pointer-events:none}
.screen-top .chip{box-shadow:0 3px 0 var(--ink)}
.screen-bar{display:flex;justify-content:center;gap:8px;padding:12px 4px 14px}
.screen-bar>span{display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--display);letter-spacing:.8px;text-transform:uppercase;color:#cdb6ff;padding:7px 14px 8px 7px;border-radius:999px;border:3px solid #ffffff1f;transition:background .25s,color .25s,border-color .25s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.screen-bar b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ffffff1f;font-size:12px;color:#fff}
.screen-bar>span.on{background:var(--gold);color:var(--ink);border-color:var(--ink);box-shadow:0 3px 0 var(--ink);transform:translateY(-2px)}
.screen-bar>span.on b{background:var(--ink);color:var(--gold)}
/* The hero guy peeks over the top edge of the screen: his lower body stays behind the frame. */
.peek-guy{position:absolute;right:9%;bottom:calc(100% - 132px);z-index:1;display:flex;flex-direction:column;align-items:center;animation:peek 4.5s ease-in-out infinite}
.peek-guy .guy-hearts{position:absolute;top:13%;left:50%;transform:translateX(-46%);z-index:2}
.peek-guy .rg{--gw:168px}

/* Little guys: real game renders (the game's own podium guy: capsule body, costume ears, crown) with the original
   fomo eyes drawn live on the game's eye plane. Every render shares one 300x360 frame, feet at the bottom. */
.rg{--gw:120px;position:relative;width:var(--gw);aspect-ratio:300/360;flex-shrink:0}
.rg img{width:100%;height:100%;filter:drop-shadow(0 10px 12px #16003a59)}
.rg .eyes{position:absolute;left:var(--ex);top:var(--ey);width:var(--ew);height:var(--eh);background:url("./fomo-eyes.svg") 50% 50%/91.1% auto no-repeat}
.rg .eyes.live{background:none}
.rg-mint{--ex:23.88%;--ey:48.40%;--ew:44.04%;--eh:23.95%}
.rg-pink{--ex:25.04%;--ey:48.55%;--ew:44.44%;--eh:23.68%}
.rg-gold{--ex:30.02%;--ey:48.60%;--ew:44.54%;--eh:23.59%}
.rg-sky{--ex:33.98%;--ey:48.21%;--ew:43.37%;--eh:24.25%}
.rg-peach{--ex:22.64%;--ey:48.21%;--ew:43.37%;--eh:24.25%}
.rg-champ{--ex:27.62%;--ey:48.84%;--ew:44.77%;--eh:23.15%}
.guy-hearts{display:flex;gap:3px}
.guy-hearts svg{width:26px;height:24px;animation:bob 2.4s ease-in-out infinite;filter:drop-shadow(0 2px 0 #23093f40)}
.guy-hearts svg:nth-child(2){animation-delay:.2s}.guy-hearts svg:nth-child(3){animation-delay:.4s}

/* ---------- ribbon ---------- */
.ribbon{position:relative;z-index:5;margin:-46px -20px -30px;transform:rotate(-2.2deg);background:linear-gradient(180deg,#ffe27a,#ffc62a);border-block:4px solid var(--ink);box-shadow:0 8px 0 #23093f59;overflow:hidden}
.ribbon-track{display:flex;align-items:center;gap:26px;width:max-content;padding:13px 0 14px;animation:marquee 34s linear infinite}
.ribbon-track span{font:700 26px/1 var(--display);letter-spacing:1px;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.ribbon-track svg{width:28px;height:28px;flex-shrink:0}

/* ---------- sections ---------- */
.sec{position:relative;padding:104px 0 120px;background:var(--bg)}
.wave{position:absolute;left:0;top:-62px;width:100%;height:64px;pointer-events:none;overflow:visible}
.wave-fill{fill:var(--bg)}
.wave-line{fill:none;stroke:var(--ink);stroke-width:4;vector-effect:non-scaling-stroke}
.sec-head{text-align:center;max-width:780px;margin:0 auto 60px;display:flex;flex-direction:column;align-items:center}
.sec-head .sticker{margin-bottom:20px}
/* Section titles: clean white Fredoka with one soft drop, no ink outline. */
.sec-head h2,.cta-inner h2{font:700 clamp(36px,4.4vw,60px)/1.04 var(--display);letter-spacing:-.8px;color:#fff;text-shadow:0 3px 0 #1a063f66,0 16px 36px #12002a59;margin-bottom:16px;text-wrap:balance}
.sec-head>p:last-child{font-size:18px;color:var(--text-2);max-width:640px;text-wrap:pretty}

/* stages */
.sec-stages{--bg:#210a4a;background:radial-gradient(1000px 520px at 50% 100%,#3d1485 0%,#210a4a 70%) var(--bg)}
.stage-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.stage{--c:var(--mint);--c2:#c8fcec;--cd:var(--mint-d);position:relative;padding:14px 14px 28px;border:4px solid var(--ink);border-radius:30px;color:var(--ink);
  background:linear-gradient(180deg,var(--c2),var(--c) 55%);box-shadow:inset 0 -6px 0 #23093f24,inset 0 3px 0 #ffffffa0,0 10px 0 var(--ink),0 30px 44px #0c001e8c;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.stage:hover{transform:translateY(-6px)}
.stage-floor{--c:#b996ff;--c2:#e6d9ff;--cd:#7d4fe0}
.stage-lava{--c:#ff9152;--c2:#ffd0a8;--cd:var(--lava-d)}
.stage-media{position:relative;border:4px solid var(--ink);border-radius:20px;overflow:hidden;background:var(--v9)}
.stage-media video{width:100%;aspect-ratio:16/10;object-fit:cover}
.stage-tag{position:absolute;left:12px;top:12px;box-shadow:0 3px 0 #23093f80}
.stage-count{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;margin:-30px auto 16px;padding:8px 22px 10px;border:4px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:700 30px/1 var(--display);box-shadow:0 5px 0 #23093f80}
.stage-count svg{width:26px;height:26px;color:var(--gold)}
.crown-count{display:inline-flex;align-items:center;gap:6px;color:var(--gold)}
.crown-count svg{width:32px;height:28px}
.stage h3{font:700 32px/1.05 var(--display);text-align:center;letter-spacing:-.3px}
.stage-hook{font:700 17px/1.3 var(--display);text-align:center;color:#4b1d8a;margin:6px 0 10px}
.stage-lava .stage-hook{color:#7a2308}
.stage p:last-child{font-size:16px;line-height:1.5;text-align:center;color:#3b1a60;padding:0 10px}

/* ---------- dark bands: How it works, Extra lives, Where the money goes ----------
   The arcade-night palette on its own tokens, the candy page's fonts, and chunkier edges and corners to match the candy cards.
   The first band rises out of the hero's deep violet under the ribbon; the others meet the violet sections on the candy waves. */
.dk{--bg:#0e0a14;--text:#f7efff;--muted:#b9a8cc;--line:rgba(215,184,241,.16);--line2:rgba(215,184,241,.28);
  --violet:#9145f8;--violet2:#b892ff;--mint:#7be0c3;--gold:#ffd166;--pink:#f297ca;--lava:#ff9a52;
  position:relative;isolation:isolate;color:var(--text)}
.dk::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(rgba(215,184,241,.1) 1px,transparent 1.4px) 0 0/28px 28px;
  -webkit-mask:linear-gradient(#0000,#000 200px,#000 calc(100% - 200px),#0000);mask:linear-gradient(#0000,#000 200px,#000 calc(100% - 200px),#0000)}
.dk [hidden]{display:none!important}
.dk-how{padding:150px 0 138px;background:
  radial-gradient(760px 520px at 4% 66%,rgba(145,69,248,.2),transparent 66%),
  radial-gradient(640px 460px at 100% 42%,rgba(123,224,195,.09),transparent 66%),
  linear-gradient(180deg,var(--v9) 0,var(--bg) 320px)}
.dk-band{background:
  radial-gradient(820px 560px at 4% 560px,rgba(145,69,248,.2),transparent 66%),
  radial-gradient(760px 520px at 100% 860px,rgba(242,151,202,.09),transparent 66%),
  radial-gradient(1000px 600px at 50% calc(100% - 760px),rgba(145,69,248,.15),transparent 66%),
  radial-gradient(700px 480px at 100% calc(100% - 260px),rgba(123,224,195,.07),transparent 66%),
  var(--bg)}
.dk-hearts{position:relative;padding:112px 0 30px}
.dk-money{position:relative;padding:110px 0 140px}
.dk h2,.dk h3{font-family:var(--display);font-weight:700;letter-spacing:-.2px}
.dk h2{font-size:clamp(36px,4.4vw,60px);line-height:1.03;letter-spacing:-.8px;margin:16px 0 0;color:#fff;text-shadow:0 3px 0 #05030ab3,0 16px 36px #0000004d}
.dk .eyebrow{display:inline-flex;align-items:center;gap:10px;font:900 13px/1 var(--body);letter-spacing:2.4px;text-transform:uppercase;color:var(--gold)}
.dk .eyebrow::before,.dk .eyebrow::after{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,currentColor)}
.dk .eyebrow::after{transform:scaleX(-1)}
.dk .eyebrow-left::before{display:none}
.dk .eyebrow-left::after{width:44px;transform:none;background:linear-gradient(90deg,currentColor,transparent)}
.dk .eyebrow-pink{color:var(--pink)}
.dk .dk-head{text-align:center;max-width:760px;margin:0 auto 44px}
.dk .dk-head p{margin-top:16px;font-size:18px;color:var(--muted)}
.dk .split-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px}
.dk .split-head>p{max-width:380px;font-size:17px;line-height:1.55;color:var(--muted);padding-bottom:8px}

/* how it works: four numbered moves */
.dk .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;position:relative}
.dk .steps::before{content:"";position:absolute;left:12%;right:12%;top:38px;height:4px;border-radius:4px;
  background:repeating-linear-gradient(90deg,rgba(215,184,241,.35) 0 12px,transparent 12px 22px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.dk .step{position:relative;margin-top:14px;padding:64px 24px 30px;border-radius:28px;text-align:left;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 14%,#1e1529),#17111f);border:2.5px solid color-mix(in srgb,var(--c) 38%,transparent);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 8px 0 color-mix(in srgb,var(--c) 24%,#07040b),0 24px 40px rgba(0,0,0,.35);transition:transform .25s ease,box-shadow .25s ease}
.dk .step:hover{transform:translateY(-6px);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 12px 0 color-mix(in srgb,var(--c) 24%,#07040b),0 0 44px color-mix(in srgb,var(--c) 24%,transparent)}
.dk .step-n{position:absolute;left:24px;top:-16px;width:54px;height:54px;display:grid;place-items:center;border-radius:18px;font:700 27px/1 var(--display);color:#1a1224;
  background:linear-gradient(color-mix(in srgb,var(--c) 55%,#fff),var(--c));border:2.5px solid color-mix(in srgb,var(--c) 40%,#fff);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 6px 0 color-mix(in srgb,var(--c) 45%,#000),0 0 24px color-mix(in srgb,var(--c) 45%,transparent)}
.dk .step-art{position:absolute;right:16px;top:12px;width:76px;height:76px;display:grid;place-items:center}
.dk .step-art>svg{width:70px;height:70px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 16px color-mix(in srgb,var(--c) 35%,transparent))}
.dk .step-clock>svg{width:58px;height:58px;color:var(--pink)}
.dk .step-bubble>svg{width:76px;height:76px}
.dk .step-bubble .eyes{position:absolute;left:17px;top:15px;width:42px;height:26px}
.dk .step h3{font-size:25px;line-height:1.1;color:#fff;margin:18px 0 10px}
.dk .step p{font-size:15.5px;line-height:1.6;color:var(--muted)}
.dk .step p b{color:#fff}

/* extra lives */
.dk .hearts-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-areas:"head tiers" "facts tiers";column-gap:56px;align-items:center}
.dk .hearts-head{grid-area:head;align-self:end}
.dk .hearts-head p{margin-top:16px;font-size:17px;color:var(--muted);max-width:430px}
.dk .hearts-grid>.tiers{grid-area:tiers}
.dk .hearts-grid>.facts{grid-area:facts;align-self:start}
.dk .tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dk .tier{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 16px 30px;border-radius:28px;
  background:linear-gradient(180deg,rgba(242,151,202,.16),rgba(30,20,40,.95) 62%);border:2.5px solid rgba(242,151,202,.34);box-shadow:inset 0 2px 0 rgba(255,255,255,.1),0 8px 0 #3a1430,0 22px 40px rgba(0,0,0,.35);transition:transform .25s ease}
.dk .tier:hover{transform:translateY(-6px)}
.dk .tier>small,.dk .tier>strong,.dk .tier-hearts,.dk .hp,.dk .tier-k,.dk .tier-note{position:relative;z-index:1}
.dk .tier>small{font:900 12px/1 var(--body);letter-spacing:2px;text-transform:uppercase;color:#bda9d0}
.dk .tier>strong{margin-top:12px;font:700 27px/1.05 var(--display);color:#fff;letter-spacing:-.2px;white-space:nowrap}
.dk .tier-hearts{display:flex;gap:6px;margin:26px 0 18px}
.dk .tier-hearts svg{width:52px;height:52px;filter:drop-shadow(0 4px 0 rgba(60,10,40,.55))}
.dk .tier-hearts svg:has(use[href="#i-heart"]){filter:drop-shadow(0 4px 0 rgba(90,20,60,.6)) drop-shadow(0 0 14px rgba(242,151,202,.55));animation:dk-beat 2.4s ease-in-out infinite}
.dk .tier-hearts svg:nth-child(2){animation-delay:.12s}.dk .tier-hearts svg:nth-child(3){animation-delay:.24s}
.dk .hp{width:100%;max-width:150px;height:10px;margin-bottom:16px;border-radius:6px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.dk .hp span{display:block;height:100%;width:var(--w);border-radius:6px;background:linear-gradient(90deg,#d9559a,#ffb8dc);box-shadow:0 0 12px rgba(242,151,202,.7)}
.dk .tier-k{font:600 21px/1 var(--display);color:var(--pink)}
.dk .tier-note{margin-top:10px;font:700 14px/1.35 var(--body);color:#cdbde0}
.dk .tier-max{border-color:rgba(255,209,102,.7);background:linear-gradient(180deg,rgba(255,209,102,.22),rgba(30,20,40,.95) 64%);box-shadow:inset 0 2px 0 rgba(255,255,255,.14),0 8px 0 #6e4816,0 22px 40px rgba(0,0,0,.35),0 0 60px rgba(255,209,102,.18)}
.dk .tier-max .tier-k{color:var(--gold)}
.dk .tier-max .hp span{background:linear-gradient(90deg,#f6a93c,#ffe89a);box-shadow:0 0 12px rgba(255,209,102,.7)}
.dk .tier-rays{position:absolute;z-index:0;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,209,102,.16) 0 9deg,transparent 9deg 24deg);-webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent);mask-image:radial-gradient(closest-side,#000 20%,transparent);animation:dk-spin 30s linear infinite}
.dk .tier-badge{position:absolute;z-index:2;top:12px;right:12px;padding:6px 11px;border-radius:10px;font:900 12px/1 var(--body);letter-spacing:1.6px;text-transform:uppercase;color:#5b3a1b;background:linear-gradient(#ffeab0,#f7c96a);box-shadow:0 3px 0 #b07d3e}
.dk .facts{margin:26px 0 0;display:flex;flex-direction:column;gap:10px}
.dk .facts li{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-radius:18px;background:rgba(40,28,54,.6);border:1.5px solid var(--line);font-size:15px;line-height:1.5;color:#cdbde0}
.dk .facts svg{width:22px;height:22px;flex-shrink:0;color:var(--mint);margin-top:1px}

/* where the money goes: the vault machine */
.dk .machine{position:relative;max-width:1040px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.dk .m-source{display:flex;align-items:center;gap:12px;padding:12px 22px 12px 14px;border-radius:20px;background:linear-gradient(180deg,#2a1d3a,#1c1428);border:2px solid var(--line2);box-shadow:0 6px 0 rgba(8,5,12,.75)}
.dk .m-source img{width:34px;height:34px;border-radius:50%}
.dk .m-source small{display:block;font:900 12px/1 var(--body);letter-spacing:1.4px;text-transform:uppercase;color:#a896bd}
.dk .m-source b{display:block;margin-top:4px;font:600 20px/1 var(--display);color:#fff}
.dk .m-pipe-in{position:relative;width:8px;height:40px;border-radius:6px;background:rgba(215,184,241,.12);overflow:hidden}
.dk .m-pipe-in i{position:absolute;left:0;right:0;height:18px;border-radius:6px;background:linear-gradient(transparent,var(--gold));animation:dk-drip 1.4s linear infinite}
.dk .m-vault{width:100%;padding:18px;border-radius:28px;background:linear-gradient(180deg,#2d1f40,#1a1224);border:2px solid var(--line2);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 8px 0 rgba(8,5,12,.8),0 0 70px rgba(145,69,248,.22)}
.dk .m-vault-k{display:flex;align-items:baseline;justify-content:center;gap:12px;margin-bottom:14px}
.dk .m-vault-k span{font:700 22px/1 var(--display);color:#fff}
.dk .m-vault-k small{font:800 12px/1 var(--body);letter-spacing:1.4px;text-transform:uppercase;color:#a896bd}
.dk .m-bar{display:flex;height:64px;border-radius:16px}
.dk .seg{width:var(--w);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -5px 0 rgba(0,0,0,.18)}
.dk .seg:first-child{border-radius:16px 0 0 16px}
.dk .seg:last-child{border-radius:0 16px 16px 0}
.dk .seg b{font:700 26px/1 var(--display);color:#1a1224}
.dk .seg+.seg{border-left:3px solid #1a1224}
.dk .seg-rw{background:linear-gradient(#ffe7a0,#f6c05a)}
.dk .seg-tr{background:linear-gradient(#cbb1ff,#9a6cf0)}
.dk .seg-bn{background:linear-gradient(#ffb58a,#f0703d)}
.dk .seg-bn b{font-size:20px}
.dk .m-pipes{width:100%;height:64px;overflow:visible}
.dk .m-pipes .p{fill:none;stroke:rgba(215,184,241,.14);stroke-width:8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dk .m-pipes .f{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:4 18;vector-effect:non-scaling-stroke;animation:dk-flow 1.1s linear infinite}
.dk .f-rw{stroke:var(--gold)}.dk .f-tr{stroke:var(--violet2)}.dk .f-bn{stroke:var(--lava)}
.dk .m-outs{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dk .m-out{--c:var(--gold);position:relative;padding:24px 22px;border-radius:26px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 15%,#1e1529),#17111f);border:2.5px solid color-mix(in srgb,var(--c) 42%,transparent);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 8px 0 color-mix(in srgb,var(--c) 20%,#07040b)}
.dk .o-tr{--c:var(--violet2)}.dk .o-bn{--c:var(--lava)}
.dk .m-pct{display:block;font:700 44px/1 var(--display);color:var(--c);text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 24px color-mix(in srgb,var(--c) 40%,transparent)}
.dk .m-ico{position:absolute;right:18px;top:18px;width:46px;height:46px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.dk .m-out h3{margin-top:12px;font-size:23px;color:#fff}
.dk .m-out p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--muted)}
.dk .m-live{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.25);border:1.5px solid color-mix(in srgb,var(--c) 35%,transparent);font:800 12px/1.25 var(--body);letter-spacing:.8px;text-transform:uppercase;color:#e9dcf6}
.dk .m-live b{font:600 16px/1 var(--display);letter-spacing:0;text-transform:none;color:var(--c);white-space:nowrap}
.dk #pool-live{flex-wrap:wrap;row-gap:4px}
.dk .m-live .live-dot{display:inline-block;flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--lava);box-shadow:0 0 10px var(--lava)}
.dk .m-live.off .live-dot{background:#7c6b8f;box-shadow:none}
.dk .prize-rule{max-width:1040px;margin:26px auto 0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;border-radius:26px;
  background:linear-gradient(120deg,rgba(255,209,102,.14),rgba(28,20,38,.85) 55%);border:2px solid rgba(255,209,102,.38);box-shadow:0 8px 0 #3d2810}
.dk .pr-head{display:flex;align-items:center;gap:16px;min-width:0}
.dk .pr-head>svg{width:46px;height:46px;flex-shrink:0;filter:drop-shadow(0 0 14px rgba(255,209,102,.4))}
.dk .pr-head h3{font-size:22px;color:#fff}
.dk .pr-head p{margin-top:4px;font-size:15px;color:var(--muted)}
.dk .pr-tiers{display:flex;gap:10px;flex-shrink:0}
.dk .pr-tiers span{display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 16px;border-radius:16px;background:rgba(0,0,0,.28);border:1.5px solid rgba(255,209,102,.25);min-width:116px}
.dk .pr-tiers small{font:800 12px/1 var(--body);letter-spacing:.8px;text-transform:uppercase;color:#bda9d0;white-space:nowrap}
.dk .pr-tiers b{font:700 25px/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.dk .burn-total{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:100%;margin:22px auto 0;padding:12px 20px;border-radius:16px;background:rgba(255,154,82,.08);border:1.5px solid rgba(255,154,82,.3);font:700 15px/1.4 var(--body);color:#ffd9bf}
.dk .burn-total svg{width:26px;height:26px;flex-shrink:0}

/* leaderboard */
.sec-board{--bg:#34107f;background:radial-gradient(1000px 560px at 50% 50%,#4d1aad 0%,#34107f 70%) var(--bg)}
.boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;max-width:1080px;margin:0 auto 40px;align-items:start}
.board{padding:22px 22px 18px;border:4px solid var(--ink);border-radius:30px;background:linear-gradient(180deg,#34106d,#240a4d);box-shadow:inset 0 3px 0 #ffffff1c,0 10px 0 var(--ink),0 28px 44px #0c001e73}
.board-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:10px;border-bottom:3px dashed #ffffff26}
.board-head svg{width:40px;height:40px}
.board-head h3{font:700 26px/1 var(--display);color:#fff;flex:1}
.board-head .chip{font-size:11px;padding:6px 10px 7px;background:#ffffff14;border-color:#ffffff26}
.board-list li{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:16px}
.board-list li:nth-child(odd){background:#ffffff0a}
.rank{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:50%;border:3px solid var(--ink);background:#ffffff1f;color:#fff;font:700 17px/1 var(--display)}
.rank.r1{background:var(--gold);color:var(--ink)}.rank.r2{background:#dfe3f2;color:var(--ink)}.rank.r3{background:#f0a86c;color:var(--ink)}
.avatar{width:42px;height:42px;flex-shrink:0;border-radius:50%;border:3px solid var(--ink);background:var(--v5);object-fit:cover;display:grid;place-items:center;font:700 18px/1 var(--display);color:#fff;overflow:hidden}
.who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.who b{font:700 18px/1.15 var(--display);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{font:700 12.5px/1.2 var(--body);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score{font:700 22px/1 var(--display);color:var(--gold);white-space:nowrap}
.score small{font:700 11px var(--body);letter-spacing:1px;color:var(--text-2);margin-left:4px;text-transform:uppercase}
.board-empty{padding:26px 16px 18px;text-align:center;font:700 16px/1.5 var(--body);color:var(--text-2)}
.board-empty[hidden]{display:none}
.swipe-hint{display:none;align-items:center;justify-content:center;gap:8px;margin-top:4px;font:700 13px/1 var(--display);letter-spacing:1.2px;text-transform:uppercase;color:var(--text-2)}
.swipe-hint svg{width:18px;height:18px;color:var(--gold);animation:nudge 1.6s ease-in-out infinite}
.board-more{text-align:center}
.board-more .btn{white-space:normal;max-width:100%;text-align:center}

/* final CTA */
/* Final call: the hero's vivid violet again (bookends), gold rays, and a row of real guys peeking up from the bottom. */
.sec-cta{--bg:#4a17a8;background:radial-gradient(1000px 520px at 50% 68%,#9a5cff 0%,#6a26db 38%,#4a17a8 76%) var(--bg);padding:120px 0 0}
.cta-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#0000,#000 200px);mask:linear-gradient(#0000,#000 200px)}
.cta-bg::before{content:"";position:absolute;left:50%;top:52%;width:2200px;height:2200px;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,#ffd16624 0deg 7deg,#ffd16600 7deg 15deg);-webkit-mask:radial-gradient(circle,#000 0 10%,#0000 44%);mask:radial-gradient(circle,#000 0 10%,#0000 44%);animation:spin 140s linear infinite;pointer-events:none}
.sec-cta .wave{top:-62px;overflow:visible}
.cta-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-inner h2{font-size:clamp(42px,6vw,84px);margin-bottom:18px;letter-spacing:-1.2px}
.cta-inner p{font:700 20px/1.5 var(--body);color:var(--text);max-width:640px;margin-bottom:34px}
.cta-inner p b{color:var(--gold);white-space:nowrap}
/* Render frame: head top at .44 x width, eyes end at .86 x width; the frame is 1.2 x width tall.
   Each guy sinks below the band's bottom edge just enough to keep his eyes in view. */
.crowd{--cw:clamp(112px,13vw,190px);position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;gap:clamp(0px,1.6vw,30px);margin-top:40px;height:calc(var(--cw) * 1.08);overflow:hidden}
.crowd .rg{--gw:var(--cw);animation:peek 4s ease-in-out infinite}
.crowd .rg:nth-child(1){animation-delay:.3s;margin-bottom:calc(var(--gw) * -.33)}
.crowd .rg:nth-child(2){animation-delay:.8s;margin-bottom:calc(var(--gw) * -.27)}
.crowd .rg-champ{--gw:calc(var(--cw) * 1.15);animation-delay:0s;margin-bottom:calc(var(--gw) * -.26)}
.crowd .rg:nth-child(4){animation-delay:1.3s;margin-bottom:calc(var(--gw) * -.29)}
.crowd .rg:nth-child(5){animation-delay:1.8s;margin-bottom:calc(var(--gw) * -.32)}

/* footer */
.foot{position:relative;z-index:2;background:var(--night);border-top:4px solid var(--ink);padding:40px 0 48px;color:var(--text-2)}
.foot-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.foot-logo{width:92px;height:92px;flex-shrink:0}
.foot-logo img{width:100%;height:100%;filter:drop-shadow(0 4px 0 #000)}
.foot-copy{flex:1;min-width:240px}
.foot-copy p{font-size:15px;color:var(--text)}
.foot-copy b{font:700 17px var(--display);letter-spacing:.6px;color:#fff}
.foot-copy .fine{font-size:13px;color:var(--text-2);margin-top:6px;max-width:560px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot-nav a{font:700 15px var(--display);letter-spacing:.4px;text-transform:uppercase;text-decoration:none;color:var(--text-2)}
.foot-nav a:hover{color:var(--gold)}

/* scroll pop-in (only when the script runs). Once a card has popped in (.done), its own hover transitions take over. */
.pop [data-pop]:not(.in){opacity:0;transform:translateY(34px) scale(.96)}
.pop [data-pop].in:not(.done){transition:opacity .5s ease calc(var(--i,0) * 90ms),transform .7s cubic-bezier(.2,1.45,.4,1) calc(var(--i,0) * 90ms)}

/* ---------- motion ---------- */
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes drift{from{transform:translate(0,0) rotate(var(--r))}to{transform:translate(8px,-18px) rotate(calc(var(--r) + 14deg))}}
@keyframes hover-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes peek{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #ff4fa8aa}100%{box-shadow:0 0 0 11px #ff4fa800}}
@keyframes pulse-w{0%{box-shadow:0 0 0 0 #ffffffaa}100%{box-shadow:0 0 0 9px #fff0}}
@keyframes glare{0%{transform:translateX(-160%) skewX(-18deg)}45%,100%{transform:translateX(420%) skewX(-18deg)}}
@keyframes coin{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(8deg) translateY(-8px)}}
@keyframes hop{0%,100%{transform:none}35%{transform:translateY(-3px) rotate(-9deg)}70%{transform:rotate(5deg)}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes pop-in{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
@keyframes dk-beat{0%,60%,100%{transform:scale(1)}68%{transform:scale(1.14)}76%{transform:scale(.98)}84%{transform:scale(1.06)}}
@keyframes dk-spin{to{transform:rotate(360deg)}}
@keyframes dk-drip{0%{top:-20px}100%{top:48px}}
@keyframes dk-flow{to{stroke-dashoffset:-22}}

/* ---------- responsive ---------- */
@media (min-width:1700px){
  .wrap{width:min(1320px,100% - 160px)}
  .hero-grid{width:min(1480px,100% - 160px);column-gap:72px}
  .hud-bar{max-width:1480px}
}
@media (max-width:1180px){
  .tab{padding:0 11px;font-size:14px;letter-spacing:.6px}
  .hero-grid{column-gap:36px}
  .dk .split-head{flex-direction:column;align-items:flex-start;gap:18px}
  .dk .split-head>p{max-width:560px;padding-bottom:0}
  .dk .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}
  .dk .steps::before{display:none}
  .dk .hearts-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "tiers" "facts";row-gap:30px}
  .dk .hearts-head p{max-width:600px}
  .dk .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
  .dk .prize-rule{flex-direction:column;align-items:flex-start}
  .dk .pr-tiers{align-self:stretch}
  .dk .pr-tiers span{flex:1}
}
@media (max-width:1040px){
  :root{--hud-h:88px}
  .hud-bar{height:64px;padding-left:112px}
  .hud-logo{width:94px;height:94px;top:-12px}
  .hud-menu{display:inline-flex}
  .hud-nav{position:absolute;left:0;right:0;top:calc(100% + 14px);flex-direction:column;align-items:stretch;gap:10px;padding:14px;margin:0;
    border:4px solid var(--ink);border-radius:26px;background:linear-gradient(180deg,#4c1aa6,#35107a);box-shadow:0 8px 0 var(--ink),0 30px 50px #12002a80;
    opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top right;transition:opacity .18s,transform .22s cubic-bezier(.3,1.5,.5,1),visibility 0s .22s}
  .hud.open .hud-nav{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .22s cubic-bezier(.3,1.5,.5,1)}
  .hud-nav .tab{height:56px;padding:0 20px;font-size:18px;letter-spacing:.8px;background:#ffffff12;border-radius:16px}
  .hud-nav .tab::after{left:20px;bottom:9px;transform:none}
  .hud-nav .btn-sm{font-size:18px;padding:15px 18px 17px;justify-content:flex-start;--edge:5px;margin:4px 0 6px}
  .hud-nav .btn-sm svg{width:30px;height:30px}
  .btn-play{margin-left:auto}
  .hero{min-height:0;padding-top:calc(var(--hud-h) + 36px)}
  .hero-grid{grid-template-columns:1fr;row-gap:26px;max-width:760px}
  .hero-left{display:contents}
  .hero-copy{display:contents}
  .hero-grid{display:flex;flex-direction:column;align-items:stretch}
  /* Phones and tablets: headline, prize and the primary CTA first, then the game screen. */
  .hero-kicker{order:1;align-self:flex-start;margin-bottom:0}
  .hero-title{order:2;font-size:clamp(40px,8.6vw,72px);margin:0}
  .ticket{order:3;margin:0;max-width:none}
  .cta-row{order:4}
  .hero-stage{order:5;margin:6px 10px 0;padding-top:112px}
  .peek-guy{bottom:calc(100% - 150px)}
  .peek-guy .rg{--gw:140px}
  .live-line{order:6;margin-top:0;align-self:flex-start}
  .lede{order:7;margin:0;max-width:none}
  .entry-note{order:8;margin-top:-12px;max-width:none}
  .cf{display:none}
  .stage-cards{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:8px var(--gutter) 30px;scrollbar-width:none;max-width:none}
  .stage-cards::-webkit-scrollbar{display:none}
  .stage{flex:0 0 min(62%,440px);scroll-snap-align:center;box-shadow:inset 0 -6px 0 #23093f24,inset 0 3px 0 #ffffffa0,0 10px 0 var(--ink)}
  .swipe-hint{display:flex}
  .boards{grid-template-columns:1fr;max-width:620px}
}
@media (max-width:860px){
  .dk .facts{grid-template-columns:1fr}
  .dk .tiers{gap:12px}
  .dk .tier{padding:26px 10px 22px}
  .dk .tier>strong{font-size:22px}
  .dk .tier-hearts{gap:3px}
  .dk .tier-hearts svg{width:36px;height:36px}
  .dk .m-outs{gap:14px}
  .dk .m-out{padding:20px 16px}
  .dk .m-pct{font-size:36px}
  .dk .m-ico{width:38px;height:38px}
}
@media (max-width:700px){
  .dk .m-outs{grid-template-columns:1fr}
  .dk .m-pipes{display:none}
  .dk .m-vault{margin-bottom:18px}
  .dk .tiers{grid-template-columns:1fr;max-width:440px;width:100%;margin:0 auto}
  .dk .tier{display:grid;grid-template-columns:1fr auto;grid-template-areas:"k hearts" "amt hearts" "hp life" "note note";align-items:center;text-align:left;padding:20px 20px 18px;column-gap:14px}
  .dk .tier>small{grid-area:k}
  .dk .tier>strong{grid-area:amt;margin-top:8px;font-size:26px}
  .dk .tier-hearts{grid-area:hearts;margin:0;justify-self:end}
  .dk .hp{grid-area:hp;margin:14px 0 0}
  .dk .tier-k{grid-area:life;margin-top:14px;justify-self:end;font-size:19px}
  .dk .tier-note{grid-area:note;margin-top:8px;font-size:13.5px}
  .dk .tier-hearts svg{width:38px;height:38px}
  .dk .tier-badge{display:none}
  .dk .tier-rays{left:78%}
}
@media (max-width:640px){
  :root{--gutter:16px;--hud-h:80px}
  body{font-size:16px}
  .ticker{height:34px;font-size:12px;line-height:31px}
  .hud{padding-top:10px}
  .hud-bar{height:58px;padding:0 8px 0 86px;border-radius:20px;gap:8px}
  .hud-logo{width:78px;height:78px;left:6px;top:-9px}
  .btn-play{padding:6px 14px 8px 8px;--edge:4px}
  .btn-play svg{width:28px;height:28px}
  .play-label{font-size:20px}
  .play-label small{font-size:9px;letter-spacing:1px}
  .hud-menu{padding:8px}
  .hero{padding:calc(var(--hud-h) + 26px) 0 96px}
  .hero-bg::after{height:130px}
  .hero-grid{row-gap:18px}
  .hero-kicker{font-size:12px;padding:8px 13px 9px;gap:7px;letter-spacing:1px}
  .hero-kicker svg{width:16px;height:16px}
  .hero-title{font-size:clamp(34px,11vw,50px);letter-spacing:-.6px}
  .hero-title span{text-shadow:0 4px 0 #2a0b5e8c,0 16px 32px #1a064099}
  .hero-stage{margin:4px 2px 0;padding-top:84px}
  .peek-guy{right:7%;bottom:calc(100% - 114px)}
  .peek-guy .rg{--gw:104px}
  .peek-guy .guy-hearts svg{width:21px;height:19px}
  .screen{padding:8px 8px 0;border-radius:24px}
  .screen video{border-radius:15px}
  .screen-top{left:18px;right:18px;top:18px}
  .screen-top .chip{font-size:10px;padding:5px 9px 6px;border-width:2px}
  .screen-top .chip-ink{display:none}
  .screen-bar{gap:5px;padding:9px 0 10px}
  .screen-bar>span{font-size:11.5px;padding:5px 8px 6px 5px;gap:5px;letter-spacing:.3px;border-width:2px}
  .screen-bar b{width:17px;height:17px;font-size:10px}
  .screen-bar>span:not(.on) .nm{display:none}
  .screen-bar>span:not(.on){padding-right:6px}
  .ticket{gap:12px;padding:11px 14px 11px 10px;border-radius:20px}
  .ticket-coin{width:52px;height:52px}
  .ticket-text{padding-left:12px}
  .ticket-text strong{font-size:20px}
  .ticket-text span{font-size:12.5px}
  .cta-row{flex-direction:column;align-items:stretch;gap:14px}
  .cta-row .btn{width:100%}
  .btn-lg{font-size:18px;padding:16px 20px 18px}
  .lede{font-size:16.5px}
  .entry-note{margin-top:-6px}
  .ribbon-track span{font-size:20px}
  .ribbon-track svg{width:22px;height:22px}
  .sec{padding:92px 0 100px}
  .sec-head{margin-bottom:44px}
  .sec-head h2{font-size:clamp(32px,9vw,44px)}
  .sec-head>p:last-child{font-size:16.5px}
  .stage-cards{gap:14px}
  .stage{flex-basis:86%}
  .stage h3{font-size:28px}
  .stage-count{font-size:26px}
  .dk-how{padding:120px 0 112px}
  .dk-hearts{padding:98px 0 20px}
  .dk-money{padding:92px 0 116px}
  .dk h2{font-size:clamp(32px,9vw,44px)}
  .dk .dk-head{margin-bottom:34px}
  .dk .split-head{margin-bottom:34px}
  .dk .split-head>p,.dk .hearts-head p,.dk .dk-head p{font-size:16px}
  .dk .eyebrow{font-size:12px;letter-spacing:2px}
  .board{padding:18px 14px 14px}
  .cta-inner h2{font-size:clamp(38px,11vw,56px)}
  .cta-inner p{font-size:17px}
  .crowd{--cw:104px;margin-top:36px}
  .crowd .rg:nth-child(1),.crowd .rg:nth-child(5){display:none}
  .sec-cta{padding-bottom:0}
  .foot-inner{flex-direction:column;align-items:flex-start;gap:18px}
}
@media (max-width:560px){
  .dk .steps{grid-template-columns:1fr;gap:30px}
  .dk .m-bar{height:56px;margin-bottom:30px}
  .dk .seg b{font-size:21px}
  .dk .seg-bn b{position:absolute;top:calc(100% + 9px);right:0;font-size:16px;color:var(--lava)}
  .dk .seg-bn b::before{content:"";position:absolute;right:12px;bottom:calc(100% + 1px);width:2px;height:8px;background:var(--lava);border-radius:2px}
  .dk .m-vault-k{flex-direction:column;align-items:center;gap:6px}
  .dk .pr-tiers{width:100%;gap:8px}
  .dk .pr-tiers span{flex:1;min-width:0;padding:11px 4px}
  .dk .pr-tiers small{font-size:11px;letter-spacing:.3px}
  .dk .pr-tiers b{font-size:21px}
}

/* Reduced motion: everything still, the hero keeps its poster frame. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .pop [data-pop]:not(.in){opacity:1;transform:none}
  .ticker{overflow-x:auto;scrollbar-width:none}
}