/**
 * Ms. Luminara Quiz System - Core Styles
 * 000.0-styles.css
 *
 * Dark Academic Redesign - March 2026
 * "A Victorian study illuminated by firelight"
 */

:root {
  /* ═══════════════════════════════════════════════════════════════
     DARK ACADEMIC COLOR PALETTE
     Warm charcoal, walnut, antique gold, sage, burgundy
     ═══════════════════════════════════════════════════════════════ */

  /* Backgrounds - warm browns instead of cold blues */
  --bg-deep: #1a1612;
  --bg-card: #242019;
  --bg-card-hover: #2d261f;
  --bg-elevated: #322b24;

  /* Primary accent - antique gold (refined amber) */
  --gold: #c9a55c;
  --gold-soft: rgba(201, 165, 92, 0.15);
  --gold-glow: rgba(201, 165, 92, 0.25);
  --gold-ghost: rgba(201, 165, 92, 0.06);

  /* Legacy warm aliases (for backward compatibility) */
  --glow-warm: var(--gold);
  --glow-warm-soft: var(--gold-soft);
  --glow-warm-ghost: var(--gold-ghost);

  /* Secondary accent - warm bronze */
  --bronze: #7d6b5d;
  --bronze-soft: rgba(125, 107, 93, 0.15);

  /* Status colors - muted, scholarly */
  --correct: #5a7c65;
  --correct-soft: rgba(90, 124, 101, 0.15);
  --incorrect: #8b4049;
  --incorrect-soft: rgba(139, 64, 73, 0.15);

  /* Explore/wisdom - dusty purple */
  --explore: #7d6b8a;
  --explore-soft: rgba(125, 107, 138, 0.15);

  /* Text - cream/ivory tones */
  --text-primary: #e8e0d5;
  --text-secondary: #a89f91;
  --text-dim: #6b6259;

  /* Borders - warm gray */
  --border: rgba(168, 159, 145, 0.12);
  --border-warm: rgba(201, 165, 92, 0.35);
  --border-gold: var(--border-warm);

  /* Special colors */
  --flame: #d4976a;
  --flame-intense: #e8a355;
  --parchment: #f5efe6;

  /* Hearts/HP system */
  --heart-full: #8b4049;
  --heart-empty: rgba(139, 64, 73, 0.25);

  /* Scaffolding levels */
  --scaffold-heavy: #8b4049;
  --scaffold-moderate: #7d6b5d;
  --scaffold-light: #5a7c65;
  --scaffold-challenge: #c9a55c;

  /* Boss phases */
  --boss-phase1: #5a7c65;
  --boss-phase2: #c9a55c;
  --boss-phase3: #8b4049;
}

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

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Source Sans 3', 'DM Sans', system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(ellipse at 30% 20%, rgba(201, 165, 92, 0.03) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(125, 107, 93, 0.02) 0%, transparent 50%);
  z-index: 0;
  pointer-events: none;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════════════ */

.landing {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: fadeIn 0.8s ease;
}

.landing-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 20px rgba(201, 165, 92, 0.35));
}

.landing h1 {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 2.8rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
  color: var(--gold);
  text-shadow: 0 2px 15px rgba(201, 165, 92, 0.2);
}

.landing .subtitle {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  font-weight: 400;
}

.landing .intro {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* Quiz Selection */
.quiz-select {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 520px;
}

.quiz-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  color: var(--text-primary);
  font-family: 'Source Sans 3', 'DM Sans', sans-serif;
  font-size: 1rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quiz-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-warm);
  border-left-color: var(--gold);
  box-shadow: 0 4px 20px var(--gold-ghost);
  transform: translateY(-2px);
}

.quiz-btn .label { font-weight: 500; }
.quiz-btn .count { color: var(--text-dim); font-size: 0.85rem; }

.quiz-btn.loading {
  opacity: 0.6;
  cursor: wait;
}

/* ═══════════════════════════════════════════════════════════════
   STUDY VIEW
   ═══════════════════════════════════════════════════════════════ */

.study-view { display: none; animation: fadeIn 0.5s ease; }
.study-view.active { display: block; }

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.back-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s;
}
.back-btn:hover { color: var(--glow-warm); }

.progress-info {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1px;
  margin-bottom: 2rem;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bronze), var(--gold));
  border-radius: 1px;
  transition: width 0.4s ease;
}

/* ═══════════════════════════════════════════════════════════════
   QUESTION CARD
   ═══════════════════════════════════════════════════════════════ */

.question-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 2rem 2.5rem;
  margin-bottom: 1.5rem;
  animation: slideUp 0.4s ease;
  position: relative;
}

/* Subtle corner flourish */
.question-card::before {
  content: '❧';
  position: absolute;
  top: 0.75rem;
  right: 1.25rem;
  color: var(--gold-soft);
  font-size: 1.1rem;
  opacity: 0.6;
}

.q-chapter {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 0.75rem;
  opacity: 0.85;
}

.q-id {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-left: 1rem;
}

.q-text {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.65;
  margin-bottom: 1.75rem;
  font-weight: 400;
  color: var(--text-primary);
}

/* Ms. Luminara intro - Character bubble style */
.luminara-intro {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 2px;
  position: relative;
}

/* Speech bubble tail */
.luminara-intro::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 1rem;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid var(--gold);
}

.luminara-intro .speaker {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.luminara-intro p {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   OPTIONS
   ═══════════════════════════════════════════════════════════════ */

.options { display: flex; flex-direction: column; gap: 0.5rem; }

.option-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1rem 1.25rem;
  color: var(--text-primary);
  font-family: 'Source Sans 3', 'DM Sans', sans-serif;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  line-height: 1.5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Letter prefix for scholarly look */
.option-btn .option-letter {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--gold);
  margin-right: 1rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.option-btn:hover:not(.locked) {
  background: var(--bg-card-hover);
  border-color: var(--gold);
}

.option-btn .explore-icon {
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 0.8rem;
}

.option-btn:hover .explore-icon {
  opacity: 0.5;
}

.option-btn.selected {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.option-btn.correct-answer {
  border-color: var(--correct);
  background: var(--correct-soft);
}

/* Checkmark icon for correct */
.option-btn.correct-answer::after {
  content: '✓';
  color: var(--correct);
  font-weight: bold;
  margin-left: auto;
}

.option-btn.wrong-answer {
  border-color: var(--incorrect);
  background: var(--incorrect-soft);
}

/* X icon for incorrect */
.option-btn.wrong-answer::after {
  content: '✗';
  color: var(--incorrect);
  font-weight: bold;
  margin-left: auto;
}

.option-btn.locked { cursor: default; }
.option-btn.exploring {
  border-color: var(--explore);
  background: var(--explore-soft);
}

/* ═══════════════════════════════════════════════════════════════
   EXPLORATION PANEL
   ═══════════════════════════════════════════════════════════════ */

.exploration-panel {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-radius: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  animation: fadeIn 0.4s ease;
  display: none;
}

.exploration-panel.visible { display: block; }

.exploration-panel h3 {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.exploration-panel .content {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.exploration-panel .content p {
  margin-bottom: 1rem;
}

.exploration-panel .content p:last-child {
  margin-bottom: 0;
}

.exploration-panel .verdict {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.exploration-panel .verdict.correct {
  background: var(--correct-soft);
  border-left: 3px solid var(--correct);
  color: var(--correct);
}

.exploration-panel .verdict.incorrect {
  background: var(--incorrect-soft);
  border-left: 3px solid var(--incorrect);
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   MECHANISM TOUR
   ═══════════════════════════════════════════════════════════════ */

.mechanism-tour {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-radius: 2px;
  background: var(--explore-soft);
  border: 1px solid rgba(125, 107, 138, 0.3);
  border-left: 3px solid var(--explore);
  animation: fadeIn 0.4s ease;
  display: none;
}

.mechanism-tour.visible { display: block; }

.mechanism-tour h3 {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--explore);
  margin-bottom: 1rem;
}

.mechanism-tour .content {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.mechanism-tour .metaphor {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(125, 107, 138, 0.12);
  border-radius: 2px;
  font-style: italic;
}

.mechanism-tour .metaphor .label {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--explore);
  margin-bottom: 0.5rem;
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION & ACTIONS
   ═══════════════════════════════════════════════════════════════ */

.action-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.action-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.7rem 1.25rem;
  color: var(--text-primary);
  font-family: 'Source Sans 3', 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-btn:hover {
  border-color: var(--border-warm);
  background: var(--bg-card-hover);
}

.action-btn.primary {
  background: var(--gold-soft);
  border-color: var(--border-warm);
  color: var(--gold);
}

.action-btn.primary:hover {
  background: var(--gold-glow);
}

.action-btn.explore {
  border-color: rgba(125, 107, 138, 0.3);
}

.action-btn.explore:hover {
  background: var(--explore-soft);
  border-color: var(--explore);
}

.nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.nav-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.7rem 1.5rem;
  color: var(--text-primary);
  font-family: 'Source Sans 3', 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-btn:hover {
  border-color: var(--border-warm);
  background: var(--bg-card-hover);
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.nav-btn.primary {
  background: var(--gold-soft);
  border-color: var(--border-warm);
  color: var(--gold);
}

.nav-btn.primary:hover {
  background: var(--gold-glow);
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .container { padding: 1.25rem 1rem; }
  .landing h1 { font-size: 2rem; }
  .q-text { font-size: 1.15rem; }
  .question-card { padding: 1.5rem; }
  .action-row { flex-direction: column; }
  .action-btn { width: 100%; justify-content: center; }
}

.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   LOADING STATE
   ═══════════════════════════════════════════════════════════════ */

.loading-indicator {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
  font-family: 'Crimson Pro', serif;
  font-style: italic;
}

.loading-indicator::before {
  content: '🔬';
  display: block;
  font-size: 2rem;
  margin-bottom: 1rem;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.95); }
}

/* Loader Overlay */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 22, 18, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#loader .loader-content {
  text-align: center;
  color: var(--text-secondary);
}

#loader .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--glow-warm);
  border-radius: 50%;
  margin: 0 auto 1rem;
  animation: spin 1s linear infinite;
}

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

/* Error Message */
#errorMessage {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--incorrect-soft);
  border: 1px solid var(--incorrect);
  color: var(--incorrect);
  padding: 1rem 2rem;
  border-radius: 8px;
  z-index: 1001;
  font-family: 'DM Sans', sans-serif;
}

/* Landing Content */
#landing .landing-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: fadeIn 0.8s ease;
  position: relative;
  z-index: 1;
}

#landing .landing-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

#landing .header-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

#landing .last-updated {
  font-size: 0.7rem;
  color: var(--text-dim);
  opacity: 0.7;
  white-space: nowrap;
}

#landing h1 {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 2.8rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--gold);
  text-shadow: 0 2px 15px rgba(201, 165, 92, 0.2);
}

#landing .settings-btn {
  background: var(--explore-soft);
  border: 1px solid rgba(125, 107, 138, 0.4);
  border-radius: 2px;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--explore);
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Source Sans 3', 'DM Sans', sans-serif;
}

#landing .settings-btn:hover {
  background: rgba(125, 107, 138, 0.2);
  border-color: var(--explore);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(125, 107, 138, 0.2);
}

#landing h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 2rem 0 1rem;
}

#landing h2.section-heading {
  font-family: 'Source Sans 3', 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  margin: 2.5rem 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

#landing h2.section-heading .heading-flourish {
  color: var(--gold);
  font-size: 1rem;
  opacity: 0.6;
}

#landing .section-subtitle {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}

#landing .subtitle {
  font-family: 'Crimson Pro', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  font-weight: 300;
}

.luminara-welcome {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  padding: 1.5rem;
  max-width: 600px;
  text-align: left;
  box-shadow: 0 4px 20px var(--gold-ghost);
  margin-bottom: 2rem;
}

.luminara-welcome .speaker {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.luminara-welcome p {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
  font-style: italic;
}

/* Quiz Select Grid */
.quiz-select {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 700px;
}

/* Note: .quiz-btn is defined earlier in the file with the scholarly style */

.quiz-btn .label {
  font-family: 'Source Sans 3', 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
}

.quiz-btn .count {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.loading-placeholder {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: var(--text-dim);
  font-style: italic;
}

.reference-note {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.reference-note a {
  color: var(--glow-warm);
  text-decoration: none;
}

.reference-note a:hover {
  text-decoration: underline;
}

/* Study View */
#studyView {
  display: none;
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 1.5rem 2rem;
  position: relative;
  z-index: 1;
}

#studyView.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

/* Additional progress bar context (overrides earlier if needed) */

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.nav-header span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.nav-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   WARMUP & PHASE STYLING
   ═══════════════════════════════════════════════════════════════ */

.q-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.phase-badge {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.75rem;
  border-radius: 2px;
  font-weight: 500;
}

/* Warmup phase - stepping stone visual */
.phase-badge.warmup {
  background: var(--bronze-soft);
  color: var(--bronze);
  border: 1px solid rgba(125, 107, 93, 0.4);
}

.phase-badge.main {
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid var(--border-warm);
}

/* Stepping stone style for warmup cards */
.warmup-card {
  border-color: rgba(125, 107, 93, 0.4) !important;
  border-left: 3px solid var(--bronze) !important;
  box-shadow: none !important;
  opacity: 0.95;
}

/* Stepping stone path indicator */
.warmup-context {
  background: var(--bronze-soft);
  border: 1px solid rgba(125, 107, 93, 0.25);
  border-radius: 2px;
  padding: 1rem;
  margin-bottom: 1.25rem;
  position: relative;
}

/* Path dots to indicate stepping stones */
.warmup-context::before {
  content: '○ ○ ●';
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  font-size: 0.5rem;
  color: var(--bronze);
  letter-spacing: 0.3em;
}

.warmup-context .context-label {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bronze);
  margin-bottom: 0.5rem;
}

.warmup-context .context-question {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
}

.skip-warmup {
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.skip-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  color: var(--text-dim);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.skip-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   GAMIFICATION UI
   ═══════════════════════════════════════════════════════════════ */

/* Stats Bar (Top of Study View) - Scholar's Record */
.stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  margin-bottom: 1rem;
  gap: 1rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 0.8rem;
}

.stat-item .icon {
  font-size: 1rem;
}

.stat-item .value {
  color: var(--gold);
  font-weight: 500;
}

.stat-item .label {
  color: var(--text-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* XP Bar - elegant bronze to gold gradient */
.xp-container {
  flex: 1;
  max-width: 200px;
}

.xp-bar {
  height: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}

.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bronze), var(--gold));
  border-radius: 1px;
  transition: width 0.5s ease;
  position: relative;
}

.xp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: xpShimmer 2s infinite;
}

@keyframes xpShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.xp-text {
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   HP BAR (Scaffold Remediation System)
   ═══════════════════════════════════════════════════════════════ */

.hp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 70px;
}

.hp-bar {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.hp-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease, background 0.3s ease;
}

.hp-text {
  font-size: 0.6rem;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════════
   DAMAGE ROLL OVERLAY
   ═══════════════════════════════════════════════════════════════ */

.damage-roll-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.damage-container {
  background: var(--bg-card);
  padding: 2rem 3rem;
  border-radius: 16px;
  text-align: center;
  border: 2px solid var(--incorrect);
  box-shadow: 0 0 40px rgba(139, 64, 73, 0.3);
}

.damage-container.fumble {
  border-color: var(--correct);
  box-shadow: 0 0 40px rgba(90, 124, 101, 0.3);
}

.damage-container.crit-hit {
  border-color: var(--glow-warm);
  box-shadow: 0 0 40px rgba(201, 165, 92, 0.4);
  animation: critPulse 0.5s ease infinite;
}

@keyframes critPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.damage-header {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--incorrect);
  margin-bottom: 1rem;
}

.dice-spinning {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.damage-dice {
  font-size: 3rem;
  animation: diceRoll 0.2s ease infinite;
}

@keyframes diceRoll {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-15deg); }
}

.damage-rolling {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.damage-result .roll-value {
  font-size: 4rem;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.damage-result .roll-value.fumble {
  color: var(--correct);
}

.damage-result .roll-value.crit-hit {
  color: var(--glow-warm);
}

.fumble-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--correct);
  margin-bottom: 0.5rem;
}

.damage-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--incorrect);
  margin-bottom: 0.5rem;
}

.crit-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--glow-warm);
  margin-bottom: 0.5rem;
}

.con-reduction {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

.damage-message {
  font-style: italic;
  color: var(--text-secondary);
  margin-top: 1rem;
  font-size: 0.95rem;
}

.scaffold-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--explore-soft);
  border-radius: 8px;
  color: var(--explore);
  font-weight: 600;
}

.scaffold-notice .scaffold-icon {
  font-size: 1.2rem;
}

/* ═══════════════════════════════════════════════════════════════
   SCAFFOLD QUESTION CARD
   ═══════════════════════════════════════════════════════════════ */

.scaffold-card {
  border-left: 4px solid var(--explore) !important;
}

.scaffold-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.scaffold-badge {
  background: var(--explore);
  color: white;
  padding: 0.35rem 0.8rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.8rem;
}

.scaffold-purpose {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-style: italic;
}

.luminara-scaffold-intro {
  background: var(--explore-soft);
  border-left: 3px solid var(--explore);
  padding: 1rem;
  margin-bottom: 1.25rem;
  border-radius: 0 8px 8px 0;
}

.luminara-scaffold-intro .speaker {
  font-weight: 700;
  color: var(--explore);
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.luminara-scaffold-intro p {
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
}

.scaffold-progress {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.progress-dots {
  display: flex;
  gap: 1rem;
}

.progress-dots .dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-dim);
  transition: all 0.3s ease;
}

.progress-dots .dot.completed {
  background: var(--correct);
  border-color: var(--correct);
  color: white;
}

.progress-dots .dot.active {
  background: var(--explore);
  border-color: var(--explore);
  color: white;
  transform: scale(1.1);
}

.scaffold-next-container {
  margin-top: 1.5rem;
  text-align: center;
}

.scaffold-next-btn {
  background: linear-gradient(135deg, var(--explore), #6b5c75);
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scaffold-next-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(125, 107, 138, 0.4);
}

/* Scaffold option button styling */
.scaffold-option {
  border-color: var(--explore) !important;
}

/* ═══════════════════════════════════════════════════════════════
   NARRATIVE SCAFFOLD STYLES (Magic School Bus)
   ═══════════════════════════════════════════════════════════════ */

/* Dedicated narrative scaffolds get special styling */
.scaffold-card.narrative-scaffold {
  border-left: 4px solid #2d8fdd !important;
  background: linear-gradient(135deg, rgba(45, 143, 221, 0.05) 0%, transparent 100%);
}

/* Arc badge colors */
.scaffold-arc-badge {
  padding: 0.25rem 0.6rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 0.5rem;
}

.scaffold-arc-badge.arc-1 {
  background: linear-gradient(135deg, #4a9eff, #2d8fdd);
  color: white;
}

.scaffold-arc-badge.arc-2 {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  color: white;
}

.scaffold-arc-badge.arc-3 {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

/* Narrative mode intro styling */
.luminara-scaffold-intro.narrative-mode {
  background: linear-gradient(135deg, rgba(45, 143, 221, 0.1) 0%, rgba(155, 89, 182, 0.05) 100%);
  border-left: 3px solid #2d8fdd;
  padding: 1.25rem;
}

.luminara-scaffold-intro.narrative-mode .speaker {
  color: #2d8fdd;
  font-size: 0.9rem;
}

.luminara-scaffold-intro.narrative-mode p {
  color: var(--text);
  font-style: normal;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════
   SCAFFOLD HEAL POPUP
   ═══════════════════════════════════════════════════════════════ */

.scaffold-heal-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-card);
  padding: 1.5rem 2rem;
  border-radius: 12px;
  border: 2px solid var(--correct);
  box-shadow: 0 0 30px rgba(90, 124, 101, 0.3);
  text-align: center;
  z-index: 1000;
  animation: popIn 0.3s ease;
}

@keyframes popIn {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.scaffold-heal-popup.hiding {
  animation: popOut 0.4s ease forwards;
}

@keyframes popOut {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}

.scaffold-heal-popup .heal-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.scaffold-heal-popup .heal-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--correct);
  margin-bottom: 0.25rem;
}

.scaffold-heal-popup .heal-message {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   SCAFFOLD COMPLETE POPUP
   ═══════════════════════════════════════════════════════════════ */

.scaffold-complete-popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.scaffold-complete-card {
  background: var(--bg-card);
  padding: 2rem;
  border-radius: 16px;
  border: 2px solid var(--explore);
  box-shadow: 0 0 40px rgba(125, 107, 138, 0.3);
  text-align: center;
  max-width: 400px;
}

.complete-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.complete-icon {
  font-size: 1.5rem;
}

.complete-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}

.complete-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.complete-stats .stat {
  text-align: center;
}

.complete-stats .value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--correct);
  font-family: 'JetBrains Mono', monospace;
}

.complete-stats .label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
}

.complete-message {
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.complete-continue {
  background: linear-gradient(135deg, var(--explore), #6b5c75);
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.complete-continue:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(125, 107, 138, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   KNOCKOUT OVERLAY
   ═══════════════════════════════════════════════════════════════ */

.knockout-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  animation: fadeIn 0.5s ease;
}

.knockout-card {
  background: var(--bg-card);
  padding: 2.5rem;
  border-radius: 16px;
  border: 2px solid var(--incorrect);
  box-shadow: 0 0 50px rgba(139, 64, 73, 0.3);
  text-align: center;
  max-width: 450px;
}

.knockout-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: wobble 0.5s ease;
}

@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

.knockout-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--incorrect);
  margin-bottom: 1rem;
}

.knockout-message {
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.knockout-effect {
  background: rgba(0, 0, 0, 0.3);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.knockout-effect .effect-item {
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 0.25rem 0;
}

.knockout-effect .effect-item.penalty {
  color: var(--incorrect);
}

.knockout-continue {
  background: linear-gradient(135deg, var(--glow-warm), #d4976a);
  color: var(--bg-deep);
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.knockout-continue:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(201, 165, 92, 0.4);
}

/* Level Badge */
.level-badge {
  background: linear-gradient(135deg, var(--glow-warm), #d4976a);
  color: var(--bg-deep);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Streak Counter - Growing Bonfire */
.streak-counter {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
  transition: all 0.3s ease;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.streak-counter.active {
  background: linear-gradient(135deg, rgba(212, 151, 106, 0.15), rgba(201, 165, 92, 0.1));
  border-color: var(--flame);
}

/* Growing bonfire effect - fire scales with streak */
.streak-counter .fire {
  font-size: 1rem;
  animation: fireFlicker 0.6s ease-in-out infinite alternate;
  transition: all 0.3s ease;
}

/* Streak stages: ember → campfire → bonfire */
.streak-counter[data-streak="1"] .fire,
.streak-counter[data-streak="2"] .fire { font-size: 0.9rem; opacity: 0.7; }
.streak-counter[data-streak="3"] .fire,
.streak-counter[data-streak="4"] .fire { font-size: 1rem; opacity: 0.85; }
.streak-counter[data-streak="5"] .fire,
.streak-counter[data-streak="6"] .fire,
.streak-counter[data-streak="7"] .fire { font-size: 1.1rem; opacity: 1; }
.streak-counter[data-streak="8"] .fire,
.streak-counter[data-streak="9"] .fire { font-size: 1.2rem; }
/* 10+ becomes roaring bonfire */
.streak-counter.bonfire .fire {
  font-size: 1.3rem;
  filter: drop-shadow(0 0 8px var(--flame));
}

@keyframes fireFlicker {
  from { transform: scale(1) rotate(-2deg); }
  to { transform: scale(1.08) rotate(2deg); }
}

.streak-counter .count {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--flame);
}

/* XP Popup */
.xp-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-card);
  border: 2px solid var(--glow-warm);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  z-index: 1000;
  animation: xpPopIn 0.4s ease;
  box-shadow: 0 0 60px rgba(201, 165, 92, 0.3);
  text-align: center;
  min-width: 280px;
}

@keyframes xpPopIn {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  70% { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.xp-popup.hiding {
  animation: xpPopOut 0.3s ease forwards;
}

@keyframes xpPopOut {
  to { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}

.xp-popup .total {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--glow-warm), #c9a55c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.xp-popup .breakdown {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.xp-popup .breakdown-item {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0.25rem 0;
}

.xp-popup .breakdown-item .value {
  color: var(--correct);
}

.xp-popup .lucky-strike {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: linear-gradient(135deg, rgba(201, 165, 92, 0.2), rgba(212, 151, 106, 0.1));
  border-radius: 8px;
  font-family: 'Crimson Pro', serif;
  font-size: 0.95rem;
  color: var(--glow-warm);
  font-style: italic;
  animation: luckyPulse 0.5s ease infinite alternate;
}

@keyframes luckyPulse {
  from { box-shadow: 0 0 10px rgba(201, 165, 92, 0.3); }
  to { box-shadow: 0 0 20px rgba(201, 165, 92, 0.6); }
}

.xp-popup .message {
  margin-top: 0.75rem;
  font-family: 'Crimson Pro', serif;
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Achievement Notification */
.achievement-notification {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: var(--bg-card);
  border: 2px solid var(--explore);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  z-index: 1001;
  animation: achieveSlideIn 0.5s ease;
  box-shadow: 0 0 40px rgba(125, 107, 138, 0.4);
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 350px;
}

@keyframes achieveSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.achievement-notification.hiding {
  animation: achieveSlideOut 0.4s ease forwards;
}

@keyframes achieveSlideOut {
  to { transform: translateX(100%); opacity: 0; }
}

.achievement-notification .badge-icon {
  font-size: 2rem;
  animation: badgeBounce 0.5s ease;
}

@keyframes badgeBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.achievement-notification .content {
  flex: 1;
}

.achievement-notification .title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--explore);
  margin-bottom: 0.25rem;
}

.achievement-notification .name {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.achievement-notification .message {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Streak Broken Message */
.streak-broken {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-card);
  border: 2px solid var(--incorrect);
  border-radius: 12px;
  padding: 1.25rem 2rem;
  z-index: 1000;
  animation: shakeBroken 0.5s ease;
  text-align: center;
}

@keyframes shakeBroken {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  20% { transform: translate(-50%, -50%) rotate(-3deg); }
  40% { transform: translate(-50%, -50%) rotate(3deg); }
  60% { transform: translate(-50%, -50%) rotate(-2deg); }
  80% { transform: translate(-50%, -50%) rotate(2deg); }
}

.streak-broken .icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.streak-broken .text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: var(--incorrect);
}

.streak-broken .message {
  margin-top: 0.5rem;
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Level Up Celebration - Full Ceremony */
.level-up-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 22, 18, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  animation: fadeIn 0.3s ease;
}

.level-up-card {
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: 4px;
  padding: 2.5rem 3rem;
  text-align: center;
  animation: levelUpPop 0.6s ease;
  box-shadow: 0 0 80px rgba(201, 165, 92, 0.3);
  position: relative;
}

/* Decorative corner flourishes */
.level-up-card::before,
.level-up-card::after {
  content: '❧';
  position: absolute;
  color: var(--gold);
  opacity: 0.5;
  font-size: 1.5rem;
}
.level-up-card::before { top: 0.5rem; left: 0.75rem; }
.level-up-card::after { bottom: 0.5rem; right: 0.75rem; transform: rotate(180deg); }

@keyframes levelUpPop {
  0% { transform: scale(0.3) rotate(-5deg); opacity: 0; }
  60% { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.level-up-card .stars {
  font-size: 2rem;
  margin-bottom: 1rem;
  animation: starSpin 2s ease infinite;
}

@keyframes starSpin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(5deg); }
}

.level-up-card .title {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

/* Title name in scholarly serif */
.level-up-card .level {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
  color: var(--gold);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.level-up-card .message {
  margin-top: 1rem;
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-style: italic;
}

.level-up-card .dismiss {
  margin-top: 1.5rem;
  background: var(--gold);
  border: none;
  color: var(--bg-deep);
  padding: 0.6rem 1.5rem;
  border-radius: 2px;
  font-family: 'Source Sans 3', 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s;
}

.level-up-card .dismiss:hover {
  transform: scale(1.05);
}

/* Session Summary */
.session-summary {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 22, 18, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1003;
  animation: fadeIn 0.4s ease;
}

.summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-warm);
  border-radius: 20px;
  padding: 2rem;
  max-width: 450px;
  width: 90%;
  animation: slideUp 0.5s ease;
}

.summary-card h2 {
  font-family: 'Crimson Pro', serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--glow-warm);
  text-align: center;
  margin-bottom: 1.5rem;
}

.summary-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.summary-stat {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

.summary-stat .value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--glow-warm);
}

.summary-stat .label {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
}

.summary-achievements {
  margin-bottom: 1.5rem;
}

.summary-achievements h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--explore);
  margin-bottom: 0.75rem;
}

.summary-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: var(--explore-soft);
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.summary-badge .icon {
  font-size: 1.25rem;
}

.summary-badge .name {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.summary-message {
  text-align: center;
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  color: var(--text-secondary);
  font-style: italic;
  padding: 1rem;
  border-top: 1px solid var(--border);
  margin-bottom: 1rem;
}

.summary-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.summary-actions button {
  padding: 0.7rem 1.5rem;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.summary-actions .continue {
  background: linear-gradient(135deg, var(--glow-warm), #d4976a);
  border: none;
  color: var(--bg-deep);
  font-weight: 600;
}

.summary-actions .home {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.summary-actions button:hover {
  transform: translateY(-2px);
}

/* Revenge indicator */
.revenge-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, rgba(125, 107, 138, 0.2), rgba(125, 107, 138, 0.1));
  border: 1px solid rgba(125, 107, 138, 0.4);
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--explore);
  margin-left: 0.5rem;
}

/* Landing Stats Preview */
.landing-stats {
  margin-top: 2rem;
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  gap: 2rem;
  max-width: 400px;
}

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

.landing-stat .value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--glow-warm);
}

.landing-stat .label {
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 0.2rem;
}

/* Progress Controls (Save/Load/Reset) */
.progress-controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.progress-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.progress-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-warm);
  color: var(--text-primary);
}

.progress-btn.danger:hover {
  border-color: var(--wrong);
  color: var(--wrong);
}

/* ═══════════════════════════════════════════════════════════════
   SUBJECT / COURSE / TOPIC NAVIGATION (Hierarchical)
   ═══════════════════════════════════════════════════════════════ */

.hidden { display: none !important; }

/* Subject Selection Grid */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.subject-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.subject-card:hover {
  background: var(--bg-card-hover);
  border-left-color: var(--flame);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.subject-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-left-color: var(--border);
}

.subject-card.disabled:hover {
  transform: none;
  box-shadow: none;
}

.subject-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.subject-name {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.4rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.subject-description {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.subject-count {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-dim);
  padding: 0.2rem 0.5rem;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.subject-coming-soon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.65rem;
  color: var(--bronze);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.5rem;
  background: var(--bronze-soft);
  border-radius: 2px;
}

/* Course Selection Grid */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.course-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--bronze);
  border-radius: 4px;
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.course-card:hover {
  background: var(--bg-card-hover);
  border-left-color: var(--gold);
}

.course-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.course-icon {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.course-name {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.course-dewey {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.course-dewey::before {
  content: '§';
  margin-right: 0.25rem;
  opacity: 0.5;
}

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

/* Breadcrumb Navigation */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
}

.breadcrumb-link {
  color: var(--gold);
  cursor: pointer;
  transition: color 0.2s;
}

.breadcrumb-link:hover {
  color: var(--flame);
  text-decoration: underline;
}

.breadcrumb-sep {
  color: var(--text-dim);
}

.breadcrumb-current {
  color: var(--text-secondary);
}

/* Dewey Decimal Category Grid */
.quiz-select {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 600px;
}

.dewey-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  overflow: hidden;
}

.dewey-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-deep) 100%);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}

.dewey-header:hover {
  background: var(--bg-card-hover);
  border-left-color: var(--flame);
}

.dewey-code {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold);
  min-width: 5rem;
  letter-spacing: 0.02em;
}

.dewey-code::before {
  content: '§';
  margin-right: 0.35rem;
  opacity: 0.5;
  font-weight: 400;
}

.dewey-title {
  flex: 1;
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.dewey-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-dim);
  padding: 0.25rem 0.6rem;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 2px;
  letter-spacing: 0.05em;
}

.dewey-expand {
  color: var(--text-dim);
  margin-left: 0.75rem;
  transition: transform 0.2s;
  font-size: 0.8rem;
}

.dewey-group.expanded .dewey-expand {
  transform: rotate(180deg);
}

.dewey-banks {
  display: none;
  padding: 0.75rem;
  background: var(--bg-deep);
  border-top: 1px dashed var(--border);
}

.dewey-group.expanded .dewey-banks {
  display: block;
}

.dewey-bank {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  margin: 0.35rem 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
}

.dewey-bank:hover {
  border-left-color: var(--gold);
  background: var(--bg-card-hover);
}

.dewey-bank-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--bronze);
  min-width: 4rem;
  letter-spacing: 0.02em;
}

.dewey-bank-title {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.dewey-bank-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-right: 0.5rem;
}

.dewey-bank-mastery {
  width: 50px;
  height: 3px;
  background: var(--bg-deep);
  border-radius: 1px;
  margin-left: 0.5rem;
  overflow: hidden;
}

.dewey-bank-mastery-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bronze), var(--correct));
  border-radius: 1px;
  transition: width 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY MODE BUTTONS (Study / Review / Test Prep per category)
   ═══════════════════════════════════════════════════════════════ */

.dewey-mode-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--border);
}

.dewey-mode-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.dewey-mode-btn:hover {
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}

.dewey-mode-btn.study {
  border-left: 3px solid var(--glow-warm);
}
.dewey-mode-btn.study:hover {
  border-color: var(--glow-warm);
  box-shadow: 0 2px 8px rgba(201, 165, 92, 0.2);
}

.dewey-mode-btn.review {
  border-left: 3px solid var(--correct);
}
.dewey-mode-btn.review:hover {
  border-color: var(--correct);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}

.dewey-mode-btn.testprep {
  border-left: 3px solid var(--incorrect);
}
.dewey-mode-btn.testprep:hover {
  border-color: var(--incorrect);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.dewey-mode-btn .mode-icon {
  font-size: 1.25rem;
}

.dewey-mode-btn .mode-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.dewey-mode-btn .mode-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  color: var(--text-dim);
}

.dewey-mode-btn .mode-count.due-count {
  color: var(--correct);
  font-weight: 500;
}

/* Mobile: Stack buttons */
@media (max-width: 480px) {
  .dewey-mode-row {
    flex-direction: column;
  }
  .dewey-mode-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
  }
  .dewey-mode-btn .mode-icon {
    font-size: 1rem;
  }
  .dewey-mode-btn .mode-label {
    flex: 1;
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY LOCK & BOSS PROGRESSION SYSTEM
   Roguelike unlock chain with boss encounters
   ═══════════════════════════════════════════════════════════════ */

/* Category Status Badges */
.dewey-header .status-badge {
  font-size: 1rem;
  margin-right: 0.5rem;
}

.dewey-header .mastery-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  color: var(--bronze);
  background: var(--bg-deep);
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  margin-left: auto;
  margin-right: 0.5rem;
}

/* Locked Category State */
.dewey-group.locked {
  position: relative;
  opacity: 0.6;
}

/* Main categories are always accessible - locks are on sub-categories (banks) */

