html {
  touch-action: manipulation;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Remove focus outlines and mobile tap highlight globally */
* {
  -webkit-tap-highlight-color: transparent;
}

*:focus,
*:focus-visible {
  outline: none !important;
}

:root {
  /* === Game Color Palette Matrix === */
  --game-green-top: #A2E022;
  --game-green-base: #72B80E;
  --game-green-border: #3B6103;

  --game-blue-top: #3CC3FF;
  --game-blue-base: #008BE3;
  --game-blue-border: #004878;

  --game-red-top: #FF5252;
  --game-red-base: #D31A1A;
  --game-red-border: #6A0606;

  --game-purple-top: #E252FF;
  --game-purple-base: #A61AD3;
  --game-purple-border: #52066A;

  --game-orange-top: #FFAA22;
  --game-orange-base: #E36600;
  --game-orange-border: #7A3300;

  /* Container System */
  --container-outer-bg: #6C4DF6;
  --container-outer-border: #3E1E68;
  --container-inner-bg: #FFF2DF;
  --container-inner-border: #D6B286;

  /* Quiz Frame System (animated background atmosphere + state glows) */
  --frame-atmosphere-a: rgba(108, 77, 246, 0.10);
  --frame-atmosphere-b: rgba(226, 82, 255, 0.08);
  --frame-atmosphere-c: rgba(255, 170, 34, 0.07);
  --frame-glow-idle: rgba(108, 77, 246, 0.45);
  --frame-glow-correct: rgba(114, 184, 14, 0.55);
  --frame-glow-wrong: rgba(211, 26, 26, 0.5);
  --frame-glow-danger: rgba(227, 102, 0, 0.55);
  --frame-glow-celebrate: rgba(255, 170, 34, 0.6);

  /* Text */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-light: #FFFFFF;
  --text-dark: #1e293b;

  /* Legacy CSS variable aliases (backward compat) */
  --primary: var(--game-blue-top);
  --secondary: var(--game-purple-top);
  --accent: var(--game-orange-top);
  --success: var(--game-green-base);
  --danger: var(--game-red-base);
  --warning: var(--game-orange-top);
  --info: var(--game-blue-top);
  --light: #ffffff;
  --dark: #0f172a;
  --purple: var(--game-purple-base);
  --cyan: #06b6d4;
  --orange: var(--game-orange-base);
  --pink: #ec4899;
  --teal: #14b8a6;
  --indigo: #6366f1;
  --blue-gradient-start: #eef2ff;
  --blue-gradient-end: #e0e7ff;

  --body-bg-start: #E8D5F5;
  --body-bg-end: #D4B8F0;
  --glass-bg: var(--container-inner-bg);
  --glass-border: var(--container-inner-border);
  --glass-highlight: rgba(255, 255, 255, 0.7);
  --glass-shadow: rgba(0, 0, 0, 0.06);
  --card-bg: var(--container-inner-bg);
  --card-border: var(--container-inner-border);
  --input-bg: rgba(255, 255, 255, 0.85);
  --input-border: var(--container-inner-border);
  --toggle-bg: rgba(148, 163, 184, 0.3);
  --modal-overlay: rgba(62, 30, 104, 0.6);
  --overlay-bg: rgba(255, 255, 255, 0.15);
  --dot-bg: rgba(108, 77, 246, 0.08);
  --stat-card-bg: linear-gradient(180deg, #FFFFFF 0%, #F5EDD8 100%);

  /* Leaderboard rows (readable on the light inner card) */
  --lb-row-bg: rgba(62, 30, 104, 0.05);
  --lb-row-border: rgba(62, 30, 104, 0.1);
  --lb-row-accent: rgba(62, 30, 104, 0.2);
  --lb-text: #1e293b;
  --lb-text-faint: rgba(30, 41, 59, 0.45);

  /* Current-player ("You") highlight */
  --lb-me-bg: linear-gradient(115deg, rgba(124, 58, 237, 0.20) 0%, rgba(168, 85, 247, 0.13) 55%, rgba(236, 72, 153, 0.13) 100%);
  --lb-me-border: #7c3aed;
  --lb-me-ring: rgba(124, 58, 237, 0.22);
  --lb-me-glow: rgba(124, 58, 237, 0.42);
}

[data-theme="dark"] {
  --body-bg-start: #2D1B4E;
  --body-bg-end: #1A0F33;
  --container-outer-bg: #22123B;
  --container-outer-border: #150926;
  --glass-bg: #3A2260;
  --glass-border: #5A3D8A;
  --glass-highlight: rgba(255, 255, 255, 0.08);
  --glass-shadow: rgba(0, 0, 0, 0.35);
  --text-primary: #F0E6FF;
  --text-secondary: #C4B0E0;
  --card-bg: #3A2260;
  --card-border: #5A3D8A;
  --input-bg: rgba(58, 34, 96, 0.8);
  --input-border: #5A3D8A;
  --toggle-bg: rgba(148, 163, 184, 0.25);
  --modal-overlay: rgba(0, 0, 0, 0.7);
  --overlay-bg: rgba(255, 255, 255, 0.08);
  --dot-bg: rgba(130, 80, 220, 0.1);

  --primary: #818cf8;
  --secondary: #a78bfa;
  --accent: #f472b6;
  --success: #34d399;
  --danger: #f87171;
  --warning: #fbbf24;
  --info: #60a5fa;
  --blue-gradient-start: #1e1b4b;
  --blue-gradient-end: #172554;
  --text-dark: #F0E6FF;
  --text-light: #1e293b;
  --container-inner-bg: #2D1B4E;
  --container-inner-border: #5A3D8A;
  --stat-card-bg: linear-gradient(180deg, #3A2260 0%, #2D1B4E 100%);

  /* Quiz Frame System (animated background atmosphere + state glows) */
  --frame-atmosphere-a: rgba(129, 140, 248, 0.16);
  --frame-atmosphere-b: rgba(167, 139, 250, 0.14);
  --frame-atmosphere-c: rgba(244, 114, 182, 0.10);
  --frame-glow-idle: rgba(129, 140, 248, 0.55);
  --frame-glow-correct: rgba(52, 211, 153, 0.6);
  --frame-glow-wrong: rgba(248, 113, 113, 0.55);
  --frame-glow-danger: rgba(251, 191, 36, 0.6);
  --frame-glow-celebrate: rgba(251, 191, 36, 0.65);

  --lb-row-bg: rgba(255, 255, 255, 0.057);
  --lb-row-border: rgba(255, 255, 255, 0.08);
  --lb-row-accent: rgba(255, 255, 255, 0.14);
  --lb-text: #ffffff;
  --lb-text-faint: rgba(255, 255, 255, 0.38);

  /* Current-player ("You") highlight */
  --lb-me-bg: linear-gradient(115deg, rgba(167, 139, 250, 0.30) 0%, rgba(139, 92, 246, 0.16) 55%, rgba(236, 72, 153, 0.18) 100%);
  --lb-me-border: #a78bfa;
  --lb-me-ring: rgba(167, 139, 250, 0.30);
  --lb-me-glow: rgba(167, 139, 250, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --body-bg-start: #2D1B4E;
    --body-bg-end: #1A0F33;
    --container-outer-bg: #22123B;
    --container-outer-border: #150926;
    --glass-bg: #3A2260;
    --glass-border: #5A3D8A;
    --glass-highlight: rgba(255, 255, 255, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.35);
    --text-primary: #F0E6FF;
    --text-secondary: #C4B0E0;
    --card-bg: #3A2260;
    --card-border: #5A3D8A;
    --input-bg: rgba(58, 34, 96, 0.8);
    --input-border: #5A3D8A;
    --toggle-bg: rgba(148, 163, 184, 0.25);
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --overlay-bg: rgba(255, 255, 255, 0.08);
    --dot-bg: rgba(130, 80, 220, 0.1);

    --primary: #818cf8;
    --secondary: #a78bfa;
    --accent: #f472b6;
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --info: #60a5fa;
    --blue-gradient-start: #1e1b4b;
    --blue-gradient-end: #172554;
    --text-dark: #F0E6FF;
    --text-light: #1e293b;
    --container-inner-bg: #2D1B4E;
    --container-inner-border: #5A3D8A;
    --stat-card-bg: linear-gradient(180deg, #3A2260 0%, #2D1B4E 100%);

    --frame-atmosphere-a: rgba(129, 140, 248, 0.16);
    --frame-atmosphere-b: rgba(167, 139, 250, 0.14);
    --frame-atmosphere-c: rgba(244, 114, 182, 0.10);
    --frame-glow-idle: rgba(129, 140, 248, 0.55);
    --frame-glow-correct: rgba(52, 211, 153, 0.6);
    --frame-glow-wrong: rgba(248, 113, 113, 0.55);
    --frame-glow-danger: rgba(251, 191, 36, 0.6);
    --frame-glow-celebrate: rgba(251, 191, 36, 0.65);

    --lb-row-bg: rgba(255, 255, 255, 0.057);
    --lb-row-border: rgba(255, 255, 255, 0.08);
    --lb-row-accent: rgba(255, 255, 255, 0.14);
    --lb-text: #ffffff;
    --lb-text-faint: rgba(255, 255, 255, 0.38);

    /* Current-player ("You") highlight */
    --lb-me-bg: linear-gradient(115deg, rgba(167, 139, 250, 0.30) 0%, rgba(139, 92, 246, 0.16) 55%, rgba(236, 72, 153, 0.18) 100%);
    --lb-me-border: #a78bfa;
    --lb-me-ring: rgba(167, 139, 250, 0.30);
    --lb-me-glow: rgba(167, 139, 250, 0.55);
  }
}

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

/* === 3D "Juicy" Button Formula === */

.game-btn {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 16px;
  color: #FFFFFF;
  border: 3px solid;
  transition: all 0.1s ease-in-out;
  cursor: pointer;
  position: relative;
  overflow: visible;
}

.game-btn:active {
  transform: translateY(4px);
}

/* Green - Primary Play */
.game-btn-green {
  background: linear-gradient(180deg, #A2E022 0%, #72B80E 100%);
  border-color: #3B6103;
  box-shadow: 0px 6px 0px #3B6103, 0px 8px 16px rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.game-btn-green:active {
  box-shadow: 0px 2px 0px #3B6103, 0px 4px 8px rgba(0, 0, 0, 0.3);
}

/* Blue - Action/Next */
.game-btn-blue {
  background: linear-gradient(180deg, #3CC3FF 0%, #008BE3 100%);
  border-color: #004878;
  box-shadow: 0px 6px 0px #004878, 0px 8px 16px rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.game-btn-blue:active {
  box-shadow: 0px 2px 0px #004878, 0px 4px 8px rgba(0, 0, 0, 0.3);
}

/* Red - Alert/Quit */
.game-btn-red {
  background: linear-gradient(180deg, #FF5252 0%, #D31A1A 100%);
  border-color: #6A0606;
  box-shadow: 0px 6px 0px #6A0606, 0px 8px 16px rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.game-btn-red:active {
  box-shadow: 0px 2px 0px #6A0606, 0px 4px 8px rgba(0, 0, 0, 0.3);
}

/* Purple - System/OK */
.game-btn-purple {
  background: linear-gradient(180deg, #E252FF 0%, #A61AD3 100%);
  border-color: #52066A;
  box-shadow: 0px 6px 0px #52066A, 0px 8px 16px rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.game-btn-purple:active {
  box-shadow: 0px 2px 0px #52066A, 0px 4px 8px rgba(0, 0, 0, 0.3);
}

/* Orange - Warning/Settings */
.game-btn-orange {
  background: linear-gradient(180deg, #FFAA22 0%, #E36600 100%);
  border-color: #7A3300;
  box-shadow: 0px 6px 0px #7A3300, 0px 8px 16px rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.game-btn-orange:active {
  box-shadow: 0px 2px 0px #7A3300, 0px 4px 8px rgba(0, 0, 0, 0.3);
}

/* === Container & Modal Mechanics === */

.game-outer-container {
  border-radius: 28px;
  border: 4px solid var(--container-outer-border);
  background-color: var(--container-outer-bg);
  padding: 16px;
}

.game-inner-card {
  border-radius: 20px;
  background-color: var(--container-inner-bg);
  border: 2px solid var(--container-inner-border);
  padding: 24px;
}

body {
  font-family: 'Quicksand', sans-serif;
  background: linear-gradient(135deg, var(--body-bg-start), var(--body-bg-end));
  min-height: 100vh;
  color: var(--text-primary);
  overflow-x: hidden;
  position: relative;
  transition: background 0.4s ease, color 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 20% 50%, var(--dot-bg) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, var(--dot-bg) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 0%, var(--dot-bg) 0%, transparent 60%);
  z-index: -1;
}

/* ═══════════════════════════════════════════════════════════════
   QUIZ FRAME SYSTEM — layered animated game frame around the quiz
   card (Quick Play, Normal/Multiplayer, Teacher/Classroom via the
   shared #gameplay-page, and Dev Mode via .dev-preview-overlay).
   Layer 1: page-level atmosphere · Layer 2/3: glow + corner frame
   on .glass-card itself · Layer 4: inner content card (::before,
   defined further below). All motion is transform/opacity/filter
   only so it stays GPU-cheap, and everything is muted by
   prefers-reduced-motion at the bottom of this section.
   ═══════════════════════════════════════════════════════════════ */

/* Layer 1 — Background Atmosphere: slow floating glow blobs behind
   the whole gameplay/dev-preview screen, independent of card size/position. */
#gameplay-page::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, var(--frame-atmosphere-a) 0%, transparent 55%),
    radial-gradient(circle at 82% 18%, var(--frame-atmosphere-b) 0%, transparent 55%),
    radial-gradient(circle at 50% 88%, var(--frame-atmosphere-c) 0%, transparent 60%);
  animation: frameAtmosphereFloat 22s ease-in-out infinite alternate;
}

@keyframes frameAtmosphereFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(1.5%, -2%, 0) scale(1.04);
  }

  100% {
    transform: translate3d(-1.5%, 2%, 0) scale(1);
  }
}

/* Layer 2/3 — Premium frame + animated corner glow. Anchored to the
   card's own box (not the viewport) so it reads as a frame around the
   content instead of a decoration floating on the page. */
#gameplay-page .glass-card::after,
.dev-preview-overlay .dev-preview-game-card::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 34px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 0% 0%, var(--primary) 0%, transparent 42%),
    radial-gradient(circle at 100% 0%, var(--secondary) 0%, transparent 42%),
    radial-gradient(circle at 100% 100%, var(--primary) 0%, transparent 42%),
    radial-gradient(circle at 0% 100%, var(--secondary) 0%, transparent 42%);
  filter: blur(10px);
  opacity: 0.55;
  animation: cornerMotion 10s ease-in-out infinite, frameEntrance 0.6s ease-out;
}

@keyframes frameEntrance {
  from {
    filter: blur(0px);
  }

  to {
    filter: blur(10px);
  }
}

/* Quiz state reactions — pure CSS, driven by state classes/visibility
   the gameplay logic already toggles (.timer-low, .answer.correct/
   .incorrect, #leaderboard-container). No JS changes required. */
#gameplay-page .glass-card,
.dev-preview-overlay .dev-preview-game-card {
  --frame-state-glow: var(--frame-glow-idle);
}

#gameplay-page .glass-card:has(.timer.timer-low),
.dev-preview-overlay .dev-preview-game-card:has(.timer.timer-low) {
  --frame-state-glow: var(--frame-glow-danger);
  animation: framePulseDanger 1.3s ease-in-out infinite;
}

#gameplay-page .glass-card:has(.answer.correct),
.dev-preview-overlay .dev-preview-game-card:has(.answer.correct) {
  --frame-state-glow: var(--frame-glow-correct);
  animation: framePulseFeedback 0.6s ease-out;
}

#gameplay-page .glass-card:has(.answer.incorrect),
.dev-preview-overlay .dev-preview-game-card:has(.answer.incorrect) {
  --frame-state-glow: var(--frame-glow-wrong);
  animation: framePulseFeedback 0.6s ease-out;
}

#gameplay-page .glass-card:has(#leaderboard-container:not(.hidden)) {
  --frame-state-glow: var(--frame-glow-celebrate);
  box-shadow:
    0px 8px 0px var(--container-outer-border),
    0px 12px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 28px 4px var(--frame-state-glow);
}

#gameplay-page:has(#leaderboard-container:not(.hidden))::before {
  opacity: 0.85;
}

@keyframes framePulseDanger {

  0%,
  100% {
    box-shadow:
      0px 8px 0px var(--container-outer-border),
      0px 12px 32px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 0 rgba(0, 0, 0, 0);
  }

  50% {
    box-shadow:
      0px 8px 0px var(--container-outer-border),
      0px 12px 32px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 26px 4px var(--frame-state-glow);
  }
}

@keyframes framePulseFeedback {
  0% {
    box-shadow:
      0px 8px 0px var(--container-outer-border),
      0px 12px 32px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 0 rgba(0, 0, 0, 0);
  }

  40% {
    box-shadow:
      0px 8px 0px var(--container-outer-border),
      0px 12px 32px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 34px 6px var(--frame-state-glow);
  }

  100% {
    box-shadow:
      0px 8px 0px var(--container-outer-border),
      0px 12px 32px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 0 rgba(0, 0, 0, 0);
  }
}

/* Tablet — thinner frame, calmer motion, smaller decorative footprint. */
@media (max-width: 768px) {

  #gameplay-page::before,
  .dev-preview-overlay::before {
    opacity: 0.55;
  }

  #gameplay-page .glass-card::after,
  .dev-preview-overlay .dev-preview-game-card::after {
    inset: -9px;
    border-radius: 30px;
    filter: blur(7px);
    opacity: 0.45;
  }

  #gameplay-page .glass-card,
  .dev-preview-overlay .dev-preview-game-card {
    border-width: 3px;
  }
}

/* Mobile — its own compact layout, not a scaled-down desktop frame:
   thinner border, no overflow risk, minimal decoration, max room for answers. */
@media (max-width: 480px) {

  #gameplay-page::before,
  .dev-preview-overlay::before {
    opacity: 0.32;
    animation-duration: 30s;
  }

  #gameplay-page .glass-card::after,
  .dev-preview-overlay .dev-preview-game-card::after {
    inset: -5px;
    border-radius: 22px;
    filter: blur(4px);
    opacity: 0.3;
  }

  #gameplay-page .glass-card,
  .dev-preview-overlay .dev-preview-game-card {
    border-width: 2.5px;
    box-shadow: 0px 5px 0px var(--container-outer-border), 0px 8px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
}

/* Respect reduced-motion: keep the static frame/glow, remove all motion. */
@media (prefers-reduced-motion: reduce) {

  #gameplay-page::before,
  .dev-preview-overlay::before,
  #gameplay-page .glass-card::after,
  .dev-preview-overlay .dev-preview-game-card::after,
  #gameplay-page .glass-card:has(.timer.timer-low),
  .dev-preview-overlay .dev-preview-game-card:has(.timer.timer-low),
  #gameplay-page .glass-card:has(.answer.correct),
  .dev-preview-overlay .dev-preview-game-card:has(.answer.correct),
  #gameplay-page .glass-card:has(.answer.incorrect),
  .dev-preview-overlay .dev-preview-game-card:has(.answer.incorrect),
  .dev-preview-overlay.live-bg-active::after,
  .dev-live-badge,
  .dev-live-badge-dot,
  .dev-live-badge-dot::before,
  #dev-preview-modal.dev-card-idle-on #dev-preview-active .dev-preview-game-card {
    animation: none !important;
  }
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.glass-card {
  border-radius: 28px;
  border: 4px solid var(--container-outer-border);
  background-color: var(--container-outer-bg);
  padding: 16px;
  margin-bottom: 24px;
  animation: fadeIn 0.4s ease-out;
  position: relative;
  z-index: 1;
  overflow: visible;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.4s ease, border 0.4s ease;
  box-shadow: 0px 8px 0px var(--container-outer-border), 0px 12px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  width: 100%;
  max-width: 680px;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 20px;
  background-color: var(--container-inner-bg);
  border: 2px solid var(--container-inner-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  z-index: 0;
}

.glass-card>* {
  position: relative;
  z-index: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page {
  display: none;
}

.page.active {
  display: block;
  animation: fadeIn 0.35s ease-out;
}

/* ─── Zuiix.com Brand Watermark ───────────────────────────────────────────
   Reusable branding mark shown below quiz content (Normal Quiz, Quick Play,
   Story Mode, Dev Mode Preview). Pure CSS "pressed into the background"
   effect rather than a flat footer label; never intercepts clicks. */
.quiz-brand-watermark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 5px auto 2px;
  padding: 4px 0 10px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Hidden while the "3, 2, 1, GO" countdown overlay is on screen so it never
   shows through the overlay's semi-transparent backdrop-filter blur. */
.quiz-brand-watermark.watermark-countdown-hidden {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Smooth fade-in + slide-up once the question/answers are back on screen. */
.quiz-brand-watermark.watermark-enter {
  animation: quizBrandEnter 0.5s ease-out;
}

@keyframes quizBrandEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-brand-watermark,
  .quiz-brand-watermark.watermark-countdown-hidden,
  .quiz-brand-watermark.watermark-enter {
    transition: none;
    animation: none;
  }
}

.quiz-brand-watermark span {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 1px rgb(255 255 255 / 82%), 0 -1px 1px rgba(62, 30, 104, 0.35);
  opacity: 0.7;
  animation: quizBrandBreathe 5.5s ease-in-out infinite;
  will-change: opacity;
}

[data-theme="dark"] .quiz-brand-watermark span {
  color: rgba(255, 255, 255, 0.16);
  text-shadow: 0 1px 0 rgb(165 124 255 / 30%), 0 -1px 1px rgba(167, 139, 250, 0.28), 0 0 16px rgb(34 4 123 / 0%);
}

@keyframes quizBrandBreathe {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-brand-watermark span {
    animation: none;
  }
}

@media (max-width: 600px) {
  .quiz-brand-watermark span {
    font-size: clamp(1rem, 4.5vw, 1.3rem);
    letter-spacing: 1.6px;
    color: rgba(255, 255, 255, 0.36);
  }

  [data-theme="dark"] .quiz-brand-watermark span {
    color: rgba(255, 255, 255, 0.26);
  }

  .quiz-brand-watermark {
    margin: 14px auto 4px;
    padding: 6px 0 14px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Fredoka', sans-serif;
}

h1 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 24px;
  position: relative;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

h1::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 4px;
}

h2 {
  font-size: 1.75rem;
  text-align: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

h3 {
  font-size: 1.25rem;
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
}

.btn,
.add-question-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  border: 3px solid var(--game-blue-border);
  border-radius: 16px;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  box-shadow: 0px 6px 0px var(--game-blue-border), 0px 8px 16px rgba(0, 0, 0, 0.25);
  margin: 6px;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 48px;
  min-width: 48px;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, #3CC3FF 0%, #008BE3 100%);
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:active::before {
  width: 400px;
  height: 400px;
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s;
}

.btn:hover::after {
  transform: translateX(100%);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0px 8px 0px var(--game-blue-border), 0px 12px 24px rgba(0, 0, 0, 0.3);
}

.btn:active {
  transform: translateY(4px);
  box-shadow: 0px 2px 0px var(--game-blue-border), 0px 4px 8px rgba(0, 0, 0, 0.4);
}

.btn i {
  font-size: 1.1em;
}

.btn-block {
  display: flex;
  width: 100%;
}

.home-cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
  margin-top: 16px;
}

.home-card-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-family: 'Fredoka', sans-serif;
  color: #FFFFFF;
  min-height: 170px;
  aspect-ratio: 2 / 3;
  user-select: none;
  outline: none;
}

.home-card-btn:hover {
  transform: translateY(-4px) scale(1.02);
}

.home-card-btn:active {
  transform: translateY(4px) scale(0.98);
}

.card-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.12;
  z-index: 1;
  pointer-events: none;
}

.card-btn-quickplay .card-bg-pattern {
  background: repeating-linear-gradient(45deg, #FFF 0px, #FFF 10px, transparent 10px, transparent 20px);
}

.card-btn-create .card-bg-pattern {
  background-image: linear-gradient(rgba(255, 255, 255, .2) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255, 255, 255, .2) 1.5px, transparent 1.5px);
  background-size: 15px 15px;
}

.card-btn-join .card-bg-pattern {
  background-image: radial-gradient(rgba(255, 255, 255, .3) 1.5px, transparent 1.5px);
  background-size: 10px 10px;
}

.card-btn-marketplace .card-bg-pattern {
  background: repeating-linear-gradient(-45deg, #FFF 0px, #FFF 10px, transparent 10px, transparent 20px);
}

.card-bg-icon {
  position: absolute;
  bottom: -15px;
  right: -15px;
  font-size: 5.5rem;
  opacity: 0.15;
  transform: rotate(-15deg);
  z-index: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.home-card-btn:hover .card-bg-icon {
  transform: rotate(0deg) scale(1.1);
  opacity: 0.22;
}

.card-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 12px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.home-card-btn:hover .card-icon-badge {
  transform: scale(1.1) rotate(5deg);
}

.home-card-btn .card-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.home-card-btn .card-subtitle {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.85;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-family: 'Quicksand', sans-serif;
}

.card-btn-quickplay {
  background: linear-gradient(180deg, #FFAA22 0%, #E36600 100%);
  border: 3px solid #7A3300;
  box-shadow: 0px 6px 0px #7A3300, 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.card-btn-quickplay:active {
  box-shadow: 0px 2px 0px #7A3300, 0px 4px 8px rgba(0, 0, 0, 0.25);
}

.card-btn-create {
  background: linear-gradient(180deg, #A2E022 0%, #72B80E 100%);
  border: 3px solid #3B6103;
  box-shadow: 0px 6px 0px #3B6103, 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.card-btn-create:active {
  box-shadow: 0px 2px 0px #3B6103, 0px 4px 8px rgba(0, 0, 0, 0.25);
}

.card-btn-join {
  background: linear-gradient(180deg, #3CC3FF 0%, #008BE3 100%);
  border: 3px solid #004878;
  box-shadow: 0px 6px 0px #004878, 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.card-btn-join:active {
  box-shadow: 0px 2px 0px #004878, 0px 4px 8px rgba(0, 0, 0, 0.25);
}

.card-btn-marketplace {
  background: linear-gradient(180deg, #E252FF 0%, #A61AD3 100%);
  border: 3px solid #52066A;
  box-shadow: 0px 6px 0px #52066A, 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.card-btn-marketplace:active {
  box-shadow: 0px 2px 0px #52066A, 0px 4px 8px rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
  .home-cards-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .home-card-btn {
    aspect-ratio: auto;
    min-height: 140px;
  }
}

@media (max-width: 480px) {
  .home-cards-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .home-card-btn {
    aspect-ratio: auto;
    min-height: 80px;
    padding: 14px 20px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    align-items: center;
    align-content: center;
    text-align: left;
  }

  .card-icon-badge {
    grid-row: 1 / 3;
    margin-bottom: 0;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .home-card-btn .card-title,
  .home-card-btn .card-subtitle {
    grid-column: 2;
  }

  .card-bg-icon {
    font-size: 4rem;
    bottom: -10px;
    right: -10px;
  }

  .home-card-btn .card-title {
    font-size: 1.1rem;
    margin-bottom: 2px;
  }
}

.btn-success,
.add-question-btn {
  background: linear-gradient(180deg, #A2E022 0%, #72B80E 100%);
  border-color: #3B6103;
  box-shadow: 0px 6px 0px #3B6103, 0px 8px 16px rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.btn-success:hover,
.add-question-btn:hover {
  box-shadow: 0px 8px 0px #3B6103, 0px 12px 24px rgba(0, 0, 0, 0.3);
}

.btn-success:active,
.add-question-btn:active {
  box-shadow: 0px 2px 0px #3B6103, 0px 4px 8px rgba(0, 0, 0, 0.4);
}

.btn-danger {
  background: linear-gradient(180deg, #FF5252 0%, #D31A1A 100%);
  border-color: #6A0606;
  box-shadow: 0px 6px 0px #6A0606, 0px 8px 16px rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.btn-danger:hover {
  box-shadow: 0px 8px 0px #6A0606, 0px 12px 24px rgba(0, 0, 0, 0.3);
}

.btn-danger:active {
  box-shadow: 0px 2px 0px #6A0606, 0px 4px 8px rgba(0, 0, 0, 0.4);
}

.btn-warning {
  background: linear-gradient(180deg, #FFAA22 0%, #E36600 100%);
  border-color: #7A3300;
  box-shadow: 0px 6px 0px #7A3300, 0px 8px 16px rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.btn-warning:hover {
  box-shadow: 0px 8px 0px #7A3300, 0px 12px 24px rgba(0, 0, 0, 0.3);
}

.btn-warning:active {
  box-shadow: 0px 2px 0px #7A3300, 0px 4px 8px rgba(0, 0, 0, 0.4);
}

.btn-purple {
  background: linear-gradient(180deg, #E252FF 0%, #A61AD3 100%);
  border-color: #52066A;
  box-shadow: 0px 6px 0px #52066A, 0px 8px 16px rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.btn-purple:hover {
  box-shadow: 0px 8px 0px #52066A, 0px 12px 24px rgba(0, 0, 0, 0.3);
}

.btn-purple:active {
  box-shadow: 0px 2px 0px #52066A, 0px 4px 8px rgba(0, 0, 0, 0.4);
}

.btn-cyan {
  background: linear-gradient(180deg, #3CC3FF 0%, #008BE3 100%);
  border-color: #004878;
  box-shadow: 0px 6px 0px #004878, 0px 8px 16px rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.btn-cyan:hover {
  box-shadow: 0px 8px 0px #004878, 0px 12px 24px rgba(0, 0, 0, 0.3);
}

.btn-cyan:active {
  box-shadow: 0px 2px 0px #004878, 0px 4px 8px rgba(0, 0, 0, 0.4);
}

.btn-primary {
  background: linear-gradient(180deg, #3CC3FF 0%, #008BE3 100%);
  border-color: #004878;
  box-shadow: 0px 6px 0px #004878, 0px 8px 16px rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.btn-primary:hover {
  box-shadow: 0px 8px 0px #004878, 0px 12px 24px rgba(0, 0, 0, 0.3);
}

.btn-primary:active {
  box-shadow: 0px 2px 0px #004878, 0px 4px 8px rgba(0, 0, 0, 0.4);
}

.btn-quickplay {
  background: linear-gradient(180deg, #FFAA22 0%, #E36600 100%);
  border-color: #7A3300;
  box-shadow: 0px 6px 0px #7A3300, 0px 8px 16px rgba(0, 0, 0, 0.25);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  animation: quickplayPulse 2s ease-in-out infinite;
  font-size: 1.1rem;
  padding: 18px 44px;
  min-height: 64px;
  width: 100%;
  max-width: 100%;
}

.btn-quickplay:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0px 8px 0px #7A3300, 0px 12px 24px rgba(0, 0, 0, 0.3);
}

.btn-quickplay:active {
  transform: translateY(4px);
  box-shadow: 0px 2px 0px #7A3300, 0px 4px 8px rgba(0, 0, 0, 0.4);
}

@keyframes quickplayPulse {

  0%,
  100% {
    box-shadow: 0px 6px 0px #7A3300, 0px 8px 16px rgba(0, 0, 0, 0.25);
  }

  50% {
    box-shadow: 0px 6px 0px #7A3300, 0px 8px 24px rgba(0, 0, 0, 0.35), 0 0 40px rgba(255, 170, 34, 0.3);
  }
}

/* Quick Play spinner animation */
.quick-play-spinner {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}

.qp-radar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: var(--game-orange-top);
  border-right-color: var(--game-purple-top);
  animation: qpSpin 1s linear infinite;
}

.qp-radar::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-bottom-color: var(--game-blue-top);
  border-left-color: var(--game-green-top);
  animation: qpSpin 1.5s linear infinite reverse;
}

@keyframes qpSpin {
  to {
    transform: rotate(360deg);
  }
}

.btn:disabled {
  background: linear-gradient(180deg, #B0B0B0 0%, #888888 100%);
  border-color: #555555;
  color: #DDDDDD;
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: 0px 3px 0px #555555;
  transform: none;
  text-shadow: none;
}

.btn:disabled::before,
.btn:disabled::after {
  display: none;
}

.btn-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 0;
  font-size: 22px;
}

.btn-icon:hover {
  transform: scale(1.1);
}

.btn-fab {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 0;
  font-size: 26px;
  z-index: 100;
}

.btn-fab:hover {
  transform: scale(1.1) rotate(8deg);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 3px solid var(--container-inner-border);
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F0E0 100%);
  color: var(--text-dark);
  font-size: 16px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  transition: all 0.2s ease;
  min-height: 48px;
}

.form-control:focus {
  outline: none;
  border-color: var(--game-blue-border);
  box-shadow: 0px 3px 0px var(--game-blue-border), 0 0 0 4px rgba(60, 195, 255, 0.15);
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F8FF 100%);
}

.form-control::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.text-center {
  text-align: center;
}

.share-link-section {
  text-align: left;
}

.share-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.share-link-row .form-control {
  cursor: default;
}

.share-link-row .form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 99, 102, 241), 0.15);
}

.player-list {
  list-style: none;
  padding: 0;
}

.player-item {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5EDD8 100%);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
  border: 3px solid var(--container-inner-border);
  box-shadow: 0px 3px 0px var(--container-inner-border);
}

.player-item:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0E6D0 100%);
  transform: translateX(4px);
  box-shadow: 0px 3px 0px var(--container-inner-border), 0px 6px 16px rgba(0, 0, 0, 0.1);
}

.player-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--game-blue-top), var(--game-blue-base));
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 14px;
  font-weight: 700;
  font-size: 16px;
  color: white;
  border: 3px solid var(--game-blue-border);
  box-shadow: 0px 3px 0px var(--game-blue-border);
  overflow: visible;
  position: relative;
  flex-shrink: 0;
}

.player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.player-info {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.player-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
  margin-left: 12px;
}

.bot-status {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-secondary);
}

.creator-status {
  background: rgba(102, 126, 234, 0.15);
  color: var(--primary);
}

.question-container {
  margin-bottom: 24px;
}

.question {
  font-size: 1.35rem;
  margin-bottom: 24px;
  text-align: center;
  color: var(--text-primary);
  line-height: 1.6;
  padding: 0 8px;
}

.answers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.answer {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  background: linear-gradient(180deg, #FFFFFF 0%, #F0E6D0 100%);
  border-radius: 16px;
  padding: 20px 24px;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  border: 3px solid var(--game-blue-border);
  text-align: center;
  box-shadow: 0px 4px 0px var(--game-blue-border), 0px 6px 12px rgba(0, 0, 0, 0.15);
  min-height: 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1.4;
  position: relative;
  color: var(--text-dark);
}

.answer:hover {
  transform: translateY(-2px);
  box-shadow: 0px 6px 0px var(--game-blue-border), 0px 10px 20px rgba(0, 0, 0, 0.2);
}

.answer:active {
  transform: translateY(2px);
  box-shadow: 0px 2px 0px var(--game-blue-border), 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.answer.selected {
  border-color: var(--game-orange-border);
  box-shadow: 0px 4px 0px var(--game-orange-border), 0px 6px 12px rgba(0, 0, 0, 0.15);
  background: linear-gradient(180deg, #FFF5E0 0%, #FFE0A0 100%);
}

.answer.correct {
  border-color: var(--game-green-border);
  box-shadow: 0px 4px 0px var(--game-green-border), 0px 6px 12px rgba(0, 0, 0, 0.15);
  background: linear-gradient(180deg, #E0FFD0 0%, #A2E022 100%);
  animation: correctPulse 0.5s;
}

.answer.incorrect {
  border-color: var(--game-red-border);
  box-shadow: 0px 4px 0px var(--game-red-border), 0px 6px 12px rgba(0, 0, 0, 0.15);
  background: linear-gradient(180deg, #FFD0D0 0%, #FF5252 100%);
  animation: shake 0.5s;
}

/* Dev Preview's own results reveal — the correct answer's border flips green
   and its background fades to green (an ::after overlay animated from
   transparent, since gradients can't transition; at z-index -1 it paints
   above the poll-share fill — generated content comes after the fill span in
   tree order — but below the letter badge, text and "👥 count · %" chip).
   No incorrect/red styling at all. Intentionally a separate class from
   .answer.correct/.incorrect above (Normal Mode's own reveal, untouched)
   rather than an override, so the two can never drift into affecting each
   other. */
#dev-preview-answer-grid .answer.dev-answer-correct-border {
  border-color: var(--game-green-border);
  box-shadow: 0px 4px 0px var(--game-green-border), 0px 6px 12px rgba(0, 0, 0, 0.15);
}

#dev-preview-answer-grid .answer.dev-answer-correct-border::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #E0FFD0 0%, #A2E022 100%);
  animation: devCorrectBgFadeIn 0.6s ease-out forwards;
}

@keyframes devCorrectBgFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

[data-theme="dark"] #dev-preview-answer-grid .answer.dev-answer-correct-border::after {
  background: linear-gradient(180deg, #1A3A2A 0%, #2D6A4E 100%);
}

@keyframes correctPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-4px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(4px);
  }
}

.timer-container {
  width: 100%;
  height: 16px;
  background: linear-gradient(180deg, #E0C8A0 0%, #D0B890 100%);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 3px solid var(--container-inner-border);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timer {
  height: 100%;
  background: linear-gradient(180deg, var(--game-green-top) 0%, var(--game-green-base) 100%);
  width: 100%;
  transition: width 0.1s linear;
  border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.leaderboard {
  margin-top: 24px;
}

#leaderboard-list,
#final-leaderboard,
#dev-interstitial-lb,
#dev-final-scores {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Keep a long final-score player list inside its own scroll area instead of
   growing #endgame-page past the viewport. */
#final-leaderboard,
#dev-final-scores {
  max-height: 46vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 14px;
  padding-right: 4px;
  scrollbar-width: thin;
}

@media (max-width: 480px) {

  #final-leaderboard,
  #dev-final-scores {
    max-height: 34vh;
  }
}

/* Dev Mode's between-questions leaderboard interstitial — shown repeatedly
   throughout a Live Mode stream (the dominant screen most of the time, unlike
   Normal Mode's one-time final-score screen above), so it gets its own,
   much more generous viewport-relative height instead of sharing the same
   cap (fixed 2026-07-18: it was previously bundled into the rule above,
   capping it at 46vh/34vh on mobile — the same conservative budget as an
   occasional final-score screen — leaving most of the viewport empty and
   forcing an internal scroll well before the card had actually run out of
   room). DEV_LOBBY_MAX_PLAYERS = 15 rows still cap the row count itself;
   this only controls how much of the viewport they're allowed to use before
   scrolling internally. */
#dev-interstitial-lb {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 14px;
  padding-right: 4px;
  scrollbar-width: thin;
}

@media (max-width: 680px) {
  #dev-interstitial-lb {
    max-height: 54vh;
  }
}

/* Rows are stacked tightly in this scrollable list, so an equipped hat sized
   for the podium would poke out of its own row into the row above (or get
   clipped by the scroll box for the first row). Shrink it here so it stays
   fully inside its own player row. */
#final-leaderboard .avatar-hat,
#dev-final-scores .avatar-hat {
  width: 55%;
  height: 55%;
  top: 25%;
}

