/* Basketball Stat Tracker — Styles
   Mobile-first dark theme matching React prototype */

:root {
    --bb-bg: #000;
    --bb-card: #1c1c1c;
    --bb-accent: #ff8c00;
    --bb-accent-dark: #e07000;
    --bb-made-start: #16a34a;
    --bb-made-end: #15803d;
    --bb-miss-start: #dc2626;
    --bb-miss-end: #b91c1c;
    --bb-amber-start: #f59e0b;
    --bb-amber-end: #d97706;
    --bb-toolbar: #3a3a3a;
    --bb-text: #fff;
    --bb-text-secondary: #aaa;
    --bb-text-muted: #888;
    --bb-text-dim: #555;
    --bb-border: rgba(255,255,255,0.08);
    --bb-border-light: rgba(255,255,255,0.15);
    --bb-radius: 12px;
    --bb-font: 'Oswald', sans-serif;
    --bb-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--bb-font);
    background: var(--bb-bg);
    color: var(--bb-text);
    min-height: 100dvh;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior: none;
}
/* Lock only the tracking screen so game-time buttons never shift. */
body.bb-lock-scroll { position: fixed; inset: 0; overflow: hidden; width: 100%; }
input, button { font-family: var(--bb-font); }
button { cursor: pointer; border: none; background: none; color: inherit; }
button:active { opacity: 0.85; transform: scale(0.97); }
input::placeholder { color: var(--bb-text-dim); }

/* ═══ Screens ═══ */
.bb-screen { min-height: 100dvh; }
.bb-screen--center { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }

/* ═══ Login Screen ═══ */
.bb-login-card {
    background: var(--bb-card);
    border-radius: 16px;
    padding: 32px 28px;
    width: 100%;
    max-width: 360px;
    border: 1px solid var(--bb-border);
    text-align: center;
}
.bb-login-icon { margin-bottom: 16px; }
.bb-login-title { font-size: 28px; font-weight: 700; letter-spacing: 1px; margin-bottom: 4px; }
.bb-login-subtitle { color: var(--bb-text-muted); font-size: 13px; margin-bottom: 24px; }
.bb-login-form { display: flex; flex-direction: column; gap: 14px; }

/* ═══ Team Picker ═══ */
.bb-team-picker { max-width: 400px; }
.bb-team-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-height: 410px; overflow-y: auto; }
.bb-team-option {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--bb-border-light);
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    transition: background 0.15s;
}
.bb-team-option:active { background: rgba(255,140,0,0.15); transform: scale(0.98); }
.bb-team-option-left { flex: 1; }
.bb-team-option-name { color: #fff; font-size: 17px; font-weight: 600; }
.bb-team-option-meta { color: var(--bb-text-muted); font-size: 12px; margin-top: 2px; font-family: var(--bb-mono); }
.bb-team-option-badge {
    background: #22c55e; color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    padding: 4px 8px; border-radius: 6px;
    animation: bb-pulse 2s infinite;
}
.bb-team-option--add {
    border-style: dashed;
    justify-content: center;
}
.bb-team-option--add .bb-team-option-name { color: var(--bb-accent); text-align: center; }
@keyframes bb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ═══ Fields & Inputs ═══ */
.bb-field { text-align: left; }
.bb-label { display: block; color: var(--bb-text-muted); font-size: 11px; letter-spacing: 1px; margin-bottom: 4px; }
.bb-input {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--bb-border-light);
    border-radius: 8px;
    padding: 12px;
    color: var(--bb-text);
    font-size: 16px;
    outline: none;
    text-align: center;
}
.bb-input:focus { border-color: var(--bb-accent); }
.bb-input[readonly] { opacity: 0.5; pointer-events: none; }
.bb-input--number { width: 80px; margin: 0 auto; display: block; font-size: 22px; color: var(--bb-accent); }
.bb-input--underline {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--bb-border-light);
    border-radius: 0;
    padding: 10px 0;
    text-align: left;
}

