/* Finspan Scorer
   Two materials, borrowed from the game itself.

   PAPER - the rulebook and the fish cards are warm off-white with dark teal
   ink and turquoise headings. All the reading and typing happens here.

   WATER - the ocean mat is the one saturated object in the box: mangrove
   green at the top, through turquoise and blue, to near-black at the bottom.
   It appears only where depth is the actual subject, which is the masthead
   and the results chart.

   The accents are token colours and each means one thing: coral is the school
   token and marks a winner or a record, egg orange marks a game still running,
   turquoise is for anything you can press. */

:root {
  --paper:      #f7f4ec;
  --paper-sunk: #efeae0;
  --card:       #ffffff;
  --ink:        #10323f;
  --ink-soft:   #4a6b78;
  --ink-faint:  #8ba3ac;

  --estuary:  #3e8e6e;
  --reef:     #12909e;
  --reef-dim: #0f7d8a;
  --twilight: #1c5e8c;
  --midnight: #0e2739;
  --abyss:    #071824;

  --school: #d8403a;
  --egg:    #e79a2c;

  --rule:        #ddd6c8;
  --rule-strong: #c6bcaa;

  /* The full descent, top of the mat to the bottom. Used once, on the
     results chart, where depth is the actual subject. */
  --ocean: linear-gradient(180deg,
    #4a9b78 0%,
    #17a3ad 22%,
    #1a7ba4 48%,
    #1a4f78 72%,
    #0e2739 100%);

  /* Only the sunlit shallows, for the masthead, so the full dive stays
     reserved for the results. */
  --ocean-shallow: linear-gradient(160deg,
    #4a9b78 0%,
    #17a3ad 55%,
    #1a7ba4 100%);

  --display: "Outfit", "Avenir Next", system-ui, sans-serif;
  --body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --radius: 12px;
  --gutter: 1.25rem;
  --shadow: 0 1px 2px rgba(16, 50, 63, .06), 0 6px 20px rgba(16, 50, 63, .06);
  --shadow-lift: 0 2px 4px rgba(16, 50, 63, .08), 0 12px 32px rgba(16, 50, 63, .1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

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

/* --- type ---------------------------------------------------------------- */

h1, h2, h3 { margin: 0; font-weight: 600; }

.eyebrow {
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--reef-dim);
}

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

/* --- masthead ------------------------------------------------------------ */

/* A slice of the ocean mat, full bleed, with the wordmark sitting in the
   sunlit shallows where the mat's own title sits. */
.masthead {
  background: var(--ocean-shallow);
  margin-bottom: 2rem;
}

.masthead-inner {
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  padding: 1.5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  text-decoration: none;
  color: inherit;
}

.brand-name {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #fff;
}

.brand-sub {
  font-family: var(--display);
  font-size: .688rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

.masthead-nav { display: flex; gap: .5rem; align-items: center; }

/* Buttons sitting on the water need their own treatment. */
.masthead .btn {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.masthead .btn:hover {
  background: rgba(255, 255, 255, .95);
  border-color: #fff;
  color: var(--midnight);
}

.masthead .btn-quiet {
  border-color: transparent;
  background: transparent;
  color: rgba(255, 255, 255, .85);
}

.masthead .btn-quiet:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.masthead .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Base or Sharks & Reefs. Its own row under the wordmark so it never
   crowds the buttons on a phone. */
.masthead-edition { flex-basis: 100%; }

.edition-switch {
  display: inline-flex;
  max-width: 100%;
  padding: 3px;
  border-radius: 999px;
  background: rgba(7, 24, 36, .22);
}

.edition-switch button {
  border: 0;
  border-radius: 999px;
  padding: .375rem .875rem;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  font-family: var(--body);
  font-size: .813rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.edition-switch button:hover { color: #fff; background: rgba(255, 255, 255, .14); }

.edition-switch button[aria-pressed="true"] {
  background: #fff;
  color: var(--midnight);
  box-shadow: 0 1px 4px rgba(7, 24, 36, .2);
}

.edition-switch button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Expansion pages carry this above their title. */
.edition-badge {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .125rem .625rem;
  border-radius: 999px;
  background: var(--twilight);
  color: #fff;
  font-family: var(--display);
  font-size: .688rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* A note on the dashboard about a game running in the other edition. */
.other-edition {
  font-size: .875rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

.other-edition a { color: var(--reef-dim); font-weight: 500; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1.125rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--body);
  font-size: .938rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn:hover { border-color: var(--reef); color: var(--reef-dim); }

.btn:focus-visible { outline: 2px solid var(--reef); outline-offset: 2px; }

.btn-primary {
  background: var(--reef);
  border-color: var(--reef);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(18, 144, 158, .28);
}

.btn-primary:hover {
  background: var(--reef-dim);
  border-color: var(--reef-dim);
  color: #fff;
  box-shadow: 0 4px 14px rgba(18, 144, 158, .34);
}

.btn-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ink-soft);
  padding-inline: .75rem;
}

.btn-quiet:hover { border-color: transparent; background: var(--paper-sunk); color: var(--ink); }

.btn-danger:hover { border-color: var(--school); background: transparent; color: var(--school); }

.btn-sm { min-height: 36px; padding: .25rem .875rem; font-size: .875rem; }

.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { border-color: var(--rule-strong); color: var(--ink); }

/* --- panels -------------------------------------------------------------- */

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.section { margin-bottom: 2.5rem; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .875rem;
  flex-wrap: wrap;
}

.empty {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .5);
}

.empty p { margin: 0 0 1rem; max-width: 34rem; margin-inline: auto; }

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

/* Eggs are where everything in this game starts, so their orange marks the
   game that has been started but not finished. */
.resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--egg);
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem;
  box-shadow: var(--shadow);
}

.resume-meta { display: flex; align-items: center; gap: .625rem; margin-bottom: .25rem; }

.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--egg);
  animation: pulse 2.4s ease-out infinite;
  flex: none;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(231, 154, 44, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(231, 154, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(231, 154, 44, 0); }
}

.resume-players { color: var(--ink-soft); font-size: .938rem; }

/* --- game list ----------------------------------------------------------- */

.games { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.game-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .875rem 1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: box-shadow .15s ease, border-color .15s ease;
}

.game-row:hover { border-color: var(--rule-strong); box-shadow: var(--shadow); }

.game-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
}

.game-link:focus-visible { outline: 2px solid var(--reef); outline-offset: 4px; }

.game-date {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--ink-faint);
  width: 5.5rem;
  flex: none;
  letter-spacing: .02em;
}

.game-scores { display: flex; flex-wrap: wrap; gap: .375rem .875rem; min-width: 0; }

.score-chip { font-size: .938rem; color: var(--ink-soft); white-space: nowrap; }
.score-chip .num { color: var(--ink); margin-left: .375rem; }
.score-chip.is-winner { color: var(--ink); font-weight: 700; }
.score-chip.is-winner .num { color: var(--school); }

/* --- score sheet --------------------------------------------------------- */

.sheet {
  --cols: 1;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0 1.25rem 1.25rem;
  box-shadow: var(--shadow);
}

.sheet-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card);
  padding: 1rem 0 .75rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: .25rem;
}

