:root{font-family:Inter,Arial Narrow,Arial,ui-sans-serif,system-ui,sans-serif;color:var(--color-primary);background:#050505;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}.app{position:relative;width:100%;height:100%;min-width:320px;overflow:hidden;background:#050505;color:var(--color-primary);touch-action:none;-webkit-user-select:none;user-select:none}.stage{position:relative;isolation:isolate;width:100%;height:100%;min-height:100dvh;overflow:hidden;background:#050505}.attract-video{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(1.04) contrast(1.04) brightness(.96);pointer-events:none;transition:opacity .42s ease}.attract-video-visible{opacity:1}.instrument-shell{position:absolute;top:50%;left:50%;width:min(100vw,56.25vh);aspect-ratio:9 / 16;overflow:hidden;transform:translate3d(-50%,-50%,0);background:#050505}.instrument-environment{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;height:100%;object-fit:cover;pointer-events:none}.game-visual{position:absolute;top:0;left:50%;width:94%;aspect-ratio:9 / 16;transform:translate(-50%)}.graduation-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none}.graduation-tick{position:absolute;height:1px;background:linear-gradient(90deg,#828c9233,#e1e8ecad);box-shadow:0 0 5px #d5e0e61f}.graduation-right{background:linear-gradient(90deg,#e1e8ecad,#828c9233)}.graduation-major{height:2px;background:linear-gradient(90deg,#959ea44d,#edf1f3);box-shadow:0 0 8px #dee7ec38}.graduation-right.graduation-major{background:linear-gradient(90deg,#edf1f3,#959ea44d)}.glass-field{position:absolute;top:14.6%;right:27.8%;bottom:8.4%;left:27.8%;z-index:2}.liquid-window{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;clip-path:polygon(2% 0,98% 0,99% 10%,98% 20%,96% 30%,94% 40%,92% 50%,89% 60%,86% 70%,83% 80%,80% 90%,84% 100%,16% 100%,20% 90%,17% 80%,14% 70%,11% 60%,8% 50%,6% 40%,4% 30%,2% 20%,1% 10%)}.liquid-volume{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url(/assets/premium-beer-only.webp);background-position:center top;border-radius:50% 50% 0 0/1.2% 1.2% 0 0;background-repeat:no-repeat;background-size:cover;transform:translate3d(0,var(--fill-offset),0);transition:transform .13s linear;will-change:transform;backface-visibility:hidden;contain:layout paint style}.foam-surface{position:absolute;top:0;right:0;left:0;height:6.5%;border-radius:50% 50% 14% 14%/18% 18% 8% 8%;background-image:url(/assets/premium-beer-texture.webp);background-position:center top;background-repeat:no-repeat;background-size:100% auto;box-shadow:0 8px 18px #f0cb8b38}.phase-pouring .liquid-volume{transition:none;animation:liquidShimmer 1.8s ease-in-out infinite alternate}.precision-target{position:absolute;right:-45%;bottom:var(--target-level);left:-45%;z-index:5;height:1px;transform:translateY(50%);pointer-events:none}.target-rule{position:absolute;top:0;right:0;left:0;height:1px;background:linear-gradient(90deg,transparent,#dce2e5 14%,#879096 86%,transparent);box-shadow:0 0 8px #d8e1e647}.precision-target strong{position:absolute;top:50%;right:2%;border:1px solid rgba(226,233,237,.38);border-radius:999px;background:#08090af0;color:#e7ecef;padding:6px 10px 5px;font-family:Arial Narrow,Impact,sans-serif;font-size:clamp(12px,1.8vh,20px);font-weight:800;letter-spacing:.12em;line-height:1;text-transform:uppercase;text-shadow:none;transform:translateY(-50%);box-shadow:0 4px 14px #0000006b}.target-reticle{position:absolute;top:50%;left:50%;width:clamp(28px,4vh,44px);aspect-ratio:1;border:1px solid rgba(228,234,238,.74);border-radius:50%;background:linear-gradient(#cfd7dc,#cfd7dc) center / 1px 140% no-repeat,linear-gradient(90deg,#cfd7dc,#cfd7dc) center / 140% 1px no-repeat;transform:translate(-50%,-50%);box-shadow:0 0 12px #dce5ea2e}.phase-pouring .precision-target{animation:targetPulse .72s ease-in-out infinite alternate}.custom-glass-logo{position:absolute;top:37%;left:50%;z-index:4;width:34%;aspect-ratio:330 / 239;transform:translate(-50%);filter:drop-shadow(0 8px 14px rgba(0,0,0,.68))}.custom-glass-logo img{width:100%;height:100%;object-fit:contain;filter:saturate(.94) contrast(1.06)}.result-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding:7%;background:#030405b3;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:resultIn .32s .18s cubic-bezier(.16,1,.3,1) both}.result-shell{position:relative;display:grid;width:min(100%,520px);min-width:0;justify-items:center;gap:clamp(12px,1.9vh,24px);overflow:hidden;padding:clamp(28px,4.5vh,54px) clamp(22px,4vw,46px) clamp(24px,4vh,46px);border:1px solid rgba(226,233,237,.48);border-radius:clamp(24px,4vh,38px);background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 12%),linear-gradient(145deg,#1d2124f7,#070809fa 62%);box-shadow:inset 0 1px #ffffff61,inset 0 -1px #ffffff14,0 24px 80px #000000b8,0 0 34px #d6e1e71f;text-align:center}.result-shell:before{position:absolute;top:0;left:18%;width:64%;height:2px;background:linear-gradient(90deg,transparent,#f3f6f7,transparent);content:"";opacity:.78}.result-kicker{max-width:100%;color:#f3f6f7;font-family:Arial Narrow,Impact,sans-serif;font-size:clamp(30px,4.8vh,58px);font-weight:900;letter-spacing:.025em;line-height:1;text-transform:uppercase;overflow-wrap:anywhere}.result-score{display:grid;width:clamp(150px,21.5vh,220px);aspect-ratio:1;grid-template-rows:auto 1fr;place-items:center;align-content:center;border:2px solid rgba(225,233,237,.72);border-radius:50%;background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.12),transparent 48%),#00000047;padding:18% 12% 13%;box-shadow:inset 0 0 0 5px #ffffff09,0 0 32px #d5e1e824}.result-score span{color:#e4ebef94;font-size:clamp(9px,1.2vh,13px);font-weight:800;letter-spacing:.18em}.result-score strong{width:100%;color:#f1f4f6;font-size:clamp(52px,7.4vh,88px);font-weight:900;letter-spacing:-.07em;line-height:.9;text-align:center;font-variant-numeric:tabular-nums}.result-score[data-score-digits="3"] strong{font-size:clamp(50px,6.6vh,76px);letter-spacing:-.095em}.result-difference{display:grid;min-width:58%;gap:5px;border:1px solid rgba(226,233,237,.16);border-radius:999px;background:#ffffff0b;padding:10px 20px}.result-difference span{color:#e7edf085;font-size:clamp(10px,1.2vh,14px);font-weight:800;letter-spacing:.16em}.result-difference strong{color:#f3f6f7;font-size:clamp(22px,3.2vh,38px);font-weight:900}.prize-banner{min-height:44px;border:1px solid rgba(255,99,91,.72);border-radius:999px;background:linear-gradient(180deg,#e33232,#8e1014);color:#fff;padding:11px 24px;font-size:clamp(14px,2vh,22px);font-weight:900;letter-spacing:.05em}.result-perfect .result-shell{border-color:#eff4f6c2;animation:perfectGlow .9s .5s ease-out both}.result-restart{width:100%;min-height:clamp(52px,6vh,68px);border:1px solid rgba(241,245,247,.78);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.34),transparent 24%),linear-gradient(180deg,#626a70,#202529 48%,#090b0d 52%,#343b40);color:#f4f6f7;font-family:Arial Narrow,Impact,sans-serif;font-size:clamp(18px,2.8vh,30px);font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.9);box-shadow:inset 0 1px #ffffffb8,0 5px #111416,0 12px 26px #00000075;transition:transform 90ms ease,box-shadow 90ms ease}.result-restart:active{transform:translateY(4px);box-shadow:inset 0 3px 10px #00000070,0 1px #111416,0 6px 14px #0006}.operator-button{position:absolute;top:18px;right:18px;z-index:30;display:grid;width:56px;height:56px;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:#00000057;color:#ffffff7a;font-size:18px}.operator-button:focus-visible,.small-button:focus-visible,.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}.debug-panel{position:absolute;bottom:14px;left:14px;z-index:35;display:grid;width:240px;gap:4px;padding:14px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#000000d1;color:#baf7c9;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}.settings-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:24px;background:#000000c7}.settings-panel{display:grid;width:min(1120px,96vw);max-height:min(920px,92vh);grid-template-rows:auto 1fr auto;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#12100d;box-shadow:0 28px 120px #0000008a}.settings-header,.settings-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.1)}.settings-actions{border-top:1px solid rgba(255,255,255,.1);border-bottom:0}.settings-header h2,.settings-body h3{margin:0;color:#fff;font-weight:900;text-transform:uppercase}.settings-header h2{font-size:24px}.settings-header p{margin:5px 0 0;color:#ffffff9e;font-size:14px}.settings-body{display:grid;gap:24px;overflow:auto;padding:24px}.settings-body section{display:grid;gap:14px}.settings-body h3{font-size:16px}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:7px}.field span{color:#ffffffb8;font-size:12px;font-weight:800;text-transform:uppercase}.field input,.field select{width:100%;min-height:48px;border:1px solid rgba(255,255,255,.14);border-radius:8px;outline:none;background:#ffffff12;color:#fff;padding:0 12px}.field select option{color:#111}.color-field input{padding:4px}.checkbox-field{display:flex;min-height:48px;align-items:center;gap:10px}.checkbox-field input{width:24px;min-height:24px}.small-button{min-height:48px;border:0;border-radius:999px;background:var(--color-accent);color:#130d05;padding:0 20px;font-size:13px;font-weight:900;text-transform:uppercase}.small-button.ghost{border:1px solid rgba(255,255,255,.14);background:transparent;color:#fff}@keyframes liquidShimmer{0%{filter:saturate(.94) brightness(.96)}to{filter:saturate(1.08) brightness(1.04)}}@keyframes targetPulse{0%{opacity:.78}to{opacity:1}}@keyframes resultIn{0%{opacity:0;transform:scale(.96) translateY(12px)}to{opacity:1;transform:scale(1)}}@keyframes perfectGlow{0%{box-shadow:0 24px 80px #000000b8,0 0 #dee8ed00}55%{box-shadow:0 24px 80px #000000b8,0 0 74px #dee8ed4d}to{box-shadow:0 24px 80px #000000b8,0 0 32px #dee8ed24}}@keyframes serveReleaseShake{0%,to{transform:translate3d(-50%,0,0) rotate(0)}16%{transform:translate3d(calc(-50% - 7px),2px,0) rotate(-.35deg)}32%{transform:translate3d(calc(-50% + 6px),-3px,0) rotate(.3deg)}48%{transform:translate3d(calc(-50% - 4px),2px,0) rotate(-.2deg)}64%{transform:translate3d(calc(-50% + 3px),-1px,0) rotate(.14deg)}82%{transform:translate3d(calc(-50% - 1px),1px,0) rotate(-.06deg)}}.phase-result .game-visual{animation:serveReleaseShake .42s cubic-bezier(.22,.8,.32,1) both}@media(max-width:720px),(max-height:860px){.precision-target{right:-42%;left:-42%}.precision-target strong{right:0;padding:5px 8px 4px;font-size:clamp(11px,1.8vh,16px)}.target-reticle{width:clamp(26px,4vh,38px)}.result-shell{gap:12px;padding:24px 18px 22px}.result-score{width:clamp(142px,20vh,184px)}.field-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.phase-result .game-visual{animation:none}}