:root {
    --navy: #0b3a6f;
    --navy-dark: #082b52;
    --gold: #ffd447;
    --background: #f4f7fb;
    --card: #ffffff;
    --text: #102a43;
    --muted: #66788a;
    --border: #d8e1ea;
    --danger: #b42318;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--background);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

.appHeader {
    display: flex;
    align-items: center;

    min-height: 96px;
    padding: 14px 22px;

    background: linear-gradient(
        135deg,
        var(--navy-dark),
        var(--navy)
    );

    border-radius: 0 0 22px 22px;
    color: white;
}

.appBrand {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
}

.appLogo {
    width: 280px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 0;
    background: transparent;
}

.appBrandWords {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.appBrandName {
    color: white;
    font-size: 34px;
    font-weight: 950;
    letter-spacing: 1px;
}

.appTagline {
    color: var(--gold);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
}

.appTeamBadge {
    margin-left: auto;
    padding: 10px 18px;

    border-radius: 999px;
    background: var(--gold);

    color: var(--navy-dark);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 1px;
}

.backButton {
    display: block;
    width: fit-content;
    margin: 0;

    border: 2px solid var(--navy);
    border-radius: 10px;
    padding: 10px 14px;

    background: white;
    color: var(--navy);
    font-weight: 800;
    cursor: pointer;
}

.topNavButtons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 14px 0 24px 24px;
}

.topNavButtons .backButton,
.topNavButtons .homeButton {
    margin: 0;
}

.homeButton {
    width: 46px;
    height: 46px;
    border: 2px solid var(--navy);
    border-radius: 10px;
    padding: 0;
    background: white;
    color: var(--navy);
    font-size: 21px;
    cursor: pointer;
}

.hidden {
    display: none !important;
}

.appContainer {
    width: min(100%, 900px);
    margin: 0 auto;
    padding: 30px 18px 60px;   
}

#liveGameScreen {
    margin-top: -18px;
}

.screen {
    display: none;
}

.activeScreen {
    display: block;
}

#homeScreen {
    width: 100%;
    margin: 0 auto;
}

.menuButton {
    width: 100%;
    min-height: 88px;
    margin-bottom: 18px;
    border: none;
    border-radius: 16px;
    padding: 20px;
    background: var(--gold);
    color: var(--navy-dark);
    font-size: 24px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(11, 58, 111, 0.12);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.menuButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(11, 58, 111, 0.18);
}

.sectionHeading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.sectionHeading h2 {
    margin: 0;
    color: var(--navy-dark);
    font-size: 34px;
}

.sectionHeading p {
    margin: 7px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.primaryButton,
.secondaryButton,
.saveButton,
.cancelButton {
    border: none;
    border-radius: 12px;
    padding: 12px 17px;
    font-weight: 900;
}

.primaryButton,
.saveButton {
    background: var(--navy);
    color: white;
}

.secondaryButton {
    background: var(--gold);
    color: var(--navy-dark);
}

.cancelButton {
    background: #e6ebf0;
    color: var(--text);
}

.teamsList {
    display: grid;
    gap: 14px;
}

.emptyState {
    padding: 44px 24px;
    border: 2px dashed var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.65);
    text-align: center;
}

.emptyState h2,
.emptyState h3 {
    margin-top: 0;
    color: var(--navy-dark);
}

.emptyState p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.5;
}

.teamCard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 7px 18px rgba(16, 42, 67, 0.08);
}

.teamCard h3 {
    margin: 0;
    color: var(--navy-dark);
}

.teamCard p {
    margin: 6px 0 0;
    color: var(--muted);
}

.teamCardActions {
    display: flex;
    gap: 8px;
}

.smallButton {
    border: none;
    border-radius: 9px;
    padding: 9px 12px;
    background: #eaf1f8;
    color: var(--navy-dark);
    font-weight: 800;
}

.deleteButton {
    background: #fee4e2;
    color: var(--danger);
}

.setupForm {
    display: grid;
    gap: 18px;
}

.formCard {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 7px 18px rgba(16, 42, 67, 0.07);
}

.formCard h3 {
    margin: 0 0 18px;
    color: var(--navy-dark);
    font-size: 22px;
}

.cardHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
}

.cardHeading h3 {
    margin: 0;
}

.formField {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
    color: var(--navy-dark);
    font-weight: 800;
}

.formField:last-child {
    margin-bottom: 0;
}

.formField input {
    width: 100%;
    min-height: 48px;
    border: 2px solid var(--border);
    border-radius: 11px;
    padding: 10px 12px;
    background: white;
    color: var(--text);
}

.formField input:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(11, 58, 111, 0.12);
}

.rosterEditor {
    display: grid;
    gap: 10px;
}

.rosterRow {
    display: grid;
    grid-template-columns: 90px 1fr 40px 168px;
    gap: 9px;
    align-items: center;
}

.rosterRow input {
    min-height: 46px;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 9px 10px;
}

.rosterHeader {
    display: grid;
    grid-template-columns: 90px 1fr 40px 168px;
    gap: 9px;
    align-items: center;
    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 800;
    color: var(--navy-dark);
}

.rosterHeader span:nth-child(3) {
    text-align: center;
    transform: translateX(-12px);
}

.rosterRow .keepAtTopOption span {
    display: none;
}

.removePlayerButton {
    min-height: 46px;
    border: none;
    border-radius: 10px;
    padding: 9px 12px;
    background: #fee4e2;
    color: var(--danger);
    font-weight: 900;
}

.statChoiceGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

/* "Opponent" heading inside the team statistics choices (spans the grid). */
.statChoiceGroupHeading {
    grid-column: 1 / -1;
    margin: 8px 0 0;
    color: var(--danger);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.statChoice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: #fbfdff;
}

.statChoice input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.statChoice strong {
    display: block;
    color: var(--navy-dark);
}

.statChoice small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    line-height: 1.35;
}

/* Compact stat choices used during game setup */

#gameTeamStatChoices,
#gamePlayerStatChoices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.gameStatChoice {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 10px 12px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--navy-dark);
    font-weight: 700;
    cursor: pointer;
}

.gameStatChoice input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
}

.gameStatChoice:has(input:checked) {
    background: var(--navy-dark);
    border-color: var(--navy-dark);
    color: #ffffff;
}

.gameStatChoice:has(input:checked) input {
    accent-color: #ffd447;
}

@media (max-width: 900px) {
    #gameTeamStatChoices,
    #gamePlayerStatChoices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    #gameTeamStatChoices,
    #gamePlayerStatChoices {
        grid-template-columns: 1fr;
    }
}

.statChoice {
    transition: 0.15s ease;
}

.statChoice:has(input:checked) {
    background: var(--navy);
    border-color: var(--navy);
    box-shadow: 0 5px 12px rgba(16, 42, 67, 0.16);
}

.statChoice:has(input:checked) strong {
    color: white;
}

.statChoice:has(input:checked) small {
    color: rgba(255, 255, 255, 0.82);
}

.statChoice input {
    accent-color: var(--gold);
}

.formNote {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.formActions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 650px) {
    .appHeader {
        min-height: 150px;
    }

    .backButton {
        top: 14px;
        left: 14px;
    }

    .sectionHeading {
        flex-direction: column;
    }

    .primaryButton {
        width: 100%;
    }

    .statChoiceGrid {
        grid-template-columns: 1fr;
    }

    .rosterRow {
        grid-template-columns: 70px 1fr;
    }

    .removePlayerButton {
        grid-column: 1 / -1;
    }

    .teamCard {
        align-items: flex-start;
        flex-direction: column;
    }

    .teamCardActions {
        width: 100%;
    }

    .smallButton {
        flex: 1;
    }

    .formActions {
        flex-direction: column-reverse;
    }

    .saveButton,
    .cancelButton {
        width: 100%;
    }
}

/* TEAM DETAILS SCREEN */

.detailsList {
    display: grid;
    gap: 10px;
}

.detailsPlayer {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fbfdff;
}

.detailsPlayerNumber {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 34px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--navy-dark);
    font-weight: 900;
}

.detailsPlayerName {
    color: var(--navy-dark);
    font-weight: 800;
}

.detailsStatGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.detailsStat {
    padding: 14px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: #fbfdff;
}

.detailsStat strong {
    display: block;
    color: var(--navy-dark);
}

.detailsStat small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    line-height: 1.4;
}

@media (max-width: 650px) {
    .detailsStatGrid {
        grid-template-columns: 1fr;
    }

    #startTeamGameButton {
        width: 100%;
    }
}

/* NEW GAME + CONFIRMATION */

.optionGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.optionCard {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 14px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: #fbfdff;
    color: var(--navy-dark);
    font-weight: 850;
    cursor: pointer;
}

.optionCard:has(input:checked) {
    border-color: var(--navy);
    background: #eaf1f8;
}

.optionCard input {
    width: 20px;
    height: 20px;
    accent-color: var(--navy);
}

.confirmationHeader {
    margin-bottom: 22px;
    padding: 28px 22px;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        var(--navy-dark),
        var(--navy)
    );
    color: white;
    text-align: center;
}

.confirmationHeader h2,
.confirmationHeader h3 {
    margin: 0;
}

.confirmationHeader h2 {
    font-size: 30px;
}

.confirmationHeader h3 {
    font-size: 26px;
}

.versusText {
    margin: 12px 0;
    color: var(--gold);
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
}

#confirmationGameDetails {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 700;
}

.focusList {
    display: grid;
    gap: 10px;
}

.focusItem {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 13px 14px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: #fbfdff;
    color: var(--navy-dark);
    font-weight: 850;
}

.focusCheck {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--navy-dark);
    font-weight: 950;
}

@media (max-width: 650px) {
    .optionGrid {
        grid-template-columns: 1fr;
    }

    .confirmationHeader h2 {
        font-size: 26px;
    }

    .confirmationHeader h3 {
        font-size: 23px;
    }
}

/* LIVE GAME TRACKER */

.liveGameHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        var(--navy-dark),
        var(--navy)
    );
    color: white;
}

.liveGameLogo {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 0 8px;
}

.liveGameHeader h2 {
    margin: 0;
    font-size: 27px;
}

#liveGameDetails {
    margin: 7px 0 0;
    color: rgba(255,255,255,.8);
    font-weight: 700;
}

