@import url("https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,400..900;1,400..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..800;1,6..12,400..800&family=DM+Mono:wght@400;500&display=swap");

:root {
  --paper: #FBF4E6;
  --surface: #FFFDF8;
  --ink: #0E3B22;
  --muted: #4E5F4F;
  --line: #E6D9BF;
  --accent: #C41E2A;
  --accent-ink: #FFFFFF;
  --link: #17703A;
  --frame: #07130C;
  --caption: #FFFFFF;
  --gold: #C9962A;
  --cane: #D3202D;
  --cane-white: #FFFFFF;
  --frame-aspect: 480 / 254;
  --snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%23CDAE70' stroke-width='1.6' stroke-linecap='round'%3E%3Cg transform='translate(34 40)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg transform='translate(150 24) scale(.6)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg transform='translate(104 112) scale(.8)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg transform='translate(190 150) scale(.5)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg transform='translate(52 186) scale(.7)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg fill='%23CDAE70'%3E%3Ccircle cx='92' cy='60' r='2'/%3E%3Ccircle cx='178' cy='88' r='1.6'/%3E%3Ccircle cx='16' cy='120' r='1.4'/%3E%3Ccircle cx='140' cy='200' r='2'/%3E%3Ccircle cx='206' cy='206' r='1.2'/%3E%3C/g%3E%3C/svg%3E");

  --display: "Grandstander", "Chalkboard SE", "Comic Sans MS", sans-serif;
  --body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A2416; --surface: #10301D; --ink: #FBF4E6; --muted: #B3C2B2; --line: #224A30;
    --accent: #FF4D4D; --accent-ink: #2A0605; --link: #F4C95D; --frame: #040C07; --caption: #FFFFFF;
    --gold: #F4C95D; --cane: #E8323C; --cane-white: #FBF4E6;
    --snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%23FFFFFF' stroke-opacity='.22' stroke-width='1.6' stroke-linecap='round'%3E%3Cg transform='translate(34 40)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg transform='translate(150 24) scale(.6)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg transform='translate(104 112) scale(.8)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg transform='translate(190 150) scale(.5)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg transform='translate(52 186) scale(.7)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg fill='%23FFFFFF' fill-opacity='.3'%3E%3Ccircle cx='92' cy='60' r='2'/%3E%3Ccircle cx='178' cy='88' r='1.6'/%3E%3Ccircle cx='16' cy='120' r='1.4'/%3E%3Ccircle cx='140' cy='200' r='2'/%3E%3Ccircle cx='206' cy='206' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0A2416; --surface: #10301D; --ink: #FBF4E6; --muted: #B3C2B2; --line: #224A30;
  --accent: #FF4D4D; --accent-ink: #2A0605; --link: #F4C95D; --frame: #040C07; --caption: #FFFFFF;
  --gold: #F4C95D; --cane: #E8323C; --cane-white: #FBF4E6;
  --snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%23FFFFFF' stroke-opacity='.22' stroke-width='1.6' stroke-linecap='round'%3E%3Cg transform='translate(34 40)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg transform='translate(150 24) scale(.6)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg transform='translate(104 112) scale(.8)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg transform='translate(190 150) scale(.5)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg transform='translate(52 186) scale(.7)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg fill='%23FFFFFF' fill-opacity='.3'%3E%3Ccircle cx='92' cy='60' r='2'/%3E%3Ccircle cx='178' cy='88' r='1.6'/%3E%3Ccircle cx='16' cy='120' r='1.4'/%3E%3Ccircle cx='140' cy='200' r='2'/%3E%3Ccircle cx='206' cy='206' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}

body { background: var(--snow) 0 0 / 220px 220px, var(--paper); }
body::before {
  content: ""; display: block; height: 12px;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  background: repeating-linear-gradient(-45deg, var(--cane) 0 14px, var(--cane-white) 14px 28px);
  box-shadow: 0 2px 0 var(--gold);
}

.wordmark {
  font-family: var(--display); font-weight: 900; color: var(--accent);
  font-size: clamp(56px, 10vw, 104px); line-height: .9; letter-spacing: -.01em;
  text-shadow: 0 2px 0 color-mix(in srgb, var(--gold) 40%, transparent);
}
.wordmark mark { background: none; color: var(--link); }
:root .wordmark mark { color: #17703A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wordmark mark { color: #4FBF6E; } }
:root[data-theme="dark"] .wordmark mark { color: #4FBF6E; }
.wordmark::after { content: "★" / ""; color: var(--gold); font-size: .42em; vertical-align: .95em; margin-left: .06em; text-shadow: none; }

.player {
  background: repeating-linear-gradient(-45deg, var(--cane) 0 9px, var(--cane-white) 9px 18px) top / 100% 6px no-repeat, var(--surface);
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
}
.results-head h2, .ptitle h3 { font-weight: 800; letter-spacing: -.005em; }
.btn:not(.ghost) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:not(.ghost):hover { background: var(--link); border-color: var(--link); }
.chip:not([aria-pressed="true"]):hover { border-color: var(--gold); }