/*
 * BW Replay Viewer — bridge styles.
 *
 * The BW page (#page-bw-replay) reuses replay.css class names (.replay-topbar,
 * .replay-canvas-container, .replay-sidebar, .rs-tab, .rs-pane, .replay-transport,
 * etc.) so it inherits the SC2 visual language. This file only adds:
 *   1) The dashboard (upload widget + cached-replay grid) styles.
 *   2) Build / Tech / Battle / Economy pane styles inside the BW sidebar.
 *   3) Minimap canvas sizing + topbar thumb tweaks specific to BW.
 */

/* ============================================================ Dashboard */

#page-bw-replay {
    display: none;
}

#page-bw-replay.active {
    display: block;
    padding: 0 !important;
}

#page-bw-replay #bw-replay-viewer {
    background: #05070c;
}

#page-bw-replay #bw-replay-canvas-container {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

#page-bw-replay #bw-replay-dashboard {
    display: block;
    padding: 24px 20px 60px;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

.bw-dashboard-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: #e6e9ef;
}

/* Hero / upload card */
.bw-dashboard-hero {
    background: linear-gradient(135deg, rgba(78, 201, 255, 0.06), rgba(196, 78, 201, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 22px 26px;
}
.bw-dashboard-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 20px;
    align-items: stretch;
}
.bw-dashboard-hero-main {
    min-width: 0;
}
.bw-dashboard-title {
    margin: 0 0 4px;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.bw-dashboard-subtitle {
    margin: 0 0 14px;
    color: #98a3b3;
    font-size: 13px;
}
.bw-dashboard-upload {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px dashed rgba(0, 212, 255, 0.35);
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.bw-dashboard-upload.is-dragover {
    border-color: var(--primary-color, #00d4ff);
    background: rgba(0, 212, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.15);
}
.bw-dashboard-upload-icon {
    font-size: 28px;
    line-height: 1;
    color: var(--primary-color, #00d4ff);
    flex-shrink: 0;
}
.bw-dashboard-upload-body {
    flex: 1;
    min-width: 0;
}
.bw-dashboard-upload-title {
    font-weight: 600;
    font-size: 14px;
    color: #e6e9ef;
}
.bw-dashboard-upload-hint {
    color: #98a3b3;
    font-size: 12px;
    margin-top: 2px;
}
.bw-dashboard-upload-hint code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 3px;
    color: #cbd5e1;
}
.bw-dashboard-upload-btn {
    background: rgba(0, 212, 255, 0.16);
    color: var(--primary-color, #00d4ff);
    border: 1px solid var(--primary-color, #00d4ff);
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
    transition: background 0.15s;
}
.bw-dashboard-upload-btn:hover {
    background: rgba(0, 212, 255, 0.28);
}

.bw-dashboard-player-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    background: rgba(7, 10, 20, 0.5);
    border: 1px solid rgba(126, 155, 190, 0.16);
    border-radius: 8px;
}
.bw-dashboard-player-rail-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
}
.bw-dashboard-player-eyebrow {
    color: #e6e9ef;
    font: 700 12px 'Rajdhani', system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.bw-dashboard-player-copy,
.bw-dashboard-player-loading {
    color: #7c8798;
    font: 500 11px 'JetBrains Mono', ui-monospace, monospace;
}
.bw-dashboard-player-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-content: flex-start;
}
.bw-player-chip {
    display: inline-grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 28px;
    padding: 0 8px;
    border: 1px solid rgba(126, 155, 190, 0.22);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #d8dde6;
    cursor: pointer;
    font: 700 11px 'Rajdhani', system-ui, sans-serif;
}
.bw-player-chip:hover {
    border-color: rgba(86, 194, 255, 0.64);
    background: rgba(86, 194, 255, 0.1);
}
.bw-player-chip-race {
    font: 800 12px 'JetBrains Mono', ui-monospace, monospace;
}
.bw-player-chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-player-chip-rating {
    color: #8ea0b8;
    font: 600 10px 'JetBrains Mono', ui-monospace, monospace;
}

.bw-dashboard-error {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 80, 80, 0.12);
    color: #ff8f8f;
    border: 1px solid rgba(255, 80, 80, 0.4);
    border-radius: 6px;
    font-size: 12px;
}

/* Cached replays section */
.bw-dashboard-section {
    background: rgba(8, 12, 24, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 18px 20px 22px;
}
.bw-dashboard-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}
.bw-dashboard-section-title {
    margin: 0;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e6e9ef;
}
.bw-dashboard-count {
    color: #6e7687;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.bw-dashboard-filters {
    display: grid;
    grid-template-columns: minmax(160px, 1.2fr) minmax(96px, 0.55fr) minmax(96px, 0.55fr) minmax(130px, 0.7fr) minmax(190px, 1fr) auto auto;
    gap: 10px;
    align-items: end;
    margin: 0 0 14px;
}
.bw-dashboard-filter {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.bw-dashboard-filter span {
    color: #8792a5;
    font-size: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.bw-dashboard-filter select,
.bw-dashboard-filter input {
    width: 100%;
    height: 32px;
    min-width: 0;
    border: 1px solid rgba(126, 155, 190, 0.28);
    border-radius: 6px;
    background: rgba(7, 10, 20, 0.92);
    color: #e6e9ef;
    font: 600 12px 'JetBrains Mono', ui-monospace, monospace;
    padding: 0 9px;
}
.bw-dashboard-filter input::placeholder {
    color: #556071;
}
.bw-dashboard-filter-clear {
    height: 32px;
    border: 1px solid rgba(126, 155, 190, 0.28);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font: 700 11px 'Rajdhani', system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.bw-dashboard-index-status {
    color: #6e7687;
    font: 500 11px 'JetBrains Mono', ui-monospace, monospace;
    white-space: nowrap;
    padding-bottom: 8px;
}

.bw-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.bw-dashboard-loading,
.bw-dashboard-empty,
.bw-dashboard-error-row {
    grid-column: 1 / -1;
    padding: 24px 12px;
    color: #6e7687;
    font-size: 13px;
    font-style: italic;
    text-align: center;
}
.bw-dashboard-error-row {
    color: #ff8f8f;
    font-style: normal;
}

/* Replay card */
.bw-replay-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.bw-replay-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 212, 255, 0.5);
    background: rgba(0, 212, 255, 0.05);
}
.bw-replay-card-thumb {
    position: relative;
    height: 110px;
    background: #0a0a14 center/cover no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 8px 10px;
}
.bw-replay-card-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.6));
    pointer-events: none;
}
.bw-replay-card-matchup,
.bw-replay-card-duration {
    position: relative;
    z-index: 1;
    background: rgba(8, 12, 24, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: #e6e9ef;
    letter-spacing: 0.04em;
}
.bw-replay-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 12px;
}
.bw-replay-card-map {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #e6e9ef;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-replay-card-players {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bw-replay-card-player {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: #cbd5e1;
    border-left: 2px solid var(--p-color, transparent);
    padding-left: 6px;
}
.bw-replay-card-player.is-win .bw-replay-card-name {
    color: #f4d35e;
    font-weight: 600;
}
.bw-replay-card-player.is-loss { opacity: 0.65; }
.bw-replay-card-race {
    font-weight: 700;
    font-size: 13px;
    text-align: center;
}
.bw-replay-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bw-replay-card-apm {
    color: #98a3b3;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
}
.bw-replay-card-meta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    color: #98a3b3;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
}
.bw-replay-card-mtime {
    color: #6e7687;
    font-size: 11px;
    margin-top: 2px;
}

