:root {
    /* Palette aligned with ktservitor.app's dark theme */
    --bg: #0f1115;
    --bg-gradient: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
    --panel: #151822e6;
    --panel-solid: #151822;
    --border: #ffffff1a;
    --border-bright: #ffffff33;
    --red: #c0392b;
    --gold: #ff6b35;
    --accent: #ff6b35;
    --accent-glow: #ff6b354d;
    --blue: #2a9dd4;
    --text: #e6e6e6;
    --dim: #9aa0aa;
    --scan: rgba(255,107,53,0.012);
    --roster-panel-width: 280px;
    --toolbar-height: 28px;
    --map-area-left: var(--roster-panel-width);
    --map-area-right: var(--roster-panel-width);
    --selection-half-width: calc((100vw - 2 * var(--roster-panel-width)) / 2);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--bg-gradient), var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--scan) 2px, var(--scan) 4px);
    pointer-events: none;
    z-index: 100;
  }

  /* ── TOOLBAR ── */
  .toolbar {
    background: var(--panel);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    position: relative;
    z-index: 60; /* above lateral roster panels (50) so menus stay visible */
    margin-left: var(--roster-panel-width); /* Space for left roster */
    margin-right: var(--roster-panel-width); /* Space for right roster */
    min-height: var(--toolbar-height);
  }

  .toolbar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red) 30%, var(--red) 70%, transparent);
    opacity: 0.35;
  }

  /* Toolbar controls: match roster-select (28px) height */
  .toolbar .dropdown-trigger,
  .toolbar .token-size-trigger,
  .toolbar .mode-toggle-btn,
  .toolbar .fin-btn {
    font-size: 13px;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .toolbar .dropdown-trigger {
    padding-left: 12px;
    padding-right: 12px;
  }

  .toolbar .token-size-trigger {
    padding-left: 12px;
    padding-right: 12px;
  }

  .toolbar .mode-toggle-btn,
  .toolbar .fin-btn {
    padding-left: 14px;
    padding-right: 14px;
  }

  .toolbar .dropdown-trigger .arrow,
  .toolbar .token-size-trigger .arrow {
    font-size: 11px;
  }

  .toolbar .settings-trigger {
    padding: 0 10px;
    min-height: 28px;
  }

  .toolbar .settings-gear {
    font-size: 14px;
  }

  .toolbar #white-token-size,
  .toolbar .roster-size-select {
    font-size: 13px;
    height: auto;
    min-height: 28px;
    padding: 0 6px;
    box-sizing: border-box;
  }

  .toolbar .token-add-btn {
    width: 28px;
    height: auto;
    min-height: 28px;
    align-self: stretch;
  }

  .toolbar > div {
    display: flex;
    align-items: stretch;
  }

  .toolbar .token-size-dropdown,
  .toolbar .dropdown-wrap {
    display: flex;
    align-items: stretch;
    height: 100%;
    overflow: visible;
  }

  .toolbar .dropdown-trigger,
  .toolbar .token-size-trigger,
  .toolbar .mode-toggle-btn,
  .toolbar .fin-btn,
  .toolbar .token-add-btn,
  .toolbar #white-token-size {
    height: 100%;
  }

  /* ── DROPDOWN ── */
  .dropdown-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border-bright);
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 7px 12px;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 220px;
    user-select: none;
  }

  .dropdown-trigger:hover {
    border-color: var(--gold);
    color: var(--gold);
  }

  .dropdown-trigger.open {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212,160,23,0.05);
  }

  .dropdown-trigger .selected-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dropdown-trigger .arrow {
    font-size: 9px;
    transition: transform 0.2s;
    color: var(--dim);
    flex-shrink: 0;
  }

  .dropdown-trigger.open .arrow {
    transform: rotate(180deg);
    color: var(--gold);
  }

  .crit-op-dropdown {
    border-left: 1px solid var(--border);
  }

  .crit-op-dropdown .dropdown-trigger {
    min-width: 150px;
  }

  .crit-op-dropdown .dropdown-menu {
    min-width: 260px;
  }

  /* ── DROPDOWN MENU ── */
  .dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: var(--panel-solid);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-bright);
    z-index: 80;
    display: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-bright) transparent;
  }

  .dropdown-menu.open { display: block; }

  .dropdown-group-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--red);
    text-transform: uppercase;
    padding: 12px 14px 8px;
    border-top: 1px solid var(--border);
    background: rgba(192,57,43,0.04);
  }

  .dropdown-group-label:first-child { border-top: none; }

  .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 22px;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--dim);
    cursor: pointer;
    transition: all 0.1s;
    border-left: 2px solid transparent;
  }

  .dropdown-item:hover {
    background: rgba(255,255,255,0.03);
    color: var(--text);
    border-left-color: var(--border-bright);
  }

  .dropdown-item.active {
    color: var(--gold);
    border-left-color: var(--gold);
    background: rgba(212,160,23,0.05);
  }

  .dropdown-item .item-num {
    font-size: 9px;
    color: var(--dim);
    min-width: 16px;
    opacity: 0.6;
  }

  .dropdown-item.active .item-num { color: var(--gold); opacity: 1; }

  /* ── CRIT / TAC OP CARD VIEWERS ── */
  #crit-op-dialog,
  #tac-op-dialog {
    width: min(720px, calc(100vw - 48px));
    height: min(860px, calc(100vh - 48px));
    padding: 0;
    border: 1px solid var(--border-bright);
    background: var(--panel-solid);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--text);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85);
  }

  #crit-op-dialog::backdrop,
  #tac-op-dialog::backdrop {
    background: rgba(0, 0, 0, 0.72);
  }

  #map-import-dialog {
    width: min(420px, calc(100vw - 48px));
    padding: 0;
    border: 1px solid var(--border-bright);
    background: var(--panel-solid);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--text);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85);
  }

  #map-import-dialog::backdrop {
    background: rgba(0, 0, 0, 0.72);
  }

  .map-import-inner {
    display: flex;
    flex-direction: column;
  }

  .map-import-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .map-import-row {
    display: flex;
    gap: 12px;
  }

  .map-import-row .map-import-field {
    flex: 1;
  }

  .map-import-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--dim);
    text-transform: uppercase;
  }

  .map-import-field input,
  .map-import-field select {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-bright);
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    padding: 7px 8px;
    border-radius: 2px;
  }

  .map-import-field input:focus,
  .map-import-field select:focus {
    outline: none;
    border-color: var(--gold);
  }

  .map-import-hint {
    font-size: 10px;
    line-height: 1.5;
    color: var(--dim);
    margin: -4px 0 0;
  }

  .map-import-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
  }

  .map-import-footer button {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--border-bright);
    color: var(--text);
  }

  .map-import-footer button:hover {
    border-color: var(--dim);
  }

  .map-import-footer .map-import-submit {
    background: rgba(255,107,53,0.18);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-weight: bold;
  }

  .map-import-footer .map-import-submit:hover {
    background: rgba(255,107,53,0.32);
  }

  .dropdown-item.custom-map-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .dropdown-item-delete {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border: 1px solid var(--border-bright);
    border-radius: 2px;
    color: var(--dim);
    cursor: pointer;
  }

  .dropdown-item-delete:hover {
    border-color: var(--red);
    color: var(--red);
  }

  .crit-op-dialog-inner,
  .tac-op-dialog-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .crit-op-dialog-header,
  .tac-op-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 10px 14px 10px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--gold);
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  .crit-op-dialog-header button,
  .tac-op-dialog-header button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-bright);
    background: transparent;
    color: var(--dim);
    font: 20px/1 'Share Tech Mono', monospace;
    cursor: pointer;
  }

  .crit-op-dialog-header button:hover,
  .tac-op-dialog-header button:hover {
    border-color: var(--gold);
    color: var(--gold);
  }

  .crit-op-dialog-image-wrap,
  .tac-op-dialog-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    box-sizing: border-box;
  }

  #crit-op-dialog-image,
  #tac-op-dialog-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* ── OPACITY CONTROL (inside settings menu) ── */
  .opacity-ctrl {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .opacity-ctrl label {
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--dim);
  }

  .opacity-val {
    font-size: 10px;
    color: var(--gold);
    min-width: 34px;
    text-align: right;
  }

  input[type=range] {
    width: 80px;
    accent-color: var(--gold);
    cursor: pointer;
  }

  /* ── SETTINGS DROPDOWN (gear) — match map / measure dropdown menus ── */
  .settings-trigger {
    min-width: 0;
    padding: 5px 10px;
    gap: 6px;
  }

  .settings-gear {
    font-size: 14px;
    line-height: 1;
  }

  .settings-menu {
    /* Positioning overridden below after .token-size-menu (same specificity otherwise). */
    min-width: 260px;
    padding: 0;
    background: var(--panel-solid);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-bright);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75);
  }

  .settings-section {
    padding: 0;
  }

  .settings-section + .settings-section {
    border-top: none;
  }

  .settings-section-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--red);
    text-transform: uppercase;
    padding: 12px 14px 8px;
    border-top: 1px solid var(--border);
    background: rgba(192, 57, 43, 0.08);
    margin-bottom: 0;
  }

  .settings-section:first-child .settings-section-label {
    border-top: none;
  }

  .settings-opacity {
    margin: 0;
    padding: 10px 14px 12px 22px;
    border: none;
    border-left: 2px solid transparent;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 1;
    min-width: 0;
  }

  .settings-opacity input[type=range] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  .settings-opacity .opacity-val {
    font-size: 12px;
    color: var(--gold);
    min-width: 40px;
    flex-shrink: 0;
  }

  .settings-cam-row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    align-items: stretch;
  }

  .settings-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 14px 12px 22px;
    border-left: 2px solid transparent;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--text);
  }

  .settings-checkbox-row:hover {
    border-left-color: var(--border-bright);
  }

  .settings-checkbox-row input[type=checkbox] {
    accent-color: var(--gold);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
  }

  .settings-menu .token-radius-btn {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0;
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 10px 14px 10px 22px;
    cursor: pointer;
    transition: all 0.1s;
    text-align: left;
    white-space: nowrap;
    box-shadow: none;
  }

  .settings-menu .token-radius-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--gold);
    border-left-color: var(--gold);
  }

  .settings-menu .token-radius-btn.active {
    color: var(--gold);
    border-left-color: var(--gold);
    background: rgba(212, 160, 23, 0.12);
    box-shadow: none;
  }

  .settings-menu .token-radius-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--dim);
  }

  .settings-menu .token-radius-btn:disabled:hover {
    background: transparent;
    color: var(--dim);
    border-left-color: transparent;
  }

  /* ── SHORTCUTS NOTICE DIALOG ── */
  #shortcuts-notice-dialog {
    border: 1px solid var(--border-bright);
    background: var(--panel);
    color: var(--text);
    padding: 0;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.85);
    z-index: 10000;
    max-width: min(420px, calc(100vw - 2rem));
    width: 100%;
  }

  #shortcuts-notice-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
  }

  .shortcuts-notice-inner {
    display: flex;
    flex-direction: column;
    max-height: min(80vh, 560px);
  }

  .shortcuts-notice-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border);
  }

  .shortcuts-notice-scroll {
    overflow-y: auto;
    padding: 8px 16px 12px;
  }

  .shortcuts-notice-group {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--dim);
    margin: 12px 0 6px;
    text-transform: uppercase;
  }

  .shortcuts-notice-group:first-child {
    margin-top: 4px;
  }

  .shortcuts-notice-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--text);
  }

  .shortcuts-notice-row span {
    margin-left: 4px;
    color: var(--dim);
  }

  .shortcuts-notice-row kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    padding: 2px 7px;
    border: 1px solid var(--border-bright);
    background: rgba(0, 0, 0, 0.35);
    color: var(--gold);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    border-radius: 2px;
  }

  .shortcuts-notice-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--border);
  }

  .shortcuts-notice-footer button {
    background: transparent;
    border: 1px solid var(--border-bright);
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 6px 14px;
    cursor: pointer;
  }

  .shortcuts-notice-footer button:hover {
    border-color: var(--gold);
    color: var(--gold);
  }

  /* ── NAV BUTTONS ── */
  .nav-btns {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    padding-left: 0;
    border-left: 1px solid var(--border);
  }

  .nav-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-left: none;
    color: var(--dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-btn:first-child {
    border-left: 1px solid var(--border);
  }

  .nav-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212,160,23,0.06);
  }

  /* ── TOKEN TOOL ── */
  .token-panel {
    display: flex;
    align-items: center;
    gap: 0;
    padding-left: 0;
    border-left: 1px solid var(--border);
    flex-shrink: 0;
  }

  .token-panel-label {
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--dim);
    white-space: nowrap;
  }

  .token-size-dropdown {
    position: relative;
    flex-shrink: 0;
  }

  .token-size-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--bg);
    border: 1px solid var(--border-bright);
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    user-select: none;
    min-width: 80px;
  }

  .token-size-trigger:hover,
  .token-size-trigger.open {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212,160,23,0.05);
  }

  .token-size-trigger .arrow {
    font-size: 8px;
    color: var(--dim);
    transition: transform 0.2s;
    margin-left: auto;
  }

  .token-size-trigger.open .arrow {
    transform: rotate(180deg);
    color: var(--gold);
  }

  .token-size-trigger.tool-active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212,160,23,0.08);
  }

  .token-size-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: max(100%, 220px);
    width: max-content;
    max-width: 320px;
    background: var(--panel-solid);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-bright);
    z-index: 80;
    display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  }

  .token-size-menu.open { display: block; }

  /* Settings gear is on the right edge — open leftward so it stays over the map, not under the roster. */
  #settings-menu.token-size-menu.settings-menu {
    left: auto;
    right: 0;
    width: 260px;
    min-width: 260px;
    max-width: min(280px, calc(100vw - 24px));
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible;
  }

  #settings-dropdown {
    overflow: visible;
  }

  .token-size-item {
    padding: 7px 14px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--dim);
    cursor: pointer;
    transition: all 0.1s;
    border-left: 2px solid transparent;
  }

  .token-size-item:hover {
    background: rgba(255,255,255,0.03);
    color: var(--text);
    border-left-color: var(--border-bright);
  }

  .token-size-item.active {
    color: var(--gold);
    border-left-color: var(--gold);
    background: rgba(255,107,53,0.08);
  }

  .radius-custom-row {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: default;
    border-top: 1px solid var(--border);
    padding: 6px 10px;
  }

  .radius-custom-input {
    width: 64px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-bright);
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    padding: 4px 6px;
    border-radius: 2px;
  }

  .radius-custom-input:focus {
    outline: none;
    border-color: var(--gold);
  }

  .radius-custom-apply {
    background: rgba(255,107,53,0.15);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    padding: 4px 8px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.1s;
  }

  .radius-custom-apply:hover {
    background: rgba(255,107,53,0.3);
  }

  .token-color-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    position: relative;
  }

  .token-color-btn:hover { transform: scale(1.15); }

  .token-color-btn.selected {
    border-color: #fff;
    box-shadow: 0 0 6px rgba(255,255,255,0.4);
    transform: scale(1.15);
  }

  .token-add-btn {
    background: transparent;
    border: 1px dashed var(--border-bright);
    color: var(--dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    padding-bottom: 1px;
  }

  .token-add-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
  }

  .white-token-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff, #e8e8e8 60%, #c0c0c0);
    border: 2px solid #d0d0d0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }

  .fin-btn {
    background: rgba(39,174,96,0.2);
    border: 1px solid #27ae60;
    color: #27ae60;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 1px;
  }

  .fin-btn:hover {
    background: rgba(39,174,96,0.4);
    border-color: #2ecc71;
    color: #2ecc71;
  }

  .deploy-btn {
    background: rgba(212,160,23,0.18);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: bold;
    padding: 0 14px;
    min-height: 28px;
    height: 100%;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-sizing: border-box;
  }

  .deploy-btn:hover:not(:disabled) {
    background: rgba(212,160,23,0.32);
    border-color: #e0b83a;
    color: #e0b83a;
  }

  .deploy-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .map-rotate-btn {
    background: rgba(255,107,53,0.12);
    border: 1px solid var(--border-bright);
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    font-weight: bold;
    padding: 0 12px;
    min-height: 28px;
    height: 100%;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 1px;
    box-sizing: border-box;
  }

  .map-rotate-btn:hover {
    background: rgba(255,107,53,0.28);
    border-color: var(--gold);
    color: var(--gold);
  }

  .map-rotate-btn.active {
    background: rgba(255,107,53,0.28);
    border-color: var(--gold);
    color: var(--gold);
  }

  .toolbar .deploy-btn {
    font-size: 13px;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 28px;
    display: flex;
    align-items: center;
  }

  .mode-toggle-btn {
    background: rgba(42,157,212,0.2);
    border: 1px solid #2a9dd4;
    color: #2a9dd4;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .mode-toggle-btn:hover {
    background: rgba(42,157,212,0.35);
    border-color: #3db8f5;
    color: #3db8f5;
  }

  .mode-toggle-btn.strategy-mode {
    background: rgba(230,126,34,0.2);
    border-color: #e67e22;
    color: #e67e22;
  }

  .mode-toggle-btn.strategy-mode:hover {
    background: rgba(230,126,34,0.35);
    border-color: #f39c12;
    color: #f39c12;
  }

  .token-clear-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .token-clear-btn:hover { border-color: var(--red); color: var(--red); }

  .token-radius-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .token-radius-btn:hover { border-color: var(--gold); color: var(--gold); }

  .token-radius-btn.active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212,160,23,0.1);
    box-shadow: 0 0 6px rgba(212,160,23,0.2);
  }

  /* Map area cursor when hovering token */
  .map-area.token-hover { cursor: grab; }
  .map-area.token-drag  { cursor: grabbing; }

  .measure-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .measure-btn:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(192,57,43,0.06);
  }

  .measure-btn.active {
    border-color: var(--red);
    color: var(--red);
    background: rgba(192,57,43,0.1);
    box-shadow: 0 0 8px rgba(192,57,43,0.2);
  }

  .measure-btn .icon { font-size: 13px; }

  /* Measure crosshair cursor */
  .map-area.measuring { cursor: crosshair; }

  /* Measure tooltip floating */
  #measure-tooltip {
    position: absolute;
    background: rgba(10,14,19,0.92);
    border: 1px solid var(--red);
    color: var(--red);
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 6px 12px;
    pointer-events: none;
    display: none;
    white-space: nowrap;
    box-shadow: 0 0 12px rgba(192,57,43,0.25);
    z-index: 20;
    transform: translate(12px, -50%);
  }

  /* Reset measure button */
  .measure-clear {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    padding: 5px 9px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }

  .measure-clear:hover {
    border-color: var(--red);
    color: var(--red);
  }

  .arrow-color-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }

  .arrow-color-btn:hover {
    border-color: var(--gold);
    transform: scale(1.1);
  }

  /* ── MAP AREA ── */
  .map-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #1a2530;
    margin-left: 280px; /* Space for left roster */
    margin-right: 280px; /* Space for right roster */
  }

  canvas {
    display: block;
    width: 100%;
    height: 100%;
  }

  .empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    pointer-events: none;
    transition: opacity 0.3s;
  }

  .empty-state .skull { font-size: 52px; opacity: 0.08; }

  .empty-state p {
    font-size: 10px;
    letter-spacing: 4px;
    color: var(--dim);
    text-transform: uppercase;
  }

  .map-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 8px 16px;
    background: linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    pointer-events: none;
  }

  .map-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(212,160,23,0.5);
  }

  .map-counter {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--dim);
  }

  /* ── TOKEN ROSTER PANEL ── */
  .token-roster {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--roster-panel-width);
    height: 100%;
    background: var(--panel);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-right: 1px solid var(--border-bright);
    z-index: 50;
    overflow-y: auto;
    transition: left 0.3s, right 0.3s;
  }

  .token-roster.swapped {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--border-bright);
  }

  .token-roster-right {
    position: fixed;
    right: 0;
    top: 0;
    width: var(--roster-panel-width);
    height: 100%;
    background: rgba(26,16,10,0.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-left: 1px solid rgba(255,107,53,0.3);
    z-index: 50;
    overflow-y: auto;
    transition: left 0.3s, right 0.3s;
  }

  .token-roster-right.swapped {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid rgba(230,126,34,0.3);
  }

  .roster-header {
    padding: 0;
    gap: 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background: rgba(0,0,0,0.2);
  }

  .roster-swap-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-left: none;
    color: var(--gold);
    font-size: 16px;
    width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }

  .roster-swap-btn:hover {
    background: rgba(212,160,23,0.2);
    border-color: var(--gold);
  }

  .roster-load-btn {
    background: rgba(42,157,212,0.15);
    border: 1px solid #2a9dd4;
    color: #2a9dd4;
    font-size: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    margin-left: auto;
    margin-right: 8px;
  }

  .roster-load-btn:hover {
    background: rgba(42,157,212,0.3);
    border-color: #3db8f5;
  }

  .roster-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--gold);
    cursor: pointer;
    user-select: none;
  }
  
  .roster-title:hover {
    opacity: 0.8;
  }

  .roster-select {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--gold);
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-right: none;
    padding: 0 8px;
    height: 28px;
    box-sizing: border-box;
    cursor: pointer;
    text-transform: uppercase;
    flex: 1;
    min-width: 0;
    transition: all 0.15s;
  }

  .roster-select:hover {
    background: rgba(212,160,23,0.1);
    border-color: var(--gold);
  }

  .roster-select:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(212,160,23,0.15);
  }

  .roster-vp {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.15);
    border-bottom: 1px solid var(--border);
  }

  .tac-op-picker {
    position: relative;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
  }

  .tac-op-trigger.dropdown-trigger {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 10px 0 12px;
    border: none;
    box-sizing: border-box;
    color: var(--gold);
    text-align: left;
  }

  .tac-op-trigger .selected-label {
    min-width: 0;
  }

  .tac-op-menu.dropdown-menu {
    top: 100%;
    left: 0;
    right: 0;
    min-width: 100%;
    max-height: min(440px, calc(100vh - 170px));
    z-index: 100;
  }

  .tac-op-menu .dropdown-item {
    align-items: flex-start;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .tac-op-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: var(--text);
  }

  .tac-op-item-text > span {
    color: var(--dim);
    font-size: 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  .tac-op-menu .dropdown-item.active .tac-op-item-text,
  .tac-op-menu .dropdown-item:hover .tac-op-item-text {
    color: var(--gold);
  }

  .roster-vp-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .roster-vp-label {
    font-size: 8px;
    letter-spacing: 1.5px;
    color: var(--dim);
    text-transform: uppercase;
  }

  .roster-vp-controls {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .roster-vp-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 10px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: bold;
  }

  .roster-vp-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--gold);
    color: var(--gold);
  }

  .roster-vp-value {
    font-size: 22px;
    color: var(--gold);
    font-weight: 700;
    min-width: 36px;
    text-align: center;
  }

  .roster-token-controls {
    padding: 0;
    background: rgba(0,0,0,0.15);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 0;
    align-items: stretch;
  }

  .roster-size-select {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-right: none;
    color: var(--text);
    font-size: 11px;
    padding: 0;
    height: 28px;
    box-sizing: border-box;
    font-family: 'Share Tech Mono', monospace;
    cursor: pointer;
  }

  .roster-size-select:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--gold);
  }

  /* Left roster (grey) - dark grey background */
  .roster-size-left {
    background: rgba(20,30,40,0.8);
  }

  .roster-size-left:hover {
    background: rgba(30,40,50,0.9);
  }

  /* Right roster (orange) - dark orange background */
  .roster-size-right {
    background: rgba(30,20,10,0.8);
  }

  .roster-size-right:hover {
    background: rgba(40,25,12,0.9);
  }

  .roster-add-token-btn {
    background: rgba(212,160,23,0.2);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 16px;
    width: 28px;
    height: 28px;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: bold;
    flex-shrink: 0;
  }

  .roster-add-token-btn:hover {
    background: rgba(212,160,23,0.35);
  }

  .roster-close {
    background: transparent;
    border: none;
    color: var(--dim);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
  }

  .roster-close:hover { color: var(--text); }

  .roster-group {
    border-bottom: 1px solid var(--border);
  }

  .roster-group-header {
    padding: 10px 14px 6px;
    font-size: 8px;
    letter-spacing: 3px;
    color: var(--red);
    text-transform: uppercase;
    background: rgba(192,57,43,0.04);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .roster-group-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
  }

  .roster-item {
    padding: 8px 8px;
    border-bottom: 1px solid rgba(30,45,61,0.3);
    cursor: pointer;
    transition: background 0.15s;
  }

  .roster-item:hover {
    background: rgba(255,255,255,0.02);
  }

  .roster-item.selected {
    background: rgba(212,160,23,0.15);
    border-left: 3px solid var(--gold);
    padding-left: 5px;
  }

  .roster-item-name {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 6px;
    font-weight: 600;
    cursor: pointer;
  }

  .roster-item-size {
    font-size: 9px;
    color: var(--dim);
    margin-bottom: 6px;
  }

  .roster-item-states {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .roster-item-hp {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    flex-shrink: 0;
  }

  .roster-hp-label {
    font-size: 7px;
    letter-spacing: 1px;
    color: var(--dim);
    text-transform: uppercase;
  }

  .roster-hp-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 10px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: bold;
    line-height: 1;
  }

  .roster-hp-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--gold);
    color: var(--gold);
  }

  .roster-hp-value {
    font-size: 18px;
    color: var(--gold);
    font-weight: 700;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
  }

  .roster-hp-value--full {
    color: #2ecc71;
  }

  .roster-hp-value--wounded {
    color: #f1c40f;
  }

  .roster-hp-value--critical {
    color: #e74c3c;
  }

  .roster-custom-states {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
  }

  .roster-custom-state {
    font-size: 8px;
    padding: 3px 6px;
    border-radius: 2px;
    letter-spacing: 0.5px;
    background: rgba(100,100,100,0.2);
    color: #95a5a6;
    cursor: pointer;
    transition: all 0.15s;
  }

  .roster-custom-state:hover {
    background: rgba(231,76,60,0.3);
    color: #e74c3c;
  }

  .roster-custom-state.injured {
    background: rgba(231,76,60,0.25);
    color: #e74c3c;
    font-weight: 600;
    cursor: default;
    pointer-events: none;
  }

  .roster-add-state {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 2px;
    background: rgba(212,160,23,0.15);
    color: var(--gold);
    border: 1px dashed rgba(212,160,23,0.4);
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 700;
    line-height: 1;
  }

  .roster-add-state:hover {
    background: rgba(212,160,23,0.25);
    border-color: var(--gold);
  }

  /* ── STRATEGY LISTS ── */
  .strategy-section {
    border-bottom: 1px solid var(--border);
  }

  .strategy-section-header {
    padding: 10px 14px;
    font-size: 9px;
    letter-spacing: 3px;
    color: #2a9dd4;
    text-transform: uppercase;
    background: rgba(42,157,212,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
  }

  .strategy-section-header:hover {
    background: rgba(42,157,212,0.12);
  }

  .strategy-section-header.collapsed::after {
    content: '▼';
    font-size: 8px;
    color: var(--dim);
  }

  .strategy-section-header.expanded::after {
    content: '▲';
    font-size: 8px;
    color: var(--dim);
  }

  .strategy-list {
    max-height: 400px;
    overflow-y: auto;
  }

  .strategy-list.collapsed {
    display: none;
  }

  .strategy-add-btn {
    background: rgba(42,157,212,0.15);
    border: 1px dashed rgba(42,157,212,0.4);
    color: #2a9dd4;
    font-size: 10px;
    padding: 8px 14px;
    margin: 8px 14px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 600;
  }

  .strategy-add-btn:hover {
    background: rgba(42,157,212,0.25);
    border-color: #2a9dd4;
  }

  .strategy-item {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(30,45,61,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.15s;
    background: rgba(231,76,60,0.15);
    border-left: 3px solid #e74c3c;
    cursor: pointer;
  }

  .strategy-item.checked {
    background: rgba(39,174,96,0.15);
    border-left-color: #27ae60;
  }

  .strategy-item:hover {
    background: rgba(255,255,255,0.03);
  }

  .strategy-item.checked:hover {
    background: rgba(39,174,96,0.2);
  }

  .strategy-item.firefight-ploy,
  .strategy-item.equipment-item {
    background: rgba(39,174,96,0.15);
    border-left-color: #27ae60;
  }
  .strategy-item.firefight-ploy.checked,
  .strategy-item.equipment-item.checked {
    background: rgba(231,76,60,0.15);
    border-left-color: #e74c3c;
  }
  .strategy-item.firefight-ploy:hover,
  .strategy-item.equipment-item:hover {
    background: rgba(39,174,96,0.25);
  }
  .strategy-item.firefight-ploy.checked:hover,
  .strategy-item.equipment-item.checked:hover {
    background: rgba(231,76,60,0.25);
  }

  .strategy-item.row-green {
    background: rgba(39,174,96,0.2);
    border-left-color: #27ae60;
  }

  .strategy-item.row-red {
    background: rgba(231,76,60,0.2);
    border-left-color: #e74c3c;
  }

  .strategy-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
  }

  .strategy-item-text {
    font-size: 14px;
    color: var(--text);
    line-height: 1.2;
    word-break: break-word;
    text-align: center;
    font-weight: 500;
    cursor: inherit;
    transition: opacity 0.15s;
  }

  .strategy-item-text:hover {
    opacity: 0.8;
  }

  .strategy-item-text.checked {
    opacity: 0.7;
  }

  .strategy-item-delete {
    background: transparent;
    border: none;
    color: var(--dim);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: color 0.15s;
  }

  .strategy-item-delete:hover {
    color: var(--red);
  }

  /* ── COMMAND POINTS COUNTER ── */
  .cp-counter {
    padding: 16px 14px;
    background: rgba(42,157,212,0.12);
    border-bottom: 2px solid #2a9dd4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .cp-counter-label {
    font-size: 9px;
    letter-spacing: 3px;
    color: #2a9dd4;
    text-transform: uppercase;
    font-weight: 600;
  }

  .cp-counter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .cp-counter-btn {
    background: rgba(42,157,212,0.2);
    border: 1px solid #2a9dd4;
    color: #2a9dd4;
    font-size: 18px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: bold;
    line-height: 1;
  }

  .cp-counter-btn:hover {
    background: rgba(42,157,212,0.35);
    border-color: #3db8f5;
    transform: scale(1.05);
  }

  .cp-counter-value {
    font-size: 42px;
    color: #2a9dd4;
    font-weight: 700;
    min-width: 70px;
    text-align: center;
    text-shadow: 0 0 12px rgba(42,157,212,0.5);
    font-family: 'Rajdhani', sans-serif;
  }

  .roster-state {
    font-size: 8px;
    padding: 3px 6px;
    border-radius: 2px;
    letter-spacing: 1px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
  }

  .roster-state:hover {
    opacity: 0.8;
  }

  .roster-state.concealed {
    background: rgba(41,128,185,0.25);
    color: #2980b9;
  }

  .roster-state.engaged {
    background: rgba(230,126,34,0.25);
    color: #e67e22;
  }

  .roster-state.ready {
    background: rgba(39,174,96,0.2);
    color: #27ae60;
  }

  .roster-state.expended {
    background: rgba(231,76,60,0.25);
    color: #e74c3c;
  }

  .roster-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--dim);
    font-size: 9px;
    letter-spacing: 2px;
  }

  /* ── DATACARD OVERLAY ── */
  #datacard-overlay {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: none;
    flex-direction: column;
    align-items: center;
    pointer-events: all;
    user-select: none;
    cursor: grab;
  }

  #datacard-overlay.dragging {
    cursor: grabbing;
    transform: none;
  }

  #datacard-overlay.visible {
    display: flex;
  }

  #datacard-img {
    max-width: 720px;
    width: min(720px, calc(100vw - 600px));
    border: 1px solid var(--border-bright);
    box-shadow: 0 8px 40px rgba(0,0,0,0.85), 0 0 20px rgba(192,57,43,0.15);
    background: var(--panel);
    display: block;
    pointer-events: none;
  }

  #datacard-overlay.large-equipment #datacard-img {
    max-width: 1040px;
    width: min(1040px, calc(100vw - 80px));
  }

  #datacard-overlay.strategy-card #datacard-img {
    max-width: 480px;
    width: min(480px, calc(100vw - 600px));
  }

  #datacard-overlay.strategy-card.large-equipment #datacard-img {
    max-width: 700px;
    width: min(700px, calc(100vw - 80px));
  }

  #datacard-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--dim);
    margin-top: 4px;
    text-transform: uppercase;
  }

  /* ── TOKEN RENAME (replaces unreliable window.prompt in embedded browsers) ── */
  #token-rename-dialog {
    border: 1px solid var(--border-bright);
    background: var(--panel);
    color: var(--text);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.85);
    z-index: 10000;
    max-width: calc(100vw - 2rem);
  }

  #token-rename-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
  }

  #token-rename-dialog label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dim);
  }

  #token-rename-input {
    width: min(320px, 80vw);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 2px;
    box-sizing: border-box;
  }

  .token-rename-dialog-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
  }

  .token-rename-dialog-actions button {
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 14px;
    cursor: pointer;
    border-radius: 2px;
    border: 1px solid var(--border-bright);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text);
  }

  .token-rename-dialog-actions button[type='submit'] {
    background: rgba(192, 57, 43, 0.35);
    border-color: rgba(192, 57, 43, 0.6);
  }

  #note-edit-dialog {
    border: 1px solid var(--border-bright);
    background: var(--panel);
    color: var(--text);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.85);
    z-index: 10000;
    max-width: calc(100vw - 2rem);
  }

  #note-edit-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
  }

  #note-edit-dialog label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dim);
  }

  #note-edit-input {
    width: min(360px, 80vw);
    min-height: 90px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 2px;
    box-sizing: border-box;
    resize: vertical;
  }

  #text-prompt-dialog {
    border: 1px solid var(--border-bright);
    background: var(--panel);
    color: var(--text);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.85);
    z-index: 10000;
    max-width: calc(100vw - 2rem);
  }

  #text-prompt-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
  }

  #text-prompt-dialog label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dim);
  }

  #text-prompt-input,
  #text-prompt-textarea {
    width: min(360px, 80vw);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 2px;
    box-sizing: border-box;
  }

  #text-prompt-textarea {
    min-height: 120px;
    resize: vertical;
  }

  /* ── Team/map note buttons ── */
  .roster-note-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-left: none;
    color: var(--dim);
    font-size: 13px;
    width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
  }

  .roster-note-btn:hover:not(:disabled) {
    background: rgba(212,160,23,0.2);
    border-color: var(--gold);
    color: var(--gold);
  }

  .roster-note-btn:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .roster-note-btn.has-note {
    color: var(--gold);
    box-shadow: inset 0 -2px 0 var(--gold);
  }

  #map-note-btn.has-note {
    color: var(--gold);
    border-color: var(--gold);
  }

  /* ── Account section (settings gear menu) ── */
  #account-not-configured {
    font-size: 11px;
    color: var(--dim);
    line-height: 1.5;
  }

  .account-auth-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .account-auth-form[hidden] {
    display: none;
  }

  .account-auth-form input {
    width: 100%;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 2px;
    box-sizing: border-box;
  }

  .account-status-msg {
    font-size: 11px;
    color: var(--dim);
    min-height: 14px;
  }

  .account-status-msg.error {
    color: #e05252;
  }

  .account-user-email {
    font-size: 12px;
    color: var(--text);
    word-break: break-all;
  }

  /* ── Batrep list ── */
  .batrep-empty-hint {
    color: var(--dim);
    cursor: default;
  }

  .batrep-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .batrep-list-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .batrep-list-item-delete {
    flex-shrink: 0;
    color: var(--dim);
    cursor: pointer;
    padding: 0 2px;
  }

  .batrep-list-item-delete:hover {
    color: #e05252;
  }

  #batrep-map-warning {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(192, 57, 43, 0.85);
    color: #fff;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 3px;
    z-index: 50;
    max-width: calc(100% - 32px);
    text-align: center;
  }

  #game-notes-panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 300px;
    min-width: 200px;
    min-height: 140px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--panel-solid);
    border: 1px solid var(--border-bright);
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
    z-index: 500;
    resize: both;
    overflow: hidden;
  }

  #game-notes-panel[hidden] {
    display: none;
  }

  .game-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dim);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    cursor: default;
  }

  .game-notes-close {
    background: none;
    border: none;
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
  }

  .game-notes-close:hover {
    color: var(--accent, #ff6b35);
  }

  #game-notes-text {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    padding: 10px;
  }

  /* Operative pick (+) when a kill team is selected */
  .operative-pick-select {
    flex: 1.2;
    min-width: 0;
    max-width: 180px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-right: none;
    color: var(--text);
    font-size: 11px;
    padding: 0;
    height: 28px;
    box-sizing: border-box;
    font-family: 'Share Tech Mono', monospace;
    cursor: pointer;
    text-overflow: ellipsis;
  }

  .operative-pick-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .token-roster.swapped .operative-pick-select,
  .token-roster-right.swapped .operative-pick-select {
    max-width: 150px;
  }

  /* Roster builder dialog(s) — fill map area between toolbar + side panels */
  .roster-builder-backdrop {
    position: fixed;
    top: var(--toolbar-height);
    left: var(--roster-panel-width);
    right: var(--roster-panel-width);
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 10000;
  }

  .roster-builder-backdrop[hidden] {
    display: none;
  }

  .roster-builder-dialog {
    position: fixed;
    top: var(--toolbar-height);
    bottom: 0;
    margin: 0;
    width: auto;
    max-width: none;
    max-height: none;
    height: auto;
    border: 1px solid var(--border-bright);
    background: var(--panel);
    color: var(--text);
    padding: 0;
    z-index: 10001;
    transform: none;
    box-sizing: border-box;
  }

  .roster-builder-dialog[open] {
    display: flex;
    flex-direction: column;
  }

  /* Identity only — layout via --solo / --split-* */
  .roster-builder-dialog--left,
  .roster-builder-dialog--right {
    left: var(--map-area-left);
    right: var(--map-area-right);
  }

  .roster-builder-dialog--solo {
    left: var(--map-area-left);
    right: var(--map-area-right);
    width: auto;
    max-width: none;
  }

  .roster-builder-dialog--split-left {
    left: var(--map-area-left);
    right: auto;
    width: var(--selection-half-width);
    max-width: var(--selection-half-width);
  }

  .roster-builder-dialog--split-right {
    left: calc(var(--map-area-left) + var(--selection-half-width));
    right: auto;
    width: var(--selection-half-width);
    max-width: var(--selection-half-width);
  }

  .roster-builder-dialog::backdrop {
    background: transparent;
  }

  .roster-builder-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: none;
    min-height: 0;
    flex: 1;
  }

  .roster-builder-title {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--gold);
    text-transform: uppercase;
  }

  .roster-builder-scroll {
    overflow-y: auto;
    padding: 14px 18px;
    flex: 1;
    min-height: 0;
  }

  .roster-builder-section {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }

  .roster-builder-section:last-child {
    border-bottom: none;
  }

  .roster-builder-section h4 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--gold);
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .roster-builder-section-meta {
    font-size: 14px;
    color: var(--dim);
    margin-bottom: 10px;
  }

  .roster-builder-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    font-size: 15px;
  }

  .roster-builder-row span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    color: var(--text);
    opacity: 0.9;
  }

  .roster-builder-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .roster-builder-qty button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-bright);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    border-radius: 2px;
  }

  .roster-builder-qty button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .roster-builder-qty .qty-val {
    min-width: 28px;
    font-size: 16px;
    text-align: center;
    font-weight: 700;
  }

  .roster-builder-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
  }

  .roster-builder-total {
    flex: 1;
    min-width: 140px;
    font-size: 15px;
    color: var(--dim);
  }

  .roster-builder-total.invalid {
    color: #e74c3c;
  }

  .roster-builder-footer button {
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 18px;
    cursor: pointer;
    border-radius: 2px;
    border: 1px solid var(--border-bright);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text);
  }

  .roster-builder-footer button.roster-builder-confirm {
    background: rgba(39, 174, 96, 0.25);
    border-color: rgba(39, 174, 96, 0.6);
  }

  .roster-builder-footer button.roster-builder-confirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* Equipment picker — same map-area fill / 50-50 split as composition */
  .equipment-picker-dialog {
    position: fixed;
    top: var(--toolbar-height);
    bottom: 0;
    left: var(--map-area-left);
    right: var(--map-area-right);
    margin: 0;
    width: auto;
    max-width: none;
    max-height: none;
    height: auto;
    border: 1px solid var(--border-bright);
    background: var(--panel);
    color: var(--text);
    padding: 0;
    z-index: 10002;
    transform: none;
    box-sizing: border-box;
  }

  .equipment-picker-dialog[open] {
    display: flex;
    flex-direction: column;
  }

  .equipment-picker-dialog--solo {
    left: var(--map-area-left);
    right: var(--map-area-right);
    width: auto;
    max-width: none;
  }

  .equipment-picker-dialog--split-left {
    left: var(--map-area-left);
    right: auto;
    width: var(--selection-half-width);
    max-width: var(--selection-half-width);
    z-index: 10005;
  }

  .equipment-picker-dialog--split-right {
    left: calc(var(--map-area-left) + var(--selection-half-width));
    right: auto;
    width: var(--selection-half-width);
    max-width: var(--selection-half-width);
    z-index: 10005;
  }

  .equipment-picker-dialog::backdrop {
    background: rgba(0, 0, 0, 0.65);
  }

  .equipment-picker-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: none;
    min-height: 0;
    flex: 1;
  }

  .equipment-picker-title {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--gold);
    text-transform: uppercase;
  }

  .equipment-picker-subtitle {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--dim);
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
  }

  .equipment-picker-subtitle:empty {
    display: none;
  }

  .equipment-picker-scroll {
    overflow-y: auto;
    padding: 10px 12px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .equipment-picker-group-title {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    margin: 10px 0 6px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
  }

  .equipment-picker-group-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .equipment-picker-group-empty {
    font-size: 12px;
    color: var(--dim);
    padding: 6px 4px 4px;
  }

  .equipment-universal-fused-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    padding: 8px 6px;
    margin-bottom: 6px;
    border: 1px solid rgba(30, 45, 61, 0.65);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
  }

  .equipment-universal-fused-row .equipment-picker-row {
    width: auto;
    flex: 1 1 calc(25% - 6px);
    min-width: 0;
    padding: 8px 6px;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    box-sizing: border-box;
  }

  .equipment-universal-fused-row .equipment-picker-row-check {
    flex: 1 1 calc(25% - 6px);
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 4px;
    border: 1px solid var(--border-bright);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
  }

  .equipment-universal-fused-row .equipment-picker-check-label {
    text-align: center;
    font-size: 11px;
    line-height: 1.25;
    word-break: break-word;
  }


  .equipment-picker-row {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.5px;
    border: 1px solid var(--border-bright);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
  }

  .equipment-picker-row:hover:not(:disabled) {
    border-color: var(--gold);
    background: rgba(212, 160, 23, 0.08);
  }

  .equipment-picker-row-disabled,
  .equipment-picker-row:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: var(--border);
  }

  .equipment-picker-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  #equipment-picker-confirm {
    display: none;
  }

  .equipment-picker-footer .equipment-picker-confirm {
    background: rgba(39, 174, 96, 0.2);
    border-color: rgba(39, 174, 96, 0.55);
  }

  .equipment-picker-footer .equipment-picker-confirm:hover {
    background: rgba(39, 174, 96, 0.3);
  }

  .equipment-picker-row-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-sizing: border-box;
  }

  .equipment-picker-row-check .equipment-picker-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--gold);
    cursor: pointer;
  }

  .equipment-picker-row-check .equipment-picker-check:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }

  .equipment-picker-row-check .equipment-picker-check-label {
    flex: 1;
    line-height: 1.3;
  }

  .equipment-picker-footer button {
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 2px;
    border: 1px solid var(--border-bright);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text);
  }

  .equipment-choose-btn {
    flex-shrink: 0;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid var(--border-bright);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--gold);
    cursor: pointer;
    line-height: 1;
  }

  .equipment-choose-btn:hover {
    border-color: var(--gold);
    background: rgba(212, 160, 23, 0.12);
  }

  .equipment-select-bar {
    padding: 10px 8px;
    text-align: center;
    border-top: 1px solid rgba(30, 45, 61, 0.35);
  }

  .equipment-select-main {
    font-size: 11px;
    padding: 6px 14px;
  }

  /* ── TOKEN SECONDARY EFFECTS CONTEXT MENU ── */
  .token-effects-menu {
    position: fixed;
    z-index: 10050;
    min-width: 160px;
    background: var(--panel-solid);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-bright);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
    padding: 4px 0;
  }

  .token-effects-menu[hidden] {
    display: none !important;
  }

  .token-effects-menu-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--dim);
    padding: 6px 14px 4px;
    text-transform: uppercase;
  }

  .token-effects-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    border: none;
    background: transparent;
    color: var(--dim);
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    text-align: left;
    cursor: pointer;
    border-left: 2px solid transparent;
  }

  .token-effects-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    border-left-color: var(--border-bright);
  }

  .token-effects-item.active {
    color: var(--gold);
    border-left-color: var(--gold);
  }

  .token-effects-check {
    width: 12px;
    flex-shrink: 0;
    color: var(--gold);
    font-size: 10px;
  }

  .token-effects-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--border);
  }

  .token-effects-item.danger {
    color: #c0392b;
  }

  .token-effects-item.danger:hover {
    color: #e74c3c;
    border-left-color: #c0392b;
  }

