@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/anton-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/jetbrainsmono-latin.woff2) format('woff2')}
:root{
  --lime:#CCFF00; --ink:#181715; --lime-soft:#eaffb0;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --disp:'Anton',Impact,sans-serif;
  --s:1; --f:max(var(--s), .72);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:clip;background:var(--ink);color:#fff;font-family:var(--mono)}
img{display:block;user-select:none;-webkit-user-drag:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .4s ease}
#loader img{width:120px;height:auto;animation:pulse 1.2s ease-in-out infinite}
#loader span{font-family:var(--mono);font-size:14px;letter-spacing:.3em;color:var(--lime);opacity:.8}
#loader.hidden{opacity:0;pointer-events:none}
#loader.gone{display:none}
@keyframes pulse{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}

/* ---------- stage geometry ---------- */
#viewport{position:fixed;inset:0;overflow:clip;background:var(--ink)}
#stage{position:absolute;left:50%;top:50%;width:3072px;height:1296px;transform-origin:50% 50%;transform:translate(-50%,-50%) scale(1)}
.safe{position:absolute;left:576px;top:108px;width:1920px;height:1080px}
#plate{position:absolute;left:0;top:0;width:3072px;height:1296px}
#safeL{z-index:2}
#crowd{z-index:3}
#safeU{z-index:4}

/* ---------- LED wall / campaign board ---------- */
#wall{position:absolute;left:512px;top:46px;width:902px;height:380px;z-index:1;padding:30px 40px;overflow:hidden;
  color:var(--lime);text-shadow:0 0 16px rgba(204,255,0,.45)}
#wall .row1{font-size:18px;letter-spacing:.18em;opacity:.85;white-space:nowrap}
#wall .row1 b{display:inline-block;width:11px;height:11px;border-radius:50%;background:#ff3b3b;margin-right:10px;box-shadow:0 0 10px #ff3b3b;animation:livedot 1.1s steps(2,end) infinite}
@keyframes livedot{50%{opacity:.25}}
#wall .title{font-family:var(--disp);font-size:58px;line-height:1.02;margin:14px 0 8px;color:var(--lime-soft);white-space:nowrap}
#wall .title span{display:inline-block;white-space:nowrap}
#wall .meta{font-size:18px;letter-spacing:.06em;color:#dfff8a;opacity:.92;line-height:1.5;white-space:nowrap}
#wall .bar{height:24px;border:3px solid var(--lime);padding:3px;margin-top:16px;background:rgba(0,0,0,.25)}
#wall .bar i{display:block;height:100%;width:0%;background:var(--lime);box-shadow:0 0 14px var(--lime)}
#wall .row{display:flex;justify-content:space-between;font-size:18px;margin-top:8px;letter-spacing:.08em}
#wall .row .caret{display:inline-block;width:9px;height:15px;background:var(--lime);margin-left:6px;vertical-align:-2px;animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}
#wall .next{position:absolute;left:40px;right:40px;bottom:20px;font-size:16px;letter-spacing:.1em;color:#b9d96a;
  border-top:1px solid rgba(204,255,0,.35);padding-top:10px;display:flex;gap:24px;white-space:nowrap;overflow:hidden}
#wall .next em{font-style:normal;color:var(--lime);font-weight:700}
#wall .next span{color:#dfff8a}
#wallIdle{display:block}
#wallFinal{display:none}

/* FINAL board */
#wall.final{background:var(--lime);color:var(--ink);opacity:1;text-shadow:none;padding:0;box-shadow:0 0 120px 30px rgba(204,255,0,.45)}
#wall.final #wallIdle{display:none}
#wall.final #wallFinal{display:block}
#wall.final .head{position:absolute;left:0;right:0;top:40px;text-align:center;font-family:var(--disp);font-size:62px;line-height:1;color:var(--ink);white-space:nowrap;transform-origin:50% 0}
#wall.final .head span{display:inline-block;white-space:nowrap}
#wall.final .sub{position:absolute;left:0;right:0;top:120px;text-align:center;font-family:var(--mono);font-weight:800;font-size:18px;letter-spacing:.14em;color:var(--ink)}
#wall.final .lb{position:absolute;left:36px;top:186px;width:228px}
#wall.final .mark{width:96px;height:92px;background:var(--ink);
  -webkit-mask:url(assets/logo_lime.png) center/contain no-repeat;mask:url(assets/logo_lime.png) center/contain no-repeat}
