/* ============================================================
   ZIII / shared styles, used by every page
   Foil Games
   ------------------------------------------------------------
   Re-theming: every colour, font and metric lives in :root.
   Change a token here and it updates the whole site.
   ============================================================ */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Brand, sampled from the Steam capsule art */
  --green:#329D26;
  --green-bright:#46C036;
  --green-deep:#217018;
  --green-dark:#14400F;

  /* Surfaces: green-tinted near-black */
  --ink-900:#070B07;
  --ink-800:#0C130B;
  --ink-700:#131C11;
  --ink-600:#1B271A;
  --line:#26361F;
  --line-soft:#1D2A18;

  /* Text */
  --fg:#EAF1E6;
  --fg-dim:#9BAE96;
  --fg-faint:#68785F;

  /* Support accents */
  --gold:#E8B944;      /* treasure / vault */
  --cream:#F2EFE1;     /* manual paper */
  --blood:#C4453A;     /* hearts, warnings */

  /* Elemental biomes */
  --el-desert:#E2A24F;
  --el-forest:#329D26;
  --el-ice:#78CFF2;
  --el-fire:#EF6A4B;

  /* Type */
  --font-display:'Cinzel', 'Times New Roman', Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-pixel:'Silkscreen', 'Courier New', ui-monospace, monospace;

  /* Metrics */
  --wrap:1180px;
  --wrap-narrow:740px;
  --r-sm:4px;
  --r-md:10px;
  --r-lg:18px;
  --gutter:clamp(20px, 5vw, 48px);
  --section-y:clamp(72px, 11vw, 136px);

  --shadow-lift:0 20px 56px -24px rgba(0,0,0,.9);
  --shadow-card:0 2px 0 0 var(--line-soft), 0 24px 48px -34px #000;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset & base --------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:84px; }
body{
  margin:0;
  background:var(--ink-900);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:clamp(15px,.35vw + 14.4px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--green-bright); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--fg); }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.12; margin:0 0 .5em; text-wrap:balance; }
h1{ font-size:clamp(2.6rem,8vw,5.2rem); font-weight:900; letter-spacing:.02em; }
h2{ font-size:clamp(1.8rem,4vw,2.9rem); }
h3{ font-size:clamp(1.1rem,1.6vw,1.35rem); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0 0 1.1em; padding-left:1.25em; }
:focus-visible{ outline:3px solid var(--green-bright); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--green); color:#fff; }

/* ---------- 3. Utilities ------------------------------------------------- */
.wrap{ width:min(100% - var(--gutter)*2, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ max-width:var(--wrap-narrow); }
.section{ padding-block:var(--section-y); position:relative; }
.section--alt{ background:var(--ink-800); border-block:1px solid var(--line-soft); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{
  position:absolute; left:10px; top:-60px; z-index:200;
  background:var(--green); color:#fff; font-weight:600; padding:.7em 1.1em;
  border-radius:var(--r-sm); text-decoration:none; transition:top .18s var(--ease);
}
.skip-link:focus{ top:10px; }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }
.center .lede{ margin-inline:auto; }

/* Pixel eyebrow: the site's signature retro accent */
.eyebrow{
  font-family:var(--font-pixel); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-bright);
  margin:0 0 1rem; display:flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:9px; height:9px; flex:none; background:var(--green-bright);
  box-shadow:13px 0 0 -2px var(--green-deep);
}
.lede{ font-size:clamp(1.02rem,1.5vw,1.22rem); color:var(--fg-dim); max-width:62ch; }
.rule{ border:0; border-top:1px solid var(--line); margin:0; }