.sheet-head, .sheet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(var(--cols), minmax(4.25rem, 5.75rem));
  gap: .5rem;
  align-items: center;
}

.sheet-row { padding: .25rem 0; border-bottom: 1px solid var(--rule); }
.sheet-row:last-child { border-bottom: none; }

.sheet-corner {
  font-family: var(--display);
  font-size: .688rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.sheet-col { text-align: center; min-width: 0; }

.sheet-col-name {
  font-weight: 700;
  font-size: .938rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-col-total {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--reef-dim);
  line-height: 1.15;
}

.sheet-group {
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--reef-dim);
  padding: 1.5rem 0 .5rem;
}

.sheet-label {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .938rem;
  color: var(--ink);
  min-width: 0;
}

.sheet-mult {
  font-family: var(--mono);
  font-size: .75rem;
  color: #fff;
  background: var(--school);
  border-radius: 999px;
  padding: .0625rem .375rem;
  flex: none;
}

/* The full-reef bonus, shown where the multiplier sits on other rows. */
.sheet-bonus {
  font-family: var(--mono);
  font-size: .75rem;
  color: #fff;
  background: var(--twilight);
  border-radius: 999px;
  padding: .0625rem .375rem;
  flex: none;
  white-space: nowrap;
}

.sheet-derived {
  display: block;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--school);
  text-align: center;
  margin-top: .125rem;
  min-height: 1rem;
}