.leaderboard-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5EDD8 100%);
  border-radius: 16px;
  margin-bottom: 14px;
  transition: all 0.2s ease;
  border: 3px solid var(--container-inner-border);
  box-shadow: 0px 3px 0px var(--container-inner-border);
}

.leaderboard-item:hover {
  box-shadow: 0 4px 16px 0 var(--glass-shadow);
}

.leaderboard-position {
  font-size: 1.25rem;
  font-weight: 700;
  margin-right: 14px;
  width: 32px;
  text-align: center;
  color: var(--primary);
  flex-shrink: 0;
}

.leaderboard-name {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.leaderboard-score {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--primary);
  flex-shrink: 0;
}

/* Highlighted Player in Leaderboard — main rules live next to the
   .leaderboard-row styles (after the rank-accent rules) so they win the cascade. */
.leaderboard-item.highlighted-player {
  background: linear-gradient(180deg, #FFF9E6 0%, #FFEBA3 100%) !important;
  border: 3px solid var(--game-orange-border) !important;
  box-shadow: 0 0 16px rgba(255, 170, 34, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.6) !important;
  transform: scale(1.02);
  z-index: 2;
}

[data-theme="dark"] .leaderboard-item.highlighted-player {
  background: linear-gradient(180deg, #533B0D 0%, #3D2905 100%) !important;
  border: 3px solid #f59e0b !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.1) !important;
}

/* Badge for "You" */
.you-badge {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}


.podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 280px;
  margin-top: 42px;
  margin-bottom: 24px;
  gap: 12px;
  overflow: visible;
}

.podium-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 12px;
  opacity: 0;
}

.podium-item.podium-reveal {
  animation: podiumRevealBounce 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.podium-item.podium-reveal-first {
  animation: podiumRevealFirst 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes podiumRevealBounce {
  from {
    transform: translateY(70px) scale(0.75);
    opacity: 0;
    filter: blur(4px);
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes podiumRevealFirst {
  0% {
    transform: translateY(90px) scale(0.6);
    opacity: 0;
    filter: blur(6px);
  }

  60% {
    transform: translateY(-16px) scale(1.08);
    opacity: 1;
    filter: blur(0);
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.podium-base {
  width: 100px;
  border-radius: 16px 16px 6px 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 900;
  font-size: 1.3rem;
  font-family: 'Fredoka', sans-serif;
  padding: 10px 0;
  position: relative;
  overflow: hidden;
  border: 3px solid;
}

.podium-first {
  height: 180px;
  background: linear-gradient(180deg, #FFD700 0%, #FFAA00 100%);
  border-color: #B8860B;
  box-shadow: 0px 4px 0px #B8860B, 0 0 30px rgba(255, 215, 0, 0.3);
  min-width: 90px;
}

.podium-second {
  height: 130px;
  background: linear-gradient(180deg, #E8E8E8 0%, #C0C0C0 100%);
  border-color: #808080;
  box-shadow: 0px 4px 0px #808080, 0 0 20px rgba(192, 192, 192, 0.2);
  min-width: 90px;
}

.podium-third {
  height: 90px;
  background: linear-gradient(180deg, #E8A040 0%, #CD7F32 100%);
  border-color: #8B4513;
  box-shadow: 0px 4px 0px #8B4513, 0 0 20px rgba(205, 127, 50, 0.2);
  min-width: 90px;
}

.podium-player {
  margin-bottom: 12px;
  text-align: center;
  position: relative;
}

.podium-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 auto 8px;
  color: white;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
  overflow: visible;
  position: relative;
}

.podium-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ====== Endgame Page Enhancements ====== */

.endgame-header {
  text-align: center;
  margin-bottom: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--card-border);
}

.endgame-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.endgame-title-text {
  font-size: 2rem;
  font-weight: 900;
  font-family: 'Fredoka', sans-serif;
  letter-spacing: 1.5px;
  background: linear-gradient(120deg, #f59e0b 0%, #ef4444 50%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: titleGradientShift 3.5s ease-in-out infinite;
}

@keyframes titleGradientShift {

  0%,
  100% {
    background-position: 0% center;
  }

  50% {
    background-position: 100% center;
  }
}

.endgame-star-icon {
  font-size: 1.3rem;
  color: #f59e0b;
  display: inline-block;
  animation: endgameStarPulse 1.7s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.65));
}

.endgame-star-icon:last-child {
  animation-delay: 0.55s;
}

@keyframes endgameStarPulse {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }

  30% {
    transform: scale(1.28) rotate(14deg);
  }

  65% {
    transform: scale(0.88) rotate(-9deg);
  }
}

/* Crown above 1st place */
.podium-crown-wrapper {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.podium-crown {
  font-size: 1.65rem;
  color: #f59e0b;
  animation: crownFloat 1.9s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.6));
  display: inline-block;
}

@keyframes crownFloat {

  0%,
  100% {
    transform: translateY(0) rotate(-7deg);
  }

  50% {
    transform: translateY(-8px) rotate(7deg);
  }
}

/* Podium avatar colored rings */
.podium-avatar-first {
  border: 3.5px solid #FFD700;
  animation: avatarGoldGlow 2.2s ease-in-out infinite;
}

@keyframes avatarGoldGlow {

  0%,
  100% {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.2);
  }

  50% {
    box-shadow: 0 0 26px rgba(255, 215, 0, 0.8), 0 4px 18px rgba(0, 0, 0, 0.25);
  }
}

.podium-avatar-second {
  border: 3px solid #C0C0C0;
  box-shadow: 0 0 12px rgba(192, 192, 192, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.podium-avatar-third {
  border: 3px solid #CD7F32;
  box-shadow: 0 0 10px rgba(205, 127, 50, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Medal emoji worn as a necklace pendant on the podium avatar */
.podium-medal-necklace {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  z-index: 3;
  pointer-events: none;
}

/* Score below name in podium */
.podium-score-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 3px;
  font-family: 'Fredoka', sans-serif;
}

/* Current player on the podium — glowing avatar ring so they spot themselves */
.podium-item.podium-item-me .podium-avatar {
  box-shadow: 0 0 0 3px var(--lb-me-border), 0 0 18px var(--lb-me-glow);
}

.podium-item.podium-item-me .podium-name-me {
  color: var(--lb-me-border);
}

/* ─── "Your result" modal on the endgame screen ───
   Shown inside #my-final-result-overlay, which reuses the .chest-overlay
   full-screen premium treatment (dark scrim + blur) so it matches the
   Chest Opening animation. */
.mfr-modal-card {
  position: relative;
  max-width: 420px;
  width: 100%;
  margin: auto;
  /* Reserve room above the result pill for the close button so it always
     sits inside this card's own box — never clipped by the overlay's
     scrollable edge the way an offset placed outside the card could be. */
  padding-top: 46px;
}

.mfr-modal-close {
  position: absolute;
  top: 0;
  right: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.mfr-modal-close:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.my-final-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 24px;
  width: 100%;
  border-radius: 20px;
  background: var(--lb-me-bg);
  border: 2px solid var(--lb-me-border);
  box-shadow: 0 0 0 3px var(--lb-me-ring), 0 10px 32px rgba(0, 0, 0, 0.35);
  animation: myResultPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@media (max-width: 480px) {
  .mfr-modal-card {
    max-width: 320px;
  }
}

@keyframes myResultPop {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.my-final-result .mfr-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 52px;
  padding: 0 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.45);
  flex-shrink: 0;
}

.my-final-result .mfr-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.my-final-result .mfr-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--lb-me-border);
}

.my-final-result .mfr-detail {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
}

.my-final-result .mfr-detail .mfr-score {
  color: var(--lb-me-border);
  font-family: 'Fredoka', sans-serif;
}

/* Gold podium shimmer sweep */
.podium-first::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  animation: podiumShimmer 3s ease-in-out infinite;
  border-radius: inherit;
  pointer-events: none;
}

@keyframes podiumShimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 160%;
  }
}

/* "More Players" section header */
.endgame-lb-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* Staggered slide-in for rows 4+ */
.final-lb-row {
  opacity: 0;
  animation: finalRowSlideIn 0.45s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

@keyframes finalRowSlideIn {
  from {
    opacity: 0;
    transform: translateX(36px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Endgame action buttons */
.endgame-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.endgame-controls .btn {
  flex: 1;
  min-width: 110px;
  max-width: 180px;
}

#gameplay-controls {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
}

#gameplay-exit {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
}

.countdown-container {
  text-align: center;
  margin: 20px 0;
  padding: 24px;
  background: linear-gradient(180deg, #FFF2DF 0%, #F0E0C0 100%);
  border-radius: 20px;
  border: 3px solid var(--container-inner-border);
  box-shadow: 0px 4px 0px var(--container-inner-border), 0px 6px 16px rgba(0, 0, 0, 0.1);
}

.countdown-number {
  font-size: 48px;
  font-weight: 900;
  font-family: 'Fredoka One', 'Nunito', sans-serif;
  margin-bottom: 8px;
  background: linear-gradient(180deg, var(--game-blue-top), var(--game-blue-base));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.countdown-text {
  font-size: 16px;
  opacity: 0.8;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

.animate-pulse {
  animation: pulse 1s infinite;
}

.file-upload {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100%;
}

.file-upload input[type=file] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.file-upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5EDD8 100%);
  border: 3px dashed var(--container-inner-border);
  border-radius: 16px;
  text-align: center;
  transition: all 0.2s ease;
  min-height: 72px;
  font-weight: 700;
  color: var(--text-secondary);
  font-family: 'Nunito', sans-serif;
}

.file-upload:hover .file-upload-label {
  border-color: var(--game-blue-border);
  color: var(--game-blue-base);
  background: linear-gradient(180deg, #FFFFFF 0%, #E8F4FD 100%);
}

/* === Question Source Selection Cards (Step 3) === */

.question-source-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.question-source-card {
  border-radius: 20px;
  border: 4px solid var(--container-outer-border);
  background: var(--container-outer-bg);
  box-shadow: 0px 5px 0px var(--container-outer-border), 0 6px 16px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

.question-source-card::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 14px;
  background: var(--container-inner-bg);
  border: 2px solid var(--container-inner-border);
  z-index: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.question-source-inner {
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.question-source-icon {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 4px;
  transition: transform 0.2s ease;
}

.question-source-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  transition: color 0.2s ease;
}

.question-source-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.question-source-card:hover {
  transform: translateY(-3px);
  box-shadow: 0px 8px 0px var(--container-outer-border), 0 12px 24px rgba(0, 0, 0, 0.18);
}

.question-source-card:hover .question-source-icon {
  transform: scale(1.12);
}

.question-source-card:active {
  transform: translateY(2px);
  box-shadow: 0px 2px 0px var(--container-outer-border);
}

.question-source-card.selected {
  border-color: var(--game-blue-border);
  box-shadow: 0px 5px 0px var(--game-blue-border), 0 0 0 3px rgba(60, 195, 255, 0.25);
}

.question-source-card.selected::before {
  background: linear-gradient(180deg, #EAF6FF 0%, #C8E8FF 100%);
  border-color: var(--game-blue-base);
}

.question-source-card.selected .question-source-title {
  color: var(--game-blue-base);
}

/* VIP badge overlay */
.question-source-vip-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #FFD700 0%, #FFAA00 100%);
  color: #7A4A00;
  font-size: 0.65rem;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  padding: 4px 10px;
  border-radius: 0 16px 0 12px;
  border-bottom: 2px solid #B8860B;
  border-left: 2px solid #B8860B;
  z-index: 2;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* VIP-locked style when user is not VIP */
.question-source-card-ai.vip-locked::before {
  background: linear-gradient(180deg, #F5F0FF 0%, #EDE0FF 100%);
}

.question-source-card-ai.vip-locked .question-source-icon {
  opacity: 0.6;
}

/* Dark mode */
[data-theme="dark"] .question-source-card.selected::before {
  background: linear-gradient(180deg, #1A2A4E 0%, #0E1A38 100%);
  border-color: var(--game-blue-base);
}

@media (max-width: 520px) {
  .question-source-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .question-source-inner {
    flex-direction: row;
    text-align: left;
    padding: 16px 14px;
    gap: 14px;
  }

  .question-source-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .question-source-desc {
    display: none;
  }
}

/* ===================================================== */

.question-editor {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--card-border);
}

/* Question preview cards (step 3 & review step) */
.q-preview-card {
  background: var(--container-inner-bg);
  border: 3px solid var(--container-outer-border);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
  box-shadow: 0px 4px 0px var(--container-outer-border);
  overflow: hidden;
}

.q-preview-number {
  display: inline-block;
  background: var(--container-outer-bg);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.q-preview-text {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.4;
}

.q-preview-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.q-preview-answer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid var(--container-inner-border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: all 0.2s;
}

.q-preview-answer-correct {
  background: rgba(114, 184, 14, 0.12);
  border-color: var(--game-green-base);
  color: var(--game-green-base);
}

.q-preview-correct-icon {
  color: var(--game-green-base);
  font-size: 1rem;
  flex-shrink: 0;
}

.q-preview-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--container-inner-border);
  flex-shrink: 0;
}

.q-preview-more {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 8px;
  padding: 8px;
  border: 2px dashed var(--container-inner-border);
  border-radius: 10px;
}

[data-theme="dark"] .q-preview-answer {
  background: rgba(58, 34, 96, 0.6);
}

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 14px 20px 14px 52px;
  border-radius: 16px;
  color: white;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  transform: translateX(120%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  border: 3px solid rgba(255, 255, 255, 0.2);
  max-width: 360px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.notification::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
}

.notification.show {
  transform: translateX(0);
}

.notification.success {
  background: linear-gradient(180deg, var(--game-green-top) 0%, var(--game-green-base) 100%);
  border-color: var(--game-green-border);
}

.notification.success::before {
  content: '\2714';
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.notification.success.show::before {
  animation: notificationSuccessPop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes notificationSuccessPop {
  0% {
    transform: translateY(-50%) scale(0);
    opacity: 0;
  }

  60% {
    transform: translateY(-50%) scale(1.25);
    opacity: 1;
  }

  100% {
    transform: translateY(-50%) scale(1);
  }
}

.notification.error {
  background: linear-gradient(180deg, var(--game-red-top) 0%, var(--game-red-base) 100%);
  border-color: var(--game-red-border);
}

.notification.error::before {
  content: '\2716';
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.notification.info {
  background: linear-gradient(180deg, var(--game-blue-top) 0%, var(--game-blue-base) 100%);
  border-color: var(--game-blue-border);
}

.notification.info::before {
  content: 'i';
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-family: Georgia, serif;
  font-style: italic;
}

.notification.warning {
  background: linear-gradient(180deg, var(--game-orange-top) 0%, var(--game-orange-base) 100%);
  border-color: var(--game-orange-border);
}

.notification.warning::before {
  content: '!';
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.spectator-message {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 14px;
}

.sound-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--game-green-top) 0%, var(--game-green-base) 100%);
  border: 3px solid var(--game-green-border);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 100;
  transition: all 0.15s ease;
  box-shadow: 0px 4px 0px var(--game-green-border), 0px 6px 16px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 18px;
  text-shadow: -1px -1px 0 var(--game-green-border), 1px -1px 0 var(--game-green-border), -1px 1px 0 var(--game-green-border), 1px 1px 0 var(--game-green-border);
}

.sound-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0px 4px 0px var(--game-green-border), 0px 8px 20px rgba(0, 0, 0, 0.3);
}

.sound-toggle:active {
  transform: translateY(2px);
  box-shadow: 0px 2px 0px var(--game-green-border), 0px 3px 8px rgba(0, 0, 0, 0.2);
}

.theme-toggle {
  position: fixed;
  bottom: 82px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--game-purple-top) 0%, var(--game-purple-base) 100%);
  border: 3px solid var(--game-purple-border);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 100;
  transition: all 0.15s ease;
  box-shadow: 0px 4px 0px var(--game-purple-border), 0px 6px 16px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 16px;
  text-shadow: -1px -1px 0 var(--game-purple-border), 1px -1px 0 var(--game-purple-border), -1px 1px 0 var(--game-purple-border), 1px 1px 0 var(--game-purple-border);
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0px 4px 0px var(--game-purple-border), 0px 8px 20px rgba(0, 0, 0, 0.3);
}

.theme-toggle:active {
  transform: translateY(2px);
  box-shadow: 0px 2px 0px var(--game-purple-border), 0px 3px 8px rgba(0, 0, 0, 0.2);
}

.loading {
  display: inline-block !important;
  position: relative !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  border-top-color: var(--game-orange-top, #FFAA22) !important;
  border-right-color: var(--game-purple-top, #E252FF) !important;
  animation: qpSpin 1s linear infinite !important;
  vertical-align: middle !important;
}

.loading::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  border-bottom-color: var(--game-blue-top, #3CC3FF) !important;
  border-left-color: var(--game-green-top, #A2E022) !important;
  animation: qpSpin 1.5s linear infinite reverse !important;
}

/* Override Font Awesome spinners to match the premium radar loader */
.fa-spinner,
.fa-spinner.fa-spin,
.fa-spinner.fa-pulse {
  display: inline-block !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: normal !important;
  text-decoration: none !important;
  position: relative !important;
  width: 1.2em !important;
  height: 1.2em !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  border-top-color: var(--game-orange-top, #FFAA22) !important;
  border-right-color: var(--game-purple-top, #E252FF) !important;
  animation: qpSpin 1s linear infinite !important;
  vertical-align: middle !important;
  speak: none;
}

.fa-spinner::before,
.fa-spinner::after {
  content: '' !important;
  display: block !important;
}

.fa-spinner::before {
  position: absolute !important;
  top: 1.5px !important;
  left: 1.5px !important;
  right: 1.5px !important;
  bottom: 1.5px !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  border-bottom-color: var(--game-blue-top, #3CC3FF) !important;
  border-left-color: var(--game-green-top, #A2E022) !important;
  animation: qpSpin 1.5s linear infinite reverse !important;
}

.fa-spinner.fa-2x {
  width: 2.2em !important;
  height: 2.2em !important;
}

.fa-spinner.fa-2x::before {
  top: 3px !important;
  left: 3px !important;
  right: 3px !important;
  bottom: 3px !important;
}


.hidden {
  display: none !important;
}

.answered-indicator {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.8rem;
  color: var(--success);
}

.form-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 6px;
}

.ai-generate-container {
  margin-top: 20px;
  text-align: center;
}

.step-indicator {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.steps-container {
  display: flex;
  justify-content: center;
}

.step {
  display: flex;
  align-items: center;
  margin: 6px;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid var(--card-border);
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.step.active .step-number {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.step.completed .step-number {
  background: linear-gradient(135deg, var(--success), #059669);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.step-title {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 500;
}

.step-content {
  display: none;
}

.step-content.active {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

.navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  gap: 12px;
}

.connection-status {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--game-purple-top) 0%, var(--game-purple-base) 100%);
  border: 3px solid var(--game-purple-border);
  z-index: 100;
  display: none;
  align-items: center;
  gap: 10px;
  box-shadow: 0px 3px 0px var(--game-purple-border), 0px 6px 16px rgba(0, 0, 0, 0.2);
  font-size: 13px;
  color: #FFFFFF;
  font-weight: 700;
  text-transform: uppercase;
}

.connection-status.visible {
  display: flex;
}

.top-left-header {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 18px;
}

.top-left-header.hidden {
  display: none !important;
}

.user-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 6px;
  height: 48px;
  box-sizing: border-box;
  border-radius: 28px;
  background-color: var(--container-outer-bg);
  border: 4px solid var(--container-outer-border);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0px 4px 0px var(--container-outer-border), 0px 6px 16px rgba(0, 0, 0, 0.2);
}

.user-bar::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 20px;
  background-color: var(--container-inner-bg);
  border: 2px solid var(--container-inner-border);
  z-index: 0;
  pointer-events: none;
}

.user-bar>* {
  position: relative;
  z-index: 1;
}

.user-bar:hover {
  transform: scale(1.05);
  box-shadow: 0px 4px 0px var(--container-outer-border), 0px 8px 24px rgba(0, 0, 0, 0.3);
}

.user-bar-avatar {
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--game-blue-top), var(--game-blue-base));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: white;
  border: 3px solid var(--game-blue-border);
  /* box-shadow: 0px 3px 0px var(--game-blue-border);  */
  overflow: visible;
  position: relative;
  flex-shrink: 0;
}

.user-bar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.user-bar-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75px;
  color: var(--text-primary);
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
}

.connection-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.connected {
  background: var(--success);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.disconnected {
  background: var(--danger);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.step-number.clickable {
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.step-number.clickable:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 12px var(--glass-shadow);
}

.step-number.clickable:active {
  transform: scale(0.95);
}

.step-number.clickable::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark);
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.step-number.clickable:hover::after {
  opacity: 1;
}

.step-number.disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.step-number.disabled:hover {
  transform: none;
  box-shadow: none;
}

.step.completed .step-number.clickable {
  background: linear-gradient(135deg, var(--success), #059669);
  color: white;
  border-color: transparent;
}

.step.active .step-number.clickable {
  cursor: default;
}

.step.active .step-number.clickable:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.modal-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--modal-overlay);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-container.active {
  display: flex;
}

/* The generic confirm/alert dialog (modal.show()/showConfirmModal()) is
   routinely opened on top of another already-open .modal-container (Shop,
   Rewards, Notifications, etc. — e.g. the Endless/Teacher-mode credit
   confirmations opened from inside the Shop). Equal z-index left stacking
   order to DOM position, so #shop-modal (which comes later in the markup)
   was rendering above it. Always keep the confirm dialog on top. */
#modal-container.active {
  z-index: 10010;
}

.modal-content {
  border-radius: 28px;
  border: 4px solid #3E1E68;
  background-color: #6C4DF6;
  box-shadow: 0px 8px 0px #3E1E68, 0px 16px 48px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modalFadeIn 0.3s ease-out;
  position: relative;
  padding: 16px;
}

.modal-content::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 20px;
  background-color: var(--container-inner-bg);
  border: 2px solid var(--container-inner-border);
  z-index: 0;
}

.modal-content>* {
  position: relative;
  z-index: 1;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid var(--card-border);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.35rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.25s ease;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-close-btn:hover {
  background: var(--overlay-bg);
  transform: rotate(90deg);
  color: var(--text-primary);
}

.modal-container.no-close .modal-close-btn {
  display: none;
}

.modal-body {
  padding: 24px 28px;
  color: var(--text-primary);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 18px 28px;
  border-top: 1px solid var(--card-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Join Quiz: same routing/behavior as any other page (showPage), styled as a
   centered modal overlay instead of a full page. ID selector so it wins over
   the .page/.page.active rules regardless of source order. */
#join-game-page.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: var(--modal-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
  animation: none;
}

.question-editor-item {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--card-border);
}

.question-editor-item h4 {
  margin-bottom: 12px;
  color: var(--warning);
  -webkit-text-fill-color: var(--warning);
}

.answer-editor-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.answer-editor-item input[type="text"] {
  flex-grow: 1;
}

.answer-editor-item input[type="radio"] {
  margin-right: 4px;
  accent-color: var(--primary);
}

.add-answer-btn,
.remove-answer-btn {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 40px;
  font-size: 13px;
}

.add-answer-btn:hover,
.remove-answer-btn:hover {
  background: var(--glass-bg);
}

.add-question-btn {
  width: 100%;
  margin: 6px 0;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #FF6B6B 0%, #D31A1A 100%);
  transition: all 0.3s ease;
  border-radius: 30px;
  border: 3px solid var(--game-red-border);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-label:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 2px;
  background: linear-gradient(180deg, #FFFFFF 0%, #E8E8E8 100%);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-radius: 50%;
  border: 2px solid #999;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}

input:checked+.toggle-label {
  background: linear-gradient(180deg, var(--game-green-top) 0%, var(--game-green-base) 100%);
  border-color: var(--game-green-border);
}

input:checked+.toggle-label:before {
  transform: translateX(26px);
  border-color: var(--game-green-border);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}

.toggle-switch.large {
  width: 60px;
  height: 32px;
}

.toggle-switch.large .toggle-label:before {
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 3px;
}

.toggle-switch.large input:checked+.toggle-label:before {
  transform: translateX(28px);
}

.toggle-switch.small {
  width: 44px;
  height: 24px;
}

.toggle-switch.small .toggle-label:before {
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
}

.toggle-switch.small input:checked+.toggle-label:before {
  transform: translateX(20px);
}

.toggle-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toggle-label-text {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.progress-step {
  flex: 1;
  text-align: center;
  position: relative;
}

.progress-step:not(:last-child):after {
  content: '';
  position: absolute;
  top: 18px;
  right: -8px;
  width: 16px;
  height: 2px;
  background: var(--toggle-bg);
}

.progress-step.completed:not(:last-child):after {
  background: var(--success);
}

.progress-steps .step-number {
  margin-right: 0;
  width: 36px;
  height: 36px;
  font-size: 14px;
}

.progress-step.active .step-number {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.progress-step.completed .step-number {
  background: linear-gradient(135deg, var(--success), #059669);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.progress-steps .step-title {
  font-size: 0.75rem;
  margin-top: 4px;
}

.progress-step.active .step-title {
  color: var(--primary);
  font-weight: 600;
}

.progress-step.completed .step-title {
  color: var(--success);
}

.step-status {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.progress-bar-container {
  width: 100%;
  height: 8px;
  background: var(--toggle-bg);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  width: 0%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(102, 126, 234, 0.3);
}

.progress-message {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
  font-size: 14px;
}

.progress-details {
  font-size: 12px;
  color: var(--text-secondary);
}

#creator-registration-prompt {
  max-width: 480px;
  margin: 20px auto;
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 16px 0 var(--glass-shadow);
}

#creator-registration-prompt .card-header {
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-bottom: 1px solid var(--card-border);
  color: white;
  font-weight: 600;
}

#creator-registration-prompt .card-body {
  padding: 20px;
  color: var(--text-primary);
}

#creator-registration-prompt .card-body p {
  margin-bottom: 14px;
}

.no-podium {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
  font-style: italic;
  margin: 20px 0;
}

.creator-entry {
  opacity: 0.7;
  border-left: 3px solid var(--text-secondary);
}

.creator-entry .leaderboard-score {
  color: var(--text-secondary);
}

.no-players {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Chat-poll-style result on normal-mode answers (added at reveal by
   showAnswerDistribution) — same fill + "👥 count · %" chip presentation as
   Live Dev Mode's Ask-the-Chat poll. overflow + z-index create the stacking
   context the negative-z .dev-answer-poll-fill needs to paint above the
   card's own background (see the Dev Preview equivalent further down). */
.answer.poll-reveal {
  overflow: hidden;
  z-index: 0;
}

.answer.poll-reveal .dev-answer-poll-fill {
  background: rgba(100, 116, 139, 0.22);
}

.answer.correct.poll-reveal .dev-answer-poll-fill,
.answer.incorrect.poll-reveal .dev-answer-poll-fill {
  background: rgba(255, 255, 255, 0.3);
}

.answer.poll-reveal .dev-answer-poll-pct {
  position: absolute;
  top: 6px;
  right: 8px;
  margin: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  animation: devBannerFadeIn 0.35s ease both;
}

[data-theme="dark"] .answer.poll-reveal .dev-answer-poll-fill {
  background: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .answer.correct.poll-reveal .dev-answer-poll-fill,
[data-theme="dark"] .answer.incorrect.poll-reveal .dev-answer-poll-fill {
  background: rgba(255, 255, 255, 0.18);
}

/* .distribution-* below are still used by the Dev Mode analytics bar charts */
.distribution-bar {
  flex: 1;
  height: 10px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.distribution-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 999px;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.distribution-text {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--text-dark);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 2px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.distribution-text i {
  font-size: 0.65rem;
  opacity: 0.7;
}

[data-theme="dark"] .distribution-bar {
  background: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .distribution-text {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.12);
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes glow {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(108, 77, 246, 0.3);
  }

  50% {
    box-shadow: 0 0 24px rgba(108, 77, 246, 0.5), 0 0 40px rgba(108, 77, 246, 0.2);
  }
}

/* === Celebration & Reward Animations === */

@keyframes starPopIn {
  0% {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
  }

  60% {
    transform: scale(1.3) rotate(5deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floatUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(-60px) scale(0.8);
    opacity: 0;
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.15);
  }

  70% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes coinDrop {
  0% {
    transform: translateY(-80px) rotate(-10deg);
    opacity: 0;
  }

  40% {
    transform: translateY(0) rotate(5deg);
    opacity: 1;
  }

  60% {
    transform: translateY(-8px) rotate(-3deg);
  }

  80% {
    transform: translateY(0) rotate(2deg);
  }

  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

@keyframes slideInElastic {
  0% {
    transform: translateX(-120%) scale(0.8);
    opacity: 0;
  }

  60% {
    transform: translateX(5%) scale(1.02);
    opacity: 1;
  }

  80% {
    transform: translateX(-2%);
  }

  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.star-pop {
  animation: starPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.star-pop-delay-1 {
  animation-delay: 0.1s;
}

.star-pop-delay-2 {
  animation-delay: 0.3s;
}

.star-pop-delay-3 {
  animation-delay: 0.5s;
}

.coin-drop {
  animation: coinDrop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.floating-text {
  position: absolute;
  font-family: 'Fredoka One', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--game-green-top);
  text-shadow: -2px -2px 0 var(--game-green-border), 2px -2px 0 var(--game-green-border), -2px 2px 0 var(--game-green-border), 2px 2px 0 var(--game-green-border);
  animation: floatUp 1.5s ease-out forwards;
  pointer-events: none;
  z-index: 1000;
}

.bounce-in {
  animation: bounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.slide-in-elastic {
  animation: slideInElastic 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* === HUD Indicators === */

.hud-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5EDD8 100%);
  border: 3px solid var(--container-inner-border);
  border-radius: 30px;
  padding: 6px 16px 6px 6px;
  box-shadow: 0px 3px 0px var(--container-inner-border);
  font-family: 'Fredoka One', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: var(--text-dark);
}

.hud-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

.hud-icon-coins {
  background: linear-gradient(180deg, #FFD700 0%, #FFAA00 100%);
  border: 2px solid #B8860B;
}

.hud-icon-gems {
  background: linear-gradient(180deg, var(--game-blue-top) 0%, var(--game-blue-base) 100%);
  border: 2px solid var(--game-blue-border);
}

.hud-icon-xp {
  background: linear-gradient(180deg, var(--game-purple-top) 0%, var(--game-purple-base) 100%);
  border: 2px solid var(--game-purple-border);
}

.hud-icon-health {
  background: linear-gradient(180deg, var(--game-red-top) 0%, var(--game-red-base) 100%);
  border: 2px solid var(--game-red-border);
}

/* === GameToggle Switch (2-state) === */

.game-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
}

.game-toggle-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dark);
}

/* === Level Complete Panel === */

.level-complete-panel {
  text-align: center;
  padding: 32px;
  animation: bounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.level-complete-title {
  font-family: 'Fredoka One', 'Nunito', sans-serif;
  font-size: 2.5rem;
  background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  text-shadow: none;
}

.star-container {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 24px 0;
}

.reward-star {
  width: 60px;
  height: 60px;
  background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0px 4px 0px #B8860B) drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.3));
  opacity: 0;
}

.floating {
  animation: float 3s ease-in-out infinite;
}

.glowing {
  animation: glow 2s ease-in-out infinite;
}

@media (hover: none) {

  .btn:hover,
  .btn:active {
    transform: none;
  }

  .btn:active {
    transform: scale(0.96);
  }

  .answer:hover {
    border-color: var(--card-border);
    transform: none;
  }

  .answer:active {
    transform: scale(0.97);
  }
}

@media (max-width: 768px) {
  .step-number.clickable {
    min-height: 44px;
    min-width: 44px;
  }

  .step-number.clickable::after {
    font-size: 10px;
    bottom: -24px;
  }

  .modal-content {
    max-width: 100%;
    border-radius: 16px;
    margin: 10px;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 16px 20px;
  }

  .container {
    padding: 12px;
  }

  .glass-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .podium {
    height: 240px;
    gap: 8px;
  }

  .podium-base {
    width: 80px;
  }

  .podium-first {
    height: 150px;
  }

  .podium-second {
    height: 110px;
  }

  .podium-third {
    height: 70px;
  }

  .btn {
    padding: 12px 24px;
    font-size: 14px;
    min-height: 44px;
  }

  .form-control,
  .csd-trigger {
    padding: 12px 14px;
    min-height: 44px;
  }

  .sound-toggle,
  .theme-toggle {
    width: 44px;
    height: 44px;
  }

  .theme-toggle {
    bottom: 72px;
  }

  .question-editor ul {
    list-style: none;
    padding-left: 0;
  }

  .correct-badge {
    color: var(--game-green-base);
    font-size: 1.1em;
    margin-left: 6px;
  }

  .notification {
    top: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
    padding: 12px 16px 12px 46px;
    font-size: 13px;
  }

  .notification::before {
    left: 12px;
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .connection-status {
    font-size: 12px;
    padding: 8px 12px;
  }

  .question {
    font-size: 1.15rem;
  }

  .step {
    margin: 4px;
  }

  .step-title {
    font-size: 0.75rem;
  }
}

@media (max-width: 600px) {
  .answers {
    grid-template-columns: 1fr;
  }

  .glass-card {
    min-width: 0;
    max-width: 100%;
  }

  .lifelines-row {
    gap: 8px !important;
  }

  .lifeline-btn {
    width: 66px !important;
    min-height: 66px !important;
  }

  .lifeline-btn-icon {
    font-size: 20px !important;
  }

  .lifeline-btn-label {
    font-size: 11px !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 8px;
  }

  h1 {
    font-size: 1.6rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  .btn-quickplay {
    padding: 18px 24px;
    font-size: 1.1rem;
    min-height: 60px;
    max-width: 100%;
  }

  .home-buttons-row {
    flex-direction: column;
    gap: 10px;
  }

  .btn {
    padding: 10px 18px;
    font-size: 13px;
    min-height: 42px;
    margin: 4px;
  }

  .form-control,
  .csd-trigger {
    padding: 10px 12px;
    min-height: 42px;
  }

  .podium-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }

  .countdown-number {
    font-size: 36px;
  }

  .step-title {
    display: none;
  }

  .step {
    margin: 4px 2px;
  }

  .step-number {
    width: 34px;
    height: 34px;
    font-size: 13px;
    margin-right: 0;
  }

  .step-indicator {
    margin-bottom: 16px;
  }

  .navigation-buttons {
    flex-direction: column;
    gap: 8px;
  }

  .navigation-buttons .btn {
    width: 100%;
    margin: 0;
  }

  .player-item {
    padding: 10px 12px;
  }

  .player-avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
    margin-right: 10px;
  }

  .player-status {
    font-size: 10px;
    padding: 3px 8px;
    margin-left: 8px;
  }

  #game-code {
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: 6px;
  }

  #join-game-page .auth-status {
    display: block;
    margin-bottom: 6px;
  }

  .form-group {
    margin-bottom: 14px;
  }

  .question {
    font-size: 1.05rem;
    padding: 0 4px;
  }

  .answer {
    padding: 14px 16px;
    font-size: 14px;
    min-height: 56px;
  }

  .answers {
    gap: 10px;
  }

  .share-link-row {
    flex-direction: column;
    align-items: stretch;
  }

  .share-link-row .form-control {
    width: 100%;
  }

  .share-link-row .btn {
    width: 100%;
  }

  .level-up-card {
    padding: 24px 16px;
    width: 92%;
  }

  .level-up-emoji {
    font-size: 3rem;
  }

  .level-up-title {
    font-size: 1.5rem;
  }

  .level-up-levels {
    font-size: 1.1rem;
  }

  .glass-card {
    padding: 16px;
  }

  .user-bar {
    height: 48px;
    box-sizing: border-box;
    padding: 0 10px 0 6px;
    gap: 6px;
  }

  .user-bar-name {
    max-width: 65px;
    font-size: 0.75rem;
  }

  #gameplay-controls {
    top: 8px;
    right: 8px;
  }

  #gameplay-exit {
    top: 8px;
    left: 8px;
  }

  .sound-toggle {
    width: 44px;
    height: 44px;
    font-size: 15px;
    bottom: 12px;
    right: 12px;
  }

  .theme-toggle {
    width: 38px;
    height: 38px;
    font-size: 14px;
    bottom: 66px;
    right: 12px;
  }

  /* Matches .floating-btn-top.shifted-down's size at this breakpoint so
     both right-side buttons stay in step with both left-side ones. */
  .theme-toggle.mobile-grown {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }

  .countdown-container {
    padding: 16px;
    margin: 12px 0;
  }

  .countdown-number {
    font-size: 32px;
  }

  .modal-content {
    border-radius: 16px;
    margin: 8px;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 12px 16px;
  }

  .stats-grid {
    gap: 8px;
  }

  .stat-card {
    padding: 14px 8px;
  }

  .profile-header {
    gap: 16px;
    padding: 20px 16px;
  }

  .profile-avatar {
    width: 80px;
    height: 80px;
    font-size: 2rem;
  }

  .timer-container {
    height: 12px;
  }

  .podium {
    height: 200px;
    gap: 6px;
  }

  .podium-base {
    width: 64px;
  }

  .podium-first {
    height: 120px;
  }

  .podium-second {
    height: 88px;
  }

  .podium-third {
    height: 56px;
  }

  .podium-avatar {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .podium-medal-necklace {
    font-size: 1.15rem;
    bottom: -11px;
  }

  .leaderboard-row {
    padding: 9px 12px 9px 8px;
    gap: 8px;
  }

  .lb-rank-col {
    width: 22px;
    font-size: 0.78rem;
  }

  .leaderboard-row[data-new-rank="1"] .lb-rank-col {
    font-size: 1.2rem;
  }

  .leaderboard-row[data-new-rank="2"] .lb-rank-col {
    font-size: 1.05rem;
  }

  .leaderboard-row[data-new-rank="3"] .lb-rank-col {
    font-size: 0.95rem;
  }

  .lb-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
    border-radius: 50%;
  }

  .lb-name-text {
    font-size: 0.85rem;
  }

  .lb-score {
    font-size: 0.95rem;
  }

  .lb-score-unit {
    display: none;
  }

  .lb-score-col {
    min-width: 54px;
  }

  .leaderboard-item {
    padding: 16px 14px;
    min-height: 58px;
  }

  .leaderboard-name {
    font-size: 0.95rem;
    font-weight: 700;
  }


  #questions-preview>div {
    flex-wrap: wrap;
  }

  #edit-questions-btn,
  #export-questions-btn,
  #clear-questions-btn {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .container {
    padding: 4px;
  }

  h1 {
    font-size: 1.3rem;
  }

  h2 {
    font-size: 1.1rem;
  }

  .btn {
    padding: 8px 14px;
    font-size: 12px;
    min-height: 38px;
  }

  .form-control,
  .csd-trigger {
    padding: 8px 10px;
    min-height: 38px;
    font-size: 14px;
  }

  #game-code {
    font-size: 1.2rem;
    letter-spacing: 4px;
  }

  #join-game-page .auth-status {
    font-size: 0.75rem;
  }

  #join-game-page .auth-login-btn {
    font-size: 12px;
    padding: 5px 10px;
  }

  .step-number {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .step {
    margin: 2px;
  }

  .player-item {
    padding: 8px 10px;
  }

  .player-avatar {
    width: 30px;
    height: 30px;
    font-size: 11px;
    margin-right: 8px;
  }

  .player-status {
    display: none;
  }

  .question {
    font-size: 0.95rem;
  }

  .answer {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 48px;
  }

  .answers {
    gap: 8px;
  }

  .glass-card {
    padding: 12px;
  }

  .level-up-card {
    padding: 16px 12px;
  }

  .level-up-emoji {
    font-size: 2.4rem;
  }

  .level-up-title {
    font-size: 1.2rem;
  }

  .sound-toggle {
    width: 38px;
    height: 38px;
    font-size: 13px;
    bottom: 8px;
    right: 8px;
  }

  .theme-toggle {
    width: 34px;
    height: 34px;
    font-size: 12px;
    bottom: 56px;
    right: 8px;
  }

  .theme-toggle.mobile-grown {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }

  .user-bar {
    height: 48px;
    box-sizing: border-box;
    padding: 0 8px 0 4px;
    gap: 4px;
  }

  .user-bar-name {
    max-width: 50px;
    font-size: 0.7rem;
  }

  .user-bar-avatar {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .stat-card {
    padding: 10px 6px;
  }

  .stat-value {
    font-size: 1.2rem;
  }

  .profile-header {
    padding: 16px 12px;
    gap: 12px;
  }

  .countdown-number {
    font-size: 26px;
  }

  .countdown-container {
    padding: 12px;
  }

  .podium {
    height: 160px;
  }

  .podium-base {
    width: 52px;
  }

  .podium-first {
    height: 96px;
  }

  .podium-second {
    height: 70px;
  }

  .podium-third {
    height: 44px;
  }

  .podium-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }

  .modal-content {
    margin: 4px;
    border-radius: 12px;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 10px 12px;
  }

  #lobby-game-code {
    font-size: 1.2rem !important;
    letter-spacing: 3px !important;
  }

  #creator-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #creator-controls .btn {
    width: 100%;
  }
}

/* Leaderboard Modal */
.leaderboard-modal-content {
  padding: 0;
}

.leaderboard-modal-header {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  padding: 8px 0 16px 0;
  color: var(--text-primary);
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 12px;
}

.leaderboard-modal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ═══ In-game leaderboard rows ═══ */
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background: var(--lb-row-bg);
  border: 1px solid var(--lb-row-border);
  border-left: 4px solid var(--lb-row-accent);
  position: relative;
  will-change: transform;
  overflow: visible;
}

/* Rank accent colours — driven by data attribute so they persist after cleanup */
.leaderboard-row[data-new-rank="1"] {
  background: linear-gradient(120deg, rgba(251, 191, 36, 0.14) 0%, rgba(245, 158, 11, 0.04) 100%);
  border-left-color: #f59e0b;
  box-shadow: 0 2px 14px rgba(245, 158, 11, 0.1);
}

.leaderboard-row[data-new-rank="2"] {
  background: linear-gradient(120deg, rgba(148, 163, 184, 0.1) 0%, transparent 100%);
  border-left-color: #94a3b8;
}

.leaderboard-row[data-new-rank="3"] {
  background: linear-gradient(120deg, rgba(217, 119, 6, 0.1) 0%, transparent 100%);
  border-left-color: #d97706;
}

/* ─── Current player ("You") row — must be instantly findable ─── */
.leaderboard-row.highlighted-player {
  background: var(--lb-me-bg);
  border: 2px solid var(--lb-me-border);
  border-left: 6px solid var(--lb-me-border);
  /* Static glow as fallback while FLIP inline animations temporarily
     override the pulsing one */
  box-shadow: 0 0 0 3px var(--lb-me-ring), 0 4px 14px var(--lb-me-glow);
  animation: meRowGlow 2s ease-in-out infinite;
  z-index: 2;
}

@keyframes meRowGlow {

  0%,
  100% {
    box-shadow: 0 0 0 3px var(--lb-me-ring), 0 4px 14px var(--lb-me-glow);
  }

  50% {
    box-shadow: 0 0 0 5px var(--lb-me-ring), 0 4px 24px var(--lb-me-glow);
  }
}

/* Final-leaderboard rows fade in via their own animation (base state is
   opacity:0), so the highlighted row must run both animations together. */
.final-lb-row.highlighted-player {
  animation: finalRowSlideIn 0.45s cubic-bezier(0.34, 1.2, 0.64, 1) both,
    meRowGlow 2s ease-in-out infinite;
}

/* Rank number becomes a bold purple pill so the position jumps out */
.leaderboard-row.highlighted-player .lb-rank-col {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  border-radius: 9px;
  padding: 4px 0;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.45);
}

.leaderboard-row.highlighted-player .lb-name-text {
  font-weight: 800;
}

.leaderboard-row.highlighted-player .lb-score {
  color: var(--lb-me-border);
}

@media (prefers-reduced-motion: reduce) {
  .leaderboard-row.highlighted-player {
    animation: none;
    opacity: 1;
    box-shadow: 0 0 0 3px var(--lb-me-ring), 0 4px 14px var(--lb-me-glow);
  }
}

/* FLIP animation state */
.leaderboard-row.slide-up.flip-animating {
  border-left-color: #10b981;
  background: linear-gradient(120deg, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.28);
}

.leaderboard-row.slide-down.flip-animating {
  border-left-color: #ef4444;
  opacity: 0.82;
}

/* Pop-up animation for rising rows */
@keyframes rowPopUp {
  0% {
    transform: translateY(var(--flip-delta)) scale(1);
  }

  22% {
    transform: translateY(calc(var(--flip-delta) * 0.55)) scaleY(1.12) scaleX(1.04);
    filter: brightness(1.06);
  }

  100% {
    transform: translateY(0) scale(1);
    filter: none;
  }
}

/* Smooth fall for sinking rows */
@keyframes rowSlideDown {
  from {
    transform: translateY(var(--flip-delta));
  }

  to {
    transform: translateY(0);
  }
}

/* Sequential row reveal */
.leaderboard-row.lb-pre-reveal {
  opacity: 0;
}

.leaderboard-row.lb-revealed {
  animation: lbRowReveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes lbRowReveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

  to {
    opacity: 1;
  }
}

/* Current player position highlight */
.leaderboard-row.your-rank-highlight {
  animation: yourRankPulse 0.75s ease-out both;
  position: relative;
}

@keyframes yourRankPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.6);
  }

  50% {
    box-shadow: 0 0 0 9px rgba(139, 92, 246, 0.1);
  }

  100% {
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
  }
}

.your-rank-label {
  position: absolute;
  right: 10px;
  top: -20px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
  pointer-events: none;
  z-index: 10;
}

/* ─── Leaderboard row layout elements ─── */
.lb-rank-col {
  width: 28px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--lb-text-faint);
  flex-shrink: 0;
  font-family: 'Fredoka', sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.leaderboard-row[data-new-rank="1"] .lb-rank-col {
  font-size: 1.35rem;
}

.leaderboard-row[data-new-rank="2"] .lb-rank-col {
  font-size: 1.2rem;
}

.leaderboard-row[data-new-rank="3"] .lb-rank-col {
  font-size: 1.1rem;
}

.lb-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: white;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
}