@media (max-width: 760px) {
    .bw-dashboard-hero-grid {
        grid-template-columns: 1fr;
    }
    .bw-dashboard-filters {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .bw-dashboard-index-status {
        padding-bottom: 0;
    }
}

.bw-dashboard-load-more-row {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
.bw-dashboard-load-more {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.bw-dashboard-load-more:hover { background: rgba(255, 255, 255, 0.12); }
.bw-dashboard-load-more:disabled { opacity: 0.5; cursor: default; }

/* ============================================================ Topbar tweaks */

#page-bw-replay .replay-topbar-thumb {
    width: 46px;
    height: 38px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    background:
        radial-gradient(circle at 30% 25%, rgba(88, 211, 107, 0.28), transparent 32%),
        radial-gradient(circle at 70% 70%, rgba(86, 194, 255, 0.24), transparent 30%),
        #0b1118;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

#page-bw-replay .replay-topbar {
    min-height: 58px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

#page-bw-replay .replay-topbar-info {
    min-width: 0;
}

#page-bw-replay .replay-topbar-matchup {
    display: block;
    min-width: 0;
    max-width: min(520px, 38vw);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-style: italic;
}

#page-bw-replay .replay-topbar-home {
    min-width: 72px;
    justify-content: center;
    text-transform: uppercase;
}

#page-bw-replay .replay-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* BW topbar action buttons reuse SC2's .replay-toggle-btn styling
   (replay.css L791+) — no per-button styling needed here. The .copied
   state on the Share button still wants the BW green tint. */
#page-bw-replay #bw-replay-share-btn.copied {
    border-color: rgba(88, 211, 107, 0.8);
    background: rgba(88, 211, 107, 0.14);
    color: #8ff0a1;
}

#page-bw-replay .replay-topbar-stats .rts-vs {
    color: #44485a;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 4px;
}

#page-bw-replay .rts-win {
    color: #f4d35e;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    background: rgba(244, 211, 94, 0.15);
    border: 1px solid rgba(244, 211, 94, 0.4);
    padding: 1px 6px;
    border-radius: 3px;
}
#page-bw-replay .rts-loss {
    color: #888;
    font-size: 11px;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 3px;
}

/* ============================================================ Canvas + minimap */

#bw-replay-minimap-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    background: #0a0a14;
    border: 0;
    border-radius: 0;
    image-rendering: auto;
    box-shadow: none;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

#page-bw-replay .canvas-wrapper {
    display: block;
    width: 100%;
    height: 100%;
}

/* ============================================================ Analyst overlay positioning
   The SC2 .replay-viewer.variant-analyst rules in replay.css set the rails
   to position:absolute inside the .canvas-wrapper, but we hit a specificity
   / cascade issue on BW (rails were appearing at x≈-80px, clipped at the
   viewport edge). Pin the wrapper as a positioning context and define each
   overlay's geometry explicitly here so the rails, transport bar, and
   dock all sit inside the canvas-wrapper as intended. */
#page-bw-replay #bw-replay-canvas-container .canvas-wrapper {
    position: relative !important;
    overflow: hidden;
}

/* Side rails — absolute overlays pinned to the inside of the wrapper.
   top clears the broadcast scoreboard (8px offset + ~58px bar + gap);
   bottom clears the analyst dock (12px offset + ~103px panel + wrap
   headroom for the control bar at narrower widths + gap). */
#page-bw-replay .replay-analyst-rail {
    position: absolute;
    top: 76px;
    bottom: 156px;
    width: 340px;
    pointer-events: auto;
    z-index: 3;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;           /* let inner sections set their own padding */
    background: transparent;
    box-sizing: border-box;
    /* No max-height: the top/bottom anchors already define the height,
       and adding max-height here was capping the rail to a fraction of
       its available space, leaving big black gaps below the panels. */
}

#page-bw-replay .bw-rails-hidden .replay-analyst-rail {
    display: none;
}

/* The SC2 Analyst variant rebuilt its Live Stats panel as horizontal
   GameHeart-style bars and removed the legacy `.analyst-stats-*`
   vertical-row styles. BW still uses the old vertical layout, so we
   restore the base layout properties here scoped to #page-bw-replay.
   Typography + per-row colors come from the BW-specific overrides
   below (`.analyst-stat-row`, `.stat-cell`, `.stat-num`, etc.). */
#page-bw-replay .analyst-stats-head {
    display: grid;
    grid-template-columns: 64px 1fr 1fr;
    padding: 8px 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    align-items: center;
}
#page-bw-replay .analyst-stats-head-name {
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-align: left;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#page-bw-replay .analyst-stats-head > .analyst-stats-head-name + .analyst-stats-head-name {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

#page-bw-replay .analyst-stats-row {
    display: grid;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    align-items: center;
}
#page-bw-replay .analyst-stats-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
}
#page-bw-replay .analyst-stats-label {
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #aab3c2;
}
#page-bw-replay .analyst-stats-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}

/* The shared SC2 .analyst-stats-row had 64px label column + 8px gap +
   12px padding which overflowed the 280px BW rail. Tighten to fit.
   Same idea for the prod section so two-column production rows don't
   overflow. */
#page-bw-replay .analyst-livestats-section,
#page-bw-replay .analyst-prod-section {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

#page-bw-replay .analyst-stats-row,
#page-bw-replay .analyst-stat-row {
    grid-template-columns: 74px minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 6px !important;
    padding: 6px 8px !important;
    box-sizing: border-box;
}

#page-bw-replay .analyst-stats-row .stat-label,
#page-bw-replay .analyst-stat-row .stat-label {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 9px;
    letter-spacing: 0.06em;
}

#page-bw-replay .analyst-stats-cell,
#page-bw-replay .stat-cell {
    min-width: 0;          /* allow shrinking inside the 1fr track */
    overflow: hidden;
}

#page-bw-replay .stat-num,
#page-bw-replay .analyst-stats-value {
    min-width: 28px;
    font-size: 12px;
}

#page-bw-replay .stat-sparkline {
    width: 56px;
    flex-shrink: 1;
}

