/* BL Guide home: the HUD built on the main menu Deep Worlds showed on 15 October 2026.
   Loaded after style.css, which still carries the reset, the fonts and the shared footer. */
:root {
  --ground: oklch(0.142 0.008 250);
  --deep: oklch(0.104 0.008 250);
  --sheet: oklch(0.188 0.010 250);
  --sheet-hi: oklch(0.232 0.011 250);
  --edge: oklch(0.295 0.012 250);
  --edge-soft: oklch(0.228 0.010 250);
  --ink: oklch(0.975 0.004 250);
  --ink-2: oklch(0.815 0.006 250);
  --ink-3: oklch(0.665 0.008 250);
  --mark: oklch(0.82 0.12 210);      /* cyan from the PDA map, chosen 15 Oct 2026 */
  --mark-ink: oklch(0.15 0.02 220);
  --stamp: oklch(0.62 0.20 28);
  --ok: oklch(0.78 0.15 150);
  --display: 'Archivo Black', system-ui, sans-serif;
  --body: 'Archivo', system-ui, sans-serif;
  --data: 'Martian Mono', ui-monospace, monospace;
  --rail: 17rem;
  --bar: 3.25rem;
  --z-rail: 30; --z-bar: 35; --z-drawer: 40;
}
body { margin: 0; background: var(--ground); color: var(--ink-2); font-family: var(--body); font-size: 0.9375rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.03em; color: var(--ink); margin: 0; text-wrap: balance; }
button, input, select { font: inherit; color: inherit; }
img { display: block; }
:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }
.ico { width: 1.0625rem; height: 1.0625rem; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--lg { width: 1.375rem; height: 1.375rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- rail ---------- */
.rail { position: fixed; z-index: var(--z-rail); inset: 0 auto 0 0; width: var(--rail); background: var(--deep); border-right: 1px solid var(--edge); display: flex; flex-direction: column; }
.rail__top { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--edge); }
.rail__top img { width: 2.3rem; height: auto; }
.rail__top b { font-family: var(--display); font-size: 0.875rem; color: var(--ink); letter-spacing: -0.02em; }
.rail__top .close { margin-left: auto; display: none; }
.rail__scroll { overflow-y: auto; padding-bottom: 0.75rem; flex: 1; }
/* a 4 px dark scrollbar: Chromium ignores ::-webkit-scrollbar as soon as scrollbar-width is set, so the
   standard properties only go to browsers without the webkit pseudo elements (Firefox) */
.rail__scroll::-webkit-scrollbar { width: 4px; }
.rail__scroll::-webkit-scrollbar-track { background: transparent; }
.rail__scroll::-webkit-scrollbar-thumb { background: oklch(1 0 0 / .14); }
.rail__scroll:hover::-webkit-scrollbar-thumb { background: oklch(1 0 0 / .28); }
.rail__scroll::-webkit-scrollbar-button { display: none; height: 0; }
@supports not selector(::-webkit-scrollbar) { .rail__scroll { scrollbar-width: thin; scrollbar-color: oklch(1 0 0 / .2) transparent; } }
.page { margin-left: var(--rail); min-width: 0; }

/* ---------- drawer ---------- */
.scrim { display: none; position: fixed; inset: 0; z-index: var(--z-drawer); background: oklch(0.08 0.008 250 / 0.6); }
@media (max-width: 64rem) {
  .rail { transform: translateX(-100%); transition: transform 280ms cubic-bezier(0.16,1,0.3,1); z-index: calc(var(--z-drawer) + 1); }
  body.nav-open .rail { transform: none; }
  body.nav-open .scrim { display: block; }
  .rail__top .close { display: block; }
  .page { margin-left: 0; }
  .burger { display: inline-flex; align-items: center; }
}
/* ---------- the rail: the game's menu, drawn icons, the page you are on inverted (chosen 18 Oct 2026) ---------- */
.rail { background: oklch(0.135 0.005 250); border-right-color: oklch(1 0 0 / .09); }
.rl-head { display: flex; align-items: center; gap: .7rem; padding: 1rem 1rem .9rem; border-bottom: 1px solid oklch(1 0 0 / .09); }
.rl-home { display: flex; align-items: center; gap: .7rem; }
.rl-home img { width: 2.3rem; height: auto; }
.rl-home b { font-family: var(--display); font-weight: 400; font-size: .95rem; color: var(--ink); text-transform: uppercase; letter-spacing: -0.01em; }
.rl-close { margin-left: auto; display: none; color: var(--ink-2); }
.gi { width: 1.25rem; height: 1.25rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rl-grp { padding: .85rem .6rem .3rem; }
.rl-grp + .rl-grp { border-top: 1px solid oklch(1 0 0 / .09); }
.rl-lab { padding: 0 .5rem .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: oklch(0.6 0 0); }
.rl-it { position: relative; overflow: hidden; display: flex; align-items: center; gap: .75rem; padding: .42rem .5rem; font-size: .9375rem; font-weight: 500; line-height: 1.35; color: oklch(0.78 0 0); }
.rl-it .gi { color: oklch(0.6 0 0); transition: color 450ms ease; }
.rl-beast .gi { color: oklch(0.68 0.18 28); }            /* anomalies: the one red thing, as danger is red in the game */
a.rl-it:hover { background: oklch(0.205 0.006 250); color: var(--ink); }
a.rl-it:hover .gi { color: var(--mark); transition-delay: 120ms; }
.rl-it[aria-current], a.rl-it[aria-current]:hover { background: var(--ink); color: oklch(0.12 0 0); font-weight: 600; }
.rl-it[aria-current] .gi, a.rl-it[aria-current]:hover .gi { color: oklch(0.12 0 0); }
.rl-later { color: oklch(0.5 0 0); }
.rl-later .gi { color: oklch(0.42 0 0); }
.rl-tag { margin-left: auto; font-size: .6875rem; font-weight: 600; color: oklch(0.5 0 0); white-space: nowrap; }
.rl-foot { display: flex; flex-wrap: wrap; gap: .45rem; padding: .85rem 1rem 1rem; border-top: 1px solid oklch(1 0 0 / .09); }
.rl-btn { position: relative; overflow: hidden; flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem .5rem; border: 1px solid oklch(1 0 0 / .2); font-size: .8125rem; font-weight: 600; color: oklch(0.78 0 0); }
.rl-btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; flex: none; }
.rl-btn:hover { color: var(--ink); border-color: oklch(0.78 0 0); }
.rl-steam:hover { background: oklch(0.25 0.04 250); }
.rl-discord:hover { background: oklch(0.36 0.12 275); border-color: oklch(0.55 0.15 275); }
.rl-u { flex-basis: 100%; margin-top: .2rem; text-align: center; font-size: .75rem; color: oklch(0.6 0 0); }
/* hover: one slow scan sweeps the row, like the PDA reading a target. A single pass that fades in and out */
a.rl-it::after, .rl-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none; opacity: 0; translate: -100% 0;
  background: linear-gradient(90deg, transparent 0, oklch(0.82 0.12 210 / .06) 55%, oklch(0.82 0.12 210 / .22) 92%, oklch(0.88 0.09 210 / .55) 100%); }
