/* ═══════════════════════════════════════════════════════════════════════
   DayZ Web Radar — Style Sheet
   CSS custom properties drive theming; all non-map colours live here.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Themes ──────────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  --bg-base:      #0d0f12;
  --bg-panel:     #161a20;
  --bg-hover:     #1e2430;
  --bg-active:    #1a2235;
  --bg-input:     #111827;
  --border:       #2a3042;
  --border-light: #1e2637;
  --accent:       #e8a020;
  --accent-dim:   #b07818;
  --text-primary: #e2e8f0;
  --text-muted:   #64748b;
  --text-faint:   #374151;
  --danger:       #ef4444;
  --success:      #22c55e;
  --warn:         #f59e0b;
  --info:         #3b82f6;
  --map-bg:       #000;

  --header-h:     44px;
  --sidebar-w:    260px;
  --coord-bar-h:  26px;

  color-scheme: dark;
}

[data-theme="darker"] {
  --bg-base:      #000000;
  --bg-panel:     #0a0a0a;
  --bg-hover:     #111111;
  --bg-active:    #0f1a2a;
  --bg-input:     #000000;
  --border:       #1a1a1a;
  --border-light: #111111;
  --accent:       #e8a020;
  --text-primary: #e2e8f0;
  --text-muted:   #52525b;
  --text-faint:   #27272a;
}

[data-theme="solarized"] {
  --bg-base:      #002b36;
  --bg-panel:     #073642;
  --bg-hover:     #0a3d4a;
  --bg-active:    #0d4459;
  --bg-input:     #001f26;
  --border:       #115a6e;
  --border-light: #093b4a;
  --accent:       #cb4b16;
  --text-primary: #93a1a1;
  --text-muted:   #586e75;
  --text-faint:   #073642;
}

/* ── Reset ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: Arial, sans-serif;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  overflow: hidden;
}

button, input, label, a, select {
  touch-action: manipulation;
}

/* ── Header bar ──────────────────────────────────────────────────────── */

.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.header-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
}

.header-btn:hover { background: var(--bg-hover); }

.header-server {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.header-server-name {
  color: var(--text-muted);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}

.conn-dot.connected    { background: var(--success); }
.conn-dot.disconnected { background: var(--danger); }
.conn-dot.waiting      { background: var(--warn); }

.header-counts {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  margin-left: auto;
}

.count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  font-family: monospace;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}

.count-badge:hover         { background: var(--bg-hover); color: var(--text-primary); }
.count-badge.disabled      { opacity: 0.35; }
.count-badge span          { color: var(--text-primary); }

.combat-btn {
  flex-shrink: 0;
  padding: 0 12px;
  font-weight: 700;
  border-color: var(--border);
}

.combat-btn.active {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  bottom: var(--coord-bar-h);
  width: var(--sidebar-w);
  z-index: 30;
  display: flex;
  overflow: hidden;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  transition: width 0.18s ease;
}

/* Icon-strip collapsed state */
body.sidebar-icons .sidebar   { --sidebar-w: 48px; }
body.sidebar-icons .sidebar-content { display: none; }

body.sidebar-icons .tab-btn {
  font-size: 21px;
  height: 44px;
}

/* Hidden state */
body.sidebar-hidden .sidebar  { --sidebar-w: 0px; border-right: none; }

.sidebar-nav {
  flex-shrink: 0;
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  gap: 2px;
  background: var(--bg-base);
  border-right: 1px solid var(--border);
}

.tab-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s, color 0.1s;
}

.tab-btn:hover      { background: var(--bg-hover); color: var(--text-primary); }
.tab-btn.active     { background: var(--bg-active); border-color: var(--border); color: var(--accent); }

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  min-width: 0;
}

/* ── Tab panels ──────────────────────────────────────────────────────── */

.tab-panel { display: none; padding: 10px 12px; }
.tab-panel.active { display: block; }

.tab-status-row {
  padding: 4px 0 6px;
  font-size: 14px;
}