/* The legacy static .replay-canvas-controls strip stays hidden in analyst
   mode (SC2's `display:none !important` in replay.css applies). BW's
   analyst layout now renders an SC2-style bottom dock; the strip survives
   in the DOM only as the off-screen home for controls the dock adopts
   (audio mixer, action toggles, zoom/screenshot) and the hidden originals
   the keyboard shortcuts still drive (play button, slider). */

/* ============================================================ Broadcast scoreboard — BW tweaks
   The scoreboard itself (gradient bar, identity, chips, upgrades strip,
   clock) is SC2's .analyst-scoreboard family from replay.css. These rules
   only adapt the BW-specific icon assets: the worker/supply chips use BW
   unit portraits (square framed JPGs, unlike SC2's transparent PNGs) so
   they get a slight rounding + the army swords SVG gets its tint. */
#page-bw-replay .scoreboard-chip-icon-sprite {
    border-radius: 4px;
}
/* Zoom-crop the BW worker/supply portraits (wide in-game screenshots, tiny
   subject) — the chip label slot clips the spill. SC2's minerals/gas GIFs
   are real closeup icons and keep their natural fit. */
#page-bw-replay .scoreboard-chip-label {
    overflow: hidden;
    border-radius: 6px;
}
#page-bw-replay .scoreboard-chip-icon-sprite[src*="bw-icons"] {
    object-fit: cover;
    transform: scale(1.7);
}
/* BW carries 6 chips per side (SC2 has 5 — army value is the extra), so
   the bar overflows sub-1600px viewports at SC2's 30px icon size. Squeeze
   icons + values one step down until the wide-desktop budget exists.
   (SC2's own ≤860px shrink still applies below this.) */
@media (max-width: 1600px) {
    #page-bw-replay .scoreboard-chip {
        padding: 4px 6px;
        gap: 4px;
    }
    #page-bw-replay .scoreboard-chip-label,
    #page-bw-replay .scoreboard-chip-icon {
        width: 22px;
        height: 22px;
    }
    #page-bw-replay .scoreboard-chip-icon-sprite,
    #page-bw-replay .scoreboard-chip-icon-svg svg {
        width: 22px;
        height: 22px;
    }
    #page-bw-replay .scoreboard-chip-value {
        font-size: 16px;
        min-width: 26px;
    }
    #page-bw-replay .scoreboard-name {
        font-size: 16px;
        max-width: 120px;
    }
}
#page-bw-replay .scoreboard-chip-icon-svg.metric-army { color: #cbd5e1; }
#page-bw-replay .scoreboard-chip-icon-svg.metric-lost { color: #f87171; }
/* No .scoreboard-upgrade-chip rules: BW omits the scoreboard research
   strips entirely (most BW research lacks shipped icon art, so the strip
   degraded to letter-fallback noise at the bar's edges). */

/* ============================================================ Graph modal
   Pop-over time-series graph for a GameHeart metric. Mirrors the SC2 viewer's
   openMetricModal but renders inline SVG (no chart lib). The modal is
   mounted INSIDE the canvas-wrapper so it's clipped to the BW viewer area
   and floats over the canvas. */
#page-bw-replay .bw-graph-modal {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
#page-bw-replay .bw-graph-modal[hidden] {
    display: none;
}
#page-bw-replay .bw-graph-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 12, 0.55);
    backdrop-filter: blur(2px);
}
#page-bw-replay .bw-graph-modal-card {
    position: relative;
    width: min(680px, 90%);
    background: rgba(12, 16, 24, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
    color: #e6e9ef;
    font-family: 'Rajdhani', system-ui, sans-serif;
    overflow: hidden;
}
#page-bw-replay .bw-graph-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}
#page-bw-replay .bw-graph-modal-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
}
#page-bw-replay .bw-graph-modal-close {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    color: #d8dde6;
    cursor: pointer;
    width: 26px;
    height: 24px;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}
#page-bw-replay .bw-graph-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.32);
}
#page-bw-replay .bw-graph-modal-svg {
    display: block;
    width: 100%;
    height: 280px;
    background: rgba(255, 255, 255, 0.015);
}
#page-bw-replay .bw-graph-modal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 10px 14px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
}
#page-bw-replay .bw-graph-modal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#page-bw-replay .bw-graph-modal-legend-item .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
}
#page-bw-replay .bw-graph-modal-legend-item .name {
    font-weight: 700;
    letter-spacing: 0.02em;
}
#page-bw-replay .bw-graph-modal-legend-item .val {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    font-weight: 700;
}
#page-bw-replay .bw-graph-modal-legend-item.p0 .name { color: var(--p0-color, #f88c14); }
#page-bw-replay .bw-graph-modal-legend-item.p1 .name { color: var(--p1-color, #4ec9ff); }

/* ============================================================ Build-order header buttons
   Mini-pill toggles inside the right rail's FloatCard actions slot. Style
   borrowed from SC2's .analyst-right-toggle.analyst-right-mini family. */
#page-bw-replay .replay-analyst-rail-right .analyst-right-toggle.analyst-right-mini {
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(124, 139, 156, 0.34);
    color: #d8dde6;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
#page-bw-replay .replay-analyst-rail-right .analyst-right-toggle.analyst-right-mini:hover,
#page-bw-replay .replay-analyst-rail-right .analyst-right-toggle.analyst-right-mini.active {
    color: #ffffff;
    border-color: rgba(86, 194, 255, 0.74);
    background: rgba(86, 194, 255, 0.12);
}
/* ============================================================ Build Order card — transparent overlay
   Mirror SC2's analyst-mode treatment (.analyst-card-build-order strips
   the FloatCard chrome): the right-rail Build Order floats directly over
   the canvas with no panel box. The per-row hover/active tints + icon
   drop-shadows carry the contrast; the header keeps its pills but loses
   the hairline body divider. */
#page-bw-replay .replay-analyst-rail-right .replay-float-card,
#page-bw-replay .replay-analyst-rail-right .replay-float-card.expanded {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    overflow: visible;
}
#page-bw-replay .replay-analyst-rail-right .replay-float-card-body {
    border-top: none;
}
/* Title + names need their own legibility once the backdrop is gone. */
#page-bw-replay .replay-analyst-rail-right .replay-float-card-title {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.5);
}
#page-bw-replay .bo-clean-name {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.45);
}
#page-bw-replay .bo-clean-meta {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* ============================================================ Center-spine build order (bo-clean)
   BW port of SC2's "bo-clean" center-spine build order: a single centered
   vertical icon column (36px circular nodes ringed in the owning player's
   color over a continuous track), text fanning to P0's side (left) or
   P1's side (right), with phase dividers interrupting the stream. SC2
   builds these rows with inline styles; BW owns them as classes here. */
