/* Big-O Quest - Cyberpunk Algorithm Aesthetic */

:root {
  /* Core Colors - Deep Space with Neon Accents */
  --bg-dark: #0a0a0f;
  --bg-primary: #12121a;
  --bg-secondary: #1a1a2e;
  --bg-card: #16213e;
  --bg-elevated: #1f2937;

  /* Neon Accent Colors */
  --neon-cyan: #00f5ff;
  --neon-pink: #ff00ff;
  --neon-green: #00ff88;
  --neon-orange: #ff6b35;
  --neon-yellow: #ffd700;
  --neon-purple: #bf00ff;

  /* Status Colors */
  --success: #00ff88;
  --warning: #ffaa00;
  --danger: #ff3366;
  --info: #00f5ff;

  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #a0aec0;
  --text-muted: #64748b;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #00f5ff 0%, #bf00ff 100%);
  --gradient-success: linear-gradient(135deg, #00ff88 0%, #00f5ff 100%);
  --gradient-danger: linear-gradient(135deg, #ff3366 0%, #ff6b35 100%);
  --gradient-card: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);

  /* Shadows */
  --shadow-glow-cyan: 0 0 20px rgba(0, 245, 255, 0.3);
  --shadow-glow-pink: 0 0 20px rgba(255, 0, 255, 0.3);
  --shadow-glow-green: 0 0 20px rgba(0, 255, 136, 0.3);

  /* Typography */
  --font-display: 'Orbitron', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Space Grotesk', sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Reset & Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

/* Animated Background */
.bg-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.matrix-rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  background:
    linear-gradient(90deg, transparent 50%, rgba(0, 245, 255, 0.03) 50%),
    linear-gradient(rgba(0, 245, 255, 0.01) 1px, transparent 1px);
  background-size:
    50px 50px,
    50px 50px;
  animation: matrixScroll 20s linear infinite;
}

@keyframes matrixScroll {
  0% {
    background-position:
      0 0,
      0 0;
  }
  100% {
    background-position:
      0 1000px,
      0 1000px;
  }
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at center, transparent 0%, var(--bg-dark) 70%),
    linear-gradient(90deg, rgba(0, 245, 255, 0.02) 1px, transparent 1px),
    linear-gradient(rgba(0, 245, 255, 0.02) 1px, transparent 1px);
  background-size:
    100% 100%,
    100px 100px,
    100px 100px;
}

/* Screen Management */
.screen {
  display: none;
  min-height: 100vh;
  padding: var(--space-lg);
}

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

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

/* Main Menu */
.menu-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xl) 0;
}

.logo-container {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.game-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--space-md);
}

.title-line {
  display: block;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 30px rgba(0, 245, 255, 0.5));
}

.title-line.accent {
  background: linear-gradient(135deg, #ff00ff 0%, #ff6b35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(255, 0, 255, 0.5));
}

.subtitle {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--text-secondary);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Level Grid */
.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.level-card {
  background: var(--gradient-card);
  border: 1px solid rgba(0, 245, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.level-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 245, 255, 0.1) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
}

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

.level-card:hover {
  transform: translateY(-5px);
  border-color: var(--neon-cyan);
  box-shadow: var(--shadow-glow-cyan);
}

.level-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.level-card.locked:hover {
  transform: none;
  border-color: rgba(0, 245, 255, 0.1);
  box-shadow: none;
}

.level-card.completed {
  border-color: var(--neon-green);
}

.level-card.completed .level-status {
  background: var(--gradient-success);
}

.level-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 245, 255, 0.1);
  border-radius: var(--radius-md);
}

.level-info h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--neon-cyan);
  margin-bottom: var(--space-xs);
}