.lb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.leaderboard-row[data-new-rank="1"] .lb-avatar {
  box-shadow: 0 0 0 2.5px #fbbf24, 0 0 8px rgba(251, 191, 36, 0.35);
}

.leaderboard-row[data-new-rank="2"] .lb-avatar {
  box-shadow: 0 0 0 2px #94a3b8;
}

.leaderboard-row[data-new-rank="3"] .lb-avatar {
  box-shadow: 0 0 0 2px #d97706;
}

.lb-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lb-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: nowrap;
}

.lb-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--lb-text);
  min-width: 0;
  flex-shrink: 1;
}

.lb-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: nowrap;
}

.lb-score-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 70px;
}

.lb-score-top {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.lb-score {
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--lb-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: 'Fredoka', sans-serif;
  line-height: 1;
}

.lb-score-unit {
  font-size: 0.6rem;
  color: var(--lb-text-faint);
  font-weight: 600;
  line-height: 1;
}

.score-change {
  font-size: 0.7rem;
  font-weight: 700;
  text-align: right;
  opacity: 0;
}

.score-change.positive {
  color: #10b981;
}

.score-change.negative {
  color: #f87171;
}

.score-change.score-change-active {
  animation: fadeInChange 0.3s ease-out both;
}

.score-change.score-change-active.positive {
  animation: scoreTagPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes fadeInChange {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInJoin {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.rank-up {
  animation: bounceUp 0.4s ease-out;
}

.rank-down {
  animation: bounceDown 0.4s ease-out;
}

@keyframes bounceUp {
  0% {
    transform: translateY(6px);
    opacity: 0;
  }

  60% {
    transform: translateY(-2px);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes bounceDown {
  0% {
    transform: translateY(-6px);
    opacity: 0;
  }

  60% {
    transform: translateY(2px);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* === Enhanced Leaderboard === */

.lb-header-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.lb-header-title h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.lb-trophy-icon {
  display: inline-block;
  font-size: 1.15rem;
  color: #f59e0b;
  animation: trophySwing 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.55));
}

@keyframes trophySwing {

  0%,
  100% {
    transform: rotate(-10deg) scale(1);
  }

  50% {
    transform: rotate(10deg) scale(1.12);
  }
}

/* Rank change pill badge */
.rank-change-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  font-family: 'Fredoka', sans-serif;
  letter-spacing: 0.3px;
  white-space: nowrap;
  opacity: 0;
  animation: rankBadgeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s both;
}

.rank-change-badge.up {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.rank-change-badge.down {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1.5px solid rgba(239, 68, 68, 0.25);
}

/* Dev Mode Live Mode leaderboard: current-streak badge (renderLiveLeaderboardCore,
   renderDevInterstitialLb, renderDevPreviewLeaderboard, renderDevLeaderboard) */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  font-family: 'Fredoka', sans-serif;
  letter-spacing: 0.3px;
  white-space: nowrap;
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
  border: 1.5px solid rgba(249, 115, 22, 0.35);
  text-shadow: 0 0 8px rgba(249, 115, 22, 0.35);
}

@keyframes rankBadgeIn {
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(8px);
  }

  65% {
    transform: scale(1.18) translateY(-2px);
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Floating score particle */
.score-particle {
  position: absolute;
  pointer-events: none;
  font-size: 0.88rem;
  font-weight: 800;
  color: #10b981;
  font-family: 'Fredoka', sans-serif;
  animation: scoreParticleFloat 1.3s ease-out forwards;
  z-index: 20;
  white-space: nowrap;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

@keyframes scoreParticleFloat {
  0% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  25% {
    opacity: 1;
    transform: translateY(calc(-50% - 14px)) scale(1.15);
  }

  100% {
    opacity: 0;
    transform: translateY(calc(-50% - 46px)) scale(0.8);
  }
}

/* Score change tag pop */
@keyframes scoreTagPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-12deg);
  }

  65% {
    transform: scale(1.2) rotate(4deg);
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* First place pulsing gold glow */
.leaderboard-row.rank-1-glow {
  animation: firstPlaceGlow 2.2s ease-in-out infinite;
}

@keyframes firstPlaceGlow {

  0%,
  100% {
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  50% {
    box-shadow: 0 0 34px rgba(245, 158, 11, 0.55), 0 4px 18px rgba(245, 158, 11, 0.18);
  }
}

/* Dev Preview interstitial only — one-shot celebration on rows that climbed the
   ranking (correct answer / gift / bonus), added by renderDevInterstitialLb once
   the shared FLIP reorder settles. Green matches .rank-change-badge.up; rgba
   glow reads on both dark and light backgrounds. */
#dev-interstitial-lb .leaderboard-row.dev-rank-up-glow {
  animation: devRankUpGlow 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* A climber landing on rank 1 keeps the persistent first-place gold pulse after
   its one-shot celebration (a single-animation rule would otherwise drop
   firstPlaceGlow entirely while this class is present). */
#dev-interstitial-lb .leaderboard-row.rank-1-glow.dev-rank-up-glow {
  animation:
    devRankUpGlow 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    firstPlaceGlow 2.2s ease-in-out 1.5s infinite;
}

@keyframes devRankUpGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(34, 197, 94, 0);
  }

  35% {
    transform: scale(1.035);
    box-shadow: 0 0 26px rgba(34, 197, 94, 0.55), 0 4px 16px rgba(34, 197, 94, 0.25);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Auth Styles */
.auth-form {
  max-width: 400px;
  margin: 0 auto;
}

.auth-error {
  color: var(--danger);
  font-size: 0.85rem;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
  margin-bottom: 8px;
  text-align: center;
}

.auth-status-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.reset-otp-input {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 10px;
  font-family: 'Courier New', monospace;
}

.save-score-prompt {
  text-align: center;
  padding: 20px;
  margin-top: 20px;
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid var(--card-border);
  animation: fadeIn 0.5s ease-out;
}

.save-score-prompt p {
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
  min-height: auto;
}

.auth-settings-btn,
.auth-logout-btn {
  background: transparent;
  border: 1px solid var(--card-border);
  padding: 4px 10px;
  font-size: 13px;
  min-height: auto;
  cursor: pointer;
  border-radius: 8px;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.auth-settings-btn:hover,
.auth-logout-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.auth-status .btn-sm {
  margin-left: 4px;
}

@media (max-width: 480px) {
  .container {
    padding: 8px;
  }

  .glass-card {
    padding: 20px 16px;
  }

  h1 {
    font-size: 1.6rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  .btn {
    padding: 10px 18px;
    font-size: 13px;
    min-height: 42px;
    margin: 4px;
  }

  .form-control,
  .csd-trigger {
    padding: 10px 12px;
    min-height: 42px;
  }

  .podium-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }

  .countdown-number {
    font-size: 36px;
  }
}

/* === Profile Page === */

.profile-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 28px 24px;
  overflow: hidden;
}

/* Decorative background accent that fills empty space */
.profile-header::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

#profile-edit-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  flex-shrink: 0;
}

.profile-avatar-section {
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--game-blue-top), var(--game-blue-base));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  border: 4px solid var(--game-blue-border);
  box-shadow: 0px 5px 0px var(--game-blue-border), 0 6px 24px rgba(0, 0, 0, 0.25);
  overflow: visible;
  position: relative;
}

.profile-level-badge {
  position: absolute;
  bottom: -6px;
  right: -10px;
  background: linear-gradient(135deg, #FFD700 0%, #FFAA00 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  font-family: 'Fredoka', sans-serif;
  padding: 4px 10px;
  border-radius: 12px;
  border: 2px solid #B8860B;
  box-shadow: 0px 3px 0px #B8860B, 0 3px 10px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  text-shadow: -1px -1px 0 #B8860B, 1px -1px 0 #B8860B, -1px 1px 0 #B8860B, 1px 1px 0 #B8860B;
  z-index: 10;
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
}

.profile-info h2 {
  margin: 0 0 2px;
  font-size: 1.6rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: left;
  width: 100%;
}

.profile-joined {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.xp-bar-container {
  width: 100%;
  max-width: 100%;
}

.xp-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.xp-bar-track {
  width: 100%;
  height: 12px;
  background: linear-gradient(180deg, #E0C8A0 0%, #D0B890 100%);
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--container-inner-border);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.xp-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #FFD700 0%, #FFA500 50%, #FF6B6B 100%);
  transition: width 0.6s ease;
  box-shadow: 0 0 12px rgba(255, 165, 0, 0.5);
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 20px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.stat-card {
  border-radius: 20px;
  border: 4px solid var(--container-outer-border);
  background-color: var(--container-outer-bg);
  padding: 20px 12px;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0px 5px 0px var(--container-outer-border), 0px 8px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 13px;
  background: var(--stat-card-bg);
  border: 2px solid var(--container-inner-border);
  z-index: 0;
}

.stat-card>* {
  position: relative;
  z-index: 1;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0px 8px 0px var(--container-outer-border), 0px 12px 28px rgba(0, 0, 0, 0.2);
}

.achievement-card {
  background: var(--stat-card-bg);
  border: 3px solid var(--container-inner-border);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 200px;
  box-shadow: 0px 3px 0px var(--container-inner-border);
}

.achievement-card:hover {
  transform: translateY(-2px);
  box-shadow: 0px 5px 0px var(--container-inner-border), 0px 8px 24px rgba(0, 0, 0, 0.1);
}

.achievement-card.locked {
  opacity: 0.6;
  filter: grayscale(1);
}

.stat-icon {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: var(--primary);
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Profile Activity */
.profile-activity {
  margin-top: 20px;
  padding: 20px;
}

.profile-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.profile-tab {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.profile-tab:hover {
  background: var(--overlay-bg);
  color: var(--text-primary);
}

.profile-tab.active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
}

.profile-tab-content {
  display: none;
}

.profile-tab-content.active {
  display: block;
}

.my-quiz-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5EDD8 100%);
  border-radius: 16px;
  margin-bottom: 10px;
  border: 3px solid var(--container-inner-border);
  box-shadow: 0px 3px 0px var(--container-inner-border);
  transition: all 0.2s ease;
}

.my-quiz-item:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0E6D0 100%);
  transform: translateX(4px);
  box-shadow: 0px 3px 0px var(--container-inner-border), 0px 6px 16px rgba(0, 0, 0, 0.1);
}

.my-quiz-info {
  flex: 1;
}

.my-quiz-title {
  font-family: 'Fredoka One', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-dark);
}

.my-quiz-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.my-quiz-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.my-quiz-actions .btn {
  padding: 8px 14px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.my-quiz-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

[data-theme="dark"] .my-quiz-item {
  background: linear-gradient(180deg, #3A2260 0%, #2D1B4E 100%);
}

[data-theme="dark"] .my-quiz-item:hover {
  background: linear-gradient(180deg, #4A2D6E 0%, #2D1B4E 100%);
}

.profile-history-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.profile-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--card-border);
  transition: all 0.2s;
}

.profile-history-item:hover {
  background: var(--overlay-bg);
}

.history-rank {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.history-rank-1 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
}

.history-rank-2 {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: #fff;
}

.history-rank-3 {
  background: linear-gradient(135deg, #d97706, #92400e);
  color: #fff;
}

.history-rank-other {
  background: var(--card-border);
  color: var(--text-secondary);
}

.history-info {
  flex: 1;
  min-width: 0;
}

.history-score {
  font-weight: 600;
  color: var(--primary);
}

.history-date {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Auth profile button */
.auth-profile-btn {
  background: transparent;
  border: 1px solid var(--card-border);
  padding: 4px 10px;
  font-size: 13px;
  min-height: auto;
  cursor: pointer;
  border-radius: 8px;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.auth-profile-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 20px 20px;
    gap: 16px;
  }

  .profile-avatar {
    width: 88px;
    height: 88px;
    font-size: 2.2rem;
  }

  .profile-info {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .profile-info h2 {
    text-align: center;
  }

  .xp-bar-container {
    max-width: 100%;
    width: 100%;
  }

  .seasonal-titles-card {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .profile-header {
    padding: 20px 16px 16px;
  }

  .profile-avatar {
    width: 76px;
    height: 76px;
    font-size: 1.9rem;
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stat-value {
    font-size: 1.3rem;
  }
}

/* === Settings Modal (Unified) === */

.settings-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}

.settings-avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
  position: relative;
}

.settings-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.settings-avatar-preview .avatar-placeholder {
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
}

.settings-avatar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.settings-avatar-actions .btn {
  font-size: 13px;
  padding: 6px 16px;
  min-height: auto;
}

.settings-divider {
  border: none;
  border-top: 1px solid var(--card-border);
  margin: 16px 0;
}

.settings-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
}

.password-section {
  margin-top: 4px;
}

.password-toggle-btn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.password-toggle-btn:hover {
  text-decoration: underline;
}

.password-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.password-fields .form-group {
  margin-bottom: 0;
}

/* === Lobby Avatar === */

.lobby-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 6px;
  vertical-align: middle;
}

/* ├─── Dark Mode Overrides ──────────────────────────────────────────────── */

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-control:focus {
  background: linear-gradient(180deg, #3A2260 0%, #2D1B4E 100%);
  color: var(--text-primary);
  border-color: var(--container-inner-border);
}

[data-theme="dark"] select.form-control option {
  background-color: #2D1B4E;
  color: #F0E6FF;
}

select.form-control option {
  background-color: #FFF2DF;
  color: #1e293b;
}

/* === Custom Dropdown (replaces native <select>) === */

.csd-hidden {
  display: none !important;
}

.csd-wrapper {
  position: relative;
  width: 100%;
}

/* Compact variant (marketplace filters) */
.csd-wrapper.csd-compact {
  width: auto;
}

.csd-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 3px solid var(--container-inner-border);
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F0E0 100%);
  cursor: pointer;
  user-select: none;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 16px;
  min-height: 48px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.csd-trigger:hover {
  border-color: var(--game-blue-border);
}

.csd-trigger:focus {
  outline: none;
}

.csd-trigger:focus-visible {
  border-color: var(--game-blue-border);
  box-shadow: 0px 3px 0px var(--game-blue-border), 0 0 0 4px rgba(60, 195, 255, 0.15);
}

.csd-wrapper.open .csd-trigger {
  border-color: var(--game-blue-border);
  box-shadow: 0px 3px 0px var(--game-blue-border), 0 0 0 4px rgba(60, 195, 255, 0.15);
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F8FF 100%);
}

.csd-value {
  color: var(--text-dark);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.csd-arrow {
  color: var(--text-secondary);
  font-size: 0.8rem;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.csd-wrapper.open .csd-arrow {
  transform: rotate(180deg);
}

.csd-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  border-radius: 18px;
  border: 3px solid var(--container-inner-border);
  /* Match the trigger's own cream/white gradient — previously this used
     --container-outer-bg (a solid violet meant for unrelated outer-shell
     chrome), which visually clashed with the white/cream trigger + option
     colors as soon as the dropdown opened. */
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F0E0 100%);
  box-shadow: 0px 6px 0px var(--container-inner-border), 0 14px 32px rgba(0, 0, 0, 0.22);
  z-index: 9500;
  display: none;
  padding: 6px;
  overflow: hidden;
  min-width: 100%;
  box-sizing: border-box;
}

/* Portaled to <body> while open (see initCustomSelects) so a scrollable
   ancestor (e.g. .teacher-create-body / .teacher-modal-body) can never clip
   it; needs a z-index above .modal-container (10000) too since it's now a
   sibling of the modal rather than a descendant. */
.csd-dropdown.csd-portaled {
  z-index: 10050;
}

/* .csd-open mirrors .csd-wrapper.open for the dropdown once it's portaled to
   <body> (see buildCustomSelect) — at that point it's a sibling of .csd-wrapper,
   not a descendant, so the ancestor-based .csd-wrapper.open .csd-dropdown rule
   alone can never match it again. Both selectors are kept so a hypothetical
   non-portaled dropdown would still show too. */
.csd-wrapper.open .csd-dropdown,
.csd-dropdown.csd-open {
  display: block;
  animation: csdDropIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--container-inner-border) transparent;
}

.csd-wrapper.open .csd-dropdown::-webkit-scrollbar,
.csd-dropdown.csd-open::-webkit-scrollbar {
  width: 4px;
}

.csd-wrapper.open .csd-dropdown::-webkit-scrollbar-thumb,
.csd-dropdown.csd-open::-webkit-scrollbar-thumb {
  background: var(--container-inner-border);
  border-radius: 4px;
}

.csd-wrapper.csd-compact .csd-dropdown:not(.csd-portaled) {
  min-width: 210px;
  right: 0;
  left: auto;
}

@keyframes csdDropIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* flip upward when near bottom */
.csd-wrapper.open.csd-flip .csd-dropdown:not(.csd-portaled) {
  top: auto;
  bottom: calc(100% + 8px);
}

.csd-wrapper.open.csd-flip .csd-dropdown,
.csd-dropdown.csd-open-flip {
  animation: csdDropUp 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes csdDropUp {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.csd-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-dark);
  background: transparent;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  margin-bottom: 3px;
}

.csd-option:last-child {
  margin-bottom: 0;
}

.csd-option:hover {
  background: rgba(60, 195, 255, 0.12);
  border-color: var(--game-blue-base);
  color: var(--game-blue-base);
  transform: translateX(2px);
}

.csd-option.csd-selected {
  background: linear-gradient(180deg, var(--game-blue-top), var(--game-blue-base));
  border-color: var(--game-blue-border);
  box-shadow: 0px 2px 0px var(--game-blue-border);
  color: #fff;
}

.csd-option .csd-check {
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  margin-left: auto;
  flex-shrink: 0;
}

.csd-option.csd-selected .csd-check {
  opacity: 1;
}

/* Dark mode overrides */
[data-theme="dark"] .csd-trigger,
[data-theme="dark"] .csd-wrapper.open .csd-trigger {
  background: linear-gradient(180deg, #3A2260 0%, #2D1B4E 100%);
}

[data-theme="dark"] .csd-dropdown {
  background: linear-gradient(180deg, #3A2260 0%, #2D1B4E 100%);
  border-color: var(--container-inner-border);
  box-shadow: 0px 6px 0px var(--container-inner-border), 0 14px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .csd-value {
  color: var(--text-primary);
}

[data-theme="dark"] .csd-option {
  background: transparent;
  color: var(--text-primary);
}

[data-theme="dark"] .csd-option:hover {
  background: rgba(60, 195, 255, 0.12);
  color: var(--game-blue-top);
  border-color: var(--game-blue-base);
}

[data-theme="dark"] .answer {
  background: linear-gradient(180deg, #3A2260 0%, #2D1B4E 100%);
  color: var(--text-dark);
}

[data-theme="dark"] .answer.selected {
  background: linear-gradient(180deg, #4A2D6E 0%, #3A2260 100%);
}

[data-theme="dark"] .answer.correct {
  background: linear-gradient(180deg, #1A3A2A 0%, #2D6A4E 100%);
}

[data-theme="dark"] .answer.incorrect {
  background: linear-gradient(180deg, #3A1A1A 0%, #6A2D2D 100%);
}

[data-theme="dark"] .player-item {
  background: linear-gradient(180deg, #3A2260 0%, #2D1B4E 100%);
}

[data-theme="dark"] .player-item:hover {
  background: linear-gradient(180deg, #4A2D6E 0%, #2D1B4E 100%);
}

[data-theme="dark"] .leaderboard-item {
  background: linear-gradient(180deg, #3A2260 0%, #2D1B4E 100%);
}

[data-theme="dark"] .countdown-container {
  background: linear-gradient(180deg, #3A2260 0%, #2D1B4E 100%);
}

[data-theme="dark"] .file-upload-label {
  background: linear-gradient(180deg, #3A2260 0%, #2D1B4E 100%);
}

[data-theme="dark"] .file-upload:hover .file-upload-label {
  background: linear-gradient(180deg, #4A2D6E 0%, #2D1B4E 100%);
}

/* ├─── Custom Scrollbars ─────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Firefox scrollbar */
* {
  scrollbar-width: none;
}

.xp-bar-total {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 4px;
  text-align: right;
}

/* Level Up Celebration Modal — same frosted full-screen premium treatment
   as .chest-overlay (backdrop blur over a dark scrim) so the two reward
   overlays feel like one consistent system. */
.level-up-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  animation: levelUpGlow 1.5s ease-in-out infinite alternate;
}

@keyframes levelUpGlow {
  0% {
    background: rgba(0, 0, 0, 0.7);
  }

  100% {
    background: rgba(108, 77, 246, 0.15);
  }
}

.level-up-card {
  background: linear-gradient(135deg, #2D1B4E, #1a0a2e);
  border: 2px solid #6C4DF6;
  border-radius: 24px;
  padding: 40px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  animation: levelUpCardBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 0 60px rgba(108, 77, 246, 0.4);
}

@keyframes levelUpCardBounce {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.level-up-emoji {
  font-size: 4rem;
  margin-bottom: 8px;
  animation: levelUpEmoji 1s ease-in-out infinite alternate;
}

@keyframes levelUpEmoji {
  0% {
    transform: scale(1) rotate(-5deg);
  }

  100% {
    transform: scale(1.1) rotate(5deg);
  }
}

.level-up-title {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #FFD700, #FFA500, #FF6B6B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 8px 0;
  text-shadow: none;
}

.level-up-levels {
  font-size: 1.4rem;
  font-weight: 700;
  color: #E8D5F5;
  margin-bottom: 20px;
}

.level-up-xp-bar {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  height: 16px;
  overflow: hidden;
  margin-bottom: 8px;
}

.level-up-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #6C4DF6, #FFD700);
  border-radius: 12px;
  transition: width 1.5s ease-in-out;
}

.level-up-xp-text {
  font-size: 0.85rem;
  color: #B8A9D4;
  margin-bottom: 16px;
}

.level-up-rewards {
  min-height: 30px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #FFD700;
}

.level-up-rewards .reward-item {
  display: inline-block;
  margin: 4px 8px;
  padding: 6px 14px;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 20px;
  font-size: 0.85rem;
}

[data-theme="dark"] .level-up-card {
  background: linear-gradient(135deg, #2D1B4E, #1a0a2e);
  border-color: #7C5DFF;
  box-shadow: 0 0 60px rgba(124, 93, 255, 0.4);
}

/* Rank Up Celebration Modal Specifics */
.rank-up-card {
  border-color: #FFAA00 !important;
  box-shadow: 0 0 60px rgba(255, 170, 0, 0.45) !important;
}

.rank-up-title {
  background: linear-gradient(135deg, #FFFFFF, #FFAA00, #FF5500) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
}

.rank-up-emoji {
  animation: levelUpEmoji 1s ease-in-out infinite alternate;
}


/* === Animated Corner Frames === */

@keyframes cornerMotion {

  0%,
  100% {
    transform: rotate(0deg);
    opacity: 0.55;
  }

  50% {
    transform: rotate(2deg);
    opacity: 0.85;
  }
}

/* ═══════════════════════════════════════════════════════════════
   STORY CAVE — one permanent hand-authored cave/campfire environment for all of Story
   Mode (see PROJECT.md §7). The ancient-parchment design (layout, paper texture, text
   style) is identical in the app's Light and Dark mode — Story Mode never adopts the
   app's --bg-primary/--text-primary theme variables. The ONLY thing that reacts to the
   app's [data-theme] is the campfire itself: lit (fire/glow/embers/parchment firelight
   reflection) in Light mode, smoothly extinguished in Dark mode — see "Campfire light/dark
   reactivity" below. Every color token below is the Light-mode/fire-lit default.
   ═══════════════════════════════════════════════════════════════ */

.story-cave {
  --cave-rock-dark: #150e09;
  --cave-rock-mid: #2b1d12;
  --cave-rock-light: #46311c;
  --cave-fire-core: #ffd685;
  --cave-fire-mid: #ff9a3c;
  --cave-fire-outer: #ff5f2e;
  --cave-glow: rgba(255, 154, 60, 0.32);
  --cave-accent: #ff9a3c;
  --parchment-bg: #e9d3a3;
  --parchment-bg-alt: #dcc186;
  --parchment-edge: #6e4a28;
  /* Every piece of Story Mode text is white — never dark ink, even directly on the light
     parchment — bright in Light mode (fire lit, everything well-lit) and a touch dimmer in
     Dark mode (fire out, the cave sits darker), see the [data-theme="dark"] override below.
     --cave-text*/--parchment-text* are kept as aliases so every existing selector that
     already referenced them (loading screen, character select, header, narration, etc.)
     picks up the same white automatically with no per-selector changes needed. */
  --story-white-text: rgba(255, 255, 255, 0.98);
  --story-white-text-secondary: rgba(255, 255, 255, 0.78);
  --story-white-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.3);
  --cave-text: var(--story-white-text);
  --cave-text-secondary: var(--story-white-text-secondary);
  --parchment-text: var(--story-white-text);
  --parchment-text-secondary: var(--story-white-text-secondary);
}

[data-theme="dark"] .story-cave {
  --story-white-text: rgba(255, 255, 255, 0.82);
  --story-white-text-secondary: rgba(255, 255, 255, 0.6);
}

/* Story Mode Container — fully opaque cave backdrop, covers the app body regardless of
   the active Light/Dark mode (no need for the old !important body-style overrides). */
.story-mode-container.story-cave {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 140% 90% at 50% 115%, var(--cave-glow) 0%, transparent 55%), var(--cave-rock-dark);
  color: var(--cave-text);
  /* Readable serif body face for the storytelling feel; headings/titles switch to the
     fantasy display face (Cinzel) via the selectors below — see "Typography" in PROJECT.md. */
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
}

.story-select-title,
.story-chapter-title,
.story-complete-title,
.story-companion-name,
.story-complete-ending-badge,
.story-complete-summary-heading {
  font-family: 'Cinzel', 'Fredoka', serif;
  letter-spacing: 0.02em;
}

.story-question-text {
  font-family: 'Cinzel', 'Lora', serif;
  letter-spacing: 0.01em;
}

/* Static cave/campfire background layer — pure CSS + SVG, fixed inset, never swapped
   between nodes/adventures and never intercepts clicks/taps. */
.story-cave-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--cave-rock-dark);
}

.story-cave-vault {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, var(--cave-rock-mid) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, var(--cave-glow) 0%, transparent 60%);
}

.story-cave-wall {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  background: linear-gradient(180deg, var(--cave-rock-mid) 0%, var(--cave-rock-dark) 100%);
  opacity: 0.9;
}

.story-cave-wall-left {
  left: 0;
  clip-path: polygon(0 0, 70% 0, 100% 18%, 65% 40%, 100% 62%, 55% 100%, 0 100%);
}

.story-cave-wall-right {
  right: 0;
  clip-path: polygon(100% 0, 30% 0, 0 22%, 40% 46%, 5% 68%, 45% 100%, 100% 100%);
}

/* Hanging roots/vines — thin tapered shapes drifting gently, respects reduced-motion below */
.story-cave-vines {
  position: absolute;
  top: -4%;
  left: 0;
  right: 0;
  height: 30%;
  background-image:
    linear-gradient(180deg, var(--cave-rock-light) 0%, transparent 85%),
    linear-gradient(180deg, var(--cave-rock-light) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-size: 3px 60%, 2px 40%;
  background-position: 18% 0, 78% 0;
  opacity: 0.5;
  animation: caveVineSway 7s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes caveVineSway {
  0%, 100% { transform: rotate(-1.2deg); }
  50% { transform: rotate(1.2deg); }
}

/* Floating dust motes — a repeating dot pattern drifting slowly upward/sideways */
.story-cave-dust {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(243, 228, 201, 0.35), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(243, 228, 201, 0.25), transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(243, 228, 201, 0.3), transparent),
    radial-gradient(1px 1px at 35% 80%, rgba(243, 228, 201, 0.2), transparent),
    radial-gradient(1.5px 1.5px at 50% 45%, rgba(243, 228, 201, 0.28), transparent);
  background-size: 100% 100%;
  animation: caveDustDrift 18s linear infinite;
  opacity: 0.8;
}

@keyframes caveDustDrift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 30px -60px, -20px -40px, 15px -70px, -25px -50px, 10px -55px; }
}

/* Slow drifting smoke — soft translucent blobs rising from the campfire area */
.story-cave-smoke {
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: 260px;
  height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(200, 190, 180, 0.14) 0%, transparent 70%);
  filter: blur(6px);
  animation: caveSmokeRise 9s ease-in infinite;
}

@keyframes caveSmokeRise {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
  20% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(-60%, -220px) scale(1.4); }
}

/* Campfire — centered low on screen, casts the warm glow the rest of the scene is lit by */
.story-campfire {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 200px;
  height: 140px;
  transform: translateX(-50%);
}

.story-campfire-glow {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 340px;
  height: 340px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--cave-glow) 0%, transparent 65%);
  animation: caveFireGlowPulse 2.4s ease-in-out infinite;
}

@keyframes caveFireGlowPulse {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

.story-campfire-logs {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 90px;
  height: 18px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #2b1a0e, #4a2f18, #2b1a0e);
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}

.story-flame {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 26px;
  height: 46px;
  transform: translateX(-50%);
  background: linear-gradient(0deg, var(--cave-fire-outer) 0%, var(--cave-fire-mid) 55%, var(--cave-fire-core) 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: blur(0.3px);
  transform-origin: bottom center;
  animation: caveFlameFlicker 1.1s ease-in-out infinite;
}

.story-flame-1 { width: 34px; height: 58px; bottom: 16px; opacity: 0.95; animation-duration: 1.3s; }
.story-flame-2 { width: 22px; height: 42px; left: 42%; animation-duration: 0.9s; animation-delay: 0.15s; }
.story-flame-3 { width: 20px; height: 38px; left: 58%; animation-duration: 1s; animation-delay: 0.3s; }

@keyframes caveFlameFlicker {
  0%, 100% { transform: translateX(-50%) scaleY(1) skewX(0deg); }
  25% { transform: translateX(-50%) scaleY(1.08) skewX(-2deg); }
  50% { transform: translateX(-50%) scaleY(0.92) skewX(1deg); }
  75% { transform: translateX(-50%) scaleY(1.05) skewX(-1deg); }
}

.story-embers {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 1px;
  height: 1px;
}

.story-embers span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cave-fire-core);
  box-shadow: 0 0 4px var(--cave-fire-mid);
  animation: caveEmberRise 3.2s ease-in infinite;
}

.story-embers span:nth-child(1) { left: -30px; animation-delay: 0s; }
.story-embers span:nth-child(2) { left: -10px; animation-delay: 0.5s; }
.story-embers span:nth-child(3) { left: 5px; animation-delay: 1s; }
.story-embers span:nth-child(4) { left: 20px; animation-delay: 1.5s; }
.story-embers span:nth-child(5) { left: -20px; animation-delay: 2s; }
.story-embers span:nth-child(6) { left: 15px; animation-delay: 2.5s; }

@keyframes caveEmberRise {
  0% { opacity: 0; transform: translateY(0) translateX(0) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-160px) translateX(12px) scale(0.4); }
}

/* Cave darkening overlay — a plain solid tint (not a gradient) so its opacity transitions
   smoothly and reliably across browsers when the fire goes out (see below). */
.story-cave-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #05030a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.2s ease 0.5s;
}

/* ─── Campfire Light/Dark reactivity ───────────────────────────────────────────────
   Story Mode's parchment/layout/typography never change with the app's Light/Dark
   toggle — only the campfire does: lit in Light mode (default rules above), smoothly
   extinguished in Dark mode. Purely CSS-driven off the app's existing [data-theme]
   attribute on <html> (see app.js's theme toggle) — no JS hook needed. Each element
   gets its own transition-duration/-delay so the extinguish reads as a staged sequence
   (flames shrink first, then embers, then the glow, then the cave itself dims) rather
   than everything snapping at once; relighting (switching back to Light) reverses the
   same transitions. */
.story-flame {
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.story-campfire-glow {
  transition: opacity 1.6s ease 0.3s, transform 1.6s ease 0.3s;
}
.story-embers {
  transition: opacity 1s ease 0.2s;
}

[data-theme="dark"] .story-flame {
  animation: none;
  opacity: 0;
  transform: translateX(-50%) scaleY(0.1);
}
[data-theme="dark"] .story-flame-2,
[data-theme="dark"] .story-flame-3 {
  transform: translateX(-50%) scaleY(0.1);
}
[data-theme="dark"] .story-campfire-glow {
  animation: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.55);
}
[data-theme="dark"] .story-embers {
  opacity: 0;
}
[data-theme="dark"] .story-embers span {
  animation-play-state: paused;
}
[data-theme="dark"] .story-cave-bg::after {
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .story-cave-vines,
  .story-cave-dust,
  .story-cave-smoke,
  .story-campfire-glow,
  .story-flame,
  .story-embers span {
    animation: none !important;
  }
  .story-flame,
  .story-campfire-glow,
  .story-embers,
  .story-cave-bg::after {
    transition: none !important;
  }
}

/* Story Loading Screen */
.story-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  position: relative;
  z-index: 1;
}

.story-loading-spinner {
  margin-bottom: 24px;
}

.story-spinner-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: var(--game-orange-top, #FFAA22);
  border-right-color: var(--game-purple-top, #E252FF);
  animation: qpSpin 1s linear infinite;
  margin: 0 auto;
  position: relative;
}

.story-spinner-ring::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-bottom-color: var(--game-blue-top, #3CC3FF);
  border-left-color: var(--game-green-top, #A2E022);
  animation: qpSpin 1.5s linear infinite reverse;
}

.story-loading-text {
  color: var(--cave-text);
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.story-loading-subtitle {
  color: var(--cave-text-secondary);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.story-loading-bar {
  width: 280px;
  height: 4px;
  background: rgba(255, 154, 60, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.story-loading-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cave-fire-outer), var(--cave-fire-core));
  border-radius: 2px;
  animation: storyLoadBar 2s ease-in-out infinite;
  width: 30%;
}

@keyframes storyLoadBar {
  0% {
    width: 0%;
    margin-left: 0;
  }

  50% {
    width: 70%;
    margin-left: 30%;
  }

  100% {
    width: 0%;
    margin-left: 100%;
  }
}

/* Character Selection Screen — shown once per fresh adventure, before the intro/first
   decision. Instant to render since the two companions are fixed/hardcoded, not fetched. */
.story-character-select {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  text-align: center;
  padding: 20px;
  animation: storyFadeIn 0.5s ease;
}

.story-select-title {
  font-size: 1.7rem;
  color: var(--cave-text);
  margin: 0 0 8px;
}

.story-select-subtitle {
  color: var(--cave-text-secondary);
  font-size: 1rem;
  margin: 0 0 28px;
  max-width: 480px;
}

/* Always exactly two cards side by side, even on mobile — never stacked. Sizing scales
   down at narrow widths instead of collapsing to one column. */
.story-companion-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  max-width: 640px;
}

@media (max-width: 480px) {
  .story-companion-cards {
    gap: 10px;
  }
}

.story-companion-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 16px 20px;
  background: linear-gradient(160deg, var(--cave-rock-light) 0%, var(--cave-rock-mid) 100%);
  border: 1.5px solid rgba(255, 154, 60, 0.25);
  border-radius: 18px;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

@media (max-width: 480px) {
  .story-companion-card {
    padding: 14px 8px 12px;
    gap: 6px;
  }
}

.story-companion-card:hover,
.story-companion-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--cave-accent);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 0 22px var(--cave-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.story-companion-card:active {
  transform: translateY(-1px) scale(0.98);
}

.story-companion-icon-wrap {
  width: 84px;
  height: 118px;
  display: block;
}

@media (max-width: 480px) {
  .story-companion-icon-wrap {
    width: 56px;
    height: 78px;
  }
}

.story-companion-icon {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.story-companion-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cave-text);
}

@media (max-width: 480px) {
  .story-companion-name {
    font-size: 0.88rem;
  }
}

/* Hooded Wanderer SVG parts */
.wanderer-cloak { fill: #2e2a3a; }
.wanderer-hood-shade { fill: #1a1622; }
.wanderer-eye { fill: var(--cave-fire-core); filter: drop-shadow(0 0 3px var(--cave-fire-mid)); }
.wanderer-staff { stroke: #6b5a3a; stroke-width: 4; stroke-linecap: round; }
.wanderer-staff-orb { fill: var(--cave-accent); filter: drop-shadow(0 0 4px var(--cave-fire-mid)); }

/* Ancient Guardian SVG parts */
.guardian-body, .guardian-head, .guardian-shoulder { fill: #5a5650; stroke: #34312c; stroke-width: 1.5; }
.guardian-crack { fill: none; stroke: #34312c; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.guardian-eye { fill: var(--cave-fire-core); filter: drop-shadow(0 0 3px var(--cave-fire-mid)); }

/* Story Content Area */
.story-content {
  animation: storyFadeIn 0.5s ease;
  position: relative;
  z-index: 1;
}

@keyframes storyFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The Parchment — a real hand-torn ancient scroll, not a rounded card. Wraps the
   narration/question/answers and is reused by the ending screen. The irregular edge is a
   percentage-based clip-path polygon (scales correctly at any size — mobile through
   desktop — since every point is relative to the element's own box), layered with crack/
   fold/stain/burn-mark textures purely via stacked background-image gradients (cheap,
   static, no images/canvas). Identical in Light and Dark app-theme — see the campfire
   reactivity above for the only theme-aware part of Story Mode (the firelight reflection
   below). */
.story-parchment {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 30px 32px 28px;
  clip-path: polygon(
    0% 2%, 4% 0%, 12% 1%, 20% 0%, 30% 1%, 40% 0%, 50% 1%, 60% 0%, 70% 1%, 80% 0%, 90% 1%, 96% 0%, 100% 3%,
    99% 15%, 100% 28%, 99% 42%, 100% 56%, 99% 70%, 100% 84%, 99% 96%,
    92% 100%, 82% 99%, 72% 100%, 62% 99%, 52% 100%, 42% 99%, 32% 100%, 22% 99%, 12% 100%, 4% 98%,
    0% 90%, 1% 76%, 0% 62%, 1% 48%, 0% 34%, 1% 20%, 0% 10%
  );
  background:
    /* fine paper speckles */
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(58,38,18,0.14), transparent),
    radial-gradient(1px 1px at 68% 58%, rgba(58,38,18,0.12), transparent),
    radial-gradient(1.2px 1.2px at 40% 80%, rgba(58,38,18,0.12), transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(58,38,18,0.12), transparent),
    radial-gradient(1px 1px at 25% 45%, rgba(58,38,18,0.1), transparent),
    radial-gradient(1.2px 1.2px at 92% 70%, rgba(58,38,18,0.1), transparent),
    /* hairline cracks */
    linear-gradient(101deg, transparent 31.6%, rgba(60,40,20,0.16) 32%, transparent 32.4%),
    linear-gradient(74deg, transparent 68.6%, rgba(60,40,20,0.13) 69%, transparent 69.4%),
    /* a single fold crease running across the scroll, catching light on one side */
    linear-gradient(90deg, transparent 57%, rgba(255,255,255,0.22) 59.5%, rgba(80,50,20,0.12) 60.5%, transparent 63%),
    /* aged water/tea stains */
    radial-gradient(ellipse 26% 16% at 18% 78%, rgba(150,110,50,0.16) 0%, transparent 75%),
    radial-gradient(ellipse 20% 14% at 82% 24%, rgba(150,110,50,0.13) 0%, transparent 75%),
    /* burn-mark smudges near two corners */
    radial-gradient(ellipse 14% 10% at 4% 4%, rgba(40,24,10,0.35) 0%, transparent 80%),
    radial-gradient(ellipse 16% 11% at 97% 95%, rgba(40,24,10,0.3) 0%, transparent 80%),
    /* soft inner vignette so the edges read darker/aged vs. the lighter center */
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(80, 50, 20, 0.22) 100%),
    linear-gradient(165deg, var(--parchment-bg) 0%, var(--parchment-bg-alt) 100%);
  color: var(--parchment-text);
  text-shadow: var(--story-white-text-shadow);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.45),
    0 0 40px var(--cave-glow),
    inset 0 0 16px rgba(80, 50, 20, 0.3),
    inset 0 2px 10px rgba(110, 74, 40, 0.25);
}

/* Torn-edge outline — a darker, slightly larger copy of the same jagged shape sitting just
   behind the parchment (negative z-index peeking out from a `position:relative` ancestor),
   faking an inked/burnt edge that a plain `border` can't follow around a clip-path. */
.story-parchment::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  clip-path: polygon(
    0% 2%, 4% 0%, 12% 1%, 20% 0%, 30% 1%, 40% 0%, 50% 1%, 60% 0%, 70% 1%, 80% 0%, 90% 1%, 96% 0%, 100% 3%,
    99% 15%, 100% 28%, 99% 42%, 100% 56%, 99% 70%, 100% 84%, 99% 96%,
    92% 100%, 82% 99%, 72% 100%, 62% 99%, 52% 100%, 42% 99%, 32% 100%, 22% 99%, 12% 100%, 4% 98%,
    0% 90%, 1% 76%, 0% 62%, 1% 48%, 0% 34%, 1% 20%, 0% 10%
  );
  background: var(--parchment-edge);
  filter: blur(0.4px);
}

/* Firelight reflection — a warm glow cast onto the parchment from the campfire below,
   present in Light mode, fades out with the fire in Dark mode (see the campfire
   reactivity rules above `.story-loading`). */
.story-parchment::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 55% at 50% 130%, var(--cave-glow) 0%, transparent 70%);
  opacity: 0.8;
  animation: parchmentFirelightPulse 2.4s ease-in-out infinite;
  transition: opacity 1.8s ease 0.4s;
}

@keyframes parchmentFirelightPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.9; }
}

[data-theme="dark"] .story-parchment::after {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .story-parchment::after { animation: none; transition: none; }
}

/* Story Header */
.story-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 12px;
  margin-bottom: 16px;
  border-bottom: 1.5px solid var(--parchment-edge);
  position: relative;
  z-index: 1;
}

.story-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.story-header-info {
  display: flex;
  flex-direction: column;
}

.story-chapter-title {
  font-size: 1.2rem;
  color: var(--parchment-text);
  text-shadow: var(--story-white-text-shadow);
  margin: 0;
  line-height: 1.3;
  font-weight: 700;
}

.story-progress {
  font-size: 0.8rem;
  color: var(--parchment-text-secondary);
  text-shadow: var(--story-white-text-shadow);
}

.story-header .btn-icon {
  color: var(--parchment-text);
  text-shadow: var(--story-white-text-shadow);
  background: rgba(58, 38, 18, 0.5);
}

.story-anim-fade {
  animation: storySceneFade 0.8s ease;
}

@keyframes storySceneFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Narration Area — a dark carved-plaque surface (same treatment as .story-question-text)
   rather than a light overlay, so the always-white narration text has real contrast
   instead of relying on the text-shadow alone. */
.story-narration-wrapper {
  background: rgba(58, 38, 18, 0.7);
  border: 1.5px solid rgba(255, 154, 60, 0.3);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
  min-height: 120px;
  position: relative;
  z-index: 1;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.story-narration {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--parchment-text);
  text-shadow: var(--story-white-text-shadow);
  max-height: 300px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.story-narration::-webkit-scrollbar {
  width: 4px;
}

.story-narration::-webkit-scrollbar-track {
  background: transparent;
}

.story-narration::-webkit-scrollbar-thumb {
  background: rgba(110, 74, 40, 0.3);
  border-radius: 2px;
}

.typing-cursor {
  animation: cursorBlink 1s step-end infinite;
  color: var(--cave-accent);
  font-weight: bold;
}

@keyframes cursorBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Typing Indicator */
.story-typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 0;
  position: absolute;
  bottom: 12px;
  left: 24px;
}

.typing-dot {
  width: 8px;
  height: 8px;
  background: var(--cave-accent);
  border-radius: 50%;
  animation: typingDot 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingDot {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

/* Question Area — engraved into the parchment, same recessed treatment as the narration box
   so both panels read as one consistent carved surface. */
/* Question text is always white — a carved-plaque look (dark wood/stone with pale
   lettering) rather than dark-on-parchment, so it stays equally readable and consistent
   regardless of the app's Light/Dark mode (which never otherwise changes Story Mode). */
.story-question-text {
  font-size: 1.15rem;
  color: var(--story-white-text);
  text-shadow: var(--story-white-text-shadow);
  font-weight: 700;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(58, 38, 18, 0.82);
  border: 1.5px solid rgba(255, 154, 60, 0.35);
  border-radius: 12px;
  text-align: center;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  animation: storySceneFade 0.45s ease;
}

.story-answers-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .story-answers-container {
    grid-template-columns: 1fr;
  }
}

/* Mobile/tablet: tighter padding so the torn parchment edges don't eat too much of the
   narrow viewport, and text sizes down slightly — the clip-path itself needs no adjustment
   since every point is percentage-based and scales with the box automatically. */
@media (max-width: 640px) {
  .story-parchment {
    padding: 22px 18px 20px;
  }
  .story-narration {
    font-size: 1.02rem;
  }
  .story-answer {
    padding: 16px 14px;
    font-size: 0.95rem;
  }
}

/* Each answer reads as its own smaller torn strip stitched onto the main scroll — never
   more than two per scene, never a modern button. A jagged clip-path (not border-radius)
   gives the hand-torn edge, a second layer behind it (::before) fakes an inked outline the
   same way the main parchment's does. Dark wood/charred-parchment tone (not light paper) so
   the always-white text (see .story-question-text) stays readable regardless of app theme.
   Slight opposite tilt per strip; hover lifts and glows warm with the campfire light, press
   settles back down. */
.story-answer {
  position: relative;
  font-family: inherit;
  clip-path: polygon(
    0% 6%, 6% 0%, 22% 3%, 38% 0%, 54% 3%, 70% 0%, 86% 3%, 100% 8%,
    97% 25%, 100% 45%, 96% 65%, 100% 85%, 94% 100%,
    76% 97%, 58% 100%, 40% 97%, 22% 100%, 6% 96%,
    0% 80%, 4% 60%, 0% 40%, 3% 20%
  );
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,220,180,0.1), transparent),
    radial-gradient(1px 1px at 75% 65%, rgba(255,220,180,0.08), transparent),
    radial-gradient(1px 1px at 45% 80%, rgba(255,220,180,0.07), transparent),
    linear-gradient(160deg, var(--cave-rock-light) 0%, var(--cave-rock-mid) 100%);
  color: var(--story-white-text);
  text-shadow: var(--story-white-text-shadow);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 5px 0px rgba(20, 12, 6, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: rotate(-0.6deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Answers slide in from the left one after another (see showQuestionForNode's inline
     animation-delay). `backwards` keeps each card hidden through its delay, then releases
     the properties after the animation so .answer's hover/press transforms and the
     correct/incorrect pulse animations still work. */
  animation: storyAnswerIn 0.45s ease backwards;
}

/* Inked/torn outline peeking out from behind the strip — same trick as .story-parchment. */
.story-answer::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  clip-path: inherit;
  background: var(--parchment-edge);
  transition: background 0.2s ease;
}

.story-answer:nth-child(2) {
  transform: rotate(0.6deg);
}

.story-answer:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 8px 0px rgba(20, 12, 6, 0.5), 0 14px 26px rgba(0, 0, 0, 0.35), 0 0 18px var(--cave-glow);
}