#page-bw-replay .bo-clean-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 4px 0 8px;
    margin: 0;
}
#page-bw-replay .bo-clean-empty {
    padding: 24px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    font-family: 'Rajdhani', 'Inter', sans-serif;
}
#page-bw-replay .bo-clean-phase {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px 6px;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
#page-bw-replay .bo-clean-rule {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, 0.10);
}
#page-bw-replay .bo-clean-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 44px 1fr;
    align-items: center;
    height: 48px;
    min-height: 48px;
    column-gap: 10px;
    padding: 0 14px;
    margin: 0;
    width: 100%;
    line-height: 1;
    cursor: pointer;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    transition: background 120ms ease, opacity 120ms ease;
}
#page-bw-replay .bo-clean-row:hover {
    background: rgba(255, 255, 255, 0.04);
}
/* Rows the playhead hasn't reached yet read as "upcoming". */
#page-bw-replay .bo-clean-row:not(.passed):not(.active) {
    opacity: 0.5;
}
#page-bw-replay .bo-clean-row.active {
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--player-color, #fff) 12%, transparent),
        transparent
    );
}
/* Continuous vertical "subway line" behind the centered icon column. */
#page-bw-replay .bo-clean-stripe {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: rgba(255, 255, 255, 0.13);
    z-index: 0;
    pointer-events: none;
}
/* 36px circular node: dark disc + player-color ring. grid-row:1 is
   LOAD-BEARING — without it CSS grid auto-placement pushes the P0 text
   block (col 1, appended after the col-2 node) into a new implicit row. */
#page-bw-replay .bo-clean-node {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(12, 16, 24, 0.94);
    border: 2px solid var(--player-color, #fff);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6),
                0 0 0 3px color-mix(in srgb, var(--player-color, #fff) 12%, transparent);
    flex-shrink: 0;
    box-sizing: border-box;
}
#page-bw-replay .bo-clean-row.active .bo-clean-node {
    box-shadow: 0 0 10px color-mix(in srgb, var(--player-color, #fff) 55%, transparent),
                0 1px 4px rgba(0, 0, 0, 0.6);
}
/* BW unit portraits are wide in-game screenshots — clip the node to its
   circle and zoom into the center so the unit reads at icon size (same
   treatment as the production bubbles). */
#page-bw-replay .bo-clean-node {
    overflow: hidden;
}
#page-bw-replay .bo-clean-node .bw-icon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    transform: scale(1.85);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.65));
}
#page-bw-replay .bo-clean-node .bw-icon-fallback {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 13px 'Rajdhani', 'Inter', sans-serif;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    line-height: 26px !important;
}
#page-bw-replay .bo-clean-text {
    grid-row: 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
#page-bw-replay .bo-clean-row.side-p0 .bo-clean-text {
    grid-column: 1;
    justify-self: end;
    align-items: flex-end;
    text-align: right;
}
#page-bw-replay .bo-clean-row.side-p1 .bo-clean-text {
    grid-column: 3;
    justify-self: start;
    align-items: flex-start;
    text-align: left;
}
#page-bw-replay .bo-clean-name {
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.05;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
#page-bw-replay .bo-clean-row.mine .bo-clean-name {
    color: #ffffff;
}
#page-bw-replay .bo-clean-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
}

/* ============================================================ Bottom dock — BW tweaks
   The dock chrome (.replay-analyst-dock, .dock-rail, transport buttons)
   comes from replay.css. These rules restyle the controls the dock ADOPTS
   from the hidden legacy strip so they match the dock button family. */
#page-bw-replay .replay-analyst-dock .transport-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e6e9ef;
    font-size: 12px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#page-bw-replay .replay-analyst-dock .transport-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}
/* Audio cluster (mute / volume / music picker) inherits the dock's
   .dock-cluster-filter right-float; tighten its internals. */
#page-bw-replay .replay-analyst-dock .replay-audio-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#page-bw-replay .replay-analyst-dock .replay-audio-controls input[type="range"] {
    accent-color: #66bb6a;
    cursor: pointer;
}

/* Overview minimap geometry — bottom-LEFT corner (mirrors SC2's analyst
   layout: minimap at left:12, dock panel to its right at left:324). The
   desktop size is 300px to keep SC2's dock offset math exact. */
#page-bw-replay {
    --bw-overview-size: 300px;
    --bw-overview-bottom: 12px;
    --bw-overview-gap: 8px;
}

/* ============================================================ Sidebar panes */

/* Overview hero */
.bw-rs-hero {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(78, 201, 255, 0.08), rgba(196, 78, 201, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}
.bw-rs-hero-title {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #e6e9ef;
}
.bw-rs-hero-sub {
    margin-top: 4px;
    color: #98a3b3;
    font-size: 12px;
    display: flex;
    gap: 6px;
    align-items: center;
}
.bw-rs-hero-dot { color: #44485a; }

/* Overview player block reuses .rs-player from replay.css, plus a result badge */
#page-bw-replay .rs-player .bw-rs-result {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
#page-bw-replay .rs-player .bw-rs-result.win {
    color: #f4d35e;
    background: rgba(244, 211, 94, 0.16);
    border: 1px solid rgba(244, 211, 94, 0.45);
}
#page-bw-replay .rs-player .bw-rs-result.loss {
    color: #888;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Stat values (readable inside the player card) */
#page-bw-replay .rs-stat-value {
    color: #e6e9ef;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 600;
}

