/* digitalCORE v5 brand */
:root {
  --navy: #15192a;
  --navy-dark: #060c1a;
  --electric: #18b4ff;
  --accent: #63b3ed;
  --off-white: #f4f6fb;
  --white: #ffffff;
  --body: #3d4a6b;
  --slate: #6b7a9a;
  --bluegrey: #a8b4d0;
  --border: #dde3f0;
  --green: #2bd16f;
  --red: #ff5b5b;
  /* Soft surface fill used for muted backgrounds (badges, table headers,
     stat strip backgrounds). Resolves the previously-undefined --surface
     token referenced across the admin views. */
  --surface: #f4f6fb;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Inter", Calibri, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.h-font {
  font-family: "Poppins", "Trebuchet MS", Arial, sans-serif;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
  line-height: 1.15;
}

.bg-grad-01 {
  background: linear-gradient(
    135deg,
    #060c1a 0%,
    #0a1535 25%,
    #0f3a80 50%,
    #1a5acc 72%,
    #0f3060 100%
  );
  position: relative;
}
.bg-grad-01::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #060c1a 0%,
    #060c1a 14%,
    transparent 50%
  );
  pointer-events: none;
}
.bg-grad-01 > * {
  position: relative;
}

.accent-bar {
  height: 4px;
  background: var(--electric);
  width: 100%;
}

.wordmark {
  font-family: "Poppins", "Trebuchet MS", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.wordmark-light {
  color: var(--white);
}
.wordmark-dark {
  color: var(--navy);
}
.wordmark .dot {
  color: var(--electric);
}
.wordmark-img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 100%;
}
.wordmark-img-lg {
  height: 32px;
}
.wordmark-dark .wordmark-img {
  filter: brightness(0) saturate(100%) invert(8%) sepia(16%) saturate(2486%) hue-rotate(202deg) brightness(94%) contrast(97%);
}

.player-header {
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.player-header .wordmark {
  flex: 0 1 auto;
  min-width: 0;
}
.player-meta {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 16px;
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
}
.player-meta-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-meta-score {
  color: var(--electric);
  font-weight: 800;
  white-space: nowrap;
  flex: 0 0 auto;
}
.player-meta-streak {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 138, 61, 0.14);
  color: #ff8a3d;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.player-meta-streak .streak-icon {
  font-size: 13px;
  line-height: 1;
}
.player-meta-streak.streak-zero {
  background: rgba(107, 122, 154, 0.14);
  color: var(--slate);
}
@media (max-width: 480px) {
  .player-header {
    padding: 14px 16px;
    gap: 10px;
  }
  .wordmark-img {
    height: 28px;
  }
  .player-meta {
    font-size: 13px;
    letter-spacing: 0.05em;
  }
}
@media (max-width: 360px) {
  .player-header {
    padding: 12px 12px;
    gap: 8px;
  }
  .wordmark-img {
    height: 24px;
  }
  .player-meta {
    font-size: 12px;
  }
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-pad {
  padding: 24px;
}
@media (min-width: 900px) {
  .page-pad {
    padding: 80px;
  }
}

.btn {
  display: inline-block;
  font-family: "Poppins", "Trebuchet MS", Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11pt;
  padding: 16px 24px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 80ms ease, background 120ms ease, color 120ms ease;
}
.btn:active {
  transform: scale(0.98);
}
.btn-primary {
  background: var(--white);
  color: var(--navy);
}
.btn-primary:hover {
  background: var(--off-white);
}
.btn-electric {
  background: var(--electric);
  color: var(--navy-dark);
}
.btn-electric:hover {
  background: #2dc4ff;
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
}
.btn-navy {
  background: var(--navy);
  color: var(--white);
}
.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}
.btn-big {
  padding: 20px 24px;
  font-size: 13pt;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  font-family: "Inter", Calibri, Arial, sans-serif;
  font-size: 16px;
  padding: 14px 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy);
  width: 100%;
  outline: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(24, 180, 255, 0.18);
}
.password-field {
  position: relative;
}
.password-field input[type="password"],
.password-field input[type="text"] {
  padding-right: 70px;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--slate);
  font-family: "Inter", Calibri, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
}
.password-toggle:hover {
  color: var(--electric);
}
.password-toggle:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 2px;
}

label {
  display: block;
  font-family: "Poppins", "Trebuchet MS", Arial, sans-serif;
  font-weight: 600;
  font-size: 11pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate);
  margin: 0 0 6px;
}

.field {
  margin-bottom: 14px;
}

.fine-print {
  color: var(--bluegrey);
  font-size: 12px;
  margin-top: 8px;
  line-height: 1.5;
}

.card {
  background: var(--white);
  border-radius: 3px;
  border: 1px solid var(--border);
  padding: clamp(14px, 4vw, 20px);
}

.text-white {
  color: var(--white);
}
.text-electric {
  color: var(--electric);
}
.text-slate {
  color: var(--slate);
}
.text-navy {
  color: var(--navy);
}

.pill {
  display: inline-block;
  font-family: "Poppins", Trebuchet MS, Arial, sans-serif;
  font-weight: 600;
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border-radius: 3px;
  background: var(--electric);
  color: var(--navy-dark);
}

/* Clickable "<n> pre-registered" chip rendered inline on draft+future
   game rows in the admin games table. Sized to match the adjacent
   "auto-start" badge so the two read as a pair. */
.prereg-chip {
  display: inline-block;
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border: 1px solid rgba(14, 165, 233, 0.35);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 4px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.6;
}
.prereg-chip:hover,
.prereg-chip:focus-visible {
  background: rgba(14, 165, 233, 0.22);
  outline: none;
}
.prereg-chip:focus-visible {
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.45);
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.col {
  display: flex;
  flex-direction: column;
}
.gap-2 {
  gap: 8px;
}
.gap-3 {
  gap: 12px;
}
.gap-4 {
  gap: 16px;
}
.gap-5 {
  gap: 20px;
}
.gap-6 {
  gap: 24px;
}
.mt-2 {
  margin-top: 8px;
}
.mt-3 {
  margin-top: 12px;
}
.mt-4 {
  margin-top: 16px;
}
.mt-6 {
  margin-top: 24px;
}
.mt-8 {
  margin-top: 32px;
}
.mb-2 {
  margin-bottom: 8px;
}
.mb-4 {
  margin-bottom: 16px;
}
.mb-6 {
  margin-bottom: 24px;
}

.headline {
  font-family: "Poppins", Trebuchet MS, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 6vw, 56px);
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 16px;
}
.subhead {
  color: var(--bluegrey);
  font-size: 16px;
  max-width: 520px;
  line-height: 1.5;
}

.hidden {
  display: none !important;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.pulse {
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes slideUp {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.slide-up {
  animation: slideUp 0.3s ease-out;
}

/* Player layout */
.player-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.player-light {
  background: var(--off-white);
  color: var(--body);
}
.player-dark {
  background: var(--navy-dark);
  color: var(--white);
}

.timer-pill {
  position: fixed;
  top: 12px;
  right: 12px;
  background: var(--navy);
  color: var(--electric);
  padding: 10px 16px;
  border-radius: 3px;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 22px;
  z-index: 30;
  min-width: 56px;
  text-align: center;
}
@media (max-width: 480px) {
  .timer-pill {
    top: 10px;
    right: 10px;
    padding: 7px 12px;
    font-size: 18px;
    min-width: 44px;
  }
}
@media (max-width: 360px) {
  .timer-pill {
    padding: 6px 10px;
    font-size: 16px;
    min-width: 40px;
  }
}
/* Reserve space in the header on the right when the timer pill is on screen */
body:has(.timer-pill) .player-header {
  padding-right: 84px;
}
body:has(.timer-pill) .player-meta-score,
body:has(.timer-pill) .player-meta-streak {
  display: none;
}
@media (min-width: 400px) {
  body:has(.timer-pill) .player-header {
    padding-right: 96px;
  }
  body:has(.timer-pill) .player-meta-score {
    display: inline;
  }
  body:has(.timer-pill) .player-meta-streak {
    display: inline-flex;
  }
}
.timer-pill.warning {
  color: #ffb84d;
}
.timer-pill.urgent {
  color: var(--red);
}

.choice-btn {
  display: block;
  width: 100%;
  background: var(--white);
  border: 2px solid var(--border);
  color: var(--navy);
  padding: 18px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-align: left;
  border-radius: 3px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 120ms ease;
  line-height: 1.35;
}
@media (max-width: 480px) {
  .choice-btn {
    padding: 14px 14px;
    font-size: 15px;
  }
}
@media (max-width: 360px) {
  .choice-btn {
    padding: 12px 12px;
    font-size: 14px;
  }
}
.choice-btn:hover {
  border-color: var(--electric);
}
.choice-btn.selected {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.choice-btn .letter {
  display: inline-block;
  background: var(--off-white);
  color: var(--navy);
  font-weight: 800;
  border-radius: 3px;
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  margin-right: 12px;
}
.choice-btn.selected .letter {
  background: var(--electric);
  color: var(--navy-dark);
}

.tf-btn {
  flex: 1;
  padding: clamp(18px, 5vw, 28px);
  background: var(--white);
  border: 2px solid var(--border);
  color: var(--navy);
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 5vw, 22px);
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tf-btn:hover {
  border-color: var(--electric);
}
.tf-btn.selected {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* Player view content + bottom confirm bar */
.player-content {
  flex: 1;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 16px clamp(14px, 4vw, 20px) 24px;
}
.player-content-narrow {
  max-width: 520px;
}
.player-content-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.player-status-h {
  font-size: clamp(22px, 6vw, 32px);
  margin: 0 0 8px;
}
.player-status-h-md {
  font-size: clamp(20px, 5.5vw, 28px);
  margin: 0 0 8px;
}
.player-q-text {
  font-size: clamp(20px, 5vw, 32px);
  margin: 8px 0 8px;
}
.submitted-countdown {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 4vw, 18px);
  letter-spacing: 0.04em;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.player-q-text-sm {
  font-size: clamp(17px, 4.5vw, 22px);
  margin: 6px 0 14px;
}
.player-points {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 9vw, 48px);
  line-height: 1.05;
  color: var(--navy);
}
.player-rank {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 5vw, 24px);
}
.player-final-rank {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 10vw, 48px);
  line-height: 1;
  color: var(--white);
}
.player-waiting-rank {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 7vw, 32px);
  color: var(--white);
}
.reveal-card-text {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.4;
}

.confirm-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px clamp(12px, 4vw, 16px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--navy);
  border-top: 4px solid var(--electric);
  z-index: 20;
}
body.has-confirm-bar .player-content {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.score-tag {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 18px;
  padding: 6px 12px;
  border-radius: 3px;
  background: var(--navy);
  color: var(--electric);
}

.bar {
  height: 28px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.bar-fill {
  height: 100%;
  background: var(--electric);
  transition: width 0.6s ease-out;
}
.bar-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--navy-dark);
  font-size: 13px;
}
.bar-count {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--navy-dark);
  font-size: 13px;
}

