/* Fall Ball Tigers - Walk-On Music */

:root {
  --jersey-red: #c8102e;
  --jersey-red-hot: #e8203c;
  --jersey-red-deep: #8f0a20;
  --ink: #101114;
  --ink-2: #1a1c21;
  --ink-3: #24272e;
  --line: #34383f;
  --text: #f2f3f5;
  --muted: #a2a8b3;
  --gold: #e8a838;
  --green: #2fbf71;
  --radius: 14px;
  --font-block: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* Flex and grid children can otherwise refuse to shrink below their content,
   which on a phone pushes controls off the edge of the screen. */
.wrap, .card, .row, .roster, .log-row, .log-row__who, .runner, .game-bar { min-width: 0; }
.log-row__who, .runner__who { overflow: hidden; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: #6fb7e8; }

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 64px;
}

.wrap--wide { max-width: 1400px; }

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

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #1b1d22 0%, var(--ink) 100%);
  position: sticky;
  top: 0;
  z-index: 40;
}

.topbar__mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 9px;
  background: var(--jersey-red);
  display: grid;
  place-items: center;
  font-family: var(--font-block);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
}

.topbar__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.15;
}

.topbar__sub {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 2px 0 0;
}

.topbar__spacer { flex: 1; }

/* ---------- generic bits ---------- */

.card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 16px 0;
}

.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.hidden { display: none !important; }

h2 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 12px;
}

label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 6px;
  font-weight: 700;
}

input[type='text'],
input[type='url'],
input[type='password'],
input[type='number'],
select {
  width: 100%;
  background: var(--ink-3);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 13px 12px;
  font-size: 16px;
  font-family: inherit;
}

input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--jersey-red-hot);
  outline-offset: 1px;
}

.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.row > * { flex: 1 1 160px; min-width: 0; }
.field { margin-bottom: 14px; }
.field--narrow { flex: 0 1 120px; }

.hint {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.5;
}

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--ink-3);
  color: var(--text);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.06s ease, background 0.15s ease;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary { background: var(--jersey-red); border-color: var(--jersey-red); }
.btn--primary:hover:not(:disabled) { background: var(--jersey-red-hot); }
.btn--ghost { background: transparent; }
.btn--danger { color: #ff8b8b; }
.btn--block { width: 100%; display: block; }

/* anchors styled as buttons need a box, or margins collapse and they overlap */
a.btn { display: inline-block; text-align: center; text-decoration: none; }
a.btn--block { display: block; }

.btn--test {
  width: 100%;
  background: var(--green);
  border-color: var(--green);
  color: #04240f;
  font-size: 18px;
  padding: 20px 16px;
  letter-spacing: 0.1em;
}

.btn--test:hover:not(:disabled) { background: #3ad584; }
.btn--test.is-playing { background: var(--gold); border-color: var(--gold); color: #2a1c00; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  padding: 13px 18px;
  border-radius: 10px;
  font-size: 14px;
  z-index: 90;
  max-width: calc(100vw - 32px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.toast--error { border-left-color: var(--jersey-red-hot); }

/* ---------- roster list (parent view) ---------- */

.roster {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.roster__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}

.roster__num {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 9px;
  background: var(--jersey-red);
  display: grid;
  place-items: center;
  font-family: var(--font-block);
  font-size: 24px;
  line-height: 1;
}

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

.roster__name {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.roster__song {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.roster__song--missing { color: var(--gold); }

/* ---------- video picker ---------- */

.video-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.video-shell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.scrub-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.scrub-bar .btn { flex: 0 0 auto; padding: 10px 12px; font-size: 13px; }

.start-readout {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
}

.start-readout__value {
  font-family: var(--font-block);
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
}

.start-readout__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.clip-meter {
  height: 6px;
  border-radius: 3px;
  background: var(--ink-3);
  overflow: hidden;
  margin-top: 10px;
}

.clip-meter__fill {
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 0.1s linear;
}

/* ---------- game view ---------- */

body.game { background: #08090b; }

.game-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #22252b;
  position: sticky;
  top: 0;
  background: #08090b;
  z-index: 40;
}

.game-title {
  font-family: var(--font-block);
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: 24px;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  padding: 18px 18px 110px;
}

.jersey {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 16px;
  background: var(--jersey-red);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 8px 8px;
  overflow: hidden;
  font-family: inherit;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18), 0 6px 16px rgba(0, 0, 0, 0.45);
  transition: transform 0.08s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.jersey:active { transform: scale(0.975); }

.jersey__name {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(11px, 13cqw, 30px);
  line-height: 1.1;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  flex: 0 0 auto;
}

.jersey__num {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  width: 100%;
  font-family: var(--font-block);
  font-weight: 400;
  line-height: 0.82;
  font-size: min(44cqw, 44cqh);
  padding-bottom: 14px;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.jersey { container-type: size; }

/* Not greyed out: a player with no song is a full member of the roster whose tile
   records stats, so it keeps the team's red. The dashed outline and the line under
   the number are what say "nothing to play here". */
.jersey--nosong {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, var(--jersey-red), #a8172c);
}

.jersey--loading::after,
.jersey--playing::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 5px var(--gold);
  pointer-events: none;
}

.jersey--loading { filter: saturate(0.6) brightness(0.8); }

.jersey--playing { background: var(--jersey-red-hot); }

.jersey__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 7px;
  width: 0;
  background: var(--gold);
  transition: width 0.1s linear;
}

.jersey__badge {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  opacity: 0.85;
}

.now-playing {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: #14161a;
  border-top: 1px solid #2a2e35;
  z-index: 50;
}

.now-playing__label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn--stop {
  background: #fff;
  color: #000;
  border-color: #fff;
  font-size: 16px;
  padding: 16px 28px;
}

.arm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 9, 0.96);
  display: grid;
  place-items: center;
  z-index: 80;
  padding: 24px;
  text-align: center;
}

.arm-overlay__inner { max-width: 420px; }

.vol {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.vol input[type='range'] { width: 110px; accent-color: var(--jersey-red-hot); }

#yt-pool {
  position: fixed;
  width: 1px;
  height: 1px;
  left: -9999px;
  top: 0;
  opacity: 0.01;
  pointer-events: none;
}

@media (max-width: 480px) {
  .game-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px 12px 104px; }
  .game-title { font-size: 17px; }
  .game-head { gap: 8px; padding: 12px; }
  .vol input[type='range'] { width: 70px; }
  .vol span { display: none; }
  .hide-sm { display: none; }
}

/* ---------- stat keeping ---------- */

.game-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 18px;
  background: #121419;
  border-bottom: 1px solid #22252b;
  font-size: 13px;
}

.game-bar__label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
}

