/* quiz.css — Quiz mode styles: settings, board, themes, answer grid */

/* Shimmer animation for loading image placeholders */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

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

/* Quiz Mode Styles */
#quiz-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(16px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}

#quiz-settings-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.quiz-settings-panel {
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 2rem;
  padding: 2.5rem;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  text-align: left;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.6), 0 0 40px rgba(139, 92, 246, 0.1);
  transform: translateY(24px);
  transition: transform 0.4s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

#quiz-settings-overlay.show .quiz-settings-panel {
  transform: translateY(0);
}

.quiz-subject-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid rgba(139, 92, 246, 0.2);
  background: rgba(30, 41, 59, 0.7);
  color: #94a3b8;
  user-select: none;
  white-space: nowrap;
}

.quiz-subject-chip.active {
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.7);
  color: #c4b5fd;
}

.quiz-subject-chip:hover:not(.active) {
  border-color: rgba(139, 92, 246, 0.4);
  color: #e2e8f0;
}

/* Education level buttons — compact pill grid */
.edu-level-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.2rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(100, 116, 139, 0.3);
  background: rgba(30, 41, 59, 0.6);
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.edu-level-btn:hover:not(.active) {
  border-color: rgba(139, 92, 246, 0.4);
  color: #e2e8f0;
  background: rgba(139, 92, 246, 0.1);
}

.edu-level-btn.active {
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.7);
  color: #c4b5fd;
}

/* Theme selection chips */
.quiz-theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid rgba(139, 92, 246, 0.15);
  background: rgba(30, 41, 59, 0.7);
  color: #94a3b8;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  justify-content: flex-start;
}

.quiz-theme-chip.active {
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.7);
  color: #c4b5fd;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
}

.quiz-theme-chip:hover:not(.active) {
  border-color: rgba(139, 92, 246, 0.4);
  color: #e2e8f0;
}

/* Question source pill (2-col grid toggle) */
.qsrc-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.5rem;
  border-radius: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid rgba(139, 92, 246, 0.15);
  background: rgba(30, 41, 59, 0.7);
  color: #94a3b8;
  user-select: none;
}

.qsrc-pill.active-source {
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.7);
  color: #c4b5fd;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
}

.qsrc-pill:hover:not(.active-source) {
  border-color: rgba(139, 92, 246, 0.4);
  color: #e2e8f0;
}

/* Theme-specific card styles — DISABLED for answer boxes per user request.
       All themes now use the same dark slate boxes with white text.
       Theme classes are still added to cards for potential future use
       (e.g., decorations, emojis) but no background/color overrides. */

/* ── Kung Fu Panda celebration toast ──────────────────────────────────── */
@keyframes kfpPopIn {
  0% {
    opacity: 0;
    scale: 0;
    rotate: -12deg
  }

  60% {
    opacity: 1;
    scale: 1.18;
    rotate: 4deg
  }

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

@keyframes kfpPopOut {
  0% {
    opacity: 1;
    scale: 1
  }

  100% {
    opacity: 0;
    scale: 0;
    rotate: 10deg
  }
}

@keyframes kfpFloat {

  0%,
  100% {
    translate: 0 0;
    rotate: 0deg
  }

  50% {
    translate: 0 -22px;
    rotate: -4deg
  }
}

@keyframes kfpGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 20px rgba(220, 38, 38, 0.7))
  }

  50% {
    filter: drop-shadow(0 0 48px rgba(251, 191, 36, 1))
  }
}

#kfp-toast {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
}

.kfp-toast-char {
  position: absolute;
  width: clamp(160px, 32vw, 420px);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%);
}

#kfp-toast.show .kfp-toast-char {
  animation: kfpPopIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    kfpFloat 1.8s ease-in-out 0.55s infinite,
    kfpGlow 2s ease-in-out 0.55s infinite;
}

#kfp-toast.hide .kfp-toast-char {
  animation: kfpPopOut 0.35s ease-in forwards !important;
}

/* Ben & Holly celebration toast — characters placed by JS */
@keyframes bhPopIn {
  0% {
    opacity: 0;
    scale: 0;
    rotate: -8deg
  }

  65% {
    opacity: 1;
    scale: 1.12;
    rotate: 3deg
  }

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

@keyframes bhPopOut {
  0% {
    opacity: 1;
    scale: 1
  }

  100% {
    opacity: 0;
    scale: 0;
    rotate: 6deg
  }
}

@keyframes bhFloat {

  0%,
  100% {
    translate: 0 0;
    rotate: 0deg
  }

  50% {
    translate: 0 -18px;
    rotate: 3deg
  }
}

@keyframes bhGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 18px rgba(255, 220, 60, 0.6))
  }

  50% {
    filter: drop-shadow(0 0 42px rgba(255, 220, 60, 1))
  }
}

#bh-toast {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
}

.bh-toast-char {
  position: absolute;
  width: clamp(160px, 32vw, 400px);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%);
}

