:root {
    --black: #050505;
    --surface: #0c0c0d;
    --surface-raised: #141416;
    --white: #f7f7f4;
    --muted: #aaa9a5;
    --line: #353538;
    --red: #BA0C2F;
    --red-bright: #e2173f;
    --green: #244f22;
    --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: var(--sans);
    overflow-x: hidden;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 50% -20%, rgb(186 12 47 / 18%), transparent 42%),
        repeating-linear-gradient(115deg, transparent 0 28px, rgb(255 255 255 / 1.4%) 29px 30px),
        var(--black);
    content: "";
}

body::after {
    position: fixed;
    right: -8vw;
    bottom: -13vh;
    left: -8vw;
    z-index: -1;
    height: 26vh;
    background: radial-gradient(ellipse at center, rgb(28 57 24 / 75%), transparent 72%);
    filter: blur(15px);
    content: "";
}

.stadium-lights {
    position: fixed;
    inset: 0 0 auto;
    z-index: -1;
    height: 22vh;
    opacity: 0.32;
    background:
        radial-gradient(circle at 8% 0, white 0 1px, transparent 2px),
        radial-gradient(circle at 12% 0, white 0 1px, transparent 2px),
        radial-gradient(circle at 88% 0, white 0 1px, transparent 2px),
        radial-gradient(circle at 92% 0, white 0 1px, transparent 2px);
    filter: drop-shadow(0 0 18px white);
}

.gameday-shell {
    display: grid;
    grid-template-areas:
        "mast mast mast"
        "schedule score supporting"
        "schedule situation supporting"
        "schedule kickoff supporting"
        "schedule field supporting"
        "schedule last supporting"
        "schedule lines supporting"
        "schedule intel supporting"
        "schedule outcome supporting";
    grid-template-columns: minmax(250px, 18vw) minmax(0, 1fr) minmax(260px, 19vw);
    grid-template-rows: auto auto auto auto auto auto auto auto 1fr;
    gap: 14px 22px;
    min-height: 100vh;
    padding: 20px 24px 24px;
}

.masthead {
    grid-area: mast;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 22px;
    min-height: 52px;
}

.masthead-rule {
    height: 5px;
    background: var(--red);
}

.brand {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.65rem, 2.5vw, 3.2rem);
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

.brand span {
    color: var(--white);
}

.brand {
    color: var(--red-bright);
}

.brand-lockup {
    text-align: center;
}

