/* The Play button's page — a game replayed, read-only.
 *
 * 🔴 Mobile FIRST, because most of this community is on a phone. The single
 * column below is the default and the four quadrants are the exception added
 * at a width that can hold them — not the other way round, which is how a
 * desktop layout ends up squeezed onto a phone.
 *
 * Tony's stated order on a phone: field, then the box scores, then the two
 * spray charts. That is the order the markup is in, so a narrow screen needs
 * no reordering at all.
 */

.sv2r-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.sv2r-pane {
  min-width: 0;            /* a grid child must be allowed to shrink, or a
                              wide table pushes the whole page sideways */
}

/* The box scores sit one above the other on a phone and side by side as soon
 * as there is room. `.sv2-boxes` is the console's own two-column wrapper. */
.sv2r-pane--box .sv2-boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* ── What just happened, across the diamond ─────────────────────────────── */
/* It arrives, and it STAYS until the next event replaces it. Tony, 2026-09-12:
 * *"Prefiero que la frase grande aparezca una sola vez, no que aparezca y
 * desaparezca."* A banner that faded out left the diamond saying nothing for
 * most of the time between plays — and on a slow replay, most of the time.
 *
 * The band sits between third and first base, which is where the eye already
 * is, and clears the plate and the outfielders' name tags.
 *
 * 🔴 No JavaScript. The page swaps the whole frame in at every tick, so this
 * element is BUILT again for each event and slides in again with it — no
 * timer to set, to cancel when somebody steps back, or to leave running in a
 * hidden tab. */

.sv2r-fieldwrap { position: relative; max-width: 100%; }

.sv2r-flash {
  position: absolute;
  box-sizing: border-box;   /* the padding and the border live INSIDE the
                               92%, or a phone scrolls sideways */
  top: 55%;
  left: 50%;
  /* 🔴 Capped against the VIEWPORT as well as against its box. The diamond
     it sits on is an SVG with its own width, so a percentage of the wrapper
     can be wider than a phone — and on a 390px screen this banner pushed the
     whole page 114px sideways. Mobile first: most of this community is on a
     phone. */
  width: min(92%, 34rem, calc(100vw - 28px));
  /* 🔴 The centring lives HERE, not only in the keyframes. A browser with
     animations turned off — a phone on low power, somebody who has asked for
     less movement, a test runner — would otherwise leave the banner pushed
     half its own width off the right of the page. Found by the phone test,
     which caught it scrolling sideways by 114px. */
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 10px 16px;
  text-align: center;
  border-radius: var(--sv2-radius, 8px);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  border: 2px solid var(--accent-primary, #b8860b);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  /* Read from across a room: this page is meant for a screen everybody can
   * see, and a caption in body text would be a caption nobody reads. */
  font-size: clamp(1.05rem, 2.1vw, 1.6rem);
  line-height: 1.25;
  pointer-events: none;
  /* 🔴 FIVE seconds, then gone. Tony, 2026-09-12: *"The play text that appears
     between third and first must disappear after 5 seconds, and must not come
     back until the next event is saved."*

     It used to arrive and stay, because the animation ended at full opacity
     and nothing ever took it away — so on a live game it sat across the
     diamond for as long as the scorer took over the next batter, covering the
     runners it was describing. `forwards` holds the last frame, which is
     opacity 0, so it does not reappear when the animation finishes. */
  animation: sv2r-flash 5s ease forwards;
}

.sv2r-flash__who {
  /* Font, weight and case: the one name look (.dc-person), 10 Oct 2026. */
  display: block;
  font-size: .62em;
  color: var(--text-secondary, var(--text-primary));
}

.sv2r-flash__what { font-weight: 600; }

/* In, held long enough to read, and away again. The 9% and 90% marks are
 * .45s in and .5s out of the five seconds, so the arrival is as quick as it
 * always was and four and a half seconds are left for reading it. */
@keyframes sv2r-flash {
  0%   { opacity: 0; transform: translate(-50%, -38%) scale(.96); }
  9%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  90%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* Somebody who has asked for less movement gets the words with no movement
 * at all — and they still go after five seconds, because staying put was the
 * fault, not the sliding. A plain fade, which is not movement. */
@media (prefers-reduced-motion: reduce) {
  .sv2r-flash {
    animation: sv2r-flash-still 5s linear forwards;
    transform: translate(-50%, -50%);
  }
}

@keyframes sv2r-flash-still {
  0%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

/* On the wall screen it is the thing the room reads. */
.page--kiosk .sv2r-flash { font-size: clamp(1.3rem, 2.6vw, 2.2rem); }

/* ── What just happened ─────────────────────────────────────────────────── */
/* One line under the field, big enough to read from across a room: this page
 * is meant to be put on a screen everybody can see. */

.sv2r-said {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 10px 2px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent-primary, var(--border-default));
  background: var(--bg-elevated, var(--bg-card));
  border-radius: var(--sv2-radius, 8px);
  font-size: 1rem;
}

.sv2r-said__where {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-secondary));
}

