/*    WELTRAUM-SPHÄRE – Eigene Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Topic Float-Layout (Magazin-Stil) ── */
.topic-float-right {
  float: right;
  width: 100%;
  max-width: 300px;
  margin: 3rem 0 1.5rem 1.5rem;
  overflow: hidden;
}

.topic-float-left {
  float: left;
  width: 100%;
  max-width: 300px;
  margin: 3rem 1.5rem 1.5rem 0;
  overflow: hidden;
}

.topic-float-right .topic-visual-inner,
.topic-float-left .topic-visual-inner {
  width: 100%;
  height: 16rem;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.15);
  position: relative;
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.topic-visual-inner:hover {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.2);
}

.topic-clear {
  clear: both;
}

@media (min-width: 1024px) {
  .topic-float-right .topic-visual-inner,
  .topic-float-left .topic-visual-inner {
    height: 20rem;
  }
}

@media (max-width: 767px) {
  .topic-float-right,
  .topic-float-left {
    float: none;
    max-width: 100%;
    margin: 0 0 1.5rem 0;
  }

  .topic-float-right .topic-visual-inner,
  .topic-float-left .topic-visual-inner {
    height: 16rem;
  }
}

/* ── Merksatz: Planetenreihenfolge ── */
.merksatz-box {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
}

.merksatz-intro {
  font-weight: 700;
  font-size: 0.875rem;
  color: #c4b5fd;
  margin-bottom: 0.5rem;
}

.merksatz-sentence {
  font-size: 1.25rem;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 0.75rem;
}

.merksatz-hl {
  color: #8b5cf6;
  font-weight: 800;
  font-size: 1.35rem;
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.35);
}

.merksatz-mapping {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem 0;
  font-size: 0.9375rem;
}

.merksatz-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  transition: all 0.2s ease;
}

.merksatz-pair:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
}

.merksatz-pair-letter {
  font-weight: 800;
  color: #8b5cf6;
  font-size: 1rem;
}

.merksatz-pair-arrow {
  color: #64748b;
  font-size: 0.875rem;
}

.merksatz-pair-planet {
  font-weight: 600;
  color: #c4b5fd;
  font-size: 0.9375rem;
}

.merksatz-pair-sep {
  color: #475569;
  margin: 0 0.375rem;
}

/* ── Extremitäts-Skala ── */
.extreme-scale {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
}

.extreme-scale-intro {
  font-weight: 700;
  font-size: 0.875rem;
  color: #c4b5fd;
  margin-bottom: 1rem;
}

.extreme-scale-bars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.extreme-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.extreme-bar-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 140px;
  flex-shrink: 0;
}

.extreme-bar-emoji {
  font-size: 1.125rem;
  line-height: 1;
}

.extreme-bar-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #c4b5fd;
  white-space: nowrap;
}

.extreme-bar-track {
  flex: 1;
  height: 10px;
  background: rgba(139, 92, 246, 0.08);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.1);
}

.extreme-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(to right, #8b5cf6, #7c3aed);
  transition: width 1s ease;
  position: relative;
}

.extreme-bar-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15));
  border-radius: 0 5px 5px 0;
}

.extreme-bar-fill-max {
  background: linear-gradient(to right, #8b5cf6, #6d28d9, #4c1d95);
  box-shadow: 0 0 8px rgba(109, 40, 217, 0.4);
}

.extreme-bar-desc {
  font-size: 0.8125rem;
  color: #94a3b8;
  min-width: 180px;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}

.extreme-bar:hover .extreme-bar-fill {
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
}

.extreme-bar:hover .extreme-bar-fill-max {
  box-shadow: 0 0 16px rgba(109, 40, 217, 0.6);
}

@media (max-width: 768px) {
  .extreme-bar {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .extreme-bar-label {
    min-width: unset;
    order: 1;
    width: 100%;
  }

  .extreme-bar-track {
    order: 2;
    width: 100%;
  }

  .extreme-bar-desc {
    order: 3;
    min-width: unset;
    text-align: left;
    white-space: normal;
    width: 100%;
  }
}

/* ── Entfernungs-Zahlenstrahl ── */
.distance-scale {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
}

.distance-scale-intro {
  font-weight: 700;
  font-size: 0.875rem;
  color: #c4b5fd;
  margin-bottom: 1rem;
}

.distance-scale-bar {
  position: relative;
  height: 100px;
  margin: 0 1rem;
}

.distance-scale-line {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #8b5cf6, #6366f1, #4f46e5);
  border-radius: 2px;
}

.distance-scale-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8b5cf6;
}

.distance-scale-line::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4f46e5;
}

.distance-scale-point {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.distance-scale-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #8b5cf6;
  border: 2px solid #1e1b4b;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
  transition: all 0.3s ease;
  cursor: default;
}

.distance-scale-dot-highlight {
  background: #a78bfa;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.6);
  width: 16px;
  height: 16px;
  border-width: 3px;
}

.distance-scale-point:hover .distance-scale-dot {
  transform: scale(1.3);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.6);
}

.distance-scale-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: 6px;
  text-align: center;
  min-width: 70px;
}

.distance-scale-emoji {
  font-size: 1rem;
  line-height: 1;
}

.distance-scale-dist {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #c4b5fd;
  white-space: nowrap;
}

.distance-scale-name {
  font-size: 0.75rem;
  color: #94a3b8;
  white-space: nowrap;
}

.distance-scale-hint {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.75rem;
  font-style: italic;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .distance-scale-bar {
    position: relative;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 16px;
  }

  .distance-scale-line {
    display: none;
  }

  .distance-scale-point {
    position: static;
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-left: 2px solid rgba(139, 92, 246, 0.2);
    padding-left: 0.75rem;
  }

  .distance-scale-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
  }

  .distance-scale-dot-highlight {
    width: 12px;
    height: 12px;
  }

  .distance-scale-label {
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0;
    min-width: unset;
    text-align: left;
    flex-wrap: wrap;
  }

  .distance-scale-emoji {
    font-size: 0.875rem;
  }

  .distance-scale-dist {
    font-size: 0.75rem;
  }

  .distance-scale-name {
    font-size: 0.6875rem;
    width: 100%;
    color: #94a3b8;
  }
}

/* ── Raumfahrt-Zeitstrahl ── */
.timeline {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
}

.timeline-intro {
  font-weight: 700;
  font-size: 0.875rem;
  color: #c4b5fd;
  margin-bottom: 1rem;
}

.timeline-track {
  position: relative;
  padding-left: 24px;
}

.timeline-track::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #8b5cf6, #6366f1, #4f46e5);
  border-radius: 1px;
}

.timeline-item {
  position: relative;
  padding: 0.5rem 0 0.5rem 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.timeline-item:not(:last-child) {
  padding-bottom: 0.75rem;
}

.timeline-dot {
  position: absolute;
  left: -20px;
  top: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #8b5cf6;
  border: 2px solid #1e1b4b;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
  flex-shrink: 0;
  transition: all 0.3s ease;
  z-index: 2;
}

.timeline-dot-highlight {
  background: #a78bfa;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.6);
  width: 16px;
  height: 16px;
  border-width: 3px;
  left: -21px;
}

.timeline-item:hover .timeline-dot {
  transform: scale(1.3);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.6);
}

.timeline-content {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 0.75rem;
  padding: 12px 16px;
  transition: all 0.2s ease;
  width: 100%;
}

.timeline-item:hover .timeline-content {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.25);
}

.timeline-year {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #8b5cf6;
  min-width: 40px;
  flex-shrink: 0;
}

.timeline-emoji {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.timeline-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #c4b5fd;
  flex-shrink: 0;
}

.timeline-desc {
  font-size: 0.875rem;
  color: #cbd5e1;
  width: 100%;
  line-height: 1.5;
}

/* ── Fakten-Carousel ── */
.fact-carousel {
  position: relative;
  margin-bottom: 1.5rem;
  user-select: none;
}

.fact-carousel-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(139, 92, 246, 0.15);
  background: rgba(139, 92, 246, 0.06);
}

.fact-carousel-track {
  display: flex;
  gap: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fact-carousel-slide {
  width: 100%;
  min-width: 100%;
  flex-shrink: 0;
  flex-grow: 0;
  padding: 0;
  box-sizing: border-box;
  align-self: stretch;
}

/* Planeten-Fakten (im Carousel) */
.planet-fact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 60px;
  background: rgba(139, 92, 246, 0.06);
  border: none;
  border-radius: 0;
  min-height: 140px;
  justify-content: center;
  box-sizing: border-box;
}

.planet-fact-label {
  font-weight: 700;
  font-size: 1.125rem;
  color: #c4b5fd;
}

.planet-fact-value {
  font-size: 1rem;
  color: #cbd5e1;
  line-height: 1.7;
}

/* Carousel Navigation */
.fact-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.3);
  background: rgba(13, 15, 26, 0.9);
  color: #c4b5fd;
  font-size: 1.125rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.fact-carousel-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.fact-carousel-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.fact-carousel-prev {
  left: 6px;
}

.fact-carousel-next {
  right: 6px;
}

.fact-carousel-btn:disabled {
  opacity: 0.3;
  cursor: default;
  transform: translateY(-50%);
  box-shadow: none;
}

