/* =========================================================
   DAYFELL — dayfell.com
   Dusk-to-night palette. Page darkens as you scroll (site.js).
   ========================================================= */
:root {
  --bg-dusk: #262422; --bg-night: #161513; --ink: #121110;
  --panel: rgba(52, 49, 46, .72); --panel-2: rgba(66, 62, 57, .72); --solid: #2a2724;
  --line: rgba(212, 162, 60, .18); --line-2: rgba(212, 162, 60, .38);
  --bone: #e6dcc2; --muted: #a39a8a; --dim: #7d766b;
  --amber: #d4a23c; --gold: #eac46a; --ember: #d4a23c; --blood: #8a3030;
  --added: #86a35f; --changed: #5f93b8; --fixed: #c4574a;
  --pix: "Pixelify Sans", "Silkscreen", ui-monospace, monospace;
  --hud: "Silkscreen", ui-monospace, monospace;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gut: clamp(16px, 4vw, 40px);
  --notch: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
  --notch-lg: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--bg-night); }
body {
  margin: 0; color: var(--bone); background: var(--bg-dusk);
  font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; }
.px, .px img { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold); }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: var(--gut); }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--amber); color: var(--ink); padding: 8px 12px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* page tint: warm glow that fades as night falls (--night 0..1 set by JS) */
.tint { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, rgba(212, 162, 60, calc(.16 * (1 - var(--night, 0)))), transparent 60%),
              radial-gradient(90% 60% at 50% 110%, rgba(60, 52, 40, calc(.18 * var(--night, 0))), transparent 70%); }

/* ---------- icons & buttons ---------- */
.ico { width: 1.05em; height: 1.05em; flex: none; }
.btn { --bg: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font: 700 15px/1 var(--hud); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--bone);
  padding: 15px 22px 17px; border: 0; cursor: pointer; background: var(--bg); clip-path: var(--notch);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28), inset 0 2px 0 rgba(255, 255, 255, .12);
  transition: transform .12s ease, filter .12s ease; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.12); color: var(--bone); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .28); }
.btn-hot { --bg: linear-gradient(180deg, var(--gold) 0%, var(--amber) 42%, #b8862e 100%); color: #1b1616; }
.btn-hot:hover { color: #1b1616; }
.btn-ghost { --bg: rgba(30, 28, 25, .55); color: var(--bone); box-shadow: inset 0 0 0 2px var(--line-2), inset 0 -4px 0 rgba(0, 0, 0, .28); backdrop-filter: blur(4px); }
.btn-sm { font-size: 12px; padding: 11px 15px 13px; }
.btn-lg { font-size: 16px; padding: 18px 26px 20px; }
.btn-xl { font-size: 20px; padding: 22px 34px 24px; }

/* ---------- top bar ---------- */
.topbar { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .25s, box-shadow .25s, backdrop-filter .25s; }
.topbar-in { max-width: 1280px; margin: 0 auto; padding: 12px var(--gut); display: flex; align-items: center; gap: 16px; }
.topbar.scrolled, body:not(.home) .topbar { background: rgba(22, 21, 19, .82); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.brand { display: block; line-height: 0; flex: none; }
.brand img { width: 156px; height: 30px; image-rendering: pixelated; }
.vchip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 700 11px/1 var(--hud); letter-spacing: .06em;
  color: var(--bone); padding: 7px 10px 8px; background: rgba(30, 28, 25, .7); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line-2); flex: none; }
.vchip .vnum { color: var(--gold); }
.vchip .vstate { color: var(--dim); }
.vchip .dot { width: 8px; height: 8px; background: var(--dim); }
.vchip.live .dot { background: var(--added); box-shadow: 0 0 0 3px rgba(134, 163, 95, .25); animation: pulse 1.6s steps(2) infinite; }
.vchip.live .vstate { color: var(--added); }
.vchip:hover { box-shadow: inset 0 0 0 2px var(--amber); color: var(--bone); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(134, 163, 95, 0); opacity: .6; } }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; font: 700 12px/1 var(--hud); letter-spacing: .05em; text-transform: uppercase; padding: 10px 10px; }
.nav a:hover { color: var(--gold); }
.clock { display: flex; align-items: center; gap: 8px; font: 700 12px/1 var(--hud); color: var(--bone); padding: 7px 10px 8px;
  background: rgba(30, 28, 25, .7); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line); white-space: nowrap; }
