/* =============================================================================
   Wi Padel Sherwood Pairs League
   Visual direction: "floodlit night court", built on the Wi Padel logo palette -
   its deep navy as the court, the azure as structure and links, the orange
   swoosh for losses and warnings, and the lime ball as the single loud accent.
   Dark by design: this gets opened on a phone at the club.
   ========================================================================== */

:root {
  /* surfaces */
  --ink:        #04061C;
  --court:      #070A26;
  --card:       #0B1033;
  --card-hi:    #141C4E;
  --card-sunk:  #070A24;

  /* brand */
  --brand-navy: #000B7A;   /* Wi Padel wordmark */

  /* court lines + edges */
  --line:       rgba(61, 148, 255, 0.16);
  --line-soft:  rgba(237, 242, 250, 0.07);
  --line-hard:  rgba(237, 242, 250, 0.16);

  /* accents */
  --lime:       #78F700;
  --lime-deep:  #59C400;
  --lime-glow:  rgba(120, 247, 0, 0.22);
  --orange:       #FF7800;
  --orange-soft:  rgba(255, 120, 0, 0.14);
  --azure:        #3D94FF;

  /* type */
  --text:       #EDF2FA;
  --text-dim:   #B3C0DC;
  --muted:      #7C89B0;

  --win:        #78F700;
  --loss:       #FF7800;

  --radius:     14px;
  --radius-sm:  9px;
  --gutter:     16px;

  --shadow-lift: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  --shadow-glow: 0 0 0 1px var(--lime-glow), 0 12px 34px -14px rgba(120, 247, 0, 0.26);

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Hanken Grotesk', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

/* Floodlights: two soft pools of light from above, plus a fine grain layer so
   the large dark areas are not flat. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 72% 48% at 16% -10%, rgba(61, 148, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 58% 40% at 86% -6%, rgba(120, 247, 0, 0.07), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 108%, rgba(0, 11, 122, 0.55), transparent 72%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

#app { position: relative; z-index: 1; }

a { color: var(--lime); text-decoration-color: rgba(120, 247, 0, 0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--lime); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

.masthead {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(7, 10, 38, 0.9), rgba(4, 6, 28, 0.55));
  overflow: hidden;
}

/* Court markings, drawn in CSS: tramlines + the service line. */
.masthead::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 300%;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, transparent 0 calc(50% - 1px), var(--line-soft) calc(50% - 1px) 50%, transparent 50%),
    linear-gradient(0deg, transparent 0 calc(38% - 1px), var(--line-soft) calc(38% - 1px) 38%, transparent 38%);
  transform: rotate(-1.2deg);
}

.masthead__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 26px var(--gutter) 20px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* The club logo is artwork for light backgrounds - navy figure, navy wordmark -
   so it gets its own plate rather than being recoloured. */
