:root {
    /* Team palette (used by the JS layer too — see TEAM_COLORS in app.js) */
    --team-a: #ff5050;
    --team-b: #50a0ff;
    --team-c: #4ecdc4;
    --team-d: #ffc107;

    /* Surface palette — body background and panel backgrounds. */
    --bg-deep: #1a1a2e;       /* page + panel background */
    --bg-panel: #2a3f5f;      /* divider, slot tile, header bar */
    --fg-default: #e0e0e0;    /* default body text colour */

    /* Accent palette — the cyan/teal used for headers, focus, key UI chrome. */
    --accent-cyan: #00d9ff;       /* primary accent */
    --accent-cyan-dim: #00b8d9;   /* gradient + hover counterpart */

    /* Armor palette — used by both .armor-XX classes and JS canvas drawing. */
    --armor-ra: #ff5050;
    --armor-ya: #ffc800;          /* = rgb(255, 200, 0) — was duplicated as both forms */
    --armor-ga: #00b400;

}

/* Utility class for elements toggled via classList. Existing show/hide
 * logic in app.js sets el.style.display directly, so this class is only
 * picked up by call sites that use classList.add/remove('hidden'). */
.hidden {
    display: none;
}

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

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: var(--bg-deep);
    color: var(--fg-default);
    line-height: 1.6;
    animation: fadeIn 0.4s ease-out;
    /* Pin the topbar + sidebar by making the body itself non-scrolling
     * and giving the .main pane its own scroll. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

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

/* Top bar — slim wordmark + version + GitHub link. Body is the
 * scroll-anchor (overflow: hidden, flex column), so this just needs to
 * sit at the top and not shrink. */
.topbar {
    display: flex;
    align-items: center;
    flex: 0 0 44px;
    padding: 0 20px;
    background: #16213e;
    border-bottom: 1px solid rgba(0, 217, 255, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    gap: 14px;
    z-index: 100;
}

.topbar-brand {
    font-family: 'Rajdhani', sans-serif;
    color: var(--accent-cyan);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-shadow: 0 0 12px rgba(0, 217, 255, 0.25);
    transition: color 0.15s ease;
}

.topbar-brand:hover {
    color: var(--accent-cyan-dim);
}

.topbar-spacer { flex: 1; }

.topbar-demo-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-left: 18px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #c9d6e8;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.no-demo .topbar-demo-info { display: none; }

.topbar-demo-info .topbar-team-a { color: #ff5050; }
.topbar-demo-info .topbar-team-b { color: #50a0ff; }
.topbar-demo-info .topbar-vs { color: #7a8ba8; font-weight: 500; }
.topbar-demo-info .topbar-score { color: #e8eef7; font-variant-numeric: tabular-nums; }
.topbar-demo-info .topbar-map { color: var(--accent-cyan-dim, #7ad7e8); }
.topbar-demo-info .topbar-date { color: #7a8ba8; font-weight: 500; }
.topbar-demo-info .topbar-sep {
    color: #4a5a6e;
    font-weight: 400;
    margin: 0 2px;
}

.topbar-version {
    color: #4a5a6e;
    font-family: monospace;
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.15s ease;
}

.topbar-version:hover {
    color: var(--accent-cyan);
}

/* Inner <a> rendered by setVersionTag in app.js for the commit hash */
.topbar-version a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.topbar-github {
    color: #7a8ba8;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease;
}

.topbar-github:hover {
    color: var(--accent-cyan);
}

/* Layout — sidebar + main pane fill the rest of the viewport. The
 * sidebar stays fixed; .main scrolls. */
.layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #16213e;
    border-right: 1px solid rgba(0, 217, 255, 0.08);
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.sidebar-btn {
    display: flex;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    color: #7a8ba8;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    transition: all 0.15s ease;
    position: relative;
}

.sidebar-btn:hover {
    color: var(--accent-cyan);
    background: rgba(0, 217, 255, 0.06);
}

.sidebar-btn.active {
    color: var(--accent-cyan);
    background: rgba(0, 217, 255, 0.08);
}

.sidebar-btn.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--accent-cyan);
    border-radius: 2px;
}

/* Two-row main pane: unified-timeline sits in the fixed top row,
 * .main-scroll fills the rest and scrolls. The timeline is no longer
 * position:sticky — that triggered a Firefox compositor bug where the
 * canvases inside the now-active tab were composited through a stale
 * snapshot for the first frame. */
.main {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#unified-timeline {
    flex: 0 0 auto;
    background: var(--bg-deep);
    /* Match the horizontal padding of .main-scroll so the timeline
     * lines up with the tab content below. */
    margin: 20px 28px 0 28px;
}

.main-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 28px;
}

/* Empty state for non-Search tabs when no demo loaded.
 * Hides every direct child of an inactive-because-no-demo tab and
 * surfaces only the .empty-state placeholder. The Search tab is
 * exempt because its load + filter form must always be available. */
.empty-state {
    display: none;
    padding: 80px 40px;
    text-align: center;
    color: #7a8ba8;
    font-style: italic;
    font-size: 1rem;
}

body.no-demo .tab-content > .empty-state {
    display: block;
}

body.no-demo .tab-content:not(#tab-search) > :not(.empty-state) {
    display: none;
}

body.no-demo #unified-timeline {
    display: none !important;
}

@media (max-width: 800px) {
    .layout { flex-direction: column; }
    .sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 6px 8px;
        border-right: none;
        border-bottom: 1px solid rgba(0, 217, 255, 0.08);
    }
    .sidebar-btn {
        flex-shrink: 0;
        padding: 6px 12px;
    }
    .sidebar-btn.active::before {
        left: 6px;
        right: 6px;
        top: auto;
        bottom: 0;
        width: auto;
        height: 2px;
        border-radius: 1px;
    }
    .main { padding: 16px; }
}

.card {
    background: #16213e;
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 217, 255, 0.08);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.card h2 {
    font-family: 'Rajdhani', sans-serif;
    color: var(--accent-cyan);
    font-size: 1.4rem;
    letter-spacing: 0.03em;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--bg-panel);
    padding-bottom: 10px;
}

.load-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.load-row.dragover {
    background: rgba(0, 217, 255, 0.06);
}

.load-file-btn,
.load-row button {
    background: #0f3460;
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 217, 255, 0.4);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.load-file-btn:hover,
.load-row button:hover {
    background: var(--accent-cyan);
    color: var(--bg-deep);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.3);
}

.load-row button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.load-separator {
    color: var(--bg-panel);
    font-size: 1.2rem;
}

.load-row input[type="text"] {
    background: var(--bg-deep);
    border: 1px solid var(--bg-panel);
    border-radius: 6px;
    padding: 10px 15px;
    color: var(--fg-default);
    font-size: 0.95rem;
    width: 320px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.load-row input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
}

.load-row input[type="text"]::placeholder {
    color: #666;
}

.status {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

.status.loading {
    background: var(--bg-panel);
    color: var(--accent-cyan);
    position: relative;
    overflow: hidden;
}

.status.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.1), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    to { left: 100%; }
}

