/**
 * Trivia App Design System
 * Modern, professional theme with cohesive color palette and accessible contrast
 * No functional changes - only visual improvements
 */

/* ===== DESIGN TOKENS ===== */
:root {
  /* Brand + accent */
  --brand:        #4f46e5; /* indigo-600 */
  --brand-700:    #4338ca;
  --accent:       #f59e0b; /* amber-500 for highlights */

  /* Semantic states */
  --ok:           #16a34a; /* green-600 */
  --ok-700:       #15803d;
  --warn:         #f59e0b; /* amber-500 */
  --err:          #dc2626; /* red-600 */
  --err-700:      #b91c1c;
  --info:         #0ea5e9; /* sky-500 */
  --muted:        #6b7280; /* gray-500 */

  /* Neutrals */
  --bg:           #0b1020; /* deep slate for host */
  --surface:      #141a2a;
  --surface-2:    #1b2236;
  --card:         #1e2740;
  --border:       #2a3555;
  --text:         #e5e7eb; /* gray-200 */
  --text-dim:     #cbd5e1; /* gray-300 */
  --text-muted:   #94a3b8; /* gray-400 */

  /* Light surfaces (player side) */
  --bg-light:     #f6f7fb;
  --surface-light:#ffffff;
  --border-light: #e5e7eb;
  --text-dark:    #111827;
  --text-mid:     #374151;

  /* Controls */
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    16px;
  --shadow-1:     0 4px 14px rgba(0,0,0,0.12);
  --shadow-2:     0 8px 30px rgba(2,6,23,0.25);

  /* Typography scale */
  --fs-xxs: clamp(10px, 1.5vw, 12px);
  --fs-xs:  clamp(12px, 1.6vw, 13px);
  --fs-sm:  clamp(13px, 1.7vw, 14px);
  --fs-md:  clamp(15px, 1.8vw, 16px);
  --fs-lg:  clamp(18px, 2.2vw, 20px);
  --fs-xl:  clamp(22px, 3vw, 28px);
  --fs-2xl: clamp(28px, 4vw, 36px);
}

/* ===== TYPOGRAPHY (GLOBAL) ===== */
html, body {
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== THEME WRAPPERS ===== */
/* Host (dark, subtle gradient) */
body.host-root {
  background: radial-gradient(1200px 800px at 20% -10%, #11183a 0%, var(--bg) 50%, #070a14 100%);
  color: var(--text);
}

/* Player (light, clean) */
body.player-root {
  background: var(--bg-light);
  color: var(--text-dark);
}

/* ===== SURFACES & CARDS ===== */
.container-fluid,
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: var(--text);
}

.player-root .container-fluid,
.player-root .card {
  background: var(--surface-light);
  border: 1px solid var(--border-light);
  color: var(--text-dark);
}

/* Player scroll container */
.player-scroll {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.player-root .player-scroll {
  background: transparent;
  backdrop-filter: none;
}

/* ===== HEADINGS & TEXT ===== */
h1, h2, h3, h4, h5, h6 {
  color: inherit;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-shadow: none;
  margin-bottom: 0.5rem;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.text-muted {
  color: var(--text-muted) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline !important;
}

.player-root .text-muted {
  color: var(--text-mid) !important;
}

/* ===== BUTTONS (UNIFIED SYSTEM) ===== */
.btn {
  border-radius: var(--radius-sm) !important;
  border-width: 1px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: transform 0.06s ease, box-shadow 0.2s ease, background-color 0.15s ease !important;
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.player-root .btn {
  background: var(--surface-light) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-light) !important;
}

.btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 60%, white) !important;
  outline-offset: 2px;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
}

/* Button variants */
.btn-primary {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

.btn-primary:hover:not(:disabled) {
  background: var(--brand-700) !important;
  border-color: var(--brand-700) !important;
  color: #fff !important;
}

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

.btn-success:hover:not(:disabled) {
  background: var(--ok-700) !important;
  border-color: var(--ok-700) !important;
  color: #fff !important;
}

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

.btn-danger:hover:not(:disabled) {
  background: var(--err-700) !important;
  border-color: var(--err-700) !important;
  color: #fff !important;
}

.btn-warning {
  background: var(--warn) !important;
  border-color: var(--warn) !important;
  color: #111 !important;
}

.btn-outline-primary,
.btn-outline-secondary {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.player-root .btn-outline-primary,
.player-root .btn-outline-secondary {
  color: var(--text-dark) !important;
  border-color: var(--border-light) !important;
}

.btn-outline-primary:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled) {
  background: var(--surface) !important;
  border-color: var(--brand) !important;
  color: var(--text) !important;
}

.player-root .btn-outline-primary:hover:not(:disabled),
.player-root .btn-outline-secondary:hover:not(:disabled) {
  background: #f9fafb !important;
  border-color: var(--brand) !important;
  color: var(--text-dark) !important;
}

/* ===== ANSWER TILES (CLEAR STATE SYSTEM) ===== */
.choice {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 1.1rem 1.2rem !important;
  margin-bottom: 0.5rem !important;
  border-radius: var(--radius) !important;
  border: 2px solid var(--border) !important;
  background: var(--surface-2) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: var(--fs-lg) !important;
  box-shadow: var(--shadow-1) !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease !important;
  opacity: 1 !important;
  line-height: 1.3 !important;
}

.choice:hover:not(:disabled) {
  background: color-mix(in srgb, var(--surface-2) 80%, white 20%) !important;
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--border) 70%, var(--brand) 30%) !important;
}