.brand__plate {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: 13px;
  background: linear-gradient(170deg, #FFFFFF, var(--text));
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(61, 148, 255, 0.22);
  transition: transform 0.18s, box-shadow 0.18s;
}

.brand:hover .brand__plate {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(120, 247, 0, 0.35);
}

.brand__plate img {
  display: block;
  height: 62px;
  width: auto;
}

.brand__text { display: flex; flex-direction: column; min-width: 0; }

.brand__club {
  font-family: var(--font-display);
  font-size: clamp(27px, 5.4vw, 46px);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  background: linear-gradient(168deg, #EDF2FA 8%, #9CC6FF 52%, var(--azure) 112%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__league {
  font-family: var(--font-display);
  font-size: clamp(12px, 2.2vw, 17px);
  text-transform: uppercase;
  color: var(--lime);
  letter-spacing: 0.13em;
  margin-top: 3px;
}

/* League picker. Inputs are full width by default, which is wrong for a
   control sitting inline in the masthead. */
#league-switch {
  width: auto;
  min-width: 170px;
  max-width: 260px;
  padding: 7px 32px 7px 11px;
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: var(--card);
  border-color: var(--line);
}

.masthead__meta {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-bottom: 4px;
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(4, 6, 28, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__inner::-webkit-scrollbar { display: none; }

.nav button {
  flex: 0 0 auto;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 15px 15px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.16s, border-color 0.16s;
}
.nav button:hover { color: var(--text-dim); }
.nav button[aria-current='true'] {
  color: var(--azure);
  border-bottom-color: var(--azure);
}

/* ------------------------------------------------------------------- shared */

main { padding: 26px 0 72px; }

.view { animation: rise 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

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

@media (prefers-reduced-motion: reduce) {
  .view, .card, .stagger > * { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

.stagger > * { animation: rise 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.stagger > *:nth-child(1) { animation-delay: 0.02s; }
.stagger > *:nth-child(2) { animation-delay: 0.06s; }
.stagger > *:nth-child(3) { animation-delay: 0.10s; }
.stagger > *:nth-child(4) { animation-delay: 0.14s; }
.stagger > *:nth-child(5) { animation-delay: 0.18s; }
.stagger > *:nth-child(6) { animation-delay: 0.22s; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.section-head h2 { font-size: clamp(21px, 4vw, 30px); }

.section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  max-width: 58ch;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--lime-deep);
  margin: 0 0 6px;
}

.card {
  background: linear-gradient(180deg, var(--card), var(--card-sunk));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

.card--pad { padding: 18px; }

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

/* --------------------------------------------------------------- buttons */

.btn {
  appearance: none;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 17px;
  border-radius: 999px;
  border: 1px solid var(--line-hard);
  background: var(--card-hi);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.14s, background 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--lime-glow); }
.btn:active { transform: none; }

.btn--primary {
  background: var(--lime);
  border-color: var(--lime);
  color: #04061C;
  font-weight: 400;
}
.btn--primary:hover { box-shadow: var(--shadow-glow); background: #8DFF2E; }

.btn--ghost { background: transparent; }

.btn--danger { color: var(--orange); border-color: rgba(255, 120, 0, 0.4); }
.btn--danger:hover { background: var(--orange-soft); border-color: var(--orange); }

.btn--sm { padding: 8px 13px; font-size: 11.5px; }

.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- notices */

.notice {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  border: 1px solid var(--line-hard);
  background: var(--card);
  margin-bottom: 16px;
}
.notice strong { color: var(--text); }
.notice--warn { border-color: rgba(255, 120, 0, 0.42); background: var(--orange-soft); }
.notice--ok { border-color: var(--lime-glow); background: rgba(120, 247, 0, 0.08); }
.notice--err { border-color: rgba(255, 120, 0, 0.6); background: rgba(255, 120, 0, 0.12); }
.notice--err p, .notice--ok p { margin: 4px 0 0; }

/* ------------------------------------------------------------ stat strip */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.stat {
  background: linear-gradient(180deg, var(--card), var(--card-sunk));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  position: relative;
  overflow: hidden;
}

.stat::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--lime);
  opacity: 0.55;
}

.stat__k {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.stat__v {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__v small {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 3px;
}

.stat--orange::after { background: var(--orange); }

/* progress bar */

.progress {
  height: 5px;
  border-radius: 99px;
  background: var(--card-sunk);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  margin-top: 9px;
}
.progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--lime-deep), var(--lime));
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* -------------------------------------------------------- division switch */

.divisions {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-sunk);
  margin-bottom: 20px;
}

.divisions button {
  appearance: none;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.divisions button[aria-current='true'] { background: var(--lime); color: #04061C; }
.divisions button:not([aria-current='true']):hover { color: var(--text); }

/* ------------------------------------------------------------------ tables */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--card-sunk));
  box-shadow: var(--shadow-lift);
}

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

thead th {
  text-align: right;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line-hard);
  white-space: nowrap;
  background: var(--card-sunk);
  position: sticky;
  top: 0;
}
thead th:first-child, thead th.l { text-align: left; }

tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
tbody td.l { text-align: left; white-space: normal; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(120, 247, 0, 0.035); }

.rank {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--muted);
  width: 1%;
}

tr.is-leader .rank { color: var(--lime); }
tr.is-leader td.l .team-name { color: var(--lime); }
tr.is-me td { background: rgba(61, 148, 255, 0.07); }
tr.is-me td:first-child { box-shadow: inset 2px 0 0 var(--azure); }

.team-name { font-weight: 600; letter-spacing: -0.005em; }
.team-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

td.pts {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--lime);
}

