/* Breachworks site: the Breachworks brand kit (Modern theme): navy, amber, cream, block colours. */
@font-face {
  font-family: "BreachworksBlock";
  src: url("../fonts/BreachworksBlock.ttf") format("truetype");
  font-display: swap;
  /* Basic Latin only: Polish letters (ą ę ł ó ś ...) fall back to Barlow instead of the font's own forms. */
  unicode-range: U+0020-007E;
}

:root {
  /* Breachworks palette (tools/brand BrandKit, Modern theme) */
  --ui-base: #0E0A1B;
  --ui-raised: #1D1736;
  --ui-line: #2f2756;
  --ui-orange: #F6C445;
  --ui-orange-hi: #FFE08A;
  --ui-text: #F4F1E8;
  --ui-muted: #b9b3cc;
  --navy: #130F24;
  --navy-raised: #1D1736;
  --navy-hover: #2A2250;
  --ink: #0E0A1B;
  --amber: #F6C445;
  --amber-pressed: #D9A521;
  --amber-light: #FFE08A;
  --cream: #F4F1E8;
  --danger: #E5484D;
  --success: #5BD18B;
  --crew: #F0A050;
  --security: #70A0FF;
  --brick: #E0736F;
  --concrete: #C9C3DB;
  --steel: #6E7A9E;
  --wood: #C9905A;

  --radius: 9px;
  --gutter: 16px;
  --maxw: 1200px;
  --header-h: 60px;
  --font-od: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-game: "BreachworksBlock", "Barlow", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ui-base);
  color: var(--ui-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
img, video, canvas { max-width: 100%; }
img { height: auto; }
a { color: var(--ui-orange); text-underline-offset: 2px; }
a:hover { color: var(--ui-orange-hi); }
.game a { color: var(--amber); }
.game a:hover { color: var(--amber-light); }
h1, h2 { font-family: var(--font-game); font-weight: 400; letter-spacing: 0.02em; line-height: 1.15; margin: 0 0 .5em; }
h3, h4 { font-family: var(--font-od); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.game h2, .game h3, .game-title { font-family: var(--font-game); font-weight: 400; letter-spacing: 0.02em; }
:focus-visible { outline: 3px solid var(--ui-orange); outline-offset: 2px; border-radius: 4px; }
.game :focus-visible { outline-color: var(--amber); }
.sr-only { position: absolute !important; 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: 8px; top: -60px; z-index: 100; background: var(--ui-orange); color: var(--navy); padding: 8px 14px; border-radius: 6px; font-weight: 700; }
.skip-link:focus { top: 8px; color: var(--navy); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--ui-muted); }
.game .muted { color: #b9b3cc; }
[hidden] { display: none !important; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 10, 27, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ui-line);
}
.site-header .wrap { display: flex; align-items: center; gap: 14px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand .bw-icon { width: 30px; height: 30px; border-radius: 6px; }
.brand .wordmark { height: 22px; width: auto; }
.brand-sep { width: 1px; height: 22px; background: var(--ui-line); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  color: var(--ui-text); text-decoration: none; font-family: var(--font-od); font-weight: 600; font-size: .95rem;
  padding: 8px 12px; border-radius: 6px; border-bottom: 2px solid transparent;
}
.nav a:hover { background: var(--ui-raised); color: #fff; }
.nav a[aria-current="page"] { border-bottom-color: var(--ui-orange); border-radius: 6px 6px 0 0; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.lang-toggle { display: inline-flex; border: 1px solid var(--ui-line); border-radius: 6px; overflow: hidden; }
.lang-toggle button {
  background: transparent; color: var(--ui-muted); border: 0; padding: 6px 10px; font: 700 .85rem var(--font-od); cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] { background: var(--ui-orange); color: var(--navy); }
.menu-btn { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 1rem var(--font-od); text-decoration: none; cursor: pointer;
  padding: 11px 18px; border-radius: var(--radius); border: 2px solid var(--ui-line);
  background: var(--ui-raised); color: var(--ui-text);
  transition: border-color .15s, background .15s, transform .1s;
}
.btn:hover { border-color: var(--ui-orange); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--ui-orange); border-color: var(--ui-orange); color: var(--navy); }
.btn-accent:hover { background: var(--ui-orange-hi); border-color: var(--ui-orange-hi); color: var(--navy); }
.btn-sm { padding: 7px 12px; font-size: .9rem; }
.btn { background: var(--navy-raised); border-color: #3a3163; color: var(--cream); }
.btn:hover { border-color: var(--amber); color: var(--cream); }
.btn-primary { background: var(--amber); border-color: var(--amber); color: var(--navy); }
.btn-primary:hover { background: var(--amber-light); border-color: var(--amber-light); color: var(--navy); }
.btn-primary:active { background: var(--amber-pressed); }

/* ---------- Sections ---------- */
section { padding: 64px 0; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.eyebrow { font: 700 .8rem var(--font-od); text-transform: uppercase; letter-spacing: .14em; color: var(--ui-orange); margin-bottom: 8px; display: block; }
.game .eyebrow { color: var(--amber); }
.ui-divider { height: 3px; background: linear-gradient(90deg, var(--ui-orange) 0 80px, var(--ui-line) 80px); border: 0; margin: 0; }
.game { background: var(--navy); color: var(--cream); }
.game-band { background: var(--navy); border-top: 1px solid #241d44; border-bottom: 1px solid #241d44; }

/* Panels (Breachworks look) */
.panel {
  background: var(--navy-raised); border: 1px solid #2f2756; border-radius: var(--radius);
  box-shadow: 0 2px 0 var(--ink); padding: 18px;
}
.panel.titled { border-top: 3px solid var(--amber); }
.ui-panel { background: var(--ui-raised); border: 1px solid var(--ui-line); border-radius: var(--radius); padding: 20px; }
.ui-panel.accent { border-top: 3px solid var(--ui-orange); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 0; overflow: hidden; background: radial-gradient(120% 90% at 70% 40%, #241c45 0%, var(--navy) 60%, var(--ink) 100%); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 24px; min-height: min(78vh, 720px); padding-top: 40px; padding-bottom: 40px; }
.hero h1 { margin: 0 0 14px; }
.hero h1 img { width: min(100%, 520px); display: block; }
.hero .tagline { font: 700 clamp(1.15rem, 2.2vw, 1.5rem)/1.3 var(--font-od); color: var(--cream); margin-bottom: 10px; }
.hero .made-by { color: #c8c2dc; margin-bottom: 22px; }
.hero .made-by strong { color: var(--ui-orange); }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-stage { position: relative; aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius); }
.hero-stage canvas { display: block; width: 100% !important; height: 100% !important; border-radius: var(--radius); }
.hero-stage .stage-hint { position: absolute; right: 10px; bottom: 8px; font-size: .78rem; color: #9d96b8; pointer-events: none; }
.hero-video { margin-top: 18px; max-width: 420px; }
.hero-video video { width: 100%; border-radius: var(--radius); border: 1px solid #2f2756; display: block; }
.voxel-fallback { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* Feature cards */
.verb-card { position: relative; overflow: hidden; }
.verb-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--c, var(--amber)); }
.verb-card h3 { font-size: 1.05rem; margin-bottom: 6px; color: var(--cream); }
.verb-card p { margin: 0; color: #cfc9e0; font-size: .97rem; }
.feature h3 { font-family: var(--font-od); font-weight: 800; }
.feature .tag { display: inline-block; font: 700 .72rem var(--font-od); text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 99px; margin-bottom: 8px; background: #2a2250; color: var(--amber-light); }
.feature .tag.caveat { background: #3b2a12; color: #ffcf8a; }

/* Mode / map cards */
.card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--cream);
  background: var(--navy-raised); border: 1px solid #2f2756; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 2px 0 var(--ink); transition: border-color .15s, transform .15s;
}
.card:hover, .card:focus-visible { border-color: var(--amber); color: var(--cream); transform: translateY(-2px); }
.card .thumb { aspect-ratio: 16 / 9; background: var(--ink); display: block; width: 100%; object-fit: cover; }
.card .thumb.model { object-fit: contain; background: radial-gradient(circle at 50% 60%, #2a2250, var(--ink)); }
.card .thumb.empty { display: grid; place-items: center; color: #6b6488; font-family: var(--font-game); font-size: 1.6rem; }
.card .card-body { padding: 10px 12px 12px; }
.card .card-title { font: 700 1rem var(--font-od); margin: 0; }
.card .card-sub { font-size: .85rem; color: #a49dbd; margin: 2px 0 0; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 300px); gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.strip > * { scroll-snap-align: start; }
.strip::-webkit-scrollbar { height: 8px; }
.strip::-webkit-scrollbar-thumb { background: #3a3163; border-radius: 8px; }

/* Video blocks */
.video-frame { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink); border: 1px solid var(--ui-line); }
.video-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); }
.video-card figcaption { padding: 10px 2px 0; }
.video-card figcaption strong { display: block; font-family: var(--font-od); }
figure { margin: 0; }

/* Factory pipeline (OneDroid) */
.pipeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); counter-reset: stage; }
.pipeline li { position: relative; background: var(--ui-raised); border: 1px solid var(--ui-line); border-radius: var(--radius); padding: 16px 14px 14px; }
.pipeline li .stage-no { font: 800 .78rem var(--font-od); color: var(--ui-orange); letter-spacing: .12em; text-transform: uppercase; }
.pipeline li h3 { font-size: 1.02rem; margin: 4px 0 6px; }
.pipeline li p { font-size: .92rem; color: var(--ui-muted); margin: 0; }
.pipeline li .gate { display: block; margin-top: 8px; font-size: .8rem; color: #d8d3e6; border-top: 1px dashed var(--ui-line); padding-top: 6px; }
.stats-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); margin: 22px 0; }
.stat { background: var(--ui-raised); border: 1px solid var(--ui-line); border-radius: var(--radius); padding: 14px; }
.stat .num { font: 800 1.7rem/1.1 var(--font-od); color: #fff; display: block; }
.stat .num em { font-style: normal; color: var(--ui-orange); }
.stat .lbl { font-size: .86rem; color: var(--ui-muted); }
.labels { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; padding: 0; list-style: none; }
.labels li { background: var(--navy); border: 1px solid var(--ui-line); border-radius: 6px; padding: 6px 10px; font-size: .9rem; }
.labels code { color: var(--ui-orange); font-weight: 700; }
.caveat-box { border-left: 4px solid #ffb35c; background: #2b2010; padding: 12px 14px; border-radius: 0 var(--radius) var(--radius) 0; font-size: .95rem; }

table.data { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.data th, table.data td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--ui-line); vertical-align: top; }
table.data th { font-family: var(--font-od); color: #fff; background: var(--navy); }
table.data td.lvl { font: 800 1rem var(--font-od); color: var(--ui-orange); white-space: nowrap; }
.table-scroll { overflow-x: auto; border: 1px solid var(--ui-line); border-radius: var(--radius); }

/* Pyramid figure */
.pyramid { display: grid; gap: 6px; justify-items: center; margin: 8px 0 22px; }
.pyramid div { padding: 8px 10px; border-radius: 6px; text-align: center; font: 700 .9rem var(--font-od); color: var(--navy); background: var(--ui-orange); }
.pyramid div:nth-child(1) { width: 36%; opacity: .75; }
.pyramid div:nth-child(2) { width: 50%; opacity: .8; }
.pyramid div:nth-child(3) { width: 64%; opacity: .87; }
.pyramid div:nth-child(4) { width: 80%; opacity: .93; }
.pyramid div:nth-child(5) { width: 100%; }

/* End card / footer */
.end-card { text-align: center; }
.end-card .bw-logo { width: 88px; height: 88px; display: block; margin: 0 auto 14px; border-radius: 16px; }
.site-footer { border-top: 1px solid var(--ui-line); background: var(--ink); padding: 34px 0 40px; font-size: .92rem; color: var(--ui-muted); }
.site-footer .wrap { display: grid; gap: 22px; grid-template-columns: 1.4fr 1fr 1fr; }
.site-footer h2 { font-size: .95rem; color: var(--ui-text); margin-bottom: 8px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.site-footer a { color: var(--ui-text); text-decoration: none; }
.site-footer a:hover { color: var(--ui-orange); }
.footer-brand { display: flex; gap: 12px; align-items: flex-start; }
.footer-brand img { width: 44px; height: 44px; flex-shrink: 0; }

/* ---------- Manual ---------- */
.page-head { padding: 34px 0 18px; }
.page-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.manual-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; padding-bottom: 60px; }
.toc {
  position: sticky; top: calc(var(--header-h) + 12px); max-height: calc(100vh - var(--header-h) - 24px);
  overflow: auto; background: var(--ui-raised); border: 1px solid var(--ui-line); border-radius: var(--radius); padding: 12px; font-size: .92rem;
  overscroll-behavior: contain;
}
.toc .search { position: relative; margin-bottom: 10px; }
.search input, .lib-search input {
  width: 100%; background: var(--ink); color: var(--ui-text); border: 1px solid #3a3163; border-radius: 6px; padding: 9px 10px; font: inherit;
}
.search input:focus, .lib-search input:focus { border-color: var(--ui-orange); outline: none; box-shadow: 0 0 0 2px rgba(246,196,69,.35); }
.search-status { font-size: .82rem; color: var(--ui-muted); margin: 6px 0 0; min-height: 1.2em; }
.search-nav { display: flex; gap: 6px; margin-top: 6px; }
.search-results { list-style: none; padding: 0; margin: 8px 0 10px; display: grid; gap: 4px; max-height: 40vh; overflow: auto; }
.search-results a { display: block; padding: 6px 8px; border-radius: 6px; text-decoration: none; color: var(--ui-text); background: var(--navy); }
.search-results a:hover { background: var(--navy-hover); }
.search-results small { display: block; color: var(--ui-muted); font-size: .8rem; }
.toc details { border-top: 1px solid #2f2756; }
.toc details:first-of-type { border-top: 0; }
.toc summary { cursor: pointer; padding: 6px 4px; list-style: none; display: flex; gap: 6px; align-items: baseline; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::before { content: "▸"; color: var(--ui-orange); font-size: .8rem; transition: transform .15s; }
.toc details[open] > summary::before { transform: rotate(90deg); }
.toc summary a, .toc li a { color: var(--ui-text); text-decoration: none; }
.toc summary a:hover, .toc li a:hover { color: var(--ui-orange); }
.toc summary a.current { color: var(--ui-orange); font-weight: 700; }
.toc ul { list-style: none; margin: 0 0 6px; padding: 0 0 0 18px; display: grid; gap: 2px; font-size: .88rem; }
.toc-toggle { display: none; }
.manual-content { min-width: 0; }
.chapter { content-visibility: auto; contain-intrinsic-size: auto 2400px; background: var(--navy); color: var(--cream); border: 1px solid #241d44; border-radius: var(--radius); padding: 22px clamp(14px, 3vw, 32px); margin-bottom: 18px; }
.chapter h2 { font-family: var(--font-game); font-weight: 400; color: var(--cream); border-bottom: 3px solid var(--amber); padding-bottom: 8px; font-size: clamp(1.3rem, 3vw, 2rem); }
.chapter h3 { color: var(--amber-light); margin-top: 1.6em; font-size: 1.18rem; }
.chapter h4 { color: var(--cream); }
.chapter a { color: var(--amber); }
.chapter img { display: block; border-radius: 6px; border: 1px solid #2f2756; margin: 10px 0 12px; max-width: min(100%, 640px); aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); }
.chapter ul, .chapter ol { padding-left: 1.3em; }
.chapter li { margin: 2px 0; }
.chapter blockquote { margin: 0 0 1em; padding: 8px 14px; border-left: 3px solid var(--amber); background: var(--navy-raised); border-radius: 0 6px 6px 0; }
.chapter code { background: var(--ink); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.chapter table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.chapter th, .chapter td { border: 1px solid #2f2756; padding: 6px 8px; }
kbd { display: inline-block; font: 700 .82em/1.2 var(--font-body); padding: 1px 6px; border-radius: 4px; background: var(--ink); border: 1px solid #4a4170; border-bottom-width: 2px; color: var(--amber-light); white-space: nowrap; }
mark { background: var(--ui-orange); color: var(--navy); border-radius: 2px; padding: 0 1px; }
mark.current { background: #fff; outline: 2px solid var(--ui-orange); }
.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--amber); } 100% { box-shadow: 0 0 0 3px transparent; } }
.loading { padding: 40px; text-align: center; color: var(--ui-muted); }
.error-box { border: 1px solid var(--danger); background: #2a1215; color: #ffd9da; padding: 14px; border-radius: var(--radius); }

/* ---------- Library ---------- */
.lib-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.lib-search { flex: 1 1 260px; max-width: 420px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.chip {
  font: 700 .88rem var(--font-od); padding: 7px 12px; border-radius: 99px; cursor: pointer;
  background: var(--navy-raised); color: var(--cream); border: 1px solid #3a3163;
}
.chip:hover { border-color: var(--amber); }
.chip[aria-pressed="true"] { background: var(--amber); color: var(--navy); border-color: var(--amber); }
.chip .count { opacity: .7; font-weight: 600; margin-left: 4px; }
.lib-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.lib-grid .card .thumb { aspect-ratio: 4 / 3; }
.lib-count { color: #a49dbd; font-size: .9rem; margin: 0 0 12px; }
.sample-note { font-size: .85rem; color: #ffcf8a; background: #2b2010; border: 1px solid #5a4214; border-radius: 6px; padding: 6px 10px; display: inline-block; margin-bottom: 14px; }

.drawer-backdrop { position: fixed; inset: 0; background: rgba(5, 3, 12, .7); z-index: 80; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(640px, 100%);
  background: var(--navy); color: var(--cream); border-left: 3px solid var(--amber);
  display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,.5);
}
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #2f2756; }
.drawer-head h2 { font-family: var(--font-game); font-weight: 400; font-size: 1.35rem; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.drawer-body { overflow: auto; padding: 16px; flex: 1; overscroll-behavior: contain; }
.icon-btn { background: var(--navy-raised); border: 1px solid #3a3163; color: var(--cream); border-radius: 6px; width: 38px; height: 38px; font-size: 1.2rem; cursor: pointer; flex-shrink: 0; }
.icon-btn:hover { border-color: var(--amber); }
.viewer { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--ink); margin-bottom: 14px; }
.viewer canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.viewer .viewer-hint { position: absolute; left: 10px; bottom: 8px; font-size: .78rem; color: #9d96b8; pointer-events: none; }
.drawer .picture { width: 100%; border-radius: var(--radius); border: 1px solid #2f2756; margin-bottom: 14px; display: block; }
.stats { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.stats li { background: var(--navy-raised); border: 1px solid #2f2756; border-radius: 6px; padding: 7px 10px; font-size: .94rem; }
.badge { display: inline-block; font: 700 .72rem var(--font-od); text-transform: uppercase; letter-spacing: .08em; color: var(--navy); background: var(--amber); border-radius: 4px; padding: 2px 7px; }

/* ---------- Devlog ---------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--ui-line); }
.timeline > li { position: relative; margin: 0 0 12px; }
.timeline > li::before { content: ""; position: absolute; left: -29px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--ui-base); border: 2px solid var(--ui-orange); }
.timeline > li.major::before { background: var(--ui-orange); }
.release { background: var(--ui-raised); border: 1px solid var(--ui-line); border-radius: var(--radius); padding: 12px 14px; }
.release h4 { font-size: 1.05rem; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.release h4 .date { font: 600 .82rem var(--font-body); color: var(--ui-muted); }
.release p { margin: 0 0 6px; font-size: .95rem; color: #d8d3e6; }
.release details summary { cursor: pointer; color: var(--ui-orange); font-weight: 700; font-size: .9rem; }
.release details .more { margin-top: 8px; font-size: .93rem; color: #cfc9e0; }
.timeline-group { font: 800 .8rem var(--font-od); color: var(--ui-orange); text-transform: uppercase; letter-spacing: .14em; margin: 26px 0 10px; }
.tl-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.gallery button { padding: 0; border: 1px solid var(--ui-line); border-radius: var(--radius); overflow: hidden; background: var(--ink); cursor: zoom-in; display: block; width: 100%; }
.gallery img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .2s; }
.gallery button:hover img { transform: scale(1.03); }
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 94vh; color: var(--ui-text); }
dialog.lightbox::backdrop { background: rgba(0,0,0,.88); }
dialog.lightbox img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; border-radius: 6px; }
dialog.lightbox .lb-bar { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 2px 0; }
dialog.lightbox .lb-caption { flex: 1; min-width: 0; font-size: .95rem; }
.waves { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.waves li { background: var(--ui-raised); border: 1px solid var(--ui-line); border-radius: 8px; padding: 10px 12px; font-size: .93rem; }
.waves li b { color: var(--ui-orange); font-family: var(--font-od); margin-right: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .hero-stage { order: -1; aspect-ratio: 16 / 10; }
  .manual-layout { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; display: none; }
  .toc.open { display: block; position: fixed; inset: var(--header-h) 0 0 0; z-index: 60; border-radius: 0; max-height: none; }
  .toc-toggle { display: inline-flex; position: sticky; top: calc(var(--header-h) + 8px); z-index: 40; margin-bottom: 12px; }
  .site-footer .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  section { padding: 44px 0; }
  .menu-btn { display: inline-flex; }
  .nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--ui-line); padding: 8px var(--gutter) 14px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 8px; }
  .nav a[aria-current="page"] { border-bottom-color: transparent; border-left: 3px solid var(--ui-orange); border-radius: 0; }
  .brand .wordmark { height: 16px; }
  .brand-sep { display: none; }
  .header-actions .dl-label { display: none; }
  .site-header .wrap { gap: 8px; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 380px) {
  .brand .wordmark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Hero background: a game picture, darkened where the text sits */
.hero-bg { position: absolute; inset: 0; z-index: 0; background: url('../img/bg/hero.webp') center bottom / cover no-repeat; opacity: .8; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19,15,36,.94) 0%, rgba(19,15,36,.7) 42%, rgba(19,15,36,.4) 100%), linear-gradient(0deg, var(--navy) 0%, transparent 18%); }
.hero-inner { position: relative; z-index: 1; }
.stat .num { font-family: var(--font-game); font-weight: 400; }
.page-intro { padding: 44px 0 36px; }
.page-intro h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.lead-text { max-width: 820px; font-size: 1.08rem; }
.pipeline-long { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.runs { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.runs li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .93rem; }
.runs b { font-family: var(--font-game); font-weight: 400; color: var(--cream); }
.meter { height: 12px; background: var(--ink); border: 1px solid #2f2756; border-radius: 6px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--steel); }
.runs li.final .meter span { background: var(--success); }
@media (max-width: 520px) { .runs li { grid-template-columns: 1fr auto; } .runs .meter { grid-column: 1 / -1; grid-row: 2; } }
.rec-group h3 { margin: 18px 0 12px; }
.rec-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.video-card figcaption p { margin: 4px 0 0; font-size: .92rem; color: #cfc9e0; }
.gallery figure figcaption { font-size: .85rem; color: #b9b3cc; padding: 6px 2px 0; }
.release .ver { font-family: var(--font-game); font-weight: 400; font-size: 1.15rem; color: var(--amber); }
.release .rel-name { color: var(--cream); }
.rel-first { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.release details[open] + .rel-first, .release:has(details[open]) .rel-first { display: none; }
.card .card-body { display: block; }
.card .card-title, .card .card-sub { display: block; }
/* The game font draws capitals; keep fallback letters (Polish diacritics) in capitals too. */
h1, h2, .game h3, .ver, .stat .num, .runs b { text-transform: uppercase; }
a.btn, .game a.btn { color: var(--cream); }
a.btn-primary, .game a.btn-primary, a.btn-primary:hover, .game a.btn-primary:hover { color: var(--navy); }
@media (max-width: 960px) { html { scroll-padding-top: calc(var(--header-h) + 60px); } }

/* ---------- Walking characters ---------- */
.walkers-host { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: hidden; z-index: 44; pointer-events: none; contain: paint; }
.walker-sprite { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; transform-origin: 50% 100%; will-change: transform; }
.walkers-probe { position: fixed; left: 50%; transform: translateX(-50%); bottom: 8px; z-index: 60; background: rgba(0,0,0,.75); color: #5BD18B; font: 12px/1.3 monospace; padding: 4px 8px; border-radius: 4px; pointer-events: none; }
.walkers-toggle {
  font: 600 .78rem var(--font-body); padding: 5px 10px; border-radius: 99px; cursor: pointer;
  background: rgba(29, 23, 54, .88); color: var(--cream); border: 1px solid #3a3163;
}
.walkers-toggle:hover { border-color: var(--amber); }
/* the two switches (characters, effects) side by side, bottom right */
.walkers-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.walkers-bar .walkers-toggle { position: static; }
/* click blasts (clickfx.js): over the page, never in the way of a click */
.click-fx { position: fixed; left: 0; top: 0; z-index: 47; pointer-events: none; }
/* the corner widgets (the waver bottom right, the blocks bottom left): a small plate each, so they read as widgets; only
   the blocks' plate takes clicks; on a phone they step back while the page scrolls; the footer keeps room for them */
.corner-panel { position: absolute; border-radius: 12px; background: rgba(14, 10, 27, .62); border: 1px solid rgba(74, 62, 140, .75); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: none; transition: opacity .2s ease; }
.corner-blocks { pointer-events: auto; cursor: url('../img/cursor/aim.png') 15 15, crosshair; cursor: image-set(url('../img/cursor/aim.png') 1x, url('../img/cursor/aim@2x.png') 2x) 15 15, crosshair; }
@media (prefers-reduced-motion: reduce) { .corner-blocks { cursor: default; } }
.blocks-rebuild { position: absolute; pointer-events: auto; z-index: 2; width: 26px; height: 26px; padding: 0; border-radius: 6px; font: 700 15px/1 var(--font-body); background: rgba(29, 23, 54, .88); color: var(--amber); border: 1px solid #3a3163; }
.blocks-rebuild:hover { border-color: var(--amber); }
/* phones: an empty band at the top of the page for the small shootout (stage.js puts it there, between no text) */
@media (max-width: 1399px), (max-height: 500px) { html.bw-stage main::before { content: ""; display: block; height: 124px; } }
/* the characters' band above the footer (common.js): the block pile left, the switches in the middle, the waver right,
   on one baseline; on a wide screen (the widgets in the side gutters) only the switches */
.bw-band { height: 150px; }
.bw-band-in { height: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
.bw-slot-blocks { width: 150px; height: 118px; }
.bw-slot-waver { width: 92px; height: 132px; }
.bw-slot-switches { display: flex; align-items: flex-end; justify-content: center; flex: 1; min-width: 0; }
@media (max-width: 760px) { .bw-band { height: 112px; } .bw-slot-blocks { width: 82px; height: 84px; } .bw-slot-waver { width: 62px; height: 92px; } }
@media (min-width: 1400px) and (min-height: 501px) { .bw-band { height: 64px; } .bw-slot-blocks, .bw-slot-waver { width: 0; height: 0; } }
html:not(.bw-ready) .bw-band { visibility: hidden; }
/* the site's pixel-art cursors in the game's palette (tools/site/make-cursors.py): the arrow (hot spot at its tip), the
   hand on things to click, the text bar in fields; the system's own in video players and the 3D viewers (drag to orbit),
   and none of it on touch screens */
html { cursor: url('../img/cursor/arrow.png') 0 0, auto; cursor: image-set(url('../img/cursor/arrow.png') 1x, url('../img/cursor/arrow@2x.png') 2x) 0 0, auto; }
a, button, [role="button"], summary, label, select, .btn, .chip, a.card, .vid-card, .lang-toggle button, .walkers-toggle { cursor: url('../img/cursor/pointer.png') 6 0, pointer; cursor: image-set(url('../img/cursor/pointer.png') 1x, url('../img/cursor/pointer@2x.png') 2x) 6 0, pointer; }
input, textarea, [contenteditable="true"] { cursor: text; }
input[type="checkbox"], input[type="radio"], input[type="range"], input[type="button"], input[type="submit"] { cursor: pointer; }
video, dialog.vid-player video { cursor: auto; }
.viewer canvas, .hero-stage canvas { cursor: grab; }
.viewer canvas:active, .hero-stage canvas:active { cursor: grabbing; }
/* over the destructible blocks (blocks.js): the game's crosshair */
html.bw-aim, html.bw-aim * { cursor: url('../img/cursor/aim.png') 15 15, crosshair !important; cursor: image-set(url('../img/cursor/aim.png') 1x, url('../img/cursor/aim@2x.png') 2x) 15 15, crosshair !important; }
@media (pointer: coarse) { html, a, button, .btn, a.card, .vid-card { cursor: auto; } }

/* ---------- Showcase (garage, bestiary, rack, showroom) ---------- */
.garage { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.garage .viewer, .parade-stage, .viewer.wide { margin-bottom: 0; }
.viewer.wide { aspect-ratio: 16 / 8; }
.parade-stage { aspect-ratio: 16 / 6; }
.garage-ui { display: grid; gap: 14px; }
.garage-bar { display: flex; align-items: center; gap: 10px; }
.garage-label { flex: 1; min-width: 0; text-align: center; }
.garage-label h3 { margin: 0; font-family: var(--font-game); font-weight: 400; text-transform: uppercase; }
.garage-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 120px; gap: 8px; overflow-x: auto; padding: 12px 0 6px; }
.garage-strip button { padding: 0; border: 2px solid #2f2756; border-radius: 8px; background: var(--ink); cursor: pointer; }
.garage-strip button[aria-current="true"] { border-color: var(--amber); }
.garage-strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.parade-caption { min-height: 1.5em; text-align: center; margin-top: 8px; }
.rack h3 { margin: 18px 0 10px; }
.rack-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.rack-row a, .rack-row .rack-item { display: block; text-decoration: none; color: var(--cream); background: var(--navy-raised); border: 1px solid #2f2756; border-radius: 8px; overflow: hidden; }
.rack-row a:hover, .rack-row a:focus-visible { border-color: var(--amber); }
.rack-row img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; background: radial-gradient(circle at 50% 60%, #2a2250, var(--ink)); }
.rack-row span { display: block; padding: 6px 8px; font-size: .86rem; }
.cut-label { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .92rem; }
.cut-label input { flex: 1; max-width: 320px; accent-color: var(--amber); }
@media (max-width: 760px) { .garage { grid-template-columns: 1fr; } .parade-stage { aspect-ratio: 16 / 9; } .viewer.wide { aspect-ratio: 4 / 3; } }

/* ---------- Tutorial (the recorded playthrough) ---------- */
.tut-goals { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.tut-goals li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; background: var(--navy-raised); border: 1px solid #2f2756; border-radius: 6px; padding: 6px 8px; font-size: .93rem; }
.tut-goals .tick { width: 20px; height: 20px; border-radius: 4px; border: 2px solid #4a4170; display: grid; place-items: center; font-weight: 800; color: var(--navy); }
.tut-goals li.ok { border-color: var(--success); }
.tut-goals li.ok .tick { background: var(--success); border-color: var(--success); }
.tut-goals li.game-only { opacity: .7; }
.tut-goals li.game-only .tick { border-style: dashed; color: #8a83a6; }
.tut-goals .tag { font-style: normal; font-size: .72rem; color: #b9b3cc; border: 1px solid #3a3163; border-radius: 99px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.tut-pages { padding-left: 1.1em; font-size: .9rem; display: grid; gap: 6px; }
.tut-small { font-size: .85rem; margin-top: 14px; color: #b9b3cc; }
.linklike { background: none; border: 0; padding: 0; color: var(--amber); text-decoration: underline; cursor: pointer; font: inherit; }
.tv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.tv-frame video { aspect-ratio: 16 / 10; }
.tv-note { font-size: .88rem; color: #b9b3cc; padding-top: 8px; }
.tv-chapters { position: relative; background: var(--navy-raised); border: 1px solid #2f2756; border-radius: var(--radius); padding: 12px; max-height: min(70vh, 560px); overflow: auto; }
.tv-chapters h2 { font-size: 1.1rem; margin-bottom: 8px; }
.tv-chapters ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tv-chapters a { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 6px; text-decoration: none; color: var(--cream); border: 1px solid transparent; }
.tv-chapters a:hover { background: var(--navy-hover); color: var(--cream); }
.tv-chapters a[aria-current="step"] { border-color: var(--amber); background: var(--navy); }
.tv-n { font: 700 .8rem var(--font-body); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--amber); }
.tv-chapters a[aria-current="step"] .tv-n { background: var(--amber); color: var(--navy); }
.tv-time { font-size: .8rem; color: #b9b3cc; font-variant-numeric: tabular-nums; }
.tv-step { margin: 22px 0 60px; }
.tv-step h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.tv-meta { font-size: .86rem; color: var(--amber-light); margin-bottom: 6px; }
@media (max-width: 900px) { .tv-layout { grid-template-columns: 1fr; } .tv-chapters { max-height: none; } }

/* ---------- Game pictures as backgrounds (never video) ---------- */
.g-bg { position: relative; isolation: isolate; background-color: var(--navy); background-position: center; background-size: cover; background-repeat: no-repeat; }
.g-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(19,15,36,.86), rgba(19,15,36,.93)); }
.page-band { padding: 46px 0 30px; }
.page-band h1 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
body.page-manual main, body.page-library main, body.page-devlog main, body.page-videos main, body.page-tutorial main {
  background: linear-gradient(180deg, rgba(19,15,36,.15) 0, rgba(19,15,36,.55) 240px, rgba(19,15,36,.9) 420px, var(--navy) 560px), var(--page-bg), var(--navy);
}
body.page-manual { --page-bg: url('../img/bg/tiles.webp') top left / 384px 384px repeat; }
body.page-library { --page-bg: url('../img/bg/blocks.webp') top left / 640px 640px repeat; }
body.page-devlog { --page-bg: url('../img/bg/panels.webp') top center / cover no-repeat; }
body.page-videos { --page-bg: url('../img/bg/cinema.webp') top center / 100% auto no-repeat; }
body.page-tutorial { --page-bg: url('../img/bg/strata.webp') top center / 100% auto no-repeat; }
body.page-devlog main > section.page-intro { background: transparent; }

/* ---------- The game page ---------- */
.g-toc { margin-top: 18px; }
.g-toc .chip { text-decoration: none; }
.g-pics { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 520px)); margin-bottom: 18px; }
.g-pic img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid #2f2756; }
.g-pic figcaption { font-size: .86rem; color: #b9b3cc; padding-top: 6px; }
.g-models { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); margin-top: 18px; }
.g-models a { display: block; text-decoration: none; color: var(--cream); background: var(--navy-raised); border: 1px solid #2f2756; border-radius: 8px; overflow: hidden; }
.g-models a:hover, .g-models a:focus-visible { border-color: var(--amber); }
.g-models img { display: block; width: 100%; height: auto; aspect-ratio: 10 / 7; background: radial-gradient(circle at 50% 60%, #2a2250, var(--ink)); }
.g-models span { display: block; padding: 6px 8px; font-size: .84rem; }
.g-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.g-item { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; text-decoration: none; color: var(--cream); background: var(--navy-raised); border: 1px solid #2f2756; border-radius: var(--radius); padding: 10px; }
.g-item:hover, .g-item:focus-visible { border-color: var(--amber); color: var(--cream); }
.g-item img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.g-item strong { display: block; font-size: 1rem; margin-bottom: 2px; }
.g-item span { font-size: .9rem; color: #cfc9e0; }
@media (max-width: 480px) { .g-item { grid-template-columns: 1fr; } .g-item img { width: 100%; } }

/* ---------- Videos ---------- */
.vid-group { margin: 26px 0 8px; }
.vid-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.vid-card { display: flex; flex-direction: column; text-align: left; padding: 0; background: var(--navy-raised); border: 1px solid #2f2756; border-radius: var(--radius); overflow: hidden; color: var(--cream); cursor: pointer; font: inherit; text-decoration: none; }
.vid-card:hover, .vid-card:focus-visible { border-color: var(--amber); color: var(--cream); }
.vid-poster { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink); }
.vid-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-poster::after { content: ""; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(19,15,36,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F6C445' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat; border: 2px solid var(--amber); }
.vid-dur { position: absolute; right: 8px; bottom: 8px; background: rgba(14,10,27,.85); color: var(--cream); font: 600 .78rem var(--font-body); padding: 2px 7px; border-radius: 4px; z-index: 1; }
.vid-body { padding: 10px 12px 12px; display: block; }
.vid-body strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.vid-body span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; color: #cfc9e0; }
dialog.vid-player { border: 1px solid #3a3163; border-top: 3px solid var(--amber); border-radius: var(--radius); padding: 0; background: var(--navy); color: var(--cream); width: min(1180px, 96vw); max-height: 94vh; }
dialog.vid-player::backdrop { background: rgba(5,3,12,.85); }
.vp-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #2f2756; }
.vp-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 1.2rem; text-transform: none; font-family: var(--font-od); font-weight: 700; }
.vp-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; padding: 14px; overflow: auto; max-height: calc(94vh - 60px); }
.vp-body.no-chapters { grid-template-columns: 1fr; }
.vp-body video { width: 100%; display: block; background: #000; border-radius: 6px; max-height: 70vh; }
.vp-caption { font-size: .92rem; color: #cfc9e0; margin-top: 8px; }
.vp-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; max-height: 70vh; overflow: auto; }
.vp-chapters button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; text-align: left; background: var(--navy-raised); border: 1px solid transparent; border-radius: 6px; color: var(--cream); padding: 7px 9px; cursor: pointer; font: .88rem var(--font-body); }
.vp-chapters button[aria-current="true"] { border-color: var(--amber); }
@media (max-width: 860px) { .vp-body { grid-template-columns: 1fr; } }
.films { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* the nav needs more room with seven pages */
@media (max-width: 1180px) and (min-width: 761px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--ink); border-bottom: 1px solid var(--ui-line); padding: 8px var(--gutter) 14px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 8px; }
  .header-actions { margin-left: auto; }
}

/* ---------- Original backgrounds in the game's style (tools/site/make-backgrounds.py: the game's block textures and HUD), never game screenshots ---------- */
.bg-strata { background-image: url('../img/bg/strata.webp'); background-size: cover; background-position: center bottom; }
.bg-bricks { background-image: url('../img/bg/bricks.webp'); background-size: 480px 240px; background-repeat: repeat; }
.bg-blocks { background-image: url('../img/bg/blocks.webp'); background-size: 640px 640px; background-repeat: repeat; }
/* phones: the half-size pictures */
@media (max-width: 760px) {
  .hero-bg { background-image: url('../img/bg/hero-m.webp'); }
  .bg-strata { background-image: url('../img/bg/strata-m.webp'); }
  body.page-devlog { --page-bg: url('../img/bg/panels-m.webp') top center / cover no-repeat; }
  body.page-videos { --page-bg: url('../img/bg/cinema-m.webp') top center / 100% auto no-repeat; }
  body.page-tutorial { --page-bg: url('../img/bg/strata-m.webp') top center / 100% auto no-repeat; }
}
.bg-bricks::before, .bg-blocks::before { background: linear-gradient(rgba(19,15,36,.55), rgba(19,15,36,.75)); }
.bg-strata::before { background: linear-gradient(rgba(19,15,36,.80), rgba(19,15,36,.55)); }
.walkers-fixed { position: fixed; inset: 0; overflow: hidden; contain: strict; z-index: 44; pointer-events: none; }
.walker-sprite { transition: opacity .25s ease; }
/* the shootout's tracers, sparks and dust (stage.js), over the page but under nothing interactive */
.stage-fx { position: absolute; left: 0; top: 0; pointer-events: none; }