/* Self-hosted so the site has no third-party requests: nothing about a player
   reaches a font CDN. Both files are variable, covering every weight we use.
   Archivo and Big Shoulders Display are licensed under the SIL Open Font
   License 1.1 — see public/fonts/README.txt. */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Big Shoulders Display';
  src: url('/fonts/big-shoulders-display-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ClubIT Spartans — palette taken off the club shield.
   navy field, steel type, purple for anything you press, teal for confirmation. */

:root {
  --navy-900: #0b1628;
  --navy-800: #101f38;
  --navy-700: #16294a;
  --line:     #223457;
  --steel:    #a9b3c6;
  --steel-hi: #d5dbe6;
  --white:    #f6f8fc;
  --purple:   #6c4ff6;
  --purple-hi:#8a73ff;
  --teal:     #2ed9c3;
  --danger:   #ff8087;
  /* One muted grey for hints, footnotes and placeholders. Clears WCAG AA
     (4.5:1) against the page, the card, and the tinted fieldset backgrounds
     (the teal tint lightens the backdrop enough to matter). */
  --muted:    #8290a8;
  /* Tag text sits on a 20%-opacity purple fill, which lifts the backdrop; the
     usual --purple-hi only reaches 3.9:1 there, so tags get a lighter tint. */
  --purple-tag: #a494ff;

  --display: 'Big Shoulders Display', 'Arial Narrow', 'Haettenschweiler', Impact, sans-serif;
  --body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --shell: 1160px;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--navy-900);
  color: var(--steel);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The shield's diagonal stripes, blown up and dropped behind the page. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 49%, rgba(108, 79, 246, 0.07) 49%, rgba(108, 79, 246, 0.07) 57%, transparent 57%),
    linear-gradient(115deg, transparent 63%, rgba(46, 217, 195, 0.045) 63%, rgba(46, 217, 195, 0.045) 67%, transparent 67%),
    radial-gradient(110% 80% at 88% 0%, rgba(22, 41, 74, 0.55) 0%, transparent 62%);
}

a { color: var(--teal); }

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

/* ------------------------------------------------------------------ header */

.masthead {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 22, 40, 0.86);
  backdrop-filter: blur(6px);
}

.masthead__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.masthead__logo { width: 44px; height: 44px; flex: none; }

.masthead__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--white);
  text-transform: uppercase;
  margin: 0;
}

.masthead__meta {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel);
}

/* -------------------------------------------------------------------- shell */

.shell {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 72px;
  align-items: start;
}

/* --------------------------------------------------------------------- hero */

.hero { padding-top: 88px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--teal);
}

.eyebrow::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--teal), transparent);
}

.hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(76px, 12vw, 148px);
  line-height: 0.82;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

.hero__title em {
  display: block;
  font-style: normal;
  color: var(--purple-hi);
}

.hero__lede {
  max-width: 40ch;
  margin: 28px 0 0;
  font-size: 17px;
  color: var(--steel);
}

/* Real information where a logo watermark used to sit. */
.tally {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 52px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.tally__count {
  font-family: var(--display);
  font-weight: 800;
  font-size: 60px;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--teal);
}

.tally__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
  max-width: 14ch;
}

/* --------------------------------------------------------------------- card */

.card {
  margin-top: 88px;
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

/* Jersey trim: the three shield colours, hard stops, across the top edge. */
.card::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--purple) 0 58%,
    var(--teal) 58% 80%,
    var(--steel) 80% 100%
  );
}

.card__body { padding: 34px 34px 38px; }

.card__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 6px;
}

.card__note { margin: 0 0 28px; font-size: 14px; color: var(--steel); }

/* --------------------------------------------------------------------- form */

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field { margin-bottom: 18px; }

.field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-hi);
}

.field input {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--body);
  font-size: 16px;
  color: var(--white);
  background: var(--navy-900);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input::placeholder { color: var(--muted); }

.field input:hover { border-color: #2e4471; }

.field input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(46, 217, 195, 0.18);
}

/* Mouse focus gets the soft glow above; keyboard focus also gets a crisp
   outline, which is the only indicator that survives forced-colours mode.
   Must come after the :focus rule — equal specificity, so order decides. */
.field input:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.field input[aria-invalid='true'] { border-color: var(--danger); }

.field input[aria-invalid='true']:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(255, 128, 135, 0.18);
}

.hint { margin: 7px 0 0; font-size: 13px; color: var(--muted); }

.error {
  margin: 7px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--danger);
  min-height: 0;
}

.error:empty { display: none; }

/* Guardian block only appears once a date of birth says it is needed. */
.guardian {
  margin: 4px 0 22px;
  padding: 22px 22px 6px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius);
  background: rgba(108, 79, 246, 0.06);
}

