@font-face {
  font-family: Manrope;
  src: url("/styles/fonts/manrope-ui.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/styles/fonts/jetbrains-mono-ui.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Russo One";
  src: url("/styles/fonts/russo-display.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-ui: Manrope, "DejaVu Sans", sans-serif;
  --font-mono: "JetBrains Mono", "DejaVu Sans Mono", monospace;
  --font-display: "Russo One", Manrope, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --ui-bg: #070c11;
  --ui-surface: #0d151d;
  --ui-surface-raised: #121d26;
  --ui-surface-hover: #172630;
  --ui-line: #263943;
  --ui-line-strong: #3b5663;
  --ui-text: #edf4f6;
  --ui-muted: #91a3ab;
  --ui-faint: #647780;
  --ui-accent: #69c7e3;
  --ui-accent-soft: #16333f;
  --ui-warning: #e7bd58;
  --ui-danger: #ef6871;
  --ui-success: #60c58a;

  --z-field: 1;
  --z-marker: 2;
  --z-hud: 3;
  --z-panel: 4;
  --z-tooltip: 5;
  --z-modal: 6;
  --z-tutorial: 7;

  --hud-height: 56px;
  --dock-height: 72px;
  --panel-compact: 184px;
  --panel-standard: 320px;
  --panel-expanded: min(62vh, 560px);
}

html,
body,
button,
select,
textarea,
input {
  font-family: var(--font-ui);
}
body {
  background: var(--ui-bg);
  color: var(--ui-text);
}

html,
body {
  overflow: hidden;
}
@media (max-width: 720px) {
  html,
  body {
    overflow-y: auto;
  }
}
button {
  font-size: 14px;
}
.hidden {
  display: none !important;
}

.hud-stat b,
.hud-stat small,
.hud-phase b,
.price,
.node span,
.metric b,
.page-token,
.sector-tab > b,
.mode-control span,
.reserve-readout span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.modal-title,
.reward-card > b,
.level-burst > b,
.test-end-panel h2 {
  font-family: var(--font-display);
}

.battle-screen.ui2-shell {
  height: 100dvh;

  min-height: min(600px, 100dvh);
  display: grid;
  grid-template-rows: var(--hud-height) minmax(0, 1fr) var(--dock-height);
  overflow: hidden;
  background: var(--ui-bg);
}

.tactical-hud {
  position: relative;
  z-index: var(--z-hud);
  height: var(--hud-height);
  display: grid;
  grid-template-columns: 176px 168px minmax(480px, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--ui-line);
  background: #0a1219;
}
.hud-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hud-brand .brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-color: var(--ui-line-strong);
  background: var(--ui-surface-raised);
}
.hud-brand b {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.06em;
}
.hud-brand small {
  display: block;
  margin-top: var(--space-1);
  overflow: hidden;
  color: var(--ui-faint);
  font: 600 9px/1 var(--font-mono);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hud-phase {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
  padding-left: var(--space-3);
  border-left: 1px solid var(--ui-line);
}
.hud-phase span {
  overflow: hidden;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hud-phase b {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hud-vitals {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) repeat(3, minmax(92px, 1fr));
  gap: var(--space-2);
}
.hud-stat {
  min-width: 0;
  height: 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 4px;
  align-items: center;
  column-gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--ui-surface);
}
.hud-stat span {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hud-stat b {
  font-size: 14px;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}
.hud-stat small {
  grid-column: 1/-1;
  min-width: 0;
  overflow: hidden;
  color: var(--ui-faint);
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hud-stat em {
  grid-column: 1/-1;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: #1b2931;
}
.hud-stat em i {
  display: block;
  height: 100%;
  background: var(--ui-success);
}
.hud-stat.warning {
  border-color: color-mix(in srgb, var(--ui-warning) 60%, transparent);
}
.hud-stat.critical {
  border-color: var(--ui-danger);
  background: #27161a;
}
.hud-stat.critical b {
  color: #ff9ba2;
}
.hud-stat.threat b {
  color: var(--ui-warning);
}
.hud-controls {
  display: grid;
  grid-template-columns: repeat(4, 36px);
  gap: var(--space-1);
}
.hud-controls button,
.map-focus,
.panel-tools button,
.object-inspector > header button,
.mini-widget header button {
  display: grid;
  place-items: center;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-sm);
  background: var(--ui-surface);
  color: var(--ui-muted);
  cursor: pointer;
}
.hud-controls button {
  width: 36px;
  height: 36px;
  padding: 0;
  font: 700 13px var(--font-mono);
}
.hud-controls button:hover,
.hud-controls button.active,
.map-focus:hover,
.panel-tools button:hover,
.object-inspector > header button:hover,
.mini-widget header button:hover {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}
.hud-controls button:focus-visible,
.command-dock button:focus-visible,
.command-panel button:focus-visible,
.object-inspector button:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}

.ui2-battle-main {
  position: relative;
  z-index: var(--z-field);
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(
    circle at 50% 18%,
    #0d1b23 0,
    #080f15 52%,
    #060b10 100%
  );
}
.ui2-battle-main .map-stage {
  position: absolute;
  inset: var(--space-2);
  z-index: var(--z-field);
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  transition: right 0.18s ease;
}
.ui2-battle-main.inspector-open .map-stage {
  right: 348px;
}
.ui2-battle-main .canvas-wrap {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  aspect-ratio: 1180/680;
  overflow: hidden;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--radius-md);
  background: #081018;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
}
.ui2-battle-main #gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ui2-battle-main .map-orientation {
  position: absolute;
  inset: var(--space-2) var(--space-3) auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  color: rgba(182, 205, 214, 0.54);
  font: 600 10px var(--font-mono);
}
.map-focus {
  position: absolute;
  right: var(--space-3);
  top: var(--space-6);
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 14px;
}

