:root {
  /* ===== LIGHT THEME (default) ===== */
  --bg:#f1f5f9;          /* app background (light slate) */
  --panel:#ffffff;        /* cards / panels */
  --panel-2:#f8fafc;      /* subtle alt panel */
  --border:rgba(15,23,42,.10);
  --text:#0f172a;         /* primary text */
  --text-muted:#64748b;   /* secondary text */
  --accent:#fc6100;       /* Strava-style orange */
  /* surfaces that were hardcoded for light */
  --chip-bg:rgba(255,255,255,.9);
  --panel-glass:rgba(255,255,255,.95);
  --panel-glass-strong:rgba(255,255,255,.98);
  --nav-bg:rgba(255,255,255,.97);
  --round-bg:rgba(255,255,255,.95);
  --tab-bg:#e2e8f0;
  --chat-bubble:#e2e8f0;
  --chat-mine:#ffedd5;
  --input-bg:#f1f5f9;
  --map-bg:#e5e7eb;
  --shadow-color:rgba(15,23,42,.08);
  /* aliases used by profile UI */
  --surface:#ffffff;
  --muted:#64748b;
}
[data-theme="dark"] {
  /* ===== DARK THEME ===== */
  --bg:#0a0e1a;
  --panel:#0f172a;
  --panel-2:#111c33;
  --border:rgba(255,255,255,.10);
  --text:#f1f5f9;
  --text-muted:#94a3b8;
  --accent:#f97316;
  --chip-bg:rgba(15,23,42,.85);
  --panel-glass:rgba(15,23,42,.9);
  --panel-glass-strong:rgba(15,23,42,.96);
  --nav-bg:rgba(15,23,42,.97);
  --round-bg:rgba(15,23,42,.9);
  --tab-bg:#1e293b;
  --chat-bubble:#1e293b;
  --chat-mine:#7c2d12;
  --input-bg:#111c33;
  --map-bg:#0a0e1a;
  --shadow-color:rgba(0,0,0,.4);
  --accent:#fc6100;
  /* aliases used by profile UI */
  --surface:#0f172a;
  --muted:#94a3b8;
}
* { -webkit-tap-highlight-color: transparent; }
html,body { margin:0; height:100%; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

/* ===== Views ===== */
.view { display:none; position:fixed; inset:0 0 0 0; padding-bottom:64px; background:var(--bg); color:var(--text); overflow-y:auto; }
.view.active { display:block; }
#view-map { padding-bottom:0; }
#map { position:absolute; inset:0; z-index:0; background:var(--map-bg); }

/* ===== HUD ===== */
.hud-top { position:absolute; top:0; left:0; right:0; z-index:500; display:flex; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 10px; pointer-events:none; }
.chip { background:var(--chip-bg); backdrop-filter:blur(8px); border:1px solid var(--border); color:var(--text);
  box-shadow:0 2px 8px var(--shadow-color);
  padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; pointer-events:auto; }

.live-stats { position:absolute; top:calc(env(safe-area-inset-top) + 60px); left:12px; right:12px; z-index:500;
  background:var(--panel-glass); backdrop-filter:blur(10px); border:1px solid var(--border); color:var(--text);
  box-shadow:0 4px 16px var(--shadow-color);
  border-radius:20px; padding:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.live-stats .stat { text-align:center; }
.stat-val { font-size:22px; font-weight:800; line-height:1; }
.stat-lbl { font-size:11px; color:var(--text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:.05em; }

.hex-info { position:absolute; bottom:150px; left:12px; right:12px; z-index:500; background:var(--panel-glass-strong);
  backdrop-filter:blur(10px); border:1px solid var(--border); color:var(--text); box-shadow:0 6px 20px var(--shadow-color);
  border-radius:18px; padding:14px; font-size:14px; }

/* ===== Bottom action dock: [recenter] [START] [activity ▾] ===== */
.run-dock { position:absolute; left:0; right:0; bottom:calc(64px + 16px); z-index:500;
  display:flex; justify-content:center; padding:0 16px; pointer-events:none; }
.run-dock > * { pointer-events:auto; }

.run-controls { display:flex; align-items:center; justify-content:center; gap:16px; }
.run-btn { background:var(--accent); color:#fff; border:none; font-weight:800; letter-spacing:.02em;
  font-size:16px; padding:16px 34px; border-radius:999px; cursor:pointer; font-family:inherit;
  box-shadow:0 6px 20px rgba(252,97,0,.35); transition:transform .1s, box-shadow .15s; }
.run-btn:active { transform:scale(.97); }
.run-btn.running { background:#ef4444; box-shadow:0 6px 20px rgba(239,68,68,.35); }
.run-btn.warming { background:#94a3b8; box-shadow:none; cursor:progress; }
/* Round satellite buttons (hollow white) */
.round-btn { width:52px; height:52px; border-radius:50%; font-size:18px; cursor:pointer; flex:none;
  background:#fff; color:var(--text); border:1px solid rgba(15,23,42,.10);
  box-shadow:0 2px 10px rgba(15,23,42,.12); }
.round-btn:active { transform:scale(.94); }

/* Activity selector — round button (matches recenter) + popup menu */
.act-select { position:relative; flex:none; }
.act-btn { display:inline-flex; align-items:center; justify-content:center; padding:0; }
.act-btn .act-emoji { font-size:22px; line-height:1; }
/* Anchor to the button's right edge so the menu opens leftward and stays
   fully on-screen (the button sits at the far right of the viewport). */
.act-menu { position:absolute; bottom:60px; right:0; transform:translateY(6px);
  min-width:150px; background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:14px;
  padding:6px; box-shadow:0 8px 28px rgba(15,23,42,.18); display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transition:opacity .15s, transform .15s; }
.act-select.open .act-menu { opacity:1; visibility:visible; transform:translateY(0); }
.act-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:none; border-radius:10px; padding:10px 12px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:600; color:var(--text); }
.act-item .act-item-emoji { font-size:18px; }
.act-item:active { transform:scale(.98); }
.act-item.active { background:var(--accent); color:#fff; }

/* Activity pills used inside the Leaderboard view (simple row) */
.cat-chip { background:var(--panel); color:var(--text); border:1px solid var(--border);
  padding:8px 14px; border-radius:999px; font-weight:600; font-size:13px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; box-shadow:0 1px 4px var(--shadow-color);
  transition:background .15s, color .15s; }
.cat-chip span { font-size:16px; }
.cat-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.lb-cat-badge { font-size:14px; font-weight:700; margin-left:auto; opacity:.85; }

/* ===== Bottom nav ===== */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; height:64px; z-index:1000; display:flex;
  background:var(--nav-bg); backdrop-filter:blur(12px); border-top:1px solid var(--border);
  box-shadow:0 -2px 12px var(--shadow-color);
  padding-bottom:env(safe-area-inset-bottom); }
.nav-btn { flex:1; background:none; border:none; color:var(--text-muted); font-size:11px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; cursor:pointer; }
.nav-btn i { font-size:20px; }
.nav-btn.active { color:var(--accent); }
.nav-btn:active { transform:scale(0.92); }
/* Invite tab: an action, gently accented so it reads as the growth CTA */
.nav-invite { color:var(--accent); }
.nav-invite i {
  background:linear-gradient(90deg,#f97316,#ec4899);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ===== Pages ===== */
.page-head { padding:calc(env(safe-area-inset-top) + 16px) 16px 12px; }
.page-head h2 { font-size:24px; font-weight:800; display:flex; align-items:center; gap:8px; }

/* Username badge acts as the (only) entry to the Me area */
.chip-btn { cursor:pointer; font-family:inherit; }
.chip-btn:active { transform:scale(0.95); }

/* ============================================================
   PROFESSIONAL LIGHT MAP HUD (Strava-inspired)
   Clean white cards, one orange accent, strict alignment.
   ============================================================ */

/* Territory hexes: quiet coloured fills, no neon. */
.hex-mine { filter:none; }

/* Player location marker — the standard "blue dot" idiom, in team colour.
   A single soft pulse (like Google Maps / Strava), not a game glow. */
.me-marker { position:relative; width:26px; height:26px; }
.me-marker .me-dot {
  position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; background:var(--me,#fc6100); border:3px solid #fff;
  box-shadow:0 1px 4px rgba(15,23,42,.45); z-index:2;
}
.me-marker .me-pulse {
  position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; background:var(--me,#fc6100); opacity:.28; z-index:1;
  animation:mePulse 2.4s ease-out infinite;
}
@keyframes mePulse {
  0%   { transform:scale(1);   opacity:.28; }
  70%  { transform:scale(2.8); opacity:0; }
  100% { transform:scale(2.8); opacity:0; }
}

/* ---- Top HUD: clean white cards, evenly spaced ---- */
.hud-top { align-items:flex-start; gap:8px; }
.hud-card {
  display:inline-flex; align-items:center; gap:7px; pointer-events:auto; cursor:pointer;
  background:#fff; color:var(--text); border:1px solid rgba(15,23,42,.08);
  border-radius:14px; padding:8px 12px; height:40px; box-sizing:border-box;
  font-size:14px; font-weight:600; box-shadow:0 2px 10px rgba(15,23,42,.10);
  font-family:inherit;
}
.hud-card:active { transform:scale(.96); }

/* Player card — avatar chip + name */
.player-card { max-width:46vw; overflow:hidden; }
.player-card .player-avatar {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:26px; height:26px; border-radius:50%; font-size:15px;
  background:#fff7ed; border:2px solid var(--accent);
  overflow:visible;
}
.player-card .player-avatar.has-photo { overflow:hidden; background:none; }
.player-avatar-img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
/* Little camera nudge shown only while the user still has the silly default */
.player-avatar-hint {
  position:absolute; right:-4px; bottom:-4px;
  width:13px; height:13px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; font-size:7px;
  border:1.5px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.player-card .player-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Territory stat card — two units divided by a hairline */
.stat-combo { gap:10px; font-weight:800; }
.stat-combo .stat-unit { display:inline-flex; align-items:center; gap:6px; }
.stat-combo .stat-ico { font-size:13px; color:var(--accent); }
.stat-combo .stat-div { width:1px; height:18px; background:rgba(15,23,42,.12); }

/* Notification bell — square-ish icon card */
.notif-bell { padding:0; width:40px; justify-content:center; }

/* Me/profile header with a Back/close button */
.profile-head { display:flex; align-items:center; gap:10px; }
.profile-close {
  flex:none; width:38px; height:38px; border-radius:12px; border:1px solid var(--border);
  background:var(--chip-bg); color:var(--text); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.profile-close:active { transform:scale(0.92); }

.lb-tab,.ch-tab,.adm-tab,.tk-filter { background:var(--tab-bg); color:var(--text-muted); border:none; padding:8px 16px;
  border-radius:999px; font-weight:600; font-size:13px; cursor:pointer; }
.lb-tab.active,.ch-tab.active,.adm-tab.active,.tk-filter.active { background:var(--accent); color:#fff; }

.lb-row { display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--border);
  box-shadow:0 1px 4px var(--shadow-color); padding:12px; border-radius:14px; }
.lb-rank { width:28px; font-weight:800; text-align:center; color:var(--text-muted); }

/* ===== Chat ===== */
#view-chat { display:none; flex-direction:column; }
#view-chat.active { display:flex; }
.chat-messages { flex:1; overflow-y:auto; padding:12px 16px 12px; display:flex; flex-direction:column; gap:8px; }
.chat-msg { max-width:80%; padding:8px 12px; border-radius:14px; background:var(--chat-bubble); color:var(--text); font-size:14px; }
.chat-msg.mine { align-self:flex-end; background:var(--chat-mine); }
.chat-msg .who { font-size:11px; font-weight:700; opacity:.85; margin-bottom:2px; }
.chat-input { display:flex; gap:8px; padding:10px 12px calc(env(safe-area-inset-bottom) + 10px); border-top:1px solid var(--border); background:var(--panel); }
.chat-input input { flex:1; background:var(--input-bg); border:1px solid var(--border); border-radius:999px; padding:12px 16px; color:var(--text); outline:none; }
.send-btn { width:46px; height:46px; border-radius:50%; border:none; background:var(--accent); color:#fff; cursor:pointer; }

/* ===== Modal ===== */
.modal { position:fixed; inset:0; z-index:2000; background:rgba(15,23,42,.4); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal.hidden { display:none; }
.modal-card { background:var(--panel); border:1px solid var(--border); color:var(--text); box-shadow:0 20px 60px rgba(15,23,42,.25);
  border-radius:24px; padding:24px; width:100%; max-width:420px; max-height:85vh; overflow-y:auto; }

/* ===== Admin ===== */
.adm-panel.hidden { display:none; }
.stat-card { background:var(--panel); border:1px solid var(--border); box-shadow:0 1px 4px var(--shadow-color); border-radius:16px; padding:16px; }
.stat-card .n { font-size:28px; font-weight:800; }
.stat-card .l { font-size:12px; color:var(--text-muted); }
.ticket-item { background:var(--panel); border:1px solid var(--border); box-shadow:0 1px 4px var(--shadow-color); border-radius:12px; padding:12px; cursor:pointer; }
.ticket-item:hover { border-color:var(--accent); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); }
th { color:var(--text-muted); font-weight:600; }
.leaflet-container { background:var(--map-bg); }

/* ===== Theme toggle button ===== */
.theme-toggle { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px;
  border-radius:14px; border:1px solid var(--border); background:var(--panel); color:var(--text);
  font-weight:600; font-size:14px; cursor:pointer; box-shadow:0 1px 4px var(--shadow-color); }
.theme-toggle i { color:var(--accent); }
.theme-toggle-mini { width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--chip-bg); color:var(--text); cursor:pointer; backdrop-filter:blur(8px);
  box-shadow:0 2px 8px var(--shadow-color); pointer-events:auto; }
.theme-toggle-mini i { color:var(--accent); }

/* ===== Landing / Admin dark overrides for hardcoded Tailwind classes ===== */
[data-theme="dark"] .lp-body,
[data-theme="dark"] .adm-body { background:var(--bg) !important; color:var(--text) !important; }
[data-theme="dark"] .lp-body .bg-white,
[data-theme="dark"] .adm-body .bg-white { background:var(--panel) !important; }
[data-theme="dark"] .lp-body .bg-slate-100,
[data-theme="dark"] .lp-body .bg-slate-50,
[data-theme="dark"] .adm-body .bg-slate-100,
[data-theme="dark"] .adm-body .bg-slate-50 { background:var(--panel-2) !important; }
[data-theme="dark"] .lp-body .text-slate-900,
[data-theme="dark"] .adm-body .text-slate-900 { color:var(--text) !important; }
[data-theme="dark"] .lp-body .text-slate-600,
[data-theme="dark"] .lp-body .text-slate-700,
[data-theme="dark"] .lp-body .text-slate-500,
[data-theme="dark"] .adm-body .text-slate-600,
[data-theme="dark"] .adm-body .text-slate-700,
[data-theme="dark"] .adm-body .text-slate-500 { color:var(--text-muted) !important; }
[data-theme="dark"] .lp-body .border-slate-200,
[data-theme="dark"] .lp-body .border-slate-300,
[data-theme="dark"] .adm-body .border-slate-200,
[data-theme="dark"] .adm-body .border-slate-300 { border-color:var(--border) !important; }
[data-theme="dark"] .lp-body input { background:var(--input-bg) !important; color:var(--text) !important; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; }

/* Toast (share/invite confirmations) */
.tr-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px);
  background: #0f172a; color: #fff; padding: 12px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.28);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  z-index: 9999; max-width: 88vw; text-align: center;
}
.tr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   ENHANCED PROFILE (Me + public profiles) — Phase 1
   ============================================================ */
.stat-card { background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:14px; }
.stat-card .stat-val { font-size:20px; font-weight:800; line-height:1.1; }
.stat-card .stat-lbl { font-size:11px; color:var(--text-muted); margin-top:4px; }

/* per-category mini stat block */
.cat-stat { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:12px 14px; }
.cat-stat-head { font-weight:700; margin-bottom:6px; }
.cat-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; font-size:13px; color:var(--text-muted); }

/* edit form fields */
.edit-field { margin-bottom:12px; }
.edit-field label { display:block; font-size:13px; font-weight:600; margin-bottom:5px; }
.edit-field .hint { font-weight:400; color:var(--text-muted); font-size:11px; }
.edit-field input[type=text], .edit-field input:not([type]), .edit-field textarea {
  width:100%; box-sizing:border-box; padding:11px 12px; border-radius:12px;
  border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:15px; }
.edit-field input[type=color] { width:56px; height:40px; padding:2px; border-radius:10px; border:1px solid var(--border); background:var(--input-bg); }
.edit-field textarea { resize:vertical; font-family:inherit; }

/* privacy toggle rows */
.priv-list { border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.priv-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; background:var(--panel); border-bottom:1px solid var(--border); font-size:14px; cursor:pointer; }
.priv-row:last-child { border-bottom:none; }
.priv-switch { position:relative; width:46px; height:26px; flex:none; }
.priv-switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.priv-track { position:absolute; inset:0; background:var(--tab-bg); border-radius:999px; transition:background .2s; }
.priv-track::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s; }
.priv-switch input:checked + .priv-track { background:linear-gradient(90deg,#f97316,#ec4899); }
.priv-switch input:checked + .priv-track::after { transform:translateX(20px); }

/* You vs Them comparison */
.cmp-head { display:grid; grid-template-columns:1fr 1.4fr 1fr; text-align:center; font-size:12px;
  font-weight:700; color:var(--text-muted); padding:0 2px 6px; }
.cmp-row { display:grid; grid-template-columns:1fr 1.4fr 1fr; align-items:center; text-align:center;
  padding:10px 2px; border-bottom:1px solid var(--border); }
.cmp-row:last-child { border-bottom:none; }
.cmp-mine, .cmp-theirs { font-weight:800; font-size:15px; }
.cmp-label { font-size:13px; color:var(--text-muted); }
.cmp-up { color:#22c55e; font-size:11px; }
.cmp-down { color:#ef4444; font-size:11px; }

/* tappable leaderboard rows / chat names */
.lb-row[data-profile] { cursor:pointer; }
.lb-row[data-profile]:active { transform:scale(.99); }
.chat-msg .who[data-profile] { cursor:pointer; }

/* ============================================================
   NOTIFICATIONS (bell + panel) — Phase 3
   ============================================================ */
.notif-bell { position:relative; padding:6px 10px; }
.notif-badge { position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:800; border-radius:999px;
  display:none; align-items:center; justify-content:center; line-height:1; }

.notif-panel { position:fixed; top:0; right:0; bottom:0; width:min(360px,88vw); z-index:1200;
  background:var(--bg); color:var(--text); border-left:1px solid var(--border);
  box-shadow:-8px 0 30px var(--shadow-color); transform:translateX(100%);
  transition:transform .25s ease; display:flex; flex-direction:column; }
.notif-panel.open { transform:translateX(0); }
.notif-panel-head { display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 14px) 16px 14px; border-bottom:1px solid var(--border); }
.notif-panel-head h3 { font-weight:800; font-size:17px; margin:0; }
.notif-panel-body { flex:1; overflow-y:auto; padding:8px; }
.notif-item { padding:12px 14px; border-radius:14px; margin-bottom:8px; background:var(--panel);
  border:1px solid var(--border); }
.notif-item.unread { border-left:3px solid var(--accent); }
.notif-item.has-actor { cursor:pointer; transition:background .12s; }
.notif-item.has-actor:hover, .notif-item.has-actor:active { background:var(--surface); }
.notif-row { display:flex; align-items:center; gap:11px; }
.notif-main { flex:1; min-width:0; }
.notif-avatar {
  flex:none; width:40px; height:40px; border-radius:50%;
  object-fit:cover; border:2px solid var(--accent); display:block;
}
.notif-avatar.is-emoji {
  display:flex; align-items:center; justify-content:center;
  font-size:20px; background:var(--surface);
}
.notif-chevron { flex:none; color:var(--text-muted); font-size:12px; }
/* Rivals ("take it back") section */
.rivals-section { margin:4px 0 12px; padding:10px; border-radius:14px;
  background:var(--surface); border:1px solid var(--border); }
.rivals-head { font-size:12px; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:#ef4444; margin:2px 4px 8px; }
.rival-item { padding:8px 4px; border-bottom:1px solid var(--border); }
.rival-item:last-child { border-bottom:none; }
.rival-item .notif-title[role="button"] { cursor:pointer; }
.rival-item .notif-title[role="button"]:hover { text-decoration:underline; }
.takeback-btn { flex:none; white-space:nowrap; font-size:12px; font-weight:800;
  padding:8px 12px; border-radius:10px; background:var(--accent); color:#fff;
  border:none; cursor:pointer; }
.takeback-btn:active { transform:scale(.97); }
/* Highlighted target hexes on the map */
.takeback-hex { animation:takebackPulse 1.1s ease-in-out infinite; }
@keyframes takebackPulse { 0%,100% { fill-opacity:.35; } 50% { fill-opacity:.12; } }
.notif-title { font-weight:700; font-size:14px; }
.notif-body { font-size:13px; color:var(--text-muted); margin-top:3px; }
.notif-time { font-size:11px; color:var(--text-muted); margin-top:6px; }

/* ===== Run history rows (permanent history under "Me") ===== */
.hist-row { display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:12px; cursor:pointer; box-shadow:0 1px 4px var(--shadow-color); }
.hist-row:active { transform:scale(.99); }
.hist-ico { width:38px; height:38px; flex:none; border-radius:50%; background:var(--panel-2);
  display:flex; align-items:center; justify-content:center; font-size:19px; }
.hist-main { flex:1; min-width:0; }
.hist-top { font-weight:700; font-size:15px; }
.hist-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }
.hist-hex { font-size:12px; text-align:right; white-space:nowrap; }
.hist-gain { color:#16a34a; font-weight:700; }
.hist-loss { color:#ef4444; font-weight:700; }

/* Mini-map inside the run detail modal (path replay + captured land) */
.run-detail-map { width:100%; height:220px; border-radius:16px; overflow:hidden;
  margin:10px 0 14px; background:var(--map-bg); border:1px solid var(--border); }
.run-detail-map .leaflet-container { background:var(--map-bg); }
.run-detail-empty { display:flex; align-items:center; justify-content:center; height:100%;
  font-size:13px; color:var(--text-muted); text-align:center; padding:0 20px; }