.hb-app{--hb-ink:#13283d;--hb-navy:#1f3b63;--hb-orange:#ff7a1a;--hb-red:#d9442f;--hb-gold:#ffd23a;--hb-green:#3dff7a;--hb-cream:#fff7ea;--hb-glass:rgba(14,30,48,0.72);--play-accent:#d9442f;--play-ink:#13283d;--play-paper:#fff7ea;overflow:hidden;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;height:100dvh;background:#cfe4f2;color:#fff}.hb-scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none}.hb-app:not([data-phase=play]) :is(.hb-head,.hb-stats,.hb-ticket,.hb-wind,.hb-gauge,.hb-controls,.hb-keys,.hb-hint,.hb-grade,.hb-toast){display:none}.hb-head{position:absolute;z-index:4;left:0;right:0;top:calc(env(safe-area-inset-top, 0px) + 10px);display:grid;grid-template-columns:44px 1fr 44px;align-items:center;grid-gap:8px;gap:8px;padding:0 12px;pointer-events:none}.hb-head>*{pointer-events:auto}.hb-icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:var(--hb-glass);color:#fff;border:2px solid rgba(255,255,255,.85);box-shadow:0 3px 0 rgba(0,0,0,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.hb-icon-btn .off,.hb-icon-btn[aria-pressed=true] .on{display:none}.hb-icon-btn[aria-pressed=true] .off{display:inline}.hb-pill{justify-self:center;display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 8px 0 18px;border-radius:22px;background:var(--hb-glass);border:2px solid rgba(255,255,255,.85);box-shadow:0 3px 0 rgba(0,0,0,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}.hb-pill span{font:800 16px/1 Playful,sans-serif;letter-spacing:.3px;white-space:nowrap}.hb-pill b{font:800 18px/1 Playful,sans-serif;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;background:var(--hb-cream);color:var(--hb-ink);border-radius:14px;padding:6px 10px;min-width:52px;text-align:center}.hb-pill b.low{background:#ff4a2c;color:#fff;animation:hb-pulse 1s infinite}@keyframes hb-pulse{50%{transform:scale(1.1)}}.hb-stats{position:absolute;z-index:4;left:50%;top:calc(env(safe-area-inset-top, 0px) + 62px);transform:translateX(-50%);display:flex;gap:6px;pointer-events:none}.hb-stat{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:74px;padding:6px 10px 7px;border-radius:14px;background:var(--hb-glass);border:2px solid rgba(255,255,255,.6);box-shadow:0 3px 0 rgba(0,0,0,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.hb-stat span{font:800 9px/1 Playful,sans-serif;letter-spacing:1.2px;opacity:.75}.hb-stat b{font:800 19px/1 Playful,sans-serif;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:var(--hb-gold)}.hb-lives{display:flex;gap:4px;height:19px;align-items:center}.hb-lives u{width:20px;height:11px;border-radius:2px;background:var(--hb-orange);border:2px solid #fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);transition:transform .3s,opacity .3s,background .3s}.hb-lives u.lost{background:#2f6f9a;border-color:#8fb6d0;opacity:.5;transform:translateY(5px) rotate(-14deg)}.hb-ticket{position:absolute;z-index:4;left:10px;top:calc(env(safe-area-inset-top, 0px) + 118px);display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:14px;background:var(--hb-cream);color:var(--hb-ink);border:2px solid #fff;box-shadow:0 4px 0 rgba(10,30,50,.35);opacity:0;transform:translateX(-12px);transition:opacity .25s,transform .25s;pointer-events:none}.hb-ticket.show{opacity:1;transform:none}.hb-ticket.flip{animation:hb-flip .5s cubic-bezier(.3,1.6,.5,1)}@keyframes hb-flip{0%{transform:scale(.8) rotate(-4deg)}to{transform:none}}.hb-grid{width:30px;height:50px;flex:none}.hb-grid rect{fill:#d9cfbf}.hb-grid rect.full{fill:#7d8ea0}.hb-grid rect.target{fill:var(--hb-orange);animation:hb-blink .8s infinite alternate}.hb-grid .bow{fill:none;stroke:#9a8f80;stroke-width:2;stroke-linejoin:round}@keyframes hb-blink{to{fill:#ffc04a}}.hb-ticket-text{display:flex;flex-direction:column;gap:3px}.hb-ticket-text span{font:800 9px/1 Playful,sans-serif;letter-spacing:1.4px;color:#8a7a68}.hb-ticket-text b{font:800 15px/1.05 Playful,sans-serif;color:var(--hb-ink);white-space:nowrap}.hb-weight{align-self:flex-start;font:800 10px/1 Playful,sans-serif;font-style:normal;letter-spacing:.8px;padding:3px 7px;border-radius:8px;background:#d6efe0;color:#1d6b3d}.hb-weight.medium{background:#fde7c4;color:#8a5200}.hb-weight.heavy{background:#ffd6cf;color:#a3241a}.hb-wind{position:absolute;z-index:4;right:10px;top:calc(env(safe-area-inset-top, 0px) + 118px);display:none;align-items:center;gap:4px;padding:6px 10px 6px 6px;border-radius:14px;background:var(--hb-glass);border:2px solid rgba(255,255,255,.6);pointer-events:none}.hb-wind.show{display:flex}.hb-wind svg{color:#bfe6ff}.hb-wind g{transform-origin:12px 12px;transition:transform .4s}.hb-wind b{font:800 14px/1 Playful,sans-serif;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.hb-wind.gust{border-color:var(--hb-gold);animation:hb-shake .3s infinite}.hb-wind.gust svg{color:var(--hb-gold)}@keyframes hb-shake{50%{transform:translateX(2px)}}.hb-gauge{position:absolute;z-index:4;right:10px;top:calc(env(safe-area-inset-top, 0px) + 170px);display:none;flex-direction:column;align-items:center;gap:4px;width:64px;padding:7px 4px 8px;border-radius:14px;background:var(--hb-glass);border:2px solid rgba(255,255,255,.6);pointer-events:none}.hb-gauge.show{display:flex}.hb-gauge span{font:800 9px/1 Playful,sans-serif;letter-spacing:1.2px;opacity:.75}.hb-gauge b{font:800 16px/1 Playful,sans-serif;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:#fff}.hb-wave{position:relative;width:18px;height:64px;border-radius:9px;background:linear-gradient(180deg,#2a7fa8,#10405e);border:2px solid rgba(255,255,255,.5);margin-top:2px;overflow:hidden}.hb-wave-zone{position:absolute;left:0;right:0;top:0;height:22px;background:rgba(61,255,122,.25);border-bottom:1px dashed rgba(61,255,122,.8)}.hb-wave-dot{position:absolute;left:50%;top:50%;width:14px;height:8px;margin:-4px 0 0 -7px;border-radius:3px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8)}.hb-gauge em{font:800 9px/1 Playful,sans-serif;font-style:normal;letter-spacing:.8px;color:#bfe6ff}.hb-gauge.crest em{color:var(--hb-green)}.hb-gauge.crest .hb-wave-dot{background:var(--hb-green);box-shadow:0 0 8px var(--hb-green)}.hb-gauge.rising em{color:#ffb36a}.hb-toast{position:absolute;z-index:7;left:50%;top:27%;transform:translate(-50%,10px) scale(.9);opacity:0;pointer-events:none;font:800 24px/1.1 Playful,sans-serif;color:#fff;text-align:center;width:max-content;max-width:calc(100% - 28px);-webkit-text-stroke:6px var(--hb-navy);paint-order:stroke fill;text-shadow:0 4px 0 var(--hb-navy);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}.hb-toast.show{opacity:1;transform:translate(-50%)}.hb-toast.good{color:#d8ffe4}.hb-toast.bad{color:#ffe1d8;-webkit-text-stroke-color:#5a1010;text-shadow:0 4px 0 #5a1010}.hb-grade{position:absolute;z-index:6;left:50%;top:34%;transform:translateX(-50%) scale(.6);opacity:0;pointer-events:none;font:800 24px/1 Playful,sans-serif;white-space:nowrap;color:#fff;-webkit-text-stroke:6px #12304a;paint-order:stroke fill;transition:opacity .15s,transform .25s cubic-bezier(.3,1.8,.5,1)}.hb-grade.show{opacity:1;transform:translateX(-50%) scale(1)}.hb-grade.perfect{color:#9dffb4}.hb-grade.good{color:#fff08a}.hb-grade.rough{color:#ffb36a}.hb-hint{position:absolute;z-index:5;left:50%;bottom:calc(env(safe-area-inset-bottom, 0px) + 196px);transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:14px;background:var(--hb-glass);border:2px solid rgba(255,255,255,.6);font:700 14px/1.25 Playful,sans-serif;text-align:center;width:max-content;max-width:calc(100% - 40px);opacity:0;transition:opacity .3s;pointer-events:none}.hb-hint.show{opacity:1}.hb-controls{position:absolute;z-index:5;left:0;right:0;bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);display:flex;align-items:flex-end;justify-content:space-between;padding:0 14px;pointer-events:none;transition:opacity .25s}.hb-controls>*{pointer-events:auto}.hb-controls.off{opacity:.6}.hb-stick{position:relative;width:150px;height:150px;border-radius:50%;touch-action:none;cursor:-webkit-grab;cursor:grab;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.28),rgba(20,44,70,.62) 70%);border:3px solid rgba(255,255,255,.85);box-shadow:0 6px 0 rgba(10,25,40,.45),inset 0 0 22px rgba(0,0,0,.25);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.hb-stick.active{cursor:-webkit-grabbing;cursor:grabbing;border-color:var(--hb-gold)}.hb-stick-arrows{inset:10px;opacity:.8;background:conic-gradient(from -20deg,#fff 0 40deg,transparent 40deg 90deg,#fff 90deg 130deg,transparent 130deg 180deg,#fff 180deg 220deg,transparent 220deg 270deg,#fff 270deg 310deg,transparent 310deg);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,#000 64%,transparent 66%);mask:radial-gradient(circle,transparent 58%,#000 60%,#000 64%,transparent 66%)}.hb-knob,.hb-stick-arrows{position:absolute;border-radius:50%;pointer-events:none}.hb-knob{left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 32%,#ffb46a,var(--hb-orange) 55%,#c4520a);border:3px solid #fff;box-shadow:0 5px 0 #8a3a06,0 8px 18px rgba(0,0,0,.35)}.hb-buttons{flex-direction:column}.hb-buttons,.hb-cable{display:flex;align-items:flex-end;gap:10px}.hb-cable-btn{position:relative;border-radius:50%;border:3px solid #fff;padding:0;cursor:pointer;touch-action:none;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:transform .08s,box-shadow .08s,background .08s}.hb-cable-btn span{font:800 12px/1 Playful,sans-serif;letter-spacing:.8px}.hb-cable-btn.up{width:68px;height:68px;background:radial-gradient(circle at 50% 30%,#5aa8e6,#1f5f9a 72%);box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 6px 0 #0f3558}.hb-cable-btn.down{width:104px;height:104px;background:radial-gradient(circle at 50% 30%,#ff9a4a,#d9561a 72%);box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 7px 0 #7a2a06,0 12px 24px rgba(0,0,0,.35)}.hb-cable-btn.down span{font-size:14px}.hb-cable-btn.held{transform:translateY(5px) scale(.97);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 1px 0 #000,0 0 24px rgba(255,210,58,.7)}.hb-lock{display:flex;align-items:center;gap:6px;height:50px;padding:0 18px 0 14px;border-radius:25px;cursor:pointer;touch-action:none;border:3px solid rgba(255,255,255,.7);background:#50606e;color:rgba(255,255,255,.75);box-shadow:0 5px 0 #2a343e;font:800 17px/1 Playful,sans-serif;letter-spacing:1px;transition:background .15s,transform .15s}.hb-lock.rest{background:#a88420;color:#fff;box-shadow:0 5px 0 #5f4a10}.hb-lock.ready{background:#1fbf5a;color:#fff;border-color:#fff;box-shadow:0 5px 0 #0c6a2e,0 0 24px rgba(61,255,122,.8);animation:hb-ready .6s infinite alternate}.hb-lock:active{transform:translateY(4px)}@keyframes hb-ready{to{transform:scale(1.07)}}.hb-keys{display:none}@media (hover:hover) and (pointer:fine){.hb-keys{display:block;position:absolute;z-index:5;left:50%;bottom:8px;transform:translateX(-50%);font:700 12px/1 Playful,sans-serif;color:rgba(20,40,60,.75);white-space:nowrap;pointer-events:none}}.playful-game .hb-menu,.playful-game .hb-results{background:linear-gradient(180deg,rgba(14,30,48,0) 30%,rgba(14,30,48,.55));backdrop-filter:none;-webkit-backdrop-filter:none;justify-content:flex-start;padding:30vh 12px calc(env(safe-area-inset-bottom, 0px) + 12px)}.playful-game .hb-results{padding-top:36vh}.hb-card{width:min(440px,100%);margin:auto auto 0;flex:none;background:var(--hb-cream);color:var(--hb-ink);border:3px solid #fff;border-radius:28px;padding:14px 14px 16px;box-shadow:0 7px 0 #b8a88e,0 20px 50px rgba(0,0,0,.35);text-align:center}.hb-kicker{display:inline-block;font:800 11px/1 Playful,sans-serif;letter-spacing:2px;color:#c4401c;background:#ffe5d2;border-radius:10px;padding:5px 10px}.hb-logo{margin:4px 0 8px;font:800 36px/.95 Playful,sans-serif;letter-spacing:1px;color:#fff7ea;-webkit-text-stroke:3px var(--hb-red);paint-order:stroke fill;text-shadow:0 5px 0 var(--hb-navy);transform:rotate(-2deg)}.hb-levels{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:6px;gap:6px}.hb-level{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 3px;border-radius:16px;cursor:pointer;background:#17324e;border:2px solid #2f5070;color:#fff;transition:transform .15s,border-color .15s}.hb-level svg{width:56px;height:32px}.hb-level strong{font:800 13px/1.05 Playful,sans-serif}.hb-level small{font-size:11px;color:var(--hb-gold);letter-spacing:1px}.hb-level small span{color:#48627c}.hb-level em{font:700 10px/1 Playful,sans-serif;font-style:normal;color:#b8cde0}.hb-level.on{border-color:var(--hb-gold);background:#2a4f78;transform:translateY(-2px);box-shadow:0 3px 0 var(--hb-gold),0 0 14px rgba(255,210,58,.45)}.hb-blurb{margin:8px 0 6px;font:700 13px/1.3 Playful,sans-serif;color:#3e5a74;min-height:1.3em}.hb-rules{list-style:none;margin:0 0 10px;padding:0;text-align:left;display:grid;grid-gap:4px;gap:4px}.hb-rules li{display:flex;gap:6px;align-items:baseline;font:600 12.5px/1.3 Playful,sans-serif;color:#2c4660}.hb-rules li span{flex:none;width:18px;text-align:center}.hb-rules li p{margin:0}.hb-rules b{color:var(--hb-red)}.playful-game .hb-card button.big{width:100%;background:var(--hb-orange);color:#fff;border-color:#a8460a;box-shadow:inset 0 3px 0 #ffb27a,0 5px 0 #a8460a;font-size:24px}.hb-best{margin:10px 0 0;font:700 12px/1.2 Playful,sans-serif;color:#6a7f92}.hb-r-title{margin:6px 0 0;font:800 30px/1 Playful,sans-serif;color:#1f8f4a}.hb-results.lost .hb-r-title{color:var(--hb-red)}.hb-r-score{display:flex;align-items:baseline;justify-content:center;gap:6px}.hb-r-score b{font:800 52px/1 Playful,sans-serif;color:var(--hb-ink);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.hb-r-score span{font:800 16px/1 Playful,sans-serif;color:#8a9aa8}.hb-stars{display:flex;justify-content:center;gap:6px;margin:2px 0}.hb-stars i{width:30px;height:30px;background:#e2dccf;-webkit-clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transition:transform .3s cubic-bezier(.3,1.8,.5,1),background .2s}.hb-stars i.on{background:#ffbf2e;transform:scale(1.18) rotate(-6deg)}.hb-r-line{margin:6px 0 8px;font:700 13px/1.3 Playful,sans-serif;color:#3e5a74}.hb-r-stats{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);grid-gap:5px;gap:5px}.hb-r-stats li{display:flex;flex-direction:column;gap:3px;padding:7px 2px;border-radius:12px;background:#e9f1f6}.hb-r-stats b{font:800 18px/1 Playful,sans-serif;color:var(--hb-navy);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.hb-r-stats span{font:700 10px/1 Playful,sans-serif;color:#6a7f92}.hb-r-best{margin:2px 0 10px;font:800 13px/1 Playful,sans-serif;color:#d9561a;min-height:13px}.hb-r-row{display:flex;gap:10px;justify-content:center;align-items:center}.playful-game .hb-r-row .share-btn{margin-top:10px;padding:8px 14px;font-size:15px}.hb-link-btn{margin-top:10px;background:#e3edf3;color:var(--hb-ink);border:2px solid #c6d6e2;border-radius:14px;padding:9px 14px;font:800 15px/1.2 Playful,sans-serif;cursor:pointer}.playful-game .hb-loading{background:radial-gradient(ellipse at 50% 40%,#3f8fc0,#13283d)}@media (min-width:760px) and (min-aspect-ratio:1/1){.playful-game .hb-menu,.playful-game .hb-results{background:linear-gradient(90deg,rgba(14,30,48,0) 40%,rgba(14,30,48,.5));align-items:flex-end;justify-content:flex-start;padding:24px 6vw 24px 24px}.hb-card{margin:auto 0}.hb-logo{font-size:46px}.hb-controls{padding:0 34px;bottom:30px}.hb-hint{bottom:150px}.hb-ticket{left:24px}.hb-gauge,.hb-wind{right:24px}}@media (max-height:700px) and (max-width:759px){.playful-game .hb-menu,.playful-game .hb-results{padding-top:18vh}.hb-rules{display:none}.hb-stick{width:128px;height:128px}.hb-cable-btn.down{width:88px;height:88px}.hb-hint{bottom:calc(env(safe-area-inset-bottom, 0px) + 170px)}}