a.rl-it:hover::after, .rl-btn:hover::after, a.rl-it:focus-visible::after { animation: rl-scan 950ms cubic-bezier(.45, 0, .2, 1); }
@keyframes rl-scan { 0% { translate: -100% 0; opacity: 0; } 18% { opacity: 1; } 80% { opacity: 1; } 100% { translate: 170% 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { a.rl-it::after, .rl-btn::after { display: none; } }
@media (max-width: 64rem) { .rl-close { display: block; } }


/* ---------- home ---------- */
/* -------------------------------------------------------------------------
   Home HUD. Built on the game's own main menu, shown by Deep Worlds on
   15 October 2026: black ground, white type, the selected tab inverted,
   hairlines, square corners, uppercase labels set wide but never tiny.
   Colour stays functional as in the game: cyan for what is new or
   selected, green for ready and sell prices, red for buy prices and danger.
   ------------------------------------------------------------------------- */
:root {
  --h-bg: oklch(0.115 0.004 250);
  --h-panel: oklch(0.135 0.005 250 / .86);
  --h-tile: oklch(0.175 0.005 250);
  --h-tile-hi: oklch(0.215 0.006 250);
  --h-line: oklch(1 0 0 / .10);
  --h-line-hi: oklch(1 0 0 / .22);
  --h-ink: oklch(0.965 0 0);
  --h-ink2: oklch(0.76 0 0);
  --h-ink3: oklch(0.58 0 0);
  --h-green: oklch(0.76 0.16 145);
  --h-buy: oklch(0.47 0.15 25);
  --h-sell: oklch(0.52 0.13 145);
}
body { background: var(--h-bg); }
.page { background: var(--h-bg); }
.page .lbl { font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ink3); }
.page .lbl--ink { color: var(--h-ink); }
.tab-num { font-variant-numeric: tabular-nums; }

/* --- top bar, the menu's own: mode switch, tabs, a countdown where the level ring sits --- */
.hud-top { position: sticky; top: 0; z-index: 35; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; height: 3.5rem; padding: 0 1.25rem; background: oklch(0.10 0.004 250 / .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--h-line); }
.tabs-top { display: flex; justify-content: center; gap: .25rem; }
.tabs-top a { position: relative; padding: .55rem .7rem; white-space: nowrap; font-weight: 600; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ink2); }
.tabs-top a:hover { color: var(--h-ink); }
.tabs-top a[aria-current] { background: var(--h-ink); color: oklch(0.12 0 0); }
.tabs-top a .ping { position: absolute; top: .45rem; right: .35rem; width: 5px; height: 5px; background: var(--mark); }
.right { display: flex; align-items: center; gap: 1rem; }
.hsrch { display: flex; align-items: center; gap: .5rem; width: 11rem; padding: .45rem .65rem; border: 1px solid var(--h-line); color: var(--h-ink3); }
.hsrch:focus-within { border-color: var(--h-line-hi); }
.hsrch input { flex: 1; min-width: 0; background: none; border: 0; color: var(--h-ink); font-size: .8125rem; font-family: var(--body); }
.hsrch input:focus { outline: none; }
.hsrch kbd { font-family: var(--body); font-size: .6875rem; border: 1px solid var(--h-line); padding: 0 .3rem; color: var(--h-ink3); }
.ring { display: flex; align-items: center; gap: .65rem; }
.ring__c { position: relative; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; font-weight: 700; font-size: .9375rem; color: var(--h-ink); }
.ring__c svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring b { display: block; font-size: .875rem; color: var(--h-ink); font-weight: 600; }
.ring small { display: block; font-size: .6875rem; color: var(--h-ink3); letter-spacing: .04em; }
.burger2 { display: none; }

