/* Design tokens, page skeleton, and shared bits (spinner, empty states). */
/* Dark is the default theme; [data-theme="light"] (set by js/theme.js and the snippet in index.html) swaps the palette. */
:root {
  --bg: #0f1115; --panel: #181b22; --card: #262a32; --card-border: #323846; --border: #2a2f3a;
  --text: #e8eaed; --strong: #fff; --muted: #8b93a1; --accent: #4c8dff; --red: #ff5a5a; --poss: #f5d000;
  --row-alt: #1c2029; --row-hover: #262b35; --section: #2d3442; --section-border: #3b4352; --chip: #1c2029;
  --live-section: #3d1e25; --live-border: #61303a; --live-text: #fff;
  --control-hover: #3a404c; --scrollbar: #3a404c; --shadow: rgba(0, 0, 0, .5);
  --remove-bg: #9aa0a6; --remove-hover: #c4c8cc;
  --logo-edge: drop-shadow(0 0 1px rgba(255, 255, 255, .45));  /* keeps dark logos visible on dark backgrounds */
  --grass: #2e6b34; --grass-alt: #2a6230; --los: #4c8dff; --ltg: #f5d000;
  color-scheme: dark;  /* dark native scrollbars and form controls */
}
:root[data-theme="light"] {
  --bg: #f4f5f7; --panel: #fff; --card: #fff; --card-border: #d7dbe1; --border: #e0e3e8;
  --text: #1c2027; --strong: #000; --muted: #5d6673; --accent: #2f6fe4; --red: #d93636; --poss: #c99a00;
  --row-alt: #eceef2; --row-hover: #e2e6ec; --section: #d9dee6; --section-border: #c8cfd9; --chip: #fff;
  --live-section: #fbe2e2; --live-border: #efb3b3; --live-text: #8c1d1d;
  --control-hover: #d3d8df; --scrollbar: #c2c7ce; --shadow: rgba(0, 0, 0, .15);
  --remove-bg: #c4c8cc; --remove-hover: #aeb4bb;
  --logo-edge: none;
  color-scheme: light;
}
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
header { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
/* Wordmark: football, then GAME over TRACKER over yard-line hash marks. The font is self-hosted (fonts/, SIL OFL). */
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); }
header h1 { display: grid; margin: 0 0 0 -8px; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700;
  text-transform: uppercase; line-height: .92; }
header h1 .l1 { font-size: 15px; letter-spacing: .16em; color: var(--muted); }
header h1 .l2 { font-size: 18px; letter-spacing: .05em; }
header h1 .hash { height: 4px; margin-top: 3px; background: repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 6px); opacity: .7; }
/* The football; js/logo.js spirals it once on click. */
#logo { display: flex; padding: 2px; border: 0; border-radius: 6px; background: none; cursor: pointer; }
#logo svg { width: 28px; height: 28px; }
#logo:focus-visible { outline: 2px solid var(--accent); }
#logo .laces { transform-box: view-box; transform-origin: 32px 32px; }
#logo.spiral .laces { animation: spiral-once .7s linear; }
#panel-toggle { margin: -2px 0; padding: 2px 8px; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 15px; line-height: 1.3; cursor: pointer; }
#panel-toggle:hover { color: var(--text); }
#theme-toggle { margin: -2px 0; padding: 2px 8px; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 14px; line-height: 1.3; cursor: pointer; }
#theme-toggle:hover { color: var(--text); }
#updated { color: var(--muted); font-size: 12px; margin-left: auto; }
main { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100vh - 49px); transition: grid-template-columns .25s ease; }
aside { width: 300px; background: var(--bg); border-right: 1px solid var(--border); overflow-y: auto; transition: transform .25s ease, visibility 0s; }
/* Hidden game list: it slides out to the left (same timing as the phone drawer) while the board widens. */
body.panel-collapsed main { grid-template-columns: 0 minmax(0, 1fr); }
body.panel-collapsed aside { transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
main:has(aside.preload), aside.preload { transition: none; }  /* no slide on first paint */
/* Loading spinner: the favicon football with its laces rolling over the top and back underneath, like a spiral. */
.spinner { display: block; width: 32px; height: 32px; margin: 48px auto; grid-column: 1 / -1; }
.spinner .laces { transform-box: view-box; transform-origin: 32px 32px; animation: spiral .7s linear infinite; }
@keyframes spiral {
  0% { transform: translateY(-15px) scaleY(.3); opacity: 0; }
  20%, 80% { opacity: 1; }
  50% { transform: translateY(0) scaleY(1); }
  100% { transform: translateY(15px) scaleY(.3); opacity: 0; }
}
/* One full turn starting and ending with the laces facing up, so the still logo doesn't jump. */
@keyframes spiral-once {
  0% { transform: none; }
  35% { opacity: 1; }
  50% { transform: translateY(15px) scaleY(.3); opacity: 0; }
  50.01% { transform: translateY(-15px) scaleY(.3); opacity: 0; }
  65% { opacity: 1; }
  100% { transform: none; }
}
.empty { color: var(--muted); padding: 24px; grid-column: 1 / -1; }
.mobile-only { display: none; }
/* Admin login (js/admin.js). */
#admin-login { width: min(320px, calc(100vw - 32px)); padding: 20px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 40px var(--shadow); }
#admin-login::backdrop { background: rgba(0, 0, 0, .5); }
#admin-login label { display: block; margin-bottom: 8px; font-weight: 600; }
#admin-login input { width: 100%; padding: 8px 10px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 16px; }
#admin-login input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
#admin-login .error { min-height: 18px; margin: 6px 0 10px; color: var(--red); font-size: 12px; }
#admin-login .buttons { display: flex; justify-content: flex-end; gap: 8px; }
#admin-login button { padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text); font: inherit; cursor: pointer; }
#admin-login button[value="ok"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }