/* ===== MATHE / TRAINING ===== */
.mathe-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.task-card { background: white; border-radius: 24px; padding: 28px; border: 4px solid var(--yellow); box-shadow: 0 8px 32px rgba(255,229,102,0.3); text-align: center; }
.task-mascot-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 4px solid var(--peach); margin: 0 auto 14px; display: block; box-shadow: 0 4px 16px rgba(0,0,0,0.15); animation: bounce 2s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.task-klasse { font-size: 0.75rem; font-weight: 700; color: var(--brown); background: var(--cream); border-radius: 20px; padding: 3px 12px; display: inline-block; margin-bottom: 10px; }
.task-topic { font-size: 0.72rem; font-weight: 700; color: var(--purple); background: var(--lavender); border-radius: 20px; padding: 2px 10px; display: inline-block; margin-left: 6px; }
.task-story { background: var(--cream); border-radius: 14px; padding: 12px 16px; font-size: 0.98rem; font-weight: 700; color: var(--dark); margin-bottom: 16px; line-height: 1.5; border-left: 4px solid var(--orange); text-align: left; }
.task-equation { font-family: 'Baloo 2', cursive; font-size: 2.8rem; font-weight: 800; color: var(--dark); margin-bottom: 18px; letter-spacing: 2px; }
.attempts-row { display: flex; gap: 5px; justify-content: center; margin-bottom: 10px; }
.attempt-dot { font-size: 1.2rem; }
.answer-input-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 12px; }
.answer-input { font-family: 'Baloo 2', cursive; font-size: 2.6rem; font-weight: 800; width: 150px; text-align: center; border: 4px solid var(--yellow); border-radius: 18px; padding: 8px 14px; color: var(--dark); background: white; outline: none; transition: all 0.2s; box-shadow: 0 4px 12px rgba(255,229,102,0.3); }
.answer-input:focus { border-color: var(--orange); transform: scale(1.03); }
.answer-input.correct-input { border-color: var(--green); background: #f0fff8; animation: correctPop 0.4s ease; }
.answer-input.wrong-input { border-color: #FF5F5F; background: #fff0f0; animation: wrongShake 0.4s ease; }
@keyframes correctPop { 0% { transform: scale(1) } 50% { transform: scale(1.12) } 100% { transform: scale(1) } }
@keyframes wrongShake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-10px) } 75% { transform: translateX(10px) } }

/* Clock widget (for time questions) */
.clock-widget { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--dark); background: white; position: relative; margin: 0 auto 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.clock-face { width: 100%; height: 100%; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.submit-btn { background: linear-gradient(135deg, var(--green), #2ea87a); border: none; border-radius: 14px; padding: 13px 24px; font-family: 'Baloo 2', cursive; font-size: 1.1rem; font-weight: 700; color: white; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 0 rgba(0,0,0,0.15); }
.submit-btn:hover { transform: translateY(-2px); }
.submit-btn:active { transform: translateY(1px); }
.skip-btn { background: linear-gradient(135deg, #FFE566, #FFB347); border: none; border-radius: 14px; padding: 13px 18px; font-family: 'Baloo 2', cursive; font-size: 0.95rem; font-weight: 700; color: var(--dark); cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 0 rgba(0,0,0,0.1); }
.skip-btn:hover { transform: translateY(-2px); }
.hint-btn { background: linear-gradient(135deg, var(--sky), var(--lavender)); border: none; border-radius: 12px; padding: 8px 16px; font-family: 'Baloo 2', cursive; font-size: 0.88rem; font-weight: 700; color: var(--dark); cursor: pointer; transition: all 0.2s; }
.hint-box { background: linear-gradient(135deg, #FFF9C4, #FFF3E0); border: 3px solid var(--yellow); border-radius: 14px; padding: 12px 16px; font-size: 0.92rem; font-weight: 700; color: var(--dark); text-align: left; line-height: 1.6; display: none; margin-top: 6px; }
.hint-box.show { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: translateY(0) } }
.feedback-text { font-family: 'Baloo 2', cursive; font-size: 1.15rem; font-weight: 700; min-height: 36px; transition: all 0.3s; }
.feedback-text.correct { color: var(--green); }
.feedback-text.wrong { color: #FF5F5F; }
.api-badge { font-size: 0.7rem; background: var(--lavender); color: var(--purple); border-radius: 10px; padding: 2px 8px; font-weight: 700; display: inline-block; margin-bottom: 8px; }
.rewards-panel { display: flex; flex-direction: column; gap: 12px; }
.reward-card { background: white; border-radius: 18px; padding: 16px; border: 3px solid var(--mint); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.reward-title { font-family: 'Baloo 2', cursive; font-size: 1rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.streak-display { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; font-weight: 900; color: var(--orange); }
.progress-track { display: flex; gap: 5px; flex-wrap: wrap; }
.prog-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--cream); border: 3px solid var(--peach); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; transition: all 0.3s; }
.prog-dot.done { background: var(--green); border-color: var(--green); }
.prog-dot.skipped { background: var(--yellow); border-color: var(--orange); }
.prog-dot.wrong-dot { background: #FFB5B5; border-color: #FF8888; }
.next-reward { background: linear-gradient(135deg, var(--yellow), var(--peach)); border-radius: 14px; padding: 12px; text-align: center; }
.next-reward-label { font-size: 0.82rem; font-weight: 700; color: var(--dark); margin-bottom: 5px; }
.next-reward-item { font-size: 2rem; }
.next-reward-cost { font-size: 0.82rem; font-weight: 700; color: var(--brown); }

/* ===== MULTIPLE CHOICE (Uhr-Aufgaben) ===== */
.mc-container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.mc-container.hidden { display: none; }
.mc-btn { background: white; border: 3px solid var(--peach); border-radius: 16px; padding: 14px 8px; font-family: 'Baloo 2', cursive; font-size: 1.05rem; font-weight: 700; color: var(--dark); cursor: pointer; transition: all 0.18s; box-shadow: 0 3px 0 rgba(0,0,0,0.08); }
.mc-btn:hover:not(:disabled) { border-color: var(--pink); transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0,0,0,0.1); }
.mc-btn:active:not(:disabled) { transform: translateY(1px); }
.mc-btn.correct-mc { border-color: var(--green); background: #f0fff8; color: var(--green); animation: correctPop 0.4s ease; }
.mc-btn.wrong-mc { border-color: #FF5F5F; background: #fff0f0; animation: wrongShake 0.4s ease; }
.mc-btn:disabled { opacity: 0.4; cursor: default; }

/* Subject selector (multi-subject) */
.subject-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.subject-tab { background: var(--cream); border: 3px solid var(--peach); border-radius: 12px; padding: 7px 14px; font-family: 'Baloo 2', cursive; font-size: 0.9rem; font-weight: 700; color: var(--dark); cursor: pointer; transition: all 0.2s; }
.subject-tab.active { background: var(--yellow); border-color: var(--orange); }
.subject-tab:hover { border-color: var(--orange); }

@media (max-width: 700px) {
  .task-equation { font-size: 2.2rem; }
  .answer-input { font-size: 2rem; width: 130px; }
}