.fact-carousel-btn:disabled:hover {
  background: rgba(13, 15, 26, 0.9);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-50%);
  box-shadow: none;
}

/* Dots & Counter */
.fact-carousel-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
}

.fact-carousel-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.fact-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.2);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.fact-carousel-dot:hover {
  background: rgba(139, 92, 246, 0.4);
}

.fact-carousel-dot.active {
  background: #8b5cf6;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
  width: 10px;
  height: 10px;
}

.fact-carousel-counter {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
  min-width: 40px;
  text-align: center;
}

/* Touch-Hinweis auf Mobile */
.fact-carousel-swipe-hint {
  display: none;
  font-size: 0.6875rem;
  color: #475569;
  text-align: center;
  margin-top: 0.25rem;
  font-style: italic;
}

@media (max-width: 768px) {
  .fact-carousel-btn {
    width: 30px;
    height: 30px;
    font-size: 0.875rem;
  }

  .fact-carousel-prev {
    left: 4px;
  }

  .fact-carousel-next {
    right: 4px;
  }

  .planet-fact {
    padding: 18px 48px;
  }

  .planet-fact-label {
    font-size: 1rem;
  }

  .planet-fact-value {
    font-size: 0.9375rem;
  }

  .fact-carousel-swipe-hint {
    display: block;
  }
}

@media (hover: none) and (pointer: coarse) {
  .fact-carousel-swipe-hint {
    display: block;
  }
}

/* ── Fakten-Karten ── */
.fact-card {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.fact-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.fact-card:hover {
  border-color: rgba(139, 92, 246, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.15);
}

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

.fact-card-emoji {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.fact-card-number {
  font-size: 1.75rem;
  font-weight: 800;
  color: #c4b5fd;
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
}

.fact-card-label {
  font-size: 0.9375rem;
  color: #cbd5e1;
  line-height: 1.5;
}

/* ── Sonnensystem-Visualisierung ── */
.solar-system-mini {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #0a0e1a 0%, #060812 100%);
  transform: scale(0.85);
}

.sun-orb {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd700 0%, #ff8c00 50%, #ff6600 100%);
  box-shadow: 0 0 30px rgba(255, 200, 0, 0.6), 0 0 60px rgba(255, 160, 0, 0.3), 0 0 100px rgba(255, 100, 0, 0.15);
  z-index: 10;
  animation: sun-pulse 3s ease-in-out infinite;
}

@keyframes sun-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(255, 200, 0, 0.6), 0 0 60px rgba(255, 160, 0, 0.3), 0 0 100px rgba(255, 100, 0, 0.15); }
  50% { transform: scale(1.08); box-shadow: 0 0 40px rgba(255, 200, 0, 0.8), 0 0 80px rgba(255, 160, 0, 0.4), 0 0 120px rgba(255, 100, 0, 0.2); }
}

.orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.12);
}

.orbit-1 { width: 60px; height: 60px; animation: orbit-rotate 8s linear infinite reverse; }
.orbit-2 { width: 90px; height: 90px; animation: orbit-rotate 14s linear infinite reverse; }
.orbit-3 { width: 120px; height: 120px; animation: orbit-rotate 20s linear infinite reverse; }
.orbit-4 { width: 155px; height: 155px; animation: orbit-rotate 30s linear infinite reverse; }
.orbit-5 { width: 195px; height: 195px; animation: orbit-rotate 50s linear infinite reverse; }
.orbit-6 { width: 230px; height: 230px; animation: orbit-rotate 70s linear infinite reverse; }
.orbit-7 { width: 265px; height: 265px; animation: orbit-rotate 100s linear infinite reverse; }
.orbit-8 { width: 300px; height: 300px; animation: orbit-rotate 130s linear infinite reverse; }

@keyframes orbit-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.planet {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.planet-mercury {
  width: 6px; height: 6px;
  background: radial-gradient(circle, #b0b0b0, #808080);
  box-shadow: 0 0 4px rgba(176, 176, 176, 0.5);
}

.planet-venus {
  width: 8px; height: 8px;
  background: radial-gradient(circle, #e8c56d, #c4963a);
  box-shadow: 0 0 6px rgba(232, 197, 109, 0.5);
}

.planet-earth {
  width: 9px; height: 9px;
  background: radial-gradient(circle, #4da6ff, #2d7fd4);
  box-shadow: 0 0 8px rgba(77, 166, 255, 0.5);
}

.planet-mars {
  width: 7px; height: 7px;
  background: radial-gradient(circle, #e07040, #c04020);
  box-shadow: 0 0 5px rgba(224, 112, 64, 0.5);
}

.planet-jupiter {
  width: 14px; height: 14px;
  background: radial-gradient(circle, #d4a46a, #b87840);
  box-shadow: 0 0 10px rgba(212, 164, 106, 0.5);
}

.planet-saturn {
  width: 12px; height: 12px;
  background: radial-gradient(circle, #e8d08a, #c4a84a);
  box-shadow: 0 0 8px rgba(232, 208, 138, 0.5);
  position: relative;
}

.planet-saturn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 6px;
  border: 1.5px solid rgba(232, 208, 138, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  pointer-events: none;
}

.planet-uranus {
  width: 10px; height: 10px;
  background: radial-gradient(circle, #d4f1f9, #a8e6ef);
  box-shadow: 0 0 8px rgba(168, 230, 239, 0.5);
}

.planet-neptune {
  width: 10px; height: 10px;
  background: radial-gradient(circle, #4d7eff, #2850d4);
  box-shadow: 0 0 8px rgba(77, 126, 255, 0.5);
}

/* Planeten-Orbit-Bahn-Highlight bei Hover */
.planet-card-bg:hover .orbit {
  border-color: rgba(139, 92, 246, 0.25);
  transition: border-color 0.3s ease;
}

/* ── Galaxie-Visualisierung ── */
.galaxy-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #0a0e1a 0%, #060812 100%);
  overflow: hidden;
}

.galaxy-core {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(139, 92, 246, 0.8) 30%, rgba(139, 92, 246, 0.2) 70%, transparent 100%);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.6), 0 0 40px rgba(139, 92, 246, 0.3), 0 0 80px rgba(139, 92, 246, 0.1);
  animation: galaxy-pulse 4s ease-in-out infinite;
  z-index: 5;
}

@keyframes galaxy-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 1; }
}

.galaxy-arm {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: galaxy-spin 25s linear infinite;
}

.galaxy-arm::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(139, 92, 246, 0.15) 20%, rgba(167, 139, 250, 0.1) 40%, transparent 60%);
}

.galaxy-arm-1 { width: 90px; height: 70px; animation-duration: 22s; transform: rotate(0deg); }
.galaxy-arm-2 { width: 140px; height: 110px; animation-duration: 28s; animation-direction: reverse; transform: rotate(60deg); }
.galaxy-arm-3 { width: 190px; height: 150px; animation-duration: 35s; transform: rotate(120deg); }
.galaxy-arm-4 { width: 240px; height: 190px; animation-duration: 42s; animation-direction: reverse; transform: rotate(180deg); }

@keyframes galaxy-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Schwarzes Loch Visualisierung ── */
.blackhole-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #050510 0%, #020208 100%);
  overflow: hidden;
}

.blackhole-core {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, #000 0%, #000 60%, rgba(30, 10, 60, 0.8) 80%, transparent 100%);
  box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.8), 0 0 80px 20px rgba(30, 10, 60, 0.3);
  z-index: 10;
}

.blackhole-ring {
  position: absolute;
  width: 120px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.4);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3), inset 0 0 15px rgba(139, 92, 246, 0.1);
  animation: ring-rotate 8s linear infinite;
  z-index: 5;
}

@keyframes ring-rotate {
  from { transform: rotateX(75deg) rotateZ(0deg); }
  to { transform: rotateX(75deg) rotateZ(360deg); }
}

.blackhole-accretion {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 20%, rgba(139, 92, 246, 0.08) 40%, rgba(167, 139, 250, 0.04) 60%, transparent 70%);
  animation: accretion-pulse 3s ease-in-out infinite alternate;
  z-index: 2;
}

@keyframes accretion-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.1); opacity: 1; }
}

/* ── Rakete Visualisierung ── */
.rocket-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #050515 0%, #0a0e25 50%, #0d1230 100%);
  overflow: hidden;
}

.rocket-body {
  position: relative;
  z-index: 10;
  animation: rocket-float 3s ease-in-out infinite;
}

@keyframes rocket-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.rocket-nose {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 20px solid #c0c8d8;
  margin: 0 auto;
}

.rocket-window {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #6ee7ff 0%, #3b82f6 100%);
  border: 3px solid #a0a8b8;
  margin: 4px auto;
  box-shadow: 0 0 8px rgba(110, 231, 255, 0.4);
}

.rocket-fins {
  position: relative;
  width: 50px;
  height: 14px;
  margin: 0 auto;
  background: #c0c8d8;
  border-radius: 0 0 4px 4px;
}

.rocket-fins::before,
.rocket-fins::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 20px;
  background: #a0a8b8;
  border-radius: 0 0 4px 4px;
}

.rocket-fins::before { left: -6px; transform: skewX(15deg); }
.rocket-fins::after { right: -6px; transform: skewX(-15deg); }

