@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

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

body {
  font-family: 'Nunito', sans-serif;
  min-height: 100vh;
  background: linear-gradient(135deg, #6B21A8, #DB2777);
  color: white;
}

.card {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  margin: 1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.btn {
  background: #F59E0B;
  color: #1F2937;
  border: none;
  padding: 1rem 2rem;
  border-radius: 15px;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  margin-top: 1rem;
  font-family: 'Nunito', sans-serif;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 0 4px 15px rgba(245,158,11,0.4);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245,158,11,0.5);
}

.btn:active { transform: translateY(0); }

.btn-secondary {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow: none;
}

.ruby { font-size: 3rem; }

input {
  width: 100%;
  padding: 1rem;
  border-radius: 10px;
  border: 3px solid transparent;
  font-size: 1.5rem;
  text-align: center;
  margin: 0.5rem 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  color: #1F2937;
  transition: border-color 0.2s;
}

input:focus {
  outline: none;
  border-color: #F59E0B;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 1rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.title {
  font-size: 2.5rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.subtitle {
  text-align: center;
  opacity: 0.85;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.error-msg {
  background: rgba(239,68,68,0.3);
  border: 1px solid rgba(239,68,68,0.5);
  border-radius: 10px;
  padding: 0.75rem;
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 600;
}

label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 700;
  opacity: 0.9;
  font-size: 0.95rem;
}

.form-group { margin-bottom: 1rem; }

/* Dashboard */
.stats-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat-box {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border-radius: 15px;
  padding: 1rem;
  text-align: center;
}

.stat-value {
  font-size: 2rem;
  font-weight: 900;
  display: block;
}

.stat-label {
  font-size: 0.8rem;
  opacity: 0.8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.progress-bar-container {
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  height: 12px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.progress-bar {
  background: linear-gradient(90deg, #F59E0B, #FCD34D);
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 0.3rem;
  text-align: right;
}

/* Übung */
.task-display {
  font-size: 2.8rem;
  font-weight: 900;
  text-align: center;
  padding: 1.5rem;
  letter-spacing: 0.02em;
  background: rgba(0,0,0,0.15);
  border-radius: 15px;
  margin-bottom: 1rem;
}

.feedback {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 1rem;
  border-radius: 12px;
  margin: 1rem 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback.correct {
  background: rgba(34,197,94,0.3);
  border: 2px solid rgba(34,197,94,0.5);
}

.feedback.wrong {
  background: rgba(239,68,68,0.3);
  border: 2px solid rgba(239,68,68,0.5);
}

.rubine-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 800;
}

.ruby-emoji {
  font-size: 2rem;
}

/* Flying rubies animation */
.fly-ruby-container {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
}

.fly-ruby-item {
  position: fixed;
  font-size: 2rem;
  animation: fly-up 1s ease-out forwards;
}

@keyframes fly-up {
  0% {
    transform: scale(0.5) translateY(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.5) translateY(-60px);
    opacity: 1;
  }
  100% {
    transform: scale(2) translateY(-150px);
    opacity: 0;
  }
}

@keyframes fly {
  0% { transform: scale(0) translateY(0); opacity: 1; }
  100% { transform: scale(2) translateY(-100px); opacity: 0; }
}

.fly-ruby { animation: fly 0.8s ease-out; }

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(245,158,11,0.3);
  border: 1px solid rgba(245,158,11,0.5);
  border-radius: 20px;
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.logout-link {
  text-align: center;
  margin-top: 1rem;
}

.logout-link a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.9rem;
}

.logout-link a:hover { opacity: 1; color: white; }

/* Number input - hide arrows */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; }

/* ========== LERNMODUS ========== */

/* Schriftliche Aufgabe */
.aufgabe-gross { margin: 1rem 0; }

.schriftl-aufgabe {
    font-size: 2rem;
    font-weight: 900;
    text-align: right;
    background: rgba(0,0,0,0.25);
    padding: 1.5rem 2rem;
    border-radius: 15px;
    margin: 0.5rem 0;
    font-family: 'Courier New', monospace;
    line-height: 1.6;
}

.zeile { padding: 0.2rem 0; }

.op-zeile {
    border-top: 3px solid rgba(255,255,255,0.5);
    padding-top: 0.5rem;
    margin-top: 0.3rem;
}

.trennlinie {
    border-bottom: 4px double rgba(255,255,255,0.7);
    margin: 0.5rem 0;
}

.ergebnis-zeile {
    color: #FCD34D;
    font-size: 2.2rem;
}

/* Schritte */
.schritt-box {
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin: 0.5rem 0;
    font-size: 1rem;
    border-left: 4px solid rgba(255,255,255,0.3);
}

.schritt-leihe {
    background: rgba(248,113,113,0.2);
    border-left: 4px solid #F87171 !important;
}

.schritt-num {
    background: #F59E0B;
    color: #1F2937;
    padding: 0.15rem 0.55rem;
    border-radius: 8px;
    font-weight: 800;
    margin-right: 0.4rem;
    font-size: 0.85rem;
}

.ergebnis-highlight {
    font-size: 1.4rem;
    font-weight: 900;
    color: #FCD34D;
}

.leihe-badge {
    background: rgba(248,113,113,0.4);
    border-radius: 8px;
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

.uebertrag-badge {
    background: rgba(251,191,36,0.35);
    border-radius: 8px;
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

/* Erklärungsbox */
.erklaer-box {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin: 1rem 0;
    font-size: 1.05rem;
    line-height: 1.6;
    border-left: 4px solid rgba(255,255,255,0.3);
    white-space: pre-line;
    min-height: 60px;
}

/* Button-Varianten */
.btn-sub  { background: #EC4899; box-shadow: 0 4px 15px rgba(236,72,153,0.4); }
.btn-sub:hover { box-shadow: 0 6px 20px rgba(236,72,153,0.5); }
.btn-stell { background: #8B5CF6; box-shadow: 0 4px 15px rgba(139,92,246,0.4); }
.btn-stell:hover { box-shadow: 0 6px 20px rgba(139,92,246,0.5); }
.btn-back { background: rgba(255,255,255,0.2); color: white; box-shadow: none; }
.btn-back:hover { background: rgba(255,255,255,0.3); box-shadow: none; }

/* Stellenwert-Visualisierung */
.stellen-input {
    width: 100%;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.stellen-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.3rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0;
}

.stellen-col {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 0.3rem;
    min-width: 44px;
    text-align: center;
    opacity: 0.5;
    transition: opacity 0.3s, transform 0.2s;
}

.stellen-aktiv {
    opacity: 1;
    transform: scale(1.03);
    background: rgba(255,255,255,0.15);
}

.stellen-header { font-size: 1.2rem; }
.stellen-name { font-size: 0.55rem; opacity: 0.8; }
.stellen-anzahl { font-size: 1.5rem; font-weight: 900; color: #FCD34D; }
.stellen-emojis { font-size: 0.7rem; word-break: break-all; min-height: 1.2rem; }

.stellen-erklaerung {
    background: rgba(0,0,0,0.25);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    font-size: 1rem;
    line-height: 2;
    margin-top: 0.5rem;
}

/* Animation */
.animate-in {
    animation: slideIn 0.35s ease-out;
}

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

/* Lernmodus-Button im Dashboard */
.btn-lernmodus {
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
    box-shadow: 0 4px 15px rgba(139,92,246,0.4);
}
.btn-lernmodus:hover { box-shadow: 0 6px 20px rgba(139,92,246,0.6); }

@media (max-width: 480px) {
    .stellen-grid { grid-template-columns: repeat(3, 1fr); }
    .schriftl-aufgabe { font-size: 1.3rem; padding: 1rem; }
    .stellen-name { font-size: 0.5rem; }
}

/* ─── Lösungswege ────────────────────────────────────────────── */
.weg-card {
  border: 2px solid transparent;
  transition: all 0.3s;
  margin-bottom: 1rem;
}
.weg-liebling {
  border-color: #F59E0B;
  background: rgba(245, 158, 11, 0.2);
}
.weg-titel {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.weg-stern {
  color: #FCD34D;
}
.weg-beschr {
  font-size: 0.9rem;
  opacity: 0.82;
  margin-bottom: 0.5rem;
}
.weg-erklaer {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.9rem 1rem;
  border-radius: 10px;
  font-family: 'Courier New', monospace;
  font-size: 0.88rem;
  white-space: pre-wrap;
  margin: 0.5rem 0;
  overflow-x: auto;
  line-height: 1.6;
}
.btn-weg {
  width: auto;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  margin-top: 0.5rem;
}
.btn-liebling {
  background: #10B981;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
.btn-liebling:hover {
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* ─── Weg-Hint Box (Übungsmodus) ─────────────────────────────── */
.weg-hint-box { margin: 0.5rem 0; }
.btn-hint { background: rgba(139,92,246,0.5); color: white; border: 1px solid rgba(255,255,255,0.3); padding: 0.5rem 1rem; border-radius: 10px; cursor: pointer; font-size: 0.9rem; font-family: 'Nunito', sans-serif; font-weight: 600; }
.btn-hint:hover { background: rgba(139,92,246,0.7); }