/* 🐨 Billy's School - Design System & Styling 🐨 */

/* ==========================================================================
   1. DESIGN TOKENS & SYSTEM ROOT
   ========================================================================== */
:root {
  /* Playful, Harmonious Pastel HSL Color Palette (Billy's School Theme) */
  --color-bg-primary: hsl(210, 60%, 98%);      /* Crisp ice-blue canvas */
  --color-bg-secondary: hsl(145, 30%, 96%);    /* Soft eucalyptus sage */
  
  --color-brand-primary: hsl(215, 80%, 25%);   /* Deep Sea Navy (Trust & Academic Authority) */
  --color-brand-secondary: hsl(155, 65%, 40%); /* Eucalyptus Green (Friendly & Encouraging) */
  --color-brand-accent: hsl(12, 85%, 60%);     /* Coral Sunset (Highlights & Triggers) */
  --color-brand-amber: hsl(42, 95%, 52%);      /* Honey Gold (Achievements, Stars & Keys) */
  
  /* System Feedback Colors */
  --color-success: hsl(145, 63%, 42%);
  --color-success-bg: hsl(145, 60%, 95%);
  --color-error: hsl(355, 75%, 58%);
  --color-error-bg: hsl(355, 65%, 96%);
  
  /* Text and Surfaces */
  --color-text-title: hsl(215, 80%, 15%);      /* Darker navy for optimal legibility */
  --color-text-body: hsl(215, 25%, 32%);       /* Slate body text */
  --color-card-surface: hsla(0, 0%, 100%, 0.88%); /* Premium slightly heavier glass backing */
  --color-border: hsla(215, 30%, 80%, 0.4);
  
  /* Layout Spacers & Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  
  --shadow-soft: 0 10px 30px -10px hsla(215, 45%, 20%, 0.1);
  --shadow-medium: 0 20px 40px -15px hsla(215, 50%, 20%, 0.15);
  --shadow-glow: 0 0 25px hsla(155, 65%, 40%, 0.25);
  
  /* Fonts */
  --font-display: 'Fredoka', cursive, system-ui;
  --font-interactive: 'Comfortaa', cursive, system-ui;
  --font-body: 'Outfit', sans-serif, system-ui;
}

/* ==========================================================================
   2. RESET & BASE LAYOUT
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-body);
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Confetti overlay canvas covers the whole viewport */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
}

/* Responsive grid layout centering the active quiz app */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* ==========================================================================
   3. HEADER BAR
   ========================================================================== */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 1.5rem;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-emoji {
  font-size: 3rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
  animation: bounceSlow 3s infinite ease-in-out;
}

.logo-text h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--color-text-title);
  line-height: 1.1;
  background: linear-gradient(45deg, var(--color-brand-primary), var(--color-brand-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-text p {
  font-size: 0.95rem;
  color: var(--color-text-body);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-interactive);
}

.header-stats {
  display: flex;
  gap: 0.75rem;
}

.stat-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-card-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  font-family: var(--font-interactive);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-title);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

.mode-badge {
  border-color: var(--color-brand-secondary);
  background: hsla(168, 75%, 42%, 0.05);
}

/* ==========================================================================
   4. COMPONENT STYLING (CARDS & BUTTONS)
   ========================================================================== */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Card glassmorphism style */
.card {
  background: var(--color-card-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Standard Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-xl);
  font-family: var(--font-interactive);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(45deg, var(--color-brand-primary), var(--color-brand-secondary));
  color: white;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px hsla(168, 75%, 42%, 0.4);
}

.btn-secondary {
  background: hsla(200, 20%, 90%, 0.6);
  border: 1px solid var(--color-border);
  color: var(--color-text-title);
}

.btn-secondary:hover {
  background: hsla(200, 20%, 85%, 0.8);
  transform: translateY(-2px);
}

.btn-accent {
  background: var(--color-brand-accent);
  color: white;
  box-shadow: 0 6px 15px hsla(12, 85%, 62%, 0.3);
}

.btn-accent:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px hsla(12, 85%, 62%, 0.5);
}

.btn-exit {
  background: hsla(200, 10%, 93%, 0.12);
  border: 1px solid var(--color-border);
  color: var(--color-text-body);
}

.btn-exit:hover {
  background: hsla(355, 85%, 60%, 0.1);
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
  transform: translateY(-2px);
}

.btn-large {
  padding: 1.1rem 2.5rem;
  font-size: 1.1rem;
}

/* ==========================================================================
   5. SCREEN 1: SETUP SCREEN
   ========================================================================== */
.welcome-card {
  text-align: center;
  position: relative;
}

/* Resume Journey Card Styles */
.resume-journey-card {
  text-align: center;
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  border: 2px solid var(--color-brand-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  animation: slideDown 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.resume-tagline {
  color: var(--color-text-body);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.resume-tagline .highlight-name {
  font-weight: 700;
  color: var(--color-brand-primary);
  background: var(--color-bg-primary);
  padding: 0.1rem 0.6rem;
  border-radius: 8px;
}

.resume-details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--color-border);
}

.resume-avatar-badge {
  font-size: 3.5rem;
  width: 80px;
  height: 80px;
  background: var(--color-card-surface);
  border: 2px solid var(--color-brand-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  animation: activeWiggle 2s infinite ease-in-out alternate;
}

.resume-info-box {
  text-align: left;
}

.resume-info-box h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-text-title);
  margin-bottom: 0.25rem;
}

.resume-info-box p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-body);
  margin-bottom: 0.5rem;
}

.resume-stat-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.resume-stat-badge {
  font-family: var(--font-interactive);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.badge-spot {
  background: hsl(38, 95%, 90%);
  color: hsl(38, 85%, 35%);
  border: 1px solid hsl(38, 70%, 80%);
}

.badge-answered {
  background: hsl(170, 75%, 90%);
  color: hsl(170, 85%, 30%);
  border: 1px solid hsl(170, 60%, 80%);
}

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

.resume-btn {
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  box-shadow: 0 4px 15px hsla(170, 75%, 45%, 0.3);
}

.start-fresh-btn {
  padding: 0.8rem 1.5rem;
  font-size: 1.05rem;
}

.sparkles-container {
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
  animation: pulseSlow 2s infinite ease-in-out;
}

.welcome-card h2 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--color-text-title);
  margin-bottom: 0.5rem;
}

.welcome-tagline {
  color: var(--color-text-body);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* Form Styling */
.input-group {
  text-align: left;
  max-width: 450px;
  margin: 0 auto 2rem auto;
}

.input-group label {
  display: block;
  font-family: var(--font-interactive);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-title);
  margin-bottom: 0.6rem;
}

.input-group input {
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text-title);
  background: white;
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.input-group input:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 4px hsla(192, 85%, 45%, 0.15);
}

/* Avatar Option Grid */
.section-label {
  font-family: var(--font-interactive);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text-title);
  margin-bottom: 1rem;
  text-align: left;
}

.avatar-selection-area {
  max-width: 650px;
  margin: 0 auto 2.5rem auto;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
}

.avatar-option {
  background: white;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.avatar-emoji {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  transition: transform 0.2s ease;
}

.avatar-name {
  font-family: var(--font-interactive);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-title);
  margin-bottom: 0.2rem;
}

.avatar-trait {
  font-size: 0.7rem;
  color: var(--color-text-body);
  font-weight: 500;
  text-transform: uppercase;
}

.avatar-option:hover {
  transform: translateY(-4px);
  border-color: var(--color-brand-primary);
}

.avatar-option:hover .avatar-emoji {
  transform: scale(1.15) rotate(5deg);
}

.avatar-option.selected {
  border-color: var(--color-brand-secondary);
  background: hsla(168, 75%, 42%, 0.05);
  box-shadow: var(--shadow-glow);
}

/* Game Mode Selection Cards */
.mode-selection-area {
  max-width: 650px;
  margin: 0 auto 2.5rem auto;
}

.mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 550px) {
  .mode-cards {
    grid-template-columns: 1fr;
  }
}

.mode-card {
  background: white;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

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

.mode-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-text-title);
}

.mode-card p {
  font-size: 0.85rem;
  color: var(--color-text-body);
  line-height: 1.4;
}

.mode-card:hover {
  border-color: var(--color-brand-primary);
}

.mode-card.selected {
  border-color: var(--color-brand-amber);
  background: hsla(38, 92%, 52%, 0.04);
}

/* Start Button placement */
.start-btn {
  margin-top: 1rem;
  width: 100%;
  max-width: 350px;
}

/* ==========================================================================
   6. SCREEN 2: ACTIVE QUIZ SCREEN
   ========================================================================== */

/* Section Title Board */
.section-indicator {
  margin-bottom: 1rem;
  padding: 1.2rem 2rem;
  border-bottom: 4px solid var(--color-brand-primary);
}

.indicator-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
}

.section-badge {
  background: var(--color-brand-primary);
  color: white;
  font-family: var(--font-interactive);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-xl);
  text-transform: uppercase;
}

.section-indicator h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-text-title);
}

.section-desc {
  font-size: 0.9rem;
  color: var(--color-text-body);
  margin-bottom: 0.8rem;
}

/* Overall Progress Indicator Bar */
.global-progress {
  margin-top: 0.5rem;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-body);
  margin-bottom: 0.3rem;
}

/* Gamified Progress Bar additions */
.adventure-track-container {
  position: relative;
  margin: 1.5rem 0 2.5rem 0;
  padding: 1.8rem 1.5rem 2.8rem 1.5rem;
  overflow: visible;
}

.progress-track {
  height: 12px;
  background: hsla(196, 30%, 80%, 0.18);
  border: 1px solid hsla(196, 30%, 80%, 0.15);
  border-radius: 8px;
  position: relative;
  overflow: visible;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-secondary));
  border-radius: 8px;
  width: 0%;
  position: relative;
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 10px var(--color-brand-primary);
}

/* Avatar Rider pin */
.progress-avatar-pin {
  position: absolute;
  right: -16px;
  top: -24px;
  font-size: 1.8rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35));
  animation: avatarBounce 2s infinite ease-in-out;
  pointer-events: none;
}