.clock-ico { width: 10px; height: 10px; background: #e0a24a; box-shadow: 0 0 8px rgba(224, 162, 74, .7); }
body.is-night .clock-ico { background: linear-gradient(90deg, #c9d0d6 50%, #6d7880 50%); box-shadow: 0 0 8px rgba(160, 190, 220, .5); }
.menu { display: none; margin-left: auto; width: 44px; height: 40px; background: rgba(30, 28, 25, .7); border: 0; clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line-2); padding: 11px 12px; cursor: pointer; }
.menu span { display: block; height: 3px; background: var(--bone); margin: 0 0 5px; }
.menu span:last-child { margin: 0; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 640px; height: min(100svh, 1000px); display: flex; align-items: flex-start; overflow: hidden; isolation: isolate; }
.hero-art { position: absolute; inset: 0; z-index: -1; background: #0b0c09; }
.hero-poster, #heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.hero-poster { object-fit: cover; object-position: 42% 70%; }
#heroCanvas { opacity: 0; transition: opacity .9s ease; }
#heroCanvas.on { opacity: 1; }
.hero-fade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(7, 9, 16, .86) 0%, rgba(7, 9, 16, .55) 30%, rgba(7, 9, 16, 0) 58%),
  radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(4, 5, 10, .55) 100%),
  linear-gradient(0deg, var(--bg-dusk) 0%, rgba(38, 36, 34, 0) 14%); }
