/* XZAN — retro horror menu. The stage is a fixed 1600x900 canvas scaled to fit the window. */
:root {
  --bg: #000;
  --ink: #ecebf2;
  --dim: #8d8a99;
  --blood: #c4060b;
  --rgb-a: #ffe600; /* yellow fringe, like the video */
  --rgb-b: #2b3bff; /* blue fringe */
  --font: 'Pirata One', 'UnifrakturCook', serif;
  --mono: 'VT323', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
body { color: var(--ink); font-family: var(--font); cursor: crosshair; }

#viewport { position: fixed; inset: 0; background: #000; }
#stage {
  /* --fit is set by game.js: centers the stage and scales it to the window */
  --fit: translate(-50%, -50%);
  position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px;
  overflow: hidden; background: #050407;
  transform-origin: center center; transform: var(--fit);
  animation: jitter 7s infinite steps(1);
}
#stage.no-glitch { animation: none; }

button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
button:focus-visible { outline: none; }

/* ---------- Persistent sprites ---------- */
.blood {
  position: absolute; left: -10px; top: -6px; width: 1620px; z-index: 6;
  pointer-events: none; transform-origin: top center;
  animation: ooze 6s ease-in-out infinite;
}
.sprite {
  position: absolute; z-index: 4; pointer-events: none; opacity: 0;
  transition: left .7s cubic-bezier(.7,0,.3,1), top .7s cubic-bezier(.7,0,.3,1),
              width .7s cubic-bezier(.7,0,.3,1), opacity .25s steps(3);
}
#logo   { left: 490px; top: 140px; width: 620px; z-index: 7; }
#devil  { left: 160px; top: 110px; width: 220px; }
#figure { left: 930px; top: 190px; width: 584px; }
.rgb { animation: shake 3.3s infinite steps(1); }

/* Intro sequence states (set on #stage via data-intro) */
#stage[data-intro="1"] #devil  { opacity: 1; }
#stage[data-intro="2"] #devil,
#stage[data-intro="2"] #figure { opacity: 1; }
#stage[data-intro="2"] #logo   { opacity: 1; }

/* Per-screen sprite layout */
#stage[data-screen="menu"] #logo     { opacity: 1; left: 120px; top: 22px; width: 470px; }
#stage[data-screen="menu"] #figure   { opacity: 1; }
#stage:is([data-screen="difficulty"], [data-screen="settings"], [data-screen="quit"]) #logo
  { opacity: 1; left: 585px; top: 30px; width: 430px; }

/* ---------- Screens ---------- */
.screen { position: absolute; inset: 0; z-index: 5; display: none; }
#stage[data-screen="boot"]       #screen-boot,
#stage[data-screen="menu"]       #screen-menu,
#stage[data-screen="difficulty"] #screen-difficulty,
#stage[data-screen="settings"]   #screen-settings,
#stage[data-screen="quit"]       #screen-quit,
#stage[data-screen="noescape"]   #screen-noescape,
#stage[data-screen="video"]      #screen-video { display: block; }
#stage[data-screen="boot"] .blood,
#stage[data-screen="noescape"] .blood { opacity: 0; }
#stage[data-screen="video"] .blood,
#stage[data-screen="video"] .sprite { display: none; }

/* RGB-split, slightly melted text */
.item, .heading, .press-start, .noescape, .back {
  text-shadow: -3px 0 var(--rgb-a), 3px 0 var(--rgb-b), 0 0 18px rgba(255,255,255,.25);
}