.liveGameHeaderControls {
    margin-left: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 200px;
}

.liveGameHeaderControls .editGameSetupButton {
    width: 200px;
    align-self: center;
}

.liveGameHeaderControls .periodControl {
    width: 200px;
    margin-top: 32px;
    align-self: center;
}

.liveGameHeaderControls .periodControl select {
    width: 200px;
}

.liveGameHeaderControls .editGameSetupButton {
    align-self: flex-end;
}

.liveGameHeaderControls .periodControl {
    margin-top: 32px;
    align-self: center;
}

.periodControl {
    display: grid;
    gap: 8px;
    min-width: 160px;
    font-weight: 900;
    justify-items: center;
}

.periodControl {
    display: grid;
    gap: 8px;
    min-width: 160px;
    font-weight: 900;
}

.periodControl select {
    width: 160px;
    min-height: 60px;
    border: 0;
    border-radius: 12px;
    padding: 10px 16px;
    background: white;
    color: var(--navy-dark);
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
}

.trackerTabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 18px;
    border-bottom: 2px solid var(--border);
}

.trackerTab {
    min-height: 54px;
    border: 0;
    border-bottom: 4px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 18px;
    font-weight: 950;
}

.activeTrackerTab {
    border-bottom-color: var(--navy);
    color: var(--navy);
}

.trackerTotal {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 6px;
    transform: translateY(-2px);
    justify-content: center;
    color: var(--navy);
    font-size: 18px;
    font-weight: 950;
}

.trackerPanel {
    display: none;
}

.activeTrackerPanel {
    display: block;
}

.trackerHeading {
    margin: 0 0 12px;
    color: var(--navy-dark);
    font-size: 20px;
}

.playerBench {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 18px;
}

.benchDivider {
    grid-column: 1 / -1;
    width: 100%;
    margin: 6px 0 2px;
    padding: 10px 0;
    border-top: 2px solid var(--navy);
    border-bottom: 2px solid var(--navy);
    color: var(--navy);
    font-size: 18px;
    font-weight: 950;
    text-align: center;
    letter-spacing: 1px;
}

.benchPlayerButton {
    min-height: 58px;
    border: 2px solid var(--border);
    border-radius: 13px;
    padding: 10px;
    background: white;
    color: var(--navy-dark);
    font-weight: 900;
}

.benchPlayerButton:hover {
    border-color: var(--navy);
}

.selectedBenchPlayer {
    border-color: var(--navy);
    background: var(--navy);
    color: white;
    box-shadow: 0 7px 16px rgba(11,58,111,.2);
}

.selectedPlayerArea {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: white;
    box-shadow: 0 6px 18px rgba(16,42,67,.07);
}

.selectedPlayerHeader {
    margin-bottom: 14px;
}

.smallLabel {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .7px;
}

#selectedPlayerName {
    margin: 0;
    color: var(--navy-dark);
    font-size: 24px;
}

.liveStatGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.liveStatButton {
    min-height: 92px;
    border: 0;
    border-radius: 15px;
    padding: 12px;
    background: var(--gold);
    color: var(--navy-dark);
    box-shadow: 0 6px 14px rgba(16,42,67,.1);
    font-weight: 950;
}

.liveStatButtonName {
    display: block;
    font-size: 16px;
    line-height: 1.15;
}

.liveStatButtonTotal {
    display: block;
    margin-top: 7px;
    font-size: 30px;
    line-height: 1;
}

.lastActionBar {
    position: sticky;
    bottom: 10px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 26px rgba(16,42,67,.15);
}

#lastActionText {
    margin: 0;
    color: var(--navy-dark);
    font-weight: 850;
}

.undoButton {
    min-width: 110px;
    min-height: 48px;
    border: 0;
    border-radius: 11px;
    background: var(--navy);
    color: white;
    font-weight: 950;
}

.undoButton:disabled {
    opacity: .35;
    cursor: default;
}

.finishGameArea {
    margin-top: 20px;
    text-align: center;
}

.finishGameButton {
    min-height: 48px;
    border: 2px solid var(--navy);
    border-radius: 11px;
    padding: 10px 18px;
    background: white;
    color: var(--navy);
    font-weight: 900;
}

@media (max-width: 650px) {
    .liveGameHeader {
        flex-direction: column;
    }

    .periodControl {
        width: 100%;
    }

    .playerBench {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .liveStatGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lastActionBar {
        align-items: stretch;
        flex-direction: column;
    }

    .undoButton {
        width: 100%;
    }
}
/* PLAYER POINTS TRACKER */

.playerPointsCard {
    grid-column: 1 / -1;
    padding: 16px;
    border: 2px solid var(--border);
    border-radius: 15px;
    background: white;
}

.playerPointsHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    color: var(--navy-dark);
    font-weight: 950;
}

.playerPointsHeading span {
    font-size: 18px;
}

.playerPointsHeading strong {
    font-size: 34px;
}

.playerPointsButtons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pointsAddButton {
    min-height: 58px;
    border: 0;
    border-radius: 12px;
    background: var(--gold);
    color: var(--navy-dark);
    font-size: 22px;
    font-weight: 950;
}
/* BENCH PLAYER SCORING */

.benchPlayerButton {
    position: relative;
    text-align: left;
    padding: 12px 42px 12px 12px;
}

.benchPlayerNumber {
    display: block;
    font-size: 13px;
    opacity: 0.75;
}

.benchPlayerName {
    display: block;
    margin-top: 3px;
    font-size: 16px;
    line-height: 1.15;
}

.benchPlayerPoints {
    position: absolute;
    top: 9px;
    right: 11px;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 30px;
    height: 30px;

    border-radius: 999px;

    background: var(--gold);
    color: var(--navy-dark);

    font-size: 17px;
    font-weight: 950;
}

.selectedBenchPlayer .benchPlayerPoints {
    background: white;
    color: var(--navy-dark);
}

/* TRANSITION POINTS CONTROL */

.transitionPointsCard {
    grid-column: 1 / -1;
    padding: 10px 16px;
    border-radius: 15px;
    background: #174F9E;
color: white;
}

.transitionPointsHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-weight: 950;
}

.transitionPointsHeading span {
    font-size: 18px;
}

.transitionPointsHeading strong {
    font-size: 32px;
}

.transitionPointsButtons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.transitionAddButton {
    min-height: 52px;
    border: 2px solid var(--navy);
    border-radius: 11px;
    background: white;
    color: white;
    font-size: 20px;
    font-weight: 950;
}

/* GAME SUMMARY */

.scoreEntryGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.scoreEntryGrid .formField {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.scoreEntryGrid .formField input {
    margin-top: 8px;
}

.summaryPlayerList {
    display: grid;
    gap: 14px;
}

.summaryPlayerCard {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fbfdff;
}

.summaryPlayerCard h4 {
    margin: 0 0 10px;
    color: var(--navy-dark);
    font-size: 18px;
}

.summaryPlayerStatsGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.summaryStatBox {
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 11px;
    background: white;
    text-align: center;
}

.summaryStatBox strong {
    display: block;
    color: var(--navy-dark);
    font-size: 22px;
}

.summaryStatBox span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 650px) {
    .scoreEntryGrid {
        grid-template-columns: 1fr 1fr;
    }

    .summaryPlayerStatsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* PAST GAMES */

.pastGamesList {
    display: grid;
    gap: 12px;
}

.pastGameCard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: white;
    box-shadow: 0 6px 16px rgba(16, 42, 67, 0.07);
}

.pastGameInfo h4 {
    margin: 0;
    color: var(--navy-dark);
    font-size: 18px;
}

.pastGameInfo p {
    margin: 5px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.gameResultBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 32px;
    margin-right: 8px;
    border-radius: 999px;
    font-weight: 950;
}

.gameResultWin {
    background: #dcfce7;
    color: #166534;
}

.gameResultLoss {
    background: #fee2e2;
    color: #991b1b;
}

.gameResultTie {
    background: #e5e7eb;
    color: #374151;
}

.viewGameButton {
    border: none;
    border-radius: 10px;
    padding: 10px 13px;
    background: var(--navy);
    color: white;
    font-weight: 900;
}

@media (max-width: 650px) {
    .pastGameCard {
        align-items: flex-start;
        flex-direction: column;
    }

    .viewGameButton {
        width: 100%;
    }
}
/* PLAYER CARDS */

.playerBench {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.playerCard {
    position: relative;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: white;
    box-shadow: 0 6px 16px rgba(16, 42, 67, 0.08);
}

.playerCardHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.playerSubButton {
    align-self: center;
    min-width: 86px;
    padding: 8px 12px;
    border: 2px solid var(--navy);
    border-radius: 9px;
    background: white;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.pendingSubButton {
    background: var(--gold);
    color: var(--navy-dark);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 200, 50, 0.25);
}
.playerCardNumber {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}

.playerCardName {
    display: block;
    margin-top: 2px;
    color: var(--navy-dark);
    font-size: 18px;
    line-height: 1.15;
}

.playerCardPoints {
    min-width: 58px;
    text-align: right;
}

.playerCardPoints strong {
    display: block;
    color: var(--navy-dark);
    font-size: 30px;
    line-height: 1;
}

.playerCardPoints span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .6px;
}