/* Scroll reveal */
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- 4. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-pixel); font-size:.78rem; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; text-align:center;
  background:var(--green); color:#fff; border:0; border-radius:var(--r-sm);
  padding:1.05em 1.5em; cursor:pointer; position:relative; top:0;
  box-shadow:0 4px 0 0 var(--green-deep);
  transition:top .12s var(--ease), box-shadow .12s var(--ease), background .18s var(--ease);
}
.btn:hover{ top:2px; box-shadow:0 2px 0 0 var(--green-deep); background:var(--green-bright); color:#fff; }
.btn:active{ top:4px; box-shadow:none; }
.btn--ghost{ background:transparent; color:var(--fg); box-shadow:0 4px 0 0 var(--line); border:1px solid var(--line); }
.btn--ghost:hover{ background:var(--ink-600); color:var(--fg); box-shadow:0 2px 0 0 var(--line); border-color:var(--green); }
.btn--sm{ padding:.7em 1em; font-size:.66rem; box-shadow:0 3px 0 0 var(--green-deep); }
.btn--sm.btn--ghost{ box-shadow:0 3px 0 0 var(--line); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; }

/* ---------- 5. Header ---------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--ink-900) 84%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck{ border-bottom-color:var(--line); background:color-mix(in srgb, var(--ink-900) 96%, transparent); }
.site-header__inner{ display:flex; align-items:center; gap:1.25rem; min-height:66px; }
.brand{ display:inline-flex; align-items:center; flex:none; text-decoration:none; }
.brand img{ height:26px; width:auto; }
.site-nav{ margin-left:auto; display:flex; align-items:center; gap:.25rem; }
.site-nav a:not(.btn){
  font-size:.9rem; font-weight:500; color:var(--fg-dim); text-decoration:none;
  padding:.55em .8em; border-radius:var(--r-sm); white-space:nowrap;
  transition:color .18s, background .18s;
}
.site-nav a:not(.btn):hover{ color:var(--fg); background:var(--ink-700); }
.site-nav a[aria-current="page"]{ color:var(--green-bright); background:var(--ink-700); }
.nav-toggle{
  display:none; margin-left:auto; background:transparent; border:1px solid var(--line);
  color:var(--fg); border-radius:var(--r-sm); padding:.5em .65em; cursor:pointer; line-height:0;
}

/* ---------- 6. Hero ------------------------------------------------------ */
/* The character silhouette carries the hero: oversized, bleeding off the right
   and bottom edges, and masked so it dissolves before it reaches the copy. */
.hero{
  position:relative; overflow:hidden;
  min-height:clamp(540px, 80vh, 820px);
  display:flex; align-items:center;
  padding-block:clamp(52px,8vw,92px);
  background:
    radial-gradient(52% 62% at 68% 44%, rgba(50,157,38,.20), transparent 72%),
    radial-gradient(90% 70% at 6% 100%, rgba(50,157,38,.06), transparent 62%),
    var(--ink-900);
}
.hero__sil{
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  right:clamp(-110px, -2vw, 0px);
  bottom:-9%;
  height:132%; width:auto; max-width:none;
  /* Dissolve the left edge so the figure never competes with the headline. */
  -webkit-mask-image:linear-gradient(to left, #000 46%, rgba(0,0,0,.4) 72%, transparent 95%);
          mask-image:linear-gradient(to left, #000 46%, rgba(0,0,0,.4) 72%, transparent 95%);
}
/* faint scanlines, deliberately subtle */
.hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.45;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}
.hero__inner{ position:relative; z-index:3; max-width:37rem; }
.hero__wordmark{ width:min(100%,430px); margin:0 0 1.3rem; }
.hero__wordmark img{
  width:100%;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.85));
}
.hero__tag{
  font-family:var(--font-pixel); font-size:clamp(.74rem,1.4vw,.92rem);
  letter-spacing:.1em; text-transform:uppercase; color:var(--green-bright);
  margin:0 0 1.3rem; line-height:1.7;
}
.hero__blurb{
  font-size:clamp(1.02rem,1.4vw,1.16rem); color:var(--fg);
  max-width:44ch; margin-bottom:1.9rem;
  text-shadow:0 1px 12px rgba(7,11,7,.9);
}
.hero__meta{
  list-style:none; padding:0; margin:1.9rem 0 0;
  display:flex; flex-wrap:wrap; gap:.5rem;
  font-family:var(--font-pixel); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
}
.hero__meta li{
  border:1px solid var(--line); border-radius:999px; padding:.5em .95em; color:var(--fg-dim);
  background:color-mix(in srgb, var(--ink-900) 72%, transparent);
  backdrop-filter:blur(3px);
}
/* Scroll cue at the foot of the hero */
.hero__cue{
  position:absolute; left:50%; bottom:18px; z-index:3; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--font-pixel); font-size:.52rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-faint); text-decoration:none;
}
.hero__cue:hover{ color:var(--green-bright); }
.hero__cue svg{ animation:cue-bob 2.4s ease-in-out infinite; }
@keyframes cue-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