.hero-copy { position: relative; z-index: 1; padding-top: clamp(96px, 13vh, 150px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 700 12px/1 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
  padding: 8px 12px 9px; background: rgba(8, 10, 18, .6); clip-path: var(--notch); box-shadow: inset 0 0 0 1px rgba(230, 220, 194, .14); backdrop-filter: blur(6px); }
.blip { width: 8px; height: 8px; background: #e05a3a; animation: pulse 1.2s steps(2) infinite; }
.logo-big { margin: 0; line-height: 0; }
.logo-big img { width: min(624px, 88vw); height: auto; image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 32px rgba(6, 8, 16, .9)); animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.tagline { margin: clamp(10px, 2vh, 22px) 0 0; font: 700 clamp(22px, 3.4vw, 40px)/1.1 var(--pix); text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 3px 0 rgba(0, 0, 0, .55); animation: rise .9s .12s both; }
.tagline em { font-style: normal; color: var(--amber); text-shadow: 0 3px 0 rgba(0, 0, 0, .55); }
.lede { max-width: 560px; margin: 14px auto 0; color: #e2d8be; font-size: clamp(15px, 1.5vw, 18px); text-shadow: 0 2px 8px rgba(0, 0, 0, .6); animation: rise .9s .2s both; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; animation: rise .9s .28s both; }
.hero-meta { margin: 14px 0 0; font: 700 11px/1.4 var(--hud); letter-spacing: .08em; color: rgba(230, 220, 194, .75); text-transform: uppercase; text-shadow: 0 2px 4px #000; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; width: 28px; height: 44px; clip-path: var(--notch); box-shadow: inset 0 0 0 2px rgba(230, 220, 194, .5); }
.scroll-cue span { position: absolute; left: 11px; top: 9px; width: 6px; height: 8px; background: var(--bone); animation: cue 1.4s steps(4) infinite; }
@keyframes cue { to { transform: translateY(16px); opacity: 0; } }
.embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ember { position: absolute; bottom: -10px; width: var(--sz, 3px); height: var(--sz, 3px); background: var(--c, #d4a23c); box-shadow: 0 0 6px var(--c, #d4a23c);
  animation: ember var(--t, 9s) linear var(--dl, 0s) infinite; opacity: 0; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 70% { opacity: .7; } 100% { transform: translate(var(--dx, 40px), -95vh); opacity: 0; } }

/* ---------- stats ---------- */
.stats { position: relative; z-index: 3; margin-top: -44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { background: rgba(34, 32, 29, .92); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line); padding: 18px 18px 16px; text-align: center; backdrop-filter: blur(6px); }
.stat b { display: block; font: 700 clamp(26px, 3.2vw, 38px)/1 var(--pix); color: var(--gold); text-shadow: 0 3px 0 #000; }
.stat span { display: block; margin-top: 8px; font: 700 11px/1.3 var(--hud); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- sections ---------- */
.sec { padding-block: clamp(60px, 8vw, 104px); position: relative; }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.eyebrow { margin: 0 0 12px; font: 700 12px/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); display: flex; align-items: center; gap: 10px; }
.sec-head.center .eyebrow { justify-content: center; }
.eyebrow::before { content: ""; width: 18px; height: 4px; background: currentColor; box-shadow: 6px 0 0 var(--ink), 10px 0 0 currentColor; clip-path: inset(0 -12px 0 0); }
h2 { margin: 0; font: 700 clamp(34px, 5.4vw, 64px)/1 var(--pix); text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 4px 0 rgba(0, 0, 0, .45); }
h2 .red { color: var(--ember); }
.sec-head p:not(.eyebrow) { color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); margin: 18px 0 0; }
h3 { font: 700 clamp(22px, 2.4vw, 30px)/1.1 var(--pix); text-transform: uppercase; margin: 0 0 12px; letter-spacing: .01em; }

/* feature rows */
.feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: clamp(56px, 8vw, 104px); }
.feature.flip { grid-template-columns: 1fr 1.3fr; }
.feature.flip .shot { order: 2; }
.feature-copy p { color: var(--muted); margin: 0 0 14px; font-size: 17px; }
.feature-copy .num { font: 700 14px/1 var(--hud); color: var(--amber); letter-spacing: .1em; margin-bottom: 14px; }
.feature-copy .warn { display: flex; gap: 10px; align-items: flex-start; color: #e8d2a4; background: rgba(212, 162, 60, .1); padding: 12px 14px; clip-path: var(--notch); box-shadow: inset 3px 0 0 var(--ember); }
.feature-copy .warn .ico { margin-top: 3px; color: var(--ember); }
.shot { position: relative; background: #141311; padding: clamp(6px, 1vw, 12px); clip-path: var(--notch-lg); cursor: zoom-in;
  box-shadow: inset 0 0 0 2px var(--line-2); transition: transform .3s ease; }
.shot::before { content: ""; position: absolute; inset: -30%; z-index: -1; background: radial-gradient(closest-side, rgba(212, 162, 60, .22), transparent); }
.shot img, .gal-item img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.shot:hover { transform: translateY(-4px); }
.night .shot { box-shadow: inset 0 0 0 2px rgba(95, 147, 184, .35); }
.shot.duo { background: none; padding: 0; clip-path: none; box-shadow: none; display: grid; }
.shot.duo > div { grid-area: 1 / 1; background: #141311; padding: clamp(6px, 1vw, 10px); clip-path: var(--notch-lg); box-shadow: inset 0 0 0 2px var(--line-2); }
.shot.duo > div:first-child { width: 86%; }
.shot.duo > div:last-child { width: 62%; justify-self: end; align-self: end; transform: translateY(40%); box-shadow: inset 0 0 0 2px var(--amber), 0 0 0 1px #000; }
.feature:has(.duo) { margin-bottom: clamp(96px, 12vw, 150px); }

/* gallery */
.gallery { padding-block: 0 clamp(64px, 8vw, 110px); }
.gal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gal-head .hint { margin: 0; color: var(--dim); font: 700 11px/1 var(--hud); letter-spacing: .08em; text-transform: uppercase; }
.gal-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px max(var(--gut), calc((100vw - 1200px) / 2 + var(--gut))) 18px; scrollbar-color: var(--amber) transparent; }
.gal-item { margin: 0; flex: 0 0 min(560px, 82vw); scroll-snap-align: center; background: #141311; padding: 8px; clip-path: var(--notch-lg); box-shadow: inset 0 0 0 2px var(--line); cursor: zoom-in; }
.gal-item figcaption { font: 700 11px/1.3 var(--hud); color: var(--muted); letter-spacing: .05em; text-transform: uppercase; padding: 10px 4px 2px; }
.gal-item:hover { box-shadow: inset 0 0 0 2px var(--amber); }

/* ---------- infected ---------- */
.infected { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .2) 70%, transparent); padding-bottom: 150px; }
.zgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zcard { background: var(--panel); clip-path: var(--notch-lg); box-shadow: inset 0 0 0 2px rgba(212, 162, 60, .22); display: flex; flex-direction: column; }
.zstage { height: 170px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px; position: relative;
  background: radial-gradient(60% 40% at 50% 100%, rgba(212, 162, 60, .25), transparent), linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .1)); }
.zstage::after { content: ""; position: absolute; bottom: 16px; left: 50%; width: 84px; height: 10px; transform: translateX(-50%); background: rgba(0, 0, 0, .45); border-radius: 50%; }
.zbody { padding: 18px 20px 22px; }
.zname { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.zname h3 { margin: 0; }
.ztag { font: 700 10px/1 var(--hud); letter-spacing: .06em; text-transform: uppercase; color: var(--ember); padding: 5px 7px 6px; background: rgba(212, 162, 60, .12); clip-path: var(--notch); }
.zbody > p { color: var(--muted); font-size: 15px; margin: 12px 0 16px; min-height: 3.2em; }
.bars { margin: 0; display: grid; gap: 8px; }
.bars > div { display: grid; grid-template-columns: 58px 1fr 34px; align-items: center; gap: 10px; }
.bars dt { font: 700 10px/1 var(--hud); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.bars dd { margin: 0; height: 8px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); position: relative; }
.bars dd i { position: absolute; inset: 0 auto 0 0; width: var(--v); background: repeating-linear-gradient(90deg, var(--ember) 0 6px, #a8782a 6px 7px); }
.bars span { font: 700 11px/1 var(--hud); color: var(--bone); text-align: right; }

/* in-game walk-cycle sprites (4-frame strips from the game) */
.walker { --s: 7; --fw: 12; --fh: 16; width: calc(var(--fw) * var(--s) * 1px); height: calc(var(--fh) * var(--s) * 1px);
  background-repeat: no-repeat; background-size: calc(var(--fw) * 4 * var(--s) * 1px) 100%; image-rendering: pixelated;
  animation: frames .56s steps(4) infinite; }
@keyframes frames { to { background-position-x: calc(var(--fw) * -4 * var(--s) * 1px); } }
.walk-walker { background-image: url(../sprites/walk_walker.png); }
.walk-cop { background-image: url(../sprites/walk_cop.png); }
.walk-runner { background-image: url(../sprites/walk_runner.png); animation-duration: .34s; }
.walk-bloater { --fw: 16; background-image: url(../sprites/walk_bloater.png); animation-duration: .8s; }
.walk-player { --fh: 17; background-image: url(../sprites/walk_player.png); }
.parade { position: absolute; left: 0; right: 0; bottom: 36px; height: 80px; overflow: hidden; pointer-events: none;
  border-bottom: 2px solid rgba(212, 162, 60, .25); contain: paint; }
.parade .p { --s: 4; position: absolute; bottom: var(--y); left: -90px; animation: frames .56s steps(4) infinite, march var(--d) linear var(--delay) infinite; }
.parade .walk-runner.p { animation: frames .34s steps(4) infinite, march calc(var(--d) * .55) linear var(--delay) infinite; }
.parade .walk-bloater.p { animation: frames .8s steps(4) infinite, march calc(var(--d) * 1.4) linear var(--delay) infinite; }
@keyframes march { to { transform: translateX(calc(100vw + 180px)); } }

/* ---------- arsenal ---------- */
.wgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wcard { background: var(--panel); clip-path: var(--notch-lg); box-shadow: inset 0 0 0 2px var(--line); padding: 22px; }
.wicon { width: 112px; height: 112px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25)); clip-path: var(--notch); box-shadow: inset 0 0 0 2px rgba(212, 162, 60, .6); }
.wicon img { width: 84px; height: 84px; image-rendering: pixelated; }
.wcard h3 { font-size: 22px; margin-bottom: 6px; }
.wcard .dmg { margin: 0 0 10px; font: 700 12px/1 var(--hud); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wcard .dmg b { color: var(--ember); font-size: 18px; }
.wcard p { color: var(--muted); font-size: 15px; margin: 0 0 10px; }
.wcard .how { font: 700 10px/1 var(--hud); color: var(--amber); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.workbench { margin-top: 28px; background: rgba(30, 28, 25, .7); clip-path: var(--notch-lg); box-shadow: inset 0 0 0 2px var(--line); padding: clamp(18px, 3vw, 32px); }
.wb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.wb-head h3 { margin-bottom: 6px; }
.wb-head p { margin: 0; color: var(--dim); font-size: 15px; max-width: 520px; }
.tiers { display: flex; gap: 6px; }
.tier { font: 700 11px/1 var(--hud); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: rgba(0, 0, 0, .35); border: 0; padding: 10px 12px 11px; cursor: pointer; clip-path: var(--notch); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); }
.tier.on.t-rusty { color: #e8e0d0; box-shadow: inset 0 0 0 2px #7d776b; background: rgba(125, 119, 107, .25); }
.tier.on.t-standard { color: #d4e6f4; box-shadow: inset 0 0 0 2px #5584a6; background: rgba(85, 132, 166, .25); }
.tier.on.t-upgraded { color: #ffe7a8; box-shadow: inset 0 0 0 2px #d4a23c; background: rgba(212, 162, 60, .22); }
.wb-grid { --tc: #5584a6; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.wb-grid[data-tier=rusty] { --tc: #7d776b; } .wb-grid[data-tier=upgraded] { --tc: #d4a23c; }
.wb-item { margin: 0; text-align: center; }
.wb-item img { display: block; width: 96px; height: 96px; margin: 0 auto 8px; padding: 12px; box-sizing: content-box; max-width: calc(100% - 24px); height: auto; aspect-ratio: 1;
  image-rendering: pixelated; background: #1e1c1a; clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--tc); transition: box-shadow .2s; }
.wb-item figcaption { font: 700 10px/1.2 var(--hud); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* ---------- survivors ---------- */
.sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.scard { background: var(--panel); clip-path: var(--notch-lg); box-shadow: inset 0 0 0 2px var(--line); padding: 24px 22px; text-align: center; position: relative; }
.scard::after { content: "Concept"; position: absolute; top: 12px; right: 12px; font: 700 9px/1 var(--hud); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.scard img { width: 128px; height: 128px; image-rendering: pixelated; display: block; margin: 6px auto 16px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
.scard .role { font: 700 11px/1 var(--hud); color: var(--amber); letter-spacing: .08em; text-transform: uppercase; margin: -4px 0 10px; }
.scard p:last-child { color: var(--muted); font-size: 15px; margin: 0; }
.scard.boss { box-shadow: inset 0 0 0 2px rgba(212, 162, 60, .45); background: linear-gradient(180deg, rgba(0, 0, 0, .3), var(--panel)); }
.scard.boss .role { color: var(--ember); }

/* ---------- updates ---------- */
.notes { display: grid; gap: 12px; max-width: 900px; }
.note { background: var(--panel); clip-path: var(--notch-lg); box-shadow: inset 0 0 0 2px var(--line); }
.note.first { box-shadow: inset 0 0 0 2px var(--line-2); }
.note > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 20px 24px; }
.note > summary::-webkit-details-marker { display: none; }
.note > summary::after { content: "+"; margin-left: auto; font: 700 18px/1 var(--hud); color: var(--amber); }
.note[open] > summary::after { content: "−"; }
.nv { font: 700 22px/1 var(--pix); color: var(--gold); }
.nt { font-weight: 600; font-size: 18px; }
.nd { color: var(--dim); font-size: 14px; }
.badge { font: 700 10px/1 var(--hud); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 5px 8px 6px; background: rgba(255, 255, 255, .06); clip-path: var(--notch); }
.badge.live { color: #1b1616; background: var(--added); }
.note-body { padding: 0 24px 24px; border-top: 1px solid var(--line); }
.chg h4 { margin: 20px 0 8px; font: 700 12px/1 var(--hud); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.chg h4::before { content: ""; width: 10px; height: 10px; background: currentColor; }
.chg-added h4 { color: var(--added); } .chg-changed h4 { color: var(--changed); } .chg-fixed h4 { color: var(--fixed); }
.chg ul { margin: 0; padding-left: 20px; color: #ddd2b8; }
.chg li { margin: 5px 0; }
.chg li::marker { color: var(--dim); }
.note-body .btn { margin-top: 22px; }
.more { margin: 22px 0 0; font: 700 13px/1 var(--hud); letter-spacing: .06em; text-transform: uppercase; }
.more a { text-decoration: none; }
.empty { color: var(--dim); }

/* ---------- platforms ---------- */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; margin: 0 auto; }
.pcard { background: var(--panel); clip-path: var(--notch-lg); box-shadow: inset 0 0 0 2px var(--line); padding: 30px 24px; text-align: center; position: relative; }
.pcard .pico { width: 56px; height: 56px; color: var(--dim); margin-bottom: 12px; }
.pcard.on { box-shadow: inset 0 0 0 2px var(--amber); background: linear-gradient(180deg, rgba(212, 162, 60, .12), var(--panel)); }
.pcard.on .pico { color: var(--gold); }
.pcard h3 { font-size: 24px; margin-bottom: 4px; }
.pcard p { margin: 0 0 18px; color: var(--muted); }
.pcard .soon { display: inline-block; font: 700 11px/1 var(--hud); letter-spacing: .1em; text-transform: uppercase; color: var(--ember); padding: 8px 10px 9px; box-shadow: inset 0 0 0 2px rgba(212, 162, 60, .5); clip-path: var(--notch); transform: rotate(-3deg); }

/* ---------- signup ---------- */
.signup { padding-block: clamp(40px, 6vw, 80px); }
.signup-in { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(32px, 5vw, 64px);
  background: linear-gradient(90deg, rgba(20, 19, 17, .92) 0%, rgba(20, 19, 17, .7) 60%, rgba(20, 19, 17, .5)), url(../art/hero_poster.jpg) 50% 70% / cover; image-rendering: pixelated;
  clip-path: var(--notch-lg); box-shadow: inset 0 0 0 2px var(--line-2); }
.signup-in > div, .signup-form { padding-inline: clamp(8px, 2vw, 24px); }
.signup-in h2 { font-size: clamp(32px, 4.4vw, 54px); }
.signup-in > div > p:last-child { color: #ddd2b8; margin: 16px 0 0; }
.field { display: flex; gap: 10px; flex-wrap: wrap; }
.field input { flex: 1 1 220px; min-width: 0; font: 500 17px var(--body); color: var(--bone); background: rgba(0, 0, 0, .55); border: 0; padding: 16px 16px; clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line-2); }
.field input::placeholder { color: var(--dim); }
.field input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--amber); }
.form-msg { min-height: 1.4em; margin: 12px 0 0; font-weight: 600; color: var(--added); }
.form-msg.err { color: var(--fixed); }
.fine { margin: 6px 0 0; font-size: 13px; color: var(--dim); }

/* ---------- download ---------- */
.dl-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.dl-card { text-align: center; padding: clamp(28px, 4vw, 48px) 24px; background: radial-gradient(80% 60% at 50% 0%, rgba(212, 162, 60, .2), transparent), var(--panel); clip-path: var(--notch-lg); box-shadow: inset 0 0 0 2px var(--line-2); }
.dl-logo { width: min(312px, 80%); height: auto; image-rendering: pixelated; display: block; margin: 0 auto 18px; }
.dl-ver { font: 700 13px/1 var(--hud); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 22px; }
.dl-meta { color: var(--dim); font-size: 14px; margin: 18px 0 10px; }
.sha { font: 600 12px var(--body); color: var(--dim); background: none; border: 0; cursor: pointer; }
.sha code { color: var(--muted); } .sha span { color: var(--amber); }
.install h3 { font-size: 26px; }
.install ol { margin: 0 0 24px; padding-left: 22px; color: #ddd2b8; }
.install li { margin: 8px 0; }
.install b { color: var(--bone); }
.faq details { background: var(--panel); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line); margin-bottom: 8px; }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 16px/1 var(--hud); color: var(--amber); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0; padding: 0 16px 16px; color: var(--muted); }

/* ---------- footer ---------- */
.foot { padding-block: 48px 40px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .35); }
.foot-in { display: grid; grid-template-columns: 1fr auto; gap: 18px 32px; align-items: center; }
.foot-brand img { width: 156px; height: 30px; image-rendering: pixelated; }
.foot-brand p { margin: 8px 0 0; color: var(--dim); font: 700 11px/1.4 var(--hud); letter-spacing: .08em; text-transform: uppercase; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-nav a { color: var(--muted); text-decoration: none; font: 700 12px/1 var(--hud); letter-spacing: .05em; text-transform: uppercase; }
.foot-nav a:hover { color: var(--gold); }
.foot-legal { grid-column: 1 / -1; margin: 0; color: var(--dim); font-size: 13px; }

/* ---------- lightbox ---------- */
.lightbox[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(12, 11, 10, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.lightbox img { max-width: min(96vw, 1600px); max-height: 82vh; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--line-2), 0 20px 60px #000; }
.lb-cap { font: 700 12px/1.3 var(--hud); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.lb-close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; font: 700 28px/1 var(--hud); color: var(--bone); background: rgba(255, 255, 255, .06); border: 0; cursor: pointer; clip-path: var(--notch); }

/* ---------- sub pages ---------- */
.page { padding-top: 120px; }
.page .sec { padding-top: 24px; }
.prose { max-width: 760px; color: #ddd2b8; }
.prose h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 18px; }
.prose h3 { font-size: 20px; margin: 32px 0 8px; }
.timeline .note { margin-bottom: 0; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav { position: fixed; top: 64px; right: var(--gut); left: var(--gut); flex-direction: column; gap: 0; padding: 8px; background: rgba(24, 22, 20, .97);
    clip-path: var(--notch-lg); box-shadow: inset 0 0 0 2px var(--line-2); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 16px 14px; font-size: 14px; }
  .clock { display: none; }
  .menu { display: block; }
  .top-dl { margin-left: auto; }
  .menu { margin-left: 0; }
  .zgrid, .wgrid, .sgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .feature, .feature.flip { grid-template-columns: 1fr; }
  .feature.flip .shot { order: 0; }
  .signup-in, .dl-in { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: 1fr; max-width: 420px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .foot-in { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .brand img { width: 117px; height: 22.5px; }
  .logo-big img { width: 312px; }
  .vchip .vstate { display: none; }
  .top-dl { display: none; }
  .menu { margin-left: auto; }
  .hero { min-height: 700px; }
  .zgrid, .wgrid, .sgrid { grid-template-columns: 1fr; }
  .btn-lg { width: 100%; }
  .wicon { width: 96px; height: 96px; } .wicon img { width: 72px; height: 72px; }
  .shot.duo > div:last-child { transform: translateY(24%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
.nav a { white-space: nowrap; }