:root {
    --surface: #fffdf6;
    --surface-alt: #f3efdf;
    --court: #deebc4;
    --gold-deep: #dfb914;
}

body {
    min-height: 100vh;
    background-color: var(--paper);
    background-image: radial-gradient(rgba(40, 40, 32, .075) 1px, transparent 1px);
    background-size: 8px 8px;
    font-feature-settings: "ss01" 1;
}

.app-shell {
    padding-top: 28px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 2px solid var(--line);
    background: var(--surface-alt);
    color: var(--ink);
    padding: 7px 10px;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: var(--yellow);
    outline: 0;
}

.brand {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    letter-spacing: .1em;
}

.brand span,
.eyebrow,
.team-kicker,
.match-meta,
.court-team strong,
.serve-court-team > strong {
    text-transform: uppercase;
}

.eyebrow,
.team-kicker {
    color: var(--muted);
}

.page-intro h1,
.section-heading h2 {
    letter-spacing: -.035em;
}

.page-intro > p:last-child {
    max-width: 44ch;
    line-height: 1.55;
}

.btn,
.score-button,
.player-chip,
.serve-player,
.text-button,
.mode-picker span {
    vertical-align: middle;
    line-height: 1.1;
}

.btn,
.score-button,
.player-chip,
.serve-player,
.mode-picker span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn {
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.btn:hover:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--line);
}

input,
select {
    background: var(--surface);
    color: var(--ink);
    line-height: 1.25;
}

.mode-picker span {
    min-height: 50px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.team-form,
.position-editor,
.match-settings {
    border-top-width: 3px;
}

.mini-court,
.serve-court {
    background: var(--court);
    box-shadow: 5px 5px 0 rgba(40, 40, 32, .12);
}

.player-slot,
.serve-player-slot {
    background: rgba(255, 253, 246, .18);
}

.player-chip,
.serve-player {
    letter-spacing: -.015em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}

.player-chip.is-server,
.serve-player.is-server {
    background: var(--gold-deep);
    box-shadow: inset 0 0 0 2px rgba(25, 25, 22, .16);
}

.scoreboard {
    padding: 16px 0 22px;
    border-bottom: 3px solid var(--line);
}

.score-team h2 {
    font-weight: 900;
    letter-spacing: -.035em;
}

.score {
    font-variant-numeric: tabular-nums;
    text-shadow: 4px 4px 0 var(--yellow);
}

.score.is-point {
    text-shadow: 4px 4px 0 rgba(179, 40, 22, .22);
}

.serve-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 0 2px;
}

.serve-action p {
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 800;
}

.timer-card {
    background: var(--surface-alt);
}

.timer-card strong {
    font-variant-numeric: tabular-nums;
}

body.theme-dark {
    --paper: #171814;
    --ink: #f3f0e4;
    --line: #ded8c6;
    --yellow: #e2bc35;
    --green: #9fca57;
    --red: #e76a52;
    --muted: #b4ae9d;
    --surface: #20211b;
    --surface-alt: #292a22;
    --court: #465632;
    --gold-deep: #b68d13;
}

body.theme-dark {
    background-image: radial-gradient(rgba(243, 240, 228, .06) 1px, transparent 1px);
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark .net,
body.theme-dark .serve-net,
body.theme-dark .modal-card {
    background: var(--surface);
    color: var(--ink);
}

body.theme-dark .theme-toggle,
body.theme-dark .timer-card {
    background: var(--surface-alt);
}

body.theme-dark .player-slot,
body.theme-dark .serve-player-slot {
    background: rgba(23, 24, 20, .18);
}

body.theme-dark .score {
    text-shadow: 4px 4px 0 rgba(226, 188, 53, .28);
}

@media (max-width: 560px) {
    .header-actions {
        gap: 7px;
    }

    .theme-toggle {
        min-height: 34px;
        padding: 6px 7px;
        font-size: .64rem;
    }

    .scoreboard {
        padding: 8px 0 15px;
    }
}