/* =============================================================================
   RED DEVIL SPORTS NETWORK - reddevilsports.net
   Developed by Pro Star CMS Development - Chad Sanders - 256-550-1988
   Proprietary and confidential. All rights reserved.

   This is the ONLY stylesheet this site loads of its own. It deliberately does
   not pull in OnwardMediaLLC.net's site.css: that file carries the OnWard green
   brand and a whole page framework this site has no use for. What it DOES borrow
   is assets/css/football-scores.css, so the scoreboard structure stays identical
   across both sites and only its colours are re-tinted here (see PART 4).

   PALETTE - Fyffe Red Devils: red, black, white.
   ============================================================================= */

/* ── PART 1: tokens ─────────────────────────────────────────────────────────── */
:root {
    --rds-red:        #d81f31;   /* primary, taken from the RDSN mark          */
    --rds-red-bright: #f0313f;   /* hover / highlight                          */
    --rds-red-deep:   #8f121f;   /* pressed / deep gradient stop               */
    --rds-ink:        #08080a;   /* page black                                 */
    --rds-ink-2:      #101014;   /* raised surface                             */
    --rds-panel:      #15151a;   /* card                                       */
    --rds-line:       rgba(255,255,255,.10);
    --rds-text:       #f4f4f6;
    --rds-muted:      rgba(244,244,246,.60);
    /* .55 rather than the .40 this started at: every consumer of --rds-dim is
       11-12px text, and .40 measured 3.49:1 against the footer black - under the
       4.5:1 AA floor. Small print on a page people read outdoors on a phone at a
       ball game is exactly the wrong place to save a few percent of contrast. */
    --rds-dim:        rgba(244,244,246,.55);
    --rds-container:  1180px;
    --rds-font:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --rds-display:    'Barlow Condensed', 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--rds-ink);
    color: var(--rds-text);
    font-family: var(--rds-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--rds-red-bright); }

/* The scoreboard include and this page both use .container; site.css is not
   loaded here, so it has to be defined. Same 1180px measure either way. */
.container {
    max-width: var(--rds-container);
    margin: 0 auto;
    padding: 0 22px;
}

/* Visible focus for keyboard users, on every interactive thing. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--rds-red-bright);
    outline-offset: 3px;
    border-radius: 4px;
}

.rds-skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--rds-red); color: #fff;
    padding: .7em 1.2em; z-index: 999; font-weight: 700;
    text-decoration: none; border-radius: 0 0 8px 0;
}
.rds-skip:focus { left: 0; }

/* ── PART 2: masthead ───────────────────────────────────────────────────────── */
.rds-masthead {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 100% at 50% 0%, rgba(216,31,49,.20) 0%, transparent 62%),
        linear-gradient(178deg, #120409 0%, #0a0a0d 55%, var(--rds-ink) 100%);
    border-bottom: 1px solid rgba(216,31,49,.28);
}
/* Yard-line texture, echoing the scoreboard's own hero so the two read as one
   broadcast graphic package rather than two pages stitched together. */
.rds-masthead::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg,
        transparent 0, transparent calc(10% - 1px),
        rgba(255,255,255,.022) calc(10% - 1px), rgba(255,255,255,.022) 10%);
    pointer-events: none;
}
/* Broadcast scanlines. */
.rds-masthead::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg,
        rgba(0,0,0,.08) 0px, rgba(0,0,0,.08) 1px,
        transparent 1px, transparent 4px);
    pointer-events: none;
}
.rds-masthead .container { position: relative; z-index: 1; }

.rds-mast-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 1.5rem 0 1.35rem;
    flex-wrap: wrap;
}
/* Logo + wordmark travel together as one lockup, so the phone layout can stack
   and centre them without the tagline getting caught between the two. */
