@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;600;700&display=swap");

:root {
  /* Base Colors - Space Theme */
  --primary: #0d0221; /* Deep Space Blue/Purple */
  --primary-light: #260f47; /* Lighter Deep Space */
  --secondary: #4a1a7e; /* Cosmic Purple */
  --accent: #ff00ff; /* Magenta Nebula */
  --text-light: #e0e0e0; /* Off-white stars */
  --text-dark: #1a1a2e; /* Dark Matter */
  --bg-dark: #000000; /* Black Hole */
  --star-yellow: #f0e68c; /* Pale Goldenrod for stars/highlights */
  --nebula-pink: #da70d6; /* Orchid Pink */
  --nebula-blue: #87cefa; /* Light Sky Blue */

  /* Status Colors */
  --success: #00ff7f; /* Spring Green - Alien Tech Green */
  --success-light: #7fff00; /* Chartreuse */
  --success-dark: #008000; /* Dark Green */
  --success-bg-subtle: rgba(0, 255, 127, 0.15);

  --error: #ff4500; /* OrangeRed - Warning Signal */
  --error-light: #ff6347; /* Tomato */
  --error-dark: #cc0000; /* Dark Red */
  --error-bg-subtle: rgba(255, 69, 0, 0.15);

  /* Difficulty Colors - Default (Beginner - "Stardust Explorer") */
  --difficulty-primary: var(--nebula-blue); /* Light Sky Blue */
  --difficulty-secondary: #4682b4; /* Steel Blue */
  --difficulty-accent: var(--star-yellow); /* Pale Goldenrod */
  --difficulty-bg: linear-gradient(135deg, #0a192f, #172a45, #030c1a); /* Deep Blue Space */
  --difficulty-primary-rgb: 135, 206, 250;
  --difficulty-secondary-rgb: 70, 130, 180;
  --difficulty-accent-rgb: 240, 230, 140;
}

/* Intermediate Theme - "Nebula Navigator" */
.difficulty-intermediate {
  --difficulty-primary: var(--nebula-pink); /* Orchid Pink */
  --difficulty-secondary: #ba55d3; /* Medium Orchid */
  --difficulty-accent: #ff00ff; /* Magenta */
  --difficulty-bg: linear-gradient(135deg, #2a003a, #4a005a, #6a007a); /* Purple Nebula */
  --difficulty-primary-rgb: 218, 112, 214;
  --difficulty-secondary-rgb: 186, 85, 211;
  --difficulty-accent-rgb: 255, 0, 255;
}

/* Advanced Theme - "Cosmic Conqueror" */
.difficulty-advanced {
  --difficulty-primary: #ff4500; /* OrangeRed - Supernova */
  --difficulty-secondary: #ff6347; /* Tomato */
  --difficulty-accent: #ffd700; /* Gold - Distant Galaxy */
  --difficulty-bg: linear-gradient(135deg, #3d0c02, #6b1703, #8f2004); /* Fiery Cosmos */
  --difficulty-primary-rgb: 255, 69, 0;
  --difficulty-secondary-rgb: 255, 99, 71;
  --difficulty-accent-rgb: 255, 215, 0;
}

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

body {
  font-family: "Exo 2", sans-serif;
  background: var(--bg-dark) url('https://www.transparenttextures.com/patterns/stardust.png'); /* Subtle stardust texture */
  background-attachment: fixed;
  background-size: cover; /* Ensure the gradient covers the whole page */
  color: var(--text-light);
  line-height: 1.6;
  min-height: 100vh;
  padding: 20px;
  overflow-x: hidden;
  transition: background 0.8s ease;
  position: relative; /* For pseudo-elements if needed */
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(160deg, rgba(13, 2, 33, 0.35) 0%, rgba(74, 26, 126, 0.18) 50%, rgba(0, 0, 0, 0.3) 100%),
              radial-gradient(ellipse at top left, rgba(255, 0, 255, 0.12), transparent 50%),
              radial-gradient(ellipse at bottom right, rgba(135, 206, 250, 0.12), transparent 50%);
  background-blend-mode: screen, difference;
  z-index: -1; /* Behind all content */
  animation: cosmicShift 60s infinite alternate;
}

@keyframes cosmicShift {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

header {
  text-align: center;
  margin-bottom: 30px;
}

h1 {
  font-size: 3rem; /* Slightly larger */
  margin-bottom: 10px;
  background: linear-gradient(45deg,
      var(--nebula-pink),
      var(--nebula-blue),
      var(--star-yellow),
      var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Dark shadow for visibility */
  filter: drop-shadow(0 0 15px rgba(var(--accent-rgb, 255, 0, 255), 0.6));
  transition: filter 0.5s ease, text-shadow 0.5s ease;
  animation: pulseText 3s infinite alternate;
}

@keyframes pulseText {
  0% { filter: drop-shadow(0 0 10px rgba(var(--accent-rgb, 255, 0, 255), 0.5)); }
  100% { filter: drop-shadow(0 0 20px rgba(var(--accent-rgb, 255, 0, 255), 0.8)); }
}

.subtitle {
  font-size: 1rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

.player-name-highlight {
  color: var(--star-yellow);
  font-weight: 700;
  text-shadow: 0 0 5px var(--star-yellow);
}

#sound-controls {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.sound-btn {
  padding: 8px 15px;
  font-size: 0.9rem;
  background: rgba(var(--nebula-blue-rgb, 135, 206, 250), 0.2); /* Themed button */
  color: var(--text-light);
  border: 1px solid var(--nebula-blue);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Exo 2", sans-serif;
  text-shadow: 0 0 3px rgba(var(--nebula-blue-rgb, 135, 206, 250), 0.5);
}

.sound-btn:hover {
  background: rgba(var(--nebula-blue-rgb, 135, 206, 250), 0.4);
  border-color: var(--star-yellow);
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(var(--nebula-blue-rgb, 135, 206, 250), 0.5);
}

.sound-btn.active {
  background: var(--nebula-blue);
  color: var(--primary);
  border-color: var(--star-yellow);
  box-shadow: 0 0 15px var(--nebula-blue);
}

.game-area {
  background: rgba(var(--primary-rgb, 13, 2, 33), 0.85); /* Deep space color */
  border-radius: 20px; /* More rounded */
  padding: 30px; /* More padding */
  box-shadow: 0 0 30px rgba(var(--accent-rgb, 255, 0, 255), 0.3),
              inset 0 0 15px rgba(var(--nebula-blue-rgb, 135, 206, 250), 0.2); /* Cosmic glow */
  margin-bottom: 30px;
  position: relative;
  border: 1px solid var(--secondary); /* Cosmic purple border */
  transition: border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  backdrop-filter: blur(5px); /* Frosted glass effect */
}

.game-area h2 {
  margin-bottom: 20px;
  color: var(--nebula-blue); /* Bright blue for titles */
  transition: color 0.5s ease;
  font-size: 1.8rem; /* Slightly larger h2 */
  text-shadow: 0 0 8px var(--nebula-blue);
}

.restart-button {
  position: fixed;
  top: 25px;
  right: 25px;
  background: linear-gradient(135deg, var(--secondary), var(--accent));
  color: var(--text-light);
  border: none;
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease, transform 0.2s ease-out;
  font-family: "Exo 2", sans-serif;
  display: flex;
  align-items: center;
  z-index: 1000; /* Ensure it's on top */
  box-shadow: 0 5px 15px rgba(var(--accent-rgb, 255, 0, 255), 0.4);
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.restart-button:hover {
  background: linear-gradient(135deg, var(--accent), var(--secondary));
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb, 255, 0, 255), 0.6);
}

.restart-button-icon {
  margin-right: 7px;
}

.career-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.career-card {
  background: rgba(var(--primary-light-rgb, 38, 15, 71), 0.5); /* Darker, spacey */
  border-radius: 12px;
  padding: 18px 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid var(--secondary); /* Cosmic purple border */
  position: relative;
  backdrop-filter: blur(3px);
}

.career-card:hover,
.career-card.selected {
  background: rgba(var(--accent-rgb, 255, 0, 255), 0.2);
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb, 255, 0, 255), 0.4);
  border-color: var(--accent); /* Magenta border for selected */
}

.career-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  color: var(--nebula-blue); /* Bright icon color */
  text-shadow: 0 0 8px var(--nebula-blue);
}

.high-score-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: linear-gradient(45deg, var(--star-yellow), var(--nebula-pink));
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 10px;
  opacity: 1;
  box-shadow: 0 0 5px var(--star-yellow);
}

