:root {
  --bg: #0a0a0b;
  --panel: #141415;
  --panel-alt: #1c1c1e;
  --border: #2c2c2e;
  --text: #f2f2f0;
  --text-dim: #a3a3a1;
  --accent: #3e6e8e;
  --accent-bright: #5590b3;
  --accent-bg: rgba(62, 110, 142, 0.16);
  --gold: #d4af37;
  --gold-bg: rgba(212, 175, 55, 0.16);
  --correct: #3f8f4d;
  --correct-bg: rgba(63, 143, 77, 0.16);
  --wrong-pos: #c99a3c;
  --wrong-pos-bg: rgba(201, 154, 60, 0.16);
  --wrong: #6b7a88;
  --wrong-bg: rgba(107, 122, 136, 0.16);
  --danger: #a3403f;
  --danger-bg: rgba(163, 64, 63, 0.16);
  --radius: 3px;
  --font-headline: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Courier New", Courier, monospace;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* No manual toggle — this site follows the OS/browser color-scheme setting
   directly, always. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f5f0;
    --panel: #ffffff;
    --panel-alt: #eef0f1;
    --border: #d7d9db;
    --text: #17181a;
    --text-dim: #5c6066;
    --accent: #2d5a78;
    --accent-bright: #3f7ea3;
    --accent-bg: rgba(45, 90, 120, 0.12);
    --gold: #a3811f;
    --gold-bg: rgba(163, 129, 31, 0.12);
    --correct: #2e7d3c;
    --correct-bg: rgba(46, 125, 60, 0.12);
    --wrong-pos: #a67c25;
    --wrong-pos-bg: rgba(166, 124, 37, 0.12);
    --wrong: #5c6066;
    --wrong-bg: rgba(92, 96, 102, 0.1);
    --danger: #b23a3a;
    --danger-bg: rgba(178, 58, 58, 0.1);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 16px 32px;
}

.site-header {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
  /* The corner links are position:absolute, so they don't contribute to
     this element's natural height — this padding is what actually clears
     space for them above the title, at every screen width. */
  padding-top: 26px;
}

.auth-corner-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.auth-corner-btn:hover { background: var(--accent-bright); }

.site-header h1 {
  margin: 0 0 8px;
  font-family: var(--font-headline);
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.accent-word {
  color: var(--gold);
}

.sport-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.sport-tab {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sport-tab:hover { background: var(--border); }

.sport-tab.sport-tab-active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.box-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

#box-number, #nba-box-number {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold);
}

/* Gold hyperlink matching #box-number's styling — no button chrome. */
.nav-link {
  background: none;
  border: none;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nav-link:hover { color: var(--text); }

.previous-boxes-panel {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.previous-boxes-panel > *:last-child {
  margin-bottom: 0;
}

/* Deliberately no card/border here — this is secondary info, styled as
   plain text so the box score itself carries the visual weight instead. */
.game-context {
  padding: 0;
  margin-bottom: 10px;
  text-align: center;
}

.game-context .game-meta-line {
  margin: 0 0 2px;
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dim);
}

.game-context .blurb {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.82rem;
}

.loading, .error {
  color: var(--text-dim);
  margin: 0;
}

.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}

.error { color: var(--danger); }

.box-grid-label {
  margin: 0 0 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

/* Previous Boxes filters. Every control is the same 44px height (also the
   comfortable phone tap size), with a small label above it. Three columns on
   desktop, stacked full-width on phones. */
.box-filters {
  margin-bottom: 12px;
}

.box-filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.box-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.box-filter-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.box-filter-control {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  background-color: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
}

select.box-filter-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a8a88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

select.box-filter-control option {
  background: var(--panel-alt);
  color: var(--text);
}

.box-filter-control.is-active {
  color: var(--gold);
  border-color: var(--gold);
  background-color: var(--gold-bg);
}

.box-filter-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.box-filter-check {
  position: relative;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--text-dim);
  border-radius: 5px;
}

.box-filter-toggle.is-active .box-filter-check {
  background: var(--gold);
  border-color: var(--gold);
}

.box-filter-toggle.is-active .box-filter-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.box-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.box-filter-random {
  height: 44px;
  padding: 0 18px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--bg);
  background: var(--gold);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.box-filter-random:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.box-filter-tag {
  padding: 4px 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-bg);
  border: 1px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
}