.ui2-battle-main .lane-picker {
  position: absolute;
  left: 9%;
  bottom: var(--space-3);
  right: 9%;
  z-index: var(--z-marker);
  width: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-2);
  pointer-events: none;
}
.ui2-battle-main .deployment-mode,
.ui2-battle-main .sector-tabs {
  display: flex;
  gap: var(--space-2);
}
.ui2-battle-main .sector-focus {
  display: none !important;
}
.ui2-battle-main .mode-control,
.ui2-battle-main .sector-tab,
.ui2-battle-main .reserve-readout {
  pointer-events: auto;
  min-width: 104px;
  height: 48px;
  padding: 6px var(--space-2);
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-sm);
  background: rgba(9, 17, 23, 0.94);
  color: var(--ui-muted);
  text-align: left;
}
.ui2-battle-main button.mode-control,
.ui2-battle-main button.sector-tab {
  cursor: pointer;
}
.ui2-battle-main .mode-control:hover,
.ui2-battle-main .sector-tab:hover {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}
.ui2-battle-main .mode-control.active,
.ui2-battle-main .sector-tab.active,
.ui2-battle-main .sector-tab.inspected {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  color: var(--ui-text);
}
.ui2-battle-main .sector-tab.hot {
  border-color: var(--ui-danger);
}
.ui2-battle-main .sector-tab > span {
  float: left;
  font: 700 14px var(--font-ui);
}
.ui2-battle-main .sector-tab > b {
  float: right;
  font-size: 14px;
}
.ui2-battle-main .sector-tab small,
.ui2-battle-main .mode-control small,
.ui2-battle-main .mode-control b,
.ui2-battle-main .reserve-readout small {
  display: block;
  clear: both;
  max-width: 112px;
  overflow: hidden;
  color: var(--ui-faint);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ui2-battle-main .sector-tab em {
  display: block;
  clear: both;
  height: 3px;
  margin-top: var(--space-1);
  overflow: hidden;
  border-radius: 3px;
  background: #1b2a32;
}
.ui2-battle-main .sector-tab em i {
  display: block;
  height: 100%;
  background: var(--ui-warning);
}
.ui2-battle-main .mode-control span,
.ui2-battle-main .reserve-readout span {
  font: 700 11px var(--font-mono);
}

.pinned-zone {
  position: absolute;
  z-index: var(--z-marker);
  left: var(--space-3);
  top: var(--space-3);
  width: 236px;
  display: grid;
  gap: var(--space-2);
  pointer-events: none;
}
.mini-widget {
  pointer-events: auto;
  max-height: 104px;
  overflow: auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-md);
  background: rgba(11, 20, 27, 0.93);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}
.mini-widget:nth-of-type(n + 3):not(.hidden) {
  display: none;
}
.mini-widget header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.mini-widget header span {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mini-widget header button {
  width: 24px;
  height: 24px;
  padding: 0;
  flex: 0 0 24px;
}
.mini-widget > b {
  display: block;
  margin-top: var(--space-1);
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mini-widget p {
  margin: var(--space-1) 0 0;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: 11px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mini-widget > small {
  display: block;
  color: var(--ui-faint);
  font-size: 10px;
}
.mini-widget > small i {
  color: var(--ui-warning);
  font-style: normal;
}
.mini-widget em {
  display: block;
  height: 4px;
  margin-top: var(--space-2);
  background: #1b2a32;
}
.mini-widget em i {
  display: block;
  height: 100%;
  background: var(--ui-accent);
}
.mini-widget.collapsed {
  width: 48px;
  height: 40px;
  padding: var(--space-2);
  overflow: hidden;
}
.mini-widget.collapsed > *:not(header) {
  display: none;
}
.mini-widget.collapsed header span {
  display: none;
}
.widget-action {
  margin-top: var(--space-2);
  border: 0;
  background: transparent;
  color: var(--ui-accent);
  padding: 0;
  font-size: 11px;
  cursor: pointer;
}

.object-inspector {
  position: absolute;
  z-index: var(--z-panel);
  right: var(--space-2);
  top: var(--space-2);
  bottom: var(--space-2);
  width: 324px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--radius-lg);
  background: #0b141b;
  box-shadow: -12px 12px 32px rgba(0, 0, 0, 0.32);
  transition:
    opacity 0.14s ease,
    visibility 0s linear 0.14s;
}
.object-inspector.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}
.object-inspector > header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ui-line);
}
.object-inspector > header > div {
  min-width: 0;
}
.object-inspector > header span {
  display: block;
  overflow: hidden;
  color: var(--ui-accent);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.object-inspector > header h2 {
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.object-inspector > header button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  font-size: 18px;
}
.object-inspector > #inspectorContent {
  min-height: 0;
  overflow: auto;
  padding: var(--space-3);
}
.object-inspector .inspector-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.object-inspector .inspector-actions button {
  min-height: 40px;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-sm);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  padding: var(--space-2);
  font-size: 14px;
  cursor: pointer;
}
.object-inspector .inspector-actions button:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.command-panel.context-panel {
  position: absolute;
  z-index: var(--z-panel);
  left: var(--space-3);
  right: var(--space-3);
  top: auto;
  bottom: 0;
  width: auto;
  height: var(--panel-standard);
  display: grid;
  grid-template-rows: 64px auto minmax(0, 1fr);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--ui-line-strong);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: #0a141b;
  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.34);
  transition:
    height 0.16s ease,
    opacity 0.14s ease,
    visibility 0s linear 0.14s;
}
.command-panel.context-panel.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}
.command-panel.context-panel[data-size="compact"] {
  height: var(--panel-compact);
}
.command-panel.context-panel[data-size="standard"] {
  height: var(--panel-standard);
}
.command-panel.context-panel[data-size="expanded"] {
  height: var(--panel-expanded);
}
.command-panel .context-head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--ui-line);
}
.command-panel .context-head > div:first-child {
  min-width: 0;
}
.command-panel .context-head span {
  display: block;
  color: var(--ui-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.command-panel .context-head h2 {
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 19px;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.command-panel .context-head p {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.panel-tools {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}
.panel-tools button {
  width: 32px;
  height: 32px;
  padding: 0;
}
.panel-tools button.active {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  color: var(--ui-text);
}
.command-panel .panel-body {
  min-height: 0;
  overflow: hidden;
}
.command-panel .tab-pane {
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: var(--space-3) var(--space-4) var(--space-4);
  scrollbar-gutter: stable;
}
.command-panel .tab-pane.active {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-content: start;
  gap: var(--space-3);
}
.command-panel .tab-pane.active > .section-title {
  grid-column: 1/-1;
}
.command-panel .panel-card,
.command-panel .intel-brief,
.command-panel .operation-forecast {
  margin: 0;
}
.command-panel .buy-row {
  min-height: 76px;
  margin: 0;
}
.command-panel .operation-forecast,
.command-panel .research-grid,
.command-panel .help-grid {
  grid-column: 1/-1;
}
.more-tabs {
  display: none;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  overflow-x: auto;
  border-bottom: 1px solid var(--ui-line);
}
.command-panel.more-open .more-tabs {
  display: flex;
}
.more-tabs button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ui-muted);
  padding: 6px var(--space-3);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.more-tabs button:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}
.more-tabs button.active {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}

.section-title {
  margin: var(--space-2) 0 0;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.panel-card,
.intel-brief,
.sector-hero,
.more-card {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-md);
  background: var(--ui-surface);
}
.panel-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.panel-card header b {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.panel-card header span {
  flex: 0 0 auto;
  color: var(--ui-accent);
  font: 700 12px var(--font-mono);
}
.panel-card p,
.sector-hero p,
.intel-brief p,
.more-card p {
  margin: var(--space-1) 0 0;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.buy-row {
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-md);
  background: var(--ui-surface);
  color: var(--ui-text);
  text-align: left;
  cursor: pointer;
}
.buy-row:hover:not(:disabled) {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface-hover);
}
.buy-row.selected {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}
.buy-row:disabled,
.buy-row[aria-disabled="true"] {
  opacity: 0.52;
  cursor: not-allowed;
}
.unit-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: #192933;
  color: var(--ui-accent);
  font: 700 12px var(--font-mono);
}
.row-copy {
  min-width: 0;
}
.row-copy b {
  display: block;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.row-copy b i {
  color: var(--ui-warning);
  font-size: 11px;
  font-style: normal;
}
.row-copy small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.row-copy em {
  display: block;
  margin-top: 3px;
  color: var(--ui-faint);
  font-size: 11px;
  font-style: normal;
}
.support-ready .support-state {
  color: var(--ui-success);
}
.support-blocked .support-state {
  color: var(--ui-warning);
}
.price {
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.price small {
  display: block;
  margin-top: 3px;
  color: var(--ui-faint);
  font-size: 10px;
}
.panel-action,
.setting-actions button,
.more-card button {
  min-height: 40px;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--radius-sm);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  padding: var(--space-2) var(--space-3);
  font-size: 14px;
  cursor: pointer;
}
.panel-action {
  width: 100%;
  margin-top: var(--space-2);
}
.panel-action:hover,
.setting-actions button:hover,
.more-card button:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}
.setting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.research-grid,
.help-grid,
.more-grid,
.sector-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.research-card,
.help-grid > div,
.sector-stats > div {
  min-width: 0;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-md);
  background: var(--ui-surface);
  padding: var(--space-3);
}
.research-card {
  min-height: 104px;
  color: var(--ui-text);
  text-align: left;
  cursor: pointer;
}
.research-card:hover:not(:disabled) {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface-hover);
}
.research-card.unlocked {
  border-color: color-mix(in srgb, var(--ui-success) 55%, var(--ui-line));
  background: #102019;
}
.research-card.blocked {
  opacity: 0.48;
}
.research-card > span,
.intel-brief span,
.sector-hero span {
  color: var(--ui-accent);
  font-size: 11px;
  font-weight: 700;
}
.research-card > b,
.intel-brief b,
.sector-hero b {
  display: block;
  margin-top: var(--space-1);
  font-size: 14px;
}
.research-card > small,
.help-grid span {
  display: block;
  margin-top: var(--space-1);
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.4;
}
.research-card > em {
  float: right;
  color: var(--ui-warning);
  font: 700 11px var(--font-mono);
  font-style: normal;
}
.help-grid b {
  display: block;
  font-size: 13px;
}
.sector-stats > div span {
  display: block;
  color: var(--ui-muted);
  font-size: 11px;
}
.sector-stats > div b {
  display: block;
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
  font-size: 13px;
}
.intel-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.intel-list span {
  border-radius: 999px;
  background: var(--ui-surface-raised);
  padding: 6px var(--space-2);
  color: var(--ui-muted);
  font-size: 11px;
}
.intel-list span.elite {
  color: var(--ui-warning);
}