.chip {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-hard);
  color: var(--muted);
  vertical-align: middle;
}
.chip--lime { border-color: var(--lime-glow); color: var(--lime); background: rgba(120, 247, 0, 0.08); }
.chip--orange { border-color: rgba(255, 120, 0, 0.4); color: var(--orange); background: var(--orange-soft); }
.chip--azure { border-color: rgba(61, 148, 255, 0.4); color: var(--azure); background: rgba(61, 148, 255, 0.1); }
.chip--me { border-color: var(--azure); color: var(--azure); }

/* ------------------------------------------------------------ my team view */

.pick {
  display: grid;
  gap: 10px;
  max-width: 440px;
}

.myteam-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--lime-glow);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(120, 247, 0, 0.1), transparent 60%),
    linear-gradient(180deg, var(--card-hi), var(--card-sunk));
  box-shadow: var(--shadow-lift);
  margin-bottom: 20px;
}

.myteam-head h2 { font-size: clamp(24px, 5vw, 36px); }
.myteam-head .team-sub { font-size: 13px; }

.myteam-rank {
  text-align: right;
  flex: 0 0 auto;
}
.myteam-rank b {
  display: block;
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 0.9;
  color: var(--lime);
}

/* fixture cards */

.fixtures { display: grid; gap: 9px; }

.fx {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--card), var(--card-sunk));
  transition: border-color 0.16s, transform 0.16s;
}
.fx:hover { border-color: var(--lime-glow); transform: translateX(2px); }

/* Tall cards (the ones with contact details) align to the top instead. */
.fx:has(.contacts) { align-items: start; }
.fx:has(.contacts) .fx__no { padding-top: 2px; }
.fx:has(.contacts) .fx__right { align-self: start; }

.fx--done { opacity: 0.86; }
.fx--done:hover { transform: none; }

.fx__no {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--muted);
  text-align: center;
}

.fx__who { min-width: 0; }

.fx__opp {
  font-weight: 600;
  font-size: 15.5px;
  display: block;
}

.fx__note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.fx__right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }

.fx__score {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.fx__badge {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
}
.fx--won .fx__badge { background: rgba(120, 247, 0, 0.14); color: var(--lime); }
.fx--lost .fx__badge { background: var(--orange-soft); color: var(--orange); }

.fx--won { border-left: 2px solid var(--lime); }
.fx--lost { border-left: 2px solid rgba(255, 120, 0, 0.7); }
.fx--todo { border-left: 2px solid var(--line-hard); }

.split-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 26px 0 12px;
}
.split-head h3 { font-size: 15px; letter-spacing: 0.1em; color: var(--text-dim); }
.split-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

/* ------------------------------------------------------------- cross grid */

.grid-wrap { overflow-x: auto; }

/* Not width:100% like other tables: a full width grid stretches the empty
   corner cell and shoves the whole thing to the right edge. */
table.grid { font-size: 12px; width: auto; }

table.grid th {
  position: static;
  background: transparent;
  border: 0;
  padding: 6px 4px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

table.grid thead th { text-align: center; vertical-align: bottom; height: 108px; }

/* The empty corner is pinned too, so column names scrolling past do not appear
   in the strip above the pinned pair names. */
table.grid thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--card);
}

table.grid thead th span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  max-height: 100px;
  overflow: hidden;
}

table.grid tbody th {
  text-align: right;
  white-space: nowrap;
  padding-right: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Pinned while the grid scrolls sideways. Without this you scroll to your
     later opponents on a phone and lose track of which row you are reading.
     The background must be solid, or the cells show through underneath. */
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card);
  box-shadow: 1px 0 0 var(--line-soft);
}

table.grid td {
  border: 1px solid var(--line-soft);
  text-align: center;
  padding: 0;
  height: 34px;
  width: 42px;
  min-width: 42px;
}