.cell input {
  width: 100%;
  min-height: 44px;
  padding: .375rem .5rem;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  -moz-appearance: textfield;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.cell input::-webkit-outer-spin-button,
.cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cell input:hover { border-color: var(--rule-strong); }

.cell input:focus {
  outline: none;
  background: var(--card);
  border-color: var(--reef);
  box-shadow: 0 0 0 3px rgba(18, 144, 158, .16);
}

.cell input::placeholder { color: var(--ink-faint); }

/* Player tabs, mobile only. */
.tabs { display: none; gap: .5rem; margin-bottom: 1rem; overflow-x: auto; padding-bottom: .25rem; }

.tab {
  flex: none;
  min-height: 44px;
  padding: .5rem .875rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: .938rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.tab .num { color: var(--ink); }
.tab[aria-selected="true"] { border-color: var(--reef); background: var(--reef); color: #fff; }
.tab[aria-selected="true"] .num { color: #fff; }
.tab:focus-visible { outline: 2px solid var(--reef); outline-offset: 2px; }

/* --- tiebreak ------------------------------------------------------------ */

.tiebreak {
  margin-top: 1.5rem;
  border: 1px solid rgba(216, 64, 58, .3);
  border-left: 4px solid var(--school);
  border-radius: var(--radius);
  background: rgba(216, 64, 58, .05);
  padding: 1rem 1.25rem 1.25rem;
}

.tiebreak .eyebrow { color: var(--school); }

.tiebreak-note { color: var(--ink-soft); font-size: .875rem; margin: .375rem 0 1rem; max-width: 38rem; }

.tiebreak .sheet-row { border-bottom: none; }

/* --- the ocean window, the signature ------------------------------------- */

/* The one saturated thing on the page, the way the mat is the one saturated
   thing in the box. Scores are drawn as dive depth, because depth is what the
   game is about: the line that reaches deepest wins. */
.depths {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  height: 340px;
  /* The bottom padding holds the score and the "deepest" badge once a line
     reaches full depth, so it has to clear both. */
  padding: 1.75rem 1.25rem 4.75rem;
  background: var(--ocean);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

/* Depth ruling, like the markings on a dive gauge. */
.depths::before {
  content: "";
  position: absolute;
  inset: 3.5rem 0 4.75rem;
  background-image: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, .18) 0 1px, transparent 1px 25%);
  pointer-events: none;
}

.depth {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.depth-name {
  font-size: .875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-bottom: .75rem;
  text-shadow: 0 1px 3px rgba(7, 24, 36, .4);
}

.depth.is-winner .depth-name { color: #fff; }

.depth-track { position: relative; flex: 1; width: 100%; }

.depth-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .9));
  transition: height .85s cubic-bezier(.22, .61, .36, 1);
}

.depth.is-winner .depth-line {
  width: 3px;
  background: linear-gradient(180deg, rgba(255, 168, 164, .5), var(--school));
}

.depth-bulb {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.depth.is-winner .depth-bulb {
  background: var(--school);
  box-shadow: 0 0 0 4px rgba(216, 64, 58, .3), 0 0 16px rgba(216, 64, 58, .5);
}

.depth-value {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 10px);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  color: #fff;
  transition: top .85s cubic-bezier(.22, .61, .36, 1);
  top: 0;
  text-align: center;
  text-shadow: 0 1px 4px rgba(7, 24, 36, .5);
}

.depth.is-winner .depth-value { color: #fff; font-weight: 700; }

.depth-crown {
  display: block;
  font-family: var(--display);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--school);
  border-radius: 999px;
  padding: .0625rem .5rem;
  margin-top: .3125rem;
  text-shadow: none;
}

/* --- breakdown table ----------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.breakdown { width: 100%; border-collapse: collapse; min-width: 22rem; }

.breakdown th, .breakdown td {
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--rule);
  text-align: right;
}

.breakdown th:first-child, .breakdown td:first-child { text-align: left; }

.breakdown thead th {
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
  padding-top: 1rem;
}

.breakdown thead th.is-winner { color: var(--school); }

.breakdown tbody th {
  font-weight: 400;
  font-size: .938rem;
  color: var(--ink-soft);
}

.breakdown td { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .938rem; }

.breakdown .row-group td {
  font-family: var(--display);
  font-size: .688rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--reef-dim);
  padding-top: 1.25rem;
  border-bottom: none;
  text-align: left;
}

.breakdown .row-total td {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  border-top: 2px solid var(--ink);
  border-bottom: none;
  padding-block: .875rem;
  background: var(--paper);
}

.breakdown .row-total td:first-child {
  font-family: var(--display);
  font-size: .688rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.breakdown .row-total td.is-winner { color: var(--school); }

/* --- records ------------------------------------------------------------- */

.record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.record-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem 1.25rem;
  box-shadow: var(--shadow);
}

.record-card h3 {
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--reef-dim);
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
}

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

