:root {
  /* Native controls (dropdown lists, number spinners, scrollbars) draw in
     their dark variant, so they match the page instead of rendering dark
     text on a dark grey popup. */
  color-scheme: dark;
  --bg: #111111;
  --orange: #F0733C;
  --orange-deep: #D9631F;
  --cream: #EDE6D5;
  --seafoam: #7AA99B;
  --teal: #0B2D36;
  --gray: #6C6F73;
  --text: #F4F1EA;
  --text-muted: #BDB4A6;
  --border: rgba(244, 241, 234, 0.16);
  --card-bg: rgba(17, 17, 17, 0.92);
  --card-bg-strong: rgba(17, 17, 17, 0.97);
  --red: #D9534F;
  --red-bg: rgba(217, 83, 79, 0.16);
  --green: var(--seafoam);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  position: relative;
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* The wave mural is a hero-band branding element anchored to the TOP of the
   page (not a viewport-fixed layer), so it occupies the upper/middle region
   near the header and then scrolls away -- it never sits behind content
   further down a long page, and never becomes a giant page section. Cards
   and tables still paint their own solid surface on top wherever they
   happen to overlap it near the top of a page. */
.site-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 560px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}
/* The mural is at full strength up behind the masthead and page title, then
   dims steadily so that by the time dense body copy and tables begin it is
   only a faint wash -- text stays readable wherever it happens to land. */
.site-background::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 380px;
  background: linear-gradient(to bottom, transparent, var(--bg) 78%);
}
.site-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  opacity: 0.45;
}

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  padding: 14px 24px;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}
.topbar .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.topbar .brand-bluesky { display: flex; align-items: center; }
.topbar .brand-bluesky img { height: 40px; width: auto; display: block; }
.topbar .brand-wonderbowl { display: flex; align-items: center; }
.topbar .brand-wonderbowl img { height: 30px; width: auto; display: block; }

.topbar nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

/* Visible to screen readers only. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Admin mode is a state you stay in, so it gets a persistent marker in the
   header rather than only showing up as extra controls further down a page. */
.topbar.admin-mode { border-bottom-color: var(--orange); }
.admin-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.topbar nav a.exit-admin {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: none;
}
.topbar nav a.exit-admin:hover { color: var(--text); text-decoration: underline; }

.topbar nav a:hover { color: var(--text); }
.topbar nav a.active { color: var(--text); border-bottom-color: var(--orange); }
.topbar nav a.admin-btn {
  background: var(--orange);
  color: #fff;
  padding: 8px 16px;
  border-radius: 7px;
  border-bottom: none;
  font-weight: 700;
}
.topbar nav a.admin-btn:hover { background: var(--orange-deep); color: #fff; }
.topbar nav a.admin-btn.active { background: var(--orange-deep); }

/* ---- league context: which season / league / night you're on ---------- */
/* Several leagues run at once, so every page says which one it is showing
   (or, in admin, editing) and lets you switch without hunting for it. */
.context-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 10px 24px;
  background: var(--card-bg-strong);
  border-bottom: 1px solid var(--border);
}
.context-bar.admin { border-bottom-color: rgba(240, 115, 60, 0.55); }
.context-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.context-kicker {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
}
.context-form label, .context-day {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.context-form select { font-size: 0.9rem; font-weight: 600; padding: 6px 10px; max-width: 260px; }
.context-form select:hover { border-color: var(--orange); }
.context-day strong { font-size: 0.9rem; color: var(--text); text-transform: none; letter-spacing: 0; }
.context-link { font-size: 0.88rem; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.context-link:visited { color: var(--text-muted); }
.context-link:hover, .context-link.active { color: var(--text); text-decoration: underline; }

main { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 32px 20px 60px; }
/* The admin score grid carries every game of every week. */
main.wide { max-width: 1480px; }

/* Loose text -- headings, body copy, form labels -- can land anywhere the
   mural happens to be. A dark halo is invisible against the flat background
   and keeps the text readable where it crosses a ribbon. */
main h1, main h2, main p, main label, main .legend, main .season-picker { text-shadow: 0 1px 5px rgba(8, 8, 8, 0.92); }

a { color: var(--orange); }
a:visited { color: var(--orange); }
a:hover { color: var(--orange-deep); }

h1 { margin-top: 0; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
h2 { color: var(--text); font-weight: 700; }
.muted { color: var(--text-muted); }
.error { color: #FF8B72; }

.flash { max-width: 1100px; margin: 12px auto 0; padding: 0 20px; position: relative; z-index: 1; }
.flash-msg { background: rgba(122, 169, 155, 0.16); color: var(--seafoam); border: 1px solid rgba(122, 169, 155, 0.35); padding: 8px 12px; border-radius: 6px; margin-bottom: 8px; }

.sort-form { margin-bottom: 16px; }
.sort-form select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); }

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); backdrop-filter: blur(3px); }