/* Screen view */
.screen-shell {
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.screen-headline {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  color: var(--white);
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.05;
}
.screen-text {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.15;
}
.screen-meta {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: var(--slate);
  font-size: clamp(24px, 2.4vw, 36px);
}
.screen-timer {
  position: absolute;
  top: 32px;
  right: 32px;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  color: var(--electric);
  font-size: clamp(60px, 7vw, 110px);
  line-height: 1;
  z-index: 2;
}
/* /screen active-question bottom row (Answered + question label).
   Pinned to the bottom of the question pane, with safe horizontal padding
   that scales down on narrow projector windows so the two halves never
   collide and never sit underneath the .screen-timer.
   Bumped up font-weight on the count vs. label gives the operator a
   readable contrast even at small sizes. */
.screen-active-bottom {
  position: absolute;
  bottom: clamp(20px, 3vh, 32px);
  left: clamp(20px, 6vw, 80px);
  right: clamp(20px, 6vw, 80px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
  color: var(--slate);
  font-family: "Poppins", sans-serif;
  font-size: clamp(14px, 1.6vw, 20px);
  letter-spacing: 0.02em;
  z-index: 1;
}
.screen-active-bottom b { color: var(--navy); font-weight: 800; }
.screen-active-bottom .label { white-space: nowrap; }
@media (max-width: 720px) {
  .screen-active-bottom { font-size: 13px; gap: 8px; }
}
.lb-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 40px);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.4s ease;
}
.lb-row .rk {
  color: var(--electric);
  text-align: right;
}
.lb-row .delta {
  color: var(--slate);
  font-size: 0.7em;
  min-width: 80px;
  text-align: right;
}
.lb-row .delta.up {
  color: var(--green);
}

/* Admin login */
.admin-login-wrap {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(
    135deg,
    #060c1a 0%,
    #0a1535 35%,
    #0f3a80 75%,
    #1a5acc 100%
  );
}
.admin-login-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 32px 28px;
  width: min(420px, 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.admin-login-brand {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 12px;
}
.admin-login-title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  color: var(--navy);
  font-size: 28px;
  margin: 0 0 8px;
}
.admin-login-sub {
  color: var(--slate);
  font-size: 14px;
  margin: 0 0 18px;
  line-height: 1.5;
}
.admin-login-err {
  background: rgba(255, 91, 91, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 91, 91, 0.35);
  border-radius: 3px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
}
.admin-login-ok {
  background: rgba(24, 180, 255, 0.08);
  color: var(--navy);
  border: 1px solid rgba(24, 180, 255, 0.35);
  border-radius: 3px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
}
.admin-who {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: var(--bluegrey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}
.admin-super-badge {
  display: inline-block;
  background: var(--electric);
  color: var(--navy-dark);
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}
.admin-signout {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
}
.admin-signout:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Admin view */
.admin-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
}
.admin-top {
  background: var(--navy);
  color: var(--white);
  padding: 14px 16px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 4px solid var(--electric);
}
.admin-mid {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 80px;
}
.admin-bottom {
  position: sticky;
  bottom: 0;
  background: var(--navy-dark);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 8px;
  border-top: 4px solid var(--electric);
  z-index: 10;
}
.admin-action {
  min-height: 56px;
  border-radius: 3px;
  background: var(--electric);
  color: var(--navy-dark);
  border: none;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11pt;
  cursor: pointer;
}
.admin-action.secondary {
  background: var(--navy);
  color: var(--white);
}
.admin-action:disabled {
  opacity: 0.4;
}
.admin-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 12px;
}
.admin-card-h {
  padding: 12px 14px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.admin-card-b {
  padding: 12px 14px;
  font-size: 14px;
}
.q-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
  align-items: center;
}
.q-row:last-child {
  border-bottom: none;
}
.q-row.active {
  background: rgba(24, 180, 255, 0.1);
  font-weight: 700;
}
.q-row .q-type {
  display: inline-block;
  font-size: 9px;
  background: var(--navy);
  color: var(--electric);
  padding: 3px 6px;
  border-radius: 3px;
  margin-right: 6px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lb-mini {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  align-items: center;
}
.lb-mini:last-child {
  border-bottom: none;
}
.lb-mini .rk {
  color: var(--electric);
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}
.lb-mini .pts {
  font-weight: 700;
  color: var(--navy);
}
.player-search-wrap {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.player-search {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  color: var(--navy);
  outline: none;
}
.player-search:focus {
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(24, 180, 255, 0.18);
}
.ans-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ans-row:last-child {
  border-bottom: none;
}
.ans-meta {
  font-size: 11px;
  color: var(--slate);
  margin-top: 4px;
}

.toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  padding: 12px 18px;
  border-radius: 3px;
  font-size: 14px;
  z-index: 100;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

dialog {
  border: none;
  border-radius: 3px;
  padding: 0;
  background: transparent;
  max-width: 92vw;
}
dialog::backdrop {
  background: rgba(6, 12, 26, 0.7);
}
dialog .dialog-inner {
  background: var(--white);
  padding: 24px;
  border-radius: 3px;
  width: min(420px, 92vw);
}

.qr-wrap {
  background: var(--white);
  padding: 18px;
  border-radius: 3px;
  display: inline-block;
}
.qr-wrap canvas,
.qr-wrap img {
  display: block;
}

.signin-url {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  color: var(--electric);
  font-size: clamp(28px, 4vw, 64px);
  letter-spacing: 0.02em;
  margin-top: 18px;
}

/* Legal pages (privacy / terms) */
.legal-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  color: var(--body);
}
.legal-header {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.legal-back {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--electric);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 12px;
  border-radius: 3px;
}
.legal-back:hover {
  border-color: var(--electric);
}
.legal-main {
  flex: 1;
  padding: 32px 24px 64px;
}
.legal-article {
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 28px;
}
@media (min-width: 720px) {
  .legal-article {
    padding: 48px;
  }
}
.legal-article h1 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 6px;
}
.legal-article h2 {
  font-size: 18px;
  margin-top: 32px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy);
  border-top: 2px solid var(--electric);
  padding-top: 18px;
  display: inline-block;
}
.legal-article p,
.legal-article li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--body);
}
.legal-article a {
  color: #0f6fb5;
  text-decoration: underline;
}
.legal-article a:hover {
  color: var(--electric);
}
.legal-article ul {
  padding-left: 22px;
  margin: 8px 0 12px;
}
.legal-article li {
  margin-bottom: 6px;
}
.legal-article strong {
  color: var(--navy);
}
.legal-meta {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate);
  margin-bottom: 24px;
}
.legal-footer {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--slate);
}
.legal-footer a {
  color: var(--navy);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  text-decoration: none;
}
.legal-footer a:hover {
  color: var(--electric);
}

/* Feedback page (rate-this-session) */
.feedback-article {
  max-width: 720px;
}
.feedback-article h1 {
  margin-top: 8px;
}
.feedback-form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 20px;
  margin-bottom: 4px;
}
@media (min-width: 720px) {
  .feedback-form-card {
    padding: 28px;
  }
}
.feedback-field {
  margin-bottom: 18px;
}
.feedback-label {
  display: block;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin-bottom: 8px;
}
.feedback-form-card input[type="text"],
.feedback-form-card textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--white);
  color: var(--navy);
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
  outline: none;
}
.feedback-form-card input[type="text"]:focus,
.feedback-form-card textarea:focus {
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(24, 180, 255, 0.18);
}
.feedback-form-card textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}
.feedback-err {
  color: var(--red);
  font-size: 13px;
  margin-top: 6px;
}
.feedback-thanks {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 24px;
}
.feedback-recent {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feedback-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 16px;
}
.feedback-card-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.feedback-card-name {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
}
.feedback-card-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}
.feedback-card-comment {
  margin: 8px 0 0;
  color: var(--body);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.star-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.star-row .star {
  font-size: 28px;
  line-height: 1;
  color: #d6d6d6;
}
.star-row .star.is-filled {
  color: #ffb400;
}
.star-row-display .star {
  font-size: 18px;
}
.star-row-picker {
  gap: 6px;
}
.star-btn {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: inherit;
  line-height: 1;
}
.star-btn:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 2px;
  border-radius: 3px;
}
.star-btn .star {
  font-size: 36px;
  color: #d6d6d6;
  transition: transform 0.1s ease;
  display: block;
}
.star-btn.is-filled .star {
  color: #ffb400;
}
.star-btn:hover .star,
.star-btn:focus-visible .star {
  transform: scale(1.08);
}

