.game-page{background:#e9f5ff}.game-page .nav{position:absolute}.game-page .nav-links a.active:after{right:0;background:var(--yellow)}
.game-hero{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;padding:135px clamp(18px,5vw,76px) 90px;background:linear-gradient(135deg,var(--blue2),var(--blue) 58%,#1998e7);color:white}
.game-hero:before{content:"";position:absolute;z-index:-2;inset:0;background-image:radial-gradient(circle,#ffffff24 1.4px,transparent 1.8px);background-size:28px 28px;animation:gameDots 18s linear infinite}.game-hero:after{content:"";position:absolute;z-index:-1;left:-4%;right:-4%;bottom:-85px;height:150px;border-radius:50% 50% 0 0;background:var(--yellow);transform:rotate(-1deg)}
.game-orb{position:absolute;z-index:-1;border-radius:50%;border:65px solid #ffffff0d;animation:gameOrb 10s ease-in-out infinite}.game-orb-one{width:430px;height:430px;right:-170px;top:-130px}.game-orb-two{width:300px;height:300px;left:-150px;top:42%;animation-delay:-4s}
.game-heading{max-width:900px;margin:0 auto 38px;text-align:center}.game-back-link{display:inline-flex;margin-bottom:17px;color:#dcedff;text-decoration:none;font-size:13px;font-weight:900}.game-heading .eyebrow{justify-content:center}.game-heading h1{margin:22px 0 15px;font-family:"Baloo 2",sans-serif;font-size:clamp(55px,6.5vw,96px);line-height:.82;letter-spacing:-4px}.game-heading h1 span{color:var(--yellow)}.game-heading p{max-width:700px;margin:0 auto;color:#e4f2ff;font-size:18px;line-height:1.65}
.game-shell{width:min(1120px,100%);margin:0 auto;padding:16px;border:1px solid #ffffff40;border-radius:36px;background:#ffffff1c;box-shadow:0 34px 90px #001d4266;backdrop-filter:blur(12px)}
.game-hud{position:absolute;z-index:4;top:12px;left:12px;right:12px;display:grid;grid-template-columns:repeat(4,minmax(80px,1fr)) auto;gap:8px;pointer-events:none}.game-hud>div{display:flex;min-height:50px;padding:7px 13px;align-items:center;justify-content:center;gap:9px;border:1px solid #ffffffb8;border-radius:16px;background:#fffffff0;color:var(--ink);box-shadow:0 8px 22px #06355a24;backdrop-filter:blur(10px)}.game-hud small{font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#597087}.game-hud strong{font-family:"Baloo 2",sans-serif;font-size:22px;line-height:1}.game-hud #game-lives{color:var(--red);font-size:16px;letter-spacing:2px;white-space:nowrap}.game-hud .game-hud-actions{padding:5px;gap:5px;background:#ffffffb8;pointer-events:auto}.game-hud-actions button{display:grid;width:38px;height:38px;place-items:center;border:0;border-radius:11px;background:white;color:var(--blue);font:900 17px Nunito,sans-serif;cursor:pointer;transition:transform .25s,background .25s}.game-hud-actions button:hover{transform:translateY(-2px);background:var(--yellow)}
.game-canvas-wrap{position:relative;overflow:hidden;border-radius:25px;background:#76cfff;box-shadow:inset 0 0 0 4px #ffffff5c}.game-canvas-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:12/7;touch-action:none}
.game-overlay{position:absolute;z-index:5;inset:0;display:flex;padding:28px;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:linear-gradient(135deg,#003d86ef,#075ebce9);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}.game-overlay.is-visible{opacity:1;visibility:visible}.game-overlay img{width:auto;height:min(42%,235px);margin-bottom:5px;object-fit:contain;filter:drop-shadow(0 18px 22px #00193655);animation:gameFloat 3.5s ease-in-out infinite}.game-kicker{font-size:12px;font-weight:1000;letter-spacing:2px;text-transform:uppercase;color:var(--yellow)}.game-overlay h2{margin:5px 0 3px;font-family:"Baloo 2",sans-serif;font-size:clamp(34px,4.2vw,58px);line-height:1;color:white}.game-overlay p{max-width:610px;margin:8px auto 19px;color:#e2f1ff;font-size:16px;line-height:1.55}.game-start{display:inline-flex;min-height:56px;padding:0 27px;align-items:center;justify-content:center;gap:18px;border:0;border-radius:999px;background:var(--yellow);color:var(--ink);font:1000 16px Nunito,sans-serif;cursor:pointer;box-shadow:0 16px 35px #001a3957;transition:transform .3s var(--ease)}.game-start:hover{transform:translateY(-3px) scale(1.03)}
.game-countdown{position:absolute;z-index:7;inset:0;display:grid;padding:20px;place-items:center;background:#072e536b;backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}.game-countdown.is-visible{opacity:1;visibility:visible}.game-countdown-card{width:min(470px,90%);padding:25px 30px 28px;border:4px solid white;border-radius:30px;background:linear-gradient(145deg,#fffef8,#fff1b7);color:var(--ink);text-align:center;box-shadow:0 28px 70px #00264d73;animation:countdownCard .55s var(--ease)}.countdown-label{display:block;color:var(--red);font-size:13px;font-weight:1000;letter-spacing:2px;text-transform:uppercase}.game-countdown strong{display:block;margin:-2px 0 -15px;color:var(--blue);font-family:"Baloo 2",sans-serif;font-size:100px;line-height:1;text-shadow:0 5px 0 #ffd83d}.game-countdown strong.is-popping{animation:countdownPop .35s ease}.game-countdown h2{margin:8px 0 2px;font-family:"Baloo 2",sans-serif;font-size:30px}.game-countdown p{margin:0;color:#38516a;font-size:16px;font-weight:800}
.game-swipe-hint{position:absolute;z-index:6;left:50%;bottom:24px;display:flex;width:min(330px,80%);padding:10px 16px;align-items:center;justify-content:center;gap:12px;border:2px solid #ffffffd9;border-radius:999px;background:#062b4dd9;color:white;box-shadow:0 16px 38px #002e4e55;opacity:0;visibility:hidden;transform:translate(-50%,18px);transition:opacity .3s,transform .3s,visibility .3s;pointer-events:none}.game-swipe-hint.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}.game-swipe-hint b{font-size:13px}.swipe-track{position:relative;display:block;width:70px;height:28px;flex:0 0 auto;border-radius:999px;background:#ffffff24}.swipe-track:before,.swipe-track:after{content:"";position:absolute;top:50%;width:7px;height:7px;border-top:2px solid white;border-right:2px solid white}.swipe-track:before{left:8px;transform:translateY(-50%) rotate(-135deg)}.swipe-track:after{right:8px;transform:translateY(-50%) rotate(45deg)}.swipe-hand{position:absolute;top:1px;left:24px;font-size:22px;animation:swipeFinger 1.1s ease-in-out infinite alternate}
.game-danger{position:absolute;z-index:8;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at center,#ff253000 28%,#ff1e3982 76%,#e50022d9 100%);color:white;text-align:center;opacity:0;visibility:hidden;pointer-events:none}.game-danger strong{padding:7px 18px;border:2px solid #ffffffb8;border-radius:999px;background:#d9122de8;font-family:"Baloo 2",sans-serif;font-size:clamp(20px,3.4vw,39px);line-height:1;box-shadow:0 10px 30px #8f001c66;text-shadow:0 2px 0 #8f001c}.game-danger span{margin-top:7px;font-family:"Baloo 2",sans-serif;font-size:clamp(22px,3vw,34px);font-weight:900;text-shadow:0 3px 9px #7b0019}.game-danger.is-visible{visibility:visible;animation:dangerFlash .62s ease-out}.game-canvas-wrap.is-danger{animation:dangerShake .45s ease-out}
.game-level-flash{position:absolute;z-index:9;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;background:radial-gradient(circle at center,#fff8baf2 0 18%,#ffd83de0 19% 35%,#0878d7d9 36% 67%,#004b9bea 68%);color:white;text-align:center;opacity:0;visibility:hidden;pointer-events:none}.game-level-flash:before,.game-level-flash:after{content:"";position:absolute;width:110vmax;height:110vmax;background:repeating-conic-gradient(from 0deg,#ffffff00 0 9deg,#ffffff30 9deg 17deg);animation:levelRays 5s linear infinite}.game-level-flash:after{width:72vmax;height:72vmax;border:5px solid #ffffff66;border-radius:50%;background:none;box-shadow:0 0 0 22px #ffffff16,0 0 0 46px #ffffff10;animation:levelRing 1s ease-out infinite}.game-level-flash>*{position:relative;z-index:1}.game-level-flash>span{padding:7px 18px;border-radius:999px;background:var(--red);font-size:clamp(12px,2vw,18px);font-weight:1000;letter-spacing:3px;text-transform:uppercase;box-shadow:0 8px 22px #7e001c55}.game-level-flash>strong{margin:3px 0 -6px;font-family:"Baloo 2",sans-serif;font-size:clamp(55px,10vw,118px);line-height:.95;text-shadow:0 7px 0 #0751a3,0 15px 30px #00356b77;transform:rotate(-2deg)}.game-level-flash>strong b{color:var(--yellow);font-size:1.18em}.game-level-flash>em{font-family:"Baloo 2",sans-serif;font-size:clamp(19px,3vw,34px);font-style:normal;font-weight:900;text-shadow:0 3px 10px #00356b}.game-level-flash.is-visible{visibility:visible;animation:levelFlash 1.45s ease-out}
.game-touch-controls{display:grid;grid-template-columns:180px 1fr 180px;gap:15px;margin-top:14px;align-items:center}.game-touch-controls button{min-height:62px;border:2px solid #ffffff8a;border-radius:20px;background:white;color:var(--blue);font:1000 17px Nunito,sans-serif;cursor:pointer;touch-action:none;user-select:none;box-shadow:0 10px 24px #001d4235;transition:transform .18s,background .18s}.game-touch-controls button span{font-size:24px}.game-touch-controls button:active,.game-touch-controls button.is-pressed{background:var(--yellow);transform:scale(.97)}.game-touch-controls p{margin:0;text-align:center;color:#dcefff;font-size:13px}
.game-shell:fullscreen{display:block;width:100vw;max-width:none;height:100vh;margin:0;padding:0;border:0;border-radius:0;background:#0b5f99}.game-shell:fullscreen .game-canvas-wrap{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}.game-shell:fullscreen canvas{width:100%;height:100%;aspect-ratio:auto}.game-shell:fullscreen .game-touch-controls{display:none}
body.game-focus-mode{overflow:hidden}body.game-focus-mode #balloon-game{position:fixed;z-index:1000;inset:0;display:block;width:100vw;max-width:none;height:100dvh;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;background:#0b5f99}body.game-focus-mode #balloon-game .game-canvas-wrap{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}body.game-focus-mode #balloon-game canvas{width:100%;height:100%;aspect-ratio:auto}body.game-focus-mode #balloon-game .game-touch-controls{display:none}
.game-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;width:min(1000px,100%);margin:30px auto 55px}.game-tips article{display:flex;padding:20px;align-items:center;gap:15px;border:1px solid #ffffff38;border-radius:22px;background:#ffffff13;backdrop-filter:blur(8px)}.game-tips article>span{display:grid;width:52px;height:52px;flex:0 0 auto;place-items:center;border-radius:16px;background:white;font-size:27px}.game-tips h3{margin:0 0 3px;font-family:"Baloo 2",sans-serif;font-size:19px}.game-tips p{margin:0;color:#dbeeff;font-size:14px}
.game-page footer{position:relative;background:var(--ink)}
@keyframes gameDots{to{background-position:56px 28px}}@keyframes gameOrb{50%{translate:0 25px;scale:1.06}}@keyframes gameFloat{50%{translate:0 -10px}}@keyframes countdownCard{from{opacity:0;transform:scale(.72) rotate(-3deg)}to{opacity:1;transform:none}}@keyframes countdownPop{50%{transform:scale(1.2) rotate(3deg)}}@keyframes swipeFinger{from{transform:translateX(-17px) rotate(-10deg)}to{transform:translateX(17px) rotate(10deg)}}@keyframes dangerFlash{0%{opacity:0}18%{opacity:1}45%{opacity:.58}68%{opacity:.9}100%{opacity:0}}@keyframes dangerShake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}@keyframes levelFlash{0%{opacity:0;transform:scale(1.12)}12%,70%{opacity:1;transform:scale(1)}86%{opacity:.85}100%{opacity:0;transform:scale(1.04)}}@keyframes levelRays{to{transform:rotate(1turn)}}@keyframes levelRing{from{transform:scale(.55);opacity:1}to{transform:scale(1.18);opacity:0}}
@media(max-width:900px){.game-page .nav .nav-links{top:72px}.game-hero{padding-top:115px}.game-heading h1{letter-spacing:-2px}.game-hud{grid-template-columns:repeat(4,1fr);top:max(7px,env(safe-area-inset-top));left:max(7px,env(safe-area-inset-left));right:max(7px,env(safe-area-inset-right));gap:5px}.game-hud .game-hud-actions{position:absolute;top:45px;right:0;display:flex;width:auto;min-height:0;padding:3px}.game-touch-controls{display:none}.game-tips{grid-template-columns:1fr}}
@media(max-width:620px){.game-hero{padding:105px 10px 70px}.game-heading{padding:0 10px;margin-bottom:25px}.game-heading h1{font-size:48px;line-height:.9}.game-heading p{font-size:16px}.game-shell{padding:6px;border-radius:22px}.game-hud{gap:5px;margin-bottom:5px}.game-hud>div{min-height:43px;padding:4px 2px;flex-direction:column;gap:0;border-radius:11px}.game-hud small{font-size:7px}.game-hud strong{font-size:18px}.game-hud #game-lives{font-size:11px;letter-spacing:0}.game-hud .game-hud-actions{min-height:39px;padding:4px;flex-direction:row}.game-hud-actions button{width:33px;height:31px;border-radius:9px;font-size:16px}.game-canvas-wrap{border-radius:16px}.game-overlay{padding:12px}.game-overlay img{height:31%;margin-bottom:0}.game-overlay p{margin:4px auto 10px;font-size:12px;line-height:1.3}.game-overlay h2{font-size:30px}.game-kicker{font-size:9px}.game-start{min-height:44px;padding:0 18px;font-size:13px}.game-touch-controls{gap:7px;margin-top:6px}.game-touch-controls button{min-height:42px;border-radius:13px;font-size:14px}.game-touch-controls button span{font-size:18px}.game-tips{gap:8px;margin:20px auto 45px;padding:0 8px}.game-tips article{padding:13px;border-radius:17px}.game-tips article>span{width:44px;height:44px}.game-tips h3{font-size:17px}}
@media(max-width:420px){.game-overlay img{height:28%;max-width:72%;display:block}.game-overlay h2{font-size:29px}.game-overlay p{max-width:310px;font-size:12px}.game-start{min-height:44px}}
@media(max-width:620px) and (orientation:portrait){.game-countdown-card{padding:16px 18px 18px;border-radius:22px}.game-countdown strong{font-size:72px}.game-countdown h2{font-size:24px}.game-countdown p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.game-hero:before,.game-orb,.game-overlay img{animation:none!important}}

/* Keep the game paused behind a fast level-up celebration. */
.game-level-flash.is-visible{animation-duration:.85s}
