@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red: #E8383A;
  --black: #111111;
  --white: #FFFFFF;
  --gray: #1E1E1E;
  --gray-light: #2A2A2A;
  --text-muted: #888888;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  /* Exact colours pulled from assets/icon.png's pixels, not eyeballed —
     the brand's actual four accent colours, used sparingly (a thin gradient
     line, a small icon) so the app reads as colourful-but-still-dark rather
     than loud. See CLAUDE.md's Design note. */
  --go-teal: #32E9CD;
  --go-purple: #6E32E9;
  --go-yellow: #EFE707;
  --go-magenta: #E932CD;
  --go-gradient: linear-gradient(90deg, var(--go-teal), var(--go-purple), var(--go-yellow), var(--go-magenta));
}

html, body {
  height: 100%;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* There's no client-side routing here — showScreen() just toggles a CSS
     class, the URL never changes, and there's only ever one real history
     entry. Without this, a mobile edge-swipe-back gesture gets interpreted
     as browser back navigation, which leaves/reloads the page and wipes
     every in-memory JS state var (currentGameId, currentTeamId, etc.) —
     reported live as "swiped back, whole app reset, had to re-enter the
     game code." Every sub-screen already has its own explicit "← Back"
     button, so disabling the OS-level swipe gesture loses nothing. */
  overscroll-behavior-x: none;
}

/* ── Screens ────────────────────────────── */
.screen {
  display: none;
  min-height: 100vh;
  padding: 24px 20px;
  max-width: 480px;
  margin: 0 auto;
}
.screen.active { display: flex; flex-direction: column; }

/* ── Login ──────────────────────────────── */
#screen-login {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
}

.login-logo {
  width: 120px;
  margin-bottom: 8px;
}

.login-tagline {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--text-muted);
  margin-bottom: 48px;
}

.login-title {
  font-family: var(--font-display);
  font-size: 48px;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 12px;
}

.login-subtitle {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 48px;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  background: var(--white);
  color: var(--black);
  border: none;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.btn-google:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-google:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.google-icon {
  width: 20px;
  height: 20px;
}

/* ── Onboarding ─────────────────────────── */
#screen-onboarding {
  justify-content: center;
  gap: 0;
}

.onboarding-card {
  background: var(--gray);
  border-radius: 20px;
  padding: 40px 28px;
  text-align: center;
  border: 1px solid #333;
}

.onboarding-icon {
  font-size: 52px;
  margin-bottom: 24px;
  display: block;
}

.onboarding-title {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 1px;
  margin-bottom: 16px;
  line-height: 1.1;
}

.onboarding-body {
  color: #CCCCCC;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 32px;
}

.onboarding-body strong { color: var(--white); font-weight: 600; }

.onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}

.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #444;
  transition: background 0.2s, width 0.2s;
}

.onboarding-dot.active {
  background: var(--red);
  width: 24px;
  border-radius: 4px;
}

/* ── Buttons ────────────────────────────── */
.btn-primary {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
  text-align: center;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-primary:active { transform: translateY(0); }

/* ── Home screen ────────────────────────── */
#screen-home { gap: 24px; }

.home-header {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
  /* The brand's four colours as a thin signature line under every screen's
     header, so the app reads as colourful rather than flat black even on
     screens that never show the full logo. Kept to 2px deliberately — a
     recognisable accent, not a loud one. */
  border-image: var(--go-gradient) 1;
}

.home-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.home-logo {
  height: 28px;
  width: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.btn-signout {
  background: none;
  border: 1px solid #333;
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.2s, color 0.2s;
}
.btn-signout:hover { border-color: var(--red); color: var(--red); }

.home-greeting {
  font-family: var(--font-display);
  font-size: 42px;
  letter-spacing: 1px;
  line-height: 1.1;
}

.home-greeting span { color: var(--red); }

#screen-leaderboard .home-greeting {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* ── Join ───────────────────────────────── */
#screen-join {
  justify-content: center;
  align-items: stretch;
  text-align: center;
  gap: 16px;
}

.join-game-name {
  font-family: var(--font-display);
  font-size: 38px;
  letter-spacing: 1px;
  line-height: 1.1;
}

.join-subtitle {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 8px;
}

.input-team-code {
  width: 100%;
  padding: 16px 20px;
  background: var(--gray);
  border: 1px solid #333;
  border-radius: 12px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
}
.input-team-code:focus { outline: none; border-color: var(--red); }
.input-team-code::placeholder { color: #555; letter-spacing: 2px; }

.join-error {
  color: var(--red);
  font-size: 13px;
  min-height: 16px;
}

/* ── Dashboard ──────────────────────────── */
#screen-dashboard { gap: 20px; }

.dashboard-team-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--text-muted);
  width: fit-content;
}