.box-filter-clear {
  padding: 0 4px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.box-filter-count {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.box-grid-empty {
  grid-column: 1 / -1;
  margin: 8px 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--text-dim);
}

@media (max-width: 640px) {
  .box-filter-row { grid-template-columns: 1fr; }
  .box-filter-random { width: 100%; }
}

.box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
  max-height: min(50vh, 420px);
  overflow-y: auto;
  padding-right: 4px;
}

.box-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.box-grid-item:hover { background: var(--border); }

.box-grid-num {
  font-family: var(--font-headline);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.box-grid-matchup {
  font-family: var(--font-headline);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.box-grid-series {
  font-family: var(--font-headline);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-dim);
  line-height: 1.3;
}

.box-grid-date {
  font-family: var(--font-headline);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-dim);
  opacity: 0.8;
  line-height: 1.3;
}

.box-grid-score {
  font-family: var(--font-headline);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.3;
  margin-top: 3px;
}

.box-grid-item.box-grid-inprogress { background: var(--accent-bg); border-color: var(--accent); }
.box-grid-item.box-grid-inprogress .box-grid-num,
.box-grid-item.box-grid-inprogress .box-grid-matchup,
.box-grid-item.box-grid-inprogress .box-grid-series,
.box-grid-item.box-grid-inprogress .box-grid-date,
.box-grid-item.box-grid-inprogress .box-grid-score { color: var(--accent-bright); }

.box-grid-item.box-grid-completed { background: var(--gold-bg); border-color: var(--gold); }
.box-grid-item.box-grid-completed .box-grid-num,
.box-grid-item.box-grid-completed .box-grid-matchup,
.box-grid-item.box-grid-completed .box-grid-series,
.box-grid-item.box-grid-completed .box-grid-date,
.box-grid-item.box-grid-completed .box-grid-score { color: var(--gold); }

.box-grid-item.box-grid-perfect { background: var(--correct-bg); border-color: var(--correct); }
.box-grid-item.box-grid-perfect .box-grid-num,
.box-grid-item.box-grid-perfect .box-grid-matchup,
.box-grid-item.box-grid-perfect .box-grid-series,
.box-grid-item.box-grid-perfect .box-grid-date,
.box-grid-item.box-grid-perfect .box-grid-score { color: var(--correct); }

.box-grid-score.box-grid-play-now { color: var(--text); }

.box-grid-item.box-grid-current {
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
}

.hint-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.hint-btn {
  background: var(--panel-alt);
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.hint-cost {
  font-weight: 500;
  font-size: 0.78em;
  opacity: 0.75;
  white-space: nowrap;
}

.hint-btn:hover:not(:disabled) { background: rgba(212, 175, 55, 0.12); }

.hint-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--border);
  color: var(--text-dim);
}

.hint-value {
  font-family: var(--font-headline);
  font-weight: 400;
  color: var(--text-dim);
  font-size: 0.95rem;
  flex: 1 1 100%;
  white-space: normal;
  word-break: break-word;
}

/* No cards here either — plain inline stats, same reasoning as .game-context. */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.status-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-icon {
  flex-shrink: 0;
  color: var(--text-dim);
}

.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;
}

.status-value {
  font-family: var(--font-headline);
  font-variant-numeric: tabular-nums;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1;
}

.status-value.timer-urgent {
  color: var(--danger);
}

.pre-start-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}

.pre-start-timer {
  font-family: var(--font-headline);
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1;
}

