@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=DM+Mono:wght@400;500&display=swap");

:root {
  --paper: #EEEADC;
  --surface: #FBF9F2;
  --ink: #1A1D21;
  --muted: #5B5E57;
  --line: #D9D2BC;
  --accent: #D2232B;
  --accent-ink: #FFFFFF;
  --link: #2E7A1E;
  --frame: #0B0D10;
  --caption: #FFFFFF;
  --slime: #6DBE45;
  --slime-edge: #4E9A2C;
  --frame-aspect: 480 / 200;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", "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: #0D1117; --surface: #151B23; --ink: #EDEADF; --muted: #9CA3A6; --line: #253040;
    --accent: #FF4747; --accent-ink: #2A0606; --link: #9BE25C; --frame: #05070A; --caption: #FFFFFF;
    --slime: #7DD34F; --slime-edge: #4C9A2A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0D1117; --surface: #151B23; --ink: #EDEADF; --muted: #9CA3A6; --line: #253040;
  --accent: #FF4747; --accent-ink: #2A0606; --link: #9BE25C; --frame: #05070A; --caption: #FFFFFF;
  --slime: #7DD34F; --slime-edge: #4C9A2A;
  color-scheme: dark;
}

body::before {
  content: ""; display: block; height: 22px;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  background: var(--slime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='22'%3E%3Cpath d='M0 0h160v6c-7 0-9 2-10 7s-2 8-4.5 8-3.5-3-4-8-3-7-9-7h-27c-5 0-6 1.5-6.5 4s-1.5 3.5-3 3.5-2.5-1-3-3.5-2-4-7-4H60c-6 0-7.5 3-8 6.5s-2 5.5-4 5.5-3.5-2-4-5.5S41 6 34 6H18c-4 0-5 1-5.5 3s-1.2 2.5-2.5 2.5S8 11 7.5 9 6 6 0 6z'/%3E%3C/svg%3E") 0 0 / 160px 22px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='22'%3E%3Cpath d='M0 0h160v6c-7 0-9 2-10 7s-2 8-4.5 8-3.5-3-4-8-3-7-9-7h-27c-5 0-6 1.5-6.5 4s-1.5 3.5-3 3.5-2.5-1-3-3.5-2-4-7-4H60c-6 0-7.5 3-8 6.5s-2 5.5-4 5.5-3.5-2-4-5.5S41 6 34 6H18c-4 0-5 1-5.5 3s-1.2 2.5-2.5 2.5S8 11 7.5 9 6 6 0 6z'/%3E%3C/svg%3E") 0 0 / 160px 22px repeat-x;
}
::selection { background: color-mix(in srgb, var(--slime) 40%, transparent); }

.wordmark {
  font-family: var(--display); font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(30px, 6vw, 60px); line-height: 1; letter-spacing: -.01em;
}
.wordmark mark { position: relative; background: none; color: transparent; }
.wordmark mark::after {
  content: ""; position: absolute; left: 50%; top: 49%; width: .86em; height: .86em;
  transform: translate(-50%, -50%); border: .11em solid var(--accent); border-radius: 50%;
  background: linear-gradient(45deg, transparent calc(50% - .055em), var(--accent) calc(50% - .055em) calc(50% + .055em), transparent calc(50% + .055em));
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--slime) 55%, transparent)); }
}
:root[data-theme="dark"] body::before { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--slime) 55%, transparent)); }

.results-head h2, .ptitle h3 { font-weight: 800; font-stretch: 112%; letter-spacing: -.005em; }

.results-head h2 q { font-style: normal; }
.field input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--slime) 25%, transparent); }
.chip:not([aria-pressed="true"]):hover { border-color: var(--slime-edge); }
.bars > .hit { box-shadow: 0 0 5px color-mix(in srgb, var(--slime) 60%, transparent); }

.player {
  background: repeating-linear-gradient(-45deg, #F2C230 0 8px, #1A1D21 8px 16px) top / 100% 5px no-repeat, var(--surface);
}

.empty::after {
  content: "“Who ya gonna call?”"; display: block; margin-top: 12px;
  font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
}

.loading .ring {
  width: 40px; height: 40px; border: 0;
  background: repeating-conic-gradient(var(--accent) 0 40deg, color-mix(in srgb, var(--accent) 18%, transparent) 40deg 90deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 60%, transparent));
  animation-duration: 1.6s;
}
@media (prefers-reduced-motion: reduce) { .loading .ring { animation: none; } }