:root{--white: #FFFFFF;--blue-100: #C2FCFF;--blue-200: #78F2FF;--blue-300: #43E4FF;--blue-400: #1CCDF7;--blue-500: #00AEEF;--blue-600: #009EED;--blue-700: #008BEA;--blue-800: #0566C6;--blue-900: #005499;--gray-100: #eff0f2;--gray-200: #d0d2d9;--gray-300: #b1b4c0;--gray-400: #9196a6;--gray-500: #72788d;--gray-600: #595d6e;--gray-700: #3f434e;--gray-800: #26282f;--gray-900: #0d0d10;--green-100: #b4ecd1;--green-200: #89e2b6;--green-300: #5ed79c;--green-400: #33cc82;--green-500: #2db774;--green-600: #28a166;--green-700: #1d764b;--green-800: #134b30;--green-900: #082014;--yellow-100: #FDF4CB;--yellow-200: #FDE199;--yellow-300: #FDCE66;--yellow-400: #FDBB34;--yellow-500: #FDA801;--yellow-600: #DC8E01;--yellow-700: #BA7401;--yellow-800: #995901;--yellow-900: #773F01;--red-100: #FEE5D6;--red-200: #FEBBAD;--red-300: #FF9185;--red-400: #FF675C;--red-500: #FF3D33;--red-600: #DB2429;--red-700: #BB1B29;--red-800: #9A1129;--red-900: #7A0829;--paper: var(--white);--card: rgba(255, 255, 255, .92);--ink: var(--gray-800);--muted: var(--gray-500);--soft: var(--gray-400);--faint: var(--gray-200);--line: var(--gray-100);--dot: rgba(0, 174, 239, .14);--chip: var(--gray-100);--ring: rgba(5, 102, 198, .1);--font: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;background-color:var(--paper);background-image:radial-gradient(1100px 550px at 50% -10%,rgba(194,252,255,.55),transparent 70%),radial-gradient(800px 450px at 85% 85%,rgba(120,242,255,.22),transparent 65%),radial-gradient(circle,var(--dot) 1px,transparent 1.2px);background-size:100% 100%,100% 100%,24px 24px;color:var(--ink);font-family:var(--font);font-weight:500;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}#game,#game canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;cursor:pointer;touch-action:none}kbd{font-family:var(--font);font-size:.82em;font-weight:700;background:var(--gray-100);color:var(--gray-700);padding:3px 8px;border-radius:7px;box-shadow:inset 0 -1.5px 0 var(--gray-200),0 0 0 1px var(--gray-200)}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus,button:focus-visible{outline:none}.panel{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:18px;box-shadow:0 0 0 1px var(--ring),0 12px 32px -8px #0054991a,0 2px 6px #0d0d100a}.label{font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--muted);line-height:1.2}#hud{position:fixed;left:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 20px) 0 0 max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;align-items:flex-start;gap:10px;pointer-events:none;transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1);z-index:4}#hud.hidden{opacity:0;transform:translateY(-8px)}.board{padding:16px 20px 15px;display:grid;gap:14px}.hud-top{display:flex;align-items:flex-end;gap:24px}.stat .label{margin-top:6px}#score{font-size:44px;font-weight:800;line-height:.85;color:var(--blue-800);font-variant-numeric:tabular-nums;display:inline-block;transform-origin:left bottom}#score.bump{animation:bump .38s cubic-bezier(.34,1.56,.64,1)}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.16);color:var(--blue-500)}to{transform:scale(1)}}.timer-stat{min-width:66px;text-align:center}#timer{font-size:32px;font-weight:800;line-height:.9;color:var(--gray-900);font-variant-numeric:tabular-nums;transition:color .2s ease}#timer.urgent{color:var(--red-600);animation:timerPulse .5s ease-in-out infinite alternate}@keyframes timerPulse{0%{transform:scale(1)}to{transform:scale(1.12)}}.timer-bar-wrap{width:100%;height:4px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:6px}#timerBar{height:100%;background:var(--blue-600);border-radius:999px;transition:width .15s linear,background-color .3s ease}#timerBar.urgent{background:var(--red-500)}#best{font-size:22px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--gray-500)}.ballrow{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}#tracker{display:flex;gap:8px}.dot{width:15px;height:15px;border-radius:50%;border:1.8px solid var(--gray-200);background:var(--white);position:relative;transition:background .25s ease,border-color .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}.dot.next{border-color:var(--blue-500);background:var(--blue-100);box-shadow:0 0 0 3px #00aeef2e;animation:pulse 1.3s ease-in-out infinite}.dot.fly{background:var(--blue-200);border-color:var(--blue-400)}.dot.made{background:var(--blue-600);border-color:var(--blue-700);box-shadow:0 2px 6px #009eed59}.dot.swish{background:var(--yellow-400);border-color:var(--yellow-600);box-shadow:0 0 0 2.5px #fda80140}.dot.miss{background:var(--red-100);border-color:var(--red-300)}.dot.miss:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1.8px;background:var(--red-500);transform:translate(-50%,-50%) rotate(-45deg);border-radius:2px}@keyframes pulse{50%{transform:scale(1.18)}}#ballLabel{font-variant-numeric:tabular-nums}#streak{font-size:13px;font-weight:700;color:var(--yellow-800);background:linear-gradient(135deg,var(--yellow-100),var(--yellow-200));border-radius:10px;padding:5px 12px;box-shadow:0 0 0 1px #dc8e0138,0 4px 12px #fda80126;white-space:nowrap;opacity:0;transform:translateY(-6px) scale(.96);transition:opacity .28s cubic-bezier(.22,1,.36,1),transform .28s cubic-bezier(.22,1,.36,1)}#streak.on{opacity:1;transform:translateY(0) scale(1)}#hint{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom,0px));transform:translate(-50%);background:var(--card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:9px 16px;border-radius:999px;box-shadow:0 0 0 1px var(--ring),0 8px 24px #00549914;font-size:13.5px;font-weight:600;color:var(--gray-600);white-space:nowrap;pointer-events:none;transition:opacity .35s ease,transform .35s ease;display:flex;align-items:center;gap:7px;z-index:4}#hint.hidden{opacity:0;transform:translate(-50%,8px)}@media(hover:none)and (pointer:coarse){.kbd-only{display:none}}@media(max-width:520px){#hud{padding:calc(env(safe-area-inset-top,0px) + 12px) 0 0 max(12px,env(safe-area-inset-left,0px));gap:6px}.board{padding:11px 14px;gap:9px;border-radius:14px}.tally{gap:18px}#score{font-size:32px}#best{font-size:17px}.stat .label{margin-top:4px;font-size:11px}.ballrow{gap:6px;padding-top:8px}#tracker{gap:5px}.dot{width:11px;height:11px;border-width:1.5px}.dot.miss:after{width:6px;height:1.5px}#ballLabel{font-size:11px}#streak{font-size:12px;padding:3px 8px}#hint{font-size:13px;padding:6px 12px;bottom:max(12px,env(safe-area-inset-bottom,0px))}}#rotateOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;background:#0d0d10f0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:none;place-items:center;padding:24px;color:var(--white);text-align:center}@media(max-width:900px)and (orientation:portrait){#rotateOverlay{display:grid}}body.force-rotate-block #rotateOverlay{display:grid}.rotate-card{max-width:320px;display:flex;flex-direction:column;align-items:center;gap:12px}.rotate-icon-wrap{position:relative;width:76px;height:76px;display:grid;place-items:center;margin-bottom:6px}.phone-svg{width:48px;height:48px;color:var(--blue-400);animation:rotatePhone 2.2s cubic-bezier(.45,.05,.55,.95) infinite;transform-origin:center}.arrow-svg{position:absolute;right:-2px;top:-2px;width:26px;height:26px;color:var(--yellow-400);animation:spin 3s linear infinite}@keyframes rotatePhone{0%,25%{transform:rotate(0)}50%,75%{transform:rotate(-90deg)}95%,to{transform:rotate(0)}}.rotate-card h2{font-size:22px;font-weight:800;margin:0;color:var(--white)}.rotate-card p{font-size:14px;line-height:1.5;color:var(--gray-300);margin:0}#overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#0d0d1047;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.22,1,.36,1);z-index:10}#overlay.on{opacity:1;pointer-events:auto}.card{width:min(780px,95vw);max-height:min(600px,92dvh);background:var(--white);border-radius:24px;padding:24px 26px;box-shadow:0 0 0 1px #0566c61a,0 24px 48px -12px #0054992e,0 4px 12px #0d0d100d;transform:translateY(14px) scale(.98);transition:transform .38s cubic-bezier(.22,1,.36,1);display:none;overflow-y:auto;overscroll-behavior:contain}#overlay.on .card.show{transform:translateY(0) scale(1);display:block}.card.show{display:block}.card-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:24px;align-items:stretch}.card-left,.card-right{display:flex;flex-direction:column}@media(max-width:640px){.card-grid{grid-template-columns:1fr;gap:18px}}.row{display:flex;justify-content:space-between;align-items:center;gap:10px}.logo{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--blue-500) 0%,var(--blue-800) 100%);box-shadow:0 8px 18px -4px #00aeef73;display:grid;place-items:center;margin-bottom:12px;overflow:hidden}.logo-head{width:36px;height:36px;object-fit:contain;display:block}.brand-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-700);background:var(--blue-100);padding:3px 9px;border-radius:999px;margin-bottom:8px;width:fit-content}.badge-avatar{width:14px;height:14px;border-radius:50%;object-fit:contain}.title{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--gray-900);line-height:1.15;margin:0}.keys{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--gray-600);font-size:14px;font-weight:600;margin:12px 0 8px}.tag{color:var(--gray-500);font-size:13.5px;line-height:1.45;margin:6px 0 14px}.name-field{margin:4px 0 16px;display:flex;flex-direction:column;gap:5px}.input-wrap{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:13px;width:17px;height:17px;color:var(--gray-400);pointer-events:none;transition:color .2s ease}#playerNameInput{width:100%;height:46px;padding:0 14px 0 40px;font-size:16px;font-family:var(--font);font-weight:600;color:var(--gray-900);background:var(--gray-100);border:1.5px solid var(--gray-200);border-radius:12px;outline:none;transition:border-color .2s,background .2s,box-shadow .2s}#playerNameInput:focus{background:var(--white);border-color:var(--blue-500);box-shadow:0 0 0 3px #00aeef2e}.input-wrap:focus-within .input-icon{color:var(--blue-600)}.input-error{font-size:12px;font-weight:600;color:var(--red-600);display:none;margin-top:2px}.name-field.has-error #playerNameInput{border-color:var(--red-500);background:var(--red-100);animation:shake .35s ease}.name-field.has-error .input-error{display:block}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}.player-pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--blue-800);background:var(--blue-100);padding:4px 12px;border-radius:999px;margin-top:6px;width:fit-content}.leaderboard-panel{background:var(--gray-100);border-radius:18px;padding:14px 14px 12px;display:flex;flex-direction:column;height:100%;min-height:250px;border:1px solid var(--gray-200)}.lb-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:9px;border-bottom:1px solid var(--gray-200);margin-bottom:8px}.lb-title{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--gray-900)}.trophy-icon{width:17px;height:17px;color:var(--yellow-600)}.lb-sub{font-size:11px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em}.lb-list{display:flex;flex-direction:column;gap:5px;overflow-y:auto;max-height:280px;padding:3px 4px 3px 3px;overscroll-behavior:contain}.lb-list::-webkit-scrollbar{width:4px}.lb-list::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:4px}.lb-row{display:grid;grid-template-columns:24px 1fr auto auto;align-items:center;gap:9px;background:var(--white);padding:6.5px 9.5px;border-radius:10px;border:1.5px solid rgba(13,13,16,.06);box-shadow:0 1px 2px #0d0d1008;font-size:12.5px;transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease}.lb-row.is-current{background:var(--blue-100);border-color:var(--blue-500);box-shadow:0 2px 8px #00aeef38}.lb-rank{font-size:11px;font-weight:800;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--gray-100);color:var(--gray-600)}.lb-rank.gold{background:linear-gradient(135deg,var(--yellow-300),var(--yellow-500));color:var(--yellow-900)}.lb-rank.silver{background:linear-gradient(135deg,#e4e7eb,#bdc3cb);color:var(--gray-800)}.lb-rank.bronze{background:linear-gradient(135deg,#f5caa6,#d99966);color:#64310d}.lb-name{font-weight:700;color:var(--gray-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-stats{font-size:11px;font-weight:600;color:var(--gray-500);text-align:right;white-space:nowrap}.lb-score{font-size:13.5px;font-weight:800;color:var(--blue-800);font-variant-numeric:tabular-nums;min-width:26px;text-align:right}.lb-empty{text-align:center;padding:36px 12px;color:var(--gray-500);font-size:13px;font-weight:600}.chip{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--blue-100);color:var(--blue-800);white-space:nowrap}.chip.chip-success{background:var(--green-100);color:var(--green-700)}.chip.chip-warn{background:var(--red-100);color:var(--red-700)}.status-indicator{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.status-indicator.live{color:#10b981}.status-indicator.offline{color:var(--gray-400)}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-indicator.live .status-dot{background:#10b981;box-shadow:0 0 #10b981b3;animation:live-pulse 1.8s infinite}.status-indicator.offline .status-dot{background:var(--gray-400)}@keyframes live-pulse{0%{transform:scale(.95);box-shadow:0 0 #10b981b3}70%{transform:scale(1);box-shadow:0 0 0 5px #10b98100}to{transform:scale(.95);box-shadow:0 0 #10b98100}}.lb-divider{text-align:center;color:var(--gray-400);font-size:12px;letter-spacing:3px;padding:2px 0}.lb-row.pinned{border-top:1px dashed rgba(5,102,198,.3);margin-top:2px;background:#00aeef1f}.lb-more-link{display:block;text-align:center;margin-top:6px;padding-top:6px;border-top:1px dashed var(--gray-300);font-size:11.5px;font-weight:700;color:var(--blue-600);text-decoration:none;transition:color .15s}.lb-more-link:hover{color:var(--blue-800);text-decoration:underline}.actions{display:flex;gap:10px;margin-top:auto}.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:13px;font-size:15px;font-weight:700;transition:transform .16s cubic-bezier(.22,1,.36,1),background .2s ease,box-shadow .2s ease,opacity .2s ease}.btn:active{transform:scale(.98)}.btn.primary{flex:1;background:linear-gradient(135deg,var(--blue-500) 0%,var(--blue-700) 100%);color:var(--white);box-shadow:0 8px 20px -4px #008bea73,inset 0 1px #ffffff40}.btn.primary kbd{background:#ffffff38;color:var(--white);box-shadow:0 0 0 1px #ffffff4d}.btn.secondary{flex:none;padding:0 16px;background:var(--gray-100);color:var(--gray-700);box-shadow:0 0 0 1px var(--gray-200)}.btn.ghost{width:48px;flex:none;background:var(--gray-100);color:var(--gray-700);box-shadow:0 0 0 1px var(--gray-200)}@media(hover:hover){.btn.primary:hover{background:linear-gradient(135deg,var(--blue-400) 0%,var(--blue-600) 100%);transform:translateY(-1px);box-shadow:0 12px 24px -4px #00aeef85,inset 0 1px #ffffff4d}.btn.secondary:hover,.btn.ghost:hover{background:var(--blue-100);color:var(--blue-800);box-shadow:0 0 0 1px var(--blue-300)}}.btn svg{width:18px;height:18px}.btn.busy svg{display:none}.btn.busy:after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--gray-300);border-top-color:var(--blue-600);animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.foot{text-align:center;color:var(--gray-400);font-size:12px;font-weight:600;line-height:1.5;font-variant-numeric:tabular-nums;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.foot:empty{display:none}.result{display:flex;align-items:flex-end;gap:26px;margin:16px 0 18px}.result .label{margin-top:6px}#endScore{font-size:58px;font-weight:800;color:var(--blue-800);line-height:.85;font-variant-numeric:tabular-nums;display:block}#stAcc,#stShots{font-size:28px;font-weight:800;color:var(--gray-800);line-height:.9;font-variant-numeric:tabular-nums}.shots{display:flex;gap:6px;margin-bottom:20px;overflow-x:auto;padding-bottom:2px}.shots .dot{width:15px;height:15px;border-width:1.8px;flex:none}.shots .dot.miss:after{width:7px;height:1.8px}@media(max-height:520px)and (orientation:landscape){#hud{padding:calc(env(safe-area-inset-top,0px) + 8px) 0 0 max(12px,env(safe-area-inset-left,0px));gap:6px}.board{padding:9px 13px;gap:7px;border-radius:14px}.hud-top{gap:16px}#score{font-size:28px}#timer{font-size:22px}#best{font-size:15px}.stat .label{margin-top:3px;font-size:10px}.ballrow{gap:5px;padding-top:6px}#tracker{gap:4px}.dot{width:10px;height:10px;border-width:1.4px}#ballLabel{font-size:10.5px}#streak{font-size:11px;padding:3px 8px}#hint{font-size:12px;padding:5px 12px;bottom:max(8px,env(safe-area-inset-bottom,0px))}.card{width:min(740px,96vw);max-height:calc(100dvh - 16px);padding:16px 20px;border-radius:18px}.card-grid{gap:16px}.logo{display:none}.brand-badge{margin-bottom:4px}.title{font-size:20px}.tag{font-size:12px;margin:4px 0 8px;line-height:1.35}.name-field{margin:4px 0 10px}#playerNameInput{height:40px;font-size:14px;padding-left:36px}.input-icon{left:11px;width:15px;height:15px}.btn{height:42px;font-size:14px}.leaderboard-panel{min-height:170px;padding:10px 10px 8px;border-radius:14px}.lb-header{padding-bottom:6px;margin-bottom:6px}.lb-list{max-height:160px;gap:4px;padding:2px 3px 2px 2px}.lb-row{padding:4.5px 7.5px;font-size:11.5px}.lb-rank{width:18px;height:18px;font-size:10px}.result{gap:18px;margin:10px 0 12px}#endScore{font-size:42px}#stAcc,#stShots{font-size:22px}.shots{margin-bottom:12px}.shots .dot{width:12px;height:12px}.foot{margin-top:8px;padding-top:8px;font-size:11px}.top-actions{top:calc(env(safe-area-inset-top,0px) + 8px);right:max(10px,env(safe-area-inset-right,0px))}}.hidden{display:none!important}.top-actions{position:fixed;z-index:25;top:calc(env(safe-area-inset-top,0px) + 20px);right:max(20px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:10px}.btn-sound{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:#ffffffe0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(5,102,198,.16);box-shadow:0 4px 12px #00549914;color:var(--blue-800);cursor:pointer;padding:0;flex-shrink:0;transition:background .2s ease,color .2s ease,transform .2s ease}.btn-sound:hover{background:var(--blue-100);color:var(--blue-900);transform:translateY(-1px)}.btn-sound svg{width:19px;height:19px;flex-shrink:0;display:block}.btn-sound .icon-sound-off{display:none}.btn-sound.is-muted .icon-sound-on{display:none!important}.btn-sound.is-muted .icon-sound-off{display:block!important}.back{font-size:13.5px;font-weight:700;color:var(--blue-800);background:#ffffffd9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:7px 14px;border-radius:999px;box-shadow:0 0 0 1px #0566c61f,0 4px 12px #0054990f;text-decoration:none;white-space:nowrap;transition:background .2s ease,color .2s ease,transform .2s ease}.back:hover{background:var(--blue-100);color:var(--blue-900);transform:translateY(-1px)}@media(max-width:640px){.top-actions{top:calc(env(safe-area-inset-top,0px) + 12px);right:max(12px,env(safe-area-inset-right,0px));gap:8px}.btn-sound{width:32px;height:32px}.btn-sound svg{width:16px;height:16px}.back{font-size:12px;padding:5px 10px}}@media(max-width:420px){.top-actions{top:calc(env(safe-area-inset-top,0px) + 10px);right:max(10px,env(safe-area-inset-right,0px));gap:6px}.back{font-size:11.5px;padding:4px 9px}}#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translate(-50%,20px);background:var(--gray-900);color:var(--white);font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:12px;box-shadow:0 10px 25px #0d0d1038;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(.22,1,.36,1);white-space:nowrap;z-index:20}#toast.on{opacity:1;transform:translate(-50%)}