.difficulty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.difficulty-card {
  background: rgba(var(--primary-light-rgb, 38, 15, 71), 0.6); /* Darker, spacey */
  border-radius: 18px;
  padding: 30px 25px;
  cursor: pointer;
  text-align: center;
  transition: all 0.4s ease;
  border: 2px solid var(--secondary); /* Default border */
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.difficulty-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.difficulty-card.beginner::before {
  background: linear-gradient(135deg, rgba(var(--difficulty-primary-rgb), 0.3), rgba(var(--difficulty-secondary-rgb), 0.3));
}

.difficulty-card.intermediate::before {
  background: linear-gradient(135deg, rgba(var(--difficulty-primary-rgb), 0.3), rgba(var(--difficulty-secondary-rgb), 0.3));
}

.difficulty-card.advanced::before {
  background: linear-gradient(135deg, rgba(var(--difficulty-primary-rgb), 0.3), rgba(var(--difficulty-secondary-rgb), 0.3));
}

.difficulty-card:hover::before,
.difficulty-card.selected::before {
  opacity: 1;
}

.difficulty-card:hover,
.difficulty-card.selected {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 10px 30px rgba(var(--accent-rgb, 255,0,255), 0.3); /* Dynamic shadow based on theme */
}

.difficulty-card.beginner:hover,
.difficulty-card.beginner.selected {
  border-color: var(--difficulty-primary); /* Use the theme's primary color */
}

.difficulty-card.intermediate:hover,
.difficulty-card.intermediate.selected {
  border-color: var(--difficulty-primary); /* Use the theme's primary color */
}

.difficulty-card.advanced:hover,
.difficulty-card.advanced.selected {
  border-color: var(--difficulty-primary); /* Use the theme's primary color */
}

.difficulty-icon {
  font-size: 3rem;
  margin-bottom: 18px;
  text-shadow: 0 0 10px currentColor; /* Icon glow */
}

.difficulty-name {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.difficulty-card.beginner .difficulty-name {
  color: var(--difficulty-primary);
  text-shadow: 0 0 5px var(--difficulty-primary);
}

.difficulty-card.intermediate .difficulty-name {
  color: var(--difficulty-primary);
  text-shadow: 0 0 5px var(--difficulty-primary);
}

.difficulty-card.advanced .difficulty-name {
  color: var(--difficulty-primary);
  text-shadow: 0 0 5px var(--difficulty-primary);
}

.difficulty-description {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 15px;
  line-height: 1.4;
}

.difficulty-stats {
  background: rgba(var(--primary-rgb, 13,2,33), 0.7); /* Darker, consistent with game area */
  border-radius: 10px;
  padding: 12px;
  font-size: 0.85rem;
  opacity: 0.9;
  border: 1px solid rgba(var(--nebula-blue-rgb, 135,206,250), 0.3);
}

.btn {
  background: linear-gradient(45deg, var(--secondary), var(--accent)); /* Cosmic gradient */
  color: var(--text-light);
  border: none;
  padding: 14px 28px; /* Slightly larger */
  font-size: 1.05rem;
  font-weight: 700; /* Bolder */
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease, transform 0.2s ease-out;
  font-family: "Exo 2", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px; /* More spacing */
  box-shadow: 0 4px 12px rgba(var(--accent-rgb, 255,0,255), 0.3);
  text-shadow: 0 0 5px rgba(0,0,0,0.4);
}

.btn:hover {
  transform: translateY(-4px) scale(1.05); /* More pronounced hover */
  box-shadow: 0 7px 20px rgba(var(--accent-rgb, 255,0,255), 0.5);
}

.btn-secondary {
  background: linear-gradient(45deg, var(--nebula-blue), var(--secondary)); /* Different gradient for secondary */
}

.btn-secondary:hover {
  background: linear-gradient(45deg, var(--secondary), var(--nebula-blue));
  box-shadow: 0 7px 20px rgba(var(--nebula-blue-rgb, 135,206,250), 0.5);
}

.trivia-container { display: none; }
.difficulty-container { display: none; }

/* Enhanced Quiz Header - Compact Design */
.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: rgba(var(--primary-rgb, 13,2,33), 0.8);
  border-bottom: 2px solid var(--accent);
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  min-height: 60px;
}

.quiz-title {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 700;
  background: rgba(var(--secondary-rgb, 74,26,126), 0.3);
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  color: var(--text-light);
  text-shadow: 0 0 5px var(--accent);
  flex-shrink: 0;
}

.quiz-title-icon {
  margin-right: 10px;
  font-size: 1.6rem;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent);
}

.quiz-career-name {
  color: var(--nebula-blue);
  font-weight: 700;
  text-shadow: 0 0 5px var(--nebula-blue);
}

/* Compact Stats Layout */
.quiz-stats-compact {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.stat-group {
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(var(--primary-light-rgb, 38,15,71), 0.3);
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid rgba(var(--secondary-rgb, 74,26,126), 0.5);
}

.quiz-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-light);
  font-weight: 600;
  white-space: nowrap;
}

.quiz-stat .stat-icon {
  font-size: 0.9em;
  opacity: 0.9;
}