.status.success {
    background: rgba(0, 200, 83, 0.2);
    color: #00c853;
}

.status.error {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
}

/* Demo Search Panel — load row + filter form, both inside the Search tab */
.search-load-panel,
.search-filter-panel {
    padding: 16px 20px;
}

.search-load-panel {
    margin-bottom: 16px;
}

.search-form {
    margin-bottom: 12px;
}

.search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.search-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 140px;
    min-width: 120px;
}

.search-field-date {
    flex: 0 1 160px;
}

.search-field > span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7a8ba8;
}

.search-field input,
.search-field select {
    background: var(--bg-deep);
    border: 1px solid var(--bg-panel);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--fg-default);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-field input:focus,
.search-field select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
}

.search-field input::placeholder {
    color: #4a5a6e;
    font-style: italic;
}

.search-submit {
    background: #0f3460;
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 217, 255, 0.4);
    padding: 9px 22px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.search-submit:hover {
    background: var(--accent-cyan);
    color: var(--bg-deep);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.3);
}

.search-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.search-result {
    display: grid;
    grid-template-columns: 56px 110px 1fr auto auto;
    gap: 16px;
    align-items: center;
    background: var(--bg-deep);
    border: 1px solid rgba(42, 63, 95, 0.5);
    border-radius: 6px;
    padding: 10px 14px;
    color: var(--fg-default);
    font-size: 0.92rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.search-result:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 217, 255, 0.06);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.15);
}

.search-result-mode {
    color: var(--accent-cyan);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.search-result-map {
    color: #c8d4e3;
    font-weight: 500;
}

.search-result-contest {
    color: var(--fg-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-tag {
    color: #7a8ba8;
    font-size: 0.82rem;
    font-style: italic;
    min-width: 0;
    text-align: right;
}

.search-result-date {
    color: #7a8ba8;
    font-family: monospace;
    font-size: 0.85rem;
    white-space: nowrap;
}

.search-empty {
    padding: 20px;
    text-align: center;
    color: #7a8ba8;
    font-style: italic;
}

/* Tab Navigation */
.tab-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--bg-panel);
    padding-bottom: 0;
}

.tab-btn {
    background: transparent;
    border: none;
    color: #7a8ba8;
    padding: 12px 22px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: all 0.2s ease;
    position: relative;
}

.tab-btn:hover {
    color: var(--accent-cyan);
    background: rgba(0, 217, 255, 0.06);
}

.tab-btn.active {
    color: var(--accent-cyan);
    background: rgba(0, 217, 255, 0.08);
    box-shadow: inset 0 -2px 0 var(--accent-cyan);
    margin-bottom: -2px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}
/* (Removed `animation: tabFadeIn 0.3s ease-out`. The opacity +
 * translateY transition forced Firefox to composite the .tab-content
 * subtree through its own layer, which used a snapshot of the canvas
 * for the 300 ms animation window — anything renderMap / updateDetailView
 * wrote to the canvas backing store during that window stayed invisible
 * until the user navigated away and back, triggering another repaint.) */

.panel {
    background: var(--bg-deep);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(42, 63, 95, 0.5);
}

.panel h3 {
    font-family: 'Rajdhani', sans-serif;
    color: var(--accent-cyan);
    margin-bottom: 15px;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.panel h4 {
    font-family: 'Rajdhani', sans-serif;
    color: #a0c4d8;
    margin: 12px 0 6px 0;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.summary-item {
    text-align: center;
}

.summary-item label {
    display: block;
    color: #6b7d99;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.summary-item span {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--fg-default);
}

/* --- Duel mode: hide redundant "Per Team" aggregates ---
 *
 * When the Go-side normalizer detects a 1v1 it rewrites every team
 * reference to the player's own name, so the "Per Team" tables would
 * just restate the "Per Player" tables with different headers. These
 * selectors hide:
 *   - the standalone Teams summary panel (#teams-panel)
 *   - the "Per Team" h4 headings above each stats block
 *   - the "Per Team" aggregate tables themselves
 *   - the "Per Player" heading (redundant once there's no sibling)
 */
body.duel-mode .team-aggregate-panel,
body.duel-mode .team-aggregate-heading,
body.duel-mode .team-aggregate-table,
body.duel-mode .per-player-heading {
    display: none !important;
}

/* --- Match Settings: modifier pills (Dmgfrags / Midair / etc.) --- */
.modifier-label {
    display: block;
    color: #6b7d99;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-align: center;
}

.modifier-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.modifier-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-panel);
    color: var(--accent-cyan);
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid rgba(0, 217, 255, 0.25);
}

/* --- Server Info: collapsible cvar table --- */
#server-info-panel details > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
#server-info-panel details > summary::-webkit-details-marker {
    display: none;
}
#server-info-panel details > summary::before {
    content: '▶ ';
    color: var(--accent-cyan);
    font-size: 0.85rem;
    margin-right: 6px;
}
#server-info-panel details[open] > summary::before {
    content: '▼ ';
}

