/* Cursed Tape — Halls-of-Horror/template-cursed-tape.php.
   The TV art (tape-tv.png, 1000×1052, a TV-VCR) has a transparent screen at
   x 141–867, y 121–672; .tape-screen sits a little bigger, behind the bezel. */
:root{--tape-cream:#e9e0c8;--tape-muted:#b5a98f;--tape-red:#a3352b;--tape-red-hover:#c2443a;--tape-line:#a0855a4d;--tape-mono:"Courier New",monospace;--tape-serif:Georgia,"Times New Roman",serif}
body.default-body{background:#0b0907}
#tape,#tape *,#tape *::before,#tape *::after{box-sizing:border-box}
#tape [hidden]{display:none!important}
#tape button,#tape a{-webkit-tap-highlight-color:transparent}
#tape button:focus-visible,#tape a:focus-visible{outline:2px solid #e2b773;outline-offset:4px}
.tape{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;color:var(--tape-cream);background:#0b0907;font-family:Poppins,Arial,sans-serif}
.tape-room{position:absolute;inset:0;z-index:-3;background:#1a1410 url('../../assets/halls-of-horror/002/tape-room.jpg') center 62%/cover no-repeat;filter:brightness(.85) saturate(.85)}
/* The room photo is already dark: keep the shade light so the room still shows. */
.tape-shade{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 42% 46%,transparent 35%,#05040399 92%),linear-gradient(0deg,#05040399,transparent 35%)}
.tape-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* STAGE — TV left, panel right; one column on phones (see breakpoints). */
.tape-stage{min-height:100svh;max-width:1480px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,410px);align-items:center;gap:clamp(28px,4vw,64px);padding:calc(var(--navbar-height,60px) + 76px) 5vw 52px}

/* TV */
/* Nearly square, so it is sized by the screen height too: never taller than the space under the navbar. */
.tape-set{position:relative;width:100%;max-width:min(640px,max(280px,calc((100svh - var(--navbar-height,60px) - 140px) / 1.052)));justify-self:center;aspect-ratio:1000/1052}
.tape-tv{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 34px 40px #000d)}
.tape-screen{position:absolute;z-index:1;left:13.6%;top:11%;width:73.7%;height:53.5%;overflow:hidden;border-radius:4%;background:#040504}
.tape-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .35s}
.tape.is-playing .tape-screen video{opacity:1}
/* YouTube tape (Video link is a YouTube link) — takes no taps, so no skipping or pausing,
   except a tape watched before (.is-free): then YouTube's own controls work. */
.tape-yt{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .35s}
.tape.is-free .tape-yt{pointer-events:auto}
/* Start screen: the TV itself is a PLAY button too. */
.tape.is-intro.is-ready .tape-set{cursor:pointer}
.tape-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tape.is-youtube .tape-screen video{display:none}
.tape.is-youtube.is-playing .tape-yt{opacity:1}
.tape-static{position:absolute;inset:-20%;opacity:.42;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:screen;transition:opacity .3s;pointer-events:none}
.tape.is-playing .tape-static{opacity:0}
.tape.is-glitch .tape-static{opacity:.6;transition:none}
.tape-scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0,#0000 2px,#00000038 3px),radial-gradient(ellipse at center,transparent 55%,#000a 100%)}
.tape-screen-text{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:8%;font:bold clamp(16px,2.4vw,30px)/1.3 var(--tape-mono);letter-spacing:.18em;text-align:center;color:#d9e6cf;text-shadow:0 0 10px #b6ffb04d,2px 0 #ff00001f,-2px 0 #00ffff1f;pointer-events:none}
.tape-screen-button{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);z-index:2;min-height:44px;padding:10px 18px;border:1px solid #e9e0c880;background:#090807d9;color:var(--tape-cream);font:bold 16px/1.2 var(--tape-mono);letter-spacing:.08em;white-space:nowrap;cursor:pointer}
#tapeResumeButton{bottom:auto;top:50%;transform:translate(-50%,-50%)}

/* DISTRACTIONS — three scares, one at a time, in random order (cursed-tape.js). */
/* Ghost — desktop: standing in the doorway of the room photo, behind the TV and
   the card; cursed-tape.js measures the doorway (--ghost-*). Phones: see breakpoints. */
.tape-ghost{position:absolute;z-index:-1;left:var(--ghost-left,60%);top:var(--ghost-top,25%);height:var(--ghost-h,42%);width:auto;max-width:none;opacity:0;pointer-events:none;filter:brightness(.62) contrast(1.08) drop-shadow(0 20px 30px #000c)}
.tape-ghost.is-on{opacity:.9}
/* Flying ghosts — drift through the room behind the TV and the card, one screen high. */
.tape-fly{position:absolute;z-index:-1;left:0;top:0;width:100%;height:100svh;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .5s}
.tape-fly.is-on{opacity:.7}
.tape-fly-ghost{position:absolute;left:0;top:0;height:100%;width:auto;max-width:none;opacity:0;transform-origin:50% 16%;will-change:transform,opacity;filter:grayscale(.9) brightness(.6) contrast(1.13);-webkit-mask-image:linear-gradient(#000 70%,#000000eb 77%,#00000080 82%,#00000029 87%,#00000008 93%,#0000 98%);mask-image:linear-gradient(#000 70%,#000000eb 77%,#00000080 82%,#00000029 87%,#00000008 93%,#0000 98%)}
.tape-fly-ghost+.tape-fly-ghost{filter:grayscale(.85) brightness(.75) contrast(1.18)}
/* Crawling ghost (crawl-ghost-1…4.png, 768×1152, hands at the bottom of the picture) —
   over everything, she crawls toward the player from a little way off, growing as
   she comes. cursed-tape.js swaps .is-frame between the 4 frames to make the crawl. */
.tape-crawl{position:fixed;z-index:10001;left:50%;bottom:0;height:min(84svh,calc(92vw * 1.5));aspect-ratio:768/1152;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-6%) scale(.5);transform-origin:50% 100%;filter:brightness(.88) contrast(1.06) drop-shadow(0 -10px 40px #000)}
.tape-crawl.is-on{visibility:visible}
.tape-crawl-frame{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0}
.tape-crawl-frame.is-frame{opacity:1}

/* PANEL */
.tape-card{position:relative;padding:30px 30px 28px;border:1px solid var(--tape-line);background:linear-gradient(160deg,#18120ef0,#0b0908f5);box-shadow:0 24px 50px #000b,inset 0 0 0 4px #0806054d}
/* Opening card sits on the cassette (002/tape.png, ::before) under a black layer
   (::after); on desktop the cassette is turned 90° to stand up in the tall card.
   isolation keeps both layers behind the text but above the card's own background. */
#tapeIntro{isolation:isolate;overflow:hidden;background:#000;text-shadow:0 1px 3px #000,0 0 14px #000}
#tapeIntro::before,#tapeIntro::after{content:'';position:absolute;inset:0;pointer-events:none}
#tapeIntro::before{z-index:-2;background:url('../../assets/halls-of-horror/002/tape.png') center/contain no-repeat;opacity:.45}
#tapeIntro::after{z-index:-1;background:#0009}
@media (min-width:901px){#tapeIntro::before{transform:rotate(90deg) scale(2.2)}}
#tapeIntro .tape-copy{color:#efe6d0}
.tape-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:16px/1.5 var(--tape-mono);letter-spacing:.14em;color:#c8b48c;text-transform:uppercase}
.tape-eyebrow-line{display:inline-block;width:26px;height:1px;background:#c8b48c}
.tape-rec{display:inline-block;width:9px;height:9px;border-radius:50%;background:#d23a2c;box-shadow:0 0 10px #d23a2c99}
#tape h1{margin:0 0 18px;font:normal clamp(32px,3.7vw,53px)/1 var(--tape-serif);letter-spacing:-.02em;color:#f0e7d0;text-shadow:0 4px 30px #000a}
#tape #tapeTitle{font-size:36px}
#tape h2{margin:0 0 18px;font:normal clamp(23px,2.2vw,30px)/1.3 var(--tape-serif);color:#f0e7d0;outline:none}
.tape-copy{margin:0 0 24px;font-size:18px;line-height:1.75;color:var(--tape-muted)}
.tape-load{margin:10px 0 0;min-height:1.6em;font-size:16px;line-height:1.6;color:#d6aa7c}
.tape-load a{color:#f0d3a6;text-decoration:underline;text-underline-offset:4px}
.tape-label{margin:-6px 0 10px;font:16px var(--tape-mono);letter-spacing:.06em;color:#a99a7c}
.tape-damaged{margin:-6px 0 16px;font-size:16px;color:#d6aa7c}
.tape-watch-line{margin:0;font:italic clamp(24px,2.4vw,32px)/1.3 var(--tape-serif);color:#efe4cb}

/* Buttons — own look for this page (Halls of Horror red), not tgv-btn. */
.tape-button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:52px;padding:14px 22px;border:1px solid #c0905a;background:linear-gradient(#7a2019,#470f0d);color:#f3e6ca;font:bold 18px/1.2 var(--tape-mono);letter-spacing:.06em;text-decoration:none;cursor:pointer;transition:filter .2s,transform .2s}
.tape-button:disabled{opacity:.5;cursor:default}
.tape-button span{font-weight:normal}
.tape-text-button{font:16px var(--tape-mono);color:#c2b394;text-decoration:underline;text-underline-offset:5px;padding:8px}

.tape-answers{display:grid;gap:10px}
.tape-answer{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:11px 14px;border:1px solid #a0855a59;background:#0e0b09b3;color:var(--tape-cream);font:16px/1.4 Poppins,Arial,sans-serif;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.tape-answer:disabled{cursor:default}
.tape-answer-letter{flex:0 0 28px;height:28px;display:grid;place-items:center;border:1px solid #a0855a80;font:bold 16px var(--tape-mono);color:#d2bd93}
.tape-answer.is-picked{border-color:#d9b980;background:#3a2a1ab3}
.tape-answer.is-correct{border-color:#9fbf86;background:#2b3a24c2}
.tape-answer.is-correct .tape-answer-letter{border-color:#9fbf86;color:#cfe5bd}
.tape-answer.is-wrong{border-color:#c4554a;background:#4a1714c2}
.tape-answer.is-wrong .tape-answer-letter{border-color:#c4554a;color:#f0b3aa}
.tape-answers.is-locked .tape-answer:not(.is-correct):not(.is-wrong){opacity:.5}
.tape-feedback{min-height:1.6em;margin:14px 0 0;font-size:16px;line-height:1.6;color:#d8c49c;white-space:pre-line}
#tapeNext{margin-top:12px}

.tape-score{margin:0 0 14px;font:22px var(--tape-mono);color:#e0cfa8}
.tape-result-body{white-space:pre-line}
.tape-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:6px}

/* ANIMATION — only for people who haven't asked for less motion. */
@media (prefers-reduced-motion:no-preference){
  .tape-static{animation:tape-noise .45s steps(5) infinite}
  .tape-ghost.is-on{animation:tape-ghost var(--tape-ghost-ms,1100ms) steps(1,end) both}
  .tape-crawl.is-on{animation:tape-crawl var(--tape-crawl-ms,1700ms) both}
  .tape.is-glitch .tape-set{animation:tape-jolt .32s steps(2,end)}
  .tape-rec{animation:tape-blink 1.2s steps(1,end) infinite}
}
@media (prefers-reduced-motion:no-preference) and (max-width:900px){
  .tape-ghost.is-on{animation:tape-ghost-peek var(--tape-ghost-ms,3000ms) ease-in-out both}
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){
  .tape-ghost.is-on{transform:translateX(40%)}
}
@media (prefers-reduced-motion:reduce){
  .tape-crawl{transform:translate(-50%,4%) scale(.9);transition:opacity .4s}
  .tape-crawl.is-on{opacity:1}
}
@keyframes tape-noise{0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(5%,-5%)}60%{transform:translate(-3%,-7%)}80%{transform:translate(7%,3%)}100%{transform:translate(0,0)}}
/* Crawling ghost: fades in a little way off, crawls closer (faster as she nears),
   lunges right up to the screen, then is gone. */
@keyframes tape-crawl{
  0%{opacity:0;transform:translate(-50%,-6%) scale(.5);animation-timing-function:linear}
  8%{opacity:1;transform:translate(-50%,-5%) scale(.54);animation-timing-function:cubic-bezier(.4,0,.8,.6)}
  78%{opacity:1;transform:translate(-50%,6%) scale(1.02);animation-timing-function:cubic-bezier(.3,0,.6,1)}
  90%{opacity:1;transform:translate(-50%,16%) scale(1.3);animation-timing-function:ease-in}
  100%{opacity:0;transform:translate(-50%,20%) scale(1.38)}
}
/* Doorway ghost: flickers on and off like a bad signal. */
@keyframes tape-ghost{
  0%{opacity:0}
  4%{opacity:.8}
  8%{opacity:.2}
  12%{opacity:.9}
  84%{opacity:.9}
  88%{opacity:.15}
  92%{opacity:.75}
  100%{opacity:0}
}
/* Phones: slides in slowly from the right edge, waits, slides back out. */
@keyframes tape-ghost-peek{
  0%{transform:translateX(105%)}
  35%,65%{transform:translateX(40%)}
  100%{transform:translateX(105%)}
}
@keyframes tape-jolt{0%{transform:translate(-1.2%,.6%)}50%{transform:translate(1%,-.8%)}100%{transform:none}}
@keyframes tape-blink{0%{opacity:1}50%{opacity:.2}}

/* Desktop ONLY hover */
@media (hover:hover) and (pointer:fine){
  .tape-button:not(:disabled):hover{filter:brightness(1.25);transform:translateY(-2px)}
  .tape-answer:not(:disabled):hover{border-color:#d9b980;background:#2a1f15c7}
  .tape-text-button:hover{color:#efdcb5}
}

/* BREAKPOINTS */
@media (max-width:900px){
  .tape-stage{grid-template-columns:minmax(0,1fr);align-content:start;gap:22px;padding:calc(var(--navbar-height,60px) + 62px) 16px 36px}
  .tape-set{max-width:min(520px,max(240px,calc((100svh - var(--navbar-height,60px) - 360px) / 1.052)))}
  /* Ghost level with the TV, hidden past the right edge until she slides in (over the TV). */
  .tape-ghost{z-index:3;left:auto;right:0;top:var(--ghost-top,90px);height:var(--ghost-h,40svh);transform:translateX(105%)}
  .tape-ghost.is-on{opacity:.95}
  .tape-card{padding:22px 18px 20px}
  #tape h1{font-size:clamp(27px,7.2vw,38px)}
  #tape h2{font-size:22px}
  .tape-copy{font-size:16px}
  .tape-button{width:100%;font-size:16px;gap:16px}
  .tape-actions{align-items:stretch;text-align:center}
}
/* PHONES — the TV and the whole question card fit one screen, no scrolling:
   the TV shrinks with the screen height, the card's text and buttons are compact,
   and the fixed Back link only shows on the opening screen (the result card has its own). */
@media (max-width:600px){
  .tape-stage{gap:10px;padding:calc(var(--navbar-height,60px) + 58px) 12px 20px}
  .tape:not(.is-intro) .hoh-back{display:none}
  .tape:not(.is-intro) .tape-stage{padding-top:calc(var(--navbar-height,60px) + 8px)}
  .tape-set{max-width:none;width:min(100%,max(200px,calc((100svh - var(--navbar-height,60px) - 330px) / 1.052)))}
  .tape-card{padding:14px 14px 12px}
  .tape-eyebrow{margin:0 0 8px;font-size:12px;gap:8px}
  #tape h1,#tape #tapeTitle{margin:0 0 10px;font-size:24px}
  #tape h2{margin:0 0 10px;font-size:17px;line-height:1.35}
  .tape-copy{margin:0 0 14px;font-size:14px;line-height:1.6}
  .tape-load{font-size:13px;margin-top:8px}
  .tape-label,.tape-damaged{margin:-4px 0 8px;font-size:13px}
  .tape-watch-line{font-size:20px}
  .tape-answers{gap:6px}
  .tape-answer{min-height:40px;padding:7px 10px;gap:10px;font-size:14px;line-height:1.35}
  .tape-answer-letter{flex-basis:24px;height:24px;font-size:13px}
  .tape-feedback{min-height:0;margin-top:8px;font-size:13px}
  .tape-feedback:empty{display:none}
  #tapeNext{margin-top:8px}
  .tape-button{min-height:44px;padding:10px 16px;font-size:14px}
  .tape-score{margin-bottom:8px;font-size:18px}
  .tape-actions{gap:8px}
  .tape-text-button{font-size:13px}
  .tape-screen-text{font-size:14px}
  .tape-screen-button{min-height:38px;padding:7px 10px;font-size:13px}
  .tape-room{background-position:42% center}
}