.story-answer:hover::before {
  background: var(--cave-accent);
}

/* The base .answer.correct/.incorrect rules (2-class specificity) already win the
   background-gradient swap over .story-answer's own background; since the "border" here is
   really the ::before outline layer (not a real CSS border, see the clip-path above), it
   needs its own explicit correct/incorrect color so the colored-edge feedback still reads. */
.story-answer.correct::before { background: var(--game-green-border); }
.story-answer.incorrect::before { background: var(--game-red-border); }

.story-answer:active {
  transform: rotate(0deg) translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 3px 0px rgba(20, 12, 6, 0.5), 0 5px 10px rgba(0, 0, 0, 0.25);
}

.story-answer.disabled {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
}

.story-answer.correct,
.story-answer.incorrect {
  opacity: 1;
}

@keyframes storyAnswerIn {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .story-answer { animation: none; }
}

/* Feedback Area — carded so the green/red consequence text stays readable on the parchment */
.story-feedback {
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  text-align: center;
  background: rgba(58, 38, 18, 0.7);
  border: 1.5px solid rgba(255, 154, 60, 0.3);
  animation: storyFadeIn 0.3s ease;
}

.story-feedback-correct {
  color: #4ade80;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  font-size: 1.05rem;
  font-weight: 600;
}

.story-feedback-incorrect {
  color: #f87171;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  font-size: 1.05rem;
  font-weight: 600;
}

/* Story Complete Screen */
.story-complete {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  position: relative;
  z-index: 1;
  padding: 20px;
}

.story-complete-content {
  text-align: center;
  animation: storyFadeIn 0.6s ease;
  max-width: 640px;
}

.story-complete-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  animation: storyBounceIn 0.8s ease;
}

@keyframes storyBounceIn {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.story-complete-ending-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  margin-bottom: 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--story-white-text);
  text-shadow: var(--story-white-text-shadow);
  background: rgba(58, 38, 18, 0.65);
  border: 1.5px solid var(--parchment-edge);
}

/* Ending type still reads via the border/background accent — the text itself stays the
   same white as everything else in Story Mode, never a dark tint. */