.start-btn {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: #211904;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 13px 0;
  width: 100%;
  max-width: 280px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter 0.15s ease;
}

.start-btn:hover { filter: brightness(1.08); }

/* Same "no card" treatment as .game-context/.status-bar. */
.guess-hint-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin-bottom: 12px;
}

.guess-hint-text {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* Fixed top sheet: same anchored position on every screen size, instead
   of tracking the clicked row (that flip-above/below logic was the actual
   source of the popup feeling unpredictable). The backdrop dims the board
   but the selected row still shows through via its own highlight color, so
   context isn't lost even though the sheet no longer hugs the row. */
.guess-popup {
  position: fixed;
  inset: 0;
  z-index: 15;
  /* No dimming and no click-blocking: the box score stays fully visible and
     tappable behind the popup (tap another stat line to switch to it). Only the
     card itself captures clicks. */
  background: transparent;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.guess-popup-card {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: none;
  border-bottom: 2px solid var(--accent);
  border-radius: 0 0 10px 10px;
  padding: 16px 16px 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.guess-popup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.guess-popup-close:hover { color: var(--text); }

.guess-popup-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-right: 24px; /* room for the close X */
}

#guess-label, #nba-guess-label {
  display: block;
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.guess-nav-btn {
  flex: none;
  width: 30px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.guess-nav-btn:hover { border-color: var(--gold); color: var(--gold); }

.guess-row {
  display: flex;
  gap: 8px;
}

#guess-input, #nba-guess-input, #auth-email-input, #username-input {
  flex: 1;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px 12px;
  font-size: 1rem;
  transition: border-color 0.15s ease;
}

#guess-input:disabled, #nba-guess-input:disabled {
  opacity: 0.5;
}

#guess-input:focus-visible, #nba-guess-input:focus-visible, #auth-email-input:focus-visible, #username-input:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 1px;
}

/* Chrome/Edge/Safari paint autofilled (and autofill-suggested) inputs with
   a hardcoded white background + black text, ignoring our own CSS. This
   forces the dark theme back using the browser's own override mechanism. */