.choice:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

/* Choice states */
.choice.is-selected,
.choice[data-selected="true"],
.choice.btn-primary {
  background: color-mix(in srgb, var(--brand) 20%, var(--surface-2) 80%) !important;
  border-color: var(--brand) !important;
  color: var(--text) !important;
}

.choice.is-correct,
.choice.correct-answer {
  background: color-mix(in srgb, var(--ok) 18%, var(--surface-2) 82%) !important;
  border-color: var(--ok) !important;
  color: var(--text) !important;
}

.choice.is-wrong,
.choice.btn-danger {
  background: color-mix(in srgb, var(--err) 18%, var(--surface-2) 82%) !important;
  border-color: var(--err) !important;
  color: var(--text) !important;
}

/* Player (light) overrides */
.player-root .choice {
  background: var(--surface-light) !important;
  border-color: var(--border-light) !important;
  color: var(--text-dark) !important;
  padding: 1.1rem 1.2rem !important;
  font-weight: 700 !important;
  font-size: var(--fs-lg) !important;
  border-width: 2px !important;
  line-height: 1.3 !important;
}

.player-root .choice:hover:not(:disabled) {
  background: #f9fafb !important;
  border-color: color-mix(in srgb, var(--border-light) 70%, var(--brand) 30%) !important;
}

.player-root .choice.is-selected,
.player-root .choice[data-selected="true"],
.player-root .choice.btn-primary {
  background: color-mix(in srgb, var(--brand) 12%, white 88%) !important;
  border-color: var(--brand) !important;
  color: var(--text-dark) !important;
}

.player-root .choice.is-correct,
.player-root .choice.correct-answer {
  background: color-mix(in srgb, var(--ok) 12%, white 88%) !important;
  border-color: var(--ok) !important;
  color: var(--text-dark) !important;
}

.player-root .choice.is-wrong,
.player-root .choice.btn-danger {
  background: color-mix(in srgb, var(--err) 12%, white 88%) !important;
  border-color: var(--err) !important;
  color: var(--text-dark) !important;
}

/* ===== TIMERS & PROGRESS BARS ===== */
.progress {
  background: rgba(255,255,255,0.08) !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
}

.player-root .progress {
  background: #eef2ff !important;
}

.progress-bar {
  background: var(--brand) !important;
  transition: width 0.25s ease, background-color 0.25s ease !important;
  border-radius: calc(var(--radius-sm) - 2px) !important;
  box-shadow: none !important;
}

.progress-bar.is-warning,
.progress-bar.bg-warning {
  background: var(--warn) !important;
}

.progress-bar.is-danger,
.progress-bar.bg-danger {
  background: var(--err) !important;
}

.progress-bar.bg-info {
  background: var(--info) !important;
}

/* Timer text */
.badge {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  font-weight: 600 !important;
}

.player-root .badge {
  background: var(--surface-light) !important;
  color: var(--text-dark) !important;
  border-color: var(--border-light) !important;
}

/* ===== POPUPS & MODALS ===== */
.modal-overlay,
.popup-overlay {
  background: rgba(7, 10, 20, 0.86) !important;
  backdrop-filter: blur(6px) !important;
}

