:root{--sky: #2f8cff;--navy: #1d2b64;--ball: #d9ff3f;--hot: #ff5a3c;--ok: #3ce3a0;--warn: #ffb020;--pink: #ff4f6d;--teal: #19b5c9;--white: #ffffff;--card: rgba(255, 255, 255, .94);--shadow: 0 10px 30px rgba(15, 30, 80, .28);--top: max(12px, env(safe-area-inset-top));--bottom: max(14px, env(safe-area-inset-bottom))}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--sky);color:var(--navy);font-family:Fredoka,system-ui,sans-serif;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation}#app{position:fixed;top:0;right:0;bottom:0;left:0;height:100dvh}#court{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible{outline:3px solid var(--ball);outline-offset:3px}svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}[hidden]{display:none!important}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:none;pointer-events:none}.screen>*{pointer-events:auto}#app[data-screen=home] #home,#app[data-screen=setup] #setup,#app[data-screen=play] #hud,#app[data-screen=lost] #lost{display:block}#app[data-screen=lost] #hud{display:block;opacity:.35}.icon-btn{position:absolute;top:var(--top);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:var(--card);color:var(--navy);box-shadow:var(--shadow);text-decoration:none;z-index:3}.icon-btn.back,.icon-btn.close,.icon-btn.pause{left:max(12px,env(safe-area-inset-left))}.icon-btn.sound{right:max(12px,env(safe-area-inset-right))}.big-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:min(340px,86vw);height:72px;margin:0 auto;border-radius:999px;background:var(--ball);color:var(--navy);font-size:30px;font-weight:700;letter-spacing:.5px;box-shadow:0 6px #9fbf1f,var(--shadow);animation:breathe 2.2s ease-in-out infinite}.big-btn svg{font-size:34px;stroke-width:2.4}.big-btn:active{transform:translateY(4px);box-shadow:0 2px #9fbf1f,var(--shadow)}.big-btn.small{height:58px;font-size:24px;width:100%;animation:none}.big-btn.small svg{font-size:26px}@keyframes breathe{50%{transform:scale(1.04)}}.ghost-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 0;padding:12px 20px;border-radius:999px;background:#ffffff38;color:var(--white);font-size:17px;font-weight:600;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.ghost-btn svg{font-size:22px}.card .ghost-btn{background:#1d2b6414;color:var(--navy);width:100%}#home{display:none;background:linear-gradient(180deg,#2f8cffd1,#2f8cff59 45%,#1d2b64bf);text-align:center}#app[data-screen=home] #home{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--top) + 56px) 18px calc(var(--bottom) + 10px)}.logo{position:relative;margin-bottom:4vh}.logo h1{margin:0;font-size:clamp(56px,17vw,96px);line-height:.95;color:var(--white);font-weight:700;text-shadow:0 5px 0 var(--navy),0 12px 24px rgba(10,20,60,.4);letter-spacing:-1px}.logo h1 b{color:var(--ball);font-weight:700}.logo small{display:block;margin-top:8px;font-size:20px;font-weight:600;color:var(--white);opacity:.9;letter-spacing:3px;text-transform:uppercase}.logo-ball{position:absolute;right:-18px;top:-26px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f4ffb0,var(--ball) 55%,#a8c72a);box-shadow:0 6px 14px #0a143c59;animation:hop 1.1s cubic-bezier(.3,0,.7,1) infinite alternate}.logo-ball:before,.logo-ball:after{content:"";position:absolute;top:6px;bottom:6px;width:18px;border:2.5px solid rgba(255,255,255,.85);border-radius:50%}.logo-ball:before{left:-9px;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent}.logo-ball:after{right:-9px;border-right-color:transparent;border-top-color:transparent;border-bottom-color:transparent}@keyframes hop{0%{transform:translateY(0)}to{transform:translateY(-22px)}}.how{display:flex;gap:10px;list-style:none;margin:0 0 4.5vh;padding:0;counter-reset:how}.how li{position:relative;width:min(106px,28vw);padding:12px 6px 10px;border-radius:20px;background:var(--card);box-shadow:var(--shadow);font-size:15px;font-weight:600;line-height:1.15;counter-increment:how}.how li:before{content:counter(how);position:absolute;top:-10px;left:-6px;width:26px;height:26px;border-radius:50%;background:var(--pink);color:var(--white);font-size:15px;line-height:26px;font-weight:700}.how-art,.hint-art{display:block;width:64px;height:64px;margin:0 auto 6px;background:center / contain no-repeat}.art-phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M14 58h36' stroke='%231d2b64' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M27 46l-7 12M37 46l7 12' stroke='%231d2b64' stroke-width='4' stroke-linecap='round'/%3E%3Crect x='21' y='5' width='22' height='41' rx='5' fill='%232f8cff' stroke='%231d2b64' stroke-width='3'/%3E%3Crect x='25' y='12' width='14' height='26' rx='2' fill='%23d9ff3f'/%3E%3Ccircle cx='32' cy='8.5' r='1.6' fill='%231d2b64'/%3E%3C/svg%3E")}.art-step{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='3' y='18' width='10' height='18' rx='2.5' fill='%232f8cff' stroke='%231d2b64' stroke-width='2.5'/%3E%3Ccircle cx='38' cy='12' r='6' fill='%231d2b64'/%3E%3Cpath d='M38 19v18M38 37l-7 16M38 37l7 16M38 24l-8 9M38 24l8 9' stroke='%231d2b64' stroke-width='4.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M48 46h12m-5-5 5 5-5 5' stroke='%23ff4f6d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}.art-swing{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 44a26 22 0 0 0 44-4' stroke='%2319b5c9' stroke-width='3' stroke-dasharray='4 5' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='24' cy='12' r='6' fill='%231d2b64'/%3E%3Cpath d='M24 19v18M24 37l-7 16M24 37l7 16M24 25l-9 7M24 25l13-6' stroke='%231d2b64' stroke-width='4.5' stroke-linecap='round' fill='none'/%3E%3Cellipse cx='45' cy='14' rx='6' ry='8.5' transform='rotate(-35 45 14)' fill='%23ffffff' stroke='%23ff7a3c' stroke-width='3.5'/%3E%3Ccircle cx='55' cy='33' r='5' fill='%23d9ff3f' stroke='%231d2b64' stroke-width='2'/%3E%3C/svg%3E");animation:wiggle 1.2s ease-in-out infinite}.art-move{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='12' r='6' fill='%231d2b64'/%3E%3Cpath d='M32 19v18M32 37l-7 16M32 37l7 16M32 24l-8 9M32 24l8 9' stroke='%231d2b64' stroke-width='4.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M4 44h12m-7-6-5 6 5 6M60 44H48m7-6 5 6-5 6' stroke='%23ff4f6d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");animation:sway 1.4s ease-in-out infinite}.art-cam-off{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 22a5 5 0 0 1 5-5h6l4-5h18l4 5h6a5 5 0 0 1 5 5v26a5 5 0 0 1-5 5H13a5 5 0 0 1-5-5z' fill='%232f8cff' stroke='%231d2b64' stroke-width='3'/%3E%3Ccircle cx='32' cy='34' r='9' fill='%23ffffff' stroke='%231d2b64' stroke-width='3'/%3E%3Cpath d='M10 8l44 50' stroke='%23ff5a3c' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E")}.art-bulb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 6a17 17 0 0 0-10 30.8c1.8 1.4 3 3.4 3 5.7h14c0-2.3 1.2-4.3 3-5.7A17 17 0 0 0 32 6z' fill='%23ffd23f' stroke='%231d2b64' stroke-width='3'/%3E%3Cpath d='M25 49h14M27 56h10' stroke='%231d2b64' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");animation:blink 1s steps(2) infinite}.art-closer{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='3' y='18' width='10' height='18' rx='2.5' fill='%232f8cff' stroke='%231d2b64' stroke-width='2.5'/%3E%3Ccircle cx='44' cy='12' r='6' fill='%231d2b64'/%3E%3Cpath d='M44 19v18M44 37l-7 16M44 37l7 16M44 24l-8 9M44 24l8 9' stroke='%231d2b64' stroke-width='4.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M30 46H18m5-5-5 5 5 5' stroke='%23ff4f6d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}.art-hold{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='12' r='6' fill='%231d2b64'/%3E%3Cpath d='M32 19v18M32 37l-6 16M32 37l6 16M32 24l-9 11M32 24l9 11' stroke='%231d2b64' stroke-width='4.5' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='32' cy='32' r='29' stroke='%233ce3a0' stroke-width='3.5' stroke-dasharray='6 6' fill='none'/%3E%3C/svg%3E")}.art-left,.art-right{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M40 10 18 32l22 22' stroke='%23ff4f6d' stroke-width='9' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");animation:nudge-left .9s ease-in-out infinite}.art-right{transform:scaleX(-1);animation-name:nudge-right}.art-load{border-radius:50%;border:7px solid rgba(29,43,100,.15);border-top-color:var(--pink);animation:spin .8s linear infinite;width:52px;height:52px}@keyframes wiggle{50%{transform:rotate(-12deg)}}@keyframes sway{0%,to{transform:translate(-5px)}50%{transform:translate(5px)}}@keyframes blink{50%{opacity:.45}}@keyframes nudge-left{50%{transform:translate(-8px)}}@keyframes nudge-right{0%,to{transform:scaleX(-1)}50%{transform:scaleX(-1) translate(-8px)}}@keyframes spin{to{transform:rotate(360deg)}}.privacy,.best{display:flex;align-items:center;justify-content:center;gap:6px;margin:18px 0 0;color:var(--white);font-size:14px;opacity:.85}.best{margin-top:8px;font-weight:600;opacity:1}.best:empty{display:none}#cam{position:absolute;display:none;overflow:hidden;background:#0d1838}#app[data-cam=full] #cam{display:block;top:0;right:0;bottom:0;left:0}#app[data-cam=pip] #cam{display:block;top:var(--top);right:max(12px,env(safe-area-inset-right));width:min(26vw,132px);aspect-ratio:var(--cam-aspect, .75);max-height:24vh;border-radius:16px;border:3px solid var(--ok);box-shadow:var(--shadow);transition:border-color .2s;z-index:2}#app[data-cam=pip][data-track=warn] #cam{border-color:var(--warn)}#app[data-cam=pip][data-track=lost] #cam{border-color:var(--hot)}#video,#overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}#video{-o-object-fit:cover;object-fit:cover;transform:scaleX(-1)}#cam-dot{display:none}.hint{position:absolute;left:50%;bottom:calc(var(--bottom) + 26px);transform:translate(-50%);display:flex;align-items:center;gap:12px;min-width:min(300px,86vw);max-width:92vw;padding:12px 24px 12px 14px;border-radius:999px;background:var(--card);box-shadow:var(--shadow);font-size:clamp(22px,6.5vw,30px);white-space:nowrap;pointer-events:none}.hint .hint-art{width:56px;height:56px;margin:0}.hint.good{background:var(--ok)}.hint.warn{background:#fff4d6}.hint.pop{animation:hint-pop .35s ease-out}@keyframes hint-pop{0%{transform:translate(-50%) scale(.85)}}.steps{position:absolute;top:calc(var(--top) + 14px);left:50%;transform:translate(-50%);display:flex;gap:10px;list-style:none;margin:0;padding:0}.steps li{width:34px;height:8px;border-radius:4px;background:#ffffff73}.steps li.done{background:var(--ok)}.steps li.now{background:var(--white)}#hold-ring{position:absolute;left:50%;top:44%;width:min(56vw,34vh,260px);height:min(56vw,34vh,260px);transform:translate(-50%,-50%) rotate(-90deg);display:none;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}#hold-ring.show{display:block}#hold-ring circle{fill:none;stroke-width:9}#hold-ring .track{stroke:#ffffff59}#hold-ring .fill{stroke:var(--ok);stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:276.5;transition:stroke-dashoffset .1s linear}.card{position:relative;width:min(380px,90vw);max-height:92dvh;overflow:auto;padding:26px 22px 20px;border-radius:28px;background:var(--card);box-shadow:var(--shadow);text-align:center}.card h2{margin:0 0 16px;font-size:34px}#setup-error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#setup-error b{display:block;margin:4px 0 18px;font-size:20px;line-height:1.25;white-space:normal}#score{position:absolute;top:var(--top);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--card);box-shadow:var(--shadow);font-size:36px;font-weight:700;pointer-events:none}#score .side{display:flex;align-items:center;gap:8px}#score i{display:block;width:26px;height:26px;border-radius:50%;border:3px solid var(--white);box-shadow:0 0 0 2px var(--navy)}#score .you i{background:var(--teal)}#score .cpu i{background:var(--pink)}#score b{min-width:24px;text-align:center}#score b.bump{animation:bump .5s ease-out}#score .dash{opacity:.4}@keyframes bump{30%{transform:scale(1.6);color:var(--pink)}}#practice{position:absolute;top:calc(var(--top) + 64px);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:6px 8px 6px 16px;border-radius:999px;background:var(--navy);color:var(--white);font-size:18px;box-shadow:var(--shadow);white-space:nowrap}#practice-dots{display:flex;gap:6px}#practice-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ball)}#practice-dots i.on{background:var(--ball)}#skip-practice{padding:6px 12px;border-radius:999px;background:#ffffff29;font-size:15px;font-weight:600}#rally-count{position:absolute;top:calc(var(--top) + 66px);left:max(14px,env(safe-area-inset-left));display:flex;align-items:center;gap:4px;padding:4px 12px 4px 8px;border-radius:999px;background:var(--hot);color:var(--white);font-size:24px;font-weight:700;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s;pointer-events:none}#rally-count.show{opacity:1;transform:none}#stamp,#sub-stamp{position:absolute;left:0;right:0;text-align:center;font-weight:700;pointer-events:none;opacity:0;color:var(--white);-webkit-text-stroke:2px var(--navy);paint-order:stroke fill;text-shadow:0 5px 0 var(--navy),0 10px 20px rgba(10,20,60,.45)}#stamp{top:26%;font-size:clamp(48px,15vw,92px)}#sub-stamp{top:calc(26% + clamp(56px,16vw,100px));font-size:clamp(22px,6vw,32px)}#stamp.on{animation:stamp 1.1s ease-out}#sub-stamp.on{animation:stamp 1.3s ease-out}@keyframes stamp{0%{opacity:0;transform:scale(1.8) rotate(-6deg)}15%{opacity:1;transform:scale(1) rotate(-3deg)}75%{opacity:1;transform:scale(1) rotate(-3deg)}to{opacity:0;transform:translateY(-14px) rotate(-3deg)}}.hint.bottom{bottom:calc(var(--bottom) + 18px)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:16px;background:#14235a73;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:5}.row{display:flex;gap:10px;margin-top:12px}.tile{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:18px;background:#1d2b6414;font-size:15px;font-weight:600}.tile svg{font-size:28px}.result-art{display:block;width:96px;height:96px;margin:-6px auto 6px;border-radius:50%;background:center / 64% no-repeat var(--ball);box-shadow:0 6px #9fbf1f}.result-art.win{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2b64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0zM8 6H4a3 3 0 0 0 4 4m8-4h4a3 3 0 0 1-4 4M12 13v4m-4 4h8m-6-4h4'/%3E%3C/svg%3E");animation:hop .6s ease-in-out infinite alternate}.result-art.lose{background-color:#cfe0ff;box-shadow:0 6px #8fa8d8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2b64' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.2 6.2a10 10 0 0 1 0 11.6M18.8 6.2a10 10 0 0 0 0 11.6'/%3E%3C/svg%3E")}.result-score{font-size:46px;font-weight:700;margin:-6px 0 12px}.result-score i{display:inline-block;width:22px;height:22px;border-radius:50%;vertical-align:middle;margin:0 8px;border:3px solid var(--white);box-shadow:0 0 0 2px var(--navy)}.chips{display:flex;gap:8px;margin-bottom:18px}.chip{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-radius:18px;background:#1d2b6412}.chip svg{font-size:24px;color:var(--pink)}.chip b{font-size:28px;line-height:1.1}.chip small{font-size:13px;opacity:.7}@media(max-aspect-ratio:1/1){#app[data-cam=pip] #cam{top:calc(var(--top) + 112px);width:min(24vw,110px)}}@media(min-aspect-ratio:1/1){#app[data-cam=pip] #cam{width:min(18vw,200px);max-height:30vh}#stamp{top:22%}#sub-stamp{top:calc(22% + clamp(56px,10vw,100px))}}@media(max-height:520px){#app[data-screen=home] #home{padding-top:calc(var(--top) + 8px)}.logo{margin-bottom:2vh}.logo h1{font-size:54px}.logo small{font-size:15px;margin-top:2px}.how{margin-bottom:3vh}.how li{padding:8px 4px 6px;font-size:13px}.how-art{width:44px;height:44px}.big-btn{height:58px;font-size:26px}.privacy{margin-top:8px}.hint{font-size:22px;padding:8px 18px 8px 10px}.hint .hint-art{width:42px;height:42px}}