/* =============================================================================
   High School Football Scoreboard
   Extracted verbatim from the inline <style> in football-scores.php so the
   same scoreboard can render on the landing page too. Do not fork these
   rules per page - both consumers read this one file.
   ============================================================================= */

/* ─── Football Scores — TV Broadcast Scoreboard ───────────────── */

/* ── Hero ── */
.fb-page-hero {
    background: linear-gradient(175deg, #020710 0%, #050e20 55%, #030a14 100%);
    color: #fff;
    padding: 3.5rem 0 2.5rem;
    position: relative;
    overflow: hidden;
}
/* Yard-line grid texture */
.fb-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg,
            transparent 0, transparent calc(10% - 1px),
            rgba(255,255,255,.018) calc(10% - 1px), rgba(255,255,255,.018) 10%),
        radial-gradient(ellipse 80% 70% at 14% 50%, rgba(0,200,100,.07) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 90% 15%, rgba(245,166,35,.045) 0%, transparent 60%);
    pointer-events: none;
}
/* CRT scanlines */
.fb-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.07) 0px, rgba(0,0,0,.07) 1px,
        transparent 1px, transparent 4px);
    pointer-events: none;
}
.fb-page-hero .container { position: relative; z-index: 1; }

.fb-hero-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    text-align: center;
}
.fb-hero-logo {
    height: 72px; max-width: 120px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(0,232,122,.28));
}
.fb-hero-title {
    font-size: clamp(24px, 4.5vw, 44px);
    font-weight: 900;
    letter-spacing: 4px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 40px rgba(0,200,100,.18), 0 2px 4px rgba(0,0,0,.7);
    margin: 0;
    line-height: 1.1;
}
.fb-hero-sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 6px;
    color: #00e87a;
    text-transform: uppercase;
    margin-top: 8px;
}
/* Gold accent rule */
.fb-hero-divider {
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(245,166,35,.85), transparent);
    margin: 11px auto 0;
    border-radius: 2px;
}

/* ── Broadcast status bar ── */
.fb-refresh-bar {
    background: #010510;
    border-bottom: 1px solid rgba(0,200,100,.1);
    padding: 7px 20px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    /* Was #2a4260 = 1.99:1 on this bar - a label nobody could read. */
    color: #7a92b0;
    font-weight: 600;
    letter-spacing: .04em;
}
.fb-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(220,30,30,.1);
    border: 1px solid rgba(220,30,30,.28);
    color: #ff4444;
    padding: 2px 10px 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.5;
}
.fb-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ff3333;
    box-shadow: 0 0 6px rgba(255,50,50,.8);
    animation: fbPulse 1.2s ease-in-out infinite;
    display: inline-block;
    flex-shrink: 0;
}
@keyframes fbPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .28; transform: scale(.65); }
}
.fb-countdown-wrap { color: #7a92b0; }   /* was #2a4260, 1.99:1 */
.fb-countdown { color: #00e87a; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px; }

/* ── Scoreboard section ── */
.fb-scores-section {
    background: linear-gradient(180deg, #010610 0%, #020710 100%);
    min-height: 300px;
    padding: 32px 0 60px;
}

/* ── Day block ── */
.fb-day-block {
    max-width: 1160px;
    margin: 0 auto 20px;
    background: #060c1a;
    border: 1px solid rgba(14,48,108,.5);
    border-radius: 3px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.55),
        0 6px 28px rgba(0,0,0,.6),
        0 20px 55px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.028);
}
.fb-day-title {
    padding: 11px 18px 11px 13px;
    font-size: 12px;
    font-weight: 800;
    color: #f5a623;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(90deg, rgba(245,166,35,.1) 0%, rgba(245,166,35,.03) 38%, transparent 70%);
    border-bottom: 1px solid rgba(14,48,108,.4);
    border-left: 3px solid #f5a623;
    display: flex;
    align-items: center;
    gap: 9px;
}
.fb-day-title::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #f5a623;
    box-shadow: 0 0 9px rgba(245,166,35,.9);
    flex-shrink: 0;
}
.fb-sponsor-line {
    padding: 5px 18px;
    font-size: 10px;
    color: #c89030;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(200,144,48,.055);
    border-bottom: 1px solid rgba(14,48,108,.3);
}
.fb-sponsor-line::before {
    content: 'PRESENTED BY  ';
    color: #2a4060;
    font-size: 9px;
    letter-spacing: .5px;
    font-weight: 600;
}