/* --- lobby hero ------------------------------------------------------------------------- */
.lobby { position: relative; min-height: min(82vh, 48rem); overflow: hidden; border-bottom: 1px solid var(--h-line); }
.lobby > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; transition: opacity 600ms ease; }
.lobby::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.10 0.004 250 / .72) 0%, transparent 46%), linear-gradient(0deg, oklch(0.10 0.004 250 / .85) 0%, transparent 36%); pointer-events: none; }
.lobby__copy { position: absolute; z-index: 2; left: clamp(1.25rem, 3vw, 2.75rem); bottom: clamp(1.5rem, 4vw, 3rem); max-width: 34rem; }
.lobby__copy h1 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: .95; letter-spacing: -0.03em; }
.lobby__copy p { margin: 1rem 0 0; font-size: 1.0625rem; line-height: 1.55; color: oklch(0.88 0 0); max-width: 44ch; }
.lobby__copy .build { margin-top: 1.25rem; display: flex; gap: .6rem; align-items: center; font-size: .75rem; color: var(--h-ink3); letter-spacing: .04em; }
.lobby__copy .build b { color: var(--h-ink2); font-weight: 600; }

/* the squad panel becomes the launch panel, same anatomy */
.squad { position: absolute; z-index: 2; right: clamp(1rem, 2.5vw, 2.25rem); bottom: clamp(1.5rem, 4vw, 3rem); width: min(23rem, calc(100% - 2rem)); background: var(--h-panel); border: 1px solid var(--h-line); backdrop-filter: blur(6px); }
.squad__h { display: flex; align-items: center; gap: .55rem; padding: .85rem 1rem .6rem; }
.squad__h b { font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: -0.01em; text-transform: uppercase; color: var(--h-ink); }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 7px; height: 7px; border: 1px solid var(--h-green); }
.pips i.on { background: var(--h-green); }
.squad__h .ready { margin-left: auto; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; color: var(--h-green); }
.srow { display: grid; grid-template-columns: 1.6rem minmax(0,1fr) auto; gap: .5rem; align-items: center; margin: 0 1rem; padding: .55rem 0; border-top: 1px solid var(--h-line); font-size: .875rem; }
.srow .n { font-size: .6875rem; color: var(--h-ink3); font-variant-numeric: tabular-nums; }
.srow strong { color: var(--h-ink); font-weight: 600; }
.srow .tag { font-size: .625rem; font-weight: 700; letter-spacing: .08em; padding: .12rem .35rem; background: oklch(0.84 0.15 88); color: oklch(0.15 0 0); }
.srow .v { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--h-ink2); }
.srow .v.ok { color: var(--h-green); }
.code { margin: .4rem 1rem .9rem; }
.code .lbl { display: block; margin-bottom: .4rem; }
.code div { display: flex; border: 1px solid var(--h-line); }
.code span { flex: 1; padding: .55rem .7rem; font-size: .8125rem; color: var(--h-ink2); }
.code button { padding: 0 .8rem; border-left: 1px solid var(--h-line); color: var(--h-ink3); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.code button:hover { color: var(--h-ink); }
.play { display: grid; grid-template-columns: minmax(0,1fr) 5.2rem 5.2rem; gap: 1px; margin: 0 1rem; background: var(--h-line); }
.play a { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 3.6rem; background: var(--h-tile); font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ink3); text-align: center; }
.play a b { color: var(--h-ink); font-size: .75rem; }
.play a:hover { background: var(--h-tile-hi); }
.play a.go { flex-direction: row; gap: .6rem; background: var(--h-ink); color: oklch(0.12 0 0); font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0; }
.play a.go:hover { background: oklch(0.88 0 0); }
.squad__f { display: flex; gap: 1rem; padding: .7rem 1rem .8rem; font-size: .6875rem; color: var(--h-ink3); letter-spacing: .04em; }
.squad__f b { color: var(--h-green); }

/* the chat corner becomes the intel corner */
.chat { position: absolute; z-index: 2; left: clamp(1.25rem, 3vw, 2.75rem); top: 1.25rem; display: flex; align-items: center; gap: .55rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ink); }
.chat i { width: 6px; height: 6px; background: var(--h-green); }
.chat a { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--h-ink2); }
.chat a:hover { color: var(--mark); }

/* --- sections ------------------------------------------------------------------------- */
.wrap3 { padding: 0 clamp(1rem, 2.6vw, 2.25rem) 4rem; }
.sh { display: flex; align-items: baseline; gap: .9rem; margin: 3.5rem 0 1.1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--h-line); }
.sh h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.sh .count { font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--h-ink3); }
.sh .more { margin-left: auto; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--h-ink2); }
.sh .more:hover { color: var(--mark); }
.sh p { margin: 0; color: var(--h-ink3); font-size: .9375rem; }

