:root {
  --ink: #162224;
  --paper: #d8cba8;
  --paper-dark: #a99164;
  --red: #c24a37;
  --red-dark: #72251f;
  --gold: #ddb765;
  --panel: #172526;
  --panel-deep: #0d1718;
  --muted: #9ba89b;
  --line: rgba(213, 188, 125, .3);
  --sans: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --serif: Georgia, "Songti SC", "STSong", serif;
}

* { box-sizing: border-box; }

html { color-scheme: dark; background: #0b1213; }

body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  color: #eee4cb;
  background:
    radial-gradient(circle at 76% -12%, rgba(94, 116, 99, .35), transparent 38%),
    radial-gradient(circle at 5% 38%, rgba(85, 54, 38, .16), transparent 28%),
    linear-gradient(150deg, #182627 0, #0b1213 68%);
  font-family: var(--serif);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: .22;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px),
    linear-gradient(90deg, transparent 49.9%, rgba(223, 186, 101, .05) 50%, transparent 50.1%);
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.atmosphere::before,
.atmosphere::after {
  position: absolute;
  width: 55vw;
  height: 28vw;
  border-radius: 50%;
  content: "";
  filter: blur(70px);
  background: rgba(143, 159, 133, .08);
  animation: fog-drift 18s ease-in-out infinite alternate;
}

.atmosphere::before { top: 18%; left: -18%; }
.atmosphere::after { right: -16%; bottom: 8%; animation-delay: -8s; }

@keyframes fog-drift { to { transform: translate3d(8vw, 2vw, 0) scale(1.15); } }

button, input, select { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.command-room { width: min(100%, 1560px); margin: 0 auto; padding: 24px 28px 44px; }

.masthead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(218, 190, 117, .42);
}

.eyebrow {
  margin: 0 0 6px;
  color: #c9aa67;
  font: 700 10px/1.3 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}

h1 { margin: 0; font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: .15em; }
h1 span { margin-left: 8px; color: #9eada0; font-size: 15px; font-weight: 400; letter-spacing: .08em; }

.status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #aebaa9;
  font: 11px var(--sans);
  letter-spacing: .06em;
  white-space: nowrap;
}

.status i { width: 1px; height: 12px; background: rgba(210, 188, 133, .35); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #d14b38; box-shadow: 0 0 12px #e94d39; animation: signal 2.2s ease-in-out infinite; }
.sound-toggle { min-height: 30px; margin-left: 5px; padding: 4px 8px; color: #d8bd76; border: 1px solid rgba(216,189,118,.35); background: rgba(10,18,19,.5); font: 8px var(--sans); letter-spacing: .08em; }
.sound-toggle[aria-pressed="false"] { color: #78877f; border-color: #45534d; }
@keyframes signal { 50% { opacity: .48; box-shadow: 0 0 4px #e94d39; } }

.archive-strap {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 126px;
  gap: 24px;
  align-items: center;
  margin-top: 18px;
  padding: 18px 22px;
  overflow: hidden;
  border: 1px solid rgba(213, 188, 125, .26);
  background:
    linear-gradient(90deg, rgba(204, 183, 130, .06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(0deg, rgba(204, 183, 130, .04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(115deg, rgba(45, 66, 63, .96), rgba(16, 28, 29, .94));
  box-shadow: 0 16px 42px rgba(0,0,0,.2);
}

.archive-strap::after {
  position: absolute;
  right: 8%;
  width: 240px;
  height: 240px;
  content: "07";
  color: rgba(225, 194, 117, .035);
  font: 700 190px/1 var(--sans);
  transform: rotate(-8deg);
}

.lore-index { position: relative; z-index: 1; padding: 10px 0; text-align: center; border-right: 1px solid rgba(219, 191, 122, .25); }
.lore-index span { display: block; color: #9fae9f; font: 700 9px var(--sans); letter-spacing: .18em; }
.lore-index strong { display: block; margin-top: 4px; color: #d9ba70; font: 400 42px/1 var(--serif); }
.lore-copy { position: relative; z-index: 1; }
.lore-copy h2 { max-width: 860px; margin: 0 0 7px; font-size: clamp(17px, 2vw, 24px); font-weight: 400; line-height: 1.25; }
.lore-copy > p:last-child { max-width: 900px; margin: 0; color: #afbaad; font-size: 12px; line-height: 1.55; }
.mission-seal { position: relative; z-index: 1; padding: 13px 8px; color: #c5a65f; text-align: center; border: 1px solid rgba(207, 169, 86, .46); transform: rotate(1.5deg); }
.mission-seal span { display: block; font: 9px var(--sans); letter-spacing: .14em; }
.mission-seal b { display: block; margin-top: 5px; font-size: 14px; font-weight: 400; letter-spacing: .08em; }

.briefing {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 14px 0 0;
  padding: 12px 16px;
  color: #d9d0b9;
  border-left: 3px solid var(--red);
  background: rgba(4, 10, 10, .37);
}

.briefing-heading { display: flex; flex-direction: column; gap: 3px; }
.briefing-heading small { color: #76857d; font: 9px var(--sans); }
.briefing > p { margin: 0; font-size: 13px; line-height: 1.5; }
.telegraph-label { color: #e3be70; font: 700 10px var(--sans); letter-spacing: .12em; white-space: nowrap; }
.text-button { min-height: 38px; padding: 0 8px; color: #d8b965; border: 0; background: transparent; font: 11px var(--sans); text-decoration: underline; }

.campaign-panel { margin: 12px 0; border: 1px solid rgba(205,183,128,.24); background: rgba(7,15,16,.5); }
.campaign-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; padding: 7px 11px; border-bottom: 1px solid rgba(205,183,128,.15); }
.campaign-heading > div:first-child { display: flex; align-items: baseline; gap: 9px; }
.campaign-heading span { color: #d7bd7b; font: 700 9px var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.campaign-heading small { color: #6f7e77; font: 8px var(--sans); }
.campaign-score { display: flex; align-items: center; gap: 8px; }
.campaign-score .text-button { min-height: 30px; font-size: 9px; }
.mission-select { display: grid; grid-template-columns: repeat(3, 1fr); }
.mission-card { position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 2px 9px; min-height: 56px; padding: 9px 12px; color: #89978e; text-align: left; border: 0; border-right: 1px solid rgba(205,183,128,.13); background: transparent; font-family: var(--sans); }
.mission-card:last-child { border-right: 0; }
.mission-card > span { grid-row: 1 / 3; align-self: center; color: #d0b36d; font: 400 19px var(--serif); }
.mission-card b { align-self: end; color: #bdc6b9; font-size: 10px; letter-spacing: .08em; }
.mission-card small { color: #66756e; font-size: 8px; }
.mission-card i { grid-column: 3; grid-row: 1 / 3; align-self: center; padding: 4px 6px; color: #8b9a90; border: 1px solid #405049; font: normal 8px var(--sans); white-space: nowrap; }
.mission-card.active { background: linear-gradient(90deg, rgba(213,181,103,.12), rgba(213,181,103,.02)); box-shadow: inset 3px 0 #d4b56a; }
.mission-card.active b, .mission-card.complete b { color: #e5cd91; }
.mission-card.complete i { color: #ddbc6d; border-color: rgba(221,188,109,.45); }
.mission-card.locked { cursor: not-allowed; filter: grayscale(.65); opacity: .48; }
.mission-card.locked::after { position: absolute; inset: 0; content: ""; background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(0,0,0,.08) 9px 10px); pointer-events: none; }

.mission-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 12px 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(205, 183, 128, .2);
  background: rgba(7, 15, 16, .5);
}

.mission-progress li { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 12px; color: #61716a; font: 10px var(--sans); letter-spacing: .08em; }
.mission-progress li + li { border-left: 1px solid rgba(205, 183, 128, .14); }
.mission-progress li::after { position: absolute; right: 8px; width: 24%; height: 1px; content: ""; background: rgba(205,183,128,.15); }
.mission-progress span { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border: 1px solid #4d5c55; border-radius: 50%; font-size: 9px; }
.mission-progress b { position: relative; z-index: 1; padding-right: 8px; background: #101a1b; font-weight: 600; white-space: nowrap; }
.mission-progress li.active, .mission-progress li.done { color: #ddc27f; }
.mission-progress li.active span { color: #14201f; border-color: var(--gold); background: var(--gold); box-shadow: 0 0 18px rgba(221,183,101,.23); }
.mission-progress li.done span { border-color: #8da089; }

.workbench { display: grid; grid-template-columns: 260px minmax(560px, 1fr) 290px; grid-template-areas: "messages map fire"; gap: 14px; }
.panel { min-width: 0; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(30, 45, 45, .98), rgba(13, 24, 25, .98)); box-shadow: 0 14px 34px rgba(0,0,0,.24); }
.panel-heading { display: flex; justify-content: space-between; padding: 11px 13px; color: #dcc585; border-bottom: 1px solid rgba(205,183,128,.23); font: 700 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.panel-heading small { color: #82918b; letter-spacing: 0; }

.messages { grid-area: messages; display: flex; min-height: 650px; flex-direction: column; }
.telegram { position: relative; margin: 12px 12px 3px; padding: 12px 11px 10px; color: #2a2a21; background: linear-gradient(145deg, #ddcfa8, #caba91); box-shadow: 2px 3px 7px #0d1415; transform: rotate(-.35deg); }
.telegram::after { position: absolute; right: 8px; bottom: 7px; width: 30px; height: 30px; content: ""; opacity: .18; border: 2px solid #8a3329; border-radius: 50%; }
.telegram:nth-of-type(3) { transform: rotate(.3deg); }
.telegram-from { display: block; color: #755d32; font: 700 10px var(--sans); letter-spacing: .1em; }
.telegram-time { display: block; margin-top: 3px; color: #887955; font: 8px var(--sans); }
.telegram p { position: relative; z-index: 1; margin: 7px 0 0; font-size: 13px; line-height: 1.5; }
.telegram strong { color: #a12f29; font-size: 16px; }
.signal-quality { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; margin-top: 9px; color: #776d52; font: 7px var(--sans); }
.signal-quality i { height: 3px; overflow: hidden; background: rgba(73,65,46,.18); }
.signal-quality i b { display: block; width: 80%; height: 100%; background: #7b6d46; }
.signal-quality em { font-style: normal; white-space: nowrap; }

.weather-card, .keeper-note { margin: 9px 12px 0; padding: 11px; }
.weather-card { border: 1px dashed #6a816f; background: rgba(98,125,107,.12); }
.weather-card span, .keeper-note span { display: block; color: #adbdac; font: 9px var(--sans); letter-spacing: .13em; }
.weather-card strong { display: block; margin: 5px 0; color: #e2c379; font-size: 14px; }
.weather-card p, .keeper-note p { margin: 0; color: #b7c0b1; font-size: 11px; line-height: 1.45; }
.keeper-note { border-left: 2px solid #7d5944; background: rgba(106, 72, 50, .12); }
.keeper-note p { margin-top: 5px; color: #9daa9e; font-style: italic; }
.log-wrap { margin-top: auto; border-top: 1px solid rgba(205,183,128,.23); }
.fire-log { max-height: 155px; margin: 0; padding: 10px 13px 12px 29px; overflow: auto; color: #bac4b5; font-size: 11px; line-height: 1.5; }
.fire-log li + li { margin-top: 6px; }
.fire-log .hit { color: #efcb79; }
.fire-log .warning { color: #d9836d; }

.map-panel { grid-area: map; display: flex; flex-direction: column; }
.map-toolbar, .map-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; color: #bbc1ae; font: 10px var(--sans); letter-spacing: .04em; }
.map-toolbar { border-bottom: 1px solid rgba(205,183,128,.23); }
.map-footer { border-top: 1px solid rgba(205,183,128,.23); }
.map-title { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.map-title span { color: #d8c27f; font-weight: 700; letter-spacing: .11em; }
.map-title small { color: #73827a; font-size: 8px; }
.tool-group { display: flex; gap: 5px; }
.tool { min-height: 36px; padding: 6px 9px; color: #bac3b4; border: 1px solid #53645d; background: #203132; font: 10px var(--sans); white-space: nowrap; }
.tool.active { color: #17201f; border-color: #d8bd76; background: #d8bd76; box-shadow: 0 0 15px rgba(216,189,118,.12); }
.tool.danger { color: #cf8172; border-color: #8d5046; }

.instrument-deck { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 64px; padding: 7px 11px; border-bottom: 1px solid rgba(205,183,128,.19); background: linear-gradient(90deg, rgba(6,13,14,.5), rgba(40,58,54,.22)); }
.compass-dial { position: relative; display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid #778375; border-radius: 50%; background: radial-gradient(circle, #172425 0 48%, #0d1718 50%); box-shadow: inset 0 0 0 4px #111d1e, 0 2px 7px rgba(0,0,0,.3); }
.compass-dial::before, .compass-dial::after { position: absolute; content: ""; background: rgba(194,174,123,.28); }
.compass-dial::before { width: 1px; height: 42px; }
.compass-dial::after { width: 42px; height: 1px; }
.compass-dial > span { position: absolute; top: 3px; z-index: 2; color: #d7b76d; font: 700 7px var(--sans); }
.compass-dial > i { position: absolute; z-index: 1; width: 2px; height: 34px; background: linear-gradient(#c94b37 0 48%, #b7ab86 49%); transform: rotate(var(--bearing)); transition: transform .12s linear; }
.compass-dial > i::before { position: absolute; top: -3px; left: -2px; width: 0; height: 0; content: ""; border-right: 3px solid transparent; border-bottom: 6px solid #c94b37; border-left: 3px solid transparent; }
.compass-dial > b { position: absolute; z-index: 3; bottom: -3px; padding: 1px 4px; color: #e3ce98; background: #101b1c; font: 700 8px var(--sans); }
.instrument-readings { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.instrument-readings span { overflow: hidden; color: #d8c27f; font: 700 9px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.instrument-readings strong { color: #bbc5b8; font: 400 11px var(--serif); }
.instrument-readings small { color: #65756d; font: 8px var(--sans); }
.calibration { padding-left: 10px; text-align: right; border-left: 1px solid rgba(205,183,128,.18); }
.calibration span { display: block; color: #65756d; font: 7px var(--sans); letter-spacing: .08em; }
.calibration b { display: block; margin-top: 3px; color: #9dab9f; font: 9px var(--sans); }

.canvas-wrap { position: relative; flex: 1; min-height: 540px; padding: 12px; overflow: hidden; background: #0b1313; }
.canvas-wrap::before { position: absolute; inset: 12px; z-index: 1; content: ""; pointer-events: none; box-shadow: inset 0 0 45px rgba(63,49,30,.18); }
.canvas-wrap canvas { display: block; width: 100%; height: auto; max-height: calc(100vh - 310px); margin: auto; touch-action: none; background: var(--paper); cursor: crosshair; }
.canvas-wrap.impact-flash { animation: impact-panel .45s ease-out; }
@keyframes impact-panel { 20% { box-shadow: inset 0 0 80px rgba(239,196,99,.5); } }
.map-stamp { position: absolute; top: 23px; right: 24px; z-index: 2; color: rgba(46, 63, 48, .7); text-align: center; font: 700 10px var(--sans); pointer-events: none; }
.map-stamp span { font-size: 24px; }
.map-readout { position: absolute; left: 24px; bottom: 22px; z-index: 2; max-width: calc(100% - 48px); padding: 8px 10px; color: #eef0d8; border-left: 2px solid #d1ae64; background: rgba(13,25,24,.88); font: 10px/1.35 var(--sans); pointer-events: none; backdrop-filter: blur(5px); }

.fire-control { grid-area: fire; padding-bottom: 13px; }
.console-intro { display: flex; justify-content: space-between; gap: 8px; margin: 11px 12px 0; padding: 9px 10px; border: 1px solid rgba(131, 156, 138, .25); background: rgba(93, 119, 100, .08); }
.console-intro span { color: #7f9087; font: 8px var(--sans); letter-spacing: .08em; }
.console-intro strong { color: #dec27d; font: 9px var(--sans); letter-spacing: .08em; }
.firing-table { margin: 11px 12px; color: #d2c5a0; }
.table-title { margin-bottom: 7px; color: #b5c0a8; font: 700 9px var(--sans); letter-spacing: .15em; text-transform: uppercase; }
table { width: 100%; border-collapse: collapse; font-size: 9px; }
th { color: #d1ae64; font-weight: normal; text-align: left; }
td, th { padding: 5px 3px; border-bottom: 1px solid rgba(202,184,138,.16); }
.recommended { color: #ead49d; background: rgba(214, 168, 73, .055); }
.control-grid { display: grid; grid-template-columns: .8fr 1fr; }
.fire-control label { display: block; margin: 8px 12px; color: #aeb9a9; font: 10px var(--sans); letter-spacing: .06em; }
.fire-control label.wide { grid-column: 1 / -1; }
.fire-control input, .fire-control select { width: 100%; min-height: 42px; margin-top: 5px; padding: 9px; color: #f0dfb4; border: 1px solid #56645b; border-radius: 0; outline: none; background: #101c1d; font: 14px var(--serif); }
.fire-control input:focus, .fire-control select:focus { border-color: #d0ac61; box-shadow: inset 0 0 0 1px rgba(208,172,97,.25); }
.fire-button { width: calc(100% - 24px); min-height: 48px; margin: 9px 12px 7px; padding: 13px 10px; color: #f7ead0; border: 1px solid #e6be6d; background: linear-gradient(#bd4c38, #76251e); box-shadow: inset 0 1px rgba(255,255,255,.25), 0 5px 15px rgba(0,0,0,.35); font: 700 11px var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.fire-button:hover { filter: brightness(1.1); }
.fire-button:active { transform: translateY(1px); }
.fire-button:disabled { cursor: wait; filter: grayscale(.3); opacity: .72; }
.control-note { margin: 7px 12px 0; color: #819087; font-size: 10px; line-height: 1.45; }

.correction-console { margin: 9px 12px; padding: 9px; border: 1px solid rgba(205,183,128,.18); background: rgba(5,12,13,.28); }
.correction-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.correction-heading span { color: #cdb571; font: 700 8px var(--sans); letter-spacing: .1em; }
.correction-heading small { color: #74837b; font: 7px var(--sans); }
.correction-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 5px; align-items: stretch; }
.correction-row + .correction-row { margin-top: 5px; }
.correction-row button { min-height: 39px; padding: 4px; color: #acb8ab; border: 1px solid #465750; background: #172526; font: 8px/1.1 var(--sans); }
.correction-row button:active { color: #17201e; background: #d8bd76; }
.correction-row button b { color: #d9bc73; font-size: 9px; }
.correction-row div { display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(205,183,128,.13); background: #0e191a; }
.correction-row div span { color: #65746d; font: 7px var(--sans); }
.correction-row output { margin-top: 2px; color: #e0ca91; font: 11px var(--serif); }
.suggestion-button { width: 100%; min-height: 38px; margin-top: 7px; color: #1a2421; border: 1px solid #dbbd70; background: #d5b76e; font: 700 9px var(--sans); letter-spacing: .06em; }
.suggestion-button[hidden] { display: none; }

body.shockwave::after { position: fixed; inset: 0; z-index: 50; content: ""; pointer-events: none; background: rgba(238,205,121,.12); animation: screen-shock .36s ease-out both; }
@keyframes screen-shock { from { opacity: 1; } to { opacity: 0; } }

.story-reveal { display: grid; grid-template-columns: 120px minmax(0, 1fr) 110px; gap: 22px; align-items: center; margin-top: 16px; padding: 22px; border: 1px solid rgba(219, 184, 100, .42); background: linear-gradient(120deg, rgba(107, 53, 37, .24), rgba(22, 39, 39, .94)); box-shadow: 0 18px 50px rgba(0,0,0,.25); animation: reveal-in .6s ease both; }
.story-reveal[hidden] { display: none; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(12px); } }
.reveal-code { color: #d7b35f; font: 9px/1.5 var(--sans); letter-spacing: .12em; }
.story-reveal h2 { margin: 0 0 6px; font-size: 21px; font-weight: 400; }
.story-reveal p:last-child { margin: 0; color: #acb8aa; font-size: 12px; line-height: 1.5; }
.next-file { display: flex; align-items: start; flex-direction: column; padding-left: 18px; color: #7d8c84; border-left: 1px solid rgba(205,183,128,.2); font: 9px/1.7 var(--sans); letter-spacing: .1em; }
.next-file b { color: #d2b56f; font-size: 11px; }
.next-file .text-button { padding: 5px 0 0; font-size: 8px; text-align: left; }

dialog { width: min(510px, calc(100vw - 28px)); padding: 26px; color: #e4d7b5; border: 1px solid #c5a561; background: #1a2929; box-shadow: 0 22px 70px #000; }
dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(4px); }
dialog h2 { margin: 2px 0 14px; font-size: 23px; }
dialog p:not(.eyebrow) { color: #c8cbb8; font-size: 13px; line-height: 1.65; }
.dialog-close { float: right; width: 42px; height: 42px; color: #d6bd7f; border: 0; background: none; font-size: 26px; }
.fire-button.small { width: auto; margin: 10px 0 0; padding: 11px 18px; }

@media (max-width: 1220px) {
  .command-room { padding: 18px; }
  .workbench { grid-template-columns: 230px minmax(470px, 1fr) 260px; }
  .canvas-wrap { padding: 8px; }
  .canvas-wrap::before { inset: 8px; }
  .tool { padding-inline: 7px; }
}

@media (max-width: 960px) {
  .archive-strap { grid-template-columns: 76px minmax(0, 1fr); }
  .mission-seal { display: none; }
  .workbench { grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "map map" "messages fire"; }
  .messages { min-height: 500px; }
  .canvas-wrap { min-height: 480px; }
  .canvas-wrap canvas { max-height: none; }
}

@media (max-width: 700px) {
  body { background: linear-gradient(160deg, #172425, #0a1112 68%); }
  .command-room { padding: 12px 10px 32px; }
  .masthead { align-items: center; padding: 3px 2px 12px; }
  .eyebrow { font-size: 8px; letter-spacing: .14em; }
  h1 { font-size: 25px; }
  h1 span { display: block; margin: 3px 0 0; font-size: 11px; }
  .status { align-items: end; flex-direction: column; gap: 2px; font-size: 8px; }
  .status .status-dot, .status i { display: none; }
  .sound-toggle { min-height: 28px; margin: 3px 0 0; padding: 3px 7px; }

  .archive-strap { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; margin-top: 10px; padding: 14px 12px; }
  .lore-index { padding-right: 9px; }
  .lore-index strong { font-size: 31px; }
  .lore-copy h2 { margin-bottom: 5px; font-size: 16px; line-height: 1.35; }
  .lore-copy > p:last-child { display: -webkit-box; overflow: hidden; font-size: 10px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

  .briefing { grid-template-columns: 1fr auto; gap: 8px; margin-top: 9px; padding: 11px 11px; }
  .briefing-heading { grid-column: 1; }
  .briefing > p { grid-column: 1 / -1; grid-row: 2; font-size: 11px; }
  .briefing .text-button { grid-column: 2; grid-row: 1; min-height: 32px; }

  .campaign-panel { margin: 9px 0; overflow: hidden; }
  .campaign-heading { padding: 6px 9px; }
  .campaign-heading > div:first-child { align-items: start; flex-direction: column; gap: 2px; }
  .campaign-heading small { font-size: 7px; }
  .campaign-score { flex-direction: column; gap: 0; }
  .campaign-score .text-button { min-height: 22px; }
  .mission-select { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .mission-select::-webkit-scrollbar { display: none; }
  .mission-card { min-width: 74%; flex: 0 0 74%; scroll-snap-align: start; }

  .mission-progress { margin: 9px 0; }
  .mission-progress li { justify-content: center; min-height: 39px; padding: 7px 3px; }
  .mission-progress li::after { display: none; }
  .mission-progress span { width: 20px; height: 20px; }
  .mission-progress b { display: none; }

  .workbench { display: grid; grid-template-columns: 1fr; grid-template-areas: "map" "messages" "fire"; gap: 10px; }
  .panel { box-shadow: 0 9px 26px rgba(0,0,0,.2); }
  .panel-heading { min-height: 40px; align-items: center; }

  .map-panel { overflow: hidden; }
  .map-toolbar { align-items: stretch; flex-direction: column; gap: 7px; padding: 9px; }
  .map-title { flex-direction: row; align-items: center; justify-content: space-between; }
  .tool-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .tool { min-width: 0; min-height: 42px; padding: 6px 3px; font-size: 9px; }
  .instrument-deck { grid-template-columns: 55px minmax(0,1fr); min-height: 62px; padding: 6px 9px; }
  .instrument-readings small { white-space: normal; }
  .calibration { display: none; }
  .canvas-wrap { min-height: 0; padding: 6px; }
  .canvas-wrap::before { inset: 6px; }
  .canvas-wrap canvas { width: 100%; max-height: none; }
  .map-readout { position: static; max-width: none; min-height: 40px; margin-top: 6px; padding: 7px 9px; font-size: 9px; }
  .map-stamp { top: 16px; right: 16px; }
  .map-footer { align-items: start; flex-direction: column; gap: 3px; padding: 8px 10px; }
  #measurement { color: #dfc37c; }

  .messages { min-height: 0; }
  .telegram { margin-inline: 10px; }
  .weather-card, .keeper-note { margin-inline: 10px; }
  .log-wrap { margin-top: 12px; }
  .fire-log { max-height: 130px; }

  .console-intro { min-height: 38px; align-items: center; }
  .firing-table { padding: 9px; overflow: hidden; border: 1px solid rgba(205,183,128,.12); background: rgba(6,13,14,.2); }
  table { font-size: 9px; }
  .control-grid { grid-template-columns: .72fr 1fr 1fr; }
  .fire-control label { margin: 7px 10px; }
  .fire-control input, .fire-control select { min-height: 46px; font-size: 16px; }
  .fire-button { position: relative; min-height: 54px; margin-inline: 10px; width: calc(100% - 20px); font-size: 12px; }
  .control-note { margin-inline: 10px; }
  .correction-console { margin-inline: 10px; padding: 8px; }
  .correction-row button { min-height: 45px; }

  .story-reveal { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; padding: 18px 15px; }
  .story-reveal h2 { font-size: 18px; }
  .next-file { padding: 9px 0 0; border-top: 1px solid rgba(205,183,128,.2); border-left: 0; }

  dialog { padding: 20px; }
}

@media (max-width: 380px) {
  .command-room { padding-inline: 7px; }
  .tool { font-size: 8px; }
  .briefing > p { font-size: 10px; }
  .control-grid { grid-template-columns: .72fr 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; }
}