@charset "UTF-8";
/* Dead Sector web brand: the game's WebHud tokens (WebHud/css/tokens.css), shared by the landing page and the wiki.
   Every value here is the game's; `python -I Tools/Web/build.py check` prints DRIFT when one stops matching. Sizes are
   rem at a 16 px root, which is the game's root at 1080p. Fonts are the game's faces as woff2 (build.py fonts). */
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Bold.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Cascadia Mono"; src: url("../fonts/CascadiaMono.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Saira Stencil One"; src: url("../fonts/SairaStencilOne-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }

:root {
  /* base colours */
  --void: #06080a;          /* page black */
  --ink: #0b0c0d;           /* text on a bright fill */
  --shade: #000;            /* shadows, scrims */
  --glint: #fff;            /* white washes */
  --steel: #becada;         /* rules and borders */
  --slab-hi: #22262a; --slab-lo: #121518;     /* concrete slab gradient */
  --sheet-hi: #1a1e22; --sheet-lo: #0c0e11;   /* overlay sheet gradient */
  --text: #cfd6dd;
  --text-hot: #eef2f5;
  --dim: #9ca6b0;
  --faint: #848e98;
  --faint-deco: #535d67;    /* decoration only, never text */
  --accent: #7ea3bf;        /* steel: focus, selection */
  --alert: #ff4a1c;         /* signal red-orange: the one hot colour. Never decoration */
  --danger: #b0544c;
  --warn: #b8b2a2;
  --ok: #6e9488;
  /* class colours */
  --cls-tank: #ffb020; --cls-assault: #20d6ff; --cls-support: #50e664; --cls-chem: #b060ff;
  --font-ui: "Barlow", "Bahnschrift", "Arial Narrow", sans-serif;
  --font-num: "Cascadia Mono", "Consolas", monospace;
  --font-display: "Saira Stencil One", "Barlow", sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .82 0 0 0 0 .86 .32 0 0 0 -.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");   /* concrete speckle */
}

body {
  /* surfaces + rules */
  --panel: rgb(6 8 10 / 93%);
  --panel-soft: rgb(18 21 24 / 88%);
  --scrim: rgb(6 8 10 / 62%);
  --line: rgb(190 202 218 / 15%);
  --line-hard: rgb(190 202 218 / 34%);
  --line-soft: rgb(190 202 218 / 7%);
  --slab: var(--grain), linear-gradient(180deg, rgb(34 38 42 / 95%), rgb(18 21 24 / 95%));
  --sheet: var(--grain), linear-gradient(180deg, rgb(26 30 34 / 96%), rgb(12 14 17 / 97%));
  --well: rgb(0 0 0 / 30%);          /* sunken box on a slab */
  /* lit signals */
  --alert-lit: #ff6e49;
  --accent-lit: #b2c8d9;
  --cls: var(--accent);
  /* type scale */
  --fs-micro: max(.75rem, 11px);
  --fs-label: max(.85rem, 11.5px);
  --fs-body: max(.95rem, 12px);
  --fs-title: max(1.05rem, 12.5px);
  --fs-lead: 1.2rem;
  --fs-h3: 1.45rem;
  --fs-h2: 1.7rem;
  --fs-h1: 2.3rem;
  --fs-xl: 2.8rem;
  --fs-display: 3.6rem;
  --fs-call: 6.5rem;
  --ls-micro: .1em; --ls-label: .08em;
  /* space */
  --sp-1: .2rem; --sp-2: .35rem; --sp-3: .5rem; --sp-4: .7rem; --sp-5: .9rem; --sp-6: 1.2rem; --sp-7: 1.6rem; --sp-8: 2.4rem;
  /* shape */
  --hair: 1px;              /* rules */
  --rule: 3px;              /* slab top rule */
  --bar: 2px;               /* focus / selection bar */
  --cut: .8rem; --cut-lg: 1rem;   /* clipped corners */
  /* layout */
  --gutter: 2.4rem;
  --w-frame: 110rem; --w-wide: 128rem; --w-col: 60rem;
  /* motion */
  --t-fast: .12s; --t-mid: .25s; --t-slow: .45s;
}

/* contextual class colour */
[data-class="tank"] { --cls: var(--cls-tank); }
[data-class="assault"] { --cls: var(--cls-assault); }
[data-class="support"] { --cls: var(--cls-support); }
[data-class="chem"] { --cls: var(--cls-chem); }


/* Dead Sector landing page: the bunker with the power out.
   Each room is its own stacking context. Its wall, its pictures and its fittings sit at negative z-index, the room's
   darkness (.dark, a black sheet with the torch's hole in it) sits just above them, and words stay in normal flow
   above both, so the dark hides walls and pictures and never text. The walls, doors and lamps are the set pictures in
   public/set; colours and faces come from brand.css. Rooms are written lit: site.js cuts the power. */

