@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700;1,800&display=swap");

/* © 2026 Seiaura™. All rights reserved. */

/* =====================================================
   COURTSIDE LOOK for every live scoreboard
   Loaded LAST on team-scoring.html and local-scoreboard.html.

   One layout for all 8 sports, two colour themes:
     GREEN  (default)  forest green board, mint accents
     MAROON            maroon board, gold accents
   The colours come from the --t-* variables in
   team-scoring-themes.css (the Green / Maroon switch), so the
   layout never changes, only the colours do.
   Remove this one file to go back to the old look.
===================================================== */

body.team-scoring-page,
body.ls-page {
    --sp-font: "Barlow Condensed", "Oswald", "Arial Narrow", Impact, sans-serif;
    --sp-1: var(--t-board-1, #145c42);
    --sp-2: var(--t-board-2, #0b3d2c);
    --sp-accent: var(--t-accent, #6fe0b0);
    --sp-ink: var(--t-board-ink, #ffffff);
    --sp-court: rgba(255, 255, 255, .13);
}

/* ---------- the big scoreboard: the court picture is the background ---------- */

body.team-scoring-page .score-hero,
body.ls-page .ls-board {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: var(--sp-2);              /* shown while the picture loads */
    box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .6);
    color: var(--sp-ink);
}

body.team-scoring-page .score-hero {
    padding: 26px 28px 24px;
}

/* layer 1: the court (avatars/court-green.webp). Maroon theme tints the same picture maroon. */
body.team-scoring-page .score-hero::before,
body.ls-page .ls-board::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("avatars/court-green.webp") center / cover no-repeat;
    pointer-events: none;
}

body.team-scoring-page.sb-theme-maroon .score-hero::before {
    filter: hue-rotate(205deg) saturate(.85) brightness(.85);
}

/* layer 2: a soft shade at both ends so the names stay easy to read */
body.team-scoring-page .score-hero::after,
body.ls-page .ls-board::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
    height: auto;
    margin: 0;
    transform: none;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .28));
    pointer-events: none;
}

body.ls-page .ls-board > * { position: relative; z-index: 1; }

body.team-scoring-page .score-hero h1,
body.team-scoring-page .score-team strong {
    font-family: var(--sp-font);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
}

body.team-scoring-page .score-hero h1 { font-size: clamp(32px, 6vw, 50px); line-height: 1; }
body.team-scoring-page .score-team strong { font-size: clamp(26px, 5vw, 40px); line-height: 1.05; }

body.team-scoring-page .score-eyebrow,
body.team-scoring-page .score-team > span {
    font-family: var(--sp-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--sp-ink);
    opacity: .95;
}

body.team-scoring-page .score-team-score {
    font-family: var(--sp-font);
    font-style: italic;
    font-weight: 800;
    font-size: clamp(54px, 12vw, 84px);
    line-height: .95;
    color: var(--sp-ink);
    text-shadow: none;
}

body.team-scoring-page .score-vs {
    font-family: var(--sp-font);
    font-weight: 800;
    font-style: italic;
    background: var(--sp-accent);
    color: var(--sp-2);
    border: 0;
    border-radius: 8px;
    transform: skewX(-10deg);
}

body.team-scoring-page .score-match-id {
    font-family: var(--sp-font);
    font-weight: 800;
    letter-spacing: .12em;
    background: var(--sp-accent);
    color: var(--sp-2);
    border-radius: 6px;
    padding: 4px 10px;
}

body.team-scoring-page .score-hero-meta span {
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .32);
    font-family: var(--sp-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sp-ink);
}

/* ---------- cards ---------- */

body.team-scoring-page .score-card,
body.team-scoring-page .side-card {
    border-radius: 16px;
}

body.team-scoring-page .side-card h3 {
    font-family: var(--sp-font);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
}

/* ---------- cricket: score strip + ribbon follow the theme ---------- */

body.team-scoring-page .cricket-score-strip {
    background: linear-gradient(135deg, var(--sp-1), var(--sp-2));
    border-radius: 14px;
}

body.team-scoring-page .cricket-score-side strong {
    font-family: var(--sp-font);
    font-style: italic;
    font-weight: 800;
}

body.team-scoring-page .broadcast-ribbon {
    background: var(--sp-2);
    border-left: 4px solid var(--sp-accent);
    border-radius: 8px;
}

body.team-scoring-page .broadcast-ribbon .equation { color: var(--sp-ink); font-weight: 700; }

body.team-scoring-page .innings-tag {
    background: var(--sp-accent);
    color: var(--sp-2);
    border-radius: 4px;
    font-weight: 800;
}

/* ---------- racket sports board (local-scoreboard.html) ---------- */

body.ls-page .ls-board-top b { color: var(--sp-accent); }

body.ls-page .ls-points {
    font-family: var(--sp-font);
    font-style: italic;
    font-weight: 800;
    color: var(--sp-ink);
    text-shadow: none;
}

body.ls-page .ls-side.won .ls-points { color: var(--sp-accent); }

body.ls-page .ls-side {
    font-family: var(--sp-font);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ---------- phones ---------- */

@media (max-width: 720px) {
    body.team-scoring-page .score-hero { padding: 22px 18px 20px; border-radius: 16px; }
}

@media (max-width: 600px) {
    body.team-scoring-page .score-nav-inner { min-height: 60px; padding: 0 12px; gap: 8px; }
    body.team-scoring-page .score-brand { gap: 8px; min-width: 0; }
    body.team-scoring-page .score-brand-mark { width: 36px; height: 36px; flex: 0 0 auto; }
    body.team-scoring-page .score-brand strong { font-size: 15px; white-space: nowrap; }
    body.team-scoring-page .score-brand span { display: none; }
    body.team-scoring-page .score-back { padding: 9px 11px; border-radius: 10px; font-size: 13px; white-space: nowrap; }
    body.team-scoring-page .score-back + .score-back, body.team-scoring-page button.score-back { margin-right: 4px !important; }
}