.serverinfo-table {
    margin-top: 12px;
    width: auto;
}
.serverinfo-table td:first-child code {
    color: var(--accent-cyan-dim);
    font-size: 0.85rem;
}
.serverinfo-table td:nth-child(2) {
    color: var(--fg-default);
    font-size: 0.85rem;
    word-break: break-all;
}

/* --- Scoreboard: bot badge next to player name --- */
.bot-badge {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    background: rgba(255, 165, 0, 0.18);
    color: #ffb347;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 165, 0, 0.4);
    vertical-align: middle;
}

.teams-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.team-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #16213e;
    border-radius: 8px;
    border-left: 3px solid var(--bg-panel);
    transition: border-color 0.2s;
}

.team-item:nth-child(1) {
    border-left-color: var(--team-a);
}

.team-item:nth-child(2) {
    border-left-color: var(--team-b);
}

.team-item:nth-child(3) {
    border-left-color: var(--team-c);
}

.team-item:nth-child(4) {
    border-left-color: var(--team-d);
}

.team-name {
    font-weight: 600;
    font-size: 1.05rem;
}

.team-frags {
    font-family: 'Rajdhani', sans-serif;
    color: var(--accent-cyan);
    font-weight: 700;
    font-size: 1.2rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-lnum;
}

table th,
table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(42, 63, 95, 0.6);
}

table th {
    background: #16213e;
    color: #7a8ba8;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: sticky;
    top: 0;
    z-index: 5;
}

table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

table tbody tr:hover {
    background: rgba(0, 217, 255, 0.07);
}

/* Right-align numeric columns (all columns except first) */
.stats-table td:not(:first-child),
.stats-table th:not(:first-child) {
    text-align: right;
}

.chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.weapon-bar {
    display: grid;
    grid-template-columns: 120px 1fr 60px;
    align-items: center;
    gap: 10px;
}

.weapon-name {
    color: #888;
    font-size: 0.9rem;
}

.bar-container {
    background: var(--bg-panel);
    border-radius: 4px;
    height: 20px;
    overflow: hidden;
}

.bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-cyan-dim));
    border-radius: 4px;
    transition: width 0.5s ease-out;
    box-shadow: 0 0 6px rgba(0, 217, 255, 0.2);
}

.weapon-count {
    text-align: right;
    font-weight: bold;
    color: var(--accent-cyan);
}

/* Timeline Styles */
.timeline-container {
    max-height: 600px;
    overflow-y: auto;
}

.timeline-header {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 10px;
    padding: 10px;
    background: #16213e;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.team-header {
    font-weight: bold;
    color: var(--accent-cyan);
    text-align: center;
}

.timeline-center {
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}

.timeline-body {
    display: flex;
    flex-direction: column;
}

.timeline-row {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 10px;
    padding: 4px 10px;
    border-bottom: 1px solid var(--bg-panel);
}

.timeline-row:hover {
    background: rgba(0, 217, 255, 0.05);
}

.timeline-left {
    text-align: right;
    font-size: 0.85rem;
}

.timeline-time {
    text-align: center;
    color: #888;
    font-size: 0.8rem;
    font-family: monospace;
}

.timeline-right {
    text-align: left;
    font-size: 0.85rem;
}

.timeline-event {
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
}

.timeline-event.frag {
    color: #ff6b6b;
}

.timeline-event.chat {
    color: #4ecdc4;
}

.timeline-event.teamsay {
    color: #45b7d1;
}

/* Timeline Analysis Tab */
.timeline-nav-panel {
    margin-bottom: 12px;
    padding: 18px 15px 4px 15px;
}

.team-status-panel {
    margin-bottom: 12px;
    padding: 8px 15px;
}

.team-status-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.team-status-side h4 {
    margin: 0 0 6px 0;
    font-size: 0.9rem;
    color: var(--accent-cyan);
    border-bottom: 1px solid var(--bg-panel);
    padding-bottom: 4px;
}

.team-status-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-family: monospace;
}

.team-status-table th {
    text-align: left;
    color: #888;
    font-weight: normal;
    padding: 2px 6px;
    border-bottom: 1px solid #1a2744;
}

.team-status-table td {
    padding: 2px 6px;
    color: #ccc;
}

.team-status-table tr:hover {
    background: rgba(0, 217, 255, 0.04);
}

.team-status-table .totals-row td {
    border-top: 1px solid var(--bg-panel);
    color: var(--accent-cyan);
    font-weight: bold;
    padding-top: 4px;
}

.armor-ra { color: var(--armor-ra); }
.armor-ya { color: var(--armor-ya); }
.armor-ga { color: var(--armor-ga); }

.timeline-nav-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.timeline-nav-time {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--accent-cyan);
    min-width: 50px;
    text-align: center;
    line-height: 24px;
}

.timeline-nav-bar-wrapper {
    flex: 1;
    position: relative;
    user-select: none;
    padding-bottom: 7px;
}

