/* DC EPOCH / NEON AFTER DARK
 * Local-only presentation layer. No simulation values or interaction contracts.
 * Opaque text surfaces, bounded effects, and an immediate reduced-motion path. */
:root {
  --g-bg: #030a0d;
  --g-paper: #041216ed;
  --g-raised: #0b282e;
  --g-ink: #effbff;
  --g-muted: #a5c2c9;
  --g-line: #23535d;
  --g-accent: #00f0ff;
  --g-accent-ink: #001317;
  --g-accent-soft: #06383e;
  --g-blue: #79eaff;
  --g-warning: #fcee0a;
  --g-danger: #ff83aa;
  --neon-cyan: #00f0ff;
  --neon-pink: #ff2a6d;
  --neon-yellow: #fcee0a;
  --neon-green: #00ff41;
  --bg: #040d11;
  --sidebar: #061216;
  --panel: #08191f;
  --panel-raised: #10272f;
  --border: #2b525c;
  --border-soft: #1d3a43;
  --text: #effbff;
  --muted: #afc8cd;
  --subtle: #a2bbc3;
  --mint: #00f0ff;
  --mint-dark: #06383e;
  --cyan: #79eaff;
  --amber: #fcee0a;
  --red: #ff83aa;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", "Noto Sans Mono CJK SC", monospace;
  --display: "Bahnschrift", "Aptos Display", "Arial Narrow", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --elevation-1: 0 7px 30px #0007, inset 0 1px #00f0ff0d;
  --elevation-2: 0 16px 45px #000a, 0 0 18px #00f0ff08;
  --elevation-3: 0 30px 100px #000c, 0 0 45px #00f0ff12;
}
body { font-family: var(--display); background: var(--bg); }
::selection { background: #00f0ff; color: #001317; }
button, input, select { min-height: 44px; }
.icon-button { min-width: 44px; min-height: 44px; }
button, a, input, select, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, #game3d button:focus-visible,
.game-dialog button:focus-visible, .language-toggle button:focus-visible {
  outline: 3px solid var(--neon-yellow); outline-offset: 3px;
}
#scene-container:focus-visible { outline: 3px solid var(--neon-yellow); outline-offset: -4px; }
#game3d .mission-toggle:focus-visible { outline-offset: -4px; }
#game3d { font-family: var(--mono); background: #030a0d; }
/* A quiet lens vignette preserves the bright building and readable edge controls. */
#game3d::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #02090d8f, transparent 24%, transparent 68%, #02090d6b),
    radial-gradient(ellipse at 52% 45%, transparent 38%, #01060966 100%);
}
#game3d::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .14;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #001015 3px 4px);
}
.game-top, .game-left, .game-cameras, .game-bottom { z-index: 2; }
.game-top { gap: 10px; }
.game-brand { gap: 11px; }
.game-brand-mark {
  border-color: #00f0ff88; background: #002d35aa; color: var(--neon-cyan);
  box-shadow: inset 0 0 14px #00f0ff19, 0 0 18px #00f0ff15;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.game-brand strong { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -1px; text-transform: uppercase; color: var(--neon-yellow); text-shadow: 2px 0 #ff2a6d30; }
.game-brand small { font-family: var(--mono); color: #a5c2c9; font-weight: 500; font-size: 8px; letter-spacing: 1.5px; }
.game-hud {
  position: relative; border: 1px solid #2c5660; border-top: 2px solid #00cbd9;
  background: linear-gradient(130deg, #082129f5, #030f14ed 65%); min-height: 94px;
  box-shadow: 0 12px 30px #0006, 0 -1px 16px #00f0ff1a;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.hud-stat { padding: 12px 13px 10px; border-right-color: #24545d; }
.hud-stat small { color: #aac7ce; font-size: 10px; letter-spacing: .25px; }
.hud-icon { color: #00f0ff; }
.hud-stat strong { font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: -1px; color: #f2fdff; text-shadow: 0 0 16px #00f0ff30; }
.hud-stat:first-child strong { color: var(--neon-yellow); }
.hud-stat:nth-child(3) strong { color: #79eaff; }
.hud-detail { color: #a4bfc8; font-size: 9px; }
.hud-gauge { height: 5px; border-radius: 0; background: #10333b; position: relative; }
.hud-gauge > span { background: var(--neon-cyan); border-radius: 0; box-shadow: 0 0 10px #00f0ff90; }
.hud-gauge::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, #041216 9px 12px); }
.hud-stat:first-child .hud-gauge > span { background: var(--neon-yellow); }
.hud-stat:nth-child(5) .hud-gauge > span { background: var(--neon-green); }
.hud-stat.negative strong, .hud-stat.warning strong { color: #ff93b3; text-shadow: 1px 0 #ff2a6d77; }
.hud-stat.negative .hud-gauge > span, .hud-stat.warning .hud-gauge > span { background: var(--neon-pink); }
.game-button, .game-icon-button, .language-toggle {
  border-color: #35626a !important; background: #06191fe8; border-radius: 2px;
}
.game-button, .game-icon-button { box-shadow: 0 5px 24px #0006; }
.game-button:hover, #game3d .game-icon-button:hover { border-color: var(--neon-cyan) !important; background: #0a3039; }
.game-top > .game-button { min-height: 46px; }
.language-toggle { padding: 0; }
.language-toggle button { border-radius: 0; font-family: var(--mono); font-size: 11px; }
.language-toggle button[aria-pressed="true"] { color: #00f0ff; background: #06383e; box-shadow: inset 0 -2px #00f0ff; }
.game-left {
  width: 272px; border: 1px solid #28535d; border-left: 2px solid #00d5e3;
  background: linear-gradient(130deg, #082129f5, #030e14e8); border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.mission-toggle { color: #c6e5ed; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #16404b !important; }
.status-dot { width: 6px; height: 6px; background: var(--neon-green); border-radius: 0; box-shadow: 0 0 9px #00ff4170; }
.game-chapter { padding-top: 14px; }
.game-eyebrow { color: #6fe9f2; font-family: var(--mono); font-size: 9px; letter-spacing: 1.4px; }
.game-chapter h1 { font-family: var(--display); font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.7px; text-transform: uppercase; margin: 10px 0 12px; }
.game-chapter p, .game-tutorial p { font-family: var(--display); color: #afc8cd; font-size: 12px; line-height: 1.6; }
.game-chapter nav { gap: 5px; margin-top: 17px; }
.game-chapter nav button { background: #071d25; border-color: #2e5761 !important; border-radius: 0; }
.game-chapter nav button.active { background: #003c46; border-color: #00f0ff !important; box-shadow: inset 0 -3px #00f0ff, 0 0 12px #00f0ff10; }
.game-tutorial { border-top: 1px dashed #3d5c67; }
.game-tutorial small { color: #00ff77; font-family: var(--mono); font-size: 10px; }
.game-tutorial h2 { font-family: var(--display); font-size: 15px; font-weight: 650; }
.tutorial-actions button { border-radius: 0; background: #102b33; font-size: 11px; }
.tutorial-actions button:last-child { background: #00f0ff; color: #001317 !important; }
.game-cameras { border-color: #28535d; border-radius: 0; background: #041216ed; padding: 4px; }
.game-cameras button { border-radius: 0; color: #b3ccd3 !important; }
.game-cameras button span { font-size: 9px; letter-spacing: .2px; }
.game-cameras button.active { color: #00f0ff !important; border-color: #00adbc !important; background: #06333c; box-shadow: inset 0 -2px #00f0ff, inset 0 0 16px #00f0ff0d; }
.game-cameras button:hover { background: #0b2931; }
.game-library {
  width: 294px; top: 120px; max-height: calc(100dvh - 146px); overflow: auto;
  background: #041216f8; border: 1px solid #3d7b85; border-top: 3px solid #00f0ff;
  border-radius: 0; box-shadow: 0 20px 80px #000d, 0 0 24px #00f0ff15;
  scrollbar-width: thin; scrollbar-color: #30616c #051217;
}
.game-library > button { padding-left: 14px; font-size: 11px; border-radius: 0; border-bottom: 1px solid #14313b !important; }
.game-library button:hover { color: #00f0ff !important; background: #0a2831; }
#style-controls, .style-settings { padding: 14px 10px 6px; margin-top: 6px; border-top: 1px solid #30606c; }
#style-controls h2, #style-controls h3, #style-controls legend, .style-settings h2, .style-settings h3, .style-settings legend {
  font: 11px var(--mono); color: #fcee0a; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 12px; padding: 0;
}
#style-controls fieldset, .style-settings fieldset { border: 0; margin: 0; padding: 0; }
.quality-options, .quality-toggle, .quality-buttons, #style-controls [role="group"], .style-settings [role="group"] { display: flex; gap: 4px; }
.game-library button[data-quality] { flex: 1; min-width: 44px; width: auto; padding: 8px 4px; text-align: center; border: 1px solid #345661 !important; font-size: 11px; }
.game-library button[data-quality][aria-pressed="true"] { color: #00f0ff !important; border-color: #00f0ff !important; background: #06343d; box-shadow: inset 0 -2px #00f0ff; }
#style-controls p, .style-settings p { font: 10px/1.65 var(--mono); color: #afc8cd; margin: 10px 0; }
#sound-toggle { margin-top: 10px; border: 1px solid #345661 !important; font-size: 11px; }
#sound-toggle[aria-pressed="true"] { color: #00ff77 !important; border-color: #008b49 !important; background: #05251b; }
.device-card { border-color: #387281; border-top: 2px solid #00f0ff; background: #041216f5; border-radius: 0; }
.device-card h2 { font-family: var(--display); font-size: 19px; }
.device-card dl > div { border-color: #1e424f; font-size: 11px; }
.device-card p { font-family: var(--display); color: #b5cbd1; }
.device-card footer button { background: #0e2c36; border-radius: 0; }
.device-card footer button[data-device-action="remove"] { border: 1px solid #a53762 !important; background: #2a0b1a; }
.game-control-row { gap: 10px; margin-bottom: 10px; }
#game-planning { color: #9ef7ff; background: #041216ed; }
.game-finance { padding: 9px 14px; border: 1px solid #234752; border-left: 2px solid #b5a519; background: #041216e8; border-radius: 0; gap: 22px; }
.game-finance small { color: #aec8cd; font-size: 9px; }
.game-finance b { color: #fcee0a; font-family: var(--mono); font-size: 12px; font-weight: 500; }
.game-time { border-color: #31535e; border-radius: 0; background: #041216f2; font-size: 11px; }
.game-time button { border-radius: 0; }
.game-time button.active { background: #06343d; border-color: #008999 !important; box-shadow: inset 0 -2px #00f0ff; }
.game-time button.game-start { color: #101500 !important; background: #fcee0a; font-weight: 800; letter-spacing: .15px; box-shadow: 0 0 20px #fcee0a13; }
.game-time button.game-start:hover { background: #fff972; box-shadow: 0 0 24px #fcee0a35; }
.build-tray {
  position: relative; padding: 8px 14px 0; border-color: #325860; border-top: 2px solid #00c9d6;
  background: linear-gradient(105deg, #061c24f5, #030d12f0 60%); border-radius: 0;
  box-shadow: 0 -4px 40px #00f0ff06, 0 15px 55px #000a;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.build-topline { border-bottom-color: #28505b; }
.build-topline button { border-radius: 0; color: #b6cdd4 !important; font-size: 11px; letter-spacing: .2px; }
.build-topline button.active { color: #00f0ff !important; background: #043039; border-color: #227782 !important; box-shadow: inset 0 -2px #00f0ff; }
.build-mode { border-left-color: #32535e; }
.build-mode button { color: #b7cbd3 !important; }
.build-mode #tool-remove:hover { color: #ff93b3 !important; background: #3b0d24; }
.build-palette { gap: 9px; padding: 10px 0; scrollbar-color: #347586 transparent; }
.build-item {
  min-width: 195px; padding: 11px 35px 11px 12px; border-radius: 0;
  border-color: #2b5663 !important; background: #081e28;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.build-item::after { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: #257989; }
.build-item:hover { border-color: #00f0ff !important; background: #0a2d39; }
.build-item.active { background: #00323c; border-color: #00f0ff !important; box-shadow: inset 0 0 22px #00f0ff13; }
.build-item.active::after { background: #00f0ff; box-shadow: 0 0 14px #00f0ff; }
.build-icon { width: 34px; height: 42px; color: #70d8e9; filter: drop-shadow(0 0 4px #00f0ff22); }
.build-copy strong { color: #eefbff; font: 650 13px var(--display); }
.build-copy small { color: #fcee0a; font: 11px var(--mono); margin-top: 5px; }
.build-unit { color: #a9c4cc; font-size: 9px; }
.build-shortcut { border-color: #3a6270; color: #a8ccd5; border-radius: 0; background: #03141c; }
.placement-status { color: #acc5cd; border-color: #28505b; font-size: 10px; }
.placement-status.valid { color: #6eefff; }
.placement-status.invalid { color: #ff93b3; }
.placement-cursor { background: #03141af5; border-radius: 0; border-left-width: 3px; box-shadow: 0 5px 26px #000a, 0 0 20px #00f0ff18; }
.placement-cursor.invalid { border-color: #ff2a6d; color: #ffa0be; box-shadow: 0 5px 26px #000a, 0 0 20px #ff2a6d25; }
.game-footnote { color: #9ebac4; font-family: var(--mono); font-size: 9px; letter-spacing: .15px; text-shadow: 0 1px 4px #000; }
/* Terminal interruptions, with chromatic error edges and bounded animation. */
#toast { background: #04171ff5; border: 1px solid #438b9a; border-left: 4px solid #00f0ff; border-radius: 0; box-shadow: 0 12px 50px #000b, 0 0 22px #00f0ff12; color: #e2f7ff; font-family: var(--mono); }
.toast-copy { font-size: 12px; }
.toast-copy small { color: #b4cdd3; }
.toast-icon { color: #00f0ff; }
.toast-close { border-radius: 0; color: #bbd8df; }
#toast[data-tone="success"] { border-color: #177650; border-left-color: #00ff41; }
#toast[data-tone="success"] .toast-icon { color: #00ff77; }
#toast[data-tone="warning"] { border-color: #827c22; border-left-color: #fcee0a; }
#toast[data-tone="warning"] .toast-icon { color: #fcee0a; }
#toast[data-tone="danger"] { border-color: #b33d65; border-left-color: #ff2a6d; background: #240b18f5; box-shadow: 0 12px 50px #000b, 0 0 30px #ff2a6d26; }
#toast[data-tone="danger"] .toast-copy { color: #ffe3ed; }
#toast[data-tone="danger"] .toast-icon { color: #ff93b3; }
#toast.visible[data-tone="danger"] .toast-copy { animation: signal-error .55s steps(2, end) 2; }
body:has(#toast.visible[data-tone="danger"])::after {
  content: ""; position: fixed; inset: 0; z-index: 120; pointer-events: none;
  border: 2px solid #ff2a6d66; box-shadow: inset 0 0 65px #ff2a6d25;
  animation: alarm-edge 1.6s ease-out 2;
}
@keyframes signal-error { 0%, 100% { text-shadow: none; } 22%, 62% { text-shadow: 2px 0 #ff2a6d, -2px 0 #00f0ff; } 40% { transform: translateX(1px); } 80% { transform: translateX(-1px); } }
@keyframes alarm-edge { 0%, 100% { opacity: .2; } 25% { opacity: 1; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #game3d button:not(:disabled):hover { text-shadow: .6px 0 #00f0ff44, -.6px 0 #ff2a6d44; }
  .build-item:not(:disabled):hover .build-icon { transform: translateY(-1px); }
  .build-item .build-icon { transition: transform .16s ease; }
}
/* Arrival / boot sequence. Canvas is capped by style.js, never interactive. */
#matrix-rain { position: fixed; inset: 0; z-index: 151; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
#matrix-rain.active[data-mode="boot"] { opacity: .16; }
#matrix-rain.active[data-mode="menu"] { opacity: .035; }
.game-loading { background: radial-gradient(ellipse at 50% 40%, #04333d 0, #02090d 60%); }
.game-loading::before { content: ""; position: absolute; inset: 24px; border: 1px solid #28505b; pointer-events: none; background: linear-gradient(#00f0ff, #00f0ff) top left / 80px 2px no-repeat, linear-gradient(#ff2a6d, #ff2a6d) bottom right / 80px 2px no-repeat; }
.game-loading::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px); }
.loading-card { position: relative; z-index: 152; width: min(510px, 100%); padding: 38px 34px 28px; background: #031218b3; text-align: left; border-left: 2px solid #00f0ff; box-shadow: -10px 0 45px #00f0ff0b; }
.loading-mark { width: 50px; height: 55px; margin: 0 0 22px; border-radius: 0; color: #00f0ff; background: #00333c80; border-color: #00aab8; box-shadow: 0 0 30px #00f0ff18; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.loading-mark svg { width: 28px; height: 32px; }
.loading-card > strong { color: #fcee0a; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -2px; text-transform: uppercase; text-shadow: 3px 0 #ff2a6d30; }
.loading-card p { color: #8beefa; margin: 20px 0 14px; font: 12px/1.6 var(--mono); }
.loading-card progress { height: 7px; border-radius: 0; background: #0c3541; }
.loading-card progress::-webkit-progress-bar { background: #0c3541; }
.loading-card progress::-webkit-progress-value { background: #00f0ff; box-shadow: 0 0 18px #00f0ff; border-radius: 0; }
.loading-card progress::-moz-progress-bar { background: #00f0ff; border-radius: 0; }
#loading-value { color: #00f0ff; font: 11px var(--mono); letter-spacing: 2px; }
.loading-card > small { display: block; margin-top: 17px; color: #adc7d1; font: 10px/1.7 var(--mono); }
#loading-terminal { min-height: 78px; margin: 22px 0; color: #82dba2; font: 11px/1.85 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
#loading-online { margin-top: 20px; color: #00ff77; font: 700 16px var(--mono); letter-spacing: 3px; text-shadow: 0 0 16px #00ff4144; }
#loading-fallback { margin-top: 23px; padding: 8px 16px; border-color: #46727c; border-radius: 0; background: #09202a; color: #bcdde4; font: 11px var(--mono); }
#intro-overlay { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 max(6vw, 24px) 18vh; pointer-events: none; background: linear-gradient(0deg, #01090dd9 0%, transparent 42%, transparent 80%, #01090da6 100%); }
#intro-overlay::before, #intro-overlay::after { content: ""; position: absolute; left: 0; right: 0; height: 7vh; background: #010609; pointer-events: none; }
#intro-overlay::before { top: 0; border-bottom: 1px solid #00f0ff22; }
#intro-overlay::after { bottom: 0; border-top: 1px solid #00f0ff22; }
.intro-kicker { color: #00f0ff; font: 11px var(--mono); letter-spacing: 4px; margin: 0 0 13px; text-shadow: 0 0 16px #00f0ff55; }
.intro-title { max-width: 100%; margin: 0; color: #fcee0a; font-family: var(--display); font-size: clamp(48px, 7vw, 108px); font-weight: 800; line-height: .95; letter-spacing: -3px; text-transform: uppercase; text-shadow: 3px 0 #ff2a6d40, 0 3px 30px #000; overflow-wrap: anywhere; }
.intro-description, .intro-subtitle { color: #bdd6dd; font: 12px/1.65 var(--mono); max-width: 480px; }
#game3d #intro-skip { pointer-events: auto; margin-top: 24px; min-width: 140px; padding: 10px 20px; border: 1px solid #397780; border-left: 3px solid #00f0ff; color: #d7fbff; background: #031b24e6; font: 11px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
#game3d #intro-skip:hover { background: #0b3540; border-color: #00f0ff; }
/* Planning and learning share the night-world material palette. */
.sidebar { background: #051317; border-right-color: #24505a; }
.brand-mark { background: #05333a; border-radius: 0; color: #00f0ff; }
.brand { color: #fcee0a; font-family: var(--display); }
.sidebar-caption, .sidebar-footer, .offline-note { color: #aec8ce; }
.nav-item { color: #b2cbd3; border-radius: 0; }
.nav-item.active { color: #00f0ff; background: #07343a; box-shadow: inset 2px 0 #00f0ff; }
.level-card { border-radius: 0; }
.topbar { background: #05131af2; border-color: #264a55; }
.page-heading h1 { font-family: var(--display); letter-spacing: -1px; }
.eyebrow { color: #00f0ff; }
.panel, .metric-card, .insight-card, .mission-card, .site-card, .option-card, .action-card { border-radius: 2px; }
.mission-card { border-color: #286172; background: linear-gradient(115deg, #063341, #081d29 60%, #190e2a); }
.mission-kicker, .mission-title { color: #e6fcff; }
.mission-kicker span, .mission-description, .mission-objectives, .mission-title > span { color: #bdd7de; }
.mission-art-label { color: #9bc9d2; }
.mission-number { color: #00f0ff80; }
.mission-orbit { border-color: #00f0ff44; box-shadow: 0 0 0 22px #00f0ff08, 0 0 0 44px #00f0ff04; }
.mission-orbit::before { border-color: #00f0ff44; }
.mission-orbit::after { border-color: #00f0ff; background: #05333a; box-shadow: 0 0 15px #00f0ff55; }
.metric-card { border-top: 2px solid #287384; }
.metric-card.highlight { border-color: #00a9b8; }
.metric-card.highlight .metric-value { color: #00f0ff; }
.button, .tag, .tab, kbd { border-radius: 0; }
.button.primary, .dialog-primary { background: #00f0ff; color: #001317 !important; border-color: #00f0ff; }
.button.primary:hover, .dialog-primary:hover { background: #79f7ff; }
.button.ghost, .button.secondary { color: #c9e9ef; border-color: #3b6673; background: #0b2630; }
.tag { color: #9ceefa; background: #06333a; border-color: #246575; }
.tab.active { color: #00f0ff; border-bottom-color: #00f0ff; }
input, select, textarea { accent-color: #00f0ff; }
dialog, .game-dialog { border-color: #397886; border-top: 2px solid #00f0ff; border-radius: 2px; background: #06171e; box-shadow: 0 30px 100px #000d, 0 0 45px #00f0ff15; }
dialog::backdrop, .game-dialog::backdrop { background: #01070bc4; }
.onboarding-dialog::backdrop { background: #01070b99; }
.game-dialog { padding: 28px; }
.game-dialog h2 { font-family: var(--display); color: #f1fdff; font-size: 28px; letter-spacing: -.6px; }
.game-dialog p { color: #b7ced5; font-family: var(--display); }
.game-dialog button { border-radius: 0; font-family: var(--mono); }
.step-badge { border-color: #2b7786; border-radius: 0; color: #00f0ff; background: #052630; }
kbd { background: #0b2a35; color: #c9faff; border-color: #427584; }
.shortcut-list > div { border-color: #244955; }
.onboarding-target { outline-color: #fcee0a; box-shadow: 0 0 0 7px #fcee0a12, 0 0 35px #fcee0a24; }
.spatial-active.panel-open > .app-shell { border-color: #35707d; border-top: 2px solid #00f0ff; border-radius: 2px; background: #041016; }
.spatial-active.panel-open .drawer-close { border-radius: 0; background: #123540; border-color: #488693; }
/* Desktop: labels retain room at 1280 x 800 without crowding the world. */
@media (min-width: 761px) and (max-width: 1400px) {
  .game-top { gap: 7px; }
  .game-brand-mark { display: none; }
  .game-brand strong { font-size: 22px; }
  .game-brand small { font-size: 7px; letter-spacing: 1px; }
  .hud-stat { padding: 11px 9px; grid-template-columns: 12px minmax(0, 1fr); gap: 0 4px; }
  .hud-stat strong { font-size: 18px; }
  .hud-stat small { font-size: 9px; }
  .hud-detail { font-size: 8px; }
  .game-left { width: 264px; }
  #game-menu { padding: 10px; width: 44px; }
  #game-menu span { display: none; }
  .game-finance { gap: 14px; padding: 8px 10px; }
  .game-finance > div:last-child { display: none; }
  .game-time { font-size: 10px; }
  .game-time > span { padding: 0 5px; }
  .game-time button.game-start { padding: 9px 12px; }
  #game-planning { font-size: 11px; padding-inline: 11px; }
  .build-topline button { padding-inline: 10px; }
}
@media (min-width: 1600px) {
  .game-brand strong { font-size: 30px; }
  .game-brand small { font-size: 9px; letter-spacing: 1.8px; }
  .game-brand-mark { width: 46px; height: 52px; }
  .game-hud { min-height: 102px; }
  .hud-stat { padding: 14px 20px; }
  .hud-stat strong { font-size: 25px; }
  .hud-stat small { font-size: 11px; }
  .hud-detail { font-size: 10px; }
  .game-left { width: 290px; }
  .game-chapter h1 { font-size: 36px; }
  .game-library { top: 139px; }
  .build-item { min-width: 225px; padding-block: 14px; }
  .build-copy strong { font-size: 14px; }
}
/* Mobile retains a genuinely usable scene between the top HUD and build deck. */
@media (max-width: 760px) {
  :root { --deck-gap: 10px; --deck-top: max(10px, env(safe-area-inset-top)); --deck-bottom: max(8px, env(safe-area-inset-bottom)); }
  .game-top { gap: 5px; }
  .game-brand { flex: 1; min-width: 74px; padding: 0; }
  .game-brand strong { font-size: 20px; letter-spacing: -.8px; }
  .game-brand small, .game-brand-mark { display: none; }
  .game-top > .game-button { min-height: 44px; }
  .language-toggle button { font-size: 10px; }
  .game-hud { min-height: 81px; border-radius: 0; margin-top: 4px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
  .hud-stat { grid-template-columns: 1fr; padding: 8px 5px 7px; }
  .hud-stat small { font-size: 9px; min-height: 24px; letter-spacing: 0; line-height: 1.35; }
  .hud-stat strong { font-size: 12px; letter-spacing: -.7px; min-height: 25px; line-height: 1.2; margin-top: 3px; }
  .hud-detail, .hud-icon { display: none; }
  .hud-gauge { margin-top: 6px; height: 4px; }
  .hud-gauge::after { background: repeating-linear-gradient(90deg, transparent 0 6px, #041216 6px 9px); }
  .game-left { top: calc(var(--deck-top) + 149px); width: 254px; max-height: calc(100dvh - 540px); }
  .game-left.is-collapsed { width: 178px; }
  .mission-toggle { font-size: 10px; padding: 10px; letter-spacing: .2px; }
  .game-chapter { padding: 12px 10px; }
  .game-chapter h1 { font-size: 27px; margin-bottom: 9px; }
  .game-chapter p, .game-tutorial p { font-size: 11px; }
  .game-chapter nav { gap: 2px; }
  .game-chapter nav button { width: 44px; min-width: 44px; }
  .game-tutorial { margin: 0 10px 12px; }
  .game-cameras { top: calc(var(--deck-top) + 149px); gap: 2px; padding: 3px; }
  .game-cameras button { width: 46px; min-height: 46px !important; }
  .game-cameras button span { font-size: 9px; }
  .game-library { top: calc(var(--deck-top) + 50px); width: min(294px, calc(100vw - 20px)); max-height: calc(100dvh - 80px); }
  .game-control-row { padding: 5px; margin-bottom: 6px; gap: 4px; background: #041216f2; border-color: #2a535f; border-radius: 0; }
  #game-planning { font-size: 10px; padding: 5px 4px; background: #0a2b35; }
  .game-finance { display: none; }
  .game-time { display: contents; }
  .game-time > span { font-size: 10px; }
  .game-time button.game-start { padding: 8px 12px; font-size: 11px; }
  .build-tray { padding: 4px 7px 0; clip-path: none; border-radius: 0; }
  .build-topline { padding-bottom: 3px; }
  .build-topline button { padding: 6px 7px; font-size: 10px; letter-spacing: -.15px; }
  .build-mode button { padding: 6px 9px; }
  .build-palette { padding: 6px 0; gap: 6px; }
  .build-item { min-width: 178px; padding: 8px 29px 8px 10px; gap: 8px; }
  .build-icon { width: 25px; height: 35px; }
  .build-copy strong { font-size: 12px; }
  .build-copy small { font-size: 10px; margin-top: 3px; }
  .build-unit { font-size: 9px; }
  .placement-status { font-size: 9px; min-height: 26px; padding: 5px 0; max-height: 40px; }
  .game-footnote { display: none; }
  .device-card { top: auto; bottom: 0; z-index: 15; padding: 14px 18px max(18px, env(safe-area-inset-bottom)); border-radius: 0; background: #04151c; }
  .device-card::before { background: #00c5d4; border-radius: 0; }
  .device-card h2 { font-size: 19px; }
  .device-card dl > div { font-size: 11px; }
  .game-dialog { width: calc(100vw - 24px); padding: 20px; border-radius: 0; }
  .game-dialog h2 { font-size: 25px; }
  .game-dialog p { font-size: 13px; }
  .game-dialog button { padding: 8px 10px; font-size: 11px; }
  .onboarding-actions { gap: 4px; }
  .onboarding-actions > div { gap: 4px; }
  .spatial-active #toast { top: calc(var(--deck-top) + 145px); bottom: auto; max-width: calc(100vw - 24px); }
  .toast-copy { font-size: 11px; }
  .spatial-active.panel-open > .app-shell { border-radius: 0; }
  .loading-card { width: min(440px, 100%); padding: 25px 20px; }
  .loading-card > strong { font-size: 44px; }
  .loading-card p { font-size: 11px; }
  .game-loading { padding: 22px; }
  .game-loading::before { inset: 12px; }
  #loading-terminal { font-size: 10px; min-height: 90px; }
  #intro-overlay { padding: 0 24px 22vh; }
  .intro-title { font-size: clamp(42px, 14vw, 72px); letter-spacing: -2px; }
  .intro-kicker { font-size: 9px; letter-spacing: 2px; }
  #game3d #intro-skip { margin-top: 20px; }
}
@media (max-width: 360px) {
  .game-top { gap: 3px; }
  .game-brand strong { font-size: 16px; }
  #game-help { display: none; }
  .game-left { width: 235px; }
  .game-chapter nav { gap: 0; }
  .game-chapter { padding-inline: 6px; }
  .build-topline button { padding-inline: 5px; font-size: 9px; }
}
/* Motion stays decorative. Hidden tabs are suspended by the presentation code. */
html[data-quality="low"] #game3d::after,
html[data-quality="low"] #matrix-rain { display: none; }
html[data-quality="low"] .game-loading::after { display: none; }
html[data-quality="low"] .game-hud, html[data-quality="low"] .build-tray,
html[data-quality="low"] .game-left { box-shadow: none; }
html[data-reduced-motion="true"] *, html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-reduced-motion="true"] #matrix-rain { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  #matrix-rain { display: none; }
}
@media print {
  #matrix-rain, #intro-overlay, .game-loading, body::after { display: none !important; }
}
/* Intro owns the viewport; commands return together when the camera settles. */
body.intro-active .game-top, body.intro-active .game-left,
body.intro-active .game-cameras, body.intro-active .game-bottom,
body.intro-active .device-card, body.intro-active .game-library {
  visibility: hidden; pointer-events: none;
}
.intro-hint { color: #bdd6dd; font: 12px/1.65 var(--mono); max-width: 480px; margin: 18px 0 0; }
body.critical-alert::after {
  content: ""; position: fixed; inset: 0; z-index: 120; pointer-events: none;
  border: 2px solid #ff2a6d66; box-shadow: inset 0 0 65px #ff2a6d25;
  animation: alarm-edge 1.6s ease-out 2;
}
.hud-value.ticking { animation: telemetry-tick .32s ease-out; }
@keyframes telemetry-tick { 0% { opacity: .45; transform: translateY(3px); filter: blur(.6px); } 100% { opacity: 1; transform: translateY(0); filter: none; } }
#fallback-style-controls { padding: 12px 0; margin-bottom: 12px; border-top: 1px solid #28505b; border-bottom: 1px solid #28505b; }
#fallback-style-controls h2, #fallback-style-controls h3 { margin: 0 0 10px; color: #fcee0a; font: 10px/1.5 var(--mono); letter-spacing: 1px; }
#fallback-style-controls p { margin: 8px 0; font: 10px/1.65 var(--mono); color: #afc8cd; }
#fallback-style-controls .quality-options { display: flex; gap: 4px; }
#fallback-style-controls button { min-width: 44px; min-height: 44px; border: 1px solid #315866; background: #071e28; color: #d4edf3; font: 10px var(--mono); padding: 7px; }
#fallback-style-controls [data-quality] { flex: 1; }
#fallback-style-controls [data-quality][aria-pressed="true"] { color: #00f0ff; border-color: #00b8c7; background: #06343d; box-shadow: inset 0 -2px #00f0ff; }
#fallback-style-controls [data-sound-toggle] { width: 100%; margin-top: 8px; text-align: left; }
#fallback-style-controls [data-sound-toggle][aria-pressed="true"] { color: #00ff77; border-color: #008b49; background: #05251b; }
#fallback-style-controls button:focus-visible { outline: 3px solid #fcee0a; outline-offset: 3px; }
@media (max-width: 760px) { .intro-hint { font-size: 11px; max-width: 300px; } }
html[data-reduced-motion="true"] .hud-value.ticking { animation: none; }
@media (prefers-reduced-motion: reduce) { .hud-value.ticking { animation: none; } }
.intro-status { display: block; margin: 0 0 20px; width: max-content; padding: 5px 9px; border: 1px solid #1e7449; color: #00ff77; background: #032517cc; font: 10px var(--mono); letter-spacing: 1.7px; }
.intro-kicker { display: block; }
#reduced-motion-note { display: block; margin: 10px 0 4px; color: #bfd5dc; font: 10px/1.6 var(--mono); }
#style-controls > .game-eyebrow, #fallback-style-controls > .game-eyebrow { display: block; color: #fcee0a; margin-bottom: 10px; }
#style-controls { margin-top: 0; padding-top: 8px; border-top: 0; padding-bottom: 14px; border-bottom: 1px solid #30606c; }
#game3d .build-item:focus-visible { outline-offset: -4px; }
.onboarding-target { clip-path: none !important; }
@media (max-width: 760px) {
  #fallback-style-controls { width: 100%; margin: 4px 0 0; padding: 10px 0; }
  .sidebar-bottom:has(#fallback-style-controls) { display: block; }
  #fallback-style-controls .quality-options { width: 100%; }
}