.rocket-flame {
  position: relative;
  margin: -2px auto 0;
  width: 20px;
  height: 30px;
  display: flex;
  justify-content: center;
}

.flame-inner {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 22px;
  background: linear-gradient(to top, #ffd700, #ff8c00, transparent);
  border-radius: 50% 50% 20% 20%;
  animation: flame-dance 0.15s ease-in-out infinite alternate;
}

.flame-outer {
  position: absolute;
  bottom: -2px;
  width: 16px;
  height: 28px;
  background: linear-gradient(to top, rgba(255, 100, 0, 0.8), rgba(255, 140, 0, 0.4), transparent);
  border-radius: 50% 50% 20% 20%;
  animation: flame-dance 0.2s ease-in-out infinite alternate-reverse;
}

@keyframes flame-dance {
  0% { transform: scaleX(1) scaleY(1); }
  100% { transform: scaleX(0.85) scaleY(1.1); }
}

.rocket-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rocket-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: rocket-star-twinkle var(--star-duration, 2s) ease-in-out infinite alternate;
  animation-delay: var(--star-delay, 0s);
}

.rocket-star-1 { top: 15%; left: 20%; --star-duration: 2s; --star-delay: 0s; }
.rocket-star-2 { top: 25%; left: 75%; --star-duration: 3s; --star-delay: 0.5s; }
.rocket-star-3 { top: 45%; left: 15%; --star-duration: 2.5s; --star-delay: 1s; }
.rocket-star-4 { top: 55%; left: 80%; --star-duration: 1.8s; --star-delay: 0.3s; }
.rocket-star-5 { top: 70%; left: 25%; --star-duration: 2.2s; --star-delay: 0.8s; }
.rocket-star-6 { top: 35%; left: 60%; --star-duration: 2.8s; --star-delay: 1.5s; }
.rocket-star-7 { top: 80%; left: 65%; --star-duration: 2s; --star-delay: 0.7s; }
.rocket-star-8 { top: 10%; left: 45%; --star-duration: 3s; --star-delay: 1.2s; }

@keyframes rocket-star-twinkle {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

/* ── Weltraum-Topic Hover-Effekt ── */
.weltraum-topic {
  display: flow-root;
  transition: transform 0.3s ease, opacity 0.6s ease;
}

.weltraum-topic:hover {
  transform: translateY(-2px);
}

/* ── Scroll-Animationen ── */
.weltraum-topic-hidden {
  opacity: 0;
  transform: translateY(30px);
}

.weltraum-topic-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fact-card-hidden {
  opacity: 0;
  transform: translateY(20px);
}

.fact-card-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ── Responsive Anpassungen ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .solar-system-mini {
    transform: scale(0.8);
  }
}

@media (max-width: 768px) {
  .solar-system-mini {
    transform: scale(0.75);
  }

  .galaxy-core {
    width: 18px;
    height: 18px;
  }

  .galaxy-arm-1 { width: 70px; height: 55px; }
  .galaxy-arm-2 { width: 110px; height: 85px; }
  .galaxy-arm-3 { width: 150px; height: 120px; }
  .galaxy-arm-4 { width: 190px; height: 150px; }

  .blackhole-core { width: 30px; height: 30px; }
  .blackhole-ring { width: 90px; height: 30px; }
  .blackhole-accretion { width: 140px; height: 140px; }

  .fact-card-number {
    font-size: 1.375rem;
  }
}

@media (max-width: 480px) {
  .solar-system-mini {
    transform: scale(0.6);
  }

  .fact-card {
    padding: 1rem;
  }

  .fact-card-number {
    font-size: 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   PLANETEN-RALLYE – Minispiel Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Modal ── */
.pr-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transition: background 0.35s ease, backdrop-filter 0.35s ease;
  padding: 1rem;
}

.pr-modal-overlay.pr-modal-visible {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}

.pr-modal-overlay.pr-modal-hiding {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
}

.pr-modal-content {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: #0d0f1a;
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 1.25rem;
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.15), 0 25px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.pr-modal-overlay.pr-modal-visible .pr-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.pr-modal-overlay.pr-modal-hiding .pr-modal-content {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

/* Scrollbar im Modal */
.pr-modal-content::-webkit-scrollbar {
  width: 6px;
}

.pr-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.pr-modal-content::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.2);
  border-radius: 3px;
}

.pr-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.35);
}

/* ── Start-Button ── */
.pr-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  margin-top: 1.5rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #c4b5fd;
  border-radius: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9375rem;
}

.pr-start-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.15));
  border-color: rgba(139, 92, 246, 0.6);
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.3);
}

/* ── Intro ── */
.pr-intro {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  animation: pr-fade-in 0.4s ease;
}

@keyframes pr-fade-in {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.pr-intro-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.pr-intro-emoji {
  font-size: 1.75rem;
}

.pr-intro-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #c4b5fd;
  margin: 0;
}

.pr-intro-desc {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.pr-intro-legend {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.pr-legend-title {
  font-weight: 700;
  font-size: 0.8125rem;
  color: #c4b5fd;
  margin: 0 0 0.5rem 0;
}

.pr-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
}

.pr-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

.pr-legend-num {
  font-weight: 800;
  color: #8b5cf6;
  font-size: 0.75rem;
  min-width: 14px;
}

.pr-legend-emoji {
  font-size: 0.875rem;
}

.pr-legend-name {
  font-weight: 600;
  color: #c4b5fd;
}

.pr-legend-hint {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0.5rem 0 0 0;
  font-style: italic;
}

.pr-intro-bonus {
  background: rgba(250, 204, 21, 0.06);
  border: 1px solid rgba(250, 204, 21, 0.15);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.pr-bonus-title {
  font-weight: 700;
  font-size: 0.8125rem;
  color: #fbbf24;
  margin: 0 0 0.25rem 0;
}

.pr-bonus-desc {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0;
}

.pr-intro-scoring {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: center;
  font-size: 0.75rem;
  color: #94a3b8;
  margin-bottom: 1.25rem;
}

.pr-intro-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.pr-btn {
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.pr-btn-start {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.pr-btn-start:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.5);
}

.pr-btn-cancel,
.pr-btn-finish {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
}

.pr-btn-cancel:hover,
.pr-btn-finish:hover {
  background: rgba(139, 92, 246, 0.2);
}

.pr-btn-close-sm {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #64748b;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}

.pr-btn-close-sm:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.pr-btn-restart {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
}

.pr-btn-restart:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* ── Playing Field ── */
.pr-playing {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1rem;
  padding: 1.25rem;
  animation: pr-fade-in 0.3s ease;
}

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

.pr-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pr-header-emoji {
  font-size: 1.25rem;
}

.pr-header-title {
  font-size: 1rem;
  font-weight: 800;
  color: #c4b5fd;
}

/* ── Statusleiste ── */
.pr-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 0.75rem;
}

.pr-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 60px;
  flex: 1;
}

.pr-stat-label {
  font-size: 0.6875rem;
  color: #64748b;
  font-weight: 600;
}

.pr-stat-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #c4b5fd;
  white-space: nowrap;
}

.pr-stat-value.pr-done {
  color: #4ade80;
}

/* ── Sonnensystem-Visual ── */
.pr-solar-visual {
  position: relative;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #0a0e1a 0%, #060812 100%);
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.pr-sun {
  position: absolute;
  font-size: 1.5rem;
  z-index: 10;
  animation: pr-sun-pulse 3s ease-in-out infinite;
}

@keyframes pr-sun-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255, 200, 0, 0.6)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 14px rgba(255, 200, 0, 0.8)); }
}

.pr-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(139, 92, 246, 0.2);
}

.pr-orbit-1 { width: 50px;  height: 50px; }
.pr-orbit-2 { width: 76px;  height: 76px; }
.pr-orbit-3 { width: 102px; height: 102px; }
.pr-orbit-4 { width: 128px; height: 128px; }
.pr-orbit-5 { width: 160px; height: 160px; }
.pr-orbit-6 { width: 192px; height: 192px; }
.pr-orbit-7 { width: 220px; height: 220px; }
.pr-orbit-8 { width: 250px; height: 250px; }

.pr-orbit-slot {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px dashed rgba(139, 92, 246, 0.15);
  transition: all 0.3s ease;
}

.pr-slot-filled {
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.15);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
  animation: pr-planet-arrive 0.4s ease;
}

@keyframes pr-planet-arrive {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.2); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.pr-placed-planet {
  font-size: 1rem;
  line-height: 1;
}

/* ── Fortschrittsbalken ── */
.pr-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.pr-progress-fill {
  height: 100%;
  background: linear-gradient(to right, #8b5cf6, #7c3aed);
  border-radius: 3px;
  transition: width 0.4s ease;
  position: relative;
}

.pr-progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2));
}

/* ── Planeten-Karten ── */
.pr-planets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.pr-planet-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1rem 0.5rem;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.pr-planet-card:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.pr-planet-card:active {
  transform: scale(0.95);
}

.pr-planet-emoji {
  font-size: 1.75rem;
  line-height: 1;
}

.pr-planet-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #c4b5fd;
  text-align: center;
}

/* Platziert */
.pr-planet-card.pr-placed {
  opacity: 0.35;
  cursor: default;
  border-color: rgba(139, 92, 246, 0.08);
  background: rgba(139, 92, 246, 0.02);
  transform: none;
  box-shadow: none;
}