.menu { position: absolute; display: flex; flex-direction: column; }
.menu .item {
  position: relative; display: block; font-size: 92px; line-height: 1.22;
  letter-spacing: 1px; white-space: nowrap; transition: color .1s steps(2), transform .1s steps(2);
}
.menu-left { left: 78px; top: 470px; align-items: flex-start; }
.menu-left .item.active { color: #fff; transform: translateX(46px); }
.menu-left .item.active::before { content: '->'; position: absolute; right: 100%; margin-right: 18px; }

.menu-center { left: 0; right: 0; top: 548px; align-items: center; }
.menu-center .item { font-size: 76px; line-height: 1.24; }
.menu-center .item::before, .menu-center .item::after {
  content: ''; display: inline-block; width: 0; overflow: hidden; vertical-align: top;
}
.menu-center .item.active::before { content: '->'; width: auto; margin-right: 18px; }
.menu-center .item.active::after  { content: '<-'; width: auto; margin-left: 18px; }
.item.active { animation: twitch .9s infinite steps(1); }
#screen-settings .menu-center { top: 540px; }
#screen-settings .menu-center .item { font-size: 60px; }
.item .val { color: var(--blood); text-shadow: -3px 0 #ff7a00, 3px 0 #5a0000; }

.heading {
  position: absolute; left: 0; right: 0; top: 452px; margin: 0;
  text-align: center; font-weight: 400; font-size: 82px; letter-spacing: 1px;
}
.legal {
  position: absolute; left: 0; right: 0; top: 862px; display: flex; justify-content: center; gap: 70px;
  font-family: var(--mono); font-size: 20px; color: var(--dim); letter-spacing: 1px;
}
.back {
  position: absolute; left: 60px; bottom: 40px; font-size: 40px; color: var(--dim);
}
.back:hover, .back.active { color: var(--ink); }

.blob { position: absolute; top: 762px; width: 64px; image-rendering: pixelated; animation: throb 1.2s infinite steps(2); }
.blob-l { left: 352px; }
.blob-r { left: 1188px; animation-delay: .6s; }

/* Boot */
#screen-boot { padding: 70px 80px; font-family: var(--mono); }
.boot-line { margin: 0 0 8px; font-size: 34px; color: #d8d6e0; letter-spacing: 2px; }
.boot-line.dim { color: var(--dim); }
.press-start {
  position: absolute; left: 0; right: 0; top: 600px; text-align: center;
  font-size: 84px; animation: blink 1.1s infinite steps(1);
}

/* Quit gag */
.noescape {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
  font-size: 110px; color: var(--blood); text-shadow: -4px 0 #ff7a00, 4px 0 #300;
  animation: twitch .35s infinite steps(1);
}

/* Next video */
#screen-video { background: #000; }
#next-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-missing { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.video-missing[hidden] { display: none; }
.video-missing .heading { position: static; }
.video-missing .hint { font-family: var(--mono); font-size: 34px; color: var(--dim); margin: 0 0 30px; }
.video-missing .item { font-size: 56px; }
.video-missing .item:hover { color: #fff; }

/* ---------- Effects ---------- */
#static { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 20; display: none; image-rendering: pixelated; }
#static.on { display: block; }
.fx { position: absolute; inset: 0; pointer-events: none; }
.scanlines {
  z-index: 21;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.32) 2px 4px);
  mix-blend-mode: multiply;
}
#stage.no-scanlines .scanlines { display: none; }
.vignette { z-index: 22; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.75) 100%); }
.flicker { z-index: 23; background: #fff; opacity: 0; animation: flicker 5s infinite steps(1); }
#stage.no-glitch .flicker, #stage.no-glitch .rgb, #stage.no-glitch .item.active { animation: none; }

/* Clickable logo on the main menu opens the minigame */
#stage[data-screen="menu"] #logo { pointer-events: auto; cursor: pointer; }
#stage[data-screen="menu"] #logo:hover { filter: drop-shadow(0 0 14px rgba(255,30,0,.85)) brightness(1.15); }

/* Minigame */
#screen-flappy { z-index: 8; background: #000; cursor: pointer; }
#stage[data-screen="flappy"] #screen-flappy { display: block; }
#flappy { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.fl-score {
  position: absolute; left: 0; right: 0; top: 36px; text-align: center; pointer-events: none;
  font-size: 130px; line-height: 1; color: #fff;
  text-shadow: -4px 0 var(--rgb-a), 4px 0 var(--rgb-b), 0 6px 0 #000, 0 0 24px rgba(255,60,0,.6);
}
.fl-panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; padding-bottom: 80px;
}
.fl-panel[hidden] { display: none; }
.fl-panel .heading { position: static; font-size: 120px; }
.fl-panel .hint { margin: 0 0 20px; font-family: var(--mono); font-size: 44px; color: #f3e6e0; letter-spacing: 2px; text-shadow: 0 3px 0 #000; }
#fl-ready .hint { animation: blink 1.1s infinite steps(1); }
.fl-panel .menu { position: static; pointer-events: auto; }
.fl-panel .menu .item { font-size: 76px; }
#screen-flappy .back { z-index: 2; }
#fl-blood {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)) saturate(1.3); /* wet, sitting on the glass */
}
#screen-flappy.shot { animation: recoil .45s cubic-bezier(.2,.9,.3,1); }
@keyframes recoil {
  0%   { transform: translate(0,0) scale(1); }
  10%  { transform: translate(-18px,12px) scale(1.04) rotate(-.6deg); }
  25%  { transform: translate(14px,-8px) scale(1.02) rotate(.4deg); }
  45%  { transform: translate(-6px,4px) scale(1.01); }
  100% { transform: translate(0,0) scale(1); }
}
/* "Game Over" is secretly clickable */
.fl-panel .fl-title { pointer-events: auto; cursor: pointer; }
.fl-panel .fl-title:hover { animation: twitch .25s infinite steps(1); color: #ffdede; text-shadow: -6px 0 #ff0040, 6px 0 #00e5ff, 0 0 24px rgba(255,0,0,.6); }

/* Clickable centered logo (difficulty / settings / quit) opens HELLMAN */
#stage:not(.no-pac):is([data-screen="difficulty"], [data-screen="settings"], [data-screen="quit"]) #logo { pointer-events: auto; cursor: pointer; }
#stage:not(.no-pac):is([data-screen="difficulty"], [data-screen="settings"], [data-screen="quit"]) #logo:hover {
  filter: drop-shadow(0 0 14px rgba(255,30,0,.85)) brightness(1.15);
}
#stage[data-screen="pacman"] #screen-pacman { display: block; }
#screen-pacman { z-index: 8; background: #000; }
#pacman { position: absolute; inset: 0; width: 100%; height: 100%; }
#pac-over { background: rgba(0,0,0,.62); }