/* Feedback list rendered inside the admin drawer */
.admin-feedback-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.admin-feedback-row {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px;
  background: var(--white);
  margin-bottom: 10px;
}
.admin-feedback-row:last-child {
  margin-bottom: 0;
}
.admin-feedback-row .meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  margin-top: 4px;
}
.admin-feedback-row .name {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 14px;
}
.admin-feedback-row .comment {
  margin-top: 8px;
  font-size: 13px;
  color: var(--body);
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Persistent app footer (Privacy / Terms) */
.app-footer {
  flex-shrink: 0;
  padding: 12px 20px;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--slate);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.app-footer a {
  color: inherit;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.app-footer a:hover {
  color: var(--electric);
}
.app-footer .sep {
  opacity: 0.5;
}
.app-footer-dark {
  color: var(--bluegrey);
}
.app-footer-fixed {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  padding: 4px 20px;
  z-index: 5;
}

/* ============================================================
   Modernized Admin Tool — phase-aware shell, two-pane live view
   Tuned for back-of-room readability when projected.
   ============================================================ */
:root {
  --admin-shadow-sm: 0 1px 2px rgba(15, 22, 45, 0.05), 0 1px 1px rgba(15, 22, 45, 0.04);
  --admin-shadow-md: 0 6px 24px rgba(15, 22, 45, 0.08), 0 1px 2px rgba(15, 22, 45, 0.06);
  --admin-shadow-lg: 0 24px 60px rgba(15, 22, 45, 0.18);
  --admin-radius-sm: 6px;
  --admin-radius-md: 10px;
  --admin-radius-lg: 14px;
  --admin-surface: #ffffff;
  --admin-surface-alt: #f7f9fd;
  --admin-bg: #eef2f8;
  --admin-divider: #e3e8f2;
  --admin-muted: #6b7a9a;
  --admin-strong: #15192a;
  /* Projector-friendly type scale (desktop) — these are the defaults applied
     when no density class is on .admin-shell, and they are also the values
     re-applied by .admin-shell.density-projector. Mobile breakpoints scale
     these down further below. The compact density (.admin-shell.density-compact)
     swaps these for smaller values so an operator running the quiz from a
     small laptop window can see more at once. */
  --admin-fs-base: 18px;
  --admin-fs-label: 14px;        /* small uppercase labels / pill text */
  --admin-fs-eyebrow: 14px;      /* eyebrow / section labels */
  --admin-fs-meta: 15px;         /* secondary meta text */
  --admin-fs-body: 18px;         /* body copy in cards/rows */
  --admin-fs-stat-num: 26px;     /* inline stat numbers in top bar */
  --admin-fs-stat-num-lg: 48px;  /* hero stat numbers */
  --admin-fs-h-sm: 17px;         /* surface / section headers */
  --admin-fs-h-md: 22px;         /* drawer headers, leaderboard header */
  --admin-fs-q-text: clamp(28px, 3.2vw, 38px);
  --admin-fs-hero: clamp(34px, 4.5vw, 52px);
  --admin-fs-banner: clamp(32px, 4vw, 46px);
  --admin-fs-btn-primary: 20px;
  --admin-fs-btn-secondary: 14px;
  --admin-top-h: 72px;           /* approx height of top bar (used for sticky offsets) */
  --admin-nav-h: 56px;           /* approx height of nav row */
  --admin-bottom-h: 96px;        /* approx height of bottom bar */
}

/* Density: projector — explicit class (matches the :root defaults) so the
   toggle has a deterministic state and can be re-applied at any viewport. */
.admin-shell.density-projector {
  --admin-fs-base: 18px;
  --admin-fs-label: 14px;
  --admin-fs-eyebrow: 14px;
  --admin-fs-meta: 15px;
  --admin-fs-body: 18px;
  --admin-fs-stat-num: 26px;
  --admin-fs-stat-num-lg: 48px;
  --admin-fs-h-sm: 17px;
  --admin-fs-h-md: 22px;
  --admin-fs-q-text: clamp(28px, 3.2vw, 38px);
  --admin-fs-hero: clamp(34px, 4.5vw, 52px);
  --admin-fs-banner: clamp(32px, 4vw, 46px);
  --admin-fs-btn-primary: 20px;
  --admin-fs-btn-secondary: 14px;
  --admin-top-h: 72px;
  --admin-nav-h: 56px;
  --admin-bottom-h: 96px;
}

/* Density: compact — tighter scale for operators running from a small laptop
   window (no projector). Same vertical rhythm, just smaller numbers. */
.admin-shell.density-compact {
  --admin-fs-base: 14px;
  --admin-fs-label: 11px;
  --admin-fs-eyebrow: 11px;
  --admin-fs-meta: 12px;
  --admin-fs-body: 14px;
  --admin-fs-stat-num: 19px;
  --admin-fs-stat-num-lg: 32px;
  --admin-fs-h-sm: 13px;
  --admin-fs-h-md: 16px;
  --admin-fs-q-text: clamp(18px, 2vw, 24px);
  --admin-fs-hero: clamp(22px, 2.6vw, 30px);
  --admin-fs-banner: clamp(20px, 2.4vw, 28px);
  --admin-fs-btn-primary: 15px;
  --admin-fs-btn-secondary: 12px;
  --admin-top-h: 56px;
  --admin-nav-h: 44px;
  --admin-bottom-h: 76px;
}

.admin-shell {
  background: var(--admin-bg);
  font-size: var(--admin-fs-base);
}

/* --- Top status bar --- */
.admin-top {
  background: var(--admin-strong);
  color: var(--white);
  padding: 18px 28px;
  border-bottom: 3px solid var(--electric);
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 22px;
  box-shadow: var(--admin-shadow-md);
}
.admin-top-brand {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-top-brand .dotmark {
  color: var(--electric);
}
.admin-top-brand .phase-pill {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.12em;
  font-weight: 800;
  background: rgba(24, 180, 255, 0.18);
  color: var(--electric);
  border: 1px solid rgba(24, 180, 255, 0.4);
}
.admin-top-brand .phase-pill.phase-pre { background: rgba(168, 180, 208, 0.16); color: #d8e1f5; border-color: rgba(168, 180, 208, 0.35); }
.admin-top-brand .phase-pill.phase-live { background: rgba(43, 209, 111, 0.18); color: #4cd98c; border-color: rgba(43, 209, 111, 0.4); }
.admin-top-brand .phase-pill.phase-ended { background: rgba(255, 255, 255, 0.1); color: #f4f6fb; border-color: rgba(255, 255, 255, 0.18); }

.admin-top-brand .density-toggle {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #a8b4d0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.admin-top-brand .density-toggle:hover {
  border-color: rgba(24, 180, 255, 0.6);
  color: var(--electric);
}
.admin-top-brand .density-toggle:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 2px;
}
.admin-top-brand .density-toggle.is-on {
  background: rgba(24, 180, 255, 0.18);
  color: var(--electric);
  border-color: rgba(24, 180, 255, 0.45);
}
.admin-top-brand .density-toggle .density-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
@media (max-width: 720px) {
  .admin-top-brand .density-toggle {
    font-size: 11px;
    padding: 4px 10px;
  }
}

.admin-top-meta {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: "Inter", sans-serif;
  font-size: var(--admin-fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bluegrey);
}
.admin-top-meta .stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.admin-top-meta .stat b {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: var(--admin-fs-stat-num);
  color: var(--white);
  letter-spacing: 0;
  line-height: 1;
}
.admin-top-meta .stat.stat-electric b { color: var(--electric); }
.admin-top-meta .qstatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.admin-top-meta .qstatus .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bluegrey);
  display: inline-block;
}
.admin-top-meta .qstatus.qs-active .dot { background: var(--green); animation: pulse 1.4s ease-in-out infinite; }
.admin-top-meta .qstatus.qs-locked .dot { background: #ffb84d; }
.admin-top-meta .qstatus.qs-revealed .dot { background: var(--electric); }
.admin-top-meta .qstatus.qs-waiting .dot { background: var(--bluegrey); }
/* Shared test-mode pill — used everywhere (admin runner top bar, dashboard
   game cards, /screen top bar, player header) so the badge is visually
   identical across surfaces. Use `.test-pill--sm` for the smaller variant
   that fits inside dense rows (cards, player header). */
.test-pill {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--electric);
  color: var(--navy-dark);
  padding: 5px 11px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  line-height: 1;
  white-space: nowrap;
}
.test-pill--sm {
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 999px;
}

.admin-top-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bluegrey);
}
.admin-shell .admin-signout {
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 6px;
}
.admin-shell .admin-super-badge {
  font-size: 11px;
  padding: 3px 8px;
  margin-left: 10px;
}

@media (max-width: 900px) {
  :root,
  .admin-shell.density-projector {
    --admin-fs-base: 16px;
    --admin-fs-label: 12px;
    --admin-fs-eyebrow: 12px;
    --admin-fs-meta: 13px;
    --admin-fs-body: 16px;
    --admin-fs-stat-num: 22px;
    --admin-fs-stat-num-lg: 38px;
    --admin-fs-h-sm: 15px;
    --admin-fs-h-md: 18px;
    --admin-fs-q-text: clamp(22px, 3vw, 30px);
    --admin-fs-hero: clamp(28px, 4vw, 38px);
    --admin-fs-banner: clamp(26px, 3.5vw, 36px);
    --admin-fs-btn-primary: 17px;
    --admin-fs-btn-secondary: 13px;
    --admin-top-h: 64px;
    --admin-nav-h: 50px;
    --admin-bottom-h: 84px;
  }
  .admin-shell.density-compact {
    --admin-fs-base: 13px;
    --admin-fs-label: 10px;
    --admin-fs-eyebrow: 10px;
    --admin-fs-meta: 11px;
    --admin-fs-body: 13px;
    --admin-fs-stat-num: 17px;
    --admin-fs-stat-num-lg: 28px;
    --admin-fs-h-sm: 12px;
    --admin-fs-h-md: 15px;
    --admin-fs-q-text: clamp(16px, 2vw, 22px);
    --admin-fs-hero: clamp(20px, 2.4vw, 28px);
    --admin-fs-banner: clamp(18px, 2vw, 24px);
    --admin-fs-btn-primary: 14px;
    --admin-fs-btn-secondary: 11px;
    --admin-top-h: 52px;
    --admin-nav-h: 42px;
    --admin-bottom-h: 72px;
  }
}

@media (max-width: 720px) {
  :root,
  .admin-shell.density-projector {
    /* Top bar wraps to two rows at this breakpoint (brand row + meta row),
       so bump the sticky-offset variable to keep .admin-nav and .lb-pane
       from sliding under it. */
    --admin-top-h: 100px;
  }
  .admin-shell.density-compact {
    /* Same two-row wrap, but the compact rows are shorter. */
    --admin-top-h: 88px;
  }
  .admin-top {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 14px 16px;
    gap: 10px;
  }
  .admin-top-brand { font-size: 15px; }
  .admin-top-brand .phase-pill { font-size: 11px; padding: 4px 10px; }
  .admin-top-meta {
    grid-column: 1 / -1;
    gap: 14px;
    font-size: 11px;
  }
  .admin-top-meta .stat b { font-size: 17px; }
  .admin-top-user span:first-child {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 540px) {
  :root,
  .admin-shell.density-projector {
    /* Tighter padding at this width keeps the two-row top bar shorter. */
    --admin-top-h: 96px;
  }
  .admin-shell.density-compact {
    --admin-top-h: 84px;
  }
}

/* --- Secondary nav (drawer triggers) --- */
.admin-nav {
  background: var(--admin-surface);
  border-bottom: 1px solid var(--admin-divider);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: var(--admin-top-h);
  z-index: 15;
  box-shadow: var(--admin-shadow-sm);
}
@media (max-width: 720px) {
  .admin-nav { padding: 10px 14px; gap: 8px; overflow-x: auto; }
}
.admin-nav-btn {
  background: transparent;
  border: 1px solid var(--admin-divider);
  color: var(--admin-muted);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  transition: all 120ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .admin-nav-btn { font-size: 12px; padding: 8px 14px; }
}
.admin-nav-btn:hover {
  border-color: var(--electric);
  color: var(--electric);
}
.admin-nav-btn.is-active {
  background: var(--admin-strong);
  border-color: var(--admin-strong);
  color: var(--white);
}
.admin-nav-btn .badge-num {
  background: var(--electric);
  color: var(--navy-dark);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
}
.admin-nav-spacer { flex: 1; }
.admin-nav-hint {
  color: var(--admin-muted);
  font-size: 13px;
  font-family: "Inter", sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 900px) {
  .admin-nav-hint { display: none; }
}

/* --- Live feedback widget (sits in admin-nav) --- */
.admin-feedback-widget {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  background: transparent;
  border: 1px solid var(--admin-divider);
  border-radius: var(--admin-radius-sm);
  padding: 6px 12px;
  min-width: 220px;
  max-width: 320px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  text-align: left;
  color: var(--admin-fg, var(--navy));
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.admin-feedback-widget:hover,
.admin-feedback-widget:focus-visible {
  border-color: var(--electric);
  background: rgba(24, 180, 255, 0.06);
  outline: none;
}
.admin-feedback-widget .afw-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.admin-feedback-widget .afw-label {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--electric);
}
.admin-feedback-widget .afw-stats {
  font-size: 12px;
  color: var(--admin-muted);
  white-space: nowrap;
}
.admin-feedback-widget .afw-stats b {
  color: var(--admin-fg, var(--navy));
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}
.admin-feedback-widget .afw-star {
  color: var(--electric);
  margin-left: 3px;
  font-size: 12px;
}
.admin-feedback-widget .afw-comment {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--admin-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-feedback-widget .afw-who {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--admin-fg, var(--navy));
}
.admin-feedback-widget .afw-text-muted {
  font-style: italic;
}
@keyframes admin-feedback-flash {
  0%   { box-shadow: 0 0 0 0 rgba(24, 180, 255, 0.45); }
  100% { box-shadow: 0 0 0 6px rgba(24, 180, 255, 0); }
}
.admin-feedback-widget.is-updated {
  animation: admin-feedback-flash 700ms ease-out;
}
@media (max-width: 900px) {
  .admin-feedback-widget {
    min-width: 0;
    max-width: 220px;
    padding: 5px 10px;
  }
  .admin-feedback-widget .afw-comment { display: none; }
}
@media (max-width: 720px) {
  .admin-feedback-widget {
    max-width: 180px;
  }
}

/* --- Main content area --- */
.admin-main {
  padding: 28px;
  padding-bottom: calc(var(--admin-bottom-h) + 32px + env(safe-area-inset-bottom));
  flex: 1;
  overflow-y: auto;
  scroll-padding-bottom: calc(var(--admin-bottom-h) + 32px + env(safe-area-inset-bottom));
}
@media (max-width: 720px) {
  .admin-main {
    padding: 16px 14px;
    padding-bottom: calc(var(--admin-bottom-h) + 28px + env(safe-area-inset-bottom));
  }
}

.surface {
  background: var(--admin-surface);
  border: 1px solid var(--admin-divider);
  border-radius: var(--admin-radius-md);
  box-shadow: var(--admin-shadow-sm);
}
.surface-pad { padding: 24px; }
.surface-h {
  padding: 16px 22px;
  border-bottom: 1px solid var(--admin-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--admin-strong);
  font-size: var(--admin-fs-h-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.surface-h .sub {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--admin-muted);
  font-size: var(--admin-fs-meta);
}

/* --- Setup phase --- */
.setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 960px) {
  .setup-grid { grid-template-columns: 1fr; }
}
.setup-hero {
  background: linear-gradient(135deg, #0a1535 0%, #15192a 50%, #0f3a80 100%);
  color: var(--white);
  border-radius: var(--admin-radius-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--admin-shadow-md);
}
.setup-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 180, 255, 0.18), transparent 70%);
  pointer-events: none;
}
.setup-hero .eyebrow {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: var(--admin-fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 16px;
}
.setup-hero h2 {
  color: var(--white);
  font-size: var(--admin-fs-hero);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.setup-hero p {
  color: var(--bluegrey);
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 26px;
  max-width: 600px;
}
@media (max-width: 900px) {
  .setup-hero p { font-size: 16px; }
}
.setup-hero .signup-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.setup-hero .signup-stats .stat {
  display: flex;
  flex-direction: column;
}
.setup-hero .signup-stats .stat b {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: var(--admin-fs-stat-num-lg);
  line-height: 1;
  color: var(--white);
}
.setup-hero .signup-stats .stat span {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bluegrey);
  margin-top: 8px;
}

.setup-side .surface { margin-bottom: 16px; }
.setup-side .surface:last-child { margin-bottom: 0; }
.setup-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.setup-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--admin-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--admin-fs-body);
  color: var(--admin-strong);
}
.setup-list li:last-child { border-bottom: none; }
.setup-list .qkind {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--admin-bg);
  color: var(--admin-muted);
  padding: 5px 11px;
  border-radius: 5px;
}
.setup-list .qkind.qkind-poll { background: rgba(24, 180, 255, 0.12); color: var(--electric); }
.setup-list .qlabel {
  font-size: 16px;
  color: var(--admin-strong);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
}
.toggle-row .toggle-label {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--admin-strong);
  font-size: 17px;
  margin-bottom: 4px;
}
.toggle-row .toggle-sub {
  font-size: 14px;
  color: var(--admin-muted);
  line-height: 1.45;
}
.toggle-switch {
  position: relative;
  width: 60px;
  height: 32px;
  background: var(--admin-divider);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms ease;
}
.toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 160ms ease;
}
.toggle-switch.is-on {
  background: var(--electric);
}
.toggle-switch.is-on::after {
  transform: translateX(28px);
}