.rds-mast-lockup {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 300px;
    min-width: 0;
}
.rds-mast-logo {
    height: 76px; width: auto; flex: none;
    filter: drop-shadow(0 6px 20px rgba(216,31,49,.35));
}
.rds-mast-text { min-width: 0; }
.rds-eyebrow {
    display: block;
    font-size: .66rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--rds-red-bright);
    margin: 0 0 .3rem;
}
.rds-wordmark {
    margin: 0;
    font-family: var(--rds-display);
    font-size: clamp(26px, 5.2vw, 46px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
}
.rds-wordmark em { font-style: normal; color: var(--rds-red-bright); }
/* Forced line break, phone only - see the note in index.php. */
.rds-wm-br { display: none; }
.rds-tagline {
    flex: 1 1 100%;
    margin: .55rem 0 0;
    font-size: .92rem;
    color: var(--rds-muted);
    max-width: 62ch;
}

/* The Fyffe mascot, set as a watermark rather than a logo lockup: it is the
   school's mark, not the network's, so it sits behind the type instead of
   beside it. Hidden on small screens where it would crowd the wordmark. */
.rds-mast-devil {
    position: absolute;
    right: -14px; top: 50%;
    transform: translateY(-50%);
    height: 150%; width: auto;
    opacity: .10;
    pointer-events: none;
    z-index: 0;
    filter: grayscale(.15);
}
@media (max-width: 860px) { .rds-mast-devil { display: none; } }

/* Mascot chip beside the wordmark - small, credited, and only where it fits. */
.rds-mast-fhs {
    height: 62px; width: auto; flex: none;
    opacity: .92;
}

/* ── Phone masthead ───────────────────────────────────────────────────────────
   The desktop lockup - small logo on the left, wordmark wrapping beside it,
   tagline underneath - reads as a squeezed afterthought at 375px: the mark ends
   up smaller than the type next to it and "RED DEVIL SPORTS NETWORK" breaks
   across three ragged lines.

   On a phone it becomes a proper centred broadcast identity instead: the mark
   sits ON TOP at a size that can actually be seen, the wordmark centres under
   it, and both school marks flank nothing - the FHS chip moves out of the row
   and under the tagline where it has room. Costs one line of height and buys
   a masthead that looks designed rather than reflowed. ───────────────────────── */
@media (max-width: 720px) {
    .rds-mast-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
        padding: 1.35rem 0 1.2rem;
    }
    .rds-mast-lockup {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
        width: 100%;
    }
    .rds-mast-logo {
        height: 86px;   /* the mark leads on a phone, so it gets real presence */
    }
    .rds-eyebrow { margin-bottom: .2rem; }
    .rds-wordmark {
        /* Two balanced lines - "RED DEVIL / SPORTS NETWORK" - via the forced
           break, which is what .rds-wm-br is for. */
        font-size: clamp(26px, 8.6vw, 36px);
    }
    .rds-wm-br { display: inline; }
    .rds-tagline {
        margin-top: .7rem;
        font-size: .87rem;
        max-width: 40ch;
        margin-inline: auto;
    }

    /* The lone FHS chip under the wordmark was the "afterthought" look: a stray
       logo floating below centred text, earning 52px of height and no meaning.
       Fyffe is represented far better by the mascot itself, brought back here as
       a full-bleed watermark behind the lockup - which costs no height at all and
       gives the phone masthead the character it was missing.
       Kept at .09 so white type over it still measures ~15:1. */
    .rds-mast-fhs { display: none; }
    .rds-mast-devil {
        display: block;
        right: -26%;
        height: 190%;
        opacity: .09;
    }
}

/* Below 400px the tagline is the first thing to go: it is a nice-to-have, and
   at that width it costs four lines directly above the live player. */
@media (max-width: 400px) {
    .rds-tagline   { display: none; }
    .rds-mast-logo { height: 78px; }
}