/* ═══ Buttons ═══ */
.bb-btn { padding: 12px 24px; border-radius: 8px; font-size: 15px; font-weight: 600; letter-spacing: 0.5px; }
.bb-btn--primary { background: linear-gradient(135deg, var(--bb-accent), var(--bb-accent-dark)); color: #fff; border: none; }
.bb-btn--outline { background: transparent; border: 1px solid var(--bb-border-light); color: var(--bb-text-secondary); }
.bb-btn--text { background: transparent; border: none; color: var(--bb-accent); font-size: 16px; }
.bb-btn--blue { color: #4a9eff; }
.bb-btn--large { width: 100%; max-width: 340px; padding: 18px; font-size: 20px; font-weight: 700; letter-spacing: 2px; border-radius: 12px; box-shadow: 0 4px 20px rgba(255,140,0,0.3); }
.bb-btn--wide { flex: 2; }
.bb-btn-icon { color: var(--bb-accent); font-size: 24px; padding: 4px; }

/* ═══ Player Card (Start Screen) ═══ */
.bb-player-card {
    background: var(--bb-card);
    border-radius: 16px;
    padding: 28px;
    width: 100%;
    max-width: 340px;
    border: 1px solid var(--bb-border);
    text-align: center;
    margin-bottom: 24px;
}
.bb-avatar {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: #2a2a2a;
    border: 3px solid #555;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    margin: 0 auto 12px;
}
.bb-avatar--sm { width: 44px; height: 44px; border-width: 2px; margin: 0; flex-shrink: 0; }
.bb-avatar--lg { width: 80px; height: 80px; flex-shrink: 0; margin: 0; }
.bb-avatar-badge {
    position: absolute; bottom: -4px; right: -4px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #fff; color: #000;
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #333;
}
.bb-avatar-badge--sm { width: 18px; height: 18px; font-size: 8px; bottom: -3px; right: -6px; border-width: 1px; }
.bb-player-name { font-size: 26px; font-weight: 700; }
.bb-player-team { color: var(--bb-accent); font-size: 14px; letter-spacing: 1px; margin-top: 4px; font-weight: 500; }

/* ═══ Resume Card ═══ */
.bb-resume-card {
    background: #1a1a1a;
    border-radius: 16px;
    padding: 28px;
    width: 100%;
    max-width: 340px;
    border: 1px solid rgba(255,140,0,0.2);
    text-align: center;
}
.bb-resume-title { color: var(--bb-accent); font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.bb-resume-player { color: #ccc; font-size: 15px; }
.bb-resume-info { color: var(--bb-text-muted); font-size: 13px; }
.bb-resume-pts { font-size: 42px; font-weight: 700; margin: 16px 0; }
.bb-resume-pts span { font-size: 16px; color: var(--bb-text-muted); }
.bb-resume-actions { display: flex; gap: 12px; margin-top: 20px; }
.bb-resume-actions .bb-btn { flex: 1; padding: 14px; border-radius: 10px; font-size: 15px; font-weight: 700; }

/* ═══ Modals ═══ */
.bb-modal {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.bb-modal-content {
    background: #1e1e1e;
    border-radius: 16px;
    padding: 20px 24px;
    width: 100%;
    max-width: 340px;
    border: 1px solid rgba(255,255,255,0.1);
}
.bb-modal-title { color: #fff; font-size: 22px; font-weight: 700; text-align: center; }
.bb-modal-subtitle { color: var(--bb-text-muted); font-size: 12px; text-align: center; margin-bottom: 16px; }
.bb-modal-actions { display: flex; gap: 16px; margin-top: 20px; }
.bb-modal-actions .bb-btn { flex: 1; padding: 12px; }
.bb-score-inputs { display: flex; gap: 12px; margin-bottom: 12px; }
.bb-score-inputs .bb-field { flex: 1; }
.bb-score-inputs .bb-input { text-align: center; }
.bb-result-preview { text-align: center; font-size: 16px; font-weight: 600; min-height: 24px; margin-bottom: 12px; }

/* ═══ Toggle ═══ */
.bb-toggle { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--bb-border-light); }
.bb-toggle-btn {
    flex: 1; padding: 10px 0;
    background: rgba(255,255,255,0.05);
    color: var(--bb-text-muted);
    font-size: 14px; font-weight: 600;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.bb-toggle-btn:last-child { border-right: none; }
.bb-toggle-btn.active { background: var(--bb-accent); color: #fff; }

/* ═══ Select Button ═══ */
.bb-select-btn {
    width: 100%; text-align: left;
    background: transparent; border: none;
    border-bottom: 1px solid var(--bb-border-light);
    padding: 10px 0; color: #fff; font-size: 15px;
}

/* ═══ Game Type Picker ═══ */
.bb-picker {
    position: fixed; inset: 0; z-index: 220;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: flex-end;
}
.bb-picker-content {
    background: linear-gradient(to bottom, #2a2010, #1a1408);
    border-radius: 16px 16px 0 0;
    width: 100%; max-width: 420px;
    margin: 0 auto;
    padding: 16px 0 40px;
}
.bb-picker-title {
    text-align: center; padding: 8px 0 12px;
    color: var(--bb-text-muted); font-size: 14px; letter-spacing: 2px; font-weight: 600;
}
.bb-picker-opt {
    display: block; width: calc(100% - 32px); margin: 4px 16px;
    padding: 14px 16px; border-radius: 10px;
    background: transparent; border: none;
    color: var(--bb-text-muted); font-size: 16px; text-align: center;
}
.bb-picker-opt.active { background: rgba(255,255,255,0.12); color: #fff; }

/* ═══ Tracking Screen ═══ */
#screen-tracking {
    display: flex; flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}
.bb-track-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 16px 0; flex-shrink: 0;
    padding-top: max(6px, env(safe-area-inset-top));
}
.bb-track-team { font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.bb-status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #22c55e;
    transition: background 0.3s;
}
.bb-status-dot.offline { background: #ef4444; }

/* ═══ Info Bar ═══ */
.bb-info-bar {
    margin: 4px 8px;
    background: var(--bb-card);
    border-radius: var(--bb-radius);
    padding: 8px 10px;
}
.bb-info-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.bb-info-name { flex: 1; color: var(--bb-accent); font-size: 22px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.bb-info-right { text-align: right; }
.bb-info-fg { color: var(--bb-text-secondary); font-size: 14px; }
.bb-info-eff { color: #fff; font-size: 21px; font-weight: 700; }
.bb-stat-row {
    display: grid; grid-template-columns: repeat(9, 1fr);
    text-align: center;
    border-top: 1px solid var(--bb-border);
    padding-top: 4px;
}
.bb-stat-label { display: block; color: var(--bb-text-muted); font-size: 12px; letter-spacing: 0.5px; }
.bb-stat-val { display: block; color: #fff; font-size: 20px; font-weight: 600; }

/* ═══ Scrollable Content ═══ */
.bb-track-scroll {
    flex: 1; overflow: hidden; min-height: 0;
    padding: 0 8px;
    display: flex; flex-direction: column; gap: 4px;
}

/* ═══ Shooting Card ═══ */
.bb-shooting-card {
    background: var(--bb-card);
    border-radius: var(--bb-radius);
    padding: 6px;
    display: flex; flex-direction: column; gap: 4px;
    flex: 1 1 0; min-height: 0;
}
.bb-shot-row {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: stretch; gap: 8px;
    flex: 1 1 0; min-height: 0;
}
.bb-shot-btn {
    position: relative;
    width: 100%; padding: 4px 0;
    border-radius: 12px; border: none;
    color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 50px;
}
.bb-shot-btn--made { background: linear-gradient(135deg, var(--bb-made-start), var(--bb-made-end)); }
.bb-shot-btn--miss { background: linear-gradient(135deg, var(--bb-miss-start), var(--bb-miss-end)); }
.bb-shot-circle {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700;
}
.bb-shot-circle--made { background: rgba(0,0,0,0.3); }
.bb-shot-circle--miss { border: 2px dashed rgba(255,255,255,0.5); background: transparent; }
.bb-shot-label { font-size: 15px; font-weight: 700; letter-spacing: 0.5px; }
.bb-shot-center { text-align: center; min-width: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.bb-shot-section-label { display: none; }
.bb-shot-frac { color: var(--bb-text-secondary); font-size: 15px; }
.bb-divider { display: none; }
.bb-fg-label { display: none; }

/* ═══ Badge ═══ */
.bb-badge {
    position: absolute; top: 5px; left: 7px;
    color: #fff; font-size: 14px; font-weight: 700;
    min-width: 14px; text-align: center; line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.bb-badge--right { left: auto; right: 7px; }
.bb-badge:empty { display: none; }

/* ═══ Amber Grid ═══ */
.bb-amber-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    flex: 1 1 0; min-height: 0;
}
.bb-amber-btn {
    position: relative;
    padding: 5px 4px 4px;
    border-radius: 12px; border: none;
    background: linear-gradient(180deg, var(--bb-amber-start), var(--bb-amber-end));
    color: #1a1a1a;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 54px;
}
.bb-amber-label { font-size: 15px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.2; }
.bb-amber-btn svg { width: 26px; height: 26px; }

/* ═══ Bottom Toolbar ═══ */
.bb-toolbar {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px; padding: 6px 8px 8px;
    flex-shrink: 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.bb-toolbar-btn {
    padding: 8px 4px;
    border-radius: 8px;
    background: var(--bb-toolbar);
    color: #ccc;
    font-size: 13px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.bb-toolbar-icon { font-size: 18px; }
.bb-toolbar-btn--end {
    background: var(--bb-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    justify-content: center;
}

/* ═══ Share Card ═══ */
.bb-share-card {
    width: 100%; max-width: 420px;
    border-radius: 16px; overflow: hidden;
    background: linear-gradient(145deg, #3d2415 0%, #2a1810 40%, #1a0f0a 100%);
    position: relative;
}
.bb-court-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0.05; pointer-events: none;
}
.bb-share-header {
    padding: 20px 20px 10px;
    display: flex; align-items: center; gap: 16px;
    position: relative;
}
.bb-share-info { flex: 1; }
.bb-share-name { color: #fff; font-size: 24px; font-weight: 700; line-height: 1.1; }
.bb-share-team { color: #ccc; font-size: 13px; margin-top: 2px; }
.bb-share-result { color: #ccc; font-size: 13px; font-weight: 600; }
.bb-share-date { padding: 0 20px 10px; color: #777; font-size: 11px; font-family: var(--bb-mono); letter-spacing: 1px; position: relative; }
.bb-share-stats {
    margin: 0 12px 4px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px; overflow: hidden;
    position: relative;
}
.bb-share-stat-row {
    display: grid; grid-template-columns: repeat(8, 1fr);
    background: rgba(255,255,255,0.04);
}
.bb-share-stat-row + .bb-share-stat-row { border-top: 1px solid rgba(255,255,255,0.06); }
.bb-share-stat-cell {
    text-align: center; padding: 8px 2px;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.bb-share-stat-cell:last-child { border-right: none; }
.bb-share-stat-cell-label { color: #999; font-size: 10px; letter-spacing: 1px; font-weight: 500; }
.bb-share-stat-cell-val { color: #fff; font-size: 17px; font-weight: 600; }
.bb-share-pcts {
    display: flex; justify-content: space-around;
    padding: 10px 16px 18px;
    position: relative;
}
.bb-share-pct-val { color: var(--bb-accent); font-size: 17px; font-weight: 700; text-align: center; }
.bb-share-pct-label { color: #777; font-size: 9px; letter-spacing: 1px; text-align: center; }
.bb-share-actions {
    display: flex; gap: 12px; margin-top: 20px; width: 100%; max-width: 420px;
}
.bb-share-actions .bb-btn { flex: 1; padding: 14px; border-radius: 10px; font-size: 14px; font-weight: 600; letter-spacing: 1px; }

/* ═══ Stats Link on Start Screen ═══ */
.bb-btn--stats-link {
    width: 100%; max-width: 340px;
    margin-top: 12px;
    padding: 14px;
    font-size: 14px;
    letter-spacing: 1px;
}

/* ═══ Stats Screen ═══ */
#screen-stats {
    display: flex; flex-direction: column;
    min-height: 100dvh;
}
.bb-stats-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; flex-shrink: 0;
}
.bb-stats-title { font-size: 18px; font-weight: 700; letter-spacing: 1px; }

/* Tabs */
.bb-stats-tabs {
    display: flex; gap: 0;
    margin: 0 10px; flex-shrink: 0;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--bb-border-light);
}
.bb-stats-tab {
    flex: 1; padding: 10px 0;
    background: rgba(255,255,255,0.05);
    color: var(--bb-text-muted);
    font-size: 14px; font-weight: 600;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.bb-stats-tab:last-child { border-right: none; }
.bb-stats-tab.active { background: var(--bb-accent); color: #fff; }

/* Scroll area */
.bb-stats-scroll {
    flex: 1; overflow: auto;
    padding: 10px;
}
.bb-stats-panel { }
.bb-stats-empty {
    text-align: center; color: var(--bb-text-muted);
    padding: 40px 20px; font-size: 15px;
}

/* ═══ Game Cards (mini share cards) ═══ */
.bb-stats-games-list { display: flex; flex-direction: column; gap: 12px; }
.bb-game-card {
    background: linear-gradient(145deg, #3d2415 0%, #2a1810 40%, #1a0f0a 100%);
    border-radius: 12px; overflow: hidden;
    padding: 14px; position: relative;
}
.bb-game-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.bb-game-card-date { color: #777; font-size: 11px; font-family: var(--bb-mono); letter-spacing: 1px; }
.bb-game-card-opponent { color: #ccc; font-size: 14px; font-weight: 600; }
.bb-game-card-result { font-size: 15px; font-weight: 700; text-align: right; white-space: nowrap; flex-shrink: 0; }
.bb-game-card-stats {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 2px; margin-top: 8px;
    background: rgba(0,0,0,0.2); border-radius: 8px;
    padding: 6px 4px;
}
.bb-game-card-stat { text-align: center; }
.bb-game-card-stat-label { color: #999; font-size: 9px; letter-spacing: 0.5px; }
.bb-game-card-stat-val { color: #fff; font-size: 16px; font-weight: 600; }
.bb-game-card-shooting {
    display: flex; justify-content: space-around;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.bb-game-card-pct-val { color: var(--bb-accent); font-size: 14px; font-weight: 700; text-align: center; }
.bb-game-card-pct-label { color: #777; font-size: 9px; letter-spacing: 0.5px; text-align: center; }

/* ═══ Date Filter ═══ */
.bb-date-filter {
    margin-bottom: 14px;
}
.bb-date-presets {
    display: flex; gap: 0;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--bb-border-light);
    margin-bottom: 8px;
}
.bb-date-preset {
    flex: 1; padding: 8px 0;
    background: rgba(255,255,255,0.05);
    color: var(--bb-text-muted);
    font-size: 12px; font-weight: 600;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.bb-date-preset:last-child { border-right: none; }
.bb-date-preset.active { background: var(--bb-accent); color: #fff; }
.bb-date-custom {
    display: flex; align-items: flex-end; gap: 8px;
    margin-bottom: 8px;
}
.bb-date-field { flex: 1; }
.bb-input--date {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--bb-border-light);
    border-radius: 6px;
    padding: 8px;
    color: var(--bb-text);
    font-size: 13px;
    font-family: var(--bb-mono);
    outline: none;
    text-align: center;
    color-scheme: dark;
}
.bb-input--date:focus { border-color: var(--bb-accent); }
.bb-btn--sm { padding: 8px 14px; font-size: 12px; border-radius: 6px; white-space: nowrap; }
.bb-date-filter-label {
    color: var(--bb-text-muted); font-size: 11px;
    text-align: center; font-family: var(--bb-mono);
    letter-spacing: 0.5px;
    min-height: 16px;
}

/* ═══ Season Summary ═══ */
.bb-season-heroes {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-bottom: 16px;
}
.bb-hero-card {
    background: var(--bb-card);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    border: 1px solid var(--bb-border);
}
.bb-hero-card--wide { grid-column: span 3; }
.bb-hero-val { font-size: 28px; font-weight: 700; color: var(--bb-accent); line-height: 1; }
.bb-hero-label { font-size: 10px; color: var(--bb-text-muted); letter-spacing: 1px; margin-top: 4px; }
.bb-hero-sub { font-size: 11px; color: var(--bb-text-secondary); margin-top: 2px; }

/* Record row in wide hero card */
.bb-hero-record {
    display: flex; justify-content: center; gap: 16px;
    margin-top: 6px;
}
.bb-hero-record span { font-size: 15px; font-weight: 600; }

/* ═══ Trend Graphs ═══ */
.bb-season-trends { display: flex; flex-direction: column; gap: 12px; }
.bb-trend-card {
    background: var(--bb-card);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid var(--bb-border);
}
.bb-trend-title {
    font-size: 12px; font-weight: 600; letter-spacing: 1px;
    color: var(--bb-text-muted); margin-bottom: 8px;
}
.bb-trend-canvas {
    width: 100%; height: 120px;
    display: block;
}

/* ═══ Utility ═══ */
.win { color: #22c55e; }
.loss { color: #ef4444; }
.tie { color: var(--bb-text-secondary); }