/* Public-launch boot sequence. Presentation only; it never blocks game input. */
.boot-screen {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  overflow: hidden; pointer-events: none; background:
    radial-gradient(circle at 50% 44%, rgba(28,77,88,.28), transparent 34%),
    linear-gradient(180deg, #02070b 0%, #061018 100%);
  opacity: 1; visibility: visible; transition: opacity .55s ease, visibility .55s step-end;
}
.boot-screen.loaded { opacity: 0; visibility: hidden; }
.boot-noise { position:absolute; inset:-30%; opacity:.13; background-image:
  repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.025) 2px 3px);
  animation: bootScan 2.2s linear infinite; }
.boot-grid { position:absolute; inset:-10%; opacity:.25; transform: perspective(700px) rotateX(62deg) translateY(18%);
  background-image: linear-gradient(rgba(108,196,209,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,196,209,.16) 1px, transparent 1px);
  background-size: 54px 54px; mask-image: linear-gradient(to bottom, transparent, black 28%, black 72%, transparent); }
.boot-core { position:relative; width:min(620px,72vw); display:grid; justify-items:center; text-align:center; }
.boot-mark { position:relative; width:82px; height:82px; margin-bottom:24px; border:1px solid rgba(107,217,189,.38);
  border-radius:24px; box-shadow:0 0 80px rgba(107,217,189,.10), inset 0 0 42px rgba(107,217,189,.05); transform:rotate(45deg); }
