@font-face{font-family:"PS2P";src:url(/fonts/pressstart2p.woff2) format("woff2");font-display:swap}
@font-face{font-family:"VT";src:url(/fonts/vt323.woff2) format("woff2");font-display:swap}
:root{
  --bk:#000;--cy:#1ad6f2;--cy2:#0a8fd6;--mg:#ff3dd4;--pu:#4b3bff;--wh:#f4fbff;
  --glow-cy:0 0 6px #1ad6f2cc,0 0 22px #1ad6f266;
  --glow-mg:0 0 6px #ff3dd4cc,0 0 22px #ff3dd466;
  --px:"PS2P",monospace;--vt:"VT",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bk)}
body{background:var(--bk);color:var(--wh);font-family:var(--vt);font-size:22px;line-height:1.25;overflow-x:hidden;-webkit-font-smoothing:none}
img{image-rendering:pixelated;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--mg);color:var(--bk)}

/* ---------- CRT overlay ---------- */
#sparks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.crt{position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.28) 2px 3px);
  box-shadow:inset 0 0 160px 40px #000,inset 0 0 0 3px #1ad6f222}
.crt::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
.roll{position:absolute;left:0;right:0;height:18vh;top:-20vh;background:linear-gradient(to bottom,transparent,rgba(25,230,255,.06),transparent);animation:roll 7s linear infinite}
@keyframes roll{to{transform:translateY(140vh)}}
body.possessed main,body.possessed .hud,body.possessed footer{animation:tear .32s steps(2) 1}
@keyframes tear{
  0%{transform:translate(0);filter:none}
  25%{transform:translate(-8px,2px) skewX(6deg);filter:hue-rotate(40deg) saturate(2)}
  50%{transform:translate(10px,-3px);clip-path:inset(20% 0 30% 0)}
  75%{transform:translate(-4px,0) skewX(-4deg)}
  100%{transform:translate(0);filter:none;clip-path:none}
}