/* BW icons (scoped here for the new sidebar layout) */
.bw-icon, .bw-icon-fallback {
    display: inline-block;
    vertical-align: middle;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
    object-fit: cover;
}
.bw-icon { background: #0d1117; }
.bw-icon-fallback {
    background: #2d3239;
    color: #fff;
    text-align: center;
    line-height: 1.4;
    font-size: 11px;
    font-weight: bold;
}

/* Generic "block" used in Economy + Tech panes */
.bw-rs-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bw-rs-block {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    overflow: hidden;
}
.bw-rs-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--player-color, #888);
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.bw-rs-block-sub {
    color: #6e7687;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.bw-rs-chart {
    padding: 10px 12px;
}
.bw-svg {
    display: block;
    width: 100%;
    height: auto;
}
.bw-svg-tick {
    font-size: 9px;
    fill: #6e7687;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Tech list */
.bw-tech-list {
    list-style: none;
    margin: 0;
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bw-tech-row {
    display: grid;
    grid-template-columns: 10px 44px 22px 1fr;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: #cbd5e1;
}
.bw-tech-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f4d35e;
}
.bw-tech-time {
    color: #98a3b3;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
}
.bw-tech-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}
.bw-tech-name { color: #e6e9ef; }
.bw-tech-empty {
    list-style: none;
    color: #6e7687;
    font-size: 12px;
    font-style: italic;
    padding: 8px 0;
}

/* Battle list */
.bw-rs-empty {
    padding: 18px 12px;
    color: #6e7687;
    font-size: 12px;
    font-style: italic;
    text-align: center;
}
.bw-battle-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bw-battle-row {
    display: grid;
    grid-template-columns: 50px 70px 50px 1fr;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #cbd5e1;
    transition: background 0.12s, border-color 0.12s;
}
.bw-battle-row:hover {
    background: rgba(255, 80, 80, 0.08);
    border-color: rgba(255, 80, 80, 0.3);
}
.bw-battle-time {
    color: #98a3b3;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.bw-battle-loc {
    color: #6e7687;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
}
.bw-battle-dur {
    color: #6e7687;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
}
.bw-battle-bar {
    display: block;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.bw-battle-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(to right, #ff6b5a, #ff3b30);
    border-radius: 3px;
}

/* Make sure the BW page section behaves like SC2 page-replay (when active) */
#page-bw-replay.active {
    display: block;
}

/* ============================================================ Analyst layout (BW) */

/* BW reuses replay.css analyst classes (.replay-analyst-rail, .analyst-build-row,
   .dock-track, etc.) but its data set is smaller. The geometry rules for the
   rails + dock now live in the "Analyst overlay positioning" block above
   (position:absolute inside .canvas-wrapper); keep only the topbar tweak
   here. */

/* The SC2 stats-topbar layout rule uses an ID selector
   (.replay-topbar > #replay-topbar-stats), so it doesn't match BW's
   id="bw-replay-topbar-stats". Mirror it here. */
.replay-topbar > #bw-replay-topbar-stats { justify-self: center; }

/* End-of-game winner highlight. Mirrors the SC2 #replay-topbar-stats
   rules in replay.css L652+ — the SC2 selectors are ID-scoped so they
   don't match BW's element. The animations themselves
   (rtsWinnerPulse / rtsBadgeSlideIn) live in replay.css. */
#bw-replay-topbar-stats.game-ended .rts-player {
    transition: opacity 0.6s ease, filter 0.6s ease,
                border-color 0.6s ease, background 0.6s ease;
}
#bw-replay-topbar-stats.game-ended .rts-player.rts-loser {
    opacity: 0.42;
    filter: saturate(0.35);
}
#bw-replay-topbar-stats.game-ended .rts-player.rts-winner {
    border-color: var(--player-color, rgba(255, 255, 255, 0.4));
    background: color-mix(in srgb, var(--player-color, #fff) 10%, transparent);
    animation: rtsWinnerPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) 0.15s 2 both;
}
#bw-replay-topbar-stats.game-ended .rts-player.rts-winner .rts-name {
    text-shadow: 0 0 12px color-mix(in srgb, var(--player-color, #fff) 70%, transparent);
}
#bw-replay-topbar-stats.game-ended .rts-winner-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 8px 2px 9px;
    border-radius: 3px;
    background: var(--player-color, #fff);
    color: #0b0e14;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--player-color, #fff) 60%, transparent),
                0 0 14px color-mix(in srgb, var(--player-color, #fff) 55%, transparent);
    transform-origin: left center;
    animation: rtsBadgeSlideIn 0.55s cubic-bezier(0.2, 0.8, 0.25, 1) 0.35s both;
}
#bw-replay-topbar-stats.game-ended .rts-winner-badge-text {
    display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
    #bw-replay-topbar-stats.game-ended .rts-player.rts-winner { animation: none; }
    #bw-replay-topbar-stats.game-ended .rts-winner-badge { animation: none; }
}

/* Per-player action-overlay toggles. Two pill buttons in the bottom canvas-
   controls row (next to the zoom/screenshot buttons). The topbar's
   .rts-player chips aren't always rendered in BW mode (analyst layouts can
   hide the topbar), so the toggles live in the always-visible transport row
   instead. Active = solid pill in the player's colour; off = dim outline. */
.replay-action-toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.replay-action-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--player-color, #fff) 55%, transparent);
    background: color-mix(in srgb, var(--player-color, #fff) 18%, transparent);
    color: #e8ecf1;
    cursor: pointer;
    font: 600 11px/1 inherit;
    letter-spacing: 0.04em;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.replay-action-toggle:hover {
    background: color-mix(in srgb, var(--player-color, #fff) 32%, transparent);
}
.replay-action-toggle:focus-visible {
    outline: 1px solid var(--player-color, #fff);
    outline-offset: 1px;
}
.replay-action-toggle.off {
    background: transparent;
    border-color: rgba(120, 130, 145, 0.4);
    color: #8a92a0;
    opacity: 0.75;
}
.replay-action-toggle-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--player-color, #ccc);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.replay-action-toggle.off .replay-action-toggle-dot {
    background: transparent;
    box-shadow: inset 0 0 0 1px currentColor;
}
.replay-action-toggle-label {
    pointer-events: none;
}

/* Stylized monospace map name for the BW topbar (BW maps have iconic
   names like "Fighting Spirit" / "Heartbreak Ridge" — render them
   typewriter-style for flavor). */
#page-bw-replay .replay-topbar-map {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Race-color pills, scoped to BW analyst surfaces. */
#page-bw-replay .race-terran  { color: #4ec9ff; }
#page-bw-replay .race-protoss { color: #f4d35e; }
#page-bw-replay .race-zerg    { color: #c44ec9; }

/* ============================================================ Analyst layout — Live Stats panel
   H2 emits a fresh structure for the Live Stats card. Geometry and the
   per-row sparkline column are BW-specific, so we own the rules here. */
#page-bw-replay .replay-analyst-rail .replay-float-card {
    width: 100%;
}

#page-bw-replay .replay-analyst-rail .replay-float-card.expanded {
    max-height: 100%;
}

#page-bw-replay .replay-float-card .analyst-livestats-section,
#page-bw-replay .replay-float-card .analyst-prod-section {
    background: transparent;
    border: 0;
    border-radius: 0;
}

#page-bw-replay .analyst-livestats-section {
    padding: 14px 16px;
    background: rgba(13, 17, 23, 0.85);
    border-radius: 6px;
    border: 1px solid #2a313a;
}

#page-bw-replay .analyst-livestats-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #aaa;
    text-transform: uppercase;
    margin-bottom: 10px;
}

#page-bw-replay .analyst-stat-row {
    display: grid;
    grid-template-columns: 70px 1fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
#page-bw-replay .analyst-stat-row:last-child { border-bottom: none; }

/* Override the global .stat-label rule from replay.css (3386) only when
   it sits inside a BW analyst-stat-row — the spec wants tighter type. */
#page-bw-replay .analyst-stat-row .stat-label {
    color: #8a96a6;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#page-bw-replay .stat-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

#page-bw-replay .stat-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
}

#page-bw-replay .stat-cell.stat-p0 .stat-num { color: #f4d35e; }
#page-bw-replay .stat-cell.stat-p1 .stat-num { color: #c44ec9; }

/* Race-aware override: when analyst-layout tags the .stat-num with a
   race class, that wins over the slot-based color above (specificity tie,
   later rule wins). */
