:root{--color-bg: #0f0f2e;--color-bg-card: #1a1a4e;--color-bg-overlay: rgba(15, 15, 46, .85);--color-surface: #252560;--color-text: #ffffff;--color-text-muted: #b8b8e0;--color-alphabet: #ff6b9d;--color-alphabet-glow: rgba(255, 107, 157, .4);--color-numbers: #4ecdc4;--color-numbers-glow: rgba(78, 205, 196, .4);--color-animals: #ffe66d;--color-animals-glow: rgba(255, 230, 109, .4);--color-vehicles: #a78bfa;--color-vehicles-glow: rgba(167, 139, 250, .4);--color-correct: #4ade80;--color-correct-glow: rgba(74, 222, 128, .5);--color-wrong: #f87171;--color-wrong-glow: rgba(248, 113, 113, .5);--font-family: "Fredoka", sans-serif;--font-size-xs: .875rem;--font-size-sm: 1rem;--font-size-md: 1.25rem;--font-size-lg: 1.75rem;--font-size-xl: 2.5rem;--font-size-xxl: 4rem;--font-size-hero: 6rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-xxl: 3rem;--touch-target: 80px;--touch-target-lg: 120px;--border-radius: 20px;--border-radius-sm: 12px;--border-radius-round: 50%;--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}body{font-family:var(--font-family);font-weight:500;color:var(--color-text);background:var(--color-bg);background-image:radial-gradient(ellipse at 20% 50%,rgba(255,107,157,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(78,205,196,.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(167,139,250,.08) 0%,transparent 50%)}#app{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.page{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-lg);animation:fadeIn var(--duration-normal) var(--ease-smooth)}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.page-title{font-size:var(--font-size-xl);font-weight:700;margin-bottom:var(--space-xl);text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.3)}.home-hero{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl)}.home-photo-frame{width:140px;height:140px;border-radius:var(--border-radius-round);padding:4px;background:linear-gradient(135deg,var(--color-alphabet),var(--color-numbers),var(--color-animals),var(--color-vehicles));box-shadow:0 0 30px #ff6b9d4d,0 0 60px #4ecdc426;animation:photoFloat 3s ease-in-out infinite}.home-photo{width:100%;height:100%;border-radius:var(--border-radius-round);object-fit:cover;object-position:center 20%;border:3px solid var(--color-bg)}.home-title{font-size:var(--font-size-xl);font-weight:700;text-align:center;text-shadow:0 2px 16px rgba(0,0,0,.4);background:linear-gradient(135deg,#fff,#e0e0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.home-subtitle{font-size:var(--font-size-md);font-weight:500;color:var(--color-text-muted);text-align:center}@keyframes photoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.vehicle-img{width:160px;height:120px;object-fit:contain;border-radius:var(--border-radius-sm)}.vehicle-img-small{width:80px;height:60px;object-fit:contain}.card-grid{display:grid;gap:var(--space-lg);width:100%;max-width:900px}.card-grid--2{grid-template-columns:repeat(2,1fr)}.card-grid--3{grid-template-columns:repeat(3,1fr)}.card-grid--4{grid-template-columns:repeat(2,1fr)}.game-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-xl) var(--space-lg);min-height:var(--touch-target-lg);border-radius:var(--border-radius);border:2px solid rgba(255,255,255,.1);background:var(--color-bg-card);cursor:pointer;transition:transform var(--duration-normal) var(--ease-bounce),box-shadow var(--duration-normal) var(--ease-smooth);position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;inset:0;border-radius:var(--border-radius);opacity:0;transition:opacity var(--duration-normal) var(--ease-smooth)}.game-card:active{transform:scale(.95)}.game-card:hover{transform:scale(1.03)}.game-card:hover:before{opacity:1}.game-card--alphabet{box-shadow:0 4px 24px var(--color-alphabet-glow)}.game-card--alphabet:before{background:linear-gradient(135deg,rgba(255,107,157,.15),transparent)}.game-card--alphabet:hover{box-shadow:0 8px 40px var(--color-alphabet-glow)}.game-card--numbers{box-shadow:0 4px 24px var(--color-numbers-glow)}.game-card--numbers:before{background:linear-gradient(135deg,rgba(78,205,196,.15),transparent)}.game-card--numbers:hover{box-shadow:0 8px 40px var(--color-numbers-glow)}.game-card--animals{box-shadow:0 4px 24px var(--color-animals-glow)}.game-card--animals:before{background:linear-gradient(135deg,rgba(255,230,109,.15),transparent)}.game-card--animals:hover{box-shadow:0 8px 40px var(--color-animals-glow)}.game-card--vehicles{box-shadow:0 4px 24px var(--color-vehicles-glow)}.game-card--vehicles:before{background:linear-gradient(135deg,rgba(167,139,250,.15),transparent)}.game-card--vehicles:hover{box-shadow:0 8px 40px var(--color-vehicles-glow)}.game-card__icon{font-size:var(--font-size-xxl);line-height:1}.game-card__label{font-size:var(--font-size-lg);font-weight:600;text-align:center}.back-btn{position:fixed;top:var(--space-lg);left:var(--space-lg);width:56px;height:56px;border-radius:var(--border-radius-round);border:2px solid rgba(255,255,255,.15);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-lg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--duration-normal) var(--ease-bounce),background var(--duration-normal);z-index:100}.back-btn:active{transform:scale(.9)}.back-btn:hover{background:var(--color-bg-card)}.answer-grid{display:grid;gap:var(--space-lg);width:100%;max-width:700px}.answer-grid--2{grid-template-columns:repeat(2,1fr)}.answer-grid--3{grid-template-columns:repeat(3,1fr)}.answer-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);min-height:var(--touch-target-lg);padding:var(--space-lg);border-radius:var(--border-radius);border:3px solid rgba(255,255,255,.15);background:var(--color-surface);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-lg);font-weight:600;cursor:pointer;transition:transform var(--duration-normal) var(--ease-bounce),border-color var(--duration-normal),box-shadow var(--duration-normal),background var(--duration-normal)}.answer-btn:active{transform:scale(.93)}.answer-btn:hover{border-color:#ffffff4d;transform:scale(1.02)}.answer-btn--correct{border-color:var(--color-correct);background:#4ade8026;box-shadow:0 0 30px var(--color-correct-glow);animation:correctPulse .5s var(--ease-bounce)}.answer-btn--wrong{border-color:var(--color-wrong);background:#f871711a;animation:wrongShake .4s var(--ease-smooth)}.answer-btn__emoji{font-size:var(--font-size-xxl);line-height:1}.answer-btn__label{font-size:var(--font-size-md)}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes wrongShake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.question-area{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-xxl)}.question-letter{font-size:var(--font-size-hero);font-weight:700;line-height:1;text-shadow:0 4px 20px rgba(0,0,0,.3)}.question-prompt{font-size:var(--font-size-lg);font-weight:500;color:var(--color-text-muted);text-align:center}.score-bar{position:fixed;top:var(--space-lg);right:var(--space-lg);display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);border-radius:999px;background:var(--color-surface);border:2px solid rgba(255,255,255,.1);font-size:var(--font-size-lg);font-weight:600;z-index:100}.score-bar__star{font-size:var(--font-size-lg);animation:starPop .4s var(--ease-bounce)}@keyframes starPop{0%{transform:scale(0)}to{transform:scale(1)}}.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:1000;overflow:hidden}.confetti-piece{position:absolute;width:12px;height:12px;border-radius:3px;animation:confettiFall 1.2s var(--ease-smooth) forwards}@keyframes confettiFall{0%{opacity:1;transform:translateY(-20px) rotate(0) scale(1)}to{opacity:0;transform:translateY(100vh) rotate(720deg) scale(.5)}}.drop-zone{min-height:160px;padding:var(--space-lg);border-radius:var(--border-radius);border:3px dashed rgba(255,255,255,.2);background:var(--color-surface);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-sm);transition:border-color var(--duration-normal),background var(--duration-normal)}.drop-zone--active{border-color:#ffffff80;background:#ffffff0d}.draggable{padding:var(--space-md) var(--space-lg);border-radius:var(--border-radius-sm);background:var(--color-bg-card);border:2px solid rgba(255,255,255,.15);font-size:var(--font-size-lg);font-weight:600;cursor:grab;touch-action:none;transition:transform var(--duration-fast) var(--ease-bounce),box-shadow var(--duration-fast)}.draggable:active{cursor:grabbing;transform:scale(1.1);box-shadow:0 8px 30px #0006}.flex-center{display:flex;align-items:center;justify-content:center}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.text-center{text-align:center}.fp-driving-container{position:relative;width:100%;max-width:800px;height:400px;border-radius:var(--border-radius);overflow:hidden;margin-bottom:var(--space-lg);box-shadow:inset 0 0 20px #0000004d,0 10px 30px #00000080;perspective:600px}.fp-sky{position:absolute;top:0;left:0;width:100%;height:50%;background:linear-gradient(to bottom,#87ceeb,#e0f6ff)}.fp-sky:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:60px;background:radial-gradient(ellipse at center,#8bc34a 0%,transparent 60%) 0 0/100px 60px,radial-gradient(ellipse at center,#7cb342 0%,transparent 70%) 40px 10px/120px 80px;background-repeat:repeat-x}.fp-ground{position:absolute;top:50%;left:0;width:100%;height:50%;background:#689f38;overflow:hidden}.fp-road{position:absolute;top:0;left:50%;width:1400px;height:2500px;background:#333;transform-origin:top center;transform:translate(-50%) rotateX(84deg);border-left:18px solid white;border-right:18px solid white;transition:transform .8s var(--ease-smooth)}.fp-road-lines{position:absolute;top:0;left:50%;width:15px;height:200%;background:repeating-linear-gradient(to bottom,transparent 0,transparent 60px,white 60px,white 120px);transform:translate(-50%)}.fp-road-lines--animating{animation:fpScrollRoad .4s linear infinite}@keyframes fpScrollRoad{0%{background-position:0 0}to{background-position:0 120px}}.fp-obstacle{position:absolute;top:50%;left:50%;width:200px;transform-origin:center bottom;transform:translate(-50%,-100%) scale(.01);z-index:5;transition:transform 15s cubic-bezier(.55,.085,.68,.53);filter:drop-shadow(0 5px 10px rgba(0,0,0,.5))}.fp-obstacle--approaching{transform:translate(-50%,40%) scale(2.5)}.fp-obstacle--dodged-left{transition:transform .5s var(--ease-smooth),opacity .5s;transform:translate(150%,40%) scale(2.5);opacity:0}.fp-obstacle--dodged-right{transition:transform .5s var(--ease-smooth),opacity .5s;transform:translate(-250%,40%) scale(2.5);opacity:0}.fp-dashboard{position:absolute;bottom:0;left:0;width:100%;height:130px;background:#6d6d6d;border-top-left-radius:40px;border-top-right-radius:40px;z-index:10;box-shadow:inset 0 20px 20px #ffffff1a,0 -5px 15px #0009;display:flex;justify-content:center;align-items:flex-end}.fp-console{width:160px;height:100%;background:#2a2a2a;border-top-left-radius:20px;border-top-right-radius:20px;margin:0 auto;border:4px solid #444;border-bottom:none;display:flex;align-items:center;justify-content:center;flex-direction:column}.fp-gps{width:120px;height:80px;background:#aed581;border-radius:8px;border:4px solid #111;position:relative;overflow:hidden;box-shadow:inset 0 0 10px #0000004d}.fp-gps:after{content:"📍";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px}.fp-steering-wheel{position:absolute;bottom:-30px;right:15%;width:200px;height:200px;border:24px solid #2a2a2a;border-radius:50%;z-index:15;background:transparent;box-shadow:inset 0 5px 15px #0009,0 10px 20px #00000080;transition:transform .4s var(--ease-bounce)}.fp-steering-wheel:before{content:"";position:absolute;top:50%;left:-24px;right:-24px;height:48px;background:#2a2a2a;transform:translateY(-50%)}.fp-steering-wheel:after{content:"";position:absolute;top:50%;left:50%;width:70px;height:70px;background:#333;border-radius:50%;transform:translate(-50%,-50%);border:2px solid #555}.fp-hand{position:absolute;width:45px;height:70px;background:#f4a460;border-radius:25px;z-index:20;box-shadow:inset -3px -3px 5px #0000004d}.fp-hand-left{top:20%;left:-15px;transform:rotate(-30deg)}.fp-hand-right{top:20%;right:-15px;transform:rotate(30deg)}.fp-mirror{position:absolute;top:15px;left:50%;transform:translate(-50%);width:140px;height:45px;background:linear-gradient(to bottom,#e0e0e0,#999);border:5px solid #222;border-radius:8px;z-index:10;box-shadow:0 10px 20px #0006}.fp-turn-left .fp-steering-wheel{transform:rotate(-70deg)}.fp-turn-right .fp-steering-wheel{transform:rotate(70deg)}.fp-turn-left .fp-road{transform:translate(-30%) rotateX(80deg)}.fp-turn-right .fp-road{transform:translate(-70%) rotateX(80deg)}.fp-crash-overlay{position:absolute;inset:0;background:radial-gradient(circle,transparent 30%,rgba(255,0,0,.9) 100%);opacity:0;transition:opacity .1s;pointer-events:none;z-index:30;display:flex;align-items:center;justify-content:center}.fp-crash-overlay--active{opacity:1}.fp-crash-overlay--active:after{content:"💥";font-size:160px;animation:starPop .2s cubic-bezier(.175,.885,.32,1.275)}.driving-timer{position:absolute;top:var(--space-md);right:var(--space-md);background:#000c;color:#fff;padding:var(--space-sm) var(--space-lg);border-radius:99px;font-weight:700;font-size:var(--font-size-xl);z-index:20;font-variant-numeric:tabular-nums;border:2px solid rgba(255,255,255,.2)}.driving-timer--warning{color:#ff5252;animation:pulseWarning .4s infinite alternate}@keyframes pulseWarning{0%{transform:scale(1)}to{transform:scale(1.1);box-shadow:0 0 15px #ff5252e6}}.next-btn{margin-top:var(--space-xl);padding:var(--space-md) var(--space-xxl);min-height:64px;border-radius:999px;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-lg);font-weight:600;cursor:pointer;transition:transform var(--duration-normal) var(--ease-bounce),box-shadow var(--duration-normal);box-shadow:0 4px 20px #667eea4d;animation:fadeIn var(--duration-slow) var(--ease-smooth)}.next-btn:active{transform:scale(.95)}.next-btn:hover{transform:scale(1.03);box-shadow:0 8px 30px #667eea80}@media(max-width:600px){.card-grid--4,.answer-grid--3{grid-template-columns:1fr}.question-letter{font-size:var(--font-size-xxl)}.page-title{font-size:var(--font-size-lg)}}@media(min-width:601px)and (max-width:1024px){.card-grid--4{grid-template-columns:repeat(2,1fr)}}@media(min-width:1025px){.card-grid--4{grid-template-columns:repeat(4,1fr)}}.flashcard-display{font-size:180px;font-weight:800;color:var(--color-text);margin-bottom:var(--space-md);text-shadow:4px 4px 0px rgba(0,0,0,.1);animation:bounceIn .6s var(--ease-pop)}.flashcard-word{font-size:var(--font-size-xl);color:var(--color-text-muted);margin-bottom:var(--space-xl);display:flex;align-items:center;gap:var(--space-sm)}.flashcard-controls{display:flex;gap:var(--space-lg);align-items:center}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05);opacity:1}70%{transform:scale(.9)}to{transform:scale(1)}}