.pr-planet-card.pr-placed:hover {
  transform: none;
  box-shadow: none;
  background: rgba(139, 92, 246, 0.02);
}

/* Falsch */
.pr-planet-card.pr-wrong {
  animation: pr-shake 0.5s ease;
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.1);
}

@keyframes pr-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ── Popup ── */
.pr-popup {
  position: absolute;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 800;
  pointer-events: none;
  z-index: 50;
  animation: pr-popup-float 1s ease forwards;
  white-space: nowrap;
}

.pr-popup-positive {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.pr-popup-negative {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

@keyframes pr-popup-float {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}

/* ── Quiz ── */
.pr-quiz {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  animation: pr-fade-in 0.3s ease;
}

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

.pr-quiz-emoji {
  font-size: 1.5rem;
}

.pr-quiz-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: #fbbf24;
  margin: 0;
}

.pr-quiz-question {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.pr-quiz-q-emoji {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
}

.pr-quiz-q-text {
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0;
  line-height: 1.5;
}

.pr-quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.pr-quiz-option {
  padding: 0.75rem 1rem;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 0.75rem;
  color: #c4b5fd;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pr-quiz-option:hover:not(.pr-quiz-disabled) {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-2px);
}

.pr-quiz-disabled {
  cursor: default;
  opacity: 0.5;
}

.pr-quiz-correct {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
  opacity: 1 !important;
}

.pr-quiz-wrong {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
  opacity: 1 !important;
}

.pr-quiz-progress {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #64748b;
}

/* ── Ergebnis ── */
.pr-result {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  animation: pr-fade-in 0.4s ease;
}

.pr-result-header {
  margin-bottom: 0.75rem;
}

.pr-result-emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.25rem;
}

.pr-result-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #c4b5fd;
  margin: 0;
}

.pr-result-stars {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pr-star {
  font-size: 1.75rem;
  transition: all 0.3s ease;
}

.pr-star-earned {
  animation: pr-star-pop 0.4s ease;
}

.pr-star-empty {
  opacity: 0.25;
}

@keyframes pr-star-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.pr-result-score {
  margin-bottom: 1rem;
}

.pr-result-score-num {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: #c4b5fd;
  line-height: 1;
}

.pr-result-score-label {
  font-size: 0.8125rem;
  color: #64748b;
  font-weight: 600;
}

.pr-result-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
  text-align: left;
}

.pr-result-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 0.5rem;
}

.pr-result-stat-label {
  font-size: 0.75rem;
  color: #64748b;
}

.pr-result-stat-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #c4b5fd;
}

.pr-result-stat-bonus .pr-result-stat-value {
  color: #4ade80;
}

.pr-result-xp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 0.75rem;
  margin-bottom: 1.25rem;
  animation: pr-xp-glow 2s ease-in-out infinite;
}

@keyframes pr-xp-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(139, 92, 246, 0.2); }
  50% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); }
}

.pr-result-xp-icon {
  font-size: 1.25rem;
}

.pr-result-xp-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: #c4b5fd;
}

.pr-result-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .pr-planets-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }

  .pr-planet-card {
    padding: 0.75rem 0.25rem;
  }

  .pr-planet-emoji {
    font-size: 1.375rem;
  }

  .pr-planet-name {
    font-size: 0.6875rem;
  }

  .pr-solar-visual {
    height: 150px;
  }

  .pr-orbit-1 { width: 40px;  height: 40px; }
  .pr-orbit-2 { width: 62px;  height: 62px; }
  .pr-orbit-3 { width: 84px;  height: 84px; }
  .pr-orbit-4 { width: 106px; height: 106px; }
  .pr-orbit-5 { width: 132px; height: 132px; }
  .pr-orbit-6 { width: 158px; height: 158px; }
  .pr-orbit-7 { width: 182px; height: 182px; }
  .pr-orbit-8 { width: 208px; height: 208px; }

  .pr-quiz-options {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .pr-planets-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
  }

  .pr-planet-card {
    padding: 0.625rem 0.125rem;
  }

  .pr-planet-emoji {
    font-size: 1.25rem;
  }

  .pr-planet-name {
    font-size: 0.625rem;
  }

  .pr-solar-visual {
    height: 130px;
    transform: scale(0.85);
  }

  .pr-status {
    gap: 0.25rem;
    padding: 0.5rem;
  }

  .pr-stat {
    min-width: 50px;
  }

  .pr-stat-label {
    font-size: 0.625rem;
  }

  .pr-stat-value {
    font-size: 0.75rem;
  }

  .pr-intro-scoring {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .pr-result-stats {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   STERNEN-FLUG – Minispiel Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Modal ── */
.sf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.35s ease;
}
.sf-modal-overlay.sf-modal-visible {
  background: rgba(0, 0, 0, 0.7);
}
.sf-modal-overlay.sf-modal-hiding {
  background: rgba(0, 0, 0, 0);
}
.sf-modal-content {
  position: relative;
  background: #0f0a1e;
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 1.25rem;
  max-width: 520px;
  width: 94vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 92, 246, 0.1);
}
.sf-modal-overlay.sf-modal-visible .sf-modal-content {
  transform: scale(1) translateY(0);
}
.sf-modal-overlay.sf-modal-hiding .sf-modal-content {
  transform: scale(0.9) translateY(20px);
}
.sf-modal-content::-webkit-scrollbar {
  width: 6px;
}
.sf-modal-content::-webkit-scrollbar-track {
  background: transparent;
}
.sf-modal-content::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.2);
  border-radius: 3px;
}
.sf-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.35);
}

/* ── Intro ── */
.sf-intro {
  background: rgba(139, 92, 246, 0.05);
  border-radius: 1rem;
  padding: 1.25rem;
}
.sf-intro-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.sf-intro-emoji {
  font-size: 1.75rem;
}
.sf-intro-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #e2e8f0;
}
.sf-intro-desc {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* How to play */
.sf-intro-how {
  background: rgba(139, 92, 246, 0.06);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
}
.sf-how-title {
  font-weight: 700;
  color: #c4b5fd;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
}
.sf-how-items {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.sf-how-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #cbd5e1;
}
.sf-how-emoji {
  font-size: 1rem;
  min-width: 2rem;
  text-align: center;
}
.sf-how-text {
  flex: 1;
}

/* Wave previews */
.sf-intro-waves {
  background: rgba(139, 92, 246, 0.06);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
}
.sf-waves-title {
  font-weight: 700;
  color: #c4b5fd;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
}
.sf-waves-list {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.sf-wave-preview {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(139, 92, 246, 0.1);
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
}
.sf-wave-emoji {
  font-size: 1.125rem;
}
.sf-wave-name {
  font-weight: 700;
  color: #e2e8f0;
  font-size: 0.8125rem;
}

/* Bonus section */
.sf-intro-bonus {
  background: rgba(250, 204, 21, 0.08);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(250, 204, 21, 0.15);
}
.sf-bonus-title {
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}
.sf-bonus-desc {
  font-size: 0.8125rem;
  color: #94a3b8;
}

.sf-intro-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* ── Buttons ── */
.sf-btn {
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.sf-btn-start {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}
.sf-btn-start:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
.sf-btn-cancel,
.sf-btn-finish {
  background: rgba(139, 92, 246, 0.1);
  color: #c4b5fd;
}
.sf-btn-cancel:hover,
.sf-btn-finish:hover {
  background: rgba(139, 92, 246, 0.2);
}
.sf-btn-close-sm {
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
}
.sf-btn-close-sm:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.sf-btn-restart {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}
.sf-btn-restart:hover {
  transform: scale(1.05);
}

/* ── Playing Field ── */
.sf-playing {
  background: rgba(139, 92, 246, 0.05);
  border-radius: 1rem;
  padding: 1rem;
}
.sf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.sf-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sf-header-emoji {
  font-size: 1.25rem;
}
.sf-header-title {
  font-size: 1rem;
  font-weight: 800;
  color: #e2e8f0;
}
.sf-header-right {
  display: flex;
  align-items: center;
}

/* ── Statusleiste ── */
.sf-status {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.sf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 65px;
  background: rgba(139, 92, 246, 0.08);
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  flex: 1;
}
.sf-stat-label {
  font-size: 0.6875rem;
  color: #a78bfa;
  font-weight: 600;
}
.sf-stat-value {
  font-size: 0.8125rem;
  color: #e2e8f0;
  font-weight: 700;
}

/* ── Wellen-Fortschrittsbalken ── */
.sf-wave-progress {
  width: 100%;
  height: 1.25rem;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 0.625rem;
  margin-bottom: 0.75rem;
  position: relative;
  overflow: hidden;
}
.sf-wave-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
  border-radius: 0.625rem;
  transition: width 0.3s ease;
}
.sf-wave-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: #e2e8f0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ── Spielbereich (Nachthimmel) ── */
.sf-game-area {
  position: relative;
  width: 100%;
  height: 300px;
  background: radial-gradient(ellipse at 50% 50%, #0d0a1a 0%, #050310 100%);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(139, 92, 246, 0.15);
}

/* Hintergrund-Sterne */
.sf-bg-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sf-bg-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: sf-twinkle var(--duration, 3s) ease-in-out infinite alternate;
}
@keyframes sf-twinkle {
  0% { opacity: var(--min-opacity, 0.15); }
  100% { opacity: var(--max-opacity, 0.6); }
}

/* ── Schiff ── */
.sf-ship {
  position: absolute;
  left: 3%;
  width: 7%;
  display: flex;
  align-items: center;
  transition: top 0.05s linear;
  z-index: 10;
}
.sf-ship-icon {
  font-size: 1.75rem;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
  position: relative;
  z-index: 2;
  transform: rotate(45deg);
}
.sf-ship-flame {
  position: absolute;
  left: -4px;
  top: 60%;
  width: 12px;
  height: 6px;
  border-radius: 50% 0 0 50%;
  background: linear-gradient(90deg, transparent, #fbbf24 30%, #f97316 60%, #ef4444 100%);
  animation: sf-flame-flicker 0.15s ease-in-out infinite alternate;
  filter: blur(1px);
  z-index: 1;
}
.sf-ship-flame::after {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 4px;
  border-radius: 50% 0 0 50%;
  background: linear-gradient(90deg, transparent, #fde68a 30%, #fbbf24 70%);
  animation: sf-flame-flicker 0.1s ease-in-out infinite alternate-reverse;
  filter: blur(0.5px);
}
@keyframes sf-flame-flicker {
  0% { opacity: 0.7; transform: translateY(-50%) scaleX(0.85); }
  100% { opacity: 1; transform: translateY(-50%) scaleX(1.15); }
}
.sf-ship-hit {
  animation: sf-ship-shake 0.5s ease;
}
.sf-ship-hit .sf-ship-icon {
  filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.8));
}
.sf-ship-hit .sf-ship-flame {
  background: linear-gradient(90deg, transparent, #ef4444 30%, #dc2626 60%, #991b1b 100%);
}

/* Schutzschild */
.sf-ship-shielded .sf-ship-icon {
  filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.6)) drop-shadow(0 0 20px rgba(96, 165, 250, 0.3));
}
.sf-ship-shielded::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(96, 165, 250, 0.5);
  background: radial-gradient(circle, rgba(96, 165, 250, 0.12) 0%, transparent 70%);
  animation: sf-shield-pulse 0.8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}