.playerCardScoring {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.playerCardPointButton {
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    background: var(--gold);
    color: var(--navy-dark);
    font-size: 20px;
    font-weight: 950;
    touch-action: manipulation;
}

.playerCardStats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.playerCardStatButton {
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #f7f9fc;
    color: var(--navy-dark);
    font-size: 13px;
    font-weight: 900;
    touch-action: manipulation;
}

.playerCardUndoButton {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 9px;
    background: var(--navy-dark);
    color: white;
    font-size: 14px;
    font-weight: 900;
}

@media (max-width: 800px) {
    .playerBench {
        grid-template-columns: 1fr;
    }

    .playerCardStats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.playerCardStatButton {
    min-height: 42px;
    border: 0;
    border-radius: 9px;
    background: var(--navy);
    color: white;
    font-size: 13px;
    font-weight: 900;
}

.playerCardStatButton:hover {
    filter: brightness(1.08);
}

.playerCardStatButton:active {
    transform: scale(0.97);
}
.playerCardStatButton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
}

.playerCardStatButton strong {
    min-width: 24px;
    text-align: right;
    font-size: 18px;
}
.lastActionBar[hidden] {
    display: none !important;
}

/* COMPACT PLAYER SUMMARY */

.compactPlayerSummary {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: white;
}

.compactPlayerHeader {
    margin-bottom: 10px;
    color: var(--navy-dark);
    font-size: 17px;
}

.compactPlayerStats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.compactPlayerStat {
    display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
    padding: 8px 10px;
    border-radius: 9px;
    background: #f7f9fc;
    color: var(--navy-dark);
}

.compactPlayerStat span {
    font-size: 12px;
    font-weight: 800;
}

.compactPlayerStat strong {
    font-size: 17px;
}

@media (max-width: 800px) {
    .compactPlayerStats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* PLAYER BOX SCORE */

.boxScoreWrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: white;
}

.boxScoreWrap > h3 {
    margin: 0;
    padding: 18px 18px 14px;
    color: var(--navy-dark);
    font-size: 20px;
    font-weight: 800;
}

.boxScoreTable {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.boxScoreTable thead {
    background: var(--navy);
    color: white;
}

.boxScoreTable th,
.boxScoreTable td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    font-size: 14px;
}

.boxScoreTable th {
    font-weight: 900;
    letter-spacing: .3px;
}

.boxScoreTable td {
    color: var(--navy-dark);
    font-weight: 700;
}

.teamSummaryTable th:first-child,
.teamSummaryTable td:first-child {
    width: 34%;
}

.teamSummaryTable th:not(:first-child),
.teamSummaryTable td:not(:first-child) {
    width: 16.5%;
    text-align: center;
}

.summaryTotalsRow td {
    background: #f3f6fa;
    font-weight: 900;
    border-top: 3px solid var(--navy-dark);
}

.boxScoreTable th:nth-child(2),
.boxScoreTable td:nth-child(2) {
    text-align: left;
}

.playerNameCell {
    font-weight: 900;
}

.boxScoreTable tbody tr:last-child td {
    border-bottom: none;
}

/* TEAM SUMMARY TABLE */

.teamSummaryTable {
    min-width: 0;
    width: 100%;
}

.teamSummaryTable th:first-child,
.teamSummaryTable td:first-child {
    width: 28%;
}

.teamSummaryTable th:not(:first-child),
.teamSummaryTable td:not(:first-child) {
    width: 12%;
    text-align: center;
}

#summaryTeamStats {
    display: block;
    width: 100%;
}

#summaryTeamStats .boxScoreWrap {
    width: 100%;
    overflow-x: visible;
}

/* TEAM STAT CARDS */

.teamStatCardGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
    width: 100%;
    grid-column: 1 / -1;
    align-self: stretch;
}
#teamStatButtons {
    width: 100%;
}

.teamStatCard {
    display: flex;
    flex-direction: column;
    min-height: 135px;
    overflow: hidden;
    border-radius: 14px;
    color: white;
    box-shadow: 0 6px 16px rgba(16, 42, 67, 0.12);
}

.teamStatCardControls {
    margin-top: auto;
}

.teamStatCardName {
    padding: 14px 12px 4px;
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.teamStatCardTotal {
    padding: 2px 12px 12px;
    text-align: center;
    font-size: 40px;
    font-weight: 950;
    line-height: 1;
}

.teamStatCardControls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.fieldGoalCard .teamStatCardControls,
.threePointerCard .teamStatCardControls,
.freeThrowCard .teamStatCardControls {
    grid-template-columns: repeat(3, 1fr);
}

.teamStatCard.fieldGoalCard,
.teamStatCard.threePointerCard,
.teamStatCard.freeThrowCard {
    background: #174F9E;
    color: white;
}

.fieldGoalCard .teamStatCardControls button,
.threePointerCard .teamStatCardControls button,
.freeThrowCard .teamStatCardControls button {
    color: white;
}

.teamStatCardControls button {
    min-height: 44px;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font-size: 18px;
    font-weight: 950;
}

.teamStatCardControls button + button {
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.teamStatGreen {
    background: #2f8f3a;
}

.teamStatBlue {
    background: #174F9E;
}

.teamStatPurple {
    background: #6a42bd;
}

.teamStatOrange {
    background: #f06a00;
}

.teamStatGray {
    background: #5d646b;
}

.teamStatRed {
    background: #d61f2c;
}

.teamStatTeal {
    background: #178d84;
}

.teamStatPink {
    background: #d92f67;
}

.freeThrowCard {
    background: #087f8c;
}

.fieldGoalCard {
    background: #8b1e3f;
}
.transitionPointsCard {
    width: 100%;
    border-radius: 14px;
    background: #174F9E;
color: white;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(16, 42, 67, 0.12);
}

.transitionPointsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 10px;
    font-size: 16px;
    font-weight: 950;
    text-transform: uppercase;
}

.transitionPointsHeader strong {
    font-size: 34px;
    line-height: 1;
}

.transitionPointsButtons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(16, 42, 67, 0.2);
}

.transitionPointsButtons button {
    min-height: 46px;
    border: 0;
    background: rgba(255, 255, 255, 0.18);
    color: white;
    font-size: 17px;
    font-weight: 950;
}

.transitionPointsButtons button + button {
    border-left: 1px solid rgba(16, 42, 67, 0.2);
}

@media (max-width: 900px) {
    .teamStatCardGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .teamStatCardGrid {
        grid-template-columns: 1fr;
    }
}

/* COURT94 HOME SCREEN */

#homeScreen {
    min-height: 100vh;
    padding: 28px;
    background:
        linear-gradient(
            180deg,
            #f5f8fc 0%,
            #eef3f9 100%
        );
}

.homeHero {
    max-width: 980px;
    margin: 0 auto 28px;
    padding: 34px 28px;
    text-align: center;
    background: var(--navy);
    border-radius: 24px;
    box-shadow: 0 12px 30px rgba(16, 42, 67, 0.14);
}

.homeLogo {
    width: 150px;
    height: 150px;
    object-fit: contain;
    display: block;
    margin: 0 auto 14px;
}

.homeHero h1 {
    margin: 0;
    color: white;
    font-size: 42px;
    font-weight: 950;
    letter-spacing: 3px;
}

.homeTagline {
    margin: 8px 0 0;
    color: var(--gold);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
}

.homeMenu {
    width: min(1100px, calc(100% - 48px));
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.homeMenuCard {
    width: 100%;
    min-height: 145px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;

    padding: 20px 22px;

    border: 1px solid var(--border);
    border-radius: 18px;
    background: white;

    color: var(--navy-dark);
    text-align: left;

    box-shadow: 0 8px 22px rgba(16, 42, 67, 0.08);
}

.homeMenuCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 42, 67, 0.13);
}

#teamsBtn {
    background: #123b66;
    color: white;
}

#teamsBtn .homeMenuText strong {
    color: white;
}
#reportsBtn .homeMenuText strong,
#settingsBtn .homeMenuText strong {
    color: white;
}

#teamsBtn .homeMenuArrow,
#reportsBtn .homeMenuArrow,
#settingsBtn .homeMenuArrow {
    color: white;
}

#gamesBtn {
    background: #ffcc33;
    color: var(--navy-dark);
}

#reportsBtn {
    background: #2e9b5f;
    color: white;
}

#settingsBtn {
    background: #8b8f97;
    color: white;
}

#teamsBtn small,
#reportsBtn small,
#settingsBtn small {
    color: rgba(255, 255, 255, 0.88);
}

#gamesBtn small {
    color: rgba(10, 42, 67, 0.82);
}

.homeMenuIcon {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;
    background: transparent;

    font-size: 34px;
}

.teamsPeopleIcon svg {
    width: 64px;
    height: 52px;
    fill: white;
    display: block;
}

.reportsChartIcon svg {
    width: 58px;
    height: 52px;
    fill: white;
    display: block;
}

.homeMenuText {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.homeMenuText strong {
    font-size: 21px;
    font-weight: 950;
    color: var(--navy-dark);
}

.homeMenuText small {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

.homeMenuArrow {
    font-size: 34px;
    font-weight: 700;
    color: var(--navy);
}

@media (max-width: 700px) {
    #homeScreen {
        padding: 18px;
    }

    .homeHero {
        padding: 26px 20px;
    }

    .homeLogo {
        width: 120px;
        height: 120px;
    }

    .homeHero h1 {
        font-size: 32px;
    }

    .homeMenu {
        grid-template-columns: 1fr;
    }
}

/* =========================
   REPORTS
========================= */

#reportsScreen {
    padding: 28px;
}

.reportsHeader {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-bottom: 28px;
}

.reportsHeader h2 {
    margin: 0;
    color: #082b55;
    font-size: 32px;
}

.reportsFilters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
}

.reportsTeamFilter,
.reportsSeasonFilter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 700;
    color: #082b55;
}

.reportsTeamFilter select,
.reportsSeasonFilter select {
    min-width: 220px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    font-size: 16px;
}

.reportsSeasonFilter select {
    min-width: 150px;
}

.reportsTeamSection {
    width: 100%;
}

.reportsTeamSection h3 {
    margin-bottom: 10px;
    color: #082b55;
}

.reportsTeamCards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.reportsTeamCard {
    min-height: 58px;
    padding: 12px 16px;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    background: white;
    color: #082b55;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.reportsTeamCard:hover {
    border-color: #082b55;
}

.reportsTeamCard.activeReportsTeamCard {
    background: #082b55;
    border-color: #082b55;
    color: white;
}

@media (max-width: 700px) {
    .reportsTeamCards {
        grid-template-columns: 1fr;
    }
}

#reportsContent {
    width: 100%;
}

.reportSection {
    background: white;
    border: 1px solid #dbe3ec;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.reportSection h3 {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 3px solid #d5a928;
    color: #082b55;
    font-size: 24px;
}

.reportOverviewGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.reportStatCard {
    background: #f7f9fc;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.reportStatLabel {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.reportStatValue {
    display: block;
    color: #082b55;
    font-size: 30px;
    font-weight: 800;
}