/* Float the legend so it flows as a normal heading instead of notching the
   fieldset border, while staying a real <legend> for screen readers. */
.guardian__title {
  float: left;
  width: 100%;
  padding: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 4px;
}

.guardian__note { margin: 0 0 20px; font-size: 13px; color: var(--muted); }

/* Both fieldset legends are floated so they do not notch the border, which
   means every sibling after them must clear that float or it gets squeezed
   into whatever width is left. */
.guardian > :not(legend),
.subform > :not(legend) { clear: both; }

/* ------------------------------------------------------------------- button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--purple);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover { background: var(--purple-hi); }
.btn:active { transform: translateY(1px); }

.btn[disabled] { opacity: 0.6; cursor: progress; }

.btn--ghost {
  width: auto;
  padding: 13px 22px;
  font-size: 17px;
  background: transparent;
  border: 1px solid var(--purple);
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}

.btn--ghost:hover { background: rgba(108, 79, 246, 0.16); }

.form__footnote {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

.form__alert {
  margin: 0 0 22px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 128, 135, 0.4);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  background: rgba(255, 128, 135, 0.08);
  color: #ffc0c4;
  font-size: 14px;
}

/* ------------------------------------------------------ signature: the spot */

.roster-spot { padding: 46px 34px 44px; text-align: center; }

.roster-spot__label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--teal);
}

.roster-spot__number {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(128px, 26vw, 200px);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0;
}

.roster-spot__number span {
  font-size: 0.38em;
  vertical-align: 0.58em;
  margin-right: 0.04em;
  color: var(--purple-hi);
}

.roster-spot__surname {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 6vw, 42px);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 10px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.roster-spot__copy {
  max-width: 34ch;
  margin: 22px auto 0;
  font-size: 15px;
  color: var(--steel);
}


/* ------------------------------------------------- extra form controls */

.row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row--single { grid-template-columns: minmax(0, 1fr); }

/* Selects have to be styled from scratch to match the text inputs. */
.field select {
  width: 100%;
  padding: 13px 38px 13px 14px;
  font-family: var(--body);
  font-size: 16px;
  color: var(--white);
  background-color: var(--navy-900);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  appearance: none;
  /* Chevron drawn with gradients so there is no icon file to ship. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--steel) 50%),
    linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field select:hover { border-color: #2e4471; }

.field select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(46, 217, 195, 0.18);
}

.field select:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.field select[aria-invalid='true'] { border-color: var(--danger); }

/* Grouped extra questions inside the sign-on form. */
.subform {
  margin: 6px 0 24px;
  padding: 22px 22px 4px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius);
  background: rgba(46, 217, 195, 0.04);
}

.subform__title {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}

/* Height input with a "cm" that sits inside the field. */
.suffixed { position: relative; }
.suffixed input { padding-right: 42px; }

.suffixed__unit {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}

.form__alert--ok {
  border-color: rgba(46, 217, 195, 0.4);
  border-left-color: var(--teal);
  background: rgba(46, 217, 195, 0.08);
  color: #a9f0e6;
}

.roster-spot__links {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 22px 0 0;
  font-size: 13.5px;
}

/* ------------------------------------------------------------------- footer */

.footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding: 22px 24px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--teal); text-decoration: underline; }

/* ------------------------------------------------------------------ reveals */

.reveal { animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.reveal[style*='--d'] { animation-delay: var(--d); }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.pop { animation: pop 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) both; }

@keyframes pop {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------- nav */

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex: none;
}

.masthead--admin { border-bottom-color: var(--purple); }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 26px;
  flex-wrap: wrap;
}