/* ---------- 7. Ticker ---------------------------------------------------- */
.ticker{ border-block:1px solid var(--line); background:var(--ink-800); overflow:hidden; padding:.8rem 0; display:flex; user-select:none; }
.ticker__track{
  display:flex; flex:none; align-items:center; gap:2.2rem; padding-right:2.2rem;
  animation:ticker 46s linear infinite;
  font-family:var(--font-pixel); font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fg-dim); white-space:nowrap;
}
.ticker__track b{ font-weight:400; display:inline-flex; align-items:center; gap:2.2rem; }
.ticker__track b::after{ content:"◆"; color:var(--green); font-size:.55rem; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ---------- 8. Media frame (trailer) ------------------------------------- */
.media-frame{
  position:relative; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; background:#000; box-shadow:var(--shadow-lift); aspect-ratio:16/9;
}
.media-frame video,
.media-frame img,
.media-frame iframe{ width:100%; height:100%; object-fit:cover; display:block; border:0; }
.media-frame__play{
  position:absolute; inset:0; width:100%; border:0; cursor:pointer; color:var(--fg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
  background:linear-gradient(0deg, rgba(7,11,7,.75), rgba(7,11,7,.1));
  font-family:var(--font-pixel); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  transition:background .25s var(--ease);
}
.media-frame__play:hover{ background:linear-gradient(0deg, rgba(7,11,7,.55), transparent); }
.media-frame__play svg circle{ transition:fill .2s var(--ease); }
.media-frame__play:hover svg circle{ fill:var(--green-bright); }
.media-frame.is-playing .media-frame__play{ display:none; }

/* ---------- 9. Split / prose --------------------------------------------- */
.split{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,68px); align-items:start; }
.split__aside{ min-width:0; }
.pull{
  font-family:var(--font-display); font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.4;
  color:var(--fg); border-left:3px solid var(--green); padding-left:1.1rem; margin:1.8rem 0;
}
.prose p{ color:var(--fg-dim); }
.prose strong{ color:var(--fg); font-weight:600; }

/* Stat strip */
.stats{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.stats li{ background:var(--ink-800); padding:1.35rem 1.15rem; }
.stats b{ display:block; font-family:var(--font-display); font-size:1.8rem; font-weight:900; color:var(--gold); line-height:1; }
.stats small{ display:block; margin-top:.5rem; font-family:var(--font-pixel); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); }

/* ---------- 10. Grids & cards -------------------------------------------- */
.grid{ display:grid; gap:clamp(14px,1.8vw,22px); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

.card{
  background:var(--ink-800); border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(1.3rem,2.2vw,1.9rem); box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--green) 55%, var(--line)); }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--fg-dim); font-size:.94rem; margin:0; }
.card__num{ font-family:var(--font-pixel); font-size:.64rem; color:var(--green-bright); letter-spacing:.1em; display:block; margin-bottom:.9rem; }

/* Biome cards */
.biome{
  position:relative; overflow:hidden; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--ink-800); padding:1.5rem 1.3rem 1.4rem; min-height:172px;
  display:flex; flex-direction:column; transition:transform .3s var(--ease);
}
.biome:hover{ transform:translateY(-4px); }
.biome::before{
  content:""; position:absolute; inset:0; opacity:.7; transition:opacity .3s var(--ease);
  background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--biome) 30%, transparent), transparent 72%);
}
.biome:hover::before{ opacity:1; }
.biome::after{ content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--biome); }
.biome > *{ position:relative; }
.biome__mark{ font-family:var(--font-pixel); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--biome); margin-bottom:auto; }
.biome h3{ font-size:1.08rem; margin:1.4rem 0 .35rem; }
.biome p{ font-size:.86rem; color:var(--fg-dim); margin:0; }

/* ---------- 11. Gallery + lightbox --------------------------------------- */
.shot{
  position:relative; padding:0; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; background:var(--ink-700); cursor:zoom-in; aspect-ratio:16/9; width:100%;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.shot:hover{ border-color:var(--green); transform:translateY(-3px); }
.shot:hover img{ transform:scale(1.04); }
.lightbox{ border:0; padding:0; background:transparent; max-width:min(1280px,94vw); max-height:96vh; color:var(--fg); overflow:visible; }
.lightbox::backdrop{ background:rgba(3,6,3,.92); backdrop-filter:blur(6px); }
.lightbox img{ border-radius:var(--r-md); border:1px solid var(--line); max-height:80vh; width:auto; margin-inline:auto; }
.lightbox__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.85rem; font-family:var(--font-pixel); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-dim); }
.lightbox__bar div{ display:flex; gap:.5rem; }
.lightbox__bar button{ background:transparent; border:1px solid var(--line); color:var(--fg); font:inherit; padding:.6em .9em; border-radius:var(--r-sm); cursor:pointer; }
.lightbox__bar button:hover{ border-color:var(--green); color:var(--green-bright); }

