/* =============================================================================
   MCNR Live Player Map – Stylesheet
   =============================================================================

   CONFIGURATION
   ─────────────
   All visual knobs live in the :root block below. Edit those variables to
   restyle the entire UI without touching any other rule.

   Colour palette variables follow a two-tier system:
     --color-*        → raw palette values (change the actual hues here)
     --surface-*      → semantic surfaces that reference --color-* values
   ============================================================================= */

:root {
    /* ── Raw colour palette ────────────────────────────────────────────────── */
    --color-bg-page:              #1a2332;     /* page / body background              */
    --color-bg-panel:             22, 32, 46;  /* panel base as R,G,B for rgba()      */
    --color-bg-popup:             18, 26, 38;  /* popup background as R,G,B           */
    --color-bg-input:             #1e2d3d;     /* input field fill                    */
    --color-bg-input-focus:       18, 28, 45;  /* input focus fill as R,G,B           */
    --color-bg-debug:             0, 0, 0;     /* debug log panel fill as R,G,B       */

    --color-text-primary:         #e2eaf3;     /* headings, labels                    */
    --color-text-body:            #c8d8e8;     /* normal body text / player names     */
    --color-text-muted:           #a0b4c8;     /* secondary / info text               */
    --color-text-dim:             #7a9ab0;     /* very muted (coords, sub-labels)     */
    --color-text-placeholder:     #5a7080;     /* input placeholder                   */
    --color-text-empty:           #4a6070;     /* empty-state message                 */

    --color-border:               255, 255, 255; /* border base as R,G,B              */
    --color-input-border:         #3a4a5c;     /* solid input/control border          */

    --color-accent-blue:          37, 99, 235; /* tracked-item highlight as R,G,B     */
    --color-accent-blue-solid:    #3b82f6;     /* tracked-item left border            */

    /* Controls panel buttons */
    --color-btn-primary:          #2e7d32;
    --color-btn-primary-hover:    #388e3c;
    --color-btn-danger:           #c62828;
    --color-btn-danger-hover:     #e53935;

    /* Vehicle badge in player list */
    --color-vehicle-badge-bg:     29, 78, 120; /* R,G,B */
    --color-vehicle-badge-border: 100, 180, 240; /* R,G,B */
    --color-vehicle-badge-text:   #7ec8f0;

    /* Leaflet attribution bar */
    --color-attribution-bg:       15, 22, 32;  /* R,G,B */
    --color-attribution-text:     #7a9ab0;
    --color-attribution-link:     #5b9fc2;

    /* Leaflet zoom buttons */
    --color-zoom-bg:              22, 32, 46;  /* R,G,B */
    --color-zoom-bg-hover:        40, 58, 80;  /* R,G,B */
    --color-zoom-text:            #c8d8e8;

    /* ── Opacity levels ────────────────────────────────────────────────────── */
    --opacity-panel:              0.50;  /* main panel background                */
    --opacity-panel-header:       0.55;  /* panel header background              */
    --opacity-panel-input:        0.40;  /* search input background              */
    --opacity-panel-input-focus:  0.55;  /* search input focus background        */
    --opacity-debug:              0.70;  /* debug log panel                      */
    --opacity-attribution:        0.45;  /* Leaflet attribution bar              */
    --opacity-zoom:               0.55;  /* zoom button normal                   */
    --opacity-zoom-hover:         0.70;  /* zoom button hover                    */
    --opacity-border:             0.08;  /* panel outline                        */
    --opacity-border-header:      0.07;  /* header/search bottom divider         */
    --opacity-border-row:         0.05;  /* player list row divider              */
    --opacity-hover-row:          0.06;  /* player list row hover fill           */
    --opacity-scrollbar-track:    0.15;  /* scrollbar track                      */
    --opacity-scrollbar-thumb:    0.15;  /* scrollbar thumb                      */
    --opacity-zoom-border:        0.12;  /* zoom button border                   */
    --opacity-popup:              0.60;  /* popup background                     */

    /* ── Panel dimensions ──────────────────────────────────────────────────── */
    --panel-width:                220px;   /* player list expanded width          */
    --panel-width-collapsed:      44px;    /* collapsed circle diameter           */
    --panel-max-height:           50vh;    /* player list max height              */
    --controls-max-width:         250px;   /* debug controls panel max width      */
    --debug-max-width:            320px;   /* debug log panel max width           */
    --debug-max-height:           200px;   /* debug log panel max height          */

    /* ── Spacing ───────────────────────────────────────────────────────────── */
    --panel-pad-h:                12px;    /* panel horizontal padding            */
    --panel-pad-v:                10px;    /* panel vertical padding              */
    --panel-pad-header:           8px;     /* panel header bottom padding         */
    --row-pad-v:                  5px;     /* player list row vertical padding    */
    --row-pad-h:                  10px;    /* player list row horizontal padding  */
    --row-gap:                    7px;     /* gap between dot and text in row     */

    /* ── Border radii ──────────────────────────────────────────────────────── */
    --radius-panel:               5px;     /* panels, controls                    */
    --radius-popup:               7px;     /* Leaflet popup                       */
    --radius-badge:               3px;     /* job / vehicle badges                */
    --radius-button:              3px;     /* buttons                             */
    --radius-input:               3px;     /* text inputs                         */
    --radius-scrollbar:           3px;     /* scrollbar thumb                     */
    --radius-dot:                 50%;     /* player colour dot                   */

    /* ── Scrollbar ─────────────────────────────────────────────────────────── */
    --scrollbar-width:            5px;

    /* ── Typography ────────────────────────────────────────────────────────── */
    --font-family-ui:             Arial, sans-serif;
    --font-family-mono:           monospace;
    --font-size-panel-header:     13px;
    --font-size-row:              12px;
    --font-size-badge:            10px;
    --font-size-info:             12px;
    --font-size-debug:            12px;
    --font-size-search:           12px;
    --font-size-toggle:           15px;
    --font-size-toggle-collapsed: 20px;

    /* ── Player list dot ────────────────────────────────────────────────────── */
    --dot-size:                   10px;
    --dot-border-width:           1.5px;
    --dot-border-color:           rgba(0, 0, 0, 0.25);
    --dot-margin-top:             2px;     /* optical alignment with text baseline */

    /* ── Shadows ────────────────────────────────────────────────────────────── */
    --shadow-panel:               0 2px 5px rgba(0, 0, 0, 0.5);
    --shadow-panel-collapsed:     0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-popup:               0 4px 20px rgba(0, 0, 0, 0.40);

    /* ── Transitions ────────────────────────────────────────────────────────── */
    --transition-panel:           width 0.2s ease, max-height 0.2s ease;
    --transition-row-bg:          background 0.1s;
}


