:root{--deep:#071f2f;--cyan:#69d2e7;--lime:#d5ff5f;--paper:#f2f1e9;--ink:#102638;--muted:#708087;--line:#d8dfdc;--coral:#ff8065}*{box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}.puff-page{background:linear-gradient(#071f2f 0 420px,var(--paper) 420px)}.puff-hero{min-height:420px;padding:70px max(22px,7vw) 105px;color:#fff;display:grid;grid-template-columns:1fr minmax(260px,420px);align-items:center;gap:50px}.eyebrow{text-transform:uppercase;letter-spacing:1.8px;font-size:10px;font-weight:900;color:var(--cyan);margin:0}.puff-hero h1{margin:12px 0 17px;font-size:clamp(52px,8vw,100px);line-height:.9;letter-spacing:-5px}.puff-hero h1 em{display:block;color:var(--lime);font-style:normal}.puff-hero>div>p:last-child{max-width:540px;color:#aec3c9;line-height:1.6}.hero-puffer,.puffer{position:relative;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff7bd 0 6%,#ffe275 7% 32%,#f7b832 68%,#d78b1d);box-shadow:inset -13px -15px 0 #c97d1b55,0 22px 45px #0005}.hero-puffer{width:230px;height:230px;margin:auto;animation:heroBob 2.7s ease-in-out infinite}.hero-puffer:before,.puffer:before{content:"";position:absolute;right:-36px;top:37%;width:50px;height:58px;background:#f1a52a;clip-path:polygon(0 50%,100% 0,78% 50%,100% 100%)}.hero-puffer:after,.puffer:after{content:"";position:absolute;left:-18px;top:43%;width:28px;height:34px;border-radius:50%;background:#ffd466}.spikes{position:absolute;inset:-17px;border-radius:50%;background:repeating-conic-gradient(from 5deg,#f5b332 0 4deg,transparent 4deg 18deg);z-index:-1}.eye{position:absolute;top:34%;width:19px;height:24px;border-radius:50%;background:#102638;box-shadow:inset 5px 5px 0 #fff}.eye-a{left:28%}.eye-b{right:28%}.smile{position:absolute;left:35%;top:58%;width:30%;height:22%;border-bottom:8px solid #102638;border-radius:0 0 50% 50%;transform:rotate(2deg)}.hero-puffer b{position:absolute;right:-45px;top:-19px;padding:10px 13px;border-radius:14px 14px 14px 2px;background:#fff;color:var(--deep);font-size:12px;transform:rotate(5deg);animation:taunt 2.7s ease-in-out infinite}.puff-shell{width:min(1020px,calc(100% - 28px));margin:-58px auto 70px;position:relative}.puff-toolbar{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:20px 20px 0 0;overflow:hidden}.puff-toolbar span{padding:16px 18px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:1.2px;border-right:1px solid var(--line)}.puff-toolbar span:last-child{border:0}.puff-toolbar strong{display:block;margin-top:3px;color:var(--ink);font-size:24px;letter-spacing:-1px}.puff-game{position:relative;min-height:610px;padding:26px;background:linear-gradient(#1395b3,#075272);border-radius:0 0 24px 24px;overflow:hidden;box-shadow:0 25px 65px #082f4130}.puff-game:before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 20% 100%,transparent 0 35px,#a6ecf215 36px 38px,transparent 39px 74px);animation:waterMove 8s linear infinite;pointer-events:none}.puff-board{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;height:558px}.puff-hole{position:relative;min-width:0;border:0;background:transparent;cursor:pointer;overflow:hidden;touch-action:manipulation}.puff-hole:before{content:"";position:absolute;left:8%;right:8%;bottom:7%;height:28%;border-radius:50%;background:#032f48;box-shadow:inset 0 10px 14px #001b2d,0 7px 0 #61d4dc55}.puffer{position:absolute;z-index:2;left:50%;bottom:9%;width:min(112px,60%);aspect-ratio:1;transform:translate(-50%,120%) scale(.72);opacity:0;transition:transform .18s cubic-bezier(.2,1.35,.4,1),opacity .12s}.puff-hole.up .puffer{transform:translate(-50%,0) scale(1);opacity:1}.puff-hole.hit .puffer{transform:translate(-50%,-20%) rotate(24deg) scale(1.18);opacity:0}.puffer .eye{width:12px;height:15px;top:31%}.puffer .smile{border-bottom-width:5px}.puffer .spikes{inset:-10px}.puffer.gold{background:radial-gradient(circle at 34% 23%,#fff 0 5%,#fff29d 6% 30%,#ffd52d 65%,#ed9914);filter:drop-shadow(0 0 15px #fff08b)}.puffer.danger{background:radial-gradient(circle at 34% 23%,#ffb19c,#ef654f 55%,#a92e2c)}.puffer.danger .eye{height:8px;border-radius:2px;transform:rotate(16deg);box-shadow:none}.puffer.danger .eye-b{transform:rotate(-16deg)}.puffer.danger .smile{border:0;border-top:5px solid var(--deep);border-radius:50% 50% 0 0}.puffer.wink .eye-a{height:4px;top:38%;border-radius:4px;box-shadow:none}.puff-taunt{position:absolute;z-index:4;left:50%;top:5%;max-width:90%;padding:6px 9px;border-radius:10px 10px 10px 2px;background:#fff;color:var(--deep);font-size:9px;font-weight:850;white-space:nowrap;transform:translateX(-25%) scale(.8);opacity:0}.puff-hole.up .puff-taunt{animation:bubbleIn .35s .18s forwards}.splash{position:absolute;z-index:5;left:50%;bottom:20%;color:#c8f7ff;font-size:30px;font-weight:900;pointer-events:none;animation:splash .45s forwards}.puff-overlay{position:absolute;z-index:10;inset:26px;display:grid;place-content:center;justify-items:center;text-align:center;padding:25px;border-radius:20px;background:#071f2fe8;color:#fff;backdrop-filter:blur(5px)}.puff-overlay.hidden{display:none}.puff-overlay h2{margin:8px 0 12px;font-size:clamp(28px,6vw,48px);letter-spacing:-1.7px}.puff-overlay>p:not(.eyebrow){color:#bfd1d5}.puff-overlay button{min-height:50px;margin-top:20px;padding:0 25px;border:0;border-radius:13px;background:var(--lime);color:var(--deep);font-weight:900;cursor:pointer}.puff-overlay>a{margin-top:15px;color:#c8dde1;font-size:11px}.puff-key{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:min(500px,100%);margin-top:18px}.puff-key span{padding:13px 8px;border:1px solid #ffffff24;border-radius:14px;color:#c5d6da;font-size:10px}.puff-key b{display:block;color:#fff}.mini{display:block;width:34px;height:34px;margin:0 auto 7px;border-radius:50%;background:#ffd25e}.mini.gold{background:#ffe328;box-shadow:0 0 12px #fff09a}.mini.danger{background:#ef654f}.puff-options{display:flex;align-items:center;gap:9px;margin:14px 0 22px}.puff-options button{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink);font-size:10px;font-weight:800}.puff-options p{margin:0 0 0 auto;color:var(--muted);font-size:11px}.puff-scores{display:grid;grid-template-columns:240px 1fr;gap:25px;padding:25px;border:1px solid var(--line);border-radius:21px;background:#fff}.puff-scores h2{margin:5px 0;font-size:27px}.puff-scores ol{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0;list-style:none}.puff-scores li{padding:13px;border-radius:12px;background:#f3f6f3;color:var(--muted);font-size:11px}.puff-scores li b{display:block;color:var(--ink);font-size:17px}.score-bump{animation:scoreBump .25s}.miss-shake{animation:shake .25s}.combo-flare{color:var(--coral)!important}
@keyframes heroBob{50%{transform:translateY(-12px) rotate(3deg)}}@keyframes taunt{50%{transform:translateY(-7px) rotate(-3deg)}}@keyframes waterMove{to{background-position:150px 0}}@keyframes bubbleIn{to{opacity:1;transform:translateX(-25%) scale(1)}}@keyframes splash{to{transform:translate(-50%,-45px) scale(1.6);opacity:0}}@keyframes scoreBump{50%{transform:scale(1.25)}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:700px){.puff-page{background:linear-gradient(#071f2f 0 340px,var(--paper) 340px)}.puff-hero{min-height:340px;padding:45px 20px 82px;display:block}.puff-hero h1{font-size:clamp(48px,16vw,74px);letter-spacing:-3px}.hero-puffer{display:none}.puff-shell{margin-top:-38px}.puff-toolbar span{padding:12px 9px;font-size:8px}.puff-toolbar strong{font-size:20px}.puff-game{min-height:535px;padding:12px;border-radius:0 0 19px 19px}.puff-board{height:510px;gap:8px}.puffer{width:min(94px,72%)}.puff-overlay{inset:12px;padding:18px}.puff-key{gap:5px}.puff-key span{padding:10px 4px}.puff-options{flex-wrap:wrap}.puff-options p{width:100%;margin:3px 0 0}.puff-scores{grid-template-columns:1fr;padding:18px;gap:12px}.puff-scores ol{grid-template-columns:1fr 1fr}.puff-taunt{font-size:8px}.game-ad-zone{content-visibility:auto}}@media(max-width:380px){.puff-toolbar{grid-template-columns:repeat(2,1fr)}.puff-toolbar span:nth-child(2){border-right:0}.puff-game{min-height:495px}.puff-board{height:470px}.puff-scores ol{grid-template-columns:1fr}}@media(pointer:coarse){.puff-hole{-webkit-tap-highlight-color:transparent}.puff-game:before{animation:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.puff-hole.up .puffer{transform:translate(-50%,0)}}
.difficulty-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:min(460px,100%);margin:12px 0}.difficulty-picker button{min-height:51px!important;margin:0!important;padding:5px!important;border:1px solid #ffffff2b!important;background:#0d3444!important;color:#c5d6da!important}.difficulty-picker button.active{border-color:var(--lime)!important;background:var(--lime)!important;color:var(--deep)!important}.difficulty-picker small{display:block;margin-top:2px;font-size:8px;opacity:.72}.daily-rule{width:min(460px,100%);margin:3px 0 7px;padding:9px 12px;border:1px solid #69d2e74d;border-radius:11px;background:#69d2e712}.daily-rule span{display:block;color:var(--cyan);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:1px}.daily-rule strong{font-size:11px}.puff-pause{position:absolute;z-index:8;right:18px;top:18px;min-height:36px;padding:0 13px;border:1px solid #ffffff66;border-radius:99px;background:#071f2fcc;color:#fff;font-size:10px;font-weight:900;cursor:pointer}.puff-pause:disabled{display:none}.pause-overlay{position:absolute;z-index:12;inset:26px;display:grid;place-content:center;justify-items:center;border-radius:20px;background:#071f2fee;color:#fff;text-align:center}.pause-overlay.hidden{display:none}.pause-overlay h2{margin:8px 0;font-size:38px}.pause-overlay button{min-height:48px;margin-top:10px;padding:0 22px;border:0;border-radius:12px;background:var(--lime);color:var(--deep);font-weight:900}.frenzy-banner{position:absolute;z-index:7;left:50%;top:18px;transform:translateX(-50%);padding:8px 16px;border-radius:99px;background:var(--coral);color:#fff;font-size:11px;font-weight:1000;letter-spacing:1.2px;box-shadow:0 0 0 5px #ff806533;animation:frenzyPulse .45s infinite alternate}.frenzy-banner[hidden]{display:none}.puff-game.frenzy{box-shadow:0 0 0 5px #ff806566,0 25px 65px #082f4130}.puffer.reaction-dizzy .eye{height:5px;border-radius:1px;box-shadow:none;transform:rotate(35deg)}.puffer.reaction-dizzy .eye-b{transform:rotate(-35deg)}.puffer.reaction-shocked .smile{width:14%;height:17%;left:43%;border:4px solid #8d3518;border-radius:50%}.puffer.reaction-smug .smile{transform:rotate(-13deg)}.puff-hole.hit .puffer.reaction-deflate{animation:deflate .38s forwards}.puff-achievements{display:grid;grid-template-columns:240px 1fr;gap:25px;margin-top:14px;padding:25px;border:1px solid var(--line);border-radius:21px;background:#fff}.puff-achievements h2{margin:5px 0;font-size:27px}.achievement-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.achievement{padding:13px;border:1px solid var(--line);border-radius:12px;background:#f3f6f3;opacity:.48}.achievement.unlocked{border-color:#dcb737;background:#fff8ce;opacity:1}.achievement b{display:block;font-size:12px}.achievement small{color:var(--muted);font-size:9px}.new-achievements{margin:8px 0;padding:10px 12px;border-radius:11px;background:#fff4b5;color:var(--deep);font-size:11px;font-weight:900}.new-achievements[hidden]{display:none}@keyframes frenzyPulse{to{transform:translateX(-50%) scale(1.08)}}@keyframes deflate{50%{transform:translate(-50%,-18%) scale(1.25)}to{transform:translate(-50%,40%) scale(.3,.8);opacity:0}}
@media(max-width:700px){.puff-pause{right:12px;top:12px}.frenzy-banner{top:12px}.pause-overlay{inset:12px}.puff-achievements{grid-template-columns:1fr;padding:18px;gap:12px}.achievement-list{grid-template-columns:1fr 1fr}.difficulty-picker{gap:5px}.difficulty-picker button{font-size:10px!important}.daily-rule{margin-bottom:4px}}
@media(max-width:700px){.puff-board{gap:4px}.puff-hole:before{left:3%;right:3%;height:34%;box-shadow:inset 0 10px 14px #001b2d,0 0 0 2px #69d2e766,0 7px 0 #61d4dc55}.puffer{width:min(110px,96%)}}