.command-dock {
  position: relative;
  z-index: var(--z-hud);
  height: var(--dock-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3)
    max(var(--space-2), env(safe-area-inset-bottom));
  border-top: 1px solid var(--ui-line);
  background: #091118;
}
.command-dock .dock-tools {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(96px, 1fr));
  gap: var(--space-2);
}
.command-dock .dock-tools button {
  min-width: 0;
  height: 56px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--ui-surface);
  color: var(--ui-muted);
  text-align: left;
  cursor: pointer;
}
.command-dock .dock-tools button:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}
.command-dock .dock-tools button.active {
  border-color: var(--ui-line-strong);
  background: var(--ui-accent-soft);
  color: var(--ui-text);
}
.command-dock .dock-tools span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: #172731;
  color: var(--ui-accent);
  font: 700 15px var(--font-mono);
}
.command-dock .dock-tools b {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.command-dock .dock-tools small {
  color: var(--ui-faint);
  font: 600 10px var(--font-mono);
  text-align: right;
}

.command-dock .phase-actions {
  display: grid;
  grid-template-columns: 148px 44px 44px 160px;
  gap: var(--space-2);
}
.command-dock .phase-actions button {
  height: 56px;
  border-radius: var(--radius-md);
  text-transform: none;
}
.command-dock .dock-secondary {
  min-width: 0;
  width: 44px;
  border: 1px solid var(--ui-line);
  background: var(--ui-surface);
  color: var(--ui-muted);
}
.command-dock .return-truce {
  width: 148px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: var(--ui-text);
  text-align: left;
}
.command-dock .return-truce span {
  font: 700 15px var(--font-mono);
  text-align: center;
}
.command-dock .return-truce b {
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.command-dock .dock-primary {
  min-width: 0;
  width: 160px;
  grid-column: 4;
  border: 1px solid #4b8da0;
  background: #1b5062;
  color: #f5fbfc;
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
}
.command-dock .dock-primary:hover:not(:disabled) {
  border-color: var(--ui-accent);
  background: #235f73;
}
.command-dock .dock-primary:disabled,
.command-dock .dock-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.hero-command-bar {
  position: absolute;
  z-index: var(--z-hud);
  left: 0;
  right: 0;
  bottom: 10px;
  width: min(780px, 72%);
  min-height: 86px;
  margin-inline: auto;
  pointer-events: auto;
  border: 1px solid rgba(73, 104, 119, 0.82);
  border-radius: var(--radius-md);
  background: linear-gradient(
    180deg,
    rgba(11, 19, 26, 0.97),
    rgba(7, 13, 19, 0.97)
  );
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  isolation: isolate;
}
.hero-command-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
}
.hero-command-card {
  --hero-rarity: #65bfe3;
  --hero-glow: rgba(101, 191, 227, 0.18);
  min-width: 0;
  height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 138px;
  gap: 6px;
  overflow: hidden;
  border: 1px solid var(--hero-rarity);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 45%, var(--hero-glow), transparent 36%),
    #0e1820;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 11px var(--hero-glow);
}
.hero-command-card.rarity-4 {
  --hero-rarity: #aa7ae6;
  --hero-glow: rgba(170, 122, 230, 0.22);
}
.hero-command-card.rarity-5 {
  --hero-rarity: #e4bd58;
  --hero-glow: rgba(228, 189, 88, 0.24);
}
.hero-command-card.empty {
  border-style: dashed;
  border-color: #33454e;
  background: #0b1319;
  box-shadow: none;
}
.hero-command-empty {
  display: grid;
  place-content: center;
  gap: 4px;
  padding: 8px;
  color: var(--ui-faint);
  text-align: center;
}
.hero-command-empty span {
  font: 700 9px var(--font-mono);
}
.hero-command-empty b {
  font-size: 11px;
}
.hero-command-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--ui-text);
  padding: 6px;
  text-align: left;
  cursor: pointer;
}
.hero-command-identity:hover {
  background: rgba(255, 255, 255, 0.035);
}
.hero-command-portrait {
  width: 50px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hero-rarity);
  border-radius: 7px;
  background:
    radial-gradient(circle, var(--hero-glow), transparent 70%), #14232d;
  color: #f6fbfd;
  font: 800 17px var(--font-display);
  box-shadow: 0 0 12px var(--hero-glow);
}
.hero-command-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.hero-command-copy b,
.hero-command-copy small,
.hero-command-copy em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hero-command-copy b {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.hero-command-copy small {
  color: var(--ui-muted);
  font: 700 9px var(--font-mono);
}
.hero-command-copy em {
  color: var(--ui-faint);
  font-size: 10px;
  font-style: normal;
}
.hero-command-copy em i {
  margin-right: 5px;
  color: var(--hero-rarity);
  font-style: normal;
}
.hero-command-actions {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  padding: 5px 5px 5px 0;
}
.hero-command-ability {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid #344953;
  border-radius: 6px;
  background: #17242c;
  color: var(--ui-text);
  padding: 3px 7px 5px;
  cursor: pointer;
}
.hero-command-ability.ultimate {
  border-color: #62542f;
  background: #262115;
}
.hero-command-ability:hover:not(:disabled) {
  border-color: var(--hero-rarity);
  background: #20323c;
}
.hero-command-ability:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.hero-command-ability span {
  overflow: hidden;
  color: var(--ui-muted);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hero-command-ability b {
  font: 800 10px var(--font-mono);
  white-space: nowrap;
}
.hero-command-ability em {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 3px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: #27363d;
}
.hero-command-ability em i {
  display: block;
  height: 100%;
  background: var(--hero-rarity);
  transition: width 0.16s linear;
}
.hero-command-ability.effect-active {
  border-color: var(--hero-rarity);
}
.hero-command-ability.targeting {
  outline: 2px solid var(--hero-rarity);
  outline-offset: -2px;
}
.hero-target-prompt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline: auto;
  padding: 6px 9px;
  border: 1px solid var(--ui-accent);
  border-radius: 7px;
  background: rgba(9, 20, 27, 0.98);
  color: #eaf9fd;
  font: 800 10px var(--font-mono);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.hero-target-prompt button {
  border: 0;
  background: transparent;
  color: var(--ui-muted);
  font: 700 9px var(--font-mono);
  cursor: pointer;
}
.hero-rarity-hint {
  position: absolute;
  left: 8px;
  bottom: calc(100% + 6px);
  padding: 6px 8px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 6px;
  background: #111b22;
  color: var(--ui-text);
  font-size: 10px;
}
body.hero-targeting #gameCanvas {
  cursor: crosshair;
}
body.hero-targeting .tutorial-sector-targets {
  box-shadow: inset 0 0 0 2px rgba(105, 199, 227, 0.42);
}
.hero-command-card.active-ready {
  animation: hero-card-ready 0.8s ease 1;
}
.hero-command-card.ultimate-ready {
  animation: hero-card-ultimate-ready 0.8s ease 1;
}
.hero-command-card.ability-used {
  animation: hero-card-used 0.55s ease 1;
}
.hero-command-card.ultimate-used {
  animation: hero-card-ultimate-used 0.6s ease 1;
}
@keyframes hero-card-ready {
  50% {
    box-shadow:
      0 0 18px var(--hero-glow),
      inset 0 0 0 1px var(--hero-rarity);
  }
}
@keyframes hero-card-ultimate-ready {
  50% {
    box-shadow:
      0 0 25px var(--hero-rarity),
      inset 0 0 0 1px var(--hero-rarity);
  }
}
@keyframes hero-card-used {
  35% {
    background-color: var(--hero-glow);
  }
}
@keyframes hero-card-ultimate-used {
  30% {
    box-shadow:
      0 0 30px var(--hero-rarity),
      inset 0 0 18px var(--hero-glow);
  }
}

.ui-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  left: 0;
  top: 0;
  max-width: min(320px, calc(100vw - 24px));
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  padding: 7px var(--space-2);
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--radius-sm);
  background: #111b22;
  color: var(--ui-text);
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}
.ui-tooltip.open {
  visibility: visible;
  opacity: 1;
}
.toast-stack {
  z-index: var(--z-tooltip);
  top: calc(var(--hud-height) + var(--space-3));
}
.toast {
  border-color: var(--ui-line-strong);
  background: #111b22;
  padding: var(--space-3);
  font-size: 12px;
}
.toast b {
  font-size: 13px;
}
.toast span {
  font-size: 12px;
  line-height: 1.35;
}
.modal,
.story-layer,
.test-complete-screen {
  z-index: var(--z-modal);
}
.modal-card {
  border-color: var(--ui-line-strong);
  background: #0c151c;
}
.difficulty-grid button {
  border-color: var(--ui-line);
  background: var(--ui-surface);
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}
.difficulty-grid button:hover {
  border-color: var(--ui-accent);
  background: var(--ui-surface-hover);
  transform: none;
}