.story-complete.story-ending-legendary .story-complete-ending-badge { border-color: #d4a017; background: rgba(120, 90, 10, 0.55); }
.story-complete.story-ending-normal .story-complete-ending-badge { border-color: #4f8fd4; background: rgba(20, 55, 90, 0.55); }
.story-complete.story-ending-negative .story-complete-ending-badge { border-color: #d46a6a; background: rgba(90, 25, 25, 0.55); }
.story-complete.story-ending-secret .story-complete-ending-badge { border-color: #a479d4; background: rgba(60, 30, 90, 0.55); }

.story-complete-title {
  font-size: 1.8rem;
  color: var(--story-white-text);
  text-shadow: var(--story-white-text-shadow);
  margin-bottom: 12px;
  font-weight: 700;
}

.story-complete-message {
  color: var(--story-white-text);
  text-shadow: var(--story-white-text-shadow);
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.story-complete-companion-outcome {
  color: var(--story-white-text);
  text-shadow: var(--story-white-text-shadow);
  font-size: 0.95rem;
  font-style: italic;
  margin-bottom: 8px;
}

.story-complete-companion-outcome:empty {
  display: none;
}

.story-complete-replay-hint {
  color: var(--story-white-text);
  text-shadow: var(--story-white-text-shadow);
  opacity: 0.85;
  margin-bottom: 20px;
  font-size: 0.9rem;
  font-style: italic;
}

.story-complete-summary-heading {
  font-size: 1rem;
  color: var(--story-white-text);
  text-shadow: var(--story-white-text-shadow);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.story-complete-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
}

.story-complete-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--cave-fire-core);
  text-shadow: var(--story-white-text-shadow);
  display: block;
}

.story-complete-stat-label {
  font-size: 0.85rem;
  color: var(--story-white-text);
  text-shadow: var(--story-white-text-shadow);
  opacity: 0.85;
}

.story-complete-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.story-complete-actions .btn {
  width: 100%;
  max-width: 280px;
}

/* "Replay Adventure" keeps its universal success-green (.btn-success); only the neutral
   New Adventure / Home buttons pick up the cave's warm button colors. */
.story-complete-actions .btn:not(.btn-success) {
  background: var(--cave-rock-light);
  color: var(--cave-text);
  border-color: var(--parchment-edge);
}

/* Staged ending reveal — icon keeps its own bounce-in; everything below it fades/slides in
   with an increasing delay so the ending feels revealed rather than dumped on screen at once. */
@keyframes storyEndingItemIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.story-complete-content.story-ending-reveal > *:not(.story-complete-icon) {
  opacity: 0;
  animation: storyEndingItemIn 0.45s ease forwards;
}

.story-complete-content.story-ending-reveal > .story-complete-ending-badge { animation-delay: 0.25s; }
.story-complete-content.story-ending-reveal > .story-complete-title { animation-delay: 0.4s; }
.story-complete-content.story-ending-reveal > .story-complete-message { animation-delay: 0.55s; }
.story-complete-content.story-ending-reveal > .story-complete-companion-outcome { animation-delay: 0.65s; }
.story-complete-content.story-ending-reveal > .story-complete-replay-hint { animation-delay: 0.75s; }
.story-complete-content.story-ending-reveal > .story-complete-summary-heading { animation-delay: 0.85s; }
.story-complete-content.story-ending-reveal > .story-complete-stats { animation-delay: 0.92s; }
.story-complete-content.story-ending-reveal > .story-complete-actions { animation-delay: 1s; }

@media (prefers-reduced-motion: reduce) {
  .story-complete-icon,
  .story-complete-content.story-ending-reveal > *:not(.story-complete-icon) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Ending-type accent on the story complete screen — the title itself always stays the
   shared white (see .story-complete-title) so ending-type color only shows on the icon
   glow and the badge chip, never a full text-color swap. */
.story-complete.story-ending-legendary .story-complete-icon { filter: drop-shadow(0 0 12px rgba(168, 121, 10, 0.6)); }
.story-complete.story-ending-secret .story-complete-icon { filter: drop-shadow(0 0 12px rgba(106, 74, 150, 0.6)); }


/* ═══════════════════════════════════════════════════════════════
   MODE SELECTION MODAL (Quick Play → Normal / Story)
   ═══════════════════════════════════════════════════════════════ */
.mode-selection-modal {
  padding: 8px 0;
}

.mode-cards-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  margin-top: 10px;
}

.mode-selection-modal .home-card-btn {
  aspect-ratio: auto;
  height: 115px;
  padding: 14px 10px;
}

.mode-selection-modal .card-icon-badge {
  width: 38px;
  height: 38px;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.mode-selection-modal .home-card-btn .card-title {
  font-size: 1.05rem;
  margin-bottom: 2px;
}

.mode-selection-modal .home-card-btn .card-subtitle {
  font-size: 0.7rem;
}

@media (max-width: 480px) {
  .mode-cards-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* User Level UI Enhancements */
.user-bar-level {
  background: linear-gradient(135deg, #FF9F43 0%, #FF6B6B 100%);
  border: 2px solid #FF6B6B;
  color: white;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 20px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  font-family: 'Fredoka', sans-serif;
  display: inline-block;
}

.player-level-badge {
  background: linear-gradient(135deg, var(--primary, #6C4DF6) 0%, var(--secondary, #4A00E0) 100%);
  color: white;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 12px;
  margin-left: 8px;
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
}

.player-name-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-bar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-bar-xp-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-bar-xp-bar {
  width: 80px;
  height: 6px;
  background: var(--input-bg, rgba(0, 0, 0, 0.1));
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--container-inner-border, rgba(0, 0, 0, 0.15));
}

.user-bar-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD700 0%, #FFA500 50%, #FF6B6B 100%);
  transition: width 0.3s ease;
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(255, 165, 0, 0.5);
}

.user-bar-xp-text {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ==========================================
   REWARD CHEST & UTILITY ITEM SYSTEM STYLES
   ========================================== */

/* Chest Rarity Color Classes & Shimmer */
.chest-common {
  background: linear-gradient(135deg, #a1a1a1 0%, #7d7d7d 100%) !important;
  border-color: #4b4b4b !important;
  color: #fff !important;
}

.chest-rare {
  background: linear-gradient(135deg, #52a3ff 0%, #0066d4 100%) !important;
  border-color: #003778 !important;
  color: #fff !important;
}

.chest-epic {
  background: linear-gradient(135deg, #c552ff 0%, #7b00d4 100%) !important;
  border-color: #420078 !important;
  color: #fff !important;
}

.chest-legendary {
  background: linear-gradient(135deg, #ffb624 0%, #d45f00 100%) !important;
  border-color: #783600 !important;
  color: #fff !important;
  animation: goldShimmer 2s infinite ease-in-out;
}

@keyframes goldShimmer {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(255, 182, 36, 0.3);
  }

  50% {
    box-shadow: 0 0 25px rgba(255, 182, 36, 0.7), inset 0 0 10px rgba(255, 255, 255, 0.4);
  }
}

/* Daily Streak Calendar View */
.streak-days-container {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--container-inner-border) transparent;
}

.streak-days-container::-webkit-scrollbar {
  height: 4px;
}

.streak-days-container::-webkit-scrollbar-track {
  background: transparent;
}

.streak-days-container::-webkit-scrollbar-thumb {
  background: var(--container-inner-border);
  border-radius: 4px;
}

.streak-day-card {
  flex: 0 0 auto;
  min-width: 68px;
  background: var(--stat-card-bg);
  border: 3px solid var(--container-inner-border);
  border-radius: 14px;
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0px 3px 0px var(--container-inner-border);
}

.streak-day-card.completed {
  border-color: var(--game-green-base) !important;
  background: rgba(114, 184, 14, 0.15);
}

.streak-day-card.active-day {
  border-color: var(--game-blue-base) !important;
  box-shadow: 0 0 10px rgba(0, 139, 227, 0.4);
  transform: scale(1.05);
}

.streak-day-card .day-num {
  font-weight: 700;
  color: var(--text-primary);
}

.streak-day-card .day-reward-icon {
  font-size: 1.4rem;
  transition: transform 0.2s ease;
}

.streak-day-card.active-day .day-reward-icon {
  animation: chestBounce 1s infinite alternate;
}

@keyframes chestBounce {
  to {
    transform: translateY(-4px);
  }
}

.streak-day-card .day-status {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.streak-day-card .day-status.status-claimed {
  color: var(--game-green-base);
}

.streak-day-card .day-status.status-lock {
  color: var(--text-secondary);
}

/* Daily Challenges List */
.challenges-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.challenge-item {
  background: var(--stat-card-bg);
  border: 3px solid var(--container-inner-border);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 0px 3px 0px var(--container-inner-border);
  transition: all 0.2s ease;
}

.challenge-item:hover {
  transform: translateY(-2px);
  box-shadow: 0px 5px 0px var(--container-inner-border), 0px 8px 24px rgba(0, 0, 0, 0.1);
}

.challenge-details {
  flex: 1;
  text-align: left;
}

.challenge-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-dark);
}

[data-theme="dark"] .challenge-title {
  color: var(--text-primary);
}

.challenge-reward-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--container-outer-bg);
  color: var(--text-primary);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--container-outer-border);
}

.challenge-progress-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}

.challenge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.challenge-action-btn {
  padding: 8px 14px !important;
  font-size: 13px !important;
  min-height: auto !important;
  margin: 0 !important;
}

/* Gameplay Lifelines UI */
.lifelines-container {
  margin-top: 20px;
  padding: 0;
}

.lifelines-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.lifeline-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 76px;
  min-height: 76px;
  padding: 10px 6px 8px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  color: white;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  border: 3px solid transparent;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.lifeline-btn-icon {
  font-size: 24px;
  line-height: 1;
}

.lifeline-btn-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* 50/50 — amber */
.lifeline-ff {
  background: linear-gradient(180deg, #ffb347 0%, #e07b00 100%);
  border-color: #9a5200;
  box-shadow: 0 4px 0 #9a5200;
}

.lifeline-ff:hover:not(:disabled) {
  box-shadow: 0 6px 0 #9a5200;
}

.lifeline-ff:active:not(:disabled) {
  box-shadow: 0 2px 0 #9a5200;
}

/* Skip — purple */
.lifeline-skip-btn {
  background: linear-gradient(180deg, #c97ef5 0%, #8a2be2 100%);
  border-color: #5b1a9e;
  box-shadow: 0 4px 0 #5b1a9e;
}

.lifeline-skip-btn:hover:not(:disabled) {
  box-shadow: 0 6px 0 #5b1a9e;
}

.lifeline-skip-btn:active:not(:disabled) {
  box-shadow: 0 2px 0 #5b1a9e;
}

/* XP Boost — blue (default) → green when active */
.lifeline-boost-btn {
  background: linear-gradient(180deg, #52a3ff 0%, #1a6fd4 100%);
  border-color: #003778;
  box-shadow: 0 4px 0 #003778;
}

.lifeline-boost-btn:hover:not(:disabled) {
  box-shadow: 0 6px 0 #003778;
}

.lifeline-boost-btn:active:not(:disabled) {
  box-shadow: 0 2px 0 #003778;
}

/* Extra Time — teal */
.lifeline-time {
  background: linear-gradient(180deg, #3dd6c8 0%, #0a9e8e 100%);
  border-color: #055e55;
  box-shadow: 0 4px 0 #055e55;
}

.lifeline-time:hover:not(:disabled) {
  box-shadow: 0 6px 0 #055e55;
}

.lifeline-time:active:not(:disabled) {
  box-shadow: 0 2px 0 #055e55;
}

/* Point Boost — hot pink/magenta (rare) */
.lifeline-point-boost {
  background: linear-gradient(180deg, #ff6ec7 0%, #c2006e 100%);
  border-color: #7d0046;
  box-shadow: 0 4px 0 #7d0046;
}

.lifeline-point-boost:hover:not(:disabled) {
  box-shadow: 0 6px 0 #7d0046;
}

.lifeline-point-boost:active:not(:disabled) {
  box-shadow: 0 2px 0 #7d0046;
}

.lifeline-point-boost.active-point-boost {
  background: linear-gradient(180deg, #ffe14d 0%, #e6a000 100%) !important;
  border-color: #8a5e00 !important;
  box-shadow: 0 4px 0 #8a5e00 !important;
  animation: pointBoostGlow 1s infinite alternate;
}

@keyframes pointBoostGlow {
  to {
    box-shadow: 0 4px 20px rgba(255, 180, 0, 0.75), 0 4px 0 #8a5e00;
  }
}

.lifeline-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.lifeline-btn:active:not(:disabled) {
  transform: translateY(2px);
}

.lifeline-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
  transform: none !important;
  box-shadow: none !important;
}

.lifeline-btn.active-boost {
  background: linear-gradient(180deg, #A2E022 0%, #72B80E 100%) !important;
  border-color: #3B6103 !important;
  box-shadow: 0 4px 0 #3B6103 !important;
  animation: boostGlow 1.5s infinite alternate;
}

@keyframes boostGlow {
  to {
    box-shadow: 0 4px 18px rgba(162, 224, 34, 0.65), 0 4px 0 #3B6103;
  }
}

.lifeline-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff3b3b;
  color: white;
  font-size: 11px;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  font-family: 'Fredoka', sans-serif;
}

.lifeline-status {
  position: absolute;
  top: -9px;
  right: -10px;
  background: #ff3b3b;
  color: white;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  border: 2px solid white;
  text-transform: uppercase;
  font-family: 'Fredoka', sans-serif;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.lifeline-btn.active-boost .lifeline-status {
  background: #2e7d32;
}

/* Profile Inventory Tab & History */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 10px;
}

.inventory-item-card {
  background: var(--stat-card-bg);
  border: 3px solid var(--container-inner-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0px 3px 0px var(--container-inner-border);
  transition: all 0.2s ease;
}

.inventory-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0px 5px 0px var(--container-inner-border), 0px 8px 24px rgba(0, 0, 0, 0.1);
}

.inventory-item-icon {
  font-size: 2.2rem;
  color: var(--primary);
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}

.inventory-item-details {
  flex: 1;
  text-align: left;
}

.inventory-item-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-dark);
}

[data-theme="dark"] .inventory-item-name {
  color: var(--text-primary);
}

.inventory-item-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.inventory-item-qty {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  background: var(--container-inner-border);
  min-width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.history-empty-message {
  text-align: center;
  padding: 20px;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.9rem;
}

.log-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.85rem;
}

.log-item:last-child {
  border-bottom: none;
}

.log-title {
  font-weight: 600;
  color: var(--text-dark);
}

[data-theme="dark"] .log-title {
  color: var(--text-primary);
}

.log-desc {
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin-top: 2px;
}

.log-time {
  font-size: 0.75rem;
  color: var(--text-secondary);
  align-self: center;
}

/* Fullscreen Chest Overlay Animations */
.chest-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  /* Must sit above .modal-container / .level-up-overlay (10000) since
     chests are opened from inside the rewards modal */
  z-index: 10500;
  backdrop-filter: blur(10px);
  animation: overlayFadeIn 0.3s ease;
  overflow-y: auto;
  padding: 20px;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.chest-container-animated {
  text-align: center;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: auto;
}

.chest-graphics {
  font-size: 8rem;
  margin-bottom: 20px;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s ease;
}

.chest-graphics.shaking {
  animation: chestShake 0.5s infinite linear;
}

@keyframes chestShake {
  0% {
    transform: translate(2px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
    transform: translate(0px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(2px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(2px, 2px) rotate(0deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

.chest-graphics.opening {
  animation: chestOpenBurst 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes chestOpenBurst {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.chest-pulse-text {
  font-size: 1.8rem;
  background: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Fredoka', sans-serif;
  animation: textPulse 1s infinite alternate;
}

@keyframes textPulse {
  to {
    opacity: 0.6;
  }
}

.chest-rewards-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  width: 100%;
}

.reward-card-revealed {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 12px;
  border-radius: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(20px);
  animation: rewardReveal 0.5s forwards ease-out;
}

@keyframes rewardReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sub-tabs in Inventory page */
.profile-tabs.sub-tabs {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}

.profile-sub-tab {
  background: transparent;
  border: none;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 8px;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  flex: 1;
}

.profile-sub-tab.active {
  background: var(--input-bg);
  color: var(--text-dark);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .profile-sub-tab.active {
  color: var(--text-primary);
}

.profile-sub-tab-content {
  display: none;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 14px;
  border: 1px solid var(--container-inner-border);
  max-height: 250px;
  overflow-y: auto;
  margin-top: 10px;
}

.profile-sub-tab-content.active {
  display: block;
}

.rewards-icon-btn {
  margin: 0 !important;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease !important;
}

.rewards-icon-btn:hover {
  transform: scale(1.1) rotate(8deg) !important;
}

/* Quiz Marketplace Styles */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.marketplace-card {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.marketplace-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.marketplace-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  width: 100%;
}

.marketplace-genre-badge {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'Fredoka', sans-serif;
}

[data-theme="dark"] .marketplace-genre-badge {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.marketplace-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-family: 'Fredoka', sans-serif;
  line-height: 1.3;
}

.marketplace-card-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 38px;
}

.marketplace-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
}

.marketplace-tag-badge {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}

.marketplace-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--container-inner-border);
  padding-top: 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  width: 100%;
}

.marketplace-creator {
  font-weight: 600;
  color: var(--text-primary);
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marketplace-stats {
  display: flex;
  gap: 12px;
}

.marketplace-stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.marketplace-stat-item.liked i {
  color: #ec4899;
  animation: heartPop 0.3s ease-out;
}

.marketplace-stat-item i {
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.marketplace-stat-item i:hover {
  transform: scale(1.25);
}

@keyframes heartPop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.4);
  }

  100% {
    transform: scale(1);
  }
}

.marketplace-card-footer-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  width: 100%;
}

.marketplace-card-footer-actions .btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.85rem;
  min-height: auto;
}

/* Visibility status badges */
.visibility-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

.visibility-badge.public {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.visibility-badge.private {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.visibility-badge.unlisted {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

/* Skeleton Loading Animation Pulse */
@keyframes pulse {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.6;
  }
}

/* === Skeleton Loading System === */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.07) 25%, rgba(0, 0, 0, 0.14) 50%, rgba(0, 0, 0, 0.07) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.13) 50%, rgba(255, 255, 255, 0.06) 75%);
  background-size: 200% 100%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.13) 50%, rgba(255, 255, 255, 0.06) 75%);
    background-size: 200% 100%;
  }
}

/* Quiz item skeleton */
.skeleton-quiz-item {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  padding: 14px 18px;
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.skeleton-quiz-item+.skeleton-quiz-item {
  margin-top: 10px;
}

.skeleton-quiz-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-quiz-title {
  height: 18px;
}

.skeleton-quiz-meta {
  height: 13px;
}

.skeleton-quiz-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.skeleton-quiz-btn {
  height: 36px;
  width: 72px;
  border-radius: 8px;
}

/* Notification item skeleton */
.skeleton-notif-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--container-inner-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-notif-item+.skeleton-notif-item {
  margin-top: 8px;
}

.skeleton-notif-title {
  height: 15px;
}

.skeleton-notif-message {
  height: 13px;
}

.skeleton-notif-time {
  height: 11px;
  width: 90px;
  align-self: flex-end;
}

/* Activity item skeleton */
.skeleton-activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.skeleton-activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-activity-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-activity-title {
  height: 14px;
}

.skeleton-activity-desc {
  height: 12px;
}

.skeleton-activity-time {
  height: 12px;
  width: 70px;
  flex-shrink: 0;
}

/* Referral item skeleton */
.skeleton-referral-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.05);
  border: 1.5px solid var(--container-inner-border);
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 8px;
  gap: 12px;
}

.skeleton-referral-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-referral-name {
  height: 14px;
}

.skeleton-referral-status {
  height: 12px;
}

.skeleton-referral-btn {
  height: 32px;
  width: 100px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Market card skeleton */
.skeleton-market-card {
  border-radius: 16px;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
}

.skeleton-market-card-title {
  height: 18px;
}

.skeleton-market-card-meta {
  height: 13px;
}

.skeleton-market-card-footer {
  margin-top: auto;
  display: flex;
  gap: 8px;
}

.skeleton-market-card-tag {
  height: 24px;
  border-radius: 12px;
}

.skeleton-section-title {
  height: 22px;
  margin-bottom: 12px;
}

/* Modal skeleton */
.skeleton-modal-content {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-modal-line {
  height: 16px;
  border-radius: 6px;
}

/* Achievement card skeleton */
.skeleton-achievement-card {
  background: var(--stat-card-bg);
  border: 3px solid var(--card-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 200px;
}

.skeleton-achievement-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-achievement-name {
  height: 16px;
  width: 70%;
}

.skeleton-achievement-desc {
  height: 12px;
  width: 85%;
}

.skeleton-achievement-desc2 {
  height: 12px;
  width: 60%;
}

.skeleton-achievement-xp {
  height: 13px;
  width: 45%;
}

.skeleton-achievement-status {
  height: 13px;
  width: 55%;
  margin-top: auto;
}

/* Shop item card skeleton */
.skeleton-shop-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 200px;
}

.skeleton-shop-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-shop-name {
  height: 16px;
  width: 65%;
}

.skeleton-shop-desc {
  height: 12px;
  width: 85%;
}

.skeleton-shop-price {
  height: 14px;
  width: 50%;
}

.skeleton-shop-btn {
  height: 38px;
  width: 100%;
  border-radius: 12px;
  margin-top: auto;
}

/* Shop VIP tab skeleton — single wide card */
.skeleton-shop-vip-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* === Notification & Activity Feed Styles === */

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--body-bg, #fff);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  animation: bounceIn 0.5s ease;
}

.notification-item {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--container-inner-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.notification-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary, #3B82F6);
}

.notification-item.unread {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.3);
}

.notification-item.unread::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  background-color: #3b82f6;
  border-radius: 50%;
  box-shadow: 0 0 8px #3b82f6;
}

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

.notification-item-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-item-time {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.notification-item-message {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Activity Feed */
.activity-feed-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 4px;
}

.activity-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid var(--container-inner-border, rgba(255, 255, 255, 0.06));
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s ease;
}

.activity-item:hover {
  transform: scale(1.01);
  background: rgba(255, 255, 255, 0.06);
}

.activity-icon-wrapper {
  font-size: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}

.activity-item.level-up .activity-icon-wrapper {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.activity-item.achievement .activity-icon-wrapper {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.activity-item.chest .activity-icon-wrapper {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
}

.activity-item.challenge .activity-icon-wrapper {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.activity-item.story .activity-icon-wrapper {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.activity-item.reward .activity-icon-wrapper {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
}

.activity-item.xp .activity-icon-wrapper {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.activity-item.success .activity-icon-wrapper {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.activity-item.warning .activity-icon-wrapper {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.activity-item.error .activity-icon-wrapper {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.activity-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.activity-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.activity-time {
  font-size: 0.75rem;
  color: var(--text-muted, rgba(255, 255, 255, 0.4));
  align-self: flex-start;
}

.activity-empty-message,
.notification-empty-message {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.9rem;
}

/* Seasonal Titles styles */
.profile-title-badge {
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 6px 0;
  padding: 6px 14px;
  border-radius: 12px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background-size: 200% auto;
}

.user-bar-title-badge {
  font-size: 0.7rem !important;
  padding: 2px 6px !important;
  margin: 0 0 0 6px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  vertical-align: middle;
  background: transparent !important;
}

.user-bar-title-badge.title-bronze {
  color: #a77044 !important;
  border-color: #a77044 !important;
}

.user-bar-title-badge.title-silver {
  color: #8a99ad !important;
  border-color: #8a99ad !important;
}

.user-bar-title-badge.title-gold {
  color: #d97706 !important;
  border-color: #d97706 !important;
}

.user-bar-title-badge.title-platinum {
  color: #0d9488 !important;
  border-color: #0d9488 !important;
}

.user-bar-title-badge.title-diamond {
  color: #2563eb !important;
  border-color: #2563eb !important;
}

.user-bar-title-badge.title-legendary {
  color: #7c3aed !important;
  border-color: #7c3aed !important;
}

.user-bar-title-badge.title-mythic {
  color: #db2777 !important;
  border-color: #db2777 !important;
}

.user-bar-title-badge.title-immortal {
  color: #ea580c !important;
  border-color: #ea580c !important;
}

.user-bar-title-badge.title-divine {
  color: #0891b2 !important;
  border-color: #0891b2 !important;
}

.user-bar-title-badge.title-apex {
  color: #d97706 !important;
  border-color: #d97706 !important;
  animation: none !important;
}

.title-bronze {
  background: linear-gradient(135deg, #a77044, #cd7f32, #a77044);
  color: #fff;
  border: 1.5px solid #8c5830;
}

.title-silver {
  background: linear-gradient(135deg, #94a3b8, #e2e8f0, #94a3b8);
  color: #1e293b;
  border: 1.5px solid #cbd5e1;
}

.title-gold {
  background: linear-gradient(135deg, #d97706, #fef08a, #d97706);
  color: #78350f;
  border: 1.5px solid #f59e0b;
}

.title-platinum {
  background: linear-gradient(135deg, #0d9488, #99f6e4, #0d9488);
  color: #fff;
  border: 1.5px solid #14b8a6;
}

.title-diamond {
  background: linear-gradient(135deg, #2563eb, #bfdbfe, #2563eb);
  color: #fff;
  border: 1.5px solid #3b82f6;
}

.title-legendary {
  background: linear-gradient(135deg, #7c3aed, #f3e8ff, #7c3aed);
  color: #fff;
  border: 1.5px solid #8b5cf6;
}

.title-mythic {
  background: linear-gradient(135deg, #db2777, #fbcfe8, #db2777);
  color: #fff;
  border: 1.5px solid #ec4899;
}

.title-immortal {
  background: linear-gradient(135deg, #ea580c, #ffedd5, #ea580c);
  color: #fff;
  border: 1.5px solid #f97316;
}

.title-divine {
  background: linear-gradient(135deg, #0891b2, #cffafe, #0891b2);
  color: #fff;
  border: 1.5px solid #06b6d4;
}

.title-apex {
  background: linear-gradient(90deg, #d97706, #9333ea, #2563eb, #d97706);
  color: #fff;
  border: 1.5px solid #a855f7;
  animation: rainbow-shine 4s infinite linear;
}

@keyframes rainbow-shine {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

/* Gaming Style Countdown Overlay */
.gaming-countdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 5, 25, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  font-family: 'Fredoka', sans-serif;
  color: white;
  overflow: hidden;
}

.gaming-countdown-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(255, 34, 119, 0.18) 45%, transparent 70%);
  animation: countdownGlow 2s infinite ease-in-out;
  pointer-events: none;
}

@keyframes countdownGlow {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
}

.gaming-countdown-info {
  margin-top: 28px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  padding: 10px 24px;
  max-width: 80vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.gaming-countdown-title {
  position: relative;
  z-index: 1;
  font-size: 1.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #a855f7;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 20px;
  animation: pulseTitle 1.5s infinite ease-in-out;
}

.gaming-countdown-num {
  position: relative;
  z-index: 1;
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 20px rgba(255, 170, 34, 0.6), 0 4px 15px rgba(0, 0, 0, 0.6);
  background: linear-gradient(185deg, #FFAA22 0%, #FF2277 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: zoomAndFade 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}

.gaming-countdown-num.go {
  font-size: 9rem;
  background: linear-gradient(185deg, #3CC3FF 0%, #00FF87 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(0, 255, 135, 0.6), 0 4px 15px rgba(0, 0, 0, 0.6);
}

@keyframes pulseTitle {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

@keyframes zoomAndFade {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  15% {
    transform: scale(1.1);
    opacity: 1;
  }

  30% {
    transform: scale(1.0);
    opacity: 1;
  }

  80% {
    transform: scale(1.2);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.avatar-level-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  line-height: 1;
  z-index: 10;
  font-family: 'Fredoka', sans-serif;
  text-shadow: none;
}

.seasonal-titles-card {
  margin-top: 14px;
  padding: 14px;
  background: var(--stat-card-bg);
  border: 3px solid var(--container-inner-border);
  border-radius: 16px;
  max-width: 320px;
  box-shadow: 0px 3px 0px var(--container-inner-border);
}

/* Floating Left Controls (Back & Go to Top) */
.floating-left-controls {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 140px;
  height: 126px;
  z-index: 1000;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.floating-left-controls.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.floating-btn-back {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 140px;
  height: 52px;
  border-radius: 26px;
  background: linear-gradient(180deg, var(--game-blue-top) 0%, var(--game-blue-base) 100%) !important;
  border: 3px solid var(--game-blue-border) !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0px 4px 0px var(--game-blue-border), 0px 6px 16px rgba(0, 0, 0, 0.25) !important;
  color: #fff !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-shadow: -1px -1px 0 var(--game-blue-border), 1px -1px 0 var(--game-blue-border), -1px 1px 0 var(--game-blue-border), 1px 1px 0 var(--game-blue-border) !important;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 !important;
  margin: 0 !important;
}

.floating-btn-back .btn-text {
  transition: opacity 0.25s ease, max-width 0.25s ease;
  opacity: 1;
  max-width: 100px;
  display: inline-block;
}

.floating-btn-back.shrunk {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  gap: 0;
}

.floating-btn-back.shrunk .btn-text {
  opacity: 0;
  max-width: 0;
  margin: 0;
  pointer-events: none;
}

.floating-btn-back.hidden-btn {
  opacity: 0 !important;
  transform: scale(0) translateY(20px) !important;
  pointer-events: none !important;
}

.floating-btn-back:hover {
  transform: scale(1.1) !important;
  box-shadow: 0px 4px 0px var(--game-blue-border), 0px 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.floating-btn-back:active {
  transform: translateY(2px) !important;
  box-shadow: 0px 2px 0px var(--game-blue-border), 0px 3px 8px rgba(0, 0, 0, 0.2) !important;
}

.floating-btn-top {
  position: absolute;
  bottom: 62px;
  left: 4px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--game-orange-top) 0%, var(--game-orange-base) 100%) !important;
  border: 3px solid var(--game-orange-border) !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0px 4px 0px var(--game-orange-border), 0px 6px 16px rgba(0, 0, 0, 0.25) !important;
  color: #fff !important;
  font-size: 16px !important;
  text-shadow: -1px -1px 0 var(--game-orange-border), 1px -1px 0 var(--game-orange-border), -1px 1px 0 var(--game-orange-border), 1px 1px 0 var(--game-orange-border) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.floating-btn-top.hidden {
  opacity: 0;
  transform: scale(0) translateY(10px);
  pointer-events: none;
}

.floating-btn-top.shifted-down {
  bottom: 0px !important;
  left: 0px !important;
  width: 52px !important;
  height: 52px !important;
}

.floating-btn-top:hover {
  transform: scale(1.1) !important;
  box-shadow: 0px 4px 0px var(--game-orange-border), 0px 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.floating-btn-top:active {
  transform: translateY(2px) !important;
  box-shadow: 0px 2px 0px var(--game-orange-border), 0px 3px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Launch Go To Top Animation */
@keyframes launchUp {
  0% {
    transform: translateY(0) scale(1);
  }

  30% {
    transform: translateY(10px) scale(0.9);
  }

  100% {
    transform: translateY(-500px) scale(1.2);
    opacity: 0;
  }
}

.floating-btn-top.launching {
  animation: launchUp 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards !important;
}

/* Media Query Breakpoints */
@media (max-width: 768px) {
  .floating-left-controls {
    bottom: 20px;
    left: 20px;
    width: 120px;
    height: 110px;
  }

  .floating-btn-back {
    width: 120px;
    height: 44px;
    border-radius: 22px;
    font-size: 16px;
  }

  .floating-btn-back.shrunk {
    width: 44px;
    height: 44px;
  }

  .floating-btn-top {
    bottom: 54px;
    left: 0px;
    width: 44px;
    height: 44px;
  }

  .floating-btn-top.shifted-down {
    bottom: 0px !important;
    left: 0px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 480px) {
  .floating-left-controls {
    bottom: 12px;
    left: 12px;
    width: 100px;
    height: 94px;
  }

  .floating-btn-back {
    width: 100px;
    height: 44px;
    border-radius: 22px;
    font-size: 14px;
  }

  .floating-btn-back.shrunk {
    width: 44px;
    height: 44px;
  }

  .floating-btn-top {
    bottom: 54px;
    left: 0px;
    width: 38px;
    height: 38px;
  }

  .floating-btn-top.shifted-down {
    bottom: 0px !important;
    left: 0px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 360px) {
  .floating-left-controls {
    bottom: 8px;
    left: 8px;
    width: 90px;
    height: 80px;
  }

  .floating-btn-back {
    width: 90px;
    height: 38px;
    border-radius: 19px;
    font-size: 13px;
  }

  .floating-btn-back.shrunk {
    width: 38px;
    height: 38px;
  }

  .floating-btn-top {
    bottom: 46px;
    left: 0px;
    width: 34px;
    height: 34px;
  }

  .floating-btn-top.shifted-down {
    bottom: 0px !important;
    left: 0px !important;
    width: 38px !important;
    height: 38px !important;
  }
}

/* Virtual Shop Custom CSS Rules */
.shop-icon-btn {
  margin: 0;
  background: linear-gradient(180deg, #A855F7 0%, #7E22CE 100%);
  border-color: #581C87;
  box-shadow: 0px 4px 0px #581C87;
  width: 48px;
  height: 48px;
  min-height: 48px;
  min-width: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shop-icon-btn:hover {
  transform: scale(1.05);
  box-shadow: 0px 6px 0px #581C87;
}

.shop-icon-btn:active {
  transform: translateY(2px);
  box-shadow: 0px 2px 0px #581C87;
}

/* Custom Avatar borders — rarity tiers: bronze=Common, silver=Uncommon,
   gold=Rare, diamond=Epic, rainbow=Legendary. Ring drawn on ::before with the
   padding+mask-exclude trick so gradients/animation form a clean ring rather
   than a plain solid stroke. Class names are the unlock-logic contract with
   app.js/index.js — kept identical, only the visuals changed. */
.avatar-border-bronze,
.avatar-border-silver,
.avatar-border-gold,
.avatar-border-diamond,
.avatar-border-rainbow {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.avatar-border-bronze::before,
.avatar-border-silver::before,
.avatar-border-gold::before,
.avatar-border-diamond::before,
.avatar-border-rainbow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Common: clean, simple, no animation — a soft two-tone metallic ring */
.avatar-border-bronze::before {
  background: linear-gradient(135deg, #e0a468, #cd7f32 55%, #8a4f1e);
}

.avatar-border-bronze {
  filter: drop-shadow(0 0 3px rgba(205, 127, 50, 0.45));
}

/* Uncommon: same clean shape, gentle breathing glow */
.avatar-border-silver::before {
  background: linear-gradient(135deg, #f2f2f2, #c0c0c0 55%, #8f8f8f);
}

.avatar-border-silver {
  animation: avatarBorderPulse 2.4s ease-in-out infinite;
}

/* Rare: a real glow effect — pulsing radiant halo behind a bright ring */
.avatar-border-gold::before {
  background: linear-gradient(135deg, #fff3b0, #ffd700 50%, #c9960a);
}

.avatar-border-gold {
  animation: avatarBorderGlowPulse 1.8s ease-in-out infinite;
}

/* Epic: animated pattern — rotating multi-facet conic gradient ring */
.avatar-border-diamond::before {
  background: conic-gradient(from 0deg, #00f0ff, #7fffe0, #00c8ff, #a0f8ff, #00f0ff);
  animation: avatarBorderSpin 3s linear infinite;
}

.avatar-border-diamond {
  animation: avatarBorderGlowPulse 2s ease-in-out infinite;
}

/* Legendary: premium animated frame — rotating rainbow ring, stronger glow,
   plus orbiting sparkle points for extra rarity feel */
.avatar-border-rainbow::before {
  padding: 4px;
  background: conic-gradient(from 0deg, #ff005c, #ff8a00, #ffe600, #38ff5a, #00d0ff, #7a4dff, #ff005c);
  animation: avatarBorderSpin 2.5s linear infinite;
}

.avatar-border-rainbow {
  animation: avatarBorderGlowPulse 1.6s ease-in-out infinite;
}

.avatar-border-rainbow::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background:
    radial-gradient(circle 3px at 50% 2%, #fff 0 99%, transparent 100%),
    radial-gradient(circle 3px at 98% 50%, #fff 0 99%, transparent 100%),
    radial-gradient(circle 3px at 50% 98%, #fff 0 99%, transparent 100%),
    radial-gradient(circle 3px at 2% 50%, #fff 0 99%, transparent 100%);
  filter: drop-shadow(0 0 3px #fff);
  animation: avatarBorderSpin 4s linear infinite reverse;
}

@keyframes avatarBorderSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes avatarBorderPulse {

  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(192, 192, 192, 0.35));
  }

  50% {
    filter: drop-shadow(0 0 6px rgba(192, 192, 192, 0.75));
  }
}

@keyframes avatarBorderGlowPulse {

  0%,
  100% {
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
  }

  50% {
    filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
  }
}

.avatar-border-gold {
  color: #ffd700;
}

.avatar-border-diamond {
  color: #00f0ff;
}

.avatar-border-rainbow {
  color: #ff2fa0;
}

/* ─── Expanded border catalog (content-only addition, unlock logic untouched) ───
   Same ::before ring / ::after sparkle mechanics as the original 5 borders above,
   grouped by rarity tier: Common (flat gradient), Rare (glow pulse), Epic (rotating
   conic ring + glow), Legendary (rotating conic ring + glow + orbiting sparkles). */
.avatar-border-emerald,
.avatar-border-sapphire,
.avatar-border-amethyst,
.avatar-border-crimson,
.avatar-border-aurora,
.avatar-border-obsidian,
.avatar-border-solarflare,
.avatar-border-celestial,
.avatar-border-phoenix,
.avatar-border-galaxy {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.avatar-border-emerald::before,
.avatar-border-sapphire::before,
.avatar-border-amethyst::before,
.avatar-border-crimson::before,
.avatar-border-aurora::before,
.avatar-border-obsidian::before,
.avatar-border-solarflare::before,
.avatar-border-celestial::before,
.avatar-border-phoenix::before,
.avatar-border-galaxy::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Common: Emerald Frame / Sapphire Frame — flat two-tone metallic ring, no animation */
.avatar-border-emerald::before {
  background: linear-gradient(135deg, #7CFFB2, #12B981 55%, #086C4E);
}

.avatar-border-emerald {
  filter: drop-shadow(0 0 3px rgba(18, 185, 129, 0.45));
}

.avatar-border-sapphire::before {
  background: linear-gradient(135deg, #9FD8FF, #2B7FFF 55%, #0F3F91);
}

.avatar-border-sapphire {
  filter: drop-shadow(0 0 3px rgba(43, 127, 255, 0.45));
}

/* Rare: Amethyst Halo / Crimson Ember — radiant pulsing glow ring */
.avatar-border-amethyst::before {
  background: linear-gradient(135deg, #E7C6FF, #9B30FF 50%, #5B0EA6);
}

.avatar-border-amethyst {
  animation: avatarBorderGlowPulse 1.8s ease-in-out infinite;
  color: #9B30FF;
}

.avatar-border-crimson::before {
  background: linear-gradient(135deg, #FFB199, #FF3B30 50%, #A11207);
}

.avatar-border-crimson {
  animation: avatarBorderGlowPulse 1.8s ease-in-out infinite;
  color: #FF3B30;
}

/* Epic: Aurora Veil / Obsidian Storm / Solar Flare — rotating multi-facet conic ring */
.avatar-border-aurora::before {
  background: conic-gradient(from 0deg, #38ff9c, #00c8ff, #7fffe0, #38ff9c);
  animation: avatarBorderSpin 3s linear infinite;
}

.avatar-border-aurora {
  animation: avatarBorderGlowPulse 2s ease-in-out infinite;
  color: #38ff9c;
}

.avatar-border-obsidian::before {
  background: conic-gradient(from 0deg, #6a11cb, #1a1a2e, #2575fc, #1a1a2e, #6a11cb);
  animation: avatarBorderSpin 3.5s linear infinite;
}

.avatar-border-obsidian {
  animation: avatarBorderGlowPulse 2.2s ease-in-out infinite;
  color: #6a11cb;
}

.avatar-border-solarflare::before {
  background: conic-gradient(from 0deg, #FFE066, #FF8A00, #FF3B30, #FF8A00, #FFE066);
  animation: avatarBorderSpin 2.8s linear infinite;
}

.avatar-border-solarflare {
  animation: avatarBorderGlowPulse 1.9s ease-in-out infinite;
  color: #FF8A00;
}

/* Legendary: Celestial Crown / Phoenix Rebirth / Galaxy Nova — rotating premium ring +
   stronger glow + orbiting sparkle points (same trick as the original Rainbow Pulse) */
.avatar-border-celestial::before,
.avatar-border-phoenix::before,
.avatar-border-galaxy::before {
  padding: 4px;
}

.avatar-border-celestial::before {
  background: conic-gradient(from 0deg, #FFF3B0, #FFD700, #FFFFFF, #FFD700, #FFF3B0);
  animation: avatarBorderSpin 2.5s linear infinite;
}

.avatar-border-celestial {
  animation: avatarBorderGlowPulse 1.6s ease-in-out infinite;
  color: #FFD700;
}

.avatar-border-phoenix::before {
  background: conic-gradient(from 0deg, #FF005C, #FF8A00, #FFD700, #FF8A00, #FF005C);
  animation: avatarBorderSpin 2.3s linear infinite;
}

.avatar-border-phoenix {
  animation: avatarBorderGlowPulse 1.5s ease-in-out infinite;
  color: #FF6A00;
}

.avatar-border-galaxy::before {
  background: conic-gradient(from 0deg, #7a4dff, #ff2fa0, #00d0ff, #7a4dff);
  animation: avatarBorderSpin 2.6s linear infinite;
}

.avatar-border-galaxy {
  animation: avatarBorderGlowPulse 1.6s ease-in-out infinite;
  color: #7a4dff;
}

.avatar-border-celestial::after,
.avatar-border-phoenix::after,
.avatar-border-galaxy::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background:
    radial-gradient(circle 3px at 50% 2%, #fff 0 99%, transparent 100%),
    radial-gradient(circle 3px at 98% 50%, #fff 0 99%, transparent 100%),
    radial-gradient(circle 3px at 50% 98%, #fff 0 99%, transparent 100%),
    radial-gradient(circle 3px at 2% 50%, #fff 0 99%, transparent 100%);
  filter: drop-shadow(0 0 3px #fff);
  animation: avatarBorderSpin 4s linear infinite reverse;
}

/* ─── Seasonal borders (event-only; availability config lives in app.js
   seasonalBordersConfig, kept separate from the permanent catalog above) ─── */
.avatar-border-frost,
.avatar-border-spark,
.avatar-border-shadow,
.avatar-border-bloom,
.avatar-border-heart,
.avatar-border-solstice {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.avatar-border-frost::before,
.avatar-border-spark::before,
.avatar-border-shadow::before,
.avatar-border-bloom::before,
.avatar-border-heart::before,
.avatar-border-solstice::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Christmas Frost 🎄 */
.avatar-border-frost::before {
  background: linear-gradient(135deg, #ffffff, #6FE3FF 50%, #1565C0);
}

.avatar-border-frost {
  animation: avatarBorderPulse 2.4s ease-in-out infinite;
}

/* New Year Spark 🎆 */
.avatar-border-spark::before {
  background: conic-gradient(from 0deg, #FFD700, #ffffff, #C0C0C0, #FFD700);
  animation: avatarBorderSpin 2.4s linear infinite;
}

.avatar-border-spark {
  animation: avatarBorderGlowPulse 1.4s ease-in-out infinite;
  color: #FFD700;
}

/* Halloween Shadow 🎃 */
.avatar-border-shadow::before {
  background: linear-gradient(135deg, #FF8A00, #1a1a1a 55%, #FF8A00);
}

.avatar-border-shadow {
  animation: avatarBorderGlowPulse 1.7s ease-in-out infinite;
  color: #FF8A00;
}

/* Easter Bloom 🐰 */
.avatar-border-bloom::before {
  background: linear-gradient(135deg, #FFD1E3, #FFF3B0 50%, #C6F6D5);
}

.avatar-border-bloom {
  animation: avatarBorderPulse 2.6s ease-in-out infinite;
}

/* Valentine's Heart ❤️ */
.avatar-border-heart::before {
  background: linear-gradient(135deg, #FF6FA5, #FF3B7F 50%, #C2006E);
}

.avatar-border-heart {
  animation: avatarBorderHeartbeat 1.2s ease-in-out infinite;
  color: #FF3B7F;
}

@keyframes avatarBorderHeartbeat {

  0%,
  100% {
    filter: drop-shadow(0 0 4px currentColor);
    transform: scale(1);
  }

  15% {
    filter: drop-shadow(0 0 10px currentColor);
    transform: scale(1.05);
  }

  30% {
    transform: scale(1);
  }

  45% {
    filter: drop-shadow(0 0 10px currentColor);
    transform: scale(1.05);
  }
}

/* Summer Solstice ☀️ */
.avatar-border-solstice::before {
  background: conic-gradient(from 0deg, #FFE066, #FF8A00, #FFE066);
  animation: avatarBorderSpin 4s linear infinite;
}

.avatar-border-solstice {
  animation: avatarBorderGlowPulse 2s ease-in-out infinite;
  color: #FFAA22;
}

/* Avatar Hats */
.avatar-hat {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%) translateY(-100%) rotate(-5deg);
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Standardized frame sizing relative to parent avatar */
  width: 90%;
  height: 90%;
}

.avatar-hat svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  /* Universal quality lift so older hats visually match the new premium
     additions without needing every existing SVG's internal paths touched. */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* Shop Specific UI elements */
.shop-tab-content {
  display: none;
}

.shop-tab-content.active {
  display: block;
}

.shop-item-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  transition: all 0.2s ease;
  min-height: 200px;
}

[data-theme="dark"] .shop-item-card {
  background: rgba(255, 255, 255, 0.03);
}

.shop-item-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
}

.shop-item-icon {
  font-size: 2.2rem;
  color: #A855F7;
  margin-bottom: 8px;
}

.shop-item-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.shop-item-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  flex-grow: 1;
  line-height: 1.3;
}

.shop-item-price {
  font-weight: 700;
  color: #e28743;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.custom-credit-slider-container {
  margin: 20px auto 0;
  max-width: 300px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 16px;
  text-align: center;
}

[data-theme="dark"] .custom-credit-slider-container {
  background: rgba(255, 255, 255, 0.03);
}

.custom-credit-slider-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px;
}

.custom-credit-slider-readout {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #FFAA22;
  margin-bottom: 10px;
}

.custom-credit-range {
  width: 100%;
  height: 8px;
  border-radius: 6px;
  background: linear-gradient(180deg, #FFAA22 0%, #E36600 100%);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  margin-bottom: 12px;
}

.custom-credit-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #E36600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.custom-credit-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #E36600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.custom-credit-slider-price {
  font-size: 0.9rem;
  color: var(--text-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.custom-credit-slider-price strong {
  color: var(--text-primary);
  font-size: 1.05rem;
}

.shop-vip-card {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.25) 0%, rgba(217, 119, 6, 0.25) 100%);
  border: 2.5px solid #d97706;
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(88, 28, 135, 0.15);
}

[data-theme="dark"] .shop-vip-card {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.4) 0%, rgba(217, 119, 6, 0.4) 100%);
}

.shop-vip-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #FFAA22 0%, #FFD700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.shop-vip-features {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-vip-features li {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.shop-vip-features li i {
  color: #FFD700;
}

.title-vip {
  background: linear-gradient(135deg, #FFAA22 0%, #FFD700 100%) !important;
  color: #7A3300 !important;
  border: 1.5px solid #7A3300 !important;
  box-shadow: 0 0 8px rgba(255, 170, 34, 0.6) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* Avatar Preview styling in Shop */
.avatar-shop-preview {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  margin-bottom: 12px;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEACHER MODE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Premium row: Teacher + Dev side by side on desktop */
.home-premium-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 680px;
  margin: 14px auto 0;
}

@media (max-width: 640px) {
  .home-premium-row {
    grid-template-columns: 1fr;
  }
}

/* Teacher Mode — wide home card below the main grid */
.home-card-btn-wide {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  font-family: 'Fredoka', sans-serif;
  color: #fff;
  margin-top: 0;
  user-select: none;
  outline: none;
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-sizing: border-box;
}

.home-card-btn-wide:hover {
  transform: translateY(-3px) scale(1.01);
}

.home-card-btn-wide:active {
  transform: translateY(3px) scale(0.99);
}

.home-card-btn-wide .card-bg-icon {
  bottom: -20px;
  right: -10px;
  font-size: 7rem;
}

.home-card-btn-wide:hover .card-bg-icon {
  transform: rotate(0deg) scale(1.05);
  opacity: 0.2;
}

.card-btn-teacher {
  background: linear-gradient(135deg, #7C3AED 0%, #6366F1 50%, #4338CA 100%);
  border: 3px solid #312E81;
  box-shadow: 0px 6px 0px #312E81, 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.card-btn-teacher:active {
  box-shadow: 0px 2px 0px #312E81, 0px 4px 8px rgba(0, 0, 0, 0.25);
}

.card-btn-teacher .card-bg-pattern {
  background: repeating-linear-gradient(60deg,
      rgba(255, 255, 255, 0.07) 0px,
      rgba(255, 255, 255, 0.07) 1px,
      transparent 1px,
      transparent 12px);
}

.teacher-premium-tag {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  z-index: 2;
  text-transform: uppercase;
}

/* Mode dashboard back buttons (Teacher/Dev top bar) — icon-only circle */
.mode-dash-back-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  min-height: 48px;
  min-width: 48px;
  padding: 0;
  margin: 0;
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}

.mode-dash-back-btn:hover {
  transform: translateY(-2px);
}

.mode-dash-back-btn:active {
  transform: translateY(2px);
  box-shadow: none !important;
}

.teacher-back-btn,
.dev-back-btn {
  background: linear-gradient(180deg, #FF5252 0%, #D31A1A 100%);
  border-color: #6A0606;
  box-shadow: 0px 4px 0px #6A0606, 0 4px 12px rgba(211, 26, 26, 0.35);
}

.teacher-back-btn:hover,
.dev-back-btn:hover {
  box-shadow: 0px 6px 0px #6A0606, 0 6px 16px rgba(211, 26, 26, 0.4);
}

/* Teacher Dashboard Page — uses standard .page + .glass-card pattern */

/* Sub-status line inside the user-bar widget on teacher dashboard */
.teacher-sub-badge {
  font-size: 0.68rem;
  color: #818CF8;
  white-space: nowrap;
}

/* Teacher/dev floating user cards — same hover zoom as the main user bar */
.teacher-dash-user-bar:hover,
.dev-dash-user-bar:hover {
  transform: scale(1.05);
  box-shadow: 0px 4px 0px var(--container-outer-border), 0px 8px 24px rgba(0, 0, 0, 0.3);
}

/* Wider name + sub-badge in teacher/dev floating user cards */
.teacher-dash-user-bar .user-bar-name,
.dev-dash-user-bar .user-bar-name {
  max-width: 140px;
}

.teacher-dash-user-bar,
.dev-dash-user-bar {
  padding-right: 16px;
}

/* Top clearance for the fixed teacher/dev bars is handled at the container
   level (see RESPONSIVE & LAYOUT POLISH section) — no in-card padding, so
   content starts right at the top of the card without dead space. */

/* Quiz list items (extend my-quiz-item) */
.teacher-quiz-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 16px;
  margin-bottom: 10px;
  border: 3px solid var(--container-inner-border);
  box-shadow: 0px 3px 0px var(--container-inner-border);
  background: var(--container-inner-bg);
  gap: 12px;
  transition: border-color 0.2s;
}

.teacher-quiz-item:hover {
  border-color: rgba(99, 102, 241, 0.5);
}

.teacher-quiz-item-info {
  flex: 1;
  min-width: 0;
}

.teacher-quiz-item-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teacher-quiz-item-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.teacher-quiz-item-meta span+span::before {
  content: ' · ';
}

.teacher-quiz-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Session list items */
.teacher-session-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 16px;
  margin-bottom: 10px;
  border: 3px solid var(--container-inner-border);
  box-shadow: 0px 3px 0px var(--container-inner-border);
  background: var(--container-inner-bg);
  gap: 12px;
  transition: border-color 0.2s;
}

.teacher-session-item:hover {
  border-color: rgba(99, 102, 241, 0.5);
}

.teacher-session-item-info {
  flex: 1;
  min-width: 0;
}

.teacher-session-item-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teacher-session-item-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.teacher-session-item-meta span+span::before {
  content: ' · ';
}

/* Status pills */
.teacher-status-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.teacher-status-complete {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
}

.teacher-status-active {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

/* Teacher Create Quiz Page */
#teacher-create-quiz-page.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.teacher-create-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px 14px;
  border-bottom: 1.5px solid var(--container-inner-border);
  flex-shrink: 0;
}

.teacher-create-header h2 {
  flex: 1;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}

/* Stepper */
.teacher-stepper {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1.5px solid var(--container-inner-border);
  flex-shrink: 0;
  gap: 0;
}

.teacher-step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  opacity: 0.45;
  transition: opacity 0.2s;
}

.teacher-step-indicator.active,
.teacher-step-indicator.completed {
  opacity: 1;
}

.teacher-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--container-inner-bg);
  border: 2px solid var(--container-inner-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.teacher-step-indicator.active .teacher-step-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.teacher-step-indicator.completed .teacher-step-circle {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.teacher-step-label {
  font-size: 0.8rem;
  font-family: 'Fredoka', sans-serif;
  color: var(--text-secondary);
}

.teacher-step-indicator.active .teacher-step-label {
  color: var(--primary);
  font-weight: 600;
}

.teacher-step-indicator.completed .teacher-step-label {
  color: var(--success);
}

.teacher-step-divider {
  width: 24px;
  height: 2px;
  background: var(--container-inner-border);
  flex-shrink: 0;
  margin: 0 4px;
}

.teacher-create-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.teacher-step-content {
  display: none;
}

.teacher-step-content.active {
  display: block;
}

.teacher-step-actions {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1.5px solid var(--container-inner-border);
  flex-shrink: 0;
}

/* Question source grid */
.question-source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.question-source-card {
  background: var(--container-inner-bg);
  border: 2px solid var(--container-inner-border);
  border-radius: 14px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.question-source-card:hover {
  border-color: var(--primary);
}

.question-source-card.selected {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.1);
}

.question-source-card i {
  font-size: 1.6rem;
  margin-bottom: 8px;
  display: block;
}

.question-source-card .source-label {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.question-source-card .source-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* AI settings panel */
#tq-ai-settings {
  margin-top: 4px;
}

.tq-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

/* Questions preview list */
.teacher-question-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--container-inner-bg);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
}

.teacher-question-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.15);
  color: #818CF8;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.teacher-question-body {
  flex: 1;
  min-width: 0;
}

.teacher-question-text {
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.teacher-question-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.teacher-question-answer {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--container-inner-border);
  color: var(--text-secondary);
}

.teacher-question-answer.correct {
  background: rgba(34, 197, 94, 0.12);
  border-color: #22C55E;
  color: #22C55E;
  font-weight: 600;
}

.teacher-question-item-actions {
  flex-shrink: 0;
}

/* Answer editor item */
.answer-editor-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.answer-editor-item input[type="radio"] {
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--success);
}

.answer-editor-item .form-control {
  flex: 1;
}

/* Session review modals */
#teacher-session-modal,
#teacher-player-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

#teacher-session-modal.active,
#teacher-player-detail-modal.active {
  opacity: 1;
  pointer-events: all;
}

.teacher-modal-inner {
  background: var(--container-bg);
  border: 1.5px solid var(--container-border);
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.teacher-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1.5px solid var(--container-inner-border);
  flex-shrink: 0;
}

.teacher-modal-header h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.teacher-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--container-inner-border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.teacher-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.teacher-modal-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--container-inner-border);
  flex-shrink: 0;
}

.teacher-modal-tabs .modal-tab {
  flex: 1;
  padding: 11px 8px;
  text-align: center;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.88rem;
  color: var(--text-secondary);
  border-bottom: 3px solid transparent;
  transition: color 0.2s;
}

.teacher-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Overview grid */
.teacher-session-overview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.teacher-overview-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--container-inner-bg);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 12px;
}

.teacher-overview-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.teacher-overview-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Results table */
.teacher-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.teacher-results-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-secondary);
  border-bottom: 1.5px solid var(--container-inner-border);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.teacher-results-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--container-inner-border);
  color: var(--text-primary);
  vertical-align: top;
}

.teacher-results-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.teacher-answer-correct {
  color: #22C55E;
}

.teacher-answer-wrong {
  color: #EF4444;
}

.teacher-detail-table th:nth-child(2),
.teacher-detail-table td:nth-child(2) {
  max-width: 140px;
  word-break: break-word;
}

/* Lobby badge */
.teacher-lobby-badge {
  display: inline-block;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #fff;
  font-size: 0.8rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  margin-top: 8px;
  margin-bottom: 4px;
}

/* Loader line */
.teacher-loader {
  text-align: center;
  padding: 14px 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.teacher-loader.hidden {
  display: none;
}

/* ── Teacher Mode Active: Hide cosmetics ─────────────────────────────────────
   Applied via body.teacher-mode-active when in teacher game or lobby.
   Hides all cosmetic elements without touching JS render functions.
   ──────────────────────────────────────────────────────────────────────────── */

/* Hide lifelines */
body.teacher-mode-active #gameplay-lifelines-container,
body.teacher-mode-active .lifeline-btn,
body.teacher-mode-active #lifelines-section {
  display: none !important;
}

/* Hide player cosmetics in lobby, leaderboard, podium */
body.teacher-mode-active .avatar-level-badge,
body.teacher-mode-active .player-level-badge,
body.teacher-mode-active .player-level-title,
body.teacher-mode-active .level-badge,
body.teacher-mode-active .xp-bar,
body.teacher-mode-active .xp-bar-container,
body.teacher-mode-active .player-xp-bar,
body.teacher-mode-active .player-xp,
body.teacher-mode-active .avatar-hat,
body.teacher-mode-active .player-hat,
body.teacher-mode-active [class*="avatar-border-"],
body.teacher-mode-active [class*="player-border-"],
body.teacher-mode-active .profile-title-badge,
body.teacher-mode-active .player-title,
body.teacher-mode-active .vip-badge,
body.teacher-mode-active .vip-crown,
body.teacher-mode-active .vip-glow,
body.teacher-mode-active .player-vip-badge,
body.teacher-mode-active .player-decoration,
body.teacher-mode-active .cosmetic-overlay,
body.teacher-mode-active .player-frame,
body.teacher-mode-active .avatar-frame {
  display: none !important;
}

/* Hide bot controls in lobby */
body.teacher-mode-active #add-bot-btn,
body.teacher-mode-active #bot-settings,
body.teacher-mode-active .bot-controls,
body.teacher-mode-active #bots-section,
body.teacher-mode-active .bot-count-controls {
  display: none !important;
}

/* Default avatar styling for teacher mode (strips colour/frame cosmetics) */
body.teacher-mode-active .player-avatar-img,
body.teacher-mode-active .avatar-img {
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Hide XP/coin notifications during teacher game */
body.teacher-mode-active #xp-notification,
body.teacher-mode-active #coin-notification,
body.teacher-mode-active .xp-toast,
body.teacher-mode-active .coin-toast {
  display: none !important;
}

/* ─── End Teacher Mode Active ─────────────────────────────────────────────── */

/* ─── Teacher Stat Cards ──────────────────────────────────────────────────── */
.teacher-stat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  transition: background 0.15s;
}

.teacher-stat-card:hover {
  background: rgba(255, 255, 255, 0.08);
}

.teacher-stat-icon {
  font-size: 1.1rem;
  color: var(--primary);
  margin-bottom: 4px;
  opacity: 0.85;
}

.teacher-stat-value {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 2px;
}

.teacher-stat-label {
  font-size: 0.76rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.teacher-stat-card-sm {
  padding: 8px 6px;
  border-radius: 10px;
}

.teacher-stat-value-sm {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 2px;
}

/* ─── Classroom Item Card ─────────────────────────────────────────────────── */
.cls-classroom-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

/* The card's single content wrapper (built in app.js) is a flex item with no
   intrinsic width, so it was shrinking to its content instead of filling the
   row — leaving the right side of the card empty on wide teacher-dashboard
   layouts. Force it to use the full card width. */
.cls-classroom-card>div {
  width: 100%;
  min-width: 0;
}

.cls-classroom-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(99, 102, 241, 0.4);
}

.cls-classroom-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
  border: 1.5px solid rgba(99, 102, 241, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--primary);
  flex-shrink: 0;
}

.cls-classroom-card-body {
  flex: 1;
  min-width: 0;
}

.cls-classroom-card-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.cls-classroom-card-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.cls-classroom-card-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cls-classroom-card-code {
  font-family: 'Fredoka', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(99, 102, 241, 0.12);
  border: 1.5px solid rgba(99, 102, 241, 0.25);
  border-radius: 8px;
  padding: 4px 10px;
  letter-spacing: 2px;
  flex-shrink: 0;
}

/* Small icon-only "Copy Code" button, reused on both teacher and student
   classroom cards next to the join-code badge. */
.cls-copy-code-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1.5px solid rgba(99, 102, 241, 0.25);
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  cursor: pointer;
  font-size: 0.78rem;
  transition: background 0.15s ease, transform 0.1s ease;
}

.cls-copy-code-btn:hover {
  background: rgba(99, 102, 241, 0.2);
}

.cls-copy-code-btn:active {
  transform: scale(0.92);
}

/* Student "My Classrooms" — responsive card grid replacing the old fixed
   vertical list so desktop/tablet use the available card width. */
.my-classrooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

@media (max-width: 600px) {
  .my-classrooms-grid {
    grid-template-columns: 1fr;
  }
}

.my-classroom-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.my-classroom-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(99, 102, 241, 0.35);
}

.my-classroom-item-name {
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-classroom-item-teacher {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.my-classroom-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* DEVELOPER MODE STYLES                                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Home Card ────────────────────────────────────────────────────────────── */
.card-btn-dev {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  border: 3px solid #1e3a5f;
  box-shadow: 0px 6px 0px #0c1524, 0px 8px 16px rgba(0, 0, 0, 0.35);
  color: #f1f5f9;
}

.card-btn-dev:active {
  box-shadow: 0px 2px 0px #0c1524, 0px 4px 8px rgba(0, 0, 0, 0.35);
}

.card-btn-dev .card-bg-pattern {
  background: repeating-linear-gradient(60deg,
      rgba(56, 189, 248, 0.06) 0px,
      rgba(56, 189, 248, 0.06) 1px,
      transparent 1px,
      transparent 12px);
}

.card-btn-dev .card-bg-icon {
  color: #38bdf8;
  opacity: 0.12;
}

.card-btn-dev .card-icon-badge {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 2px solid rgba(56, 189, 248, 0.3);
}

.card-btn-dev .card-title {
  color: #f1f5f9;
}

.card-btn-dev .card-subtitle {
  color: #94a3b8;
}

.dev-premium-tag {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: 20px;
  background: rgba(56, 189, 248, 0.18);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  z-index: 2;
  text-transform: uppercase;
}

/* ─── Dev Top Bar ──────────────────────────────────────────────────────────── */
.dev-sub-badge {
  font-size: 0.68rem;
  color: #818CF8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Stats Banner ─────────────────────────────────────────────────────────── */
.dev-stats-banner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px 0;
  border-bottom: 1.5px solid var(--container-inner-border);
}

@media (max-width: 600px) {
  .dev-stats-banner {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dev-stat-item {
  text-align: center;
}

.dev-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  color: #38bdf8;
  line-height: 1;
}

.dev-stat-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ─── Session Analytics Dashboard ───────────────────────────────────────────── */
.dev-analytics-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.dev-analytics-tab {
  flex: 1;
  min-width: 90px;
  padding: 9px 10px;
  border: 1.5px solid var(--container-inner-border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dev-analytics-tab:hover {
  border-color: #38bdf8;
}

.dev-analytics-tab.active {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  border-color: #075985;
  color: #fff;
}

.dev-analytics-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 0.85rem;
}

.dev-analytics-bar-label {
  width: 110px;
  flex-shrink: 0;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 500px) {
  .dev-analytics-bar-label {
    width: 78px;
    font-size: 0.78rem;
  }
}

/* ─── Session Header (selector + id row | action buttons) ─────────────────── */
.dev-session-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

/* Narrow screens: selector takes the full row, action buttons drop below it
   (the open dropdown panel is sized to the trigger, so it goes full-width too) */
@media (max-width: 640px) {
  .dev-session-header {
    flex-direction: column;
    align-items: stretch;
  }

  .dev-session-selector-row .csd-wrapper {
    min-width: 0;
    flex: 1;
  }

  /* Action buttons span the full row: text buttons stretch, icon buttons
     keep their compact size at the end */
  .dev-session-hdr-actions .dev-session-hdr-group:first-child,
  .dev-session-hdr-group .dev-session-hdr-btn {
    flex: 1;
  }

  .dev-session-hdr-group .dev-session-hdr-btn {
    justify-content: center;
  }
}

/* ─── Session Selector (replaces the old static "Live Session" title) ───────── */
.dev-session-selector-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.dev-session-selector-row .csd-wrapper {
  min-width: 220px;
}

.dev-session-selector-row .csd-trigger {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
}

/* ─── Dev Session Header Analytics button (matches the Preview button style) ── */
.dev-session-hdr-btn-analytics {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  border-color: #075985;
  box-shadow: 0px 4px 0px #075985, 0 4px 10px rgba(2, 132, 199, 0.3);
}

.dev-session-hdr-btn-analytics:hover {
  box-shadow: 0px 6px 0px #075985, 0 6px 14px rgba(2, 132, 199, 0.35);
}

.dev-session-hdr-btn-analytics:active {
  box-shadow: 0px 1px 0px #075985;
}

/* ─── Session Header Action Groups (view actions | session mgmt actions) ───── */
.dev-session-hdr-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.dev-session-hdr-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.dev-session-hdr-group + .dev-session-hdr-group {
  padding-left: 14px;
  border-left: 1.5px solid var(--container-inner-border);
}

@media (max-width: 480px) {
  .dev-session-hdr-group + .dev-session-hdr-group {
    padding-left: 0;
    border-left: none;
  }
}

/* ─── Live Session Controls (question flow | lifelines & boosts) ──────────── */
.dev-session-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
  margin-bottom: 18px;
}

.dev-session-controls-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dev-session-controls-divider {
  width: 1.5px;
  align-self: stretch;
  min-height: 26px;
  background: var(--container-inner-border);
}

.dev-session-controls-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  flex-basis: 100%;
}

.dev-sess-ctrl-btn {
  padding: 6px 14px;
  font-size: 13px;
  min-height: auto;
  width: auto;
}

@media (max-width: 680px) {
  .dev-session-controls-divider {
    width: 100%;
    height: 1.5px;
    min-height: 0;
    align-self: auto;
  }
}

@media (max-width: 480px) {
  .dev-session-controls-group {
    width: 100%;
  }

  .dev-sess-ctrl-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ─── Session Status Bar ───────────────────────────────────────────────────── */
.dev-session-status-bar {
  display: flex;
  gap: 0;
  background: rgba(0, 0, 0, 0.04);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}

.dev-session-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  border-right: 1.5px solid var(--container-inner-border);
}

.dev-session-stat:last-child {
  border-right: none;
}

.dev-session-stat-val {
  font-size: 1.15rem;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  color: #38bdf8;
  line-height: 1;
}

.dev-session-stat-lbl {
  font-size: 0.65rem;
  color: var(--text-secondary);
  margin-top: 2px;
  text-align: center;
}

@media (max-width: 500px) {
  .dev-session-stat-lbl {
    display: none;
  }

  .dev-session-stat-val {
    font-size: 1rem;
  }
}

/* ─── 2-Column Session Layout ──────────────────────────────────────────────── */
.dev-session-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}

@media (max-width: 680px) {
  .dev-session-cols {
    grid-template-columns: 1fr;
  }
}

.dev-session-col {
  background: rgba(0, 0, 0, 0.03);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 14px;
  padding: 12px;
  overflow: hidden;
}

/* Rows scroll internally within the card (header/skeleton stay in normal
   flow above) so raising the display cap below (renderDevLeaderboard,
   DEV_LOBBY_MAX_PLAYERS) doesn't need the whole dashboard page to scroll —
   viewport-relative like the Host Guide overlay's own max-height convention. */
#dev-session-leaderboard {
  max-height: min(60vh, 480px);
  overflow-y: auto;
  scrollbar-width: thin;
}

@media (max-width: 680px) {
  #dev-session-leaderboard {
    max-height: 48vh;
  }
}

.dev-session-col-header {
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.95rem;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--container-inner-border);
}

/* Leaderboard rows */
.dev-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-bottom: 4px;
}

.dev-lb-rank {
  width: 22px;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.dev-lb-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.dev-lb-score {
  font-weight: 700;
  color: #38bdf8;
  flex-shrink: 0;
}

.dev-lb-row:nth-child(1) .dev-lb-rank {
  color: #FFD700;
}

.dev-lb-row:nth-child(2) .dev-lb-rank {
  color: #C0C0C0;
}

.dev-lb-row:nth-child(3) .dev-lb-rank {
  color: #CD7F32;
}

.dev-lb-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--game-blue-top), var(--game-blue-base));
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
}

.dev-lb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Question display */
.dev-question-text {
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.dev-answer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.dev-answer-pill {
  background: rgba(0, 0, 0, 0.05);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 600;
}

.dev-answer-pill.hidden-by-ff {
  opacity: 0.3;
  text-decoration: line-through;
}

.dev-answer-pill.correct {
  border-color: #22c55e;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.08);
}

/* ─── Credit Event Notifications ───────────────────────────────────────────── */
@keyframes devFlowerFadeIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  15% {
    opacity: 1;
    transform: translateY(0);
  }

  75% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* The wrapper (.dev-credit-cheer) owns the translate(-50%,-50%) centering,
   so the text animation must only scale — translating here too pushed the
   banner off-center. */
@keyframes devCheerScale {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  15% {
    opacity: 1;
    transform: scale(1.05);
  }

  25% {
    transform: scale(1);
  }

  75% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.85);
  }
}

.dev-credit-flower {
  position: fixed;
  bottom: 80px;
  left: 20px;
  z-index: 9999;
  pointer-events: none;
}

.dev-credit-flower>div {
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid #38bdf8;
  color: #f1f5f9;
  padding: 10px 16px;
  border-radius: 14px;
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
  animation: devFlowerFadeIn 3.5s ease forwards;
}

/* Live Mode player-joined toast — same look/size as .dev-credit-flower (gift
   toast), stacked above it so a join and a gift can both be visible at once.
   Slides in from the left (vs. the gift toast's vertical fade) per the join
   banner's own entrance spec; wraps instead of overflowing on narrow/portrait
   (mobile, TikTok) viewports. */
.dev-join-banner {
  bottom: 150px;
  max-width: min(78vw, 300px);
}

.dev-join-banner>div {
  border-color: #34d399;
  animation-name: devJoinSlideIn;
  white-space: normal;
  word-break: break-word;
}

@keyframes devJoinSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-36px);
  }

  15% {
    opacity: 1;
    transform: translateX(0);
  }

  80% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-24px);
  }
}

@media (max-width: 480px) {
  .dev-join-banner>div {
    padding: 8px 12px;
    font-size: 0.9rem;
  }
}

.dev-join-avatar {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 6px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--game-blue-top), var(--game-blue-base));
  color: #fff;
  font-weight: 700;
  font-size: 0.65rem;
}

.dev-join-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dev-credit-cheer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  text-align: center;
  /* Stays perfectly centered on any screen size — long titles wrap instead
     of pushing the banner off-center */
  width: max-content;
  max-width: min(92vw, 680px);
}

.dev-credit-cheer>#dev-credit-cheer-text {
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  color: #fff;
  padding: 20px 36px;
  border-radius: 22px;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  box-shadow: 0 8px 40px rgba(14, 165, 233, 0.45);
  animation: devCheerScale 4s ease forwards;
}

/* ─── API Reference Code Block ─────────────────────────────────────────────── */
#dev-api-ref-content pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.78rem;
  line-height: 1.5;
}

#dev-api-ref-content .api-section {
  margin-bottom: 18px;
}

#dev-api-ref-content .api-section-title {
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.92rem;
  color: #38bdf8;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
}

#dev-api-ref-content .api-endpoint {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.05);
  margin-bottom: 4px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
}

#dev-api-ref-content .api-method {
  font-weight: 800;
  color: #fbbf24;
  flex-shrink: 0;
  width: 46px;
}

#dev-api-ref-content .api-path {
  color: var(--text-primary);
  flex: 1;
}

#dev-api-ref-content .api-desc {
  color: var(--text-secondary);
  font-size: 0.75rem;
  width: 100%;
  padding-left: 54px;
  margin-top: -2px;
}

/* ─── Dev Mode Active: Hide Cosmetics ──────────────────────────────────────── */
body.dev-mode-active .player-hat,
body.dev-mode-active .player-border,
body.dev-mode-active .avatar-frame,
body.dev-mode-active .avatar-border,
body.dev-mode-active .player-level-badge,
body.dev-mode-active .avatar-level-badge,
body.dev-mode-active .vip-title,
body.dev-mode-active .profile-title-badge,
body.dev-mode-active .player-title,
body.dev-mode-active .player-xp,
body.dev-mode-active .xp-bar-container {
  display: none !important;
}

/* ─── Dev Mode Skeleton Loading ─────────────────────────────────────────── */
/* Uses the theme-aware .skeleton base rule; only sizing classes below */
/* Leaderboard skeleton rows */
.dev-lb-skel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dev-lb-skel-rank {
  width: 28px;
  height: 20px;
  flex-shrink: 0;
}

.dev-lb-skel-name {
  height: 16px;
  flex: 1;
  width: 65%;
}

.dev-lb-skel-score {
  width: 44px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 10px;
}

/* Question skeleton */
.dev-q-skel-text {
  height: 16px;
  width: 100%;
  margin-bottom: 4px;
}

.dev-q-skel-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.dev-q-skel-pill {
  height: 40px;
  border-radius: 10px;
}

/* Stats banner skeleton (inline spans) */
.dev-stat-skel {
  display: inline-block;
  width: 52px;
  height: 26px;
  vertical-align: middle;
  border-radius: 7px;
}

/* ─── Dev Mode API Docs Page ─────────────────────────────────────────────── */
.dev-docs-callout {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.85rem;
  border: 1.5px solid;
}

.dev-docs-callout-info {
  background: rgba(56, 189, 248, 0.07);
  border-color: rgba(56, 189, 248, 0.35);
  color: var(--text-secondary);
}

.dev-docs-callout code {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  padding: 1px 6px;
  border-radius: 5px;
  font-family: monospace;
}

.dev-docs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 10px;
}

.dev-docs-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.83rem;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  transition: all 0.18s;
}

.dev-docs-tab:hover {
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
  border-color: #38bdf8;
}

.dev-docs-tab.active {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: #38bdf8;
  font-weight: 700;
}

/* Endpoint cards */
.dev-docs-endpoint {
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
}

.dev-docs-endpoint-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.025);
  flex-wrap: wrap;
}

.dev-docs-endpoint-body {
  padding: 14px 16px;
}

.dev-docs-endpoint-body h4 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 10px 0 5px;
}

.dev-docs-endpoint-body h4:first-child {
  margin-top: 0;
}

/* Method badges */
.dev-docs-method {
  font-weight: 900;
  font-family: monospace;
  font-size: 0.78rem;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.dev-docs-method-get {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

.dev-docs-method-post {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
}

.dev-docs-method-put {
  background: rgba(251, 146, 60, 0.18);
  color: #fb923c;
}

.dev-docs-method-delete {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
}

.dev-docs-method-patch {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
}

.dev-docs-path {
  font-family: monospace;
  font-size: 0.88rem;
  color: var(--text-primary);
  flex: 1;
}

.dev-docs-auth-badge {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 5px;
  flex-shrink: 0;
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.dev-docs-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* Code blocks */
.dev-docs-code-wrap {
  position: relative;
  margin-top: 4px;
}

.dev-docs-code {
  background: rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-primary);
  overflow-x: auto;
  white-space: pre;
  margin: 0;
  padding-right: 48px;
}

.dev-docs-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
  z-index: 1;
}

.dev-docs-copy-btn:hover {
  background: rgba(56, 189, 248, 0.2);
}

.dev-docs-copy-btn.copied {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.1);
}

/* Section headings in docs tab */
.dev-docs-section-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(56, 189, 248, 0.2);
}

.dev-docs-section-title:first-child {
  margin-top: 0;
}

/* Error table */
.dev-docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-top: 8px;
}

.dev-docs-table th {
  text-align: left;
  padding: 8px 10px;
  background: rgba(56, 189, 248, 0.07);
  color: #38bdf8;
  font-weight: 700;
  border-bottom: 2px solid rgba(56, 189, 248, 0.2);
}

.dev-docs-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  vertical-align: top;
}

.dev-docs-table tr:last-child td {
  border-bottom: none;
}

.dev-docs-table code {
  background: rgba(255, 255, 255, 0.07);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.78rem;
  color: var(--text-primary);
}

/* ── Dev Session Header Buttons ─────────────────────────────────────────── */
.dev-session-hdr-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  border-radius: 12px;
  border: 3px solid;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  min-height: unset;
  width: auto;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dev-session-hdr-btn:hover {
  transform: translateY(-2px);
}

.dev-session-hdr-btn:active {
  transform: translateY(2px);
}

.dev-session-hdr-btn-preview {
  background: linear-gradient(180deg, #A78BFA 0%, #7C3AED 100%);
  border-color: #4C1D95;
  box-shadow: 0px 4px 0px #4C1D95, 0 4px 10px rgba(124, 58, 237, 0.3);
}

.dev-session-hdr-btn-preview:hover {
  box-shadow: 0px 6px 0px #4C1D95, 0 6px 14px rgba(124, 58, 237, 0.35);
}

.dev-session-hdr-btn-preview:active {
  box-shadow: 0px 1px 0px #4C1D95;
}

/* Small subtle icon buttons next to the Session label (toggle/copy/settings) */
.dev-session-label-icon-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.78rem;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.dev-session-label-icon-btn:hover {
  opacity: 1;
}

/* Icon-only variant of the compact header buttons (e.g. End Session) */
.dev-session-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 34px;
  padding: 6px 10px;
}

/* Quick Ref block inside API Docs */
.dev-quick-ref-block {
  background: rgba(0, 0, 0, 0.15);
  border: 1.5px solid var(--container-inner-border);
  border-radius: 14px;
  padding: 14px 16px;
  font-family: monospace;
  font-size: 0.8rem;
  overflow-x: auto;
}

.dev-quick-ref-block .api-endpoint {
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.04);
  margin-bottom: 5px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.dev-quick-ref-block .api-method {
  font-weight: 800;
  flex-shrink: 0;
  width: 46px;
}

.dev-quick-ref-block .api-path {
  color: var(--text-primary);
  flex: 1;
}

.dev-quick-ref-block .api-desc {
  color: var(--text-secondary);
  font-size: 0.72rem;
  width: 100%;
  padding-left: 54px;
  margin-top: -2px;
}

/* ─── Dev Mode Spectator Preview (Full-Screen) ───────────────────────────── */
.dev-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  /* Same background as the normal quiz (body gradient + radial glow below) */
  background: linear-gradient(135deg, var(--body-bg-start), var(--body-bg-end));
  display: flex;
  flex-direction: column;
}

.dev-preview-overlay::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 22%, var(--frame-atmosphere-a) 0%, transparent 55%),
    radial-gradient(circle at 82% 18%, var(--frame-atmosphere-b) 0%, transparent 55%),
    radial-gradient(circle at 50% 88%, var(--frame-atmosphere-c) 0%, transparent 60%);
  pointer-events: none;
  animation: frameAtmosphereFloat 22s ease-in-out infinite alternate;
}

/* ── FEATURE 1: Animated Live Background — off by default (dg-live-bg-enabled).
   A second, more visible atmosphere layer on top of the always-on ambient
   glow above, plus a slow diagonal gradient sweep and a handful of softly
   drifting "particle" dots — all transform/opacity/background-position only
   so it never triggers layout/paint work outside its own compositor layer. */
.dev-preview-overlay.live-bg-active::after {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 85%, rgba(167, 139, 250, 0.22) 0%, transparent 40%),
    radial-gradient(circle at 88% 78%, rgba(244, 114, 182, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 50% 8%, rgba(99, 102, 241, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.10) 0%, transparent 2%),
    radial-gradient(circle at 75% 30%, rgba(255, 255, 255, 0.10) 0%, transparent 2%),
    radial-gradient(circle at 35% 70%, rgba(255, 255, 255, 0.10) 0%, transparent 2%),
    radial-gradient(circle at 90% 60%, rgba(255, 255, 255, 0.10) 0%, transparent 2%),
    radial-gradient(circle at 60% 90%, rgba(255, 255, 255, 0.10) 0%, transparent 2%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 3px 3px, 4px 4px, 2.5px 2.5px, 3px 3px, 2px 2px;
  animation: devLiveBgDrift 26s ease-in-out infinite alternate, devLiveBgParticles 14s linear infinite;
}

@keyframes devLiveBgDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate3d(-2%, 1.5%, 0) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translate3d(2%, -1.5%, 0) scale(1);
    opacity: 0.7;
  }
}

@keyframes devLiveBgParticles {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 100%, 20% 90%, 60% 100%, 85% 95%, 40% 105%;
  }
  100% {
    background-position: 0 0, 0 0, 0 0, 0 -20%, 20% -10%, 60% -25%, 85% -30%, 40% -15%;
  }
}

.dev-preview-body {
  position: relative;
  z-index: 1;
}

.dev-preview-overlay.hidden {
  display: none;
}

/* Top control bar — always above every in-preview layer (guide overlay z4,
   gift ticker z5, game-card glow) */
.dev-preview-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1.5px solid rgba(167, 139, 250, 0.2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Header collapse: hide the whole topbar to maximize preview area, with a
   small floating handle (shown only while collapsed) to bring it back. */
#dev-preview-modal.header-collapsed .dev-preview-topbar {
  display: none;
}

#dev-preview-modal.header-collapsed .dev-guide-overlay {
  top: 16px;
}

.dev-preview-header-expand-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 3px solid #1E293B;
  background: linear-gradient(180deg, #64748B 0%, #475569 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0px 3px 0px #1E293B, 0 3px 8px rgba(0, 0, 0, 0.25);
}

.dev-preview-header-expand-btn.hidden {
  display: none;
}

.dev-preview-spectator-badge {
  background: rgba(167, 139, 250, 0.15);
  border: 1.5px solid rgba(167, 139, 250, 0.4);
  color: #a78bfa;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.dev-preview-q-badge-top {
  font-family: 'Fredoka', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* ── FEATURE 3: LIVE badge — floating indicator pinned to the preview body's
   top-right corner (visible whether or not the header bar is collapsed),
   toggled per-game via dg-live-badge-enabled (default ON). Lightweight: one
   glow keyframe on the pill, a scale-pulse + expanding ring on the dot, all
   transform/opacity/box-shadow only (GPU-friendly, no layout thrash). */
.dev-live-badge {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, #FF5252 0%, #D31A1A 100%);
  border: 2px solid #6A0606;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  /* Static shadow so reduced-motion (animation:none) keeps the 3D edge */
  box-shadow: 0 3px 0 #6A0606, 0 0 10px rgba(239, 68, 68, 0.45);
  animation: devLiveBadgeGlow 2s ease-in-out infinite;
}

/* Header collapsed: the body now starts at the top of the screen, so slide the
   badge left of the 40px floating expand handle (top:8px / right:8px). */
#dev-preview-modal.header-collapsed .dev-live-badge {
  top: 14px;
  right: 54px;
}

.dev-live-badge.hidden {
  display: none;
}

.dev-live-badge-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: pulse 1.4s ease-in-out infinite;
}