.game-bar__live {
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}

.game-bar .btn { padding: 8px 12px; font-size: 12px; flex: 0 0 auto; }

.game-bar input[type='text'],
.game-bar input[type='date'] {
  width: auto;
  flex: 0 1 150px;
  padding: 8px 10px;
  font-size: 14px;
}

.dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: 0 0 auto;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }

/* the sheet that asks what happened */

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #14161a;
  border-top: 1px solid #2f343c;
  border-radius: 18px 18px 0 0;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.6);
  transform: translateY(110%);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.sheet.is-open { transform: translateY(0); }

.sheet__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.sheet__who {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.outcome {
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 18px 8px;
  font-family: inherit;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  color: #fff;
  cursor: pointer;
  min-height: 74px;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.06s ease, filter 0.15s ease;
}

.outcome:active { transform: scale(0.96); }
.outcome small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.75;
  margin-top: 3px;
}

.outcome--hit { background: #1f9d55; }
.outcome--walk { background: #2e8bc0; }
.outcome--hbp { background: #1f6f96; }
.outcome--out { background: #4a4f59; }
.outcome--strikeout { background: #3a3e47; }
.outcome--error { background: #b8791b; }

.sheet__skip {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: none;
  border: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  padding: 10px;
  cursor: pointer;
  text-decoration: underline;
}

.hit-types {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.hit-types .btn { flex: 1 1 0; padding: 14px 6px; font-size: 14px; }
.hit-types .btn.is-on { background: var(--green); border-color: var(--green); color: #04240f; }

/* results on the jersey tile */

.jersey__log {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.92;
  pointer-events: none;
}

.jersey__log span {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  padding: 1px 4px;
}

.jersey--pending { box-shadow: inset 0 0 0 4px var(--gold), 0 6px 16px rgba(0, 0, 0, 0.45); }

/* game log */

.log-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.log-row:last-child { border-bottom: 0; }
.log-row__num {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--jersey-red);
  display: grid;
  place-items: center;
  font-family: var(--font-block);
  font-size: 17px;
}
.log-row__who { flex: 1 1 auto; min-width: 0; }
.log-row__out { color: var(--muted); font-size: 12.5px; }

@media (max-width: 380px) {
  .outcome { font-size: 13px; padding: 15px 4px; min-height: 66px; }
}

/* ---------- scoreboard ---------- */

.scorebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px 18px 12px;
  background: #0e1014;
  border-bottom: 1px solid #22252b;
}

.score { text-align: center; min-width: 74px; }

.score__name {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 130px;
  /* Wrap rather than truncate: "Fall Ball Tige..." next to the score is worse
     than two short lines, and team names are what tell the two columns apart. */
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.score__val {
  font-family: var(--font-block);
  font-size: 34px;
  line-height: 1.05;
}

.score__vs {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 12px;
}

.score__adj { display: flex; gap: 6px; padding-top: 10px; }
.score__adj .btn { padding: 8px 12px; font-size: 15px; line-height: 1; }

/* ---------- hold to play ---------- */

.jersey {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* Height rather than scaleY: a scaled element squashes its own gradient, which
   would shrink the bright cap to nothing at the start of the hold. The tile
   clips this to its rounded corners. */
.jersey__hold {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  /* Brighter than it was, and capped with a hard bright line along the top so the
     boundary itself is visible climbing the tile. A soft wash alone was easy to
     miss on a red tile in daylight. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0 3px, rgba(255, 255, 255, 0.36) 3px);
  pointer-events: none;
}

/* Driven from the same clock as the buzz rather than a CSS transition, so the
   fill, the flash and the vibration land on the same beats. */
.jersey--holding .jersey__hold {
  height: calc(var(--hold, 0) * 100%);
  transition: none;
}

/* ---------- hold progress bar ----------

   Across the top of the viewport, not inside the tile: while you are staring at
   one tile, a bar the width of the screen is what peripheral vision actually
   catches. Cyan through lime to amber, which are the brightest hues available
   against both the near-black board and a screen washed out by sunlight, and the
   leading edge's colour tells you how far along the hold is without reading it.
*/

.holdbar {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: 18px;
  z-index: 95;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
}

.holdbar.is-on {
  opacity: 1;
  visibility: visible;
}

.holdbar.is-done {
  transition: opacity 0.4s ease 0.05s;
  opacity: 0;
}

.holdbar__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #22e0ff 0%, #7cf03a 45%, #c9f31d 70%, #ffb020 100%);
  /* Reveal left to right rather than stretching, so the gradient stays put and
     the edge sweeps through it. */
  clip-path: inset(0 calc((1 - var(--hold, 0)) * 100%) 0 0);
}

/* A bright cap on the leading edge, pulsing on the same beats as the buzz, so the
   bar reads as moving even at a glance. */
.holdbar__fill::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--hold, 0) * 100% - 4px);
  width: 4px;
  background: #fff;
  box-shadow: 0 0 calc(6px + 14px * var(--flash, 0)) calc(1px + 3px * var(--flash, 0)) rgba(255, 255, 255, 0.9);
}

/* The flash. It fires on every buzz, and since the buzzes close from 210ms apart
   to 45ms, it goes from a slow blink to an almost solid glow as the two seconds
   run out. Its own element, because ::after already carries the playing ring. */
.jersey__pulse {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: inset 0 0 0 6px #fff;
  opacity: 0;
}

.jersey--holding .jersey__pulse { opacity: calc(var(--flash, 0) * 0.8); }

/* Winding up: the tile presses in on contact, then swells past its resting size
   as the hold completes. Visible from the dugout, unlike the fill alone. */
.jersey.jersey--holding {
  transform: scale(calc(0.975 + 0.05 * var(--hold, 0)));
  transition: none;
  z-index: 2;
}

.jersey__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  pointer-events: none;
}

.jersey--holding .jersey__hint { opacity: 1; }

/* ---------- picked outcome ---------- */

.outcome.is-picked {
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 3px rgba(255, 255, 255, 0.25);
  filter: brightness(1.12);
}

.sheet__grid .outcome:not(.is-picked) { filter: brightness(0.82) saturate(0.85); }

/* ---------- runners ---------- */

.runner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  text-align: left;
}

.runner:active { transform: translateY(1px); }
.runner--scored { border-color: var(--green); background: rgba(47, 191, 113, 0.12); }

.runner__num {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--jersey-red);
  display: grid;
  place-items: center;
  font-family: var(--font-block);
  font-size: 19px;
}

.runner__who { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.runner__tag {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.runner--scored .runner__tag { color: var(--green); }

.log-row__run {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--green);
}

.btn--stop:disabled {
  background: #2a2e35;
  color: var(--muted);
  border-color: #2a2e35;
  opacity: 1;
}

/* The dot in the tile's corner. Green: the song is buffered and parked on its own
   player, so the tile starts instantly and needs no network. Amber: caching found
   out before the first pitch that this one will not load at all. White: no song,
   the tile is here to record stats. It sits on ::before because ::after already
   carries the ring on a loading or playing tile. */
.jersey--cached::before,
.jersey--badsong::before,
.jersey--nosong::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #56d364;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.jersey--badsong::before { background: #f0a35e; }
.jersey--nosong::before { background: rgba(255, 255, 255, 0.45); }

/* ---------- box score table ---------- */

/* On a phone the box score is wider than the screen, so it scrolls inside its
   card. Without a cue nobody discovers that. These gradients are pinned to the
   container while the white masks scroll with the content, so a shadow appears
   on whichever edge still has columns hidden behind it and fades away at the
   end of the travel. No JavaScript and no scrollbar required. */
.box-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-image:
    linear-gradient(to right, var(--ink-2) 40%, rgba(26, 28, 33, 0)),
    linear-gradient(to left, var(--ink-2) 40%, rgba(26, 28, 33, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
    linear-gradient(to left, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 26px 100%, 26px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* The edge glow says there is more; this says what to do about it. Only worth
   the line on a screen too narrow to show every column. */
.hint--swipe { display: none; }
@media (max-width: 720px) {
  .hint--swipe { display: block; }
}


.box {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 13.5px;
  white-space: nowrap;
}

.box th {
  text-align: right;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-3);
  position: sticky;
  top: 0;
}

.box th:first-child, .box th:nth-child(2) { text-align: left; }

.box td {
  text-align: right;
  padding: 11px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-variant-numeric: tabular-nums;
}

.box td:first-child { text-align: left; color: var(--muted); }
.box td.box__name { text-align: left; font-weight: 700; }
.box tbody tr:last-child td { border-bottom: 0; }