:root {
  color-scheme: dark;
  --bg: #071014;
  --panel: #0b171d;
  --panel-2: #101f26;
  --line: rgba(145, 182, 190, .2);
  --muted: #718991;
  --text: #d9e4e5;
  --cyan: #4ce0d2;
  --cyan-soft: rgba(76, 224, 210, .14);
  --amber: #f0b35a;
  --red: #ef665f;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: Inter, sans-serif; }
button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

#game-shell { min-height: 100dvh; display: grid; grid-template-rows: 68px minmax(280px, 1fr) 190px; background: #071014; }
.topbar { position: relative; z-index: 10; display: flex; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(7,16,20,.97); box-shadow: 0 7px 30px rgba(0,0,0,.35); }
.brand { display: flex; align-items: center; gap: 12px; width: 260px; }
.brand i { width: 28px; height: 28px; display: block; transform: rotate(45deg); border: 2px solid var(--cyan); box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 7px rgba(76,224,210,.45); }
.brand div { display: flex; flex-direction: column; }
.brand b { font: 700 19px 'Barlow Condensed'; letter-spacing: 3.5px; }
.brand span, .panel-label, .economy span, .mission-card > span, .eyebrow { color: var(--muted); font: 600 9px 'JetBrains Mono'; letter-spacing: 1.4px; }
.economy { flex: 1; display: flex; justify-content: center; height: 100%; }
.economy > div { min-width: 125px; padding: 13px 25px; border-left: 1px solid rgba(255,255,255,.06); display: flex; justify-content: center; flex-direction: column; gap: 3px; }
.economy > div:last-child { border-right: 1px solid rgba(255,255,255,.06); }
.economy b { font: 600 16px 'JetBrains Mono'; }
.economy div:first-child b { color: var(--cyan); }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; color: var(--cyan); }
.top-actions { display: flex; gap: 8px; }
.icon-button.active { border-color: rgba(76,224,210,.55); background: var(--cyan-soft); box-shadow: 0 0 18px rgba(76,224,210,.08); }