/* #playerFast (announce-fastest / fast-track popup): NO backdrop blur. Its variants always
   paint an OPAQUE gradient over the whole overlay, so the generic blur above was invisible
   GPU work — the same backdrop-filter class that shipped the Android wheel freeze — on the
   exact frame the entrance + confetti start (2026-07-07, celebration perf pass). */
#playerFast.modal-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Specific styling for modal overlays when shown */
.modal-overlay:not(.d-none),
.popup-overlay:not(.d-none) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Wheel popup overlay - different from modal overlay */
.wheel-popup-overlay {
  background: rgba(7, 10, 20, 0.86) !important;
  backdrop-filter: blur(6px) !important;
}

.wheel-popup-overlay:not(.d-none) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-direction: column !important;
}

.popup-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-2) !important;
  color: var(--text) !important;
  padding: 24px !important;
}

.popup-title {
  font-size: var(--fs-xl) !important;
  margin-bottom: 0.5rem !important;
  color: var(--text) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

.popup-subtitle {
  color: var(--text-muted) !important;
  font-size: var(--fs-sm) !important;
}

/* Wheel container */
.wheel-container {
  position: relative !important;
  margin: 0 auto !important;
}

/* ===== ANSWER REVEAL & BANNERS ===== */
.answer-reveal,
#answer-reveal,
#dispAnswer {
  background: color-mix(in srgb, var(--ok) 12%, var(--surface) 88%) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--ok) 50%, var(--border) 50%) !important;
  border-radius: var(--radius-lg) !important;
  padding: 16px 20px !important;
  box-shadow: var(--shadow-1) !important;
  text-shadow: none !important;
}

.player-root .answer-reveal,
.player-root #answer-reveal,
.player-root #dispAnswer {
  background: color-mix(in srgb, var(--ok) 10%, white 90%) !important;
  color: var(--text-dark) !important;
  border-color: color-mix(in srgb, var(--ok) 30%, var(--border-light) 70%) !important;
}

/* ===== LISTS & SCOREBOARDS ===== */
.list-group-item {
  background: transparent !important;
  color: inherit !important;
  border-color: var(--border) !important;
  text-shadow: none !important;
}

.player-root .list-group-item {
  border-color: var(--border-light) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: inherit !important;
}

.player-root .card-header {
  border-bottom-color: var(--border-light) !important;
}

.card-body {
  color: inherit !important;
}

/* ===== FORMS ===== */
.form-control,
.form-select {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
}

.player-root .form-control,
.player-root .form-select {
  background: var(--surface-light) !important;
  border-color: var(--border-light) !important;
  color: var(--text-dark) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent) !important;
}

/* ===== ALERTS ===== */
.alert {
  border-radius: var(--radius) !important;
  border-width: 1px !important;
  text-shadow: none !important;
}

.alert-info {
  background: color-mix(in srgb, var(--info) 12%, var(--surface) 88%) !important;
  border-color: color-mix(in srgb, var(--info) 30%, var(--border) 70%) !important;
  color: var(--text) !important;
}

.alert-warning {
  background: color-mix(in srgb, var(--warn) 12%, var(--surface) 88%) !important;
  border-color: color-mix(in srgb, var(--warn) 30%, var(--border) 70%) !important;
  color: var(--text) !important;
}

.player-root .alert-info {
  background: color-mix(in srgb, var(--info) 10%, white 90%) !important;
  border-color: color-mix(in srgb, var(--info) 30%, var(--border-light) 70%) !important;
  color: var(--text-dark) !important;
}

.player-root .alert-warning {
  background: color-mix(in srgb, var(--warn) 10%, white 90%) !important;
  border-color: color-mix(in srgb, var(--warn) 30%, var(--border-light) 70%) !important;
  color: var(--text-dark) !important;
}

/* ===== GAME SESSION INFO ===== */
.session-info {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  box-shadow: var(--shadow-1) !important;
}

.player-root .session-info {
  background: var(--surface-light) !important;
  border-color: var(--border-light) !important;
}

.session-info .text-muted {
  color: var(--text-muted) !important;
}

.player-root .session-info .text-muted {
  color: var(--text-mid) !important;
}

/* ===== CONNECTION STATUS ===== */
.connection-status {
  font-size: var(--fs-xs) !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.3s ease !important;
}

.status-connected {
  color: var(--ok) !important;
  background-color: color-mix(in srgb, var(--ok) 15%, transparent) !important;
}