/* --- the stash: tiles left, the item card right, exactly the menu's layout --- */
.stash { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 1fr); gap: 1.25rem; align-items: start; }
.stabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .8rem; }
.stabs button { padding: .5rem .85rem; font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ink2); border: 1px solid transparent; }
.stabs button[aria-pressed="true"] { background: var(--h-ink); color: oklch(0.12 0 0); }
.stabs button:hover:not([aria-pressed="true"]) { color: var(--h-ink); border-color: var(--h-line); }
.sbar { display: flex; gap: .75rem; align-items: center; margin-bottom: .8rem; }
.sbar .hsrch { width: auto; flex: 1; max-width: 18rem; }
.sbar .lbl b { color: var(--h-ink); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); grid-auto-rows: 6.4rem; gap: .45rem; grid-auto-flow: dense; }
.tile { position: relative; background: var(--h-tile); border: 1px solid var(--h-line); overflow: hidden; text-align: left; transition: border-color 160ms ease, background 160ms ease; }
.tile:hover { background: var(--h-tile-hi); border-color: var(--h-line-hi); }
.tile[aria-pressed="true"] { border-color: var(--mark); box-shadow: inset 0 0 0 1px var(--mark); }
.tile.w2 { grid-column: span 2; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .nm { position: absolute; z-index: 2; left: .45rem; top: .35rem; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; color: var(--h-ink); text-shadow: 0 1px 2px oklch(0 0 0 / .8); }
.tile .tr { position: absolute; z-index: 2; left: .45rem; top: 1.25rem; font-size: .625rem; color: var(--h-ink3); }
.tile .price { position: absolute; z-index: 2; left: 0; bottom: 0; padding: .14rem .4rem; font-size: .6875rem; font-weight: 700; color: oklch(0.98 0 0); background: var(--h-buy); }
.tile .price.sell { background: var(--h-sell); }

.card { position: sticky; top: 4.5rem; background: var(--h-panel); border: 1px solid var(--h-line); }
.card__img { position: relative; height: 10rem; display: grid; place-items: center; border-bottom: 1px solid var(--h-line); background: radial-gradient(60% 70% at 50% 50%, oklch(0.24 0.006 250), oklch(0.15 0.005 250)); }
.card__img img { max-width: 82%; max-height: 8.5rem; object-fit: contain; }
.card__img .lbl { position: absolute; left: .75rem; bottom: .55rem; font-size: .625rem; }
.card__b { padding: 1rem 1.1rem 1.1rem; }
.card__b h3 { font-size: 1.5rem; }
.card__b .desc { margin: .45rem 0 .9rem; color: var(--h-ink2); font-size: .875rem; line-height: 1.55; }
.specs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--h-line); }
.specs div { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--h-line); font-size: .8125rem; color: var(--h-ink3); }
.specs div:nth-child(odd) { padding-right: .75rem; border-right: 1px solid var(--h-line); }
.specs div:nth-child(even) { padding-left: .75rem; }
.specs b { color: var(--h-ink); font-weight: 600; text-align: right; }
.bars { margin-top: .9rem; display: grid; gap: .3rem; }
.barrow { display: grid; grid-template-columns: 7.5rem minmax(0,1fr) 4.2rem; gap: .6rem; align-items: center; font-size: .75rem; color: var(--h-ink3); }
.barrow .track { height: 6px; background: oklch(1 0 0 / .08); position: relative; }
.barrow .track i { position: absolute; inset: 0 auto 0 0; background: oklch(0.80 0 0); }
.barrow .track i.mod { background: var(--h-green); }
.barrow .track i.bad { background: oklch(0.62 0.17 25); }
.barrow b { color: var(--h-ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.barrow em { font-style: normal; color: var(--h-green); font-size: .6875rem; }
.unknown2 { padding: .9rem 0 .2rem; color: var(--h-ink3); font-size: .875rem; line-height: 1.55; }
.card__src { padding: .7rem 1.1rem; border-top: 1px solid var(--h-line); font-size: .75rem; color: var(--h-ink3); line-height: 1.5; }
.card__src b { color: var(--h-ink2); font-weight: 600; }

/* --- traders: a portrait row, the featured trader, and the unlock ladder --- */
.traders { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.25rem; }
.feature-trader { position: relative; min-height: 26rem; overflow: hidden; border: 1px solid var(--h-line); background: oklch(0.13 0.005 250); }
.feature-trader img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.feature-trader::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, oklch(0.09 0.004 250 / .95)); }
.feature-trader div { position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: 1rem; }
.feature-trader h3 { font-size: 1.6rem; }
.feature-trader p { margin: .3rem 0 0; color: var(--h-ink2); font-size: .875rem; }
.roster2 { display: grid; grid-template-columns: repeat(6, 1fr); gap: .45rem; margin-bottom: 1.1rem; }
.who { position: relative; aspect-ratio: 1 / 1.05; overflow: hidden; border: 1px solid var(--h-line); background: var(--h-tile); }
.who img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 0; }
.who span { position: absolute; left: 0; right: 0; bottom: 0; padding: .3rem .4rem; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--h-ink); background: oklch(0.10 0.004 250 / .85); }
.who.sel { border-color: var(--h-ink); box-shadow: inset 0 0 0 1px var(--h-ink); }
.who.lock { display: grid; place-items: center; color: var(--h-ink3); }
.who.lock span { color: var(--h-ink3); }
.ladder { border: 1px solid var(--h-line); background: var(--h-panel); padding: 1rem 1.1rem 1.25rem; }
.ladder__h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.6rem; }
.ladder__h b { color: var(--h-ink); font-weight: 600; font-size: .9375rem; }
.track2 { position: relative; height: 13rem; margin: 0 .5rem; }
.track2 .axis { position: absolute; left: 0; right: 0; bottom: 2.1rem; height: 2px; background: oklch(1 0 0 / .18); }
.track2 .tick { position: absolute; bottom: .9rem; translate: -50% 0; font-size: .6875rem; color: var(--h-ink3); font-variant-numeric: tabular-nums; }
.track2 .tick.end { translate: -100% 0; }
.track2 .tick.end::before { left: auto; right: 0; }
.track2 .tick::before { content: ""; position: absolute; left: 50%; bottom: 1.05rem; width: 1px; height: 7px; background: oklch(1 0 0 / .3); }
.unl { position: absolute; bottom: 2.1rem; translate: -50% 0; display: flex; flex-direction: column; align-items: center; }
.unl::after { content: ""; width: 1px; background: var(--h-line-hi); height: var(--h, 1.5rem); }
.unl span { padding: .22rem .45rem; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; color: var(--h-ink); background: var(--h-tile-hi); border: 1px solid var(--h-line); }
.unl span em { font-style: normal; color: var(--h-ink3); font-weight: 600; margin-left: .3rem; }
.unl.top span { border-color: var(--mark); color: var(--mark); }
.ladder p { margin: .4rem 0 0; font-size: .8125rem; color: var(--h-ink3); }