.nav a {
  padding: 7px 13px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover { color: var(--white); background: rgba(34, 52, 87, 0.7); }

.nav a[aria-current='page'] {
  color: var(--white);
  background: rgba(108, 79, 246, 0.22);
  box-shadow: inset 0 -2px 0 var(--purple-hi);
}

.masthead__meta--actions {
  display: flex;
  align-items: center;
  gap: 16px;
  text-transform: none;
  letter-spacing: 0;
}

.masthead__meta--actions a { font-size: 12.5px; }

.linkbtn {
  padding: 0;
  font-family: var(--body);
  font-size: 12.5px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.linkbtn:hover { color: var(--danger); }

/* ------------------------------------------------------------- page shells */

.shell--wide { grid-template-columns: minmax(0, 1fr); gap: 0; }
.shell--admin { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 1480px; }
.shell--narrow { grid-template-columns: minmax(0, 520px); justify-content: center; gap: 0; }

.page { padding-top: 60px; }

.page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 28px;
}

.page__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(46px, 7vw, 76px);
  line-height: 0.85;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

.page__lede { margin: 10px 0 0; font-size: 14.5px; color: var(--steel); }

.page__actions { margin-left: auto; display: flex; gap: 12px; }

.page__note {
  max-width: 70ch;
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.muted { color: var(--muted); }

/* ------------------------------------------------------- public roster grid */

.players {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.player {
  display: flex;
  align-items: center;
  min-height: 104px;
  gap: 18px;
  padding: 18px 20px;
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius);
}

.player__number { margin: 0; flex: none; min-width: 62px; }

.player__digits {
  font-family: var(--display);
  font-weight: 800;
  font-size: 54px;
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--white);
}

.player__digits--tbc {
  font-size: 19px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.player__who { min-width: 0; }

.player__name {
  margin: 0;
  font-size: 16px;
  color: var(--steel-hi);
  line-height: 1.25;
}

.player__name b { display: block; font-weight: 700; color: var(--white); }

.player__meta {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Position and height each get their own line, so neither can wrap and orphan
   its unit. Height is quieter than position. */
.player__pos { display: block; color: var(--teal); }
.player__ht { display: block; margin-top: 2px; color: var(--muted); }

/* ------------------------------------------------------------------ replays */

.replays {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}

.replay {
  display: flex;
  flex-direction: column;
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.replay__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: none;
  background: var(--navy-700);
  cursor: pointer;
}

/* Absolutely positioned so a 4:3 thumbnail (YouTube's hqdefault fallback)
   cannot stretch the card past 16:9 — it gets cropped instead. */
.replay__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.replay__thumb--noimg img { display: none; }

.replay__thumb--noimg::after {
  content: 'No thumbnail';
  position: absolute;
  inset: auto 0 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A play triangle drawn in CSS rather than pulled from an icon set. */
.replay__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%
;
  background: rgba(11, 22, 40, 0.72);
  border: 2px solid var(--white);
  transition: background 0.15s ease, transform 0.15s ease;
}

.replay__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--white);
}

.replay__thumb:hover .replay__play {
  background: var(--purple);
  transform: translate(-50%, -50%) scale(1.06);
}

.replay__frame { width: 100%; aspect-ratio: 16 / 9; border: none; display: block; }

.replay__body { padding: 18px 20px 20px; }

.replay__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

.replay__meta {
  margin: 7px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.replay__notes { margin: 11px 0 0; font-size: 14px; color: var(--steel); }
.replay__links { margin: 14px 0 0; font-size: 13px; }

/* ----------------------------------------------------------------- schedule */

.games { list-style: none; margin: 24px 0 0; padding: 0; }

.game {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
}

.game.is-past { opacity: 0.72; }

.game.is-next {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal), 0 16px 40px -28px var(--teal);
  opacity: 1;
}

.game__flag {
  position: absolute;
  top: -9px;
  left: 20px;
  margin: 0;
  padding: 2px 9px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-900);
  background: var(--teal);
  border-radius: 2px;
}

.game__date {
  margin: 0;
  text-align: center;
  border-right: 1px solid var(--line);
  padding-right: 18px;
}

.game__weekday,
.game__month {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.game__day {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 34px;
  line-height: 0.95;
  color: var(--white);
}

.game__opponent {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

.game__where { margin: 6px 0 0; font-size: 13px; color: var(--steel); }
.game__notes { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.game__duty {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--steel);
}

/* A duty-only week reads as a commitment, not a fixture: steel, not white. */
.game__opponent--duty { color: var(--steel-hi); }

.game.is-duty { border-left: 3px solid var(--steel); }

.adminrow__duty { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 12.5px; }

.game__right { margin: 0; text-align: right; }

.game__time {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.03em;
  color: var(--steel-hi);
}

.game__score {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.game__score.is-win { color: var(--teal); }
.game__score.is-draw { color: var(--steel-hi); }
.game__score.is-loss { color: var(--danger); }

/* --------------------------------------------------------------------- tags */

.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(108, 79, 246, 0.2);
  color: var(--purple-tag);
}

.tag--home { background: rgba(46, 217, 195, 0.16); color: var(--teal); }
.tag--away { background: rgba(169, 179, 198, 0.16); color: var(--steel-hi); }
.tag--warn { background: rgba(255, 128, 135, 0.16); color: var(--danger); }

/* Duty is a commitment rather than a fixture, so it gets the steel of the
   helmet rather than the purple reserved for us or the teal for results. */
.tag--duty {
  background: rgba(169, 179, 198, 0.18);
  color: var(--steel-hi);
  box-shadow: inset 0 0 0 1px rgba(169, 179, 198, 0.3);
}

/* ----------------------------------------------------------- admin: tables */

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy-800);
  overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

thead th {
  padding: 12px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--steel-hi);
  background: var(--navy-700);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(34, 52, 87, 0.6);
  color: var(--steel-hi);
  white-space: nowrap;
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(22, 41, 74, 0.5); }

