:root{
  --ink:#0a0303;
  --blood:#b3121b;
  --blood-hi:#ff3b2f;
  --ember:#ff7a2a;
  --bone:#efe2d0;
  --ash:#9a8a80;
  --bar-h:58px;
  --mx:50%;--my:50%;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);color:var(--bone);overflow:hidden;overscroll-behavior:none}
body{font-family:"Special Elite","Courier New",monospace;-webkit-font-smoothing:antialiased;touch-action:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ───────── top bar ───────── */
#bar{position:fixed;inset:0 0 auto 0;height:var(--bar-h);z-index:50;display:flex;align-items:center;gap:12px;padding:0 16px;
  background:linear-gradient(#0a0303ee,#0a030300);}
.brand{display:flex;align-items:center;gap:9px;min-width:0;flex:0 1 auto}
.brand img{width:32px;height:32px;border-radius:50%;border:1px solid #ff3b2f66;box-shadow:0 0 14px #ff3b2f55;object-fit:cover}
.brand .name{font-family:"UnifrakturCook",serif;font-size:22px;letter-spacing:.5px;white-space:nowrap;color:var(--bone);text-shadow:0 0 12px #ff3b2f88}
.brand .tick{font-size:12px;color:var(--ember);border:1px solid #ff7a2a55;padding:2px 6px;white-space:nowrap}
.ca{margin-left:auto;display:flex;align-items:center;gap:8px;max-width:340px;min-width:0;padding:7px 10px;border:1px solid #efe2d033;background:#0a0303aa;font-size:12px}
.ca .lbl{color:var(--blood-hi)}
.ca code{font-family:inherit;color:var(--ash);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ca .cp{color:var(--bone);opacity:.7}
.ca:hover{border-color:#ff3b2f88}
nav{display:flex;align-items:center;gap:8px}
nav .x,nav .mute{width:38px;height:38px;display:grid;place-items:center;border:1px solid #efe2d033;background:#0a0303aa}
nav svg{width:18px;height:18px;fill:var(--bone)}
nav .x:hover,nav .mute:hover{border-color:var(--blood-hi)}
.mute .off{display:none}
body.muted .mute .on{display:none}
body.muted .mute .off{display:block}
.buy{display:inline-grid;place-items:center;height:38px;padding:0 18px;background:var(--blood);color:#fff;font-weight:700;letter-spacing:2px;
  box-shadow:0 0 0 1px #ff3b2f,0 0 22px #b3121b99;animation:throb 1.6s ease-in-out infinite}
.buy:hover{background:var(--blood-hi)}
@keyframes throb{50%{box-shadow:0 0 0 1px #ff3b2f,0 0 36px #ff3b2fcc}}

/* ───────── stage ───────── */
#stage{position:fixed;inset:0;overflow:hidden;background:#000}
.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;
  filter:contrast(1.06) saturate(1.05);animation:flicker 7s infinite}
.vid.show{opacity:1}
@keyframes flicker{0%,100%{filter:contrast(1.06) brightness(1)}48%{filter:contrast(1.06) brightness(1)}49%{filter:contrast(1.2) brightness(.55)}50%{filter:contrast(1.06) brightness(1.05)}51%{filter:brightness(.7)}52%{filter:contrast(1.06) brightness(1)}}
.vid{transform-origin:50% 33%;transition:opacity .45s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.vid.lunge{animation:none;transform:scale(2.7);transition:opacity .45s ease,transform .16s cubic-bezier(.7,0,1,.5);filter:contrast(1.5) saturate(1.4) brightness(1.25)}
#ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;mix-blend-mode:screen;z-index:3}
#ghost.on{opacity:.9}

#fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 35%,#000000c0 85%,#000 100%)}
#grain{position:absolute;inset:0;width:100%;height:100%;opacity:.07;mix-blend-mode:overlay}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(#0000 0 2px,#0000002a 2px 3px);opacity:.6}
.flash{position:absolute;inset:0;background:var(--blood-hi);opacity:0;mix-blend-mode:screen}
.tears i{position:absolute;left:0;right:0;height:0;backdrop-filter:invert(1) hue-rotate(160deg) saturate(3);opacity:0}

#stage.glitch .vid.show{animation:glitch .55s steps(2) 1}
#stage.glitch .tears i{opacity:1;animation:tear .55s steps(3) 1}
#stage.glitch .tears i:nth-child(1){top:14%;height:6%}
#stage.glitch .tears i:nth-child(2){top:41%;height:3%;animation-delay:.08s}
#stage.glitch .tears i:nth-child(3){top:63%;height:9%;animation-delay:.16s}
#stage.glitch .tears i:nth-child(4){top:82%;height:2%;animation-delay:.04s}
@keyframes glitch{
  0%{transform:translate(0) scale(1.02);filter:contrast(1.6) saturate(2.4) hue-rotate(-20deg)}
  25%{transform:translate(-18px,4px) scale(1.04);filter:contrast(2) saturate(0) brightness(1.6)}
  50%{transform:translate(14px,-6px) scale(1.01);filter:contrast(1.4) saturate(3) hue-rotate(25deg)}
  75%{transform:translate(-6px,2px);filter:invert(.9) contrast(2)}
  100%{transform:none;filter:contrast(1.06)}}
@keyframes tear{0%{transform:translateX(-40px)}50%{transform:translateX(60px)}100%{transform:translateX(-10px)}}
#stage.flash .flash{animation:flash .5s ease-out 1}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
#stage.shake{animation:shake .6s cubic-bezier(.36,.07,.19,.97) 1}
@keyframes shake{10%,90%{transform:translate(-3px,2px)}20%,80%{transform:translate(6px,-4px) rotate(.4deg)}30%,50%,70%{transform:translate(-12px,6px) rotate(-.6deg)}40%,60%{transform:translate(12px,-6px)}}

/* ───────── captions ───────── */
#cap{position:absolute;z-index:6;left:clamp(16px,6vw,96px);bottom:clamp(110px,18vh,190px);max-width:min(30vw,420px);pointer-events:none}
#cap .kick{font-size:12px;letter-spacing:3px;color:var(--ember);opacity:0;transition:opacity .5s}
#cap .line{font-family:"UnifrakturCook",serif;font-size:clamp(34px,4.4vw,64px);line-height:1;margin:.25em 0 .3em;color:var(--bone);
  text-shadow:2px 0 0 #ff3b2f99,-2px 0 0 #00e5ff44,0 0 26px #000}
#cap .meme{font-size:clamp(14px,1.3vw,18px);color:var(--ash);opacity:0;transition:opacity .6s;background:#000a;display:inline;padding:2px 6px}
#cap.in .kick,#cap.in .meme.ready{opacity:1}
#cap .line .c{opacity:0;display:inline-block;transform:translateY(6px) scale(1.3);filter:blur(4px);transition:all .25s}
#cap .line .c.on{opacity:1;transform:none;filter:none}
#cap .line .w{display:inline-block;white-space:nowrap}
#cap .line .sp{display:inline-block;width:.28em}

/* ───────── hint + candles ───────── */
#hint{position:absolute;z-index:6;left:50%;bottom:74px;transform:translateX(-50%);text-align:center;font-size:12px;letter-spacing:3px;
  color:var(--ash);pointer-events:none;transition:opacity .6s}
#hint .s{display:block;font-size:10px;color:var(--blood-hi);margin-top:3px;animation:breathe 2.4s infinite}
#hint.gone{opacity:0}
@keyframes breathe{50%{opacity:.3}}
#candles{position:absolute;z-index:6;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:16px}
#candles button{position:relative;width:12px;height:34px;padding:0}
#candles button::before{content:"";position:absolute;bottom:0;left:2px;width:8px;height:20px;background:#1a0b0b;border:1px solid #efe2d044;border-bottom:0}
#candles button::after{content:"";position:absolute;left:3px;bottom:21px;width:6px;height:11px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%,#fff3c4,#ff7a2a 55%,#ff3b2f00 72%);opacity:0;transition:opacity .3s}
#candles button.lit::after{opacity:1;animation:flame .25s infinite alternate}
#candles button.now::before{border-color:var(--blood-hi);box-shadow:0 0 12px #ff3b2f}
@keyframes flame{to{transform:scale(.88,1.08) translateX(.5px)}}

/* ───────── final altar ───────── */
#final{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:calc(var(--bar-h) + 10px) 16px 80px;
  background:radial-gradient(ellipse at 50% 50%,#0a0303aa,#0a0303ee 70%);opacity:0;pointer-events:none;transition:opacity .8s}
#final.on{opacity:1;pointer-events:auto}
.altar{width:min(560px,100%);text-align:center;border:1px solid #ff3b2f55;background:#0a0303d9;padding:28px 26px 22px;
  box-shadow:0 0 60px #b3121b44,inset 0 0 40px #b3121b22;position:relative}
.altar::before,.altar::after{content:"✠";position:absolute;top:10px;color:var(--blood-hi);opacity:.6}
.altar::before{left:14px}.altar::after{right:14px}
.altar .kick{font-size:11px;letter-spacing:3px;color:var(--ember)}
.altar h1{font-family:"UnifrakturCook",serif;font-size:clamp(42px,8vw,72px);line-height:1;margin:.15em 0;text-shadow:0 0 24px #ff3b2f99}
.altar .sub{color:var(--ash);font-size:14px}
.rites{list-style:none;text-align:left;margin:20px 0;display:grid;gap:10px}
.rites li{display:flex;gap:12px;padding:10px 12px;border-left:2px solid var(--blood);background:#ffffff06;font-size:15px;line-height:1.35}
.rites b{font-family:"UnifrakturCook",serif;color:var(--blood-hi);font-size:20px;min-width:36px}
.rites em{font-style:normal;color:var(--bone);border-bottom:1px dashed #ff7a2a88}
.acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.buy.big{height:48px;padding:0 26px;font-size:16px}
.ghostbtn{display:inline-grid;place-items:center;height:48px;padding:0 20px;border:1px solid #efe2d055}
.ghostbtn:hover{border-color:var(--blood-hi)}
.again{margin-top:16px;font-size:12px;color:var(--ash);letter-spacing:2px}
.again:hover{color:var(--bone)}

#toast{position:absolute;z-index:60;left:50%;top:calc(var(--bar-h) + 12px);transform:translate(-50%,-8px);padding:9px 14px;background:#0a0303ee;
  border:1px solid var(--blood);font-size:13px;opacity:0;transition:all .3s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ───────── gate ───────── */
#gate{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;transition:opacity 1.2s;cursor:none}
#gate.out{opacity:0;pointer-events:none}
#gate .reveal{position:absolute;inset:0;background:url(assets/s1.jpg) center/cover;filter:brightness(.8) contrast(1.1);
  -webkit-mask:radial-gradient(circle 170px at var(--mx) var(--my),#000 0,#0008 45%,transparent 100%);
          mask:radial-gradient(circle 170px at var(--mx) var(--my),#000 0,#0008 45%,transparent 100%)}
.gatebox{position:relative;text-align:center;padding:16px;cursor:default}
.gatebox h1{font-family:"UnifrakturCook",serif;font-size:clamp(46px,9vw,110px);line-height:1;text-shadow:0 0 30px #ff3b2fbb,3px 0 0 #b3121b;animation:jit 4s infinite}
@keyframes jit{0%,92%,100%{transform:none}93%{transform:translate(-4px,1px) skewX(6deg)}95%{transform:translate(3px,-1px)}}
.gatebox .tag{color:var(--ash);letter-spacing:3px;font-size:13px;margin:.6em 0 1.6em}
#enter{padding:16px 32px;border:1px solid var(--blood-hi);background:#b3121b22;letter-spacing:4px;font-size:16px;cursor:pointer;
  box-shadow:0 0 30px #b3121b66;transition:all .25s}
#enter:hover{background:var(--blood);box-shadow:0 0 60px #ff3b2faa;letter-spacing:6px}
.gatebox .warn{margin-top:18px;font-size:12px;color:var(--ember)}
.gatebox .fine{margin-top:6px;font-size:11px;color:#6d605a}
.flame{width:14px;height:40px;margin:0 auto 14px;position:relative}
.flame i{position:absolute;left:0;bottom:0;width:14px;height:26px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 75%,#fff6d0,#ff7a2a 50%,#ff3b2f00 72%);animation:flame .18s infinite alternate;filter:blur(.4px)}
.flame::after{content:"";position:absolute;left:5px;bottom:-30px;width:4px;height:30px;background:#2a1010}

/* ───────── mobile ───────── */
@media (max-width:760px){
  :root{--bar-h:auto}
  #bar{height:auto;flex-wrap:wrap;padding:10px 12px 8px;gap:8px}
  .brand .name{font-size:18px}
  .brand .tick{display:none}
  nav{margin-left:auto}
  nav .x,nav .mute,.buy{height:34px}
  nav .x,nav .mute{width:34px}
  .buy{padding:0 14px}
  .ca{order:3;flex:1 0 100%;max-width:none;margin:0;padding:6px 10px}
  #cap{left:16px;right:16px;max-width:none;bottom:112px}
  #hint{bottom:66px;width:100%}
  #toast{top:100px}
  .altar{padding:22px 16px 16px}
  .rites li{font-size:13px}
  #final{padding-top:104px}
}
@media (prefers-reduced-motion:reduce){
  #stage.shake,#stage.glitch .vid.show,#stage.flash .flash,.vid{animation:none!important}
  #stage.glitch .tears i{display:none}
}