/* --- progression: the constellation with a node card, the six branches beside it --- */
.prog { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); gap: 1.25rem; }
.sky { position: relative; aspect-ratio: 760 / 600; align-self: start; overflow: hidden; border: 1px solid var(--h-line); background: oklch(0.10 0.01 160); }
.sky img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.node { position: absolute; left: 36%; top: 27.5%; width: 34%; min-width: 13rem;  /* sits exactly on the in-game tooltip baked into the frame */ background: oklch(0.12 0.005 250 / .94); border: 1px solid var(--h-line-hi); padding: .75rem .85rem; }
.node h4 { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; }
.node h4 span { font-family: var(--body); font-size: .5625rem; font-weight: 700; letter-spacing: .1em; padding: .12rem .35rem; border: 1px solid var(--h-ink); color: var(--h-ink); }
.node p { margin: .4rem 0 .55rem; font-size: .8125rem; color: var(--h-ink2); display: flex; align-items: center; gap: .45rem; }
.node p i { width: 8px; height: 8px; background: oklch(0.66 0.17 30); }
.node .cost { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.node .cost span { display: flex; justify-content: space-between; padding: .35rem .45rem; border: 1px solid var(--h-line); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--h-ink2); }
.pts { position: absolute; left: .9rem; bottom: .8rem; font-family: var(--display); font-size: 1rem; color: var(--h-ink); text-transform: uppercase; }
.branches { border: 1px solid var(--h-line); background: var(--h-panel); }
.br { display: grid; grid-template-columns: 1.6rem minmax(0,1fr); gap: .7rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--h-line); }
.br:last-child { border-bottom: 0; }
.br svg { width: 1.1rem; height: 1.1rem; }
.br b { display: block; color: var(--h-ink); font-weight: 600; font-size: .9375rem; }
.br small { color: var(--h-ink3); font-size: .8125rem; }

/* --- intel and road, from v2 ----------------------------------------------------------- */
.two3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.intel3 a { display: grid; grid-template-columns: 6rem minmax(0,1fr); gap: .9rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--h-line); }
.intel3 a:hover strong { color: var(--mark); }
.intel3 img { width: 6rem; height: 3.6rem; object-fit: cover; }
.intel3 strong { display: block; color: var(--h-ink); font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.intel3 .meta { display: flex; align-items: center; gap: .45rem; margin-top: .2rem; font-size: .8125rem; color: var(--h-ink3); }
.intel3 .new { font-size: .625rem; font-weight: 700; letter-spacing: .08em; padding: .1rem .35rem; background: var(--mark); color: var(--mark-ink); }
.road3 { position: relative; padding-left: 1.4rem; }
.road3::before { content: ""; position: absolute; left: .35rem; top: .35rem; bottom: .35rem; width: 2px; background: linear-gradient(oklch(1 0 0 / .18) 82%, var(--mark) 82%); }
.ev3 { position: relative; padding: .55rem 0 .7rem; }
.ev3::before { content: ""; position: absolute; left: -1.25rem; top: .85rem; width: 10px; height: 10px; background: var(--h-bg); border: 2px solid oklch(1 0 0 / .45); }
.ev3.next::before { background: var(--mark); border-color: var(--mark); }
.ev3 .d { font-size: .75rem; color: var(--h-ink3); font-variant-numeric: tabular-nums; }
.ev3 strong { display: block; color: var(--h-ink); font-weight: 600; font-size: .9375rem; }
.ev3.next strong, .ev3.next .d { color: var(--mark); }

/* --- the key hints line, a footer the game itself has ------------------------------------- */
.hints { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding: 1rem 0 0; border-top: 1px solid var(--h-line); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ink3); }
.hints span { display: inline-flex; gap: 1.2rem; flex-wrap: wrap; }
.hints kbd { font-family: var(--body); color: var(--h-ink); border: 1px solid var(--h-line); padding: .05rem .35rem; margin-right: .35rem; }

