/* ============================================================
   MOON SHOT — rocket crash game
   Paper-cutout play area + PulsePlay navy chrome.
   Mobile-first: 390 × 844 stage, scaled to viewport.
   ============================================================ */

:root{
  /* paper palette (the sky world) */
  --paper-grass:#5fae57; --paper-grass-2:#4c9446;
  --paper-soil:#b07a4a;
  --paper-bldg-1:#e8a14e; --paper-bldg-2:#d8743f; --paper-bldg-3:#caa06b;
  --paper-sky-low:#aee3f5;   /* horizon day */
  --paper-sky-mid:#5bb8e6;
  --paper-sky-high:#2a6db0;
  --paper-space-1:#15214a;
  --paper-space-2:#070a1f;   /* deep space */
  --paper-cloud:#fbfdff;
  --paper-moon:#e9e6d2; --paper-moon-shade:#c9c4a8;
  --paper-mars:#d96b3e; --paper-jup:#d8a86a; --paper-star:#ffe7a3;
  --paper-rocket:#e7573f; --paper-rocket-2:#c63f2c;
  --paper-rocket-fin:#3f7fd8; --paper-rocket-win:#f3f4f6;
  --paper-flame-1:#ffd23e; --paper-flame-2:#ff8a3d; --paper-flame-3:#ff5630;
  --paper-skin:#f1c08a; --paper-helmet:#eaf2f8;
  --paper-ink:#2a2333;

  /* gauge / skill */
  --gauge-low:#5bb8e6; --gauge-green:#1bd760; --gauge-hot:#ed4f6b;

  --moon-gold:#ffcf4a; --moon-gold-2:#f0a93b;

  /* paper shadow + edge */
  --paper-sh: 0 2px 0 rgba(0,0,0,.10), 0 6px 14px rgba(0,0,0,.18);
  --paper-sh-lg: 0 3px 0 rgba(0,0,0,.12), 0 14px 30px rgba(0,0,0,.28);
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:#05070b;}
body{font-family:var(--sans,"Inter",sans-serif);overflow:hidden;}

/* viewport host: phone centered, dev panel docked right */
.host{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:30px;background:radial-gradient(120% 100% at 50% 0%,#11202c,#05070b 70%);}

.phone-scale{transform-origin:center center;}
.phone{
  position:relative;width:390px;height:844px;border-radius:46px;overflow:hidden;
  background:#000;box-shadow:0 0 0 11px #11161d,0 0 0 13px #2b3640,0 40px 90px rgba(0,0,0,.6);
}
/* notch */
.phone::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:128px;height:30px;background:#000;border-radius:0 0 18px 18px;z-index:300;}

/* the game surface */
.game{position:absolute;inset:0;overflow:hidden;background:var(--paper-sky-low);}

/* ============================================================
   SKY / BACKGROUND
   ============================================================ */
.sky{position:absolute;inset:0;z-index:0;transition:background .5s linear;}
.bg-layer{position:absolute;left:0;right:0;will-change:transform;pointer-events:none;}

/* stars */
.starfield{position:absolute;inset:-20% 0;z-index:1;pointer-events:none;}
.star{position:absolute;background:var(--paper-star);border-radius:1px;box-shadow:0 0 6px rgba(255,231,163,.6);}

/* clouds */
.cloud{position:absolute;z-index:3;filter:drop-shadow(0 8px 10px rgba(40,80,110,.18));}
.cloud b{display:block;background:var(--paper-cloud);border-radius:50%;position:absolute;}

/* ground assembly */
.ground{position:absolute;left:0;right:0;z-index:2;}
.hill{position:absolute;bottom:0;left:-5%;right:-5%;height:150px;background:var(--paper-grass);
  border-radius:50% 50% 0 0/70px 70px 0 0;box-shadow:var(--paper-sh-lg);}
.hill.back{bottom:60px;background:var(--paper-grass-2);filter:brightness(.92);}
.tree{position:absolute;bottom:90px;}
.tree .trunk{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:12px;height:34px;background:var(--paper-soil);border-radius:3px;}
.tree .top{width:46px;height:46px;background:var(--paper-grass-2);border-radius:50%;box-shadow:var(--paper-sh);}
.bldg{position:absolute;bottom:96px;border-radius:4px 4px 0 0;box-shadow:var(--paper-sh);}
.bldg i{position:absolute;width:7px;height:9px;background:rgba(255,255,255,.5);border-radius:1px;}

/* landmark sprites (moon, planets) */
.landmark{position:absolute;z-index:2;left:50%;will-change:transform;pointer-events:none;}
.moon-body{width:150px;height:150px;border-radius:50%;background:
  radial-gradient(closest-side at 62% 40%,var(--paper-moon),var(--paper-moon-shade));
  box-shadow:inset -16px -12px 0 rgba(0,0,0,.08),0 0 50px rgba(233,230,210,.35),var(--paper-sh-lg);position:relative;}
.moon-body::before,.moon-body::after{content:"";position:absolute;border-radius:50%;background:rgba(0,0,0,.07);}
.moon-body::before{width:30px;height:30px;top:36px;left:30px;}
.moon-body::after{width:20px;height:20px;bottom:30px;right:42px;box-shadow:-30px -10px 0 6px rgba(0,0,0,.05);}
.planet{border-radius:50%;box-shadow:var(--paper-sh-lg);position:relative;}
.planet.mars{width:92px;height:92px;background:radial-gradient(closest-side at 60% 40%,#e8835a,var(--paper-mars));}
.planet.jup{width:124px;height:124px;background:
  repeating-linear-gradient(180deg,#e2b67e 0 14px,#caa05f 14px 26px,#d8a86a 26px 40px);}
.planet .ring{position:absolute;top:50%;left:50%;width:200px;height:46px;
  border:9px solid rgba(220,200,150,.55);border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg);}

/* ============================================================
   ROCKET
   ============================================================ */
.rocket-wrap{position:absolute;left:50%;z-index:10;will-change:transform;transform:translateX(-50%);}
.rocket{position:relative;width:96px;height:150px;transform-origin:50% 80%;}
.r-body{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:54px;height:104px;
  background:linear-gradient(90deg,var(--paper-rocket-2),var(--paper-rocket) 40%);
  border-radius:27px 27px 20px 20px;box-shadow:var(--paper-sh-lg);}
.r-nose{position:absolute;left:50%;top:0;transform:translateX(-50%);width:34px;height:34px;
  background:var(--paper-rocket-win);border-radius:50% 50% 46% 46%;box-shadow:var(--paper-sh);}
.r-window{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;
  background:radial-gradient(closest-side,#bfe6ff,#6aa9d8);box-shadow:inset 0 0 0 5px #f3f4f6,var(--paper-sh);}
.r-fin{position:absolute;bottom:24px;width:30px;height:50px;background:var(--paper-rocket-fin);z-index:-1;box-shadow:var(--paper-sh);}
.r-fin.l{left:-2px;border-radius:60% 0 40% 80%;transform:rotate(8deg);}
.r-fin.r{right:-2px;border-radius:0 60% 80% 40%;transform:rotate(-8deg);}
/* astronaut head poking out the side (convertible) */
.astro{position:absolute;top:42px;right:-6px;z-index:5;transition:transform .3s;}
.astro .helmet{width:30px;height:30px;border-radius:50%;background:var(--paper-helmet);box-shadow:inset 0 0 0 4px #cdd9e4,var(--paper-sh);position:relative;}
.astro .visor{position:absolute;top:9px;right:4px;width:16px;height:9px;background:#2a3a4a;border-radius:6px;}
/* flame */
.flame{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:-2;width:40px;
  display:flex;flex-direction:column;align-items:center;}
.flame span{display:block;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;filter:blur(.3px);}
.flame .f1{width:34px;height:46px;background:var(--paper-flame-2);}
.flame .f2{width:24px;height:34px;background:var(--paper-flame-1);margin-top:-30px;}
.flame .f3{width:46px;height:30px;background:var(--paper-flame-3);margin-top:-44px;opacity:.8;}
@keyframes flicker{0%,100%{transform:scaleY(1) scaleX(1);}50%{transform:scaleY(.8) scaleX(1.1);}}
.flame.on span{animation:flicker .12s infinite;}

/* smoke puffs at launch */
.smoke{position:absolute;border-radius:50%;background:#e9eef2;opacity:.0;z-index:9;pointer-events:none;}

/* ============================================================
   HUD CHROME (navy)
   ============================================================ */
.hud{position:absolute;inset:0;z-index:40;pointer-events:none;}
.hud > *{pointer-events:auto;}

/* hero multiplier */
.hero-mult{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:30;pointer-events:none;}
.hero-mult .val{font-family:var(--mono,"IBM Plex Mono",monospace);font-weight:700;font-size:74px;line-height:.9;letter-spacing:-.03em;
  color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.18),0 0 30px rgba(0,0,0,.25);transition:color .25s,transform .1s;}
.hero-mult .x{font-size:38px;opacity:.8;}
.hero-mult .cap{margin-top:4px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);text-shadow:0 1px 3px rgba(0,0,0,.5);min-height:15px;}
.hero-mult .moon-pay{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-family:var(--mono);font-weight:600;font-size:17px;color:var(--moon-gold);background:rgba(8,12,28,.5);padding:5px 12px;border-radius:999px;backdrop-filter:blur(4px);}
.moon-coin{width:17px;height:17px;border-radius:50%;background:radial-gradient(closest-side at 60% 40%,var(--moon-gold),var(--moon-gold-2));box-shadow:inset -2px -2px 0 rgba(0,0,0,.15);display:inline-block;flex:none;}

/* altitude axis right edge */
.alt-axis{position:absolute;top:78px;bottom:150px;right:0;width:62px;z-index:35;pointer-events:none;}
.alt-axis .track{position:absolute;top:0;bottom:0;right:0;width:100%;
  background:linear-gradient(90deg,transparent,rgba(8,12,24,.34));}
.alt-tick{position:absolute;right:6px;display:flex;align-items:center;gap:5px;transform:translateY(50%);transition:opacity .3s;}
.alt-tick .ln{width:8px;height:1.5px;background:rgba(255,255,255,.5);}
.alt-tick .tx{font-family:var(--mono);font-size:9.5px;color:rgba(255,255,255,.72);}
.alt-tick.cp .ln{width:14px;height:2px;background:var(--moon-gold);}
.alt-tick.cp .tx{color:var(--moon-gold);font-weight:600;}
.alt-read{position:absolute;right:6px;top:56px;text-align:right;}
.alt-read .lab{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.6);}
.alt-read .num{font-family:var(--mono);font-weight:700;font-size:20px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);}
.alt-read .unit{font-size:11px;opacity:.7;}
.alt-read .spd{margin-top:6px;font-family:var(--mono);font-size:11px;color:#7fe0ff;}

/* wager chip top-left under arena */
.wager{position:absolute;left:12px;top:140px;z-index:35;background:rgba(8,12,24,.5);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px 11px;}
.wager .lab{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.wager .amt{font-family:var(--mono);font-weight:700;font-size:15px;color:#fff;display:flex;align-items:center;gap:5px;}
.sol-mark{width:13px;height:13px;display:inline-block;flex:none;}
.wager .rate{font-family:var(--mono);font-size:8.5px;color:rgba(255,255,255,.5);margin-top:3px;}

/* ============================================================
   CONTROLS (boost gauge + buttons)
   ============================================================ */
.controls{position:absolute;left:0;right:0;bottom:0;z-index:50;padding:12px 14px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(5,9,16,.5) 30%,rgba(5,9,16,.82));}
.gauge{position:relative;height:30px;border-radius:999px;background:rgba(8,14,24,.7);
  border:1px solid rgba(255,255,255,.12);overflow:hidden;margin-bottom:11px;}
.gauge .green-band{position:absolute;top:0;bottom:0;background:rgba(27,215,96,.22);border-left:2px solid var(--gauge-green);border-right:2px solid var(--gauge-green);}
.gauge .fill{position:absolute;top:0;bottom:0;left:0;border-radius:999px;background:linear-gradient(90deg,var(--gauge-low),var(--gauge-green));transition:width .07s linear,background .2s;}
.gauge.hot .fill{background:linear-gradient(90deg,var(--gauge-green),var(--gauge-hot));}
.gauge .needle{position:absolute;top:-3px;bottom:-3px;width:3px;background:#fff;box-shadow:0 0 8px #fff;border-radius:2px;transition:left .07s linear;}
.gauge .cad{position:absolute;top:50%;left:8px;transform:translateY(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.75);text-transform:uppercase;}
.gauge .gtime{position:absolute;top:50%;right:10px;transform:translateY(-50%);font-family:var(--mono);font-size:11px;font-weight:600;color:var(--gauge-green);}

.btn-row{display:flex;gap:11px;}
.gbtn{flex:1;border:none;border-radius:18px;padding:17px 0;font-family:var(--sans);font-weight:800;font-size:20px;
  letter-spacing:.02em;cursor:pointer;position:relative;overflow:hidden;transition:transform .06s,filter .12s,opacity .15s;
  box-shadow:0 5px 0 rgba(0,0,0,.28),0 10px 20px rgba(0,0,0,.3);-webkit-tap-highlight-color:transparent;user-select:none;}
.gbtn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.28),0 6px 12px rgba(0,0,0,.3);}
.gbtn:disabled{opacity:.4;filter:grayscale(.3);cursor:default;}
.gbtn--boost{background:linear-gradient(180deg,#ffd84d,#f0a93b);color:#5a3a06;flex:1.5;}
.gbtn--boost .sub{display:block;font-size:10px;font-weight:600;letter-spacing:.1em;opacity:.7;text-transform:uppercase;margin-top:1px;}
.gbtn--eject{background:linear-gradient(180deg,#ff6178,#ed4f6b);color:#fff;}
.gbtn--eject .sub{display:block;font-size:10px;font-weight:600;letter-spacing:.05em;opacity:.85;margin-top:1px;}
.boost-ripple{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.5),transparent 60%);opacity:0;}
.boost-ripple.go{animation:bripple .3s ease-out;}
@keyframes bripple{0%{opacity:.7;transform:scale(.4);}100%{opacity:0;transform:scale(1.4);}}

/* primary CTA (initiate / try again) */
.cta-center{position:absolute;left:0;right:0;bottom:0;top:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:54px;gap:16px;pointer-events:none;}
.cta-center > *{pointer-events:auto;}
.cta{border:none;border-radius:22px;padding:20px 44px;font-family:var(--sans);font-weight:800;font-size:22px;cursor:pointer;
  background:linear-gradient(180deg,#28e36a,#13b252);color:#04220f;box-shadow:0 6px 0 #0a7c38,0 16px 30px rgba(0,0,0,.4);
  transition:transform .07s;letter-spacing:.01em;}
.cta:active{transform:translateY(3px);box-shadow:0 3px 0 #0a7c38;}
.cta--again{background:linear-gradient(180deg,#ff6178,#ed4f6b);color:#fff;box-shadow:0 6px 0 #9c1230,0 16px 30px rgba(0,0,0,.4);}

/* wager picker on idle */
.bet-pick{display:flex;flex-direction:column;align-items:center;gap:9px;background:rgba(8,12,24,.6);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px 18px;}
.bet-pick .t{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65);}
.bet-chips{display:flex;gap:7px;}
.bet-chip{font-family:var(--mono);font-weight:700;font-size:14px;padding:8px 12px;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1.5px solid transparent;color:#fff;transition:all .12s;}
.bet-chip.on{border-color:var(--moon-gold);background:rgba(255,207,74,.16);color:var(--moon-gold);}

/* ============================================================
   COUNTDOWN / BLASTOFF
   ============================================================ */
.countdown{position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;}
.countdown .num{font-family:var(--mono);font-weight:800;font-size:160px;color:#fff;text-shadow:0 0 40px rgba(255,160,40,.7),0 6px 0 rgba(0,0,0,.2);line-height:1;}
.countdown .lab{font-family:var(--mono);font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:8px;}
@keyframes cd-pop{0%{transform:scale(1.6);opacity:0;}16%{transform:scale(1);opacity:1;}82%{transform:scale(1);opacity:1;}100%{transform:scale(.86);opacity:0;}}
.cd-anim{animation:cd-pop 1s ease-out;}
.blastoff{font-family:var(--sans);font-weight:900;font-size:50px;color:var(--paper-flame-1);text-shadow:0 0 30px #ff7a2d,0 4px 0 #c63f2c;animation:blast 1.1s ease-out;letter-spacing:.02em;}
@keyframes blast{0%{transform:scale(.3);opacity:0;}40%{transform:scale(1.15);opacity:1;}70%{transform:scale(1);}100%{transform:scale(1.05);opacity:.9;}}

/* ============================================================
   WIN / LOSE overlays
   ============================================================ */
.result{position:absolute;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none;}
.result.win{background:radial-gradient(120% 90% at 50% 40%,rgba(15,40,25,.4),rgba(5,9,16,.78));}
.result.lose{background:radial-gradient(120% 90% at 50% 45%,rgba(60,15,20,.5),rgba(5,9,16,.86));}
.result .big-x{font-family:var(--mono);font-weight:800;font-size:96px;line-height:.9;color:var(--gauge-green);text-shadow:0 0 50px rgba(27,215,96,.6),0 5px 0 rgba(0,0,0,.2);animation:winpop .6s cubic-bezier(.2,.8,.2,1);}
.result .tag{font-family:var(--mono);font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:#fff;}
.result .payout{margin-top:10px;display:flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:700;font-size:32px;color:var(--moon-gold);}
.result .payout .moon-coin{width:30px;height:30px;}
.result .bal{margin-top:6px;font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.7);}
@keyframes winpop{0%{transform:scale(.4) rotate(-6deg);opacity:0;}60%{transform:scale(1.12);opacity:1;}100%{transform:scale(1);}}
.result.lose .big-x{color:var(--gauge-hot);text-shadow:0 0 50px rgba(237,79,107,.6),0 5px 0 rgba(0,0,0,.2);}
.boom{font-family:var(--sans);font-weight:900;font-size:62px;color:#ff5630;text-shadow:0 0 40px #ff5630;animation:winpop .5s ease-out;}

/* flying moon coins on win */
.coin-fly{position:absolute;z-index:85;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(closest-side at 60% 40%,var(--moon-gold),var(--moon-gold-2));
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.15),0 0 16px rgba(255,207,74,.6);pointer-events:none;}

/* balance pill bottom-right target */
.bal-pill{position:absolute;right:12px;bottom:96px;z-index:46;display:flex;align-items:center;gap:6px;
  background:rgba(8,12,24,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,207,74,.3);border-radius:999px;padding:6px 12px;}
.bal-pill .moon-coin{width:16px;height:16px;}
.bal-pill .v{font-family:var(--mono);font-weight:700;font-size:14px;color:#fff;}

/* screen shake */
@keyframes shake{10%,90%{transform:translate(-1px,1px);}20%,80%{transform:translate(2px,-2px);}30%,50%,70%{transform:translate(-4px,2px);}40%,60%{transform:translate(4px,-1px);}}
.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both;}

/* ============================================================
   PASS 1 — launch ignition, eject flash/lurch, near-miss
   ============================================================ */
/* launch smoke billowing at the pad */
.launch-smoke{position:absolute;left:50%;bottom:-12px;width:120px;height:50px;transform:translateX(-50%);z-index:-3;pointer-events:none;}
.puff{position:absolute;bottom:0;border-radius:50%;background:#eef2f6;opacity:0;will-change:transform,opacity;}
@keyframes puff{0%{opacity:0;transform:translate(-50%,4px) scale(.35);}30%{opacity:.9;}100%{opacity:0;transform:translate(calc(-50% + var(--drift,0px)),22px) scale(1.7);}}

/* countdown — tappable + hot final seconds */
.countdown--tap{pointer-events:auto;cursor:pointer;}
.cd-skip{position:absolute;bottom:118px;font-family:var(--mono,monospace);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.cd-hot{color:#ffd23e !important;text-shadow:0 0 55px rgba(255,140,40,.95),0 6px 0 rgba(0,0,0,.2) !important;}

/* eject white flash */
.eject-flash{position:absolute;inset:0;z-index:90;background:#fff;opacity:0;pointer-events:none;animation:ejflash .55s ease-out forwards;}
@keyframes ejflash{0%{opacity:0;}10%{opacity:.9;}100%{opacity:0;}}

/* eject lurch — sharp jolt as the seat fires */
@keyframes lurch{0%{transform:translateY(0);}14%{transform:translateY(12px);}40%{transform:translateY(-16px);}70%{transform:translateY(5px);}100%{transform:translateY(0);}}
.lurch{animation:lurch .5s cubic-bezier(.3,.8,.3,1) both;}

/* near-miss styling on the win overlay */
.tag--near{color:#ffd23e !important;animation:nearpulse 1s ease-in-out infinite;}
@keyframes nearpulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.near-sub{font-family:var(--mono,monospace);font-size:13px;color:rgba(255,255,255,.62);margin-top:2px;}

/* gauge perfect-band pulse */
.gauge.perfect .green-band{animation:bandpulse .6s ease-in-out infinite;}
.gauge.perfect .needle{box-shadow:0 0 12px #1bd760,0 0 4px #fff;}
@keyframes bandpulse{0%,100%{background:rgba(27,215,96,.22);}50%{background:rgba(27,215,96,.42);}}

/* checkpoint payout burst (floats up under the hero) */
.cp-burst{position:absolute;top:calc(46% + 70px);left:50%;transform:translateX(-50%);z-index:32;text-align:center;pointer-events:none;
  animation:cpburst 1.6s cubic-bezier(.2,.7,.2,1) forwards;}
.cp-burst-amt{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--mono,monospace);font-weight:700;font-size:24px;color:var(--moon-gold,#ffcf4a);text-shadow:0 2px 10px rgba(0,0,0,.6);}
.cp-burst-amt .moon-coin{width:20px;height:20px;}
.cp-burst-lab{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.7);margin-top:2px;}
@keyframes cpburst{0%{opacity:0;transform:translate(-50%,18px) scale(.8);}18%{opacity:1;transform:translate(-50%,0) scale(1.05);}40%{transform:translate(-50%,-4px) scale(1);}100%{opacity:0;transform:translate(-50%,-46px) scale(.95);}}

/* astronaut parachuting down after eject */
.chutist{position:absolute;left:50%;top:0;z-index:11;width:80px;margin-left:-40px;pointer-events:none;
  animation:chute-descend 3.6s cubic-bezier(.4,.1,.5,1) both;}
.chutist-sway{position:relative;width:80px;animation:chute-sway 2.4s ease-in-out infinite;transform-origin:50% 0;}
.canopy{width:80px;height:40px;border-radius:80px 80px 10px 10px;
  background:repeating-linear-gradient(90deg,var(--paper-rocket) 0 13px,#f3f4f6 13px 26px);
  box-shadow:var(--paper-sh);position:relative;}
.canopy::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:8px;
  background:radial-gradient(closest-side,rgba(0,0,0,.12),transparent);}
.chute-strings{display:block;margin-top:-2px;}
.chutist-astro{position:absolute;left:50%;top:42px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;}
.chutist-astro .helmet{width:26px;height:26px;border-radius:50%;background:var(--paper-helmet);box-shadow:inset 0 0 0 4px #cdd9e4,var(--paper-sh);position:relative;}
.chutist-astro .visor{position:absolute;top:8px;right:3px;width:14px;height:8px;background:#2a3a4a;border-radius:5px;}
.chutist-body{width:20px;height:24px;border-radius:9px 9px 7px 7px;background:#eef2f6;margin-top:-2px;box-shadow:var(--paper-sh);}
@keyframes chute-descend{0%{top:-150px;opacity:0;}12%{opacity:1;}100%{top:62%;opacity:1;}}
@keyframes chute-sway{0%,100%{transform:rotate(-7deg) translateX(-10px);}50%{transform:rotate(7deg) translateX(10px);}}

@media (prefers-reduced-motion: reduce){
  .flame.on span{animation:none;}
  .ar-jit{animation:none !important;}
  .marquee-track{animation:none !important;}
  .arena-row.bump{animation:none;}
  .ah-count .pp-dot{animation:none;}
}

/* ============================================================
   ARENA (top live leaderboard) + MARQUEE
   ============================================================ */
.arena{position:absolute;top:0;left:0;right:0;z-index:45;padding:38px 10px 8px;
  background:linear-gradient(180deg,rgba(5,9,16,.86) 60%,rgba(5,9,16,.55) 85%,transparent);}
.arena-head{display:flex;align-items:center;justify-content:space-between;padding:0 6px 6px;}
.ah-title{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:10px;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.78);}
.ah-count{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:5px;}
.ah-count .pp-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;animation:livepulse 1.4s infinite;}
@keyframes livepulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* arena tabs (LIVE / 1H / 24H) */
.arena-tabs{display:flex;gap:3px;background:rgba(255,255,255,.06);border-radius:8px;padding:3px;}
.atab{border:none;background:transparent;color:rgba(255,255,255,.55);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;padding:4px 10px;border-radius:6px;cursor:pointer;transition:background .15s,color .15s;}
.atab.on{background:#1bd760;color:#04220f;}
.arena-empty{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.4);}

/* hall-of-fame rows */
.arena-row.r-hof{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09);animation:none;}
.arena-row.r-hof.r-you{background:rgba(255,207,74,.14);border-color:rgba(255,207,74,.5);box-shadow:0 0 0 1px rgba(255,207,74,.3);}
.arena-row.r-you .ar-name{color:var(--moon-gold,#ffcf4a);font-weight:800;}
.ar-ago{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.42);flex:none;margin-right:2px;}
.mq-item.mq-you{padding:0 8px;border-radius:6px;background:rgba(255,207,74,.16);}
.mq-item.mq-you .mq-name{color:var(--moon-gold,#ffcf4a);font-weight:700;}

/* overtake grow-and-shove */
.arena-row.bump{animation:rowbump .44s cubic-bezier(.2,.8,.2,1);}
@keyframes rowbump{0%{transform:translateY(var(--ty)) scale(1);}40%{transform:translateY(var(--ty)) scale(1.07);box-shadow:0 6px 18px rgba(0,0,0,.4);}100%{transform:translateY(var(--ty)) scale(1);}}

.arena-board{position:relative;}
.arena-row{position:absolute;left:0;right:0;height:40px;display:flex;align-items:center;gap:8px;padding:0 10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;
  transition:transform .5s cubic-bezier(.3,.8,.3,1),opacity .5s,background .3s;backdrop-filter:blur(3px);}
/* jitter lives on an inner wrapper (transform-only → compositor, never layout) */
.ar-jit{display:flex;align-items:center;gap:8px;width:100%;will-change:transform;animation:rowjit .16s linear infinite;}
@keyframes rowjit{0%,100%{transform:translateX(0);}25%{transform:translateX(calc(var(--jit,0px) * -1));}75%{transform:translateX(var(--jit,0px));}}
.arena-row.r-ejected{background:rgba(27,215,96,.12);border-color:rgba(27,215,96,.4);}
.arena-row.r-dead{background:rgba(237,79,107,.1);border-color:rgba(237,79,107,.3);opacity:.5;animation:ejflash .4s;filter:grayscale(.4);}
.arena-row.r-ejected{animation:ejflash .4s;}
.arena-row.r-ejected .ar-jit,.arena-row.r-dead .ar-jit{animation:none;}
@keyframes ejflash{0%{transform:scale(1.04) translateY(var(--ty,0));}100%{}}
.ar-rank{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.4);width:12px;flex:none;}
.ar-name{font-family:var(--sans);font-weight:600;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.ar-badge{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.08em;padding:2px 5px;border-radius:4px;flex:none;}
.ar-badge.ej{background:rgba(27,215,96,.2);color:#1bd760;}
.ar-badge.dead{background:rgba(237,79,107,.2);color:#ed4f6b;}
.ar-spark{flex:none;width:46px;height:20px;display:flex;align-items:center;}
.ar-mult{font-family:var(--mono);font-weight:700;flex:none;min-width:62px;text-align:right;transition:font-size .3s,color .3s;}

.marquee{position:absolute;left:0;right:0;bottom:0;z-index:55;height:30px;overflow:hidden;
  background:rgba(5,9,16,.9);border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;}
.marquee-track{display:flex;align-items:center;gap:18px;white-space:nowrap;animation:mq 32s linear infinite;padding-left:10px;}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.mq-item{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;}
.mq-name{color:rgba(255,255,255,.55);}
.mq-mult{font-weight:700;}
.mq-dot{width:6px;height:6px;border-radius:50%;flex:none;}
.mq-dot.ejected{background:#1bd760;}
.mq-dot.dead{background:#ed4f6b;}

/* when marquee present, lift controls a touch */
.controls{bottom:30px;}

/* ============================================================
   DEV CONTROLS
   ============================================================ */
.dev{width:300px;align-self:center;background:#0c141c;border:1px solid #213743;border-radius:16px;padding:18px;color:#cdd9e4;font-family:var(--sans);box-shadow:0 30px 60px rgba(0,0,0,.5);}
.dev h4{margin:0 0 4px;font-size:14px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;}
.dev .hint{font-size:11px;color:#7d8fa1;margin:0 0 14px;line-height:1.4;}
.dev .grp{margin-bottom:16px;}
.dev label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7d8fa1;margin-bottom:6px;}
.dev .row{display:flex;align-items:center;gap:8px;}
.dev input[type=range]{flex:1;accent-color:#1bd760;}
.dev .val{font-family:var(--mono);font-size:13px;font-weight:700;color:#1bd760;min-width:52px;text-align:right;}
.dev select,.dev input[type=number]{width:100%;background:#16242f;border:1px solid #2b3f4d;border-radius:8px;color:#fff;font-family:var(--mono);font-size:12px;padding:8px 10px;}
.dev .seg{display:flex;gap:4px;background:#16242f;border:1px solid #2b3f4d;border-radius:8px;padding:4px;}
.dev .seg button{flex:1;border:none;background:transparent;color:#9fb0c0;font-family:var(--mono);font-size:11px;font-weight:600;padding:6px 0;border-radius:5px;cursor:pointer;}
.dev .seg button.on{background:#1bd760;color:#04220f;}
.dev .dev-btns{display:flex;gap:8px;flex-wrap:wrap;}
.dev .dev-btn{flex:1;background:#16242f;border:1px solid #2b3f4d;border-radius:8px;color:#fff;font-family:var(--sans);font-weight:600;font-size:12px;padding:9px 0;cursor:pointer;min-width:70px;}
.dev .dev-btn:hover{background:#1d303d;}
.dev .dev-btn.go{background:#1bd760;color:#04220f;border-color:#1bd760;}
@media (max-width:1180px){ .dev.dev--docked{display:none;} }
.dev--float{position:fixed;right:14px;top:14px;z-index:500;max-height:92vh;overflow:auto;}
.dev-toggle{position:fixed;right:14px;top:14px;z-index:501;background:#1bd760;color:#04220f;border:none;border-radius:10px;
  font-family:var(--mono,monospace);font-weight:700;font-size:12px;padding:9px 13px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.4);}