:root{color:#fffdf7;--cyan:#3dffff;--mint:#5dff8a;--gold:#ffb020;--pink:#ff2d7b;--cream:#fff6d2;--ink:#0b1220;font-family:Fredoka,Trebuchet MS,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:#0b1220;width:100%;height:100%;margin:0;overflow:hidden}canvas{touch-action:none;width:100%;height:100%;display:block}#hud{top:calc(12px + env(safe-area-inset-top));pointer-events:none;z-index:2;align-items:stretch;gap:8px;width:min(360px,100vw - 132px);display:flex;position:fixed;left:50%;transform:translate(-50%)}@media (width<=640px){#hud{top:calc(60px + env(safe-area-inset-top));gap:6px;width:calc(100vw - 20px)}.hud-pill{padding:6px 8px 7px}#score,#time{font-size:18px}}.hud-pill{background:#080c16c7;border:3px solid #ffffff38;border-radius:22px;flex-direction:column;flex:1;justify-content:center;align-items:center;min-width:0;padding:7px 10px 9px;display:flex;box-shadow:0 5px #00000047}.hud-score{border-color:var(--gold)}.hud-time{border-color:var(--cream)}.hud-time.urgent{background:#4a1020;border-color:#ff3b5c;animation:.55s ease-in-out infinite urgentPulse}#hole-size{z-index:3;pointer-events:none;flex-direction:column;align-items:center;gap:5px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,8px)}#hole-size.hidden{display:none}#hole-size-track{background:#5a3a24;border:3px solid #2a1810;border-radius:999px;width:100%;height:14px;overflow:hidden;box-shadow:0 3px #00000047}#hole-size-fill{border-radius:inherit;background:linear-gradient(#ffe56a 0%,#f0a818 100%);width:0%;height:100%;transition:width .2s ease-out}#size{color:#fff;letter-spacing:.02em;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 3px #00000059;font-size:20px;font-weight:700}#size.flash{color:var(--gold)}#combo{top:calc(108px + env(safe-area-inset-top));z-index:3;pointer-events:none;background:var(--pink);color:#fff;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:6px 18px;font-size:18px;font-weight:700;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 5px #a0124a}#combo.hidden{display:none}#size-banner{z-index:3;pointer-events:none;opacity:0;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 8px #00000059;font-size:clamp(40px,9vw,76px);font-weight:700;position:fixed;top:30%;left:50%;transform:translate(-50%,-50%)scale(.7)}#size-banner.show{animation:.9s cubic-bezier(.2,1.4,.3,1) forwards bannerPop}#size-banner[data-rank="2"]{color:var(--mint)}#size-banner[data-rank="3"]{color:#c6ff4a}#size-banner[data-rank="4"]{color:var(--gold)}#size-banner[data-rank="5"]{color:#ff7a2f}#size-banner[data-rank="6"],#size-banner[data-rank="7"]{color:var(--pink)}@media (width<=640px){#combo{top:calc(164px + env(safe-area-inset-top));padding:5px 14px;font-size:15px}#size-banner{-webkit-text-stroke-width:5px;font-size:clamp(28px,10vw,48px);top:46%}}#popups{pointer-events:none;z-index:2;position:fixed;inset:0}.popup{color:var(--cream);text-shadow:0 2px 0 var(--ink), 0 4px 10px #00000073;white-space:nowrap;font-weight:700;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.popup-inner{flex-direction:column;align-items:center;animation:.28s cubic-bezier(.2,1.6,.3,1) popupPop;display:flex}.popup-x{letter-spacing:.08em;color:#fff;font-size:.55em}.popup-sm{font-size:20px}.popup-md{font-size:24px}.popup-lg{font-size:30px}.popup-xl{font-size:36px}.popup-cone{color:#ff7a2f}.popup-planter{color:#e0a86a}.popup-block{color:#ffd056}.popup-fence{color:#efe0c4}.popup-tree{color:#5dff8a}.popup-person{color:#ff8fab}.popup-car{color:var(--cyan)}.popup-van{color:#c77dff}.popup-truck{color:#ff6b35}.popup-house{color:#ff5ea8}.label{letter-spacing:.14em;text-transform:uppercase;color:#fffdf7b8;font-size:10px}#score,#time{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;line-height:1.15}#hint{bottom:calc(18px + env(safe-area-inset-bottom));color:#fffdf7d1;text-shadow:0 2px 8px #00000080;pointer-events:none;z-index:2;margin:0;font-size:14px;font-weight:600;position:fixed;left:50%;transform:translate(-50%)}#hint.hidden{display:none}#stick{pointer-events:none;z-index:4;opacity:0;visibility:hidden;width:134px;height:134px;margin:-67px 0 0 -67px;position:fixed;top:0;left:0}#stick.show{opacity:1;visibility:visible}#stick-base,#stick-nub{border-radius:50%;position:absolute}#stick-base{background:#ffffff14;border:3px solid #ffffff52;inset:0;box-shadow:0 6px #0000002e}#stick-nub{background:#fff;border:3px solid #ffffffd9;width:48px;height:48px;margin:-24px 0 0 -24px;top:50%;left:50%;box-shadow:0 4px #00000038}#build{right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:2;pointer-events:none;letter-spacing:.08em;color:var(--gold);font-size:12px;position:fixed}#to-build,#mute{z-index:5;top:calc(12px + env(safe-area-inset-top));color:#fffdf7;cursor:pointer;background:#080c16b8;border:3px solid #ffffff38;position:fixed;box-shadow:0 4px #00000047}#to-build{font:inherit;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;right:12px}#mute{border-radius:50%;place-items:center;width:44px;height:44px;padding:0;display:grid;left:12px}#mute svg{fill:#fffdf7;width:22px;height:22px}#mute .ico-off,#mute.is-muted .ico-on{display:none}#mute.is-muted .ico-off{display:block}#to-build:hover,#mute:hover{border-color:var(--cyan)}#to-build:active,#mute:active,#start:active,#restart:active{transform:translateY(3px);box-shadow:0 2px #00000047}#title,#overlay{z-index:3;background:linear-gradient(#0000 28%,#06080e47 52%,#06080ee0 100%);justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0;overflow:hidden}#title.hidden,#overlay.hidden,#countdown.hidden{display:none}.sheet{width:min(460px,100%);padding:20px 24px calc(28px + env(safe-area-inset-bottom));text-align:center}.sheet h1{letter-spacing:.04em;color:var(--cyan);-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 #1aa8b8, 0 14px 0 var(--ink);margin:0 0 8px;font-size:clamp(64px,16vw,92px);font-weight:700;line-height:.9}#overlay .sheet h1{letter-spacing:.02em;-webkit-text-stroke:5px var(--ink);text-shadow:0 5px 0 #1aa8b8, 0 9px 0 var(--ink);font-size:clamp(28px,7vw,40px)}#overlay[data-rank="2"] .sheet h1{color:var(--mint);text-shadow:0 5px 0 #1a9a4a, 0 9px 0 var(--ink)}#overlay[data-rank="3"] .sheet h1{color:#c6ff4a;text-shadow:0 5px 0 #7aaa18, 0 9px 0 var(--ink)}#overlay[data-rank="4"] .sheet h1{color:var(--gold);text-shadow:0 5px 0 #b06a00, 0 9px 0 var(--ink)}#overlay[data-rank="5"] .sheet h1{color:#ff7a2f;text-shadow:0 5px 0 #b03a00, 0 9px 0 var(--ink)}#overlay[data-rank="6"] .sheet h1,#overlay[data-rank="7"] .sheet h1{color:var(--pink);text-shadow:0 5px 0 #a0124a, 0 9px 0 var(--ink)}#overlay[data-outcome=win]{background:linear-gradient(#0000 26%,#ffb02038 60%,#06080eeb 100%)}#overlay[data-outcome=win] .kicker{color:var(--mint)}#overlay[data-outcome=win] .sheet h1{color:var(--gold);text-shadow:0 6px 0 #b06a00, 0 12px 0 var(--ink);font-size:clamp(40px,11vw,68px)}#overlay[data-outcome=win] .sheet:before{content:"";border:8px solid var(--cyan);width:74px;height:74px;box-shadow:inset 0 0 0 16px #05060a, 0 0 0 3px var(--ink), 0 8px 0 #1aa8b8;background:#05060a;border-radius:50%;margin:0 auto 12px;animation:.7s cubic-bezier(.2,1.6,.3,1) holeWin;display:block}#overlay[data-outcome=lose] .kicker{color:var(--pink)}#win-burst{pointer-events:none;display:none;position:absolute;inset:0}#overlay[data-outcome=win] #win-burst{display:block}#win-burst span{background:var(--gold);width:9px;height:9px;box-shadow:0 0 10px var(--gold);border-radius:50%;margin:-4px;animation:1.15s ease-out infinite sparkFly;position:absolute;top:22%;left:50%}#win-burst span:first-child{--dx:-90px;--dy:-20px;animation-delay:0s}#win-burst span:nth-child(2){--dx:95px;--dy:-8px;background:var(--cyan);animation-delay:80ms}#win-burst span:nth-child(3){--dx:-40px;--dy:50px;background:var(--mint);animation-delay:.16s}#win-burst span:nth-child(4){--dx:55px;--dy:48px;animation-delay:.22s}#win-burst span:nth-child(5){--dx:-120px;--dy:30px;background:var(--pink);animation-delay:.1s}#win-burst span:nth-child(6){--dx:125px;--dy:24px;background:var(--cyan);animation-delay:.18s}#win-burst span:nth-child(7){--dx:0px;--dy:-55px;animation-delay:40ms}#win-burst span:nth-child(8){--dx:-10px;--dy:70px;background:var(--mint);animation-delay:.26s}.result-sub{color:var(--cream);margin:0 0 10px;font-size:16px;font-weight:600}.kicker{letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 6px;font-size:12px;font-weight:600}.tagline{color:var(--cream);margin:4px 0 22px;font-size:18px;font-weight:600}.final-score{color:var(--cream);margin:4px 0 16px;font-size:18px;font-weight:600}.final-score span{color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 4px 0 var(--ink);font-size:clamp(48px,12vw,64px);font-weight:700;display:block}.stat-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 22px;display:grid}.stat-tile{background:#ffffff1a;border:2px solid #ffffff29;border-radius:16px;padding:10px 6px 8px}.stat-tile .n{font-variant-numeric:tabular-nums;color:#fff;font-size:22px;font-weight:700;display:block}.stat-tile .k{letter-spacing:.08em;text-transform:uppercase;color:#fffdf7b3;margin-top:2px;font-size:10px;display:block}#countdown{z-index:3;pointer-events:none;color:var(--cream);-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;text-shadow:0 10px #00000059;place-items:center;font-size:clamp(84px,22vw,128px);font-weight:700;display:grid;position:fixed;inset:0}#countdown.pop{animation:.38s cubic-bezier(.2,1.5,.3,1) bounceIn}#countdown.go{color:var(--mint)}#start,#restart{width:min(280px,86%);font:inherit;color:var(--ink);background:var(--mint);cursor:pointer;border:0;border-radius:999px;padding:16px 28px;font-size:28px;font-weight:700;box-shadow:0 7px #1a9a4a}#start:hover,#restart:hover{background:#8cffad}#to-menu{font:inherit;color:var(--cream);cursor:pointer;text-underline-offset:4px;background:0 0;border:0;margin:12px auto 0;font-size:16px;font-weight:600;text-decoration:underline;display:block}#to-menu:hover{color:#fff}@keyframes bounceIn{0%{opacity:0;transform:scale(.35)}70%{opacity:1;transform:scale(1.16)}to{transform:scale(1)}}@keyframes bannerPop{0%{opacity:0;transform:translate(-50%,-40%)scale(.55)}22%{opacity:1;transform:translate(-50%,-50%)scale(1.12)}55%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-58%)scale(1.04)}}@keyframes popupPop{0%{transform:scale(.4)}to{transform:scale(1)}}@keyframes holeWin{0%{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}@keyframes sparkFly{0%{opacity:0;transform:translate(0)scale(.4)}18%{opacity:1}to{transform:translate(var(--dx), var(--dy)) scale(1);opacity:0}}@keyframes urgentPulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}body.titled #hud,body.titled #hint,body.titled #combo,body.titled #stick,body.titled #hole-size,body.over #hud,body.over #combo,body.over #hint,body.over #stick,body.over #size-banner,body.over #hole-size,body.building #mute,body.building #title,body.building #countdown,body.building #size-banner,body.building #combo,body.building #stick,body.building #hole-size{display:none}#builder{z-index:4;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#080c16db;border-right:1px solid #ffffff1f;flex-direction:column;gap:14px;width:292px;max-height:100%;padding:16px;font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;display:flex;position:fixed;top:0;left:0;overflow-y:auto}#builder.hidden,body.building #hud,body.building #hint,body.building #popups,body.building #to-build{display:none}#builder header{flex-direction:column;gap:2px;display:flex}#builder .builder-head{justify-content:space-between;align-items:center;gap:8px;display:flex}#b-fold{flex:none;width:auto;min-width:0;padding:4px 10px;font-size:11px}#builder.folded{border-radius:0 0 12px;gap:0;width:auto;max-height:none;padding:10px 12px;overflow:hidden}#builder.folded>:not(header),#builder.folded #b-counts{display:none}#b-counts{color:#9aa6b8;font-variant-numeric:tabular-nums;font-size:11px}#builder .group{flex-direction:column;gap:7px;display:flex}#builder .row{gap:6px;display:flex}#builder .palette{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}#builder button,#builder select,#builder input[type=text],#builder input[type=number]{min-width:0;font:inherit;color:#f4f1ea;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff24;border-radius:8px;flex:1;padding:7px 8px;font-size:12px}#builder input[type=text],#builder input[type=number]{cursor:text}#builder button:hover,#builder select:hover{border-color:#f0c14b99}#builder button.active{color:#0b1220;background:#f0c14b;border-color:#f0c14b;font-weight:700}#builder button.primary{color:#0b1220;background:#8ce99a;border-color:#8ce99a;padding:10px;font-size:13px;font-weight:700}#builder button.primary:hover{background:#a8f0b4}#builder .builder-head #b-fold{flex:none;width:auto}#builder input[type=range]{width:100%}#builder output{color:#f4f1ea;font-variant-numeric:tabular-nums}#builder .keys{color:#8c98aa;margin:0;font-size:11px;line-height:1.6}#builder kbd{background:#ffffff14;border:1px solid #ffffff2e;border-radius:4px;padding:1px 4px;font-family:inherit;font-size:10px}#builder .label{color:#9aa6b8}