.status-text       { color: var(--text-muted); }
.server-info-text  { color: var(--info); font-size: 13px; padding: 2px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loot-info-text    { color: var(--text-muted); font-size: 13px; padding: 4px 0; }

.tab-section {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.section-label {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 2px;
}

.toggle-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  cursor: pointer;
  padding: 2px 0;
}

.toggle-row kbd {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-base);
  border: 1px solid var(--border);
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 4px;
}

.toggle-row input { margin: 0; }

.range-with-value {
  display: flex;
  align-items: center;
  gap: 8px;
}

.range-with-value input[type="range"] { flex: 1; }

.range-val {
  color: var(--info);
  font-size: 13px;
  min-width: 46px;
  text-align: right;
}

/* ── Preset bar ──────────────────────────────────────────────────────── */

.preset-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.preset-btn {
  flex: 1;
  height: 28px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.preset-btn:hover  { background: var(--bg-hover); color: var(--text-primary); }
.preset-btn.active { border-color: var(--accent); color: var(--accent); }

.quick-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.quick-btn {
  flex: 1;
  height: 26px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}

.quick-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Filter list (entities) ──────────────────────────────────────────── */

.filter-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.filter-card {
  border: 1px solid var(--border-light);
  background: var(--bg-base);
}

.filter-row {
  display: grid;
  grid-template-columns: 18px 14px 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
}

.filter-row input[type="checkbox"] { margin: 0; }

.filter-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  flex-shrink: 0;
}

.filter-name  { font-size: 15px; }

.filter-count {
  font-size: 13px;
  color: var(--text-muted);
  font-family: monospace;
  min-width: 24px;
  text-align: right;
}

.filter-gear {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faint);
  font-size: 14px;
  cursor: pointer;
}

.filter-gear:hover    { color: var(--text-muted); border-color: var(--border); }
.filter-card.expanded .filter-gear { color: var(--accent); border-color: var(--border); }

.filter-extra {
  display: none;
  padding: 0 8px 10px;
  border-top: 1px solid var(--border-light);
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.filter-card.expanded .filter-extra { display: flex; }

.mini-control {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.mini-control span  { color: var(--text-muted); }
.mini-control strong { color: var(--info); min-width: 36px; text-align: right; font-size: 13px; }

.mini-toggle {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  margin-top: 2px;
}

.mini-toggle input { margin: 0; }

/* Loot filter list — compact row (no expand) */
.loot-filter-list .filter-row {
  grid-template-columns: 18px 14px 1fr auto;
}

/* ── Loot search ─────────────────────────────────────────────────────── */

.loot-search-bar {
  margin-bottom: 8px;
}

.loot-search-bar input {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
}

.loot-search-bar input:focus { border-color: var(--accent); }

/* ── Players list ────────────────────────────────────────────────────── */

.players-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.players-row {
  border: 1px solid var(--border-light);
  background: rgba(0,0,0,0.3);
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}

.players-name {
  font-family: Arial, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-weight: 600;
  font-size: 15px;
  white-space: pre-line;
}

.players-detail {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.players-steam a {
  font-size: 13px;
  color: var(--info);
  text-decoration: none;
}

.players-empty {
  color: var(--text-muted);
  font-size: 14px;
  padding: 6px 2px;
}

.players-section-title {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 2px 3px;
}

/* ── Loot list ───────────────────────────────────────────────────────── */

.loot-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.loot-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  text-align: left;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--loot-color, var(--text-muted));
  background: rgba(0,0,0,0.35);
  color: var(--text-primary);
  padding: 7px 9px;
  cursor: pointer;
}

.loot-row.favorite {
  border-left-color: var(--danger);
  box-shadow: inset 0 0 0 1px rgba(239,68,68,0.3);
}

.loot-name     { font-weight: 700; color: var(--loot-color, var(--text-primary)); font-size: 14px; }
.loot-distance { color: var(--text-muted); font-size: 13px; font-family: monospace; }
.loot-meta     { grid-column: 1 / -1; color: var(--text-muted); font-size: 13px; }

.loot-section-title {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 2px 3px;
}

.loot-group-title {
  color: var(--text-muted);
  font-size: 13px;
  padding: 4px 2px 2px;
}

/* ── Settings tab ────────────────────────────────────────────────────── */

.setting-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--border-light);
  background: rgba(0,0,0,0.2);
  margin-bottom: 4px;
}