.sv2r-said__what { flex: 1 1 12rem; }

.sv2r-said__score {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--text-secondary, var(--text-primary));
}

.sv2r-said__sub {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-primary, #b8860b);
  color: #fff;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── The controls ───────────────────────────────────────────────────────── */

.sv2r-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--bg-elevated, var(--bg-card));
  border: 1px solid var(--border-subtle, var(--border-default));
  border-radius: var(--sv2-radius, 8px);
}

.sv2r-bar__where {
  font-family: var(--font-mono);
  font-size: .85rem;
}

.sv2r-bar__note {
  margin-left: auto;
  font-size: .75rem;
  color: var(--text-muted, var(--text-secondary));
}

/* The two step buttons are square and thumb-sized: a phone is the common
 * case and a 12px chevron is not something a thumb can hit. */
#sv2rBack, #sv2rNext {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.2rem;
  line-height: 1;
}

/* A compact box score has no room for a stretched name column — this is the
 * empty space Tony marked in red between BATTER and AB. */
.sv2-boxes--compact .sv2-box th,
.sv2-boxes--compact .sv2-box td {
  padding-left: 4px;
  padding-right: 4px;
  white-space: nowrap;
}

.sv2-boxes--compact .sv2-box {
  width: auto;
  font-size: .8rem;
}

.sv2-boxes--compact .sv2-box th:nth-child(2),
.sv2-boxes--compact .sv2-box td:nth-child(2) {
  width: 1%;               /* shrink to the name, instead of taking the slack */
}

/* ── From tablet up: the four quadrants Tony drew ───────────────────────── */

@media (min-width: 900px) {
  .sv2r-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .sv2r-pane--box .sv2-boxes {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── The three modes and their pickers ──────────────────────────────────── */
/* Radio buttons, not a menu: on a phone a menu is two taps and a guess, and
 * this is the first choice a viewer makes. Thumb-sized targets throughout. */

.sv2r-modes {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 2px 6px;
  border: 1px solid var(--border-subtle, var(--border-default));
  border-radius: var(--sv2-radius, 8px);
}

.sv2r-modes__legend {
  padding: 0 4px;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-secondary));
}

.sv2r-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 8px;
  cursor: pointer;
  white-space: nowrap;
}

.sv2r-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sv2r-pick[hidden] { display: none; }

.sv2r-pick__label {
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-secondary));
}

.sv2r-pick__input {
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid var(--border-subtle, var(--border-default));
  border-radius: var(--sv2-radius, 8px);
  background: var(--bg-card);
  color: var(--text-primary);
}

#sv2rLoops { width: 5rem; }

.sv2r-bar__said {
  font-size: .8rem;
  color: var(--text-secondary, var(--text-primary));
}

/* ── Kiosk ──────────────────────────────────────────────────────────────── */
/* 🔴 A screen a whole room watches. Tony asked for this as the "wow factor":
 * "a highly interactive page that could be easily shown as a kiosk
 * application in a place that everybody could see."
 *
 * The SAME page with the site's chrome taken off, not a second page — a
 * second page would be a second copy of the replay to keep in step with this
 * one. Everything here is inside `.page--kiosk`, so the ordinary page is
 * untouched.
 */

.page--kiosk .sidebar,
.page--kiosk .sidebar-overlay,
.page--kiosk .top-bar,
.page--kiosk .site-footer {
  display: none !important;
}