/* Locked Bank (Sub-Category) Styles */
.dewey-bank.locked {
  opacity: 0.7;
  background: var(--bg-card);
  border: 1px dashed var(--text-dim);
  cursor: default;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dewey-bank.locked .dewey-bank-code {
  opacity: 0.6;
}

.dewey-bank.locked .dewey-bank-title {
  opacity: 0.6;
  flex: 1;
}

.dewey-bank.locked .bank-lock-icon {
  font-size: 1rem;
}

.bank-unlock-btn {
  padding: 0.25rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 3px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.bank-unlock-btn:hover {
  background: var(--gold-soft);
  transform: scale(1.05);
}

.bank-unlock-btn:active {
  transform: scale(0.98);
}

/* Completed Category State */
.dewey-group.completed .dewey-header {
  border-left-color: var(--correct);
}

.dewey-group.completed .status-badge.completed {
  color: var(--correct);
}

/* Boss Ready Banner */
.boss-ready-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(185, 28, 28, 0.3) 100%);
  border: 1px solid var(--incorrect);
  border-radius: 4px;
  margin: 0.5rem;
  overflow: hidden;
}

.boss-ready-banner .boss-pulse {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 70%);
  animation: boss-pulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes boss-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

.boss-ready-banner .boss-icon {
  font-size: 1.5rem;
  z-index: 1;
}

.boss-ready-banner .boss-info {
  flex: 1;
  z-index: 1;
}

.boss-ready-banner .boss-ready-text {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--incorrect);
}

.boss-ready-banner .boss-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.boss-challenge-btn {
  background: var(--incorrect);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 1;
  font-family: inherit;
}

.boss-challenge-btn:hover {
  background: #dc2626;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Dual boss challenge buttons container */
.boss-challenge-buttons {
  display: flex;
  gap: 0.5rem;
  z-index: 1;
}

.boss-challenge-btn.card-battle {
  background: var(--gold);
  color: var(--bg-deep);
}

.boss-challenge-btn.card-battle:hover {
  background: #d4b068;
  box-shadow: 0 4px 12px rgba(201, 165, 92, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   BOSS ARENA
   Epic boss battle view
   ═══════════════════════════════════════════════════════════════ */

#bossArena {
  background: linear-gradient(180deg, #1a0a0a 0%, #0d0d0d 50%, #1a0505 100%);
  min-height: 100vh;
}

.boss-arena-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Boss Display */
.boss-display {
  text-align: center;
  padding: 2rem 1rem;
}

.boss-sprite {
  position: relative;
  display: inline-block;
}

.boss-sprite .boss-emoji {
  font-size: 5rem;
  animation: boss-idle 3s ease-in-out infinite;
}

@keyframes boss-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.boss-sprite.boss-hit {
  animation: boss-hit 0.3s ease-out;
}

@keyframes boss-hit {
  0%, 100% { transform: translateX(0); filter: brightness(1); }
  25% { transform: translateX(-10px); filter: brightness(2); }
  75% { transform: translateX(10px); filter: brightness(0.5); }
}

.damage-number {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--incorrect);
  animation: damage-float 1s ease-out forwards;
  pointer-events: none;
}

@keyframes damage-float {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-50px); }
}

.boss-hp-bar {
  position: relative;
  height: 20px;
  background: var(--bg-deep);
  border: 2px solid var(--incorrect);
  border-radius: 10px;
  margin: 1rem auto;
  max-width: 300px;
  overflow: hidden;
}

.boss-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #dc2626, #ef4444);
  transition: width 0.5s ease-out;
}

.boss-hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  text-shadow: 1px 1px 2px black;
}

.boss-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--incorrect);
  margin-top: 0.5rem;
}

.boss-subtitle {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-style: italic;
}

/* Player Status */
.player-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.player-lives {
  font-size: 1.5rem;
  letter-spacing: 0.25rem;
}

.player-gear-score {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Boss Question Area */
.boss-question-area {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
}

.boss-question .question-text {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.boss-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.boss-option {
  padding: 1rem;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.boss-option:hover:not(:disabled) {
  background: var(--bg-card-hover);
  border-color: var(--gold);
}

.boss-option:disabled {
  cursor: not-allowed;
}

.boss-option.correct {
  background: rgba(34, 197, 94, 0.2);
  border-color: var(--correct);
  color: var(--correct);
}

.boss-option.incorrect {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--incorrect);
  color: var(--incorrect);
}

/* Boss Progress */
.boss-progress {
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Boss Attack Animation */
#bossArena.boss-attacking {
  animation: screen-shake 0.5s ease-out;
}

@keyframes screen-shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-5px); }
  30%, 70% { transform: translateX(5px); }
}

/* Victory/Defeat Screens */
.boss-victory, .boss-defeat {
  text-align: center;
  padding: 2rem;
}

.victory-title {
  font-size: 2.5rem;
  color: var(--correct);
  margin-bottom: 1rem;
  animation: victory-pulse 1s ease-in-out infinite;
}

@keyframes victory-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.defeat-title {
  font-size: 2.5rem;
  color: var(--incorrect);
  margin-bottom: 1rem;
}

.boss-defeated, .boss-won {
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.boss-quote {
  font-style: italic;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-left: 3px solid var(--border);
}

.victory-stats, .defeat-stats {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.loot-earned, .items-lost {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.loot-title {
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.lost-title {
  font-weight: 600;
  color: var(--incorrect);
  margin-bottom: 0.5rem;
}

.loot-item {
  color: var(--correct);
  padding: 0.25rem 0;
}

.lost-item, .gold-lost {
  color: var(--incorrect);
  padding: 0.25rem 0;
}

.unlock-message {
  font-size: 1.2rem;
  color: var(--correct);
  margin-bottom: 1.5rem;
}

.unlock-icon {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

.retry-message {
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}

.victory-btn, .defeat-btn {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.victory-btn {
  background: var(--correct);
  color: white;
}

.victory-btn:hover {
  background: #16a34a;
  transform: scale(1.05);
}

.defeat-btn {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.defeat-btn:hover {
  background: var(--bg-card-hover);
}

/* ═══════════════════════════════════════════════════════════════
   SCAFFOLDING UI (Vygotsky Adaptive Learning)
   Dark Academic Status Bar Design
   ═══════════════════════════════════════════════════════════════ */

/* Scaffold Status Bar - Horizontal gauge from "struggling" to "mastering" */
.scaffold-status-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--bronze);
  border-radius: 2px;
  margin-bottom: 1.5rem;
}

.scaffold-status-bar .status-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.scaffold-status-bar .status-label .left {
  color: var(--scaffold-heavy);
}

.scaffold-status-bar .status-label .right {
  color: var(--scaffold-challenge);
}

.scaffold-status-bar .status-gauge {
  height: 8px;
  background: var(--bg-elevated);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

/* Four zone markers */
.scaffold-status-bar .status-gauge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    var(--scaffold-heavy) 0% 25%,
    var(--scaffold-moderate) 25% 50%,
    var(--scaffold-light) 50% 75%,
    var(--scaffold-challenge) 75% 100%
  );
  opacity: 0.15;
}

.scaffold-status-bar .status-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bronze), var(--gold));
  border-radius: 4px;
  transition: width 0.5s ease, background 0.3s ease;
  position: relative;
  z-index: 1;
}

/* Marker showing current position */
.scaffold-status-bar .status-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: var(--gold);
  border: 2px solid var(--bg-deep);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold-glow);
  transition: left 0.5s ease;
  z-index: 2;
}

.scaffold-status-bar .status-current {
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Scaffold Level Indicator */
.scaffold-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  margin-left: 0.75rem;
}

.scaffold-indicator .icon {
  font-size: 0.9rem;
}

.scaffold-indicator .label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scaffold-indicator.scaffold-heavy {
  background: linear-gradient(135deg, rgba(125, 107, 93, 0.2), rgba(125, 107, 93, 0.1));
  border: 1px solid rgba(125, 107, 93, 0.4);
  color: var(--bronze);
}

.scaffold-indicator.scaffold-moderate {
  background: rgba(168, 159, 145, 0.1);
  border: 1px solid rgba(168, 159, 145, 0.3);
  color: var(--text-secondary);
}

.scaffold-indicator.scaffold-light {
  background: linear-gradient(135deg, rgba(90, 124, 101, 0.15), rgba(90, 124, 101, 0.1));
  border: 1px solid rgba(90, 124, 101, 0.4);
  color: var(--correct);
}

.scaffold-indicator.scaffold-challenge {
  background: linear-gradient(135deg, rgba(201, 165, 92, 0.2), rgba(212, 151, 106, 0.1));
  border: 1px solid var(--border-warm);
  color: var(--glow-warm);
}

/* Scaffold Hint Panel - Character Bubble (Ms. Luminara) */
.scaffold-hint {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  position: relative;
}

/* Speech bubble tail */
.scaffold-hint::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 1rem;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid var(--gold);
}

/* Whispered hint style (italics) */
.scaffold-hint.whispered {
  border-left-color: var(--bronze);
}

.scaffold-hint.whispered::before {
  border-right-color: var(--bronze);
}

.scaffold-hint.whispered .scaffold-message {
  font-style: italic;
  color: var(--text-dim);
}

@keyframes hintPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(125, 107, 93, 0); }
  50% { box-shadow: 0 0 15px rgba(125, 107, 93, 0.15); }
}

.scaffold-hint .scaffold-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.scaffold-hint .scaffold-icon {
  font-size: 1.1rem;
}

.scaffold-hint .scaffold-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bronze);
}

.scaffold-hint .scaffold-message {
  font-family: 'Crimson Pro', serif;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
}

/* Adaptive Message Toast */
.adaptive-message {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  z-index: 999;
  animation: adaptiveSlideUp 0.5s ease;
  max-width: 400px;
  text-align: center;
}

@keyframes adaptiveSlideUp {
  from { transform: translateX(-50%) translateY(100%); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.adaptive-message.hiding {
  animation: adaptiveSlideDown 0.5s ease forwards;
}

@keyframes adaptiveSlideDown {
  to { transform: translateX(-50%) translateY(100%); opacity: 0; }
}

.adaptive-message.adaptive-encouragement {
  border: 1px solid rgba(125, 107, 93, 0.4);
  box-shadow: 0 0 30px rgba(125, 107, 93, 0.2);
}

.adaptive-message.adaptive-support {
  border: 1px solid rgba(125, 107, 138, 0.4);
  box-shadow: 0 0 30px rgba(125, 107, 138, 0.2);
}

.adaptive-message.adaptive-progress,
.adaptive-message.adaptive-confidence {
  border: 1px solid rgba(90, 124, 101, 0.4);
  box-shadow: 0 0 30px rgba(90, 124, 101, 0.2);
}

.adaptive-message.adaptive-mastery,
.adaptive-message.adaptive-advanced {
  border: 1px solid var(--border-warm);
  box-shadow: 0 0 30px var(--glow-warm-ghost);
}

.adaptive-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.adaptive-text {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
}

.adaptive-speaker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--glow-warm);
}

/* Review Queue Indicator */
.review-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, rgba(125, 107, 138, 0.15), rgba(125, 107, 138, 0.08));
  border: 1px solid rgba(125, 107, 138, 0.3);
  border-radius: 8px;
  margin-top: 1rem;
}

.review-indicator .icon {
  font-size: 1rem;
}

.review-indicator .text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--explore);
}

.review-indicator .count {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

/* Mastery progress in topic selection */
.quiz-btn .mastery-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.quiz-btn .mastery-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.quiz-btn .mastery-fill.learning {
  background: var(--bronze);
}

.quiz-btn .mastery-fill.developing {
  background: var(--explore);
}

.quiz-btn .mastery-fill.proficient {
  background: var(--correct);
}

.quiz-btn .mastery-fill.mastered {
  background: linear-gradient(90deg, var(--glow-warm), #c9a55c);
}

/* ═══════════════════════════════════════════════════════════════
   D20 RPG SYSTEM UI
   ═══════════════════════════════════════════════════════════════ */

/* Dice Roll Overlay */
.dice-roll-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 22, 18, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1005;
  animation: fadeIn 0.2s ease;
}

.dice-roll-overlay.hiding {
  animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

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

.dice-spinning {
  animation: diceRoll 1s ease-out;
}

@keyframes diceRoll {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(180deg) scale(1.2); }
  50% { transform: rotate(360deg) scale(1); }
  75% { transform: rotate(540deg) scale(1.1); }
  100% { transform: rotate(720deg) scale(1); }
}

.d20-face {
  font-size: 6rem;
  filter: drop-shadow(0 0 30px rgba(201, 165, 92, 0.5));
}

.dice-result {
  animation: resultReveal 0.4s ease;
}

@keyframes resultReveal {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.roll-context {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.roll-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.roll-value.crit-success {
  color: var(--glow-warm);
  text-shadow: 0 0 30px rgba(201, 165, 92, 0.8);
  animation: critPulse 0.5s ease infinite alternate;
}

.roll-value.crit-fail {
  color: var(--incorrect);
  text-shadow: 0 0 30px rgba(139, 64, 73, 0.8);
}

@keyframes critPulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.roll-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  display: inline-block;
}

.roll-type.advantage {
  background: var(--correct-soft);
  color: var(--correct);
}

.roll-type.disadvantage {
  background: var(--incorrect-soft);
  color: var(--incorrect);
}

.roll-modifier {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

.roll-total {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem;
  color: var(--glow-warm);
  font-weight: 600;
}

.crit-message {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  animation: critFlash 0.3s ease infinite alternate;
}

.crit-success .crit-message {
  background: linear-gradient(135deg, rgba(201, 165, 92, 0.3), rgba(212, 151, 106, 0.2));
  color: var(--glow-warm);
}

.crit-fail .crit-message {
  background: var(--incorrect-soft);
  color: var(--incorrect);
}

@keyframes critFlash {
  from { opacity: 1; }
  to { opacity: 0.7; }
}

/* Character Sheet */
.character-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 22, 18, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1006;
  animation: fadeIn 0.3s ease;
}

.character-sheet {
  background: var(--bg-card);
  border: 2px solid var(--border-warm);
  border-radius: 20px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  position: relative;
  box-shadow: 0 0 60px rgba(201, 165, 92, 0.2);
}

.character-sheet .close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.25rem;
  cursor: pointer;
  transition: color 0.2s;
}

.character-sheet .close-btn:hover {
  color: var(--text-primary);
}

.cs-header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.cs-title {
  font-family: 'Crimson Pro', serif;
  font-size: 1.5rem;
  color: var(--glow-warm);
  font-style: italic;
}

.cs-level {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
}

.cs-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.stat-block {
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  border-radius: 2px;
  padding: 0.75rem 0.5rem;
  text-align: center;
  position: relative;
}

/* Classic D&D box corners */
.stat-block::before,
.stat-block::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-color: var(--gold);
}

.stat-block::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.stat-block::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.stat-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}

.stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-mod {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--glow-warm);
  margin-top: 0.1rem;
}

.stat-xp-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.stat-xp-fill {
  height: 100%;
  background: var(--explore);
  border-radius: 2px;
}

.cs-resources {
  display: flex;
  justify-content: space-around;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.resource {
  text-align: center;
}

.resource-icon {
  font-size: 1.25rem;
  display: block;
  margin-bottom: 0.25rem;
}

.resource-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.resource-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  display: block;
}

.cs-criticals {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1rem;
}

.crit-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.crit-icon {
  font-size: 1rem;
}

.crit-count {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.crit-stat.nat20 .crit-count {
  color: var(--glow-warm);
}

.crit-stat.nat1 .crit-count {
  color: var(--incorrect);
}

.crit-label {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.cs-footer {
  text-align: center;
  padding-top: 1rem;
}

.cs-flavor {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.cs-signature {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--glow-warm);
  margin-top: 0.5rem;
}

/* Skill Check Prompt */
.skill-check-prompt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 22, 18, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1004;
  animation: fadeIn 0.2s ease;
}

.skill-check-card {
  background: var(--bg-card);
  border: 1px solid var(--explore);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 350px;
  text-align: center;
  box-shadow: 0 0 40px rgba(125, 107, 138, 0.3);
}

.check-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.check-icon {
  font-size: 1.5rem;
}

.check-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.check-cost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.cost-value {
  color: var(--glow-warm);
  font-weight: 600;
}

.current-points {
  color: var(--text-dim);
  font-size: 0.75rem;
}

.check-description {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  font-style: italic;
}

.check-actions {
  display: flex;
  gap: 0.75rem;
}

.check-btn {
  flex: 1;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.check-btn.cancel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.check-btn.roll {
  background: linear-gradient(135deg, var(--explore), #6b5c75);
  border: none;
  color: white;
  font-weight: 600;
}

.check-btn.roll:hover:not(.disabled) {
  transform: translateY(-2px);
}

.check-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Insight Result */
.insight-result-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 22, 18, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1004;
  animation: fadeIn 0.3s ease;
}

.insight-result-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 380px;
  text-align: center;
}

.insight-roll {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  font-family: 'JetBrains Mono', monospace;
}

.insight-roll .roll-label {
  width: 100%;
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.insight-roll .roll-value {
  font-size: 2rem;
  font-weight: 700;
}

.insight-roll .roll-modifier,
.insight-roll .roll-total {
  font-size: 1rem;
  color: var(--text-secondary);
}

.insight-roll .roll-dc {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.insight-quality {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.insight-hint {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.6;
  padding: 1rem;
  background: rgba(125, 107, 138, 0.1);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.insight-points-remaining {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 1rem;
}

.insight-dismiss {
  background: var(--explore);
  border: none;
  color: white;
  padding: 0.6rem 2rem;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
}

/* Streak Save Prompt */
.streak-save-prompt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 22, 18, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1005;
  animation: fadeIn 0.2s ease;
}

.streak-save-card {
  background: var(--bg-card);
  border: 2px solid #d4976a;
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 350px;
  text-align: center;
  animation: shakeBroken 0.5s ease;
}

.save-header {
  margin-bottom: 1rem;
}

.save-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

.save-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #d4976a;
}

.save-streak {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.streak-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #d4976a;
}

.save-cost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 1.25rem;
}

.save-actions {
  display: flex;
  gap: 0.75rem;
}

.save-btn {
  flex: 1;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.save-btn.decline {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.save-btn.attempt {
  background: linear-gradient(135deg, #d4976a, var(--glow-warm));
  border: none;
  color: var(--bg-deep);
  font-weight: 600;
}

/* Encounter Banner */
.encounter-banner {
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  z-index: 999;
  animation: bannerSlide 0.5s ease;
}

@keyframes bannerSlide {
  from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.encounter-banner.hiding {
  animation: bannerSlideOut 0.5s ease forwards;
}

@keyframes bannerSlideOut {
  to { transform: translateX(-50%) translateY(-100%); opacity: 0; }
}

.encounter-banner.encounter-standard {
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.encounter-banner.encounter-elite {
  background: linear-gradient(135deg, rgba(125, 107, 138, 0.2), rgba(125, 107, 138, 0.1));
  border: 1px solid var(--explore);
  box-shadow: 0 0 20px rgba(125, 107, 138, 0.3);
}

.encounter-banner.encounter-boss {
  background: linear-gradient(135deg, rgba(201, 165, 92, 0.2), rgba(139, 64, 73, 0.1));
  border: 2px solid var(--glow-warm);
  box-shadow: 0 0 30px rgba(201, 165, 92, 0.4);
}

.encounter-icon {
  font-size: 1.25rem;
}

.encounter-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.encounter-modifier {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.encounter-modifier.advantage {
  background: var(--correct-soft);
  color: var(--correct);
}

.encounter-modifier.disadvantage {
  background: var(--incorrect-soft);
  color: var(--incorrect);
}

.encounter-reward {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--glow-warm);
  font-weight: 600;
}

/* Character Mini (in stats bar) */
.char-mini {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.char-mini:hover {
  border-color: var(--border-warm);
  background: var(--glow-warm-ghost);
}

.char-title {
  font-family: 'Crimson Pro', serif;
  font-size: 0.85rem;
  color: var(--glow-warm);
  font-style: italic;
}

.char-stats-mini {
  display: flex;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-dim);
}

/* Insight Points - Star Currency Display */
.insight-points {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--explore);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.insight-stars {
  display: flex;
  gap: 0.15rem;
}

.insight-star {
  font-size: 1rem;
  transition: all 0.3s ease;
}

.insight-star.filled {
  color: var(--gold);
  text-shadow: 0 0 4px var(--gold-glow);
}

.insight-star.empty {
  color: var(--text-dim);
  opacity: 0.3;
}

/* Floating XP Animation */
.floating-xp {
  position: fixed;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold-glow);
  pointer-events: none;
  animation: floatUp 1.5s ease-out forwards;
  z-index: 1100;
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-30px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0.8);
  }
}

/* Roll for Insight Button */
.insight-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  background: linear-gradient(135deg, rgba(125, 107, 138, 0.2), rgba(125, 107, 138, 0.1));
  border: 1px solid rgba(125, 107, 138, 0.4);
  border-radius: 6px;
  color: var(--explore);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.75rem;
}

.insight-btn:hover:not(:disabled) {
  background: rgba(125, 107, 138, 0.3);
  transform: translateY(-1px);
}

.insight-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   DIABLO-STYLE INVENTORY & PAPERDOLL UI
   ═══════════════════════════════════════════════════════════════ */

/* Inventory Button in Stats Bar */
.inventory-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.inventory-btn:hover {
  border-color: var(--glow-warm);
  background: var(--glow-warm-ghost);
  transform: scale(1.1);
}

/* Inventory Overlay */
.inventory-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 22, 18, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1010;
  animation: fadeIn 0.3s ease;
}

.inventory-panel {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-deep) 100%);
  border: 2px solid var(--border-warm);
  border-radius: 4px;
  width: 95%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.inventory-panel .close-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(139, 64, 73, 0.2);
  border: 1px solid #8b4049;
  color: #8b4049;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
}

.inventory-panel .close-btn:hover {
  background: #8b4049;
  color: white;
}

.inv-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #3d4663;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, rgba(61, 70, 99, 0.3) 0%, transparent 100%);
}

.inv-header h2 {
  font-family: 'Crimson Pro', serif;
  font-size: 1.5rem;
  color: #c4a35a;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.gold-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.inv-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 1.5rem;
  padding: 1.5rem;
}

@media (max-width: 700px) {
  .inv-content {
    grid-template-columns: 1fr;
  }
}

/* Paperdoll Section */
.paperdoll-section h3,
.inventory-section h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8b9dc3;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #3d4663;
}

.paperdoll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(30, 35, 50, 0.8) 0%, rgba(15, 19, 25, 0.8) 100%);
  border: 1px solid #3d4663;
  border-radius: 4px;
}

.paperdoll-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.equip-slot {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #1e2332 0%, #0f1319 100%);
  border: 2px solid #3d4663;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}

.equip-slot:hover {
  border-color: #5d6b8f;
  box-shadow: 0 0 15px rgba(93, 107, 143, 0.3);
}

.equip-slot.filled {
  background: linear-gradient(135deg, #252a3a 0%, #1a1f2e 100%);
}

.equip-slot .slot-icon {
  font-size: 1.5rem;
  opacity: 0.6;
}

.equip-slot.filled .slot-icon {
  opacity: 1;
}

.equip-slot .item-level {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: #8b9dc3;
}

/* Equipment Stats */
.equip-stats {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(30, 35, 50, 0.5);
  border: 1px solid #3d4663;
  border-radius: 4px;
}

.equip-stats h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #8b9dc3;
  margin-bottom: 0.5rem;
}

.equip-stats .stat-row {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  padding: 0.2rem 0;
  color: #a8b4c8;
}

.equip-stats .stat-row .stat-val {
  color: #5a7c65;
}

.equip-stats .stat-row.bonus .stat-val {
  color: var(--bronze);
}

/* Set Bonuses */
.set-bonuses {
  margin-top: 1rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, transparent 100%);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
}

.set-bonuses h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #5a7c65;
  margin-bottom: 0.5rem;
}

.set-info {
  margin-bottom: 0.5rem;
}

.set-name {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: #5a7c65;
}

.set-bonus {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: #5a7c65;
  padding-left: 0.5rem;
}

/* Inventory Grid */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 0.5rem;
  padding: 0.75rem;
  background: linear-gradient(180deg, rgba(30, 35, 50, 0.5) 0%, rgba(15, 19, 25, 0.5) 100%);
  border: 1px solid #3d4663;
  border-radius: 4px;
  min-height: 150px;
}

.inv-item {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #1e2332 0%, #0f1319 100%);
  border: 2px solid #3d4663;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}

.inv-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.inv-item .item-icon {
  font-size: 1.25rem;
}

.inv-item .item-level {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  color: #8b9dc3;
}

.inv-item .socket-indicator {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 0.5rem;
  color: #7d6b8a;
}

.empty-inv {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: #5d6b8f;
  font-style: italic;
}

/* Gems Grid */
.gems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 0.4rem;
  padding: 0.75rem;
  background: linear-gradient(180deg, rgba(30, 35, 50, 0.5) 0%, rgba(15, 19, 25, 0.5) 100%);
  border: 1px solid #3d4663;
  border-radius: 4px;
  min-height: 80px;
}

.inv-gem {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #1e2332 0%, #0f1319 100%);
  border: 2px solid #3d4663;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}

.inv-gem:hover {
  transform: scale(1.1);
}

.inv-gem .gem-icon {
  font-size: 1.1rem;
}

.inv-gem .gem-tier {
  position: absolute;
  bottom: 0;
  right: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  color: #8b9dc3;
}

/* Item Detail Overlay */
.item-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 22, 18, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1020;
  animation: fadeIn 0.2s ease;
}

.item-detail {
  background: linear-gradient(180deg, #1a1f2e 0%, #0f1319 100%);
  border: 2px solid;
  border-radius: 4px;
  width: 90%;
  max-width: 350px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}

.item-header {
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid #3d4663;
}

.item-icon-large {
  font-size: 2.5rem;
}

.item-title {
  flex: 1;
}

.item-name {
  font-family: 'Crimson Pro', serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
}

.item-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: #8b9dc3;
  margin-top: 0.25rem;
}

.item-level-req {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: #8b9dc3;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
}

.item-lore {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  font-style: italic;
  color: #c4a35a;
  padding: 0.75rem 1rem;
  text-align: center;
  border-bottom: 1px solid #3d4663;
}

.item-stats {
  padding: 1rem;
}

.item-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--bronze);
  padding: 0.2rem 0;
}

.item-special {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: #c9a55c;
  padding: 0.75rem 1rem;
  background: rgba(201, 165, 92, 0.1);
  border-top: 1px solid rgba(201, 165, 92, 0.3);
  border-bottom: 1px solid rgba(201, 165, 92, 0.3);
}

.item-sockets {
  padding: 0.75rem 1rem;
  border-top: 1px solid #3d4663;
}

.socket-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: #8b9dc3;
  margin-bottom: 0.5rem;
}

.socket-row {
  display: flex;
  gap: 0.5rem;
}

.socket {
  font-size: 1.25rem;
}

.socket.empty {
  color: #3d4663;
}

.item-set-info {
  padding: 0.5rem 1rem;
  background: rgba(34, 197, 94, 0.1);
  border-top: 1px solid rgba(34, 197, 94, 0.3);
}

.set-name-label {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: #5a7c65;
}

.item-actions {
  padding: 1rem;
  display: flex;
  gap: 0.5rem;
  border-top: 1px solid #3d4663;
}

.item-btn {
  flex: 1;
  padding: 0.6rem;
  border: 1px solid #3d4663;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.item-btn.equip {
  background: linear-gradient(180deg, #5a7c65 0%, #5a7c65 100%);
  border-color: #5a7c65;
  color: white;
}

.item-btn.unequip {
  background: linear-gradient(180deg, var(--bronze) 0%, var(--bronze) 100%);
  border-color: var(--bronze);
  color: white;
}

.item-btn.sell {
  background: linear-gradient(180deg, #c9a55c 0%, #c9a55c 100%);
  border-color: #c9a55c;
  color: #1a1f2e;
}

.item-btn.close {
  background: #1e2332;
  color: #8b9dc3;
}

.item-btn:hover {
  transform: translateY(-2px);
}

/* Loot Drop Notifications */
.loot-drop-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 1005;
  pointer-events: none;
}

.loot-drop {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(180deg, #1a1f2e 0%, #0f1319 100%);
  border: 2px solid #3d4663;
  border-radius: 4px;
  animation: lootDropIn 0.5s ease forwards, lootDropOut 0.5s ease 3s forwards;
  opacity: 0;
}

@keyframes lootDropIn {
  0% { transform: translateY(-20px) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes lootDropOut {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}

.loot-drop .loot-icon {
  font-size: 1.5rem;
}

.loot-drop .loot-text {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
}

.loot-drop.gold-drop {
  border-color: #ffd700;
}

.loot-drop.gold-drop .loot-text {
  color: #ffd700;
}

.loot-drop.rarity-legendary {
  border-color: #c9a55c;
  box-shadow: 0 0 20px rgba(201, 165, 92, 0.4);
  animation: lootDropIn 0.5s ease forwards, legendaryGlow 1s ease infinite alternate, lootDropOut 0.5s ease 3.5s forwards;
}

@keyframes legendaryGlow {
  from { box-shadow: 0 0 20px rgba(201, 165, 92, 0.4); }
  to { box-shadow: 0 0 40px rgba(201, 165, 92, 0.7); }
}

.loot-drop.rarity-unique {
  border-color: #06b6d4;
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.5);
}

.gem-detail .gem-socket-info {
  text-align: center;
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: #8b9dc3;
  font-style: italic;
  padding: 1rem;
  border-top: 1px solid #3d4663;
}

/* ═══════════════════════════════════════════════════════════════
   GAUNTLET MODE - ROGUELIKE BOSS BATTLES
   ═══════════════════════════════════════════════════════════════ */

.gauntlet-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem;
}

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

.gauntlet-header h1 {
  font-family: 'Crimson Pro', serif;
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--incorrect) 0%, var(--glow-warm) 50%, #c9a55c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gauntlet-subtitle {
  font-family: 'Crimson Pro', serif;
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-style: italic;
}

.gauntlet-intro {
  background: var(--bg-card);
  border: 1px solid var(--border-warm);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  text-align: left;
}

.gauntlet-intro .speaker {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--glow-warm);
  margin-bottom: 0.5rem;
}

.gauntlet-intro p {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Difficulty Select */
.difficulty-select {
  margin: 2rem 0;
}

.difficulty-select h3 {
  font-size: 1rem;
  color: var(--text-dim);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.difficulty-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.difficulty-btn {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.difficulty-btn:hover:not(.locked) {
  border-color: var(--glow-warm);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(201, 165, 92, 0.2);
}

.difficulty-btn.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.difficulty-btn .diff-icon {
  font-size: 2rem;
}

.difficulty-btn .diff-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.difficulty-btn .diff-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.difficulty-btn .unlock-req {
  font-size: 0.7rem;
  color: var(--incorrect);
  font-style: italic;
}

.difficulty-btn.easy:hover:not(.locked) { border-color: var(--correct); }
.difficulty-btn.hard:hover:not(.locked) { border-color: #d4976a; }
.difficulty-btn.nightmare:hover:not(.locked) { border-color: var(--incorrect); }

/* Gauntlet Actions */
.gauntlet-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0;
}

.gauntlet-btn {
  padding: 0.75rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s;
}

.gauntlet-btn:hover {
  border-color: var(--glow-warm);
  background: var(--bg-card-hover);
}

.gauntlet-btn.leaderboard:hover {
  border-color: #ffd700;
}

/* Gauntlet Stats */
.gauntlet-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 1.5rem;
}

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

.g-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--glow-warm);
}

.g-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   BOSS ARENA
   ═══════════════════════════════════════════════════════════════ */

.boss-arena {
  background: linear-gradient(180deg, rgba(139, 64, 73, 0.05) 0%, var(--bg-card) 100%);
  border: 2px solid rgba(139, 64, 73, 0.3);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.boss-arena::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--incorrect), transparent);
  animation: bossGlow 2s ease-in-out infinite;
}

@keyframes bossGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.boss-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-dim);
}

.boss-difficulty {
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  background: var(--incorrect-soft);
  color: var(--incorrect);
}

.boss-portrait {
  position: relative;
  margin-bottom: 1rem;
}

.boss-icon {
  font-size: 5rem;
  filter: drop-shadow(0 0 20px rgba(139, 64, 73, 0.5));
  animation: bossBreathe 3s ease-in-out infinite;
}

@keyframes bossBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.boss-phase-indicator {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.boss-phase-indicator.phase1 { border-color: var(--correct); color: var(--correct); }
.boss-phase-indicator.phase2 { border-color: var(--glow-warm); color: var(--glow-warm); }
.boss-phase-indicator.enraged { border-color: var(--incorrect); color: var(--incorrect); animation: pulse 0.5s infinite; }

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

.boss-info {
  margin-bottom: 1rem;
}

.boss-name {
  font-family: 'Crimson Pro', serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

.boss-title {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: var(--text-dim);
  font-style: italic;
}

/* Boss HP Bar - Phase-Segmented */
.boss-hp-section {
  margin: 1.5rem 0;
}

.boss-hp-bar {
  height: 24px;
  background: var(--bg-elevated);
  border-radius: 2px;
  overflow: visible;
  border: 2px solid var(--border);
  position: relative;
}

/* Phase segment markers */
.boss-hp-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 33.33%;
  width: 2px;
  height: 100%;
  background: var(--border);
  z-index: 2;
}

.boss-hp-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 66.66%;
  width: 2px;
  height: 100%;
  background: var(--border);
  z-index: 2;
}

.boss-hp-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.3s ease;
  position: relative;
}

/* Phase colors based on HP percentage */
.boss-hp-fill.phase1 {
  background: linear-gradient(90deg, var(--boss-phase1), var(--correct));
}

.boss-hp-fill.phase2 {
  background: linear-gradient(90deg, var(--boss-phase2), var(--gold));
}

.boss-hp-fill.phase3 {
  background: linear-gradient(90deg, var(--boss-phase3), var(--incorrect));
}

/* HP shimmer effect */
.boss-hp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.2), transparent);
}

/* Cracked segment effect when phase transitions */
.boss-hp-bar.cracked::before,
.boss-hp-bar.cracked::after {
  background: var(--incorrect);
  box-shadow: 0 0 8px var(--incorrect);
  animation: crackPulse 0.5s ease;
}

@keyframes crackPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.boss-hp-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

.boss-armor {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Boss Taunt */
.boss-taunt {
  background: rgba(139, 64, 73, 0.1);
  border-left: 3px solid var(--incorrect);
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 0 8px 8px 0;
}

.taunt-text {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--text-secondary);
}

/* Boss Weakness */
.boss-weakness {
  margin: 1rem 0;
  font-size: 0.85rem;
}

.weakness-label {
  color: var(--text-dim);
}