#page-bw-replay .stat-num.race-terran  { color: #4ec9ff; }
#page-bw-replay .stat-num.race-protoss { color: #f4d35e; }
#page-bw-replay .stat-num.race-zerg    { color: #c44ec9; }

#page-bw-replay .stat-sparkline {
    width: 80px;
    height: 18px;
    flex-shrink: 0;
}

/* ============================================================ Analyst layout — Production panel
   The BW production card (left rail) reuses SC2's .analyst-production* +
   .analyst-tracker* class families verbatim (see replay.css) so the
   chip / row / section visuals carry through without duplication. Only
   BW-specific glue stays here: the BW icon size override (BW icons ship
   at JPG/PNG sizes that differ from the SC2 sprite atlas) and the
   .prod-more "+N" footer used by BW's MAX_VISIBLE cap. */

/* Production-bubble icons render via renderBWIconElement (JPG <img>
   portraits), not the SC2 sprite-canvas. The shared .prod-bubble-icon
   slot clips to a circle. BW's icon JPGs are wide in-game screenshots —
   the unit occupies a small patch at the center — so cover-fit alone
   leaves a barely-visible speck. The scale() zooms into the center of
   the shot (the parent's overflow:hidden + border-radius:50% crop the
   spill) so the unit reads at wireframe size inside the ring. */
#page-bw-replay .prod-bubble-icon .bw-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transform: scale(2.05);
}
#page-bw-replay .prod-bubble-icon .bw-icon-fallback {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 15px 'Rajdhani', 'Inter', sans-serif;
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    line-height: normal !important;
}

/* ×N badge for grouped concurrent production. Sits at the icon's
   bottom-right corner — anchored to the relative .analyst-production-icon
   slot rather than the row, so it tracks the sprite at any size. */
#page-bw-replay .analyst-production-count {
    position: absolute;
    right: -4px;
    bottom: -3px;
    min-width: 18px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(20, 24, 32, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* "+N more" footer when production exceeds MAX_VISIBLE_PROD_ROWS. */
#page-bw-replay .analyst-prod-row.prod-more {
    display: block;
    text-align: center;
    color: #6e7687;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 0 0;
    min-height: 0;
    background: transparent;
    border: 0;
}

/* BW tracker chips embed renderBWIconElement output (JPG <img>); pin
   the image size so chips read consistently across icon shapes. */
#page-bw-replay .analyst-tracker-chip .bw-icon,
#page-bw-replay .analyst-tracker-chip .bw-icon-fallback {
    width: 18px !important;
    height: 18px !important;
    border-radius: 2px;
}

#page-bw-replay .analyst-prod-body[hidden],
#page-bw-replay .analyst-prod-full[hidden] {
    display: none !important;
}

#page-bw-replay .analyst-prod-full {
    display: block;
    /* Fill the wrapper rather than capping at min(58vh, 540px). The cap
       was the source of the dead space below the build list on tall
       panels — the inner stopped growing past 540px and the wrapper sat
       empty below. Negative `margin: 0 -6px` was also removed: the
       wrapper has no compensating padding, so the negative margin just
       overflowed the wrapper horizontally (which is what produced the
       ugly native horizontal scrollbar — see the wrapper rule above). */
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 0 4px;
    scrollbar-width: thin;
}
#page-bw-replay .analyst-prod-full::-webkit-scrollbar {
    width: 4px;
}
#page-bw-replay .analyst-prod-full::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
}

#page-bw-replay .analyst-prod-full .analyst-row {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    display: grid;
    min-height: 29px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    color: #e6e9ef;
    cursor: pointer;
    opacity: 0.38;
    transition: background 100ms ease, opacity 150ms ease, box-shadow 150ms ease;
}

#page-bw-replay .analyst-prod-full .analyst-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

#page-bw-replay .analyst-prod-full .analyst-row.passed {
    opacity: 1;
}

#page-bw-replay .analyst-prod-full .analyst-row.active {
    background: rgba(86, 194, 255, 0.07);
}

#page-bw-replay .analyst-prod-full .analyst-build-row {
    grid-template-columns: minmax(0, 1fr) 8px 72px 24px;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-right: 2px solid transparent;
    text-align: right;
}

#page-bw-replay .analyst-prod-full .analyst-build-row.side-p1 {
    grid-template-columns: 24px 72px 8px minmax(0, 1fr);
    border-left: 2px solid transparent;
    border-right: 0;
    text-align: left;
}

#page-bw-replay .analyst-prod-full .analyst-build-row.active.side-p0 {
    border-right-color: #56c2ff;
}

#page-bw-replay .analyst-prod-full .analyst-build-row.active.side-p1 {
    border-left-color: #56c2ff;
}

#page-bw-replay .analyst-prod-full .analyst-build-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
}

#page-bw-replay .analyst-prod-full .analyst-build-count {
    color: #8a96a6;
    font-size: 10px;
    font-weight: 700;
}

#page-bw-replay .analyst-prod-full .analyst-build-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}

#page-bw-replay .analyst-prod-full .analyst-build-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    color: #6e7687;
}

#page-bw-replay .analyst-prod-full .analyst-build-row.side-p0 .analyst-build-meta {
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-left: -3px;
}

#page-bw-replay .analyst-prod-full .analyst-build-row.side-p1 .analyst-build-meta {
    justify-content: flex-end;
    margin-right: -3px;
}

#page-bw-replay .analyst-prod-full .analyst-build-supply {
    color: #e6e9ef;
    font-weight: 700;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
}

#page-bw-replay .analyst-prod-full .analyst-build-delta {
    min-width: 24px;
}

#page-bw-replay .prod-full-empty {
    color: #8a96a6;
    padding: 16px 8px;
    text-align: center;
}
/* ============================================================ Analyst layout — Topbar player stats
   The current markup uses SC2's .rts-player button family (rendered by
   bw-analyst-layout.js renderStatsTopbar) so all the chip styling comes
   from replay.css L557+ for free. The legacy .ats-* classes are gone. */

/* ============================================================ BW corner-controls override
   SC2's .replay-corner-controls anchors above the bottom-LEFT overview minimap.
   For BW the topbar is display:none in analyst variant (replay.css:515) so
   the existing topbar Menu link is unreachable in playback. Pin the corner-
   controls (Menu pill) directly above the bottom-left overview minimap —
   same stacking SC2 uses. is-dropup on the wrap opens the dropdown upward
   into empty canvas space above the pill. */
#page-bw-replay .replay-corner-controls.bw-corner-controls {
    bottom: calc(var(--bw-overview-bottom) + var(--bw-overview-size) + 6px);
    left: 12px;
    top: auto;
    width: 110px;
}

/* ============================================================ BW-style overview minimap
   Bottom-LEFT widget that mirrors the main canvas at low resolution
   (mirrors SC2's analyst minimap corner). Click/drag pans the main camera;
   the dock panel sits directly to its right. */