.setting-row.toggle-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.setting-name { font-size: 14px; font-weight: 600; }
.setting-val  { color: var(--info); font-size: 13px; }

.setting-row input[type="range"],
.setting-row select { width: 100%; }

.setting-row select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 8px;
  font-size: 14px;
}

.btn-sm {
  height: 28px;
  padding: 0 12px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  margin-top: 4px;
}

.btn-sm:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Theme switcher ──────────────────────────────────────────────────── */

.theme-bar {
  display: flex;
  gap: 4px;
}

.theme-btn {
  flex: 1;
  height: 28px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}

.theme-btn:hover  { background: var(--bg-hover); color: var(--text-primary); }
.theme-btn.active { border-color: var(--accent); color: var(--accent); }

/* ── Shortcuts table ─────────────────────────────────────────────────── */

.shortcuts-section { margin-top: 8px; }

.shortcut-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  align-items: center;
}

.shortcut-grid kbd {
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 13px;
  padding: 2px 5px;
  border-radius: 3px;
  font-family: monospace;
  white-space: nowrap;
  justify-self: start;
}

.shortcut-grid span { font-size: 14px; color: var(--text-muted); }

/* ── Viewport ────────────────────────────────────────────────────────── */

.viewport {
  position: fixed;
  top: var(--header-h);
  left: var(--sidebar-w);
  right: 0;
  bottom: var(--coord-bar-h);
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  background: var(--map-bg);
  user-select: none;
  -webkit-user-select: none;
  transition: left 0.18s ease;
}

body.sidebar-icons   .viewport { left: 48px; }
body.sidebar-hidden  .viewport { left: 0; }

.canvas {
  position: absolute;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  --inv-scale: 1;
}

#tiles,
#paths,
#itemLabels,
#markers {
  position: absolute;
  inset: 0;
}

#tiles     { background: #111; }
#topo-tiles { background: #111; }

#paths {
  z-index: 7;
  pointer-events: none;
  overflow: visible;
}

#itemLabels {
  z-index: 5;
  pointer-events: none;
}

#markers { z-index: 10; }

/* ── Map tiles ───────────────────────────────────────────────────────── */

.map-tile {
  position: absolute;
  image-rendering: auto;
  user-select: none;
  -webkit-user-drag: none;
  background: transparent;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.map-tile.loaded            { opacity: 1; }

/* ── Satellite XYZ tile layer ────────────────────────────────────────── */

#sat-tiles {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
}

/* ── Sat map (replaces base tiles when active) ───────────────────────── */

#topo-tiles {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
}

/* ── Entity markers ──────────────────────────────────────────────────── */