@media (max-width: 800px) {
    .reportsHeader {
        align-items: stretch;
        flex-direction: column;
    }

    .reportsFilters {
        flex-direction: column;
        align-items: stretch;
    }

    .reportsTeamFilter select,
    .reportsSeasonFilter select {
        width: 100%;
    }

    .reportOverviewGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.reportTeamAverages {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #dbe3ec;
}

.reportTeamAverages h4 {
    margin: 0 0 18px;
    color: #082b55;
    font-size: 21px;
}

/* Team Averages: every card in a row shares the same label, number and
   games-note lines, so they line up across the row. */
.reportAveragesGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 0;
}

.reportAverageCard {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    padding: 16px 10px;
    background: #f7f9fc;
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    text-align: center;
}

.reportAverageLabel {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 2.6em;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.reportAverageValue {
    display: block;
    align-self: stretch;
    color: #082b55;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
}

.reportAverageMain,
.reportAveragePercent {
    display: block;
    white-space: nowrap;
}

.reportAveragePercent {
    font-size: 19px;
}

/* The " · " stays in the text but the percentage gets its own line. */
.reportAverageDot {
    display: none;
}

.reportAverageCard .reportAverageGames {
    margin-top: auto;
    padding-top: 6px;
    white-space: nowrap;
}

@supports (grid-template-rows: subgrid) {
    .reportAverageCard {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        row-gap: 0;
    }

    .reportAverageValue {
        align-self: start;
    }

    .reportAverageCard .reportAverageGames {
        align-self: end;
    }
}

@media (max-width: 800px) {
    .reportAveragesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phones: shooting cards are too wide for half the screen, so they take a
   full row each, after the other cards. */
@media (max-width: 520px) {
    .reportAverageShooting {
        grid-column: 1 / -1;
        order: 1;
    }
}

.reportPlayerStats {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #dbe3ec;
}

.reportPlayerStats h4 {
    margin: 0 0 18px;
    color: #082b55;
    font-size: 21px;
}

.reportPlayerTableWrap {
    width: 100%;
    overflow-x: auto;
}

.reportPlayerTable {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.reportPlayerTable th,
.reportPlayerTable td {
    padding: 12px 14px;
    border-bottom: 1px solid #dbe3ec;
    text-align: center;
    white-space: nowrap;
}

.reportPlayerTable th {
    background: #f7f9fc;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.reportPlayerTable th:nth-child(2),
.reportPlayerTable td:nth-child(2) {
    text-align: left;
}

.reportPlayerTable td {
    color: #082b55;
    font-weight: 600;
}

.reportGameTrends {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #dbe3ec;
}

.reportGameTrends h4 {
    margin: 0 0 18px;
    color: #082b55;
    font-size: 21px;
}

.reportPlayerGameDetail {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #dbe3ec;
}

.reportPlayerGameHeader {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.reportPlayerGameHeader h4 {
    margin: 0;
    color: #082b55;
    font-size: 21px;
}

.reportPlayerFilter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #082b55;
    font-weight: 700;
}

.reportPlayerFilter select {
    min-width: 200px;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    font-size: 15px;
}

.reportPlayerPrompt {
    padding: 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: #64748b;
    text-align: center;
}

/* GAME-SPECIFIC STARTING 5 */

.gameStartersList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.gameStarterOption {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: white;
    color: var(--navy-dark);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.gameStarterOption:hover {
    background: #f7f9fc;
}

.gameStarterOption:has(
    .gameStarterCheckbox:checked
) {
    border-color: var(--gold);
    background: #fff9e8;
}

.gameStarterCheckbox {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--navy);
    cursor: pointer;
}

.gameStarterOption span {
    flex: 1;
}

/* GAMES TEAM CARDS */

.gamesTeamCards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.gamesTeamCard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
    color: var(--navy-dark);
    text-align: left;
    cursor: pointer;
}

.gamesTeamCard:hover {
    background: #f7f9fc;
}

.activeGamesTeamCard {
    border-color: var(--gold);
    background: #fff9e8;
}

.gamesTeamCardName {
    font-size: 17px;
    font-weight: 800;
}

.gamesTeamCardSeason {
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
}

/* Prevent accidental double-tap zoom throughout the live tracker */
#liveGameScreen {
    touch-action: manipulation;
}
/* BACKUP & RESTORE */
.backupIntro {
    margin-top: 0;
}

.backupActions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.backupActions button,
.restorePanel .formActions button {
    min-height: 48px;
    touch-action: manipulation;
}

.backupStatus {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}

.backupStatus:empty {
    display: none;
}

.restorePanel {
    margin-top: 18px;
}

.restorePanel[hidden] {
    display: none !important;
}

.restorePanel h4 {
    margin: 22px 0 8px;
    color: var(--navy-dark);
    font-size: 17px;
}

.restorePanel .formActions {
    margin-top: 16px;
}

.restorePanel button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.restoreNote {
    margin-top: 0;
}

.restoreList {
    margin: 0;
    padding-left: 20px;
    line-height: 1.6;
}

.restoreConflict {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.restoreConflict small {
    color: var(--muted);
}

.restoreConflict label,
.restoreCheckbox {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
}

.restoreConflict input,
.restoreCheckbox input {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    accent-color: var(--navy);
}

.restoreWarning,
.restoreError {
    color: var(--danger);
    font-weight: 700;
    line-height: 1.5;
}

.restoreSuccess {
    color: #027a48;
    font-weight: 700;
}

/* PLAYER CARD LAYOUT PROTOTYPE */
/* Undo sits inside the stat grid and fills the rest of the last row. */
.playerCardStats {
    margin-bottom: 0;
}

.playerCardStats .undoSpan1 {
    grid-column: span 1;
}

.playerCardStats .undoSpan2 {
    grid-column: span 2;
}

.playerCardStats .undoSpan3 {
    grid-column: span 3;
}

.playerCardStatButton.playerCardMissButton {
    background: #a9b0bd;
    color: #172236;
    touch-action: manipulation;
}

.playerCardUndoButton {
    touch-action: manipulation;
}

/* Keep three columns so the rows line up on every iPad width. */
@media (max-width: 800px) {
    .playerCardStats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tighter side padding so short labels stay on one line at iPad portrait widths. */
.playerCardStats .playerCardStatButton {
    gap: 4px;
    padding: 10px 8px;
}

.playerCardStats .playerCardStatButton strong {
    min-width: 14px;
}

/* TEAM SHOOTING BUTTONS FOR UNKNOWN SHOOTERS */
/* A small "TEAM" tag above the main label keeps the buttons the same height. */
.teamStatCardControls button .teamShotTag {
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    line-height: 1.1;
    opacity: 0.85;
}

.teamStatCardControls button .teamShotTag + span {
    display: block;
    font-size: 17px;
    line-height: 1.1;
}

.teamShotReminder {
    grid-column: 1 / -1;
    margin: -4px 0 10px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

/* PLAYER SHOOTING TABLES */
/* Five columns fit an iPad in portrait, so no minimum width or sideways scroll. */
.shootingTable {
    min-width: 0;
}

.shootingTable th:first-child,
.shootingTable td:first-child {
    text-align: left;
}

.shootingTable th:nth-child(n + 2),
.shootingTable td:nth-child(n + 2) {
    text-align: center;
}

.shotCell span {
    display: block;
    font-size: 15px;
    font-weight: 900;
}

.shotCell small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.unknownShooterRow td {
    color: var(--muted);
    font-style: italic;
}

.coverageBadge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.4px;
    vertical-align: middle;
}

.coverageFull {
    background: #e3f4ea;
    color: #027a48;
}

.coveragePartial {
    background: #fff3d6;
    color: #8a5a00;
}

.shootingCoverageNote {
    margin: 0;
    padding: 0 18px 14px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.seasonShootingSection .shootingCoverageNote,
.playerShootingByGameHeading + .shootingCoverageNote {
    padding: 0 0 10px;
}

.playerShootingByGameHeading {
    margin: 22px 0 6px;
}

/* PLAYER SEASON STATS (averages / totals) */
.seasonPlayerHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.seasonPlayerHeader h4 {
    margin-bottom: 0;
}

.seasonViewSwitch {
    display: inline-flex;
    border: 2px solid var(--navy);
    border-radius: 10px;
    overflow: hidden;
}

.seasonViewSwitch button {
    min-height: 44px;
    min-width: 96px;
    padding: 0 16px;
    border: 0;
    background: white;
    color: var(--navy);
    font-size: 15px;
    font-weight: 900;
    touch-action: manipulation;
}

.seasonPlayerSection[data-view="averages"] [data-season-view="averages"],
.seasonPlayerSection[data-view="totals"] [data-season-view="totals"] {
    background: var(--navy);
    color: white;
}

.seasonPlayerSection[data-view="averages"] .seasonTableTotals,
.seasonPlayerSection[data-view="totals"] .seasonTableAverages {
    display: none;
}

.seasonNote {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.seasonPlayerSection > .seasonNote {
    padding: 10px 0 0;
}

.seasonLimitationNote {
    font-style: italic;
}

.seasonPlayerSection .reportPlayerTableWrap {
    margin-top: 12px;
}

/* Tighter cells so all columns fit an iPad in portrait. */
.seasonPlayerTable th,
.seasonPlayerTable td {
    padding: 10px 6px;
}

.seasonPlayerTable th:nth-child(2),
.seasonPlayerTable td:nth-child(2) {
    text-align: center;
}

.seasonPlayerTable td.seasonPlayerName,
.seasonPlayerTable th:first-child {
    min-width: 120px;
    text-align: left;
    white-space: normal;
}

.seasonPlayerTable td.seasonPlayerName {
    font-weight: 800;
}

/* Season points and points per game stand out in both views. */
.seasonPlayerTable th:nth-child(3),
.seasonPlayerTable th:nth-child(4),
.seasonPlayerTable td.seasonPoints {
    background: #fff8dc;
}

.seasonPlayerTable td.seasonPoints {
    font-size: 17px;
    font-weight: 900;
}

.reportAverageGames {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

/* Player Game-by-Game: games the player didn't play */
.dnpRow td {
    color: var(--muted);
}

.dnpRow td[colspan] {
    font-weight: 900;
    letter-spacing: 2px;
    text-align: center;
}

.playerDnpNote {
    padding-top: 10px;
}

/* Tighter cells for the wide report tables (Player Game-by-Game,
   Game-by-Game Team Trends) so they fit an iPad in portrait. */
.compactReportTable th,
.compactReportTable td {
    padding: 10px 6px;
}

/* PUBLIC BETA NOTICE (Home) and REMINDER (Settings): display only */
.betaNotice {
    width: min(1100px, calc(100% - 48px));
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
    padding: 18px 22px;
    border: 1px solid var(--border);
    border-left: 6px solid var(--gold);
    border-radius: 14px;
    background: white;
    color: var(--navy-dark);
    box-shadow: 0 6px 16px rgba(16, 42, 67, 0.06);
}

.betaBadge {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--gold);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.betaNoticeText p {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.45;
}

.betaNoticeText strong {
    font-size: 16px;
}

.betaNoticeText .betaNoticeFine {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 14px;
}

/* Settings: a shorter one-line reminder, full width of the cards */
.betaNoticeCompact {
    width: auto;
    margin: 0 0 18px;
    align-items: center;
    padding: 14px 18px;
}

p.betaNoticeText {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

.backupTip {
    margin-top: 10px;
}

/* Phones: badge above the text */
@media (max-width: 600px) {
    .betaNotice {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 16px 18px;
    }

    .betaBadge {
        justify-self: start;
    }
}

/* HEADER ON NARROW SCREENS
   When the logo and team badge don't fit side by side (phones, or a very
   long team name), the badge moves to its own line instead of pushing the
   page wider than the screen. Where they fit (iPads), nothing changes. */
.appBrand {
    flex-wrap: wrap;
    row-gap: 10px;
}

.appLogo,
.appTeamBadge {
    max-width: 100%;
}

/* LANDSCAPE GAME TRACKER
   iPad landscape only (at least 1024 px wide); portrait and phones are unchanged.
   body.liveTrackerActive is set only while the live game screen is showing.
   Five on-court players in one row under a compact team strip, so both stay on
   screen without scrolling. script.js (fitLandscapeTracker) adds
   .landscapeTwoColumns when wider two-column buttons still fit, and sets
   --landscape-button-height to use any spare height. */
@media (orientation: landscape) and (min-width: 1024px) {
    /* Slim top bar */
    body.liveTrackerActive .appHeader {
        display: none;
    }

    body.liveTrackerActive .topNavButtons {
        position: absolute;
        top: 6px;
        left: 12px;
        z-index: 2;
        margin: 0;
    }

    body.liveTrackerActive .topNavButtons .backButton {
        height: 44px;
        padding: 0 14px;
    }

    body.liveTrackerActive .topNavButtons .homeButton {
        width: 44px;
        height: 44px;
    }

    body.liveTrackerActive .appContainer {
        width: 100%;
        padding: 6px 12px 24px;
    }

    body.liveTrackerActive #liveGameScreen {
        margin-top: 0;
    }

    body.liveTrackerActive .liveGameHeader {
        align-items: center;
        min-height: 44px;
        margin-bottom: 4px;
        padding: 0 0 0 176px;
        border-radius: 0;
        background: none;
        color: var(--navy-dark);
        gap: 12px;
    }

    body.liveTrackerActive .liveGameHeader > div:first-child {
        display: flex;
        align-items: baseline;
        gap: 12px;
        min-width: 0;
    }

    body.liveTrackerActive .liveGameLogo {
        display: none;
    }

    body.liveTrackerActive .liveGameHeader h2 {
        font-size: 20px;
        white-space: nowrap;
    }

    body.liveTrackerActive #liveGameDetails {
        margin: 0;
        overflow: hidden;
        color: var(--muted);
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.liveTrackerActive .liveGameHeaderControls {
        flex-direction: row;
        align-items: center;
        align-self: center;
        width: auto;
        gap: 10px;
    }

    body.liveTrackerActive .liveGameHeaderControls .editGameSetupButton {
        width: auto;
        min-height: 44px;
    }

    body.liveTrackerActive .liveGameHeaderControls .periodControl {
        display: flex;
        align-items: center;
        width: auto;
        min-width: 0;
        margin-top: 0;
        color: var(--navy-dark);
    }

    body.liveTrackerActive .liveGameHeaderControls .periodControl select {
        width: 90px;
        min-height: 44px;
        padding: 4px 10px;
        border: 2px solid var(--navy);
    }

    body.liveTrackerActive .trackerTabs {
        margin-bottom: 6px;
    }

    body.liveTrackerActive .trackerTab,
    body.liveTrackerActive .trackerTotal {
        min-height: 44px;
    }

    body.liveTrackerActive #playerTrackerPanel > .trackerHeading {
        display: none;
    }

    /* Compact team strip: tiles wrap at 170px wide (the same rows as a
       170px grid), and every row, the last one too, stretches across the
       full width, so fewer stats get wider tiles and buttons. */
    body.liveTrackerActive #teamStatButtons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    body.liveTrackerActive #teamStatButtons .teamStatCard {
        flex: 1 1 170px;
        min-width: 0;
    }

    body.liveTrackerActive .teamStatCardGrid {
        display: contents;
    }

    /* The reminder sits above the tiles instead of taking a grid row,
       so unused columns can still widen the tiles. */
    body.liveTrackerActive #teamStatButtons.hasTeamShotReminder {
        position: relative;
        padding-top: 18px;
    }

    body.liveTrackerActive .teamShotReminder {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        font-size: 12px;
        line-height: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.liveTrackerActive .teamStatCard {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 0;
        border-radius: 10px;
        box-shadow: none;
    }

    body.liveTrackerActive .teamStatCardName {
        grid-column: 1;
        grid-row: 1;
        overflow: hidden;
        padding: 4px 4px 2px 10px;
        font-size: 12px;
        line-height: 16px;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Short names (FG, 3PT, FT) so the shooting totals have room */
    body.liveTrackerActive .teamStatCardName[data-short-label] {
        font-size: 0;
    }

    body.liveTrackerActive .teamStatCardName[data-short-label]::before {
        content: attr(data-short-label);
        font-size: 12px;
    }

    body.liveTrackerActive .teamStatCardTotal {
        grid-column: 2;
        grid-row: 1;
        padding: 4px 10px 2px 4px;
        font-size: 16px;
        line-height: 16px;
        white-space: nowrap;
    }

    body.liveTrackerActive .teamStatCardTotal br {
        display: none;
    }

    body.liveTrackerActive .teamStatCardControls {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    body.liveTrackerActive .teamStatCardControls button {
        min-height: 44px;
        padding: 0 2px;
        font-size: 16px;
    }

    body.liveTrackerActive .teamStatCardControls button .teamShotTag {
        font-size: 9px;
        letter-spacing: 0.5px;
    }

    body.liveTrackerActive .teamStatCardControls button .teamShotTag + span {
        font-size: 15px;
    }

    /* Two tiles wide, like its two grid columns before. */
    body.liveTrackerActive .transitionPointsCard {
        flex: 2 1 346px;
        min-width: 0;
        border-radius: 10px;
        box-shadow: none;
    }

    body.liveTrackerActive .transitionPointsHeader {
        padding: 4px 10px 2px;
        font-size: 12px;
        line-height: 16px;
    }

    body.liveTrackerActive .transitionPointsHeader strong {
        font-size: 16px;
        line-height: 16px;
    }

    body.liveTrackerActive .transitionPointsButtons button {
        min-height: 44px;
        font-size: 16px;
    }

    /* Five on-court players in one row */
    body.liveTrackerActive .playerBench {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
        margin-top: 8px;
    }

    body.liveTrackerActive .playerCard {
        padding: 8px;
        border-radius: 12px;
        box-shadow: none;
    }

    /* Number and name get the full card width (up to two lines);
       SUB OUT and points sit on the row below. */
    body.liveTrackerActive .playerCardHeader {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
    }

    body.liveTrackerActive .playerCardHeader > div:first-child {
        display: -webkit-box;
        grid-column: 1 / -1;
        min-height: 36px;
        overflow: hidden;
        line-height: 18px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.liveTrackerActive .playerCardNumber {
        display: inline;
        margin-right: 5px;
        color: var(--navy);
        font-size: 15px;
    }

    body.liveTrackerActive .playerCardName {
        display: inline;
        margin: 0;
        font-size: 16px;
        line-height: 18px;
    }

    body.liveTrackerActive .playerSubButton {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        min-height: 40px;
        padding: 0 6px;
    }

    body.liveTrackerActive .playerCardPoints {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
    }

    body.liveTrackerActive .playerCardPoints strong {
        display: inline;
        font-size: 24px;
    }

    body.liveTrackerActive .playerCardPoints span {
        display: inline;
        margin-left: 2px;
        font-size: 10px;
    }

    body.liveTrackerActive .playerCardScoring {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 6px;
    }

    body.liveTrackerActive .playerCardPointButton {
        min-height: calc(var(--landscape-button-height, 44px) + 2px);
    }

    /* A six-column grid with the same gap as +1/+2/+3. Each miss button spans
       two columns, which is exactly one point button's width, so FT / 2PT /
       3PT Miss always sit directly under +1 / +2 / +3. The other stats span
       two columns (three across) or three (two across, .landscapeTwoColumns),
       so the adaptive layout is unchanged for them. */
    body.liveTrackerActive .playerCardStats {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px;
    }

    body.liveTrackerActive .playerCardStats > * {
        grid-column: span 2;
    }

    body.liveTrackerActive .playerCardStats > .undoSpan2 {
        grid-column: span 4;
    }

    body.liveTrackerActive .playerCardStats > .undoSpan3 {
        grid-column: span 6;
    }

    body.liveTrackerActive .landscapeTwoColumns .playerCardStats > :not(.playerCardMissButton) {
        grid-column: span 3;
    }

    body.liveTrackerActive .landscapeTwoColumns .playerCardStats > .undoSpanTwo2 {
        grid-column: span 6;
    }

    body.liveTrackerActive .playerCardStats .playerCardStatButton {
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        min-height: var(--landscape-button-height, 44px);
        padding: 2px 4px;
        line-height: 1.1;
    }

    body.liveTrackerActive .playerCardStats .playerCardStatButton span {
        font-size: 11px;
        white-space: nowrap;
    }

    body.liveTrackerActive .landscapeTwoColumns .playerCardStats .playerCardStatButton span {
        font-size: 12px;
    }

    /* Miss buttons keep the three-across label size. */
    body.liveTrackerActive .landscapeTwoColumns .playerCardStats .playerCardMissButton span {
        font-size: 11px;
    }

    body.liveTrackerActive .playerCardStats .playerCardStatButton strong {
        min-width: 0;
        font-size: 16px;
        text-align: center;
    }

    /* Short labels (AST, STL, OREB...) only on the narrower three-column buttons */
    body.liveTrackerActive .playerBench:not(.landscapeTwoColumns) .playerCardStats span[data-short-label]:not([data-short-label=""]) {
        font-size: 0;
    }

    body.liveTrackerActive .playerBench:not(.landscapeTwoColumns) .playerCardStats span[data-short-label]:not([data-short-label=""])::before {
        content: attr(data-short-label);
        font-size: 11px;
    }

    body.liveTrackerActive .playerCardUndoButton {
        min-height: var(--landscape-button-height, 44px);
        font-size: 13px;
    }

    /* Bench: compact tiles with name, points and SUB IN */
    body.liveTrackerActive .benchDivider {
        margin: 2px 0 0;
        padding: 4px 0;
        font-size: 13px;
    }

    body.liveTrackerActive .benchDivider ~ .playerCard {
        padding: 6px 8px;
    }

    body.liveTrackerActive .benchDivider ~ .playerCard .playerCardScoring,
    body.liveTrackerActive .benchDivider ~ .playerCard .playerCardStats {
        display: none;
    }

    body.liveTrackerActive .benchDivider ~ .playerCard .playerCardHeader {
        gap: 0 6px;
        margin: 0;
    }

    body.liveTrackerActive .benchDivider ~ .playerCard .playerCardHeader > div:first-child {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        -webkit-line-clamp: 1;
    }

    body.liveTrackerActive .benchDivider ~ .playerCard .playerCardName {
        font-size: 14px;
    }

    body.liveTrackerActive .benchDivider ~ .playerCard .playerCardPoints {
        grid-column: 1;
        grid-row: 2;
        line-height: 1;
        text-align: left;
    }

    body.liveTrackerActive .benchDivider ~ .playerCard .playerCardPoints strong {
        font-size: 15px;
    }

    body.liveTrackerActive .benchDivider ~ .playerCard .playerSubButton {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-height: 44px;
        padding: 0 10px;
    }
}

/* ---------- OPPONENT SCORING ----------
   Red, so it's never mistaken for our yellow scoring buttons or the blue
   team stat buttons. Shown only when the Opponent Scoring stat is on: a
   slim bar pinned to the bottom of the screen, so it's reachable however
   far the tracker is scrolled. */
.opponentScoring {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    gap: 8px;
    padding: 8px max(16px, calc((100vw - 900px) / 2))
        calc(8px + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 3px solid var(--danger);
    box-shadow: 0 -4px 12px rgba(16, 42, 67, 0.15);
}

.opponentScoring[hidden] {
    display: none;
}

.opponentScoreTotal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 0 8px;
    border-radius: 10px;
    background: #fdecea;
    color: var(--danger);
    font-weight: 900;
}

.opponentScoreTotal span {
    font-size: 12px;
    letter-spacing: 0.06em;
}

.opponentScoreTotal strong {
    font-size: 22px;
    line-height: 1.1;
}

.opponentPointButton,
.opponentUndoButton {
    flex: 1 1 0;
    min-width: 56px;
    min-height: 52px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
    touch-action: manipulation;
}

.opponentPointButton {
    border: 0;
    background: var(--danger);
    color: white;
}

.opponentUndoButton {
    border: 2px solid var(--danger);
    background: white;
    color: var(--danger);
    font-size: 15px;
}

.opponentPointButton:active,
.opponentUndoButton:active {
    transform: scale(0.97);
}

.opponentUndoButton:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Room at the bottom so the bar never covers Finish Game. */
#liveGameScreen.opponentScoringOn {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

/* ---------- LINEUP PLUS/MINUS REPORT ---------- */
.lineupNotes {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.lineupNote {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
}

.lineupNoteOk {
    background: #e8f5ec;
    color: #14532d;
}

.lineupNoteWarn {
    border-left: 4px solid #d97706;
    background: #fff4e5;
    color: #7a3e00;
}

.lineupNoteInfo {
    background: #eef3f8;
    color: var(--text);
}

.lineupTableHeading {
    margin: 14px 0 6px;
    color: var(--navy);
    font-size: 15px;
}

.lineupTable {
    min-width: 0;
}

.boxScoreTable.lineupTable th:first-child,
.boxScoreTable.lineupTable td:first-child {
    text-align: left;
}

.boxScoreTable.lineupTable th:nth-child(2),
.boxScoreTable.lineupTable td:nth-child(2) {
    text-align: center;
}

.boxScoreTable.lineupTable th:not(:first-child),
.boxScoreTable.lineupTable td:not(:first-child) {
    width: 56px;
    padding-left: 8px;
    padding-right: 8px;
}

.lineupPlayersCell {
    min-width: 200px;
    line-height: 1.5;
}

.lineupPlayer {
    display: inline-block;
    margin-right: 12px;
    white-space: nowrap;
}

.lineupIncomplete {
    display: block;
    color: var(--danger);
    font-size: 12px;
    font-weight: 900;
}

.plusMinusCell {
    font-weight: 900;
}

.lineupKey,
.lineupEmpty {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
}

/* End-of-game summary: a score correction that needs reviewing. */
.summaryScoreNote {
    margin-top: 14px;
}

/* Season Lineup Plus/Minus (Reports) */
.reportSeasonLineups {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #dbe3ec;
}

.reportSeasonLineups h4 {
    margin: 0;
    color: #082b55;
    font-size: 21px;
}

.seasonLineupSwitches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}

.reportSeasonLineups[data-view="lineups"] [data-season-lineup-view="lineups"],
.reportSeasonLineups[data-view="players"] [data-season-lineup-view="players"],
.reportSeasonLineups[data-games="whole"] [data-season-lineup-games="whole"],
.reportSeasonLineups[data-games="all"] [data-season-lineup-games="all"] {
    background: var(--navy);
    color: white;
}

.seasonLineupGpNote {
    margin: 0 0 12px;
}

.seasonLineupGp small {
    display: block;
    color: #b45309;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

/* Rows that use partial-game data get an amber edge. */
.seasonLineupPartialRow td:first-child {
    box-shadow: inset 4px 0 0 #d97706;
}

.seasonLineupMoreButton {
    min-height: 44px;
    margin-top: 12px;
    padding: 0 18px;
    border: 2px solid var(--navy);
    border-radius: 10px;
    background: white;
    color: var(--navy);
    font-size: 15px;
    font-weight: 900;
    touch-action: manipulation;
}

@media (max-width: 520px) {
    .seasonLineupSwitches .seasonViewSwitch {
        flex: 1 1 100%;
    }

    .seasonLineupSwitches .seasonViewSwitch button {
        flex: 1;
        min-width: 0;
        padding: 0 8px;
    }

    .boxScoreTable.seasonLineupTable th,
    .boxScoreTable.seasonLineupTable td {
        font-size: 13px;
    }

    .boxScoreTable.seasonLineupTable th:not(:first-child),
    .boxScoreTable.seasonLineupTable td:not(:first-child) {
        width: 34px;
        padding: 10px 2px;
    }

    /* Room for the "1 partial" note under GP. */
    .boxScoreTable.seasonLineupTable th:nth-child(2),
    .boxScoreTable.seasonLineupTable td:nth-child(2) {
        width: 46px;
    }

    .boxScoreTable.seasonLineupTable th:first-child,
    .boxScoreTable.seasonLineupTable td:first-child {
        padding: 10px 6px 10px 8px;
    }

    /* One player per line; a long name wraps instead of widening the table. */
    .seasonLineupTable .lineupPlayersCell {
        min-width: 0;
    }

    .seasonLineupTable .lineupPlayer {
        display: block;
        margin-right: 0;
        white-space: normal;
    }
}

/* Opponent team stats (Opp. Off Rebs) share the opponent scoring red. */
.teamStatOpponent {
    background: var(--danger);
}

/* ---------- SCORES AND STATS: US (BLUE, LEFT) AND THE OPPONENT (RED, RIGHT) ----------
   index.html #scorePanels, between the TRACK / SUMMARY tabs and the tab
   content. Both scores use one style (team name above the number), so they
   always match. The red side shows while Opponent Scoring or any opponent
   stat is chosen (script.js renderOpponentScoring).
   iPad (at least 700 x 600, portrait or landscape): blue left, red anchored
   right, and both scores move to the scoreboard at the right of the TRACK /
   SUMMARY row (#trackerScoreboard; the score badges here are hidden).
   Phones and short screens: stacked, with the red score, +1/+2/+3 and
   UNDO pinned to the bottom as before. */
.trackerScoreboard {
    display: none;
}

/* Each side: name, then the number next to the middle of the scoreboard
   (ours on the right of our side, theirs on the left of theirs). */
.scoreboardSide {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 42px;
    box-sizing: border-box;
    padding: 1px 12px;
    border-radius: 10px;
    font-weight: 900;
}

.scoreboardUs .scoreName {
    flex: 1 1 auto;
    text-align: left;
}

.scoreboardThem .scoreName {
    flex: 1 1 auto;
    text-align: right;
}

.scoreboardSide[hidden] {
    display: none;
}

.scoreboardUs {
    background: #e3ebf6;
    color: var(--navy);
}

.scoreboardThem {
    background: #fdecea;
    color: var(--danger);
}

/* Names shorten with … (full name on hold). One number size for both teams:
   large enough to read at a glance, still inside the 44px tab row. */
.scoreboardSide .scoreName {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The number never shrinks (100+ scores too); the name gives way. */
.scoreboardSide .scoreNumber {
    flex: 0 0 auto;
    min-width: 2ch;
    font-size: 32px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
}
.scorePanels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.teamPanel,
.opponentPanel {
    min-width: 0;
}

.opponentPanel[hidden] {
    display: none;
}

.scoreBadge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 10px;
    border-radius: 10px;
    font-weight: 900;
}

.teamScoreBadge {
    justify-self: start;
    margin-bottom: 10px;
    background: #e3ebf6;
    color: var(--navy);
}

.opponentScoreBadge {
    background: #fdecea;
    color: var(--danger);
}

/* One rule for both scores: same size, weight and line height. */
.scoreBadge .scoreName {
    max-width: 100%;
    overflow: hidden;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.scoreBadge .scoreNumber {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}

/* Opponent Scoring off but opponent stats chosen: just UNDO. */
.opponentScoring.opponentScoringOff .opponentScoreBadge,
.opponentScoring.opponentScoringOff .opponentPointButton {
    display: none;
}

/* The bottom bar shows whenever the red side does (phones). */
#liveGameScreen:has(#opponentScoring:not([hidden])) {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

/* SUMMARY tab: the scores and opponent buttons stay, the stat tiles don't. */
#liveGameScreen:has(#summaryTrackerPanel.activeTrackerPanel) #teamStatButtons,
#liveGameScreen:has(#summaryTrackerPanel.activeTrackerPanel) #opponentStatButtons {
    display: none;
}

.opponentStatGrid[hidden] {
    display: none;
}

@media (min-width: 700px) and (min-height: 600px) {
    body.liveTrackerActive .scorePanels.hasOpponentPanel {
        grid-template-columns: minmax(0, 1fr) minmax(368px, 400px);
        align-items: start;
    }

    body.liveTrackerActive .opponentPanel:not([hidden]) {
        grid-column: 2;
        display: grid;
        gap: 6px;
    }

    /* TRACK and SUMMARY together on the left, the scoreboard on the right. */
    body.liveTrackerActive .trackerTabs {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    body.liveTrackerActive .trackerTab {
        flex: 0 0 150px;
    }

    /* Two equal halves (up to 460px together), so both teams get the same
       space whatever their names; narrower screens shorten the names. */
    body.liveTrackerActive .trackerScoreboard {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex: 0 1 460px;
        gap: 6px;
        min-width: 0;
        margin-left: auto;
        padding-left: 8px;
    }

    /* Opponent Scoring off: just our side, the same size as one half. */
    body.liveTrackerActive .trackerScoreboard:has(#scoreboardOpponent[hidden]) {
        grid-template-columns: minmax(0, 1fr);
        flex-basis: 233px;
    }

    /* The scores are on the scoreboard instead. */
    body.liveTrackerActive .teamScoreBadge,
    body.liveTrackerActive .opponentScoreBadge {
        display: none;
    }

    body.liveTrackerActive .opponentScoring {
        position: static;
        display: grid;
        /* The red side stays at least 368px wide, so +1/+2/+3/UNDO are
           wider than 56px. */
        grid-template-columns: repeat(4, minmax(56px, 1fr));
        gap: 8px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    body.liveTrackerActive .opponentScoring.opponentScoringOff {
        grid-template-columns: minmax(0, 1fr);
    }

    body.liveTrackerActive .opponentPointButton,
    body.liveTrackerActive .opponentUndoButton {
        min-width: 56px;
        min-height: 52px;
    }

    /* Fits the narrower portrait buttons. */
    body.liveTrackerActive .opponentUndoButton {
        padding: 0 2px;
        font-size: 15px;
    }

    body.liveTrackerActive #liveGameScreen:has(#opponentScoring:not([hidden])),
    body.liveTrackerActive #liveGameScreen.opponentScoringOn {
        padding-bottom: 0;
    }

    /* Up to three red tiles a row, each row filling the red side: 1, 2 or 3
       stats in one row, 4 as two pairs, 5 as three and two, 6 as two
       threes (script.js sets data-count). */
    body.liveTrackerActive #opponentStatButtons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    body.liveTrackerActive #opponentStatButtons > .teamStatCard {
        flex: 1 1 calc((100% - 12px) / 3 - 1px);
        min-width: 0;
    }

    body.liveTrackerActive #opponentStatButtons[data-count="4"] > .teamStatCard {
        flex-basis: calc((100% - 6px) / 2 - 1px);
    }

    body.liveTrackerActive #opponentStatButtons[hidden] {
        display: none;
    }
}

@media (orientation: landscape) and (min-width: 1024px) {
    /* Long team names: the "Team vs Opponent" title shortens with …
       instead of pushing Edit Game Setup and Period off the screen. */
    body.liveTrackerActive .liveGameHeader > div:first-child {
        flex: 1 1 auto;
        overflow: hidden;
    }

    body.liveTrackerActive .liveGameHeader h2 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.liveTrackerActive .liveGameHeaderControls {
        flex-shrink: 0;
    }
}

/* iPad Split View (landscape, under 1024px wide): the larger cards keep
   their three (or two) a row, and every row stretches across the blue
   side instead of leaving the end of a short row empty. */
@media (orientation: landscape) and (min-width: 700px) and (max-width: 1023px) and (min-height: 600px) {
    body.liveTrackerActive .scorePanels .teamStatCardGrid {
        display: flex;
        flex-wrap: wrap;
    }

    body.liveTrackerActive .scorePanels .teamStatCardGrid > .teamStatCard {
        flex: 1 1 calc((100% - 28px) / 3 - 1px);
        min-width: 0;
    }
}

@media (orientation: landscape) and (min-width: 700px) and (max-width: 900px) and (min-height: 600px) {
    body.liveTrackerActive .scorePanels .teamStatCardGrid > .teamStatCard {
        flex-basis: calc((100% - 14px) / 2 - 1px);
    }
}

/* iPad portrait: our tiles use the compact landscape style (name and count,
   then − and +) so both sides fit. */
@media (orientation: portrait) and (min-width: 700px) and (min-height: 600px) {
    body.liveTrackerActive .scorePanels.hasOpponentPanel {
        grid-template-columns: minmax(0, 1fr) 368px;
    }

    /* Tiles wrap at 140px wide; every row stretches across the full width. */
    body.liveTrackerActive .scorePanels #teamStatButtons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    body.liveTrackerActive .scorePanels #teamStatButtons .teamStatCard {
        flex: 1 1 140px;
        min-width: 0;
    }

    body.liveTrackerActive .scorePanels .teamStatCardGrid {
        display: contents;
    }

    body.liveTrackerActive .scorePanels #teamStatButtons.hasTeamShotReminder {
        position: relative;
        padding-top: 18px;
    }

    body.liveTrackerActive .scorePanels .teamShotReminder {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        overflow: hidden;
        font-size: 12px;
        line-height: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.liveTrackerActive .scorePanels .teamStatCard {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 0;
        border-radius: 10px;
        box-shadow: none;
    }

    body.liveTrackerActive .scorePanels .teamStatCardName {
        grid-column: 1;
        grid-row: 1;
        overflow: hidden;
        padding: 4px 4px 2px 10px;
        font-size: 12px;
        line-height: 16px;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.liveTrackerActive .scorePanels .teamStatCardName[data-short-label] {
        font-size: 0;
    }

    body.liveTrackerActive .scorePanels .teamStatCardName[data-short-label]::before {
        content: attr(data-short-label);
        font-size: 12px;
    }

    body.liveTrackerActive .scorePanels .teamStatCardTotal {
        grid-column: 2;
        grid-row: 1;
        padding: 4px 10px 2px 4px;
        font-size: 16px;
        line-height: 16px;
        white-space: nowrap;
    }

    body.liveTrackerActive .scorePanels .teamStatCardTotal br {
        display: none;
    }

    body.liveTrackerActive .scorePanels .teamStatCardControls {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    body.liveTrackerActive .scorePanels .teamStatCardControls button {
        min-height: 44px;
        padding: 0 2px;
        font-size: 16px;
    }

    body.liveTrackerActive .scorePanels .teamStatCardControls button .teamShotTag {
        font-size: 9px;
        letter-spacing: 0.5px;
    }

    body.liveTrackerActive .scorePanels .teamStatCardControls button .teamShotTag + span {
        font-size: 15px;
    }

    body.liveTrackerActive .scorePanels .transitionPointsCard {
        flex: 1 1 100%;
        border-radius: 10px;
        box-shadow: none;
    }

    body.liveTrackerActive .scorePanels .transitionPointsHeader {
        padding: 4px 10px 2px;
        font-size: 12px;
        line-height: 16px;
    }

    body.liveTrackerActive .scorePanels .transitionPointsHeader strong {
        font-size: 16px;
        line-height: 16px;
    }

    body.liveTrackerActive .scorePanels .transitionPointsButtons button {
        min-height: 44px;
        font-size: 16px;
    }
}

/* STORAGE SAFETY
   Header warning while the game recovery copy can't be saved, low-storage
   notes, and the Settings storage information (script.js, storage.js). */
.recoveryWarning {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 46px;
    padding: 4px 14px;
    border: 2px solid var(--danger);
    border-radius: 10px;
    background: #fee4e2;
    color: var(--danger);
    text-align: left;
    touch-action: manipulation;
}

.recoveryWarning[hidden] {
    display: none;
}

/* Unfinished game: a way back to it from every other screen. */
.unfinishedGameBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 12px 10px 16px;
    border: 2px solid var(--gold);
    border-radius: 12px;
    background: var(--navy);
    color: #ffffff;
}

.unfinishedGameBar[hidden] {
    display: none;
}

.unfinishedGameText {
    min-width: 0;
    font-size: 16px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.continueGameButton {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--gold);
    color: var(--navy-dark);
    font-size: 17px;
    font-weight: 900;
    touch-action: manipulation;
}

.recoveryWarningTitle {
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.recoveryWarningHint {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.storageWarningNote {
    margin-bottom: 18px;
}

.storageWarningNote[hidden],
.safetyCopyBlock[hidden] {
    display: none;
}

.safetyCopyBlock {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.safetyCopyBlock h4 {
    margin: 0;
    color: var(--navy);
    font-size: 16px;
}

.safetyCopyBlock .formNote {
    margin-top: 8px;
}

.storageCard {
    margin-top: 18px;
}

.storageCard h3 {
    margin-top: 0;
}

.storageInfo {
    display: grid;
    grid-template-columns: minmax(150px, 230px) 1fr;
    gap: 10px 16px;
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
}

.storageInfo dt {
    color: var(--muted);
    font-weight: 700;
}

.storageInfo dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Phones: the warning shares the row with Back and Home, so it takes the
   remaining width and its text wraps instead of pushing the page wider. */
@media (max-width: 520px) {
    .recoveryWarning {
        flex: 1 1 0;
        min-width: 0;
        gap: 1px;
        margin-right: 16px;
        padding: 2px 8px;
    }

    .recoveryWarningTitle,
    .recoveryWarningHint {
        white-space: normal;
        line-height: 1.15;
    }

    .recoveryWarningTitle {
        font-size: 12px;
    }

    .recoveryWarningHint {
        font-size: 10px;
    }
}

@media (max-width: 520px) {
    .storageInfo {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .storageInfo dd {
        margin-bottom: 10px;
    }
}

/* In the landscape tracker the warning sits beside Back and Home, and the
   game title moves over only while it shows. */
@media (orientation: landscape) and (min-width: 1024px) {
    body.liveTrackerActive .recoveryWarning {
        width: 216px;
        min-height: 44px;
        padding: 2px 10px;
    }

    body.liveTrackerActive .recoveryWarningTitle {
        font-size: 13px;
    }

    body.liveTrackerActive .recoveryWarningHint {
        font-size: 11px;
    }

    body.liveTrackerActive.recoveryWarningVisible .liveGameHeader {
        padding-left: 402px;
    }

    body.liveTrackerActive.recoveryWarningVisible .liveGameHeader h2 {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.liveTrackerActive.recoveryWarningVisible .editGameSetupButton {
        white-space: nowrap;
    }
}

/* ---------- GAME SUMMARY: SCORING BY QUARTER, TEAM COMPARISON, PLAYERS ----------
   Live Summary tab, end-of-game and saved-game summaries (script.js
   renderGameSummarySections). */
.liveSummaryTableWrap > h3 {
    margin: 0 0 12px;
}

.boxScoreWrap > h4 {
    margin: 0;
    padding: 16px 18px 12px;
    color: var(--navy-dark);
    font-size: 18px;
    font-weight: 800;
}

.boxScoreWrap + .boxScoreWrap {
    margin-top: 14px;
}

/* Small tables: no 700px minimum, so they fit a phone without sideways
   scrolling. */
.summaryScoringTable,
.summaryComparisonTable {
    min-width: 0;
}

.summaryScoringTable th,
.summaryScoringTable td {
    padding: 10px 8px;
}

/* The box score's second column is the player name (left-aligned); here it
   is Q1 or the statistic, centred like the rest. */
.summaryScoringTable th:nth-child(2),
.summaryScoringTable td:nth-child(2),
.summaryComparisonTable th:nth-child(2),
.summaryComparisonTable td:nth-child(2) {
    text-align: center;
}

.summaryTeamNameCell {
    max-width: 180px;
    overflow: hidden;
    text-align: left !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.summaryScoringUs .summaryTeamNameCell {
    color: var(--navy);
}

.summaryScoringThem .summaryTeamNameCell {
    color: var(--danger);
}

.summaryTrackedTotal {
    font-size: 18px !important;
    font-weight: 900 !important;
}

/* Our values left, the statistic in the middle, the opponent's right. */
.summaryComparisonTable {
    table-layout: fixed;
}

.summaryComparisonTable .summaryUsCell,
.summaryComparisonTable .summaryThemCell {
    width: 32%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 18px;
    font-weight: 900;
}

.summaryComparisonTable td.summaryUsCell {
    color: var(--navy);
}

.summaryComparisonTable td.summaryThemCell {
    color: var(--danger);
}

.summaryComparisonTable td.summaryStatCell {
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
}

/* Game / Q1 ... OT: one row of buttons, at least 44px to tap. */
.summaryPeriodPicker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.summaryPeriodButton {
    min-width: 56px;
    min-height: 44px;
    padding: 0 12px;
    border: 2px solid var(--navy);
    border-radius: 10px;
    background: white;
    color: var(--navy);
    font-size: 15px;
    font-weight: 900;
}

.summaryPeriodButton.activeSummaryPeriod {
    background: var(--navy);
    color: white;
}

.summaryNote {
    margin: 10px 2px 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
}

/* ---------- REPORTS: PAST GAMES ---------- */
/* One column no wider than the screen: a long opponent name shortens
   instead of widening every row. */
.reportPastGamesList {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.reportPastGame {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
    color: var(--navy-dark);
    font-size: 16px;
    font-weight: 800;
    text-align: left;
}

.reportPastGameOpponent {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* On a narrow phone the date and score move to their own line. */
.reportPastGame {
    flex-wrap: wrap;
}

.reportPastGameMeta {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.reportPastGamesMore {
    min-height: 44px;
    margin-top: 10px;
    padding: 0 16px;
    border: 2px solid var(--navy);
    border-radius: 10px;
    background: white;
    color: var(--navy);
    font-weight: 900;
}

/* ---------- GAME TYPES: SCRIMMAGES AND PRACTICES ----------
   Labelled in game lists; left out of season figures (script.js
   isOfficialGame). */
.gameTypeBadge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border: 1px solid var(--muted);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.reportRecordSplit {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.reportOfficialNote {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
}

/* A full-size picker; 16px text so Safari on iPad doesn't zoom in. */
#summaryGameType {
    width: 100%;
    max-width: 320px;
    min-height: 48px;
    padding: 0 12px;
    border: 2px solid var(--navy);
    border-radius: 10px;
    background: white;
    color: var(--navy-dark);
    font-size: 16px;
    font-weight: 800;
}

/* Records like 1-0 never break across lines. */
.reportRecordValue,
.reportStatValue {
    white-space: nowrap;
}

/* SUMMARY AND REPORTS TYPOGRAPHY ON AN iPAD
   Larger player names, numbers and totals on the live, end-of-game and saved
   summaries and in Reports, and darker grey for notes. Phones (narrower than
   700px) keep the sizes above. Game-by-Game Team Trends is unchanged. */
@media (min-width: 700px) {
    #gameSummaryScreen,
    #summaryTrackerPanel,
    #reportsScreen {
        --muted: #4b5d70;
    }

    /* Summary tables: values 18px, headings 15px, totals 20px. */
    :is(#gameSummaryScreen, #summaryTrackerPanel) .boxScoreTable th {
        padding: 10px 8px;
        font-size: 15px;
    }

    :is(#gameSummaryScreen, #summaryTrackerPanel) .boxScoreTable td {
        padding: 10px 8px;
        font-size: 18px;
        font-weight: 800;
    }

    :is(#gameSummaryScreen, #summaryTrackerPanel) .boxScoreTable td.playerNameCell {
        text-align: left;
    }

    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryTotalsRow td {
        font-size: 20px;
        font-weight: 900;
    }

    /* The Box Score is 700px wide at least on a phone; on an iPad it fits the
       screen (short headings below), so iPad mini doesn't scroll sideways. */
    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryPlayerScoringTable,
    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryBoxScoreTable {
        min-width: 0;
    }

    /* Player Scoring: names on the left, quarters centred. */
    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryPlayerScoringTable th:first-child,
    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryPlayerScoringTable td:first-child {
        text-align: left;
    }

    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryPlayerScoringTable th:nth-child(2),
    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryPlayerScoringTable td:nth-child(2) {
        text-align: center;
    }

    /* Box Score headings: AST, STL, BLK, OREB, DREB, TO. The full name stays
       in the page (hidden from view) for screen readers. */
    .boxHeadShort .boxHeadFull {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .boxHeadShort::after {
        content: attr(data-short);
        content: attr(data-short) / "";
    }

    /* Scoring by Quarter */
    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryScoringTable td.summaryTeamNameCell {
        font-size: 16px;
    }

    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryScoringTable td.summaryTrackedTotal {
        font-size: 22px !important;
    }

    /* Team Comparison: values 22px; team names stay 18px; labels 16px. */
    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryComparisonTable td.summaryUsCell,
    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryComparisonTable td.summaryThemCell {
        font-size: 22px;
        font-weight: 900;
    }

    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryComparisonTable th.summaryUsCell,
    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryComparisonTable th.summaryThemCell {
        font-size: 18px;
    }

    :is(#gameSummaryScreen, #summaryTrackerPanel) .summaryComparisonTable td.summaryStatCell {
        color: var(--muted);
        font-size: 16px;
        font-weight: 800;
    }

    /* Lineup tables (game and season) */
    :is(#gameSummaryScreen, #summaryTrackerPanel, #reportsScreen) .boxScoreTable.lineupTable td {
        font-size: 16px;
    }

    /* Notes and subtitle: darker grey, 15px (the subtitle keeps 16px). */
    :is(#gameSummaryScreen, #summaryTrackerPanel, #reportsScreen) :is(.summaryNote, .reportOfficialNote, .lineupKey, .lineupNote, .seasonNote, .shootingCoverageNote, .reportPlayerPrompt) {
        font-size: 15px;
    }

    #summaryMatchup,
    #reportsScreen .reportPlayerPrompt,
    #reportsScreen .seasonNote {
        color: var(--muted);
    }

    /* Reports: player season stats, the chosen player's games and season
       shooting at 18px; season points 20px; headings 14px. */
    #reportsScreen :is(.seasonPlayerTable, .seasonShootingSection .reportPlayerTable, #reportPlayerGameContent .reportPlayerTable) th {
        color: var(--muted);
        font-size: 14px;
    }

    #reportsScreen :is(.seasonPlayerTable, .seasonShootingSection .reportPlayerTable, #reportPlayerGameContent .reportPlayerTable) td {
        font-size: 18px;
        font-weight: 700;
    }

    #reportsScreen .seasonPlayerTable td.seasonPlayerName {
        font-size: 18px;
        font-weight: 800;
    }

    #reportsScreen .seasonPlayerTable td.seasonPoints {
        font-size: 20px;
        font-weight: 900;
    }

    #reportsScreen .reportRecordSplit {
        color: var(--muted);
        font-size: 14px;
    }

    #reportsScreen :is(.reportAverageLabel, .reportStatLabel) {
        color: var(--muted);
        font-size: 15px;
    }
}