/* ==================================================================
   DJ KORU — 3D club stylesheet
   Palette is LOCKED (see CLAUDE.md): do not add colors.
   ================================================================== */
:root{
  --bg:#030704;
  --bg2:#061109;
  --panel:#07130c;
  --line:#0e2a1a;
  --green:#00ff88;
  --green-dim:#0a7a45;
  --green-dark:#06341f;
  --text:#b8d4c4;
  --text-dim:#4a6b58;
  --mono:'Courier New',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  overflow:hidden;
  cursor:none;
}
::selection{background:var(--green);color:#000}
a{color:var(--green);text-decoration:none;cursor:none}
button{font-family:var(--mono);cursor:none}

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed;width:14px;height:14px;border:1px solid var(--green);
  border-radius:50%;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background .2s;
  mix-blend-mode:screen;
}
.cursor.hover{width:38px;height:38px;background:rgba(0,255,136,.12)}
.cursor-dot{
  position:fixed;width:3px;height:3px;background:var(--green);
  border-radius:50%;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
}
@media(hover:none){.cursor,.cursor-dot{display:none}body,a,button{cursor:auto}}

/* ---------- 3D stage ---------- */
#scene-canvas{position:fixed;inset:0;z-index:0;display:block;touch-action:none}
body.fallback-2d #scene-canvas{display:none}

/* ---------- 2D fallback backdrop ---------- */
.grid-bg{position:fixed;inset:0;z-index:0;overflow:hidden;perspective:400px;display:none}
body.fallback-2d .grid-bg{display:block}
.grid-plane{
  position:absolute;left:-50%;top:55%;width:200%;height:200%;
  background:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px;
  transform:rotateX(72deg);
  animation:gridmove 3.5s linear infinite;
  mask-image:linear-gradient(transparent,black 30%);
  -webkit-mask-image:linear-gradient(transparent,black 30%);
}
@keyframes gridmove{from{background-position:0 0}to{background-position:0 60px}}
.grid-glow{
  position:absolute;left:0;right:0;top:45%;height:2px;
  background:linear-gradient(90deg,transparent,var(--green-dim),transparent);
  filter:blur(2px);opacity:.6;
}

/* ---------- noise & scanlines ---------- */
.fx-noise{
  position:fixed;inset:0;z-index:40;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  animation:noise .4s steps(4) infinite;
}
@keyframes noise{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,2%)}100%{transform:translate(2%,-1%)}}
.fx-scanlines{
  position:fixed;inset:0;z-index:40;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.18) 2px 4px);
}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease;
}
#loader.done{opacity:0;pointer-events:none}
.loader-inner{width:min(420px,80vw);text-align:center}
.loader-logo{
  font-size:22px;letter-spacing:.5em;color:var(--green);margin-bottom:30px;
  text-shadow:0 0 24px rgba(0,255,136,.4);
}
.loader-logo span{color:var(--text-dim)}
.loader-bar{height:3px;background:var(--line);margin-bottom:16px;overflow:hidden}
.loader-bar i{
  display:block;height:100%;width:0%;background:var(--green);
  box-shadow:0 0 12px var(--green);transition:width .3s ease;
}
.loader-line{font-size:10px;letter-spacing:.4em;color:var(--text-dim);text-transform:uppercase;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 28px;
  background:linear-gradient(rgba(3,7,4,.9),rgba(3,7,4,.5) 70%,transparent);
}
.nav-logo{font-weight:bold;letter-spacing:.3em;font-size:14px;color:var(--green)}
.nav-logo span{color:var(--text-dim)}
nav ul{display:flex;gap:26px;list-style:none}
nav ul a{
  font-size:11px;letter-spacing:.25em;color:var(--text-dim);
  text-transform:uppercase;transition:color .25s;
}
nav ul a span{color:var(--green-dim);margin-right:6px;font-size:9px}
nav ul a:hover{color:var(--green);text-shadow:0 0 12px var(--green)}
nav ul a.active{color:var(--green)}
@media(max-width:640px){
  nav{padding:14px 16px}
  nav ul{gap:12px}
  nav ul a{font-size:9px;letter-spacing:.12em}
  nav ul a span{display:none}
}