/* Score gets special treatment */
.quiz-stat.score-main {
  background: rgba(var(--star-yellow-rgb, 240,230,140), 0.2);
  padding: 10px 16px;
  border-radius: 20px;
  border: 1px solid var(--star-yellow);
  font-size: 1rem;
  font-weight: 700;
  color: var(--star-yellow);
  text-shadow: 0 0 5px var(--star-yellow);
  gap: 6px;
}

.quiz-stat.score-main .stat-icon {
  color: var(--star-yellow);
  opacity: 1;
  font-size: 1.1em;
}

/* Hover effects for stat groups */
.stat-group:hover {
  background: rgba(var(--secondary-rgb, 74,26,126), 0.4);
  border-color: var(--accent);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

.quiz-stat.score-main:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 12px rgba(var(--star-yellow-rgb, 240,230,140), 0.4);
  transition: all 0.3s ease;
}

/* Icon colors for different stats */
.quiz-stat.level .stat-icon { color: var(--nebula-blue); }
.quiz-stat.difficulty .stat-icon { color: var(--nebula-pink); }
.quiz-stat.correct .stat-icon { color: var(--success); }
.quiz-stat.multiplier .stat-icon { color: var(--accent); }


.level-indicator {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.level-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(var(--nebula-blue-rgb, 135,206,250), 0.3); /* Default dot color */
  margin: 0 6px; /* Slightly more margin */
  border: 1px solid var(--nebula-blue);
  transition: all 0.3s ease; /* Smooth transition for all properties */
  box-shadow: 0 0 5px rgba(var(--nebula-blue-rgb, 135,206,250), 0.3);
}

.level-dot.active {
  background: var(--accent); /* Magenta for active */
  border-color: var(--accent);
  transform: scale(1.3);
  box-shadow: 0 0 10px var(--accent);
}

.level-dot.completed {
  background: var(--success);
  border-color: var(--success-dark);
  box-shadow: 0 0 8px var(--success);
}
.level-dot.incorrect {
  background: var(--error);
  border-color: var(--error-dark);
  box-shadow: 0 0 8px var(--error);
}

/* Themed completed dots - using the general success color now, but can be re-added if specific theme colors are desired */
/* .difficulty-intermediate .level-dot.completed { background: var(--difficulty-primary); border-color: var(--difficulty-secondary); box-shadow: 0 0 8px var(--difficulty-primary); } */
/* .difficulty-advanced .level-dot.completed { background: var(--difficulty-primary); border-color: var(--difficulty-secondary); box-shadow: 0 0 8px var(--difficulty-primary); } */


.question-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.question-level {
  background: linear-gradient(45deg, var(--secondary), var(--accent)); /* Cosmic gradient */
  color: var(--text-light);
  padding: 6px 18px; /* Slightly more padding */
  border-radius: 25px;
  font-size: 0.95rem;
  margin-right: 12px;
  font-weight: 700; /* Bolder */
  box-shadow: 0 2px 5px rgba(var(--accent-rgb, 255,0,255), 0.3);
}
.question-icon { 
  font-size: 1.2rem;
  color: var(--nebula-blue); /* Bright blue for question icon */
  text-shadow: 0 0 5px var(--nebula-blue);
}

.question-text {
  font-size: 1.4rem; /* Slightly larger */
  font-weight: 600;
  margin-bottom: 30px; /* Increased margin */
  padding: 18px; /* More padding */
  background: rgba(var(--primary-light-rgb, 38,15,71), 0.4); /* Darker, themed */
  border-radius: 12px;
  border-left: 4px solid var(--nebula-blue); /* Accent line */
  color: var(--text-light);
  text-shadow: 0 0 3px rgba(var(--nebula-blue-rgb, 135,206,250), 0.3);
}

.question-loading {
  text-align: center;
  margin: 30px 0;
}

.loading-message {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 18px;
  color: var(--nebula-blue); /* Themed loading text */
  text-shadow: 0 0 5px var(--nebula-blue);
}

.loading-bar-container {
  width: 100%;
  height: 10px; /* Thicker bar */
  background: rgba(var(--secondary-rgb, 74,26,126), 0.3); /* Themed background */
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}

.loading-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--nebula-blue), var(--accent), var(--nebula-pink)); /* Cosmic gradient */
  border-radius: 5px;
  transition: width 3s cubic-bezier(0.25, 1, 0.5, 1); /* Smoother transition */
  box-shadow: 0 0 10px var(--accent);
}
#trivia-loading-bar.loading-bar { 
  animation: loading-pulse 2s infinite;
}


.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px; /* Increased gap */
}

.option-card {
  background: rgba(var(--primary-light-rgb, 38,15,71), 0.5); /* Darker, themed */
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  transition: all 0.3s ease, transform 0.2s ease-out;
  border: 1px solid var(--secondary); /* Cosmic purple border */
  display: flex;
  align-items: center;
  color: var(--text-light);
  position: relative;
  overflow: hidden; /* For pseudo-elements */
}

.option-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(45deg, rgba(var(--nebula-blue-rgb,135,206,250),0.1), rgba(var(--accent-rgb,255,0,255),0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.option-card:hover::before {
  opacity: 1;
}

.option-card > * { /* Ensure content is above pseudo-element */
  position: relative;
  z-index: 1;
}

.option-card:hover {
  background: rgba(var(--secondary-rgb, 74,26,126), 0.6); /* Hover with cosmic purple */
  border-color: var(--accent); /* Accent border on hover */
  transform: translateY(-4px) scale(1.02); /* More pronounced hover */
  box-shadow: 0 5px 15px rgba(var(--accent-rgb, 255,0,255), 0.3);
}

.option-card.correct {
  background: var(--success-bg-subtle); /* Keep subtle green */
  border-color: var(--success); /* Bright green border */
  box-shadow: 0 0 15px var(--success); /* Green glow */
}
.option-card.correct .option-icon,
.option-card.correct .option-text {
  color: var(--success-light);
  text-shadow: 0 0 5px var(--success-light);
}

.option-card.incorrect {
  background: var(--error-bg-subtle); /* Keep subtle red */
  border-color: var(--error); /* Bright red border */
  box-shadow: 0 0 15px var(--error); /* Red glow */
}
  .option-card.incorrect .option-icon,
.option-card.incorrect .option-text {
  color: var(--error-light);
  text-shadow: 0 0 5px var(--error-light);
}


/* Theme-specific correct option card styling */
/* Theme-specific correct option card styling - using general success for now */
/* .difficulty-intermediate .option-card.correct {
    background: rgba(var(--difficulty-primary-rgb), 0.2);
    border-color: var(--difficulty-primary);
    box-shadow: 0 0 12px rgba(var(--difficulty-primary-rgb), 0.4);
}
.difficulty-intermediate .option-card.correct .option-icon,
.difficulty-intermediate .option-card.correct .option-text { color: var(--difficulty-primary); } */

/* .difficulty-advanced .option-card.correct {
    background: rgba(var(--difficulty-primary-rgb), 0.2);
    border-color: var(--difficulty-primary);
    box-shadow: 0 0 12px rgba(var(--difficulty-primary-rgb), 0.4);
}
.difficulty-advanced .option-card.correct .option-icon,
.difficulty-advanced .option-card.correct .option-text { color: var(--difficulty-primary); } */


.option-card.disabled {
  opacity: 0.6;
  cursor: default;
}
.option-card.disabled:hover {
    transform: none; /* No hover effect when disabled */
}

.option-icon {
  font-size: 1.5rem;
  margin-right: 15px; /* Increased margin */
  color: var(--nebula-blue); /* Default icon color */
}
.option-text {
    flex-grow: 1; /* Ensure text takes available space */
}

.result-container {
  text-align: center;
  display: none;
  background: rgba(var(--primary-rgb, 13,2,33), 0.9); /* Darker, more opaque */
  border-radius: 25px; /* More rounded */
  padding: 45px; /* More padding */
  position: relative;
  overflow: hidden;
  animation: cosmicPulse 12s infinite alternate; /* Slower pulse */
  box-shadow: 0 0 40px rgba(var(--accent-rgb, 255,0,255), 0.3), /* Accent glow */
    0 0 80px rgba(var(--nebula-blue-rgb, 135,206,250), 0.2), /* Nebula glow */
    inset 0 0 20px rgba(var(--primary-light-rgb, 38,15,71), 0.5); /* Inner shadow */
  border: 2px solid var(--accent); /* Accent border */
  backdrop-filter: blur(8px); /* Stronger blur */
}

.result-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 15% 25%,
      rgba(var(--nebula-blue-rgb, 135,206,250), 0.15) 0%, /* Brighter nebula */
      transparent 60%),
    radial-gradient(circle at 85% 75%,
      rgba(var(--nebula-pink-rgb, 218,112,214), 0.15) 0%, /* Brighter pink nebula */
      transparent 60%);
  z-index: -1;
  animation: subtleShift 20s infinite alternate;
}

