.game-screen,.game-screen *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-ms-touch-action:manipulation}.game-screen{background:linear-gradient(#0a06044d 0%,#0a060426 40% 60%,#0a06044d 100%),url(/assets/bg_wood_00000-60yXn3Ib.webp) 50%/cover;background-color:var(--wood-base);z-index:10;transition:opacity var(--duration-normal);padding:env(safe-area-inset-top,20px) var(--space-lg) env(safe-area-inset-bottom,20px);flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.phase-result{display:none}.game-screen.result .phase-result{opacity:0;animation:.8s ease-out .6s forwards fade-up;display:flex}.game-screen.result .phase-game{display:none}.game-screen.result .result-top{opacity:0;animation:.8s ease-out .4s forwards fade-up;display:block}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.end-glow{pointer-events:none;z-index:50;opacity:0;background:radial-gradient(circle,#58e6da40 0%,#2dd4a814 40%,#0000 70%);transition:opacity 1.2s ease-out;position:fixed;inset:0}.end-glow.active{opacity:1}.end-glow.fade-out{opacity:0;transition:opacity 2s ease-out}.bg-plants{z-index:18;pointer-events:none;opacity:0;background:url(/assets/bg_plants_00000-BgCrKaTl.webp) 50%/cover no-repeat;animation:1s ease-out .3s forwards bg-fade-in;position:fixed;inset:0}.bg-petals{z-index:19;pointer-events:none;opacity:0;background:url(/assets/bg_pedal_00000-CX6Ll3rU.webp) 50%/cover no-repeat;animation:1s ease-out .6s forwards bg-fade-in;position:fixed;inset:0}@keyframes bg-fade-in{to{opacity:1}}.bg-cup{z-index:2;pointer-events:none;filter:drop-shadow(0 4px 20px #0000004d);object-fit:cover;object-position:center center;border-radius:50%;width:460px;height:460px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.user-panel{z-index:300;-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;background:#0000004d;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:fixed;inset:0}.user-panel.open{opacity:1;pointer-events:auto}.user-panel-content{align-items:center;gap:var(--space-lg);flex-direction:column;width:280px;display:flex}.user-panel-title{font-family:var(--font-mono);letter-spacing:.3em;color:#fff6;font-size:.5rem;font-weight:400}.user-panel-field{flex-direction:column;gap:4px;width:100%;display:flex}.user-panel-label{font-family:var(--font-mono);letter-spacing:.25em;color:#ffffff4d;font-size:.4rem;font-weight:400}.user-panel-input{width:100%;font-family:var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:#fff;border-radius:var(--radius-sm);transition:border-color var(--duration-fast), box-shadow var(--duration-fast);background:#ffffff0f;border:1px solid #ffffff26;outline:none;padding:10px 14px;font-size:.75rem;font-weight:300}.user-panel-input:focus{border-color:#fff6;box-shadow:0 0 12px #ffffff14}.user-panel-input::placeholder{color:#fff3;text-transform:uppercase}.corner-btn{z-index:200;border-radius:var(--radius-sm);color:#ffffffb3;font-family:var(--font-mono);letter-spacing:.1em;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-backdrop-filter:blur(6px);transition:all var(--duration-fast);background:#ffffff14;border:1px solid #fff3;justify-content:center;align-items:center;padding:8px 10px;font-size:.5rem;font-weight:400;display:flex;position:fixed}.corner-btn:active{color:#fff;background:#ffffff2e;border-color:#ffffff80}.corner-btn--tl{top:var(--space-md);left:var(--space-md)}.corner-btn--br{bottom:var(--space-md);right:var(--space-md)}.top-slot{z-index:20;width:100%;padding-bottom:var(--space-lg);flex:1;justify-content:center;align-items:flex-end;display:flex}.bottom-slot{z-index:20;width:100%;padding-top:var(--space-lg);flex-direction:column;flex:1;justify-content:flex-start;align-items:center;display:flex}.bagua-glow{pointer-events:none;z-index:0;background:radial-gradient(circle,#58e6da1f 0%,#58e6da0f 30%,#2dd4a805 60%,#0000 80%);border-radius:50%;width:500px;height:500px;animation:3s ease-in-out infinite glow-pulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes glow-pulse{0%,to{opacity:.5;transform:translate(-50%,-50%)scale(1)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.08)}}.cup-container:has(.bagua.pouring) .bagua-glow{background:radial-gradient(circle,#58e6da33 0%,#58e6da1a 30%,#2dd4a80a 60%,#0000 80%);animation:1.5s ease-in-out infinite glow-pulse}.bagua{pointer-events:none;z-index:0;filter:drop-shadow(0 0 12px #58e6da4d);width:480px;height:480px;transition:filter .5s;animation:30s linear infinite bagua-spin,3s ease-in-out infinite bagua-glow;position:absolute;top:50%;left:50%}.bagua.pouring{filter:drop-shadow(0 0 24px #58e6da80);animation:8s linear infinite bagua-spin,1.5s ease-in-out infinite bagua-glow}@keyframes bagua-spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}@keyframes bagua-glow{0%,to{opacity:.25}50%{opacity:.65}}.cup-container{z-index:15;justify-content:center;align-items:center;width:260px;height:260px;display:flex;position:relative;overflow:visible}.cup-svg{filter:drop-shadow(0 4px 24px #00000040);z-index:1;width:100%;height:100%;position:relative}.pour-stream{opacity:0;z-index:3;filter:blur(.5px);width:45px;height:130px;transition:opacity .2s;position:absolute;bottom:-65px;left:50%;overflow:visible;transform:translate(-50%)}.pour-stream.active{opacity:1;animation:.6s ease-in-out infinite milk-wobble}.milk-flow{animation:1.2s ease-in-out infinite alternate milk-morph}.milk-drip{animation:.8s ease-in-out infinite drip-pulse}@keyframes milk-wobble{0%,to{transform:translate(-50%)rotate(0)}25%{transform:translate(-50%)rotate(1.5deg)}75%{transform:translate(-50%)rotate(-1.5deg)}}@keyframes milk-morph{0%{d:path("M15,0 C13,15 10,25 8,40 C6,55 12,65 15,75 C18,65 24,55 22,40 C20,25 17,15 15,0Z")}to{d:path("M15,0 C12,18 8,28 7,42 C5,58 13,68 15,78 C17,68 25,58 23,42 C22,28 18,18 15,0Z")}}@keyframes drip-pulse{0%,to{rx:8;ry:5;opacity:.5}50%{rx:10;ry:6;opacity:.35}}.steam-container{pointer-events:none;z-index:2;position:absolute;top:10%;left:50%;transform:translate(-50%)}.steam{opacity:0;background:linear-gradient(#0000,#e8c9a01a);border-radius:2px;width:2px;height:16px;animation:2.5s ease-out infinite steam-rise;position:absolute}.steam:first-child{animation-delay:0s;left:-10px}.steam:nth-child(2){animation-delay:.8s;left:2px}.steam:nth-child(3){animation-delay:1.6s;left:14px}@keyframes steam-rise{0%{opacity:0;transform:translateY(0)scaleX(1)}20%{opacity:.3}80%{opacity:.1}to{opacity:0;transform:translateY(-40px)scaleX(2)}}.steam-container.active .steam{opacity:1}.timer{font-family:var(--font-mono);color:#fff;letter-spacing:.05em;text-shadow:0 0 16px #e8c9a099,0 2px 12px #000000b3;font-size:3rem;font-weight:300;transition:color .3s,transform .15s}.timer.warm{color:#e8a0b0}.timer.hot{color:#7fffda}.timer.target{color:#7fffda;transform:scale(1.1)}.timer.perfect-zone{color:gold;text-shadow:0 0 24px #ffd70099,0 0 48px #ffd7004d;transform:scale(1.15)}.timer.danger{color:#e06060}.game-screen.perfect-zone:after{content:"";pointer-events:none;z-index:999;border:3px solid #ffd70066;border-radius:0;animation:.8s ease-in-out infinite zone-pulse;position:fixed;inset:0}@keyframes zone-pulse{0%,to{border-color:#ffd70026}50%{border-color:#ffd70080}}@keyframes screen-shake{0%,to{transform:translate(0)}25%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,-3px)}}.game-screen.overpour{animation:.15s ease-in-out infinite screen-shake}@keyframes cup-shake-var{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(calc(-2px * var(--shake-intensity,0)), calc(1px * var(--shake-intensity,0))) rotate(calc(-.5deg * var(--shake-intensity,0)))}50%{transform:translate(calc(2px * var(--shake-intensity,0)), calc(-1px * var(--shake-intensity,0))) rotate(calc(.5deg * var(--shake-intensity,0)))}75%{transform:translate(calc(-1px * var(--shake-intensity,0)), calc(-2px * var(--shake-intensity,0))) rotate(calc(-.3deg * var(--shake-intensity,0)))}}.heartbeat-ring{pointer-events:none;border:1px solid #0000;border-radius:50%;width:270px;height:270px;transition:border-color .3s;position:absolute}.heartbeat-ring.active{border-color:#dba88240;animation:.8s ease-in-out infinite heartbeat}.heartbeat-ring.fast{border-color:#dba88266;animation-duration:.4s}@keyframes heartbeat{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.03)}}.overflow-ring{pointer-events:none;border:2px solid #0000;border-radius:50%;width:250px;height:250px;position:absolute}.overflow-ring.active{border-color:#b5635a66;animation:.5s ease-in-out infinite overflow-pulse}@keyframes overflow-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.cup-container.shake{animation:.1s linear infinite cup-shake}@keyframes cup-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.pour-touch-target{cursor:grab;-webkit-tap-highlight-color:transparent;touch-action:none;z-index:100;pointer-events:auto;background:0 0;border:none;border-radius:50%;width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pour-touch-target:active{cursor:grabbing}@keyframes cup-pulse{0%,to{box-shadow:0 0 #e8c9a000}50%{box-shadow:0 0 30px 8px #e8c9a026}}.cup-container:not(.pouring) .pour-touch-target{border-radius:50%;animation:3s ease-in-out infinite cup-pulse}.pour-hint{text-align:center;margin-top:var(--space-lg);animation:3s ease-in-out infinite fade-pulse}.pour-hint-label{letter-spacing:.15em;color:#e8c9a099;text-shadow:0 0 10px #e8c9a033;font-size:.85rem;font-weight:300}@keyframes fade-pulse{0%,to{opacity:.4}50%{opacity:1}}.game-screen.pouring .pour-hint{opacity:0;transition:opacity .3s}.user-pour-label{letter-spacing:.2em;color:#ffffffd9;text-shadow:0 0 10px #e8c9a04d,0 1px 6px #00000080;margin-bottom:var(--space-sm);font-size:1rem;font-weight:400}.top-game{flex-direction:column;align-items:center;display:flex}.result-btn{padding:12px var(--space-md);border-radius:var(--radius-sm);color:#ffffffd9;font-family:var(--font-body);letter-spacing:.05em;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-backdrop-filter:blur(6px);transition:all var(--duration-fast);background:#ffffff14;border:1px solid #ffffff40;flex:1;justify-content:center;align-items:center;gap:6px;font-size:.6rem;font-weight:300;display:inline-flex}.result-btn:active{background:#ffffff2e;border-color:#ffffff80;transform:scale(.97)}.result-btn svg{opacity:.7}.result-btn--replay{color:#ffffffd9;border-color:#ffffff40}.result-btn--replay:active{background:#ffffff2e;border-color:#ffffff80}.result-btn--save{color:var(--peach);background:#dba88214;border-color:#dba88259}.result-btn--save:active{background:#dba8822e;border-color:#dba88299}.result-btn--save svg{opacity:.8}.result-bottom{align-items:center;gap:var(--space-md);width:100%;max-width:340px;padding:0 var(--space-lg);flex-direction:column}.result-top{text-align:center}.result-time{font-family:var(--font-mono);color:#fff;letter-spacing:.05em;text-shadow:0 0 20px #2dd4a880,0 0 40px #2dd4a833,0 2px 8px #00000080;font-size:3rem;font-weight:300;line-height:1}.result-grade{font-family:var(--font-display);letter-spacing:.05em;margin-top:var(--space-sm);text-shadow:0 0 12px,0 2px 8px #00000080;font-size:1rem;font-weight:400}.result-message{letter-spacing:.02em;color:#ffffff80;margin-top:4px;font-size:.75rem;font-weight:300}.result-grade.master{color:#ffd4a8}.result-grade.precision{color:#7fffda}.result-grade.beautiful{color:#b8d8cc}.result-grade.notbad{color:#fff9}.result-grade.tryagain{color:#e88a80}.result-actions{gap:var(--space-md);width:100%;max-width:300px;display:flex}.screen-flash{pointer-events:none;z-index:200;opacity:0;position:fixed;inset:0}.screen-flash.white{background:#fff;animation:.4s ease-out flash}.screen-flash.gold{background:var(--peach);animation:.4s ease-out flash}@keyframes flash{0%{opacity:.4}to{opacity:0}}.bg-glow{pointer-events:none;z-index:0;opacity:0;background:radial-gradient(circle at 50% 45%,#2dd4a80f 0%,#0000 60%);transition:opacity .5s;position:fixed;inset:0}.bg-glow.active{opacity:1}.bg-glow.intense{opacity:1;background:radial-gradient(circle at 50% 45%,#2dd4a826 0%,#0000 60%)}.swipe-hint{letter-spacing:.2em;color:#ffffff80;margin-bottom:var(--space-sm);text-shadow:0 0 8px #e8c9a04d,0 1px 6px #00000080;font-size:.7rem;font-weight:300;animation:2s ease-in-out infinite hint-pulse}@keyframes hint-pulse{0%,to{opacity:.3}50%{opacity:.7}}.lb-panel{z-index:500;-webkit-backdrop-filter:blur(24px);width:100%;max-width:400px;transition:transform .35s var(--ease-out-expo);pointer-events:none;background:#0c0806eb;border-left:1px solid #2dd4a826;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%)}.lb-panel.open{pointer-events:auto;transform:translate(0)}.lb-panel-header{align-items:center;gap:var(--space-md);padding:var(--space-lg) var(--space-lg);padding-top:calc(env(safe-area-inset-top,0px) + var(--space-lg));border-bottom:1px solid var(--border-subtle);flex-shrink:0;display:flex}.lb-panel-close{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all var(--duration-fast);background:0 0;justify-content:center;align-items:center;font-size:.9rem;display:flex}.lb-panel-close:active{border-color:var(--border-accent);color:var(--neon)}.lb-panel-title{font-family:var(--font-mono);letter-spacing:.3em;color:var(--text-secondary);font-size:.5rem;font-weight:400}.lb-panel-scroll{padding:var(--space-lg);-webkit-overflow-scrolling:touch;flex:1;overflow:hidden auto}.lb-panel:before{content:"";background:linear-gradient(#0000,#2dd4a833 30%,#2dd4a859 50%,#2dd4a833 70%,#0000);width:1px;position:absolute;top:15%;bottom:15%;left:0}