#hud{font-family:var(--font-body);color:var(--ink);text-shadow:none}#hud .center h1{color:var(--ink);font:600 clamp(40px,8vw,88px)/1.05 var(--font-display);-webkit-text-stroke:0;text-shadow:0 3px 0 var(--paper);letter-spacing:0}#hud .center button,#cog-btn{font:600 var(--fs-body)/1 var(--font-display);color:var(--ink);background:var(--paper);border:0;box-shadow:0 4px 12px #3a2e2638;cursor:pointer}#hud .center button{min-height:52px;min-width:220px;margin-top:14px;padding:0 28px;border-radius:26px}#hud .center button:hover{background:var(--paper);filter:brightness(1.05)}#hud #menu{justify-content:space-between;padding:10vh 16px 12vh;box-sizing:border-box}#hud #menu .by{position:absolute;left:24px;bottom:20px;margin:0;font:600 16px/1.2 var(--font-display);color:var(--accent, #e8743b);text-decoration:none;pointer-events:auto;display:inline-block;transition:transform .15s cubic-bezier(.2,.9,.3,1.4)}#hud #menu .by:hover,#hud #menu .by:focus-visible{transform:scale(1.08);text-decoration:underline;text-underline-offset:3px}#hud button{transition:transform .14s cubic-bezier(.3,1.6,.5,1),filter .14s ease,box-shadow .14s ease}#hud button:hover:not(:disabled){transform:translateY(-2px) scale(1.04);filter:brightness(1.05)}#hud button:active:not(:disabled){transform:translateY(1px) scale(.95);filter:brightness(.96);transition-duration:.05s}#hud #menu .menu-more{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}#hud #menu .menu-more button{margin-top:0;min-width:200px}#hud #menu .play{min-height:72px;min-width:260px;font-size:var(--fs-heading);background:var(--accent);color:var(--paper)}#hud #menu .lang{position:absolute;top:16px;left:16px;min-width:48px;margin:0}#pause{background:#3a2e2659}#pause-main{padding:28px 36px;border-radius:22px;background:var(--paper);box-shadow:0 18px 40px #3a2e264d}#pause-main h1{font-size:var(--fs-display);text-shadow:none}#hud #pause-main button{background:var(--paper-shade)}#hud #pause #pause-resume-btn{background:var(--accent);color:var(--paper)}#hud #pause #pause-exit-btn{background:transparent;color:var(--ink);border:2px solid var(--ink)}#hud #pause-main.animate h1 .ch{animation:vvLetterPop .62s cubic-bezier(.18,.9,.3,1.35) forwards}#hud #pause-main.animate .fade-el{animation:vvFadeUp .55s cubic-bezier(.2,.7,.2,1.1) forwards}#pause-about{display:none;max-width:min(520px,88vw);padding:28px 32px;border-radius:22px;background:var(--paper);color:var(--ink);text-align:center;box-shadow:0 18px 40px #3a2e264d;pointer-events:auto}#pause.about-open #pause-main{display:none}#pause.about-open #pause-about{display:block;animation:word-pop .4s cubic-bezier(.2,.9,.3,1.3) both}#pause-about h2{margin:0 0 12px;font:600 var(--fs-display)/1.1 var(--font-display)}#pause-about p{margin:0 0 12px;font:500 24px/1.45 var(--font-body);text-align:left}#pause-about strong{font-weight:800}#pause-about .about-sign{text-align:right;font:600 var(--fs-body)/1.3 var(--font-display);color:var(--accent)}#hud #pause-about button{background:var(--accent);color:var(--paper)}#cog-btn{top:16px;right:16px;bottom:auto;width:52px;height:52px;border-radius:50%}#cog-btn:hover{background:var(--paper)}.game-hud{position:absolute;inset:0;pointer-events:none}.timer{position:absolute;top:28px;left:50%;width:min(56vw,460px);height:16px;transform:translate(-50%);border-radius:8px;background:var(--paper);box-shadow:0 3px 10px #3a2e2633;overflow:hidden}.timer-fill{height:100%;background:var(--accent);transform-origin:left center}.points{position:absolute;top:18px;left:0;right:0;width:max-content;margin:0 auto;padding:6px 20px;border-radius:999px;background:var(--paper);color:var(--ink);font:700 var(--fs-heading)/1.1 var(--font-display);box-shadow:0 4px 12px #3a2e2638;animation:word-pop .45s cubic-bezier(.2,.9,.3,1.4) both}.points.win{background:var(--gold)}.prompt{position:absolute;top:76px;left:50%;transform:translate(-50%);width:max-content;max-width:min(90vw,640px);padding:8px 20px;border-radius:16px;background:var(--paper);color:var(--ink);text-align:center;font:600 var(--fs-heading)/1.25 var(--font-display);box-shadow:0 4px 12px #3a2e2633}.note{position:absolute;left:50%;bottom:calc(12vh + 72px);translate:-50% 0;rotate:-1.2deg;width:min(460px,calc(100vw - 32px));box-sizing:border-box;padding:16px 24px 18px;border-radius:6px 18px 18px 6px;background:var(--paper);border-left:10px solid var(--accent);color:var(--ink);text-align:left;pointer-events:none;box-shadow:0 14px 30px #3a2e2647;animation:word-pop .35s cubic-bezier(.2,.9,.3,1.4) both}.note:before{content:"";position:absolute;top:-8px;right:28px;width:16px;height:34px;background:var(--accent);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}.note:after{content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;border-radius:0 0 18px;background:linear-gradient(135deg,var(--paper-shade) 50%,transparent 50%)}.note.hidden{display:none}.note-title{font:600 calc(var(--fs-body) * .85)/1.3 var(--font-display);color:var(--accent)}.note-name{margin-top:2px;font:700 calc(var(--fs-body) * 1.15)/1.25 var(--font-display)}.note-text{margin-top:6px;font:600 var(--fs-body)/1.4 var(--font-body)}#hud{--points-bottom: calc(18px + var(--fs-heading) * 1.1 + 12px);--streak-bottom: calc(var(--points-bottom) + 8px + var(--fs-body) * 1.1 + 8px)}.banner{position:absolute;top:max(14vh,calc(var(--streak-bottom) + 12px));left:16px;right:16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.banner-word{padding:8px 28px;border-radius:999px;background:var(--paper);color:var(--ink);font:700 var(--fs-display)/1.1 var(--font-display);box-shadow:0 6px 18px #3a2e2640}.banner-line{padding:6px 16px;border-radius:14px;background:var(--paper);color:var(--ink);font:600 var(--fs-body)/1.3 var(--font-body)}.banner-line:empty{display:none}.banner.below .banner-line{position:fixed;left:16px;right:16px;width:fit-content;max-width:min(90vw,640px);margin:0 auto;bottom:calc(12vh + 72px);box-shadow:0 4px 12px #3a2e2633}.banner.win .banner-word{background:var(--gold)}.banner.pop .banner-word{animation:word-pop .45s cubic-bezier(.2,.9,.3,1.4) both}.banner.lose.pop .banner-word{animation:word-wobble .7s ease-out both}.banner.go{animation:fade-away .4s ease-in .8s forwards}.confirm{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;bottom:12vh;pointer-events:auto;cursor:pointer;padding:12px 36px;border:0;border-radius:999px;background:var(--gold);color:var(--ink);font:700 var(--fs-body)/1.1 var(--font-display);box-shadow:0 6px 18px #3a2e2640;animation:word-pop .45s cubic-bezier(.2,.9,.3,1.4);transition:transform .15s ease}.confirm:hover{transform:scale(1.08)}.confirm:active{transform:scale(.96)}.confirm.hidden{display:none}.timer.low{animation:timer-low .5s ease-in-out infinite alternate}.timer.low .timer-fill{background:var(--gold)}@keyframes timer-low{to{transform:translate(-50%) scale(1.06);box-shadow:0 0 0 4px var(--gold)}}.tag{position:absolute;translate:-50% 0;width:max-content;max-width:30vw;box-sizing:border-box;padding:6px 12px;border-radius:12px;background:var(--paper);color:var(--ink);text-align:center;font:600 calc(var(--fs-body) * .7)/1.2 var(--font-body);pointer-events:none;box-shadow:0 3px 10px #3a2e2633;animation:word-pop .45s cubic-bezier(.2,.9,.3,1.4) both}.streak{position:absolute;top:calc(var(--points-bottom) + 8px);left:0;right:0;width:max-content;margin:0 auto;padding:4px 16px;border-radius:999px;background:var(--accent);color:var(--paper);font:700 var(--fs-body)/1.1 var(--font-display);animation:word-pop .45s cubic-bezier(.2,.9,.3,1.4) .3s both}.streak.hidden,.round.hidden{display:none}.round{position:absolute;left:16px;bottom:16px;display:flex;gap:8px;margin:0;padding:8px 12px;list-style:none;border-radius:999px;background:var(--paper);box-shadow:0 3px 10px #3a2e2633}.round li{width:14px;height:14px;border-radius:50%;background:var(--paper-shade)}.round li.won{background:var(--gold);animation:word-pop .4s cubic-bezier(.2,.9,.3,1.5) both}.round li.missed{background:var(--ink);opacity:.35}.round li.next{box-shadow:0 0 0 3px var(--accent)}.confirm:not(.hidden){animation:word-pop .45s cubic-bezier(.2,.9,.3,1.4),nudge 1.4s ease-in-out 3s infinite}@keyframes nudge{0%,to{transform:none}50%{transform:scale(1.08)}}.banner.hidden,.timer.hidden,.hand.hidden,.prompt.hidden,.points.hidden{display:none}@keyframes word-pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes word-wobble{0%,to{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}@keyframes fade-away{to{opacity:0;transform:translateY(-12px)}}.hand{position:absolute;width:64px;height:72px;margin:-5px 0 0 -22px}.hand svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 4px rgb(0 0 0 / .35))}.hand .finger{fill:var(--paper);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}.hand .ripple{fill:none;stroke:var(--paper);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}.hand.hold svg{animation:hand-hold 2s ease-in-out infinite}.hand.hold .ripple{animation:ripple-hold 2s ease-out infinite}.hand.tap svg{animation:hand-tap 1s ease-in-out infinite}.hand.tap .ripple{animation:ripple-tap 1s ease-out infinite}.hand.drag svg{transform:translateY(4px) scale(.94)}@keyframes hand-hold{0%,to{transform:translate(10px,14px)}15%{transform:none}25%,75%{transform:translateY(4px) scale(.94)}88%{transform:none}}@keyframes ripple-hold{0%,22%{opacity:0;transform:scale(.4)}30%{opacity:.9}75%,to{opacity:0;transform:scale(1.8)}}@keyframes hand-tap{0%,to{transform:none}40%{transform:translateY(4px) scale(.94)}}@keyframes ripple-tap{0%,35%{opacity:0;transform:scale(.4)}45%{opacity:.9}90%,to{opacity:0;transform:scale(1.8)}}html.still #hud,html.still #hud *{animation-duration:0s!important;animation-delay:0s!important}#hud #menu .album{position:relative}#hud #menu .album .badge{position:absolute;top:-10px;right:-8px;padding:4px 10px;border-radius:999px;background:var(--gold);color:var(--ink);font:700 var(--fs-caption)/1 var(--font-display)}