.level-info p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.level-status {
  margin-left: auto;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

.level-status.unlocked {
  background: var(--gradient-primary);
  color: var(--bg-dark);
}

/* Progress Section */
.progress-section {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.progress-bar {
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gradient-success);
  border-radius: 6px;
  transition: width var(--transition-slow);
  box-shadow: var(--shadow-glow-green);
}

.progress-text {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

/* Level Screen */
.level-screen {
  padding: var(--space-lg);
}

.level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  border-bottom: 1px solid rgba(0, 245, 255, 0.2);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.level-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.back-btn {
  background: transparent;
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.back-btn:hover {
  background: var(--neon-cyan);
  color: var(--bg-dark);
}

.level-progress {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

/* Education Panel */
.education-panel,
.game-panel {
  max-width: 1000px;
  margin: 0 auto;
}

.edu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.edu-header h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-primary);
}

.skip-btn {
  background: transparent;
  border: 1px solid var(--neon-pink);
  color: var(--neon-pink);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.skip-btn:hover {
  background: var(--neon-pink);
  color: var(--bg-dark);
}

/* Concept Cards */
.concept-card {
  background: var(--gradient-card);
  border: 1px solid rgba(0, 245, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.concept-card h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--neon-cyan);
  margin-bottom: var(--space-md);
}

.concept-card.highlight {
  border-color: var(--neon-yellow);
}

.concept-card.success {
  border-color: var(--neon-green);
}

.concept-card.warning {
  border-color: var(--warning);
}

.concept-card.danger {
  border-color: var(--danger);
}

.concept-card.code-example {
  border-color: var(--neon-purple);
}

/* Animation Box */
.animation-box {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-md);
}

.input-visual {
  margin-bottom: var(--space-lg);
}

.input-visual span {
  display: block;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.input-slider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.input-slider input[type='range'] {
  flex: 1;
  -webkit-appearance: none;
  height: 8px;
  background: rgba(0, 245, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
}

.input-slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--neon-cyan);
  border-radius: 50%;
  box-shadow: var(--shadow-glow-cyan);
  cursor: pointer;
}

.input-slider span {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--neon-cyan);
  min-width: 60px;
  text-align: right;
}

.operations-display {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-md);
}

.op-box {
  background: rgba(0, 245, 255, 0.05);
  border: 1px solid rgba(0, 245, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  transition: all var(--transition-normal);
}

.op-box:hover {
  border-color: var(--neon-cyan);
  background: rgba(0, 245, 255, 0.1);
}

.op-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.op-count {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--neon-cyan);
}

/* Rules List */
.rules-list {
  list-style: none;
}

.rules-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.rules-list li:last-child {
  margin-bottom: 0;
}

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

.rules-list strong {
  display: block;
  color: var(--neon-cyan);
  margin-bottom: var(--space-xs);
}

.rules-list p {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

/* Buttons */
.primary-btn {
  background: var(--gradient-primary);
  color: var(--bg-dark);
  border: none;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-glow-cyan);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(0, 245, 255, 0.5);
}

.primary-btn.large {
  padding: var(--space-lg) var(--space-2xl);
  font-size: 1.2rem;
}

.secondary-btn {
  background: transparent;
  color: var(--neon-cyan);
  border: 2px solid var(--neon-cyan);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.secondary-btn:hover {
  background: var(--neon-cyan);
  color: var(--bg-dark);
}

.run-btn {
  background: var(--gradient-success);
  color: var(--bg-dark);
  border: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.run-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-glow-green);
}

.run-btn.large {
  padding: var(--space-md) var(--space-xl);
  font-size: 1.1rem;
}

.stop-btn {
  background: var(--gradient-danger);
  color: white;
  border: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-weight: 700;
  cursor: pointer;
}

.check-btn {
  background: var(--neon-purple);
  color: white;
  border: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.check-btn:hover {
  box-shadow: 0 0 20px rgba(191, 0, 255, 0.5);
}

/* Game Panel */
.game-panel {
  animation: slideIn 0.5s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.game-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.game-header h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--neon-pink);
  margin-bottom: var(--space-sm);
}

.game-header p {
  color: var(--text-secondary);
}