.guide-spotlight,
.guide-arrow-layer {
  display: none !important;
}
.tutorial-sector-targets {
  position: absolute;
  z-index: var(--z-marker);
  inset: 0;
  pointer-events: none;
}
.tutorial-sector-target {
  position: absolute;
  left: 1.2%;
  width: 15.3%;
  height: 6%;
  padding: 0;
  pointer-events: none;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: transparent;
}
.tutorial-sector-target.lane-a {
  top: 19.2%;
}
.tutorial-sector-target.lane-b {
  top: 42.7%;
}
.tutorial-sector-target.lane-c {
  top: 66.2%;
}
.tutorial-sector-target.tutorial-target-live {
  position: absolute !important;
  pointer-events: auto;
}
.tutorial-static-arrow {
  position: fixed;
  z-index: var(--z-tutorial);
  width: 48px;
  height: 18px;
  display: none;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(105, 199, 227, 0.72));
}
.tutorial-static-arrow.open {
  display: block;
}
.tutorial-static-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 8px;
  top: 8px;
  height: 3px;
  border-radius: 2px;
  background: var(--ui-accent);
}
.tutorial-static-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid var(--ui-accent);
}
.tutorial-static-arrow.from-right {
  transform: rotate(180deg);
}
.tutorial-objective-bar,
.training-guide {
  z-index: var(--z-tutorial);
}
.tutorial-objective-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--hud-height) + var(--space-2)) !important;
  bottom: auto !important;
  width: min(480px, calc(100vw - 24px)) !important;
  height: auto !important;
  max-height: 72px !important;
  max-width: none;
  min-height: 54px;
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--radius-md);
  background: #101a21;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  margin: 0 auto !important;
  transform: none !important;
}
.tutorial-objective-bar.open {
  display: flex;
  visibility: visible;
  opacity: 1;
  transform: none !important;
}
.tutorial-objective-bar > div {
  min-width: 0;
  flex: 1;
}
.tutorial-objective-bar span {
  color: var(--ui-accent);
  font-size: 10px;
  font-weight: 700;
}
.tutorial-objective-bar b {
  display: block;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  text-transform: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tutorial-objective-bar small {
  display: block;
  overflow: hidden;
  color: var(--ui-muted);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tutorial-objective-bar button {
  min-height: 34px;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-sm);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  padding: 6px var(--space-3);
  font-size: 12px;
  cursor: pointer;
}
.training-guide {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--hud-height) + 72px) !important;
  bottom: auto !important;
  width: min(320px, calc(100vw - 24px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 220px !important;
  margin: 0 auto !important;
  overflow: auto;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--radius-md);
  background: #101a21;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
  transform: none !important;
}
.training-guide.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none !important;
}
.training-guide > header {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--ui-line);
}
.training-guide > header span {
  font-size: 10px;
}
.training-guide > header b {
  font: 700 10px var(--font-mono);
}
.training-guide > header button {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--ui-muted);
  font-size: 16px;
  cursor: pointer;
}
.training-guide .guide-progress,
.training-guide .guide-context,
.training-guide footer {
  display: none;
}
.training-guide section {
  padding: var(--space-3);
}
.training-guide section .guide-eyebrow {
  color: var(--ui-success);
  font-size: 10px;
  font-weight: 700;
}
.training-guide section h2 {
  margin: var(--space-1) 0 0;
  font-size: 16px;
  line-height: 1.25;
  text-transform: none;
}
.training-guide section p {
  margin: var(--space-1) 0 0;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.4;
}
.tutorial-target-live {
  z-index: var(--z-tutorial) !important;
  outline: 3px solid var(--ui-accent) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 7px rgba(105, 199, 227, 0.16) !important;
}