/* Clickable figure on the main menu opens the gallery */
#stage[data-screen="menu"] #figure { pointer-events: auto; cursor: pointer; z-index: 6; } /* above the menu layer */
#stage[data-screen="menu"] #figure:hover { filter: drop-shadow(0 0 16px rgba(255,30,0,.85)) brightness(1.15); }

/* Gallery */
#stage[data-screen="gallery"] #screen-gallery { display: block; }
#screen-gallery { z-index: 7; }
#pentagram { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#pentagram .trace {
  fill: none; stroke: #8f0000; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
}
#pentagram .trace.inner { stroke: #c40c0c; }
#pentagram .pool { fill: #8f0000; transform-box: fill-box; transform-origin: center; transform: scale(0); }
/* A drip is a line that runs down the page, led by a round droplet */
#pentagram .drip-line {
  fill: none; stroke: #8f0000; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
}
#pentagram .drip-head { fill: #a30707; opacity: 0; }
#screen-gallery.traced .trace     { animation: trace var(--dur) var(--ease, cubic-bezier(.45,.05,.55,.95)) var(--delay) forwards; }
#screen-gallery.traced .pool      { animation: pool .5s cubic-bezier(.3,1.6,.5,1) var(--delay) forwards; }
#screen-gallery.traced .drip-line { animation: trace var(--dur) cubic-bezier(.45,.1,.75,1) var(--delay) forwards; }
#screen-gallery.traced .drip-head { animation: fall var(--dur) cubic-bezier(.45,.1,.75,1) var(--delay) forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes pool  { to { transform: scale(1); } }
@keyframes fall  {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 1; transform: translateY(var(--fall)); }
}

.gframe {
  position: absolute; width: 170px; height: 170px; margin: -85px 0 0 -85px; padding: 0;
  border: 3px solid #4a0000; background: #0b0606; overflow: hidden; cursor: pointer;
  box-shadow: 0 0 0 1px #000, 0 0 26px rgba(160,0,0,.45), inset 0 0 30px rgba(0,0,0,.9);
  /* hidden (and not hoverable) until gallery.js reveals it as its corner is made */
  opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity .08s linear, transform .3s cubic-bezier(.3,1.8,.5,1), box-shadow .2s;
}
.gframe.shown { opacity: 1; transform: scale(1); pointer-events: auto; }
.gframe.shown:hover, .gframe.shown.active {
  transform: scale(1.06);
  box-shadow: 0 0 0 1px #000, 0 0 40px rgba(255,20,0,.8), inset 0 0 20px rgba(0,0,0,.7);
  animation: twitch .3s infinite steps(1);
}
.gframe img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gframe .placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 30px; letter-spacing: 3px; color: #8d7c7c;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 40%, #241010, #070303 75%);
}
.gframe .placeholder::after {
  content: ''; position: absolute; inset: 14px; border: 1px dashed rgba(180,40,40,.35);
}
.gallery-title {
  position: absolute; left: 80px; top: 150px; margin: 0; font-weight: 400; font-size: 92px;
  text-shadow: -3px 0 var(--rgb-a), 3px 0 var(--rgb-b), 0 0 18px rgba(255,255,255,.25);
}