@keyframes avatarBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.1);
  }
}

/* Checkpoints container */
.progress-checkpoints {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Checkpoint Node */
.progress-checkpoint-node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-card-surface);
  border: 2.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: var(--shadow-soft);
  pointer-events: auto; /* Allow hover tooltips */
}

.checkpoint-icon {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.checkpoint-label {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-text-body);
  opacity: 0.85;
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
}

/* Dark mode tweaks for checkpoint labels */
body.theme-midnight .checkpoint-label,
body.theme-space .checkpoint-label {
  background: rgba(255, 255, 255, 0.08);
}

/* Upcoming state */
.progress-checkpoint-node.upcoming {
  filter: grayscale(80%) opacity(0.5);
}

/* Active State */
.progress-checkpoint-node.active {
  border-color: var(--color-brand-accent);
  background: var(--color-card-surface);
  box-shadow: 0 0 15px var(--color-brand-accent), var(--shadow-glow);
  transform: translate(-50%, -50%) scale(1.25);
  animation: pulseActiveNode 1.5s infinite ease-in-out;
  z-index: 6;
}

.progress-checkpoint-node.active .checkpoint-icon {
  animation: activeWiggle 1s infinite alternate;
}

.progress-checkpoint-node.active .checkpoint-label {
  opacity: 1;
  color: var(--color-brand-accent);
  font-weight: 800;
  transform: translateX(-50%) scale(1.1);
  border-color: var(--color-brand-accent);
}

/* Completed State */
.progress-checkpoint-node.completed {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  box-shadow: 0 0 10px var(--color-success);
  transform: translate(-50%, -50%) scale(1.1);
}

.progress-checkpoint-node.completed .checkpoint-label {
  color: var(--color-success);
}

@keyframes pulseActiveNode {
  0%, 100% {
    box-shadow: 0 0 8px var(--color-brand-accent), 0 0 2px var(--color-brand-accent);
  }
  50% {
    box-shadow: 0 0 18px var(--color-brand-accent), 0 0 6px var(--color-brand-accent);
  }
}

@keyframes activeWiggle {
  0% { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}

/* ==========================================================================
   7. INTERACTIVE CONTEXT CONTAINERS (BLURB, MAP, ETC.)
   ========================================================================== */
.special-context-container {
  margin-bottom: 1rem;
  animation: slideDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

/* Scroll Book Cover Blurb */
.parchment-scroll {
  background: linear-gradient(to right, hsl(38, 50%, 93%) 0%, hsl(38, 45%, 97%) 6%, hsl(38, 45%, 97%) 94%, hsl(38, 50%, 93%) 100%);
  border: 1px solid hsl(38, 30%, 80%);
  border-top: 5px solid hsl(38, 40%, 65%);
  border-bottom: 5px solid hsl(38, 40%, 65%);
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: inset 0 0 15px rgba(139, 100, 35, 0.08), var(--shadow-soft);
  max-width: 600px;
  margin: 0 auto;
  font-family: var(--font-body);
}

.blurb-title-banner {
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-align: center;
  color: hsl(38, 60%, 25%);
  border-bottom: 1px dashed hsl(38, 30%, 80%);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.parchment-scroll p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: hsl(38, 50%, 20%);
  margin-bottom: 0.8rem;
  text-align: justify;
}

.parchment-scroll p:last-child {
  margin-bottom: 0;
}

/* CSS Coordinates Interactive Map Chart */
.interactive-map-board {
  max-width: 600px;
  margin: 0 auto;
  background: hsl(38, 35%, 90%);
  border: 6px solid hsl(38, 30%, 55%);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  box-shadow: var(--shadow-medium);
  position: relative;
}

.map-grid-container {
  aspect-ratio: 4 / 3;
  width: 100%;
  border: 2px solid hsl(38, 25%, 45%);
  background: url('map_bg.png') no-repeat center, radial-gradient(circle at center, hsl(35, 60%, 80%) 0%, hsl(32, 50%, 62%) 50%, hsl(28, 45%, 45%) 100%);
  background-size: cover;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Coordinate Node Pins */
.map-node {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}

.node-pin {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--color-brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.node-label {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  font-family: var(--font-interactive);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.25rem;
  white-space: nowrap;
  opacity: 0.9;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.map-node:hover .node-pin {
  transform: scale(1.25) rotate(5deg);
  border-color: var(--color-brand-accent);
}

/* Pulsing coordinate indicator */
.node-pulse {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: hsla(192, 85%, 45%, 0.25);
  z-index: -1;
  animation: radarPulse 1.8s infinite ease-out;
}

/* Specialized nodes styling */
.node-treasure .node-pin {
  border-color: var(--color-brand-amber);
}
.node-treasure .node-pulse {
  background: hsla(38, 92%, 52%, 0.25);
}

/* Path connection lines on Map */
.map-path {
  position: absolute;
  height: 2px;
  background-image: linear-gradient(90deg, transparent 50%, hsla(38, 40%, 40%, 0.4) 50%);
  background-size: 10px 100%;
  transform-origin: 0 0;
  z-index: 5;
}

/* Navigation Kit Header Bar */
.map-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: hsla(38, 30%, 82%, 0.5);
  border: 1.5px solid hsl(38, 25%, 68%);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.8rem;
  margin-bottom: 0.75rem;
  backdrop-filter: blur(4px);
}

/* Theme adaptation for map header bar */
body.theme-midnight .map-header-bar {
  background: hsla(245, 45%, 15%, 0.6);
  border-color: hsl(260, 30%, 45%);
}
body.theme-island .map-header-bar {
  background: hsla(45, 55%, 92%, 0.6);
  border-color: hsl(38, 50%, 70%);
}
body.theme-castle .map-header-bar {
  background: hsla(290, 45%, 12%, 0.6);
  border-color: hsl(275, 45%, 45%);
}
body.theme-space .map-header-bar {
  background: hsla(250, 45%, 12%, 0.6);
  border-color: hsl(265, 45%, 40%);
}

.map-header-title {
  display: flex;
  flex-direction: column;
}

.map-title-label {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-brand-primary);
  letter-spacing: 0.02em;
}

body.theme-midnight .map-title-label { color: hsl(260, 80%, 95%); }
body.theme-island .map-title-label { color: hsl(195, 90%, 42%); }
body.theme-castle .map-title-label { color: hsl(275, 85%, 65%); }
body.theme-space .map-title-label { color: hsl(190, 100%, 50%); }

.map-title-sub {
  font-family: var(--font-interactive);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-body);
  opacity: 0.85;
}

body.theme-midnight .map-title-sub,
body.theme-castle .map-title-sub,
body.theme-space .map-title-sub {
  color: hsl(210, 20%, 80%);
}

/* Compass rose graphic overlay */
.map-compass {
  position: relative; /* Changed from absolute to relative to place in header! */
  width: 68px; /* Slightly more compact in header */
  height: 68px;
  background: white;
  border: 1.5px solid hsl(38, 30%, 75%);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: hsl(38, 50%, 25%);
  font-family: var(--font-interactive);
  z-index: 10;
  flex-shrink: 0;
}

.compass-dial {
  position: relative;
  width: 100%;
  height: 100%;
}

.dial-label {
  position: absolute;
  transform: translate(-50%, -50%);
}
.dial-n { top: 12%; left: 50%; }
.dial-s { top: 88%; left: 50%; }
.dial-w { left: 14%; top: 50%; }
.dial-e { left: 86%; top: 50%; }
.dial-nw { left: 24%; top: 24%; font-size: 0.5rem; opacity: 0.8; font-weight: 600; }
.dial-ne { left: 76%; top: 24%; font-size: 0.5rem; opacity: 0.8; font-weight: 600; }
.dial-sw { left: 24%; top: 76%; font-size: 0.5rem; opacity: 0.8; font-weight: 600; }
.dial-se { left: 76%; top: 76%; font-size: 0.5rem; opacity: 0.8; font-weight: 600; }

.compass-arrow {
  position: absolute;
  width: 4px;
  height: 34px; /* Shrunk slightly to fit 68px dial */
  background: linear-gradient(to bottom, var(--color-brand-accent) 50%, var(--color-brand-primary) 50%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
}

/* ==========================================================================
   8. ACTIVE QUESTION SLIDE CARD
   ========================================================================== */
.question-container {
  perspective: 1000px;
}

.question-card {
  margin-bottom: 1.5rem;
  border-top: 4px solid var(--color-brand-secondary);
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px dashed var(--color-border);
  padding-bottom: 0.6rem;
}

.question-skill {
  font-family: var(--font-interactive);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-brand-secondary);
  background: hsla(168, 75%, 42%, 0.08);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-xl);
}

.question-number {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-text-title);
  background: hsla(196, 30%, 80%, 0.15);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.question-card h3 {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-text-title);
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
}

/* Multiple Choice Option Buttons */
.options-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.option-btn {
  background: white;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.4rem;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-title);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  line-height: 1.4;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.option-marker {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-text-title);
  font-family: var(--font-interactive);
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.2s ease;
}

.option-btn:hover {
  transform: translateX(4px);
  border-color: var(--color-brand-primary);
  background: hsla(192, 85%, 45%, 0.02);
}

.option-btn:hover .option-marker {
  border-color: var(--color-brand-primary);
  transform: scale(1.1);
}

/* Active Selected Option State */
.option-btn.selected {
  border-color: var(--color-brand-primary);
  background: hsla(192, 85%, 45%, 0.06);
  box-shadow: 0 4px 12px rgba(18, 116, 223, 0.1);
}

.option-btn.selected .option-marker {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: white;
}

/* Checked States (Practice Mode) */
.option-btn.correct-choice {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  animation: pulseSuccess 0.5s ease;
}