.timeline-nav-bar {
    position: relative;
    height: 24px;
    background: #1a2744;
    border-radius: 4px;
    cursor: crosshair;
}

.timeline-nav-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
}

.timeline-nav-caret {
    position: absolute;
    top: 24px;
    font-size: 14px;
    line-height: 1;
    color: var(--accent-cyan);
    cursor: grab;
    z-index: 10;
    transform: translateX(-50%);
    padding: 0 6px;
    text-shadow: 0 0 4px rgba(0, 217, 255, 0.5);
}

.timeline-nav-caret:active {
    cursor: grabbing;
}

.timeline-selection-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 217, 255, 0.15);
    border-left: 2px solid rgba(0, 217, 255, 0.6);
    border-right: 2px solid rgba(0, 217, 255, 0.6);
    pointer-events: none;
    z-index: 3;
    display: none;
    border-radius: 2px;
}

.timeline-nav-cursor {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 3px;
    background: var(--accent-cyan);
    border-radius: 2px;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 0 6px rgba(0, 217, 255, 0.5);
}

.timeline-nav-segment {
    font-family: monospace;
    font-size: 0.9rem;
    color: #888;
    white-space: nowrap;
    min-width: 90px;
    margin-top: 2px;
}

.timeline-nav-axis {
    position: relative;
    height: 16px;
    font-size: 0.9rem;
    color: #666;
    font-family: monospace;
}

.timeline-nav-axis span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.timeline-nav-axis span:first-child {
    transform: none;
}

.timeline-nav-axis span:last-child {
    transform: translateX(-100%);
}

.current-time-indicator {
    position: absolute;
    top: 0;
    bottom: 25px;
    width: 2px;
    background: var(--accent-cyan);
    pointer-events: none;
    z-index: 5;
    opacity: 0.8;
}