.entity {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.item-label-anchor {
  position: absolute;
  transform: translate(-50%, -50%);
}

.entity.layer-loot     { z-index: 10; }
.entity.layer-favorite { z-index: 20; }
.entity.layer-entity   { z-index: 30; }
.entity.player-entity  { z-index: 40; }
.entity.local-player-entity { z-index: 50; }

.marker {
  position: absolute;
  left: 0; top: 0;
  width: 12px; height: 12px;
  border-radius: 999px;
  border: 2px solid #000;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.marker.players      { background: #f97316; }
.marker.zombies      { background: #22c55e; }
.marker.animals      { background: #60a5fa; }
.marker.loot         { background: #facc15; width: 8px; height: 8px; }
.marker.vehicles     { background: #a855f7; width: 14px; height: 14px; }
.marker.otherEntities{ background: #94a3b8; width: 10px; height: 10px; }

.marker.bullets {
  background: #f8fafc;
  width: 6px; height: 6px;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(248,250,252,0.65);
}

.marker.local-player {
  background: #ef4444;
  width: 16px; height: 16px;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.3), 0 0 12px rgba(239,68,68,0.5);
}

.marker.favorite {
  box-shadow: 0 0 0 2px rgba(127,29,29,0.85), 0 0 14px rgba(239,68,68,0.85);
  border-color: #fee2e2;
}

.marker.waypoint {
  background: transparent;
  border: 2px solid #e2e8f0;
  width: 10px; height: 10px;
}

.entity.bullet-phantom .marker.bullets {
  opacity: 0.45;
  box-shadow: 0 0 6px rgba(148,163,184,0.45);
}

.entity.bullet-completed .marker.bullets {
  border-color: rgba(15,23,42,0.8);
}

.entity.dead-player { opacity: 0.45; }

/* ── Local player pulse ring ─────────────────────────────────────────── */

.local-player-pulse {
  position: absolute;
  left: 50%; top: 50%;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(239,68,68,0.5);
  transform: translate(-50%, -50%);
  animation: pulse-ring 2s ease-out infinite;
  pointer-events: none;
}

@keyframes pulse-ring {
  0%   { transform: translate(-50%,-50%) scale(0.8); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
}

/* ── Direction arrows ────────────────────────────────────────────────── */

.direction {
  position: absolute;
  left: 50%; top: 50%;
  width: 2px; height: 28px;
  background: #f8fafc;
  transform-origin: 50% 100%;
}

.entity-direction  { left: 0; top: 0; z-index: 1; }

.direction::before {
  content: "";
  position: absolute;
  left: 50%; top: -8px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid currentColor;
  transform: translateX(-50%);
}

.local-direction { color: #ef4444; }

/* ── Bullet paths ────────────────────────────────────────────────────── */

.bullet-path-actual,
.bullet-path-predicted {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.bullet-path-actual    { opacity: 0.9; }
.bullet-path-predicted { stroke-dasharray: 8 6; opacity: 0.7; }
.bullet-path-phantom   { opacity: 0.35; }

/* ── Labels ──────────────────────────────────────────────────────────── */

.label {
  position: absolute;
  left: 0; top: 0;
  display: inline-block;
  white-space: nowrap;
  font-family: Arial, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  color: #f8fafc;
  line-height: 1.15;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(2,6,23,0.9);
  pointer-events: none;
  z-index: 3;
}

.entity.player-entity .label { white-space: pre; }
.label.favorite               { text-shadow: 0 1px 2px rgba(127,29,29,0.85); }

.label-line {
  position: absolute;
  left: 0; top: 0;
  height: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  opacity: 0.9;
  pointer-events: none;
  z-index: 2;
}

.label-line.favorite { opacity: 1; }
.loot-line           { z-index: 1; }
.loot-label          { z-index: 2; }

/* ── POI markers ─────────────────────────────────────────────────────── */

.entity.poi-entity { z-index: 5; }

.marker.poi {
  background: transparent;
  border: 2px solid #fbbf24;
  width: 10px; height: 10px;
}

.marker.poi.military { border-color: #ef4444; }
.marker.poi.hospital { border-color: #22c55e; }
.marker.poi.police   { border-color: #3b82f6; }
.marker.poi.airfield { border-color: #a78bfa; }
.marker.poi.capital  { border-color: #f97316; width: 13px; height: 13px; }

.poi-label {
  position: absolute;
  top: 8px;
  left: 0;
  font-size: 12px;
  color: #cbd5e1;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

/* ── Waypoint markers ────────────────────────────────────────────────── */

.waypoint-label {
  position: absolute;
  left: 50%;
  font-size: 12px;
  color: #e2e8f0;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, 8px);
  text-shadow: 0 1px 3px rgba(0,0,0,0.95);
  font-weight: 700;
}

/* ── Grid overlay ────────────────────────────────────────────────────── */

.grid-major { stroke: rgba(255,255,255,0.30); stroke-width: 1; }
.grid-minor { stroke: rgba(255,255,255,0.12); stroke-width: 0.5; }

.canvas.satmap-active .grid-major { stroke: rgba(0,0,0,0.45); }
.canvas.satmap-active .grid-label-inner { font-size: 10px; color: rgba(0,0,0,0.90); text-shadow: 0 1px 1px rgba(255,255,255,0.6); }

.grid-label-wrapper {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  visibility: hidden;
}
.canvas.grid-labels-visible .grid-label-wrapper { visibility: visible; }

.grid-label-inner {
  font-size: 10px;
  font-family: monospace;
  color: rgba(255,255,255,0.50);
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}

/* ── Combat mode ─────────────────────────────────────────────────────── */

.combat-ring {
  fill: none;
  stroke: rgba(0,255,220,0.35);
  stroke-width: 1;
  stroke-dasharray: 6 4;
}

.combat-ring-label {
  fill: rgba(0,255,220,0.6);
  font-size: 10px;
  text-anchor: middle;
}

/* ── Minimap ─────────────────────────────────────────────────────────── */

.minimap {
  position: absolute;
  bottom: 10px; right: 10px;
  width: 160px; height: 160px;
  border: 1px solid var(--border);
  background: #000;
  overflow: hidden;
  z-index: 20;
  pointer-events: none;
}

.minimap-img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.7;
  display: block;
}

.minimap-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}

/* ── Measurement overlay ─────────────────────────────────────────────── */

.measure-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
}

body.measure-active .viewport { cursor: crosshair; }

/* ── Context menu ────────────────────────────────────────────────────── */

.ctx-menu {
  position: absolute;
  display: none;
  flex-direction: column;
  min-width: 140px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

.ctx-menu.open { display: flex; }

.ctx-item {
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 15px;
  cursor: pointer;
}

.ctx-item:hover { background: var(--bg-hover); }

/* ── Coord bar ───────────────────────────────────────────────────────── */

.coord-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  height: var(--coord-bar-h);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-family: monospace;
  color: var(--text-muted);
  transition: left 0.18s ease;
}

body.sidebar-icons  .coord-bar { left: 48px; }
body.sidebar-hidden .coord-bar { left: 0; }

#coordDisplay, #gridDisplay, #zoomDisplay { color: var(--text-primary); }

.coord-sep { color: var(--text-faint); }

.coord-bar-spacer { flex: 1; }

.measure-toggle-btn {
  height: 20px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}

.measure-toggle-btn:hover    { color: var(--text-primary); }
.measure-toggle-btn.active   { border-color: var(--accent); color: var(--accent); }

/* ── Toast notifications ─────────────────────────────────────────────── */

.toast-stack {
  position: fixed;
  bottom: calc(var(--coord-bar-h) + 8px);
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 60;
  pointer-events: none;
}

.toast {
  padding: 9px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  color: var(--text-primary);
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.show { opacity: 1; transform: translateX(0); }
.toast.toast-danger  { border-left-color: var(--danger); }
.toast.toast-success { border-left-color: var(--success); }
.toast.toast-info    { border-left-color: var(--info); }

/* ── Unauthorized screen ─────────────────────────────────────────────── */

.unauthorized {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-size: 23px;
  text-align: center;
  padding: 20px;
  line-height: 1.6;
}

/* ── 3D mode ─────────────────────────────────────────────────────────── */

.mode3d-btn {
  margin-left: 6px;
  background: var(--bg-active);
  border: 1px solid var(--border);
  font-weight: bold;
  letter-spacing: 0.05em;
}

.mode3d-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

.mode3d-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#canvas3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 100;
  background: #0d0f12;
}

body.mode-3d #canvas3d { display: block; }

body.mode-3d .canvas,
body.mode-3d #minimapEl { display: none; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  :root {
    --sidebar-w: 220px;
  }
  .header-server-name { max-width: 100px; }
  .header-counts      { gap: 2px; }
  .count-badge        { padding: 0 5px; font-size: 13px; }
}