.option-btn.correct-choice .option-marker {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

.option-btn.incorrect-choice {
  border-color: var(--color-error);
  background: var(--color-error-bg);
  animation: shakeCard 0.4s ease;
}

.option-btn.incorrect-choice .option-marker {
  background: var(--color-error);
  border-color: var(--color-error);
  color: white;
}

/* Disabled option states after checking */
.option-btn.faded-out {
  opacity: 0.55;
  filter: grayscale(20%);
  pointer-events: none;
}

/* Action Controls Panel */
.card-actions {
  display: flex;
  justify-content: space-between;
  border-top: 1px dashed var(--color-border);
  padding-top: 1.2rem;
  margin-top: 1rem;
}

/* ==========================================================================
   9. INTERACTIVE MASCOT EXPLANATION FEEDBACK PANEL
   ========================================================================== */
.explanation-panel {
  display: flex;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: var(--radius-md);
  background: hsla(168, 75%, 42%, 0.06);
  border: 1px dashed var(--color-brand-secondary);
  margin-bottom: 1.5rem;
  animation: slideUp 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.explanation-panel.incorrect-explanation {
  background: hsla(12, 85%, 62%, 0.06);
  border-color: var(--color-brand-accent);
}

.explanation-mascot {
  flex-shrink: 0;
}

.mascot-emoji {
  font-size: 2.5rem;
  display: inline-block;
  animation: bounceSlow 2s infinite ease-in-out;
}

.explanation-bubble {
  flex: 1;
}

.explanation-bubble h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-text-title);
  margin-bottom: 0.25rem;
}

.explanation-bubble p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-body);
}

/* ==========================================================================
   10. SCREEN 3: RESULT SCOREBOARD & CERTIFICATE
   ========================================================================== */
.result-card {
  text-align: center;
  border-top: 5px solid var(--color-brand-amber);
}

.crown-container {
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
  animation: bounceSlow 2.5s infinite ease-in-out;
}

.congrats-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--color-text-title);
  margin-bottom: 0.5rem;
}

.congrats-text {
  font-size: 1.05rem;
  color: var(--color-text-body);
  max-width: 500px;
  margin: 0 auto 2rem auto;
}

.highlight-name {
  font-weight: 700;
  color: var(--color-brand-primary);
}

/* SVG Circular Score Ring */
.score-circle-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 2rem auto;
}

.score-ring {
  transform: rotate(-90deg);
}

.score-ring-bg {
  stroke: hsla(196, 30%, 80%, 0.15);
}

.score-ring-fill {
  stroke-dasharray: 534; /* Circumference for r=85 (2 * PI * 85) */
  stroke-dashoffset: 534;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.score-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
}

.score-number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-text-title);
  line-height: 1;
}

.score-label {
  font-family: var(--font-interactive);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-body);
  letter-spacing: 0.05rem;
  margin-top: 0.25rem;
}

/* Medal Badge */
.medal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: hsla(38, 92%, 52%, 0.08);
  border: 1px solid var(--color-brand-amber);
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-xl);
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 10px hsla(38, 92%, 52%, 0.1);
}

.medal-emoji {
  font-size: 1.5rem;
  animation: pulseSlow 1.5s infinite;
}

.medal-text {
  font-family: var(--font-interactive);
  font-weight: 700;
  font-size: 0.9rem;
  color: hsl(38, 70%, 30%);
}

/* Skills Report Card */
.performance-report {
  text-align: left;
  border-top: 1px dashed var(--color-border);
  padding-top: 2rem;
  margin-bottom: 2rem;
}

.performance-report h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-text-title);
  margin-bottom: 0.4rem;
}

.breakdown-subtitle {
  font-size: 0.88rem;
  color: var(--color-text-body);
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

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

.skill-row {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: var(--shadow-soft);
}

.skill-icon-area {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.skill-icon-mastered {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid hsla(145, 63%, 42%, 0.2);
}

.skill-icon-review {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid hsla(355, 75%, 58%, 0.15);
}

.skill-info {
  flex: 1;
}

.skill-name {
  font-family: var(--font-interactive);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-title);
  margin-bottom: 0.15rem;
}

.skill-status {
  font-size: 0.75rem;
  font-weight: 600;
}

.status-mastered {
  color: var(--color-success);
}

.status-review {
  color: var(--color-brand-accent);
}

/* Restart alignment */
.action-buttons {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   11. FOOTER AREA
   ========================================================================== */
.app-footer {
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.8rem;
  color: var(--color-text-body);
}

/* ==========================================================================
   12. ANIMATIONS LIBRARY
   ========================================================================== */

/* Slide element down */
@keyframes slideDown {
  0% { transform: translateY(-15px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Slide element up */
@keyframes slideUp {
  0% { transform: translateY(15px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Slow, soft breathing bounce */
@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Scale pulse */
@keyframes pulseSlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Checked Success Animation */
@keyframes pulseSuccess {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  70% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* Checked Incorrect Shake Animation */
@keyframes shakeCard {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Map coordinate radar ring pulse */
@keyframes radarPulse {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ==========================================================================
   13. DETAILED QUESTIONS REVIEW PANEL
   ========================================================================== */
.review-section {
  text-align: left;
  border-top: 2px dashed var(--color-border);
  padding-top: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.review-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-text-title);
  margin-bottom: 0.4rem;
}

.review-subtitle {
  font-size: 0.95rem;
  color: var(--color-text-body);
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

.review-filters {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-xl);
  font-family: var(--font-interactive);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid var(--color-border);
  background: white;
  color: var(--color-text-title);
  transition: all 0.2s ease;
}

.filter-btn:hover {
  border-color: var(--color-brand-primary);
  transform: translateY(-2px);
}

.filter-btn.active {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: white;
  box-shadow: 0 4px 10px hsla(192, 85%, 45%, 0.2);
}

#btn-filter-wrong.active {
  background: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
  box-shadow: 0 4px 10px hsla(12, 85%, 62%, 0.2);
}

#btn-filter-correct.active {
  background: var(--color-brand-secondary);
  border-color: var(--color-brand-secondary);
  box-shadow: 0 4px 10px hsla(168, 75%, 42%, 0.2);
}

.review-questions-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.review-q-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-q-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.review-q-card.correct-q {
  border-left: 6px solid var(--color-success);
}

.review-q-card.incorrect-q {
  border-left: 6px solid var(--color-error);
}

.review-q-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  border-bottom: 1px dashed var(--color-border);
  padding-bottom: 0.5rem;
}

.review-q-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-text-title);
}

.review-q-tag {
  font-family: var(--font-interactive);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-xl);
  text-transform: uppercase;
}

.review-q-tag.tag-correct {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.review-q-tag.tag-incorrect {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.review-q-text {
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--color-text-title);
  margin-bottom: 1rem;
  font-weight: 600;
  text-align: left;
}

.review-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.review-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid var(--color-border);
  background: hsl(200, 20%, 98%);
  color: var(--color-text-title);
  text-align: left;
}

.review-opt-marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Review option highlights */
.review-opt.opt-correct {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  font-weight: 600;
}
.review-opt.opt-correct .review-opt-marker {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

.review-opt.opt-incorrect {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}
.review-opt.opt-incorrect .review-opt-marker {
  background: var(--color-error);
  border-color: var(--color-error);
  color: white;
}

.review-opt.opt-faded {
  opacity: 0.6;
}

.review-explanation-box {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: hsla(168, 75%, 42%, 0.05);
  border: 1px dashed var(--color-brand-secondary);
  text-align: left;
}

.review-explanation-box.incorrect-box {
  background: hsla(12, 85%, 62%, 0.05);
  border-color: var(--color-brand-accent);
}

.review-mascot-icon {
  font-size: 2rem;
  flex-shrink: 0;
  animation: bounceSlow 3s infinite ease-in-out;
}

.review-bubble-text {
  flex: 1;
}

.review-bubble-text h5 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-text-title);
  margin-bottom: 0.15rem;
}

.review-bubble-text p {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text-body);
}

/* ==========================================================================
   8. EXAM SELECTION CARDS & STYLING
   ========================================================================== */
.exam-selection-area {
  margin-top: 1.8rem;
  width: 100%;
  text-align: left;
}

.exam-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 0.75rem;
}

@media (min-width: 620px) {
  .exam-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .exam-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.exam-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-card-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: var(--shadow-soft);
  text-align: left;
}

.exam-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-brand-secondary);
  box-shadow: var(--shadow-medium);
}

.exam-card.selected {
  border-color: var(--color-brand-primary);
  background: hsla(155, 65%, 40%, 0.08);
  box-shadow: var(--shadow-glow);
  transform: scale(1.02);
}

.exam-card-badge {
  font-size: 2.2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exam-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-grow: 1;
  min-width: 0;
}

.exam-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-title);
  line-height: 1.2;
}

.exam-card-desc {
  font-size: 0.75rem;
  color: var(--color-text-body);
  line-height: 1.3;
  word-break: break-word;
}

.exam-card-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.25rem;
}

.difficulty-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.diff-easy {
  background: hsl(145, 60%, 90%);
  color: hsl(145, 63%, 30%);
}

.diff-standard {
  background: hsl(192, 60%, 90%);
  color: hsl(192, 85%, 30%);
}

.diff-challenge {
  background: hsl(280, 60%, 90%);
  color: hsl(280, 85%, 35%);
}

.q-count-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  background: hsl(200, 15%, 90%);
  color: hsl(200, 30%, 40%);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   9. THEMED COLOR PALETTES OVERRIDES
   ========================================================================== */
body.theme-outback {
  /* Default variables */
}

