/* ============================================================
   nullsec.wtf — tokens
   bg   #050505   panel #0b0b0d   line #1c1c20
   ink  #ececec   dim   #6b6b70
   glitch channels: red #ff2e4d  cyan #00e5ff  blue #3d5aff
   ============================================================ */

:root{
  --bg: #050505;
  --panel: #0b0b0dcc;
  --panel-solid: #0b0b0d;
  --line: #1e1e22;
  --line-soft: #17171a;
  --ink: #ececec;
  --dim: #7a7a80;
  --dimmer: #4a4a4e;
  --red: #ff2e4d;
  --cyan: #00e5ff;
  --blue: #3d5aff;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: 'Space Grotesk', -apple-system, sans-serif;
}

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

html,body{
  height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

body{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

@media (prefers-reduced-motion:no-preference){
  body::before{
    content:"";
    position:fixed; inset:0;
    background:
      radial-gradient(ellipse 700px 500px at 50% 20%, rgba(61,90,255,.05), transparent 60%),
      radial-gradient(ellipse 600px 500px at 50% 90%, rgba(255,46,77,.04), transparent 60%);
    pointer-events:none;
    z-index:0;
  }
}

/* ---------- noise + scanlines + vignette ---------- */
#noise{
  position:fixed; inset:0;
  width:100%; height:100%;
  opacity:.035;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:overlay;
}

.scanlines{
  position:fixed; inset:0;
  z-index:2;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.018) 0px,
    rgba(255,255,255,0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity:.5;
}

.vignette{
  position:fixed; inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* ---------- site-wide glitch flicker ---------- */
.glitch-flash{
  position:fixed; inset:0;
  z-index:50;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
}
.glitch-flash.hit{
  animation:glitchFlash .16s steps(2) 1;
}
@keyframes glitchFlash{
  0%{ opacity:0; }
  30%{
    opacity:.5;
    background:
      linear-gradient(90deg, rgba(255,46,77,.12), transparent 40%, rgba(0,229,255,.12) 60%, transparent),
      repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0px, transparent 2px, transparent 5px);
    transform:translateX(-2px);
  }
  60%{
    opacity:.35;
    transform:translateX(3px);
  }
  100%{ opacity:0; transform:translateX(0); }
}

body.glitching #stage{
  animation:bodyGlitch .18s steps(2) 1;
}
@keyframes bodyGlitch{
  0%{ transform:translate(0,0); filter:none; }
  35%{ transform:translate(-2px,1px); filter:hue-rotate(8deg); }
  65%{ transform:translate(2px,-1px); filter:hue-rotate(-6deg); }
  100%{ transform:translate(0,0); filter:none; }
}

/* ---------- entry gate ---------- */
.gate{
  position:fixed; inset:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  background:var(--bg);
  cursor:pointer;
  transition:opacity .5s ease, filter .3s ease;
}

.gate-mark{
  position:relative;
  width:64px;
  height:64px;
  color:var(--ink);
}
.gate-layer{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.gate-w{ color:#f4f4f4; filter:drop-shadow(0 0 14px rgba(255,255,255,.3)); }
.gate-r{ color:var(--red); mix-blend-mode:screen; opacity:.75; transform:translate(1.5px,0); }
.gate-c{ color:var(--cyan); mix-blend-mode:screen; opacity:.75; transform:translate(-1.5px,0); }

@media (prefers-reduced-motion:no-preference){
  .gate-r{ animation:markR 2.6s steps(1) infinite; }
  .gate-c{ animation:markC 2.6s steps(1) infinite; }
  .gate-w{ animation:markW 2.6s steps(1) infinite; }
  .gate-mark{ animation:gatePulse 2.4s ease-in-out infinite; }
}
@keyframes gatePulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.05); }
}

.gate-text{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--dim);
  text-transform:uppercase;
  animation:gateBlink 1.8s ease-in-out infinite;
}
@keyframes gateBlink{
  0%,100%{ opacity:1; }
  50%{ opacity:.3; }
}

.gate-sub{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--dimmer);
}

.gate.leaving{
  opacity:0;
  filter:blur(6px);
  pointer-events:none;
}

/* ---------- stage / panel ---------- */
.stage{
  position:relative;
  z-index:3;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.panel{
  position:relative;
  width:100%;
  max-width:380px;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 40%), var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  padding:28px 26px 22px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 30px 60px -20px rgba(0,0,0,.8),
    0 0 80px -30px rgba(61,90,255,.15);
  opacity:0;
  transform:translateY(14px) scale(.985);
}