/* ── Desktop score table ── */
.fb-scores-tbl {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
/* Column widths via colgroup col elements */
.fb-scores-tbl .col-team  { width: 23%; }
.fb-scores-tbl .col-q     { width: 4.6%; }
.fb-scores-tbl .col-final { width: 7.8%; }
.fb-scores-tbl .col-vs    { width: 3%; }

.fb-scores-tbl th {
    padding: 8px 6px;
    font-size: 9px;
    font-weight: 800;
    /* Was #1e3658. At 9-10px on this background the column headers measured
       ~2:1 - present in the markup, absent to the eye. */
    color: #7891b2;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: rgba(0,6,20,.65);
    border-bottom: 1px solid rgba(10,38,95,.4);
    text-align: center;
    cursor: default;
    user-select: none;
    white-space: nowrap;
}
.fb-scores-tbl th.col-team {
    text-align: left;
    padding-left: 18px;
    color: #7891b2;   /* was #2a4468, 2.03:1 */
    letter-spacing: .5px;
    font-size: 10px;
}
.fb-scores-tbl th.col-final { color: #b08829; }   /* was #7a5814, 3.08:1 */
.fb-scores-tbl th.col-vs    { color: transparent; }
.fb-scores-tbl th.sortable  { cursor: pointer; transition: color .15s; }
.fb-scores-tbl th.sortable:hover { color: #4a6ea0; }
.fb-scores-tbl th.sortable.asc::after  { content: ' ▲'; font-size: 7px; opacity: .7; }
.fb-scores-tbl th.sortable.desc::after { content: ' ▼'; font-size: 7px; opacity: .7; }

.fb-scores-tbl td {
    padding: 14px 6px;
    border-bottom: 1px solid rgba(6,22,60,.6);
    text-align: center;
    font-size: 13px;
    /* Was #3e6080 - 2.9:1 on these rows. Quarter-by-quarter scores are the
       detail people lean in for; they have to survive being looked at. */
    color: #7f93ad;
    font-variant-numeric: tabular-nums;
    transition: color .2s, background .2s;
}
.fb-scores-tbl .cell-team {
    text-align: left;
    padding-left: 18px;
    font-weight: 800;
    color: #c0d4ea;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The money shot — FINAL score */
.fb-scores-tbl .cell-final {
    font-weight: 900;
    font-size: 30px;
    color: #00e87a;
    letter-spacing: -1px;
    line-height: 1;
    padding: 10px 10px;
    text-shadow: 0 0 22px rgba(0,232,122,.38);
}
.fb-scores-tbl .cell-vs {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    /* AT / VS is the only thing on the row saying which side is at home, so it
       has to be legible. #0e2240 measured 1.26:1 - invisible. */
    color: #7189a5;
    border-left: 1px solid rgba(10,38,95,.28);
    border-right: 1px solid rgba(10,38,95,.28);
}
/* Row banding */
.fb-scores-tbl tbody tr { background: rgba(2,7,20,.8); }
.fb-scores-tbl tbody tr:nth-child(even) { background: rgba(4,10,28,.65); }
.fb-scores-tbl tbody tr:hover td { background: rgba(0,50,120,.08); }
.fb-scores-tbl tbody tr:last-child td { border-bottom: none; }

/* Winner cells — gold glow */
.fb-scores-tbl .cell-final.fb-w { color: #ffd700; text-shadow: 0 0 18px rgba(255,215,0,.5), 0 0 36px rgba(255,200,0,.2); }
.fb-scores-tbl .cell-team.fb-w  { color: #ffffff; }
/* Loser cells - DIMMER THAN THE WINNER, NOT INVISIBLE.

   These were #263a50 for the name and #0d1c32 for the score and quarters, on
   rows that are rgba(2,7,20,.8) and rgba(4,10,28,.65). That is 1.68:1 for the
   name and lower still for the score - near-black on near-black. The intent was
   "recede into the dark"; the effect was that the losing team's name and final
   score were both gone. Half of every result on the board was unreadable, which
   is not a de-emphasis, it is missing data - a scoreboard where you cannot see
   who played or what they scored.

   The winner still leads clearly: white and gold with a glow, against these
   muted blues. Each clears 4.5:1 on both row bands.

   (assets/css/livecam-bg.css raises these to plain white when the live camera
   is behind the board, where the moving footage needs more separation still.
   That rule stays and still wins there.) */
.fb-scores-tbl .cell-final.fb-l { color: #8fa6c2; text-shadow: none; }
.fb-scores-tbl .cell-team.fb-l  { color: #c6d3e2; }
.fb-scores-tbl td.cell-q.fb-l   { color: #7f93ad; }

/* ── Score-change animation: 3D ROTATING DIGIT CARD ──────────────────────────
   Each character is a small upright card that rotates around its VERTICAL centre
   axis, as if on an invisible pole running top-to-bottom through the middle of
   the digit. Half a turn per change: the old face turns away toward edge-on and
   the new face continues round into place.

   WHY THE EARLIER VERSION LOOKED LIKE A SQUISH
   It was already a real rotateY with no scale anywhere. The problem was the
   PERSPECTIVE RATIO. Perspective distortion scales with
   element_width / perspective_distance, and a ~18px glyph under
   `perspective: 900px` is a ratio near 1:50, contributing only about 2% of
   trapezoidal distortion. What remained visible was the cos(angle) narrowing,
   which is geometrically almost identical to scaleX - hence it read as the font
   compressing rather than a card turning.

   The fix is a perspective distance that is a small MULTIPLE of the card, not
   fifty times it. It is set in `em` so it tracks font-size: at the 30px score
   font, 3em is ~90px against a ~26px card, roughly 3.5:1. That produces real
   foreshortening - the approaching edge is drawn visibly taller than the
   receding edge, so the card turns instead of flattening.

   There is deliberately NO scaleX/scaleY, no width or max-width animation, no
   font-stretch, no letter-spacing change, no clip-path and no opacity fade
   anywhere in this effect. All apparent narrowing comes from rotateY under
   perspective.

   NO LAYOUT SHIFT: .fb-digit__static holds the FINAL character in normal flow,
   so the cell is already at its final width on the first frame. During a turn it
   is only made invisible, never removed, and the rotating card is absolutely
   positioned over it. The stage is never resized and only the inner card
   rotates, so nothing in the table can reflow.
   -------------------------------------------------------------------------- */

/* STAGE - owns the perspective. Must be the PARENT of the rotating card; putting
   perspective on the rotating element itself would flatten the effect. */
.fb-digit {
    position: relative;
    display: inline-block;
    text-align: center;
    perspective: 3em;
    -webkit-perspective: 3em;
    perspective-origin: 50% 50%;
}
/* Defines the stage's box from the real glyph metrics, so the card matches the
   scoreboard's natural digit width exactly and nothing shifts. */
.fb-digit__static { display: inline-block; }
.fb-digit--flip > .fb-digit__static { visibility: hidden; }

/* CARD - the only thing that rotates. Sized slightly larger than the glyph box
   so it reads as a physical panel with edges rather than bare turning text.
   It is absolutely positioned, so this cannot affect layout. */
.fb-digit__card {
    position: absolute;
    top: -0.10em;
    bottom: -0.10em;
    left: -0.16em;
    right: -0.16em;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* Deliberately NO will-change. A full-board refresh turns every score at
       once, which would promote several hundred elements to their own
       compositor layers. These animations are short and transform-only, so the
       browser composites them fine without the hint. */
}

/* --fb-fd is this cell's offset in the diagonal sweep, set by the updater so
   the board updates as a wave from the top-left score to the bottom-right one.
   Defaults to 0s, so a single changed score turns immediately.

   fill-mode `both` also means a cell waiting its turn is held at 0deg, showing
   its OLD character. The number therefore never pops to its new value before
   turning to it. */
.fb-digit--flip > .fb-digit__card {
    animation: fbSpin .65s cubic-bezier(.45,.05,.55,.95) var(--fb-fd, 0s) both;
}

/* One continuous 180deg rotation of a single two-sided card. This is what keeps
   the midpoint smooth: there is no discrete text swap to flicker. The old face
   travels 0deg -> 90deg (edge-on) and the new face carries on from -90deg ->
   0deg as one unbroken motion, with backface-visibility doing the handover. */
@keyframes fbSpin {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

/* FACES - two layered panels, front and back of the same card. */
.fb-digit__face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.fb-digit__face--out { transform: rotateY(0deg); }
.fb-digit__face--in  { transform: rotateY(180deg); }

/* Panel surface, applied only while turning so the scoreboard's resting
   appearance is untouched. The faint gradient gives the card a surface to catch
   the light. */
.fb-digit--flip > .fb-digit__card > .fb-digit__face {
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.07));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

/* LIGHTING carrier. The brightness dip as the card passes edge-on is what sells
   the depth, but `filter` must NOT sit on the same element as
   backface-visibility: a filter makes the element a grouping/rendering context,
   which can defeat backface culling and let both faces paint at once. So the
   filter lives on this inner span, one level below the face, where it cannot
   interfere. This span is flat (no preserve-3d), so the filter is free there.
   Subtle on purpose - it must not read as a flash or a fade. */
.fb-digit__lit { display: inline-block; }
.fb-digit--flip .fb-digit__lit {
    animation: fbCardLight .65s cubic-bezier(.45,.05,.55,.95) var(--fb-fd, 0s) both;
}
@keyframes fbCardLight {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(.66); }
    100% { filter: brightness(1); }
}
@keyframes fbScoreGlow {
    0%   { background: rgba(0,255,120,.2); color: #00ff88; text-shadow: 0 0 18px rgba(0,255,140,.9), 0 0 40px rgba(0,255,140,.4); }
    70%  { background: rgba(0,200,100,.06); }
    100% { background: transparent; }
}
.fb-score-changed { animation: fbScoreGlow 2.8s ease forwards; border-radius: 4px; }

/* ── Mobile game cards ── */
.fb-mobile-scores { display: none; }
.fb-game-card {
    padding: 12px 16px 10px;
    border-bottom: 1px solid rgba(6,20,55,.6);
    background: rgba(2,7,20,.8);
}
.fb-game-card:nth-child(even) { background: rgba(4,10,28,.65); }
.fb-game-card:last-child { border-bottom: none; }
.fb-game-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}
.fb-game-card-row.away {
    border-bottom: 1px solid rgba(6,20,55,.4);
    padding-bottom: 9px;
    margin-bottom: 5px;
}
.fb-gc-atvs {
    font-size: 8px;
    color: #0e1e34;
    font-weight: 800;
    letter-spacing: 1px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.fb-gc-team {
    flex: 1;
    font-weight: 800;
    color: #b0c8e0;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .04em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fb-gc-final {
    font-weight: 900;
    font-size: 30px;
    color: #00e87a;
    text-shadow: 0 0 14px rgba(0,232,122,.38);
    min-width: 50px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
    line-height: 1;
    flex-shrink: 0;
}
.fb-gc-winner .fb-gc-final { color: #ffd700; text-shadow: 0 0 14px rgba(255,215,0,.5); }
.fb-gc-winner .fb-gc-team  { color: #ffffff; }
.fb-gc-loser  .fb-gc-team  { color: #1e3050; }
.fb-gc-loser  .fb-gc-final { color: #0a1628; text-shadow: none; }
.fb-gc-quarters { font-size: 9px; color: #1e3048; padding: 3px 0 0 28px; letter-spacing: 1.5px; font-variant-numeric: tabular-nums; }

/* ── Empty state ── */
.fb-no-games { text-align: center; padding: 80px 20px; color: #1a3050; }
.fb-no-games-icon { font-size: 48px; margin-bottom: 16px; display: block; opacity: .32; }
.fb-no-games-text { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

/* ── Footer credit ── */
.fb-footer-credit {
    max-width: 1160px; margin: 0 auto; text-align: center;
    font-size: 10px; color: #1a3050; padding: 0 16px;
    letter-spacing: .1em; text-transform: uppercase;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .fb-hero-logo  { height: 50px; }
    .fb-hero-title { font-size: 20px; letter-spacing: 2px; }
    .fb-hero-sub   { font-size: 10px; letter-spacing: 3px; }
    .fb-day-block  { margin-bottom: 14px; }
    .fb-day-title  { padding: 9px 12px; font-size: 11px; letter-spacing: 2px; }
    .fb-scores-tbl { display: none; }
    .fb-mobile-scores { display: block; }
    .fb-scores-section { padding: 16px 0 40px; }
    .fb-refresh-bar { gap: 10px; font-size: 10px; }
    .fb-gc-final { font-size: 26px; }
    .fb-gc-team  { font-size: 15px; }

    /* ── Pair the two teams of a matchup ──────────────────────────────────────
       Both lines used to be the same size with a divider between them, so four
       equal rows read as four separate results rather than two matchups. The
       second (home) line is now smaller and indented, which groups each pair
       under its away team, and the divider moved from inside the pair to between
       pairs so the split falls where the meaning changes. */
    .fb-game-card {
        padding: 11px 16px 10px;
        border-bottom: 2px solid rgba(10,30,74,.85);
    }
    .fb-game-card-row.away {
        border-bottom: none;      /* was splitting the pair apart */
        padding-bottom: 1px;
        margin-bottom: 0;
    }
    .fb-game-card-row.home {
        padding-top: 1px;
        padding-left: 15px;       /* indent marks it as the second half of the pair */
    }
    .fb-game-card-row.home .fb-gc-team {
        font-size: 12.5px;
        letter-spacing: .05em;
    }
    .fb-game-card-row.home .fb-gc-final {
        font-size: 19px;
        min-width: 42px;
    }
    /* The AT/VS badge is the one explicit "these two belong together" cue, and at
       #0e1e34 on a near-black card it was invisible. */
    .fb-gc-atvs {
        font-size: 9px;
        color: #5f7fa8;
        width: 22px;
    }
    /* Quarter lines follow their own team's indent so they stay attached to it. */
    .fb-gc-quarters { padding-left: 30px; color: #2b4468; }
    .fb-game-card-row.home + .fb-gc-quarters { padding-left: 45px; font-size: 8.5px; }
}

/* =============================================================================
   Embedded-on-another-page additions
   Only used when the board is rendered inside a longer page (the landing page).
   The standalone /football-scores page has its own hero and ignores all of this.
   ============================================================================= */
.fb-sb-head {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 16px;
    text-align: center;
}
.fb-sb-head__title {
    margin: 0;
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.fb-sb-head__sub {
    margin: .55rem auto 0;
    max-width: 56ch;
    color: #93a7c4;
    font-size: 1rem;
}
/* Tighter than the standalone page, which is allowed to own the whole viewport. */
.fb-scores-section--compact { padding: 22px 0 8px; }
@media (max-width: 900px) {
    .fb-scores-section--compact { padding: 14px 0 6px; }
}
.fb-sb-more {
    max-width: 1160px;
    margin: 0 auto;
    padding: .4rem 16px 0;
    text-align: center;
}