body.theme-midnight {
  --color-bg-primary: hsl(230, 45%, 15%);
  --color-bg-secondary: hsl(260, 45%, 8%);
  --color-brand-primary: hsl(255, 85%, 65%);
  --color-brand-secondary: hsl(280, 85%, 55%);
  --color-brand-accent: hsl(330, 85%, 60%);
  --color-brand-amber: hsl(42, 92%, 55%);
  
  --color-text-title: hsl(260, 80%, 95%);
  --color-text-body: hsl(260, 25%, 80%);
  --color-card-surface: hsla(245, 45%, 16%, 0.85);
  --color-border: hsla(260, 35%, 50%, 0.25);
  
  /* Bright, vibrant system colors tailored for dark-mode contrast */
  --color-success: hsl(145, 80%, 50%);
  --color-success-bg: hsla(145, 60%, 15%, 0.85);
  --color-error: hsl(355, 85%, 65%);
  --color-error-bg: hsla(355, 65%, 15%, 0.85);
  
  --shadow-soft: 0 10px 30px -10px hsla(260, 60%, 5%, 0.5);
  --shadow-medium: 0 20px 40px -15px hsla(260, 60%, 5%, 0.7);
  --shadow-glow: 0 0 25px hsla(255, 85%, 65%, 0.35);
  
  background: linear-gradient(135deg, hsl(230, 45%, 12%) 0%, hsl(260, 45%, 6%) 100%) fixed;
}

body.theme-midnight .exam-card.selected {
  background: hsla(255, 85%, 65%, 0.12);
  border-color: var(--color-brand-primary);
}

body.theme-midnight .review-opt {
  background: hsl(245, 40%, 18%);
}