@keyframes subtleShift {
  0% { transform: translate(0,0) rotate(0deg); opacity: 0.8; }
  50% { transform: translate(5px, 5px) rotate(5deg); opacity: 1; }
  100% { transform: translate(0,0) rotate(0deg); opacity: 0.8; }
}

.result-icon {
  font-size: 4rem;
  margin-bottom: 25px;
  color: var(--accent); /* Accent color for result icon */
  text-shadow: 0 0 15px var(--accent);
  animation: iconPop 0.5s ease-out;
}

@keyframes iconPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.result-title {
  font-size: 2rem;
  margin-bottom: 15px;
  color: var(--nebula-blue); /* Nebula blue for title */
  text-shadow: 0 0 8px var(--nebula-blue);
}

.result-subtitle {
  font-size: 1.4rem;
  margin-bottom: 25px;
  color: var(--text-light);
  opacity: 0.95;
  font-weight: 600; /* Slightly bolder */
}

.result-message {
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.15rem; /* Slightly larger */
  line-height: 1.75;
  color: var(--text-light);
}

.career-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--bg-dark-rgb, 0,0,0), 0.98); /* Almost opaque black */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
  backdrop-filter: blur(10px); /* Strong blur for overlay */
}

.career-detail-overlay-content {
  background: rgba(var(--primary-rgb, 13,2,33), 0.9); /* Deep space color */
  border: 1px solid var(--accent); /* Accent border */
  border-radius: 20px; /* More rounded */
  padding: 35px; /* More padding */
  max-width: 650px; /* Slightly wider */
  width: 90%;
  text-align: center;
  box-shadow: 0 0 40px rgba(var(--accent-rgb, 255,0,255), 0.4); /* Accent glow */
  color: var(--text-light);
}

.career-detail-overlay-content .info-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.career-detail-overlay-content .info-icon {
  font-size: 4rem; /* Larger icon */
  margin-bottom: 18px;
  color: var(--accent); /* Accent color for icon */
  text-shadow: 0 0 10px var(--accent);
}

.career-detail-overlay-content .info-title {
  font-size: 2.2rem; /* Larger title */
  font-weight: 700;
  color: var(--nebula-blue); /* Nebula blue for title */
  margin-bottom: 18px;
  text-shadow: 0 0 8px var(--nebula-blue);
}

.career-detail-overlay-content .info-description {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 30px;
  line-height: 1.7;
}

.career-stats {
  background: rgba(var(--primary-light-rgb, 38,15,71), 0.5); /* Darker, themed */
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Adjusted minmax */
  gap: 18px;
  border: 1px solid var(--secondary); /* Themed border */
}

.career-stat { /* This is for career detail modal, not quiz hud */
  text-align: left;
  padding: 12px;
  background: rgba(var(--secondary-rgb, 74,26,126), 0.2); /* Themed stat item */
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb, 255,0,255), 0.3);
}

.career-stat-label {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: 4px;
}

.career-stat-value {
  font-size: 1.15rem;
  font-weight: 700; /* Bolder */
  color: var(--star-yellow); /* Star yellow for values */
  text-shadow: 0 0 5px var(--star-yellow);
}

.global-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px; /* Increased margin */
  padding: 22px;
  background: rgba(var(--primary-light-rgb, 38,15,71), 0.3); /* Darker, themed */
  border: 1px dashed var(--accent); /* Accent dashed border */
  border-radius: 12px;
  margin-top: 25px;
}
.global-stats h4 { /* Assuming this is added in JS or static */
    color: var(--nebula-blue); /* Nebula blue for global stats title */
    margin-bottom: 12px;
    font-size: 1.3rem;
    text-shadow: 0 0 5px var(--nebula-blue);
}
.global-stats p {
  margin: 8px 0;
  font-size: 0.95rem;
  opacity: 0.9;
}


.career-detail-overlay-buttons {
  display: flex;
  justify-content: space-around;
  gap: 15px;
  margin-top: 20px;
}

.btn-overlay-back {
  background: linear-gradient(45deg, var(--secondary), var(--nebula-blue)); /* Themed gradient */
}

.btn-overlay-back:hover {
  background: linear-gradient(45deg, var(--nebula-blue), var(--secondary)) !important;
  box-shadow: 0 7px 20px rgba(var(--nebula-blue-rgb, 135,206,250), 0.5) !important;
}

/* Enhanced Feedback Modal */
.feedback-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--bg-dark-rgb, 0,0,0), 0.97); /* Almost opaque black */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 20px;
  overflow-y: auto;
  backdrop-filter: blur(12px); /* Stronger blur for feedback */
}

.feedback-modal-content {
  background: rgba(var(--primary-rgb, 13,2,33), 0.92); /* Deep space color */
  border: 1px solid var(--accent); /* Accent border */
  border-radius: 20px;
  padding: 35px;
  max-width: 600px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 45px rgba(var(--accent-rgb, 255,0,255), 0.45); /* Accent glow */
  color: var(--text-light);
}