#wall.final .lb p{font-family:var(--disp);font-size:27px;line-height:1.06;margin-top:8px;color:var(--ink)}
#wall.final .rb{position:absolute;right:24px;top:180px;width:232px;text-align:right;font-family:var(--mono);font-weight:800;
  font-size:16px;letter-spacing:.1em;color:var(--ink);line-height:1.5}
#wall.final .rb b{display:block;font-family:var(--disp);font-weight:400;font-size:30px;line-height:1.04;letter-spacing:.02em;margin:4px 0}

/* wall glitch state transition */
#wall.glitch{animation:glitch .08s steps(2,end) 1}
@keyframes glitch{0%{clip-path:inset(12% 0 62% 0)}33%{clip-path:inset(55% 0 12% 0);transform:translateX(-6px)}66%{clip-path:inset(30% 0 40% 0);transform:translateX(6px)}100%{clip-path:none;transform:none}}

/* ---------- glow / beams / haze ---------- */
#glow{position:absolute;inset:0;mix-blend-mode:screen;opacity:0;transition:opacity .2s linear;z-index:2;
  background:radial-gradient(46% 42% at 963px 236px,rgba(204,255,0,.18),transparent 70%)}
#beams{position:absolute;inset:0;opacity:0;z-index:0;pointer-events:none;overflow:hidden;transition:opacity .2s linear}
#beams .beam{position:absolute;top:-120px;width:180px;height:1300px;transform-origin:50% 0;mix-blend-mode:screen;
  background:linear-gradient(rgba(204,255,0,.5),rgba(204,255,0,0) 85%);filter:blur(10px);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);opacity:.75;transform:rotate(var(--rot,0deg))}
#haze{position:absolute;left:850px;top:0;width:230px;height:786px;z-index:2;mix-blend-mode:screen;opacity:.25;pointer-events:none;
  background:linear-gradient(rgba(255,186,105,.55),rgba(255,186,105,.10) 62%,transparent)}

/* ---------- launch pad ---------- */
#pad{position:absolute;left:660px;top:470px;width:600px;height:360px;z-index:4;will-change:transform}
.padimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.padimg.active{opacity:1}
#padlogo{position:absolute;left:835px;top:690px;width:250px;height:240px;z-index:5;background:var(--lime);pointer-events:none;opacity:.55;
  -webkit-mask:url(assets/logo_lime.png) center/contain no-repeat;mask:url(assets/logo_lime.png) center/contain no-repeat;
  transform:scaleY(.27);transform-origin:50% 0;filter:drop-shadow(0 0 8px var(--lime));transition:opacity .2s linear;will-change:opacity}