.record-item {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  padding: .4375rem 0;
  font-size: .938rem;
}

.record-rank {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--ink-faint);
  width: 1.25rem;
  flex: none;
}

.record-item.rank-1 .record-rank { color: var(--school); font-weight: 500; }

.record-name {
  flex: 1;
  min-width: 0;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.record-item.rank-1 .record-name { color: var(--ink); font-weight: 700; }

.record-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  flex: none;
}

.record-item.rank-1 .record-value { color: var(--school); font-weight: 500; }

.record-detail { font-family: var(--mono); font-size: .75rem; color: var(--ink-faint); flex: none; }

/* --- setup --------------------------------------------------------------- */

.count-picker { display: flex; gap: .5rem; flex-wrap: wrap; }

.count-btn {
  width: 54px;
  height: 54px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.125rem;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.count-btn:hover { border-color: var(--reef); }

.count-btn[aria-pressed="true"] {
  border-color: var(--reef);
  background: var(--reef);
  color: #fff;
  box-shadow: 0 2px 8px rgba(18, 144, 158, .28);
}

.count-btn:focus-visible { outline: 2px solid var(--reef); outline-offset: 2px; }

.seats { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }

.seat { display: flex; align-items: center; gap: .75rem; }

.seat-index {
  font-family: var(--mono);
  font-size: .813rem;
  color: var(--ink-faint);
  width: 1.5rem;
  flex: none;
}

.seat input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: .5rem .875rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
}

.seat input:focus { outline: none; border-color: var(--reef); box-shadow: 0 0 0 3px rgba(18, 144, 158, .16); }
.seat input.is-invalid { border-color: var(--school); }

.roster { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

.roster-chip {
  min-height: 36px;
  padding: .25rem .875rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: .875rem;
  cursor: pointer;
}

.roster-chip:hover { border-color: var(--reef); background: var(--card); color: var(--reef-dim); }
.roster-chip:focus-visible { outline: 2px solid var(--reef); outline-offset: 2px; }

.form-error { color: var(--school); font-size: .875rem; margin-top: .75rem; min-height: 1.25rem; }

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

.crumb {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .938rem;
  margin-bottom: .75rem;
}

.crumb:hover { color: var(--reef-dim); }

.page-head { margin-bottom: 1.75rem; }

.page-title {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.15;
}

.page-meta { color: var(--ink-faint); font-size: .875rem; font-family: var(--mono); margin-top: .375rem; }

.verdict { font-size: 1.125rem; margin: 1.5rem 0 0; color: var(--ink-soft); }

.verdict strong { color: var(--school); font-weight: 700; }

.actions { display: flex; gap: .625rem; flex-wrap: wrap; margin-top: 1.75rem; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(1rem);
  background: var(--midnight);
  border-radius: 999px;
  padding: .75rem 1.375rem;
  font-size: .938rem;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
  max-width: calc(100vw - 2rem);
  box-shadow: var(--shadow-lift);
}

.toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-error { background: var(--school); }

.warn-bar {
  background: rgba(231, 154, 44, .12);
  border: 1px solid rgba(231, 154, 44, .45);
  border-radius: var(--radius);
  padding: .875rem 1.125rem;
  font-size: .875rem;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

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

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

@media (max-width: 719px) {
  :root { --gutter: 1rem; }

  .tabs { display: flex; }

  /* One player at a time. A five-wide grid is unusable on a phone. */
  .sheet-head, .sheet-row { grid-template-columns: minmax(0, 1fr) minmax(5rem, 6.5rem); }
  .sheet-col[data-col]:not(.is-active), .cell[data-col]:not(.is-active) { display: none; }

  .page-title { font-size: 1.625rem; }
  .brand-name { font-size: 1.25rem; letter-spacing: .24em; }
  .depths { height: 290px; padding-left: .625rem; padding-right: .625rem; }
  .game-date { width: 100%; }
  .game-link { flex-wrap: wrap; gap: .25rem; }
  .sheet { padding-inline: 1rem; }
}

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