:root {
      color-scheme: dark;
      --bg: #0a0e10;
      --panel: #12191d;
      --panel-2: #182125;
      --line: rgba(223, 232, 235, .18);
      --line-strong: rgba(223, 232, 235, .34);
      --text: #e8eef0;
      --muted: #a1adb4;
      --soft: #718087;
      --blue: #7eb8ff;
      --green: #83c983;
      --amber: #e0b45d;
      --red: #e06d65;
      --armor: #d8c481;
      --inf: #a8d58e;
      --rec: #82c6ff;
      --air: #c0b0f2;
      --aa: #7fd8c4;
      --shadow: 0 20px 54px rgba(0,0,0,.34);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    * { box-sizing: border-box; }
    html,
    body {
      height: 100%;
      overflow: hidden;
    }
    body {
      margin: 0;
      background:
        linear-gradient(135deg, rgba(126,184,255,.12), transparent 28%),
        radial-gradient(circle at 78% 10%, rgba(131,201,131,.10), transparent 30%),
        linear-gradient(180deg, #10171a 0%, #0a0e10 55%, #070a0c 100%);
      color: var(--text);
    }
    h1, h2, h3, h4, p { margin: 0; }
    button, select, textarea {
      font: inherit;
      color: var(--text);
    }
    button {
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 9px 12px;
      background: rgba(255,255,255,.07);
      cursor: pointer;
    }
    button:hover, button:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
      background: rgba(255,255,255,.13);
    }
    button.primary {
      background: #2d69ad;
      border-color: rgba(126,184,255,.58);
      font-weight: 800;
    }
    button.nav-enter-battle {
      border-color: rgba(131,201,131,.58);
      background: rgba(131,201,131,.16);
      color: #d9f2d9;
      font-weight: 800;
    }
    button.warning { border-color: rgba(224,180,93,.55); background: rgba(224,180,93,.15); }
    button.ghost { background: transparent; color: var(--muted); }
    button.active { border-color: var(--blue); background: rgba(126,184,255,.18); color: #fff; }
    button[disabled] { opacity: .5; cursor: not-allowed; }
    .icon-button {
      width: 44px;
      min-width: 44px;
      min-height: 44px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      line-height: 1;
      font-weight: 900;
    }
    .icon-button.compact {
      width: 44px;
      min-width: 44px;
      min-height: 44px;
      font-size: .9rem;
    }
    .icon-button svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      pointer-events: none;
    }
    textarea {
      width: 100%;
      min-height: 160px;
      resize: vertical;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 10px;
      background: rgba(3, 6, 8, .86);
      color: var(--text);
      line-height: 1.4;
    }
    .app {
      height: 100dvh;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
    }
    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 10px 14px;
      background: rgba(7, 10, 12, .92);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(12px);
    }
    .title h1 { font-size: 1rem; line-height: 1.15; color: #fff; }
    .state-nav { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
    main { min-height: 0; overflow: hidden; }
    .screen { display: none; height: 100%; min-height: 0; overflow: hidden; }
    .screen.active { display: block; }
    .plan {
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(310px, .9fr) minmax(450px, 1.1fr);
      gap: 14px;
      padding: 14px;
    }
    .panel, .roster, .map-shell, .side-panel, .report-card, .banner {
      background: linear-gradient(180deg, rgba(24,33,37,.96), rgba(13,18,21,.9));
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }
    .panel, .roster, .side-panel, .report-card, .banner { padding: 14px; }
    .panel, .queue, .roster, .side-panel, .report-card, .battle, .report, .compare { min-height: 0; }
    .badge-row, .tabs, .actions, .chips, .queue-actions, .legend, .mini-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .tabs {
      min-width: 0;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 5px 5px 8px;
      scroll-padding-inline: 5px;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      border: 1px solid var(--line);
      border-radius: 5px;
      padding: 2px 8px;
      color: var(--muted);
      background: rgba(255,255,255,.045);
      font-size: .75rem;
      white-space: nowrap;
    }
    .badge.fixed { border-color: rgba(131,201,131,.42); color: #c5efc5; background: rgba(131,201,131,.10); }
    .badge.locked { border-color: rgba(224,180,93,.46); color: #f1d08e; }
    .badge.warn { border-color: rgba(224,109,101,.5); color: #f2aaa5; }
    /* Clickable enemy badge: a button styled to read like the static badges,
       with a blue affordance so it invites the click into the enemy decklist. */
    .badge--enemy {
      font-family: inherit;
      font-weight: 600;
      color: #cfe3ff;
      border-color: rgba(126,184,255,.5);
      background: rgba(126,184,255,.12);
      cursor: pointer;
    }
    .badge--enemy:hover, .badge--enemy:focus-visible {
      border-color: rgba(126,184,255,.85);
      background: rgba(126,184,255,.22);
      color: #eaf3ff;
    }
    /* Clickable transport chip in the detail header: reads like a badge but
       opens the transport picker; the ▸ caret signals the affordance. Impact
       tint classes carry whether the resulting choice is good or bad. */
    .badge--action {
      font-family: inherit;
      cursor: pointer;
    }
    .badge--action::after { content: " ▸"; opacity: .7; }
    .badge--action:hover, .badge--action:focus-visible {
      border-color: rgba(223,232,235,.55);
      background: rgba(255,255,255,.10);
      color: #fff;
    }
    .panel h2 { margin-top: 14px; color: #fff; font-size: 1.35rem; line-height: 1.12; }
    .panel p { margin-top: 9px; color: var(--muted); line-height: 1.45; }
    .deck-profile {
      margin-top: 14px;
      padding: 12px;
      border-left: 4px solid var(--blue);
      background: rgba(126,184,255,.09);
      color: #e0efff;
      line-height: 1.4;
    }
    .ladder {
      --queue-surface: rgba(18,25,29,.92);
      display: flex;
      align-items: flex-end;
      min-width: 0;
      gap: 0;
      margin-top: 14px;
      padding: 5px 5px 0;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-padding-inline: 5px;
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
    }
    .step {
      position: relative;
      flex: 1 0 58px;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 6px 6px 0 0;
      padding: 8px 10px;
      background: rgba(255,255,255,.035);
      color: var(--muted);
      text-align: center;
      white-space: nowrap;
      scroll-margin-inline: 5px;
    }
    .step strong { display: block; color: inherit; font-size: .82rem; }
    .step.active {
      z-index: 2;
      border-color: var(--line-strong);
      border-bottom-color: var(--queue-surface);
      background: var(--queue-surface);
      color: #fff;
    }
    .step.unlocked:not(.active) { border-color: rgba(131,201,131,.42); background: rgba(131,201,131,.07); color: #c5efc5; }
    .step.locked:not(.active) { border-style: dashed; color: var(--soft); }
    .step:focus-visible { z-index: 3; }
    .plan > div { min-height: 0; overflow: hidden; }
    .plan .panel {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: auto;
    }
    .plan .panel > * { flex-shrink: 0; }
    .queue {
      --queue-surface: rgba(18,25,29,.92);
      flex-shrink: 0;
      min-height: 0;
      margin-top: -1px;
      border: 1px solid var(--line-strong);
      border-radius: 0 0 6px 6px;
      padding: 12px;
      background: var(--queue-surface);
      display: flex;
      flex-direction: column;
      overflow: visible;
    }
    .queue h3, .roster h3, .side-panel h3, .report-card h3 { color: #fff; font-size: .95rem; margin-bottom: 9px; }
    .queue-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 9px;
    }
    .queue-header h3 { margin-bottom: 0; }
    .build-order-status {
      color: var(--muted);
      font-size: .74rem;
      line-height: 1.25;
    }
    .queue-list {
      min-height: 0;
      display: grid;
      align-content: start;
      gap: 8px;
      flex-shrink: 0;
      overflow: visible;
    }
    .queue-item {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      min-height: 62px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: rgba(255,255,255,.045);
    }
    .queue-item.locked { border-style: dashed; opacity: .75; }
    /* Build-order remove-selection mode (Investigation Fix Step 4). */
    .queue.resolving {
      border-radius: 6px;
      animation: queue-resolve-pulse 1.1s ease-in-out infinite;
    }
    @keyframes queue-resolve-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(224,180,93,0); border-color: rgba(224,180,93,.25); }
      50% { box-shadow: 0 0 0 3px rgba(224,180,93,.35); border-color: rgba(224,180,93,.7); }
    }
    .queue-item.conflict-target {
      cursor: pointer;
      border-color: rgba(224,180,93,.55);
      background: rgba(224,180,93,.15);
    }
    .queue-item.conflict-target:hover {
      border-color: rgba(224,180,93,.85);
      background: rgba(224,180,93,.24);
    }
    /* Over-cap build order (Investigation Fix Step 5): blocking, un-startable state. */
    .queue-item.invalid {
      border-color: rgba(224,109,101,.55);
      background: rgba(224,109,101,.12);
    }
    .queue-invalid-notice {
      margin: 2px 0 9px;
      padding: 7px 10px;
      border: 1px solid rgba(224,109,101,.5);
      border-radius: 6px;
      background: rgba(224,109,101,.12);
      color: #f2aaa5;
      font-size: .82rem;
    }
    .queue-invalid-notice[hidden] { display: none; }
    .queue-index {
      display: grid;
      place-items: center;
      width: 28px;
      height: 36px;
      border: 1px solid var(--line);
      border-radius: 4px;
      color: var(--soft);
      font-weight: 800;
      font-size: .78rem;
    }
    .unit-title {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      color: #fff;
      font-weight: 850;
      font-size: .88rem;
    }
    .unit-band {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: .74rem;
      font-weight: 850;
      white-space: nowrap;
    }
    .unit-divider {
      width: 1px;
      height: 18px;
      background: var(--line-strong);
    }
    .unit-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .queue-actions button { min-height: 32px; padding: 5px 8px; font-size: .75rem; }
    .queue-actions .icon-button.compact { padding: 0; }
    .empty-state {
      min-height: 62px;
      display: grid;
      align-items: center;
      border: 1px dashed var(--line);
      border-radius: 6px;
      padding: 10px;
      color: var(--muted);
      font-size: .78rem;
      line-height: 1.35;
    }
    .roster {
      min-height: 0;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: 10px;
      overflow: hidden;
    }
    .tabs button {
      flex: 0 0 auto;
      min-width: 52px;
      min-height: 32px;
      padding: 5px 8px;
      font-weight: 850;
      font-size: .78rem;
      line-height: 1;
      scroll-margin-inline: 5px;
    }
    .bands {
      min-height: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      overflow: hidden;
    }
    .band {
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 10px;
      background: rgba(255,255,255,.035);
      overflow: hidden;
    }
    .band h4 { margin: 0 0 8px; color: #fff; font-size: .84rem; }
    .card-list {
      min-height: 0;
      display: grid;
      align-content: start;
      gap: 12px;
      padding: 5px 8px 8px 5px;
      overflow: auto;
    }
    .card-stack-wrap {
      --stack-count: 0;
      --stack-spread: 0px;
      position: relative;
      isolation: isolate;
      padding-right: var(--stack-spread);
      padding-bottom: var(--stack-spread);
    }
    .card {
      position: relative;
      min-height: 58px;
      border: 1px solid var(--line);
      border-left-width: 4px;
      border-radius: 6px;
      padding: 8px 48px 34px 8px;
      background: #182125;
    }
    .card.structure-card[data-card-count-hidden="true"] {
      padding-bottom: 8px;
    }
    .card-cost {
      position: absolute;
      top: 7px;
      right: 8px;
      display: grid;
      place-items: center;
      min-width: 28px;
      height: 26px;
      border: 1px solid rgba(224,180,93,.55);
      border-radius: 4px;
      background: rgba(224,180,93,.16);
      color: #ffe0a1;
      font-size: .78rem;
      font-weight: 900;
    }
    .card-count {
      position: absolute;
      right: 8px;
      bottom: 7px;
      color: #fff;
      font-size: .74rem;
      font-weight: 900;
    }
    .roster.add-mode {
      border-color: rgba(126,184,255,.72);
      box-shadow: 0 0 0 3px rgba(126,184,255,.15), var(--shadow);
    }
    .roster.add-mode .card[data-add-card]:not([aria-disabled="true"]) {
      cursor: pointer;
      border-color: rgba(126,184,255,.54);
      box-shadow: 0 0 0 1px rgba(126,184,255,.18), 0 10px 22px rgba(0,0,0,.20);
    }
    .roster.add-mode .card[data-add-card]:not([aria-disabled="true"]):hover,
    .roster.add-mode .card[data-add-card]:not([aria-disabled="true"]):focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 3px;
      background: #202d33;
    }
    .roster.add-mode .card[data-add-card][aria-disabled="true"] {
      opacity: .58;
      cursor: not-allowed;
    }
    .roster:not(.add-mode) .card[data-add-card] {
      cursor: pointer;
    }
    .roster:not(.add-mode) .card[data-add-card]:hover,
    .roster:not(.add-mode) .card[data-add-card]:focus-visible,
    .card[data-selected-card="true"] {
      outline: 2px solid var(--blue);
      outline-offset: 3px;
      background: #202d33;
      box-shadow: 0 0 0 1px rgba(126,184,255,.22), 0 12px 26px rgba(0,0,0,.24);
    }
    .card-stack-wrap > .card {
      z-index: 20;
    }
    .card-stack-layer {
      position: absolute;
      top: var(--stack-offset);
      right: calc(var(--stack-spread) - var(--stack-offset));
      bottom: calc(var(--stack-spread) - var(--stack-offset));
      left: var(--stack-offset);
      z-index: var(--stack-z);
      pointer-events: none;
      border: 1px solid rgba(232,238,240,.28);
      border-left-width: 4px;
      border-radius: 6px;
      background: #141d21;
      box-shadow: 0 7px 14px rgba(0,0,0,.22);
    }
    .card .type { color: var(--soft); font-weight: 800; font-size: .68rem; }
    .card-keyword {
      display: inline-flex;
      align-items: center;
      margin-top: 3px;
      border: 1px solid rgba(224,180,93,.55);
      border-radius: 5px;
      padding: 1px 7px;
      background: rgba(224,180,93,.16);
      color: #ffe0a1;
      font-size: .62rem;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .card .name { color: #fff; font-weight: 850; font-size: .84rem; margin-top: 2px; }
    .card .hint, .card .need { font-size: .72rem; margin-top: 3px; line-height: 1.28; }
    .card .hint { color: var(--muted); }
    .card .need { color: #f0cf8c; }
    .card.inf, .card-stack-layer.inf { border-left-color: var(--inf); }
    .card.rec, .card-stack-layer.rec { border-left-color: var(--rec); }
    .card.armor, .card-stack-layer.armor { border-left-color: var(--armor); }
    .card.at, .card-stack-layer.at { border-left-color: #f0a285; }
    .card.arty, .card-stack-layer.arty { border-left-color: var(--amber); }
    .card.aa, .card-stack-layer.aa { border-left-color: var(--aa); }
    .card.air, .card-stack-layer.air { border-left-color: var(--air); }
    .card.supp, .card-stack-layer.supp { border-left-color: var(--green); }
    .card.wonder, .card-stack-layer.wonder { border-left-color: #f3d472; }
    .card.bldg, .card-stack-layer.bldg { border-left-color: #b7c7cf; }
    /* Enemy decklist screen: full-width vertical stack — force header panel on
       top, read-only roster (reusing .roster/.tabs/.bands/.band/.card) below. */
    .enemy-deck-shell {
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 14px;
      padding: 14px;
    }
    .enemy-deck-header { flex-shrink: 0; }
    .enemy-deck-header .enemy-deck-commander { margin-top: 8px; color: var(--soft); font-size: .82rem; }
    .enemy-deck-header .enemy-deck-summary { margin-top: 8px; color: var(--muted); font-size: .85rem; line-height: 1.45; max-width: 96ch; }
    .enemy-deck-header .badge-row button.ghost { min-height: 0; padding-top: 4px; padding-bottom: 4px; }
    .enemy-roster { min-height: 0; }
    /* Read-only enemy cards: same hover/focus affordance as the player roster's
       view-mode cards, keyed off data-enemy-unit instead of data-add-card. */
    .enemy-roster .card[data-enemy-unit] { cursor: pointer; }
    .enemy-roster .card[data-enemy-unit]:hover,
    .enemy-roster .card[data-enemy-unit]:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 3px;
      background: #202d33;
      box-shadow: 0 0 0 1px rgba(126,184,255,.22), 0 12px 26px rgba(0,0,0,.24);
    }
    .battle {
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 14px;
      padding: 14px;
    }
    .map-shell {
      position: relative;
      min-height: 0;
      height: 100%;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 20% 28%, rgba(86,111,58,.72) 0 9%, transparent 10%),
        radial-gradient(ellipse at 74% 70%, rgba(75,101,63,.70) 0 13%, transparent 14%),
        linear-gradient(35deg, transparent 0 37%, rgba(71,58,43,.58) 38% 41%, rgba(178,154,96,.72) 42% 47%, rgba(71,58,43,.55) 48% 50%, transparent 51%),
        linear-gradient(180deg, #263b2d, #354834 48%, #22301f);
    }
    .map-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
      background-size: 68px 68px;
      opacity: .48;
      pointer-events: none;
    }
    .asset, .cp, .unit, .label, .lane, .order-line { position: absolute; }
    .asset { width: 104px; height: 84px; object-fit: contain; filter: saturate(.75) brightness(.92); opacity: .9; }
    .lane {
      height: 4px;
      background: rgba(126,184,255,.42);
      border-radius: 999px;
      transform-origin: left center;
    }
    .order-line { height: 3px; background: rgba(224,180,93,.55); border-radius: 999px; transform-origin: left center; }
    .cp, .unit {
      display: grid;
      place-items: center;
      min-width: 40px;
      min-height: 40px;
      border: 2px solid rgba(255,255,255,.72);
      border-radius: 8px;
      font-weight: 900;
      box-shadow: 0 10px 22px rgba(0,0,0,.35);
    }
    .cp { background: rgba(9,13,16,.83); color: #fff; }
    .cp.uk { border-color: var(--blue); }
    .cp.sov { border-color: #e06d65; }
    .cp.neutral { border-color: #d6d2bf; }
    .cp.complete { border-color: var(--green); box-shadow: 0 0 0 4px rgba(131,201,131,.13), 0 10px 22px rgba(0,0,0,.35); }
    .cp.damaged { border-color: var(--red); box-shadow: 0 0 0 4px rgba(224,109,101,.14), 0 10px 22px rgba(0,0,0,.35); }
    .unit { border-radius: 999px; background: rgba(6,10,12,.86); font-size: .74rem; }
    .unit.uk { border-color: var(--blue); }
    .unit.sov { border-color: var(--red); }
    .unit.pinned { border-style: dashed; }
    .label {
      max-width: 168px;
      padding: 5px 7px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: rgba(7,10,12,.78);
      color: #fff;
      font-size: .72rem;
      line-height: 1.22;
    }
    .map-toolbar {
      position: absolute;
      top: 12px;
      left: 12px;
      right: 12px;
      z-index: 4;
      display: flex;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      align-items: flex-start;
    }
    .hud {
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 8px 10px;
      background: rgba(7,10,12,.82);
      box-shadow: 0 12px 30px rgba(0,0,0,.25);
    }
    .hud strong { color: #fff; font-size: .83rem; }
    .hud span { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; }
    .side-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; align-content: start; gap: 12px; overflow: auto; }
    .progress-list, .recovery-list, .timeline { min-height: 0; display: grid; align-content: start; gap: 8px; }
    .progress-item, .recovery-card, .timeline-row {
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 9px;
      background: rgba(255,255,255,.04);
    }
    .progress-item.active { border-color: rgba(126,184,255,.55); background: rgba(126,184,255,.09); }
    .progress-item.complete { border-color: rgba(131,201,131,.5); background: rgba(131,201,131,.08); }
    .progress-item.warn { border-color: rgba(224,109,101,.55); background: rgba(224,109,101,.09); }
    .progress-item strong, .recovery-card strong, .timeline-row strong { display: block; color: #fff; font-size: .83rem; }
    .progress-item span, .recovery-card span, .timeline-row span { display: block; margin-top: 3px; color: var(--muted); font-size: .74rem; line-height: 1.3; }
    .banner {
      margin: 14px 14px 0;
      border-color: rgba(131,201,131,.45);
      background: linear-gradient(180deg, rgba(43,92,54,.75), rgba(17,31,23,.92));
    }
    .banner.warn {
      border-color: rgba(224,180,93,.5);
      background: linear-gradient(180deg, rgba(90,67,29,.75), rgba(28,22,16,.92));
    }
    .banner h2 { color: #fff; font-size: 1.05rem; }
    .banner p { margin-top: 5px; color: #dce6df; line-height: 1.4; }
    .report {
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(320px, .85fr) minmax(450px, 1.15fr);
      gap: 14px;
      padding: 14px;
    }
    .compare {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      overflow: hidden;
    }
    .report-card { overflow: auto; }
    .compare .report-card {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
    }
    .compare .timeline { overflow: auto; padding-right: 4px; }
    .verdict {
      margin-top: 12px;
      padding: 12px;
      border: 1px solid rgba(131,201,131,.5);
      border-radius: 6px;
      background: rgba(131,201,131,.09);
      color: #dff1df;
      line-height: 1.4;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .modal-backdrop {
      position: fixed;
      inset: 0;
      /* Popovers receive increasing inline z-indices as they are focused. Keep
         blocking modals above that dynamic stack (and above hover explanations). */
      z-index: 2147483647;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(2, 4, 5, .72);
      backdrop-filter: blur(10px);
    }
    .modal-backdrop.active { display: grid; }
    .modal {
      width: min(620px, 100%);
      max-height: min(620px, 92dvh);
      overflow: auto;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      padding: 16px;
      background: linear-gradient(180deg, rgba(24,33,37,.98), rgba(10,14,16,.98));
      box-shadow: 0 28px 70px rgba(0,0,0,.55);
    }
    .modal h2 { color: #fff; font-size: 1.05rem; }
    .modal p { margin-top: 7px; color: var(--muted); line-height: 1.4; }
    .modal-status { min-height: 20px; font-size: .82rem; }
    .modal textarea { margin-top: 12px; }
    .companion-link {
      display: inline;
      min-height: 0;
      border: 0;
      border-radius: 3px;
      padding: 0 2px;
      background: transparent;
      color: #cfe6ff;
      font-weight: 850;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }
    .companion-link:hover,
    .companion-link:focus-visible {
      background: rgba(126,184,255,.16);
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }
    .unit-meta .companion-link {
      font-size: inherit;
      color: #d6ecff;
    }
    .unit-meta {
      margin-top: 4px;
      color: var(--muted);
      font-size: .73rem;
      line-height: 1.3;
    }
    .row-change {
      display: inline-grid;
      place-items: center;
      min-height: 0;
      margin-left: 6px;
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 1px 8px;
      background: rgba(255,255,255,.05);
      color: #cfe6ff;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .02em;
      cursor: pointer;
    }
    .row-change:hover,
    .row-change:focus-visible {
      border-color: rgba(126,184,255,.5);
      background: rgba(126,184,255,.14);
      color: #fff;
      outline: none;
    }
    .selection-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }
    .selection-chip {
      display: inline-grid;
      place-items: center;
      min-height: 26px;
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 3px 9px;
      background: rgba(255,255,255,.045);
      color: var(--soft);
      font-size: .72rem;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap;
    }
    .selection-chip--action {
      color: #cfe6ff;
      cursor: pointer;
    }
    .selection-chip--action:hover,
    .selection-chip--action:focus-visible {
      border-color: rgba(126,184,255,.5);
      background: rgba(126,184,255,.14);
      color: #fff;
      outline: none;
    }
    .picker-bar {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 6px;
      scroll-snap-type: x proximity;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.2) transparent;
    }
    .picker-bar::-webkit-scrollbar { height: 6px; }
    .picker-bar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
    .picker-option {
      flex: 0 0 auto;
      scroll-snap-align: start;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 8px 12px;
      background: rgba(255,255,255,.04);
      color: var(--muted);
      font-size: .8rem;
      font-weight: 750;
      white-space: nowrap;
      cursor: pointer;
    }
    .picker-option:hover,
    .picker-option:focus-visible {
      border-color: rgba(126,184,255,.5);
      color: #fff;
      outline: none;
    }
    .picker-option.selected {
      border-color: rgba(126,184,255,.62);
      background: rgba(126,184,255,.12);
      color: #fff;
    }
    .detail-body--picker {
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;            /* the bar no longer scrolls; only .picker-scroll does */
    }
    .picker-scroll {
      min-height: 0;
      overflow: auto;
    }
    .picker-details {
      display: grid;
      gap: 12px;
    }
    .picker-owner-summary,
    .picker-companion-summary {
      gap: 8px;
    }
    .picker-preview-title {
      margin: 0;
      color: var(--soft);
      font-size: .82rem;
      font-weight: 750;
      line-height: 1.3;
    }
    .impact-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .impact-badge {
      font-weight: 800;
      cursor: help;
    }
    .picker-empty {
      color: var(--muted);
      font-size: .8rem;
      line-height: 1.3;
    }
    .picker-summary {
      margin: 0;
      color: var(--muted);
      font-size: .78rem;
      letter-spacing: .02em;
    }
    .modal-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 12px;
    }
    /* Picker commit row: fixed below the scrollable preview, holds Cancel/Save. */
    .detail-footer {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 10px 12px;
      border-top: 1px solid var(--line);
      background: rgba(14,20,23,.98);
    }
    .detail-footer .btn-ghost {
      background: transparent;
      color: var(--muted);
    }
    .detail-footer .btn-primary {
      background: #2d69ad;
      border-color: rgba(126,184,255,.58);
      font-weight: 800;
    }
    .unit-detail-popover {
      position: fixed;
      z-index: 45;
      width: min(680px, calc(100vw - 24px));
      max-height: min(680px, calc(100dvh - 24px));
      display: none;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(22,31,35,.99), rgba(8,12,14,.99));
      box-shadow: 0 28px 70px rgba(0,0,0,.58);
    }
    .unit-detail-popover.active { display: grid; }
    .unit-detail-popover.pinned {
      border-color: rgba(126,184,255,.42);
      box-shadow: 0 28px 70px rgba(0,0,0,.58), 0 0 0 1px rgba(126,184,255,.16);
    }
    .detail-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
      padding: 12px 12px 8px;
      border-bottom: 1px solid var(--line);
      background: rgba(14,20,23,.98);
      cursor: grab;
      user-select: none;
      touch-action: none;
    }
    .detail-header:active { cursor: grabbing; }
    .detail-controls {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .detail-header h2 {
      color: #fff;
      font-size: 1rem;
      line-height: 1.15;
    }
    .detail-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 7px;
    }
    .detail-body {
      display: grid;
      gap: 12px;
      padding: 8px 12px 12px;
      overflow: auto;
    }
    .detail-section {
      display: grid;
      gap: 7px;
    }
    .detail-section h3 {
      color: #fff;
      font-size: .78rem;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }
    /* Mounts section — top-down fire-arc diagram + legend (see vehicle weapon-mount model). */
    .mount-diagram-wrap {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 12px;
      align-items: start;
    }
    .mount-diagram {
      width: 120px;
      height: 120px;
      flex: none;
    }
    .mount-hull {
      fill: rgba(255,255,255,.06);
      stroke: rgba(223,232,235,.35);
      stroke-width: 1;
    }
    .mount-nose { fill: rgba(223,232,235,.5); }
    .mount-arc {
      fill: rgba(126,184,255,.16);
      stroke: rgba(126,184,255,.7);
      stroke-width: 1.2;
    }
    circle.mount-arc { fill: none; }
    .mount-arc--dashed { stroke-dasharray: 3 3; }
    /* Per-placement arc colours. */
    .mount-arc--turret { fill: rgba(126,184,255,.16); stroke: rgba(126,184,255,.75); }
    .mount-arc--coaxial { fill: rgba(125,224,193,.16); stroke: rgba(125,224,193,.75); }
    .mount-arc--hull { fill: rgba(245,196,108,.16); stroke: rgba(245,196,108,.8); }
    .mount-arc--casemate { fill: rgba(216,150,232,.16); stroke: rgba(216,150,232,.8); }
    .mount-arc--sponson-left,
    .mount-arc--sponson-right { fill: rgba(232,138,138,.16); stroke: rgba(232,138,138,.8); }
    .mount-arc--pintle-aa { fill: rgba(255,255,255,.08); stroke: rgba(223,232,235,.7); }
    .mount-legend {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: .72rem;
    }
    .mount-legend-row {
      display: grid;
      grid-template-columns: 12px auto 1fr;
      gap: 6px;
      align-items: baseline;
    }
    .mount-legend-swatch {
      width: 10px;
      height: 10px;
      border-radius: 2px;
      align-self: center;
      border: 1px solid currentColor;
    }
    .mount-legend-label {
      font-weight: 600;
      color: rgba(223,232,235,.95);
    }
    .mount-legend-weapons {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .mount-weapon-chip {
      padding: 1px 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(223,232,235,.16);
      color: rgba(223,232,235,.85);
      white-space: nowrap;
    }
    @media (max-width: 520px) {
      .mount-diagram-wrap { grid-template-columns: 1fr; justify-items: center; }
      .mount-legend { width: 100%; }
    }
    .weapon-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }
    .weapon-cell {
      position: relative;
      display: grid;
      grid-template-rows: auto auto 1fr;
      gap: 5px;
      min-width: 0;
      min-height: 92px;
      padding: 6px 7px;
      border: 1px solid rgba(223,232,235,.13);
      border-radius: 5px;
      background: rgba(255,255,255,.04);
      font-size: .7rem;
      line-height: 1.2;
      overflow: hidden;
    }
    button.weapon-cell {
      width: 100%;
      color: inherit;
      text-align: left;
      appearance: none;
      cursor: pointer;
    }
    .weapon-cell--action:hover,
    .weapon-cell--action:focus-visible {
      border-color: rgba(126,184,255,.55);
      background: rgba(126,184,255,.12);
      outline: none;
    }
    .weapon-cell.empty {
      opacity: .56;
      background: rgba(255,255,255,.025);
    }
    .weapon-qty {
      position: absolute;
      top: 5px;
      right: 6px;
      z-index: 1;
      padding: 1px 4px;
      border: 1px solid rgba(126,184,255,.28);
      border-radius: 4px;
      background: rgba(126,184,255,.14);
      color: #cfe6ff;
      font-size: .54rem;
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: .02em;
    }
    .weapon-slot-label {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 5px;
      color: var(--soft);
      font-size: .63rem;
      font-weight: 850;
      text-transform: uppercase;
    }
    .weapon-icon {
      display: inline-grid;
      place-items: center;
      flex: 0 0 19px;
      width: 19px;
      height: 19px;
      border: 1px solid rgba(223,232,235,.18);
      border-radius: 4px;
      background: rgba(126,184,255,.10);
      color: #cfe6ff;
      font-size: .52rem;
      font-weight: 900;
      line-height: 1;
    }
    .weapon-slot-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .weapon-name {
      display: block;
      color: #edf4f6;
      font-size: .74rem;
      font-weight: 850;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .weapon-stats {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }
    .weapon-row {
      display: flex;
      align-items: stretch;
      gap: 3px;
      min-width: 0;
    }
    /* Chips wrap onto 2+ rows in a 2-col grid so a typical 4–7 chip channel
       stays readable instead of squishing onto one line. */
    .weapon-chips {
      flex: 1 1 auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 3px;
      min-width: 0;
    }
    /* AMMO / lone-RNG rows are a single wide chip that spans the whole row, left-aligned. */
    .weapon-row.ammo .weapon-stat,
    .weapon-row.rng .weapon-stat {
      flex: 1 1 100%;
      justify-content: flex-start;
      padding: 0 6px;
    }
    .weapon-row.ammo .weapon-stat {
      color: var(--soft);
      background: rgba(126,184,255,.07);
      border-color: rgba(126,184,255,.18);
    }
    .weapon-row-label {
      display: inline-grid;
      place-items: center;
      flex: 0 0 28px;
      height: 19px;
      border: 1px solid rgba(223,232,235,.16);
      border-radius: 3px;
      background: rgba(255,255,255,.05);
      color: var(--soft);
      font-size: .54rem;
      font-weight: 900;
      letter-spacing: .02em;
      line-height: 1;
    }
    .weapon-row.grd .weapon-row-label {
      color: #cfe6ff;
      border-color: rgba(126,184,255,.32);
      background: rgba(126,184,255,.10);
    }
    .weapon-row.air .weapon-row-label {
      color: #bff0e3;
      border-color: rgba(127,216,196,.36);
      background: rgba(127,216,196,.12);
    }
    .weapon-stat {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      height: 19px;
      border: 1px solid rgba(223,232,235,.12);
      border-radius: 3px;
      background: rgba(3, 6, 8, .34);
      color: var(--muted);
      font-size: .58rem;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
    }
    .weapon-stat b {
      margin-right: 1px;
      color: var(--soft);
      font-weight: 900;
    }
    /* Per-chip diff tint vs the stock selection: green = stronger, red = weaker. */
    .weapon-stat--up {
      border-color: rgba(131,201,131,.5);
      background: rgba(131,201,131,.12);
      color: var(--green);
    }
    .weapon-stat--up b { color: var(--green); }
    .weapon-stat--down {
      border-color: rgba(224,109,101,.5);
      background: rgba(224,109,101,.12);
      color: var(--red);
    }
    .weapon-stat--down b { color: var(--red); }
    /* Cell border-highlight when a slot is added / removed / swapped vs default. */
    .weapon-cell--added { border-color: rgba(131,201,131,.6); }
    .weapon-cell--removed { border-color: rgba(224,109,101,.6); }
    .weapon-cell--changed { border-color: rgba(224,180,93,.6); }
    /* Same weapon, fewer/more fielded vs default: green = gain, red = loss. */
    .weapon-cell--increased { border-color: rgba(131,201,131,.6); }
    .weapon-cell--reduced { border-color: rgba(224,109,101,.6); }
    .weapon-qty--up {
      border-color: rgba(131,201,131,.5);
      background: rgba(131,201,131,.16);
      color: var(--green);
    }
    .weapon-qty--down {
      border-color: rgba(224,109,101,.5);
      background: rgba(224,109,101,.16);
      color: var(--red);
    }
    /* Good/bad impact tint. Cost up is bad; card-count up is good. The older
       badge--better/--worse classes remain as aliases for existing trait/enemy UI. */
    .impact--good,
    .badge--better {
      border-color: rgba(131,201,131,.5);
      background: rgba(131,201,131,.10);
      color: #c5efc5;
    }
    .impact--bad,
    .badge--worse {
      border-color: rgba(224,109,101,.5);
      background: rgba(224,109,101,.10);
      color: #f2aaa5;
    }
    .impact--neutral {
      border-color: var(--line);
      background: rgba(255,255,255,.045);
      color: var(--muted);
    }
    /* Trait badges in the detail header — tinted by POLARITY, not group: buff =
       green, debuff = red, mixed = amber, reusing the .badge--better/--worse idiom.
       The colour tells you at a glance whether the trait helps, hurts, or trades
       off; the `title` carries the mechanical effect (cursor: help signals it), and
       the fuller text lives in the Special Rules section. See docs/trait-system.md. */
    .badge--trait { border-style: dashed; cursor: help; }
    .badge--trait-buff   { border-color: rgba(131,201,131,.45); background: rgba(131,201,131,.10); color: #c5efc5; }
    .badge--trait-debuff { border-color: rgba(224,109,101,.45); background: rgba(224,109,101,.10); color: #f0b6b1; }
    .badge--trait-mixed  { border-color: rgba(224,180,93,.45);  background: rgba(224,180,93,.10);  color: #f1d495; }
    /* Acquired trait (granted by the current loadout/context, e.g. Lend-Lease):
       solidify the dashed border, brighten the text, and add a soft ring so the
       ± modifier reads as APPLIED, not merely descriptive. Keeps the polarity hue. */
    .badge--trait-active {
      border-style: solid;
      color: #fff;
      box-shadow: 0 0 0 1px rgba(255,255,255,.16);
    }
    /* Special Rules section — one row per mechanical trait: a polarity glyph
       (▲ buff / ▼ debuff / ◆ mixed, coloured to match the badges), the trait label,
       and its mechanical effect. This is where a trait's tangible impact reads in
       full. See docs/trait-system.md. */
    .special-rules { display: flex; flex-direction: column; gap: 6px; }
    .special-rule {
      display: grid;
      grid-template-columns: auto auto 1fr;
      align-items: baseline;
      column-gap: 8px;
      padding: 4px 0;
    }
    .special-rule + .special-rule { border-top: 1px solid rgba(223,232,235,.08); }
    .special-rule-glyph { font-size: 11px; line-height: 1.4; }
    .special-rule-label { font-weight: 600; color: var(--text); white-space: nowrap; }
    .special-rule-effect { color: var(--muted); font-size: 13px; line-height: 1.4; }
    .special-rule--buff   .special-rule-glyph { color: var(--green); }
    .special-rule--debuff .special-rule-glyph { color: var(--red); }
    .special-rule--mixed  .special-rule-glyph { color: #e2b45d; }
    /* Combat-stat row tint when an acquired trait moved the value, mirroring the
       .weapon-stat--up/--down chip tints (green = stronger, red = weaker). */
    .detail-row--stat-up {
      border-color: rgba(131,201,131,.45);
      background: rgba(131,201,131,.10);
    }
    .detail-row--stat-up dd { color: var(--green); }
    .detail-row--stat-down {
      border-color: rgba(224,109,101,.45);
      background: rgba(224,109,101,.10);
    }
    .detail-row--stat-down dd { color: var(--red); }
    /* Step-2 hover "why" card (Style A) — a compact bordered card that explains why a
       tinted/crew-derived stat reads the way it does. Non-interactive tooltip layer
       (pointer-events: none) pinned above the popovers; built + positioned by
       hovercard.js. See docs/trait-system.md / tasks Step 2. */
    .hovercard {
      position: fixed;
      z-index: 2147483646;
      max-width: 264px;
      pointer-events: none;
      padding: 9px 11px;
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      background: linear-gradient(180deg, rgba(24,33,37,.99), rgba(10,14,16,.99));
      box-shadow: 0 14px 38px rgba(0,0,0,.55);
      color: var(--text);
      font-size: 12px;
      line-height: 1.4;
    }
    .hovercard[hidden] { display: none; }
    .hovercard-title {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: .02em;
      text-transform: uppercase;
      color: var(--text);
    }
    .hovercard-sub {
      font-weight: 600;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--soft);
    }
    .hovercard-delta {
      display: flex;
      align-items: baseline;
      gap: 7px;
      margin: 6px 0;
      font-variant-numeric: tabular-nums;
      font-size: 16px;
      font-weight: 800;
    }
    .hovercard-base { color: var(--muted); }
    .hovercard-arrow { color: var(--soft); font-size: 13px; }
    .hovercard-eff { color: var(--text); }
    .hovercard-val--up { color: var(--green); }
    .hovercard-val--down { color: var(--red); }
    .hovercard-effect {
      display: flex;
      gap: 6px;
      align-items: baseline;
      margin-top: 6px;
    }
    .hovercard-effect-glyph { font-size: 10px; flex: none; }
    .hovercard-effect-label { font-weight: 700; color: var(--text); flex: none; }
    .hovercard-effect-text { color: var(--muted); }
    .hovercard-effect--muted { color: var(--soft); font-style: italic; }
    .hovercard-effect.special-rule--buff   .hovercard-effect-glyph { color: var(--green); }
    .hovercard-effect.special-rule--debuff  .hovercard-effect-glyph { color: var(--red); }
    .hovercard-effect.special-rule--mixed   .hovercard-effect-glyph { color: #e2b45d; }
    .hovercard-rams {
      margin: 7px 0 0;
      padding: 7px 0 0;
      list-style: none;
      border-top: 1px solid rgba(223,232,235,.1);
      display: flex;
      flex-wrap: wrap;
      gap: 4px 6px;
    }
    .hovercard-rams li {
      font-size: 11px;
      color: var(--muted);
      border: 1px solid var(--line);
      border-radius: 5px;
      padding: 1px 6px;
      background: rgba(255,255,255,.03);
    }
    /* Highlight the badge / cell driving the hovered stat. */
    .is-hover-source {
      box-shadow: 0 0 0 2px rgba(126,184,255,.6);
      border-radius: 5px;
    }
    .armor-block {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }
    .armor-tier {
      color: var(--soft);
      font-size: .58rem;
      font-weight: 850;
      letter-spacing: .02em;
    }
    .armor-facings {
      display: inline-flex;
      gap: 3px;
    }
    .armor-facing {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 1px;
      height: 19px;
      padding: 0 4px;
      border: 1px solid rgba(223,232,235,.12);
      border-radius: 3px;
      background: rgba(3, 6, 8, .34);
      color: var(--muted);
      font-size: .56rem;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
    }
    .armor-facing b {
      color: var(--soft);
      font-weight: 900;
    }
    .detail-row {
      display: grid;
      grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      min-height: 30px;
      padding: 6px 8px;
      border: 1px solid rgba(223,232,235,.13);
      border-radius: 5px;
      background: rgba(255,255,255,.04);
      font-size: .74rem;
      line-height: 1.25;
    }
    .detail-row dt {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      gap: 5px;
      color: var(--soft);
      font-weight: 850;
    }
    .detail-label-text {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .detail-stat-icon {
      display: inline-grid;
      place-items: center;
      flex: 0 0 18px;
      width: 18px;
      height: 18px;
      border: 1px solid rgba(223,232,235,.15);
      border-radius: 4px;
      background: rgba(255,255,255,.045);
      color: #cfe6ff;
      font-size: .56rem;
      font-weight: 900;
      line-height: 1;
    }
    .detail-row dd {
      margin: 0;
      color: #edf4f6;
      min-width: 0;
      justify-self: end;
      text-align: right;
      overflow-wrap: anywhere;
    }
    .detail-grid .detail-row {
      grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    }
    .detail-status {
      border-color: rgba(126,184,255,.34);
      background: rgba(126,184,255,.08);
    }
    .detail-status.blocked {
      border-color: rgba(224,180,93,.42);
      background: rgba(224,180,93,.10);
    }
    .detail-status.exhausted {
      border-color: rgba(224,109,101,.45);
      background: rgba(224,109,101,.10);
    }
    @media (max-width: 680px) {
      .unit-detail-popover {
        width: calc(100vw - 20px);
      }
      .detail-grid { grid-template-columns: 1fr; }
      .weapon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 980px) {
      .topbar, .plan, .battle, .report { grid-template-columns: 1fr; }
      .state-nav { justify-content: flex-start; }
      .plan, .battle, .report, .enemy-deck-shell { overflow: auto; }
      .battle { grid-template-rows: minmax(320px, 1fr) auto; }
      .map-shell { min-height: 320px; height: auto; }
    }
    @media (max-width: 680px) {
      .topbar { padding: 10px; }
      .plan, .battle, .report, .enemy-deck-shell { padding: 10px; }
      .bands, .ladder, .compare { grid-template-columns: 1fr; }
      .tabs button { min-width: 46px; padding-inline: 7px; }
      .queue-item { grid-template-columns: 30px minmax(0, 1fr); }
      .queue-actions { grid-column: 1 / -1; }
      .map-shell { min-height: 300px; }
      .label { max-width: 126px; }
    }
    @media (prefers-reduced-motion: no-preference) {
      .cp, .unit, .progress-item, .card, .queue-item { transition: border-color .18s ease, background .18s ease, transform .18s ease; }
      button { transition: background .18s ease, border-color .18s ease; }
      .unit.active { animation: pulse 1.2s ease-in-out infinite; }
      @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

      /* Hovering the cost badge pulses the selection rows that drive it. */
      .badge--cost { cursor: help; }
      @keyframes contributor-pulse-red {
        0%, 100% { border-color: rgba(223,232,235,.13); box-shadow: none; background: rgba(255,255,255,.04); }
        50% { border-color: rgba(224,109,101,.85); box-shadow: 0 0 0 2px rgba(224,109,101,.35); background: rgba(224,109,101,.10); }
      }
      @keyframes contributor-pulse-green {
        0%, 100% { border-color: rgba(223,232,235,.13); box-shadow: none; background: rgba(255,255,255,.04); }
        50% { border-color: rgba(131,201,131,.85); box-shadow: 0 0 0 2px rgba(131,201,131,.35); background: rgba(131,201,131,.10); }
      }
      .unit-detail-popover:has(.badge--cost:hover) .detail-row--cost-up {
        animation: contributor-pulse-red 1.1s ease-in-out infinite;
      }
      .unit-detail-popover:has(.badge--cost:hover) .detail-row--cost-down {
        animation: contributor-pulse-green 1.1s ease-in-out infinite;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .badge--cost { cursor: help; }
      .unit-detail-popover:has(.badge--cost:hover) .detail-row--cost-up {
        border-color: rgba(224,109,101,.85); background: rgba(224,109,101,.10);
      }
      .unit-detail-popover:has(.badge--cost:hover) .detail-row--cost-down {
        border-color: rgba(131,201,131,.85); background: rgba(131,201,131,.10);
      }
    }

    /* ==== mobile landscape support ==== */
    /* short landscape viewports (phones): tighter chrome, smaller map minimum */
    @media (max-height: 500px) {
      .topbar { padding: 6px 10px; }
      .plan, .battle, .report, .enemy-deck-shell { padding: 8px; gap: 8px; }
      .battle { grid-template-rows: minmax(240px, 1fr) auto; }
      .map-shell { min-height: 240px; }
    }
    /* tall dialogs scroll inside themselves instead of clipping their buttons */
    .modal { max-height: min(620px, calc(100dvh - 24px)); }
    /* fingers need >=44px on the controls that shrink below it */
    @media (pointer: coarse) {
      .queue-actions button, .tabs button, button.badge, .badge--action,
      .enemy-deck-header .badge-row button.ghost, .row-change,
      .selection-chip--action { min-height: 44px; }
    }
    /* safe areas (notched phones in landscape) */
    .topbar { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
    /* portrait-blocking overlay (phones only; desktop and tablets unaffected) */
    #rotate-overlay { display: none; }
    @media (orientation: portrait) and (pointer: coarse) and (max-width: 700px) {
      #rotate-overlay { display: flex; position: fixed; inset: 0; z-index: 100; background: #070a0c;
        flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
      #rotate-overlay .icon { font-size: 3rem; color: var(--blue); }
      #rotate-overlay p { color: var(--text); font-size: 1rem; }
      #rotate-overlay .sub { color: var(--muted); font-size: .8rem; }
    }