@font-face{font-family:'Orbitron';src:url(../assets/fonts/Orbitron.ttf) format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:'Rajdhani';src:url(../assets/fonts/Rajdhani-Medium.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Rajdhani';src:url(../assets/fonts/Rajdhani-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Rajdhani';src:url(../assets/fonts/Rajdhani-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(../assets/fonts/JetBrainsMono.ttf) format('truetype');font-weight:100 800;font-display:swap}
:root{--red:#ff1a2e;--red-hi:#ff5a66;--blood:#8a0010;--bg:#050505;--ink:#f2f2f4;--dim:#9a9a9f;
 --chrome:linear-gradient(180deg,#fff 0%,#e9e9ee 30%,#9c9ca4 48%,#4a4a52 52%,#d8d8de 64%,#fff 80%,#a7a7ae 100%);
 --edge:linear-gradient(180deg,#f4f4f7,#8d8d95 50%,#e6e6ea);
 --cut:14px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:'Rajdhani',system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.red{color:var(--red)}
.tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.tag.light{color:#e2e2e6}
.tag.red,.red{color:var(--red)}
.chrome{background:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#ddd;
 filter:drop-shadow(0 0 1px rgba(255,255,255,.4)) drop-shadow(0 0 10px rgba(255,26,46,.45))}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;height:100%;-webkit-text-fill-color:currentColor;background:none}
.glitch::before{color:rgba(255,26,46,.55);transform:translate(-1.5px,0);clip-path:polygon(0 10%,100% 10%,100% 30%,0 30%,0 64%,100% 64%,100% 70%,0 70%);z-index:-1}
.glitch::after{color:rgba(255,255,255,.35);transform:translate(1.5px,0);clip-path:polygon(0 40%,100% 40%,100% 50%,0 50%,0 82%,100% 82%,100% 88%,0 88%)}
.heart{fill:none;stroke:var(--red);stroke-width:2.2;filter:drop-shadow(0 0 4px var(--red)) drop-shadow(0 0 10px rgba(255,26,46,.6))}
.heart.sm{width:14px;height:12px;vertical-align:-2px}
.redline{display:inline-block;width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--red),transparent);box-shadow:0 0 8px var(--red)}
.kicker{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.24em;color:#ff4d5c;text-align:center;text-shadow:0 0 8px rgba(255,26,46,.6)}

/* ---------- buttons ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:15px;position:relative;isolation:isolate;
 clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));transition:transform .12s,filter .12s;touch-action:manipulation;user-select:none}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:none;filter:brightness(1.25)}
.btn.primary{background:linear-gradient(180deg,#ff3242 0%,#ff1a2e 45%,#b0001a 100%);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35);box-shadow:0 0 30px rgba(255,26,46,.55)}
.btn.ghost{background:var(--edge);color:#f2f2f4}
.btn.ghost::before{content:"";position:absolute;inset:1.5px;z-index:-1;background:#0b0b0d;
 clip-path:polygon(calc(var(--cut) - .6px) 0,100% 0,100% calc(100% - var(--cut) + .6px),calc(100% - var(--cut) + .6px) 100%,0 100%,0 calc(var(--cut) - .6px))}
@media (hover:hover){.btn.primary:hover{filter:brightness(1.12)}.btn.ghost:hover::before{background:#17171a}}

/* ---------- layout: phone full-screen, desktop centred 9:16 ---------- */
#player{position:fixed;inset:0;overflow:hidden;background:#000;container-type:size}
#sides{display:none}
@media (min-aspect-ratio:3/4) and (min-width:700px){
  #sides{display:block;position:fixed;inset:0;overflow:hidden;background:#050505}
  #player{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);height:min(94vh,100vh - 40px);aspect-ratio:9/16;width:auto;
   box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 0 6px #0a0a0a,0 0 0 7px rgba(255,26,46,.55),0 0 80px rgba(255,26,46,.35),0 40px 120px rgba(0,0,0,.9)}
}
.side{position:absolute;top:-40px;bottom:-40px;width:42vw;background-size:cover;filter:blur(9px) brightness(.5) saturate(1.1);transform:scale(1.08)}
.side.l{left:-40px;background-image:var(--img-side-l,url(../assets/img/club_left.jpg));background-position:30% center}
.side.r{right:-40px;background-image:var(--img-side-r,url(../assets/img/club_right.jpg));background-position:center 30%}
.mid{position:absolute;inset:0;background:linear-gradient(90deg,transparent 22%,rgba(5,5,5,.88) 38%,rgba(5,5,5,.88) 62%,transparent 78%)}
.circ{position:absolute;border-radius:50%;border:1.5px solid rgba(255,26,46,.35);box-shadow:0 0 30px rgba(255,26,46,.25),inset 0 0 30px rgba(255,26,46,.15)}
.circ.c1{width:300px;height:300px;left:4vw;top:52vh}.circ.c2{width:180px;height:180px;left:calc(4vw + 60px);top:calc(52vh + 60px);opacity:.6}
.circ.c3{width:340px;height:340px;right:3vw;top:13vh;opacity:.7}
.heart.big{position:absolute;width:56px;height:49px;stroke-width:1.6;right:calc(3vw + 142px);top:calc(13vh + 145px)}
.side-text{position:absolute;bottom:46px;font-family:'Orbitron';font-weight:900;font-size:72px;line-height:1;letter-spacing:.1em;color:transparent;-webkit-text-stroke:1px rgba(230,230,236,.22)}
.side-text.l{left:40px}.side-text.r{right:40px;text-align:right;-webkit-text-stroke-color:rgba(255,26,46,.45)}
.brand{position:absolute;top:22px;left:32px;width:170px;mix-blend-mode:screen}
.hud{position:absolute;top:40%;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.14em;color:#a8a8ae;line-height:1.9}
.hud.hl{left:40px}.hud.hr{right:40px;text-align:right}
.key{display:inline-block;min-width:30px;text-align:center;padding:0 4px;border:1px solid rgba(255,255,255,.35);margin-left:6px}
.key.a{background:var(--red);border-color:var(--red);color:#fff}
@media (max-width:1100px){.side-text,.hud{display:none}}

/* ---------- video stage ---------- */
#stage{position:absolute;inset:0;background:#000}
.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;background:transparent}
.vid.on{opacity:1;z-index:2}
.vid.below{opacity:1;z-index:1}
#fx{position:absolute;inset:0;pointer-events:none;z-index:5}
#fx .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
#fx .noise{position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* glitch transition */
#glitch{position:absolute;inset:0;z-index:40;pointer-events:none;opacity:0}
#glitch i{position:absolute;left:-10%;right:-10%;background:rgba(255,26,46,.4);mix-blend-mode:screen}
#glitch i:nth-child(1){top:12%;height:5%}#glitch i:nth-child(2){top:31%;height:1.5%;background:rgba(255,255,255,.5)}
#glitch i:nth-child(3){top:46%;height:9%}#glitch i:nth-child(4){top:68%;height:2%}#glitch i:nth-child(5){top:83%;height:6%;background:rgba(138,0,16,.8)}
#glitch.go{animation:gl .55s steps(1) forwards}
#glitch.go i{animation:gls .55s steps(4) forwards}
@keyframes gl{0%{opacity:1;background:rgba(255,26,46,.18)}30%{opacity:1;background:transparent}60%{opacity:1;background:rgba(255,26,46,.1)}100%{opacity:0}}
@keyframes gls{0%{transform:translateX(-6%)}25%{transform:translateX(5%)}50%{transform:translateX(-3%) scaleY(.4)}75%{transform:translateX(8%)}100%{transform:translateX(0)}}
#stage.glitching .vid.on{animation:vshake .45s steps(3)}
@keyframes vshake{0%{transform:translateX(6px);filter:saturate(1.6) hue-rotate(-8deg)}50%{transform:translateX(-5px)}100%{transform:none;filter:none}}

/* ---------- top HUD ---------- */
#hudTop{position:absolute;top:calc(16px + env(safe-area-inset-top));left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;z-index:30;pointer-events:none}
.pill{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;padding:6px 10px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.55);text-transform:uppercase}
.pill.paused{color:var(--red-hi);background:rgba(0,0,0,.8);border-color:rgba(255,26,46,.8);margin-left:auto}

/* ---------- screens / overlays ---------- */
.screen,.overlay{position:absolute;inset:0;z-index:20}
.screen .bg{position:absolute;inset:0;background-size:cover}
.screen .shade{position:absolute;inset:0}

/* title */
#title{display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));z-index:25;overflow:hidden}
#title .bg{background-image:var(--img-title,url(../assets/img/dj_crowd.jpg));background-position:center 20%;filter:brightness(.38) saturate(.9) contrast(1.1)}
#title .shade{background:linear-gradient(180deg,rgba(5,5,5,.75) 0%,rgba(5,5,5,.25) 30%,rgba(5,5,5,.45) 48%,rgba(5,5,5,.97) 66%,#050505 100%)}
#title>*:not(.bg):not(.shade){position:relative;z-index:2}
.t-top{display:flex;justify-content:space-between}
.t-logo{flex:1 1 auto;min-height:120px;display:flex;align-items:center;justify-content:center;margin:4px -10px 0;mix-blend-mode:screen}
.t-logo img{width:100%;max-width:440px;max-height:100%;object-fit:contain}
.t-meta{text-align:center;font-size:10.5px;color:#bdbdc2;margin-top:2px}
.t-tease{display:flex;justify-content:center;align-items:center;gap:10px;margin:18px 0 22px;font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 10px #000,0 0 4px #000;white-space:nowrap}
.t-tease i{width:5px;height:5px;background:var(--red);transform:rotate(45deg);box-shadow:0 0 6px var(--red)}
.t-panel{display:flex;flex-direction:column;gap:12px}
.cont{flex-direction:column;gap:0;line-height:1.15}
.cont small{font-family:'Rajdhani';font-weight:600;letter-spacing:.06em;text-transform:none;font-size:13px;color:#bdbdc2}
.eprow-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.eprow{display:flex;gap:9px;margin-top:4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.eprow::-webkit-scrollbar{display:none}
.eprow .ep{flex:0 0 calc((100% - 18px)/3);scroll-snap-align:start}
.ep{position:relative;height:118px;overflow:hidden;border:1px solid rgba(255,255,255,.16);text-align:left;
 clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.ep .th{position:absolute;inset:0;background-size:cover;background-position:center}
.ep .th::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.9))}
.ep .lab{position:absolute;left:8px;right:8px;bottom:8px}
.ep .n{font-family:'Orbitron';font-weight:800;font-size:13px;letter-spacing:.08em}
.ep .t{font-weight:600;font-size:13px;color:#e2e2e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep .prog{position:absolute;left:0;bottom:0;height:3px;background:var(--red);box-shadow:0 0 8px var(--red)}
.ep.done{border-color:rgba(230,230,236,.6)}.ep.done .prog{background:#d8d8de;box-shadow:0 0 6px rgba(255,255,255,.6)}
.ep.cur{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.ep .chip{position:absolute;top:7px;left:7px;font-family:'JetBrains Mono';font-size:8.5px;letter-spacing:.12em;padding:2px 5px;background:rgba(0,0,0,.65);z-index:2}
.ep.locked{border-style:dashed;cursor:default}
.ep.locked .th{filter:grayscale(1) brightness(.28)}
.ep .lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#b5b5ba;z-index:2}
@container (max-height:700px){.ep{height:96px}.t-tease{margin:10px 0 14px}.btn{min-height:54px}}

/* choice */
#choice{z-index:30;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transition:opacity .25s}
#choice.show{opacity:1}
.c-dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 18%,transparent 34%,rgba(5,5,5,.78) 56%,rgba(5,5,5,.96) 72%,#050505 100%),radial-gradient(ellipse 80% 40% at 50% 100%,rgba(138,0,16,.45),transparent 70%)}
.c-ui{position:relative;padding:0 18px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.ring{position:relative;width:88px;height:88px;align-self:center}
.ring svg{position:absolute;inset:0;overflow:visible}
.ring .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Orbitron';font-weight:900;font-size:32px;color:#fff;text-shadow:0 0 10px rgba(255,26,46,.9)}
.ring .num small{font-size:13px;margin-left:2px;margin-top:9px;color:var(--red);text-shadow:none}
.prompt{font-family:'Orbitron';font-weight:900;font-size:33px;line-height:1.08;text-align:center;text-transform:uppercase;letter-spacing:.02em}
#cOpts{display:flex;flex-direction:column;gap:14px}
.choice{--cut:16px;gap:14px;min-height:76px;padding:0 18px;font-family:'Rajdhani';font-weight:700;font-size:23px;letter-spacing:.02em;text-transform:none;justify-content:flex-start;text-align:left}
.choice .k{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-family:'Orbitron';font-weight:900;font-size:20px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.choice .arrow{margin-left:auto;font-family:'Orbitron';font-size:18px;opacity:.85}
.choice.primary .k{background:#0a0a0a;color:var(--red)}
.choice.ghost::before{inset:2px;background:linear-gradient(180deg,#141416,#0a0a0b)}
.choice.ghost .k{background:var(--chrome);color:#111}
.choice.picked{filter:brightness(1.35)}
.bar{height:4px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,var(--blood),var(--red));box-shadow:0 0 10px var(--red)}
.hint{display:flex;justify-content:space-between;align-items:center}
#choice.untimed .ring,#choice.untimed .bar,#choice.untimed #cClock,#choice.untimed #cHint{visibility:hidden}

/* pause */
#pause{z-index:45;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.p-box{width:min(320px,84%);display:flex;flex-direction:column;gap:12px;text-align:center}
.p-title{font-family:'Orbitron';font-weight:900;font-size:34px;text-transform:uppercase;margin-bottom:10px}
.p-hint{margin-top:6px}
#tapGate{z-index:46;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);padding:0 30px}

/* end card */
#endcard{z-index:26;overflow:hidden}
#endcard .bg{background-image:var(--img-end,url(../assets/img/goddess.jpg));background-position:center 8%;filter:brightness(.6) saturate(.95) contrast(1.1)}
#endcard .shade{background:linear-gradient(180deg,rgba(5,5,5,.6) 0%,rgba(5,5,5,.2) 24%,rgba(5,5,5,.7) 42%,rgba(5,5,5,.93) 70%,#050505 100%)}
.e-wrap{position:absolute;inset:0;overflow-y:auto;padding:calc(22px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.e-top{display:flex;justify-content:space-between}
.e-end{text-align:center}
.e-end h1{font-family:'Orbitron';font-weight:900;font-size:34px;line-height:1.08;margin-top:10px;text-transform:uppercase}
.e-stat{margin-top:12px;font-weight:600;font-size:15px;color:#d2d2d6;display:flex;align-items:center;justify-content:center;gap:8px}
.s2{position:relative;padding:18px 16px 16px;border:1px solid rgba(255,26,46,.55);background:linear-gradient(160deg,rgba(138,0,16,.35),rgba(10,10,10,.75));
 clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.s2 .big{font-family:'Orbitron';font-weight:900;font-size:26px;letter-spacing:.04em;text-transform:uppercase;line-height:1.1}
.s2 .rn{color:var(--red);text-shadow:0 0 12px rgba(255,26,46,.8)}
.s2 p{font-weight:500;font-size:16px;color:#d2d2d6;margin-top:6px;line-height:1.25}
.form{margin-top:14px;display:flex;gap:8px}
.form input{flex:1;min-width:0;height:54px;border:1.5px solid rgba(220,220,226,.55);background:rgba(0,0,0,.6);padding:0 14px;font-size:17px;color:#f2f2f4;border-radius:0;outline:none;caret-color:var(--red)}
.form input::placeholder{color:#8a8a90}
.form input:focus{border-color:var(--red);box-shadow:0 0 12px rgba(255,26,46,.4)}
.go{width:auto;min-height:54px;padding:0 16px;font-size:13px}
.fine{margin-top:8px;font-size:8.5px}
.fine.ok{color:var(--red-hi);font-size:10px}
.socials{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.soc{min-height:58px;font-size:13px;letter-spacing:.1em}
.path .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.steps{display:flex;align-items:center}
.st{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:74px}
.st .d{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-family:'Orbitron';font-weight:900;font-size:13px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.st .d.a{background:var(--red);color:#fff}.st .d.b{border:1.5px solid #d9d9de;color:#f2f2f4}
.st .d.e{background:#000;border:1.5px solid var(--red);box-shadow:0 0 12px rgba(255,26,46,.6)}
.st .d.e .heart{width:14px;height:12px}
.st span{font-weight:600;font-size:12px;line-height:1.1;color:#d2d2d6;text-align:center;min-height:2.2em;max-width:74px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ln{align-self:flex-start;margin-top:15px}
.st .d.auto{outline:1px dashed rgba(255,255,255,.5);outline-offset:2px}
.ln{flex:1;height:1px;background:var(--red);box-shadow:0 0 6px var(--red);opacity:.8}

#err{position:absolute;left:16px;right:16px;bottom:16px;z-index:60;padding:12px;border:1px solid var(--red);background:rgba(0,0,0,.85);font-family:'JetBrains Mono';font-size:12px;color:var(--red-hi)}
@media (prefers-reduced-motion:reduce){#glitch.go,#glitch.go i,#stage.glitching .vid.on{animation:none}}

/* sound settings (pause menu) */
.snd{display:flex;gap:10px;margin-top:6px}
.snd-toggle,.snd-more{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.5);font-family:'JetBrains Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#e2e2e6}
.snd-more{flex:0 0 auto;padding:0 14px}
.snd-toggle .x{display:none}
.snd-toggle[aria-pressed="true"]{color:var(--red-hi);border-color:rgba(255,26,46,.7)}
.snd-toggle[aria-pressed="true"] .x{display:inline}.snd-toggle[aria-pressed="true"] .w{display:none}
.mixer{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid rgba(255,26,46,.35);background:rgba(10,0,2,.6);text-align:left}
.mixer label{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#cfcfd4}
.mixer label span{width:62px}
.mixer input[type=range]{flex:1;accent-color:var(--red);height:28px}

/* 3-4 options */
#cOpts.many{gap:10px}
#cOpts.many .choice{min-height:60px;font-size:20px}
#cOpts.many .choice .k{width:36px;height:36px;font-size:17px}
/* choice shown while the video still plays (show_at) */
#choice.live .c-dim{background:linear-gradient(180deg,transparent 0%,transparent 40%,rgba(5,5,5,.75) 62%,rgba(5,5,5,.94) 100%)}
/* locked */
#locked{z-index:44;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.82)}
.lock-p{font-size:16px;color:#d2d2d6;line-height:1.4;margin-bottom:8px}