@media (max-width: 100rem) { .ring div { display: none; } }
@media (max-width: 82rem) { .tabs-top { display: none; } .hud-top { grid-template-columns: auto 1fr; } .right { justify-content: flex-end; } }
@media (max-width: 70rem) { .stash, .traders, .prog, .two3 { grid-template-columns: 1fr; } .card { position: static; } .roster2 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 64rem) { .burger2 { display: inline-flex; } .hsrch { width: 10rem; } .squad { position: relative; right: auto; bottom: auto; margin: 0 1rem 1rem auto; } .lobby__copy { position: relative; left: auto; bottom: auto; padding: 22rem 1.25rem 1.5rem; } }
@media (max-width: 40rem) { .hsrch { display: none; } }
/* --- phone: one column, the long lists turn into strips you swipe ------------------------ */
@media (max-width: 46rem) {
  .hud-top { padding: 0 .75rem; gap: .5rem; }
  .mode button { padding: .55rem .8rem; }
  .wrap3 { padding: 0 1rem 3rem; }
  .sh { flex-wrap: wrap; gap: .25rem .75rem; margin-top: 2.5rem; }
  .sh h2 { font-size: 1.3rem; }
  .sh p { flex-basis: 100%; font-size: .875rem; }
  .sh .count { order: 3; flex-basis: 100%; }
  /* category tabs and tiles scroll sideways, the item card sits right under them */
  .stabs, .tiles { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; }
  .stabs::-webkit-scrollbar, .tiles::-webkit-scrollbar { display: none; }
  .stabs button { flex: none; }
  .sbar .lbl:not(#cnt) { display: none; }
  .sbar .hsrch { display: flex; max-width: none; min-width: 0; }
  .sbar #cnt { white-space: nowrap; letter-spacing: .04em; }
  .tiles { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, 5.6rem); grid-auto-rows: auto; grid-auto-columns: 5.6rem; }
  .tile { scroll-snap-align: start; }
  .stash { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .stash > *, .traders > * { min-width: 0; }
  .card__img { height: 8.5rem; }
  .card__img img { max-height: 7rem; }
  .barrow { grid-template-columns: 6.6rem minmax(0,1fr) 4.4rem; }
  /* traders: a shorter portrait, the roster in one swipeable row, the ladder scrolls */
  .feature-trader { min-height: 17rem; }
  .feature-trader img { width: 130%; object-position: 30% 8%; }  /* the frame carries the stash UI on its right edge */
  .roster2 { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
  .roster2::-webkit-scrollbar { display: none; }
  .who { flex: none; width: 5.4rem; }
  .ladder { padding: .9rem .9rem 1rem; }
  .ladder__h { flex-direction: column; gap: .2rem; margin-bottom: 1rem; }
  .ladder__scroll { overflow-x: auto; margin-inline: -.9rem; padding-inline: .9rem; }
  .track2 { min-width: 40rem; }
  .intel3 a { grid-template-columns: 5rem minmax(0,1fr); gap: .75rem; }
  .intel3 img { width: 5rem; height: 3.2rem; }
  /* no keyboard on a phone */
  .hints > span:first-child { display: none; }
  .hints { margin-top: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- the split: one official frame, two sides, the line moves toward the side you point at --- */
.duel { --cut: 50%; --tilt: 6%; position: relative; height: min(50vh, 29rem); min-height: 21rem; overflow: hidden; border-bottom: 1px solid var(--h-line); background: #000; }
.duel[data-side="anomaly"] { --cut: 70%; }
.duel[data-side="operator"] { --cut: 30%; }
.duel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.duel__shade { position: absolute; inset: 0; pointer-events: none; transition: clip-path 700ms cubic-bezier(.16,1,.3,1), background 500ms ease; }
.duel__shade--l { clip-path: polygon(0 0, calc(var(--cut) + var(--tilt)) 0, calc(var(--cut) - var(--tilt)) 100%, 0 100%); background: linear-gradient(90deg, oklch(0.30 0.14 25 / .42), oklch(0.20 0.10 25 / .18) 70%); mix-blend-mode: multiply; }
.duel__shade--r { clip-path: polygon(calc(var(--cut) + var(--tilt)) 0, 100% 0, 100% 100%, calc(var(--cut) - var(--tilt)) 100%); background: linear-gradient(270deg, oklch(0.32 0.06 230 / .40), oklch(0.20 0.03 230 / .14) 70%); mix-blend-mode: multiply; }
/* the side you do not point at falls back */
.duel[data-side="anomaly"] .duel__shade--r, .duel[data-side="operator"] .duel__shade--l { background: oklch(0.06 0 0 / .72); mix-blend-mode: normal; }
.duel__line { position: absolute; inset: 0; pointer-events: none; background: oklch(0.97 0 0 / .9); clip-path: polygon(calc(var(--cut) + var(--tilt) - 1px) 0, calc(var(--cut) + var(--tilt) + 1px) 0, calc(var(--cut) - var(--tilt) + 1px) 100%, calc(var(--cut) - var(--tilt) - 1px) 100%); transition: clip-path 700ms cubic-bezier(.16,1,.3,1); }  /* the seam follows the same polygon as the shades */
.duel__vs { position: absolute; top: 50%; left: var(--cut); translate: -50% -50%; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; background: var(--h-bg); border: 1px solid oklch(1 0 0 / .5); font-family: var(--display); font-size: 1rem; color: var(--h-ink); transition: left 700ms cubic-bezier(.16,1,.3,1), opacity 300ms ease; pointer-events: none; }
.duel[data-side="anomaly"] .duel__vs, .duel[data-side="operator"] .duel__vs { opacity: 0; }

.side { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem; padding: clamp(1.25rem, 3vw, 2.5rem); text-align: left; color: var(--h-ink); transition: width 700ms cubic-bezier(.16,1,.3,1); }
.side--anomaly { left: 0; width: var(--cut); align-items: flex-start; }
.side--operator { right: 0; width: calc(100% - var(--cut)); align-items: flex-end; text-align: right; }
.side__k { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.side--anomaly .side__k { color: oklch(0.72 0.17 28); }
.side--operator .side__k { color: var(--mark); }
.side__t { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.03em; line-height: .92; font-size: clamp(1.9rem, 3.4vw, 3rem); text-shadow: 0 2px 30px oklch(0 0 0 / .7); transition: font-size 600ms cubic-bezier(.16,1,.3,1); }
.side__p { max-width: 30ch; font-size: 1rem; line-height: 1.5; color: oklch(0.88 0 0); opacity: .85; transition: opacity 400ms ease; }
.side__cta { display: inline-flex; align-items: center; gap: .6rem; margin-top: .4rem; padding: .7rem 1rem; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: 0; translate: 0 8px; transition: opacity 350ms ease, translate 450ms cubic-bezier(.16,1,.3,1); }
.side--anomaly .side__cta { background: oklch(0.60 0.20 28); color: oklch(0.99 0 0); }
.side--operator .side__cta { background: var(--h-ink); color: oklch(0.12 0 0); }
.tri { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.side:hover .side__cta, .side:focus-visible .side__cta, .duel[data-side] .side.is-on .side__cta { opacity: 1; translate: 0 0; }
.duel[data-side="anomaly"] .side--operator .side__p, .duel[data-side="operator"] .side--anomaly .side__p { opacity: 0; }
.duel[data-side="anomaly"] .side--operator .side__t, .duel[data-side="operator"] .side--anomaly .side__t { font-size: clamp(1.2rem, 2vw, 1.6rem); opacity: .7; }
.side:focus-visible { outline: 3px solid var(--mark); outline-offset: -6px; }

/* the facts the old hero carried, kept above the fold in a strip */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; border-bottom: 1px solid var(--h-line); background: oklch(0.10 0.004 250); }
.fact { padding: .9rem 1.2rem; border-right: 1px solid var(--h-line); display: flex; flex-direction: column; gap: .15rem; }
.fact b { color: var(--h-ink); font-weight: 700; font-size: 1.0625rem; }
.fact small { color: var(--h-ink3); font-size: .8125rem; }
.newtag { font-size: .5625rem; font-weight: 700; letter-spacing: .08em; padding: .08rem .3rem; background: oklch(0.84 0.15 88); color: oklch(0.15 0 0); margin-left: .3rem; vertical-align: 1px; }
.fact--go { justify-content: center; align-items: center; flex-direction: row; padding: 0 1.6rem; border-right: 0; background: var(--h-ink); color: oklch(0.12 0 0); font-family: var(--display); font-size: 1rem; text-transform: uppercase; white-space: nowrap; }
.fact--go:hover { background: oklch(0.88 0 0); }

/* the player: a dialog, the iframe only exists while it is open */
/* margin auto: the dialog centres itself, which the global reset in style.css had cancelled */
.player { width: min(64rem, calc(100vw - 2rem)); margin: auto; padding: 0; border: 1px solid var(--h-line-hi); background: var(--h-bg); color: var(--h-ink); }
.player::backdrop { background: oklch(0.05 0 0 / .82); backdrop-filter: blur(3px); }
.player__h { display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; border-bottom: 1px solid var(--h-line); }
.player__h b { font-weight: 600; font-size: .9375rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player__h button { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--h-ink2); border: 1px solid var(--h-line); padding: .35rem .6rem; }
.player__h button:hover { color: var(--h-ink); border-color: var(--h-line-hi); }
.player__frame { aspect-ratio: 16 / 9; background: #000; }
/* the anomaly clip is a vertical Short: a tall frame instead of a wide one full of black */
.player.is-tall { width: min(26rem, calc(100vw - 2rem)); }
.player.is-tall .player__frame { aspect-ratio: 9 / 16; width: min(100%, calc((100vh - 9rem) * 9 / 16)); margin-inline: auto; }
.player__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.player__src { margin: 0; padding: .6rem 1rem .75rem; font-size: .8125rem; color: var(--h-ink3); }

@media (max-width: 64rem) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact--go { grid-column: 1 / -1; padding: .9rem; }
}
/* no hover on a phone: two stacked halves, a tap opens the video */
@media (max-width: 46rem), (hover: none) {
  .duel { height: auto; min-height: 0; display: grid; grid-template-rows: 1fr 1fr; }
  .duel__shade, .duel__line, .duel__vs { display: none; }
  .duel__img { position: absolute; }
  .side { position: relative; inset: auto; width: auto !important; min-height: 16rem; align-items: flex-start !important; text-align: left !important; }
  .side--anomaly { background: linear-gradient(0deg, oklch(0.20 0.10 25 / .85), oklch(0.20 0.10 25 / .25)); }
  .side--operator { background: linear-gradient(0deg, oklch(0.14 0.03 230 / .9), oklch(0.14 0.03 230 / .3)); border-top: 2px solid oklch(0.97 0 0 / .8); }
  .side__cta { opacity: 1; translate: 0 0; }
}
/* --- the anomaly roster: always on the page, it is what makes this game different --- */
.beasts { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.beast { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4.2; overflow: hidden; border: 1px solid var(--h-line); background: var(--h-tile); color: var(--h-ink); transition: border-color 160ms ease; }
.beast:hover { border-color: var(--h-line-hi); }
.beast img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 500ms cubic-bezier(.16,1,.3,1); }
.beast:hover img { scale: 1.04; }
.beast::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, oklch(0.08 0.004 250 / .94)); pointer-events: none; }
.beast > span { position: relative; z-index: 2; padding: .7rem .7rem .75rem; display: grid; gap: .25rem; }
.beast b { font-family: var(--display); font-weight: 400; font-size: 1.05rem; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; }
.beast small { font-size: .75rem; color: var(--h-ink3); }
.role { justify-self: start; font-style: normal; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .14rem .4rem; border: 1px solid oklch(0.66 0.17 28); color: oklch(0.78 0.13 28); }
.role.play { background: oklch(0.60 0.20 28); border-color: oklch(0.60 0.20 28); color: oklch(0.99 0 0); }
.role.tbd { border-color: var(--h-line-hi); color: var(--h-ink2); }
.beast.nopic { background: repeating-linear-gradient(135deg, oklch(0.16 0.005 250) 0 10px, oklch(0.145 0.005 250) 10px 20px); }
.beast.nopic::before { content: "No still published yet"; position: absolute; inset: 0 0 auto; padding: .7rem; font-size: .75rem; color: var(--h-ink3); }
.beasts-note { margin: .8rem 0 0; font-size: .875rem; color: var(--h-ink3); }
.beasts-note b { color: var(--h-ink2); font-weight: 600; }

/* the logo sits in the top bar only when the rail is a drawer */
.hlogo { display: none; }
.hlogo img { display: block; height: 1.7rem; width: auto; }
@media (max-width: 64rem) { .hlogo { display: block; } }

/* --- anomaly view: the Wendigo keybind page, rebuilt from the settings screen --- */
.akeys { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 1fr); gap: 1.25rem; align-items: start; }
.kb { border: 1px solid var(--h-line); background: var(--h-panel); }
.kb__tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--h-line); }
.kb__tabs span { flex: none; padding: .6rem .9rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ink3); border-right: 1px solid var(--h-line); }
.kb__tabs span.on { background: var(--h-ink); color: oklch(0.12 0 0); }
.kb__head, .kb__row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 1rem; align-items: center; padding: 0 1rem; }
.kb__head { padding-top: .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--h-line); }
.kb__row { min-height: 3.2rem; border-bottom: 1px solid var(--h-line); }
.kb__row:last-child { border-bottom: 0; }
.kb__row strong { font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: .02em; color: var(--h-ink); }
.kb__row small { display: block; font-size: .8125rem; color: var(--h-ink3); text-transform: none; letter-spacing: 0; font-weight: 400; }
.kb__row kbd { display: grid; place-items: center; height: 2.2rem; border: 1px solid var(--h-line-hi); font-family: var(--body); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; color: var(--h-ink); }
.kb__src { padding: .7rem 1rem; border-top: 1px solid var(--h-line); font-size: .75rem; color: var(--h-ink3); }
.apov { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--h-line); }
.apov img { width: 100%; height: 100%; object-fit: cover; }
.apov span { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .8rem; font-size: .8125rem; color: var(--h-ink2); background: oklch(0.08 0.004 250 / .85); }

