:root {
    color-scheme: dark;
    --background: #101a15;
    --panel: #1b2b22;
    --line: #35483a;
    --muted: #bdcbbf;
    --accent: #d6fb65;
    color: #f3f6ef;
    background: var(--background);
    font: 16px/1.55 system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}
.wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.header, .footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px; }
.header { border-bottom: 1px solid var(--line); }
.brand { font-weight: 900; letter-spacing: .09em; text-decoration: none; }
.brand span { color: var(--accent); }
nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
nav a { text-decoration: none; color: var(--muted); }
nav a:hover, article a:hover { color: white; }
.eyebrow { color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px; }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -.045em; }
h1 { font-size: clamp(2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: 1.65rem; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 14px; border: 0; border-radius: 8px; background: var(--accent); color: var(--background); font: inherit; font-weight: 800; text-decoration: none; padding: 12px 18px; cursor: pointer; }
.button:hover { background: #e9ffab; }
.booking { margin-top: clamp(20px, 4vw, 44px); padding: clamp(20px, 4vw, 36px); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 16px; align-items: end; margin-top: 20px; }
label { display: grid; gap: 6px; min-width: 0; font-weight: 700; }
select, input { width: 100%; min-width: 0; min-height: 49px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--background); color: inherit; font: inherit; }
.notice { margin-bottom: 0; color: var(--accent); }
.sports { padding-block: 62px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
article { border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.card-number { display: block; color: var(--accent); font-size: .8rem; margin-bottom: 22px; }
article a { color: var(--accent); text-underline-offset: 4px; }
.footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
@media (max-width: 760px) {
    form { grid-template-columns: 1fr 1fr; }
    form button { grid-column: 1 / -1; justify-self: start; }
    .cards { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
    .wrap { width: calc(100% - 32px); }
    .header { align-items: flex-start; flex-direction: column; }
    form { grid-template-columns: 1fr; }
}

form.court-planner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; gap: 24px; }
.court-planner fieldset { margin: 0; padding: 14px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; }
.court-planner legend { padding-inline: 6px; font-weight: 800; }
.court-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.court-choice {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    min-height: 84px;
    padding: 6px;
    border: 2px solid #859a88;
    border-radius: 8px;
    background: #294535;
    text-align: center;
    cursor: pointer;
}
.court-choice::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid #859a88;
    border-radius: 4px;
    background: linear-gradient(#859a88, #859a88) center / 100% 1px no-repeat;
    pointer-events: none;
}
.court-name {
    z-index: 1;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--background);
    font-size: .875rem;
}
.court-choice:has(input:checked) {
    border-color: var(--accent);
    background: #466334;
    color: var(--accent);
}
.court-choice input {
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
    width: 1.1rem;
    min-height: 0;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--accent);
}
.court-choice:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.schedule { display: grid; gap: 16px; }
.schedule .button { justify-self: start; }
.time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#time-rules { margin: 0 0 12px; color: var(--muted); }
@media (max-width: 760px) {
    form.court-planner { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .booking { padding: 14px; }
    .court-planner fieldset { padding: 10px; }
    .court-grid { gap: 8px; }
    .time-fields { grid-template-columns: 1fr; }
    .schedule .button { width: 100%; }
}

form.court-planner { grid-template-columns: minmax(0, 1fr); }
.court-choice { max-height: 150px; aspect-ratio: auto; align-content: center; gap: 4px; }
.court-choice:has(input:disabled) { cursor: default; background: var(--background); }
.court-status { z-index: 1; background: var(--background); padding-inline: 4px; font-size: .75rem; }
.court-choice:has(input:not(:disabled)) .court-status { color: var(--accent); }
.contact-fields { display: grid; gap: 12px; }
.contact-fields .button { justify-self: start; }
.contact-fields p { margin: 0; color: var(--muted); }

.court-planner .schedule {
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}
.schedule input, .schedule select { padding-inline: 5px; }

.header { flex-wrap: wrap; }
.header .brand { max-width: 38ch; line-height: 1.3; letter-spacing: .025em; }

/* Stadium palette. Use surface and text tokens for readable UI,
   and the sport colors for highlights, graphics, and future features. */
:root {
    --stadium-ink: #101B23;
    --stadium-surface: #192B35;
    --stadium-line: #405966;
    --stadium-white: #F4FAFA;
    --stadium-muted: #BDCED5;
    --sport-lime: #C9F76C;
    --sport-orange: #FF8E57;
    --sport-violet: #A6AEFF;
    --sport-aqua: #62E4DA;
    --background: var(--stadium-ink);
    --panel: var(--stadium-surface);
    --line: var(--stadium-line);
    --muted: var(--stadium-muted);
    --accent: var(--sport-lime);
    color: var(--stadium-white);
}
body {
    background:
        linear-gradient(135deg, rgb(16 27 35 / .35), transparent 65%),
        url("stadium-background.png") center top / cover no-repeat;
    background-attachment: fixed;
}
.header, .footer {
    padding-inline: clamp(12px, 3vw, 30px);
}
.booking {
    border-top: 4px solid var(--sport-lime);
    box-shadow: 0 16px 48px rgb(0 0 0 / .28);
}
.booking h1 { color: var(--sport-lime); }
.court-choice {
    background: #23434A;
    border-color: var(--sport-aqua);
}
.court-choice::before {
    border-color: var(--stadium-line);
    background-image: linear-gradient(var(--stadium-line), var(--stadium-line));
}
.court-choice:has(input:checked) {
    background: #35513A;
    border-color: var(--sport-lime);
}
.court-choice:has(input:disabled) { border-color: var(--stadium-line); }
.sports {
    margin-block: 32px;
    padding: clamp(20px, 4vw, 36px);
    border-radius: 18px;
    background: var(--panel);
}
.cards article { background: var(--background); }
.cards article:nth-child(1) { border-top: 3px solid var(--sport-aqua); }
.cards article:nth-child(2) { border-top: 3px solid var(--sport-violet); }
.cards article:nth-child(3) { border-top: 3px solid var(--sport-orange); }
@media (max-width: 600px) {
    body { background-attachment: scroll; background-size: auto, auto 100svh; }
}

/* Keep the players at the sides visible on desktop. */
@media (min-width: 1100px) {
    body {
        background-size: cover, 100% auto;
    }
    .wrap {
        width: min(920px, 48vw);
    }
}

.header { background: transparent; text-shadow: 0 1px 4px var(--stadium-ink); }
.footer { background: var(--stadium-ink); }