@keyframes sf-shield-pulse {
  0% { transform: scale(1); opacity: 0.6; border-color: rgba(96, 165, 250, 0.4); }
  100% { transform: scale(1.15); opacity: 1; border-color: rgba(96, 165, 250, 0.7); }
}

/* Schild blockiert Treffer */
.sf-shield-block .sf-ship-icon {
  filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.9)) !important;
}
.sf-shield-block::after {
  border-color: rgba(96, 165, 250, 1) !important;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.3) 0%, transparent 70%) !important;
  transform: scale(1.3) !important;
}

/* Schild-Partikel */
.sf-particle-shield {
  background: #60a5fa;
  box-shadow: 0 0 4px #60a5fa;
}
@keyframes sf-ship-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* ── Asteroiden ── */
.sf-asteroid {
  position: absolute;
  border-radius: 40% 60% 50% 45%;
  background: radial-gradient(ellipse at 35% 35%, #6b5b4f, #3d3229 60%, #251e17 100%);
  border: 1px solid rgba(107, 91, 79, 0.4);
  z-index: 5;
  transition: left 0.05s linear;
}
.sf-asteroid-hit {
  animation: sf-asteroid-explode 0.4s ease forwards;
}
@keyframes sf-asteroid-explode {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; background: radial-gradient(ellipse, #ef4444, #7f1d1d); }
  100% { transform: scale(0); opacity: 0; }
}

/* ── Sammel-Sterne ── */
.sf-collect-star {
  position: absolute;
  z-index: 8;
  transition: left 0.05s linear;
}
.sf-collect-star-emoji {
  font-size: 1.5rem;
  animation: sf-star-pulse 1s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.5));
}
@keyframes sf-star-pulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.3)); }
  100% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.6)); }
}
.sf-star-collected-anim {
  animation: sf-star-collected 0.5s ease forwards;
}
@keyframes sf-star-collected {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

/* ── Partikel ── */
.sf-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  z-index: 15;
  pointer-events: none;
  animation: sf-particle-fly 0.5s ease forwards;
}
.sf-particle-hit {
  background: #ef4444;
  box-shadow: 0 0 4px #ef4444;
}
.sf-particle-collect {
  background: #fbbf24;
  box-shadow: 0 0 4px #fbbf24;
}
@keyframes sf-particle-fly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 10px), var(--dy, -15px)) scale(0); opacity: 0; }
}

/* ── Steuerungs-Buttons ── */
.sf-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.sf-ctrl-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.3);
  background: rgba(139, 92, 246, 0.1);
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.sf-ctrl-btn:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.5);
}
.sf-ctrl-btn:active {
  background: rgba(139, 92, 246, 0.4);
  transform: scale(0.92);
}

/* ── Info-Bar ── */
.sf-info-bar {
  font-size: 0.75rem;
  color: #94a3b8;
  text-align: center;
  padding: 0.375rem 0.5rem;
  background: rgba(139, 92, 246, 0.05);
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
}
.sf-info-bar strong {
  color: #fbbf24;
}
.sf-info-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}
.sf-info-success {
  background: rgba(250, 204, 21, 0.08);
  color: #fde68a;
}

/* ── Welle abgeschlossen ── */
.sf-wave-complete {
  background: rgba(139, 92, 246, 0.05);
  border-radius: 1rem;
  padding: 1.25rem;
  text-align: center;
}
.sf-wc-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.sf-wc-emoji {
  font-size: 2rem;
}
.sf-wc-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #e2e8f0;
}
.sf-wc-desc {
  font-size: 0.875rem;
  color: #a78bfa;
  margin-bottom: 1rem;
}
.sf-wc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.sf-wc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(139, 92, 246, 0.08);
  padding: 0.5rem;
  border-radius: 0.5rem;
}
.sf-wc-stat-label {
  font-size: 0.6875rem;
  color: #a78bfa;
}
.sf-wc-stat-value {
  font-size: 0.9375rem;
  color: #e2e8f0;
  font-weight: 700;
}
.sf-wc-next {
  margin-bottom: 1rem;
}
.sf-wc-next-label {
  font-size: 0.875rem;
  color: #94a3b8;
  margin-bottom: 0.25rem;
}
.sf-wc-next-wave {
  font-size: 1.125rem;
  font-weight: 800;
  color: #fbbf24;
}
.sf-wc-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

/* ── Game Over ── */
.sf-gameover {
  text-align: center;
  padding: 0.5rem;
}
.sf-gameover-visual {
  margin-bottom: 0.75rem;
}
.sf-gameover-emoji {
  font-size: 3rem;
}
.sf-gameover-header {
  margin-bottom: 0.75rem;
}
.sf-gameover-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fca5a5;
}
.sf-gameover-desc {
  font-size: 0.875rem;
  color: #94a3b8;
  margin-bottom: 1rem;
  line-height: 1.6;
}
.sf-gameover-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.sf-gameover-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── Quiz ── */
.sf-quiz {
  background: rgba(139, 92, 246, 0.05);
  border-radius: 1rem;
  padding: 1.25rem;
}
.sf-quiz-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.sf-quiz-emoji {
  font-size: 1.5rem;
}
.sf-quiz-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: #e2e8f0;
}
.sf-quiz-question {
  background: rgba(139, 92, 246, 0.06);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.sf-quiz-q-emoji {
  font-size: 1.5rem;
}
.sf-quiz-q-text {
  font-size: 1rem;
  color: #e2e8f0;
  font-weight: 600;
  line-height: 1.5;
}
.sf-quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.sf-quiz-option {
  padding: 0.75rem 1rem;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 0.5rem;
  color: #e2e8f0;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.sf-quiz-option:hover:not(.sf-quiz-disabled) {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.3);
}
.sf-quiz-disabled {
  cursor: default;
  opacity: 0.7;
}
.sf-quiz-correct {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #86efac !important;
}
.sf-quiz-wrong {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}
.sf-quiz-selected {
  outline: 2px solid currentColor;
}
.sf-quiz-progress {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #a78bfa;
}

/* ── Ergebnis ── */
.sf-result {
  text-align: center;
  padding: 0.5rem;
}
.sf-result-visual {
  margin-bottom: 0.75rem;
}
.sf-result-escape-emoji {
  font-size: 3rem;
}
.sf-result-header {
  margin-bottom: 0.75rem;
}
.sf-result-emoji {
  font-size: 2rem;
}
.sf-result-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #86efac;
}
.sf-result-msg {
  font-size: 0.875rem;
  color: #94a3b8;
  margin-bottom: 1rem;
  line-height: 1.6;
}
.sf-result-stars {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.sf-star {
  font-size: 1.75rem;
}
.sf-star-earned {
  animation: sf-star-pop 0.4s ease;
}
@keyframes sf-star-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.sf-star-empty {
  opacity: 0.25;
}
.sf-result-score {
  margin-bottom: 1rem;
}
.sf-result-score-num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #fbbf24;
}
.sf-result-score-label {
  font-size: 0.8125rem;
  color: #94a3b8;
}
.sf-result-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.sf-result-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(139, 92, 246, 0.08);
  padding: 0.5rem;
  border-radius: 0.5rem;
}
.sf-result-stat-label {
  font-size: 0.75rem;
  color: #a78bfa;
}
.sf-result-stat-value {
  font-size: 0.8125rem;
  color: #e2e8f0;
  font-weight: 700;
}

