@font-face{font-family:Creepster;src:url(fonts/creepster.woff2) format("woff2");font-display:swap}
@font-face{font-family:Cinzel;src:url(fonts/cinzel.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#07040c;--ink:#efe6d8;--muted:#b9a9c9;--orange:#ff7a1a;--orange2:#ffb347;--blood:#b3000f;--purple:#3b1460;--glass:rgba(18,8,28,.62)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-text-size-adjust:100%}
body{line-height:1.55}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}

/* language visibility for toggle label */
body.lang-de .on-en,body.lang-en .on-de{display:none}

/* ===== Background & atmosphere ===== */
.bg{position:fixed;inset:0;background:url(img/hero.webp) center bottom/cover no-repeat;z-index:-5;filter:saturate(1.1) brightness(.85);animation:breathe 14s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.04)}}
.moonglow{position:fixed;inset:0;z-index:-4;pointer-events:none;background:radial-gradient(circle at 70% 62%,rgba(255,150,60,.28),transparent 32%);animation:moonflicker 7s infinite}
@keyframes moonflicker{0%,100%{opacity:.9}43%{opacity:.6}45%{opacity:1}47%{opacity:.5}49%{opacity:.95}80%{opacity:.75}}
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.85) 100%)}
.fog{position:fixed;left:-50%;width:200%;height:45vh;bottom:-5vh;z-index:-2;pointer-events:none;opacity:.55;
  background:radial-gradient(ellipse at 20% 60%,rgba(200,190,230,.35),transparent 55%),radial-gradient(ellipse at 60% 50%,rgba(170,160,210,.3),transparent 50%),radial-gradient(ellipse at 90% 70%,rgba(210,200,240,.3),transparent 55%);
  filter:blur(18px);animation:drift 38s linear infinite}
.fog2{bottom:15vh;opacity:.3;animation-duration:55s;animation-direction:reverse}
.fog3{top:-10vh;bottom:auto;opacity:.18;animation-duration:70s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(25%)}}
#bats,#wisps{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.bat{position:absolute;width:34px;height:16px;color:#0b0410;animation:fly linear forwards}
.bat svg{width:100%;height:100%;animation:flap .22s ease-in-out infinite alternate;transform-origin:center}
@keyframes flap{to{transform:scaleY(.35)}}
@keyframes fly{from{transform:translate(var(--x0),var(--y0)) scale(var(--s))}to{transform:translate(var(--x1),var(--y1)) scale(var(--s))}}
.wisp{position:absolute;width:70px;opacity:0;filter:blur(1px) drop-shadow(0 0 12px rgba(200,220,255,.7));animation:wisp ease-in-out forwards}
@keyframes wisp{0%{opacity:0;transform:translate(0,0) scale(.8)}20%{opacity:.55}80%{opacity:.4}100%{opacity:0;transform:translate(var(--dx),-120px) scale(1.15)}}

