/* Shared tokens and controls. Palette: chalk, rubber floor, and bumper-plate colors. */
:root {
  --bg: #eceff1;
  --surface: #ffffff;
  --ink: #1b1e21;
  --muted: #5b646c;
  --line: #d3d8dc;
  --accent: #2e6fd1;
  --accent-ink: #ffffff;
  --danger: #c22d25;

  --red: #d8352c;
  --blue: #2e6fd1;
  --yellow: #f0c02f;
  --green: #2f9d57;

  --display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif;
  --body: 'Barlow', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1e21;
    --surface: #24282c;
    --ink: #eef0ec;
    --muted: #9aa3ab;
    --line: #363c42;
    --accent: #5d92e6;
    --accent-ink: #0f1a2b;
    --danger: #ef6a62;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.05; margin: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.error { color: var(--danger); font-weight: 500; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn {
  font: 600 15px/1 var(--body);
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { border-color: var(--muted); }
.btn:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { border-color: var(--accent); filter: brightness(1.08); }
.btn-ghost { background: transparent; }
.btn-danger { background: transparent; border-color: transparent; color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); }
.btn[disabled] { opacity: 0.55; cursor: default; }

.link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; min-width: 0; }
.field > span { color: var(--muted); }
.field small { font-size: 13px; font-weight: 400; }

input[type='text'], input[type='password'], input[type='search'], input[type='number'], input[type='date'],
input:not([type]), select, textarea {
  font: 16px var(--body);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
textarea { resize: vertical; min-height: 130px; line-height: 1.45; }

.check { display: flex; gap: 10px; align-items: center; font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }

/* Rank discs */
.disc {
  display: inline-grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  font: 800 0.85em/1 var(--display);
  flex: none;
  box-shadow: inset 0 0 0 0.22em rgba(0, 0, 0, 0.16);
}
.disc-1 { background: var(--red); color: #fff; }
.disc-2 { background: var(--blue); color: #fff; }
.disc-3 { background: var(--yellow); color: #1b1e21; }
.disc-4 { background: var(--green); color: #fff; }
.disc-n { box-shadow: inset 0 0 0 0.14em var(--line); color: var(--muted); }

/* Sign-in */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.login-card h1 { font-size: 46px; font-weight: 800; }
/* The logo is white; show it dark on light backgrounds. */
.login-logo { height: 76px; width: auto; align-self: flex-start; filter: invert(1); }
@media (prefers-color-scheme: dark) { .login-logo { filter: none; } }
.tv .login-logo { filter: none; height: 13vh; }
.login-card p { margin: 0; }

.login-big .login-card { width: min(720px, 90vw); padding: 6vh 5vw; gap: 3vh; font-size: 2.6vh; }
.login-big h1 { font-size: 9vh; }
.login-big .field { font-size: 2.4vh; }
.login-big input[type='password'] { font-size: 3.4vh; padding: 1.6vh 1.4vw; }
.login-big .check input { width: 3vh; height: 3vh; }
.login-big .btn { font-size: 3vh; padding: 2vh; }

/* Status toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  max-width: calc(100vw - 32px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--danger); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}