.feedback-modal-content .feedback-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.feedback-modal-content .feedback-icon {
  font-size: 2.5rem; /* Larger icon */
  margin-right: 18px;
  text-shadow: 0 0 8px currentColor; /* Icon glow */
}

.feedback-modal-content .feedback-title {
  font-size: 1.8rem; /* Larger title */
  font-weight: 700;
}

.feedback-score-info {
  background: rgba(var(--primary-light-rgb, 38,15,71), 0.6); /* Darker, themed */
  border-radius: 15px;
  padding: 25px;
  margin: 0 auto 30px auto;
  max-width: 90%;
  border: 1px solid var(--secondary); /* Themed border */
}

.feedback-score-value {
  font-size: 2.8rem; /* Much larger score */
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--star-yellow); /* Star yellow for score */
  text-shadow: 0 0 10px var(--star-yellow);
}
.feedback-modal-content .feedback-header.correct .feedback-score-value {
  color: var(--success);
  text-shadow: 0 0 10px var(--success);
}
.feedback-modal-content .feedback-header.incorrect .feedback-score-value {
  color: var(--error);
  text-shadow: 0 0 10px var(--error);
}

/* Theme specific score colors in feedback if needed */
/* Theme specific score colors in feedback - using general success/error for now */
/* .difficulty-intermediate .feedback-modal-content .feedback-header.correct .feedback-score-value { color: var(--difficulty-primary); text-shadow: 0 0 10px var(--difficulty-primary); } */
/* .difficulty-advanced .feedback-modal-content .feedback-header.correct .feedback-score-value { color: var(--difficulty-primary); text-shadow: 0 0 10px var(--difficulty-primary); } */


.feedback-time {
  font-size: 1rem;
  margin-bottom: 15px;
  opacity: 0.8;
}

.feedback-time-value {
  font-weight: 700;
  color: var(--text-light);
}

.feedback-points-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  font-size: 0.9rem;
  opacity: 0.95; /* More visible */
  padding: 15px;
  background: rgba(var(--secondary-rgb, 74,26,126), 0.25); /* Themed background */
  border-radius: 10px;
  margin-top: 12px;
  border: 1px solid rgba(var(--accent-rgb, 255,0,255), 0.2);
}
.feedback-points-breakdown span {
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(var(--primary-light-rgb, 38,15,71), 0.4); /* Darker item background */
    text-align: center;
    border: 1px solid rgba(var(--nebula-blue-rgb, 135,206,250), 0.3);
}
  .feedback-points-breakdown span:nth-child(4) { /* Multiplier */
    font-weight: bold;
    color: var(--accent); /* Accent color for multiplier */
    text-shadow: 0 0 5px var(--accent);
}


.feedback-text { /* Tidbit */
  margin: 25px 0;
  font-size: 1.05rem;
  opacity: 1;
  line-height: 1.75;
  padding: 20px;
  background: rgba(var(--primary-light-rgb, 38,15,71), 0.5); /* Darker, themed */
  border-left: 5px solid var(--accent); /* Accent border */
  border-radius: 0 12px 12px 0;
  color: var(--text-light);
  font-style: normal;
  box-shadow: inset 3px 0 8px rgba(var(--accent-rgb, 255,0,255), 0.2);
}

.feedback-modal-content .btn { /* Primary button in feedback modal */
  margin-top: 25px; 
  padding: 12px 28px; 
  font-size: 1.1rem;
  width: 100%; /* Make primary button full width */
  box-sizing: border-box;
}

/* NEW STYLE for Ghost Link Button */
.btn-ghost-link {
  background: transparent;
  border: 1px solid var(--nebula-blue); /* Nebula blue border */
  color: var(--nebula-blue); /* Nebula blue text */
  opacity: 0.75; /* Muted appearance */
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 500; /* Regular weight */
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Exo 2", sans-serif;
  text-transform: none; /* Links are not typically uppercase */
  letter-spacing: 0.2px;
  display: inline-flex; /* For icon alignment */
  align-items: center;
  justify-content: center; /* Center content */
  gap: 8px; /* Space between icon and text */
  margin-top: 15px; /* Space from the primary button */
  width: 100%; /* Make ghost button full width for consistency */
  box-sizing: border-box;
}

.btn-ghost-link:hover {
  background: rgba(var(--nebula-blue-rgb, 135,206,250), 0.2); /* Nebula blue hover bg */
  color: var(--star-yellow); /* Star yellow text on hover */
  border-color: var(--star-yellow); /* Star yellow border on hover */
  opacity: 1; /* Full opacity on hover */
  transform: translateY(-2px) scale(1.03); /* Slight lift and scale */
  box-shadow: 0 0 10px rgba(var(--nebula-blue-rgb, 135,206,250), 0.5);
}
/* END NEW STYLE */
/* Secondary Action Chevron Button (e.g., Back to Careers) */
.btn-secondary-action-chevron {
  background: transparent;
  border: 1px solid var(--secondary); /* Cosmic purple border */
  color: var(--secondary); /* Cosmic purple text */
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Exo 2", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-secondary-action-chevron:hover {
  background: rgba(var(--secondary-rgb, 74,26,126), 0.2); /* Cosmic purple hover bg */
  color: var(--accent); /* Accent text on hover */
  border-color: var(--accent); /* Accent border on hover */
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 8px rgba(var(--accent-rgb, 255,0,255), 0.4);
}

/* Chevron via CSS pseudo-element */
.btn-secondary-action-chevron.css-chevron::before {
  content: '<';
  font-family: monospace;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1;
}


.feedback-modal-content .feedback-header.correct .feedback-icon,
.feedback-modal-content .feedback-header.correct .feedback-title {
  color: var(--success);
  text-shadow: 0 0 8px var(--success);
}
/* .difficulty-intermediate .feedback-modal-content .feedback-header.correct .feedback-icon,
.difficulty-intermediate .feedback-modal-content .feedback-header.correct .feedback-title { color: var(--difficulty-primary); text-shadow: 0 0 8px var(--difficulty-primary); }
.difficulty-advanced .feedback-modal-content .feedback-header.correct .feedback-icon,
.difficulty-advanced .feedback-modal-content .feedback-header.correct .feedback-title { color: var(--difficulty-primary); text-shadow: 0 0 8px var(--difficulty-primary); } */


.feedback-modal-content .feedback-header.incorrect .feedback-icon,
.feedback-modal-content .feedback-header.incorrect .feedback-title {
  color: var(--error);
  text-shadow: 0 0 8px var(--error);
}


@keyframes screenShake {
  0%,100% { transform: translate(0, 0) rotate(0deg); }
  10%,30%,50%,70%,90% { transform: translate(-3px, -2px) rotate(-0.5deg); }
  20%,40%,60%,80% { transform: translate(2px, 3px) rotate(0.5deg); }
}

.screen-shake-effect {
  animation: screenShake 0.35s linear;
}