.status-disconnected,
.status-failed {
  color: var(--err) !important;
  background-color: color-mix(in srgb, var(--err) 15%, transparent) !important;
}

.status-reconnecting {
  color: var(--warn) !important;
  background-color: color-mix(in srgb, var(--warn) 15%, transparent) !important;
}

/* ===== ANIMATIONS (SUBTLE) ===== */
@keyframes correctPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.status-reconnecting {
  animation: pulse 2s infinite;
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== NUMERIC KEYPAD ===== */
.numeric-btn {
  aspect-ratio: 1;
  font-size: var(--fs-lg) !important;
  font-weight: 700 !important;
}

/* ===== BUZZER INTERFACE ===== */
/* New rectangular full-width buzz button with state classes */
.buzz-btn {
  width: 100% !important;
  max-width: 600px !important;
  min-height: 180px !important;
  border-radius: 20px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 20px auto !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, box-shadow 0.2s ease, background 0.3s ease !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.buzz-btn .buzz-btn-icon {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 8px;
}

.buzz-btn .buzz-btn-label {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* State: disabled (default/waiting) */
.buzz-btn.buzz-disabled {
  background: linear-gradient(145deg, #6c757d, #5a6268) !important;
  color: #adb5bd !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

/* State: available (ready to buzz) */
.buzz-btn.buzz-available {
  background: linear-gradient(145deg, #e74c3c, #c0392b) !important;
  color: #fff !important;
  box-shadow: 0 12px 35px rgba(220, 53, 69, 0.7), inset 0 -4px 10px rgba(0,0,0,0.3) !important;
  animation: buzzPulse 1.5s ease-in-out infinite !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  opacity: 1;
}

.buzz-btn.buzz-available:active {
  transform: scale(0.95) !important;
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.5) !important;
  animation: none !important;
}

/* State: sending (buzz in progress) */
.buzz-btn.buzz-sending {
  background: linear-gradient(145deg, #ffc107, #e0a800) !important;
  color: #212529 !important;
  box-shadow: 0 8px 25px rgba(255, 193, 7, 0.5) !important;
  cursor: wait !important;
  animation: none !important;
}

/* State: accepted (you're first!) */
.buzz-btn.buzz-accepted {
  background: linear-gradient(145deg, #28a745, #1e7e34) !important;
  color: #fff !important;
  box-shadow: 0 12px 35px rgba(40, 167, 69, 0.6) !important;
  animation: none !important;
}

/* State: rejected (too late) */
.buzz-btn.buzz-rejected {
  background: linear-gradient(145deg, #6c757d, #5a6268) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  animation: none !important;
  opacity: 0.8;
}

/* State: locked (someone else buzzed) */
.buzz-btn.buzz-locked {
  background: linear-gradient(145deg, #495057, #343a40) !important;
  color: #adb5bd !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  animation: none !important;
  opacity: 0.6;
}

@keyframes buzzPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); box-shadow: 0 15px 45px rgba(220, 53, 69, 0.8), inset 0 -4px 10px rgba(0,0,0,0.3); }
}

/* Legacy selectors — keep for backward compat but defer to .buzz-btn */
.buzzer-button:not(.buzz-btn) {
  width: 100% !important;
  max-width: 600px !important;
  min-height: 180px !important;
  border-radius: 20px !important;
}

/* Buzzer container styling */
#buzzer-container {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ===== MINI SCOREBOARD ===== */
.mini-scoreboard {
  background: var(--surface) !important;
  border-top: 2px solid var(--accent) !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(10px) !important;
  color: var(--text) !important;
}

/* ===== IMAGE STYLING ===== */
.img-thumbnail {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
}

.player-root .img-thumbnail {
  border-color: var(--border-light) !important;
}

/* ===== UTILITY OVERRIDES ===== */
.bg-primary {
  background: var(--brand) !important;
  color: #fff !important;
}

.bg-success {
  background: var(--ok) !important;
  color: #fff !important;
}

.bg-danger {
  background: var(--err) !important;
  color: #fff !important;
}

.bg-warning {
  background: var(--warn) !important;
  color: #111 !important;
}

.bg-secondary {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

.player-root .bg-secondary {
  background: #f8f9fa !important;
  color: var(--text-dark) !important;
}

.text-white {
  color: #fff !important;
}

.border-top {
  border-top: 1px solid var(--border) !important;
}

.player-root .border-top {
  border-top-color: var(--border-light) !important;
}

/* Additional component styles */
.minigame-button {
  height: 120px !important;
  font-size: 2rem !important;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Simon pads: a portrait grid — 2 columns (set by JS via --simon-cols) so 6 pads are
   a stable 2×3. Pads are sized by the row count (--simon-rows) so every row fits the
   phone screen and the bottom row is never clipped. */
#simonButtonGrid {
  display: grid;
  grid-template-columns: repeat(var(--simon-cols, 2), 1fr);
  gap: 8px;
  /* Container-relative, NOT viewport-relative: 94vw ignored the page + card padding,
     so the grid box poked ~11px off the right edge of the phone screen. */
  width: 100%;
  max-width: 460px;
  margin: 0 auto 10px;
  justify-items: center;
  align-content: center;
  /* Pad-size fallback: split the height budget by the row count (set by JS). The JS
     _fitSimonGrid measures the REAL space left below the header and overrides this
     inline in px, so the value here only matters before the first measure. Declared
     on the grid (not the button) so the inline override wins the cascade. */
  --simon-pad: calc(54dvh / var(--simon-rows, 2) - 10px);
}
@supports not (height: 1dvh) {
  #simonButtonGrid { --simon-pad: calc(50vh / var(--simon-rows, 2) - 10px); }
}
.simon-button {
  /* width:100% = the grid cell, so the pad can never outgrow its column; --simon-pad
     (inherited from the grid) caps the square so every row also fits the height. */
  width: 100%;
  max-width: var(--simon-pad);
  max-height: var(--simon-pad);
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 18px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.97);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35), inset 0 -7px 14px rgba(0,0,0,0.30), inset 0 4px 10px rgba(255,255,255,0.10);
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  transition: transform 0.08s ease, filter 0.08s ease, box-shadow 0.08s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* The WHOLE pad is the tap target with no browser tap delay / double-tap zoom. */
  touch-action: manipulation;
}
/* The emoji is decoration — never let it become the pointer target, so a tap that
   lands on the symbol still counts as a press of the pad. */
.simon-btn-emoji { font-size: clamp(2rem, 13vw, 3.6rem); line-height: 1; pointer-events: none; }
/* Pronounced press feedback for a player tap — the ONLY idle-state animation: a
   quick "pressed" pop. (The pattern-show light-up is applied inline by JS.) */
.simon-button:not(:disabled):active {
  transform: scale(0.9);
  filter: brightness(1.25);
}
/* WATCH phase: pads are locked. Keep them clearly COLOURED, just dimmer — no
   grayscale/white wash (that read as "broken / un-pressable" on phones). */
.simon-button:disabled {
  opacity: 0.6;
  filter: brightness(0.6);
  cursor: default;
}
/* YOUR-TURN phase: pads are live — full colour, fully tappable. NO breathing /
   pulsing animation (it was distracting); the only motion is the press pop above
   and the JS light-up while the pattern plays. */
.simon-button.armed {
  opacity: 1;
  filter: none;
  animation: none;
}

/* Reaction "smash when green" button — big, centred, unmistakable (it previously
   reused .simon-button, which capped it to a small square). */
.reaction-smash-btn {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  min-height: 172px;            /* extra-tall tap target — easy to hit anywhere on it */
  font-size: clamp(1.5rem, 7vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
  touch-action: manipulation;
  cursor: pointer;
}
.reaction-smash-btn:not(:disabled):active { transform: scale(0.97); }

.reaction-light {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--error) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
}

.math-input {
  font-size: 1.5rem !important;
  font-weight: 600;
  text-align: center;
}

.puzzle-board {
  max-width: 300px;
  pointer-events: none;
  opacity: 0.7;
}

.maze-canvas {
  border: 2px solid var(--border);
  box-sizing: border-box;   /* border included in the width so 94vw can't overflow sideways */
  /* Large + responsive: the inline style (startMazeGame) sets the actual width to
     min(98vw,82vh); keep CSS non-restrictive so it isn't capped below that. */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  touch-action: none;
  border-radius: var(--radius-sm);
}

.numeric-display {
  font-size: 2rem !important;
  font-weight: 700 !important;
}

.answer-reveal {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, transparent 90%);
  padding: var(--padding-lg);
  border-radius: var(--radius-lg);
  border: 4px solid var(--ok);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

/* Mini scoreboard styles */
.mini-scoreboard {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, rgba(33,37,41,0.95), rgba(0,0,0,0.9));
  color: white;
  padding: 8px 15px;
  z-index: 1000;
  border-top: 2px solid var(--primary);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  max-height: 60px;
  overflow: hidden;
}

.mini-scoreboard-title {
  font-size: 0.9rem;
}

.mini-scores-list {
  font-size: 0.8rem;
}

/* Session info styles */
.session-info {
  margin-top: auto;
  position: static;
  background: var(--surface-2);
  padding: var(--padding-sm);
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 0.875rem;
}

.player-root .session-info {
  background: #f8f9fa;
  border-top-color: var(--border-light);
  color: var(--text-dark);
}

/* Ordering grid */
.ordering-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 20px auto;
  max-width: 300px;
}

/* ===== COLOR PALETTES ===== */
/* Applied via data-palette attribute on <html> */

[data-palette="ocean"] {
  --brand:      #0ea5e9;
  --brand-700:  #0284c7;
  --accent:     #06b6d4;
  --ok:         #14b8a6;
  --ok-700:     #0d9488;
  --info:       #38bdf8;
  --err:        #f43f5e;
  --err-700:    #e11d48;
  --warn:       #fbbf24;
  --bg:         #0c1929;
  --surface:    #0f2135;
  --surface-2:  #132a42;
  --card:       #163550;
  --border:     #1e4a6e;
  --bg-light:   #d4e9fa;
  --surface-light: #e4f1fc;
  --border-light: #7bbce0;
  --text-dark:    #0a1e30;
  --text-mid:     #2e5068;
}

[data-palette="sunset"] {
  --brand:      #f97316;
  --brand-700:  #ea580c;
  --accent:     #ec4899;
  --ok:         #22c55e;
  --ok-700:     #16a34a;
  --info:       #fb923c;
  --err:        #ef4444;
  --err-700:    #dc2626;
  --warn:       #fbbf24;
  --bg:         #1a0f0a;
  --surface:    #251510;
  --surface-2:  #2f1c15;
  --card:       #3a231a;
  --border:     #5c3727;
  --bg-light:   #fce0c4;
  --surface-light: #fdecd6;
  --border-light: #e0a070;
  --text-dark:    #2a1508;
  --text-mid:     #6b4028;
}

[data-palette="forest"] {
  --brand:      #22c55e;
  --brand-700:  #16a34a;
  --accent:     #14b8a6;
  --ok:         #34d399;
  --ok-700:     #059669;
  --info:       #2dd4bf;
  --err:        #f87171;
  --err-700:    #ef4444;
  --warn:       #fbbf24;
  --bg:         #071310;
  --surface:    #0c1e18;
  --surface-2:  #112920;
  --card:       #163428;
  --border:     #1e5040;
  --bg-light:   #cceeda;
  --surface-light: #dcf4e4;
  --border-light: #70c890;
  --text-dark:    #0a2018;
  --text-mid:     #2a5840;
}

[data-palette="berry"] {
  --brand:      #a855f7;
  --brand-700:  #9333ea;
  --accent:     #ec4899;
  --ok:         #34d399;
  --ok-700:     #059669;
  --info:       #c084fc;
  --err:        #fb7185;
  --err-700:    #f43f5e;
  --warn:       #fbbf24;
  --bg:         #120b1e;
  --surface:    #1a1028;
  --surface-2:  #221636;
  --card:       #2d1d48;
  --border:     #4c2e78;
  --bg-light:   #e0d0f5;
  --surface-light: #ece0fa;
  --border-light: #b898e0;
  --text-dark:    #1a0e2a;
  --text-mid:     #4e3070;
}

[data-palette="slate"] {
  --brand:      #64748b;
  --brand-700:  #475569;
  --accent:     #94a3b8;
  --ok:         #22c55e;
  --ok-700:     #16a34a;
  --info:       #60a5fa;
  --err:        #ef4444;
  --err-700:    #dc2626;
  --warn:       #f59e0b;
  --bg:         #0f172a;
  --surface:    #1e293b;
  --surface-2:  #273548;
  --card:       #334155;
  --border:     #475569;
  --bg-light:   #d8dee8;
  --surface-light: #e6eaf0;
  --border-light: #a0adc0;
  --text-dark:    #10171e;
  --text-mid:     #3a4858;
}