/* ── PART 3: page sections ──────────────────────────────────────────────────── */
.rds-live {
    padding: 2rem 0 2.25rem;
    /* Deeper and redder than before, because the animated stack now sits on top
       of it and needs somewhere dark to sit. */
    background: linear-gradient(168deg, #0a0406 0%, #180609 46%, #0b0b0f 100%);
    /* Required by the shared broadcast background: it is absolutely positioned
       to this box and must be clipped by it. */
    position: relative;
    overflow: hidden;
}
/* Everything real goes above every decorative layer. The background uses 0-3. */
.rds-live > .container { position: relative; z-index: 4; }
@media (min-width: 720px) { .rds-live { padding: 2.75rem 0 2.75rem; } }
/* Every pixel above the player is a pixel of broadcast pushed off a phone
   screen, so the section breathes less here than it does on a desktop. */
@media (max-width: 720px) { .rds-live { padding: 1.25rem 0 1.5rem; } }

.rds-sectionhead { margin: 0 0 1.15rem; }
.rds-sectionhead__label {
    display: block;
    font-size: .66rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--rds-red-bright);
    margin-bottom: .35rem;
}
.rds-sectionhead__title {
    margin: 0;
    font-family: var(--rds-display);
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.05;
    color: #fff;
}
.rds-sectionhead__sub {
    margin: .4rem 0 0;
    font-size: .92rem;
    color: var(--rds-muted);
    max-width: 62ch;
}

/* ── Live section stack ───────────────────────────────────────────────────────
   A flex column purely so the explanatory note can be re-ordered relative to the
   player. The live_feed.php include also emits a <style> and a <script>, but
   both are display:none and so are never flex items. */
.rds-live-stack { display: flex; flex-direction: column; }

.rds-live-note {
    margin: .4rem 0 1.15rem;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--rds-muted);
    max-width: 62ch;
}

@media (max-width: 720px) {
    .rds-sectionhead { margin-bottom: .85rem; }
    /* Below the player rather than above it. Four lines of prose between the
       heading and the video pushes the broadcast off the bottom of a phone
       screen - and this note is reassurance ("leave it open"), which is worth
       more once someone has seen what is actually playing. */
    .rds-live-note {
        order: 99;
        margin: 1rem 0 0;
        font-size: .86rem;
    }
}

/* Divider between the live feed and the scoreboard, styled as a broadcast
   lower-third rule so the transition reads as deliberate. */
.rds-rule {
    height: 3px;
    border: 0;
    margin: 0;
    background: linear-gradient(90deg,
        var(--rds-red) 0%, var(--rds-red-deep) 22%, transparent 60%);
}

/* ── PART 4: scoreboard re-tint ─────────────────────────────────────────────────
   assets/css/football-scores.css is borrowed intact from OnwardMediaLLC.net via
   the shared-asset passthrough, so the markup, the split-flap digit animation and
   the responsive table/card switch all stay identical across the two sites and
   cannot drift. Only the colour layer is restated here: the original is a navy
   and green broadcast package, and this site is red and black.

   Winner scores stay GOLD. Gold on black is the strongest contrast pair on the
   board and it is what a viewer's eye is trained to find - re-tinting it red
   would put the winning score in the same colour as the chrome around it.
   ───────────────────────────────────────────────────────────────────────────── */
/* The board's own heading block: the stock sub colour is a pale blue tuned for
   the navy board. */
.fb-sb-head       { padding-top: 4px; }
.fb-sb-head__title{ font-family: var(--rds-display); text-transform: uppercase; letter-spacing: .01em; }
.fb-sb-head__sub  { color: var(--rds-muted); }

.fb-refresh-bar {
    background: #0b0b0f;
    border-bottom: 1px solid rgba(216,31,49,.18);
    border-top: 1px solid rgba(216,31,49,.18);
    color: var(--rds-dim);
}
.fb-countdown-wrap { color: var(--rds-dim); }
.fb-countdown      { color: var(--rds-red-bright); }

