/* ============================================================
   FUCK YOUR SENSITIVITY — design system
   ============================================================ */

:root{
  --bg:        #05040a;
  --bg-2:      #0b0716;
  --ink:       #f2f0ff;
  --ink-dim:   #9a93bd;
  --acid:      #c8ff00;
  --magenta:   #ff2bd1;
  --cyan:      #00e5ff;
  --orange:    #ff6a00;
  --violet:    #8b5cf6;
  --lime:      #00ffa3;

  --accent:    var(--acid);
  --accent-2:  var(--magenta);

  --rail-w:    252px;
  --rail-r:    290px;
  --top-h:     62px;
  --music-h:   74px;

  --font-display: 'Anton', 'Arial Black', 'Haettenschweiler', sans-serif;
  --font-tech:    'Chakra Petch', 'Segoe UI', sans-serif;
  --font-pixel:   'Silkscreen', 'Courier New', monospace;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-snap: cubic-bezier(.34,1.56,.64,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-tech);
  overflow-x:hidden;
  min-height:100vh;
  cursor:none;
}
body.no-custom-cursor{ cursor:auto; }

::selection{ background:var(--magenta); color:#07010c; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#0a0714; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--acid),var(--magenta)); border-radius:0; }

img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

/* ============================================================
   CANVAS LAYERS
   ============================================================ */
#bg-canvas,#game-canvas,#fx-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none;
}
#bg-canvas{ z-index:0; background:
  radial-gradient(1200px 700px at 18% 12%, rgba(139,92,246,.22), transparent 62%),
  radial-gradient(900px 600px at 84% 78%, rgba(255,43,209,.14), transparent 60%),
  radial-gradient(700px 500px at 60% 20%, rgba(0,229,255,.10), transparent 65%),
  var(--bg);
}
#game-canvas{ z-index:5; }
#fx-canvas{ z-index:25; }

#grain,#scanlines,#vignette{ position:fixed; inset:0; pointer-events:none; z-index:28; }
#grain{
  opacity:calc(.05 + var(--chaos,.5) * .24); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation:grainShift .6s steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 33%{transform:translate(-6px,4px)} 66%{transform:translate(5px,-5px)} 100%{transform:translate(0,0)}
}
#scanlines{
  opacity:calc(.10 + var(--chaos,.5) * .34);
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
#vignette{
  background:radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.85) 100%);
}
#flash{
  position:fixed; inset:0; z-index:29; pointer-events:none;
  background:#fff; opacity:0; mix-blend-mode:screen;
}
#flash.go{ animation:flashOut .34s ease-out; }
@keyframes flashOut{ 0%{opacity:.55} 100%{opacity:0} }

/* ============================================================
   CURSOR
   ============================================================ */
#reticle{
  position:fixed; left:0; top:0; width:56px; height:56px; z-index:70;
  pointer-events:none; will-change:transform;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  transition:opacity .25s;
}
#reticle svg{ width:100%; height:100%; overflow:visible; }
#reticle circle,#reticle path{ fill:none; stroke:var(--accent); stroke-width:2; }
#reticle .ret-ring{ stroke-dasharray:10 7; animation:spin 6s linear infinite; transform-origin:50% 50%; opacity:.85; }
#reticle .ret-dot{ fill:var(--accent); stroke:none; }
#reticle .ret-tick{ opacity:.9; }
#reticle .ret-brk{ opacity:.55; }
#reticle .ret-brk,#reticle .ret-tick{ animation:retPulse 1.6s var(--ease-in-out) infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes retPulse{ 0%,100%{opacity:.5} 50%{opacity:1} }

#cursor-dot{
  position:fixed; left:0; top:0; width:8px; height:8px; z-index:71;
  border-radius:50%; background:var(--accent-2);
  pointer-events:none; transform:translate(-50%,-50%);
  box-shadow:0 0 14px var(--accent-2), 0 0 40px var(--accent-2);
  transition:width .18s var(--ease-snap),height .18s var(--ease-snap),background .2s;
}
body.cursor-hot #cursor-dot{ width:20px; height:20px; background:var(--acid); }
body.cursor-hot #reticle .ret-ring{ stroke:var(--acid); }
body.cursor-hot #reticle .ret-dot{ fill:var(--acid); }

body.mode-game #reticle{ width:58px; height:58px; }
body.mode-game #reticle .ret-ring{ stroke:var(--lime); animation:spin 2.4s linear infinite; }
body.mode-game #reticle .ret-dot{ fill:var(--lime); }
body.mode-game #cursor-dot{ background:var(--lime); }

/* ============================================================
   TOP BAR
   ============================================================ */
#topbar{
  position:fixed; top:0; left:0; right:0; height:var(--top-h); z-index:35;
  display:flex; align-items:center; gap:18px; padding:0 18px;
  background:linear-gradient(180deg, rgba(5,4,10,.94), rgba(5,4,10,.55) 70%, transparent);
  backdrop-filter:blur(10px) saturate(1.3);
  border-bottom:1px solid rgba(200,255,0,.18);
}
#topbar::after{
  content:''; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--acid),var(--magenta),transparent);
  background-size:200% 100%; animation:sweep 7s linear infinite;
}
@keyframes sweep{ 0%{background-position:0% 0} 100%{background-position:200% 0} }

.logo{ display:flex; flex-direction:column; line-height:1; flex:0 0 auto; }
.logo-mark{
  font-family:var(--font-display); font-size:27px; letter-spacing:.02em;
  color:var(--acid); text-shadow:0 0 22px rgba(200,255,0,.6);
  position:relative;
}
.logo-sub{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.24em; color:var(--ink-dim); margin-top:3px; }

#nav{ display:flex; gap:4px; margin-left:auto; }
#nav a{
  font-family:var(--font-pixel); font-size:10px; letter-spacing:.1em;
  padding:9px 11px; color:var(--ink-dim); position:relative; overflow:hidden;
  transition:color .25s;
}
#nav a i{ font-style:normal; color:var(--accent); margin-right:6px; opacity:.8; }
#nav a::before{
  content:''; position:absolute; inset:0; background:var(--accent);
  transform:translateY(101%); transition:transform .38s var(--ease-out); z-index:-1;
}
#nav a:hover{ color:#0a0610; }
#nav a:hover::before{ transform:translateY(0); }
#nav a:hover i{ color:#0a0610; }

.topbar-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
#nav + .topbar-actions{ margin-left:14px; }

.icon-btn{
  width:36px; height:36px; background:rgba(255,255,255,.04);
  border:1px solid rgba(200,255,0,.3); color:var(--acid);
  font-family:var(--font-pixel); font-size:11px; cursor:none;
  transition:.25s var(--ease-out);
}
.icon-btn:hover{ background:var(--acid); color:#07040c; box-shadow:0 0 26px rgba(200,255,0,.55); }
.icon-btn.muted{ color:#ff3b6b; border-color:rgba(255,59,107,.45); }

.mode-btn{
  display:flex; align-items:center; gap:10px; padding:0 18px; height:38px;
  background:linear-gradient(90deg,var(--acid),var(--lime));
  color:#07040c; border:0; cursor:none; position:relative; overflow:hidden;
  font-family:var(--font-pixel); font-size:10px; letter-spacing:.1em;
  box-shadow:0 0 0 rgba(200,255,0,0);
  transition:box-shadow .3s, transform .3s var(--ease-snap);
}
.mode-btn:hover{ box-shadow:0 0 34px rgba(200,255,0,.65); transform:translateY(-2px); }
.mode-btn-glyph{ font-size:9px; }

/* ============================================================
   RAILS
   ============================================================ */
#rail-left,#rail-right{
  position:fixed; top:var(--top-h); bottom:var(--music-h); z-index:30;
  display:flex; flex-direction:column; gap:12px;
  padding:14px 12px;
  overflow:hidden auto;
  scrollbar-width:thin;
}
#rail-left{ left:0; width:var(--rail-w); }
#rail-right{ right:0; width:var(--rail-r); }

#rail-left::before,#rail-right::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,5,18,.92), rgba(8,5,18,.6) 50%, rgba(8,5,18,.92));
  backdrop-filter:blur(14px) saturate(1.4);
  border-inline:1px solid rgba(200,255,0,.14);
}
#rail-left::before{ border-right-color:rgba(200,255,0,.22); }
#rail-right::before{ border-left-color:rgba(255,43,209,.25); }

/* --- left rail : brand --- */
.rail-brand{ display:flex; flex-direction:column; gap:16px; }
.vtext{
  font-family:var(--font-display); font-size:23px; line-height:.95;
  writing-mode:vertical-rl; transform:rotate(180deg);
  color:transparent; -webkit-text-stroke:1.4px var(--acid);
  letter-spacing:.06em; opacity:.85;
  text-shadow:0 0 24px rgba(200,255,0,.35);
}
.vtext-2{ -webkit-text-stroke-color:var(--magenta); text-shadow:0 0 24px rgba(255,43,209,.4); }
.rail-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.badge{
  font-family:var(--font-pixel); font-size:8px; letter-spacing:.08em;
  padding:5px 7px; border:1px solid var(--acid); color:var(--acid);
  background:rgba(200,255,0,.07);
}
.badge-alt{ border-color:var(--magenta); color:var(--magenta); background:rgba(255,43,209,.07); }

/* --- left rail : HUD --- */
.hud{ display:none; flex-direction:column; gap:12px; }
body.mode-game .hud{ display:flex; }
body.mode-game .rail-brand{ display:none; }

.hud-block{ background:rgba(255,255,255,.028); border:1px solid rgba(200,255,0,.16); padding:9px 10px; }
.hud-label{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.18em; color:var(--ink-dim); }
.hud-label.sm{ font-size:7px; margin-top:6px; }
.hud-score{
  font-family:var(--font-display); font-size:38px; line-height:1; color:var(--acid);
  text-shadow:0 0 26px rgba(200,255,0,.55); font-variant-numeric:tabular-nums;
}
.hud-best{ font-family:var(--font-pixel); font-size:8px; color:var(--ink-dim); margin-top:4px; }
.hud-best span{ color:var(--magenta); }
.hud-zone-name{
  font-family:var(--font-pixel); font-size:13px; color:var(--cyan); margin-top:4px;
  text-shadow:0 0 18px rgba(0,229,255,.5); line-height:1.3;
}
.hud-wave{ font-family:var(--font-pixel); font-size:9px; color:var(--ink-dim); margin-top:5px; }
.hud-wave span{ color:var(--ink); }