/* ── Base ── */
html, body {
    margin: 0;
    padding: 0;
    /* Pin to the true visible viewport so mobile browser chrome (address bar,
       navigation bar) is never counted in the height. Without this the map
       overflows below the screen and the Leaflet attribution disappears. */
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-family-ui);
    background: var(--color-bg-page);
}

#map {
    /* Absolutely fill the viewport above the timeline bar.
       Using top/bottom instead of a fixed height means the map genuinely
       resizes when the timeline bar is present — Leaflet controls stay
       anchored to the map edges and never get clipped. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 48px; /* always reserve space for the timeline bar */
    /* background colour is set inline from config.php */
}

/* ── Debug controls panel ── */
.controls {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(var(--color-bg-panel), var(--opacity-panel));
    color: var(--color-text-muted);
    padding: 15px;
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
    z-index: 1000;
    max-width: var(--controls-max-width);
    border: 1px solid rgba(var(--color-border), var(--opacity-border));
}
.controls h3 {
    margin-top: 0;
    color: var(--color-text-primary);
}
.controls input {
    margin: 5px 0;
    padding: 8px;
    width: calc(100% - 16px);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-input);
    background: var(--color-bg-input);
    color: var(--color-text-muted);
}
.controls button {
    padding: 8px 15px;
    background: var(--color-btn-primary);
    color: white;
    border: none;
    border-radius: var(--radius-button);
    cursor: pointer;
    margin: 5px 5px 0 0;
}
.controls button:hover {
    background: var(--color-btn-primary-hover);
}
.controls button.clear {
    background: var(--color-btn-danger);
}
.controls button.clear:hover {
    background: var(--color-btn-danger-hover);
}

.info {
    margin-top: 10px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-panel);
    font-size: var(--font-size-info);
    color: var(--color-text-muted);
}

/* ── Debug log panel ── */
.debug {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(var(--color-bg-debug), var(--opacity-debug));
    color: white;
    padding: 10px;
    border-radius: var(--radius-panel);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-debug);
    z-index: 1000;
    max-height: var(--debug-max-height);
    overflow-y: auto;
    max-width: var(--debug-max-width);
}

/* ── Player markers ── */
.player-marker-icon {
    overflow: visible !important;
}