/* 🔴 The headline: which game this is, read from the back of the room. Tony,
 * 2026-11-12: the kiosk was "missing a headline with the teams playing, the
 * date and the tournament edition underneath". The teams and the date are
 * the big line; the competition sits under them, smaller. */
.page--kiosk .dc-pagehead {
  margin: 4px 2px 10px;
  padding: 0;
}

.page--kiosk .dc-pagehead__subtitle {
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  color: var(--text-primary);
  margin: 0;
}

.page--kiosk .sv2-competition--head {
  font-size: clamp(.85rem, 1.2vw, 1.1rem);
  margin-top: 6px;
}

/* 🔴 Hiding the sidebar is not enough. The page is laid out as a grid of two
 * columns — sidebar, then everything else — and a hidden sidebar leaves its
 * COLUMN behind. The replay then lands in the sidebar's narrow column and is
 * squeezed to nothing (16 pixels wide, measured in the browser). The shell
 * has to become a single column as well. */
.page--kiosk .shell {
  display: block !important;
}

.page--kiosk .main,
.page--kiosk .main-content {
  margin: 0 !important;
  padding: 8px !important;
  max-width: none !important;
  width: 100% !important;
}

/* Read from across a room: the sentence under the field is the thing a
 * spectator actually reads, so it grows the most. */
.page--kiosk .sv2r-said {
  font-size: 1.5rem;
  padding: 14px 18px;
}

.page--kiosk .sv2r-said__where,
.page--kiosk .sv2r-said__score {
  font-size: 1.1rem;
}

.page--kiosk .sv2-box {
  font-size: .95rem;
}

.page--kiosk .sv2-card__title {
  font-size: 1.1rem;
}

/* The controls are for whoever sets the screen up, not for the room. They
 * stay reachable but out of the way. */
.page--kiosk .sv2r-bar {
  opacity: .35;
  transition: opacity .2s;
}

.page--kiosk .sv2r-bar:hover,
.page--kiosk .sv2r-bar:focus-within,
.page--kiosk .sv2r-bar--waiting {
  opacity: 1;
}

/* 🔴 Until somebody chooses how to watch, the controls are the one thing on
 * the screen to act on, so they are at full strength and say so. Tony,
 * 2026-11-12: the kiosk opens stopped "and only starts once how to watch it
 * has been chosen". */
.sv2r-bar__choose {
  font-weight: 700;
  color: var(--accent-gold, #C8A24A);
}

/* A wall screen is wide. Give the field more of it than the tables. */
@media (min-width: 1400px) {
  .page--kiosk .sv2r-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 16px;
  }
}

/* ── Who handled the ball ───────────────────────────────────────────────── */
/* 🔴 Tony: "It doesn't show what defensive players handled the ball." The men
 * who touched it on this play are ringed, so a 6-4-3 can be read off the
 * drawing without counting positions. Deliberately a ring and a colour, not
 * only a colour — a ring survives a projector, a bright room and colour
 * blindness, and this is a screen meant to be watched from a distance. */

.sv2-fielder--handled circle {
  stroke: var(--accent-gold, #C8A24A);
  stroke-width: 3;
  fill: color-mix(in srgb, var(--accent-gold, #C8A24A) 18%, transparent);
}

.sv2-fielder--handled text {
  font-weight: 700;
}

/* The order the ball went, written the way a scorer writes it. */
.sv2r-handled {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent-gold, #C8A24A);
  white-space: nowrap;
}

/* ── The screen says when it has stopped moving ──────────────────────────── */
/* 🔴 Nothing fails silently. A wall screen still showing the third inning of
 * a game now in the seventh looks perfectly healthy from across a room, and
 * that is the worst kind of failure: nobody knows to look. This is loud on
 * purpose, and it is big on the kiosk for the same reason the sentence under
 * the field is — it has to be readable from where people are sitting. */

.sv2r-lost {
  margin: 8px 2px;
  padding: 10px 14px;
  border: 2px solid var(--danger, #B3261E);
  border-left-width: 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger, #B3261E) 12%, transparent);
  color: var(--text, inherit);
  font-weight: 700;
  animation: sv2r-lost-pulse 1.6s ease-in-out infinite;
}

.page--kiosk .sv2r-lost {
  font-size: 1.4rem;
  padding: 14px 18px;
}

@keyframes sv2r-lost-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .sv2r-lost { animation: none; }
}