.lives{ display:flex; gap:4px; margin-top:6px; min-height:14px; }
.lives i{
  width:15px; height:14px; display:block;
  background:var(--cyan); clip-path:polygon(50% 0,100% 100%,50% 76%,0 100%);
  filter:drop-shadow(0 0 6px rgba(0,229,255,.8));
  animation:lifeIn .35s var(--ease-snap);
}
.lives i.dead{ background:#3a3550; filter:none; opacity:.5; }
@keyframes lifeIn{ from{transform:scale(0) rotate(-40deg); opacity:0} to{transform:scale(1) rotate(0); opacity:1} }

.shield-bar{ height:7px; background:rgba(255,255,255,.07); margin-top:9px; overflow:hidden; }
.shield-bar i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  box-shadow:0 0 14px rgba(0,229,255,.7); transition:width .2s linear;
}
.wpn{ font-family:var(--font-pixel); font-size:11px; color:var(--lime); margin-top:5px; text-shadow:0 0 14px rgba(0,255,163,.5); }
.wpn b{ color:#fff; }
.pips{ display:flex; gap:3px; margin-top:6px; }
.pips i{ width:14px; height:6px; background:rgba(255,255,255,.1); }
.pips i.on{ background:var(--lime); box-shadow:0 0 10px rgba(0,255,163,.8); }

.combo-wrap{ height:7px; background:rgba(255,255,255,.07); margin-top:6px; overflow:hidden; }
.combo-wrap i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--orange),var(--magenta)); box-shadow:0 0 12px rgba(255,43,209,.7); }

.boss-bar{ border:1px solid rgba(255,59,107,.5); padding:8px; background:rgba(255,59,107,.07); }
.boss-name{ font-family:var(--font-pixel); font-size:10px; color:#ff6b8f; letter-spacing:.1em; }
.boss-track{ height:9px; background:rgba(0,0,0,.5); margin-top:6px; overflow:hidden; }
.boss-track i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,#ff2b6b,var(--orange)); box-shadow:0 0 16px rgba(255,43,107,.8); transition:width .15s linear; }

.hud-keys{ display:flex; flex-direction:column; gap:3px; font-family:var(--font-pixel); font-size:8px; color:var(--ink-dim); }
.hud-keys b{ color:var(--accent); display:inline-block; width:44px; }

/* --- right rail : board --- */
.board{
  position:relative;
  background:linear-gradient(160deg, rgba(20,6,30,.95), rgba(6,4,14,.95));
  border:1px solid rgba(255,43,209,.35);
  box-shadow:0 0 40px rgba(255,43,209,.14), inset 0 0 40px rgba(255,43,209,.05);
  padding:12px 11px 10px;
}
.board::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px);
}
.board-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.board-title{
  font-family:var(--font-display); font-size:19px; letter-spacing:.03em;
  color:#fff; text-shadow:0 0 16px var(--magenta);
}
.board-glow{
  width:9px; height:9px; border-radius:50%; background:var(--magenta);
  box-shadow:0 0 16px var(--magenta); animation:blink 1.1s steps(2) infinite;
}
@keyframes blink{ 50%{opacity:.15} }
.board-sub{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.11em; color:var(--ink-dim); margin-bottom:9px; }

.score-list{ list-style:none; margin:0; padding:0; counter-reset:rank; }
.score-list li{
  display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:7px;
  padding:5px 4px; font-family:var(--font-pixel); font-size:10px;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .2s, transform .2s;
  animation:slideIn .4s var(--ease-out) backwards;
}
.score-list li:hover{ background:rgba(255,43,209,.12); transform:translateX(3px); }
.score-list li .rk{ color:var(--ink-dim); font-size:9px; }
.score-list li .nm{ color:var(--ink); letter-spacing:.08em; overflow:hidden; text-overflow:ellipsis; }
.score-list li .sc{ color:var(--lime); font-variant-numeric:tabular-nums; }
.score-list li.top1 .nm{ color:var(--acid); text-shadow:0 0 14px rgba(200,255,0,.7); }
.score-list li.top1 .sc{ color:var(--acid); }
.score-list li.top2 .nm,.score-list li.top2 .sc{ color:var(--cyan); }
.score-list li.top3 .nm,.score-list li.top3 .sc{ color:var(--orange); }
.score-list li.me{ background:rgba(200,255,0,.1); box-shadow:inset 0 0 0 1px rgba(200,255,0,.35); }
.score-list .empty{ grid-column:1 / -1; color:var(--ink-dim); font-size:9px; padding:10px 4px; display:block; line-height:1.7; }
.score-list .e-short{ display:none; }
.score-list li .zone-tag{ display:block; font-size:7px; color:var(--ink-dim); letter-spacing:.06em; }
@keyframes slideIn{ from{opacity:0; transform:translateX(22px)} to{opacity:1; transform:none} }

.board-foot{
  display:flex; align-items:center; justify-content:space-between; margin-top:9px;
  font-family:var(--font-pixel); font-size:7px; color:var(--ink-dim); letter-spacing:.1em;
}
.mini-btn{
  background:transparent; border:1px solid rgba(255,59,107,.5); color:#ff6b8f;
  font-family:var(--font-pixel); font-size:7px; padding:3px 7px; cursor:none; transition:.2s;
}
.mini-btn:hover{ background:#ff2b6b; color:#fff; }

.rail-panel{ border:1px solid rgba(0,229,255,.3); padding:10px; background:rgba(0,229,255,.05); }
.rail-panel-head{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.16em; color:var(--cyan); margin-bottom:8px; }
.signal-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.signal-list li{ display:flex; flex-direction:column; gap:2px; }
.signal-list span{ font-family:var(--font-pixel); font-size:8px; color:var(--ink-dim); letter-spacing:.1em; }
.signal-list a{ font-family:var(--font-pixel); font-size:10px; color:var(--acid); transition:.2s; }
.signal-list a:hover{ color:var(--magenta); text-shadow:0 0 14px rgba(255,43,209,.8); }

/* ============================================================
   SITE
   ============================================================ */
#site{
  position:relative; z-index:20;
  margin-left:var(--rail-w); margin-right:var(--rail-r);
  padding-top:var(--top-h);
  transition:transform .75s var(--ease-in-out), opacity .5s var(--ease-in-out), filter .5s;
}
body.mode-game #site{ transform:translateX(-8%) scale(.96); opacity:0; pointer-events:none; filter:blur(6px); }
#site-inner{ max-width:1120px; margin:0 auto; padding:0 30px 140px; }

.section{ padding:96px 0 40px; position:relative; scroll-margin-top:calc(var(--top-h) + 16px); }
.sec-head{ display:flex; align-items:center; gap:16px; margin-bottom:38px; }
.sec-num{ font-family:var(--font-pixel); font-size:11px; color:var(--accent-2); border:1px solid var(--accent-2); padding:4px 8px; }
.sec-head h2{
  font-family:var(--font-display); font-size:clamp(38px,6vw,74px); line-height:.86; margin:0;
  letter-spacing:.01em; position:relative;
}
.sec-rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--accent),transparent); }