.dev-live-badge-dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  animation: devLiveDotRing 1.4s ease-out infinite;
}

@keyframes devLiveBadgeGlow {
  0%, 100% {
    box-shadow: 0 3px 0 #6A0606, 0 0 6px rgba(239, 68, 68, 0.35);
  }
  50% {
    box-shadow: 0 3px 0 #6A0606, 0 0 16px rgba(239, 68, 68, 0.75);
  }
}

@keyframes devLiveDotRing {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

/* ── FEATURE 6: bot indicator — host-only chip next to a simulated player's
   name in the Dev Preview lobby/leaderboard (never sent to real viewers). */
.dev-bot-badge {
  font-size: 0.85em;
  opacity: 0.85;
  margin-left: 2px;
}

.dev-preview-ctrl-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  border: 3px solid #1E293B;
  background: linear-gradient(180deg, #64748B 0%, #475569 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 4px 0px #1E293B, 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  flex-shrink: 0;
}

.dev-preview-ctrl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0px 6px 0px #1E293B, 0 6px 14px rgba(0, 0, 0, 0.3);
}

.dev-preview-ctrl-btn:active {
  transform: translateY(2px);
  box-shadow: 0px 1px 0px #1E293B;
}

.dev-preview-ctrl-danger {
  background: linear-gradient(180deg, #FF5252 0%, #D31A1A 100%);
  border-color: #6A0606;
  box-shadow: 0px 4px 0px #6A0606, 0 4px 10px rgba(211, 26, 26, 0.3);
}

.dev-preview-ctrl-danger:hover {
  box-shadow: 0px 6px 0px #6A0606, 0 6px 14px rgba(211, 26, 26, 0.35);
}

.dev-preview-ctrl-danger:active {
  box-shadow: 0px 1px 0px #6A0606;
}

.dev-preview-ctrl-success {
  background: linear-gradient(180deg, #A2E022 0%, #72B80E 100%);
  border-color: #3B6103;
  box-shadow: 0px 4px 0px #3B6103, 0 4px 10px rgba(114, 184, 14, 0.3);
}

.dev-preview-ctrl-success:hover {
  box-shadow: 0px 6px 0px #3B6103, 0 6px 14px rgba(114, 184, 14, 0.35);
}

.dev-preview-ctrl-success:active {
  box-shadow: 0px 1px 0px #3B6103;
}

/* Body: question col + sidebar */
.dev-preview-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.dev-preview-question-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 40px;
  overflow-y: auto;
}

.dev-preview-lb-sidebar {
  width: 280px;
  flex-shrink: 0;
  border-left: 1.5px solid rgba(255, 255, 255, 0.07);
  padding: 24px 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  background: rgba(0, 0, 0, 0.15);
}

@media (max-width: 680px) {
  .dev-preview-body {
    flex-direction: column;
  }

  /* Stacked column layout: without an explicit bounded height, a long
     leaderboard's default flex-basis (auto) lets it grow past the fixed
     overlay's viewport and get clipped by .dev-preview-body's overflow:hidden
     instead of scrolling internally — min-height:0 is the standard flexbox
     fix that lets overflow-y:auto actually take effect on a flex child. */
  .dev-preview-lb-sidebar {
    width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 40vh;
    border-left: none;
    border-top: 1.5px solid rgba(255, 255, 255, 0.07);
    padding: 16px;
  }

  .dev-preview-question-col {
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px 16px;
  }
}

/* Waiting state: Dev Mode lobby (reuses Normal Mode's .glass-card + .player-item) */
.dev-preview-waiting {
  width: 100%;
  text-align: center;
}

.dev-lobby-count-line {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.dev-lobby-count-num {
  color: var(--primary);
  font-size: 1.3rem;
}

.dev-lobby-players {
  max-height: 46vh;
  overflow-y: auto;
  text-align: left;
}

/* Compact joined-player list inside the Session Page's Waiting for Players
   card — reuses .player-list/.player-item (same markup as .dev-lobby-players
   above) but with a much shorter cap to fit a small status card. */
.dev-session-waiting-players {
  max-height: 160px;
  overflow-y: auto;
  text-align: left;
  margin-top: 12px;
}

.dev-session-waiting-name {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dev-session-waiting-autoplay {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.dev-session-waiting-autoplay.on {
  color: var(--success);
}

.dev-session-waiting-count {
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  color: #3B82F6;
  font-size: 1.1rem;
  white-space: nowrap;
}

.dev-lobby-empty {
  padding: 16px 0;
}

.dev-lobby-hint {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.dev-lobby-hint .fa-bolt {
  color: var(--warning);
}

.dev-preview-waiting-sub {
  color: var(--text-secondary);
  font-size: 1rem;
}

.dev-preview-waiting-dots {
  margin-top: 24px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.dev-preview-waiting-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a78bfa;
  opacity: 0.25;
  animation: devPrevDot 1.2s ease-in-out infinite;
}

.dev-preview-waiting-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.dev-preview-waiting-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes devPrevDot {

  0%,
  80%,
  100% {
    opacity: 0.2
  }

  40% {
    opacity: 1
  }
}

/* Meta bar: 50/50 badge + spacer + timer */
.dev-preview-meta-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
}

.dev-preview-ff-badge {
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(251, 191, 36, 0.12);
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  color: #fbbf24;
  border-radius: 8px;
  padding: 5px 12px;
}

/* SVG ring timer — bigger in full-screen */
.dev-preview-timer-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.dev-preview-timer-ring {
  width: 72px;
  height: 72px;
  transform: rotate(-90deg);
}

.dev-preview-timer-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 4;
}

.dev-preview-timer-arc {
  fill: none;
  stroke: #a78bfa;
  stroke-width: 4;
  stroke-linecap: round;
  /* circumference = 2π×26 ≈ 163.4 */
  stroke-dasharray: 163.4;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.95s linear, stroke 0.4s;
}

.dev-preview-timer-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Question text */
.dev-preview-question-text {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  padding: 0 0 28px;
  max-width: 760px;
}

/* Answer grid */
.dev-preview-answer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 720px;
}

.dev-preview-answer-pill {
  padding: clamp(14px, 2vw, 22px) 20px;
  border-radius: 16px;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  text-align: center;
  cursor: default;
  user-select: none;
  border: 2px solid transparent;
  transition: opacity 0.25s;
}

.dev-preview-answer-pill:nth-child(1) {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.dev-preview-answer-pill:nth-child(2) {
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.4);
  color: #a78bfa;
}

.dev-preview-answer-pill:nth-child(3) {
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.4);
  color: #34d399;
}

.dev-preview-answer-pill:nth-child(4) {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}

.dev-preview-answer-pill.ff-hidden {
  opacity: 0.15;
  text-decoration: line-through;
  pointer-events: none;
}

/* Leaderboard sidebar */
.dev-preview-lb-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.dev-preview-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  border-radius: 8px;
  will-change: transform;
}