/* ---------- HUD ---------- */
.hud{position:fixed;top:0;left:0;right:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:12px;
  padding:10px clamp(12px,3vw,32px);background:linear-gradient(#000 70%,#000c);border-bottom:2px solid #1ad6f255;font-family:var(--px);font-size:10px}
.hud-cell{display:flex;flex-direction:column;gap:5px}
.hud-cell:nth-child(3){align-items:flex-end}
.hud-k{color:var(--mg);text-shadow:var(--glow-mg)}
.hud-v{color:var(--wh);letter-spacing:1px}
.hud-title{font-size:14px;color:var(--cy);text-decoration:none;text-shadow:var(--glow-cy);letter-spacing:2px}
.hud-credit{align-items:flex-end;min-width:56px}
.flick{animation:flick 2.3s steps(1) infinite}
@keyframes flick{0%,40%,44%,80%,100%{opacity:1}42%,82%{opacity:.1}}

/* ---------- screens ---------- */
.screen{position:relative;z-index:2;padding:110px clamp(16px,5vw,72px) 80px}
.stage-tag{font-family:var(--px);font-size:11px;color:var(--mg);text-shadow:var(--glow-mg);letter-spacing:2px;margin-bottom:18px}

/* glitch headings: RGB split slices */
.glitch,.glitch-sm{position:relative;display:inline-block}
.glitch::before,.glitch::after,.glitch-sm::before,.glitch-sm::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none}
.glitch::before,.glitch-sm::before{color:var(--mg);transform:translate(-3px,0);mix-blend-mode:screen;animation:slice1 1.9s steps(1) infinite}
.glitch::after,.glitch-sm::after{color:var(--cy);transform:translate(3px,0);mix-blend-mode:screen;animation:slice2 1.3s steps(1) infinite}
@keyframes slice1{0%{clip-path:inset(0 0 85% 0)}20%{clip-path:inset(40% 0 35% 0);transform:translate(-6px,1px)}40%{clip-path:inset(75% 0 5% 0)}60%{clip-path:inset(10% 0 70% 0);transform:translate(-2px,0)}80%{clip-path:inset(55% 0 25% 0);transform:translate(-8px,-1px)}100%{clip-path:inset(0 0 100% 0)}}
@keyframes slice2{0%{clip-path:inset(60% 0 20% 0)}25%{clip-path:inset(5% 0 80% 0);transform:translate(5px,-1px)}50%{clip-path:inset(30% 0 50% 0)}75%{clip-path:inset(85% 0 0 0);transform:translate(8px,1px)}100%{clip-path:inset(100% 0 0 0)}}

/* ---------- title screen ---------- */
.title-screen{min-height:min(100vh,980px);min-height:min(100svh,980px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-bottom:110px}
.hero-bg{position:absolute;inset:-64px;z-index:-1;background:#000 url(/img/texture.webp) 0 0/256px 256px repeat;image-rendering:pixelated;opacity:.55;animation:pan 18s linear infinite,heroFlick 5s steps(1) infinite}
@keyframes pan{to{transform:translate(64px,64px)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,#000a 45%,#0000 100%),linear-gradient(0deg,#000 0%,transparent 30%)}
@keyframes heroFlick{0%,61%,63%,89%,100%{opacity:.55}62%{opacity:.15}90%{opacity:.75}}
.title-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,4vw,60px);align-items:center;max-width:1280px;margin:0 auto;width:100%}
.wordmark{font-family:var(--px);font-size:clamp(56px,11vw,150px);line-height:1;color:var(--cy);text-shadow:var(--glow-cy),6px 6px 0 var(--pu);letter-spacing:-2px;animation:wobble 3.1s steps(1) infinite}
@keyframes wobble{0%,100%{transform:none}8%{transform:translate(2px,-1px)}9%{transform:none}47%{transform:skewX(-6deg) translateX(-4px)}48%{transform:none}73%{transform:translate(-1px,2px)}74%{transform:none}}
.ticker{font-family:var(--px);font-size:clamp(18px,2.6vw,30px);color:var(--mg);text-shadow:var(--glow-mg);margin:18px 0 22px}
.tagline{font-family:var(--px);font-size:clamp(10px,1.1vw,13px);line-height:1.8;color:var(--wh);max-width:30em;margin-bottom:18px}
.lede{font-size:clamp(24px,2.4vw,32px);line-height:1.15;color:#bdf6ff;max-width:22em}
.coin-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:34px}
.coin-btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--px);font-size:14px;color:#000;background:var(--cy);padding:16px 20px;
  box-shadow:0 0 0 3px #000,0 0 0 6px var(--cy),0 0 28px #1ad6f299,6px 6px 0 6px var(--mg);transition:transform .08s steps(1),box-shadow .08s steps(1)}
.coin-btn:hover{transform:translate(-2px,-2px);box-shadow:0 0 0 3px #000,0 0 0 6px var(--cy),0 0 40px #1ad6f2cc,9px 9px 0 6px var(--mg)}
.coin-btn:active{transform:translate(5px,5px);box-shadow:0 0 0 3px #000,0 0 0 6px var(--cy),0 0 20px #1ad6f299,1px 1px 0 6px var(--mg)}
.coin-btn:focus-visible,.press-start:focus-visible,.sprite:focus-visible,.icons a:focus-visible,.ca-ctl button:focus-visible{outline:3px dashed var(--mg);outline-offset:6px}
.coin-slot{width:6px;height:24px;background:#000;box-shadow:0 0 0 3px #035a75}
.coin-btn.small{font-size:12px;padding:12px 16px}
.press-start{font-family:var(--px);font-size:12px;color:var(--mg);text-decoration:none;text-shadow:var(--glow-mg);padding:8px 0;border-bottom:3px solid transparent}
.press-start:hover{border-bottom-color:var(--mg)}
.blink{animation:blink 1s steps(1) infinite}
.blink-slow{animation:blink 1.8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.ghost-stage{position:relative;display:grid;place-items:center;aspect-ratio:1}
.ghost-wrap{position:relative;width:min(100%,520px);aspect-ratio:1;animation:haunt 4.2s ease-in-out infinite}
.ghost-layer{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 70%);mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 70%)}
.g-main{mix-blend-mode:normal;animation:jitter .18s steps(2) infinite,ghostFlick 3.7s steps(1) infinite}
.g-c{filter:sepia(1) saturate(9) hue-rotate(140deg);opacity:0;animation:splitC 1.1s steps(1) infinite}
.g-m{filter:sepia(1) saturate(9) hue-rotate(260deg);opacity:0;animation:splitM .9s steps(1) infinite}
@keyframes haunt{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes jitter{0%{transform:translate(0,0)}50%{transform:translate(1px,-1px)}100%{transform:translate(-1px,1px)}}
@keyframes ghostFlick{0%,30%,33%,70%,72%,100%{opacity:1}31%{opacity:.2}71%{opacity:.5;transform:translateX(12px) skewX(10deg)}}
@keyframes splitC{0%,100%{opacity:0}30%{opacity:.8;transform:translate(-14px,2px);clip-path:inset(30% 0 40% 0)}34%{opacity:0}85%{opacity:.8;transform:translate(-20px,-2px);clip-path:inset(70% 0 10% 0)}89%{opacity:0}}
@keyframes splitM{0%,100%{opacity:0}40%{opacity:.8;transform:translate(16px,-2px);clip-path:inset(10% 0 70% 0)}45%{opacity:0}90%{opacity:.8;transform:translate(22px,2px);clip-path:inset(50% 0 30% 0)}94%{opacity:0}}
.ghost-pool{position:absolute;bottom:2%;left:15%;right:15%;height:10%;background:radial-gradient(ellipse at center,#4b3bff99,#1ad6f222 50%,transparent 70%);filter:blur(6px);animation:pool 4.2s ease-in-out infinite}
@keyframes pool{50%{transform:scaleX(.8);opacity:.6}}

.marquee{position:absolute;left:0;right:0;bottom:28px;overflow:hidden;border-block:2px solid var(--mg);background:#0b0011;box-shadow:var(--glow-mg);transform:rotate(-1.5deg)}
.marquee-track{display:flex;width:max-content;animation:mq 26s linear infinite}
.marquee-track span{font-family:var(--px);font-size:12px;color:var(--mg);white-space:nowrap;padding:10px 0}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- instruction card ---------- */
.how-screen{background:radial-gradient(ellipse at 20% 30%,#4b3bff22,transparent 55%),#000}
.card-wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:32px;max-width:1180px;margin:0 auto}
.instr-card{border:4px solid var(--cy);padding:clamp(20px,4vw,44px);position:relative;background:
  repeating-linear-gradient(45deg,#1ad6f208 0 10px,transparent 10px 20px),#02070a;box-shadow:var(--glow-cy),inset 0 0 40px #1ad6f222;
  clip-path:polygon(0 18px,18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px))}
.card-h{font-family:var(--px);font-size:clamp(20px,3.2vw,38px);color:var(--cy);text-shadow:var(--glow-cy);margin-bottom:28px;line-height:1.2}
.rules{list-style:none;display:grid;gap:16px}
.rules li{display:grid;grid-template-columns:62px 1fr;align-items:baseline;gap:10px;font-size:clamp(24px,2.4vw,32px);padding-bottom:12px;border-bottom:2px dashed #1ad6f233}
.rules b{font-family:var(--px);font-size:14px;color:var(--mg);text-shadow:var(--glow-mg)}
.rules em{font-style:normal;color:var(--mg);text-shadow:var(--glow-mg)}
.card-foot{font-family:var(--px);font-size:11px;color:var(--cy);margin-top:24px;text-align:center}
.select-card{border:4px solid var(--mg);padding:22px;background:#0b0011;box-shadow:var(--glow-mg);display:flex;flex-direction:column;align-items:center;gap:14px;transform:rotate(1.2deg)}
.select-h{font-family:var(--px);font-size:11px;color:var(--mg);animation:blink 1.4s steps(1) infinite}
.select-portrait{width:160px;height:160px;border:3px solid var(--cy);background:#000;box-shadow:inset 0 0 20px #1ad6f255;animation:jitter .25s steps(2) infinite}
.select-portrait img{width:100%;height:100%}
.select-name{font-family:var(--px);font-size:18px;color:var(--cy);text-shadow:var(--glow-cy)}
.meters{width:100%;display:grid;gap:8px}
.meters div{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:8px}
.meters dt{font-family:var(--px);font-size:9px;color:var(--wh)}
.meters dd{height:14px;border:2px solid var(--cy);padding:2px}
.meters i{display:block;height:100%;width:var(--w);background:repeating-linear-gradient(90deg,var(--cy) 0 8px,transparent 8px 10px)}
.select-note{font-size:20px;color:#bdf6ff;text-align:center}

/* ---------- bonus stage ---------- */
.bonus-screen{background:#000}
.bonus-head{max-width:1180px;margin:0 auto 26px}
.bonus-sub{font-size:28px;color:#bdf6ff}
.arena{position:relative;max-width:1180px;margin:0 auto;height:min(62vh,560px);min-height:380px;border:4px solid var(--cy);overflow:hidden;
  background:linear-gradient(#1ad6f210 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,#1ad6f210 1px,transparent 1px) 0 0/32px 32px,
  radial-gradient(ellipse at 50% 110%,#4b3bff44,transparent 60%),#000;box-shadow:var(--glow-cy);touch-action:manipulation}
.arena-hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px 16px;font-family:var(--px);font-size:11px;color:var(--mg);z-index:3;background:#000c}
.arena-hud b{color:var(--wh);font-weight:400}
.sprite{position:absolute;left:50%;top:50%;width:96px;height:96px;transform:translate(-50%,-50%);z-index:2;display:none;filter:drop-shadow(0 0 10px #1ad6f2)}
.sprite img{width:100%;height:100%;animation:jitter .12s steps(2) infinite}
.sprite:active img{filter:brightness(2)}
.arena.on .sprite{display:block}
.arena.on .arena-msg{display:none}
.arena-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;z-index:4;padding:20px}
.arena-big{font-family:var(--px);font-size:clamp(26px,5vw,56px);color:var(--cy);text-shadow:var(--glow-cy),4px 4px 0 var(--pu)}
.arena-big.over{color:var(--mg);text-shadow:var(--glow-mg)}
.arena-small{font-size:24px;color:#bdf6ff}
.pop-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
.pop{position:absolute;font-family:var(--px);font-size:14px;color:var(--mg);text-shadow:var(--glow-mg);animation:pop .7s steps(6) forwards}
@keyframes pop{to{transform:translateY(-50px);opacity:0}}

/* ---------- jump-scare ---------- */
.boo{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#000;opacity:0;pointer-events:none}
.boo img{width:min(80vw,80vh);height:auto;grid-area:1/1;filter:drop-shadow(0 0 40px #1ad6f2)}
.boo b{grid-area:1/1;font-family:var(--px);font-size:clamp(60px,16vw,200px);color:var(--mg);text-shadow:var(--glow-mg),8px 8px 0 var(--cy);align-self:end;margin-bottom:6vh}
.boo.go{animation:boo .55s steps(1) forwards}
.boo.go img{animation:booZoom .55s steps(5) forwards}
@keyframes boo{0%{opacity:1;background:#000}15%{background:#ff3dd433}30%{background:#000}45%{background:#1ad6f222}60%{opacity:1}100%{opacity:0}}
@keyframes booZoom{0%{transform:scale(.4) rotate(-6deg)}40%{transform:scale(1.15) rotate(3deg)}100%{transform:scale(1.4)}}

/* ---------- footer / game over ---------- */
.over-screen{padding-top:90px;padding-bottom:40px;border-top:4px solid var(--mg);background:linear-gradient(#000 0%,#000c 40%,#000 100%),url(/img/hero.webp) center 30%/cover no-repeat,#000;overflow:hidden}
.over-top{text-align:center;margin-bottom:56px}
.over-h{font-family:var(--px);font-size:clamp(34px,8vw,96px);color:var(--mg);text-shadow:var(--glow-mg),6px 6px 0 var(--pu)}
.continue{font-family:var(--px);font-size:clamp(12px,1.6vw,18px);color:var(--cy);margin-top:22px}
.continue span{display:inline-block;min-width:1.5em;color:var(--wh)}
.foot-bar{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:22px;border:3px solid #1ad6f255;background:#02070a}
.foot-id{display:flex;align-items:center;gap:14px}
.foot-id img{animation:jitter .2s steps(2) infinite}
.foot-name{font-family:var(--px);font-size:16px;color:var(--cy);text-shadow:var(--glow-cy)}
.foot-tick{font-family:var(--px);font-size:10px;color:var(--mg);margin-top:6px}
.ca{display:flex;align-items:center;gap:12px;min-width:0;justify-self:center;border:2px dashed var(--mg);padding:10px 14px;min-height:52px}
.ca-k{font-family:var(--px);font-size:11px;color:var(--mg)}
.ca-v{font-family:var(--vt);font-size:22px;color:var(--wh);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:12ch}
.ca-ctl{display:flex;gap:8px}
.ca-ctl button,.ca-ctl a{font-family:var(--px);font-size:9px;color:#000;background:var(--cy);padding:8px 10px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.ca-ctl button:hover,.ca-ctl a:hover{background:var(--mg)}
.icons{display:flex;gap:12px}
.icons a{width:46px;height:46px;display:grid;place-items:center;border:3px solid var(--cy);color:var(--cy);box-shadow:var(--glow-cy);transition:transform .08s steps(1)}
.icons a:hover{color:#000;background:var(--mg);border-color:var(--mg);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--cy)}
.icons svg{width:22px;height:22px;shape-rendering:crispEdges}
.foot-legal{text-align:center;font-family:var(--px);font-size:9px;color:#7fdcec;margin-top:26px;line-height:1.8}

/* ---------- reveal ---------- */
.reveal.pre{opacity:0;transform:translateY(24px) skewX(-4deg)}
.reveal.in{opacity:1;transform:none;transition:opacity .4s steps(4),transform .4s steps(4)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  body{font-size:20px}
  .hud{grid-template-columns:1fr 1fr auto;font-size:8px}
  .hud-title{display:none}
  .title-grid{grid-template-columns:1fr}
  .ghost-stage{order:-1;width:min(78vw,360px);margin:0 auto -10px}
  .title-screen{justify-content:flex-start;padding-top:80px;padding-bottom:120px}
  .title-copy{text-align:center}
  .tagline,.lede{margin-inline:auto}
  .coin-row{justify-content:center}
  .card-wrap{grid-template-columns:1fr}
  .select-card{transform:none}
  .rules li{grid-template-columns:44px 1fr}
  .foot-bar{grid-template-columns:1fr;justify-items:center;text-align:center}
  .ca{max-width:100%}
  .arena-hud{font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal.pre{opacity:1;transform:none}
  .roll{display:none}
}

/* lore + quotes from the brand kit */
.lore-txt{margin-top:26px;padding:16px 18px;border:2px solid #ff3dd455;background:#000;font-size:22px;line-height:1.2;color:#bdf6ff}
.lore-h{font-family:var(--px);font-size:10px;color:var(--mg);margin-bottom:10px}
.cursor{color:var(--cy);animation:blink 1s steps(1) infinite;margin-left:4px}
.bonus-quote{font-size:24px;color:var(--mg);text-shadow:var(--glow-mg);margin-top:6px}