.hb-game{--hb-cream:#f4e4d2;--hb-rose:#efa7b8;--hb-deep:#171522;--beat:0;position:absolute;inset:0;overflow:hidden;isolation:isolate;container-type:inline-size;background:var(--hb-deep);color:var(--hb-cream);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.hb-game *{box-sizing:border-box}
.hb-game [hidden]{display:none!important}
.hb-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.hb-avatar{position:absolute;z-index:2;width:21.48148%;aspect-ratio:1;left:27.037%;top:55.4167%;transform:translate(-50%,-50%);transform-origin:50% 52%;pointer-events:none;will-change:transform,top;filter:drop-shadow(0 2px 1px #110d2866) drop-shadow(0 0 var(--avatar-glow,1px) #f0a3bf66)}
.hb-avatar-image{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto;-webkit-user-drag:none}
.hb-flight-sprite{position:absolute;inset:0;background-repeat:no-repeat;background-size:200% 200%;background-position:0% 0%;image-rendering:auto;opacity:0}
.hb-game[data-flight="ready"] .hb-flight-sprite{opacity:1}
.hb-game[data-flight="ready"] .hb-avatar-image{visibility:hidden}
.hb-game[data-avatar="loading"] .hb-avatar{opacity:0}
.hb-game[data-combo-tier="2"] .hb-avatar,.hb-game[data-combo-tier="3"] .hb-avatar{filter:drop-shadow(0 2px 1px #110d2866) drop-shadow(0 0 var(--avatar-glow,1px) #ffdda388)}
.hb-hud{position:absolute;z-index:3;top:0;left:0;right:0;padding:clamp(20px,7cqw,34px) 6.2cqw 5cqw;background:linear-gradient(180deg,rgba(19,18,34,.94),rgba(19,18,34,.79) 68%,rgba(19,18,34,0));pointer-events:none}
.hb-hud-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4.6cqw;padding-right:80px}
.hb-kicker{font:800 clamp(12px,3.5cqw,18px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em;color:var(--hb-rose)}
.hb-run-tag{font:700 clamp(7px,1.95cqw,10px)/1.15 ui-monospace,monospace;letter-spacing:.025em;white-space:nowrap;padding:4px 5px;border:1px solid #c18a505c;color:#ffe0a2;background:#b7834024}
.hb-progress-row{display:flex;align-items:center;gap:4cqw}
.hb-heart-track{flex:1;display:flex;align-items:center;gap:1cqw;min-width:0}
.hb-heart{flex:1;display:block;max-width:27px;aspect-ratio:9/8;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3));transform-origin:center}
.hb-heart svg{display:block;width:100%;height:100%;fill:#443242;stroke:#6e485e;stroke-width:.5;shape-rendering:crispEdges;transition:fill .12s}
.hb-heart.is-filled svg{fill:#e9a0b4;stroke:#f3c4c5}
.hb-heart.is-filled:last-of-type{filter:drop-shadow(0 0 7px #e9a0b444)}
.hb-heart.is-new{animation:hb-heart-pop .55s cubic-bezier(.2,.8,.2,1)}
.hb-game[data-score-pulse="a"] .hb-score b{animation:hb-score-a .55s both}.hb-game[data-score-pulse="b"] .hb-score b{animation:hb-score-b .55s both}
.hb-score{display:flex;align-items:baseline;gap:1.1cqw;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.hb-score b{font-size:clamp(20px,6cqw,31px);line-height:1;font-weight:800;text-shadow:2px 2px 0 #563d51}
.hb-score span{color:#b599a8;font-size:clamp(10px,2.6cqw,14px)}
.hb-hud-meta{display:flex;justify-content:space-between;margin-top:3cqw;color:#9b869b;font-size:clamp(10px,2.65cqw,13px);letter-spacing:.025em}
.hb-hud-meta>span:last-child{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}
.hb-hud-meta b{color:#c7b09e;font-weight:500}
.hb-coin-stat{display:inline-flex;align-items:center;gap:1.8cqw;font:600 clamp(9px,2.4cqw,13px)/1 ui-monospace,monospace;letter-spacing:.08em;color:#bc9d67}
.hb-coin-stat .hb-coins{display:inline-block;color:#ffe0a0;font-weight:800;font-size:clamp(13px,3.5cqw,18px);min-width:2ch;letter-spacing:.02em}
.hb-coin-icon{display:inline-block;width:10px;height:13px;flex:none;border:2px solid #f9d87a;box-shadow:1px 0 0 #a67333,-1px 0 0 #a67333,0 1px 0 #a67333,0 -1px 0 #a67333,inset 2px 0 0 #fff1b0;background:#d49a38;position:relative}
.hb-coin-icon:after{content:'';position:absolute;top:1px;bottom:1px;left:3px;width:1px;background:#fff0a5}
.hb-game[data-coin-pulse="a"] .hb-coins{animation:hb-coin-a .35s both}.hb-game[data-coin-pulse="b"] .hb-coins{animation:hb-coin-b .35s both}
.hb-rush-banner{position:absolute;z-index:4;left:50%;top:36%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 14px;border-top:1px solid #e9bc7460;border-bottom:1px solid #e9bc7460;background:linear-gradient(90deg,transparent,#322239dd 20%,#322239dd 80%,transparent);width:94%;pointer-events:none;text-shadow:0 2px 5px #211325}
.hb-rush-banner b{font:800 clamp(12px,3.8cqw,20px)/1.2 ui-monospace,monospace;letter-spacing:.13em;color:#ffe3aa}
.hb-rush-banner span{font-size:clamp(9px,2.5cqw,13px);color:#e5c7b3;letter-spacing:-.02em;white-space:nowrap}
.hb-game[data-difficulty="rush"] .hb-kicker{color:#f0c894}
.hb-combo-row{display:flex;align-items:center;justify-content:space-between;margin-top:3.3cqw;min-height:7cqw;gap:10px}
.hb-combo{display:flex;align-items:baseline;gap:2cqw;color:#9a7e96;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;transition:color .1s}
.hb-combo>span{font-size:clamp(9px,2.5cqw,13px);font-weight:700;letter-spacing:.12em}.hb-combo>b{font-size:clamp(18px,5.6cqw,29px);line-height:1;letter-spacing:-.02em;color:#dcb1c1;text-shadow:2px 2px 0 #50354f}
.hb-combo>i{font-size:clamp(6px,1.7cqw,9px);font-style:normal;letter-spacing:.06em;color:#b68c9e;opacity:.65}
.hb-combo-best{font:500 clamp(8px,2.2cqw,12px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;color:#aa829c}.hb-combo-best b{font-weight:500;color:#d2b1b9}
.hb-game[data-combo="0"] .hb-combo{opacity:.55}.hb-game[data-combo-tier="1"] .hb-combo>b{color:#fac1d4;text-shadow:0 0 12px #f19eba66,2px 2px 0 #50354f}.hb-game[data-combo-tier="2"] .hb-combo>b,.hb-game[data-combo-tier="3"] .hb-combo>b{color:#ffe0aa;text-shadow:0 0 16px #e6a97c88,2px 2px 0 #70515b}
.hb-footer{position:absolute;z-index:3;left:6cqw;right:6cqw;bottom:3.3cqw;pointer-events:none}
.hb-rhythm{display:flex;align-items:center;justify-content:center;gap:2.5cqw;margin-bottom:5.4cqw;color:#f0b8bd;opacity:calc(.55 + var(--beat)*.45)}
.hb-beat-light{width:1.7cqw;height:1.7cqw;min-width:5px;min-height:5px;background:#f1a5b5;box-shadow:0 0 calc(2px + var(--beat)*9px) #e59cb7}
.hb-rhythm svg{width:22cqw;height:4cqw;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;shape-rendering:crispEdges}
.hb-beat-word{min-width:13cqw;font-size:clamp(10px,2.7cqw,14px);letter-spacing:.05em}
.hb-footer-bottom{display:flex;align-items:center;justify-content:space-between;color:#aa91a6;font-size:clamp(10px,2.55cqw,13px);letter-spacing:.05em}
.hb-pause-button{pointer-events:auto;cursor:pointer;background:transparent;border:1px solid #75566d;color:#cfabbc;font:800 13px/1 ui-monospace,monospace;min-width:32px;min-height:28px;border-radius:0;padding:5px 8px}
.hb-pause-button:hover,.hb-pause-button:focus-visible{border-color:var(--hb-rose);color:white;outline:2px solid #f1a5b599;outline-offset:3px}
.hb-feedback{position:absolute;z-index:3;left:50%;top:30%;transform:translate(-50%,4px);color:#f3c6c8;font:700 clamp(10px,2.8cqw,15px)/1.5 ui-monospace,'Apple SD Gothic Neo',monospace;letter-spacing:.045em;opacity:0;transition:opacity .1s,transform .12s;pointer-events:none;text-shadow:0 2px 6px #1c152a;white-space:nowrap}
.hb-feedback.is-visible{opacity:1;transform:translate(-50%,0)}
.hb-feedback[data-kind="break"]{font-family:inherit;font-weight:500;color:#c7afbb;letter-spacing:-.025em}
.hb-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10cqw 6cqw;background:linear-gradient(180deg,rgba(18,16,31,.86),rgba(27,20,39,.78) 58%,rgba(22,18,32,.81))}
.hb-ready-label{display:flex;align-items:center;gap:3cqw;color:#b892a7;font:600 clamp(8px,2.15cqw,12px)/1.5 ui-monospace,monospace;letter-spacing:.15em;margin-top:-1cqw;margin-bottom:4cqw;white-space:nowrap}
.hb-ready-label span{height:1px;width:7cqw;background:#775069}
.hb-title{margin:0;color:#f3dfc4;font:900 clamp(38px,13.4cqw,70px)/.86 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-.055em;text-shadow:3px 0 0 #765065,0 3px 0 #765065,4px 4px 0 #171221;transform:scaleX(1.04)}
.hb-title>span{display:block;margin-top:1.4cqw;color:#e9a3b5}
.hb-title-dot{color:#f0dfc9}
.hb-ready-avatar{position:relative;isolation:isolate;width:32cqw;height:32cqw;margin:4cqw 0 2.5cqw;flex:none}
.hb-ready-avatar:before{content:'';position:absolute;inset:15%;z-index:-1;background:radial-gradient(ellipse,#a2719760,transparent 72%);transform:scale(1.8)}
.hb-ready-avatar img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 5px 7px #150b2288);transform:translateY(calc(var(--beat)*-4px))}
.hb-ready-avatar>span{position:absolute;right:0;top:11%;font:800 6cqw/1 ui-monospace,monospace;color:#f0acb9;transform:scale(calc(1 + var(--beat)*.13));text-shadow:2px 2px 0 #80536b}
.hb-ready-line{margin:0 0 3.5cqw;font-size:clamp(15px,4.3cqw,23px);font-weight:650;letter-spacing:-.03em;color:#f4e8d9}
.hb-instructions{margin:0;color:#b5a3b4;font-size:clamp(11px,3.05cqw,16px);line-height:1.85;letter-spacing:-.025em;word-break:keep-all}
.hb-instructions strong{color:#f4b5ca;font-family:ui-monospace,monospace;font-weight:700;letter-spacing:.02em}
.hb-rush-note{color:#c3a78c;font-size:.92em}
.hb-start{position:relative;display:flex;align-items:center;justify-content:center;gap:3.3cqw;width:100%;max-width:330px;min-height:clamp(48px,13.7cqw,68px);padding:12px 18px;margin-top:7.5cqw;border:0;background:#eccbb4;color:#382b3d;font-family:inherit;font-size:clamp(13px,3.6cqw,19px);font-weight:750;letter-spacing:-.025em;border-radius:0;box-shadow:4px 0 0 #eccbb4,-4px 0 0 #eccbb4,0 4px 0 #eccbb4,0 -4px 0 #eccbb4,0 8px 0 #805367;cursor:pointer;touch-action:manipulation}
.hb-start::before{content:"";position:absolute;left:4px;right:4px;top:3px;height:2px;background:#fff3dc;opacity:.8}
.hb-start:active{transform:translateY(3px);box-shadow:4px 0 0 #eccbb4,-4px 0 0 #eccbb4,0 4px 0 #eccbb4,0 -4px 0 #eccbb4,0 5px 0 #805367}
.hb-start:focus-visible{outline:2px solid #fff0d5;outline-offset:9px}
.hb-start-arrow{font-size:.8em;line-height:1}
.hb-goal{margin:5cqw 0 0;color:#a68b9f;font-size:clamp(9px,2.5cqw,13px);letter-spacing:-.02em;white-space:nowrap}
.hb-goal b{color:#d8b1be;font-weight:500}
.hb-goal span{padding:0 1cqw;color:#72586d}
.hb-small-label{color:#d09bb3;font:600 11px/1.5 ui-monospace,monospace;letter-spacing:.2em}
.hb-pause-overlay h2{margin:6cqw 0 3cqw;font-size:6cqw;font-weight:600;letter-spacing:-.04em}
.hb-pause-overlay p{margin:0;color:#bdacbb;font-size:3.2cqw}
.hb-result{position:absolute;left:5cqw;right:5cqw;top:38%;z-index:4;text-align:center;pointer-events:none;text-shadow:0 2px 14px #1d142c}
.hb-result>span{font:600 clamp(10px,2.75cqw,14px)/1.6 ui-monospace,monospace;letter-spacing:.15em;color:#f0b3c4}
.hb-result h2{font-size:clamp(22px,7.3cqw,37px);font-weight:700;letter-spacing:-.05em;margin:2.5cqw 0;color:#fff0dc}
.hb-result p{font-size:clamp(10px,2.8cqw,15px);color:#ddc3cd;margin:0}
.hb-game[data-phase="dead"]::after,.hb-game[data-phase="success"]::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 24%,#1d142caa 42%,#1d142c66 65%,transparent);pointer-events:none;z-index:2}
.hb-game[data-phase="ready"] .hb-hud,.hb-game[data-phase="ready"] .hb-footer{opacity:.25}
.hb-game[data-phase="paused"] .hb-footer,.hb-game[data-phase="dead"] .hb-footer,.hb-game[data-phase="success"] .hb-footer{opacity:.4}
.hb-game[data-phase="ready"] .hb-pause-button,.hb-game[data-phase="dead"] .hb-pause-button,.hb-game[data-phase="success"] .hb-pause-button{pointer-events:none}
.hb-game[data-phase="paused"] *{animation-play-state:paused!important}
@keyframes hb-heart-pop{0%{transform:scale(.7)}32%{transform:scale(1.5);filter:drop-shadow(0 0 7px #ffd0de)}100%{transform:scale(1)}}
@keyframes hb-score-a{0%{transform:scale(1.32);color:#ffe7bd}100%{transform:scale(1)}}
@keyframes hb-score-b{0%{transform:scale(1.32);color:#ffe7bd}100%{transform:scale(1)}}
@keyframes hb-coin-a{0%{transform:translateY(-3px) scale(1.25);color:#fff5cb}100%{transform:translateY(0) scale(1)}}
@keyframes hb-coin-b{0%{transform:translateY(-3px) scale(1.25);color:#fff5cb}100%{transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.hb-game *, .hb-game *::before,.hb-game *::after{transition:none!important;animation:none!important}.hb-ready-avatar img,.hb-ready-avatar>span{transform:none}}