@charset "UTF-8";
:root {
    --bg-0: #0b0d11;
    --bg-1: #13161b;
    --bg-2: #181c23;
    --border: #1f242c;
    --border-2: #2a313b;
    --text: #e6e8ec;
    --text-strong: #f7f8fa;
    --muted: #8a90a0;
    --muted-2: #5d6371;
    --accent: #7dd3fc;
    --accent-2: #38bdf8;
    --accent-glow: rgba(125, 211, 252, 0.22);
    --ok: #4ade80;
    --warn: #fbbf24;
    --err: #f87171;
    --ui-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
    --num-font: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg-0);
    color: var(--text);
    font-family: var(--ui-font);
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ---------------- Top bar ---------------- */
#topbar {
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 24px;
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
    border-bottom: 1px solid var(--border);
    user-select: none;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.brand-mark {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.35), 0 0 12px var(--accent-glow);
}

.brand-name {
    font-size: 13px;
    color: var(--text-strong);
}

.brand-sep {
    color: var(--muted-2);
    font-weight: 400;
}

.brand-sub {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.18em;
}

/* ---------------- Sidebar sections ---------------- */
.side-section {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.side-section.side-teams {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-bottom: none;
}
.side-section.side-teams .side-head {
    padding: 10px 14px 6px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
}
.side-section.side-teams .side-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 14px 12px;
}
.side-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 6px;
}

/* Status row (no background — sits in sidebar) */
.side-status {
    display: flex;
    align-items: center;
    gap: 10px;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted-2);
    transition: background 0.2s;
}
.side-status[data-state="connecting"] .status-dot { background: var(--warn); animation: pulse 1.6s infinite; }
.side-status[data-state="connected"]  .status-dot { background: var(--accent); animation: pulse 2.2s infinite; }
.side-status[data-state="live"]       .status-dot { background: var(--ok); }
.side-status[data-state="error"]      .status-dot { background: var(--err); }

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50%      { box-shadow: 0 0 0 4px transparent; opacity: 0.7; }
}

.status-text {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--text);
    text-transform: uppercase;
    font-weight: 500;
    font-family: var(--num-font);
}


/* Map selector */
.side-map select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-strong);
    font-family: var(--ui-font);
    font-size: 12px;
    font-weight: 500;
    padding: 7px 26px 7px 10px;
    border-radius: var(--r-sm);
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238a90a0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    transition: border-color 0.15s, background-color 0.15s;
}
.side-map select:hover { border-color: var(--border-2); }
.side-map select:focus { border-color: var(--accent); }
.side-map select option { background: var(--bg-1); color: var(--text); }