.dev-preview-lb-row:last-child {
  border-bottom: none;
}

/* Gift overtake: the gifter climbing the board gets a golden spotlight */
.dev-preview-lb-row.lb-gift-rise {
  background: rgba(251, 191, 36, 0.12);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.4);
}

/* Epic takeover: the gifter just claimed 1st place */
.dev-preview-lb-row.lb-epic-takeover {
  background: linear-gradient(120deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.1));
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.65);
}

/* Pulsing glow lives on a pseudo-element because the row itself runs the
   inline FLIP (rowPopUp) animation at the same time */
.dev-preview-lb-row.lb-epic-takeover::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  animation: devEpicGlow 1.2s ease-in-out 2;
}

.dev-preview-lb-row.lb-epic-takeover::after {
  content: '👑';
  position: absolute;
  right: -4px;
  top: -12px;
  font-size: 1.1rem;
  animation: devCrownPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes devEpicGlow {

  0%,
  100% {
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
  }

  50% {
    box-shadow: 0 0 26px rgba(251, 191, 36, 0.8);
  }
}

@keyframes devCrownPop {
  from {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
  }

  to {
    transform: scale(1) rotate(12deg);
    opacity: 1;
  }
}

.dev-preview-lb-rank {
  width: 28px;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}

.dev-preview-lb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--game-blue-top), var(--game-blue-base));
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
}

.dev-preview-lb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dev-preview-lb-name {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-preview-lb-score {
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #a78bfa;
  flex-shrink: 0;
}

/* Gift Activity sidebar — shares .dev-preview-lb-sidebar's box/position/responsive
   rules with the always-on leaderboard sidebar (mutually exclusive, see index.html);
   only the row styling below is specific to this panel. */
.dev-preview-gift-activity {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dev-gift-activity-empty {
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 6px 0;
}

.dev-gift-activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
}

.dev-gift-activity-emoji {
  font-size: 1.15rem;
  flex-shrink: 0;
}

.dev-gift-activity-name {
  flex: 1;
  font-weight: 600;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-gift-activity-qty {
  font-family: 'Fredoka', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #a78bfa;
  flex-shrink: 0;
}

.dev-gift-activity-row.dev-gift-activity-pop {
  animation: devGiftActivityPop 0.5s ease;
}

@keyframes devGiftActivityPop {
  0% {
    transform: scale(1);
    box-shadow: none;
  }

  40% {
    transform: scale(1.05);
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
  }

  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

/* ─── End Developer Mode ──────────────────────────────────────────────────── */
/* ============================================================================
   RESPONSIVE & LAYOUT POLISH
   Fixes: mobile top-bar overlap, small-screen scaling, chest popup layering,
   user-card breathing room, teacher/dev density & width, desktop balance.
   ============================================================================ */

/* ── User card: same height as the round icon buttons (48px) ─────────────── */
.user-bar {
  height: 48px;
  gap: 10px;
  padding: 0 16px 0 8px;
  border-radius: 30px;
}

/* Inner ring follows the larger outer radius (outer 30px − 4px inset) */
.user-bar::before {
  border-radius: 26px;
}

/* Avatar is intentionally larger than the card so it pokes out top and
   bottom, and is pulled left to cover the pill's rounded end — applies to
   the main, teacher and dev user bars alike */
.user-bar-avatar {
  width: 60px;
  height: 60px;
  font-size: 1.3rem;
  /* Flush with the card's outer left edge (4px border + 8px padding) so it
     covers the pill's rounded end without crossing the content line */
  margin-left: -12px;
}

.user-bar-name {
  max-width: 130px;
  font-size: 0.9rem;
}

/* Guest card: fits "Login / Register" or a guest name without clipping */
.user-bar.logged-out .user-bar-name {
  max-width: 180px;
}

/* Arrow tab that re-opens the collapsed icon row on phones; hangs under the
   avatar. Hidden everywhere until the phone layout collapses the row. */
.header-icons-toggle {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 18px;
  width: 30px;
  height: 24px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 14px 14px;
  background-color: var(--container-outer-bg);
  border: 3px solid var(--container-outer-border);
  border-top: none;
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  box-shadow: 0px 3px 0px var(--container-outer-border), 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.user-bar-info {
  gap: 3px;
  padding: 2px 0;
}

.user-bar-xp-bar {
  width: 92px;
  height: 7px;
  border-radius: 4px;
}

.user-bar-xp-text {
  font-size: 0.68rem;
}

/* Teacher/dev floating cards share the same sizing */
.teacher-dash-user-bar .user-bar-name,
.dev-dash-user-bar .user-bar-name {
  max-width: 150px;
}

/* ── Teacher & Dev pages: fixed-bar clearance + wider, denser layout ─────── */

/* Reserve a header band below the fixed teacher/dev bars at ALL sizes, so
   cards need no dead space inside and content never slides under the bar */
body:has(#teacher-top-bar:not(.hidden)) .container,
body:has(#dev-top-bar:not(.hidden)) .container {
  padding-top: 86px;
}

/* Content-heavy teacher/dev pages use the available width (dashboards,
   sessions, docs); simple forms stay narrow for focus */
.container:has(#teacher-dashboard-page.active),
.container:has(#teacher-create-quiz-page.active),
.container:has(#classroom-detail-page.active),
.container:has(#classroom-content-edit-page.active),
.container:has(#classroom-quiz-create-page.active),
.container:has(#dev-session-page.active),
.container:has(#dev-analytics-page.active),
.container:has(#dev-api-docs-page.active) {
  max-width: 1200px;
}

#teacher-dashboard-page .glass-card,
#classroom-detail-page .glass-card,
#dev-session-page .glass-card,
#dev-analytics-page .glass-card,
#dev-api-docs-page .glass-card {
  max-width: 1140px;
}

#teacher-create-quiz-page .glass-card,
#classroom-content-edit-page .glass-card,
#classroom-quiz-create-page .glass-card {
  max-width: 900px;
}

/* Stats banners read better with a little more presence at full width */
.dev-stats-banner {
  gap: 14px;
  padding: 16px 0;
}

/* ── Chest / reward popup: scale down on small screens ───────────────────── */
@media (max-width: 480px) {
  .chest-graphics {
    font-size: 5.5rem;
    margin-bottom: 14px;
  }

  .chest-pulse-text {
    font-size: 1.35rem;
  }

  .chest-rewards-grid {
    gap: 10px;
    margin-top: 14px;
  }
}

/* ── Desktop: better layout balance (homepage stays minimal & clean) ─────── */
@media (min-width: 900px) {
  #home-page .glass-card {
    max-width: 780px;
    padding: 28px 28px 24px;
  }

  .home-cards-container {
    gap: 16px;
    margin-top: 20px;
  }

  .home-premium-row {
    max-width: 780px;
    gap: 16px;
    margin-top: 16px;
  }
}

/* ── Mobile: fixed top bars become a full-width app bar and page content
      is pushed below them instead of sliding underneath ────────────────── */
@media (max-width: 768px) {

  /* Bar edges line up with the page content (.container padding: 12px) */
  .top-left-header {
    top: 10px;
    left: 12px;
    right: 12px;
    gap: 10px;
    justify-content: space-between;
  }

  /* Let the user card shrink instead of pushing the icon buttons off-screen */
  .top-left-header .user-bar {
    min-width: 0;
  }

  /* Logged out: the icon buttons are hidden, so the login card spans the
     full bar width; content stays left-aligned like the logged-in card */
  .top-left-header .user-bar.logged-out {
    flex: 1;
  }

  /* All icon buttons are hidden when logged out, but their group still
     contributes a flex gap — drop it so the card is truly full width */
  .top-left-header .user-bar.logged-out+div {
    display: none;
  }

  .user-bar-info {
    min-width: 0;
  }

  #teacher-top-bar,
  #dev-top-bar {
    top: 10px !important;
    left: 12px !important;
    right: 12px !important;
    justify-content: space-between;
  }

  #teacher-top-bar .user-bar,
  #dev-top-bar .user-bar {
    min-width: 0;
    flex-shrink: 1 !important;
  }

  body:has(#top-left-header:not(.hidden)) .container {
    padding-top: 84px;
  }

  /* Slightly taller band on mobile since the bar spans the full width */
  body:has(#teacher-top-bar:not(.hidden)) .container,
  body:has(#dev-top-bar:not(.hidden)) .container {
    padding-top: 84px;
  }
}

/* ── Small phones: prominent user card, scaled buttons & premium cards ───── */
@media (max-width: 480px) {

  /* Bar edges line up with the tighter content padding (8px) */
  .top-left-header {
    left: 8px;
    right: 8px;
  }

  #teacher-top-bar,
  #dev-top-bar {
    left: 8px !important;
    right: 8px !important;
  }

  /* Phones: user card goes full width (same as page content) and the three
     icon buttons drop to their own row below it */
  .top-left-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .top-left-header .user-bar {
    width: 100%;
  }

  /* The tablet row layout stretches the guest card with flex:1 — in this
     column layout that would flex its HEIGHT instead, so switch it off and
     let the card keep its fixed height like the logged-in one */
  .top-left-header .user-bar.logged-out {
    flex: 0 0 auto;
  }

  /* Icon row (rewards/shop/notifications) sits left, and collapses away
     while the user scrolls; the arrow tab under the avatar brings it back.
     Animated via max-height/opacity (same easing/duration as
     .floating-left-controls' own show/hide) rather than an instant
     display:none, so the buttons fade and tuck away instead of vanishing. */
  .top-left-header>div:last-of-type {
    justify-content: flex-start;
    max-height: 64px;
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    /* The row's own overflow:hidden (needed for the max-height collapse
       below) would otherwise clip two things that sit outside the buttons'
       own box: .notification-badge (top:-4px/right:-4px) and the buttons'
       signature flat "3D" bottom shadow (box-shadow: 0px 4px 0px <color>,
       no blur) — this padding gives both room. */
    padding: 4px 4px 6px 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  }

  .top-left-header.icons-collapsed>div:last-of-type {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }

  /* Pin the arrow tab a fixed distance below the user card (56px card height
     + 6px gap) instead of the default `top: calc(100% + 6px)`, which is
     relative to #top-left-header's own rendered height — that height still
     includes the icon row's (collapsing) box via the max-height/padding
     transition above, so the percentage-based offset would drift as the row
     animates instead of sitting still directly under the avatar. */
  .header-icons-toggle {
    top: 62px;
  }

  .top-left-header.icons-collapsed:not(:has(.user-bar.logged-out)) .header-icons-toggle {
    display: flex;
  }

  /* Roomier card now that it no longer shares the row with the buttons */
  .user-bar {
    height: 56px;
    box-sizing: border-box;
    padding: 0 14px 0 7px;
    gap: 10px;
  }

  .user-bar-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.3rem;
    /* Flush with the card's outer left edge (4px border + 7px padding) */
    margin-left: -11px;
  }

  .user-bar-name {
    max-width: 50vw;
    font-size: 0.95rem;
  }

  .user-bar-xp-bar {
    width: 110px;
  }

  /* Taller header band: card row + button row (logged in only) */
  body:has(#top-left-header:not(.hidden)) .container {
    padding-top: 130px;
  }

  body:has(#top-left-header:not(.hidden) .user-bar.logged-out) .container {
    padding-top: 84px;
  }

  #open-rewards-btn,
  #open-shop-btn,
  #open-notifications-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #open-rewards-btn i,
  #open-shop-btn i,
  #open-notifications-btn i {
    font-size: 1.1rem !important;
  }

  .home-card-btn-wide {
    padding: 14px 16px;
    gap: 12px;
  }

  .home-card-btn-wide .card-bg-icon {
    font-size: 5rem;
    bottom: -16px;
  }

  .home-card-btn-wide .card-icon-badge {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .teacher-premium-tag,
  .dev-premium-tag {
    font-size: 0.55rem;
    padding: 3px 7px;
  }

  /* Marketplace filter selects: full-width stack instead of a cramped 50/50
     row — halving a compact 140px-floor select left almost no room for its
     label text ("All Categories" → "All Cat…") */
  .marketplace-search-row select.form-control,
  .marketplace-search-row .csd-wrapper.csd-compact {
    flex: 1 1 100%;
    width: 100% !important;
    min-width: 0 !important;
  }

  .marketplace-search-row .csd-wrapper.csd-compact .csd-trigger {
    justify-content: space-between;
  }
}

/* Fallback for browsers without :has() — keep the old in-card clearance so
   the fixed teacher/dev bars never cover content */
@supports not (selector(body:has(a))) {

  #teacher-dashboard-page .glass-card,
  #dev-first-session-page .glass-card,
  #dev-session-page .glass-card,
  #dev-analytics-page .glass-card {
    padding-top: 80px;
  }
}

/* ── Dev Mode: Ask the Chat poll percentages ─────────────────────────────── */
.dev-answer-poll-pct {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(96, 165, 250, 0.18);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.35);
  vertical-align: middle;
}

/* Ask the Chat: A/B/C/D letter badge on each answer + the "comment to vote" instruction */
.dev-answer-letter {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(139, 92, 246, 0.22);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.4);
  vertical-align: middle;
}

/* ── Player Instruction / Chat Poll Banner (Normal + Live Dev Mode) ───────── */
@keyframes devBannerFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.dev-instruction-banner {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-secondary);
  background: rgba(139, 92, 246, 0.06);
  border: 1.5px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  padding: 8px 14px;
  margin: 0 0 10px;
}

/* Toggled by JS (never baked into the base rule) so the fade can be replayed
   on a persistent element (Live Preview) that's updated in place rather than
   re-inserted into the DOM — see renderDevPreviewInstructionBanner(). */
.dev-instruction-banner.dev-banner-animate {
  animation: devBannerFadeIn 0.3s ease;
}

.dev-instruction-banner.dev-chat-poll-banner {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.45);
  padding: 10px 14px;
}

.dev-chat-poll-banner-title {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #a78bfa;
}

.dev-chat-poll-banner-sub {
  font-size: 0.78rem;
  font-weight: 600;
  color: #a78bfa;
  opacity: 0.9;
  margin-top: 1px;
}

.dev-chat-poll-banner-countdown {
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 3px;
  color: var(--text-secondary);
}

@media (max-width: 480px) {
  .dev-instruction-banner {
    font-size: 0.75rem;
    padding: 7px 10px;
  }
}

/* ── Very small phones: bar edges follow the 4px content padding ─────────── */
@media (max-width: 360px) {
  .top-left-header {
    left: 4px;
    right: 4px;
  }

  #teacher-top-bar,
  #dev-top-bar {
    left: 4px !important;
    right: 4px !important;
  }
}