.boot-mark span { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 18px rgba(107,217,189,.85); }
.boot-mark span:nth-child(1){left:14px;top:14px}.boot-mark span:nth-child(2){right:14px;top:14px}.boot-mark span:nth-child(3){right:14px;bottom:14px}.boot-mark span:nth-child(4){left:14px;bottom:14px}
.boot-kicker { color:#6d8d93; font-size:10px; font-weight:750; letter-spacing:.25em; }
.boot-title { margin-top:8px; font-size:clamp(48px,7vw,88px); line-height:.9; font-weight:900; letter-spacing:.12em;
  text-indent:.12em; color:#eff8f6; text-shadow:0 0 40px rgba(108,196,209,.08); }
.boot-status { width:min(430px,68vw); margin-top:30px; color:#78969b; font-size:8px; letter-spacing:.16em; }
.boot-status span { display:block; margin-bottom:9px; }
.boot-status b { display:block; height:2px; transform-origin:left center; background:linear-gradient(90deg,var(--cyan),var(--mint));
  box-shadow:0 0 16px rgba(107,217,189,.4); animation:bootLoad 1.15s cubic-bezier(.2,.8,.2,1) both; }
.boot-credit { margin-top:42px; display:flex; align-items:center; gap:11px; padding:9px 13px; border:1px solid rgba(255,255,255,.10);
  border-radius:12px; background:rgba(255,255,255,.025); }
.boot-credit img { width:28px; height:28px; object-fit:contain; border-radius:7px; background:#fff; }
.boot-credit div { text-align:left; }
.boot-credit small { display:block; color:#69838a; font-size:7px; letter-spacing:.16em; }
.boot-credit strong { display:block; margin-top:1px; color:#dce9e7; font-size:12px; letter-spacing:.02em; }
.boot-disclaimer { margin-top:9px; color:#4d686f; font-size:8px; letter-spacing:.03em; }
@keyframes bootLoad { from { transform:scaleX(.04); opacity:.25 } to { transform:scaleX(1); opacity:1 } }
@keyframes bootScan { from { transform:translateY(0) } to { transform:translateY(24px) } }
@media (prefers-reduced-motion: reduce) {
  .boot-noise, .boot-status b { animation:none; }
  .boot-screen { transition-duration:.01ms; }
}

:root {
  color-scheme: dark;
  --bg: #061018;
  --panel: rgba(9, 24, 32, .92);
  --panel-solid: #091820;
  --line: rgba(139, 188, 194, .16);
  --line-strong: rgba(139, 188, 194, .28);
  --text: #eaf4f2;
  --muted: #8da8ad;
  --quiet: #617c82;
  --mint: #6bd9bd;
  --cyan: #6cc4d1;
  --amber: #f1b26d;
  --orange: #ff815c;
  --red: #ff655d;
  --yellow: #edd67b;
  --glass: blur(20px) saturate(120%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { min-width: 1080px; overflow-x: auto; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button:disabled { cursor: not-allowed; }
.hidden { display: none !important; }

.app-shell { min-height: 100vh; display: grid; grid-template-rows: 64px minmax(650px, calc(100vh - 204px)) 140px; background: #071118; }
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(5, 14, 20, .96); z-index: 20; }
.brand { display: flex; align-items: center; gap: 11px; letter-spacing: .08em; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(107, 217, 189, .5); border-radius: 9px; color: var(--mint); font-weight: 900; box-shadow: inset 0 0 20px rgba(107,217,189,.08), 0 0 24px rgba(107,217,189,.05); }
.brand strong { display: block; font-size: 13px; }
.brand small { display: block; margin-top: 2px; font-size: 9px; color: var(--quiet); }
.run-identity { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.run-identity span { font-size: 9px; color: var(--quiet); letter-spacing: .14em; }
.run-identity code { color: #b7d3d4; font-size: 11px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { justify-self: end; display: flex; gap: 8px; }
.quiet-button, .text-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.quiet-button { padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; font-size: 11px; }
.quiet-button:hover { border-color: var(--line); background: rgba(255,255,255,.03); color: var(--text); }
.text-button { padding: 8px 0; color: #a9c5c8; font-weight: 650; }
.text-button:hover { color: var(--text); }

.workspace { display: grid; grid-template-columns: minmax(680px, 1.65fr) minmax(400px, .85fr); min-height: 0; }
.city-stage { position: relative; min-height: 650px; overflow: hidden; border-right: 1px solid var(--line); background: #07131b; }
#city { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.city-hud { position: absolute; top: 16px; left: 18px; right: 18px; display: grid; grid-template-columns: repeat(6, minmax(82px, 1fr)); gap: 7px; pointer-events: none; }
.hud-stat { min-width: 0; padding: 9px 11px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5, 17, 23, .78); backdrop-filter: var(--glass); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.hud-stat span { display: block; font-size: 8px; letter-spacing: .12em; color: var(--quiet); white-space: nowrap; }
.hud-stat strong { display: block; margin-top: 3px; font-size: 18px; letter-spacing: -.03em; }
.hud-stat.strain strong { color: #f0be83; }
.hud-stat.ai strong { color: #ff9c73; }

.service-rail { position: absolute; top: 90px; left: 18px; width: 215px; display: grid; gap: 7px; }
.service-card { position: relative; display: grid; grid-template-columns: 28px 1fr auto; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; padding: 10px 10px 9px; text-align: left; border: 1px solid var(--line); border-radius: 11px; background: rgba(5, 17, 23, .78); backdrop-filter: var(--glass); cursor: pointer; overflow: hidden; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.service-card:hover { transform: translateX(2px); border-color: var(--line-strong); }
.service-card.selected { border-color: rgba(219, 240, 237, .62); background: rgba(17, 39, 48, .91); }
.service-card.warning { border-left-color: var(--amber); }
.service-card.danger { border-left-color: var(--red); }
.service-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 8px; color: #b8d6d6; font-size: 13px; }
.service-card-copy strong { display: block; font-size: 11px; }
.service-card-copy small { display: block; margin-top: 2px; color: var(--quiet); font-size: 7px; letter-spacing: .08em; }
.service-capacity { align-self: start; white-space: nowrap; }
.service-capacity b { font-size: 15px; }
.service-capacity small { color: var(--quiet); font-size: 9px; }
.mini-meter { grid-column: 2 / 4; height: 3px; margin-top: 4px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.mini-meter i { display: block; height: 100%; background: linear-gradient(90deg, #5fadb8, #70d6b9); }
.service-flags { grid-column: 2 / 4; min-height: 9px; color: #78999e; font-size: 7px; line-height: 1.3; letter-spacing: .06em; }

.city-caption { position: absolute; left: 18px; bottom: 18px; width: min(560px, 58%); display: grid; gap: 7px; pointer-events: none; }
.city-caption p, .objective-status { margin: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5, 17, 23, .78); backdrop-filter: var(--glass); font-size: 11px; color: #abc1c3; line-height: 1.45; }
.objective-status strong { color: var(--text); }
.objective-status.ready { border-color: rgba(107, 217, 189, .35); color: #bce5d8; }

.forecast-toggle { position: absolute; right: 18px; top: 90px; width: 170px; padding: 9px 11px; text-align: left; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(7, 23, 30, .88); cursor: pointer; backdrop-filter: var(--glass); }
.forecast-toggle span { display: block; color: var(--quiet); font-size: 7px; letter-spacing: .09em; }
.forecast-toggle strong { display: block; margin-top: 2px; font-size: 12px; }
.forecast-panel { position: absolute; top: 142px; right: 18px; width: 300px; max-height: calc(100% - 235px); padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(5, 17, 23, .86); backdrop-filter: var(--glass); transform: translateX(calc(100% + 34px)); opacity: 0; pointer-events: none; transition: transform .2s ease, opacity .2s ease; overflow: auto; }
.forecast-panel.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.forecast-panel header { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 12px; }
.forecast-panel header span, .section-kicker, .section-header span { display: block; color: var(--quiet); font-size: 7px; letter-spacing: .11em; }
.forecast-panel header strong, .section-header strong { display: block; margin-top: 2px; font-size: 12px; }
.forecast-panel header i { font-style: normal; color: var(--mint); font-size: 7px; letter-spacing: .08em; }
.forecast-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.forecast-summary div { padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.018); }
.forecast-summary small { display: block; color: var(--quiet); font-size: 6px; line-height: 1.3; }
.forecast-summary strong { display: block; margin-top: 4px; font-size: 17px; }
.forecast-summary span { display: block; color: var(--muted); font-size: 8px; }
.forecast-deltas { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 4px; }
.forecast-deltas li { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 7px; background: rgba(255,255,255,.025); font-size: 9px; }
.negative { color: #ff9077; } .positive { color: #7ae1c4; }
.forecast-safe, .forecast-ending { margin: 9px 0 0; padding: 8px; border-radius: 8px; background: rgba(107,217,189,.07); color: #a7d8ca; font-size: 9px; line-height: 1.45; }
.forecast-ending { background: rgba(255,129,92,.08); color: #dfb09d; }

.control-panel { min-height: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #0a171e 0%, #071218 100%); overflow: auto; }
.panel-section { padding: 16px 17px; border-bottom: 1px solid var(--line); }
.section-kicker { margin-bottom: 7px; }
.service-heading { display: flex; justify-content: space-between; gap: 14px; align-items: start; }
.service-heading h1 { margin: 0; font-size: 24px; line-height: 1; letter-spacing: -.035em; }
.service-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.live-dot { display: inline-flex; align-items: center; gap: 5px; color: var(--mint); font-size: 7px; letter-spacing: .1em; }
.live-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px rgba(107,217,189,.6); }
.telemetry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 13px; }
.telemetry-grid div { min-width: 0; padding: 8px 7px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.018); }
.telemetry-grid span { display: block; color: var(--quiet); font-size: 6px; letter-spacing: .08em; }
.telemetry-grid strong { display: block; margin-top: 4px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-header { display: flex; justify-content: space-between; gap: 10px; align-items: end; margin-bottom: 9px; }
.section-header small { color: var(--quiet); font-size: 7px; }
.action-list, .tool-list, .order-list { display: grid; gap: 6px; }
.action-button, .tool-button { width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 10px; text-align: left; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); cursor: pointer; transition: border-color .14s ease, background .14s ease, transform .14s ease; }
.action-button:hover:not(:disabled), .tool-button:hover:not(:disabled) { border-color: rgba(108,196,209,.42); background: rgba(108,196,209,.05); transform: translateY(-1px); }
.action-button.disabled, .tool-button.disabled { opacity: .48; }
.action-button strong, .tool-button strong { display: block; font-size: 10px; }
.action-button small, .tool-button small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.25; }
.disabled-reason { color: #967f7d !important; }
.cost { display: flex; gap: 4px; flex-shrink: 0; }
.cost b, .cost em, .one-shot { padding: 4px 5px; border-radius: 6px; background: rgba(108,196,209,.08); color: #a5cbd0; font-size: 7px; font-style: normal; }
.cost em { background: rgba(241,178,109,.08); color: #d7b083; }
.one-shot { color: var(--yellow); background: rgba(237,214,123,.07); white-space: nowrap; }
.order-card { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); }
.order-card.live { border-left: 2px solid var(--orange); }
.order-card.blocked { border-left: 2px solid var(--mint); opacity: .76; }
.order-card header { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; }
.order-card header strong { font-size: 9px; }
.order-card header b { color: var(--orange); font-size: 7px; letter-spacing: .08em; }
.order-card.blocked header b { color: var(--mint); }
.order-origin { padding: 3px 4px; border-radius: 5px; background: rgba(255,255,255,.05); color: #aac5c7; font-size: 6px; }
.order-card p { margin: 6px 0 3px; color: #a9bcbf; font-size: 8px; line-height: 1.35; }
.order-card small { color: var(--quiet); font-size: 7px; }
.empty-state { margin: 0; color: var(--quiet); font-size: 9px; line-height: 1.45; }
.round-controls { position: sticky; bottom: 0; margin-top: auto; display: grid; grid-template-columns: 120px 1fr; gap: 8px; padding: 12px 17px 15px; border-top: 1px solid var(--line); background: rgba(7, 18, 24, .96); backdrop-filter: var(--glass); }
.secondary-button, .commit-button, .start-button { border: 1px solid var(--line-strong); border-radius: 9px; cursor: pointer; }
.secondary-button { background: rgba(255,255,255,.025); color: #a9c0c2; font-size: 10px; }
.secondary-button:hover:not(:disabled) { background: rgba(255,255,255,.05); }
.secondary-button:disabled { opacity: .35; }
.commit-button { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: linear-gradient(135deg, rgba(255,126,86,.18), rgba(255,126,86,.08)); border-color: rgba(255,126,86,.38); }
.commit-button span { color: #caa89b; font-size: 8px; }
.commit-button strong { font-size: 10px; }
.commit-button:hover:not(:disabled) { background: linear-gradient(135deg, rgba(255,126,86,.28), rgba(255,126,86,.12)); }
.commit-button:disabled { opacity: .4; }

.event-strip { display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--line); background: #071219; overflow: hidden; }
.event-strip header { padding: 5px 0; }
.event-strip header span { display: block; color: var(--quiet); font-size: 7px; letter-spacing: .12em; }
.event-strip header strong { display: block; margin-top: 4px; font-size: 12px; }
#event-log { min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 7px; overflow-x: auto; }
.event { display: grid; grid-template-columns: 42px 1fr; gap: 7px; align-items: start; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.018); }
.event > span { color: var(--quiet); font-size: 6px; letter-spacing: .05em; }
.event p { margin: 0; min-width: 0; }
.event strong, .event small { display: block; overflow: hidden; text-overflow: ellipsis; }
.event strong { font-size: 8px; white-space: nowrap; }
.event small { margin-top: 3px; color: var(--quiet); font-size: 7px; line-height: 1.25; max-height: 28px; }
.event.orders { border-top-color: rgba(255,129,92,.45); }
.event.cascade { border-top-color: rgba(255,101,93,.58); }
.event.impact { border-top-color: rgba(241,178,109,.5); }
.event.ending { border-top-color: rgba(107,217,189,.5); }

.start-screen { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: 1fr auto; background: radial-gradient(circle at 18% 32%, rgba(48,104,111,.15), transparent 33%), radial-gradient(circle at 80% 76%, rgba(255,118,74,.08), transparent 28%), #061018; }
.start-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(102,160,171,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(102,160,171,.05) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.start-grid { position: relative; z-index: 1; width: min(1180px, calc(100% - 80px)); margin: auto; display: grid; grid-template-columns: 1fr 520px; gap: 90px; align-items: center; }
.start-copy { max-width: 520px; }
.eyebrow, .card-kicker, .dialog-kicker, .practice-heading span { color: var(--mint); font-size: 9px; letter-spacing: .16em; font-weight: 750; }
.start-copy h1 { margin: 8px 0 12px; font-size: clamp(68px, 8vw, 116px); line-height: .84; letter-spacing: -.075em; }
.start-copy .lead { margin: 0 0 14px; color: #d2e5e3; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
.start-copy > p:not(.lead) { max-width: 470px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.goal-card { margin: 24px 0 11px; padding: 14px 15px; border-left: 2px solid var(--mint); background: rgba(107,217,189,.045); }
.goal-card span { display: block; color: #6e9997; font-size: 7px; letter-spacing: .12em; }
.goal-card strong { display: block; margin-top: 5px; color: #cce4de; font-size: 11px; line-height: 1.45; }
.start-controls { display: grid; gap: 12px; }
.start-card, .resume-card { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(10,28,36,.78); backdrop-filter: var(--glass); box-shadow: 0 28px 80px rgba(0,0,0,.2); }
.resume-card { width: 100%; text-align: left; cursor: pointer; border-color: rgba(107,217,189,.26); }
.resume-card span, .resume-card strong, .resume-card small { display: block; }
.resume-card span { color: var(--mint); font-size: 7px; letter-spacing: .11em; }
.resume-card strong { margin-top: 4px; font-size: 14px; }
.resume-card small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.start-card h2 { margin: 6px 0 5px; font-size: 24px; letter-spacing: -.035em; }
.start-card p { margin: 0 0 15px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.start-card label { display: block; margin-bottom: 5px; color: var(--quiet); font-size: 7px; letter-spacing: .1em; }
.seed-row { display: grid; grid-template-columns: 1fr 42px; gap: 6px; }
.seed-row input { min-width: 0; height: 42px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(0,0,0,.24); color: #cbe1e0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; text-transform: uppercase; }
.seed-row button { border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(255,255,255,.03); cursor: pointer; }
.start-button { min-height: 42px; padding: 0 15px; background: linear-gradient(135deg, #1f655d, #174d50); border-color: rgba(107,217,189,.35); color: #eafff8; font-size: 10px; font-weight: 760; letter-spacing: .04em; }
.primary-start .start-button { width: 100%; margin-top: 8px; }
.start-button:hover { filter: brightness(1.1); }
.practice-block { padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7,21,28,.62); }
.practice-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.practice-heading span { color: var(--quiet); font-size: 7px; }
.practice-heading small { color: #526d72; font-size: 7px; }
.practice-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.practice-list button { min-width: 0; padding: 9px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); cursor: pointer; }
.practice-list button:hover { border-color: var(--line-strong); }
.practice-list strong { display: block; font-size: 9px; }
.practice-list small { display: block; margin-top: 3px; height: 24px; overflow: hidden; color: var(--quiet); font-size: 7px; line-height: 1.2; }
.start-screen footer { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 18px 30px; border-top: 1px solid var(--line); color: #506a70; font-size: 8px; letter-spacing: .06em; }
.start-screen footer span:last-child { text-align: right; }
.start-sound-toggle { border: 0; background: transparent; color: #789298; font: inherit; letter-spacing: .06em; cursor: pointer; }
.start-sound-toggle:hover { color: #b9cecf; }

.game-dialog { width: min(760px, calc(100vw - 80px)); padding: 24px; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(7, 21, 28, .98); color: var(--text); box-shadow: 0 40px 120px rgba(0,0,0,.55); }
.game-dialog::backdrop { background: rgba(1,8,12,.76); backdrop-filter: blur(7px); }
.game-dialog h2 { margin: 7px 0 7px; font-size: 28px; letter-spacing: -.035em; }
.game-dialog > p { margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.draft-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 17px 0 10px; }
.draft-card { min-height: 180px; padding: 14px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(160deg, rgba(108,196,209,.06), rgba(255,255,255,.016)); cursor: pointer; }
.draft-card:hover { border-color: rgba(107,217,189,.4); transform: translateY(-2px); }
.draft-kicker { display: block; color: var(--quiet); font-size: 7px; letter-spacing: .1em; }
.draft-card strong { display: block; margin-top: 14px; font-size: 14px; }
.draft-card p { min-height: 54px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.draft-choose { display: block; margin-top: 16px; color: var(--mint); font-size: 8px; font-weight: 700; }
.help-dialog { width: min(880px, calc(100vw - 80px)); }
.help-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 15px 0 20px; }
.help-columns section { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }
.help-columns h3 { margin: 0 0 6px; font-size: 10px; }
.help-columns p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.help-dialog .start-button { float: right; }
.result-dialog { width: min(690px, calc(100vw - 80px)); }
.result-dialog h2 { font-size: 38px; }
.result-dialog h2.win { color: var(--mint); }
.result-dialog h2.collapse { color: var(--red); }
.result-dialog h2.deadline { color: var(--amber); }
.result-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 15px 0; }
.result-stats div { padding: 10px; border: 1px solid var(--line); border-radius: 9px; }
.result-stats small { display: block; color: var(--quiet); font-size: 7px; }
.result-stats strong { display: block; margin-top: 4px; font-size: 18px; }
.result-events { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 5px; }
.result-events li { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 8px 9px; border-bottom: 1px solid var(--line); }
.result-events b { font-size: 9px; }
.result-events span { color: var(--muted); font-size: 8px; }
.result-actions { display: grid; grid-template-columns: 140px 1fr auto; gap: 7px; min-height: 42px; }

.toast { position: fixed; z-index: 200; left: 50%; bottom: 24px; max-width: 540px; padding: 11px 14px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(6,20,27,.96); box-shadow: 0 15px 50px rgba(0,0,0,.4); color: #c9dddc; font-size: 10px; transition: transform .18s ease, opacity .18s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.danger { border-color: rgba(255,101,93,.45); }
.toast.warning { border-color: rgba(241,178,109,.45); }
.toast.success { border-color: rgba(107,217,189,.45); }

@media (max-width: 1220px) {
  body { min-width: 960px; }
  .workspace { grid-template-columns: minmax(590px, 1.45fr) 390px; }
  .service-rail { width: 192px; }
  .forecast-panel { width: 270px; }
  .telemetry-grid { grid-template-columns: repeat(2, 1fr); }
  .start-grid { width: calc(100% - 50px); gap: 45px; grid-template-columns: 1fr 470px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}


/* Guided training */
.tutorial-start-card {
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid rgba(107,217,189,.26);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(107,217,189,.07), rgba(10,28,36,.72));
  cursor: pointer;
}
.tutorial-start-card:hover {
  border-color: rgba(107,217,189,.48);
  background: linear-gradient(145deg, rgba(107,217,189,.11), rgba(10,28,36,.78));
}
.tutorial-start-card span,
.tutorial-start-card strong,
.tutorial-start-card small,
.tutorial-start-card b { display: block; }
.tutorial-start-card span { color: var(--mint); font-size: 7px; letter-spacing: .13em; font-weight: 760; }
.tutorial-start-card strong { margin-top: 4px; font-size: 14px; }
.tutorial-start-card small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.tutorial-start-card b { margin-top: 9px; color: #bde8db; font-size: 8px; letter-spacing: .05em; }

.tutorial-panel {
  padding: 14px 17px 15px;
  border-bottom: 1px solid rgba(107,217,189,.24);
  background:
    radial-gradient(circle at 100% 0, rgba(107,217,189,.07), transparent 42%),
    rgba(8,25,32,.94);
}
.tutorial-panel.complete {
  border-bottom-color: rgba(107,217,189,.54);
  box-shadow: inset 3px 0 0 rgba(107,217,189,.52);
}
.tutorial-header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.tutorial-header span { display: block; color: var(--mint); font-size: 7px; letter-spacing: .13em; }
.tutorial-header strong { display: block; margin-top: 3px; font-size: 15px; letter-spacing: -.02em; }
.tutorial-header .quiet-button { padding-top: 2px; }
#tutorial-task { margin: 9px 0 10px; color: #aec6c7; font-size: 9px; line-height: 1.48; }
.tutorial-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.tutorial-checks li {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 6px;
  align-items: start;
  color: #809ca0;
  font-size: 8px;
  line-height: 1.35;
}
.tutorial-checks li span {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: #759096;
  font-size: 8px;
}
.tutorial-checks li.done { color: #c0dad4; }
.tutorial-checks li.done span {
  border-color: rgba(107,217,189,.48);
  background: rgba(107,217,189,.09);
  color: var(--mint);
}
.tutorial-hint {
  margin-top: 9px;
  padding: 8px 9px;
  border-left: 2px solid var(--yellow);
  background: rgba(237,214,123,.045);
  color: #c8bd91;
  font-size: 8px;
  line-height: 1.45;
}
.tutorial-actions {
  display: grid;
  grid-template-columns: 72px 72px 1fr;
  gap: 6px;
  margin-top: 10px;
  min-height: 34px;
}
.tutorial-actions .secondary-button,
.tutorial-actions .start-button {
  min-height: 34px;
  padding: 0 8px;
  font-size: 8px;
}
.tutorial-actions .start-button:disabled { opacity: .35; cursor: not-allowed; filter: none; }


/* Stage 4 consequence feedback */
.resolution-feedback {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 104px;
  width: min(430px, calc(100% - 520px));
  min-width: 300px;
  padding: 10px 14px 11px;
  transform: translate(-50%, -10px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(130, 178, 188, .20);
  border-radius: 11px;
  background: rgba(5, 17, 23, .90);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}
.resolution-feedback.show { opacity: 1; transform: translate(-50%, 0); }
.resolution-feedback span,
.resolution-feedback strong,
.resolution-feedback small { display: block; }
.resolution-feedback span {
  color: #7f9ba0;
  font-size: 7px;
  font-weight: 760;
  letter-spacing: .14em;
}
.resolution-feedback strong {
  margin-top: 3px;
  color: #dce9e6;
  font-size: 14px;
  letter-spacing: -.015em;
}
.resolution-feedback small {
  margin-top: 4px;
  color: #8fa8aa;
  font-size: 8px;
  line-height: 1.35;
}
.resolution-feedback.danger {
  border-color: rgba(255,101,93,.48);
  box-shadow: 0 16px 46px rgba(107, 29, 24, .28);
}
.resolution-feedback.danger span { color: #ff8c83; }
.resolution-feedback.warning {
  border-color: rgba(241,178,109,.42);
  box-shadow: 0 16px 46px rgba(99, 66, 25, .23);
}
.resolution-feedback.warning span { color: #efc286; }
.resolution-feedback.success {
  border-color: rgba(107,217,189,.44);
  box-shadow: 0 16px 46px rgba(26, 86, 70, .22);
}
.resolution-feedback.success span { color: var(--mint); }

@media (max-width: 1220px) {
  .resolution-feedback {
    width: min(360px, calc(100% - 455px));
    min-width: 270px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resolution-feedback { transition: none; }
}


/* Competition clarity pass: governance, causal tradeoffs and story briefing */
.governance-panel{background:linear-gradient(180deg,rgba(255,129,92,.075),rgba(8,17,23,.72));border-color:rgba(255,129,92,.23)}
.governance-topline{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.governance-topline div{display:flex;flex-direction:column;gap:5px}
.governance-topline span{font-size:9px;letter-spacing:.17em;color:#82939a}
.governance-topline strong{font-size:13px;letter-spacing:.06em;color:#ffb197}
.governance-topline>b{font-size:9px;letter-spacing:.12em;border:1px solid rgba(255,129,92,.35);padding:7px 9px;border-radius:999px;color:#ff9b79;background:rgba(255,129,92,.07);white-space:nowrap}
.governance-topline>b.safe{color:#7be2c5;border-color:rgba(107,217,189,.36);background:rgba(107,217,189,.07)}
.governance-topline>b.contained{color:#e5d28a;border-color:rgba(229,210,138,.32);background:rgba(229,210,138,.07)}
.governance-panel>p{font-size:12px;line-height:1.55;color:#b5c0c3;margin:12px 0 11px}
.governance-panel>small{display:block;margin-top:10px;color:#708189;font-size:10px;line-height:1.45}
.governance-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.governance-meter span{display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.07);padding:6px 7px;border-radius:8px;background:rgba(255,255,255,.025)}
.governance-meter span i{width:7px;height:7px;border-radius:50%;background:#ff815c;box-shadow:0 0 12px rgba(255,129,92,.44)}
.governance-meter span b{font-size:8px;letter-spacing:.1em;color:#89989d}
.governance-meter span.isolated i{background:#e4cf79;box-shadow:0 0 12px rgba(228,207,121,.34)}
.governance-meter span.regulated i{background:#6bd9bd;box-shadow:0 0 12px rgba(107,217,189,.4)}
.order-card .order-motive{margin:8px 0 9px;color:#b8c5c8;line-height:1.45}
.order-tradeoff{display:grid;grid-template-columns:.72fr 1.28fr;gap:7px;margin:8px 0}
.order-tradeoff>span{padding:8px 9px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(255,255,255,.025)}
.order-tradeoff small{display:block;color:#667a80;font-size:8px;letter-spacing:.12em;margin-bottom:4px}
.order-tradeoff b{display:block;font-size:10px;line-height:1.35;color:#c5d0d2}
.order-card.live .order-tradeoff>span:first-child b{color:#ffb08f}
.order-card.live .order-tradeoff>span:last-child{border-color:rgba(255,129,92,.2)}
.order-card.blocked .order-tradeoff>span:last-child{border-color:rgba(107,217,189,.17)}
.order-numbers{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px!important;letter-spacing:.03em;color:#75888d!important}
.start-links{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.story-link{color:#ffad8c!important}
.story-dialog{width:min(1120px,calc(100vw - 32px));max-width:none;padding:0;overflow:hidden;border-color:rgba(255,129,92,.3);background:#050b10}
.story-dialog::backdrop{background:rgba(0,5,8,.86);backdrop-filter:blur(10px)}
.story-shell{min-height:min(700px,88vh);display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(circle at 72% 24%,rgba(255,129,92,.12),transparent 34%),linear-gradient(135deg,#07131b,#05090d 70%)}
.story-header,.story-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.story-header div{display:flex;flex-direction:column;gap:4px}.story-header span{font-size:9px;letter-spacing:.19em;color:#71838a}.story-header strong{font-size:14px;color:#dbe6e7}
.story-stage{position:relative;min-height:520px;overflow:hidden}
.story-beat{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center;padding:48px 54px;opacity:0;pointer-events:none;transform:translateX(26px);transition:opacity .42s ease,transform .42s ease}
.story-beat.active{opacity:1;pointer-events:auto;transform:none}
.story-copy span{font-size:9px;letter-spacing:.22em;color:#ff9f7c}.story-copy h2{font-size:clamp(2rem,4vw,4.4rem);line-height:.96;letter-spacing:-.045em;margin:14px 0 18px;max-width:620px}.story-copy p{font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.65;color:#9eafb4;max-width:580px}
.story-visual{position:relative;aspect-ratio:1.25;border:1px solid rgba(255,255,255,.08);border-radius:24px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.18));box-shadow:0 30px 90px rgba(0,0,0,.26)}
.story-visual:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(#000,transparent)}
.story-visual strong,.story-visual>b{position:absolute;left:22px;bottom:20px;z-index:2;font-size:10px;letter-spacing:.14em;color:#ff9c78}
.city-online i{position:absolute;width:20%;height:22%;border:1px solid rgba(107,217,189,.34);background:rgba(107,217,189,.06);z-index:1}.city-online i:nth-child(1){left:14%;top:19%}.city-online i:nth-child(2){right:14%;top:19%}.city-online i:nth-child(3){left:14%;bottom:18%}.city-online i:nth-child(4){right:14%;bottom:18%}.city-online b{color:#78dfc2;font-size:32px;letter-spacing:-.03em}
.metric-rise i{position:absolute;bottom:22%;width:16%;background:linear-gradient(#6bd9bd,#297967);z-index:1}.metric-rise i:nth-child(1){left:16%;height:22%}.metric-rise i:nth-child(2){left:42%;height:42%}.metric-rise i:nth-child(3){left:68%;height:66%}.metric-rise strong{color:#6bd9bd}
.authority-spread i{position:absolute;width:15px;height:15px;border-radius:50%;background:#ff815c;box-shadow:0 0 26px rgba(255,129,92,.6);z-index:2}.authority-spread i:nth-child(1){left:20%;top:26%}.authority-spread i:nth-child(2){right:20%;top:26%}.authority-spread i:nth-child(3){left:20%;bottom:24%}.authority-spread i:nth-child(4){right:20%;bottom:24%}.authority-spread:before{content:"";position:absolute;left:21%;right:21%;top:28%;bottom:26%;border:1px solid rgba(255,129,92,.42);transform:rotate(28deg);box-shadow:0 0 0 1px rgba(255,129,92,.1)}
.cuts i{position:absolute;height:2px;background:#78858b;left:18%;right:18%;z-index:1}.cuts i:nth-child(1){top:28%}.cuts i:nth-child(2){top:50%;background:#ff815c}.cuts i:nth-child(3){top:72%}.cuts i:after{content:"";position:absolute;right:15%;top:-5px;width:12px;height:12px;border-radius:50%;background:#ff815c}
.cascade-chain i{position:absolute;width:14px;height:14px;border-radius:50%;background:#ff815c;z-index:2;box-shadow:0 0 24px rgba(255,129,92,.65)}.cascade-chain i:nth-child(1){left:14%;top:28%}.cascade-chain i:nth-child(2){left:40%;top:42%}.cascade-chain i:nth-child(3){left:63%;top:57%}.cascade-chain i:nth-child(4){right:14%;bottom:20%}.cascade-chain:before{content:"";position:absolute;left:16%;top:31%;width:70%;height:48%;border-bottom:2px solid rgba(255,129,92,.56);border-right:2px solid rgba(255,129,92,.56);transform:skewX(31deg)}
.regain i{position:absolute;width:20%;height:20%;border:1px solid #6bd9bd;background:rgba(107,217,189,.08);z-index:1}.regain i:nth-child(1){left:14%;top:18%}.regain i:nth-child(2){right:14%;top:18%}.regain i:nth-child(3){left:14%;bottom:18%}.regain i:nth-child(4){right:14%;bottom:18%}.regain strong{color:#6bd9bd}
.story-controls{border-top:1px solid rgba(255,255,255,.08);border-bottom:0}.story-controls>div:last-child{display:flex;gap:10px}.story-progress{display:flex;gap:6px}.story-progress i{width:24px;height:3px;border-radius:999px;background:#253239}.story-progress i.done{background:#526b70}.story-progress i.active{background:#ff815c;box-shadow:0 0 14px rgba(255,129,92,.45)}
.result-events li{position:relative}.result-events li.turning-point{border-color:rgba(107,217,189,.32);background:rgba(107,217,189,.055)}.result-events li>small{display:block;margin-top:5px;color:#63767c;font-size:8px;letter-spacing:.13em}
@media(max-width:800px){.story-beat{grid-template-columns:1fr;padding:28px}.story-visual{display:none}.story-stage{min-height:520px}.story-header,.story-controls{padding:14px}.story-controls{align-items:flex-end}.story-controls>div:last-child{flex-direction:column}.order-tradeoff{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.story-beat{transition:none}}