body.theme-midnight .parchment-scroll {
  background: linear-gradient(135deg, hsl(250, 30%, 20%) 0%, hsl(265, 30%, 25%) 100%);
  border-color: hsl(260, 30%, 45%);
  color: hsl(260, 80%, 95%) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

body.theme-midnight .parchment-scroll p {
  color: hsl(260, 20%, 95%) !important; /* Extremely high-contrast white-lavender ink */
}

body.theme-midnight .blurb-title-banner {
  color: hsl(255, 85%, 85%) !important; /* High-contrast dazzling title */
  border-bottom-color: hsl(260, 30%, 45%);
}

/* HIGH-CONTRAST DARK MODE MULTIPLE CHOICE OPTION BUTTONS */
body.theme-midnight .option-btn {
  background: hsl(245, 40%, 18%);
  color: hsl(260, 80%, 95%);
  border-color: hsla(260, 35%, 50%, 0.35);
}

body.theme-midnight .option-marker {
  background: hsl(245, 45%, 12%);
  color: hsl(260, 80%, 95%);
  border-color: hsla(260, 35%, 50%, 0.35);
}

body.theme-midnight .option-btn:hover {
  background: hsla(255, 85%, 65%, 0.15);
  border-color: var(--color-brand-primary);
}

body.theme-midnight .option-btn:hover .option-marker {
  border-color: var(--color-brand-primary);
}

body.theme-midnight .option-btn.selected {
  background: hsla(255, 85%, 65%, 0.25);
  border-color: var(--color-brand-primary);
  box-shadow: 0 4px 15px hsla(255, 85%, 65%, 0.2);
}

body.theme-midnight .option-btn.selected .option-marker {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: white;
}

/* Practice Mode Option Checking Adjustments */
body.theme-midnight .option-btn.correct-choice {
  background: hsla(145, 60%, 15%, 0.95);
  border-color: var(--color-success);
  color: hsl(145, 80%, 95%);
}

body.theme-midnight .option-btn.correct-choice .option-marker {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

body.theme-midnight .option-btn.incorrect-choice {
  background: hsla(355, 65%, 15%, 0.95);
  border-color: var(--color-error);
  color: hsl(355, 80%, 95%);
}

body.theme-midnight .option-btn.incorrect-choice .option-marker {
  background: var(--color-error);
  border-color: var(--color-error);
  color: white;
}

body.theme-midnight .interactive-map-board {
  background: linear-gradient(135deg, hsl(230, 45%, 15%) 0%, hsl(260, 45%, 20%) 100%);
  border-color: hsl(260, 30%, 45%);
  box-shadow: 0 0 30px hsla(255, 85%, 65%, 0.25);
}

body.theme-midnight .map-grid-container {
  background-image: url('map_midnight.png'), radial-gradient(circle at center, hsl(265, 45%, 28%) 0%, hsl(245, 45%, 15%) 60%, hsl(230, 50%, 8%) 100%);
  border-color: hsl(260, 30%, 45%);
}

body.theme-midnight .map-node .node-pulse {
  background: hsl(280, 85%, 55%);
}

body.theme-midnight .map-node .node-pin {
  background: hsl(255, 85%, 65%);
  border-color: hsl(280, 85%, 55%);
  color: white;
}

body.theme-midnight .map-node .node-label {
  background: hsla(245, 45%, 12%, 0.9);
  color: hsl(260, 80%, 95%);
  border-color: hsl(260, 30%, 45%);
}

body.theme-midnight .map-compass {
  background: hsla(245, 45%, 12%, 0.95);
  border-color: hsl(260, 30%, 45%);
  color: hsl(260, 80%, 95%);
}

body.theme-island {
  --color-bg-primary: hsl(198, 80%, 95%);
  --color-bg-secondary: hsl(42, 80%, 94%);
  --color-brand-primary: hsl(195, 90%, 42%);
  --color-brand-secondary: hsl(168, 80%, 40%);
  --color-brand-accent: hsl(12, 85%, 62%);
  --color-brand-amber: hsl(38, 92%, 52%);
  
  --color-text-title: hsl(200, 70%, 15%);
  --color-text-body: hsl(198, 35%, 28%);
  --color-card-surface: hsla(45, 55%, 98%, 0.92);
  --color-border: hsla(38, 50%, 75%, 0.45);
  
  --shadow-soft: 0 10px 30px -10px hsla(38, 45%, 20%, 0.12);
  --shadow-medium: 0 20px 40px -15px hsla(38, 45%, 20%, 0.18);
  --shadow-glow: 0 0 25px hsla(195, 90%, 42%, 0.25);
  
  background: linear-gradient(135deg, hsl(198, 70%, 94%) 0%, hsl(42, 70%, 93%) 100%) fixed;
}

body.theme-island .exam-card.selected {
  background: hsla(195, 90%, 42%, 0.08);
  border-color: var(--color-brand-primary);
}

body.theme-island .review-opt {
  background: hsl(45, 30%, 98%);
}

body.theme-island .parchment-scroll {
  background: linear-gradient(135deg, hsl(45, 55%, 96%) 0%, hsl(38, 55%, 92%) 100%);
  border-color: hsl(38, 50%, 70%);
  color: hsl(200, 70%, 15%);
}

body.theme-island .parchment-scroll p {
  color: hsl(200, 35%, 25%); /* Deep ocean-blue body ink */
}

body.theme-island .blurb-title-banner {
  color: hsl(195, 90%, 30%); /* Rich teal-blue title */
  border-bottom-color: hsl(38, 50%, 70%);
}

body.theme-island .interactive-map-board {
  background: linear-gradient(135deg, hsl(195, 80%, 40%) 0%, hsl(38, 90%, 60%) 100%);
  border-color: hsl(38, 50%, 70%);
}

body.theme-island .map-grid-container {
  background-image: url('map_island.png'), radial-gradient(circle at center, hsl(195, 80%, 55%) 0%, hsl(190, 75%, 40%) 40%, hsl(205, 80%, 30%) 80%, hsl(215, 75%, 20%) 100%);
  border-color: hsl(38, 50%, 70%);
}

body.theme-island .map-node .node-pulse {
  background: hsl(195, 90%, 42%);
}

body.theme-island .map-node .node-pin {
  background: hsl(38, 92%, 52%);
  border-color: hsl(195, 90%, 42%);
  color: white;
}

body.theme-island .map-node .node-label {
  background: hsla(45, 55%, 98%, 0.95);
  color: hsl(200, 70%, 15%);
  border-color: hsl(38, 50%, 70%);
}

body.theme-island .map-compass {
  background: hsla(45, 55%, 98%, 0.95);
  border-color: hsl(38, 50%, 70%);
  color: hsl(200, 70%, 15%);
}

/* ==========================================================================
   10. WIZARD'S GRAMMAR CASTLE THEME (theme-castle)
   ========================================================================== */
body.theme-castle {
  --color-bg-primary: hsl(275, 45%, 15%);
  --color-bg-secondary: hsl(290, 45%, 8%);
  --color-brand-primary: hsl(275, 85%, 65%);
  --color-brand-secondary: hsl(300, 80%, 55%);
  --color-brand-accent: hsl(45, 95%, 55%);
  --color-brand-amber: hsl(38, 92%, 55%);
  
  --color-text-title: hsl(275, 80%, 95%);
  --color-text-body: hsl(275, 25%, 82%);
  --color-card-surface: hsla(280, 40%, 15%, 0.88);
  --color-border: hsla(275, 40%, 50%, 0.25);
  
  /* Bright, vibrant system colors tailored for dark-mode contrast */
  --color-success: hsl(145, 80%, 50%);
  --color-success-bg: hsla(145, 60%, 15%, 0.85);
  --color-error: hsl(355, 85%, 65%);
  --color-error-bg: hsla(355, 65%, 15%, 0.85);
  
  --shadow-soft: 0 10px 30px -10px hsla(275, 60%, 5%, 0.5);
  --shadow-medium: 0 20px 40px -15px hsla(275, 60%, 5%, 0.7);
  --shadow-glow: 0 0 25px hsla(275, 85%, 65%, 0.35);
  
  background: linear-gradient(135deg, hsl(275, 45%, 11%) 0%, hsl(290, 45%, 6%) 100%) fixed;
}

body.theme-castle .exam-card.selected {
  background: hsla(275, 85%, 65%, 0.08);
  border-color: var(--color-brand-primary);
}

body.theme-castle .review-opt {
  background: hsl(275, 40%, 12%);
}

body.theme-castle .parchment-scroll {
  background: linear-gradient(135deg, hsl(275, 40%, 14%) 0%, hsl(290, 40%, 10%) 100%);
  border-color: hsl(275, 45%, 45%);
  color: hsl(275, 80%, 95%) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

body.theme-castle .parchment-scroll p {
  color: hsl(275, 20%, 88%) !important;
}

body.theme-castle .blurb-title-banner {
  color: var(--color-brand-accent);
  border-bottom-color: hsl(275, 40%, 35%);
}

body.theme-castle .option-btn {
  background: hsla(275, 40%, 18%, 0.95);
  border-color: hsl(275, 40%, 45%);
  color: hsl(275, 80%, 95%);
}

body.theme-castle .option-marker {
  background: hsl(275, 60%, 25%);
  border-color: hsl(275, 40%, 45%);
  color: hsl(275, 80%, 95%);
}

body.theme-castle .option-btn:hover {
  background: hsla(275, 50%, 24%, 0.95);
  border-color: var(--color-brand-secondary);
  box-shadow: 0 0 15px hsla(275, 85%, 65%, 0.25);
}

body.theme-castle .option-btn:hover .option-marker {
  background: hsl(275, 70%, 32%);
  border-color: var(--color-brand-secondary);
  color: white;
}

body.theme-castle .option-btn.selected {
  background: hsla(275, 85%, 65%, 0.15);
  border-color: var(--color-brand-primary);
  box-shadow: var(--shadow-glow);
}

body.theme-castle .option-btn.selected .option-marker {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: white;
}

body.theme-castle .option-btn.correct-choice {
  background: hsla(145, 60%, 15%, 0.9);
  border-color: var(--color-success);
}

body.theme-castle .option-btn.correct-choice .option-marker {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

body.theme-castle .option-btn.incorrect-choice {
  background: hsla(355, 65%, 15%, 0.9);
  border-color: var(--color-error);
}

body.theme-castle .option-btn.incorrect-choice .option-marker {
  background: var(--color-error);
  border-color: var(--color-error);
  color: white;
}

body.theme-castle .interactive-map-board {
  background: linear-gradient(135deg, hsl(275, 45%, 15%) 0%, hsl(290, 45%, 10%) 100%);
  border-color: hsl(275, 45%, 45%);
  box-shadow: 0 0 35px hsla(275, 100%, 65%, 0.25);
  border-width: 2px;
}

body.theme-castle .map-grid-container {
  background-image: url('map_castle.png'), radial-gradient(circle at center, hsl(285, 50%, 20%) 0%, hsl(275, 60%, 12%) 50%, hsl(290, 70%, 5%) 100%);
  background-size: cover;
  background-position: center;
  border-color: hsl(275, 45%, 45%);
}

body.theme-castle .map-node .node-pulse {
  background: hsl(275, 100%, 65%);
}

body.theme-castle .map-node .node-pin {
  background: hsl(275, 80%, 25%);
  border-color: hsl(45, 95%, 55%);
  color: white;
}

body.theme-castle .map-node.node-treasure .node-pin {
  background: hsl(45, 95%, 55%);
  border-color: hsl(275, 100%, 65%);
  color: hsl(275, 80%, 15%);
}

body.theme-castle .map-node .node-label {
  background: hsla(290, 45%, 8%, 0.95);
  color: hsl(275, 80%, 95%);
  border-color: hsl(275, 45%, 45%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

body.theme-castle .map-compass {
  background: hsla(290, 45%, 8%, 0.95);
  border-color: hsl(275, 45%, 45%);
  color: hsl(275, 30%, 95%);
}


/* ==========================================================================
   10. COSMIC SPACE THEME OVERRIDES (SET 5)
   ========================================================================== */
body.theme-space {
  --color-bg-primary: hsl(235, 60%, 10%);
  --color-bg-secondary: hsl(265, 60%, 5%);
  --color-brand-primary: hsl(190, 100%, 50%); /* Bright electric cyan */
  --color-brand-secondary: hsl(275, 95%, 65%); /* Neon purple */
  --color-brand-accent: hsl(325, 95%, 60%); /* Hot pink */
  --color-brand-amber: hsl(45, 100%, 55%); /* Bright gold */
  
  --color-text-title: hsl(210, 30%, 98%);
  --color-text-body: hsl(210, 20%, 85%);
  --color-card-surface: hsla(250, 45%, 12%, 0.85);
  --color-border: hsla(265, 50%, 55%, 0.35);
  
  --color-success: hsl(145, 100%, 45%);
  --color-success-bg: hsla(145, 60%, 12%, 0.85);
  --color-error: hsl(355, 100%, 65%);
  --color-error-bg: hsla(355, 65%, 12%, 0.85);
  
  --shadow-soft: 0 10px 30px -10px hsla(265, 60%, 3%, 0.6);
  --shadow-medium: 0 20px 40px -15px hsla(265, 60%, 3%, 0.8);
  --shadow-glow: 0 0 25px hsla(190, 100%, 50%, 0.4);
  
  background: linear-gradient(135deg, hsl(235, 60%, 6%) 0%, hsl(265, 60%, 4%) 100%) fixed;
  background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
                    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
                    radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
                    linear-gradient(135deg, hsl(235, 60%, 6%) 0%, hsl(265, 60%, 4%) 100%);
  background-size: 550px 550px, 350px 350px, 250px 250px, 100% 100%;
  background-position: 0 0, 40px 60px, 130px 270px, 0 0;
}

body.theme-space .exam-card.selected {
  background: hsla(190, 100%, 50%, 0.12);
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 20px hsla(190, 100%, 50%, 0.25);
}

body.theme-space .review-opt {
  background: hsl(250, 40%, 15%);
}

body.theme-space .parchment-scroll {
  background: linear-gradient(135deg, hsl(245, 35%, 15%) 0%, hsl(260, 35%, 20%) 100%);
  border-color: hsl(265, 45%, 45%);
  color: hsl(210, 30%, 98%) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-lg);
  border-width: 2px;
}

body.theme-space .parchment-scroll p {
  color: hsl(210, 20%, 90%) !important;
}

body.theme-space .blurb-title-banner {
  color: hsl(190, 100%, 80%) !important;
  border-bottom-color: hsl(265, 45%, 45%);
}

body.theme-space .option-btn {
  background: hsl(250, 40%, 16%);
  color: hsl(210, 30%, 95%);
  border-color: hsla(265, 45%, 45%, 0.4);
}

body.theme-space .option-marker {
  background: hsl(250, 45%, 10%);
  color: hsl(190, 100%, 75%);
  border-color: hsla(265, 45%, 45%, 0.4);
}

body.theme-space .option-btn:hover {
  background: hsla(190, 100%, 50%, 0.15);
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 15px hsla(190, 100%, 50%, 0.2);
}

body.theme-space .option-btn:hover .option-marker {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}

body.theme-space .option-btn.selected {
  background: hsla(190, 100%, 50%, 0.22);
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 20px hsla(190, 100%, 50%, 0.35);
}

body.theme-space .option-btn.selected .option-marker {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: hsl(235, 60%, 8%);
  font-weight: bold;
}

body.theme-space .option-btn.correct-choice {
  background: hsla(145, 60%, 12%, 0.95);
  border-color: var(--color-success);
  color: hsl(145, 85%, 95%);
}

body.theme-space .option-btn.correct-choice .option-marker {
  background: var(--color-success);
  border-color: var(--color-success);
  color: hsl(235, 60%, 8%);
}

body.theme-space .option-btn.incorrect-choice {
  background: hsla(355, 65%, 12%, 0.95);
  border-color: var(--color-error);
  color: hsl(355, 85%, 95%);
}

body.theme-space .option-btn.incorrect-choice .option-marker {
  background: var(--color-error);
  border-color: var(--color-error);
  color: white;
}

body.theme-space .interactive-map-board {
  background: linear-gradient(135deg, hsl(235, 55%, 12%) 0%, hsl(265, 55%, 15%) 100%);
  border-color: hsl(265, 45%, 45%);
  box-shadow: 0 0 35px hsla(190, 100%, 50%, 0.25);
  border-width: 2px;
}

body.theme-space .map-grid-container {
  background-image: url('map_space.png'), radial-gradient(circle at center, hsl(280, 50%, 18%) 0%, hsl(255, 60%, 12%) 40%, hsl(235, 70%, 6%) 80%, hsl(240, 80%, 3%) 100%);
  border-color: hsl(265, 45%, 45%);
}

body.theme-space .map-node .node-pulse {
  background: hsl(190, 100%, 50%);
}

body.theme-space .map-node .node-pin {
  background: hsl(275, 95%, 65%);
  border-color: hsl(190, 100%, 50%);
  color: white;
  box-shadow: 0 0 15px hsla(275, 95%, 65%, 0.4);
}

body.theme-space .map-node .node-label {
  background: hsla(250, 45%, 8%, 0.92);
  color: hsl(210, 30%, 95%);
  border-color: hsl(265, 45%, 40%);
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

body.theme-space .map-compass {
  background: hsla(250, 45%, 8%, 0.95);
  border-color: hsl(265, 45%, 40%);
  color: hsl(210, 30%, 95%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* ==========================================================================
   16. EXPLORER'S ACADEMY PROFILE & TROPHY ROOM DASHBOARD
   ========================================================================== */
.academy-profile-card {
  margin-top: 2rem;
  border: 2px dashed hsl(265, 80%, 75%);
  background: hsla(265, 50%, 98%, 0.92);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: slideDown 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  box-shadow: var(--shadow-medium);
}

.academy-profile-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px -10px hsla(265, 45%, 20%, 0.15);
}

body.theme-midnight .academy-profile-card {
  border-color: hsl(265, 50%, 45%);
  background: hsla(265, 45%, 11%, 0.88);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

body.theme-space .academy-profile-card {
  border-color: hsl(190, 80%, 45%);
  background: hsla(225, 60%, 10%, 0.88);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.academy-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 1.2rem;
}

.academy-header-icon {
  font-size: 3.2rem;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
  animation: activeWiggle 2.5s infinite alternate ease-in-out;
  display: inline-block;
}

.academy-title-area h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--color-text-title);
  margin-bottom: 0.25rem;
}

.academy-subtitle {
  font-size: 0.95rem;
  color: var(--color-text-body);
  font-weight: 500;
}

.academy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .academy-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.academy-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.academy-box {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
  overflow: hidden;
}

.academy-box:hover {
  box-shadow: var(--shadow-medium);
}

body.theme-midnight .academy-box,
body.theme-space .academy-box {
  background: hsla(0, 0%, 100%, 0.05);
  border-color: hsla(196, 30%, 80%, 0.15);
}

.academy-box-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-text-title);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.academy-box-desc {
  font-size: 0.85rem;
  color: var(--color-text-body);
  margin-bottom: 1.2rem;
  opacity: 0.85;
}

.count-badge {
  font-family: var(--font-interactive);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.2rem 0.65rem;
  border-radius: 12px;
  margin-left: auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.badge-mastered {
  background: hsl(45, 95%, 90%);
  color: hsl(40, 85%, 35%);
  border: 1px solid hsl(40, 70%, 80%);
}

body.theme-midnight .badge-mastered,
body.theme-space .badge-mastered {
  background: hsla(45, 95%, 20%, 0.4);
  color: hsl(45, 90%, 75%);
  border-color: hsla(45, 90%, 60%, 0.4);
}

.badge-weak {
  background: hsl(12, 95%, 93%);
  color: hsl(12, 85%, 45%);
  border: 1px solid hsl(12, 70%, 85%);
}

body.theme-midnight .badge-weak,
body.theme-space .badge-weak {
  background: hsla(12, 95%, 20%, 0.4);
  color: hsl(12, 90%, 75%);
  border-color: hsla(12, 90%, 60%, 0.4);
}

.academy-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-content: flex-start;
  flex: 1;
  min-height: 50px;
}

.academy-pill {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
}

.academy-pill:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 5px 10px rgba(0,0,0,0.08);
}

.pill-mastered {
  background: hsl(145, 60%, 94%);
  color: hsl(145, 80%, 22%);
  border: 1px solid hsl(145, 50%, 85%);
}

body.theme-midnight .pill-mastered,
body.theme-space .pill-mastered {
  background: hsla(145, 60%, 20%, 0.35);
  color: hsl(145, 65%, 75%);
  border-color: hsla(145, 60%, 65%, 0.35);
}

.pill-weak {
  background: hsl(355, 65%, 95%);
  color: hsl(355, 75%, 40%);
  border: 1px solid hsl(355, 50%, 88%);
}

body.theme-midnight .pill-weak,
body.theme-space .pill-weak {
  background: hsla(355, 65%, 20%, 0.35);
  color: hsl(355, 70%, 75%);
  border-color: hsla(355, 70%, 65%, 0.35);
}

.pill-empty {
  font-style: italic;
  color: var(--color-text-body);
  opacity: 0.6;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.5rem 0;
  width: 100%;
  text-align: center;
}

/* Trophy Room Scroll Container */
.academy-history-list,
.academy-trophies-container {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow-y: auto;
  max-height: 350px;
  padding-right: 0.4rem;
  flex: 1;
  min-height: 0;
}

.academy-history-list::-webkit-scrollbar,
.academy-trophies-container::-webkit-scrollbar {
  width: 6px;
}
.academy-history-list::-webkit-scrollbar-track,
.academy-trophies-container::-webkit-scrollbar-track {
  background: transparent;
}
.academy-history-list::-webkit-scrollbar-thumb,
.academy-trophies-container::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 20px;
}

.trophy-case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
  width: 100%;
}

.trophy-case-header .academy-box-title {
  margin-bottom: 0;
}

.btn-clear-history {
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.trophy-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  background: hsl(200, 20%, 96%);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  transition: all 0.2s ease;
}

body.theme-midnight .trophy-item,
body.theme-space .trophy-item {
  background: hsla(0, 0%, 100%, 0.03);
}

.trophy-item:hover {
  transform: translateX(4px);
  background: white;
  border-color: var(--color-brand-secondary);
}

body.theme-midnight .trophy-item:hover,
body.theme-space .trophy-item:hover {
  background: hsla(0, 0%, 100%, 0.07);
}

.trophy-icon {
  font-size: 1.8rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.trophy-item:hover .trophy-icon {
  transform: scale(1.12) rotate(8deg);
}

body.theme-midnight .trophy-icon,
body.theme-space .trophy-icon {
  background: hsla(0, 0%, 100%, 0.08);
}

.trophy-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.trophy-title {
  font-family: var(--font-interactive);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trophy-meta {
  font-size: 0.72rem;
  color: var(--color-text-body);
  opacity: 0.85;
  display: flex;
  justify-content: space-between;
  margin-top: 0.15rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.trophy-score {
  font-family: var(--font-interactive);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--color-brand-secondary);
  padding: 0.2rem 0.6rem;
  background: white;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

body.theme-midnight .trophy-score,
body.theme-space .trophy-score {
  background: hsla(0, 0%, 100%, 0.08);
  color: hsl(168, 75%, 65%);
}

.trophy-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--color-text-body);
  opacity: 0.75;
  font-style: italic;
  font-size: 0.9rem;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: hsla(0, 0%, 100%, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.academy-footer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.2rem;
}

.btn-clear-profile {
  font-size: 0.85rem;
  padding: 0.6rem 1.2rem;
  opacity: 0.8;
  background: hsla(355, 65%, 95%, 0.8);
  border: 1px solid hsl(355, 60%, 85%);
  color: hsl(355, 75%, 40%);
}

body.theme-midnight .btn-clear-profile,
body.theme-space .btn-clear-profile {
  background: hsla(355, 65%, 20%, 0.2);
  border-color: hsla(355, 65%, 40%, 0.4);
  color: hsl(355, 75%, 75%);
}

.btn-clear-profile:hover {
  opacity: 1;
  color: white;
  border-color: var(--color-error);
  background: var(--color-error);
  transform: translateY(-2px);
}


/* ==========================================================================
   MULTI-ADVENTURE PROGRESS SYSTEM CUSTOM PREMIUM STYLES
   ========================================================================== */

/* Make exam-card relative for absolute children (badges) */
.exam-card {
  position: relative;
}

/* Floating, bouncing card badge */
.card-saved-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, hsl(35, 100%, 55%), hsl(15, 100%, 55%));
  color: white;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.6rem;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(255, 60, 0, 0.35), var(--shadow-glow);
  border: 1.5px solid white;
  animation: badgeBounce 2s infinite ease-in-out;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  letter-spacing: 0.02em;
}

@keyframes badgeBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.03);
  }
}