#bh-toast.show .bh-toast-char {
  animation: bhPopIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    bhFloat 1.6s ease-in-out 0.55s infinite,
    bhGlow 1.8s ease-in-out 0.55s infinite;
}

#bh-toast.hide .bh-toast-char {
  animation: bhPopOut 0.35s ease-in forwards !important;
}

/* legacy hidden element */
#quiz-ben-elf {
  display: none;
}

/* ── Quiz viewport-fill layout ──────────────────────────────────────────
     Applied to <body> when entering quiz mode so everything sits in one
     screen with no scrolling needed.
  ─────────────────────────────────────────────────────────────────────── */
body.quiz-active {
  height: 100dvh;
  padding: 0.25rem !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center !important;
}

body.quiz-active header {
  margin-bottom: 0.25rem;
}

/* ── Image-sidebar mode: header moves to a narrow left strip ───────────── */
body.quiz-img-sidebar {
  flex-direction: row !important;
  padding: 0 !important;
  align-items: stretch !important;
  gap: 0;
}

body.quiz-img-sidebar header {
  width: 56px;
  min-width: 56px;
  height: 100dvh;
  flex-shrink: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  background: rgba(15, 23, 42, 0.96);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 10;
  gap: 0;
}

body.quiz-img-sidebar header>* {
  display: none;
}

/* hide all header children */
#quiz-sidebar-controls {
  display: none;
  /* hidden by default */
}

body.quiz-img-sidebar #quiz-sidebar-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 8px 0;
  gap: 0;
}

body.quiz-img-sidebar main {
  flex: 1;
  min-width: 0;
  height: 100dvh;
  max-width: none !important;
  padding: 0;
  align-items: stretch !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
  width: auto !important;
}

.quiz-sidebar-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  background: transparent;
  border: none;
  flex-shrink: 0;
}

.quiz-sidebar-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.quiz-sidebar-logo {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #60a5fa;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 4px 0;
  user-select: none;
}

.quiz-sidebar-user {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.25);
  border: 1px solid rgba(99, 102, 241, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #a78bfa;
}

body.quiz-active nav#category-tabs {
  display: none !important;
}

/* main fills remaining height after header — must be a flex column so children use flex:1 */
body.quiz-active main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  align-items: stretch !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* view-quiz: outer CSS Grid with auto/1fr rows.
     Guarantees the answer grid gets a truly definite height for 1fr rows. */
body.quiz-active #view-quiz {
  flex: 1;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  width: 100%;
  max-width: none !important;
  /* Remove side padding to maximize width */
  padding: 0;
  box-sizing: border-box;
}

/* Question row: shrinks to content, never taller than 50% of viewport */
body.quiz-active #view-quiz>.quiz-question-section {
  width: 100%;
  max-width: 100% !important;
  margin-bottom: 8px;
  max-height: 50vh;
  overflow: hidden;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* The inner question row is flex-column when image present (set by JS) */
/* Question image inside questionContainer: explicit 25dvh height set by JS */
body.quiz-active .quiz-question-img-wrap {
  border-radius: 10px;
  overflow: hidden;
}

body.quiz-active .quiz-question-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* scale to fit — no cropping */
  border-radius: 10px;
  display: block;
}

/* Answer card images: capped at 25vh — !important overrides flex grow */
body.quiz-active #quiz-answers-grid>div .quiz-answer-img {
  flex: 0 0 auto;
  min-height: 0;
  max-height: 33vh !important;
  height: 33vh;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}

body.quiz-active #quiz-answers-grid>div .quiz-answer-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}

/* Answer grid: Fills ALL remaining space after the question section */
body.quiz-active #quiz-answers-grid {
  width: 100%;
  max-width: none;
  flex: 1 1 0 !important;
  /* grow to fill remaining height — !important overrides any JS inline height */
  min-height: 0;
  /* allow shrinking below content size */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  align-content: stretch;
  align-items: stretch;
  gap: 16px;
  padding: 0 16px 8px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Answer cards must fill their grid cell */
body.quiz-active #quiz-answers-grid>div.quiz-answer-card {
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box;
}

/* Answer cards: display:flex ensures content is centered when boxes are huge */
.quiz-font-small {
  font-size: 0.875rem;
}

/* text-sm */
.quiz-font-medium {
  font-size: clamp(1.25rem, 3vh, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

/* default-ish */
.quiz-font-large {
  font-size: clamp(1.875rem, 5vh, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
}

.quiz-font-extra-large {
  font-size: clamp(2.5rem, 8vh, 4.5rem);
  font-weight: 900;
  line-height: 1.0;
}

body.quiz-active #quiz-answers-grid>div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 1.5rem;
  box-sizing: border-box;
  text-align: center;
  background: #20293a;
  border: none;
  border-radius: 20px;
  transition: transform 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* Hover effect only when card is NOT answered */
body.quiz-active #quiz-answers-grid>div:not([data-answered]):hover {
  background: #364154;
  transform: scale(1.02);
}

/* Answer text: high contrast per user spec */
body.quiz-active #quiz-answers-grid>div .quiz-answer-text {
  display: block;
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  text-align: center;
  color: #f2f5f9;
}

/* Word-level spans inside the answer text MUST stay inline so text flows on one line.
       text-decoration: none prevents the underline from bleeding into adjacent space spans. */
body.quiz-active #quiz-answers-grid>div .quiz-answer-text span {
  display: inline;
  width: auto;
  white-space: normal;
  text-decoration: none;
}