/* ---------- 11b. Co-op band ---------------------------------------------- */
/* Given its own treatment rather than another card, because online play is a
   headline feature and shouldn't read as one bullet among many. */
.coop{
  position:relative; overflow:hidden;
  border-block:1px solid var(--line);
  background:
    radial-gradient(75% 90% at 15% 0%, rgba(50,157,38,.24), transparent 62%),
    radial-gradient(60% 80% at 92% 100%, rgba(50,157,38,.12), transparent 60%),
    var(--ink-800);
}
.coop__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,68px); align-items:center;
}
.coop__figure{
  margin:0; position:relative; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-lift);
}
.coop__figure img{ width:100%; display:block; image-rendering:pixelated; }
.coop__figure figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.6rem .9rem .7rem;
  font-family:var(--font-pixel); font-size:.56rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--fg);
  background:linear-gradient(0deg, rgba(7,11,7,.92), transparent);
}
.coop__points{ list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:.9rem; }
.coop__points li{
  display:flex; gap:.85rem; align-items:flex-start;
  font-size:.96rem; color:var(--fg-dim);
}
.coop__points svg{ flex:none; margin-top:.22em; color:var(--green-bright); }
.coop__points strong{ color:var(--fg); font-weight:600; }
.coop__badge{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-pixel); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green-bright);
  border:1px solid var(--green); border-radius:999px; padding:.55em 1em;
  background:color-mix(in srgb, var(--green) 12%, transparent);
  margin-bottom:1.1rem;
}

/* ---------- 12. Feature band --------------------------------------------- */
.band{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:radial-gradient(90% 150% at 100% 0%, rgba(50,157,38,.20), transparent 62%), var(--ink-800);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
  gap:clamp(24px,4vw,48px); align-items:center; padding:clamp(1.7rem,4vw,3rem);
}
.band img{ border-radius:var(--r-md); border:1px solid var(--line); }

/* ---------- 13. Footer --------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); background:var(--ink-800); padding-block:clamp(40px,6vw,68px) 1.8rem; }
.site-footer__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(130px,1fr)); gap:2.4rem; }
.site-footer h4{ font-family:var(--font-pixel); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim); margin:0 0 1rem; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.site-footer a{ color:var(--fg-dim); text-decoration:none; font-size:.9rem; }
.site-footer a:hover{ color:var(--green-bright); }
.site-footer__logo img{ height:64px; width:auto; margin-bottom:1rem; }
.site-footer__legal{
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:space-between;
  font-size:.8rem; color:var(--fg-faint);
}

/* ---------- 14. Press kit ------------------------------------------------ */
.page-head{ padding-block:clamp(44px,7vw,80px) clamp(26px,4vw,42px); border-bottom:1px solid var(--line); background:var(--ink-800); }
.presskit-layout{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start; }
.toc-rail{ position:sticky; top:96px; }
.toc-rail ul{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem; border-left:1px solid var(--line); }
.toc-rail a{ display:block; padding:.45em .9em; margin-left:-1px; border-left:2px solid transparent; color:var(--fg-dim); text-decoration:none; font-size:.86rem; }
.toc-rail a:hover{ color:var(--fg); }
.toc-rail a.is-active{ color:var(--green-bright); border-left-color:var(--green); }
.pk-section{ scroll-margin-top:90px; padding-bottom:clamp(38px,6vw,64px); }
.pk-section > h2{ font-size:clamp(1.5rem,2.6vw,2rem); }

.factsheet{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.factsheet li{ background:var(--ink-800); display:grid; grid-template-columns:minmax(110px,170px) 1fr; gap:1rem; padding:.9rem 1.15rem; align-items:baseline; }
.factsheet .k{ font-family:var(--font-pixel); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); }
.factsheet .v{ color:var(--fg); font-size:.93rem; }
.factsheet .v a{ word-break:break-word; }

