:root{
  --bg:#02030a;
  --ink:#0bd3ff;
  --hot:#ff2d6f;
  --gold:#ffd166;
  --green:#39ffb8;
  --white:#eaffff;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html,body{
  width:100%;height:100%;
  background:var(--bg);
  color:var(--white);
  overflow:hidden;
  font-family:'Rajdhani',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#stage-mount{
  position:fixed;inset:0;z-index:0;
}
#stage-mount canvas{display:block;width:100%!important;height:100%!important;}

.hud{
  position:fixed;inset:0;z-index:2;
  pointer-events:none;
  user-select:none;-webkit-user-select:none;
}

.brand{
  position:absolute;top:max(22px,3.2vw);left:max(22px,3.4vw);
  display:flex;flex-direction:column;gap:.5em;
}
.brand-mark{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(15px,1.7vw,22px);letter-spacing:.22em;
  color:var(--white);
  text-shadow:0 0 8px rgba(11,211,255,.55),0 0 22px rgba(11,211,255,.25);
}
.brand-dot{color:var(--ink);padding:0 .15em;}
.brand-pill{
  align-self:flex-start;
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:clamp(8px,.8vw,11px);letter-spacing:.34em;
  color:var(--hot);
  border:1px solid rgba(255,45,111,.55);
  padding:.28em .7em;border-radius:2px;
  background:rgba(255,45,111,.06);
  text-shadow:0 0 8px rgba(255,45,111,.6);
  animation:pulsePill 2.4s ease-in-out infinite;
}
@keyframes pulsePill{
  0%,100%{opacity:.65;box-shadow:0 0 0 rgba(255,45,111,0);}
  50%{opacity:1;box-shadow:0 0 16px rgba(255,45,111,.4);}
}

.tagline{
  position:absolute;left:max(22px,3.4vw);bottom:max(22px,3.4vw);
  font-family:'Rajdhani',sans-serif;font-weight:500;
  font-size:clamp(11px,1.15vw,15px);line-height:1.5;
  color:rgba(234,255,255,.62);
  text-shadow:0 0 10px rgba(2,3,10,.9);
  max-width:30ch;
}
.tagline strong{font-weight:700;color:var(--ink);letter-spacing:.12em;text-shadow:0 0 10px rgba(11,211,255,.5);}

.telemetry{
  position:absolute;left:50%;bottom:max(18px,2.6vw);transform:translateX(-50%);
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:clamp(10px,1.05vw,14px);letter-spacing:.22em;
  color:rgba(57,255,184,.85);
  text-shadow:0 0 8px rgba(57,255,184,.5);
  white-space:nowrap;
  text-align:center;
  transition:color .4s,text-shadow .4s;
}
.telemetry.warn{color:rgba(255,209,102,.9);text-shadow:0 0 10px rgba(255,209,102,.6);}
.telemetry.crit{color:rgba(255,45,111,.95);text-shadow:0 0 12px rgba(255,45,111,.7);}

.reveal-list{
  position:absolute;
  right:max(18px,2.4vw);
  top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.35em;
  align-items:flex-end;
  pointer-events:none;
  z-index:2;
  max-height:80vh;overflow:hidden;
}
.reveal-list .rl-item{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:clamp(10px,1.1vw,15px);
  letter-spacing:.14em;
  color:rgba(234,255,255,.85);
  text-shadow:0 0 8px rgba(11,211,255,.4);
  white-space:nowrap;
  padding:.2em .7em;
  border:1px solid rgba(11,211,255,.2);
  border-radius:2px;
  background:rgba(2,3,10,.45);
  animation:rlSlideIn .5s cubic-bezier(.16,1,.3,1) both;
}
.reveal-list .rl-item.fresh{
  color:rgba(255,209,102,1);
  border-color:rgba(255,209,102,.5);
  text-shadow:0 0 12px rgba(255,209,102,.6);
  box-shadow:0 0 16px rgba(255,209,102,.15);
}
@keyframes rlSlideIn{
  from{opacity:0;transform:translateX(40px);}
  to{opacity:1;transform:translateX(0);}
}

.corners{position:absolute;inset:max(14px,2vw);pointer-events:none;}
.corners .c{position:absolute;width:26px;height:26px;border:1.5px solid rgba(11,211,255,.4);}
.corners .tl{top:0;left:0;border-right:0;border-bottom:0;}
.corners .tr{top:0;right:0;border-left:0;border-bottom:0;}
.corners .bl{bottom:0;left:0;border-right:0;border-top:0;}
.corners .br{bottom:0;right:0;border-left:0;border-top:0;}

.sound-toggle{
  position:fixed;z-index:3;right:max(18px,2.4vw);bottom:max(18px,2.4vw);
  width:42px;height:42px;border-radius:50%;
  background:rgba(2,3,10,.55);
  border:1px solid rgba(11,211,255,.35);
  color:rgba(11,211,255,.85);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .2s,box-shadow .2s,color .2s,border-color .2s;
}
.sound-toggle:hover{transform:translateY(-2px);color:var(--white);border-color:var(--ink);box-shadow:0 0 18px rgba(11,211,255,.45);}
.sound-toggle .ico-on{display:none;}
.sound-toggle.on .ico-off{display:none;}
.sound-toggle.on .ico-on{display:block;}

.scanlines{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.18) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode:multiply;opacity:.5;
}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.55) 100%);
}
.crt-flicker{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:rgba(11,211,255,.012);
  animation:flick 6s steps(60) infinite;
}
@keyframes flick{0%,100%{opacity:.4;}50%{opacity:.8;}}

@media(max-width:560px){
  .tagline{font-size:11px;}
  .telemetry{font-size:10px;letter-spacing:.16em;}
  .corners{inset:10px;}
}