body.charging #padlogo{opacity:.9;animation:padlogopulse 1.2s ease-in-out infinite}
@keyframes padlogopulse{0%,100%{opacity:.7}50%{opacity:1}}
#charge{position:absolute;left:640px;top:600px;width:640px;height:260px;z-index:6;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(50% 40% at 50% 50%,rgba(204,255,0,.45),transparent 70%);transition:opacity .12s linear}
#column{position:absolute;left:820px;top:-60px;width:280px;height:800px;z-index:7;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(to top,rgba(230,255,140,.95),rgba(204,255,0,.55) 30%,rgba(204,255,0,.12) 75%,transparent);
  filter:blur(14px);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);
  -webkit-mask:linear-gradient(to top,transparent 0,#000 16%);mask:linear-gradient(to top,transparent 0,#000 16%);transition:opacity .2s linear}
body.column-on #column{opacity:.95}
body.column-on #padlogo{opacity:0}
body.column-on #column.pulse{animation:colpulse .5s ease-in-out infinite}
@keyframes colpulse{0%,100%{opacity:.85}50%{opacity:1}}

/* ---------- figure clip wrapper ---------- */
#figwrap{position:absolute;left:740px;top:150px;width:440px;height:592px;overflow:hidden;z-index:8;pointer-events:none;opacity:0;transition:opacity .15s linear}
#fig{position:absolute;left:0;top:0;width:440px;height:600px;object-fit:contain;will-change:transform}

/* ---------- crowd ---------- */
#crowd{position:absolute;left:0;top:0;width:3072px;height:1296px;pointer-events:none}
.crowd-slice{position:absolute;inset:0;background:url(assets/L1_crowd.webp) 0 0/3072px 1296px no-repeat;will-change:transform}
.crowd-slice.s1{clip-path:inset(0 2048px 0 0)}
.crowd-slice.s2{clip-path:inset(0 1024px 0 1024px)}
.crowd-slice.s3{clip-path:inset(0 0 0 2048px)}
@keyframes crowdjump{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- in-world UI ---------- */
#swapdip{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:9}
#tag{position:absolute;left:1290px;top:676px;z-index:3;font-size:18px;letter-spacing:.12em;color:#fff;border:2px solid var(--lime);
  background:rgba(10,10,8,.72);padding:8px 14px;white-space:nowrap;transition:left .3s ease,top .3s ease;text-transform:uppercase}
#tag em{font-style:normal;color:var(--lime)}
#tag:before{content:'';position:absolute;left:-50px;top:50%;width:50px;height:2px;background:var(--lime)}
#chantlayer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.chant{position:absolute;font-family:var(--disp);color:#fff;letter-spacing:.04em;text-shadow:0 4px 20px rgba(0,0,0,.65);white-space:nowrap;will-change:transform,opacity}
#cta{position:absolute;left:560px;bottom:40px;width:800px;z-index:4;text-align:center}
#meter{display:flex;align-items:center;gap:16px;font-size:18px;letter-spacing:.14em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7)}
#meter .track{flex:1;height:18px;border:2px solid var(--lime);background:rgba(0,0,0,.55);padding:3px}
#meter .track i{display:block;height:100%;width:0%;background:var(--lime);box-shadow:0 0 12px rgba(204,255,0,.7)}
#meterPct{min-width:64px;text-align:right;color:var(--lime)}
.cta-row{display:flex;justify-content:center;align-items:stretch;gap:18px;margin-top:18px}
#btn{display:block;flex:0 0 auto;width:max-content;margin:0;font-family:var(--disp);font-size:52px;letter-spacing:.04em;color:var(--ink);
  background:var(--lime);padding:10px 44px 8px;border-radius:999px;box-shadow:0 0 0 6px rgba(204,255,0,.18),0 0 48px rgba(204,255,0,.55);
  transition:transform .09s ease;animation:glowpulse 2s ease-in-out infinite}
#share{display:none;flex:0 0 auto;font-family:var(--mono);font-weight:800;font-size:22px;letter-spacing:.06em;color:var(--lime);
  background:rgba(10,10,8,.72);border:4px solid var(--lime);border-radius:999px;padding:0 24px;white-space:nowrap;cursor:pointer;
  align-items:center;justify-content:center}
body.share-on #share{display:flex;animation:shareIn .3s ease both}
@keyframes shareIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#share:focus-visible,#btn:focus-visible{outline:4px solid var(--lime);outline-offset:6px;box-shadow:0 0 0 10px rgba(204,255,0,.35),0 0 48px rgba(204,255,0,.55)}
#btn.press{transform:scale(.96)}
@keyframes glowpulse{0%,100%{box-shadow:0 0 0 6px rgba(204,255,0,.18),0 0 48px rgba(204,255,0,.5)}50%{box-shadow:0 0 0 9px rgba(204,255,0,.30),0 0 70px rgba(204,255,0,.75)}}
body.final #btn{background:transparent;color:var(--lime);border:4px solid var(--lime);animation:none;box-shadow:0 0 40px rgba(204,255,0,.35)}
body.final #btn:disabled{opacity:.5;cursor:default;box-shadow:none}
#hint{display:inline-block;margin:12px auto 0;font-size:18px;letter-spacing:.14em;color:#fff;background:rgba(10,10,8,.8);padding:7px 16px;border-radius:999px}

/* ---------- viewport UI ---------- */
#header{position:fixed;left:0;right:0;top:0;height:calc(76px * var(--f));z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(32px * var(--f));background:linear-gradient(rgba(10,10,8,.9),rgba(10,10,8,0))}
.brand{display:flex;align-items:center;gap:calc(14px * var(--f));font-family:var(--disp);font-size:calc(34px * var(--f));letter-spacing:.06em}
.brand img{width:calc(44px * var(--f));height:auto}
.brand small{font-family:var(--mono);font-size:calc(13px * var(--f));letter-spacing:.24em;color:var(--lime);font-weight:800}
.pill{font-family:var(--mono);font-size:calc(15px * var(--f));font-weight:700;border:2px solid var(--lime);color:var(--lime);padding:calc(4px * var(--f)) calc(10px * var(--f));border-radius:999px;letter-spacing:.08em}
#header nav{display:flex;gap:calc(12px * var(--f));align-items:center}
.ctl{font-family:var(--mono);font-size:calc(15px * var(--f));font-weight:700;letter-spacing:.08em;color:#fff;text-decoration:none;
  border:2px solid rgba(255,255,255,.35);background:rgba(10,10,8,.82);padding:calc(8px * var(--f)) calc(14px * var(--f));border-radius:999px;white-space:nowrap}