#guess-input:-webkit-autofill, #nba-guess-input:-webkit-autofill, #auth-email-input:-webkit-autofill,
#guess-input:-webkit-autofill:focus, #nba-guess-input:-webkit-autofill:focus, #auth-email-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--panel-alt) inset;
  box-shadow: 0 0 0 1000px var(--panel-alt) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.suggestions {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.suggestions li {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.12s ease;
}

.suggestions li:last-child { border-bottom: none; }
.suggestions li:hover, .suggestions li.active { background: rgba(85, 144, 179, 0.16); }

.guess-feedback {
  margin: 10px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 1.2em;
}

.guess-feedback.fb-correct { color: var(--correct); }
.guess-feedback.fb-wrong-pos { color: var(--wrong-pos); }
.guess-feedback.fb-incorrect { color: var(--danger); }

.give-up-btn {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter 0.15s ease;
}

.give-up-btn:hover { filter: brightness(1.1); }

.pitcher-subsection {
  margin-top: 14px;
  padding: 10px 14px 4px;
  border-top: 1px solid var(--border);
}

.pitcher-label {
  margin: 0 0 6px;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.roster-section-label {
  margin: 10px 14px 6px;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.linescore-block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-bottom: 20px;
}

table.linescore {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  width: 100%;
}

table.linescore th, table.linescore td {
  padding: 8px 9px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

table.linescore th {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.linescore-team-col {
  text-align: left !important;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  position: sticky;
  left: 0;
  background: var(--panel);
}

.team-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
}

.linescore-total {
  font-weight: 700;
  border-left: 2px solid var(--border);
  background: var(--panel-alt);
}

.boxscore {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 820px) {
  .boxscore { grid-template-columns: 1fr 1fr; }
}

.team-block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scroll-hint {
  display: none;
  margin: 0;
  padding: 6px 14px 0;
  font-size: 0.72rem;
  color: var(--text-dim);
  font-style: italic;
}

.team-title {
  padding: 14px 16px;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel-alt);
  position: sticky;
  left: 0;
}

table.lineup {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.92rem;
}

/* MLB and NBA intentionally share every rule above with no per-sport
   overrides — same chrome, same box score styling, same weight, on both
   desktop and mobile. NBA naturally has more rows (starters + bench per
   team vs. MLB's single lineup), but that's content volume, not layout. */

table.lineup th, table.lineup td {
  padding: 7px 7px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}

table.lineup th.stat-col, table.lineup td.stat-col {
  text-align: center;
}

table.lineup th {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

table.lineup td.name-cell {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 1.05em;
  letter-spacing: 0.01em;
}

.label-jersey {
  color: var(--gold);
  font-weight: 700;
}

table.lineup tr:not(.correct):not(.failed) {
  cursor: pointer;
}

table.lineup tr.selected td {
  background: rgba(85, 144, 179, 0.22);
}

table.lineup tr.selected td.name-cell {
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
}

table.lineup tr.selected .unsolved-marker {
  color: var(--accent-bright);
  font-weight: 700;
}

table.lineup tr:not(.correct):not(.failed):hover td {
  background: rgba(85, 144, 179, 0.1);
}

table.lineup tr.correct td { background: var(--correct-bg); }
table.lineup tr.correct td.name-cell { color: var(--correct); }

table.lineup tr.failed td { background: var(--danger-bg); }
table.lineup tr.failed td.name-cell { color: var(--danger); }

.ph-note {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--text-dim);
}

.pos-badge {
  display: inline-block;
  min-width: 1.6em;
  text-align: center;
  padding: 1px 5px;
  border-radius: var(--radius);
  background: var(--panel-alt);
  color: var(--text-dim);
  font-size: 0.72rem;
  margin-right: 6px;
}

.site-footer {
  margin-top: 28px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.end-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 20;
}

.end-modal-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 420px;
  /* Never taller than the screen -- scroll inside instead of clipping the
     bottom (the leaderboard and Close button used to fall off-screen on
     shorter windows and phones). */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.end-modal-card h2 {
  margin-top: 0;
  font-family: var(--font-headline);
}

.end-modal-score {
  margin: 6px 0 14px;
}

.end-modal-correct-number {
  display: block;
  font-family: var(--font-headline);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
}

.end-modal-correct-number.end-modal-correct-perfect {
  color: var(--correct);
}

.end-modal-correct-label {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.end-modal-next {
  margin: 12px 0 0;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.end-modal-signup-prompt {
  margin: 14px 0 0;
  padding: 14px 14px 16px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  text-align: center;
}

.signup-prompt-title {
  margin: 0;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.98rem;
}

.signup-prompt-text {
  margin: 4px 0 12px;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.signup-prompt-btn {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: #1a1a1a;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter 0.15s ease;
}

.signup-prompt-btn:hover { filter: brightness(1.08); }

.modal-close-x {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.modal-close-x:hover { color: var(--text); }

.rules-card {
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  padding-top: 30px;
}

.rules-text {
  text-align: left;
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.5;
}

.rules-text h3 {
  margin: 16px 0 6px;
  color: var(--gold);
  font-family: var(--font-headline);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rules-text h3:first-child {
  margin-top: 0;
}

.rules-text ul {
  margin: 0;
  padding-left: 20px;
}

.rules-text li {
  margin-bottom: 4px;
}

.end-modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.share-btn, #end-modal-close, #nba-end-modal-close, #rules-modal-close, #auth-send-link-btn, #rules-got-it, #nba-rules-got-it {
  border: 1px solid transparent;
  color: white;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#end-modal-close, #nba-end-modal-close, #rules-modal-close, #auth-send-link-btn, #rules-got-it, #nba-rules-got-it {
  background: var(--accent);
  border-color: var(--accent);
}

#end-modal-close:hover, #nba-end-modal-close:hover, #rules-modal-close:hover, #auth-send-link-btn:hover, #rules-got-it:hover, #nba-rules-got-it:hover { background: var(--accent-bright); }

.auth-modal-blurb {
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: left;
  margin: 0 0 12px;
}

.auth-eyebrow {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-username {
  margin: 4px 0 0;
  font-size: 1.7rem;
  color: var(--gold);
  word-break: break-all;
}

.auth-account-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.rules-daily {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: rgba(212, 175, 55, 0.1);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
}

.rules-daily strong { color: var(--gold); }

.auth-signed-in-email {
  color: var(--text-dim);
  font-size: 0.88rem;
  margin: 6px 0 0;
  word-break: break-all;
}

.turnstile-box { display: flex; justify-content: center; margin-top: 10px; }
.turnstile-box:empty { display: none; }

.username-rules { margin: 10px 0 0; font-size: 0.8rem; }

.share-btn {
  background: var(--panel-alt);
  border-color: var(--border);
  color: var(--text);
}

.share-btn:hover { background: var(--border); }

.accuracy-panel {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: left;
}

.accuracy-panel-label {
  color: var(--text-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}

.accuracy-group-title {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 12px 0 4px;
}

.accuracy-group-title:first-of-type {
  margin-top: 0;
}

.accuracy-group-correct { color: var(--correct); }
.accuracy-group-missed { color: var(--danger); }

/* Highlights the signed-in player's own line on a leaderboard. */
.accuracy-row.leaderboard-me .accuracy-name,
.accuracy-row.leaderboard-me .accuracy-pct { color: var(--gold); font-weight: 700; }

.leaderboard-modal-box {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0 0 6px;
}

.accuracy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 0.86rem;
}

.accuracy-row + .accuracy-row {
  border-top: 1px solid var(--border);
}

.accuracy-icon {
  font-weight: 700;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.accuracy-icon-correct { color: var(--correct); }
.accuracy-icon-missed { color: var(--danger); }

.accuracy-name {
  color: var(--text);
  font-weight: 600;
  flex: 1;
}

.accuracy-pct {
  color: var(--gold);
  font-weight: 700;
  white-space: nowrap;
}

.accuracy-loading {
  color: var(--text-dim);
  font-size: 0.86rem;
  text-align: center;
  margin: 0;
}

.name-main {
  display: block;
}

.accuracy-inline {
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 2px;
}

.accuracy-inline-correct { color: var(--correct); }
.accuracy-inline-missed { color: var(--danger); }

.give-up-confirm-card {
  max-width: 360px;
}

.give-up-confirm-text {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.danger-btn {
  border: 1px solid var(--danger);
  background: var(--danger);
  color: white;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.danger-btn:hover { filter: brightness(1.12); }

.share-feedback {
  margin: 10px 0 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--correct);
}

[hidden] { display: none !important; }

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

@media (max-width: 640px) {
  .wrap { padding: 10px 8px 20px; }
  .site-header { margin-bottom: 8px; }
  .site-header h1 { font-size: 1.3rem; margin-bottom: 3px; }
  .sport-tabs { margin-bottom: 6px; }
  .sport-tab { padding: 10px 14px; font-size: 0.78rem; }
  .box-nav { font-size: 0.7rem; gap: 5px; }
  .game-context { padding: 5px 8px; margin-bottom: 5px; }
  .game-context .game-meta-line { font-size: 0.8rem; margin-bottom: 1px; }
  .game-context .blurb { font-size: 0.7rem; }
  .status-bar { margin-bottom: 5px; gap: 5px; }
  .status-item { padding: 3px 6px; }
  .status-value { font-size: 1.3rem; }
  .status-icon { width: 12px; height: 12px; }
  .give-up-btn { padding: 7px 14px; font-size: 0.75rem; }
  .pre-start-panel { padding: 18px 14px; gap: 10px; margin-bottom: 8px; }
  .pre-start-timer { font-size: 2rem; }
  .start-btn { padding: 11px 0; font-size: 0.85rem; }
  .guess-hint-bar { margin-bottom: 8px; }
  .guess-hint-text { font-size: 0.78rem; }
  .team-title { padding: 8px 10px; font-size: 1rem; }
  .roster-section-label, .pitcher-label { font-size: 0.6rem; margin: 4px 10px 2px; }
  .pitcher-subsection { margin-top: 3px; padding: 3px 10px 0; }
  /* Rows are the actual tap target for guessing, so height matters more than
     density here — tall enough to hit reliably (~44px, the standard mobile
     touch-target minimum), achieved via vertical padding so columns stay
     just as narrow as before (not wider, just taller). Same rule for both
     sports — MLB and NBA share identical table styling at every breakpoint. */
  table.lineup { font-size: 0.76rem; }
  table.lineup th, table.lineup td { padding: 12px 4px; }
  table.linescore { font-size: 0.6rem; }
  table.linescore th, table.linescore td { padding: 3px 4px; }
  .pos-badge { font-size: 0.6rem; padding: 0 3px; margin-right: 3px; }
  .ph-note { font-size: 0.75em; }
  .scroll-hint { display: block; font-size: 0.6rem; padding: 2px 10px 0; }
  .linescore-block { margin-bottom: 8px; }
  .boxscore { gap: 8px; }
  .end-modal-card { padding: 18px; }

  /* Tap-target pass: push every other interactive control toward the ~44px
     touch-target guideline too, not just table rows. */
  .nav-link { padding: 12px 14px; }
  .hint-btn { padding: 11px 12px; }
  .suggestions li { padding: 13px 12px; }
  .guess-popup-close, .modal-close-x { padding: 10px; }
  .guess-nav-btn { width: 40px; height: 36px; }

  /* Same idea for the "Previous Boxes" grid — taller cards for an easier
     tap, achieved via padding so column width (and count per row) is
     unchanged from desktop. */
  .box-grid-item { padding: 20px 12px; gap: 6px; }
  .box-grid-num { font-size: 0.72rem; }
  .box-grid-matchup { font-size: 1rem; }
  .box-grid-series { font-size: 0.8rem; }
  .box-grid-date { font-size: 0.72rem; }
  .box-grid-score { font-size: 0.9rem; }
}

.challenge-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(212, 175, 55, 0.1);
  border-left: 3px solid var(--gold);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
}

.challenge-banner[hidden] { display: none; }

.challenge-banner-close {
  flex: none;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.challenge-banner-close:hover { color: var(--text); }

.end-modal-challenge {
  margin: 10px 0 0;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.95rem;
}

.optin-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  text-align: left;
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.4;
  cursor: pointer;
}

.optin-row[hidden] { display: none; }

.optin-row input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--gold);
  cursor: pointer;
}

/* The guess box is a type="search" input only so iOS doesn't offer its Contacts
   AutoFill bar; hide the browser's own search styling/clear button. */
#guess-input, #nba-guess-input {
  -webkit-appearance: none;
  appearance: none;
}
#guess-input::-webkit-search-cancel-button, #nba-guess-input::-webkit-search-cancel-button,
#guess-input::-webkit-search-decoration, #nba-guess-input::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}


/* ---------- Box score: cleaner desktop table ---------- */
table.lineup {
  font-family: var(--font-headline);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}
table.lineup th, table.lineup td { padding: 10px 8px; }
table.lineup tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
table.lineup td.name-cell { font-weight: 600; font-size: 1em; }
table.lineup tr.correct td { background: var(--correct-bg); }
table.lineup tr.failed td { background: var(--danger-bg); }
table.lineup tr.selected td { background: var(--gold-bg); }
table.lineup tr.selected td.name-cell { outline: 2px solid var(--gold); outline-offset: -2px; }
table.lineup tr.selected .unsolved-marker { color: var(--gold); }
@media (prefers-color-scheme: light) {
  table.lineup tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.025); }
}

/* ---------- Status bar: sticky while a game is live ---------- */
.status-sub { color: var(--text-dim); font-size: 0.7rem; letter-spacing: 0.04em; margin-left: 6px; text-transform: uppercase; }
.guess-hint-bar.live {
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--bg);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

/* ---------- Phone layout (rows + team tabs) ---------- */
.team-tabs { display: none; }
.team-tab {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-bottom: 3px solid transparent;
  border-radius: var(--radius);
  color: var(--text-dim);
  padding: 7px 8px;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-headline);
  min-width: 0;
}
.team-tab b { display: block; font-size: 0.86rem; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-tab small { font-size: 0.68rem; }
.team-tab.active { color: var(--text); background: var(--panel-alt); border-bottom-color: var(--tab-color, var(--gold)); }

.msec { margin: 0; padding: 9px 12px 4px; font-size: 0.66rem; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; }
.mhead, .mmain { display: grid; grid-template-columns: 1fr 46px 46px 46px 18px; align-items: center; }
.mhead { padding: 6px 12px; background: var(--panel-alt); border-top: 1px solid var(--border); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--text-dim); text-transform: uppercase; }
.mhead span:not(:first-child) { text-align: center; }
.mrow { border-top: 1px solid var(--border); cursor: pointer; }
.mrow.correct, .mrow.failed { cursor: default; }
.mmain { padding: 11px 12px; min-height: 48px; }
.mname { display: flex; align-items: center; min-width: 0; }
.mord { color: var(--text-dim); font-size: 0.72rem; width: 1.1em; margin-right: 4px; text-align: right; flex: none; }
.mnw { display: flex; flex-direction: column; min-width: 0; margin-left: 4px; }
.mnm { font-family: var(--font-headline); font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk { text-align: center; font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.mchev { text-align: center; color: var(--text-dim); font-size: 0.75rem; }
.mrow.correct { background: var(--correct-bg); box-shadow: inset 3px 0 0 var(--correct); }
.mrow.correct .mnm { color: var(--correct); }
.mrow.failed { background: var(--danger-bg); box-shadow: inset 3px 0 0 var(--danger); }
.mrow.failed .mnm { color: var(--danger); }
.mrow.selected { background: var(--gold-bg); box-shadow: inset 3px 0 0 var(--gold), 0 0 0 1px var(--gold); }
.mrow.selected .unsolved-marker { color: var(--gold); font-weight: 700; }
.mdrawer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px 4px; padding: 2px 12px 12px 44px; }
.mdrawer div { display: flex; flex-direction: column; }
.mdrawer i { font-style: normal; font-size: 0.62rem; letter-spacing: 0.08em; color: var(--text-dim); }
.mdrawer b { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.mrow .accuracy-inline { margin-top: 1px; }

@media (max-width: 640px) {
  .team-tabs { display: flex; gap: 6px; margin-top: 6px; }
  .team-tabs[hidden] { display: none; }
  .team-block { overflow-x: visible; }
  .guess-hint-bar.live { padding: 4px 0; }
}

/* Blank space under the board for the whole live game on phones, so the last
   player on the page can always be scrolled up above the on-screen keyboard.
   It stays steady (rather than appearing with each popup, which jolted the
   scroll) and goes away when the box ends. */
@media (max-width: 640px) {
  body.game-live .wrap { padding-bottom: 90vh; }
}

/* Guess popup order: career path, then the search box, then suggestions last,
   so the suggestion list drops open at the bottom without moving anything
   above it. */
.guess-popup-card .hint-row { margin: 0 0 10px; }
.guess-popup-card .guess-feedback { margin: 8px 0 0; }
.guess-popup-card .suggestions { margin-top: 4px; }