/* =====================================================================
   OUTLIER — shared UI kit (pixel space)
   Font sizes are multiples of 8px so the pixel font stays crisp:
   16 body · 24 prompt · 32 hud · 48/64/96 display
   ===================================================================== */
@font-face{font-family:'Outlier Pixel';src:url(../fonts/OutlierPixel-Regular.woff) format('woff');font-weight:400;font-display:block}
@font-face{font-family:'Outlier Pixel';src:url(../fonts/OutlierPixel-Bold.woff) format('woff');font-weight:700;font-display:block}
:root{
  --ink:#eef0ff;--ink-2:#b8b2ec;--ink-3:#8a82c8;--panel:rgba(12,9,40,.9);--panel-solid:#0c0928;--line:#2f2878;
  --cyan:#5ff3ff;--pink:#ff5fb4;--gold:#ffd34d;
  --t-pad:#aeb6cc;--t-junk:#ff8a3c;--t-strato:#2ee6a8;--t-orbit:#3fa8ff;--t-deep:#c07cff;--t-nova:#ffd34d;
  --px:'Outlier Pixel',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#05030f;color:var(--ink);font-family:var(--px);font-size:16px;line-height:1.5;-webkit-font-smoothing:none;font-smooth:never;overflow:hidden}
canvas.sky{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
.layer{position:fixed;inset:0;z-index:2;pointer-events:none}
.layer > *{pointer-events:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- notched pixel panels ---- */
.notch{clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px))}
.panel{background:var(--panel);padding:16px 24px}
.label{font-size:16px;letter-spacing:4px;text-transform:uppercase;color:var(--ink-3)}
.label.pink{color:#ff8fc8}.label.cyan{color:var(--cyan)}
.logo{font-weight:700;letter-spacing:8px;color:#fff6fb;text-shadow:-4px 0 #ff3d9a,4px 0 #2ef0ff,0 0 32px rgba(255,80,200,.45)}

/* ---- buttons ---- */
.btn{font-family:var(--px);font-weight:700;font-size:16px;letter-spacing:4px;text-transform:uppercase;color:var(--ink);background:var(--panel-solid);border:4px solid var(--cyan);padding:12px 24px;cursor:pointer;box-shadow:0 0 16px rgba(95,243,255,.35);transition:transform .08s,box-shadow .15s}
.btn:hover{box-shadow:0 0 28px rgba(95,243,255,.6)}.btn:active{transform:translateY(2px)}
.btn.big{font-size:24px;padding:16px 40px}
.btn.ghost{border-width:2px;border-color:var(--line);box-shadow:none;color:var(--ink-2);font-weight:400}
.btn.pink{border-color:var(--pink);box-shadow:0 0 16px rgba(255,95,180,.35)}
.input{font-family:var(--px);font-size:24px;color:var(--ink);background:#0a0724;border:4px solid var(--cyan);padding:12px 16px;width:100%;outline:none;caret-color:var(--pink)}
.input::placeholder{color:#5a5294}

/* ---- HUD (fixed grid row; nothing can overlap it) ---- */
.hud{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:5;display:grid;grid-template-columns:180px auto 180px;gap:24px;align-items:start;pointer-events:none;width:max-content;max-width:96vw}
.hud .box{background:var(--panel);padding:8px 16px;height:72px}
.hud .val{font-size:32px;line-height:40px;white-space:nowrap}
.hud .dist{color:var(--cyan)}.hud .score{color:var(--pink);text-align:right}
.hud .score.bump{animation:bump .35s cubic-bezier(.2,1.8,.4,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35);filter:brightness(1.8)}100%{transform:scale(1)}}
.pips{display:flex;gap:6px;justify-content:center;padding-top:12px}
.pipcol{display:flex;flex-direction:column;align-items:center;gap:6px}
.pip{position:relative;width:20px;height:20px;background:#1e1756;box-shadow:inset 0 0 0 2px #2c2470}
.pip.now{box-shadow:inset 0 0 0 2px var(--pink),0 0 10px rgba(255,95,180,.6);animation:nowpulse 1s steps(2) infinite}
@keyframes nowpulse{50%{box-shadow:inset 0 0 0 2px #ffb0dc,0 0 4px rgba(255,95,180,.3)}}
.pip.pop{animation:pipPop .6s cubic-bezier(.2,1.7,.35,1)}
@keyframes pipPop{0%{transform:scale(0) rotate(-45deg);filter:brightness(3)}60%{transform:scale(1.7) rotate(8deg);filter:brightness(2)}100%{transform:scale(1)}}
.pip.t-pad{background:var(--t-pad);box-shadow:none}
.pip.t-junk{background:var(--t-junk);box-shadow:inset -4px -4px 0 #b8581c;animation:junkJitter 2.4s steps(1) infinite}
@keyframes junkJitter{0%,92%{transform:none}94%{transform:translate(1px,-1px) rotate(6deg)}97%{transform:translate(-1px,0)}}
.pip.t-strato{background:var(--t-strato);box-shadow:0 0 10px #2ee6a8;animation:stratoGlow 1.6s ease-in-out infinite}
@keyframes stratoGlow{50%{box-shadow:0 0 18px #2ee6a8,0 0 4px #fff}}
.pip.t-orbit{background:var(--t-orbit);box-shadow:0 0 12px #3fa8ff}
.pip.t-orbit::after{content:'';position:absolute;width:4px;height:4px;background:#fff;left:8px;top:-8px;transform-origin:2px 18px;animation:orbitDot 1.4s linear infinite}
@keyframes orbitDot{to{transform:rotate(360deg)}}
.pip.t-deep{background:linear-gradient(135deg,#6a2aa8,#c07cff 40%,#ffd8f4 50%,#c07cff 60%,#6a2aa8);background-size:300% 300%;box-shadow:0 0 14px #c07cff;animation:deepShim 1.8s linear infinite}
@keyframes deepShim{to{background-position:300% 300%}}
.pip.t-nova{background:var(--t-nova);box-shadow:0 0 14px #ffd34d,0 0 30px rgba(255,154,60,.7);z-index:1;animation:novaBob 1.2s ease-in-out infinite}
.pip.t-nova::before{content:'';position:absolute;inset:-14px;background:repeating-conic-gradient(rgba(255,230,140,.75) 0 10deg,transparent 10deg 30deg);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);animation:orbitDot 3s linear infinite;z-index:-1}
@keyframes novaBob{50%{transform:translateY(-2px) scale(1.08)}}
.pipcap{font-size:16px;letter-spacing:4px;color:var(--ink-3);text-transform:uppercase}

/* ---- zone toast: its own reserved band under the HUD ---- */
.toast{position:fixed;top:96px;left:50%;transform:translate(-50%,-8px);z-index:4;opacity:0;transition:opacity .4s,transform .4s;text-align:center;pointer-events:none;width:max-content;max-width:92vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast .zt{display:inline-block;font-weight:700;font-size:24px;letter-spacing:8px;color:#fff;background:var(--panel);padding:4px 16px;text-shadow:-2px 0 #ff3d9a,2px 0 #2ef0ff}
.toast .zf{font-size:16px;color:var(--ink-2);margin-top:4px;background:rgba(10,7,30,.75);padding:2px 12px;display:inline-block}

/* ---- prompt panel (below the toast band) ---- */
.stage{position:fixed;left:50%;top:184px;transform:translateX(-50%);z-index:3;width:min(640px,92vw);display:flex;flex-direction:column;gap:16px}
.prompt .q{font-size:24px;line-height:32px;margin-top:8px}
.prompt .hint{font-size:16px;color:var(--ink-3);letter-spacing:2px;margin-top:8px}
.shake-x{animation:shx .35s}
@keyframes shx{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ---- tier reveal (escalates with rarity) ---- */
.reveal{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:6;text-align:center;pointer-events:none;width:min(1000px,96vw);padding:24px 16px 20px}
.reveal::after{content:'';position:absolute;inset:20% -10% -12% -10%;background:radial-gradient(closest-side,rgba(8,6,26,.62) 0,rgba(8,6,26,.5) 35%,rgba(8,6,26,.3) 60%,rgba(8,6,26,.12) 80%,transparent 100%);z-index:-1;animation:shadeIn .5s ease-out both}
@keyframes shadeIn{from{opacity:0;transform:scale(.8)}}
.reveal{animation:revealIn .35s cubic-bezier(.2,1.4,.4,1) both}
@keyframes revealIn{from{opacity:0;transform:translate(-50%,-46%) scale(.92)}}
.reveal.out{animation:revealOut .45s cubic-bezier(.5,0,.8,.4) both}
@keyframes revealOut{to{opacity:0;transform:translate(-50%,-62%) scale(.96);filter:blur(2px)}}
.reveal.out .icon{animation:iconOut .45s ease-in both}@keyframes iconOut{to{transform:translateY(-30px) scale(.7);opacity:0}}
.reveal .icon{display:block;width:max-content;margin:0 auto;image-rendering:pixelated;position:relative}
.reveal .icon canvas{display:block}
.reveal .name{font-weight:700;letter-spacing:8px;margin-top:16px;white-space:nowrap}
.reveal .name span{display:inline-block}
.reveal .ans{font-size:24px;margin-top:8px}
.reveal .pts{font-size:24px;margin-top:8px}
.reveal .pts b{font-weight:700}
.reveal .sub{font-size:16px;letter-spacing:3px;color:var(--ink-2);margin-top:4px}
.reveal.t-pad .name{font-size:32px;color:var(--t-pad)}
.reveal.t-pad .name span{animation:fadeUp .4s both}
.reveal.t-junk .name{font-size:32px;color:var(--t-junk);text-shadow:0 0 12px rgba(255,154,60,.5)}
.reveal.t-junk .name span{animation:clunk .55s cubic-bezier(.3,1.6,.5,1) both}
.reveal.t-strato .name{font-size:48px;color:var(--t-strato);text-shadow:0 0 16px rgba(46,230,168,.7)}
.reveal.t-strato .name span{animation:floatUp .7s cubic-bezier(.2,1.4,.4,1) both}
.reveal.t-orbit .name{font-size:48px;color:var(--t-orbit);text-shadow:-2px 0 #ff3d9a,2px 0 #2ef0ff,0 0 20px rgba(63,168,255,.8)}
.reveal.t-orbit .name span{animation:orbitIn .8s cubic-bezier(.2,1.3,.4,1) both}
.reveal.t-deep .name{font-size:64px;color:#e6c8ff;text-shadow:-3px 0 #ff3d9a,3px 0 #2ef0ff,0 0 28px rgba(192,124,255,.9)}
.reveal.t-deep .name span{animation:glitchIn .7s steps(6) both}
.reveal.t-deep .name{animation:glitchLoop 2.2s steps(1) infinite .8s}
.reveal.t-nova .name{font-size:88px;line-height:1;color:#ffd34d;text-shadow:-4px 0 rgba(255,61,154,.8),4px 0 rgba(46,240,255,.8),0 0 24px rgba(255,211,77,.9),0 0 60px rgba(255,140,60,.6)}
.reveal.t-nova .name span{animation:novaLetter .9s cubic-bezier(.2,1.9,.35,1) both,novaHue 1.6s linear calc(var(--i) * -120ms) infinite}
@keyframes novaHue{0%,100%{color:#fff3c4}20%{color:#ffd34d}40%{color:#ff9a3c}60%{color:#ff5fb4}80%{color:#7ff6ff}}
.reveal.t-nova .icon::before{content:'';position:absolute;left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;background:repeating-conic-gradient(rgba(255,226,130,.45) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 65%);mask:radial-gradient(circle,#000 10%,transparent 65%);animation:orbitDot 9s linear infinite;z-index:-1}
.reveal.t-orbit .icon::before{content:'';position:absolute;left:50%;top:50%;width:140px;height:44px;margin:-22px 0 0 -70px;border:2px dashed rgba(63,168,255,.8);border-radius:50%;animation:orbitDot 4s linear infinite;z-index:-1}
.reveal .icon svg{animation:iconPop .6s cubic-bezier(.2,1.7,.35,1) both}
.reveal.t-nova .icon svg{animation:iconPop .7s cubic-bezier(.2,1.9,.35,1) both,novaBob 1.2s ease-in-out .7s infinite}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}
@keyframes clunk{0%{opacity:0;transform:translateY(-30px) rotate(-14deg)}70%{transform:translateY(4px) rotate(4deg)}}
@keyframes floatUp{0%{opacity:0;transform:translateY(28px) scale(.6)}}
@keyframes orbitIn{0%{opacity:0;transform:translate(calc(var(--i) * 6px - 40px),-40px) scale(.2) rotate(-180deg)}}
@keyframes glitchIn{0%{opacity:0;transform:translateX(-12px) skewX(30deg)}30%{opacity:1;transform:translateX(10px)}60%{transform:translateX(-4px) skewX(-10deg)}100%{transform:none}}
@keyframes glitchLoop{0%,90%{transform:none}92%{transform:translateX(3px) skewX(8deg)}95%{transform:translateX(-3px)}}
@keyframes novaLetter{0%{opacity:0;transform:translateY(60px) scale(.2) rotate(-30deg)}60%{transform:translateY(-14px) scale(1.25)}100%{transform:none}}
@keyframes rainbow{to{background-position:300% 0}}
@keyframes iconPop{0%{transform:scale(0) rotate(-30deg)}}

/* ---- DOM sparks ---- */
.spark{position:fixed;width:4px;height:4px;z-index:7;pointer-events:none}

@media (max-width:700px){
  .hud{grid-template-columns:120px auto 120px;gap:8px}.hud .box{padding:6px 10px;height:64px}.hud .val{font-size:24px;line-height:32px}
  .pip{width:14px;height:14px}.pips{gap:4px}
  .toast{top:84px}.stage{top:168px}
  .reveal.t-nova .name{font-size:48px}.reveal.t-deep .name{font-size:40px}.reveal.t-orbit .name,.reveal.t-strato .name{font-size:32px}.reveal .name{letter-spacing:4px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}

/* ===== tier plates: frames get more elaborate as tiers rise ===== */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.reveal .plate{position:relative;display:inline-block;margin-top:16px;padding:8px 24px}
.reveal .plate .name{margin-top:0}
.reveal.t-pad .plate{border-bottom:2px solid rgba(201,208,224,.5)}
.reveal.t-junk .plate{border:2px dashed #ff9a3c;background:rgba(80,30,8,.5);transform:rotate(-2deg);animation:junkWob 3s steps(2) infinite}
@keyframes junkWob{50%{transform:rotate(-1deg) translateY(1px)}}
.reveal.t-strato .plate{border:3px solid #2ee6a8;background:rgba(4,44,34,.55);box-shadow:0 0 18px rgba(46,230,168,.45),inset 0 0 18px rgba(46,230,168,.25);animation:stratoGlow 1.6s ease-in-out infinite}
.reveal.t-strato .plate::before,.reveal.t-strato .plate::after{content:'';position:absolute;width:16px;height:16px;border:4px solid #c8ffe8}
.reveal.t-strato .plate::before{left:-10px;top:-10px;border-right:0;border-bottom:0}.reveal.t-strato .plate::after{right:-10px;bottom:-10px;border-left:0;border-top:0}
.reveal.t-orbit .plate{border:3px solid #3fa8ff;outline:3px solid rgba(63,168,255,.4);outline-offset:6px;background:rgba(6,24,60,.6);box-shadow:0 0 26px rgba(63,168,255,.5)}
.reveal.t-orbit .plate::after{content:'';position:absolute;width:8px;height:8px;background:#fff;box-shadow:0 0 10px #fff,0 0 20px #3fa8ff;offset-path:inset(-9px);animation:orbitRun 2.4s linear infinite}
@keyframes orbitRun{from{offset-distance:0%}to{offset-distance:100%}}
.reveal.t-deep .plate,.reveal.t-nova .plate{border:4px solid transparent;background:linear-gradient(rgba(16,6,40,.82),rgba(16,6,40,.82)) padding-box,conic-gradient(from var(--ang),#c07cff,#ff5fb4,#5ff3ff,#c07cff) border-box;animation:spinBorder 3s linear infinite}
.reveal.t-deep .plate{box-shadow:0 0 34px rgba(192,124,255,.6)}
.reveal.t-deep .plate::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px);animation:scanMove 1s linear infinite;pointer-events:none}
@keyframes scanMove{to{background-position:0 8px}}
@keyframes spinBorder{to{--ang:360deg}}
.reveal.t-nova .plate{padding:16px 40px;border-width:6px;background:radial-gradient(ellipse at 50% 50%,rgba(70,40,0,.85),rgba(20,8,30,.9)) padding-box,conic-gradient(from var(--ang),#fff3c4,#ffd34d,#ff9a3c,#ff5fb4,#c07cff,#5ff3ff,#fff3c4) border-box;animation:spinBorder 2s linear infinite,novaAura 1.2s ease-in-out infinite;overflow:hidden}
@keyframes novaAura{0%,100%{box-shadow:0 0 40px rgba(255,211,77,.6),0 0 90px rgba(255,120,60,.35)}50%{box-shadow:0 0 70px rgba(255,211,77,.9),0 0 140px rgba(255,95,180,.5)}}
.reveal.t-nova .plate::after{content:'';position:absolute;top:-20%;bottom:-20%;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 1.8s ease-in-out infinite .6s}
@keyframes shine{to{left:130%}}
.reveal .stamp{position:absolute;right:-14px;top:-16px;font-weight:700;font-size:16px;letter-spacing:2px;padding:2px 8px;transform:rotate(8deg);background:#ffd34d;color:#2a1800;box-shadow:0 0 14px rgba(255,211,77,.8)}
.reveal.t-deep .stamp{background:#c07cff;color:#1a0630;box-shadow:0 0 14px rgba(192,124,255,.8)}

/* ===== side altitude gauge ===== */
.gauge{position:fixed;right:10px;top:112px;bottom:120px;width:150px;z-index:4;pointer-events:none}
.gauge .track{position:absolute;right:0;top:0;bottom:0;width:12px;background:linear-gradient(0deg,#6af0c8 0%,#3fc4ff 10%,#4a86ff 22%,#6c70ff 34%,#9a6cff 46%,#c86ae8 58%,#ff6ab8 70%,#ffa05a 82%,#ffe0a0 92%,#ffffff 100%);box-shadow:0 0 0 2px #1a1450,0 0 14px rgba(160,120,255,.35)}
.gauge .seg{position:absolute;right:0;width:12px;border-top:1px solid rgba(255,255,255,.08)}
.gauge .seg i{position:absolute;inset:0;background:#07051a;opacity:.72;transition:opacity .5s}
.gauge .seg.done i{opacity:0}
.gauge .seg.on i{opacity:0;box-shadow:0 0 0 2px #fff,0 0 14px var(--zc);animation:none}
.gauge .seg.on{z-index:2}
.gauge .seg b{position:absolute;right:18px;top:50%;transform:translateY(-50%);white-space:nowrap;font-weight:400;font-size:16px;line-height:16px;color:var(--ink-3);opacity:0;transition:opacity .4s}
.gauge .seg.near b{opacity:.55}
.gauge .seg.on b{opacity:1;color:#fff;text-shadow:0 0 8px var(--zc)}
.gauge .marker{position:absolute;right:-4px;width:20px;height:4px;transform:translateY(50%);transition:bottom .25s linear}
.gauge .marker .mk{position:absolute;right:0;top:-6px;width:0;height:0;border:8px solid transparent;border-right-color:#ff5fb4;border-left:0;filter:drop-shadow(0 0 6px #ff5fb4)}
.gauge .marker .mt{display:none}
.gauge .best{position:absolute;right:0;width:24px;height:2px;background:#ffd34d;transform:translateY(50%);display:none}
.gauge .best span{position:absolute;right:28px;top:-8px;font-size:16px;line-height:16px;color:#ffd34d}
@media (max-width:700px){.gauge{width:16px;right:4px;top:96px;bottom:110px}.gauge .seg b{display:none}.gauge .track,.gauge .seg{width:8px}.gauge .best span{display:none}}

/* ===== escalating HUD numbers ===== */
.hud .dist[data-lv="1"]{color:#7ff6ff;text-shadow:0 0 10px rgba(127,246,255,.5)}
.hud .dist[data-lv="2"]{color:#9ad8ff;text-shadow:-2px 0 rgba(255,61,154,.5),2px 0 rgba(46,240,255,.5),0 0 12px rgba(127,200,255,.6)}
.hud .dist[data-lv="3"]{color:#e0c0ff;text-shadow:-2px 0 rgba(255,61,154,.7),2px 0 rgba(46,240,255,.7),0 0 16px rgba(192,124,255,.8)}
.hud .dist[data-lv="4"],.hud .score[data-lv="4"]{animation:novaHue 2s linear infinite;text-shadow:-2px 0 rgba(255,61,154,.8),2px 0 rgba(46,240,255,.8),0 0 18px rgba(255,211,77,.9)}
.hud .score[data-lv="1"]{color:#ffb070;text-shadow:0 0 10px rgba(255,154,60,.6)}
.hud .score[data-lv="2"]{color:#7ff6ff;text-shadow:0 0 12px rgba(63,224,255,.7)}
.hud .score[data-lv="3"]{color:#e0c0ff;text-shadow:-2px 0 rgba(255,61,154,.7),2px 0 rgba(46,240,255,.7),0 0 16px rgba(192,124,255,.8)}
.lvpop{animation:lvpop .6s cubic-bezier(.2,1.8,.4,1)}
@keyframes lvpop{0%{transform:scale(1)}35%{transform:scale(1.5);filter:brightness(2.4)}100%{transform:scale(1)}}
.hud .box{transition:box-shadow .4s}

.reveal .stamp.s-junk{background:#ff9a3c;color:#2a1200;box-shadow:none;transform:rotate(-6deg)}.reveal .stamp.s-strato{background:#2ee6a8;color:#022a1c;box-shadow:0 0 10px rgba(46,230,168,.7)}.reveal .stamp.s-orbit{background:#3fa8ff;color:#041a38;box-shadow:0 0 12px rgba(63,168,255,.8)}
.reveal.t-nova .stamp{font-size:24px;padding:4px 12px;animation:novaBob 1s ease-in-out infinite}

/* gauge labels grow cooler the further out they are */
.gauge .seg b::before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;vertical-align:2px;background:var(--zc);box-shadow:0 0 6px var(--zc)}
.gauge .seg[data-lv="1"].on b{letter-spacing:2px;text-shadow:0 0 10px var(--zc)}
.gauge .seg[data-lv="2"].on b{letter-spacing:2px;font-weight:700;text-shadow:-1px 0 rgba(255,61,154,.6),1px 0 rgba(46,240,255,.6),0 0 12px var(--zc)}
.gauge .seg[data-lv="3"].on b{letter-spacing:3px;font-weight:700;color:#f0e0ff;text-shadow:-2px 0 rgba(255,61,154,.8),2px 0 rgba(46,240,255,.8),0 0 16px var(--zc);animation:glitchLoop 2.2s steps(1) infinite}
.gauge .seg[data-lv="4"].on b{letter-spacing:4px;font-weight:700;animation:novaHue 2s linear infinite;text-shadow:-2px 0 rgba(255,61,154,.9),2px 0 rgba(46,240,255,.9),0 0 20px rgba(255,211,77,.9)}
.gauge .seg[data-lv="3"].on b::before,.gauge .seg[data-lv="4"].on b::before{animation:orbitDot 2s linear infinite;width:8px;height:8px}
.gauge .seg[data-lv="4"].near b,.gauge .seg[data-lv="3"].near b{text-shadow:0 0 8px var(--zc)}
.gauge .seg.on b{font-size:16px;padding:2px 0}
.gauge .seg.on b::after{content:'◄';margin-left:6px;color:var(--zc)}

.reveal .name span:last-child{letter-spacing:0}
.reveal .platewrap{position:relative;display:inline-block;margin-top:16px}
.reveal .platewrap .plate{margin-top:0}
.reveal .platewrap .stamp{z-index:2}

.reveal.t-pad .plate{border:2px solid rgba(174,182,204,.55);border-bottom-width:2px;background:rgba(20,22,40,.5)}
.reveal.t-pad .plate::before,.reveal.t-pad .plate::after{content:'';position:absolute;width:6px;height:6px;background:#aeb6cc}
.reveal.t-pad .plate::before{left:-4px;top:-4px}.reveal.t-pad .plate::after{right:-4px;bottom:-4px}
.reveal.t-junk .plate{border:4px solid transparent;background:linear-gradient(rgba(60,22,6,.75),rgba(60,22,6,.75)) padding-box,repeating-linear-gradient(45deg,#ff8a3c 0 8px,#2a1206 8px 16px) border-box}
.reveal.t-strato .plate::before,.reveal.t-strato .plate::after{animation:bracketPulse 1.2s ease-in-out infinite}
@keyframes bracketPulse{50%{transform:translate(-3px,-3px)}}
.reveal.t-strato .plate::after{animation-name:bracketPulse2}@keyframes bracketPulse2{50%{transform:translate(3px,3px)}}
.reveal.t-orbit .plate{outline:2px dashed rgba(63,168,255,.6);outline-offset:8px}

@media (max-width:1100px){.reveal.t-nova .name{font-size:64px}.reveal.t-deep .name{font-size:48px}}
@media (max-width:700px){.reveal.t-nova .name{font-size:40px;letter-spacing:4px}.reveal.t-nova .plate{padding:12px 16px}}

/* pixel outlines keep text readable over bright clouds / planets */
.reveal .ans,.reveal .pts,.reveal .sub,.toast .zf,.tag,.title-foot,.subtitle{text-shadow:2px 0 #07051a,-2px 0 #07051a,0 2px #07051a,0 -2px #07051a,2px 2px #07051a,-2px -2px #07051a}
.subtitle{text-shadow:2px 0 #07051a,-2px 0 #07051a,0 2px #07051a,0 -2px #07051a,0 0 14px rgba(95,243,255,.7)}
.reveal .sub{max-width:720px;margin-left:auto;margin-right:auto}

/* ===== phones: compact HUD between the corner buttons, narrower tier plates ===== */
@media (max-width:700px){
  .hud{top:8px;left:60px;right:60px;width:auto;transform:none;max-width:none;grid-template-columns:1fr 1fr;gap:6px 6px}
  .hud .box{height:44px;padding:2px 8px;min-width:0;overflow:hidden}
  .hud .box .label{font-size:8px;letter-spacing:2px;line-height:14px}
  .hud .val{font-size:16px;line-height:24px}
  .hud .pipcol{grid-column:1 / 3;grid-row:2}
  .hud .pips{padding-top:0}.hud .pipcap{display:none}
  .pip{width:12px;height:12px}
  .toast{top:88px}.toast .zt{font-size:16px;letter-spacing:4px;padding:4px 12px}.toast .zf{font-size:16px}
  .stage{top:200px}
  .reveal{top:46%;padding:16px 8px}
  .reveal .platewrap{max-width:94vw}
  .reveal.t-pad .name,.reveal.t-junk .name,.reveal.t-strato .name,.reveal.t-orbit .name{font-size:24px;letter-spacing:2px}
  .reveal.t-deep .name,.reveal.t-nova .name{font-size:32px;letter-spacing:2px}
  .reveal .plate,.reveal.t-nova .plate{padding:8px 16px}
  .reveal.t-orbit .plate{outline-offset:4px}
  .reveal .stamp{right:-6px;top:-18px;font-size:16px}.reveal.t-nova .stamp{font-size:16px;padding:2px 8px}
  .reveal .ans,.reveal .pts{font-size:24px;line-height:32px}
  .reveal .sub{letter-spacing:1px;background:rgba(7,5,26,.62);padding:4px 8px;display:inline-block}
}

/* ===== WHITEOUT (singularity): UI turns to ink on light, like monoliths in the white room ===== */
body.whiteout .gauge .seg b{color:#3b3474;text-shadow:none}
body.whiteout .gauge .seg.on b{color:#1d1446}
body.whiteout .reveal::after{inset:34% 6% 0 6%;background:rgba(20,14,52,.9);box-shadow:0 0 0 2px rgba(255,255,255,.7),0 12px 40px rgba(60,40,140,.25);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
body.whiteout .reveal{max-width:min(860px,96vw)}
body.whiteout .toast .zt{background:#140e36}

/* ===== styled dropdown (UI.select) ===== */
.dd-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden}
.dd{position:relative;width:100%;font-family:var(--px)}
.dd-btn{width:100%;display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:48px;background:#0e0b34;border:0;box-shadow:inset 0 0 0 2px #2c2470;color:var(--ink);font-family:var(--px);font-size:16px;letter-spacing:2px;cursor:pointer;text-align:left;transition:box-shadow .2s,background .2s}
.dd-btn:hover{box-shadow:inset 0 0 0 2px #4a3fb0;background:#120e40}
.dd-btn:focus-visible,.dd.open .dd-btn{outline:none;box-shadow:inset 0 0 0 2px var(--cyan),0 0 16px rgba(95,243,255,.25);background:#120e40}
.dd-dot{width:8px;height:8px;flex:none;transition:background .25s,box-shadow .25s}
.dd-val{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-val.swap{animation:ddSwap .3s cubic-bezier(.16,1,.3,1)}
@keyframes ddSwap{from{opacity:0;transform:translateY(6px)}}
.dd-chev{flex:none;fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;list-style:none;max-height:min(360px,52vh);overflow:auto;background:rgba(12,9,44,.97);box-shadow:inset 0 0 0 2px var(--cyan),0 18px 40px rgba(0,0,0,.55),0 0 24px rgba(95,243,255,.18);outline:none;
  visibility:hidden;opacity:0;transform:translateY(-6px) scaleY(.96);transform-origin:top;transition:opacity .18s ease,transform .22s cubic-bezier(.16,1,.3,1),visibility 0s .22s;scrollbar-width:thin;scrollbar-color:#3a3290 transparent}
.dd.open .dd-list{visibility:visible;opacity:1;transform:none;transition:opacity .18s ease,transform .28s cubic-bezier(.16,1,.3,1),visibility 0s}
.dd-list li{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;min-height:44px;font-size:16px;letter-spacing:1px;color:var(--ink-2);cursor:pointer;transition:background .12s,color .12s}
.dd.open .dd-list li{animation:ddItem .34s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--k) * 18ms)}
@keyframes ddItem{from{opacity:0;transform:translateX(-6px)}}
.dd-tag{width:4px;height:16px;flex:none;background:var(--oc);opacity:.55;transition:height .18s cubic-bezier(.34,1.56,.64,1),opacity .18s}
.dd-list li.act{background:rgba(95,243,255,.08);color:#fff}
.dd-list li.act .dd-tag{height:24px;opacity:1;box-shadow:0 0 10px var(--oc)}
.dd-t{flex:1}
.dd-ok{flex:none;fill:none;stroke:var(--oc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.dd-list li[aria-selected="true"]{color:#fff}
.dd-list li[aria-selected="true"] .dd-ok{opacity:1;transform:none}
.dd-list li[aria-selected="true"] .dd-tag{opacity:1}
.dd-label{display:block;margin-top:16px;margin-bottom:6px}
.sel-row{position:relative}