/* ── Player list panel ── */
#player-list-panel {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(var(--color-bg-panel), var(--opacity-panel));
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
    z-index: 1000;
    width: var(--panel-width);
    display: flex;
    flex-direction: column;
    max-height: var(--panel-max-height);
    transition: var(--transition-panel);
    border: 1px solid rgba(var(--color-border), var(--opacity-border));
}

/* Collapsed state: shrink to just the toggle button */
#player-list-panel.collapsed {
    width: var(--panel-width-collapsed);
    max-height: var(--panel-width-collapsed); /* keeps it square → circle */
    overflow: hidden;
    border-radius: 50%;
    box-shadow: var(--shadow-panel-collapsed);
}

#player-list-header {
    padding: var(--panel-pad-v) var(--panel-pad-h) var(--panel-pad-header);
    background: rgba(var(--color-bg-panel), var(--opacity-panel-header));
    color: var(--color-text-body);
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    font-size: var(--font-size-panel-header);
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid rgba(var(--color-border), var(--opacity-border-header));
}

#player-list-panel.collapsed #player-list-header {
    border-radius: 50%;
    padding: 0;
    width: var(--panel-width-collapsed);
    height: var(--panel-width-collapsed);
    justify-content: center;
    border-bottom: none;
}

/* Hide everything except the toggle button when collapsed */
#player-list-panel.collapsed #player-list-search,
#player-list-panel.collapsed #player-list-body,
#player-list-panel.collapsed #player-list-header > div {
    display: none !important;
}

#player-list-toggle-btn {
    background: none;
    border: none;
    color: white;
    font-size: var(--font-size-toggle);
    cursor: pointer;
    padding: 0 0 0 6px;
    line-height: 1;
    flex-shrink: 0;
}

#player-list-panel.collapsed #player-list-toggle-btn {
    font-size: var(--font-size-toggle-collapsed);
    padding: 0;
}

#player-list-search {
    padding: 6px 8px;
    border: none;
    border-bottom: 1px solid rgba(var(--color-border), var(--opacity-border-header));
    font-size: var(--font-size-search);
    width: 100%;
    box-sizing: border-box;
    outline: none;
    flex-shrink: 0;
    background: rgba(var(--color-bg-panel), var(--opacity-panel-input));
    color: var(--color-text-body);
}
#player-list-search::placeholder {
    color: var(--color-text-placeholder);
}
#player-list-search:focus {
    background: rgba(var(--color-bg-input-focus), var(--opacity-panel-input-focus));
}

#player-list-body {
    overflow-y: auto;
    flex: 1;
}
#player-list-body::-webkit-scrollbar {
    width: var(--scrollbar-width);
}
#player-list-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, var(--opacity-scrollbar-track));
}
#player-list-body::-webkit-scrollbar-thumb {
    background: rgba(var(--color-border), var(--opacity-scrollbar-thumb));
    border-radius: var(--radius-scrollbar);
}

.player-list-entry {
    padding: var(--row-pad-v) var(--row-pad-h);
    font-size: var(--font-size-row);
    border-bottom: 1px solid rgba(var(--color-border), var(--opacity-border-row));
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: var(--row-gap);
    transition: var(--transition-row-bg);
}
.player-list-entry:hover {
    background: rgba(var(--color-border), var(--opacity-hover-row));
}
.player-list-entry.tracked {
    background: rgba(var(--color-accent-blue), 0.2);
    border-left: 3px solid var(--color-accent-blue-solid);
    padding-left: calc(var(--row-pad-h) - 3px);
}
.player-list-entry.tracked:hover {
    background: rgba(var(--color-accent-blue), 0.3);
}
.player-list-entry:last-child {
    border-bottom: none;
}

.player-list-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: var(--radius-dot);
    border: var(--dot-border-width) solid var(--dot-border-color);
    flex-shrink: 0;
    margin-top: var(--dot-margin-top);
}