/* Setup Inline Saved Info Panel */
.setup-saved-info-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 1rem 0;
  padding: 1rem 1.25rem;
  background: hsla(150, 80%, 40%, 0.06);
  border: 2px dashed hsl(150, 60%, 50%);
  border-radius: var(--radius-md);
  animation: pulseSavedBg 3s infinite ease-in-out;
  text-align: left;
}

body.theme-midnight .setup-saved-info-box,
body.theme-space .setup-saved-info-box {
  background: hsla(150, 80%, 40%, 0.08);
  border-color: hsl(150, 60%, 40%);
}

@keyframes pulseSavedBg {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
  50% {
    box-shadow: 0 0 12px 2px rgba(16, 185, 129, 0.15);
  }
}

.saved-info-icon {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
}

body.theme-midnight .saved-info-icon,
body.theme-space .saved-info-icon {
  background: var(--color-card-surface);
  border: 1.5px solid hsl(150, 60%, 40%);
}

.saved-info-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.saved-info-content h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-title);
}

.saved-info-content p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-body);
}

/* Action Buttons Container Row */
.setup-actions-row {
  display: flex;
  gap: 1rem;
  width: 100%;
  margin-top: 1rem;
}

/* Setup Reset Button (Start Fresh) */
.start-fresh-btn-setup {
  flex: 1;
  background: transparent;
  color: hsl(355, 75%, 45%);
  border: 2px solid hsl(355, 70%, 90%);
  transition: all 0.25s ease;
  font-weight: 700;
}

body.theme-midnight .start-fresh-btn-setup,
body.theme-space .start-fresh-btn-setup {
  color: hsl(355, 80%, 75%);
  border-color: hsla(355, 70%, 45%, 0.4);
}

.start-fresh-btn-setup:hover {
  background: hsl(355, 75%, 45%);
  border-color: hsl(355, 75%, 45%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

body.theme-midnight .start-fresh-btn-setup:hover,
body.theme-space .start-fresh-btn-setup:hover {
  background: hsl(355, 75%, 45%);
  border-color: hsl(355, 75%, 45%);
  color: white;
}


/* ==========================================================================
   UNIFIED GRADE LEVEL SELECTION STYLES
   ========================================================================== */

.grade-selection-area {
  margin: 1.5rem 0 2rem 0;
  text-align: left;
}

.grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 0.8rem;
}

.grade-card {
  background: var(--color-card-surface);
  border: 2.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.grade-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-brand-primary);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.grade-card.selected {
  border-color: var(--color-brand-primary);
  background: linear-gradient(135deg, hsla(196, 90%, 45%, 0.04), hsla(275, 90%, 45%, 0.04));
  box-shadow: 0 8px 25px rgba(23, 162, 184, 0.15), var(--shadow-glow);
}

.grade-card.selected::before {
  content: "Selected";
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-brand-primary);
  color: white;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.2rem 0.75rem;
  border-bottom-left-radius: var(--radius-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.grade-card-badge {
  font-size: 2.2rem;
  width: 54px;
  height: 54px;
  background: var(--color-bg-base);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

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

.grade-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
}

.grade-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text-title);
}

.grade-card-desc {
  font-size: 0.8rem;
  color: var(--color-text-body);
  line-height: 1.4;
}

.grade-card-meta {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-brand-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
}

/* ==========================================================================
   UNIFIED SUBJECT LEVEL SELECTION STYLES
   ========================================================================== */

.subject-selection-area {
  margin: 1.5rem 0 2rem 0;
  text-align: left;
}

.subject-tabs-container {
  display: flex;
  gap: 1rem;
  margin-top: 0.8rem;
  background: rgba(0, 0, 0, 0.03);
  padding: 0.4rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  max-width: 500px;
}