/* --- Games dashboard table ---
   Keep the per-row action buttons on a single line at typical desktop widths
   (~1280px and up). Headers should never break mid-word ("Auto-end" was
   wrapping). Below ~1180px the action cell is allowed to wrap so the table
   still looks intentional on narrower laptops down to ~1024px. The wrapper
   gets overflow-x: auto as a safety net so the page itself never grows a
   horizontal scrollbar even if the row contents momentarily exceed the
   viewport width during resize. */
.games-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}
.games-table th {
  white-space: nowrap;
}
.games-table .games-actions-cell {
  white-space: nowrap;
}
.games-table .games-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.games-table .games-actions-row + .games-actions-row {
  margin-top: 6px;
}
.games-table .games-row-btn {
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-left: 4px;
}
.games-table .games-row-btn:first-of-type {
  margin-left: 0;
}
/* Pin the Title (first) and per-row actions (last) columns of the games
   dashboard table so they stay visible while the middle columns scroll
   horizontally underneath. Body cells get a solid white background and
   header cells keep the existing surface colour so scrolling content
   doesn't bleed through. The thin inset box-shadow acts as a subtle
   separator on the inner edge. Scoped to .games-table-dashboard so the
   feedback summary/drill tables (which share .games-table) are not
   affected. */
.games-table-dashboard thead th:first-child,
.games-table-dashboard tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: inset -1px 0 0 var(--border);
}
.games-table-dashboard thead th:first-child {
  background: var(--surface);
  z-index: 3;
}
.games-table-dashboard thead th:last-child,
.games-table-dashboard tbody td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: #fff;
  box-shadow: inset 1px 0 0 var(--border);
}
.games-table-dashboard thead th:last-child {
  background: var(--surface);
  z-index: 3;
}
@media (max-width: 1180px) {
  .games-table .games-actions-cell {
    white-space: normal;
  }
  .games-table .games-row-btn {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  /* At narrow widths the actions cell wraps its buttons across multiple
     lines, so a sticky-right column would cover a lot of the (already
     cramped) middle columns. Un-pin the actions column here and let it
     flow naturally; the Title column stays pinned because it's just a
     single line of text. */
  .games-table-dashboard thead th:last-child,
  .games-table-dashboard tbody td:last-child {
    position: static;
    box-shadow: none;
  }
}

/* --- Games dashboard: cards + sections layout ---
   The dashboard renders one full-width card per game, grouped into a
   small set of collapsible sections (Live now / Upcoming / Drafts /
   Past / Archived). The page uses the existing brand tokens and
   button classes; per-card popovers (status pill menu, More menu) are
   absolutely positioned within their card so they overlay neighbouring
   cards without shifting layout. */
.games-dashboard {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}
.games-dashboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px 24px;
  margin-bottom: 22px;
}
.games-dashboard-heading {
  flex: 1 1 320px;
  min-width: 0;
}
.games-dashboard-heading h1 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--navy);
}
.games-dashboard-sub {
  color: var(--slate);
  font-size: 13px;
  margin-top: 4px;
}
.games-dashboard-note {
  color: var(--navy);
  font-size: 14px;
  margin-top: 8px;
  max-width: 640px;
  line-height: 1.5;
}
.games-dashboard-note code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 13px;
}
.games-dashboard-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}
.games-toolbar-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.games-toolbar-primary .btn {
  padding: 10px 16px;
  font-size: 11pt;
}
/* The "Create from prompt" CTA stays visually adjacent to + New game
   but uses a distinct violet to read as a separate creation path. */
.games-toolbar-prompt-btn {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}
.games-toolbar-prompt-btn:hover {
  background: #8b51f0;
}
/* Secondary cluster: small ghost/outline buttons so they read as one
   quiet group rather than seven equally-loud buttons. */
.games-toolbar-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  justify-content: flex-end;
  align-items: center;
}
.games-toolbar-link {
  background: #fff;
  border: 1px solid var(--border);
  padding: 7px 12px;
  min-height: 34px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--navy);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.games-toolbar-link:hover {
  background: var(--surface);
  border-color: #c7d0e2;
  color: var(--navy);
}
.games-toolbar-link:focus-visible {
  background: var(--surface);
  border-color: #c7d0e2;
  color: var(--navy);
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 180, 255, 0.4);
}

@media (max-width: 720px) {
  .games-dashboard {
    padding: 20px 14px 36px;
  }
  .games-dashboard-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .games-dashboard-actions {
    align-items: stretch;
  }
  .games-toolbar-primary,
  .games-toolbar-secondary {
    justify-content: flex-start;
  }
}

/* --- Section grouping --- */
.games-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.games-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.games-section-header {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  color: var(--navy);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: flex-start;
  min-height: 36px;
}
.games-section-header:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 4px;
  border-radius: 4px;
}
.games-section-chev {
  display: inline-block;
  font-size: 12px;
  color: var(--slate);
  transition: transform 140ms ease;
}
.games-section.is-collapsed .games-section-chev {
  transform: rotate(-90deg);
}
.games-section-label {
  color: var(--navy);
}
.games-section-count {
  background: var(--surface);
  color: var(--slate);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.games-section-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.games-section.is-collapsed .games-section-body {
  display: none;
}
.games-empty {
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 36px 24px;
  text-align: center;
  color: var(--slate);
}

/* --- Game card --- */
.games-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.games-card.is-archived {
  opacity: 0.72;
}
.games-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}
.games-card-title {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.games-card-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  flex-wrap: wrap;
}
.games-code-pill {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  min-height: 28px;
}
.games-code-edit {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--slate);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.games-code-edit:hover,
.games-code-edit:focus-visible {
  color: var(--navy);
  border-color: var(--slate);
  outline: none;
}
.seeded-code-note {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: var(--slate);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  cursor: help;
  min-height: 24px;
}
.games-card-archived-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--slate);
  border: 1px solid var(--border);
  font-weight: 600;
}