.weakness-stat {
  color: var(--correct);
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Boss Abilities */
.boss-abilities {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.boss-ability {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8rem;
}

.boss-ability.passive {
  border-color: var(--explore);
  color: var(--explore);
}

.ability-icon {
  font-size: 1rem;
}

/* Battle Actions */
.battle-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.battle-btn {
  padding: 1rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s;
}

.battle-btn:hover {
  transform: translateY(-2px);
}

.battle-btn.attack {
  border-color: var(--incorrect);
}

.battle-btn.attack:hover {
  background: var(--incorrect-soft);
  box-shadow: 0 4px 15px rgba(139, 64, 73, 0.3);
}

.battle-btn.special {
  border-color: var(--explore);
}

.battle-btn.special:hover {
  background: var(--explore-soft);
  box-shadow: 0 4px 15px rgba(125, 107, 138, 0.3);
}

.battle-btn.defend {
  border-color: var(--correct);
}

.battle-btn.defend:hover {
  background: var(--correct-soft);
  box-shadow: 0 4px 15px rgba(90, 124, 101, 0.3);
}

/* Player Status */
.player-status {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  font-size: 0.9rem;
}

.player-hp { color: var(--incorrect); }
.player-streak { color: var(--glow-warm); }
.battle-score { color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════
   BOSS ATTACK OVERLAYS
   ═══════════════════════════════════════════════════════════════ */

.boss-attack-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.2s ease;
}

.boss-attack-overlay.hiding {
  animation: fadeOut 0.4s ease forwards;
}

.attack-animation,
.defense-animation {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  min-width: 300px;
}

.attack-animation.hit { border-color: var(--correct); }
.attack-animation.miss { border-color: var(--text-dim); }
.attack-animation.critical { border-color: var(--glow-warm); box-shadow: 0 0 30px rgba(201, 165, 92, 0.5); }

.defense-animation.blocked { border-color: var(--correct); }
.defense-animation.hit { border-color: var(--incorrect); }

.attack-roll,
.defense-roll {
  margin-bottom: 1.5rem;
}

.roll-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

.roll-value {
  font-size: 4rem;
  font-weight: 700;
  color: var(--text-primary);
}

.roll-value.critical { color: var(--glow-warm); }

.roll-modifier {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.roll-vs {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 0.5rem;
}

.damage-dealt,
.defense-success,
.defense-fail {
  padding: 1rem;
  border-radius: 8px;
}

.damage-dealt {
  background: var(--correct-soft);
}

.damage-dealt.critical {
  background: linear-gradient(135deg, var(--glow-warm-soft), var(--correct-soft));
}

.damage-value,
.damage-taken {
  font-size: 2.5rem;
  font-weight: 700;
}

.damage-dealt .damage-value { color: var(--correct); }
.defense-fail .damage-taken { color: var(--incorrect); }

.damage-type {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--glow-warm);
}

.attack-miss {
  padding: 1rem;
}

.miss-text {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-dim);
}

.miss-flavor,
.damage-flavor,
.block-flavor {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 0.5rem;
}

.defense-success {
  background: var(--correct-soft);
}

.block-text {
  font-size: 2rem;
  font-weight: 700;
  color: var(--correct);
}

.defense-fail {
  background: var(--incorrect-soft);
}

.reduction {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 0.5rem;
}

.boss-attack-header {
  margin-bottom: 1rem;
}

.boss-attack-icon {
  font-size: 2rem;
  margin-right: 0.5rem;
}

.boss-attack-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--incorrect);
}

/* ═══════════════════════════════════════════════════════════════
   BOSS DEFEAT / RUN COMPLETE
   ═══════════════════════════════════════════════════════════════ */

.boss-defeat-overlay,
.run-complete-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

.boss-defeat-card,
.run-complete-card {
  background: var(--bg-card);
  border: 2px solid var(--correct);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  max-width: 450px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.run-complete-card.victory { border-color: var(--correct); }
.run-complete-card.defeat { border-color: var(--incorrect); }

.defeat-header,
.run-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.defeat-icon,
.run-icon {
  font-size: 2.5rem;
}

.defeat-title,
.run-title {
  font-family: 'Crimson Pro', serif;
  font-size: 2rem;
  font-weight: 600;
}

.run-header.victory .run-title { color: var(--correct); }
.run-header.defeat .run-title { color: var(--incorrect); }

.boss-defeated {
  margin: 1.5rem 0;
}

.boss-defeated .boss-icon {
  font-size: 4rem;
  opacity: 0.5;
}

.boss-defeated .boss-icon.fading {
  animation: bossDefeat 2s ease forwards;
}

@keyframes bossDefeat {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.9); }
  100% { opacity: 0.1; transform: scale(0.8) rotate(10deg); }
}

.boss-quote {
  font-family: 'Crimson Pro', serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-dim);
  margin-top: 0.5rem;
}

.defeat-stats,
.run-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 1rem 0;
}

.defeat-stats .stat,
.run-stats .stat {
  text-align: center;
}

.defeat-stats .value,
.run-stats .value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--glow-warm);
}

.defeat-stats .label,
.run-stats .label {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
}

.loot-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.loot-header {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
}

.loot-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.loot-item {
  padding: 0.5rem;
  background: var(--bg-card);
  border-radius: 6px;
  font-size: 0.9rem;
}

.loot-item.gold { color: #ffd700; }
.loot-item.special { color: var(--glow-warm); }

.defeat-continue {
  padding: 0.75rem 2rem;
  background: var(--correct);
  border: none;
  border-radius: 8px;
  color: #000;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s;
}

.defeat-continue:hover {
  transform: scale(1.05);
}

/* Run Complete Specific */
.run-title-earned {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.title-icon {
  font-size: 1.5rem;
}

.title-name {
  font-size: 1.25rem;
  font-weight: 600;
}

.high-score-banner {
  background: linear-gradient(135deg, var(--glow-warm) 0%, #c9a55c 100%);
  color: #000;
  padding: 0.75rem;
  border-radius: 8px;
  font-weight: 700;
  margin-bottom: 1rem;
  animation: highScorePulse 0.5s ease infinite alternate;
}

@keyframes highScorePulse {
  from { transform: scale(1); }
  to { transform: scale(1.02); }
}

.score-breakdown {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.breakdown-row.multiplier {
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

.breakdown-total {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0 0;
  margin-top: 0.5rem;
  border-top: 2px solid var(--glow-warm);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--glow-warm);
}

.tokens-earned {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--explore-soft);
  border-radius: 8px;
  margin: 1rem 0;
}

.tokens-icon {
  font-size: 1.25rem;
}

.tokens-amount {
  font-size: 1rem;
  font-weight: 600;
  color: var(--explore);
}

.run-achievements {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--glow-warm-soft);
  border-radius: 8px;
}

.achievements-header {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--glow-warm);
  margin-bottom: 0.5rem;
}

.run-achievement {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.achieve-icon {
  font-size: 1.25rem;
}

.achieve-name {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.fun-fact {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--bg-card-hover);
  border-radius: 8px;
  text-align: left;
}

.fact-header {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

.fact-text {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.run-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.run-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s;
}

.run-btn.home {
  background: var(--bg-card);
  color: var(--text-primary);
}

.run-btn.home:hover {
  border-color: var(--glow-warm);
}

.run-btn.retry {
  background: var(--glow-warm);
  color: #000;
  border-color: var(--glow-warm);
}

.run-btn.retry:hover {
  background: #c9a55c;
}

/* ═══════════════════════════════════════════════════════════════
   HIGH SCORES / LEADERBOARD
   ═══════════════════════════════════════════════════════════════ */

.highscores-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.2s ease;
  padding: 1rem;
}

.highscores-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.hs-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.hs-header h2 {
  font-family: 'Crimson Pro', serif;
  font-size: 1.75rem;
  background: linear-gradient(135deg, #ffd700, var(--glow-warm));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.75rem;
}

.current-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.rank-icon {
  font-size: 1.5rem;
}

.rank-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.next-rank {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.next-rank.max-rank {
  color: var(--glow-warm);
}

.hs-section {
  margin-bottom: 1.5rem;
}

.hs-section h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.scores-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.score-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--bg-card-hover);
  border-radius: 8px;
  border-left: 3px solid transparent;
}

.score-row.first { border-left-color: #ffd700; background: rgba(255, 215, 0, 0.1); }
.score-row.second { border-left-color: #c0c0c0; }
.score-row.third { border-left-color: #cd7f32; }

.score-row .rank {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dim);
  min-width: 30px;
}

.score-row .score {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--glow-warm);
  min-width: 80px;
}

.score-row .title {
  font-size: 1rem;
}

.score-row .details {
  flex: 1;
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: right;
}

.score-row .difficulty {
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
}

.score-row .difficulty.easy { background: var(--correct-soft); color: var(--correct); }
.score-row .difficulty.normal { background: var(--explore-soft); color: var(--explore); }
.score-row .difficulty.hard { background: rgba(212, 151, 106, 0.2); color: #d4976a; }
.score-row .difficulty.nightmare { background: var(--incorrect-soft); color: var(--incorrect); }

/* Global leaderboard rows */
.score-row.global .initials {
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  min-width: 50px;
  text-transform: uppercase;
}

.score-row.global.first .initials {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.score-row.global.second .initials {
  color: #c0c0c0;
}

.score-row.global.third .initials {
  color: #cd7f32;
}

.loading-scores {
  text-align: center;
  padding: 2rem;
  color: var(--gold);
  font-style: italic;
  animation: pulse 1.5s infinite;
}

.no-scores {
  text-align: center;
  padding: 2rem;
  color: var(--text-dim);
  font-style: italic;
}

.bests-grid,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.best-item,
.stat-item {
  text-align: center;
  padding: 0.75rem;
  background: var(--bg-card-hover);
  border-radius: 8px;
}

.best-value,
.stat-item .val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--glow-warm);
}

.best-label,
.stat-item .lbl {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Global vs Local toggle */
.leaderboard-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 1rem;
  background: var(--bg-card-hover);
  border-radius: 8px;
  padding: 4px;
}

.leaderboard-toggle button {
  flex: 1;
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.leaderboard-toggle button.active {
  background: var(--gold);
  color: var(--bg-deep);
  font-weight: 600;
}

.leaderboard-toggle button:hover:not(.active) {
  color: var(--text-primary);
}

/* Mode Tabs (Gauntlet vs Arcade) */
.leaderboard-mode-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.mode-tab-btn {
  padding: 0.6rem 1.25rem;
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mode-tab-btn:hover:not(.active) {
  border-color: var(--gold);
  color: var(--text-primary);
}

.mode-tab-btn.active {
  border-color: var(--gold);
  background: rgba(201, 165, 92, 0.15);
  color: var(--gold);
}

.mode-tab-btn[data-mode="gauntlet"].active {
  border-color: var(--incorrect);
  background: rgba(239, 68, 68, 0.15);
  color: var(--incorrect);
}

.mode-tab-btn[data-mode="arcade"].active {
  border-color: var(--correct);
  background: rgba(52, 211, 153, 0.15);
  color: var(--correct);
}

.mode-tab-btn .mode-icon {
  font-size: 1.1rem;
}

/* Difficulty Sub-Tabs */
.difficulty-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 0.75rem;
  background: var(--bg-deep);
  border-radius: 6px;
  padding: 3px;
}

.diff-tab-btn {
  padding: 0.4rem 0.8rem;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.15s;
}

.diff-tab-btn:hover:not(.active) {
  color: var(--text-primary);
}

.diff-tab-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
}

.diff-tab-btn[data-diff="easy"].active {
  color: var(--correct);
}

.diff-tab-btn[data-diff="normal"].active {
  color: var(--gold);
}

.diff-tab-btn[data-diff="hard"].active {
  color: #f97316;
}

.diff-tab-btn[data-diff="nightmare"].active {
  color: var(--incorrect);
}

/* Global leaderboard specific */
.global-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #000;
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  margin-left: 0.5rem;
  text-transform: uppercase;
}

.score-row.global-entry {
  border-left-color: #ffd700;
  background: rgba(255, 215, 0, 0.05);
}

/* ═══════════════════════════════════════════════════════════════
   INITIALS INPUT MODAL (Arcade style)
   ═══════════════════════════════════════════════════════════════ */

.initials-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.initials-modal {
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 0 40px rgba(201, 165, 92, 0.3);
}

.initials-modal h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
  animation: pulse 1.5s ease-in-out infinite;
}

.initials-subtitle {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.initials-input-container {
  margin: 1.5rem 0;
}

#initialsInput {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  width: 160px;
  padding: 0.5rem;
  background: var(--bg-deep);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--glow-warm);
  text-transform: uppercase;
  letter-spacing: 0.5rem;
}

#initialsInput:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(201, 165, 92, 0.3);
}

#initialsInput::placeholder {
  color: var(--text-dim);
  opacity: 0.5;
}

.initials-hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}

.initials-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.initials-btn {
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.initials-btn.submit {
  background: var(--gold);
  color: var(--bg-deep);
}

.initials-btn.submit:hover {
  background: var(--gold-hover);
  transform: scale(1.05);
}

.initials-btn.skip {
  background: var(--bg-card-hover);
  color: var(--text-dim);
}

.initials-btn.skip:hover {
  color: var(--text-primary);
}

.initials-privacy {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 1.5rem;
  line-height: 1.4;
}

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

/* Global Submit Section (in run complete screen) */
.global-submit-section {
  text-align: center;
  padding: 1rem;
  margin: 0.5rem 0;
  background: linear-gradient(135deg, rgba(201, 165, 92, 0.1), rgba(168, 133, 79, 0.05));
  border-radius: 8px;
  border: 1px solid var(--gold-soft);
}

.global-question {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.global-submit-btn {
  background: linear-gradient(135deg, var(--gold), var(--gold-hover));
  border: none;
  color: var(--bg-deep);
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.global-submit-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(201, 165, 92, 0.4);
}

.global-submitting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--gold);
  font-size: 0.9rem;
}

.submit-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.global-submitted {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.global-submitted.success {
  color: var(--correct);
}

.global-submitted.error {
  color: var(--incorrect);
}

.global-submitted .submit-icon {
  font-size: 1.25rem;
}

.global-submitted .submit-text {
  font-size: 0.9rem;
}

.retry-submit-btn {
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.4rem 1rem;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  margin-left: 0.5rem;
}

.retry-submit-btn:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   POWER-UP SHOP
   ═══════════════════════════════════════════════════════════════ */

.powerup-shop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.2s ease;
  padding: 1rem;
}

.powerup-shop-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.shop-header h2 {
  font-family: 'Crimson Pro', serif;
  font-size: 1.5rem;
  color: var(--glow-warm);
}

.token-balance {
  padding: 0.5rem 1rem;
  background: var(--explore-soft);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--explore);
}

.shop-section {
  margin-bottom: 1.5rem;
}

.shop-section h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.shop-item {
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  transition: all 0.15s;
}

.shop-item:not(.locked):not(.cant-afford):hover {
  border-color: var(--glow-warm);
}

.shop-item.cant-afford {
  opacity: 0.6;
}

.shop-item.locked {
  opacity: 0.5;
}

.shop-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.shop-item .item-icon {
  font-size: 1.5rem;
}

.shop-item .item-name {
  font-size: 0.9rem;
  font-weight: 600;
  flex: 1;
}