#page-bw-replay .bw-overview-frame {
    position: absolute;
    left: 12px;
    bottom: var(--bw-overview-bottom);
    width: var(--bw-overview-size);
    height: var(--bw-overview-size);
    z-index: 6;
    padding: 4px;
    background: linear-gradient(180deg, #1d242c, #0d1116);
    border: 2px solid #4a5663;
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    pointer-events: auto;
}

#page-bw-replay .bw-overview-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #0a0a14;
    border: 1px solid #2a313a;
    cursor: crosshair;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#page-bw-replay .bw-rails-hidden ~ .bw-overview-frame,
#page-bw-replay .bw-overview-frame {
    /* Always visible — hiding the side panels (Bar button) shouldn't hide
       the overview, which serves as the only navigation aid besides the
       main canvas. */
}

/* ============================================================ Canvas zoom / rotate controls (H4)
   Floating overlay buttons positioned over the minimap canvas.
   Hidden because top-left collides with the LIVE STATS rail and clips its
   labels. Mouse-wheel zoom, drag-pan, Q/E rotate, and R reset still work. */
#page-bw-replay .bw-canvas-zoom-controls {
    display: none;
}
#page-bw-replay .bw-canvas-zoom-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #30363d;
    background: rgba(13, 17, 23, 0.85);
    color: #e0e0e0;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background 100ms ease;
}
#page-bw-replay .bw-canvas-zoom-btn:hover {
    background: rgba(45, 58, 74, 0.9);
}

@media (max-width: 1280px) {
    #page-bw-replay .replay-analyst-rail {
        width: 300px;
    }
}

/* SC2's dock slides to left:302px at ≤1024 expecting a 278px minimap —
   track the same size so the BW dock/minimap offsets stay exact. */
@media (max-width: 1024px) {
    #page-bw-replay {
        --bw-overview-size: 278px;
    }
}

@media (max-width: 860px), (hover: none) and (pointer: coarse) {
    #page-bw-replay {
        --bw-overview-size: 132px;
        /* Lift the overview above the full-width dock (≈70px tall with the
           control bar hidden below). */
        --bw-overview-bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
        --bw-overview-gap: 6px;
    }

    /* Dock becomes a full-width bottom bar; the adopted control bar
       (audio mixer / action toggles / zoom / screenshot) is hidden —
       too cramped for phones, and pinch/drag gestures cover zoom. */
    #page-bw-replay .replay-viewer.variant-analyst .replay-analyst-dock {
        left: 8px;
        right: 8px;
        width: auto;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
        padding: 8px 10px;
    }
    #page-bw-replay .replay-analyst-dock .dock-control-bar {
        display: none;
    }

    #page-bw-replay .replay-topbar {
        min-height: 0;
        padding: 4px 6px;
        gap: 4px;
    }

    #page-bw-replay .replay-topbar-thumb {
        width: 30px;
        height: 26px;
    }

    #page-bw-replay .replay-topbar-matchup {
        flex: 1 1 auto;
        max-width: none;
        font-size: 11px;
    }

    #page-bw-replay .replay-topbar-home {
        min-width: auto;
        min-height: 28px;
        height: 28px;
        padding: 0 8px;
        font-size: 11px;
    }

    #page-bw-replay .replay-topbar-actions {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 4px;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #page-bw-replay .replay-topbar-actions::-webkit-scrollbar {
        display: none;
    }

    #page-bw-replay .bw-topbar-action {
        flex: 0 0 auto;
        height: 26px;
        padding: 0 8px;
        font-size: 11px;
    }

    #page-bw-replay .replay-analyst-stats-topbar {
        display: none !important;
    }

    #page-bw-replay .replay-analyst-rail {
        top: auto;
        bottom: calc(var(--bw-overview-size) + var(--bw-overview-bottom) + 8px);
        width: auto;
        max-height: 42vh;
        padding: 0;
        overflow-y: auto;
        pointer-events: auto;
        z-index: 5;
        background: rgba(7, 10, 18, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 8px;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    #page-bw-replay .bw-rails-hidden .replay-analyst-rail {
        display: none;
    }

    #page-bw-replay .replay-analyst-rail-left {
        left: 8px;
        right: calc(50% + 4px);
    }

    #page-bw-replay .replay-analyst-rail-right {
        left: calc(50% + 4px);
        right: 8px;
    }
}

@media (max-width: 600px), (hover: none) and (pointer: coarse) and (orientation: portrait) {
    #page-bw-replay {
        --bw-overview-size: 112px;
        --bw-overview-gap: 4px;
    }

    /* Tight phones: drop the dock's total-duration label so the rail keeps
       breathing room next to the transport buttons. */
    #page-bw-replay .replay-analyst-dock .dock-time-total {
        display: none;
    }

    #page-bw-replay .replay-analyst-rail {
        left: 8px;
        right: 8px;
        max-height: 27vh;
    }

    #page-bw-replay .replay-analyst-rail-left {
        bottom: calc(var(--bw-overview-size) + 29vh + 58px + env(safe-area-inset-bottom, 0px));
    }

    #page-bw-replay .replay-analyst-rail-right {
        bottom: calc(var(--bw-overview-size) + 58px + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================ Command card
   BW-style status / command card (selection details). The overview minimap
   moved to the bottom-left corner and the dock now spans the bottom, so
   the card anchors bottom-RIGHT, floating just above the dock's top edge
   (dock ≈ 130px tall with its control bar). Fixed height — it no longer
   shares a baseline with the (taller) minimap. */
#page-bw-replay #bw-command-card {
    position: absolute;
    left: auto;
    right: 12px;
    bottom: 158px;
    width: min(560px, 42vw);
    height: 200px;
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(8, 12, 20, 0.94) 0%, rgba(8, 12, 20, 0.86) 100%);
    border: 1px solid rgba(143, 240, 161, 0.18);
    border-radius: 6px;
    color: #d8dde6;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 12px;
    z-index: 5;    /* above analyst rails (3) and the rail-resize handle, below minimap (6) */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    pointer-events: auto;
    box-sizing: border-box;
    user-select: none;
}

#page-bw-replay #bw-command-card.is-empty {
    display: none;
}

#page-bw-replay #bw-command-card .bw-command-card__empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    color: #6e7687;
}
#page-bw-replay #bw-command-card .bw-command-card__empty-icon {
    font-size: 32px;
    line-height: 1;
    color: rgba(143, 240, 161, 0.45);
}
#page-bw-replay #bw-command-card .bw-command-card__empty-title {
    font-size: 14px;
    font-weight: 600;
    color: #aab3c2;
    letter-spacing: 0.04em;
}
#page-bw-replay #bw-command-card .bw-command-card__empty-hint {
    font-size: 12px;
    color: #6e7687;
    margin-top: 2px;
    max-width: 70ch;
}