.cell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: -0.04em;
}
.cell--self { background: var(--card-sunk); color: var(--muted); }
/* A fixture that exists but has not been played: a visible marker, so the grid
   shows its shape from day one rather than looking empty until the first result. */
.cell--todo { color: var(--muted); background: rgba(61, 148, 255, 0.05); }
.cell--todo::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 99px;
  background: rgba(61, 148, 255, 0.45);
}

/* No fixture at all between these two pairs: genuinely blank. */
.cell--none { background: transparent; }

.legend i.legend-todo { background: rgba(61, 148, 255, 0.45); }
.legend i.legend-none { background: transparent; box-shadow: inset 0 0 0 1px var(--line-hard); }
.cell--won { background: rgba(120, 247, 0, 0.13); color: var(--lime); }
.cell--lost { background: rgba(255, 120, 0, 0.12); color: var(--orange); }
/* "Your pair" cannot be azure any more: the unplayed markers are azure, so the
   highlight disappeared into them. Off-white is used by nothing else here, and
   reads against both the navy grid and the lime/orange results. */
.cell--mine {
  outline: 1px solid rgba(237, 242, 250, 0.42);
  outline-offset: -1px;
  background: rgba(237, 242, 250, 0.09);
}

/* The band is easier to find if its row and column names are marked too. */
table.grid tbody th.is-me,
table.grid thead th.is-me {
  color: var(--text);
  font-weight: 700;
}
table.grid tbody th.is-me { box-shadow: 1px 0 0 var(--line-soft), inset 3px 0 0 var(--text); }
table.grid thead th.is-me span { text-decoration: underline; text-underline-offset: 3px; }

.legend i.legend-mine {
  background: rgba(237, 242, 250, 0.09);
  box-shadow: inset 0 0 0 1px rgba(237, 242, 250, 0.55);
}

/* Home and away: both meetings share one box, split down the middle. */
.cell--multi { display: flex; gap: 2px; padding: 2px; }
.cell--multi i {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 9.5px;
  border-radius: 2px;
}
.cell--multi i.cell--won { background: rgba(120, 247, 0, 0.16); color: var(--lime); }
.cell--multi i.cell--lost { background: rgba(255, 120, 0, 0.15); color: var(--orange); }
/* Each half needs to read as its own fixture at this size, so it keeps a
   visible fill and its own dot rather than fading into the cell. */
.cell--multi i.cell--todo {
  background: rgba(61, 148, 255, 0.13);
  box-shadow: inset 0 0 0 1px rgba(61, 148, 255, 0.28);
}
.cell--multi i.cell--todo::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 99px;
  background: rgba(61, 148, 255, 0.75);
}
.cell--multi i { position: relative; }


.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.legend i {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}

/* ------------------------------------------------------------------ teams */

.team-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 11px;
}

.team-card {
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--card), var(--card-sunk));
  position: relative;
}
.team-card--mine { border-color: rgba(61, 148, 255, 0.45); }

.team-card h3 { font-family: var(--font-body); font-weight: 600; font-size: 16px; text-transform: none; letter-spacing: -0.01em; }

.team-card__seed {
  position: absolute;
  top: 13px; right: 14px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--muted);
}

.contacts { display: grid; gap: 6px; margin-top: 11px; }

.contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--card-sunk);
  border: 1px solid var(--line-soft);
}
.contact a { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.contact > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact > span:last-child { flex: 0 0 auto; text-align: right; }
.contact--empty { color: var(--muted); font-style: italic; font-size: 12.5px; }

/* ------------------------------------------------------------------- forms */

form.stack { display: grid; gap: 14px; }

.field { display: grid; gap: 5px; }

.field > label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-display);
}

.field__hint { font-size: 12.5px; color: var(--muted); }