/* VHS tape screen */
#stage[data-screen="tape"] #screen-tape { display: block; }
#screen-tape { z-index: 8; background: #03040c; cursor: pointer; }
#tape { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* Video that flashes on and off over the tape (toggled by flappy.js) */
#tape-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000;
  visibility: hidden; filter: contrast(1.35) saturate(1.4) brightness(1.1);
}
#tape-video.on { visibility: visible; }
.tape-osd {
  position: absolute; inset: 0; pointer-events: none;
  font-family: var(--mono); font-size: 58px; color: #fff; letter-spacing: 3px;
  text-shadow: -3px 0 #f0f, 3px 0 #0ff, 0 0 12px rgba(255,255,255,.55);
}
.tape-play    { position: absolute; left: 80px; top: 60px; }
.tape-date    { position: absolute; left: 80px; bottom: 70px; line-height: 1; }
.tape-counter { position: absolute; right: 90px; bottom: 70px; }
.tape-hint {
  position: absolute; left: 0; right: 0; bottom: 30px; margin: 0; text-align: center;
  font-family: var(--mono); font-size: 30px; color: rgba(255,255,255,.45); letter-spacing: 4px;
  animation: blink 1.4s infinite steps(1);
}

/* VHS melt after quitting (drawn by game.js) */
#melt {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 19; display: none;
  image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(-5px 0 rgba(255,40,0,.55)) drop-shadow(5px 0 rgba(0,90,255,.55));
}
#melt.on { display: block; }
.vhs-osd {
  position: absolute; inset: 0; z-index: 24; pointer-events: none;
  font-family: var(--mono); font-size: 64px; color: #fff; letter-spacing: 3px;
  text-shadow: -3px 0 #f0f, 3px 0 #0ff, 0 0 10px rgba(255,255,255,.6);
}
.vhs-osd[hidden] { display: none; }
.osd-rew { position: absolute; left: 70px; top: 60px; animation: blink 1s infinite steps(1); }
.osd-sp  { position: absolute; right: 80px; bottom: 60px; }
#stage.vhs { animation: vhs-warp .9s infinite steps(6); filter: url(#vhs-warp) saturate(1.8) contrast(1.3) blur(.6px); }
@keyframes vhs-warp {
  0%   { transform: var(--fit) skewX(0deg); }
  20%  { transform: var(--fit) translateX(-12px) skewX(3deg) scaleY(1.02); }
  40%  { transform: var(--fit) translateX(8px) skewX(-2deg); }
  60%  { transform: var(--fit) translate(-4px, 6px); }
  80%  { transform: var(--fit) translateX(14px) skewX(4deg) scaleY(.98); }
  100% { transform: var(--fit); }
}

/* Hard cut glitch (added briefly by JS) */
#stage.glitching { animation: tear .18s steps(2) 2; filter: contrast(1.4) saturate(1.6); }
#stage.crt-off > * { animation: crt-off .55s cubic-bezier(.8,0,.2,1) forwards; }