.copyblock{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--ink-800); padding:1.3rem 1.4rem; }
.copyblock + .copyblock{ margin-top:1rem; }
.copyblock__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.copyblock__head h3{ margin:0; font-size:.98rem; }
.copyblock p{ color:var(--fg-dim); font-size:.94rem; }
.copy-btn{
  font-family:var(--font-pixel); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; border:1px solid var(--line); color:var(--fg-dim);
  padding:.55em .8em; border-radius:var(--r-sm); cursor:pointer; flex:none;
  transition:color .18s, border-color .18s;
}
.copy-btn:hover{ color:var(--green-bright); border-color:var(--green); }
.copy-btn.is-done{ color:var(--green-bright); border-color:var(--green-bright); }

.asset{ display:block; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--ink-700); text-decoration:none; }
.asset img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.asset--tall img{ aspect-ratio:3/4; object-fit:contain; background:var(--ink-900); padding:.8rem; }
.asset__meta{ padding:.75rem .95rem; display:flex; justify-content:space-between; gap:.7rem; font-family:var(--font-pixel); font-size:.58rem; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-dim); }
.asset:hover{ border-color:var(--green); }
.asset:hover .asset__meta{ color:var(--green-bright); }

.note{ border:1px solid var(--line); border-left:3px solid var(--green); border-radius:var(--r-sm); padding:1rem 1.2rem; background:var(--ink-800); font-size:.9rem; color:var(--fg-dim); }
.note strong{ color:var(--fg); }

/* ---------- 14b. Art credits page ---------------------------------------- */

/* Commissioned work gets its own billing. A named artist paid to make
   something original shouldn't sit in the same list as a bought pack. */
.commission{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,3vw,36px); align-items:center;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:
    radial-gradient(80% 120% at 20% 0%, rgba(50,157,38,.16), transparent 62%),
    var(--ink-800);
  padding:clamp(1.4rem,3vw,2.2rem);
}
.commission__art{
  border-radius:var(--r-sm); padding:1.2rem; display:grid; place-items:center;
  background:
    linear-gradient(0deg, rgba(7,11,7,.35), rgba(7,11,7,.35)),
    repeating-conic-gradient(var(--ink-700) 0% 25%, var(--ink-600) 0% 50%) 0 0 / 18px 18px;
  border:1px solid var(--line); min-height:120px;
}
.commission__art img{
  image-rendering:pixelated;
  width:100%; max-width:340px; height:auto;
}
.commission__by h3{ margin:0 0 .2rem; font-size:1.25rem; }
.commission__role{
  font-family:var(--font-pixel); font-size:.56rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--green-bright); margin:0 0 .9rem;
}
.commission__by p{ color:var(--fg-dim); font-size:.94rem; }

@media (max-width:720px){
  .commission{ grid-template-columns:1fr; }
}

/* Credits are grouped by artist, so the person is the heading and their
   packs sit under it, billing the people and not just the downloads. */
.creators{ display:grid; gap:1.8rem; }
.creator__name{
  font-family:var(--font-body); font-size:.94rem; font-weight:600; color:var(--fg);
  margin:0 0 .7rem; display:flex; align-items:baseline; gap:.7em;
  padding-bottom:.5rem; border-bottom:1px solid var(--line);
}
.creator__name span{
  font-family:var(--font-pixel); font-size:.54rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-faint); margin-left:auto;
}
.creator__packs{ display:grid; gap:.5rem; }
.pack__body h4{
  margin:0 0 .15rem; font-size:.94rem; font-family:var(--font-body);
  font-weight:500; color:var(--fg);
}

/* A licensed asset pack */
.pack{
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center;
  background:var(--ink-800); border:1px solid var(--line); border-radius:var(--r-md);
  padding:1rem 1.2rem; text-decoration:none;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.pack:hover{ border-color:var(--green); transform:translateY(-2px); }
.pack__mark{
  width:38px; height:38px; border-radius:6px; flex:none; display:grid; place-items:center;
  background:var(--ink-600); color:var(--green-bright);
}
.pack__body h3{ margin:0 0 .2rem; font-size:1rem; font-family:var(--font-body); font-weight:600; color:var(--fg); }
.pack__body p{ margin:0; font-size:.86rem; color:var(--fg-dim); }
.pack__by{ color:var(--fg-faint); }
.pack__go{
  font-family:var(--font-pixel); font-size:.56rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-faint); white-space:nowrap;
}
.pack:hover .pack__go{ color:var(--green-bright); }

