/* AJB Games Studio. Found-footage horror: void black, crimson torchlight, a camera HUD. */
:root{
  --void:#04060a;--ink:#0f0608;--panel:#160508;--line:rgba(200,60,60,.18);
  --bone:#f6eeee;--mute:#b39494;--torch:#ff3b2f;--rec:#ff1a1a;--c:#e02a20;
  --hf:'Anybody','Arial Narrow',Impact,system-ui,sans-serif;
  --bf:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --ser:'Newsreader',Georgia,serif;
  --pad:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--void)}
body{margin:0;background:var(--void);color:var(--bone);font:400 1.0625rem/1.65 var(--bf);overflow-x:hidden;min-height:100svh}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--torch);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--pad)}
.small{font-size:.9rem;color:var(--mute)}
.muted{color:var(--mute)}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--bone);color:#000;padding:10px 16px;border-radius:6px;font-weight:700;transition:top .2s}
.skip:focus{top:12px}

/* ---------- global camera layers ---------- */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.075;mix-blend-mode:overlay;
  background-image: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.cursor-light{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle 340px at var(--mx,50%) var(--my,50%),rgba(255,59,47,.12),transparent 70%)}
.cursor-light.on{opacity:1}
.curtain{position:fixed;inset:0;z-index:200;pointer-events:none;background:#000;opacity:0;animation:curtainIn .7s ease-out}
@keyframes curtainIn{0%{opacity:1}30%{opacity:1}100%{opacity:0}}
.curtain.out{animation:none;opacity:1;transition:opacity .26s ease-in;
  background:repeating-linear-gradient(0deg,#000 0 3px,#130405 3px 4px)}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:70;background:linear-gradient(rgba(4,3,3,.92),rgba(4,3,3,.75));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{max-width:1240px;margin:auto;padding:0 var(--pad);height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .logo{height:34px;width:auto}
.brand .bar-logo{height:38px;width:auto;filter:drop-shadow(0 0 6px rgba(255,59,47,.35))}
.brand .word{display:flex;flex-direction:column;line-height:1}
.brand b{font:800 1.5rem/1 var(--hf);font-variation-settings:"wdth" 100;letter-spacing:.02em}
.brand .word span{font:500 .62rem/1.2 var(--mono);color:var(--torch);margin-top:3px;letter-spacing:.14em;opacity:.85}
.nav{display:flex;align-items:center;gap:clamp(12px,3vw,30px)}
.nav a:not(.btn){text-decoration:none;font-weight:500;color:var(--mute);padding:6px 0;position:relative;transition:color .2s}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--torch);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:not(.btn):hover,.nav a[aria-current]{color:var(--bone)}
.nav a:not(.btn):hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--torch);transform:scaleX(0);transform-origin:left;box-shadow:0 0 14px rgba(255,59,47,.95)}
@media(max-width:560px){.brand .word span{display:none}.nav a:not(.btn){display:none}.nav .btn.lamp{display:none}.nav{gap:10px}.bar{height:56px}}
@media(max-width:400px){.btn.sm{padding:0 12px;font-size:.8rem}}