table.rankings { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.92rem; }
table.rankings th, table.rankings td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.rankings th:nth-child(2), table.rankings td:nth-child(2) { text-align: left; }
table.rankings thead th { background: rgba(240, 115, 60, 0.12); color: var(--text); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; position: sticky; top: 0; }
/* Subtle stripes so a row is easy to follow across a wide table, and a
   clearer highlight on the row under the pointer. Cell colours (incomplete
   weeks) sit on top of both. */
table.rankings tbody tr:nth-child(even) { background: rgba(244, 241, 234, 0.035); }
table.rankings tbody tr:hover { background: rgba(244, 241, 234, 0.08); }
/* The season this page is about, in a history table. */
table.rankings tr.current-row td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
table.rankings tr.current-row a[aria-current] { color: var(--text); }
/* "This Season's Statistics  Summer 2026" */
h2 .h-note { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
table.history-table { min-width: 520px; }
table.rankings a { color: var(--orange); text-decoration: none; font-weight: 600; }
table.rankings a:hover { text-decoration: underline; }
table.rankings .totals-row td { font-weight: 700; background: rgba(244, 241, 234, 0.06); }

/* Contact columns on the admin players table: quieter than the scores, and
   allowed to be wider, since a phone number or address shouldn't be the
   loudest thing on a page about bowling. */
table.rankings td.contact { text-align: left; font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; }
table.rankings td.contact a { font-weight: 500; }

/* Rankings: Total Score is the headline number; the two averages sit beside
   it a size smaller, in equally narrow columns (headings wrap to two
   lines). The team's night is a small chip after its name, like the
   pickleball day chips. */
table.rankings th.total-cell, table.rankings th.avg-cell { white-space: normal; width: 4.6em; line-height: 1.25; }
table.rankings .total-cell, table.rankings .avg-cell { padding-left: 6px; padding-right: 6px; }
table.rankings td.total-cell { font-size: 1.2rem; font-weight: 800; }
table.rankings td.avg-cell { font-size: 0.85rem; color: var(--text-muted); }
table.rankings .day-tag { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(237, 230, 213, 0.14); color: var(--cream); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: 1px; }
select:disabled { opacity: 0.75; cursor: not-allowed; }

.incomplete-week { background: var(--red-bg); color: #FF8B72; font-weight: 600; }
tr.demoted { opacity: 0.65; }

.legend { font-size: 0.85rem; color: var(--text-muted); margin-top: 10px; }
.swatch.incomplete-week { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }

.cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; min-width: 160px; }
.card-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.card-value { font-size: 1.6rem; font-weight: 800; color: var(--text); }

.login-form, .stacked-form { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin-top: 12px; }
.stacked-form label, .stacked-form .field { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--text-muted); }
.stacked-form .field label { display: block; }
.stacked-form .league-note, .stacked-form .hint { margin: -4px 0 0; font-size: 0.85rem; }
input, select, button {
  font-size: 1rem;
  padding: 9px 11px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
}
input::placeholder { color: var(--text-muted); }
select option, select optgroup { background: #1d1d1d; color: var(--text); }
select option:disabled { color: var(--gray); }
button { background: var(--orange); color: #fff; border: none; cursor: pointer; padding: 9px 16px; font-weight: 700; }
button:hover { background: var(--orange-deep); }
button.danger { background: transparent; color: var(--red); border: 1px solid var(--red); margin-left: 6px; }
button.danger:hover { background: var(--red-bg); }

/* Delete/remove actions are plain links to a real confirmation page rather
   than a JS confirm() popup (some browsers/embedded views never show
   those, which made the button look broken) -- styled to still look and
   feel like the danger button above. */
a.danger {
  display: inline-block;
  font-size: 1rem;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid var(--red);
  background: transparent;
  color: var(--red);
  text-decoration: none;
  cursor: pointer;
}
a.danger:hover { background: var(--red-bg); }

.row-actions { white-space: nowrap; }
.row-actions > * { margin-left: 10px; vertical-align: middle; }

/* ---- team autocomplete (public/combobox.js) --------------------------- */
/* The list lives inside the field's wrapper, so it always opens right
   under the input, at the input's width, and scrolls with the page. */
.combobox { position: relative; }
.combobox input { width: 100%; }
.combobox-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: var(--card-bg-strong);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  text-shadow: none;
}
.combobox-list[hidden] { display: none; }
.combobox-group {
  padding: 8px 10px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.combobox-option {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  font-size: 0.95rem;
}
.combobox-option .meta { color: var(--text-muted); font-size: 0.8rem; }
.combobox-option:hover, .combobox-option[aria-selected="true"] { background: rgba(240, 115, 60, 0.2); }

/* ---- team score table ------------------------------------------------- */
/* Player, then Season, then the weeks. The name column stays pinned while a
   wide table scrolls sideways, so every row still says whose scores they
   are. Pinned cells need solid backgrounds or the scrolled cells show
   through them. */
table.team-table th:nth-child(2), table.team-table td:nth-child(2) { text-align: center; }
table.team-table td.season-cell { font-weight: 700; }
table.sticky-first th:first-child,
table.sticky-first td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #161616;
  box-shadow: 1px 0 0 var(--border);
  text-align: left;
}
table.sticky-first thead th:first-child { z-index: 3; background: #2a1d16; }
table.sticky-first .totals-row td:first-child { background: #1f1f1f; }

.notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid rgba(240, 115, 60, 0.45);
  border-radius: 8px;
  background: rgba(240, 115, 60, 0.1);
  color: var(--text);
}

/* ---- score grid (public/score_grid.js) -------------------------------- */
.grid-help { font-size: 0.85rem; }
table.score-grid td.week-cell { padding: 6px; vertical-align: top; }
table.score-grid th:nth-child(2), table.score-grid td:nth-child(2) { text-align: center; }
table.score-grid td.player-cell { text-align: left; }
.week-cell .games { display: flex; gap: 3px; justify-content: center; }
.week-total { margin-top: 3px; min-height: 1.1em; font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
th .game-heads { display: flex; gap: 3px; justify-content: center; margin-top: 3px; font-size: 0.65rem; font-weight: 600; color: var(--text-muted); }
th .game-heads span { width: 44px; }
input.score-cell {
  width: 44px;
  padding: 6px 2px;
  text-align: center;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  border-radius: 5px;
  background: rgba(244, 241, 234, 0.05);
}
input.score-cell:hover { border-color: rgba(244, 241, 234, 0.35); }
input.score-cell:focus { outline: 2px solid var(--orange); outline-offset: 0; border-color: var(--orange); background: var(--card-bg-strong); }
input.score-cell.saving { border-color: var(--orange); }
input.score-cell.saved-flash { border-color: var(--seafoam); background: rgba(122, 169, 155, 0.2); }
input.score-cell.error-flash { border-color: var(--red); background: var(--red-bg); }

/* ---- seasons, filters and the optional-stat cards ------------------- */

.season-picker { margin: 0 0 16px; font-size: 0.9rem; color: var(--text-muted); }
.season-picker select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); margin-left: 6px; }

.filter-form {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--text-muted); }
.filter-form input[type="number"] { width: 110px; }
.filter-form select { max-width: 240px; }
.filter-form .filter-reset { align-self: center; font-size: 0.9rem; }