/* --- Stat strip --- */
.games-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.games-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.games-stat-label {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.games-stat-value {
  font-size: 13px;
  color: var(--navy);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
}
.games-stat-toggle-row .games-stat-toggle-label {
  font-size: 11px;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.games-stat-scheduled-value {
  line-height: 1.4;
}
@media (max-width: 720px) {
  .games-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .games-stat-strip {
    grid-template-columns: 1fr;
  }
}

/* --- Status pill (clickable, opens menu) --- */
.games-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 36px;
  line-height: 1;
}
.games-status-pill[disabled],
.games-status-pill.is-archived {
  opacity: 0.6;
  cursor: default;
}
.games-status-pill:not(.is-archived):hover,
.games-status-pill:focus-visible {
  filter: brightness(1.05);
  outline: none;
}
.games-status-pill:focus-visible {
  box-shadow: 0 0 0 3px rgba(24, 180, 255, 0.35);
}
.games-menu-chev {
  font-size: 10px;
  line-height: 1;
}

/* --- Popover menus (status pill + More) --- */
.games-menu-wrap {
  position: relative;
  display: inline-block;
}
.games-menu-wrap--right {
  margin-left: auto;
}
.games-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 168px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
  padding: 6px;
  display: none;
  z-index: 30;
}
.games-menu-popover--right {
  left: auto;
  right: 0;
}
.games-menu-wrap.is-open .games-menu-popover {
  display: block;
}
.games-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  min-height: 36px;
}
.games-menu-item:hover,
.games-menu-item:focus-visible {
  background: var(--surface);
  outline: none;
}
.games-menu-item.is-current {
  font-weight: 600;
}
.games-menu-item.is-danger {
  color: var(--red);
}
.games-menu-item.is-danger:hover,
.games-menu-item.is-danger:focus-visible {
  background: rgba(255, 91, 91, 0.08);
}
.games-menu-item-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.games-menu-item-check {
  margin-left: auto;
  color: var(--slate);
  font-size: 12px;
}
.games-more-btn {
  color: var(--slate);
  border-color: var(--border);
  background: transparent;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
}
.games-more-btn:hover,
.games-more-btn:focus-visible {
  color: var(--navy);
  background: var(--surface);
  outline: none;
}

/* --- Card action row --- */
.games-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.games-card-btn {
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  min-height: 36px;
}

/* --- Live phase: two-pane layout --- */
.live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .live-grid { grid-template-columns: 1fr; }
}

.q-pane {
  background: var(--admin-surface);
  border: 1px solid var(--admin-divider);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-shadow-md);
  overflow: hidden;
}
.q-pane-header {
  padding: 20px 28px;
  border-bottom: 1px solid var(--admin-divider);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, var(--admin-surface), var(--admin-surface-alt));
}
.q-pane-header .q-label {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: var(--admin-fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--electric);
}
.q-pane-header .q-meta {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.q-pane-header .q-meta .sep { opacity: 0.4; }
.q-pane-body {
  padding: 28px;
}
.q-pane-body .q-text {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: var(--admin-fs-q-text);
  color: var(--admin-strong);
  line-height: 1.25;
  margin: 0 0 22px;
}
.q-pane-body .q-section {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--admin-muted);
  margin-bottom: 8px;
}

.choice-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.choice-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--admin-surface-alt);
  border: 1px solid var(--admin-divider);
  border-radius: var(--admin-radius-md);
  position: relative;
  overflow: hidden;
}
.choice-row .ltr {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 20px;
  background: var(--white);
  color: var(--admin-strong);
  text-align: center;
  padding: 8px 0;
  border-radius: 8px;
  border: 1px solid var(--admin-divider);
  z-index: 1;
}
.choice-row .ctxt {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  color: var(--admin-strong);
  font-weight: 500;
  line-height: 1.35;
  z-index: 1;
}
.choice-row .ccount {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--admin-muted);
  z-index: 1;
  white-space: nowrap;
}
.choice-row .ccount b {
  color: var(--admin-strong);
  font-size: 22px;
  margin-right: 4px;
}
.choice-row.is-correct {
  border-color: var(--green);
  background: rgba(43, 209, 111, 0.08);
}
.choice-row.is-correct .ltr {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.choice-row.is-incorrect {
  opacity: 0.7;
}
.choice-row .fillbar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 180, 255, 0.12), rgba(24, 180, 255, 0.02));
  width: var(--fill, 0%);
  transition: width 0.6s ease;
  z-index: 0;
}
.choice-row.is-correct .fillbar {
  background: linear-gradient(90deg, rgba(43, 209, 111, 0.18), rgba(43, 209, 111, 0.04));
}

@media (max-width: 540px) {
  .q-pane-header {
    padding: 14px 16px;
  }
  .q-pane-body {
    padding: 16px;
  }
  .q-pane-body .q-text {
    margin: 0 0 14px;
  }
  .choice-list {
    gap: 8px;
    margin: 0 0 14px;
  }
  .choice-row {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    padding: 12px 14px;
    align-items: start;
  }
  .choice-row .ltr {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    padding: 6px 0;
    font-size: 16px;
  }
  .choice-row .ctxt {
    grid-column: 2;
    grid-row: 1;
    font-size: 17px;
    line-height: 1.35;
    align-self: center;
  }
  .choice-row .ccount {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    font-size: 14px;
  }
  .choice-row .ccount b {
    font-size: 17px;
  }
}

.live-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 0 0;
  border-top: 1px dashed var(--admin-divider);
}
.live-stats .lstat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-muted);
}
.live-stats .lstat b {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: var(--admin-fs-stat-num);
  color: var(--admin-strong);
  letter-spacing: 0;
}
.live-stats .lstat.lstat-progress {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.live-stats .progress-bar {
  height: 12px;
  background: var(--admin-divider);
  border-radius: 999px;
  overflow: hidden;
}
.live-stats .progress-fill {
  height: 100%;
  background: var(--electric);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.free-answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.free-answer {
  padding: 12px 14px;
  background: var(--admin-surface-alt);
  border: 1px solid var(--admin-divider);
  border-radius: var(--admin-radius-md);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}
.free-answer .who {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--admin-strong);
  margin-bottom: 4px;
}
.free-answer .ans {
  font-size: 18px;
  color: var(--body);
  line-height: 1.45;
}
.free-answer .pts {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--electric);
  white-space: nowrap;
}
.free-answer.is-ungraded .pts {
  color: var(--admin-muted);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.free-answer .reason {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--admin-muted);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.45;
}
.free-answer .override-btn {
  background: transparent;
  border: 1px solid var(--admin-divider);
  color: var(--admin-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 5px;
  cursor: pointer;
}
.free-answer .override-btn:hover {
  border-color: var(--electric);
  color: var(--electric);
}

@media (max-width: 540px) {
  .free-answers {
    gap: 12px;
    margin-top: 14px;
  }
  .free-answer {
    grid-template-columns: 1fr;
    padding: 14px;
    row-gap: 10px;
  }
  .free-answer .who {
    font-size: 11px;
    margin-bottom: 2px;
  }
  .free-answer .ans {
    font-size: 15px;
    line-height: 1.4;
  }
  .free-answer .pts {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    background: rgba(24, 180, 255, 0.1);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
  }
  .free-answer.is-ungraded .pts {
    background: var(--admin-divider);
    color: var(--admin-muted);
    padding: 8px 14px;
  }
  .free-answer .reason {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.5;
  }
  .free-answer .override-btn {
    min-height: 40px;
    padding: 10px 14px;
    font-size: 11px;
    width: 100%;
    text-align: center;
  }
}

.reveal-banner {
  margin-top: 16px;
  padding: 16px 20px;
  background: rgba(43, 209, 111, 0.08);
  border: 1px solid rgba(43, 209, 111, 0.3);
  border-radius: var(--admin-radius-md);
  font-size: 17px;
  color: var(--admin-strong);
  line-height: 1.5;
}
.reveal-banner .reveal-label {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}
.empty-state {
  padding: 32px 22px;
  text-align: center;
  color: var(--admin-muted);
  font-size: 16px;
  font-style: italic;
}

/* Leaderboard pane */
.lb-pane {
  background: var(--admin-surface);
  border: 1px solid var(--admin-divider);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-shadow-md);
  overflow: hidden;
  position: sticky;
  top: calc(var(--admin-top-h) + var(--admin-nav-h) + 16px);
}
@media (max-width: 900px) {
  .lb-pane { position: static; }
}
.lb-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--admin-divider);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, var(--admin-surface), var(--admin-surface-alt));
}
.lb-header h3 {
  margin: 0;
  font-size: var(--admin-fs-h-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lb-toggle {
  display: inline-flex;
  background: var(--admin-bg);
  padding: 4px;
  border-radius: 999px;
  align-self: flex-start;
}
.lb-toggle button {
  background: transparent;
  border: none;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--admin-muted);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 120ms ease;
}
.lb-toggle button.is-active {
  background: var(--admin-strong);
  color: var(--white);
}
.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: calc(100vh - var(--admin-top-h) - var(--admin-nav-h) - var(--admin-bottom-h) - 120px);
  overflow-y: auto;
}
@media (max-width: 900px) {
  .lb-list { max-height: none; }
}
.lb-entry {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--admin-divider);
  font-size: 18px;
}
.lb-entry:last-child { border-bottom: none; }
.lb-entry .rk {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--admin-muted);
  text-align: right;
}
.lb-entry.rk-1 .rk { color: var(--electric); font-size: 22px; }
.lb-entry.rk-2 .rk { color: #5fbbe0; }
.lb-entry.rk-3 .rk { color: var(--admin-strong); }
.lb-entry .who {
  font-weight: 600;
  color: var(--admin-strong);
}
.lb-entry .pts {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  color: var(--admin-strong);
  font-size: 20px;
}
.lb-entry .pts .delta {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--green);
  text-align: right;
  text-transform: uppercase;
  margin-top: 2px;
}
.lb-entry .pts .delta-neutral { color: var(--admin-muted); }
.lb-entry .lb-bonus {
  display: inline-block;
  margin-left: 8px;
  font-size: 16px;
  color: var(--electric);
  vertical-align: baseline;
}
.lb-fallback-note {
  display: block;
  padding: 12px 22px;
  font-size: 14px;
  color: var(--admin-muted);
  font-style: italic;
  text-align: center;
  list-style: none;
}
@media (max-width: 540px) {
  .lb-entry {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    column-gap: 14px;
    padding: 14px 16px;
    font-size: 16px;
  }
  .lb-entry .rk {
    font-size: 16px;
  }
  .lb-entry.rk-1 .rk { font-size: 19px; }
  .lb-entry .who {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  .lb-entry .pts {
    font-size: 18px;
  }
  .lb-entry .pts .delta {
    font-size: 11px;
  }
  .lb-entry .lb-bonus {
    margin-left: 6px;
    font-size: 14px;
  }
  .lb-fallback-note {
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* --- Wrap-up phase --- */
.wrap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .wrap-grid { grid-template-columns: 1fr; }
}
.wrap-banner {
  background: linear-gradient(135deg, #0a1535 0%, #15192a 50%, #1a5acc 100%);
  color: var(--white);
  padding: 36px 40px;
  border-radius: var(--admin-radius-lg);
  margin-bottom: 18px;
  box-shadow: var(--admin-shadow-md);
}
.wrap-banner .eyebrow {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: var(--admin-fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--electric);
  margin-bottom: 12px;
}
.wrap-banner h2 {
  color: var(--white);
  font-size: var(--admin-fs-banner);
  margin: 0 0 10px;
  line-height: 1.1;
}
.wrap-banner p {
  color: var(--bluegrey);
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}
.podium {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}
@media (max-width: 540px) {
  .podium { grid-template-columns: 1fr; }
}
.podium-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--admin-radius-md);
  padding: 18px 14px;
  text-align: center;
}
.podium-card .pr {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--electric);
}
.podium-card .pname {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 8px 0 6px;
  color: var(--white);
  line-height: 1.2;
  word-break: break-word;
}
.podium-card .pscore {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 30px;
  color: var(--electric);
}

