/* =============================================================
EXPLORE THE SILO — hud.css
THE HUD (2026-09-21). The interface as the Figma design system draws it:
file LtSQYPn0su2TGLGl1ngnWK, canvas "Silo / HUD — Final". Loaded after
style.css and restyles what that file lays out; nothing here changes
what a control does. Sizes are the design's own pixels at every desktop
width (the frames are 1600 × 1200); under 900 px style.css's phone
layout stands and this file steps back.
============================================================= */
/* ---- Faces (Latin subsets, from Google Fonts, SIL OFL) ------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/inter-300-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter-500-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/archivo-700-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---- Tokens (Figma variables, values verbatim) ---------------------- */
:root {
--hud-void: #0f0d0a;
--hud-glass: rgba(26, 23, 19, 0.84);
--hud-glass-deep: rgba(15, 13, 10, 0.9);
--hud-raised: #241f19;
--hud-text: #efe9dc;
--hud-text-2: rgba(239, 233, 220, 0.8);
--hud-text-3: rgba(239, 233, 220, 0.66);
--hud-text-off: rgba(239, 233, 220, 0.62);
--hud-hair: rgba(239, 233, 220, 0.22);
--hud-line: rgba(239, 233, 220, 0.45);
--hud-amber: #e8a33d;
--hud-amber-line: rgba(232, 163, 61, 0.9);
--hud-amber-wash: rgba(232, 163, 61, 0.18);
--hud-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--hud-display: "Archivo", "Inter", sans-serif;
--hud-mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
/* The type styles. Tracking is the design's percentage of the size. */
--hud-label: 500 13px/normal var(--hud-sans); /* Label/UI, +4% */
--hud-micro: 500 12px/normal var(--hud-sans); /* Label/Micro, +8% */
--hud-sub: 300 10px/normal var(--hud-sans); /* event sublabels, +8% */
--hud-value: 500 14px/normal var(--hud-mono); /* Data/Value, +2% */
--hud-meta: 400 13px/1.75 var(--hud-mono); /* Data/Meta, +1% */
--paper: var(--hud-text);
}
/* Backdrop blur is the design's; ?blur=0 (html.no-blur) turns it off for a comparison. */
:root { --hud-blur-8: blur(8px); --hud-blur-12: blur(12px); --hud-blur-14: blur(14px); }
html.no-blur { --hud-blur-8: none; --hud-blur-12: none; --hud-blur-14: none; }
@media (min-width: 901px) {
/* =============================================================
THE LEVEL (UC-01): at x 64, y 374 of the frame, 600 wide
============================================================= */
#info { align-items: flex-start; }
.level-card {
width: 600px; max-width: none;
/* The design's y 374 at its own 1200 px height; on a shorter window the block rides higher than its share, so a long
card keeps clear of the foot (user, 2026-09-21). */
padding: 0; margin: clamp(80px, calc(31vh - (1200px - 100vh) * 0.26), 374px) 0 0 64px;
text-shadow: none;
color: var(--hud-text);
}
.level-head { display: flex; align-items: flex-end; gap: 16px; margin: 0 0 6px; }
.level-number {
font: 700 76px/0.9 var(--hud-display); letter-spacing: -1.52px;
font-variant-numeric: normal;
}
.level-card.is-filler .level-number { font-size: 76px; }
.level-eyebrow { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; }
.level-region, .level-of {
font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase;
}
.level-region { color: var(--hud-amber); }
.level-of { color: var(--hud-text-2); }
.level-of[hidden] { display: none; }
.level-name { font: 700 38px/1.05 var(--hud-display); letter-spacing: -0.38px; margin: 0 0 28px; }
.level-nocanon { font: var(--hud-micro); letter-spacing: 0.96px; color: var(--hud-text-3); margin: -18px 0 20px; }
.level-note { font: 300 14px/1.55 var(--hud-sans); border-left-color: var(--hud-amber); }
.level-tabs { gap: 10px; margin: 0 0 30px; }
.level-tabs button {
height: 44px; padding: 0 20px;
font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase;
color: var(--hud-text);
background: var(--hud-glass); border: 1px solid var(--hud-line); border-radius: 8px;
backdrop-filter: var(--hud-blur-8); -webkit-backdrop-filter: var(--hud-blur-8);
text-decoration: none;
transition: border-color 140ms ease, background 140ms ease;
}
.level-tabs button:hover { border-color: rgba(239, 233, 220, 0.7); }
.level-tabs button[aria-pressed="true"], .level-tabs button[aria-selected="true"] { text-decoration: none; background: var(--hud-amber-wash); border-color: var(--hud-amber-line); }
.level-tabs.is-dense { gap: 10px; }
.level-tabs.is-dense button { font-size: 13px; letter-spacing: 0.52px; padding: 0 20px; }
.level-body { font: 500 17px/1.62 var(--hud-sans); max-width: none; margin: 0 0 34px; color: var(--hud-text); }
.level-card.is-filler .level-body { opacity: 1; color: var(--hud-text-2); }
/* Who appears here: a rule, an amber label, one mono line. */
.level-cast { border-top: 1px solid var(--hud-line); padding-top: 18px; }
.level-cast[hidden] { display: none; }
.level-cast-h { margin: 0 0 10px; font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-amber); }
.level-chips { gap: 0; font: var(--hud-meta); letter-spacing: 0.13px; color: var(--hud-text-2); }
.level-chips li { font: inherit; letter-spacing: inherit; color: inherit; }
.level-chips li + li::before { content: "\00b7"; margin: 0 8px; opacity: 1; }
.level-chips li[data-kind="department"]::before { content: none; }
.level-gate { font: var(--hud-micro); letter-spacing: 0.96px; border-left-color: var(--hud-amber); }
/* =============================================================
THE RAIL: 267 wide, 88 from the right edge, 48 from the top
============================================================= */
.controls {
top: 48px; right: 88px; width: 267px;
gap: 10px; align-items: stretch;
font-family: var(--hud-sans);
}
/* Folding: the rail goes at once and comes back only after the line has finished its move, sliding in as it fades. */
.controls { transition: opacity 260ms ease 260ms, transform 260ms ease 260ms, visibility 0s linear 260ms; }
html.is-rail-hidden .controls { opacity: 0; visibility: hidden; transform: translateX(12px); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms; }
@media (prefers-reduced-motion: reduce) { .controls, .rail-toggle, .rt-knob { transition: none; } }
.ctl {
height: 44px; padding: 0 16px 0 18px;
font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase;
color: var(--hud-text);
background: var(--hud-glass); border: 1px solid var(--hud-line); border-radius: 8px;
backdrop-filter: var(--hud-blur-8); -webkit-backdrop-filter: var(--hud-blur-8);
}
.ctl:hover, .ctl:focus-visible { border-color: rgba(239, 233, 220, 0.7); background: var(--hud-glass); }
.ctl:focus-visible { outline: 1px solid var(--hud-amber-line); outline-offset: 2px; }
/* Watched up to: label, then three 32 x 30 segments spread across the rest. */
.ctl-row { height: 44px; padding: 6px 8px 6px 18px; gap: 20px; background: var(--hud-glass); border: 1px solid var(--hud-line); border-radius: 6px;
backdrop-filter: var(--hud-blur-8); -webkit-backdrop-filter: var(--hud-blur-8); }
.ctl-label { font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-text); white-space: nowrap; }
.spoiler-set { flex: 1 1 auto; display: flex; justify-content: space-between; gap: 0; }
.ctl.ctl-s {
width: 32px; height: 30px; padding: 6px; opacity: 1;
font: var(--hud-label); letter-spacing: 0.52px; color: var(--hud-text-off);
background: none; border: 1px solid transparent; border-radius: 6px;
backdrop-filter: none; -webkit-backdrop-filter: none;
display: inline-flex; align-items: center; justify-content: center;
}
.ctl.ctl-s:hover { border-color: var(--hud-hair); }
.ctl.ctl-s[aria-pressed="true"] { color: var(--hud-text); background: var(--hud-amber-wash); border-color: var(--hud-amber-line); }
/* The record's counter: label left, a 32 x 30 count box right. */
.ctl.ctl-record { padding: 6px 8px 6px 18px; gap: 20px; border-radius: 6px; }
.ctl-record-i { display: none; }
.ctl-record > span:first-of-type { flex: 1 1 auto; text-align: left; }
.ctl-record-n {
flex: 0 0 auto; width: 32px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
font: var(--hud-label); letter-spacing: 0.52px; color: var(--hud-text-2);
background: var(--hud-raised); border: 1px solid var(--hud-line); border-radius: 6px;
}
/* Jump to: label and an amber caret. Open takes the amber wash. */
#jump-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ctl-caret { width: auto; height: auto; border: 0; margin: 0; vertical-align: 0; transition: none; }
.ctl-caret::before { content: "\25BE"; font: 500 30px/1 var(--hud-sans); color: var(--hud-amber); }
.ctl[aria-expanded="true"] .ctl-caret { transform: none; }
.ctl[aria-expanded="true"] .ctl-caret::before { content: "\25B4"; }
#jump-toggle[aria-expanded="true"] { background: var(--hud-amber-wash); border-color: var(--hud-amber-line); }
/* THE JUMP MENU: over the events, not above them in the stack. 267 wide,
radius 12, 6 inside; rows of 44 at radius 6. */
.jump-menu {
position: absolute; top: 158px; left: 0; right: 0; z-index: 2;
width: auto; max-height: calc(100vh - 48px - 158px - 123px); min-height: 200px;
padding: 6px; display: flex; flex-direction: column; gap: 2px;
background: var(--hud-glass-deep); border: 1px solid var(--hud-line); border-radius: 12px;
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65);
backdrop-filter: var(--hud-blur-12); -webkit-backdrop-filter: var(--hud-blur-12);
scrollbar-width: thin; scrollbar-color: var(--hud-line) transparent;
}
.jump-menu[hidden] { display: none; }
.jump-menu::-webkit-scrollbar { width: 3px; }
.jump-menu::-webkit-scrollbar-thumb { background: var(--hud-line); border-radius: 999px; }
.jump-menu .jm-region { margin: 0; padding: 14px 14px 8px; font: var(--hud-micro); letter-spacing: 0.96px; color: var(--hud-amber); }
.jump-menu .jm-region:first-child { margin-top: 0; }
.jump-menu button {
flex: 0 0 auto; min-height: 44px; padding: 13px 14px 13px 17px; gap: 14px; align-items: center;
border: 0; border-left: 3px solid transparent; border-radius: 6px;
font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; color: var(--hud-text-2);
}
.jump-menu .jm-n { flex: 0 0 28px; text-align: right; opacity: 1; font: var(--hud-value); letter-spacing: 0.28px; color: var(--hud-text-3); }
.jump-menu button:hover, .jump-menu button:focus-visible { background: var(--hud-raised); color: var(--hud-text); border-left-color: transparent; }
.jump-menu button:hover .jm-n, .jump-menu button:focus-visible .jm-n { color: var(--hud-text-2); }
.jump-menu button[aria-current="true"] { background: var(--hud-amber-wash); border-left-color: var(--hud-amber); color: var(--hud-text); }
.jump-menu button[aria-current="true"] .jm-n { color: var(--hud-text); }
.controls.is-open .ctl-events { visibility: hidden; }
/* THE EVENTS: two groups, the ones that can run and the ones that cannot,
60 apart; each a 267 card with a 3 px bar at the left, a title, a
sublabel, and a lock in the ones that cannot. */
.ctl-events { display: flex; flex-direction: column; gap: 10px; }
.ctl-events[hidden] { display: none; }
.ctl-events:not([hidden]) { margin-top: 50px; }
/* The foot belongs to the inside of the silo (user, 2026-09-21): not on the plain, the approach or the ramp. */
:root[data-phase="surface"] #hud-foot, :root[data-phase="approach"] #hud-foot, :root[data-phase="ramp"] #hud-foot,
:root[data-phase="surface"] .hud-contact, :root[data-phase="approach"] .hud-contact, :root[data-phase="ramp"] .hud-contact { display: none; }
/* Out to clean nothing of the HUD shows but the one control (the reference frame): not the hide line, not the foot. */
:root.is-cleaning .rail-toggle, :root.is-cleaning #hud-foot, :root.is-cleaning .hud-contact { visibility: hidden; }
.controls .ctl-black {
position: relative; height: auto; padding: 12px 18px 12px 19px;
display: flex; flex-direction: row; align-items: center; gap: 12px;
text-align: left; line-height: normal; overflow: hidden;
background: var(--hud-glass); border-color: var(--hud-line);
transition: opacity 260ms ease, transform 260ms ease, border-color 140ms ease, background 140ms ease;
}
.controls .ctl-black::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.controls .ctl-black .ctl-black-t { order: 1; display: block; font: var(--hud-label); letter-spacing: 0.52px; color: var(--hud-text); }
.controls .ctl-black .ctl-black-s { order: 2; display: block; margin-top: 3px; font: var(--hud-sub); letter-spacing: 0.8px; text-transform: uppercase; color: var(--hud-text-2); }
.controls .ctl-black .ctl-black-t, .controls .ctl-black .ctl-black-s { flex: 0 0 100%; }
.controls .ctl-black { flex-wrap: wrap; row-gap: 0; }
.controls .ctl-black:hover, .controls .ctl-black:focus-visible { border-color: rgba(239, 233, 220, 0.7); }
/* Running: amber line, amber bar, amber sublabel. No progress hairline. */
.controls .ctl-black.is-running { background: var(--hud-glass); border-color: var(--hud-amber-line); }
.controls .ctl-black.is-running::before { background: var(--hud-amber); }
.controls .ctl-black.is-running .ctl-black-t { color: var(--hud-text); }
.controls .ctl-black.is-running .ctl-black-s { color: var(--hud-amber); }
.controls .ctl-black.is-running::after { content: none; animation: none; }
/* Cannot run here: the deep glass, a hairline, dimmed words, and a lock. */
.controls .ctl-black.is-off { background: var(--hud-glass-deep); border-color: var(--hud-hair); padding-right: 52px; }
.controls .ctl-black.is-off .ctl-black-t, .controls .ctl-black.is-off .ctl-black-s { color: var(--hud-text-off); }
.controls .ctl-black.is-off:hover, .controls .ctl-black.is-off:focus-visible { border-color: var(--hud-hair); }
.controls .ctl-black.is-off::after {
content: ""; position: absolute; right: 18px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
border-radius: 999px; background: var(--hud-raised); border: 1px solid var(--hud-line); box-sizing: border-box;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center; background-size: 8px 8px;
animation: none;
}
/* One palette for every event: the per-event colours of style.css go. */
.controls .ctl-visor, .controls .ctl-flood, .controls .ctl-race, .controls .ctl-quake, .controls .ctl-clean { background: var(--hud-glass); border-color: var(--hud-line); }
.controls .ctl-visor .ctl-black-s, .controls .ctl-flood .ctl-black-s, .controls .ctl-race .ctl-black-s { color: var(--hud-text-2); }
.controls .ctl-visor.is-running, .controls .ctl-flood.is-running, .controls .ctl-race.is-running { background: var(--hud-glass); border-color: var(--hud-amber-line); }
.controls .ctl-visor.is-running .ctl-black-t, .controls .ctl-flood.is-running .ctl-black-t, .controls .ctl-race.is-running .ctl-black-t { color: var(--hud-text); }
.controls .ctl-visor.is-running .ctl-black-s, .controls .ctl-flood.is-running .ctl-black-s, .controls .ctl-race.is-running .ctl-black-s { color: var(--hud-amber); }
.controls .ctl-visor:hover, .controls .ctl-flood:hover, .controls .ctl-race:hover { border-color: rgba(239, 233, 220, 0.7); }
/* THE HIDE LINE: a hairline with a round arrow at its middle. Open, it
stands 26 px left of the rail and hides it; closed, 26 px left of the
gauge and brings it back. */
/* Centred on the rail (user, 2026-09-21): js/main.js sets top and height from the rail's own box - four fifths of
its height, about its middle - so the knob sits level with the middle of all the buttons together, whatever the
window's height. The values here stand until that runs. */
.rail-toggle {
position: fixed; top: 17.5vh; height: 43.6vh; width: 21px; z-index: 6;
right: calc(88px + 267px + 26px);
appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
transition: right 260ms ease;
}
.rail-toggle::before, .rail-toggle::after {
content: ""; position: absolute; left: 10px; width: 1px; background: var(--hud-line);
}
.rail-toggle::before { top: 0; height: calc(50% - 10.5px); }
.rail-toggle::after { top: calc(50% + 10.5px); bottom: 0; }
.rt-knob {
position: absolute; left: 0; top: calc(50% - 10.5px); width: 21px; height: 21px; border-radius: 999px;
background: rgba(239, 233, 220, 0.8);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center; background-size: 9px 8px;
transition: transform 220ms ease;
}
.rail-toggle:hover .rt-knob { background-color: var(--hud-text); }
.rail-toggle:focus-visible { outline: 1px solid var(--hud-amber-line); outline-offset: 2px; border-radius: 12px; }
html.is-rail-hidden .rail-toggle { right: 88px; }
html.is-rail-hidden .rt-knob { transform: rotate(180deg); }
/* =============================================================
THE DEPTH SLIDER: the spine 56 px from the right edge, the level
number in amber above it, "144" below, a ring at the current level,
amber from the top down to it.
============================================================= */
.depth-gauge { --gauge-edge: 16px; color: var(--hud-text); }
.gauge-ticks { top: 77px; bottom: 143px; width: 1px; background: var(--hud-line); opacity: 1; }
.gauge-ticks .tick { left: 1px; width: 5px; height: 1px; background: var(--hud-text); opacity: 0.22; }
.gauge-ticks .tick.is-canon { left: 1px; width: 13px; height: 1px; opacity: 1; }
.gauge-ticks .tick.is-filler { opacity: 0.22; }
.gauge-ticks .tick.is-region { left: 1px; width: 10px; height: 1px; background: var(--hud-amber); opacity: 1; }
.gauge-progress { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: var(--hud-amber); }
.gauge-thumb {
top: 77px; width: 7.5px; height: 7.5px; margin-left: -3.75px; margin-top: -3.75px;
border: 1.5px solid var(--hud-amber); background: var(--hud-void); box-sizing: border-box;
}
.gauge-jump::after { background: var(--hud-amber); left: calc(50% - 1px); width: 18px; }
.gauge-readout { padding: 0; left: 0; right: var(--gauge-edge); }
.gauge-readout.gauge-top { top: 48px; bottom: auto; font: var(--hud-value); letter-spacing: 0.28px; color: var(--hud-amber); }
.gauge-readout.gauge-bottom { bottom: 118px; font: 400 11px/normal var(--hud-mono); letter-spacing: 0.66px; color: var(--hud-text-3); text-transform: uppercase; }
#gauge-of, #gauge-region { display: none; }
/* =============================================================
THE BOTTOM: the tip and the line under it at the left, the contact
at the right.
============================================================= */
#hud-foot { position: fixed; left: 64px; bottom: 28px; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; pointer-events: none; }
#hud-foot > * { pointer-events: auto; }
/* 30% SMALLER (user, 2026-09-21): 44 -> 31 high, 18/20 -> 13/14 inside, the glow with it. The words go to 10, the
smallest size the HUD sets; 13 less 30% is 9.1, which is under it and stops reading. The census's button follows. */
:root { --tip-h: 31px; --tip-pad: 0 14px 0 13px; --tip-font: 500 10px/normal var(--hud-sans); }
.tip-btn {
position: static; display: inline-flex; align-items: center; height: var(--tip-h); padding: var(--tip-pad);
background: var(--hud-amber-wash); color: #f4f7fa;
border: 1px solid var(--hud-amber-line); border-radius: 8px;
box-shadow: inset 0 0 4px 0 var(--hud-amber);
font: var(--tip-font); letter-spacing: 0.5px; text-transform: uppercase;
backdrop-filter: var(--hud-blur-8); -webkit-backdrop-filter: var(--hud-blur-8);
transition: background 140ms ease;
}
.tip-btn:hover, .tip-btn:focus-visible { background: rgba(232, 163, 61, 0.28); transform: none; }
.hud-disclaimer { margin: 0; font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-text-3); white-space: nowrap; }
.hud-contact { position: fixed; right: 88px; bottom: 28px; z-index: 6; font: 400 13px/normal var(--hud-mono); letter-spacing: 0.26px; color: var(--hud-amber); text-decoration: none; }
.hud-contact:hover { text-decoration: underline; }
/* The way-in line and the drag hint keep clear of the new foot. */
.way-in { left: 64px; bottom: 120px; }
/* =============================================================
THE MODALS (UC-04, UC-05): the shell at radius 16, 32/36 inside, a
0.55 veil behind; the record 1060 wide, the find 620.
============================================================= */
.race-record { background: rgba(15, 13, 10, 0.55); font-family: var(--hud-sans); color: var(--hud-text); }
.rr-card {
width: min(94vw, 620px); padding: 32px 36px 28px;
background: var(--hud-glass-deep); border: 1px solid var(--hud-line); border-radius: 16px;
box-shadow: 0 18px 28px rgba(0, 0, 0, 0.7);
backdrop-filter: var(--hud-blur-14); -webkit-backdrop-filter: var(--hud-blur-14);
}
.rr-card.cf-card { width: min(94vw, 1060px); }
.rr-head { margin: 0 0 14px; font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-text-3); }
.cf-head { align-items: center; }
.cf-standing { display: inline-flex; align-items: center; gap: 8px; color: var(--hud-text-3); }
.cf-pill { display: inline-block; padding: 6px 12px; border-radius: 6px; background: var(--hud-amber-wash); border: 1px solid var(--hud-amber-line); color: var(--hud-text); }
.rr-title { margin: 0 0 18px; font: var(--hud-value); letter-spacing: 0.28px; text-transform: uppercase; }
.rr-rule { background: var(--hud-line); margin: 0 0 24px; }
.rr-row { padding: 0; margin: 0 0 16px; align-items: center; font: var(--hud-value); letter-spacing: 0.28px; }
.rr-row:last-of-type { margin-bottom: 0; }
.rr-row span:first-child { font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; color: var(--hud-text-3); }
.rr-row .rr-v-primary { color: var(--hud-text); }
.rr-row .rr-v-secondary { color: var(--hud-text-2); }
.rl-desc { margin: 22px 0 0; font: var(--hud-meta); letter-spacing: 0.13px; color: var(--hud-text-2); }
.rr-stamp {
margin: 26px 0 0; padding: 13px 20px; display: inline-block; transform: none;
font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; color: var(--hud-text);
background: var(--hud-amber-wash); border: 1px solid var(--hud-amber-line); border-radius: 6px;
}
.cr-note { margin-top: 20px; font: var(--hud-meta); letter-spacing: 0.13px; color: var(--hud-amber); }
.rr-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--hud-line); }
.cf-card .rr-foot-row { margin-top: 28px; padding-top: 18px; }
.rr-foot { margin: 0; font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-text-3); }
.cr-actions { margin: 0; display: flex; align-items: center; gap: 12px; }
.cr-actions button, .rr-x, .cf-view, .cf-present {
padding: 13px 22px; border-radius: 8px; margin: 0;
font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; color: var(--hud-text); text-decoration: underline; text-underline-position: from-font;
}
.cr-actions button:hover, .rr-x:hover { background: var(--hud-raised); }
/* No ring round the text buttons (user, 2026-09-21: the record opens with DISMISS focused, and the ring read as a
bracket). Keyboard focus still shows: the words turn amber. */
.rr-card .cr-actions button:focus-visible, .rr-card .rr-x:focus-visible, .rr-card .cf-view:focus-visible, .rr-card .cf-present:focus-visible { outline: none; color: var(--hud-amber); }
/* The record's body: the 6 x 6 grid at 60 with 9 between, the detail beside it. */
.cf-body { gap: 36px; }
.cf-grid { width: 405px; grid-template-columns: repeat(6, 60px); gap: 9px; }
.cf-slot { width: 60px; height: 60px; border-radius: 6px; background: var(--hud-raised); border: 1px solid var(--hud-hair); }
.cf-slot.is-found { background: var(--hud-raised); border-color: var(--hud-line); }
.cf-slot.is-found:hover { border-color: rgba(239, 233, 220, 0.7); background: var(--hud-raised); }
.cf-slot.is-on, .cf-slot.is-found.is-on { background: var(--hud-amber-wash); border-color: var(--hud-amber-line); }
.cf-slot:focus-visible { outline: 1px solid var(--hud-amber-line); outline-offset: 2px; }
.cf-thumb { filter: brightness(0) invert(0.92); opacity: 0.16; }
.cf-slot.is-found .cf-thumb { filter: none; opacity: 1; }
.cf-detail { min-width: 0; }
.cf-name { margin: 0 0 14px; font: var(--hud-value); letter-spacing: 0.28px; text-transform: uppercase; }
.cf-detail .rr-rule { margin: 0 0 20px; }
.cf-hero {
width: 100%; max-width: none; height: 190px; aspect-ratio: auto; margin: 0 0 24px; padding: 18px;
object-fit: contain; box-sizing: border-box;
background: var(--hud-void); border: 1px solid var(--hud-hair); border-radius: 12px;
}
.cf-hero-wait { background: var(--hud-void); }
.cf-detail .rr-row { margin-bottom: 14px; }
.cf-detail .rl-desc { margin-top: 20px; }
.cf-empty { font: var(--hud-meta); letter-spacing: 0.13px; color: var(--hud-text-3); }
.cf-notice li { font: var(--hud-meta); letter-spacing: 0.13px; }
/* ONE HOVER (user, 2026-09-21): the jump row's - the raised ground and full-strength text - on every button that can
be pressed. Locked and running ones keep still. */
.level-tabs button:hover, .level-tabs button:focus-visible,
.controls .ctl:hover, .controls .ctl:focus-visible,
.controls .ctl.ctl-s:hover,
.controls .ctl-black:not(.is-off):not(.is-running):hover, .controls .ctl-black:not(.is-off):not(.is-running):focus-visible,
.cf-slot.is-found:hover, .cr-actions button:hover, .rr-x:hover, .cf-view:hover, .cf-present:hover {
background: var(--hud-raised); color: var(--hud-text); border-color: var(--hud-line);
}
.level-tabs button[aria-pressed="true"]:hover, .level-tabs button[aria-selected="true"]:hover, #jump-toggle[aria-expanded="true"]:hover, .controls .ctl.ctl-s[aria-pressed="true"]:hover, .cf-slot.is-on:hover { background: var(--hud-amber-wash); border-color: var(--hud-amber-line); }
.controls .ctl.ctl-s:hover { color: var(--hud-text); }
.controls .ctl-black.is-off:hover, .controls .ctl-black.is-running:hover { background: inherit; }
.controls .ctl-black.is-off:hover { background: var(--hud-glass-deep); border-color: var(--hud-hair); }
.controls .ctl-black.is-running:hover { background: var(--hud-glass); border-color: var(--hud-amber-line); }
.tip-btn:hover, .tip-btn:focus-visible { background: var(--hud-raised); box-shadow: inset 0 0 4px 0 var(--hud-amber); }
/* THE REGION SWEEP: the display face, its colours as they were, centred on the screen in the band between the
level block and the rail so it covers neither. */
.region-sweep { left: 664px; right: 428px; justify-content: center; padding-bottom: 0; }
.rs-name { font-family: var(--hud-display); font-weight: 700; letter-spacing: 0.12em; }
.region-sweep.is-on .rs-rule { width: 100%; }
/* THE RELIC BRACKET: amber corners; the label an amber micro label, in the text colour once the item is logged. */
.relic-bracket { --rb: var(--hud-amber); }
.rb-label { font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-amber); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.relic-bracket.is-logged .rb-label { color: var(--hud-text); }
/* THE RACE CLOCK: centred on the screen over a veil, so it reads over anything. */
.race-clock { top: 0; left: 0; right: 0; bottom: 0; justify-content: center; gap: 8px; z-index: 7; text-shadow: none; }
.race-clock::before { content: ""; position: absolute; inset: 0; background: rgba(15, 13, 10, 0.55); z-index: -1; }
.rc-time { font: 500 44px/normal var(--hud-mono); letter-spacing: 0.88px; color: var(--hud-text); }
.rc-sub { font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-text-2); }
.rr-time { font: 500 42px/normal var(--hud-mono); letter-spacing: 0.84px; margin: 0 0 20px; color: var(--hud-text); }
.rr-row span:last-child { color: var(--hud-text); }
/* THE CLASS IN ITS OWN COLOUR (user, 2026-09-21): red, blue, yellow, green - each lifted until it reads on the card's
ground (contrast 6.4, 8.4, 11.7 and 10.1 to 1; the amber they all shared said nothing). */
.rr-row span.rl-class-1:last-child { color: #ec756b; }
.rr-row span.rl-class-2:last-child { color: #7fb0ee; }
.rr-row span.rl-class-3:last-child { color: #ecc94b; }
.rr-row span.rl-class-4:last-child { color: #86cf7b; }
.rr-row .rr-v-secondary { color: var(--hud-text-2); }
/* The supporters on the Census Record (user, 2026-09-27): an appendix under the filed stamp, in the record's own
quiet type, and the line above says in plain words who these people are. */
.cr-sup-h { margin: 20px 0 8px; font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-text-3); }
.cr-sup { margin: 0; font: var(--hud-meta); letter-spacing: 0.13px; line-height: 1.7; color: var(--hud-text); }
.cr-name { white-space: nowrap; } /* a name breaks between names, never inside one */
.tip-big {
/* The footer's button, not a banner (user, 2026-09-21): same height, padding and type, as wide as its words. */
/* A size up from the foot's button (user, 2026-09-27): this is the record's own ask, at the end of the descent. */
display: flex; align-items: center; width: max-content; height: 44px; margin: 22px auto 0; padding: 0 26px; /* centred in the card */
border-radius: 8px; background: var(--hud-amber-wash); color: #f4f7fa; border: 1px solid var(--hud-amber-line);
box-shadow: inset 0 0 4px 0 var(--hud-amber); font: 500 13px/normal var(--hud-sans); letter-spacing: 0.8px; text-transform: uppercase; text-align: left;
}
.tip-big:hover, .tip-big:focus-visible { background: var(--hud-raised); }
/* THE NOTICE AND THE SUMMONS inside the record: meta lines, amber numbers. */
.cf-notice { max-height: 340px; margin: 16px 0 0; scrollbar-width: thin; scrollbar-color: var(--hud-line) transparent; }
.cf-notice::-webkit-scrollbar { width: 3px; }
.cf-notice::-webkit-scrollbar-thumb { background: var(--hud-line); border-radius: 999px; }
.cf-notice li { font: var(--hud-meta); letter-spacing: 0.13px; color: var(--hud-text-2); gap: 14px; }
.cf-notice-no { color: var(--hud-amber); }
.cf-detail .cf-empty { margin: 0; }
/* THE CLEANING: its words in the HUD's faces; the rest as it was. */
.clean-hint { bottom: 20vh; font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-text-2); }
.clean-stamp { font: 500 20px/normal var(--hud-sans); letter-spacing: 0.28em; text-transform: uppercase; border-radius: 6px; }
} /* end desktop */
/* Removed on request (2026-09-21): the spoiler hint, the drag hint, the "item logged" line. */
.spoiler-hint, .drag-hint, .relic-logged { display: none !important; }
/* THE INTRO'S ARROW: one chevron pointing down, bottom centre, gone the moment the reader scrolls. The title stays. */
.intro-scroll { left: 50%; right: auto; bottom: 52px; color: var(--hud-text); transform: translateX(-50%); gap: 0; opacity: 1; transition: opacity 400ms ease; }
.intro-scroll.is-gone { opacity: 0; }
.intro-arrow {
/* One drawn arrow (a stem and a chevron built from two CSS boxes never quite met on the same axis): a 16 x 36 SVG,
2.5 px strokes, round ends, the chevron's point on the stem's own line. */
position: relative; width: 16px; height: 36px; transform: none; background-color: transparent;
background: url("data:image/svg+xml;utf8,") center / 16px 36px no-repeat;
animation: introPulse 2.4s ease-in-out infinite;
}
.intro-arrow::after { content: none; }
/* Opacity only (user, 2026-09-21): the line used to grow from its top as it faded; now it just breathes. */
@keyframes introPulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .intro-arrow { animation: none; opacity: 0.8; } }
@media (max-width: 900px) { .intro-scroll { left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); } }
/* Under 900 px the phone layout of style.css stands; the desktop-only pieces added for the HUD keep out of it. */
@media (max-width: 900px) {
.rail-toggle, .hud-disclaimer, .hud-contact, .level-cast-h, .level-of { display: none; }
#hud-foot { display: contents; }
}
/* THE TITLE IN WHITE (user, 2026-09-21): "EXPLORE THE SILO", its line and "The only way in" were dark type on the pale
overcast. They take the HUD's own white, the one the arrow under them already has, with a soft shadow so the type
holds where the sky behind it is at its brightest. */
#intro { color: #efe9dc; }
.intro-title, .intro-sub { text-shadow: 0 2px 24px rgba(15, 13, 10, 0.45), 0 1px 3px rgba(15, 13, 10, 0.35); }
.intro-sub { opacity: 1; text-shadow: 0 1px 12px rgba(15, 13, 10, 0.7), 0 1px 2px rgba(15, 13, 10, 0.5); }
.way-in [data-phase-for="approach"] { color: #efe9dc; text-shadow: 0 1px 12px rgba(15, 13, 10, 0.7), 0 1px 2px rgba(15, 13, 10, 0.5); }
@media (min-width: 901px) {
/* THE ITEM'S NAME LEADS ITS CARD (user, 2026-09-21: it had "the same style/size/weight as the other type elements").
Plex Mono Medium at 22 in full-strength text, on the find card and on the record's pane for the same item. */
#rl-title, .cf-detail .cf-name { font: 500 22px/1.2 var(--hud-mono); letter-spacing: 0.44px; color: var(--hud-text); }
#rl-title { margin-bottom: 20px; }
/* THE RECORD HOLDS ONE HEIGHT (user, 2026-09-21: "when I browse between two relics it jumps in height"). The pane's
height followed each item's description - 402 to 447 measured over the 36, at 1024 and at 1600 wide. The body is
456 for every item, the notice and the summons; on a window too short for that it gives way and the pane scrolls. */
.cf-card .cf-body { height: min(456px, calc(100vh - 290px)); }
.cf-card .cf-detail { max-height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--hud-line) transparent; }
/* THE SUMMONS: its line starts under the SUMMONED box's left edge, not 22 px in. No pad to fill, so hover and focus
turn the words amber instead of raising a ground. */
.cf-detail .cr-actions { margin-top: 14px; }
.cf-detail .cf-present, .cf-detail .cf-present:hover { padding: 10px 0; background: none; }
.cf-detail .cf-present:hover { color: var(--hud-amber); }
}
@media (min-width: 901px) {
/* THE TITLE'S LINE STARTS UNDER ITS E (user, 2026-09-21). Both boxes started at the same x, but Oswald's E carries
0.063 em of side bearing - 9 px at the title's 144 - and Plex Mono's "1" under a pixel, so the line sat 8 px to the
left of the letters above it. Measured from the glyphs' own ink, and it follows the title's size. */
.intro-sub { margin-left: calc(clamp(3rem, 9vw, 9rem) * 0.063 - 0.8px); }
/* NO CAST LIST (user, 2026-09-21: "its not useful information, it will free up some space"). The rule, the label and
the names under the description are off on the desktop card. */
.level-cast { display: none !important; }
/* THE CARD FADES, IT DOES NOT MOVE (user, 2026-09-21: "just fade in/out when we change floors its super distracting
otherwise"). The name, the rows and the description rose 5-6 px on every change of floor and of tab; opacity only. */
.level-card > :not(.level-head) { transition-property: opacity; }
.level-card.is-changing > :not(.level-head), .level-body.is-swapping { transform: none; }
/* THE DESCRIPTION KEEPS ITS LINE (user, 2026-09-21: it "jumps for almost every floor"). Measured from the card's
top it began at 172 on a documented floor and 189 on one with the NO CONFIRMED RECORD line, so it stepped 17 px
at nearly every floor. The line's place is now kept when it is not shown, and every floor without tabs or a note
begins its description at 189. The six floors with tabs still begin under their tabs (216), the three with a
note under the note. */
.level-card:not(:has(> .level-tabs:not([hidden]))):not(:has(> .level-note:not([hidden]))) > .level-nocanon[hidden] { display: block; visibility: hidden; }
}
@media (min-width: 901px) {
/* THE TIP OVER THE CENSUS'S VEIL (user, 2026-09-21). The foot is lifted above the paper's veil (z 8) so the button is
not dimmed with the rest; the line under it takes the veil's 0.55 by hand, since it rides up with the foot. The
foot shows at the door even though the rest of the interface has faded there. */
:root.is-census #hud-foot { z-index: 9; visibility: visible; }
:root.is-census #hud-foot .hud-disclaimer { opacity: 0.45; }
}
/* The title's own layer (2026-09-21): it fades with the scroll (--intro-fade), and with two blurred shadows under 144 px
type a repaint of it is not free. Promoted, the fade is the compositor's and the type is rasterised once. */
#intro { will-change: opacity; }
/* =============================================================
THE PHONE (docs/39, 2026-09-22). Everything here hangs off html.is-phone, which main.js sets for a screen up to 640
wide or a phone on its side; tablets and desktops never see it. The picture is the screen; the level is a low card
with the room tabs; a bar of three along the bottom; the desktop rail is a sheet that slides up from it.
============================================================= */
html.is-phone { --hud-blur-8: none; --hud-blur-12: none; --hud-blur-14: none; }
/* No hunt on a phone. */
html.is-phone #relic-bracket, html.is-phone #relic-card, html.is-phone #relic-logged, html.is-phone #relic-record,
html.is-phone #record-btn, html.is-phone .spoiler-hint, html.is-phone .drag-hint { display: none !important; }
/* The bar. */
.m-bar { display: none; }
html.is-phone .m-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
padding: 0 0 env(safe-area-inset-bottom); background: var(--hud-glass-deep); border-top: 1px solid var(--hud-hair);
}
html.is-phone .m-bar button {
/* 60 px, not 52 (user, 2026-09-23: "hard to press"), and nothing of the card reaches over it: the bar is above the
card and the card's own tap area stops at the bar's top edge. */
flex: 1 1 0; height: 60px; appearance: none; background: none; border: 0; border-left: 1px solid var(--hud-hair); margin: 0;
font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; color: var(--hud-text-2); cursor: pointer;
touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
html.is-phone .m-bar button:active { background: var(--hud-amber-wash); color: var(--hud-text); }
html.is-phone .m-bar button:first-child { border-left: 0; }
html.is-phone .m-bar button[aria-expanded="true"] { color: var(--hud-amber); }
/* The rail as a sheet. */
html.is-phone .controls {
top: auto; right: 0; left: 0; bottom: 0; width: auto; max-height: 78vh; overflow-y: auto; overscroll-behavior: contain;
align-items: stretch; gap: 8px; padding: 14px 16px calc(66px + env(safe-area-inset-bottom));
background: var(--hud-glass-deep); border: 1px solid var(--hud-hair); border-bottom: 0; border-radius: 16px 16px 0 0;
z-index: 8; opacity: 1; visibility: visible; pointer-events: auto;
transform: translateY(100%); transition: transform 260ms ease;
}
html.is-phone .controls.is-sheet-open { transform: translateY(0); }
html.is-phone .controls #jump-toggle, html.is-phone .controls .ctl-caret { display: none; }
html.is-phone .controls .ctl-row { justify-content: space-between; padding: 0 0 8px; }
html.is-phone .controls .ctl-s { min-width: 48px; min-height: 44px; }
html.is-phone .controls .ctl-events:not([hidden]) { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
html.is-phone .controls .ctl-black { width: 100%; min-height: 52px; padding: 8px 14px; text-align: left; }
html.is-phone .controls .ctl-label { font-size: 11px; letter-spacing: 0.1em; }
html.is-phone .controls .tip-btn { position: static; display: inline-flex; align-self: flex-start; margin-top: 14px; height: 44px; padding: 0 18px; font-size: 11px; }
/* The level list, full screen above the bar. */
html.is-phone .jump-menu {
position: fixed; left: 0; right: 0; top: 0; bottom: calc(52px + env(safe-area-inset-bottom)); width: auto; max-height: none;
z-index: 8; padding: calc(16px + env(safe-area-inset-top)) 16px 16px; border: 0; border-radius: 0; background: var(--hud-glass-deep);
}
html.is-phone .jump-menu button { min-height: 48px; font-size: 13px; }
/* The level card: number, name and the room tabs; the description on INFO. */
html.is-phone .level-card { max-height: none; overflow: visible; padding: 12px 16px 10px 18px; margin-bottom: calc(52px + env(safe-area-inset-bottom)); }
html.is-phone .level-card.is-open { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
html.is-phone .level-card:not(.is-open) .level-note,
html.is-phone .level-card:not(.is-open) .level-nocanon, html.is-phone .level-card .level-cast { display: none; }
/* The description is INFO's, and only INFO's (user, 2026-09-23): no preview on the card and no MORE mark, so there is
one way in and one way out. INFO opens the card; INFO closes it. */
html.is-phone .level-card:not(.is-open) .level-body, html.is-phone .level-card.has-more::after { display: none; }
html.is-phone .level-card.is-open .level-body { display: block; -webkit-line-clamp: unset; overflow: visible; }
html.is-phone .level-head { margin-bottom: 2px; }
html.is-phone .level-name { margin-bottom: 8px; }
html.is-phone .level-tabs { margin: 0; gap: 8px; padding-bottom: 2px; }
html.is-phone .level-tabs button { min-height: 44px; padding: 0 14px; font-size: 12px; white-space: nowrap; }
html.is-phone .level-tabs[hidden] { display: none; }
/* The depth strip stays clear of the bar. */
html.is-phone .depth-gauge { --gauge-edge: 8px; padding-top: calc(12px + env(safe-area-inset-top)); }
html.is-phone .depth-gauge .gauge-ticks { top: calc(12px + env(safe-area-inset-top)); bottom: calc(60px + env(safe-area-inset-bottom)); }
/* The papers (race, census) at phone width. */
html.is-phone .rr-card { width: calc(100vw - 24px); padding: 20px 18px 18px; }
html.is-phone .race-clock { top: calc(10px + env(safe-area-inset-top)); }
/* The desktop's own dress on the phone's controls (user, 2026-09-22: "add some rounded corners, use similar styles to
our desktop version"): the same tokens, radii and type as the rail, at touch sizes. */
html.is-phone .controls .ctl { height: 44px; padding: 0 16px 0 18px; font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; color: var(--hud-text); background: var(--hud-glass); border: 1px solid var(--hud-line); border-radius: 8px; }
html.is-phone .controls .ctl-row { height: 52px; padding: 6px 8px 6px 16px; gap: 12px; display: flex; align-items: center; background: var(--hud-glass); border: 1px solid var(--hud-line); border-radius: 8px; }
html.is-phone .controls .ctl-label { font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-text); }
html.is-phone .controls .spoiler-set { flex: 1 1 auto; display: flex; justify-content: flex-end; gap: 6px; }
html.is-phone .controls .ctl.ctl-s { width: 44px; height: 38px; min-width: 0; min-height: 0; padding: 0; font: var(--hud-label); color: var(--hud-text-off); background: none; border: 1px solid transparent; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
html.is-phone .controls .ctl.ctl-s[aria-pressed="true"] { color: var(--hud-text); background: var(--hud-amber-wash); border-color: var(--hud-amber-line); }
html.is-phone .controls .ctl-black { position: relative; height: auto; min-height: 56px; padding: 11px 16px 11px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 0; text-align: left; line-height: normal; overflow: hidden; background: var(--hud-glass); border: 1px solid var(--hud-line); border-radius: 8px; }
html.is-phone .controls .ctl-black::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
html.is-phone .controls .ctl-black .ctl-black-t { order: 1; flex: 0 0 100%; display: block; font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; color: var(--hud-text); }
html.is-phone .controls .ctl-black .ctl-black-s { order: 2; flex: 0 0 100%; display: block; margin-top: 3px; font: var(--hud-sub); letter-spacing: 0.8px; text-transform: uppercase; color: var(--hud-text-2); }
html.is-phone .controls .ctl-black.is-running { border-color: var(--hud-amber-line); }
html.is-phone .controls .ctl-black.is-running::before { background: var(--hud-amber); }
html.is-phone .controls .ctl-black.is-running .ctl-black-s { color: var(--hud-amber); }
html.is-phone .controls .ctl-black.is-off { background: var(--hud-glass-deep); border-color: var(--hud-hair); }
html.is-phone .controls .ctl-black.is-off .ctl-black-t, html.is-phone .controls .ctl-black.is-off .ctl-black-s { color: var(--hud-text-off); }
html.is-phone .controls .ctl-black.is-off::after { content: ""; position: absolute; right: 14px; top: 50%; width: 10px; height: 8px; margin-top: -2px; border: 1.5px solid var(--hud-text-off); border-radius: 2px; box-shadow: 0 -5px 0 -1.5px var(--hud-text-off); }
/* UX 21 (docs/40): the one-time line that says a room can be entered. Above the bar, out of the way of the card. */
html.is-phone #room-hint {
position: fixed; left: 50%; transform: translateX(-50%) translateY(6px);
bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 26; margin: 0; padding: 8px 14px;
background: var(--hud-glass-deep); border: 1px solid var(--hud-amber-line); border-radius: 999px;
font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-text);
opacity: 0; pointer-events: none; transition: opacity 260ms ease, transform 260ms ease;
}
html.is-phone #room-hint.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
html:not(.is-phone) #room-hint { display: none; }
/* UX 5 (docs/40): the locked events fold into one line on a phone. */
html.is-phone #ev-folded { width: 100%; min-height: 44px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;
background: var(--hud-glass-deep); border: 1px solid var(--hud-hair); border-radius: var(--hud-r-8, 8px);
font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-text-off); }
html.is-phone #ev-folded[hidden] { display: none; }
html.is-phone #events-on.is-folded .ctl-black.is-off { display: none; }
/* UX 6: the landmark the reader is on or just below, in the list they opened. */
html.is-phone .jump-menu button.is-here { border-left-color: var(--hud-amber-line); color: var(--hud-text); }
html.is-phone .jump-menu button.is-here .jm-n { color: var(--hud-amber); }
html.is-phone .controls .tip-btn { align-self: center; margin: 18px auto 0; height: 56px; line-height: normal; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 0 22px; border-radius: 8px; background: var(--hud-amber-wash); color: #f4f7fa; border: 1px solid var(--hud-amber-line); box-shadow: inset 0 0 4px 0 var(--hud-amber); font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; }
html.is-phone .level-tabs button { height: 44px; padding: 0 16px; font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; color: var(--hud-text); background: var(--hud-glass); border: 1px solid var(--hud-line); border-radius: 8px; }
html.is-phone .level-tabs button[aria-pressed="true"], .level-tabs button[aria-selected="true"] { background: var(--hud-amber-wash); border-color: var(--hud-amber-line); }
/* UX 7: the room you are in says how to leave it. */
html.is-phone .level-tabs button[aria-pressed="true"]::before { content: "\2190\00a0"; color: var(--hud-amber); }
html.is-phone .jump-menu button { display: flex; width: 100%; min-height: 48px; padding: 12px 14px 12px 17px; gap: 14px; align-items: center; border: 0; border-left: 3px solid transparent; border-radius: 6px; font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; color: var(--hud-text-2); background: none; text-align: left; }
html.is-phone .jump-menu .jm-n { flex: 0 0 28px; text-align: right; font: var(--hud-value); letter-spacing: 0.28px; color: var(--hud-text-3); }
html.is-phone .jump-menu button[aria-current="true"] { background: var(--hud-amber-wash); border-left-color: var(--hud-amber); color: var(--hud-text); }
html.is-phone .level-number { font-family: var(--hud-display); font-weight: 700; }
html.is-phone .level-name { font-family: var(--hud-display); font-weight: 700; }
html.is-phone .level-region { font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; color: var(--hud-amber); }
html.is-phone .level-body { font: 400 15px/1.55 var(--hud-sans); color: var(--hud-text); }
/* THE PHONE, UX 1-3 (docs/40, 2026-09-22). */
/* 1. Every room on the card: the tabs wrap instead of running off the right edge (Level 1's three needed 420 px in 311,
and "The Airlock" was cut with nothing to say the row scrolled). */
html.is-phone .level-tabs { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
html.is-phone .level-tabs button { flex: 0 0 auto; }
/* 2. The bar stands from the moment the picture arrives (user, 2026-09-23: "the menu should be visible always when we
are outside; after initial loading the menu is missing"). It had been held back until Level 1, which left the
plain and the way in with no controls at all. Only the cleaning walk still takes it away: out there the reader is
outside the silo with a lens to wipe, and nothing in the bar applies. */
html.is-phone.is-cleaning .m-bar { display: none; }
/* 3. The scroll arrow clears the bar's place, whether or not the bar is up. */
html.is-phone .intro-scroll { bottom: calc(52px + 20px + env(safe-area-inset-bottom)); }
html.is-phone .level-tabs { gap: 6px; }
html.is-phone .level-tabs button { flex: 1 1 auto; padding: 0 12px; letter-spacing: 0.3px; } /* each row filled evenly, a little tighter, so two rooms share a row where they can */
/* =============================================================
THE EVENTS' ICONS (Figma, event components 218:1833-1919, 2026-09-22; user: "icons make the components more
interesting ... dont change the logic"). Every event carries a 22 px round badge at its right, as the lock always
did: the raised ground, a control hairline, and the event's own glyph. Running, the ring turns amber (the power cut's
glyph too, as drawn). Unavailable, the lock stays - the rule above. Desktop only for now; the phone keeps its own.
Icons from the Figma file, stored in assets/icons (the file's links expire). Visor and cleaning have no running state
drawn; they take the amber ring like the others.
============================================================= */
html:not(.is-phone) .controls .ctl-black { padding-right: 52px; }
html:not(.is-phone) .controls .ctl-black:not(.is-off)::after {
content: ""; position: absolute; right: 18px; top: 50%; left: auto; bottom: auto; width: 22px; height: 22px; margin-top: -11px; box-sizing: border-box;
border-radius: 999px; border: 1px solid var(--hud-amber-line); /* amber in every live state (Figma revision, 2026-09-22); the lock keeps its grey ring */
background: var(--hud-raised) no-repeat center / 10px 10px;
animation: none; transform: none; opacity: 1; /* style.css's old running hairline (left 0, bottom 0, scaleX) no longer reaches it: the badge jumped to the left edge while running */
}
html:not(.is-phone) .controls #quake-btn:not(.is-off)::after { background-image: url("../assets/icons/ev-drop.svg"); background-size: 8px 8.4px; }
html:not(.is-phone) .controls #race-btn:not(.is-off)::after { background-image: url("../assets/icons/ev-race.svg"); }
html:not(.is-phone) .controls #clean-btn:not(.is-off)::after { background-image: url("../assets/icons/ev-clean.svg"); background-size: 8px 8px; }
html:not(.is-phone) .controls #blackout-btn:not(.is-off)::after { background-image: url("../assets/icons/ev-power-g.svg"); background-size: 22px 22px; }
html:not(.is-phone) .controls #blackout-btn.is-running:not(.is-off)::after { background-image: url("../assets/icons/ev-power-running-g.svg"); }
html:not(.is-phone) .controls #flood-btn:not(.is-off)::after { background-image: url("../assets/icons/ev-flood-g.svg"); background-size: 22px 22px; }
html:not(.is-phone) .controls #visor-btn:not(.is-off)::after { background-image: url("../assets/icons/ev-visor-g.svg"); background-size: 22px 22px; }
/* =============================================================
THE PHONE, SECOND PASS (docs/40 revisited, 2026-09-23)
============================================================= */
/* 1. The depth strip is orientation, not a control, on a phone: its jump targets measured 22 px wide and 5 to 28 px
tall - under half of what a thumb needs, and too close together to enlarge without overlapping. Taps go to the
picture instead; LEVELS is the way to jump. The strip looks exactly as it did. */
html.is-phone .gauge-jumps, html.is-phone .gauge-jump { pointer-events: none; }
/* 2. The event sub-lines were 10 px, the smallest a phone renders cleanly at arm's length. */
html.is-phone .controls .ctl-black .ctl-black-s { font-size: 12px; letter-spacing: 0.6px; }
/* 3. The season buttons were 44 x 38: a thumb wants 44 both ways. */
html.is-phone .controls .ctl.ctl-s { height: 44px; min-height: 44px; }
/* 4. The scrim was sized for the old half-screen card and darkened the picture to 62% of its height. The card is
80 px closed now, so it fades out by 42%. */
html.is-phone #text-scrim {
background: linear-gradient(to top,
rgba(20,19,17,0.92) 0%,
rgba(20,19,17,0.70) 22%,
rgba(20,19,17,0.00) 42%);
}
/* 8. A long press on a label selected the text and a double tap zoomed the page. The interface is furniture, not a
document: no selection, no double-tap zoom. The level card's description is left selectable, in case someone wants
to copy a line of it. */
html.is-phone .m-bar, html.is-phone .controls, html.is-phone .level-tabs, html.is-phone .jump-menu,
html.is-phone .depth-gauge, html.is-phone #room-hint {
-webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* CONTRAST OUTDOORS (WCAG 1.4.3, measured 2026-09-23). The scrim is switched off on the plain, the approach and the
ramp, so the card's text sat straight on a bright sky: 3.51:1 against the pixels behind it, where 4.5:1 is asked of
text that size (inside the silo the same text measures 8.8:1). A light scrim returns outdoors on the phone - enough
to carry the words, far short of the full one. */
html.is-phone[data-phase="surface"] #text-scrim,
html.is-phone[data-phase="approach"] #text-scrim,
html.is-phone[data-phase="ramp"] #text-scrim { opacity: 0.62; pointer-events: none; }
/* TARGET SIZE (WCAG 2.5.8, measured 2026-09-23). Three controls were under 24 px in one direction: the contact link
(153 x 17), the rail's hide handle (21 wide) and the tip button (120 x 31). Each keeps its drawing and gains an
invisible hit area around it, so nothing moves and a thumb or an unsteady hand can still land on it. The depth
strip's own jumps stay as they are: every one of them is also in the LEVELS list at 48 px a row, which is the
standard's "same function, another control" case. */
/* THE ASK AS A ROW IN THE LEVEL LIST (user, 2026-09-28), phone only: the list's own row height and rule, amber so it
reads as the one thing here that is not a floor. */
html.is-phone .jump-menu .jm-tip {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; min-height: 56px; margin: 8px 0 0; padding: 0 16px calc(env(safe-area-inset-bottom));
/* Stuck to the foot of the list (2026-09-28): at the end of thirty rows it was 1,372 px down an 812 px screen, so
the reader had to scroll the whole silo to find it. It sits on the list's floor now, in view as it opens. */
position: sticky; bottom: 0; height: auto; border-radius: 0; border: 0; border-top: 1px solid var(--hud-hair);
/* Opaque under the tint: sticky over a list that scrolls, the card behind was reading through it. */
background-color: #14120f; background-image: linear-gradient(var(--hud-amber-wash), var(--hud-amber-wash));
color: #f4f7fa; box-shadow: none;
font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; text-decoration: none;
}
html.is-phone .jump-menu .jm-tip:active { background: var(--hud-raised); }
/* The line that replaces the ask once a reader has paid. */
.cr-thanks { margin: 20px 0 0; text-align: center; font: var(--hud-meta); letter-spacing: 0.13px; color: var(--hud-amber); }
/* NO PULL-TO-REFRESH ON A SCROLL-DRIVEN PAGE (2026-09-28). A flick downward at the top reloaded the site and threw
away the scene the reader had just waited for. The page keeps its own overscroll; the browser's gesture does not
fire. Phones only: a desktop has no such gesture. */
html.is-phone, html.is-phone body { overscroll-behavior-y: contain; }
/* THE RUNNING LINE (docs/40 revisited, 2026-09-29), phone only: above the bar, out of the picture's way, and a
target a thumb can hit. */
html.is-phone #ev-running {
position: fixed; left: 16px; right: 16px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 27;
min-height: 44px; padding: 0 16px; border-radius: 999px;
background-color: #14120f; background-image: linear-gradient(var(--hud-amber-wash), var(--hud-amber-wash));
border: 1px solid var(--hud-amber-line); color: var(--hud-text);
font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase;
opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 220ms ease, transform 220ms ease;
}
html.is-phone #ev-running.is-in { opacity: 1; transform: translateY(0); pointer-events: auto; }
html:not(.is-phone) #ev-running { display: none; }
/* The race's own progress and its way out, phone only: the desktop keeps the clock it had. */
.rc-bar, .rc-end { display: none; }
html.is-phone .rc-bar { display: block; width: min(70vw, 280px); height: 3px; margin-top: 8px; background: var(--hud-hair); border-radius: 2px; overflow: hidden; }
html.is-phone .rc-bar i { display: block; height: 100%; width: 0%; background: var(--hud-amber); transition: width 200ms linear; }
html.is-phone .rc-end {
display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; min-height: 44px; padding: 0 20px;
border-radius: 8px; background: var(--hud-glass-deep); border: 1px solid var(--hud-hair); color: var(--hud-text);
font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase;
}
/* The grab bar on both phone panels (2026-09-29), and the head of the level list. */
html.is-phone .sheet-grab { display: block; width: 44px; height: 4px; margin: 6px auto 10px; border-radius: 999px; background: var(--hud-text-3); flex: none; touch-action: none; cursor: grab; }
html.is-phone .sheet-grab::after { content: ""; position: absolute; left: 0; right: 0; height: 28px; margin-top: -12px; }
html:not(.is-phone) .sheet-grab { display: none; }
html.is-phone .jm-head {
position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px;
background-color: #14120f; border-bottom: 1px solid var(--hud-hair);
}
html.is-phone .jm-up, html.is-phone .jm-go button {
min-height: 44px; padding: 0 14px; border-radius: 8px; background: var(--hud-glass); border: 1px solid var(--hud-line);
color: var(--hud-text); font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase;
}
html.is-phone .jm-go { display: flex; align-items: center; gap: 8px; margin-left: auto; }
html.is-phone .jm-go label { font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-text-3); }
html.is-phone .jm-go input {
width: 68px; min-height: 44px; padding: 0 10px; border-radius: 8px; background: var(--hud-glass-deep);
border: 1px solid var(--hud-line); color: var(--hud-text); font: var(--hud-value); text-align: center;
}
html.is-phone .jm-go input[aria-invalid="true"] { border-color: var(--hud-amber); }
html:not(.is-phone) .jm-head { display: none; }
/* =============================================================
THE PHONE, 2026-10-05 (docs/46 §3)
============================================================= */
/* The bar waits for the picture (user, 2026-09-23: the bar belongs "after initial loading"). It stood over the loader,
three live buttons in front of a poster, with nothing behind them to open. It arrives with the reveal. A browser
without :has() keeps the bar as it was. */
html.is-phone .m-bar { transition: opacity 320ms ease; }
html.is-phone:has(#loader:not(.is-done)) .m-bar { opacity: 0; pointer-events: none; }
/* The level list and the events sheet were 90% opaque: the card behind them read through the rows ("1 UP TOP / The
Top" across "36 RESIDENTIAL"). Near solid now; no blur, which would be a full-screen pass over the 3D every frame. */
html.is-phone .jump-menu, html.is-phone .controls { background: rgba(15, 13, 10, 0.97); }
/* Which floors have rooms, at the row's right. */
html.is-phone .jump-menu .jm-rooms { margin-left: auto; flex: 0 0 auto; font: var(--hud-micro); letter-spacing: 0.96px; text-transform: uppercase; color: var(--hud-text-3); }
html.is-phone .jump-menu button[aria-current="true"] .jm-rooms { color: var(--hud-amber); }
/* Continue where you left off, under the title. Gone the moment the reader starts down. */
.resume { display: none; }
html.is-phone .resume {
pointer-events: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
margin: 22px 0 0; min-height: 48px; padding: 0 18px; border-radius: 8px;
background: rgba(15, 13, 10, 0.78); border: 1px solid var(--hud-amber-line); color: var(--hud-text);
font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; cursor: pointer;
touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity 240ms ease;
}
html.is-phone .resume .rs-k { color: var(--hud-amber); }
html.is-phone .resume:active { background: var(--hud-amber-wash); }
html.is-phone:not([data-phase="surface"]) .resume { opacity: 0; pointer-events: none; }
/* Share this level: under the description, only while INFO has it open. */
.lv-share { display: none; }
html.is-phone .level-card.is-open .lv-share {
display: inline-flex; align-items: center; min-height: 44px; margin: 12px 0 2px; padding: 0 16px; border-radius: 8px;
background: var(--hud-glass); border: 1px solid var(--hud-line); color: var(--hud-text);
font: var(--hud-label); letter-spacing: 0.52px; text-transform: uppercase; cursor: pointer;
touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
html.is-phone .level-card.is-open .lv-share:active { background: var(--hud-amber-wash); }
/* The list was sized for the 52 px bar and ran 9 px under the 60 px one, and its 16 px of bottom padding sat below the
pinned tip row, so rows scrolled through a strip between the tip and the bar ("47 The Great Stair" under TIP THE
BUILDER). The list now ends at the bar and the tip row is its floor. */
html.is-phone .jump-menu { bottom: calc(60px + env(safe-area-inset-bottom)); padding-bottom: 0; }
html.is-phone .jump-menu .jm-tip { margin-bottom: 0; }