/* Portrait column */
#page-bw-replay #bw-command-card .bw-command-card__portrait {
    display: flex;
    align-items: center;
    justify-content: center;
}
#page-bw-replay #bw-command-card .bw-command-card__portrait-frame {
    --player-color: rgba(143, 240, 161, 0.45);
    width: 110px;
    height: 110px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.3));
    border: 2px solid var(--player-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
}
#page-bw-replay #bw-command-card .bw-command-card__portrait-frame .bw-icon,
#page-bw-replay #bw-command-card .bw-command-card__portrait-frame img.bw-icon {
    width: 88px;
    height: 88px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
#page-bw-replay #bw-command-card .bw-command-card__portrait-frame .bw-icon-fallback {
    font-size: 40px;
    line-height: 88px;
    font-weight: 700;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.04);
}

/* Status column */
#page-bw-replay #bw-command-card .bw-command-card__status {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}
#page-bw-replay #bw-command-card .bw-command-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #e6e9ef;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#page-bw-replay #bw-command-card .bw-command-card__name {
    overflow: hidden;
    text-overflow: ellipsis;
}
#page-bw-replay #bw-command-card .bw-command-card__race-badge {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    color: #0a0d14;
    background: #888;
}
#page-bw-replay #bw-command-card .bw-command-card__race-badge[data-race="Terran"] { background: #4ec9ff; }
#page-bw-replay #bw-command-card .bw-command-card__race-badge[data-race="Protoss"] { background: #f4d35e; }
#page-bw-replay #bw-command-card .bw-command-card__race-badge[data-race="Zerg"] { background: #c44ec9; }
#page-bw-replay #bw-command-card .bw-command-card__player {
    font-size: 11px;
    color: #8ea0b8;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#page-bw-replay #bw-command-card .bw-command-card__bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
}
#page-bw-replay #bw-command-card .bw-command-card__bar-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 8px;
}
#page-bw-replay #bw-command-card .bw-command-card__bar-row--idle {
    color: #6e7687;
    font-style: italic;
}
#page-bw-replay #bw-command-card .bw-command-card__bar-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: #8ea0b8;
    text-transform: uppercase;
}
#page-bw-replay #bw-command-card .bw-command-card__bar-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Training row — no progress bar (remaining_time isn't emitted for units);
   show target name + animated "in progress" dots instead. */
#page-bw-replay #bw-command-card .bw-command-card__bar-row--train {
    grid-template-columns: 38px 1fr auto;
}
#page-bw-replay #bw-command-card .bw-command-card__train-target {
    font-size: 12px;
    font-weight: 600;
    color: #f4d35e;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#page-bw-replay #bw-command-card .bw-command-card__train-state {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: #f4d35e;
    letter-spacing: 4px;
    animation: bw-train-blink 1.4s ease-in-out infinite;
}
@keyframes bw-train-blink {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* Bars */
#page-bw-replay #bw-command-card .bw-bar {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
}
#page-bw-replay #bw-command-card .bw-bar__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4caf50, #8ff0a1);
    transition: width 80ms linear;
}
#page-bw-replay #bw-command-card .bw-bar__fill.is-mid {
    background: linear-gradient(90deg, #d4b04a, #f4d35e);
}
#page-bw-replay #bw-command-card .bw-bar__fill.is-low {
    background: linear-gradient(90deg, #b14040, #e85a5a);
}
#page-bw-replay #bw-command-card .bw-bar__fill--shields {
    background: linear-gradient(90deg, #2c6fb0, #4ec9ff);
}
#page-bw-replay #bw-command-card .bw-bar__fill--energy {
    background: linear-gradient(90deg, #6e2cb0, #c44ec9);
}
#page-bw-replay #bw-command-card .bw-bar__fill--progress {
    background: linear-gradient(90deg, #d4b04a, #f4d35e);
}
#page-bw-replay #bw-command-card .bw-bar--mini {
    height: 4px;
    margin-top: 2px;
}

/* Multi-selection layout: replaces the portrait column with a unit grid. */
#page-bw-replay #bw-command-card .bw-command-card__multi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}
#page-bw-replay #bw-command-card .bw-command-card__multi-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: #8ea0b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
#page-bw-replay #bw-command-card .bw-command-card__multi-summary {
    color: #e6e9ef;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
}
#page-bw-replay #bw-command-card .bw-command-card__multi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;
    flex: 1 1 auto;
    min-height: 0;
}
#page-bw-replay #bw-command-card .bw-command-card__multi-cell {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    padding: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}
#page-bw-replay #bw-command-card .bw-command-card__multi-cell .bw-icon,
#page-bw-replay #bw-command-card .bw-command-card__multi-cell img.bw-icon {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
}
#page-bw-replay #bw-command-card .bw-command-card__multi-cell .bw-icon-fallback {
    font-size: 12px;
    line-height: 24px;
    font-weight: 700;
    color: #cbd5e1;
    width: 24px;
    height: 24px;
    text-align: center;
}
#page-bw-replay #bw-command-card .bw-command-card__multi-cell .bw-bar--mini {
    width: 100%;
}

/* Tighter portrait on narrower desktops. The card stays anchored to the
   right of the minimap — only the inside layout tightens up so the status
   column doesn't squeeze to nothing. */
@media (max-width: 1280px) {
    #page-bw-replay #bw-command-card {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 10px;
    }
    #page-bw-replay #bw-command-card .bw-command-card__portrait-frame {
        width: 88px;
        height: 88px;
    }
    #page-bw-replay #bw-command-card .bw-command-card__portrait-frame .bw-icon,
    #page-bw-replay #bw-command-card .bw-command-card__portrait-frame img.bw-icon {
        width: 72px;
        height: 72px;
    }
}

/* Below 1100px the card's available width (between minimap and viewer
   edge) gets cramped — tighten the portrait column further. */
@media (max-width: 1100px) and (min-width: 861px) {
    #page-bw-replay #bw-command-card {
        grid-template-columns: 88px minmax(0, 1fr);
    }
}

@media (max-width: 860px), (hover: none) and (pointer: coarse) {
    /* On mobile / touch the rails are hidden and the minimap shrinks. Keep
       the card right-of-minimap but smaller; touch selection isn't wired
       (gesture controller still pans/zooms), but the card updates whenever
       the renderer's selection state changes. */
    #page-bw-replay #bw-command-card {
        left: calc(50% + var(--bw-overview-size, 132px) / 2 + 6px);
        right: 6px;
        grid-template-columns: 72px minmax(0, 1fr);
        padding: 6px 8px;
    }
    #page-bw-replay #bw-command-card .bw-command-card__portrait-frame {
        width: 60px;
        height: 60px;
    }
    #page-bw-replay #bw-command-card .bw-command-card__portrait-frame .bw-icon,
    #page-bw-replay #bw-command-card .bw-command-card__portrait-frame img.bw-icon {
        width: 48px;
        height: 48px;
    }
}