.shop-item .item-rarity {
  font-size: 0.6rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.item-rarity.common { background: rgba(156, 163, 175, 0.2); color: #9ca3af; }
.item-rarity.uncommon { background: var(--correct-soft); color: var(--correct); }
.item-rarity.rare { background: rgba(125, 107, 93, 0.2); color: var(--bronze); }
.item-rarity.legendary { background: var(--glow-warm-soft); color: var(--glow-warm); }

.shop-item .item-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

.shop-item .item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop-item .item-owned {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.buy-btn {
  padding: 0.4rem 0.75rem;
  background: var(--explore);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.1s;
}

.buy-btn:hover:not(:disabled) {
  background: #a78bfa;
  transform: scale(1.05);
}

.buy-btn:disabled {
  background: var(--text-dim);
  cursor: not-allowed;
}

.unlock-progress {
  height: 4px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.unlock-progress .progress-fill {
  height: 100%;
  background: var(--glow-warm);
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   POWER-UP ACTIVATION
   ═══════════════════════════════════════════════════════════════ */

.powerup-activation {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2100;
  animation: powerupPopIn 0.3s ease;
}

@keyframes powerupPopIn {
  0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

.powerup-activation.hiding {
  animation: powerupPopOut 0.4s ease forwards;
}

@keyframes powerupPopOut {
  0% { transform: translateX(-50%) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-30px) scale(0.8); opacity: 0; }
}

.powerup-card {
  background: linear-gradient(135deg, var(--explore) 0%, #6b5c75 100%);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  text-align: center;
  box-shadow: 0 10px 40px rgba(125, 107, 138, 0.5);
}

.powerup-card .powerup-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.powerup-card .powerup-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}

.powerup-card .powerup-effect {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ═══════════════════════════════════════════════════════════════
   RUN PROGRESS BAR
   ═══════════════════════════════════════════════════════════════ */

.run-progress-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.run-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.run-difficulty {
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.run-difficulty.easy { background: var(--correct-soft); color: var(--correct); }
.run-difficulty.normal { background: var(--explore-soft); color: var(--explore); }
.run-difficulty.hard { background: rgba(212, 151, 106, 0.2); color: #d4976a; }
.run-difficulty.nightmare { background: var(--incorrect-soft); color: var(--incorrect); }

.run-wave {
  font-size: 0.9rem;
  font-weight: 600;
}

.run-progress {
  width: 100px;
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.run-progress .progress-fill {
  height: 100%;
  background: var(--glow-warm);
  border-radius: 3px;
  transition: width 0.3s;
}

.run-progress .progress-text {
  position: absolute;
  right: -35px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: var(--text-dim);
}

.run-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
}

.run-score { color: var(--glow-warm); }
.run-streak { color: var(--incorrect); }
.run-accuracy { color: var(--correct); }

.active-powerups {
  display: flex;
  gap: 0.5rem;
}

.active-powerup {
  position: relative;
  font-size: 1.25rem;
  padding: 0.25rem;
  background: var(--explore-soft);
  border-radius: 6px;
}

.active-powerup .duration {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 0.6rem;
  background: var(--bg-card);
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
  color: var(--text-dim);
}

/* Inventory Belt - Power-ups during boss battles */
.inventory-belt {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 4px;
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.inventory-belt.glowing {
  border-color: var(--gold);
  box-shadow: 0 0 20px var(--gold-glow);
  animation: beltGlow 1s ease infinite alternate;
}

@keyframes beltGlow {
  from { box-shadow: 0 0 15px var(--gold-glow); }
  to { box-shadow: 0 0 25px var(--gold-glow); }
}

.belt-slot {
  width: 48px;
  height: 48px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.belt-slot:hover:not(.empty) {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 4px 12px var(--gold-ghost);
}

.belt-slot.empty {
  opacity: 0.4;
  cursor: default;
}

.belt-slot .item-icon {
  font-size: 1.5rem;
}

.belt-slot .hotkey {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.55rem;
  color: var(--text-dim);
  background: var(--bg-deep);
  padding: 0.1rem 0.25rem;
  border-radius: 2px;
}

.belt-slot .quantity {
  position: absolute;
  top: 2px;
  left: 2px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   GAMIFICATION ENHANCEMENTS (7 PASSES)
   ═══════════════════════════════════════════════════════════════ */

/* PASS 1: Daily Challenges */
.daily-challenges {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.daily-challenges-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.daily-challenges-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--glow-warm);
}

.daily-challenges-timer {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.daily-challenge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem;
  background: var(--bg-card-hover);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  transition: all 0.2s;
}

.daily-challenge.completed {
  background: var(--correct-soft);
  border: 1px solid var(--correct);
}

.daily-challenge-icon {
  font-size: 1.5rem;
  min-width: 40px;
  text-align: center;
}

.daily-challenge-info {
  flex: 1;
}

.daily-challenge-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.daily-challenge-desc {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.daily-challenge-reward {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--glow-warm);
  padding: 0.25rem 0.5rem;
  background: rgba(201, 165, 92, 0.15);
  border-radius: 4px;
}

.daily-challenge.completed .daily-challenge-reward {
  color: var(--correct);
  background: rgba(90, 124, 101, 0.2);
}

.daily-bonus-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, var(--glow-warm) 0%, #c9a55c 100%);
  border-radius: 8px;
  color: #000;
  font-weight: 600;
  margin-top: 0.75rem;
}

.daily-bonus-banner.claimed {
  background: linear-gradient(135deg, var(--correct) 0%, #5a7c65 100%);
}

/* PASS 2: Combo System */
.combo-indicator {
  position: fixed;
  top: 80px;
  right: 20px;
  background: linear-gradient(135deg, #8b4049 0%, #d4976a 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1.1rem;
  z-index: 150;
  animation: comboPulse 0.5s ease infinite;
  box-shadow: 0 4px 20px rgba(139, 64, 73, 0.4);
  display: none;
}

.combo-indicator.active {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.combo-indicator .combo-timer {
  width: 30px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.combo-indicator .combo-timer-fill {
  height: 100%;
  background: white;
  transition: width 0.1s linear;
}

@keyframes comboPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.combo-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 30px rgba(139, 64, 73, 0.8), 0 0 60px rgba(212, 151, 106, 0.6);
  z-index: 200;
  pointer-events: none;
  animation: comboExplode 1s ease forwards;
}

@keyframes comboExplode {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}

/* PASS 3: Milestone Celebrations */
.milestone-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-card);
  border: 2px solid var(--glow-warm);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  z-index: 250;
  animation: milestoneAppear 0.5s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  max-width: 350px;
}

.milestone-popup .milestone-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: milestoneBounce 1s ease infinite;
}

@keyframes milestoneBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.milestone-popup .milestone-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--glow-warm);
  margin-bottom: 0.5rem;
}

.milestone-popup .milestone-reward {
  font-size: 1.25rem;
  color: var(--correct);
  margin-bottom: 1rem;
}

.milestone-popup .milestone-dismiss {
  padding: 0.75rem 1.5rem;
  background: var(--glow-warm);
  border: none;
  border-radius: 8px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s;
}

.milestone-popup .milestone-dismiss:hover {
  transform: scale(1.05);
}

@keyframes milestoneAppear {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Confetti effect */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 300;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  animation: confettiFall 3s linear forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* PASS 4: Study Calendar */
.study-calendar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.calendar-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
}

.day-streak-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  background: linear-gradient(135deg, #d4976a 0%, #8b4049 100%);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--text-dim);
  background: var(--bg-card-hover);
  border-radius: 4px;
}

.calendar-day.studied {
  background: var(--correct);
  color: white;
}

.calendar-day.today {
  border: 2px solid var(--glow-warm);
}

.calendar-day.today.studied {
  background: linear-gradient(135deg, var(--correct) 0%, var(--glow-warm) 100%);
}

.calendar-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

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

.calendar-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--glow-warm);
}

.calendar-stat-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* PASS 5: Mastery Tiers */
.mastery-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
}

.mastery-tier-badge.diamond {
  background: linear-gradient(135deg, #b9f2ff 0%, #89e0f2 100%);
  color: #0d4f5f;
  box-shadow: 0 0 10px rgba(185, 242, 255, 0.5);
}

.mastery-tier-badge.platinum {
  background: linear-gradient(135deg, #e5e4e2 0%, #c4c3c0 100%);
  color: #3d3d3d;
}

.mastery-tier-badge.gold {
  background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
  color: #5a4800;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.mastery-tier-badge.silver {
  background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%);
  color: #404040;
}

.mastery-tier-badge.bronze {
  background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);
  color: #fff;
}

.mastery-tier-badge.unranked {
  background: var(--bg-card-hover);
  color: var(--text-dim);
}

.tier-progress-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.25rem;
}

.tier-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.tier-progress-fill.diamond { background: linear-gradient(90deg, #89e0f2, #b9f2ff); }
.tier-progress-fill.platinum { background: linear-gradient(90deg, #a0a0a0, #e5e4e2); }
.tier-progress-fill.gold { background: linear-gradient(90deg, #ffb700, #ffd700); }
.tier-progress-fill.silver { background: linear-gradient(90deg, #808080, #c0c0c0); }
.tier-progress-fill.bronze { background: linear-gradient(90deg, #8b4513, #cd7f32); }

/* PASS 7: Seasonal Events */
.seasonal-banner {
  background: linear-gradient(135deg, var(--glow-warm) 0%, #c9a55c 100%);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
  animation: seasonalGlow 2s ease infinite;
}

@keyframes seasonalGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(201, 165, 92, 0.3); }
  50% { box-shadow: 0 0 30px rgba(201, 165, 92, 0.6); }
}

.seasonal-banner .event-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.seasonal-banner .event-icon {
  font-size: 1.5rem;
}

.seasonal-banner .event-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.seasonal-banner .event-desc {
  font-size: 0.75rem;
  opacity: 0.8;
}

.seasonal-banner .event-bonus {
  background: rgba(0, 0, 0, 0.2);
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Seasonal theme variations */
.seasonal-banner.winter {
  background: linear-gradient(135deg, var(--bronze) 0%, #93c5fd 100%);
}

.seasonal-banner.spooky {
  background: linear-gradient(135deg, #d4976a 0%, #7d6b8a 100%);
}

.seasonal-banner.hearts {
  background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
}

.seasonal-banner.flowers {
  background: linear-gradient(135deg, #f472b6 0%, #a3e635 100%);
}

/* XP Breakdown popup */
.xp-breakdown {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  background: var(--bg-card);
  border: 1px solid var(--glow-warm);
  border-radius: 12px;
  padding: 1rem;
  min-width: 200px;
  z-index: 150;
  animation: xpBreakdownSlide 0.3s ease;
}

@keyframes xpBreakdownSlide {
  0% { opacity: 0; transform: translateY(-50%) translateX(50px); }
  100% { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.xp-breakdown-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--glow-warm);
  margin-bottom: 0.5rem;
}

.xp-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  font-size: 0.85rem;
}

.xp-breakdown-row .label {
  color: var(--text-dim);
}

.xp-breakdown-row .value {
  color: var(--correct);
  font-weight: 600;
}

.xp-breakdown-row.lucky {
  color: var(--glow-warm);
  font-weight: 700;
}

.xp-breakdown-total {
  display: flex;
  justify-content: space-between;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-weight: 700;
  font-size: 1rem;
}

.xp-breakdown-total .value {
  color: var(--glow-warm);
}

/* Achievement notification variants */
.achievement-notification.daily-challenge-complete {
  border-color: var(--glow-warm);
  box-shadow: 0 0 40px rgba(201, 165, 92, 0.4);
}

.achievement-notification.daily-challenge-complete .title {
  color: var(--glow-warm);
}

.achievement-notification.daily-challenge-complete .reward,
.achievement-notification .reward {
  color: var(--correct);
  font-weight: 600;
  font-size: 0.9rem;
}

.achievement-notification.tier-up {
  border-color: var(--correct);
  box-shadow: 0 0 40px rgba(90, 124, 101, 0.4);
}

.achievement-notification.tier-up .title {
  color: var(--correct);
}

.achievement-notification.day-streak {
  border-color: #d4976a;
  box-shadow: 0 0 40px rgba(212, 151, 106, 0.4);
}

.achievement-notification.day-streak .title {
  color: #d4976a;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE GAUNTLET
   ═══════════════════════════════════════════════════════════════ */

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

  .gauntlet-stats {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .g-stat {
    flex: 1 0 40%;
  }

  .battle-actions {
    grid-template-columns: 1fr;
  }

  .player-status {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .bests-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .shop-grid {
    grid-template-columns: 1fr;
  }

  .score-row {
    flex-wrap: wrap;
  }

  .score-row .details {
    flex-basis: 100%;
    text-align: left;
    margin-top: 0.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TEST PREP GAUNTLET STYLES
   ═══════════════════════════════════════════════════════════════ */

.testprep-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Landing Page */
.testprep-landing {
  text-align: center;
}

.testprep-header h1 {
  font-size: 2rem;
  color: var(--glow-warm);
  margin-bottom: 0.5rem;
}

.testprep-subtitle {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.testprep-intro {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 2rem;
  text-align: left;
}

.testprep-intro .speaker {
  color: var(--glow-warm);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.testprep-intro p {
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
}

.testprep-stats-box {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.tp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tp-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--glow-warm);
}

.tp-label {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.testprep-start-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: linear-gradient(135deg, var(--glow-warm), #d97706);
  color: #000;
  border: none;
  border-radius: 12px;
  padding: 1.25rem 2.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin: 0 auto;
}

.testprep-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(201, 165, 92, 0.4);
}

.testprep-start-btn .btn-icon {
  font-size: 1.5rem;
}

.testprep-start-btn .btn-subtitle {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.8;
}

/* Button Row for Start Buttons */
.testprep-btn-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}

.testprep-btn-row .testprep-start-btn {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
}

.testprep-start-btn.testprep-secondary {
  background: linear-gradient(135deg, #7d6b8a, #6b5c75);
}

.testprep-start-btn.testprep-secondary:hover {
  box-shadow: 0 8px 25px rgba(125, 107, 138, 0.4);
}

.testprep-start-btn.testprep-lab {
  background: linear-gradient(135deg, #5a7c65, #5a7c65);
}

.testprep-start-btn.testprep-lab:hover {
  box-shadow: 0 8px 25px rgba(90, 124, 101, 0.4);
}

.testprep-start-btn.testprep-comprehensive {
  background: linear-gradient(135deg, #f472b6, #ec4899);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testprep-start-btn.testprep-comprehensive:hover {
  box-shadow: 0 8px 25px rgba(244, 114, 182, 0.4);
}

/* Topic Gauntlet Buttons */
.topic-gauntlets {
  margin-top: 2rem;
  text-align: center;
}

.topic-gauntlets h3 {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.topic-btn-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  max-width: 500px;
  margin: 0 auto;
}

.topic-gauntlet-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.topic-gauntlet-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--explore);
  transform: translateY(-2px);
}

.topic-gauntlet-btn .topic-icon {
  font-size: 1.5rem;
}

.topic-gauntlet-btn .topic-name {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 500;
}

@media (max-width: 500px) {
  .topic-btn-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Progress Bar with Ghost Line */
.testprep-progress-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.testprep-progress-bar {
  position: relative;
  height: 24px;
  background: var(--bg-deep);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.testprep-progress-bar .progress-ghost {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(201, 165, 92, 0.2);
  border-right: 2px dashed var(--glow-warm);
  transition: width 0.3s ease;
  z-index: 1;
}

.testprep-progress-bar .progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--correct), #5a7c65);
  border-radius: 12px;
  transition: width 0.3s ease;
  z-index: 2;
}

.testprep-progress-labels {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Question Type Indicator */
.testprep-question-type {
  text-align: center;
  margin-bottom: 1rem;
}

.type-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
}

.type-badge.scaffold {
  background: var(--explore-soft);
  color: var(--explore);
  border: 1px solid var(--explore);
}

.type-badge.main {
  background: var(--glow-warm-soft);
  color: var(--glow-warm);
  border: 1px solid var(--glow-warm);
  animation: pulse-main 1.5s ease infinite;
}

@keyframes pulse-main {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 165, 92, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(201, 165, 92, 0); }
}

/* Question Card */
.testprep-question-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
}

.testprep-question-card .question-text {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.testprep-question-card .options-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.testprep-question-card .option-btn {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  color: var(--text-primary);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}

.testprep-question-card .option-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--glow-warm);
}

.testprep-question-card .option-btn.correct {
  background: var(--correct-soft);
  border-color: var(--correct);
  color: var(--correct);
}

.testprep-question-card .option-btn.incorrect {
  background: var(--incorrect-soft);
  border-color: var(--incorrect);
  color: var(--incorrect);
}

.testprep-question-card .option-btn.disabled {
  pointer-events: none;
  opacity: 0.6;
}

.testprep-question-card .feedback {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.testprep-question-card .feedback.correct-feedback {
  background: var(--correct-soft);
  border: 1px solid var(--correct);
  color: var(--correct);
}

.feedback-tap-hint {
  margin-top: 1rem;
  font-size: 0.85rem;
  opacity: 0.7;
  font-style: italic;
}

.testprep-question-card .feedback.incorrect-feedback {
  background: var(--incorrect-soft);
  border: 1px solid var(--incorrect);
  color: var(--text-primary);
}

.testprep-question-card .feedback.gameover-feedback {
  background: linear-gradient(135deg, rgba(139, 64, 73, 0.15), rgba(139, 64, 73, 0.05));
  border: 2px solid var(--incorrect);
  padding: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  max-height: 60vh;
  overflow-y: auto;
}

/* Lifelines Bar */
.lifelines-bar {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.lifeline-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 70px;
}

.lifeline-btn:hover:not(.used):not(.disabled) {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.lifeline-btn.used,
.lifeline-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lifeline-icon {
  font-size: 1.5rem;
}

.lifeline-name {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.lifeline-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}

.streak-display {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(251, 146, 60, 0.1));
  border: 1px solid rgba(251, 146, 60, 0.5);
  border-radius: 20px;
}

.streak-icon {
  font-size: 1.2rem;
}

.streak-count {
  font-size: 1rem;
  font-weight: 700;
  color: #fb923c;
}

/* Eliminated options */
.option-btn.eliminated {
  opacity: 0.3;
  text-decoration: line-through;
  pointer-events: none;
}

/* Hint display */
.hint-display {
  background: linear-gradient(135deg, rgba(201, 165, 92, 0.15), rgba(201, 165, 92, 0.05));
  border: 1px solid rgba(201, 165, 92, 0.5);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.hint-display .hint-label {
  font-weight: 600;
  color: #c9a55c;
  margin-bottom: 0.5rem;
}

/* Extra life active indicator */
.extra-life-active {
  position: fixed;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, rgba(139, 64, 73, 0.9), rgba(139, 64, 73, 0.9));
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 100;
  animation: pulse 2s infinite;
}

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

@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* Game Over Overlay */
.testprep-gameover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.gameover-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  text-align: center;
}

.gameover-title {
  font-size: 2rem;
  color: var(--incorrect);
  margin-bottom: 1.5rem;
}

.gameover-title.victory {
  color: var(--correct);
}

.gameover-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.go-stat-main, .go-stat-best {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.go-label {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}

.go-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.go-stat-best .go-value {
  color: var(--glow-warm);
}

.go-percent {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.gameover-progress-bar {
  position: relative;
  height: 20px;
  background: var(--bg-deep);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.gameover-progress-bar .progress-ghost {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(201, 165, 92, 0.25);
  border-right: 2px dashed var(--glow-warm);
  z-index: 1;
}

.gameover-progress-bar .progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--incorrect);
  border-radius: 10px;
  z-index: 2;
}

.gameover-progress-bar .progress-fill.victory {
  background: var(--correct);
}

.gameover-details {
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
}

.gameover-details p {
  margin-bottom: 0.5rem;
}

.detail-label {
  color: var(--text-dim);
}

.gameover-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.go-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}

.go-btn.primary {
  background: var(--glow-warm);
  color: #000;
}

.go-btn.primary:hover {
  background: #d97706;
}

.go-btn.secondary {
  background: var(--bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.go-btn.secondary:hover {
  border-color: var(--glow-warm);
}

/* Responsive */
@media (max-width: 600px) {
  .testprep-stats-box {
    gap: 1rem;
  }

  .tp-value {
    font-size: 1.5rem;
  }

  .gameover-stats {
    flex-direction: column;
    gap: 1rem;
  }

  .gameover-actions {
    flex-direction: column;
  }
}

/* ============================================
   SCAFFOLD HINT SYSTEM
   ============================================ */

.scaffold-hint-btn {
  display: block;
  margin: 1rem auto 0;
  padding: 0.6rem 1.25rem;
  background: linear-gradient(135deg, #6b5c75 0%, #6b5c75 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.scaffold-hint-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

.hint-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hint-content {
  background: var(--bg-card, #1f2937);
  padding: 1.75rem;
  border-radius: 16px;
  max-width: 420px;
  width: 90%;
  border: 2px solid var(--explore, #7d6b8a);
  box-shadow: 0 8px 32px rgba(125, 107, 138, 0.3);
  animation: slideUp 0.25s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hint-content h3 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  color: var(--glow-warm, #c9a55c);
}

.hint-text {
  margin: 0 0 1.25rem;
  line-height: 1.6;
  color: var(--text-primary, #e8e0d5);
  font-size: 0.95rem;
}

.hint-context {
  background: rgba(125, 107, 138, 0.1);
  border: 1px solid rgba(125, 107, 138, 0.3);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.hint-context strong {
  color: var(--explore, #7d6b8a);
  display: block;
  margin-bottom: 0.5rem;
}

.hint-context em {
  color: var(--text-dim, #a89f91);
  font-style: italic;
}

.hint-close-btn {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: var(--explore, #7d6b8a);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.hint-close-btn:hover {
  background: #6b5c75;
}

/* ============================================
   VOCABULARY HOVER DEFINITIONS
   ============================================ */

.vocab-term {
  border-bottom: 1px dotted var(--explore, #7d6b8a);
  cursor: help;
  position: relative;
  color: inherit;
}

.vocab-term:hover,
.vocab-term:focus {
  color: var(--explore, #7d6b8a);
}

.vocab-term:hover::after,
.vocab-term:focus::after {
  content: attr(data-definition);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card, #1f2937);
  border: 1px solid var(--border, #374151);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  max-width: 320px;
  width: max-content;
  z-index: 1000;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-primary, #e8e0d5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  white-space: normal;
  text-align: left;
}

/* Arrow for tooltip */
.vocab-term:hover::before,
.vocab-term:focus::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border, #374151);
  z-index: 1001;
}

/* ============================================
   FF6-STYLE BATTLE SCENE
   ============================================ */

.battle-scene {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  background:
    linear-gradient(180deg, rgba(15, 10, 26, 0.85) 0%, rgba(26, 16, 48, 0.8) 40%, rgba(21, 8, 32, 0.9) 100%),
    url('../assets/backgrounds/cave-battle.png');
  background-size: cover, cover;
  background-position: center, center;
  border: 4px solid #2d1f4a;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* Monster Zone */
.battle-monster-zone {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  background: radial-gradient(ellipse at center bottom, rgba(125, 107, 138, 0.1) 0%, transparent 70%);
}

/* Monster HP */
.monster-hp-container {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  text-align: center;
}

.monster-name {
  font-family: 'Crimson Pro', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #e879f9;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px rgba(232, 121, 249, 0.5);
}

.monster-hp-bar {
  height: 20px;
  background: #1f1f2e;
  border: 2px solid #4a3a6a;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.monster-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b4049 0%, #d4976a 50%, #c9a55c 100%);
  border-radius: 8px;
  transition: width 0.3s ease;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
}

.monster-hp-fill.warning {
  background: linear-gradient(90deg, #8b4049 0%, #d4976a 100%);
}

.monster-hp-fill.critical {
  background: #8b4049;
  animation: hpPulse 0.5s ease infinite;
}

@keyframes hpPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.monster-hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  text-shadow: 1px 1px 2px black;
}

/* Monster Sprite Container */
.monster-sprite-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
  min-height: 140px;
  position: relative;
}

/* PNG Pixel Art Sprites - Using actual sprite images */
.pixel-sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(4);
  transition: transform 0.1s;
}

.pixel-sprite.shake {
  animation: monsterShake 0.3s ease;
}

@keyframes monsterShake {
  0%, 100% { transform: scale(4) translateX(0); }
  25% { transform: scale(4) translateX(-8px); }
  50% { transform: scale(4) translateX(8px); }
  75% { transform: scale(4) translateX(-4px); }
}

.pixel-sprite.defeated {
  animation: monsterDefeat 0.5s ease forwards;
}

@keyframes monsterDefeat {
  0% { transform: scale(4) rotate(0deg); opacity: 1; }
  50% { transform: scale(4) rotate(10deg); }
  100% { transform: scale(4) rotate(90deg) translateY(20px); opacity: 0.3; }
}

/* Monster Sprites - PNG images */
.monster-cell-slime {
  background-image: url('../assets/monsters/cell-slime.png');
}

.monster-mind-flayer {
  background-image: url('../assets/monsters/mind-flayer.png');
}

.monster-synapse-serpent {
  background-image: url('../assets/monsters/synapse-serpent.png');
}

.monster-tissue-titan {
  background-image: url('../assets/monsters/tissue-titan.png');
}

.monster-autonomic-specter {
  background-image: url('../assets/monsters/autonomic-specter.png');
}

.monster-eye-tyrant {
  background-image: url('../assets/monsters/eye-tyrant.png');
}

.monster-hormone-horror {
  background-image: url('../assets/monsters/hormone-horror.png');
}

/* Monster Taunt Bubble */
.monster-taunt {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #4a3a6a;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 0.9rem;
  color: #e2e8f0;
  max-width: 280px;
  text-align: center;
  margin-top: 0.5rem;
  animation: tauntBounce 0.3s ease;
}

@keyframes tauntBounce {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.monster-taunt.hit {
  color: #c9a55c;
  border-color: #c9a55c;
}

.monster-taunt.attack {
  color: #8b4049;
  border-color: #8b4049;
}

.monster-taunt.defeated {
  color: #a89f91;
  opacity: 0.6;
}

/* Battle Divider */
.battle-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
  background: linear-gradient(90deg, transparent, rgba(125, 107, 138, 0.3), transparent);
}

.battle-vs {
  font-family: 'Crimson Pro', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #c084fc;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.5);
  letter-spacing: 0.2em;
}

/* Battle Action Menu */
.battle-action-menu {
  flex: 1;
  background: linear-gradient(180deg, #0a0a14 0%, #12121f 100%);
  border-top: 3px solid #3a2a5a;
  padding: 1.25rem;
}

.action-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.action-label {
  font-family: 'Crimson Pro', serif;
  font-size: 1.1rem;
  color: #c9a55c;
  text-shadow: 0 0 8px rgba(201, 165, 92, 0.4);
}

.combo-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: #7d6b8a;
  opacity: 0;
  transition: opacity 0.2s;
}

.combo-counter.active {
  opacity: 1;
  animation: comboPulse 0.5s ease infinite;
}

@keyframes comboPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Damage Numbers */
#damageContainer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.damage-number {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
  animation: damageFloat 1s ease-out forwards;
  z-index: 100;
}

.damage-number.player-damage {
  color: #8b4049;
}

.damage-number.monster-damage {
  color: #c9a55c;
}

@keyframes damageFloat {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -30px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -60px) scale(0.8);
  }
}

/* Screen Flash Effects */
.battle-scene.flash-incorrect {
  animation: flashRed 0.2s ease;
}

@keyframes flashRed {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(139, 64, 73, 0.2); }
}

.battle-scene.flash-correct {
  animation: flashGreen 0.2s ease;
}

@keyframes flashGreen {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(34, 197, 94, 0.2); }
}

/* Battle Scene Responsive */
@media (max-width: 600px) {
  .battle-scene {
    min-height: 450px;
  }

  .battle-monster-zone {
    flex: 0 0 160px;
    padding: 1rem;
  }

  .pixel-sprite {
    transform: scale(4);
  }

  .pixel-sprite.shake {
    animation: monsterShakeMobile 0.3s ease;
  }

  @keyframes monsterShakeMobile {
    0%, 100% { transform: scale(4) translateX(0); }
    25% { transform: scale(4) translateX(-6px); }
    50% { transform: scale(4) translateX(6px); }
    75% { transform: scale(4) translateX(-3px); }
  }

  .monster-hp-container {
    width: 180px;
  }

  .monster-taunt {
    font-size: 0.8rem;
    max-width: 240px;
  }
}

/* ============================================
   PLAYER STATS BAR (Combat Encounter System)
   ============================================ */

.player-stats-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, rgba(20, 15, 35, 0.95) 0%, rgba(15, 10, 25, 0.9) 100%);
  border-bottom: 3px solid #3a2a5a;
}

.player-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
}

.player-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 6px rgba(125, 107, 138, 0.5));
}

.player-level {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  color: #7d6b8a;
  margin-top: 2px;
}

.player-hp-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Hearts Display (Zelda-style alternative) */
.player-hearts {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.heart {
  font-size: 1.25rem;
  transition: all 0.3s ease;
}

.heart.full {
  color: var(--heart-full);
  filter: drop-shadow(0 0 3px var(--heart-full));
}

.heart.half {
  color: var(--heart-full);
  opacity: 0.6;
}

.heart.empty {
  color: var(--heart-empty);
}

/* Heart damage animation */
.heart.damaged {
  animation: heartDamage 0.3s ease;
}

@keyframes heartDamage {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.6); }
}

/* Heart heal animation */
.heart.healed {
  animation: heartHeal 0.5s ease;
}

@keyframes heartHeal {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

.player-hp-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: #5a7c65;
}

.player-hp-bar {
  flex: 1;
  height: 18px;
  background: #1f1f2e;
  border: 2px solid #2d4a3a;
  border-radius: 9px;
  overflow: hidden;
  position: relative;
  max-width: 200px;
}

.player-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #5a7c65 0%, #4ade80 50%, #86efac 100%);
  border-radius: 7px;
  transition: width 0.3s ease;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
}

.player-hp-fill.warning {
  background: linear-gradient(90deg, #d4976a 0%, #c9a55c 100%);
}

.player-hp-fill.critical {
  background: #8b4049;
  animation: playerHpPulse 0.5s ease infinite;
}

@keyframes playerHpPulse {
  0%, 100% { opacity: 1; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3), 0 0 10px rgba(139, 64, 73, 0.5); }
  50% { opacity: 0.7; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3), 0 0 15px rgba(139, 64, 73, 0.8); }
}

.player-hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  color: white;
  text-shadow: 1px 1px 2px black;
}

.combat-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  min-width: 80px;
}

.kill-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: #a89f91;
}

/* Monster Info (Level + Name) */
.monster-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.monster-level {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: #d4976a;
  background: rgba(212, 151, 106, 0.2);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(212, 151, 106, 0.4);
}

/* Battle Phase Indicators */
.battle-phase {
  padding: 0.5rem 1rem;
  text-align: center;
}

.phase-combat {
  font-family: 'Crimson Pro', serif;
  font-size: 0.95rem;
  color: #d4976a;
  text-shadow: 0 0 8px rgba(212, 151, 106, 0.4);
}

.phase-victory {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  font-weight: 600;
  color: #5a7c65;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
  animation: victoryGlow 1s ease infinite;
}

@keyframes victoryGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(34, 197, 94, 0.5); }
  50% { text-shadow: 0 0 20px rgba(34, 197, 94, 0.8), 0 0 30px rgba(34, 197, 94, 0.4); }
}

/* Victory state */
.battle-scene.monster-defeated .battle-monster-zone {
  background: radial-gradient(ellipse at center bottom, rgba(34, 197, 94, 0.15) 0%, transparent 70%);
}

.battle-scene.monster-defeated .monster-hp-bar {
  border-color: #4a4a5a;
  opacity: 0.6;
}

/* Critical Damage Numbers */
.damage-number.critical {
  font-size: 2rem;
  color: #c9a55c !important;
  animation: critDamageFloat 1.2s ease-out forwards;
}

@keyframes critDamageFloat {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.5);
  }
  30% {
    transform: translate(-50%, -20px) scale(1.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -70px) scale(1);
  }
}

.damage-number.blocked {
  color: #a89f91 !important;
  font-size: 1.2rem;
}

/* Game Over Flash */
.battle-scene.flash-gameover {
  animation: flashGameOver 0.6s ease;
}

@keyframes flashGameOver {
  0%, 100% { background-color: transparent; }
  25% { background-color: rgba(139, 64, 73, 0.4); }
  50% { background-color: rgba(139, 64, 73, 0.2); }
  75% { background-color: rgba(139, 64, 73, 0.3); }
}

/* Responsive Player Stats */
@media (max-width: 600px) {
  .player-stats-bar {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }

  .player-portrait {
    min-width: 40px;
  }

  .player-icon {
    font-size: 1.25rem;
  }

  .player-hp-bar {
    max-width: 150px;
    height: 16px;
  }

  .player-hp-text {
    font-size: 0.6rem;
  }

  .combat-stats {
    min-width: 60px;
  }

  .combo-counter {
    font-size: 0.75rem;
  }

  .kill-count {
    font-size: 0.6rem;
  }

  .monster-info {
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* ============================================
   LIMIT BREAK EFFECTS
   ============================================ */

/* Limit Break Flash */
.battle-scene.limit-break-flash {
  animation: limitBreakFlash 0.8s ease;
}

@keyframes limitBreakFlash {
  0% { filter: brightness(1); }
  15% { filter: brightness(3) saturate(0); }
  30% { filter: brightness(2) saturate(0.5); }
  50% { filter: brightness(1.5) saturate(1); }
  100% { filter: brightness(1); }
}

/* Limit Break Overlay */
.limit-break-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, transparent 70%);
  z-index: 100;
  pointer-events: none;
  animation: limitBreakOverlayPulse 1.5s ease forwards;
}

@keyframes limitBreakOverlayPulse {
  0% { opacity: 0; transform: scale(0.5); }
  20% { opacity: 1; transform: scale(1.2); }
  40% { transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.limit-break-text {
  font-family: 'Crimson Pro', serif;
  font-size: 3rem;
  font-weight: 700;
  color: #ffd700;
  text-shadow:
    0 0 20px #ffd700,
    0 0 40px #ff8c00,
    0 0 60px #ff4500,
    2px 2px 0 #000;
  animation: limitBreakTextPulse 0.5s ease infinite alternate;
}

@keyframes limitBreakTextPulse {
  0% { transform: scale(1); text-shadow: 0 0 20px #ffd700, 0 0 40px #ff8c00, 2px 2px 0 #000; }
  100% { transform: scale(1.1); text-shadow: 0 0 30px #ffd700, 0 0 60px #ff8c00, 0 0 80px #ff4500, 2px 2px 0 #000; }
}

/* Screen Shake */
.battle-scene.screen-shake {
  animation: screenShake 0.5s ease;
}

@keyframes screenShake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-10px) rotate(-1deg); }
  20% { transform: translateX(10px) rotate(1deg); }
  30% { transform: translateX(-8px) rotate(-0.5deg); }
  40% { transform: translateX(8px) rotate(0.5deg); }
  50% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
  90% { transform: translateX(-1px); }
}

/* Devastating Counter Flash */
.battle-scene.flash-devastating {
  animation: flashDevastating 0.8s ease;
}

@keyframes flashDevastating {
  0% { filter: brightness(1); }
  10% { filter: brightness(0.3) sepia(1) hue-rotate(-30deg); }
  20% { filter: brightness(2) sepia(0.5) hue-rotate(-30deg); }
  40% { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

/* Victory State */
.battle-scene.victory {
  background: linear-gradient(180deg,
    rgba(34, 197, 94, 0.1) 0%,
    rgba(15, 10, 25, 0.95) 30%,
    rgba(10, 5, 20, 0.95) 100%);
}

.battle-scene.victory .monster-sprite-container {
  filter: grayscale(0.8) brightness(0.5);
}

/* Phase Labels */
.phase-limit-break {
  font-family: 'Crimson Pro', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  animation: limitBreakReady 1s ease infinite;
}

@keyframes limitBreakReady {
  0%, 100% {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 30px rgba(255, 140, 0, 0.5);
    transform: scale(1.05);
  }
}

/* Monster Triumph (after devastating counter) */
.monster-taunt.monster-triumph {
  color: #8b4049 !important;
  animation: monsterTriumph 0.5s ease;
}

@keyframes monsterTriumph {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); color: #ff0000; }
  100% { transform: scale(1); }
}

/* Monster Weakened (at 1 HP, ready for limit break) */
.monster-taunt.monster-weak {
  color: #c9a55c !important;
  font-style: italic;
}

.monster-hp-fill.critical {
  animation: criticalPulse 0.5s ease infinite;
}

@keyframes criticalPulse {
  0%, 100% { opacity: 1; background: #8b4049; }
  50% { opacity: 0.6; background: #8b4049; }
}

/* ═══════════════════════════════════════════════════════════════
   ADAPTIVE ENGINE STYLES
   ═══════════════════════════════════════════════════════════════ */

/* Adaptive Mentor Message - Base */
.adaptive-mentor-message {
  background: linear-gradient(135deg, rgba(201, 165, 92, 0.1), rgba(212, 151, 106, 0.05));
  border: 1px solid rgba(201, 165, 92, 0.3);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  animation: mentorFadeIn 0.4s ease;
}

.adaptive-mentor-message .mentor-speaker {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--glow-warm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.adaptive-mentor-message p {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}

/* Ms. Luminara Style (default - warm amber) */
.adaptive-mentor-message.luminara {
  background: linear-gradient(135deg, rgba(201, 165, 92, 0.1), rgba(212, 151, 106, 0.05));
  border-color: rgba(201, 165, 92, 0.3);
}

.adaptive-mentor-message.luminara .mentor-speaker {
  color: var(--glow-warm);
}

@keyframes mentorFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Adaptive Intervention */
.adaptive-intervention {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(125, 107, 138, 0.1);
  border: 1px solid rgba(125, 107, 138, 0.3);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  animation: interventionPulse 0.5s ease;
}

.adaptive-intervention .intervention-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.adaptive-intervention p {
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

/* Intervention type variants */
.adaptive-intervention.correction {
  background: rgba(139, 64, 73, 0.1);
  border-color: rgba(139, 64, 73, 0.3);
}

.adaptive-intervention.pattern_guidance {
  background: rgba(125, 107, 93, 0.1);
  border-color: rgba(125, 107, 93, 0.3);
}

.adaptive-intervention.encouragement {
  background: rgba(90, 124, 101, 0.1);
  border-color: rgba(90, 124, 101, 0.3);
}

.adaptive-intervention.conceptual_bridge {
  background: rgba(201, 165, 92, 0.1);
  border-color: rgba(201, 165, 92, 0.3);
}

@keyframes interventionPulse {
  0% { opacity: 0; transform: scale(0.95); }
  50% { transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* Adaptive Level Indicator (optional - can be added to UI) */
.adaptive-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.adaptive-level-badge.heavy {
  background: rgba(139, 64, 73, 0.2);
  color: #8b4049;
}

.adaptive-level-badge.moderate {
  background: rgba(201, 165, 92, 0.2);
  color: #c9a55c;
}

.adaptive-level-badge.light {
  background: rgba(125, 107, 93, 0.2);
  color: var(--bronze);
}

.adaptive-level-badge.challenge {
  background: rgba(90, 124, 101, 0.2);
  color: #5a7c65;
}

/* Velocity Indicator */
.velocity-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.velocity-indicator.accelerating {
  color: #5a7c65;
}

.velocity-indicator.decelerating {
  color: #8b4049;
}

.velocity-indicator .arrow {
  font-size: 0.9rem;
}

/* Break Suggestion Modal */
.break-suggestion {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  animation: fadeIn 0.3s ease;
}

.break-suggestion-content {
  background: var(--bg-card);
  border: 1px solid var(--border-warm);
  border-radius: 16px;
  padding: 2rem;
  max-width: 400px;
  text-align: center;
}

.break-suggestion-content h3 {
  font-size: 1.3rem;
  color: var(--glow-warm);
  margin-bottom: 1rem;
}

.break-suggestion-content p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.break-suggestion-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.break-btn {
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}

.break-btn.take-break {
  background: var(--glow-warm);
  color: #000;
}

.break-btn.continue {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.break-btn:hover {
  transform: translateY(-1px);
}

/* ============================================
   CONFUSED WORDS - RIGHT-CLICK CONTEXT MENU
   ============================================ */

.confused-context-menu {
  position: fixed;
  z-index: 10000;
  background: var(--bg-card, #1f2937);
  border: 1px solid var(--border, #374151);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
}

.confused-context-menu.visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.confused-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  cursor: pointer;
  transition: background 0.1s;
  color: var(--text-primary, #e8e0d5);
}

.confused-menu-item:hover {
  background: rgba(201, 165, 92, 0.1);
}

.confused-menu-item .menu-icon {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
}

.confused-menu-item .menu-text {
  flex: 1;
  font-size: 0.9rem;
}

.confused-menu-item .menu-badge {
  background: var(--glow-warm, #c9a55c);
  color: #000;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
}

.confused-menu-divider {
  height: 1px;
  background: var(--border, #374151);
  margin: 0.35rem 0;
}

/* ============================================
   CONFUSED WORDS - FLAGGED POPUP
   ============================================ */

.confused-popup {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 10001;
  background: var(--bg-card, #1f2937);
  border: 1px solid var(--border-warm, rgba(201, 165, 92, 0.3));
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  max-width: 340px;
  padding: 1rem 1.25rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
}

.confused-popup.visible {
  opacity: 1;
  transform: translateY(0);
}

.confused-popup .popup-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.confused-popup .popup-icon {
  font-size: 1.2rem;
}

.confused-popup .popup-title {
  font-weight: 600;
  color: var(--glow-warm, #c9a55c);
  font-size: 1rem;
}

.confused-popup .popup-definition {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary, #e8e0d5);
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: rgba(125, 107, 138, 0.1);
  border-radius: 8px;
  border-left: 3px solid var(--explore, #7d6b8a);
}

.confused-popup .popup-no-def {
  font-size: 0.85rem;
  color: var(--text-secondary, #a89f91);
  font-style: italic;
  margin-bottom: 0.5rem;
}

.confused-popup .popup-footer {
  font-size: 0.75rem;
  color: var(--correct, #5a7c65);
}

/* ============================================
   CONFUSED WORDS - REVIEW PANEL
   ============================================ */

.confused-review-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 450px;
  height: 100vh;
  z-index: 10002;
  background: var(--bg-deep, #1a1612);
  border-left: 1px solid var(--border, #374151);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.confused-review-panel.visible {
  transform: translateX(0);
}

.review-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border, #374151);
  background: var(--bg-card, #1f2937);
}

.review-panel-header h2 {
  font-family: 'Crimson Pro', serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--glow-warm, #c9a55c);
  margin: 0;
}

.review-panel-header .word-count {
  font-size: 1rem;
  color: var(--text-secondary, #a89f91);
  font-weight: 400;
}

.review-close-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary, #a89f91);
  font-size: 1.75rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.15s;
}

.review-close-btn:hover {
  color: var(--text-primary, #e8e0d5);
}

.review-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border, #374151);
}

.review-action-btn {
  padding: 0.5rem 1rem;
  background: var(--bg-card, #1f2937);
  border: 1px solid var(--border, #374151);
  border-radius: 8px;
  color: var(--text-primary, #e8e0d5);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s;
}

.review-action-btn:hover {
  background: var(--bg-card-hover, #2d261f);
  border-color: var(--glow-warm, #c9a55c);
}

.review-action-btn.danger:hover {
  border-color: var(--incorrect, #8b4049);
  color: var(--incorrect, #8b4049);
}

.review-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
}

.review-empty .empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.review-empty p {
  color: var(--text-secondary, #a89f91);
  margin: 0;
}

.review-empty .empty-hint {
  font-size: 0.85rem;
  margin-top: 0.5rem;
  color: var(--text-dim, #64748b);
}

.review-word-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.review-word-card {
  background: var(--bg-card, #1f2937);
  border: 1px solid var(--border, #374151);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  animation: slideIn 0.3s ease;
}

.review-word-card.reviewed {
  opacity: 0.7;
  border-color: var(--correct, #5a7c65);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

.word-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.word-term {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--glow-warm, #c9a55c);
}

.word-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.word-action-btn {
  background: transparent;
  border: 1px solid var(--border, #374151);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary, #a89f91);
}

.word-action-btn:hover {
  background: var(--correct-soft, rgba(90, 124, 101, 0.15));
  border-color: var(--correct, #5a7c65);
  color: var(--correct, #5a7c65);
}

.word-action-btn.delete:hover {
  background: var(--incorrect-soft, rgba(139, 64, 73, 0.15));
  border-color: var(--incorrect, #8b4049);
  color: var(--incorrect, #8b4049);
}

.reviewed-badge {
  font-size: 0.75rem;
  color: var(--correct, #5a7c65);
  padding: 0.25rem 0.5rem;
  background: var(--correct-soft, rgba(90, 124, 101, 0.15));
  border-radius: 4px;
}

.word-definition {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary, #e8e0d5);
  padding: 0.75rem;
  background: rgba(125, 107, 138, 0.08);
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.word-no-definition {
  font-size: 0.85rem;
  padding: 0.5rem 0;
}

.word-no-definition a {
  color: var(--explore, #7d6b8a);
  text-decoration: none;
}

.word-no-definition a:hover {
  text-decoration: underline;
}

.word-context {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-dim, #64748b);
  padding: 0.5rem 0;
  border-top: 1px solid var(--border, #374151);
  margin-top: 0.5rem;
}

.word-meta {
  font-size: 0.7rem;
  color: var(--text-dim, #64748b);
  margin-top: 0.5rem;
}

/* Mobile responsive for review panel */
@media (max-width: 480px) {
  .confused-review-panel {
    max-width: 100%;
  }

  .confused-popup {
    right: 1rem;
    left: 1rem;
    max-width: none;
  }
}

/* ============================================
   SESSION CONTINUITY - SAVE PROMPT
   ============================================ */

.session-save-prompt {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.session-save-prompt.visible {
  opacity: 1;
  visibility: visible;
}

.save-prompt-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.save-prompt-dialog {
  position: relative;
  background: var(--bg-card, #1f2937);
  border: 1px solid var(--border-warm, rgba(201, 165, 92, 0.3));
  border-radius: 16px;
  padding: 1.75rem 2rem;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.3s;
}

.session-save-prompt.visible .save-prompt-dialog {
  transform: scale(1);
}

.save-prompt-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.save-prompt-header .save-icon {
  font-size: 1.75rem;
}

.save-prompt-header h2 {
  font-family: 'Crimson Pro', serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--glow-warm, #c9a55c);
  margin: 0;
}

.save-prompt-stats {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border, #374151);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  color: var(--text-secondary, #a89f91);
  font-size: 0.9rem;
}

.stat-value {
  color: var(--text-primary, #e8e0d5);
  font-weight: 500;
  font-size: 0.9rem;
}

.stat-value.topics {
  max-width: 180px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.save-prompt-note {
  margin-bottom: 1.5rem;
}

.save-prompt-note label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary, #a89f91);
  margin-bottom: 0.5rem;
}

.save-prompt-note textarea {
  width: 100%;
  min-height: 80px;
  background: var(--bg-deep, #1a1612);
  border: 1px solid var(--border, #374151);
  border-radius: 8px;
  padding: 0.75rem;
  color: var(--text-primary, #e8e0d5);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.save-prompt-note textarea:focus {
  outline: none;
  border-color: var(--glow-warm, #c9a55c);
}

.save-prompt-note textarea::placeholder {
  color: var(--text-dim, #64748b);
}

.save-prompt-actions {
  display: flex;
  gap: 0.75rem;
}

.save-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.save-btn.primary {
  background: var(--glow-warm, #c9a55c);
  color: #000;
  border: none;
}

.save-btn.primary:hover {
  background: #c9a55c;
  transform: translateY(-1px);
}

.save-btn.secondary {
  background: transparent;
  color: var(--text-secondary, #a89f91);
  border: 1px solid var(--border, #374151);
}

.save-btn.secondary:hover {
  color: var(--text-primary, #e8e0d5);
  border-color: var(--text-secondary, #a89f91);
}

/* Session Save Toast */
.session-save-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--correct, #5a7c65);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(90, 124, 101, 0.3);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 10011;
}

.session-save-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   SESSION CONTINUITY - WELCOME BACK BANNER
   ============================================ */

.welcome-back-banner {
  background: linear-gradient(135deg, rgba(201, 165, 92, 0.1) 0%, rgba(125, 107, 138, 0.05) 100%);
  border: 1px solid var(--border-warm, rgba(201, 165, 92, 0.3));
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
}

.welcome-back-banner.visible {
  opacity: 1;
  transform: translateY(0);
}

.welcome-content {
  max-width: 600px;
  margin: 0 auto;
}

.welcome-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.welcome-icon {
  font-size: 1.4rem;
}

.welcome-text {
  font-family: 'Crimson Pro', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--glow-warm, #c9a55c);
}

.welcome-details {
  margin-bottom: 1rem;
}

.welcome-details p {
  margin: 0.3rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary, #a89f91);
}

.welcome-details strong {
  color: var(--text-primary, #e8e0d5);
}

.session-note-display {
  color: var(--explore, #7d6b8a) !important;
  padding-top: 0.5rem;
}

.welcome-actions {
  display: flex;
  gap: 0.75rem;
}

.welcome-btn {
  padding: 0.5rem 1rem;
  background: var(--bg-card, #1f2937);
  border: 1px solid var(--border, #374151);
  border-radius: 6px;
  color: var(--text-primary, #e8e0d5);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}

.welcome-btn:hover {
  background: var(--bg-card-hover, #2d261f);
  border-color: var(--glow-warm, #c9a55c);
}

.welcome-btn.dismiss {
  background: transparent;
  color: var(--text-dim, #64748b);
}

.welcome-btn.dismiss:hover {
  color: var(--text-secondary, #a89f91);
  border-color: var(--text-dim, #64748b);
}

/* ============================================
   SESSION CONTINUITY - HISTORY PANEL
   ============================================ */

.session-history-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  z-index: 10005;
  background: var(--bg-deep, #1a1612);
  border-left: 1px solid var(--border, #374151);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.session-history-panel.visible {
  transform: translateX(0);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border, #374151);
  background: var(--bg-card, #1f2937);
}

.history-header h2 {
  font-family: 'Crimson Pro', serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--glow-warm, #c9a55c);
  margin: 0;
}

.history-count {
  color: var(--text-secondary, #a89f91);
  font-size: 1rem;
}

.history-close {
  background: transparent;
  border: none;
  color: var(--text-secondary, #a89f91);
  font-size: 1.75rem;
  cursor: pointer;
  line-height: 1;
}

.history-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-dim, #64748b);
  padding: 2rem;
  text-align: center;
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.session-card {
  background: var(--bg-card, #1f2937);
  border: 1px solid var(--border, #374151);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.session-card.auto-saved {
  opacity: 0.7;
  border-style: dashed;
}

.session-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.session-date {
  font-size: 0.85rem;
  color: var(--glow-warm, #c9a55c);
  font-weight: 500;
}

.session-duration {
  font-size: 0.8rem;
  color: var(--text-dim, #64748b);
}

.session-card-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.session-stat {
  font-size: 0.8rem;
  color: var(--text-secondary, #a89f91);
}

.session-stat strong {
  color: var(--text-primary, #e8e0d5);
}

.session-topics {
  font-size: 0.8rem;
  color: var(--text-dim, #64748b);
  margin-bottom: 0.5rem;
}

.session-note {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--explore, #7d6b8a);
  padding: 0.5rem;
  background: rgba(125, 107, 138, 0.1);
  border-radius: 6px;
  margin-top: 0.5rem;
}

/* ============================================
   ANATOMY DIAGRAMS - INLINE & MODAL
   ============================================ */

/* Inline diagram display (shown with each question) */
.question-diagram-container {
  margin: 1rem 0;
  display: flex;
  justify-content: center;
}

.question-diagram-wrapper {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.75rem;
  max-width: 400px;
  width: 100%;
}

.question-diagram-img {
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  border-radius: 8px;
  cursor: zoom-in;
  transition: transform 0.2s, box-shadow 0.2s;
  background: rgba(255, 255, 255, 0.95);
}

.question-diagram-img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(125, 107, 138, 0.3);
}

.question-diagram-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0 0.25rem;
  font-size: 0.75rem;
}

.question-diagram-caption .diagram-label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.question-diagram-caption .diagram-attribution {
  color: rgba(125, 107, 138, 0.8);
  text-decoration: none;
  font-size: 0.7rem;
  margin-left: 0.5rem;
}

.question-diagram-caption .diagram-attribution:hover {
  color: var(--explore, #7d6b8a);
  text-decoration: underline;
}

/* Mobile adjustments for inline diagrams */
@media (max-width: 600px) {
  .question-diagram-wrapper {
    max-width: 100%;
    padding: 0.5rem;
  }

  .question-diagram-img {
    max-height: 200px;
  }

  .question-diagram-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .question-diagram-caption .diagram-attribution {
    margin-left: 0;
  }
}

/* Legacy button style (fallback) */
.show-diagram-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: rgba(125, 107, 138, 0.15);
  border: 1px solid var(--explore, #7d6b8a);
  border-radius: 8px;
  color: var(--explore, #7d6b8a);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 0.75rem;
}

.show-diagram-btn:hover:not(:disabled) {
  background: rgba(125, 107, 138, 0.25);
  transform: translateY(-1px);
}

.show-diagram-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.show-diagram-btn .btn-icon {
  font-size: 1rem;
}

/* Diagram Modal */
.diagram-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.diagram-modal.visible {
  opacity: 1;
  visibility: visible;
}

.diagram-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.diagram-modal-content {
  position: relative;
  background: var(--bg-card, #1f2937);
  border: 1px solid var(--border, #374151);
  border-radius: 16px;
  max-width: 700px;
  max-height: 90vh;
  width: 95%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95);
  transition: transform 0.3s;
}

.diagram-modal.visible .diagram-modal-content {
  transform: scale(1);
}

.diagram-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border, #374151);
}

.diagram-modal-header h3 {
  font-family: 'Crimson Pro', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--glow-warm, #c9a55c);
  margin: 0;
}

.diagram-modal-close {
  background: transparent;
  border: none;
  color: var(--text-secondary, #a89f91);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

.diagram-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.diagram-modal-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border, #374151);
  text-align: center;
}

.diagram-attribution {
  font-size: 0.75rem;
  color: var(--text-dim, #64748b);
  margin: 0;
}

.diagram-attribution a {
  color: var(--explore, #7d6b8a);
}

/* Diagram Viewer */
.diagram-viewer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.diagram-main {
  text-align: center;
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagram-main img {
  max-width: 100%;
  max-height: 400px;
  cursor: zoom-in;
  border-radius: 4px;
}

.diagram-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.diagram-title {
  font-size: 0.9rem;
  color: var(--text-primary, #e8e0d5);
  font-weight: 500;
}

.diagram-source {
  font-size: 0.75rem;
  color: var(--explore, #7d6b8a);
}

.diagram-thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0;
}

.diagram-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 2px solid var(--border, #374151);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
  background: #fff;
}

.diagram-thumb:hover {
  border-color: var(--text-secondary, #a89f91);
}

.diagram-thumb.active {
  border-color: var(--glow-warm, #c9a55c);
}

.diagram-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-dim, #64748b);
}

/* Diagram Toast */
.diagram-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 10021;
  background: var(--bg-card, #1f2937);
  border: 1px solid var(--border, #374151);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  max-width: 300px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
}

.diagram-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.diagram-toast p {
  margin: 0 0 0.5rem 0;
  color: var(--text-secondary, #a89f91);
  font-size: 0.9rem;
}

.diagram-toast a {
  color: var(--explore, #7d6b8a);
  font-size: 0.85rem;
}

/* Diagram button container */
.diagram-button-container {
  margin: 0.75rem 0;
}

.show-diagram-btn.has-local {
  border-color: var(--correct, #5a7c65);
  color: var(--correct, #5a7c65);
  background: rgba(90, 124, 101, 0.1);
}

.show-diagram-btn.has-local:hover {
  background: rgba(90, 124, 101, 0.2);
}

/* Diagram SVG/object styling */
.diagram-svg {
  max-width: 100%;
  max-height: 400px;
  display: block;
  margin: 0 auto;
}

.diagram-main {
  position: relative;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  min-height: 200px;
}

/* Annotation overlay */
.diagram-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.diagram-overlay .annotation-group {
  opacity: 0.95;
}

.diagram-overlay .highlight-pulse {
  animation: highlightPulse 2s ease-in-out infinite;
}

@keyframes highlightPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Diagram controls */
.diagram-controls {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.diagram-ctrl-btn {
  padding: 0.5rem 0.75rem;
  background: var(--bg-card, #1f2937);
  border: 1px solid var(--border, #374151);
  border-radius: 6px;
  color: var(--text-secondary, #a89f91);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s;
}

.diagram-ctrl-btn:hover {
  background: var(--bg-card-hover, #2d261f);
  border-color: var(--glow-warm, #c9a55c);
  color: var(--glow-warm, #c9a55c);
}

/* Mobile responsive */
@media (max-width: 480px) {
  .session-history-panel {
    max-width: 100%;
  }

  .diagram-modal-content {
    max-height: 95vh;
    border-radius: 12px 12px 0 0;
    margin-top: auto;
  }

  .diagram-main img {
    max-height: 280px;
  }

  .diagram-svg {
    max-height: 280px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SCAFFOLD IMAGES PANEL - Click-to-Load Multiple Images
   ═══════════════════════════════════════════════════════════════ */

.scaffold-images-panel {
  margin: 1rem 0;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.scaffold-images-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(125, 107, 93, 0.1);
  border: none;
  color: var(--text-primary, #e2e8f0);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}

.scaffold-images-toggle:hover {
  background: rgba(125, 107, 93, 0.2);
}

.scaffold-images-toggle .toggle-icon {
  font-size: 1.1rem;
  margin-right: 0.5rem;
}

.scaffold-images-toggle .toggle-text {
  flex: 1;
  text-align: left;
}

.scaffold-images-toggle .toggle-arrow {
  font-size: 0.8rem;
  color: var(--text-secondary, #a89f91);
  transition: transform 0.2s;
}

.scaffold-images-content {
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
}

.scaffold-images-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary, #a89f91);
  font-style: italic;
}

.scaffold-images-empty {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-dim, #64748b);
  font-style: italic;
}

.scaffold-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.scaffold-image-item {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.scaffold-image-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.scaffold-image {
  width: 100%;
  height: 100px;
  object-fit: contain;
  background: #fff;
  padding: 0.25rem;
}

.scaffold-image-caption {
  padding: 0.4rem 0.5rem;
  background: var(--bg-card, #1f2937);
  color: var(--text-secondary, #a89f91);
  font-size: 0.7rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Comprehensive exam specific - larger images */
.comprehensive-exam .scaffold-images-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.comprehensive-exam .scaffold-image {
  height: 140px;
}

/* Mobile responsive for scaffold images */
@media (max-width: 480px) {
  .scaffold-images-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .scaffold-image {
    height: 80px;
  }

  .scaffold-image-caption {
    font-size: 0.65rem;
    padding: 0.3rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MULTI-IMAGE DISPLAY - Multiple images per question
   ═══════════════════════════════════════════════════════════════ */

.question-multi-images {
  margin: 1rem 0;
}

.multi-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
  justify-items: center;
}

.multi-image-item {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  max-width: 180px;
  width: 100%;
}

.multi-image-item:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.multi-image-thumb {
  width: 100%;
  height: 90px;
  object-fit: contain;
  background: #fff;
  padding: 0.25rem;
}

.multi-image-label {
  padding: 0.4rem 0.5rem;
  background: var(--bg-card, #1f2937);
  color: var(--text-secondary, #a89f91);
  font-size: 0.7rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Larger images for comprehensive exams */
.comprehensive-exam .multi-images-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.comprehensive-exam .multi-image-thumb {
  height: 120px;
}

/* Mobile responsive for multi-image */
@media (max-width: 480px) {
  .multi-images-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .multi-image-thumb {
    height: 70px;
  }

  .multi-image-label {
    font-size: 0.6rem;
    padding: 0.3rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CARD BATTLE SYSTEM - Slay the Spire Style
   ═══════════════════════════════════════════════════════════════ */

/* Card Hand Container */
.card-hand {
  display: flex;
  justify-content: center;
  padding: 1rem;
  perspective: 1000px;
  min-height: 200px;
}

.card-hand > * {
  margin-left: -30px;
}

.card-hand > *:first-child {
  margin-left: 0;
}

/* Individual Card */
.card {
  width: 120px;
  height: 170px;
  background: var(--bg-card);
  border: 2px solid var(--rarity-color, var(--border));
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.card:hover {
  transform: translateY(-20px) scale(1.1);
  z-index: 10;
  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

.card.playable {
  cursor: pointer;
}

.card.unplayable {
  opacity: 0.6;
  cursor: not-allowed;
}

.card.selected {
  transform: translateY(-30px) scale(1.15);
  box-shadow: 0 0 20px var(--rarity-color);
}

/* Card Cost (Energy) */
.card-cost {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 28px;
  height: 28px;
  background: var(--bg-deep);
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gold);
}

/* Card Emoji/Icon */
.card-emoji {
  font-size: 2rem;
  margin: 0.5rem 0;
}

/* Card Name */
.card-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 0.25rem;
}

/* Card Type */
.card-type {
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

/* Card Description */
.card-description {
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.3;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
}

/* Card Rarity Badge */
.card-rarity {
  position: absolute;
  bottom: 4px;
  font-size: 0.5rem;
  text-transform: uppercase;
  color: var(--rarity-color);
  letter-spacing: 0.05em;
}

/* Card Type Colors */
.card-attack {
  border-color: #c75050;
}
.card-attack .card-cost {
  border-color: #c75050;
  color: #c75050;
}

.card-defense {
  border-color: #5090c7;
}
.card-defense .card-cost {
  border-color: #5090c7;
  color: #5090c7;
}

.card-skill {
  border-color: #50c790;
}
.card-skill .card-cost {
  border-color: #50c790;
  color: #50c790;
}

.card-power {
  border-color: #c7a050;
}
.card-power .card-cost {
  border-color: #c7a050;
  color: #c7a050;
}

/* Rarity Glow Effects */
.card-rare:hover {
  box-shadow: 0 0 15px rgba(90, 127, 198, 0.5);
}

.card-legendary:hover {
  box-shadow: 0 0 20px rgba(201, 165, 92, 0.6);
  animation: legendary-glow 2s ease-in-out infinite;
}

@keyframes legendary-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(201, 165, 92, 0.4); }
  50% { box-shadow: 0 0 30px rgba(201, 165, 92, 0.8); }
}

/* Energy Display */
.energy-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-elevated);
  border-radius: 20px;
  border: 1px solid var(--gold);
}

.energy-orb {
  width: 32px;
  height: 32px;
  background: radial-gradient(circle at 30% 30%, #ffd700, #c9a55c, #8b7355);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--bg-deep);
  box-shadow: 0 0 10px rgba(201, 165, 92, 0.5);
}

.energy-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Card Reward Selection */
.card-reward-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
}

.card-reward-title {
  font-size: 1.5rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.card-reward-choices {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.card-reward-choices .card {
  transition: all 0.3s ease;
}

.card-reward-choices .card:hover {
  transform: translateY(-10px) scale(1.05);
}

.skip-reward-btn {
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: 1px solid var(--text-dim);
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.skip-reward-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}

/* Combat Status Bar */
.combat-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.combat-buffs {
  display: flex;
  gap: 0.5rem;
}

.buff-icon {
  width: 28px;
  height: 28px;
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  position: relative;
}

.buff-count {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: var(--gold);
  color: var(--bg-deep);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 8px;
}

/* Draw/Discard Piles */
.deck-piles {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.pile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  border-radius: 4px;
  cursor: pointer;
}

.pile-icon {
  font-size: 1.2rem;
}

.pile-count {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* End Turn Button */
.end-turn-btn {
  padding: 0.75rem 2rem;
  background: var(--gold);
  border: none;
  border-radius: 4px;
  color: var(--bg-deep);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.end-turn-btn:hover {
  background: #d4b068;
  transform: scale(1.05);
}

.end-turn-btn:disabled {
  background: var(--text-dim);
  cursor: not-allowed;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   CARD BATTLE UI - Full Screen Battle Arena
   ═══════════════════════════════════════════════════════════════ */

.card-battle-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-battle-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
}

.card-battle-arena {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 100%;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: linear-gradient(180deg, var(--bg-deep) 0%, #0d0b09 100%);
  border: 2px solid var(--border-warm);
  border-radius: 12px;
  overflow: hidden;
}

.card-battle-arena.boss-attacking {
  animation: screen-shake 0.3s ease;
}

@keyframes screen-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Boss Section */
.card-battle-boss-section {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

.card-battle-boss-section .boss-display {
  text-align: center;
  padding: 1rem 2rem;
  background: var(--bg-elevated);
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: all 0.3s;
}

.card-battle-boss-section .boss-display.hit {
  background: var(--incorrect-soft);
  transform: scale(0.95);
}

.card-battle-boss-section .boss-emoji {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.card-battle-boss-section .boss-hp-bar {
  width: 200px;
  height: 20px;
  background: var(--bg-deep);
  border-radius: 10px;
  margin: 0.5rem auto;
  position: relative;
  overflow: hidden;
}

.card-battle-boss-section .boss-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--correct), #4ade80);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.card-battle-boss-section .boss-hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.card-battle-boss-section .boss-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold);
}

.card-battle-boss-section .boss-subtitle {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
}

.boss-intent {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--incorrect-soft);
  border-radius: 4px;
}

.intent-icon {
  font-size: 1.2rem;
}

.intent-text {
  font-size: 0.8rem;
  color: var(--incorrect);
}

/* Player Status */
.card-battle-player-section {
  padding: 0.5rem 1rem;
}

.player-status-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-elevated);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.player-hp-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.player-hp-display .hp-icon {
  font-size: 1.2rem;
}

.player-hp-display .hp-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 60px;
}

.player-hp-display .hp-bar {
  width: 120px;
  height: 8px;
  background: var(--bg-deep);
  border-radius: 4px;
  overflow: hidden;
}

.player-hp-display .hp-fill {
  height: 100%;
  background: var(--heart-full);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.player-block {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(80, 144, 199, 0.2);
  border-radius: 4px;
}

.player-block .block-icon {
  font-size: 1rem;
}

.player-block .block-amount {
  font-size: 0.9rem;
  font-weight: 600;
  color: #5090c7;
}

.player-buffs {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

/* Play Area */
.card-battle-play-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  flex: 1;
}

.card-battle-play-area .pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 60px;
}

.card-battle-play-area .pile-count {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.card-battle-play-area .pile-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
}

.draw-pile {
  border-color: var(--bronze);
}

.discard-pile {
  border-color: var(--text-dim);
}

/* Card Hand */
.card-battle-hand {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  min-height: 200px;
  flex-wrap: wrap;
}

.battle-card {
  width: 110px;
  height: 160px;
  background: var(--bg-card);
  border: 2px solid var(--rarity-color, var(--border));
  border-radius: 8px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.battle-card:hover {
  transform: translateY(-15px) scale(1.08);
  z-index: 10;
  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

.battle-card.unplayable {
  opacity: 0.5;
  cursor: not-allowed;
}

.battle-card.unplayable:hover {
  transform: none;
}

.empty-hand {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-style: italic;
  padding: 2rem;
}

/* End Turn Button Position */
.card-battle-arena .end-turn-btn {
  position: absolute;
  right: 1rem;
  bottom: 220px;
  z-index: 5;
}

/* Battle Messages */
.battle-messages {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
  z-index: 100;
}

.battle-message {
  padding: 0.5rem 1rem;
  background: var(--bg-elevated);
  border-radius: 4px;
  font-size: 0.9rem;
  animation: message-in 0.3s ease;
}

.battle-message.damage {
  background: var(--incorrect-soft);
  color: var(--incorrect);
  border: 1px solid var(--incorrect);
}

.battle-message.blocked {
  background: rgba(80, 144, 199, 0.2);
  color: #5090c7;
  border: 1px solid #5090c7;
}

.battle-message.buff {
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid var(--gold);
}

.battle-message.heal {
  background: var(--correct-soft);
  color: var(--correct);
  border: 1px solid var(--correct);
}

.battle-message.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Damage Numbers */
.damage-number {
  position: absolute;
  font-size: 1.5rem;
  font-weight: 700;
  animation: damage-float 1s ease forwards;
  pointer-events: none;
  z-index: 50;
}

.damage-number.boss {
  color: var(--correct);
  top: 0;
}

.damage-number.player {
  color: var(--incorrect);
  top: -10px;
  right: 0;
}

@keyframes damage-float {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px);
  }
}

/* Result Screens */
.card-battle-result {
  position: relative;
  text-align: center;
  padding: 2rem;
  max-width: 500px;
  background: var(--bg-elevated);
  border-radius: 12px;
  border: 2px solid var(--border);
}

.card-battle-result.victory {
  border-color: var(--gold);
}

.card-battle-result.defeat {
  border-color: var(--incorrect);
}

.result-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.result-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.card-battle-result.victory .result-title {
  color: var(--gold);
}

.card-battle-result.defeat .result-title {
  color: var(--incorrect);
}

.result-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 1.5rem;
}

.result-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.result-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result-stats .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.result-stats .stat-label {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.result-btn {
  padding: 1rem 2rem;
  background: var(--gold);
  border: none;
  border-radius: 4px;
  color: var(--bg-deep);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.result-btn:hover {
  background: #d4b068;
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED BOSS BATTLE - Dramatic Effects
   ═══════════════════════════════════════════════════════════════ */

/* Boss Entrance Overlay */
.boss-entrance-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.95);
}

.boss-entrance-overlay.active {
  display: flex;
  animation: boss-entrance-bg 2.5s ease-out;
}

.boss-entrance-overlay.fade-out {
  animation: fade-out 0.5s ease-out forwards;
}

@keyframes boss-entrance-bg {
  0% { background: rgba(0, 0, 0, 1); }
  50% { background: rgba(139, 0, 0, 0.95); }
  100% { background: rgba(0, 0, 0, 0.95); }
}

.boss-entrance-content {
  text-align: center;
  animation: boss-entrance-zoom 2.5s ease-out;
}

@keyframes boss-entrance-zoom {
  0% { transform: scale(0.3); opacity: 0; }
  30% { transform: scale(1.2); opacity: 1; }
  60% { transform: scale(1); }
  100% { transform: scale(1); }
}

.boss-entrance-warning {
  font-size: 1.5rem;
  color: #ff4444;
  font-weight: bold;
  margin-bottom: 1rem;
  animation: warning-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes warning-pulse {
  from { opacity: 1; text-shadow: 0 0 10px #ff4444; }
  to { opacity: 0.6; text-shadow: 0 0 30px #ff4444; }
}

.boss-entrance-emoji {
  font-size: 8rem;
  margin-bottom: 1rem;
  animation: boss-emoji-bounce 0.6s ease-in-out infinite alternate;
}

@keyframes boss-emoji-bounce {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-10px) scale(1.05); }
}

.boss-entrance-name {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(218, 165, 32, 0.5);
  margin-bottom: 0.5rem;
}

.boss-entrance-subtitle {
  font-size: 1.2rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Boss Phase Styles */
.boss-display.phase-2 {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}

.boss-display.phase-2 .boss-emoji {
  animation: phase2-pulse 0.8s ease-in-out infinite;
}

@keyframes phase2-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); filter: brightness(1.2); }
}

.boss-display.phase-3 {
  border-color: #dc2626 !important;
  box-shadow: 0 0 30px rgba(220, 38, 38, 0.7);
  background: linear-gradient(135deg, #450a0a 0%, #1a0505 100%) !important;
}

.boss-display.phase-3 .boss-emoji {
  animation: rage-shake 0.1s ease-in-out infinite;
}

@keyframes rage-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-2px) rotate(-2deg); }
  75% { transform: translateX(2px) rotate(2deg); }
}

/* Phase Transition Effect */
.card-battle-arena.phase-transition {
  animation: phase-flash 0.5s ease-out;
}

@keyframes phase-flash {
  0% { filter: brightness(1); }
  50% { filter: brightness(3) saturate(2); }
  100% { filter: brightness(1); }
}

/* Enhanced Boss Attack Animations */
.card-battle-arena.boss-attacking-enraged {
  animation: screen-shake-medium 0.4s ease;
  background: linear-gradient(180deg, #3b1515 0%, #0d0b09 100%);
}

.card-battle-arena.boss-attacking-rage {
  animation: screen-shake-heavy 0.5s ease;
  background: linear-gradient(180deg, #5c1010 0%, #0d0b09 100%);
}

@keyframes screen-shake-medium {
  0%, 100% { transform: translateX(0) translateY(0); }
  20% { transform: translateX(-8px) translateY(3px); }
  40% { transform: translateX(8px) translateY(-3px); }
  60% { transform: translateX(-5px) translateY(2px); }
  80% { transform: translateX(5px) translateY(-2px); }
}

@keyframes screen-shake-heavy {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  10% { transform: translateX(-12px) translateY(5px) rotate(-1deg); }
  20% { transform: translateX(12px) translateY(-5px) rotate(1deg); }
  30% { transform: translateX(-10px) translateY(4px) rotate(-1deg); }
  40% { transform: translateX(10px) translateY(-4px) rotate(1deg); }
  50% { transform: translateX(-8px) translateY(3px) rotate(0deg); }
  60% { transform: translateX(8px) translateY(-3px) rotate(0deg); }
  70% { transform: translateX(-5px) translateY(2px) rotate(0deg); }
  80% { transform: translateX(5px) translateY(-2px) rotate(0deg); }
}

/* Boss Attacking Animation */
.boss-display.attacking {
  animation: boss-lunge 0.6s ease-out;
}

@keyframes boss-lunge {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-20px) scale(1.2); }
  60% { transform: translateY(50px) scale(0.95); }
  100% { transform: translateY(0) scale(1); }
}

/* Ability Popup */
.ability-popup {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  animation: ability-popup 1.5s ease-out forwards;
  z-index: 100;
}

@keyframes ability-popup {
  0% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.8); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1); }
  40% { transform: translateX(-50%) translateY(0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

.ability-icon {
  margin-right: 0.3rem;
}

/* Enhanced Victory Screen */
.victory-backdrop {
  background: radial-gradient(ellipse at center, rgba(218, 165, 32, 0.3) 0%, rgba(0, 0, 0, 0.95) 70%);
}

.card-battle-result.victory {
  background: linear-gradient(135deg, #2d2a1f 0%, #1a1810 100%);
  border-color: var(--gold);
  box-shadow: 0 0 40px rgba(218, 165, 32, 0.4);
}

.card-battle-result.victory.perfect {
  border-color: #ffd700;
  box-shadow: 0 0 60px rgba(255, 215, 0, 0.6), inset 0 0 40px rgba(255, 215, 0, 0.1);
}

.victory-crown {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  animation: crown-float 2s ease-in-out infinite;
}

@keyframes crown-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

.victory-trophy {
  animation: trophy-shine 2s ease-in-out infinite;
}

@keyframes trophy-shine {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3) drop-shadow(0 0 15px gold); }
}

.defeated-boss {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.perfect-banner {
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffd700;
  margin: 1rem 0;
  animation: perfect-pulse 1s ease-in-out infinite;
}

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

.victory-rating {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.rating-star {
  font-size: 2rem;
  color: var(--text-dim);
  transition: all 0.3s;
}

.rating-star.filled {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  animation: star-pop 0.5s ease-out backwards;
}

.rating-star.filled:nth-child(1) { animation-delay: 0.1s; }
.rating-star.filled:nth-child(2) { animation-delay: 0.2s; }
.rating-star.filled:nth-child(3) { animation-delay: 0.3s; }
.rating-star.filled:nth-child(4) { animation-delay: 0.4s; }
.rating-star.filled:nth-child(5) { animation-delay: 0.5s; }

@keyframes star-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

.result-stats .stat-icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.victory-btn {
  background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
  font-size: 1.1rem;
  padding: 1rem 2.5rem;
  animation: victory-btn-glow 2s ease-in-out infinite;
}

@keyframes victory-btn-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(218, 165, 32, 0.5); }
  50% { box-shadow: 0 0 25px rgba(218, 165, 32, 0.8); }
}

/* Victory Particles */
.victory-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.victory-particle {
  position: absolute;
  top: 100%;
  animation: particle-rise 3s ease-out forwards;
}

@keyframes particle-rise {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-120vh) rotate(720deg); opacity: 0; }
}

/* Reward Card Hover */
.reward-card {
  transition: all 0.3s ease;
}

.reward-card:hover {
  transform: translateY(-15px) scale(1.05);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--rarity-color);
}

/* Battle Message Phase Type */
.battle-message.phase {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.2), rgba(220, 38, 38, 0.4), rgba(220, 38, 38, 0.2));
  border: 1px solid #dc2626;
  color: #fca5a5;
  font-weight: 600;
  animation: phase-message 0.5s ease-out;
}

@keyframes phase-message {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .card-battle-arena {
    padding: 0.5rem;
    border-radius: 0;
    max-height: 100%;
  }

  .card-battle-boss-section .boss-emoji {
    font-size: 3rem;
  }

  .card-battle-boss-section .boss-hp-bar {
    width: 150px;
    height: 16px;
  }

  .battle-card {
    width: 90px;
    height: 130px;
  }

  .battle-card .card-emoji {
    font-size: 1.5rem;
  }

  .battle-card .card-name {
    font-size: 0.65rem;
  }

  .battle-card .card-description {
    font-size: 0.55rem;
  }

  .card-battle-hand {
    min-height: 150px;
    gap: 0.25rem;
  }

  .card-battle-arena .end-turn-btn {
    bottom: 160px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SCAFFOLDS MODAL - View Foundation Questions
   ═══════════════════════════════════════════════════════════════ */

.scaffold-button-container {
  margin: 0.75rem 0;
  text-align: center;
}

.scaffold-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scaffold-view-btn:hover {
  background: var(--gold-glow);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 165, 92, 0.2);
}

.scaffold-view-btn .scaffold-icon {
  font-size: 1.1rem;
}

/* Scaffolds Modal Overlay */
.scaffolds-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  overflow-y: auto;
}

.scaffolds-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: 12px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.scaffolds-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  border-radius: 12px 12px 0 0;
  position: sticky;
  top: 0;
  z-index: 1;
}

.scaffolds-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--gold);
}

.scaffolds-close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  transition: color 0.2s;
}

.scaffolds-close-btn:hover {
  color: var(--text-primary);
}

.scaffolds-modal-target {
  padding: 0.75rem 1.25rem;
  background: var(--gold-ghost);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.scaffolds-modal-target strong {
  color: var(--gold);
}

.scaffolds-modal-body {
  padding: 1rem 1.25rem;
}

.no-scaffolds {
  text-align: center;
  color: var(--text-secondary);
  padding: 2rem;
  font-style: italic;
}

/* Individual scaffold item */
.scaffold-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.scaffold-item:last-child {
  border-bottom: none;
}

.scaffold-number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--gold);
  font-size: 0.85rem;
}

.scaffold-content {
  flex: 1;
  min-width: 0;
}

.scaffold-question {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.scaffold-options {
  margin-bottom: 0.75rem;
}

.scaffold-option-item {
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.35rem;
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  background: var(--bg-deep);
}

.scaffold-option-item.correct {
  background: var(--correct-soft);
  color: var(--correct);
  border: 1px solid var(--correct);
  font-weight: 500;
}

.scaffold-explain {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 0.75rem;
  background: var(--gold-ghost);
  border-radius: 6px;
  border-left: 3px solid var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   INTERACTIVE SCAFFOLD MODAL
   User answers foundation questions one at a time
   ═══════════════════════════════════════════════════════════════ */

/* Progress dots showing question status */
.scaffolds-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-subtle);
}

.scaffold-progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.scaffold-progress-dot:hover {
  border-color: var(--gold);
  transform: scale(1.1);
}

.scaffold-progress-dot.current {
  border-color: var(--gold);
  box-shadow: 0 0 8px var(--gold-soft);
}

.scaffold-progress-dot.correct {
  background: var(--correct);
  border-color: var(--correct);
}

.scaffold-progress-dot.wrong {
  background: var(--incorrect);
  border-color: var(--incorrect);
}

.scaffolds-progress-text {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Interactive answer options (buttons, not static display) */
.scaffold-options-interactive {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.scaffold-option-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scaffold-option-btn:hover:not(.disabled) {
  border-color: var(--gold);
  background: var(--gold-ghost);
}

.scaffold-option-btn.correct {
  background: var(--correct-soft);
  border-color: var(--correct);
  color: var(--correct);
}

.scaffold-option-btn.correct::before {
  content: '✓ ';
  font-weight: bold;
}

.scaffold-option-btn.wrong {
  background: var(--incorrect-soft);
  border-color: var(--incorrect);
  color: var(--incorrect);
}

.scaffold-option-btn.wrong::before {
  content: '✗ ';
  font-weight: bold;
}

.scaffold-option-btn.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Explanation box - shown after answering */
.scaffold-explain-box {
  padding: 0.75rem 1rem;
  background: var(--gold-ghost);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0.5rem;
}

/* Modal footer with navigation */
.scaffolds-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 12px 12px;
  gap: 0.75rem;
}

.scaffold-nav-btn {
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scaffold-nav-btn.prev,
.scaffold-nav-btn.next {
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  color: var(--gold);
}

.scaffold-nav-btn.prev:hover:not(:disabled),
.scaffold-nav-btn.next:hover:not(:disabled) {
  background: var(--gold);
  color: var(--bg-deep);
}

.scaffold-nav-btn.skip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.scaffold-nav-btn.skip:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.scaffold-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Active scaffold item (when showing single question) */
.scaffold-item.active {
  border-bottom: none;
  padding-bottom: 0;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .scaffolds-modal-content {
    max-height: 95vh;
    border-radius: 8px;
  }

  .scaffold-item {
    flex-direction: column;
    gap: 0.5rem;
  }

  .scaffold-number {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }

  .scaffolds-progress {
    flex-wrap: wrap;
  }

  .scaffolds-modal-footer {
    flex-wrap: wrap;
  }

  .scaffold-nav-btn {
    flex: 1;
    min-width: 80px;
  }

  .scaffold-nav-btn.skip {
    order: -1;
    flex-basis: 100%;
    margin-bottom: 0.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   INLINE SCAFFOLD ACCORDION - Foundation Questions Panel
   Opens below the question for easy back-and-forth learning
   ═══════════════════════════════════════════════════════════════ */

.scaffold-inline-container {
  margin-top: 1rem;
  width: 100%;
}

.scaffold-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(139, 64, 73, 0.15) 0%, rgba(201, 165, 92, 0.1) 100%);
  border: 1px solid var(--scaffold-heavy);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-gothic);
  color: var(--text-primary);
  font-size: 0.95rem;
}

.scaffold-toggle-btn:hover {
  background: linear-gradient(135deg, rgba(139, 64, 73, 0.25) 0%, rgba(201, 165, 92, 0.2) 100%);
  border-color: var(--scaffold-challenge);
  transform: translateY(-1px);
}

.scaffold-toggle-btn.open {
  background: linear-gradient(135deg, rgba(139, 64, 73, 0.3) 0%, rgba(201, 165, 92, 0.25) 100%);
  border-color: var(--scaffold-challenge);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.scaffold-toggle-btn .scaffold-icon {
  font-size: 1.2rem;
}

.scaffold-toggle-btn .scaffold-label {
  flex: 1;
  text-align: left;
  font-weight: 500;
}

.scaffold-toggle-btn .scaffold-chevron {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
  color: var(--scaffold-challenge);
}

.scaffold-toggle-btn.open .scaffold-chevron {
  transform: rotate(180deg);
}

/* Inline panel that slides open */
.scaffold-inline-panel {
  background: linear-gradient(180deg, rgba(30, 27, 24, 0.95) 0%, rgba(26, 23, 20, 0.98) 100%);
  border: 1px solid var(--scaffold-heavy);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 1rem;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 1000px;
  }
}

/* Progress bar at top of inline panel */
.scaffold-progress-bar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(139, 64, 73, 0.3);
}

.scaffold-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

.scaffold-dot:hover {
  transform: scale(1.2);
  border-color: var(--scaffold-challenge);
}

.scaffold-dot.current {
  background: var(--scaffold-challenge);
  border-color: var(--scaffold-challenge);
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(201, 165, 92, 0.5);
}

.scaffold-dot.correct {
  background: var(--scaffold-light);
  border-color: var(--scaffold-light);
}

.scaffold-dot.wrong {
  background: var(--scaffold-heavy);
  border-color: var(--scaffold-heavy);
}

/* Score display */
.scaffold-score {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.scaffold-score .correct-count {
  color: var(--scaffold-light);
  font-weight: 600;
}

.scaffold-score .total-count {
  color: var(--scaffold-challenge);
  font-weight: 600;
}

/* Question number badge */
.scaffold-q-number {
  display: inline-block;
  background: var(--scaffold-heavy);
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Question text */
.scaffold-q-text {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border-left: 3px solid var(--scaffold-challenge);
}

/* Answer buttons container */
.scaffold-answers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.scaffold-answer-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.scaffold-answer-btn:hover:not(.disabled) {
  background: rgba(201, 165, 92, 0.1);
  border-color: var(--scaffold-challenge);
  transform: translateX(3px);
}

.scaffold-answer-btn .letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--scaffold-challenge);
}

.scaffold-answer-btn.correct {
  background: rgba(90, 124, 101, 0.3);
  border-color: var(--scaffold-light);
}

.scaffold-answer-btn.correct .letter {
  background: var(--scaffold-light);
  color: #fff;
}

.scaffold-answer-btn.correct::after {
  content: '✓';
  margin-left: auto;
  color: var(--scaffold-light);
  font-size: 1.1rem;
}

.scaffold-answer-btn.wrong {
  background: rgba(139, 64, 73, 0.3);
  border-color: var(--scaffold-heavy);
}

.scaffold-answer-btn.wrong .letter {
  background: var(--scaffold-heavy);
  color: #fff;
}

.scaffold-answer-btn.wrong::after {
  content: '✗';
  margin-left: auto;
  color: var(--scaffold-heavy);
  font-size: 1.1rem;
}

.scaffold-answer-btn.disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* Explanation box */
.scaffold-explanation {
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(90, 124, 101, 0.15) 0%, rgba(90, 124, 101, 0.05) 100%);
  border: 1px solid var(--scaffold-light);
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary);
  animation: fadeIn 0.3s ease;
}

.scaffold-explanation strong {
  color: var(--scaffold-light);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Navigation buttons */
.scaffold-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(139, 64, 73, 0.3);
}

.scaffold-nav-prev,
.scaffold-nav-next {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}

.scaffold-nav-prev:hover:not(:disabled),
.scaffold-nav-next:hover:not(:disabled) {
  background: rgba(201, 165, 92, 0.2);
  border-color: var(--scaffold-challenge);
}

.scaffold-nav-prev:disabled,
.scaffold-nav-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.scaffold-nav-skip {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}

.scaffold-nav-skip:hover {
  border-color: var(--scaffold-challenge);
  color: var(--scaffold-challenge);
}

/* Mobile responsive */
@media (max-width: 600px) {
  .scaffold-toggle-btn {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
  }

  .scaffold-inline-panel {
    padding: 0.75rem;
  }

  .scaffold-dot {
    width: 10px;
    height: 10px;
  }

  .scaffold-q-text {
    font-size: 0.9rem;
  }

  .scaffold-answer-btn {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
  }

  .scaffold-nav {
    flex-wrap: wrap;
  }

  .scaffold-nav-skip {
    order: -1;
    flex-basis: 100%;
    margin-bottom: 0.5rem;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SHOCKWAVE ARCADE JUICE - Screen Effects
   Early 2000s Flash game feel: instant feedback, visceral impact
   ═══════════════════════════════════════════════════════════════ */

/* SCREEN SHAKE - Wrong answers, boss attacks, big damage */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-4px) rotate(-0.5deg); }
  20% { transform: translateX(4px) rotate(0.5deg); }
  30% { transform: translateX(-3px) rotate(-0.3deg); }
  40% { transform: translateX(3px) rotate(0.3deg); }
  50% { transform: translateX(-2px) rotate(-0.2deg); }
  60% { transform: translateX(2px) rotate(0.2deg); }
  70% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
  90% { transform: translateX(-1px); }
}

@keyframes bigShake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-8px) rotate(-1deg); }
  20% { transform: translateX(8px) rotate(1deg); }
  30% { transform: translateX(-6px) rotate(-0.7deg); }
  40% { transform: translateX(6px) rotate(0.7deg); }
  50% { transform: translateX(-4px) rotate(-0.4deg); }
  60% { transform: translateX(4px) rotate(0.4deg); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

body.shake { animation: shake 0.4s ease; }
body.big-shake { animation: bigShake 0.5s ease; }

/* CORRECT ANSWER FLASH - Green glow burst */
@keyframes correctFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(90, 156, 111, 0.8);
    filter: brightness(1);
  }
  30% {
    box-shadow: 0 0 40px 15px rgba(90, 255, 130, 0.5);
    filter: brightness(1.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(90, 156, 111, 0);
    filter: brightness(1);
  }
}

.question-card.correct-flash,
.option-btn.correct-flash {
  animation: correctFlash 0.4s ease-out;
}

/* WRONG ANSWER FLASH - Red pulse */
@keyframes wrongFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 60, 60, 0.8);
    filter: brightness(1);
  }
  30% {
    box-shadow: 0 0 30px 10px rgba(255, 60, 60, 0.5);
    filter: brightness(0.9) saturate(1.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 60, 60, 0);
    filter: brightness(1);
  }
}

.question-card.wrong-flash,
.option-btn.wrong-flash {
  animation: wrongFlash 0.4s ease-out;
}

/* FLOATING DAMAGE NUMBERS */
@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(-50%) scale(1);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px) translateX(-50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) translateX(-50%) scale(0.8);
  }
}

@keyframes floatUpCrit {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(-50%) scale(1) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translateY(-25px) translateX(-50%) scale(1.5) rotate(-5deg);
  }
  40% {
    transform: translateY(-40px) translateX(-50%) scale(1.3) rotate(5deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) translateX(-50%) scale(0.9) rotate(0deg);
  }
}

.damage-number {
  position: absolute;
  left: 50%;
  top: 30%;
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 2.5rem;
  font-weight: bold;
  pointer-events: none;
  z-index: 1000;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  animation: floatUp 1s ease-out forwards;
}

.damage-number.positive {
  color: #5aff5a;
  text-shadow: 0 0 10px #0f0, 2px 2px 0 #000;
}

.damage-number.negative {
  color: #ff5a5a;
  text-shadow: 0 0 10px #f00, 2px 2px 0 #000;
}

.damage-number.crit {
  font-size: 3.5rem;
  color: #ffd700;
  text-shadow: 0 0 20px #ff0, 0 0 40px #fa0, 2px 2px 0 #000;
  animation: floatUpCrit 1.2s ease-out forwards;
}

.damage-number.heal {
  color: #5aff9a;
  text-shadow: 0 0 15px #0fa, 2px 2px 0 #000;
}

.damage-number.xp {
  color: #c9a55c;
  font-size: 1.8rem;
  text-shadow: 0 0 10px #c9a55c, 2px 2px 0 #000;
}

/* COMBO VISUAL ESCALATION */
.combo-indicator {
  transition: all 0.15s ease;
}

.combo-indicator[data-combo="3"],
.combo-indicator[data-combo="4"] {
  background: linear-gradient(135deg, #c9a55c 0%, #ffd700 100%);
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(201, 165, 92, 0.5);
}

.combo-indicator[data-combo="5"],
.combo-indicator[data-combo="6"],
.combo-indicator[data-combo="7"] {
  background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
  transform: scale(1.2);
  box-shadow: 0 4px 25px rgba(255, 140, 0, 0.6);
}

.combo-indicator[data-combo="8"],
.combo-indicator[data-combo="9"] {
  background: linear-gradient(135deg, #ff4500 0%, #ff6347 100%);
  transform: scale(1.25);
  box-shadow: 0 4px 30px rgba(255, 69, 0, 0.7);
}

.combo-indicator.combo-10 {
  background: linear-gradient(135deg, #ff0000 0%, #ff1493 100%);
  transform: scale(1.35);
  box-shadow: 0 0 40px rgba(255, 0, 100, 0.8);
  animation: comboOnFire 0.2s infinite;
}

@keyframes comboOnFire {
  0%, 100% { transform: scale(1.35) rotate(-1deg); }
  50% { transform: scale(1.4) rotate(1deg); }
}

/* ═══════════════════════════════════════════════════════════════ */
/* CRITICAL HIT CELEBRATION                                         */
/* ═══════════════════════════════════════════════════════════════ */

.critical-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 3000;
  pointer-events: none;
  text-align: center;
  animation: criticalBannerIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.critical-banner.fade-out {
  animation: criticalBannerOut 0.3s ease-out forwards;
}

@keyframes criticalBannerIn {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-5deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes criticalBannerOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -60%) scale(0.8);
    opacity: 0;
  }
}

.critical-banner-text {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.critical-word {
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 5rem;
  color: #fff;
  text-shadow:
    0 0 10px #ffd700,
    0 0 20px #ffa500,
    0 0 40px #ff4500,
    3px 3px 0 #8b0000,
    -1px -1px 0 #8b0000;
  animation: criticalLetterPulse 0.1s ease-in-out infinite alternate;
}

.critical-word:nth-child(odd) {
  animation-delay: 0.05s;
}

.critical-exclaim {
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 6rem;
  color: #ffd700;
  text-shadow:
    0 0 15px #ffd700,
    0 0 30px #ffa500,
    0 0 50px #ff4500,
    4px 4px 0 #8b0000;
  animation: exclamationBounce 0.15s ease-in-out infinite;
}

@keyframes criticalLetterPulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

@keyframes exclamationBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.1); }
}

.critical-sub {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: #ffd700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-top: 0.5rem;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* Screen flash effects */
.screen-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2999;
  pointer-events: none;
  animation: screenFlashIn 0.1s ease-out;
}

.screen-flash.fade-out {
  animation: screenFlashOut 0.2s ease-out forwards;
}

@keyframes screenFlashIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes screenFlashOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.screen-flash-crit {
  background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.4) 0%, rgba(255, 165, 0, 0.2) 50%, transparent 80%);
}

.screen-flash-hit {
  background: radial-gradient(ellipse at center, rgba(255, 100, 100, 0.3) 0%, rgba(200, 50, 50, 0.15) 50%, transparent 80%);
}

.screen-flash-heal {
  background: radial-gradient(ellipse at center, rgba(100, 255, 150, 0.3) 0%, rgba(50, 200, 100, 0.15) 50%, transparent 80%);
}

.screen-flash-danger {
  background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0.35) 0%, rgba(139, 0, 0, 0.2) 50%, transparent 80%);
}

/* COMBO MILESTONE POPUP */
.combo-milestone {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 4rem;
  color: #fff;
  text-shadow: 0 0 30px #ff0, 0 0 60px #fa0, 3px 3px 0 #000;
  z-index: 2000;
  pointer-events: none;
  animation: milestonePop 1s ease forwards;
}

@keyframes milestonePop {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.3) rotate(5deg); opacity: 1; }
  40% { transform: translate(-50%, -50%) scale(1.1) rotate(-3deg); }
  60% { transform: translate(-50%, -50%) scale(1.15) rotate(2deg); }
  100% { transform: translate(-50%, -60%) scale(1); opacity: 0; }
}

/* WAVE COMPLETION BANNER */
.wave-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  text-align: center;
  z-index: 2000;
  pointer-events: none;
  animation: bannerPop 0.4s ease forwards;
}

.wave-banner .wave-text {
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 5rem;
  color: #ffd700;
  text-shadow: 0 0 30px #ffa500, 0 0 60px #ff8c00, 4px 4px 0 #000;
  letter-spacing: 0.1em;
}

.wave-banner .wave-subtext {
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 2.5rem;
  color: #fff;
  text-shadow: 0 0 20px #fff, 3px 3px 0 #000;
  margin-top: -0.5rem;
}

.wave-banner .wave-bonus {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1.5rem;
  color: #5aff5a;
  text-shadow: 0 0 15px #0f0, 2px 2px 0 #000;
  margin-top: 0.5rem;
}

@keyframes bannerPop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(0.95); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.wave-banner.fade-out {
  animation: bannerFadeOut 0.5s ease forwards;
}

@keyframes bannerFadeOut {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -70%) scale(0.8); opacity: 0; }
}

/* NEAR-DEATH TENSION - Critical HP Effects */
body.critical-hp {
  animation: criticalPulse 1s ease infinite;
}

body.critical-hp::after {
  content: '';
  position: fixed;
  inset: 0;
  border: 4px solid rgba(255, 0, 0, 0.4);
  pointer-events: none;
  animation: criticalBorder 0.5s ease infinite;
  z-index: 999;
}

@keyframes criticalPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(0.85) sepia(0.15); }
}

@keyframes criticalBorder {
  0%, 100% { border-color: rgba(255, 0, 0, 0.2); box-shadow: inset 0 0 30px rgba(255, 0, 0, 0.1); }
  50% { border-color: rgba(255, 0, 0, 0.6); box-shadow: inset 0 0 60px rgba(255, 0, 0, 0.2); }
}

/* PHASE TRANSITION FLASH */
.phase-flash {
  position: fixed;
  inset: 0;
  background: rgba(255, 50, 50, 0.6);
  z-index: 3000;
  pointer-events: none;
  animation: phaseFlashFade 0.6s ease-out forwards;
}

@keyframes phaseFlashFade {
  0% { opacity: 1; background: rgba(255, 100, 100, 0.8); }
  50% { opacity: 0.8; background: rgba(255, 50, 0, 0.5); }
  100% { opacity: 0; }
}

/* BOSS ENRAGED STATE */
.boss-sprite.enraged,
.boss-display.enraged {
  filter: hue-rotate(20deg) saturate(1.4) brightness(1.1);
  animation: enragedPulse 0.4s ease infinite;
}

@keyframes enragedPulse {
  0%, 100% { transform: scale(1); filter: hue-rotate(20deg) saturate(1.4); }
  50% { transform: scale(1.03); filter: hue-rotate(30deg) saturate(1.6); }
}

/* GAME OVER OVERLAY */
.game-over-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  animation: fadeIn 0.5s ease;
}

.game-over-content {
  text-align: center;
  animation: gameOverSlide 0.6s ease;
}

@keyframes gameOverSlide {
  0% { transform: translateY(-50px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.game-over-title {
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 5rem;
  color: #ff3333;
  text-shadow: 0 0 30px #f00, 0 0 60px #900, 4px 4px 0 #000;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.game-over-score {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1.3rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.game-over-score div {
  margin: 0.5rem 0;
}

.game-over-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.game-over-buttons button {
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 1.5rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.retry-btn {
  background: linear-gradient(135deg, #5a9c6f 0%, #3d7a50 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(90, 156, 111, 0.4);
}

.retry-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 30px rgba(90, 156, 111, 0.6);
}

.menu-btn {
  background: linear-gradient(135deg, #555 0%, #333 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.menu-btn:hover {
  transform: scale(1.05);
}

.game-over-buttons .hotkey {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.7rem;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.3rem;
}

/* MILESTONE PROGRESS POPUP */
.milestone-popup {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: linear-gradient(135deg, #c9a55c 0%, #ffd700 100%);
  color: #000;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 1.8rem;
  z-index: 2000;
  pointer-events: none;
  animation: milestonePop 1.5s ease forwards;
  box-shadow: 0 0 40px rgba(201, 165, 92, 0.6);
}

.milestone-popup .milestone-number {
  font-size: 2.5rem;
  margin-right: 0.3rem;
}

/* HP BAR DRAIN ANIMATION */
.hp-bar-fill,
.boss-hp-fill {
  transition: width 0.4s ease-out;
}

.hp-bar-fill.damage-flash {
  animation: hpDamageFlash 0.3s ease;
}

@keyframes hpDamageFlash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5) saturate(2); }
}

/* STREAK FIRE ENHANCEMENT */
.streak-counter.on-fire {
  animation: streakFire 0.3s ease infinite;
}

.streak-counter.on-fire .fire {
  animation: fireGrow 0.2s ease infinite;
}

@keyframes streakFire {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes fireGrow {
  0%, 100% { transform: scale(1) rotate(-5deg); }
  50% { transform: scale(1.2) rotate(5deg); }
}

/* QUICK CORRECT/WRONG INDICATOR */
.answer-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 8rem;
  z-index: 1500;
  pointer-events: none;
  animation: indicatorPop 0.6s ease forwards;
}

.answer-indicator.correct {
  color: #5aff5a;
  text-shadow: 0 0 50px #0f0;
}

.answer-indicator.wrong {
  color: #ff5a5a;
  text-shadow: 0 0 50px #f00;
}

@keyframes indicatorPop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAP SYSTEM STYLES - Slay the Spire-style branching map
   ═══════════════════════════════════════════════════════════════════════════ */

#map-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-deep);
  z-index: 100;
}

#map-container.active {
  display: block;
}

.map-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   STARFIELD MAP THEME
   Cosmic constellation map with twinkling stars
   ═══════════════════════════════════════════════════════════════ */

.map-wrapper.map-starfield {
  background: linear-gradient(180deg, #0a0a1a 0%, #0d0d24 30%, #101035 70%, #0a0a1a 100%);
  position: relative;
}

.map-wrapper.map-starfield::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(100, 50, 150, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(50, 100, 150, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(30, 30, 60, 0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Star twinkle animation */
@keyframes starTwinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.map-starfield .star-twinkle {
  animation: starTwinkle 2s ease-in-out infinite;
  animation-delay: calc(var(--twinkle-delay, 0) * 0.3s);
}

.map-starfield .star-twinkle:nth-child(3n) { animation-duration: 2.5s; }
.map-starfield .star-twinkle:nth-child(5n) { animation-duration: 1.8s; }
.map-starfield .star-twinkle:nth-child(7n) { animation-duration: 3s; }

/* Constellation pulse animation for paths */
@keyframes constellationPulse {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -36; }
}

.map-starfield .constellation-pulse {
  animation: constellationPulse 1.5s linear infinite;
}

/* Starfield header */
.map-starfield .map-header {
  background: linear-gradient(to bottom, rgba(10, 10, 30, 0.95), rgba(15, 15, 40, 0.9));
  border-bottom: 1px solid rgba(100, 150, 255, 0.2);
  box-shadow: 0 2px 15px rgba(0, 100, 200, 0.2);
  position: relative;
  z-index: 10;
}

.map-starfield .map-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
  opacity: 0.5;
}

.map-starfield .act-title .act-number {
  color: #6688aa;
  font-variant: small-caps;
  letter-spacing: 3px;
}

.map-starfield .act-title .act-name {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(100, 200, 255, 0.5);
}

/* Starfield buttons */
.map-starfield .map-btn {
  background: linear-gradient(to bottom, rgba(30, 30, 60, 0.9), rgba(20, 20, 40, 0.9));
  border: 1px solid rgba(100, 150, 255, 0.3);
  border-radius: 4px;
  color: #aaccff;
  box-shadow: 0 0 10px rgba(0, 100, 200, 0.2);
}

.map-starfield .map-btn:hover {
  background: linear-gradient(to bottom, rgba(40, 40, 80, 0.9), rgba(30, 30, 60, 0.9));
  border-color: #00ffff;
  color: #00ffff;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

/* Starfield scroll container */
.map-starfield .map-scroll-container {
  position: relative;
  z-index: 2;
  padding: 1rem;
}

/* Starfield status bar */
.map-starfield .map-status-bar {
  background: linear-gradient(to top, rgba(10, 10, 30, 0.95), rgba(15, 15, 40, 0.9));
  border-top: 1px solid rgba(100, 150, 255, 0.2);
}

.map-starfield .map-status-bar::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
  opacity: 0.3;
}

.map-starfield .status-value {
  color: #ffffff;
}

.map-starfield .hp-current {
  color: #ff6666;
}

.map-starfield .gold-amount {
  color: #ffd700;
}

.map-starfield .potion-slot {
  background: rgba(30, 30, 60, 0.8);
  border-color: rgba(100, 150, 255, 0.3);
}

.map-starfield .potion-slot.empty {
  background: rgba(20, 20, 40, 0.6);
}

/* Starfield node hover effects */
/* NOTE: Using filter glow instead of transform scale to prevent nodes jumping away from cursor */
.map-starfield .map-node {
  cursor: pointer;
  transition: filter 0.2s ease, stroke-width 0.2s ease;
}

.map-starfield .map-node.node-available:hover,
.map-starfield .map-node.node-hover {
  /* Use filter glow instead of transform scale - scale causes node to jump away from cursor in SVG */
  filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.8)) brightness(1.15);
}

.map-starfield .map-node.node-locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.map-starfield .map-node.node-locked:hover {
  filter: none;
}

/* Ship glow animation */
@keyframes shipPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.map-starfield .ship-glow {
  animation: shipPulse 2s ease-in-out infinite;
}

/* Node pulse animation */
@keyframes nodePulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.map-starfield .node-current .node-outer-glow {
  animation: nodePulse 1.5s ease-in-out infinite;
}

/* Victorian Parchment Map Theme (legacy) */
.map-wrapper.map-parchment {
  background: linear-gradient(135deg, #d4c4a8 0%, #c9b896 50%, #b8a888 100%);
  position: relative;
}

.map-wrapper.map-parchment::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* Decorative corner flourishes */
.map-wrapper.map-parchment::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  border: 16px solid transparent;
  border-image: linear-gradient(135deg, #5c4033 0%, transparent 30%, transparent 70%, #5c4033 100%) 1;
  opacity: 0.15;
}

/* Map Header */
.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

/* Parchment header override */
.map-parchment .map-header {
  background: linear-gradient(to bottom, rgba(60, 41, 20, 0.92), rgba(45, 31, 15, 0.95));
  border-bottom: 2px solid #3d2914;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 10;
}

.map-parchment .map-header::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a55c, transparent);
}

.act-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.act-title .act-number {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-dim);
}

.act-title .act-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gold);
  font-family: 'EB Garamond', Georgia, serif;
}

/* Parchment act title styling */
.map-parchment .act-title .act-number {
  color: #a89880;
  font-variant: small-caps;
}

.map-parchment .act-title .act-name {
  color: #f5eed6;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.map-controls {
  display: flex;
  gap: 0.5rem;
}

.map-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Parchment button styling */
.map-parchment .map-btn {
  background: linear-gradient(to bottom, #5c4033, #3d2914);
  border: 1px solid #c9a55c;
  border-radius: 4px;
  color: #f5eed6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.map-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}

.map-parchment .map-btn:hover {
  background: linear-gradient(to bottom, #6d5144, #4e3a25);
  box-shadow: 0 2px 8px rgba(201, 165, 92, 0.3);
}

.map-btn .icon {
  font-size: 1.25rem;
}

/* Map Scroll Container */
.map-scroll-container {
  flex: 1;
  overflow: auto;
  padding: 1rem;
  display: flex;
  justify-content: center;
}

/* Parchment scroll container - aged edges */
.map-parchment .map-scroll-container {
  position: relative;
  z-index: 2;
  padding: 2rem;
}

.map-parchment .map-scroll-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(to bottom, rgba(92, 64, 51, 0.15), transparent);
  pointer-events: none;
  z-index: 10;
}

.map-parchment .map-scroll-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(to top, rgba(92, 64, 51, 0.15), transparent);
  pointer-events: none;
  z-index: 10;
}

.map-svg {
  display: block;
  margin: 0 auto;
}

/* Map Paths */
.map-paths path {
  transition: stroke 0.3s, stroke-width 0.3s;
}

.map-paths path.path-available {
  stroke-dasharray: none;
}

.map-paths path.path-locked {
  stroke-dasharray: 8 4;
  opacity: 0.4;
}

.map-paths path.path-completed {
  stroke-width: 4;
}

/* ═══════════════════════════════════════════════════════════════ */
/* PATH ANIMATIONS - Flowing Ink Effect                             */
/* ═══════════════════════════════════════════════════════════════ */

/* Path flowing dots animation (ink drops traveling along path) */
.path-dots {
  stroke-dashoffset: 0;
  animation: pathDotFlow 1.5s linear infinite;
  opacity: 0.8;
}

@keyframes pathDotFlow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -24;
  }
}

/* Ink splatter effect on path intersections */
.path-group {
  filter: drop-shadow(0 1px 1px rgba(61, 41, 20, 0.2));
}

/* Available path subtle shimmer */
.path-available {
  animation: inkShimmer 3s ease-in-out infinite;
}

@keyframes inkShimmer {
  0%, 100% {
    stroke-opacity: 0.75;
  }
  50% {
    stroke-opacity: 0.95;
  }
}

/* Completed path ink settling effect */
.path-completed {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Path glow when node is hovered */
.map-node.node-hover ~ .map-paths .path-group[data-from],
.map-node.node-hover ~ .map-paths .path-group[data-to] {
  filter: drop-shadow(0 0 4px rgba(201, 165, 92, 0.5));
}

/* Locked path fade animation */
.path-locked {
  animation: inkFade 4s ease-in-out infinite;
}

@keyframes inkFade {
  0%, 100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.4;
  }
}

/* Path drawing animation for newly available paths */
.path-available.path-new {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: pathDraw 1s ease-out forwards;
}

@keyframes pathDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Ink bleed effect on path hover */
.path-group:hover .path-available {
  stroke-width: 3.5;
  filter: drop-shadow(0 0 3px rgba(92, 64, 51, 0.4));
  transition: stroke-width 0.2s, filter 0.2s;
}

/* Map Nodes */
.map-node {
  cursor: pointer;
  transition: filter 0.2s, opacity 0.2s;
  /* Don't use transform scale here - causes jumping away from cursor in SVG */
}

.map-node:hover {
  /* Use filter glow instead of transform scale to prevent jumping */
  filter: drop-shadow(0 0 8px rgba(201, 165, 92, 0.7));
}

.map-node.node-locked {
  cursor: not-allowed;
  opacity: 0.5;
}

.map-node.node-locked:hover {
  filter: none;
}

/* Node Background Circles */
.node-bg {
  fill: var(--bg-card);
  stroke: var(--border);
  stroke-width: 2;
  transition: all 0.3s;
}

.map-node.node-available .node-bg {
  fill: var(--bg-elevated);
  stroke: var(--gold);
  stroke-width: 3;
}

.map-node.node-current .node-bg {
  fill: var(--gold-soft);
  stroke: var(--gold);
  stroke-width: 3;
}

.map-node.node-completed .node-bg {
  fill: var(--correct-soft);
  stroke: var(--correct);
  stroke-width: 2;
}

.map-node.node-hover .node-bg {
  /* Removed transform scale - causes cursor escape issues */
  stroke-width: 4;
}

/* Node Icons */
.node-icon {
  fill: var(--text-primary);
  pointer-events: none;
}

.map-node.node-completed .node-icon {
  opacity: 0.6;
}

.map-node.node-locked .node-icon {
  fill: var(--text-dim);
}

/* Node Checkmark (completed) */
.node-check {
  fill: var(--correct);
  font-weight: bold;
}

/* Elite/Boss Ring */
.node-ring {
  stroke-dasharray: 4 2;
  animation: nodeRingPulse 2s ease-in-out infinite;
}

.node-ring-elite {
  stroke: var(--flame);
}

.node-ring-boss {
  stroke: var(--incorrect);
  stroke-width: 3;
  stroke-dasharray: 6 3;
}

/* Victorian parchment node styling */
.node-outer-ring {
  opacity: 0.7;
  stroke-dasharray: 2 3;
}

.node-inner-ring {
  stroke-dasharray: 1 2;
}

/* Wax seal for completed nodes */
.node-seal {
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.4));
  animation: sealAppear 0.3s ease-out;
}

@keyframes sealAppear {
  from {
    transform: translate(14px, -14px) scale(0);
    opacity: 0;
  }
  to {
    transform: translate(14px, -14px) scale(1);
    opacity: 1;
  }
}

/* Node hover glow for parchment */
.map-parchment .map-node.node-available:hover .node-bg,
.map-parchment .map-node.node-hover .node-bg {
  filter: url(#node-glow);
}

.map-parchment .map-node.node-current .node-bg {
  filter: url(#node-pulse);
}

/* Elite ornate border pulse */
.node-ring-elite {
  animation: eliteRingPulse 2s ease-in-out infinite;
}

@keyframes eliteRingPulse {
  0%, 100% {
    stroke: #c9a55c;
    opacity: 0.6;
  }
  50% {
    stroke: #e8d09c;
    opacity: 1;
  }
}

/* Boss dramatic ring */
.node-ring-boss {
  animation: bossRingPulse 1.5s ease-in-out infinite;
}

@keyframes bossRingPulse {
  0%, 100% {
    stroke: #8b4049;
    stroke-width: 3px;
    opacity: 0.7;
  }
  50% {
    stroke: #c75050;
    stroke-width: 4px;
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* MAP NODE HOVER EFFECTS                                           */
/* ═══════════════════════════════════════════════════════════════ */

/* Enhanced hover glow animation */
.map-node.node-hover {
  animation: nodeHoverGlow 0.8s ease-in-out infinite;
}

@keyframes nodeHoverGlow {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(201, 165, 92, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(201, 165, 92, 0.9));
  }
}

/* Node hover effects - use filter/stroke instead of transform to prevent jumping */
.map-node.node-available:hover,
.map-node.node-completed:hover {
  /* Removed transform scale - causes node to jump away from cursor in SVG */
  filter: drop-shadow(0 0 12px rgba(201, 165, 92, 0.8)) brightness(1.1);
}

/* Hover ring expansion - use stroke-width instead of scale transform */
.map-node.node-hover .node-outer-ring {
  stroke-width: 3;
  stroke: #c9a55c;
  opacity: 1;
}

/* Tooltip container */
.map-tooltip {
  position: absolute;
  width: 200px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(45, 31, 15, 0.97), rgba(60, 41, 20, 0.95));
  border: 2px solid #c9a55c;
  border-radius: 8px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}

.map-tooltip.visible {
  opacity: 1;
  transform: translateY(-100%);
}

/* Tooltip arrow */
.map-tooltip::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #c9a55c;
  border-bottom: none;
}

.map-tooltip::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(45, 31, 15, 0.97);
  border-bottom: none;
  z-index: 1;
}

/* Tooltip header */
.tooltip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.tooltip-icon {
  font-size: 1.4rem;
}

.tooltip-title {
  font-size: 1rem;
  font-weight: 600;
  color: #f5eed6;
  font-family: 'EB Garamond', Georgia, serif;
}

/* Tooltip description */
.tooltip-description {
  font-size: 0.8rem;
  color: #a89880;
  line-height: 1.4;
  margin-bottom: 8px;
}

/* Tooltip rewards */
.tooltip-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.75rem;
}

.reward-item {
  padding: 2px 6px;
  background: rgba(201, 165, 92, 0.15);
  border: 1px solid rgba(201, 165, 92, 0.3);
  border-radius: 4px;
  color: #c9a55c;
}

.reward-completed {
  color: #8fa882;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════ */
/* PAGE-TURN COMBAT TRANSITION                                      */
/* ═══════════════════════════════════════════════════════════════ */

.page-turn-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  pointer-events: none;
  perspective: 2000px;
}

.page-turn-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d4c4a8 0%, #c9b896 50%, #b8a888 100%);
  transform-origin: left center;
  backface-visibility: hidden;
}

/* Paper texture on page */
.page-turn-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.1;
}

/* Page shadow when turning */
.page-turn-page::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

/* Page turn animation - entering combat */
.page-turn-overlay.turning-in .page-turn-page {
  animation: pageTurnIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pageTurnIn {
  0% {
    transform: rotateY(0deg);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
  }
  100% {
    transform: rotateY(-180deg);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

.page-turn-overlay.turning-in .page-turn-page::after {
  animation: pageShadowIn 0.6s forwards;
}

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

/* Page turn animation - exiting combat (return to map) */
.page-turn-overlay.turning-out .page-turn-page {
  animation: pageTurnOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pageTurnOut {
  0% {
    transform: rotateY(-180deg);
  }
  100% {
    transform: rotateY(0deg);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
  }
}

/* Encounter title on page */
.page-turn-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #3d2914;
  font-family: 'EB Garamond', Georgia, serif;
}

.page-turn-title .encounter-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  display: block;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}

.page-turn-title .encounter-type {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #5c4033;
  margin-bottom: 0.5rem;
}

.page-turn-title .encounter-name {
  font-size: 2.5rem;
  font-weight: 700;
  color: #3d2914;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

/* Combat container with fade-in after page turn */
.map-combat-container.transitioning-in {
  opacity: 0;
  animation: combatFadeIn 0.4s ease-out 0.5s forwards;
}

@keyframes combatFadeIn {
  to {
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ACT TRANSITION CINEMATIC                                         */
/* ═══════════════════════════════════════════════════════════════ */

.act-cinematic {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0a0806;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.act-cinematic.fade-out {
  animation: cinematicFadeOut 0.5s ease-out forwards;
}

@keyframes cinematicFadeOut {
  to {
    opacity: 0;
  }
}

/* Old film grain overlay */
.cinematic-grain {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.08;
  pointer-events: none;
  animation: grainShift 0.1s steps(1) infinite;
  z-index: 1;
}

@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-5%, -5%); }
  50% { transform: translate(5%, 5%); }
  75% { transform: translate(-3%, 3%); }
}

/* Vignette effect */
.cinematic-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Completed act section */
.cinematic-completed {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  animation: completedSequence 3.5s ease-out forwards;
}

@keyframes completedSequence {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  55% {
    opacity: 0;
    transform: translate(-150%, -50%) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(-150%, -50%) scale(0.8);
  }
}

.completed-icon {
  font-size: 8rem;
  filter: drop-shadow(0 0 30px rgba(201, 165, 92, 0.6));
  animation: iconPulse 1s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.completed-text {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 3rem;
  color: #f5eed6;
  margin-top: 1rem;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.cinematic-subtext {
  font-size: 1.2rem;
  color: #5a7c65;
  letter-spacing: 8px;
  text-transform: uppercase;
  margin-top: 0.5rem;
}

/* Next act section */
.cinematic-next {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(150%, -50%) scale(0.8);
  text-align: center;
  z-index: 10;
  opacity: 0;
  animation: nextSequence 3.5s ease-out forwards;
}

@keyframes nextSequence {
  0%, 50% {
    opacity: 0;
    transform: translate(150%, -50%) scale(0.8);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.cinematic-act-num {
  font-size: 1rem;
  color: #c9a55c;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.next-icon {
  font-size: 10rem;
  filter: drop-shadow(0 0 40px rgba(201, 165, 92, 0.8));
  animation: nextIconGlow 1.5s ease-in-out infinite;
}

@keyframes nextIconGlow {
  0%, 100% {
    filter: drop-shadow(0 0 40px rgba(201, 165, 92, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 60px rgba(201, 165, 92, 0.9));
  }
}

.next-text {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 3.5rem;
  color: #c9a55c;
  margin-top: 1rem;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

@keyframes nodeRingPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Node Shake (locked click) */
.map-node.node-shake {
  animation: nodeShake 0.3s ease;
}

@keyframes nodeShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Available Node Glow Animation */
.map-node.node-available {
  animation: nodeGlow 2s ease-in-out infinite;
}

@keyframes nodeGlow {
  0%, 100% {
    filter: drop-shadow(0 0 4px var(--gold));
  }
  50% {
    filter: drop-shadow(0 0 12px var(--gold));
  }
}

/* Current Node Pulse Animation */
.map-node.node-current {
  animation: nodePulse 1.5s ease-in-out infinite;
}

@keyframes nodePulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px var(--gold));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 20px var(--gold));
    transform: scale(1.05);
  }
}

/* Node Type-Specific Colors */
.map-node.node-combat .node-bg { stroke: var(--bronze); }
.map-node.node-elite .node-bg { stroke: var(--flame); }
.map-node.node-rest .node-bg { stroke: var(--correct); }
.map-node.node-shop .node-bg { stroke: var(--gold); }
.map-node.node-treasure .node-bg { stroke: var(--explore); }
.map-node.node-mystery .node-bg { stroke: var(--explore); }
.map-node.node-boss .node-bg { stroke: var(--incorrect); }

/* Map Status Bar */
.map-status-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 1rem 1.5rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

/* Parchment status bar */
.map-parchment .map-status-bar {
  background: linear-gradient(to top, rgba(60, 41, 20, 0.95), rgba(45, 31, 15, 0.92));
  border-top: 2px solid #3d2914;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 10;
}

.map-parchment .map-status-bar::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a55c, transparent);
}

.map-parchment .status-value {
  color: #f5eed6;
}

.map-parchment .status-divider {
  color: #8b7355;
}

.map-parchment .hp-current {
  color: #e47373;
}

.map-parchment .gold-amount {
  color: #c9a55c;
}

.status-hp,
.status-gold,
.status-deck {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.status-icon {
  font-size: 1.25rem;
}

.status-value {
  font-weight: 600;
  color: var(--text-primary);
}

.status-divider {
  color: var(--text-dim);
  margin: 0 0.125rem;
}

.hp-current {
  color: var(--heart-full);
}

.gold-amount {
  color: var(--gold);
}

/* Potion Slots */
.status-potions {
  display: flex;
  gap: 0.5rem;
}

.potion-slot {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.2s;
}

.potion-slot.empty {
  border-style: dashed;
  opacity: 0.5;
}

.potion-slot.filled:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(201, 165, 92, 0.2);
}

/* Parchment potion slots */
.map-parchment .potion-slot {
  background: linear-gradient(to bottom, #4a3526, #3d2914);
  border: 2px solid #5c4033;
  border-radius: 6px;
}

.map-parchment .potion-slot.empty {
  border-color: #5c4033;
  background: rgba(61, 41, 20, 0.5);
}

.map-parchment .potion-slot.filled:hover {
  border-color: #c9a55c;
  box-shadow: 0 0 12px rgba(201, 165, 92, 0.4);
}

/* Act Transition Screen */
.act-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 22, 18, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.act-transition-content {
  text-align: center;
  padding: 3rem;
  max-width: 500px;
}

.act-complete-banner {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.5rem;
  font-family: 'EB Garamond', Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.act-complete-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.act-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.act-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}

.act-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
}

.act-stat-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.act-transition-choices {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.transition-choice-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.transition-choice-btn:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(201, 165, 92, 0.15);
}

.transition-choice-icon {
  font-size: 2rem;
}

.transition-choice-info {
  flex: 1;
}

.transition-choice-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.transition-choice-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Run Length Selection */
.run-length-selection {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.run-length-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.run-length-option:hover {
  border-color: var(--gold);
}

.run-length-option.selected {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.run-length-icon {
  font-size: 2rem;
}

.run-length-info {
  flex: 1;
}

.run-length-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.run-length-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.run-length-acts {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Rebuttal UI Styles */
.rebuttal-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--flame-intense) 0%, var(--flame) 100%);
  color: var(--bg-deep);
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  z-index: 300;
  animation: rebuttalSlam 0.5s ease forwards;
  box-shadow: 0 4px 30px rgba(232, 163, 85, 0.5);
}

@keyframes rebuttalSlam {
  0% {
    transform: translate(-50%, -50%) scale(2) rotate(-5deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Critical State Warning */
.critical-state-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  background: linear-gradient(90deg, transparent, var(--incorrect), transparent);
  text-align: center;
  z-index: 250;
  animation: criticalPulse 1s ease infinite;
}

.critical-state-warning .warning-text {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--parchment);
}

@keyframes criticalPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Consecutive Wrong Counter */
.consecutive-wrong-indicator {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  z-index: 200;
}

.consecutive-wrong-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  transition: all 0.3s;
}

.consecutive-wrong-dot.active {
  background: var(--incorrect);
  border-color: var(--incorrect);
  box-shadow: 0 0 8px var(--incorrect);
}

/* Potion Earned Animation */
.potion-earned-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  z-index: 350;
  animation: potionPopIn 0.4s ease forwards;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

@keyframes potionPopIn {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.potion-earned-icon {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.potion-earned-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.potion-earned-name {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.potion-earned-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Mobile Responsive Map Styles */
@media (max-width: 600px) {
  .map-header {
    padding: 0.75rem 1rem;
  }

  .act-title .act-name {
    font-size: 1rem;
  }

  .map-status-bar {
    gap: 1rem;
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .status-hp,
  .status-gold,
  .status-deck {
    font-size: 0.9rem;
  }

  .potion-slot {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .act-complete-banner {
    font-size: 1.75rem;
  }

  .transition-choice-btn {
    padding: 0.75rem 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAP COMBAT UI STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

#map-combat-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-deep);
  z-index: 150;
  overflow-y: auto;
}

.map-combat-wrapper {
  max-width: 700px;
  margin: 0 auto;
  padding: 1.5rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.map-combat-wrapper.rebuttal-mode {
  background: linear-gradient(180deg, rgba(232, 163, 85, 0.05) 0%, transparent 30%);
}

/* Combat Header - HP bars */
.combat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.combat-monster,
.combat-player {
  flex: 1;
}

.monster-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.monster-hp-bar,
.player-hp-bar {
  height: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.monster-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--incorrect), #b85450);
  transition: width 0.3s ease;
}

.player-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--correct), #4a9e5a);
  transition: width 0.3s ease;
}

.monster-hp-text,
.player-hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--parchment);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.player-potions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  justify-content: flex-end;
}

.combat-potion-btn {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  cursor: pointer;
  font-size: 1.25rem;
  transition: all 0.2s;
}

.combat-potion-btn.filled:hover:not(:disabled) {
  border-color: var(--gold);
  transform: scale(1.1);
}

.combat-potion-btn.empty {
  border-style: dashed;
  opacity: 0.4;
}

.combat-potion-btn:disabled {
  cursor: not-allowed;
}

/* Combat Question Card */
.combat-question-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.combat-question-card.scaffold-card {
  border-color: var(--flame);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(232, 163, 85, 0.05) 100%);
}

.q-progress {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 1rem;
}

.scaffold-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--flame);
  margin-bottom: 0.5rem;
}

/* Rebuttal Header */
.rebuttal-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.rebuttal-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--flame-intense), var(--flame));
  color: var(--bg-deep);
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}

.rebuttal-hint {
  display: block;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Rebuttal Arc Badge */
.rebuttal-arc-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0.75rem;
  vertical-align: middle;
}

.rebuttal-arc-badge.arc-1 {
  background: linear-gradient(135deg, #4a9eff, #2d8fdd);
  color: white;
}

.rebuttal-arc-badge.arc-2 {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  color: white;
}

.rebuttal-arc-badge.arc-3 {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

/* Narrative Rebuttal Mode */
.map-combat-wrapper.narrative-rebuttal {
  background: linear-gradient(180deg,
    rgba(45, 143, 221, 0.05) 0%,
    var(--bg-deep) 30%,
    var(--bg-deep) 100%
  );
}

.rebuttal-narrative {
  background: linear-gradient(135deg, rgba(45, 143, 221, 0.1) 0%, rgba(155, 89, 182, 0.05) 100%);
  border-left: 3px solid #2d8fdd;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 0 auto 1.5rem auto;
  max-width: 600px;
}

.rebuttal-narrative .narrative-speaker {
  font-weight: 700;
  color: #2d8fdd;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.rebuttal-narrative .narrative-text {
  color: var(--text);
  font-style: italic;
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
}

/* Narrative scaffold card in rebuttal */
.combat-question-card.narrative-scaffold {
  border-left: 4px solid #2d8fdd;
}

/* Victory/Defeat Screens */
.victory-screen,
.defeat-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.victory-screen h2 {
  font-size: 3rem;
  color: var(--gold);
  margin-bottom: 1.5rem;
  font-family: 'EB Garamond', Georgia, serif;
}

.defeat-screen h2 {
  font-size: 2.5rem;
  color: var(--incorrect);
  margin-bottom: 1rem;
  font-family: 'EB Garamond', Georgia, serif;
}

.defeat-screen p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.reward-display {
  margin-bottom: 2rem;
}

.reward-item {
  font-size: 1.25rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.run-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.summary-stat {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.victory-continue-btn,
.defeat-btn {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.victory-continue-btn {
  background: linear-gradient(135deg, var(--gold), var(--flame));
  color: var(--bg-deep);
}

.victory-continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 165, 92, 0.4);
}

.defeat-btn {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 2px solid var(--border);
}

.defeat-btn:hover {
  border-color: var(--gold);
}

/* New High Score Animation */
.new-high-score {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(201, 165, 92, 0.2), rgba(212, 160, 72, 0.2));
  border: 2px solid var(--gold);
  border-radius: 8px;
  animation: highScorePulse 1s ease infinite;
  text-shadow: 0 0 10px rgba(201, 165, 92, 0.5);
}

@keyframes highScorePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(201, 165, 92, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(201, 165, 92, 0.6);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SLAY THE SPIRE STYLE COMBAT UI
   Modern card-based battle interface with cosmic theme
   ═══════════════════════════════════════════════════════════════════════════ */

.map-combat-container.sts-combat {
  background: linear-gradient(180deg, #0a0a1a 0%, #0d1020 50%, #0a0a1a 100%);
  overflow: hidden; /* Prevent scrollbar in STS combat view */
}

.sts-battle-arena {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

/* Starfield Background */
.sts-starfield-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.1) 0%, transparent 30%);
  pointer-events: none;
  z-index: 0;
}

.sts-battle-arena > * {
  position: relative;
  z-index: 1;
}

/* Critical State Warning */
.sts-critical {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.3), rgba(239, 68, 68, 0.2));
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  animation: criticalPulse 1.5s ease infinite;
  margin-bottom: 1rem;
}

.sts-critical .warning-icon {
  font-size: 1.25rem;
  animation: shake 0.3s ease infinite;
}

.sts-critical .warning-text {
  color: #fca5a5;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes criticalPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
  50% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.5); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* Monster Section */
.sts-monster-section {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
}

.sts-monster-display {
  text-align: center;
  padding: 1.5rem 2rem;
  background: linear-gradient(180deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 35, 0.95));
  border: 2px solid rgba(100, 100, 150, 0.3);
  border-radius: 16px;
  min-width: 280px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.sts-monster-display.elite {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 8px 32px rgba(251, 191, 36, 0.2);
}

.sts-monster-display.elite::before {
  content: '★ ELITE ★';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a1a2e;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  letter-spacing: 2px;
}

.sts-monster-sprite {
  font-size: 4rem;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 0 20px currentColor);
  animation: monsterFloat 3s ease-in-out infinite;
}

@keyframes monsterFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.sts-monster-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 0.25rem;
  font-family: 'EB Garamond', Georgia, serif;
}

.sts-monster-taunt {
  font-size: 0.85rem;
  color: #94a3b8;
  font-style: italic;
  margin-bottom: 0.75rem;
}

/* HP Bars - Universal */
.sts-hp-bar {
  height: 20px;
  background: rgba(30, 30, 40, 0.9);
  border: 1px solid rgba(100, 100, 120, 0.5);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.sts-hp-bar.monster-hp {
  margin-bottom: 0.75rem;
}

.sts-hp-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.sts-hp-bar.player-hp .sts-hp-fill {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

.sts-hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Monster Intent */
.sts-intent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  margin-top: 0.5rem;
}

.sts-intent .intent-icon {
  font-size: 1rem;
}

.sts-intent .intent-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fca5a5;
}

.sts-intent .intent-label {
  font-size: 0.7rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Battle Middle - Question Prompt */
.sts-battle-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1rem;
}

.sts-question-prompt {
  background: linear-gradient(180deg, rgba(30, 30, 50, 0.8), rgba(20, 20, 35, 0.9));
  border: 1px solid rgba(100, 100, 150, 0.3);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.sts-turn-indicator {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #64748b;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.sts-combo {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-weight: 700;
  animation: comboPulse 0.5s ease infinite;
}

@keyframes comboPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.sts-question-text {
  font-size: 1.2rem;
  color: #e2e8f0;
  line-height: 1.6;
  font-family: 'EB Garamond', Georgia, serif;
}

/* Player Section */
.sts-player-section {
  padding: 1rem;
  background: linear-gradient(180deg, transparent, rgba(20, 20, 35, 0.5));
}

.sts-player-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.sts-player-hp {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sts-player-hp .hp-icon {
  font-size: 1.25rem;
}

.sts-player-hp .sts-hp-bar {
  width: 150px;
}

.sts-damage-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 6px;
}

.sts-damage-preview .damage-icon {
  font-size: 1rem;
}

.sts-damage-preview .damage-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #4ade80;
}

.sts-damage-preview .damage-label {
  font-size: 0.7rem;
  color: #94a3b8;
  text-transform: uppercase;
}

.sts-potions {
  display: flex;
  gap: 0.5rem;
}

.sts-potion-btn {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(100, 100, 150, 0.5);
  border-radius: 8px;
  background: rgba(30, 30, 50, 0.9);
  cursor: pointer;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.sts-potion-btn.filled:hover:not(:disabled) {
  border-color: #fbbf24;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.sts-potion-btn.empty {
  border-style: dashed;
  opacity: 0.3;
}

.sts-potion-btn:disabled {
  cursor: not-allowed;
}

/* Strike Counter */
.sts-strike-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.strike-pip {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(239, 68, 68, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: rgba(239, 68, 68, 0.5);
  transition: all 0.3s;
}

.strike-pip.filled {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fca5a5;
}

.strike-label {
  font-size: 0.7rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: 0.5rem;
}

/* Card Hand - Fan Layout */
.sts-card-hand {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 1.5rem 1rem 2rem;
  perspective: 1000px;
  min-height: 220px;
  position: relative;
}

.sts-answer-card {
  width: 160px;
  min-height: 200px;
  background: linear-gradient(180deg, #1e1e35 0%, #12121f 100%);
  border: 3px solid rgba(100, 100, 150, 0.4);
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease,
              border-color 0.2s ease,
              margin 0.25s ease;
  margin: 0 -20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Fan layout positioning */
.sts-answer-card:nth-child(1) { transform: rotate(-6deg) translateY(8px); z-index: 1; }
.sts-answer-card:nth-child(2) { transform: rotate(-2deg) translateY(2px); z-index: 2; }
.sts-answer-card:nth-child(3) { transform: rotate(2deg) translateY(2px); z-index: 3; }
.sts-answer-card:nth-child(4) { transform: rotate(6deg) translateY(8px); z-index: 4; }

/* Card draw animation */
.sts-answer-card.card-drawing {
  animation: cardDraw 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sts-answer-card:nth-child(1).card-drawing { animation-delay: 0ms; }
.sts-answer-card:nth-child(2).card-drawing { animation-delay: 80ms; }
.sts-answer-card:nth-child(3).card-drawing { animation-delay: 160ms; }
.sts-answer-card:nth-child(4).card-drawing { animation-delay: 240ms; }

@keyframes cardDraw {
  0% {
    opacity: 0;
    transform: translateX(200px) translateY(100px) rotate(15deg) scale(0.5);
  }
  100% {
    opacity: 1;
  }
}

/* Hover - card lifts from hand */
.sts-answer-card:hover {
  transform: translateY(-40px) scale(1.08) rotate(0deg) !important;
  border-color: rgba(200, 200, 255, 0.8);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(100, 100, 255, 0.3);
  z-index: 100 !important;
  margin: 0 10px;
}

/* Neighbors spread apart on hover */
.sts-card-hand:has(.sts-answer-card:nth-child(1):hover) .sts-answer-card:nth-child(2) { transform: rotate(4deg) translateY(2px) translateX(15px); }
.sts-card-hand:has(.sts-answer-card:nth-child(2):hover) .sts-answer-card:nth-child(1) { transform: rotate(-10deg) translateY(8px) translateX(-15px); }
.sts-card-hand:has(.sts-answer-card:nth-child(2):hover) .sts-answer-card:nth-child(3) { transform: rotate(6deg) translateY(2px) translateX(15px); }
.sts-card-hand:has(.sts-answer-card:nth-child(3):hover) .sts-answer-card:nth-child(2) { transform: rotate(-6deg) translateY(2px) translateX(-15px); }
.sts-card-hand:has(.sts-answer-card:nth-child(3):hover) .sts-answer-card:nth-child(4) { transform: rotate(10deg) translateY(8px) translateX(15px); }
.sts-card-hand:has(.sts-answer-card:nth-child(4):hover) .sts-answer-card:nth-child(3) { transform: rotate(-4deg) translateY(2px) translateX(-15px); }

.sts-answer-card:hover .card-glow {
  opacity: 0.4;
}

.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, var(--glow-color, #6366f1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

/* Card Rarity Borders */
.sts-answer-card.rarity-common {
  border-color: rgba(100, 100, 120, 0.6);
}
.sts-answer-card.rarity-uncommon {
  border-color: rgba(34, 197, 94, 0.7);
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.2);
}
.sts-answer-card.rarity-rare {
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.sts-answer-card.rarity-epic {
  border-color: rgba(168, 85, 247, 0.8);
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
  animation: epicPulse 2s ease-in-out infinite;
}

@keyframes epicPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4); }
  50% { box-shadow: 0 4px 25px rgba(168, 85, 247, 0.6), 0 0 15px rgba(168, 85, 247, 0.3); }
}

.card-energy {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Keyboard shortcut hint */
.card-energy::after {
  content: attr(data-key);
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 0.2s;
}

.sts-answer-card:hover .card-energy::after {
  opacity: 1;
}

.card-type {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #64748b;
  margin-top: 0.5rem;
  margin-left: 1.5rem;
}

/* Card type colors */
.card-type.type-attack { color: #ef4444; }
.card-type.type-defend { color: #3b82f6; }
.card-type.type-skill { color: #22c55e; }
.card-type.type-power { color: #f59e0b; }

.card-content {
  flex: 1;
  font-size: 0.9rem;
  color: #e2e8f0;
  line-height: 1.4;
  margin: 0.75rem 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 100, 150, 0.3) transparent;
}

.card-effect {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 4px;
  margin-top: auto;
}

.card-effect .effect-icon {
  font-size: 0.8rem;
}

.card-effect .effect-text {
  font-size: 0.75rem;
  color: #4ade80;
  font-weight: 600;
}

/* Card Play Animation - travels to center then explodes */
.sts-answer-card.card-played {
  animation: cardPlaySequence 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none;
}

@keyframes cardPlaySequence {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  40% {
    transform: scale(1.15) translateY(-80px) rotate(5deg);
    opacity: 1;
  }
  70% {
    transform: scale(1.2) translateY(-100px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.3) translateY(-150px) rotate(15deg);
    opacity: 0;
    filter: blur(4px);
  }
}

/* Wrong card shatters */
.sts-answer-card.card-shattered {
  animation: cardShatter 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes cardShatter {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  20% {
    transform: scale(1.1);
    filter: brightness(2) saturate(0);
  }
  100% {
    transform: scale(0.8) rotate(10deg);
    opacity: 0;
    filter: brightness(0.5) blur(3px);
  }
}

/* Monster hit animation - enhanced */
#stsMonster.hit {
  animation: monsterHit 0.4s ease;
}

@keyframes monsterHit {
  0%, 100% { transform: translateX(0) scale(1); filter: brightness(1); }
  15% { transform: translateX(-15px) scale(0.95); filter: brightness(2) hue-rotate(-20deg); }
  30% { transform: translateX(15px) scale(0.95); filter: brightness(1.5); }
  45% { transform: translateX(-8px) scale(0.98); filter: brightness(1.3); }
  60% { transform: translateX(8px) scale(0.98); filter: brightness(1.1); }
}

/* Monster attack animation */
#stsMonster.attacking {
  animation: monsterAttack 0.6s ease;
}

@keyframes monsterAttack {
  0% { transform: translateY(0) scale(1); }
  20% { transform: translateY(-20px) scale(1.1); }
  40% { transform: translateY(30px) scale(1.15); filter: brightness(1.3); }
  60% { transform: translateY(10px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* Monster low HP - desperate state */
#stsMonster.desperate {
  animation: monsterDesperate 1s ease-in-out infinite;
}

@keyframes monsterDesperate {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2) hue-rotate(10deg); }
}

/* Screen shake on player hit */
.sts-battle-arena.screen-shake {
  animation: screenShake 0.4s ease;
}

@keyframes screenShake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-8px) translateY(2px); }
  20% { transform: translateX(8px) translateY(-2px); }
  30% { transform: translateX(-6px) translateY(1px); }
  40% { transform: translateX(6px) translateY(-1px); }
  50% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
}

/* Red vignette on damage */
.sts-battle-arena.damage-vignette::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(220, 38, 38, 0.4) 100%);
  pointer-events: none;
  animation: vignetteFlash 0.5s ease-out forwards;
  z-index: 1000;
}

@keyframes vignetteFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Floating Damage Numbers */
.damage-number {
  position: absolute;
  font-size: 2rem;
  font-weight: 900;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px currentColor;
  pointer-events: none;
  z-index: 200;
  animation: damageFloat 1.2s ease-out forwards;
}

.damage-number.damage-dealt {
  color: #4ade80;
}

.damage-number.damage-taken {
  color: #ef4444;
}

.damage-number.critical {
  font-size: 2.5rem;
  color: #fbbf24;
  animation: damageCritical 1.2s ease-out forwards;
}

.damage-number.heal {
  color: #22d3ee;
}

@keyframes damageFloat {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.5);
  }
  20% {
    transform: translateY(-20px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(0.8);
  }
}

@keyframes damageCritical {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.3) rotate(-10deg);
  }
  15% {
    transform: translateY(-15px) scale(1.5) rotate(5deg);
  }
  30% {
    transform: translateY(-30px) scale(1.2) rotate(-3deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(0.8) rotate(0deg);
  }
}

/* Damage breakdown tooltip */
.damage-breakdown {
  position: absolute;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.7);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 199;
  animation: breakdownFade 1.5s ease-out forwards;
}

@keyframes breakdownFade {
  0% { opacity: 0; transform: translateY(10px); }
  15% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* Combo Visual Escalation */
.sts-combo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 700;
  animation: comboPulse 0.5s ease;
}

.sts-combo.combo-2 {
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}

.sts-combo.combo-3 {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
  animation: comboPulse 0.5s ease, comboGlow 1s ease-in-out infinite;
}

.sts-combo.combo-5 {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.7);
  animation: comboPulse 0.5s ease, comboGlow 0.8s ease-in-out infinite;
}

.sts-combo.combo-10 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.8), 0 0 60px rgba(251, 191, 36, 0.4);
  animation: comboPulse 0.5s ease, legendaryGlow 0.5s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

@keyframes comboPulse {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes comboGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

@keyframes legendaryGlow {
  0%, 100% { filter: brightness(1) hue-rotate(0deg); }
  50% { filter: brightness(1.3) hue-rotate(10deg); }
}

/* Combo screen border glow for high combos */
.sts-battle-arena.combo-high::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px solid transparent;
  pointer-events: none;
  z-index: 50;
}

.sts-battle-arena.combo-5::before {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: inset 0 0 30px rgba(168, 85, 247, 0.2);
}

.sts-battle-arena.combo-10::before {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: inset 0 0 50px rgba(251, 191, 36, 0.3);
  animation: legendaryBorder 0.5s ease-in-out infinite;
}

@keyframes legendaryBorder {
  0%, 100% { border-color: rgba(251, 191, 36, 0.5); }
  50% { border-color: rgba(251, 191, 36, 0.8); }
}

/* Question Progress Indicator */
.sts-progress-indicator {
  position: absolute;
  top: 10px;
  right: 15px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.sts-progress-ring {
  width: 36px;
  height: 36px;
  position: relative;
}

.sts-progress-ring svg {
  transform: rotate(-90deg);
}

.sts-progress-ring circle {
  fill: none;
  stroke-width: 3;
}

.sts-progress-ring .progress-bg {
  stroke: rgba(100, 100, 150, 0.3);
}

.sts-progress-ring .progress-fill {
  stroke: #4ade80;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}

.sts-progress-text {
  font-weight: 600;
}

/* Feedback Area */
.sts-feedback {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  pointer-events: none;
}

.sts-feedback-message {
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  animation: feedbackPop 1s ease forwards;
}

.sts-feedback-message.correct {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9));
  color: #fff;
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.5);
}

.sts-feedback-message.wrong {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(185, 28, 28, 0.9));
  color: #fff;
  box-shadow: 0 8px 32px rgba(239, 68, 68, 0.5);
}

@keyframes feedbackPop {
  0% { transform: scale(0); opacity: 0; }
  20% { transform: scale(1.2); opacity: 1; }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}

/* Responsive */
@media (max-width: 768px) {
  .sts-card-hand {
    gap: 0.5rem;
  }

  .sts-answer-card {
    width: calc(50% - 0.5rem);
    min-height: 150px;
    padding: 0.75rem;
  }

  .sts-monster-sprite {
    font-size: 3rem;
  }

  .sts-question-text {
    font-size: 1rem;
  }

  .sts-player-stats {
    gap: 1rem;
  }

  .sts-player-hp .sts-hp-bar {
    width: 100px;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* LOOT DROP ANIMATION - Card Cascade                               */
/* ═══════════════════════════════════════════════════════════════ */

.loot-drops {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  perspective: 1000px;
}

.loot-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 2px solid;
  border-radius: 8px;
  opacity: 0;
  transform-origin: top center;
  animation: cardDeal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Stagger each card like dealing from a deck */
.loot-item:nth-child(1) { animation-delay: 0.1s; }
.loot-item:nth-child(2) { animation-delay: 0.25s; }
.loot-item:nth-child(3) { animation-delay: 0.4s; }
.loot-item:nth-child(4) { animation-delay: 0.55s; }
.loot-item:nth-child(5) { animation-delay: 0.7s; }

@keyframes cardDeal {
  0% {
    opacity: 0;
    transform: translateY(-80px) translateX(60px) rotateY(-30deg) rotateZ(-5deg) scale(0.6);
  }
  50% {
    opacity: 1;
    transform: translateY(10px) translateX(-5px) rotateY(5deg) rotateZ(1deg) scale(1.05);
  }
  75% {
    transform: translateY(-3px) rotateY(-2deg) rotateZ(-0.5deg) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateY(0) rotateZ(0) scale(1);
  }
}

/* Rarity-based glow on landing */
.loot-item.rarity-COMMON { border-color: #6b7280; }
.loot-item.rarity-UNCOMMON {
  border-color: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}
.loot-item.rarity-RARE {
  border-color: #3b82f6;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
  animation: cardDeal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, rareLootGlow 2s ease-in-out infinite 0.5s;
}
.loot-item.rarity-EPIC {
  border-color: #a855f7;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
  animation: cardDeal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, epicLootGlow 1.5s ease-in-out infinite 0.5s;
}
.loot-item.rarity-UNIQUE {
  border-color: #06b6d4;
  background: linear-gradient(135deg, var(--bg-card), rgba(6, 182, 212, 0.1));
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.6);
  animation: cardDeal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, uniqueLootShine 2s ease-in-out infinite 0.5s;
}

@keyframes rareLootGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); }
  50% { box-shadow: 0 0 25px rgba(59, 130, 246, 0.7); }
}

@keyframes epicLootGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.5); }
  50% { box-shadow: 0 0 35px rgba(168, 85, 247, 0.8); }
}

@keyframes uniqueLootShine {
  0%, 100% {
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.6);
    background: linear-gradient(135deg, var(--bg-card), rgba(6, 182, 212, 0.1));
  }
  50% {
    box-shadow: 0 0 40px rgba(6, 182, 212, 0.9);
    background: linear-gradient(135deg, var(--bg-card), rgba(6, 182, 212, 0.2));
  }
}

/* Card flip reveal for special loot */
.loot-item.reveal-flip {
  animation: cardFlipReveal 0.6s ease-out forwards;
}

@keyframes cardFlipReveal {
  0% {
    transform: rotateY(180deg) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: rotateY(90deg) scale(0.9);
    opacity: 0.5;
  }
  100% {
    transform: rotateY(0) scale(1);
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* GOLD/XP PICKUP EFFECTS                                           */
/* ═══════════════════════════════════════════════════════════════ */

.pickup-coin {
  animation: coinSparkle 0.15s ease-in-out infinite;
}

@keyframes coinSparkle {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8)); }
  50% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 1)); }
}

.pickup-xp {
  animation: xpSparkle 0.1s ease-in-out infinite;
}

@keyframes xpSparkle {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(201, 165, 92, 0.9)); }
  50% { filter: drop-shadow(0 0 12px rgba(201, 165, 92, 1)); }
}

/* Counter flash when coins/XP arrive */
.counter-flash {
  animation: counterGoldFlash 0.4s ease-out;
}

@keyframes counterGoldFlash {
  0% {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    transform: scale(1.2);
  }
  100% {
    text-shadow: none;
    transform: scale(1);
  }
}

.xp-flash {
  animation: counterXPFlash 0.3s ease-out;
}

@keyframes counterXPFlash {
  0% {
    text-shadow: 0 0 10px rgba(201, 165, 92, 0.8);
    transform: scale(1.15);
  }
  100% {
    text-shadow: none;
    transform: scale(1);
  }
}

/* Gold counter styles */
.gold-amount.counter-flash {
  color: #ffd700 !important;
}

/* XP bar pulse */
.xp-bar-fill.xp-flash {
  box-shadow: 0 0 15px var(--gold);
}

/* ═══════════════════════════════════════════════════════════════ */
/* SHOP UI THEME - Antique Merchant Display Case                    */
/* ═══════════════════════════════════════════════════════════════ */

#map-shop-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 22, 18, 0.95);
  z-index: 400;
}

.shop-wrapper {
  max-width: 900px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #2d261f 0%, #1a1612 100%);
  border: 3px solid #5c4033;
  border-radius: 12px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.5),
    inset 0 0 60px rgba(201, 165, 92, 0.05);
  position: relative;
}

/* Velvet backing effect */
.shop-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(139, 64, 73, 0.05) 0%, transparent 50%, rgba(139, 64, 73, 0.03) 100%);
  pointer-events: none;
}

/* Ornate header with merchant */
.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  background: linear-gradient(to bottom, rgba(92, 64, 51, 0.3), transparent);
  border-bottom: 2px solid #5c4033;
}

.shop-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.shop-merchant-icon {
  font-size: 3rem;
  filter: drop-shadow(0 0 10px rgba(201, 165, 92, 0.4));
}

.shop-title-text {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 2rem;
  color: #f5eed6;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.shop-gold {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  color: #c9a55c;
  font-weight: 600;
}

/* Display case shelves */
.shop-shelves {
  padding: 1.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

/* Individual item display */
.shop-item {
  background: linear-gradient(145deg, #242019, #1a1612);
  border: 2px solid #5c4033;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

/* Velvet pillow effect under item */
.shop-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 30%;
  background: radial-gradient(ellipse at center bottom, rgba(139, 64, 73, 0.2), transparent);
  border-radius: 50%;
}

.shop-item:hover {
  border-color: #c9a55c;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(201, 165, 92, 0.2);
}

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

.shop-item-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  transition: transform 0.2s;
  position: relative;
  z-index: 1;
}

.shop-item-name {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  color: #f5eed6;
  margin-bottom: 0.25rem;
}

.shop-item-price {
  font-size: 0.9rem;
  color: #c9a55c;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.shop-item.sold-out {
  opacity: 0.5;
  cursor: not-allowed;
}

.shop-item.sold-out::after {
  content: 'SOLD';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  font-size: 1.5rem;
  font-weight: 700;
  color: #8b4049;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

/* Shop close button */
.shop-close-btn {
  padding: 0.75rem 2rem;
  margin: 0 2rem 1.5rem;
  background: linear-gradient(to bottom, #5c4033, #3d2914);
  border: 2px solid #c9a55c;
  border-radius: 6px;
  color: #f5eed6;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  width: calc(100% - 4rem);
}

.shop-close-btn:hover {
  background: linear-gradient(to bottom, #6d5144, #4e3a25);
  box-shadow: 0 4px 15px rgba(201, 165, 92, 0.3);
}

/* ═══════════════════════════════════════════════════════════════ */
/* STREAK INDICATOR - Fire Trail Effect                             */
/* ═══════════════════════════════════════════════════════════════ */

.streak-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  border-radius: 8px;
  border: 2px solid var(--border);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.streak-indicator::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--streak-fill, 0%);
  height: 4px;
  background: linear-gradient(90deg, #ff4500, #ff8c00, #ffd700);
  transition: width 0.3s;
}

.streak-icon {
  font-size: 1.5rem;
  transition: all 0.2s;
}

.streak-count {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-primary);
  transition: all 0.2s;
}

/* Streak levels with increasing fire */
.streak-indicator[data-streak="0"],
.streak-indicator[data-streak="1"],
.streak-indicator[data-streak="2"] {
  --streak-fill: 0%;
  border-color: var(--border);
}

.streak-indicator[data-streak="3"],
.streak-indicator[data-streak="4"] {
  --streak-fill: 40%;
  border-color: #ff8c00;
  box-shadow: 0 0 10px rgba(255, 140, 0, 0.3);
}

.streak-indicator[data-streak="3"] .streak-icon,
.streak-indicator[data-streak="4"] .streak-icon {
  animation: streakFlicker 0.3s ease-in-out infinite;
}

.streak-indicator[data-streak="5"],
.streak-indicator[data-streak="6"],
.streak-indicator[data-streak="7"] {
  --streak-fill: 70%;
  border-color: #ff4500;
  background: linear-gradient(135deg, var(--bg-card), rgba(255, 69, 0, 0.1));
  box-shadow: 0 0 15px rgba(255, 69, 0, 0.4);
}

.streak-indicator[data-streak="5"] .streak-icon,
.streak-indicator[data-streak="6"] .streak-icon,
.streak-indicator[data-streak="7"] .streak-icon {
  animation: streakBurn 0.2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px #ff4500);
}

.streak-indicator[data-streak="5"] .streak-count,
.streak-indicator[data-streak="6"] .streak-count,
.streak-indicator[data-streak="7"] .streak-count {
  color: #ff8c00;
}

/* High streak (8+) - ON FIRE */
.streak-indicator.on-fire {
  --streak-fill: 100%;
  border-color: #ffd700;
  background: linear-gradient(135deg, rgba(255, 69, 0, 0.15), rgba(255, 140, 0, 0.1), rgba(255, 215, 0, 0.1));
  box-shadow: 0 0 25px rgba(255, 140, 0, 0.6), 0 0 50px rgba(255, 69, 0, 0.3);
  animation: streakGlowPulse 0.5s ease-in-out infinite;
}

.streak-indicator.on-fire::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 30px;
  background: linear-gradient(to top, rgba(255, 69, 0, 0.8), rgba(255, 140, 0, 0.4), transparent);
  filter: blur(3px);
  animation: fireWave 0.3s ease-in-out infinite alternate;
}

.streak-indicator.on-fire .streak-icon {
  animation: streakBlaze 0.15s ease-in-out infinite;
  filter: drop-shadow(0 0 10px #ffd700);
  font-size: 1.8rem;
}

.streak-indicator.on-fire .streak-count {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  font-size: 1.5rem;
}

@keyframes streakFlicker {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes streakBurn {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.1) rotate(2deg); }
}

@keyframes streakBlaze {
  0% { transform: scale(1) rotate(-3deg); }
  33% { transform: scale(1.15) rotate(3deg); }
  66% { transform: scale(1.05) rotate(-2deg); }
  100% { transform: scale(1) rotate(2deg); }
}

@keyframes streakGlowPulse {
  0%, 100% {
    box-shadow: 0 0 25px rgba(255, 140, 0, 0.6), 0 0 50px rgba(255, 69, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 140, 0, 0.8), 0 0 70px rgba(255, 69, 0, 0.5);
  }
}

@keyframes fireWave {
  from { transform: translateX(-50%) scaleY(1); opacity: 0.8; }
  to { transform: translateX(-50%) scaleY(1.2); opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════════ */
/* PLAYER TOKEN - Lantern with Light Trail                         */
/* ═══════════════════════════════════════════════════════════════ */

.player-token {
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  animation: lanternFloat 2s ease-in-out infinite;
}

@keyframes lanternFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.lantern-glow {
  animation: lanternGlowPulse 1.5s ease-in-out infinite;
}

@keyframes lanternGlowPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.4);
  }
}

.lantern-icon {
  animation: lanternFlicker 0.3s ease-in-out infinite;
}

@keyframes lanternFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* Light trail on completed paths */
.path-completed::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 215, 0, 0.1) 25%,
    rgba(255, 215, 0, 0.2) 50%,
    rgba(255, 215, 0, 0.1) 75%,
    transparent 100%
  );
  animation: lightTrail 3s linear infinite;
  pointer-events: none;
}

@keyframes lightTrail {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.loot-icon {
  font-size: 1.5rem;
}

.loot-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.loot-unique-tag {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: white;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: auto;
}

.gem-drop {
  color: var(--explore);
}

.boss-loot-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(201, 165, 92, 0.1);
  border: 1px solid var(--gold-soft);
  border-radius: 12px;
}

.boss-loot-section h3 {
  margin-bottom: 0.75rem;
  font-family: 'EB Garamond', Georgia, serif;
}

/* Rest Site Styles */
#map-rest-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-deep);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rest-site-wrapper {
  text-align: center;
  padding: 2rem;
}

.rest-site-header {
  margin-bottom: 2rem;
}

.rest-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 0.5rem;
}

.rest-site-header h2 {
  font-size: 2rem;
  color: var(--gold);
  font-family: 'EB Garamond', Georgia, serif;
}

.rest-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 400px;
  margin: 0 auto;
}

.rest-option-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.rest-option-btn:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.rest-option-btn .option-icon {
  font-size: 2rem;
}

.rest-option-btn .option-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.rest-option-btn .option-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Keyframe for fadeInOut (used by feedback) */
@keyframes fadeInOut {
  0% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* Monster Taunt */
.monster-taunt {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-secondary);
  margin: 0.25rem 0 0.5rem 0;
  opacity: 0.9;
  animation: tauntFade 3s ease forwards;
}

@keyframes tauntFade {
  0%, 80% { opacity: 0.9; }
  100% { opacity: 0.3; }
}

/* Combo Badge */
.combo-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold), var(--flame));
  color: var(--bg-deep);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.8rem;
  margin-left: 0.75rem;
  animation: comboPulse 0.5s ease;
}

.combo-badge[data-combo="3"],
.combo-badge[data-combo="4"] {
  background: linear-gradient(135deg, var(--gold), var(--flame));
}

.combo-badge[data-combo="5"],
.combo-badge[data-combo="6"],
.combo-badge[data-combo="7"],
.combo-badge[data-combo="8"],
.combo-badge[data-combo="9"] {
  background: linear-gradient(135deg, var(--flame), var(--incorrect));
  box-shadow: 0 0 10px rgba(232, 163, 85, 0.5);
}

.combo-badge[data-combo="10"] {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  box-shadow: 0 0 15px rgba(238, 90, 36, 0.6);
  animation: comboPulse 0.3s ease infinite;
}

@keyframes comboPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Damage Number Styles (for ScreenEffects) */
.damage-number {
  position: absolute;
  top: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  pointer-events: none;
  animation: damageFloat 1.2s ease forwards;
  z-index: 500;
}

.damage-number.positive {
  color: var(--gold);
}

.damage-number.negative {
  color: var(--incorrect);
}

.damage-number.heal {
  color: var(--correct);
}

.damage-number.xp {
  color: var(--explore);
  font-size: 1rem;
}

.damage-number.crit {
  font-size: 2rem;
  color: var(--flame-intense);
  text-shadow: 0 0 10px var(--flame);
}

@keyframes damageFloat {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  20% {
    transform: translateY(-20px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0.8);
  }
}

/* Answer flash effects */
.correct-flash {
  animation: correctFlash 0.4s ease;
}

.wrong-flash {
  animation: wrongFlash 0.4s ease;
}

@keyframes correctFlash {
  0%, 100% { background-color: inherit; }
  50% { background-color: var(--correct-soft); border-color: var(--correct); }
}

@keyframes wrongFlash {
  0%, 100% { background-color: inherit; transform: translateX(0); }
  25% { background-color: var(--incorrect-soft); transform: translateX(-5px); }
  75% { background-color: var(--incorrect-soft); transform: translateX(5px); }
}

/* Screen shake classes */
body.shake {
  animation: screenShake 0.4s ease;
}

body.big-shake {
  animation: bigScreenShake 0.5s ease;
}

@keyframes screenShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(3px); }
}

@keyframes bigScreenShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-8px, -4px); }
  20% { transform: translate(8px, 4px); }
  30% { transform: translate(-6px, 2px); }
  40% { transform: translate(6px, -2px); }
  50% { transform: translate(-4px, 4px); }
  60% { transform: translate(4px, -4px); }
  70% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -2px); }
  90% { transform: translate(-1px, 1px); }
}

/* Critical HP red vignette */
body.critical-hp::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1000;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(139, 64, 73, 0.3) 100%);
  animation: criticalPulseVignette 1s ease infinite;
}

@keyframes criticalPulseVignette {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MONSTER DEATH ANIMATION - INK DISSOLVE
   Monster bleeds into ink splatters that drip down like wet paper
   ═══════════════════════════════════════════════════════════════════════════ */

.monster-death-container {
  position: relative;
  overflow: visible;
}

.monster-dying {
  animation: inkDissolve 1.2s ease-out forwards;
  filter: sepia(0.3);
}

@keyframes inkDissolve {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: sepia(0.3) blur(0);
  }
  30% {
    opacity: 0.9;
    transform: scale(1.05);
    filter: sepia(0.5) blur(1px);
  }
  60% {
    opacity: 0.6;
    transform: scale(0.95) translateY(10px);
    filter: sepia(0.8) blur(2px) contrast(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
    filter: sepia(1) blur(4px) contrast(0.5);
  }
}

/* Ink splatter particles */
.ink-splatter {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(ellipse at center, #2a1f16 0%, #3d2914 50%, transparent 70%);
  border-radius: 50% 40% 60% 45%;
  pointer-events: none;
  animation: inkDrip 1.5s ease-out forwards;
  z-index: 100;
}

@keyframes inkDrip {
  0% {
    opacity: 1;
    transform: scale(0.5) translateY(0);
  }
  20% {
    opacity: 1;
    transform: scale(1.2) translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: scale(0.3) translateY(150px);
  }
}

/* Ink pool forming */
.ink-pool {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  background: radial-gradient(ellipse at center, rgba(42, 31, 22, 0.8) 0%, rgba(61, 41, 20, 0.5) 50%, transparent 70%);
  border-radius: 50%;
  animation: inkPoolSpread 1s ease-out 0.3s forwards;
  z-index: 50;
}

@keyframes inkPoolSpread {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 120px;
    height: 30px;
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POTION USE ANIMATION - DRINK & GLOW
   Character silhouette tips bottle back, body pulses with effect color
   ═══════════════════════════════════════════════════════════════════════════ */

.potion-use-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  animation: fadeIn 0.2s ease;
}

.potion-use-animation {
  position: relative;
  width: 200px;
  height: 300px;
}

.potion-silhouette {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 150px;
  background: #1a1612;
  border-radius: 50% 50% 45% 45% / 30% 30% 70% 70%;
  box-shadow: 0 0 0 3px rgba(201, 165, 92, 0.3);
}

.potion-bottle {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(-30deg);
  font-size: 4rem;
  animation: potionDrink 1.2s ease-in-out forwards;
  filter: drop-shadow(0 0 10px var(--potion-color, #c9a55c));
}

@keyframes potionDrink {
  0% {
    transform: translateX(-50%) rotate(-30deg) translateY(0);
    opacity: 1;
  }
  30% {
    transform: translateX(-50%) rotate(-60deg) translateY(-20px);
    opacity: 1;
  }
  60% {
    transform: translateX(-50%) rotate(-90deg) translateY(-30px);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) rotate(-90deg) translateY(-30px);
    opacity: 0;
  }
}

/* Body glow pulse based on potion type */
.silhouette-glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 150px;
  border-radius: 50% 50% 45% 45% / 30% 30% 70% 70%;
  background: transparent;
  animation: bodyGlow 1s ease-in-out 0.5s forwards;
  pointer-events: none;
}

@keyframes bodyGlow {
  0% {
    box-shadow: inset 0 0 0 transparent;
    opacity: 0;
  }
  30% {
    box-shadow: inset 0 -50px 30px -10px var(--potion-color, #c9a55c);
    opacity: 0.8;
  }
  60% {
    box-shadow: inset 0 0 60px 20px var(--potion-color, #c9a55c);
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 100px 40px var(--potion-color, #c9a55c);
    opacity: 0;
  }
}

/* Potion color variants */
.potion-health { --potion-color: #e47373; }
.potion-block { --potion-color: #6b8cce; }
.potion-strength { --potion-color: #e8a355; }
.potion-draw { --potion-color: #9b7ed9; }
.potion-lucky { --potion-color: #5aad72; }

/* Potion effect text */
.potion-effect-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: var(--potion-color, #c9a55c);
  text-shadow: 0 0 20px var(--potion-color, #c9a55c);
  opacity: 0;
  animation: effectTextPop 0.8s ease-out 0.8s forwards;
  white-space: nowrap;
}

@keyframes effectTextPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -70%) scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REBUTTAL MODE VISUAL - CRACKED GLASS
   Screen appears fractured, healing if you answer correctly
   ═══════════════════════════════════════════════════════════════════════════ */

.rebuttal-crack-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 250;
  animation: crackAppear 0.3s ease-out forwards;
}

@keyframes crackAppear {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* SVG crack pattern overlay */
.crack-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M400 300 L350 200 L300 180 M400 300 L450 180 L480 150 M400 300 L380 400 L350 500 M400 300 L500 350 L600 380 M400 300 L250 320 L100 350 M400 300 L420 220 L440 100 M400 300 L320 350 L200 420' stroke='rgba(200,200,200,0.4)' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: cracksSpread 0.5s ease-out forwards;
}

@keyframes cracksSpread {
  0% {
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    opacity: 1;
    clip-path: circle(100% at 50% 50%);
  }
}

/* Impact point glow */
.crack-impact {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(139, 64, 73, 0.6) 0%, transparent 70%);
  border-radius: 50%;
  animation: impactPulse 1s ease-in-out infinite;
}

@keyframes impactPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.9;
  }
}

/* Rebuttal stamp watermark */
.rebuttal-stamp {
  position: fixed;
  top: 15%;
  right: 10%;
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 3rem;
  color: rgba(139, 64, 73, 0.3);
  transform: rotate(-15deg);
  text-transform: uppercase;
  letter-spacing: 8px;
  border: 4px solid rgba(139, 64, 73, 0.3);
  padding: 0.5rem 1.5rem;
  animation: stampSlam 0.4s ease-out forwards;
  z-index: 251;
}

@keyframes stampSlam {
  0% {
    transform: rotate(-15deg) scale(3);
    opacity: 0;
  }
  70% {
    transform: rotate(-15deg) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: rotate(-15deg) scale(1);
    opacity: 1;
  }
}

/* Glass healing animation on correct */
.rebuttal-crack-overlay.healing {
  animation: glassHeal 0.8s ease-out forwards;
}

.rebuttal-crack-overlay.healing .crack-pattern {
  animation: cracksHeal 0.6s ease-out forwards;
}

@keyframes glassHeal {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
  100% {
    opacity: 0;
  }
}

@keyframes cracksHeal {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    filter: blur(4px);
  }
}

/* Glass shatter animation on wrong */
.rebuttal-crack-overlay.shattering {
  animation: glassShatter 0.6s ease-out forwards;
}

@keyframes glassShatter {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 1;
    filter: brightness(1.5);
  }
  100% {
    opacity: 0;
    filter: brightness(2) blur(10px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOSS ENTRANCE - PORTRAIT UNVEIL
   Ornate frame descends, curtain pulls back to reveal boss art
   ═══════════════════════════════════════════════════════════════════════════ */

.boss-entrance-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  animation: fadeIn 0.3s ease;
}

.portrait-frame {
  position: relative;
  width: 300px;
  height: 400px;
  animation: frameDescend 0.8s ease-out forwards;
}

@keyframes frameDescend {
  0% {
    transform: translateY(-100vh) rotate(-5deg);
    opacity: 0;
  }
  60% {
    transform: translateY(20px) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
}

/* Ornate frame border */
.frame-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 16px solid;
  border-image: linear-gradient(135deg, #8b6914 0%, #c9a55c 25%, #f5e6c3 50%, #c9a55c 75%, #8b6914 100%) 1;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(201, 165, 92, 0.3);
  z-index: 2;
}

/* Frame corner decorations */
.frame-corner {
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 3;
}

.frame-corner::before {
  content: '❧';
  font-size: 2rem;
  color: #c9a55c;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.frame-corner.top-left { top: -8px; left: -8px; transform: rotate(-45deg); }
.frame-corner.top-right { top: -8px; right: -8px; transform: rotate(45deg); }
.frame-corner.bottom-left { bottom: -8px; left: -8px; transform: rotate(-135deg); }
.frame-corner.bottom-right { bottom: -8px; right: -8px; transform: rotate(135deg); }

/* Portrait canvas area */
.portrait-canvas {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: #1a1612;
  overflow: hidden;
}

/* Curtain reveal */
.portrait-curtain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #4a1c24 0%, #8b2035 50%, #4a1c24 100%);
  transform-origin: top center;
  animation: curtainReveal 1s ease-in-out 0.6s forwards;
  z-index: 1;
}

.portrait-curtain::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, #3d1520, transparent);
}

/* Curtain folds */
.portrait-curtain::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    rgba(0, 0, 0, 0.1) 20px,
    transparent 40px
  );
}

@keyframes curtainReveal {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

/* Boss portrait content */
.boss-portrait-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: portraitReveal 0.5s ease-out 1.2s forwards;
}

@keyframes portraitReveal {
  0% {
    opacity: 0;
    filter: sepia(1) brightness(0.5);
  }
  100% {
    opacity: 1;
    filter: sepia(0.2) brightness(1);
  }
}

.boss-portrait-sprite {
  font-size: 6rem;
  margin-bottom: 1rem;
  animation: bossBreath 2s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

@keyframes bossBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.boss-portrait-name {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: #c9a55c;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.boss-portrait-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.9rem;
  color: #a89f91;
  font-style: italic;
  margin-top: 0.25rem;
}

/* Name plate beneath frame */
.boss-name-plate {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #3d2914, #2a1f16);
  border: 2px solid #c9a55c;
  padding: 0.5rem 2rem;
  opacity: 0;
  animation: namePlateSlide 0.4s ease-out 1.6s forwards;
}

@keyframes namePlateSlide {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMBO COUNTER STYLE - BURNING TALLY
   Roman numerals that glow brighter and eventually catch fire
   ═══════════════════════════════════════════════════════════════════════════ */

.burning-tally {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: #c9a55c;
  position: relative;
}

.tally-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-dim);
}

.tally-numeral {
  font-weight: 700;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px rgba(201, 165, 92, 0.3);
}

/* Intensity levels */
.burning-tally[data-streak="1"],
.burning-tally[data-streak="2"] {
  color: #c9a55c;
}

.burning-tally[data-streak="3"],
.burning-tally[data-streak="4"] {
  color: #e8b84a;
  text-shadow: 0 0 10px rgba(232, 184, 74, 0.5);
}

.burning-tally[data-streak="5"],
.burning-tally[data-streak="6"],
.burning-tally[data-streak="7"] {
  color: #f5a623;
  text-shadow: 0 0 15px rgba(245, 166, 35, 0.6);
  animation: tallyGlow 0.5s ease-in-out infinite;
}

@keyframes tallyGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

/* On fire state */
.burning-tally[data-streak="8"],
.burning-tally[data-streak="9"],
.burning-tally.on-fire {
  color: #ff6b35;
  text-shadow:
    0 0 10px #ff6b35,
    0 0 20px #ff4500,
    0 0 30px #ff0000;
  animation: onFire 0.15s ease-in-out infinite;
}

@keyframes onFire {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-2px) rotate(1deg);
    filter: brightness(1.3);
  }
}

/* Fire particles */
.tally-flames {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 30px;
  pointer-events: none;
  overflow: visible;
}

.flame-particle {
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 12px;
  background: linear-gradient(to top, #ff4500, #ff6b35, #ffd700);
  border-radius: 50% 50% 20% 20%;
  animation: flameRise 0.5s ease-out infinite;
  opacity: 0;
}

.burning-tally.on-fire .flame-particle {
  opacity: 1;
}

.flame-particle:nth-child(1) { left: 20%; animation-delay: 0s; }
.flame-particle:nth-child(2) { left: 40%; animation-delay: 0.1s; }
.flame-particle:nth-child(3) { left: 60%; animation-delay: 0.2s; }
.flame-particle:nth-child(4) { left: 80%; animation-delay: 0.15s; }

@keyframes flameRise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) scale(0.3);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HP BAR DESIGN - VICTORIAN GAUGE
   Brass pressure gauge with needle and steam effects
   ═══════════════════════════════════════════════════════════════════════════ */

.victorian-gauge {
  position: relative;
  width: 120px;
  height: 70px;
  background: linear-gradient(to bottom, #3d2914 0%, #2a1f16 100%);
  border: 3px solid #8b6914;
  border-radius: 8px 8px 40px 40px;
  overflow: hidden;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Brass rim */
.gauge-rim {
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border: 2px solid #c9a55c;
  border-radius: 6px 6px 38px 38px;
  pointer-events: none;
}

/* Gauge face */
.gauge-face {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 50px;
  background: linear-gradient(to bottom, #f5efe6 0%, #d4c4a8 100%);
  border-radius: 0 0 50px 50px;
  overflow: hidden;
}

/* HP fill arc */
.gauge-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to right,
    #5a7c65 0%,
    #7aa37a 50%,
    #c9a55c 75%,
    #e47373 100%
  );
  transform-origin: bottom center;
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  transition: clip-path 0.4s ease-out;
}

/* Gauge markings */
.gauge-markings {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 9px,
    rgba(0, 0, 0, 0.2) 9px,
    rgba(0, 0, 0, 0.2) 10px
  );
}

/* Gauge needle */
.gauge-needle {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 4px;
  height: 45px;
  background: linear-gradient(to top, #2a1f16 0%, #8b4049 100%);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(-90deg);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 5;
  border-radius: 2px 2px 0 0;
}

/* Needle pivot */
.gauge-pivot {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #c9a55c 0%, #8b6914 100%);
  border-radius: 50%;
  z-index: 6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Steam vent */
.gauge-steam {
  position: absolute;
  top: 5px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5c4033;
  overflow: visible;
}

/* Steam particles (on low HP) */
.steam-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(200, 200, 200, 0.6);
  border-radius: 50%;
  animation: steamRise 1s ease-out infinite;
  opacity: 0;
}

.victorian-gauge.critical .steam-particle {
  opacity: 1;
}

@keyframes steamRise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-30px) scale(2);
    opacity: 0;
  }
}

.steam-particle:nth-child(1) { animation-delay: 0s; }
.steam-particle:nth-child(2) { animation-delay: 0.3s; }
.steam-particle:nth-child(3) { animation-delay: 0.6s; }

/* HP text */
.gauge-hp-text {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.75rem;
  color: #3d2914;
  font-weight: 700;
  z-index: 10;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REST SITE AMBIANCE - MOONLIT GARDEN
   Soft silver light, fireflies, gentle breeze through leaves
   ═══════════════════════════════════════════════════════════════════════════ */

.moonlit-garden {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom,
    #0d1821 0%,
    #1a2a38 30%,
    #1f3d4a 60%,
    #243a45 100%
  );
  overflow: hidden;
}

/* Moon glow */
.moon {
  position: absolute;
  top: 10%;
  right: 15%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle,
    #f5f5dc 0%,
    #e8e8c8 40%,
    rgba(232, 232, 200, 0.3) 70%,
    transparent 100%
  );
  border-radius: 50%;
  box-shadow:
    0 0 60px 30px rgba(245, 245, 220, 0.2),
    0 0 120px 60px rgba(245, 245, 220, 0.1);
  animation: moonGlow 4s ease-in-out infinite;
}

@keyframes moonGlow {
  0%, 100% {
    box-shadow:
      0 0 60px 30px rgba(245, 245, 220, 0.2),
      0 0 120px 60px rgba(245, 245, 220, 0.1);
  }
  50% {
    box-shadow:
      0 0 80px 40px rgba(245, 245, 220, 0.25),
      0 0 140px 70px rgba(245, 245, 220, 0.15);
  }
}

/* Garden silhouettes */
.garden-foliage {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, #0a1015 0%, transparent 100%);
}

/* Leaf silhouettes */
.garden-leaves {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200'%3E%3Cellipse cx='100' cy='180' rx='80' ry='120' fill='%230a1218'/%3E%3Cellipse cx='250' cy='190' rx='60' ry='100' fill='%230d161e'/%3E%3Cellipse cx='400' cy='175' rx='90' ry='130' fill='%230a1218'/%3E%3Cellipse cx='550' cy='185' rx='70' ry='110' fill='%230d161e'/%3E%3Cellipse cx='700' cy='180' rx='85' ry='125' fill='%230a1218'/%3E%3C/svg%3E");
  background-size: cover;
  animation: gentleBreeze 8s ease-in-out infinite;
}

@keyframes gentleBreeze {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}

/* Fireflies */
.firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #a8e6a0;
  border-radius: 50%;
  box-shadow: 0 0 10px 5px rgba(168, 230, 160, 0.6);
  animation: fireflyFloat 6s ease-in-out infinite;
  opacity: 0;
}

.firefly:nth-child(1) { top: 40%; left: 20%; animation-delay: 0s; }
.firefly:nth-child(2) { top: 55%; left: 35%; animation-delay: 1s; }
.firefly:nth-child(3) { top: 45%; left: 60%; animation-delay: 2s; }
.firefly:nth-child(4) { top: 60%; left: 75%; animation-delay: 0.5s; }
.firefly:nth-child(5) { top: 50%; left: 45%; animation-delay: 1.5s; }
.firefly:nth-child(6) { top: 35%; left: 80%; animation-delay: 3s; }

@keyframes fireflyFloat {
  0%, 100% {
    opacity: 0;
    transform: translate(0, 0);
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
    transform: translate(30px, -20px);
  }
  90% {
    opacity: 1;
  }
}

/* Rest content area */
.moonlit-garden .rest-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding-top: 15%;
}

.moonlit-garden .rest-icon {
  font-size: 4rem;
  filter: drop-shadow(0 0 20px rgba(168, 230, 160, 0.4));
}

.moonlit-garden .rest-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 2rem;
  color: #d4e5ed;
  text-shadow: 0 0 20px rgba(212, 229, 237, 0.3);
  margin-bottom: 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MYSTERY EVENT REVEAL - FOG PARTING
   Mysterious fog clears to reveal scene/choice
   ═══════════════════════════════════════════════════════════════════════════ */

.mystery-fog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center,
    rgba(26, 22, 18, 0.8) 0%,
    rgba(26, 22, 18, 0.95) 100%
  );
  z-index: 300;
  overflow: hidden;
}

/* Fog layers */
.fog-layer {
  position: absolute;
  top: 0;
  left: -50%;
  right: -50%;
  bottom: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(168, 159, 145, 0.2) 20%,
    rgba(168, 159, 145, 0.4) 50%,
    rgba(168, 159, 145, 0.2) 80%,
    transparent 100%
  );
  animation: fogDrift 20s linear infinite;
}

.fog-layer:nth-child(2) {
  animation-delay: -7s;
  opacity: 0.7;
}

.fog-layer:nth-child(3) {
  animation-delay: -14s;
  opacity: 0.5;
}

@keyframes fogDrift {
  0% { transform: translateX(-25%); }
  100% { transform: translateX(25%); }
}

/* Mystery icon pulsing in fog */
.mystery-icon-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.mystery-icon {
  font-size: 5rem;
  animation: mysteryPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(201, 165, 92, 0.5));
}

@keyframes mysteryPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 30px rgba(201, 165, 92, 0.5));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 50px rgba(201, 165, 92, 0.8));
  }
}

/* Fog parting animation */
.mystery-fog-overlay.revealing {
  animation: fogPartBackground 1.5s ease-out forwards;
}

.mystery-fog-overlay.revealing .fog-layer {
  animation: fogPart 1.5s ease-out forwards;
}

@keyframes fogPartBackground {
  0% {
    background: radial-gradient(ellipse at center,
      rgba(26, 22, 18, 0.8) 0%,
      rgba(26, 22, 18, 0.95) 100%
    );
  }
  100% {
    background: radial-gradient(ellipse at center,
      rgba(26, 22, 18, 0) 0%,
      rgba(26, 22, 18, 0.3) 100%
    );
  }
}

@keyframes fogPart {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.mystery-fog-overlay.revealing .fog-layer:nth-child(2) {
  animation-delay: 0.1s;
}

.mystery-fog-overlay.revealing .fog-layer:nth-child(3) {
  animation-delay: 0.2s;
}

/* Revealed content */
.mystery-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  z-index: 10;
}

.mystery-fog-overlay.revealing .mystery-content {
  animation: mysteryReveal 0.8s ease-out 0.8s forwards;
}

@keyframes mysteryReveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAP FOG OF WAR - FULL FOG
   Dense fog hides all unexplored nodes, only paths from current visible
   ═══════════════════════════════════════════════════════════════════════════ */

.map-fog-of-war {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 20;
}

/* Individual node fog */
.node-fog {
  fill: rgba(92, 64, 51, 0.9);
  transition: opacity 0.5s ease, fill 0.5s ease;
}

.node-fog.revealed {
  opacity: 0;
  pointer-events: none;
}

.node-fog.adjacent {
  fill: rgba(92, 64, 51, 0.5);
  animation: fogShimmer 3s ease-in-out infinite;
}

@keyframes fogShimmer {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.5; }
}

/* Path fog */
.path-fog {
  stroke: rgba(92, 64, 51, 0.8);
  stroke-width: 20;
  stroke-linecap: round;
  transition: opacity 0.5s ease;
}

.path-fog.revealed {
  opacity: 0;
}

/* Fog edge effect */
.fog-edge {
  filter: url(#fog-blur);
}

/* Map overlay fog gradient */
.map-fog-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at var(--player-x, 50%) var(--player-y, 80%),
    transparent 0%,
    transparent 15%,
    rgba(92, 64, 51, 0.3) 30%,
    rgba(92, 64, 51, 0.6) 50%,
    rgba(92, 64, 51, 0.8) 70%
  );
  pointer-events: none;
  transition: --player-x 0.5s, --player-y 0.5s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VICTORY FANFARE - BOOK CLOSING
   Story summary written out, book closes with satisfying thud
   ═══════════════════════════════════════════════════════════════════════════ */

.victory-book-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  perspective: 1000px;
}

.victory-book {
  position: relative;
  width: 500px;
  height: 650px;
  transform-style: preserve-3d;
}

/* Book cover (back) */
.book-cover-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3d2914 0%, #2a1f16 50%, #1a1612 100%);
  border-radius: 0 8px 8px 0;
  box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.5);
}

/* Book pages */
.book-pages {
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  top: 10px;
  left: 10px;
  background: linear-gradient(to right, #e8e0d5, #f5efe6);
  border-radius: 0 6px 6px 0;
  padding: 2rem;
  overflow: hidden;
}

/* Story content */
.victory-story {
  font-family: 'EB Garamond', Georgia, serif;
  color: #2a1f16;
  line-height: 1.8;
}

.victory-story .chapter-title {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
  color: #5c4033;
  border-bottom: 1px solid #c9a55c;
  padding-bottom: 0.5rem;
}

.victory-story .story-text {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  opacity: 0;
  animation: typewriterLine 0.5s ease forwards;
}

.victory-story .story-text:nth-child(2) { animation-delay: 0.5s; }
.victory-story .story-text:nth-child(3) { animation-delay: 1s; }
.victory-story .story-text:nth-child(4) { animation-delay: 1.5s; }
.victory-story .story-text:nth-child(5) { animation-delay: 2s; }
.victory-story .story-text:nth-child(6) { animation-delay: 2.5s; }

@keyframes typewriterLine {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stats summary */
.victory-stats {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #c9a55c;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  font-size: 0.95rem;
}

.victory-stat {
  display: flex;
  justify-content: space-between;
}

.victory-stat-label {
  color: #5c4033;
}

.victory-stat-value {
  font-weight: 700;
  color: #8b6914;
}

/* Book cover (front) - closes over pages */
.book-cover-front {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #5c4033 0%, #3d2914 50%, #2a1f16 100%);
  border-radius: 0 8px 8px 0;
  transform-origin: left center;
  transform: rotateY(-180deg);
  backface-visibility: hidden;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Cover decoration */
.book-cover-front::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  border: 2px solid #c9a55c;
  border-radius: 4px;
}

.cover-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.8rem;
  color: #c9a55c;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.cover-subtitle {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  color: #a89f91;
  margin-top: 0.5rem;
  font-style: italic;
}

.cover-emblem {
  font-size: 4rem;
  margin-bottom: 1rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Book closing animation */
.victory-book.closing .book-cover-front {
  animation: bookClose 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bookClose {
  0% {
    transform: rotateY(-180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

/* Thud effect */
.victory-book.closed {
  animation: bookThud 0.2s ease-out;
}

@keyframes bookThud {
  0% { transform: scale(1); }
  50% { transform: scale(1.02) translateY(-5px); }
  100% { transform: scale(1) translateY(0); }
}

/* Continue button */
.victory-continue {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
  animation-delay: 4s;
}

.victory-continue-btn {
  background: linear-gradient(135deg, #c9a55c 0%, #8b6914 100%);
  border: none;
  color: #1a1612;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.2rem;
  padding: 0.75rem 2rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.victory-continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(201, 165, 92, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   SIMPLE TEST PREP - Inline Q&A Mode
   Quick and dirty, all questions on page with instant feedback
   ═══════════════════════════════════════════════════════════════ */

.simple-testprep-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-deep);
  overflow-y: auto;
  z-index: 1000;
  padding: 0;
}

.simple-testprep-header {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--gold-soft);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  z-index: 10;
}

.simple-testprep-back {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'EB Garamond', Georgia, serif;
  transition: all 0.2s;
}

.simple-testprep-back:hover {
  background: var(--gold-soft);
}

.simple-testprep-header h1 {
  flex: 1;
  margin: 0;
  font-size: 1.5rem;
  color: var(--text-primary);
  font-family: 'EB Garamond', Georgia, serif;
}

.simple-testprep-score {
  background: var(--gold-soft);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  color: var(--gold);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.1rem;
}

.simple-testprep-questions {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.simple-tp-question {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--gold-ghost);
}

.simple-tp-q-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--gold);
  min-width: 2.5rem;
  font-family: 'EB Garamond', Georgia, serif;
}

.simple-tp-q-content {
  flex: 1;
}

.simple-tp-q-text {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.simple-tp-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.simple-tp-option {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-ghost);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
}

.simple-tp-option:hover:not(:disabled) {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--text-primary);
}

.simple-tp-option:disabled {
  cursor: default;
}

.simple-tp-option.correct {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4caf50;
  color: #81c784;
}

.simple-tp-option.wrong {
  background: rgba(244, 67, 54, 0.2);
  border-color: #f44336;
  color: #e57373;
}

.simple-tp-feedback {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 0.95rem;
}

.simple-tp-feedback.correct {
  background: rgba(76, 175, 80, 0.15);
  border-left: 3px solid #4caf50;
  color: #81c784;
}

.simple-tp-feedback.wrong {
  background: rgba(244, 67, 54, 0.15);
  border-left: 3px solid #f44336;
  color: #e57373;
}

.feedback-correct {
  font-weight: bold;
}

.feedback-wrong {
  font-weight: bold;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .simple-testprep-header {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
  }

  .simple-testprep-header h1 {
    font-size: 1.2rem;
    order: 1;
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
  }

  .simple-testprep-back {
    order: 0;
  }

  .simple-testprep-score {
    order: 2;
    margin-left: auto;
  }

  .simple-testprep-questions {
    padding: 1rem;
  }

  .simple-tp-question {
    padding: 1rem;
  }

  .simple-tp-q-number {
    font-size: 1.2rem;
    min-width: 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY IMPROVEMENTS
   Respects user preferences for reduced motion and provides better focus states
   ═══════════════════════════════════════════════════════════════════════════ */

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

  /* Keep essential feedback visible but instant */
  .option-btn.correct,
  .option-btn.incorrect,
  .blitz-option.correct,
  .blitz-option.incorrect {
    transition: none !important;
  }

  /* Disable shake effects */
  .shake,
  .shake-heavy,
  .screen-shake {
    animation: none !important;
    transform: none !important;
  }

  /* Disable floating/pulsing effects */
  .pulse,
  .float,
  .glow {
    animation: none !important;
  }
}

/* Better focus states for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

button:focus-visible,
.option-btn:focus-visible,
.nav-btn:focus-visible,
.mode-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--gold-soft);
}

/* Skip link for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--gold);
  color: var(--bg-deep);
  padding: 0.5rem 1rem;
  z-index: 10000;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
}

/* Ensure sufficient color contrast for critical elements */
.text-muted,
.text-dim {
  color: var(--text-secondary); /* Upgraded from --text-dim for better contrast */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border: rgba(168, 159, 145, 0.35);
    --text-dim: var(--text-secondary);
    --gold-soft: rgba(201, 165, 92, 0.3);
  }

  .option-btn {
    border-width: 2px;
  }

  .question-card {
    border-width: 2px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET BREAKPOINT (768px - 1024px)
   Optimized layout for medium-sized screens
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    max-width: 720px;
    padding: 1.5rem;
  }

  .landing-content {
    padding: 2rem;
  }

  /* Two-column option layout on tablet */
  .options-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  /* Wider stats bar */
  .stats-bar {
    padding: 0.75rem 1.5rem;
  }

  .character-bar {
    gap: 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LARGE DESKTOP BREAKPOINT (1200px+)
   Comfortable reading width with more whitespace
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {
  .container {
    max-width: 960px;
  }

  .landing-content {
    padding: 3rem;
  }

  .question-card {
    padding: 2.5rem;
  }

  /* Larger text for comfortable reading at distance */
  .question-text {
    font-size: 1.5rem;
  }

  .option-btn {
    padding: 1.25rem 1.5rem;
    font-size: 1.1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADAPTIVE SCAFFOLDING UI (Phase 1 - Opportunity 3)
   Supports variable scaffold depth with insight detection
   ═══════════════════════════════════════════════════════════════════════════ */

/* Adaptive progress indicator */
.scaffold-progress.adaptive {
  margin-top: 1.5rem;
  text-align: center;
}

.scaffold-progress.adaptive .progress-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.scaffold-progress .dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.scaffold-progress .dot.completed {
  background: var(--correct);
  color: var(--parchment);
}

.scaffold-progress .dot.active {
  background: var(--gold);
  color: var(--bg-deep);
  box-shadow: 0 0 12px var(--glow-warm);
  animation: scaffold-pulse 2s infinite;
}

.scaffold-progress .dot.upcoming {
  background: var(--bg-card);
  border: 2px solid var(--border);
  color: var(--text-dim);
}

.scaffold-progress .dot-range {
  padding: 0.25rem 0.75rem;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-size: 0.7rem;
  color: var(--text-dim);
  font-style: italic;
}

.scaffold-progress .progress-hint {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
}

@keyframes scaffold-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--glow-warm); }
  50% { box-shadow: 0 0 20px var(--glow-warm); }
}

/* Soft exit button */
.scaffold-soft-exit-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  margin-left: 1rem;
  transition: all 0.2s ease;
}

.scaffold-soft-exit-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Scaffold complete card variants */
.scaffold-complete-card.insight-achieved {
  border-color: var(--correct);
  box-shadow: 0 0 30px rgba(var(--correct-rgb), 0.3);
}

.scaffold-complete-card.insight-achieved .complete-icon {
  animation: insight-glow 1.5s infinite;
}

@keyframes insight-glow {
  0%, 100% { text-shadow: 0 0 10px var(--glow-warm); }
  50% { text-shadow: 0 0 30px var(--glow-warm), 0 0 60px var(--gold); }
}

.scaffold-complete-card.maximum-reached {
  border-color: var(--blue-muted);
}

.scaffold-complete-card.soft-exit {
  border-color: var(--text-dim);
  opacity: 0.95;
}

/* Confidence bar for insight */
.insight-confidence {
  margin: 1rem 0;
  background: var(--bg-deep);
  border-radius: 8px;
  padding: 0.5rem;
  position: relative;
}

.insight-confidence .confidence-bar {
  height: 6px;
  background: linear-gradient(90deg, var(--gold), var(--correct));
  border-radius: 3px;
  transition: width 0.5s ease;
}

.insight-confidence .confidence-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--gold);
  text-align: center;
}

/* Complete metrics */
.complete-metrics {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.5rem 0;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.complete-metrics .metric {
  background: var(--bg-deep);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Ms. Luminara voice in completion */
.complete-message.luminara-voice {
  font-style: italic;
}

.complete-message .speaker {
  font-weight: 600;
  color: var(--gold);
  font-style: normal;
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEARNING ANALYTICS DASHBOARD (Opportunity 7)
   Teaching effectiveness metrics panel
   ═══════════════════════════════════════════════════════════════════════════ */

.analytics-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
}

.analytics-panel h3 {
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.analytics-card {
  background: var(--bg-deep);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}

.analytics-card .value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}

.analytics-card .label {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

.analytics-card.highlight {
  border: 1px solid var(--gold);
}

.analytics-card.highlight .value {
  color: var(--gold);
}

/* Conceptual shift celebration */
.conceptual-shift-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 2px solid var(--correct);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  animation: toast-slide-up 0.4s ease-out;
  max-width: 90%;
  width: 400px;
}

.conceptual-shift-toast .toast-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.conceptual-shift-toast .toast-icon {
  font-size: 1.25rem;
}

.conceptual-shift-toast .toast-title {
  font-weight: 600;
  color: var(--correct);
}

.conceptual-shift-toast .toast-message {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-style: italic;
}

@keyframes toast-slide-up {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Review queue indicators */
.review-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
}

.review-badge.due {
  background: var(--gold);
  color: var(--bg-deep);
}

.review-badge.overdue {
  background: var(--incorrect);
  color: var(--parchment);
  animation: overdue-pulse 1.5s infinite;
}

.review-badge.scheduled {
  background: var(--bg-deep);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

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

/* Difficulty histogram */
.difficulty-histogram {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
  padding: 0.5rem 0;
}

.histogram-bar {
  flex: 1;
  background: var(--gold);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
  position: relative;
  transition: height 0.3s ease;
}

.histogram-bar:hover::after {
  content: attr(data-count);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  white-space: nowrap;
}

.histogram-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
}

/* Spaced repetition calendar hint */
.review-calendar-hint {
  background: var(--bg-deep);
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.review-calendar-hint .icon {
  font-size: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LEARNING ANALYTICS DASHBOARD (Opportunity 7 of 510.108)
   Research-based learning insights visualization
   ═══════════════════════════════════════════════════════════════════════════════ */

.analytics-dashboard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 22, 18, 0.95);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1010;
  animation: fadeIn 0.3s ease;
  overflow-y: auto;
  padding: 2rem 1rem;
}

.analytics-dashboard-panel {
  background: var(--bg-card);
  border: 2px solid var(--border-warm);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 800px;
  width: 100%;
  position: relative;
  box-shadow: 0 0 60px rgba(201, 165, 92, 0.15);
}

.analytics-dashboard-panel .close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.2s;
  z-index: 10;
}

.analytics-dashboard-panel .close-btn:hover {
  color: var(--text-primary);
}

.analytics-header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.analytics-header h2 {
  font-size: 1.5rem;
  color: var(--gold);
  margin: 0;
}

.analytics-subtitle {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
  font-style: italic;
}

/* Summary Stats Grid */
.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.analytics-stat-card {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

.analytics-stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.analytics-stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}

/* Analytics Section */
.analytics-section {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.analytics-section .section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.analytics-section .section-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.section-badge {
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-badge.research {
  background: rgba(52, 211, 153, 0.2);
  color: var(--correct);
}

.section-description {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  font-style: italic;
}

/* Conceptual Shifts List */
.conceptual-shifts-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.shift-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-card);
  border-radius: 6px;
  font-size: 0.85rem;
}

.shift-item.positive {
  border-left: 3px solid var(--correct);
}

.shift-item.neutral {
  border-left: 3px solid var(--gold);
}

.shift-icon {
  font-size: 1rem;
}

.shift-type {
  flex: 1;
  color: var(--text-secondary);
  text-transform: capitalize;
}

.shift-question {
  color: var(--text-dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
}

/* Review Queue List */
.review-queue-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.review-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-card);
  border-radius: 6px;
  font-size: 0.85rem;
}

.review-priority-badge {
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
}

.review-priority-badge.critical {
  background: var(--incorrect);
  color: var(--parchment);
}

.review-priority-badge.high {
  background: rgba(239, 68, 68, 0.3);
  color: var(--incorrect);
}

.review-priority-badge.medium {
  background: var(--gold);
  color: var(--bg-deep);
}

.review-priority-badge.low {
  background: var(--bg-deep);
  color: var(--text-dim);
}

.review-question {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.review-due {
  flex: 1;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.review-streak {
  color: var(--gold);
  font-size: 0.75rem;
}

/* Analytics Difficulty Histogram */
.analytics-section .difficulty-histogram {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 80px;
  padding: 0.5rem;
  background: var(--bg-card);
  border-radius: 8px;
  gap: 4px;
}

.analytics-section .histogram-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
}

.histogram-bar .bar-fill {
  width: 100%;
  background: linear-gradient(to top, var(--gold), rgba(201, 165, 92, 0.6));
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
}

.histogram-bar .bar-label {
  font-size: 0.6rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
  text-align: center;
}

.histogram-bar .bar-count {
  font-size: 0.65rem;
  color: var(--gold);
  font-weight: 600;
  margin-top: 2px;
}

/* Mastered Concepts List */
.mastered-concepts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mastered-badge {
  background: rgba(52, 211, 153, 0.15);
  color: var(--correct);
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* No Data State */
.analytics-section .no-data {
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}

/* Export Section */
.analytics-export-section {
  margin-top: 1.5rem;
  text-align: center;
}

.export-btn {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.export-btn:hover {
  background: var(--bg-card);
  border-color: var(--gold);
  color: var(--gold);
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .analytics-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics-stat-card .stat-value {
    font-size: 1.5rem;
  }

  .analytics-dashboard-panel {
    padding: 1rem;
  }

  .analytics-header h2 {
    font-size: 1.25rem;
  }

  .review-item {
    flex-wrap: wrap;
  }

  .review-due {
    flex: none;
    width: 100%;
    margin-top: 0.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURED QUIZ BUTTON
   CSP-compliant hover effects (no inline handlers)
   ═══════════════════════════════════════════════════════════════ */

.featured-quiz-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #38bdf8, #a78bfa);
  border: none;
  border-radius: 12px;
  color: white;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
  transform: translateY(0);
}

.featured-quiz-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.4);
}

.featured-quiz-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}