/* Gesammelte Fakten */
.sf-result-facts {
  background: rgba(139, 92, 246, 0.06);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  text-align: left;
}
.sf-result-facts-title {
  font-weight: 700;
  color: #c4b5fd;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.sf-result-facts-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sf-result-fact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sf-result-fact-emoji {
  font-size: 1rem;
}
.sf-result-fact-title {
  font-weight: 700;
  color: #fbbf24;
  font-size: 0.8125rem;
}
.sf-result-fact-text {
  font-size: 0.6875rem;
  color: #94a3b8;
  flex: 1;
  min-width: 150px;
}

/* XP */
.sf-result-xp {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(139, 92, 246, 0.1);
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.sf-result-xp-icon {
  font-size: 1.25rem;
}
.sf-result-xp-text {
  font-size: 0.875rem;
  color: #a78bfa;
  font-weight: 700;
}
.sf-result-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .sf-game-area {
    height: 260px;
  }
  .sf-controls {
    gap: 10rem;
  }
  .sf-ctrl-btn {
    width: 56px;
    height: 56px;
    font-size: 1.1rem;
  }
}
@media (max-width: 480px) {
  .sf-game-area {
    height: 220px;
  }
  .sf-ship {
    font-size: 1.25rem;
  }
  .sf-status {
    gap: 0.25rem;
  }
  .sf-stat {
    min-width: 50px;
  }
  .sf-stat-label {
    font-size: 0.625rem;
  }
  .sf-stat-value {
    font-size: 0.75rem;
  }
  .sf-controls {
    gap: 10rem;
  }
  .sf-ctrl-btn {
    width: 52px;
    height: 52px;
    font-size: 1rem;
  }
  .sf-result-stats {
    grid-template-columns: 1fr;
  }
  .sf-result-fact-item {
    flex-wrap: wrap;
  }
  .sf-quiz-options {
    grid-template-columns: 1fr;
  }
  .sf-wc-stats {
    grid-template-columns: 1fr;
  }
  .sf-gameover-stats {
    grid-template-columns: 1fr;
  }
}
/* ═══════════════════════════════════════════════════════════
   GRAVITATIONS-FLUCHT – Minispiel Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Modal ── */
.gf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transition: background 0.35s ease, backdrop-filter 0.35s ease;
  padding: 1rem;
}

.gf-modal-overlay.gf-modal-visible {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}

.gf-modal-overlay.gf-modal-hiding {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
}

.gf-modal-content {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: #0d0f1a;
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 1.25rem;
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.15), 0 25px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.gf-modal-overlay.gf-modal-visible .gf-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.gf-modal-overlay.gf-modal-hiding .gf-modal-content {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

.gf-modal-content::-webkit-scrollbar {
  width: 6px;
}

.gf-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.gf-modal-content::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.2);
  border-radius: 3px;
}

.gf-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.35);
}

/* ── Intro ── */
.gf-intro {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  animation: gf-fade-in 0.4s ease;
}

@keyframes gf-fade-in {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.gf-intro-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.gf-intro-emoji {
  font-size: 1.75rem;
}

.gf-intro-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #c4b5fd;
  margin: 0;
}

.gf-intro-desc {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* ── Objekt-Vorstellung ── */
.gf-intro-objects {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.gf-objects-title {
  font-weight: 700;
  font-size: 0.8125rem;
  color: #c4b5fd;
  margin: 0 0 0.5rem 0;
}

.gf-objects-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.gf-object-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  transition: all 0.2s ease;
}

.gf-object-preview:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
}

.gf-object-emoji {
  font-size: 1.125rem;
}

.gf-object-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #c4b5fd;
}

/* ── Spielprinzip ── */
.gf-intro-how {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.12);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.gf-how-title {
  font-weight: 700;
  font-size: 0.8125rem;
  color: #fca5a5;
  margin: 0 0 0.5rem 0;
}

.gf-how-items {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.gf-how-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #94a3b8;
}

.gf-how-emoji {
  font-size: 1rem;
  flex-shrink: 0;
}

.gf-how-text {
  line-height: 1.4;
}

/* ── Bonus-Hinweis ── */
.gf-intro-bonus {
  background: rgba(250, 204, 21, 0.06);
  border: 1px solid rgba(250, 204, 21, 0.15);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.gf-bonus-title {
  font-weight: 700;
  font-size: 0.8125rem;
  color: #fbbf24;
  margin: 0 0 0.25rem 0;
}

.gf-bonus-desc {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0;
}

.gf-intro-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.gf-btn {
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.gf-btn-start {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.gf-btn-start:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.5);
}

.gf-btn-cancel,
.gf-btn-finish {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
}

.gf-btn-cancel:hover,
.gf-btn-finish:hover {
  background: rgba(139, 92, 246, 0.2);
}

.gf-btn-close-sm {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #64748b;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}

.gf-btn-close-sm:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.gf-btn-restart {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
}

.gf-btn-restart:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* ── Playing Field ── */
.gf-playing {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1rem;
  padding: 1.25rem;
  animation: gf-fade-in 0.3s ease;
}

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

.gf-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gf-header-emoji {
  font-size: 1.25rem;
}

.gf-header-title {
  font-size: 1rem;
  font-weight: 800;
  color: #c4b5fd;
}

/* ── Statusleiste ── */
.gf-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 0.75rem;
}

.gf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 60px;
  flex: 1;
}

.gf-stat-label {
  font-size: 0.6875rem;
  color: #64748b;
  font-weight: 600;
}

.gf-stat-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #c4b5fd;
  white-space: nowrap;
}