/* --- anomaly progression: what the store page says, as a loop --- */
.aloop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--h-line); border: 1px solid var(--h-line); }
.aloop div { background: var(--h-panel); padding: 1rem 1.1rem 1.1rem; }
.aloop .n { display: block; font-family: var(--display); font-size: 1.6rem; color: oklch(0.72 0.17 28); line-height: 1; margin-bottom: .5rem; }
.aloop b { display: block; color: var(--h-ink); font-weight: 600; font-size: 1rem; margin-bottom: .25rem; }
.aloop p { margin: 0; color: var(--h-ink3); font-size: .875rem; line-height: 1.5; }
.unknown3 { margin: .9rem 0 0; font-size: .875rem; color: var(--h-ink3); }

/* the short countdown label, for screens where the long one does not fit */
.ring__s { display: none; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.15; color: var(--h-ink2); }
@media (max-width: 100rem) { .ring__s { display: block; } }

@media (max-width: 70rem) { .beasts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .akeys { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 46rem) {
  .beasts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; }
  .beasts::-webkit-scrollbar { display: none; }
  .beast { flex: none; width: 9.4rem; scroll-snap-align: start; }
  .beast b { font-size: .95rem; }
  .aloop { grid-template-columns: 1fr; }
  /* a shorter hero: two lines of copy per side, a smaller button, tighter facts */
  .side { min-height: 0; padding: 1.1rem 1rem 1.15rem; gap: .35rem; }
  .side__t { font-size: 1.9rem; }
  .side__p { max-width: none; font-size: .9375rem; line-height: 1.45; }
  .side__cta { margin-top: .25rem; padding: .5rem .75rem; font-size: .75rem; }
  .fact { padding: .65rem 1rem; }
  .fact b { font-size: 1rem; }
  .fact--go { padding: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .duel *, .duel { transition: none !important; } }
@media (prefers-reduced-motion: reduce) { .beast img { transition: none; } }

/* ---------- the opening paragraph: the page's own short answer, first block of text for crawlers ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem 2.5rem; padding: 2.25rem 0 .5rem; border-bottom: 1px solid var(--h-line); }
.intro h1 { grid-column: 1 / -1; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; max-width: 30ch; }
.intro .answer { margin: .4rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: oklch(0.88 0 0); max-width: 62ch; }
.intro .more { margin: .4rem 0 1.4rem; font-size: .9375rem; line-height: 1.7; color: var(--h-ink3); max-width: 62ch; }
.intro a { color: var(--h-ink); text-decoration: underline; text-decoration-color: oklch(1 0 0 / .3); text-underline-offset: 3px; }
.intro a:hover { color: var(--mark); text-decoration-color: var(--mark); }
.intel3 .ph { width: 6rem; height: 3.6rem; background: var(--h-tile); }
/* the shared footer sits inside the page column, next to the rail */
.page .footer { margin-top: 0; }
@media (max-width: 64rem) { .intro { grid-template-columns: 1fr; } }
@media (max-width: 46rem) { .intro { padding-top: 1.75rem; } .intro .answer { font-size: 1rem; } .intel3 .ph { width: 5rem; height: 3.2rem; } }