/* ---------- hint ---------- */
.hint{
  position:fixed;left:28px;bottom:118px;z-index:20;
  font-size:10px;letter-spacing:.35em;color:var(--text-dim);text-transform:uppercase;
  transition:opacity 1s;
}
.hint.faded{opacity:0}
.hint-touch{display:none}
@media(hover:none){.hint-desktop{display:none}.hint-touch{display:inline}}
@media(max-width:640px){.hint{left:16px;bottom:150px}}
body.fallback-2d .hint{display:none}

/* ---------- dialogue bubble ---------- */
.dialogue{
  position:fixed;left:50%;top:26%;transform:translate(-50%,8px);z-index:20;
  border:1px solid var(--line);background:rgba(7,19,12,.92);
  padding:12px 18px;font-size:12px;letter-spacing:.12em;color:var(--text);
  max-width:min(340px,80vw);opacity:0;pointer-events:none;
  transition:opacity .4s,transform .4s;
}
.dialogue::after{
  content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(7,19,12,.92);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.dialogue.show{opacity:1;transform:translate(-50%,0)}
.dialogue span::before{content:"DJ // ";color:var(--green);letter-spacing:.2em}
body.fallback-2d .dialogue{display:none}

/* ---------- tooltip ---------- */
.tooltip{
  position:fixed;z-index:25;pointer-events:none;opacity:0;
  border:1px solid var(--green-dim);background:rgba(3,7,4,.94);
  padding:8px 12px;font-size:11px;letter-spacing:.1em;color:var(--green);
  transition:opacity .15s;white-space:nowrap;max-width:70vw;
  overflow:hidden;text-overflow:ellipsis;
}
.tooltip.show{opacity:1}

/* ---------- HUD (now playing) ---------- */
.hud{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,2fr) auto;
  gap:26px;align-items:center;
  padding:16px 28px 18px;
  background:linear-gradient(transparent,rgba(3,7,4,.88) 30%,rgba(3,7,4,.97));
  border-top:1px solid var(--line);
}
.now-label{
  font-size:9px;letter-spacing:.45em;color:var(--green);text-transform:uppercase;
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,255,136,.6)}50%{opacity:.5;box-shadow:0 0 0 6px rgba(0,255,136,0)}}
.track-title{
  font-size:clamp(13px,1.6vw,17px);color:#e6fff2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.track-date{font-size:10px;color:var(--text-dim);letter-spacing:.2em;margin-top:3px}
.progress{
  height:4px;background:var(--line);position:relative;margin-bottom:7px;
  touch-action:none;      /* we own the drag — don't let mobile pan the page instead */
  user-select:none;
}
/* Invisible hit-slop. The bar stays a 4px hairline by design, but 4px is
   unhittable with a thumb (Apple asks for 44), so the TARGET is ~36px tall
   while the visuals are untouched. */
.progress::before{content:'';position:absolute;left:0;right:0;top:-16px;bottom:-16px}
.progress-fill{height:100%;width:0%;background:var(--green);box-shadow:0 0 10px var(--green);transition:width .3s linear}
/* while a finger owns the bar the fill must track it 1:1 — the 300ms ease
   is lovely for playback and awful under a dragging thumb */
.progress.scrubbing .progress-fill{transition:none}
.time-row{
  display:flex;justify-content:space-between;font-size:10px;color:var(--text-dim);letter-spacing:.15em;
  user-select:none;       /* dragging the bar used to select these timestamps */
}
.hud-controls{display:flex;gap:10px;align-items:center}
.btn{
  width:44px;height:44px;border:1px solid var(--line);background:transparent;
  color:var(--green);font-size:13px;transition:.25s;
  display:flex;align-items:center;justify-content:center;
}
.btn:hover{border-color:var(--green);box-shadow:0 0 18px rgba(0,255,136,.3);background:rgba(0,255,136,.06)}
.btn-play{width:54px;height:54px;background:var(--green);color:#000;font-weight:bold;font-size:15px}
.btn-play:hover{box-shadow:0 0 34px rgba(0,255,136,.55)}
@media(max-width:720px){
  .hud{grid-template-columns:1fr auto;grid-template-areas:"info controls" "prog prog";gap:10px 14px;padding:12px 16px 14px}
  .hud-left{grid-area:info;min-width:0}
  .hud-mid{grid-area:prog}
  .hud-controls{grid-area:controls}
  .btn{width:38px;height:38px}
  .btn-play{width:46px;height:46px}
}

/* ---------- panels ---------- */
.panel{
  position:fixed;top:0;right:0;bottom:0;z-index:35;
  width:min(520px,100vw);
  background:rgba(5,13,8,.96);
  border-left:1px solid var(--line);
  transform:translateX(102%);
  transition:transform .45s cubic-bezier(.22,1,.3,1);
  overflow-y:auto;
  padding:0 0 40px;
  backdrop-filter:blur(6px);
}
.panel.open{transform:translateX(0)}
.panel-head{
  position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;
  padding:22px 26px;background:rgba(5,13,8,.97);border-bottom:1px solid var(--line);
  margin-bottom:8px;z-index:1;
}
.label{
  font-size:11px;letter-spacing:.5em;color:var(--green);text-transform:uppercase;
}
.panel-close{
  width:34px;height:34px;border:1px solid var(--line);background:transparent;
  color:var(--text-dim);font-size:13px;transition:.25s;
}
.panel-close:hover{border-color:var(--green);color:var(--green);box-shadow:0 0 14px rgba(0,255,136,.3)}

/* track list */
.track-list{padding:0 10px}
.track-row{
  display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;
  padding:16px 12px;border-bottom:1px solid var(--line);
  transition:.25s;
}
.track-row:hover{background:rgba(0,255,136,.045);padding-left:20px}
.track-row.active{background:rgba(0,255,136,.07)}
.track-row.active .t-num{color:var(--green)}
.t-num{font-size:12px;color:var(--text-dim);letter-spacing:.1em}
.t-name{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-meta{display:block;font-size:9px;color:var(--text-dim);letter-spacing:.2em;text-transform:uppercase;margin-top:4px}
.t-play{
  width:34px;height:34px;border:1px solid var(--line);background:transparent;
  color:var(--green);font-size:11px;transition:.25s;
}
.track-row:hover .t-play{border-color:var(--green);box-shadow:0 0 12px rgba(0,255,136,.3)}

/* manifesto */
.about-text{padding:18px 26px}
.about-text p{font-size:14px;line-height:1.9;color:var(--text);margin-bottom:20px}
.about-text b{color:var(--green);font-weight:normal}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.stat{background:var(--panel);padding:20px 10px;text-align:center}
.stat b{display:block;font-size:22px;color:var(--green);margin-bottom:6px}
.stat span{font-size:9px;letter-spacing:.3em;color:var(--text-dim);text-transform:uppercase}

/* contact */
.contact{padding:26px;text-align:center}
.contact h2{font-size:clamp(26px,5vw,40px);color:#e6fff2;letter-spacing:.05em;margin-bottom:12px}
.contact h2 span{color:var(--green)}
.contact p{color:var(--text-dim);font-size:12px;letter-spacing:.15em;margin-bottom:34px}
.contact-links{display:flex;flex-direction:column;gap:14px}
.contact-btn{
  border:1px solid var(--line);padding:16px 30px;font-size:11px;
  letter-spacing:.35em;text-transform:uppercase;color:var(--text);transition:.3s;
}
.contact-btn:hover{border-color:var(--green);color:var(--green);box-shadow:0 0 26px rgba(0,255,136,.3);transform:translateY(-2px)}

/* ---------- footer ---------- */
footer{
  position:fixed;right:28px;bottom:118px;z-index:20;
  font-size:9px;letter-spacing:.3em;color:var(--text-dim);text-transform:uppercase;
  writing-mode:vertical-rl;
}
@media(max-width:720px){footer{display:none}}

/* ---------- fallback list mode ---------- */
body.fallback-2d{overflow:auto}
body.fallback-2d .panel{position:relative;transform:none;width:100%;max-width:720px;margin:0 auto;border:1px solid var(--line);border-left:1px solid var(--line);margin-bottom:20px;display:none}
body.fallback-2d .panel.open{display:block}
body.fallback-2d main-spacer{display:block;height:80px}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}