.ctl.buy{background:var(--lime);color:var(--ink);border-color:var(--lime);box-shadow:0 0 calc(22px * var(--f)) rgba(204,255,0,.35)}
.ctl:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.ctl.disabled{opacity:.5;cursor:default}
#sound{min-width:calc(44px * var(--f))}

.hud{position:fixed;bottom:calc(28px * var(--f));z-index:30;font-family:var(--mono);font-size:calc(15px * var(--f));letter-spacing:.14em;
  background:rgba(10,10,8,.72);border:2px solid rgba(204,255,0,.5);padding:calc(12px * var(--f)) calc(16px * var(--f));min-width:calc(240px * var(--f))}
.hud b{display:block;font-family:var(--disp);font-size:calc(40px * var(--f));color:var(--lime);letter-spacing:.04em;font-weight:400;margin-top:2px}
.hud.l{left:calc(32px * var(--f))}
.hud.r{right:calc(32px * var(--f));text-align:right}

/* ---------- overlays / fx ---------- */
#fx{position:fixed;inset:0;z-index:20;pointer-events:none}
#blackout{position:fixed;inset:0;z-index:40;background:#000;opacity:0;pointer-events:none;transition:opacity .18s linear}
#flash{position:fixed;inset:0;z-index:60;opacity:0;pointer-events:none;background:linear-gradient(0deg,var(--lime),#fff)}
#toast{position:fixed;left:50%;top:calc(96px * var(--f));transform:translate(-50%,-8px);z-index:70;background:var(--lime);color:var(--ink);
  font-family:var(--mono);font-weight:800;font-size:calc(14px * var(--f));letter-spacing:.14em;padding:calc(10px * var(--f)) calc(18px * var(--f));border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- state visuals ---------- */
body.final #tag{top:600px}
body.beams #glow{opacity:1}
body.beams #beams{opacity:1}
body.beams #beams .beam{animation:sweep 4s ease-in-out infinite alternate}
body.beams #beams .beam:nth-child(2){animation-delay:-.6s}
body.beams #beams .beam:nth-child(3){animation-delay:-1.2s}
body.beams #beams .beam:nth-child(4){animation-delay:-1.8s}
body.beams #beams .beam:nth-child(5){animation-delay:-2.4s}
@keyframes sweep{from{transform:rotate(calc(var(--rot,0deg) - 12deg))}to{transform:rotate(calc(var(--rot,0deg) + 12deg))}}
body.beams #crowd .crowd-slice{animation:crowdjump .5s ease-in-out infinite}
body.beams #crowd .s2{animation-delay:.16s}
body.beams #crowd .s3{animation-delay:.32s}

/* almost: board flicker */
body.almost #wall{animation:wallflicker .9s steps(2,end) infinite}
@keyframes wallflicker{0%,100%{opacity:.92}48%{opacity:.7}50%{opacity:.55}52%{opacity:.85}}

/* invite the first clap: breathing meter outline at 0% */
body.meter-zero #meter .track{animation:breath 2.4s ease-in-out infinite}
@keyframes breath{0%,100%{box-shadow:0 0 0 0 rgba(204,255,0,0)}50%{box-shadow:0 0 16px 2px rgba(204,255,0,.55)}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  #loader img,#wall .row1 b,#wall .row .caret,#btn{animation:none !important}
  body.beams #beams .beam{animation:none !important;transform:rotate(var(--rot,0deg))}
  body.beams #crowd .crowd-slice{animation:none !important}
  body.almost #wall{animation:none !important}
  #wall.glitch{animation:none !important}
  body.meter-zero #meter .track{animation:none !important}
  body.charging #padlogo{animation:none !important;opacity:.85}
  body.column-on #column.pulse{animation:none !important}
}