.fb-scores-section {
    background: linear-gradient(180deg, #0b0b0f 0%, var(--rds-ink) 100%);
}

.fb-day-block {
    background: var(--rds-ink-2);
    border-color: rgba(216,31,49,.24);
    border-radius: 6px;
}
.fb-day-title {
    color: #fff;
    background: linear-gradient(90deg,
        rgba(216,31,49,.24) 0%, rgba(216,31,49,.07) 38%, transparent 72%);
    border-bottom-color: rgba(216,31,49,.20);
    border-left-color: var(--rds-red);
}
.fb-day-title::before {
    background: var(--rds-red-bright);
    box-shadow: 0 0 10px rgba(240,49,63,.9);
}
.fb-sponsor-line {
    color: #e6a3aa;
    background: rgba(216,31,49,.06);
    border-bottom-color: rgba(216,31,49,.16);
}
.fb-sponsor-line::before { color: var(--rds-dim); }

.fb-scores-tbl th          { color: var(--rds-dim); }
.fb-scores-tbl th.col-team { color: var(--rds-muted); }
.fb-scores-tbl th.col-final{ color: #b08422; }
.fb-scores-tbl th.sortable:hover { color: var(--rds-red-bright); }

.fb-scores-tbl tbody tr                 { background: rgba(12,12,16,.86); }
.fb-scores-tbl tbody tr:nth-child(even) { background: rgba(20,20,26,.7); }
.fb-scores-tbl tbody tr:hover td        { background: rgba(216,31,49,.07); }
.fb-scores-tbl td                       { border-bottom-color: rgba(216,31,49,.14); }

/* Base cell colours. These are NOT optional: the originals are navy (#3e6080)
   and OnWard green (#00e87a), tuned for a navy board. On this black board the
   navy quarter scores measure 2.97:1, which fails AA at 13px. */
.fb-scores-tbl td          { color: rgba(244,244,246,.66); }   /* quarter scores */
.fb-scores-tbl .cell-team  { color: #eceff3; }
/* AT / VS is not decoration - it is the only thing on the row that says which
   side is at home, so it has to be readable. The original #0e2240 is invisible
   even on the navy board it was designed for. */
.fb-scores-tbl .cell-vs    { color: rgba(244,244,246,.62); border-left-color: rgba(216,31,49,.16); border-right-color: rgba(216,31,49,.16); }

/* The money shot. White with a red bloom before a winner is decided - the green
   original reads as the OnWard brand, not this one. */
.fb-scores-tbl .cell-final { color: #ffffff; text-shadow: 0 0 22px rgba(240,49,63,.42); }

/* Losing side: dark enough to recede, light enough to still be read. The
   original navy values vanish completely against this black background. */
.fb-scores-tbl .cell-team.fb-l  { color: rgba(244,244,246,.42); }
.fb-scores-tbl .cell-final.fb-l { color: rgba(244,244,246,.34); text-shadow: none; }
.fb-scores-tbl td.cell-q.fb-l   { color: rgba(244,244,246,.38); }

/* Mobile game cards carry the same palette as the desktop table - the board is
   one design that reflows, not two designs. */
.fb-game-card             { background: rgba(12,12,16,.86); border-bottom-color: rgba(216,31,49,.14); }
.fb-game-card:nth-child(even) { background: rgba(20,20,26,.7); }
.fb-game-card-row.away    { border-bottom-color: rgba(216,31,49,.12); }
.fb-gc-atvs               { color: rgba(244,244,246,.62); }
.fb-gc-team               { color: #eceff3; }
.fb-gc-final              { color: #ffffff; text-shadow: 0 0 14px rgba(240,49,63,.42); }
.fb-gc-loser .fb-gc-team  { color: rgba(244,244,246,.42); }
.fb-gc-loser .fb-gc-final { color: rgba(244,244,246,.34); text-shadow: none; }
.fb-gc-quarters           { color: rgba(244,244,246,.58); }
.fb-no-games              { color: var(--rds-muted); }

/* ── PART 5: footer ─────────────────────────────────────────────────────────── */
.rds-footer {
    background: #060608;
    border-top: 1px solid rgba(216,31,49,.22);
    padding: 2rem 0 1.6rem;
    font-size: .86rem;
    color: var(--rds-muted);
}
.rds-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.rds-footer-brand { display: flex; align-items: center; gap: .9rem; }
.rds-footer-brand img { height: 46px; width: auto; }
.rds-footer-brand strong { color: #fff; display: block; font-size: .95rem; }
.rds-footer-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.rds-footer-links a {
    color: var(--rds-muted);
    text-decoration: none;
    font-weight: 600;
}
.rds-footer-links a:hover { color: var(--rds-red-bright); }
.rds-footer-legal {
    margin: 1.5rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: .76rem;
    color: var(--rds-dim);
    line-height: 1.7;
}
.rds-footer-legal a { color: var(--rds-dim); }
.rds-footer-legal a:hover { color: var(--rds-muted); }

/* ── PART 6: shared buttons ─────────────────────────────────────────────────── */
.rds-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7em 1.4em;
    border-radius: 9px;
    font-weight: 800; font-size: .88rem;
    text-decoration: none; line-height: 1.3;
    border: 1px solid transparent;
    transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}
.rds-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.rds-btn--primary { background: var(--rds-red); color: #fff; }
.rds-btn--ghost {
    background: transparent;
    color: var(--rds-text);
    border-color: var(--rds-line);
}
.rds-btn--ghost:hover { border-color: var(--rds-red); color: var(--rds-red-bright); }

@media (prefers-reduced-motion: reduce) {
    .rds-btn:hover, .lf-btn:hover, .lf-play:hover { transform: none; }
}

/* ── Masthead height trim - 2026-08-21 ───────────────────────────────────────
   Chad: "minimize the vertical real estate the menu top takes up on both
   desktop and especially mobile."

   The proportions of the lockup are unchanged; everything here is padding and
   mark size. The tagline goes on a phone - it is the one element nobody reads
   on the way to a live game, and it was costing two lines.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 721px) {
    .rds-masthead   { padding-top: 1.1rem; padding-bottom: 1.1rem; }
    .rds-mast-logo  { width: 62px; height: 62px; }
    .rds-tagline    { margin-top: .35rem; }
}
@media (max-width: 720px) {
    .rds-masthead   { padding-top: .6rem; padding-bottom: .55rem; }
    /* The stacked lockup itself is left alone - that arrangement was designed
       and approved for phones. What goes is the padding around it, which was
       21.6px above and 19.2px below for no reason anybody would miss. */
    .rds-mast-inner { padding-top: .5rem; padding-bottom: .45rem; }
    .rds-mast-lockup { gap: .35rem; }
    .rds-mast-logo  { width: 54px; height: 54px; }
    .rds-wordmark   { font-size: clamp(19px, 6vw, 26px); line-height: 1.02; }
    .rds-eyebrow    { font-size: .58rem; margin-bottom: .1rem; }
    /* Nobody reads this on the way to a live game, and it was two lines tall. */
    .rds-tagline    { display: none; }
    .rds-live       { padding-top: .55rem; }
    .rds-sectionhead { margin-bottom: .6rem; }
}
@media (max-width: 400px) {
    .rds-mast-logo  { width: 46px; height: 46px; }
    .rds-masthead   { padding-top: .45rem; padding-bottom: .45rem; }
}

/* ── Live camera background: Red Devil palette ───────────────────────────────
   The layout, cropping and gating all live in the shared assets/css/livecam-bg.css
   (OnWard docroot). Only the TINTS are set here, because the two sites do not
   share a palette - OnWard's board is navy, this one is near-black with a red
   cast, and inheriting OnWard's blue would have quietly restyled this board.

   Values are this site's own #101014 / #0b0b0f panels with alpha applied, so
   the board looks like itself with the camera showing through rather than like
   a different design.
   ───────────────────────────────────────────────────────────────────────────── */
.has-livecam {
    --lc-panel:   rgba(16, 16, 20, .46);
    --lc-bar:     rgba(11, 11, 15, .46);
    --lc-row:     rgba(13, 13, 17, .34);
    --lc-row-alt: rgba(20, 20, 25, .20);
}