body.entered .panel{
  animation:panelIn .8s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes panelIn{
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.corner{
  position:absolute;
  width:14px; height:14px;
  border-color:var(--dimmer);
  border-style:solid;
  border-width:0;
  opacity:.7;
}
.corner.tl{ top:-1px; left:-1px; border-top-width:1px; border-left-width:1px; border-radius:20px 0 0 0; }
.corner.tr{ top:-1px; right:-1px; border-top-width:1px; border-right-width:1px; border-radius:0 20px 0 0; }
.corner.bl{ bottom:-1px; left:-1px; border-bottom-width:1px; border-left-width:1px; border-radius:0 0 0 20px; }
.corner.br{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; border-radius:0 0 20px 0; }

/* ---------- status row ---------- */
.status-row{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:9.5px;
  letter-spacing:.14em;
  color:var(--dim);
  margin-bottom:26px;
  text-transform:uppercase;
}

.dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--dimmer);
  flex-shrink:0;
}
.dot.live{
  background:var(--cyan);
  box-shadow:0 0 8px 1px var(--cyan);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}

.clock{
  margin-left:auto;
  color:var(--dimmer);
  font-variant-numeric:tabular-nums;
}

/* ---------- mark / logo ---------- */
.mark{
  position:relative;
  width:88px;
  height:88px;
  margin:0 auto 22px;
  color:var(--ink);
}

.mark-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.mark-w{ color:#f4f4f4; filter:drop-shadow(0 0 18px rgba(255,255,255,.35)); }
.mark-r{ color:var(--red); mix-blend-mode:screen; opacity:.8; transform:translate(1.5px,0); }
.mark-c{ color:var(--cyan); mix-blend-mode:screen; opacity:.8; transform:translate(-1.5px,0); }
.mark-b{ color:var(--blue); mix-blend-mode:screen; opacity:.6; transform:translate(.5px,1px); }

@media (prefers-reduced-motion:no-preference){
  .mark-r{ animation:markR 2.6s steps(1) infinite; }
  .mark-c{ animation:markC 2.6s steps(1) infinite; }
  .mark-b{ animation:markB 2.6s steps(1) infinite; }
  .mark-w{ animation:markW 2.6s steps(1) infinite; }
}

@keyframes markR{
  0%,100%{ transform:translate(1.5px,0); clip-path:inset(0 0 0 0); opacity:.8; }
  4%{ transform:translate(5px,-2px); clip-path:inset(15% 0 45% 0); opacity:1; }
  8%{ transform:translate(-3px,1px); clip-path:inset(55% 0 8% 0); opacity:.9; }
  11%{ transform:translate(1.5px,0); opacity:.8; }
  46%{ transform:translate(1.5px,0); opacity:.8; }
  50%{ transform:translate(-4px,2px); clip-path:inset(30% 0 20% 0); opacity:1; }
  54%{ transform:translate(3px,-1px); clip-path:inset(5% 0 60% 0); opacity:.9; }
  58%{ transform:translate(1.5px,0); clip-path:inset(0 0 0 0); opacity:.8; }
}
@keyframes markC{
  0%,100%{ transform:translate(-1.5px,0); clip-path:inset(0 0 0 0); opacity:.8; }
  4%{ transform:translate(-5px,2px); clip-path:inset(0 0 55% 0); opacity:1; }
  8%{ transform:translate(3px,-1px); clip-path:inset(48% 0 12% 0); opacity:.9; }
  11%{ transform:translate(-1.5px,0); opacity:.8; }
  46%{ transform:translate(-1.5px,0); opacity:.8; }
  50%{ transform:translate(4px,-2px); clip-path:inset(20% 0 35% 0); opacity:1; }
  54%{ transform:translate(-3px,1px); clip-path:inset(60% 0 5% 0); opacity:.9; }
  58%{ transform:translate(-1.5px,0); clip-path:inset(0 0 0 0); opacity:.8; }
}
@keyframes markB{
  0%,100%{ transform:translate(.5px,1px); opacity:.6; }
  6%{ transform:translate(-2px,2px); opacity:.9; }
  10%{ transform:translate(.5px,1px); opacity:.6; }
  48%{ transform:translate(.5px,1px); opacity:.6; }
  52%{ transform:translate(2.5px,-1.5px); opacity:.9; }
  56%{ transform:translate(.5px,1px); opacity:.6; }
}
@keyframes markW{
  0%,100%{ opacity:1; }
  5%{ opacity:.55; }
  6%{ opacity:1; }
  9%{ opacity:.7; }
  10%{ opacity:1; }
  51%{ opacity:.5; }
  52%{ opacity:1; }
  55%{ opacity:.65; }
  56%{ opacity:1; }
}

.mark:hover .mark-r, .mark:hover .mark-c, .mark:hover .mark-b, .mark:hover .mark-w{
  animation-duration:.6s;
}

/* ---------- tag ---------- */
.tag{
  text-align:center;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--dim);
  margin-bottom:6px;
}

