:root {
  color-scheme: dark;
  --ink: #e9f4f2;
  --muted: #91a8aa;
  --panel: rgba(8, 20, 27, 0.94);
  --panel-2: rgba(15, 34, 42, 0.94);
  --line: rgba(151, 198, 198, 0.24);
  --yellow: #ffc447;
  --cyan: #5edaf1;
  --green: #8ce39d;
  --red: #ff6069;
  --orange: #ff944f;
  --violet: #c8a1ff;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #071117;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #071117; overflow: hidden; }
body { min-width: 320px; }
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
button { color: inherit; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed; z-index: 1000; left: 1rem; top: -5rem; padding: .8rem 1rem; border-radius: .5rem;
  background: #fff; color: #071117; font-weight: 900;
}
.skip-link:focus { top: 1rem; }

.plant-header {
  height: 62px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 0 18px; background: linear-gradient(180deg, #152a32, #0a171d); border-bottom: 1px solid #27424a;
  box-shadow: 0 6px 22px rgba(0,0,0,.35); position: relative; z-index: 70;
}
.back-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; font-weight: 850; width: fit-content; }
.back-link:hover { color: var(--yellow); }
.plant-brand { display: flex; align-items: center; gap: .7rem; letter-spacing: .08em; }
.plant-brand strong { display: block; font-size: .83rem; }
.plant-brand small { display: block; color: var(--muted); font-size: .62rem; margin-top: .12rem; }
.brand-gauge { width: 42px; height: 42px; border: 4px solid #80979a; border-radius: 50%; display: grid; place-items: center; background: #0b161b; box-shadow: inset 0 0 0 3px #243a40; }
.brand-gauge::before { content: ""; width: 4px; height: 12px; background: var(--yellow); transform: rotate(34deg) translateY(-4px); transform-origin: 50% 100%; border-radius: 3px; }
.brand-gauge i { width: 6px; height: 6px; background: #e4f0ef; border-radius: 50%; position: absolute; }
.header-actions { justify-self: end; display: flex; gap: .45rem; }
.header-actions button {
  border: 1px solid #39535b; background: #10232b; color: var(--ink); padding: .55rem .8rem; border-radius: .45rem;
  font-size: .72rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
}
.header-actions button:hover { border-color: var(--yellow); color: var(--yellow); }

.game-shell {
  height: calc(100vh - 62px); position: relative; display: grid;
  grid-template-columns: 230px minmax(520px, 1fr) 300px;
  grid-template-rows: 102px minmax(0, 1fr) 180px;
  grid-template-areas: "top top top" "left canvas right" "left bottom right";
  background:
    radial-gradient(circle at 52% 46%, rgba(52, 93, 93, .22), transparent 44%),
    linear-gradient(145deg, #0b1a20, #071117 60%);
}
.canvas-wrap { grid-area: canvas; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #0a161c; border: 1px solid #263d44; }
.game-canvas, .game-canvas canvas { width: 100% !important; height: 100% !important; display: block; }
.plant-stamp { position: absolute; right: 14px; bottom: 12px; display: flex; gap: .55rem; align-items: center; opacity: .72; pointer-events: none; }
.plant-stamp span { border: 1px solid #83a5a5; padding: .25rem .35rem; font: 800 .55rem/1 monospace; }
.plant-stamp strong { font: 900 .68rem/1 monospace; letter-spacing: .14em; color: var(--yellow); }

.top-hud { grid-area: top; display: grid; grid-template-columns: minmax(280px, 1.55fr) repeat(6, minmax(108px, .72fr)); gap: 8px; padding: 8px; background: #08141a; border-bottom: 1px solid #263d44; z-index: 20; }
.objective-card, .metric-card { background: linear-gradient(180deg, rgba(21,43,51,.96), rgba(10,25,31,.96)); border: 1px solid #29444b; border-radius: .5rem; padding: .62rem .72rem; min-width: 0; }
.objective-card { border-left: 4px solid var(--yellow); display: flex; flex-direction: column; justify-content: center; }
.objective-card span, .metric-card span { display: block; color: #9db2b3; font-size: .58rem; letter-spacing: .11em; font-weight: 900; }
.objective-card strong { display: block; font-size: .88rem; line-height: 1.25; margin-top: .27rem; }
.metric-card strong { display: block; font: 900 1.02rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: .28rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-card small { color: var(--cyan); font-size: .62rem; font-weight: 800; }
.metric-card[data-level="warning"] { border-color: #9d7136; }
.metric-card[data-level="critical"] { border-color: var(--red); box-shadow: inset 0 0 24px rgba(255, 69, 81, .13); }
.score-card strong { color: var(--yellow); }
.meter { height: 5px; background: #071015; border-radius: 99px; overflow: hidden; margin-top: .5rem; }
.meter i { height: 100%; width: 0; display: block; background: var(--cyan); transition: width .18s linear; }
#safety-fill { background: var(--green); }
#quality-fill { background: var(--violet); }
#pressure-fill { background: var(--orange); }
.metric-card[data-level="critical"] .meter i { background: var(--red); }

.left-console, .right-console, .bottom-console { background: var(--panel); z-index: 24; }
.left-console { grid-area: left; border-right: 1px solid #284048; padding: 10px; overflow: auto; }
.right-console { grid-area: right; border-left: 1px solid #284048; padding: 10px; overflow: auto; }
.bottom-console { grid-area: bottom; border-top: 1px solid #284048; padding: 9px 12px 12px; overflow: hidden; }
.console-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; margin-bottom: .5rem; }
.console-heading span, .speed-panel > span { font-size: .64rem; font-weight: 950; letter-spacing: .12em; color: var(--yellow); }
.console-heading small, .speed-panel small { color: var(--muted); font-size: .56rem; }

.crew-roster { display: grid; gap: 7px; }
.crew-card { border: 1px solid #2c464e; border-radius: .45rem; background: #0c1c23; overflow: hidden; }
.crew-card button { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; gap: .55rem; align-items: center; border: 0; background: transparent; padding: .55rem; cursor: pointer; text-align: left; }
.crew-card button:hover, .crew-card button.is-selected { background: linear-gradient(90deg, rgba(255,196,71,.18), transparent); }
.crew-card button.is-selected { box-shadow: inset 3px 0 var(--yellow); }
.crew-number { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #587079; border-radius: .35rem; color: var(--yellow); font: 900 .72rem/1 ui-monospace, monospace; }
.crew-copy strong { display: block; font-size: .74rem; }
.crew-copy small { display: block; color: var(--muted); font-size: .5rem; letter-spacing: .07em; margin-top: .12rem; }
.crew-state { font-size: .48rem; letter-spacing: .07em; font-weight: 950; color: var(--green); }
.crew-card[data-state="moving"] .crew-state { color: var(--cyan); }
.crew-card[data-state="working"] .crew-state { color: var(--yellow); }

.output-panel, .speed-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.output-panel p, .speed-panel small { color: var(--muted); line-height: 1.45; font-size: .62rem; }
.segmented-control { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.segmented-control.compact { grid-template-columns: repeat(3, 1fr); }
.segmented-control button { border: 1px solid #35515a; background: #0b1a20; color: #a8bbbc; padding: .48rem .2rem; font-size: .55rem; font-weight: 950; cursor: pointer; border-radius: .35rem; }
.segmented-control button:hover, .segmented-control button.is-active { color: #081117; background: var(--yellow); border-color: var(--yellow); }

.detail-panel { background: linear-gradient(180deg, #132a32, #0b1b22); border: 1px solid #2b4a53; border-radius: .58rem; padding: .9rem; min-height: 330px; box-shadow: var(--shadow); }
.detail-eyebrow { color: var(--yellow); font-size: .58rem; letter-spacing: .11em; font-weight: 950; }
.detail-panel h2 { font-size: 1.22rem; margin: .4rem 0 .6rem; line-height: 1.08; }
.detail-body { color: #b7c6c6; font-size: .73rem; line-height: 1.52; }
.detail-body p { margin: 0 0 .7rem; }
.detail-body dl { margin: .8rem 0; display: grid; gap: .38rem; }
.detail-body dl div { display: grid; grid-template-columns: 1fr auto; gap: .6rem; padding: .42rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.detail-body dt { color: var(--muted); }
.detail-body dd { margin: 0; font-weight: 850; text-align: right; }
.match { color: var(--green) !important; }
.mismatch { color: var(--red) !important; }
.warning-copy { color: #ffc38a; border-left: 3px solid var(--orange); padding-left: .65rem; }
.preview-note { color: var(--muted); font-size: .62rem; }

.action-button { display: inline-flex; justify-content: center; align-items: center; min-height: 43px; border-radius: .45rem; padding: .7rem 1rem; font-weight: 900; letter-spacing: .03em; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.action-button.primary { background: var(--yellow); color: #121006; }
.action-button.primary:hover { background: #ffd36b; }
.action-button.secondary { color: var(--ink); border-color: #506a71; background: #11252c; }
.action-button.secondary:hover { border-color: var(--yellow); }
.action-button.text-action { background: transparent; color: var(--muted); }
.valve-button { background: var(--cyan); color: #061216; width: 100%; }
.detail-panel .action-button { width: 100%; margin-top: .55rem; }

.incident-queue { height: calc(100% - 22px); display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 8px; overflow: auto; align-content: start; }
.queue-clear { grid-column: 1 / -1; border: 1px dashed #38545c; border-radius: .45rem; color: var(--muted); padding: .75rem; margin: 0; font-size: .72rem; }
.incident-row { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .55rem; min-height: 58px; text-align: left; border: 1px solid #35515a; border-radius: .48rem; background: #0c1e25; padding: .55rem .6rem .68rem; cursor: pointer; overflow: hidden; }
.incident-row:hover, .incident-row.is-selected { border-color: var(--yellow); background: #142a31; }
.incident-row[data-level="critical"] { border-color: rgba(255,96,105,.7); }
.incident-row strong { display: block; font-size: .72rem; }
.incident-row small { display: block; color: var(--muted); font-size: .55rem; margin-top: .14rem; }
.incident-assignment { font-size: .5rem; font-weight: 950; color: var(--cyan); }
.incident-row i { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--severity); background: var(--yellow); }
.incident-row[data-level="critical"] i { background: var(--red); }
.incident-symbol { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; color: var(--yellow); }
.incident-symbol::before { font: 950 .72rem/1 ui-monospace, monospace; }
.incident-symbol[data-kind="leak"]::before { content: "L"; }
.incident-symbol[data-kind="blockage"]::before { content: "B"; }
.incident-symbol[data-kind="contamination"]::before { content: "C"; }
.incident-symbol[data-kind="overheat"]::before { content: "H"; }
.incident-symbol[data-kind="power"]::before { content: "E"; }
.incident-symbol[data-kind="pest"]::before { content: "M"; }

.status-callout { position: absolute; left: 50%; top: 12px; transform: translate(-50%, -16px); opacity: 0; pointer-events: none; background: rgba(6,17,22,.94); border: 1px solid var(--yellow); color: var(--ink); border-radius: 99px; padding: .55rem .9rem; font-size: .68rem; font-weight: 850; transition: .18s ease; z-index: 50; box-shadow: var(--shadow); }
.status-callout.is-visible { opacity: 1; transform: translate(-50%, 0); }

.modal { position: fixed; inset: 62px 0 0; z-index: 100; display: grid; place-items: center; background: rgba(2,9,12,.82); backdrop-filter: blur(8px); padding: 24px; overflow: auto; }
.briefing-card { width: min(1080px, 96vw); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .72fr); border: 1px solid #49636a; background: linear-gradient(145deg, rgba(15,38,46,.98), rgba(6,18,23,.99)); box-shadow: 0 34px 120px rgba(0,0,0,.7); border-radius: .75rem; overflow: hidden; }
.briefing-copy { padding: clamp(1.4rem, 3vw, 2.4rem); }
.dispatch-label { color: var(--yellow); font-size: .66rem; font-weight: 950; letter-spacing: .13em; }
.briefing-copy h1 { font-size: clamp(2.3rem, 5vw, 4.5rem); margin: .35rem 0 .65rem; line-height: .93; letter-spacing: -.045em; }
.briefing-copy > p { max-width: 760px; color: #bfd0cf; line-height: 1.58; }
.briefing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: 1.3rem 0; }
.briefing-grid article { border: 1px solid #36535b; background: rgba(4,15,20,.55); border-radius: .5rem; padding: .8rem; }
.briefing-grid span { display: block; color: var(--cyan); font-size: .55rem; letter-spacing: .1em; font-weight: 950; margin-bottom: .38rem; }
.briefing-grid strong { font-size: .72rem; line-height: 1.4; }
.briefing-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.demo-note { font-size: .67rem; color: var(--muted) !important; }
.briefing-aside { background: #08171d; border-left: 1px solid #365058; padding: 1.5rem; }
.briefing-aside h2 { font-size: 1.08rem; margin: 1rem 0 .7rem; }
.briefing-aside ol { padding: 0; margin: 0; list-style: none; display: grid; gap: .55rem; }
.briefing-aside li { display: grid; grid-template-columns: 78px 1fr; gap: .55rem; align-items: center; color: #b7c7c7; font-size: .72rem; }
kbd { border: 1px solid #5a7379; border-bottom-width: 3px; background: #14272d; color: #fff; border-radius: .32rem; padding: .28rem .42rem; font: 800 .61rem/1 ui-monospace, monospace; text-align: center; }
.briefing-aside > p { color: var(--muted); font-size: .67rem; line-height: 1.5; border-left: 3px solid var(--green); padding-left: .65rem; margin-top: 1rem; }
.shift-map { height: 150px; position: relative; border: 1px solid #2d4a52; border-radius: .5rem; background: linear-gradient(135deg, rgba(34,75,80,.35), transparent), repeating-linear-gradient(0deg, transparent 0 24px, rgba(255,255,255,.04) 25px), repeating-linear-gradient(90deg, transparent 0 24px, rgba(255,255,255,.04) 25px); overflow: hidden; }
.shift-map span { position: absolute; z-index: 2; width: 42px; height: 28px; display: grid; place-items: center; border: 2px solid var(--yellow); background: #0b1d23; color: var(--yellow); font: 900 .58rem/1 monospace; border-radius: .3rem; }
.map-pump { left: 15px; bottom: 22px; }.map-filter { left: 78px; bottom: 22px; }.map-heater { left: 132px; top: 42px; }.map-mixer { right: 62px; bottom: 26px; }.map-tank { right: 10px; bottom: 26px; }
.shift-map i { position: absolute; left: 35px; right: 31px; bottom: 38px; height: 58px; border-left: 5px solid var(--cyan); border-top: 5px solid var(--cyan); border-right: 5px solid var(--yellow); border-bottom: 5px solid var(--yellow); opacity: .65; }

.compact-modal .modal-card { width: min(520px, 95vw); background: linear-gradient(145deg, #15303a, #08171d); border: 1px solid #49646c; border-radius: .7rem; padding: 1.4rem; box-shadow: var(--shadow); }
.modal-card h2 { font-size: 1.8rem; margin: .35rem 0 .5rem; }
.modal-card > p { color: #b9c8c7; line-height: 1.55; }
.modal-card > .action-button { width: 100%; margin-top: .55rem; }
.check-row { display: grid; grid-template-columns: 24px 1fr; gap: .65rem; align-items: start; padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer; }
.check-row input { width: 19px; height: 19px; accent-color: var(--yellow); }
.check-row strong { display: block; font-size: .8rem; }
.check-row small { display: block; color: var(--muted); font-size: .63rem; margin-top: .16rem; }
.settings-note { color: var(--muted) !important; font-size: .65rem; }
.controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.controls-grid div { display: grid; gap: .35rem; padding: .55rem; border: 1px solid #37515a; border-radius: .45rem; color: #c5d2d1; font-size: .68rem; }

.results-card { width: min(760px, 96vw); position: relative; background: linear-gradient(145deg, #16323b, #08171d); border: 1px solid #567078; border-radius: .8rem; padding: 2rem; box-shadow: var(--shadow); }
.results-card h2 { font-size: clamp(2rem, 5vw, 3.5rem); margin: .3rem 0 .5rem; }
.results-card > p { color: #bdcccb; max-width: 620px; line-height: 1.55; }
.rank-badge { position: absolute; right: 2rem; top: 1.6rem; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; border: 4px solid var(--yellow); background: #0c1e25; box-shadow: 0 0 0 7px rgba(255,196,71,.12); }
.rank-badge span { position: absolute; top: 15px; font-size: .5rem; letter-spacing: .12em; color: var(--yellow); }
.rank-badge strong { font: 950 2.8rem/1 ui-monospace, monospace; margin-top: 12px; }
.results-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; margin: 1.4rem 0; }
.results-grid article { border: 1px solid #36515a; border-radius: .5rem; padding: .75rem; background: rgba(5,16,21,.55); }
.results-grid span { display: block; color: var(--muted); font-size: .52rem; letter-spacing: .08em; font-weight: 900; }
.results-grid strong { display: block; color: var(--yellow); margin-top: .35rem; font: 900 .95rem/1.1 ui-monospace, monospace; }
.result-best { font-weight: 900; color: var(--cyan) !important; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.noscript { padding: 1rem; background: #431b20; color: #fff; }

.high-contrast { --muted: #d6e4e3; --line: rgba(255,255,255,.42); }
.high-contrast .metric-card, .high-contrast .crew-card, .high-contrast .incident-row, .high-contrast .detail-panel { border-color: #cde5e5; }
.large-text { font-size: 112%; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

@media (max-width: 1180px) {
  html, body { overflow: auto; }
  .game-shell { height: auto; min-height: calc(100vh - 62px); grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto minmax(520px, 66vh) auto auto; grid-template-areas: "top top" "canvas canvas" "left right" "bottom bottom"; }
  .top-hud { grid-template-columns: repeat(4, minmax(130px, 1fr)); overflow: auto; }
  .objective-card { grid-column: span 2; }
  .left-console, .right-console { min-height: 360px; }
  .incident-queue { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 720px) {
  .plant-header { grid-template-columns: 1fr auto; height: auto; min-height: 62px; padding: 8px 10px; }
  .plant-brand { display: none; }
  .header-actions button { padding: .5rem; font-size: .6rem; }
  .game-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(360px, 58vh) auto auto auto; grid-template-areas: "top" "canvas" "left" "right" "bottom"; }
  .top-hud { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .objective-card { grid-column: 1 / -1; }
  .left-console, .right-console { border: 0; border-top: 1px solid #284048; }
  .incident-queue { grid-template-columns: 1fr; }
  .briefing-card { grid-template-columns: 1fr; }
  .briefing-aside { border-left: 0; border-top: 1px solid #365058; }
  .briefing-grid { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .rank-badge { position: static; float: right; margin-left: 1rem; }
  .modal { inset: 62px 0 0; padding: 10px; }
  .controls-grid { grid-template-columns: 1fr; }
}