@keyframes elementPop {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.element-pop-effect {
  animation: elementPop 0.3s ease-out;
}

.particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
  transition: transform 0.8s cubic-bezier(0.17, 0.67, 0.83, 0.67),
    opacity 0.8s ease-out;
  z-index: 9999;
  will-change: transform, opacity;
}

.particle.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.particle.shard { border-radius: 2px; }
.particle.sparkle {}

@keyframes pop-and-fade {
  0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 0; }
  15% { transform: translate(0, 0) scale(1.2) rotate(0deg); opacity: 1; }
  100% { opacity: 0; transform: translate(var(--end-x), var(--end-y)) scale(0.1) rotate(var(--rotation)); }
}

.name-input-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--bg-dark-rgb, 0,0,0), 0.97); /* Almost opaque black */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(10px); /* Strong blur */
}

.name-input-content {
  background: rgba(var(--primary-rgb, 13,2,33), 0.92); /* Deep space color */
  border: 1px solid var(--accent); /* Accent border */
  border-radius: 20px; /* More rounded */
  padding: 35px; /* More padding */
  max-width: 550px; /* Slightly wider */
  width: 90%;
  text-align: center;
  box-shadow: 0 0 40px rgba(var(--accent-rgb, 255,0,255), 0.4); /* Accent glow */
  color: var(--text-light);
}

.name-input-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.name-input-icon {
  font-size: 4rem; /* Larger icon */
  margin-bottom: 18px;
  color: var(--accent); /* Accent color for icon */
  text-shadow: 0 0 10px var(--accent);
}

.name-input-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--nebula-blue); /* Nebula blue for title */
  margin-bottom: 18px;
  text-shadow: 0 0 8px var(--nebula-blue);
}

.name-input-text {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 25px;
  line-height: 1.7;
}

.player-name-input ,
.player-email-input{
  width: 100%;
  padding: 12px 15px;
  font-size: 1.15rem; /* Slightly larger */
  background: rgba(var(--primary-light-rgb, 38,15,71), 0.6); /* Darker, themed */
  border: 1px solid var(--secondary); /* Cosmic purple border */
  border-radius: 10px; /* More rounded */
  color: var(--text-light);
  margin-bottom: 30px; /* More margin */
  font-family: "Exo 2", sans-serif;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}

.player-name-input:focus {
  outline: none;
  border-color: var(--accent); /* Accent border on focus */
  box-shadow: 0 0 12px rgba(var(--accent-rgb, 255,0,255), 0.6); /* Accent glow on focus */
}

.name-input-buttons {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.share-container {
  background: rgba(var(--primary-light-rgb, 38,15,71), 0.7); /* Darker, themed */
  border-radius: 15px; /* More rounded */
  padding: 25px;
  margin: 30px auto;
  max-width: 550px; /* Slightly wider */
  border: 1px solid var(--secondary); /* Cosmic purple border */
  box-shadow: 0 5px 15px rgba(var(--secondary-rgb, 74,26,126), 0.2);
}

.share-text {
  font-size: 1rem;
  opacity: 0.85;
  margin-bottom: 15px; /* Increased margin */
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, rgba(var(--secondary-rgb, 74,26,126),0.3), rgba(var(--accent-rgb, 255,0,255),0.2)); /* Gradient button */
  border: 1px solid var(--accent); /* Accent border */
  border-radius: 12px; /* More rounded */
  padding: 14px 20px;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.3s ease, transform 0.2s ease-out;
  flex-grow: 1;
  text-shadow: 0 0 3px rgba(0,0,0,0.4);
}

.share-btn:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb, 255,0,255),0.3), rgba(var(--secondary-rgb, 74,26,126),0.3));
  transform: translateY(-4px) scale(1.07); /* More pronounced hover */
  border-color: var(--star-yellow); /* Star yellow border on hover */
  box-shadow: 0 0 12px rgba(var(--accent-rgb, 255,0,255), 0.4);
}

.share-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
  color: var(--nebula-blue); /* Nebula blue for icon */
  text-shadow: 0 0 5px var(--nebula-blue);
}

.share-label {
  font-size: 0.85rem;
}

.result-container .high-score-badge {
  background: linear-gradient(45deg, var(--star-yellow), var(--nebula-pink)); /* Starry gradient */
  color: var(--primary); /* Dark text for contrast */
  padding: 12px 22px;
  border-radius: 12px;
  display: inline-block;
  margin: 25px 0;
  animation: glowingBadge 2.5s infinite alternate; /* Unique animation */
  position: relative;
  font-size: 1.1rem;
  border: none; /* Remove border, rely on gradient and shadow */
  font-weight: 700;
  text-shadow: 0 0 3px rgba(var(--primary-rgb,13,2,33),0.3);
}

@keyframes glowingBadge {
  0% { box-shadow: 0 0 8px var(--star-yellow), 0 0 12px var(--nebula-pink); transform: scale(1); }
  100% { box-shadow: 0 0 15px var(--star-yellow), 0 0 25px var(--nebula-pink); transform: scale(1.05); }
}

.result-container .high-score-info {
  padding: 12px 18px;
  border-radius: 12px;
  display: inline-block;
  margin: 25px 0;
  color: var(--nebula-blue); /* Nebula blue for info text */
  background: rgba(var(--nebula-blue-rgb, 135,206,250),0.15); /* Nebula blue subtle bg */
  border: 1px solid var(--nebula-blue);
  font-size: 1rem;
  font-weight: 600;
}


.trophy {
  font-size: 1.5rem;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  animation: trophyBounce 0.8s infinite alternate ease-in-out; /* Smoother bounce */
  color: var(--star-yellow); /* Star yellow trophy */
  text-shadow: 0 0 8px var(--star-yellow);
}

@keyframes trophyBounce {
  from { transform: translateY(0) rotate(-5deg); }
  to { transform: translateY(-8px) rotate(5deg); }
}

/* Combined glowing and glowingBadge, removed redundant glowing */

/* Combined bounce and trophyBounce, removed redundant bounce */

.result-score-panel {
  display: flex;
  justify-content: center;
  align-items: baseline; /* Align items by baseline */
  gap: 30px;
  margin: 30px 0; /* Increased margin */
  padding: 20px; /* More padding */
  background: rgba(var(--primary-light-rgb, 38,15,71), 0.4); /* Darker, themed */
  border-radius: 15px; /* More rounded */
  border: 1px solid var(--secondary); /* Themed border */
}

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

.score-value {
  font-size: 2.3rem; /* Slightly larger */
  font-weight: 700;
  color: var(--nebula-blue); /* Nebula blue for score values */
  line-height: 1.1;
  text-shadow: 0 0 5px var(--nebula-blue);
}

.score-value.total-score {
  font-size: 3.5rem; /* Larger total score */
  color: var(--star-yellow); /* Star yellow for total score */
  text-shadow: 0 0 10px var(--star-yellow);
}

