* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #fff;
  color: #111;
  min-height: 100vh;
}

/* --- Setup Screen --- */
#setup {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
}
/* Tournament Mode control: label + switch button in the Team Rosters
   section header. Switch is an iOS-style pill — track + sliding thumb
   — paired with an ON/OFF state label so the action is unmistakable. */
.roster-mode-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.roster-mode-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
}
.roster-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  font: inherit;
}
.roster-mode-switch:focus { outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 4px; }
.roster-mode-switch-track {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  background: #cbd5e1;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.roster-mode-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: left 0.15s ease;
}
.roster-mode-switch-state {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #64748b;
  min-width: 26px;
  text-align: left;
}
.roster-mode-switch[aria-pressed="true"] .roster-mode-switch-track { background: #2563eb; }
.roster-mode-switch[aria-pressed="true"] .roster-mode-switch-thumb { left: 18px; }
.roster-mode-switch[aria-pressed="true"] .roster-mode-switch-state { color: #2563eb; }
.roster-mode-switch:hover .roster-mode-switch-track { filter: brightness(0.95); }

/* Tournament picker — appears when Tournament Mode is ON so the moderator
   can choose which of their tournaments' rosters to load. */
.roster-tournament-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}
.roster-tournament-picker[hidden] { display: none; }
.roster-tournament-picker label { color: #555; font-weight: 600; }
.roster-tournament-picker select {
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.85rem;
  background: #fff;
}

/* --- Standalone stats page (stats.html) --- */
#stats-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px;
}
.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.stats-header h1 { font-size: 2rem; }
.stats-back-link {
  color: #2563eb;
  text-decoration: none;
  font-size: 0.95rem;
}
.stats-back-link:hover { text-decoration: underline; }
.stats-link { display: inline-block; text-decoration: none; }

/* --- Setup-screen footer (GitHub / issues links) --- */
.site-footer {
  text-align: center;
  margin-top: 28px;
  font-size: 0.85rem;
  color: #888;
}
.site-footer a { color: #2563eb; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* --- Tournament stats panel --- */
.ts-intro { color: #555; font-size: 0.9rem; margin-bottom: 12px; }
.ts-status { font-size: 0.9rem; color: #555; }
.ts-status-ok { color: #2c7a2c; }
.ts-status-warn { color: #a06400; }
.ts-empty { color: #777; padding: 12px 0; font-style: italic; }
/* Pending-submission preview banner (ui/tournament-stats.js). Sits above
   the status line and persists across view navigation, so previewed
   (unpublished) stats are never mistaken for the published page. */
.ts-preview-banner {
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 6px;
  font-size: 0.92rem;
  border: 1px solid;
}
.ts-preview-loading { background: #f4f4f4; border-color: #ddd; color: #555; }
.ts-preview-info    { background: #f0f4fa; border-color: #b9cbe4; color: #2d4a6d; }
.ts-preview-ok      { background: #eef7ee; border-color: #b9dcb9; color: #2c7a2c; }
.ts-preview-warn    { background: #fdf6e7; border-color: #e8cf98; color: #7a5a00; }
.ts-preview-error   { background: #faf0f0; border-color: #e4b9b9; color: #8a2c2c; }
.ts-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 12px;
  color: #555;
  font-style: italic;
}
.ts-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: ts-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes ts-spin {
  to { transform: rotate(360deg); }
}
.ts-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: #333;
}
.ts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .ts-grid { grid-template-columns: 1fr; }
}
/* Wider panels (e.g. the standings + leaderboard tables) stack vertically
   so a single panel can use full page width — avoids horizontal scroll on
   the 7-/8-column tables. */
.ts-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ts-panel {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
}
.ts-panel h3 { font-size: 1rem; margin-bottom: 8px; }
.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.ts-table th,
.ts-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}
.ts-table th { font-weight: 600; color: #555; background: #fafafa; }
.ts-row-clickable { cursor: pointer; }
.ts-row-clickable:hover { background: #f5f5ff; }
.ts-result-W td:last-child { color: #2c7a2c; font-weight: 600; }
.ts-result-L td:last-child { color: #b03a3a; font-weight: 600; }
.ts-result-T td:last-child { color: #777; font-weight: 600; }
.ts-breadcrumbs {
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.ts-breadcrumbs a {
  color: #2563eb;
  cursor: pointer;
  text-decoration: none;
}
.ts-breadcrumbs a:hover { text-decoration: underline; }
.ts-team-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 12px;
}
.ts-team-score {
  font-weight: 700;
  color: #2563eb;
  margin-left: 6px;
}
.ts-team-meta-inline {
  font-size: 0.9rem;
  color: #666;
  font-weight: 400;
  margin-left: 8px;
}
.ts-hint { font-size: 0.85rem; color: #888; margin-top: 6px; }
#setup h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 30px;
}
.setup-section {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
}
.setup-section h2 {
  font-size: 1.2rem;
  margin-bottom: 16px;
}
/* Section heading with a control docked on the right (Team Rosters +
   Tournament Mode toggle). */
.setup-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.setup-section-header h2 { margin-bottom: 0; }
.team-setup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.team-box {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
}
.team-box label { display: block; font-weight: 600; margin-bottom: 8px; }
.team-box input[type="text"],
.team-box select {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #111;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.team-box input[type="text"]:focus,
.team-box select:focus {
  outline: none;
  border-color: #666;
}
.roster-list {
  list-style: none;
  margin-top: 8px;
}
.roster-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 4px;
}
.roster-list li .roster-name { flex: 1; }
.roster-list li button {
  background: none;
  border: none;
  color: #c00;
  cursor: pointer;
  font-size: 1.1rem;
}

/* Drag-to-reorder visuals — shared by .roster-list li and .player-row.
   The grip cursor advertises that the row is draggable; the source row dims
   while a drag is in flight; .drag-target-before/after draw a 2px guideline
   above/below the target row to show where the dropped item will land. */
.drag-handle {
  cursor: grab;
  user-select: none;
  color: #888;
  font-size: 0.95rem;
  padding: 0 2px;
  flex-shrink: 0;
}
.drag-handle:active { cursor: grabbing; }
.roster-list li[draggable="true"],
.player-row[draggable="true"] { cursor: grab; }
.roster-list li.drag-source,
.player-row.drag-source { opacity: 0.4; }
.roster-list li.drag-target-before,
.player-row.drag-target-before { box-shadow: 0 -2px 0 0 #2563eb inset, 0 -2px 0 0 #2563eb; }
.roster-list li.drag-target-after,
.player-row.drag-target-after { box-shadow: 0 2px 0 0 #2563eb inset, 0 2px 0 0 #2563eb; }
.add-player-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.add-player-row input { flex: 1; }
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.15s;
}
.btn-add {
  background: #e0e0e0;
  color: #111;
}
.btn-add:hover { background: #ccc; }
.btn-start {
  background: #111;
  color: #fff;
  font-size: 1.1rem;
  padding: 12px 32px;
}
.btn-start:hover { background: #333; }

/* Session actions under the setup sections: Start Game always; Resume Game
   + Clear saved game appear only when a saved session exists. Clear is
   deliberately smaller — it's destructive housekeeping, not a peer of the
   two primary actions. */
.session-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-resume {
  background: #2563eb;
  color: #fff;
  font-size: 1.1rem;
  padding: 12px 32px;
}
.btn-resume:hover { background: #1d4ed8; }
.btn-clear-save {
  background: #fff;
  border: 1px solid #ccc;
  color: #666;
  font-size: 0.85rem;
  padding: 6px 14px;
}
.btn-clear-save:hover { background: #f1f5f9; color: #333; }

/* PDF upload */
.pdf-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.pdf-upload label.file-label {
  padding: 10px 20px;
  background: #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.pdf-upload label.file-label:hover { background: #ccc; }
.pdf-upload input[type="file"] { display: none; }
.pdf-status { font-size: 0.9rem; color: #666; }
.pdf-status.success { color: #2e7d32; }
.pdf-status.warn { color: #e65100; }
.pdf-status.error { color: #c00; }

/* Suspected-parsing-issues report (rendered by ui/parse-report.js) */
.parse-report {
  margin-top: 12px;
  padding: 8px 12px;
  background: #fff8f0;
  border: 1px solid #f0c58f;
  border-radius: 6px;
  font-size: 0.9rem;
}
.parse-report summary {
  cursor: pointer;
  font-weight: 600;
  color: #e65100;
}
.parse-report-list {
  margin: 8px 0 4px;
  padding-left: 22px;
}
.parse-report-list li { margin: 3px 0; color: #7a4a00; }
.parse-report-list li.error { color: #c00; }
.parse-report-list li code {
  background: #f5ede2;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 0.85em;
}
/* Online pack browser */
.browse-toggle {
  margin-top: 12px;
  display: inline-block;
  background: none;
  border: none;
  color: #2563eb;
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: underline;
  padding: 0;
}
.browse-toggle:hover { color: #1e40af; }
.pack-browser { display: none; margin-top: 16px; border-top: 1px solid #ddd; padding-top: 16px; }
.pack-browser.open { display: block; }
.browser-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.browser-tab {
  padding: 6px 14px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}
.browser-tab.active { background: #111; color: #fff; border-color: #111; }
.browser-level { margin-bottom: 18px; }
.browser-level-label {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #ddd;
}
.browser-season { margin-bottom: 14px; }
.browser-season-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #666;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  font-weight: 700;
}
.browser-tournament {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 8px;
}
.browser-tournament-name { font-weight: 600; font-size: 0.95rem; }
.browser-tournament-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.browser-pack-btn {
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  min-width: 28px;
}
.browser-pack-btn:hover { background: #e0e0e0; }
.browser-pack-btn.zip {
  background: #e8f1ff;
  border-color: #93bbfd;
  color: #1e40af;
  font-weight: 700;
  padding: 4px 10px;
}
.browser-pack-btn.zip:hover { background: #d4e3fa; }
.browser-pack-btn:disabled { opacity: 0.5; cursor: wait; }

/* --- Game Screen --- */
#game { display: none; height: 100vh; overflow: hidden; }

.game-layout {
  display: flex;
  height: 100vh;
}

/* Vertical question sidebar (right side) */
.question-sidebar {
  width: 180px;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fafafa;
  scrollbar-width: thin;
  order: 3; /* main-content (1) | splitter (2) | sidebar (3) */
}
.question-sidebar::-webkit-scrollbar { width: 6px; }
.question-sidebar::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.q-group {
  display: flex;
  flex-direction: column;
}
.q-group:not(:last-child) {
  border-bottom: 2px solid #999;
}
.q-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #888;
  padding: 4px 8px 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: #f0f0f0;
  border-bottom: 1px solid #ddd;
}
.q-btn {
  width: 100%;
  padding: 5px 8px;
  border: none;
  border-bottom: 1px solid #eee;
  background: #fafafa;
  color: #111;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  display: block;
}
.q-btn:hover { background: #e0e0e0; }
.q-btn.active { background: #111; color: #fff; }
.q-btn.answered { background: #e0e0e0; }
.q-btn.answered.active { background: #111; color: #fff; }
.q-answered-tag {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.team-a-tag { background: #2563eb; color: #fff; }
.team-b-tag { background: #dc2626; color: #fff; }
.q-btn.active .team-a-tag { background: #93bbfd; color: #1e40af; }
.q-btn.active .team-b-tag { background: #fca5a5; color: #991b1b; }
.q-btn.answered-a { border-left: 3px solid #2563eb; }
.q-btn.answered-b { border-left: 3px solid #dc2626; }
.q-btn.missing {
  background: #f5f5f5;
  color: #aaa;
  cursor: not-allowed;
  font-style: italic;
  font-size: 0.75rem;
}
.q-btn.missing:hover { background: #f5f5f5; }
.q-issue-flag {
  margin-left: 3px;
  font-size: 0.7rem;
  color: #e65100;
}

/* Per-slot parse warning inside the question panel */
.q-parse-warning {
  margin: 4px 0;
  padding: 4px 10px;
  background: #fff8f0;
  border: 1px solid #f0c58f;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #7a4a00;
}

/* PDF viewer overlay */
.pdf-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1000;
  overflow: auto;
  padding: 20px;
}
.pdf-overlay.open { display: flex; flex-direction: column; align-items: center; }
.pdf-overlay-bar {
  position: sticky;
  top: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  background: #222;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  margin-bottom: 12px;
  z-index: 1;
}
.pdf-overlay-bar button {
  background: #444;
  border: 1px solid #666;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.pdf-overlay-bar button:hover { background: #555; }
.pdf-overlay-bar button:disabled { opacity: 0.4; cursor: not-allowed; }
.pdf-overlay canvas {
  background: #fff;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
  max-width: 100%;
  height: auto;
}
/* Fullscreen text rendering for non-PDF packs (.docx/.txt). */
.pack-overlay-text {
  position: relative;
  background: #fff;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
  border-radius: 4px;
  width: min(820px, 100%);
  max-height: calc(100vh - 110px);
  overflow: auto;
  padding: 24px 32px;
  font-size: 1rem;
  line-height: 1.5;
}

/* Modal shell (backdrop + card), used by the roster manager. */
.format-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  overflow: auto;
  padding: 24px;
  align-items: flex-start;
  justify-content: center;
}
.format-modal.open { display: flex; }
.format-modal-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  padding: 22px 26px;
  max-width: 720px;
  width: 100%;
  position: relative;
  margin: 24px 0;
}
.format-modal-card h2 { margin: 0 0 8px 0; font-size: 1.3rem; }
.format-modal-help { color: #444; font-size: 0.92rem; margin: 0 0 16px 0; line-height: 1.45; }
.format-modal-help em { font-style: normal; background: #f1f5f9; padding: 1px 5px; border-radius: 3px; }
.format-modal-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin: 14px 0 6px;
}
.format-modal-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.4;
  resize: vertical;
}
.format-modal-textarea:focus { outline: 2px solid #2563eb; outline-offset: 1px; }
.format-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.format-modal-status { font-size: 0.85rem; color: #555; min-height: 1.2em; }
.format-modal-status.success { color: #2e7d32; }
.format-modal-status.error { color: #c00; }
.format-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: #888;
  cursor: pointer;
  line-height: 1;
}
.format-modal-close:hover { color: #222; }

/* Main content area */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  order: 1;
}

/* Scoreboard */
.scoreboard {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 16px;
  flex-shrink: 0;
  position: relative;
}
/* Action cluster anchored to the scoreboard's right side: Pop Out + +/- Points.
   Absolute positioning keeps the team scores centered regardless of state. */
.scoreboard-actions {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
}
.scoreboard-action-btn {
  background: #e0e0e0;
  color: #111;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  border: 1px solid #ccc;
}
.scoreboard-action-btn:hover { background: #ccc; }
/* Position relative so the dropdown panel inside can position absolute against it. */
.custom-award {
  position: relative;
}
.custom-award > summary {
  list-style: none;
  cursor: pointer;
  background: #e0e0e0;
  color: #111;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  border: 1px solid #ccc;
}
.custom-award > summary::-webkit-details-marker { display: none; }
.custom-award > summary::marker { content: ''; }
.custom-award > summary:hover { background: #ccc; }
.custom-award-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px;
  min-width: 360px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;
}
.custom-award-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.custom-award-row label { font-size: 0.85rem; display: inline-flex; align-items: center; gap: 4px; }
.custom-award-row input, .custom-award-row select {
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 0.9rem;
}
.custom-award-hint { font-size: 0.8rem; color: #666; margin-top: 6px; }
.team-score {
  text-align: center;
  min-width: 160px;
}
.team-score .team-name {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.team-score .score {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
}
.score-divider {
  font-size: 3rem;
  color: #999;
  font-weight: 300;
}

/* Question content area */
.question-content-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px 24px;
  flex-shrink: 0;
  overflow: hidden; /* clip if user drags shorter than the inline PDF's height */
}
.question-content {
  flex: 1 1 50%;
  min-width: 0; /* allow text to shrink in narrow columns instead of pushing layout */
}
.question-category-label {
  font-size: 1.1rem;
  color: #111;
  font-weight: 700;
  margin-bottom: 4px;
}
.question-nav {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.question-nav .btn {
  background: #e0e0e0;
  color: #111;
  padding: 5px 12px;
  font-size: 0.85rem;
}
.question-nav .btn:hover { background: #ccc; }
.question-text {
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 6px;
}
.question-answer {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 4px;
}
.question-answer .answer-label {
  font-weight: 400;
}

/* Bottom panels */
.bottom-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
}

.team-panel {
  padding: 12px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.team-panel:first-child { border-right: 1px solid #ddd; }
.team-panel h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  text-align: center;
}

.player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 4px;
  background: #fafafa;
}
/* Jailbreak: player has already buzzed this round and is waiting for the
   rest of the team to cycle through. Visually muted but the +10 button is
   still clickable so the moderator can override. */
.player-row.player-row-locked {
  opacity: 0.45;
  background: #eee;
  border-style: dashed;
}
/* Substitution: player is on the bench (state: subs interval open). Muted
   harder than a lockout and with no scoring button — Sub in brings them
   back from the current question. */
.player-row.player-row-benched {
  opacity: 0.6;
  background: #f3f4f6;
  border-style: dotted;
}
.player-row.player-row-benched .player-name { text-decoration: line-through; color: #666; }
.player-sub-tag { background: #fde68a; color: #7c5a00; }
/* ⋯ opens the row's context menu (same menu as right-click). Kept tiny:
   +10 is the primary action, this is the "more" affordance. */
.player-actions .btn.btn-row-menu {
  background: transparent;
  color: #888;
  border: 1px solid transparent;
  font-size: 1rem;
  line-height: 1;
  padding: 4px 6px;
  min-width: 0;
}
.player-actions .btn.btn-row-menu:hover { background: #e5e7eb; color: #111; border-color: #d1d5db; }

/* Player context menu (ui/player-menu.js) — one element on <body>,
   repositioned per open. */
.ctx-menu {
  position: fixed;
  z-index: 1200;
  min-width: 190px;
  background: #fff;
  border: 1px solid #cfd4da;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 4px;
  font-size: 0.9rem;
}
.ctx-menu[hidden] { display: none; }
.ctx-menu-title {
  padding: 6px 10px 4px;
  font-weight: 700;
  color: #333;
  border-bottom: 1px solid #eee;
  margin-bottom: 4px;
  white-space: nowrap;
}
.ctx-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 5px;
  padding: 7px 10px;
  font: inherit;
  color: #111;
  cursor: pointer;
  white-space: nowrap;
}
.ctx-menu button:hover, .ctx-menu button:focus { background: #eef2ff; outline: none; }
.ctx-menu-hint { color: #888; font-size: 0.8em; margin-left: 4px; }
.player-lock-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  background: #ddd;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}
.player-keybind {
  background: #e0e0e0;
  border: 1px solid #ccc;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 1rem;
  font-weight: 700;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.player-name {
  font-weight: 700;
  font-size: 1.15rem;
  flex: 1;
}
.player-points {
  font-weight: 700;
  font-size: 1.1rem;
  min-width: 36px;
  text-align: right;
  color: #555;
}
.player-actions {
  display: flex;
  gap: 4px;
}
.player-actions .btn {
  padding: 5px 12px;
  font-size: 0.85rem;
  border-radius: 4px;
}
.btn-5 { background: #e0e0e0; color: #111; }
.btn-5:hover { background: #ccc; }
.btn-10 { background: #111; color: #fff; }
.btn-10:hover { background: #333; }
.btn-clear { background: #fee; color: #c00; border: 1px solid #fbb; margin-left: 4px; }
.btn-clear:hover { background: #fdd; }

.game-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 6px 12px;
  border-top: 1px solid #ddd;
  flex-shrink: 0;
  font-size: 0.85rem;
  color: #888;
}
.game-controls kbd {
  background: #e0e0e0;
  border: 1px solid #ccc;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
  font-weight: 700;
  font-size: 0.8rem;
}
/* Drag-resize splitter handles. Each renders a thin visible line via ::before
   with a slightly wider transparent hit area so the line itself is the drag
   target. JS in the bottom of the script wires mouse events. */
.splitter {
  flex-shrink: 0;
  user-select: none;
  position: relative;
  z-index: 5;
}
.splitter-v {
  width: 6px;
  cursor: col-resize;
  order: 2; /* between main-content (1) and sidebar (3) */
}
.splitter-v::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: #111;
  transform: translateX(-50%);
}
.splitter-v:hover::before, .splitter-v.dragging::before {
  background: #2563eb;
  width: 3px;
}
.splitter-h {
  height: 6px;
  cursor: row-resize;
}
.splitter-h::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: #111;
  transform: translateY(-50%);
}
.splitter-h.thin::before { background: #ddd; height: 1px; }
.splitter-h:hover::before, .splitter-h.dragging::before {
  background: #2563eb;
  height: 3px;
}

.undo-btn {
  background: #e0e0e0;
  color: #111;
}
.undo-btn:hover { background: #ccc; }
.undo-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.back-btn {
  background: #e0e0e0;
  color: #111;
}
.back-btn:hover { background: #ccc; }
.dev-tools { position: relative; display: inline-block; }
.dev-tools > summary {
  list-style: none;
  cursor: pointer;
  background: #e0e0e0;
  color: #111;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  border: 1px solid #ccc;
}
.dev-tools > summary::-webkit-details-marker { display: none; }
.dev-tools > summary::marker { content: ''; }
.dev-tools > summary:hover { background: #ccc; }
.dev-tools-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px;
  min-width: 360px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;
}
.dev-tools-panel hr { border: none; border-top: 1px solid #ddd; margin: 10px 0; }
.dev-tools-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dev-tools-row label { font-size: 0.85rem; display: inline-flex; align-items: center; gap: 4px; }
.dev-tools-row input, .dev-tools-row select {
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 0.9rem;
}
.dev-tools-hint { font-size: 0.8rem; color: #666; margin-top: 6px; }
.question-instructions {
  background: #fff8e1;
  border: 1px solid #f0d878;
  border-left: 4px solid #d4a017;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 6px 0 10px;
  font-size: 0.95rem;
  color: #5a4500;
  line-height: 1.4;
}
.question-instructions::before {
  content: "Category instructions: ";
  font-weight: 600;
}
/* Reveal note that follows a question's answer in the pack (e.g. a Mystery
   set's "(The theme was …)") — moderator-facing, like the answer itself. */
.question-reveal {
  font-size: 0.95rem;
  font-style: italic;
  color: #6b21a8;
  margin: 2px 0 4px;
}
.inline-pdf {
  flex: 1 1 50%;
  min-width: 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fafafa;
  padding: 6px;
}
.inline-pdf-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.85rem;
}
.inline-pdf-bar button {
  background: #e0e0e0;
  border: 1px solid #bbb;
  padding: 2px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
}
.inline-pdf-bar button:hover { background: #ccc; }
.inline-pdf-bar button:disabled { opacity: 0.4; cursor: not-allowed; }
.inline-pdf-canvas-wrap {
  height: 320px;
  overflow: auto;
  background: #888;
  text-align: center;
  border-radius: 4px;
  resize: vertical;
  min-height: 120px;
  max-height: 80vh;
}
.inline-pdf-canvas-wrap canvas {
  display: block;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Inline text rendering for non-PDF packs — same footprint as the canvas wrap. */
.inline-pack-text {
  position: relative;
  height: 320px;
  overflow: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  min-height: 120px;
  max-height: 80vh;
  padding: 10px 14px;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Shared pack-text line styles (inline + fullscreen). */
.pack-line { margin: 2px 0; }
.pack-line-bold {
  font-weight: 700;
  margin-top: 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 2px;
}
.pack-line-q { margin-top: 6px; }
.pack-line-a { margin-left: 18px; color: #333; }

/* ==================== TUTORIAL OVERLAY ==================== */
/* The highlighted element gets a giant outer box-shadow that dims everything
   around it, plus a thin colored inner shadow as a colored outline. No
   separate dim layer needed; clicks pass through naturally to the element. */
.tutorial-highlight {
  position: relative;
  z-index: 9001;
  box-shadow:
    0 0 0 3px #2563eb,
    0 0 0 9999px rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  transition: box-shadow 0.18s ease;
}
/* Secondary highlights skip the page-dim shadow so the dim doesn't
   compound when several elements are highlighted at once — only the
   primary contributes to the dim, the rest just get the colored outline. */
.tutorial-highlight-secondary {
  position: relative;
  z-index: 9001;
  box-shadow: 0 0 0 3px #2563eb;
  border-radius: 4px;
  transition: box-shadow 0.18s ease;
}
.tutorial-tooltip {
  position: fixed;
  z-index: 9002;
  width: 380px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  padding: 16px 18px;
  font-size: 0.95rem;
  color: #111;
}
.tutorial-tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.82rem;
}
.tutorial-step-counter {
  color: #666;
  font-variant-numeric: tabular-nums;
}
.tutorial-skip-btn {
  background: none;
  border: none;
  color: #2563eb;
  cursor: pointer;
  font-size: 0.82rem;
  padding: 0;
  font-weight: 600;
}
.tutorial-skip-btn:hover { text-decoration: underline; }
.tutorial-tooltip-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}
.tutorial-tooltip-body {
  line-height: 1.5;
  margin-bottom: 14px;
  color: #333;
}
.tutorial-tooltip-body kbd {
  display: inline-block;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0 5px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.85em;
  font-weight: 600;
  color: #333;
}
.tutorial-tooltip-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.tutorial-tooltip-nav .btn {
  flex: 1;
  background: #f5f5f5;
  color: #111;
  border: 1px solid #ccc;
}
.tutorial-tooltip-nav .btn:hover:not(:disabled) {
  background: #e8e8e8;
}
.tutorial-tooltip-nav .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tutorial-tooltip-nav .tutorial-next-btn {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.tutorial-tooltip-nav .tutorial-next-btn:hover {
  background: #1d4fc4;
}

/* --- Tournaments hub (tournaments.html) ---
   Card list of every tournament hosted on the site. The search box at the
   top filters by name/slug/description. */
.tournaments-search-row { margin-bottom: 16px; }
#tournaments-search {
  width: 100%;
  max-width: 420px;
  padding: 8px 12px;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}
#tournaments-search:focus { outline: none; border-color: #2563eb; }
.tournaments-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tournament-card { padding: 0; }
.tournament-card-link {
  display: block;
  padding: 14px 18px;
  background: #f5f5f5;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-decoration: none;
  color: #111;
  transition: background 0.12s, border-color 0.12s;
}
.tournament-card-link:hover { background: #eef2ff; border-color: #c7d2fe; }
.tournament-card-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2563eb;
}
.tournament-card-desc {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  color: #555;
}
.tournaments-empty { color: #777; font-style: italic; padding: 12px 0; }

/* ==================== ROSTER MANAGER MODAL ==================== */
/* Composes .btn; overrides only the outlined look + compact size. */
.roster-manage-btn {
  padding: 4px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font-size: 0.85rem;
  color: #333;
}
.roster-manage-btn:hover { background: #f1f5f9; }

/* Two views inside one card, switched by data-view on the card. */
.roster-manager-view { display: none; }
.format-modal-card[data-view="list"] .roster-manager-view[data-view="list"],
.format-modal-card[data-view="editor"] .roster-manager-view[data-view="editor"] { display: block; }

.roster-manager-list {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
  max-height: 40vh;
  overflow-y: auto;
}
.roster-manager-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid #eee;
}
.roster-manager-name { font-weight: 600; }
.roster-manager-meta { color: #777; font-size: 0.85rem; flex: 1; }
.roster-manager-row-actions { display: flex; gap: 6px; }
/* Rows use .btn.btn-add for colors; only the compact size is local. */
.roster-manager-row-actions .btn {
  padding: 4px 10px;
  font-size: 0.85rem;
}
.roster-manager-empty { color: #777; font-style: italic; padding: 10px 4px; }

/* ==================== PHONE-BUZZER ROOMS (ui/room.js) ==================== */

/* Banner shown while a remote buzz awaits the moderator's verdict. */
#room-buzz-bar {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  font-size: 1.05rem;
}
#room-buzz-bar.unmatched { background: #fee2e2; border-color: #ef4444; }

/* The buzzed player's row in the panels; assignable rows while an
   unmatched buzz is pending. */
.player-row-buzzed { outline: 2px solid #f59e0b; background: #fef3c7; border-radius: 6px; }
.player-row-assignable { cursor: pointer; }
.player-row-assignable:hover { background: #e0f2fe; }

/* Room panel (inside the scoreboard's details dropdown). */
.room-code-row { margin-bottom: 8px; }
.room-code { font-size: 1.2rem; letter-spacing: 0.2em; }
.room-hint { color: #777; font-size: 0.85rem; margin-bottom: 8px; }
.room-link-row { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.room-hold-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 0.9rem; }
.room-phones { margin-bottom: 8px; max-height: 30vh; overflow-y: auto; }
.room-phone { padding: 3px 0; font-size: 0.9rem; border-bottom: 1px solid #eee; }
.room-unassigned { color: #b45309; font-style: italic; }
.room-x { padding: 0 8px; font-size: 0.85rem; }

/* ==================== SUBMISSION MODAL (ui/submission-form.js) ==================== */
/* Rides on the shared .format-modal classes; these are its extras. Used
   on the stats pages, the hub, and the scorekeeper alike. */

.submission-card { max-width: 560px; }
.submission-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.submission-input:focus { outline: 2px solid #2563eb; outline-offset: 1px; }
.submission-input[readonly] { background: #f1f5f9; color: #475569; }
.submission-optional { font-weight: normal; color: #64748b; font-size: 0.82rem; }
.submission-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}
.submission-file-btn { cursor: pointer; }
.submission-validation { font-size: 0.85rem; color: #555; }
.submission-validation.success { color: #2e7d32; }
.submission-validation.error { color: #c00; }
.submission-fallback { font-size: 0.85rem; color: #64748b; margin: 10px 0 0; }
.submission-key-box {
  background: #fefce8;
  border: 1px solid #eab308;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 0.9rem;
}
.submission-key-row { display: flex; gap: 8px; }
.submission-key-row .submission-input { margin-bottom: 0; font-family: monospace; }
#sf-turnstile:not(:empty) { margin-bottom: 10px; }

/* "Remove this game" (key holders only) on the stats game view. */
.ts-remove-game-row { margin-top: 14px; }
.ts-remove-note { font-size: 0.85rem; color: #64748b; }

/* Key-handout confirmation on stats pages (stats-main.js #key= capture). */
.sf-key-saved { color: #2e7d32; font-weight: 500; }

/* End-of-game "publish the results?" toast (main.js maybeNudgeSubmit). */
#submit-nudge {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1e293b;
  color: #f8fafc;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  z-index: 60;
  font-size: 0.95rem;
}

/* Persistent "publishing to <slug>" chip (ui/publish-badge.js, every
   page): a quiet, semi-transparent pill bottom-left that only asserts
   itself on hover. .above-controls lifts it over the scorekeeper's
   bottom bar; elsewhere it hugs the corner. */
#publish-badge {
  position: fixed;
  bottom: 8px;
  left: 8px;
  z-index: 55;
  background: rgba(30, 41, 59, 0.5);
  color: rgba(248, 250, 252, 0.92);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.15s;
}
#publish-badge:hover { opacity: 1; }
#publish-badge.above-controls { bottom: 52px; left: 10px; }