@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap');

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: 'Rajdhani', system-ui, sans-serif;
    background: #0a0e1a;
    color: #e6edf3;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }
  button { font-family: inherit; cursor: pointer; }
  input { font-family: inherit; }

  :root {
    --bg-deep: #0a0e1a;
    --bg-panel: #131826;
    --bg-elev: #1a2030;
    --bg-darker: #0f1422;
    --border: #252c3d;
    --border-light: #3a4258;
    --text: #e6edf3;
    --text-dim: #8b95a8;
    --accent: #f47a4c;
    --accent-glow: #ff8e5e;
    --enemy: #DC2626;
    --enemy-glow: #ef4444;

    --role-scout: #22c55e;
    --role-attacker: #ef4444;
    --role-tank: #3b82f6;
    --role-support: #a855f7;

    --rarity-common: #9ca3af;
    --rarity-uncommon: #34d399;
    --rarity-rare: #60a5fa;
    --rarity-epic: #c084fc;
    --rarity-legendary: #fbbf24;

    --slot-0: #00E0FF;
    --slot-1: #FF2EA0;
    --slot-2: #FFD600;
    --slot-3: #C0C7D4;
    --slot-4: #FF7B00;

    --free-lime: #84CC16;
    --free-black: #000000;
    --free-red: #FF1744;
  }

  /* ========== APP LAYOUT ========== */
  #app {
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background:
      radial-gradient(ellipse at top, rgba(244,122,76,0.08) 0%, transparent 50%),
      radial-gradient(ellipse at bottom right, rgba(6,182,212,0.05) 0%, transparent 60%),
      var(--bg-deep);
  }

  /* ========== HEADER ========== */
  header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .brand { display: flex; align-items: center; gap: 12px; }
  .brand-mark {
    width: 40px;
    height: 40px;
    color: var(--accent);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 0 6px rgba(244,122,76,0.5));
    user-select: none;
  }
  .brand-mark svg { width: 100%; height: 100%; display: block; }
  .brand-text h1 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .brand-text small {
    color: var(--text-dim);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  .version-badge {
    background: var(--accent);
    color: var(--bg-deep);
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    margin-left: 6px;
    letter-spacing: 0.05em;
  }
  .creator-credit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
  }
  .creator-credit strong { color: var(--text); font-size: 11px; letter-spacing: 0.04em; }
  .creator-prefix { color: var(--text-dim); }
  .discord-icon {
    width: 14px;
    height: 14px;
    color: #5865F2;
    flex-shrink: 0;
    filter: drop-shadow(0 0 5px rgba(88,101,242,0.38));
  }
  .credits-card {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    background: rgba(26,32,48,0.55);
    border-radius: 6px;
  }
  .credits-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0;
  }
  .credits-line strong { color: var(--text); }
  .credits-note {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.45;
    margin-top: 8px;
  }

  /* Phase + Inherit container */
  .phase-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .phase-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-panel);
    padding: 3px;
    border-radius: 5px;
    border: 1px solid var(--border);
  }
  .phase-tab {
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 7px 14px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 3px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .phase-tab:hover { color: var(--text); }
  .phase-tab.active {
    background: var(--accent);
    color: var(--bg-deep);
    box-shadow: 0 0 10px rgba(244,122,76,0.5);
  }
  /* v1.7.0: per-phase strategy note icon inside each tab. Dimmed when the phase has no note,
     accentuated (filled, accent-colored) when it does — a glanceable signal that there's
     something to read for that phase. Clickable independently of the tab's phase switch. */
  .phase-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-dim);
    opacity: 0.55;
    margin-left: 4px;
    padding-left: 7px;
    border-left: 1px solid var(--border-light);
    box-sizing: content-box;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .phase-note-icon svg { width: 14px; height: 14px; }
  .phase-tab:hover .phase-note-icon { opacity: 0.85; }
  .phase-note-icon:hover { opacity: 1; background: rgba(255,255,255,0.08); }
  .phase-note-icon.has-note { opacity: 1; color: var(--accent); }
  /* On the active tab the text is dark (on accent bg); the icon should match, but a has-note
     icon stays visually distinct via a filled dot rendered by the SVG itself. */
  .phase-tab.active .phase-note-icon { color: var(--bg-deep); opacity: 0.7; border-left-color: rgba(0,0,0,0.25); }
  .phase-tab.active .phase-note-icon.has-note { opacity: 1; }
  .phase-tab.active .phase-note-icon:hover { background: rgba(0,0,0,0.15); }

  /* v1.7.0: phase note modal textarea + counter */
  .phase-note-textarea {
    width: 100%;
    background: var(--bg-deep);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
    resize: vertical;
    min-height: 140px;
    box-sizing: border-box;
  }
  .phase-note-textarea:focus { outline: none; border-color: var(--accent); }
  .phase-note-textarea::placeholder { color: var(--text-dim); }
  .phase-note-counter {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-dim);
    text-align: right;
  }

  /* v1.7.0: mobile reorder modal */
  .reorder-hint { font-size: 12px; color: var(--text-dim); margin: 0 0 10px; }
  .reorder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .reorder-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 8px 10px;
  }
  .reorder-item .reorder-num {
    font-size: 12px; font-weight: 700; color: var(--text-dim);
    min-width: 16px; text-align: center; font-variant-numeric: tabular-nums;
  }
  .reorder-item .role-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .reorder-item .reorder-name { flex: 1 1 auto; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reorder-controls { display: flex; gap: 4px; flex-shrink: 0; }
  .reorder-controls button {
    width: 34px; height: 34px;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    display: grid;
    place-items: center;
  }
  .reorder-controls button:disabled { opacity: 0.3; cursor: default; }
  .reorder-controls button:not(:disabled):active { background: var(--accent); color: var(--bg-deep); }


  /* Inherit UI removed in v0.6 */

  .header-actions { display: flex; gap: 6px; align-items: center; }
  .btn {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .btn:hover { border-color: var(--border-light); background: var(--bg-elev); }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg-deep); }
  .btn.primary:hover { background: var(--accent-glow); }
  .btn.danger:hover { border-color: #ff6b6b; color: #ff6b6b; }
  .btn.icon-only { padding: 7px 9px; }
  .btn.small { padding: 5px 9px; font-size: 10px; }

  /* ========== MAIN ========== */
  main {
    display: grid;
    grid-template-columns: 250px 1fr 370px;
    gap: 10px;
    padding: 10px;
    min-height: 0;
    transition: grid-template-columns 0.3s ease;
  }
  main.left-collapsed { grid-template-columns: 0 1fr 370px; }
  main.right-collapsed { grid-template-columns: 250px 1fr 0; }
  main.left-collapsed.right-collapsed { grid-template-columns: 0 1fr 0; }

  aside, .map-area { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  aside.collapsed { opacity: 0; pointer-events: none; }

  .panel-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .panel-title {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .panel-title::before {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--accent);
  }

  /* ========== RESERVE (LEFT) ========== */
  .reserve { display: flex; flex-direction: column; }

  .reserve-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
  }
  .reserve-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    padding: 8px 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.15s ease;
  }
  .reserve-tab:hover { color: var(--text); }
  .reserve-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: rgba(244,122,76,0.05);
  }

  .reserve-filters {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .reserve-filters .search-input {
    width: 100%;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 9px;
    font-size: 12px;
    border-radius: 3px;
  }
  .reserve-filters .search-input:focus { outline: none; border-color: var(--accent); }
  .search-row { display: flex; gap: 6px; align-items: stretch; }
  .help-icon-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 26px;
    height: auto;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    line-height: 1;
  }
  .help-icon-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(244, 122, 76, 0.08);
  }
  .filter-row { display: flex; gap: 3px; flex-wrap: wrap; }
  .filter-row .label {
    font-size: 9px;
    color: var(--text-dim);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-right: 4px;
    align-self: center;
  }
  .filter-pill {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 3px;
    transition: all 0.15s ease;
    letter-spacing: 0.05em;
  }
  .filter-pill:hover { color: var(--text); }
  .filter-pill.active { color: var(--text); border-color: var(--text); background: rgba(255,255,255,0.05); }
  .filter-pill[data-role="Scout"].active { color: var(--role-scout); border-color: var(--role-scout); }
  .filter-pill[data-role="Attacker"].active { color: var(--role-attacker); border-color: var(--role-attacker); }
  .filter-pill[data-role="Tank"].active { color: var(--role-tank); border-color: var(--role-tank); }
  .filter-pill[data-role="Support"].active { color: var(--role-support); border-color: var(--role-support); }
  .filter-pill[data-rarity="Common"].active { color: var(--rarity-common); border-color: var(--rarity-common); }
  .filter-pill[data-rarity="Uncommon"].active { color: var(--rarity-uncommon); border-color: var(--rarity-uncommon); }
  .filter-pill[data-rarity="Rare"].active { color: var(--rarity-rare); border-color: var(--rarity-rare); }
  .filter-pill[data-rarity="Epic"].active { color: var(--rarity-epic); border-color: var(--rarity-epic); }
  .filter-pill[data-rarity="Legendary"].active { color: var(--rarity-legendary); border-color: var(--rarity-legendary); }

  /* v0.8: reset filter button — appears in the rarity row, hidden when no filter is active */
  .reset-filter-btn {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-dim);
    font-family: 'Oswald', sans-serif;
    font-size: 9px;
    letter-spacing: 1px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 120ms;
    margin-left: 4px;
    display: none; /* shown only when there is something to reset (set by JS) */
  }
  .reset-filter-btn.show { display: inline-block; }
  .reset-filter-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
  }

  /* (reserve-hint removed v0.6 — replaced by ? help icon) */

  .mech-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .mech-list::-webkit-scrollbar { width: 6px; }
  .mech-list::-webkit-scrollbar-track { background: transparent; }
  .mech-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  .mech-list-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--text-dim);
    font-size: 11px;
    font-style: italic;
  }

  .mech-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 3px solid var(--role-scout);
    border-radius: 4px;
    padding: 6px 9px;
    cursor: grab;
    transition: all 0.12s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    user-select: none;
  }
  .mech-card:hover { background: #202841; border-color: var(--border-light); transform: translateX(2px); }
  .mech-card[draggable="true"]:active { cursor: grabbing; }
  .mech-card.dragging { opacity: 0.4; }
  .mech-card[data-role="Scout"] { border-left-color: var(--role-scout); }
  .mech-card[data-role="Attacker"] { border-left-color: var(--role-attacker); }
  .mech-card[data-role="Tank"] { border-left-color: var(--role-tank); }
  .mech-card[data-role="Support"] { border-left-color: var(--role-support); }

  .meta-star {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 16px;
    padding: 0 2px;
    line-height: 1;
    transition: all 0.12s ease;
    flex-shrink: 0;
  }
  .meta-star:hover { color: var(--accent); transform: scale(1.15); }
  .meta-star.active { color: #FACC15; }
  .meta-star.active:hover { color: #FDE047; }

  .mech-card .mech-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }
  .mech-name {
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mech-rarity {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 1px;
  }
  .mech-card[data-rarity="Common"] .mech-rarity { color: var(--rarity-common); }
  .mech-card[data-rarity="Uncommon"] .mech-rarity { color: var(--rarity-uncommon); }
  .mech-card[data-rarity="Rare"] .mech-rarity { color: var(--rarity-rare); }
  .mech-card[data-rarity="Epic"] .mech-rarity { color: var(--rarity-epic); }
  .mech-card[data-rarity="Legendary"] .mech-rarity { color: var(--rarity-legendary); }
  .mech-role-badge {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 2px 5px;
    border-radius: 2px;
    background: rgba(255,255,255,0.05);
    flex-shrink: 0;
  }
  .mech-card[data-role="Scout"] .mech-role-badge { color: var(--role-scout); }
  .mech-card[data-role="Attacker"] .mech-role-badge { color: var(--role-attacker); }
  .mech-card[data-role="Tank"] .mech-role-badge { color: var(--role-tank); }
  .mech-card[data-role="Support"] .mech-role-badge { color: var(--role-support); }

  /* Enemy mode toggle in reserve */
  .enemy-mode-bar {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    background: rgba(220,38,38,0.03);
  }
  .enemy-mode-bar.active { background: rgba(220,38,38,0.15); }
  .enemy-mode-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .enemy-mode-toggle.active { color: var(--enemy-glow); }
  .enemy-mode-toggle input { display: none; }
  .enemy-mode-toggle .switch {
    width: 26px; height: 14px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    position: relative;
    transition: all 0.15s ease;
  }
  .enemy-mode-toggle .switch::after {
    content: '';
    position: absolute;
    width: 8px; height: 8px;
    background: var(--text-dim);
    border-radius: 50%;
    top: 2px; left: 2px;
    transition: all 0.15s ease;
  }
  .enemy-mode-toggle input:checked + .switch { background: var(--enemy); border-color: var(--enemy); }
  .enemy-mode-toggle input:checked + .switch::after { left: 14px; background: white; }

  /* ========== MAP (CENTER) ========== */
  .map-area { display: flex; flex-direction: column; }
  .map-toolbar {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
  }
  .map-toolbar-group { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

  /* v1.2.0: dedicated wrapper for undo/redo buttons so they stay visible in the mobile
     collapsed toolbar (regular .map-toolbar-group is hidden in mobile until TOOLS is
     expanded; undo/redo are too frequent to hide behind a toggle). */
  .map-toolbar-undoredo { display: flex; gap: 4px; align-items: center; }

  .phase-clear-group { position: relative; display: inline-flex; gap: 0; }
  .phase-clear-group .btn.danger { border-radius: 3px 0 0 3px; }
  .phase-clear-group .btn.icon-only {
    border-radius: 0 3px 3px 0;
    border-left: 1px solid rgba(0,0,0,0.25);
    padding: 4px 6px;
    min-width: auto;
  }
  .phase-clear-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 50;
    min-width: 240px;
    padding: 4px;
  }
  .phase-clear-menu .menu-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 6px;
  }
  .phase-clear-menu.show { display: block; }
  .phase-clear-menu .menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 7px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    font-family: inherit;
  }
  .phase-clear-menu .menu-item:hover { background: var(--bg-darker); color: var(--accent); }

  /* v1.0.1: MOVE button — moves all mech pins to their arrow heads (constructive action,
     visually contrasted with the destructive red CLEAR ALL sitting next to it).
     Uses a cyan accent (matches SLOT_COLORS[0] = #00E0FF) for a clear "constructive" cue.
     Disabled state: dimmed, no hover, not-allowed cursor. */
  .btn-move-arrows {
    color: #00E0FF;
    border-color: rgba(0, 224, 255, 0.45);
    background: rgba(0, 224, 255, 0.08);
  }
  .btn-move-arrows:hover:not(:disabled) {
    background: rgba(0, 224, 255, 0.18);
    border-color: #00E0FF;
    color: #6FF0FF;
  }
  .btn-move-arrows:disabled {
    color: var(--text-dim);
    border-color: var(--border);
    background: transparent;
    cursor: not-allowed;
    opacity: 0.55;
  }

  /* v1.0: RESET dropdown menu (header) - same pattern as phase-clear-menu */
  .reset-wrap { position: relative; display: inline-block; }
  .reset-chev { margin-left: 4px; font-size: 10px; opacity: 0.8; }
  .reset-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 50;
    min-width: 220px;
    padding: 4px;
  }
  .reset-menu.show { display: block; }
  .reset-menu .menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 7px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    font-family: inherit;
  }
  .reset-menu .menu-item:hover { background: var(--bg-darker); color: var(--accent); }
  .reset-menu .menu-item.danger:hover { background: rgba(239,68,68,0.15); color: #ef4444; }

  /* v0.12: map-title becomes a clickable button (opens map selector modal) */
  .map-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.18em;
    color: var(--accent);
    text-transform: uppercase;
    flex: 1;
    text-align: center;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent;
    border: 1px solid transparent;
    padding: 4px 12px;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .map-title-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .map-title:hover {
    background: rgba(244,122,76,0.08);
    border-color: var(--border-light);
  }
  .map-title:focus { outline: none; border-color: var(--accent); }
  .map-title-chev { flex-shrink: 0; opacity: 0.7; }
  .map-title:hover .map-title-chev { opacity: 1; }
  /* v1.0.3: optional strategy name shown under the map title. Hidden via .hidden when empty
     (so the toolbar height stays minimal when no name is set, no awkward empty line). */
  .map-strategy-name {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    text-transform: none;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .map-strategy-name.hidden { display: none; }

  .toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    padding: 3px 6px;
    border-radius: 3px;
  }
  .toggle:hover { color: var(--text); }
  .toggle input { display: none; }
  .toggle .switch {
    width: 26px; height: 14px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    position: relative;
    transition: all 0.15s ease;
  }
  .toggle .switch::after {
    content: '';
    position: absolute;
    width: 8px; height: 8px;
    background: var(--text-dim);
    border-radius: 50%;
    top: 2px; left: 2px;
    transition: all 0.15s ease;
  }
  .toggle input:checked + .switch { background: var(--accent); border-color: var(--accent); }
  .toggle input:checked + .switch::after { left: 14px; background: var(--bg-deep); }

  .free-arrow-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .free-arrow-btn:hover { border-color: var(--border-light); background: var(--bg-elev); }
  .free-arrow-btn.active { border-color: var(--free-lime); box-shadow: 0 0 10px rgba(132,204,22,0.4); }
  .free-arrow-btn .dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.4);
  }

  /* ============== v0.8: BEACON BUTTON & MARKERS ============== */
  .beacon-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
  }
  .beacon-btn:hover { border-color: var(--border-light); background: var(--bg-elev); }
  .beacon-btn.armed {
    border-color: var(--accent);
    background: rgba(244, 122, 76, 0.12);
    color: var(--accent);
    box-shadow: 0 0 10px rgba(244, 122, 76, 0.35);
  }
  .beacon-btn .beacon-btn-ico { width: 14px; height: 14px; color: #9ca3af; }
  .beacon-btn.armed .beacon-btn-ico { color: var(--accent); }

  /* Banner shown while in placing mode */
  .placing-banner {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    background: rgba(244, 122, 76, 0.92);
    color: #0a0e14;
    padding: 6px 14px;
    border-radius: 3px;
    font-family: 'Oswald', sans-serif;
    font-size: 12px; letter-spacing: 1.5px;
    font-weight: 600;
    z-index: 120;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  }
  .map-stage.placing { cursor: crosshair; }

  /* Beacon marker on the map */
  .beacon {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10; /* below arrows (z=20) and pins (z=30) so both stay interactive */
    pointer-events: auto;
  }
  .beacon.dragging,
  .beacon.resizing { z-index: 100; opacity: 0.85; }
  /* Hover-bridge: invisible padding zone so moving cursor toward controls doesn't drop the :hover state */
  .beacon::before {
    content: '';
    position: absolute;
    top: -32px;
    left: -16px;
    right: -16px;
    bottom: -16px;
    pointer-events: auto;
    z-index: -1;
  }
  .beacon-shape {
    width: 100%; height: 100%;
    position: relative;
    cursor: grab;
  }
  .beacon.dragging .beacon-shape { cursor: grabbing; }
  .beacon-shape svg {
    width: 100%; height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 0 6px rgba(var(--c-rgb), 0.45));
    transition: filter 150ms;
  }
  .beacon:hover .beacon-shape svg { filter: drop-shadow(0 0 10px rgba(var(--c-rgb), 0.7)); }
  .beacon.ally  { --c-rgb: 34, 197, 94; }
  .beacon.enemy { --c-rgb: 239, 68, 68; }

  /* Top controls */
  .beacon-controls {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    gap: 6px;
    z-index: 11;
  }
  .beacon:hover .beacon-controls,
  .beacon.dragging .beacon-controls,
  .beacon.resizing .beacon-controls { display: flex; }
  .beacon-ctrl {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--bg-elev);
    color: var(--text-dim);
    border: 1px solid var(--border-light);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    transition: all 120ms;
  }
  .beacon-ctrl svg { display: block; width: 11px; height: 11px; }
  .beacon-ctrl.cycle:hover { background: var(--accent); color: #0a0e14; border-color: var(--accent); transform: scale(1.1); }
  .beacon-ctrl.clone:hover { background: var(--accent); color: #0a0e14; border-color: var(--accent); transform: scale(1.1); }
  .beacon-ctrl.del:hover { background: #ef4444; color: #fff; border-color: #ef4444; transform: scale(1.1); }

  /* Resize handle (bottom-right) */
  .beacon-resize {
    position: absolute;
    bottom: -10px; right: -10px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--bg-elev);
    color: var(--text-dim);
    border: 1px solid var(--border-light);
    cursor: nwse-resize;
    display: none;
    align-items: center; justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    transition: background 120ms, color 120ms, border-color 120ms, transform 120ms;
    z-index: 11;
  }
  .beacon-resize svg { display: block; width: 11px; height: 11px; }
  .beacon:hover .beacon-resize,
  .beacon.dragging .beacon-resize,
  .beacon.resizing .beacon-resize { display: flex; }
  .beacon-resize:hover {
    background: var(--accent);
    color: #0a0e14;
    border-color: var(--accent);
    transform: scale(1.1);
  }

  /* Drag-to-size preview (during initial placement) */
  .beacon-preview {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 200;
  }

  .map-container {
    flex: 1;
    position: relative;
    background: radial-gradient(ellipse at center, #0d1525 0%, #050810 100%);
    overflow: hidden;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* CRITICAL: stage forced to image aspect-ratio. Image AND SVG fill it exactly. */
  .map-stage {
    position: relative;
    height: 100%;
    max-width: 100%;
    /* aspect-ratio is set dynamically via JS based on the current map (see app.js, applyCurrentMap). */
  }
  /* v1.0.2: short fade-in animation when switching phases. The animation is triggered by toggling
     the .phase-just-switched class in JS (with a forced reflow between remove and add so the
     keyframes restart even when switching back to the same phase wouldn't apply). */
  @keyframes phase-fade-in {
    from { opacity: 0.35; }
    to   { opacity: 1; }
  }
  .map-stage.phase-just-switched {
    animation: phase-fade-in 150ms ease-out;
  }
  /* Map interaction layers:
     0   map image
     10  beacons
     20  arrow SVG overlay (only arrow hit zones catch pointer events)
     30  mech pins
     100 active drag/resize elements
     120 mode banners / popups
  */
  .map-stage > img {
    display: block;
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: auto;
  }
  .map-svg-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
  }
  .map-svg-overlay .arrow-line,
  .map-svg-overlay .arrow-outline,
  .map-svg-overlay .arrow-preview {
    pointer-events: none;
  }
  .map-svg-overlay .arrow-hit,
  .map-svg-overlay .arrow-head-hit {
    pointer-events: auto;
  }

  .placed-mech {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: grab;
    z-index: 30;
    transition: filter 0.15s ease;
    pointer-events: auto;
  }
  .placed-mech.dragging { z-index: 100; cursor: grabbing; }
  .placed-mech.overlapping .pin { filter: drop-shadow(0 0 5px #fbbf24); }

  /* (.placed-mech.inherited removed v0.6 — inherit feature removed) */

  /* PIN STYLES (v0.12: detailed mode removed, scaling via --pin-size set per map) */
  /* --pin-size is set by JS as 'XXpx' based on the current map's pinScale + stage height.
     Falls back to 38px (Biogear's reference size) if not yet computed. */
  .placed-mech .pin {
    width: var(--pin-size, 38px);
    background: var(--bg-deep);
    border: 2px solid;
    border-radius: 50%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    font-size: calc(var(--pin-size, 38px) * 0.34);
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
    position: relative;
  }
  .placed-mech .pin-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    background: rgba(10,14,26,0.9);
    color: var(--text);
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 2px;
    white-space: nowrap;
    letter-spacing: 0.03em;
    pointer-events: none;
  }
  .placed-mech .enemy-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--enemy);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 9px;
    border: 1.5px solid var(--bg-deep);
    line-height: 1.2;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }

  /* v0.7: pin-popup is no longer rendered (replaced by halo + top-right delete).
     Old CSS retained but unreachable since selected class is no longer applied. */

  /* v0.7: halo ring used to start a mech-arrow drag */
  .pin-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 3px solid var(--accent);
    box-shadow: 0 0 12px rgba(244,122,76,0.25) inset, 0 0 12px rgba(244,122,76,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms;
    z-index: 1; /* below pin (z=2) so the pin stays on top */
    cursor: crosshair;
  }
  .placed-mech:hover .pin-halo,
  .placed-mech.halo-dragging .pin-halo,
  .placed-mech.armed .pin-halo {
    opacity: 0.7;
    pointer-events: auto;
  }
  .placed-mech.halo-dragging .pin-halo { opacity: 1; }
  .placed-mech .pin { position: relative; z-index: 2; }

  /* v0.7: top-right delete button (× appears on hover) */
  .pin-delete {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-elev);
    color: var(--text-dim);
    border: 1px solid var(--border-light);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: background 120ms, color 120ms, border-color 120ms, transform 120ms;
  }
  .pin-delete svg { display: block; width: 10px; height: 10px; }
  .placed-mech:hover .pin-delete { display: flex; }
  .pin-delete:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
    transform: scale(1.1);
  }

  /* v1.3.1: pin-info button — symmetric to pin-delete but on the TOP-LEFT corner.
     Default hidden on desktop (the pin click already opens the inspect card there).
     Made visible on mobile (see mobile media query below) since on mobile the pin click
     no longer opens the card directly — the user has to use this button explicitly. */
  .pin-info {
    position: absolute;
    top: -16px;
    left: -16px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-elev);
    color: #00E0FF;
    border: 1px solid rgba(0,224,255,0.4);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: background 120ms, color 120ms, border-color 120ms, transform 120ms;
  }
  .pin-info svg { display: block; width: 10px; height: 10px; }
  .pin-info:hover {
    background: #00E0FF;
    color: #001e25;
    border-color: #00E0FF;
    transform: scale(1.1);
  }

  /* Old pin-popup CSS — retained for reference, no longer activated */
  .pin-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    display: none;
    gap: 3px;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 3px;
    z-index: 200;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  }
  .placed-mech.selected .pin-popup { display: flex; }

  .mini-btn {
    background: var(--bg-elev);
    border: none;
    color: var(--text);
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .mini-btn:hover { background: var(--accent); color: var(--bg-deep); }
  .mini-btn.danger:hover { background: #ff6b6b; color: white; }
  .mini-btn .color-dot-mini {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
  }

  .arrow-popup {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 3px;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 3px;
    z-index: 120;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    pointer-events: auto;
  }

  .arrow-mode-banner {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--bg-deep);
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 120;
    animation: pulse 1.2s ease-in-out infinite;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    pointer-events: none;
  }
  @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244,122,76,0.6); } 50% { box-shadow: 0 0 0 8px rgba(244,122,76,0); } }

  .side-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 22px;
    height: 50px;
    cursor: pointer;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s ease;
  }
  .side-toggle:hover { color: var(--text); border-color: var(--border-light); }
  .side-toggle.left { left: 0; border-radius: 0 4px 4px 0; border-left: none; }
  .side-toggle.right { right: 0; border-radius: 4px 0 0 4px; border-right: none; }

  /* ========== HANGARS (RIGHT) ========== */
  .hangars { display: flex; flex-direction: column; min-height: 0; }
  .hangars-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }
  .hangars-content::-webkit-scrollbar { width: 6px; }
  .hangars-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  .hangar-section { border-bottom: 1px solid var(--border); }
  .hangar-section-header {
    padding: 7px 12px;
    background: rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    gap: 6px;
  }
  .hangar-section-header:hover { background: rgba(0,0,0,0.3); }
  .hangar-section-title {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .hangar-section[data-section="allies"] .hangar-section-title { color: var(--text); }
  .hangar-section[data-section="enemies"] .hangar-section-title { color: var(--enemy-glow); }
  .hangar-section-title .chev { transition: transform 0.2s ease; font-size: 10px; }
  .hangar-section.collapsed .chev { transform: rotate(-90deg); }
  .hangar-section.collapsed .hangar-section-body { display: none; }
  .hangar-section-actions { display: flex; gap: 4px; }

  .hangar-section-body {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .hangar {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 8px;
    border-left: 3px solid;
    transition: all 0.15s ease;
    position: relative;
  }
  .hangar.drag-over { background: #202841; border-left-width: 6px; }
  .hangar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    gap: 4px;
  }
  .hangar-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
  .hangar-name input {
    background: transparent;
    border: none;
    color: inherit;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex: 1;
    min-width: 0;
    padding: 2px 4px;
    border-radius: 2px;
    border: 1px solid transparent;
  }
  .hangar-name input:focus { outline: none; border-color: var(--border-light); background: var(--bg-deep); }
  .hangar-count {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 600;
    letter-spacing: 0.1em;
    white-space: nowrap;
    transition: color 0.15s ease;
  }
  /* v0.10.1: full progression palette based on operational status (alive count) */
  .hangar-count.full   { color: #22c55e; }              /* 5/5 — full health */
  .hangar-count.almost { color: #A3E635; }              /* 4/5 — lime, mild signal */
  .hangar-count.warn   { color: #FACC15; }              /* 3/5 — yellow warning */
  .hangar-count.danger { color: var(--accent); }        /* 2/5 — orange danger */
  .hangar-count.crit   { color: #ef4444; }              /* 1/5 — red critical */
  .hangar-count.wiped  { color: #ef4444; font-weight: 800; } /* 0/5 with mechs in hangar — eliminated */

  /* v0.10.1: wiped player visual cues — skull marker & strikethrough on name */
  .hangar-skull {
    color: #ef4444;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
  }
  .hangar-name.wiped input {
    text-decoration: line-through;
    text-decoration-color: rgba(239,68,68,0.7);
    text-decoration-thickness: 1.5px;
    color: var(--text-dim);
  }
  .hangar-actions {
    position: relative;
  }
  .hangar-action-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 2px;
    cursor: pointer;
    line-height: 1;
  }
  .hangar-action-btn:hover { color: var(--text); border-color: var(--border-light); }
  .hangar-actions-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 2px;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    padding: 3px;
    min-width: 130px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    display: none;
  }
  .hangar-actions-menu.open { display: block; }
  .hangar-actions-menu .menu-item {
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    color: var(--text);
  }
  .hangar-actions-menu .menu-item:hover { background: var(--accent); color: var(--bg-deep); }
  .hangar-actions-menu .menu-item.disabled {
    color: var(--text-dim);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
  }
  .hangar-actions-menu .menu-divider {
    height: 1px;
    background: var(--border);
    margin: 3px 0;
  }
  .hangar-actions-menu .menu-section-title {
    font-size: 8px;
    color: var(--text-dim);
    padding: 4px 8px 2px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  .hangar-actions-menu .menu-item.menu-item-all {
    color: var(--accent);
    font-weight: 700;
    border-left: 2px solid var(--accent);
    margin-bottom: 2px;
  }
  .hangar-actions-menu .menu-item.menu-item-all:hover {
    background: var(--accent);
    color: var(--bg-deep);
  }

  .hangar-mechs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-height: 28px;
    padding: 3px;
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
  }
  /* v1.3.0: when the weapons feature is enabled, the hangar holds .hangar-mech-entry wrappers
     (mech + weapons stacked). 3-column grid → 5 entries lay out as 3+2. The panel is sized
     (320px desktop) to accommodate this; below 768px the layout switches to mobile rules. */
  body.show-weapons-ui .hangar-mechs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .hangar-mech {
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative; /* v1.7.0: anchor for the order badge */
  }
  .hangar-mech:hover { border-color: currentColor; }
  .hangar-mech .role-dot { width: 5px; height: 5px; border-radius: 50%; }
  /* v1.7.0: use-order number, discreet inline style (option 1). No pill, just a light-colored
     digit before the role dot. Conveys planned order of use (1 = first) without dominating the
     chip. Shown on PC and mobile. */
  .hangar-mech .order-num {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    opacity: 0.8;
    min-width: 8px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .hangar-mech .name-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Drag feedback: source chip dimmed while dragging, hovered target chip gets an accent edge. */
  .hangar-mech.dragging { opacity: 0.4; }
  .hangar-mech.reordering { opacity: 0.5; box-shadow: 0 0 0 1px var(--accent); }
  .hangar-mech.reorder-target { border-color: var(--accent); box-shadow: 0 -2px 0 var(--accent) inset; }
  .hangar-mech .remove-x {
    margin-left: 1px;
    width: 12px; height: 12px;
    background: transparent;
    color: var(--text-dim);
    border: none;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: grid;
    place-items: center;
  }
  .hangar-mech:hover .remove-x { color: #ff6b6b; }
  /* v1.5.0: mobile-only inspect button on hangar chips. Hidden on desktop, where the entry
     wrapper click already opens the inspect card. Rendered on mobile to disambiguate from
     the tap-to-arm flow. The mobile-specific size override lives in the mobile @media block. */
  .hangar-mech .inspect-btn {
    display: none;
  }

  /* v0.10: destroyed chip — opacity + diagonal red slash + line-through */
  .hangar-mech.destroyed {
    cursor: not-allowed;
    opacity: 0.5;
    background:
      linear-gradient(135deg, transparent 47%, rgba(239,68,68,0.85) 47%, rgba(239,68,68,0.85) 53%, transparent 53%),
      var(--bg-deep);
  }
  .hangar-mech.destroyed:hover { border-color: var(--border-light); /* no color highlight */ }
  .hangar-mech.destroyed .name-text { text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.7); }
  .hangar-mech.destroyed .restore-btn {
    margin-left: 1px;
    width: 12px; height: 12px;
    background: transparent;
    color: var(--text-dim);
    border: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: grid;
    place-items: center;
    padding: 0;
  }
  .hangar-mech.destroyed:hover .restore-btn { color: #22c55e; }
  .hangar-mech.destroyed .restore-btn svg { display: block; width: 10px; height: 10px; }

  .hangar-empty {
    color: var(--text-dim);
    font-size: 9px;
    font-style: italic;
    padding: 3px;
    width: 100%;
    text-align: center;
  }

  /* ========== FOOTER ========== */
  footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-panel);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .phase-objective {
    flex: 1;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 12px;
  }
  .phase-objective:focus { outline: none; border-color: var(--accent); }
  .phase-objective::placeholder { color: var(--text-dim); }

  /* ========== TOAST ========== */
  .toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg-elev);
    border: 1px solid var(--accent);
    border-left: 4px solid var(--accent);
    color: var(--text);
    padding: 11px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 1000;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    max-width: 320px;
  }
  .toast.show { transform: translateX(0); }

  /* ========== MODAL ========== */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .modal-backdrop.show { display: flex; }
  /* Confirm dialogs always render above other modals (e.g., when triggered from inside Backup modal) */
  #modal-confirm { z-index: 1001; }
  /* v1.4.0 round 2: Settings is the "background hub" modal. When the user opens a sub-modal
     from Settings (Backup, Reset confirm), Settings stays visible behind it. To make this work
     visually, Settings drops to z-index 998 so every other modal (still at 999) overlays it.
     Closing the sub-modal reveals Settings again — closer to OS-native settings nav patterns. */
  #modal-settings { z-index: 998; }
  .modal {
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    width: min(680px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
  .modal-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .modal-head h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .modal-body { padding: 18px; line-height: 1.55; font-size: 13px; }
  .modal-body h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    margin-top: 18px;
    margin-bottom: 6px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .modal-body h3:first-child { margin-top: 0; }
  .modal-body ul { padding-left: 20px; margin-bottom: 6px; }
  .modal-body li { margin-bottom: 3px; }
  .modal-body kbd {
    background: var(--bg-elev);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    padding: 1px 6px;
    font-family: monospace;
    font-size: 11px;
  }
  .confirm-dialog .modal { width: min(440px, 90vw); }
  .confirm-dialog .modal-body { padding: 18px 20px; }
  .confirm-dialog .modal-body p { margin-bottom: 16px; }
  /* Allow showConfirm() messages to use \n for multi-line layout (e.g. bullet lists) */
  #confirm-message { white-space: pre-line; }
  .confirm-dialog .modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

  /* Share modal special */
  .share-textarea {
    width: 100%;
    min-height: 100px;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    color: var(--text);
    padding: 10px;
    font-family: monospace;
    font-size: 11px;
    border-radius: 4px;
    resize: vertical;
    word-break: break-all;
  }
  .share-textarea:focus { outline: none; border-color: var(--accent); }

  /* v1.0.3: optional strategy-name field in the share modal */
  .share-name-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
  }
  .share-name-label-text { font-size: 12px; color: var(--text-dim); font-weight: 500; }
  .share-name-input {
    width: 100%;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    color: var(--text);
    padding: 7px 10px;
    font-family: inherit;
    font-size: 13px;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .share-name-input:focus { outline: none; border-color: var(--accent); }
  .share-name-input::placeholder { color: var(--text-dim); opacity: 0.55; }

  /* v0.9: Backup modal specifics */
  .backup-section {
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    background: rgba(26,32,48,0.4);
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .backup-section h3 { margin-top: 0 !important; }
  .backup-section p { font-size: 12px; color: var(--text-dim); margin: 4px 0 10px; line-height: 1.5; }
  .backup-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .backup-summary {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 12px;
    margin: 8px 0;
  }
  .backup-summary-line { display: flex; gap: 6px; margin: 3px 0; align-items: center; }
  .backup-summary-line .ok { color: #22c55e; }
  .backup-summary-line .warn { color: #FACC15; }
  .backup-summary-line .err { color: #ef4444; }
  .backup-checks { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
  .backup-checks-sep { height: 1px; background: var(--border); margin: 4px 0 2px; }
  .backup-checks label {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
  }
  .backup-checks label.disabled { color: var(--text-dim); cursor: not-allowed; }
  .backup-checks input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
  }
  .backup-warn {
    color: #FACC15;
    font-size: 11px;
    margin: 8px 0 12px;
    padding: 6px 10px;
    background: rgba(250, 204, 21, 0.08);
    border-left: 2px solid #FACC15;
    border-radius: 2px;
  }

  /* v1.0.1: help modal — "don't show on page load" checkbox footer */
  .help-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .help-dont-show {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: var(--text-dim);
    padding: 4px 6px;
    border-radius: 3px;
  }
  .help-dont-show:hover { color: var(--text); }
  /* v1.4.0: discrete "More preferences →" link replacing the inline checkbox */
  .help-more-prefs {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 3px;
    transition: color 0.12s, background 0.12s;
  }
  .help-more-prefs:hover {
    color: var(--accent);
    background: rgba(244,122,76,0.06);
  }
  .help-dont-show input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
  }

  /* v1.0.3: "Don't ask again" checkbox in the confirm dialog. Shown only when showConfirm()
     is called with an actionId, so it stays out of the way for one-off / high-stakes confirms. */
  .confirm-dontask {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: var(--text-dim);
    margin: 10px 0 4px;
    padding: 4px 0;
  }
  .confirm-dontask:hover { color: var(--text); }
  .confirm-dontask input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
  }

  /* v1.0.2: What's new modal */
  .whatsnew-modal { width: min(560px, 92vw); }
  .whatsnew-version-block { margin-bottom: 16px; }
  .whatsnew-version-block:last-child { margin-bottom: 0; }
  .whatsnew-version-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }
  .whatsnew-version-tag {
    color: var(--accent);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
  }
  .whatsnew-version-date { color: var(--text-dim); font-size: 11px; }
  .whatsnew-items { list-style: none; padding: 0; margin: 0; }
  .whatsnew-items li {
    padding: 4px 0 4px 14px;
    position: relative;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
  }
  .whatsnew-items li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 600;
  }
  .whatsnew-overflow-note {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 10px;
    font-style: italic;
  }

  /* v0.8: small inline tag for modal annotations */
  .text-dim { color: var(--text-dim); font-size: 10px; font-weight: 500; letter-spacing: 1px; margin-left: 4px; }

  /* ========== v0.12: MAP SELECTOR MODAL ========== */
  .map-select-modal { width: min(700px, 92vw); max-height: 88vh; display: flex; flex-direction: column; }
  .map-select-modal .modal-body { overflow: hidden; display: flex; flex-direction: column; }
  .map-search-input {
    width: 100%;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 3px;
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
    margin-bottom: 10px;
  }
  .map-search-input:focus { border-color: var(--accent); }
  .map-search-input:disabled { color: var(--border-light); cursor: not-allowed; }
  .map-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }
  .map-filter-label {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    min-width: 48px;
    text-transform: uppercase;
  }
  .map-filter-buttons { display: flex; gap: 4px; }
  .map-filter-btn {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-light);
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .map-filter-btn:hover { border-color: var(--accent); }
  .map-filter-btn.active {
    background: var(--accent);
    color: var(--bg-deep);
    border-color: var(--accent);
    font-weight: 700;
  }
  .map-stats-line {
    font-size: 10px;
    color: var(--text-dim);
    margin: 10px 0 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .map-stats-line strong { color: var(--accent); font-weight: 700; }
  .map-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: max-content;
    align-items: start;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    padding: 2px;
    min-height: 0;
  }
  .map-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
    text-align: left;
    padding: 0;
    font: inherit;
    color: inherit;
    display: flex;
    flex-direction: column;
  }
  .map-card:hover { border-color: var(--border-light); background: #1e2538; }
  .map-card.active { border: 2px solid var(--accent); }
  .map-card-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--bg-deep);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
  }
  .map-card-info {
    padding: 5px 6px;
    flex-shrink: 0;
  }
  .map-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.04em;
    line-height: 1.15;
  }
  .map-card.active .map-card-name { color: var(--accent); font-weight: 700; }
  .map-card-meta {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 1px;
    letter-spacing: 0.1em;
  }
  .map-card-active-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    background: var(--accent);
    color: var(--bg-deep);
    font-size: 7px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
    letter-spacing: 0.1em;
  }
  .map-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-dim);
    font-size: 11px;
    padding: 40px 20px;
    font-style: italic;
  }
  .map-coming-soon {
    margin: 24px 0 12px;
    padding: 40px 20px;
    background: rgba(244,122,76,0.04);
    border: 1px dashed var(--accent);
    border-radius: 4px;
    text-align: center;
  }
  .map-coming-soon-icon { color: var(--accent); margin-bottom: 12px; }
  .map-coming-soon h3 {
    margin: 0 0 6px;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .map-coming-soon p {
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
  }
  .map-coming-soon button {
    margin-top: 14px;
  }

  /* ==================== v1.0.4: UNSAVED INDICATOR ==================== */
  /* Visible to the left of SHARE when state.dirty === true. Click opens the help-save modal. */
  .unsaved-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    transition: background 0.15s ease;
  }
  .unsaved-indicator:hover { background: rgba(244, 122, 76, 0.12); }
  .unsaved-indicator[hidden] { display: none !important; }
  .unsaved-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
  }
  /* Pulse animation: triggered by JS adding the .pulsing class for 2 seconds.
     Throttled in JS to fire at most once per 30s. */
  .unsaved-indicator.pulsing .unsaved-dot,
  .unsaved-indicator.pulsing .unsaved-label {
    animation: unsavedPulse 0.6s ease-in-out 3;
  }
  @keyframes unsavedPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  /* ==================== v1.0.4: HELP-SAVE MODAL ==================== */
  .helpsave-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 8px;
  }
  .helpsave-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    text-align: left;
    line-height: 1.4;
    height: auto;
    white-space: normal;
  }
  .helpsave-btn strong {
    font-size: 13px;
    letter-spacing: 0.5px;
  }
  .helpsave-hint {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
  }
  .helpsave-btn.primary .helpsave-hint { color: rgba(0,0,0,0.7); }
  .helpsave-tip {
    margin: 10px 0 0;
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
  }

  /* ==================== v1.1.0: MOBILE RESPONSIVE ==================== */
  /* Strategy: every mobile rule lives inside @media (max-width: 768px). Desktop is
     byte-for-byte unchanged above this breakpoint. The .mobile-only class is the
     visibility toggle: hidden by default, displayed at the breakpoint per element. */

  .mobile-only { display: none; }

  @media (max-width: 768px) {

    /* ---- Page shell ---- */
    body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    #app { padding-bottom: 56px; }
    @supports (padding: env(safe-area-inset-bottom)) {
      #app { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
    }

    /* v1.3.1: pin × is hidden on mobile to prevent accidental deletion. The info button
       (top-left) replaces it as the explicit entry point to the inspect card. Both buttons
       (info + halo) are revealed when the pin is in the .armed state — set by the tap handler
       on mobile (see pin pointerdown / pointerup). */
    .pin-delete { display: none !important; }
    .placed-mech.armed .pin-info { display: flex; }
    .pin-info { width: 24px; height: 24px; top: -20px; left: -20px; }
    .pin-info svg { width: 12px; height: 12px; }

    /* ---- Header: slim, hide brand text, hide buttons moved to drawer ---- */
    header {
      padding: 6px 8px;
      gap: 6px;
      flex-wrap: nowrap;
    }
    .mobile-burger-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text);
      width: 38px;
      height: 38px;
      border-radius: 5px;
      flex-shrink: 0;
      cursor: pointer;
    }
    .mobile-burger-btn:hover { border-color: var(--border-light); }
    .brand { gap: 0; }
    .brand-text { display: none; }
    .brand-mark { width: 30px; height: 30px; }
    .phase-row { flex: 1; min-width: 0; justify-content: center; display: flex; }
    .phase-tabs { gap: 3px; max-width: 100%; }
    .phase-tab {
      padding: 6px 6px;
      font-size: 0;
      letter-spacing: 0;
      min-width: 36px;
      gap: 4px;
    }
    /* v1.7.0: the desktop text label is in a span now. Hide it on mobile; the P1/P2/P3
       glyph is drawn by ::before. The note icon span keeps its own size (SVG-based). */
    .phase-tab .phase-tab-label { display: none; }
    .phase-tab::before {
      content: "P" attr(data-phase-mobile);
      font-size: 12px;
      font-family: 'Oswald', sans-serif;
      font-weight: 600;
      letter-spacing: 0.05em;
    }
    .phase-tab .phase-note-icon { width: 20px; height: 20px; }
    .phase-tab .phase-note-icon svg { width: 15px; height: 15px; }
    .header-actions { gap: 4px; flex-shrink: 0; }
    .header-actions #btn-backup,
    .header-actions #btn-help,
    .header-actions .reset-wrap,
    .header-actions #btn-share { display: none; }
    .unsaved-indicator { padding: 6px 8px; font-size: 10px; gap: 5px; }
    .unsaved-label { display: none; }
    .unsaved-dot { width: 9px; height: 9px; }

    /* ---- Main: single column, view switched via data-mobile-view ---- */
    main {
      grid-template-columns: 1fr !important;
      gap: 6px;
      padding: 6px;
      transition: none;
    }
    main[data-mobile-view="map"] .reserve,
    main[data-mobile-view="map"] .hangars { display: none; }
    main[data-mobile-view="reserve"] .map-area,
    main[data-mobile-view="reserve"] .hangars { display: none; }
    main[data-mobile-view="hangars"] .map-area,
    main[data-mobile-view="hangars"] .reserve { display: none; }

    /* ---- Reserve: 1-col (cards stack), tweak filter density ---- */
    .reserve .panel-header { display: none; }
    .reserve-tabs .btn.small { font-size: 9px; padding: 3px 5px; }
    .reserve-filters { padding: 8px 8px; gap: 6px; }
    .reserve-filters .filter-row { flex-wrap: wrap; gap: 4px; }
    .filter-pill { font-size: 11px; padding: 5px 8px; min-width: 32px; min-height: 30px; }
    .reset-filter-btn { padding: 5px 8px; font-size: 10px; }
    .search-input { padding: 9px 10px; font-size: 13px; }
    .mech-list { padding: 6px 8px; gap: 4px; }
    .mech-card { padding: 9px 10px; }
    .mech-card:hover { transform: none; background: var(--bg-elev); }
    .mech-card.armed-pick { border-color: var(--accent); background: rgba(244, 122, 76, 0.08); }
    .mech-card.armed-pick::after {
      content: "ARMED";
      position: absolute;
      top: 4px; right: 4px;
      background: var(--accent);
      color: var(--bg-deep);
      font-size: 8px;
      font-weight: 700;
      padding: 1px 4px;
      border-radius: 2px;
      letter-spacing: 0.1em;
      font-family: 'Oswald', sans-serif;
    }
    .mech-card { position: relative; }

    /* ---- Map area: collapse toolbar, free vertical space ---- */
    .map-area { min-height: 0; }
    .map-toolbar { padding: 6px; gap: 4px; flex-wrap: wrap; }
    .mobile-tools-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--bg-elev);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 7px 10px;
      border-radius: 4px;
      font-family: 'Oswald', sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      cursor: pointer;
      order: -1;
    }
    .mobile-tools-toggle .chev { transition: transform 0.2s ease; font-size: 10px; }
    .mobile-tools-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
    .map-toolbar .map-toolbar-group { display: none; flex-basis: 100%; flex-wrap: wrap; gap: 4px; }
    .map-toolbar.tools-expanded .map-toolbar-group { display: flex; }
    .map-toolbar .map-title {
      flex: 1;
      min-width: 0;
      padding: 5px 6px;
    }
    .map-toolbar .map-title-row { gap: 4px; justify-content: center; }
    .map-toolbar #map-title-text { font-size: 13px; }
    .map-toolbar #btn-fullscreen { display: none; }
    .free-arrow-btn, .beacon-btn { font-size: 10px; padding: 6px 8px; }
    .phase-clear-group .btn.small.danger { font-size: 10px; padding: 6px 10px; }
    .btn-move-arrows { padding: 6px 8px; }

    /* When armed, give the map an accent border to invite tap-to-place */
    body.is-armed #map-stage {
      box-shadow: inset 0 0 0 2px var(--accent);
      cursor: copy;
    }
    body.is-armed .hangar { border-style: dashed; border-left-style: solid; }
    body.is-armed .hangar:hover { background: rgba(244, 122, 76, 0.08); }

    /* ---- Hangars: segment control, only one side visible ---- */
    .hangars .panel-header { display: none; }
    .mobile-hangars-segment {
      display: flex;
      background: var(--bg-elev);
      border-bottom: 1px solid var(--border);
      padding: 5px;
      gap: 4px;
      flex-shrink: 0;
    }
    .mobile-segment-btn {
      flex: 1;
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-dim);
      padding: 9px 12px;
      font-family: 'Oswald', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      border-radius: 4px;
      cursor: pointer;
      min-height: 40px;
    }
    .mobile-segment-btn.active {
      background: var(--bg-deep);
      color: var(--text);
      border-color: var(--border);
    }
    .mobile-segment-btn[data-side="enemies"].active { color: var(--enemy-glow); border-color: rgba(239, 68, 68, 0.4); }
    .hangars.show-allies .hangar-section[data-section="enemies"],
    .hangars.show-enemies .hangar-section[data-section="allies"] { display: none; }
    .hangars.show-allies .hangar-section[data-section="allies"].collapsed .hangar-section-body,
    .hangars.show-enemies .hangar-section[data-section="enemies"].collapsed .hangar-section-body { display: flex; }
    .hangars.show-allies .hangar-section[data-section="allies"].collapsed .chev,
    .hangars.show-enemies .hangar-section[data-section="enemies"].collapsed .chev { transform: none; }
    .hangars .hangar-section-title .chev { display: none; }
    .hangars .hangar-section-header { cursor: default; }
    .hangars .hangar-section-header:hover { background: rgba(0,0,0,0.15); }
    .hangar { padding: 8px 10px; }
    .hangar-mech { padding: 7px 9px; font-size: 12px; min-height: 34px; }
    .hangar-mech .remove-x, .hangar-mech .restore-btn { width: 24px; height: 24px; min-width: 24px; }
    /* v1.5.0: mobile inspect button. 24x24 tactile target aligned with × / ↺ sizing.
       Margin-right separates it from the × so the user does not mistakenly tap remove. */
    .hangar-mech .inspect-btn {
      display: grid;
      place-items: center;
      width: 24px; height: 24px; min-width: 24px;
      margin-right: 2px;
      background: transparent;
      border: none;
      cursor: pointer;
      color: var(--text-dim);
      padding: 0;
    }
    .hangar-mech .inspect-btn svg { width: 16px; height: 16px; }
    /* v1.7.0: on mobile the 3-column chip grid crushed names to a single letter once the order
       number + inspect + remove buttons took their space. Switch to 2 columns so names are
       readable. Each chip still stacks its weapon chip underneath. */
    body.show-weapons-ui .hangar-mechs { grid-template-columns: repeat(2, 1fr); }
    .hangar-mechs { grid-template-columns: repeat(2, 1fr); }
    /* Name must be allowed to use the freed width; only ellipsize as a last resort. */
    .hangar-mech .name-text { font-size: 12px; }
    .hangar-mech .order-num { font-size: 11px; min-width: 10px; }
    .hangar-name input { font-size: 12px; padding: 4px 6px; }
    .hangar-empty { padding: 12px 8px; font-size: 11px; }

    /* ---- Footer: phase note compact, hide credits ---- */
    footer { padding: 6px 8px; gap: 6px; }
    .phase-objective { font-size: 12px; padding: 9px 10px; }
    .creator-credit { display: none; }

    /* ---- Mobile bottom navigation ---- */
    .mobile-bottom-nav {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 56px;
      background: var(--bg-panel);
      border-top: 1px solid var(--border);
      z-index: 80;
    }
    @supports (padding: env(safe-area-inset-bottom)) {
      .mobile-bottom-nav {
        height: calc(56px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
      }
    }
    .mobile-nav-btn {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--text-dim);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      cursor: pointer;
      position: relative;
      font-family: 'Oswald', sans-serif;
      transition: color 0.15s ease;
      padding: 6px 4px;
    }
    .mobile-nav-btn:active { color: var(--accent); }
    .mobile-nav-btn.active { color: var(--accent); }
    .mobile-nav-btn.active::before {
      content: '';
      position: absolute;
      top: 0;
      left: 25%; right: 25%;
      height: 2px;
      background: var(--accent);
    }
    .mobile-nav-label {
      font-size: 9px;
      letter-spacing: 0.1em;
      font-weight: 600;
    }
    .mobile-nav-badge {
      position: absolute;
      top: 4px;
      right: calc(50% - 24px);
      background: var(--accent);
      color: var(--bg-deep);
      font-size: 8px;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 8px;
      line-height: 1.3;
      letter-spacing: 0.03em;
      font-family: 'Oswald', sans-serif;
    }
    .mobile-nav-badge[hidden] { display: none; }

    /* ---- Armed banner: floats above bottom nav ---- */
    .mobile-armed-banner {
      display: flex;
      position: fixed;
      bottom: calc(56px + 6px);
      left: 8px; right: 8px;
      z-index: 79;
      background: rgba(244, 122, 76, 0.18);
      border: 1px solid var(--accent);
      border-radius: 6px;
      padding: 8px 10px;
      align-items: center;
      gap: 8px;
      color: var(--accent);
      box-shadow: 0 -4px 14px rgba(0,0,0,0.5);
    }
    @supports (padding: env(safe-area-inset-bottom)) {
      .mobile-armed-banner { bottom: calc(56px + 6px + env(safe-area-inset-bottom)); }
    }
    .mobile-armed-banner[hidden] { display: none; }
    .mobile-armed-icon { flex-shrink: 0; }
    .mobile-armed-text { flex: 1; line-height: 1.3; font-size: 11px; }
    .mobile-armed-text strong { font-family: 'Oswald', sans-serif; letter-spacing: 0.04em; font-size: 12px; }
    .mobile-armed-hint { color: var(--text-dim); font-size: 10px; display: block; margin-top: 1px; }
    .mobile-armed-cancel {
      background: transparent;
      border: 1px solid var(--accent);
      color: var(--accent);
      padding: 5px 10px;
      border-radius: 3px;
      font-family: 'Oswald', sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      cursor: pointer;
      flex-shrink: 0;
    }

    /* ---- Drawer (slide-in from left) ---- */
    .mobile-drawer-backdrop {
      display: flex;
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(2px);
      align-items: stretch;
    }
    .mobile-drawer-backdrop[hidden] { display: none; }
    .mobile-drawer {
      width: min(80vw, 320px);
      height: 100%;
      background: var(--bg-panel);
      border-right: 1px solid var(--border);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow-y: auto;
      animation: drawerSlideIn 0.22s ease;
    }
    @keyframes drawerSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
    .mobile-drawer-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 4px;
    }
    .mobile-drawer-title {
      font-family: 'Oswald', sans-serif;
      font-size: 13px;
      letter-spacing: 0.08em;
      color: var(--accent);
      font-weight: 600;
    }
    .mobile-drawer-body { display: flex; flex-direction: column; gap: 6px; }
    .mobile-drawer-item {
      background: var(--bg-elev);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 12px 14px;
      text-align: left;
      border-radius: 5px;
      font-family: 'Oswald', sans-serif;
      font-size: 12px;
      letter-spacing: 0.05em;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 46px;
    }
    .mobile-drawer-item:hover { border-color: var(--border-light); }
    .mobile-drawer-item.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--bg-deep);
      font-weight: 700;
    }
    .mobile-drawer-item.primary:hover { background: var(--accent-glow); }
    .mobile-drawer-item.danger { color: #ef4444; border-color: rgba(239,68,68,0.3); }
    .mobile-drawer-item.danger:hover { background: rgba(239,68,68,0.1); }
    .mobile-drawer-sep { height: 1px; background: var(--border); margin: 6px 0; }

    /* ---- Modals: full-screen on mobile ---- */
    /* v1.3.1: respect the device safe-area-top (notch / status bar). Without this, the
       sticky modal header is partially hidden under the status bar on Android/iOS. The
       header itself receives the inset so its own padding-top grows; the modal body
       starts right below the header as expected.
       Also: 100dvh (dynamic viewport height) replaces 100vh so the modal follows the visible
       viewport on Chrome Android (where the URL bar would otherwise overlap the modal top
       since 100vh is computed at initial state, before the URL bar appears). 100vh kept as
       fallback for older browsers. */
    .modal {
      width: 100% !important;
      max-width: none !important;
      height: 100vh;
      height: 100dvh;
      max-height: 100vh;
      max-height: 100dvh;
      border-radius: 0;
      border: none;
    }
    .confirm-dialog .modal {
      width: 100% !important;
      max-width: none !important;
      height: auto;
      max-height: 92vh;
      max-height: 92dvh;
      border-radius: 0;
    }
    .modal-head {
      padding: 12px;
      padding-top: calc(12px + env(safe-area-inset-top, 0px));
      position: sticky;
      top: 0;
      background: var(--bg-panel);
      z-index: 2;
    }
    .modal-head h2 { font-size: 14px; }
    .modal-body { padding: 12px; font-size: 13px; }
    .modal-actions { flex-direction: column !important; gap: 6px !important; }
    .modal-actions .btn { width: 100%; padding: 11px; font-size: 12px; }
    .helpsave-actions { gap: 8px; }
    .helpsave-btn { padding: 14px; }

    /* Map selector grid: 2 cols on phone */
    .map-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .map-search-input { padding: 9px 10px; font-size: 13px; }
    .map-filter-row { flex-wrap: wrap; gap: 5px; }
    .map-filter-btn { padding: 6px 10px; font-size: 11px; }

    /* Share + Backup textareas readable */
    .share-textarea { font-size: 11px; min-height: 80px; }

    /* ---- Toast: above bottom nav, centered. v1.1.1: opacity-based fade (the desktop
       slide-out via translateX(120%) doesn't work when the toast spans the full width,
       and translateY(120%) was only ~48px, not enough to clear the viewport). ---- */
    .toast {
      bottom: calc(56px + 70px) !important;
      right: 10px !important;
      left: 10px !important;
      text-align: center;
      transform: translateY(0) !important;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, visibility 0.25s ease;
      visibility: hidden;
    }
    @supports (padding: env(safe-area-inset-bottom)) {
      .toast { bottom: calc(56px + 70px + env(safe-area-inset-bottom)) !important; }
    }
    .toast.show {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    /* ---- Misc touch friendliness ---- */
    .panel-header { padding: 8px 12px; }
    /* Beacons get a slightly bigger resize handle for the finger */
    .beacon-resize { width: 18px; height: 18px; }

    /* v1.1.2 BUG FIX (5 redux): mobile arrow-popup with side-by-side buttons.
       Bigger touch targets, slightly more padding, and danger button style for delete. */
    .arrow-popup.mobile-arrow-popup { gap: 6px; padding: 5px; z-index: 130; }
    .arrow-popup.mobile-arrow-popup .mini-btn {
      padding: 8px 12px;
      font-size: 11px;
      min-height: 36px;
    }
    .arrow-popup.mobile-arrow-popup .mini-btn.danger {
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
      border: 1px solid rgba(239, 68, 68, 0.5);
    }

    /* v1.1.2 BUG FIX (3 redux): the previous padding-bottom approach was ignored by
       mobile Chrome/Safari in scroll height calculation (a long-standing browser quirk
       on flex scroll containers). Use a flex spacer pseudo-element instead - it's a
       real child node so the scroll engine accounts for it. The banner is ~46px tall,
       +6px gap to nav; 64px keeps the last item clearly above it. */
    body.is-armed .mech-list::after,
    body.is-armed .hangars-content::after {
      content: "";
      flex: 0 0 64px;
      width: 100%;
      pointer-events: none;
    }

    /* v1.1.1 BUG FIX (4): the CLEAR ALL dropdown (.phase-clear-menu) is positioned
       `right: 0` relative to its wrapper, which on mobile sits at the right edge of an
       already-tight toolbar row, pushing the menu off-screen to the left. On mobile,
       switch to fixed positioning spanning the viewport width. Same fix for the header
       RESET dropdown (.reset-menu) when it's visible on mobile (currently hidden, but
       defensive). */
    .phase-clear-menu.show,
    .reset-menu.show {
      position: fixed !important;
      top: auto !important;
      right: 8px !important;
      left: 8px !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      max-height: 60vh;
      overflow-y: auto;
      z-index: 90;
      /* Vertical placement: JS sets --menu-top to position right below the toolbar.
         Fallback: 120px from top (just under the header). */
      top: var(--menu-top, 120px) !important;
    }
    .phase-clear-menu .menu-item,
    .reset-menu .menu-item {
      padding: 12px 14px;
      font-size: 13px;
      min-height: 44px;
    }
  }

  /* Tablet: tighter 3-col layout, keep desktop interaction */
  @media (min-width: 769px) and (max-width: 1024px) {
    main { grid-template-columns: 210px 1fr 290px; gap: 8px; padding: 8px; }
    main.left-collapsed { grid-template-columns: 0 1fr 290px; }
    main.right-collapsed { grid-template-columns: 210px 1fr 0; }
    main.left-collapsed.right-collapsed { grid-template-columns: 0 1fr 0; }
    .panel-title { font-size: 10px; }
  }

  /* ==================== v1.3.0: WEAPONS ==================== */

  /* Show-weapons toggle at the top of the Hangars panel */
  .hangars-weapons-toggle {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    background: rgba(244,122,76,0.03);
  }
  .hangars-weapons-toggle .toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .hangars-weapons-toggle .toggle:hover { color: var(--text); }
  .hangars-weapons-toggle input[type="checkbox"] { display: none; }
  .hangars-weapons-toggle .switch {
    position: relative;
    width: 26px;
    height: 14px;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    transition: all 0.15s;
  }
  .hangars-weapons-toggle .switch::after {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    background: var(--text-dim);
    border-radius: 50%;
    top: 1px; left: 1px;
    transition: all 0.15s;
  }
  .hangars-weapons-toggle input:checked ~ .switch {
    background: rgba(244,122,76,0.2);
    border-color: var(--accent);
  }
  .hangars-weapons-toggle input:checked ~ .switch::after {
    left: 13px;
    background: var(--accent);
  }

  /* Hangar mech entry — v1.3.0: card englobante wrapping the mech chip + (optional) weapons chip.
     The slot color border (left, 3px) lives on this wrapper now, not on the inner mech chip,
     so the visual grouping reads as a single object. */
  .hangar-mech-entry {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 4px;
    transition: border-color 0.12s ease, background 0.12s ease;
    min-width: 0;
  }
  .hangar-mech-entry:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-light);
  }
  /* Slot-colored left border per side / per slot (set inline via JS — see renderHangarsSection).
     The inner chip mech intentionally loses its own border so the wrapper carries the identity. */
  .hangar-mech-entry > .hangar-mech {
    border: 1px solid transparent;
    background: transparent;
  }
  .hangar-mech-entry > .hangar-mech:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-light);
  }

  /* Weapons chip under the mech chip */
  .hangar-mech-weapons {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: rgba(244,122,76,0.08);
    color: var(--accent);
    border: 1px solid rgba(244,122,76,0.25);
    transition: all 0.12s ease;
    user-select: none;
    line-height: 1.4;
  }
  .hangar-mech-weapons:hover {
    background: rgba(244,122,76,0.18);
    border-color: var(--accent);
    color: var(--accent-glow);
  }
  .hangar-mech-weapons.empty {
    background: transparent;
    border: 1px dashed var(--border-light);
    color: var(--text-dim);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .hangar-mech-weapons.empty:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(244,122,76,0.05);
  }
  .hangar-mech-weapons.partial {
    /* one slot filled, one empty — slightly muted */
    background: rgba(244,122,76,0.05);
    border-color: rgba(244,122,76,0.15);
  }
  .hangar-mech-weapons.destroyed {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ============ WEAPON PICKER MODAL ============ */
  .weapon-picker-modal {
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
  }
  .weapon-picker-head-text { flex: 1; min-width: 0; }
  .weapon-picker-head-text h2 { margin: 0; }
  .weapon-picker-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 400;
    letter-spacing: 0.02em;
  }
  .weapon-picker-scope {
    display: flex;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    align-items: center;
  }
  .weapon-scope-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.12s;
  }
  .weapon-scope-tab:hover { color: var(--text); }
  .weapon-scope-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
  .weapon-picker-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 0.06em;
  }
  .weapon-picker-filters {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .weapon-picker-filters .search-row { display: flex; gap: 6px; align-items: center; }
  .weapon-picker-filters .search-input { flex: 1; }
  .weapon-picker-filters .filter-row {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
  }
  .weapon-picker-filters .label {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 4px;
    min-width: 32px;
  }
  .weapon-filter-pills { display: flex; gap: 4px; flex-wrap: wrap; }
  .weapon-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    min-height: 200px;
  }
  .weapon-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 4px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.1s;
  }
  .weapon-picker-row:hover { background: var(--bg-elev); }
  .weapon-picker-row.current {
    background: rgba(244,122,76,0.1);
    border-left-color: var(--accent);
  }
  .weapon-picker-row[data-rarity="Common"] { border-left-color: var(--rarity-common); }
  .weapon-picker-row[data-rarity="Uncommon"] { border-left-color: var(--rarity-uncommon); }
  .weapon-picker-row[data-rarity="Rare"] { border-left-color: var(--rarity-rare); }
  .weapon-picker-row[data-rarity="Epic"] { border-left-color: var(--rarity-epic); }
  .weapon-picker-row[data-rarity="Legendary"] { border-left-color: var(--rarity-legendary); }
  .weapon-picker-acr {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    background: var(--bg-deep);
    color: var(--text);
    padding: 3px 6px;
    border-radius: 3px;
    min-width: 38px;
    text-align: center;
    flex-shrink: 0;
  }
  .weapon-picker-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .weapon-picker-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .weapon-picker-rarity {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 1px;
  }
  .weapon-picker-row[data-rarity="Common"] .weapon-picker-rarity { color: var(--rarity-common); }
  .weapon-picker-row[data-rarity="Uncommon"] .weapon-picker-rarity { color: var(--rarity-uncommon); }
  .weapon-picker-row[data-rarity="Rare"] .weapon-picker-rarity { color: var(--rarity-rare); }
  .weapon-picker-row[data-rarity="Epic"] .weapon-picker-rarity { color: var(--rarity-epic); }
  .weapon-picker-row[data-rarity="Legendary"] .weapon-picker-rarity { color: var(--rarity-legendary); }
  .weapon-picker-cat {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    flex-shrink: 0;
  }
  .weapon-picker-empty {
    padding: 30px 20px;
    text-align: center;
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.06em;
  }

  /* ============ PIN INSPECT MODAL ============ */
  .pin-inspect-modal {
    width: 100%;
    max-width: 380px;
  }
  .pin-inspect-body { padding: 14px 16px; }
  .pin-inspect-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
  }
  .pin-inspect-role-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .pin-inspect-mech-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pin-inspect-role {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 2px 6px;
    border-radius: 2px;
    background: rgba(255,255,255,0.05);
  }
  .pin-inspect-role[data-role="Scout"] { color: var(--role-scout); }
  .pin-inspect-role[data-role="Attacker"] { color: var(--role-attacker); }
  .pin-inspect-role[data-role="Tank"] { color: var(--role-tank); }
  .pin-inspect-role[data-role="Support"] { color: var(--role-support); }
  .pin-inspect-rarity {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .pin-inspect-rarity[data-rarity="Common"] { color: var(--rarity-common); }
  .pin-inspect-rarity[data-rarity="Uncommon"] { color: var(--rarity-uncommon); }
  .pin-inspect-rarity[data-rarity="Rare"] { color: var(--rarity-rare); }
  .pin-inspect-rarity[data-rarity="Epic"] { color: var(--rarity-epic); }
  .pin-inspect-rarity[data-rarity="Legendary"] { color: var(--rarity-legendary); }
  .pin-inspect-side-badge {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .pin-inspect-side-badge[data-side="ally"] { color: #00E0FF; background: rgba(0,224,255,0.1); }
  .pin-inspect-side-badge[data-side="enemy"] { color: #ef4444; background: rgba(239,68,68,0.1); }
  .pin-inspect-side-badge[data-side="adhoc"] { color: var(--text-dim); background: rgba(139,149,168,0.1); }
  .pin-inspect-section-label {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 8px;
  }
  .pin-inspect-weapons { display: flex; flex-direction: column; gap: 6px; }
  .pin-inspect-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s;
    background: var(--bg-elev);
  }
  .pin-inspect-slot:hover {
    border-color: var(--accent);
    background: rgba(244,122,76,0.05);
  }
  .pin-inspect-slot.empty {
    border-style: dashed;
    background: transparent;
  }
  .pin-inspect-slot[data-rarity="Common"] { border-left: 3px solid var(--rarity-common); }
  .pin-inspect-slot[data-rarity="Uncommon"] { border-left: 3px solid var(--rarity-uncommon); }
  .pin-inspect-slot[data-rarity="Rare"] { border-left: 3px solid var(--rarity-rare); }
  .pin-inspect-slot[data-rarity="Epic"] { border-left: 3px solid var(--rarity-epic); }
  .pin-inspect-slot[data-rarity="Legendary"] { border-left: 3px solid var(--rarity-legendary); }
  .pin-inspect-slot-label {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    min-width: 42px;
  }
  .pin-inspect-slot-value {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .pin-inspect-slot.empty .pin-inspect-slot-value {
    color: var(--text-dim);
    font-size: 11px;
    font-style: italic;
    flex-direction: row;
    align-items: center;
  }
  .pin-inspect-weapon-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
  }
  /* v1.3.1: acronym badge in pin-inspect now mirrors the .weapon-picker-acr style for
     consistency between the picker and the inspect card. Was a small superscript before
     v1.3.1, now a left-aligned grey pill identical to the picker's. */
  .pin-inspect-weapon-acr {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    background: var(--bg-deep);
    color: var(--text);
    padding: 3px 6px;
    border-radius: 3px;
    min-width: 38px;
    text-align: center;
    flex-shrink: 0;
  }
  .pin-inspect-weapon-cat {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 1px;
  }

  /* v1.3.0: pin-inspect actions block (Mark destroyed / Back to hangar / Remove pin) */
  .pin-inspect-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  /* v1.4.0: pin-inspect note section — tactical note per (slot, mech) */
  .pin-inspect-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .pin-inspect-note .pin-inspect-section-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .pin-inspect-note-count {
    font-family: 'Oswald', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-left: auto;
    text-transform: none;
  }
  .pin-inspect-note-input {
    width: 100%;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    color: var(--text);
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 10px;
    min-height: 48px;
    transition: border-color 0.12s, background 0.12s;
    /* v1.4.0 round 3: auto-size to content. CSS field-sizing handles it on Chrome 123+,
       Edge 123+, Safari 17.4+. JS fallback on input event covers Firefox.
       resize:none is intentional — vertical resize would conflict with auto-grow (the user
       drag would set an explicit height that overrides scrollHeight on next input). */
    field-sizing: content;
    resize: none;
    overflow: hidden;
  }
  .pin-inspect-note-input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(244,122,76,0.04);
  }
  .pin-inspect-note-input::placeholder { color: var(--text-dim); font-style: italic; }
  .pin-inspect-action {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: left;
    transition: all 0.12s;
  }
  .pin-inspect-action:hover {
    border-color: var(--accent);
    background: rgba(244,122,76,0.06);
    color: var(--accent);
  }
  .pin-inspect-action.danger:hover {
    border-color: #ef4444;
    background: rgba(239,68,68,0.06);
    color: #ef4444;
  }

  /* v1.3.0: picker slot toggles (Slot 1 / Slot 2 ON/OFF) + trash button to clear */
  .weapon-picker-slot-toggles {
    display: flex;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(0,224,255,0.03);
    align-items: center;
  }
  /* Trash button placed to the right of the toggles — clears all currently-ON slots */
  .weapon-slot-clear-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-dim);
    width: 30px;
    height: 26px;
    border-radius: 3px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.12s;
  }
  .weapon-slot-clear-btn svg { width: 14px; height: 14px; display: block; }
  .weapon-slot-clear-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239,68,68,0.06);
  }
  .weapon-slot-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 3px;
    user-select: none;
    transition: background 0.1s;
  }
  .weapon-slot-toggle:hover { background: rgba(255,255,255,0.04); }
  .weapon-slot-toggle input[type="checkbox"] { display: none; }
  .weapon-slot-switch {
    position: relative;
    width: 24px;
    height: 13px;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: 7px;
    transition: all 0.15s;
    flex-shrink: 0;
  }
  .weapon-slot-switch::after {
    content: '';
    position: absolute;
    width: 9px; height: 9px;
    background: var(--text-dim);
    border-radius: 50%;
    top: 1px; left: 1px;
    transition: all 0.15s;
  }
  .weapon-slot-toggle input:checked ~ .weapon-slot-switch {
    background: rgba(244,122,76,0.2);
    border-color: var(--accent);
  }
  .weapon-slot-toggle input:checked ~ .weapon-slot-switch::after {
    left: 12px;
    background: var(--accent);
  }
  .weapon-slot-label {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
  }
  .weapon-slot-current {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-left: auto;
  }

  /* v1.3.0: META star button on each weapon picker row */
  .meta-star {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.12s;
  }
  .meta-star:hover { color: #fbbf24; }
  .meta-star.active { color: #fbbf24; }

  /* v1.3.0: z-index escalation for the weapon picker so it overlays the inspect card
     when opened from inside it. Voile plus léger so the inspect card stays perceptibly
     visible behind, which avoids the "rip-the-context" feeling that closing/reopening
     the inspect card would create. */
  .modal-backdrop.modal-z-top {
    z-index: 1100;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
  }

  /* Mobile tuning for the new modals */
  @media (max-width: 768px) {
    .weapon-picker-modal,
    .pin-inspect-modal {
      max-width: 100%;
      width: 100%;
      max-height: 100vh;
      max-height: 100dvh;
      height: 100vh;
      height: 100dvh;
      border-radius: 0;
    }
    .weapon-picker-list { max-height: none; flex: 1; }
    .hangar-mech-weapons { font-size: 11px; padding: 4px 8px; }
    .hangars-weapons-toggle { padding: 8px 12px; }
  }

  /* ==================== v1.3.0: WEAPONS-EQUIPPED COUNTER PER SIDE ==================== */
  /* Counter sits in the ALLIES / ENEMIES section header, right of the title. Hidden unless
     the weapons feature is on. Gradient palette is the *inverse* of the mech health counter:
     starting from gray (nothing equipped, neutral) and ending green (fully equipped). */
  .weapons-count {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    margin-left: 8px;
    display: none; /* shown only when body.show-weapons-ui is set */
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
  }
  body.show-weapons-ui .weapons-count { display: inline-block; }
  /* Gradient: 0 = neutral gray, then red → orange → yellow → lime → green as the user equips */
  .weapons-count.wc-zero     { color: var(--text-dim); border-color: var(--border-light); }
  .weapons-count.wc-low      { color: #ef4444; border-color: rgba(239,68,68,0.35); }
  .weapons-count.wc-mid-low  { color: var(--accent); border-color: rgba(244,122,76,0.4); }
  .weapons-count.wc-mid      { color: #FACC15; border-color: rgba(250,204,21,0.35); }
  .weapons-count.wc-mid-high { color: #A3E635; border-color: rgba(163,230,53,0.35); }
  .weapons-count.wc-full     { color: #22c55e; border-color: rgba(34,197,94,0.4); font-weight: 700; }

  /* ==================== v1.4.0: SETTINGS MODAL ==================== */
  .settings-modal {
    width: min(620px, 95vw);
  }
  .settings-body { padding: 18px 20px; }
  .settings-section {
    margin-bottom: 20px;
  }
  .settings-section:last-child { margin-bottom: 0; }
  .settings-section h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    /* v1.4.0 round 2: h3 hosts an inline SVG icon to the left of the label */
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .settings-h3-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--accent);
  }
  .settings-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 10px 0;
  }
  .settings-row + .settings-row {
    border-top: 1px solid rgba(255,255,255,0.04);
  }
  .settings-row-text {
    flex: 1;
    min-width: 0;
  }
  .settings-row-text strong {
    display: block;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 3px;
  }
  .settings-row-text p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-dim);
  }
  .settings-row > .btn {
    flex-shrink: 0;
    align-self: center;
  }
  /* Preferences row layout: full-width label with checkbox + text */
  .settings-row-pref {
    align-items: flex-start;
  }
  .settings-pref-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    width: 100%;
  }
  .settings-pref-label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
  }
  .settings-pref-label span { flex: 1; min-width: 0; }
  .settings-pref-label strong {
    display: block;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 3px;
  }
  .settings-pref-label p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-dim);
  }

  @media (max-width: 768px) {
    .settings-modal {
      max-width: 100%;
      width: 100%;
      max-height: 100vh;
      max-height: 100dvh;
      height: 100vh;
      height: 100dvh;
      border-radius: 0;
    }
    .settings-row { flex-direction: column; gap: 8px; }
    .settings-row > .btn { align-self: stretch; }
  }

  /* ==================== v1.3.0: HELP REDESIGN ==================== */
  /* Help modal is wider than default (more space for the 3 tabs and the reference grid).
     Body has tabs at the top, then the active pane below. Footer stays. */
  .help-modal {
    width: min(760px, 95vw);
  }
  .help-tabs {
    display: flex;
    gap: 0;
    padding: 0 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-deep);
  }
  .help-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.12s;
  }
  .help-tab:hover { color: var(--text); }
  .help-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
  /* Hide non-active panes entirely so only one pane is on screen at a time */
  .help-pane { display: none; }
  .help-pane.active { display: block; }
  .help-pane-intro {
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
    margin: 0 0 14px;
  }

  /* --- QUICKSTART --- */
  .help-quickstart {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .qs-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
  }
  .qs-step .qs-icon {
    width: 26px;
    height: 26px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 1px;
  }
  .qs-text { flex: 1; min-width: 0; }
  .qs-text strong {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: var(--text);
  }
  .qs-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-dim);
  }
  .qs-text p strong { display: inline; text-transform: none; font-family: inherit; font-size: inherit; letter-spacing: normal; color: var(--text); margin: 0; }

  /* --- CHEATSHEET --- */
  .help-cheatsheet {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .cs-group { display: flex; flex-direction: column; gap: 4px; }
  .cs-group-title {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }
  .cs-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    padding: 4px 0;
    font-size: 13px;
    align-items: center;
  }
  .cs-row kbd {
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    padding: 2px 6px;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    color: var(--text);
    margin-right: 4px;
  }
  .cs-row span { color: var(--text-dim); line-height: 1.4; }

  /* v1.3.1: platform-aware cheatsheet sections. Desktop sees Keyboard + Mouse + Hangars
     (shared). Mobile sees Touch on map + Mobile navigation + Hangars (shared). Sections
     without a data-platform attribute are visible on both. */
  .cs-group[data-platform="mobile"] { display: none; }
  @media (max-width: 768px) {
    .cs-group[data-platform="desktop"] { display: none; }
    .cs-group[data-platform="mobile"] { display: flex; }
  }

  /* --- REFERENCE (collapsible sections) --- */
  .help-section {
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.015);
  }
  .help-section summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.12s;
  }
  .help-section summary::-webkit-details-marker { display: none; }
  .help-section summary::before {
    content: '▸';
    font-size: 10px;
    color: var(--text-dim);
    transition: transform 0.15s ease;
    display: inline-block;
  }
  .help-section[open] summary::before { transform: rotate(90deg); }
  .help-section summary:hover { color: var(--accent); }
  .help-section[open] summary {
    color: var(--accent);
    border-bottom: 1px solid var(--border);
  }
  .help-section ul {
    padding: 10px 14px 12px 32px;
    margin: 0;
    line-height: 1.55;
    font-size: 13px;
  }
  .help-section li { margin-bottom: 4px; }
  .help-section ul ul { padding-top: 4px; padding-bottom: 0; }

  /* Mobile help adjustments */
  @media (max-width: 768px) {
    .help-modal {
      max-width: 100%;
      width: 100%;
      max-height: 100vh;
      max-height: 100dvh;
      height: 100vh;
      height: 100dvh;
      border-radius: 0;
    }
    .cs-row { grid-template-columns: 1fr; gap: 2px; }
    .help-tabs { padding: 0 8px; }
    .help-tab { padding: 10px 10px; font-size: 10px; letter-spacing: 0.08em; }
  }