@keyframes jitter {
  0%, 100% { transform: var(--fit) translate(0,0); }
  31%      { transform: var(--fit) translate(2px,0); }
  32%      { transform: var(--fit) translate(-3px,1px); }
  33%      { transform: var(--fit) translate(0,0); }
  71%      { transform: var(--fit) translate(-2px,0); }
  72%      { transform: var(--fit) translate(0,0); }
}
@keyframes tear {
  0%   { transform: var(--fit) translate(-14px,3px) skewX(4deg); }
  50%  { transform: var(--fit) translate(10px,-2px) skewX(-3deg); }
  100% { transform: var(--fit); }
}
@keyframes shake {
  0%, 100% { translate: 0 0; } 20% { translate: 1px 0; } 21% { translate: -2px 0; } 22% { translate: 0 0; }
  64% { translate: 0 1px; } 65% { translate: 2px -1px; } 66% { translate: 0 0; }
}
@keyframes twitch {
  0%, 100% { translate: 0 0; } 40% { translate: 2px 0; } 45% { translate: -2px 1px; } 50% { translate: 0 0; }
}
@keyframes ooze { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.07); } }
@keyframes throb { 0% { opacity: 1; } 50% { opacity: .55; } }
@keyframes blink { 0% { opacity: 1; } 55% { opacity: 0; } }
@keyframes flicker { 0%, 100% { opacity: 0; } 47% { opacity: .04; } 48% { opacity: 0; } 83% { opacity: .06; } 84% { opacity: 0; } }
@keyframes crt-off {
  0%   { transform: scale(1,1); filter: brightness(1); }
  60%  { transform: scale(1,.004); filter: brightness(4); }
  100% { transform: scale(0,.004); filter: brightness(8); }
}

@media (prefers-reduced-motion: reduce) {
  #stage, .rgb, .item.active, .blood, .blob, .flicker { animation: none !important; }
}

/* =====================================================================
   MOBILE: portrait stage, 900 wide and as tall as the phone (game.js adds .mobile).
   Positions are for a 900x1600 design; --dy centers it in taller screens.
   ===================================================================== */
#stage.mobile .blood { width: 920px; }

/* sprites: intro, then per screen */
#stage.mobile #devil  { left: 70px; top: calc(170px + var(--dy, 0px)); width: 230px; }
#stage.mobile #logo   { left: 150px; top: calc(360px + var(--dy, 0px)); width: 600px; }
#stage.mobile #figure { left: 170px; top: calc(880px + var(--dy, 0px)); width: 560px; }
#stage.mobile[data-screen="menu"] #logo { left: 225px; top: calc(110px + var(--dy, 0px)); width: 450px; }
#stage.mobile:is([data-screen="difficulty"], [data-screen="settings"], [data-screen="quit"]) #logo
  { left: 255px; top: calc(120px + var(--dy, 0px)); width: 390px; }

/* boot */
#stage.mobile #screen-boot { padding: 120px 60px; }
#stage.mobile .press-start { top: calc(900px + var(--dy, 0px)); font-size: 90px; }

/* main menu: centered under the logo, figure below */
#stage.mobile .menu-left { left: 0; right: 0; top: calc(540px + var(--dy, 0px)); align-items: center; }
#stage.mobile .menu-left .item.active { transform: none; }
#stage.mobile .menu-left .item.active::before { position: static; margin-right: 18px; }
#stage.mobile .menu-left .item.active::after { content: '<-'; margin-left: 18px; }

/* difficulty / settings / quit */
#stage.mobile .heading { top: calc(560px + var(--dy, 0px)); font-size: 78px; }
#stage.mobile .menu-center { top: calc(680px + var(--dy, 0px)); }
#stage.mobile #screen-settings .menu-center { top: calc(680px + var(--dy, 0px)); }
#stage.mobile .legal { top: auto; bottom: 120px; flex-direction: column; align-items: center; gap: 6px; }
#stage.mobile .blob { top: calc(1010px + var(--dy, 0px)); }
#stage.mobile .blob-l { left: 230px; }
#stage.mobile .blob-r { left: 606px; }
#stage.mobile .back { left: 50px; bottom: 50px; font-size: 48px; }

/* quit gag */
#stage.mobile .noescape { font-size: 84px; }

/* minigame + tape overlays */
#stage.mobile .fl-score { top: 160px; }
#stage.mobile .fl-panel .heading { font-size: 110px; }
#stage.mobile .fl-panel .hint { font-size: 40px; }
#stage.mobile .tape-osd { font-size: 54px; }
#stage.mobile .tape-play { left: 60px; top: 110px; }
#stage.mobile .tape-date { left: 60px; bottom: 140px; }
#stage.mobile .tape-counter { right: 60px; bottom: 140px; }
#stage.mobile .tape-hint { bottom: 70px; }

/* gallery */
#stage.mobile .gallery-title { left: 0; right: 0; top: calc(170px + var(--dy, 0px)); text-align: center; font-size: 100px; }