/* ── Gefahrenstufen ── */
.gf-danger-safe { color: #4ade80; }
.gf-danger-moderate { color: #fb923c; }
.gf-danger-warning { color: #facc15; }
.gf-danger-critical { color: #f87171; animation: gf-danger-pulse 0.8s ease-in-out infinite; }

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

/* ── Runden-Fortschrittsbalken ── */
.gf-round-progress {
  width: 100%;
  height: 6px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.gf-round-progress-fill {
  height: 100%;
  background: linear-gradient(to right, #8b5cf6, #7c3aed);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ── Schwarzes Loch Visualisierung ── */
.gf-game-visual {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
  background: radial-gradient(ellipse at 0% 50%, #050510 0%, #020208 100%);
}

.gf-blackhole-area {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
}

.gf-blackhole-core {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, #000 0%, #000 60%, rgba(30, 10, 60, 0.8) 80%, transparent 100%);
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.8), 0 0 40px 10px rgba(30, 10, 60, 0.3);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.gf-blackhole-ring {
  position: absolute;
  width: 50px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.4);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.3), inset 0 0 10px rgba(139, 92, 246, 0.1);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(75deg);
  animation: gf-ring-rotate 8s linear infinite;
  z-index: 5;
}

@keyframes gf-ring-rotate {
  from { transform: translate(-50%, -50%) rotateX(75deg) rotateZ(0deg); }
  to { transform: translate(-50%, -50%) rotateX(75deg) rotateZ(360deg); }
}

.gf-blackhole-accretion {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 20%, rgba(139, 92, 246, 0.1) 40%, rgba(167, 139, 250, 0.05) 60%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: gf-accretion-pulse 3s ease-in-out infinite alternate;
  z-index: 2;
}

@keyframes gf-accretion-pulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* ── Raumschiff-Track ── */
.gf-ship-track {
  position: absolute;
  left: 55px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.1);
}

.gf-ship-danger-zone {
  position: absolute;
  left: 0;
  top: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(to right, rgba(239, 68, 68, 0.15), transparent);
}

.gf-ship-safe-zone {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(to left, rgba(34, 197, 94, 0.08), transparent);
}

.gf-ship {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  z-index: 20;
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.4));
}

.gf-ship-shake {
  animation: gf-ship-wobble 0.5s ease;
}

@keyframes gf-ship-wobble {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  20% { transform: translate(-50%, -50%) rotate(-12deg) translateX(-4px); }
  40% { transform: translate(-50%, -50%) rotate(8deg) translateX(-3px); }
  60% { transform: translate(-50%, -50%) rotate(-6deg) translateX(-2px); }
  80% { transform: translate(-50%, -50%) rotate(3deg) translateX(-1px); }
}

/* ── Entfernungsanzeige ── */
.gf-distance-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.gf-distance-label {
  font-size: 0.6875rem;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
}

.gf-distance-track {
  flex: 1;
  height: 8px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.gf-distance-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(to right, #ef4444, #f59e0b, #22c55e);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.gf-distance-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2));
  border-radius: 0 4px 4px 0;
}

/* ── Frage ── */
.gf-question-area {
  margin-bottom: 1rem;
}

.gf-question-box {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 0.5rem;
}

.gf-question-round {
  font-size: 0.6875rem;
  color: #8b5cf6;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gf-question-text {
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0.375rem 0 0 0;
  line-height: 1.5;
}

.gf-hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  background: rgba(250, 204, 21, 0.08);
  border: 1px solid rgba(250, 204, 21, 0.2);
  border-radius: 0.5rem;
  color: #fbbf24;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gf-hint-btn:hover {
  background: rgba(250, 204, 21, 0.15);
  border-color: rgba(250, 204, 21, 0.35);
}

.gf-hint-text {
  margin-top: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: rgba(250, 204, 21, 0.06);
  border: 1px solid rgba(250, 204, 21, 0.12);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: #fcd34d;
  font-style: italic;
  line-height: 1.4;
}

/* ── Antwort-Optionen ── */
.gf-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}

.gf-option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1rem 0.75rem;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 0.75rem;
  color: #c4b5fd;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 700;
}

.gf-option-btn:hover:not(.gf-option-disabled) {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.gf-option-btn:active:not(.gf-option-disabled) {
  transform: scale(0.97);
}

.gf-option-emoji {
  font-size: 1.5rem;
  line-height: 1;
}

.gf-option-text {
  text-align: center;
  line-height: 1.3;
}

.gf-option-disabled {
  cursor: default;
  opacity: 0.5;
  transform: none !important;
  box-shadow: none !important;
}

.gf-option-correct {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
  opacity: 1 !important;
}

.gf-option-wrong {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
  opacity: 1 !important;
  animation: gf-shake 0.5s ease;
}

.gf-option-selected {
  opacity: 1 !important;
}

@keyframes gf-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ── Popup ── */
.gf-popup {
  position: absolute;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 800;
  pointer-events: none;
  z-index: 50;
  animation: gf-popup-float 1s ease forwards;
  white-space: nowrap;
}

.gf-popup-positive {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.gf-popup-negative {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

@keyframes gf-popup-float {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}

/* ── Game Over ── */
.gf-gameover {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  animation: gf-fade-in 0.4s ease;
}

.gf-gameover-visual {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gf-blackhole-large {
  width: 40px !important;
  height: 40px !important;
  box-shadow: 0 0 40px 15px rgba(0, 0, 0, 0.9), 0 0 80px 30px rgba(30, 10, 60, 0.4) !important;
}

.gf-blackhole-ring-large {
  width: 80px !important;
  height: 28px !important;
}

.gf-gameover-header {
  margin-bottom: 0.5rem;
}

.gf-gameover-emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.25rem;
}

.gf-gameover-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: #fca5a5;
  margin: 0;
}

.gf-gameover-desc {
  font-size: 0.875rem;
  color: #94a3b8;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.gf-gameover-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.gf-gameover-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Quiz ── */
.gf-quiz {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  animation: gf-fade-in 0.3s ease;
}

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

.gf-quiz-emoji {
  font-size: 1.5rem;
}

.gf-quiz-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: #fbbf24;
  margin: 0;
}

.gf-quiz-question {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.gf-quiz-q-emoji {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
}

.gf-quiz-q-text {
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0;
  line-height: 1.5;
}

.gf-quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.gf-quiz-option {
  padding: 0.75rem 1rem;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 0.75rem;
  color: #c4b5fd;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gf-quiz-option:hover:not(.gf-quiz-disabled) {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-2px);
}

.gf-quiz-disabled {
  cursor: default;
  opacity: 0.5;
}

.gf-quiz-correct {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
  opacity: 1 !important;
}

.gf-quiz-wrong {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
  opacity: 1 !important;
}

.gf-quiz-progress {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #64748b;
}

/* ── Ergebnis ── */
.gf-result {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  animation: gf-fade-in 0.4s ease;
}

.gf-result-escape-visual {
  position: relative;
  width: 100%;
  height: 80px;
  border-radius: 0.75rem;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #0a0e1a 0%, #060812 100%);
  margin-bottom: 1rem;
}

.gf-result-stars-bg {
  position: absolute;
  inset: 0;
}

.gf-result-bg-star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: gf-star-twinkle 2s ease-in-out infinite alternate;
}

@keyframes gf-star-twinkle {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

.gf-result-escape-emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  z-index: 10;
  animation: gf-rocket-fly 2s ease-in-out infinite;
}

@keyframes gf-rocket-fly {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-8px); }
}

.gf-result-header {
  margin-bottom: 0.5rem;
}

.gf-result-emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.25rem;
}

.gf-result-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #c4b5fd;
  margin: 0;
}

.gf-result-escape-msg {
  font-size: 0.9375rem;
  color: #4ade80;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.gf-result-stars {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.gf-star {
  font-size: 1.75rem;
  transition: all 0.3s ease;
}

.gf-star-earned {
  animation: gf-star-pop 0.4s ease;
}

.gf-star-empty {
  opacity: 0.25;
}

@keyframes gf-star-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.gf-result-score {
  margin-bottom: 1rem;
}

.gf-result-score-num {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: #c4b5fd;
  line-height: 1;
}

.gf-result-score-label {
  font-size: 0.8125rem;
  color: #64748b;
  font-weight: 600;
}

.gf-result-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
  text-align: left;
}

.gf-result-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 0.5rem;
}

.gf-result-stat-label {
  font-size: 0.75rem;
  color: #64748b;
}

.gf-result-stat-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #c4b5fd;
}

/* ── Entdeckte Fakten ── */
.gf-result-facts {
  margin-bottom: 1rem;
}

.gf-result-facts-title {
  font-weight: 700;
  font-size: 0.8125rem;
  color: #c4b5fd;
  margin: 0 0 0.5rem 0;
  text-align: left;
}

.gf-result-facts-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.gf-result-fact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 0.5rem;
  text-align: left;
}

.gf-result-fact-emoji {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.gf-result-fact-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #c4b5fd;
  flex-shrink: 0;
}

.gf-result-fact-text {
  font-size: 0.6875rem;
  color: #94a3b8;
  line-height: 1.4;
}

/* ── XP-Belohnung ── */
.gf-result-xp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 0.75rem;
  margin-bottom: 1.25rem;
  animation: gf-xp-glow 2s ease-in-out infinite;
}

@keyframes gf-xp-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(139, 92, 246, 0.2); }
  50% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); }
}

.gf-result-xp-icon {
  font-size: 1.25rem;
}

.gf-result-xp-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: #c4b5fd;
}

.gf-result-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .gf-game-visual {
    height: 120px;
  }

  .gf-options-grid {
    gap: 0.5rem;
  }

  .gf-option-btn {
    padding: 0.75rem 0.5rem;
  }

  .gf-option-emoji {
    font-size: 1.25rem;
  }

  .gf-option-text {
    font-size: 0.8125rem;
  }

  .gf-ship-track {
    left: 45px;
    right: 12px;
  }

  .gf-distance-bar {
    flex-wrap: nowrap;
  }
}

@media (max-width: 480px) {
  .gf-status {
    gap: 0.25rem;
    padding: 0.5rem;
  }

  .gf-stat {
    min-width: 50px;
  }

  .gf-stat-label {
    font-size: 0.625rem;
  }

  .gf-stat-value {
    font-size: 0.75rem;
  }

  .gf-options-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
  }

  .gf-option-btn {
    padding: 0.625rem 0.375rem;
  }

  .gf-option-emoji {
    font-size: 1.125rem;
  }

  .gf-option-text {
    font-size: 0.75rem;
  }

  .gf-game-visual {
    height: 100px;
  }

  .gf-gameover-stats {
    grid-template-columns: 1fr;
  }

  .gf-result-stats {
    grid-template-columns: 1fr;
  }

  .gf-result-fact-item {
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════════════════════
   RAUMFAHRT-ZEITREISE – Minispiel Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Modal ── */
.rf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transition: background 0.35s ease, backdrop-filter 0.35s ease;
  padding: 1rem;
}

.rf-modal-overlay.rf-modal-visible {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}

.rf-modal-overlay.rf-modal-hiding {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
}

.rf-modal-content {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: #0d0f1a;
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 1.25rem;
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.15), 0 25px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.rf-modal-overlay.rf-modal-visible .rf-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.rf-modal-overlay.rf-modal-hiding .rf-modal-content {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

.rf-modal-content::-webkit-scrollbar {
  width: 6px;
}

.rf-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.rf-modal-content::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.2);
  border-radius: 3px;
}

.rf-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.35);
}

/* ── Intro ── */
.rf-intro {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  animation: rf-fade-in 0.4s ease;
}

@keyframes rf-fade-in {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.rf-intro-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.rf-intro-emoji {
  font-size: 1.75rem;
}

.rf-intro-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #c4b5fd;
  margin: 0;
}