/* ── Modals: keep the desktop rounding everywhere; full-screen on phones ─── */
@media (max-width: 768px) {

  /* Same 28px outer radius as desktop — the inner ring is 20px at every
     size, so the reduced mobile radii never matched it */
  .modal-content {
    border-radius: 28px;
    margin: 0;
  }
}

@media (max-width: 480px) {

  /* Phones: small overlay padding keeps the modal's rounded corners readable
     even when a dialog grows to fill the screen, with extra room below for
     the drop shadow */
  .modal-container,
  #join-game-page.active {
    padding: 8px 8px 16px;
  }

  /* Adaptive by default: small/medium dialogs (confirm, delete, purchase,
     login/register/settings forms) size to their own content instead of
     always filling the screen — a one-line "Delete this quiz?" confirm no
     longer opens as a mostly-empty full-screen sheet. Content taller than
     the viewport still caps out at max-height and scrolls internally via
     .modal-body's own overflow-y:auto, same as before. */
  .modal-content {
    height: auto;
    max-height: 100%;
  }

  /* Large/variable-content dialogs opt back into filling the screen: Shop,
     Rewards and the session-review modals switch between tabs whose content
     heights differ a lot (a handful of VIP perks vs. a full lifelines grid,
     a 7-day streak row vs. a referrals list) — leaving them adaptive would
     resize the whole dialog on every tab click. Legal docs are always long
     enough to need the full screen. */
  #shop-modal .modal-content,
  #rewards-modal .modal-content,
  #teacher-session-modal .modal-content,
  #cls-session-review-modal .modal-content,
  .legal-modal .modal-content {
    height: 100%;
  }

  /* Full-height dialogs: the inner scroll areas drop their fixed desktop
     caps (inline styles) and use all the space the phone gives them */
  #shop-modal .modal-body,
  #notifications-list,
  #referrals-list-container {
    max-height: none !important;
  }

  /* Guest username prompt: a bottom sheet sized to its content */
  #modal-container:has(#guest-username-input) {
    align-items: flex-end;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEV MODE — Preview gameplay (interstitial, final scores) & gift effects
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Between-questions leaderboard interstitial ───────────────────────────────
   The container, header and rows all reuse Normal Mode's leaderboard classes
   (.glass-card, .leaderboard, .lb-header-title, .leaderboard-row) — only the
   entry animation and the "Next question in" line are dev-specific. */
.dev-preview-interstitial {
  width: 100%;
  animation: devInterstitialIn 0.35s ease;
}

@keyframes devInterstitialIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Final scores reuse Normal Mode's endgame styles: .endgame-card, .podium,
   .endgame-lb-header and the shared #final-leaderboard list rules (see the
   #dev-final-scores selectors alongside them near the top of this file). */

/* ── Gift ticker (recent gifts feed, bottom-left of preview) ──────────────── */
.dev-gift-ticker {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  z-index: 5;
  pointer-events: none;
  max-width: 260px;
}

.dev-gift-ticker-entry {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #e2e8f0;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  animation: devTickerIn 0.3s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.6s ease;
}

.dev-gift-ticker-entry.fading {
  opacity: 0;
}

@keyframes devTickerIn {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEV MODE — Host Guide overlay (viewer gift/effect legend + host editor)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Viewer-facing overlay (read-only, part of the stream capture) ──────────
   Fixed dark glass chips regardless of app theme — same treatment as the gift
   ticker/spectator badge, which are always legible over the live gameplay bg. */
.dev-guide-overlay {
  position: absolute;
  top: 74px;
  left: 16px;
  z-index: 4;
  max-width: 280px;
  max-height: min(60vh, 420px);
  pointer-events: none;
}

.dev-guide-overlay.hidden {
  display: none;
}

.dev-guide-overlay-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: inherit;
  padding-right: 2px;
}

.dev-guide-overlay-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 12px;
  padding: 7px 12px;
  backdrop-filter: blur(6px);
  animation: devTickerIn 0.3s ease;
}

.dev-guide-overlay-thumb {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.1rem;
}

.dev-guide-overlay-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dev-guide-overlay-text {
  min-width: 0;
}

/* Collapse chip — desktop/tablet keep the guide always expanded (unchanged
   design), this only ever becomes visible/interactive under the mobile
   breakpoint below. Needs its own pointer-events since the overlay itself is
   pointer-events:none so it never blocks taps on the quiz/answers beneath it. */
.dev-guide-overlay-toggle {
  display: none;
}

.dev-guide-overlay-title {
  color: #f1f5f9;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dev-guide-overlay-subtitle {
  color: #a78bfa;
  font-weight: 600;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Host editor drawer — real app UI, so it follows the theme like the rest
   of the app chrome (unlike the always-dark overlay above). ──────────────── */
.dev-guide-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 90vw;
  z-index: 20;
  background: var(--card-bg);
  border-left: 1.5px solid var(--input-border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.25s ease;
}

.dev-guide-panel.hidden {
  display: none;
}

.dev-guide-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1.5px solid var(--input-border);
  flex-shrink: 0;
}

.dev-guide-panel-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dev-guide-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
}

.dev-guide-add-btn {
  width: 100%;
  margin-bottom: 14px;
}

.dev-guide-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 32px 12px;
  font-size: 0.9rem;
}

.dev-guide-empty i {
  font-size: 1.8rem;
  opacity: 0.5;
  margin-bottom: 10px;
  display: block;
}

.dev-guide-empty.hidden {
  display: none;
}

.dev-guide-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dev-guide-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-bg);
  border: 1.5px solid var(--input-border);
  border-radius: 12px;
  padding: 8px 10px;
}

.dev-guide-row.dragging {
  opacity: 0.4;
}

.dev-guide-row.drag-over {
  border-color: var(--primary);
}

.dev-guide-drag-handle {
  flex-shrink: 0;
  color: var(--text-secondary);
  cursor: grab;
  padding: 4px;
  touch-action: none;
}

.dev-guide-row-thumb {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(128, 128, 128, 0.15);
  color: var(--text-secondary);
}

.dev-guide-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dev-guide-row-text {
  flex: 1;
  min-width: 0;
}

.dev-guide-row-title {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dev-guide-row-subtitle {
  color: var(--text-secondary);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fallback label for an image-only item (no title/subtitle) in the host's
   editor list, so the row doesn't just show a thumb with nothing next to it. */
.dev-guide-row-untitled {
  font-style: italic;
  font-weight: 500;
  opacity: 0.7;
}

.dev-guide-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.dev-guide-row-actions button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.dev-guide-row-actions button:hover {
  background: rgba(128, 128, 128, 0.15);
  color: var(--text-primary);
}

.dev-guide-row-actions button:disabled {
  opacity: 0.3;
  cursor: default;
}

.dev-guide-row-actions .dev-guide-delete-btn:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.12);
}

/* ── Add/Edit item form (rendered inside the shared app modal) ─────────────── */
.dev-guide-form-thumb {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  border: 1.5px dashed var(--input-border);
  color: var(--text-secondary);
  font-size: 1.6rem;
  margin: 0 auto 10px;
  cursor: pointer;
}

.dev-guide-form-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dev-guide-form-remove-image {
  display: block;
  text-align: center;
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  background: none;
  border: none;
}

@media (max-width: 680px) {
  .dev-guide-panel {
    width: 100%;
    max-width: 100%;
  }

  .dev-guide-overlay {
    top: 64px;
    left: 8px;
    max-width: 62vw;
    max-height: 40vh;
  }

  .dev-guide-overlay-item {
    padding: 5px 9px;
    gap: 7px;
  }

  .dev-guide-overlay-thumb {
    width: 26px;
    height: 26px;
    font-size: 0.9rem;
  }

  .dev-guide-overlay-title {
    font-size: 0.75rem;
  }

  .dev-guide-overlay-subtitle {
    font-size: 0.68rem;
  }

  /* Compact floating chip, collapsible so the guide never has to sit on top of
     the question/answers on a phone screen. */
  .dev-guide-overlay-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    pointer-events: auto;
    margin-bottom: 6px;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid rgba(167, 139, 250, 0.35);
    background: rgba(15, 23, 42, 0.82);
    color: #f1f5f9;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
  }

  .dev-guide-overlay-toggle-chevron {
    font-size: 0.65rem;
    opacity: 0.8;
  }

  .dev-guide-overlay.collapsed .dev-guide-overlay-list {
    display: none;
  }

  /* Lighter/shorter entrance animation on mobile — same keyframe, just less of
     it, so re-renders (add/edit/reorder) stay cheap on lower-end phones. */
  .dev-guide-overlay-item {
    animation-duration: 0.15s;
  }
}

/* ── Floating emoji rain ──────────────────────────────────────────────────── */
#dev-emoji-rain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  overflow: hidden;
}

.dev-emoji-float {
  position: absolute;
  bottom: -40px;
  animation: devEmojiFloatUp 3s ease-in forwards;
  opacity: 0;
}

@keyframes devEmojiFloatUp {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(-8deg) scale(0.7);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-88vh) rotate(10deg) scale(1.15);
  }
}

/* ── Gift combo banner — top-center so it never covers the question/answers ── */
.dev-gift-combo-banner {
  position: fixed;
  top: 4%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  z-index: 9999;
  pointer-events: none;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #f97316, #ef4444);
  padding: 10px 26px;
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(239, 68, 68, 0.5);
  opacity: 0;
  text-align: center;
  max-width: min(90vw, 560px);
}

.dev-gift-combo-banner.pop {
  animation: devComboPop 2.6s ease forwards;
}

@keyframes devComboPop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.4);
  }

  12% {
    opacity: 1;
    transform: translateX(-50%) scale(1.12);
  }

  20% {
    transform: translateX(-50%) scale(1);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.92);
  }
}

/* ── Black Hole Like Banner — bottom-right progress counter, native to the
   Dev Preview (see handleDevLikeEvent/renderDevLikeBanner in app.js). Glass
   pill matching the LIVE badge/gift ticker visual language, readable in both
   themes via var(--text-primary)/var(--border-color) rather than hardcoded
   light-mode colors. ──────────────────────────────────────────────────────── */
.dev-like-banner {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9997;
  min-width: 78px;
  padding: 10px 16px;
  border-radius: 16px;
  background: rgba(15, 15, 25, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  pointer-events: none;
  user-select: none;
  /* Collapsed by default — expandDevLikeBanner() toggles .expanded (see
     app.js). width/min-width/box-shadow are the only geometry-affecting
     properties transitioned, kept off the GPU-fast opacity/transform ones
     below so the two animate independently without janking each other. */
  transition: min-width 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.dev-like-banner.hidden {
  display: none;
}

.dev-like-banner.expanded {
  min-width: 190px;
  box-shadow: 0 4px 24px rgba(239, 68, 68, 0.35), 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* Collapsed→expanded pop: a quick scale overshoot layered on top of the width
   transition above, transform-only so it stays GPU-cheap. Only replayed on
   the actual collapsed→expanded transition (see expandDevLikeBanner), not on
   every like while already expanded. */
.dev-like-banner.expand-pop {
  animation: devLikeBannerExpandPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes devLikeBannerExpandPop {
  0% {
    transform: scale(0.97);
  }

  55% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

.dev-like-banner-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
}

.dev-like-banner-heart {
  font-size: 1rem;
  margin-right: 2px;
}

/* Threshold/"Likes" text — only shown while expanded; fades/slides in rather
   than popping so the width change above and this content reveal read as one
   smooth expansion instead of two separate motions. */
.dev-like-banner-sep,
#dev-like-banner-threshold,
.dev-like-banner-suffix {
  opacity: 0;
  max-width: 0;
  display: inline-block;
  overflow: hidden;
  transition: opacity 0.3s ease, max-width 0.35s ease;
}

.dev-like-banner-sep {
  font-weight: 500;
}

.dev-like-banner.expanded .dev-like-banner-sep,
.dev-like-banner.expanded #dev-like-banner-threshold,
.dev-like-banner.expanded .dev-like-banner-suffix {
  opacity: 1;
  max-width: 90px;
}

.dev-like-banner.expanded .dev-like-banner-sep {
  opacity: 0.6;
  max-width: 12px;
}

/* Progress bar + bot attribution line — collapsed to zero height while
   compact, expanding in alongside the row content above. */
.dev-like-banner-track {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, margin-top 0.3s ease;
}

.dev-like-banner.expanded .dev-like-banner-track {
  max-height: 6px;
  opacity: 1;
  margin-top: 6px;
}

.dev-like-banner-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef4444, #f97316, #fbbf24);
  width: 0%;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.dev-like-banner-attr {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.25s ease;
}

.dev-like-banner.expanded .dev-like-banner-attr {
  max-height: 20px;
  opacity: 0.9;
  margin-top: 4px;
}

.dev-like-banner-attr.hidden {
  display: none;
}

.dev-like-banner.pulse .dev-like-banner-row {
  animation: devLikeBannerPulse 0.35s ease;
}

@keyframes devLikeBannerPulse {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
  }
}

/* Session Analytics "Likes" stat — small pulse on every live update so a
   rapid-fire session doesn't look static between polls. inline-block only
   while pulsing so the transform reliably applies without affecting the
   stat's normal inline layout. */
#dev-sess-likes.dev-stat-pulse {
  display: inline-block;
  animation: devLikeBannerPulse 0.35s ease;
}

/* ── Floating TikTok-style hearts — bottom-right origin, drifting up-left with
   slight rotation and fade (transform/opacity only — GPU-friendly, no layout
   thrash even at the maximum concurrent cap). ────────────────────────────── */
.dev-like-hearts {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  overflow: hidden;
}

.dev-like-heart {
  position: absolute;
  bottom: 70px;
  right: 16px;
  opacity: 0;
  animation: devLikeHeartFloat 3s ease-out forwards;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

@keyframes devLikeHeartFloat {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(0.6);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx, -40px), -70vh) rotate(var(--rot, -15deg)) scale(1.1);
  }
}

/* ── Floating Like avatar — one per likeEvent (see spawnDevLikeAvatar), same
   bottom-right origin and fixed/overlay container as the hearts. No rotation
   (a spinning face reads oddly), just drift/fade/scale — GPU-friendly
   transform+opacity only. Looks identical in light/dark mode since it's an
   overlay circle, not page content. ──────────────────────────────────────── */
.dev-like-avatar {
  position: absolute;
  bottom: 74px;
  right: 16px;
  width: 34px;
  height: 34px;
  opacity: 0;
  animation: devLikeAvatarFloat 3s ease-out forwards;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.dev-like-avatar img,
.dev-like-avatar span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: 'Fredoka', sans-serif;
}

@keyframes devLikeAvatarFloat {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx, -30px), -68vh) scale(1.05);
  }
}

/* ── Like Burst combo banner — same visual language as the gift combo banner,
   offset so the two can never overlap if both fire close together. ───────── */
.dev-like-burst-banner {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  z-index: 9999;
  pointer-events: none;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #ec4899);
  padding: 10px 26px;
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(236, 72, 153, 0.5);
  opacity: 0;
  text-align: center;
  max-width: min(90vw, 560px);
}

.dev-like-burst-banner.pop {
  animation: devComboPop 2.4s ease forwards;
}

/* ── Like milestone celebration — center-screen, brief, never blocks gameplay
   (auto-hides in ~3s, same as the gift cheer banners). ────────────────────── */
.dev-like-milestone-banner {
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 9999;
  pointer-events: none;
  font-family: 'Fredoka', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 18px rgba(239, 68, 68, 0.8), 0 0 40px rgba(251, 191, 36, 0.6);
  opacity: 0;
  text-align: center;
}

.dev-like-milestone-banner.pop {
  animation: devLikeMilestonePop 3.2s ease forwards;
}

@keyframes devLikeMilestonePop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }

  25% {
    transform: translate(-50%, -50%) scale(1);
  }

  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
  }
}

@media (max-width: 680px) {
  .dev-like-banner {
    right: 10px;
    bottom: 10px;
    min-width: 64px;
    padding: 8px 12px;
  }

  .dev-like-banner.expanded {
    min-width: 150px;
  }

  .dev-like-banner-row {
    font-size: 0.82rem;
  }

  .dev-like-milestone-banner {
    font-size: 1.4rem;
  }

  .dev-like-burst-banner {
    font-size: 1.1rem;
    padding: 8px 18px;
  }
}

/* ── Lifeline activation banner — independent queue from gifts, sits just
   below the combo banner spot so the two never overlap ────────────────────── */
.dev-lifeline-banner {
  position: fixed;
  top: 12%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  z-index: 9998;
  pointer-events: none;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  padding: 10px 24px;
  border-radius: 999px;
  opacity: 0;
  text-align: center;
  max-width: min(90vw, 560px);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.5);
}

.dev-lifeline-banner.pop {
  animation: devLifelineBannerPop 2.4s ease forwards;
}

@keyframes devLifelineBannerPop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.4);
  }

  12% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }

  20% {
    transform: translateX(-50%) scale(1);
  }

  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.92);
  }
}

/* ── Skip Question community vote banner — persistent (not a fixed-duration pop)
   while a vote is active, with a brief "bump" on the count whenever it updates ──── */
.dev-skip-vote-banner {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%) scale(0.92);
  z-index: 9998;
  pointer-events: none;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  padding: 8px 22px;
  border-radius: 999px;
  opacity: 0;
  text-align: center;
  max-width: min(90vw, 480px);
  background: linear-gradient(135deg, #a855f7, #6366f1);
  box-shadow: 0 8px 28px rgba(139, 92, 246, 0.5);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.dev-skip-vote-banner.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.dev-skip-vote-banner.hidden {
  display: none;
}

#dev-skip-vote-count.bump {
  animation: devSkipVoteBump 0.35s ease-out;
}

@keyframes devSkipVoteBump {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.35);
  }

  100% {
    transform: scale(1);
  }
}

/* Unique per-lifeline effects, keyed to DEV_LIFELINE_REGISTRY's .animation value.
   Applied to the active question card/answers for the lifeline's duration. */
@keyframes devClockParticles {
  0% {
    box-shadow: 0 0 0 rgba(251, 191, 36, 0);
  }

  30% {
    box-shadow: 0 0 32px rgba(251, 191, 36, 0.85);
  }

  100% {
    box-shadow: 0 0 0 rgba(251, 191, 36, 0);
  }
}

#dev-preview-timer-bar.fx-clock-particles {
  animation: devClockParticles 1.4s ease-out;
}

#dev-preview-answer-grid.fx-fade-wrong .answer.ff-hidden {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

@keyframes devQuestionSlideOut {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-60px);
    opacity: 0;
  }
}

#dev-preview-active.fx-question-slide .glass-card,
#dev-preview-active.fx-question-slide #dev-preview-question-text {
  animation: devQuestionSlideOut 0.5s ease-in forwards;
}

@keyframes devGoldenBurst {
  0% {
    box-shadow: 0 0 0 rgba(250, 204, 21, 0);
  }

  25% {
    box-shadow: 0 0 40px rgba(250, 204, 21, 0.9);
  }

  100% {
    box-shadow: 0 0 0 rgba(250, 204, 21, 0);
  }
}

#dev-preview-answer-grid.fx-golden-burst {
  animation: devGoldenBurst 1.6s ease-out;
}

@keyframes devFreezeFrost {
  0% {
    filter: brightness(1) saturate(1);
  }

  25% {
    filter: brightness(1.15) saturate(0.6) hue-rotate(150deg);
  }

  100% {
    filter: brightness(1) saturate(1);
  }
}

#dev-preview-timer-bar.fx-freeze-frost {
  animation: devFreezeFrost 1.4s ease-out;
}

@keyframes devChatPollPulse {
  0% {
    box-shadow: 0 0 0 rgba(99, 102, 241, 0);
  }

  30% {
    box-shadow: 0 0 28px rgba(99, 102, 241, 0.8);
  }

  100% {
    box-shadow: 0 0 0 rgba(99, 102, 241, 0);
  }
}

#dev-preview-answer-grid.fx-chat-poll {
  animation: devChatPollPulse 1.4s ease-out;
}

@keyframes devShieldFlash {
  0% {
    box-shadow: 0 0 0 rgba(56, 189, 248, 0);
  }

  30% {
    box-shadow: 0 0 28px rgba(56, 189, 248, 0.8);
  }

  100% {
    box-shadow: 0 0 0 rgba(56, 189, 248, 0);
  }
}

#dev-preview-active.fx-shield-flash {
  animation: devShieldFlash 1.4s ease-out;
}

/* ── Multi-topic chip list (create/edit game page) ─────────────────────────── */
.dg-topics-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.dg-topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: var(--text-primary, #e2e8f0);
  border-radius: 999px;
  padding: 5px 8px 5px 14px;
  font-size: 0.85rem;
  font-weight: 600;
}

.dg-topic-chip-remove {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.75rem;
}

.dg-topic-chip-remove:hover {
  opacity: 1;
  background: rgba(139, 92, 246, 0.25);
}

/* ── Per-lifeline enable/disable toggles (create/edit game page) ───────────── */
.dg-lifeline-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dg-lifeline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}

.dg-lifeline-toggle input[type="checkbox"] {
  width: auto;
  min-height: auto;
}

.dg-lifeline-open-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #34d399;
  background: rgba(52, 211, 153, 0.15);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 2px;
}

/* ── Question source toggle (AI Topics vs Upload File — create/edit game page) ── */
.dg-source-toggle {
  display: flex;
  gap: 8px;
}

.dg-source-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dg-source-btn:hover {
  border-color: rgba(139, 92, 246, 0.4);
}

.dg-source-btn.active {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.5);
  color: var(--text-primary, #e2e8f0);
}

/* ── Gift tier editor rows (create/edit game page) ────────────────────────── */
.dg-gift-tier-header,
.dg-gift-tier-row {
  display: grid;
  grid-template-columns: 64px 1fr 96px 42px 34px;
  gap: 8px;
  align-items: center;
}

.dg-gift-tier-header {
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0 2px;
  margin-bottom: 4px;
}

.dg-gift-tier-row {
  margin-bottom: 8px;
}

.dg-gift-tier-row .form-control {
  padding: 8px 10px;
  font-size: 0.9rem;
  min-height: auto;
}

.dg-gift-tier-row .dg-tier-emoji {
  text-align: center;
}

.dg-tier-celebrate-lbl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: var(--warning);
  font-size: 0.85rem;
}

.dg-tier-celebrate-lbl input {
  accent-color: var(--warning);
  cursor: pointer;
}

.dg-tier-remove-btn {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.15s;
}

.dg-tier-remove-btn:hover {
  background: rgba(239, 68, 68, 0.25);
}

@media (max-width: 480px) {

  .dg-gift-tier-header,
  .dg-gift-tier-row {
    grid-template-columns: 52px 1fr 72px 36px 30px;
    gap: 5px;
  }
}

/* ─── Dev preview: normal-quiz-style game card ────────────────────────────── */
.dev-preview-game-card {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* ── FEATURE 2: Question Card Idle Animation — on by default (dg-card-idle-
   anim-enabled). Gentle "breathing" float while a question is on screen and
   waiting for answers; toggled on #dev-preview-modal by applyDevPreviewUI()
   so it only runs during the 'active' state. transform-only, combined with
   the card's own fadeIn/cornerMotion/frameEntrance animations rather than
   replacing them (see the shared .glass-card/::after rules above). */
#dev-preview-modal.dev-card-idle-on #dev-preview-active .dev-preview-game-card {
  animation: fadeIn 0.4s ease-out, devCardIdleBreathe 6s ease-in-out infinite;
}

@keyframes devCardIdleBreathe {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -5px, 0) scale(1.012);
  }
}

.dev-preview-game-card h2 {
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  margin-bottom: 16px;
}

/* Preview answers are display-only: block the global .answer click handler */
.dev-preview-game-card .answer {
  pointer-events: none;
  cursor: default;
}

/* 50/50-eliminated answers */
.dev-preview-game-card .answer.ff-hidden {
  opacity: 0.25;
  filter: grayscale(0.8);
  text-decoration: line-through;
}

/* Ask-the-Chat poll percentage chip inside an answer card */
.dev-preview-game-card .dev-answer-poll-pct {
  position: absolute;
  top: 6px;
  right: 8px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ── Dev Mode: vertical color-coded A/B/C/D panel on the left of each answer.
   Fixed-width by default; Ask the Chat polling grows its width inline (see
   applyDevPreviewPoll in app.js) to represent live vote share, animated by
   the transition below. The panel is cleared by rebuilding the grid on the
   next question, which drops the inline width back to this fixed default. */
.dev-preview-game-card .answer {
  overflow: hidden;
  padding-left: 54px;
  /* Stacking context: without it the negative-z .dev-answer-poll-fill paints
     behind this card's own opaque background and is never visible */
  z-index: 0;
}

.dev-preview-game-card .answer:nth-child(1) {
  --dev-answer-color: var(--game-red-border);
}

.dev-preview-game-card .answer:nth-child(2) {
  --dev-answer-color: var(--game-blue-border);
}

.dev-preview-game-card .answer:nth-child(3) {
  --dev-answer-color: var(--game-orange-border);
}

.dev-preview-game-card .answer:nth-child(4) {
  --dev-answer-color: var(--game-purple-border);
}

/* Fixed-size always (2026-07-18) — this used to also carry the live poll's
   vote-share width (a 0% option shrank its own A/B/C/D badge down to
   nothing), now a completely separate element (.dev-answer-poll-fill below)
   owns that animation so the letter is never at risk of disappearing. */
.dev-preview-game-card .dev-answer-letter {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40px;
  margin: 0;
  padding: 0 0 0 13px;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: var(--dev-answer-color, #64748b);
  z-index: 0;
}

/* Live poll vote-share fill — same solid color as the A/B/C/D badge so it
   reads as the badge itself growing from the left (z-index below the text,
   above the card background), independent of the fixed-width badge above. */
.dev-answer-poll-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: var(--dev-answer-color, #64748b);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: -1;
}

/* Timer bar turns red when time is nearly out — shared by the Dev Mode
   preview bar and the main gameplay bar (Quick Play, Create Quiz, Teacher/
   Classroom Mode, Multiplayer) so all timers use the same warning style. */
.timer.timer-low {
  background: linear-gradient(180deg, #FF7A7A 0%, #E53935 100%);
  transition: background 0.4s ease;
}

/* Badges row under the answers — collapsed entirely while no badge is
   visible so the card doesn't reserve an empty strip below the answers */
.dev-preview-game-card .answers {
  margin-bottom: 0;
}

.dev-preview-badges-row {
  display: none;
  align-items: center;
  gap: 10px;
}

.dev-preview-badges-row:has(.dev-preview-ff-badge:not(.hidden)) {
  display: flex;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .dev-preview-game-card {
    max-width: 100%;
  }

  .dev-preview-game-card .answer {
    min-height: 56px;
    padding: 14px 16px 14px 46px;
    font-size: 14px;
  }

  .dev-preview-game-card .dev-answer-letter {
    width: 32px;
    padding-left: 10px;
    font-size: 0.9rem;
  }
}

/* ─── Session ID rotation security notice ─────────────────────────────────── */
.dev-session-id-notice {
  margin-top: 6px;
  max-width: 460px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 10px;
  padding: 7px 11px;
  animation: devNoticeIn 0.35s ease;
}

.dev-session-id-notice i {
  margin-right: 4px;
}

@keyframes devNoticeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Footer Links (Privacy / Terms) ===== */
.app-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 14px;
  font-size: 0.8rem;
  transition: margin-bottom 0.25s ease;
}

.app-footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.app-footer-links a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.app-footer-dot {
  color: var(--text-secondary);
  opacity: 0.6;
}

/* ===== Legal Modal (Privacy Policy / Terms of Service) ===== */
.legal-modal-body h4 {
  margin: 18px 0 6px;
  font-size: 1rem;
  color: var(--text-primary);
}

.legal-modal-body h4:first-of-type {
  margin-top: 8px;
}

.legal-modal-body p {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ===== Dev Mode — Black Hole Global Lifeline ===== */
/* Full-screen takeover: the vortex grows out of the center, the visible content
   is sucked into it, the screen goes fully black, then the lobby appears as the
   overlay evaporates. Above every other layer (max elsewhere is 99999). */
.dev-black-hole-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: devBlackHoleDarken 2.6s ease-in forwards;
}

@keyframes devBlackHoleDarken {
  0% {
    background: rgba(0, 0, 0, 0);
  }

  55% {
    background: rgba(2, 2, 10, 0.55);
  }

  100% {
    background: #000;
  }
}

.dev-black-hole-vortex {
  position: relative;
  width: 30vmax;
  height: 30vmax;
  animation: devBlackHoleGrow 2.6s cubic-bezier(0.55, 0, 0.65, 1) forwards;
}

@keyframes devBlackHoleGrow {
  0% {
    transform: scale(0) rotate(0deg);
  }

  35% {
    transform: scale(0.55) rotate(180deg);
  }

  100% {
    transform: scale(6) rotate(540deg);
  }
}

/* Swirling accretion disc */
.dev-black-hole-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #1e1b4b, #6366f1, #a78bfa, #0f172a, #4338ca, #1e1b4b);
  filter: blur(6px);
  animation: devBlackHoleSpin 0.9s linear infinite;
}

.dev-black-hole-ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 3px solid rgba(167, 139, 250, 0.8);
  box-shadow: 0 0 40px 12px rgba(99, 102, 241, 0.65), inset 0 0 30px rgba(167, 139, 250, 0.5);
  animation: devBlackHoleSpin 1.6s linear infinite reverse;
}

/* Event horizon */
.dev-black-hole-core {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 60px 18px rgba(0, 0, 0, 0.9);
}

@keyframes devBlackHoleSpin {
  to {
    transform: rotate(360deg);
  }
}

.dev-black-hole-label {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(1.6rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: 4px;
  color: #c4b5fd;
  text-shadow: 0 0 18px rgba(139, 92, 246, 0.9);
  white-space: nowrap;
  animation: devBlackHoleLabel 2.6s ease forwards;
}

@keyframes devBlackHoleLabel {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.6);
  }

  15% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
}

/* The on-screen quiz content spirals into the vortex */
.dev-black-hole-suck {
  transform-origin: 50% 50%;
  animation: devBlackHoleSuck 2.2s cubic-bezier(0.6, -0.1, 0.8, 0.4) forwards;
}

@keyframes devBlackHoleSuck {
  0% {
    transform: scale(1) rotate(0deg);
    filter: blur(0);
    opacity: 1;
  }

  100% {
    transform: scale(0.02) rotate(540deg);
    filter: blur(6px);
    opacity: 0;
  }
}

/* Teardown: the lobby is already visible behind the overlay — keep the screen
   black (the darken animation's fill is replaced by this class) and fade away */
.dev-black-hole-overlay.dev-black-hole-fade-out {
  background: #000;
  animation: devBlackHoleFadeOut 0.9s ease forwards;
}

@keyframes devBlackHoleFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE REFINEMENT — phones only (≤600px / ≤480px / ≤360px).
   Desktop and tablet layouts are intentionally untouched. The !important
   flags below exist solely to override inline styles in index.html/app.js.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

  /* Profile: 5 tabs can't fit one row on phones — wrap instead of clipping */
  .profile-tabs {
    flex-wrap: wrap;
  }

  /* Teacher/classroom results (5 columns) and API docs tables scroll inside
     their own box instead of stretching the modal/page past the viewport */
  .teacher-results-table,
  .dev-docs-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {

  /* Dialogs carry an inline min-width:320px that overflows small phones once
     the 8px overlay padding is subtracted — let them shrink with the screen */
  .modal-container .modal-content,
  #join-game-page .modal-content {
    min-width: 0 !important;
  }

  /* Marketplace grids ask for 280px tracks (inline styles) but the card's
     inner width is ~250px on a 320px phone — single column instead */
  .market-grid,
  #market-skeleton-loader>div {
    grid-template-columns: 1fr !important;
  }

  /* Classroom overview: 4 stat tiles across are unreadable on phones — 2×2 */
  #cls-overview-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Classroom quiz-create paired option/AI fields stack on phones */
  .cls-two-col {
    grid-template-columns: 1fr !important;
  }

  /* Endless-mode "Next Game Starts In..." pill is nowrap — shrink it so the
     whole pill stays inside a 320px viewport */
  #endless-countdown-overlay {
    gap: 8px !important;
    padding: 8px 14px !important;
    max-width: calc(100vw - 24px);
  }

  #endless-countdown-overlay>div:first-child {
    font-size: 0.85rem !important;
  }

  #endless-countdown-number {
    font-size: 1.3rem !important;
  }

  /* API docs: long literal strings (Bearer header, URLs, JSON) wrap instead
     of widening the page */
  .dev-docs-callout,
  #dev-docs-body code,
  #dev-docs-base-url {
    overflow-wrap: anywhere;
  }

  /* Connection pill and the floating Back/Top controls both live bottom-left;
     on phones lift the pill above the controls whenever they're on screen */
  body:has(.floating-left-controls:not(.hidden)) .connection-status {
    bottom: 114px;
    left: 12px;
  }
}

@media (max-width: 360px) {

  /* Gift tier editor: tighten the fixed columns further so the row grid
     (emoji · name · min coins · star · remove) fits a 320px screen */
  .dg-gift-tier-header,
  .dg-gift-tier-row {
    grid-template-columns: 44px 1fr 62px 30px 24px;
    gap: 4px;
  }
}