.inline-form { display: inline; }
.inline-form button { font-size: 0.85rem; padding: 5px 10px; }

.badge {
  display: inline-block;
  background: var(--seafoam);
  color: #0B2D36;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 700;
}

.hint { font-size: 0.8rem; color: var(--text-muted); font-weight: 400; margin: 2px 0 0; }

fieldset {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
  background: var(--card-bg);
}
fieldset legend { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 0 6px; }
label.check {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  color: var(--text) !important;
  font-size: 0.95rem !important;
  padding: 3px 0;
}
label.check input { width: auto; }

/* Trend and pins-over-average read at a glance by colour as well as arrow,
   but never by colour alone -- the arrow and sign carry the same meaning. */
.up { color: var(--seafoam); }
.down { color: #FF8B72; }
.card-value.small { font-size: 1.05rem; }
.card-value .small, span.small, h1 .small { font-size: 0.8rem; font-weight: 400; color: var(--text-muted); }
h1 .small { font-size: 1rem; margin-left: 8px; }

table.rankings th a { color: var(--text); text-decoration: none; }
table.rankings th a:hover { text-decoration: underline; }
/* Sortable headings (players table): a faint up-down arrow on each, and
   the sorted column shows which way it runs. */
table.rankings th a.sort::after { content: " \2195"; opacity: 0.4; }
table.rankings th a.sort.sorted::after { content: " \25be"; opacity: 1; }
table.rankings th a.sort.sorted.asc::after { content: " \25b4"; }

/* Players page: This Season / Lifetime Stats switch. */
.view-toggle { display: inline-flex; margin: 4px 0 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-toggle a { padding: 8px 14px; font-weight: 700; font-size: 0.9rem; color: var(--text); text-decoration: none; background: var(--card-bg); }
.view-toggle a + a { border-left: 1px solid var(--border); }
.view-toggle a:hover { background: var(--card-bg-strong); }
.view-toggle a.on { background: var(--orange); color: #fff; }
/* Its many columns: headings wrap to two lines and cells sit a little
   closer, so the table fits a desktop screen without sliding. */
table.players-table th { white-space: normal; line-height: 1.25; }
table.players-table th, table.players-table td { padding-left: 8px; padding-right: 8px; }

.career-list { list-style: none; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.career-list a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--card-bg);
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}
.career-list a:hover { background: var(--card-bg-strong); }
.career-list a[aria-current="page"] { border-color: var(--orange); }

/* The players table carries more columns than the others, and on a phone
   the first column needs to stay put while the rest scrolls under it. */
@media (max-width: 640px) {
  .filter-form { gap: 10px; }
  .filter-form label, .filter-form select { width: 100%; max-width: none; }
  .cards { gap: 8px; }
  .card { min-width: 130px; padding: 10px 12px; }
  .card-value { font-size: 1.3rem; }
  .topbar { padding: 12px 16px; }
  .topbar nav { gap: 14px; }
  .context-bar { padding: 10px 16px; }
  .context-form select { max-width: 100%; }
}

/* Header: like the pickleball pages, the menu is on its own line under the
   logo, running from the left, with Pickleball (the other league) as a
   chip at the right end, mirroring the Wonderbowl chip on pickleball pages. */
.topbar nav { flex: 1 1 100%; }
.topbar nav a.league-switch {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  padding: 3px 14px 5px 3px; border-radius: 999px; border-bottom: none;
  /* Pickleball's colours: cream, with the header swoosh's orange / yellow /
     aqua stripe along the bottom, blue lettering in Nunito. */
  background: linear-gradient(90deg, #F38F47 0 33.3%, #FEF29D 33.3% 66.6%, #A6E0E1 66.6%) bottom / 100% 4px no-repeat, #F8F5EB;
  color: #1f6f99; font-family: "Nunito", "Inter", sans-serif; font-weight: 900; font-size: 1rem; letter-spacing: 0;
}
.topbar nav a.league-switch img { display: block; width: 24px; height: 24px; border-radius: 50%; }
.topbar nav a.league-switch:hover { background-color: #fff; color: #3092C2; }

/* The whole header (menu, admin line, Season/League bar) stays put while the
   page scrolls -- on desktop only; on phones it would take too much of the
   screen, so there it scrolls away as before (owner's request). The body
   must grow with the page for this: a body fixed at 100% height would let
   the header go after one screen of scrolling. Anchor jumps (#history)
   land below the header instead of under it. */
@media (min-width: 641px) {
  html, body { height: auto; }
  .site-head { position: sticky; top: 0; z-index: 20; }
  html { scroll-padding-top: 200px; }
}

/* Admin tools get their own line under the header's menu. */
.adminbar { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; padding: 8px 24px; background: #1c1916; border-bottom: 1px solid var(--border); }
.adminbar a { color: var(--text-muted); text-decoration: none; font-size: 0.92rem; font-weight: 600; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.adminbar a:hover { color: var(--text); }
.adminbar a.active { color: var(--text); border-bottom-color: var(--orange); }
.adminbar a.admin-btn { background: var(--orange); color: #fff; padding: 7px 14px; border-radius: 7px; border-bottom: none; font-weight: 700; }
.adminbar a.admin-btn:hover, .adminbar a.admin-btn.active { background: var(--orange-deep); color: #fff; }
.adminbar a.exit-admin { font-size: 0.8rem; font-weight: 500; margin-left: auto; }
.adminbar a.exit-admin:hover { text-decoration: underline; }
@media (max-width: 640px) { .adminbar { padding: 8px 16px; gap: 8px 14px; } }