.brand-subtitle {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: clamp(0.5rem, 0.68vw, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.42em;
    text-transform: uppercase;
}

.local-time {
    display: none;
}

.message {
    justify-self: end;
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.62rem, 0.75vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.11em;
    text-align: right;
    text-transform: uppercase;
}

.stale-indicator {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: 16px;
    z-index: 10;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid rgb(255 255 255 / 18%);
    color: #d8d6cf;
    background: rgb(5 5 5 / 78%);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.supporting-rail {
    border-top: 2px solid var(--red);
    min-width: 0;
}

.supporting-rail h2,
.last-play h2,
.line-score h2,
.intel-panel h2 {
    margin: 0;
    padding: 12px 14px 10px;
    color: var(--red-bright);
    font-family: var(--display);
    font-size: clamp(1rem, 1.25vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.schedule-rail {
    grid-area: schedule;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.schedule-list {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.schedule-row {
    display: grid;
    grid-template-columns: 28px 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-height: 42px;
    padding: 7px 7px;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid var(--team-accent, transparent);
    font-family: "Arial Narrow", var(--sans);
    font-size: clamp(0.68rem, 0.8vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.rail-team-logo {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgb(0 0 0 / 62%));
}

.schedule-week {
    grid-column: 1;
}

.schedule-row > .rail-team-logo {
    grid-column: 2;
}

.schedule-opponent {
    grid-column: 3;
}

.schedule-result {
    grid-column: 4;
}

.schedule-date {
    grid-row: 2;
    grid-column: 3 / 5;
    justify-self: end;
    color: var(--muted);
    font-size: clamp(0.62rem, 0.68vw, 0.76rem);
    letter-spacing: 0.055em;
    white-space: nowrap;
}

.schedule-row.is-current {
    border-left-color: var(--team-accent, var(--red));
    background: rgb(255 255 255 / 8%);
}

.schedule-week,
.timezone-note {
    color: var(--muted);
}

.schedule-opponent {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-result {
    color: var(--white);
    text-align: right;
}

.timezone-note {
    margin: 10px 0 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.scoreboard {
    grid-area: score;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 15vw) minmax(0, 1fr);
    align-items: center;
    min-height: min(31vh, 330px);
    border-bottom: 3px solid var(--red);
}

.team {
    position: relative;
    display: grid;
    grid-template-columns: minmax(80px, 0.55fr) 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(10px, 1.2vw, 24px);
    padding: 8px;
}

.team-opponent {
    grid-template-columns: 1fr minmax(80px, 0.55fr);
    text-align: right;
}

.team-opponent .team-copy {
    grid-column: 1;
    grid-row: 1;
}

.team-opponent .opponent-mark {
    grid-column: 2;
    grid-row: 1;
}

.team-score {
    grid-column: 1 / -1;
    margin: -8px 0 0;
    font-family: var(--display);
    font-size: clamp(5rem, 9.2vw, 11.5rem);
    letter-spacing: 0.01em;
    line-height: 0.85;
}

.team-opponent .team-score {
    text-align: right;
}

.team-mark-button {
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: default;
}

body[data-state="final"] .team-mark-button[data-victory="true"],
body[data-state="postgame"] .team-mark-button[data-victory="true"] {
    cursor: pointer;
}

.team-mark-button:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 6px;
}

.team-mark {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 22px rgb(186 12 47 / 18%));
}

.opponent-mark {
    display: grid;
    width: 100%;
    aspect-ratio: 1.35;
    place-items: center;
    color: var(--opponent-color, #b7b7b7);
    font-family: var(--display);
    font-size: clamp(2rem, 3.3vw, 4.6rem);
    letter-spacing: -0.02em;
}

.opponent-logo {
    display: block;
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}

.team-name,
.team-rank,
.team-record {
    margin: 0;
}

.team-name {
    font-family: var(--display);
    font-size: clamp(1.45rem, 2.4vw, 3.1rem);
    font-weight: 700;
    letter-spacing: 0.015em;
    line-height: 0.96;
    text-transform: uppercase;
    text-wrap: balance;
}

.team.is-long-name .team-name {
    font-size: clamp(1.25rem, 1.9vw, 2.45rem);
}

.team-rank {
    min-height: 1em;
    color: var(--red-bright);
    font-family: var(--display);
    font-size: clamp(0.85rem, 1.1vw, 1.35rem);
}

.team-record {
    min-height: 1.2em;
    margin-top: 6px;
    color: var(--muted);
    font-size: clamp(0.7rem, 0.85vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    border-right: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.game-state,
.game-clock,
.versus {
    margin: 0;
    font-family: var(--display);
    text-transform: uppercase;
}

.game-state {
    color: var(--red-bright);
    font-size: clamp(1.2rem, 2.1vw, 2.8rem);
}

.game-clock {
    font-size: clamp(2.8rem, 5.2vw, 6.4rem);
    line-height: 1;
}

.versus {
    display: none;
    color: var(--muted);
    font-size: 1rem;
}

.possession-arrow {
    position: absolute;
    top: 47%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.team-georgia .possession-arrow {
    right: -17px;
    border-left: 13px solid var(--red-bright);
}

.team-opponent .possession-arrow {
    left: -17px;
    border-right: 13px solid var(--red-bright);
}

.situation-band {
    grid-area: situation;
    display: grid;
    grid-template-columns: minmax(170px, 0.3fr) 1fr;
    min-height: 74px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, transparent 0 24%, var(--red) 24% 100%);
}

.period-clock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-family: var(--display);
}

.period-clock strong {
    color: var(--red-bright);
    font-size: clamp(1.6rem, 2.5vw, 3.2rem);
    text-transform: uppercase;
}

.period-clock span {
    font-size: clamp(1.9rem, 2.9vw, 3.8rem);
}

.situation-band > p {
    align-self: center;
    margin: 0;
    padding: 0 26px;
    font-family: var(--display);
    font-size: clamp(1.2rem, 1.85vw, 2.45rem);
    letter-spacing: 0.015em;
    text-align: center;
}

.kickoff-panel {
    grid-area: kickoff;
    padding: clamp(20px, 3vw, 52px) 16px;
    text-align: center;
}

.countdown-label,
.countdown,
.kickoff-date,
.kickoff-details {
    margin: 0;
}

.countdown-label {
    color: var(--red-bright);
    font-family: var(--display);
    font-size: clamp(1.25rem, 1.6vw, 2rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.countdown {
    font-family: var(--display);
    font-size: clamp(4rem, 9vw, 10rem);
    letter-spacing: 0.025em;
    line-height: 1;
}

.kickoff-date {
    margin-top: 10px;
    font-family: var(--display);
    font-size: clamp(1.2rem, 2vw, 2.5rem);
    text-transform: uppercase;
}

.kickoff-details {
    margin-top: 8px;
    color: var(--muted);
    font-size: clamp(0.78rem, 1vw, 1.1rem);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.field-wrap {
    grid-area: field;
    display: grid;
    grid-template-columns: clamp(54px, 5vw, 82px) 1fr clamp(54px, 5vw, 82px);
    min-height: 170px;
    border: 2px solid var(--white);
}

.field-end {
    position: relative;
    z-index: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--red);
    font-family: var(--display);
    font-size: clamp(1rem, 1.35vw, 1.7rem);
    letter-spacing: 0.05em;
    text-orientation: mixed;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.field-end-right {
    color: var(--black);
    background: var(--opponent-color, #999);
}

.field {
    position: relative;
    z-index: 1;
    overflow: visible;
    background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / 3%) 0 10%, rgb(0 0 0 / 4%) 10% 20%),
        repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgb(255 255 255 / 52%) calc(10% - 1px) 10%),
        repeating-linear-gradient(0deg, transparent 0 14px, rgb(255 255 255 / 8%) 14px 15px),
        linear-gradient(180deg, #315f2d, #204a22 52%, #2b5727);
    box-shadow: inset 0 0 42px rgb(0 0 0 / 34%);
}

.field::before,
.field::after {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1;
    height: 8px;
    background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 4px), rgb(255 255 255 / 70%) calc(5% - 4px) 5%);
    content: "";
}

.field::before {
    top: 28%;
}

.field::after {
    bottom: 28%;
}

.yard-line {
    position: absolute;
    inset-block: 0;
    z-index: 1;
    color: rgb(255 255 255 / 78%);
    font-family: var(--display);
    transform: translateX(-50%);
}

.yard-line::before,
.yard-line::after {
    position: absolute;
    left: 50%;
    font-size: clamp(0.75rem, 1vw, 1.1rem);
    line-height: 1;
    transform: translateX(-50%);
}

.yard-line::before {
    top: 8%;
}

.yard-line::after {
    bottom: 8%;
    transform: translateX(-50%) rotate(180deg);
}

.line-20 { left: 20%; }
.line-20::before { content: "20"; }
.line-20::after { content: "20"; }
.line-40 { left: 40%; }
.line-40::before { content: "40"; }
.line-40::after { content: "40"; }
.line-50 { left: 50%; }
.line-50::before { content: "50"; }
.line-50::after { content: "50"; }
.line-60 { left: 60%; }
.line-60::before { content: "40"; }
.line-60::after { content: "40"; }
.line-80 { left: 80%; }
.line-80::before { content: "20"; }
.line-80::after { content: "20"; }

.first-down-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 4px;
    background: #ffd400;
    box-shadow: 0 0 10px rgb(255 212 0 / 56%);
    transform: translateX(-50%);
    transition: left 420ms ease;
}

.first-down-marker::before {
    position: absolute;
    top: 7px;
    left: 7px;
    padding: 3px 5px 2px;
    color: #171300;
    background: #ffd400;
    content: "1ST";
    font-family: var(--display);
    font-size: 0.66rem;
    letter-spacing: 0.05em;
}

.ball-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 42%;
    z-index: 3;
    width: 4px;
    background: #49a7ff;
    box-shadow: 0 0 12px rgb(73 167 255 / 72%);
    transform: translateX(-50%);
    transition: left 420ms ease;
}

.field-football-emoji {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 1.75rem;
    line-height: 1;
    filter: drop-shadow(0 3px 5px rgb(0 0 0 / 55%));
    transform: translate(-50%, -50%);
}

.last-play {
    grid-area: last;
    display: grid;
    grid-template-columns: minmax(110px, 0.22fr) 1fr;
    gap: 0 18px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

.last-play > p {
    align-self: center;
    margin: 0;
    font-size: clamp(0.85rem, 1.05vw, 1.18rem);
}

.drive-context {
    grid-column: 2;
    margin-top: 5px !important;
    color: var(--muted);
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.line-score {
    grid-area: lines;
    border-top: 1px solid var(--line);
}

.line-score-grid {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) repeat(var(--periods, 4), minmax(38px, 0.35fr)) minmax(56px, 0.45fr);
    border-top: 1px solid var(--line);
}

.line-cell {
    padding: 7px 10px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: clamp(0.9rem, 1.2vw, 1.4rem);
    text-align: center;
}

.line-cell.team-label {
    box-shadow: inset 4px 0 var(--team-accent, transparent);
    text-align: left;
}

.line-cell.total {
    color: var(--white);
}

.intel-panel {
    grid-area: intel;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

.intel-label,
.intel-value {
    margin: 0;
}

.intel-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.intel-value {
    margin-top: 5px;
    font-family: var(--display);
    font-size: clamp(1.3rem, 2vw, 2.5rem);
}

.rankings-rail,
.around-rail {
    grid-area: supporting;
}

.rankings-source {
    margin: -6px 0 8px;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rank-row {
    display: grid;
    grid-template-columns: 34px 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid var(--team-accent, transparent);
    font-family: "Arial Narrow", var(--sans);
    font-size: clamp(0.72rem, 0.88vw, 1rem);
    font-weight: 750;
    text-transform: uppercase;
}

.rank-school {
    grid-column: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-number {
    grid-column: 1;
}

.rank-row > .rail-team-logo {
    grid-column: 2;
}

body[data-state="scheduled"] .rank-row > .rail-team-logo,
body[data-state="pregame"] .rank-row > .rail-team-logo {
    grid-row: 1;
}

.rank-row.is-georgia {
    border-left-color: var(--team-accent, var(--red));
    color: var(--white);
    background: rgb(186 12 47 / 15%);
}

.rank-number {
    color: var(--red-bright);
    font-family: var(--display);
}

.around-game {
    padding: clamp(12px, 1.5vw, 22px) 4px;
    border-bottom: 1px solid var(--line);
}

.around-team {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin: 6px 0;
    font-family: var(--display);
    font-size: clamp(1.15rem, 1.5vw, 1.85rem);
    text-transform: uppercase;
}

.around-team-mark {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--team-accent, var(--muted));
    font-size: 0.72rem;
}

.around-team-logo {
    width: 28px;
    height: 28px;
}

.around-team-fallback {
    font-size: 0.65rem;
    letter-spacing: 0.02em;
}

.around-team-identity {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 7px;
}

.around-team-rank {
    color: var(--red-bright);
}

.around-team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.around-team-score {
    color: var(--white);
}

.around-status {
    margin: 0 0 7px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.outcome {
    grid-area: outcome;
    text-align: center;
}

.outcome p {
    margin: 12px 0;
    color: var(--red-bright);
    font-family: var(--display);
    font-size: clamp(2.5rem, 5vw, 6rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body[data-state="scheduled"] .situation-band,
body[data-state="scheduled"] .last-play,
body[data-state="scheduled"] .line-score,
body[data-state="pregame"] .situation-band,
body[data-state="pregame"] .last-play,
body[data-state="pregame"] .line-score,
body[data-state="live"] .kickoff-panel,
body[data-state="halftime"] .kickoff-panel,
body[data-state="final"] .kickoff-panel,
body[data-state="postgame"] .kickoff-panel,
body[data-state="postponed"] .kickoff-panel,
body[data-state="cancelled"] .kickoff-panel,
body[data-state="unknown"] .kickoff-panel {
    display: none;
}

body[data-state="scheduled"] .team-score,
body[data-state="pregame"] .team-score,
body[data-state="postponed"] .team-score,
body[data-state="cancelled"] .team-score {
    display: none;
}

body[data-state="scheduled"] .scoreboard,
body[data-state="pregame"] .scoreboard {
    min-height: min(26vh, 280px);
}

body[data-state="scheduled"] .versus,
body[data-state="pregame"] .versus {
    display: block;
}

body[data-state="scheduled"] .game-state,
body[data-state="scheduled"] .game-clock,
body[data-state="pregame"] .game-state,
body[data-state="pregame"] .game-clock {
    display: none;
}

body[data-state="live"] .rankings-rail,
body[data-state="halftime"] .rankings-rail,
body[data-state="final"] .rankings-rail,
body[data-state="postgame"] .rankings-rail {
    display: none;
}

body[data-state="scheduled"] .around-rail,
body[data-state="pregame"] .around-rail,
body[data-state="final"] .around-rail {
    display: none;
}

@media (min-width: 1101px) {
    .gameday-shell {
        height: 100vh;
        min-height: 720px;
        overflow: hidden;
    }

    body[data-state="live"] .scoreboard,
    body[data-state="halftime"] .scoreboard {
        min-height: min(32vh, 340px);
    }

    body[data-state="live"] .field-wrap {
        min-height: min(18vh, 190px);
    }

    body[data-state="live"] .last-play {
        min-height: 74px;
    }

    body[data-state="live"] .line-cell,
    body[data-state="halftime"] .line-cell {
        padding-block: 8px;
    }

    body[data-state="live"] .around-game,
    body[data-state="halftime"] .around-game {
        padding-block: clamp(24px, 3vh, 38px);
    }

    body[data-state="live"] .around-team,
    body[data-state="halftime"] .around-team {
        font-size: clamp(1.6rem, 1.75vw, 2.15rem);
    }

    body[data-state="scheduled"] .kickoff-panel,
    body[data-state="pregame"] .kickoff-panel {
        display: grid;
        min-height: min(43vh, 500px);
        place-content: center;
    }

    body[data-state="scheduled"] .intel-panel,
    body[data-state="pregame"] .intel-panel {
        min-height: 112px;
        padding: 16px 4px;
    }

    body[data-state="final"] .scoreboard,
    body[data-state="final"] .line-score,
    body[data-state="final"] .intel-panel,
    body[data-state="final"] .outcome {
        grid-column: 2 / 4;
    }

    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-hour"] .countdown {
        color: var(--white);
        font-size: clamp(7rem, 11vw, 12rem);
        text-shadow: 0 0 42px rgb(186 12 47 / 42%);
    }

    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-ten"] .scoreboard {
        min-height: min(29vh, 320px);
        border-bottom-width: 6px;
    }

    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-ten"] .kickoff-panel {
        min-height: min(50vh, 560px);
        background: radial-gradient(circle, rgb(186 12 47 / 25%), transparent 65%);
    }

    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-ten"] .countdown {
        color: var(--red-bright);
        font-size: clamp(8rem, 13vw, 14rem);
    }

    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-ten"] .intel-panel {
        display: none !important;
    }
}

.team.is-scoring {
    animation: score-flash 850ms ease-in-out 3;
}

body.is-victory .scoreboard {
    animation: victory-pulse 750ms ease-out 2;
}

.celebration {
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    pointer-events: none;
}

.install-button {
    display: none;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgb(226 23 63 / 72%);
    border-radius: 999px;
    color: var(--white);
    background: linear-gradient(180deg, var(--red-bright), var(--red));
    font: 800 0.82rem/1 var(--sans);
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 6px 18px rgb(0 0 0 / 36%);
}

.install-button[hidden] {
    display: none !important;
}

.install-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.install-button:focus-visible,
.pwa-dialog-close:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 3px;
}

.pwa-dialog {
    width: min(420px, calc(100vw - 28px));
    max-width: none;
    padding: 0;
    border: 1px solid rgb(226 23 63 / 52%);
    border-radius: 20px;
    color: var(--white);
    background: linear-gradient(150deg, #201116, #09090a 74%);
    box-shadow: 0 26px 80px rgb(0 0 0 / 75%);
}

.pwa-dialog::backdrop {
    background: rgb(0 0 0 / 78%);
}

.pwa-dialog-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 38px;
    align-items: start;
    gap: 12px;
    padding: 20px 18px 14px;
}

.pwa-dialog-icon {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.pwa-dialog-eyebrow {
    margin: 1px 0 4px;
    color: var(--red-bright);
    font: 800 0.7rem/1.2 var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pwa-dialog h2 {
    margin: 0;
    font: 750 1.2rem/1.2 var(--sans);
    letter-spacing: -0.015em;
}

.pwa-dialog-close {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    color: var(--muted);
    background: rgb(5 5 5 / 68%);
    cursor: pointer;
}

.pwa-dialog-close svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pwa-install-steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 4px 24px 16px 52px;
    color: var(--white);
    font: 600 1rem/1.45 var(--sans);
}

.pwa-install-steps li::marker {
    color: var(--red-bright);
    font-weight: 900;
}

.pwa-dialog-note {
    margin: 0;
    padding: 14px 20px 18px;
    border-top: 1px solid rgb(255 255 255 / 12%);
    color: var(--muted);
    background: rgb(0 0 0 / 24%);
    font: 500 0.82rem/1.45 var(--sans);
}

.confetti-piece {
    position: absolute;
    top: -30px;
    width: 9px;
    height: 18px;
    background: var(--red-bright);
    animation: confetti-fall var(--fall-duration, 2.8s) linear forwards;
}

.confetti-piece:nth-child(3n) { background: var(--white); }
.confetti-piece:nth-child(5n) { background: #111; border: 1px solid #777; }

@keyframes score-flash {
    50% { background: rgb(186 12 47 / 45%); filter: brightness(1.25); }
}

@keyframes victory-pulse {
    50% { transform: scale(1.008); filter: brightness(1.25); }
}

@keyframes confetti-fall {
    to { transform: translate3d(var(--drift, 0), 110vh, 0) rotate(900deg); }
}

@media (max-width: 1100px) {
    body[data-state="scheduled"],
    body[data-state="pregame"] {
        background: #030608;
    }

    body[data-state="scheduled"]::before,
    body[data-state="pregame"]::before {
        background:
            linear-gradient(180deg, rgb(1 4 7 / 22%) 0, rgb(1 4 7 / 38%) 38%, rgb(1 4 7 / 72%) 72%, rgb(1 4 7 / 88%) 100%),
            url("/images/backgrounds/uga-day-game-desktop.jpg") center center / cover no-repeat;
    }

    body[data-scenario="pregame-night"]::before {
        background:
            linear-gradient(180deg, rgb(1 2 4 / 20%) 0, rgb(1 2 4 / 30%) 42%, rgb(1 2 4 / 82%) 100%),
            url("/images/backgrounds/uga-night-game.jpg") center center / cover no-repeat;
    }

    body[data-state="scheduled"]::after,
    body[data-state="pregame"]::after {
        position: fixed;
        inset: 55vh 0 0;
        height: auto;
        background: linear-gradient(180deg, transparent, rgb(1 5 7 / 64%) 42%, #030608 100%);
        filter: none;
    }

    body[data-state="scheduled"] .stadium-lights,
    body[data-state="pregame"] .stadium-lights {
        display: none;
    }

    body[data-audio-available="true"] .team-mark-button {
        cursor: pointer;
    }

    .gameday-shell {
        grid-template-areas:
            "mast"
            "score"
            "situation"
            "kickoff"
            "field"
            "outcome"
            "last"
            "lines"
            "intel"
            "supporting"
            "schedule";
        grid-template-columns: minmax(0, 1fr);
        min-height: 100svh;
        padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    }

    html.iphone-standalone .gameday-shell {
        padding-top: max(18px, env(safe-area-inset-top));
    }

    .masthead {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 8px;
        min-height: 48px;
    }

    .install-button:not([hidden]) {
        display: inline-flex;
    }

    .masthead-rule,
    .local-time,
    .message {
        display: none;
    }

    .brand {
        font-size: clamp(1.15rem, 5.5vw, 1.65rem);
        letter-spacing: 0.2em;
    }

    .scoreboard {
        grid-template-columns: 1fr 78px 1fr;
        min-height: 250px;
    }

    .team,
    .team-opponent {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 2px;
        text-align: center;
    }

    .team-opponent .team-copy,
    .team-opponent .opponent-mark {
        grid-column: auto;
        grid-row: auto;
    }

    .team-mark-button,
    .opponent-mark {
        order: 1;
        width: min(26vw, 112px);
        min-height: 82px;
    }

    .team-copy {
        order: 2;
    }

    .team-score {
        order: 3;
        margin: 0;
        font-size: clamp(4.4rem, 23vw, 6.2rem);
        text-align: center !important;
    }

    .team-name {
        max-width: 34vw;
        font-size: clamp(0.9rem, 4.6vw, 1.3rem);
        overflow-wrap: normal;
        word-break: normal;
    }

    .team.is-long-name .team-name {
        font-size: clamp(0.76rem, 3.9vw, 1.08rem);
    }

    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-hour"] .countdown {
        color: var(--white);
        text-shadow: 0 0 28px rgb(186 12 47 / 45%);
    }

    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-ten"] .countdown {
        color: var(--red-bright);
        font-size: clamp(4rem, 22vw, 6rem);
    }

    .team-rank {
        font-size: 0.8rem;
    }

    .team-record {
        font-size: 0.65rem;
    }

    .game-center {
        min-height: 160px;
        border: 0;
    }

    .game-center .game-state,
    .game-center .game-clock {
        display: none;
    }

    .game-center .versus {
        display: block;
        color: var(--red-bright);
        font-size: clamp(1.35rem, 7vw, 2rem);
    }

    .situation-band {
        grid-template-columns: minmax(122px, 0.35fr) 1fr;
        min-height: 74px;
        background: linear-gradient(90deg, transparent 0 35%, var(--red) 35% 100%);
    }

    .period-clock {
        gap: 12px;
    }

    .period-clock strong,
    .period-clock span {
        font-size: clamp(1.55rem, 8vw, 2.2rem);
    }

    .situation-band > p {
        padding: 0 12px;
        font-size: clamp(1rem, 5.3vw, 1.42rem);
        line-height: 1.12;
    }

    .field-wrap {
        grid-template-columns: 38px 1fr 38px;
        min-height: 128px;
    }

    .field-end {
        font-size: 0.83rem;
    }

    .last-play {
        grid-template-columns: 1fr;
        padding: 14px 10px 20px;
    }

    .last-play h2 {
        font-size: 1.35rem;
    }

    .last-play > p,
    .drive-context {
        grid-column: 1;
    }

    .last-play > p {
        padding-left: 14px;
        border-left: 3px solid var(--red-bright);
        font-size: 1rem;
        line-height: 1.5;
    }

    .drive-context {
        margin-top: 9px !important;
    }

    .rankings-rail,
    .around-rail {
        grid-area: supporting;
        margin-top: 10px;
    }

    body[data-state="scheduled"] .scoreboard,
    body[data-state="pregame"] .scoreboard {
        min-height: 300px;
        padding: 18px 4px 10px;
        border-bottom: 1px solid rgb(255 255 255 / 24%);
        background:
            radial-gradient(ellipse 46% 76% at 20% 48%, rgb(1 5 8 / 60%), transparent 76%),
            radial-gradient(ellipse 46% 76% at 80% 48%, rgb(1 5 8 / 60%), transparent 76%);
        text-shadow: 0 3px 12px rgb(0 0 0 / 95%);
    }

    body[data-state="scheduled"] .rankings-rail,
    body[data-state="pregame"] .rankings-rail {
        display: block;
    }

    body[data-state="scheduled"] .schedule-rail,
    body[data-state="pregame"] .schedule-rail {
        display: flex;
        grid-area: schedule;
    }

    body[data-state="scheduled"] .masthead,
    body[data-state="pregame"] .masthead {
        padding: 12px 0 8px;
        background: linear-gradient(180deg, rgb(1 4 7 / 68%), transparent);
        text-shadow: 0 3px 10px rgb(0 0 0 / 88%);
    }

    body[data-state="scheduled"] .kickoff-panel,
    body[data-state="pregame"] .kickoff-panel {
        padding: 18px 12px 22px;
        border-top: 2px solid var(--red-bright);
        background: linear-gradient(180deg, rgb(2 7 10 / 72%), rgb(2 7 10 / 88%));
        box-shadow: 0 14px 28px rgb(0 0 0 / 30%);
        backdrop-filter: blur(5px);
    }

    body[data-state="scheduled"] .countdown,
    body[data-state="pregame"] .countdown,
    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-hour"] .countdown,
    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-ten"] .countdown {
        color: var(--white);
        font-size: clamp(2.75rem, 15vw, 4rem);
        text-shadow: 0 4px 14px rgb(0 0 0 / 95%);
    }

    body[data-state="scheduled"] .intel-panel,
    body[data-state="pregame"] .intel-panel,
    body[data-state="scheduled"] .supporting-rail,
    body[data-state="pregame"] .supporting-rail {
        margin-top: 8px;
        padding: 0 12px 12px;
        border: 1px solid rgb(255 255 255 / 20%);
        border-top: 3px solid var(--red-bright);
        background: linear-gradient(180deg, rgb(3 8 11 / 88%), rgb(3 8 11 / 76%));
        box-shadow: 0 16px 34px rgb(0 0 0 / 34%);
        backdrop-filter: blur(7px);
    }

    body[data-state="scheduled"] .intel-panel,
    body[data-state="pregame"] .intel-panel {
        padding-bottom: 18px;
    }

    body[data-state="scheduled"] .schedule-row,
    body[data-state="pregame"] .schedule-row,
    body[data-state="scheduled"] .rank-row,
    body[data-state="pregame"] .rank-row {
        min-height: 54px;
        padding: 8px 6px;
    }

    body[data-state="scheduled"] .schedule-row,
    body[data-state="pregame"] .schedule-row {
        grid-template-columns: 24px 30px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
    }

    body[data-state="scheduled"] .rank-row,
    body[data-state="pregame"] .rank-row {
        grid-template-columns: 30px 30px minmax(0, 1fr);
    }

    body[data-state="scheduled"] .schedule-week,
    body[data-state="pregame"] .schedule-week,
    body[data-state="scheduled"] .rail-team-logo,
    body[data-state="pregame"] .rail-team-logo,
    body[data-state="scheduled"] .schedule-opponent,
    body[data-state="pregame"] .schedule-opponent {
        grid-row: 1 / 3;
    }

    body[data-state="scheduled"] .schedule-result,
    body[data-state="pregame"] .schedule-result {
        grid-column: 4;
        justify-self: end;
    }

    body[data-state="scheduled"] .schedule-date,
    body[data-state="pregame"] .schedule-date {
        grid-column: 3 / 5;
        justify-self: end;
    }

    body[data-state="scheduled"] .schedule-result,
    body[data-state="pregame"] .schedule-result {
        grid-row: 1;
    }

    body[data-state="scheduled"] .schedule-date,
    body[data-state="pregame"] .schedule-date {
        grid-row: 2;
        color: var(--muted);
        font-size: 0.58rem;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .line-score-grid {
        grid-template-columns: minmax(84px, 1fr) repeat(var(--periods, 4), 38px) 46px;
        overflow-x: auto;
    }

    .line-cell {
        padding: 7px 6px;
        font-size: 0.86rem;
    }

    .outcome p {
        font-size: clamp(2.2rem, 12vw, 3.8rem);
    }
}

@media (max-width: 430px) {
    .gameday-shell {
        gap: 10px;
    }

    .scoreboard {
        min-height: 222px;
    }

    .team-mark-button,
    .opponent-mark {
        width: min(25vw, 96px);
        min-height: 64px;
    }

    .team-record {
        display: none;
    }

    .team-score {
        font-size: clamp(4rem, 22vw, 5.5rem);
    }

    .field-wrap {
        min-height: 110px;
    }

    .countdown {
        font-size: clamp(3.4rem, 19vw, 5rem);
    }
}

@media (min-width: 1101px) {
    body[data-state="scheduled"],
    body[data-state="pregame"] {
        background: #030608;
    }

    body[data-state="scheduled"]::before,
    body[data-state="pregame"]::before {
        background:
            linear-gradient(180deg, rgb(1 4 7 / 42%) 0, rgb(1 4 7 / 8%) 32%, rgb(1 4 7 / 15%) 68%, rgb(1 4 7 / 88%) 100%),
            url("/images/backgrounds/uga-day-game-desktop.jpg") center 50% / cover no-repeat;
    }

    body[data-scenario="pregame-night"]::before {
        background:
            linear-gradient(180deg, rgb(1 2 4 / 38%) 0, rgb(1 2 4 / 8%) 34%, rgb(1 2 4 / 18%) 66%, rgb(1 2 4 / 90%) 100%),
            url("/images/backgrounds/uga-night-game.jpg") center 48% / cover no-repeat;
    }

    body[data-state="scheduled"]::after,
    body[data-state="pregame"]::after {
        right: 0;
        bottom: 0;
        left: 0;
        height: 25vh;
        background: linear-gradient(180deg, transparent, rgb(1 4 6 / 82%) 52%, #030608 100%);
        filter: none;
    }

    body[data-state="scheduled"] .stadium-lights,
    body[data-state="pregame"] .stadium-lights {
        display: none;
    }

    body[data-state="scheduled"] .gameday-shell,
    body[data-state="pregame"] .gameday-shell {
        grid-template-areas:
            "mast mast mast"
            "schedule score supporting"
            "schedule kickoff supporting"
            "intel intel intel";
        grid-template-columns: clamp(292px, 20.8vw, 360px) minmax(0, 1fr) clamp(292px, 20.8vw, 360px);
        grid-template-rows: 96px minmax(300px, 1fr) clamp(180px, 23vh, 245px) clamp(158px, 18vh, 196px);
        gap: 0;
        padding: 0;
    }

    body[data-state="scheduled"] .masthead,
    body[data-state="pregame"] .masthead {
        grid-template-columns: 1fr auto 1fr;
        min-height: 0;
        padding: 12px 28px 8px;
        background: linear-gradient(180deg, rgb(1 4 7 / 80%), transparent);
    }

    body[data-state="scheduled"] .masthead-rule,
    body[data-state="pregame"] .masthead-rule {
        display: none;
    }

    body[data-state="scheduled"] .local-time,
    body[data-state="pregame"] .local-time {
        display: block;
        grid-column: 1;
        justify-self: start;
        margin: 0;
        padding-left: 12px;
        color: rgb(255 255 255 / 88%);
        font-family: var(--display);
        font-size: clamp(1.75rem, 2vw, 2.4rem);
        letter-spacing: 0.055em;
        line-height: 1;
        text-shadow: 0 2px 8px rgb(0 0 0 / 100%);
        text-transform: uppercase;
    }

    body[data-state="scheduled"] .brand-lockup,
    body[data-state="pregame"] .brand-lockup {
        grid-column: 2;
        min-width: min(46vw, 620px);
    }

    body[data-state="scheduled"] .brand,
    body[data-state="pregame"] .brand {
        font-size: clamp(2.4rem, 3.4vw, 4rem);
        letter-spacing: 0.025em;
        text-shadow: 0 3px 12px rgb(0 0 0 / 78%);
    }

    body[data-state="scheduled"] .brand-subtitle,
    body[data-state="pregame"] .brand-subtitle {
        color: rgb(255 255 255 / 82%);
        font-size: clamp(0.58rem, 0.72vw, 0.84rem);
        text-shadow: 0 2px 8px rgb(0 0 0 / 92%);
    }

    body[data-state="scheduled"] .message,
    body[data-state="pregame"] .message {
        display: flex;
        grid-column: 3;
        align-items: center;
        justify-content: flex-end;
        width: min(100%, 420px);
        min-height: 2.5em;
        color: rgb(255 255 255 / 82%);
        font-size: clamp(1rem, 1.12vw, 1.35rem);
        font-weight: 800;
        line-height: 1.25;
        text-shadow: 0 2px 8px rgb(0 0 0 / 100%);
        white-space: pre-line;
    }

    body[data-state="scheduled"] .supporting-rail,
    body[data-state="pregame"] .supporting-rail {
        align-self: stretch;
        min-height: 0;
        margin-bottom: 14px;
        border: 1px solid rgb(255 255 255 / 20%);
        border-top: 3px solid var(--red-bright);
        background: linear-gradient(180deg, rgb(3 8 11 / 96%), rgb(3 7 9 / 91%));
        box-shadow: 0 16px 42px rgb(0 0 0 / 36%);
        backdrop-filter: blur(7px);
    }

    body[data-state="scheduled"] .schedule-rail,
    body[data-state="pregame"] .schedule-rail {
        grid-row: 2 / 4;
        margin-left: 18px;
        padding: 0 14px 10px;
    }

    body[data-state="scheduled"] .rankings-rail,
    body[data-state="pregame"] .rankings-rail {
        grid-row: 2 / 4;
        margin-right: 18px;
        padding: 0 14px 10px;
    }

    body[data-state="scheduled"] .supporting-rail h2,
    body[data-state="pregame"] .supporting-rail h2 {
        padding: 14px 0 8px;
        font-size: clamp(1.25rem, 1.55vw, 1.8rem);
        line-height: 1;
    }

    body[data-state="scheduled"] .rankings-rail h2 span,
    body[data-state="pregame"] .rankings-rail h2 span {
        color: var(--red-bright);
    }

    body[data-state="scheduled"] .schedule-list,
    body[data-state="pregame"] .schedule-list {
        min-height: 0;
    }

    body[data-state="scheduled"] .schedule-row,
    body[data-state="pregame"] .schedule-row {
        grid-template-columns: 24px 28px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        min-height: 0;
        padding: 5px 6px;
        font-size: clamp(0.67rem, 0.76vw, 0.9rem);
        line-height: 1.05;
    }

    body[data-state="scheduled"] .schedule-week,
    body[data-state="pregame"] .schedule-week,
    body[data-state="scheduled"] .rail-team-logo,
    body[data-state="pregame"] .rail-team-logo,
    body[data-state="scheduled"] .schedule-opponent,
    body[data-state="pregame"] .schedule-opponent {
        grid-row: 1 / 3;
    }

    body[data-state="scheduled"] .schedule-result,
    body[data-state="pregame"] .schedule-result {
        grid-column: 4;
        justify-self: end;
    }

    body[data-state="scheduled"] .schedule-date,
    body[data-state="pregame"] .schedule-date {
        grid-column: 3 / 5;
        justify-self: end;
    }

    body[data-state="scheduled"] .schedule-result,
    body[data-state="pregame"] .schedule-result {
        grid-row: 1;
    }

    body[data-state="scheduled"] .schedule-date,
    body[data-state="pregame"] .schedule-date {
        grid-row: 2;
        color: var(--muted);
        font-size: 0.58rem;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    body[data-state="scheduled"] .schedule-row.is-current,
    body[data-state="pregame"] .schedule-row.is-current {
        border-left: 4px solid var(--red-bright);
        background: linear-gradient(90deg, rgb(186 12 47 / 58%), rgb(186 12 47 / 14%));
    }

    body[data-state="scheduled"] .timezone-note,
    body[data-state="pregame"] .timezone-note {
        margin-top: 7px;
        font-size: 0.56rem;
    }

    body[data-state="scheduled"] .rankings-source,
    body[data-state="pregame"] .rankings-source {
        margin-bottom: 7px;
        color: rgb(255 255 255 / 68%);
    }

    body[data-state="scheduled"] .rank-row,
    body[data-state="pregame"] .rank-row {
        grid-template-columns: 24px 28px minmax(0, 1fr);
        flex: 1;
        min-height: 0;
        padding: 5px 4px;
        font-size: clamp(0.7rem, 0.78vw, 0.9rem);
    }

    body[data-state="scheduled"] .rankings-rail,
    body[data-state="pregame"] .rankings-rail,
    body[data-state="scheduled"] .rankings-list,
    body[data-state="pregame"] .rankings-list {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    body[data-state="scheduled"] .rankings-list,
    body[data-state="pregame"] .rankings-list {
        flex: 1;
        margin-bottom: 18px;
    }

    body[data-state="scheduled"] .rail-team-logo,
    body[data-state="pregame"] .rail-team-logo {
        width: 24px;
        height: 24px;
    }

    body[data-state="scheduled"] .rank-row.is-georgia,
    body[data-state="pregame"] .rank-row.is-georgia {
        background: linear-gradient(90deg, rgb(186 12 47 / 58%), rgb(186 12 47 / 14%));
    }

    body[data-state="scheduled"] .scoreboard,
    body[data-state="pregame"] .scoreboard {
        grid-template-columns: minmax(0, 1fr) clamp(72px, 7vw, 118px) minmax(0, 1fr);
        align-self: stretch;
        min-height: 0;
        padding: 8px clamp(18px, 2vw, 36px) 0;
        border: 0;
        background:
            radial-gradient(ellipse 38% 76% at 22% 52%, rgb(1 5 8 / 56%), transparent 74%),
            radial-gradient(ellipse 38% 76% at 78% 52%, rgb(1 5 8 / 56%), transparent 74%);
        text-shadow: 0 3px 13px rgb(0 0 0 / 95%);
    }

    body[data-state="scheduled"] .team,
    body[data-state="pregame"] .team,
    body[data-state="scheduled"] .team-opponent,
    body[data-state="pregame"] .team-opponent {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: clamp(126px, 15vh, 190px) auto auto;
        align-content: center;
        align-items: center;
        gap: 6px 10px;
        min-width: 0;
        padding: 0;
        text-align: center;
    }

    body[data-state="scheduled"] .team-mark-button,
    body[data-state="pregame"] .team-mark-button,
    body[data-state="scheduled"] .opponent-mark,
    body[data-state="pregame"] .opponent-mark {
        grid-column: 2;
        grid-row: 1;
        width: clamp(150px, 16vw, 270px);
        height: 100%;
        min-height: 0;
        margin-inline: auto;
    }

    body[data-state="scheduled"] .team-mark,
    body[data-state="pregame"] .team-mark {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 8px 16px rgb(0 0 0 / 56%));
    }

    body[data-state="scheduled"] .opponent-logo,
    body[data-state="pregame"] .opponent-logo {
        width: auto;
        height: auto;
        max-width: 92%;
        max-height: clamp(104px, 13vh, 164px);
        object-fit: contain;
        filter: drop-shadow(0 8px 16px rgb(0 0 0 / 56%));
    }

    body[data-state="scheduled"] .team-copy,
    body[data-state="pregame"] .team-copy {
        display: contents;
    }

    body[data-state="scheduled"] .team-name,
    body[data-state="pregame"] .team-name {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        max-width: 100%;
        font-size: clamp(2rem, 3vw, 3.8rem);
        line-height: 0.9;
        text-wrap: balance;
    }

    body[data-state="scheduled"] .team.is-long-name .team-name,
    body[data-state="pregame"] .team.is-long-name .team-name {
        font-size: clamp(1.65rem, 2.4vw, 3rem);
    }

    body[data-state="scheduled"] .team-rank,
    body[data-state="pregame"] .team-rank {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        margin-right: 2px;
        font-size: clamp(1rem, 1.35vw, 1.6rem);
    }

    body[data-state="scheduled"] .team-record,
    body[data-state="pregame"] .team-record {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: center;
        color: rgb(255 255 255 / 78%);
        font-size: clamp(0.68rem, 0.8vw, 0.92rem);
    }

    body[data-state="scheduled"] .team-score,
    body[data-state="pregame"] .team-score {
        display: none;
    }

    body[data-state="scheduled"] .game-center,
    body[data-state="pregame"] .game-center {
        position: relative;
        min-height: 56%;
        border: 0;
    }

    body[data-state="scheduled"] .game-center::before,
    body[data-state="scheduled"] .game-center::after,
    body[data-state="pregame"] .game-center::before,
    body[data-state="pregame"] .game-center::after {
        display: none;
    }

    body[data-state="scheduled"] .versus,
    body[data-state="pregame"] .versus {
        color: rgb(255 255 255 / 76%);
        font-size: clamp(1.1rem, 1.45vw, 1.65rem);
        text-shadow: 0 3px 11px #000;
    }

    body[data-state="scheduled"] .kickoff-panel,
    body[data-state="pregame"] .kickoff-panel {
        align-self: center;
        justify-self: center;
        width: min(78%, 760px);
        min-height: 0;
        padding: 12px 28px 16px;
        border-top: 1px solid rgb(255 255 255 / 38%);
        background: linear-gradient(90deg, transparent, rgb(2 7 10 / 80%) 18% 82%, transparent);
        text-shadow: 0 3px 12px rgb(0 0 0 / 96%);
    }

    body[data-state="scheduled"] .countdown-label,
    body[data-state="pregame"] .countdown-label {
        color: rgb(255 255 255 / 70%);
        font-size: clamp(0.78rem, 0.95vw, 1.05rem);
        letter-spacing: 0.2em;
    }

    body[data-state="scheduled"] .countdown,
    body[data-state="pregame"] .countdown,
    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-hour"] .countdown,
    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-ten"] .countdown {
        color: var(--white);
        font-size: clamp(3rem, 4.2vw, 5rem);
        line-height: 0.98;
        text-shadow: 0 4px 16px rgb(0 0 0 / 96%);
    }

    body[data-state="scheduled"] .kickoff-date,
    body[data-state="pregame"] .kickoff-date {
        margin-top: 5px;
        font-size: clamp(1rem, 1.35vw, 1.6rem);
    }

    body[data-state="scheduled"] .kickoff-details,
    body[data-state="pregame"] .kickoff-details {
        margin-top: 5px;
        color: rgb(255 255 255 / 76%);
        font-size: clamp(0.64rem, 0.78vw, 0.88rem);
    }

    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-ten"] .scoreboard {
        min-height: 0;
        border-bottom-width: 0;
    }

    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-ten"] .kickoff-panel {
        min-height: 0;
        background: linear-gradient(90deg, transparent, rgb(2 7 10 / 80%) 18% 82%, transparent);
    }

    body[data-state="pregame"] .gameday-shell[data-pregame-intensity="under-ten"] .intel-panel {
        display: block !important;
    }

    body[data-state="scheduled"] .intel-panel,
    body[data-state="pregame"] .intel-panel {
        display: grid;
        grid-template-rows: auto 1fr;
        min-height: 0;
        margin: 0 18px 16px;
        padding: 0 20px 12px;
        border: 1px solid rgb(255 255 255 / 22%);
        border-top: 3px solid var(--red-bright);
        background: linear-gradient(90deg, rgb(3 8 11 / 97%), rgb(3 8 11 / 88%) 72%, rgb(3 8 11 / 96%));
        box-shadow: 0 16px 42px rgb(0 0 0 / 40%);
        backdrop-filter: blur(8px);
    }

    body[data-state="scheduled"] .intel-panel h2,
    body[data-state="pregame"] .intel-panel h2 {
        padding: 8px 0 6px;
        font-size: clamp(1.08rem, 1.35vw, 1.55rem);
    }

    body[data-state="scheduled"] .intel-list,
    body[data-state="pregame"] .intel-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        align-items: stretch;
        border-top: 1px solid rgb(255 255 255 / 17%);
    }

    body[data-state="scheduled"] .intel-item,
    body[data-state="pregame"] .intel-item {
        display: grid;
        align-content: center;
        min-width: 0;
        padding: 9px 24px;
        border-right: 1px solid rgb(255 255 255 / 18%);
        text-align: center;
    }

    body[data-state="scheduled"] .intel-item:last-child,
    body[data-state="pregame"] .intel-item:last-child {
        border-right: 0;
    }

    body[data-state="scheduled"] .intel-label,
    body[data-state="pregame"] .intel-label {
        color: rgb(255 255 255 / 60%);
        font-size: clamp(0.58rem, 0.68vw, 0.76rem);
    }

    body[data-state="scheduled"] .intel-value,
    body[data-state="pregame"] .intel-value {
        margin-top: 4px;
        font-size: clamp(1.15rem, 1.55vw, 1.8rem);
        line-height: 1.08;
        text-wrap: balance;
    }
}

@keyframes live-status-pulse {
    50% {
        opacity: 0.48;
        transform: scale(0.84);
    }
}

@media (min-width: 1101px) {
    body[data-state="live"] {
        background: #020405;
    }

    body[data-state="live"]::before {
        background:
            radial-gradient(circle at 45% 8%, rgb(186 12 47 / 15%), transparent 37%),
            radial-gradient(circle at 75% 27%, color-mix(in srgb, var(--opponent-color, #777) 15%, transparent), transparent 33%),
            repeating-linear-gradient(115deg, transparent 0 34px, rgb(255 255 255 / 1.7%) 35px 36px),
            #020405;
    }

    body[data-state="live"] .scoreboard {
        position: relative;
        min-height: min(32vh, 340px);
        border: 1px solid rgb(255 255 255 / 14%);
        border-bottom: 4px solid var(--red);
        background: linear-gradient(180deg, rgb(12 15 17 / 94%), rgb(3 5 6 / 97%));
        box-shadow: 0 18px 48px rgb(0 0 0 / 40%), inset 0 1px rgb(255 255 255 / 8%);
        isolation: isolate;
    }

    body[data-state="live"] .team {
        grid-template-columns: minmax(148px, 0.62fr) minmax(0, 1fr);
        align-self: stretch;
        column-gap: clamp(16px, 1.2vw, 24px);
        padding: 22px clamp(18px, 1.8vw, 34px) 16px;
        overflow: hidden;
    }

    body[data-state="live"] .team-opponent {
        grid-template-columns: minmax(0, 1fr) minmax(148px, 0.62fr);
    }

    body[data-state="live"] .team::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        content: "";
    }

    body[data-state="live"] .team-georgia::before {
        border-left: 5px solid var(--red-bright);
        background: radial-gradient(circle at 18% 38%, rgb(186 12 47 / 34%), transparent 52%);
    }

    body[data-state="live"] .team-opponent::before {
        border-right: 5px solid var(--opponent-color, #777);
        background: radial-gradient(circle at 82% 38%, color-mix(in srgb, var(--opponent-color, #777) 35%, transparent), transparent 54%);
    }

    body[data-state="live"] .team-mark-button,
    body[data-state="live"] .opponent-mark {
        width: clamp(118px, 8vw, 150px);
    }

    body[data-state="live"] .team-mark,
    body[data-state="live"] .opponent-logo {
        max-height: 130px;
        filter: drop-shadow(0 9px 18px rgb(0 0 0 / 58%));
    }

    body[data-state="live"] .team-name {
        font-size: clamp(2rem, 2.55vw, 3.15rem);
        text-shadow: 0 3px 12px #000;
    }

    body[data-state="live"] .team-rank {
        font-size: clamp(1rem, 1.2vw, 1.4rem);
    }

    body[data-state="live"] .team-score {
        margin-top: -3px;
        font-size: clamp(7rem, 9.6vw, 11.5rem);
        text-shadow: 0 5px 18px rgb(0 0 0 / 64%);
    }

    body[data-state="live"] .game-center {
        position: relative;
        border-color: rgb(255 255 255 / 14%);
        background: linear-gradient(180deg, rgb(255 255 255 / 3%), rgb(0 0 0 / 22%));
        box-shadow: inset 0 0 38px rgb(0 0 0 / 42%);
    }

    body[data-state="live"] .game-state {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: clamp(1.5rem, 2.25vw, 2.8rem);
    }

    body[data-state="live"] .game-state::before {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--red-bright);
        box-shadow: 0 0 15px rgb(226 23 63 / 82%);
        animation: live-status-pulse 1.5s ease-in-out infinite;
        content: "";
    }

    body[data-state="live"] .game-clock {
        font-size: clamp(4rem, 5.4vw, 6.5rem);
        text-shadow: 0 4px 16px #000;
    }

    body[data-state="live"] .possession-arrow {
        top: auto;
        bottom: 15px;
        display: block;
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        color: inherit;
        background: transparent;
        box-shadow: none;
        font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
        font-size: 1.35rem;
        line-height: 1;
    }

    body[data-state="live"] .possession-arrow::after {
        content: none;
    }

    body[data-state="live"] .team-georgia .possession-arrow {
        right: 16px;
        border: 0;
    }

    body[data-state="live"] .team-opponent .possession-arrow {
        left: 16px;
        border: 0;
        background: transparent;
    }

    body[data-state="live"] .situation-band {
        min-height: 84px;
        grid-template-columns: minmax(230px, 0.34fr) 1fr;
        border: 1px solid rgb(255 255 255 / 15%);
        border-top: 0;
        background: linear-gradient(105deg, #0b0e10 0 31%, var(--red) 31% 100%);
        box-shadow: 0 12px 32px rgb(0 0 0 / 30%);
    }

    body[data-state="live"] .period-clock {
        gap: 22px;
        text-shadow: 0 3px 11px #000;
    }

    body[data-state="live"] .period-clock strong {
        color: var(--red-bright);
    }

    body[data-state="live"] .situation-band > p {
        font-size: clamp(1.45rem, 2vw, 2.35rem);
        text-shadow: 0 3px 10px rgb(0 0 0 / 46%);
    }

    body[data-state="live"] .field-wrap {
        min-height: min(19vh, 202px);
        border: 2px solid rgb(255 255 255 / 78%);
        box-shadow: 0 15px 36px rgb(0 0 0 / 34%), inset 0 0 0 1px rgb(0 0 0 / 38%);
    }

    body[data-state="live"] .field-end {
        box-shadow: inset 0 0 30px rgb(0 0 0 / 34%);
        text-shadow: 0 2px 6px rgb(0 0 0 / 58%);
    }

    body[data-state="live"] .last-play {
        min-height: 86px;
        grid-template-columns: minmax(150px, 0.2fr) 1fr;
        align-content: center;
        padding: 10px 18px;
        border: 1px solid rgb(255 255 255 / 13%);
        border-left: 5px solid var(--red-bright);
        background: linear-gradient(90deg, rgb(186 12 47 / 18%), rgb(12 15 17 / 86%) 38%, rgb(5 7 8 / 94%));
        box-shadow: 0 10px 28px rgb(0 0 0 / 26%);
    }

    body[data-state="live"] .last-play h2 {
        align-self: center;
        padding: 0;
        font-size: clamp(1.2rem, 1.5vw, 1.7rem);
    }

    body[data-state="live"] .last-play > p {
        font-size: clamp(1rem, 1.15vw, 1.28rem);
        line-height: 1.25;
    }

    body[data-state="live"] .drive-context {
        margin-top: 7px !important;
        color: rgb(255 255 255 / 60%);
    }

    body[data-state="live"] .line-score {
        border: 1px solid rgb(255 255 255 / 13%);
        background: linear-gradient(180deg, rgb(12 15 17 / 88%), rgb(4 6 7 / 92%));
    }

    body[data-state="live"] .line-score h2 {
        padding: 9px 12px 7px;
    }

    body[data-state="live"] .line-score-grid {
        border-color: rgb(255 255 255 / 14%);
    }

    body[data-state="live"] .around-rail {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0 12px 14px;
        border: 1px solid rgb(255 255 255 / 15%);
        border-top: 3px solid var(--red-bright);
        background: linear-gradient(180deg, rgb(10 14 16 / 96%), rgb(3 6 7 / 94%));
        box-shadow: 0 16px 38px rgb(0 0 0 / 34%);
    }

    body[data-state="live"] .around-rail h2 {
        padding: 14px 2px 11px;
        border-bottom: 1px solid rgb(255 255 255 / 15%);
        font-size: clamp(1.05rem, 1.28vw, 1.45rem);
    }

    body[data-state="live"] #around-list {
        display: grid;
        flex: 1;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding-top: 10px;
    }

    body[data-state="live"] .around-game {
        display: grid;
        align-content: center;
        min-height: 0;
        padding: 12px 10px;
        border: 1px solid rgb(255 255 255 / 12%);
        border-left: 3px solid var(--red);
        background: linear-gradient(110deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%));
    }

    body[data-state="live"] .around-status {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0 0 8px;
        color: rgb(255 255 255 / 64%);
    }

    body[data-state="live"] .around-status::before {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--red-bright);
        box-shadow: 0 0 9px rgb(226 23 63 / 64%);
        content: "";
    }

    body[data-state="live"] .around-team {
        position: relative;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: center;
        gap: 9px;
        margin: 5px 0;
        padding-left: 7px;
        border-left: 3px solid var(--team-accent, rgb(255 255 255 / 18%));
        font-size: clamp(1rem, 1.18vw, 1.35rem);
    }

    body[data-state="live"] .around-team-score {
        min-width: 34px;
        font-size: 1.3em;
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .celebration {
        display: none;
    }
}

/* Live broadcast composition */
@keyframes scoreboard-refresh {
    from {
        opacity: 0.72;
        transform: translateY(2px);
    }
}

.line-10 { left: 10%; }
.line-10::before,
.line-10::after { content: "10"; }
.line-30 { left: 30%; }
.line-30::before,
.line-30::after { content: "30"; }
.line-70 { left: 70%; }
.line-70::before,
.line-70::after { content: "30"; }
.line-90 { left: 90%; }
.line-90::before,
.line-90::after { content: "10"; }

body[data-state="halftime"] .situation-band {
    grid-template-columns: minmax(0, 1fr);
    background: linear-gradient(90deg, #101a1d, #17262a);
}

body[data-state="halftime"] .period-clock {
    min-width: 0;
    gap: 0;
    padding-inline: 14px;
}

body[data-state="halftime"] .period-clock strong {
    font-size: clamp(1.45rem, 5vw, 2.4rem);
}

body[data-state="halftime"] .period-clock span,
body[data-state="halftime"] .situation-band > p,
body[data-state="halftime"] .possession-arrow {
    display: none !important;
}

body[data-state="live"] .field {
    background:
        linear-gradient(180deg, rgb(255 255 255 / 7%), transparent 18% 82%, rgb(0 0 0 / 14%)),
        repeating-linear-gradient(90deg, rgb(255 255 255 / 4%) 0 10%, rgb(0 0 0 / 6%) 10% 20%),
        repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgb(255 255 255 / 62%) calc(10% - 1px) 10%),
        repeating-linear-gradient(0deg, transparent 0 12px, rgb(255 255 255 / 7%) 12px 13px),
        linear-gradient(180deg, #438a45, #286d34 49%, #3d8140);
    box-shadow: inset 0 0 48px rgb(0 0 0 / 24%), inset 0 0 0 1px rgb(255 255 255 / 16%);
}

body[data-state="live"] .field::before,
body[data-state="live"] .field::after {
    height: 10px;
    background: repeating-linear-gradient(90deg, transparent 0 calc(2.5% - 3px), rgb(255 255 255 / 76%) calc(2.5% - 3px) 2.5%);
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 36%));
}

body[data-state="live"] .yard-line::before,
body[data-state="live"] .yard-line::after {
    color: rgb(255 255 255 / 82%);
    font-size: clamp(0.72rem, 0.92vw, 1.05rem);
    text-shadow: 0 2px 3px rgb(0 0 0 / 72%);
}

body[data-state="live"] .first-down-marker {
    width: 5px;
    background: #ffdc00;
    box-shadow: 0 0 8px rgb(255 220 0 / 92%), 0 0 22px rgb(255 220 0 / 40%);
}

body[data-state="live"] .ball-marker {
    width: 5px;
    background: #2aa9ff;
    box-shadow: 0 0 9px rgb(42 169 255 / 95%), 0 0 24px rgb(42 169 255 / 42%);
}

body[data-state="live"] .field-football-emoji {
    font-size: 2rem;
}

@media (min-width: 1101px) {
    body[data-state="live"] {
        background: #081012;
    }

    body[data-state="live"]::before {
        background:
            radial-gradient(circle at 30% 9%, rgb(186 12 47 / 24%), transparent 38%),
            radial-gradient(circle at 76% 24%, color-mix(in srgb, var(--opponent-color, #777) 23%, transparent), transparent 36%),
            radial-gradient(circle at 50% 100%, rgb(47 112 55 / 22%), transparent 43%),
            linear-gradient(145deg, #101a1d 0%, #081113 48%, #0b1715 100%);
    }

    body[data-state="live"] .gameday-shell {
        gap: 8px 16px;
        padding: 12px 16px 14px;
    }

    body[data-state="live"] .masthead {
        grid-template-columns: 1fr auto 1fr;
        height: 96px;
        min-height: 0;
        padding: 12px 28px 8px;
        background: linear-gradient(180deg, rgb(1 4 7 / 80%), transparent);
    }

    body[data-state="live"] .masthead-rule {
        display: none;
    }

    body[data-state="live"] .local-time {
        display: block;
        grid-column: 1;
        justify-self: start;
        margin: 0;
        padding-left: 12px;
        color: rgb(255 255 255 / 88%);
        font-family: var(--display);
        font-size: clamp(1.75rem, 2vw, 2.4rem);
        letter-spacing: 0.055em;
        line-height: 1;
        text-shadow: 0 2px 8px rgb(0 0 0 / 100%);
        text-transform: uppercase;
    }

    body[data-state="live"] .brand-lockup {
        grid-column: 2;
        min-width: min(46vw, 620px);
    }

    body[data-state="live"] .brand {
        font-size: clamp(2.4rem, 3.4vw, 4rem);
        letter-spacing: 0.025em;
        text-shadow: 0 3px 12px rgb(0 0 0 / 78%);
    }

    body[data-state="live"] .brand-subtitle {
        color: rgb(255 255 255 / 82%);
        font-size: clamp(0.58rem, 0.72vw, 0.84rem);
        text-shadow: 0 2px 8px rgb(0 0 0 / 92%);
    }

    body[data-state="live"] .message {
        display: flex;
        grid-column: 3;
        align-items: center;
        justify-content: flex-end;
        width: min(100%, 420px);
        min-height: 0;
        overflow: visible;
        color: rgb(255 255 255 / 82%);
        font-size: clamp(1rem, 1.12vw, 1.35rem);
        font-weight: 800;
        line-height: 1.25;
        text-shadow: 0 2px 8px rgb(0 0 0 / 100%);
        white-space: pre-line;
    }

    body[data-state="live"] .scoreboard {
        min-height: min(25vh, 268px);
        overflow: hidden;
        border-bottom-width: 3px;
        background: linear-gradient(180deg, rgb(21 29 31 / 94%), rgb(9 16 18 / 96%));
    }

    body[data-state="live"] .scoreboard::before {
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
            radial-gradient(circle at 17% 46%, rgb(186 12 47 / 52%), transparent 42%),
            radial-gradient(circle at 83% 46%, color-mix(in srgb, var(--opponent-color, #777) 50%, transparent), transparent 44%),
            linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 48%);
        content: "";
        opacity: 1;
    }

    body[data-state="live"] .scoreboard::after {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(90deg, rgb(46 3 14 / 46%), rgb(8 14 16 / 68%) 43% 57%, color-mix(in srgb, var(--opponent-color, #777) 30%, rgb(8 14 16 / 82%)) 100%);
        content: "";
        opacity: 1;
    }

    body[data-state="live"] .team {
        grid-template-columns: minmax(118px, 0.55fr) minmax(0, 1fr);
        column-gap: clamp(12px, 1vw, 20px);
        padding: 12px clamp(14px, 1.4vw, 26px) 9px;
    }

    body[data-state="live"] .team-opponent {
        grid-template-columns: minmax(0, 1fr) minmax(118px, 0.55fr);
    }

    body[data-state="live"] .team-mark-button,
    body[data-state="live"] .opponent-mark {
        width: clamp(108px, 7.2vw, 138px);
    }

    body[data-state="live"] .team-mark,
    body[data-state="live"] .opponent-logo {
        max-height: 112px;
    }

    body[data-state="live"] .team-name {
        font-size: clamp(1.8rem, 2.15vw, 2.7rem);
    }

    body[data-state="live"] .team-score {
        margin-top: -7px;
        font-size: clamp(6.5rem, 8.15vw, 9.4rem);
        line-height: 0.8;
    }

    body[data-state="live"] .game-state {
        font-size: clamp(1.35rem, 1.85vw, 2.2rem);
    }

    body[data-state="live"] .game-clock {
        font-size: clamp(3.7rem, 4.65vw, 5.45rem);
    }

    body[data-state="live"] .possession-arrow {
        top: auto;
        bottom: 10px;
        display: block;
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        color: inherit;
        background: transparent;
        box-shadow: none;
        font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
        font-size: 1.35rem;
        line-height: 1;
    }

    body[data-state="live"] .possession-arrow::after {
        content: none;
    }

    body[data-state="live"] .team-georgia .possession-arrow {
        right: 16px;
        border: 0;
    }

    body[data-state="live"] .team-opponent .possession-arrow {
        left: 16px;
        border: 0;
        background: transparent;
    }

    body[data-state="live"] .situation-band {
        min-height: 56px;
        grid-template-columns: minmax(205px, 0.29fr) 1fr;
        background: linear-gradient(108deg, #080b0d 0 29%, #a80829 29%, #d51139 74%, #990723 100%);
    }

    body[data-state="live"] .period-clock {
        gap: 15px;
    }

    body[data-state="live"] .period-clock strong {
        font-size: clamp(1.45rem, 1.9vw, 2.25rem);
    }

    body[data-state="live"] .period-clock span {
        font-size: clamp(1.8rem, 2.25vw, 2.7rem);
    }

    body[data-state="live"] .situation-band > p {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding-inline: 18px;
        font-size: clamp(1.25rem, 1.6vw, 1.88rem);
        text-transform: uppercase;
    }

    body[data-state="live"] .field-wrap {
        grid-template-columns: clamp(62px, 5.2vw, 88px) 1fr clamp(62px, 5.2vw, 88px);
        min-height: min(25vh, 270px);
    }

    body[data-state="live"] .field-end {
        font-size: clamp(1.25rem, 1.55vw, 1.9rem);
        letter-spacing: 0.09em;
    }

    body[data-state="live"] .last-play {
        min-height: 70px;
        grid-template-columns: minmax(145px, 0.18fr) 1fr;
        padding: 8px 16px;
        background: linear-gradient(90deg, rgb(186 12 47 / 34%), rgb(14 23 25 / 92%) 34%, rgb(8 15 17 / 94%));
    }

    body[data-state="live"] .schedule-rail,
    body[data-state="live"] .around-rail {
        border: 1px solid rgb(255 255 255 / 18%);
        border-top: 3px solid var(--red-bright);
        background: linear-gradient(180deg, rgb(17 27 30 / 96%), rgb(8 15 17 / 94%));
        box-shadow: 0 16px 38px rgb(0 0 0 / 24%), inset 0 1px rgb(255 255 255 / 5%);
    }

    body[data-state="live"] .schedule-rail {
        padding: 0 9px 8px;
    }

    body[data-state="live"] .schedule-row {
        grid-template-columns: 30px 50px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 5px 9px;
        padding: 9px 7px;
        background: linear-gradient(90deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1.5%));
    }

    body[data-state="live"] .schedule-row.is-current {
        background: linear-gradient(90deg, rgb(186 12 47 / 24%), rgb(255 255 255 / 7%));
    }

    body[data-state="live"] .rail-team-logo {
        width: 46px;
        height: 46px;
        padding: 3px;
        border-radius: 8px;
        background: rgb(246 245 239 / 94%);
        box-shadow: 0 5px 13px rgb(0 0 0 / 32%), inset 0 0 0 1px rgb(0 0 0 / 10%);
        opacity: 1;
    }

    body[data-state="live"] .schedule-week,
    body[data-state="live"] .schedule-row > .rail-team-logo {
        grid-row: 1 / 3;
    }

    body[data-state="live"] .schedule-opponent {
        grid-row: 1;
        align-self: end;
        min-width: 0;
        overflow: hidden;
        font-size: clamp(0.83rem, 0.94vw, 1.08rem);
        line-height: 1.08;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body[data-state="live"] .schedule-result {
        grid-row: 1;
        align-self: end;
        font-size: clamp(0.8rem, 0.9vw, 1rem);
    }

    body[data-state="live"] .schedule-date {
        grid-row: 2;
        align-self: start;
        font-size: clamp(0.62rem, 0.67vw, 0.73rem);
    }

    body[data-state="live"] .line-score {
        background: linear-gradient(180deg, rgb(17 27 30 / 92%), rgb(8 15 17 / 94%));
    }

    body[data-state="live"] .last-play h2 {
        font-size: clamp(1.18rem, 1.4vw, 1.62rem);
    }

    body[data-state="live"] .line-score h2 {
        padding: 7px 10px 5px;
    }

    body[data-state="live"] .line-cell {
        padding-block: 6px;
    }

    body[data-state="live"] .around-rail {
        padding: 0 9px 9px;
    }

    body[data-state="live"] .around-rail h2 {
        padding: 11px 2px 8px;
        font-size: clamp(0.98rem, 1.12vw, 1.3rem);
    }

    body[data-state="live"] #around-list {
        grid-template-rows: repeat(5, minmax(0, 1fr));
        gap: 6px;
        padding-top: 6px;
    }

    body[data-state="live"] .around-game {
        grid-template-rows: auto 1fr 1fr;
        padding: 9px 10px 10px;
        border-color: rgb(255 255 255 / 18%);
        background:
            radial-gradient(circle at 100% 0, rgb(57 111 122 / 13%), transparent 52%),
            linear-gradient(120deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%));
        animation: none;
    }

    body[data-state="live"] .around-status {
        margin-bottom: 7px;
        color: rgb(255 255 255 / 76%);
        font-size: 0.7rem;
    }

    body[data-state="live"] .around-status::before {
        width: 6px;
        height: 6px;
    }

    body[data-state="live"] .around-team {
        grid-template-columns: 50px minmax(0, 1fr) auto;
        gap: 10px;
        min-height: 51px;
        margin: 2px 0;
        padding: 3px 8px 3px 5px;
        border-left-width: 5px;
        border-radius: 0 8px 8px 0;
        background: linear-gradient(90deg, color-mix(in srgb, var(--team-accent, #607d86) 24%, transparent), rgb(255 255 255 / 3%) 72%);
        font-size: clamp(1.02rem, 1.14vw, 1.3rem);
    }

    body[data-state="live"] .around-team-mark {
        width: 46px;
        height: 46px;
        padding: 4px;
        border-radius: 9px;
        color: #111719;
        background: rgb(246 245 239 / 96%);
        box-shadow: 0 5px 13px rgb(0 0 0 / 34%), inset 0 0 0 1px rgb(0 0 0 / 11%);
    }

    body[data-state="live"] .around-team-logo {
        width: 100%;
        height: 100%;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        filter: drop-shadow(0 1px 1px rgb(0 0 0 / 24%));
    }

    body[data-state="live"] .around-team-fallback {
        color: #111719;
        font-size: 0.72rem;
        font-weight: 900;
        text-shadow: none;
    }

    body[data-state="live"] .around-team-score {
        min-width: 38px;
        font-size: 1.34em;
    }
}

@media (max-width: 1100px) {
    body[data-state="live"] {
        background: #081012;
    }

    body[data-state="live"]::before {
        background:
            radial-gradient(circle at 34% 8%, rgb(186 12 47 / 22%), transparent 34%),
            radial-gradient(circle at 76% 25%, color-mix(in srgb, var(--opponent-color, #777) 20%, transparent), transparent 38%),
            radial-gradient(circle at 48% 100%, rgb(47 112 55 / 20%), transparent 38%),
            linear-gradient(150deg, #101a1d 0%, #081113 50%, #0b1715 100%);
    }

    body[data-state="live"] .gameday-shell {
        gap: 16px;
    }

    body[data-state="live"] .scoreboard {
        position: relative;
        min-height: clamp(278px, 50vw, 350px);
        overflow: hidden;
        border: 1px solid rgb(255 255 255 / 13%);
        border-bottom: 3px solid var(--red-bright);
        background: linear-gradient(90deg, rgb(104 3 27 / 78%), rgb(10 18 20 / 90%) 43% 57%, color-mix(in srgb, var(--opponent-color, #777) 56%, #0a1214));
        box-shadow: 0 16px 34px rgb(0 0 0 / 32%);
    }

    body[data-state="live"] .team-georgia::before,
    body[data-state="live"] .team-opponent::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        content: "";
    }

    body[data-state="live"] .team-georgia::before {
        background: radial-gradient(circle at 30% 25%, rgb(226 23 63 / 28%), transparent 58%);
    }

    body[data-state="live"] .team-opponent::before {
        background: radial-gradient(circle at 70% 25%, color-mix(in srgb, var(--opponent-color, #777) 30%, transparent), transparent 58%);
    }

    body[data-state="live"] .possession-arrow {
        position: static;
        order: 4;
        display: block;
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
        font-size: 1.05rem;
        line-height: 1;
    }

    body[data-state="live"] .possession-arrow::after {
        content: none;
    }

    body[data-state="live"] .team-opponent .possession-arrow {
        border: 0;
        background: transparent;
    }

    body[data-state="live"] .situation-band {
        min-height: 76px;
        background: linear-gradient(104deg, #080b0d 0 34%, #a80829 34%, #d51139 100%);
    }

    body[data-state="live"] .situation-band > p {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-transform: uppercase;
    }

    body[data-state="live"] .field-wrap {
        min-height: clamp(142px, 28vw, 180px);
        border-color: rgb(255 255 255 / 82%);
        box-shadow: 0 13px 30px rgb(0 0 0 / 30%);
    }

    body[data-state="live"] .last-play {
        border: 1px solid rgb(255 255 255 / 13%);
        border-left: 5px solid var(--red-bright);
        background: linear-gradient(120deg, rgb(186 12 47 / 30%), rgb(12 21 23 / 92%) 44%);
    }

    body[data-state="live"] .around-rail {
        padding: 0 12px 12px;
        border: 1px solid rgb(255 255 255 / 14%);
        border-top: 3px solid var(--red-bright);
        background: linear-gradient(180deg, rgb(17 27 30 / 96%), rgb(8 15 17 / 94%));
    }

    body[data-state="live"] .schedule-rail {
        padding: 0 12px 12px;
        border: 1px solid rgb(255 255 255 / 14%);
        border-top: 3px solid var(--red-bright);
        background: linear-gradient(180deg, rgb(17 27 30 / 96%), rgb(8 15 17 / 94%));
        box-shadow: 0 14px 30px rgb(0 0 0 / 22%);
    }

    body[data-state="live"] .schedule-row {
        grid-template-columns: 28px 48px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 6px 10px;
        min-height: 76px;
        padding: 9px 8px;
        background: linear-gradient(90deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1.5%));
    }

    body[data-state="live"] .schedule-row > .rail-team-logo {
        grid-row: 1 / 3;
        width: 44px;
        height: 44px;
        padding: 3px;
        border-radius: 8px;
        background: rgb(246 245 239 / 94%);
        box-shadow: 0 5px 13px rgb(0 0 0 / 32%), inset 0 0 0 1px rgb(0 0 0 / 10%);
    }

    body[data-state="live"] .schedule-week {
        grid-row: 1 / 3;
    }

    body[data-state="live"] .schedule-opponent {
        grid-row: 1;
        align-self: end;
        min-width: 0;
        overflow: hidden;
        font-size: clamp(0.9rem, 3.8vw, 1.1rem);
        line-height: 1.08;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body[data-state="live"] .schedule-result {
        grid-row: 1;
        align-self: end;
    }

    body[data-state="live"] .schedule-date {
        grid-row: 2;
        align-self: start;
    }

    body[data-state="live"] .around-game {
        padding: 12px 10px;
        animation: none;
    }

    body[data-state="live"] .around-status {
        margin-bottom: 6px;
    }

    body[data-state="live"] .around-team {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        min-height: 52px;
        margin: 4px 0;
        padding: 4px 8px 4px 5px;
        border-left: 5px solid var(--team-accent, rgb(255 255 255 / 18%));
        border-radius: 0 8px 8px 0;
        background: linear-gradient(90deg, color-mix(in srgb, var(--team-accent, #607d86) 24%, transparent), rgb(255 255 255 / 3%) 72%);
        font-size: clamp(1rem, 4.5vw, 1.28rem);
    }

    body[data-state="live"] .around-team-mark {
        width: 44px;
        height: 44px;
        padding: 4px;
        border-radius: 9px;
        color: #111719;
        background: rgb(246 245 239 / 96%);
        box-shadow: 0 5px 13px rgb(0 0 0 / 34%), inset 0 0 0 1px rgb(0 0 0 / 11%);
    }

    body[data-state="live"] .around-team-logo {
        width: 100%;
        height: 100%;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        filter: drop-shadow(0 1px 1px rgb(0 0 0 / 24%));
    }

    body[data-state="live"] .around-team-fallback {
        color: #111719;
        font-size: 0.7rem;
        font-weight: 900;
        text-shadow: none;
    }

    body[data-state="live"] .around-team-score {
        min-width: 34px;
        text-align: right;
    }
}

/* Mobile live: stadium-night color system with possession and lead awareness. */
@media (max-width: 1100px) {
    body[data-state="live"] {
        background: #0d1c20;
    }

    body[data-state="live"]::before {
        background:
            radial-gradient(circle at 88% 11%, color-mix(in srgb, var(--opponent-color, #607d86) 34%, transparent), transparent 34%),
            radial-gradient(circle at 8% 19%, rgb(186 12 47 / 20%), transparent 31%),
            radial-gradient(ellipse at 50% 90%, rgb(67 122 70 / 25%), transparent 48%),
            linear-gradient(155deg, #182d33 0%, #0c1a1e 44%, #13251f 100%);
    }

    body[data-state="live"]::after {
        right: -20vw;
        bottom: -8vh;
        left: -20vw;
        height: 34vh;
        background: radial-gradient(ellipse at center, rgb(72 132 75 / 46%), transparent 69%);
        filter: blur(22px);
    }

    body[data-state="live"] .masthead {
        padding-block: 8px 14px;
    }

    body[data-state="live"] .scoreboard {
        align-items: stretch;
        border-color: rgb(255 255 255 / 22%);
        border-bottom-color: var(--leader-color, var(--red));
        background: #102125;
        box-shadow: 0 18px 40px rgb(0 0 0 / 29%), inset 0 1px rgb(255 255 255 / 13%);
    }

    body[data-state="live"] .team-georgia {
        --team-identity-ink: var(--georgia-ink, #fff);

        color: var(--team-identity-ink);
        background: var(--georgia-color, #999999);
    }

    body[data-state="live"] .team-georgia::before {
        border-left-color: var(--georgia-color, #999999);
        background: none;
    }

    body[data-state="live"] .team-opponent {
        --team-identity-ink: var(--opponent-ink, #fff);

        color: var(--team-identity-ink);
        background: var(--opponent-color, #999999);
    }

    body[data-state="live"] .team .team-name,
    body[data-state="live"] .team .team-rank,
    body[data-state="live"] .team .team-record,
    body[data-state="live"] .team .team-score {
        color: var(--team-identity-ink);
    }

    body[data-state="live"] .team-opponent .opponent-logo {
        filter:
            drop-shadow(0 0 2px rgb(255 255 255 / 96%))
            drop-shadow(0 7px 14px rgb(0 0 0 / 38%));
    }

    body[data-state="live"] .team {
        gap: 5px;
        min-width: 0;
        justify-content: center;
        padding: 12px 4px 8px;
    }

    body[data-state="live"] .team-mark-button,
    body[data-state="live"] .opponent-mark {
        flex: 0 0 auto;
        width: min(30vw, 136px);
        height: min(22.222vw, 101px);
        min-height: 0;
        aspect-ratio: auto;
    }

    body[data-state="live"] .team-mark,
    body[data-state="live"] .opponent-logo {
        width: 100%;
        height: min(22.222vw, 101px);
        max-width: 100%;
        max-height: min(22.222vw, 101px);
        object-fit: contain;
        object-position: center;
    }

    body[data-state="live"] .team-copy {
        position: relative;
        display: grid;
        min-height: 54px;
        align-content: center;
        justify-items: center;
    }

    body[data-state="live"] .team.is-leading::after {
        position: absolute;
        top: 7px;
        z-index: 2;
        padding: 3px 7px;
        border: 1px solid var(--leader-ink, #fff);
        border-radius: 999px;
        color: var(--leader-ink, #fff);
        background: var(--leader-color, #999999);
        box-shadow: 0 4px 12px rgb(0 0 0 / 26%);
        font-family: var(--sans);
        font-size: 0.55rem;
        font-weight: 900;
        letter-spacing: 0.11em;
        line-height: 1;
        text-transform: uppercase;
        content: "Leads";
    }

    body[data-state="live"] .team-georgia.is-leading::after {
        left: 7px;
        border-color: var(--georgia-ink, #fff);
        background: var(--georgia-color, #999999);
    }

    body[data-state="live"] .team-opponent.is-leading::after {
        right: 7px;
    }

    body[data-state="live"] .team-score {
        color: rgb(255 255 255 / 76%);
        text-shadow: 0 5px 18px rgb(0 0 0 / 42%);
    }

    body[data-state="live"] .team.is-leading .team-score {
        color: var(--team-identity-ink);
        text-shadow:
            0 0 22px color-mix(in srgb, var(--leader-color, #999999) 48%, transparent),
            0 5px 18px rgb(0 0 0 / 54%);
    }

    body[data-state="live"] .gameday-shell[data-possession="georgia"] .team-georgia,
    body[data-state="live"] .gameday-shell[data-possession="opponent"] .team-opponent {
        background: var(--possession-color, #999999);
        box-shadow: inset 0 4px var(--possession-ink, #fff);
    }

    body[data-state="live"] .gameday-shell[data-possession="georgia"] .team-georgia {
        background: var(--georgia-color, #999999);
        box-shadow: inset 0 4px var(--georgia-ink, #fff);
    }

    body[data-state="live"] .gameday-shell[data-leader="georgia"] .scoreboard {
        border-bottom-color: var(--georgia-color, #999999);
    }

    body[data-state="live"] .game-center .versus {
        color: #f3d88f;
        text-shadow: 0 3px 11px rgb(0 0 0 / 52%);
    }

    body[data-state="live"] .situation-band {
        grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
        border: 1px solid rgb(255 255 255 / 18%);
        background: linear-gradient(104deg, #11262c 0 34%, var(--possession-color, #999999) 34% 100%);
        box-shadow: 0 13px 28px rgb(0 0 0 / 24%), inset 0 1px rgb(255 255 255 / 12%);
    }

    body[data-state="live"] .situation-band > p {
        min-width: 0;
        padding-inline: 8px;
        color: var(--possession-ink, #fff);
        font-size: clamp(0.92rem, 4.2vw, 1.2rem);
        line-height: 1.12;
    }

    body[data-state="live"] .gameday-shell[data-possession="georgia"] .situation-band {
        background: linear-gradient(104deg, #11262c 0 34%, var(--georgia-color, #999999) 34% 100%);
    }

    body[data-state="live"] .period-clock strong {
        color: #f0d18a;
        font-size: clamp(1.05rem, 5.2vw, 1.45rem);
    }

    body[data-state="live"] .period-clock {
        min-width: 0;
        gap: clamp(4px, 1.6vw, 8px);
        padding-inline: 6px;
    }

    body[data-state="live"] .period-clock span {
        font-size: clamp(1.2rem, 6.1vw, 1.7rem);
    }

    body[data-state="live"] .last-play {
        border-color: rgb(255 255 255 / 17%);
        border-left-color: var(--possession-color, #999999);
        background:
            radial-gradient(circle at 0 50%, color-mix(in srgb, var(--possession-color, #607d86) 27%, transparent), transparent 46%),
            linear-gradient(120deg, rgb(23 48 54 / 92%), rgb(12 28 31 / 96%));
    }

    body[data-state="live"] .last-play h2 {
        color: #fff;
    }

    body[data-state="live"] .gameday-shell[data-possession="georgia"] .last-play {
        border-left-color: var(--georgia-color, #999999);
        background:
            radial-gradient(circle at 0 50%, color-mix(in srgb, var(--georgia-color, #607d86) 27%, transparent), transparent 46%),
            linear-gradient(120deg, rgb(23 48 54 / 92%), rgb(12 28 31 / 96%));
    }

    body[data-state="live"] .gameday-shell[data-possession="georgia"] .last-play h2 {
        color: #fff;
    }

    body[data-state="live"] .line-score {
        border-color: rgb(255 255 255 / 16%);
        background: linear-gradient(180deg, rgb(22 45 49 / 94%), rgb(11 27 30 / 96%));
    }

    body[data-state="live"] .line-score h2,
    body[data-state="live"] .around-rail h2,
    body[data-state="live"] .schedule-rail h2 {
        color: #f0d18a;
    }

    body[data-state="live"] .around-rail,
    body[data-state="live"] .schedule-rail {
        border-color: rgb(255 255 255 / 17%);
        border-top-color: #d9b96f;
        background: linear-gradient(180deg, rgb(21 44 49 / 96%), rgb(10 27 30 / 96%));
    }
}