.dashboard-team-badge .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dashboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.dashboard-toolbar .btn-secondary {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  padding: 10px 12px;
  font-size: 12px;
}

.rulebook-section {
  margin-bottom: 20px;
}
.rulebook-heading {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.rulebook-section p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.rulebook-contact-link {
  color: var(--red);
  font-weight: 600;
}
.rulebook-custom-text {
  white-space: pre-wrap;
  color: var(--white) !important;
  font-size: 14px;
  line-height: 1.6;
}
.rulebook-custom-text ul, .rulebook-custom-text ol { margin: 4px 0 4px 20px; }
.rulebook-custom-text p { margin-bottom: 8px; }
.rulebook-custom-text h3 { font-family: var(--font-display); letter-spacing: 0.5px; margin: 12px 0 4px; }
.rulebook-custom-text a { color: var(--red); }

.lifeline-body {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0 16px;
}

.dashboard-location-card {
  background: var(--gray);
  border: 1px solid #333;
  border-radius: 16px;
  padding: 24px;
}

.location-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--red);
  margin-bottom: 8px;
}

.location-name {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 1px;
  margin-bottom: 8px;
  line-height: 1.1;
}

.location-clue {
  color: #CCCCCC;
  font-size: 14px;
  line-height: 1.6;
}

.btn-checkin {
  margin-top: 16px;
}

.geo-message {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.lock-banner {
  background: rgba(232, 56, 58, 0.12);
  border: 1px solid rgba(232, 56, 58, 0.4);
  color: var(--white);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
}

.dashboard-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.progress-label {
  font-size: 13px;
  color: var(--text-muted);
}

.progress-bar {
  height: 8px;
  background: var(--gray-light);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--go-gradient);
  transition: width 0.3s;
}

.task-section-heading {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1px;
  margin-top: 28px;
}

.dashboard-score-summary {
  margin: 6px 0 4px;
}

.score-summary-label {
  font-size: 13px;
  color: var(--text-muted);
}

.score-summary-value {
  color: var(--red);
  font-weight: 600;
}

.task-search-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--gray);
  border: 1px solid #333;
  border-radius: 10px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  margin-bottom: 14px;
}
.task-search-input:focus { outline: none; border-color: var(--red); }
.task-search-input::placeholder { color: var(--text-muted); }

/* ── Tasks ──────────────────────────────── */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-item {
  background: var(--gray);
  border: 1px solid #333;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 0.2s;
}

.task-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Only present on already-submitted tasks (data-toggle-task set) — a large
   tap zone for collapsing back, since a small button alone is too fiddly a
   target on a phone. -webkit-tap-highlight gives real touch feedback instead
   of the default translucent grey flash. */
.task-item-header[data-toggle-task] {
  cursor: pointer;
  margin: -6px -6px 0;
  padding: 6px 6px 0;
  border-radius: 8px;
  -webkit-tap-highlight-color: rgba(232, 56, 58, 0.15);
}
.task-item-header[data-toggle-task]:active { background: rgba(255, 255, 255, 0.04); }

.task-item-tag {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.task-item-points {
  font-family: var(--font-display);
  color: var(--red);
  font-size: 14px;
  letter-spacing: 1px;
}

.task-item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 2px;
}

.task-item-desc {
  font-size: 14px;
  color: #CCCCCC;
  line-height: 1.5;
}

.task-item-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.task-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.task-item-done {
  font-size: 13px;
  font-weight: 600;
  color: #3AE87C;
}

.task-item-number {
  font-family: var(--font-display);
  letter-spacing: 1px;
  color: var(--white);
}

.btn-collapse {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 4px 0;
  cursor: pointer;
}
.btn-collapse:hover { color: var(--red); }

/* Collapsed task row (every task, submitted or not) — a single tappable
   title line rather than a full card, so a 30-40 task list stays scannable.
   Tap anywhere on it to expand and see the full description + actions. */
.task-item-collapsed {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
}
.task-item-collapsed:active { border-color: var(--red); }

.task-item-collapsed-desc {
  flex: 1;
  font-size: 13px;
  color: #CCCCCC;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-secondary {
  padding: 8px 16px;
  background: none;
  border: 1px solid #333;
  color: var(--white);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { border-color: var(--red); color: var(--red); }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.file-picker-label {
  display: inline-block;
}

.task-item-error {
  color: var(--red);
  font-style: normal;
}

.task-item-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.task-item-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--gray-light);
  border-radius: 8px;
  padding: 8px 10px;
}