/* --- Bottom action bar (the projector focal point) --- */
.admin-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--admin-strong);
  border-top: 3px solid var(--electric);
  padding: 18px 28px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 25;
  box-shadow: 0 -10px 28px rgba(15, 22, 45, 0.22);
}
.admin-bottom .ctx {
  flex: 1;
  min-width: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bluegrey);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-bottom .ctx .ctx-main {
  color: var(--white);
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 700;
  line-height: 1.3;
}
.admin-bottom .actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.admin-action-primary {
  background: var(--electric);
  color: var(--navy-dark);
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: var(--admin-fs-btn-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 20px 36px;
  border: none;
  border-radius: var(--admin-radius-md);
  cursor: pointer;
  min-height: 64px;
  min-width: 240px;
  transition: transform 80ms ease, background 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 6px 20px rgba(24, 180, 255, 0.45);
}
.admin-action-primary:hover {
  background: #2dc4ff;
  box-shadow: 0 8px 26px rgba(24, 180, 255, 0.55);
}
.admin-action-primary:active { transform: scale(0.98); }
.admin-action-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.admin-action-secondary {
  background: transparent;
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: var(--admin-fs-btn-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  min-height: 56px;
}
.admin-action-secondary:hover {
  border-color: var(--electric);
  color: var(--electric);
}
@media (max-width: 900px) {
  .admin-bottom { padding: 14px 18px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); gap: 12px; }
  .admin-bottom .ctx .ctx-main { font-size: 16px; }
  .admin-action-primary { min-width: 200px; padding: 16px 24px; min-height: 56px; }
  .admin-action-secondary { padding: 14px 16px; min-height: 50px; }
}
@media (max-width: 720px) {
  .admin-bottom { padding: 12px 14px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); gap: 10px; }
  .admin-bottom .ctx .ctx-main { font-size: 15px; }
  .admin-bottom .ctx > div:not(.ctx-main) { display: none; }
  .admin-action-primary { min-width: 0; padding: 16px 18px; min-height: 54px; }
  .admin-action-secondary { padding: 14px 12px; min-height: 50px; }
}
@media (max-width: 540px) {
  .admin-bottom .ctx { display: none; }
  .admin-bottom .actions { flex: 1; }
  .admin-action-primary { flex: 1; padding: 16px 12px; min-height: 56px; }
  .admin-action-secondary { padding: 14px 14px; min-height: 56px; }
}

/* --- Drawers --- */
.admin-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 100%);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow-lg);
  z-index: 40;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 220ms ease;
  font-size: var(--admin-fs-base);
}
.admin-drawer.is-open { transform: translateX(0); }
@media (max-width: 720px) {
  .admin-drawer { width: min(94vw, 520px); }
}
@media (max-width: 540px) {
  .admin-drawer { width: 100%; }
}
.admin-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 12, 26, 0.55);
  z-index: 39;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.admin-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.admin-drawer-h {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--admin-divider);
}
.admin-drawer-h h3 {
  margin: 0;
  font-size: var(--admin-fs-h-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-drawer-h button {
  background: transparent;
  border: 1px solid var(--admin-divider);
  color: var(--admin-muted);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 5px;
  min-height: 42px;
}
.admin-drawer-h button:hover { color: var(--electric); background: var(--admin-bg); border-color: var(--electric); }
.admin-drawer-b {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
@media (max-width: 540px) {
  .admin-drawer-h { padding: 14px 16px; }
  .admin-drawer-h button { padding: 10px 16px; min-height: 44px; font-size: 12px; }
  .admin-drawer-b { padding: 14px 16px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

.q-jump-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q-jump-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 -2px;
  padding: 0 2px;
}
.q-jump-section.is-first {
  margin-top: 0;
}
.q-jump-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--admin-divider);
}
.q-jump-section-label {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--admin-muted);
  white-space: nowrap;
}
@media (max-width: 540px) {
  .q-jump-section {
    margin: 10px 0 -2px;
  }
  .q-jump-section-label {
    font-size: 9px;
    letter-spacing: 0.1em;
    white-space: normal;
  }
}
.q-jump-item {
  display: flex;
  flex-direction: column;
}
.q-jump-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid var(--admin-divider);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-surface);
  transition: border-color 120ms ease, background 120ms ease;
  overflow: hidden;
}
.q-jump-item.is-expanded .q-jump-row {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.q-jump-row:hover {
  border-color: var(--electric);
}
.q-jump-row:hover .q-jump-main {
  background: var(--admin-surface-alt);
}
.q-jump-row.is-current {
  border-color: var(--electric);
  background: rgba(24, 180, 255, 0.07);
}
.q-preview-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-right: 1px solid var(--admin-divider);
  color: var(--admin-muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.q-preview-toggle:hover {
  background: var(--admin-surface-alt);
  color: var(--admin-strong);
}
.q-preview-toggle:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: -2px;
}
.q-preview-chev {
  display: inline-block;
  font-size: 11px;
}
.q-jump-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 120ms ease;
  min-width: 0;
}
.q-jump-main .qkind {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--admin-bg);
  color: var(--admin-muted);
  padding: 6px 10px;
  border-radius: 5px;
  min-width: 44px;
  text-align: center;
}
.q-jump-row.is-current .qkind {
  background: var(--electric);
  color: var(--navy-dark);
}
.q-jump-row .qlabel {
  font-size: 16px;
  color: var(--admin-strong);
  font-weight: 600;
  line-height: 1.35;
}
.q-jump-row .qhint {
  font-size: 13px;
  color: var(--admin-muted);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Drawer: player list + search */
.admin-drawer .player-search {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--admin-divider);
  border-radius: 8px;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  background: var(--admin-surface);
  color: var(--admin-strong);
  box-sizing: border-box;
  outline: none;
  transition: border-color 120ms ease;
}
.admin-drawer .player-search:focus {
  border-color: var(--electric);
}
.admin-drawer .ans-row {
  padding: 14px 16px;
  border: 1px solid var(--admin-divider);
  border-radius: var(--admin-radius-md);
  background: var(--admin-surface);
  margin-bottom: 10px;
}
.admin-drawer .ans-row + .ans-row { margin-top: 0; }
.player-breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.player-breakdown .brk-part {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.player-breakdown .brk-base {
  color: var(--navy);
}
.player-breakdown .brk-speed {
  color: var(--electric);
}
.player-breakdown .brk-streak {
  color: var(--navy);
}
.player-breakdown .brk-icon {
  font-size: 13px;
  line-height: 1;
}
.player-breakdown .brk-op {
  color: var(--bluegrey);
  font-weight: 500;
}
.player-breakdown .brk-total {
  color: var(--navy);
  font-weight: 800;
}
.scoring-note {
  margin-top: 12px;
  text-align: center;
}
.scoring-note > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  padding: 5px 12px;
  border: 1px solid rgba(10, 25, 47, 0.12);
  border-radius: 999px;
  background: rgba(10, 25, 47, 0.03);
  color: var(--slate);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.scoring-note > summary::-webkit-details-marker {
  display: none;
}
.scoring-note > summary:hover,
.scoring-note[open] > summary {
  color: var(--navy);
  border-color: rgba(10, 25, 47, 0.22);
  background: rgba(10, 25, 47, 0.06);
}
.scoring-note .scoring-note-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bluegrey);
  color: var(--white);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
}
.scoring-note[open] .scoring-note-i {
  background: var(--electric);
  color: var(--navy-dark);
}
.scoring-rules {
  list-style: none;
  margin: 10px auto 0;
  padding: 12px 14px;
  max-width: 380px;
  text-align: left;
  background: rgba(10, 25, 47, 0.04);
  border: 1px solid rgba(10, 25, 47, 0.08);
  border-radius: 10px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--navy);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.scoring-rules li {
  padding: 6px 0;
}
.scoring-rules li + li {
  border-top: 1px solid rgba(10, 25, 47, 0.06);
}
.scoring-rules b {
  color: var(--navy);
  font-weight: 700;
}
.scoring-rules .brk-icon {
  color: var(--electric);
  font-size: 14px;
  margin-right: 1px;
}

