:root{--sky-blue-light: #87CEEB;--sky-blue-dark: #4682B4;--cloud-white: #f0f8ff;--correct-green: #4CAF50;--incorrect-red: #F44336;--font-family: "Baloo 2", cursive}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%;overflow:hidden}body{font-family:var(--font-family);background-color:#87ceeb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='100' height='100' fill='%2387CEEB'/%3E%3Ccircle cx='85' cy='15' r='12' fill='%23FFD700'/%3E%3Cg opacity='0.9'%3E%3Ccircle cx='25' cy='40' r='9' fill='%23FFFFFF'/%3E%3Ccircle cx='40' cy='45' r='6' fill='%23FFFFFF'/%3E%3Ccircle cx='15' cy='45' r='7' fill='%23FFFFFF'/%3E%3C/g%3E%3Cg opacity='0.9'%3E%3Ccircle cx='70' cy='35' r='6' fill='%23FFFFFF'/%3E%3Ccircle cx='60' cy='40' r='9' fill='%23FFFFFF'/%3E%3Ccircle cx='80' cy='40' r='7' fill='%23FFFFFF'/%3E%3C/g%3E%3Cpath fill='%2332CD32' d='M-5 80 Q 25 60, 50 85 T 105 80 L 105 105 L -5 105 Z'/%3E%3Cpath fill='%23228B22' d='M-5 90 Q 35 75, 60 95 T 105 90 L 105 105 L -5 105 Z'/%3E%3C/svg%3E");background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;text-align:center;display:flex;justify-content:center;align-items:flex-start;padding-top:2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#root{width:calc(100% - 10px);max-width:800px;height:100%;position:relative}.app-container{width:100%;height:95%;padding:20px;border-radius:15px;background-color:#00000059;box-shadow:0 4px 15px #0003;display:flex;flex-direction:column;align-items:center;gap:1rem;position:relative}.music-toggle-btn{position:absolute;bottom:15px;left:15px;width:50px;height:50px;border-radius:50%;background-color:#0006;border:2px solid var(--cloud-white);color:#fff;font-size:1.5rem;cursor:pointer;z-index:10;display:flex;justify-content:center;align-items:center;transition:all .2s ease}.music-toggle-btn:hover{background-color:#0009;transform:scale(1.1)}.music-credit{position:absolute;bottom:5px;left:50%;transform:translate(-50%);font-size:.6rem;color:#fff9;text-shadow:1px 1px 2px rgba(0,0,0,.7);z-index:5;pointer-events:none}.start-screen{justify-content:center;gap:1.8rem;width:100%;height:100%;display:flex;flex-direction:column;align-items:center}.selection-group{display:flex;flex-direction:column;align-items:center;gap:1rem}.selection-group h2{font-size:1.8rem;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.options-container{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.option-btn{padding:1rem 1.5rem;font-family:var(--font-family);font-size:1.5rem;font-weight:600;color:#fff;background-color:var(--sky-blue-dark);border:3px solid var(--cloud-white);border-radius:15px;cursor:pointer;transition:all .2s ease-in-out;box-shadow:0 4px 8px #0003;display:flex;align-items:center;gap:.5rem}.option-btn:hover{transform:translateY(-3px);box-shadow:0 6px 12px #0000004d}.option-btn.selected{background-color:var(--cloud-white);color:var(--sky-blue-dark);border-color:var(--sky-blue-dark);transform:translateY(-2px);box-shadow:inset 0 2px 4px #0000004d}.option-btn .icon{font-size:2rem;line-height:1}span.btn-text{margin-left:6px}.start-btn{padding:1.2rem 3rem;font-family:var(--font-family);font-size:2rem;font-weight:700;color:var(--sky-blue-dark);background-color:gold;border:none;border-radius:20px;cursor:pointer;transition:all .2s ease-in-out;box-shadow:0 5px 10px #00000040;margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:1rem}.start-btn .icon{font-size:2.5rem}.start-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 8px 15px #0000004d}.start-btn:disabled{background-color:#aaa;color:#666;cursor:not-allowed;box-shadow:none;transform:none}.header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 1rem}.quit-btn{background:none;border:2px solid var(--cloud-white);color:var(--cloud-white);font-family:var(--font-family);font-size:1rem;font-weight:600;padding:.5rem 1rem;border-radius:20px;cursor:pointer;transition:all .2s ease-in-out}.quit-btn:hover{background:var(--cloud-white);color:var(--sky-blue-dark)}h1{font-size:clamp(2rem,1.7rem + 2vw,4.5rem);font-weight:800;text-shadow:4px 4px 8px rgba(0,0,0,.15);background:linear-gradient(90deg,red,#ff7f00,#ff0,#0f0,#00f,indigo,#9400d3);-webkit-background-clip:text;background-clip:text;color:transparent}.header h1{font-size:3rem;background:none;-webkit-background-clip:initial;background-clip:initial;color:initial;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.lives{font-size:clamp(1.5rem,1.3rem + 2vw,2.5rem);text-shadow:2px 2px 4px rgba(0,0,0,.5);letter-spacing:.2rem;min-width:120px;text-align:right}.problem{font-size:clamp(2rem,1.7rem + 2vw,4rem);font-weight:800;margin:1rem 0;padding:1rem 2rem;background-color:#06003f79;border:2px solid rgba(255,255,255,.5);border-radius:10px;text-shadow:3px 3px 6px rgba(0,0,0,.5);animation:problem-pop .4s ease-in-out}.game-area{width:100%;flex-grow:1;position:relative;margin-top:1rem;border-top:2px dashed var(--cloud-white)}.game-area.feedback-active .balloon:not(.balloon--correct){opacity:0;pointer-events:none}.game-area.feedback-active .balloon.balloon--correct{filter:drop-shadow(0 0 12px white);z-index:20}.balloon{position:absolute;width:80px;height:100px;border-radius:50%/60% 60% 40% 40%;color:#fff;display:flex;justify-content:center;align-items:center;font-size:2rem;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:10;box-shadow:inset -10px -10px 15px #0003;will-change:transform,bottom,left;transition:opacity .3s ease-out,filter .3s ease-out}.balloon:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:10px solid}.balloon-string{position:absolute;bottom:-67px;left:calc(50%-1px);width:2px;height:60px;background:#ffffffb3;transform-origin:top center}.balloon:hover{transform:scale(1.1)}.feedback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10rem;font-weight:700;opacity:0;animation:fade-in-out 1s ease-in-out}.feedback.correct{color:var(--correct-green);text-shadow:0 0 15px rgba(255,255,255,.8)}.feedback.incorrect{color:var(--incorrect-red);text-shadow:0 0 15px rgba(0,0,0,.5)}@keyframes fade-in-out{0%,to{opacity:0;transform:translate(-50%,-50%) scale(.5)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}}.overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:100;animation:fade-in .3s ease-in-out;border-radius:20px;background-color:#0000001a}.countdown{font-size:clamp(8rem,25vw,12rem);font-weight:800;color:gold;text-shadow:5px 5px 15px rgba(0,0,0,.5);animation:countdown-pop 1s ease-out forwards}@keyframes countdown-pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.game-over-screen{background-color:var(--sky-blue-dark);padding:2rem 3rem;border-radius:20px;border:4px solid var(--cloud-white);box-shadow:0 5px 20px #0006;display:flex;flex-direction:column;gap:1.5rem;align-items:center;color:var(--cloud-white);text-shadow:2px 2px 4px rgba(0,0,0,.5)}.game-over-screen h2{font-size:3rem;margin-bottom:1rem}.stats{font-size:1.5rem;display:grid;grid-template-columns:auto auto;gap:.5rem 2rem;text-align:left}.stats span{font-weight:400}.game-over-screen .options-container{margin-top:1rem}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes problem-pop{0%{transform:scale(1)}50%{transform:scale(1.1) rotate(-1deg);text-shadow:4px 4px 10px rgba(0,0,0,.6)}to{transform:scale(1)}}@media (max-width: 768px){.selection-group h2{font-size:1.5rem}.balloon{width:60px;height:75px}.option-btn .btn-text{display:none}.option-btn{width:55px;height:55px;padding:1rem;border-radius:50%;justify-content:center;gap:0}.option-btn .icon{font-size:1.6rem}}