:root{font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:#17335a;background:#dcf3ff;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 13%,#fff9 0 3%,transparent 18%),radial-gradient(circle at 90% 10%,#c0e7ff 0 10%,transparent 30%),linear-gradient(145deg,#dcf8ff,#cde3ff 55%,#f4e2ff)}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:4px solid #243c99;outline-offset:4px}[hidden]{display:none!important}
.app{max-width:920px;min-height:100vh;margin:auto;padding:24px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px}
.brand{font-size:clamp(1.35rem,3vw,1.9rem);font-weight:800;letter-spacing:-.05em;display:flex;align-items:center;gap:8px}.brand strong{color:#5f39d7}
.panel{border:2px solid #ffffffb9;background:#fffffff0;border-radius:32px;box-shadow:0 18px 50px #5480c532;padding:clamp(20px,5vw,40px);flex:1}.center{text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center}.center h1{font-size:clamp(2.35rem,6vw,4.6rem);letter-spacing:-.06em;line-height:1.04;margin:10px 0 15px;color:#263878}
.eyebrow{font-size:.8rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#7542cf;background:#eee7ff;border-radius:30px;padding:8px 14px;margin:0}.intro{font-size:1.15rem;color:#475a78;max-width:520px;line-height:1.65;margin:10px auto}
.balloon-hero{display:flex;justify-content:center;gap:24px;font-size:4.7rem;margin:12px 0 6px}.balloon-hero span:nth-child(2){transform:translateY(-15px) rotate(8deg)}.balloon-hero span:nth-child(3){transform:rotate(-13deg)}
h2{margin:18px 0 16px;letter-spacing:-.04em}.level-buttons{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:670px}
.level{border:2px solid transparent;border-radius:20px;min-height:112px;padding:14px;display:grid;align-content:center;gap:6px;box-shadow:0 5px 0 #2b50852e;transition:transform .15s}.level:hover{transform:translateY(-3px)}.level strong{font-size:1.34rem}.level span{font-size:.82rem}.easy{background:#ccf5ce;color:#176039}.medium{background:#ffe6a9;color:#795314}.hard{background:#ffd4e6;color:#8b2754}.hint{color:#60728e;max-width:630px;font-size:.87rem;margin:22px 0 0;line-height:1.6}
.game-toolbar{display:flex;justify-content:space-between;gap:10px}.quiet{background:#edf3ff;color:#253f7b;border:0;border-radius:13px;padding:10px 15px;font-weight:800}.scoreboard{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 12px}.scoreboard>div{background:#f0f6ff;border-radius:16px;display:flex;flex-direction:column;text-align:center;padding:12px 6px}.stat-label{font-size:.75rem;letter-spacing:.11em;font-weight:900;text-transform:uppercase;color:#6b80a0}.scoreboard strong{font-size:clamp(1.25rem,4vw,2rem);color:#283c7e}.timer-track{height:12px;border-radius:999px;background:#e4eafb;overflow:hidden}.timer-track div{height:100%;width:100%;background:linear-gradient(90deg,#48d3ab,#45b5e8);transition:width .2s linear}
.question-area{text-align:center;padding:22px 0 8px}.question-area h1{margin:8px 0 10px;color:#2e397c;font-size:clamp(2.15rem,6vw,3.8rem);letter-spacing:-.04em}.question-area p{margin:0;min-height:1.6em;font-weight:700;color:#655d98}
.balloon-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:clamp(4px,2vw,18px);row-gap:clamp(22px,3vw,34px);padding:12px 2px 28px;justify-items:center}
.balloon{position:relative;display:flex;justify-content:center;align-items:center;width:100%;max-width:105px;aspect-ratio:4/5;border:0;border-radius:52% 52% 50% 50%/57% 57% 44% 44%;color:#17345d;background:linear-gradient(120deg,#ffffff9a -8%,transparent 38%),var(--balloon);box-shadow:inset -9px -9px 10px #29437723,0 6px 8px #303d6440;transition:transform .12s,opacity .18s;animation:float 2.9s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -.25s)}
.balloon::before{content:"";position:absolute;bottom:-10px;left:calc(50% - 7px);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:0;border-top:13px solid var(--balloon)}
.balloon::after{content:"";position:absolute;top:100%;left:50%;width:1px;height:22px;background:#8097a9}.balloon-number{font-size:clamp(1rem,2.6vw,1.65rem);font-weight:900;z-index:1;background:#ffffffb8;padding:4px 6px;border-radius:999px;min-width:36px}
.balloon:hover{transform:scale(1.07)}.balloon:active{transform:scale(.95)}.balloon-0{--balloon:#ffa7ca}.balloon-1{--balloon:#a8b7ff}.balloon-2{--balloon:#ffe18d}.balloon-3{--balloon:#8be5c4}.balloon-4{--balloon:#c4a8f4}.balloon-5{--balloon:#ffac93}
.balloon.popped{transform:scale(.2);opacity:.14;pointer-events:none;animation:none}.balloon.correct{filter:brightness(1.1)}
@keyframes float{from{translate:0 -4px}to{translate:0 5px}}.medal{font-size:5rem}.best{background:#e5f5e5;padding:14px 18px;border-radius:15px;color:#1c6941;font-weight:800}.result-actions{display:flex;gap:12px;margin-top:15px;flex-wrap:wrap;justify-content:center}.primary{background:#5945d9;color:white;border:0;padding:14px 24px;border-radius:15px;font-weight:900}footer{text-align:center;color:#657a9a;font-size:.8rem}
@media(max-width:620px){.app{padding:12px 10px}.panel{padding:18px 12px;border-radius:24px}.level-buttons{grid-template-columns:1fr}.level{min-height:60px;display:flex;align-items:center;justify-content:space-between}.balloon-grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:26px}.balloon{width:min(100%,90px)}.question-area{padding-top:16px}.balloon-hero{font-size:3.2rem;margin:4px}.hint{font-size:.82rem}}
@media(max-width:360px){.balloon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.panel{padding:14px 10px}}
@media(prefers-reduced-motion:reduce){.balloon{animation:none;transition:none}.timer-track div{transition:none}}

/* Keep every answer inside the available viewport, including landscape phones. */
body.playing .app{height:100dvh;min-height:0;padding:8px max(10px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom));gap:6px}
body.playing .brand{font-size:1.15rem;flex-shrink:0}
body.playing footer{font-size:.65rem;flex-shrink:0}
#play{min-height:0;display:flex;flex-direction:column;padding:12px;gap:6px}
#play .game-toolbar,#play .scoreboard,#play .timer-track,#play .question-area{flex-shrink:0}
#play .quiet{padding:6px 12px}
#play .scoreboard{margin:0;gap:6px}
#play .scoreboard>div{padding:4px}
#play .scoreboard strong{font-size:1.25rem}
#play .question-area{padding:0}
#play .question-area h1{font-size:clamp(1.5rem,5vw,2.4rem);margin:2px 0}
#play .question-area p{font-size:.8rem}
#play .timer-track{height:6px}
#play .balloon-grid{flex:1;min-height:0;padding:6px 4px 14px;gap:10px 8px;grid-template-columns:repeat(var(--columns,6),minmax(0,1fr));grid-template-rows:repeat(var(--rows,3),minmax(0,1fr));align-items:center}
#play .balloon{width:min(100%,var(--balloon-width,90px));max-width:none;min-width:0;min-height:0;aspect-ratio:4/5}
#play .balloon::after{height:10px}
#play .balloon::before{bottom:-6px;border-left-width:4px;border-right-width:4px;border-top-width:7px;left:calc(50% - 4px)}
#play .balloon-number{font-size:clamp(.7rem,2.5vw,1.4rem);min-width:0;padding:2px 4px;max-width:100%}
@media(max-height:480px){body.playing .brand,body.playing footer{display:none}#play{padding:6px;gap:3px}#play .question-area{position:relative}#play .question-area>.stat-label,#play .question-area p{display:none}#play .question-area h1{font-size:1.5rem}#play .scoreboard>div{padding:0;flex-direction:row;justify-content:center;align-items:center;gap:6px}#play .scoreboard strong{font-size:1rem}#play .stat-label{font-size:.65rem}}
/* Safari's layout viewport can be taller than the visible area behind its bars. */
body.playing{min-height:0;height:var(--game-height,100svh);overflow:hidden;overscroll-behavior:none}
body.playing .app{height:100%;padding-top:max(8px,env(safe-area-inset-top));padding-right:max(10px,env(safe-area-inset-right))}
html:has(body.playing){height:100%;overflow:hidden;overscroll-behavior:none}