/* ---------- links ---------- */
.links{
  display:flex;
  flex-direction:column;
  gap:1px;
  margin-bottom:22px;
  border:1px solid var(--line-soft);
  border-radius:12px;
  overflow:hidden;
}

.link-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  text-decoration:none;
  color:var(--ink);
  background:rgba(255,255,255,.012);
  font-size:13px;
  letter-spacing:.02em;
  transition:background .2s ease, padding-left .2s ease;
  border-bottom:1px solid var(--line-soft);
}
.link-row:last-child{ border-bottom:none; }

.link-idx{
  color:var(--dimmer);
  font-size:10px;
  width:16px;
  flex-shrink:0;
}
.link-label{ flex:1; }
.link-arrow{
  color:var(--dimmer);
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .2s ease, transform .2s ease, color .2s ease;
}

.link-row:hover{
  background:rgba(255,255,255,.045);
  padding-left:18px;
}
.link-row:hover .link-arrow{
  opacity:1;
  transform:translateX(0);
  color:var(--cyan);
}
.link-row:hover .link-idx{ color:var(--cyan); }
.link-row:focus-visible{
  outline:1px solid var(--cyan);
  outline-offset:-1px;
}

/* ---------- player ---------- */
.player{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border:1px solid var(--line-soft);
  border-radius:14px;
  background:rgba(255,255,255,.015);
  margin-bottom:20px;
}

.playbtn{
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.playbtn:hover{
  border-color:var(--cyan);
  box-shadow:0 0 14px -2px rgba(0,229,255,.4);
}
.playbtn:active{ transform:scale(.92); }
.playbtn.playing{
  border-color:var(--cyan);
  box-shadow:0 0 14px -2px rgba(0,229,255,.35);
}

.track-info{
  flex:1;
  min-width:0;
}
.track-title{
  font-size:10.5px;
  letter-spacing:.03em;
  color:var(--dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:7px;
}

.track-bar-wrap{ width:100%; }
.track-bar{
  position:relative;
  height:3px;
  border-radius:2px;
  background:var(--line);
  overflow:hidden;
  cursor:pointer;
}
.track-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  background:linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius:2px;
}

.vol-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  color:var(--dimmer);
}

.vol-slider{
  -webkit-appearance:none;
  appearance:none;
  width:52px;
  height:3px;
  background:var(--line);
  border-radius:2px;
  outline:none;
  cursor:pointer;
}
.vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--dim);
  cursor:pointer;
  transition:box-shadow .15s ease;
}
.vol-slider::-webkit-slider-thumb:hover{
  box-shadow:0 0 0 1px var(--cyan), 0 0 8px rgba(0,229,255,.5);
}
.vol-slider::-moz-range-thumb{
  width:10px; height:10px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid var(--bg);
  cursor:pointer;
}
.vol-slider::-moz-range-track{
  height:3px;
  background:var(--line);
  border-radius:2px;
}

/* ---------- footer ---------- */
.footer-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:9px;
  letter-spacing:.14em;
  color:var(--dimmer);
  text-transform:uppercase;
}
.sep{ opacity:.5; }

/* ---------- responsive ---------- */
@media (max-width:400px){
  .panel{ padding:24px 20px 18px; border-radius:16px; }
  .mark{ width:76px; height:76px; }
  .gate-mark{ width:56px; height:56px; }
  .gate-text{ font-size:10px; letter-spacing:.18em; }
}

@media (max-height:640px){
  .panel{ padding:20px 22px 16px; }
  .mark{ width:68px; height:68px; margin-bottom:16px; }
  .glitch{ margin-bottom:18px; font-size:24px; }
  .links{ margin-bottom:16px; }
  .player{ margin-bottom:14px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .panel{ animation:none; opacity:1; transform:none; }
  body.entered .panel{ animation:none; opacity:1; transform:none; }
  .mark-r, .mark-c, .mark-b, .mark-w,
  .gate-r, .gate-c, .gate-w, .gate-mark, .gate-text,
  .dot.live, .glitch-flash, #stage{
    animation:none !important;
  }
}