.timeline-legend {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    color: #888;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-dot.rl { background: rgba(255, 107, 107, 0.9); }
.legend-dot.lg { background: rgba(0, 217, 255, 0.9); }

/* Granular weapon/powerup colors */
.legend-color.weapons { background: rgba(0, 217, 255, 0.9); }
.legend-color.powerups { background: rgba(255, 193, 7, 0.9); }
.legend-color.rl { background: rgba(255, 107, 107, 0.9); }
.legend-color.lg { background: rgba(0, 217, 255, 0.9); }
.legend-color.rllg { background: rgba(156, 39, 176, 0.9); }
.legend-color.quad { background: rgba(0, 150, 255, 0.9); }
.legend-color.pent { background: rgba(255, 0, 0, 0.9); }
.legend-color.ring { background: rgba(255, 235, 59, 0.9); }
.legend-color.health { background: rgba(0, 200, 83, 0.9); }
.legend-color.armor { background: rgba(255, 193, 7, 0.9); }
.legend-color.ra { background: rgba(255, 50, 50, 0.9); }
.legend-color.ya { background: rgba(255, 200, 0, 0.9); }
.legend-color.ga { background: rgba(0, 180, 0, 0.9); }

/* Y-Axis styling */
.detail-graph-wrapper,
.health-graph-wrapper {
    display: flex;
    gap: 5px;
}

.timeline-y-axis {
    width: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px 5px 20px 0;
    font-size: 0.9rem;
    color: #888;
    font-family: monospace;
}

.y-label {
    line-height: 1;
}

/* Full-width panels */
.timeline-detail-graph-panel-full,
.timeline-health-panel-full {
    margin-bottom: 20px;
}

.detail-graph-outer,
.health-graph-outer {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.timeline-canvas {
    width: 100%;
    height: 200px;
    display: block;
    border-radius: 4px;
}

.detail-graph-axis,
.health-graph-axis {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px 0 10px;
    font-size: 0.9rem;
    color: #888;
    font-family: monospace;
}

/* Chat tab layout */
.chat-panel-outer {
    padding: 12px 16px;
    margin-bottom: 20px;
}

.chat-header-row {
    display: flex;
    gap: 0;
    margin-bottom: 4px;
}

.chat-header-row .chat-time-axis-col {
    width: 54px;
    flex-shrink: 0;
}

.chat-header-row .chat-time-axis-col h3 {
    visibility: hidden;
}

.chat-column-header {
    flex: 1;
    min-width: 0;
}

.chat-scroll-viewport {
    position: relative;
    height: 700px;
    overflow-y: auto;
    overflow-x: hidden;
}

.chat-scroll-inner {
    display: flex;
    gap: 0;
    position: relative;
}

.chat-time-axis-col {
    width: 54px;
    flex-shrink: 0;
}

.chat-time-axis {
    position: relative;
}

.chat-tick {
    position: absolute;
    right: 4px;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
    font-size: 0.67rem;
    font-family: monospace;
    color: #666;
    white-space: nowrap;
    pointer-events: none;
}

.chat-tick::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 1px;
    background: #3a3a5a;
    margin-left: 3px;
    flex-shrink: 0;
}

.chat-tick-current {
    color: var(--accent-cyan);
    font-weight: 600;
}

.chat-tick-current::after {
    background: var(--accent-cyan);
    width: 10px;
}

.chat-columns-wrapper {
    display: flex;
    flex: 1;
    gap: 4px;
}

.chat-timeline-scroll {
    position: relative;
    flex: 1;
    min-width: 0;
    background: #0d1929;
    border-radius: 4px;
}

.chat-time-marker {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 1px 6px;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
}

.chat-time-marker-msg {
    word-break: break-word;
    white-space: normal;
}

.chat-time-marker-msg.frag { color: #ff6b6b; }
.chat-time-marker-msg.powerup { color: #ffc107; }
.chat-time-marker-msg.chat { color: #4ecdc4; }
.chat-time-marker-msg.teamsay { color: #45b7d1; }

.chat-displaced {
    padding-left: 16px;
}

.chat-displaced-dots {
    color: #555;
    font-size: 0.7rem;
    margin-right: 2px;
}

.chat-current-time-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-cyan);
    z-index: 10;
    pointer-events: none;
    opacity: 0.6;
    top: 0;
}

/* Diverging bar chart - Team A up, Team B down */
.diverging-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 2px;
    position: relative;
}

.diverging-bar-top {
    position: absolute;
    bottom: 50%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
}

.diverging-bar-bottom {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.bar-segment {
    transition: height 0.1s;
    width: 100%;
}

/* Legacy colors */
.bar-segment.weapons { background: rgba(0, 217, 255, 0.9); }
.bar-segment.powerups { background: rgba(255, 193, 7, 0.9); }

/* Granular weapon colors */
.bar-segment.rl { background: rgba(255, 107, 107, 0.9); }
.bar-segment.lg { background: rgba(0, 217, 255, 0.9); }
.bar-segment.rllg { background: rgba(156, 39, 176, 0.9); }

/* Granular powerup colors */
.bar-segment.quad { background: rgba(0, 150, 255, 0.9); }
.bar-segment.pent { background: rgba(255, 0, 0, 0.9); }
.bar-segment.ring { background: rgba(255, 235, 59, 0.9); }

/* Health/Armor segments */
.bar-segment.health { background: rgba(0, 200, 83, 0.9); }
.bar-segment.armor { background: rgba(255, 193, 7, 0.9); }
.bar-segment.ra { background: rgba(255, 50, 50, 0.9); }
.bar-segment.ya { background: rgba(255, 200, 0, 0.9); }
.bar-segment.ga { background: rgba(0, 180, 0, 0.6); }
.bar-segment.frags { background: rgba(255, 100, 100, 0.9); }

/* Gridlines for diverging charts */
.detail-graph-container::before,
.health-armor-graph-diverging::before,
.score-timeline-graph::before {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 25%;
    height: 1px;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
    box-shadow: 0 0 0 0 transparent,
                0 calc(50% - 25%) 0 0 rgba(255, 255, 255, 0.04);
}

/* Detail Row Layout */
.timeline-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .timeline-detail-row {
        grid-template-columns: 1fr;
    }
}

/* Messages Panel */

/* Detail Graph Panel */
.timeline-detail-graph-panel {
    min-height: 250px;
}

.detail-graph-container {
    height: 200px;
    background: #16213e;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 1px;
    position: relative;
}

.detail-graph-container::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 2px;
    background: rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* Powerup Lines Container */
.powerup-lines-container {
    position: relative;
    height: 24px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.powerup-line {
    position: absolute;
    height: 6px;
    border-radius: 2px;
    opacity: 0.9;
}

.powerup-line.quad { background: rgba(0, 150, 255, 0.9); top: 2px; }
.powerup-line.pent { background: rgba(255, 0, 0, 0.9); top: 9px; }
.powerup-line.ring { background: rgba(255, 235, 59, 0.9); top: 16px; }

/* Region Control Timeline */
.region-timeline-wrapper {
    display: flex;
    gap: 0;
}

.region-timeline-labels {
    display: flex;
    flex-direction: column;
    min-width: 80px;
}

.region-timeline-label {
    font-size: 0.75rem;
    color: #aaa;
    text-align: right;
    padding-right: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.region-timeline-outer {
    flex: 1;
    position: relative;
}

#region-time-indicator {
    bottom: 0;
}

/* Diverging Health/Armor Graph */
.health-armor-graph-diverging {
    height: 200px;
    background: #16213e;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 1px;
    position: relative;
}

.health-armor-graph-diverging::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 2px;
    background: rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* Score Timeline Graph */
.score-timeline-graph {
    height: 200px;
    background: #16213e;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

.score-timeline-graph::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 2px;
    background: rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.score-bar {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.score-bar-fill {
    position: absolute;
    left: 0;
    right: 0;
    /* background-color set inline by updateScoreTimeline from TEAM_COLORS */
}

.score-bar-fill.positive {
    bottom: 50%; /* grows up from the zero line */
}

.score-bar-fill.negative {
    top: 50%;    /* grows down from the zero line */
}

#time-range-label {
    font-size: 0.85rem;
    color: #888;
    font-weight: normal;
}

/* Accuracy Table */
#accuracy-table td.accuracy-high {
    color: #00c853;
}

#accuracy-table td.accuracy-medium {
    color: #ffc107;
}

#accuracy-table td.accuracy-low {
    color: #ff5252;
}

.acc-detail {
    color: #888;
    font-size: 0.8rem;
    margin-left: 4px;
}

/* Weapon cells in stats table */
.weapon-kills {
    color: #ff6b6b;
    margin-left: 4px;
}

.weapon-dmg {
    color: #888;
    font-size: 0.85rem;
    margin-left: 4px;
}

/* Weapon stats split table */
.weapon-stats-split {
    font-size: 0.82rem;
}

.weapon-stats-split th[colspan="3"] {
    text-align: center;
    border-bottom: none;
}

/* Separator between weapon groups - data rows (col 1 is name) */
.weapon-stats-split tbody td:nth-child(3n+5) {
    border-left: 1px solid #333;
}

/* Separator between weapon groups - sub-header row (no name col due to rowspan) */
.weapon-stats-split thead tr:last-child th:nth-child(3n+4) {
    border-left: 1px solid #333;
}

/* Separator between weapon groups - top header row */
.weapon-stats-split thead tr:first-child th[colspan="3"] ~ th[colspan="3"] {
    border-left: 1px solid #333;
}

/* Stats tables */
.stats-table {
    font-size: 0.9rem;
}

.stats-table th {
    white-space: nowrap;
}

.stats-table td {
    white-space: nowrap;
}

/* Sortable table headers. The sort indicator is rendered as inline text
   rather than an absolutely-positioned pseudo-element so it contributes
   to the header's natural width. Without the asymmetric padding trick the
   previous version used, header and body cells share the same padding and
   their columns stay aligned in auto-layout tables. */
th.sortable {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover {
    color: var(--accent-cyan);
}

th.sortable::after {
    content: ' ⇅';
    opacity: 0.3;
    font-size: 0.7em;
    margin-left: 2px;
}

th.sortable.sort-asc::after {
    content: ' ▲';
    opacity: 0.8;
    color: var(--accent-cyan);
}

th.sortable.sort-desc::after {
    content: ' ▼';
    opacity: 0.8;
    color: var(--accent-cyan);
}

/* Hub viewer [w] link */
.hub-watch-link {
    color: #7a8ba8;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.6;
    transition: opacity 0.15s;
    cursor: pointer;
}

.hub-watch-link:hover {
    opacity: 1;
    color: var(--accent-cyan);
}

/* Timeline playback controls */
.timeline-playback-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}

.timeline-playback-controls button {
    background: none;
    border: 1px solid rgba(0, 217, 255, 0.3);
    color: #7a8ba8;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 9px;
    border-radius: 3px;
    height: 24px;
    line-height: 22px;
    transition: all 0.15s;
}

.timeline-playback-controls button:hover {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

.timeline-playback-controls button.active {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    background: rgba(0, 217, 255, 0.15);
}

/* Map legend table */
.map-legend-health,
.map-legend-armor,
.map-legend-wpn {
    text-align: right;
}

.map-player-trail-cb {
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.map-trail-cell {
    padding: 2px 2px !important;
    width: 18px;
    text-align: center;
}

/* Accuracy Graphs */
.accuracy-graphs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.player-graph {
    background: #16213e;
    border-radius: 8px;
    padding: 15px;
}

.player-graph h4 {
    color: var(--accent-cyan);
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.graph-container {
    height: 150px;
    position: relative;
    background: var(--bg-deep);
    border-radius: 4px;
    padding: 10px;
}

.graph-bars {
    display: flex;
    align-items: flex-end;
    height: 100%;
    gap: 2px;
}

.graph-bar {
    flex: 1;
    background: linear-gradient(to top, var(--accent-cyan), var(--accent-cyan-dim));
    border-radius: 2px 2px 0 0;
    min-width: 8px;
    position: relative;
}

.graph-bar:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #16213e;
    color: #eee;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 10;
}

.graph-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 0.75rem;
    color: #888;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-panel);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a4f6f;
}

/* Quake high-bit "gold/brown" characters (128-255)
   Based on ezQuake font_gradient_alternate colors:
   Top: rgb(175, 120, 52) -> Bottom: rgb(75, 52, 22)
   Using the top/brighter color for better visibility */
.quake-gold {
    color: #af7834;
}

/* Key Moments Tab */
.empty-message {
    color: #888;
    text-align: center;
    padding: 40px;
    font-style: italic;
}

.time-cell {
    font-family: monospace;
    color: #888;
}

.time-link {
    cursor: pointer;
    color: var(--accent-cyan);
}

.time-link:hover {
    text-decoration: underline;
}

.powerup-cell {
    font-weight: bold;
}

.powerup-cell.quad { color: #0096ff; }
.powerup-cell.pent { color: #ff5050; }
.powerup-cell.ring { color: #ffeb3b; }

.viewer-link {
    color: var(--accent-cyan);
    text-decoration: none;
    padding: 5px 14px;
    border: 1px solid rgba(0, 217, 255, 0.4);
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.viewer-link:hover {
    background: var(--accent-cyan);
    color: var(--bg-deep);
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
}

.keymoments-grid.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.packdrops-filters {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    font-size: 0.9rem;
}
.packdrops-filters label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.packdrops-filters select {
    background: var(--bg-deep);
    color: #ccc;
    border: 1px solid #666;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
}
.packdrops-filters select option {
    background: var(--bg-deep);
    color: #ccc;
}
.packdrops-count {
    margin-left: auto;
    color: #888;
    font-variant-numeric: tabular-nums;
}

.pack-status {
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.82rem;
    margin-right: 4px;
}
.pack-status.status-xfer     { color: #7fff7f; background: rgba(0, 180, 0, 0.15); }
.pack-status.status-xfer-had { color: #bfe5bf; background: rgba(0, 180, 0, 0.08); }
.pack-status.status-enemy    { color: #ff8080; background: rgba(255, 50, 50, 0.15); }
.pack-status.status-enemy-had { color: #e5bfbf; background: rgba(255, 50, 50, 0.08); }
.pack-status.status-expired  { color: #888; background: rgba(128, 128, 128, 0.12); }

/* ── Pickups tab ── */
.pickups-toolbar {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
    font-size: 0.9rem;
}
.pickups-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pickups-toolbar select {
    background: var(--bg-deep);
    color: #ccc;
    border: 1px solid #666;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
}
.pickups-toolbar select option {
    background: var(--bg-deep);
    color: #ccc;
}
.pickups-table-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
/* Pickups tables inherit .stats-table look from the summary page; the only
   addition is a sticky-left first column so the player/team label stays in
   view while the per-entity columns scroll horizontally. */
.pickups-table th:first-child,
.pickups-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}
.pickups-table tbody td:first-child {
    background: var(--bg-deep);
    /* Team color strip — same 3px team-coloured edge that the summary
       scoreboard renders via border-left on <tr>. We put it on the
       sticky-left cell so it stays in view while the per-entity columns
       scroll horizontally. The CSS variable is set per-row in JS. */
    border-left: 3px solid var(--row-team-color, transparent);
}
.pickups-table thead th:first-child {
    /* sit above the sticky-top header siblings and the body sticky-left */
    z-index: 6;
}
.pickups-loc {
    color: #888;
    font-size: 0.78rem;
    font-weight: normal;
}
.pickups-team-tag {
    color: #777;
    font-size: 0.78rem;
    margin-left: 4px;
}
.pickups-verify-header {
    color: #aaa;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 4px;
}
.pickups-verify-bad {
    color: #ff8080;
    background: rgba(255, 60, 60, 0.10);
}
.pickups-verify-bad .pickups-verify-mark {
    color: #ff5050;
    font-size: 0.8rem;
    margin-left: 4px;
}
.pickups-table .muted {
    color: #555;
}

.weapon-cell.weapon-rl { color: #ff7040; font-weight: bold; }
.weapon-cell.weapon-lg { color: #70c0ff; font-weight: bold; }

.kills-cell { text-align: right; font-variant-numeric: tabular-nums; }
.kills-redundant { color: #888; }

@media (max-width: 1200px) {
    .keymoments-grid {
        grid-template-columns: 1fr;
    }
}

#keymoments-table th:first-child,
#keymoments-table td:first-child {
    width: 80px;
}

#keymoments-table th:last-child,
#keymoments-table td:last-child {
    width: 100px;
    text-align: center;
}

/* Map View Styles */
.map-panel {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Fullscreen layout: the whole .map-panel becomes the fullscreen element.
   Top bar stays at top, .map-main-content grows to fill remaining height,
   canvas grows to fill the available width (minus sidebar), sidebar keeps
   its max-width. The region-control table below the canvas is hidden in
   fullscreen to free vertical space. */
.map-panel--fullscreen {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 10px;
    background: var(--bg-deep);
    overflow: hidden;
}

.map-panel--fullscreen .map-main-content {
    flex: 1 1 auto;
    min-height: 0;
}

.map-panel--fullscreen .map-canvas-container {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
}

.map-panel--fullscreen #map-canvas {
    width: 100%;
    height: 100%;
}

/* Sidebar needs to fit the items panel (218 px) + region-status side by
 * side, so its min-width has to be wide enough that region-status gets
 * a usable column. The map shrinks to give it that room; on larger
 * screens the sidebar still tops out at max-width and the rest goes to
 * the canvas. */
.map-panel--fullscreen .map-sidebar {
    max-height: 100%;
    overflow-y: auto;
    min-width: 500px;
    max-width: 780px;
}

.map-panel--fullscreen #region-control-panel {
    display: none !important;
}

/* Relocated unified timeline: pin to the bottom of the fullscreen map panel,
   shrunk to one row of controls so it never eats canvas space. */
.map-panel--fullscreen #unified-timeline {
    margin: 0;
    padding: 6px 10px;
    flex: 0 0 auto;
}

.locgraph-panel {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.locgraph-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.locgraph-controls label {
    color: #888;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.locgraph-controls select {
    background: var(--bg-deep);
    border: 1px solid #666;
    color: #ccc;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
}

.locgraph-controls select:hover,
.locgraph-controls select:focus {
    border-color: var(--accent-cyan);
    outline: none;
}

.locgraph-canvas-container {
    position: relative;
    width: 100%;
}

#locgraph-canvas {
    background: #0a0a15;
    border: 1px solid rgba(0, 217, 255, 0.15);
    border-radius: 6px;
    display: block;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 700px;
}

.locgraph-btn {
    background: transparent;
    border: 1px solid #666;
    color: #888;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.locgraph-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.locgraph-tooltip,
.canvas-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(10, 10, 21, 0.95);
    border: 1px solid rgba(0, 217, 255, 0.3);
    border-radius: 4px;
    padding: 8px 10px;
    color: #e0e0e0;
    font-size: 0.85rem;
    white-space: pre;
    z-index: 100;
    max-width: 280px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Drop-dot tooltip uses normal whitespace so multi-line content stacks
   instead of forming a single long line. */
.canvas-tooltip {
    white-space: normal;
}

.map-track-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.map-track-sep {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: #3a3a55;
    margin: 0 4px;
}

/* Trails → Players dropdown: uses <details> so it toggles natively, no JS
   needed to show/hide the panel itself. */
.map-trails-dropdown {
    position: relative;
}

.map-trails-dropdown > summary {
    list-style: none;
    cursor: pointer;
    background: transparent;
    border: 1px solid #666;
    color: #888;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    user-select: none;
    transition: all 0.2s;
}

.map-trails-dropdown > summary::-webkit-details-marker { display: none; }

.map-trails-dropdown > summary:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.map-trails-dropdown[open] > summary {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.map-trails-dropdown > summary::after {
    content: ' ▾';
    font-size: 0.75rem;
    opacity: 0.8;
}

.map-trails-players-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #16213e;
    border: 1px solid rgba(0, 217, 255, 0.3);
    border-radius: 6px;
    padding: 8px 10px;
    min-width: 180px;
    max-height: 360px;
    overflow-y: auto;
    z-index: 30;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.map-trails-players-panel label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #d0d0e0;
    cursor: pointer;
    padding: 2px 0;
}

.map-trails-players-panel input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.map-trails-players-panel .map-trails-player-name {
    font-weight: 600;
}

.map-trail-label {
    color: #888;
    font-size: 0.9rem;
}

.map-track-controls button {
    background: transparent;
    border: 1px solid #666;
    color: #888;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.map-track-controls button:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.map-trail-select {
    background: var(--bg-deep);
    border: 1px solid #666;
    color: #ccc;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
}

.map-trail-select:hover,
.map-trail-select:focus {
    border-color: var(--accent-cyan);
    outline: none;
}

.map-player-trail-cb {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.map-main-content {
    display: flex;
    gap: 20px;
}

.map-canvas-container {
    position: relative;
    flex-shrink: 0;
}

#map-canvas {
    background: #0a0a15;
    border: 1px solid rgba(0, 217, 255, 0.15);
    border-radius: 6px;
    display: block;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.map-no-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

.map-no-data p:first-child {
    color: #888;
    margin-bottom: 5px;
}

.map-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 320px;
    max-width: 720px;
}

/* Players panel sits alone (full sidebar width); below it, Items and
 * Region Status share a flex row so their combined width matches the
 * Players panel above. */
.map-sidebar-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.map-legend {
    background: #16213e;
    border-radius: 8px;
    padding: 15px;
}

/* The Stack column merges health and armor: H rendered white, then armor
 * "120 RA" using the existing .armor-{ra,ya,ga} colour classes. */
.team-status-table .stack-h {
    color: #ffffff;
}

#region-status-panel {
    background: #16213e;
    border-radius: 8px;
    padding: 15px;
    flex: 1 1 auto;
    min-width: 0;
}

#region-status-panel h4 {
    color: var(--accent-cyan);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

/* Items panel — narrow column to the right of the player table. Three
 * columns only: swatch, loc, status. The item name is conveyed by the
 * swatch's colour and inline label (RL/LG/MH/Q/P/...) so we drop the
 * dedicated name column to keep the panel narrow. */
.map-items-panel {
    background: #16213e;
    border-radius: 8px;
    padding: 12px;
    flex: 0 0 auto;
    width: 218px;
    min-width: 195px;
}

.map-items-panel h4 {
    color: var(--accent-cyan);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.map-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.map-items-table td {
    padding: 2px 6px;
    vertical-align: middle;
    color: #d0d0e0;
}

.map-items-table tr.taken {
    opacity: 0.55;
}

.map-items-table .item-swatch {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    vertical-align: middle;
    font-size: 9px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.5px;
    line-height: 1;
}

.map-items-table .item-swatch-cell {
    width: 22px;
    padding-right: 4px;
}

.map-items-table .item-loc {
    color: #c3c3d6;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.map-items-table .item-status {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.map-items-table .item-status.up {
    color: #4ade80;
}

.map-items-table .item-status.respawn {
    color: #fbbf24;
}

.map-items-table .item-status.pending {
    color: #60a5fa; /* MH waiting for rot to finish */
}

.region-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid var(--bg-deep);
    font-size: 0.85rem;
}

.region-status-name {
    font-weight: bold;
    min-width: 60px;
    color: #ccc;
}

.region-status-state {
    min-width: 70px;
    font-size: 0.8rem;
}

.region-status-players {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.region-player-icon {
    width: 40px;
    height: 40px;
    cursor: default;
}

#region-control-panel {
    background: #16213e;
    border-radius: 8px;
    padding: 15px;
}

#region-control-panel h4 {
    color: var(--accent-cyan);
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.region-config {
    margin-bottom: 12px;
}

.region-config-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.region-name-input {
    width: 110px;
    background: var(--bg-deep);
    border: 1px solid #333;
    color: #ccc;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    font-family: inherit;
}

.region-locs-input {
    flex: 1;
    background: var(--bg-deep);
    border: 1px solid #333;
    color: #ccc;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: monospace;
}

.region-name-input:focus,
.region-locs-input:focus {
    border-color: var(--accent-cyan);
    outline: none;
}

.region-remove-btn {
    background: transparent;
    border: 1px solid #444;
    color: #aaa;
    width: 24px;
    height: 24px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
}

.region-remove-btn:hover {
    background: #3a1f1f;
    border-color: #a44;
    color: #fff;
}

.region-config-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.region-config-actions button {
    background: var(--bg-deep);
    border: 1px solid #333;
    color: #ccc;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.region-config-actions button:hover {
    border-color: var(--accent-cyan);
    color: #fff;
}

.region-control-table {
    font-size: 0.8rem;
}

.region-control-table td {
    text-align: center;
}

.map-legend h4 {
    color: var(--accent-cyan);
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.map-legend-team {
    margin-bottom: 10px;
}

.map-legend-team-name {
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.map-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 0.85rem;
    color: #ccc;
}

.map-legend-symbol {
    font-family: monospace;
    font-size: 1.3rem;
    font-weight: bold;
    width: 20px;
    text-align: center;
}

.map-powerup-list {
    background: #16213e;
    border-radius: 8px;
    padding: 15px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.map-powerup-list h4 {
    color: var(--accent-cyan);
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.map-powerup-list ul {
    list-style: none;
    overflow-y: auto;
    flex: 1;
}

.map-powerup-list li {
    display: flex;
    gap: 10px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--bg-panel);
    transition: background 0.2s;
}

.map-powerup-list li:hover {
    background: rgba(0, 217, 255, 0.1);
}

.map-powerup-list li:last-child {
    border-bottom: none;
}

.map-powerup-list .time-cell {
    min-width: 50px;
}

/* Player team colors for map */
.player-red {
    color: var(--team-a);
}

.player-blue {
    color: var(--team-b);
}

@media (max-width: 900px) {
    .map-main-content {
        flex-direction: column;
    }

    .map-sidebar {
        max-width: none;
        flex-direction: row;
    }

    .map-legend,
    .map-powerup-list {
        flex: 1;
    }
}