:root {
  color-scheme: dark;
  --bg: #090a0c;
  --panel: #15181e;
  --panel-soft: #1b1f27;
  --line: #343b47;
  --ink: #f3f4ef;
  --muted: #a7aeba;
  --pink: #ed3e7c;
  --green: #9ae52b;
  --wire: #63d4c9;
  --amber: #f4a340;
  --red: #e3424b;
  --concrete: #59616b;
}

.skip-link {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  transform: translateY(-180%);
  padding: 10px 14px;
  border: 2px solid var(--wire);
  background: #071016;
  color: #fff;
  font-weight: 900;
  transition: transform .12s ease;
}
.skip-link:focus { transform: translateY(0); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wire) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #071016, 0 0 0 4px rgba(99, 212, 201, .45);
}
[role="dialog"]:focus { outline: none; }

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

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

@media (max-width: 720px) {
  .game-nav { overflow-x: auto; scrollbar-width: thin; }
  .game-nav .nav-button { min-width: 110px; }
  .modal-backdrop { align-items: flex-start; overflow: auto; padding: 10px; }
  .utility-modal, .crew-detail, .crew-codex-modal { max-height: calc(100dvh - 20px); }
}

/* Crafting workshop and secure player exchange */
.market-mode-tabs { display:grid; grid-template-columns:repeat(3,1fr); margin:12px 0; border:1px solid #3b4853; background:#10161d; box-shadow:4px 4px 0 #05070a; }
.market-mode-tabs button { min-height:52px; display:flex; align-items:center; justify-content:center; gap:10px; border:0; border-right:1px solid #3b4853; background:#151c24; color:#b9c3ce; font-weight:900; letter-spacing:.03em; }
.market-mode-tabs button:last-child { border-right:0; }
.market-mode-tabs button span { color:#49d7df; font-size:1.15rem; }
.market-mode-tabs button small { margin-left:2px; padding:2px 5px; border:1px solid currentColor; font-size:.52rem; letter-spacing:.08em; }
.market-mode-tabs button:hover { background:#1d2a35; color:#fff; }
.market-mode-tabs button.active { background:#92ec20; color:#071006; box-shadow:inset 0 -4px 0 #60a917; }
.market-mode-tabs button.active span { color:#071006; }
.crafting-hero,.exchange-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px; border-color:#4d6c78; background:linear-gradient(135deg,#152533,#11171e 64%); }
.crafting-hero h2,.exchange-hero h2 { margin:3px 0 7px; font-size:2rem; }
.crafting-hero p,.exchange-hero p { max-width:720px; margin:0; color:#aeb9c6; }
.workshop-building { display:grid; grid-template-columns:62px minmax(0,1fr) auto; align-items:center; gap:15px; margin:12px 0; padding:15px; border-color:#52626b; background:linear-gradient(90deg,#101a20,#11171e); }
.workshop-building.established { border-color:#64922d; box-shadow:inset 4px 0 #92ec20; }
.workshop-building.locked { border-color:#76522b; box-shadow:inset 4px 0 #f4a340; }
.workshop-building-icon { position:relative; display:grid; place-items:center; width:58px; height:58px; background:#091118; border:1px solid #4b5a63; }
.workshop-building-icon span { font-size:1.55rem; }
.workshop-building-icon b { position:absolute; right:2px; bottom:1px; color:#92ec20; font-size:.55rem; }
.workshop-building h3 { margin:2px 0 3px; }
.workshop-building p { margin:0; color:#91a1ad; }
.workshop-building>button,.crafting-locked-state>button { min-height:42px; padding:0 16px; background:#92ec20; color:#071006; border:1px solid #b3ff54; font-weight:900; }
.workshop-level-track { height:6px; margin-top:9px; overflow:hidden; background:#070b0e; border:1px solid #334149; }
.workshop-level-track i { display:block; height:100%; background:linear-gradient(90deg,#42dce3,#92ec20); }
.workshop-roadmap { display:grid; grid-template-columns:repeat(5,minmax(48px,1fr)); min-width:340px; border:1px solid #35434e; background:#0b1218; }
.workshop-roadmap span { display:grid; gap:1px; padding:8px; border-right:1px solid #35434e; color:#64727e; text-align:center; }
.workshop-roadmap span:last-child { border-right:0; }
.workshop-roadmap span.unlocked { color:#92ec20; background:#122015; }
.workshop-roadmap b { font-size:.75rem; }
.workshop-roadmap small { color:inherit; font-size:.55rem; text-transform:uppercase; }
.crafting-locked-state { display:grid; justify-items:center; gap:7px; margin:12px 0; padding:34px; text-align:center; border-color:#76522b; background:radial-gradient(circle at 50% 20%,#25301e,#11171e 58%); }
.crafting-locked-state>span { display:grid; place-items:center; width:76px; height:76px; border:1px solid #f4a340; color:#f4a340; font-size:2.2rem; box-shadow:0 0 22px #f4a34033; }
.crafting-locked-state h3 { margin:0; font-size:1.45rem; }
.crafting-locked-state p:not(.eyebrow) { max-width:610px; color:#aeb9c6; }
.rarity-odds { display:grid; min-width:290px; gap:5px; }
.rarity-odds span { display:grid; grid-template-columns:9px 1fr auto; align-items:center; gap:8px; color:#bac4cf; font-size:.72rem; text-transform:uppercase; }
.rarity-odds i { width:8px; height:8px; background:var(--rarity); box-shadow:0 0 8px var(--rarity); }
.rarity-odds b { color:var(--rarity); }
.crafting-layout { display:grid; grid-template-columns:minmax(250px,34%) minmax(0,1fr); gap:12px; margin:12px 0; }
.blueprint-browser,.crafting-bench,.material-ledger,.exchange-sell,.exchange-browser,.my-listings { padding:16px; }
.blueprint-list { display:grid; gap:5px; max-height:570px; overflow:auto; padding-right:4px; }
.blueprint-list button { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:9px; align-items:center; padding:9px; text-align:left; background:#111923; color:#b6c0cb; border:1px solid #33424f; }
.blueprint-list button:hover,.blueprint-list button.active { border-color:#43d9e3; background:#152735; }
.blueprint-list button.active { box-shadow:inset 3px 0 #92ec20; }
.blueprint-list button.locked { opacity:.55; filter:grayscale(.65); cursor:not-allowed; }
.blueprint-list button.locked b { color:#f4a340; }
.blueprint-list canvas,.bench-icon canvas,.crafted-gear canvas { image-rendering:pixelated; width:32px; height:32px; }
.blueprint-list span { display:grid; gap:2px; }
.blueprint-list small { color:#718395; }
.blueprint-list b { color:#62d9de; font-size:.72rem; }
.bench-title { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:14px; padding-bottom:15px; border-bottom:1px solid #33424f; }
.bench-icon { display:grid; place-items:center; width:68px; height:68px; background:#09111a; border:1px solid #e43a8a; box-shadow:inset 0 0 0 4px #151e28; }
.bench-icon canvas { width:48px; height:48px; }
.bench-title h3 { margin:4px 0; font-size:1.35rem; }
.bench-title span { color:#8c9cac; }
.recipe-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:15px 0; }
.recipe-grid article { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:8px; align-items:center; min-height:58px; padding:8px; border:1px solid #3a4652; background:#111820; }
.recipe-grid article.ready { border-color:#3f7030; }
.recipe-grid article.missing { border-color:#743044; }
.recipe-grid article canvas { width:32px; height:32px; image-rendering:pixelated; }
.recipe-grid article span { display:grid; gap:2px; }
.recipe-grid article small { color:#7f8f9f; }
.recipe-grid article b { color:#92ec20; font-size:.64rem; }
.recipe-grid article.missing b { color:#ff5d82; }
.material-source-link { width:max-content; padding:0; border:0; background:transparent; color:#55dce4; font:700 .62rem/1.2 var(--mono); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.material-source-link:hover,.material-source-link:focus-visible { color:#b8fbff; }
.crafting-cost { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:center; padding:13px; background:#0b151b; border:1px solid #31505a; }
.crafting-cost span { display:grid; color:#7f909e; font-size:.7rem; text-transform:uppercase; }
.crafting-cost strong { margin-top:3px; color:#f2f5f7; font-size:.85rem; }
.crafting-cost button,.exchange-sell form>button,.listing-sale button { min-height:43px; padding:0 18px; background:#92ec20; border:1px solid #b0ff4b; color:#071006; font-weight:900; }
.crafting-cost button:disabled,.exchange-sell form>button:disabled { background:#26313a; border-color:#3b4853; color:#74818b; }
.craft-result { margin-top:14px; padding:13px; border:1px dashed #4a5d6c; background:#0d141c; }
.craft-result.empty { min-height:115px; display:grid; place-content:center; text-align:center; color:#768898; }
.crafted-gear { display:grid; grid-template-columns:58px minmax(0,1fr); gap:11px; padding:11px; border:1px solid var(--rarity); background:linear-gradient(90deg,color-mix(in srgb,var(--rarity) 10%,#101820),#101820 45%); box-shadow:inset 3px 0 var(--rarity); }
.crafted-gear-icon { position:relative; display:grid; place-items:center; width:54px; height:54px; background:#081018; border:1px solid color-mix(in srgb,var(--rarity) 70%,#35434e); }
.crafted-gear-icon b { position:absolute; right:2px; bottom:1px; color:var(--rarity); font-size:.55rem; }
.crafted-gear p { margin:0 0 2px; color:var(--rarity); font-size:.62rem; font-weight:800; text-transform:uppercase; }
.crafted-gear h4 { margin:0 0 7px; font-size:.95rem; }
.crafted-gear ul { display:flex; flex-wrap:wrap; gap:4px 12px; margin:7px 0 0; padding:0; list-style:none; font-size:.66rem; color:#a9b4bd; }
.gear-stat-row { display:flex; flex-wrap:wrap; gap:4px; }
.gear-stat-row span { padding:3px 5px; background:#142834; color:#55dde2; border:1px solid #294653; font-size:.61rem; }
.material-ledger { margin-top:12px; }
.material-ledger>.section-heading { margin-bottom:10px; }
.material-ledger>.section-heading button { padding:8px 12px; }
.material-ledger>div:last-child { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.material-ledger article { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:7px; padding:7px; border:1px solid #303e4a; background:#101821; }
.material-ledger canvas { width:30px; height:30px; image-rendering:pixelated; }
.material-ledger article span { display:grid; gap:1px; }
.material-ledger article strong { font-size:.69rem; }
.material-ledger article small { color:#758696; font-size:.58rem; }
.material-ledger article>b { color:#92ec20; }
.exchange-hero dl { display:grid; grid-template-columns:repeat(3,1fr); min-width:360px; margin:0; border:1px solid #36505d; }
.exchange-hero dl div { padding:11px; border-right:1px solid #36505d; }
.exchange-hero dl div:last-child { border-right:0; }
.exchange-hero dt { color:#8295a4; font-size:.6rem; text-transform:uppercase; }
.exchange-hero dd { margin:5px 0 0; color:#92ec20; font-weight:900; }
.exchange-signin { display:flex; justify-content:center; gap:10px; margin:12px 0; padding:13px; border-color:#e39f35; color:#d7a851; }
.exchange-sell { margin:12px 0; border-color:#4a676f; }
.exchange-sell form { display:grid; grid-template-columns:1.35fr .75fr .65fr 1.2fr auto; gap:9px; align-items:end; margin:10px 0; }
.exchange-sell label,.exchange-toolbar label { display:grid; gap:5px; color:#8999a6; font-size:.62rem; font-weight:800; text-transform:uppercase; }
.exchange-sell select,.exchange-sell input,.exchange-toolbar select,.exchange-toolbar input { min-height:39px; padding:8px; background:#09121a; color:#e8edf1; border:1px solid #3c4d5a; }
.exchange-fee-preview { display:grid; grid-template-columns:repeat(3,1fr); min-height:39px; border:1px solid #344653; }
.exchange-fee-preview span { display:grid; padding:5px 7px; color:#788b99; font-size:.54rem; text-transform:uppercase; }
.exchange-fee-preview b { color:#e8edf1; }
.exchange-fee-preview strong { color:#92ec20; }
.exchange-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:12px; }
.exchange-toolbar { display:grid; grid-template-columns:1fr 130px 130px auto; gap:8px; align-items:end; margin-bottom:10px; }
.exchange-toolbar button { min-height:39px; }
.exchange-listings { display:grid; gap:7px; }
.exchange-listings>article { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:8px; border:1px solid #344552; background:#0c131a; padding:7px; }
.exchange-listings .crafted-gear { border:0; box-shadow:inset 3px 0 var(--rarity); }
.listing-sale { display:grid; align-content:center; gap:4px; text-align:right; }
.listing-sale small,.listing-sale span { color:#7f909d; font-size:.62rem; }
.listing-sale strong { color:#54dce1; font-size:1.05rem; }
.listing-sale button { margin-top:4px; }
.my-listings>article { display:grid; gap:6px; padding:10px 0; border-bottom:1px solid #33414b; }
.my-listings>article>div { display:flex; justify-content:space-between; gap:5px; }
.my-listings>article>span { color:#8b9aa6; font-size:.66rem; }
.my-listings button { padding:7px; }
.listing-status { padding:3px 5px; color:#55dce2; border:1px solid currentColor; font-size:.54rem; text-transform:uppercase; }
.listing-status.sold { color:#92ec20; }
.listing-status.cancelled { color:#77848f; }
.exchange-empty { padding:24px; text-align:center; color:#7f909e; }

@media (max-width: 850px) {
  .market-mode-tabs { grid-template-columns:1fr; }
  .market-mode-tabs button { border-right:0; border-bottom:1px solid #3b4853; }
  .crafting-hero,.exchange-hero { align-items:stretch; flex-direction:column; }
  .workshop-building { grid-template-columns:52px minmax(0,1fr); }
  .workshop-building>button { grid-column:1/-1; }
  .workshop-roadmap { min-width:0; }
  .crafting-layout,.exchange-layout { grid-template-columns:1fr; }
  .recipe-grid { grid-template-columns:1fr; }
  .crafting-cost { grid-template-columns:1fr; }
  .material-ledger>div:last-child { grid-template-columns:1fr 1fr; }
  .exchange-hero dl { min-width:0; }
  .exchange-sell form,.exchange-toolbar { grid-template-columns:1fr; }
  .exchange-listings>article { grid-template-columns:1fr; }
  .listing-sale { text-align:left; }
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: #090d18; font: 16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .game-brand strong { font-family: "Courier New", ui-monospace, monospace; }
h2 { margin-bottom: .5rem; font-size: clamp(1.4rem, 2.5vw, 1.9rem); letter-spacing: -.03em; line-height: 1.05; }
h3 { margin-bottom: .35rem; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

.game-shell { width: min(1240px, calc(100% - 30px)); margin: 0 auto; padding: 12px 0 22px; }
.game-topbar, .game-nav, .card, .fatal-card { border: 2px solid var(--line); border-radius: 0; background: #15181e; box-shadow: 5px 5px 0 #05070b; }

.game-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 12px; }
.game-topbar-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.game-brand { display: flex; align-items: center; gap: 9px; min-width: 0; color: inherit; text-decoration: none; }
/* The mark is a 1024x1024 wordmark badge; the old 2px frame around a 46px box
   cropped it visually. Let it sit at its own aspect with a little air. */
.game-brand img { width: auto; height: 38px; max-width: 46px; border: 0; border-radius: 0; object-fit: contain; image-rendering: auto; }
.game-brand span { display: grid; }
.game-brand small { color: var(--muted); font-size: .6rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.game-brand strong { font-size: .88rem; }

.account-strip { display: grid; grid-template-columns: 44px minmax(140px, auto) auto minmax(120px, auto); align-items: stretch; min-width: 0; border: 1px solid #3c4855; background: linear-gradient(90deg, #101720, #0b1016); box-shadow: inset 3px 0 0 var(--wire); }
.account-strip > div:not(.mini-avatar) { display: grid; align-content: center; }
.player-identity { gap: 1px; padding: 3px 10px; }
.account-kicker, .cash > span, .multiplayer-status small { color: #6f8494; font-size: .5rem; font-style: normal; font-weight: 900; letter-spacing: .11em; line-height: 1.2; text-transform: uppercase; }
.player-identity > strong { max-width: 180px; overflow: hidden; color: #f3f5f1; font: 900 .82rem/1.15 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
.player-meta { display: flex; align-items: center; gap: 5px; margin-top: 1px; }.player-meta b, .player-meta em { padding: 1px 4px; border: 1px solid #3c4855; color: #9fb1bf; font-size: .48rem; font-style: normal; font-weight:900; letter-spacing: .07em; line-height: 1.25; text-transform: uppercase; }
.player-meta b { border-color: #3f8d96; color: var(--wire); background: #10252a; }
.multiplayer-status { display:flex !important; align-items:center; gap:6px; min-width: 70px; padding: 4px 9px; border-width: 0 0 0 1px; border-style: solid; border-color: #303b47; background:#0b1016; }
.multiplayer-status > span { display: grid; gap: 1px; }
.multiplayer-status b { color: #d39a4a; font-size: .56rem; font-weight: 900; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.multiplayer-status i { width:7px; height:7px; background:#df9a35; box-shadow:0 0 0 2px #382b1c, 0 0 8px rgba(223,154,53,.45); }
.multiplayer-status.online i { background:var(--green); box-shadow:0 0 9px rgba(145,237,36,.7); }
.multiplayer-status.online b { color: var(--green); }
.mini-avatar { --skin:#ca986f; --hair:#151318; --eyes:#5f3a24; --top:#24262c; --bottom:#191b21; --shoes:#d6d3ca; --accent:#df3156; width: 44px; height: 44px; overflow: hidden; border: 0; border-right: 1px solid #3c4855; border-radius: 0; background: radial-gradient(circle at 50% 38%, #263747, #121a23 72%); }
.pixel-avatar-canvas { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.cash { min-width: 120px; padding: 3px 10px; border-left: 1px solid #303b47; text-align: right; }
.cash strong { max-width: 210px; overflow: hidden; color: var(--green); font: 900 clamp(.9rem, 1.5vw, 1.15rem)/1.05 "Courier New", monospace; text-overflow: ellipsis; text-shadow: 0 0 12px rgba(154,229,43,.22); white-space: nowrap; }
.cash small { color: #6f8494; font-size: .48rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.game-progress { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; align-items: center; gap: 10px; margin: 6px 0 0; padding: 6px 10px; border: 2px solid #343f4c; background: #10151b; box-shadow: 3px 3px 0 #05070b; }
.game-progress > div:first-child { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.game-progress span, .game-progress small { color: var(--muted); font-size: .6rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.game-progress strong { color: var(--wire); font: 900 .7rem/1 "Courier New", monospace; }
.game-progress-track { height: 8px; overflow: hidden; border: 1px solid #4d5966; background: #070b10; box-shadow: inset 0 0 0 2px #10161d; }
.game-progress-track i { display: block; height: 100%; min-width: 3px; background: linear-gradient(90deg, var(--wire), var(--green)); box-shadow: 0 0 8px #63d4c966; }

.game-guidance { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-top: 10px; padding: 12px 15px; border-color: #587d24; background: linear-gradient(90deg, #172018, #111a17); box-shadow: 3px 3px 0 #05070b; }
.game-guidance h3, .game-guidance p { margin-bottom: 2px; }
.game-guidance p:last-child { color: var(--muted); font-size: .76rem; }
.game-guidance-actions { display: flex; gap: 7px; }
.game-guidance-actions button { min-height: 38px; padding: 0 13px; border: 2px solid #52616a; color: #cbd3d8; background: #10171a; cursor: pointer; font-size: .7rem; font-weight: 900; }
.game-guidance-actions .guidance-primary { border-color: #9ae52b; color: #10130b; background: var(--green); }
.game-guidance-actions button:hover, .game-guidance-actions button:focus-visible { border-color: var(--wire); outline: none; }

.game-nav { display: flex; gap: 3px; margin: 8px 0 12px; padding: 4px; box-shadow: none; }
.nav-button { flex: 1; min-height: 32px; border: 2px solid transparent; border-radius: 0; color: var(--muted); background: transparent; cursor: pointer; font-weight: 800; }
.nav-button:hover, .nav-button:focus-visible { color: #fff; border-color: #4b5360; outline: none; }
.nav-button.active { color: #10130b; background: var(--green); }

.game-content { display: grid; gap: 12px; }
.card { padding: clamp(13px, 1.7vw, 17px); }
.eyebrow { margin: 0 0 .28rem; color: var(--pink); font-size: .62rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.pill-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.pill-row span { padding: 5px 8px; border: 1px solid #424a57; border-radius: 0; color: #cbd0d8; font-size: .7rem; font-weight: 750; text-transform: capitalize; }

.city-diorama { position: relative; min-height: 360px; padding: 0; overflow: hidden; border-color: #46566a; background: #090d18; }
.city-scene { width: 100%; min-height: 360px; }
.pixel-diorama-canvas { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; image-rendering: pixelated; }
.diorama-copy { position: absolute; left: 22px; bottom: 20px; width: min(470px, calc(100% - 44px)); padding: 17px 19px; border: 2px solid #435163; color: #edf2f2; background: #0b1018e8; box-shadow: 5px 5px 0 #030407; }
.diorama-copy h2 { margin-bottom: 5px; text-shadow: 3px 3px 0 #000; }
.diorama-copy p { margin-bottom: 8px; color: #aeb8c2; }
.pixel-legend { display: flex; flex-wrap: wrap; gap: 5px; }
.pixel-legend span { padding: 3px 7px; border: 1px solid #3c4857; color: #c7d0d8; font-size: .66rem; }

/* Full city district map */
.city-map-card { min-height: 0; border-color: #51606a; background: #0a1015; box-shadow: 0 18px 44px #0008, inset 0 0 0 1px #28343b; }
.hq-world-map { border-color: #657065; background: #0b1114; }
.hq-world-map .city-map-stage { min-height: 620px; background: #071923; }
.city-map-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 20px 23px 17px; border-bottom: 2px solid #354454; background: linear-gradient(90deg, #111923, #10151c); }
.city-map-header > div:first-child { max-width: 760px; }
.city-map-header h2 { margin-bottom: 6px; }
.city-map-header p:last-child { margin-bottom: 0; color: var(--muted); }
.city-map-progress { display: grid; flex: 0 0 auto; justify-items: end; gap: 2px; }
.city-map-progress strong { color: var(--green); font: 900 1.6rem/1 "Courier New", monospace; }
.city-map-progress span { color: var(--muted); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.city-map-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 520px; overflow: hidden; border-bottom: 2px solid #354454; background: #070b14; isolation: isolate; }
.pixel-city-map-canvas { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.pixel-world-city-canvas { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
.pixel-world-city-canvas:active { cursor: grabbing; }
.pixel-world-city-canvas.city-overview-static, .pixel-world-city-canvas.city-overview-static:active { cursor: default; touch-action: auto; }
.hq-world-map .city-map-stage { border-bottom: 0; }
.hq-map-header { position: relative; border-bottom-color: #776345; background: linear-gradient(105deg, #11191d 0 62%, #1d1b17 100%); }
.hq-map-header::after { position: absolute; right: 20px; bottom: -2px; left: 20px; height: 1px; background: linear-gradient(90deg, transparent, #b98a4a, transparent); content: ""; }
.hq-map-header .eyebrow { color: #c39858; }
.hq-map-header h2 { color: #e7dfcf; text-shadow: 2px 2px #050708; }
.hq-map-header { display: block; }
.hq-map-header h2 { margin: 0; font-size: 1.05rem; letter-spacing: .01em; }
.city-noir-atlas { filter: saturate(.94) contrast(1.08) brightness(1.04); }
.hq-world-map .city-map-stage::after { position: absolute; z-index: 2; inset: 0; border: 1px solid #b98a4a55; background: radial-gradient(circle at 50% 48%, transparent 0 48%, #02060969 100%), repeating-linear-gradient(0deg, transparent 0 3px, #d8d2c203 3px 4px); content: ""; pointer-events: none; }
.hq-map-legend { position: absolute; z-index: 4; right: 18px; bottom: 18px; display: flex; flex-wrap: wrap; gap: 10px; padding: 9px 11px; border: 1px solid #756346; color: #b9b2a4; background: #0a1014e8; box-shadow: 4px 4px 0 #030506aa; font: 800 .52rem/1 "Courier New", monospace; text-transform: uppercase; }
.hq-map-legend span { display: flex; align-items: center; gap: 6px; }
.hq-map-legend i { width: 12px; height: 9px; border: 1px solid #626b6d; }
.hq-map-legend .controlled { border-color: #e2b766; background: #8f6c36; box-shadow: 0 0 7px #e2b76666; }
.hq-map-legend .revealed { border-color: #58c8d1; background: #284b52; }
.hq-map-legend .concealed { background: repeating-linear-gradient(135deg, #24323a 0 3px, #0b151d 3px 6px); }
.city-atlas-labels { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.city-atlas-label { --district-accent:var(--wire); position: absolute; display: flex; align-items: center; gap: 5px; max-width: 172px; padding: 3px 8px 3px 4px; border: 1px solid color-mix(in srgb, var(--district-accent) 62%, #26313b); color: #e8efe9; background: #0a1014d9; box-shadow: 2px 2px 0 #030506aa; font: 900 .56rem/1 "Courier New", monospace; letter-spacing: .05em; text-transform: uppercase; transform: translate(-50%, -50%) scale(var(--label-scale, 1)); opacity: var(--label-opacity, 1); white-space: nowrap; overflow: hidden; cursor: pointer; pointer-events: auto; text-align: left; }
.city-atlas-label:hover, .city-atlas-label:focus-visible { z-index: 2; border-color: var(--district-accent); color: #fff; background: #121a22f2; outline: none; transform: translate(calc(-50% - 1px), calc(-50% - 1px)) scale(var(--label-scale, 1)); }
.city-atlas-label b { display: grid; place-items: center; flex: 0 0 auto; width: 15px; height: 15px; border: 1px solid var(--district-accent); color: var(--district-accent); font-size: .55rem; }
.city-atlas-label span { overflow: hidden; text-overflow: ellipsis; }
.city-atlas-label.selected { border-color: var(--district-accent); background: #101820; box-shadow: 0 0 0 1px #071017, 0 0 12px color-mix(in srgb, var(--district-accent) 45%, transparent), 3px 3px 0 #030609; }
.city-atlas-label.selected b { color: #071014; background: var(--district-accent); }
.city-atlas-text { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.city-atlas-text-label { position: absolute; transform: translate(-50%, -50%) rotate(var(--label-rotate, 0deg)) scale(var(--label-scale, 1)); color: var(--label-color, #a7b6c0); opacity: var(--label-opacity, 1); white-space: nowrap; font: 700 10px/1 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; letter-spacing: .01em; text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none; will-change: transform, opacity; }
.city-atlas-text-label.kind-borough { color: #8fa4b2; font-weight: 800; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }  .city-atlas-text-label.kind-area { color: #dbe5ea; font-weight: 800; font-size: 13px; letter-spacing: .05em; }
  .city-atlas-text-label.kind-region { color: #c9d6de; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: calc(var(--label-opacity, 1) * .82); }
.city-atlas-text-label.kind-park { color: #7cbd90; font-style: italic; }
.city-atlas-text-label.kind-water { color: #6fb6d9; font-style: italic; font-size: 10px; letter-spacing: .02em; }
.city-atlas-text-label.kind-street { color: #b8c3cb; font-size: 9px; letter-spacing: .01em; }
.city-atlas-text-label.kind-bridge { color: #c8a76d; font-size: 9px; }  .city-atlas-text-label.kind-poi { color: #e7d7ae; font-size: 9px; }
  .city-atlas-text-label.kind-island { color: #9fc7d8; font-size: 9px; font-style: italic; }
  .city-atlas-text-label.kind-airport { color: #c9b8e8; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
  .city-atlas-text-label.kind-landmark { color: #ecd9a8; font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.city-atlas-text-label[data-place-select] { padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; }
.city-atlas-text-label[data-place-select]::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -4px; height: 1px; background: var(--label-color, #a7b6c0); opacity: 0; transform: scaleX(.35); transition: opacity .12s ease, transform .12s ease; }
.city-atlas-text-label[data-place-select]:hover, .city-atlas-text-label[data-place-select]:focus-visible { color: #fff; text-shadow: 0 0 5px #000, 0 0 11px #000, 0 0 2px #000; outline: none; }
.city-atlas-text-label[data-place-select]:hover::after, .city-atlas-text-label[data-place-select]:focus-visible::after { opacity: .95; transform: scaleX(1); }
.atlas-place-card { position: absolute; z-index: 6; right: 15px; bottom: 15px; width: min(330px, calc(100% - 30px)); padding: 15px 17px 14px; border: 1px solid color-mix(in srgb, var(--district-accent, #58c8d1) 62%, #26313b); border-top: 3px solid var(--district-accent, #58c8d1); color: #dbe5ea; background: #0a1016ee; box-shadow: 0 8px 24px #02060a, 2px 2px 0 #020407; font-size: .72rem; }
.atlas-place-card[hidden] { display: none; }
.atlas-place-card .eyebrow { margin: 0 0 3px; color: var(--district-accent, #58c8d1); }
.atlas-place-card h3 { margin: 0 0 2px; font-size: 1.12rem; }
.atlas-place-card .atlas-place-card-district { margin: 0 0 8px; color: #8fa4b2; font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.atlas-place-card .atlas-place-card-feature { margin: 0 0 8px; color: #b9c2cb; line-height: 1.45; }
.atlas-place-card dl { display: grid; margin: 0; }
.atlas-place-card dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid #2a3540; }
.atlas-place-card dl > div:first-child { border-top: 0; }
.atlas-place-card dt { color: var(--district-accent, #58c8d1); font-size: .56rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.atlas-place-card dd { margin: 0; color: #b9c2cb; }
.atlas-place-card .atlas-place-card-action { width: 100%; margin-top: 10px; padding: 8px 12px; border: 2px solid var(--district-accent, #58c8d1); color: var(--district-accent, #58c8d1); background: #0b1218; cursor: pointer; font-size: .64rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.atlas-place-card .atlas-place-card-action:hover, .atlas-place-card .atlas-place-card-action:focus-visible { color: #09100c; background: var(--district-accent, #58c8d1); outline: none; }
.atlas-place-card .atlas-place-card-locked { margin: 8px 0 0; color: #8fa4b2; font-style: italic; }
.atlas-place-card-close { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border: 1px solid #3a4653; color: #9fb0bd; background: #0d141b; cursor: pointer; font-size: .8rem; line-height: 1; }
.atlas-place-card-close:hover, .atlas-place-card-close:focus-visible { color: #fff; border-color: #5a6b7a; outline: none; }
.atlas-camera-controls { flex-direction: column; gap: 5px; }
.atlas-compass { position: absolute; z-index: 4; top: 15px; left: 15px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #4d5f70; border-radius: 50%; color: #e5edf1; background: #0b1119e8; box-shadow: 2px 2px 0 #020407; pointer-events: none; }
.atlas-compass i { position: absolute; top: 5px; left: 50%; width: 0; height: 0; margin-left: -3px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 7px solid var(--pink, #e33c8e); }
.atlas-compass b { margin-top: 7px; font: 900 .6rem/1 "Courier New", monospace; color: var(--wire, #4bd7df); }
.atlas-map-meta { position: absolute; z-index: 4; left: 16px; bottom: 15px; display: flex; align-items: flex-end; gap: 14px; pointer-events: none; }
.atlas-scale { display: flex; align-items: flex-end; gap: 7px; color: #b9c2ca; font: 700 .58rem/1 "Courier New", monospace; }
.atlas-scale-bar { display: block; width: 60px; height: 7px; border-right: 2px solid #e6edf2; border-bottom: 2px solid #e6edf2; border-left: 2px solid #e6edf2; }
.atlas-attribution { color: #66757f; font: 600 .56rem/1 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif; }
.city-camera-help { position: absolute; z-index: 3; top: 14px; left: 14px; display: flex; gap: 5px; pointer-events: none; }
.city-camera-help span, .city-fog-key { padding: 6px 9px; border: 1px solid #455463; color: #d5dde3; background: #080d14e8; box-shadow: 2px 2px 0 #020407; font: 800 .58rem/1 "Courier New", monospace; text-transform: uppercase; }
.city-camera-controls { position: absolute; z-index: 4; top: 14px; right: 14px; display: flex; gap: 4px; }
.city-camera-controls button { min-width: 39px; min-height: 36px; padding: 0 11px; border: 2px solid #546678; color: #ebf3f5; background: #0b1119eb; box-shadow: 2px 2px 0 #020407; cursor: pointer; font-weight: 900; }
.city-camera-controls button:hover, .city-camera-controls button:focus-visible { border-color: var(--wire); color: var(--wire); outline: 0; }
.city-fog-key { position: absolute; z-index: 3; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 7px; pointer-events: none; }
.city-fog-key i { width: 17px; height: 10px; background: repeating-linear-gradient(135deg, #79828b 0 3px, #424b55 3px 6px); opacity: .8; }
.city-zone-dock { display: grid; grid-auto-columns: minmax(116px, 1fr); grid-auto-flow: column; gap: 6px; overflow-x: auto; padding: 9px; border-bottom: 2px solid #354454; background: #080d13; scrollbar-color: #536271 #111821; }
.city-zone-dock button { --district-accent:#647282; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; min-height: 56px; padding: 7px; border: 1px solid #35414e; color: #c1c9d0; background: #111821; cursor: pointer; text-align: left; }
.city-zone-dock button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 25px; height: 25px; margin: auto 6px auto 0; border: 1px solid var(--district-accent); color: var(--district-accent); font: 900 .62rem/1 "Courier New", monospace; }
.city-zone-dock button > canvas { grid-row: 1 / 3; width: 30px; height: 30px; margin: auto 6px auto 0; border: 1px solid var(--district-accent); background: #0b1117; image-rendering: pixelated; }
.city-zone-dock strong { align-self: end; overflow: hidden; font: 900 .64rem/1.1 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
.city-zone-dock small { align-self: start; color: #73808a; font-size: .49rem; font-weight: 800; text-transform: uppercase; }
.city-zone-dock button:hover:not(:disabled), .city-zone-dock button:focus-visible, .city-zone-dock button.active { border-color: var(--district-accent); color: #fff; background: #18232d; outline: none; box-shadow: inset 0 -3px var(--district-accent); }
.city-zone-dock button.locked { opacity: .38; cursor: not-allowed; filter: grayscale(1); }
.city-zone-dock .operation-dock-button { --district-accent:var(--green); }
.city-map-controls { position: absolute; z-index: 2; inset: 0; }
.city-district-marker { --district-accent:var(--wire); position: absolute; top: var(--district-y); left: var(--district-x); display: grid; grid-template-columns: 31px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; min-width: 126px; padding: 6px 8px 6px 6px; border: 2px solid #394551; color: #9aa5af; background: #0c1118e8; box-shadow: 3px 3px 0 #030609; cursor: pointer; text-align: left; transform: translate(-50%, -50%); transition: transform .12s steps(2), border-color .12s steps(2), background-color .12s steps(2); }
.city-district-marker > span { grid-row: 1 / 3; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid currentColor; font: 900 .65rem/1 "Courier New", monospace; }
.city-district-marker strong { overflow: hidden; font: 900 .68rem/1.15 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
.city-district-marker small { color: #727d88; font-size: .5rem; font-weight: 800; text-transform: uppercase; }
.city-district-marker.unlocked { border-color: color-mix(in srgb, var(--district-accent) 55%, #26313b); color: #edf2f3; background: #0b1219ef; }
.city-district-marker.unlocked > span { color: var(--district-accent); }
.city-district-marker.unlocked small { color: var(--district-accent); }
.city-district-marker.unlocked:hover, .city-district-marker.unlocked:focus-visible { z-index: 3; border-color: var(--district-accent); outline: none; background: #121b24; transform: translate(calc(-50% - 2px), calc(-50% - 2px)); }
.city-district-marker.selected { z-index: 4; border-color: var(--district-accent); background: #17212a; box-shadow: 0 0 0 2px #071017, 0 0 18px color-mix(in srgb, var(--district-accent) 45%, transparent), 4px 4px 0 #030609; }
.city-district-marker.selected::after { position: absolute; right: -5px; bottom: -5px; width: 8px; height: 8px; background: var(--district-accent); content: ""; }
.city-district-marker.locked { border-style: dashed; opacity: .58; cursor: not-allowed; filter: grayscale(.8); }
.city-district-panel { --district-accent:var(--wire); display: grid; grid-template-columns: 78px minmax(260px, 1fr) minmax(320px, .9fr) auto; align-items: center; gap: 19px; padding: 20px 22px; border-top: 3px solid var(--district-accent); background: linear-gradient(90deg, #121a22, #10141a); }
.district-number { display: grid; place-items: center; width: 72px; height: 72px; border: 2px solid var(--district-accent); color: var(--district-accent); background: #090f15; box-shadow: inset 0 0 0 4px #151e26; font: 900 1.5rem/1 "Courier New", monospace; }
.district-main { min-width: 0; }
.district-main h2 { margin-bottom: 5px; font-size: 1.65rem; }
.district-main p:last-child { margin: 0; color: var(--muted); font-size: .78rem; }
.city-district-panel dl { display: grid; margin: 0; }
.city-district-panel dl > div { display: grid; grid-template-columns: 105px 1fr; gap: 9px; padding: 6px 0; border-top: 1px solid #303a45; }
.city-district-panel dl > div:first-child { border-top: 0; }
.city-district-panel dt { color: var(--district-accent); font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.city-district-panel dd { margin: 0; color: #b9c2cb; font-size: .66rem; }
.city-district-panel > button { min-height: 45px; padding: 0 15px; border: 2px solid var(--district-accent); color: var(--district-accent); background: #0b1218; cursor: pointer; font-size: .7rem; font-weight: 900; white-space: nowrap; }
.city-district-panel > button:hover, .city-district-panel > button:focus-visible { color: #09100c; background: var(--district-accent); outline: none; }
.city-operations-panel { display: grid; gap: 12px; padding: 18px; border-top: 3px solid var(--green); background: #0e141b; }
.city-operations-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.city-operations-heading h2, .city-operations-heading p:last-child { margin-bottom: 4px; }
.city-operations-heading > button { min-height: 40px; padding: 0 14px; border: 2px solid var(--wire); color: var(--wire); background: #0a1118; cursor: pointer; font-weight: 900; }
.city-operation-list { gap: 10px; }
.operation-business-action .locate-operation { min-height: 33px; margin: 0 0 4px; border-color: #4b7880; color: var(--wire); background: #101c23; box-shadow: 2px 2px 0 #04080a; font-size: .64rem; }
.operation-map-card { overflow: hidden; border-color: #766342; background: #0b1114; box-shadow: 0 0 0 1px #2f342f inset, 0 18px 44px #0009; }
.operation-map-header { align-items: stretch; padding: 18px 20px; border-bottom: 1px solid #806b48; background: linear-gradient(110deg, #11191d 0 55%, #211d17 100%); }
.operation-map-header > div:first-child { max-width: 580px; }
.operation-map-header h2 { margin-bottom: 4px; }
.operation-map-vitals { display: grid; grid-template-columns: repeat(3, minmax(82px, 1fr)); min-width: 310px; border: 1px solid #6d6048; background: #0b100fed; }
.operation-map-vitals span { display: grid; align-content: center; gap: 2px; padding: 8px 11px; border-left: 1px solid #514936; }
.operation-map-vitals span:first-child { border-left: 0; }
.operation-map-vitals b { color: #e2b766; font: 900 1rem/1 "Courier New", monospace; }
.operation-map-vitals small { color: #81908a; font: 800 .48rem/1.15 "Courier New", monospace; text-transform: uppercase; }
.operation-map-stage { min-height: 600px; border-bottom-color: #766342; background: #07151d; }
.operations-map-fallback { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
.operations-map-fallback .revealed-building { filter: drop-shadow(0 4px 2px #02070a99); }
.operations-map-fallback .fog-building { opacity: .78; }
.operations-map-fallback .operation-fallback-site { filter: drop-shadow(0 0 5px #58c8d1); }
.operations-map-fallback .operation-fallback-site.selected { filter: drop-shadow(0 0 9px #e2b766); }
.operation-map-stage::after { position: absolute; z-index: 2; inset: 0; border: 1px solid #b98a4a55; background: radial-gradient(circle at 50% 50%, transparent 0 52%, #0206076b 100%), repeating-linear-gradient(0deg, transparent 0 3px, #e2b76605 3px 4px); content: ""; pointer-events: none; }
.operation-map-stage canvas.pixel-world-city-canvas { z-index: 1; filter: saturate(.92) contrast(1.12) brightness(1.03) sepia(.06); }
.operation-map-stage .city-camera-help { z-index: 5; }
.operation-map-stage .city-camera-help span { border-color: #756346; color: #d6c7a9; background: #0c100fd9; }
.operation-map-stage .city-camera-controls { z-index: 6; }
.operation-map-stage .city-camera-controls button { border-color: #756346; color: #e2d5bd; background: #0c100ff2; }
.operation-map-hud { position: absolute; z-index: 6; bottom: 18px; left: 18px; display: grid; grid-template-columns: 58px minmax(180px, 1fr) auto; align-items: center; gap: 12px; min-width: min(460px, calc(100% - 36px)); padding: 10px; border: 1px solid #b98a4a; border-left: 4px solid #e2b766; color: #f0eadf; background: linear-gradient(90deg, #0b1012f5, #17140fe8); box-shadow: 5px 5px 0 #020406aa, 0 0 24px #e2b76618; }
.operation-map-hud-icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #806d4d; background: #090d10; }
.operation-map-hud-icon canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.operation-map-hud-icon i { position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; background: #e2b766; box-shadow: 0 0 8px #e2b766; }
.operation-map-hud > div:nth-child(2) { display: grid; gap: 3px; }
.operation-map-hud span { color: #c9a669; font: 800 .5rem/1 "Courier New", monospace; text-transform: uppercase; letter-spacing: .08em; }
.operation-map-hud strong { font: 900 .92rem/1.15 "Courier New", monospace; }
.operation-map-hud small { color: #9caeb0; font-size: .58rem; }
.operation-map-hud button { min-height: 36px; padding: 0 13px; border: 1px solid #e2b766; color: #171006; background: #e2b766; cursor: pointer; font: 900 .58rem/1 "Courier New", monospace; text-transform: uppercase; }
.operation-map-hud button:hover, .operation-map-hud button:focus-visible { color: #fff; background: #173b29; outline: 1px solid var(--green); }
.operation-map-legend { position: absolute; z-index: 5; right: 18px; bottom: 18px; display: grid; gap: 5px; padding: 8px 10px; border: 1px solid #36454e; color: #93a1a9; background: #071016e6; font: 800 .48rem/1 "Courier New", monospace; text-transform: uppercase; }
.operation-map-legend span { display: flex; align-items: center; gap: 7px; }
.operation-map-legend i { width: 10px; height: 10px; border: 1px solid #73818a; }
.operation-map-legend i.online { background: var(--wire); box-shadow: 0 0 6px #58d5d2; }
.operation-map-legend i.selected { background: var(--green); box-shadow: 0 0 7px var(--green); }
.operation-map-legend i.fogged { background: repeating-linear-gradient(135deg, #3e5360 0 3px, #15232b 3px 6px); }
.operation-map-dock { display: grid; grid-auto-flow: row; grid-template-columns: 1fr; gap: 0; overflow: hidden; padding: 0; border-top: 1px solid #806b48; border-bottom-color: #766342; background: #080c0f; }
.operation-map-dock-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 12px; border-bottom: 1px solid #333b3c; background: linear-gradient(90deg, #121716, #0c1114); }
.operation-map-dock-header > div { display: grid; gap: 2px; }
.operation-map-dock-header span { color: #c9a669; font: 800 .46rem/1 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.operation-map-dock-header strong { color: #f0eadf; font: 900 .76rem/1.1 "Courier New", monospace; }
.operation-map-dock-header p { margin: 0; color: #77878a; font-size: .55rem; }
.operation-map-dock-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-width: 0; padding: 10px; }
.operation-map-dock .operation-dock-card { --district-accent:#d8ac58; position: relative; display: grid; grid-template-columns: 24px 48px minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; gap: 9px; min-width: 0; min-height: 82px; padding: 10px; overflow: hidden; border: 1px solid #3d4748; color: #e2e8e6; background: linear-gradient(145deg, #131a1e, #0d1215); box-shadow: inset 0 1px #ffffff08; cursor: pointer; text-align: left; }
.operation-map-dock .operation-dock-card::after { position: absolute; right: 0; bottom: 0; width: 22px; height: 2px; background: #415052; content: ""; transition: width .15s ease, background .15s ease; }
.operation-map-dock .operation-dock-index { align-self: stretch; display: grid; place-items: center; border-right: 1px solid #303a3c; color: #627477; font: 900 .54rem/1 "Courier New", monospace; }
.operation-map-dock .operation-dock-icon { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #465556; background: radial-gradient(circle, #18252a, #080d10 72%); box-shadow: inset 0 0 0 3px #0b1114; }
.operation-map-dock .operation-dock-icon canvas { width: 40px; height: 40px; margin: 0; border: 0; background: transparent; image-rendering: pixelated; }
.operation-map-dock .operation-dock-icon > i { position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px; background: var(--wire); box-shadow: 0 0 7px var(--wire); }
.operation-map-dock .operation-dock-copy { display: grid; align-content: center; gap: 4px; min-width: 0; width: auto; height: auto; margin: 0; border: 0; text-align: left; }
.operation-map-dock .operation-dock-copy > span { overflow: hidden; color: #70aaa7; font: 800 .43rem/1 "Courier New", monospace; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.operation-map-dock .operation-dock-copy > strong { overflow: hidden; color: #eef2ef; font: 900 .66rem/1.15 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
.operation-map-dock .operation-dock-copy > small { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; color: #7e8b8d; font: 800 .43rem/1 "Courier New", monospace; text-transform: uppercase; }
.operation-map-dock .operation-dock-copy > small > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-map-dock .operation-dock-copy em { display: inline-flex; align-items: center; gap: 4px; color: #91a09f; font-style: normal; white-space: nowrap; }
.operation-map-dock .operation-dock-copy em i { width: 5px; height: 5px; background: #627477; }
.operation-map-dock .operation-dock-card:hover, .operation-map-dock .operation-dock-card:focus-visible { border-color: #58c8d1; color: #fff; background: linear-gradient(145deg, #17242a, #10171b); outline: none; box-shadow: inset 0 0 0 1px #58c8d155, 0 0 16px #58c8d118; }
.operation-map-dock .operation-dock-card:hover::after, .operation-map-dock .operation-dock-card:focus-visible::after { width: 100%; background: #58c8d1; }
.operation-map-dock .operation-dock-card.active { border-color: #d8ac58; color: #fff; background: linear-gradient(145deg, #2b2417, #12181b 72%); box-shadow: inset 4px 0 #d8ac58, inset 0 0 0 1px #d8ac583b, 0 0 18px #d8ac5825; }
.operation-map-dock .operation-dock-card.active::after { width: 100%; background: #d8ac58; box-shadow: 0 0 9px #d8ac58; }
.operation-map-dock .operation-dock-card.active .operation-dock-index, .operation-map-dock .operation-dock-card.active .operation-dock-copy > span { color: #e2b766; }
.operation-map-dock .operation-dock-card.active .operation-dock-icon { border-color: #d8ac58; box-shadow: inset 0 0 0 3px #17130d, 0 0 12px #d8ac5838; }
.operation-map-dock .operation-dock-card.active .operation-dock-icon > i, .operation-map-dock .operation-dock-card.active .operation-dock-copy em i { background: #d8ac58; box-shadow: 0 0 7px #d8ac58; }
.operation-map-key i { background: repeating-linear-gradient(135deg, #7fa83e 0 3px, #34452a 3px 6px); }

.welcome-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 16px; }
.avatar-hero { display: grid; grid-template-columns: 180px minmax(0,1fr); align-items: center; gap: 25px; overflow: hidden; background: #151a21; }
.hero-avatar, .crew-avatar { --skin:#ca986f; --hair:#151318; --eyes:#5f3a24; --top:#24262c; --bottom:#191b21; --shoes:#d6d3ca; --accent:#df3156; display: grid; place-items: center; overflow: hidden; border: 2px solid #44505e; border-radius: 0; background: #10151d; }
.hero-avatar { width: 180px; height: 180px; }
.avatar-hero h2 { margin: .15rem 0 .7rem; }
.avatar-hero p:not(.eyebrow), .next-goal p, .compact-card p, .page-heading p, .operation-card p, .locked-card p, .recruitment-card p { color: var(--muted); }
.next-goal { display: flex; flex-direction: column; justify-content: center; border-color: #587d24; background: #172018; }
.hq-next-goal { display: flex; min-height: 105px; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
.hq-next-goal > div { max-width: 760px; }
.hq-next-goal h3, .hq-next-goal p:last-child { margin-bottom: 4px; }
.hq-next-goal .primary-action { flex: 0 0 230px; margin: 0; }
.primary-action { min-height: 47px; margin-top: 8px; border: 2px solid #c9ff73; border-radius: 0; color: #10130b; background: var(--green); box-shadow: 3px 3px 0 #33520a; cursor: pointer; font-weight: 900; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.stat-card { display: grid; gap: 4px; padding: 17px; border: 2px solid var(--line); border-radius: 0; background: #12151a; }
.stat-card span, .stat-card small { color: var(--muted); font-size: .73rem; }
.stat-card span { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stat-card strong { overflow: hidden; font-size: 1.25rem; text-overflow: ellipsis; white-space: nowrap; }

.dashboard-grid, .market-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compact-card { min-height: 160px; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.text-action { border: 0; color: var(--wire); background: transparent; cursor: pointer; font-size: .78rem; font-weight: 800; white-space: nowrap; }

.page-heading { max-width: 740px; padding: 10px 4px 2px; }
.page-heading p:last-child { margin-bottom: 0; }
.market-quote { display: grid; align-content: center; min-height: 210px; background: #111923; }
.market-quote { position: relative; }
.market-quote > span { color: var(--muted); font-size: .8rem; font-weight: 850; text-transform: uppercase; }
.market-quote > strong { color: var(--wire); font-size: 3rem; line-height: 1.1; }
.market-meta { display: flex; gap: 8px; margin-top: 14px; }
.market-meta span { padding: 5px 8px; border-radius: 0; background: #222831; color: #ccd2da; font-size: .7rem; }
.direction-up { color: var(--green) !important; }
.direction-down { color: var(--pink) !important; }
.favorite-button { position: absolute; top: 12px; right: 12px; border: 0; color: #616976; background: transparent; cursor: pointer; font-size: 1.2rem; }
.favorite-button.selected { color: #ffd056; }
.quote-actions { display: flex; gap: 8px; margin-top: 16px; }
.quote-actions button, .settings-save { min-height: 38px; padding: 0 14px; border: 2px solid var(--line); border-radius: 0; color: #e5e9ee; background: #222832; box-shadow: 2px 2px 0 #080a0e; cursor: pointer; font-weight: 850; }
.quote-actions button:hover, .settings-save:hover { border-color: var(--wire); }
.market-guidance { display: grid; align-content: center; margin: 16px 0; }
.streetwire-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; max-width: none; }
.market-message { margin: 14px 0; padding: 11px 14px; border-left: 3px solid var(--wire); color: #cdd3da; background: rgba(99,212,201,.08); }
.away-summary { margin: 16px 0; border-color: rgba(154,229,43,.42); }
.away-summary h3 { margin: 3px 0 10px; }
.away-summary ul { margin: 0; padding-left: 20px; color: var(--muted); }
.streetwire-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.intel-list { display: grid; gap: 8px; }
.intel-list p { display: grid; grid-template-columns: 35px 120px 1fr; align-items: center; gap: 10px; margin: 0; padding: 9px 0; border-top: 1px solid var(--line); }
.intel-list p > span { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--wire); border-radius: 0; color: var(--wire); font-size: .67rem; font-weight: 900; }
.intel-list small, .intel-rule { color: var(--muted); }
.intel-rule { margin-bottom: 0; font-size: .76rem; }
.alert-settings summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.alert-settings summary::-webkit-details-marker { display: none; }
.alert-settings summary span:first-child { display: grid; gap: 4px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.settings-grid > label:not(.toggle) { position: relative; display: grid; gap: 6px; color: var(--muted); font-size: .75rem; font-weight: 800; }
.settings-grid select, .settings-grid input[type="number"] { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 0; color: #e9edf2; background: #101318; }
.settings-grid input[type="number"] { padding: 0 10px; }
.settings-grid fieldset { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px 14px; border: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.settings-grid .toggle { color: #c7cdd5; font-size: .78rem; }
.settings-save { grid-column: 1 / -1; border-color: rgba(154,229,43,.45); color: var(--green); }
.news-card { padding-bottom: 10px; }
.news-list { display: grid; }
.news-list article { display: grid; grid-template-columns: 10px 1fr; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); }
.news-list article p { margin: 3px 0; color: var(--muted); font-size: .83rem; }
.news-list article small { color: #777f8a; }
.news-direction { width: 8px; height: 8px; margin-top: 7px; border-radius: 0; background: #818995; }
.news-direction.up { background: var(--green); }
.news-direction.down { background: var(--pink); }
.story-count { color: var(--muted); font-size: .72rem; }
.rich-news .news-story { grid-template-columns: 88px minmax(0,1fr); gap: 17px; padding: 20px 0; }
.rich-news .news-story:first-child { border-top: 0; }
.rich-news .news-story.severity-crisis { margin-inline: -22px; padding-inline: 22px; border: 2px solid var(--pink); background: #25121c; }
.rich-news .news-story.severity-breaking.developing { animation: breaking-pulse 2.4s ease-in-out infinite; }
.pixel-event { display: block; width: 160px; height: 96px; border: 2px solid #303743; background: #0d1014; image-rendering: pixelated; }
.pixel-good-icon { width: 48px; height: 48px; margin-bottom: 8px; border: 2px solid #34404e; image-rendering: pixelated; }
.story-copy h4 { margin: 5px 0 4px; font-size: 1.04rem; }
.story-labels, .story-impact, .story-impact > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.story-labels span { color: var(--muted); font-size: .67rem; }
.story-labels .severity { padding: 3px 6px; border: 1px solid #5d6572; border-radius: 0; color: #dbe0e7; text-transform: uppercase; }
.severity-breaking .story-labels .severity { border-color: #e48b44; color: #ffc08f; }
.severity-crisis .story-labels .severity { border-color: var(--pink); color: #ff9ec1; }
.event-state { font-weight: 850; }
.story-impact { justify-content: space-between; margin-top: 11px; }
.affected-icon { display: grid; place-items: center; min-width: 27px; height: 27px; padding: 0 5px; border: 1px solid #536170; border-radius: 0; color: #acb5c1; background: #11151b; font-size: .63rem; font-weight: 900; }
.good-icon { border-color: rgba(99,212,201,.55); color: var(--wire); }
.price-direction { margin-left: auto; font-size: 1rem; }
.direction-flat { color: #929aa6; }
.travel-explainer { padding: 15px 17px; border: 1px dashed var(--line); color: var(--muted); font-size: .8rem; }
.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(3,4,6,.9); }
.quote-modal { position: relative; width: min(470px, 100%); border-color: var(--wire); box-shadow: 8px 8px 0 #000; }
.modal-close { position: absolute; top: 10px; right: 12px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 1.5rem; }
.quote-modal dl { display: grid; margin: 18px 0; }
.quote-modal dl div { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); }
.quote-modal dt { color: var(--muted); }
.quote-modal dd { margin: 0; font-weight: 900; }
.quote-modal .quote-total { color: var(--wire); font-size: 1.08rem; }
.quote-expiry { display: grid; gap: 7px; color: #ffca92; font-size: .75rem; }
.quote-expiry i { display: block; width: 100%; height: 4px; background: #2a3038; overflow: hidden; }
.quote-expiry i::after { content: ''; display: block; width: 100%; height: 100%; background: #e9974d; transform-origin: left; animation: quote-life var(--quote-life) linear forwards; }
.travel-note { color: var(--muted); font-size: .76rem; }

/* ─── Stage Victory Recap Modal ─── */
.stage-recap-modal { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 36px); overflow-y: auto; border-color: var(--wire); box-shadow: 8px 8px 0 #000; background: #0a0f17; }
.stage-recap-hero { text-align: center; padding: 28px 22px 20px; border-bottom: 2px solid #1a2430; }
.stage-recap-district { display: inline-block; padding: 3px 12px; border: 1px solid #2a3542; color: #7a8a9a; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
.stage-recap-verdict { display: block; font-size: .75rem; font-weight: 900; color: var(--wire); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.stage-recap-hero h2 { font-size: 1.08rem; line-height: 1.25; color: #e0e6ef; margin: 4px 0 8px; }
.stage-recap-meta { color: var(--muted); font-size: .76rem; margin: 0; }
.stage-recap-enemies { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 22px; border-bottom: 1px solid #1a2430; }
.stage-recap-enemies span { padding: 4px 12px; border: 1px solid #2a3542; border-radius: 2px; color: #8a9aaa; font-size: .72rem; font-weight: 700; background: #101822; }
.stage-recap-rewards { display: grid; gap: 0; padding: 0; }
.recap-reward { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 14px 22px; border-bottom: 1px solid #131d28; }
.recap-reward i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 2px; font-size: .9rem; font-weight: 900; font-style: normal; }
.recap-cash i { background: #1a2a1a; color: #9ae52b; border: 1px solid #2d4a2d; }
.recap-xp i { background: #1a1e2a; color: #48d7da; border: 1px solid #2a3748; }
.recap-act-bonus i { background: #2a2210; color: #f4a340; border: 1px solid #4a3a1a; }
.recap-levelup i { background: #1a1a2a; color: #b18cff; border: 1px solid #2e2e4a; }
.recap-calls i { background: #2a1a2a; color: #ed3e7c; border: 1px solid #4a2a3a; }
.recap-gear i { background: #1a2a28; color: #63d4c9; border: 1px solid #2a4540; }
.recap-loot i { background: #2a1a1a; color: #f4a340; border: 1px solid #4a3020; }
.recap-reward small { display: block; color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.recap-reward strong { display: block; font-size: .98rem; color: #dce2e8; }
.recap-reward span { display: block; color: var(--muted); font-size: .7rem; margin-top: 2px; }
.stage-recap-footer { padding: 16px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stage-recap-return { display: block; width: 100%; padding: 12px 20px; border: 0; background: var(--wire); color: #050912; font-size: .88rem; font-weight: 800; cursor: pointer; letter-spacing: .04em; transition: background .15s; }
.stage-recap-return:hover { background: #63e6e0; }
.stage-recap-return:focus-visible { outline: 3px solid var(--wire); outline-offset: 2px; }
.stage-recap-next { display: block; width: 100%; padding: 12px 20px; border: 1px solid var(--wire); background: transparent; color: var(--wire); font-size: .88rem; font-weight: 800; cursor: pointer; letter-spacing: .04em; transition: background .15s, color .15s; }
.stage-recap-next:hover { background: var(--wire); color: #050912; }
.stage-recap-next:focus-visible { outline: 3px solid var(--wire); outline-offset: 2px; }
.stage-recap-next:disabled { border-color: #2a3542; color: #4a5a6a; cursor: not-allowed; background: transparent; }

.stage-recap-xp-bar { padding: 16px 22px; border-top: 1px solid #1a2430; }
.stage-recap-xp-readout { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.recap-xp-label { font-size: .74rem; font-weight: 800; color: #a0b0c0; }
.recap-xp-label i { font-style: normal; display: inline-block; padding: 1px 8px; margin-right: 6px; background: #1a1a2a; color: #b18cff; border: 1px solid #2e2e4a; border-radius: 2px; font-size: .68rem; font-weight: 900; }
.recap-xp-gain { font-size: .74rem; font-weight: 700; color: var(--wire); }
.stage-recap-xp-track { position: relative; width: 100%; height: 8px; background: #0e151e; border: 1px solid #1a2430; border-radius: 1px; overflow: visible; }
.stage-recap-xp-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 1px; }
.stage-recap-xp-fill { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #48d7da, #63d4c9); animation: recap-xp-fill .9s ease-out .3s forwards; }
.stage-recap-xp-bar.has-levelups .stage-recap-xp-fill { animation: recap-xp-levelup .9s ease-out .3s forwards; }
@keyframes recap-xp-fill { 0% { width: 0; } 50% { width: var(--xp-fill); } 65% { width: calc(var(--xp-fill) * 0.88); } 78% { width: var(--xp-fill); } 100% { width: var(--xp-fill); } }
@keyframes recap-xp-levelup { 0% { width: 0; } 30% { width: 100%; } 38% { width: 0; } 68% { width: 100%; } 76% { width: 0; } 90% { width: var(--xp-fill); } 100% { width: var(--xp-fill); } }

.stage-recap-xp-sparkle { position: absolute; right: -6px; top: 50%; width: 0; height: 0; transform: translate(0, -50%); opacity: 0; pointer-events: none; }
.stage-recap-xp-sparkle::before,
.stage-recap-xp-sparkle::after { content: ''; position: absolute; border-radius: 50%; }
.stage-recap-xp-bar.has-levelups .stage-recap-xp-sparkle { animation: recap-sparkle-burst .9s ease-out .3s; }
.stage-recap-xp-bar.has-levelups .stage-recap-xp-sparkle::before { animation: recap-sparkle-particles .9s ease-out .3s; }
.stage-recap-xp-bar.has-levelups .stage-recap-xp-sparkle::after { animation: recap-sparkle-ring .9s ease-out .3s; }

@keyframes recap-sparkle-burst {
  0%, 30%, 38%, 68%, 76% { opacity: 0; }
  39% { opacity: 1; }
  42% { opacity: 0; }
  69% { opacity: 0; }
  77% { opacity: 1; }
  80% { opacity: 0; }
  90%, 100% { opacity: 0; }
}
@keyframes recap-sparkle-particles {
  0%, 38%, 76% { width: 0; height: 0; box-shadow: none; }
  39% { width: 4px; height: 4px; box-shadow:
    -18px -10px 0 #b18cff, 14px -16px 0 #f4d35e, 22px 4px 0 #48d7da,
    -20px 12px 0 #ed3e7c, -8px -22px 0 #9ae52b, 26px -8px 0 #f4a340,
    8px 18px 0 #63d4c9, -26px -2px 0 #b18cff;
    background: #fff; }
  44% { width: 0; height: 0; box-shadow:
    -28px -14px 0 transparent, 22px -24px 0 transparent, 34px 6px 0 transparent,
    -30px 18px 0 transparent, -12px -32px 0 transparent, 40px -14px 0 transparent,
    12px 28px 0 transparent, -40px -4px 0 transparent;
    background: #fff; }
  77% { width: 4px; height: 4px; box-shadow:
    -18px -10px 0 #b18cff, 14px -16px 0 #f4d35e, 22px 4px 0 #48d7da,
    -20px 12px 0 #ed3e7c, -8px -22px 0 #9ae52b, 26px -8px 0 #f4a340,
    8px 18px 0 #63d4c9, -26px -2px 0 #b18cff;
    background: #fff; }
  82%, 100% { width: 0; height: 0; box-shadow:
    -28px -14px 0 transparent, 22px -24px 0 transparent, 34px 6px 0 transparent,
    -30px 18px 0 transparent, -12px -32px 0 transparent, 40px -14px 0 transparent,
    12px 28px 0 transparent, -40px -4px 0 transparent;
    background: transparent; }
}
@keyframes recap-sparkle-ring {
  0%, 38%, 76% { width: 0; height: 0; border: 0; opacity: 0; }
  39% { width: 38px; height: 38px; border: 1px solid rgba(177,140,255,.5); opacity: 1; }
  45% { width: 60px; height: 60px; border: 0 solid transparent; opacity: 0; }
  77% { width: 38px; height: 38px; border: 1px solid rgba(177,140,255,.5); opacity: 1; }
  83%, 100% { width: 60px; height: 60px; border: 0 solid transparent; opacity: 0; }
}

.stage-recap-crew-grid { padding: 16px 22px; border-top: 1px solid #1a2430; }
.recap-crew-grid-label { display: block; color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.recap-crew-portraits { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.recap-crew-card { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #1a2430; background: #0c141d; }
.recap-crew-card.leveled-up { border-color: #2e2e4a; background: #0f0f1d; }
.recap-crew-avatar { width: 36px; height: 36px; overflow: hidden; }
.recap-crew-avatar canvas { width: 36px; height: 36px; }
.recap-crew-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recap-crew-info strong { font-size: .78rem; font-weight: 800; color: #c8d0d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recap-crew-info small { font-size: .66rem; color: var(--muted); }
.recap-crew-info .recap-crew-xp { font-size: .7rem; font-weight: 700; color: var(--wire); }
.recap-crew-card.leveled-up .recap-crew-info .recap-crew-xp { color: #b18cff; }

@keyframes breaking-pulse { 50% { background: rgba(228,139,68,.06); } }
@keyframes quote-life { to { transform: scaleX(0); } }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

.operation-grid { display: grid; gap: 16px; }
.operation-card { display: grid; grid-template-columns: 82px 1fr; gap: 18px; align-items: center; }
.operation-icon { display: grid; place-items: center; width: 82px; height: 82px; border: 2px solid var(--pink); border-radius: 0; color: var(--pink); background: #21131a; }
.operation-icon canvas { width: 64px; height: 64px; }
.locked-card { border-style: dashed; }

/* Idle operations */
@keyframes networkPulse { 50% { opacity: .45; } }
.operation-vault { display: grid; grid-template-columns: 1fr 1fr minmax(180px, .85fr) auto; align-items: center; gap: 14px; border-color: #527339; background: linear-gradient(100deg, #142018, #101821 70%); }
.operation-vault > div { display: grid; gap: 3px; padding-right: 18px; border-right: 1px solid #35413d; }
.operation-vault strong { color: var(--green); font: 900 clamp(1.35rem, 3vw, 2rem)/1.15 "Courier New", monospace; }
.operation-vault span { color: var(--muted); font-size: .7rem; }
.operation-vault button, .operation-business-action button { min-height: 44px; padding: 0 18px; border: 2px solid #8fce35; color: #0b1007; background: var(--green); box-shadow: 3px 3px 0 #344e12; cursor: pointer; font-weight: 900; }
.operation-vault button:disabled, .operation-business-action button:disabled { border-color: #3d4650; color: #727b84; background: #1a1f25; box-shadow: none; cursor: not-allowed; }
.operation-collection-console { position: relative; overflow: hidden; }
.operation-collection-console::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--green); content: ""; }
.operation-collection-console .collection-capacity { gap: 6px; }
.collection-capacity > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.collection-capacity > div strong { color: var(--wire); font-size: .8rem; }
.collection-capacity > i { display: block; height: 10px; overflow: hidden; border: 1px solid #425049; background: #070d0c; }
.collection-capacity > i b { display: block; height: 100%; background: linear-gradient(90deg, var(--wire), var(--green)); }
.collection-capacity small { color: #718087; font-size: .53rem; }
.operation-collection-console > button { display: grid; align-content: center; gap: 2px; min-width: 184px; }
.operation-collection-console > button span { color: inherit; font-size: .66rem; }
.operation-collection-console > button small { color: #24310f; font-size: .49rem; font-weight: 800; }
.operation-collection-console > button:disabled small { color: #68717a; }
.operation-message { margin: 0; padding: 11px 14px; border-left: 4px solid var(--wire); color: #dce5e7; background: #102029; }
.operation-list-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-top: 4px; }
.operation-list-heading h3 { margin: 2px 0 0; font-size: 1.05rem; }
.operation-list-heading > span { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #43503f; color: var(--green); background: #0d160f; font-size: .53rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.operation-list-heading p { max-width: 710px; margin: 4px 0 0; color: #8f9ca4; }
.operation-list { display: grid; gap: 12px; }
.operation-business { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(190px, .34fr); align-items: center; gap: 18px; overflow: hidden; padding: 0 17px 17px; border-color: #3d4a54; box-shadow: 5px 5px 0 #05080c; }
.operation-business.selected-operation { border-color: #79a43a; box-shadow: inset 4px 0 0 var(--green), 5px 5px 0 #05080c; }
.operation-business-status { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin: 0 -17px; padding: 0 14px 0 18px; border-bottom: 1px solid #35434c; background: #0b1218; }
.operation-business-status span { display: inline-flex; align-items: center; gap: 7px; color: #89969e; font-size: .51rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.operation-business-status span i { width: 6px; height: 6px; background: var(--green); box-shadow: 0 0 7px rgba(154,229,43,.55); }
.selected-operation .operation-business-status span { color: var(--green); }
.operation-business-status > b { color: var(--wire); font-size: .51rem; letter-spacing: .07em; text-transform: uppercase; }
.operation-business-icon { position: relative; display: grid; place-items: center; width: 92px; height: 92px; border: 2px solid var(--pink); color: var(--pink); background: #24141d; }
.operation-business-icon canvas { width: 64px; height: 64px; }
.operation-business-icon > span { position: absolute; right: 4px; bottom: 4px; padding: 3px 5px; border: 1px solid #8f4e68; color: #ffc0d7; background: #100a0e; font: 900 .58rem/1 "Courier New", monospace; }
.operation-business-copy { min-width: 0; }
.operation-business-copy .section-heading { align-items: flex-start; }
.operation-business-copy p { margin-bottom: 8px; color: var(--muted); }
.operation-rate { display: grid; justify-items: end; flex: 0 0 auto; gap: 2px; }
.operation-rate span { color: #74828a; font-size: .49rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.operation-rate strong { color: var(--green); font: 900 .9rem/1.2 "Courier New", monospace; }
.operation-rate small { color: #75828a; font-size: .5rem; }
.operation-feature { display: flex; flex-wrap: wrap; gap: 5px 10px; padding: 8px 10px; border-left: 3px solid var(--wire); background: #0e1b22; }
.operation-feature b { color: var(--wire); font-size: .67rem; text-transform: uppercase; }
.operation-feature span { color: #b9c2ca; font-size: .68rem; }
.operation-core-progress { display: grid; gap: 5px; margin-top: 10px; }
.operation-core-progress > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #7e8c94; font-size: .55rem; }
.operation-core-progress strong { color: #cdd5d9; font-size: .57rem; }
.operation-core-progress > i { display: block; height: 8px; overflow: hidden; border: 1px solid #3b4850; background: #080d11; }
.operation-core-progress > i b { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--wire)); }
.operation-unlock { display: grid; gap: 5px; margin-top: 10px; }
.operation-unlock > span { color: #8f9aa5; font-size: .62rem; }
.operation-unlock > i { display: block; height: 7px; overflow: hidden; border: 1px solid #3d4651; background: #080c11; }
.operation-unlock > i b { display: block; height: 100%; background: linear-gradient(90deg, var(--wire), var(--green)); }
.operation-business-action { display: grid; align-content: center; gap: 5px; min-height: 100%; padding-left: 16px; border-left: 1px solid #35404b; text-align: right; }
.operation-business-action span { color: var(--muted); font-size: .62rem; }
.operation-business-action strong { color: var(--amber); font: 900 1.04rem/1.2 "Courier New", monospace; }
.operation-business-action button { margin-top: 7px; }
.operation-upgrade-tree { grid-column: 2 / -1; min-width: 0; padding-top: 14px; border-top: 2px solid #34414b; }
.operation-upgrade-tree > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 0 10px; border: 1px solid #3c4c56; background: #0d161c; cursor: pointer; list-style: none; }
.operation-upgrade-tree > summary::-webkit-details-marker { display: none; }
.operation-upgrade-tree > summary::after { color: var(--wire); content: "+"; font: 900 1rem/1 "Courier New", monospace; }
.operation-upgrade-tree[open] > summary::after { content: "−"; }
.operation-upgrade-tree > summary h4 { margin: 3px 0 0; color: #e2e7ea; font: 900 .84rem/1.25 "Courier New", monospace; }
.operation-specialization-summary { display: grid; grid-template-columns: auto 100px auto; align-items: center; gap: 8px; margin-left: auto; }
.operation-specialization-summary span, .operation-specialization-summary em { color: #81909a; font-size: .52rem; font-style: normal; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.operation-specialization-summary > i { display: block; width: 100px; height: 7px; overflow: hidden; border: 1px solid #3d4851; background: #080d11; }
.operation-specialization-summary > i b { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--green)); }
.operation-upgrade-tree > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.operation-upgrade-tree[open] > div { padding-top: 9px; }
.operation-path { display: grid; grid-template-rows: auto auto auto auto 1fr; gap: 8px; min-width: 0; padding: 11px; border: 2px solid #40515d; background: #0c151b; }
.operation-path:hover { border-color: #57717a; background: #101c23; }
.operation-path.locked { opacity: .58; border-style: dashed; }
.operation-path.complete { border-color: #5b7b38; background: #111b12; }
.operation-path > header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.operation-path-art { --art-highlight: #e9f8f5; --art-shadow: #071116; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid currentColor; color: var(--wire); background: linear-gradient(135deg, color-mix(in srgb, currentColor 22%, #0a1117), #081016 66%); box-shadow: inset 0 0 0 2px #0b151c, 2px 2px 0 #05080b; transition: transform 80ms steps(2, end), filter 80ms linear; }
.operation-path:hover .operation-path-art { transform: translateY(-1px); filter: brightness(1.18); }
.operation-path-art svg { width: 30px; height: 30px; overflow: visible; fill: currentColor; image-rendering: pixelated; }
.operation-path.complete .operation-path-art { color: var(--green); box-shadow: inset 0 0 0 2px #0b1510, 0 0 0 1px rgba(154,229,43,.28), 2px 2px 0 #05080b; }
.operation-path-art.art-income_percent, .operation-path-art.art-flat_income { --art-highlight: #ffd45c; color: #9ae52b; }
.operation-path-art.art-heat_reduction { --art-highlight: #63e6df; color: #ed3e7c; }
.operation-path-art.art-trade_capacity, .operation-path-art.art-offline_hours { --art-highlight: #a4f2ef; color: #4dbbd2; }
.operation-path-art.art-crew_xp, .operation-path-art.art-training_slots { --art-highlight: #f1c35b; color: #9a78eb; }
.operation-path-art.art-craft_yield, .operation-path-art.art-craft_tier { --art-highlight: #64e3d7; color: #f2a640; }
.operation-path-art.art-daily_offers, .operation-path-art.art-market_fee, .operation-path-art.art-order_size { --art-highlight: #9ae52b; color: #f2bd4d; }
.operation-path-art.art-recovery_speed { --art-highlight: #ffffff; color: #e95f6c; }
.operation-path-art.art-dispatch_slots { --art-highlight: #ed3e7c; color: #54d4d0; }
.operation-path-art.art-recruit_quality, .operation-path-art.art-recruit_discount { --art-highlight: #f0c455; color: #c776e7; }
.operation-path-art.art-guild_projects, .operation-path-art.art-guild_rewards { --art-highlight: #64e3d7; color: #d86bd1; }
.operation-path-art.art-district_projects, .operation-path-art.art-project_rewards { --art-highlight: #64e3d7; color: #d86bd1; }
.operation-path-art.art-endgame_projects { --art-highlight: #f7d063; color: #f04d83; }
.operation-path > header div { display: grid; min-width: 0; gap: 2px; }
.operation-path > header small { color: #788691; font-size: .49rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.operation-path > header strong { overflow: hidden; color: #e1e7ea; font: 900 .68rem/1.2 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
.operation-path > header b { color: var(--wire); font-size: .53rem; white-space: nowrap; }
.operation-path > p { margin: 0; color: #88959f; font-size: .59rem; line-height: 1.45; }
.operation-path-ranks { display: flex; gap: 2px; }
.operation-path-ranks i { flex: 1; height: 6px; border: 1px solid #394650; background: #080d11; }
.operation-path-ranks i.filled { border-color: #7bab37; background: linear-gradient(90deg, var(--wire), var(--green)); }
.operation-path-rank-meta { display: flex; justify-content: space-between; gap: 8px; color: #6f7f89; font-size: .48rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.operation-path-rank-meta span:first-child { color: var(--wire); }
.operation-path-effect { display: grid; gap: 3px; padding: 7px 8px; border-left: 3px solid var(--wire); background: #101d23; }
.operation-path-effect span { color: #77858f; font-size: .48rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.operation-path-effect strong { color: #b9dadd; font-size: .57rem; }
.operation-path > footer { align-self: end; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; padding-top: 8px; border-top: 1px solid #303d47; }
.operation-path > footer span { color: var(--amber); font-size: .53rem; font-weight: 850; }
.operation-path > footer button { min-height: 31px; padding: 0 9px; border: 1px solid #79aa36; color: #0d1308; background: var(--green); cursor: pointer; font-size: .56rem; font-weight: 950; }
.operation-path > footer button:disabled { border-color: #3d4852; color: #6f7880; background: #171d22; cursor: not-allowed; }
.operation-next { border-style: dashed; opacity: .72; }
.operation-next.available { border-style: solid; border-color: #58822d; opacity: 1; background: #141d16; }
.operation-next .operation-business-icon { border-color: #4a5662; color: #87919c; background: #11161c; }
.operation-next.available .operation-business-icon { border-color: var(--green); color: var(--green); }

/* The lineup reads as one more Crew panel, not a Story-flavoured island: it
   carries the crew palette and the page's cyan accent instead of Story green. */
.story-lineup { display: grid; gap: 11px; border-color: #43515d; background: #0b1118; }
.crew-lineup-console { position: relative; padding: 15px 16px; box-shadow: 5px 5px 0 #05080c; }
.crew-lineup-console::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--wire); content: ""; }
.story-lineup .section-heading { flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.story-lineup .section-heading > div:first-child { min-width: 0; }
.story-lineup .section-heading h3 { margin-bottom: 0; }
.lineup-console-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.lineup-console-actions > span { flex: 0 0 auto; color: var(--wire); font: 900 .72rem/1.2 "Courier New", monospace; white-space: nowrap; }
.lineup-optimize { min-height: 34px; padding: 0 12px; border: 2px solid var(--green); color: #0b1007; background: var(--green); font-weight: 900; cursor: pointer; }
.lineup-optimize:hover { box-shadow: 0 0 12px rgba(154, 229, 43, .3); }
.lineup-optimize:disabled { border-color: #3a424c; color: #737c87; background: #15191f; cursor: not-allowed; }
.lineup-optimize.lineup-auto-equip { border-color: var(--wire); color: #08110f; background: var(--wire); }
.lineup-optimize.lineup-auto-equip:hover { box-shadow: 0 0 12px rgba(99, 212, 201, .3); }
.lineup-message { margin: 8px 0 0; padding: 7px 10px; border: 1px solid #39483b; color: #b7d08a; background: #0c130d; font-size: .6rem; font-weight: 800; }
.lineup-brief { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.lineup-brief > p { flex: 1 1 260px; min-width: 0; margin: 0; color: var(--muted); font-size: .72rem; }
.lineup-brief > div { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lineup-brief span { padding: 5px 7px; border: 1px solid #3a4551; color: #93a0ac; background: #0d141b; font-size: .53rem; font-weight: 800; white-space: nowrap; text-transform: uppercase; }
.lineup-brief i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; background: var(--wire); }
.lineup-brief span:last-child i { background: var(--green); }
.lineup-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 8px; }
.lineup-slot { position: relative; min-width: 0; min-height: 104px; border: 1px solid #425143; background: linear-gradient(135deg, #111a13, #0b110c); }
.lineup-slot.occupied { display: grid; grid-template-columns: 68px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: 5px 10px; padding: 10px; }
.lineup-slot.leader { border-color: #74a93a; background: linear-gradient(135deg, #172418, #0c130d); box-shadow: inset 0 0 0 1px rgba(154,229,43,.12); }
.lineup-slot-index { position: absolute; top: 6px; right: 7px; color: #617069; font: 900 .57rem/1 "Courier New", monospace; }
.lineup-slot-avatar { grid-row: 1 / 3; display: grid; place-items: end center; width: 68px; height: 82px; overflow: hidden; border-bottom: 2px solid #344336; background: radial-gradient(circle at 50% 70%, rgba(45,218,255,.08), transparent 58%); }
.lineup-slot-avatar > div { width: 68px; height: 82px; }
.lineup-slot-copy { display: grid; align-self: end; min-width: 0; gap: 3px; }
.lineup-slot-copy small { color: var(--green); font-size: .49rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.lineup-slot-copy strong { overflow: hidden; color: #e0e6e9; font: 900 .7rem/1.2 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
.lineup-slot-copy em { color: #78868f; font: normal 800 .52rem/1.2 Arial, sans-serif; }
.lineup-lock { align-self: start; justify-self: start; padding: 3px 5px; border: 1px solid #4e6635; color: var(--green); font-size: .47rem; font-weight: 900; text-transform: uppercase; }
.lineup-slot > button { align-self: start; justify-self: start; min-height: 25px; padding: 0 7px; border: 1px solid #74505d; color: #efa2bd; background: #22121a; font-size: .52rem; font-weight: 850; cursor: pointer; }
.lineup-slot.empty { display: grid; place-content: center; justify-items: center; gap: 3px; padding: 12px; border-style: dashed; text-align: center; opacity: .82; }
.lineup-slot.empty > b { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 3px; border: 1px solid #425b61; color: var(--wire); background: #0e181a; font: 400 1rem/1 Arial, sans-serif; }
.lineup-slot.empty > strong { color: #a3adb3; font: 900 .66rem/1.2 "Courier New", monospace; }
.lineup-slot.empty > small { color: #68767e; font-size: .52rem; }
.crew-roster-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 10px; border-bottom: 1px solid #2c3742; }
.crew-roster-heading h3 { margin: 0; font-size: .95rem; }
.crew-roster-heading > span { flex: 0 0 auto; padding: 6px 9px; border: 1px solid #3d4b56; color: var(--wire); background: #0c1319; font: 900 .58rem/1 "Courier New", monospace; text-transform: uppercase; }
.crew-toolbar { display: grid; gap: 11px; padding: 12px 13px; border-color: #3d4954; background: #0d141b; }
.crew-filters { display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(3, minmax(126px, .7fr)); align-items: end; gap: 9px; }
.crew-toolbar label { display: grid; gap: 5px; }
.crew-toolbar label > span { color: #778691; font-size: .55rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.crew-search > div { position: relative; }
.crew-search i { position: absolute; top: 50%; left: 10px; color: var(--wire); font: normal 900 .9rem/1 "Courier New", monospace; transform: translateY(-50%); }
.crew-toolbar input, .crew-toolbar select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid #465260; border-radius: 0; color: var(--ink); background: #080e14; font: 700 .72rem/1 Arial, sans-serif; }
.crew-toolbar input { padding-left: 30px; }
.crew-toolbar input:focus, .crew-toolbar select:focus { border-color: var(--wire); outline: 1px solid rgba(45,218,255,.24); }
.crew-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crew-card { position: relative; display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch; gap: 0 16px; min-width: 0; padding: 0 16px 14px 0; overflow: hidden; color: inherit; text-align: left; }
.crew-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--crew-rarity); content: ""; }
.crew-card.leader { border-color: rgba(154,229,43,.48); }
.crew-card.active-lineup { box-shadow: inset 0 0 0 1px rgba(154,229,43,.22), 4px 4px 0 #05070a; }
.crew-card[hidden] { display: none; }
.crew-card-status { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 31px; padding: 0 10px 0 13px; border-bottom: 1px solid #35414b; background: #0c1218; }
.crew-card-status span { color: var(--green); font-size: .5rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.crew-card:not(.active-lineup) .crew-card-status span { color: #6f7b84; }
.crew-card-status b { color: var(--crew-rarity); font-size: .5rem; letter-spacing: .07em; text-transform: uppercase; }
.crew-avatar-stage { position: relative; display: grid; place-items: end center; min-height: 166px; border-right: 1px solid #34414b; background: radial-gradient(circle at 50% 65%, rgba(45,218,255,.11), transparent 52%), linear-gradient(#121b24, #0b1117); }
.crew-avatar { width: 110px; height: 150px; }
.crew-avatar-stage > em { position: absolute; right: 6px; bottom: 6px; padding: 3px 5px; border: 1px solid #495761; color: #c1c8ce; background: #0b1016; font: normal 900 .53rem/1 "Courier New", monospace; }
.crew-card-copy { display: grid; align-content: start; min-width: 0; padding-top: 13px; }
.crew-card-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.crew-card-title h3 { margin: 3px 0 0; }
.crew-card-title p { margin: 0; }
.crew-combat-score { display: grid; justify-items: end; gap: 2px; }
.crew-combat-score span { color: #697781; font-size: .46rem; font-weight: 900; text-transform: uppercase; }
.crew-combat-score strong { color: var(--wire); font: 900 .84rem/1 "Courier New", monospace; }
.crew-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.crew-card-actions button { min-height: 34px; padding: 0 11px; border: 1px solid #4b5967; color: var(--wire); background: #101820; font-size: .62rem; font-weight: 850; cursor: pointer; }
.crew-card-actions button:last-child { border-color: #5d7c31; color: var(--green); }
.crew-card-actions button:hover:not(:disabled), .crew-card-actions button:focus-visible { border-color: var(--wire); outline: none; background: #14222b; }
.crew-card-actions button:disabled { opacity: .4; cursor: not-allowed; }
.crew-card-actions span { align-self: center; color: var(--green); font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.crew-skill-preview { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.crew-skill-preview > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid #34434e; color: #9fabb3; background: #0b1218; font-size: .51rem; }
.crew-skill-preview .skill-icon { width: 18px; height: 18px; border-width: 1px; box-shadow: none; }
.crew-empty { color: var(--muted); text-align: center; }
.crew-roster-heading-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.crew-codex-button { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 5px 10px; border: 1px solid var(--wire); color: var(--ink); background: #101a20; cursor: pointer; text-align: left; }
.crew-codex-button:hover, .crew-codex-button:focus-visible { border-color: var(--green); outline: none; }
.crew-codex-button > span { color: var(--pink); font: 900 .85rem/1 "Courier New", monospace; }
.crew-codex-button strong { color: var(--wire); font: 900 .6rem/1 "Courier New", monospace; text-transform: uppercase; white-space: nowrap; }
.crew-codex-button em { min-width: 22px; padding: 2px 5px; border: 1px solid #547135; color: var(--green); background: #111b12; font: normal 900 .58rem/1.2 "Courier New", monospace; text-align: center; }
.crew-collection { display: grid; gap: 15px; margin-top: 20px; padding: 18px; border-color: #4c5966; background: #10151c; }
.crew-codex-backdrop { z-index: 24; }
.crew-codex-modal { position: relative; width: min(1180px, 100%); max-height: calc(100vh - 32px); margin-top: 0; overflow-y: auto; border-color: var(--wire); box-shadow: 8px 8px 0 #000; }
.crew-codex-modal > .modal-close { z-index: 2; top: 12px; right: 13px; }
.crew-codex-modal .crew-collection-header { padding-right: 48px; }
.crew-codex-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 7px; padding: 42px 20px; border: 1px dashed #4a5764; color: var(--muted); background: #0b1117; text-align: center; }
.crew-codex-empty > span { display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid #4c5966; color: var(--wire); font: 900 1.5rem/1 "Courier New", monospace; }
.crew-codex-empty h3, .crew-codex-empty p { margin: 0; }
.crew-codex-empty p { max-width: 470px; }
.crew-collection-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 2px solid #34414c; }
.crew-collection-header h2 { margin: 4px 0 7px; }
.crew-collection-header p:last-child { max-width: 760px; margin: 0; color: var(--muted); }
.crew-collection-count { display: grid; justify-items: end; }
.crew-collection-count strong { color: var(--green); font: 900 1.75rem/1 "Courier New", monospace; }
.crew-collection-count span { color: #84919c; font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.crew-collection-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.crew-collection-stats article { display: grid; gap: 2px; padding: 11px 12px; border: 1px solid #3c4854; background: #0b1117; }
.crew-collection-stats span, .crew-collection-stats small { color: #7f8b95; font-size: .56rem; }
.crew-collection-stats span { font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.crew-collection-stats strong { color: var(--wire); font: 900 1.2rem/1.1 "Courier New", monospace; }
.crew-rarity-ledger { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.crew-rarity-ledger span { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #3b4651; background: #111820; }
.crew-rarity-ledger i { width: 7px; height: 18px; background: var(--rarity-color); box-shadow: 0 0 8px color-mix(in srgb, var(--rarity-color), transparent 45%); }
.crew-rarity-ledger b { color: #b5bec6; font-size: .58rem; }
.crew-rarity-ledger em { color: var(--rarity-color); font: normal 900 .67rem/1 "Courier New", monospace; }
.crew-catalog-toolbar { display: grid; grid-template-columns: minmax(210px, 1.5fr) repeat(3, minmax(140px, .7fr)) auto; align-items: end; gap: 8px; padding: 10px; border: 1px solid #3d4955; background: #0a1016; }
.crew-catalog-toolbar label { display: grid; gap: 4px; }
.crew-catalog-toolbar label > span { color: #7f8b95; font-size: .53rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.crew-catalog-toolbar input, .crew-catalog-toolbar select { width: 100%; min-height: 37px; padding: 0 9px; border: 1px solid #44515d; color: #dde3e6; background: #121921; font-size: .66rem; font-weight: 750; }
.crew-catalog-toolbar > strong { align-self: center; color: var(--wire); font: 900 .62rem/1.2 "Courier New", monospace; white-space: nowrap; }
.crew-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.crew-catalog-card { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 9px 12px; min-height: 214px; padding: 11px; overflow: hidden; border: 2px solid #424d58; background: #121920; box-shadow: 3px 3px 0 #06090c; }
.crew-catalog-card::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ''; background: var(--rarity-color); }
.crew-catalog-card.owned { border-color: var(--green); background: #121c14; }
.crew-catalog-card.available { border-color: color-mix(in srgb, var(--rarity-color), #3c4650 45%); }
.crew-catalog-card.locked { opacity: .72; }
.crew-catalog-avatar { width: 84px; height: 110px; border: 1px solid #465461; background: #0b1117; }
.crew-catalog-avatar .pixel-avatar-canvas { width: 84px; height: 110px; }
.crew-collection-number { position: absolute; top: 7px; left: 7px; padding: 3px 5px; border: 1px solid var(--rarity-color); color: var(--rarity-color); background: #090e14e8; font: 900 .5rem/1 "Courier New", monospace; }
.crew-catalog-copy { min-width: 0; }
.crew-catalog-copy > small { color: var(--rarity-color); font-size: .52rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.crew-catalog-copy h3 { overflow: hidden; margin: 5px 0 3px; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.crew-catalog-copy > p { margin: 0 0 8px; color: #84919c; font-size: .58rem; }
.crew-catalog-copy > div { display: flex; flex-wrap: wrap; gap: 4px; }
.crew-catalog-copy > div span { padding: 3px 5px; border: 1px solid #3f4d58; color: #a9cfd0; background: #0d171d; font-size: .48rem; }
.crew-catalog-card footer { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; padding-top: 8px; border-top: 1px solid #35414c; }
.crew-acquisition-status { color: var(--green); font-size: .53rem; font-weight: 900; text-transform: uppercase; }
.crew-catalog-card.locked .crew-acquisition-status { color: var(--amber); }
.crew-catalog-card footer small { overflow: hidden; color: #7f8b95; font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }
.crew-catalog-card footer button { min-height: 30px; padding: 0 8px; border: 1px solid var(--rarity-color); color: var(--rarity-color); background: #0b1117; cursor: pointer; font-size: .52rem; font-weight: 900; }
.crew-catalog-pagination { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.crew-catalog-pagination button { min-height: 36px; padding: 0 13px; border: 1px solid #53606c; color: var(--wire); background: #121921; cursor: pointer; font-size: .6rem; font-weight: 900; }
.crew-catalog-pagination button:disabled { opacity: .3; cursor: not-allowed; }
.crew-catalog-pagination span { color: #84919b; font: 800 .58rem/1.3 "Courier New", monospace; text-align: center; }
.crew-initial { display: grid; place-items: center; width: 86px; height: 86px; border: 2px solid var(--pink); border-radius: 0; color: #ffc0d5; background: #2b1922; font-size: 2rem; font-weight: 900; }
.recruitment-card { border-color: rgba(99,212,201,.35); }
.empty-state { color: var(--muted); }
.fatal-card { width: min(520px, calc(100% - 30px)); margin: 18vh auto 0; padding: 28px; }

/* Street economy */
.market-vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.market-vitals article { display: grid; gap: 2px; padding: 9px 14px; border: 2px solid var(--line); background: #10141a; box-shadow: 3px 3px 0 #05070a; }
.market-vitals span, .market-vitals small { color: var(--muted); font-size: .68rem; }
.market-vitals span { font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.market-vitals strong { color: var(--green); font: 900 1.1rem/1.2 "Courier New", monospace; }
.market-vitals .heat-low { color: var(--wire); }
.market-vitals .heat-warm { color: var(--amber); }
.market-vitals .heat-high { color: var(--red); }
.market-workspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, .95fr); gap: 14px; align-items: start; }
.market-desk { padding: 0; overflow: hidden; }
.market-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border-bottom: 2px solid var(--line); background: #11161d; }
.category-tabs { display: flex; flex-wrap: nowrap; gap: 5px; min-width: 0; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; scrollbar-color: #465363 #11161d; }
.category-tabs button { flex: 0 0 auto; white-space: nowrap; }
.category-tabs button, .quantity-stepper button { min-height: 34px; border: 1px solid #414a57; color: #b8c0ca; background: #1e252e; cursor: pointer; font-size: .7rem; font-weight: 850; }
.category-tabs button { padding: 0 10px; }
.category-tabs button.active { border-color: var(--green); color: #0b1007; background: var(--green); }
.quantity-stepper { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.quantity-stepper > span { color: var(--muted); font-size: .67rem; font-weight: 800; text-transform: uppercase; }
.quantity-stepper button { width: 34px; padding: 0; color: var(--wire); font-size: 1rem; }
.quantity-stepper strong { min-width: 24px; text-align: center; }
.goods-table-head, .market-row-card { display: grid; grid-template-columns: minmax(210px, 1.5fr) minmax(80px, .65fr) minmax(85px, .7fr) 56px minmax(120px, .8fr); align-items: center; gap: 10px; }
.goods-table-head { padding: 9px 14px; border-bottom: 1px solid var(--line); color: #737e8c; font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.goods-list { display: grid; max-height: 780px; overflow-y: auto; scrollbar-color: #465363 #10151b; }
.market-row-card { min-height: 82px; padding: 10px 14px; border-bottom: 1px solid #2d3540; background: #151a21; }
.market-row-card:hover { background: #19212a; }
.good-identity { display: grid; grid-template-columns: 24px 44px 1fr; align-items: center; gap: 8px; min-width: 0; }
.good-identity .favorite-button { position: static; padding: 0; }
.good-identity .pixel-good-icon { width: 42px; height: 42px; margin: 0; object-fit: contain; }
.good-identity > span { display: grid; min-width: 0; }
.good-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.good-identity small { color: var(--muted); font-size: .63rem; text-transform: capitalize; }
.good-price { min-width: 0; overflow: hidden; color: var(--wire); font: 900 1.1rem/1 "Courier New", monospace; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.good-movement, .good-owned { font-size: .75rem; font-weight: 850; }
.good-owned { color: #dbe0e6; text-align: center; }
.market-row-card .quote-actions { margin: 0; }
.market-row-card .quote-actions button { flex: 1; min-width: 0; min-height: 34px; padding: 0 8px; font-size: .7rem; }
.market-row-card .quote-actions button:first-child { border-color: #597e29; color: var(--green); }
.market-row-card .quote-actions button:last-child { border-color: #2e6e70; color: var(--wire); }
.market-row-card .quote-actions button:disabled { opacity: .35; cursor: not-allowed; }
.streetwire-rail { position: sticky; top: 12px; overflow: hidden; padding: 0; border-color: #3b8990; background: #0a1118; box-shadow: inset 0 0 0 1px #132632, 6px 6px 0 #05080c; }
.wire-terminal-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 14px; border-bottom: 1px solid #315662; background: linear-gradient(135deg, #142735, #0d1721 70%); }
.wire-terminal-head::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: linear-gradient(90deg, var(--wire) 0 28%, var(--pink) 28% 43%, var(--amber) 43% 56%, transparent 56%); content: ''; }
.wire-terminal-head h3 { margin: 3px 0 4px; color: #eef6f7; font-size: 1.08rem; }
.wire-terminal-head > div > span { color: #8095a3; font-size: .64rem; }
.live-light { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 5px 7px; border: 1px solid #5f9133; color: var(--green); background: #101d13; font-size: .56rem; font-weight: 900; letter-spacing: .08em; }
.live-light i { width: 6px; height: 6px; background: var(--green); box-shadow: 0 0 8px var(--green); animation: wire-live 1.4s steps(2, end) infinite; }
.wire-pulse { margin: 12px; border: 1px solid #2d5360; background: #0d1821; box-shadow: inset 0 0 18px #071017; }
.wire-pulse-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 9px; }
.wire-pulse-heading > div { display: grid; grid-template-columns: 8px 1fr; column-gap: 7px; align-items: center; }
.wire-pulse-heading small { color: #718896; font-size: .52rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.wire-pulse-heading strong { grid-column: 2; margin-top: 2px; color: #e7eef1; font: 900 .77rem/1.2 "Courier New", monospace; }
.wire-pulse-heading > b { padding: 4px 6px; border: 1px solid #41566a; color: #91a3af; font-size: .5rem; letter-spacing: .07em; }
.signal-dot { grid-row: 1 / 3; width: 7px; height: 7px; background: var(--wire); box-shadow: 0 0 8px var(--wire); }
.wire-signal-bars { display: flex; align-items: center; gap: 3px; height: 42px; padding: 5px 12px; border-block: 1px solid #223945; background: repeating-linear-gradient(0deg, transparent 0 8px, #18303b 9px); }
.wire-signal-bars i { flex: 1; height: var(--signal); min-height: 4px; max-height: 100%; align-self: center; background: #657280; opacity: .78; }
.wire-signal-bars i.up { background: var(--green); box-shadow: 0 0 5px #9be72355; }
.wire-signal-bars i.down { background: var(--pink); box-shadow: 0 0 5px #ff4f9a55; }
.wire-pulse-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.wire-pulse-stats div { padding: 9px 10px; border-right: 1px solid #223945; }
.wire-pulse-stats div:last-child { border-right: 0; }
.wire-pulse-stats dt { color: #71828f; font-size: .5rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.wire-pulse-stats dd { margin: 3px 0 0; color: #dce8ec; font: 900 .84rem/1 "Courier New", monospace; }
.wire-top-mover { display: grid; grid-template-columns: 38px 34px 1fr; align-items: center; gap: 8px; padding: 9px 11px; border-top: 1px solid #223945; }
.wire-top-mover > span { color: #71828f; font-size: .5rem; font-weight: 850; text-transform: uppercase; }
.wire-top-mover .pixel-good-icon { width: 30px; height: 30px; image-rendering: pixelated; }
.wire-top-mover div { display: grid; }
.wire-top-mover strong { color: #dbe4e8; font-size: .66rem; }
.wire-top-mover small { color: var(--amber); font-size: .57rem; }
.wire-feed-label { display: flex; justify-content: space-between; margin: 16px 12px 7px; color: #738895; font-size: .52rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.wire-feed-label b { color: var(--pink); }
.wire-stories { display: grid; gap: 8px; margin: 0 12px; }
.wire-story-card { position: relative; overflow: hidden; padding: 12px; border: 1px solid #2a3d49; border-left: 3px solid var(--wire); background: #101922; }
.wire-story-card::after { position: absolute; top: 0; right: 0; width: 34px; height: 3px; background: var(--wire); content: ''; }
.wire-story-card.severity-breaking { border-left-color: var(--amber); }.wire-story-card.severity-breaking::after { background: var(--amber); }
.wire-story-card.severity-crisis { border-left-color: var(--red); background: #1c1218; }.wire-story-card.severity-crisis::after { background: var(--red); }
.wire-story-card.featured { padding: 14px; border-width: 1px 1px 1px 4px; background: linear-gradient(135deg, #142534, #101922 72%); box-shadow: inset 0 0 24px #061018; }
.wire-story-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wire-story-card > header > small { color: #667985; font-size: .52rem; text-transform: uppercase; }
.wire-story-status { display: inline-flex; align-items: center; gap: 6px; color: #9db0bb; font-size: .52rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.wire-story-status i { width: 6px; height: 6px; background: var(--wire); box-shadow: 0 0 7px var(--wire); }
.wire-category { display: inline-block; margin-top: 10px; color: var(--pink); font-size: .5rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.wire-story-title h4 { margin: 3px 0 6px; color: #edf2f3; font-size: .82rem; line-height: 1.25; }
.wire-story-title p, .wire-empty p { margin: 0; color: #8fa0aa; font-size: .64rem; line-height: 1.45; }
.wire-pressure { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; padding: 7px 8px; border: 1px solid currentColor; background: #090f15; }
.wire-pressure > span { font-size: .85rem; }.wire-pressure div { display: grid; }.wire-pressure small { color: #73848f; font-size: .47rem; font-weight: 850; text-transform: uppercase; }.wire-pressure strong { font-size: .62rem; }
.wire-affected-goods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.wire-affected-goods > div { display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 6px; min-width: 0; padding: 5px; border: 1px solid #263b47; background: #0b131a; }
.wire-affected-goods .pixel-good-icon { width: 25px; height: 25px; object-fit: contain; image-rendering: pixelated; }
.wire-affected-goods span { display: grid; min-width: 0; }.wire-affected-goods strong { overflow: hidden; color: #bdc8ce; font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }.wire-affected-goods small { font-size: .52rem; font-weight: 900; }
.wire-story-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #293b46; }
.wire-story-card > footer > span { color: #667985; font-size: .48rem; font-weight: 850; text-transform: uppercase; }
.wire-story-card > footer > div { display: flex; gap: 4px; }.wire-story-card .affected-icon { min-width: 23px; height: 21px; padding: 0 4px; border-color: #38515d; color: #9fb2bc; font-size: .5rem; }
.wire-empty { margin: 0; padding: 18px; border: 1px dashed #36505d; background: #0d171e; }
.wire-intel-note { display: grid; grid-template-columns: 25px 1fr; gap: 8px; margin: 12px; padding: 9px; border: 1px solid #29404b; background: #0b141b; }
.wire-intel-note > span { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--wire); color: var(--wire); font: 900 .68rem/1 "Courier New", monospace; }
.wire-intel-note p { margin: 0; color: #758995; font-size: .56rem; line-height: 1.4; }.wire-intel-note strong { display: block; color: #b8c5cb; }
.streetwire-rail .alert-settings { margin: 0; border-top: 1px solid #29434e; background: #0d161e; }
.streetwire-rail .alert-settings summary { padding: 12px; color: #9eafb8; font-size: .65rem; font-weight: 850; }
.streetwire-rail .alert-settings[open] summary { border-bottom: 1px solid #29434e; color: var(--wire); }
.streetwire-rail .alert-settings .settings-grid { padding: 12px; }
.streetwire-rail .settings-grid { grid-template-columns: 1fr; }
.streetwire-rail .settings-grid fieldset, .streetwire-rail .settings-save { grid-column: auto; }
@keyframes wire-live { 50% { opacity: .25; } }

/* Story campaign and stage fights */
.story-campaign-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 1fr); min-height: 0; padding: 0; overflow: hidden; border-color: #506273; background: #10151c; box-shadow: 8px 8px 0 #05080c, inset 0 0 0 1px #1d2b36; }
.story-cinematic { position: relative; min-height: 190px; overflow: hidden; border-right: 1px solid #4b5864; background: #08131f; }
.story-cinematic canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #04090f; image-rendering: pixelated; image-rendering: crisp-edges; }
.story-scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, #02060a38 3px 4px); mix-blend-mode: multiply; }
.story-cinematic::after { position: absolute; inset: 0; content: ''; pointer-events: none; border: 5px solid #08101999; box-shadow: inset 0 0 0 1px var(--story-wire); }
.story-scene-status { position: absolute; top: 13px; left: 13px; display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid var(--story-wire); color: #dce7eb; background: #071017e8; font: 900 .54rem/1 "Courier New", monospace; letter-spacing: .11em; text-transform: uppercase; }
.story-scene-status i { width: 7px; height: 7px; background: var(--story-accent); box-shadow: 0 0 0 2px #10151c, 0 0 12px var(--story-accent); animation: story-signal 1.8s steps(2, end) infinite; }
.story-scene-caption { position: absolute; right: 13px; bottom: 13px; left: 13px; display: grid; gap: 3px; padding: 10px 12px; border-left: 4px solid var(--story-accent); color: #f3f5f6; background: #070c12e8; box-shadow: 4px 4px 0 #030609aa; }
.story-scene-caption small { color: var(--story-wire); font-size: .55rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.story-scene-caption strong { overflow: hidden; font: 900 .92rem/1.25 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }

/* The act brief carries the whole story header now: who, where, how far, and
   what is next. Everything here used to be repeated by a second console
   header and a four-tile vitals strip below it. */
.story-act-copy { display: flex; flex-direction: column; justify-content: center; gap: 9px; min-width: 0; padding: 16px 18px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--story-accent), transparent 87%), transparent 42%), linear-gradient(135deg, #151b23, #10151b 75%); }
.story-act-copy .eyebrow { margin: 0; }
.story-act-copy h2 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.story-act-copy > p:not(.eyebrow) { display: -webkit-box; max-width: 540px; margin: 0; overflow: hidden; color: #aeb8c2; font-size: .76rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.story-act-progress { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; color: #aeb8c2; font: 800 .62rem/1 "Courier New", monospace; }
.story-act-progress > div { height: 9px; padding: 2px; border: 1px solid #43505d; background: #090e14; }
.story-act-progress i { display: block; height: 100%; background: var(--story-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--story-accent), transparent 35%); }
.story-act-progress em { color: var(--story-wire); font-style: normal; }
.story-brief-status { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.story-console-stage, .story-brief-squad { display: grid; align-content: center; gap: 2px; min-width: 0; padding: 8px 11px; border: 1px solid #3d4b57; border-left: 4px solid #55636f; background: #0c1219; }
.story-console-stage { border-color: #60852f; border-left-color: var(--green); background: #0d170e; }
.story-console-stage span, .story-brief-squad span { color: #7d8b96; font-size: .52rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.story-console-stage span { color: #829170; }
.story-console-stage strong, .story-brief-squad strong { font: 900 1rem/1.1 "Courier New", monospace; }
.story-console-stage strong { color: var(--green); }
.story-brief-squad strong { color: #dfe6ea; }
.story-console-stage small, .story-brief-squad small { overflow: hidden; color: #c2ccb9; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.story-brief-squad small { color: #8b98a3; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip-path: inset(50%); white-space: nowrap; }

/* Act stepper, now a control inside the mission toolbar rather than its own row. */
.story-act-navigation { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: stretch; gap: 4px; min-width: 0; }
.story-act-navigation label { display: block; min-width: 0; }
.story-act-navigation select { width: 100%; min-width: 0; height: 100%; min-height: 34px; padding: 0 8px; border: 1px solid #3c4854; color: #e4e9ec; background: #141b23; font: 800 .66rem/1 "Courier New", monospace; }
.story-act-navigation button { border: 1px solid #53606c; color: var(--wire); background: #151d25; font-size: .95rem; font-weight: 900; cursor: pointer; }
.story-act-navigation button:disabled { opacity: .3; cursor: not-allowed; }

.story-mission-console { padding: 0; overflow: hidden; border-color: #46596a; background: #0b1118; box-shadow: 8px 8px 0 #05080c; }
.story-console-stage { display: grid; align-content: center; gap: 3px; padding: 10px 12px; border: 1px solid #60852f; border-left: 4px solid var(--green); background: #0d170e; }
.story-console-stage span { color: #829170; font-size: .55rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.story-console-stage strong { color: var(--green); font: 900 1.1rem/1.1 "Courier New", monospace; }
.story-console-stage small { overflow: hidden; color: #c2ccb9; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.story-mission-console .stage-library-tabs { margin: 12px 14px 0; }
.story-mission-console .stage-fight-message { margin: 8px 14px 0; }
.story-empty-archive { padding: 34px; border: 1px dashed #45515d; text-align: center; }
.story-empty-archive strong { font: 900 1rem/1.2 "Courier New", monospace; }
.story-empty-archive p { margin-bottom: 0; color: var(--muted); }
@keyframes story-signal { 50% { opacity: .35; } }

/* Stage fights and contraband drops */
.stage-fights { display: grid; gap: 14px; margin-top: 14px; border-color: #4b5664; background: #11161d; }
.stage-fights > p { max-width: 850px; margin: 0; color: var(--muted); }
.stage-fights .section-heading > span { color: var(--wire); font: 800 .7rem/1.2 "Courier New", monospace; }
.stage-fight-message { padding: 10px 12px; border-left: 4px solid var(--wire); color: var(--ink) !important; background: #101d24; }
.latest-fight { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 13px; border: 1px solid #3c4652; background: #0c1117; }
.latest-fight.victory { border-color: #547b32; }
.latest-fight.defeat { border-color: #7b3438; }
.latest-fight strong { color: var(--green); }
.latest-fight.defeat strong { color: var(--red); }
.latest-fight span { color: var(--muted); font-size: .72rem; }
.stage-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stage-card { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; min-height: 78px; padding: 10px; border: 1px solid #3d4855; background: #171d25; }
.stage-card.locked { opacity: .55; }
.stage-number { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--pink); color: var(--pink); font: 900 1rem/1 "Courier New", monospace; background: #25131f; }
.stage-card > div { display: grid; gap: 4px; }
.stage-card small { color: var(--muted); font-size: .62rem; }
.stage-card button { min-width: 70px; min-height: 38px; border: 2px solid #668d2f; color: var(--green); background: #11180b; font-weight: 900; cursor: pointer; }
.stage-card button:disabled { border-color: #3a424c; color: #737c87; background: #15191f; cursor: not-allowed; }
.stage-card-grid:has(.story-stage) { grid-template-columns: 1fr; gap: 9px; padding: 14px; background: #0a1016; }
.story-stage { position: relative; grid-template-columns: 124px minmax(0, 1fr) 126px; min-height: 174px; padding: 14px; overflow: hidden; border-color: #384957; background: linear-gradient(105deg, #17212a, #121920 72%); transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.story-stage::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: #596674; content: ''; }
.story-stage:hover { border-color: #607587; background: linear-gradient(105deg, #1a2833, #151e26 72%); transform: translateX(2px); }
.story-stage.cleared::before { background: var(--wire); }
.story-stage.current { border-color: #6f9b34; background: linear-gradient(105deg, #18281d, #111b17 72%); box-shadow: inset 0 0 28px #79b43710; }
.story-stage.current::before { width: 6px; background: var(--green); box-shadow: 0 0 14px var(--green); }
.story-stage.locked { opacity: .46; filter: saturate(.45); }
.story-stage.locked:hover { transform: none; }
.story-stage .stage-number { --scene-accent: #51dce3; position: relative; display: grid; grid-template-rows: 78px 35px 21px; place-items: stretch; align-self: center; width: 112px; height: 144px; padding: 5px; overflow: hidden; border: 2px solid #617180; color: #c8d0d6; background: #071018; box-shadow: 5px 5px 0 #05090d, inset 0 0 0 2px #142532; text-align: center; image-rendering: pixelated; }
.story-stage .stage-number::before, .story-stage .stage-number::after { position: absolute; z-index: 8; width: 8px; height: 8px; background: #071018; content: ''; }
.story-stage .stage-number::before { top: -2px; left: -2px; border-right: 2px solid #617180; border-bottom: 2px solid #617180; }
.story-stage .stage-number::after { right: -2px; bottom: -2px; border-top: 2px solid #617180; border-left: 2px solid #617180; }
/* One flat 8-bit canvas fills the frame; the scene itself is painted in JS from
   a 32x24 block list, so the only styling here is the frame and the label. */
.mission-scene { position: relative; overflow: hidden; border: 1px solid #365666; background: #0a1017; }
.mission-art { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.mission-scene-label { position: absolute; top: 3px; left: 3px; z-index: 7; max-width: calc(100% - 22px); overflow: hidden; padding: 2px 4px; border-left: 2px solid var(--scene-accent); color: #e9f8f8; background: #061017d9; font-size: .35rem; font-weight: 900; letter-spacing: .055em; line-height: 1.15; text-align: left; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; text-shadow: 1px 1px #020608; }
.mission-number { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 5px; padding: 3px 7px; border-top: 1px solid var(--scene-accent); border-bottom: 1px solid #071017; background: linear-gradient(90deg, #0a141b, #183141 58%, #0b161d); box-shadow: inset 0 1px color-mix(in srgb, var(--scene-accent) 14%, transparent); }
.story-stage .stage-number small { color: #7f94a1; font-size: .42rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.story-stage .stage-number b { justify-self: center; color: #f4ffff; font: 900 1.38rem/1 "Courier New", monospace; text-shadow: 2px 2px 0 #050a0e, 0 0 8px color-mix(in srgb, var(--scene-accent) 32%, transparent); }
.mission-number > span { padding: 2px 3px; border: 1px solid #365566; color: #79929f; font-size: .38rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.story-stage .stage-number em { display: flex; z-index: 4; align-items: center; justify-content: center; gap: 4px; color: #9aabb5; background: #081118; font-size: .46rem; font-style: normal; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.story-stage.cleared .stage-number { --scene-accent: var(--wire); border-color: var(--wire); }
.story-stage.current .stage-number { --scene-accent: var(--green); border-color: var(--green); box-shadow: 5px 5px 0 #05090d, 0 0 14px #8fec222c, inset 0 0 0 2px #244214; }
.story-stage.current .stage-number em { color: #dfffbc; background: #14240f; }
.story-stage.locked .stage-number { --scene-accent: #5b6871; }
.story-stage .stage-number em i { display: grid; place-items: center; width: 12px; height: 12px; border: 1px solid currentColor; font-size: .5rem; font-style: normal; line-height: 1; }
.story-stage.cleared .stage-number { border-color: #49cdd1; color: var(--wire); background: #07171b; box-shadow: 4px 4px 0 #05090d, 0 0 16px #46dce322, inset 0 0 0 2px #12343a; }
.story-stage.cleared .stage-number::before, .story-stage.cleared .stage-number::after { border-color: #49cdd1; background: #07171b; }
.story-stage.cleared .mission-number { background: #0b242a; }
.story-stage.cleared .stage-number em { color: #69ebeb; background: #0a1d22; }
.story-stage.current .stage-number { border-color: var(--green); color: var(--green); background: #101a0d; box-shadow: 4px 4px 0 #05090d, 0 0 20px #98ed2f33, inset 0 0 0 2px #294419; }
.story-stage.current .stage-number::before, .story-stage.current .stage-number::after { border-color: var(--green); background: #101a0d; }
.story-stage.current .mission-number { background: #182712; }
.story-stage.current .stage-number em { color: var(--green); background: #101c0c; }
.story-stage.locked .mission-scene { filter: grayscale(1) brightness(.55); }
.story-stage .stage-number.mission-boss { border-color: #f4a340; box-shadow: 4px 4px 0 #05090d, 0 0 18px #f4a3402b, inset 0 0 0 2px #51361b; }
.stage-story-copy { align-content: start; gap: 5px !important; }
.stage-story-meta { display: flex !important; align-items: center; flex-wrap: wrap; gap: 5px !important; }
.stage-story-meta span { padding: 4px 6px; border: 1px solid #344b59; color: #8ba6b5; background: #0d1820; font-size: .5rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.stage-story-meta span:first-child { border-color: #346d70; color: var(--wire); }
.stage-story-copy > strong { margin-top: 2px; color: #edf1f3; font: 900 .95rem/1.2 "Courier New", monospace; }
.stage-story-copy > p { display: -webkit-box; max-width: 920px; margin: 1px 0 3px; overflow: hidden; color: #a7b2bb; font-size: .69rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.stage-story-footer { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px !important; margin-top: 2px; padding-top: 6px; border-top: 1px solid #2c3944; }
.stage-story-rewards, .stage-enemy-roster { display: flex !important; align-items: center; flex-wrap: wrap; gap: 5px !important; }
.stage-story-rewards span { padding: 5px 7px; border: 1px solid #3b4852; color: #8897a2; background: #0c1218; font-size: .53rem; font-weight: 850; text-transform: uppercase; }
.stage-story-rewards b { color: var(--green); font-family: "Courier New", monospace; }
.stage-enemy-roster span { display: inline-flex; align-items: center; gap: 5px; color: #aeb8bf; font-size: .55rem; }
.stage-enemy-roster i { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #7b3e54; color: var(--pink); background: #21121a; font: 900 .5rem/1 "Courier New", monospace; }
.stage-power-meter { display: grid; gap: 3px; width: 100%; max-width: 520px; margin-top: 2px; padding: 5px 7px; border: 1px solid #2c3944; background: #0c1218; }
.stage-power-track { height: 5px; border: 1px solid #3b4852; background: #10161d; overflow: hidden; }
.stage-power-fill { display: block; height: 100%; background: linear-gradient(90deg, #4bd7d9, #91ef26); }
.stage-power-meter.ready .stage-power-fill { background: linear-gradient(90deg, #4bd7d9, #91ef26); }
.stage-power-meter.thin .stage-power-fill { background: linear-gradient(90deg, #f4a340, #ffd24a); }
.stage-power-meter.not-ready .stage-power-fill { background: linear-gradient(90deg, #ed3e7c, #ff6b57); }
.stage-power-readout { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stage-power-readout span { display: inline-flex; align-items: baseline; gap: 4px; color: #8897a2; font-size: .52rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.stage-power-readout b { color: #edf1f3; font: 900 .66rem/1 "Courier New", monospace; }
.stage-power-verdict { padding: 2px 6px; border: 1px solid #4b5a66; color: #aeb8bf; background: #151b22; font: 900 .5rem/1 "Courier New", monospace; text-transform: uppercase; }
.stage-power-verdict.ready { border-color: #668d2f; color: var(--green); }
.stage-power-verdict.thin { border-color: #b07a2e; color: #f4a340; }
.stage-power-verdict.not-ready { border-color: #a03a5c; color: var(--pink); }
.stage-card-actions { display: grid; align-self: center; gap: 7px; }
.stage-card-actions > button { width: 100%; }
.stage-card-actions .stage-primary-action { min-height: 44px; padding: 0 12px; }
.stage-card-actions .stage-auto-rerun { border-color: var(--wire); color: var(--wire); background: #09191c; font-size: .62rem; letter-spacing: .03em; }
.stage-card-actions .stage-auto-rerun:hover { color: #071013; background: var(--wire); box-shadow: 0 0 12px rgba(75, 219, 215, .24); }
.stage-library-tabs { display: flex; gap: 6px; padding: 5px; border: 1px solid #374350; background: #0c1117; }
.stage-library-tabs button, .stage-pagination button { min-height: 36px; padding: 0 14px; border: 1px solid #46515e; color: #abb5bf; background: #171e26; cursor: pointer; font-size: .68rem; font-weight: 850; }
.stage-library-tabs button.active { border-color: var(--green); color: #0b1007; background: var(--green); }
.stage-library-tabs button:disabled, .stage-pagination button:disabled { opacity: .35; cursor: not-allowed; }
.stage-pagination { display: grid; grid-template-columns: minmax(150px, auto) 1fr minmax(150px, auto); align-items: stretch; gap: 8px; padding: 5px; border: 1px solid #3a4b58; background: #090f15; }
.stage-pagination > div { display: grid; place-content: center; justify-items: center; gap: 3px; min-height: 46px; padding: 4px 14px; border-right: 1px solid #283945; border-left: 1px solid #283945; background: #111a22; }
.stage-pagination small { color: #718593; font-size: .5rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.stage-pagination strong { color: var(--wire); font: 900 .78rem/1.1 "Courier New", monospace; }
.stage-pagination span { color: var(--muted); font: 800 .55rem/1.2 "Courier New", monospace; text-align: center; }
.stage-window-navigation button:not(:disabled):hover,
.stage-window-navigation button:not(:disabled):focus-visible { border-color: var(--wire); outline: none; color: #071013; background: var(--wire); }
.story-mission-toolbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; padding: 6px; border-color: #43515d; background: linear-gradient(90deg, #0b1117, #111a22 52%, #0c1511); box-shadow: inset 0 1px 0 rgba(98, 221, 216, .08); }
.story-view-tabs { display: flex; align-items: stretch; gap: 5px; }
.story-view-tabs button { white-space: nowrap; }
.stage-window-controls { display: grid; flex: 1 1 210px; grid-template-columns: 34px minmax(120px, 1fr) 34px; align-items: stretch; min-width: 0; border-right: 1px solid #33434f; border-left: 1px solid #33434f; background: #101820; }
.stage-window-controls.single { grid-template-columns: 1fr; }
.stage-window-controls .stage-window-arrow { min-width: 0; padding: 0; border: 0; color: var(--wire); background: #121d25; font-size: 1rem; }
.stage-window-controls .stage-window-arrow:not(:disabled):hover,
.stage-window-controls .stage-window-arrow:not(:disabled):focus-visible { outline: none; color: #071013; background: var(--wire); }
.stage-window-summary { display: grid; place-content: center; justify-items: center; gap: 1px; min-width: 0; padding: 3px 10px; border-right: 1px solid #263742; border-left: 1px solid #263742; text-align: center; }
.stage-window-summary small { color: #718593; font-size: .48rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.stage-window-summary strong { color: var(--wire); font: 900 .76rem/1.1 "Courier New", monospace; white-space: nowrap; }
.stage-window-summary span { color: var(--muted); font: 800 .5rem/1.1 "Courier New", monospace; }
.story-mission-toolbar > .story-act-navigation { flex: 1 1 210px; }
.story-mission-toolbar > .story-view-tabs { flex: 0 1 auto; }
.story-mission-toolbar > .story-next-mission { flex: 0 0 auto; min-width: 132px; white-space: nowrap; background: #10200e; }
.story-mission-toolbar > .story-next-mission:hover,
.story-mission-toolbar > .story-next-mission:focus-visible { outline: none; color: #081006; background: var(--green); box-shadow: 0 0 12px rgba(143, 239, 32, .18); }
@media (max-width: 860px) {
  .story-mission-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .story-mission-toolbar .stage-window-controls { grid-row: 2; grid-column: 1 / -1; }
  .story-view-tabs { min-width: 0; overflow-x: auto; }
}
.database-result-limit { padding: 18px; border-top: 1px solid #45515d; color: #aeb8c2; background: #101820; }
.database-result-limit strong { font: 900 .72rem/1.3 "Courier New", monospace; }
.database-result-limit p { margin: 5px 0 0; color: #7f8b96; font-size: .65rem; }

/* Turn-based squad battle */
.turn-battle { display: grid; gap: 13px; padding: 16px; overflow: hidden; border-color: #4d6376; background: radial-gradient(circle at 50% 30%, #183247 0, #101923 44%, #090e14 100%); }
.battle-command-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 11px; border-bottom: 1px solid #42505d; }
.battle-command-bar h3, .battle-command-bar p { margin-bottom: 0; }
.battle-controls { display: flex; gap: 5px; }
.battle-controls button, .battle-result button { min-width: 48px; min-height: 38px; border: 1px solid #52606d; color: #c2cbd4; background: #10171f; cursor: pointer; font-size: .72rem; font-weight: 900; }
.battle-controls button:first-child { min-width: 66px; color: var(--amber); }
.battle-controls .battle-rerun-control { min-width: 112px; color: var(--wire); border-color: #376c72; }
.battle-controls button.active { border-color: var(--green); color: #0d1208; background: var(--green); box-shadow: 2px 2px 0 #314c0c; }
.battle-controls button:disabled { opacity: .5; cursor: not-allowed; }
.turn-order { display: flex; align-items: center; gap: 5px; min-height: 35px; overflow-x: auto; }
.turn-order > span { margin-right: 5px; color: #8d98a5; font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.turn-order i { display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px; border: 1px solid #4e5965; color: #dbe1e6; background: #19212b; font: normal 900 .62rem/1 "Courier New", monospace; }
.turn-order i.team { border-color: #418c83; background: #102825; }
.turn-order i.enemy { border-color: #88415d; background: #2b1420; }
.turn-order i.current { outline: 2px solid var(--amber); outline-offset: 1px; color: #111; background: var(--amber); }
.battlefield { display: grid; grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 315px; padding: 20px 13px; border: 2px solid #364857; background: linear-gradient(#102537aa 0 64%, #17242a 64% 66%, #0c151b 66%); box-shadow: inset 0 -55px 0 #0a1015aa; }
.battle-side { position: relative; display: flex; align-items: end; justify-content: center; gap: 10px; min-width: 0; min-height: 270px; padding-top: 30px; }
.battle-side-label { position: absolute; top: 0; left: 0; color: #91a0ad; font: 900 .62rem/1 "Courier New", monospace; letter-spacing: .12em; text-transform: uppercase; }
.enemy-side .battle-side-label { right: 0; left: auto; }
.battle-center { display: grid; place-items: center; gap: 8px; color: var(--amber); text-align: center; }
.battle-center > span { font: 900 2rem/1 "Courier New", monospace; text-shadow: 3px 3px 0 #000; }
.battle-center small { min-width: 75px; color: #9aa6b2; font-size: .58rem; text-transform: uppercase; }
.battle-unit { position: relative; display: grid; flex: 1 1 0; justify-items: center; gap: 5px; max-width: 145px; min-width: 92px; padding: 9px 8px 10px; border: 1px solid transparent; transition: transform .12s steps(2), filter .12s steps(2); }
.battle-unit.active-turn { border-color: var(--amber); background: #f4a34010; box-shadow: 0 0 0 2px #f4a34033, 0 0 22px #f4a34022; transform: translateY(-8px); }
.battle-unit.defeated { opacity: .38; filter: grayscale(1); transform: translateY(11px); }
.battle-unit-level { position: absolute; top: 3px; left: 4px; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #607080; color: #d8e0e6; background: #111922; font: 900 .6rem/1 "Courier New", monospace; }
.battle-unit > strong { width: 100%; overflow: hidden; font: 900 .67rem/1.2 "Courier New", monospace; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.battle-unit > small { color: #a7b0b9; font-size: .56rem; }
.battle-avatar, .battle-crew-sprite, .battle-enemy-sprite { width: 92px; height: 118px; image-rendering: pixelated; }
.battle-avatar { display: grid; place-items: end center; overflow: hidden; }
.battle-avatar .pixel-avatar-canvas { width: 92px; height: 118px; object-fit: contain; }
.enemy-battle-avatar { background: radial-gradient(circle at 50% 60%, #6d1d3c33, transparent 67%); filter: drop-shadow(-5px 7px 0 #03060999); }
.enemy-battle-avatar .pixel-avatar-canvas { transform: scaleX(-1); filter: saturate(.88) contrast(1.08) brightness(.9); }
.battle-crew-sprite, .battle-enemy-sprite { position: relative; filter: drop-shadow(5px 7px 0 #03060999); }
.battle-crew-sprite::before, .battle-enemy-sprite i { position: absolute; top: 22px; left: 31px; width: 31px; height: 30px; border: 4px solid #11151b; background: #bd8666; content: ""; }
.battle-crew-sprite::after, .battle-enemy-sprite b { position: absolute; top: 53px; left: 22px; width: 49px; height: 50px; border: 4px solid #11151b; background: #a72f62; content: ""; }
.battle-crew-sprite span { position: absolute; z-index: 2; top: 28px; left: 36px; display: grid; place-items: center; width: 22px; height: 20px; color: #1b1014; font: 900 .75rem/1 "Courier New", monospace; }
.battle-enemy-sprite i { background: #9e6e58; }
.battle-enemy-sprite b { background: #522339; }
.battle-enemy-sprite span { position: absolute; top: 48px; left: 11px; width: 72px; height: 12px; border: 4px solid #11151b; background: #6a2a43; transform: rotate(-12deg); }
.battle-crew-sprite { background: linear-gradient(90deg, transparent 25%, #252d37 25% 38%, transparent 38% 62%, #252d37 62% 75%, transparent 75%) 0 100% / 100% 38px no-repeat; }
.battle-enemy-sprite { background: linear-gradient(90deg, transparent 25%, #2d2026 25% 38%, transparent 38% 62%, #2d2026 62% 75%, transparent 75%) 0 100% / 100% 38px no-repeat; }
.battle-health { width: 100%; height: 9px; padding: 1px; border: 1px solid #3f4a55; background: #070a0e; }
.battle-health i { display: block; height: 100%; background: var(--green); }
.enemy .battle-health i { background: var(--red); }

/* --------------------------------------------------------------------------
   Battle effects

   Every duration is a multiple of --battle-beat, which the shell sets from the
   1x-5x speed control (and to 0ms under Reduced animation), so the whole layer
   speeds up and slows down with the fight instead of drifting out of step.
   Motion uses steps() rather than smooth easing to stay in the pixel idiom.
   -------------------------------------------------------------------------- */
.battlefield { --battle-beat: 380ms; }
.battle-health i { transition: width var(--battle-beat) ease-out; }
.battle-unit { transition: transform calc(var(--battle-beat) * .45) steps(3, end); }

/* The attacker steps into the middle of the field, then back. */
.battle-unit.attacking.lunge-right { transform: translateX(20px) scale(1.04); }
.battle-unit.attacking.lunge-left { transform: translateX(-20px) scale(1.04); }
.battle-unit.attacking { z-index: 3; }

/* The target rocks and blows out to white for a frame. */
.battle-unit.struck { animation: battle-hit-shake calc(var(--battle-beat) * .6) steps(2, end) 1; }
.battle-unit.struck .battle-avatar { animation: battle-hit-flash calc(var(--battle-beat) * .5) steps(1, end) 1; }
.battle-unit.crit-struck { animation-duration: calc(var(--battle-beat) * .9); }
@keyframes battle-hit-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-5px, 2px); }
  50% { transform: translate(5px, -2px); }
  75% { transform: translate(-3px, 1px); }
}
@keyframes battle-hit-flash {
  0%, 49% { filter: brightness(2.8) saturate(.15); }
  50%, 100% { filter: none; }
}

/* A crit kicks the whole field, not just the unit. */
.battlefield.crit-shock { animation: battle-crit-shock calc(var(--battle-beat) * .5) steps(2, end) 1; }
@keyframes battle-crit-shock {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(3px, -3px); }
  66% { transform: translate(-3px, 2px); }
}

.battle-damage {
  /* Above the sprite, clear of the burst that plays across its middle. */
  position: absolute; top: 2%; left: 50%; z-index: 6;
  color: #ff7a6b; font: 900 1rem/1 "Courier New", monospace;
  text-shadow: 2px 2px 0 #06090d, -2px 2px 0 #06090d, 2px -2px 0 #06090d, -2px -2px 0 #06090d;
  white-space: nowrap; pointer-events: none;
  animation: battle-damage-rise calc(var(--battle-beat) * 1.6) steps(9, end) forwards;
}
.battle-damage.crit { color: var(--amber); font-size: 1.32rem; letter-spacing: .04em; }
@keyframes battle-damage-rise {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  15% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -46px); }
}

.battle-fx { position: absolute; inset: 0; z-index: 5; display: block; pointer-events: none; }
.battle-fx i { position: absolute; display: block; }

/* Strike: hard diagonal bars sweeping across the target, one after another. */
.fx-strike i {
  top: calc(22% + var(--shard) * 13%); left: 14%; width: 72%; height: 5px;
  background: #fff3d4; box-shadow: 0 0 0 2px #f4a34066;
  transform-origin: left center;
  animation: fx-slash calc(var(--battle-beat) * .6) steps(4, end) calc(var(--shard) * var(--battle-beat) * .09) both;
}
.fx-strike.crit i { height: 7px; background: #ffd98a; }
@keyframes fx-slash {
  0% { opacity: 1; transform: skewX(-38deg) scaleX(0); }
  55% { opacity: 1; transform: skewX(-38deg) scaleX(1); }
  100% { opacity: 0; transform: skewX(-38deg) scaleX(1); }
}

/* Control: the target tears into offset scanline slices. */
.fx-control i {
  top: calc(18% + var(--shard) * 12%); left: 5%; width: 90%; height: 6px;
  background: #65dadd; mix-blend-mode: screen;
  animation: fx-glitch calc(var(--battle-beat) * .85) steps(3, end) calc(var(--shard) * var(--battle-beat) * .06) both;
}
@keyframes fx-glitch {
  0%, 100% { opacity: 0; transform: translateX(0); }
  25% { opacity: 1; transform: translateX(-11px); }
  55% { opacity: 1; transform: translateX(13px); }
  80% { opacity: .55; transform: translateX(-6px); }
}

/* Guard and passive: a blocky ring pushing out from the actor. */
.fx-guard i, .fx-passive i {
  top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 3px solid #7fd4ff;
  animation: fx-ring calc(var(--battle-beat) * 1.1) steps(5, end) calc(var(--shard) * var(--battle-beat) * .16) both;
}
.fx-passive i { border-color: #a58aff; }
@keyframes fx-ring {
  0% { opacity: 1; transform: scale(.3); }
  100% { opacity: 0; transform: scale(2.8); }
}

/* Recovery and boost: motes lifting off the actor. */
.fx-recovery i, .fx-boost i {
  bottom: 12%; left: calc(24% + var(--shard) * 16%); width: 9px; height: 9px;
  background: var(--green);
  animation: fx-lift calc(var(--battle-beat) * 1.3) steps(6, end) calc(var(--shard) * var(--battle-beat) * .12) both;
}
.fx-boost i { background: var(--amber); }
@keyframes fx-lift {
  0% { opacity: 0; transform: translateY(10px) scale(.6); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-52px) scale(.5); }
}

/* Going down is its own beat, on top of the resting .defeated styling. */
.battle-unit.just-defeated { animation: battle-defeat calc(var(--battle-beat) * 1.4) steps(5, end) 1; }
@keyframes battle-defeat {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: .38; transform: translateY(14px) rotate(-7deg); }
}
.battle-unit.defeated { transition: opacity var(--battle-beat) linear, filter var(--battle-beat) linear; }

/* Reduced animation keeps the fight readable without any of the motion. */
.reduced-motion .battle-unit,
.reduced-motion .battle-health i { transition: none; }
.reduced-motion .battle-fx,
.reduced-motion .battle-fx i,
.reduced-motion .battle-damage,
.reduced-motion .battle-unit.struck,
.reduced-motion .battle-unit.struck .battle-avatar,
.reduced-motion .battle-unit.just-defeated,
.reduced-motion .battlefield.crit-shock { animation: none; }

.battle-hud { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); gap: 12px; }
.battle-log, .battle-skills { min-height: 112px; padding: 11px; border: 1px solid #394653; background: #0b1118; }
.battle-log { display: flex; flex-direction: column; justify-content: end; }
.battle-log p { margin: 2px 0; color: #aeb8c2; font: .65rem/1.35 "Courier New", monospace; }
.battle-log p:last-child { color: var(--wire); }
.battle-skills { display: flex; align-items: stretch; gap: 7px; }
.battle-skills > span { align-self: center; margin-right: auto; color: #98a3ae; font-size: .68rem; }
.battle-skills > button { display: grid; grid-template-columns: 34px 1fr; align-content: center; gap: 1px 7px; min-width: 138px; padding: 7px; border: 2px solid #536272; color: var(--ink); background: #161f29; cursor: pointer; text-align: left; }
.battle-skills > button:hover, .battle-skills > button:focus-visible { border-color: var(--wire); outline: none; }
.battle-skills > button:disabled { opacity: .45; cursor: not-allowed; }
.battle-skills > button .skill-icon { grid-row: 1 / 3; width: 32px; height: 32px; }
.battle-skills > button strong { font-size: .67rem; }
.battle-skills > button small { color: var(--amber); font-size: .55rem; text-transform: uppercase; }
.battle-skills > button .skill-damage-preview { grid-column: 1 / -1; justify-self: end; margin-top: 4px; padding-top: 4px; border-top: 1px solid #394653; color: var(--wire); font-size: .6rem; font-style: normal; font-weight: 700; letter-spacing: .02em; }
.battle-result { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; }
.battle-result strong { color: var(--green); font: 900 1.45rem/1 "Courier New", monospace; }
.battle-result.defeat strong { color: var(--red); }
.battle-result span { color: var(--muted); font-size: .68rem; }
.battle-result button { color: var(--wire); border-color: var(--wire); }
.battle-result-actions { display: flex; justify-content: flex-end; gap: 6px; }
.defeat-recovery { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid rgba(255, 179, 71, .48); background: rgba(255, 179, 71, .07); }
.defeat-recovery > span { color: #d8dee5; line-height: 1.45; }
.defeat-recovery b { display: block; color: var(--amber); font: 900 .74rem/1.3 "Courier New", monospace; text-transform: uppercase; letter-spacing: .06em; }
.defeat-recovery-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.defeat-recovery-actions button { min-height: 40px; border-color: rgba(255, 179, 71, .7); color: #ffe0a8; }

/* Dedicated combat view */
.game-shell.battle-screen-active { width: 100%; min-height: 100dvh; margin: 0; padding: 0; }
.battle-screen { width: 100%; min-height: 100dvh; background: #070b11; }
.battle-screen .turn-battle { width: 100%; min-height: 100dvh; margin: 0; padding: clamp(16px, 2vw, 30px); border: 0; box-shadow: none; grid-template-rows: auto auto minmax(340px, 1fr) auto; }
.battle-screen .battle-command-bar { padding-bottom: 16px; }
.battle-screen .battle-command-bar h3 { font-size: clamp(1.35rem, 2.4vw, 2.1rem); }
.battle-screen .battlefield { height: 100%; min-height: 340px; padding: clamp(22px, 3vh, 42px) clamp(14px, 3vw, 48px); }
.battle-screen .battle-side { min-height: 320px; gap: clamp(12px, 2.5vw, 34px); }
.battle-screen .battle-unit { max-width: 190px; min-width: 118px; }
.battle-screen .battle-avatar,
.battle-screen .battle-crew-sprite,
.battle-screen .battle-enemy-sprite { width: clamp(108px, 10vw, 150px); height: clamp(138px, 15vw, 188px); }
.battle-screen .battle-avatar .pixel-avatar-canvas { width: 100%; height: 100%; }
.battle-screen .battle-unit > strong { font-size: clamp(.7rem, .9vw, .88rem); }
.battle-screen .battle-health { height: 11px; }
.battle-screen .battle-log,
.battle-screen .battle-skills { min-height: 130px; }

@media (max-width: 720px) {
  .battle-screen .turn-battle { min-height: 100dvh; grid-template-rows: auto auto auto auto; }
  .battle-screen .battlefield { min-height: 0; }
  .battle-screen .battle-side { min-height: 230px; }
}

/* Crew management */
.rarity-rule { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 22px; padding-block: 14px; border-color: #47525f; }
.rarity-rule strong { margin-right: auto; font-family: "Courier New", monospace; }
.rarity-rule span { color: var(--muted); font-size: .72rem; }
button.crew-card { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.crew-card:hover, button.crew-card:focus-visible { border-color: var(--wire); outline: 2px solid transparent; transform: translate(-1px, -1px); box-shadow: 7px 7px 0 #030507; }
.crew-card > div:last-child { min-width: 0; }
.crew-card p { margin-bottom: 7px; color: var(--muted); }
.crew-xp { display: grid; grid-template-columns: auto minmax(55px, 1fr) auto; align-items: center; gap: 7px; margin: 12px 0 8px; color: var(--muted); font-size: .56rem; }
.crew-xp > span { font-weight: 850; text-transform: uppercase; }
.crew-xp > strong { color: #8f9ca5; font-size: .52rem; white-space: nowrap; }
.crew-xp i, .xp-track { display: block; height: 7px; overflow: hidden; border: 1px solid #3e4855; background: #090d12; }
.crew-xp b, .xp-track i { display: block; height: 100%; background: var(--green); }
.crew-quick-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.crew-quick-stats span { display: grid; gap: 2px; padding: 5px 6px; border: 1px solid #3a424e; color: #b9c1ca; background: #0b1117; }
.crew-quick-stats i { color: #65747f; font: normal 900 .43rem/1 Arial, sans-serif; }
.crew-quick-stats b { color: #c8d0d5; font: 900 .62rem/1 "Courier New", monospace; }
.view-character { display: block; margin-top: 11px; color: var(--wire); font-size: .68rem; font-weight: 850; }
.crew-detail { position: relative; width: min(900px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-color: var(--wire); }
.crew-detail-header { display: grid; grid-template-columns: 142px 1fr; align-items: center; gap: 22px; }
.crew-detail-avatar, .crew-detail-initial { display: grid; place-items: center; width: 142px; height: 142px; border: 2px solid #4b5968; background: #10151d; }
.crew-detail-initial { color: #ffc0d5; background: #2b1922; font: 900 3.2rem/1 "Courier New", monospace; }
.crew-detail-header h2 { margin-bottom: 5px; }
.crew-detail-header p:not(.eyebrow) { margin-bottom: 12px; color: var(--muted); text-transform: capitalize; }
.xp-label { display: flex; justify-content: space-between; color: var(--muted); font-size: .7rem; }
.xp-track { height: 10px; margin-top: 5px; }
.character-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0; }
.character-stats div { display: grid; gap: 2px; padding: 11px; border: 1px solid var(--line); background: #10151b; }
.character-stats span { color: var(--muted); font-size: .62rem; font-weight: 850; text-transform: uppercase; }
.character-stats strong { color: var(--wire); font-size: 1.2rem; }
.skill-panel, .equipment-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.section-heading small { color: var(--muted); font-size: .66rem; }
.skill-list { display: grid; gap: 7px; }
.skill-list article { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 11px; min-height: 64px; padding: 8px 10px; border: 1px solid #343d49; background: linear-gradient(90deg, #131b24, #10161e); }
.skill-list article:hover { border-color: #4c5c69; background: linear-gradient(90deg, #16242e, #10171f); }
.skill-icon { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--skill-accent) 72%, #36434f); color: var(--skill-accent); background: #080d13; box-shadow: inset 0 0 0 3px #111a23, 3px 3px 0 #06090d; image-rendering: pixelated; }
.skill-icon svg { display: block; width: 78%; height: 78%; overflow: visible; fill: currentColor; image-rendering: pixelated; }
.skill-icon-highlight { fill: #f2f7ee; }
.skill-icon-dark { fill: #29323d; }
.skill-icon-recovery { background: #0c1915; }
.skill-icon-guard { background: #111724; }
.skill-icon-control { background: #15101e; }
.skill-icon-boost { background: #1b150b; }
.skill-icon-passive { background: #1c1016; }
.skill-list p { margin: 2px 0 0; color: var(--muted); font-size: .7rem; }
.skill-list small { color: var(--amber); font-size: .62rem; }
.equipment-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 11px; }
.equipment-slot-card { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: center; gap: 2px 11px; min-height: 122px; padding: 30px 9px 9px; overflow: hidden; border: 2px solid #3d4956; color: var(--ink); background: #10161e; cursor: pointer; text-align: left; }
.equipment-slot-card:hover, .equipment-slot-card:focus-visible { border-color: var(--wire); outline: none; background: #13212a; }
.equipment-slot-card.empty { border-style: dashed; border-color: #465561; background: linear-gradient(135deg, #111820, #0b1117 68%); }
.equipment-slot-card.empty::after { position: absolute; right: -18px; bottom: -15px; width: 70px; height: 44px; opacity: .22; background: repeating-linear-gradient(135deg, #677682 0 3px, transparent 3px 8px); content: ""; pointer-events: none; transform: rotate(-4deg); }
.equipment-slot-card.empty:hover, .equipment-slot-card.empty:focus-visible { border-style: solid; border-color: var(--wire); background: linear-gradient(135deg, #15232c, #0d161d 68%); box-shadow: inset 0 0 0 2px #65dadd18; }
.equipment-slot-card.selected { border-style: solid; border-color: var(--amber); background: #221a10; box-shadow: inset 0 0 0 2px #f4a34022, 0 0 0 1px #f4a34022; }
.equipment-slot-card.equipped { border-color: #477a71; }
.equipment-slot-card.base-loadout { border-color: #46626c; background: linear-gradient(135deg, #111b22, #0d151b); }
.gear-slot-label { position: absolute; top: 7px; left: 9px; color: var(--wire); font: 900 .58rem/1 "Courier New", monospace; letter-spacing: .12em; text-transform: uppercase; }
.slot-status { position: absolute; top: 6px; right: 7px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 5px; border: 1px solid #3f4b56; color: #8f9ba5; background: #0a1016; font-size: .47rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.slot-status i { width: 6px; height: 6px; background: #66727d; box-shadow: 0 0 0 2px #27313a; }
.equipment-slot-card.equipped .slot-status { border-color: #426640; color: var(--green); }
.equipment-slot-card.equipped .slot-status i { background: var(--green); box-shadow: 0 0 0 2px #2e4a27, 0 0 6px #91ef2670; }
.equipment-slot-card.base-loadout .slot-status { border-color: #355c64; color: var(--wire); }
.equipment-slot-card.base-loadout .slot-status i { background: var(--wire); box-shadow: 0 0 0 2px #25444a; }
.equipment-slot-card > strong { align-self: end; overflow: hidden; font: 900 .76rem/1.2 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
.equipment-slot-card > small { align-self: start; color: var(--muted); font-size: .57rem; line-height: 1.25; }
.equipment-slot-card.empty > strong { color: #c5cdd4; }
.slot-action { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; align-self: end; width: max-content; margin-top: 5px; padding: 4px 6px; border: 1px solid #465462; color: var(--amber); background: #11171e; font-size: .5rem; font-weight: 900; text-transform: uppercase; }
.slot-action b { color: var(--wire); font-size: .8rem; line-height: .5; }
.equipment-slot-card.empty .slot-action { border-color: #3f6269; color: var(--wire); background: #0c171b; }
.gear-icon { position: relative; grid-row: 1 / 4; display: block; width: 72px; height: 72px; border: 1px solid #3e4a56; background-color: #090e14; background-image: linear-gradient(45deg, #111923 25%, transparent 25%), linear-gradient(-45deg, #111923 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #111923 75%), linear-gradient(-45deg, transparent 75%, #111923 75%); background-position: 0 0, 0 4px, 4px -4px, -4px 0; background-size: 8px 8px; image-rendering: pixelated; }
.gear-icon img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.gear-icon i, .gear-icon b, .gear-icon em { position: absolute; display: block; content: ""; }
.gear-icon.empty:not(.gear-icon-weapon) { opacity: .86; filter: none; }
.equipment-slot-card.empty .gear-icon { border-style: dashed; border-color: #465a66; background-color: #0a1117; box-shadow: inset 0 0 0 4px #101922; }
.gear-empty-glyph { position: absolute; inset: 14px; width: 44px; height: 44px; color: #73838e; fill: currentColor; opacity: .8; image-rendering: pixelated; }
.gear-empty-glyph-dark { fill: #2c3942; }
.equipment-slot-card.empty:hover .gear-empty-glyph, .equipment-slot-card.empty:focus-visible .gear-empty-glyph { color: var(--wire); opacity: 1; }
.gear-icon-weapon i { top: 23px; left: 25px; width: 27px; height: 28px; border: 4px solid #131820; background: #ba795c; box-shadow: inset -5px -5px 0 #89513f; }
.gear-icon-weapon b { top: 16px; left: 22px; width: 8px; height: 23px; border: 3px solid #131820; background: #cf9070; box-shadow: 9px -3px 0 -3px #cf9070, 18px -1px 0 -3px #c98567, 27px 3px 0 -3px #b97359; }
.gear-icon-weapon em { top: 43px; left: 40px; width: 19px; height: 11px; border: 3px solid #131820; background: #9c5f48; transform: rotate(-18deg); }
.gear-icon-jacket i { top: 20px; left: 22px; width: 29px; height: 39px; border: 4px solid #171c23; background: #394657; box-shadow: inset 7px 0 0 #46566a, inset -7px 0 0 #27333f; }
.gear-icon-jacket b { top: 24px; left: 12px; width: 13px; height: 31px; border: 4px solid #171c23; background: #344150; box-shadow: 35px 0 0 -4px #344150, 35px 0 0 0 #171c23; }
.gear-icon-jacket em { top: 22px; left: 32px; width: 6px; height: 34px; background: var(--wire); box-shadow: 0 0 0 2px #182029; }
.gear-icon-gadget i { top: 19px; left: 19px; width: 37px; height: 43px; border: 4px solid #151b22; background: #39434e; box-shadow: inset 0 -8px 0 #252d36; }
.gear-icon-gadget b { top: 26px; left: 26px; width: 23px; height: 17px; border: 3px solid #172029; background: #55c9c0; box-shadow: inset 4px 4px 0 #86e0d8; }
.gear-icon-gadget em { top: 49px; left: 27px; width: 5px; height: 5px; background: var(--green); box-shadow: 9px 0 0 var(--amber), 18px 0 0 var(--pink); }
.gear-picker-hint { display: flex; align-items: center; gap: 12px; min-height: 70px; margin-top: 10px; padding: 12px; border: 1px dashed #3d4854; color: var(--muted); background: #0c1117; }
.gear-picker-hint > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #45515e; color: var(--wire); font-size: 1.3rem; }
.gear-picker-hint strong { color: #dce1e5; font-size: .72rem; }
.gear-picker-hint p { margin: 2px 0 0; font-size: .62rem; }
.gear-inventory-tray { position: relative; margin-top: 10px; padding: 12px; overflow: hidden; border: 2px solid #6b5633; background: linear-gradient(135deg, #111820, #0a0f15 72%); box-shadow: inset 0 0 0 1px #171f28; }
.gear-inventory-tray::before { position: absolute; inset: 0; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 7px, #f4a340 8px); content: ""; pointer-events: none; }
.gear-tray-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gear-tray-heading, .gear-choice-grid, .gear-empty-message { position: relative; z-index: 1; }
.gear-tray-heading > div { display: grid; }
.gear-tray-heading span { color: var(--amber); font-size: .58rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.gear-tray-heading strong { font: 900 .7rem/1.3 "Courier New", monospace; }
.gear-tray-heading button { width: 30px; height: 30px; border: 1px solid #46515d; color: #bfc7cf; background: #121922; cursor: pointer; }
.gear-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 8px; }
.gear-choice { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 84px; padding: 8px 9px; overflow: hidden; border: 1px solid #465361; color: var(--ink); background: linear-gradient(110deg, #17202a, #11171e 70%); cursor: pointer; text-align: left; box-shadow: inset 0 0 0 1px #0a0e13; }
.gear-choice::after { position: absolute; right: 0; bottom: 0; width: 22px; height: 3px; background: #52606d; content: ""; }
.gear-choice:hover, .gear-choice:focus-visible { border-color: var(--wire); outline: none; background: linear-gradient(110deg, #18303a, #111820 70%); box-shadow: inset 0 0 0 1px #102931, 0 0 0 1px #65dadd33; }
.gear-choice.equipped { border-color: var(--green); background: linear-gradient(110deg, #1b2a1b, #111a14 70%); box-shadow: inset 3px 0 0 var(--green), inset 0 0 0 1px #223a20; }
.gear-choice.equipped::after { background: var(--green); box-shadow: 0 0 8px #91ef2688; }
.gear-choice-icon { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid #4b5967; background: #090e14; box-shadow: inset 0 0 0 3px #111923; }
.gear-choice-icon .gear-icon { width: 64px; height: 64px; border: 0; transform: none; }
.gear-choice-empty .gear-choice-icon .gear-icon.empty { opacity: .86; filter: none; }
.gear-choice-copy { display: grid; min-width: 0; gap: 3px; }
.gear-choice-kicker { color: var(--wire); font-size: .49rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.gear-choice strong { overflow: hidden; font: 900 .72rem/1.2 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
.gear-choice small { color: var(--muted); font-size: .57rem; line-height: 1.35; }
.gear-choice-state { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid #5d4930; color: var(--amber); background: #1a1510; font-size: .49rem; font-style: normal; font-weight: 900; white-space: nowrap; text-transform: uppercase; }
.gear-choice-state i { display: block; width: 6px; height: 6px; background: var(--green); box-shadow: 0 0 0 2px #2b4c21; }
.gear-choice.equipped .gear-choice-state { border-color: #4e7336; color: var(--green); background: #111a0f; }
.gear-empty-message { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 9px; border: 1px dashed #3f4c58; color: #8d98a3; background: #090e14cc; font-size: .59rem; }
.gear-empty-message > span:first-child { display: block; width: 38px; height: 38px; overflow: hidden; }
.gear-empty-message .gear-icon { width: 38px; height: 38px; transform: scale(.62); transform-origin: top left; }
.gear-empty-message > span:last-child { display: grid; gap: 2px; }
.gear-empty-message strong { color: #cbd2d8; font: 900 .62rem/1.2 "Courier New", monospace; text-transform: uppercase; }
.equipment-panel .primary-action { width: 100%; }

.game-footer { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px 14px; margin-top: 16px; padding: 7px 10px; border: 2px solid #303945; color: #8f99a4; background: #10141a; box-shadow: 4px 4px 0 #05070b; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #566472 #10141a; }
.game-footer::-webkit-scrollbar { height: 8px; }
.game-footer::-webkit-scrollbar-thumb { background: #566472; border: 2px solid #10141a; }
.footer-meta { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; flex: 0 0 auto; }
.footer-meta strong { color: var(--ink); font: 900 .7rem/1.2 "Courier New", monospace; white-space: nowrap; }
.footer-meta span { color: #89939e; font-size: .56rem; white-space: nowrap; }
.footer-nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 4px; margin-left: auto; flex: 0 0 auto; }
.footer-nav button { min-height: 28px; padding: 0 11px; border: 1px solid #3e4854; color: #aeb7c0; background: #141a22; cursor: pointer; font-size: .6rem; font-weight: 850; white-space: nowrap; flex: 0 0 auto; }
.footer-nav button:hover, .footer-nav button:focus-visible { border-color: var(--wire); color: var(--wire); outline: none; }
.footer-nav button.active { border-color: var(--green); color: #10140c; background: var(--green); }
.footer-nav button { position: relative; }
.footer-nav button.has-reward { border-color: #d79a3c; color: #ffd27a; box-shadow: inset 0 -2px 0 #7b4b16; }
.footer-tips-toggle { border-color: #4b5665; }
.footer-tips-toggle::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border: 1px solid #5d6a78; background: #10161d; vertical-align: middle; }
.footer-tips-toggle.active { border-color: var(--green); color: var(--green); }
.footer-tips-toggle.active::before { border-color: var(--green); background: var(--green); box-shadow: 0 0 7px rgba(154, 229, 43, .55); }
.footer-nav button.has-reward b { position: absolute; top: -9px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border: 1px solid #10151b; border-radius: 10px; color: #11140d; background: var(--green); font: 900 .58rem/17px var(--mono); text-align: center; }

/* Footer information popups */
.utility-modal { position: relative; width: min(1120px, 100%); max-height: calc(100vh - 36px); padding: 0; overflow: hidden; border-color: var(--wire); box-shadow: 8px 8px 0 #000; }
.utility-modal-scroll { display: grid; gap: 16px; max-height: calc(100vh - 40px); padding: 24px; overflow-y: auto; scrollbar-color: #566472 #10151b; }
.utility-modal .modal-close { z-index: 2; top: 14px; right: 17px; width: 36px; height: 36px; border: 1px solid #45515e; color: #d3d9df; background: #111820; }

.achievements-modal { width: min(1180px, 100%); border-color: #d79a3c; box-shadow: 8px 8px 0 #000, 0 0 32px #d79a3c22; }
.achievement-command { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(220px, .55fr); gap: 20px; align-items: center; padding: 20px; border-color: #67522d; background: linear-gradient(135deg, #19211d 0%, #131920 55%, #211b12 100%); }
.achievement-seal { position: relative; display: grid; place-items: center; width: 98px; aspect-ratio: 1; border: 2px solid #d79a3c; color: #ffd27a; background: repeating-linear-gradient(45deg, #2b2112 0 4px, #20190f 4px 8px); box-shadow: inset 0 0 0 6px #111820, 4px 4px 0 #000; clip-path: polygon(50% 0, 63% 11%, 80% 8%, 86% 25%, 100% 36%, 91% 52%, 95% 70%, 77% 76%, 67% 94%, 50% 86%, 33% 94%, 23% 76%, 5% 70%, 9% 52%, 0 36%, 14% 25%, 20% 8%, 37% 11%); }
.achievement-seal span { font-size: 2.2rem; text-shadow: 2px 2px 0 #000; }
.achievement-seal i { position: absolute; bottom: 19px; color: #fff1c6; font: 900 .62rem var(--mono); font-style: normal; }
.achievement-command-copy h3 { margin: 2px 0 8px; font-size: 1.25rem; }
.achievement-command-copy > p:last-of-type { margin: 0; color: #aeb7c0; line-height: 1.55; }
.achievement-total-track { height: 9px; margin-top: 14px; border: 1px solid #4c5662; background: #0c1117; overflow: hidden; }
.achievement-total-track i { display: block; height: 100%; background: linear-gradient(90deg, #d79a3c, #f4cf65, var(--green)); box-shadow: 0 0 8px #d79a3c66; }
.achievement-command-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.achievement-command-stats span { display: grid; gap: 3px; min-height: 64px; padding: 10px; border: 1px solid #4b4433; background: #10161b; }
.achievement-command-stats small { color: #8f9aa5; font-size: .58rem; text-transform: uppercase; }
.achievement-command-stats strong { color: #ffd27a; font-size: 1.05rem; }
.achievement-command-stats button, .achievement-command-stats em { grid-column: 1 / -1; min-height: 34px; border: 1px solid #9c702d; color: #171206; background: #e8aa43; font: 900 .7rem var(--mono); cursor: pointer; }
.achievement-command-stats em { display: grid; place-items: center; color: #92a0ab; background: #111820; font-style: normal; }
.achievement-message { margin: 0; padding: 11px 14px; border-left: 3px solid var(--green); color: #dce8ca; background: #162218; }
/* One row of chips that both filters and reports mastery. This used to be two
   stacked sections showing the same counts. */
.achievement-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 6px; }
.achievement-categories button { display: grid; gap: 5px; min-width: 0; padding: 8px 10px; border: 1px solid #414b56; color: #aeb7c0; background: #121820; cursor: pointer; text-align: left; }
.achievement-categories button > span { overflow: hidden; font: 800 .62rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.achievement-categories button b { color: #6ddbe0; font: 900 .68rem var(--mono); }
.achievement-categories button i { height: 4px; overflow: hidden; border: 1px solid #38434d; background: #090e13; }
.achievement-categories button em { display: block; height: 100%; background: linear-gradient(90deg, #d79a3c, var(--green)); }
.achievement-categories button:hover, .achievement-categories button:focus-visible { border-color: #d79a3c; outline: none; }
.achievement-categories button.active { border-color: #d79a3c; color: #171206; background: #e8aa43; }
.achievement-categories button.active b { color: #171206; }
.achievement-categories button.active i { border-color: #8c6327; background: #b9822f; }
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); grid-auto-rows: max-content; gap: 10px; align-content: start; }
.achievement-card { display: grid; grid-template-columns: 54px minmax(0, 1fr) 116px; gap: 12px; align-items: center; min-height: 0; padding: 12px; border-color: #37424d; background: #111820; }
.achievement-card.unlocked { border-color: #997133; background: linear-gradient(90deg, #1e1b13, #131a20 38%); box-shadow: inset 3px 0 0 #e8aa43; }
.achievement-card.claimed { border-color: #3f6035; background: linear-gradient(90deg, #172017, #12191d 38%); box-shadow: inset 3px 0 0 var(--green); }
.achievement-card.locked { filter: saturate(.55); }
.achievement-icon { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #4b5864; background: repeating-linear-gradient(45deg, #1e2730 0 4px, #18212a 4px 8px); box-shadow: inset 0 0 0 4px #0c1117, 3px 3px 0 #050709; }
.achievement-icon { --art-shadow: #05080b; --art-highlight: #f2f7f4; }
.achievement-icon svg { z-index: 1; width: 32px; height: 32px; overflow: visible; fill: currentColor; color: #8794a0; image-rendering: pixelated; shape-rendering: crispEdges; }
/* Each category carries its own accent so the mark reads before the label does. */
.achievement-icon.cat-milestones { --achievement-accent: #e8aa43; }
.achievement-icon.cat-story { --achievement-accent: #ed3e7c; }
.achievement-icon.cat-operations { --achievement-accent: #63d4c9; }
.achievement-icon.cat-crew { --achievement-accent: #9ae52b; }
.achievement-icon.cat-collection { --achievement-accent: #b18cf0; }
.achievement-icon.cat-city { --achievement-accent: #7ea6ff; }
.achievement-icon.cat-wealth { --achievement-accent: #f4cf65; }
.achievement-card.unlocked .achievement-icon { border-color: #d79a3c; }
.achievement-card.unlocked .achievement-icon svg,
.achievement-card.claimed .achievement-icon svg { color: var(--achievement-accent, #d79a3c); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--achievement-accent, #d79a3c) 40%, transparent)); }
.achievement-card.unlocked .achievement-icon { border-color: var(--achievement-accent, #d79a3c); }
.achievement-card.claimed .achievement-icon { border-color: var(--green); }
.achievement-copy { min-width: 0; }
/* Kicker row on top, then the title on a full-width line of its own. */
.achievement-kicker { display: flex; gap: 10px; justify-content: space-between; align-items: center; min-width: 0; }
.achievement-copy h3 { margin: 4px 0 5px; color: #edf0ed; font: 800 .92rem/1.25 "Courier New", monospace; letter-spacing: -.01em; }
.achievement-kicker p { display: flex; gap: 3px 6px; align-items: baseline; min-width: 0; margin: 0; font-size: .5rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.achievement-kicker p b { overflow: hidden; color: #e7a842; text-overflow: ellipsis; white-space: nowrap; }
.achievement-kicker p i { flex: 0 0 auto; color: #74818d; font-style: normal; }
.achievement-copy > p { display: -webkit-box; margin: 0 0 8px; overflow: hidden; color: #9ca7b1; font-size: .68rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.achievement-state { flex: 0 0 auto; white-space: nowrap; padding: 3px 6px; border: 1px solid #3f4b55; color: #7f8b96; font: 800 .52rem var(--mono); text-transform: uppercase; }
.achievement-card.unlocked .achievement-state { border-color: #8f6728; color: #ffd27a; }
.achievement-card.claimed .achievement-state { border-color: #47713b; color: var(--green); }
.achievement-progress { display: grid; grid-template-columns: minmax(80px, 1fr) auto; gap: 8px; align-items: center; }
.achievement-progress i { height: 7px; border: 1px solid #36414b; background: #0b1015; overflow: hidden; }
.achievement-progress b { display: block; height: 100%; background: linear-gradient(90deg, #35c8d5, var(--green)); }
.achievement-progress span { color: #9da8b2; font: 750 .58rem var(--mono); }
.achievement-reward { display: grid; gap: 5px; align-content: center; padding-left: 12px; border-left: 1px solid #39434d; text-align: right; }
.achievement-reward small { color: #7e8a95; font-size: .55rem; text-transform: uppercase; }
.achievement-reward strong { color: #ffd27a; font-size: .88rem; }
.achievement-reward span { color: #73808b; font: 800 .58rem var(--mono); text-transform: uppercase; }
.achievement-card.claimed .achievement-reward span { color: var(--green); }
.achievement-reward button { min-height: 32px; border: 1px solid #d79a3c; color: #171206; background: #e8aa43; font: 900 .62rem var(--mono); cursor: pointer; }
.achievement-toast { position: fixed; z-index: 40; top: 18px; right: 18px; display: grid; grid-template-columns: 52px minmax(180px, 1fr) auto; gap: 12px; align-items: center; width: min(430px, calc(100vw - 36px)); padding: 13px; border: 1px solid #d79a3c; color: #edf0ed; background: linear-gradient(105deg, #211a0f, #111920 65%); box-shadow: 6px 6px 0 #000, 0 0 24px #d79a3c44; animation: achievement-arrive .25s steps(4, end); }
.achievement-toast-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #d79a3c; background: #2a2113; font-size: 1.45rem; }
.achievement-toast small { display: block; color: #e8aa43; font: 900 .56rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.achievement-toast strong { display: block; margin: 3px 0; font-size: .85rem; }
.achievement-toast p { margin: 0; color: #aeb7c0; font-size: .66rem; }
.achievement-toast button { min-height: 34px; padding: 0 12px; border: 1px solid var(--green); color: #10140c; background: var(--green); font: 900 .65rem var(--mono); cursor: pointer; }
@keyframes achievement-arrive { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 850px) {
  .achievement-command { grid-template-columns: 84px minmax(0, 1fr); }
  .achievement-seal { width: 76px; }
  .achievement-command-stats { grid-column: 1 / -1; }
  .achievement-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .achievement-command { grid-template-columns: 1fr; }
  .achievement-seal { margin: auto; }
  .achievement-card { grid-template-columns: 54px minmax(0, 1fr); }
  .achievement-icon { width: 50px; height: 50px; }
  .achievement-reward { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: center; padding: 9px 0 0; border-top: 1px solid #39434d; border-left: 0; text-align: left; }
  .achievement-reward button, .achievement-reward span { grid-column: 2; grid-row: 1 / span 2; text-align: center; }
  .achievement-toast { top: 8px; right: 8px; width: calc(100vw - 16px); }
}
/* Achievements: heading, summary and filters are pinned; the list scrolls on
   its own so the modal itself never does. */
.achievements-modal .utility-modal-scroll { height: calc(100dvh - 40px); grid-template-rows: auto auto auto minmax(0, 1fr); overflow: hidden; }
.achievements-modal .utility-modal-scroll .achievement-grid {
  min-height: 0;
  overflow: hidden auto;
  padding-right: 6px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #566472 #10151b;
}
.achievements-modal .achievement-command { grid-template-columns: 66px minmax(0, 1fr) minmax(190px, .46fr); gap: 14px; padding: 11px 14px; }
.achievements-modal .achievement-seal { width: 58px; }
.achievements-modal .achievement-seal span { font-size: 1.5rem; }
.achievements-modal .achievement-seal i { bottom: 11px; font-size: .55rem; }
.achievements-modal .achievement-command-copy h3 { margin: 1px 0 5px; font-size: 1.05rem; }
.achievements-modal .achievement-command-copy > p:last-of-type { display: none; }
.achievements-modal .achievement-total-track { margin-top: 8px; height: 7px; }
.achievements-modal .achievement-command-stats span { min-height: 0; padding: 6px 9px; }
.achievements-modal .achievement-command-stats button { min-height: 30px; }
.achievements-modal .utility-heading { padding-bottom: 9px; }
.achievements-modal .utility-heading p:last-child { display: none; }
.achievements-modal .utility-heading .eyebrow { display: none; }
.achievements-modal .utility-modal-scroll { gap: 11px; padding: 18px; }
.achievements-modal .achievement-categories { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 5px; }
.achievements-modal .achievement-categories button { padding: 6px 8px; }

.utility-heading { padding: 3px 52px 15px 0; border-bottom: 1px solid var(--line); }
.utility-heading > div { max-width: 820px; }
.utility-heading h2 { margin-bottom: 7px; }
.utility-heading p:last-child { margin-bottom: 0; color: var(--muted); }
.utility-card button, .help-start button { min-height: 40px; padding: 0 14px; border: 2px solid #4c6170; color: var(--wire); background: #101820; cursor: pointer; font-weight: 850; }
.utility-card button:hover, .help-start button:hover { border-color: var(--green); color: var(--green); }
.utility-feature { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 20px; border-color: #554158; background: linear-gradient(110deg, #1f1522, #15181e 45%); }
.utility-feature > div:last-child { max-width: 900px; }
.utility-feature p:not(.eyebrow), .utility-card p, .patch-release li, .help-layout p, .database-entry p { color: var(--muted); }
.utility-signal { display: grid; place-items: center; width: 82px; height: 82px; border: 3px solid var(--pink); color: var(--pink); background: #270f1d; box-shadow: inset 0 0 0 5px #120a10; font: 900 1.65rem/1 "Courier New", monospace; }
.utility-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.utility-card { display: flex; min-height: 235px; flex-direction: column; }
.utility-date { color: var(--amber); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.utility-card h3 { margin-top: 13px; }
.utility-card p { flex: 1; }
.utility-card button { width: 100%; margin-top: 12px; }
.news-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr); min-height: 310px; padding: 0; overflow: hidden; border-color: #73506e; background: #10151c; }
.news-hero::before { position: absolute; inset: 0; z-index: 0; opacity: .13; background: repeating-linear-gradient(0deg, transparent 0 5px, #6be7e9 6px); content: ""; pointer-events: none; }
.news-hero-copy { position: relative; z-index: 2; align-self: center; padding: 34px; }
.news-hero-copy h3 { max-width: 620px; margin: 10px 0 13px; color: #f3f5f7; font-size: clamp(1.35rem, 2.3vw, 2.15rem); }
.news-hero-copy > p:not(.eyebrow) { max-width: 690px; color: #aeb9c4; }
.news-live { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 22px; padding: 6px 9px; border: 1px solid #684259; color: #ff7eb6; background: #24131d; font-size: .61rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.news-live i { width: 7px; height: 7px; background: var(--pink); box-shadow: 0 0 0 3px #54203c; animation: news-pulse 1.4s steps(2, end) infinite; }
.news-city-art { position: relative; min-height: 310px; overflow: hidden; border-left: 1px solid #43515d; background: linear-gradient(#111a28 0 52%, #182331 52%); }
.news-city-art::before, .news-city-art::after { position: absolute; width: 4px; height: 4px; background: var(--wire); box-shadow: 68px 36px 0 #d94c91, 124px 2px 0 #9be723, 184px 48px 0 #48d7da, 216px 16px 0 #667685; content: ""; }
.news-city-art::before { top: 35px; left: 30px; }
.news-city-art::after { top: 88px; left: 72px; transform: scale(.6); }
.news-moon { position: absolute; top: 48px; right: 54px; width: 48px; height: 48px; border: 7px solid #ffb448; box-shadow: 0 0 0 5px #2b2230; }
.news-skyline { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: flex-end; gap: 6px; height: 72%; padding: 0 16px; }
.news-skyline i { position: relative; flex: 1; height: var(--h); min-width: 22px; border: 3px solid #0a1018; background: var(--c); box-shadow: inset 7px 10px 0 rgba(8, 15, 22, .36); }
.news-skyline i::after { position: absolute; top: 12px; left: 8px; width: 4px; height: 4px; background: var(--wire); box-shadow: 12px 14px 0 #d94c91, 0 30px 0 #ffb448, 12px 46px 0 #48d7da; content: ""; }
.news-signal-ring { position: absolute; right: 35px; bottom: 72px; width: 68px; height: 68px; border: 4px solid var(--green); box-shadow: 0 0 0 7px rgba(155, 231, 35, .12); transform: rotate(45deg); }
.news-ticker { position: relative; z-index: 3; display: flex; grid-column: 1 / -1; align-items: center; gap: 18px; min-height: 42px; padding: 8px 18px; border-top: 2px solid #d94c91; color: #e5e9ed; background: #0b1016; font: 800 .68rem/1.35 "Courier New", monospace; }
.news-ticker span { flex: 0 0 auto; padding: 4px 7px; color: #0d1115; background: var(--pink); text-transform: uppercase; }
.news-feed { display: grid; gap: 9px; }
.news-feed > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 6px 2px 3px; }
.news-feed > header h3, .news-feed > header p { margin-bottom: 0; }
.news-feed > header > span { color: var(--wire); font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.news-feed-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 116px; padding: 15px 18px; }
.news-feed-card:hover { border-color: #586b79; background: #171e26; }
.news-feed-card h3 { margin: 6px 0 5px; font-size: .94rem; }
.news-feed-card p { margin: 0; color: var(--muted); font-size: .72rem; }
.news-feed-icon { display: grid; place-items: center; width: 54px; height: 54px; border: 2px solid currentColor; background: #0d1319; box-shadow: inset 0 0 0 4px #171e26; font: 900 1.1rem/1 "Courier New", monospace; }
.news-feed-icon.combat { color: #ffb448; }.news-feed-icon.economy { color: var(--green); }.news-feed-icon.market { color: var(--wire); }.news-feed-icon.crew { color: var(--pink); }
.news-status { min-width: 72px; padding: 5px 7px; border: 1px solid #4b5965; color: #a9f5e9; background: #101820; font-size: .58rem; font-weight: 900; text-align: center; text-transform: uppercase; }
@keyframes news-pulse { 50% { opacity: .3; } }
.patch-release { position: relative; display: grid; gap: 18px; padding: 0; overflow: hidden; border-color: #40515f; background: #0d1218; }
.patch-release::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--wire) 0 34%, var(--pink) 34% 67%, var(--green) 67%); content: ""; }
.patch-hero { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 0; padding: 15px 16px; overflow: hidden; border-bottom: 1px solid #35434f; background: linear-gradient(120deg, #132532 0 42%, #191624 74%, #10161d 100%); }
.patch-hero::after { position: absolute; top: -70px; right: 11%; width: 170px; height: 170px; border: 20px solid rgba(72, 215, 218, .045); content: ""; transform: rotate(45deg); }
.patch-release-mark { --art-shadow: #061019; --art-highlight: #d8f6fa; position: relative; z-index: 1; display: grid; place-items: center; align-content: center; gap: 1px; width: 62px; height: 62px; border: 2px solid var(--wire); color: #effcff; background: #0b1720; box-shadow: inset 0 0 0 5px #162a36, 7px 7px 0 rgba(0, 0, 0, .34); }
.patch-release-mark::before, .patch-release-mark::after { position: absolute; width: 10px; height: 10px; background: var(--pink); content: ""; }
.patch-release-mark::before { top: -3px; right: -3px; }.patch-release-mark::after { bottom: -3px; left: -3px; background: var(--green); }
.patch-release-mark svg { width: 32px; height: 32px; fill: currentColor; color: var(--wire); image-rendering: pixelated; shape-rendering: crispEdges; }
.patch-release-mark span { font: 900 .68rem/1 "Courier New", monospace; letter-spacing: -.02em; }
.patch-release-mark i { position: absolute; right: 4px; bottom: 4px; padding: 1px 3px; color: #10160c; background: var(--green); font: 900 .49rem/1 "Courier New", monospace; font-style: normal; letter-spacing: .08em; }
.patch-release-copy { position: relative; z-index: 1; max-width: 690px; }
.patch-release-copy h3 { margin: 0 0 5px; color: #f2f5f7; font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.patch-release-copy > p:not(.eyebrow) { max-width: 670px; margin: 0; color: #aab7c2; font-size: .75rem; }
.patch-release-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.patch-release-tags span { padding: 4px 7px; border: 1px solid #3c5867; color: #9edee1; background: #10202a; font-size: .54rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.patch-release-meta { position: relative; z-index: 1; display: grid; min-width: 0; justify-items: end; gap: 3px; padding-left: 16px; border-left: 1px solid #3b4854; text-align: right; }
.patch-release-meta strong { color: #f1f3f5; font: 900 1rem/1.1 "Courier New", monospace; }
.patch-release-meta small { color: #7f8c98; font-size: .58rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
/* Header and totals stay put; the release log scrolls under them. */
.patch-notes-modal .utility-modal-scroll { height: calc(100dvh - 40px); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; gap: 11px; padding: 18px; }
.patch-notes-modal .utility-heading { padding-bottom: 9px; }
.patch-notes-modal .utility-heading .eyebrow { display: none; }
.patch-notes-modal .patch-release { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; }
.patch-notes-modal .patch-hero { flex: 0 0 auto; }
.patch-scroll {
  display: grid;
  flex: 1 1 auto;
  gap: 12px;
  min-height: 0;
  padding: 0 14px 14px;
  grid-auto-rows: max-content;
  align-content: start;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #566472 #10151b;
}

.patch-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid #527728; color: var(--green); background: #121d10; font-size: .57rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.patch-live i { width: 7px; height: 7px; background: var(--green); box-shadow: 0 0 0 3px rgba(155, 231, 35, .12); animation: news-pulse 1.4s steps(2, end) infinite; }
.patch-section-heading h4, .patch-section-heading p { margin-bottom: 0; }
.patch-section-heading h4 { margin-top: 4px; color: #eef1f4; font: 900 .9rem/1.2 "Courier New", monospace; }
.patch-section-heading > span { flex: 0 0 auto; color: var(--green); font-size: .54rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

/* Changelog rows: change-type tag in a left gutter, entries beside it. */
.patch-entry { --patch-accent: var(--wire); display: block; padding: 0; border-top: 1px solid #29333d; }
.patch-entry > summary { display: grid; grid-template-columns: 96px minmax(0, 1fr) 14px; gap: 18px; align-items: center; padding: 11px 2px; cursor: pointer; list-style: none; }
.patch-entry > summary::-webkit-details-marker { display: none; }
.patch-entry > summary::after { justify-self: end; color: var(--patch-accent); content: "+"; font: 900 .85rem/1 "Courier New", monospace; }
.patch-entry[open] > summary::after { content: "–"; }
.patch-entry > summary:hover h5, .patch-entry > summary:focus-visible h5 { color: #fff; }
.patch-entry > summary:focus-visible { outline: 2px solid var(--wire); outline-offset: -2px; }
.patch-entry .patch-entry-body { padding: 0 2px 14px 116px; }
.patch-entry:first-of-type { border-top: 0; }
.patch-entry[data-tone="summary"] { --patch-accent: #8fb7ff; }
.patch-entry[data-tone="avatar"] { --patch-accent: var(--wire); }
.patch-entry[data-tone="economy"] { --patch-accent: var(--green); }
.patch-entry[data-tone="combat"] { --patch-accent: var(--pink); }
.patch-entry[data-tone="interface"] { --patch-accent: #b18cf0; }
.patch-entry[data-tone="known"] { --patch-accent: var(--amber); }
.patch-entry-tag { justify-self: start; display: inline-block; padding: 3px 7px; border: 1px solid var(--patch-accent); color: var(--patch-accent); background: color-mix(in srgb, var(--patch-accent) 9%, #0b1117); font: 900 .54rem/1.35 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.patch-entry-body { min-width: 0; }
.patch-entry > summary h5 { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 0 0 8px; color: #eef1f4; font: 900 .84rem/1.3 "Courier New", monospace; }
.patch-entry > summary h5 em { flex: 0 0 auto; color: #74818d; font: 800 .55rem/1 "Courier New", monospace; font-style: normal; letter-spacing: .07em; text-transform: uppercase; }
.patch-entry-body ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.patch-entry-body li { position: relative; padding-left: 15px; color: #9dabb6; font-size: .7rem; line-height: 1.5; }
.patch-entry-body li::before { position: absolute; top: .52em; left: 2px; width: 5px; height: 5px; background: var(--patch-accent); content: ""; }
.patch-entry-body li b { color: #dae2e8; font-weight: 800; }
.patch-entry[data-tone="known"] .patch-entry-body li::before { background: none; box-shadow: inset 0 0 0 1px var(--patch-accent); }

.patch-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 2px 0 -2px; padding: 5px 1px 10px; border-bottom: 1px solid #303c47; }
.patch-category { --patch-accent: var(--wire); padding: 0; overflow: hidden; border: 1px solid #35434e; background: #0f151b; }
.patch-category.economy { --patch-accent: var(--green); }.patch-category.combat { --patch-accent: var(--amber); }.patch-category.interface { --patch-accent: var(--pink); }
.patch-category > header { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 66px; padding: 9px 12px; border-bottom: 1px solid #34404b; background: linear-gradient(90deg, color-mix(in srgb, var(--patch-accent) 9%, #11171e), #11171e 38%); }
.patch-category > header > div { display: grid; gap: 3px; }
.patch-category > header b { width: max-content; padding: 2px 5px; color: #0b1115; background: var(--patch-accent); font-size: .48rem; letter-spacing: .08em; text-transform: uppercase; }
.patch-category > header h4 { margin: 0; color: #edf1f4; font: 900 .75rem/1.2 "Courier New", monospace; text-transform: none; }
.patch-category > header em { color: #73818d; font-size: .52rem; font-style: normal; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.patch-category-icon { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--patch-accent); background: #0b1117; box-shadow: inset 0 0 0 4px #151e25; }
.patch-category-icon i { width: 16px; height: 18px; border: 3px solid var(--patch-accent); }
.patch-category.avatar .patch-category-icon i { border-radius: 50% 50% 35% 35%; }.patch-category.economy .patch-category-icon i { width: 19px; height: 14px; border-width: 2px; box-shadow: 0 -6px 0 -3px var(--patch-accent), 0 6px 0 -3px var(--patch-accent); }.patch-category.combat .patch-category-icon i { width: 4px; height: 24px; border: 0; background: var(--patch-accent); box-shadow: 8px 0 0 var(--patch-accent); transform: rotate(40deg); }.patch-category.interface .patch-category-icon i { width: 22px; height: 16px; border-width: 2px; box-shadow: inset 0 -4px 0 var(--patch-accent); }
.patch-category ul { display: grid; gap: 0; margin: 0; padding: 8px 14px 12px; list-style: none; }
.patch-category li { position: relative; margin: 0; padding: 7px 4px 7px 15px; border-bottom: 1px solid #252f38; color: #93a0aa; font-size: .65rem; }
.patch-category li:last-child { border-bottom: 0; }
.patch-category li::before { position: absolute; top: 12px; left: 0; width: 5px; height: 5px; background: var(--patch-accent); content: ""; }
.patch-known { display: grid; gap: 11px; margin: 0; padding: 14px; border: 1px solid #6f5a32; background: linear-gradient(100deg, #1c180f, #14161a); }
.patch-known > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.patch-known h4, .patch-known p { margin-bottom: 0; }.patch-known h4 { margin-top: 4px; color: var(--amber); }
.patch-known > header > span { padding: 4px 7px; border: 1px solid #685833; color: var(--amber); font-size: .52rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.patch-roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.patch-roadmap article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 11px; border: 1px solid #49412e; background: #111419; }
.patch-roadmap article > i { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #6a5933; color: var(--amber); font: 900 .55rem/1 "Courier New", monospace; font-style: normal; }
.patch-roadmap strong { color: #dfe4e8; font: 900 .65rem/1.25 "Courier New", monospace; }.patch-roadmap p { margin: 4px 0 8px; color: #87939d; font-size: .58rem; }
.patch-roadmap article > span { grid-column: 2; width: max-content; padding: 2px 5px; color: #d6b66b; background: #292312; font-size: .47rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.help-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 14px; }
.help-command { position: relative; display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 20px; overflow: hidden; border-color: #4d6967; background: linear-gradient(110deg, #102025, #15191f 56%, #1d1420); }
.help-command::after { position: absolute; top: -35px; right: 110px; width: 150px; height: 150px; border: 17px solid rgba(72, 215, 218, .06); content: ""; transform: rotate(45deg); }
.help-command h3 { margin: 4px 0 7px; font-size: 1.18rem; }
.help-command p { max-width: 760px; margin-bottom: 10px; color: var(--muted); }
.help-command p.eyebrow { color: var(--pink); }
.help-command > button { position: relative; z-index: 1; min-width: 150px; min-height: 50px; border: 2px solid #7aa332; color: #111709; background: var(--green); box-shadow: 4px 4px 0 #060a05; cursor: pointer; font-weight: 950; }
.help-command > button:hover, .help-command > button:focus-visible { border-color: #d7ff82; background: #b1ff33; outline: 2px solid #10161b; }
.help-command-icon { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border: 3px solid var(--wire); color: var(--wire); background: #0b171d; box-shadow: inset 0 0 0 6px #15252b; font: 900 1rem/1 "Courier New", monospace; }
.help-command-icon i { position: absolute; inset: 10px; border: 4px solid var(--wire); border-bottom-color: transparent; border-radius: 50%; }
.help-command-icon::after { position: absolute; right: 7px; bottom: 15px; width: 17px; height: 6px; background: var(--pink); content: ""; }
.help-service-row { display: flex; flex-wrap: wrap; gap: 7px; }
.help-service-row span { padding: 4px 7px; border: 1px solid #3c5157; color: #9fb2b9; background: #0d171b; font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.help-service-row span:first-child { color: #d7ffa0; }
.help-service-row i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; background: var(--green); box-shadow: 0 0 0 2px #314718; }
.help-route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.help-route-grid article { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #384652; background: #0f161d; }
.help-route-grid article > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--pink); color: var(--pink); font: 900 .72rem/1 "Courier New", monospace; }
.help-route-grid strong, .help-route-grid small { display: block; }
.help-route-grid strong { color: #dfe5e9; font-size: .7rem; }
.help-route-grid small { margin-top: 3px; color: #87939d; font-size: .57rem; }
.help-start { align-self: start; border-color: #44535f; background: #111820; }
.help-steps { display: grid; gap: 5px; margin-top: 14px; }
.help-steps > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px; border: 1px solid #303d48; background: #0c1319; }
.help-steps span { display: grid; place-items: center; width: 27px; height: 27px; color: #11160b; background: var(--green); font: 900 .72rem/1 "Courier New", monospace; }
.help-steps p { margin: 0; font-size: .66rem; }
.help-steps strong { display: block; margin-bottom: 3px; color: #edf0f2; font-size: .7rem; }
.help-topics { display: grid; gap: 8px; }
.help-topic-heading { padding: 4px 2px 5px; }
.help-topic-heading h3, .help-topic-heading p { margin-bottom: 0; }
.help-topics details { padding: 0; }
.help-topics summary { padding: 17px 19px; cursor: pointer; font: 900 .82rem/1.3 "Courier New", monospace; list-style: none; }
.help-topics summary::after { float: right; color: var(--wire); content: "+"; }
.help-topics details[open] summary { border-bottom: 1px solid var(--line); color: var(--wire); }
.help-topics details[open] summary::after { content: "−"; }
.help-topics details p { margin: 0; padding: 16px 19px; }
.support-form { display: grid; gap: 18px; border-color: #82604a; background: #12181f; box-shadow: inset 0 4px 0 #ffb448; }
.support-form > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid #3c4751; }
.support-form > header h3 { margin: 4px 0 6px; font-size: 1.18rem; }
.support-form > header p:last-child { max-width: 720px; margin: 0; color: var(--muted); }
.support-form > header button { width: 34px; height: 34px; border: 1px solid #53616d; color: #dce2e6; background: #0e151b; cursor: pointer; font-size: 1.05rem; }
.support-category { margin: 0; padding: 0; border: 0; }
.support-category legend { margin-bottom: 10px; color: #dfe5e9; font: 900 .76rem/1.3 "Courier New", monospace; }
.support-form label b, .support-category legend b { color: var(--amber); font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; }
.support-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.support-category-grid label { position: relative; cursor: pointer; }
.support-category-grid input { position: absolute; opacity: 0; pointer-events: none; }
.support-category-grid span { display: block; min-height: 64px; padding: 11px; border: 2px solid #34424e; background: #0d141a; }
.support-category-grid strong, .support-category-grid small { display: block; }
.support-category-grid strong { color: #dce2e6; font-size: .68rem; }
.support-category-grid small { margin-top: 5px; color: #788690; font-size: .56rem; }
.support-category-grid input:checked + span { border-color: var(--wire); background: #12272d; box-shadow: inset 4px 0 0 var(--wire); }
.support-category-grid input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.support-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.support-fields label { display: grid; align-content: start; gap: 6px; }
.support-fields label > span { color: #cfd6dc; font-size: .65rem; font-weight: 850; }
.support-fields label em { color: #74828d; font-size: .52rem; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.support-fields input:not([type="checkbox"]), .support-fields textarea { width: 100%; border: 2px solid #3b4a57; border-radius: 0; color: #e3e8eb; background: #0a1117; font-family: inherit; font-size: .72rem; font-weight: 700; line-height: 1.5; }
.support-fields input:not([type="checkbox"]) { min-height: 42px; padding: 0 11px; }
.support-fields textarea { min-height: 84px; padding: 10px 11px; resize: vertical; }
.support-fields input:focus, .support-fields textarea:focus { border-color: var(--wire); outline: 2px solid rgba(72, 215, 218, .18); }
.support-fields label > small { justify-self: end; color: #6f7c86; font-size: .56rem; }
.support-wide { grid-column: 1 / -1; }
.support-confirm { grid-column: 1 / -1; display: flex !important; grid-template-columns: none; align-items: start; gap: 9px !important; padding: 11px; border: 1px solid #3a4650; background: #0e151b; }
.support-confirm input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--green); }
.support-confirm span { color: #9da9b2 !important; font-weight: 700 !important; }
.support-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.support-form > footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; border-top: 1px solid #3c4751; }
.support-form > footer p { max-width: 590px; margin: 0; color: #7f8c96; font-size: .59rem; }
.support-form > footer > div { display: flex; gap: 8px; }
.support-form > footer button { min-height: 42px; padding: 0 16px; border: 2px solid #46545f; color: #c8d0d6; background: #10171d; cursor: pointer; font-weight: 900; }
.support-form > footer .support-submit { min-width: 155px; border-color: #739c34; color: #101609; background: var(--green); }
.support-form > footer button:disabled { opacity: .55; cursor: wait; }
.support-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; padding: 12px 14px; border: 1px solid #53616b; background: #101820; }
.support-status strong { color: #e2e7ea; font: 900 .75rem/1.2 "Courier New", monospace; }
.support-status p { grid-column: 1; margin: 0; color: #9ba7b0; }
.support-status code { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: 7px 9px; border: 1px solid currentColor; color: var(--wire); background: #091216; }
.support-status.success { border-color: #587d34; background: #111b11; }.support-status.error { border-color: #8e3f4a; background: #211115; }.support-status.sending { border-color: #4b7174; }
.database-modal { width: min(1480px, 100%); }
.database-modal .utility-modal-scroll { gap: 12px; }
.database-masthead { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 24px; overflow: hidden; border-color: #536c72; background: linear-gradient(110deg, #102129 0 48%, #161923 72%, #251421); }
.database-masthead::before { position: absolute; right: 118px; bottom: -78px; width: 270px; height: 270px; border: 18px solid rgba(72, 215, 218, .055); content: ""; transform: rotate(45deg); }
.database-masthead h3 { margin: 5px 0 7px; font-size: 1.25rem; }
.database-masthead p:last-child { max-width: 900px; margin: 0; color: #a0adb7; }
.database-version { position: relative; z-index: 1; display: grid; justify-items: end; gap: 3px; padding: 15px; border: 2px solid #566571; background: #0c141a; box-shadow: 4px 4px 0 #06090d; }
.database-version span, .database-version small { color: #82909b; font-size: .57rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.database-version strong { color: var(--green); font: 900 2.25rem/1 "Courier New", monospace; }
.database-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.database-stats article { display: grid; gap: 4px; padding: 16px; border: 2px solid #34404c; background: #111820; }
.database-stats span { color: var(--muted); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.database-stats strong { color: var(--green); font: 900 1.45rem/1.2 "Courier New", monospace; }
.database-stats small { color: #89949f; font-size: .58rem; }
.database-searchbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border: 2px solid #455562; background: #0c1319; }
.database-searchbar label { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; }
.database-searchbar label > span { display: grid; place-items: center; align-self: stretch; border-right: 1px solid #3b4853; color: var(--wire); font: 900 1.25rem/1 "Courier New", monospace; }
.database-searchbar input { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 0; color: #edf2f4; background: transparent; font: 800 .76rem/1.3 "Courier New", monospace; }
.database-searchbar input:focus { outline: 2px solid var(--wire); outline-offset: -2px; }
.database-searchbar > div { display: grid; grid-template-columns: auto auto; place-content: center; align-items: baseline; gap: 7px; min-width: 170px; padding: 0 15px; border-left: 1px solid #3b4853; }
.database-searchbar strong { color: var(--green); font: 900 1.05rem/1 "Courier New", monospace; }
.database-searchbar > div span { color: #8996a0; font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.database-explorer { display: grid; grid-template-columns: 190px minmax(290px, .78fr) minmax(390px, 1.22fr); min-height: 570px; max-height: 650px; border: 2px solid #42515d; background: #0a1016; overflow: hidden; }
.database-categories { display: grid; align-content: start; gap: 4px; padding: 8px; border-right: 1px solid #3b4853; background: #10171e; overflow-y: auto; }
.database-categories button { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 45px; padding: 5px 8px; border: 1px solid transparent; color: #a4afb8; background: transparent; cursor: pointer; text-align: left; }
.database-categories button:hover, .database-categories button:focus-visible { border-color: #4d626e; color: #dfe6e9; outline: none; background: #152029; }
.database-categories button.active { border-color: var(--wire); color: #e7fbfb; background: #13262c; box-shadow: inset 4px 0 0 var(--wire); }
.database-categories button > span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #43525e; color: var(--pink); background: #0a1117; font: 900 .72rem/1 "Courier New", monospace; }
.database-categories button.active > span { border-color: var(--wire); color: var(--wire); }
.database-categories b { overflow: hidden; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.database-categories small { color: #6f7d88; font: 850 .55rem/1 "Courier New", monospace; }
.database-results { display: grid; align-content: start; border-right: 1px solid #3b4853; background: #0d141a; overflow-y: auto; scrollbar-color: #4d5b67 #0a1016; }
.database-result { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 74px; padding: 9px 11px; border: 0; border-bottom: 1px solid #2f3b45; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.database-result[hidden] { display: none; }
.database-result:hover, .database-result:focus-visible { outline: none; background: #17212a; }
.database-result.selected { background: #162a31; box-shadow: inset 4px 0 0 var(--wire); }
.database-result-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--record-accent); color: var(--record-accent); background: #0b1117; box-shadow: inset 0 0 0 3px #19212a; font: 900 .75rem/1 "Courier New", monospace; }
.database-result > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.database-result small { color: var(--pink); font-size: .51rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.database-result strong { overflow: hidden; color: #e3e8eb; font: 900 .7rem/1.25 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
.database-result em { overflow: hidden; color: #82909b; font-size: .56rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.database-result > i { padding: 4px 5px; border: 1px solid #4e3e4a; color: #ba6d92; background: #21131b; font-size: .48rem; font-style: normal; font-weight: 900; text-transform: uppercase; }
.database-result > i.known { border-color: #45663d; color: #aadb68; background: #111c11; }
.database-no-results { align-self: start; padding: 30px 20px; text-align: center; }
.database-no-results strong { color: #dce2e6; font: 900 .78rem/1.3 "Courier New", monospace; }
.database-no-results p { margin: 7px 0 0; color: #7f8c96; font-size: .65rem; }
.database-detail { min-width: 0; padding: 20px; background: linear-gradient(140deg, #111920, #0b1218); overflow-y: auto; scrollbar-color: #4d5b67 #0a1016; }
.database-detail > header { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding-bottom: 18px; border-bottom: 2px solid #34434e; }
.database-detail-icon { display: grid; place-items: center; width: 72px; height: 72px; border: 3px solid var(--record-accent); color: var(--record-accent); background: #0a1117; box-shadow: inset 0 0 0 5px #1a222b, 4px 4px 0 #05080b; font: 900 1.05rem/1 "Courier New", monospace; }
.database-detail header h3 { margin: 3px 0 5px; font-size: 1.18rem; }
.database-detail header div > span { color: #8e9aa4; font-size: .64rem; font-weight: 800; }
.database-detail header > b { align-self: start; padding: 5px 7px; border: 1px solid #72425b; color: #e788b6; background: #25131d; font-size: .52rem; text-transform: uppercase; }
.database-detail header > b.known { border-color: #5c813b; color: #baf377; background: #132012; }
.database-description { margin: 18px 0; color: #a7b3bc; font-size: .72rem; line-height: 1.6; }
.database-detail dl { display: grid; margin: 0; border-top: 1px solid #34404b; }
.database-detail dl > div { display: grid; grid-template-columns: minmax(125px, .42fr) minmax(0, .58fr); gap: 15px; padding: 10px 4px; border-bottom: 1px solid #303b45; }
.database-detail dt { color: #7f8d98; font-size: .57rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.database-detail dd { margin: 0; color: #d5dce1; font: 800 .64rem/1.45 "Courier New", monospace; text-align: right; }
.database-tags { margin-top: 18px; padding: 13px; border: 1px solid #36434e; background: #0b1218; }
.database-tags > div { display: flex; flex-wrap: wrap; gap: 5px; }
.database-tags span { padding: 4px 6px; border: 1px solid #3f5660; color: #8fcfd0; background: #101c21; font-size: .52rem; font-weight: 850; text-transform: capitalize; }
.database-detail > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 10px; border-top: 1px dashed #34414b; color: #6e7c87; font-size: .55rem; text-transform: uppercase; }
.database-detail > footer code { color: #93a0aa; font-size: .55rem; text-transform: none; }
.database-detail-empty { display: grid; place-content: center; min-height: 100%; text-align: center; }
.database-detail-empty strong { font: 900 .85rem/1.3 "Courier New", monospace; }
.database-detail-empty p { color: #7e8b95; }
.database-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
button.database-entry { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 15px; width: 100%; color: inherit; cursor: pointer; text-align: left; }
button.database-entry:hover, button.database-entry:focus-visible { border-color: var(--wire); outline: none; transform: translate(-1px, -1px); }
.database-entry h3, .database-entry p { margin-bottom: 4px; }
.database-entry > strong { color: var(--wire); font-size: .68rem; }
.database-icon { display: grid; place-items: center; width: 62px; height: 62px; border: 2px solid var(--pink); color: var(--pink); background: #24121d; font: 900 1.4rem/1 "Courier New", monospace; }

@media (max-width: 860px) {
  .story-campaign-hero { grid-template-columns: 1fr; }
  .story-cinematic { min-height: 200px; border-right: 0; border-bottom: 1px solid #4b5864; }
  .story-cinematic canvas { min-height: 0; }
  .game-guidance { align-items: stretch; grid-template-columns: 1fr; }
  .game-guidance-actions { justify-content: flex-start; }
  .welcome-grid, .dashboard-grid, .market-grid, .crew-grid, .streetwire-tools { grid-template-columns: 1fr; }
  .lineup-slots { grid-template-columns: 1fr 1fr; }
  .crew-filters { grid-template-columns: 1fr 1fr; }
  .crew-collection-stats { grid-template-columns: 1fr 1fr; }
  .crew-catalog-toolbar { grid-template-columns: 1fr 1fr; }
  .crew-catalog-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .market-workspace { grid-template-columns: 1fr; }
  .stage-card-grid { grid-template-columns: 1fr; }
  .streetwire-rail { position: static; }
  .market-vitals { grid-template-columns: 1fr 1fr; }
  .goods-table-head { display: none; }
  .market-row-card { grid-template-columns: minmax(180px, 1fr) auto auto; }
  .market-row-card .good-owned { display: none; }
  .market-row-card .quote-actions { grid-column: 2 / 4; }
  .battlefield { grid-template-columns: minmax(0, 1fr) 45px minmax(0, 1fr); padding-inline: 5px; }
  .battle-side { gap: 0; }
  .battle-unit { min-width: 70px; padding-inline: 3px; }
  .battle-avatar, .battle-crew-sprite, .battle-enemy-sprite { width: 72px; }
  .battle-avatar .pixel-avatar-canvas { width: 72px; }
  .battle-crew-sprite, .battle-enemy-sprite { transform: scale(.78); }
  .battle-hud { grid-template-columns: 1fr; }
  .utility-card-grid { grid-template-columns: 1fr; }
  .patch-entry > summary { grid-template-columns: minmax(0, 1fr) 14px; gap: 8px; }
  .patch-entry .patch-entry-tag { display: none; }
  .patch-entry .patch-entry-body { padding-left: 2px; }
  .patch-hero { grid-template-columns: 78px minmax(0, 1fr); }
  .patch-release-mark { width: 74px; height: 74px; }
  .patch-release-meta { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; padding: 11px 0 0; border-top: 1px solid #3b4854; border-left: 0; text-align: left; }
  .patch-release-meta small { justify-self: end; }
  .news-hero { grid-template-columns: 1fr; }
  .news-city-art { min-height: 210px; border-top: 1px solid #43515d; border-left: 0; }
  .patch-known { grid-template-columns: 1fr; }
  .help-layout { grid-template-columns: 1fr; }
  .help-command { grid-template-columns: 72px minmax(0, 1fr); }
  .help-command > button { grid-column: 1 / -1; }
  .support-category-grid { grid-template-columns: repeat(2, 1fr); }
  .database-stats, .database-grid { grid-template-columns: 1fr 1fr; }
  .database-explorer { grid-template-columns: 164px minmax(260px, 1fr); max-height: none; }
  .database-detail { grid-column: 1 / -1; min-height: 460px; border-top: 1px solid #3b4853; }
  .operation-business { grid-template-columns: 82px minmax(0, 1fr); }
  .operation-vault { grid-template-columns: 1fr 1fr; }
  .operation-vault > div:nth-child(2) { border-right: 0; }
  .operation-collection-console > button { min-height: 54px; }
  .operation-business-icon { width: 78px; height: 78px; }
  .operation-business-action { grid-column: 1 / -1; grid-template-columns: auto 1fr auto auto; align-items: center; min-height: auto; padding: 12px 0 0; border-top: 1px solid #35404b; border-left: 0; text-align: left; }
  .operation-upgrade-tree { grid-column: 1 / -1; }
  .operation-upgrade-tree > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city-district-marker { min-width: 108px; }
  .city-district-panel { grid-template-columns: 72px 1fr; }
  .city-district-panel dl { grid-column: 2; }
  .city-district-panel > button { grid-column: 1 / -1; }
  .city-operations-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  .stage-pagination { grid-template-columns: 1fr 1fr; }
  .stage-pagination > div { grid-row: 1; grid-column: 1 / -1; border: 0; border-bottom: 1px solid #283945; }
  .stage-pagination > button { grid-row: 2; min-width: 0; }
  .game-shell { width: min(100% - 18px, 1240px); padding-top: 9px; }
  .game-topbar { align-items: flex-start; }
  .game-brand img { height: 34px; }
  .account-strip { grid-template-columns: auto auto; }
  .mini-avatar, .player-identity { display: none !important; }
  .multiplayer-status { border-left: 0; }
  .cash { min-width: 112px; }
  .game-progress { grid-template-columns: 1fr auto; gap: 7px 10px; }
  .game-progress-track { grid-row: 2; grid-column: 1 / -1; }
  .game-guidance-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .news-hero-copy { padding: 24px 20px; }
  .news-feed-card { grid-template-columns: 48px minmax(0, 1fr); padding: 13px; }
  .news-feed-icon { width: 44px; height: 44px; }
  .news-status { grid-column: 2; justify-self: start; }
  .patch-hero { grid-template-columns: 1fr; gap: 14px; padding: 21px 18px; }
  .patch-release-mark { width: 68px; height: 68px; }
  .patch-release-meta { grid-template-columns: 1fr auto; }
  .patch-release-meta strong { justify-self: end; }
  .patch-release-meta small { display: none; }
  .patch-section-heading { margin-inline: 12px; }
  .patch-known { margin: 0 12px 12px; }
  .patch-category > header { grid-template-columns: 44px minmax(0, 1fr); }
  .patch-category > header em { grid-column: 2; }
  .help-route-grid, .support-fields { grid-template-columns: 1fr; }
  .support-wide, .support-confirm { grid-column: 1; }
  .support-form > footer { align-items: stretch; flex-direction: column; }
  .support-form > footer > div { display: grid; grid-template-columns: 1fr 1fr; }
  .game-nav { overflow-x: auto; }
  .nav-button { flex: 0 0 auto; min-width: 105px; }
  .avatar-hero { grid-template-columns: 1fr; text-align: center; }
  .hero-avatar { width: 150px; height: 195px; margin: 0 auto; }
  .pill-row { justify-content: center; }
  .stat-grid { grid-template-columns: 1fr; }
  .crew-card, .operation-card { grid-template-columns: 1fr; }
  .crew-card { grid-template-rows: auto auto auto; padding: 0 13px 13px; }
  .crew-card-status { margin: 0 -13px; }
  .crew-avatar-stage { min-height: 132px; margin: 0 -13px; border-right: 0; border-bottom: 1px solid #34414b; }
  .crew-avatar { width: 96px; height: 122px; }
  .crew-card-copy { padding-top: 13px; }
  .lineup-brief { align-items: flex-start; flex-direction: column; }
  .lineup-brief > div { justify-content: flex-start; }
  .crew-roster-heading { align-items: end; flex-wrap: wrap; }
  .lineup-slots { grid-template-columns: 1fr 1fr; }
  .crew-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .crew-filters .crew-search { grid-column: 1 / -1; }
  .crew-collection-header { grid-template-columns: 1fr; }
  .crew-collection-count { justify-items: start; }
  .crew-collection-stats, .crew-rarity-ledger, .crew-catalog-toolbar, .crew-catalog-grid { grid-template-columns: 1fr; }
  .crew-catalog-card { grid-template-columns: 78px minmax(0, 1fr); }
  .crew-catalog-avatar { width: 78px; }
  .crew-catalog-pagination { grid-template-columns: 1fr 1fr; }
  .crew-catalog-pagination span { grid-row: 1; grid-column: 1 / -1; }
  .streetwire-heading { align-items: flex-start; flex-direction: column; }
  .market-toolbar { align-items: stretch; flex-direction: column; }
  .market-vitals { grid-template-columns: 1fr; }
  .latest-fight { align-items: flex-start; flex-direction: column; }
  .battle-command-bar { align-items: stretch; flex-direction: column; }
  .battle-controls { overflow-x: auto; }
  .battlefield { grid-template-columns: 1fr; gap: 4px; }
  .battle-side { min-height: 235px; }
  .battle-center { min-height: 38px; }
  .battle-center > span { font-size: 1.35rem; }
  .enemy-side .battle-side-label { right: auto; left: 0; }
  .battle-skills { flex-wrap: wrap; }
  .battle-skills > span { width: 100%; }
  .battle-skills > button { flex: 1 1 120px; }
  .battle-result { grid-template-columns: 1fr; }
  .market-row-card { grid-template-columns: 1fr auto; gap: 7px; }
  .market-row-card .good-movement { grid-column: 2; }
  .market-row-card .quote-actions { grid-column: 1 / -1; }
  .quantity-stepper { justify-content: space-between; }
  .crew-detail-header { grid-template-columns: 1fr; }
  .crew-detail-avatar, .crew-detail-initial { width: 120px; height: 120px; }
  .character-stats { grid-template-columns: 1fr 1fr; }
  .skill-list article { grid-template-columns: 44px 1fr; }
  .skill-list article > small { grid-column: 2; }
  .equipment-slots, .gear-choice-grid { grid-template-columns: 1fr; }
  .city-diorama, .city-scene, .pixel-diorama-canvas { min-height: 285px; }
  .diorama-copy { left: 10px; bottom: 10px; width: calc(100% - 20px); padding: 12px; }
  .diorama-copy h2 { font-size: 1.45rem; }
  .rich-news .news-story { grid-template-columns: 96px minmax(0,1fr); }
  .pixel-event { width: 96px; height: 58px; }
  .settings-grid, .intel-list p { grid-template-columns: 1fr; }
  .game-footer { gap: 5px 8px; padding: 6px 8px; }
  .footer-nav { margin-left: 0; justify-content: flex-start; gap: 3px; }
  .footer-nav button { min-height: 26px; padding: 0 8px; font-size: .56rem; }
  .utility-modal-scroll { padding: 16px; }
  .utility-feature { grid-template-columns: 1fr; }
  .database-stats, .database-grid { grid-template-columns: 1fr; }
  .database-masthead { grid-template-columns: 1fr; }
  .database-version { justify-items: start; }
  .database-searchbar { grid-template-columns: 1fr; }
  .database-searchbar > div { min-height: 38px; border-top: 1px solid #3b4853; border-left: 0; }
  .database-explorer { grid-template-columns: 1fr; }
  .database-categories { grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); overflow-x: auto; border-right: 0; border-bottom: 1px solid #3b4853; }
  .database-results { max-height: 430px; border-right: 0; border-bottom: 1px solid #3b4853; }
  .database-detail { grid-column: 1; min-height: 420px; }
  .database-detail > header { grid-template-columns: 62px minmax(0, 1fr); }
  .database-detail-icon { width: 58px; height: 58px; }
  .database-detail header > b { grid-column: 1 / -1; justify-self: start; }
  .database-detail dl > div { grid-template-columns: 1fr; gap: 4px; }
  .database-detail dd { text-align: left; }
  button.database-entry { grid-template-columns: 56px minmax(0, 1fr); }
  .database-icon { width: 52px; height: 52px; }
  .database-entry > strong { grid-column: 2; }
  .hq-next-goal { align-items: stretch; flex-direction: column; }
  .hq-next-goal .primary-action { width: 100%; flex-basis: auto; }
  .operation-vault { grid-template-columns: 1fr; }
  .operation-vault > div { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid #35413d; }
  .operation-collection-console > button { width: 100%; min-width: 0; }
  .operation-business { grid-template-columns: 1fr; }
  .operation-business-status { margin-inline: -17px; }
  .operation-business-icon { width: 72px; height: 72px; }
  .operation-business-action { grid-column: auto; grid-template-columns: 1fr; text-align: left; }
  .operation-upgrade-tree { grid-column: auto; }
  .operation-upgrade-tree > summary { align-items: flex-start; flex-direction: column; padding-block: 10px; }
  .operation-specialization-summary { grid-template-columns: auto 1fr; width: 100%; margin-left: 0; }
  .operation-specialization-summary > i { width: 100%; }
  .operation-specialization-summary em { display: none; }
  .operation-upgrade-tree > div { grid-template-columns: 1fr; }
  .story-campaign-hero, .story-cinematic { min-height: 140px; }
  .story-cinematic canvas { min-height: 0; }
  .story-act-copy { padding: 16px; }
  .story-console-header { grid-template-columns: 1fr; padding: 17px; }
  .story-campaign-vitals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .story-campaign-vitals article { padding: 10px 11px; }
  .story-act-navigation label { grid-template-columns: 1fr; gap: 2px; padding-top: 7px; }
  .story-act-navigation select { width: 100%; }
  .stage-library-tabs { overflow-x: auto; }
  .stage-library-tabs button { flex: 0 0 auto; }
  .stage-library-tabs .story-next-mission { margin-left: 0; }
  .story-stage { grid-template-columns: 94px minmax(0, 1fr); padding: 11px; }
  .story-stage .stage-number { grid-template-rows: 52px 28px 18px; width: 84px; height: 106px; }
  .story-stage .tower-center { left: 31px; }
  .story-stage .mission-number { padding-inline: 4px; }
  .story-stage .mission-number > span { display: none; }
  .story-stage > .stage-card-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .stage-story-footer { align-items: center; flex-direction: row; }
  .battle-result-actions { justify-content: flex-start; flex-wrap: wrap; }
  .defeat-recovery { grid-template-columns: 1fr; }
  .defeat-recovery-actions { justify-content: flex-start; }
  .city-map-header { align-items: flex-start; flex-direction: column; padding: 16px; }
  .city-map-progress { justify-items: start; }
  .city-map-stage { min-height: 455px; }
  .hq-world-map .city-map-stage, .operation-map-stage { min-height: 520px; }
  .operation-map-header { display: grid; }
  .operation-map-vitals { width: 100%; min-width: 0; margin-top: 10px; }
  .operation-map-hud { grid-template-columns: 48px 1fr; min-width: 0; }
  .operation-map-hud-icon { width: 46px; height: 46px; }
  .operation-map-hud-icon canvas { width: 40px; height: 40px; }
  .operation-map-hud button { grid-column: 1 / -1; }
  .operation-map-legend { display: none; }
  .operation-map-dock-header { align-items: flex-start; flex-direction: column; gap: 5px; }
  .operation-map-dock-track { grid-auto-columns: minmax(190px, 72vw); grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-color: #756346 #080c0f; }
  .operation-map-dock .operation-dock-card { scroll-snap-align: start; }
  .city-camera-help span:nth-child(n+2) { display: none; }
  .city-camera-controls { top: 10px; right: 10px; }
  .city-camera-help { top: 10px; left: 10px; }
  .city-zone-dock { grid-auto-columns: 112px; }
  .city-district-marker { grid-template-columns: 22px minmax(0,1fr); min-width: 78px; padding: 4px; }
  .city-district-marker > span { width: 19px; height: 22px; font-size: .52rem; }
  .city-district-marker strong { font-size: .52rem; }
  .city-district-marker small { display: none; }
  .city-district-panel { grid-template-columns: 58px 1fr; padding: 15px; }
  .district-number { width: 54px; height: 54px; font-size: 1rem; }
  .city-district-panel dl { grid-column: 1 / -1; }
  .city-district-panel dl > div { grid-template-columns: 92px 1fr; }
}

/* ---------------------------------------------------------------------------
   Comfortable (larger) UI density — restored when the Compact toggle is off.
   Density-sensitive sizing applies everywhere; the roomier header/account
   chrome is desktop-only so the mobile layout always stays compact.
--------------------------------------------------------------------------- */

/* ==========================================================================
   Viewport-locked app shell

   The page itself never scrolls. The shell is exactly one viewport tall, the
   chrome rows (topbar, campaign bar, guidance, nav, footer) keep their natural
   height, and #game-content takes whatever is left. Tabs that genuinely hold
   more than fits scroll inside #game-content, so the chrome stays pinned at
   every window size instead of the whole document sliding under it.
   ========================================================================== */
html { height: 100%; }
body { height: 100dvh; min-height: 0; overflow: hidden; overscroll-behavior: none; }

.game-shell { display: flex; flex-direction: column; height: 100dvh; max-height: 100dvh; }
.game-shell > * { flex: 0 0 auto; }
.game-shell > .game-content {
  flex: 1 1 auto;
  min-height: 0;
  /* Rows stay at their content height and the region scrolls. Without this the
     fixed-height grid squeezes any card that sets overflow:hidden, because such
     a card's automatic minimum size is 0 rather than its content. */
  grid-auto-rows: max-content;
  /* Cards paint a 5px offset drop shadow outside their box; the negative right
     margin buys that room back without narrowing the cards themselves. */
  margin-right: -8px;
  padding: 0 8px 8px 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #566472 #10141a;
}
.game-shell > .game-content::-webkit-scrollbar { width: 8px; }
.game-shell > .game-content::-webkit-scrollbar-thumb { background: #566472; border: 2px solid #10141a; }
.game-shell > .game-footer { margin-top: 8px; }

/* Combat takes the whole shell and scrolls inside itself. */
.game-shell.battle-screen-active > .battle-screen { flex: 1 1 auto; min-height: 0; overflow: hidden auto; }

/* --------------------------------------------------------------------------
   HQ atlas: fill the content region exactly, never overflow it

   The map is the screen, so it is guaranteed the majority of the card. In fill
   mode the atlas header reads as a map toolbar rather than a page header and
   the district panel as a caption, so both are capped and the header blurb
   rides on a single line.
   -------------------------------------------------------------------------- */
.game-content[data-tab="overview"] { display: flex; flex-direction: column; overflow: hidden; }
.game-content[data-tab="overview"] > .hq-world-map { flex: 1 1 auto; }
.game-content[data-tab="overview"] > .hq-world-map { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.game-content[data-tab="overview"] .city-map-stage { flex: 1 1 auto; min-height: 140px; aspect-ratio: auto; }
.game-content[data-tab="overview"] .city-map-header { flex: 0 0 auto; padding: 9px 16px; }
.game-content[data-tab="overview"] .city-district-panel { flex: 0 1 auto; min-height: 0; max-height: 26%; padding: 12px 18px; overflow: hidden auto; }
.game-content[data-tab="overview"] .city-district-panel dl > div { padding: 4px 0; }

/* --------------------------------------------------------------------------
   StreetWire and Operations fill the viewport too

   Same shape as HQ and Story: the tab is exactly as tall as the content
   region, and the long list inside it scrolls rather than the page.
   -------------------------------------------------------------------------- */
.game-content[data-tab="streetwire"] { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.game-content[data-tab="streetwire"] > * { flex: 0 0 auto; }
.game-content[data-tab="streetwire"] > .market-workspace { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.game-content[data-tab="streetwire"] .market-desk,
.game-content[data-tab="streetwire"] .streetwire-rail { min-height: 0; }
.game-content[data-tab="streetwire"] .streetwire-rail { overflow: hidden auto; overscroll-behavior: contain; }
.game-content[data-tab="streetwire"] .market-desk { display: flex; flex-direction: column; min-height: 0; }
.game-content[data-tab="streetwire"] .market-toolbar,
.game-content[data-tab="streetwire"] .goods-table-head { flex: 0 0 auto; }
.game-content[data-tab="streetwire"] .goods-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.game-content[data-tab="streetwire"] .market-intel { min-height: 0; overflow: hidden auto; }

.game-content[data-tab="operations"] { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.game-content[data-tab="operations"] > * { flex: 0 0 auto; }
.game-content[data-tab="operations"] > .operations-console-scroll { flex: 1 1 48%; min-height: 200px; }
.game-content[data-tab="operations"] > .operation-map-card { display: flex; flex-direction: column; flex: 1 1 52%; min-height: 320px; overflow: hidden; }
.game-content[data-tab="operations"] .operation-map-header { flex: 0 0 auto; padding: 9px 16px; }
.game-content[data-tab="operations"] .operation-map-stage { flex: 1 1 auto; min-height: 200px; aspect-ratio: auto; }
/* The map is pinned; the command centre, vault and dossiers scroll under it. */
.operations-console-scroll {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: hidden auto;
  padding-right: 6px;
  grid-auto-rows: max-content;
  align-content: start;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #566472 #10141a;
}
.operation-map-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.operation-map-header h2 { margin: 0; font-size: 1.05rem; }
.operation-map-header .operation-map-vitals { display: flex; flex: 0 0 auto; gap: 14px; }
.operation-map-header .operation-map-vitals span { display: flex; align-items: baseline; gap: 5px; }
.operation-map-header .operation-map-vitals b { color: var(--wire); font: 900 .82rem/1 "Courier New", monospace; }
.operation-map-header .operation-map-vitals small { color: #7d8b96; font-size: .52rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }

/* The selected-site card now sits in the dock header rather than floating on
   the map, and the vault carries the two stats the command card used to. */
.operation-map-dock-header > .operation-map-hud { position: static; display: flex; align-items: center; gap: 11px; width: 100%; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.operation-map-dock-header > .operation-map-hud > div:not(.operation-map-hud-icon) { display: grid; gap: 1px; min-width: 0; margin-right: auto; }
.operation-map-dock-header > .operation-map-hud strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-map-dock-header > .operation-map-hud button { flex: 0 0 auto; }
.game-content[data-tab="operations"] .operation-map-dock { flex: 0 0 auto; }
.collection-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.collection-facts span { display: grid; gap: 2px; min-width: 0; }
.collection-facts small { color: #7d8b96; font-size: .52rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.collection-facts strong { overflow: hidden; color: #dfe6ea; font: 900 .82rem/1.1 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
.operation-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.operation-list-heading h3 { margin: 0; font-size: .95rem; }
/* The legend is the first overlay to go when the map gets short. */
.game-content[data-tab="operations"] .operation-map-legend { display: none; }

/* --------------------------------------------------------------------------
   Story: brief on top, mission list takes the rest

   The brief keeps its natural height and the mission cards scroll inside their
   own grid, so the act header and the toolbar stay put while you page through
   missions instead of the whole tab sliding away.
   -------------------------------------------------------------------------- */
.game-content[data-tab="story"] { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.game-content[data-tab="story"] > * { flex: 0 0 auto; }
.game-content[data-tab="story"] > .story-mission-console { flex: 1 1 auto; }
.game-content[data-tab="story"] > .story-mission-console { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.game-content[data-tab="story"] .story-mission-toolbar { flex: 0 0 auto; }
.game-content[data-tab="story"] .stage-fight-message { flex: 0 0 auto; }
.game-content[data-tab="story"] .stage-card-grid {
  grid-auto-rows: max-content;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #566472 #0a1016;
}

/* The opening checklist sits above the nav on every tab, and its only action
   is "Open Story". On this tab it is redundant, and at 174px it is the single
   largest claim on a budget the mission list needs. */
.game-shell:has(> .game-content[data-tab="story"]) > .first-night { display: none; }

@media (max-height: 860px) {
  .story-cinematic { min-height: 160px; }
  .story-act-copy { gap: 7px; padding: 12px 15px; }
  .story-scene-status { display: none; }
  /* Short windows: the brief gives up padding so the mission list keeps a
     usable slice rather than collapsing to a scroll sliver. */
  .story-act-copy > p:not(.eyebrow) { -webkit-line-clamp: 1; }
  .story-brief-status { gap: 6px; }
  .story-console-stage, .story-brief-squad { padding: 6px 10px; }
  .story-console-stage strong, .story-brief-squad strong { font-size: .92rem; }
}

@media (max-height: 680px) {
  .game-content[data-tab="story"] .story-cinematic { display: none; }
  .game-content[data-tab="story"] .story-campaign-hero { grid-template-columns: minmax(0, 1fr); }
  .story-act-copy > p:not(.eyebrow) { display: none; }
}

/* --------------------------------------------------------------------------
   Narrow-window topbar

   The account strip is built from fixed-width cells, so it overflows rather
   than shrinking when the topbar runs out of room. Pin the controls at their
   real width and let the brand give way instead — first by ellipsis, then by
   falling back to the mark alone.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .game-topbar { gap: 10px; }
  .game-topbar-tools { flex: 0 0 auto; }
  .game-brand { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .game-brand span { min-width: 0; }
  .game-brand strong, .game-brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 430px) {
  .game-brand span { display: none; }
  .game-brand img { height: 30px; }
}

/* --------------------------------------------------------------------------
   Short-window compaction

   A 1080p browser window is already "short" for this layout, so the tiers
   start early. Prose goes first, then padding, then optional panels — the map
   keeps its space at every step rather than collapsing.
   -------------------------------------------------------------------------- */
@media (max-height: 1000px) {
  .game-guidance { padding: 9px 13px; }
  .game-guidance p:last-child { display: none; }
  .city-map-header { padding: 13px 18px 11px; }
  .city-district-panel { gap: 14px; padding: 13px 18px; }
  .district-number { width: 58px; height: 58px; font-size: 1.2rem; }
  .district-main h2 { font-size: 1.3rem; }
}

@media (max-height: 860px) {
  .game-shell { padding-top: 8px; padding-bottom: 8px; }
  .game-topbar { padding: 5px 10px; }
  .game-brand img { height: 32px; }
  .game-progress { margin-top: 5px; padding: 4px 9px; }
  .game-guidance { margin-top: 6px; padding: 7px 11px; }
  .game-guidance h3 { font-size: 1.05rem; }
  .game-guidance-actions button { min-height: 32px; }
  .game-nav { margin: 6px 0 7px; }
  .nav-button { min-height: 28px; }
  .game-shell > .game-footer { margin-top: 6px; padding: 4px 9px; }
  .city-map-header { padding: 10px 15px 8px; }
  .city-map-header h2 { font-size: 1.25rem; }
  .city-map-progress strong { font-size: 1.2rem; }
  .city-district-panel { gap: 12px; padding: 10px 15px; }
  .district-number { width: 46px; height: 46px; font-size: 1rem; }
  .district-main h2 { font-size: 1.1rem; }
  .city-district-panel dl > div { padding: 3px 0; }
  .city-district-panel > button { min-height: 38px; }
}

/* Above the narrow breakpoint the account strip still has its four columns,
   so it can be shrunk; below it the width rules collapse it to two and this
   must not fight them. */
@media (min-width: 621px) and (max-height: 860px) {
  .mini-avatar { width: 36px; height: 36px; }
  .account-strip { grid-template-columns: 36px minmax(120px, auto) auto minmax(104px, auto); }
}

@media (max-height: 680px) {
  .game-guidance { display: none; }
  .city-map-header p.eyebrow { display: none; }
  .city-district-panel dl { display: none; }
  .hq-map-legend { display: none; }
}

@media (max-height: 540px) {
  .game-shell > .game-footer { display: none; }
  .game-progress { display: none; }
  .city-district-panel { display: none; }
  .city-map-header p:last-child { display: none; }
}

/* Gear rarity marks: one 8-bit sprite per tier, shape-differentiated so the
   tier still reads if colour is hard to tell apart. */
.rarity-mark { --art-shadow: #05080b; --art-highlight: #ffffff; display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; margin-right: .35em; vertical-align: -.16em; }
.rarity-mark svg { width: 100%; height: 100%; fill: currentColor; image-rendering: pixelated; shape-rendering: crispEdges; }
.rarity-mark.rarity-common { color: #aeb8c3; }
.rarity-mark.rarity-uncommon { color: #8eea42; }
.rarity-mark.rarity-rare { color: #45d5f3; }
.rarity-mark.rarity-epic { color: #df4fb4; }
.rarity-mark.rarity-legendary { color: #ffad42; }
.rarity-mark.rarity-mythic { color: #ff5964; filter: drop-shadow(0 0 3px rgba(255, 89, 100, .55)); }
.rarity-mark.rarity-unique { color: #f4e7c3; filter: drop-shadow(0 0 4px rgba(244, 231, 195, .6)); }
.gear-flavor { display: block; margin: 2px 0 6px; color: #9aa7b2; font-size: .64rem; font-style: italic; quotes: none; }
.crafted-gear.rarity-mythic { box-shadow: inset 3px 0 #ff5964, 0 0 14px rgba(255, 89, 100, .18); }
.crafted-gear.rarity-unique { box-shadow: inset 3px 0 #f4e7c3, 0 0 16px rgba(244, 231, 195, .2); }

/* Gear the fighter has not levelled into: visible, but not selectable. */
.gear-choice.level-locked { opacity: .5; cursor: not-allowed; filter: saturate(.5); }
.gear-choice.level-locked .gear-choice-state { border-color: #7a5330; color: #f0b46a; }

/* Codex: undiscovered fighters are visible as locked entries so the catalogue
   reads as a checklist rather than an empty page. */
.crew-catalog-card.locked { border-color: #333d47; background: #0c1218; filter: saturate(.35); }
.crew-catalog-card.locked .crew-catalog-copy h3 { color: #6d7a85; letter-spacing: .04em; }
.crew-catalog-avatar.locked { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #141c24 0 5px, #101820 5px 10px); }
.crew-catalog-avatar.locked span { color: #45525d; font: 900 2rem/1 "Courier New", monospace; }
.crew-acquisition-status.locked { border-color: #4a5661; color: #7b8892; background: #0e151b; }
.crew-collection-count strong { white-space: nowrap; }

/* ==========================================================================
   Crew Phone — recruitment gacha
   ========================================================================== */
.wallet { display: flex; align-items: center; gap: 4px; padding: 0 8px; border-left: 1px solid #303b47; }
.wallet-chip { --art-shadow: #05080b; --art-highlight: #fff8e2; display: flex; align-items: center; gap: 5px; min-height: 26px; padding: 3px 7px; border: 1px solid #3c4855; background: #0d141b; cursor: pointer; }
.wallet-chip svg { width: 15px; height: 15px; fill: currentColor; image-rendering: pixelated; shape-rendering: crispEdges; }
.wallet-chip b { font: 900 .68rem/1 "Courier New", monospace; }
.wallet-chip.calls { color: #63d4c9; }
.wallet-chip.chains { color: #f4cf65; }
.wallet-chip:hover, .wallet-chip:focus-visible { border-color: currentColor; outline: none; }

.operation-recruit { min-height: 34px; padding: 0 12px; border: 1px solid var(--green); color: #0b1007; background: var(--green); font: 900 .64rem/1 "Courier New", monospace; cursor: pointer; }
.operation-recruit:hover, .operation-recruit:focus-visible { filter: brightness(1.12); outline: none; }

.recruit-modal { position: relative; width: min(880px, 100%); max-height: calc(100dvh - 40px); padding: 20px; overflow: hidden auto; border-color: var(--green); box-shadow: 8px 8px 0 #000, 0 0 32px rgba(154, 229, 43, .16); }
.recruit-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 0 44px 14px 0; border-bottom: 1px solid var(--line); }
.recruit-title { --art-shadow: #05080b; --art-highlight: #d8f6fa; display: flex; align-items: center; gap: 13px; }
.recruit-title svg { width: 40px; height: 40px; fill: var(--wire); image-rendering: pixelated; shape-rendering: crispEdges; }
.recruit-title h2 { margin: 0; font-size: 1.25rem; }
.recruit-title p { margin: 2px 0 0; color: var(--muted); font-size: .68rem; }
.recruit-pity { display: grid; justify-items: end; gap: 1px; text-align: right; }
.recruit-pity span { color: #7d8b96; font-size: .5rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.recruit-pity strong { color: var(--amber); font: 900 1.15rem/1 "Courier New", monospace; }
.recruit-pity small { color: #6f7c86; font-size: .55rem; }

.recruit-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 14px; }
.recruit-option { display: grid; gap: 10px; padding: 12px; border: 1px solid #3a4651; background: #0e151c; }
.recruit-option-head { --art-shadow: #05080b; --art-highlight: #fff8e2; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.recruit-option-head svg { width: 24px; height: 24px; fill: var(--wire); image-rendering: pixelated; shape-rendering: crispEdges; }
.recruit-option[data-currency="goldChains"] .recruit-option-head svg { fill: #f4cf65; }
.recruit-option[data-currency="cash"] .recruit-option-head svg { fill: var(--green); }
.recruit-option-head strong { display: block; font: 900 .78rem/1.2 "Courier New", monospace; }
.recruit-option-head small { display: block; color: #7d8b96; font-size: .58rem; }
.recruit-option-head b { color: #e9eff2; font: 900 .8rem/1 "Courier New", monospace; }
.recruit-option-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.recruit-option-actions button { display: grid; gap: 1px; min-height: 42px; padding: 5px; border: 1px solid #4a5764; color: #dce4e9; background: #131c25; cursor: pointer; }
.recruit-option-actions button span { font: 900 .68rem/1 "Courier New", monospace; }
.recruit-option-actions button small { color: #8b98a3; font-size: .55rem; }
.recruit-option-actions button.batch { border-color: var(--green); color: var(--green); }
.recruit-option-actions button:not(:disabled):hover { border-color: var(--wire); color: #fff; }
.recruit-option-actions button:disabled { opacity: .42; cursor: not-allowed; }

.recruit-odds { margin-top: 14px; padding: 12px; border: 1px solid #35414c; background: #0c1218; }
.recruit-odds header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.recruit-odds strong { font: 900 .7rem/1 "Courier New", monospace; }
.recruit-odds small { color: #7d8b96; font-size: .58rem; }
.recruit-odds > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.recruit-odds span { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid #333e49; background: #101820; font-size: .62rem; }
.recruit-odds i { width: 8px; height: 8px; background: var(--rarity-color); box-shadow: 0 0 7px var(--rarity-color); }
.recruit-odds b { color: var(--rarity-color); font: 900 .58rem/1 "Courier New", monospace; text-transform: uppercase; }
.recruit-odds em { margin-left: auto; color: #cfd7dd; font: 800 .62rem/1 "Courier New", monospace; font-style: normal; }

/* The call itself: dial, ring, answer. */
.recruit-stage { display: grid; place-items: center; min-height: 300px; margin-top: 14px; }
.recruit-dialer { --art-shadow: #05080b; --art-highlight: #d8f6fa; position: relative; display: grid; place-items: center; gap: 16px; padding: 40px; }
.recruit-dialer svg { position: relative; z-index: 1; width: 72px; height: 72px; fill: var(--wire); image-rendering: pixelated; shape-rendering: crispEdges; animation: recruit-shake .34s steps(2, end) infinite; }
.recruit-dialer p { position: relative; z-index: 1; margin: 0; color: #cfe6e4; font: 900 .8rem/1 "Courier New", monospace; letter-spacing: .06em; }
.recruit-ring { position: absolute; top: 26px; width: 84px; height: 84px; border: 2px solid var(--wire); border-radius: 50%; opacity: 0; animation: recruit-ring 1.5s ease-out infinite; }
.recruit-ring.delay { animation-delay: .55s; }
@keyframes recruit-ring { 0% { transform: scale(.6); opacity: .75; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes recruit-shake { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

.recruit-results { width: 100%; }
.recruit-results > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.recruit-results > header strong { color: var(--green); font: 900 .82rem/1 "Courier New", monospace; }
.recruit-results > header span { color: var(--amber); font: 800 .64rem/1 "Courier New", monospace; }
.recruit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 8px; }
.recruit-card { display: grid; gap: 7px; padding: 9px; border: 1px solid var(--rarity-color); background: linear-gradient(180deg, color-mix(in srgb, var(--rarity-color) 8%, #0d141b), #0d141b 60%); opacity: 0; animation: recruit-reveal .32s ease-out forwards; animation-delay: var(--reveal-delay, 0ms); }
.recruit-card.duplicate { border-color: #3d4954; background: #0c1218; }
@keyframes recruit-reveal { from { opacity: 0; transform: translateY(9px) scale(.96); } to { opacity: 1; transform: none; } }
.recruit-card-avatar { height: 92px; overflow: hidden; border: 1px solid #2b353f; background: radial-gradient(circle at 50% 35%, #24313d, #101820 72%); }
.recruit-card-avatar canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.recruit-card-copy small { color: var(--rarity-color); font: 900 .52rem/1.2 "Courier New", monospace; text-transform: uppercase; }
.recruit-card-copy h4 { margin: 3px 0 2px; overflow: hidden; font: 900 .72rem/1.25 "Courier New", monospace; text-overflow: ellipsis; white-space: nowrap; }
.recruit-card-copy p { margin: 0; overflow: hidden; color: #7d8b96; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.recruit-card footer span { font: 900 .52rem/1 "Courier New", monospace; letter-spacing: .06em; text-transform: uppercase; }
.recruit-new { color: var(--green); }
.recruit-dupe { color: #8b98a3; }
.recruit-again { width: 100%; min-height: 40px; margin-top: 12px; border: 1px solid var(--green); color: var(--green); background: #101a0d; font: 900 .7rem/1 "Courier New", monospace; cursor: pointer; }
.recruit-again:hover { color: #0b1007; background: var(--green); }
.recruit-message { margin: 12px 0 0; padding: 9px 12px; border-left: 3px solid var(--amber); color: #f0dcb4; background: #1d1811; font-size: .7rem; }

.reduced-motion .recruit-ring, .reduced-motion .recruit-dialer svg { animation: none; }

@media (max-width: 620px) {
  .wallet { padding: 0 4px; }
  .recruit-option-actions { grid-template-columns: 1fr; }
}

/* Operations dossier: a compact row, not a full-height panel. The action
   column stacked six elements and the copy column repeated the heading block. */
.operation-business-action { align-content: start; gap: 6px; }
.operation-business-action button { min-height: 32px; }
.operation-business-action small { font-size: .56rem; line-height: 1.3; }
.operation-business-copy .section-heading { gap: 8px; }
.operation-business-copy > p { margin-bottom: 6px; font-size: .7rem; }
.operation-upgrade-tree > summary { min-height: 36px; padding: 7px 10px; }
.operation-business-icon canvas { width: 52px; height: 52px; }

/* Shard exchange: the sink for duplicate pulls. */
.recruit-shards { margin-top: 14px; padding: 12px; border: 1px solid #4a4436; background: linear-gradient(120deg, #1a1710, #0e1319 62%); }
.recruit-shards > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.recruit-shards > header > div { --art-shadow: #05080b; --art-highlight: #fff8e2; display: flex; align-items: center; gap: 10px; }
.recruit-shards svg { width: 26px; height: 26px; fill: var(--amber); image-rendering: pixelated; shape-rendering: crispEdges; }
.recruit-shards strong { display: block; font: 900 .72rem/1.2 "Courier New", monospace; }
.recruit-shards small { display: block; color: #8b8168; font-size: .58rem; }
.recruit-shards > header > b { color: var(--amber); font: 900 1rem/1 "Courier New", monospace; }
.recruit-shards > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; }
.recruit-shards button { display: grid; gap: 2px; min-height: 44px; padding: 6px 9px; border: 1px solid var(--rarity-color); color: var(--rarity-color); background: #10161d; cursor: pointer; }
.recruit-shards button span { font: 900 .62rem/1.1 "Courier New", monospace; }
.recruit-shards button small { color: #8b98a3; font-size: .55rem; }
.recruit-shards button:not(:disabled):hover { background: color-mix(in srgb, var(--rarity-color) 14%, #10161d); }
.recruit-shards button:disabled { opacity: .4; cursor: not-allowed; }

/* First night — the opening checklist, shown in the real shell rather than on
   a separate tutorial page. It retires itself once every step is done. */
.first-night {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-left: 2px solid var(--accent, #91ed24);
}
.first-night-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.first-night-head h3 { margin: 2px 0 0; font-size: 15px; }
.first-night-count {
  flex: none; padding: 3px 9px;
  border: 1px solid rgba(145, 237, 36, .45);
  color: var(--accent, #91ed24);
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
}
.first-night-copy { margin: 0; color: var(--muted, #91a0ae); font-size: 12.5px; line-height: 1.55; }
.first-night-steps {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 0; padding: 0; list-style: none;
}
.first-night-steps li {
  display: flex; align-items: center; gap: 6px;
  color: var(--muted, #91a0ae); font-size: 11.5px;
}
.first-night-steps i {
  width: 9px; height: 9px; flex: none;
  border: 1px solid currentColor; border-radius: 50%;
}
.first-night-steps li.done { color: var(--accent, #91ed24); }
.first-night-steps li.done i { background: currentColor; }
.first-night-steps li.current { color: var(--white, #f4f4ee); font-weight: 700; }
.first-night-go {
  justify-self: start;
  min-height: 34px; padding: 0 16px;
  border: 0; background: var(--accent, #91ed24);
  color: #07100a; font-weight: 800; font-size: 12px;
}

/* Manual targeting. A chosen skill waits to be aimed: the armed skill stays
   lit and every living enemy becomes a button. */
.battle-controls button.armed,
.skill-tray button.armed {
  outline: 2px solid var(--accent, #91ed24);
  outline-offset: 1px;
}
button.battle-unit.targetable {
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: crosshair;
  border: 1px solid rgba(255, 63, 145, .55);
  background: linear-gradient(180deg, rgba(255, 63, 145, .10), transparent 60%);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
button.battle-unit.targetable:hover,
button.battle-unit.targetable:focus-visible {
  border-color: var(--pink, #ff3f91);
  background: linear-gradient(180deg, rgba(255, 63, 145, .22), transparent 65%);
  transform: translateY(-2px);
}
button.battle-unit.targetable::after {
  content: "◎";
  position: absolute;
  top: 6px; right: 8px;
  color: var(--pink, #ff3f91);
  font-size: 13px;
  opacity: .75;
}
button.battle-unit.targetable { position: relative; }
@media (prefers-reduced-motion: reduce) {
  button.battle-unit.targetable { transition: none; }
  button.battle-unit.targetable:hover { transform: none; }
}