/* ---------- mobile pop-out menu ---------- */
.menu-btn{display:none;flex:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .25s}
.menu-btn:hover{border-color:var(--torch)}
.menu-btn span{display:block;width:18px;height:2px;background:var(--bone);border-radius:2px;transition:transform .3s,opacity .3s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{position:absolute;left:0;right:0;top:100%;z-index:5;display:none;padding:6px var(--pad) 18px;background:rgba(7,4,5,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 26px 60px rgba(0,0,0,.55);transform:translateY(-10px);opacity:0;visibility:hidden;transition:transform .3s ease,opacity .3s ease,visibility .3s}
.menu.open{transform:none;opacity:1;visibility:visible}
.menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 2px;text-decoration:none;font:700 1.05rem/1 var(--hf);font-variation-settings:"wdth" 112;color:var(--bone);border-bottom:1px solid var(--line)}
.menu a:last-child{border-bottom:0}
.menu a::after{content:"\2192";color:var(--torch);font:400 1rem/1 var(--bf)}
.menu a[aria-current="page"]{color:var(--torch)}
[data-theme="light"] .menu{background:rgba(250,248,244,.97);box-shadow:0 26px 60px rgba(0,0,0,.14)}
@media(max-width:560px){.menu-btn{display:flex}.menu{display:grid}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);color:var(--bone);font:700 .95rem/1 var(--bf);text-decoration:none;cursor:pointer;transition:border-color .25s,background .25s,box-shadow .25s,transform .25s}
.btn:hover{border-color:var(--torch);background:rgba(255,59,47,.1);transform:translateY(-2px)}
.btn.sm{min-height:36px;padding:0 16px;font-size:.85rem}
.btn.lamp,.btn.glow{background:var(--bone);color:#04060a;border-color:var(--bone)}
.btn.lamp:hover{background:var(--torch);color:#fff;border-color:var(--torch);box-shadow:0 0 42px rgba(255,59,47,.7)}
.btn.glow{background:var(--c);border-color:var(--c);box-shadow:0 0 0 0 transparent}
.btn.glow:hover{background:var(--c);filter:brightness(1.2);box-shadow:0 0 34px rgba(255,59,47,.7)}
.btn[aria-pressed=true]{background:var(--bone);color:#04060a;border-color:var(--bone)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- type ---------- */
.big-h{font:800 clamp(2.3rem,6.6vw,5.4rem)/.96 var(--hf);font-variation-settings:"wdth" 125;letter-spacing:-.01em;max-width:min(18ch,100%);text-wrap:balance}
.big-h.sm{font-size:clamp(1.9rem,4.8vw,3.4rem)}
h2{font:700 1.15rem/1.2 var(--hf);font-variation-settings:"wdth" 110;letter-spacing:.01em}
h3{font:700 1.35rem/1.15 var(--hf);font-variation-settings:"wdth" 112}
p{max-width:64ch}
.status{display:inline-flex;align-items:center;gap:8px;font:500 .78rem/1 var(--mono);color:var(--bone);letter-spacing:.06em}
.status i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 14px var(--c)}
.status i.hollow{background:none;border:1.5px solid var(--c);box-shadow:none}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tags li{font-size:.8rem;color:var(--mute);border:1px solid var(--line);padding:4px 11px;border-radius:999px}

/* ---------- reveal on scroll: a focus pull ---------- */
.js .rv{opacity:0;filter:blur(10px);transform:scale(.985);transition:opacity .9s ease,filter .9s ease,transform .9s ease;transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;filter:none;transform:none}

/* ---------- art + images ---------- */
.art{position:relative;overflow:hidden;aspect-ratio:460/215;background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--c) 38%,#0b0d10) 0,#0b0d10 70%)}
.art svg{position:absolute;inset:0;width:100%;height:100%}
.art svg .lit{fill:var(--c)}.art svg .lit-s{stroke:var(--c)}
.art svg .eye{fill:var(--c);transform-box:fill-box;transform-origin:center;animation:blink 6s infinite}
.art svg .bar{fill:var(--c);transform-box:fill-box;transform-origin:bottom;animation:eq 1.1s ease-in-out infinite alternate}
.art svg .bar.b2{animation-delay:-.4s}.art svg .bar.b3{animation-delay:-.8s}
.art svg .mist{fill:#cfe6f5;opacity:.07;animation:mist 14s ease-in-out infinite alternate}
.art svg .mist.m2{animation-delay:-6s}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.art.art-contain img{object-fit:contain}
.art img.ok{opacity:1}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(4,6,10,.85))}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes eq{to{transform:scaleY(.35)}}
@keyframes mist{to{transform:translateX(30px)}}

/* ---------- stage: the camera view (hero, game pages, 404) ---------- */
.stage{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 70% 60% at 68% 28%,#1c0808 0,var(--void) 70%)}
.stage::before{content:"";position:absolute;inset:-20%;z-index:0;background:radial-gradient(ellipse 40% 30% at 20% 70%,rgba(255,59,47,.14),transparent),radial-gradient(ellipse 45% 35% at 80% 40%,rgba(190,20,10,.1),transparent);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(6%,-4%) scale(1.1)}}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage canvas.gl{z-index:2;mix-blend-mode:screen}
.stage canvas.eyes{z-index:3}
.stage canvas[hidden]{display:none}
.vignette{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.88) 100%)}
.flash{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at var(--tx,50%) var(--ty,50%),rgba(255,255,255,.55),rgba(190,230,255,.18) 40%,transparent 70%);opacity:0}
.flash.pop{animation:pop .42s ease-out}
@keyframes pop{0%{opacity:0}18%{opacity:.7}100%{opacity:0}}
.hud{position:absolute;inset:78px var(--pad) 18px;z-index:5;pointer-events:none;font:500 .72rem/1 var(--mono);color:rgba(232,239,244,.78);letter-spacing:.1em}
.hud span{position:absolute}
.hud .tl{left:0;top:0}.hud .tr{right:0;top:0;display:flex;align-items:center;gap:8px}
.hud .bl{left:0;bottom:0}.hud .br{right:0;bottom:0}
.hud::before,.hud::after{content:"";position:absolute;width:22px;height:22px;border:1.5px solid rgba(232,239,244,.55)}
.hud::before{left:-10px;top:-12px;border-right:0;border-bottom:0}
.hud::after{right:-10px;top:-12px;border-left:0;border-bottom:0}
.hud .dot{width:9px;height:9px;border-radius:50%;background:#ff1a1a;box-shadow:0 0 12px #ff1a1a;animation:rec 1.2s steps(1) infinite}
@keyframes rec{50%{opacity:0}}
@media(max-width:600px){.hud{font-size:.62rem}.hud .br{display:none}}

/* hero */
.hero{min-height:100svh;display:flex;align-items:flex-end}
.reveal{position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle var(--tr,260px) at var(--tx,62%) var(--ty,38%),#000 0,rgba(0,0,0,.55) 48%,transparent 100%);
  mask-image:radial-gradient(circle var(--tr,260px) at var(--tx,62%) var(--ty,38%),#000 0,rgba(0,0,0,.55) 48%,transparent 100%)}
.poster{position:absolute;width:min(34vw,360px);transform:rotate(var(--rot));border:1px solid rgba(255,255,255,.14);background:#05080c;box-shadow:0 0 80px color-mix(in srgb,var(--c) 55%,transparent)}
.poster .art{aspect-ratio:460/215}
.poster b{position:absolute;left:10px;bottom:8px;z-index:2;font:700 .9rem/1 var(--hf);font-variation-settings:"wdth" 120}
.hero-body{position:relative;z-index:6;padding-top:120px;padding-bottom:clamp(64px,12vh,120px);pointer-events:none}
.hero-body a,.hero-body .btn{pointer-events:auto}
.hero-logo{height:56px;width:auto;margin-bottom:18px}
.title{font:900 clamp(7rem,30vw,25rem)/.78 var(--hf);font-variation-settings:"wdth" 100;letter-spacing:-.02em;margin-left:-.04em;
  background-image:radial-gradient(circle 340px at var(--lx,30%) var(--ly,40%),#fff 0,#ffd9cf 8%,#ff6a4a 32%,#e01820 58%,#a01218 82%,#6b0e13 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 28px rgba(224,24,32,.5)) drop-shadow(0 0 90px rgba(160,10,16,.35))}
.subtitle{font:700 clamp(.9rem,2.4vw,1.5rem)/1 var(--hf);font-variation-settings:"wdth" 150;letter-spacing:.62em;color:var(--torch);margin:18px 0 26px .2em;text-shadow:0 0 26px rgba(255,59,47,.85)}
.hero-body,.ghero-body{text-shadow:0 0 22px #000,0 0 6px rgba(0,0,0,.7)}
.hero-body .title,.hero-body .btn,.ghero-body .btn{text-shadow:none}
.lead{font-size:clamp(1.1rem,2.2vw,1.45rem);line-height:1.5;max-width:34ch;margin-bottom:28px}
.lead em{font:italic 400 1.08em var(--ser);color:#e05050}
.hint{margin-top:22px;font:500 .78rem/1.5 var(--mono);color:var(--mute)}
.hint .coarse{display:none}
@media(pointer:coarse){.hint .coarse{display:inline}.hint .fine{display:none}}
.scroll-cue{position:absolute;z-index:6;left:50%;bottom:22px;width:26px;height:42px;border:1.5px solid rgba(232,239,244,.5);border-radius:14px;transform:translateX(-50%)}
.scroll-cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--bone);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media(max-width:700px){.scroll-cue{display:none}}

/* flicker-bulb: individual letter flicker handled by JS */
/* letter spans inside the title — inherit the gradient clip */
.flicker-bulb .bl{display:inline;transition:opacity .04s;-webkit-text-fill-color:inherit}

/* glitch: a short burst every few seconds */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;-webkit-text-fill-color:currentColor;background:none}
.glitch::before{color:#ff3347;animation:gl1 6.5s infinite steps(1)}
.glitch::after{color:#33e0ff;animation:gl2 6.5s infinite steps(1)}
@keyframes gl1{0%,93%,100%{opacity:0}94%{opacity:.85;transform:translate(-.03em,.01em);clip-path:inset(12% 0 62% 0)}96%{opacity:.85;transform:translate(.04em,0);clip-path:inset(58% 0 14% 0)}98%{opacity:0}}
@keyframes gl2{0%,94%,100%{opacity:0}95%{opacity:.85;transform:translate(.03em,-.01em);clip-path:inset(40% 0 38% 0)}97%{opacity:.85;transform:translate(-.04em,0);clip-path:inset(8% 0 76% 0)}99%{opacity:0}}
.glitch.zap::before,.glitch.zap::after{animation:none;opacity:.9}
.glitch.zap::before{transform:translate(-.04em,.01em);clip-path:inset(20% 0 50% 0)}
.glitch.zap::after{transform:translate(.04em,0);clip-path:inset(55% 0 20% 0)}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:var(--ink);padding:14px 0}
.ticker-track{display:flex;width:max-content;animation:tick 40s linear infinite}
.ticker-set{display:flex;align-items:center;gap:26px;padding-right:26px}
.ticker-set span{font:800 clamp(1.1rem,2.4vw,1.6rem)/1 var(--hf);font-variation-settings:"wdth" 130;white-space:nowrap;color:var(--mute)}
.ticker-set i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 14px var(--c);flex:none}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- corridor: a 3D walk through the games ---------- */
.corridor{background:var(--void)}
.cor-head{position:absolute;z-index:6;left:var(--pad);top:88px;max-width:min(60ch,60vw);pointer-events:none}
.cor-head h2{font:800 clamp(1.8rem,4.6vw,3.4rem)/.98 var(--hf);font-variation-settings:"wdth" 130;margin-bottom:8px}
.cor-scene{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:150px var(--pad) 60px;max-width:1240px;margin:auto}
.cor-pin{background:radial-gradient(ellipse at 50% 50%,#0a1827 0,var(--void) 70%)}
.frame{display:block;position:relative;text-decoration:none;border:1px solid rgba(255,255,255,.16);background:#05080c;box-shadow:0 0 90px color-mix(in srgb,var(--c) 55%,transparent)}
.frame .dim{position:absolute;inset:0;background:#000;opacity:var(--dim,0);pointer-events:none;z-index:3}
.fcap{position:absolute;z-index:2;left:14px;bottom:12px;right:14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fcap b{font:800 clamp(1rem,2vw,1.5rem)/1 var(--hf);font-variation-settings:"wdth" 125}
.fcap small{font:500 .7rem/1 var(--mono);color:var(--bone);opacity:.8}
.cor-info,.cor-rail,.corridor:not(.live) canvas,.corridor:not(.live) .wall{display:none}
.corridor:not(.live) .cor-head{position:static;max-width:none;padding:clamp(72px,10vw,120px) var(--pad) 0;margin:auto;width:100%;max-width:1240px}
.corridor:not(.live) .cor-scene{padding-top:28px}
.corridor.live .cor-track{height:calc(var(--n) * 95vh + 100svh)}
.corridor.live .cor-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.corridor.live .cor-view{position:absolute;inset:0;perspective:900px;perspective-origin:50% 48%}
.corridor.live .cor-scene{position:absolute;inset:0;display:block;padding:0;max-width:none;transform-style:preserve-3d;will-change:transform}
.corridor.live .frame{position:absolute;left:50%;top:50%;width:min(52vw,600px);will-change:transform,opacity}
.corridor.live .frame:hover{border-color:var(--c)}
.wall{position:absolute;left:50%;top:50%;pointer-events:none;background-color:rgba(8,16,26,.5)}
.wall.side{background-image:repeating-linear-gradient(90deg,rgba(255,59,47,.28) 0 2px,transparent 2px 240px),linear-gradient(0deg,rgba(255,59,47,.1),transparent 40%,transparent 60%,rgba(255,59,47,.1))}
.wall.flr{background-image:repeating-linear-gradient(0deg,rgba(255,59,47,.28) 0 2px,transparent 2px 240px),linear-gradient(90deg,transparent 49.7%,rgba(255,59,47,.5) 50%,transparent 50.3%)}
.corridor.live .cor-info{display:flex;position:absolute;z-index:6;bottom:7vh;width:min(380px,40vw);flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);background:rgba(4,6,10,.72);backdrop-filter:blur(6px);transition:opacity .35s}
.cor-info[data-side=right]{right:var(--pad)}.cor-info[data-side=left]{left:var(--pad)}
.cor-info .num{font:500 .75rem/1 var(--mono);color:var(--mute)}
.cor-info .num b{color:var(--c);font-weight:500}
.cor-info strong{font:800 clamp(1.4rem,3vw,2.2rem)/1 var(--hf);font-variation-settings:"wdth" 128}
.cor-info p{font-size:.95rem;color:var(--mute)}
.cor-info .btn{align-self:flex-start;margin-top:4px}
.corridor.live .cor-rail{display:block;position:absolute;z-index:6;left:calc(var(--pad) / 2);top:22%;bottom:22%;width:2px;background:var(--line)}
.cor-rail i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--torch);transform-origin:top;transform:scaleY(var(--p,0));box-shadow:0 0 14px rgba(255,59,47,.9)}
@media(max-width:760px){
  .corridor.live .frame{width:min(78vw,420px)}
  .corridor.live .cor-info{left:var(--pad)!important;right:var(--pad)!important;width:auto;bottom:4vh;padding:14px 16px}
  .cor-head{max-width:80vw}
}

/* ---------- latest release / stats / band ---------- */
.latest,.wrap>.band,section.wrap{margin-top:clamp(64px,10vw,130px)}
.latest>.big-h{margin-bottom:clamp(24px,4vw,48px)}
.feature{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--line);background:var(--ink)}
.feature>.art{aspect-ratio:auto;min-height:340px;height:100%}
.feature-body{padding:clamp(22px,4vw,44px);display:flex;flex-direction:column;gap:16px;justify-content:center}
.feature-body h3{font-size:clamp(1.8rem,4vw,2.8rem);font-variation-settings:"wdth" 130}
.facts{display:flex;flex-wrap:wrap;gap:12px 28px}
.facts b{display:block;font:800 1.6rem/1 var(--hf);font-variation-settings:"wdth" 125;color:var(--c)}
.facts span{font-size:.82rem;color:var(--mute)}
@media(max-width:820px){.feature{grid-template-columns:1fr}.feature>.art{min-height:0;aspect-ratio:460/215}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(18px,3vw,40px);margin-top:clamp(24px,4vw,48px)}
.stat{border-top:2px solid var(--line);padding-top:20px}
.stat b{display:block;font:900 clamp(1.7rem,5vw,3.2rem)/1 var(--hf);font-variation-settings:"wdth" 130;color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 0 42px rgba(255,59,47,.55)}
.stat span{display:block;margin-top:12px;color:var(--mute);font-size:.88rem;max-width:28ch;line-height:1.45}
.band{padding:clamp(40px,8vw,96px) 0;border-block:1px solid var(--line);display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.band h2{font:900 clamp(2.4rem,8.5vw,7rem)/.92 var(--hf);font-variation-settings:"wdth" 135;max-width:min(12ch,100%);letter-spacing:-.015em}
footer{margin-top:clamp(70px,10vw,130px);border-top:1px solid var(--line);background:var(--ink);padding:48px 0 60px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot h2{font:500 .72rem/1 var(--mono);letter-spacing:.14em;color:var(--mute);margin-bottom:14px}
.foot li{margin-bottom:8px}.foot a{text-decoration:none;color:var(--bone)}.foot a:hover{color:var(--torch)}
@media(max-width:480px){.foot{grid-template-columns:1fr}.foot .mark{font-size:2.4rem}}
.foot .mark{font:900 3rem/1 var(--hf);font-variation-settings:"wdth" 100;margin-bottom:10px}
.foot-logo{display:block;height:64px;width:64px;border-radius:10px;border:1px solid var(--line);box-shadow:0 0 44px rgba(255,59,47,.22);margin-bottom:14px}
@media(max-width:760px){.foot{grid-template-columns:1fr 1fr}}

/* ---------- inner pages ---------- */
.page{padding-top:124px}
.page-title{margin-bottom:clamp(28px,5vw,56px)}
.page-title p{margin-top:18px;color:var(--mute);font-size:1.15rem}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:22px}
.card{position:relative;border:1px solid var(--line);background:var(--ink);display:flex;flex-direction:column;overflow:hidden;transition:transform .35s,border-color .3s,opacity .35s;transform-style:preserve-3d}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 220px at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--c) 28%,transparent),transparent 70%);opacity:0;transition:opacity .3s}
.card:hover{border-color:var(--c)}.card:hover::after{opacity:1}
.card.gone{display:none}
.card-link{position:absolute;inset:0;z-index:3}
.card-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body p{color:var(--mute);font-size:.95rem}
.card .more{margin-top:auto;padding-top:8px;font-weight:700;color:var(--c)}
.card .more::after{content:" →"}
.card.classified{opacity:.7}
.art.noise{display:grid;place-items:center;background:repeating-linear-gradient(0deg,#0b1119 0 2px,#080d13 2px 4px)}
.art.noise::after{background:radial-gradient(circle,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%);animation:flick 3s steps(1) infinite}
.glyph{position:relative;z-index:2;font:900 4rem/1 var(--hf);color:var(--c);opacity:.8}
@keyframes flick{0%,100%{opacity:.8}40%{opacity:.3}45%{opacity:1}70%{opacity:.5}}

.studio{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,6vw,80px)}
.page>section{margin-top:clamp(56px,8vw,110px)}
.studio h2{margin-bottom:18px}
.studio p+p{margin-top:14px;color:var(--mute)}
.quote{font:italic 400 clamp(1.6rem,3.4vw,2.4rem)/1.25 var(--ser);margin-bottom:26px;color:var(--bone)}
.tl{position:relative;padding-left:26px}
.tl::before,.tl::after{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px}
.tl::before{background:var(--line)}
.tl::after{background:var(--torch);box-shadow:0 0 14px rgba(255,59,47,.85);transform-origin:top;transform:scaleY(var(--p,0))}
.tl li{position:relative;padding-bottom:26px}
.tl li::before{content:"";position:absolute;left:-26px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--void);border:2px solid var(--c)}
.tl time{display:block;font:500 .78rem/1 var(--mono);color:var(--c);margin-bottom:6px}
.tl strong{font-weight:700}
@media(max-width:820px){.studio{grid-template-columns:1fr}}
.press,.socials{display:grid;gap:14px;margin-top:clamp(20px,3vw,36px)}
.press{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.socials{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.press a,.socials a{display:flex;justify-content:space-between;gap:14px;height:100%;padding:20px;border:1px solid var(--line);background:var(--ink);text-decoration:none;transition:border-color .25s,transform .25s}
.press a{flex-direction:column}
.press a:hover,.socials a:hover{border-color:var(--torch);transform:translateY(-3px);box-shadow:0 4px 20px rgba(255,59,47,.12)}
.press small{font:500 .74rem/1.3 var(--mono);color:var(--torch)}
.press span{color:var(--mute);font-size:.95rem}
.socials strong{display:block;font:700 1.1rem/1.2 var(--hf);font-variation-settings:"wdth" 115}
.socials span{font-size:.85rem;color:var(--mute)}
.socials em{font-style:normal;color:var(--torch);font-size:1.3rem}

/* ---------- game page ---------- */
.ghero{min-height:82svh;display:flex;align-items:flex-end;background:#05080c}
.ghero .layer{position:absolute;inset:-6% 0;z-index:0;will-change:transform}
.ghero .layer .art{position:absolute;inset:0;aspect-ratio:auto;height:100%;filter:saturate(.85) brightness(.75)}
.ghero .layer .art::after{background:linear-gradient(transparent 30%,#04060a 98%)}
.ghero-body{position:relative;z-index:6;padding-top:130px;padding-bottom:clamp(40px,8vh,80px);display:flex;flex-direction:column;gap:14px;align-items:flex-start;pointer-events:none}
.ghero-body a,.ghero-body .btn{pointer-events:auto}
.ghero h1{font:900 clamp(3rem,10.5vw,9rem)/.88 var(--hf);font-variation-settings:"wdth" 135;letter-spacing:-.015em;max-width:min(12ch,100%);text-shadow:0 0 50px color-mix(in srgb,var(--c) 55%,transparent);text-wrap:balance}
.ghero .tagline{font:italic 400 clamp(1.2rem,2.6vw,1.8rem)/1.3 var(--ser);color:var(--bone);max-width:30ch}
.back{text-decoration:none;color:var(--mute);font-weight:700;font-size:.9rem}
.back:hover{color:var(--bone)}
.gfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:-1px}
.gfacts>div{background:var(--ink);padding:20px 22px}
.gfacts dt{font:500 .72rem/1 var(--mono);color:var(--mute);margin-bottom:8px}
.gfacts dd{font:700 1.1rem/1.25 var(--hf);font-variation-settings:"wdth" 112}
.about{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,6vw,80px);margin-top:clamp(48px,8vw,100px)}
.about h2{margin-bottom:16px;color:var(--c)}
.lede{font:italic 400 clamp(1.35rem,2.6vw,1.85rem)/1.4 var(--ser);margin-bottom:18px}
.about p+p{color:var(--mute)}
.inside li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line)}
.inside li::before{content:"";position:absolute;left:0;top:1.35em;width:8px;height:8px;background:var(--c);box-shadow:0 0 14px var(--c);transform:rotate(45deg)}
@media(max-width:820px){.about{grid-template-columns:1fr}}
.play{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(48px,8vw,100px);border:1px solid var(--line);background:var(--ink)}
.play>.art{aspect-ratio:auto;min-height:260px}
.play-body{padding:clamp(22px,4vw,44px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.play-body h2{font:800 clamp(1.6rem,4vw,2.4rem)/1 var(--hf);font-variation-settings:"wdth" 128;color:var(--bone)}
.play-body p{color:var(--mute)}
@media(max-width:760px){.play{grid-template-columns:1fr}.play>.art{min-height:0;aspect-ratio:460/215}}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(40px,6vw,80px)}
.pager a{display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--line);background:var(--ink);text-decoration:none;transition:border-color .25s,transform .25s}
.pager a:hover{border-color:var(--c);transform:translateY(-3px)}
.pager .next{text-align:right}
.pager small{font:500 .74rem/1 var(--mono);color:var(--mute)}
.pager strong{font:800 clamp(1.1rem,2.6vw,1.7rem)/1.1 var(--hf);font-variation-settings:"wdth" 125;color:var(--c)}

/* 404 */
.nf{min-height:100svh;display:flex;align-items:flex-end}
.nf .title{font-size:clamp(8rem,38vw,30rem)}

/* ---------- coming soon card ---------- */
.coming-soon-art{position:relative;overflow:hidden;aspect-ratio:460/215;background:#050206;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}
.coming-soon-art::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,59,47,.04) 0 2px,transparent 2px 6px),repeating-linear-gradient(90deg,rgba(255,59,47,.02) 0 1px,transparent 1px 40px)}
.coming-soon-art::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(255,59,47,.12),transparent 70%)}
.coming-soon-art .cs-label{position:relative;z-index:2;font:800 .7rem/1 var(--mono);letter-spacing:.25em;color:rgba(255,59,47,.7);text-transform:uppercase;border:1px solid rgba(255,59,47,.3);padding:5px 12px;border-radius:2px;animation:csflick 3.5s steps(1) infinite}
.coming-soon-art .cs-mark{position:relative;z-index:2;font:900 clamp(1.4rem,4vw,2.2rem)/1 var(--hf);font-variation-settings:"wdth" 140;color:rgba(240,220,220,.12);letter-spacing:.04em}
@keyframes csflick{0%,100%{opacity:1}45%{opacity:1}50%{opacity:.2}55%{opacity:1}70%{opacity:.4}75%{opacity:1}}

/* ---------- reduced motion + no javascript ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;filter:none;transform:none}
  .title{font-variation-settings:"wdth" 100}
  .curtain{display:none}
  .hud .bl{display:none}
}
@media(prefers-reduced-motion:reduce){.stage canvas{display:none}.reveal{-webkit-mask-image:none;mask-image:none;opacity:.35}}

/* ---------- story poster (portrait key art shown at its natural shape, centered) ---------- */
.poster-wrap{display:flex;justify-content:center;margin-top:clamp(28px,4vw,48px)}
.story-poster{display:block;width:min(320px,78vw);border:1px solid var(--line);box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 70px rgba(155,92,240,.14)}

/* ---------- theme toggle ---------- */
.theme-toggle{padding:0 13px}
.theme-toggle svg{width:16px;height:16px;flex:none}
.theme-toggle .moon{display:none}
[data-theme="light"] .theme-toggle .sun{display:none}
[data-theme="light"] .theme-toggle .moon{display:block}

/* ---------- light mode ---------- */
[data-theme="light"]{
  --void:#f4f1ec;--ink:#faf8f4;--panel:#fff;--line:rgba(150,60,60,.24);
  --bone:#241419;--mute:#7a6a6e;--torch:#c22318;
}
[data-theme="light"] .site-header{background:linear-gradient(rgba(244,241,236,.93),rgba(244,241,236,.8))}
[data-theme="light"] .btn{background:rgba(0,0,0,.03)}
[data-theme="light"] .btn.lamp,[data-theme="light"] .btn[aria-pressed=true]{background:var(--bone);color:#f4f1ec}
[data-theme="light"] .btn.glow{background:var(--c);color:#fff}
[data-theme="light"] .btn.lamp:hover{background:var(--torch);color:#fff}
[data-theme="light"] .btn.lamp:hover{box-shadow:0 0 30px rgba(255,59,47,.35)}
[data-theme="light"] .skip{color:#f4f1ec}
[data-theme="light"] .title{background-image:radial-gradient(circle 300px at var(--lx,30%) var(--ly,40%),#38090e 0,#8f1620 25%,#c9251c 60%,#6e2a30 100%)}
[data-theme="light"] .hero-body{text-shadow:none}
[data-theme="light"] .stage{background:radial-gradient(ellipse 70% 60% at 68% 28%,#fbf2e9 0,var(--void) 70%)}
[data-theme="light"] .stage canvas.gl,[data-theme="light"] .stage canvas.eyes{display:none}
[data-theme="light"] .vignette{background:radial-gradient(ellipse at center,transparent 55%,rgba(95,65,55,.16) 100%)}
[data-theme="light"] .hud{color:rgba(70,45,45,.75)}
[data-theme="light"] .hud::before,[data-theme="light"] .hud::after{border-color:rgba(70,45,45,.5)}
[data-theme="light"] .scroll-cue{border-color:rgba(40,20,20,.45)}
[data-theme="light"] .poster{background:var(--ink);border-color:rgba(0,0,0,.14)}
[data-theme="light"] .cor-pin{background:radial-gradient(ellipse at 50% 50%,#e9eef2 0,var(--void) 70%)}
[data-theme="light"] .frame{background:var(--ink);border-color:rgba(0,0,0,.15)}
[data-theme="light"] .wall{background-color:rgba(190,200,210,.35)}
[data-theme="light"] .corridor.live .cor-info{background:rgba(255,255,255,.85)}
[data-theme="light"] .frame .fcap b,[data-theme="light"] .frame .fcap small,[data-theme="light"] .poster b{color:#f0e8e8}
[data-theme="light"] .ghero .btn{color:#f0e8e8;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
[data-theme="light"] .ghero .btn.lamp{background:var(--bone);color:#f4f1ec;border-color:var(--bone)}
[data-theme="light"] .ghero .btn.glow{background:var(--c);color:#fff;border-color:var(--c)}
[data-theme="light"] .ghero{background:var(--void)}
[data-theme="light"] .ghero-body{color:#f0e8e8;text-shadow:0 0 22px #000,0 0 6px rgba(0,0,0,.7)}
[data-theme="light"] .ghero h1,[data-theme="light"] .ghero .tagline,[data-theme="light"] .ghero .status{color:#f0e8e8}
[data-theme="light"] .ghero .back{color:#d8cfcf}
[data-theme="light"] .art.noise{background:repeating-linear-gradient(0deg,#ece8e2 0 2px,#f6f3ee 2px 4px)}
[data-theme="light"] .stat b{text-shadow:0 0 36px rgba(255,59,47,.18)}
[data-theme="light"] .grain{opacity:.05}