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

.site-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

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

.pause-btn {
  background: var(--wrong-pos);
  border: 1px solid var(--wrong-pos);
  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;
}

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

/* 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;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.guess-popup-card {
  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-label, #nba-guess-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 8px;
  padding-right: 24px;
}

.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);
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  left: 16px;
  right: 16px;
  z-index: 5;
}

.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: 10px 12px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.5;
}

.end-modal-signup-prompt .nav-link {
  display: inline-block;
  margin-top: 6px;
}

.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, #rules-modal-close, #auth-send-link-btn, #pause-resume-btn, #nba-pause-resume-btn {
  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, #rules-modal-close, #auth-send-link-btn, #pause-resume-btn, #nba-pause-resume-btn {
  background: var(--accent);
  border-color: var(--accent);
}

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

/* Deliberately large — the pause takeover should obscure the box score, not
   just dim it, so peeking at answers while "thinking" isn't a viable use of
   the one-time pause. */
.pause-modal-card {
  width: min(94vw, 720px);
  max-width: 720px;
  min-height: min(78vh, 460px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.pause-modal-card h2 {
  font-size: 2rem;
}

.pause-modal-text {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 480px;
  margin: 0;
}

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

.auth-signed-in-email {
  color: var(--text);
  font-weight: 600;
  margin: 4px 0 0;
}

.auth-username-row {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 6px 0 0;
}

.auth-username-row strong { color: var(--text); }
.auth-username-row .nav-link { margin-left: 6px; font-size: 0.8rem; }
.auth-username-row .nav-link[disabled] { opacity: 0.45; cursor: not-allowed; }

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

.auth-streaks {
  color: var(--text-dim);
  font-size: 0.86rem;
  margin: 8px 0 0;
}

.end-modal-streak {
  color: var(--gold);
  font-weight: 700;
  margin: 8px 0 0;
}

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

.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; }
  .pause-btn, .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; }
  .pause-modal-card h2 { font-size: 1.5rem; }
  .pause-modal-text { font-size: 0.88rem; }
  .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; }

  /* 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; }
}