/* shell.css — the desk, on the Modernist grid. * * Direction 1A (dark chrome) from the design handoff: ink panels, one red accent, 2px rules, * NO ROUNDED CORNERS ANYWHERE. The scene reads first; the chrome recedes. * * ⚠️ THREE RULES THAT ARE LOAD-BEARING, NOT TASTE: * 1. Red is the ONLY saturated colour and it means one of two things: the primary action, or a * value that has diverged from source. It is never decoration. * 2. Mono is reserved for source paths, numeric readouts, keycaps and slider bounds. If a * designer sees mono, the thing under it is addressable in their code. * 3. Radius is 0 everywhere. A rounded corner in this interface is a bug. * * Fonts: the handoff names Archivo + IBM Plex Mono. The desk must survive an air-gapped machine, * so nothing is fetched — these stacks approximate the faces. Swap them if they are self-hosted. */ :root { /* ── ground ────────────────────────────────────────────────────────────────────────────── */ --ink: #201e1d; --viewport: #100f0f; /* color-mix(in srgb, #201e1d 50%, #000) */ --bar: #1a1817; /* color-mix(in srgb, #201e1d 80%, #000) */ --panel: #1c1a19; /* color-mix(in srgb, #201e1d 86%, #000) */ /* ── rules ─────────────────────────────────────────────────────────────────────────────── */ --rule-strong: rgba(234, 231, 231, 0.24); --rule: rgba(234, 231, 231, 0.17); --rule-control: rgba(234, 231, 231, 0.22); --rule-check: rgba(234, 231, 231, 0.45); /* ── type ──────────────────────────────────────────────────────────────────────────────── */ --text: #eae7e7; --muted: #9b9797; /* ── accent — the only saturated colour ────────────────────────────────────────────────── */ --accent: #ec3013; --accent-400: #ff9783; --accent-500: #ff563c; --accent-600: #dd2b0f; --accent-700: #ae1800; /* ── tints ─────────────────────────────────────────────────────────────────────────────── */ --ghost: rgba(234, 231, 231, 0.075); --segment-on: rgba(234, 231, 231, 0.11); --shadow-lg: 0 12px 32px rgba(45, 43, 43, 0.22); --font-ui: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace; --bar-top: 54px; --bar-bottom: 60px; --rail: 400px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } body { background: var(--viewport); color: var(--text); font-family: var(--font-ui); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; } /* ⚠️ TWO HOMES, ONE LAYOUT. Opened directly, the chrome's children are in ``. Injected into a game, `chrome()` in runtime.mjs wraps them all in `#devtune-shell` and `adoptGame()` moves the game inside `#mount`. The column that gives `.band` its height has to exist in both cases — with only the `body` rule, the injected band computed to 0px high and the viewport vanished. */ #devtune-shell { position: fixed; inset: 0; display: flex; flex-direction: column; font-family: var(--font-ui); font-size: 13px; line-height: 1.45; color: var(--text); } /* ⚠️ SHIFT-CLICK IS MULTI-SELECT, NOT TEXT-SELECT. Shift+click is the browser's own "extend the text selection to here", so adding a second body to the selection set also swept a blue highlight across every label in the desk. Reported from play as *"when holding shift to multi select it triggers all the text to get highlighted."* The chrome is an instrument panel — none of it is prose to be copied — so nothing in it is selectable, and the fields that ARE for typing opt back in below. Scoped to the desk on purpose: the game's own DOM keeps whatever behaviour its author gave it. */ #devtune-shell, #stage, #mount { user-select: none; -webkit-user-select: none; } #devtune-shell input, #devtune-shell textarea, #devtune-shell [contenteditable] { user-select: text; -webkit-user-select: text; } /* Play: hide the cursor over the game surface so look/aim is not fighting a desktop pointer. */ body:not(.design) #stage, body:not(.design) #mount, body:not(.design) #mount canvas { cursor: none !important; } body.design #mount, body.design #stage { cursor: default; } /* Nothing in this interface is italic, and nothing is centred. */ i, em { font-style: normal; } button, input { font-family: inherit; font-size: inherit; color: inherit; border: 0; background: none; border-radius: 0; } button { cursor: pointer; } /* Keyboard focus is deliberate and visible. Never the browser default. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Motion: none beyond instant state changes. Colour only, capped at 90ms. */ .tool-btn, .toggle-btn, .mode, .icon-btn, .foot-btn, .keep, .panic, .scope-seg, .gizmo-mode, .lens-mode-tab, .multi-tab, .body-kind-btn, .solid-btn { transition: background-color 90ms linear, border-color 90ms linear, color 90ms linear; } /* ══════════════════════════════════════════════════════════════════════════════════════════ SHARED ATOMS ══════════════════════════════════════════════════════════════════════════════════════ */ .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } /* Keycap — mono, 1px border, no radius. Written from DEFAULT_BINDS at boot; see paintKeycaps() in main.js. Chrome that hardcodes a key lies the moment a bind moves. */ .key { font-family: var(--font-mono); font-size: 10px; font-weight: 400; line-height: 1; padding: 4px 5px; border: 1px solid var(--rule-control); color: var(--muted); flex: none; text-transform: none; } /* The unsaved mark. 7×7 in bars, 6×6 in group headers. One meaning: a value has diverged from source and has not been written. */ .mark { width: 7px; height: 7px; background: var(--accent); flex: none; display: inline-block; } .place-head .mark, .scope-head .mark { width: 6px; height: 6px; } /* Legacy dot — ui.js and the demo HUD still address `.dot`. */ .dot { width: 7px; height: 7px; background: var(--accent); flex: none; display: inline-block; } .spacer { flex: 1; min-width: 0; } .box { width: 11px; height: 11px; border: 1px solid var(--rule-check); flex: none; display: inline-block; } .on > .box, .box.on { background: var(--accent); border-color: var(--accent); } /* ── chips ───────────────────────────────────────────────────────────────────────────────── Bound one-to-one to backend facts. A chip with no backend truth behind it must not exist. */ .chip { display: none; align-items: center; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 5px 7px; border: 1px solid var(--rule-control); color: var(--muted); line-height: 1; white-space: nowrap; } .chip.on { display: inline-flex; } .chip-held { background: var(--accent); border-color: var(--accent); color: var(--ink); } .chip-kept { border-color: var(--rule-control); color: var(--muted); } .chip-refused { border-color: var(--accent); color: var(--accent-500); } .chip-spawn, .chip-nosave, .chip-norange, .chip-driven { border-color: var(--rule-control); color: var(--muted); } /* ⭐ Not muted. `SHARED · ALL 14` is a warning about reach, and it has to be readable while your hand is already on the dial — a grey chip is the one nobody looks at. */ .chip-shared { border-color: var(--accent); color: var(--accent-500); } .chip-source { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; } .chip-amber { background: var(--accent); border-color: var(--accent); color: var(--ink); } .chip-muted { border-color: var(--rule-control); color: var(--muted); } .note { display: none; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--muted); text-wrap: pretty; } .note.on { display: block; } .note.bad { color: var(--accent-500); } .note.muted { color: var(--muted); } /* Icon buttons — 24×24, 1px border, 12px Lucide strokes. */ .icon-btn { width: 24px; height: 24px; border: 1px solid var(--rule-control); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer; padding: 0; } .icon-btn svg { width: 12px; height: 12px; display: block; } .icon-btn:hover { border-color: var(--accent); color: var(--accent); } /* ══════════════════════════════════════════════════════════════════════════════════════════ TOP BAR — 54px. Identity and session state. No actions. ══════════════════════════════════════════════════════════════════════════════════════ */ .topbar { height: var(--bar-top); flex: none; display: flex; align-items: stretch; background: var(--bar); border-bottom: 2px solid var(--rule-strong); position: relative; z-index: 40; } body:not(.design) .topbar { display: none; } .topbar .cell { display: flex; align-items: center; padding: 0 20px; flex: none; } .brand-cell { border-right: 1px solid var(--rule); } .project-cell { gap: 10px; border-right: 1px solid var(--rule); min-width: 0; } .posture-cell { gap: 9px; } .brand { font-size: 15px; font-weight: 800; letter-spacing: .20em; color: var(--text); white-space: nowrap; } .project-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .project-engine { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; } .posture { display: inline-flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .posture .dot { background: var(--accent); } .crumb { display: none; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-left: 12px; } .crumb.on { display: inline-flex; } .crumb-slash { color: var(--rule-control); } .header-msg-slot { display: flex; align-items: center; padding: 0 20px; min-width: 0; } .header-toast { display: none; align-items: baseline; gap: 10px; min-width: 0; } .header-toast.on { display: flex; } .header-toast-title { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-500); flex: none; } .header-toast-body { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-toast.bad .header-toast-title { color: var(--accent-500); } .header-toast.good .header-toast-title { color: var(--text); } .ownership { font-family: var(--font-mono); font-size: 10px; color: var(--muted); border-left: 1px solid var(--rule); white-space: nowrap; } .unsaved-cell { border-left: 1px solid var(--rule); padding: 0 20px; } .keymap-btn { gap: 8px; border-left: 1px solid var(--rule); background: none; } .keymap-btn-label { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .keymap-btn:hover .keymap-btn-label { color: var(--text); } .bridge { gap: 10px; border-left: 1px solid var(--rule); } .bridge-addr { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; } /* Connection is chrome, not a status colour — the old green is gone. Only a DROPPED bridge earns the accent, because that one stops Save from working. */ .bridge-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 4px 6px; border: 1px solid var(--rule-control); color: var(--text); line-height: 1; } .bridge.down .bridge-label { border-color: var(--accent); color: var(--accent-500); } .bridge.down .bridge-addr { color: var(--accent-500); } /* ══════════════════════════════════════════════════════════════════════════════════════════ BAND — viewport + docked rail ══════════════════════════════════════════════════════════════════════════════════════ */ .band { flex: 1; display: flex; align-items: stretch; min-height: 0; position: relative; } .stage { flex: 1; position: relative; min-width: 0; background: var(--viewport); overflow: hidden; } .mount { position: absolute; inset: 0; } .mount canvas { display: block; width: 100%; height: 100%; } .flash { position: absolute; inset: 0; pointer-events: none; background: var(--accent); opacity: 0; z-index: 5; } .flash.on { opacity: .10; } /* ── selection outline — 1px accent rect, flush-left tag at its top-left ──────────────────── ⚠️ THE BORDER LIVES ON `.bracket-corners`. `bracket()` in ui.js moves `#bracket` with a transform and writes the object's real width/height onto `.bracket-corners` — it is the only node in here that has a size. Putting the border on `.bracket-inner` draws a 0×0 rectangle. */ .bracket { position: absolute; top: 0; left: 0; display: none; pointer-events: none; z-index: 6; } .bracket.on { display: block; } .bracket-inner { position: relative; } .bracket-corners { border: 1px solid var(--accent); } /* The old corner ticks are gone — the outline is a plain rectangle now — but the elements stay because ui.js reads `--arm` off them. Zero size, no paint. */ .bracket-corners > .c { display: none; } .bracket-label { position: absolute; left: 0; bottom: 100%; display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; padding: 4px 6px; background: var(--accent); color: var(--ink); white-space: nowrap; } .bracket-label .dot { display: none; } /* ── runtime stats — a top-bar cell, not a viewport overlay ────────────────────────────────── Moved off the scene deliberately: bottom-left is somewhere a game may already be drawing. */ .stats { gap: 8px; border-left: 1px solid var(--rule); } .stats[hidden] { display: none; } .stat-label { font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .stat-val { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text); } .stat-sep { width: 1px; height: 12px; background: var(--rule); flex: none; margin: 0 4px; } /* ── paused banner — REMOVED ────────────────────────────────────────────────────────────────── It was the desk's last overlay on the game surface, and the `Paused` toggle in the strip says the same thing in space that cannot collide. The node stays for ui.js's handle; it never paints, in any state. */ .frozen-badge { display: none !important; } /* ── demo HUD (beachhead only — hidden when injected into a real game) ────────────────────── */ .hud { position: absolute; top: 20px; left: 20px; display: flex; gap: 10px; z-index: 6; pointer-events: none; } .hud-chip { display: none; padding: 10px 14px; border: 1px solid var(--rule-control); background: var(--panel); } .hud-chip.on { display: block; } .hud-row { display: flex; align-items: baseline; gap: 10px; } .hud-key { font-size: 9px; font-weight: 600; letter-spacing: .16em; color: var(--muted); } .hud-val { font-family: var(--font-mono); font-size: 13px; color: var(--text); } .hud-val-lg { font-size: 18px; } .hud-sep { color: var(--rule-control); margin: 0 6px; } .hud-alive { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .hud-bar { margin-top: 6px; height: 2px; width: 92px; background: var(--rule); } .hud-bar > i { display: block; height: 100%; width: 100%; background: var(--accent); } /* ══════════════════════════════════════════════════════════════════════════════════════════ INSPECTOR RAIL — docked, 400px, full height between the bars ══════════════════════════════════════════════════════════════════════════════════════ */ .lens { width: var(--rail); flex: none; display: none; flex-direction: column; min-height: 0; background: var(--panel); border-left: 2px solid var(--rule-strong); } body.design .lens { display: flex; } /* Below ~1100px the rail overlays the viewport rather than shrinking — its content does not reflow, so taking width from it would break the 400px grid the panel is drawn on. */ @media (max-width: 1100px) { .lens { position: absolute; top: 0; right: 0; bottom: 0; z-index: 20; box-shadow: var(--shadow-lg); } } /* ⚠️ The empty state is driven by `body.selected`, which renderChrome sets from the selection. Nothing puts a class on the rail itself — keying off one would leave the panel permanently empty. */ .lens-empty { display: none; flex-direction: column; gap: 10px; padding: 18px 20px 20px; } .lens-card { display: none; flex-direction: column; min-height: 0; flex: 1; } body:not(.selected) .lens-empty { display: flex; } body.selected .lens-card { display: flex; } .empty-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--text); } .empty-hints { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .empty-hints > div { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); } /* a. Header */ .lens-header { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--rule); flex: none; } .lens-header-top { display: flex; align-items: flex-start; gap: 10px; } .lens-header-btns { margin-left: auto; display: flex; gap: 4px; flex: none; } .kind { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: 5px; } .lens-name { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.025em; color: var(--text); word-break: break-word; } .identity-file { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--muted); word-break: break-all; } /* ⚠️ `body.collapsed` — ui.collapsed() writes that, not `lens-collapsed`. The chevron did nothing until this matched. */ body.collapsed .lens-inner { display: none; } body.collapsed .lens-footer { display: none; } .lens-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; } /* b. Tabs — left-aligned labels, active underline overlaps the block rule */ .lens-mode-tabs { display: flex; border-bottom: 2px solid var(--rule-strong); flex: none; } .lens-mode-tab { flex: 1; text-align: left; padding: 13px 0 11px 20px; font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; } .lens-mode-tab:hover { color: var(--text); } .lens-mode-tab.on { font-weight: 700; color: var(--text); border-bottom-color: var(--accent); } .lens-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } .lens-panel { display: none; } .lens-panel.on { display: block; } .identity { padding: 0 20px; } .identity-sub { font-size: 12px; color: var(--muted); padding-top: 14px; } .identity-sub:empty { display: none; } /* c. Edit scope */ .scope-block { display: none; flex-direction: column; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--rule); } .scope-block.on { display: flex; } .scope-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .scope-switch { display: flex; border: 1px solid var(--rule-control); } .scope-seg { flex: 1; padding: 9px 12px; font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .scope-seg + .scope-seg { border-left: 1px solid var(--rule-control); } .scope-seg:hover { background: var(--ghost); color: var(--text); } /* ⚠️ `.active` is what renderScope writes on these two. */ .scope-seg.active { background: var(--accent); color: var(--ink); font-weight: 700; } .scope-seg.active:hover { background: var(--accent); } .scope-note { font-family: var(--font-mono); font-size: 11px; color: var(--muted); word-break: break-all; } /* d. TRANSFORM + PHYSICS */ .place-block, .physical-block { display: none; flex-direction: column; gap: 14px; padding: 18px 20px 20px; border-bottom: 1px solid var(--rule); } .place-block.on, .physical-block.on { display: flex; } .place-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gizmo-modes { display: flex; border: 1px solid var(--rule-control); } .gizmo-mode { flex: 1; padding: 9px 12px; font-size: 12px; font-weight: 500; color: var(--muted); text-align: left; } .gizmo-mode + .gizmo-mode { border-left: 1px solid var(--rule-control); } .gizmo-mode:hover { background: var(--ghost); color: var(--text); } .gizmo-mode.on { background: var(--segment-on); color: var(--text); font-weight: 700; } .axes { display: flex; border: 1px solid var(--rule-control); } .axis { flex: 1; padding: 9px 12px 10px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .axis + .axis { border-left: 1px solid var(--rule-control); } /* Axis letters are muted micro labels. The system is a mono red palette — RGB axis tinting was deliberately dropped, so .axis-x / -y / -z carry no colour of their own. */ .axis-name { font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .axis-x, .axis-y, .axis-z { color: var(--muted); } .axis-val { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; } .physical-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .physical-left { min-width: 0; } .physical-value { font-size: 13px; font-weight: 600; color: var(--text); } .solid-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--rule-control); font-size: 12px; font-weight: 500; color: var(--text); cursor: pointer; flex: none; } .solid-btn:hover { border-color: var(--accent); } .solid-btn.on .box { background: var(--accent); border-color: var(--accent); } /* No bridge means no write home for a body — the control says so instead of failing on click. */ .solid-btn.disabled { opacity: .45; cursor: default; } .solid-btn.disabled:hover { border-color: var(--rule-control); } .body-kind-row { display: none; align-items: center; gap: 4px; } .body-kind-row.on { display: flex; } .body-kind-btn { padding: 8px 12px; border: 1px solid var(--rule-control); font-size: 12px; font-weight: 500; color: var(--muted); } .body-kind-btn:hover { background: var(--ghost); color: var(--text); } .body-kind-btn.on { background: var(--segment-on); color: var(--text); font-weight: 700; } .body-mass-label { display: none; } .body-mass-label.on { display: block; } .body-mass-label input { width: 70px; padding: 8px 10px; border: 1px solid var(--rule-control); font-family: var(--font-mono); font-size: 12px; color: var(--text); background: none; } .parts { display: flex; flex-wrap: wrap; gap: 6px; } .part { display: flex; gap: 8px; padding: 5px 7px; border: 1px solid var(--rule); font-size: 11px; } .part-name { color: var(--text); } .part-size { font-family: var(--font-mono); color: var(--muted); } /* e. GAMEPLAY — one block per parameter */ #dials, #drivens { display: block; } .dial { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 20px; border-bottom: 1px solid var(--rule); } .dial-head { display: flex; align-items: baseline; gap: 10px; } .dial-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; } .dial-value { font-family: var(--font-mono); font-size: 20px; font-weight: 500; color: var(--text); cursor: ew-resize; flex: none; } .dial-unit { font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex: none; } /* An unsaved value is accent; a saved one is primary ink. Same fact as the top-bar count, said in the place the designer is already looking. */ .dial.held .dial-value, .dial.refused .dial-value { color: var(--accent-500); } /* Track: 14px box, 2px rail, 2px fill, 3px × 14px flat handle. No knob, no radius. */ .track { position: relative; height: 14px; cursor: pointer; } .track-base { position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--rule-control); } .dial-fill { position: absolute; top: 6px; left: 0; height: 2px; width: 0; background: var(--text); } .dial-handle { position: absolute; top: 0; left: 0; width: 3px; height: 14px; background: var(--text); } .dial-kept { position: absolute; top: 3px; width: 1px; height: 8px; background: var(--muted); opacity: .6; } .dial.held .dial-fill, .dial.refused .dial-fill, .dial.held .dial-handle, .dial.refused .dial-handle { background: var(--accent); } .dial-ends { display: flex; justify-content: space-between; margin-top: -8px; } .dial-ends .min, .dial-ends .max { font-family: var(--font-mono); font-size: 10px; color: var(--muted); } .dial-meaning { font-size: 12px; color: var(--muted); line-height: 1.45; } .dial-meaning:empty { display: none; } .dial-chips { display: flex; flex-wrap: wrap; gap: 6px; } .dial-chips:empty { display: none; } /* Rangeless: the game never said how big this gets, so there is nothing to drag between. */ .stepper { display: flex; align-items: center; gap: 6px; } .step { width: 30px; height: 30px; border: 1px solid var(--rule-control); color: var(--text); font-size: 14px; line-height: 1; } .step:hover { background: var(--ghost); } .step-field { width: 92px; padding: 7px 9px; border: 1px solid var(--rule-control); font-family: var(--font-mono); font-size: 13px; color: var(--text); background: none; } .step-hint { font-size: 11px; color: var(--muted); } /* f. Footer */ .lens-footer { display: flex; align-items: stretch; border-top: 2px solid var(--rule-strong); flex: none; } .foot-btn { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer; border-right: 1px solid var(--rule); flex: none; } .foot-btn:hover { background: var(--ghost); color: var(--text); } /* ⚠️ TWO CLASSES, TWO MEANINGS. `.on` = this control APPLIES to what is selected. `.checked` = the toggle is actually ON. Filling the box on `.on` made Snap look enabled the moment anything was placeable, which is a lie about state the designer would act on. */ .foot-btn.on { color: var(--text); } .foot-btn:not(.on) { opacity: .45; cursor: default; } .foot-btn.checked .box { background: var(--accent); border-color: var(--accent); } .lens-footer .spacer { border-right: 0; } .lens-held { display: none; align-items: center; gap: 9px; padding: 12px 16px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); } .lens-held.on { display: flex; } /* ── multi roster ─────────────────────────────────────────────────────────────────────────── */ .lens-multi { display: none; flex-direction: column; border-bottom: 1px solid var(--rule); flex: none; } .lens-multi.on { display: flex; } .multi-back { display: none; align-items: center; gap: 8px; padding: 11px 20px; font-size: 12px; color: var(--muted); text-align: left; border-bottom: 1px solid var(--rule); } .multi-back.on { display: flex; } .multi-back:hover { color: var(--text); background: var(--ghost); } .multi-tabs { display: flex; border-bottom: 1px solid var(--rule); } .multi-tab { flex: 1; display: flex; align-items: center; gap: 8px; padding: 11px 0 11px 20px; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .multi-tab.on { color: var(--text); border-bottom-color: var(--accent); } .multi-tab-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; } .multi-roster { max-height: 168px; overflow-y: auto; } .multi-row { display: flex; align-items: center; gap: 10px; padding: 9px 20px; cursor: pointer; border-bottom: 1px solid var(--rule); } .multi-row:hover { background: var(--ghost); } .multi-row.primary { background: var(--segment-on); } .multi-name { font-size: 12px; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .multi-row .mark { opacity: 0; } .multi-row.held .mark { opacity: 1; } .multi-drop { font-size: 14px; color: var(--muted); flex: none; } .multi-drop:hover { color: var(--accent); } .multi-note { padding: 10px 20px; font-size: 12px; color: var(--muted); } .multi-note:empty { display: none; } .multi-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px 12px; } .multi-clear { font-size: 12px; color: var(--muted); text-align: left; } .multi-clear:hover { color: var(--accent); } .multi-held { display: none; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); } .multi-held.on { display: flex; } /* ── drivens ──────────────────────────────────────────────────────────────────────────────── */ .driven { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; border-bottom: 1px solid var(--rule); } .driven-value { font-family: var(--font-mono); font-size: 20px; font-weight: 500; color: var(--text); } .driven-meaning { font-size: 12px; color: var(--muted); } .driven-meaning:empty { display: none; } /* ══════════════════════════════════════════════════════════════════════════════════════════ BOTTOM COMMAND BAR — 60px. mode → tools → toggles → spacer → destructive → primary ══════════════════════════════════════════════════════════════════════════════════════ */ .strip { height: var(--bar-bottom); flex: none; display: flex; align-items: stretch; background: var(--bar); border-top: 2px solid var(--rule-strong); position: relative; z-index: 40; } body:not(.design) .strip { display: none; } .mode-group { display: flex; border-right: 1px solid var(--rule); flex: none; } .mode { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 20px; cursor: pointer; border-top: 2px solid transparent; margin-top: -2px; flex: none; } .mode:hover { background: var(--ghost); } .mode-label { font-size: 13px; font-weight: 600; color: var(--muted); } .mode-key { font-family: var(--font-mono); font-size: 10px; color: var(--muted); border: 0; padding: 0; align-self: flex-start; } /* ⚠️ `.active`, not `.on` — renderChrome writes `cell.classList.toggle('active', …)`. */ .mode.active { background: var(--segment-on); border-top-color: var(--accent); } .mode.active .mode-label { font-weight: 700; color: var(--text); } .tool-group { display: flex; align-items: center; gap: 4px; padding: 0 14px; border-right: 1px solid var(--rule); flex: none; } .tool-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid transparent; cursor: pointer; flex: none; } .tool-btn:hover { border-color: var(--rule-control); } .tool-label { font-size: 12px; font-weight: 500; color: var(--text); } .tool-btn.on { border-color: var(--rule-control); background: var(--segment-on); } /* `.mode` used as a tool (Search) must not inherit the stacked mode layout. */ .tool-group .mode { flex-direction: row; border-top: 0; margin-top: 0; background: none; } .tool-group .mode.active { background: var(--segment-on); border-color: var(--rule-control); } /* Camera reads ON while WASD is driving the pawn — the state the button switches. */ body.pawn #dt-drive { border-color: var(--rule-control); background: var(--segment-on); } .toggle-group { display: flex; align-items: center; gap: 4px; padding: 0 14px; flex: none; } .toggle-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid transparent; cursor: pointer; flex: none; } .toggle-btn:hover { border-color: var(--rule-control); } .toggle-label { font-size: 12px; font-weight: 500; color: var(--text); } .toggle-btn.on { border-color: var(--accent); } .toggle-btn.on .box { background: var(--accent); border-color: var(--accent); } /* ⚠️ Paused has no `.on` of its own — renderChrome carries freeze state on `body.frozen`. Without this pair the button sat unlit while the world was visibly stopped. */ body.frozen #freeze { border-color: var(--accent); } body.frozen #freeze .box { background: var(--accent); border-color: var(--accent); } .pick-lock-n { font-family: var(--font-mono); font-size: 11px; color: var(--accent-500); } .pick-lock-n:empty { display: none; } /* ⚠️ `.on` is what renderChrome toggles on these two — not the `hidden` attribute. */ .session-count, .unsaved-cell { display: none; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); } .session-count { padding: 0 18px; } .session-count.on, .unsaved-cell.on { display: flex; } /* Revert session — text only, muted → accent on hover. Confirm-first is enforced in main.js. */ .panic { display: flex; align-items: center; padding: 0 18px; border-left: 1px solid var(--rule); font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; } .panic:hover { color: var(--accent-500); } .panic.armed { color: var(--ink); background: var(--accent); font-weight: 700; } /* Save — the only saturated fill in the interface. */ .keep { display: flex; align-items: center; gap: 12px; padding: 0 22px; background: var(--accent); color: var(--ink); cursor: pointer; flex: none; white-space: nowrap; } #keep-label { font-size: 13px; font-weight: 700; } .keep .key { border-color: rgba(234, 231, 231, .55); color: var(--ink); } /* ⚠️ `.on` means there is something to write — renderChrome toggles it. Without it the button is disabled at 45%, per the handoff, and says `Nothing to save`. */ .keep.on:hover { background: var(--accent-400); } .keep:not(.on) { opacity: .45; cursor: default; } /* ══════════════════════════════════════════════════════════════════════════════════════════ PLAY POSTURE — chrome near zero ══════════════════════════════════════════════════════════════════════════════════════ */ /* ⚠️ THE SHELL NEVER DRAWS ON THE GAME'S PIXELS. * * REPORTED FROM PLAY: in Play posture the wordmark and the unsaved chip landed on top of the * scaffold's own `Motes out / Collected / Speed` panel, and the Design hint landed on its * `WASD move · SHIFT sprint` line. Both were unreadable. * * This cannot be fixed by choosing better coordinates. Every game puts its HUD somewhere * different, and a game is free to fill all four corners — so ANY pixel the desk floats over the * game surface is a pixel some game already owns. * * Design already had this right: the bars are laid out ABOVE and BELOW the stage, the game * shrinks to fit, and overlap is structurally impossible. Play now works the same way — one slim * reserved rail instead of two floating overlays. The ResizeObserver on `#mount` hands the new * size to the game, so it reflows on its own with nothing to configure. */ .playbar { height: 30px; flex: none; display: none; align-items: center; gap: 14px; padding: 0 14px; background: var(--bar); border-bottom: 1px solid var(--rule-strong); position: relative; z-index: 40; } body:not(.design) .playbar { display: flex; } .playbar .brand { font-size: 11px; letter-spacing: .20em; color: var(--muted); } .playbar-rule { width: 1px; height: 14px; background: var(--rule); flex: none; } .playbar-hint { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .breathe-chip { display: none; } .breathe-chip.on { display: inline-flex; } .key-amber { border-color: var(--accent); color: var(--accent-500); } /* The old floating pair. Kept as classes because ui.js still holds handles to them, but they no longer render — nothing the desk shows in Play is allowed to sit over the game. */ .playmark, .hint { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════════════════════ VEILS, PANELS, TOASTS ══════════════════════════════════════════════════════════════════════════════════════ */ .veil { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; background: rgba(16, 15, 15, .78); z-index: 90; } .veil.on { display: flex; } .held-card, .door { margin-top: 14vh; width: min(560px, calc(100vw - 40px)); background: var(--panel); border: 2px solid var(--rule-strong); box-shadow: var(--shadow-lg); padding: 22px; display: flex; flex-direction: column; gap: 14px; } .held-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-500); } .held-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .held-body { font-size: 13px; color: var(--muted); line-height: 1.5; text-wrap: pretty; } .held-chips { display: flex; gap: 8px; flex-wrap: wrap; } .held-chips .chip { display: inline-flex; } .btn-danger { align-self: flex-start; padding: 11px 18px; background: var(--accent); color: var(--ink); font-size: 13px; font-weight: 700; } .btn-danger:hover { background: var(--accent-400); } .door { padding: 0; gap: 0; } .door-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--rule); } #search-input { flex: 1; min-width: 0; font-size: 15px; color: var(--text); caret-color: var(--text); background: none; border: none; outline: none; } #search-input::placeholder { color: var(--muted); } .door-esc { font-family: var(--font-mono); font-size: 10px; padding: 4px 5px; border: 1px solid var(--rule-control); color: var(--muted); cursor: pointer; } #search-results { max-height: 46vh; overflow-y: auto; } .result { display: flex; align-items: baseline; gap: 12px; padding: 11px 20px; cursor: pointer; border-bottom: 1px solid var(--rule); } .result:hover, .result.on { background: var(--ghost); } .result-name { font-size: 13px; color: var(--text); } .result-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: auto; } .door-foot { padding: 12px 20px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--rule); } .keymap-panel { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; background: rgba(16, 15, 15, .78); z-index: 95; } .keymap-panel.on { display: flex; } .keymap-card { margin-top: 10vh; width: min(760px, calc(100vw - 40px)); max-height: 76vh; background: var(--panel); border: 2px solid var(--rule-strong); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; } .keymap-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--rule); } .keymap-body { overflow-y: auto; padding: 6px 0 12px; } .keymap-row { display: grid; grid-template-columns: 108px 1fr 1fr 84px; gap: 12px; align-items: center; padding: 9px 20px; border-bottom: 1px solid var(--rule); } .keymap-row.listening { background: var(--segment-on); } .keymap-keys { font-family: var(--font-mono); font-size: 11px; padding: 4px 5px; border: 1px solid var(--rule-control); color: var(--text); justify-self: start; } .keymap-action { font-size: 12px; color: var(--text); } .keymap-note { font-size: 11px; color: var(--muted); } .keymap-rebind { font-size: 11px; padding: 5px 9px; border: 1px solid var(--rule-control); color: var(--muted); justify-self: end; } .keymap-rebind:hover { border-color: var(--accent); color: var(--accent-500); } /* A mouse gesture has no key to rebind, and says so rather than offering a button that lies. */ .keymap-fixed { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); justify-self: end; } .keymap-contract { font-family: var(--font-mono); font-size: 10px; color: var(--muted); padding: 12px 20px 0; } .keymap-reset { margin: 12px 20px 0; font-size: 11px; padding: 7px 11px; border: 1px solid var(--rule-control); color: var(--muted); } .keymap-reset:hover { border-color: var(--accent); color: var(--accent-500); } .lock-panel { position: absolute; bottom: calc(100% + 8px); left: 12px; width: 300px; display: none; flex-direction: column; background: var(--panel); border: 2px solid var(--rule-strong); box-shadow: var(--shadow-lg); z-index: 60; } .lock-panel.on { display: flex; } .lock-panel-head { padding: 11px 14px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); } .lock-list { max-height: 240px; overflow-y: auto; } .lock-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--rule); } .lock-row-name { flex: 1; min-width: 0; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* `.lock-row-btn` — the class renderLockPanel actually writes. */ .lock-row-btn { font-size: 10px; font-weight: 700; letter-spacing: .12em; padding: 4px 8px; border: 1px solid var(--rule-control); color: var(--muted); } .lock-row-btn:hover { border-color: var(--accent); color: var(--accent-500); } .lock-panel-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; } .lock-unlock-all { font-size: 12px; color: var(--muted); } .lock-unlock-all:hover { color: var(--accent-500); } .lock-panel-note { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* ── systems ────────────────────────────────────────────────────────────────── ⭐ THE DOOR TO EVERYTHING THE WORLD CANNOT SHOW YOU. Measured on HOLDOUT: 13 of 17 declared things have no body to click — the economy, four guns, recoil, the tracers, the wave curve, the lighting. Same panel shape as the lock roster beside it, because it is the same kind of thing: a list that opens off the bar. */ .tool-count { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 2px 5px; border: 1px solid var(--rule-control); color: var(--muted); } #dt-systems.on { border-color: var(--accent); background: var(--segment-on); } #dt-systems.on .tool-count { border-color: var(--accent); color: var(--accent-500); } /* The search button is an icon now — no label to size around. */ .tool-icon { padding: 0; width: 30px; justify-content: center; } .tool-icon svg { width: 15px; height: 15px; display: block; } .systems-panel { position: absolute; bottom: calc(100% + 8px); left: 12px; width: 340px; display: none; flex-direction: column; background: var(--panel); border: 2px solid var(--rule-strong); box-shadow: var(--shadow-lg); z-index: 60; } .systems-panel.on { display: flex; } .systems-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); } .systems-list { max-height: 46vh; overflow-y: auto; } .systems-group { padding: 8px 14px 5px; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); background: var(--bar); } .systems-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--rule); cursor: pointer; } .systems-row:hover { background: var(--segment-on); } .systems-row.active { background: var(--segment-on); border-left: 2px solid var(--accent); } .systems-row-name { flex: 1; min-width: 0; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .systems-row-n { font-family: var(--font-mono); font-size: 10px; color: var(--muted); } /* A thing you can also reach by clicking it — marked, so the list says which is which. */ .systems-row-body { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .systems-foot { padding: 10px 14px; border-top: 1px solid var(--rule); } .systems-note { font-size: 10px; color: var(--muted); line-height: 1.4; } .systems-list::-webkit-scrollbar { width: 8px; } .systems-list::-webkit-scrollbar-thumb { background: var(--rule-control); } .systems-list::-webkit-scrollbar-track { background: transparent; } .toast { position: fixed; bottom: calc(var(--bar-bottom) + 18px); left: 50%; transform: translateX(-50%); display: none; flex-direction: column; gap: 4px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--rule-control); z-index: 80; } .toast.on { display: flex; } .toast-title { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-500); } .toast-body { font-size: 12px; color: var(--muted); } /* Scrollbars — part of the chrome, not the browser's idea of it. */ .lens-scroll::-webkit-scrollbar, .multi-roster::-webkit-scrollbar, .lock-list::-webkit-scrollbar, .keymap-body::-webkit-scrollbar, #search-results::-webkit-scrollbar { width: 10px; } .lens-scroll::-webkit-scrollbar-thumb, .multi-roster::-webkit-scrollbar-thumb, .lock-list::-webkit-scrollbar-thumb, .keymap-body::-webkit-scrollbar-thumb, #search-results::-webkit-scrollbar-thumb { background: var(--rule-control); } .lens-scroll::-webkit-scrollbar-track, .multi-roster::-webkit-scrollbar-track, .lock-list::-webkit-scrollbar-track, .keymap-body::-webkit-scrollbar-track, #search-results::-webkit-scrollbar-track { background: transparent; } /* ── ⭐ AI NOTES ────────────────────────────────────────────────────────────────────────────── * * Sized to a sentence, not to a document. It is a thing you dash a line into mid-play and get out * of — anything bigger becomes another surface to manage, which is the going-back-and-forth it * exists to remove. Shares `.systems-panel` for the frame so there is one panel shape on the bar. */ .notes-panel { width: 380px; left: auto; right: 12px; } .notes-text { margin: 12px 14px 0; background: var(--bar); border: 1px solid var(--rule); color: var(--ink); font-family: var(--font-ui); font-size: 13px; line-height: 1.5; padding: 9px 10px; resize: vertical; outline: none; } .notes-text:focus { border-color: var(--accent); } .notes-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 12px; } .notes-status { font-size: 11px; color: var(--muted); } .notes-save { background: var(--accent); border: 1px solid var(--accent); color: var(--ink); font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; cursor: pointer; } .notes-save:disabled { opacity: .45; cursor: default; }