/* One AI-generated image, labelled. Where a set was generated the same way,
   one image stands for the set and the count is stated. */
.ai-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(14px,2vw,20px); }
.ai-item{
  margin:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:var(--ink-800); display:flex; flex-direction:column;
}
.ai-item__frame{ position:relative; background:var(--ink-700); }
.ai-item__frame img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.ai-item__frame--pixel img{ image-rendering:pixelated; }
/* Sprites arrive on transparency, so they sit on a backdrop and are shown
   whole rather than cropped to fill the card. */
.ai-item__frame--contain{
  background:
    linear-gradient(0deg, rgba(7,11,7,.45), rgba(7,11,7,.45)),
    repeating-conic-gradient(var(--ink-700) 0% 25%, var(--ink-600) 0% 50%) 0 0 / 16px 16px;
}
.ai-item__frame--contain img{ object-fit:contain; padding:1rem; }
.ai-item__tag{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  font-family:var(--font-pixel); font-size:.5rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.45em .7em; border-radius:3px;
  background:rgba(7,11,7,.86); color:#E8B944;
  border:1px solid color-mix(in srgb, #E8B944 45%, transparent);
}
.ai-item__body{ padding:1rem 1.15rem 1.15rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.ai-item__body h3{ margin:0; font-size:1rem; font-family:var(--font-body); font-weight:600; }
.ai-item__count{
  font-family:var(--font-pixel); font-size:.54rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--green-bright); margin:0;
}
.ai-item__body p:last-child{ font-size:.9rem; color:var(--fg-dim); margin:.2rem 0 0; }
.compare__empty{
  aspect-ratio:16/10; display:grid; place-items:center; padding:1rem; text-align:center;
  font-family:var(--font-pixel); font-size:.54rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-faint);
  background:repeating-linear-gradient(45deg, var(--ink-700) 0 10px, var(--ink-800) 10px 20px);
}

@media (max-width:640px){
  .pack{ grid-template-columns:auto 1fr; }
  .pack__go{ grid-column:2; }
}