:root {
	--pad: clamp(1.1rem, 4.4vw, 4.5rem);
	--wide: 92rem;
	--bar-h: 3.6rem;
	--pitch: #040506;
	--tube: #e8f3f6;
	--tube-glow: 176 226 245;
	--emerg: #d7281b;
	--emerg-ink: #ff5d47;
	--tr: 320px;
	--tk: 0;
	/* worn paint: a mask that chips bits out of stencilled letters */
	--chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cfilter id='c' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .09' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 0 0 0 6.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
	--ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='%23000' stroke-width='3'/%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='%23ffe6c0' stroke-width='1.4'/%3E%3C/svg%3E") 12 12, crosshair;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--pitch); color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: var(--bar-h); -webkit-text-size-adjust: 100%; }
html:not(.anim) { scroll-behavior: auto; }
body { margin: 0; font: 400 1rem/1.5 var(--font-ui); color: var(--text); background: var(--pitch); overflow-x: clip; }
/* The script is in the head; the page shows once it has set the lights (or after a moment, if it never does). */
html.js:not(.ready) body { visibility: hidden; animation: show 0s 3s forwards; }
@keyframes show { to { visibility: visible; } }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-underline-offset: .2em; }
h1, h2, h3, p, ul, figure { margin: 0; font-weight: 400; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--tube); outline-offset: 3px; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7em; border: 1px solid transparent; padding: 1.05em 1.5em; font: 700 .86rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.btn svg { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.btn-hot { background: var(--alert); color: var(--ink); }
.btn-line { border-color: currentColor; color: var(--c-hot); }
.btn-line:hover { background: var(--c-hot); color: var(--ink); border-color: var(--c-hot); }
.btn-big { font-size: .95rem; padding: 1.15em 1.8em; }
.btn-bar { font-size: .72rem; padding: .8em 1.1em; }
.btn.is-off { cursor: default; }
/* with the power out the hot button is only its outline */
.room:not(.is-lit) .btn-hot, html:not(.on) .bar .btn-hot { background: none; color: var(--alert); border-color: currentColor; }

/* ---- top bar ---- */
.bar { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--bar-h); display: flex; align-items: center; gap: 1.6rem; padding: 0 var(--pad); background: linear-gradient(180deg, rgb(4 5 6 / .94), rgb(4 5 6 / .7)); border-bottom: 1px solid rgb(190 202 218 / .07); color: #938d8b; }
html.on .bar { color: var(--text); }
.bar-mark { font: 400 1.15rem/1 var(--font-display); letter-spacing: .12em; text-decoration: none; opacity: 0; transition: opacity .2s steps(3); }
.bar.is-past .bar-mark { opacity: 1; }
.bar-nav { display: flex; gap: 1.5rem; margin-left: auto; font: 600 .78rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.bar-nav a { padding: .5rem 0; border-bottom: 2px solid transparent; text-decoration: none; }
.bar-nav a:hover, .bar-nav a.is-here { color: var(--text-hot); border-color: currentColor; }
.power { display: flex; align-items: center; gap: .6rem; padding: .5rem .2rem; font: 600 .78rem/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.power-track { display: flex; width: 2.6rem; height: 1.25rem; padding: 2px; border: 1px solid currentColor; }
.power-track i { width: 1rem; background: currentColor; transition: transform .14s steps(2); }
html.on .power-track i { transform: translateX(calc(2.6rem - 1rem - 6px)); background: var(--tube); box-shadow: 0 0 .5rem rgb(var(--tube-glow) / .9); }
/* nothing to switch without the script */
html:not(.js) .power, html:not(.js) .breaker { display: none; }

/* ---- a room ---- */
.room {
	--c-text: #938d8b; --c-hot: #bdb3af; --c-dim: #837d7b; --c-line: rgb(190 202 218 / .1); --cls: var(--c-dim);
	position: relative; isolation: isolate; overflow: clip; padding: 0 var(--pad); color: var(--c-text); cursor: var(--ring);
	background: var(--grain), linear-gradient(180deg, #1b1e21, #101214);
}
.room.is-lit { --c-text: var(--text); --c-hot: var(--text-hot); --c-dim: #aab3bc; --c-line: rgb(190 202 218 / .2); cursor: auto; }
.room + .room { border-top: .5rem solid #050607; }
.in { max-width: var(--wide); margin-inline: auto; padding-bottom: 7rem; }

/* The room's wall stays where it is while the room's fittings slide over it: one window-sized plate, held to the top
   of the window for as long as the room is on screen. */
.wall { position: sticky; top: 0; z-index: -5; height: 100vh; height: 100lvh; margin: 0 calc(-1 * var(--pad)) -100vh; margin-bottom: -100lvh; overflow: hidden; pointer-events: none; }
.wall img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: brightness(.6) contrast(1.08) saturate(.85); }
/* lit from the lamp overhead: the wall falls away into the dark at the sides and the floor */
.wall::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at var(--wl, 50%) 8%, rgb(4 5 6 / .18), rgb(4 5 6 / .66) 78%, rgb(4 5 6 / .86)), linear-gradient(180deg, transparent 55%, rgb(4 5 6 / .5)); }

/* by torch the wall is seen as it is: the lamp's falloff belongs to the lit room */
.room:not(.is-lit) > .wall img { filter: brightness(.95) contrast(1.1) saturate(.9); }
.room:not(.is-lit) > .wall::after { opacity: .25; }

.dark, .beam { position: absolute; inset: 0; pointer-events: none; }
/* The dark is one black sheet, and the torch burns a hole in it the shape of the spot an old lens throws, rings and
   ragged edge and all: the sheet is masked by everything but that spot. */
.dark { z-index: -1; background: rgb(4 5 6 / .985);
	-webkit-mask-image: url("../set/torch-hole.webp"), linear-gradient(#000, #000); mask-image: url("../set/torch-hole.webp"), linear-gradient(#000, #000);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: calc(var(--tr) * 2.8) auto, 100% 100%; mask-size: calc(var(--tr) * 2.8) auto, 100% 100%;
	-webkit-mask-position: calc(var(--tx, 50%) - var(--tr) * 1.4) calc(var(--ty, -60rem) - var(--tr) * 1.47), 0 0; mask-position: calc(var(--tx, 50%) - var(--tr) * 1.4) calc(var(--ty, -60rem) - var(--tr) * 1.47), 0 0;
	-webkit-mask-composite: xor; mask-composite: exclude; }
/* the torch's own warmth on what it points at; it drops when the battery dips */
.beam { z-index: 30; mix-blend-mode: overlay; background: url("../set/torch-spot.webp") calc(var(--tx, 50%) - var(--tr) * 1.1) calc(var(--ty, -60rem) - var(--tr) * 1.155) / calc(var(--tr) * 2.2) auto no-repeat; opacity: calc(.62 - var(--tk)); }
.room.is-lit > .dark { opacity: 0; }
.room.is-lit > .beam { display: none; }
.room.striking > .dark { animation: strike .95s step-end; }
.room.misfire > .dark { animation: misfire .62s step-end; }
@keyframes strike { 0% { opacity: .3; } 8% { opacity: 1; } 26% { opacity: .2; } 34% { opacity: .94; } 55% { opacity: .1; } 62% { opacity: .5; } 70%, 100% { opacity: 0; } }
@keyframes misfire { 0% { opacity: .6; } 14% { opacity: 0; } 30% { opacity: .75; } 44% { opacity: .2; } 60%, 100% { opacity: 0; } }

/* ---- the light in each room ----
   Every room hangs its own fitting: the picture, the halo its bulb throws on the wall, and its light falling through
   the dust. They sit above the dark (so a dead lamp shows by torch) and below the words. */
.lamp { --k: 1; position: absolute; top: 0; left: var(--lx, 50%); z-index: -1; width: calc(var(--lw) * var(--k)); aspect-ratio: var(--ar); translate: -50% 0; transform-origin: 50% 0; pointer-events: none; }
.lamp::before { content: ""; position: absolute; inset: 0; background: center top / 100% 100% no-repeat; filter: brightness(.22) saturate(.3); }
.lamp b, .lamp i { position: absolute; left: var(--bx); top: var(--by); opacity: 0; }
.lamp b { width: calc(var(--lw) * var(--k) * 2.6); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle closest-side, var(--glow), transparent); }
.lamp i { width: calc(var(--hw) * var(--k)); aspect-ratio: 802 / 1321; translate: -50% -4%; rotate: var(--hr, 0deg); transform-origin: 50% 4%; background: var(--glow); -webkit-mask: url("../set/haze-cone.webp") center top / 100% 100% no-repeat; mask: url("../set/haze-cone.webp") center top / 100% 100% no-repeat; }
.room.is-lit .lamp::before { filter: none; }
.room.is-lit .lamp b { opacity: var(--halo, .2); }
.room.is-lit .lamp i { opacity: var(--haze, .4); }

/* which fitting hangs where; the pictures load as their room comes near */
.hero > .lamp { top: calc(var(--bar-h) - .3rem); --lw: 14rem; --ar: 480 / 703; --bx: 51%; --by: 78%; --hw: 46rem; --glow: #d3f0dc; --haze: .34; }
.hero > .lamp::before { background-image: url("../set/lamp-highbay.webp"); }
.room-arsenal { --wl: 82%; }
.room-arsenal > .lamp { left: auto; right: 0; translate: none; top: 1.2rem; --lw: 28rem; --ar: 480 / 207; --bx: 15%; --by: 62%; --hw: 34rem; --hr: 34deg; --glow: #ffe2b0; --halo: .16; }
.room-gore > .lamp { --lw: 14rem; --ar: 480 / 542; --bx: 47%; --by: 57%; --hw: 48rem; --glow: #d9eeff; --haze: .44; }
.room-horde { --wl: 30%; }
.room-horde > .lamp { --lx: 30%; --lw: 7rem; --ar: 480 / 1056; --bx: 54%; --by: 63%; --hw: 28rem; --glow: #eed77e; --halo: .26; }
.room-squad { --wl: 70%; }
.room-squad > .lamp { --lx: 70%; --lw: 6.6rem; --ar: 469 / 1372; --bx: 57%; --by: 78%; --hw: 26rem; --glow: #ffcd86; --halo: .24; }
.room-maps { --wl: 40%; }
.room-maps > .lamp { --lx: 40%; --lw: 4.2rem; --ar: 364 / 1421; --bx: 51%; --by: 87%; --hw: 32rem; --glow: #ffb46a; --halo: .3; }
html:not(.js) .room-arsenal > .lamp::before, .room-arsenal.near > .lamp::before { background-image: url("../set/lamp-arm.webp"); }
html:not(.js) .room-gore > .lamp::before, .room-gore.near > .lamp::before { background-image: url("../set/lamp-surgical.webp"); }
html:not(.js) .room-horde > .lamp::before, .room-horde.near > .lamp::before { background-image: url("../set/lamp-wellglass.webp"); }
html:not(.js) .room-squad > .lamp::before, .room-squad.near > .lamp::before { background-image: url("../set/lamp-hand.webp"); }
html:not(.js) .room-maps > .lamp::before, .room-maps.near > .lamp::before { background-image: url("../set/lamp-bulb.webp"); }

/* how each comes on: the vapour lamp over the first room warms up slowly and green, the theatre lamp buzzes, the
   bulbs catch at once with a jump */
.hero.striking > .dark { animation: warm-dark 2.4s ease-in; }
.hero.striking > .lamp::before { animation: warm-fit 2.4s ease-in; }
.hero.striking > .lamp b, .hero.striking > .lamp i { animation: warm 2.4s ease-in; }
.room-gore.striking > .lamp::before { animation: buzz-fit .95s step-end; }
.room-gore.striking > .lamp b, .room-gore.striking > .lamp i { animation: buzz .95s step-end; }
.room:is(.room-arsenal, .room-horde, .room-squad, .room-maps).striking > .lamp::before { animation: catch-fit .55s ease-out; }
.room:is(.room-arsenal, .room-horde, .room-squad, .room-maps).striking > .lamp :is(b, i) { animation: catch .55s ease-out; }
.room.misfire > .lamp::before { animation: buzz-fit .62s step-end; }
.room.misfire > .lamp :is(b, i) { animation: dip .62s step-end; }
@keyframes warm-dark { from { opacity: 1; } 35% { opacity: .82; } to { opacity: 0; } }
@keyframes warm-fit { from { filter: brightness(.3) saturate(.3) hue-rotate(50deg); } 40% { filter: brightness(.6) saturate(.6) hue-rotate(30deg); } }
@keyframes warm { from { opacity: 0; } 40% { opacity: .08; } }
@keyframes buzz-fit { 0% { filter: none; } 8% { filter: brightness(.25); } 26% { filter: none; } 34% { filter: brightness(.3); } 55% { filter: none; } 62% { filter: brightness(.6); } 70% { filter: none; } }
@keyframes buzz { 0% { opacity: .5; } 8% { opacity: 0; } 26% { opacity: .5; } 34% { opacity: 0; } 55% { opacity: .5; } 62% { opacity: .15; } }
@keyframes catch-fit { from { filter: brightness(.22) saturate(.3); } 30% { filter: brightness(1.5); } 45% { filter: brightness(.7); } }
@keyframes catch { from { opacity: 0; } 30% { opacity: .7; } 45% { opacity: .2; } }
@keyframes dip { 0% { opacity: .12; } 14% { opacity: .5; } 30% { opacity: .05; } 44% { opacity: .3; } }

/* and how each hangs: the bulbs on their cords swing, the corridor's glass jar is dying */
html.anim .hero.is-lit > .lamp { --sw: .7deg; animation: sway 7s ease-in-out infinite alternate; }
html.anim .room-squad.is-lit > .lamp { --sw: 2.4deg; animation: sway 4.6s ease-in-out infinite alternate; }
html.anim .room-maps.is-lit > .lamp { --sw: 5deg; animation: sway 3.4s ease-in-out infinite alternate; }
@keyframes sway { from { rotate: var(--sw); } to { rotate: calc(var(--sw) * -1); } }
html.anim .room-horde.is-lit:not(.striking, .misfire) > .lamp i { animation: dying 5.3s infinite; }
@keyframes dying { 0%, 89%, 100% { opacity: var(--haze, .4); } 90% { opacity: .06; } 92% { opacity: .32; } 93% { opacity: .04; } 95% { opacity: .26; } }

/* ---- first room ---- */
.hero { min-height: 100svh; display: flex; padding-top: calc(var(--bar-h) + 2rem); background: var(--pitch); }
.hero > .in { width: 100%; margin-top: auto; padding-bottom: 3.5rem; display: flex; flex-direction: column; gap: clamp(1.8rem, 5vh, 3.4rem); }
.hero-back, .hero-emerg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.hero-back { z-index: -4; filter: brightness(.82) contrast(1.08) saturate(.9); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--grain), linear-gradient(180deg, rgb(4 5 6 / .6) 0, transparent 24%, transparent 46%, rgb(4 5 6 / .92) 100%), radial-gradient(ellipse at 50% 40%, transparent 38%, rgb(4 5 6 / .62)); }
/* what the red emergency lamp reaches: the same picture again, red and faint, above the dark */
.hero-emerg { z-index: -1; filter: grayscale(1) brightness(.75) contrast(1.35) sepia(1) saturate(8) hue-rotate(-40deg); -webkit-mask-image: radial-gradient(ellipse 54rem 34rem at 88% 14%, rgb(0 0 0 / .6), rgb(0 0 0 / .16) 55%, transparent 100%); mask-image: radial-gradient(ellipse 54rem 34rem at 88% 14%, rgb(0 0 0 / .6), rgb(0 0 0 / .16) 55%, transparent 100%); }
.hero.is-lit .hero-emerg { display: none; }
.emerg { position: absolute; z-index: 4; right: calc(var(--pad) - .4rem); top: calc(var(--bar-h) + .8rem); width: 4.6rem; aspect-ratio: 569 / 920; background: url("../set/lamp-bulkhead.webp") center / contain no-repeat; }
.emerg::after { content: ""; position: absolute; inset: -160% -260%; background: radial-gradient(circle at 50% 58%, rgb(215 40 27 / .34), rgb(215 40 27 / .1) 34%, transparent 62%); pointer-events: none; }
html.anim .hero:not(.is-lit) .emerg { animation: emerg 2.8s ease-in-out infinite alternate; }
@keyframes emerg { from { opacity: .7; } to { opacity: 1; } }
.hero.is-lit .emerg { filter: brightness(.34) saturate(.45); }
.hero.is-lit .emerg::after { display: none; }

.hero-title { font: 400 min(calc((100vw - 2 * var(--pad)) / 6.75), calc(var(--wide) / 6.75))/.8 var(--font-display); text-transform: uppercase; white-space: nowrap; color: transparent; background: radial-gradient(ellipse 75% 190% at 94% -70%, #e2523f 0, #a23022 30%, #5a1c15 62%, #3d130f 100%); -webkit-background-clip: text; background-clip: text; -webkit-mask-image: var(--chip); mask-image: var(--chip); -webkit-mask-size: 460px; mask-size: 460px; }
.hero.is-lit .hero-title { background-image: linear-gradient(180deg, #f3f6f8, #c6ccd2); }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; }
.tagline { font: 400 clamp(1.3rem, 2.3vw, 2rem)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--c-hot); }
.pitch { max-width: 35rem; margin-top: .9rem; font-size: 1.12rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* the breaker on the wall */
.breaker { position: relative; flex: 0 0 auto; width: 17rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.3rem; padding: 2rem 1.3rem 1.3rem; background: linear-gradient(180deg, rgb(4 5 6 / .5), rgb(4 5 6 / .78)), url("../set/door-steel.webp") 12% 30% / 300% auto; border: 1px solid #262b30; box-shadow: inset 0 0 0 .35rem #0c0e10, inset 0 0 0 calc(.35rem + 1px) #1d2226, 0 1rem 2.4rem rgb(0 0 0 / .6); color: var(--alert); }
.breaker-stripe { position: absolute; inset: .35rem .35rem auto; height: .7rem; background: repeating-linear-gradient(-45deg, var(--alert) 0 .5rem, #0b0c0d .5rem 1rem); opacity: .5; }
.breaker-pilot { position: absolute; top: 1.6rem; right: 1.05rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--alert); box-shadow: 0 0 .6rem .1rem rgb(255 74 28 / .9), 0 0 2.6rem .6rem rgb(255 74 28 / .4); }
html.anim .breaker[aria-pressed="false"] .breaker-pilot { animation: pilot 1.5s step-end infinite; }
@keyframes pilot { 0% { opacity: 1; } 55% { opacity: .12; } }
.breaker[aria-pressed="true"] { color: var(--c-hot); }
.breaker[aria-pressed="true"] .breaker-pilot { background: var(--ok); box-shadow: 0 0 .6rem .1rem rgb(110 148 136 / .9); }
.breaker-slot { position: relative; width: 3rem; height: 7.4rem; margin: 1.1rem .7rem; background: #030404; border: 1px solid #262b30; box-shadow: inset 0 0 .6rem #000; }
.breaker-handle { position: absolute; left: 50%; top: .45rem; width: 4.4rem; height: 1.5rem; margin-left: -2.2rem; border-radius: .2rem; background: linear-gradient(180deg, #cfd5db, #79828b 55%, #474e55); box-shadow: 0 .3rem .5rem rgb(0 0 0 / .8); transition: transform .26s steps(3); }
.hero:not(.is-lit) .breaker-handle { filter: brightness(.6); }
.breaker[aria-pressed="false"]:hover .breaker-handle { transform: translateY(.55rem); }
.breaker[aria-pressed="true"] .breaker-handle { transform: translateY(4.9rem); }
.mark { position: absolute; left: 0; right: 0; text-align: center; font: 700 .7rem/1 var(--font-num); font-style: normal; color: #7c858d; }
.mark-o { top: -1.1rem; }
.mark-i { bottom: -1.1rem; }
.breaker-label { font: 400 1.3rem/1.05 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }

/* ---- room heads and their blast doors ---- */
.head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: end; gap: 1rem 4rem; min-height: 27rem; margin-inline: calc(50% - 50vw); padding: 9rem calc(50vw - 50%) 3.4rem; }
.head-no { position: absolute; z-index: -4; right: calc(50vw - 50%); top: 2.6rem; font: 400 21rem/.8 var(--font-display); color: rgb(255 255 255 / .07); -webkit-mask-image: var(--chip); mask-image: var(--chip); pointer-events: none; user-select: none; }
.head-title { font: 400 clamp(4.2rem, 13vw, 12.5rem)/.8 var(--font-display); text-transform: uppercase; color: var(--c-hot); -webkit-mask-image: var(--chip); mask-image: var(--chip); -webkit-mask-size: 460px; mask-size: 460px; filter: drop-shadow(0 .25rem .6rem rgb(0 0 0 / .7)); }
.kicker { display: flex; align-items: center; gap: .7rem; font: 600 .8rem/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--c-dim); }
.kicker::before { content: ""; flex: none; width: 1.6rem; height: .5rem; background: repeating-linear-gradient(-45deg, currentColor 0 .2rem, transparent .2rem .44rem); }
.lede { max-width: 32rem; margin-top: .9rem; font-size: 1.15rem; text-shadow: 0 1px .5rem #000; }

.door { position: absolute; inset: 0; z-index: 25; display: flex; overflow: hidden; pointer-events: none; }
html:not(.anim) .door { display: none; }
.room:not(.is-lit) .door { filter: brightness(.3) saturate(.6); }
/* one steel door across both leaves: each shows its own half */
.leaf { position: relative; flex: 0 0 50%; min-width: 0; display: flex; align-items: center; padding: 0 3.6rem; border-block: .5rem solid #050607; background: linear-gradient(180deg, rgb(4 5 6 / .34), rgb(4 5 6 / .58)), url("../set/door-steel.webp") left 46% / 200% auto; box-shadow: inset 0 0 5rem rgb(0 0 0 / .7); }
.leaf-r { background-position: 0 0, right 46%; }
.leaf b { font: 400 clamp(1.5rem, 3.9vw, 3.7rem)/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: rgb(238 242 245 / .8); -webkit-mask-image: var(--chip); mask-image: var(--chip); filter: drop-shadow(0 2px 2px rgb(0 0 0 / .8)); }
.leaf-l { justify-content: flex-end; }
.leaf-l b { font-size: clamp(3rem, 9vw, 8.5rem); }
.door.is-gone { display: none; }
.leaf::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.4rem; background: var(--grain), repeating-linear-gradient(-45deg, #c23c18 0 .7rem, #0b0c0d .7rem 1.4rem); box-shadow: inset 0 0 .5rem rgb(0 0 0 / .8); }
.leaf-l::after { right: 0; box-shadow: 1px 0 0 #000, inset 0 0 .5rem rgb(0 0 0 / .8); }
.leaf-r::after { left: 0; }
.door.is-open .leaf-l { animation: door-l 1.3s forwards; }
.door.is-open .leaf-r { animation: door-r 1.3s forwards; }
@keyframes door-l { 0% { transform: none; animation-timing-function: steps(2, end); } 9% { transform: translateX(-2.5%); animation-timing-function: step-end; } 30% { transform: translateX(-2.5%); animation-timing-function: steps(8, end); } 100% { transform: translateX(-101%); } }
@keyframes door-r { 0% { transform: none; animation-timing-function: steps(2, end); } 9% { transform: translateX(2.5%); animation-timing-function: step-end; } 30% { transform: translateX(2.5%); animation-timing-function: steps(8, end); } 100% { transform: translateX(101%); } }

/* ---- pictures and notices ---- */
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: 3.2rem; }
.armoury + .split { margin-top: 5rem; }
.split-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
/* a notice: words on a dark plate, so they read on any wall */
.notes { display: grid; align-content: start; gap: 2.2rem; }
.note { padding: 1.2rem 1.3rem .5rem; background: linear-gradient(180deg, rgb(4 5 6 / .72), rgb(4 5 6 / .58)); border-top: 2px solid var(--c-line); }
.note h3 { padding-bottom: .7rem; border-bottom: 1px solid var(--c-line); font: 400 1.5rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--c-hot); }
.note li { position: relative; padding: .65rem 0 .65rem 1.3rem; border-bottom: 1px solid var(--c-line); font-size: 1.02rem; }
.note li:last-child { border-bottom: 0; }
.note li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: .45rem; height: .45rem; background: var(--c-dim); }
.notes-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem; margin-top: 4rem; }

.viewer-main { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; }
.viewer-img, .screen-img { position: relative; z-index: -3; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 0 0 .35rem #0b0d0f, 0 0 0 calc(.35rem + 1px) #363c42, 0 1.6rem 3rem rgb(0 0 0 / .7); }
.viewer.cut .viewer-img, .screen.cut .screen-img, .box.cut img { animation: cut .3s step-end; }
@keyframes cut { 0% { filter: brightness(.08); } 30% { filter: brightness(1.5); } 50% { filter: brightness(.35); } 72% { filter: brightness(1); } }
.viewer-bar, .screen figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; font: 500 .78rem/1 var(--font-num); letter-spacing: .08em; text-transform: uppercase; color: var(--c-dim); text-shadow: 0 1px .4rem #000; }
.viewer-cap, .screen figcaption { color: var(--c-hot); }
.viewer-thumbs { display: flex; gap: .7rem; margin-top: .9rem; }
.thumb { position: relative; flex: 1 1 0; max-width: 8rem; }
.thumb img { position: relative; z-index: -3; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: brightness(.5) saturate(.6); box-shadow: 0 0 0 1px #363c42; }
.thumb:hover img { filter: brightness(.85); }
.thumb.is-on img { filter: none; box-shadow: 0 0 0 2px var(--tube); }

/* gore: inspection lightboxes */
.boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1.4rem; }
.box { position: relative; }
.box.is-on { grid-column: span 2; grid-row: span 2; }
.box-btn { display: block; width: 100%; height: 100%; }
.box img { position: relative; z-index: -3; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: brightness(.55) saturate(.6); box-shadow: 0 0 0 .3rem #0b0d0f, 0 0 0 calc(.3rem + 2px) #4d555c, 0 1rem 2rem rgb(0 0 0 / .6); }
.box:hover img { filter: brightness(.8) saturate(.8); }
.box.is-on img { filter: none; box-shadow: 0 0 0 .3rem #0b0d0f, 0 0 0 calc(.3rem + 2px) var(--tube), 0 0 2.8rem .3rem rgb(var(--tube-glow) / .42); }
.box figcaption { position: absolute; left: .8rem; bottom: .8rem; padding: .32rem .5rem; background: rgb(4 5 6 / .84); font: 500 .7rem/1 var(--font-num); letter-spacing: .08em; text-transform: uppercase; color: var(--c-hot); pointer-events: none; }

/* ---- arsenal: the rack and the inventory tag ---- */
.armoury { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; gap: 2.6rem; }
.rack { position: relative; display: flex; flex-wrap: wrap; gap: 1.7rem 2.4rem; padding: 2rem 2rem 2.2rem; }
.rack::before { content: ""; position: absolute; inset: 0; z-index: -4; background: linear-gradient(180deg, rgb(4 5 6 / .56), rgb(4 5 6 / .74)), url("../set/rack-pegboard.webp") center / cover; border: 1px solid #2c3136; box-shadow: inset 0 0 0 .3rem #0d0f11, inset 0 0 4rem rgb(0 0 0 / .6), 0 1.4rem 2.6rem rgb(0 0 0 / .6); }
.rail { position: relative; padding-bottom: .55rem; }
.rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -4; height: .34rem; background: linear-gradient(180deg, #6a5a4c, #2b211b); box-shadow: 0 .3rem .5rem rgb(0 0 0 / .7); }
.rail-name { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .2rem; font: 400 .95rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--c-dim); text-shadow: 0 1px .3rem #000; }
.rail-name span { font: 500 .72rem/1 var(--font-num); }
.rail-guns { display: flex; flex-wrap: wrap; gap: .1rem; }
.gun { position: relative; display: grid; place-items: center; width: 5.5rem; height: 4rem; }
.gun::before { content: ""; position: absolute; inset: -.5rem; z-index: -4; background: radial-gradient(ellipse, rgb(var(--tube-glow) / .3), transparent 68%); opacity: 0; }
.gun img { position: relative; z-index: -3; width: 4.6rem; height: 2.9rem; object-fit: contain; filter: brightness(.55) drop-shadow(0 .25rem .2rem rgb(0 0 0 / .8)); }
.gun:hover::before, .gun:focus-visible::before, .gun.is-on::before { opacity: 1; }
.gun:hover img, .gun:focus-visible img, .gun.is-on img { filter: brightness(1.2) drop-shadow(0 .25rem .2rem rgb(0 0 0 / .8)); }
.gun.is-on::after { content: ""; position: absolute; left: 50%; bottom: -.1rem; width: 1.3rem; height: .22rem; margin-left: -.65rem; background: var(--alert); }

.tag { --tag-ink: #1b1713; --tag-stamp: #ab2c15; --tag-hole: #0f1113;
	position: sticky; top: calc(var(--bar-h) + 1.4rem); z-index: 2; padding: 2.7rem 1.4rem 1.3rem; rotate: -1.1deg; color: var(--tag-ink); font-family: var(--font-num);
	background: radial-gradient(circle at 2rem 1.7rem, var(--tag-hole) 0 .42rem, rgb(0 0 0 / .28) .44rem .58rem, transparent .6rem), radial-gradient(ellipse 60% 40% at 80% 100%, rgb(96 60 30 / .28), transparent), var(--grain), linear-gradient(170deg, #cbc2aa, #aca28a);
	clip-path: polygon(2.7rem 0, 100% 0, 100% 100%, 0 100%, 0 2.7rem); }
.room:not(.is-lit) .tag { --tag-ink: #a39b8a; --tag-stamp: var(--alert); background: radial-gradient(circle at 2rem 1.7rem, #000 0 .42rem, rgb(255 255 255 / .1) .44rem .58rem, transparent .6rem), linear-gradient(170deg, #1a1815, #12110f); }
.tag-top { display: flex; justify-content: space-between; gap: 1rem; padding-left: 2.2rem; font: 500 .72rem/1 var(--font-num); letter-spacing: .08em; text-transform: uppercase; }
.tag-icon { width: 100%; height: 5.4rem; margin: 1.2rem 0 1rem; object-fit: contain; object-position: left center; filter: brightness(0); opacity: .86; }
.room:not(.is-lit) .tag-icon { filter: none; opacity: .5; }
.tag-name { font: 400 1.75rem/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.tag-text { margin-top: .5rem; font: 500 .92rem/1.35 var(--font-ui); }
.stats { display: grid; gap: .55rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed currentColor; }
.stat { display: grid; grid-template-columns: 5.4rem 3.2rem 1fr; align-items: center; font: 500 .72rem/1 var(--font-num); letter-spacing: .04em; text-transform: uppercase; }
.stat-v { padding-right: .7rem; text-align: right; font-weight: 700; font-size: .9rem; }
.meter { display: flex; gap: 2px; height: .62rem; }
.meter i { flex: 1; background: currentColor; opacity: .17; }
.meter i.on { opacity: 1; }
.tag-foot { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: 1.2rem; }
.tag-price { display: inline-flex; align-items: baseline; gap: .5rem; padding: .35rem .6rem; border: 2px solid var(--tag-stamp); rotate: -3deg; color: var(--tag-stamp); font: 700 .72rem/1 var(--font-num); letter-spacing: .08em; text-transform: uppercase; }
.tag-price b { font-size: 1.15rem; }
.tag-link { font: 700 .72rem/1.25 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; text-align: right; }

/* ---- horde: the alarm board ---- */
.alarm-room { display: grid; grid-template-columns: 13rem minmax(0, 1fr); align-items: start; gap: 3.6rem; }
.board { position: sticky; top: calc(var(--bar-h) + 1.4rem); z-index: 2; display: grid; justify-items: center; gap: .9rem; padding: 1.3rem 1rem 1.2rem; background: linear-gradient(180deg, rgb(4 5 6 / .6), rgb(4 5 6 / .82)), url("../set/door-steel.webp") 70% 20% / 420% auto; border: 1px solid #262b30; box-shadow: inset 0 0 0 .3rem #0c0e10, 0 1rem 2rem rgb(0 0 0 / .6); }
.board-label { font: 600 .74rem/1 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--c-dim); }
.flaps { display: flex; gap: .4rem; }
.flap { display: grid; place-items: center; width: 4.7rem; height: 6.6rem; border-radius: .25rem; background: linear-gradient(180deg, #1e2226 0 49%, #000 49% 51%, #15181b 51%); box-shadow: inset 0 0 0 1px #2c3237; font: 400 5rem/1 var(--font-display); color: var(--c-hot); }
.flap.flip { animation: flip .16s step-end; }
@keyframes flip { 0% { transform: scaleY(.25); filter: brightness(.5); } 50% { transform: scaleY(.7); } 100% { transform: none; } }
.alarm { display: grid; justify-items: center; align-content: start; gap: .7rem; min-height: 4.4rem; }
.alarm-lamp { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5a1712, #2a0b09 70%); box-shadow: inset 0 0 0 2px #0a0b0c, 0 0 0 2px #2a2f34; }
.board.is-alarm .alarm-lamp { background: radial-gradient(circle at 35% 30%, #ff9a84, var(--emerg) 60%); box-shadow: inset 0 0 0 2px #0a0b0c, 0 0 0 2px #2a2f34, 0 0 1.4rem .3rem rgb(215 40 27 / .85), 0 0 5rem 1.4rem rgb(215 40 27 / .3); }
html.anim .board.is-alarm .alarm-lamp { animation: alarm 1.1s step-end infinite; }
@keyframes alarm { 0% { opacity: 1; } 50% { opacity: .3; } }
.alarm-who { font: 400 1.05rem/1.1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--emerg-ink); }

.beats { display: grid; gap: 7rem; }
.beat-first { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 3rem; }
.boss { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 3rem; }
.boss-flip .boss-words { order: 2; }
.boss-flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.boss-bare { grid-template-columns: 1fr; padding: 2rem 0 1rem; }
.boss-bare .boss-name { font-size: clamp(3rem, 11vw, 10rem); }
.wash { position: absolute; inset: -5rem -4rem; z-index: -2; background: radial-gradient(ellipse 28% 80% at 50% 50%, rgb(215 40 27 / .42), transparent 72%) 50% 0 / 220% 100% no-repeat; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%); opacity: 0; pointer-events: none; }
html.anim .room.is-lit .boss.is-now .wash { opacity: 1; animation: wash 2.6s steps(13) infinite; }
html:not(.anim) .room.is-lit .boss.is-now .wash { opacity: .7; }
@keyframes wash { from { background-position: -25% 0; } to { background-position: 125% 0; } }
.kicker-alarm { color: var(--emerg-ink); text-shadow: 0 1px .4rem #000; }
.boss-name { margin: 1rem 0 1.2rem; font: 400 clamp(2.6rem, 5.6vw, 5.4rem)/.85 var(--font-display); text-transform: uppercase; color: var(--c-hot); -webkit-mask-image: var(--chip); mask-image: var(--chip); filter: drop-shadow(0 .2rem .5rem rgb(0 0 0 / .8)); }
.boss-text { max-width: 30rem; font-size: 1.2rem; text-shadow: 0 1px .5rem #000, 0 0 1.5rem #000; }

/* ---- classes: one spotlight each ---- */
.stage { display: flex; gap: .5rem; height: 31rem; border-bottom: .5rem solid #050607; }
.fig { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex-grow .24s steps(4); }
.fig.is-on { flex-grow: 1.9; }
.room.is-lit [data-class="tank"] { --cls: var(--cls-tank); }
.room.is-lit [data-class="assault"] { --cls: var(--cls-assault); }
.room.is-lit [data-class="support"] { --cls: var(--cls-support); }
.room.is-lit [data-class="chem"] { --cls: var(--cls-chem); }
.fig-img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: brightness(.3) grayscale(.85); transition: filter .2s steps(3); }
.fig:hover .fig-img { filter: brightness(.5) grayscale(.5); }
.fig.is-on .fig-img { filter: brightness(1.05); }
/* the spotlight: the class's colour in the shape of light falling through dusty air */
.cone { position: absolute; inset: 0; z-index: -2; background: var(--cls); -webkit-mask: url("../set/haze-cone.webp") center top / 150% 104% no-repeat; mask: url("../set/haze-cone.webp") center top / 150% 104% no-repeat; mix-blend-mode: screen; opacity: 0; transition: opacity .2s steps(3); }
.room.is-lit .fig.is-on .cone { opacity: .62; }
.fig-spot { position: absolute; top: 0; left: 50%; width: 2.6rem; height: .8rem; margin-left: -1.3rem; background: #08090a; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.room.is-lit .fig.is-on .fig-spot { background: linear-gradient(180deg, #08090a 55%, var(--cls) 56%); }
.fig-name { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1rem; font: 400 1.5rem/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--c-dim); background: linear-gradient(180deg, transparent, rgb(4 5 6 / .82)); }
.fig-name b { font-weight: inherit; }
.fig.is-on .fig-name { color: var(--c-hot); }
.room.is-lit .fig.is-on .fig-name { color: var(--cls); }
.fig-icon { width: 1.9rem; height: 1.9rem; opacity: .55; }
.fig.is-on .fig-icon { opacity: 1; }

.placard { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 2.5rem; margin-top: 1.6rem; padding: 1.6rem 1.4rem 1.5rem; border-top: 2px solid var(--cls); background: linear-gradient(180deg, rgb(4 5 6 / .74), rgb(4 5 6 / .6)); }
.placard-id { display: grid; grid-template-columns: auto 1fr; align-content: start; align-items: center; gap: .35rem 1rem; }
.placard-icon { grid-row: span 2; width: 3.6rem; height: 3.6rem; }
.room:not(.is-lit) .placard img { opacity: .5; }
.placard-name { font: 400 2.6rem/1 var(--font-display); text-transform: uppercase; color: var(--c-hot); }
.room.is-lit .placard-name { color: var(--cls); }
.placard-title { font: 600 .8rem/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--c-dim); }
.placard-line { grid-column: 1 / -1; margin-top: .8rem; font-size: 1.1rem; }
.placard-health { grid-column: 1 / -1; font: 500 .8rem/1 var(--font-num); letter-spacing: .08em; text-transform: uppercase; color: var(--c-dim); }
.placard-health b { color: var(--c-hot); font-size: 1rem; }
.skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.skill { padding: 0 1.2rem; border-left: 1px solid var(--c-line); }
.skill-slot { font: 600 .7rem/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--c-dim); }
.skill-head { display: flex; align-items: center; gap: .6rem; margin: .7rem 0; }
.skill-icon { width: 2.2rem; height: 2.2rem; }
.skill-name { font: 600 1.05rem/1.1 var(--font-ui); color: var(--c-hot); }
.skill li { font: 500 .78rem/1.55 var(--font-num); }

/* ---- maps: the sector board ---- */
.sectors { display: grid; grid-template-columns: 23rem minmax(0, 1fr); align-items: start; gap: 3.2rem; }
.sectors-side { display: grid; gap: 2.4rem; }
.wallboard { display: grid; padding: .6rem; background: linear-gradient(180deg, rgb(4 5 6 / .66), rgb(4 5 6 / .84)), url("../set/door-steel.webp") 30% 80% / 380% auto; border: 1px solid #262b30; box-shadow: inset 0 0 0 .3rem #0c0e10, 0 1rem 2rem rgb(0 0 0 / .6); }
.sector { display: grid; grid-template-columns: 1.4rem 1.8rem 1fr; align-items: center; gap: .15rem .8rem; padding: .95rem .9rem; border-bottom: 1px solid rgb(190 202 218 / .1); }
.sector:last-child { border-bottom: 0; }
.sector-lamp { grid-row: span 2; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b0582f, #5e2610 70%); box-shadow: 0 0 0 2px #0a0b0c, 0 0 0 3px #30363c, 0 0 .5rem rgb(255 74 28 / .28); }
.sector.is-on .sector-lamp { background: radial-gradient(circle at 35% 30%, #ffd9bd, var(--alert) 55%); box-shadow: 0 0 0 2px #0a0b0c, 0 0 0 3px #30363c, 0 0 .9rem .2rem rgb(255 74 28 / .9), 0 0 2.6rem .6rem rgb(255 74 28 / .35); }
.sector-no { grid-row: span 2; font: 500 .8rem/1 var(--font-num); color: var(--c-dim); }
.sector-name { font: 400 1.7rem/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--c-text); }
.sector:hover .sector-name, .sector.is-on .sector-name { color: var(--c-hot); }
.sector-line { grid-column: 3; font-size: .9rem; color: var(--c-dim); }
.screen-pane { position: relative; aspect-ratio: 16 / 9; }
.screen-name { display: none; }
.screen.is-bare .screen-img { display: none; }
.screen.is-bare .screen-name { position: absolute; inset: 0; z-index: -3; display: grid; place-items: center; background: linear-gradient(180deg, rgb(4 5 6 / .5), rgb(4 5 6 / .76)), url("../set/door-steel.webp") center / cover; box-shadow: 0 0 0 .35rem #0b0d0f, 0 0 0 calc(.35rem + 1px) #363c42; font: 400 clamp(4rem, 12vw, 11rem)/1 var(--font-display); text-transform: uppercase; color: rgb(238 242 245 / .3); }

/* ---- last room: the dead end, under one swinging lamp ---- */
.closing { min-height: max(48rem, 100svh); display: grid; align-items: end; text-align: center; }
.closing > .in { width: 100%; padding: 30rem 0 5rem; }
.closing > .lamp { display: none; }
/* the whole corridor, not a window's worth of it */
.closing > .wall { position: absolute; inset: 0; height: auto; margin: 0; }
.closing > .wall img { object-position: 50% 42%; filter: brightness(.95) contrast(1.05); }
.closing > .wall::after { background: radial-gradient(ellipse 60% 70% at 50% 40%, transparent 30%, rgb(4 5 6 / .7)), linear-gradient(180deg, rgb(4 5 6 / .5), transparent 22%, transparent 50%, rgb(4 5 6 / .82)); }
.closing-head { font: 400 clamp(3rem, 9.4vw, 9rem)/.85 var(--font-display); text-transform: uppercase; color: var(--c-hot); -webkit-mask-image: var(--chip); mask-image: var(--chip); filter: drop-shadow(0 .3rem 1rem #000); }
.closing-sub { position: relative; z-index: 4; margin: 1.6rem 0 2rem; font-size: 1.2rem; text-shadow: 0 1px .5rem #000, 0 0 1.5rem #000; }
.closing .btn { position: relative; z-index: 4; }
.swing { position: absolute; top: -2rem; left: 50%; z-index: 3; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; }
html.anim .closing.is-lit .swing { animation: swing 4.4s ease-in-out infinite alternate; }
@keyframes swing { from { transform: rotate(7deg); } to { transform: rotate(-7deg); } }
/* the lamp and its cone of dusty light are one picture; with the power out only the unlit shade is left */
.pendant { position: absolute; left: -8rem; top: 0; width: 16rem; aspect-ratio: 781 / 1366; background: url("../set/lamp-pendant.webp") center top / contain no-repeat; }
.closing:not(.is-lit) .pendant { filter: brightness(.3) saturate(.2); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 37%); mask-image: linear-gradient(180deg, #000 30%, transparent 37%); }
.pool { display: none; }
.closing.is-lit .pool { display: block; position: absolute; left: -45rem; top: 4rem; width: 90rem; height: 60rem; background: radial-gradient(ellipse 20rem 24rem at 50% 30%, rgb(255 214 150 / .1), transparent 72%); }

/* ---- footer ---- */
.foot { display: grid; justify-items: center; gap: .7rem; padding: 3.5rem var(--pad) 4rem; border-top: .5rem solid #050607; background: var(--pitch); color: #938d8b; font-size: .95rem; text-align: center; }
html.on .foot { color: var(--dim); }
.foot-mark { font: 400 1.6rem/1 var(--font-display); letter-spacing: .14em; }
.foot-links { display: flex; gap: 1.6rem; font: 600 .8rem/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; }
.foot-small { max-width: 46rem; font-size: .82rem; }
.foot-small a { margin-left: .7em; }
.foot-logo { width: auto; height: 2rem; margin-top: 1rem; opacity: .7; }

/* ---- narrower ---- */
@media (max-width: 960px) {
	.head { grid-template-columns: 1fr; min-height: 20rem; padding-top: 7rem; }
	.head-no { font-size: 13rem; }
	.armoury, .split, .split-flip, .alarm-room, .beat-first, .boss, .boss-flip, .sectors, .placard { grid-template-columns: minmax(0, 1fr); }
	.split-flip > .notes { order: 2; }
	.boss-flip .boss-words { order: 0; }
	.tag { position: relative; top: auto; rotate: none; }
	.board { grid-template-columns: auto auto 1fr; align-items: center; justify-items: start; gap: 1rem; padding: .7rem 1rem; }
	.flap { width: 2.4rem; height: 3.3rem; font-size: 2.4rem; }
	.alarm { grid-auto-flow: column; align-items: center; min-height: 0; }
	.beats { gap: 4.5rem; }
	.skills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 0; }
	.hero-row { flex-direction: column; align-items: stretch; }
	.breaker { width: auto; max-width: 24rem; }
}
@media (max-width: 760px) {
	.bar { gap: 1rem; }
	.bar-nav, .bar .btn { display: none; }
	.bar-mark { opacity: 1; }
	.power { margin-left: auto; }
	.hero-title { font-size: calc((100vw - 2 * var(--pad)) / 3.8); white-space: normal; }
	.hero-title span { display: block; }
	.emerg { width: 3.2rem; }
	.breaker-slot { height: 5.4rem; }
	.breaker[aria-pressed="true"] .breaker-handle { transform: translateY(2.9rem); }
	.in { padding-bottom: 4.5rem; }
	.rack { gap: 1.3rem 1.2rem; padding: 1.2rem 1rem 1.4rem; }
	.gun { width: 4.4rem; height: 3.3rem; }
	.gun img { width: 3.7rem; height: 2.4rem; }
	.boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
	.stage { height: 20rem; gap: .25rem; }
	.fig-name { padding: .7rem .4rem; font-size: .95rem; gap: .3rem; }
	.fig:not(.is-on) .fig-name b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.fig-icon { width: 1.4rem; height: 1.4rem; }
	.notes-row { grid-template-columns: 1fr; }
	.placard { padding-inline: 1rem; }
	.skill { padding: 0 .8rem; }
	.closing > .in { padding-top: 24rem; }
	.pendant { left: -6rem; width: 12rem; }
	.lamp { --k: .5; }
	.room:is(.room-horde, .room-squad, .room-maps) > .lamp { --lx: 84%; }
	.leaf { padding: 0 2rem; }
	.leaf-r { padding-right: .6rem; }
	.leaf b { font-size: clamp(1rem, 4.6vw, 2.4rem); white-space: normal; overflow-wrap: anywhere; }
}