/* ─── Variables & Reset ──────────────────────────────────── */

:root {
  --color-start-end: #1a1a1a;
  --color-correct: #16a34a;
  --color-clue: #bf3294;
  --color-guess: #1e3a8a;
  --color-wrong: #ea0c0c;
  --color-border: #e5e7eb;
  --color-bg: #f9fafb;
  --color-card: #ffffff;
  --color-text: #111827;
  --color-muted: #6b7280;
  --shadow: 0 1px 4px rgba(0,0,0,0.08);
  --cell-gap: 40px;
  --cell-border: 12px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  background-color: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

/* ─── Flash Messages ─────────────────────────────────────── */

.flash {
  padding: 10px 20px;
  text-align: center;
  font-size: 14px;
  font-family: monospace;
}
.flash-notice {
  background: #d1fae5;
  color: #065f46;
}
.flash-alert {
  background: #fee2e2;
  color: #991b1b;
}
/* ─── Shared Layout & Header ─────────────────────────────── */

.grundl-container {
  max-width: 840px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}

.grundl-header {
  text-align: center;
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}

.grundl-logo {
  font-family: 'Silkscreen', monospace;
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.logo-black {
  color: var(--color-text);
}

.logo-green {
  color: var(--color-correct);
}

.grundl-tagline {
  font-size: 14px;
  color: var(--color-muted);
  margin: 6px 0 0;
}

.how-to-play-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--color-muted);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  padding: 4px;
  margin-top: 8px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.how-to-play-btn:hover {
  color: var(--color-text);
}

@media (max-width: 620px) {
  .grundl-logo {
    font-size: 2.2rem;
  }
}
/* ─── PLAY button ───────────────────────────────────────── */

.nav-play-btn {
  text-decoration: none;
}

.nav-play-btn .sport-mini-name { color: #16a34a; }
.nav-play-btn:hover { border-color: #16a34a; }

/* 2×2 emoji grid inside the PLAY button */
.play-emojis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  width: 1.45rem;
  height: 1.45rem;
  line-height: 1;
}

.play-emojis span {
  font-size: 0.55rem;
  line-height: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── INITIALIZR crosslink button ────────────────────────── */

.nav-initializr-btn {
  background: #111 !important;
  border-color: #333 !important;
}

.nav-initializr-btn:hover {
  border-color: #00ff41 !important;
  transform: translateY(-1px);
}

.nav-initializr-i {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem;
  color: #00ff41;
  line-height: 1;
  font-weight: bold;
}

@media (max-width: 750px) {
  .nav-initializr-i { font-size: 1.3rem; }
}

@media (min-width: 751px) {
  .nav-initializr-i { font-size: 1.85rem; }
}

/* ─── GRUNDL crosslink button (in initializr nav) ─────────── */

.nav-grundl-btn {
  background: white !important;
  border-color: var(--color-border) !important;
}

.nav-grundl-btn:hover {
  border-color: #16a34a !important;
  transform: translateY(-1px);
}

.nav-grundl-g {
  font-family: 'Silkscreen', monospace;
  font-size: 1.1rem;
  color: #16a34a;
  line-height: 1;
  font-weight: 700;
}

@media (max-width: 750px) {
  .nav-grundl-g { font-size: 1.3rem; }
}

@media (min-width: 751px) {
  .nav-grundl-g { font-size: 1.85rem; }
}

/* ─── Initializr-themed nav cards ────────────────────────── */

.initializr-nav .sport-mini-card {
  background: #0d0d0d;
  border-color: #3a2800;
  color: #ffb000;
}

.initializr-nav .sport-mini-card:hover {
  background: #0d0900;
  border-color: #ffb000;
  transform: none;
}

.initializr-nav .sport-mini-card.sport-mini-active {
  border-color: #00ff41;
  color: #00ff41;
  background: #0d0900;
}

/* PLAY label always green in initializr nav */
.initializr-nav .nav-play-btn .sport-mini-name { color: #00ff41; }
.initializr-nav .sport-mini-stats { color: #d2c104; }

.initializr-nav .sport-mini-card.sport-mini-active .sport-mini-name,
.initializr-nav .sport-mini-card.sport-mini-active .rank-gold,
.initializr-nav .sport-mini-card.sport-mini-active .rank-silver,
.initializr-nav .sport-mini-card.sport-mini-active .rank-bronze {
  color: #00ff41;
}

/* PLAY button in initializr nav */
.initializr-nav .nav-play-btn {
  background: #0d0d0d;
  border-color: #003300;
}

.initializr-nav .nav-play-btn:hover {
  background: #001a00;
  border-color: #00aa2a;
}

/* G button (grundl crosslink) stays white/light in initializr nav */
.initializr-nav .nav-grundl-btn {
  background: white !important;
  border-color: #e5e7eb !important;
}

.initializr-nav .nav-grundl-btn:hover {
  border-color: #16a34a !important;
}

/* Initializr nav — sign-in btn */
.initializr-nav .nav-signin-btn {
  background: transparent;
  border: 1px solid #ffb000;
  color: #ffb000;
  border-radius: 0;
  font-family: 'Courier New', Courier, monospace;
}

.initializr-nav .nav-signin-btn:hover {
  background: #0d0900;
  color: #00ff41;
  border-color: #00ff41;
}

.initializr-nav .nav-greeting {
  color: #ffb000;
}

.initializr-nav .nav-hamburger span {
  background: #ffb000;
}

.initializr-nav .nav-links {
  background: #0d0d0d;
  border-color: #003300;
  box-shadow: 0 4px 16px rgba(0, 255, 65, 0.1);
}

.initializr-nav .nav-links a {
  color: #ffb000;
  font-family: 'Courier New', Courier, monospace;
}

.initializr-nav .nav-links a:hover {
  color: #00ff41;
  text-decoration: none;
  background: #001a00;
}

.initializr-nav .nav-links .nav-email {
  color: #005500;
  border-bottom-color: #003300;
}

/* ─── Sport tabs on game page ─────────────────────────────── */

.game-sport-tabs {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.game-sport-tab {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 5px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-muted);
  font-family: 'Silkscreen', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: border-color 0.15s, color 0.15s;
  background: var(--color-card);
}

.game-sport-tab:hover { transform: translateY(-1px); }
.game-sport-tab-nfl:hover  { border-color: #16a34a; color: #16a34a; }
.game-sport-tab-nba:hover  { border-color: #f97316; color: #f97316; }
.game-sport-tab-nhl:hover  { border-color: #00BFFF; color: #00BFFF; }
.game-sport-tab-mlb:hover  { border-color: #eab308; color: #eab308; }

.game-sport-tab-nfl.game-sport-tab-active  { border-color: #16a34a; color: #16a34a; }
.game-sport-tab-nba.game-sport-tab-active  { border-color: #f97316; color: #f97316; }
.game-sport-tab-nhl.game-sport-tab-active  { border-color: #00BFFF; color: #00BFFF; }
.game-sport-tab-mlb.game-sport-tab-active  { border-color: #eab308; color: #eab308; }

.game-sport-tab-icon { font-size: 0.9rem; }

@media (min-width: 751px) {
  .play-emojis {
    width: 1.85rem;
    height: 1.85rem;
  }
  .play-emojis span {
    font-size: 0.78rem;
  }
}

@media (max-width: 750px) {
  .game-sport-tabs { gap: 0.2rem; }
  .game-sport-tab  { padding: 4px 8px; font-size: 0.6rem; }
}

/* ─── User Nav ───────────────────────────────────────────── */

.user-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  font-family: monospace;
  color: #888;
  position: relative;
}

/* Holds the game crosslink buttons (Initializr, Dimebag) */
.nav-crosslinks {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  left: 16px;
}

.nav-crosslink {
  display: flex;
  align-items: center;
  padding: 0;
  position: relative;
}

/* Crosslink tooltip */
.nav-crosslink::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  white-space: nowrap;
  background: #1a1a1a;
  color: #e5e7eb;
  font-size: 0.6rem;
  font-family: monospace;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border: 1px solid #444;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 300;
}

.nav-crosslink:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Crosslink card must be identical in size to other sport-mini-cards */
.nav-crosslink .sport-mini-card {
  width: 44px;
  height: 44px;
  padding: 0 !important;
  flex-shrink: 0;
}

.nav-left {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  position: absolute;
  right: 16px;
}

.nav-greeting {
  font-size: 13px;
  font-family: monospace;
  color: #555;
  white-space: nowrap;
}

.nav-streak {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 16px;
  vertical-align: middle;
}

.nav-streak-fire {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 1px), calc(-50% - 2px));
  font-size: 30px;
  line-height: 1;
}

.nav-streak-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -38%);
  font-family: 'Silkscreen', monospace;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  line-height: 1;
}

.nav-signin-btn {
  display: inline-block;
  padding: 6px 14px;
  background: #16a34a;
  color: #fff;
  font-size: 13px;
  font-family: monospace;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}

.nav-signin-btn:hover {
  background: #15803d;
}

/* ─── Sport Mini Cards ───────────────────────────────────── */

.sport-mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-card);
  transition: border-color 0.15s, transform 0.1s;
}

.sport-mini-card:hover {
  transform: translateY(-1px);
}

.sport-mini-nfl { color: #16a34a; }
.sport-mini-nba { color: #f97316; }
.sport-mini-nhl { color: #00BFFF; }
.sport-mini-mlb { color: #eab308; }
.sport-mini-stats { color: #1d4ed8; }

.sport-mini-archive { color: #bf3294; }
.sport-mini-nfl:hover { border-color: #16a34a; }
.sport-mini-nba:hover { border-color: #f97316; }
.sport-mini-nhl:hover { border-color: #00BFFF; }
.sport-mini-mlb:hover { border-color: #eab308; }
.sport-mini-leaderboard:hover { border-color: #d2c104; }
.sport-mini-leaderboard.sport-mini-active { border-color: #d2c104; color: #d2c104; }
.sport-mini-stats:hover { border-color: #1d4ed8; }
.sport-mini-rankings:hover { border-color: #7c3aed; }
.sport-mini-rankings.sport-mini-active { border-color: #7c3aed; }
.sport-mini-archive:hover { border-color: #bf3294; }
.sport-mini-nfl.sport-mini-active { border-color: #16a34a; }
.sport-mini-nba.sport-mini-active { border-color: #f97316; }
.sport-mini-nhl.sport-mini-active { border-color: #00BFFF; }
.sport-mini-mlb.sport-mini-active { border-color: #eab308; }
.sport-mini-stats.sport-mini-active { border-color: #1d4ed8; }
.sport-mini-archive.sport-mini-active { border-color: #bf3294; }

.sport-mini-archive-icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.sport-mini-ranks {
  display: flex;
  gap: 2px;
  font-family: 'Silkscreen', monospace;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.rank-gold   { color: #d2c104; }
.rank-silver { color: #9ca3af; }
.rank-bronze { color: #b45309; }

.sport-mini-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.sport-mini-name {
  font-family: 'Silkscreen', monospace;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media (max-width: 500px) {
  .nav-greeting {
    display: none;
  }
}

@media (max-width: 750px) {
  .user-nav {
    justify-content: flex-start;
    gap: 4px;
  }
  /* The absolutely-positioned element is the container, not each button —
     leaving it absolute here would overlap the first nav-left items. */
  .nav-crosslinks {
    position: static;
    gap: 4px;
  }
  .nav-left {
    justify-content: flex-start;
    gap: 4px;
  }
  .nav-right {
    position: static;
    margin-left: auto;
  }
  .nav-crosslink .sport-mini-card {
    width: 40px;
    height: 40px;
    padding: 0 !important;
  }
  .sport-mini-name,
  .sport-mini-ranks {
    display: none;
  }
  .sport-mini-icon {
    font-size: 1.4rem;
  }
  .sport-mini-archive-icon {
    width: 1.4rem;
    height: 1.4rem;
  }
  .sport-mini-card {
    width: 40px;
    height: 40px;
    padding: 0;
  }
}

@media (min-width: 751px) {
  .sport-mini-card {
    gap: 3px;
    padding: 0;
    width: 64px;
    height: 66px;
    border-radius: 10px;
  }
  .nav-crosslink .sport-mini-card {
    width: 64px;
    height: 66px;
    padding: 0 !important;
  }
  .sport-mini-stats {
    padding: 0;
  }
  .sport-mini-icon {
    font-size: 1.85rem;
  }
  .sport-mini-name {
    font-size: 0.825rem;
  }
  .sport-mini-ranks { font-size: 0.825rem; }
  .sport-mini-archive-icon {
    width: 1.85rem;
    height: 1.85rem;
  }
  .nav-hamburger {
    gap: 8px;
    padding: 9px;
  }
  .nav-hamburger span {
    width: 33px;
    height: 3px;
  }
  .nav-right.open .nav-hamburger span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
  }
  .nav-right.open .nav-hamburger span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }
}

/* ─── Hamburger ──────────────────────────────────────────── */

.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #555;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.nav-links {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 200;
}

.nav-links .nav-email {
  display: block;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
  color: #888;
  width: 100%;
}

.nav-links a {
  display: block;
  padding: 10px 16px;
  width: 100%;
  color: #555;
  text-decoration: none;
}

.nav-links a:hover {
  text-decoration: underline;
}

.nav-right.open .nav-links {
  display: flex;
}

.nav-right.open .nav-hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-right.open .nav-hamburger span:nth-child(2) {
  opacity: 0;
}

.nav-right.open .nav-hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Initializr domain — global dark background ───────────────── */

body.initializr-page {
  background: #0d0d0d;
  color: #ffb000;
}

/* ─── Initializr sub-page dark overrides for Grundl design system ── */
/* Scope: body.initializr-page — adapts shared Grundl CSS classes     */
/* for the dark terminal background used on initializr sub-pages.     */

.initializr-page .grundl-header {
  border-bottom: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.initializr-page .home-container {
  padding-top: 2rem;
}

/* Match the block-cursor blink used on the game/landing pages */
@keyframes initializr-blink {
  0%, 49% { color: #00ff41; background: transparent; }
  50%, 100% { color: #0d0d0d; background: #00ff41; }
}
.initializr-page .cursor-blink {
  display: inline-block;
  animation: initializr-blink 1s step-end infinite;
  padding: 0 2px;
}
.initializr-page .grundl-logo {
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(2rem, 6vw, 3.5rem);
  letter-spacing: 0.1em;
  color: #00ff41;
  text-transform: lowercase;
  text-shadow: 0 0 12px #00ff4188;
}
.initializr-page .grundl-tagline {
  color: #ffb000;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}

/* Difficulty tabs */
.initializr-page .difficulty-tab {
  color: #ffb000;
  border-color: #3a2800;
  background: transparent;
}
.initializr-page .difficulty-tab:hover {
  color: #00ff41;
  border-color: #ffb000;
}
.initializr-page .difficulty-tab-active {
  color: #00ff41;
  border-color: #00ff41;
}

/* Leaderboard table */
.initializr-page .leaderboard-container {
  background: #111;
  border-color: #00ff41;
}
.initializr-page .leaderboard-th {
  background: #0a0a0a;
  color: #ffb000;
  border-bottom-color: #00ff41;
}
.initializr-page .leaderboard-td {
  color: #ffb000;
}
.initializr-page .leaderboard-row {
  border-bottom-color: #2a1800;
}
.initializr-page .leaderboard-row:hover {
  background: #0d0900;
}
.initializr-page .leaderboard-row--me {
  background: #0d0900;
}
.initializr-page .leaderboard-username {
  color: #00ff41 !important;
}
.initializr-page .leaderboard-rank-cell {
  color: #ffb000;
}
.initializr-page .leaderboard-row:nth-child(1) .leaderboard-rank-cell { color: #d2c104; }
.initializr-page .leaderboard-row:nth-child(2) .leaderboard-rank-cell { color: #9ca3af; }
.initializr-page .leaderboard-row:nth-child(3) .leaderboard-rank-cell { color: #b45309; }
.initializr-page .leaderboard-empty { color: #ffb000; }
.initializr-page .leaderboard-score.score-red     { color: #ff3300; }
.initializr-page .leaderboard-score.score-orange  { color: #ff9900; }
.initializr-page .leaderboard-score.score-yellow  { color: #ffe600; }
.initializr-page .leaderboard-score.score-green   { color: #00ff41; }
.initializr-page .leaderboard-score.score-fuchsia { color: #00ff41; }

/* Rankings */
.initializr-page .rankings-container { --leaderboard-accent: #00ff41; }
.initializr-page .rankings-table .leaderboard-row .leaderboard-rank-cell { color: #ffb000; }
.initializr-page .rankings-table tbody:nth-of-type(1) tr td { background: color-mix(in srgb, #ffb000 12%, transparent); }
.initializr-page .rankings-table tbody:nth-of-type(2) tr td { background: color-mix(in srgb, #ffb000 6%, transparent); }
.initializr-page .rankings-table tbody:nth-of-type(3) tr td { background: color-mix(in srgb, #ffb000 3%, transparent); }
.initializr-page .rankings-toggle-btn { color: #ffb000; }
.initializr-page .rankings-toggle-btn:hover { color: #00ff41; background: #0d0900; }
.initializr-page .rankings-sub-label { color: #ffb000; }
.initializr-page .rankings-sport-line { color: #ffb000; }
.initializr-page .rankings-sport-score, .initializr-page .rankings-sport-avg { color: #ffb000; }
.initializr-page .rankings-subrow-cell { border-bottom-color: #2a1800; }

/* Archives */
.initializr-page .archives-month-title { color: #00ff41; font-family: 'Courier New', Courier, monospace; }
.initializr-page .archives-nav-btn {
  border-color: #3a2800;
  background: #111;
  color: #ffb000;
}
.initializr-page .archives-nav-btn:not(.archives-nav-btn-disabled):hover {
  border-color: #ffb000;
  color: #00ff41;
}
.initializr-page .calendar-day-header { color: #ffb000; }
.initializr-page .calendar-day {
  border-color: #2a1800;
  background: #111;
}
.initializr-page .calendar-day-num { color: #ffb000; }
.initializr-page .calendar-day-today .calendar-day-num { color: #00ff41; }
.initializr-page .calendar-day-has-games:hover {
  border-color: #ffb000;
  box-shadow: 0 2px 8px rgba(255, 176, 0, 0.15);
}
.initializr-page .archives-modal {
  background: #111;
  border: 1px solid #3a2800;
}
.initializr-page .archives-modal-close { color: #ffb000; }
.initializr-page .archives-modal-close:hover { color: #00ff41; }
.initializr-page .archives-modal-date { color: #00ff41; font-family: 'Courier New', Courier, monospace; }
.initializr-page .archives-game-link {
  border-color: #3a2800;
  background: #0d0d0d;
  color: #ffb000;
}
.initializr-page .archives-game-name { color: #00ff41; }
.initializr-page .archives-game-label { color: #ffb000; }
.initializr-page .archives-completed-badge {
  background: #0d0d0d;
  border-color: #3a2800;
  color: #00ff41;
}

/* ─── DIMEBAG crosslink button ───────────────────────────── */

.nav-dimebag-btn {
  background: #fff !important;
  border-color: var(--color-border) !important;
}

.nav-dimebag-btn:hover {
  border-color: #0A0A0A !important;
  transform: translateY(-1px);
}

/* Four panes in Mondrian primaries, split by black lines. */
.nav-dimebag-mark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 20px;
  height: 20px;
  background: #0A0A0A;
  padding: 2px;
}

.nav-dimebag-mark > span { display: block; }

.nav-dimebag-q1 { background: #DD0100; }
.nav-dimebag-q2 { background: #FAC901; }
.nav-dimebag-q3 { background: #F7F5F0; }
.nav-dimebag-q4 { background: #0A3A8B; }

@media (max-width: 750px) {
  .nav-dimebag-mark { width: 22px; height: 22px; }
  .nav-crosslinks { gap: 4px; }
}

@media (min-width: 751px) {
  .nav-dimebag-mark { width: 28px; height: 28px; }
}

/* ─── Dimebag-themed nav ─────────────────────────────────── */

/* De Stijl: white ground, thick black rules, no rounded corners. */
.dimebag-nav .sport-mini-card {
  background: #fff;
  border-color: #0A0A0A;
  border-width: 3px;
  border-radius: 0;
  color: #0A0A0A;
}

.dimebag-nav .sport-mini-card:hover { border-color: #DD0100; }

.dimebag-nav .sport-mini-active {
  background: #FAC901;
  border-color: #0A0A0A;
}

.dimebag-nav .sport-mini-name {
  font-family: 'Silkscreen', monospace;
  letter-spacing: 0.1em;
  color: #0A0A0A;
}

/* PLAY carries the Mondrian mark where the other navs carry sport icons. */
.dimebag-play-btn .nav-dimebag-mark { margin-bottom: 2px; }

.dimebag-nav .nav-signin-btn {
  background: #0A3A8B;
  border: 3px solid #0A0A0A;
  border-radius: 0;
  color: #fff;
  font-family: 'Silkscreen', monospace;
}

.dimebag-nav .nav-greeting { color: #0A0A0A; }
.dimebag-nav .nav-hamburger span { background: #0A0A0A; }
/* ─── Homepage & Shared Sport Selector ───────────────────── */

.home-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 40px;
  text-align: center;
}

.sport-selector {
  margin-top: 32px;
}

.sport-selector-prompt {
  font-family: 'Silkscreen', monospace;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 20px;
  text-transform: lowercase;
}

.sport-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sport-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 20px;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s, transform 0.1s;
  max-width: none;
}

.sport-card:hover {
  transform: translateY(-2px);
}

.sport-card-nfl { border-color: #16a34a; border-width: 3px; }
.sport-card-nba { border-color: #f97316; border-width: 3px; }
.sport-card-nhl { border-color: #00BFFF; border-width: 3px; }

.sport-card-nfl:hover { box-shadow: 0 0 0 3px #16a34a; }
.sport-card-nba:hover { box-shadow: 0 0 0 3px #f97316; }
.sport-card-nhl:hover { box-shadow: 0 0 0 3px #00BFFF; }

.sport-card-mlb { border-color: #eab308; border-width: 3px; }

.sport-card-mlb:hover { box-shadow: 0 0 0 3px #eab308; }

.sport-card-icon {
  font-size: 3.5rem;
}

.sport-card-name {
  font-family: 'Silkscreen', monospace;
  font-size: 1.75rem;
  font-weight: 700;
}

.sport-card-desc {
  font-size: 0.75rem;
  color: var(--color-muted);
  text-align: center;
  line-height: 1.4;
}

/* Sport card as button */
button.sport-card {
  cursor: pointer;
  font: inherit;
  border: 2px solid var(--color-border);
}

/* ─── Difficulty Picker Modal ──────────────────────────────── */

.difficulty-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}

.difficulty-modal {
  background: var(--color-card);
  border-radius: 16px;
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 360px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.difficulty-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--color-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
}

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

.difficulty-modal-sport {
  font-family: 'Silkscreen', monospace;
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: 6px;
}

.difficulty-modal-title {
  font-family: 'Silkscreen', monospace;
  font-size: 1rem;
  margin: 0 0 20px;
  color: var(--color-text);
}

.difficulty-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.difficulty-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 10px;
  border: 2px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s, transform 0.1s;
}

.difficulty-option:hover {
  transform: translateX(2px);
}

.diff-name {
  font-family: 'Silkscreen', monospace;
  font-size: 0.85rem;
  text-transform: lowercase;
}

.diff-desc {
  font-size: 0.7rem;
  color: var(--color-muted);
  text-align: right;
  max-width: 60%;
  line-height: 1.3;
}

.diff-easy    { border-color: #16a34a; }
.diff-easy:hover { border-color: #16a34a; background: rgba(22, 163, 74, 0.04); }

.diff-medium  { border-color: #2563eb; }
.diff-medium:hover { border-color: #2563eb; background: rgba(37, 99, 235, 0.04); }

.diff-hard    { border-color: #d97706; }
.diff-hard:hover { border-color: #d97706; background: rgba(217, 119, 6, 0.04); }

.diff-painful { border-color: #dc2626; }
.diff-painful:hover { border-color: #dc2626; background: rgba(220, 38, 38, 0.04); }
/* ─── Difficulty Bar ─────────────────────────────────────── */

.difficulty-bar {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}

.difficulty-tab {
  font-family: 'Silkscreen', monospace;
  font-size: 0.65rem;
  text-transform: lowercase;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border);
  color: var(--color-muted);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.difficulty-tab:hover {
  color: var(--color-text);
  border-color: #9ca3af;
}

.difficulty-tab-active {
  color: var(--color-text);
  border-color: var(--color-text);
  font-weight: 700;
}

/* ─── Game Info Bar / Scoreboard ─────────────────────────── */

:root {
  --scoreboard-accent: var(--color-correct);
}

.game-nba {
  --scoreboard-accent: #f97316;
}

.game-nhl {
  --scoreboard-accent: #00BFFF;
}

.game-mlb {
  --scoreboard-accent: #eab308;
}

.game-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
  background: var(--color-card);
  border-radius: 10px;
  border: 2px solid var(--scoreboard-accent);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.scoreboard-stats {
  display: flex;
  justify-content: stretch;
}

.info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 12px 8px;
  position: relative;
  gap: 4px;
}

.info-item + .info-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  height: 64%;
  width: 1px;
  background: var(--color-border);
}

.info-item .label {
  display: block;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  font-weight: 600;
  font-family: monospace;
  order: 2;
}

.info-item .value {
  font-family: 'Silkscreen', monospace;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  order: 1;
}

.value-time {
  color: var(--color-text);
}

.value-guesses {
  color: var(--color-correct);
}

.value-strikes {
  color: var(--color-wrong);
}

/* ─── Scoreboard Clues Section ────────────────────────────── */

.scoreboard-clues {
  border-top: 1px solid var(--color-border);
}

.scoreboard-clues .clues-panel {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 12px;
  margin: 0;
}

.scoreboard-clues .clue-button {
  background: white;
  border: 2px solid var(--color-clue);
  color: var(--color-clue);
  font-weight: 700;
  font-family: 'Silkscreen', monospace;
}

.scoreboard-clues .clue-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-clue) 8%, white);
  border-color: var(--color-clue);
}

.scoreboard-clues .clue-button--revealed {
  background: var(--color-clue);
  color: white;
  border-color: var(--color-clue);
}

.scoreboard-clues .clue-button--disabled {
  background: white;
  border-color: #d1d5db;
  color: #9ca3af;
  opacity: 0.6;
}

/* ─── Chain Grid ─────────────────────────────────────────── */

.chain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cell-gap);
  position: relative;
  margin-bottom: 20px;
}

/* Base cell */
.chain-cell {
  position: relative;
  background: transparent;
  border-radius: 8px;
  border: var(--cell-border) solid transparent;
  padding: 10px 8px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: visible;
  transition: border-color 0.2s;
}

/* Cell type colors */
.cell-start,
.cell-end {
  border-color: var(--color-start-end);
}

.cell-guess {
  border-color: #9ca3af;
  background: rgba(156, 163, 175, 0.04);
  animation: pulseGuess 2.5s ease-in-out infinite;
}

@keyframes pulseGuess {
  0%, 100% { box-shadow: 0 0 10px 2px rgba(22, 163, 74, 0.5), 0 0 24px 4px rgba(22, 163, 74, 0.25); }
  50%       { box-shadow: 0 0 20px 6px rgba(22, 163, 74, 0.75), 0 0 48px 8px rgba(22, 163, 74, 0.35); }
}

.cell-correct {
  border-color: var(--color-correct);
}

.cell-wrong {
  border-color: var(--color-wrong);
}

.cell-failed {
  border-color: var(--color-wrong);
}

/* Cell content */
.cell-type-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.cell-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  word-break: break-word;
  text-transform: uppercase;
}

.cell-meta {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 3px;
  font-weight: 500;
  border-radius: 3px;
  transition: background-color 1s ease-out;
}

@starting-style {
  .cell-meta {
    background-color: color-mix(in srgb, var(--color-clue) 35%, transparent);
  }
}

.cell-x {
  font-size: 28px;
  color: var(--color-wrong);
  font-weight: 700;
  line-height: 1;
}

/* G box input */
.guess-form {
  width: 100%;
  position: relative;
}

.guess-cell-input {
  width: 100%;
  border: 3px solid rgba(22, 163, 74, 0.7);
  border-radius: 6px;
  background: white;
  text-align: center;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  padding: 7px 6px;
  outline: none;
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.guess-cell-input:focus {
  border-color: var(--color-correct);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.guess-cell-input::placeholder {
  color: #4ade80;
  font-size: 11px;
  font-weight: 400;
}

/* Autocomplete dropdown anchored to guess cell */
.chain-cell .autocomplete-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-height: 240px;
  overflow-y: auto;
  z-index: 200;
}

.chain-cell .autocomplete-results:empty {
  display: none;
}

/* ─── Connectors (::after pseudo-element) ────────────────── */

.chain-cell::after {
  content: none;
}

.chain-cell.connects-right::after,
.chain-cell.connects-left::after,
.chain-cell.connects-down::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 2;
  border-radius: 2px;
}

.chain-cell.connects-right::after {
  top: 50%;
  left: calc(100% + var(--cell-border));
  width: var(--cell-gap);
  height: 3px;
  transform: translateY(-50%);
}

.chain-cell.connects-left::after {
  top: 50%;
  right: calc(100% + var(--cell-border));
  width: var(--cell-gap);
  height: 3px;
  transform: translateY(-50%);
}

.chain-cell.connects-down::after {
  top: calc(100% + var(--cell-border));
  left: 50%;
  width: 3px;
  height: var(--cell-gap);
  transform: translateX(-50%);
}

.chain-cell.link-established::after {
  background: var(--color-correct);
}

.chain-cell.link-pending::after {
  background: #d1d5db;
}

/* ─── Connector Team Logo ────────────────────────────────── */

.link-logo {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}

.chain-cell.connects-right .link-logo {
  top: 50%;
  left: calc(100% + var(--cell-border));
  width: var(--cell-gap);
  transform: translateY(-50%);
}

.chain-cell.connects-left .link-logo {
  top: 50%;
  right: calc(100% + var(--cell-border));
  width: var(--cell-gap);
  transform: translateY(-50%);
}

.chain-cell.connects-down .link-logo {
  top: calc(100% + var(--cell-border));
  left: 50%;
  height: var(--cell-gap);
  transform: translateX(-50%);
}

.connector-logo-img {
  width: 34px;
  height: 34px;
  padding: 2px;
  object-fit: contain;
  border-radius: 50%;
  background: white;
  box-sizing: border-box;
  border: 2.5px solid transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* ─── Clues Panel ────────────────────────────────────────── */

.clues-panel {
  margin: 12px 0;
  background: var(--color-card);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
}

.clue-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.clue-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.clue-button-wrapper form {
  width: 100%;
}

.clue-button {
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clue-button:hover:not(:disabled) {
  background: var(--color-card);
  border-color: var(--color-clue);
}

.clue-button:disabled,
.clue-button--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.clue-button--revealed,
.clue-button--revealed:disabled {
  background: var(--color-clue);
  color: white;
  border-color: var(--color-clue);
  opacity: 1;
  cursor: default;
}

.clue-cost {
  font-size: 10px;
  color: var(--color-wrong);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.clue-revealed-label {
  font-size: 11px;
  color: var(--color-clue);
  font-weight: 600;
  text-align: center;
}

.cell-meta-line {
  display: block;
}

.cell-meta-history-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 5px;
}

.team-history-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 4px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.team-pill-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

.team-pill-years {
  color: #000;
  letter-spacing: 0.01em;
}

.clues-data {
  margin-bottom: 12px;
}

.clues-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.clues-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  font-weight: 600;
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--color-border);
}

.clues-table td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}

.clues-table tr:last-child td {
  border-bottom: none;
}

.clue-player-name {
  font-weight: 600;
}

.clue-team-history {
  font-size: 11px;
  color: var(--color-muted);
}

/* ─── Wrong Guesses Panel ────────────────────────────────── */

.wrong-guesses-section {
  margin-top: 8px;
}

.wrong-guesses-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}

.wrong-guesses-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wrong-guess-row {
  display: flex;
  align-items: center;
  border: 2px solid var(--color-wrong);
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 52px;
  background: transparent;
}

.wrong-guess-side {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wrong-guess-from {
  text-align: left;
  align-items: flex-start;
}

.wrong-guess-to {
  text-align: right;
  align-items: flex-end;
}

.wrong-guess-x {
  flex: 0 0 auto;
  font-size: 22px;
  color: var(--color-wrong);
  font-weight: 700;
  padding: 0 16px;
  line-height: 1;
}

.wrong-guess-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
}

.wrong-guess-meta {
  font-size: 10px;
  color: var(--color-muted);
  margin-top: 2px;
}

/* ─── Game Over Modal ─────────────────────────────────────── */

.game-over-panel {
  background: var(--color-card);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow);
  margin-top: 24px;
  animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.game-over-panel h2 {
  font-family: 'Silkscreen', monospace;
  font-size: 3rem;
  margin: 0 0 16px;
}

.game-over-panel.completed h2 {
  color: var(--color-correct);
}

.game-over-panel h2 .logo-black { color: var(--color-text); }
.game-over-panel h2 .logo-green { color: var(--color-correct); }

.game-over-panel.failed h2 {
  color: var(--color-wrong);
}

.game-over-panel p {
  color: var(--color-muted);
  margin: 0 0 8px;
  font-size: 15px;
}

.game-over-stats {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 8px;
}

.game-over-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid #d1d5db;
  border-radius: 10px;
  padding: 12px 8px;
  flex: 1;
  height: 86px;
}

.game-over-stat .stat-value {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.stat-denom {
  font-size: 10px;
  font-weight: 400;
  color: var(--color-muted);
  margin-left: 1px;
}

.game-over-stat .stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-top: 4px;
}

.scoring-breakdown {
  margin: 16px auto;
  width: fit-content;
  min-width: 160px;
}

.scoring-breakdown-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

.breakdown-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.breakdown-label {
  color: var(--color-muted);
}

.breakdown-value {
  font-weight: 600;
}

.breakdown-value.has-deduction {
  color: var(--color-wrong);
}

.breakdown-value.no-deduction {
  color: var(--color-correct);
}

.game-over-stat .stat-value.score-red     { color: #dc2626; }
.game-over-stat .stat-value.score-orange  { color: #ea0c0c; }
.game-over-stat .stat-value.score-yellow  { color: #ca8a04; }
.game-over-stat .stat-value.score-green   { color: #16a34a; }
.game-over-stat .stat-value.score-fuchsia { color: #bf3294; }

.win-modal-overlay .game-over-panel.score-red     { border: 3px solid #dc2626; }
.win-modal-overlay .game-over-panel.score-orange  { border: 3px solid #ea0c0c; }
.win-modal-overlay .game-over-panel.score-yellow  { border: 3px solid #ca8a04; }
.win-modal-overlay .game-over-panel.score-green   { border: 3px solid #16a34a; }
.win-modal-overlay .game-over-panel.score-fuchsia { border: 3px solid #bf3294; }

.share-button {
  padding: 12px 36px;
  background: var(--color-correct);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
  transition: opacity 0.2s;
  font-family: 'Silkscreen', monospace;
}

.share-button:hover {
  opacity: 0.85;
}

/* ─── How to Play Modal ───────────────────────────────────── */

.how-to-play-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

.how-to-play-panel {
  background: var(--color-card);
  border-radius: 12px;
  padding: 32px 28px;
  max-width: 400px;
  width: 90%;
  position: relative;
  box-shadow: var(--shadow);
}

.how-to-play-panel h2 {
  font-family: 'Silkscreen', monospace;
  font-size: 1.4rem;
  color: var(--color-text);
  margin: 0 0 16px;
  text-align: center;
}

.how-to-play-content p {
  font-size: 14px;
  color: var(--color-text);
  margin: 0 0 14px;
  line-height: 1.5;
  text-align: center;
}

.how-to-play-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.how-to-play-content li {
  font-size: 13px;
  color: var(--color-muted);
  padding: 8px 0 8px 20px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  line-height: 1.4;
}

.how-to-play-content li:last-child {
  border-bottom: none;
}

.how-to-play-content li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-correct);
  font-weight: 700;
}

/* ─── Win Modal ───────────────────────────────────────────── */

.win-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.win-modal-overlay .game-over-panel {
  margin-top: 0;
  max-width: 400px;
  width: 90%;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  padding: 2px 6px;
  font-family: inherit;
}

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

/* ─── How to Play Details (pre-game inline) ──────────────── */

.how-to-play-details {
  margin-top: 28px;
  text-align: left;
}

.how-to-play-summary {
  font-size: 12px;
  color: var(--color-muted);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-align: center;
  list-style: none;
  display: block;
}

.how-to-play-summary::-webkit-details-marker {
  display: none;
}

.how-to-play-summary:hover {
  color: var(--color-text);
}

.how-to-play-details .how-to-play-content {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, #e5e7eb);
}

/* ─── Splash (pre-game) ───────────────────────────────────── */

.splash-panel {
  background: var(--color-card);
  border-radius: 12px;
  padding: 48px 32px;
  text-align: center;
  box-shadow: var(--shadow);
}

.splash-text {
  font-size: 17px;
  color: var(--color-text);
  margin: 0 0 10px;
  line-height: 1.5;
}

.splash-warning {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0 0 28px;
}

.play-button {
  padding: 16px 56px;
  background: var(--color-correct);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s, transform 0.1s;
  letter-spacing: 0.02em;
}

.play-button:hover {
  opacity: 0.85;
}

.play-button:active {
  transform: scale(0.97);
}

/* ─── Autocomplete (shared) ──────────────────────────────── */

.autocomplete-item {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
  font-size: 13px;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background: #eff6ff;
}

.autocomplete-item .player-name {
  font-weight: 600;
  color: var(--color-text);
}

.autocomplete-item .player-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--color-muted);
}

.autocomplete-item .player-team {
  font-weight: 600;
}

.no-results {
  padding: 12px;
  text-align: center;
  color: var(--color-muted);
  font-size: 13px;
  font-style: italic;
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 620px) {
  :root {
    --cell-gap: 28px;
    --cell-border: 8px;
  }

  .connector-logo-img {
    width: 26px;
    height: 26px;
  }

  .grundl-container {
    padding: 16px 12px 32px;
  }

  .cell-name {
    font-size: 15px;
  }

  .cell-meta {
    font-size: 10px;
  }

  .team-history-pill {
    font-size: 8px;
    padding: 2px 6px 2px 3px;
  }

  .team-pill-logo {
    width: 14px;
    height: 14px;
  }

  .cell-type-label {
    font-size: 9px;
  }

  .guess-cell-input {
    font-size: 16px;
    padding: 5px 4px;
  }

  .guess-cell-input::placeholder {
    font-size: 12px;
  }

  .chain-cell {
    padding: 6px 5px;
  }
}

@media (max-width: 780px) {
  .chain-grid {
    grid-template-columns: 1fr;
  }

  .chain-cell {
    grid-column: 1 !important;
    grid-row: auto !important;
    aspect-ratio: auto;
    min-height: 72px;
  }

  .chain-cell.connects-right::after,
  .chain-cell.connects-left::after {
    top: calc(100% + var(--cell-border));
    left: 50%;
    right: auto;
    width: 3px;
    height: var(--cell-gap);
    transform: translateX(-50%);
  }

  .chain-cell.connects-right .link-logo,
  .chain-cell.connects-left .link-logo {
    top: calc(100% + var(--cell-border));
    left: 50%;
    right: auto;
    width: auto;
    height: var(--cell-gap);
    transform: translateX(-50%);
  }

  .connector-logo-img {
    width: 22px;
    height: 22px;
  }

  .chain-cell .autocomplete-results {
    width: 240px;
  }

  .clue-buttons {
    flex-direction: column;
    gap: 6px;
  }

  .clue-button-wrapper {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .clue-button-wrapper form {
    flex: 1;
  }

  .clue-cost {
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
  }
}

@media (max-width: 400px) {
  .game-over-stat .stat-value {
    font-size: 30px;
  }
}
/* ─── DIMEBAG — Mondrian ──────────────────────────────────────
 *
 * De Stijl rules, applied strictly:
 *   only horizontal and vertical lines, all the same thick black
 *   only red / blue / yellow, plus black, white and grey
 *   no gradients, no shadows, no rounded corners, no diagonals
 *   colour is the accent; most of the surface stays white
 */

:root {
  --db-red:    #DD0100;
  --db-blue:   #0A3A8B;
  --db-yellow: #FAC901;
  --db-black:  #0A0A0A;
  --db-white:  #F7F5F0;
  /* Not a De Stijl colour. Reserved for one job — marking a row the player
     actually earned — so it never competes with the red/blue/yellow planes. */
  --db-green:  #E4F2DE;
  /* Saturated enough to read as a flash against the blue counter; the faint
     --db-green above is for the steady state of an earned row. */
  --db-green-flash: #28A745;
  --db-line:   8px;
  --db-line-thin: 5px;
}

.dimebag-body {
  background: var(--db-white);
}

.dimebag {
  max-width: 820px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  font-family: 'Silkscreen', 'Courier New', monospace;
  color: var(--db-black);
}

/* Every block sits inside the same heavy black frame. */
.db-frame {
  border: var(--db-line) solid var(--db-black);
  background: #fff;
  margin: 0 0 calc(var(--db-line) * -1) 0; /* frames share one line */
}

.db-frame + .db-frame { margin-top: 0; }

/* ─── Header composition ──────────────────────────────────── */

.db-header-grid {
  display: grid;
  grid-template-columns: 1.1fr 2.6fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "brand prompt counter"
    "brand prompt strikes";
}

.db-cell {
  border-right: var(--db-line) solid var(--db-black);
  border-bottom: var(--db-line) solid var(--db-black);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.db-cell--red    { background: var(--db-red);    color: #fff; }
.db-cell--blue   { background: var(--db-blue);   color: #fff; }
.db-cell--yellow { background: var(--db-yellow); color: var(--db-black); }

.db-brand   { grid-area: brand;   border-bottom: none; }
.db-prompt  { grid-area: prompt;  border-bottom: none; }
.db-counter { grid-area: counter; border-right: none; }
.db-strikes { grid-area: strikes; border-right: none; border-bottom: none; }

.db-brand-text {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.04em;
}

.db-prompt-label {
  margin: 0;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: #555;
}

.db-target {
  margin: 6px 0;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.db-counter-num { font-size: 2rem; font-weight: 700; line-height: 1; }
.db-counter-den { font-size: 0.7rem; letter-spacing: 0.1em; opacity: 0.85; }

.db-strikes-label { font-size: 0.55rem; letter-spacing: 0.18em; }

/* Five squares, spent ones filled black. Reads at a glance and stays De Stijl
   — no icons, no diagonals. */
.db-strikes-pips {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.db-pip {
  width: 12px;
  height: 12px;
  border: 3px solid var(--db-black);
  background: #fff;
}

.db-pip[data-spent="true"] { background: var(--db-red); }

/* ─── Hit / miss flash ───────────────────────────────────── */

/* Confirmation lands on the box that changed — the counter for a hit, the
   strikes for a miss — so the eye is already where the new number is. Drawn
   as an inset ring rather than a background swap: it needs no knowledge of
   the cell's own colour and can't wash out the numerals. */
@keyframes db-flash {
  0%   { box-shadow: inset 0 0 0 0 var(--db-flash-color); }
  18%  { box-shadow: inset 0 0 0 var(--db-line) var(--db-flash-color); }
  100% { box-shadow: inset 0 0 0 0 var(--db-flash-color); }
}

.db-flash--hit,
.db-flash--miss { animation: db-flash 650ms ease-out; }

.db-flash--hit  { --db-flash-color: var(--db-green-flash); }
.db-flash--miss { --db-flash-color: var(--db-red); }

/* Someone who doesn't want motion still gets the number change and the
   feedback line, which carry the same information. */
@media (prefers-reduced-motion: reduce) {
  .db-flash--hit,
  .db-flash--miss { animation: none; }
}

/* ─── Guess bar ───────────────────────────────────────────── */

.db-guesswrap { position: relative; }

.db-guessbar {
  display: flex;
  align-items: stretch;
  position: relative;
}

/* ─── Typeahead ──────────────────────────────────────────── */

/* Opens at three characters. Overrides the shared .autocomplete-results look,
   which is rounded and shadowed and would break the grid. */
.db-suggest {
  position: absolute;
  top: calc(100% + var(--db-line));
  left: 0;
  right: 0;
  z-index: 40;
  background: #fff;
  border: var(--db-line) solid var(--db-black);
  border-radius: 0;
  box-shadow: none;
  max-height: 280px;
  overflow-y: auto;
}

.db-suggest:empty { display: none; }

.db-suggest .autocomplete-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: var(--db-line-thin) solid var(--db-black);
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
}

.db-suggest .autocomplete-item:last-child { border-bottom: none; }

.db-suggest .autocomplete-item.selected,
.db-suggest .autocomplete-item:hover { background: var(--db-yellow); }

.db-suggest .player-name {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.db-suggest .player-meta {
  display: flex;
  gap: 8px;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: #666;
  white-space: nowrap;
}

.db-suggest .no-results {
  padding: 11px 14px;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: #666;
}

.db-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-right: var(--db-line) solid var(--db-black);
  padding: 16px 14px;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.08em;
  background: #fff;
  color: var(--db-black);
}

.db-input::placeholder { color: #9b9b9b; letter-spacing: 0.14em; }
.db-input:focus { outline: none; background: var(--db-yellow); }

.db-submit {
  border: none;
  background: var(--db-blue);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 0 26px;
  cursor: pointer;
}

.db-submit:hover  { background: var(--db-red); }
.db-submit:active { background: var(--db-black); }

/* ─── Feedback line ──────────────────────────────────────── */

.db-feedback {
  min-height: 1.4em;
  margin: 14px 0 10px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-align: center;
  color: #555;
}

.db-feedback[data-state="hit"]  { color: var(--db-blue); font-weight: 700; }
.db-feedback[data-state="miss"] { color: var(--db-red);  font-weight: 700; }
.db-feedback[data-state="dupe"] { color: #777; }

/* ─── Status bar: feedback + give up ─────────────────────── */

.db-statusbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 10px;
}

.db-statusbar .db-feedback {
  flex: 1;
  margin: 0;
  text-align: left;
}

.db-giveup {
  flex-shrink: 0;
  border: var(--db-line-thin) solid var(--db-black);
  background: #fff;
  color: var(--db-black);
  font-family: inherit;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  padding: 7px 12px;
  cursor: pointer;
}

.db-giveup:hover { background: var(--db-red); color: #fff; }
.db-giveup[hidden] { display: none; }

.db-input:disabled,
.db-submit:disabled {
  background: var(--db-white);
  color: #999;
  cursor: not-allowed;
}

/* ─── Result banner ──────────────────────────────────────── */

/* There is no score, so this says only how the game ended. */
.db-result {
  display: flex;
  justify-content: center;
  margin-bottom: var(--db-line);
  padding: 14px 12px;
  background: var(--db-white);
}

.db-result[hidden] { display: none; }
.db-result[data-won="true"] { background: var(--db-yellow); }

.db-result-text {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
}

/* ─── Board ──────────────────────────────────────────────── */

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

/* Four columns — rank | assists | logos | name — and one ROW PER CANDIDATE
   LINE. Rank, assists and the colour plane span every row; each candidate's
   logos and name are two cells of the same row, which is what keeps them level
   when a line's logos wrap onto a second line. The row count has to be an
   explicit template (not implicit rows) or `grid-row: 1 / -1` would resolve to
   a single row and the spans would collapse. */
.db-slot {
  display: grid;
  grid-template-columns: 56px 86px 1fr minmax(38%, 2fr);
  grid-template-rows: repeat(var(--db-slot-lines, 1), minmax(54px, auto));
  align-items: stretch;
  position: relative;
  border-bottom: var(--db-line-thin) solid var(--db-black);
}

.db-slot:last-child { border-bottom: none; }

.db-rank,
.db-assists,
.db-logo-line {
  border-right: var(--db-line-thin) solid var(--db-black);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.db-rank {
  grid-column: 1;
  grid-row: 1 / -1;
  font-size: 1.3rem;
  font-weight: 700;
}

.db-assists {
  grid-column: 2;
  grid-row: 1 / -1;
  flex-direction: column;
  gap: 1px;
  background: var(--db-white);
}

.db-assists-num   { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.db-assists-label { font-size: 0.5rem; letter-spacing: 0.2em; color: #666; }

/* The composition's colour lives in the two number blocks on the left, in the
   irregular PLANE_COLORS rhythm. The answer slots stay white throughout, so
   the board reads as one field with a coloured left edge rather than ten
   coloured bars. */
.db-slot--red    .db-rank, .db-slot--red    .db-assists { background: var(--db-red); }
.db-slot--blue   .db-rank, .db-slot--blue   .db-assists { background: var(--db-blue); }
.db-slot--yellow .db-rank, .db-slot--yellow .db-assists { background: var(--db-yellow); }

/* Red and blue need light type; yellow keeps black. */
.db-slot--red  .db-rank, .db-slot--red  .db-assists,
.db-slot--blue .db-rank, .db-slot--blue .db-assists { color: #fff; }

.db-slot--red  .db-assists-label,
.db-slot--blue .db-assists-label { color: rgba(255, 255, 255, 0.75); }

/* One line per candidate. A normal row has a single line and looks exactly as
   it did before; a boundary tie gets one per tied player, divided by the same
   black rule as everything else. Logos may wrap inside their own line — the
   grid row grows to fit, taking the name cell with it. */
.db-logo-line {
  grid-column: 3;
  flex-wrap: wrap;
  gap: 7px;
  padding: 6px 10px;
}

.db-logo-line--ruled { border-bottom: var(--db-line-thin) solid var(--db-black); }

.db-logo { display: inline-flex; }
.db-logo-img { display: block; }

/* Each name sits in the same grid row as its own logos. No divider here — the
   black rule would cut the colour plane in half while the row is covered. */
.db-name-line {
  grid-column: 4;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A covered line hides its text with `color`, never `opacity` — the colour
   plane is this element's own background now, and opacity would take it with
   the text. */
.db-name-line[data-state="hidden"] { color: transparent; }

/* A line the player earned reads as a normal answer; one merely revealed at
   game over reads red and lighter, so a finished board never looks perfect. */
.db-name-line[data-state="revealed"] {
  color: var(--db-red);
  font-weight: 400;
  font-size: 0.8rem;
}

/* Positioned out of the grid flow: a grid-placed tag would claim a cell in the
   name column and displace a line. */
.db-anytag {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.45rem;
  letter-spacing: 0.16em;
  padding: 3px 5px;
  border: 2px solid var(--db-black);
  background: #fff;
  color: var(--db-black);
  white-space: nowrap;
}

/* Revealed: the plane drops away, the names take its place. */
.db-slot[data-filled="true"] .db-anytag { display: none; }

/* A row the player earned. Faint, so the black lines and the colour planes
   still carry the composition — and set on the row rather than the name cell
   so the whole slot reads as won. */
/* Set on the cells, not just the row: .db-logo-line paints its own white, and
   a taller line (wrapped logos) would otherwise leave the green short. */
.db-slot[data-correct="true"],
.db-slot[data-correct="true"] .db-logo-line,
.db-slot[data-correct="true"] .db-name-line { background: var(--db-green); }



/* ─── Misses ─────────────────────────────────────────────── */

.db-misses {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin: var(--db-line) 0;
  background: #fff;
}

/* Frames normally overlap by one line width so neighbours share a single black
   rule (`.db-frame + .db-frame`, which also zeroes the top margin). The misses
   band opts out of that: it sits apart from the board with its own border and
   an equal gap above and below. Needs the same specificity as that rule, and
   to come after it. */
.db-frame + .db-misses { margin-top: var(--db-line); }

.db-misses[hidden] { display: none; }

.db-misses-label {
  margin: 0;
  padding-top: 4px;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--db-red);
  white-space: nowrap;
}

.db-misses-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.db-miss {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 7px;
  border: 3px solid var(--db-red);
  color: var(--db-red);
}

/* ─── Coverage note ──────────────────────────────────────── */

.db-coverage {
  margin-top: var(--db-line);
  background: var(--db-white);
  padding: 14px 16px;
}

.db-coverage p {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: #444;
}

.db-coverage strong { color: var(--db-black); }

/* ─── Empty state ────────────────────────────────────────── */

.db-empty { padding: 40px 20px; text-align: center; }
.db-title { font-size: 2rem; margin: 0 0 10px; letter-spacing: 0.06em; }
.db-empty-msg { font-size: 0.7rem; letter-spacing: 0.12em; color: #555; }

/* ─── Narrow screens ─────────────────────────────────────── */

@media (max-width: 620px) {
  :root { --db-line: 6px; --db-line-thin: 4px; }

  .dimebag { padding: 12px 10px 40px; }

  .db-header-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand   prompt"
      "counter strikes";
  }

  .db-brand   { border-bottom: var(--db-line) solid var(--db-black); }
  .db-prompt  { border-right: none; border-bottom: var(--db-line) solid var(--db-black); }
  .db-counter { border-right: var(--db-line) solid var(--db-black); border-bottom: none; }

  .db-target { font-size: 1.25rem; }
  .db-brand-text { font-size: 1.15rem; }

  /* No room for logos and names side by side, so each name drops directly
     beneath its own logos — two grid rows per candidate instead of two
     columns. The pairing survives; only the axis changes. */
  .db-slot {
    grid-template-columns: 38px 62px 1fr;
    grid-template-rows: repeat(calc(var(--db-slot-lines, 1) * 2), auto);
  }

  /* Centred vertically it would land on a logo line, since the name rows are
     interleaved here rather than in a column of their own. The last row is a
     name row, so the tag sits in it. */
  .db-anytag {
    top: auto;
    bottom: 10px;
    transform: none;
  }

  .db-logo-line { border-right: none; }

  /* The rule divides CANDIDATES, and a candidate here is a logo row followed
     by its name row. So it goes above every logo line except the first — put
     on the name lines instead it would group each name with the NEXT
     candidate's logos, which is exactly backwards. */
  .db-logo-line--ruled { border-bottom: none; }
  .db-logo-line:not([data-line="0"]) {
    border-top: var(--db-line-thin) solid var(--db-black);
  }

  .db-name-line {
    grid-column: 3;
    /* Centred, to sit under its own centred row of logos. */
    justify-content: center;
    text-align: center;
    min-height: 40px;
    padding: 8px 14px;
  }

  /* A single-line row still needs the rule between its logos and its name. */
  .db-slot:not(.db-slot--split) .db-name-line {
    border-top: var(--db-line-thin) solid var(--db-black);
  }


  .db-submit { padding: 0 14px; font-size: 0.7rem; }
}

/* ─── Dimebag secondary pages (record, archive) ───────────── */

.db-page { padding-bottom: 60px; }

.db-page-head {
  display: grid;
  grid-template-columns: 1.1fr 3fr;
  align-items: stretch;
  margin-bottom: var(--db-line);
}

.db-page-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: var(--db-line) solid var(--db-black);
  padding: 18px 10px;
}

.db-page-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 14px;
  background: #fff;
}

/* ─── Stat blocks ────────────────────────────────────────── */

.db-statgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--db-line);
  background: #fff;
}

.db-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 20px 8px;
  border-right: var(--db-line-thin) solid var(--db-black);
}

.db-stat:last-child { border-right: none; }

.db-stat--red    { background: var(--db-red);    color: #fff; }
.db-stat--blue   { background: var(--db-blue);   color: #fff; }
.db-stat--yellow { background: var(--db-yellow); }

.db-stat-num { font-size: 1.7rem; font-weight: 700; line-height: 1; }

.db-stat-key {
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-align: center;
  color: #666;
}

.db-stat--red .db-stat-key,
.db-stat--blue .db-stat-key { color: rgba(255, 255, 255, 0.78); }
.db-stat--yellow .db-stat-key { color: var(--db-black); }

/* ─── Recent games ───────────────────────────────────────── */

.db-recent { background: #fff; margin-bottom: var(--db-line); }

.db-recent-label {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  border-bottom: var(--db-line-thin) solid var(--db-black);
}

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

.db-recent-row {
  display: grid;
  grid-template-columns: 1fr 56px 1fr 72px;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: var(--db-line-thin) solid var(--db-black);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
}

.db-recent-row:last-child { border-bottom: none; }
.db-recent-row[data-won="true"] { background: var(--db-green); }

.db-recent-date a { color: var(--db-black); font-weight: 700; text-decoration: none; }
.db-recent-date a:hover { text-decoration: underline; }
.db-recent-found  { font-weight: 700; }
.db-recent-misses { color: #666; }
.db-recent-mark   { text-align: right; font-weight: 700; letter-spacing: 0.14em; }
.db-recent-row[data-won="false"] .db-recent-mark { color: var(--db-red); }

/* ─── Archive ────────────────────────────────────────────── */

.db-monthbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin-bottom: var(--db-line);
  background: #fff;
}

.db-month-name { margin: 0; font-size: 0.85rem; letter-spacing: 0.16em; }

.db-month-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--db-line-thin) solid var(--db-black);
  background: #fff;
  color: var(--db-black);
  text-decoration: none;
  font-size: 0.7rem;
}

.db-month-btn:hover { background: var(--db-yellow); }
.db-month-btn--off { opacity: 0.25; }

.db-archive-list { background: #fff; }

/* Overrides the board's 4-column slot grid — an archive row is a single link. */
.db-arc-row {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
}

.db-arc-link {
  display: grid;
  grid-template-columns: 52px 52px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px;
  color: var(--db-black);
  text-decoration: none;
}

.db-arc-day   { font-size: 1.4rem; font-weight: 700; text-align: center; }
.db-arc-month { font-size: 0.55rem; letter-spacing: 0.18em; color: #666; }

.db-arc-target {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-arc-state {
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  padding: 5px 8px;
  border: 3px solid var(--db-black);
  white-space: nowrap;
}

.db-arc-row[data-played="true"] { background: var(--db-green); }
.db-arc-row[data-played="true"] .db-arc-state { border-color: #2f7a3f; color: #2f7a3f; }
.db-arc-row:hover .db-arc-state { background: var(--db-yellow); }

/* The row's colour block sits on the day number, matching the board. */
.db-arc-row.db-slot--red    .db-arc-day { background: var(--db-red);    color: #fff; }
.db-arc-row.db-slot--blue   .db-arc-day { background: var(--db-blue);   color: #fff; }
.db-arc-row.db-slot--yellow .db-arc-day { background: var(--db-yellow); }

/* Date stamp on an archived board. */
.db-archive-tag {
  margin: 4px 0 0;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: var(--db-red);
}

@media (max-width: 620px) {
  .db-statgrid { grid-template-columns: repeat(2, 1fr); }
  .db-stat:nth-child(2) { border-right: none; }
  .db-stat:nth-child(-n+2) { border-bottom: var(--db-line-thin) solid var(--db-black); }
  .db-stat-num { font-size: 1.4rem; }

  .db-recent-row { grid-template-columns: 1fr 48px 60px; grid-template-rows: auto auto; }
  .db-recent-mark { grid-column: 3; grid-row: 1; }
  .db-recent-misses { grid-column: 1 / -1; grid-row: 2; }

  .db-arc-link { grid-template-columns: 44px 1fr auto; }
  .db-arc-month { display: none; }
}

/* ─── Modals ─────────────────────────────────────────────── */

/* Replaces window.confirm, which drew browser chrome through the middle of a
   De Stijl board — and is refused outright in some embedded viewers. */
.db-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 10, 10, 0.55);
}

.db-modal[hidden] { display: none; }

.db-modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow-y: auto;
  background: #fff;
  border: var(--db-line) solid var(--db-black);
  padding: 22px 20px 18px;
}

.db-modal-box--confirm { max-width: 400px; }

/* A win earns the yellow plane; anything else stays white. */
.db-modal-box--over[data-won="true"] { border-color: var(--db-black); }
.db-modal-box--over[data-won="true"] .db-modal-title {
  background: var(--db-yellow);
  margin: -22px -20px 14px;
  padding: 16px 20px;
  border-bottom: var(--db-line) solid var(--db-black);
}

.db-modal-title {
  margin: 0 0 10px;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
}

.db-modal-copy {
  margin: 0 0 16px;
  font-size: 0.68rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: #444;
}

.db-modal-actions {
  display: flex;
  gap: var(--db-line-thin);
  margin-top: 16px;
}

.db-btn {
  flex: 1;
  border: var(--db-line-thin) solid var(--db-black);
  background: #fff;
  color: var(--db-black);
  font-family: inherit;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  padding: 13px 10px;
  cursor: pointer;
}

.db-btn:hover { background: var(--db-yellow); }
.db-btn--red { background: var(--db-red); color: #fff; }
.db-btn--red:hover { background: var(--db-black); color: #fff; }

/* Confetti sits behind the box so the text stays readable. */
.db-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ─── Result breakdown ───────────────────────────────────── */

.db-results-head {
  margin: 0 0 8px;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: #666;
}

.db-results {
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--db-line-thin) solid var(--db-black);
}

/* Every track is a fixed width. An `auto` assists column sized itself to its
   own text, so a two-digit total ("84 AST") made that column narrower, widened
   the names column beside it, and pushed that row's bar out of line with the
   rest. The widest label in the data is "1847 AST". */
.db-result-row {
  display: grid;
  grid-template-columns: 26px 1fr 62px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 3px solid var(--db-black);
}

.db-result-row:last-child { border-bottom: none; }

.db-result-rank { font-size: 0.8rem; font-weight: 700; text-align: center; }
.db-result-assists {
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  color: #666;
  white-space: nowrap;
  text-align: right;
}

.db-result-names { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.db-result-player {
  display: grid;
  grid-template-columns: 1fr 58px 36px;
  gap: 8px;
  align-items: center;
}

.db-result-name {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--db-red);
}

/* Black for one the reader named, red for one they missed — the same
   distinction the board itself draws. */
.db-result-player[data-got="true"] .db-result-name { color: var(--db-black); font-weight: 700; }

/* How often everyone else named this player. */
.db-result-bar {
  display: block;
  height: 9px;
  border: 2px solid var(--db-black);
  background:
    linear-gradient(to right, var(--db-blue) var(--db-pct, 0%), #fff var(--db-pct, 0%));
}

.db-result-player[data-got="true"] .db-result-bar {
  background:
    linear-gradient(to right, var(--db-green-flash) var(--db-pct, 0%), #fff var(--db-pct, 0%));
}

.db-result-pct {
  font-size: 0.55rem;
  font-weight: 700;
  text-align: right;
  letter-spacing: 0.04em;
}

.db-resultsbtn { border-color: var(--db-black); }

@media (max-width: 620px) {
  .db-modal { padding: 12px; }
  .db-modal-box { padding: 18px 14px 14px; }
  /* The assists label drops below the names here, so it needs no column of
     its own — but it must not reintroduce a variable-width track. */
  .db-result-row { grid-template-columns: 22px 1fr; }
  .db-result-assists { grid-column: 2; font-size: 0.45rem; text-align: left; }
  .db-result-player { grid-template-columns: 1fr 44px 32px; }
}
/* ─── NBA Game Theme (orange) ────────────────────────────── */

.game-nba {
  --color-correct: #f97316;
  --color-clue: #06b6d4;
  --color-wrong: #9ca3af;
}

.game-nba .cell-guess {
  animation: pulseGuessNba 2.5s ease-in-out infinite;
}

@keyframes pulseGuessNba {
  0%, 100% { box-shadow: 0 2px 12px rgba(249, 115, 22, 0.45); }
  50%       { box-shadow: 0 2px 28px rgba(249, 115, 22, 0.75); }
}

.game-nba .guess-cell-input {
  border-color: rgba(249, 115, 22, 0.45);
}

.game-nba .guess-cell-input:focus {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

.game-nba .guess-cell-input::placeholder {
  color: #fb923c;
}

/* ─── NHL Game Theme (electric blue) ─────────────────────── */

.game-nhl {
  --color-correct: #00BFFF;
  --color-clue: #f97316;
  --color-wrong: #9ca3af;
}

.game-nhl .cell-guess {
  animation: pulseGuessNhl 2.5s ease-in-out infinite;
}

@keyframes pulseGuessNhl {
  0%, 100% { box-shadow: 0 2px 12px rgba(0, 191, 255, 0.45); }
  50%       { box-shadow: 0 2px 28px rgba(0, 191, 255, 0.75); }
}

.game-nhl .guess-cell-input {
  border-color: rgba(0, 191, 255, 0.45);
}

.game-nhl .guess-cell-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.15);
}

.game-nhl .guess-cell-input::placeholder {
  color: #38bdf8;
}

/* ─── MLB Game Theme (yellow) ─────────────────────────────── */

.game-mlb {
  --color-correct: #eab308;
  --color-clue: #f97316;
  --color-wrong: #9ca3af;
}

.game-mlb .cell-guess {
  animation: pulseGuessMlb 2.5s ease-in-out infinite;
}

@keyframes pulseGuessMlb {
  0%, 100% { box-shadow: 0 2px 12px rgba(234, 179, 8, 0.45); }
  50%       { box-shadow: 0 2px 28px rgba(234, 179, 8, 0.75); }
}

.game-mlb .guess-cell-input {
  border-color: rgba(234, 179, 8, 0.45);
}

.game-mlb .guess-cell-input:focus {
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
}

.game-mlb .guess-cell-input::placeholder {
  color: #ca8a04;
}

/* ─── Admin Sport Badges ─────────────────────────────────── */

.badge-nfl { background: #1a3a6e; color: #fff; }
.badge-nba { background: #c9243f; color: #fff; }
.badge-nhl { background: #0369a1; color: #fff; }
.badge-mlb { background: #854d0e; color: #fff; }
/* ─── Auth Pages (sign in / sign up) ─────────────────────── */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: var(--color-bg);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 40px 36px 32px;
  box-shadow: var(--shadow);
}

.auth-logo {
  display: block;
  text-align: center;
  font-family: 'Silkscreen', monospace;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  margin-bottom: 6px;
}

.auth-tagline {
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
  margin: 0 0 28px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.auth-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text);
  background: #fff;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.auth-input:focus {
  outline: none;
  border-color: var(--color-correct);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.auth-hint {
  font-size: 11px;
  color: var(--color-muted);
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.auth-checkbox {
  width: 15px;
  height: 15px;
  accent-color: var(--color-correct);
  cursor: pointer;
}

.auth-remember-label {
  font-size: 13px;
  color: var(--color-muted);
  cursor: pointer;
}

.auth-submit {
  width: 100%;
  padding: 12px;
  margin-top: 4px;
  background: var(--color-correct);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Silkscreen', monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.auth-submit--mono {
  font-family: monospace;
  letter-spacing: 0;
}

.auth-submit:hover {
  background: #15803d;
}

.auth-submit:active {
  transform: scale(0.98);
}

.auth-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 13px;
}

.auth-links a {
  color: var(--color-muted);
  text-decoration: none;
}

.auth-links a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.auth-links-sep {
  color: var(--color-border);
}

.auth-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px 14px;
}

.auth-error-item {
  font-size: 13px;
  color: #991b1b;
  margin: 0;
}

.auth-error-item + .auth-error-item {
  margin-top: 4px;
}

/* ─── Settings Page ──────────────────────────────────────── */

.auth-notice {
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #065f46;
  margin-bottom: 4px;
  text-align: center;
}
/* ─── Leaderboard Page ───────────────────────────────────── */

.leaderboard-page {
  max-width: 600px;
}

.leaderboard-nfl {
  --leaderboard-accent: var(--color-correct);
}

.leaderboard-nba {
  --leaderboard-accent: #f97316;
  --color-correct: #f97316;
}

.leaderboard-nhl {
  --leaderboard-accent: #00BFFF;
  --color-correct: #00BFFF;
}

.leaderboard-mlb {
  --leaderboard-accent: #eab308;
  --color-correct: #eab308;
}

.leaderboard-tab-all.difficulty-tab-active  { color: #7c3aed; border-color: #7c3aed; }
.leaderboard-tab-nfl.difficulty-tab-active  { color: #16a34a; border-color: #16a34a; }
.leaderboard-tab-nba.difficulty-tab-active  { color: #f97316; border-color: #f97316; }
.leaderboard-tab-nhl.difficulty-tab-active  { color: #00BFFF; border-color: #00BFFF; }
.leaderboard-tab-mlb.difficulty-tab-active  { color: #eab308; border-color: #eab308; }

.leaderboard-all {
  --leaderboard-accent: #7c3aed;
}

.leaderboard-sport-emoji {
  font-size: 0.85em;
  margin-right: 3px;
  vertical-align: middle;
}

/* "Not played" state — single wider sport card */
.leaderboard-page .sport-cards {
  justify-content: center;
}

.leaderboard-page .sport-card {
  max-width: 260px;
  padding: 28px 24px;
}

.leaderboard-page .sport-card-name {
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Username missing banner */
.leaderboard-username-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: #78350f;
  margin-bottom: 20px;
  text-align: center;
}

.leaderboard-username-banner a {
  color: #78350f;
  font-weight: 600;
  text-decoration: underline;
}

/* Empty state */
.leaderboard-empty {
  text-align: center;
  color: var(--color-muted);
  font-size: 14px;
  padding: 48px 0;
}

/* Table */
.leaderboard-container {
  background: var(--color-card);
  border-radius: 12px;
  border: 4px solid var(--leaderboard-accent, var(--color-correct));
  overflow: hidden;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.leaderboard-th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  font-weight: 600;
  padding: 12px 12px 12px 0;
  border-bottom: 3px solid var(--leaderboard-accent, var(--color-correct));
  background: var(--color-bg);
  white-space: nowrap;
}

.th-compact { display: none; }
.th-compact-chain { display: none; }
.th-strikes-icon { color: var(--color-wrong); font-weight: 700; }

@media (max-width: 500px) {
  .th-full { display: none; }
  .th-compact { display: inline; font-size: 1rem; }
}

@media (max-width: 400px) {
  .th-full-chain { display: none; }
  .th-compact-chain { display: inline; font-size: 1rem; }
}

.leaderboard-th:first-child,
.leaderboard-td:first-child {
  padding-left: 16px;
}

.leaderboard-th:last-child,
.leaderboard-td:last-child {
  padding-right: 16px;
}

.leaderboard-row {
  border-bottom: 2px solid var(--color-border);
  transition: background 0.1s;
}

.leaderboard-row:last-child {
  border-bottom: none;
}

.leaderboard-row:hover {
  background: var(--color-bg);
}

.leaderboard-row--me {
  background: color-mix(in srgb, var(--leaderboard-accent, var(--color-correct)) 10%, transparent);
}

.leaderboard-row--me:hover {
  background: color-mix(in srgb, var(--leaderboard-accent, var(--color-correct)) 16%, transparent);
}

.leaderboard-td {
  padding: 14px 12px 14px 0;
  color: var(--color-text);
  vertical-align: middle;
  text-align: left;
  font-family: 'Silkscreen', monospace;
  font-size: 12px;
}

.leaderboard-td.leaderboard-username {
  font-family: monospace;
  font-size: 14px;
  font-weight: 600;
}

.leaderboard-rank-cell {
  font-family: 'Silkscreen', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-muted);
  width: 36px;
}

/* Gold / silver / bronze for top 3 */
.leaderboard-row:nth-child(1) .leaderboard-rank-cell { color: #d2c104; }
.leaderboard-row:nth-child(2) .leaderboard-rank-cell { color: #9ca3af; }
.leaderboard-row:nth-child(3) .leaderboard-rank-cell { color: #b45309; }

.leaderboard-score {
  font-family: 'Silkscreen', monospace;
  font-size: 14px;
  font-weight: 700;
}

.leaderboard-score.score-red     { color: #dc2626; }
.leaderboard-score.score-orange  { color: #ea0c0c; }
.leaderboard-score.score-yellow  { color: #ca8a04; }
.leaderboard-score.score-green   { color: #16a34a; }
.leaderboard-score.score-fuchsia { color: #bf3294; }

/* Back link */
.leaderboard-back {
  margin-top: 20px;
  text-align: center;
}

.leaderboard-back-link {
  font-size: 13px;
  color: var(--color-muted);
  text-decoration: none;
}

.leaderboard-back-link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* ─── Leaderboard elements in win modal ──────────────────── */

.leaderboard-rank-prompt {
  font-size: 14px;
  color: var(--color-muted);
  margin: 14px 0 4px;
  line-height: 1.4;
}

.leaderboard-rank-prompt strong {
  color: var(--color-correct);
}

.leaderboard-rank-prompt a {
  color: var(--color-correct);
  text-decoration: underline;
}

.win-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 8px 0;
}

.win-modal-buttons-row {
  display: flex;
  gap: 10px;
}

.win-modal-buttons-row .share-button {
  margin-top: 0;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}

.leaderboard-button {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 36px;
  background: var(--color-clue);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Silkscreen', monospace;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  cursor: pointer;
}

.leaderboard-button:hover {
  opacity: 0.85;
}

.archives-button {
  width: 100%;
  padding: 12px 36px;
  background: #7c3aed;
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Silkscreen', monospace;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  cursor: pointer;
  box-sizing: border-box;
}

.archives-button:hover {
  opacity: 0.85;
}

@media (max-width: 500px) {
  .win-modal-buttons-row .share-button,
  .win-modal-buttons-row .leaderboard-button {
    width: 100%;
    text-align: center;
  }
}
/* ─── Archives / Calendar ────────────────────────────────── */

.archives-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* ── Month Navigation ── */

.archives-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}

.archives-month-title {
  font-family: 'Silkscreen', monospace;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.05em;
  margin: 0;
  flex: 1;
  text-align: center;
}

.archives-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-card);
  color: var(--color-text);
  text-decoration: none;
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  user-select: none;
}

.archives-nav-btn:not(.archives-nav-btn-disabled):hover {
  border-color: #bf3294;
  transform: translateY(-1px);
}

.archives-nav-btn-disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* ── Calendar Grid ── */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day-header {
  font-family: 'Silkscreen', monospace;
  font-size: 0.5rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-muted);
  padding: 4px 0 8px;
  letter-spacing: 0.08em;
}

@media (min-width: 501px) {
  .calendar-day-header {
    font-size: 0.65rem;
  }
}

.calendar-day {
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 3px 4px;
  background: var(--color-card);
  min-height: 52px;
  box-sizing: border-box;
}

.calendar-day-empty {
  border-color: transparent;
  background: transparent;
}

.calendar-day-future {
  opacity: 0.35;
}

.calendar-day-today .calendar-day-num {
  color: #16a34a;
}

.calendar-day-has-games {
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.calendar-day-has-games:hover {
  border-color: #bf3294;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(191, 50, 148, 0.15);
}

.calendar-day-num {
  font-family: 'Silkscreen', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}

@media (min-width: 501px) {
  .calendar-day {
    min-height: 64px;
    padding: 7px 4px 5px;
    border-radius: 10px;
  }
  .calendar-day-num {
    font-size: 0.75rem;
    margin-bottom: 6px;
  }
}

/* ── Game-type indicators inside day cells ── */

.calendar-day-indicators {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.calendar-day-indicator {
  font-family: 'Silkscreen', monospace;
  font-size: 0.38rem;
  font-weight: 700;
  text-align: center;
  padding: 2px 3px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  line-height: 1.3;
  border: 1px solid transparent;
}

@media (min-width: 501px) {
  .calendar-day-indicator {
    font-size: 0.48rem;
    padding: 2px 4px;
  }
}

.cal-nfl {
  background: #dcfce7;
  color: #16a34a;
  border-color: #16a34a;
}

.cal-nba {
  background: #ffedd5;
  color: #f97316;
  border-color: #f97316;
}

.cal-nhl {
  background: #e0f7ff;
  color: #0284c7;
  border-color: #00BFFF;
}

.cal-mlb {
  background: #fefce8;
  color: #a16207;
  border-color: #eab308;
}

.cal-completed {
  opacity: 0.45;
}

/* ── Day Modal ── */

.archives-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.archives-modal {
  background: var(--color-card);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 360px;
  width: 90%;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  animation: fadeInUp 0.3s ease-out;
}

.archives-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
  padding: 0 4px;
  transition: color 0.1s;
}

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

.archives-modal-date {
  font-family: 'Silkscreen', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 20px;
  letter-spacing: 0.05em;
}

.archives-modal-games {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Archive game links (styled like sport-cards) ── */

.archives-game-card {
  position: relative;
}

.archives-game-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color 0.15s, transform 0.1s;
}

.archives-game-nfl {
  border-color: #16a34a;
}

.archives-game-nba {
  border-color: #f97316;
}

.archives-game-nhl {
  border-color: #00BFFF;
}

.archives-game-mlb {
  border-color: #eab308;
}

.archives-game-link:not(.archives-game-link-completed):hover {
  transform: translateY(-2px);
}

.archives-game-nfl:not(.archives-game-link-completed):hover {
  border-color: #15803d;
}

.archives-game-nba:not(.archives-game-link-completed):hover {
  border-color: #ea6c00;
}

.archives-game-nhl:not(.archives-game-link-completed):hover {
  border-color: #0ea5e9;
}

.archives-game-mlb:not(.archives-game-link-completed):hover {
  border-color: #ca8a04;
}

.archives-game-link-completed {
  opacity: 0.35;
  pointer-events: none;
}

.archives-game-icon {
  font-size: 2rem;
  line-height: 1;
}

.archives-game-name {
  font-family: 'Silkscreen', monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.archives-game-label {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-left: auto;
}

.archives-completed-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Silkscreen', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text);
  background: white;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--color-border);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
/* ─── Stats Page ──────────────────────────────────────────── */

.stats-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.stats-title {
  font-family: 'Silkscreen', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1d4ed8;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 28px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.stat-card {
  background: var(--color-card);
  border: 1.5px solid #1d4ed8;
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.stat-card .stat-value {
  font-family: 'Silkscreen', monospace;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
}

.stat-card .stat-label {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stats-empty {
  text-align: center;
  color: var(--color-muted);
  font-family: monospace;
  font-size: 1rem;
  margin-top: 40px;
}
/* ─── Global Rankings Page ───────────────────────────────── */

.rankings-page {
  max-width: 700px;
}

.rankings-container {
  --leaderboard-accent: #7c3aed;
}

.rankings-page .logo-green {
  color: #7c3aed;
}

/* ─── Tabs ───────────────────────────────────────────────── */

.rankings-tabs {
  margin-bottom: 8px;
}

.rankings-subtabs {
  margin-bottom: 20px;
}

.rankings-subtabs .difficulty-tab {
  font-size: 0.55rem;
  padding: 3px 8px;
}

.rankings-tab-nba.difficulty-tab-active {
  color: #f97316;
  border-color: #f97316;
}

.rankings-tab-nfl.difficulty-tab-active {
  color: #16a34a;
  border-color: #16a34a;
}

.rankings-tab-nhl.difficulty-tab-active {
  color: #00BFFF;
  border-color: #00BFFF;
}

.rankings-tab-mlb.difficulty-tab-active {
  color: #eab308;
  border-color: #eab308;
}

.rankings-th {
  white-space: nowrap;
}


.rankings-th-compact { display: none; }

@media (max-width: 660px) {
  .rankings-th-full    { display: none; }
  .rankings-th-compact { display: inline; }
}

@media (min-width: 661px) {
  .rankings-table .leaderboard-th {
    font-size: 13px;
  }
}

.rankings-games {
  font-family: 'Silkscreen', monospace;
  font-size: 12px;
}

.rankings-th-toggle {
  width: 1px;
  padding-left: 0 !important;
  padding-right: 4px !important;
}

.rankings-toggle-cell {
  padding-left: 4px !important;
  padding-right: 6px !important;
  width: 1px;
  white-space: nowrap;
}

.rankings-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 9px;
  color: var(--color-muted);
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  font-family: monospace;
  line-height: 1;
}

.rankings-toggle-btn:hover {
  color: #7c3aed;
  background: color-mix(in srgb, #7c3aed 8%, transparent);
}

/* Override leaderboard.css nth-child rank colors — rankings uses black for all */
.rankings-table .leaderboard-row .leaderboard-rank-cell {
  color: var(--color-text);
}

/* Top 3 yellow backgrounds (applied to both main row and subrow via tbody) */
.rankings-table tbody:nth-of-type(1) tr td { background: color-mix(in srgb, #eab308 22%, transparent); }
.rankings-table tbody:nth-of-type(2) tr td { background: color-mix(in srgb, #eab308 13%, transparent); }
.rankings-table tbody:nth-of-type(3) tr td { background: color-mix(in srgb, #eab308 7%, transparent); }

.rankings-row--me {
  background: color-mix(in srgb, #7c3aed 8%, transparent);
}

.rankings-row--me:hover {
  background: color-mix(in srgb, #7c3aed 14%, transparent);
}

/* ─── Subrow ─────────────────────────────────────────────── */

.rankings-subrow {
  display: none;
}

.rankings-subrow--visible {
  display: table-row;
}

.rankings-subrow--me .rankings-subrow-cell {
  background: color-mix(in srgb, #7c3aed 8%, transparent);
}

.rankings-subrow-cell {
  padding: 10px 16px 14px 48px !important;
  border-bottom: 2px solid var(--color-border);
}

.rankings-subrow-content {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.rankings-sub-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rankings-sub-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  font-weight: 600;
}

.rankings-sub-sport-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rankings-sport-line {
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-muted);
}

.rankings-sport-score {
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  color: var(--color-text);
}

.rankings-sport-avg {
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
}

/* ─── Compact at ≤500px ──────────────────────────────────── */

@media (max-width: 500px) {
  .rankings-table .leaderboard-td {
    font-size: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .rankings-table .leaderboard-username {
    font-size: 11px;
  }

  .rankings-table .leaderboard-rank-cell {
    font-size: 11px;
  }

  .rankings-table .leaderboard-score {
    font-size: 11px;
  }

  .rankings-subrow-cell {
    padding-left: 32px !important;
  }

  .rankings-subrow-content {
    gap: 20px;
  }
}
/*
 * Stylesheet manifest — explicit require order ensures correct cascade.
 *













 */

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