.hub-screen .metric span,
.hub-report span,
.hub-tile small {
  font-size: 10px;
}
.hub-screen .metric b,
.hub-report b {
  font-size: 13px;
}
.hub-tile b {
  font-size: 14px;
}
.modal-sub,
.difficulty-grid small,
.action {
  font-size: 13px;
}
.modal-kicker {
  font-size: 11px;
}
.modal-title {
  font-size: 22px;
}

@media (min-width: 981px) {
  .hud-brand b {
    font-size: 16px;
  }
  .hud-brand small {
    font-size: 10px;
  }
  .hud-phase span,
  .hud-phase b {
    font-size: 14px;
  }
  .hud-stat span {
    font-size: 12px;
  }
  .hud-stat b {
    font-size: 15px;
  }
  .hud-stat small {
    font-size: 10px;
  }
  .ui2-battle-main .sector-tab small,
  .ui2-battle-main .mode-control small,
  .ui2-battle-main .mode-control b,
  .ui2-battle-main .reserve-readout small {
    font-size: 11px;
  }
  .mini-widget header span {
    font-size: 12px;
  }
  .mini-widget > b {
    font-size: 14px;
  }
  .mini-widget p {
    font-size: 12px;
  }
  .command-dock .dock-tools b {
    font-size: 14px;
  }
  .command-dock .dock-tools small {
    font-size: 11px;
  }
  .row-copy b {
    font-size: 15px;
  }
  .row-copy small {
    font-size: 13px;
  }
  .row-copy em {
    font-size: 12px;
  }
}