/* Highlighted word: needs higher specificity than the ID-based rule above */
body.quiz-active #quiz-answers-grid>div .quiz-answer-text span.quiz-word-highlight {
  text-decoration: underline !important;
  text-decoration-color: #06b6d4 !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 4px !important;
}

/* Answer text: scale max font size so it "fills" the tall box */
body.quiz-active #quiz-answers-grid .quiz-answer-text {
  font-size: clamp(1rem, 3.5vh, 2.5rem) !important;
  font-weight: 800 !important;
}

/* Question font scales down to stay compact */
body.quiz-active #quiz-display-question {
  font-size: clamp(1.1rem, 3vw, 2.4rem) !important;
  line-height: 1.2 !important;
  padding: clamp(6px, 1vh, 14px) !important;
}

/* Word spans inside question must be inline for text flow and underlines to work.
       text-decoration: none prevents underline bleeding across adjacent space spans. */
body.quiz-active #quiz-display-question span {
  display: inline !important;
  width: auto !important;
  white-space: normal;
  text-decoration: none !important;
}

/* Highlighted word in question — same specificity fix */
body.quiz-active #quiz-display-question span.quiz-word-highlight {
  text-decoration: underline !important;
  text-decoration-color: #06b6d4 !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 4px !important;
}

/* ── Education Mode Space Maximization ─────────────────────────────────── */
body.education-active #view-education {
  height: 100%;
  flex: 1;
  justify-content: flex-start;
  gap: 0 !important;
  /* Managed by grid sizer */
}

body.education-active #answers-grid {
  display: grid !important;
  align-items: stretch !important;
}

body.education-active #answers-grid>div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

body.quiz-active .quiz-score-row {
  margin-bottom: 0 !important;
}

/* Quiz Win overlay */
#quiz-win-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.97);
  backdrop-filter: blur(20px);
  z-index: 20000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

#quiz-win-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.quiz-win-card {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid rgba(139, 92, 246, 0.4);
  border-radius: 3rem;
  padding: 3.5rem;
  text-align: center;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 0 80px rgba(139, 92, 246, 0.2);
  transform: scale(0.85) translateY(20px);
  transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#quiz-win-overlay.show .quiz-win-card {
  transform: scale(1) translateY(0);
}

/* Quiz correct-answer confetti burst */
@keyframes quizConfettiFly {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(0.4);
    opacity: 0;
  }
}

.quiz-confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 99999;
  animation: quizConfettiFly 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes quizCorrectPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.7);
  }

  70% {
    box-shadow: 0 0 0 22px rgba(167, 139, 250, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(167, 139, 250, 0);
  }
}

.quiz-correct-pulse {
  animation: quizCorrectPulse 0.45s ease-out;
}

.quiz-badge {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  box-shadow: 0 0 50px rgba(139, 92, 246, 0.5);
  animation: quizBadgePulse 2s infinite;
  font-size: 3rem;
}

@keyframes quizBadgePulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 80px rgba(139, 92, 246, 0.7);
  }
}

/* Quiz loading state */
.quiz-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 4rem;
  text-align: center;
}

.quiz-spinner {
  width: 56px;
  height: 56px;
  border: 4px solid rgba(139, 92, 246, 0.2);
  border-top-color: #a855f7;
  border-radius: 50%;
  animation: quizSpin 0.9s linear infinite;
}

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

/* Quiz Settings Overlay & Panel */
#quiz-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#quiz-settings-overlay.show {
  display: flex;
  opacity: 1;
}

.quiz-settings-panel {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  width: 100%;
  max-width: 550px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.5rem;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#quiz-settings-overlay.show .quiz-settings-panel {
  transform: translateY(0);
}

.quiz-theme-chip {
  width: 100%;
  text-align: left;
  padding: 0.85rem 1.25rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
}

.quiz-theme-chip:hover {
  background: rgba(30, 41, 59, 1);
  color: white;
}

.quiz-theme-chip.active {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: white;
  border-color: #a78bfa;
  box-shadow: 0 10px 20px rgba(124, 58, 237, 0.2);
}

.quiz-subject-chip {
  padding: 0.5rem 1rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.quiz-subject-chip.active {
  background: #3b82f6;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Word-level highlighting for VoiceOver */
.quiz-word-highlight {
  text-decoration: underline !important;
  text-decoration-color: #06b6d4 !important;
  /* teal-400 */
  text-decoration-thickness: 3px !important;
  text-underline-offset: 4px !important;
  color: #fff !important;
  transition: all 0.1s ease;
}