.battlefield { min-height: 0; position: relative; overflow: hidden; background: #0d1a1b; cursor: crosshair; }
#game-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.scanlines { pointer-events: none; position: absolute; inset: 0; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.18) 4px); mix-blend-mode: overlay; }
.mission-card { position: absolute; left: 18px; top: 18px; width: 290px; padding: 13px 15px; border: 1px solid rgba(76,224,210,.26); border-left: 3px solid var(--cyan); background: rgba(5,13,16,.84); backdrop-filter: blur(8px); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.mission-card strong { display: block; margin: 5px 0 3px; font: 600 16px 'Barlow Condensed'; letter-spacing: .5px; }
.mission-card p { margin: 0; color: #8ea1a5; font-size: 10px; line-height: 1.45; }
.objective-progress { height: 2px; margin-top: 10px; overflow: hidden; background: rgba(255,255,255,.08); }
.objective-progress i { display: block; height: 100%; width: 12%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transition: width .4s ease; }
.status-feed { position: absolute; left: 18px; bottom: 16px; width: min(400px, calc(100% - 36px)); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.status-feed p { margin: 0; padding: 7px 10px; border-left: 2px solid var(--cyan); background: rgba(5,13,16,.82); font: 500 10px 'JetBrains Mono'; animation: feed-in .22s ease-out; }
.status-feed p.warn { border-color: var(--amber); color: #ffd89f; }
.status-feed p.danger { border-color: var(--red); color: #ffaaa6; }
@keyframes feed-in { from { transform: translateX(-12px); opacity: 0; } }
.wave-card { position: absolute; right: 18px; top: 18px; width: 190px; padding: 11px 12px 9px; border: 1px solid rgba(239,102,95,.28); border-right: 3px solid var(--red); background: rgba(5,13,16,.84); backdrop-filter: blur(8px); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.wave-card > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.wave-card span { color: #8b7779; font: 600 8px 'JetBrains Mono'; letter-spacing: 1px; }
.wave-card b { color: #ffaaa6; font: 600 9px 'JetBrains Mono'; }
.wave-card strong { display: block; margin: 5px 0 7px; color: #f2dfe0; font: 600 20px 'JetBrains Mono'; }
.wave-card > small { display: block; margin: -3px 0 7px; overflow: hidden; color: #a98b8c; font: 600 7px/1.2 'JetBrains Mono'; letter-spacing: .45px; text-overflow: ellipsis; white-space: nowrap; }
.wave-track { height: 2px; overflow: hidden; background: rgba(255,255,255,.08); }
.wave-track i { display: block; height: 100%; width: 0; background: var(--red); box-shadow: 0 0 12px var(--red); transition: width .2s linear; }
.wave-card.imminent { animation: threat-pulse .75s ease-in-out infinite alternate; border-color: rgba(239,102,95,.72); }
@keyframes threat-pulse { to { box-shadow: 0 0 28px rgba(239,102,95,.2), inset 0 0 20px rgba(239,102,95,.06); } }
.selection-box { display: none; position: absolute; border: 1px solid var(--cyan); background: rgba(76,224,210,.08); pointer-events: none; }
.placement-tip { display: none; position: absolute; transform: translate(-50%, -145%); padding: 6px 9px; border: 1px solid var(--cyan); background: rgba(5,13,16,.92); color: var(--cyan); font: 600 9px 'JetBrains Mono'; pointer-events: none; white-space: nowrap; }

.command-deck { position: relative; z-index: 9; display: grid; grid-template-columns: minmax(220px, 1.05fr) minmax(270px, 1.15fr) minmax(390px, 1.7fr) 245px; border-top: 1px solid var(--line); background: linear-gradient(180deg, #0d1b21, #081217); box-shadow: 0 -12px 35px rgba(0,0,0,.35); }
.command-deck > div { padding: 15px 17px; border-right: 1px solid var(--line); min-width: 0; }
.command-deck > div:last-child { border-right: 0; }
.selection-content { height: 130px; margin-top: 11px; display: flex; align-items: center; gap: 15px; }
.selection-content > div:last-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.selection-content b { font: 600 17px 'Barlow Condensed'; letter-spacing: .5px; }
.selection-content span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.unit-emblem { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(76,224,210,.45); background: var(--cyan-soft); color: var(--cyan); font-size: 27px; clip-path: polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%); }
.health-line { display: block; width: 100%; height: 3px; margin-top: 5px; background: rgba(255,255,255,.08); }
.health-line i { display: block; height: 100%; background: var(--cyan); }
.order-grid { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.order-grid button, .production-grid button { border: 1px solid var(--line); background: rgba(17,34,41,.8); cursor: pointer; transition: .15s ease; }
.order-grid button { min-height: 57px; display: flex; align-items: center; gap: 9px; text-align: left; padding: 8px 10px; }
.order-grid button:hover:not(:disabled), .order-grid button.active, .production-grid button:hover:not(:disabled) { border-color: var(--cyan); background: var(--cyan-soft); }
.order-grid button:disabled, .production-grid button:disabled { opacity: .38; cursor: not-allowed; }
.order-grid i { color: var(--cyan); font-style: normal; font-size: 16px; }
.order-grid span { font: 600 13px 'Barlow Condensed'; }
.order-grid small { display: block; margin-top: 2px; color: var(--muted); font: 500 7px 'JetBrains Mono'; }
.production-head { display: flex; justify-content: space-between; align-items: center; }
.production-head > span:last-child { color: var(--cyan); font: 600 9px 'JetBrains Mono'; }
.production-grid { margin-top: 11px; display: grid; grid-template-columns: repeat(7, minmax(48px, 1fr)); gap: 7px; }
.production-grid button { min-height: 105px; position: relative; padding: 9px 7px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; overflow: hidden; }
.production-grid button.queued::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--progress, 0%); background: var(--cyan); }
.production-grid button > i { color: var(--cyan); font: normal 22px 'Barlow Condensed'; }
.production-grid button .asset-thumb { position: absolute; inset: 0 0 43px; width: auto; opacity: .74; background-repeat: no-repeat; filter: saturate(.95) contrast(1.05); transition: opacity .18s ease, transform .18s ease; }
.structure-thumb { background-image: linear-gradient(0deg, rgba(8,18,23,.96), transparent 48%), url('./assets/structure-atlas.webp'); background-size: 300% 200%; }
.structure-thumb.reactor { background-position: 50% 0; }
.structure-thumb.refinery { background-position: 100% 0; }
.structure-thumb.barracks { background-position: 0 100%; }
.structure-thumb.factory { background-position: 50% 100%; }
.structure-thumb.turret { background-position: 100% 100%; }
.unit-thumb { background-image: linear-gradient(0deg, rgba(8,18,23,.96), transparent 48%), url('./assets/unit-atlas.webp'); background-size: 200% 200%; }
.unit-thumb.ranger { background-position: 0 0; }
.unit-thumb.striker { background-position: 100% 0; }
.production-grid button:hover:not(:disabled) .asset-thumb { opacity: 1; transform: scale(1.04); }
.production-grid button b, .production-grid button span, .production-grid button small { position: relative; z-index: 2; text-shadow: 0 2px 4px #000; }
.production-grid button b { margin-top: auto; }
.production-grid button.tutorial-pulse { border-color: var(--amber); animation: tutorial-pulse 1.35s ease-in-out infinite; }
@keyframes tutorial-pulse { 50% { box-shadow: inset 0 0 18px rgba(240,179,90,.2), 0 0 12px rgba(240,179,90,.18); } }
.production-grid button b { font: 600 12px 'Barlow Condensed'; line-height: 1; }
.production-grid button span { color: var(--amber); font: 600 8px 'JetBrains Mono'; }
.production-grid button small { color: var(--muted); font: 500 7px 'JetBrains Mono'; }
.radar-panel { display: flex; flex-direction: column; }
#minimap { width: 100%; min-height: 92px; height: auto; aspect-ratio: 11 / 7; margin-top: 8px; flex: 0 1 auto; border: 1px solid rgba(76,224,210,.28); background: #071113; cursor: pointer; }
#strike-button { margin-top: 8px; min-height: 35px; padding: 5px 10px; border: 1px solid rgba(240,179,90,.35); background: rgba(240,179,90,.09); display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
#strike-button b { color: #ffd18c; font: 600 10px 'Barlow Condensed'; letter-spacing: .7px; }
#strike-button span { color: var(--muted); font: 600 7px 'JetBrains Mono'; }
#strike-button.ready { border-color: var(--amber); box-shadow: 0 0 20px rgba(240,179,90,.16); }
#strike-button.ready span { color: var(--amber); }

.modal { display: none; position: fixed; z-index: 50; inset: 0; padding: 25px; place-items: center; background: rgba(2,7,9,.86); backdrop-filter: blur(8px); }
.modal.open { display: grid; }
.modal-card { width: min(700px, 100%); position: relative; padding: 38px; border: 1px solid rgba(76,224,210,.3); background: linear-gradient(145deg, #102128, #081216); box-shadow: 0 30px 100px rgba(0,0,0,.65), inset 0 0 60px rgba(76,224,210,.035); }
#intro-modal { overflow: hidden; background: linear-gradient(90deg, rgba(2,7,9,.96), rgba(2,7,9,.78)), url('./assets/battlefield-terrain.webp') center/cover; }
#intro-modal::before { content: ''; position: absolute; inset: 0 0 0 48%; opacity: .32; background: url('./assets/unit-atlas.webp') 100% 0/200% 200% no-repeat; filter: drop-shadow(0 30px 45px #000); transform: scale(1.14); transform-origin: right center; }
#intro-modal .modal-card { background: linear-gradient(130deg, rgba(16,33,40,.98), rgba(8,18,22,.93)); }
.modal-card::before, .modal-card::after { content: ''; position: absolute; width: 32px; height: 32px; border-color: var(--cyan); }
.modal-card::before { left: -1px; top: -1px; border-left: 2px solid; border-top: 2px solid; }
.modal-card::after { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }
.eyebrow { color: var(--cyan); }
.modal h1, .modal h2 { margin: 10px 0 10px; max-width: 590px; font: 700 48px/1 'Barlow Condensed'; letter-spacing: -.5px; }
.modal h2 { font-size: 38px; }
#intro-modal .modal-card > p { margin: 0; color: #b6c6c9; font-size: 13px; line-height: 1.65; }
.briefing-grid { margin: 26px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.briefing-grid > div { min-height: 110px; padding: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.025); display: flex; gap: 10px; }
.briefing-grid b { color: var(--cyan); font: 600 10px 'JetBrains Mono'; }
#intro-modal .briefing-grid span { color: #a9bbc0; font-size: 10px; line-height: 1.45; }
.briefing-grid strong { display: block; margin-bottom: 4px; color: var(--text); font: 600 15px 'Barlow Condensed'; }
.difficulty-row { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; }
#intro-modal .difficulty-row > span { margin-right: auto; color: #a9bbc0; font: 600 10px 'JetBrains Mono'; letter-spacing: 1px; }
.difficulty-row button { padding: 7px 11px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 10px; }
.difficulty-row button.active { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-soft); }
#intro-modal .difficulty-description { margin: -9px 0 15px !important; color: #a9bbc0 !important; font: 600 10px/1.45 var(--mono) !important; text-align: left; }
.launch-button { width: 100%; min-height: 48px; border: 1px solid var(--cyan); background: var(--cyan); color: #041010; font: 700 13px 'JetBrains Mono'; cursor: pointer; }
.launch-button span { margin-left: 10px; }
.secondary-button { width: 100%; min-height: 44px; margin-top: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--text); font: 700 10px var(--mono); letter-spacing: .7px; cursor: pointer; }
.secondary-button:hover { border-color: var(--cyan); color: var(--cyan); }
#intro-modal .modal-card > small { display: block; margin-top: 13px; color: #a9bbc0; font-size: 10px; text-align: center; }
.modal-close { position: absolute; z-index: 3; right: 15px; top: 15px; width: 32px; height: 32px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 20px; }
.manual-grid { margin: 24px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.manual-grid > div { padding: 13px; border: 1px solid var(--line); }
kbd { color: var(--cyan); font: 600 10px 'JetBrains Mono'; }
.manual-grid p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.mobile-help { padding: 12px; border-left: 2px solid var(--amber); background: rgba(240,179,90,.06); }
.result-card { text-align: center; }
.result-card h2 { margin-inline: auto; }
.result-grade { display: grid; gap: 4px; justify-items: center; margin: 20px auto 0; }
.result-grade strong { color: var(--amber); font: 800 13px/1 var(--mono); letter-spacing: 2px; }
.result-grade span { color: var(--amber); font-size: 30px; letter-spacing: 5px; text-shadow: 0 0 16px rgba(243,185,97,.3); }
#result-modal[data-outcome="defeat"] .result-grade strong,
#result-modal[data-outcome="defeat"] .result-grade span { color: #ef817a; text-shadow: 0 0 16px rgba(239,102,95,.25); }
.result-grade small,
.result-next-target { color: var(--muted); font: 700 8px/1.35 var(--mono); letter-spacing: .8px; }
.result-next-target { margin: 10px auto 0; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 28px 0; border: 1px solid var(--line); }
.result-stats div { padding: 18px; border-right: 1px solid var(--line); }
.result-stats div:last-child { border-right: 0; }
.result-stats b { display: block; font: 600 23px 'JetBrains Mono'; color: var(--cyan); }
.result-stats span { color: var(--muted); font: 600 8px 'JetBrains Mono'; letter-spacing: 1px; }
.difficulty-row button { display: inline-grid; gap: 2px; justify-items: center; }
.difficulty-row button small { color: var(--muted); font: 700 6px/1 var(--mono); letter-spacing: .45px; }
.difficulty-row button.active small { color: #9eddd8; }

@media (max-width: 1050px) {
  #game-shell { grid-template-rows: 58px minmax(320px, 1fr) 238px; }
  .brand { width: auto; }
  .brand span { display: none; }
  .economy > div { min-width: 88px; padding-inline: 12px; }
  .economy > div:last-child { display: none; }
  .command-deck { grid-template-columns: minmax(245px, 1fr) minmax(0, 2fr); grid-template-rows: 1fr; }
  .selection-panel { display: none; }
  .radar-panel { display: none !important; }
  .production-grid { grid-template-columns: repeat(7, 1fr); }
}

@media (max-width: 680px) {
  html, body { overflow: auto; }
  #game-shell { min-height: 100dvh; grid-template-rows: 56px 56dvh auto; }
  .topbar { padding: 0 10px; }
  .brand i { width: 21px; height: 21px; }
  .brand b { font-size: 15px; letter-spacing: 2px; }
  .economy { justify-content: flex-end; }
  .economy > div { min-width: 66px; padding: 8px; }
  .economy > div:nth-child(3) { display: none; }
  .economy span { font-size: 7px; }
  .economy b { font-size: 11px; }
  .icon-button { width: 29px; height: 29px; }
  .mission-card { left: 9px; top: 9px; width: calc(100% - 70px); padding: 9px 10px; }
  .mission-card strong { font-size: 13px; }
  .mission-card p { display: none; }
  .status-feed { left: 9px; bottom: 9px; }
  .status-feed p { font-size: 8px; }
  .wave-card { right: 8px; top: auto; bottom: 8px; width: 126px; padding: 7px 8px; }
  .wave-card span { display: none; }
  .wave-card strong { margin: 3px 0 5px; font-size: 14px; }
  .command-deck { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .command-deck > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 11px; }
  .orders-panel { order: 2; }
  .production-panel { order: 1; }
  .order-grid { grid-template-columns: repeat(4, 1fr); }
  .order-grid button { min-height: 49px; justify-content: center; padding: 5px; }
  .order-grid button span { font-size: 11px; }
  .order-grid small { display: none; }
  .production-grid { overflow-x: auto; grid-template-columns: repeat(7, 84px); padding-bottom: 4px; }
  .production-grid button { min-height: 88px; }
  .modal { padding: 12px; }
  .modal-card { max-height: 94dvh; overflow-y: auto; padding: 26px 20px; }
  .modal h1 { font-size: 36px; }
  .briefing-grid { grid-template-columns: 1fr; }
  .briefing-grid > div { min-height: 0; }
  .difficulty-row { flex-wrap: wrap; }
  .difficulty-row > span { width: 100%; }
  .manual-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Command-interface refinement layer */
:root {
  --bg: #050b0e;
  --panel: #09151a;
  --panel-2: #0d1c22;
  --line: rgba(148, 190, 197, .16);
  --line-bright: rgba(76, 224, 210, .42);
  --muted: #799097;
  --text: #e4edef;
  --cyan: #55eadb;
  --amber: #f3b961;
  --red: #f06b64;
  --display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

body {
  background:
    radial-gradient(circle at 50% -20%, rgba(44, 135, 131, .13), transparent 36rem),
    var(--bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { -webkit-tap-highlight-color: transparent; }
button:active:not(:disabled) { transform: translateY(1px); }

#game-shell {
  isolation: isolate;
  background: var(--bg);
}

.topbar {
  gap: 24px;
  padding-inline: clamp(14px, 1.7vw, 28px);
  background:
    linear-gradient(90deg, rgba(76,224,210,.045), transparent 22%, transparent 78%, rgba(76,224,210,.035)),
    rgba(5, 12, 15, .97);
  box-shadow: 0 1px 0 rgba(255,255,255,.025), 0 12px 40px rgba(0,0,0,.42);
}

.topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  opacity: .6;
  background: linear-gradient(90deg, transparent 2%, var(--cyan) 17%, transparent 38%, transparent 62%, var(--cyan) 83%, transparent 98%);
}

.brand { width: 230px; gap: 14px; }
.brand i {
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1px solid var(--cyan);
  background: linear-gradient(135deg, transparent 48%, rgba(76,224,210,.2) 49% 51%, transparent 52%);
  box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px rgba(76,224,210,.42), 0 0 16px rgba(76,224,210,.16);
}
.brand i::after {
  content: "";
  position: absolute;
  inset: 7px;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}
.brand b { font-family: var(--display); font-size: 18px; font-stretch: condensed; line-height: 1; }
.brand span { margin-top: 5px; font-family: var(--mono); font-size: 8px; }

.operation-status {
  display: grid;
  grid-template-columns: 8px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 7px;
  padding-left: 17px;
  border-left: 1px solid var(--line);
}
.operation-status i {
  grid-row: 1 / 3;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: link-pulse 2.2s ease-in-out infinite;
}
.operation-status span,
.operation-status b { font-family: var(--mono); font-size: 7px; letter-spacing: .9px; line-height: 1.2; }
.operation-status span { color: var(--muted); }
.operation-status b { color: var(--cyan); font-weight: 600; }
@keyframes link-pulse { 50% { opacity: .45; box-shadow: 0 0 4px var(--cyan); } }

.economy { gap: 2px; }
.economy > div {
  min-width: 112px;
  padding: 12px 20px;
  position: relative;
  border-left-color: rgba(255,255,255,.045);
}
.economy > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  width: 1px;
  height: 60%;
  background: linear-gradient(transparent, rgba(76,224,210,.3), transparent);
}
.economy span { font-family: var(--mono); font-size: 7px; letter-spacing: 1.6px; }
.economy b { font-family: var(--mono); font-size: 15px; letter-spacing: -.5px; }
.economy div:first-child b { text-shadow: 0 0 15px rgba(76,224,210,.25); }

.top-actions { margin-left: auto; }
.icon-button {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 2px;
  border-color: rgba(148,190,197,.18);
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  font-family: var(--mono);
  transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.icon-button:hover { border-color: rgba(76,224,210,.62); background: rgba(76,224,210,.08); }
.icon-button.active::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}

.battlefield::before,
.battlefield::after {
  content: "";
  z-index: 2;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.battlefield::before {
  background:
    linear-gradient(90deg, rgba(2,8,10,.42), transparent 7%, transparent 93%, rgba(2,8,10,.42)),
    linear-gradient(0deg, rgba(2,8,10,.22), transparent 13%, transparent 88%, rgba(2,8,10,.2));
}
.battlefield::after {
  inset: 10px;
  opacity: .22;
  background:
    linear-gradient(var(--cyan), var(--cyan)) left top / 24px 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left top / 1px 24px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right top / 24px 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right top / 1px 24px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left bottom / 24px 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left bottom / 1px 24px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right bottom / 24px 1px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right bottom / 1px 24px no-repeat;
}
.scanlines { z-index: 3; opacity: .08; }
.mission-card, .wave-card, .status-feed, .placement-tip, .selection-box { z-index: 4; }

.mission-card {
  width: min(330px, calc(100% - 36px));
  padding: 14px 16px 13px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  border-color: rgba(76,224,210,.3);
  background: linear-gradient(110deg, rgba(5,14,17,.94), rgba(7,19,22,.83));
  box-shadow: 0 14px 38px rgba(0,0,0,.32), inset 24px 0 34px rgba(76,224,210,.025);
}
.mission-card > span { display: flex; justify-content: space-between; font-family: var(--mono); }
.mission-card > span i,
.panel-label i { color: rgba(76,224,210,.60); font-style: normal; }
.mission-card strong { margin-top: 8px; font-family: var(--display); font-size: 17px; text-transform: uppercase; letter-spacing: .8px; }
.mission-card p { max-width: 275px; font-size: 10px; }
.objective-progress { height: 3px; margin-top: 12px; background: rgba(255,255,255,.055); }

.wave-card {
  width: 202px;
  padding: 13px 14px 11px;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
  background: linear-gradient(250deg, rgba(20,9,11,.92), rgba(5,13,16,.9));
}
.wave-card strong { font-size: 23px; letter-spacing: -1.5px; }
.wave-track { height: 3px; }

.status-feed p {
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  border-top: 1px solid rgba(76,224,210,.1);
  background: rgba(4,12,15,.9);
  box-shadow: 0 7px 18px rgba(0,0,0,.22);
}

.command-deck {
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(110deg, #0c1a20, #071116 58%, #0a181d);
  box-shadow: 0 -1px 0 rgba(76,224,210,.16), 0 -18px 48px rgba(0,0,0,.42);
}
.command-deck::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan) 22%, transparent 36%, transparent 67%, rgba(76,224,210,.65) 82%, transparent);
  opacity: .55;
}
.command-deck > div { position: relative; padding: 15px 18px; border-right-color: rgba(145,182,190,.13); }
.command-deck > div::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 14px;
  width: 1px;
  height: 30px;
  background: var(--cyan);
  opacity: .25;
}
.command-deck > div:last-child::after { display: none; }
.panel-label { font-family: var(--mono); font-size: 8px; letter-spacing: 1.6px; }
.panel-label i { margin-left: 8px; font-family: var(--mono); }

.selection-content { height: 127px; }
.unit-emblem {
  position: relative;
  width: 62px;
  height: 62px;
  background: radial-gradient(circle, rgba(76,224,210,.2), rgba(76,224,210,.045));
  text-shadow: 0 0 12px rgba(76,224,210,.6);
  box-shadow: inset 0 0 22px rgba(76,224,210,.08), 0 0 25px rgba(0,0,0,.25);
}
.selection-content b { font-family: var(--display); text-transform: uppercase; letter-spacing: .9px; }
.health-line { height: 4px; padding: 1px; border: 1px solid rgba(76,224,210,.16); background: rgba(0,0,0,.38); }
.health-line i { box-shadow: 0 0 7px rgba(76,224,210,.45); }

.order-grid { gap: 8px; }
.order-grid button,
.production-grid button {
  border-color: rgba(145,182,190,.16);
  background: linear-gradient(145deg, rgba(18,39,46,.9), rgba(8,19,24,.9));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.order-grid button {
  position: relative;
  min-height: 59px;
  overflow: hidden;
}
.order-grid button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--cyan);
  transition: width .2s ease;
}
.order-grid button:hover::after,
.order-grid button.active::after { width: 100%; }
.order-grid button:hover:not(:disabled),
.order-grid button.active,
.production-grid button:hover:not(:disabled) {
  border-color: rgba(76,224,210,.62);
  background: linear-gradient(145deg, rgba(36,89,87,.3), rgba(9,25,29,.92));
  box-shadow: inset 0 0 18px rgba(76,224,210,.04), 0 0 15px rgba(76,224,210,.05);
}
.order-grid i { width: 22px; color: var(--cyan); text-align: center; text-shadow: 0 0 10px rgba(76,224,210,.4); }
.order-grid span { font-family: var(--display); text-transform: uppercase; letter-spacing: .5px; }
.order-grid small { font-family: var(--mono); text-transform: none; letter-spacing: 0; }

.production-head > span:last-child {
  padding: 3px 6px;
  border: 1px solid rgba(76,224,210,.16);
  background: rgba(76,224,210,.045);
  font-family: var(--mono);
  font-size: 7px;
}
.production-grid { gap: 8px; }
.production-grid button {
  min-height: 108px;
  padding: 9px 8px 8px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.production-grid button::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 17px;
  height: 1px;
  background: var(--cyan);
  opacity: .5;
}
.production-grid button:disabled { filter: saturate(.35); }
.production-grid button.queued { border-color: rgba(76,224,210,.55); }
.production-grid button.queued::after { height: 3px; box-shadow: 0 0 10px var(--cyan); }
.production-grid button .asset-thumb { bottom: 42px; opacity: .76; }
.production-grid button b { font-family: var(--display); font-size: 11px; text-transform: uppercase; letter-spacing: .25px; }
.production-grid button span,
.production-grid button small { font-family: var(--mono); }

#minimap {
  position: relative;
  border-color: rgba(76,224,210,.35);
  outline: 1px solid rgba(0,0,0,.5);
  outline-offset: -4px;
  box-shadow: inset 0 0 22px rgba(0,0,0,.55), 0 0 16px rgba(76,224,210,.045);
}
#strike-button {
  position: relative;
  overflow: hidden;
  border-color: rgba(240,179,90,.38);
  background: linear-gradient(90deg, rgba(240,179,90,.11), rgba(240,179,90,.035));
}
#strike-button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--amber);
}
#strike-button:hover:not(:disabled) { border-color: var(--amber); background: rgba(240,179,90,.15); }

.modal {
  background:
    radial-gradient(circle at 50% 35%, rgba(35,94,93,.16), transparent 28rem),
    rgba(2,7,9,.9);
}
.modal-card {
  border-color: rgba(76,224,210,.34);
  background:
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(145deg, rgba(15,33,40,.98), rgba(6,15,19,.985));
  box-shadow: 0 38px 120px rgba(0,0,0,.72), inset 0 0 80px rgba(76,224,210,.025);
}
.briefing-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
#intro-modal .briefing-meta > span:last-child { color: #a9bbc0; font: 600 10px var(--mono); letter-spacing: 1px; }
#intro-modal .briefing-meta .eyebrow { font-size: 10px; }
.eyebrow { font-family: var(--mono); }
.modal h1, .modal h2 { font-family: var(--display); text-transform: uppercase; letter-spacing: -.7px; }
.briefing-grid > div {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
}
.briefing-grid > div::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 1px;
  background: var(--cyan);
}
.briefing-grid b,
.difficulty-row > span { font-family: var(--mono); }
.briefing-grid strong { font-family: var(--display); text-transform: uppercase; letter-spacing: .7px; }
.difficulty-row button {
  min-width: 84px;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.launch-button {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #3bc6bb, var(--cyan));
  font-family: var(--mono);
  letter-spacing: 1px;
  transition: filter .18s ease, box-shadow .18s ease;
}
.launch-button:hover { filter: brightness(1.08); box-shadow: 0 0 28px rgba(76,224,210,.2); }
.launch-button span { font-size: 18px; vertical-align: -1px; }

@media (max-width: 1180px) {
  .operation-status { display: none; }
  .brand { width: 190px; }
  .economy > div { min-width: 100px; padding-inline: 14px; }
  .command-deck { grid-template-columns: minmax(190px, .9fr) minmax(220px, 1fr) minmax(350px, 1.65fr) minmax(200px, .95fr); }
}

@media (max-width: 1050px) {
  .topbar { gap: 12px; }
  .brand { width: auto; }
  .economy { margin-left: auto; }
  .economy > div { min-width: 82px; }
  .command-deck { grid-template-columns: minmax(245px, 1fr) minmax(0, 2fr); }
}

@media (max-width: 680px) {
  body { background: #050c0f; }
  #game-shell { grid-template-rows: 54px minmax(360px, 57dvh) auto; }
  .command-deck { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .topbar { gap: 7px; padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
  .topbar::after { opacity: .4; }
  .brand { flex: 0 0 auto; }
  .brand i { width: 19px; height: 19px; }
  .brand i::after { inset: 6px; }
  .brand b { font-size: 13px; letter-spacing: 1.6px; }
  .economy { min-width: 0; }
  .economy > div { min-width: 58px; padding: 7px 6px; }
  .economy > div:nth-child(2) { display: none; }
  .economy span { font-size: 8px; letter-spacing: .7px; }
  .economy b { font-size: 11px; }
  .top-actions { gap: 4px; }
  .icon-button { width: 28px; height: 28px; font-size: 12px; }
  .battlefield::after { inset: 6px; }
  .mission-card { left: 8px; top: 8px; width: calc(100% - 74px); padding: 9px 10px 8px; }
  .mission-card > span { font-size: 8px; }
  .mission-card strong { margin: 5px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .objective-progress { margin-top: 7px; }
  .wave-card { right: 7px; bottom: 7px; width: 120px; }
  .status-feed { left: 8px; bottom: 8px; width: calc(100% - 145px); }
  .status-feed p { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
  .command-deck { padding-bottom: env(safe-area-inset-bottom); }
  .command-deck > div { padding: 12px; }
  .panel-label { font-size: 9px; }
  .orders-panel {
    order: 1;
    z-index: 12;
    position: sticky !important;
    top: 0;
    border-bottom-color: rgba(76,224,210,.25) !important;
    background: linear-gradient(180deg, rgba(12,30,35,.99), rgba(7,18,22,.99));
    box-shadow: 0 8px 24px rgba(0,0,0,.34);
  }
  .production-panel { order: 2; background: linear-gradient(180deg, rgba(76,224,210,.025), transparent); }
  .production-grid {
    margin-inline: -12px;
    padding: 0 12px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(76,224,210,.35) transparent;
  }
  .production-grid button { min-height: 94px; scroll-snap-align: start; }
  .production-grid button b { font-size: 12px; }
  .production-grid button span { font-size: 9px; }
  .production-grid button small { font-size: 8px; }
  .production-grid::after { content: ""; width: 1px; }
  .order-grid { gap: 6px; }
  .order-grid button { min-height: 58px; flex-direction: column; gap: 3px; }
  .order-grid i { line-height: 1; }
  .order-grid span { font-size: 12px; }
  .modal { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .modal-card { padding: 28px 20px 22px; }
  .briefing-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
  .modal h1 { margin-top: 13px; font-size: clamp(31px, 9vw, 40px); }
  .briefing-grid { margin-block: 19px; }
  .difficulty-row button { flex: 1; min-width: 0; padding-inline: 5px; }
}

@media (max-width: 390px) {
  .brand i { display: none; }
  .brand b { font-size: 12px; }
  .economy > div { min-width: 53px; }
  .top-actions #base-button { display: none; }
  .mission-card { width: calc(100% - 60px); }
}

/* V5 interface clarity and tactile pass */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:root {
  --muted: #8ba1a7;
  --line: rgba(160, 198, 204, .2);
}

button { touch-action: manipulation; }

.topbar {
  min-width: 0;
  border-bottom-color: rgba(96, 226, 215, .22);
}

.brand b,
.economy b,
.selection-content b,
.production-grid button b { color: #edf5f6; }

.economy > div {
  justify-content: center;
  min-width: 0;
}

.economy span { color: #849aa0; }
.economy b { font-variant-numeric: tabular-nums; }

.icon-button,
.order-grid button,
.production-grid button,
#strike-button,
.difficulty-row button,
.launch-button,
.modal-close {
  user-select: none;
}

.icon-button:focus-visible,
.order-grid button:focus-visible,
.production-grid button:focus-visible,
#strike-button:focus-visible,
.difficulty-row button:focus-visible,
.launch-button:focus-visible,
.modal-close:focus-visible {
  outline: 2px solid #b5fff8;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(76, 224, 210, .13);
}

.mission-card > span,
.panel-label,
.production-head > span:last-child,
.wave-card span { text-shadow: 0 1px 2px rgba(0,0,0,.8); }

.mission-card p,
.selection-content span,
.order-grid small,
.production-grid button small,
#strike-button span,
.manual-grid p { color: #91a6ac; }

.objective-progress,
.wave-track {
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.46);
}

.command-deck > div {
  min-height: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.012), transparent 45%);
}

.panel-label {
  display: inline-flex;
  align-items: center;
  min-height: 14px;
  color: #9bafb4;
}

.panel-label::before {
  content: "";
  width: 3px;
  height: 10px;
  margin-right: 8px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(76,224,210,.38);
}

.selection-content span { max-width: 26ch; }

.order-grid button {
  border-bottom-color: rgba(160,198,204,.26);
  background:
    linear-gradient(90deg, rgba(76,224,210,.035), transparent 48%),
    linear-gradient(145deg, rgba(20,43,50,.96), rgba(7,17,22,.96));
}

.order-grid button::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.025);
}

.order-grid button.active {
  color: #f5ffff;
  box-shadow: inset 3px 0 var(--cyan), inset 0 0 22px rgba(76,224,210,.08), 0 0 16px rgba(76,224,210,.07);
}

.order-grid button:disabled,
.production-grid button:disabled {
  opacity: .52;
}

.production-grid button {
  isolation: isolate;
  min-width: 0;
  border-bottom-color: rgba(160,198,204,.28);
  background: linear-gradient(160deg, rgba(20,43,50,.96), rgba(6,16,20,.98));
}

.production-grid button .asset-thumb {
  z-index: 0;
  bottom: 38px;
  opacity: .68;
  filter: saturate(.9) contrast(1.12) brightness(.88);
}

.production-grid button.queued::after {
  content: "";
  z-index: 4;
  top: auto;
  height: 3px;
  width: var(--progress, 0%);
  background: var(--cyan);
}

.production-grid button b,
.production-grid button span,
.production-grid button small { z-index: 2; }

.production-grid button b {
  margin-bottom: 2px;
  line-height: 1.1;
}

.production-grid button span {
  color: #ffd08c;
  font-variant-numeric: tabular-nums;
}

.production-grid button small { line-height: 1.2; }

.production-grid button:disabled .asset-thumb {
  opacity: .3;
  filter: grayscale(.65) saturate(.25) brightness(.65);
}

.production-grid button:disabled b,
.production-grid button:disabled span,
.production-grid button:disabled small { color: #75878b; }

#minimap { border-width: 2px; }

#strike-button {
  border-bottom-color: rgba(240,179,90,.55);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.modal-card {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(76,224,210,.35) rgba(0,0,0,.2);
}

.modal-card > p { color: #a9b9bd; }
.manual-grid > div { background: rgba(255,255,255,.018); }

.difficulty-row button {
  min-height: 38px;
  border-bottom-color: rgba(160,198,204,.3);
}

.difficulty-row button.active {
  box-shadow: inset 0 -2px var(--cyan), 0 0 16px rgba(76,224,210,.06);
}

@media (hover: hover) and (pointer: fine) {
  .order-grid button:hover:not(:disabled),
  .production-grid button:hover:not(:disabled),
  #strike-button:hover:not(:disabled),
  .difficulty-row button:hover:not(:disabled) { transform: translateY(-1px); }
}

@media (max-width: 1180px) and (min-width: 1001px) {
  .command-deck > div { padding-inline: 14px; }
  .production-grid { gap: 5px; }
  .production-grid button { padding-inline: 6px; }
  .production-grid button b { font-size: 10px; }
}

@media (max-height: 760px) and (min-width: 681px) {
  html, body { overflow: auto; }
  #game-shell { height: auto; min-height: 100dvh; }
  #game-shell { grid-template-rows: 60px minmax(260px, 1fr) 172px; }
  .topbar { padding-block: 0; }
  .command-deck > div { padding-block: 11px; }
  .selection-content { height: 112px; margin-top: 6px; }
  .order-grid,
  .production-grid { margin-top: 7px; }
  .order-grid button { min-height: 52px; }
  .production-grid button { min-height: 91px; }
  .production-grid button .asset-thumb { bottom: 37px; }
  #minimap { min-height: 76px; }
}

@media (max-width: 680px) {
  .topbar { overflow: hidden; }
  .economy { flex: 1 1 auto; }
  .economy > div { flex: 1 1 54px; }
  .command-deck > div { background: none; }
  .orders-panel {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .order-grid button { min-width: 0; }
  .order-grid button::before { inset: 3px; }
  .production-head { gap: 10px; }
  .production-head > span:last-child { white-space: nowrap; }
  .production-grid {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .production-grid button { min-height: 100px; }
  .production-grid button .asset-thumb { bottom: 41px; }
  .modal-close { width: 40px; height: 40px; right: 10px; top: 10px; }
  .launch-button { min-height: 52px; }
}

@media (max-width: 360px) {
  .top-actions { gap: 3px; }
  .icon-button { width: 27px; }
  .economy > div { min-width: 49px; padding-inline: 4px; }
  .order-grid { gap: 4px; }
  .order-grid button { padding-inline: 3px; }
  .order-grid i { width: auto; }
  .order-grid span { font-size: 11px; }
}

/* V14 compact command context */
.orders-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#compact-selection-summary {
  display: none;
  color: #a9c9ca;
  font: 700 8px/1 var(--mono);
  letter-spacing: .55px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.command-mode-row {
  display: flex;
  align-items: stretch;
  gap: 5px;
  margin-top: 6px;
}
.command-mode-row[hidden] { display: none; }
.command-mode-prompt {
  flex: 1;
  margin: 0;
  min-height: 20px;
  padding: 5px 8px;
  border-left: 2px solid var(--cyan);
  background: rgba(76,224,210,.08);
  color: #c8fffa;
  font: 700 8px/1.25 var(--mono);
  letter-spacing: .55px;
}
#cancel-command-mode {
  min-width: 62px;
  border: 1px solid rgba(243,185,97,.5);
  background: rgba(243,185,97,.08);
  color: #ffd799;
  font: 800 8px/1 var(--mono);
  letter-spacing: .5px;
  cursor: pointer;
}

@media (max-width: 1050px) {
  #compact-selection-summary { display: block; }
}

@media (any-pointer: coarse) {
  #fortify-button,
  .facility-command-actions button,
  .mobile-radar-head button,
  .context-tip-actions button,
  #cancel-command-mode { min-height: 44px; }
}

@media (max-width: 480px) {
  .result-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-stats div { border-bottom: 1px solid var(--line); }
  .result-stats div:nth-child(2) { border-right: 0; }
  .result-stats div:last-child { grid-column: 1 / -1; border-bottom: 0; }
}

/* V16 compact-device release fixes */
@media (max-width: 480px) {
  .brand,
  #base-button { display: none; }
  .economy { margin-left: 0; }
  .topbar { min-height: 52px; }
  .economy > div { min-width: 62px; padding-inline: 5px; }
  .icon-button { width: 44px; height: 44px; }
  .difficulty-row button { min-height: 44px; }
  .modal-close { width: 44px; height: 44px; }
  .tactical-status-item span { font-size: 8px; }
  .tactical-status-item strong { font-size: 10px; }
  .command-ack small { font-size: 9px; }
}

@media (any-pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  html, body { height: 100%; overflow: hidden; }
  #game-shell { height: 100dvh; min-height: 100dvh; grid-template-rows: 48px minmax(100px, 1fr) 154px; }
  .topbar { min-height: 48px; }
  .command-deck {
    grid-template-columns: minmax(250px, .9fr) minmax(330px, 1.4fr);
    grid-template-rows: 154px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .command-deck > div { padding: 8px 10px; }
  .orders-panel { position: static !important; order: 1; }
  .production-panel { order: 2; }
  .selection-panel,
  .radar-panel { display: none !important; }
  .orders-head { margin-bottom: 3px; }
  .order-grid,
  .production-grid { margin-top: 4px; }
  .order-grid button { min-height: 48px; }
  .production-grid button { min-height: 80px; }
  .production-grid button .asset-thumb { bottom: 32px; }
  .tactical-status-panel { top: auto; bottom: 6px; }
  .battlefield:has(.facility-command-card:not([hidden])) .mission-card,
  .battlefield:has(.facility-command-card:not([hidden])) .tactical-status-panel { display: none; }
  .facility-command-card { bottom: 7px; max-height: calc(100% - 14px); overflow: auto; }
}

@media (max-width: 480px) and (max-height: 700px) {
  #intro-modal .modal-card { padding-block: 18px 16px; }
  #intro-modal .briefing-meta { display: none; }
  #intro-modal .modal h1,
  #intro-modal h1 { margin-block: 4px 7px; font-size: 28px; }
  #intro-modal .briefing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-block: 10px; }
  #intro-modal .briefing-grid > div { min-height: 0; padding: 7px 5px; }
  #intro-modal .briefing-grid strong { font-size: 12px; }
  #intro-modal .briefing-grid span { font-size: 10px; }
  #intro-modal .difficulty-row { margin-bottom: 10px; }
  #intro-modal .difficulty-description { margin-bottom: 9px !important; }
  #intro-modal .modal-card > small { display: none; }
}

/* V6 operations telemetry and production management */
.economy-value-line {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.economy-value-line b { white-space: nowrap; }

.economy-trend,
.economy-state {
  padding: 2px 4px;
  border: 1px solid rgba(76,224,210,.2);
  background: rgba(76,224,210,.06);
  color: #8ff7ed;
  font: 600 7px/1 var(--mono);
  letter-spacing: .35px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.economy-trend[data-trend="negative"] {
  border-color: rgba(240,107,100,.35);
  background: rgba(240,107,100,.08);
  color: #ffaaa6;
}

.economy-state[data-state="low"] {
  border-color: rgba(243,185,97,.42);
  background: rgba(243,185,97,.09);
  color: #ffd08c;
}

.economy-state[data-state="brownout"] {
  border-color: rgba(240,107,100,.58);
  background: rgba(240,107,100,.13);
  color: #ffaaa6;
  box-shadow: 0 0 12px rgba(240,107,100,.12);
  animation: power-warning 1s ease-in-out infinite alternate;
}

@keyframes power-warning {
  to { opacity: .62; box-shadow: 0 0 18px rgba(240,107,100,.22); }
}

.pause-button {
  font-size: 12px;
  letter-spacing: -2px;
}

.pause-button[aria-pressed="true"] {
  border-color: var(--amber);
  background: rgba(243,185,97,.12);
  color: #ffd08c;
  box-shadow: inset 0 -2px var(--amber), 0 0 16px rgba(243,185,97,.1);
}

.pause-banner {
  z-index: 6;
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: min(330px, calc(100% - 32px));
  padding: 14px 22px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(243,185,97,.5);
  border-inline-width: 3px;
  background: rgba(5,12,15,.94);
  box-shadow: 0 18px 60px rgba(0,0,0,.55), inset 0 0 32px rgba(243,185,97,.04);
  text-align: center;
  pointer-events: none;
}

.pause-banner:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pause-banner span,
.pause-banner small {
  color: #a98b63;
  font: 600 7px/1.35 var(--mono);
  letter-spacing: 1.2px;
}

.pause-banner strong {
  color: #ffe1af;
  font: 700 18px/1.2 var(--display);
  letter-spacing: 1.4px;
}

#game-shell[data-game-state="paused"] #game-canvas { filter: saturate(.62) brightness(.7); }
#game-shell[data-game-state="paused"] .scanlines { opacity: .16; }

.production-ops {
  min-width: 0;
  height: 21px;
  margin-top: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-block: 1px solid rgba(145,182,190,.1);
  color: #8ba1a7;
  font: 600 7px/1 var(--mono);
  letter-spacing: .45px;
}

.production-readiness,
.production-queue-summary {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.production-readiness { color: #9be8e0; }

.production-readiness i {
  width: 4px;
  height: 4px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 7px var(--cyan);
}

.production-readiness b { font: inherit; }

.production-queue-summary {
  margin-right: auto;
  overflow: hidden;
  color: #85999f;
  text-overflow: ellipsis;
}

#production-cancel-button {
  flex: 0 0 auto;
  height: 17px;
  padding: 0 6px;
  border: 1px solid rgba(240,107,100,.34);
  background: rgba(240,107,100,.06);
  color: #ffaaa6;
  font: 600 7px/1 var(--mono);
  letter-spacing: .5px;
  cursor: pointer;
}

#production-cancel-button:disabled {
  border-color: rgba(145,182,190,.12);
  background: transparent;
  color: #5f7379;
  cursor: not-allowed;
}

.production-grid { margin-top: 7px; }

@media (max-width: 1180px) and (min-width: 1001px) {
  .economy-value-line { gap: 4px; }
  .economy-trend,
  .economy-state { padding-inline: 3px; font-size: 6px; }
  .production-ops { gap: 5px; }
}

@media (max-height: 760px) and (min-width: 681px) {
  .production-ops { height: 18px; margin-top: 4px; }
  .production-grid { margin-top: 4px; }
  .production-grid button { min-height: 86px; }
}

@media (max-width: 680px) {
  .economy > div.economy-power { display: flex; }
  .economy-value-line { gap: 3px; }
  .economy-trend,
  .economy-state { padding: 1px 2px; font-size: 6px; letter-spacing: 0; }
  .production-ops { height: 25px; margin-top: 6px; gap: 7px; font-size: 8px; }
  #production-cancel-button { height: 20px; font-size: 8px; }
  .production-grid { margin-top: 8px; }
  .pause-banner { padding: 13px 16px; }
}

@media (max-width: 390px) {
  .economy-trend,
  .economy-state { display: none; }
  .production-readiness b { display: none; }
  .production-readiness i { margin-right: 0; }
}

/* V7 contextual coaching and command-state clarity */
.selection-box {
  border: 1px solid #8ff7ed;
  outline: 1px solid rgba(3,13,16,.72);
  background:
    linear-gradient(rgba(76,224,210,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,224,210,.035) 1px, transparent 1px),
    rgba(76,224,210,.09);
  background-size: 12px 12px;
  box-shadow: inset 0 0 16px rgba(76,224,210,.08), 0 0 10px rgba(76,224,210,.16);
}

.placement-tip {
  border-width: 1px 1px 2px;
  box-shadow: 0 7px 20px rgba(0,0,0,.45), inset 0 0 16px rgba(76,224,210,.045);
  text-shadow: 0 1px 2px #000;
}

.wave-card.imminent strong { color: #ffc0bc; text-shadow: 0 0 12px rgba(240,107,100,.28); }

.context-tip {
  z-index: 7;
  position: absolute;
  left: 18px;
  top: 152px;
  width: min(340px, calc(100% - 36px));
  min-height: 78px;
  padding: 12px 12px 11px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  border: 1px solid rgba(76,224,210,.38);
  border-left: 3px solid var(--cyan);
  background:
    linear-gradient(105deg, rgba(76,224,210,.075), transparent 45%),
    rgba(4,12,15,.95);
  box-shadow: 0 16px 42px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.025);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  pointer-events: auto;
  animation: context-tip-in .2s ease-out;
}

.context-tip[hidden] { display: none; }

.context-tip::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 9px rgba(76,224,210,.5);
}

.context-tip-copy { min-width: 0; }

.context-tip-kicker {
  display: block;
  margin-bottom: 5px;
  color: #7fa19f;
  font: 600 7px/1 var(--mono);
  letter-spacing: 1.3px;
}

.context-tip strong {
  display: block;
  overflow: hidden;
  color: #ecf8f7;
  font: 700 14px/1.15 var(--display);
  letter-spacing: .65px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.context-tip p {
  margin: 4px 0 0;
  color: #9aafb4;
  font-size: 9px;
  line-height: 1.4;
}

.context-tip-actions {
  display: grid;
  grid-template-columns: auto 28px;
  gap: 6px;
  align-items: center;
}

.context-tip-actions button {
  min-height: 28px;
  border: 1px solid rgba(76,224,210,.38);
  background: rgba(76,224,210,.08);
  color: #a9fff7;
  font: 600 7px/1 var(--mono);
  letter-spacing: .65px;
  cursor: pointer;
}

#context-tip-action { padding: 0 9px; }
#context-tip-dismiss { padding: 0; color: #8ca2a7; font-size: 15px; }
.context-tip-actions button:hover { border-color: var(--cyan); background: rgba(76,224,210,.15); }

.context-tip[data-tone="warning"] {
  border-color: rgba(243,185,97,.52);
  border-left-color: var(--amber);
  background: linear-gradient(105deg, rgba(243,185,97,.1), transparent 45%), rgba(8,13,14,.96);
}
.context-tip[data-tone="warning"]::before { background: var(--amber); box-shadow: 0 0 9px rgba(243,185,97,.52); }
.context-tip[data-tone="warning"] .context-tip-kicker,
.context-tip[data-tone="warning"] .context-tip-actions button { color: #ffd89b; }
.context-tip[data-tone="warning"] .context-tip-actions button { border-color: rgba(243,185,97,.4); background: rgba(243,185,97,.08); }

.context-tip[data-tone="danger"] {
  border-color: rgba(240,107,100,.58);
  border-left-color: var(--red);
  background: linear-gradient(105deg, rgba(240,107,100,.11), transparent 45%), rgba(11,11,13,.96);
}
.context-tip[data-tone="danger"]::before { background: var(--red); box-shadow: 0 0 9px rgba(240,107,100,.55); }
.context-tip[data-tone="danger"] .context-tip-kicker,
.context-tip[data-tone="danger"] .context-tip-actions button { color: #ffb2ad; }
.context-tip[data-tone="danger"] .context-tip-actions button { border-color: rgba(240,107,100,.44); background: rgba(240,107,100,.09); }

@keyframes context-tip-in {
  from { opacity: 0; transform: translateY(-7px); }
}

.order-grid button[aria-pressed="true"],
.production-grid button[aria-pressed="true"] {
  border-color: var(--cyan);
  color: #f7ffff;
  background: linear-gradient(145deg, rgba(39,105,101,.37), rgba(8,25,29,.96));
  box-shadow: inset 3px 0 var(--cyan), inset 0 0 22px rgba(76,224,210,.1), 0 0 17px rgba(76,224,210,.09);
}

.order-grid button[aria-pressed="true"]::after { width: 100%; }

.production-ops[data-state="warning"] {
  border-color: rgba(243,185,97,.28);
  color: #ffd08c;
}

.production-ops[data-state="danger"] {
  border-color: rgba(240,107,100,.34);
  color: #ffaaa6;
}

.selection-panel[data-state="warning"],
.mission-card[data-state="warning"] { box-shadow: inset 3px 0 var(--amber), 0 14px 38px rgba(0,0,0,.32); }

.selection-panel[data-state="danger"],
.mission-card[data-state="danger"] { box-shadow: inset 3px 0 var(--red), 0 14px 38px rgba(0,0,0,.32); }

#production-cancel-button:not(:disabled):hover,
#production-cancel-button:not(:disabled):focus-visible {
  border-color: var(--red);
  background: rgba(240,107,100,.14);
  color: #ffd1ce;
}

@media (max-height: 760px) and (min-width: 681px) {
  .context-tip { top: 132px; width: 310px; min-height: 68px; padding-block: 9px; }
  .context-tip p { max-width: 31ch; }
}

@media (max-width: 680px) {
  .context-tip {
    left: 8px;
    top: 79px;
    width: min(330px, calc(100% - 16px));
    min-height: 68px;
    padding: 9px 9px 9px 11px;
    gap: 8px;
  }
  .context-tip strong { font-size: 12px; }
  .context-tip p { max-width: 37ch; font-size: 8px; }
  .context-tip-kicker { margin-bottom: 3px; }
  .context-tip-actions { grid-template-columns: auto 30px; }
  .context-tip-actions button { min-height: 32px; }
}

/* V9 responsive radar and selected-facility controls */
.radar-toggle-button { display: none; }

.mobile-radar-overlay,
.facility-command-card {
  z-index: 8;
  position: absolute;
  border: 1px solid rgba(76,224,210,.42);
  background:
    linear-gradient(120deg, rgba(76,224,210,.075), transparent 42%),
    rgba(4,12,15,.96);
  box-shadow: 0 18px 52px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mobile-radar-overlay[hidden],
.facility-command-card[hidden] { display: none; }

.mobile-radar-overlay {
  right: 18px;
  top: 18px;
  width: min(360px, calc(100% - 36px));
  padding: 12px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.mobile-radar-overlay::after,
.facility-command-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 62px;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(76,224,210,.52);
}

.mobile-radar-head,
.facility-command-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-radar-head > div,
.facility-command-head > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mobile-radar-head span,
.facility-command-head > div > span {
  color: #789296;
  font: 600 7px/1 var(--mono);
  letter-spacing: 1.25px;
}

.mobile-radar-head strong,
.facility-command-head strong {
  color: #effafa;
  font: 700 14px/1.1 var(--display);
  letter-spacing: .8px;
  text-transform: uppercase;
}

#radar-close-button {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(145,182,190,.24);
  background: rgba(255,255,255,.025);
  color: #9eb3b8;
  font-size: 19px;
  cursor: pointer;
}

#radar-close-button:hover,
#radar-close-button:focus-visible {
  border-color: var(--cyan);
  background: rgba(76,224,210,.1);
  color: #c6fffa;
}

#mobile-minimap {
  width: 100%;
  aspect-ratio: 11 / 7;
  height: auto;
  margin-top: 10px;
  display: block;
  border: 2px solid rgba(76,224,210,.38);
  outline: 1px solid rgba(0,0,0,.62);
  outline-offset: -5px;
  background: #071113;
  box-shadow: inset 0 0 28px rgba(0,0,0,.62), 0 0 18px rgba(76,224,210,.06);
  cursor: crosshair;
  touch-action: none;
}

.mobile-strike-button {
  width: 100%;
  min-height: 42px;
  margin-top: 9px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(240,179,90,.38);
  background: linear-gradient(145deg, rgba(72,49,21,.5), rgba(17,18,16,.96));
  color: #ffd18c;
  cursor: pointer;
}

.mobile-strike-button b { font: 700 11px/1 var(--display); letter-spacing: .65px; }
.mobile-strike-button span { color: #9da9a7; font: 600 8px/1 var(--mono); letter-spacing: .2px; }
.mobile-strike-button:hover,
.mobile-strike-button:focus-visible,
.mobile-strike-button.ready { border-color: var(--amber); background: rgba(240,179,90,.15); box-shadow: 0 0 18px rgba(240,179,90,.13); }
.mobile-strike-button.ready span { color: var(--amber); }

.mobile-radar-overlay p {
  margin: 8px 1px 0;
  color: #93a8ad;
  font: 500 8px/1.4 var(--mono);
  letter-spacing: .2px;
}

.facility-command-card {
  right: 18px;
  bottom: 16px;
  width: min(310px, calc(100% - 36px));
  padding: 11px 12px 12px;
  border-left-width: 3px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.facility-command-status {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid rgba(76,224,210,.26);
  background: rgba(76,224,210,.07);
  color: #9af9ef;
  font: 600 7px/1 var(--mono);
  letter-spacing: .55px;
}

.facility-command-actions {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.facility-command-actions button {
  min-width: 0;
  min-height: 45px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(145,182,190,.22);
  background: linear-gradient(145deg, rgba(18,39,46,.94), rgba(7,17,21,.98));
  color: #e9f4f5;
  text-align: left;
  cursor: pointer;
}

.facility-command-actions button i {
  width: 18px;
  flex: 0 0 auto;
  color: var(--cyan);
  font: normal 17px/1 var(--display);
  text-align: center;
}

.facility-command-actions button span {
  min-width: 0;
  font: 700 10px/1 var(--display);
  letter-spacing: .45px;
}

.facility-command-actions button small {
  margin-top: 4px;
  display: block;
  overflow: hidden;
  color: #84999f;
  font: 600 7px/1 var(--mono);
  letter-spacing: .2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facility-command-actions button:hover:not(:disabled),
.facility-command-actions button:focus-visible,
.facility-command-actions button[aria-pressed="true"] {
  border-color: var(--cyan);
  background: rgba(76,224,210,.12);
  box-shadow: inset 2px 0 var(--cyan), 0 0 15px rgba(76,224,210,.08);
}

.facility-command-actions button:disabled {
  opacity: .48;
  filter: saturate(.45);
  cursor: not-allowed;
}

#cancel-construction-button:not(:disabled) {
  border-color: rgba(240,107,100,.36);
}

#cancel-construction-button:not(:disabled) i,
#cancel-construction-button:not(:disabled) small { color: #ffaaa6; }

#cancel-construction-button:hover:not(:disabled),
#cancel-construction-button:focus-visible:not(:disabled) {
  border-color: var(--red);
  background: rgba(240,107,100,.13);
  box-shadow: inset 2px 0 var(--red), 0 0 15px rgba(240,107,100,.08);
}

#repair-building-button:not(:disabled) { border-color: rgba(76,224,210,.36); }
#repair-building-button[aria-pressed="true"] { border-color: var(--cyan); background: rgba(76,224,210,.14); box-shadow: inset 2px 0 var(--cyan), 0 0 15px rgba(76,224,210,.1); }
#repair-building-button[aria-pressed="true"] small { color: #9af9ef; }

.facility-command-card[data-state="construction"] {
  border-color: rgba(243,185,97,.52);
  border-left-color: var(--amber);
  background: linear-gradient(120deg, rgba(243,185,97,.09), transparent 42%), rgba(7,12,14,.96);
}

.facility-command-card[data-state="construction"]::after { background: var(--amber); box-shadow: 0 0 10px rgba(243,185,97,.5); }
.facility-command-card[data-state="construction"] .facility-command-status { border-color: rgba(243,185,97,.38); background: rgba(243,185,97,.08); color: #ffd594; }

@media (max-width: 1050px) {
  .radar-toggle-button { display: inline-block; }
  .radar-toggle-button[aria-expanded="true"] {
    border-color: var(--cyan);
    background: var(--cyan-soft);
    color: #cafffa;
    box-shadow: inset 0 -2px var(--cyan), 0 0 14px rgba(76,224,210,.1);
  }
}

@media (max-width: 680px) {
  .mobile-radar-overlay {
    right: 8px;
    top: 8px;
    width: min(350px, calc(100% - 16px));
    padding: 10px;
  }
  #mobile-minimap { margin-top: 8px; }
  .mobile-radar-overlay p { font-size: 7px; }
  .facility-command-card {
    left: 8px;
    right: auto;
    bottom: 49px;
    width: min(292px, calc(100% - 24px));
    padding: 9px 9px 10px;
  }
  .facility-command-actions button { min-height: 48px; padding-inline: 7px; }
}

@media (max-width: 390px) {
  .facility-command-card { width: calc(100% - 16px); }
  .facility-command-actions { gap: 5px; }
  .facility-command-actions button { gap: 5px; padding-inline: 5px; }
}

/* V10 tactical state, acknowledgement, and visibility feedback */
.tactical-status-panel {
  z-index: 5;
  position: absolute;
  left: 50%;
  top: 18px;
  width: min(430px, calc(100% - 580px));
  min-width: 330px;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  border: 1px solid rgba(145,182,190,.2);
  background: rgba(4,12,15,.88);
  box-shadow: 0 10px 32px rgba(0,0,0,.32), inset 0 -1px rgba(76,224,210,.08);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transform: translateX(-50%);
  pointer-events: none;
}

.tactical-status-item {
  min-width: 0;
  padding: 8px 10px 7px;
  border-right: 1px solid rgba(145,182,190,.14);
}

.tactical-status-item:last-child { border-right: 0; }
.tactical-status-item span {
  display: block;
  margin-bottom: 4px;
  color: #718a90;
  font: 600 6px/1 var(--mono);
  letter-spacing: .85px;
  white-space: nowrap;
}

.tactical-status-item strong {
  display: block;
  overflow: hidden;
  color: #dff3f2;
  font: 700 9px/1 var(--mono);
  letter-spacing: .2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tactical-status-item[data-state="active"] strong,
.tactical-status-item[data-state="healthy"] strong,
.tactical-status-item[data-state="clear"] strong { color: var(--cyan); }
.tactical-status-item[data-state="warning"] strong { color: var(--amber); }
.tactical-status-item[data-state="danger"] strong { color: #ffaaa6; }
.tactical-status-item[data-state="warning"] { box-shadow: inset 0 -2px var(--amber); }
.tactical-status-item[data-state="danger"] { background: rgba(240,107,100,.07); box-shadow: inset 0 -2px var(--red); }

.command-ack {
  z-index: 9;
  position: absolute;
  left: 50%;
  bottom: 17px;
  min-width: 220px;
  max-width: min(390px, calc(100% - 36px));
  min-height: 42px;
  padding: 7px 12px 7px 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(76,224,210,.4);
  border-bottom-width: 2px;
  background: rgba(4,12,15,.94);
  box-shadow: 0 12px 30px rgba(0,0,0,.46), 0 0 18px rgba(76,224,210,.08);
  transform: translateX(-50%);
  pointer-events: none;
  animation: command-ack-in .16s ease-out;
}

.command-ack[hidden] { display: none; }
.command-ack > i {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(76,224,210,.4);
  background: rgba(76,224,210,.1);
  color: var(--cyan);
  font: normal 15px/1 var(--display);
}

.command-ack > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.command-ack strong {
  overflow: hidden;
  color: #e9f9f7;
  font: 700 10px/1 var(--display);
  letter-spacing: .7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.command-ack small { color: #8da4a9; font: 600 7px/1 var(--mono); }
.command-ack[data-tone="warning"] { border-color: rgba(243,185,97,.55); }
.command-ack[data-tone="warning"] > i { border-color: rgba(243,185,97,.45); background: rgba(243,185,97,.1); color: var(--amber); }
.command-ack[data-tone="danger"] { border-color: rgba(240,107,100,.62); }
.command-ack[data-tone="danger"] > i { border-color: rgba(240,107,100,.5); background: rgba(240,107,100,.11); color: #ffaaa6; }
@keyframes command-ack-in { from { opacity: 0; transform: translate(-50%, 8px); } }

.radar-legend {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  color: #81969b;
  font: 600 6px/1 var(--mono);
  letter-spacing: .25px;
}

.radar-legend span { min-width: 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.radar-legend i { width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.16); background: #050b0d; }
.radar-legend [data-visibility="visible"] i { border-color: rgba(85,234,219,.7); background: rgba(85,234,219,.72); box-shadow: 0 0 5px rgba(85,234,219,.35); }
.radar-legend [data-visibility="explored"] i { border-color: rgba(112,143,148,.65); background: #31484d; }
.radar-legend [data-visibility="unknown"] i { border-color: #19272b; background: #071014; }
.radar-legend [data-visibility="hostile"] i { border-color: rgba(240,107,100,.75); background: var(--red); box-shadow: 0 0 5px rgba(240,107,100,.35); }

.order-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.order-grid button { min-height: 53px; padding-inline: 7px; gap: 5px; }
.order-grid i { width: 17px; }

@media (max-width: 1180px) and (min-width: 1001px) {
  .tactical-status-panel { width: 340px; min-width: 0; }
  .tactical-status-item { padding-inline: 7px; }
  .tactical-status-item span { letter-spacing: .45px; }
  .order-grid small { display: none; }
}

@media (max-width: 1050px) {
  .tactical-status-panel {
    top: auto;
    bottom: 8px;
    width: min(360px, calc(100% - 300px));
    min-width: 290px;
  }
  .command-ack { bottom: 53px; }
}

@media (max-height: 520px) and (min-width: 681px) and (max-width: 1000px) {
  .tactical-status-panel { top: 8px; bottom: auto; }
}

@media (max-width: 680px) {
  .tactical-status-panel {
    left: 8px;
    right: 140px;
    bottom: 8px;
    width: auto;
    min-width: 0;
    grid-template-columns: 1fr 1fr;
    transform: none;
  }
  .tactical-status-item { padding: 6px 7px 5px; }
  .tactical-status-item.command-state { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid rgba(145,182,190,.14); }
  .tactical-status-item span { margin-bottom: 3px; font-size: 8px; letter-spacing: .35px; }
  .tactical-status-item strong { font-size: 10px; }
  .status-feed { bottom: 74px; width: calc(100% - 16px); }
  .command-ack { bottom: 148px; min-width: 200px; max-width: calc(100% - 16px); }
  .order-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .order-grid button { min-height: 57px; padding-inline: 3px; }
  .order-grid i { width: auto; }
  .order-grid span { font-size: 10px; }
  .radar-legend { font-size: 6px; }
}

@media (max-width: 390px) {
  .tactical-status-panel { right: 132px; }
  .radar-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 5px; font-size: 7px; }
  .order-grid span { font-size: 9px; letter-spacing: .2px; }
}

/* V12 actionable threat intelligence and facility lifecycle */
#fortify-button {
  width: 100%;
  min-height: 27px;
  margin: 0 0 7px;
  border: 1px solid rgba(99,205,255,.42);
  background: rgba(99,205,255,.09);
  color: #bfeeff;
  font: 700 8px/1 var(--mono);
  letter-spacing: .55px;
  cursor: pointer;
}
#fortify-button:hover:not(:disabled),
#fortify-button:focus-visible { border-color: #63cdff; background: rgba(99,205,255,.16); }
#fortify-button:disabled { opacity: .4; cursor: not-allowed; }

.facility-command-card { width: min(430px, calc(100% - 36px)); }
.facility-command-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#salvage-building-button:not(:disabled) { border-color: rgba(243,185,97,.4); }
#salvage-building-button:not(:disabled) i,
#salvage-building-button:not(:disabled) small { color: #ffd594; }
#salvage-building-button:hover:not(:disabled),
#salvage-building-button:focus-visible:not(:disabled) {
  border-color: var(--amber);
  background: rgba(243,185,97,.12);
  box-shadow: inset 2px 0 var(--amber), 0 0 15px rgba(243,185,97,.08);
}

@media (max-width: 680px) {
  .icon-button { width: 38px; height: 38px; }
  .facility-command-card {
    left: 8px;
    right: 8px;
    bottom: 138px;
    width: auto;
  }
  .facility-command-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battlefield:has(.facility-command-card:not([hidden])) .status-feed { display: none; }
  .battlefield:has(.facility-command-card:not([hidden])) .tactical-status-panel { display: none; }
  #fortify-button { min-height: 25px; margin-bottom: 5px; font-size: 7px; }
  .wave-card > small { white-space: normal; max-height: 17px; }
}

@media (max-height: 520px) and (min-width: 681px) and (max-width: 1000px) {
  html, body { height: 100%; overflow: hidden; }
  #game-shell { height: 100dvh; min-height: 100dvh; grid-template-rows: 48px minmax(188px, 1fr) 154px; }
  .command-deck { overflow-x: auto; overflow-y: hidden; }
  .command-deck > div { padding-block: 8px; }
  .order-grid, .production-grid { margin-top: 5px; }
  .order-grid button { min-height: 43px; }
  .production-grid button { min-height: 82px; }
  .production-grid button .asset-thumb { bottom: 34px; }
  .mobile-radar-overlay {
    position: fixed;
    z-index: 30;
    top: 56px;
    right: max(8px, env(safe-area-inset-right));
    max-height: calc(100dvh - 64px);
    width: min(330px, calc(100vw - 16px));
    overflow: auto;
  }
}

@media (max-width: 360px) {
  .brand b { font-size: 11px; letter-spacing: 1px; }
  .economy > div { min-width: 48px; padding-inline: 3px; }
  .icon-button { width: 33px; height: 33px; }
  .top-actions { gap: 2px; }
}

/* V16 final responsive overrides must remain last in the cascade. */
@media (max-width: 480px) {
  .brand i,
  #base-button { display: none; }
  .icon-button { width: 44px; height: 44px; }
  .economy > div { min-width: 62px; padding-inline: 5px; }
  .difficulty-row button { min-height: 44px; }
  .modal-close { width: 44px; height: 44px; }
  .tactical-status-item span { font-size: 8px; }
  .tactical-status-item strong { font-size: 10px; }
}

@media (any-pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  html, body { height: 100%; overflow: hidden; }
  #game-shell { height: 100dvh; min-height: 100dvh; grid-template-rows: 48px minmax(100px, 1fr) 154px; }
  .command-deck { grid-template-columns: minmax(250px, .9fr) minmax(330px, 1.4fr); grid-template-rows: 154px; overflow-x: auto; overflow-y: hidden; }
  .orders-panel { position: static !important; order: 1; }
  .production-panel { order: 2; }
  .selection-panel,
  .radar-panel { display: none !important; }
  .tactical-status-panel { top: auto; bottom: 6px; }
  .battlefield:has(.facility-command-card:not([hidden])) .mission-card,
  .battlefield:has(.facility-command-card:not([hidden])) .tactical-status-panel { display: none; }
  .facility-command-card { bottom: 7px; max-height: calc(100% - 14px); overflow: auto; }
}

/* V17 responsive interaction safeguards. Keep these last so compact touch
   geometry cannot be reduced by an earlier component or breakpoint rule. */
@media (min-width: 681px) and (min-height: 761px) {
  #game-shell { height: 100dvh; }
}

.mobile-radar-overlay { z-index: 30; }

@media (any-pointer: coarse) {
  .top-actions .icon-button,
  #production-cancel-button,
  #fortify-button,
  #radar-close-button,
  .mobile-strike-button,
  .modal-close,
  .context-tip-actions button,
  #cancel-command-mode {
    min-width: 44px;
    min-height: 44px;
  }

  #production-cancel-button { transform: translateY(-2px); }
}

@media (any-pointer: coarse) and (orientation: portrait) and (max-width: 680px) {
  .facility-command-card { bottom: 153px; }
  .battlefield:has(.facility-command-card:not([hidden])) .mission-card { display: none; }
}

@media (any-pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .mobile-radar-overlay {
    position: fixed;
    z-index: 30;
    top: calc(56px + env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    width: min(350px, calc(100vw - 16px));
    max-height: calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
  }

  #production-tab { visibility: hidden; }
}

@media (any-pointer: coarse) and (orientation: landscape) and (min-width: 681px) and (max-height: 520px) {
  #production-cancel-button { transform: translateY(-8px); }
}

@media (any-pointer: coarse) and (orientation: landscape) and (min-width: 568px) and (max-height: 520px) {
  .facility-command-card {
    left: max(8px, env(safe-area-inset-left));
    right: auto;
    width: min(430px, calc(100vw - 145px));
  }

  .facility-command-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.network-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 92, 142, .32);
  background: rgba(255, 52, 112, .08);
  color: #ff9ab8;
  font: 700 8px/1.2 var(--mono);
  letter-spacing: .45px;
}
.network-status[hidden] { display: none; }
.network-status span { color: #bd7188; }
.network-status strong { margin: 0; color: #ffd1df; font: inherit; white-space: nowrap; }
.network-status[data-state="down"] { border-color: rgba(243, 185, 97, .42); background: rgba(243, 185, 97, .09); }
.network-status[data-state="down"] span,
.network-status[data-state="down"] strong { color: #ffd594; }

@media (max-width: 680px), (any-pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .network-status {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 2px;
    margin-top: 5px;
    padding: 4px 6px;
    font-size: 9px;
    line-height: 1.35;
  }
  .network-status strong { white-space: normal; overflow-wrap: anywhere; }
  .mission-card:has(.network-status:not([hidden])) .objective-progress { margin-top: 5px; }
}

/* V18 keyboard access and six-action responsive safeguards. */
#game-canvas:focus-visible,
#minimap:focus-visible,
#mobile-minimap:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: -5px;
  box-shadow: inset 0 0 0 2px rgba(5, 13, 16, .92), inset 0 0 0 5px rgba(76, 224, 210, .26);
}

/* The four-panel deck needs more room than its former 1050px switch allowed.
   Keep selection available through the compact summary and radar through the
   top-bar overlay until the complete deck has its full desktop footprint. */
@media (min-width: 681px) and (max-width: 1180px) {
  .command-deck { grid-template-columns: minmax(280px, .95fr) minmax(0, 2.05fr); }
  .selection-panel,
  .radar-panel { display: none !important; }
  .radar-toggle-button { display: inline-block; }

  .battlefield:has(.facility-command-card:not([hidden])) .status-feed,
  .battlefield:has(.facility-command-card:not([hidden])) .tactical-status-panel { display: none; }
}

/* At 1024px the center telemetry previously occupied the same lower strip as
   the feed and facility card. Use the clear space between the top cards. */
@media (min-width: 1001px) and (max-width: 1180px) {
  .tactical-status-panel {
    top: 18px;
    bottom: auto;
    width: 360px;
    min-width: 0;
  }
}

/* Below that width, keep telemetry opposite the feed rather than centered on
   it. The calculated width preserves a small separation down to 681px. */
@media (min-width: 681px) and (max-width: 1000px) {
  .tactical-status-panel {
    left: auto;
    right: 18px;
    top: auto;
    bottom: 8px;
    width: min(360px, calc(100% - 440px));
    min-width: 0;
    transform: none;
  }
}

/* Six actions fit in one compact portrait row at the target 393px viewport. */
@media (max-width: 680px) {
  .order-grid { grid-template-columns: repeat(6, minmax(44px, 1fr)); }
  .order-grid button { min-width: 44px; min-height: 44px; }
}

/* Short landscape decks use two rows of three, keeping every action at least
   44px in both target 667x375 and 844x390 layouts. */
@media (any-pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .order-grid { grid-template-columns: repeat(3, minmax(44px, 1fr)); gap: 4px; }
  .order-grid button { min-width: 44px; min-height: 44px; }
}

/* V20 compact viewport and safe-area release fixes. Keep these last so the
   earlier responsive layers cannot reintroduce clipped command controls. */
@media (max-width: 680px) {
  #game-shell {
    grid-template-rows: calc(54px + env(safe-area-inset-top)) minmax(360px, 57dvh) auto;
  }

  .topbar { padding-top: env(safe-area-inset-top); }
}

/* At 320px, two economy cells and four 44px actions must share one row. Let
   the economy cells absorb the remaining width instead of enforcing the old
   62px minimum that pushed Help beyond the viewport. */
@media (max-width: 360px) {
  .topbar {
    gap: 4px;
    padding-inline: max(4px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-right));
  }

  .economy > div {
    min-width: 0;
    padding-inline: 2px;
  }
}

/* The armed-command prompt adds a full touch row. Grow both the shell's deck
   track and the deck's own grid row so all six actions and Cancel remain
   visible at 667x375 while preserving a useful battlefield. */
@media (any-pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  #game-shell {
    grid-template-rows: calc(48px + env(safe-area-inset-top)) minmax(100px, 1fr) calc(154px + env(safe-area-inset-bottom));
  }

  .topbar {
    padding-top: env(safe-area-inset-top);
    padding-right: max(clamp(14px, 1.7vw, 28px), env(safe-area-inset-right));
    padding-left: max(clamp(14px, 1.7vw, 28px), env(safe-area-inset-left));
  }

  .top-actions { flex: 0 0 auto; gap: 4px; }

  .command-deck {
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }

  #game-shell:has(.command-mode-row:not([hidden])) {
    grid-template-rows: calc(48px + env(safe-area-inset-top)) minmax(100px, 1fr) calc(202px + env(safe-area-inset-bottom));
  }

  .command-deck:has(.command-mode-row:not([hidden])) {
    grid-template-rows: 202px;
  }
}

/* V63 ultra-short landscape containment. At 568x320 the armed deck needs its
   full 202px track, so release 30px from the battlefield while retaining a
   usable 70px canvas and the established 44px command targets. */
@media (any-pointer: coarse) and (orientation: landscape) and (max-height: 350px) {
  #game-shell {
    grid-template-rows: calc(48px + env(safe-area-inset-top)) minmax(70px, 1fr) calc(154px + env(safe-area-inset-bottom));
  }

  #game-shell:has(.command-mode-row:not([hidden])) {
    grid-template-rows: calc(48px + env(safe-area-inset-top)) minmax(70px, 1fr) calc(202px + env(safe-area-inset-bottom));
  }
}

/* V22 compact radar and command containment. The radar canvas keeps its
   intrinsic 11:7 geometry; the surrounding panel scrolls when height is
   scarce instead of independently squashing the canvas. */
@media (orientation: portrait) and (max-width: 680px) {
  .mobile-radar-overlay {
    position: fixed;
    z-index: 30;
    top: calc(62px + env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #mobile-minimap {
    touch-action: pan-y;
  }
}

@media (orientation: portrait) and (max-width: 360px) {
  .order-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .order-grid button {
    min-width: 44px;
    min-height: 58px;
    padding: 6px 4px;
    gap: 3px;
  }

  .order-grid span {
    font-size: 12px;
    line-height: 1;
  }
}

@media (any-pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .mobile-radar-overlay {
    width: min(288px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }

  #mobile-minimap {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 11 / 7;
    touch-action: pan-y;
  }
}

@media (any-pointer: coarse) and (orientation: landscape) and (min-width: 568px) and (max-height: 520px) {
  .facility-command-card {
    left: max(8px, env(safe-area-inset-left));
    width: min(430px, calc(100vw - 145px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }
}

/* V41 notched-landscape HUD containment. Preserve the established offsets
   while keeping battlefield telemetry inside both horizontal safe areas. */
@media (any-pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .mission-card,
  .status-feed,
  .context-tip {
    left: max(18px, env(safe-area-inset-left));
    max-width: calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)));
  }

  .wave-card {
    right: max(18px, env(safe-area-inset-right));
    max-width: calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)));
  }
}

@media (any-pointer: coarse) and (orientation: landscape) and (max-width: 680px) and (max-height: 520px) {
  .mission-card,
  .status-feed,
  .context-tip {
    left: max(8px, env(safe-area-inset-left));
    max-width: calc(100% - max(8px, env(safe-area-inset-left)) - max(7px, env(safe-area-inset-right)));
  }

  .wave-card {
    right: max(7px, env(safe-area-inset-right));
    max-width: calc(100% - max(8px, env(safe-area-inset-left)) - max(7px, env(safe-area-inset-right)));
  }
}

/* Keep state changes immediate and readable without decorative movement. */
@media (prefers-reduced-motion: reduce) {
  .production-grid button.tutorial-pulse,
  .wave-card.imminent,
  .operation-status i,
  .economy-state[data-state="brownout"],
  #strike-button.ready,
  .mobile-strike-button.ready {
    animation: none !important;
  }

  .objective-progress i,
  .wave-track i,
  .order-grid button,
  .production-grid button,
  .production-grid button .asset-thumb,
  .icon-button,
  .health-line i {
    transition: none !important;
  }
}

/* V30 command-access and objective-feedback safeguards. Keep these final so
   the original compact rules cannot remove semantics or wide-touch access. */
@media (max-width: 680px) {
  #objective-copy {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (any-pointer: coarse) and (orientation: landscape) and (min-width: 1181px) and (max-height: 520px) {
  .radar-toggle-button {
    display: inline-block;
    pointer-events: auto;
  }

  .radar-panel { display: none !important; }
}

/* Focused-25: keep primary setup and orbital actions touch-safe on tablets. */
@media (any-pointer: coarse) {
  .difficulty-row button,
  #strike-button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Focused-25: tablets use the desktop-style two-panel deck, so they need
   their own safe-area layer outside the phone and short-landscape rules. */
@media (any-pointer: coarse) and (min-width: 681px) and (max-width: 1180px) and (min-height: 521px) {
  .topbar {
    padding-top: env(safe-area-inset-top);
    padding-right: max(clamp(14px, 1.7vw, 28px), env(safe-area-inset-right));
    padding-left: max(clamp(14px, 1.7vw, 28px), env(safe-area-inset-left));
  }

  .top-actions { flex: 0 0 auto; gap: 4px; }

  .command-deck {
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }

  .mission-card,
  .status-feed,
  .context-tip {
    left: max(18px, env(safe-area-inset-left));
    max-width: calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)));
  }

  .mission-card,
  .wave-card {
    top: max(18px, env(safe-area-inset-top));
  }

  .wave-card,
  .facility-command-card {
    right: max(18px, env(safe-area-inset-right));
    max-width: calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)));
  }

  .status-feed,
  .facility-command-card {
    bottom: max(16px, env(safe-area-inset-bottom));
  }

  .mobile-radar-overlay {
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    width: min(360px, calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right))));
    max-height: calc(100% - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* At the narrow tablet boundary, reclaim topbar width for the economy readout
   and all five actions without changing phone or short-landscape layouts. */
@media (any-pointer: coarse) and (min-width: 681px) and (max-width: 736px) and (min-height: 521px) {
  .brand { display: none; }
}

@media (any-pointer: coarse) and (min-width: 681px) and (max-width: 1180px) and (min-height: 521px) and (max-height: 760px) {
  #game-shell {
    height: 100dvh;
    min-height: 100dvh;
    grid-template-rows: calc(60px + env(safe-area-inset-top)) minmax(260px, 1fr) calc(172px + env(safe-area-inset-bottom));
  }
}

@media (any-pointer: coarse) and (min-width: 681px) and (max-width: 1050px) and (min-height: 761px) {
  #game-shell {
    grid-template-rows: calc(58px + env(safe-area-inset-top)) minmax(320px, 1fr) calc(238px + env(safe-area-inset-bottom));
  }
}

@media (any-pointer: coarse) and (min-width: 1051px) and (max-width: 1180px) and (min-height: 761px) {
  #game-shell {
    grid-template-rows: calc(68px + env(safe-area-inset-top)) minmax(280px, 1fr) calc(190px + env(safe-area-inset-bottom));
  }
}

@media (any-pointer: coarse) and (min-width: 681px) and (max-width: 1000px) and (min-height: 521px) {
  .tactical-status-panel {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)));
  }
}

@media (any-pointer: coarse) and (min-width: 1001px) and (max-width: 1180px) and (min-height: 521px) {
  .tactical-status-panel {
    top: max(18px, env(safe-area-inset-top));
    max-width: calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)));
  }
}

/* Focused-25 hybrid fallback: Chromium cannot expose a fine primary pointer
   and coarse secondary pointer together through CDP. The real input-mode
   signal therefore mirrors the capability rules once a touch is observed,
   without changing fine-only desktop layout or the established width caps. */
#game-shell[data-input-mode="touch"] .top-actions .icon-button,
#game-shell[data-input-mode="touch"] #production-cancel-button,
#game-shell[data-input-mode="touch"] #fortify-button,
#game-shell[data-input-mode="touch"] #radar-close-button,
#game-shell[data-input-mode="touch"] .mobile-strike-button,
#game-shell[data-input-mode="touch"] .modal-close,
#game-shell[data-input-mode="touch"] .context-tip-actions button,
#game-shell[data-input-mode="touch"] #cancel-command-mode,
#game-shell[data-input-mode="touch"] .difficulty-row button,
#game-shell[data-input-mode="touch"] #strike-button {
  min-width: 44px;
  min-height: 44px;
}

@media (min-width: 681px) and (min-height: 521px) {
  #game-shell[data-input-mode="touch"] .topbar {
    padding-top: env(safe-area-inset-top);
    padding-right: max(clamp(14px, 1.7vw, 28px), env(safe-area-inset-right));
    padding-left: max(clamp(14px, 1.7vw, 28px), env(safe-area-inset-left));
  }

  #game-shell[data-input-mode="touch"] .top-actions { flex: 0 0 auto; gap: 4px; }

  #game-shell[data-input-mode="touch"] .command-deck {
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }

  #game-shell[data-input-mode="touch"] .mission-card,
  #game-shell[data-input-mode="touch"] .status-feed,
  #game-shell[data-input-mode="touch"] .context-tip {
    left: max(18px, env(safe-area-inset-left));
    max-width: calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)));
  }

  #game-shell[data-input-mode="touch"] .mission-card,
  #game-shell[data-input-mode="touch"] .wave-card {
    top: max(18px, env(safe-area-inset-top));
  }

  #game-shell[data-input-mode="touch"] .wave-card,
  #game-shell[data-input-mode="touch"] .facility-command-card {
    right: max(18px, env(safe-area-inset-right));
    max-width: calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)));
  }

  #game-shell[data-input-mode="touch"] .status-feed,
  #game-shell[data-input-mode="touch"] .facility-command-card {
    bottom: max(16px, env(safe-area-inset-bottom));
  }

  #game-shell[data-input-mode="touch"] .mobile-radar-overlay {
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    width: min(360px, calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right))));
    max-height: calc(100% - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (min-width: 681px) and (max-width: 736px) and (min-height: 521px) {
  #game-shell[data-input-mode="touch"] .brand { display: none; }
}

@media (min-width: 681px) and (max-width: 1180px) and (min-height: 521px) and (max-height: 760px) {
  #game-shell[data-input-mode="touch"] {
    height: 100dvh;
    min-height: 100dvh;
    grid-template-rows: calc(60px + env(safe-area-inset-top)) minmax(260px, 1fr) calc(172px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 681px) and (max-width: 1050px) and (min-height: 761px) {
  #game-shell[data-input-mode="touch"] {
    grid-template-rows: calc(58px + env(safe-area-inset-top)) minmax(320px, 1fr) calc(238px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 1051px) and (max-width: 1180px) and (min-height: 761px) {
  #game-shell[data-input-mode="touch"] {
    grid-template-rows: calc(68px + env(safe-area-inset-top)) minmax(280px, 1fr) calc(190px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 681px) and (max-width: 1000px) and (min-height: 521px) {
  #game-shell[data-input-mode="touch"] .tactical-status-panel {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)));
  }
}

@media (min-width: 1001px) and (max-width: 1180px) and (min-height: 521px) {
  #game-shell[data-input-mode="touch"] .tactical-status-panel {
    top: max(18px, env(safe-area-inset-top));
    max-width: calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)));
  }
}

@media (min-width: 1181px) and (min-height: 521px) {
  #game-shell[data-input-mode="touch"] .tactical-status-panel {
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)));
  }
}

/* Focused-25 compact-portrait reachability. Keep the command deck exposed and
   place the facility surface beside the compact threat card so both sets of
   touch controls remain available without requiring a taller battlefield. */
@media (orientation: portrait) and (max-width: 680px) and (max-height: 600px) {
  #game-shell {
    grid-template-rows: calc(54px + env(safe-area-inset-top)) minmax(260px, 57dvh) auto;
  }

  .wave-card { bottom: 8px; }

  .battlefield:has(.facility-command-card:not([hidden])) .wave-card {
    z-index: 9;
    top: 8px;
    bottom: auto;
  }

  .facility-command-card {
    position: absolute;
    left: 8px;
    right: 135px;
    bottom: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100% - 16px);
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* Focused-25 portrait seam: 481-541px has room for Base, but not for the
   brand alongside two complete economy readouts, safe areas, and actions. */
@media (orientation: portrait) and (min-width: 481px) and (max-width: 541px) {
  .brand { display: none; }
}