.game-content {
  background: var(--gradient-card);
  border: 1px solid rgba(255, 0, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.game-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* Code Simulator */
.code-simulator {
  margin-bottom: var(--space-lg);
}

.code-display {
  background: #0d1117;
  border: 1px solid rgba(0, 245, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  overflow-x: auto;
}

.code-display pre,
.code-block {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--neon-green);
  line-height: 1.8;
  margin: 0;
  white-space: pre-wrap;
}

.sim-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.sim-controls label {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.sim-controls input[type='number'] {
  width: 80px;
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--neon-cyan);
  border-radius: var(--radius-sm);
  color: var(--neon-cyan);
  font-family: var(--font-mono);
  font-size: 1rem;
}

.iteration-display {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.iter-counter {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.iter-counter span {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.counter {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--neon-green);
}

.iter-log {
  max-height: 150px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.iter-log div {
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Answer Section */
.answer-section {
  text-align: center;
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.answer-section p {
  font-family: var(--font-display);
  margin-bottom: var(--space-md);
}

.answer-options {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.answer-btn {
  background: rgba(0, 245, 255, 0.1);
  border: 2px solid rgba(0, 245, 255, 0.3);
  color: var(--neon-cyan);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.answer-btn:hover {
  background: rgba(0, 245, 255, 0.2);
  border-color: var(--neon-cyan);
}

.answer-btn.correct {
  background: var(--neon-green);
  border-color: var(--neon-green);
  color: var(--bg-dark);
}

.answer-btn.incorrect {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}

/* Feedback */
.feedback {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-align: center;
  font-family: var(--font-mono);
  margin-top: var(--space-md);
}

.feedback.success {
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
}

.feedback.error {
  background: rgba(255, 51, 102, 0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
}

/* Term Arena (Drag & Drop) */
.term-arena {
  text-align: center;
}

.expression-display {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  margin-bottom: var(--space-lg);
  color: var(--text-secondary);
}

.expression-display span:last-child {
  color: var(--neon-cyan);
}

.term-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  min-height: 80px;
  padding: var(--space-lg);
  background: rgba(0, 245, 255, 0.05);
  border: 2px dashed rgba(0, 245, 255, 0.3);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.term-item {
  background: var(--gradient-primary);
  color: var(--bg-dark);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-weight: 700;
  cursor: grab;
  transition: all var(--transition-fast);
  user-select: none;
}

.term-item:hover {
  transform: scale(1.05);
}

.term-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.term-item.dominant {
  background: var(--gradient-success);
  box-shadow: var(--shadow-glow-green);
}

.trash-zone {
  padding: var(--space-xl);
  background: rgba(255, 51, 102, 0.1);
  border: 2px dashed var(--danger);
  border-radius: var(--radius-lg);
  color: var(--danger);
  font-family: var(--font-mono);
  transition: all var(--transition-fast);
}

.trash-zone.drag-over {
  background: rgba(255, 51, 102, 0.2);
  transform: scale(1.02);
}

/* Quiz Machine */
.quiz-machine {
  text-align: center;
}

.quiz-screen {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--neon-purple);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.quiz-question {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
}

.function-display {
  color: var(--neon-cyan);
  font-weight: 700;
}

.quiz-explanation {
  color: var(--text-secondary);
  font-size: 0.9rem;
  min-height: 24px;
}

.quiz-options {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.quiz-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.quiz-dots {
  display: flex;
  gap: var(--space-sm);
}

.quiz-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all var(--transition-fast);
}

.quiz-dot.correct {
  background: var(--neon-green);
}

.quiz-dot.incorrect {
  background: var(--danger);
}

.quiz-dot.current {
  background: var(--neon-cyan);
  box-shadow: var(--shadow-glow-cyan);
}

/* CPU Comparison Arena */
.cpu-arena {
  text-align: center;
}

.code-preview {
  background: #0d1117;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  display: inline-block;
}

.code-preview pre {
  font-family: var(--font-mono);
  color: var(--neon-green);
  text-align: left;
  margin-bottom: var(--space-md);
}

.n-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.n-selector label {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.n-selector select {
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--neon-cyan);
  border-radius: var(--radius-sm);
  color: var(--neon-cyan);
  font-family: var(--font-mono);
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.system-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 245, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: all var(--transition-normal);
}

.system-card.active {
  border-color: var(--neon-cyan);
  box-shadow: var(--shadow-glow-cyan);
}

.system-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.system-card h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.system-spec {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.result-display {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-md);
}

.result-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.result-item.highlight {
  background: rgba(0, 255, 136, 0.1);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  margin-top: var(--space-xs);
}

.time-val {
  color: var(--neon-orange);
}

.iter-val {
  color: var(--neon-green);
}

/* Insight Box */
.insight-box {
  background: linear-gradient(
    135deg,
    rgba(0, 245, 255, 0.1),
    rgba(191, 0, 255, 0.1)
  );
  border: 1px solid var(--neon-cyan);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  margin-top: var(--space-lg);
}

.insight-box h4 {
  font-family: var(--font-display);
  color: var(--neon-cyan);
  margin-bottom: var(--space-sm);
}

.insight-box p {
  color: var(--text-secondary);
}

.insight-box p strong {
  color: var(--neon-green);
}

/* Notation Cards */
.notation-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.notation-card {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  transition: all var(--transition-normal);
}

.notation-card h4 {
  font-family: var(--font-display);
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.notation-card.big-o {
  border-color: var(--neon-cyan);
}

.notation-card.big-o h4 {
  color: var(--neon-cyan);
}

.notation-card.theta {
  border-color: var(--neon-purple);
}

.notation-card.theta h4 {
  color: var(--neon-purple);
}

.notation-card.omega {
  border-color: var(--neon-orange);
}

.notation-card.omega h4 {
  color: var(--neon-orange);
}

.notation-meaning {
  font-family: var(--font-mono);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.notation-use {
  color: var(--neon-green);
  font-weight: 700;
  margin-top: var(--space-sm);
}

/* Race Track */
.race-track {
  text-align: center;
}

.race-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.race-controls label {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.race-controls #raceN {
  color: var(--neon-cyan);
  font-weight: 700;
}

.race-controls input[type='range'] {
  width: 200px;
}

.race-visual {
  margin-bottom: var(--space-lg);
}

.racer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.racer-label {
  font-family: var(--font-mono);
  width: 100px;
  text-align: right;
  color: var(--text-secondary);
}

.racer-bar {
  height: 30px;
  background: var(--gradient-primary);
  border-radius: var(--radius-sm);
  transition: width 0.2s ease;
  min-width: 5px;
}

.racer[data-function='log-n'] .racer-bar {
  background: var(--neon-green);
}

.racer[data-function='n'] .racer-bar {
  background: var(--neon-cyan);
}

.racer[data-function='n-log-n'] .racer-bar {
  background: var(--neon-yellow);
}

.racer[data-function='n2'] .racer-bar {
  background: var(--neon-orange);
}

.racer[data-function='2n'] .racer-bar {
  background: var(--danger);
}

.racer-value {
  font-family: var(--font-mono);
  color: var(--text-muted);
  width: 100px;
}

.race-chart {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  height: 300px;
}

/* Key Insight */
.key-insight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: rgba(0, 245, 255, 0.05);
  border-left: 4px solid var(--neon-cyan);
  padding: var(--space-md);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-top: var(--space-md);
}

.key-insight span {
  font-size: 1.5rem;
}

.key-insight p {
  color: var(--text-secondary);
}

.key-insight strong {
  color: var(--neon-cyan);
}

/* Comparison Tables */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  margin: var(--space-md) 0;
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-table th {
  background: rgba(0, 245, 255, 0.1);
  color: var(--neon-cyan);
}

.comparison-table td {
  background: rgba(0, 0, 0, 0.2);
}

.comparison-table .winner-n {
  color: var(--neon-green);
}

.comparison-table .winner-n2 {
  color: var(--danger);
}

/* Factor Cards */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.factor-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.factor-card.bad {
  border-color: var(--danger);
}

.factor-card.good {
  border-color: var(--neon-green);
}

.factor-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.factor-card h5 {
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.factor-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Analogy Visual */
.analogy-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

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

.analogy-item .fruit {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-sm);
}

.analogy-plus,
.analogy-equals {
  font-size: 2rem;
  color: var(--text-muted);
}

.analogy-result {
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid var(--neon-green);
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

.analogy-result .small {
  font-size: 0.8rem;
  color: var(--neon-green);
}

/* Term Visualization */
.term-visualization {
  margin: var(--space-lg) 0;
}

.term-bar-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-lg);
  height: 200px;
}

.term-bar {
  width: 80px;
  background: var(--gradient-primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: var(--space-sm);
  transition: height var(--transition-normal);
  position: relative;
}

.term-bar .term-label {
  position: absolute;
  bottom: -30px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.term-bar .term-value {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--bg-dark);
  padding: var(--space-xs);
}

#termBarN {
  background: var(--neon-green);
}

#termBarN2 {
  background: var(--neon-yellow);
}

#termBarN3 {
  background: var(--danger);
}

/* Contribution Display */
.contribution-display {
  margin: var(--space-xl) 0;
}

.contribution-display h4 {
  text-align: center;
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
}

.pie-chart-container {
  width: 200px;
  height: 200px;
  margin: 0 auto var(--space-md);
}

.contribution-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Coefficient Arena */
.coefficient-arena {
  text-align: center;
}

.coefficient-comparison {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin: var(--space-lg) 0;
}

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

.coef {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--neon-cyan);
}

.coef-val {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.coef-race {
  margin: var(--space-lg) 0;
}

.coef-racer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.racer-name {
  font-family: var(--font-mono);
  width: 60px;
  text-align: right;
  color: var(--neon-cyan);
}

.racer-track {
  flex: 1;
  height: 30px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.racer-fill {
  height: 100%;
  background: var(--gradient-primary);
  transition: width var(--transition-normal);
}

.racer-count {
  font-family: var(--font-mono);
  width: 80px;
  color: var(--text-muted);
}

.growth-comparison {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  height: 250px;
}

/* Threshold Arena */
.threshold-arena {
  text-align: center;
}

.algo-display {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.algo-card {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  min-width: 180px;
}

.algo-card.algo1 {
  border-color: var(--neon-green);
}

.algo-card.algo2 {
  border-color: var(--neon-orange);
}

.algo-card h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: var(--space-sm);
}

.algo-card .operations {
  font-family: var(--font-mono);
  font-size: 1.2rem;
}

.n-controller {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.n-btn {
  background: rgba(0, 245, 255, 0.1);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.n-btn:hover {
  background: var(--neon-cyan);
  color: var(--bg-dark);
}

.n-display {
  font-family: var(--font-display);
  font-size: 1.5rem;
  padding: 0 var(--space-lg);
}

.winner-display {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  font-family: var(--font-mono);
  font-size: 1.2rem;
}

.winner-display.algo1-wins {
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
}

.winner-display.algo2-wins {
  background: rgba(255, 107, 53, 0.1);
  border: 1px solid var(--neon-orange);
  color: var(--neon-orange);
}

.winner-display.tie {
  background: rgba(191, 0, 255, 0.1);
  border: 1px solid var(--neon-purple);
  color: var(--neon-purple);
}

.threshold-chart {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  height: 250px;
  margin-bottom: var(--space-lg);
}

.crossover-finder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.crossover-finder input {
  width: 100px;
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--neon-cyan);
  border-radius: var(--radius-sm);
  color: var(--neon-cyan);
  font-family: var(--font-mono);
}

/* Case Comparison */
.case-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.case-card {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.case-card.best {
  border-color: var(--neon-green);
}

.case-card.best h4 {
  color: var(--neon-green);
}

.case-card.average {
  border-color: var(--neon-yellow);
}

.case-card.average h4 {
  color: var(--neon-yellow);
}

.case-card.worst {
  border-color: var(--danger);
}

.case-card.worst h4 {
  color: var(--danger);
}

.case-card h4 {
  font-family: var(--font-display);
  margin-bottom: var(--space-sm);
}

.complexity-big {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  margin: var(--space-sm) 0;
}

/* Search Dungeon */
.search-dungeon {
  text-align: center;
}

.dungeon-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.dungeon-controls select {
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--neon-cyan);
  border-radius: var(--radius-sm);
  color: var(--neon-cyan);
  font-family: var(--font-mono);
}

.dungeon-array {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  min-height: 60px;
}

.dungeon-cell {
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(0, 245, 255, 0.3);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.dungeon-cell.checking {
  border-color: var(--neon-yellow);
  background: rgba(255, 215, 0, 0.1);
}

.dungeon-cell.found {
  border-color: var(--neon-green);
  background: rgba(0, 255, 136, 0.2);
  color: var(--neon-green);
}

.dungeon-cell.enemy {
  border-color: var(--danger);
}

.dungeon-info {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.info-item {
  display: flex;
  gap: var(--space-sm);
  font-family: var(--font-mono);
}

.info-item span:first-child {
  color: var(--text-secondary);
}

.info-item span:last-child {
  color: var(--neon-cyan);
}

.case-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.case-btn {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}

.case-btn.best {
  background: rgba(0, 255, 136, 0.2);
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
}

.case-btn.worst {
  background: rgba(255, 51, 102, 0.2);
  border: 1px solid var(--danger);
  color: var(--danger);
}

.case-btn.random {
  background: rgba(0, 245, 255, 0.2);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
}

.case-btn:hover {
  transform: scale(1.05);
}

.search-btn {
  background: var(--gradient-primary);
  color: var(--bg-dark);
  border: none;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 1.1rem;
  cursor: pointer;
  margin-bottom: var(--space-lg);
}

.search-log {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  max-height: 150px;
  overflow-y: auto;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.search-log div {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Memory Types */
.memory-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.mem-type {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 245, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}

.mem-type.array-var {
  border-color: var(--neon-purple);
}

.type-name {
  display: block;
  font-family: var(--font-mono);
  color: var(--neon-cyan);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.type-size {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Memory Builder */
.memory-builder {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .memory-builder {
    grid-template-columns: 1fr;
  }
}

.variable-pool {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.variable-pool h4 {
  font-family: var(--font-display);
  color: var(--neon-cyan);
  margin-bottom: var(--space-md);
  text-align: center;
}

.variables {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.variable-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(0, 245, 255, 0.1);
  border: 1px solid rgba(0, 245, 255, 0.3);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  cursor: grab;
  transition: all var(--transition-fast);
}

.variable-item:hover {
  border-color: var(--neon-cyan);
  transform: scale(1.02);
}

.variable-item.array-var {
  border-color: var(--neon-purple);
  background: rgba(191, 0, 255, 0.1);
}

.var-icon {
  font-size: 1.2rem;
}

.var-name {
  font-family: var(--font-mono);
  color: var(--text-primary);
  flex: 1;
}

.var-size {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.memory-grid-container h4 {
  font-family: var(--font-display);
  color: var(--neon-cyan);
  margin-bottom: var(--space-md);
  text-align: center;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--neon-cyan);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  min-height: 150px;
  margin-bottom: var(--space-md);
}

.memory-cell {
  aspect-ratio: 1;
  background: rgba(0, 245, 255, 0.05);
  border: 1px solid rgba(0, 245, 255, 0.1);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

.memory-cell.filled {
  background: var(--neon-cyan);
}

.memory-cell.array-filled {
  background: var(--neon-purple);
}

.memory-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.memory-stats .stat {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.memory-stats .stat.total {
  background: rgba(0, 245, 255, 0.1);
  border: 1px solid var(--neon-cyan);
}

.memory-stats .stat.complexity {
  grid-column: span 2;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid var(--neon-green);
}

.clear-btn {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  cursor: pointer;
  margin-top: var(--space-md);
}

/* TLE Arena */
.tle-arena {
  text-align: center;
}

.volcano-visual {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: var(--space-lg);
}

.volcano {
  width: 150px;
  height: 150px;
  position: relative;
}

.volcano-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 5rem;
  z-index: 2;
}

.lava {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 0;
  background: linear-gradient(to top, #ff3366, #ff6b35, #ffd700);
  border-radius: 50% 50% 0 0;
  transition: height 1s ease;
}

.lava.erupting {
  height: 100px;
  animation: erupt 0.5s ease infinite;
}

@keyframes erupt {
  0%,
  100% {
    transform: translateX(-50%) scaleY(1);
  }
  50% {
    transform: translateX(-50%) scaleY(1.1);
  }
}

.loop-config {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.loop-config h4 {
  font-family: var(--font-display);
  color: var(--neon-cyan);
  margin-bottom: var(--space-md);
}

.config-options {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin: var(--space-md) 0;
  flex-wrap: wrap;
}

.config-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.config-item label {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.config-item select {
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--neon-cyan);
  border-radius: var(--radius-sm);
  color: var(--neon-cyan);
  font-family: var(--font-mono);
}

.operations-preview {
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-top: var(--space-md);
}

.operations-preview span:last-child {
  color: var(--neon-yellow);
  font-weight: 700;
}

.volcano-run {
  font-size: 1.2rem;
  margin-bottom: var(--space-lg);
}

.tle-result {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  margin-top: var(--space-lg);
}

.tle-result.success {
  background: rgba(0, 255, 136, 0.1);
  border: 2px solid var(--neon-green);
}

.tle-result.danger {
  background: rgba(255, 51, 102, 0.1);
  border: 2px solid var(--danger);
}

.result-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.result-message {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

.result-time {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

/* TLE Table */
.tle-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
}

.tle-table th,
.tle-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tle-table th {
  background: rgba(0, 245, 255, 0.1);
}

.tle-table tr.safe td {
  background: rgba(0, 255, 136, 0.05);
  color: var(--neon-green);
}

.tle-table tr.warning td {
  background: rgba(255, 170, 0, 0.05);
  color: var(--warning);
}

.tle-table tr.danger td {
  background: rgba(255, 51, 102, 0.05);
  color: var(--danger);
}

/* Overflow Arena */
.overflow-arena {
  text-align: center;
}

.overflow-challenge {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--neon-purple);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.overflow-challenge h4 {
  font-family: var(--font-display);
  color: var(--neon-purple);
  margin-bottom: var(--space-md);
}

.buggy-code {
  background: #0d1117;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  text-align: left;
}

.buggy-code pre {
  font-family: var(--font-mono);
  color: var(--danger);
}

.value-inputs {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.input-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.input-group label {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.input-group input {
  width: 150px;
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--neon-cyan);
  border-radius: var(--radius-sm);
  color: var(--neon-cyan);
  font-family: var(--font-mono);
  text-align: center;
}

.result-display {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.expected,
.actual {
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

.expected {
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid var(--neon-green);
}

.actual {
  background: rgba(255, 51, 102, 0.1);
  border: 1px solid var(--danger);
}

.expected span,
.actual span {
  display: block;
  font-family: var(--font-mono);
}

.correct {
  color: var(--neon-green);
  font-weight: 700;
}

.corrupted {
  color: var(--danger);
  font-weight: 700;
  text-decoration: line-through;
}

.fix-options {
  margin-top: var(--space-lg);
}

.fix-options h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.fix-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.fix-btn {
  background: rgba(0, 245, 255, 0.1);
  border: 2px solid rgba(0, 245, 255, 0.3);
  color: var(--neon-cyan);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.fix-btn:hover {
  border-color: var(--neon-cyan);
  background: rgba(0, 245, 255, 0.2);
}

.fix-btn.correct {
  background: var(--neon-green);
  border-color: var(--neon-green);
  color: var(--bg-dark);
}

.fix-btn.incorrect {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}

.overflow-visualizer {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
}

.bits-display {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  word-break: break-all;
}

/* Type Limits */
.overflow-demo {
  margin-top: var(--space-md);
}

.type-limit {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono);
}

.type-limit .type {
  color: var(--neon-cyan);
}

.type-limit .limit {
  color: var(--text-muted);
}

/* Victory Screen */
.victory-container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-2xl) 0;
}

.trophy {
  font-size: 8rem;
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.victory-container h1 {
  font-family: var(--font-display);
  font-size: 3rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-md);
}

.victory-container h2 {
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
}

.summary {
  background: var(--gradient-card);
  border: 1px solid var(--neon-green);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
  text-align: left;
}

.summary h3 {
  font-family: var(--font-display);
  color: var(--neon-green);
  margin-bottom: var(--space-md);
  text-align: center;
}

.summary ul {
  list-style: none;
}

.summary li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

.summary li:last-child {
  border-bottom: none;
}

/* Utility Classes */
.hidden {
  display: none !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--neon-cyan);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neon-pink);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .level-header {
    flex-direction: column;
    text-align: center;
  }

  .algo-display {
    flex-direction: column;
  }

  .value-inputs {
    flex-direction: column;
  }

  .racer-label {
    width: 70px;
    font-size: 0.8rem;
  }

  .racer-value {
    width: 60px;
    font-size: 0.8rem;
  }
}

/* N Labels */
.n-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* Elimination Question */
.elimination-question {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
}

.elim-options {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin: var(--space-md) 0;
}

.elim-options label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  cursor: pointer;
}

.elim-options input[type='checkbox'] {
  width: 20px;
  height: 20px;
  accent-color: var(--neon-cyan);
}

/* Algo Comparison */
.algo-comparison {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
}

.algo-box {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  min-width: 150px;
}

.algo-box h5 {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.algo-box .complexity {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--neon-cyan);
  margin-top: var(--space-sm);
}

.vs {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-muted);
}

/* Code Block Variants */
.code-block.danger {
  color: var(--danger);
}

.code-block.success {
  color: var(--neon-green);
}