/* Shared calm presentation for the hub, quiz, scoreboard and management pages.
   Keep movement out of interactions; colour and borders communicate state. */
:root {
  --calm-panel: #251d46;
  --calm-border: rgba(255, 255, 255, .18);
  --calm-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

body {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(245, 169, 184, .10), transparent 42%),
    radial-gradient(ellipse at 100% 0%, rgba(91, 207, 251, .10), transparent 42%),
    #17112d;
}

/* Remove layered shine and patterned backdrops. Flag accents stay in place. */
body::after,
.page .hero::before,
.page .scoreboard-hero::before,
.page .card::before,
.page .card::after,
.page .status-card::before,
.page .status-card::after,
.page .rules-card::before,
.page .rules-card::after,
.page .scoreboard-hero::after,
.page .score-stat-card::after,
.page .leaderboard-player-card::after,
.page .answer-card::after { content: none; }

/* Admin's rainbow is body::after; uploader's rainbow is body::before. */
body:has(.shell)::after { content: ""; }
body:has(.shell)::before,
body:has(.page)::before { content: none; }

.topbar, .hero, .card, .status-card, .rules-card, .past-row,
.scoreboard-hero, .score-stat-card, .leaderboard-player-card,
.answer-card, .empty, .result-mood-card, .status-box {
  background: var(--calm-panel) !important;
  border-color: var(--calm-border) !important;
  box-shadow: var(--calm-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 20px;
}

.page .topbar {
  position: relative;
  top: auto;
  padding: 0;
  margin-bottom: 24px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
}

.page { width: min(1120px, calc(100% - 32px)); padding: 28px 0 40px; }
.page .section { margin-top: 32px; }
.page .grid, .page .quiz-status-grid, .page .score-stats-grid { gap: 18px; }
.page .card, .page .status-card, .page .rules-card { padding: clamp(20px, 3vw, 28px); }
.page .hero { padding: clamp(24px, 4vw, 44px); margin-bottom: 28px; }
.page .hero-branded { min-height: 0; gap: 28px; }
.page .hero-branded h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.08; letter-spacing: -.035em; }
.page .hero-branded .hero-art img { width: min(100%, 320px); filter: none; }
.page .hero p { line-height: 1.6; }
.page .quiz-shell .hero h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.15; }
.page .section-title { font-size: clamp(1.3rem, 3vw, 1.7rem); letter-spacing: .01em; text-shadow: none; }
.page .card h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.page .status-card h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.2; }
.page .rules-card h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.page .quiz-shell .card h2 { font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1.25; }

.page .scoreboard-hero { padding: clamp(28px, 4vw, 44px) !important; }
.page .scoreboard-hero h1 { font-size: clamp(2rem, 5vw, 3.8rem) !important; line-height: 1.12 !important; }
.page .scoreboard-hero .eyebrow { margin-bottom: 18px !important; }
.page .marquee, .page .scoreboard-icons { display: none !important; }
.page .leaderboard-player-card:first-child::before { content: none; }

.page .badge, .page .eyebrow, .page .pride-message {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid var(--calm-border);
  box-shadow: none !important;
  letter-spacing: .025em;
}
.page .rules-list div, .page .rules-list div:hover,
.page .leaderboard-metric {
  background: rgba(255, 255, 255, .04) !important;
  box-shadow: none !important;
}
.page .rules-list div { border: 0; padding: 12px; }
.page .status-icon { box-shadow: none; background: rgba(255,255,255,.06); }
.page .brand-chip, .page .admin-link, .page .ready-check,
.page .scoreboard-tab { background: rgba(255,255,255,.07) !important; }
.page .brand-chip:hover, .page .admin-link:hover,
.page .ready-check:hover, .page .scoreboard-tab:hover {
  background: rgba(255,255,255,.12) !important;
}
.page .scoreboard-tab.active { background: #44335f !important; border-color: #f5a9b8 !important; }
.page .ready-check { box-shadow: none !important; }

button, .btn, .button, .link-button, .brand-chip, .admin-link,
.ready-check, input, select, textarea {
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, box-shadow 160ms ease;
}
button, .btn, .button, .link-button, .brand-chip, .admin-link {
  min-height: 44px;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.page .btn:hover { filter: none; }
.page .btn.hot { background: #e75a88; color: #201126; }
.page .btn.hot:hover { background: #f17b9f; }
.page .btn.cyan { background: #76d0ee; color: #151d32; }
.page .btn.cyan:hover { background: #9bddf2; }
.page .btn.yellow { background: #f3d575; color: #282012; }
.page .btn.yellow:hover { background: #fae39b; }
.page .option { min-height: 60px; border-radius: 16px; line-height: 1.4; }
.page .option.selected { box-shadow: 0 0 0 2px rgba(81,216,138,.3); }
.page .timer-number { box-shadow: none; }
.page .timer-number.urgent { background: #f5a9b8; color: #291327; box-shadow: none; }

input, select, textarea, .input, .leaderboard-search, .quiz-history-select {
  background: #1b1534 !important;
  border-color: var(--calm-border);
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .option:focus-visible,
:focus-visible {
  outline: 3px solid #5bcffb;
  outline-offset: 4px;
}
input:focus, select:focus, textarea:focus,
.input:focus, .leaderboard-search:focus, .quiz-history-select:focus {
  border-color: #5bcffb;
  box-shadow: 0 0 0 3px rgba(91,207,251,.16);
}
button:disabled, .btn:disabled { cursor: not-allowed; }

@media (max-width: 760px) {
  .page .topbar { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .page .topbar .brand-chip, .page .topbar .admin-link { width: auto; }
  .page .hero-branded .hero-art img { width: min(60vw, 220px); }
  .page .section { margin-top: 24px; }
}

/* This comes after every style layer, including the standalone admin/uploader. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}