.task-item-file a {
  color: var(--white);
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-remove-file {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #333;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-remove-file:hover { border-color: var(--red); color: var(--red); }
.btn-remove-file:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Checker (tablet/desktop-primary, NOT the 480px mobile-first pattern —
   see CLAUDE.md: checkers mostly use a tablet or laptop at the finish line) ── */
.screen-wide {
  max-width: 900px;
}

.checker-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.checker-name-badge {
  font-size: 13px;
  color: var(--text-muted);
}

.checker-section-heading {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1px;
  margin: 24px 0 12px;
}

.checker-section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.checker-section-heading-row .checker-section-heading { margin: 24px 0 12px; }
.checker-section-heading-row .btn-secondary { flex-shrink: 0; }

.checker-queue {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Leaderboard winner banner ─────────────── */
.leaderboard-winner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 24px 16px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: var(--gray);
  border: 2px solid transparent;
  border-image: var(--go-gradient) 1;
}

.leaderboard-winner-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 4px;
}

.leaderboard-winner-label {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.leaderboard-winner-team {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 1px;
  line-height: 1.15;
}

.queue-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--gray);
  border: 1px solid #333;
  border-radius: 12px;
  padding: 14px 16px;
}

.queue-row-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.team-progress-bar {
  margin: 0 4px;
}

.queue-row-clickable {
  cursor: pointer;
  transition: border-color 0.2s;
}
.queue-row-clickable:hover { border-color: var(--red); }

.queue-team-name {
  font-family: var(--font-display);
  letter-spacing: 1px;
  font-size: 16px;
}

.queue-status {
  margin-left: auto;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
}
.queue-status-waiting { color: var(--text-muted); }
.queue-status-pending { background: rgba(232, 56, 58, 0.12); color: var(--red); }
.queue-status-done { background: rgba(58, 232, 124, 0.12); color: #3AE87C; }

.btn-back-queue {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 16px;
}
.btn-back-queue:hover { color: var(--red); }

.checker-team-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

#btn-sign-off {
  margin-bottom: 20px;
}

.review-hint {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  background: var(--gray-light);
  border-radius: 8px;
  padding: 8px 10px;
}

.review-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #333;
}

.review-verdict {
  font-size: 12px;
  font-weight: 600;
}
.review-verdict-approved { color: #3AE87C; }
.review-verdict-rejected { color: var(--red); }
.review-verdict-none { color: var(--text-muted); font-weight: 400; }

.review-quick-actions {
  display: flex;
  gap: 10px;
}

.btn-approve, .btn-reject {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #333;
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.btn-approve { color: #3AE87C; }
.btn-approve:hover { border-color: #3AE87C; background: rgba(58, 232, 124, 0.08); }
.btn-reject { color: var(--red); }
.btn-reject:hover { border-color: var(--red); background: rgba(232, 56, 58, 0.08); }

.review-flag-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.review-notes-input {
  width: 100%;
  min-height: 50px;
  padding: 8px 10px;
  background: var(--gray-light);
  border: 1px solid #333;
  border-radius: 8px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  resize: vertical;
}
.review-notes-input:focus { outline: none; border-color: var(--red); }

/* ── Capture control (camera/gallery + preview/confirm) ──────────────────
   Shared by the location-flow prompt and the general task list, so a player
   never gets careless auto-upload in one place and a safety check in
   another — nothing reaches Drive until they've seen a preview and
   explicitly confirmed it. */
.capture-buttons {
  display: flex;
  gap: 10px;
}

.capture-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.capture-preview {
  margin: 10px 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gray-light);
}

.capture-preview-media {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: #000;
}

.capture-preview-actions {
  display: flex;
  gap: 10px;
}
.capture-preview-actions .btn-primary,
.capture-preview-actions .btn-secondary {
  flex: 1;
}

/* ── Persistent clue access ───────────────────────────────────────────── */
.btn-clue-float {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.btn-clue-float:active { opacity: 0.85; }

.clue-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* The class rule's display:flex would otherwise override the browser's
   default [hidden] rule (author styles beat user-agent styles at equal
   specificity) — this makes the hidden attribute actually win. */
.clue-modal-backdrop[hidden] { display: none; }

.clue-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--gray);
  border: 1px solid #333;
  border-radius: 16px;
  padding: 24px;
}

.btn-clue-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #333;
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
}
.btn-clue-modal-x:hover { border-color: var(--red); color: var(--red); }

/* ── Utility ────────────────────────────── */
.red { color: var(--red); }
.muted { color: var(--text-muted); }

/* ── Admin (Milestone 6 Phase 2) ──────────────────────────────────────────
   Same screen-wide tablet/desktop pattern as checker (see CLAUDE.md) — reuses
   its section-heading/queue-row/review-* classes where the shape already
   matches, rather than duplicating them. */
.admin-notify-panel {
  margin-top: 16px;
  padding: 12px;
  background: #181818;
  border: 1px solid #333;
  border-radius: 8px;
}
.admin-notify-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.admin-notify-row + .admin-notify-row { margin-top: 8px; }
.admin-notify-panel .admin-inline-input { flex: 1 1 200px; }
.admin-notify-teams-label { color: var(--text-muted); font-size: 13px; }
#admin-notify-teams {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  flex: 1 1 auto;
}
#admin-notify-teams label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--white);
  cursor: pointer;
}
#admin-notify-history {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #333;
  max-height: 200px;
  overflow-y: auto;
}
.admin-notify-history-row {
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid #262626;
}
.admin-notify-history-row:last-child { border-bottom: none; }
.admin-notify-history-meta { color: var(--text-muted); font-size: 12px; }

