/* NODEB59 ARCADE front page (arena.nodeb59.com). Self-hosted fonts only (see assets/fonts/). */
@font-face{font-family:'VT323';src:url(assets/fonts/vt323.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Press Start 2P';src:url(assets/fonts/PressStart2P-Regular.ttf) format('truetype');font-display:swap}

:root{
  --ar:1.7778;
  --green:#3dff7a; --green-dim:#1f9e4b;
  --amber:#ffb238; --pink:#ff4fd8; --cyan:#41e6ff;
  --ink:#05060c;
  --mono:'VT323',ui-monospace,Consolas,monospace;
  --pix:'Press Start 2P',var(--mono);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:#e9e6ff;font-family:var(--mono)}
body{overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.logo:focus,.room:focus{outline:none}

/* ---------- skip link ---------- */
.skip{position:fixed;z-index:60;right:18px;bottom:18px;font-family:var(--mono);font-size:20px;color:var(--green);
  background:rgba(0,10,4,.8);border:1px solid var(--green-dim);padding:4px 12px;text-decoration:none;
  transform:translateY(160%);transition:transform .15s}
.skip:focus{transform:none}
.intro-on .skip{transform:none;opacity:.75}
.intro-on .skip:hover,.intro-on .skip:focus{opacity:1}

/* ---------- the room: background stays "cover", hotspots stay locked to it ---------- */
.viewport{position:fixed;inset:0;overflow:hidden}
.stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100vw,calc(100vh * var(--ar)));height:max(100vh,calc(100vw / var(--ar)));container-type:size}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.stars{position:absolute;pointer-events:none;mix-blend-mode:screen}
.decor,.hotspots,.dbg-layer,.sky,.marquees,.doors{position:absolute;inset:0}
.sky,.marquees{pointer-events:none;overflow:hidden}
.dome-front{position:absolute;pointer-events:none;user-select:none}
.decor,.dbg-layer{pointer-events:none}
.hotspots{pointer-events:none}
.hs{pointer-events:auto}

/* portrait phones: show the full height and let people pan sideways */
@media (max-aspect-ratio:1/1){
  .viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .viewport::-webkit-scrollbar{display:none}
  .stage{left:0;top:0;transform:none;height:100svh;width:calc(100svh * var(--ar))}
}

/* ---------- HUD ---------- */
.hud-top{position:fixed;z-index:5;left:clamp(12px,2.2vw,32px);top:clamp(12px,2.2vw,28px);max-width:min(640px,62vw);
  padding:12px 16px 10px;background:linear-gradient(180deg,rgba(8,6,22,.72),rgba(8,6,22,.5));
  border:1px solid rgba(255,79,216,.28);border-radius:6px;backdrop-filter:blur(4px)}
.logo{margin:0;font-family:var(--pix);font-weight:400;font-size:clamp(13px,1.35vw,20px);letter-spacing:2px;color:#fff;
  text-shadow:0 0 6px var(--pink),0 0 18px rgba(255,79,216,.55)}
.logo span{color:var(--cyan);text-shadow:0 0 6px var(--cyan),0 0 18px rgba(65,230,255,.5)}
.tagline{margin:8px 0 0;font-size:clamp(17px,1.5vw,23px);line-height:1.05;color:#d9f7e3}
.hud-right{position:fixed;z-index:5;right:clamp(12px,2.2vw,32px);top:clamp(12px,2.2vw,28px);text-align:right}
.osd{margin:0;font-size:20px;color:rgba(255,255,255,.72);text-shadow:0 0 4px #000;letter-spacing:1px}
.osd-play{color:#fff}
.standin{display:inline-block;margin:8px 0 0;font-size:16px;letter-spacing:1px;color:#1a1000;background:var(--amber);padding:1px 8px;border-radius:2px}
.standin[hidden]{display:none}
.pan-hint{display:none}
@media (max-aspect-ratio:1/1){
  .pan-hint{display:block;position:fixed;z-index:5;left:0;right:0;bottom:76px;margin:0;text-align:center;font-size:18px;color:rgba(255,255,255,.75);text-shadow:0 0 6px #000;pointer-events:none}
  .hud-top{max-width:calc(100vw - 24px)}
  .hud-right{top:122px;right:12px}
  .osd{font-size:17px}
  .pan-hint{bottom:112px}
}

.dock{position:fixed;z-index:6;left:0;right:0;margin:0 auto;width:max-content;bottom:clamp(10px,2vw,22px);display:flex;gap:4px 18px;flex-wrap:wrap;justify-content:center;
  max-width:calc(100vw - 24px);padding:6px 14px;background:rgba(0,8,4,.72);border:1px solid rgba(61,255,122,.3);border-radius:4px;backdrop-filter:blur(3px)}
.dock a,.dock .linkbtn{color:var(--green);text-decoration:none;font-size:clamp(17px,1.4vw,20px);line-height:1.2;white-space:nowrap}
.dock a:hover,.dock .linkbtn:hover{text-shadow:0 0 8px var(--green)}
.dock .dock-pb{color:#c9b8ff}

/* ---------- hotspots ---------- */
.hs{position:absolute;display:block;border-radius:4px;color:var(--green);text-decoration:none;-webkit-tap-highlight-color:transparent}
.hs:focus-visible{outline:none}
.hs::before{content:"";position:absolute;inset:-4px;border-radius:4px;opacity:0;transition:opacity .15s;pointer-events:none;
  --c:var(--green);--l:16px;
  background:
   linear-gradient(var(--c),var(--c)) top left/var(--l) 2px no-repeat,linear-gradient(var(--c),var(--c)) top left/2px var(--l) no-repeat,
   linear-gradient(var(--c),var(--c)) top right/var(--l) 2px no-repeat,linear-gradient(var(--c),var(--c)) top right/2px var(--l) no-repeat,
   linear-gradient(var(--c),var(--c)) bottom left/var(--l) 2px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/2px var(--l) no-repeat,
   linear-gradient(var(--c),var(--c)) bottom right/var(--l) 2px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/2px var(--l) no-repeat;
  filter:drop-shadow(0 0 4px var(--green))}
.hs:hover::before,.hs:focus-visible::before{opacity:1}
.hs:focus-visible::after{content:"";position:absolute;inset:-4px;border:1px dashed rgba(61,255,122,.55);border-radius:4px;pointer-events:none}

.hs-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity .2s,box-shadow .2s}

.hs-label{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;
  font-family:var(--mono);font-size:clamp(20px,1.6vw,28px);line-height:1;color:var(--green);letter-spacing:1px;
  background:rgba(0,10,4,.86);border:1px solid rgba(61,255,122,.45);padding:5px 12px 4px;border-radius:3px;
  text-shadow:0 0 6px rgba(61,255,122,.8);box-shadow:0 0 18px rgba(61,255,122,.18);opacity:0;transition:opacity .15s,transform .15s;pointer-events:none}
.hs-label b{font-weight:400;animation:blink 1s steps(1) infinite}
.lab-left .hs-label{left:0;transform:translateY(4px)}
.lab-right .hs-label{left:auto;right:0;transform:translateY(4px)}
.lab-below .hs-label{bottom:auto;top:calc(100% + 10px)}
.lab-mid .hs-label{bottom:auto;top:35%;z-index:5}
.hs:hover .hs-label,.hs:focus-visible .hs-label{opacity:1;transform:translateX(-50%)}
.lab-left:hover .hs-label,.lab-left:focus-visible .hs-label,.lab-right:hover .hs-label,.lab-right:focus-visible .hs-label{transform:none}
/* touch screens have no hover: keep the prompts visible */
@media (hover:none){
  .hs .hs-label{opacity:.92;transform:translateX(-50%);font-size:18px}
  .lab-left .hs-label,.lab-right .hs-label{transform:none}
}

/* neon (cabinet rows): marquee glow along the top, brighter on hover */
.hs-neon .hs-glow{background:
  radial-gradient(60% 18% at 50% 8%,rgba(255,79,216,.28),transparent 70%),
  radial-gradient(70% 30% at 50% 30%,rgba(65,230,255,.12),transparent 70%);
  mix-blend-mode:screen;animation:neon 7s infinite}
.hs-neon:hover .hs-glow,.hs-neon:focus-visible .hs-glow{background:
  radial-gradient(70% 22% at 50% 8%,rgba(255,79,216,.5),transparent 70%),
  radial-gradient(80% 40% at 50% 30%,rgba(65,230,255,.25),transparent 70%);animation:none}

/* webring sign (drawn, since the room has none yet) */
.sign-plate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;
  background:linear-gradient(180deg,rgba(12,10,30,.9),rgba(6,4,18,.92));border:1px solid rgba(65,230,255,.7);border-radius:6px;
  box-shadow:0 0 10px rgba(65,230,255,.45),inset 0 0 10px rgba(65,230,255,.18);animation:neon 9s infinite 2s}
.sign-t{font-family:var(--pix);font-size:clamp(7px,.85cqw,16px);color:#d8fbff;letter-spacing:1px;text-shadow:0 0 6px var(--cyan)}
.sign-a{font-family:var(--mono);font-size:clamp(12px,1.2cqw,22px);color:var(--pink);text-shadow:0 0 6px var(--pink)}

/* railing mounts: two posts with clamp feet under a mounted sign or plate */
.mount-post{position:absolute;top:97%;width:4%;height:27%;background:linear-gradient(90deg,#2a2c36,#b5bacb 50%,#2a2c36);border-radius:1px}
.mount-post::after{content:"";position:absolute;left:-70%;right:-70%;bottom:-10%;height:26%;border-radius:1px;background:linear-gradient(#c3c8d6,#3a3d4a);box-shadow:0 2px 3px rgba(0,0,0,.85)}
.mount-post.l{left:14%}.mount-post.r{right:14%}
.sign-plate{z-index:1}
/* explainer plate mounted on the railing next to the webring sign */
.hs-capw{position:absolute;pointer-events:none}
.hs-cap{position:absolute;inset:0;display:block}
.hs-cap .mount-post{height:16%}
.cap-face{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:.25cqw;padding:.25cqw .6cqw;text-align:left;
  background:linear-gradient(180deg,rgba(12,10,30,.94),rgba(6,4,18,.95));border:1px solid rgba(65,230,255,.5);border-radius:4px;
  box-shadow:0 0 8px rgba(65,230,255,.25),0 3px 6px rgba(0,0,0,.6)}
.cap-face span{font-family:var(--mono);font-size:clamp(10px,1.02cqw,22px);line-height:1;color:#d8fbff;text-shadow:0 0 5px rgba(65,230,255,.6)}
.cap-face small{font-family:var(--mono);font-size:clamp(9px,.74cqw,17px);line-height:1;color:#ffd0ec;opacity:.92}

/* Second Name: stamp desk on the floor with the NAME BOARD on posts behind it (stand-in art) */
.sd-desk{position:absolute;left:0;bottom:0;width:100%;height:auto;z-index:3;filter:brightness(.78) saturate(.9) contrast(1.05)}
.sd-refl{position:absolute;left:0;top:100%;width:100%;height:auto;transform:scaleY(-1);opacity:.2;filter:brightness(.7) blur(1px);
  -webkit-mask-image:linear-gradient(to top,#000,transparent 38%);mask-image:linear-gradient(to top,#000,transparent 38%)}
.sd-floor{position:absolute;left:-4%;right:-4%;bottom:-3.5%;height:9%;z-index:2;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.8),transparent 72%)}
.sd-post{position:absolute;top:30%;width:2.6%;height:30%;box-shadow:0 0 3px rgba(0,0,0,.8);z-index:1;background:linear-gradient(90deg,#2a2b33,#c4c9d8 45%,#3a3c46)}
.sd-post.l{left:16%}.sd-post.r{right:14%}
.nb{position:absolute;left:6%;right:6%;top:0;height:33%;z-index:1;display:flex;flex-direction:column;align-items:center;padding:.25cqw .35cqw;overflow:hidden;
  background:linear-gradient(180deg,#0c0e1e,#05060e);border:1px solid rgba(65,230,255,.55);border-radius:3px;
  box-shadow:0 0 12px rgba(65,230,255,.3),inset 0 0 12px rgba(65,230,255,.12),0 4px 8px rgba(0,0,0,.6)}
.nb-h{font-family:var(--pix);font-size:.5cqw;line-height:1.2;color:#fff;letter-spacing:.08em;text-shadow:0 0 4px var(--pink),0 0 10px var(--pink)}
.nb-s{font-family:var(--mono);font-size:.6cqw;line-height:1;color:var(--cyan);margin:.05cqw 0 .15cqw;white-space:nowrap}
.nb-list{display:flex;flex-direction:column;align-items:flex-start;width:86%;line-height:1.02;transition:transform .45s,opacity .45s}
.nb-roll{transform:translateY(-34%);opacity:0}
.nb-n{font-family:var(--mono);font-size:.64cqw;color:#d9ffe6;text-shadow:0 0 4px rgba(61,255,122,.6);white-space:pre}
.nb-n:first-child{color:#ffe08a;text-shadow:0 0 5px rgba(255,190,60,.7)}
.nb-tag{position:absolute;right:3%;bottom:4%;font-family:var(--mono);font-size:.42cqw;line-height:1.1;color:#1a1000;background:var(--amber);padding:0 .2cqw;border-radius:1px}
.hs-stampdesk:hover .nb,.hs-stampdesk:focus-visible .nb{box-shadow:0 0 18px rgba(65,230,255,.55),inset 0 0 14px rgba(65,230,255,.2),0 4px 8px rgba(0,0,0,.6)}
.hs-stampdesk:hover .sd-desk,.hs-stampdesk:focus-visible .sd-desk{filter:brightness(.92) saturate(1) contrast(1.05)}

.ring-cap{display:flex;flex-direction:column;gap:2px;color:#d8fbff}
.ring-cap small{font-size:17px;color:#ffd0ec;opacity:.9}

/* decor: neon sign halo */
.fx{position:absolute}
.fx-neon i{position:absolute;inset:-35% -12%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,60,120,.30),transparent 70%);mix-blend-mode:screen;animation:neon 6s infinite}

/* ---------- overlays ---------- */
.scan{position:fixed;inset:0;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px),radial-gradient(120% 100% at 50% 50%,transparent 62%,rgba(0,0,0,.42));
  animation:roll 9s linear infinite}

/* ---------- BBS panel ---------- */
.bbs,.ring{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,2,8,.62);backdrop-filter:blur(2px)}
.bbs[hidden],.ring[hidden]{display:none}
.crt{width:min(760px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:18px;border-radius:18px;background:linear-gradient(160deg,#2b2a33,#16151c);
  box-shadow:0 0 0 1px #3c3a48,0 30px 80px rgba(0,0,0,.6)}
.crt-screen{position:relative;padding:20px 26px 18px;border-radius:12px;background:radial-gradient(120% 100% at 50% 40%,#1d1000,#070300);color:var(--amber);
  font-size:clamp(19px,2.2vw,26px);line-height:1.2;text-shadow:0 0 6px rgba(255,178,56,.65);box-shadow:inset 0 0 40px rgba(255,140,0,.18)}
.crt-screen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.crt-screen p{margin:0}
.b-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--amber);color:#1a0d00;text-shadow:none;padding:0 8px}
.b-dim{margin-top:8px!important;opacity:.75}
.b-rule{height:0;margin:8px 0 4px!important;border-top:2px solid rgba(255,178,56,.55)}
.b-menu,.b-gb{list-style:none;margin:6px 0 10px;padding:0}
.b-opt{display:block;width:100%;text-align:left;color:var(--amber);text-decoration:none;padding:2px 8px;border-radius:2px;text-shadow:inherit}
.b-opt b{font-weight:400;color:#fff1cf}
.b-opt i{font-style:normal;opacity:.6;margin-left:.6em}
.b-opt:hover,.b-opt:focus-visible{background:var(--amber);color:#1a0d00;text-shadow:none;outline:none}
.b-opt:hover b,.b-opt:focus-visible b{color:#1a0d00}
.b-label{margin:6px 0!important}
.b-tag{display:inline-block;font-size:.72em;background:#3a2200;color:#ffd58a;padding:0 6px;border:1px dashed rgba(255,178,56,.6);text-shadow:none}
.b-gb li{padding:2px 8px}
.b-gb span{opacity:.6;margin-right:.5em}
.b-prompt .cur{animation:blink 1s steps(1) infinite}

/* webring popup */
.ring-box{width:min(420px,100%);padding:20px 24px;background:rgba(8,6,22,.95);border:1px solid rgba(65,230,255,.6);border-radius:6px;box-shadow:0 0 30px rgba(65,230,255,.25);text-align:center;font-size:22px}
.ring-box p{margin:8px 0}
.ring-h{font-family:var(--pix);font-size:14px;color:#d8fbff;text-shadow:0 0 6px var(--cyan)}
.ring-row{display:flex;justify-content:center;gap:18px}
.dead{opacity:.4;text-decoration:line-through}
.ring .b-tag{font-size:16px;color:#ffd58a}
.linkbtn{color:var(--green)}

/* ---------- ?hotspots=1 ---------- */
.debug .stage{cursor:crosshair}
.dbg-box{position:absolute;border:2px dashed #ff2;background:rgba(255,255,0,.08);color:#ff2;font:14px/1.1 var(--mono);padding:2px 4px;text-shadow:0 0 3px #000,0 0 3px #000;overflow:visible;white-space:nowrap}
.dbg-sub{border-color:#0ff;background:rgba(0,255,255,.05);color:#0ff}
.dbg-drag{border:2px solid #f0f;background:rgba(255,0,255,.12)}
.dbg-drag[hidden]{display:none}
.debug .hs .hs-label{opacity:1;transform:translateX(-50%)}
.debug .lab-left .hs-label,.debug .lab-right .hs-label{transform:none}
.dbg-panel{position:fixed;z-index:70;right:12px;top:100px;width:300px;padding:10px 12px;background:rgba(0,0,0,.85);border:1px solid #ff2;color:#ff2;font-size:18px}
.dbg-panel[hidden]{display:none}
.dbg-panel p{margin:2px 0}
.dbg-panel textarea{width:100%;font:16px var(--mono);background:#111;color:#fff;border:1px solid #555;resize:none}
.dbg-note{font-size:15px;opacity:.8}

/* ---------- animations ---------- */
@keyframes blink{50%{opacity:0}}
@keyframes pulse{50%{opacity:.35}}
@keyframes glow{50%{opacity:.7}}
@keyframes neon{0%,40%,44%,46%,100%{opacity:1}42%{opacity:.35}45%{opacity:.6}}
@keyframes roll{to{background-position:0 3px,0 0}}
@keyframes band{0%{opacity:0;transform:translateX(0)}20%{opacity:1;transform:translateX(-4%)}40%{opacity:.6;transform:translateX(6%)}60%{opacity:1;transform:translateX(-2%)}80%{opacity:.4}100%{opacity:0;transform:none}}
@keyframes track{to{top:110%}}
@keyframes jitter{0%{transform:translate(-50%,-50%)}25%{transform:translate(-52%,-50%) skewX(4deg)}50%{transform:translate(-48%,-49%)}75%{transform:translate(-51%,-50%) skewX(-3deg)}100%{transform:translate(-50%,-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes noise{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
@keyframes tune{0%{left:18%}40%{left:34%}55%{left:31%}100%{left:72%}}
@keyframes fly{to{transform:translate(calc(var(--x1) * 1cqw),calc(var(--y1) * 1cqh))}}
@keyframes streak{0%{opacity:0;transform:translate(calc(var(--x0) * 1cqw),calc(var(--y0) * 1cqh)) rotate(24deg) scaleX(.2)}15%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(calc(var(--x1) * 1cqw),calc(var(--y1) * 1cqh)) rotate(24deg) scaleX(1)}}
@keyframes bob{50%{transform:translateY(-14%)}}
@keyframes flame{50%{opacity:.4}}
@keyframes flare{0%{transform:scale(1);opacity:0}25%{opacity:1}100%{transform:scale(260);opacity:1}}

/* ---------- cabinet marquees (perspective-matched, see arena.config.js) ---------- */
.mq{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#120a22,#07040f);border:1px solid var(--mq);border-radius:2px;
  box-shadow:0 0 6px var(--mq),inset 0 0 6px rgba(0,0,0,.8);font-family:var(--mono);line-height:.9;color:#fff;
  text-shadow:0 0 2px #fff,0 0 5px var(--mq),0 0 10px var(--mq);letter-spacing:.04em;white-space:nowrap;overflow:hidden;animation:neon 8s infinite}
.mq:nth-child(2n){animation-delay:-3s}.mq:nth-child(3n){animation-delay:-5.5s}
.mq span{display:block}
.mq span+span{color:var(--mq);text-shadow:0 0 4px var(--mq)}

/* BBS: amber screen mapped onto the cabinet's own screen */
.amber-scr{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;border-radius:14%/18%;
  background:radial-gradient(120% 110% at 50% 45%,#3a2000 0%,#1a0c00 55%,#050200 100%);
  box-shadow:0 0 8px rgba(255,170,40,.6),0 0 22px rgba(255,140,0,.25),inset 0 0 10px 3px rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;animation:glow 3.4s ease-in-out infinite}
.amber-scr::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);pointer-events:none}
.amber-scr::after{content:"";position:absolute;inset:6% 10% 55% 8%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,210,.16),transparent);pointer-events:none}
.amber-txt{display:flex;flex-direction:column;gap:.12em;font-family:var(--mono);line-height:1;color:var(--amber);text-shadow:0 0 4px var(--amber);transform:scale(1.04,1.06)}
.amber-txt b{font-weight:400;animation:blink 1s steps(1) infinite}
.amber-scr.hot{box-shadow:0 0 14px rgba(255,170,40,.95),0 0 34px rgba(255,140,0,.45),inset 0 0 10px 3px rgba(0,0,0,.8)}

/* NYM ARENA gate on the back wall */
.gate{position:absolute;inset:0;border-radius:6px;overflow:hidden}
.gate-swirl{position:absolute;inset:-60%;background:conic-gradient(from 0deg,rgba(65,230,255,.0),rgba(65,230,255,.35),rgba(170,90,255,.45),rgba(255,79,216,.3),rgba(65,230,255,.0) 70%,rgba(65,230,255,.0));
  mix-blend-mode:screen;animation:spin 14s linear infinite;opacity:.55}
.gate-core{position:absolute;inset:0;background:radial-gradient(42% 60% at 50% 55%,rgba(220,250,255,.55),rgba(120,170,255,.25) 45%,transparent 75%);mix-blend-mode:screen;animation:glow 3.6s ease-in-out infinite}
.gate-frame{position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 2px rgba(65,230,255,.75),inset 0 0 24px rgba(65,230,255,.45),0 0 18px rgba(65,230,255,.4)}
.gate-txt{position:absolute;left:0;right:0;top:6%;text-align:center;font-family:var(--pix);font-size:clamp(7px,.75cqw,16px);letter-spacing:.2em;color:#e6fdff;text-shadow:0 0 6px var(--cyan),0 0 14px var(--cyan)}
.hs-portal:hover .gate-swirl,.hs-portal:focus-visible .gate-swirl{opacity:.95}
.hs-portal:hover .gate-frame,.hs-portal:focus-visible .gate-frame{box-shadow:inset 0 0 0 2px #bff7ff,inset 0 0 34px rgba(65,230,255,.7),0 0 30px rgba(65,230,255,.7)}

/* Channel 59: a CRT on a swing arm bolted to the pillar left of the gate, tilted slightly down */
.hs-tv .hs-glow,.hs-radio .hs-glow,.hs-sign .hs-glow,.hs-stampdesk .hs-glow{overflow:visible}
.tv-shadow{position:absolute;left:16%;top:16%;right:-14%;bottom:-16%;border-radius:14%;background:rgba(0,0,0,.6);filter:blur(5px)}
.tv-arm{position:absolute;left:78%;top:36%;width:62%;height:10%;border-radius:2px;
  background:linear-gradient(180deg,#b5bacb,#5a5e6e 55%,#22232b);box-shadow:0 3px 4px rgba(0,0,0,.65)}
.tv-plate{position:absolute;right:-6%;top:-170%;width:20%;height:440%;border-radius:2px;
  background:linear-gradient(90deg,#3a3d4a,#a5aabb 45%,#4a4d5c);box-shadow:2px 3px 4px rgba(0,0,0,.6)}
.tv-bolt{position:absolute;left:4%;top:-55%;width:12%;height:210%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#c9ced9,#3a3d4a 70%)}
.tv{position:absolute;inset:0;transform:perspective(160px) rotateX(-11deg);transform-origin:50% 30%;border-radius:12%/14%;background:linear-gradient(160deg,#3a3d4a,#17181f 70%);box-shadow:0 3px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18);padding:9% 26% 10% 8%}
.tv-scr{position:relative;display:block;width:100%;height:100%;border-radius:16%/20%;overflow:hidden;background:radial-gradient(120% 110% at 45% 40%,#4a5a8a,#141a33 70%,#05060c);box-shadow:inset 0 0 6px 2px rgba(0,0,0,.8),0 0 8px rgba(120,160,255,.45)}
.tv-noise{position:absolute;inset:-50%;background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 2px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);animation:noise .35s steps(3) infinite}
.tv-ch{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--pix);font-size:clamp(8px,1cqw,20px);color:#9effc0;text-shadow:0 0 6px var(--green)}
.tv-knobs{position:absolute;right:8%;top:22%;width:12%;height:56%;background:radial-gradient(circle at 50% 22%,#c9ced9 0 22%,transparent 24%),radial-gradient(circle at 50% 62%,#8b90a3 0 18%,transparent 20%),linear-gradient(#262833,#262833);border-radius:2px}
.hs-tv:hover .tv-scr,.hs-tv:focus-visible .tv-scr{box-shadow:inset 0 0 6px 2px rgba(0,0,0,.7),0 0 16px rgba(120,200,255,.8)}

/* Buckazoids Radio: sits on a small wall shelf on the pillar right of the gate */
.rd-wallshadow{position:absolute;left:-10%;right:-14%;top:112%;height:90%;background:radial-gradient(60% 55% at 50% 0,rgba(0,0,0,.6),transparent 75%);filter:blur(2px)}
.rd-contact{position:absolute;left:2%;right:2%;bottom:-7%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent)}
.rd-br{position:absolute;top:100%;width:14%;height:300%;background:linear-gradient(90deg,#4a4d5c,#a5aabb)}
.rd-br.l{left:12%;clip-path:polygon(0 0,100% 0,0 100%)}.rd-br.r{right:12%;clip-path:polygon(0 0,100% 0,100% 100%)}
.rd-shelf{position:absolute;left:-10%;right:-10%;top:100%;height:15%;background:linear-gradient(180deg,#d0d4e0,#7a7f90 35%,#2a2c36);box-shadow:0 3px 5px rgba(0,0,0,.6);border-radius:1px}
.rd{position:absolute;inset:0;border-radius:18%/30%;background:linear-gradient(170deg,#4a3a5a,#1d1626 75%);box-shadow:0 3px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.12)}
.rd-ant{position:absolute;right:14%;bottom:96%;width:3%;height:70%;background:linear-gradient(90deg,#666,#ddd,#666);transform:rotate(28deg);transform-origin:bottom}
.rd-grille{position:absolute;left:7%;top:16%;width:34%;height:64%;border-radius:20%;background:radial-gradient(circle,#0c0a10 38%,transparent 42%) 0 0/16% 22%,#2a2333}
.rd-dial{position:absolute;left:46%;top:16%;width:47%;height:38%;border-radius:12%/30%;overflow:hidden;
  background:repeating-linear-gradient(90deg,rgba(80,40,0,.6) 0 1px,transparent 1px 12%),linear-gradient(#ffcf6b,#ff9a2a);box-shadow:0 0 8px rgba(255,170,40,.8),inset 0 0 4px rgba(0,0,0,.4);animation:glow 3s ease-in-out infinite}
.rd-needle{position:absolute;top:0;bottom:0;left:30%;width:4%;background:#d0202a;box-shadow:0 0 3px #f33;animation:tune 9s ease-in-out infinite alternate}
.rd-knob{position:absolute;top:60%;width:12%;height:24%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#eee,#777 60%,#333)}
.rd-knob.k1{left:52%}.rd-knob.k2{left:76%}
.rd-name{position:absolute;left:0;right:0;bottom:-2%;text-align:center;font-family:var(--mono);font-size:clamp(6px,.5cqw,12px);color:#ffcf6b;letter-spacing:.08em;text-shadow:0 0 3px #f90;display:none}
.hs-radio:hover .rd-dial,.hs-radio:focus-visible .rd-dial{box-shadow:0 0 16px rgba(255,170,40,1),inset 0 0 4px rgba(0,0,0,.4)}

/* ---------- sky traffic ---------- */
.sk{position:absolute;left:0;top:0;will-change:transform;
  transform:translate(calc(var(--x0) * 1cqw),calc(var(--y0) * 1cqh));animation:fly var(--dur) linear forwards}
.ship{width:calc(var(--w) * var(--depth,1) * 1cqw);opacity:calc(.55 + var(--depth,1) * .4)}
.ship img{display:block;width:100%;height:auto;image-rendering:pixelated}
.ship.rtl img{transform:scaleX(-1)}
.ship.bob img{animation:bob 1.6s ease-in-out infinite}
.ship::after{content:"";position:absolute;left:-30%;top:30%;width:40%;height:40%;background:radial-gradient(closest-side,rgba(255,160,60,.75),transparent);animation:flame .18s steps(2) infinite}
.ship.rtl::after{left:auto;right:-30%}
.sk-saucer::after{display:none}
.comet,.shooter{width:calc(var(--w) * 1cqw);height:2px;transform-origin:100% 50%}
.comet{height:3px;background:linear-gradient(90deg,transparent,rgba(160,220,255,.35) 60%,#fff);border-radius:3px;box-shadow:0 0 6px rgba(160,220,255,.7);animation-name:streak;animation-timing-function:linear}
.shooter{background:linear-gradient(90deg,transparent,rgba(255,255,255,.9));animation-name:streak;animation-timing-function:ease-out}
.comet::after{content:"";position:absolute;right:-3px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 3px rgba(170,230,255,.9)}

/* ---------- first screen: closed doors ---------- */
.doors{display:none;z-index:3}
.intro-on .doors{display:block}
.wall{position:absolute;background:linear-gradient(90deg,#07050b,#120c16 70%,#2a1810 96%,#160d0a);transition:opacity 1.1s ease .25s}
.wall-r{background:linear-gradient(270deg,#07050b,#120c16 70%,#2a1810 96%,#160d0a)}
.leaves{position:absolute;perspective:1800px;perspective-origin:50% 45%}
.leaf{position:absolute;top:0;height:100%;width:50%;display:block;backface-visibility:hidden;
  transition:transform 1.5s cubic-bezier(.5,0,.2,1),filter 1.5s;box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.leaf-l{left:0;transform-origin:0 50%}
.leaf-r{right:0;transform-origin:100% 50%}
.opening .leaf-l{transform:rotateY(-108deg);filter:brightness(.55)}
.opening .leaf-r{transform:rotateY(108deg);filter:brightness(.55)}
.opening .wall{opacity:0}

/* ---------- intro overlay (VHS beat, then the prompt over the doors) ---------- */
.intro{position:fixed;inset:0;z-index:50;cursor:pointer;overflow:hidden}
.intro[hidden]{display:none}
.vhs{position:absolute;inset:0;background:#020309;color:#fff;transition:opacity .45s}
.vhs::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);pointer-events:none}
.vhs-done .vhs{opacity:0}
.vhs-osd{position:absolute;left:5vw;top:6vh;font-size:clamp(28px,3.4vw,52px);letter-spacing:3px;text-shadow:2px 0 rgba(255,0,80,.6),-2px 0 rgba(0,220,255,.6)}
.vhs-osd .sp{margin-left:1.2em;font-size:.6em;opacity:.8}
.vhs-tc{position:absolute;right:5vw;bottom:7vh;font-size:clamp(22px,2.4vw,36px);letter-spacing:2px;opacity:.85}
.glitch{position:absolute;inset:0;pointer-events:none}
.glitch i{position:absolute;left:-5%;right:-5%;height:7%;background:linear-gradient(90deg,rgba(255,0,90,0),rgba(255,0,90,.35),rgba(0,230,255,.35),rgba(255,255,255,.2),rgba(0,0,0,0));opacity:0;animation:band 1s steps(6) 1 forwards}
.glitch i:nth-child(1){top:18%;animation-delay:.1s}
.glitch i:nth-child(2){top:41%;height:3%;animation-delay:.25s}
.glitch i:nth-child(3){top:63%;height:10%;animation-delay:.05s}
.glitch i:nth-child(4){top:82%;height:4%;animation-delay:.4s}
.tracking{position:absolute;left:0;right:0;height:14%;top:-15%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.08) 40%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.06) 60%,transparent);animation:track 1.1s ease-in 1 forwards}
.intro-core{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:min(92vw,760px);text-align:center;padding:22px 18px 18px;
  background:rgba(2,6,4,.72);border:1px solid rgba(61,255,122,.35);border-radius:6px;box-shadow:0 0 40px rgba(0,0,0,.6),0 0 24px rgba(61,255,122,.12);
  opacity:0;transition:opacity .4s}
.vhs-done .intro-core{opacity:1}
.intro-prompt{margin:0;min-height:1.05em;font-size:clamp(40px,6.4vw,88px);line-height:1;color:var(--green);text-shadow:0 0 10px rgba(61,255,122,.75),0 0 28px rgba(61,255,122,.35);letter-spacing:2px}
.intro-prompt .cur{animation:blink 1s steps(1) infinite;opacity:0}
.intro.typing .intro-prompt .cur{opacity:1}
.intro-tag,.intro-hint{opacity:0;transition:opacity .5s}
.intro-tag{margin:16px 0 0;font-size:clamp(20px,2vw,28px);color:#d9f7e3}
.intro-hint{margin:10px 0 0;font-size:clamp(17px,1.5vw,22px);color:rgba(255,255,255,.62);letter-spacing:2px}
.intro.ready .intro-tag,.intro.ready .intro-hint{opacity:1}
.intro.ready .intro-hint{animation:pulse 1.6s ease-in-out infinite .5s}
.intro.leaving .intro-core{opacity:0;transition:opacity .3s}
.intro.leaving{pointer-events:none}
.intro-on .hud-top,.intro-on .hud-right,.intro-on .dock,.intro-on .pan-hint{visibility:hidden}
.intro-on .viewport{overflow:hidden}

/* ---------- gate cut scene ---------- */
.viewport{transition:transform 1.45s cubic-bezier(.6,0,.9,.4),filter 1.45s}
.warping .viewport{transform:scale(4.2);filter:brightness(1.6) saturate(1.3)}
.warping .hud-top,.warping .hud-right,.warping .dock,.warping .radio{opacity:0;transition:opacity .3s}

/* NYM ARENA gate cut scene: ~3.8 s, click or Esc skips */
.nymcut{position:fixed;inset:0;z-index:58;display:none;opacity:0;overflow:hidden;background:#03020a;cursor:pointer;font-family:var(--mono)}
.nymcut[hidden]{display:none!important}
.nymcut.nc-on,.nymcut.nc-quiet{display:block}
.nc-on{animation:ncIn .4s ease-out .15s forwards}
.nc-space{position:absolute;inset:0;background:
  radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 27% 8%,#cfe,transparent),radial-gradient(1.5px 1.5px at 44% 22%,#fff,transparent),
  radial-gradient(1px 1px at 63% 12%,#fff,transparent),radial-gradient(1px 1px at 78% 26%,#dff,transparent),radial-gradient(1.5px 1.5px at 90% 9%,#fff,transparent),
  radial-gradient(1px 1px at 8% 34%,#fff,transparent),radial-gradient(1px 1px at 55% 31%,#fff,transparent),
  radial-gradient(80% 60% at 50% 40%,#1c1240,#0a0620 55%,#03020a)}
.nc-hall{position:absolute;left:0;right:0;top:20%;height:46%;background:linear-gradient(180deg,transparent,rgba(30,24,52,.85) 30%,rgba(18,14,32,.95));
  -webkit-mask-image:linear-gradient(90deg,#000 0 18%,transparent 30% 70%,#000 82%);mask-image:linear-gradient(90deg,#000 0 18%,transparent 30% 70%,#000 82%)}
.nc-gate{position:absolute;left:50%;top:42%;width:min(64vw,880px);aspect-ratio:2.1/1;border-radius:8px;overflow:hidden;
  transform:translate(-50%,-50%) scale(.9);filter:brightness(.45) saturate(.6);background:#0b1030;animation:ncGate 1.1s ease-out .3s forwards}
.nc-gate-txt{position:absolute;left:0;right:0;top:7%;text-align:center;font-family:var(--pix);font-size:clamp(9px,1.4vw,20px);letter-spacing:.25em;color:#e6fdff;text-shadow:0 0 6px var(--cyan),0 0 16px var(--cyan)}
.nc-floor{position:absolute;left:0;right:0;bottom:0;height:42%;
  background:radial-gradient(40% 30% at 50% 0,rgba(110,200,255,.45),transparent 75%),linear-gradient(180deg,#2a2148,#120d22 55%,#08060f)}
.nc-floor::before{content:"";position:absolute;left:-50%;right:-50%;top:0;height:200%;transform-origin:50% 0;transform:perspective(300px) rotateX(62deg);
  background:repeating-linear-gradient(90deg,rgba(65,230,255,.22) 0 1px,transparent 1px 80px),repeating-linear-gradient(0deg,rgba(65,230,255,.18) 0 1px,transparent 1px 80px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);mask-image:linear-gradient(180deg,#000,transparent 60%)}
.nc-floor::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(65,230,255,.7),transparent)}
.nc-sis{position:absolute;left:50%;top:44%;height:min(48vh,430px);width:auto;opacity:0;filter:drop-shadow(0 10px 12px rgba(0,0,0,.65));
  transform:translate(calc(-50% + var(--sx) * 1vw),calc(-50% + 27vh)) scale(1.05)}
.nc-sis.s1{--sx:30}.nc-sis.s2{--sx:42}.nc-sis.s3{--sx:20}
.nc-on .nc-sis.s1{animation:ncRun 1s cubic-bezier(.35,0,.75,.6) .95s forwards}
.nc-on .nc-sis.s2{animation:ncRun 1s cubic-bezier(.35,0,.75,.6) 1.3s forwards}
.nc-on .nc-sis.s3{animation:ncRun 1s cubic-bezier(.35,0,.75,.6) 1.65s forwards}
.nc-guide{position:absolute;left:3vw;bottom:0;height:min(44vh,380px);aspect-ratio:.85;transform:translateX(-130%);animation:ncSlide .45s ease-out .35s forwards}
.nc-cz{position:absolute;left:16%;bottom:12%;height:96%;width:auto;transform:scaleX(-1);filter:drop-shadow(0 0 14px rgba(61,255,122,.22)) drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.nc-console{position:absolute;left:-4%;right:-14%;bottom:0;height:34%;border-radius:8px 8px 0 0;border-top:2px solid #a5aabb;
  background:linear-gradient(180deg,#3a3d4a,#17181f 40%,#0a0a10);box-shadow:0 -6px 24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.nc-console i{position:absolute;top:22%;width:6%;aspect-ratio:1;border-radius:50%;background:#3dff7a;box-shadow:0 0 8px #3dff7a}
.nc-console i:nth-child(1){left:10%}.nc-console i:nth-child(2){left:20%;background:#ffb238;box-shadow:0 0 8px #ffb238}.nc-console i:nth-child(3){left:30%;background:#ff4fd8;box-shadow:0 0 8px #ff4fd8}.nc-console i:nth-child(4){left:40%}
.nc-console b{position:absolute;left:56%;right:10%;top:16%;height:40%;border-radius:3px;background:repeating-linear-gradient(0deg,rgba(61,255,122,.25) 0 2px,transparent 2px 4px),#03140a;box-shadow:0 0 10px rgba(61,255,122,.4)}
.nc-say{position:absolute;left:calc(3vw + min(37vh,320px));bottom:min(26vh,230px);max-width:min(52vw,520px);margin:0;padding:8px 14px;
  font-size:clamp(18px,2.1vw,30px);line-height:1.1;color:var(--green);text-shadow:0 0 8px rgba(61,255,122,.6);
  background:rgba(2,10,4,.88);border:1px solid rgba(61,255,122,.55);border-radius:4px;opacity:0;animation:ncFade .2s linear .6s forwards}
.nc-say b{font-weight:400;animation:blink 1s steps(1) infinite}
.nc-flash{position:absolute;left:50%;top:42%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff,#dff 25%,rgba(65,230,255,.7) 48%,rgba(170,90,255,.35) 66%,transparent 72%);animation:ncFlash .5s ease-in 2.55s forwards}
.nc-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#020309;opacity:0;animation:ncFade .2s linear 3.02s forwards}
.nc-title::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px);pointer-events:none}
.nc-osd{position:absolute;left:5vw;top:6vh;margin:0;font-size:clamp(24px,3vw,44px);letter-spacing:3px;color:#fff;text-shadow:2px 0 rgba(255,0,80,.6),-2px 0 rgba(0,220,255,.6)}
.nc-t{margin:0;font-family:var(--pix);font-size:clamp(26px,6vw,84px);letter-spacing:.12em;color:#e6fdff;text-shadow:0 0 10px var(--cyan),0 0 30px var(--cyan),3px 0 rgba(255,0,80,.45),-3px 0 rgba(0,220,255,.45)}
.nc-sub{margin:16px 0 0;font-size:clamp(20px,2.4vw,32px);color:var(--green);text-shadow:0 0 8px rgba(61,255,122,.6)}
.nc-sub b{font-weight:400;animation:blink .6s steps(1) infinite}
.nc-on .nc-title .glitch i:nth-child(1){animation-delay:3.1s}.nc-on .nc-title .glitch i:nth-child(2){animation-delay:3.25s}
.nc-on .nc-title .glitch i:nth-child(3){animation-delay:3.05s}.nc-on .nc-title .glitch i:nth-child(4){animation-delay:3.35s}
.nc-skip{position:absolute;right:18px;bottom:14px;margin:0;font-size:18px;color:rgba(255,255,255,.55);z-index:2}
@keyframes ncIn{to{opacity:1}}
@keyframes ncFade{to{opacity:1}}
@keyframes ncGate{55%{filter:brightness(1.7) saturate(1.4)}100%{transform:translate(-50%,-50%) scale(1);filter:brightness(1.25) saturate(1.25)}}
@keyframes ncSlide{to{transform:none}}
@keyframes ncFlash{0%{opacity:0;transform:scale(1)}30%{opacity:1}100%{opacity:1;transform:scale(240)}}
@keyframes ncRun{
  0%{opacity:0;transform:translate(calc(-50% + var(--sx) * 1vw),calc(-50% + 27vh)) scale(1.05) rotate(0)}
  12%{opacity:1}
  25%{transform:translate(calc(-50% + var(--sx) * .72vw),calc(-50% + 18vh)) scale(.82) rotate(-4deg)}
  50%{transform:translate(calc(-50% + var(--sx) * .42vw),calc(-50% + 13vh)) scale(.56) rotate(3deg)}
  75%{opacity:1;transform:translate(calc(-50% + var(--sx) * .16vw),calc(-50% + 4vh)) scale(.3) rotate(-2deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.08) rotate(0)}}
@media (max-width:640px){
  .nc-gate{width:78vw}
  .nc-guide{height:min(30vh,260px);left:2vw}
  .nc-say{left:4vw;right:4vw;bottom:calc(min(30vh,260px) + 10px);max-width:none;font-size:20px}
  .nc-sis{height:min(32vh,290px)}
  .nc-sis.s1{--sx:22}.nc-sis.s2{--sx:34}.nc-sis.s3{--sx:12}
}

/* ---------- Buckazoids Radio bar (stand-in) ---------- */
.radio{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:8px 14px;
  background:linear-gradient(180deg,#17121f,#0a0710);border-top:2px solid #ffb238;box-shadow:0 -6px 24px rgba(0,0,0,.6),0 -1px 12px rgba(255,178,56,.25);font-family:var(--mono);color:#ffe2a8}
.radio[hidden]{display:none}
.r-logo{display:flex;align-items:center;gap:8px;flex:none}
.r-coin{width:30px;height:30px;border-radius:50%;display:block;object-fit:cover;box-shadow:0 0 8px rgba(255,170,40,.6)}
.r-name{font-family:var(--pix);font-size:12px;color:#ffcf6b;text-shadow:0 0 6px rgba(255,170,40,.7);line-height:1.2}
.r-name small{display:block;font-size:8px;color:#ff9a2a;letter-spacing:3px}
.r-ctl{display:flex;gap:6px;flex:none}
.r-btn{width:34px;height:30px;border:1px solid rgba(255,178,56,.5);border-radius:3px;background:#1f1828;color:#ffcf6b;font-size:16px;line-height:1}
.r-btn:hover{background:#2c2238}
.r-play{width:40px;color:#3dff7a;border-color:rgba(61,255,122,.6)}
.r-display{flex:1;min-width:0;background:#05080a;border:1px solid #2a3a2a;border-radius:3px;padding:2px 10px}
.r-display p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-station{font-size:22px;color:#3dff7a;text-shadow:0 0 6px rgba(61,255,122,.6)}
.r-status{font-size:15px;color:#ffcf6b;opacity:.85}
.r-meter{display:flex;align-items:flex-end;gap:2px;height:28px;flex:none}
.r-meter i{display:block;width:4px;height:12%;background:#3dff7a;opacity:.35}
.r-meter i:nth-child(n+7){background:#ffb238}.r-meter i:nth-child(n+9){background:#ff4f4f}
.r-vol input{width:90px;accent-color:#ffb238}
.r-menu-wrap{position:relative;flex:none}
.r-list{position:absolute;right:0;bottom:calc(100% + 10px);width:290px;padding:10px 12px;background:#120d19;border:1px solid #ffb238;border-radius:4px;box-shadow:0 0 20px rgba(0,0,0,.7)}
.r-list[hidden]{display:none}
.r-list p{margin:4px 0}.r-list ul{list-style:none;margin:4px 0;padding:0}
.r-list-h{font-family:var(--pix);font-size:10px;color:#ffcf6b}
.r-st{display:block;width:100%;text-align:left;padding:2px 6px;font-size:18px;color:#ffe2a8}
.r-st.on,.r-st:hover{background:#ffb238;color:#1a0d00}
.r-list a{color:var(--cyan);font-size:18px}
.r-close{flex:none}
.radio-on .dock{bottom:calc(var(--radio-h,62px) + 10px)}
.radio-on .pan-hint{display:none}

@media (max-width:760px){
  .radio{flex-wrap:wrap;gap:6px 10px;padding:6px 10px}
  .r-name,.r-meter,.r-vol{display:none}
  .r-display{order:5;flex-basis:100%}
  .r-ctl{flex:1}
  .r-station{font-size:19px}.r-display .r-status{font-size:13px;white-space:normal}
  .r-list{width:min(290px,calc(100vw - 20px))}
}
/* ---------- reduced motion: no intro, no stars, no flicker, no scanlines ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .stars,.scan,.osd,.sky,.vhs{display:none}
  .viewport{transform:none!important;filter:none!important}
  .nb-list{transform:none!important;opacity:1!important}
  /* gate: no cut scene, just a quick fade to the title card */
  #nymcut.nc-quiet{opacity:0}
  #nymcut.nc-quiet.nc-fade{opacity:1;transition:opacity .25s linear!important}
  #nymcut.nc-quiet>*:not(.nc-title){display:none}
  #nymcut.nc-quiet .nc-title{opacity:1}
  #nymcut.nc-quiet .glitch{display:none}
}