@media (max-width: 1366px) {
  :root {
    --hud-height: 54px;
    --dock-height: 68px;
    --panel-standard: 300px;
  }
  .battle-screen.ui2-shell {
    min-height: min(560px, 100dvh);
  }
  .tactical-hud {
    grid-template-columns: 164px 142px minmax(404px, 1fr) auto;
    gap: var(--space-2);
    padding-inline: var(--space-2);
  }
  .hud-brand small {
    display: none;
  }
  .hud-vitals {
    grid-template-columns: minmax(128px, 1.25fr) repeat(3, minmax(78px, 1fr));
    gap: var(--space-1);
  }
  .hud-stat {
    padding-inline: 6px;
  }
  .command-dock {
    grid-template-columns: minmax(0, 1fr) max-content;
    padding-inline: var(--space-2);
    gap: var(--space-2);
  }
  .command-dock .dock-tools {
    grid-template-columns: repeat(6, minmax(82px, 1fr));
    gap: var(--space-1);
  }
  .hero-command-bar {
    width: min(720px, 70%);
    min-height: 80px;
    bottom: 7px;
  }
  .hero-command-card {
    height: 66px;
    grid-template-columns: minmax(0, 1fr) 124px;
  }
  .hero-command-portrait {
    width: 44px;
    height: 52px;
  }
  .hero-command-identity {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .command-dock .dock-tools button {
    grid-template-columns: 26px minmax(0, 1fr) 14px;
    padding: 6px;
  }
  .command-dock .dock-tools span {
    width: 26px;
    height: 28px;
  }
  .command-dock .dock-tools b {
    font-size: 13px;
  }
  .command-dock .phase-actions {
    grid-template-columns: 132px 40px 40px 142px;
    gap: var(--space-2);
  }
  .command-dock .dock-secondary {
    width: 40px;
  }
  .command-dock .return-truce {
    width: 132px;
  }
  .command-dock .dock-primary {
    width: 142px;
    font-size: 13px;
  }
  .pinned-zone {
    width: 220px;
  }
  .object-inspector {
    width: 310px;
  }
  .ui2-battle-main.inspector-open .map-stage {
    right: 334px;
  }
}

@media (max-width: 980px) {
  :root {
    --hud-height: 52px;
    --dock-height: 66px;
    --panel-standard: 44vh;
  }
  .tactical-hud {
    grid-template-columns: 140px minmax(0, 1fr) auto;
  }
  .hud-brand {
    display: none;
  }
  .hud-phase {
    border: 0;
    padding: 0;
  }
  .hud-vitals {
    grid-template-columns: minmax(108px, 1.2fr) repeat(3, minmax(68px, 1fr));
  }
  .hud-stat span {
    font-size: 11px;
  }
  .hud-stat b {
    font-size: 13px;
  }
  .hud-stat small {
    display: none;
  }
  .hud-controls {
    grid-template-columns: repeat(4, 32px);
  }
  .hud-controls button {
    width: 32px;
    height: 34px;
  }
  .pinned-zone {
    left: var(--space-2);
    top: var(--space-2);
    width: 196px;
  }
  .mini-widget {
    max-height: 88px;
  }
  .object-inspector {
    width: 292px;
  }
  .ui2-battle-main.inspector-open .map-stage {
    right: 316px;
  }
  .command-dock {
    grid-template-columns: minmax(0, 1fr) max-content;
    padding-inline: var(--space-1);
    gap: var(--space-1);
  }
  .command-dock .dock-tools {
    grid-template-columns: repeat(6, minmax(72px, 1fr));
    gap: var(--space-1);
  }
  .hero-command-bar {
    width: min(650px, 72%);
    min-height: 66px;
    bottom: 5px;
  }
  .hero-command-slots {
    gap: 4px;
    padding: 4px;
  }
  .hero-command-card {
    height: 56px;
    grid-template-columns: minmax(0, 1fr) 104px;
  }
  .hero-command-portrait {
    width: 36px;
    height: 44px;
    font-size: 14px;
  }
  .hero-command-identity {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 5px;
    padding: 4px;
  }
  .hero-command-copy em {
    display: none;
  }
  .hero-command-actions {
    gap: 3px;
    padding: 3px 3px 3px 0;
  }
  .hero-command-ability {
    padding: 2px 5px 4px;
  }
  .hero-command-ability span {
    font-size: 8px;
  }
  .hero-command-ability b {
    font-size: 9px;
  }
  .command-dock .dock-tools button {
    height: 52px;
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 5px;
  }
  .command-dock .dock-tools small {
    display: none;
  }
  .command-dock .phase-actions {
    grid-template-columns: 118px 38px 38px 112px;
    gap: var(--space-1);
  }
  .command-dock .dock-secondary {
    width: 38px;
  }
  .command-dock .return-truce {
    width: 118px;
    padding-inline: 7px;
  }
  .command-dock .return-truce b {
    font-size: 11px;
  }
  .command-dock .dock-primary {
    width: 112px;
    font-size: 12px;
  }
  .command-panel .tab-pane.active {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 720px) {
  :root {
    --hud-height: 84px;
    --dock-height: calc(108px + env(safe-area-inset-bottom));
    --panel-compact: 30vh;
    --panel-standard: 52vh;
    --panel-expanded: 78vh;
  }
  .battle-screen.ui2-shell {
    min-height: min(520px, 100dvh);
  }
  .tactical-hud {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 32px 40px;
    gap: var(--space-1);
    padding: var(--space-1);
  }
  .hud-phase {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .hud-phase span {
    font-size: 11px;
  }
  .hud-phase b {
    font-size: 11px;
  }
  .hud-vitals {
    grid-column: 1/-1;
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    overflow: hidden;
  }
  .hud-stat {
    height: 38px;
    padding: 3px 4px;
  }
  .hud-stat span {
    font-size: 9px;
  }
  .hud-stat b {
    font-size: 11px;
  }
  .hud-stat.threat small {
    display: none;
  }
  .hud-controls {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(3, 30px);
    gap: 2px;
  }
  .hud-controls button {
    width: 30px;
    height: 34px;
  }
  .hud-controls #saveBtn {
    display: none;
  }
  .ui2-battle-main .map-stage {
    inset: var(--space-1);
  }
  .ui2-battle-main.inspector-open .map-stage {
    right: var(--space-1);
  }
  .ui2-battle-main .canvas-wrap {
    border-radius: var(--radius-sm);
  }
  .map-focus {
    display: none;
  }
  .pinned-zone {
    left: var(--space-1);
    top: var(--space-1);
    width: 152px;
    gap: var(--space-1);
  }
  .mini-widget {
    max-height: 64px;
    padding: 6px var(--space-2);
  }
  .mini-widget p,
  .mini-widget > small,
  .mini-widget .widget-action {
    display: none;
  }
  .mini-widget > b {
    font-size: 11px;
  }
  .mini-widget header span {
    font-size: 9px;
  }
  .object-inspector {
    left: var(--space-1);
    right: var(--space-1);
    top: auto;
    bottom: 0;
    width: auto;
    height: min(58vh, 410px);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .command-panel.context-panel {
    left: var(--space-1);
    right: var(--space-1);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .command-panel .context-head {
    min-height: 58px;
    padding: var(--space-2) var(--space-3);
  }
  .command-panel .context-head h2 {
    font-size: 17px;
  }
  .command-panel .context-head p {
    display: none;
  }
  .panel-tools button {
    width: 30px;
    height: 30px;
  }
  .command-panel .tab-pane {
    padding: var(--space-2);
  }
  .command-panel .tab-pane.active {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .buy-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: var(--space-2);
    gap: var(--space-2);
  }
  .unit-icon {
    width: 42px;
    height: 42px;
  }
  .row-copy b {
    font-size: 13px;
  }
  .row-copy small {
    font-size: 11px;
  }

  .command-dock {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 54px 38px;
    align-content: center;
    padding: var(--space-1) var(--space-1)
      max(var(--space-1), env(safe-area-inset-bottom));
    gap: var(--space-1);
  }
  .command-dock .dock-tools {
    overflow: visible;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
  }
  .hero-command-bar {
    width: calc(100% - 8px);
    min-height: 38px;
    bottom: 2px;
    border-radius: 5px;
  }
  .hero-command-slots {
    gap: 2px;
    padding: 2px;
  }
  .hero-command-card {
    height: 34px;
    grid-template-columns: minmax(0, 1fr) 82px;
    border-radius: 4px;
  }
  .hero-command-identity {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 3px;
    padding: 2px;
  }
  .hero-command-portrait {
    width: 26px;
    height: 28px;
    border-radius: 4px;
    font-size: 10px;
  }
  .hero-command-copy b {
    font-family: var(--font-ui);
    font-size: 9px;
  }
  .hero-command-copy small {
    font-size: 7px;
  }
  .hero-command-actions {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding: 2px 2px 2px 0;
    gap: 2px;
  }
  .hero-command-ability {
    display: block;
    min-height: 28px;
    padding: 2px;
    font-size: 7px;
  }
  .hero-command-ability span {
    display: none;
  }
  .hero-command-ability b {
    display: block;
    font-size: 7px;
    text-align: center;
  }
  .hero-command-ability em {
    left: 3px;
    right: 3px;
    bottom: 2px;
  }
  .hero-command-empty {
    padding: 2px;
  }
  .hero-command-empty span {
    display: none;
  }
  .hero-command-empty b {
    font-size: 8px;
  }
  .hero-target-prompt {
    bottom: calc(100% + 3px);
    padding: 4px 6px;
    font-size: 8px;
  }
  .hero-target-prompt button {
    font-size: 7px;
  }
  .command-dock .dock-tools button {
    height: 54px;
    grid-template-columns: 1fr;
    grid-template-rows: 26px auto;
    place-items: center;
    padding: 2px;
    text-align: center;
  }
  .command-dock .dock-tools span {
    width: 26px;
    height: 26px;
  }
  .command-dock .dock-tools b {
    width: 100%;
    max-width: none;
    font-size: 9px;
  }
  .command-dock .phase-actions {
    min-width: 0;
    grid-template-columns: 112px 34px 34px minmax(0, 1fr);
    gap: var(--space-1);
  }
  .command-dock .phase-actions button {
    height: 38px;
  }
  .command-dock .dock-secondary {
    width: 34px;
  }
  .command-dock .return-truce {
    width: 112px;
    grid-template-columns: 20px minmax(0, 1fr);
    padding: 3px 6px;
  }
  .command-dock .return-truce b {
    font-size: 10px;
  }
  .command-dock .dock-primary {
    width: auto;
    padding: 4px;
    font-size: 11px;
    line-height: 1.15;
  }
  .ui2-battle-main .lane-picker {
    width: calc(100% - 8px);
    bottom: var(--space-1);
    gap: 2px;
  }
  .ui2-battle-main .deployment-mode,
  .ui2-battle-main .sector-tabs {
    gap: 2px;
  }
  .ui2-battle-main .mode-control,
  .ui2-battle-main .sector-tab,
  .ui2-battle-main .reserve-readout {
    min-width: 50px;
    height: 38px;
    padding: 4px;
  }
  .ui2-battle-main .mode-control b,
  .ui2-battle-main .mode-control small,
  .ui2-battle-main .sector-tab small,
  .ui2-battle-main .reserve-readout small {
    display: none;
  }
  .ui2-battle-main .sector-tab > span,
  .ui2-battle-main .sector-tab > b {
    font-size: 11px;
  }
  .tutorial-objective-bar {
    top: calc(var(--hud-height) + var(--space-1)) !important;
    width: calc(100vw - 16px) !important;
  }
  .tutorial-objective-bar small {
    display: none;
  }
  .training-guide {
    top: calc(var(--hud-height) + 66px) !important;
    max-height: 180px !important;
    width: min(286px, calc(100vw - 16px)) !important;
  }
}

@media (min-width: 1700px) {
  .tactical-hud {
    padding-inline: var(--space-5);
  }
  .command-dock {
    padding-inline: var(--space-5);
  }
  .command-dock .dock-tools {
    max-width: 1160px;
  }
  .pinned-zone {
    left: var(--space-5);
    top: var(--space-4);
    width: 248px;
  }
  .object-inspector {
    right: var(--space-4);
    top: var(--space-4);
    bottom: var(--space-4);
    width: 340px;
  }
  .ui2-battle-main.inspector-open .map-stage {
    right: 372px;
  }
  .command-panel.context-panel {
    left: var(--space-5);
    right: var(--space-5);
  }
}

.ui2-battle-main.panel-open .map-stage {
  right: 408px;
}
.ui2-battle-main .lane-picker {
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  width: auto;
  max-width: 760px;
  margin-inline: auto;
  align-items: center;
  gap: var(--space-2);
}
.ui2-battle-main.panel-open .lane-picker {
  right: var(--space-3);
}
.ui2-battle-main .sector-tabs {
  display: contents;
}
.ui2-battle-main .lane-compact {
  flex: 1 1 96px;
  min-width: 72px;
  max-width: 132px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  text-align: left;
}
.ui2-battle-main .lane-compact span {
  font: 800 14px var(--font-mono);
}
.ui2-battle-main .lane-compact b {
  display: block !important;
  font: 800 12px var(--font-mono);
}
.ui2-battle-main .mode-control.lane-compact span {
  grid-row: auto;
}
.ui2-battle-main .sector-tab.lane-compact em {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 5px;
  margin: 0;
}
.ui2-battle-main .sector-tab.lane-compact {
  position: relative;
}
.sector-info-button {
  pointer-events: auto;
  width: 38px;
  height: 44px;
  flex: 0 0 38px;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-sm);
  background: rgba(9, 17, 23, 0.94);
  color: var(--ui-accent);
  font: 800 14px var(--font-mono);
  cursor: pointer;
}
.sector-info-button:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.command-panel.context-panel,
.command-panel.context-panel[data-size="compact"],
.command-panel.context-panel[data-size="standard"],
.command-panel.context-panel[data-size="expanded"] {
  left: auto;
  right: var(--space-2);
  top: var(--space-2);
  bottom: var(--space-2);
  width: 388px;
  height: auto;
  grid-template-rows: 52px auto minmax(0, 1fr);
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--radius-md);
  box-shadow: -14px 0 32px rgba(0, 0, 0, 0.3);
  transition:
    opacity 0.14s ease,
    visibility 0s linear 0.14s;
}
.command-panel.context-panel.open {
  transition-delay: 0s;
}
.command-panel .context-head {
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
}
.command-panel .context-head span,
.command-panel .context-head p {
  display: none;
}
.command-panel .context-head h2 {
  margin: 0;
  font-size: 17px;
}
.command-panel .tab-pane {
  padding: var(--space-2);
}
.command-panel .tab-pane.active {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.command-panel .tab-pane.active > .section-title {
  margin: 2px 0;
  color: var(--ui-faint);
  font-size: 10px;
}
.command-panel .buy-row {
  min-height: 64px;
  margin: 0;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  padding: var(--space-2);
  gap: var(--space-2);
}
.command-panel .unit-icon {
  width: 42px;
  height: 42px;
}
.command-panel .row-copy {
  min-width: 0;
  align-self: center;
  overflow: hidden;
}
.command-panel .row-copy b {
  overflow: hidden;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.command-panel .row-copy small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.command-panel .row-copy em {
  display: none;
}
.command-panel .price {
  font-size: 14px;
}
.command-panel .price small {
  font-size: 10px;
}
.command-panel .panel-card {
  padding: var(--space-2);
}
.command-panel .panel-card p {
  display: none;
}
.compact-state {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--ui-surface-raised);
  color: var(--ui-muted);
  font: 700 11px var(--font-mono);
}
.reserve-upgrade {
  justify-content: space-between;
  gap: var(--space-2);
}
.reserve-upgrade button {
  min-height: 30px;
  padding: 4px var(--space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-sm);
  background: var(--ui-accent-soft);
  color: var(--ui-text);
  font: 800 11px var(--font-mono);
}
.redeploy-card header {
  margin-bottom: var(--space-2);
}
.redeploy-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}
.redeploy-list button {
  min-height: 40px;
}
.support-explainer {
  display: none !important;
}
.toast-stack {
  width: min(286px, calc(100vw - 24px));
}
body.command-panel-open .toast-stack {
  right: 408px;
}

@media (max-width: 1366px) {
  .ui2-battle-main.panel-open .map-stage {
    right: 364px;
  }
  .command-panel.context-panel,
  .command-panel.context-panel[data-size="compact"],
  .command-panel.context-panel[data-size="standard"],
  .command-panel.context-panel[data-size="expanded"] {
    width: 344px;
  }
  body.command-panel-open .toast-stack {
    right: 364px;
  }
}

@media (max-width: 980px) {
  .ui2-battle-main.panel-open .map-stage {
    right: 336px;
  }
  .command-panel.context-panel,
  .command-panel.context-panel[data-size="compact"],
  .command-panel.context-panel[data-size="standard"],
  .command-panel.context-panel[data-size="expanded"] {
    width: 316px;
  }
  body.command-panel-open .toast-stack {
    right: 336px;
  }
  .ui2-battle-main .lane-compact {
    min-width: 58px;
    padding-inline: var(--space-2);
  }
}

@media (max-width: 720px) {
  .ui2-battle-main.panel-open .map-stage {
    right: var(--space-1);
  }
  .ui2-battle-main.panel-open .lane-picker {
    right: var(--space-1);
  }
  .command-panel.context-panel,
  .command-panel.context-panel[data-size="compact"],
  .command-panel.context-panel[data-size="standard"],
  .command-panel.context-panel[data-size="expanded"] {
    left: auto;
    right: var(--space-1);
    top: var(--space-1);
    bottom: var(--space-1);
    width: min(340px, calc(100vw - 8px));
    border-radius: var(--radius-md);
  }
  body.command-panel-open .toast-stack {
    display: none;
  }
  .ui2-battle-main .lane-picker {
    left: var(--space-1);
    right: var(--space-1);
    max-width: none;
  }
  .ui2-battle-main .lane-compact {
    min-width: 46px;
    height: 38px;
    padding: 4px 6px;
  }
  .sector-info-button {
    width: 34px;
    height: 38px;
    flex-basis: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui2-battle-main .map-stage,
  .command-panel.context-panel,
  .object-inspector,
  .tutorial-target-live {
    transition: none !important;
    animation: none !important;
  }
}

#gameCanvas {
  cursor: default;
  touch-action: none;
}
body.unit-dragging #gameCanvas {
  cursor: grabbing;
}
.maneuver-hud {
  position: absolute;
  z-index: 13;
  left: 12px;
  bottom: 12px;
  width: 142px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 8px;
  pointer-events: none;
  border: 1px solid rgba(91, 190, 218, 0.46);
  border-radius: 8px;
  background: rgba(5, 15, 21, 0.86);
  padding: 7px 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.maneuver-hud span {
  color: #78d9f3;
  font: 900 7px var(--font-mono);
  letter-spacing: 0.12em;
}
.maneuver-hud b {
  color: #effbff;
  font: 1000 11px var(--font-mono);
}
.maneuver-hud small {
  grid-column: 1/-1;
  color: #8098a4;
  font: 800 6px var(--font-mono);
  letter-spacing: 0.06em;
}
.maneuver-hud.cooldown {
  border-color: rgba(232, 191, 91, 0.52);
}
.maneuver-hud.cooldown span,
.maneuver-hud.cooldown b {
  color: #e8c665;
}
.maneuver-hud.blocked {
  opacity: 0.72;
}
.tutorial-target-live {
  outline: 3px solid #87e3fa !important;
  outline-offset: 4px;
  filter: drop-shadow(0 0 8px rgba(103, 210, 239, 0.7));
  animation: none !important;
}
.tutorial-static-arrow {
  animation: none !important;
}

.force-summary-targets {
  position: absolute;
  z-index: var(--z-marker);
  inset: 0;
  pointer-events: none;
}
.force-summary-targets button {
  position: absolute;
  left: 1.186%;
  width: 15.254%;
  height: 4.559%;
  pointer-events: auto;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.force-summary-targets button:nth-child(1) {
  top: 19.265%;
}
.force-summary-targets button:nth-child(2) {
  top: 42.794%;
}
.force-summary-targets button:nth-child(3) {
  top: 66.324%;
}
.force-summary-targets button:hover,
.force-summary-targets button:focus-visible {
  outline: 2px solid rgba(126, 222, 250, 0.85);
  outline-offset: 2px;
  background: rgba(87, 197, 230, 0.1);
}
@media (max-width: 720px) {
  .maneuver-hud {
    left: 6px;
    bottom: 6px;
    width: 116px;
    padding: 5px 7px;
  }
  .maneuver-hud small {
    font-size: 5px;
  }
}