/* Tactical interface */
    #hud {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 3
    }

    #hud button,
    #hud canvas,
    #hud .action,
    #hud .queue-item,
    #objectives {
      pointer-events: auto
    }

    #topbar {
      position: absolute;
      inset: 0 0 auto;
      height: var(--topbar-height);
      background: linear-gradient(115deg, #071520f5, #102a39ef 50%, #05121ef5);
      border-bottom: 1px solid #58ddf0a0;
      box-shadow: inset 0 -1px #a4f7ff25, 0 2px 12px #00cfff20;
      display: flex;
      align-items: center;
      padding: 0 22px;
      gap: 27px;
      pointer-events: auto
    }

    .brandmark {
      color: var(--gold);
      font-size: 31px;
      padding: 0
    }

    .top-spacer {
      flex: 1
    }

    #battleLabel {
      font-size: 12px;
      letter-spacing: 1px;
      text-transform: uppercase
    }

    #battleLabel small {
      display: block;
      font: 9px var(--mono);
      letter-spacing: 1.5px;
      color: var(--muted);
      margin-top: 4px
    }

    .resource {
      display: flex;
      gap: 10px;
      align-items: center;
      min-width: 76px
    }

    .resource strong {
      font: 19px var(--mono);
      letter-spacing: -.6px
    }

    .resource small {
      display: block;
      font: 8px var(--mono);
      letter-spacing: 1.5px;
      color: var(--muted);
      margin-top: 3px
    }

    .resicon {
      font-size: 24px;
      color: #b9c8d7
    }

    .resicon.alloy {
      color: var(--gold)
    }

    .resicon.aether {
      color: var(--teal)
    }

    .resicon.energy {
      color: #b8a2ea;
      font-size: 28px
    }

    .clock {
      border-left: 1px solid #58ddf050;
      padding-left: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      align-self: stretch
    }

    .clock strong {
      font: 14px var(--mono);
      color: #c5d6df
    }

    #objectives {
      position: absolute;
      left: 22px;
      top: calc(var(--topbar-height) + 18px);
      width: 267px;
      padding: 12px 16px;
      border-left: 2px solid #a4f7ff
    }

    #objectives .eyebrow {
      font-size: 9px;
      letter-spacing: 1.5px;
      margin-bottom: 8px;
      padding-bottom: 7px;
      border-bottom: 1px solid #74dced45
    }

    #objectiveRows {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .objective-row {
      font-size: 12px;
      color: #d3dfe3;
      display: flex;
      gap: 9px;
      align-items: flex-start
    }

    .objective-row .check {
      color: var(--gold)
    }

    .objective-row.complete {
      color: var(--teal)
    }

    .objective-row .progress {
      height: 3px;
      background: #8398ad28;
      margin-top: 8px;
      width: 207px
    }

    .objective-row .progress i {
      display: block;
      height: 3px;
      background: var(--gold);
      transition: width .4s
    }

    .objective-sub {
      font: 10px var(--mono);
      color: var(--muted);
      margin-top: 4px
    }

    #waveBanner {
      position: absolute;
      top: 82px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      color: #f4b099;
      background: #331d20de;
      border: 1px solid #d5856640;
      padding: 8px 22px;
      font: 10px var(--mono);
      letter-spacing: 1.5px
    }

    #alerts {
      position: absolute;
      right: 24px;
      top: 90px;
      text-align: right;
      font: 11px var(--mono)
    }

    .alert {
      padding: 8px 13px;
      border-right: 2px solid var(--gold);
      background: #0c1523cf;
      margin-bottom: 5px;
      animation: alertin .2s ease-out
    }

    .alert.danger {
      border-color: var(--red);
      color: #f5c4bb
    }

    @keyframes alertin {
      from {
        transform: translateX(20px);
        opacity: 0
      }
    }

    #radio {
      position: absolute;
      bottom: calc(var(--deck-height) + var(--hud-inset) + 12px);
      left: 50%;
      transform: translateX(-50%);
      max-width: 640px;
      width: calc(100% - 580px);
      min-width: 360px;
      display: flex;
      gap: 16px;
      padding: 16px 20px;
      border-top: 1px solid #dbae6a66;
      pointer-events: auto
    }

    .radio-avatar {
      flex: 0 0 43px;
      height: 46px;
      border: 1px solid #8cb9b95c;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--teal);
      font: 16px var(--mono);
      position: relative;
      background: repeating-linear-gradient(0deg, #76c0d115 0px, #76c0d100 2px, #76c0d115 3px)
    }

    .radio-avatar span {
      position: absolute;
      bottom: 3px;
      left: 4px;
      width: 30px;
      height: 3px;
      background: linear-gradient(90deg, #74e5d3, #74e5d300);
      animation: pulse 1.1s infinite
    }

    #radioName {
      font-size: 9px;
      letter-spacing: 1px
    }

    #radioText {
      font-size: 12px;
      margin: 5px 0 0;
      color: #d1dde1;
      line-height: 1.6
    }

    #radioClose {
      position: absolute;
      right: 4px;
      top: 2px;
      font-size: 16px
    }

    #cameraTools {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 4px;
      height: var(--tools-height);
      padding: 3px
    }

    #cameraTools button {
      min-width: 0;
      padding: 0;
      font-size: 22px;
      color: #e0f6ff
    }

    #cameraTools button:hover,
    #speedBtn:hover {
      color: var(--gold);
      border-color: var(--gold)
    }

    #speedBtn {
      min-width: 44px;
      min-height: 28px;
      padding: 2px 6px;
      font: 11px var(--mono);
      color: #82e9f7;
      border-radius: 3px
    }

    #speedBtn:hover { background: #50d6ed20 }

    #attackMoveBtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0
    }

    #cameraTools #attackMoveBtn[aria-pressed="true"] {
      color: #0b1422;
      background: var(--gold);
      border-color: var(--gold)
    }

    #modeIndicator {
      display: flex;
      align-items: center;
      gap: 12px;
      width: max-content;
      max-width: calc(100% - 24px);
      z-index: 1;
      position: absolute;
      top: 47%;
      left: 50%;
      transform: translateX(-50%);
      background: #0a1724dc;
      border: 1px solid var(--gold);
      color: var(--gold);
      padding: 8px 18px;
      font: 11px var(--mono);
      letter-spacing: 1px;
      pointer-events: none
    }

    #modeIndicator button {
      pointer-events: auto;
      flex-shrink: 0;
      min-height: 44px;
      min-width: 88px;
      padding: 8px 12px
    }

    #commandDeck {
      position: absolute;
      left: var(--hud-inset);
      right: var(--hud-inset);
      bottom: var(--hud-inset);
      height: var(--deck-height);
      display: grid;
      grid-template-columns: var(--side-width) minmax(0, 1fr) var(--side-width);
      grid-template-rows: minmax(0, 1fr);
      align-items: end;
      gap: var(--hud-gap);
      pointer-events: none
    }

    #commandDeck section {
      min-width: 0;
      min-height: 0
    }

    #commandCenter {
      height: var(--center-height);
      display: grid;
      grid-template-rows: var(--tools-height) var(--ability-height);
      gap: var(--hud-gap)
    }

    #actionPanel {
      height: 100%;
      padding: 5px;
      pointer-events: auto;
      overflow-y: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      scrollbar-width: thin
    }

    .menu-back {
      position: sticky;
      top: 0;
      z-index: 1;
      width: 100%;
      min-height: 32px;
      margin-bottom: 4px;
      text-align: left;
      padding: 4px;
      font-size: 10px;
      background: #152333;
      color: var(--gold)
    }

    .building-status {
      margin: 8px 2px;
      font: 10px/1.5 var(--mono);
      color: var(--muted)
    }

    #abilityBar {
      height: var(--ability-height);
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 4px;
      padding: 4px;
      pointer-events: auto
    }

    #abilityBar .action { min-height: 0; height: 100% }
    #abilityBar .action span { font-size: clamp(8px, 1.8vw, 11px); line-height: 1.1 }
    #abilityBar .action { padding-top: 12px }
    .root-grid .action { min-height: 0; padding: 3px 1px }
    .root-grid .action span { font-size: clamp(7px, 1.8vw, 11px); white-space: nowrap }
    .root-grid { height: calc(var(--deck-height) - 12px); grid-template-rows: repeat(2, minmax(0, 1fr)) }
    #actionPanel:has(.menu-back) { height: min(340px, calc(100dvh - var(--topbar-height) - 90px)) }
    #actionPanel .action-grid:not(.root-grid) { grid-template-columns: 1fr }
    #hud button { touch-action: manipulation }

    .minimap-panel {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      height: 100%;
      padding: 5px;
      pointer-events: auto
    }

    #minimap {
      display: block;
      width: min(100%, calc(var(--deck-height) - 12px));
      height: auto;
      aspect-ratio: 1;
      background: #071019;
      cursor: crosshair
    }

    .action-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px
    }

    .action {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 70px;
      min-width: 0;
      border: 1px solid #42cde88c;
      background: linear-gradient(145deg, #153344e8, #051421f5);
      box-shadow: inset 0 1px #c9faff25, inset 0 -6px 14px #03101c55;
      border-radius: 5px 2px;
      padding: 5px 3px;
      color: #ddecf4
    }

    .action:hover {
      border-color: #dbae6a99;
      background: #33505c66
    }

    .action.disabled {
      opacity: .4
    }

    .action.active {
      border-color: var(--gold);
      background: #ad864b22
    }

    .action svg {
      width: 25px;
      height: 25px;
      stroke-width: 1.5
    }

    .action span {
      font-size: 10px;
      line-height: 1.2;
      margin-top: 4px;
      max-width: 100%;
      overflow-wrap: anywhere
    }

    .action small {
      font: 8px var(--mono);
      color: var(--gold);
      position: absolute;
      right: 3px;
      top: 3px
    }

    .action .cost {
      font: 8px var(--mono);
      color: var(--muted);
      margin-top: 2px
    }

    /* Model portraits replace only the icon, preserving its layout space and button size. */
    .model-action { overflow: hidden }
    .model-action .model-space { width: 25px; height: 25px }
    .model-action .action-model {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 45%;
      pointer-events: none
    }
    .model-action::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 22%, #03101c55 45%, #03101ce8 100%);
      pointer-events: none
    }
    .model-action span { position: relative; z-index: 1; text-shadow: 0 1px 3px #000 }
    .model-action small { z-index: 1; background: #03101ce8 }

    #productionQueue {
      position: absolute;
      left: 6px;
      bottom: calc(var(--deck-height) + var(--hud-inset) + 8px);
      max-height: max(54px, calc(100dvh - var(--deck-height) - 230px));
      display: flex;
      flex-direction: column;
      gap: 5px;
      overflow-y: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      scrollbar-width: thin;
      pointer-events: auto
    }

    .queue-item {
      width: 54px;
      height: 54px;
      flex-shrink: 0;
      border: 1px solid #537282aa;
      position: relative;
      background: #122737;
      color: var(--ink);
      overflow: hidden
    }

    .queue-item::after {
      content: '';
      position: absolute;
      inset: 0;
      background: conic-gradient(transparent var(--progress, 0deg), #eaf8ff66 0);
      pointer-events: none
    }

    .queue-item svg { width: 32px; height: 32px }
    .queue-item.waiting svg { opacity: .5 }

    .queue-count, .queue-time {
      position: absolute;
      z-index: 1;
      padding: 1px 3px;
      background: #071019e6;
      font: 10px var(--mono)
    }

    .queue-count { top: 1px; right: 1px; color: var(--gold) }
    .queue-time { bottom: 1px; left: 1px }

    #toast {
      position: fixed;
      bottom: calc(var(--deck-height) + var(--hud-inset) + 16px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 40;
      pointer-events: none;
      padding: 9px 19px;
      border: 1px solid #b5945355;
      background: #111e2df5;
      color: #edd0a8;
      font: 11px var(--mono);
      opacity: 0;
      transition: opacity .2s
    }

    #toast.show {
      opacity: 1
    }

    /* Cheap CSS lighting: no images or additional WebGL passes. */
    #objectives,
    .minimap-panel,
    #actionPanel,
    #cameraTools,
    #abilityBar {
      background: linear-gradient(135deg, #102d3df5, #05131ff5 65%);
      border: 1px solid #4edcf0b0;
      border-radius: 9px 3px;
      box-shadow: inset 0 1px #d8fcff40, inset 0 0 12px #21c5ed10,
        0 0 7px #00cfff30, 0 3px 12px #0009
    }

    #cameraTools button,
    #pauseBtn {
      border: 1px solid #47cfe9b0;
      border-radius: 5px 2px;
      background: linear-gradient(150deg, #16384a, #061725);
      box-shadow: inset 0 1px #d8fcff30
    }

    #hud .action:hover,
    #cameraTools button:hover { border-color: #b5f7ff; box-shadow: inset 0 0 12px #49ddff25 }
    #hud .action.active { border-color: var(--gold); background: #775c2f80 }

    @media(max-width:1150px) {
      #topbar {
        gap: 15px;
        padding: 0 15px
      }

      .resource {
        min-width: 65px;
        gap: 7px
      }

      .resource strong {
        font-size: 16px
      }

      .resource .resicon {
        font-size: 20px
      }

      #battleLabel {
        max-width: 200px;
        font-size: 10px
      }

      #radio {
        width: calc(100% - 440px);
        min-width: 340px;
        left: 55%
      }

      .power { min-width: 40px }

      .armory-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:850px) {
      :root { --topbar-height: 55px }

      #topbar {
        gap: 10px
      }

      #battleLabel {
        max-width: 165px
      }

      .resource strong {
        font-size: 14px
      }

      .resource small {
        font-size: 7px
      }

      .clock {
        padding-left: 10px
      }

      .resource {
        min-width: 55px
      }

      .brandmark {
        font-size: 24px
      }

      #objectives {
        top: 70px;
        left: 12px;
        width: 224px;
        padding: 12px
      }

      #objectives .progress {
        width: 178px
      }

      .objective-row {
        font-size: 11px
      }

      #radio {
        bottom: calc(var(--deck-height) + var(--hud-inset) + 16px);
        width: calc(100% - 80px);
        min-width: 0;
        left: calc(50% + 30px);
        padding: 12px 16px
      }

      #radioText {
        font-size: 11px
      }

      .radio-avatar {
        display: none
      }

      #cameraTools { gap: 2px }
      #cameraTools button { font-size: 19px }

      #waveBanner {
        top: 70px;
        left: auto;
        right: 12px;
        transform: none;
        font-size: 8px;
        padding: 8px
      }

      .subscreen {
        padding: 22px
      }

      .sub-header {
        margin-bottom: 16px
      }

      .sub-header h1 {
        font-size: 30px
      }

      .sub-header p {
        font-size: 11px
      }

      .faction-options {
        gap: 7px
      }

      .faction-option {
        padding: 15px 9px
      }

      .modal-card {
        padding: 25px
      }

      .help-grid {
        gap: 6px 20px
      }

      .sub-header .secondary {
        font-size: 9px;
        padding: 10px
      }

      .armory-grid {
        gap: 10px
      }

    }

    @media(max-width:600px) {
      #battleLabel {
        display: none
      }

      #topbar {
        display: grid;
        grid-template-columns: 22px repeat(3, minmax(0, 1fr)) 30px 48px 36px;
        gap: 4px;
        padding: 0 8px
      }
      .top-spacer { display: none }
      .resource { min-width: 0; gap: 3px }
      .resource strong { font-size: 12px; white-space: nowrap }
      .resource small { font-size: 6px; letter-spacing: .6px }
      .resource .resicon { font-size: 15px }
      .power .resicon { display: none }
      .clock { padding-left: 0 }
      .clock strong { font-size: 11px }
      #pauseBtn { width: 36px; height: 40px; padding: 0 }
      .brandmark { font-size: 23px; padding: 0 }

      .sub-header {
        gap: 15px
      }

      .sub-header h1 {
        font-size: 24px
      }

      .sub-header .eyebrow {
        font-size: 8px
      }

      .sub-header .secondary {
        padding: 8px
      }

      .sub-header p {
        display: none
      }

      .launch-row {
        margin-top: 12px
      }

      .primary {
        padding: 12px 20px;
        font-size: 10px
      }

      .armory-grid {
        grid-template-columns: 1fr
      }

      .help-grid {
        grid-template-columns: 1fr
      }

      .faction-options {
        grid-template-columns: 1fr
      }

      .faction-option {
        display: grid;
        grid-template-columns: 40px 1fr;
        align-items: center;
        text-align: left;
        padding: 8px 12px
      }

      .faction-option .sigil {
        grid-row: span 2;
        font-size: 28px
      }

      .faction-option strong {
        margin: 0
      }

      .faction-option small {
        font-size: 10px
      }

      #objectives {
        width: 210px;
        padding: 9px 11px
      }

      .objective-row {
        font-size: 10px
      }

      #objectives .progress {
        width: 151px
      }

      #waveBanner {
        font-size: 7px;
        padding: 6px;
        max-width: 140px
      }

      .modal-card h1 {
        font-size: 30px
      }

      .settings-row {
        gap: 10px
      }

      .settings-row label {
        font-size: 11px
      }

      .settings-row label small {
        font-size: 10px
      }

      .settings-row select {
        max-width: 150px;
        font-size: 11px
      }

      .result-stats strong {
        font-size: 23px
      }

      .result-stats span {
        font-size: 8px
      }
    }

    /* Keep every control available on unusually narrow screens. */
    @media(max-width:360px) {
      :root { --side-width: 82px; --deck-height: 206px; --tools-height: 84px; --ability-height: 112px }
      #cameraTools { grid-template-columns: repeat(3, minmax(0, 1fr)) }
      #abilityBar { grid-template-columns: repeat(2, minmax(0, 1fr)) }
      .resource .resicon { display: none }
    }

    @media(max-height:500px) and (min-width:601px) {
      :root { --deck-height: 120px; --side-width: 140px; --ability-height: 60px; --tools-height: 40px }
      #radio { bottom: 140px; padding: 8px 12px }
      #radioText { line-height: 1.3 }
    }