/* Quick counts */
.side-counts {
    display: flex;
    gap: 8px;
}
.qstat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.qstat-value {
    font-family: var(--num-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.qstat-label {
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
}
.qstat[data-kind="players"] .qstat-value { color: var(--accent); }
.qstat[data-kind="bots"]    .qstat-value { color: #f9a8d4; }

/* ---------------- Layout ---------------- */
#radar-container {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.side-panel {
    width: 260px;
    flex: 0 0 260px;
    background: var(--bg-1);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: flex-basis 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                width      0.2s cubic-bezier(0.16, 1, 0.3, 1),
                border-right-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sidebar close button — mobile-only. Hidden on desktop (hamburger is the
   canonical toggle there). On mobile, topbar hamburger may be hidden by the
   browser URL bar (Telegram WebView, some Android Chromes), so we give the
   drawer its own obvious close target. Positioned absolute top-right of the
   drawer so it never fights the status/map/counts flex layout. */
.side-close {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(15, 20, 30, 0.6);
    color: var(--muted);
    border: 1px solid var(--border);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    padding: 0;
}
.side-close:hover, .side-close:active { color: var(--text); background: rgba(30, 40, 55, 0.9); }
.side-close .tool-ico { width: 16px; height: 16px; }

/* No-token overlay — shown when websocket.js emits status "no-token". */
.no-token-overlay {
    position: fixed; inset: 0;
    z-index: 500;                       /* above settings drawer (220) */
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    animation: no-token-fade 0.2s ease-out;
}
.no-token-overlay.hidden { display: none; }
@keyframes no-token-fade { from { opacity: 0; } to { opacity: 1; } }
.no-token-modal {
    background: var(--bg-1);
    border: 1px solid var(--border-2);
    border-radius: 12px;
    padding: 22px 24px;
    max-width: 480px; width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    color: var(--text);
    max-height: 90vh; overflow-y: auto;
}
.no-token-modal h2 {
    margin: 0 0 12px 0;
    font-size: 17px; font-weight: 600;
    color: var(--text-strong);
    letter-spacing: 0.02em;
}
.no-token-modal p {
    margin: 0 0 12px 0; font-size: 13px; line-height: 1.5;
    color: var(--muted);
}
.no-token-modal code {
    background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px;
    color: var(--text);
    word-break: break-all;
}
.no-token-modal label {
    display: block; font-size: 12px; color: var(--muted);
    margin: 4px 0 6px 0;
}
.no-token-modal textarea {
    width: 100%; box-sizing: border-box;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--border-2);
    color: var(--text);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; line-height: 1.4;
    resize: vertical; min-height: 60px;
    outline: none;
}
.no-token-modal textarea:focus { border-color: var(--brass, #d4a355); }
.no-token-err {
    margin: 8px 0 0 0; padding: 8px 10px; border-radius: 6px;
    background: rgba(220, 60, 60, 0.14);
    border: 1px solid rgba(220, 60, 60, 0.35);
    color: #ff9090; font-size: 12px; line-height: 1.35;
}
.no-token-actions {
    display: flex; justify-content: flex-end; margin-top: 14px;
}
.no-token-actions .btn-primary {
    min-height: 40px; padding: 8px 20px;
    font-size: 14px; font-weight: 600;
}
.no-token-help {
    margin-top: 14px !important;
    font-size: 11.5px !important;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid var(--border-2);
    border-radius: 4px;
    color: var(--muted);
}

.side-panel.collapsed {
    flex: 0 0 0px !important;
    width: 0px !important;
    border-right-color: transparent !important;
}

#killfeed {
    border-right: none;
    border-left: 1px solid var(--border);
}

.side-head {
    padding: 12px 16px;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    font-weight: 500;
}

.side-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.side-body::-webkit-scrollbar { width: 6px; }
.side-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.side-body::-webkit-scrollbar-track { background: transparent; }

.canvas-wrap {
    flex: 1;
    position: relative;
    background: var(--bg-0);
    min-width: 0;
}

#radar-canvas {
    width: 100%;
    height: 100%;
    display: block;
    /* Disable browser-level pinch-zoom / pan so our JS touch handlers
       (touchstart/move/end in renderer.js) actually receive multi-touch
       gestures instead of the browser treating them as page zoom. */
    touch-action: none;
    -ms-touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------------- Damage feed (top-right floating panel) ---------------- */
.event-feed {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 280px;
    max-height: 60vh;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
    overflow: hidden;
}

.event-item {
    background: rgba(11, 13, 17, 0.85);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    color: #cbd5e1;
    font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    border-left: 2px solid #facc15;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: feedIn 0.18s ease;
    line-height: 1.4;
}
.event-item.event-damage  { border-left-color: #f87171; }
.event-item.event-kill    { border-left-color: #ef4444; color: #fff; }
.event-item.event-knock   { border-left-color: #fbbf24; }
.event-item.event-loot    { border-left-color: #facc15; }
.event-item.event-self    { border-left-color: #4ade80; color: #d1fae5; }

/* Closest valuable loot panel — TOP-LEFT of the canvas (the bottom-left is
   occupied by the limb-HP silhouette which is canvas-painted at oy=height-110
   and would visually collide with this DOM panel). Mirrors event-feed
   styling but compact (one row per item). Populated by renderer.js per frame
   from snapshot.players filtered by lootValueMin + sorted by distance. */
.closest-loot {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 240px;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 10;
    pointer-events: none;
    background: rgba(11, 13, 17, 0.82);
    border-radius: 6px;
    border: 1px solid rgba(250, 204, 21, 0.25);
    padding: 6px 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    /* Hidden until renderer.js puts at least one entry in the list */
    display: none;
}
.closest-loot.has-entries { display: block; }
.closest-loot-head {
    color: #facc15;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(250, 204, 21, 0.18);
    padding-bottom: 3px;
}
.closest-loot-list { display: flex; flex-direction: column; gap: 3px; }
.closest-loot-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    color: #e2e8f0;
    line-height: 1.3;
}
.closest-loot-row .cll-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.closest-loot-row .cll-price { color: #fcd34d; font-weight: 600; min-width: 40px; text-align: right; }
.closest-loot-row .cll-dist  { color: #94a3b8; font-size: 10px; min-width: 32px; text-align: right; }
.closest-loot-row.cll-tier-1 .cll-price { color: #fef3c7; }
.closest-loot-row.cll-tier-2 .cll-price { color: #fcd34d; }
.closest-loot-row.cll-tier-3 .cll-price { color: #fb923c; }
.closest-loot-row.cll-tier-4 .cll-price { color: #ef4444; }

@keyframes feedIn {
    from { transform: translateX(8px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.event-time { color: var(--muted); margin-right: 6px; font-size: 10px; }

/* ---------------- Floating tool groups ---------------- */
.floating-tools, .floating-zoom {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: rgba(13, 16, 22, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-2);
    border-radius: 8px;
    z-index: 5;
}
.floating-tools {
    top: 14px;
    right: 14px;
}
.floating-zoom {
    bottom: 14px;
    right: 14px;
}
.tool-divider {
    width: 1px;
    height: 22px;
    background: var(--border-2);
    margin: 0 4px;
}

.tool-btn {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.06s;
    padding: 0;
}

.tool-btn:hover {
    background: var(--bg-2);
    color: var(--text);
    border-color: var(--border);
}

.tool-btn:active {
    transform: translateY(1px);
}

.tool-btn[data-active="true"] {
    background: rgba(125, 211, 252, 0.12);
    color: var(--accent);
    border-color: rgba(125, 211, 252, 0.35);
}

.tool-sep {
    width: 1px;
    height: 22px;
    background: var(--border-2);
    margin: 0 4px;
}

.tool-ico {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tool-ico svg {
    width: 100%;
    height: 100%;
    display: block;
}

.tool-zoom-label {
    width: 52px;
    font-family: var(--num-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.02em;
}

/* ---------------- Leaderboard / killfeed ---------------- */
.team-group {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--bg-0);
}

.team-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text);
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    position: relative;
}

.team-header::after {
    content: '▾';
    position: absolute;
    right: 10px;
    font-size: 9px;
    color: var(--muted-2);
    transition: transform 0.15s ease;
}

.team-group.collapsed .team-header::after {
    transform: rotate(-90deg);
}

.team-group.collapsed .player-row,
.team-group.collapsed .player-meta {
    display: none !important;
}

.team-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 4px currentColor;
}

.team-alive-count {
    margin-left: auto;
    margin-right: 14px;
    font-family: var(--num-font);
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.player-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

.player-row:last-child { border-bottom: none; }

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

.player-name {
    font-size: 12px;
    color: var(--text-strong);
    display: flex;
    align-items: center;
    gap: 6px;
}

.player-subtype {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bg-2);
    color: var(--muted);
    text-transform: uppercase;
}

.st-pmc   { background: rgba(125, 211, 252, 0.12); color: var(--accent); }
.st-scav  { background: rgba(74, 222, 128, 0.12);  color: #4ade80; }
.st-bot   { background: rgba(251, 191, 36, 0.12);  color: #fbbf24; }
.st-actor { background: rgba(255, 140, 0, 0.16);   color: #ff8c00; }
.st-boss  { background: rgba(248, 113, 113, 0.14); color: var(--err); }
.st-elite { background: rgba(251, 146, 60, 0.14);  color: #fb923c; }
.st-guard { background: rgba(244, 114, 182, 0.12); color: #f472b6; }

.player-hp-bar {
    height: 4px;
    background: var(--bg-2);
    border-radius: 2px;
    overflow: hidden;
}

.player-hp-fill {
    height: 100%;
    transition: width 0.25s ease;
    border-radius: 2px;
}

.player-weapon {
    font-family: var(--num-font);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.02em;
}

/* Per-player meta line: level/squad/kill counts */
.player-meta {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    font-family: var(--num-font);
    font-size: 10px;
    margin-top: 2px;
    padding-left: 2px;
}
.player-meta .meta-lvl  { color: #7dd3fc; }
.player-meta .meta-sq   { color: #a78bfa; }
.player-meta .meta-kill { color: #fbbf24; font-weight: 600; }

.event-item {
    padding: 6px 10px;
    font-size: 11.5px;
    border-left: 2px solid var(--border-2);
    margin-bottom: 4px;
    background: var(--bg-0);
    border-radius: 0 4px 4px 0;
}

.event-time {
    font-family: var(--num-font);
    font-size: 10px;
    color: var(--muted-2);
    margin-right: 6px;
}

.event-kill  { border-left-color: var(--err); }
.event-knock { border-left-color: var(--warn); }
.event-loot  { border-left-color: var(--accent); }

/* ---------------- Settings drawer (right-side slide-out OVERLAY) ----------
   2026-07-22: was a flex-item (`flex: 0 0 360px` on open) that shrank the
   canvas-wrap when opened. That triggered two visible bugs on every device:
     (1) map slides left when settings opens.
     (2) canvas.width isn't re-derived (no window resize fires), so the
         intrinsic pixel canvas gets browser-scaled → blurry map when the
         wrap dimensions change.
   Fix: position:absolute overlay pinned to the right edge, slide via
   transform. Canvas-wrap geometry never changes → renderer stays sharp,
   map stays put. Body always 360px; the .open class only toggles
   translateX. Backdrop below inherits the same z-order as the sidebar
   drawer on mobile. */
.settings-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 100%;
    z-index: 220;                  /* above sidebar (200) + backdrop (150) */
    background: var(--bg-1);
    border-left: 1px solid var(--border-2);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
    pointer-events: none;          /* hidden = not clickable through backdrop */
}

.settings-drawer.open {
    transform: translateX(0);
    pointer-events: auto;
}

.drawer-head {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

.drawer-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-strong);
    flex: 1;
}

.drawer-close {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.drawer-close:hover { background: var(--bg-2); color: var(--text); }

.drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 18px 16px;
    min-width: 360px;     /* keep inner width while parent animates */
}

.drawer-body::-webkit-scrollbar { width: 8px; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }

.drawer-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 360px;
}

.settings-section {
    margin-top: 14px;
}

.settings-section-title {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px 0;
    padding: 4px 2px;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}
.settings-section-title:hover { color: var(--text); }
.settings-section-title .sec-chevron { font-size: 9px; color: var(--text-strong); width: 10px; }

.settings-section.collapsed .settings-section-body { display: none; }

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.1s;
}

.settings-row:hover { background: var(--bg-2); }

.settings-row span.lbl { flex: 1; }

.settings-row input[type="checkbox"] {
    appearance: none;
    width: 32px;
    height: 18px;
    border-radius: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
}

.settings-row input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform 0.15s, background 0.15s;
}

.settings-row input[type="checkbox"]:checked {
    background: rgba(125, 211, 252, 0.18);
    border-color: rgba(125, 211, 252, 0.5);
}

.settings-row input[type="checkbox"]:checked::after {
    transform: translateX(14px);
    background: var(--accent);
}

.settings-row input[type="color"] {
    width: 28px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border-2);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.settings-row input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    background: var(--bg-2);
    border-radius: 2px;
}

.settings-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-0);
    box-shadow: 0 0 0 1px var(--accent-2);
    cursor: pointer;
}

.settings-val {
    font-family: var(--num-font);
    font-size: 11px;
    color: var(--muted);
    width: 50px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.btn-primary, .btn-ghost {
    appearance: none;
    border: 1px solid var(--border-2);
    background: var(--bg-2);
    color: var(--text);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    font-family: var(--ui-font);
}

.btn-primary {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
    border-color: transparent;
    color: #0b1220;
    font-weight: 600;
}

.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost:hover { background: var(--bg-0); color: var(--text-strong); border-color: var(--muted-2); }

/* ==========================================================================
   Mobile v3 (2026-07-22) — cyber-inspired further: no dead limb-panel CSS
   (limb is canvas-painted, scaled in renderer.js); tighter top-bar; single
   bottom bar collapses tools+zoom on very-small screens; touch-action.
   ========================================================================== */

/* --- iOS Safari: address bar collapses -webkit-fill-available fixes vh bugs.
       Android Chrome / Telegram in-app WebView: 100dvh follows dynamic browser
       chrome the same way. Both declared — browser picks the last supported
       value. Prevents `.settings-drawer bottom:0` from being hidden under the
       URL bar / gesture zone on portrait phones (the "Done button uncuttable"
       report 2026-07-25). */
@media (max-width: 900px) {
    html, body { height: -webkit-fill-available; min-height: -webkit-fill-available; }
    html, body { height: 100dvh; min-height: 100dvh; }
    #app { height: -webkit-fill-available; }
    #app { height: 100dvh; }

    /* Sidebar becomes overlay drawer. */
    .side-panel {
        position: absolute;
        top: 0; left: 0; bottom: 0;
        height: 100%;
        z-index: 200;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.55);
        transform: translateX(-100%);
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* Show close button on mobile — user's escape hatch when the topbar
       hamburger is hidden by browser chrome. */
    .side-close { display: inline-flex; }
    .side-panel:not(.collapsed) { transform: translateX(0); width: 280px; flex: 0 0 280px; }
    .side-panel.collapsed { transform: translateX(-100%); }
    #sidebar-backdrop {
        position: absolute; inset: 0;
        z-index: 150;
        background: rgba(0, 0, 0, 0.45);
    }
    #sidebar-backdrop.hidden { display: none; }

    .canvas-wrap { min-width: 0; width: 100%; }
    .event-feed { width: 220px; max-height: 40vh; }
    .closest-loot { width: 200px; }

    /* Touch UX universally on mobile — kill 300ms tap delay + tap-highlight. */
    button, .tool-btn, select, .btn-primary, .btn-ghost {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

/* --- Phone (portrait, common flagship widths). */
@media (max-width: 600px) {
    /* Top bar compressed but visible. Brand shrinks to bare mark on very
       narrow screens so the sidebar toggle owns the left side.
       flex-basis override needed — base rule has `flex: 0 0 48px` which
       otherwise locks the height even when `height:42px` is set here. */
    #topbar {
        height: 42px;
        flex: 0 0 42px;
        padding: 0 6px;
        gap: 8px;
    }
    .brand { gap: 6px; }
    .brand-name { font-size: 11px; letter-spacing: 0.03em; }
    .brand-sep, .brand-sub { display: none; }
    .brand-mark { width: 9px; height: 9px; }

    /* Left-side sidebar toggle → 44px touch target (WCAG 2.5.5 minimum). */
    #tool-sidebar {
        width: 44px !important;
        height: 44px !important;
        margin-right: 2px !important;
    }

    /* Top-right floating tools — smaller icons, tighter stack, above map. */
    .floating-tools {
        top: 6px; right: 6px;
        gap: 3px;
        padding: 3px;
    }
    .floating-tools .tool-btn {
        width: 36px; height: 36px;
        border-radius: 8px;
        background: rgba(15, 20, 30, 0.78);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .floating-tools .tool-ico { width: 17px; height: 17px; }
    .tool-divider, .tool-sep { display: none !important; }

    /* Bottom-right zoom — thumb-reach zone. Slightly smaller than v2 to leave
       more map real estate on portrait phones. */
    .floating-zoom {
        bottom: 10px; right: 8px;
        gap: 3px;
        padding: 3px;
    }
    .floating-zoom .tool-btn {
        width: 42px; height: 42px;
        background: rgba(15, 20, 30, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .tool-zoom-label { width: 48px; font-size: 11px; }

    /* Event feed and closest-loot compressed. */
    .event-feed {
        top: 52px; right: 6px;
        width: 160px;
        max-height: 25vh;
        font-size: 10px;
    }
    .closest-loot {
        width: 148px;
        top: 52px; left: 6px;
        max-height: 26vh;
        font-size: 10px;
        background: rgba(15, 20, 30, 0.85);
        backdrop-filter: blur(6px);
        border-radius: 6px;
        padding: 5px 7px;
    }
    .closest-loot-head { font-size: 9.5px; }
    .closest-loot-row  { font-size: 10.5px; }

    /* Sidebar drawer sized for phone. */
    .side-panel:not(.collapsed) { width: 260px; flex: 0 0 260px; }
    .side-head { padding: 10px 12px; font-size: 10px; }
    .side-body { padding: 6px; }

    /* Settings drawer fills phone screen (still overlay — see base rule).
       drawer-foot needs safe-area padding-bottom so the Done/Reset buttons
       don't sit under the iOS home-indicator or the Android gesture zone /
       Telegram WebView bottom bar. env() falls back to 0 on desktops so no
       harm outside mobile.  Base drawer touches env(...-top) via
       viewport-fit=cover on the <meta> — set on 2026-07-25. */
    .settings-drawer { width: 100vw; padding-bottom: env(safe-area-inset-bottom); }
    .drawer-body { min-width: 0 !important; padding: 10px; }
    .drawer-foot { min-width: 0 !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
    .drawer-head { padding: 8px 10px; }
    .drawer-title { font-size: 15px; }
    .drawer-close { width: 40px; height: 40px; }
    .settings-section-body { gap: 4px; }
    .settings-section-title { padding: 8px 6px; font-size: 12px; }
    .settings-row { padding: 6px 4px; }

    /* Quick stats compressed. */
    .qstat-value { font-size: 15px; }
    .qstat-label { font-size: 8.5px; }

    /* Compact tester pills (JS-injected, position:fixed inline). Override
       with !important. In portrait these otherwise steal >180px of the
       top-bar right side. */
    #tester-me-picker {
        max-width: 96px !important;
        font-size: 10px !important;
        padding: 3px 7px !important;
        top: 6px !important;
        right: 46px !important;
        opacity: 0.75 !important;
    }
    #tester-lang-floating {
        top: 6px !important;
        right: 6px !important;
        padding: 3px 8px !important;
        font-size: 10px !important;
        min-width: 30px !important;
        text-align: center !important;
        opacity: 0.75 !important;
    }
}

/* --- Portrait phones: pull tool row to the BOTTOM, next to zoom, so
       nothing above the map except the 42px top-bar. Big wins on tall
       screens where map real estate is precious. Landscape stays as-is
       because horizontal top-right doesn't waste vertical space there. */
@media (max-width: 600px) and (orientation: portrait) {
    .floating-tools {
        top: auto !important;
        bottom: 62px;               /* just above the zoom row */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        gap: 4px;
    }
    .floating-tools .tool-btn { width: 40px; height: 40px; }
    .floating-tools .tool-ico { width: 18px; height: 18px; }

    .floating-zoom {
        right: 50%;
        transform: translateX(50%);
    }

    /* Closest-loot on portrait — top-left below topbar, narrower. */
    .closest-loot {
        top: 48px !important;
        left: 6px;
        right: auto;
        max-width: 46vw;
        max-height: 22vh;
    }
    /* Event feed similarly on the other side — narrower on portrait. */
    .event-feed {
        top: 48px !important;
        right: 6px;
        max-width: 44vw;
        max-height: 24vh;
    }
}

/* --- Very small phones (iPhone SE 1st gen, small Android). */
@media (max-width: 380px) {
    .side-panel:not(.collapsed) { width: 235px; flex: 0 0 235px; }
    .event-feed   { width: 140px; font-size: 9.5px; }
    .closest-loot { width: 132px; font-size: 9.5px; padding: 4px 6px; }
    .floating-tools .tool-btn { width: 32px; height: 32px; }
    .floating-tools .tool-ico { width: 15px; height: 15px; }
    .floating-zoom  .tool-btn { width: 38px; height: 38px; }
    .tool-zoom-label { width: 44px; font-size: 10px; }
    /* Hide brand entirely — page title + status dot in sidebar are enough. */
    .brand { display: none; }
}

/* --- Landscape phones (game-mode watching): every HUD gets pushed to the
       edges so the map fills the middle. Tools bar moves to bottom-LEFT
       (out of the way of typical player-look direction), zoom to bottom-
       RIGHT, tester pills compact into the 34px topbar. Sidebar narrower
       (220px vs portrait's 260) since landscape width is precious. */
@media (orientation: landscape) and (max-height: 500px) {
    #topbar { height: 34px; flex: 0 0 34px; padding: 0 6px; gap: 8px; }
    .brand { gap: 6px; }
    .brand-name { font-size: 10px; letter-spacing: 0.03em; }
    .brand-sep, .brand-sub { display: none; }
    .brand-mark { width: 8px; height: 8px; }

    /* Sidebar toggle keeps 44px touch target. */
    #tool-sidebar { width: 40px !important; height: 40px !important; margin-right: 4px !important; }

    /* Sidebar: narrower and tighter padding so team list fits without
       eating half the map. Was 280px overlay on max-width:900 → 33% of
       844-wide iPhone landscape. Now 220px = 26%. */
    .side-panel:not(.collapsed) { width: 220px; flex: 0 0 220px; }
    .side-section { padding: 8px 10px; }
    .side-label { font-size: 9px; margin-bottom: 4px; }
    .side-map select { padding: 5px 22px 5px 8px; font-size: 11px; }
    .side-counts { gap: 6px; }
    .qstat { padding: 6px 8px; }
    .qstat-value { font-size: 14px; }
    .qstat-label { font-size: 8px; }
    .side-section.side-teams .side-head { padding: 8px 10px 4px; font-size: 9px; }
    .side-section.side-teams .side-body { padding: 2px 10px 8px; }

    /* Team cards + player rows — compact so a full 4-player team card
       actually fits without scrolling on a ~340px canvas-height landscape. */
    .team-header { padding: 6px 8px; font-size: 10px; }
    .team-header::after { right: 8px; font-size: 8px; }
    .team-color-dot { width: 7px; height: 7px; }
    .team-alive-count { font-size: 10px; margin-right: 12px; }
    .player-row { padding: 5px 8px; gap: 3px; }
    .player-name { font-size: 11px; }

    /* Info panels — narrower, hard-capped at 30vh so they never dominate. */
    .event-feed   { top: 40px !important; right: 6px; width: 180px; max-height: 30vh; }
    .closest-loot { top: 40px !important; left:  6px; right: auto;
                    width: 180px; max-height: 32vh; overflow-y: auto;
                    padding: 5px 7px; font-size: 10px; }

    /* Tools: bottom-LEFT, tighter than portrait. STATUS panel is canvas-
       painted at bottom-left too but scaled 0.5 in landscape (renderer.js),
       so it fits BENEATH the tools row. */
    .floating-tools {
        top: auto !important;
        right: auto !important;
        left: 8px;
        bottom: 8px;
        gap: 3px;
        padding: 3px;
    }
    .floating-tools .tool-btn { width: 32px; height: 32px; }
    .floating-tools .tool-ico { width: 15px; height: 15px; }

    /* Zoom: stay bottom-right, smaller than portrait. */
    .floating-zoom {
        bottom: 8px;
        right: 8px;
        gap: 3px;
        padding: 3px;
    }
    .floating-zoom .tool-btn { width: 36px; height: 36px; }
    .tool-zoom-label { width: 42px; font-size: 10px; }

    /* Tester pills: fit inside 34px topbar. */
    #tester-me-picker {
        top: 4px !important;
        right: 44px !important;
        max-width: 90px !important;
        font-size: 10px !important;
        padding: 2px 7px !important;
        opacity: 0.7 !important;
    }
    #tester-lang-floating {
        top: 4px !important;
        right: 6px !important;
        padding: 2px 8px !important;
        font-size: 10px !important;
        min-width: 28px !important;
        text-align: center !important;
        opacity: 0.7 !important;
    }
}

/* --- Touch-only device polish: bump all interactive to 44x44 minimum
       (WCAG 2.5.5, Apple HIG 44pt). */
@media (hover: none) and (pointer: coarse) {
    .tool-btn,
    .drawer-close,
    button:not(.brand):not(.checkbox-label):not(.settings-section-title):not(.settings-tabs button) {
        min-width: 44px;
        min-height: 44px;
    }
    /* Kill hover transitions on touch (they cause stutter). */
    .tool-btn { transition: background 0.06s, color 0.06s; }
}