.score-label {
  font-size: 0.9rem; /* Slightly larger label */
  opacity: 0.85;
  margin-top: 8px; /* Increased margin */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-icon-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 20px auto;
}

.result-icon-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed var(--accent); /* Dashed accent orbits */
  border-radius: 50%;
  opacity: 0.6;
  box-shadow: 0 0 10px rgba(var(--accent-rgb, 255,0,255), 0.3);
}

.result-icon-orbit:nth-child(1) {
  width: 140px;
  height: 140px;
  animation: orbit 8s linear infinite;
}

.result-icon-orbit:nth-child(2) {
  width: 180px;
  height: 180px;
  animation: orbit 12s linear infinite reverse;
}

@keyframes orbit {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes cosmicPulse { /* Enhanced pulse for result container */
  0% {
    box-shadow: 0 0 35px rgba(var(--accent-rgb, 255,0,255), 0.25),
                0 0 70px rgba(var(--nebula-blue-rgb, 135,206,250), 0.2),
                inset 0 0 15px rgba(var(--primary-light-rgb, 38,15,71), 0.4),
                0 0 15px var(--accent);
  }
  100% {
    box-shadow: 0 0 50px rgba(var(--accent-rgb, 255,0,255), 0.35),
                0 0 90px rgba(var(--nebula-blue-rgb, 135,206,250), 0.3),
                inset 0 0 25px rgba(var(--primary-light-rgb, 38,15,71), 0.6),
                0 0 25px var(--accent);
  }
}

.cosmic-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  overflow: hidden;
}

.star { 
  position: absolute;
  background-color: white;
  border-radius: 50%;
  opacity: 0.6;
  animation: twinkle 4s infinite;
}

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

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


@media (max-width: 768px) {
  body { padding: 8px; }
  .container { padding: 8px; }
  
  /* Header optimizations */
  h1 { font-size: 1.6rem; margin-bottom: 8px; }
  .subtitle { font-size: 0.9rem; margin-bottom: 15px; }
  
  /* Sound controls */
  #sound-controls { margin-top: 10px; gap: 8px; }
  .sound-btn { padding: 6px 12px; font-size: 0.8rem; }
  
  /* Game area */
  .game-area { padding: 20px; margin-bottom: 20px; }
  .game-area h2 { font-size: 1.4rem; margin-bottom: 15px; }
  
  /* Restart button */
  .restart-button {
    top: 15px;
    right: 15px;
    padding: 8px 16px;
    font-size: 0.9rem;
  }
  
  /* Quiz header - Compact responsive */
  .quiz-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    margin-bottom: 15px;
  }
  .quiz-title {
    justify-content: center;
    font-size: 1.1rem;
    padding: 8px 14px;
  }
  .quiz-title-icon { font-size: 1.4rem; margin-right: 8px; }
  
  /* Compact stats responsive */
  .quiz-stats-compact {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .stat-group {
    justify-content: center;
    padding: 6px 10px;
  }
  .quiz-stat {
    font-size: 0.8rem;
  }
  .quiz-stat.score-main {
    font-size: 0.95rem;
    padding: 8px 14px;
    align-self: center;
  }

  /* Career selection */
  .career-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
  }
  .career-card {
    padding: 12px 8px;
    border-radius: 10px;
  }
  .career-icon { font-size: 2rem; margin-bottom: 8px; }
  .career-card h3 { font-size: 0.9rem; }
  
  /* Difficulty selection */
  .difficulty-grid { grid-template-columns: 1fr; gap: 15px; }
  .difficulty-card { padding: 20px 18px; }
  .difficulty-icon { font-size: 2.5rem; margin-bottom: 12px; }
  .difficulty-name { font-size: 1.2rem; margin-bottom: 8px; }
  .difficulty-description { font-size: 0.85rem; margin-bottom: 12px; }
  .difficulty-stats { padding: 10px; font-size: 0.8rem; }
  
  /* Level indicator */
  .level-indicator { margin-bottom: 15px; }
  .level-dot { width: 10px; height: 10px; margin: 0 4px; }
  
  /* Question */
  .question-header { margin-bottom: 12px; }
  .question-level {
    padding: 5px 14px;
    font-size: 0.85rem;
    margin-right: 10px;
  }
  .question-icon { font-size: 1.1rem; }
  .question-text {
    font-size: 1rem;
    padding: 15px;
    margin-bottom: 20px;
  }
  
  /* Options */
  .options-grid { grid-template-columns: 1fr; gap: 10px; }
  .option-card { padding: 12px; }
  .option-icon { font-size: 1.3rem; margin-right: 12px; }
  .option-text { font-size: 0.95rem; }
  
  /* Buttons */
  .btn {
    padding: 10px 20px;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
  }
  .btn-secondary { padding: 10px 20px; font-size: 0.9rem; }
  
  /* Career detail overlay */
  .career-detail-overlay-content { padding: 20px; width: 95%; }
  .career-detail-overlay-content .info-icon { font-size: 3rem; }
  .career-detail-overlay-content .info-title { font-size: 1.6rem; }
  .career-detail-overlay-content .info-description { font-size: 0.95rem; }
  .career-stats { grid-template-columns: 1fr; gap: 12px; }
  .career-stat { padding: 10px; }
  .career-stat-label { font-size: 0.8rem; }
  .career-stat-value { font-size: 1rem; }
  .career-detail-overlay-buttons { flex-direction: column; gap: 10px; }
  .career-detail-overlay-buttons .btn { width: 100%; margin-bottom: 0; }
  
  /* Feedback modal */
  .feedback-modal-content { padding: 20px; width: 95%; }
  .feedback-modal-content .feedback-title { font-size: 1.3rem; }
  .feedback-modal-content .feedback-icon { font-size: 2rem; }
  .feedback-score-value { font-size: 2rem; }
  .feedback-time { font-size: 0.9rem; }
  .feedback-points-breakdown {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    font-size: 0.8rem;
    padding: 12px;
  }
  .feedback-text {
    font-size: 0.95rem;
    padding: 15px;
    margin: 20px 0;
  }
  .feedback-modal-content .btn { font-size: 1rem; padding: 10px 20px; }
  .feedback-modal-content .btn-ghost-link {
    font-size: 0.85rem;
    padding: 8px 15px;
  }

  /* Name input */
  .name-input-content { padding: 25px; width: 95%; }
  .name-input-icon { font-size: 3rem; margin-bottom: 15px; }
  .name-input-title { font-size: 1.5rem; margin-bottom: 15px; }
  .name-input-text { font-size: 0.95rem; margin-bottom: 20px; }
  .player-name-input {
    font-size: 1rem;
    padding: 10px 12px;
    margin-bottom: 20px;
  }
  .name-input-buttons { flex-direction: column; gap: 10px; }
  
  /* Share and results */
  .share-container { padding: 20px; margin: 20px auto; }
  .share-text { font-size: 0.9rem; margin-bottom: 12px; }
  .share-buttons { flex-wrap: wrap; gap: 10px; }
  .share-btn {
    flex: 1 1 calc(50% - 5px);
    padding: 12px 15px;
    min-width: 120px;
  }
  .share-icon { font-size: 1.5rem; margin-bottom: 6px; }
  .share-label { font-size: 0.8rem; }
  
  .result-container { padding: 30px; }
  .result-icon { font-size: 3rem; margin-bottom: 20px; }
  .result-title { font-size: 1.6rem; margin-bottom: 12px; }
  .result-subtitle { font-size: 1.2rem; margin-bottom: 20px; }
  .result-message { font-size: 1rem; margin-bottom: 25px; }
  .result-score-panel {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
    margin: 20px 0;
  }
  .score-value { font-size: 1.8rem; }
  .score-value.total-score { font-size: 2.2rem; }
  .score-label { font-size: 0.8rem; margin-top: 6px; }
  
  .result-container .high-score-badge {
    padding: 10px 18px;
    font-size: 1rem;
    margin: 20px 0;
  }
  .result-container .high-score-info {
    padding: 10px 15px;
    font-size: 0.9rem;
    margin: 20px 0;
  }
}