/* ── My games screen, shared read-only view, toast ── */
#batreps-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  overflow-y: auto;
}

#batreps-screen[hidden] {
  display: none;
}

.batreps-screen-inner {
  width: min(760px, 100%);
  background: var(--panel-solid);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.85);
  color: var(--text);
}

.batreps-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--dim);
  border-bottom: 1px solid var(--border);
}

#batreps-screen-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.batreps-empty {
  padding: 24px;
  text-align: center;
  color: var(--dim);
}

.batreps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 3px;
  flex-wrap: wrap;
}

.batreps-row.active {
  border-color: var(--accent);
}

.batreps-row-info {
  min-width: 0;
  flex: 1 1 220px;
}

.batreps-row-name {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batreps-row-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--dim);
}

.batreps-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.batreps-row-btn {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid var(--border-bright);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
}

.batreps-row-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.batreps-row-btn.primary {
  background: rgba(192, 57, 43, 0.35);
  border-color: rgba(192, 57, 43, 0.6);
}

.batreps-row-btn.danger:hover {
  background: rgba(224, 82, 82, 0.35);
}

#readonly-banner {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100% - 32px);
  padding: 6px 12px;
  background: rgba(21, 24, 34, 0.92);
  border: 1px solid var(--accent);
  border-radius: 3px;
  font-size: 12px;
  color: var(--text);
}

#readonly-banner[hidden] {
  display: none;
}

#readonly-banner button {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid var(--border-bright);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
}

/* Viewing someone else's shared game: hide every editing tool, keep rotate / screenshot / settings. */
body.readonly .toolbar > :not(.ro-keep) {
  display: none !important;
}

body.readonly #roster-panels-container {
  pointer-events: none;
}

#app-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  z-index: 10001;
  padding: 8px 16px;
  background: rgba(21, 24, 34, 0.95);
  border: 1px solid var(--border-bright);
  border-radius: 3px;
  font-size: 12px;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

#app-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* The CALC toolbar entry is a link styled like the other toolbar buttons */
a.map-rotate-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}