/* ===== Gate ===== */
#gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#1c0b2b 0%,#050208 70%);transition:opacity 1.2s,visibility 1.2s;padding:24px}
#gate.gone{opacity:0;visibility:hidden}
.gate-fog{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 80%,rgba(180,160,220,.18),transparent 50%),radial-gradient(ellipse at 75% 85%,rgba(180,160,220,.15),transparent 45%);filter:blur(20px);animation:drift 30s linear infinite alternate}
.gate-inner{position:relative;text-align:center;max-width:520px}
.gate-lang{position:absolute;top:-56px;right:0;display:flex;gap:6px}
.lang-btn{padding:6px 12px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:.8rem;letter-spacing:.1em;opacity:.6}
.lang-btn.active{opacity:1;border-color:var(--orange);color:var(--orange2)}
.gate-pumpkin{width:110px;filter:drop-shadow(0 0 30px rgba(255,120,20,.7));animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{filter:drop-shadow(0 0 55px rgba(255,120,20,.95));transform:scale(1.04)}}
.gate-title{font-family:Creepster,cursive;font-weight:400;font-size:clamp(2.6rem,11vw,4.6rem);color:var(--orange);text-shadow:0 0 18px rgba(255,90,0,.6),0 4px 0 #3a0700;margin:12px 0 6px;letter-spacing:.03em}
.gate-sub{color:var(--muted);margin-bottom:28px}
.enter-btn{position:relative;font-family:Cinzel,serif;font-weight:700;font-size:1.3rem;letter-spacing:.25em;text-transform:uppercase;padding:18px 48px;border-radius:4px;color:#fff;
  background:linear-gradient(180deg,#8c0010,#4a0008);border:1px solid #ff3b3b55;box-shadow:0 0 30px rgba(200,0,20,.5),inset 0 0 20px rgba(0,0,0,.5);animation:throb 1.6s ease-in-out infinite}
.enter-btn:hover{background:linear-gradient(180deg,#b00014,#5a000a)}
@keyframes throb{50%{box-shadow:0 0 55px rgba(255,0,30,.75),inset 0 0 20px rgba(0,0,0,.5)}}
.quiet-btn{display:block;margin:18px auto 0;color:var(--muted);text-decoration:underline;font-size:.9rem;opacity:.75}
.gate-warn{margin-top:26px;font-size:.78rem;color:#c98;opacity:.8}
/* v6: "Are you really sure?" confirmation */
.gate-confirm[hidden],.confirm-reply[hidden]{display:none}
/* v7: "No" answer + small "without scares" link on the single gate screen */
.confirm-reply{margin:14px 0 0;font-family:Creepster,cursive;font-size:clamp(1.3rem,5.4vw,1.8rem);color:#d9b8ff;text-shadow:0 0 14px rgba(150,60,255,.55)}
.confirm-reply.show{animation:replyIn .7s ease-out both}
@keyframes replyIn{0%{opacity:0;transform:translateY(6px) scale(.96);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
.gate-confirm .gate-warn{margin-top:22px}
.quiet-link{display:block;margin:8px auto 0;color:var(--muted);text-decoration:underline;font-size:.78rem;opacity:.7;padding:6px 10px}
.quiet-link:hover{opacity:1}
.gate-confirm{display:flex;flex-direction:column;align-items:center;animation:confirmIn .6s ease-out both}
@keyframes confirmIn{0%{opacity:0;transform:scale(.92);filter:blur(6px)}60%{opacity:1;filter:blur(0)}75%{transform:scale(1.02)}100%{transform:none}}
.confirm-eyes{display:flex;gap:26px;margin-bottom:10px;animation:blink 4.2s infinite}
.confirm-eyes i{width:30px;height:14px;border-radius:50%;background:radial-gradient(circle at 50% 55%,#fff6c0 0 18%,#ffb000 30%,#ff3b00 62%,transparent 70%);filter:drop-shadow(0 0 14px rgba(255,90,0,.95))}
.confirm-eyes i:first-child{transform:rotate(12deg)}.confirm-eyes i:last-child{transform:rotate(-12deg)}
@keyframes blink{0%,44%,50%,100%{transform:scaleY(1)}47%{transform:scaleY(.08)}}
.confirm-q{font-family:Creepster,cursive;font-weight:400;font-size:clamp(2rem,8.5vw,3.4rem);line-height:1.12;color:var(--orange);text-shadow:0 0 18px rgba(255,90,0,.6),0 4px 0 #3a0700;margin:6px 0 30px;letter-spacing:.03em;animation:shiver 3s ease-in-out infinite}
@keyframes shiver{0%,92%,100%{transform:none}94%{transform:translate(-2px,1px) skewX(-2deg)}96%{transform:translate(2px,-1px) skewX(2deg)}}
.enter-btn.confirm-yes{font-size:1.1rem;letter-spacing:.14em;padding:16px 32px;max-width:100%}
.confirm-no{margin-top:20px;font-size:1rem;opacity:.85}
.gate-confirm button:focus-visible{outline:2px solid var(--orange2);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.gate-confirm,.confirm-eyes,.confirm-q,.confirm-reply.show{animation:none}}

/* ===== Controls ===== */
.controls{position:fixed;top:max(10px,env(safe-area-inset-top));right:10px;z-index:50;display:flex;gap:8px}
.ctrl{display:flex;align-items:center;gap:6px;height:40px;min-width:40px;padding:0 12px;border-radius:999px;background:rgba(10,4,16,.7);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);font-size:.85rem;font-weight:600;letter-spacing:.06em}
.ctrl[aria-pressed="false"] .lbl{opacity:.6}
.ctrl .ico{font-size:1rem}

/* ===== v3: single-screen layout (no page scroll) ===== */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{min-height:0;height:100vh;height:100dvh}
main{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;display:grid;font-size:var(--fs,14px);line-height:1.4;
  padding:max(.6em,env(safe-area-inset-top)) max(1em,env(safe-area-inset-right)) max(.6em,env(safe-area-inset-bottom)) max(1em,env(safe-area-inset-left))}
.treewrap{position:relative;overflow:hidden;container-type:size;pointer-events:none;min-height:0;min-width:0}
.scene{position:absolute;left:50%;bottom:0;height:min(100cqh,100cqw/.768*1.25);aspect-ratio:842/1096;transform:translateX(-50%);z-index:1}
.head{grid-area:head;position:relative;z-index:4;text-align:center;min-width:0}
.info{grid-area:info;position:relative;z-index:3;display:flex;flex-direction:column;gap:.6em;min-width:0;min-height:0}
.info>*{flex-shrink:0}

/* Landscape / desktop: tree left, info right */
@media (min-aspect-ratio:5/4){
  main{grid-template-columns:min(calc(100dvh*.74),46vw) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;
       grid-template-areas:"tree ." "tree head" "tree info" "tree .";column-gap:2.2em;padding-top:max(3.6em,env(safe-area-inset-top))}
  .treewrap{grid-area:tree;margin:calc(-1*max(3.6em,env(safe-area-inset-top))) 0 calc(-1*max(.6em,env(safe-area-inset-bottom))) calc(-1*max(1em,env(safe-area-inset-left)))}
  .scene{height:min(100cqh,100cqw/.768)}
  .head,.info{max-width:62em;width:100%;justify-self:center}
}
/* Portrait / narrow: head on top of the tree crown, info below */
@media (max-aspect-ratio:5/4){
  main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head" "tree" "info";row-gap:.4em;padding-top:max(52px,env(safe-area-inset-top))}
  .treewrap{grid-row:1/3;grid-column:1;margin:calc(-1*max(52px,env(safe-area-inset-top))) calc(-1*max(1em,env(safe-area-inset-right))) 0 calc(-1*max(1em,env(safe-area-inset-left)))}
  .head{grid-area:head}.info{grid-area:info;max-width:40em;width:100%;justify-self:center}
  .scene{--sh:min(100cqh,100cqw/.768*1.25);height:var(--sh);bottom:calc(var(--sh)*-.12)}
}

.kicker{font-family:Cinzel,serif;letter-spacing:.38em;text-transform:uppercase;font-size:.72em;color:var(--orange2);opacity:.9}
.title{font-weight:400;margin-top:.3em;line-height:.95}
.title span{display:block}
.t1{font-family:Cinzel,serif;font-weight:700;font-size:1.35em;letter-spacing:.12em;color:#e8dcff;text-shadow:0 0 12px rgba(160,100,255,.6)}
.t2{font-family:Creepster,cursive;font-size:4.6em;color:var(--orange);margin:.05em 0;
  text-shadow:0 0 .25em rgba(255,90,0,.75),0 0 .6em rgba(255,60,0,.35),0 .06em 0 #3a0700;animation:flicker 6s infinite}
.t3{font-family:Creepster,cursive;font-size:2.3em;color:#e9e2f5;letter-spacing:.08em;text-shadow:0 0 16px rgba(190,160,255,.6),0 4px 0 #1b0830}
@keyframes flicker{0%,100%{opacity:1}31%{opacity:1}32%{opacity:.35}33%{opacity:1}34%{opacity:.6}35%{opacity:1}72%{opacity:1}73%{opacity:.5}74%{opacity:1}}
.tagline{font-family:Cinzel,serif;font-weight:700;font-size:.78em;letter-spacing:.16em;text-transform:uppercase;color:var(--orange2);margin-top:.5em;text-shadow:0 0 10px rgba(0,0,0,.9),0 0 18px rgba(255,120,30,.35)}

.candles{position:absolute;left:6%;bottom:3%;display:flex;align-items:flex-end;gap:16px;height:86px;transform:scale(.8);transform-origin:left bottom;z-index:3}
.candle{position:relative;width:16px;height:56px;border-radius:4px 4px 2px 2px;background:linear-gradient(90deg,#d8cdb6,#f6efdf 45%,#bcae92)}
.candle.c2{height:76px}.candle.c3{height:44px}
.flame{position:absolute;left:50%;bottom:100%;width:12px;height:24px;margin-left:-6px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 80%,#fff 0 15%,#ffd36b 35%,#ff7a1a 70%,transparent 72%);
  box-shadow:0 0 22px 8px rgba(255,150,40,.45);animation:flame .12s ease-in-out infinite alternate;transform-origin:50% 100%}
.c2 .flame{animation-duration:.15s}.c3 .flame{animation-duration:.1s}
@keyframes flame{from{transform:scale(1,1) rotate(-2deg)}to{transform:scale(.92,1.08) rotate(2deg)}}


.card{background:var(--glass);border:1px solid rgba(255,140,60,.18);border-radius:.9em;padding:.7em 1em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.55)}
.invite{font-size:.95em;line-height:1.45}
.facts{display:grid;grid-template-columns:1fr 1fr 1.7fr;gap:.6em}
.fact,.countdown-card{text-align:center;display:flex;flex-direction:column;justify-content:center}
.fact-ico{width:1.8em;height:1.8em;color:var(--orange);align-self:center}
.fact h2,.countdown-card h2,.lineup h2{font-family:Cinzel,serif;font-size:.72em;letter-spacing:.26em;text-transform:uppercase;color:var(--orange2);margin:.25em 0}
.fact .big{font-family:Cinzel,serif;font-weight:700;font-size:1em;line-height:1.25}
.fact p:not(.big){color:var(--muted);font-size:.9em}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.4em}
.countdown div{background:rgba(0,0,0,.45);border:1px solid rgba(179,0,15,.45);border-radius:.6em;padding:.35em .2em}
.countdown b{display:block;font-family:Creepster,cursive;font-weight:400;font-size:2em;color:#ff3b2f;text-shadow:0 0 14px rgba(255,0,0,.55);line-height:1}
.countdown span{font-size:.64em;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lineup{text-align:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.3em .8em}
.lineup ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.5em}
.band{display:inline-block;font-family:Creepster,cursive;font-size:1.45em;padding:.15em .75em;border-radius:999px;color:#f3ecff;
  background:rgba(59,20,96,.55);border:1px solid rgba(190,140,255,.35);text-shadow:0 0 14px rgba(180,120,255,.8)}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.perk{display:flex;gap:.6em;align-items:center;justify-content:center;text-align:left;background:rgba(0,0,0,.4);border-radius:.8em;padding:.45em .7em;border:1px solid rgba(255,255,255,.08)}
.perk span{font-size:1.4em}.perk p{font-size:.82em;color:var(--muted);line-height:1.3}
footer{text-align:center;font-family:Cinzel,serif;font-size:.68em;letter-spacing:.2em;color:#8a7b9a}

/* compact portrait */
@media (max-aspect-ratio:5/4){
  .facts{grid-template-columns:1fr 1fr}
  .countdown-card{grid-column:1/-1;flex-direction:row;align-items:center;gap:.6em;padding:.45em .7em}
  .countdown-card h2{flex:0 0 5.5em;text-align:left;line-height:1.3;letter-spacing:.14em}
  .countdown{flex:1}
  .fact{padding:.5em .6em}.fact-ico{display:none}
  .perk{flex-direction:column;gap:.1em;text-align:center;padding:.35em .4em}
  .perk span{font-size:1.15em}.perk p{font-size:.76em}
  .lineup h2{width:100%;margin:0}
  .band{font-size:1.3em}
  .info{gap:.5em}
  .t1{font-size:1.15em}.t2{font-size:3.7em}.t3{font-size:1.9em}.kicker{font-size:.8em}.tagline{font-size:.8em;letter-spacing:.1em}
  .invite{font-size:1em;line-height:1.4;padding:.55em .8em}
  .fact .big{font-size:1.05em}.fact p:not(.big){font-size:.95em}
  .countdown b{font-size:1.7em}.countdown span{font-size:.72em}.countdown div{padding:.25em .1em}
  .perk p{font-size:.85em}
}
@media (max-aspect-ratio:5/4) and (max-width:560px){
  .controls{gap:6px;right:8px;top:max(8px,env(safe-area-inset-top))}
  .ctrl{height:36px;min-width:36px;padding:0 10px}
}
@media (max-width:560px){.ctrl .lbl{display:none}}

/* ===== Tree scene with nailed poster ===== */
.tree{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 14px rgba(255,140,60,.18)) drop-shadow(0 18px 30px rgba(0,0,0,.8));animation:treesway 9s ease-in-out infinite;transform-origin:50% 100%}
@keyframes treesway{50%{transform:rotate(.5deg) skewX(-.4deg)}}
.nailed{position:absolute;left:39.5%;top:56%;width:24%;aspect-ratio:4/5;pointer-events:auto;perspective:600px;z-index:2;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.nailed .paper{position:absolute;inset:0;display:block;transform-origin:50% 3%;animation:paper 4.5s ease-in-out infinite;
  filter:drop-shadow(3px 7px 5px rgba(0,0,0,.75)) drop-shadow(0 0 16px rgba(255,140,40,.25))}
.nailed .paper img{display:block;width:100%;height:100%;border-radius:1px;filter:brightness(.9) contrast(1.04) saturate(.95)}
.nailed .paper::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,transparent 55%,rgba(30,10,0,.45) 100%),linear-gradient(180deg,rgba(255,220,180,.06),rgba(0,0,0,.18));pointer-events:none}
@keyframes paper{0%,100%{transform:rotateX(0) rotate(-1.2deg)}35%{transform:rotateX(9deg) rotate(.6deg) skewX(.8deg)}60%{transform:rotateX(3deg) rotate(-.4deg)}80%{transform:rotateX(12deg) rotate(1deg) skewX(-.6deg)}}
.nailed.gust .paper{animation:paperGust .38s ease-in-out infinite alternate}
@keyframes paperGust{from{transform:rotateX(8deg) rotate(-2.5deg) skewX(2deg)}to{transform:rotateX(38deg) rotate(2.5deg) skewX(-3deg)}}
.nail{position:absolute;top:2.5%;width:9%;aspect-ratio:1;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 30%,#f2f2f2 0 8%,#9a9a9a 22%,#4b4b4b 55%,#1a1a1a 80%);box-shadow:1px 2px 3px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4)}
.nail.n1{left:5%}.nail.n2{right:5%}
.nailed:hover .paper,.nailed:focus-visible .paper{filter:drop-shadow(3px 7px 5px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(255,160,60,.6))}
.nailed:focus-visible{outline:2px dashed var(--orange2);outline-offset:6px}
.tap-hint{position:absolute;left:50%;top:81.5%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(.62rem,1.6vh,.82rem);letter-spacing:.08em;color:#ffcf99;background:rgba(10,4,16,.72);border:1px solid rgba(255,160,60,.35);padding:.3em .8em;border-radius:999px;z-index:3;animation:hint 2.4s ease-in-out infinite}
@media (max-aspect-ratio:5/4){.candles{bottom:27%;left:5%;transform:scale(.6)}}
.tap-hint{z-index:4}
@keyframes hint{50%{opacity:.55}}
/* v6: phones – rim-lit tree (tree-lit.webp via <picture>), bigger poster, glow behind the trunk */
@media (max-aspect-ratio:5/4){
  .scene::before{content:"";position:absolute;left:12%;right:12%;top:36%;bottom:4%;border-radius:50%;background:radial-gradient(ellipse at 50% 55%,rgba(255,120,40,.28),rgba(120,50,200,.16) 45%,transparent 72%);filter:blur(8px);pointer-events:none}
  .tree{filter:drop-shadow(0 14px 22px rgba(0,0,0,.75))}
  .nailed{left:34.5%;top:49%;width:33%}
  .nailed .paper{filter:drop-shadow(3px 7px 6px rgba(0,0,0,.8)) drop-shadow(0 0 18px rgba(255,140,40,.45))}
  .tap-hint{top:77%}
}

/* ===== Leaflets & reader ===== */
#leaflets{position:fixed;inset:0;z-index:85;pointer-events:none;overflow:hidden;perspective:900px}
.leaflet{position:absolute;left:0;top:0;width:var(--w,90px);aspect-ratio:4/5;background:url(assets/poster-sm.jpg) center/cover;border-radius:1px;box-shadow:4px 8px 14px rgba(0,0,0,.6);will-change:transform;backface-visibility:visible}
#reader{position:fixed;inset:0;z-index:88;display:grid;place-items:center;align-content:center;gap:10px;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));background:rgba(5,2,10,.0);transition:background .6s;cursor:zoom-out;perspective:1000px}
#reader[hidden]{display:none}
#reader.dim{background:rgba(5,2,10,.66)}
.reader-card{position:relative;width:min(92vw,calc((100svh - 70px)*.8),720px);will-change:transform}
.reader-card{background:url(assets/poster-sm.jpg) center/cover;border-radius:2px} /* v6: small poster (already cached) shows even if the big one is still loading */
.reader-card img{display:block;width:100%;height:auto;border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.85),0 0 40px rgba(255,120,30,.25)}
#reader.flutter .reader-card img{animation:flutter 1.6s ease-in-out infinite}
@keyframes flutter{0%,100%{transform:rotate(-.6deg) rotateX(0)}50%{transform:rotate(.6deg) rotateX(4deg)}}
.reader-bar{position:absolute;left:0;right:0;bottom:-8px;height:3px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;opacity:0}
.reader-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--orange),#ff3b2f);transform-origin:left;transform:scaleX(0)}
#reader.timed .reader-bar{opacity:1}
#reader.timed .reader-bar i{animation:bar var(--hold,5s) linear forwards}
@keyframes bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.reader-hint{font-size:.8rem;letter-spacing:.1em;color:#d8c8e8;opacity:0;transition:opacity .4s}
#reader.manual .reader-hint{opacity:.8}

/* ===== Jump scare (transparent cut-outs, no frames) ===== */
#scare{position:fixed;inset:0;z-index:90;display:none;place-items:center;overflow:hidden;
  background:radial-gradient(ellipse at 50% 55%,rgba(40,0,6,.55) 0%,rgba(4,0,2,.9) 70%,rgba(0,0,0,.97) 100%);backdrop-filter:blur(2px) saturate(.6);-webkit-backdrop-filter:blur(2px) saturate(.6)}
#scare.on{display:grid}
#scare img{grid-area:1/1;width:min(100vw,95svh*.75);height:auto;max-height:100svh;object-fit:contain;background:transparent;border:0;outline:0;
  filter:drop-shadow(0 0 28px rgba(200,0,20,.45))}
#scare.on img{animation:lunge .5s cubic-bezier(.2,1.6,.4,1) forwards,shake .09s linear .1s 10}
@keyframes lunge{from{transform:scale(.25);opacity:0;filter:brightness(2.4) drop-shadow(0 0 28px rgba(200,0,20,.45))}60%{opacity:1}to{transform:scale(1.25);opacity:1;filter:brightness(1) drop-shadow(0 0 28px rgba(200,0,20,.45))}}
@keyframes shake{0%{translate:0 0}25%{translate:-9px 6px}50%{translate:8px -7px}75%{translate:-6px -5px}100%{translate:0 0}}
.scare-flash{position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse at center,rgba(255,60,30,.85),rgba(120,0,0,.6) 70%);mix-blend-mode:screen;opacity:0;pointer-events:none}
#scare.on .scare-flash{animation:flash .45s steps(2) 1}
@keyframes flash{0%{opacity:.9}40%{opacity:0}60%{opacity:.5}100%{opacity:0}}
.scare-blood{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(150,0,0,.55) 100%);opacity:0}
#scare.on .scare-blood{animation:bloodpulse .3s ease-in-out infinite alternate}
@keyframes bloodpulse{to{opacity:1}}
#scare.out{animation:fadeout .35s forwards}
@keyframes fadeout{to{opacity:0}}
.mini-ghost{position:fixed;z-index:80;width:120px;pointer-events:none;filter:drop-shadow(0 0 18px rgba(220,235,255,.9));animation:peek 2.6s ease-in-out forwards}
@keyframes peek{0%{opacity:0;transform:translate(0,40px) scale(.7)}25%{opacity:.85}70%{opacity:.75}100%{opacity:0;transform:translate(var(--dx),-80px) scale(1.1)}}
@media (prefers-reduced-motion:reduce){#scare.on img{animation:lunge .5s ease-out forwards}.bg,.tree,.nailed .paper,#reader.flutter .reader-card img{animation:none}}
/* short portrait phones (e.g. iPhone SE 375x667): smaller title, more room for the text */
@media (max-aspect-ratio:5/4) and (max-height:740px){
  .t1{font-size:1.05em}.t2{font-size:3.2em}.t3{font-size:1.65em}.title{margin-top:.15em}.tagline{margin-top:.3em}
  .info{gap:.4em}.facts{gap:.4em}.card{padding:.45em .7em}
}

/* v4: iOS sound hint */
.sound-hint{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:95;font:600 15px/1 Inter,system-ui,sans-serif;color:#fff3e0;background:rgba(120,30,10,.92);border:1px solid rgba(255,170,80,.7);border-radius:999px;padding:12px 18px;box-shadow:0 0 22px rgba(255,110,30,.55);cursor:pointer;white-space:nowrap;animation:hintPulse 1.6s ease-in-out infinite}
.sound-hint[hidden]{display:none}
@keyframes hintPulse{0%,100%{box-shadow:0 0 14px rgba(255,110,30,.4)}50%{box-shadow:0 0 28px rgba(255,130,40,.8)}}

/* v5: countdown frozen at 13 s – subtle eerie flicker */
.countdown.frozen #cdS{animation:cdFlicker 4.3s steps(1,end) infinite}
.countdown.frozen div:last-child{border-color:rgba(255,40,30,.75)}
@keyframes cdFlicker{0%,100%{opacity:1;text-shadow:0 0 14px rgba(255,0,0,.55)}61%{opacity:.35}62%{opacity:1}63%{opacity:.55;text-shadow:0 0 22px rgba(255,0,0,.9)}64%{opacity:1}88%{opacity:.7}89%{opacity:1}}
@media (prefers-reduced-motion:reduce){.countdown.frozen #cdS{animation:none}}

/* v6: visit counter + votes (lives in the footer, so the one-screen fit sizes it with everything else) */
footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35em 1.1em}
footer .credit{margin:0}
.stats{display:flex;align-items:center;gap:.45em;font:500 calc(var(--fs,16px)*.78)/1 Inter,system-ui,sans-serif;letter-spacing:0;color:#bfb0cf;opacity:.55;transition:opacity .6s}
.stats.ready{opacity:1}
.stat{display:inline-flex;align-items:baseline;gap:.3em;padding:.3em .2em;white-space:nowrap}
.stat b,.vote b{font-weight:700;color:#e9dcf5;font-variant-numeric:tabular-nums}
.stat small{font-size:.82em;color:#8a7b9a;letter-spacing:.04em}
.stats .si{font-size:1.05em;filter:saturate(.8)}
.stat .si{filter:drop-shadow(0 0 4px rgba(255,90,40,.55))}
.vote{display:inline-flex;align-items:center;gap:.35em;min-height:max(2em,26px);padding:.25em .75em;border-radius:999px;cursor:pointer;
      font:inherit;color:inherit;background:rgba(0,0,0,.45);border:1px solid rgba(179,0,15,.45);transition:border-color .2s,box-shadow .2s,background .2s,transform .12s;
      -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.vote:hover{border-color:rgba(255,120,40,.7)}
.vote:active{transform:scale(.94)}
.vote:focus-visible{outline:2px solid var(--orange2,#ffa64d);outline-offset:2px}
.vote[aria-pressed="true"]{background:rgba(120,30,10,.65);border-color:rgba(255,150,60,.9);box-shadow:0 0 12px rgba(255,100,30,.55),inset 0 0 8px rgba(255,80,20,.25)}
.vote[aria-pressed="true"] b{color:#fff3e0}
.vote.pop .si{animation:votePop .45s ease-out}
@keyframes votePop{0%{transform:scale(1)}40%{transform:scale(1.45) rotate(-12deg)}100%{transform:scale(1)}}
body.hint-on .info{padding-bottom:62px} /* keep the counter clear of the fixed "Tap for sound" hint */
@media (prefers-reduced-motion:reduce){.vote.pop .si{animation:none}}
.club-link{display:inline-flex;align-items:center;gap:.4em;min-height:max(2em,26px);padding:.25em .85em;border-radius:.45em;text-decoration:none;white-space:nowrap;
  font:600 calc(var(--fs,16px)*.74)/1 Cinzel,serif;letter-spacing:.08em;color:#ffcf99;background:linear-gradient(180deg,rgba(70,38,18,.85),rgba(38,20,10,.85));
  border:1px solid rgba(255,150,60,.45);box-shadow:0 0 10px rgba(255,100,30,.18);transition:border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.club-link:hover,.club-link:focus-visible{border-color:rgba(255,170,80,.9);box-shadow:0 0 14px rgba(255,110,30,.5);outline:none}
.club-link .si{font-size:1.1em;filter:drop-shadow(0 0 3px rgba(255,90,40,.6))}