*{box-sizing:border-box;margin:0;padding:0}html,body{overscroll-behavior:none;background:#7ec8f2;width:100%;height:100%;overflow:hidden}body{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}#app{position:fixed;top:0;bottom:0;left:0;right:0}canvas{touch-action:none;display:block}#ui{pointer-events:none;position:fixed;top:0;bottom:0;left:0;right:0}#ui .tap,#ui button{pointer-events:auto}.hidden{display:none!important}#startScreen{text-align:center;color:#14507a;background:linear-gradient(#7ec8f2f0 0%,#aee2ffe6 55%,#ffecb3e0 100%);flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}#startScreen h1{letter-spacing:6px;color:#fff;text-shadow:0 3px #146ea059,0 10px 28px #14507859;font-size:46px}#startScreen .sub{letter-spacing:2px;color:#0e5c8a;font-size:13px}.ball-icon{background:radial-gradient(circle at 35% 30%,#fff 0 55%,#e4e6e2 100%);border-radius:50%;width:64px;height:64px;position:relative;box-shadow:0 8px 20px #14507840}.ball-icon:before{content:"";clip-path:polygon(50% 0,93% 31%,76% 83%,24% 83%,7% 31%);background:#23272e;width:24px;height:24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tap{color:#0e7ab8;letter-spacing:2px;background:#fff;border-radius:999px;margin-top:10px;padding:14px 36px;font-weight:700;animation:1.6s ease-in-out infinite pulse;box-shadow:0 6px #0e6ea059}@keyframes pulse{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.hint{color:#2a7ba8;font-size:12px}#hud{padding:calc(10px + env(safe-area-inset-top)) 14px 0;justify-content:space-between;align-items:flex-start;display:flex;position:absolute;top:0;left:0;right:0}#distance{letter-spacing:1px;color:#fff;text-shadow:0 2px 8px #14507880;font-size:26px;font-weight:800}#hudBtns{gap:8px;display:flex}#hudBtns button{color:#0e6da0;letter-spacing:1px;background:#ffffffe0;border:none;border-radius:12px;padding:8px 10px;font-size:11px;font-weight:700;box-shadow:0 2px 6px #14507840}#btnPause{justify-content:center;align-items:center;gap:3px;width:38px;height:32px;padding:0;display:flex}#btnPause span{background:#0e6da0;border-radius:2px;width:4px;height:14px;display:block}#pauseScreen{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#fff;background:#143c5a61;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}#pauseScreen h2{letter-spacing:4px;text-shadow:0 2px 8px #001e3280;font-size:30px}
