:root {
        --bg: #fff8f0; --fg: #3d2c2e; --primary: #ff6b35; --secondary: #2ec4b6;
        --accent: #ffd166; --pink: #ff85a1; --mint: #a8e6cf; --card: #ffffff;
        --muted: #9b8a8e; --border: #f0e6db;
      }
      * { box-sizing: border-box; margin: 0; padding: 0; }
      body {
        font-family: "Nunito", sans-serif;
        background: linear-gradient(170deg, #fff8f0 0%, #ffe8d6 40%, #fff0e5 70%, #fff8f0 100%);
        color: var(--fg); min-height: 100vh; overflow-x: hidden;
      }
      .screen { display: none; min-height: 100vh; position: relative; }
      .screen.active { display: flex; flex-direction: column; }
      .font-display { font-family: "Fredoka One", cursive; }
      .bg-blob {
        position: fixed; border-radius: 50%; filter: blur(100px);
        opacity: 0.12; z-index: 0; pointer-events: none;
      }
      .screen-enter { animation: screenIn 0.5s ease-out forwards; }
      @keyframes screenIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
      
      .mascot-bounce { animation: mBounce 2s ease-in-out infinite; }
      @keyframes mBounce { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-15px) rotate(3deg); } }
      
      .float-slow { animation: fSlow 6s ease-in-out infinite; }
      .float-med { animation: fMed 4s ease-in-out infinite; }
      .float-fast { animation: fFast 3s ease-in-out infinite; }
      @keyframes fSlow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(5deg); } }
      @keyframes fMed { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-3deg); } }
      @keyframes fFast { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.05); } }

      .btn-press { transition: transform 0.15s ease, box-shadow 0.15s ease; }
      .btn-press:active { transform: scale(0.95) !important; }
      
      .option-card {
        transition: all 0.25s ease; cursor: pointer; border: 3px solid transparent;
      }
      .option-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); }
      .option-card.selected { border-color: var(--secondary); background: #e8faf8; }
      .option-card.correct { border-color: #43e97b; background: #e8fdf0; animation: correctPop 0.4s ease; }
      .option-card.wrong { border-color: #ff6b6b; background: #fff0f0; animation: wrongShake 0.4s ease; }
      @keyframes correctPop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
      @keyframes wrongShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

      .progress-fill { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(90deg, var(--primary), var(--accent)); }
      
      .masonry { columns: 2; column-gap: 14px; }
      .masonry-item { break-inside: avoid; margin-bottom: 14px; }
      @media (min-width: 768px) { .masonry { columns: 3; column-gap: 18px; } }

      .chapter-scroll { height: 100vh; height: 100dvh; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
      .chapter-scroll::-webkit-scrollbar { display: none; }
      .chapter-card { min-height: 100vh; min-height: 100dvh; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; padding: 24px 20px; }
      
      .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transition: all 0.3s ease; }
      .dot.active { background: white; width: 28px; border-radius: 5px; }
      
      .chapter-tile { transition: all 0.3s ease; cursor: pointer; }
      .chapter-tile:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15); }
      
      .star-collect { animation: starColl 0.6s ease-out forwards; }
      @keyframes starColl { 0% { transform: scale(0) rotate(0deg); opacity: 0; } 60% { transform: scale(1.3) rotate(180deg); opacity: 1; } 100% { transform: scale(1) rotate(360deg); opacity: 1; } }
      
      .dysko-spinner { width: 60px; height: 60px; border: 5px solid var(--border); border-top-color: var(--primary); border-right-color: var(--secondary); border-radius: 50%; animation: spin 0.8s linear infinite; }
      @keyframes spin { to { transform: rotate(360deg); } }
      
      .toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); z-index: 10000; padding: 12px 24px; border-radius: 16px; font-weight: 700; font-size: 15px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); }
      .toast.show { transform: translateX(-50%) translateY(0); }
      
      .tts-btn { transition: all 0.2s ease; }
      .tts-btn:hover { transform: scale(1.1); }
      .tts-btn.speaking { animation: speakPulse 0.8s ease-in-out infinite; }
      @keyframes speakPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4); } 50% { box-shadow: 0 0 0 12px rgba(255, 107, 53, 0); } }
      
      .score-circle { background: conic-gradient(var(--primary) calc(var(--score) * 1%), var(--border) 0); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
      .score-circle-inner { background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; }
      
      .deco-img { opacity: 0.15; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); }
      .age-btn { transition: all 0.2s ease; }
      .age-btn.selected { background: var(--primary) !important; color: white !important; transform: scale(1.1); box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4); }
      
      .encourage-popup { animation: encIn 0.5s ease-out forwards; }
      @keyframes encIn { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
      
      .scroll-hint { animation: scrollH 2s ease-in-out infinite; }
      @keyframes scrollH { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(8px); opacity: 1; } }
      
      @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
      @media (max-width: 380px) { .text-responsive { font-size: 0.88em; } }
      
      .loading-step { opacity: 0; transform: translateX(-10px); transition: all 0.4s ease; }
      .loading-step.visible { opacity: 1; transform: translateX(0); }

      /* Chat bubbles */
      .chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 18px; margin-bottom: 8px; animation: popIn 0.3s ease; }
      .chat-bubble.user { background: var(--primary); color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
      .chat-bubble.bot { background: white; color: var(--brown); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
      @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

      /* Nav active state */
      .nav-item.active { color: var(--primary); }
      .nav-item.active i { transform: scale(1.2); }

      /* High Contrast Mode */
      body.high-contrast {
        --fg: #000000;
        --brown: #000000;
        --muted: #333333;
      }
      body.high-contrast .text-brown { color: #000 !important; }
      body.high-contrast .text-muted { color: #333 !important; }
      body.high-contrast .bg-white { background: #fff !important; border: 2px solid #000 !important; }
      body.high-contrast .bg-cream { background: #f5f5f5 !important; border: 2px solid #333 !important; }
      body.high-contrast .bg-peach { background: #e0e0e0 !important; border: 2px solid #000 !important; }
      body.high-contrast .border-peach { border-color: #000 !important; }
      body.high-contrast .shadow-md,
      body.high-contrast .shadow-lg,
      body.high-contrast .shadow-xl { box-shadow: 4px 4px 0 #000 !important; }
      body.high-contrast .option-card { border: 3px solid #000 !important; }
      body.high-contrast .option-card.selected { background: #90EE90 !important; }
      body.high-contrast .option-card.correct { background: #00FF00 !important; }
      body.high-contrast .option-card.wrong { background: #FF6B6B !important; }

      /* No Animations Mode */
      body.no-animations *,
      body.no-animations *::before,
      body.no-animations *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      body.no-animations .mascot-bounce,
      body.no-animations .float-slow,
      body.no-animations .float-med,
      body.no-animations .float-fast { animation: none !important; }