/* Force dark ER theme — never inherit light-mode washout */
html{color-scheme:dark only;background:#05080a!important}
:root{color-scheme:dark only;--bg:#05080a;--pan:#0c1316;--red:#ff2a3d;--teal:#00f0d0;--tx:#e8f4f2;--mu:#9bb5b2}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background-color:#05080a!important;
  background-image:radial-gradient(circle at 80% -10%,#00f0d01a,transparent 50%),radial-gradient(circle at 0 40%,#ff2a3d14,transparent 40%);
  color:#e8f4f2!important;
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  min-height:100dvh;
  padding-bottom:0;
}
body.entered,body.entered-done{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px) + 40px)}
a{color:var(--teal)}
h1,h2,h3,b,p,small,label,li,span{color:inherit}
@media (prefers-color-scheme:light){
  html,body{background-color:#05080a!important;color:#e8f4f2!important}
}

/* —— Landing gate —— */
.landing{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:#05080a;
  background-image:radial-gradient(circle at 80% -10%,#00f0d022,transparent 50%),radial-gradient(circle at 0 50%,#ff2a3d18,transparent 45%);
  padding:1.25rem;overflow:hidden;
  transition:opacity .55s ease,visibility .55s;
}
.landing-inner{position:relative;z-index:2;width:min(100%,520px)}
body.entered .landing,body.entered-done .landing{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  display:none!important;
}
body.gate .top,body.gate .site-inner,body.gate #site-foot,body.gate .player{display:none!important}
body.gate{overflow:hidden}
body.entered,body.entered-done{
  background-color:#05080a!important;
}

.landing h1{
  font-size:clamp(3.6rem,16vw,7.5rem);line-height:.82;font-weight:900;letter-spacing:-.04em;
  color:#ffffff!important;-webkit-text-fill-color:#ffffff;
  text-shadow:0 0 40px #ff2a3d88,0 0 2px #fff;
  margin:.2rem 0 1.4rem;
}
.landing h1 em{
  color:transparent!important;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:2px var(--teal);font-style:normal;
  text-shadow:0 0 30px #00f0d099;
}
.tag{color:var(--teal)!important;font-family:monospace;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;margin-bottom:.8rem}
.ekg{position:absolute;inset:auto 0 8% 0;height:100px;opacity:.4;z-index:0;pointer-events:none}
.ekg svg{width:100%;height:100%}
.ekg polyline{fill:none;stroke:var(--red);stroke-width:2;stroke-dasharray:1200;animation:ekg 3s linear infinite;filter:drop-shadow(0 0 6px var(--red))}
@keyframes ekg{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}
.cta{display:flex;flex-direction:column;gap:.7rem;position:relative;z-index:2;max-width:320px}
.cta .btn{text-align:center}

/* Door open animation */
.doors{position:absolute;inset:0;z-index:3;display:flex;pointer-events:none;opacity:0}
body.doors-anim .doors{opacity:1}
.door{flex:1;background:#05080a;box-shadow:inset 0 0 40px #00f0d022}
body.doors-anim .door.L{animation:doorL .7s ease forwards}
body.doors-anim .door.R{animation:doorR .7s ease forwards}
@keyframes doorL{from{transform:translateX(0)}to{transform:translateX(-105%)}}
@keyframes doorR{from{transform:translateX(0)}to{transform:translateX(105%)}}
body.doors-anim .landing-inner{animation:fadeUp .45s ease forwards}
@keyframes fadeUp{to{opacity:0;transform:translateY(-12px)}}

.btn{display:inline-block;padding:.85rem 1.4rem;border:2px solid;border-radius:4px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;cursor:pointer;background:transparent;font-size:.9rem;font-family:inherit}
.btn.red{color:#fff!important;background:var(--red);border-color:var(--red);box-shadow:0 0 24px #ff2a3d66}
.btn.teal{color:var(--teal)!important;border-color:var(--teal);background:#05080a}
.btn.big{font-size:clamp(1rem,4vw,1.4rem);word-break:break-all}

/* —— Chrome —— */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#05080af2;backdrop-filter:blur(10px);border-bottom:1px solid #00f0d033}
.logo{font-weight:900;letter-spacing:.08em;color:#e8f4f2!important;text-decoration:none}.logo span{color:var(--red)}
.burger{background:none;border:0;color:var(--teal);font-size:1.6rem;cursor:pointer}
nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--pan);flex-direction:column;max-height:70vh;overflow:auto}
.nav-open nav{display:flex}
nav a{padding:.85rem 1rem;text-decoration:none;color:#e8f4f2!important;border-top:1px solid #ffffff10;text-transform:uppercase;font-size:.8rem;letter-spacing:.1em}
nav a:hover{color:var(--teal)!important}
@media(min-width:960px){.burger{display:none}nav{display:flex;position:static;flex-direction:row;background:none;max-height:none;overflow:visible}nav a{border:0;padding:.35rem .55rem;font-size:.72rem}}

.site-inner{max-width:720px;margin:0 auto;padding:1rem 1rem 2rem;background:transparent;position:relative;z-index:1}
.hub-lead{color:var(--mu);font-size:.9rem;margin:0 0 .8rem;font-family:monospace;letter-spacing:.08em;text-transform:uppercase}

/* Accordion hub */
.hub{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
@media(min-width:700px){.hub{grid-template-columns:repeat(3,1fr)}}
.panel{background:var(--pan);border:1px solid #ffffff14;border-radius:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s;min-height:0}
.panel.open{grid-column:1/-1;border-color:#00f0d055;box-shadow:0 0 0 1px #00f0d022,0 12px 40px #0008}
.panel-head{min-height:92px}
.panel:not(.open) .ph-txt b{font-size:.92rem}
.panel:not(.open) .ph-txt small{font-size:.7rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.panel-head{width:100%;display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;background:transparent;border:0;color:#e8f4f2!important;cursor:pointer;text-align:left;font:inherit}
.panel-head:hover{background:#00f0d00a}
.ico{font-size:1.55rem;width:2.2rem;text-align:center;flex-shrink:0}
.ph-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.ph-txt b{font-size:1.05rem;color:#fff!important;letter-spacing:.02em}
.ph-txt small{color:var(--mu)!important;font-size:.8rem}
.chev{font-size:1.4rem;font-weight:300;color:var(--teal);width:1.5rem;text-align:center;transition:transform .25s}
.panel.open .chev{transform:rotate(45deg)}
.panel-body{padding:0 1rem 1.1rem;border-top:1px solid #ffffff10;animation:panelIn .28s ease}
.panel-body[hidden]{display:none!important}
@keyframes panelIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.lead{color:var(--mu)!important;font-size:1rem;margin:.8rem 0 1rem}
.tabs{display:flex;gap:.5rem;margin:.4rem 0 1rem}
.tabs button{flex:1;max-width:160px;padding:.65rem;background:#05080a;color:var(--mu);border:1px solid #ffffff1a;font-weight:800;text-transform:uppercase;cursor:pointer;border-radius:4px}
.tabs .on{color:#05080a!important;background:var(--teal);border-color:var(--teal)}

/* Compact horizontal album row */
.grid.hscroll{display:flex;gap:.7rem;overflow-x:auto;padding:0 0 .4rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.grid.hscroll::-webkit-scrollbar{height:4px}.grid.hscroll::-webkit-scrollbar-thumb{background:#00f0d044;border-radius:4px}
.grid.hscroll .alb{flex:0 0 132px;scroll-snap-align:start;background:#05080a;border:1px solid #ffffff12;cursor:pointer;text-align:left;color:#e8f4f2;padding:0;border-radius:8px;overflow:hidden;transition:.2s}
.grid.hscroll .alb:hover{border-color:var(--red);transform:translateY(-2px)}
.alb img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.alb div{padding:.45rem .5rem}.alb b{display:block;font-size:.75rem;line-height:1.2;color:#fff!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alb small{color:var(--mu)!important;font-size:.68rem}

dialog{background:var(--pan);color:var(--tx);border:1px solid var(--teal);max-width:900px;width:94vw;padding:0;max-height:90vh}
dialog::backdrop{background:#000c}
.x{position:sticky;top:0;float:right;background:var(--red);color:#fff;border:0;width:40px;height:40px;cursor:pointer;z-index:2}
.ahead{display:grid;gap:1rem;padding:1rem}@media(min-width:700px){.ahead{grid-template-columns:220px 1fr}}
.ahead img{width:100%}.meta{font-size:.85rem;color:var(--mu);font-family:monospace}
.trk{display:grid;grid-template-columns:2rem 1fr auto;gap:.5rem;padding:.6rem 1rem;border-top:1px solid #ffffff10;align-items:center;cursor:pointer;color:#e8f4f2}
.trk:hover{background:#00f0d00d}.trk .isrc{font-family:monospace;font-size:.72rem;color:var(--teal)}.trk .cs{font-size:.7rem;color:var(--red);text-transform:uppercase}

.vgrid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:560px){.vgrid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
.vgrid.vert{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.vgrid video{width:100%;background:#000;aspect-ratio:16/9;border-radius:6px}
.vert video{aspect-ratio:9/16}
.vcard{background:#05080a;border:1px solid #ffffff10;border-radius:8px;overflow:hidden;padding-bottom:.55rem}
.vcard b,.vcard p{padding:0 .65rem;display:block;color:#e8f4f2!important}
.vcard p{color:var(--mu)!important;font-size:.82rem}
.empty{border:1px dashed #00f0d055;padding:1.5rem;text-align:center;color:var(--mu);grid-column:1/-1;border-radius:8px}

.stage-wrap{display:grid;gap:1.4rem}
@media(min-width:800px){.stage-wrap{grid-template-columns:1fr 1fr}}
.steps{padding-left:1.2rem;margin-bottom:1rem;color:#e8f4f2}.steps li{margin:.45rem 0}.steps li::marker{color:var(--red);font-weight:900}
.screen{aspect-ratio:16/9;background:#000 repeating-linear-gradient(0deg,#ffffff05 0 2px,transparent 2px 4px);display:grid;place-items:center;text-align:center;color:var(--mu);border:1px solid #ffffff1a;border-radius:6px}
.screen video{width:100%;height:100%}.live-head{display:flex;gap:.5rem;align-items:center;font-family:monospace;margin-bottom:.4rem;color:var(--mu)}
.dot{width:10px;height:10px;border-radius:50%;background:#555}.dot.on{background:var(--red);box-shadow:0 0 10px var(--red);animation:p 1s infinite}@keyframes p{50%{opacity:.3}}
.card{background:#05080a;border:1px solid #ffffff14;padding:1.1rem;border-radius:8px;color:#e8f4f2}
form label{display:block;margin:.65rem 0;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mu)!important}
input,textarea{display:block;width:100%;margin-top:.3rem;background:#0c1316;border:1px solid #ffffff22;color:#e8f4f2;padding:.7rem;font:inherit;border-radius:4px}
input:focus,textarea:focus{outline:2px solid var(--teal)}
.songlist{max-height:160px;overflow:auto}.songlist button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #ffffff0d;color:#e8f4f2;padding:.45rem;cursor:pointer}
.picked{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}.picked span{background:var(--red);padding:.2rem .55rem;border-radius:20px;font-size:.78rem;cursor:pointer;color:#fff}
.small{font-size:.85rem;color:var(--teal);margin-top:.6rem}
.about p{margin-bottom:1rem;max-width:70ch;color:#e8f4f2!important}
footer{text-align:center;color:var(--mu);font-size:.78rem;padding:1.5rem 1rem 0}

/* Compact player — sits above Netlify badge */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:.4rem;flex-wrap:nowrap;
  padding:.4rem .65rem calc(.4rem + env(safe-area-inset-bottom,0px));
  background:#0c1316f5;border-top:2px solid var(--red);backdrop-filter:blur(10px);
  box-shadow:0 -4px 24px #000a;max-height:64px;
}
.player[hidden]{display:none!important}
.player img{width:40px;height:40px;object-fit:cover;background:#000;border-radius:4px;flex-shrink:0}
.p-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.p-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem;color:#fff!important}
.p-meta small{color:var(--mu)!important;font-size:.68rem}
.player button{background:none;border:0;color:#e8f4f2;font-size:1.15rem;cursor:pointer;padding:.2rem;flex-shrink:0}
#p-play{color:var(--teal);font-size:1.4rem}
#p-seek{position:absolute;left:0;right:0;bottom:100%;margin:0;height:3px;padding:0;border:0;accent-color:var(--red);background:transparent;width:100%}
.player{flex-wrap:wrap}
#p-seek{flex-basis:100%;order:-1;position:static;height:3px;margin:0 0 .15rem}

/* Hide / dodge Netlify badge under player */
a[href*="netlify.com"]:has(img),#netlify-badge,.nf-badge{opacity:.35;transform:scale(.85);transform-origin:bottom right}

.ost-card{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;margin:0 0 1.1rem;padding:.9rem 1rem;background:linear-gradient(135deg,#ff2a3d33,#00f0d022);border:1px solid var(--teal);border-radius:8px;text-decoration:none;color:#e8f4f2!important;transition:.2s}
.ost-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px #00f0d033;border-color:var(--red)}
.ost-badge{font:700 .68rem/1 monospace;letter-spacing:.12em;color:#05080a;background:var(--teal);padding:.35rem .5rem;border-radius:3px}
.ost-body{flex:1;min-width:160px}.ost-body b{display:block;font-size:1rem;color:#fff!important}.ost-body small{color:var(--mu)!important}
.ost-go{font-weight:800;color:var(--teal)!important;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.vgrid .embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:6px}
.vgrid .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vert .embed{aspect-ratio:9/16}
.yr-tag{display:inline-block;background:var(--red);color:#fff!important;font:700 .68rem/1 monospace;padding:.2rem .35rem;border-radius:3px;margin-right:.3rem}

/* Netlify free badge — tuck away so it never covers UI */
body > div:has(> a[href*="netlify"]),a[href="https://www.netlify.com"]{display:none!important}
.panel-link{display:block;text-decoration:none;color:inherit}

.yt-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#000;cursor:pointer;border-radius:6px;overflow:hidden}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block}
.yt-facade .yt-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:#ff2a3dee;color:#fff;font-size:1.6rem;display:grid;place-items:center;box-shadow:0 0 24px #ff2a3d88;pointer-events:none}
.yt-facade:hover .yt-play{transform:scale(1.06);background:var(--red)}
.vgrid video{background:#000 center/cover no-repeat}
.vgrid video[poster]{object-fit:contain}

.sp-all{margin:0 0 .8rem}.sp-all iframe,.sp-alb iframe{width:100%;border:0;border-radius:12px;display:block;background:#121212}
.sp-alb{padding:.6rem 1rem}
.trk .pv{background:transparent;border:1px solid var(--teal);color:var(--teal);border-radius:999px;font-size:.72rem;padding:.25rem .55rem;cursor:pointer;margin-right:.4rem;white-space:nowrap}
.trk .pv.on{background:var(--teal);color:#000}