.q-preview {
  border: 1px solid var(--admin-divider);
  border-top: none;
  border-bottom-left-radius: var(--admin-radius-sm);
  border-bottom-right-radius: var(--admin-radius-sm);
  background: var(--admin-surface-alt);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.q-jump-row.is-current + .q-preview {
  border-color: var(--electric);
  background: rgba(24, 180, 255, 0.04);
}
.q-preview-section {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--admin-muted);
}
.q-preview-text-main {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--admin-strong);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.q-preview-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.q-preview-opt {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-divider);
  border-radius: 6px;
  min-width: 0;
}
.q-preview-opt.is-correct {
  border-color: var(--green);
  background: rgba(43, 209, 111, 0.08);
}
.q-preview-ltr {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: var(--admin-strong);
  text-align: center;
}
.q-preview-opt.is-correct .q-preview-ltr {
  color: var(--green);
}
.q-preview-text {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--admin-strong);
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}
.q-preview-correct {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--green);
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.q-preview-note {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: italic;
  color: var(--admin-muted);
  padding: 6px 0;
}
.q-preview-reveal {
  margin-top: 4px;
  padding: 10px 12px;
  background: rgba(43, 209, 111, 0.08);
  border: 1px solid rgba(43, 209, 111, 0.3);
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--admin-strong);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.q-preview-reveal-label {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}
@media (max-width: 540px) {
  .q-preview {
    padding: 12px 12px 14px;
  }
  .q-preview-opt {
    grid-template-columns: 22px 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 4px;
    padding: 8px 10px;
  }
  .q-preview-ltr {
    grid-row: 1 / span 2;
    align-self: start;
    padding-top: 1px;
  }
  .q-preview-correct {
    grid-column: 2;
    justify-self: start;
  }
}

/* ===== Big-screen mode (projector / "Show on screen") ===== */

.q-pane-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.q-bigscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--admin-strong);
  background: var(--white);
  border: 1px solid var(--admin-divider);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.q-bigscreen-btn:hover {
  border-color: var(--electric);
  color: var(--electric);
  box-shadow: 0 0 0 3px rgba(24, 180, 255, 0.12);
}
.q-bigscreen-btn .bs-glyph {
  font-size: 16px;
  line-height: 1;
  color: var(--electric);
}
@media (max-width: 540px) {
  .q-bigscreen-btn {
    padding: 8px 12px;
    font-size: 11px;
  }
  .q-bigscreen-btn .bs-glyph { font-size: 14px; }
}

/* The fullscreen exit button overlay */
.bigscreen-exit {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 200;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(10, 25, 47, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
  opacity: 0.45;
}
.bigscreen-exit:hover,
.bigscreen-exit:focus-visible {
  opacity: 1;
  background: rgba(10, 25, 47, 0.92);
  border-color: var(--electric);
}
.bigscreen-exit .bs-x {
  font-size: 16px;
  line-height: 1;
}
.bigscreen-exit .bs-hint {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

body.admin-bigscreen {
  background: var(--admin-strong);
  overflow: hidden;
}
body.admin-bigscreen .bigscreen-exit {
  display: inline-flex;
}

/* Hide chrome (but keep drawers reachable so the operator can open them
   from the floating .bigscreen-tools panel without leaving big screen). */
body.admin-bigscreen .admin-top,
body.admin-bigscreen .admin-nav,
body.admin-bigscreen .admin-bottom {
  display: none !important;
}
/* Keep drawers above bigscreen overlays when they open. */
body.admin-bigscreen .admin-drawer,
body.admin-bigscreen .admin-drawer-backdrop {
  z-index: 200;
}

/* Make main fill viewport */
body.admin-bigscreen #admin {
  display: block;
  height: 100vh;
}
body.admin-bigscreen .admin-main {
  position: fixed;
  inset: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: var(--admin-strong);
}

/* Drop the leaderboard column and let the question pane take everything */
body.admin-bigscreen .live-grid {
  grid-template-columns: 1fr;
  gap: 0;
  height: 100vh;
}
body.admin-bigscreen .lb-pane { display: none !important; }

body.admin-bigscreen .q-pane {
  height: 100vh;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--admin-strong);
  color: var(--white);
}
body.admin-bigscreen .q-pane-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  /* Reserve space on BOTH sides:
     - right: the floating Exit pill (top:18 right:18, ~200px wide)
     - left: the floating Tools popover (top:16-32 left:20-44, ~160px wide)
     so the q-label and meta never slip beneath either control. */
  padding: 22px clamp(220px, 18vw, 300px) 22px clamp(180px, 16vw, 240px);
  flex: 0 0 auto;
}
body.admin-bigscreen .q-pane-header-info { gap: 16px; }
body.admin-bigscreen .q-pane-header .q-label {
  font-size: clamp(18px, 1.6vw, 26px);
  letter-spacing: 0.18em;
  color: var(--electric);
}
body.admin-bigscreen .q-pane-header .q-meta {
  font-size: clamp(14px, 1.1vw, 18px);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.1em;
}
body.admin-bigscreen .q-bigscreen-btn { display: none; }