.subject-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-text-body);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.subject-tab:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-brand-primary);
}

.subject-tab.active {
  background: var(--color-brand-primary);
  color: white;
  box-shadow: var(--shadow-soft), var(--shadow-glow);
}

.subject-tab-emoji {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.subject-tab.active .subject-tab-emoji {
  transform: scale(1.15) rotate(-5deg);
}

/* ==========================================================================
   UNIFIED INTEGRATED LAYOUT STYLES & BRIDGES
   ========================================================================== */

/* Responsive Two-Column Layout for Active Quiz Screen */
.quiz-two-column-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .quiz-two-column-grid.has-context {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 2rem;
  }
}

/* Bridging question components from HTML with CSS */
.active-question-card {
  border-top: 4px solid var(--color-brand-secondary);
}

.question-skill-pill {
  font-family: var(--font-interactive);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-brand-secondary);
  background: hsla(168, 75%, 42%, 0.08);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-xl);
}

.section-display-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-text-title);
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
}

.section-display-desc {
  font-size: 0.85rem;
  color: var(--color-text-body);
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.section-divider {
  border: 0;
  border-top: 1px dashed var(--color-border);
  margin: 1rem 0;
}

.question-body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.question-num-display {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-text-title);
  background: hsla(196, 30%, 80%, 0.15);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  align-self: flex-start;
}

.question-text-display {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--color-text-title);
  font-family: var(--font-body);
  margin-bottom: 0.5rem;
}

.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   AUTHENTICATION & MULTI-ENVIRONMENT PREMIUM STYLES
   ========================================================================== */

.header-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.auth-trigger-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: var(--color-text-title) !important;
  font-weight: 600 !important;
  padding: 0.6rem 1.2rem !important;
  font-size: 0.9rem !important;
  border-radius: 50px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.auth-trigger-btn:hover {
  background: var(--color-brand-primary) !important;
  color: white !important;
  border-color: var(--color-brand-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}

.auth-user-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

body.theme-midnight .auth-user-container,
body.theme-space .auth-user-container {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.1);
}

.auth-user-name {
  font-family: var(--font-interactive);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-title);
}

.btn-sign-out-header {
  background: transparent !important;
  border: none !important;
  color: hsl(0, 85%, 60%) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sign-out-header:hover {
  color: hsl(0, 100%, 45%) !important;
  transform: scale(1.05);
}

/* Glassmorphic Auth Modal Overlay */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.45); /* dark slate base */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  width: 100%;
  max-width: 450px;
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  position: relative;
  transform: translateY(0);
  animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Dark mode compatibility for theme-midnight/space */
body.theme-midnight .auth-card,
body.theme-space .auth-card {
  background: rgba(20, 25, 45, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.auth-close-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: transparent;
  border: none;
  font-size: 1.75rem;
  color: var(--color-text-body);
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.auth-close-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-title);
  transform: rotate(90deg);
}

body.theme-midnight .auth-close-btn:hover,
body.theme-space .auth-close-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.auth-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.35rem;
  border-radius: 50px;
  margin-bottom: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

body.theme-midnight .auth-tabs,
body.theme-space .auth-tabs {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.02);
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 50px;
  font-family: var(--font-interactive);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text-body);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}

.auth-tab.active {
  background: white;
  color: var(--color-brand-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

body.theme-midnight .auth-tab.active,
body.theme-space .auth-tab.active {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

.auth-form-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-text-title);
  margin-bottom: 0.5rem;
}

.auth-form-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-body);
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.auth-input-group {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auth-input-group label {
  font-family: var(--font-interactive);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-title);
}

.auth-input-group input {
  font-family: var(--font-body);
  padding: 0.75rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  transition: all 0.25s ease;
  color: var(--color-text-title);
}

body.theme-midnight .auth-input-group input,
body.theme-space .auth-input-group input {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}

.auth-input-group input:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  background: white;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

body.theme-midnight .auth-input-group input:focus,
body.theme-space .auth-input-group input:focus {
  background: rgba(0, 0, 0, 0.4);
}

.auth-error {
  background: hsl(0, 85%, 95%);
  border: 1px solid hsl(0, 85%, 85%);
  color: hsl(0, 85%, 35%);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  line-height: 1.4;
  animation: shake 0.3s ease;
}

body.theme-midnight .auth-error,
body.theme-space .auth-error {
  background: hsl(0, 50%, 15%);
  border-color: hsl(0, 50%, 25%);
  color: hsl(0, 90%, 75%);
}

.auth-submit-btn {
  width: 100%;
  padding: 0.85rem !important;
  font-size: 1rem !important;
  margin-top: 0.5rem;
}

.auth-guest-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0;
  color: var(--color-text-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.auth-guest-divider::before,
.auth-guest-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--color-border);
}

body.theme-midnight .auth-guest-divider::before,
body.theme-midnight .auth-guest-divider::after,
body.theme-space .auth-guest-divider::before,
body.theme-space .auth-guest-divider::after {
  border-color: rgba(255, 255, 255, 0.1);
}

.auth-guest-divider span {
  padding: 0 0.75rem;
}

.auth-guest-btn {
  width: 100%;
  padding: 0.85rem !important;
  font-size: 0.95rem !important;
}

/* Dev Environment Badge floating indicator */
.dev-mode-badge {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(245, 158, 11, 0.15); /* amber/orange translucent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  color: #d97706; /* rich amber */
  font-family: var(--font-interactive);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: pulseAmber 2.5s infinite ease-in-out;
}

.dev-mode-badge:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.5);
}

.dev-mode-badge:active {
  transform: translateY(-1px) scale(0.98);
}

body.theme-midnight .dev-mode-badge,
body.theme-space .dev-mode-badge {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background-color: #f59e0b;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #f59e0b;
  animation: blinkFast 1s infinite alternate;
}

body.theme-midnight .badge-dot,
body.theme-space .badge-dot {
  background-color: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes pulseAmber {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
  }
}

@keyframes blinkFast {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

.google-auth-btn {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: white !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  font-weight: 600 !important;
  padding: 0.8rem 1.2rem !important;
  font-size: 0.95rem !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.25s ease !important;
  margin-top: 1rem;
}

body.theme-midnight .google-auth-btn,
body.theme-space .google-auth-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.google-auth-btn:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

body.theme-midnight .google-auth-btn:hover,
body.theme-space .google-auth-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.google-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ==========================================================================
   🎒 DUAL-SUBJECT MOCKS, TIMERS, & 2023 NAPLAN DIAGNOSTICS
   ========================================================================== */

/* Exam Type Filter Tabs */
.exam-type-selection-area {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
}

.exam-type-tabs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.6rem;
  background: rgba(0, 0, 0, 0.02);
  padding: 0.4rem;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
}

.exam-type-tab {
  flex: 1;
  min-width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: white;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-body);
  transition: all 0.25s ease;
}

.exam-type-tab:hover {
  border-color: var(--color-brand-primary);
  background: rgba(var(--color-brand-primary), 0.02);
  transform: translateY(-1px);
}

.exam-type-tab.active {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: white;
  box-shadow: var(--shadow-soft);
}

.exam-type-tab-emoji {
  font-size: 1.1rem;
}

/* Pre-Exam Settings & Adjustable Timer */
.exam-settings-container {
  margin: 1.5rem 0;
  padding: 1.2rem;
  border: 2px solid var(--color-border);
  background: linear-gradient(135deg, white 0%, var(--color-bg-light) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.setting-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.4rem;
}

.setting-title-row h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
  color: var(--color-text-title);
}

.setting-emoji {
  font-size: 1.2rem;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.setting-label-area {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.setting-label {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-text-title);
}

.setting-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

.timer-adjuster-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.2rem;
}

.btn-timer-control {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-bg-light);
  color: var(--color-text-title);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-timer-control:hover {
  background: var(--color-brand-primary);
  color: white;
}

.timer-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.4rem;
}

.timer-input-wrapper input {
  width: 48px;
  border: none;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text-title);
}

.timer-input-wrapper input:focus {
  outline: none;
}

.timer-min-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.timer-badge-row {
  display: flex;
  gap: 1rem;
  margin-top: 0.8rem;
}

.badge-recommended-link, .badge-untimed-link {
  font-size: 0.75rem;
  font-weight: 700;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
  text-decoration: underline;
}

.badge-recommended-link {
  color: var(--color-brand-primary);
}

.badge-untimed-link {
  color: var(--color-text-muted);
}

.badge-recommended-link:hover, .badge-untimed-link:hover {
  opacity: 0.8;
}

/* Live Quiz Timer Display */
.quiz-timer-display {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-bg-light);
  border: 2px solid var(--color-border);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--color-text-title);
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}

.quiz-timer-display.timer-warning {
  background: #fef2f2;
  border-color: #f87171;
  color: #ef4444;
  animation: pulseWarning 1s infinite alternate;
}

@keyframes pulseWarning {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
  100% { transform: scale(1.03); box-shadow: 0 0 10px rgba(239, 68, 68, 0.2); }
}

/* Modern Glassmorphic Parent Diagnostic Card */
.parent-diagnostic-card {
  margin-top: 2rem;
  border: 2px solid var(--color-border);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(243, 244, 246, 0.9) 100%);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  transition: transform 0.3s ease;
}

.parent-diagnostic-card:hover {
  transform: translateY(-2px);
}

.diagnostic-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  border-bottom: 1.5px solid var(--color-border);
  padding-bottom: 0.8rem;
}

.diagnostic-header-icon {
  font-size: 2.2rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.diagnostic-title-area h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 900;
  margin: 0;
  color: var(--color-text-title);
}