.admin-group-tabs {
  display: flex;
  gap: 4px;
  margin-top: 20px;
  border-bottom: 1px solid #333;
}

.admin-group-tab {
  padding: 10px 20px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.admin-group-tab:hover { color: var(--white); }
.admin-group-tab.active { color: var(--white); border-bottom-color: var(--red); }

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
}

.admin-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #333;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.admin-tab:hover { border-color: var(--red); color: var(--white); }
.admin-tab.active { background: var(--red); border-color: var(--red); color: var(--white); }

.admin-card {
  background: var(--gray);
  border: 1px solid #333;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

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

.admin-inline-input, .admin-inline-select {
  flex: 1;
  min-width: 100px;
  padding: 8px 10px;
  background: var(--gray-light);
  border: 1px solid #333;
  border-radius: 8px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
}
.admin-inline-input:focus, .admin-inline-select:focus { outline: none; border-color: var(--red); }
.admin-input-narrow { flex: 0 0 90px; min-width: 0; }

.admin-form-field {
  flex: 1;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-form-field.admin-input-narrow { flex: 0 0 90px; }
.admin-form-field input[type="color"] { padding: 2px; height: 34px; cursor: pointer; }

.admin-team-list, .admin-adjustment-list, .admin-flag-list {
  display: flex;
  flex-direction: column;
}

.admin-members {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #333;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.admin-member-row span:first-child { flex: 1; }

.admin-monitor-progress, .admin-monitor-current {
  font-size: 12px;
  color: var(--text-muted);
}

.admin-monitor-lifelines {
  font-size: 12px;
  color: var(--red);
}

.admin-monitor-activity {
  font-size: 12px;
  color: var(--text-muted);
}
.admin-monitor-stuck {
  color: #f0a020;
  font-weight: 600;
}

.admin-clock-display {
  text-align: center;
  background: var(--gray);
  border: 1px solid #333;
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 16px;
}

.admin-clock-remaining {
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: 1px;
}

.admin-clock-elapsed {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 4px;
  text-transform: capitalize;
}

.admin-adj-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.admin-adj-badge-manual { background: rgba(136, 136, 136, 0.15); color: var(--text-muted); }
.admin-adj-badge-speedBonus { background: rgba(58, 232, 124, 0.12); color: #3AE87C; }
.admin-adj-badge-lifeline { background: rgba(232, 56, 58, 0.12); color: var(--red); }

.admin-reveal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}
.admin-reveal[hidden] { display: none; }

.admin-reveal-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--gray);
  border: 1px solid var(--red);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  animation: admin-reveal-in 0.3s ease-out;
}
.admin-reveal-row span:nth-child(2) { flex: 1; }

@keyframes admin-reveal-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.admin-results-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
}

.admin-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-results-table th, .admin-results-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #333;
  white-space: nowrap;
}
.admin-results-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rulebook-editor-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.rulebook-editor-btn {
  background: var(--gray-light);
  border: 1px solid #333;
  color: var(--white);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-body);
}
.rulebook-editor-btn:hover { border-color: var(--red); }

.rulebook-editor-content {
  width: 100%;
  min-height: 260px;
  padding: 14px 16px;
  background: var(--gray-light);
  border: 1px solid #333;
  border-radius: 8px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  overflow-y: auto;
}
.rulebook-editor-content:focus { outline: none; border-color: var(--red); }
.rulebook-editor-content ul, .rulebook-editor-content ol { margin-left: 20px; }

.admin-settings-label {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}