td.num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  color: var(--purple-hi);
  width: 1%;
}

td.name { font-weight: 600; color: var(--white); }

/* Editable cells sit inside the table without looking like a form. */
.cell {
  padding: 7px 9px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--white);
  background: var(--navy-900);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cell:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(46, 217, 195, 0.18);
}

.cell:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; }

.cell--num { width: 62px; text-align: center; }
.cell--sel { width: 78px; }
.cell.is-bad { border-color: var(--danger); }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

.switch input { width: 17px; height: 17px; accent-color: var(--purple); cursor: pointer; }

.remove {
  padding: 5px 11px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--steel);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.remove:hover { color: var(--white); border-color: var(--purple); }
.remove[data-remove]:hover { color: var(--danger); border-color: var(--danger); }

/* ------------------------------------------------------------ admin: lists */

.card--form { margin-top: 0; margin-bottom: 30px; }

.form__buttons { display: flex; gap: 12px; }
.form__buttons .btn { width: auto; flex: 1; }
.form__buttons .btn--ghost { flex: none; }

.adminlist { list-style: none; margin: 0; padding: 0; }

.adminrow {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 9px;
}

.adminrow.is-past { opacity: 0.65; }

.adminrow__thumb {
  width: 160px;
  height: 90px;
  flex: none;
  object-fit: cover;
  border-radius: 2px;
  background: var(--navy-700);
}

.adminrow__thumb.is-missing { visibility: hidden; }

.adminrow__date {
  margin: 0;
  flex: none;
  width: 108px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}

.adminrow__body { flex: 1; min-width: 0; }

.adminrow__title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--white);
}

.adminrow__meta {
  margin: 4px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

.adminrow__notes { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.adminrow__actions { display: flex; gap: 8px; flex: none; }

/* -------------------------------------------------------------- empty state */

.empty {
  padding: 60px 24px;
  text-align: center;
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 24px;
}

.empty__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 8px;
}

.empty p { margin: 0; font-size: 14px; color: var(--steel); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 940px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero { padding-top: 52px; }
  .hero__title { font-size: clamp(60px, 17vw, 96px); }
  .card { margin-top: 40px; }
  .card--form { margin-top: 0; }

  /* Nav drops onto its own line once the brand and meta crowd it. */
  .masthead__inner { flex-wrap: wrap; }
  .nav { margin-left: 0; order: 3; width: 100%; padding-top: 4px; }
  .masthead__meta { margin-left: auto; }
}

@media (max-width: 560px) {
  .shell { padding: 0 16px 64px; }

  /* Compact the tally to a single line so it costs a caption's worth of space
     rather than a block, keeping the form near the top of the scroll. */
  .tally { margin-top: 26px; padding-top: 16px; gap: 10px; }
  .tally__count { font-size: 34px; }
  .tally__label { max-width: none; font-size: 11px; }

  .btn { font-size: 18px; letter-spacing: 0.05em; }
  .masthead__inner { padding: 12px 16px; }
  .masthead__meta { display: none; }

  /* Tighten the nav so all four links fit one line on a phone. */
  .nav { gap: 2px; }
  .nav a { padding: 6px 9px; font-size: 11.5px; letter-spacing: 0.06em; }
  .masthead__name { font-size: 22px; }
  .masthead__logo { width: 36px; height: 36px; }
  .card__body { padding: 26px 20px 30px; }
  .row { grid-template-columns: 1fr; gap: 0; }
  .guardian { padding: 20px 16px 4px; }
  .page__actions { margin-left: 0; width: 100%; }
  .btn--ghost { flex: 1; text-align: center; justify-content: center; }
  .row--three { grid-template-columns: 1fr; gap: 0; }
  .subform { padding: 20px 16px 2px; }
  .form__buttons { flex-direction: column; }
  .form__buttons .btn { width: 100%; }

  /* Stack the game row: date strip on top, result below the opponent. */
  .game { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .game__date { padding-right: 12px; }
  .game__day { font-size: 27px; }
  .game__opponent { font-size: 21px; }
  .game__right { grid-column: 2; text-align: left; }

  .adminrow { flex-wrap: wrap; gap: 12px; }
  .adminrow__thumb { width: 116px; height: 66px; }
  .adminrow__date { width: auto; }
  .adminrow__actions { width: 100%; }
  .adminrow__actions .remove { flex: 1; }
}

@media (forced-colors: active) {
  .field input:focus,
  .field input:focus-visible,
  .btn:focus-visible,
  a:focus-visible,
  .remove:focus-visible,
  .field select:focus-visible,
  .cell:focus-visible,
  .replay__thumb:focus-visible,
  .linkbtn:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
  .card::before { background: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}