/* --- hero --- */
.hero{ padding:70px 0 130px; position:relative; min-height:calc(100vh - var(--top-h) - 150px); display:flex; flex-direction:column; justify-content:center; }
.hero-grid{
  position:absolute; inset:-80px -300px auto; height:560px; pointer-events:none;
  background-image:linear-gradient(rgba(200,255,0,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(200,255,0,.07) 1px,transparent 1px);
  background-size:52px 52px;
  transform:perspective(520px) rotateX(64deg);
  transform-origin:top center;
  mask-image:linear-gradient(180deg, #000 10%, transparent 78%);
  -webkit-mask-image:linear-gradient(180deg, #000 10%, transparent 78%);
  animation:gridMove 9s linear infinite;
  opacity:.8;
}
@keyframes gridMove{ to{ background-position:0 520px, 0 0; } }

.eyebrow{
  font-family:var(--font-pixel); font-size:9px; letter-spacing:.24em; color:var(--acid);
  border:1px solid rgba(200,255,0,.4); display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; margin-bottom:26px; background:rgba(200,255,0,.05);
  animation:flicker 4.5s infinite;
}
.blink{ color:var(--magenta); animation:blink .9s steps(2) infinite; }
@keyframes flicker{ 0%,92%,100%{opacity:1} 93%{opacity:.35} 95%{opacity:.9} 97%{opacity:.5} }

.glitch{
  font-family:var(--font-display); font-size:clamp(46px,10.5vw,140px); line-height:.85;
  margin:0; position:relative; letter-spacing:.005em; color:#fff;
  text-shadow:0 0 40px rgba(200,255,0,.25);
}
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; inset:0; pointer-events:none;
  clip-path:inset(0 0 0 0);
}
.glitch::before{ color:var(--magenta); transform:translate(-3px,-2px); mix-blend-mode:screen; animation:glitchA 3.4s steps(2) infinite; }
.glitch::after{ color:var(--cyan); transform:translate(3px,2px); mix-blend-mode:screen; animation:glitchB 4.1s steps(2) infinite; }
@keyframes glitchA{
  0%,86%,100%{ clip-path:inset(0 0 100% 0); transform:translate(-3px,-2px); }
  87%{ clip-path:inset(12% 0 58% 0); transform:translate(-9px,1px); }
  90%{ clip-path:inset(48% 0 24% 0); transform:translate(7px,-3px); }
  93%{ clip-path:inset(72% 0 6% 0); transform:translate(-5px,2px); }
}
@keyframes glitchB{
  0%,80%,100%{ clip-path:inset(0 0 100% 0); transform:translate(3px,2px); }
  81%{ clip-path:inset(30% 0 42% 0); transform:translate(8px,-1px); }
  84%{ clip-path:inset(6% 0 74% 0); transform:translate(-6px,3px); }
  87%{ clip-path:inset(55% 0 18% 0); transform:translate(4px,0); }
}
.glitch.big{ font-size:clamp(56px,13.5vw,182px); color:var(--acid); text-shadow:0 0 50px rgba(200,255,0,.4), 0 0 100px rgba(200,255,0,.2); }
.glitch.sm{ font-size:clamp(30px,5vw,60px); }
.glitch.alt{ color:var(--magenta); text-shadow:0 0 44px rgba(255,43,209,.45); }
.glitch.alt::before{ color:var(--lime); }
.glitch.alt::after{ color:var(--orange); }
.artist-glyph.alt2{ -webkit-text-stroke-color:#00ffa3; text-shadow:0 0 70px rgba(0,255,163,.5); }
.artist-glyph.alt2::before{ color:#ff6a00; }
.glitch.alt2{ color:#00ffa3; text-shadow:0 0 44px rgba(0,255,163,.45); }
.glitch.alt2::before{ color:var(--orange); }
.glitch.alt2::after{ color:var(--violet); }
.artist.alt2 .tagline{ color:#00ffa3 !important; }

.hero-strike{
  height:6px; margin:26px 0 22px; width:min(720px,100%);
  background:linear-gradient(90deg,var(--magenta),var(--orange),transparent);
  transform:skewX(-24deg); box-shadow:0 0 26px rgba(255,43,209,.6);
  animation:strikeIn 1s var(--ease-out) .3s backwards, strikeGlow 3s ease-in-out infinite 1.4s;
}
@keyframes strikeIn{ from{transform:skewX(-24deg) scaleX(0); opacity:0} to{transform:skewX(-24deg) scaleX(1); opacity:1} }
@keyframes strikeGlow{ 50%{ filter:brightness(1.5) } }

.hero-lede{
  font-size:clamp(15px,1.5vw,20px); line-height:1.6; max-width:640px; color:#c9c2e6; margin:0 0 30px;
  border-left:3px solid var(--accent-2); padding-left:16px;
}
.hero-lede b{ color:var(--acid); }

.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px; }

.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border:1px solid rgba(200,255,0,.45); color:var(--ink);
  font-family:var(--font-pixel); font-size:11px; letter-spacing:.12em; cursor:none;
  background:rgba(255,255,255,.03); overflow:hidden;
  transition:transform .3s var(--ease-snap), color .3s, border-color .3s, box-shadow .3s;
}
.btn i{ font-style:normal; font-size:11px; transition:transform .3s var(--ease-snap); }
.btn:hover{ transform:translateY(-3px); border-color:var(--acid); box-shadow:0 10px 40px rgba(200,255,0,.2); }
.btn:hover i{ transform:translate(4px,-2px); }
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(200,255,0,.35),transparent);
  transform:translateX(-120%); transition:transform .7s var(--ease-out);
}
.btn:hover::after{ transform:translateX(120%); }
.btn-primary{ background:linear-gradient(90deg,var(--acid),var(--lime)); color:#07040c; border-color:transparent; font-weight:700; }
.btn-primary::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); }
.btn-primary:hover{ box-shadow:0 12px 46px rgba(200,255,0,.45); }
.btn-ghost{ border-color:rgba(255,255,255,.2); color:var(--ink-dim); }
.btn-ghost:hover{ color:var(--ink); border-color:var(--magenta); box-shadow:0 10px 40px rgba(255,43,209,.2); }
.btn-play{ padding:9px 14px; font-size:10px; border-color:rgba(0,229,255,.5); color:var(--cyan); }
.btn-play:hover{ border-color:var(--cyan); box-shadow:0 6px 26px rgba(0,229,255,.3); }
.btn-play.playing{ background:var(--cyan); color:#04090c; border-color:var(--cyan); box-shadow:0 0 24px rgba(0,229,255,.45); }
.btn-play.playing::before{ content:'▮▮'; margin-right:7px; }

/* --- album cards with full tracklists --- */
.album-grid{ align-items:start; }
.album-card{ --alb-c:#c8ff00; }
.alb-art{
  background:
    linear-gradient(135deg, rgba(5,4,10,.35), rgba(5,4,10,.92) 78%),
    linear-gradient(135deg, var(--alb-c), #05040a 95%);
  height:200px; aspect-ratio:auto; align-content:center;
}
.alb-art::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(0,0,0,.26) 0 2px, transparent 2px 9px);
}
.rel-art.alb-art span{
  font-size:34px; color:var(--alb-c); position:relative; z-index:2; letter-spacing:.02em;
  text-shadow:0 0 34px color-mix(in srgb, var(--alb-c) 65%, transparent);
}
.alb-art::after{ inset:-60%; background:conic-gradient(from 0deg, transparent, rgba(255,255,255,.13), transparent 40%); }
.alb-art-num{
  position:absolute; bottom:10px; right:12px; z-index:3;
  font-family:var(--font-pixel); font-size:8px; letter-spacing:.14em;
  color:var(--alb-c); border:1px solid color-mix(in srgb, var(--alb-c) 50%, transparent);
  background:rgba(5,4,10,.65); padding:4px 7px;
}
.alb-meta h4{ font-size:24px; }
.tracklist{ list-style:none; margin:0 0 14px; padding:0; border-top:1px solid rgba(255,255,255,.08); }
.tracklist li{
  display:grid; grid-template-columns:26px 1fr 26px; align-items:center; gap:8px;
  padding:5px 3px; border-bottom:1px solid rgba(255,255,255,.045);
  transition:background .2s;
}
.tracklist li:hover{ background:rgba(255,255,255,.05); }
.tracklist li.on{ background:rgba(200,255,0,.12); box-shadow:inset 2px 0 0 var(--acid); }
.tracklist .tn{ font-family:var(--font-pixel); font-size:8px; color:var(--ink-dim); }
.tracklist .tt{ font-family:var(--font-tech); font-size:12px; color:#d6d0ee; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tracklist li.on .tt{ color:var(--acid); }
.tplay{
  width:22px; height:22px; border:1px solid rgba(255,255,255,.16); background:transparent;
  color:var(--ink-dim); font-size:8px; cursor:none; transition:.2s; display:grid; place-items:center;
}
.tplay:hover{ border-color:var(--alb-c); color:var(--alb-c); background:rgba(255,255,255,.06); }
.tracklist li.on .tplay{ border-color:var(--acid); color:var(--acid); }
.alb-play{ width:100%; justify-content:center; }
.big-btn{ padding:18px 34px; font-size:13px; }

.hero-ticker{
  position:absolute; left:-30px; right:-30px; bottom:34px; overflow:hidden;
  border-top:1px solid rgba(255,43,209,.35); border-bottom:1px solid rgba(255,43,209,.35);
  background:rgba(255,43,209,.05); padding:9px 0;
}
.tick-track{ display:flex; gap:26px; white-space:nowrap; width:max-content; animation:tick 26s linear infinite; }
.tick-track span{ font-family:var(--font-display); font-size:20px; color:var(--ink); letter-spacing:.04em; }
.tick-track span:nth-child(even){ color:var(--magenta); }
@keyframes tick{ to{ transform:translateX(-50%) } }

/* --- manifesto --- */
.manifesto-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2px; background:rgba(200,255,0,.14); border:1px solid rgba(200,255,0,.14); }
.mf{
  margin:0; padding:26px 22px; background:rgba(8,6,16,.86);
  font-size:15px; line-height:1.55; color:#bdb6da;
  transition:background .3s, color .3s, transform .35s var(--ease-out);
  position:relative; overflow:hidden;
}
.mf::before{
  content:''; position:absolute; inset:0; background:linear-gradient(120deg,var(--accent),var(--accent-2));
  transform:translateY(100%); transition:transform .45s var(--ease-out); z-index:0;
}
.mf:hover{ color:#07040c; transform:translateY(-4px); }
.mf:hover::before{ transform:translateY(0); }
.mf > *{ position:relative; z-index:1; }
.mf.big{ font-family:var(--font-display); font-size:clamp(21px,2.4vw,31px); line-height:1.05; color:#fff; text-transform:uppercase; }
.mf.big:hover{ color:#07040c; }

/* --- artist --- */
.artist-hero{ display:grid; grid-template-columns:auto 1fr; gap:38px; align-items:center; margin-bottom:44px; }
.artist-hero.reverse{ grid-template-columns:1fr auto; }
.artist-hero.reverse .artist-glyph{ order:2; }
.artist-glyph{
  font-family:var(--font-display); font-size:clamp(100px,16vw,230px); line-height:.8;
  color:transparent; -webkit-text-stroke:2px var(--acid);
  text-shadow:0 0 70px rgba(200,255,0,.45);
  position:relative; padding:20px 28px;
}
.artist-glyph::before{
  content:attr(data-text); position:absolute; inset:20px 28px; color:var(--magenta);
  -webkit-text-stroke:0; opacity:.42; transform:translate(10px,6px); mix-blend-mode:screen;
  animation:gfloat 5s var(--ease-in-out) infinite;
}
.artist-glyph.alt{ -webkit-text-stroke-color:var(--magenta); text-shadow:0 0 70px rgba(255,43,209,.5); }
.artist-glyph.alt::before{ color:var(--cyan); }
@keyframes gfloat{ 0%,100%{transform:translate(10px,6px)} 50%{transform:translate(-8px,-6px)} }
.artist-copy p{ color:#b6afd4; line-height:1.65; max-width:62ch; }
.tagline{ font-family:var(--font-pixel); font-size:10px !important; letter-spacing:.1em; color:var(--acid) !important; margin:0 0 16px; }
.site-url a{
  font-family:var(--font-display); font-size:clamp(24px,3.4vw,44px); color:var(--ink);
  display:inline-block; border-bottom:3px solid var(--magenta); padding-bottom:4px;
  transition:.3s var(--ease-out);
}
.site-url a:hover{ color:var(--acid); border-color:var(--acid); transform:translateX(6px); text-shadow:0 0 30px rgba(200,255,0,.6); }

.release-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-bottom:44px; }
.release{
  border:1px solid rgba(255,255,255,.1); background:rgba(10,7,20,.7);
  transition:transform .4s var(--ease-out), border-color .3s, box-shadow .4s;
}
.release:hover{ transform:translateY(-8px) rotate(-.6deg); border-color:var(--magenta); box-shadow:0 22px 60px rgba(255,43,209,.2); }
.rel-art{
  aspect-ratio:1; display:grid; place-items:center; position:relative; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.rel-art span{ font-family:var(--font-display); font-size:26px; line-height:.95; text-align:center; color:#07040c; position:relative; z-index:2; text-shadow:0 2px 0 rgba(255,255,255,.2); }
.rel-art::after{ content:''; position:absolute; inset:-40%; background:conic-gradient(from 0deg, transparent, rgba(255,255,255,.35), transparent 40%); animation:spin 8s linear infinite; }
@keyframes spin2{ to{transform:rotate(360deg)} }
.rel-art-1{ background:linear-gradient(135deg,var(--acid),#3aff9a); }
.rel-art-2{ background:linear-gradient(135deg,var(--orange),var(--magenta)); }
.rel-art-3{ background:linear-gradient(135deg,var(--violet),var(--cyan)); }
.rel-art-4{ background:linear-gradient(135deg,var(--magenta),#7a00ff); }
.rel-art-5{ background:linear-gradient(135deg,var(--lime),var(--cyan)); }
.rel-art-6{ background:linear-gradient(135deg,#ff2b6b,var(--orange)); }
.rel-meta{ padding:14px 15px 16px; }
.rel-meta h4{ font-family:var(--font-display); font-size:20px; margin:0 0 4px; letter-spacing:.02em; }
.rel-meta p{ font-family:var(--font-pixel); font-size:9px; color:var(--ink-dim); margin:0 0 12px; letter-spacing:.08em; }

.platforms{ border-top:1px solid rgba(255,255,255,.1); padding-top:26px; }
.plat-head{ font-family:var(--font-pixel); font-size:10px; letter-spacing:.2em; color:var(--ink-dim); margin:0 0 14px; }
.plat-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.plat-list a{
  display:inline-block; font-family:var(--font-pixel); font-size:9px; letter-spacing:.08em;
  padding:9px 13px; border:1px solid rgba(0,229,255,.3); color:var(--cyan);
  transition:.28s var(--ease-out); position:relative; overflow:hidden;
}
.plat-list a::before{ content:''; position:absolute; inset:0; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out); z-index:-1; }
.plat-list a:hover{ color:#04090c; border-color:var(--cyan); transform:translateY(-2px); }
.plat-list a:hover::before{ transform:scaleX(1); }

/* --- void / game section --- */
.void-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:start; }
.void-copy p{ color:#b6afd4; line-height:1.7; }
.void-copy .mf.big{ margin-bottom:16px; }
.feature-list{ list-style:none; margin:24px 0; padding:0; display:grid; gap:8px; }
.feature-list li{
  font-family:var(--font-tech); font-size:14px; color:#a9a2c8; padding:10px 12px;
  border-left:2px solid var(--accent-2); background:rgba(255,255,255,.03);
  transition:.3s var(--ease-out);
}
.feature-list li:hover{ background:rgba(200,255,0,.08); border-color:var(--acid); color:#e8e4ff; transform:translateX(6px); }
.feature-list b{ color:var(--acid); font-family:var(--font-pixel); font-size:11px; letter-spacing:.1em; }
.controls-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin-bottom:26px; }
.controls-grid div{ display:flex; align-items:center; gap:9px; }
.controls-grid kbd{
  font-family:var(--font-pixel); font-size:9px; padding:6px 8px; color:var(--acid);
  border:1px solid rgba(200,255,0,.4); background:rgba(200,255,0,.06);
}
.controls-grid span{ font-size:12px; color:var(--ink-dim); }
.board-site{ position:sticky; top:calc(var(--top-h) + 18px); }

/* --- footer --- */
.foot{ padding:70px 0 20px; border-top:1px solid rgba(255,255,255,.1); margin-top:60px; }
.foot-big{
  font-family:var(--font-display); font-size:clamp(30px,7.5vw,110px); line-height:.9;
  color:transparent; -webkit-text-stroke:1.5px rgba(200,255,0,.55);
  text-align:center; margin-bottom:40px; letter-spacing:.01em;
  animation:strokeBreath 5s var(--ease-in-out) infinite;
}
@keyframes strokeBreath{ 50%{ -webkit-text-stroke-color:rgba(255,43,209,.7); color:rgba(255,43,209,.05) } }
.foot-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px; margin-bottom:34px; }
.foot-cols h5{ font-family:var(--font-pixel); font-size:10px; letter-spacing:.16em; color:var(--ink-dim); margin:0 0 10px; }
.foot-cols a,.linklike{
  font-family:var(--font-display); font-size:22px; color:var(--acid); background:none; border:0; padding:0; cursor:none;
  transition:.25s; display:inline-block;
}
.foot-cols a:hover,.linklike:hover{ color:var(--magenta); transform:translateX(5px); text-shadow:0 0 22px rgba(255,43,209,.7); }
.foot-cols p{ font-size:12px; color:#6f6a8c; margin:8px 0 0; }
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--font-pixel); font-size:8px; color:#5f5a7a; letter-spacing:.1em; padding-top:18px; border-top:1px solid rgba(255,255,255,.06); }
.foot-tag{ color:var(--acid); }

/* ============================================================
   UNHIDE PILL
   ============================================================ */
.unhide-pill{
  position:fixed; top:calc(var(--top-h) + 14px); right:calc(var(--rail-r) + 16px); z-index:36;
  display:none; align-items:center; gap:9px; padding:11px 18px; cursor:none;
  background:linear-gradient(90deg,var(--magenta),var(--violet)); border:0; color:#fff;
  font-family:var(--font-pixel); font-size:10px; letter-spacing:.12em;
  box-shadow:0 10px 40px rgba(255,43,209,.4);
  animation:pillIn .5s var(--ease-snap) backwards, pillPulse 2.4s ease-in-out infinite 1s;
}
body.mode-game .unhide-pill{ display:flex; }
@keyframes pillIn{ from{opacity:0; transform:translateX(40px)} to{opacity:1; transform:none} }
@keyframes pillPulse{ 50%{ box-shadow:0 10px 60px rgba(255,43,209,.85) } }
.upill-glyph{ font-size:9px; }

/* ============================================================
   MUSIC BAR
   ============================================================ */
#musicbar{
  position:fixed; left:0; right:0; bottom:0; height:var(--music-h); z-index:40;
  display:flex; align-items:center; gap:16px; padding:0 18px; overflow:hidden;
  background:linear-gradient(0deg, rgba(5,4,10,.97), rgba(5,4,10,.8));
  backdrop-filter:blur(14px) saturate(1.4);
  border-top:1px solid rgba(200,255,0,.3);
}
#musicbar::before{
  content:''; position:absolute; left:0; top:-1px; height:1px; width:100%;
  background:linear-gradient(90deg,var(--acid),var(--magenta),var(--cyan));
  background-size:200% 100%; animation:sweep 5s linear infinite;
}
.mp-left{ display:flex; gap:6px; flex:0 0 auto; }
.mp-btn{
  width:38px; height:38px; background:rgba(255,255,255,.05); border:1px solid rgba(200,255,0,.3);
  color:var(--acid); cursor:none; font-size:13px; display:grid; place-items:center;
  transition:.24s var(--ease-out);
}
.mp-btn:hover{ background:var(--acid); color:#07040c; box-shadow:0 0 24px rgba(200,255,0,.5); transform:translateY(-2px); }
.mp-play{ background:linear-gradient(90deg,var(--acid),var(--lime)); color:#07040c; width:46px; }
.mp-play:hover{ background:linear-gradient(90deg,#fff,var(--acid)); }
.mp-play-ico{ font-size:12px; }

/* the browser blocked autoplay — ask for one click */
body.needs-gesture .mp-play{
  animation:needPlay 1.3s ease-in-out infinite;
}
.gesture-hint{
  position:fixed; left:50%; bottom:calc(var(--music-h) + 20px); transform:translateX(-50%) translateY(20px);
  z-index:41; display:none; align-items:center; gap:10px;
  padding:11px 20px; background:rgba(8,5,18,.95); border:1px solid var(--acid);
  font-family:var(--font-pixel); font-size:10px; letter-spacing:.14em; color:var(--acid);
  box-shadow:0 0 40px rgba(200,255,0,.35); pointer-events:none; opacity:0;
  transition:opacity .4s, transform .4s var(--ease-out);
}
body.needs-gesture .gesture-hint{
  display:flex; opacity:1; transform:translateX(-50%) translateY(0);
  animation:hintPulse 1.6s ease-in-out infinite;
}
.gesture-hint span{ color:var(--magenta); animation:blink .8s steps(2) infinite; }
@keyframes needPlay{
  0%,100%{ box-shadow:0 0 0 0 rgba(200,255,0,.7); }
  50%{ box-shadow:0 0 0 10px rgba(200,255,0,0); }
}
@keyframes hintPulse{
  0%,100%{ box-shadow:0 0 40px rgba(200,255,0,.3); }
  50%{ box-shadow:0 0 70px rgba(200,255,0,.75); }
}

.mp-mid{ display:flex; align-items:center; gap:13px; flex:1 1 auto; min-width:0; }
.np-art{
  width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  font-family:var(--font-display); font-size:17px; color:#07040c;
  box-shadow:0 0 26px rgba(200,255,0,.35);
  transition:background .6s;
}
.np-meta{ min-width:0; flex:1 1 auto; }
.np-title{ font-family:var(--font-display); font-size:16px; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-artist{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.14em; color:var(--ink-dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-wave{ display:flex; align-items:flex-end; gap:2px; height:22px; margin-left:8px; flex:0 0 auto; }
.np-wave i{ width:3px; height:5px; background:var(--accent); opacity:.75; animation:eq 1.05s ease-in-out infinite; }
.np-wave i:nth-child(2n){ animation-delay:.1s } .np-wave i:nth-child(3n){ animation-delay:.2s }
.np-wave i:nth-child(4n){ animation-delay:.3s } .np-wave i:nth-child(5n){ animation-delay:.15s }
.np-wave i:nth-child(6n){ animation-delay:.25s } .np-wave i:nth-child(7n){ animation-delay:.05s }
.np-wave i:nth-child(8n){ animation-delay:.35s }
@keyframes eq{ 0%,100%{height:4px} 50%{height:20px} }
body.paused-music .np-wave i{ animation-play-state:paused; }

.np-progress{
  flex:0 1 190px; height:5px; background:rgba(255,255,255,.08); position:relative; cursor:none;
  min-width:60px;
}
.np-progress i{ position:absolute; inset:0 auto 0 0; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 14px rgba(200,255,0,.5); }
.np-progress:hover{ height:9px; }
.np-progress:hover i{ box-shadow:0 0 24px rgba(255,43,209,.8); }

.mp-right{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.vol{ display:flex; align-items:center; gap:8px; }
.vol-ico{ font-size:12px; filter:grayscale(1) brightness(1.6); }
.vol input[type=range]{ -webkit-appearance:none; appearance:none; width:96px; height:4px; background:rgba(255,255,255,.15); outline:none; cursor:none; }
.vol input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; background:var(--acid); box-shadow:0 0 12px var(--acid); cursor:none; }
.vol input[type=range]::-moz-range-thumb{ width:13px; height:13px; border:0; background:var(--acid); box-shadow:0 0 12px var(--acid); cursor:none; }
.vol-sfx{ border-left:1px solid rgba(255,255,255,.1); padding-left:12px; }
.vol-sfx input[type=range]{ width:62px; }
.vol-ico-fx{
  font-family:var(--font-pixel); font-size:8px; letter-spacing:.1em; color:var(--magenta);
  border:1px solid rgba(255,43,209,.5); padding:3px 4px; filter:none;
}
.vol-sfx input[type=range]::-webkit-slider-thumb{ background:var(--magenta); box-shadow:0 0 12px var(--magenta); }
.vol-sfx input[type=range]::-moz-range-thumb{ background:var(--magenta); box-shadow:0 0 12px var(--magenta); }

.mp-queue{
  display:flex; gap:5px; max-width:230px; overflow-x:auto; overflow-y:hidden;
  padding-bottom:3px; scrollbar-width:thin; flex:0 0 auto;
}
.mp-queue::-webkit-scrollbar{ height:4px; }
.mp-queue::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); }
.mp-queue::-webkit-scrollbar-thumb{ background:var(--accent); }
.mp-queue button{
  width:26px; height:26px; flex:0 0 auto; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03);
  color:var(--ink-dim); cursor:none; font-size:8px; transition:.22s; position:relative;
}
.mp-queue button:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.mp-queue button.on{ background:var(--accent); color:#07040c; border-color:var(--accent); box-shadow:0 0 16px rgba(200,255,0,.6); }
.mp-queue button.mp-empty{
  width:auto; padding:0 9px; font-family:var(--font-pixel); font-size:7px; letter-spacing:.1em;
  border-color:rgba(255,106,0,.55); color:#ff9a4d; white-space:nowrap;
}
.mp-queue button.mp-empty:hover{ border-color:#ff6a00; color:#ff6a00; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-root{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; }
.modal-root[hidden]{ display:none; }
.toast[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(3,2,8,.78); backdrop-filter:blur(7px); animation:fadeIn .3s; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal{
  position:relative; z-index:2; width:min(560px,92vw); padding:34px 32px 30px;
  background:linear-gradient(160deg, rgba(18,6,30,.97), rgba(6,4,14,.98));
  border:1px solid rgba(255,43,209,.45);
  box-shadow:0 0 90px rgba(255,43,209,.3), 0 40px 120px rgba(0,0,0,.7);
  animation:modalIn .45s var(--ease-snap);
}
@keyframes modalIn{ from{opacity:0; transform:translateY(34px) scale(.94)} to{opacity:1; transform:none} }
.modal-kicker{ font-family:var(--font-pixel); font-size:9px; letter-spacing:.26em; color:var(--magenta); margin-bottom:10px; }
.modal-title{ font-family:var(--font-display); font-size:clamp(38px,7vw,68px); margin:0 0 20px; line-height:.9; }
.modal-text{ color:#b0a9cd; line-height:1.6; margin:0 0 18px; }
.modal-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.modal-foot{ margin-top:16px; font-family:var(--font-pixel); font-size:10px; color:var(--ink-dim); letter-spacing:.1em; }
.modal-foot b{ color:var(--acid); font-size:16px; }

.go-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px; }
.go-stats div{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:10px 8px; text-align:center; }
.go-stats span{ display:block; font-family:var(--font-pixel); font-size:7px; letter-spacing:.16em; color:var(--ink-dim); }
.go-stats b{ display:block; font-family:var(--font-display); font-size:20px; color:var(--acid); margin-top:4px; }

.go-initials{ margin-top:6px; }
.go-initials label{ display:block; font-family:var(--font-pixel); font-size:9px; letter-spacing:.2em; color:var(--ink-dim); margin-bottom:8px; }
#initials-input{
  width:100%; padding:14px 16px; font-family:var(--font-pixel); font-size:34px; letter-spacing:.4em;
  text-align:center; text-transform:uppercase; color:var(--acid); background:rgba(0,0,0,.5);
  border:1px solid rgba(200,255,0,.4); outline:none; transition:.3s;
}
#initials-input:focus{ border-color:var(--acid); box-shadow:0 0 34px rgba(200,255,0,.35); }
.initials-preview{ font-family:var(--font-pixel); font-size:12px; color:var(--ink-dim); margin-top:10px; letter-spacing:.1em; }
.initials-preview span{ color:var(--acid); }

kbd{ font-family:var(--font-pixel); font-size:10px; padding:2px 6px; border:1px solid rgba(200,255,0,.4); color:var(--acid); }

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed; left:50%; bottom:calc(var(--music-h) + 22px); transform:translateX(-50%);
  z-index:65; padding:13px 22px; background:rgba(8,5,18,.95); border:1px solid var(--acid);
  font-family:var(--font-pixel); font-size:10px; letter-spacing:.12em; color:var(--acid);
  box-shadow:0 0 40px rgba(200,255,0,.3); animation:toastIn .35s var(--ease-snap);
}
@keyframes toastIn{ from{opacity:0; transform:translate(-50%,22px)} to{opacity:1; transform:translate(-50%,0)} }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(38px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   SENSITIVITY / CHAOS
   ============================================================ */
.chaos-panel{ border-color:rgba(255,43,209,.45); background:rgba(255,43,209,.05); }
.chaos-slider{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; margin:8px 0 9px;
  background:linear-gradient(90deg,#3a3550,var(--magenta),var(--acid));
  outline:none; cursor:none;
}
.chaos-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:#fff; box-shadow:0 0 14px var(--magenta); cursor:none;
}
.chaos-slider::-moz-range-thumb{
  width:15px; height:15px; border:0; border-radius:50%;
  background:#fff; box-shadow:0 0 14px var(--magenta); cursor:none;
}
.chaos-read{
  font-family:var(--font-display); font-size:16px; color:var(--acid);
  text-shadow:0 0 16px rgba(200,255,0,.5); line-height:1.1;
}
.chaos-note{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.1em; color:var(--ink-dim); margin-top:5px; line-height:1.6; }
.chaos-toggle{ display:flex; align-items:center; gap:7px; margin-top:10px; cursor:none; }
.chaos-toggle input{ accent-color:var(--magenta); width:13px; height:13px; cursor:none; }
.chaos-toggle span{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.08em; color:var(--ink-dim); }

/* ============================================================
   HANGAR
   ============================================================ */
.hangar-top{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:48px; }

.shard-bank{
  border:1px solid rgba(255,43,209,.4); background:linear-gradient(150deg, rgba(30,6,42,.9), rgba(8,4,16,.9));
  padding:22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  box-shadow:0 0 50px rgba(255,43,209,.12);
}
.shard-ico{ font-size:30px; color:var(--magenta); text-shadow:0 0 22px var(--magenta); }
.shard-num{
  font-family:var(--font-display); font-size:46px; line-height:1; color:#fff;
  text-shadow:0 0 26px rgba(255,43,209,.7); font-variant-numeric:tabular-nums;
}
.shard-lbl{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.2em; color:var(--ink-dim); margin-top:4px; }
.shard-hint{ flex:1 1 140px; font-family:var(--font-pixel); font-size:7px; letter-spacing:.08em; color:#6f6a8c; line-height:1.8; }

.daily-card{ border:1px solid rgba(0,229,255,.35); background:linear-gradient(150deg, rgba(4,24,32,.9), rgba(6,6,16,.9)); padding:20px; }
.daily-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.daily-tag{ font-family:var(--font-pixel); font-size:9px; letter-spacing:.18em; color:var(--cyan); }
.daily-date{ font-family:var(--font-mono); font-size:11px; color:var(--ink-dim); }
.daily-text{ font-size:13px; color:#a9a2c8; line-height:1.6; margin:0 0 14px; }
.daily-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.daily-stats div{ background:rgba(255,255,255,.04); border:1px solid rgba(0,229,255,.15); padding:8px 6px; text-align:center; }
.daily-stats span{ display:block; font-family:var(--font-pixel); font-size:7px; letter-spacing:.12em; color:var(--ink-dim); }
.daily-stats b{ display:block; font-family:var(--font-display); font-size:18px; color:var(--cyan); margin-top:3px; }
.daily-list{ margin-top:14px; }
.daily-list li{ grid-template-columns:22px 1fr auto; }

.hangar-sub{
  font-family:var(--font-display); font-size:clamp(22px,3vw,34px); margin:0 0 18px;
  color:transparent; -webkit-text-stroke:1px rgba(200,255,0,.5); letter-spacing:.02em;
}
.upgrade-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-bottom:48px; }
.up-card{ border:1px solid rgba(200,255,0,.2); background:rgba(8,6,16,.8); padding:14px; display:flex; flex-direction:column; gap:9px; }
.up-top{ display:flex; align-items:baseline; justify-content:space-between; }
.up-name{ font-family:var(--font-display); font-size:21px; }
.up-lv{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.1em; color:var(--ink-dim); }
.up-pips{ display:flex; gap:4px; }
.up-pips i{ flex:1; height:6px; background:rgba(255,255,255,.08); }
.up-pips i.on{ background:var(--acid); box-shadow:0 0 10px rgba(200,255,0,.6); }
.up-desc{ font-size:11px; color:#7d7799; line-height:1.5; flex:1; }
.up-buy{ padding:9px 12px; font-size:9px; justify-content:center; }
.up-buy:disabled{ opacity:.45; cursor:not-allowed; }
.up-max{ border-color:rgba(200,255,0,.5); color:var(--acid); }

.ship-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.ship-card{
  border:1px solid rgba(255,255,255,.1); background:rgba(8,6,16,.8); padding:16px;
  display:flex; flex-direction:column; gap:12px; transition:.35s var(--ease-out); position:relative; overflow:hidden;
}
.ship-card:hover{ transform:translateY(-4px); border-color:var(--ship-c); box-shadow:0 14px 40px rgba(0,0,0,.5); }
.ship-card.active{ border-color:var(--ship-c); box-shadow:0 0 34px color-mix(in srgb, var(--ship-c) 30%, transparent); }
.ship-card.locked{ opacity:.62; }
.ship-glyph{
  font-family:var(--font-display); font-size:46px; line-height:.8; color:var(--ship-c);
  text-shadow:0 0 26px var(--ship-c);
}
.ship-meta h4{ font-family:var(--font-display); font-size:22px; margin:0 0 4px; }
.ship-meta p{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.06em; color:var(--ink-dim); margin:0; line-height:1.8; }
.ship-btn{ padding:10px 14px; font-size:10px; justify-content:center; }
.ship-btn:disabled{ opacity:.6; cursor:not-allowed; border-color:var(--ship-c); color:var(--ship-c); }

/* shards earned in the game over modal */
.go-shards{
  display:flex; align-items:center; gap:10px; margin-bottom:16px; padding:10px 12px;
  border:1px solid rgba(255,43,209,.4); background:rgba(255,43,209,.07);
}
.go-shard-ico{ color:var(--magenta); font-size:17px; }
.go-shards b{ font-family:var(--font-display); font-size:22px; color:var(--magenta); }
.go-shard-lbl{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.12em; color:var(--ink-dim); flex:1; }

.combo-name{ color:var(--ink-dim); }
.combo-name.on{ color:var(--magenta); text-shadow:0 0 12px rgba(255,43,209,.8); }
.hud-daily{ border-color:rgba(255,43,209,.5); background:rgba(255,43,209,.08); }
.hud-daily .hud-zone-name{ color:var(--magenta); text-shadow:0 0 16px rgba(255,43,209,.6); font-size:10px; }

/* ============================================================
   THE MAKER — one writer, three bodies
   ============================================================ */
.maker-hero{ display:grid; grid-template-columns:auto 1fr; gap:38px; align-items:center; margin-bottom:46px; }
.maker-glyph{
  font-family:var(--font-display); font-size:clamp(60px,8vw,120px); line-height:.9;
  color:transparent; -webkit-text-stroke:2px var(--acid);
  display:flex; align-items:center; gap:6px; text-shadow:0 0 50px rgba(200,255,0,.4);
}
.maker-glyph i{ font-style:normal; color:var(--magenta); -webkit-text-stroke:0; font-size:.6em; }
.maker-copy p{ color:#b6afd4; line-height:1.65; max-width:64ch; }
.maker-copy .tagline{ font-family:var(--font-pixel); font-size:10px !important; letter-spacing:.1em; color:var(--acid) !important; margin:0 0 14px; }

.bodies{ display:flex; flex-direction:column; gap:54px; margin-bottom:50px; }
.body{ border-top:1px solid color-mix(in srgb, var(--c1) 35%, transparent); padding-top:20px; }
.body-head{ margin-bottom:22px; position:relative; }
.body-num{
  font-family:var(--font-pixel); font-size:8px; letter-spacing:.24em; color:var(--c1);
  border:1px solid color-mix(in srgb, var(--c1) 45%, transparent); padding:4px 8px; display:inline-block; margin-bottom:12px;
}
.body-name{
  font-family:var(--font-display); font-size:clamp(34px,5.4vw,66px); line-height:.9; margin:0 0 8px;
  color:#fff; text-shadow:0 0 40px color-mix(in srgb, var(--c1) 55%, transparent);
}
.body-tag{ font-family:var(--font-pixel); font-size:9px !important; letter-spacing:.1em; color:var(--c2) !important; margin:0 0 10px; }
.body-desc{ font-size:14px !important; color:#a49dc4 !important; max-width:60ch; margin:0 0 12px; }
.body-link{
  font-family:var(--font-display); font-size:22px; color:var(--c1); border-bottom:2px solid var(--c2);
  display:inline-block; padding-bottom:3px; transition:.28s var(--ease-out);
}
.body-link:hover{ color:#fff; border-color:var(--c1); transform:translateX(6px); }
.body-albums{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }

/* same song, different skin */
.skins-box{
  border:1px solid rgba(0,255,163,.4); background:linear-gradient(140deg, rgba(0,30,22,.6), rgba(5,4,12,.85));
  padding:20px 22px; margin-bottom:50px;
}
.skins-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.skins-tag{ font-family:var(--font-display); font-size:24px; color:#00ffa3; text-shadow:0 0 24px rgba(0,255,163,.5); }
.skins-note{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.14em; color:var(--ink-dim); }
.skins-list{ display:flex; flex-direction:column; gap:10px; }
.skin-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.skin-title{ font-family:var(--font-display); font-size:19px; color:#fff; min-width:170px; }
.skin-ver{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; cursor:none;
  background:rgba(255,255,255,.04); border:1px solid rgba(0,255,163,.28); padding:7px 12px;
  transition:.25s var(--ease-out); text-align:left;
}
.skin-ver b{ font-family:var(--font-pixel); font-size:9px; letter-spacing:.08em; color:#00ffa3; }
.skin-ver i{ font-family:var(--font-pixel); font-style:normal; font-size:7px; letter-spacing:.1em; color:var(--ink-dim); }
.skin-ver:hover{ background:rgba(0,255,163,.12); border-color:#00ffa3; transform:translateY(-2px); }

/* the badge on a track that exists in more than one body */
.t-skin{
  display:inline-block; margin-left:8px; font-family:var(--font-pixel); font-size:7px;
  letter-spacing:.08em; color:#00ffa3; border:1px solid rgba(0,255,163,.4);
  padding:2px 5px; vertical-align:middle; cursor:none; white-space:nowrap;
}
.t-skin:hover{ background:#00ffa3; color:#04090c; }

/* ============================================================
   GAME MODE — no selecting, no dragging, no long-press menu.
   Site mode keeps every normal browser behaviour.
   ============================================================ */
body.mode-game{
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}
body.mode-game, body.mode-game *{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
body.mode-game input,
body.mode-game textarea,
body.mode-game [contenteditable]{
  -webkit-user-select:text; user-select:text;
  -webkit-touch-callout:default;
}
body.mode-game img,
body.mode-game svg,
body.mode-game canvas{ -webkit-user-drag:none; user-drag:none; }
body.mode-game #site{ pointer-events:none; }
body.mode-game #game-canvas{ touch-action:none; }

/* now playing / artist promotion */
.nowplaying{
  border:1px solid rgba(255,43,209,.3); background:rgba(255,43,209,.05); padding:10px 11px;
  display:flex; flex-direction:column; gap:4px; margin-top:14px;
}
.np-label{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.2em; color:var(--magenta); }
.np-track{ font-family:var(--font-display); font-size:16px; color:#fff; line-height:1.1; }
.np-artist{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.12em; color:var(--ink-dim); }
.np-link{
  font-family:var(--font-pixel); font-size:8px; letter-spacing:.1em; color:var(--acid);
  border-top:1px solid rgba(255,255,255,.1); padding-top:6px; margin-top:3px; transition:.25s;
}
.np-link:hover{ color:var(--magenta); }
body.mode-game .rail-brand{ display:none; }
body.mode-game .nowplaying{ margin-top:0; }

/* ============================================================
   THE LORE
   ============================================================ */
.lore-hero{ display:grid; grid-template-columns:1.3fr .7fr; gap:26px; margin-bottom:44px; align-items:start; }
.lore-myth{ border:1px solid rgba(255,255,255,.1); background:rgba(8,6,16,.75); padding:24px; }
.lore-myth h3{ font-family:var(--font-display); font-size:clamp(22px,3vw,34px); margin:0 0 12px; color:#fff; }
.lore-myth p{ font-size:14px; color:#a49dc4; line-height:1.7; margin:0 0 18px; }
.lore-myth p b{ color:var(--magenta); }
.prophecy{
  margin:0; padding:16px 18px; border-left:3px solid var(--acid);
  background:rgba(200,255,0,.05); font-family:var(--font-mono); font-size:13px;
  line-height:1.9; color:var(--acid); font-style:italic;
}
.prophecy span{ color:var(--magenta); font-size:22px; vertical-align:middle; }
.lore-cast{ border:1px solid rgba(255,43,209,.28); background:rgba(255,43,209,.04); padding:20px; }
.general-list{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:12px; }
.general-list li{ border-left:2px solid var(--g1); padding-left:12px; }
.gl-name{ font-family:var(--font-display); font-size:19px; color:var(--g1); display:block; }
.gl-title{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.14em; color:var(--ink-dim); display:block; margin:2px 0 4px; }
.gl-desc{ font-size:11px; color:#8f88ad; line-height:1.55; display:block; }

.dim-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.dim-card{
  border:1px solid color-mix(in srgb, var(--d1) 40%, transparent);
  background:linear-gradient(160deg, color-mix(in srgb, var(--d1) 8%, rgba(8,6,16,.9)), rgba(6,4,14,.95));
  padding:15px; display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden;
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.dim-card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(110% 60% at 100% 0%, color-mix(in srgb, var(--d1) 24%, transparent), transparent 66%);
}
.dim-card:hover{ transform:translateY(-5px); box-shadow:0 16px 44px rgba(0,0,0,.55); }
.dc-n{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.18em; color:var(--d2); position:relative; }
.dc-name{ font-family:var(--font-display); font-size:22px; color:#fff; line-height:1; position:relative; }
.dc-sub{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.12em; color:var(--d1); position:relative; }
.dc-desc{ font-size:11px; color:#8f88ad; line-height:1.55; flex:1; margin:6px 0 0; position:relative; }
.dc-quote{ font-size:10px; color:var(--d2); font-style:italic; opacity:.8; position:relative; }

/* ============================================================
   LORE FRAGMENTS + RESONANCE CORE + CO-OP
   ============================================================ */
.hs-count{ font-family:var(--font-pixel); font-size:10px; color:var(--acid); margin-left:10px; -webkit-text-stroke:0; }
.lore-frag-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; }
.lore-frag{
  border:1px solid rgba(255,255,255,.09); background:rgba(8,6,16,.75); padding:14px;
  display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden;
}
.lore-frag::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:rgba(255,255,255,.08);
}
.lore-frag.has{ border-color:rgba(255,43,209,.4); background:rgba(255,43,209,.05); }
.lore-frag.has::before{ background:var(--magenta); box-shadow:0 0 14px var(--magenta); }
.lf-n{ font-family:var(--font-display); font-size:20px; color:var(--ink-dim); }
.lore-frag.has .lf-n{ color:var(--magenta); }
.lf-name{ font-family:var(--font-display); font-size:16px; color:#fff; }
.lore-frag:not(.has) .lf-name{ color:var(--ink-dim); }
.lf-text{ font-size:11px; color:#8f88ad; line-height:1.6; margin:0; }
.lore-frag.has .lf-text{ color:#c3bcdd; }

.core-lede{ color:#a29bc0; font-size:13px; line-height:1.7; max-width:70ch; margin:0 0 18px; }
.core-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-bottom:46px; }
.core-card{ border:1px solid rgba(176,107,255,.32); background:rgba(14,6,26,.8); padding:15px; display:flex; flex-direction:column; gap:9px; }
.core-top{ display:flex; align-items:baseline; justify-content:space-between; }
.core-name{ font-family:var(--font-display); font-size:19px; color:#fff; }
.core-lv{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.1em; color:#b06bff; }
.core-pips{ display:flex; gap:4px; }
.core-pips i{ flex:1; height:6px; background:rgba(255,255,255,.08); }
.core-pips i.on{ background:#b06bff; box-shadow:0 0 10px rgba(176,107,255,.7); }
.core-desc{ font-size:11px; color:#8f88ad; line-height:1.55; flex:1; }
.core-buy{ padding:9px 12px; font-size:10px; justify-content:center; }
.core-buy:disabled{ opacity:.5; cursor:not-allowed; }

.coop-toggle{
  display:flex; align-items:flex-start; gap:14px; padding:16px 18px; margin-bottom:22px; cursor:none;
  border:1px solid rgba(255,43,209,.35); background:rgba(255,43,209,.05); transition:.28s;
}
.coop-toggle:hover{ border-color:var(--magenta); background:rgba(255,43,209,.1); }
.coop-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.coop-box{
  width:20px; height:20px; flex:0 0 auto; border:2px solid var(--magenta); display:grid; place-items:center;
  transition:.22s;
}
.coop-toggle input:checked + .coop-box{ background:var(--magenta); }
.coop-toggle input:checked + .coop-box::after{ content:'✓'; color:#07040c; font-size:13px; font-weight:700; }
.coop-text{ display:flex; flex-direction:column; gap:5px; }
.coop-text b{ font-family:var(--font-display); font-size:19px; color:#fff; }
.coop-text i{ font-style:normal; font-family:var(--font-pixel); font-size:8px; letter-spacing:.1em; color:var(--ink-dim); line-height:1.8; }

.p2-panel{ margin-bottom:46px; }
.p2-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.p2-slot{ border:1px solid rgba(0,229,255,.3); background:rgba(0,20,26,.6); padding:12px; display:flex; flex-direction:column; gap:6px; }
.p2-slot span{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.18em; color:var(--cyan); }
.p2-slot select{
  background:rgba(0,0,0,.5); border:1px solid rgba(0,229,255,.35); color:var(--ink);
  font-family:var(--font-pixel); font-size:10px; padding:8px; cursor:none; outline:none;
}

/* pass lanes */
.pass-cell{
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); padding:7px;
  display:flex; flex-direction:column; gap:5px; position:relative; transition:.22s var(--ease-out);
}
.pass-cell.reached{ border-color:rgba(200,255,0,.3); }
.pass-lane{
  border:1px solid color-mix(in srgb, var(--pc) 45%, transparent);
  background:color-mix(in srgb, var(--pc) 9%, transparent);
  padding:6px 4px; display:flex; flex-direction:column; align-items:center; gap:2px;
  cursor:none; transition:.2s; position:relative; min-height:56px; justify-content:center;
}
.pass-lane:hover{ transform:translateY(-2px); border-color:var(--pc); box-shadow:0 6px 18px rgba(0,0,0,.5); }
.pass-lane.locked{ opacity:.4; }
.pass-lane.claimed{ opacity:.4; }
.pass-lane.claimed::after{ content:'✓'; position:absolute; top:2px; right:4px; color:var(--pc); font-size:10px; }
.pass-lane.empty{ border-style:dashed; border-color:rgba(255,255,255,.08); background:transparent; }
.pl-icon{ font-family:var(--font-display); font-size:17px; color:var(--pc); line-height:1; }
.pl-name{ font-family:var(--font-pixel); font-size:6px; letter-spacing:.03em; color:#cfc8e6; text-align:center; line-height:1.3; }
.pl-lane{ font-family:var(--font-pixel); font-size:6px; letter-spacing:.1em; color:var(--pc); opacity:.7; }
.pc-tier{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.1em; color:var(--ink-dim); }
.pass-lanes{ display:flex; flex-direction:column; gap:3px; }
.pl-free{ font-family:var(--font-pixel); font-size:9px; letter-spacing:.1em; color:var(--acid); }
.pl-prem{ font-family:var(--font-pixel); font-size:9px; letter-spacing:.1em; color:#ffb020; }

/* ============================================================
   THE ARMORY — wallet, pilots, loadout, shop
   ============================================================ */
.wallet{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  border:1px solid rgba(200,255,0,.3); background:linear-gradient(150deg, rgba(10,20,4,.85), rgba(8,4,16,.9));
  padding:20px 24px; margin-bottom:44px;
}
.wallet-item{ display:flex; align-items:center; gap:12px; }
.wallet-ico{ font-size:30px; line-height:1; }
.res-ico{ color:var(--acid); text-shadow:0 0 24px rgba(200,255,0,.8); }
.frag-ico{ color:#b06bff; text-shadow:0 0 24px rgba(176,107,255,.9); }
.wallet-num{
  font-family:var(--font-display); font-size:38px; line-height:1; color:#fff;
  font-variant-numeric:tabular-nums; text-shadow:0 0 26px rgba(200,255,0,.4);
}
.wallet-lbl{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.2em; color:var(--ink-dim); margin-top:3px; }
.wallet-note{
  flex:1 1 220px; font-family:var(--font-pixel); font-size:7px; letter-spacing:.1em;
  color:#6f6a8c; line-height:1.9; border-left:1px solid rgba(255,255,255,.1); padding-left:20px;
}

.pilot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); gap:14px; margin-bottom:46px; }
.pilot-card{
  border:1px solid rgba(255,255,255,.1); background:rgba(8,6,16,.85); padding:16px;
  display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden;
  transition:transform .35s var(--ease-out), border-color .3s, box-shadow .35s;
}
.pilot-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--p1) 22%, transparent), transparent 62%);
}
.pilot-card:hover{ transform:translateY(-5px); border-color:var(--p1); box-shadow:0 18px 50px rgba(0,0,0,.6); }
.pilot-card.active{ border-color:var(--p1); box-shadow:0 0 44px color-mix(in srgb, var(--p1) 28%, transparent); }
.pilot-card.locked{ opacity:.55; }
.pilot-face{
  font-family:var(--font-display); font-size:52px; line-height:.9; color:var(--p1);
  text-shadow:0 0 32px color-mix(in srgb, var(--p1) 70%, transparent);
}
.pilot-body h4{ font-family:var(--font-display); font-size:23px; margin:0 0 4px; }
.pilot-role{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.1em; color:var(--p2); margin-bottom:10px; }
.pilot-passive{ font-size:12px; color:#9d96bd; line-height:1.6; margin-bottom:10px; }
.pilot-passive b{ color:var(--p1); font-family:var(--font-pixel); font-size:9px; letter-spacing:.06em; }
.pilot-stats{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.pilot-stats span{
  font-family:var(--font-pixel); font-size:7px; letter-spacing:.08em; color:var(--ink-dim);
  border:1px solid rgba(255,255,255,.12); padding:3px 6px;
}
.pilot-quote{ font-size:11px; color:#6f6a8c; font-style:italic; line-height:1.5; }
.pilot-btn{ margin-top:auto; padding:10px 14px; font-size:10px; justify-content:center; }
.pilot-btn:disabled{ opacity:.5; cursor:not-allowed; }

.loadout{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-bottom:46px; }
.lo-slot{
  border:1px solid color-mix(in srgb, var(--s1) 40%, transparent); background:rgba(255,255,255,.03);
  padding:12px; display:flex; flex-direction:column; gap:5px; position:relative;
}
.lo-label{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.18em; color:var(--ink-dim); }
.lo-name{ font-family:var(--font-display); font-size:16px; color:var(--s1); line-height:1.1; }
.lo-rar{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.1em; }
.lo-stats{
  grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; padding:12px;
  border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.35);
}
.lo-stats span{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.1em; color:var(--acid); }

.shop-tabs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.shop-tab{
  font-family:var(--font-pixel); font-size:10px; letter-spacing:.12em; padding:11px 18px; cursor:none;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); color:var(--ink-dim);
  transition:.25s var(--ease-out);
}
.shop-tab:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.shop-tab.on{ background:var(--accent); color:#07040c; border-color:var(--accent); box-shadow:0 0 26px rgba(200,255,0,.4); }
.shop-filters{ display:flex; gap:5px; margin-left:auto; flex-wrap:wrap; }
.filt{
  font-family:var(--font-pixel); font-size:7px; letter-spacing:.1em; padding:7px 10px; cursor:none;
  background:transparent; border:1px solid rgba(255,255,255,.12); color:var(--ink-dim); transition:.22s;
}
.filt:hover{ border-color:var(--f1, var(--accent)); color:var(--f1, var(--accent)); }
.filt.on{ background:var(--f1, var(--accent)); color:#07040c; border-color:var(--f1, var(--accent)); }

.shop-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.shop-card{
  border:1px solid color-mix(in srgb, var(--r1) 45%, transparent); background:rgba(8,6,16,.85);
  padding:15px; display:flex; flex-direction:column; gap:9px; position:relative; overflow:hidden;
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.shop-card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--r1);
  box-shadow:0 0 14px var(--r1);
}
.shop-card:hover{ transform:translateY(-4px); box-shadow:0 16px 44px rgba(0,0,0,.55); }
.shop-card.equipped{ background:rgba(0,0,0,.55); }
.shop-rar{
  font-family:var(--font-pixel); font-size:7px; letter-spacing:.2em; color:var(--r1);
}
.shop-card h4{ font-family:var(--font-display); font-size:19px; margin:0; line-height:1.1; }
.shop-card p{ font-size:12px; color:#8f88ad; line-height:1.55; flex:1; }
.shop-stats{ display:flex; flex-wrap:wrap; gap:5px; }
.shop-stats span{
  font-family:var(--font-pixel); font-size:7px; letter-spacing:.07em; color:var(--r1);
  border:1px solid color-mix(in srgb, var(--r1) 35%, transparent); padding:3px 6px;
}
.shop-btn{ padding:10px 12px; font-size:10px; justify-content:center; }
.shop-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ============================================================
   BATTLE PASS
   ============================================================ */
.pass-seasons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:26px; }
.pass-season{
  text-align:left; cursor:none; padding:16px; display:flex; flex-direction:column; gap:6px;
  background:rgba(8,6,16,.85); border:1px solid rgba(255,255,255,.1); transition:.3s var(--ease-out);
}
.pass-season:hover{ transform:translateY(-4px); border-color:var(--magenta); }
.pass-season.on{ border-color:var(--acid); background:rgba(200,255,0,.05); }
.pass-season.unlocked{ border-color:#ffb020; }
.ps-num{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.2em; color:var(--ink-dim); }
.ps-name{ font-family:var(--font-display); font-size:22px; color:#fff; }
.ps-state{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.1em; color:var(--magenta); }
.pass-season.unlocked .ps-state{ color:#ffb020; }

.pass-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:8px; }
.pass-name{ font-family:var(--font-display); font-size:clamp(28px,4vw,48px); line-height:1; color:#fff; }
.pass-sub{ font-family:var(--font-pixel); font-size:9px; letter-spacing:.2em; color:var(--magenta); margin-top:6px; }
.pass-status{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ps-ok{ font-family:var(--font-pixel); font-size:10px; letter-spacing:.14em; color:#ffb020; }
.ps-sub{ font-family:var(--font-pixel); font-size:8px; letter-spacing:.1em; color:var(--ink-dim); }
.pass-buy{ padding:13px 20px; font-size:10px; }
.pass-blurb{ color:#a29bc0; font-size:14px; line-height:1.6; margin:0 0 22px; max-width:70ch; }

.pass-track{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(86px,1fr)); gap:8px;
  max-height:520px; overflow-y:auto; padding:4px 6px 4px 0;
}
.pass-cell{
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.025); padding:9px 7px;
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:none; position:relative;
  min-height:92px; transition:.22s var(--ease-out); text-align:center;
}
.pass-cell.has{ border-color:color-mix(in srgb, var(--pc) 45%, transparent); background:color-mix(in srgb, var(--pc) 7%, transparent); }
.pass-cell:hover{ transform:translateY(-3px); border-color:var(--pc); box-shadow:0 10px 28px rgba(0,0,0,.5); }
.pass-cell.claimed{ opacity:.42; }
.pass-cell.claimed::after{
  content:'✓'; position:absolute; top:4px; right:6px; color:var(--pc); font-size:11px;
}
.pc-tier{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.1em; color:var(--ink-dim); }
.pc-icon{ font-family:var(--font-display); font-size:22px; color:var(--pc); line-height:1; }
.pc-name{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.04em; color:#d4cde8; line-height:1.4; }
.pc-kind{ font-family:var(--font-pixel); font-size:6px; letter-spacing:.1em; color:var(--pc); opacity:.8; }
.pc-empty{ color:#4a4560; font-size:16px; }
.pass-legend{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:16px;
  font-family:var(--font-pixel); font-size:8px; letter-spacing:.1em; color:var(--ink-dim);
}
.pass-legend i{ display:inline-block; width:10px; height:10px; margin-right:6px; }
.lg-free{ background:rgba(255,255,255,.2); }
.lg-prem{ background:#ffb020; }
.pass-price{ margin-left:auto; color:var(--ink-dim); }
.pass-price b{ color:#ffb020; font-size:12px; }

/* ============================================================
   DAILY + ROSTER
   ============================================================ */
.daily-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.daily-side{ border:1px solid rgba(255,255,255,.1); background:rgba(8,6,16,.7); padding:20px; }
.lore-steps{ margin:14px 0 0; padding-left:18px; display:grid; gap:12px; }
.lore-steps li{ font-size:13px; color:#9d96bd; line-height:1.6; }
.lore-steps b{ font-family:var(--font-pixel); font-size:9px; letter-spacing:.1em; color:var(--cyan); display:block; margin-bottom:3px; }

.roster-lede{ color:#a29bc0; font-size:14px; line-height:1.7; max-width:70ch; margin:0 0 26px; }
.roster-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px; }
.roster-card{ border:1px solid rgba(200,255,0,.22); background:rgba(8,6,16,.8); padding:16px; }
.rc-name{ font-family:var(--font-display); font-size:24px; color:#fff; }
.rc-count{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.14em; color:var(--acid); margin:5px 0 10px; }
.rc-albums{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.rc-albums span{
  font-family:var(--font-pixel); font-size:7px; letter-spacing:.06em; color:var(--magenta);
  border:1px solid rgba(255,43,209,.35); padding:3px 6px;
}
.rc-tracks{ list-style:none; margin:0; padding:0; }
.rc-tracks li{ border-bottom:1px solid rgba(255,255,255,.05); }
.rc-tracks button{
  width:100%; text-align:left; background:none; border:0; cursor:none; padding:6px 2px;
  font-family:var(--font-tech); font-size:12px; color:#b8b1d2; transition:.2s;
}
.rc-tracks button:hover{ color:var(--acid); padding-left:8px; }
.rc-more{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.1em; color:var(--ink-dim); padding:8px 2px; }

/* ============================================================
   PORTAL DRAFT
   ============================================================ */
.modal-draft{ width:min(880px,94vw); }
.draft-title{ font-size:clamp(30px,5vw,54px); margin-bottom:22px; }
.draft-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.draft-card{
  border:1px solid color-mix(in srgb, var(--dc) 55%, transparent);
  background:linear-gradient(160deg, color-mix(in srgb, var(--dc) 10%, rgba(8,5,18,.95)), rgba(6,4,14,.97));
  padding:20px 16px; cursor:none; text-align:left; display:flex; flex-direction:column; gap:8px;
  transition:transform .3s var(--ease-snap), box-shadow .3s; min-height:190px; position:relative; overflow:hidden;
}
.draft-card::before{
  content:''; position:absolute; inset:0; background:radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--dc) 26%, transparent), transparent 70%);
}
.draft-card:hover{ transform:translateY(-8px) scale(1.02); box-shadow:0 20px 60px color-mix(in srgb, var(--dc) 25%, transparent); }
.dc-kind{ font-family:var(--font-pixel); font-size:7px; letter-spacing:.2em; color:var(--dc); position:relative; }
.dc-name{ font-family:var(--font-display); font-size:23px; line-height:1.05; color:#fff; position:relative; }
.dc-desc{ font-size:12px; color:#a49dc4; line-height:1.55; flex:1; position:relative; }
.dc-pick{
  font-family:var(--font-pixel); font-size:8px; letter-spacing:.14em; color:var(--dc);
  border:1px solid color-mix(in srgb, var(--dc) 50%, transparent); padding:7px; text-align:center; position:relative;
}
.draft-card:hover .dc-pick{ background:var(--dc); color:#07040c; }
.draft-hint{ margin-top:16px; text-align:center; }
.draft-cards.shake{ animation:draftShake .4s var(--ease-out); }
@keyframes draftShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-9px); }
  40%{ transform:translateX(8px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(3px); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  :root{ --rail-w:200px; --rail-r:230px; }
  #nav a{ padding:8px 7px; font-size:9px; }
  .void-grid{ grid-template-columns:1fr; }
  .board-site{ position:static; }
  .hangar-top{ grid-template-columns:1fr; }
  .daily-wrap{ grid-template-columns:1fr; }
  .draft-cards{ grid-template-columns:1fr; }
  .draft-card{ min-height:auto; }
  .lore-hero{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  :root{ --rail-w:0px; --rail-r:0px; }
  #site{ margin:0; }
  #nav{ display:none; }

  /* rails become compact strips so the high scores are ALWAYS visible */
  #rail-left,#rail-right{
    top:var(--top-h); bottom:auto; width:auto; height:auto;
    flex-direction:row; align-items:flex-start; gap:8px; padding:6px 8px;
    overflow:hidden; pointer-events:none;
  }
  #rail-left{ left:0; right:auto; max-width:52vw; }
  #rail-right{ right:0; left:auto; max-width:46vw; }
  #site{ padding-top:calc(var(--top-h) + 58px); }
  #rail-left::before,#rail-right::before{ background:rgba(8,5,18,.8); }
  .rail-brand{ display:none; }
  .hud{ display:none; }
  body.mode-game .hud{ display:flex; flex-direction:row; gap:6px; pointer-events:auto; }
  .hud-block{ padding:5px 7px; }
  .hud-score{ font-size:21px; }
  .hud-zone-name{ font-size:10px; }
  .hud-block:nth-child(4),.hud-block:nth-child(5),.hud-keys{ display:none; }
  .board{ padding:6px 8px; pointer-events:auto; }
  .board-title{ font-size:12px; }
  .board-sub,.board-foot{ display:none; }
  /* the rail board collapses into one row of score chips */
  #rail-right .score-list{ display:flex; gap:9px; overflow:hidden; }
  #rail-right .score-list li{
    display:flex; gap:5px; white-space:nowrap; border:0; padding:1px 0; font-size:9px; grid-template-columns:none;
  }
  #rail-right .score-list li:nth-child(n+4){ display:none; }
  #rail-right .score-list .zone-tag{ display:none; }
  #rail-right .score-list .empty{ font-size:8px; padding:2px 0; }
  .rail-panel{ display:none; }
  .artist-hero,.artist-hero.reverse{ grid-template-columns:1fr; }
  .artist-hero.reverse .artist-glyph{ order:0; }
  .np-wave{ display:none; }
  .np-progress{ display:none; }
  .mp-queue{ display:none; }
  .unhide-pill{ right:12px; top:auto; bottom:calc(var(--music-h) + 14px); }
  .hero-ticker{ left:-20px; right:-20px; }
}
@media (max-width:640px){
  #rail-left{ max-width:46vw; }
  #rail-left .hud-block:nth-child(3){ display:none; }
  .hud-block{ padding:4px 5px; }
  .hud-score{ font-size:18px; }
  .hud-zone-name{ font-size:9px; }
  #rail-right{ max-width:48vw; }
  .np-art{ display:none; }
  .vol input[type=range]{ width:62px; }
  .score-list .e-long{ display:none; }
  .score-list .e-short{ display:inline; }
}
@media (max-width:600px){
  .go-stats{ grid-template-columns:repeat(2,1fr); }
  .mode-btn-label{ display:none; }
  .mode-btn{ padding:0 14px; }
  #site-inner{ padding:0 16px 120px; }
}

/* ============================================================
   MOTION / PRINT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  #grain,#scanlines{ display:none; }
}
body.no-effects #grain,body.no-effects #scanlines{ display:none; }

/* ---- reduce chaos (accessibility) ---- */
body.reduce-chaos #grain,
body.reduce-chaos #scanlines{ display:none; }
body.reduce-chaos .glitch::before,
body.reduce-chaos .glitch::after{ animation:none; opacity:.22; }
body.reduce-chaos .hero-grid{ animation:none; opacity:.45; }
body.reduce-chaos .hero-ticker .tick-track{ animation-duration:90s; }
body.reduce-chaos #flash{ display:none; }
body.reduce-chaos .eye-grid{ animation:none; }