.diagnostic-subtitle {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

.diagnostic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .diagnostic-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.diagnostic-proficiency-box {
  background: white;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.proficiency-title {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.proficiency-badge-container {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}

/* Color codes for 2023 NAPLAN Proficiency Levels */
.proficiency-level-exceeding {
  background: #ecfdf5;
  border: 2px solid #10b981;
  color: #047857;
}

.proficiency-level-strong {
  background: #e0f2fe;
  border: 2px solid #3b82f6;
  color: #1d4ed8;
}

.proficiency-level-developing {
  background: #fef3c7;
  border: 2px solid #f59e0b;
  color: #b45309;
}

.proficiency-level-support {
  background: #fef2f2;
  border: 2px solid #f87171;
  color: #b91c1c;
}

.proficiency-explanation-text {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-body);
}

.diagnostic-insights-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.insight-pillar {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  position: relative;
}

.insight-label {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.3rem;
}

.strength-label {
  color: #059669;
}

.weakness-label {
  color: #d97706;
}

.insight-text {
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 0;
  color: var(--color-text-body);
}

.remedial-action-card {
  background: linear-gradient(135deg, rgba(var(--color-brand-primary), 0.04) 0%, rgba(var(--color-brand-primary), 0.01) 100%);
  border: 2px solid var(--color-brand-primary);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  position: relative;
  overflow: hidden;
}

.remedial-action-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--color-brand-primary);
}

.remedial-card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--color-brand-primary);
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.remedial-action-card h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 900;
  margin: 0 0 0.4rem 0;
  color: var(--color-text-title);
}

.remedial-action-card p {
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0;
  color: var(--color-text-body);
}

/* Themes Midnight / Space Integration */
body.theme-midnight .exam-settings-container,
body.theme-space .exam-settings-container {
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  border-color: rgba(255,255,255,0.1);
}

body.theme-midnight .exam-type-tab,
body.theme-space .exam-type-tab {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}

body.theme-midnight .btn-timer-control,
body.theme-space .btn-timer-control {
  background: rgba(255,255,255,0.1);
  color: white;
}

body.theme-midnight .timer-adjuster-controls,
body.theme-space .timer-adjuster-controls,
body.theme-midnight .timer-input-wrapper input,
body.theme-space .timer-input-wrapper input {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.15);
}

body.theme-midnight .parent-diagnostic-card,
body.theme-space .parent-diagnostic-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

body.theme-midnight .diagnostic-proficiency-box,
body.theme-space .diagnostic-proficiency-box,
body.theme-midnight .insight-pillar,
body.theme-space .insight-pillar {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(255,255,255,0.1);
}

/* ==========================================================================
   CONVERSION WORKFLOW: GUEST CTA & LOCK OVERLAYS
   ========================================================================== */

/* Guest Sign-in CTA Card */
.guest-cta-card {
  margin-top: 2rem;
  border: 2px dashed hsl(260, 85%, 70%);
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.9) 0%, rgba(243, 232, 255, 0.9) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.15);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: guestBorderPulse 3s infinite alternate;
}

@keyframes guestBorderPulse {
  0% { border-color: hsl(260, 85%, 65%); box-shadow: 0 10px 25px rgba(124, 58, 237, 0.15); }
  100% { border-color: hsl(320, 85%, 65%); box-shadow: 0 10px 35px rgba(219, 39, 119, 0.25); }
}

.guest-cta-card:hover {
  transform: translateY(-3px);
}

.guest-cta-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
  border-bottom: 1.5px solid rgba(124, 58, 237, 0.15);
  padding-bottom: 1rem;
}

.guest-cta-icon {
  font-size: 2.5rem;
  animation: keyWobble 2s infinite ease-in-out;
}

@keyframes keyWobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-10deg) scale(1.1); }
}

.guest-cta-title-area h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0;
  background: linear-gradient(135deg, hsl(260, 85%, 45%) 0%, hsl(320, 85%, 45%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.guest-cta-subtitle {
  font-size: 0.85rem;
  margin: 0.2rem 0 0 0;
  color: var(--color-text-muted);
  font-weight: 500;
}

.guest-cta-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-body);
}

.guest-cta-body p {
  margin: 0 0 1.5rem 0;
}

.btn-unlock-quest {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  border: none;
  background: linear-gradient(135deg, hsl(262, 80%, 50%) 0%, hsl(282, 85%, 55%) 50%, hsl(325, 80%, 48%) 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-unlock-quest:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
}

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

/* Midnight/Space theme integration for Guest CTA Card */
body.theme-midnight .guest-cta-card,
body.theme-space .guest-cta-card {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%);
  border-color: hsl(260, 75%, 60%);
}

body.theme-midnight .guest-cta-title-area h3,
body.theme-space .guest-cta-title-area h3 {
  background: linear-gradient(135deg, hsl(260, 95%, 75%) 0%, hsl(320, 95%, 75%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* Academy Profile Lock Overlay */
.academy-profile-card {
  position: relative; /* Ensure relative positioning for absolute overlay */
}

.academy-profile-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.lock-overlay-content {
  max-width: 480px;
  background: white;
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.12);
  border: 1px solid var(--color-border);
  animation: scaleUpIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scaleUpIn {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.lock-overlay-icon {
  font-size: 2.8rem;
  display: block;
  margin-bottom: 0.8rem;
  animation: keyWobble 2.5s infinite ease-in-out;
}

.lock-overlay-content h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0 0 0.8rem 0;
  color: var(--color-text-title);
}

.lock-overlay-content p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-body);
  margin: 0 0 1.5rem 0;
}

.btn-unlock-profile {
  padding: 0.8rem 1.8rem;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  border: none;
  background: linear-gradient(135deg, hsl(262, 80%, 50%) 0%, hsl(282, 85%, 55%) 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-unlock-profile:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
}

/* Midnight/Space theme integration for Lock Overlay */
body.theme-midnight .academy-profile-lock-overlay,
body.theme-space .academy-profile-lock-overlay {
  background: rgba(15, 23, 42, 0.75);
}

body.theme-midnight .lock-overlay-content,
body.theme-space .lock-overlay-content {
  background: hsl(222, 47%, 11%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

body.theme-midnight .lock-overlay-content h3,
body.theme-space .lock-overlay-content h3 {
  color: white;
}

body.theme-midnight .lock-overlay-content p,
body.theme-space .lock-overlay-content p {
  color: rgba(255, 255, 255, 0.8);
}


/* Exam Card Locked Badges - Redesigned to Billy's Golden Honey Lock */
.exam-card-locked-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(245, 158, 11, 0.1);
  color: hsl(42, 95%, 40%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

body.theme-midnight .exam-card-locked-badge,
body.theme-space .exam-card-locked-badge {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-brand-amber);
  border-color: rgba(245, 158, 11, 0.3);
}

/* Locked Card overlay effects */
.exam-card.locked-card {
  position: relative;
  border-color: rgba(245, 158, 11, 0.15);
  padding-right: 3.8rem; /* Reserve right spacing so title and description do not overlap with absolute top-right Lock badge */
}

.exam-card.locked-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.01) 0%, transparent 100%);
  transition: all 0.3s ease;
}

.exam-card.locked-card:hover::after {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, transparent 100%);
}


/* ==========================================================================
   10. TRUST BADGES & BRAND FOOTER (PARENT TRUST & VISUAL POLISH)
   ========================================================================== */

/* Parent-Facing Trust Badges Layout */
.trust-badges-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
  width: 100%;
}

@media (min-width: 600px) {
  .trust-badges-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trust-badge-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  background: var(--color-card-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trust-badge-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
  border-color: var(--color-brand-secondary);
}

.trust-badge-icon {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(155, 163, 175, 0.06);
  border-radius: 50%;
  flex-shrink: 0;
}

.trust-badge-card:nth-child(1) .trust-badge-icon {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-brand-amber);
}

.trust-badge-card:nth-child(2) .trust-badge-icon {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-brand-secondary);
}

.trust-badge-card:nth-child(3) .trust-badge-icon {
  background: rgba(59, 130, 246, 0.1);
  color: hsl(215, 80%, 40%);
}

.trust-badge-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.trust-badge-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-brand-primary);
}

.trust-badge-desc {
  font-size: 0.72rem;
  color: var(--color-text-body);
  line-height: 1.2;
}

/* Billy's Mascot Welcoming Bubble */
.billy-mascot-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: linear-gradient(135deg, hsla(215, 80%, 25%, 0.05) 0%, hsla(155, 65%, 40%, 0.05) 100%);
  border: 1px solid hsla(215, 30%, 80%, 0.25);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-soft);
}

.billy-mascot-avatar {
  font-size: 3rem;
  animation: billy-float 3s ease-in-out infinite alternate;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.billy-mascot-bubble {
  position: relative;
  background: var(--color-card-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.2rem;
  flex-grow: 1;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.billy-mascot-bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: var(--color-card-surface);
  border-left: 1.5px solid var(--color-border);
  border-bottom: 1.5px solid var(--color-border);
}

.billy-bubble-text {
  font-family: var(--font-interactive);
  font-size: 0.88rem;
  color: var(--color-text-title);
  font-weight: 600;
  line-height: 1.4;
}

@keyframes billy-float {
  0% {
    transform: translateY(0) rotate(-2deg);
  }
  100% {
    transform: translateY(-6px) rotate(3deg);
  }
}

/* Brand Footer Section */
.brand-footer {
  margin-top: auto;
  padding: 3rem 1.5rem 1.5rem 1.5rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  width: 100%;
}

.brand-footer-grid {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
}

.brand-footer-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-brand-primary);
  font-size: 1.1rem;
}

.brand-footer-desc {
  font-size: 0.78rem;
  color: var(--color-text-body);
  max-width: 600px;
  line-height: 1.5;
}

.brand-footer-certs {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.brand-footer-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  background: rgba(155, 163, 175, 0.08);
  border: 1px solid var(--color-border);
  color: var(--color-brand-primary);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brand-footer-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  font-size: 0.75rem;
}

.brand-footer-link {
  color: var(--color-brand-secondary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.25s ease;
}

.brand-footer-link:hover {
  color: var(--color-brand-primary);
}

.brand-footer-copy {
  font-size: 0.7rem;
  color: var(--color-text-body);
  opacity: 0.8;
  margin-top: 0.5rem;
}