/* ---------- 14c. Soundtrack ---------------------------------------------- */
.ost-list{ list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.ost-row{
  display:grid; grid-template-columns:2.4rem 1fr auto auto; gap:.9rem; align-items:center;
  padding:.75rem 1rem; background:var(--ink-800); border-bottom:1px solid var(--line-soft);
  cursor:pointer; transition:background .15s var(--ease);
}
.ost-row:last-child{ border-bottom:0; }
.ost-row:hover{ background:var(--ink-700); }
.ost-row__num{
  font-family:var(--font-pixel); font-size:.58rem; color:var(--fg-faint);
  text-align:right; font-variant-numeric:tabular-nums;
}
.ost-row__title{ font-size:.96rem; color:var(--fg); min-width:0; }
.ost-row__time{
  font-family:var(--font-pixel); font-size:.56rem; color:var(--fg-dim);
  font-variant-numeric:tabular-nums;
}
.ost-row__dl{
  color:var(--fg-faint); line-height:0; padding:.35rem; border-radius:4px;
}
.ost-row__dl:hover{ color:var(--green-bright); background:var(--ink-600); }
.ost-row.is-playing{ background:var(--ink-700); }
.ost-row.is-playing .ost-row__title{ color:var(--green-bright); font-weight:600; }
.ost-row.is-playing .ost-row__num{ color:var(--green); }
/* Equaliser bars replace the track number while it's playing */
.ost-eq{ display:none; gap:2px; align-items:flex-end; height:12px; justify-content:flex-end; }
.ost-row.is-playing .ost-eq{ display:flex; }
.ost-row.is-playing .ost-row__num span{ display:none; }
.ost-eq i{ width:2px; background:var(--green-bright); animation:eq .9s ease-in-out infinite; }
.ost-eq i:nth-child(1){ height:5px; animation-delay:-.2s; }
.ost-eq i:nth-child(2){ height:11px; animation-delay:-.5s; }
.ost-eq i:nth-child(3){ height:7px; animation-delay:-.8s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }
.ost-row.is-paused .ost-eq i{ animation-play-state:paused; }

/* Sticky player */
.player{
  position:fixed; inset:auto 0 0 0; z-index:90;
  background:color-mix(in srgb, var(--ink-900) 94%, transparent);
  backdrop-filter:blur(14px); border-top:1px solid var(--line);
  transform:translateY(105%); transition:transform .3s var(--ease);
}
.player.is-active{ transform:none; }
.player__inner{
  width:min(100% - 2rem, var(--wrap)); margin-inline:auto;
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center;
  padding:.7rem 0 .8rem;
}
.player__controls{ display:flex; align-items:center; gap:.3rem; }
.player__btn{
  background:transparent; border:0; color:var(--fg-dim); cursor:pointer;
  padding:.45rem; border-radius:50%; line-height:0; display:grid; place-items:center;
}
.player__btn:hover{ color:var(--fg); background:var(--ink-700); }
.player__btn--main{ background:var(--green); color:#fff; width:38px; height:38px; }
.player__btn--main:hover{ background:var(--green-bright); color:#fff; }
.player__btn:disabled{ opacity:.3; cursor:default; }
.player__meta{ min-width:0; }
.player__title{
  font-size:.9rem; color:var(--fg); margin:0 0 .3rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player__scrub{ display:flex; align-items:center; gap:.7rem; }
.player__time{
  font-family:var(--font-pixel); font-size:.52rem; color:var(--fg-faint);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.player__seek{
  flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:2px;
  background:var(--line); cursor:pointer; min-width:60px;
}
.player__seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px; border-radius:50%;
  background:var(--green-bright); border:2px solid var(--ink-900); cursor:grab;
}
.player__seek::-moz-range-thumb{
  width:10px; height:10px; border-radius:50%; border:2px solid var(--ink-900);
  background:var(--green-bright); cursor:grab;
}
.player__vol{ display:flex; align-items:center; gap:.5rem; }
.player__vol input{
  width:72px; -webkit-appearance:none; appearance:none; height:4px;
  border-radius:2px; background:var(--line); cursor:pointer;
}
.player__vol input::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  background:var(--fg-dim); border:0; cursor:grab;
}
.player__vol input::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%; background:var(--fg-dim); border:0;
}
body.has-player{ padding-bottom:86px; }

@media (max-width:720px){
  .ost-row{ grid-template-columns:1.9rem 1fr auto; gap:.7rem; }
  .ost-row__dl{ display:none; }
  .player__vol{ display:none; }
  .player__inner{ grid-template-columns:auto 1fr; }
}

/* ---------- 15. TODO marker ---------------------------------------------- */
/* Anything still needing real content is tagged .todo so it's obvious in the
   browser and greppable in the source. Delete this rule when the site is done. */
.todo{ outline:1px dashed var(--blood); outline-offset:3px; position:relative; }
.todo::after{
  content:"TODO"; position:absolute; top:-8px; right:-8px; z-index:5;
  font-family:var(--font-pixel); font-size:.48rem; letter-spacing:.06em;
  background:var(--blood); color:#fff; padding:.25em .45em; border-radius:3px;
}

/* ---------- 16. Responsive ----------------------------------------------- */
@media (max-width:920px){
  .split,.band,.presskit-layout,.coop__grid{ grid-template-columns:1fr; }
  .toc-rail{ position:static; }
  .toc-rail{ display:none; }
  /* Too narrow for a side-by-side, so the figure sits behind the copy,
     dropped back far enough to stay readable. */
  .hero{ min-height:clamp(520px,72vh,700px); }
  .hero__sil{
    right:-22%; bottom:-6%; height:104%; opacity:.5;
    -webkit-mask-image:linear-gradient(to left, #000 34%, transparent 88%);
            mask-image:linear-gradient(to left, #000 34%, transparent 88%);
  }
  .hero__inner{ max-width:none; }
  .hero__cue{ display:none; }
}
/* Nine nav items on the game page will not fit a laptop header, so the menu
   button takes over long before the phone breakpoint. */
@media (max-width:1040px){
  .nav-toggle{ display:block; }
  .site-nav{
    position:fixed; inset:66px 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--ink-800); border-bottom:1px solid var(--line);
    padding:1rem var(--gutter) 1.5rem; gap:.2rem;
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .2s var(--ease), transform .2s var(--ease);
  }
  .site-nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .site-nav .btn{ margin-top:.6rem; }
}

@media (max-width:720px){
  .factsheet li{ grid-template-columns:1fr; gap:.2rem; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- 17. Motion / print ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}
@media print{
  .site-header,.site-footer,.ticker,.nav-toggle,.btn,.toc-rail{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card,.factsheet li,.copyblock{ background:#fff; border-color:#ccc; }
}