/* Last Contact: Maze Survival — site stylesheet
   Palette + shell are duplicated from the critical CSS in index.html so that
   terms.html / privacy.html style correctly on their own. */

@font-face{
  font-family:"Pixel Operator Bold";
  src:url("../assets/fonts/PixelOperator8-Bold.woff2") format("woff2"),
      url("../assets/fonts/PixelOperator8-Bold.ttf") format("truetype");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Press Start 2P";
  src:url("../assets/fonts/PressStart2P-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --void-0:#000000; --void-1:#06060a; --void-2:#0e0e10;
  --warm-1:#201010; --warm-2:#302010; --warm-3:#402010; --warm-4:#403020;
  --warm-mid-1:#502010; --warm-mid-2:#602010; --warm-mid-3:#903010;
  --hot-1:#a02000; --hot-2:#c03000; --hot-3:#f08010; --hot-4:#f8c060;
  --danger-1:#300000; --danger-2:#600000;
  --cold-1:#002030; --cold-2:#202030;
  --ink:#cbc2b6; --ink-dim:#948c83;
  --pixel:"Pixel Operator Bold","Silkscreen","Press Start 2P","Oswald",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --wrap:1180px;
  --torch-x:50%; --torch-y:50%;
}

/* ---------- base (mirrors critical) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--void-0);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void-1);color:var(--ink);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.65;overflow-x:hidden;text-wrap:pretty}
img{max-width:100%;height:auto;display:block;background:var(--void-2);
  color:var(--hot-4);font:12px/1.5 var(--mono);image-rendering:pixelated}
a{color:var(--hot-4);text-decoration:none}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--hot-4);outline-offset:3px}
h1,h2,h3{font-family:var(--pixel);font-weight:700;line-height:1.2;
  letter-spacing:.03em;text-transform:uppercase;color:#e8e0d4;margin:0;
  -webkit-font-smoothing:none;font-smooth:never}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.mono{font-family:var(--mono)}

/* ---------- shell (also used by the legal pages) ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--void-2);color:var(--hot-4);
  padding:10px 14px;z-index:100;font-family:var(--pixel);font-weight:700;font-size:14px}
.skip:focus{left:8px;top:8px}
.site-head{position:fixed;top:0;left:0;right:0;z-index:40;
  background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,0));
  backdrop-filter:blur(2px)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:62px}
.brand{font-family:var(--pixel);font-weight:700;font-size:1rem;color:#e8e0d4;letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.brand em{display:block;font-style:normal;font-size:.72em;color:var(--hot-3);margin-top:5px}
.nav{display:flex;align-items:center;gap:22px;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;font-family:var(--mono)}
.nav a{color:var(--ink-dim)}
.nav a:hover{color:var(--hot-4)}
@media (max-width:760px){.nav{display:none}}

/* ---------- sections ---------- */
.band{position:relative;padding:clamp(72px,10vw,132px) 0;background:var(--void-1);
  border-top:1px solid rgba(64,32,16,.42)}
.band h2{font-size:clamp(1.35rem,3.2vw,2.3rem);line-height:1.28;margin:0 0 22px}
.band p{margin:0 0 18px;max-width:64ch}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--warm-mid-3);margin:0 0 16px}
.lead{font-size:1.14rem;color:#ded5c8}

[data-reveal]{opacity:1}
.js [data-reveal]{opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .7s ease,transform .7s ease;will-change:opacity,transform}
.js [data-reveal].in{opacity:1;transform:none}

/* 2. story */
.story{background:linear-gradient(180deg,#000 0%,var(--void-1) 40%)}
.eyes{position:relative;height:118px;margin:30px 0 34px;border-top:1px solid rgba(64,32,16,.5);
  border-bottom:1px solid rgba(64,32,16,.5);background:
  radial-gradient(70% 120% at 50% 50%,#0a0406 0%,#000 70%);overflow:hidden}
.eyes__pair{position:absolute;top:50%;display:flex;gap:16px;opacity:0;
  transform:translateY(-50%);will-change:opacity}
.eyes__pair i{display:block;width:9px;height:9px;background:#c03000;
  box-shadow:0 0 6px 2px rgba(192,48,0,.65),0 0 18px 8px rgba(96,0,0,.45)}
.eyes__pair--a{left:16%;animation:blink-a 9s steps(1,end) infinite}
.eyes__pair--b{left:47%;animation:blink-b 13s steps(1,end) infinite}
.eyes__pair--b i{width:7px;height:7px}
.eyes__pair--c{left:78%;animation:blink-c 17s steps(1,end) infinite}
.eyes__pair--c i{width:11px;height:11px;background:#600000;
  box-shadow:0 0 7px 3px rgba(96,0,0,.7)}
@keyframes blink-a{0%,7%{opacity:0}9%{opacity:.9}22%{opacity:.9}23%{opacity:0}
  25%{opacity:.75}38%{opacity:.75}39%,100%{opacity:0}}
@keyframes blink-b{0%,31%{opacity:0}33%{opacity:.85}44%{opacity:.85}45%{opacity:0}
  48%{opacity:.6}56%{opacity:.6}57%,100%{opacity:0}}
@keyframes blink-c{0%,58%{opacity:0}61%{opacity:.7}69%{opacity:.7}70%{opacity:0}
  73%{opacity:.5}79%{opacity:.5}80%,100%{opacity:0}}
.story__fig{margin:36px 0 0}
.story__fig img{width:100%;border:1px solid rgba(64,32,16,.6)}
.story__fig figcaption{margin-top:12px;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.1em;color:var(--ink-dim)}

/* 3. loop cards */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{border:1px solid rgba(80,32,16,.75);padding:26px 22px;background:transparent;
  transition:border-color .25s,transform .25s}
.card:hover{border-color:var(--hot-3);transform:translateY(-3px)}
.card h3{font-size:1.2rem;color:var(--hot-4);margin:0 0 14px;letter-spacing:.06em}
.card p{margin:0;font-size:.98rem;color:var(--ink)}
.glyph{display:inline-block;width:10px;height:10px;background:var(--hot-2);
  box-shadow:10px 0 0 var(--warm-mid-2),0 10px 0 var(--warm-3);margin-bottom:20px}

/* 4. headphones */
.phones{position:relative;overflow:hidden;background:
  radial-gradient(80% 120% at 50% 0%,#1a0c06 0%,#0a0507 55%,#000 100%);
  border-top:1px solid rgba(144,48,16,.55);border-bottom:1px solid rgba(144,48,16,.55)}
.phones__wave{position:absolute;left:0;right:0;top:0;height:40px;opacity:.42;
  pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.phones__wave-inner{display:flex;width:200%;animation:drift 26s linear infinite;
  will-change:transform}
.phones__wave-inner svg{width:50%;height:40px;display:block}
.phones__grid{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:start;
  padding-top:14px}
.phones h2{font-size:clamp(1.3rem,3.4vw,2.4rem);color:var(--hot-4);
  text-shadow:0 0 20px rgba(192,48,0,.45)}
.phones__glyph{display:block;animation:pulse 5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@media (max-width:700px){
  .phones__grid{grid-template-columns:1fr;gap:20px}
  .phones__glyph svg{width:60px;height:60px}
}

/* 5. monsters parallax */
.dark{padding-bottom:0;background:var(--void-0)}
.dark__head{margin-bottom:44px}
.parallax{position:relative;overflow:hidden;height:clamp(300px,52vw,620px);
  background:var(--void-0)}
.parallax__img{position:absolute;top:0;left:50%;height:100%;min-width:124%;max-width:none;
  object-fit:cover;object-position:center;
  transform:translate3d(calc(-50% + var(--px,0px)),0,0);will-change:transform}
.parallax__vig{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(105% 90% at 50% 50%,transparent 34%,rgba(0,0,0,.72) 74%,#000 100%),
  linear-gradient(90deg,#000 0%,transparent 16%,transparent 84%,#000 100%)}

/* 6. features */
.feat{list-style:none;margin:0;padding:0;display:grid;gap:22px 40px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.feat li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  font-size:1rem;color:var(--ink)}
.feat__txt{display:block}
.feat b{color:#e8e0d4;font-weight:600}
.feat .glyph{margin:6px 0 0}
@media (max-width:720px){.feat{grid-template-columns:1fr}}

/* 7. screenshots */
.shots__strip{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.shot{padding:0;border:1px solid rgba(64,32,16,.7);background:var(--void-2);
  cursor:pointer;transition:border-color .25s,transform .25s;display:block}
.shot:hover{border-color:var(--hot-3);transform:translateY(-3px)}
.shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hint{margin:18px 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim)}
@media (max-width:760px){
  .shots__strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px;padding-bottom:10px;-webkit-overflow-scrolling:touch}
  .shot{flex:0 0 86%;scroll-snap-align:center}
  .hint{display:none}
}

/* 8. final cta */
.cta{background:radial-gradient(70% 100% at 50% 100%,#150a06 0%,#000 70%);text-align:center}
.cta h2{font-size:clamp(1.35rem,3.6vw,2.5rem);color:#efe6d8;
  text-shadow:0 0 22px rgba(240,128,16,.3)}
.cta p{margin-left:auto;margin-right:auto}

/* ---------- store buttons (needed on legal pages too) ---------- */
.stores{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:34px 0 0}
.store{display:flex;align-items:center;gap:12px;padding:12px 20px;
  border:2px solid var(--warm-3);background:rgba(14,14,16,.72);color:#e8e0d4;
  transition:border-color .2s,background-color .2s,transform .2s}
.store:hover{border-color:var(--hot-3);background:rgba(48,32,16,.7);
  transform:translateY(-2px);color:#fff}
.store svg{flex:0 0 auto;fill:var(--hot-4)}
.store b{display:block;font-family:var(--pixel);font-weight:700;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.store span span{display:block;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim)}
.loop{font-family:var(--mono);font-size:.8rem;letter-spacing:.34em;color:var(--ink-dim);
  text-transform:uppercase}

/* ---------- footer ---------- */
.site-foot{background:var(--void-0);border-top:1px solid rgba(64,32,16,.5);
  padding:34px 0 44px;font-size:.78rem;color:var(--ink-dim)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;
  align-items:center;justify-content:space-between}
.site-foot p{margin:0}
.foot-nav{display:flex;flex-wrap:wrap;gap:20px}
.foot-nav a{color:var(--ink-dim)}
.foot-nav a:hover{color:var(--hot-4)}

/* ---------- legal / prose pages ---------- */
.page-head{padding:120px 0 10px;background:linear-gradient(180deg,#000,var(--void-1))}
.page-head h1{font-size:clamp(1.5rem,4vw,2.5rem)}
.page-head p{margin:16px 0 0;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.prose{padding:40px 0 100px}
.prose>.wrap{max-width:760px}
.prose h2{font-size:clamp(1.2rem,2.8vw,1.7rem);margin:46px 0 16px}
.prose h3{font-size:1.15rem;color:var(--hot-4);margin:32px 0 12px}
.prose p,.prose li{font-size:1.0625rem;color:var(--ink);max-width:70ch}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 20px}
.prose li{margin:0 0 10px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose strong{color:#e8e0d4}
.prose code{font-family:var(--mono);font-size:.92em;color:var(--hot-4);
  background:rgba(48,32,16,.45);padding:1px 5px}
.prose h2+p,.prose h3+p{margin-top:0}
.prose table{display:block;overflow-x:auto;white-space:normal}
.prose hr{border:0;border-top:1px solid rgba(64,32,16,.6);margin:40px 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.95rem}
.prose th,.prose td{border:1px solid rgba(64,32,16,.6);padding:10px 12px;text-align:left}
.prose th{color:var(--hot-4);font-weight:600}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(0,0,0,.94)}
.lb[hidden]{display:none}
.lb__img{max-width:min(94vw,1100px);max-height:86vh;width:auto;
  border:1px solid rgba(64,32,16,.8)}
.lb__close{position:absolute;top:16px;right:16px;padding:10px 14px;
  font-family:var(--pixel);font-weight:700;font-size:.95rem;letter-spacing:.08em;color:var(--hot-4);
  background:transparent;border:1px solid var(--warm-3);cursor:pointer}
.lb__close:hover{border-color:var(--hot-3);color:#fff}
body.lb-open{overflow:hidden}

/* ---------- atmosphere (site-wide) ---------- */
.vig,.grain,.flick{position:fixed;inset:0;pointer-events:none;z-index:60}
.vig{background:radial-gradient(115% 90% at 50% 45%,transparent 42%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.85) 100%)}
.grain{z-index:61;opacity:.03;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px}
.flick{z-index:62;background:#000;opacity:0;
  animation:flick 23s steps(1,end) infinite}
@keyframes flick{
  0%,100%{opacity:0}
  11.2%{opacity:.11}11.7%{opacity:0}
  38.4%{opacity:.07}38.8%{opacity:0}
  57.1%{opacity:.13}57.6%{opacity:0}
  83.9%{opacity:.06}84.3%{opacity:0}
}

/* torch cursor: desktop pointers only */
@media (hover:hover) and (pointer:fine){
  .torch .hero__shade{opacity:.9;
    -webkit-mask-image:radial-gradient(circle 220px at var(--torch-x) var(--torch-y),
      transparent 0%,rgba(0,0,0,.55) 42%,#000 76%);
    mask-image:radial-gradient(circle 220px at var(--torch-x) var(--torch-y),
      transparent 0%,rgba(0,0,0,.55) 42%,#000 76%)}
}

/* pause everything when the tab is hidden */
html.hidden-doc *,html.hidden-doc *::before,html.hidden-doc *::after{
  animation-play-state:paused !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  .beam{opacity:.5;transform:rotate(2deg)}
  .clouds{opacity:.28}
  .clouds--near{opacity:.3}
  .flick{display:none}
  .eyes__pair--a{opacity:.8}
  .torch .hero__shade{-webkit-mask-image:none;mask-image:none;opacity:.6}
  .tower-light{opacity:.95;transform:none}
  .scroll-cue i{animation:none}
  html{scroll-behavior:auto}
}

@media (min-width:761px){html{scroll-behavior:smooth}}