@media (max-width: 480px) {
  body { padding: 5px; }
  .container { padding: 5px; }
  
  /* Header */
  h1 { font-size: 1.4rem; margin-bottom: 6px; }
  .subtitle { font-size: 0.85rem; }
  
  /* Sound controls */
  .sound-btn { padding: 5px 10px; font-size: 0.75rem; }
  
  /* Game area */
  .game-area { padding: 15px; }
  .game-area h2 { font-size: 1.2rem; }
  
  /* Restart button */
  .restart-button {
    top: 10px;
    right: 10px;
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  
  /* Quiz header - Ultra compact for small screens */
  .quiz-header { padding: 10px; gap: 8px; }
  .quiz-title {
    font-size: 1rem;
    padding: 6px 12px;
  }
  .quiz-title-icon { font-size: 1.2rem; margin-right: 6px; }
  
  /* Ultra compact stats */
  .quiz-stats-compact {
    gap: 6px;
  }
  .stat-group {
    padding: 4px 8px;
  }
  .quiz-stat {
    font-size: 0.75rem;
  }
  .quiz-stat.score-main {
    font-size: 0.85rem;
    padding: 6px 12px;
  }
  
  /* Career selection */
  .career-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }
  .career-card { padding: 10px 6px; }
  .career-icon { font-size: 1.8rem; margin-bottom: 6px; }
  .career-card h3 { font-size: 0.8rem; line-height: 1.2; }
  
  /* Difficulty selection */
  .difficulty-card { padding: 18px 15px; }
  .difficulty-icon { font-size: 2.2rem; margin-bottom: 10px; }
  .difficulty-name { font-size: 1.1rem; margin-bottom: 6px; }
  .difficulty-description { font-size: 0.8rem; margin-bottom: 10px; }
  .difficulty-stats { padding: 8px; font-size: 0.75rem; }
  
  /* Level indicator */
  .level-dot { width: 8px; height: 8px; margin: 0 3px; }
  
  /* Question */
  .question-level {
    padding: 4px 12px;
    font-size: 0.8rem;
    margin-right: 8px;
  }
  .question-icon { font-size: 1rem; }
  .question-text {
    font-size: 0.9rem;
    padding: 12px;
    margin-bottom: 15px;
  }
  
  /* Options */
  .option-card { padding: 10px; }
  .option-icon { font-size: 1.2rem; margin-right: 10px; }
  .option-text { font-size: 0.9rem; }
  
  /* Buttons */
  .btn {
    padding: 8px 16px;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
  }
  
  /* Career detail overlay */
  .career-detail-overlay-content { padding: 15px; }
  .career-detail-overlay-content .info-icon { font-size: 2.5rem; }
  .career-detail-overlay-content .info-title { font-size: 1.4rem; }
  .career-detail-overlay-content .info-description { font-size: 0.9rem; }
  .career-stat { padding: 8px; }
  .career-stat-label { font-size: 0.75rem; }
  .career-stat-value { font-size: 0.95rem; }
  
  /* Feedback modal */
  .feedback-modal-content { padding: 15px; }
  .feedback-modal-content .feedback-title { font-size: 1.2rem; }
  .feedback-modal-content .feedback-icon { font-size: 1.8rem; }
  .feedback-score-value { font-size: 1.8rem; }
  .feedback-time { font-size: 0.85rem; }
  .feedback-points-breakdown {
    grid-template-columns: 1fr;
    gap: 4px;
    font-size: 0.75rem;
    padding: 10px;
  }
  .feedback-text {
    font-size: 0.9rem;
    padding: 12px;
    margin: 15px 0;
  }
  .feedback-modal-content .btn { font-size: 0.9rem; padding: 8px 16px; }
  .feedback-modal-content .btn-ghost-link {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
  
  /* Name input */
  .name-input-content { padding: 20px; }
  .name-input-icon { font-size: 2.5rem; margin-bottom: 12px; }
  .name-input-title { font-size: 1.3rem; margin-bottom: 12px; }
  .name-input-text { font-size: 0.9rem; margin-bottom: 18px; }
  .player-name-input {
    font-size: 0.95rem;
    padding: 8px 10px;
    margin-bottom: 18px;
  }
  
  /* Share and results */
  .share-container { padding: 15px; margin: 15px auto; }
  .share-text { font-size: 0.85rem; margin-bottom: 10px; }
  .share-btn {
    flex: 1 1 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .share-icon { font-size: 1.3rem; margin-bottom: 5px; }
  .share-label { font-size: 0.75rem; }
  
  .result-container { padding: 25px; }
  .result-icon { font-size: 2.5rem; margin-bottom: 15px; }
  .result-title { font-size: 1.4rem; margin-bottom: 10px; }
  .result-subtitle { font-size: 1.1rem; margin-bottom: 18px; }
  .result-message { font-size: 0.95rem; margin-bottom: 20px; }
  .result-score-panel { padding: 12px; margin: 15px 0; }
  .score-value { font-size: 1.6rem; }
  .score-value.total-score { font-size: 2rem; }
  .score-label { font-size: 0.75rem; margin-top: 5px; }
  
  .result-container .high-score-badge {
    padding: 8px 15px;
    font-size: 0.9rem;
    margin: 15px 0;
  }
  .result-container .high-score-info {
    padding: 8px 12px;
    font-size: 0.85rem;
    margin: 15px 0;
  }
}
/* JWST/Sci-Fi Dynamic Background */
.jwst-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
}
.jwst-bg::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 10, 30, 0.55); /* dark overlay for readability */
  pointer-events: none;
  z-index: 0;
}
body > .container, body > header, body > main, body > footer {
  position: relative;
  z-index: 1;
}