/*
 * Basketball Scorekeeper — visual polish (operator 2026-10-17, mockup ~/ship/basketball-polish-mockup).
 *
 * Looks only: loaded AFTER the page's own styles (resources/views/scorekeeper/basketball-scoreboard.blade.php)
 * and only restyles the classes / ids that page already has. No markup or script depends on anything here,
 * so turning it off (config scorekeeper.basketball_polish / BASKETBALL_POLISH=false) puts the old look back.
 * Every rule is scoped under .basketball-scoreboard (plus one body:has(.basketball-scoreboard) page background)
 * so nothing else on the site changes.
 *
 * Layout trick: each .scoreboard-team is display:contents, so its parts sit on one shared .scoreboard grid —
 * names / scores / shooting line on a dark band, the keys below in one white panel per team.
 * State hooks read what the page already writes: #clock-start[style*="none"] = clock running (LIVE tag),
 * .bonus-indicator[style*="inline"] = bonus, .possession-btn.active[data-team] = possession.
 *
 * Palette (app CLAUDE.md §8): brand blue #2ba8ff accent, ink, team pair cyan #06b6d4 / orange #f97316
 * (the score-keeper-v2 pair); amber / red keep their shot-clock and bonus state meanings.
 */


body:has(.basketball-scoreboard) { background: #f5f1ea; }

.basketball-scoreboard {
    --bbp-accent: #2ba8ff;
    --bbp-accent-deep: #0066cc;
    --bbp-ink: #0a0a0a;
    --bbp-p1: #06b6d4;
    --bbp-p2: #f97316;
    --bbp-paper: #f5f1ea;
    --bbp-line: #ebe5da;
    --bbp-muted: #64748b;
    --team1-color: var(--bbp-p1);
    --team2-color: var(--bbp-p2);
    --basketball-primary: var(--bbp-accent);
    --bbp-stadium: radial-gradient(120% 170% at 50% -40%, #1e293b 0%, #0b1220 62%, #080d18 100%);
    --bbp-scan: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px);
}

.basketball-scoreboard.score-keeper-page {
    background: var(--bbp-paper);
    color: #0f172a;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    padding: clamp(10px, 2.5vw, 24px) max(clamp(10px, 2.5vw, 24px), calc((100% - 1180px) / 2));
}

/* The page is a flex column; in fullscreen it is locked to the viewport height, so keep every section at its
   natural height (the inline timeline otherwise squeezes the header and clocks) and let the page scroll. */
.basketball-scoreboard > * { flex-shrink: 0; }
.basketball-scoreboard.score-keeper-page:fullscreen { overflow-y: auto; }

/* ---------- 1. Match header -> one row of pill buttons (labels come from each button's title) ---------- */
.basketball-scoreboard .match-header {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 0 0 12px;
    background: transparent;
    border: 0;
}
.basketball-scoreboard .match-header > * { align-self: center; margin: 0; }
.basketball-scoreboard .match-header-left { display: flex; align-items: center; flex: 0 0 auto; }
.basketball-scoreboard .match-header .back-link { margin: 0; padding: 0; flex: 0 0 auto; gap: 0; }
.basketball-scoreboard .match-header .back-link {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bbp-ink); border: 1px solid var(--bbp-ink); color: #fff;
    box-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.basketball-scoreboard .match-header .back-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.basketball-scoreboard .match-header .back-link .back-text { display: none; }
.basketball-scoreboard .match-header .back-link:hover { background: #1e293b; color: #fff; border-color: #1e293b; }

.basketball-scoreboard .match-header-center,
.basketball-scoreboard .match-header-center[style] {
    display: flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; gap: 6px; white-space: nowrap; min-width: 0;
}
.basketball-scoreboard .period-indicator {
    background: var(--bbp-ink); color: #fff; border-radius: 999px;
    display: inline-block; margin: 0; padding: 8px 13px; font: 800 .85rem/1 Inter, sans-serif; letter-spacing: .06em;
}
.basketball-scoreboard .match-meta-inline { color: #6b6458; font-size: .82rem; font-weight: 600; }
.basketball-scoreboard .meta-sep { color: #b8b0a2; opacity: 1; }
/* format + level only where the pill row still fits beside them */
@media (max-width: 1359px) {
    .basketball-scoreboard .match-header-center .match-meta-inline,
    .basketball-scoreboard .match-header-center .meta-sep { display: none; }
}

.basketball-scoreboard .match-header-right {
    display: flex; gap: 8px; min-width: 0;
    overflow-x: auto; scrollbar-width: none; padding: 2px 2px 3px;
}
.basketball-scoreboard .match-header-right::-webkit-scrollbar { display: none; }
.basketball-scoreboard .match-header-right > :first-child { margin-left: auto; }
.basketball-scoreboard .match-header .match-btn {
    flex: 0 0 auto; width: auto; height: 38px; padding: 0 14px;
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    border-radius: 999px; border: 1px solid #e2dccf; background: #fff; color: #0f172a;
    font: 600 .85rem Inter, sans-serif; box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.basketball-scoreboard .match-header .match-btn[hidden] { display: none; }
.basketball-scoreboard .match-header .match-btn i { color: #475569; font-size: .8rem; }
.basketball-scoreboard .match-header .match-btn::after { content: attr(title); order: 2; }
.basketball-scoreboard .match-header .match-btn:hover { background: #fdfbf7; border-color: #cfc6b4; color: #0f172a; }
.basketball-scoreboard .match-header .match-btn.disabled,
.basketball-scoreboard .match-header .match-btn:disabled { opacity: .45; }
/* Share is the lead action: dark pill, "New" tag sits inline instead of floating off the corner */
.basketball-scoreboard .match-header #share-btn { background: var(--bbp-ink); border-color: var(--bbp-ink); color: #fff; }
.basketball-scoreboard .match-header #share-btn i { color: #7dd3fc; }
.basketball-scoreboard .match-header #share-btn .share-btn-badge {
    position: static; order: 3; background: var(--bbp-accent); color: #fff;
    font-size: .58rem; padding: 3px 6px; border-radius: 999px; letter-spacing: .08em; box-shadow: none;
}
.basketball-scoreboard .match-header #match-timeline-btn.is-open { background: #e8f5ff; color: var(--bbp-accent-deep); border-color: #bfe3ff; }
.basketball-scoreboard .match-header #match-timeline-btn.is-open i { color: var(--bbp-accent-deep); }

@media (max-width: 768px) {
    .basketball-scoreboard .match-header { padding: 0 0 10px; }
    .basketball-scoreboard .match-header-center { display: flex; }
    .basketball-scoreboard .match-header-center .match-meta-inline,
    .basketball-scoreboard .match-header-center .meta-sep { display: none; }
    .basketball-scoreboard .match-header .back-link { width: 38px; height: 38px; }
    .basketball-scoreboard .match-header .match-btn { height: 38px; width: auto; font-size: .82rem; padding: 0 13px; }
}

/* ---------- 2. Clock section = top of the stadium scoreboard ---------- */
.basketball-scoreboard .clock-section {
    position: relative; overflow: hidden;
    background: var(--bbp-scan), var(--bbp-stadium);
    border-radius: 20px 20px 0 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.basketball-scoreboard .clock-section-body {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: clamp(10px, 3vw, 36px); padding: clamp(14px, 2.4vw, 22px) clamp(12px, 3vw, 32px) clamp(10px, 1.8vw, 16px);
    max-height: 320px;
}
.basketball-scoreboard .game-clock-container { grid-column: 2; flex-direction: column; gap: 6px; width: auto; flex-wrap: nowrap; }
.basketball-scoreboard .shot-clock-container { grid-column: 3; justify-self: start; flex-direction: column; gap: 6px; width: auto; flex-wrap: nowrap; }
.basketball-scoreboard .clock-label { font: 800 .62rem Inter, sans-serif; letter-spacing: .18em; color: #94a3b8; white-space: nowrap; }
.basketball-scoreboard .game-clock {
    font: 900 clamp(2.9rem, 11vw, 4.6rem)/1 Inter, sans-serif; font-variant-numeric: tabular-nums;
    letter-spacing: -.02em; color: #fff; text-shadow: 0 0 26px rgba(255,255,255,.16);
}
.basketball-scoreboard .shot-clock {
    width: clamp(54px, 13vw, 70px); aspect-ratio: 1; min-width: 0; border-radius: 50%;
    display: grid; place-items: center;
    font: 900 clamp(1.4rem, 5.5vw, 1.9rem)/1 Inter, sans-serif; font-variant-numeric: tabular-nums; color: #fff;
    border: 3px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); text-shadow: none;
}
.basketball-scoreboard .shot-clock.warning { color: #fbbf24; border-color: #f59e0b; box-shadow: 0 0 18px rgba(245,158,11,.45), inset 0 0 12px rgba(245,158,11,.18); }
.basketball-scoreboard .shot-clock.danger { color: #fca5a5; border-color: #ef4444; box-shadow: 0 0 18px rgba(239,68,68,.55), inset 0 0 12px rgba(239,68,68,.2); }
.basketball-scoreboard .clock-controls { gap: 6px; justify-content: center; }
.basketball-scoreboard .clock-btn {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #cbd5e1; font-size: .78rem;
}
.basketball-scoreboard .clock-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.basketball-scoreboard #clock-start,
.basketball-scoreboard #clock-stop { background: var(--bbp-accent); border-color: var(--bbp-accent); color: #fff; box-shadow: 0 0 14px rgba(43,168,255,.45); }
.basketball-scoreboard .shot-clock-btn {
    padding: 5px 9px; border-radius: 999px; font: 800 .72rem Inter, sans-serif;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #cbd5e1;
}
.basketball-scoreboard .shot-clock-btn:hover { background: var(--bbp-accent); border-color: var(--bbp-accent); color: #fff; }
.basketball-scoreboard .clock-section-toggle {
    position: absolute; left: auto; z-index: 2; display: flex; align-items: center; justify-content: center;
    top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #94a3b8;
}
/* LIVE tag while the game clock runs (the page hides #clock-start inline when running) */
.basketball-scoreboard .clock-section:has(#clock-start[style*="none"])::after {
    content: "LIVE"; position: absolute; top: 14px; left: 16px;
    padding-left: 14px; font: 800 .64rem Inter, sans-serif; letter-spacing: .18em; color: #fca5a5;
    background: radial-gradient(circle at 4px 50%, #ef4444 0 3.5px, transparent 4px) no-repeat;
    animation: bbp-live 1.6s ease-in-out infinite;
}
@keyframes bbp-live { 50% { opacity: .55; } }
.basketball-scoreboard .clock-section[data-collapsed="true"] .clock-section-body { padding: 0; }

/* ---------- 3. Scoreboard: dark score band + one white key panel per team ---------- */
/* Team panels become display:contents so their parts sit on one shared grid:
   rows 1-3 = names / scores / shooting line on the dark band, rows 4-8 = keys on white. */
.basketball-scoreboard .scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto auto 16px;
    gap: 0; padding: 0; min-height: 0; flex: 0 0 auto;
}
.basketball-scoreboard .scoreboard::before {
    content: ""; grid-column: 1 / -1; grid-row: 1 / 4; border-radius: 0 0 20px 20px;
    background:
        var(--bbp-scan),
        radial-gradient(45% 90% at 14% 10%, rgba(6,182,212,.13), transparent 70%),
        radial-gradient(45% 90% at 86% 10%, rgba(249,115,22,.13), transparent 70%),
        linear-gradient(#0b1220, #070b14);
    box-shadow: 0 18px 40px -18px rgba(2,6,23,.6);
}
.basketball-scoreboard .scoreboard-team { display: contents; }
.basketball-scoreboard .scoreboard-team::before {
    content: ""; position: static; inset: auto; opacity: 1; pointer-events: none;
    grid-row: 4 / 9; margin-top: 14px;
    background: #fff; border: 1px solid var(--bbp-line); border-radius: 20px; box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.basketball-scoreboard .scoreboard-team-1::before { grid-column: 1 / 3; margin-right: 7px; }
.basketball-scoreboard .scoreboard-team-2::before { grid-column: 3 / 5; margin-left: 7px; }

.basketball-scoreboard .scoreboard-team-1 > * { grid-column: 1; }
.basketball-scoreboard .scoreboard-team-2 > * { grid-column: 4; }
.basketball-scoreboard .scoreboard-team > .team-header { grid-row: 1; }
.basketball-scoreboard .scoreboard-team > .team-score { grid-row: 2; }
.basketball-scoreboard .scoreboard-team > .team-shot-stats { grid-row: 3; }
.basketball-scoreboard .scoreboard-team > .scoring-buttons { grid-row: 4; }
.basketball-scoreboard .scoreboard-team > .miss-buttons { grid-row: 5; }
.basketball-scoreboard .scoreboard-team > .team-actions { grid-row: 6; }
.basketball-scoreboard .scoreboard-team > .timeouts-display { grid-row: 7; }
/* key rows sit inside the white panel */
.basketball-scoreboard .scoreboard-team-1 > :is(.scoring-buttons, .miss-buttons, .team-actions, .timeouts-display) { grid-column: 1 / 3; margin-left: clamp(12px, 2vw, 20px); margin-right: calc(7px + clamp(12px, 2vw, 20px)); }
.basketball-scoreboard .scoreboard-team-2 > :is(.scoring-buttons, .miss-buttons, .team-actions, .timeouts-display) { grid-column: 3 / 5; margin-right: clamp(12px, 2vw, 20px); margin-left: calc(7px + clamp(12px, 2vw, 20px)); }

/* names + fouls */
.basketball-scoreboard .scoreboard-team-1 { --team-color: var(--team1-color); }
.basketball-scoreboard .scoreboard-team-2 { --team-color: var(--team2-color); }
.basketball-scoreboard .team-header {
    display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 0;
    padding: clamp(16px, 2.4vw, 22px) 8px 0; position: relative; z-index: 1;
}
.basketball-scoreboard .team-name {
    font: 800 .74rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase;
    color: #94a3b8; min-width: 0; padding: 2px 6px; max-width: 100%; overflow-wrap: anywhere;
}
.basketball-scoreboard .team-name:focus { background: rgba(255,255,255,.08); color: #fff; }
.basketball-scoreboard .team-fouls {
    display: inline-flex; align-items: center; align-self: center; width: auto;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px; padding: 3px 4px 3px 10px; gap: 6px; font-size: .68rem;
}
.basketball-scoreboard .fouls-label { color: #64748b; font-weight: 800; letter-spacing: .14em; }
.basketball-scoreboard .fouls-count { color: #fff; font-weight: 900; font-variant-numeric: tabular-nums; }
.basketball-scoreboard .team-fouls-add-btn {
    width: 22px; height: 22px; border-radius: 50%; margin: 0;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #e2e8f0; font-size: .9rem;
}
.basketball-scoreboard .bonus-indicator {
    background: #f59e0b; color: #1c1003; border-radius: 999px; padding: 3px 7px;
    font: 900 .58rem Inter, sans-serif; letter-spacing: .12em; animation: none;
    box-shadow: 0 0 10px rgba(245,158,11,.55);
}
.basketball-scoreboard .team-fouls:has(.bonus-indicator[style*="inline"]) { border-color: rgba(245,158,11,.5); padding-right: 4px; }

/* the big numbers */
.basketball-scoreboard .team-score {
    color: #fff; font: 900 clamp(3.6rem, 15vw, 6.6rem)/1 Inter, sans-serif; font-variant-numeric: tabular-nums;
    letter-spacing: -.03em; text-align: center; margin-top: 6px; position: relative; z-index: 1;
    text-shadow: 0 0 26px rgba(255,255,255,.12);
}
.basketball-scoreboard .team-score::after {
    content: ""; display: block; height: 4px; width: 44%; margin: 10px auto 0; border-radius: 4px; background: var(--team-color);
}
/* possession: that team's name lights up and its bar glows */
.basketball-scoreboard .scoreboard:has(.possession-btn.active[data-team="1"]) .scoreboard-team-1 .team-name,
.basketball-scoreboard .scoreboard:has(.possession-btn.active[data-team="2"]) .scoreboard-team-2 .team-name { color: #fff; }
.basketball-scoreboard .scoreboard:has(.possession-btn.active[data-team="1"]) .scoreboard-team-1 .team-score::after,
.basketball-scoreboard .scoreboard:has(.possession-btn.active[data-team="2"]) .scoreboard-team-2 .team-score::after { box-shadow: 0 0 12px var(--team-color); }

/* shooting line */
.basketball-scoreboard .team-shot-stats {
    display: flex; align-items: baseline; white-space: nowrap; font-variant-numeric: tabular-nums;
    margin: 12px 0 0; padding: 0 8px clamp(16px, 2.4vw, 22px); gap: 10px;
    justify-content: center; position: relative; z-index: 1; color: #64748b; font-size: .74rem;
}
.basketball-scoreboard .team-shot-stats .shot-stat-label { margin-right: 4px; color: #64748b; font-weight: 800; letter-spacing: .1em; font-size: .64rem; }
.basketball-scoreboard .team-shot-stats .shot-stat-value { color: #e2e8f0; font-weight: 700; }
.basketball-scoreboard .team-shot-stats .shot-stat-sep { color: #334155; opacity: 1; }

/* centre column on the dark band */
.basketball-scoreboard .center-controls {
    grid-column: 2 / 4; grid-row: 1 / 4; z-index: 1; align-self: center;
    display: grid; grid-template-columns: repeat(3, 40px); grid-template-areas: "vs vs vs" "poss poss poss" "swap end undo";
    justify-content: center; align-items: center; gap: 10px 8px;
    padding: 14px clamp(4px, 1.5vw, 16px); background: transparent; min-width: 0; border: 0;
}
.basketball-scoreboard .vs-display { grid-area: vs; justify-self: center; font: 800 .7rem Inter, sans-serif; letter-spacing: .2em; color: #475569; }
.basketball-scoreboard .possession-indicator { grid-area: poss; justify-self: center; flex-direction: row; gap: 6px; }
.basketball-scoreboard .center-btn[data-action="swap-sides"] { grid-area: swap; }
.basketball-scoreboard .center-btn[data-action="end-period"] { grid-area: end; }
.basketball-scoreboard .center-controls .center-undo-btn { grid-area: undo; margin-top: 0; }
.basketball-scoreboard .center-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #cbd5e1; font-size: .85rem;
}
.basketball-scoreboard .center-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.2); color: #fff; }
.basketball-scoreboard .center-btn[data-action="end-period"] { background: var(--bbp-accent); border-color: var(--bbp-accent); color: #fff; box-shadow: 0 0 14px rgba(43,168,255,.4); }
.basketball-scoreboard .center-controls .center-undo-btn { background: #fff; border-color: #fff; color: var(--bbp-ink); }
.basketball-scoreboard .possession-label { font: 800 .6rem Inter, sans-serif; letter-spacing: .16em; color: #64748b; }
.basketball-scoreboard .possession-btn {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #64748b;
}
.basketball-scoreboard .possession-btn.active[data-team="1"] { background: var(--bbp-p1); border-color: var(--bbp-p1); color: #fff; box-shadow: 0 0 14px rgba(6,182,212,.6); }
.basketball-scoreboard .possession-btn.active[data-team="2"] { background: var(--bbp-p2); border-color: var(--bbp-p2); color: #fff; box-shadow: 0 0 14px rgba(249,115,22,.6); }

/* ---------- 4. Keys: tactile, coloured by team, little press ---------- */
.basketball-scoreboard .scoring-buttons {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: calc(14px + clamp(12px, 2vw, 20px));
}
.basketball-scoreboard .miss-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.basketball-scoreboard .scoring-buttons::before,
.basketball-scoreboard .miss-buttons::before,
.basketball-scoreboard .team-actions::before {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
    font: 800 .6rem Inter, sans-serif; letter-spacing: .16em; color: var(--bbp-muted); margin: 2px 0 1px;
    background: linear-gradient(#eef0f3, #eef0f3) right center / calc(100% - 7.5em) 1px no-repeat;
}
.basketball-scoreboard .scoring-buttons::before { content: "SCORE"; }
.basketball-scoreboard .miss-buttons::before { content: "MISSED SHOT"; margin-top: 8px; background-size: calc(100% - 9.5em) 1px; }

.basketball-scoreboard .score-btn {
    min-width: 0; padding: clamp(10px, 1.6vw, 14px) 4px; border-radius: 13px; border: 1px solid transparent;
    transition: transform .06s, box-shadow .06s;
}
.basketball-scoreboard .score-btn:active { transform: translateY(2px); box-shadow: none; }
.basketball-scoreboard .score-btn .btn-points { font: 900 clamp(1.15rem, 2.4vw, 1.45rem)/1 Inter, sans-serif; color: inherit; }
.basketball-scoreboard .score-btn .btn-label { font: 800 .6rem Inter, sans-serif; letter-spacing: .14em; color: inherit; opacity: .72; margin-top: 4px; }
/* team 1 = cyan family */
.basketball-scoreboard .scoreboard-team-1 .score-btn-1 { background: #ecfeff; color: #0e7490; box-shadow: 0 2px 0 #a5f3fc; }
.basketball-scoreboard .scoreboard-team-1 .score-btn-2 { background: #cffafe; color: #0e7490; box-shadow: 0 2px 0 #67e8f9; }
.basketball-scoreboard .scoreboard-team-1 .score-btn-3 { background: var(--bbp-p1); color: #fff; box-shadow: 0 2px 0 #0e7490; }
/* team 2 = orange family */
.basketball-scoreboard .scoreboard-team-2 .score-btn-1 { background: #fff7ed; color: #c2410c; box-shadow: 0 2px 0 #fed7aa; }
.basketball-scoreboard .scoreboard-team-2 .score-btn-2 { background: #ffedd5; color: #c2410c; box-shadow: 0 2px 0 #fdba74; }
.basketball-scoreboard .scoreboard-team-2 .score-btn-3 { background: var(--bbp-p2); color: #fff; box-shadow: 0 2px 0 #c2410c; }
.basketball-scoreboard .score-btn:hover { filter: brightness(.97); border-color: transparent; }

.basketball-scoreboard .miss-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 8px 4px; border-radius: 11px; border: 1px solid #eceae4; background: #fafaf9;
    color: #475569; font: 700 .7rem Inter, sans-serif; letter-spacing: .06em; box-shadow: 0 2px 0 #e7e5e4;
    transition: transform .06s, box-shadow .06s;
}
.basketball-scoreboard .miss-btn i { color: #ef4444; opacity: 1; }
.basketball-scoreboard .miss-btn:hover { border-style: solid; background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.basketball-scoreboard .miss-btn:active { transform: translateY(2px); box-shadow: none; }

.basketball-scoreboard .team-actions {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); gap: 8px; margin-top: 4px; flex-wrap: nowrap;
}
.basketball-scoreboard .team-actions::before { content: "TEAM"; margin-top: 8px; background-size: calc(100% - 4.5em) 1px; }
.basketball-scoreboard .action-btn {
    display: inline-flex; align-items: center;
    justify-content: center; gap: 6px; padding: 9px 4px; border-radius: 11px; min-width: 0;
    background: #f4f6f9; border: 1px solid transparent; color: #1e293b; font: 800 .74rem Inter, sans-serif;
    box-shadow: 0 2px 0 rgba(15,23,42,.10); transition: transform .06s, box-shadow .06s;
}
.basketball-scoreboard .action-btn:active { transform: translateY(2px); box-shadow: none; }
.basketball-scoreboard .action-btn:hover { border-color: transparent; background: #eef1f5; color: #0f172a; }
.basketball-scoreboard .action-btn[data-action="undo"] { background: var(--bbp-ink); color: #fff; box-shadow: 0 2px 0 #000; }
.basketball-scoreboard .action-btn[data-action="timeout"] { background: #fffbeb; color: #b45309; box-shadow: 0 2px 0 #fde68a; }
.basketball-scoreboard .action-btn-pro { background: #fff; border: 1px solid #ebe5da; color: #475569; box-shadow: 0 2px 0 #ebe5da; }
.basketball-scoreboard .action-btn-pro::after {
    content: "\f023"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .55rem; color: #94a3b8;
}
.basketball-scoreboard .action-btn-pro:hover { color: #0f172a; background: #fdfbf7; border-color: #cfc6b4; }

.basketball-scoreboard .timeouts-display {
    display: flex; align-items: center;
    margin-top: 14px; justify-content: flex-start; gap: 8px;
    font: 800 .6rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--bbp-muted);
}
.basketball-scoreboard .timeouts-remaining { color: #0f172a; font-size: .82rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* ---------- 5. Period strip = the scoreboard's dark twin ---------- */
.basketball-scoreboard .period-progress {
    margin-top: 14px; padding: 12px clamp(12px, 2.4vw, 20px); border: 0; border-radius: 18px;
    background: var(--bbp-scan), #0b1220; box-shadow: 0 14px 30px -18px rgba(2,6,23,.6);
}
.basketball-scoreboard .period-dots { gap: 8px; flex-wrap: wrap; }
.basketball-scoreboard .period-dot {
    min-width: 54px; text-align: center; padding: 8px 12px; border-radius: 999px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #64748b;
    font: 800 .76rem Inter, sans-serif; letter-spacing: .1em;
}
.basketball-scoreboard .period-dot.completed { background: rgba(255,255,255,.09); color: #cbd5e1; }
.basketball-scoreboard .period-dot.completed::after { content: " \2713"; color: #22c55e; }
.basketball-scoreboard .period-dot.current {
    background: var(--bbp-accent); border-color: var(--bbp-accent); color: #fff; box-shadow: 0 0 16px rgba(43,168,255,.5);
}

/* ---------- 6. Inline timeline as a white panel ---------- */
.basketball-scoreboard .bb-inline-timeline { background: transparent; border: 0; padding: 14px 0 0; }
.basketball-scoreboard .bb-inline-timeline .match-timeline {
    max-width: none; background: #fff; border: 1px solid var(--bbp-line); border-radius: 20px;
    padding: clamp(14px, 2.4vw, 22px); color: #0f172a;
}
.basketball-scoreboard .match-timeline-header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.basketball-scoreboard .match-timeline-title { font: 800 .68rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--bbp-muted); }
.basketball-scoreboard .match-timeline-title i { color: var(--bbp-accent); margin-right: 4px; }
.basketball-scoreboard .match-timeline-info { font-size: .82rem; font-weight: 600; color: #334155; }
.basketball-scoreboard .timeline-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.basketball-scoreboard .timeline-filter-btn {
    flex: 0 0 auto; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
    padding: 7px 12px; border-radius: 999px; border: 1px solid #e2dccf; background: #fff; color: #0f172a; font: 600 .78rem Inter, sans-serif;
}
.basketball-scoreboard .timeline-filter-btn.active { background: var(--bbp-ink); border-color: var(--bbp-ink); color: #fff; }
.basketball-scoreboard .timeline-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr)); gap: 8px; margin-bottom: 12px; }
.basketball-scoreboard .timeline-stat { background: #fafbfc; border: 1px solid #eef0f3; border-radius: 14px; padding: 10px 12px; }
.basketball-scoreboard .timeline-stat-value { font: 900 1.15rem Inter, sans-serif; font-variant-numeric: tabular-nums; color: #0f172a; }
.basketball-scoreboard .timeline-stat-label { font: 800 .6rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--bbp-muted); margin-top: 2px; }
.basketball-scoreboard .timeline-events { display: grid; gap: 0; }
.basketball-scoreboard .timeline-event { padding: 10px 2px; border-top: 1px solid #f1efe9; background: transparent; border-radius: 0; }
.basketball-scoreboard .timeline-event-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.basketball-scoreboard .timeline-event-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.basketball-scoreboard .timeline-event-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #f4f6f9; font-size: .9rem; flex: 0 0 auto; }
.basketball-scoreboard .timeline-event-label { font-weight: 700; font-size: .88rem; }
.basketball-scoreboard .timeline-event-meta { display: flex; gap: 8px; align-items: center; font-size: .72rem; color: var(--bbp-muted); }
.basketball-scoreboard .timeline-event-badge { background: #f4f6f9; color: #475569; border-radius: 999px; padding: 2px 8px; font-weight: 700; font-size: .64rem; letter-spacing: .06em; }
.basketball-scoreboard .timeline-event-score { font: 900 .95rem Inter, sans-serif; font-variant-numeric: tabular-nums; color: #0f172a; background: #0b1220; color: #fff; border-radius: 8px; padding: 4px 8px; flex: 0 0 auto; }

/* timeline.css is written for a dark surface: undo its rail, dots, dark stat strip and white text */
.basketball-scoreboard .match-timeline-header { border-bottom: 1px solid #f1efe9; padding-bottom: 10px; }
.basketball-scoreboard .timeline-events { padding-left: 0; }
.basketball-scoreboard .timeline-events::before,
.basketball-scoreboard .timeline-event::before { content: none; display: none; }
.basketball-scoreboard .timeline-event { padding-left: 2px; border-bottom: 0; }
.basketball-scoreboard .timeline-event-main { flex: 1 1 auto; }
.basketball-scoreboard .timeline-event-icon { margin-right: 0; }
.basketball-scoreboard .timeline-event-label { color: #0f172a; }
.basketball-scoreboard .timeline-event-meta { margin-top: 0; }
.basketball-scoreboard .timeline-event-time { font-family: Inter, sans-serif; }
.basketball-scoreboard .timeline-event-badge { text-transform: uppercase; }
.basketball-scoreboard .timeline-stats { background: transparent; padding: 0; border-radius: 0; }
.basketball-scoreboard .timeline-stat { text-align: left; }
.basketball-scoreboard .timeline-filter-icon { margin: 0; }
@media (max-width: 640px) {
    .basketball-scoreboard .bb-inline-timeline .match-timeline { margin: 0; border-radius: 20px; padding: 14px; }
    .basketball-scoreboard .match-timeline-header { flex-direction: row; align-items: baseline; gap: 10px; }
    .basketball-scoreboard .timeline-filters { padding-bottom: 0; }
    .basketball-scoreboard .timeline-event { padding-left: 2px; }
    .basketball-scoreboard .timeline-event-header { flex-direction: row; align-items: center; gap: 10px; }
    .basketball-scoreboard .timeline-event-score { align-self: center; }
}

/* ---------- 7. Phone: side-by-side teams, centre controls become one row on the dark band ---------- */
@media (max-width: 768px) {
    .basketball-scoreboard .clock-section-body {
        display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; padding: 16px 12px 12px;
    }
    .basketball-scoreboard .game-clock-container,
    .basketball-scoreboard .shot-clock-container { flex-direction: column; gap: 6px; width: auto; flex-wrap: nowrap; }
    .basketball-scoreboard .game-clock { font-size: clamp(2.6rem, 12.5vw, 3.4rem); }
    .basketball-scoreboard .clock-label { letter-spacing: .12em; font-size: .58rem; }
    .basketball-scoreboard .shot-clock { font-size: 1.45rem; }

    .basketball-scoreboard .scoreboard {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto auto auto auto auto auto 12px;
    }
    .basketball-scoreboard .scoreboard::before { grid-row: 1 / 5; }
    .basketball-scoreboard .scoreboard-team-1 > * { grid-column: 1; }
    .basketball-scoreboard .scoreboard-team-2 > * { grid-column: 2; }
    .basketball-scoreboard .scoreboard-team-1 > :is(.scoring-buttons, .miss-buttons, .team-actions, .timeouts-display) { grid-column: 1; margin-left: 12px; margin-right: calc(5px + 12px); }
    .basketball-scoreboard .scoreboard-team-2 > :is(.scoring-buttons, .miss-buttons, .team-actions, .timeouts-display) { grid-column: 2; margin-left: calc(5px + 12px); margin-right: 12px; }
    .basketball-scoreboard .scoreboard-team::before { grid-row: 5 / 10; margin-top: 12px; }
    .basketball-scoreboard .scoreboard-team-1::before { grid-column: 1; margin-right: 5px; }
    .basketball-scoreboard .scoreboard-team-2::before { grid-column: 2; margin-left: 5px; }
    .basketball-scoreboard .scoreboard-team > .scoring-buttons { grid-row: 5; margin-top: 24px; gap: 6px; }
    .basketball-scoreboard .scoreboard-team > .miss-buttons { grid-row: 6; gap: 6px; }
    .basketball-scoreboard .scoreboard-team > .team-actions { grid-row: 7; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)); }
    .basketball-scoreboard .scoreboard-team > .timeouts-display { grid-row: 8; }
    .basketball-scoreboard .scoreboard-team-1,
    .basketball-scoreboard .scoreboard-team-2 { border: 0; }

    .basketball-scoreboard .team-header { padding-top: 14px; gap: 6px; }
    .basketball-scoreboard .team-score { font-size: clamp(3.4rem, 17vw, 4.6rem); margin-top: 2px; }
    .basketball-scoreboard .team-score::after { margin-top: 8px; }
    /* shooting line stacks into three little columns */
    .basketball-scoreboard .team-shot-stats {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; white-space: normal;
        padding: 0 4px 14px; margin-top: 10px; text-align: center; font-size: .6rem; line-height: 1.25;
    }
    .basketball-scoreboard .team-shot-stats .shot-stat-sep { display: none; }
    .basketball-scoreboard .team-shot-stats .shot-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .basketball-scoreboard .team-shot-stats .shot-stat-label { margin: 0; font-size: .56rem; }

    .basketball-scoreboard .center-controls {
        grid-column: 1 / -1; grid-row: 4; align-self: stretch;
        grid-template-columns: 40px 40px auto 40px; grid-template-areas: "swap end poss undo";
        justify-content: center; gap: 10px; padding: 4px 12px 16px;
        border: 0; border-top: 1px solid rgba(255,255,255,.06); margin: 0 14px; padding-top: 12px; flex-direction: row;
    }
    .basketball-scoreboard .vs-display { display: none; }
    .basketball-scoreboard .score-btn { padding: 11px 2px; border-radius: 12px; min-width: 0; }
    .basketball-scoreboard .score-btn .btn-points { font-size: 1.2rem; }
    .basketball-scoreboard .scoring-buttons::before,
    .basketball-scoreboard .miss-buttons::before,
    .basketball-scoreboard .team-actions::before { font-size: .55rem; }
    .basketball-scoreboard .miss-btn { padding: 8px 2px; font-size: .64rem; letter-spacing: .02em; }
    .basketball-scoreboard .action-btn { padding: 9px 2px; }
    .basketball-scoreboard .timeouts-display { flex-wrap: wrap; row-gap: 6px; }
    .basketball-scoreboard .nm-to-pips { margin-left: 0; flex-basis: 100%; }
    .basketball-scoreboard .nm-to-pips i { flex: 1 1 0; max-width: 22px; }
    .basketball-scoreboard .clock-section-body { padding-top: 38px; }
    .basketball-scoreboard .clock-section-toggle { top: 8px; right: 8px; }
}

@media (max-width: 380px) {
    .basketball-scoreboard .miss-buttons::before { content: "MISS"; background-size: calc(100% - 5em) 1px; }
}

/* ---------- 8. Phone header: icons only, every tool button in one row, no sideways scroll ---------- */
@media (max-width: 720px) {
    .basketball-scoreboard .match-header-right {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        gap: 5px; overflow: visible; padding: 2px 0 3px;
    }
    .basketball-scoreboard .match-header-right > :first-child { margin-left: 0; }
    .basketball-scoreboard .match-header .match-btn {
        width: auto; min-width: 0; height: 40px; padding: 0; justify-content: center; gap: 0; position: relative;
    }
    .basketball-scoreboard .match-header .match-btn::after { content: none; }
    .basketball-scoreboard .match-header .match-btn i { font-size: .9rem; }
    /* "New" tag shrinks to a dot on the corner; its text stays in the DOM */
    .basketball-scoreboard .match-header #share-btn .share-btn-badge {
        position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; padding: 0;
        font-size: 0; line-height: 0; overflow: hidden; border: 2px solid var(--bbp-ink);
    }
}