input, select, textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: var(--card-sunk);
  border: 1px solid var(--line-hard);
  border-radius: 9px;
  padding: 10px 12px;
  width: 100%;
  transition: border-color 0.16s, box-shadow 0.16s;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 0;
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(120, 247, 0, 0.15);
}
input::placeholder { color: var(--muted); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237C89B0' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

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

.setline {
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  align-items: center;
  gap: 8px;
  max-width: 230px;
}
.setline span { text-align: center; color: var(--muted); font-family: var(--font-mono); }

.score-grid { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 15px;
  border-radius: var(--radius-sm);
  background: var(--card-sunk);
  border: 1px solid var(--line-soft);
  margin-bottom: 4px;
}
.sides b { font-size: 15px; font-weight: 600; }
.sides small { display: block; color: var(--muted); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.sides .vs { font-family: var(--font-display); color: var(--muted); font-size: 13px; }
.sides > div:last-child { text-align: right; }

.inline-form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ------------------------------------------------------------------- rules */

.prose { max-width: 70ch; }
.prose h3 { font-size: 16px; letter-spacing: 0.08em; margin: 26px 0 8px; color: var(--lime); }
.prose p, .prose li { color: var(--text-dim); font-size: 14.5px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--lime-deep); }
.prose strong { color: var(--text); }

.points-table { margin-top: 12px; }
.points-table td.l b { color: var(--text); }

.steps { counter-reset: s; display: grid; gap: 11px; margin-top: 4px; }
.step {
  counter-increment: s;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 13px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--card), var(--card-sunk));
}
.step::before {
  content: counter(s);
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--lime);
  line-height: 1.2;
}
.step h4 { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: -0.01em; font-size: 15.5px; margin-bottom: 2px; }
.step p { margin: 0; font-size: 13.5px; color: var(--muted); }

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

.foot {
  border-top: 1px solid var(--line);
  padding: 22px var(--gutter) 34px;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  gap: 10px 20px;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------- misc */

.empty {
  text-align: center;
  padding: 46px 20px;
  border: 1px dashed var(--line-hard);
  border-radius: var(--radius);
  color: var(--muted);
}
.empty h3 { font-size: 17px; color: var(--text-dim); margin-bottom: 7px; }
.empty p { margin: 0 auto; max-width: 44ch; font-size: 13.5px; }

.loader { text-align: center; padding: 70px 20px; color: var(--muted); }

.loader__ball {
  width: 16px; height: 16px;
  border-radius: 99px;
  background: var(--lime);
  margin: 0 auto 16px;
  animation: bounce 0.9s ease-in-out infinite;
  box-shadow: 0 0 18px var(--lime-glow);
}
@keyframes bounce {
  0%, 100% { transform: translateY(-9px); }
  50% { transform: translateY(9px) scaleX(1.12) scaleY(0.88); }
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 10px; top: -60px;
  z-index: 100;
  background: var(--lime); color: #04061C;
  padding: 10px 16px; border-radius: 0 0 10px 10px;
  font-family: var(--font-display); letter-spacing: 0.08em; text-transform: uppercase;
  transition: top 0.18s;
}
.skip:focus { top: 0; }

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

@media (max-width: 720px) {
  body { font-size: 15px; }
  table.grid tbody th { max-width: 104px; font-size: 11.5px; padding-right: 7px; }
  table.grid thead th { height: 92px; }
  table.grid td { width: 36px; min-width: 36px; }
  .masthead__inner { align-items: flex-start; flex-direction: column; gap: 10px; padding: 20px var(--gutter) 16px; }
  .brand { gap: 11px; }
  .brand__plate { padding: 7px 10px; border-radius: 10px; }
  .brand__plate img { height: 42px; }
  .myteam-head { padding: 16px; }
  .myteam-rank { text-align: left; }
  .fx { grid-template-columns: 34px 1fr; gap: 10px; padding: 12px; }
  .fx__right { grid-column: 1 / -1; justify-content: flex-start; padding-left: 44px; }
  .stat__v { font-size: 23px; }
  thead th, tbody td { padding: 10px 8px; }
  .hide-sm { display: none; }
  .sides { grid-template-columns: 1fr; text-align: left; }
  .sides > div:last-child { text-align: left; }
  .sides .vs { display: none; }
}

@media (min-width: 721px) {
  .only-sm { display: none; }
}