.player-list-info {
    flex: 1;
    min-width: 0; /* allow flex child to shrink */
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.player-list-name {
    color: var(--color-text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-list-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.player-list-vehicle-badge {
    font-size: var(--font-size-badge);
    background: rgba(var(--color-vehicle-badge-bg), 0.5);
    border: 1px solid rgba(var(--color-vehicle-badge-border), 0.25);
    color: var(--color-vehicle-badge-text);
    border-radius: var(--radius-badge);
    padding: 1px 4px;
}

.player-list-job-badge {
    font-size: var(--font-size-badge);
    border-radius: var(--radius-badge);
    padding: 1px 5px;
    font-weight: 600;
}

.player-list-empty {
    padding: 16px var(--row-pad-h);
    font-size: var(--font-size-row);
    color: var(--color-text-empty);
    text-align: center;
}

/* ── Popup skin images ── */
.popup-skin-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.popup-skin-img {
    /* width/height set inline from config.php */
    display: block;
    object-fit: contain;
    image-rendering: auto;
    flex-shrink: 0;
    border-radius: var(--radius-badge);
    background: rgba(255, 255, 255, 0.05);
}
.popup-skin-details {
    flex: 1;
    min-width: 0;
}

/* ── Leaflet popup – dark + translucent ── */
.leaflet-popup-content-wrapper {
    background: rgba(var(--color-bg-popup), var(--opacity-popup)) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: var(--color-text-body) !important;
    border: 1px solid rgba(var(--color-border), var(--opacity-border)) !important;
    box-shadow: var(--shadow-popup) !important;
    border-radius: var(--radius-popup) !important;
}
.leaflet-popup-tip {
    background: rgba(var(--color-bg-popup), var(--opacity-popup)) !important;
}
.leaflet-popup-close-button {
    color: var(--color-text-dim) !important;
}
.leaflet-popup-close-button:hover {
    color: var(--color-text-body) !important;
}
.leaflet-popup-content b {
    color: var(--color-text-primary);
}
.leaflet-popup-content span[style*="color:#666"] {
    color: var(--color-text-dim) !important;
}

/* ── Leaflet attribution ── */
.leaflet-control-attribution {
    background: rgba(var(--color-attribution-bg), var(--opacity-attribution)) !important;
    color: var(--color-attribution-text) !important;
}
.leaflet-control-attribution a {
    color: var(--color-attribution-link) !important;
}

/* ── Leaflet zoom controls ── */
.leaflet-control-zoom a {
    background: rgba(var(--color-zoom-bg), var(--opacity-zoom)) !important;
    color: var(--color-zoom-text) !important;
    border-color: rgba(var(--color-border), var(--opacity-zoom-border)) !important;
}
.leaflet-control-zoom a:hover {
    background: rgba(var(--color-zoom-bg-hover), var(--opacity-zoom-hover)) !important;
    color: #ffffff !important;
}

/* ── Tour / Spotlight ─────────────────────────────────────────────── */
.tour-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    background: transparent;
}
.tour-backdrop.tour-dimmed {
    background: rgba(0,0,0,0.55);
    pointer-events: all;
}
.tour-box {
    position: fixed;
    z-index: 9002;
    background: #1a2535;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 18px 20px 14px;
    width: 300px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
    color: #e8edf2;
    font-family: inherit;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.tour-visual {
    width: 100%;
    height: 54px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tour-visual svg {
    width: 100%;
    height: 100%;
}
.tour-step-indicator {
    font-size: 11px;
    color: #7a9ab0;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tour-text {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.55;
    color: #dce6ef;
}
.tour-text strong { color: #fff; }
.tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tour-nav { display: flex; gap: 6px; }
.tour-btn {
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.tour-btn:disabled { opacity: 0.3; cursor: default; }
.tour-btn-ghost {
    background: rgba(255,255,255,0.08);
    color: #cdd8e3;
}
.tour-btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.15); }
.tour-btn-primary { background: #1185EE; color: #fff; font-weight: 600; }
.tour-btn-primary:hover { background: #1a96ff; }
.tour-highlight {
    position: relative;
    z-index: 9001 !important;
    outline: 3px solid #1185EE !important;
    outline-offset: 3px;
    border-radius: 6px;
}
.tour-help-btn {
    position: fixed;
    bottom: 74px;  /* timeline bar (48px) + attribution (~26px) */
    right: 10px;
    z-index: 8999;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: #1a2535;
    color: #7a9ab0;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: background 0.15s, color 0.15s;
    display: none;
    /* centre the ? glyph */
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}
.tour-help-btn:hover { background: #1185EE; color: #fff; }

/* ── Live Chat Button ────────────────────────────────────────────────────── */
.chat-btn {
    position: fixed;
    bottom: 116px; /* default: sits above the tour help btn (74px + 36px + 6px gap) — JS overrides */
    right: 10px;
    z-index: 8999;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: #1a2535;
    color: #c8d8e8;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    /* nudge emoji into true optical centre */
    padding-top: 1px;
}

/* ── Display Options Button ──────────────────────────────────────────────── */
.display-opts-btn {
    position: fixed;
    bottom: 158px; /* above chat-btn (116px + 36px + 6px gap) */
    right: 10px;
    z-index: 8999;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: #1a2535;
    color: #c8d8e8;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}
.display-opts-btn:hover {
    background: #1185EE;
    border-color: rgba(17,133,238,0.6);
    color: #fff;
}
.display-opts-btn.active {
    background: #1185EE;
    border-color: rgba(17,133,238,0.8);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(17,133,238,0.25), 0 2px 8px rgba(0,0,0,0.4);
}

/* ── Display Options Panel ───────────────────────────────────────────────── */
.display-opts-panel {
    position: fixed;
    bottom: 158px;
    right: 54px; /* sits to the left of the button */
    z-index: 8998;
    background: rgba(16, 26, 38, 0.97);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 8px;
    padding: 10px 14px 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    min-width: 175px;
    user-select: none;
}
.display-opts-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.45);
    margin-bottom: 8px;
}
.display-opts-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 0;
    cursor: pointer;
    color: #c8d8e8;
    font-size: 13px;
    white-space: nowrap;
}
.display-opts-row input[type="checkbox"] {
    cursor: pointer;
    accent-color: #4a9eda;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.display-opts-section-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(255,255,255,0.30);
    margin-top: 9px;
    margin-bottom: 2px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.chat-btn:hover {
    background: #1185EE;
    border-color: rgba(17,133,238,0.6);
    color: #fff;
}
.chat-btn.active {
    background: #1185EE;
    border-color: rgba(17,133,238,0.8);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(17,133,238,0.25), 0 2px 8px rgba(0,0,0,0.4);
}
/* Collapsed panel — smooth hover matching tour-help-btn */
#player-list-panel.collapsed {
    transition: var(--transition-panel), background 0.15s, border-color 0.15s;
}
#player-list-panel.collapsed:hover {
    background: rgba(17, 133, 238, 0.85) !important;
    border-color: rgba(17, 133, 238, 0.6) !important;
}

/* ── Auth / User Bar ─────────────────────────────────────────────────────── */
#user-bar {
    position: fixed;
    bottom: 56px; /* sit just above the timeline bar (48px + 8px gap) */
    left: 10px;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--color-bg-panel), 0.82);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(var(--color-border), 0.10);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: var(--color-text-body);
}
.user-bar-name {
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
}
.user-bar-role {
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.user-bar-logout {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 11px;
    padding: 2px 7px;
    border: 1px solid rgba(var(--color-border), 0.15);
    border-radius: 5px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.user-bar-logout:hover {
    background: rgba(var(--color-border), 0.08);
    color: var(--color-text-primary);
}

/* Login button (shown when not logged in) */
#user-bar-login {
    position: fixed;
    bottom: 56px;
    left: 10px;
    z-index: 1050;
    background: rgba(var(--color-bg-panel), 0.72);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(var(--color-border), 0.10);
    border-radius: 8px;
    padding: 5px 13px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#user-bar-login:hover {
    background: rgba(var(--color-bg-panel), 0.92);
    color: var(--color-text-primary);
    border-color: rgba(var(--color-border), 0.22);
}

/* ── Player name labels ───────────────────────────────────────────────────── */
/* Hidden by default; body.show-names reveals them */
.mcnr-name-label {
    display: none;
    font-size: 10px;
    font-family: var(--font-family-ui);
    font-weight: bold;
    background: rgba(30, 30, 30, 0.55);
    border: 1px solid rgba(var(--color-border), 0.08);
    padding: 1px 5px;
    border-radius: var(--radius-badge);
    line-height: 1.4;
}
body.show-names .mcnr-name-label {
    display: block;
}

/* ── History Timeline Bar ─────────────────────────────────────────────────── */
.timeline-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    background: rgba(18, 18, 24, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(var(--color-border), var(--opacity-border));
    z-index: 1100;
    box-sizing: border-box;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.timeline-bar--rewind .tl-live-label {
    opacity: 1;
    pointer-events: auto;
}

.tl-btn {
    flex-shrink: 0;
    background: rgba(var(--color-border), 0.08);
    border: 1px solid rgba(var(--color-border), 0.14);
    border-radius: var(--radius-panel);
    color: #e0e0e0;
    font-size: 13px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.tl-btn:hover { background: rgba(var(--color-border), 0.16); }
.tl-btn.is-playing { color: var(--color-accent-blue-solid); }

.tl-select {
    flex-shrink: 0;
    background: rgba(var(--color-border), 0.07);
    border: 1px solid rgba(var(--color-border), 0.14);
    border-radius: var(--radius-panel);
    color: #d0d0d0;
    font-size: var(--font-size-badge);
    padding: 3px 5px;
    cursor: pointer;
    height: 32px;
}
.tl-select option { background: #1a1a24; }

.tl-timestamp {
    flex-shrink: 0;
    font-size: 11px;
    font-family: var(--font-family-mono);
    color: var(--color-text-dim);
    min-width: 86px;
    text-align: center;
}

.tl-slider {
    flex: 1;
    min-width: 0;
    accent-color: var(--color-accent-blue-solid);
    cursor: pointer;
    height: 4px;
}
.tl-slider:disabled { opacity: 0.35; cursor: not-allowed; }

.tl-live-label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #e74c3c;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* ── Live Action Log Drawer ───────────────────────────────────────────────── */
#livelog-drawer {
    position: fixed;
    /* Anchor to bottom:0 so mobile browser chrome never pushes us off-screen.
       The timeline bar (z-index: 1100) sits on top of us (z-index: 1050),
       so we add padding-bottom to keep content clear of it. */
    bottom: 0;
    left: 0; right: 0;
    /* height covers the content area (220px) + the 48px timeline bar below */
    height: calc(220px + 48px);
    padding-bottom: 48px;
    box-sizing: border-box;
    background: rgba(14, 16, 22, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(var(--color-border), 0.10);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    font-family: var(--font-family-ui);
    pointer-events: none; /* closed: don't block map clicks */
}
#livelog-drawer.open {
    transform: translateY(0);
    pointer-events: auto;
}
#livelog-drawer.collapsed {
    /* collapsed: show only the 36px header, peeking above the timeline bar */
    height: calc(36px + 48px);
    padding-bottom: 48px;
    transform: translateY(0);
    pointer-events: auto;
}

#livelog-header {
    flex-shrink: 0;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: rgba(var(--color-border), 0.04);
    border-bottom: 1px solid rgba(var(--color-border), var(--opacity-border-header));
    cursor: pointer;
    user-select: none;
}

#livelog-header-title {
    flex: 1;
    font-size: var(--font-size-row);
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.livelog-header-btn {
    flex-shrink: 0;
    background: rgba(var(--color-border), 0.07);
    border: 1px solid rgba(var(--color-border), 0.12);
    border-radius: var(--radius-badge);
    color: var(--color-text-dim);
    font-size: 11px;
    padding: 2px 7px;
    cursor: pointer;
    line-height: 1.5;
}
.livelog-header-btn:hover { background: rgba(var(--color-border), 0.14); color: #fff; }
#livelog-pin.pinned { color: var(--color-accent-blue-solid); border-color: var(--color-accent-blue-solid); }

#livelog-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
#livelog-body::-webkit-scrollbar { width: var(--scrollbar-width); }
#livelog-body::-webkit-scrollbar-track { background: transparent; }
#livelog-body::-webkit-scrollbar-thumb {
    background: rgba(var(--color-border), var(--opacity-scrollbar-thumb));
    border-radius: var(--radius-scrollbar);
}

.livelog-entry {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 10px;
    font-size: var(--font-size-row);
    border-bottom: 1px solid rgba(var(--color-border), var(--opacity-border-row));
    line-height: 1.5;
}
.livelog-entry:last-child { border-bottom: none; }

.livelog-time {
    flex-shrink: 0;
    font-size: var(--font-size-badge);
    color: var(--color-text-empty);
    min-width: 28px;
    text-align: right;
}

.livelog-badge {
    flex-shrink: 0;
    font-size: var(--font-size-badge);
    font-weight: 600;
    padding: 1px 5px;
    border-radius: var(--radius-badge);
    background: rgba(74, 158, 218, 0.2);
    color: var(--color-accent-blue-solid);
    white-space: nowrap;
}

.livelog-player {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 11px;
}

.livelog-details {
    color: var(--color-text-body);
    flex: 1;
    word-break: break-word;
}

.livelog-empty {
    padding: 20px 10px;
    text-align: center;
    color: var(--color-text-empty);
    font-size: var(--font-size-row);
}

#livelog-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e74c3c;
    flex-shrink: 0;
    animation: livelog-blink 1.2s ease-in-out infinite;
}
@keyframes livelog-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}
#livelog-pulse.idle { background: var(--color-text-empty); animation: none; }