/* Big-screen countdown timer (only visible while a question is active) */
.bigscreen-timer { display: none; }
body.admin-bigscreen .bigscreen-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  /* Sit in the bottom-right corner so it never overlaps the question header
     text or the answer choice rows. The .live-stats progress strip below
     gets matching right-padding so they share the bottom band cleanly. */
  bottom: clamp(20px, 3vh, 40px);
  right: clamp(20px, 2.6vw, 44px);
  z-index: 100;
  min-width: clamp(110px, 10vw, 180px);
  padding: clamp(10px, 1.6vh, 20px) clamp(14px, 1.8vw, 28px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Reserve room on the right of the live-stats strip for the bottom-right
   countdown timer so progress text doesn't run beneath it. */
body.admin-bigscreen .live-stats {
  padding-right: clamp(160px, 14vw, 240px);
}
body.admin-bigscreen .bigscreen-timer .bigscreen-timer-num {
  font-size: clamp(48px, 7vw, 120px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
body.admin-bigscreen .bigscreen-timer .bigscreen-timer-label {
  margin-top: clamp(4px, 0.6vh, 8px);
  font-size: clamp(12px, 1vw, 18px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
body.admin-bigscreen .bigscreen-timer.is-low {
  background: rgba(255, 86, 86, 0.16);
  border-color: rgba(255, 86, 86, 0.55);
  color: #ff8a8a;
  animation: bigscreenTimerPulse 1s ease-in-out infinite;
}
body.admin-bigscreen .bigscreen-timer.is-low .bigscreen-timer-label {
  color: rgba(255, 138, 138, 0.85);
}
body.admin-bigscreen .bigscreen-timer.is-out {
  animation: none;
  opacity: 0.85;
}
@keyframes bigscreenTimerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

body.admin-bigscreen .q-pane-body {
  padding: clamp(24px, 4vh, 56px) clamp(32px, 5vw, 80px);
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 32px);
  min-height: 0;
}
body.admin-bigscreen .q-pane-body .q-section {
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
body.admin-bigscreen .q-pane-body .q-text {
  font-size: clamp(38px, 5.4vw, 92px);
  line-height: 1.15;
  color: var(--white);
  margin: 0;
  /* allow text to take what it needs but never overflow */
  flex: 0 0 auto;
}

/* Choices: HUGE */
body.admin-bigscreen .choice-list {
  margin: 0;
  gap: clamp(10px, 1.4vh, 20px);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.admin-bigscreen .choice-row {
  grid-template-columns: clamp(64px, 6vw, 110px) 1fr auto;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  padding: clamp(14px, 2vh, 28px) clamp(20px, 2.4vw, 36px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  flex: 1 1 0;
  min-height: 0;
}
body.admin-bigscreen .choice-row .ltr {
  font-size: clamp(28px, 3.4vw, 56px);
  padding: clamp(8px, 1.2vh, 16px) 0;
  background: var(--white);
  color: var(--admin-strong);
  border-color: rgba(255, 255, 255, 0.6);
}
body.admin-bigscreen .choice-row .ctxt {
  font-size: clamp(24px, 2.8vw, 48px);
  line-height: 1.2;
  color: var(--white);
  font-weight: 600;
}
body.admin-bigscreen .choice-row .ccount {
  font-size: clamp(18px, 1.8vw, 30px);
  color: rgba(255, 255, 255, 0.65);
}
body.admin-bigscreen .choice-row .ccount b {
  font-size: clamp(24px, 2.6vw, 44px);
  color: var(--white);
}
body.admin-bigscreen .choice-row .fillbar {
  background: linear-gradient(90deg, rgba(24, 180, 255, 0.32), rgba(24, 180, 255, 0.06));
}
body.admin-bigscreen .choice-row.is-correct {
  background: rgba(43, 209, 111, 0.18);
  border-color: rgba(43, 209, 111, 0.6);
}
body.admin-bigscreen .choice-row.is-correct .ltr {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
body.admin-bigscreen .choice-row.is-correct .fillbar {
  background: linear-gradient(90deg, rgba(43, 209, 111, 0.4), rgba(43, 209, 111, 0.08));
}
body.admin-bigscreen .choice-row.is-incorrect { opacity: 0.55; }

/* Reveal banner big */
body.admin-bigscreen .reveal-banner {
  margin: 0;
  padding: clamp(18px, 2.6vh, 32px) clamp(24px, 3vw, 44px);
  font-size: clamp(22px, 2.4vw, 40px);
  background: rgba(43, 209, 111, 0.14);
  border-color: rgba(43, 209, 111, 0.4);
  color: var(--white);
  flex: 0 0 auto;
}
body.admin-bigscreen .reveal-banner .reveal-label {
  font-size: clamp(14px, 1.3vw, 20px);
  color: #5fe39a;
}

/* Free answers in big screen */
body.admin-bigscreen .free-answers {
  flex: 1 1 auto;
  overflow-y: auto;
  margin-top: 0;
  gap: clamp(10px, 1.2vh, 18px);
}
body.admin-bigscreen .free-answer {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  padding: clamp(14px, 2vh, 22px) clamp(18px, 2vw, 28px);
}
body.admin-bigscreen .free-answer .who {
  font-size: clamp(16px, 1.4vw, 22px);
  color: var(--white);
}
body.admin-bigscreen .free-answer .ans {
  font-size: clamp(20px, 2vw, 32px);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
}
body.admin-bigscreen .free-answer .pts {
  font-size: clamp(22px, 2.2vw, 36px);
}
body.admin-bigscreen .free-answer .reason {
  color: rgba(255, 255, 255, 0.7);
}

/* Slim progress strip at bottom (kept small for operator awareness) */
body.admin-bigscreen .live-stats {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: clamp(10px, 1.4vh, 18px);
  margin-top: 0;
  flex: 0 0 auto;
}
body.admin-bigscreen .live-stats .lstat {
  font-size: clamp(13px, 1.1vw, 17px);
  color: rgba(255, 255, 255, 0.7);
}
body.admin-bigscreen .live-stats .lstat b {
  font-size: clamp(18px, 1.6vw, 26px);
  color: var(--white);
}
body.admin-bigscreen .live-stats .progress-bar {
  background: rgba(255, 255, 255, 0.16);
}

body.admin-bigscreen .empty-state {
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(20px, 2vw, 30px);
}

/* Sensible scaling at small projector resolutions */
@media (max-width: 900px) {
  /* Tools popover collapses to icon-only at <=540px (see .bs-tools-label rule),
     so reserve a smaller-but-still-safe left padding here. */
  body.admin-bigscreen .q-pane-header { padding: 14px clamp(180px, 24vw, 220px) 14px clamp(120px, 22vw, 160px); }
  body.admin-bigscreen .q-pane-body {
    padding: 18px 24px;
    gap: 14px;
  }
  body.admin-bigscreen .q-pane-body .q-text {
    font-size: clamp(28px, 5.6vw, 56px);
  }
  body.admin-bigscreen .choice-row {
    grid-template-columns: 56px 1fr auto;
    padding: 12px 16px;
    gap: 14px;
  }
  body.admin-bigscreen .choice-row .ltr { font-size: 26px; padding: 8px 0; }
  body.admin-bigscreen .choice-row .ctxt { font-size: 22px; }
  body.admin-bigscreen .choice-row .ccount { font-size: 16px; }
  body.admin-bigscreen .choice-row .ccount b { font-size: 22px; }
  body.admin-bigscreen .reveal-banner { font-size: 20px; padding: 14px 18px; }
}
@media (max-width: 540px) {
  /* Tools toggle collapses to a small icon (~36px) at this breakpoint —
     reserve mirrored left padding so it doesn't sit on top of q-label. */
  body.admin-bigscreen .q-pane-header { padding: 12px 56px 12px 56px; }
  body.admin-bigscreen .q-pane-body { padding: 14px 16px; gap: 12px; }
  body.admin-bigscreen .q-pane-body .q-text { font-size: clamp(22px, 6vw, 36px); }
  body.admin-bigscreen .choice-row {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    padding: 10px 12px;
    align-items: start;
  }
  body.admin-bigscreen .choice-row .ltr {
    grid-column: 1; grid-row: 1 / span 2;
    align-self: start;
    font-size: 18px; padding: 6px 0;
  }
  body.admin-bigscreen .choice-row .ctxt {
    grid-column: 2; grid-row: 1;
    font-size: 18px; line-height: 1.3;
  }
  body.admin-bigscreen .choice-row .ccount {
    grid-column: 2; grid-row: 2;
    justify-self: start;
    font-size: 13px;
  }
  body.admin-bigscreen .choice-row .ccount b { font-size: 16px; }
  body.admin-bigscreen .bigscreen-exit {
    top: 10px; right: 10px;
    padding: 8px 12px; font-size: 11px;
  }
  body.admin-bigscreen .bigscreen-exit .bs-label { display: none; }
}

/* Pre-registration banner shown above the player signup form when a draft
   game has a future scheduledAt. Reuses the dark navy hero shell. */
.pre-banner {
  background: linear-gradient(135deg, rgba(24, 180, 255, 0.18), rgba(24, 180, 255, 0.04));
  border: 1px solid rgba(24, 180, 255, 0.45);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  color: var(--white);
}
.pre-banner-eyebrow {
  font-family: "Poppins", Trebuchet MS, Arial, sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--electric);
  margin-bottom: 4px;
}
.pre-banner-title {
  font-family: "Poppins", Trebuchet MS, Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--white);
  margin-bottom: 6px;
  line-height: 1.3;
}
.pre-banner-sub {
  color: var(--bluegrey);
  font-size: 13px;
  line-height: 1.5;
}

/* Holding-screen countdown for pre-registered players. Tabular figures so
   the numbers don't jitter as they tick. */
.holding-countdown {
  font-family: "Poppins", Trebuchet MS, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 7vw, 52px);
  color: var(--electric);
  letter-spacing: 0.04em;
  margin: 18px 0 4px;
  font-variant-numeric: tabular-nums;
}

/* Modernized Schedule dialog — used for both the new-game flow and the
   "edit schedule" action on the games dashboard. */
.schedule-dialog .dialog-inner {
  width: min(480px, 92vw);
  padding: 28px 28px 22px;
}
.schedule-dialog .schedule-eyebrow {
  font-family: "Poppins", Trebuchet MS, Arial, sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--electric);
  margin-bottom: 6px;
}
.schedule-dialog h3.schedule-title {
  margin: 0 0 6px;
  font-family: "Poppins", Trebuchet MS, Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.schedule-dialog .schedule-msg {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
}
.schedule-dialog .schedule-field-wrap {
  background: var(--off-white, #f4f6fb);
  border: 1px solid var(--border, #DDE3F0);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.schedule-dialog .schedule-field-wrap:focus-within {
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(24, 180, 255, 0.18);
}
.schedule-dialog .schedule-field-wrap label {
  display: block;
  font-family: "Poppins", Trebuchet MS, Arial, sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  margin-bottom: 6px;
}
.schedule-dialog .schedule-field-wrap input[type="datetime-local"] {
  width: 100%;
  border: none;
  background: transparent;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  color: var(--navy);
  padding: 4px 0;
  outline: none;
}
.schedule-dialog .schedule-quickpicks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.schedule-dialog .schedule-quickpicks button {
  background: #fff;
  border: 1px solid var(--border, #DDE3F0);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.schedule-dialog .schedule-quickpicks button:hover {
  border-color: var(--electric);
  color: var(--electric);
}
.schedule-dialog .schedule-preview {
  margin-top: 12px;
  font-size: 13px;
  color: var(--slate);
  line-height: 1.45;
  min-height: 1.4em;
}
.schedule-dialog .schedule-preview b {
  color: var(--navy);
  font-weight: 600;
}
.schedule-dialog .schedule-preview.is-warn b {
  color: #c24545;
}
.schedule-dialog .schedule-err {
  display: none;
  color: #c24545;
  font-size: 13px;
  margin-top: 10px;
}
.schedule-dialog .schedule-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 20px;
}
.schedule-dialog .schedule-actions .btn {
  padding: 10px 18px;
}

/* ============================================================
   Task #157 polish: back link, brand name, test badges,
   bigscreen tools panel
   ============================================================ */

/* Back-to-dashboard link in admin top bar (in-game view) */
.admin-top-back {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.admin-top-back:hover,
.admin-top-back:focus-visible {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
  text-decoration: none;
  outline: none;
}
.admin-top-brand-name {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: clamp(220px, 30vw, 520px);
}

/* Test-mode pill placement helpers per surface. The pill itself is .test-pill
   (defined above) — these rules only handle local positioning/spacing. */
.games-card-head .test-pill { margin-left: 8px; }
.player-test-pill { margin-left: 8px; align-self: center; }

/* Big-screen "Tools" floating button + popover so the operator can open
   Questions / Players / Recap / Feedback drawers without leaving big screen. */
.bigscreen-tools { display: none; }
body.admin-bigscreen .bigscreen-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: fixed;
  top: clamp(16px, 2.4vh, 32px);
  left: clamp(20px, 2.6vw, 44px);
  z-index: 110;
}
.bigscreen-tools-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bigscreen-tools-toggle:hover,
.bigscreen-tools-toggle:focus-visible {
  color: var(--white);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.36);
  outline: none;
}
.bigscreen-tools.is-open .bigscreen-tools-toggle {
  background: var(--electric);
  color: var(--navy-dark);
  border-color: var(--electric);
}
.bigscreen-tools-toggle .bs-tools-dot {
  font-size: 14px;
  line-height: 1;
}
.bigscreen-tools-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(20, 28, 50, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
  min-width: 200px;
}
.bigscreen-tools-panel .admin-nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.85);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.bigscreen-tools-panel .admin-nav-btn:hover,
.bigscreen-tools-panel .admin-nav-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.18);
  outline: none;
}
.bigscreen-tools-panel .admin-nav-btn.is-active {
  background: var(--electric);
  color: var(--navy-dark);
  border-color: var(--electric);
}
/* Visually separate the back-to-dashboard control from drawer triggers in
   the big-screen tools popover so it reads as primary navigation. */
.bigscreen-tools-panel .bigscreen-tools-back {
  font-weight: 700;
  letter-spacing: 0.06em;
}
.bigscreen-tools-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: 4px 4px;
}
@media (max-width: 540px) {
  body.admin-bigscreen .bigscreen-tools {
    top: 10px;
    left: 10px;
  }
  .bigscreen-tools-toggle {
    padding: 6px 10px;
    font-size: 11px;
  }
  .bigscreen-tools-toggle .bs-tools-label { display: none; }
}

/* ---- Call sign picker (signup) ---- */
.callsign-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
  min-height: 56px;
}
.callsign-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--bluegrey, #6b7a8e);
  padding: 12px 0;
}
.callsign-option {
  appearance: none;
  cursor: pointer;
  background: var(--white, #fff);
  color: var(--navy, #0a1f44);
  border: 2px solid rgba(10, 31, 68, 0.18);
  border-radius: 12px;
  padding: 14px 10px;
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 700;
  /* Names are single PascalCase tokens — keep them on one line and let the
     font shrink slightly on narrow cards instead of breaking mid-word. */
  font-size: clamp(12px, 9.5cqi, 15px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  transition: transform 0.08s ease, border-color 0.12s ease, background 0.12s ease;
  /* Safety net only: realistic names should fit on one line thanks to the
     font clamp + container query above. If an unusually long name still
     can't fit at the minimum font size, allow it to wrap rather than
     overflow the card. */
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  container-type: inline-size;
}
.callsign-option:hover {
  border-color: var(--electric, #2dd4ff);
}
.callsign-option:focus-visible {
  outline: 3px solid var(--electric, #2dd4ff);
  outline-offset: 2px;
}
.callsign-option.selected {
  background: var(--electric, #2dd4ff);
  border-color: var(--electric, #2dd4ff);
  color: var(--navy, #0a1f44);
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(45, 212, 255, 0.25);
}
.callsign-shuffle {
  appearance: none;
  cursor: pointer;
  background: transparent;
  color: var(--bluegrey, #6b7a8e);
  border: 1px dashed rgba(10, 31, 68, 0.25);
  border-radius: 10px;
  padding: 8px 12px;
  margin-top: 8px;
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  align-self: flex-start;
}
.callsign-shuffle:hover:not([disabled]) {
  color: var(--navy, #0a1f44);
  border-color: var(--navy, #0a1f44);
}
.callsign-shuffle[disabled] {
  opacity: 0.5;
  cursor: progress;
}
@media (max-width: 380px) {
  .callsign-options {
    gap: 6px;
  }
  .callsign-option {
    padding: 11px 6px;
    font-size: clamp(11px, 9.5cqi, 14px);
  }
}