.rf-intro-desc {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.rf-intro-legend {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.rf-legend-title {
  font-weight: 700;
  font-size: 0.8125rem;
  color: #c4b5fd;
  margin: 0 0 0.5rem 0;
}

.rf-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
}

.rf-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

.rf-legend-info {
  color: #c4b5fd;
}

.rf-legend-emoji {
  font-size: 0.875rem;
}

.rf-legend-name {
  font-weight: 600;
  color: #c4b5fd;
}

.rf-intro-bonus {
  background: rgba(250, 204, 21, 0.06);
  border: 1px solid rgba(250, 204, 21, 0.15);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.rf-bonus-title {
  font-weight: 700;
  font-size: 0.8125rem;
  color: #fbbf24;
  margin: 0 0 0.25rem 0;
}

.rf-bonus-desc {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0;
}

.rf-intro-scoring {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: center;
  font-size: 0.75rem;
  color: #94a3b8;
  margin-bottom: 1.25rem;
}

.rf-intro-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.rf-btn {
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.rf-btn-start {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.rf-btn-start:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.5);
}

.rf-btn-cancel,
.rf-btn-finish {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
}

.rf-btn-cancel:hover,
.rf-btn-finish:hover {
  background: rgba(139, 92, 246, 0.2);
}

.rf-btn-close-sm {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #64748b;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}

.rf-btn-close-sm:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.rf-btn-restart {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
}

.rf-btn-restart:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* ── Playing Field ── */
.rf-playing {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1rem;
  padding: 1.25rem;
  animation: rf-fade-in 0.3s ease;
}

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

.rf-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rf-header-emoji {
  font-size: 1.25rem;
}

.rf-header-title {
  font-size: 1rem;
  font-weight: 800;
  color: #c4b5fd;
}

/* ── Statusleiste ── */
.rf-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 0.75rem;
}

.rf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 60px;
  flex: 1;
}

.rf-stat-label {
  font-size: 0.6875rem;
  color: #64748b;
  font-weight: 600;
}

.rf-stat-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #c4b5fd;
  white-space: nowrap;
}

.rf-stat-value.rf-done {
  color: #4ade80;
}

/* ── Anweisung ── */
.rf-instruction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.rf-instruction-emoji {
  font-size: 1rem;
  flex-shrink: 0;
}

.rf-instruction-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #c4b5fd;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .rf-instruction {
    padding: 0.375rem 0.5rem;
  }

  .rf-instruction-text {
    font-size: 0.6875rem;
  }
}

/* ── Zeitstrahl-Visual ── */
.rf-timeline-visual {
  position: relative;
  height: 75px;
  margin-bottom: 1rem;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 0.75rem;
  overflow: visible;
  padding: 0 12px;
}

.rf-timeline-line {
  position: absolute;
  top: 28px;
  left: 10px;
  right: 10px;
  height: 3px;
  background: linear-gradient(to right, #8b5cf6, #6366f1, #4f46e5);
  border-radius: 2px;
}

.rf-timeline-slot {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  transition: all 0.3s ease;
}

.rf-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1e1b4b;
  border: 2px solid rgba(139, 92, 246, 0.3);
  order: 2;
  transition: all 0.3s ease;
}

.rf-slot-filled .rf-timeline-dot {
  background: #8b5cf6;
  border-color: #a78bfa;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
  animation: rf-dot-pop 0.4s ease;
}

@keyframes rf-dot-pop {
  0% { transform: scale(0.5); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.rf-timeline-year {
  font-size: 0.625rem;
  font-weight: 700;
  color: #64748b;
  order: 1;
  white-space: nowrap;
  margin-bottom: 2px;
}

.rf-slot-filled .rf-timeline-year {
  color: #c4b5fd;
}

.rf-timeline-emoji-slot {
  font-size: 0.875rem;
  min-height: 1rem;
  order: 3;
  margin-top: 2px;
}

.rf-placed-emoji {
  display: inline-block;
  animation: rf-emoji-arrive 0.4s ease;
}

@keyframes rf-emoji-arrive {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Fortschrittsbalken ── */
.rf-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.rf-progress-fill {
  height: 100%;
  background: linear-gradient(to right, #8b5cf6, #7c3aed);
  border-radius: 3px;
  transition: width 0.4s ease;
  position: relative;
}

.rf-progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2));
}

/* ── Meilenstein-Karten ── */
.rf-milestones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.rf-milestone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1rem 0.5rem;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.rf-milestone-card:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.rf-milestone-card:active {
  transform: scale(0.95);
}

.rf-milestone-emoji {
  font-size: 1.75rem;
  line-height: 1;
}

.rf-milestone-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #c4b5fd;
  text-align: center;
}

.rf-milestone-year-hint {
  font-size: 0.6875rem;
  color: #64748b;
  font-weight: 600;
  transition: all 0.3s ease;
}

.rf-milestone-year-hint.rf-year-revealed {
  color: #8b5cf6;
}

/* Platziert */
.rf-milestone-card.rf-placed {
  opacity: 0.35;
  cursor: default;
  border-color: rgba(139, 92, 246, 0.08);
  background: rgba(139, 92, 246, 0.02);
  transform: none;
  box-shadow: none;
}

.rf-milestone-card.rf-placed:hover {
  transform: none;
  box-shadow: none;
  background: rgba(139, 92, 246, 0.02);
}

/* Falsch */
.rf-milestone-card.rf-wrong {
  animation: rf-shake 0.5s ease;
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.1);
}

@keyframes rf-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ── Popup ── */
.rf-popup {
  position: absolute;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 800;
  pointer-events: none;
  z-index: 50;
  animation: rf-popup-float 1s ease forwards;
  white-space: nowrap;
}

.rf-popup-positive {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.rf-popup-negative {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

@keyframes rf-popup-float {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}

/* ── Quiz ── */
.rf-quiz {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  animation: rf-fade-in 0.3s ease;
}

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

.rf-quiz-emoji {
  font-size: 1.5rem;
}

.rf-quiz-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: #fbbf24;
  margin: 0;
}

.rf-quiz-question {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.rf-quiz-q-emoji {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
}

.rf-quiz-q-text {
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0;
  line-height: 1.5;
}

.rf-quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.rf-quiz-option {
  padding: 0.75rem 1rem;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 0.75rem;
  color: #c4b5fd;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rf-quiz-option:hover:not(.rf-quiz-disabled) {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-2px);
}

.rf-quiz-disabled {
  cursor: default;
  opacity: 0.5;
}

.rf-quiz-correct {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
  opacity: 1 !important;
}

.rf-quiz-wrong {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
  opacity: 1 !important;
}

.rf-quiz-progress {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #64748b;
}

/* ── Ergebnis ── */
.rf-result {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  animation: rf-fade-in 0.4s ease;
}

.rf-result-header {
  margin-bottom: 0.75rem;
}

.rf-result-emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.25rem;
}

.rf-result-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #c4b5fd;
  margin: 0;
}

.rf-result-stars {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.rf-star {
  font-size: 1.75rem;
  transition: all 0.3s ease;
}

.rf-star-earned {
  animation: rf-star-pop 0.4s ease;
}

.rf-star-empty {
  opacity: 0.25;
}

@keyframes rf-star-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.rf-result-score {
  margin-bottom: 1rem;
}

.rf-result-score-num {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: #c4b5fd;
  line-height: 1;
}

.rf-result-score-label {
  font-size: 0.8125rem;
  color: #64748b;
  font-weight: 600;
}

.rf-result-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
  text-align: left;
}

.rf-result-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 0.5rem;
}

.rf-result-stat-label {
  font-size: 0.75rem;
  color: #64748b;
}

.rf-result-stat-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #c4b5fd;
}

.rf-result-stat-bonus .rf-result-stat-value {
  color: #4ade80;
}

.rf-result-xp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 0.75rem;
  margin-bottom: 1.25rem;
  animation: rf-xp-glow 2s ease-in-out infinite;
}

@keyframes rf-xp-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(139, 92, 246, 0.2); }
  50% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); }
}

.rf-result-xp-icon {
  font-size: 1.25rem;
}

.rf-result-xp-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: #c4b5fd;
}

.rf-result-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Ergebnis-Fakten ── */
.rf-result-facts {
  margin-bottom: 1.25rem;
  text-align: left;
}

.rf-result-facts-title {
  font-weight: 700;
  font-size: 0.875rem;
  color: #c4b5fd;
  margin: 0 0 0.75rem 0;
}

.rf-result-facts-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rf-result-fact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 0.5rem;
}

.rf-result-fact-emoji {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.rf-result-fact-year {
  font-size: 0.75rem;
  font-weight: 800;
  color: #8b5cf6;
  flex-shrink: 0;
  min-width: 36px;
}

.rf-result-fact-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #c4b5fd;
  flex-shrink: 0;
}

.rf-result-fact-text {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.4;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .rf-milestones-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .rf-milestone-card {
    padding: 0.75rem 0.25rem;
  }

  .rf-milestone-emoji {
    font-size: 1.375rem;
  }

  .rf-milestone-name {
    font-size: 0.6875rem;
  }

  .rf-timeline-visual {
    height: 70px;
  }

  .rf-timeline-year {
    font-size: 0.5625rem;
  }

  .rf-quiz-options {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .rf-milestones-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
  }

  .rf-milestone-card {
    padding: 0.625rem 0.125rem;
  }

  .rf-milestone-emoji {
    font-size: 1.25rem;
  }

  .rf-milestone-name {
    font-size: 0.625rem;
  }

  .rf-timeline-visual {
    height: 65px;
    font-size: 0.625rem;
  }

  .rf-status {
    gap: 0.25rem;
    padding: 0.5rem;
  }

  .rf-stat {
    min-width: 50px;
  }

  .rf-stat-label {
    font-size: 0.625rem;
  }

  .rf-stat-value {
    font-size: 0.75rem;
  }

  .rf-intro-scoring {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .rf-result-stats {
    grid-template-columns: 1fr;
  }

  .rf-result-fact-item {
    flex-wrap: wrap;
  }
}