*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--ink: #f4f7fb;--muted: rgba(220, 230, 245, .72);--faint: rgba(200, 215, 235, .5);--accent: #ff6b2c;--accent-soft: rgba(255, 107, 44, .18);--gold: #ffb347;--bg: #02060f;--panel: rgba(4, 10, 24, .35);--glass: rgba(6, 13, 28, .58);--line: rgba(255, 255, 255, .12)}html,body,#app{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Oswald,sans-serif;color:var(--ink);touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{height:100dvh}#game{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}.hidden{display:none!important}.splash{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;grid-template-rows:1fr auto;place-items:center;padding:2rem 1.5rem calc(1.4rem + env(safe-area-inset-bottom));background:radial-gradient(120% 80% at 50% 32%,#1c34608c,#030812e6 55%,#02060f),#02060f;transition:opacity .55s ease}.splash.is-out{opacity:0;pointer-events:none}.splash-stage{text-align:center;align-self:center;width:min(30rem,100%)}.mark{position:relative;width:8.5rem;height:10rem;margin:0 auto 1.6rem}.mark-bat{position:absolute;left:50%;bottom:0;width:6.2rem;transform:translate(-58%) rotate(14deg);transform-origin:50% 85%;filter:drop-shadow(0 12px 26px rgba(0,0,0,.6));animation:bat-tilt 1.6s ease-in-out infinite}.mark-ball{position:absolute;top:.1rem;right:.4rem;width:1.35rem;height:1.35rem;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff3d6 0%,var(--gold) 62%,#d98420 100%);box-shadow:0 0 18px #ffb3478c;animation:ball-hop 1.6s cubic-bezier(.4,0,.6,1) infinite}.mark-ball-shadow{position:absolute;top:4.9rem;right:.55rem;width:1.05rem;height:.28rem;border-radius:50%;background:#00000080;filter:blur(2px);animation:ball-hop-shadow 1.6s cubic-bezier(.4,0,.6,1) infinite}.splash-word{font-family:Bebas Neue,sans-serif;font-size:clamp(2.6rem,9vw,4.4rem);letter-spacing:.1em;line-height:1;text-shadow:0 0 46px rgba(120,180,255,.35),0 8px 30px rgba(0,0,0,.6)}.splash-sub{margin-top:.55rem;font-weight:200;font-size:clamp(.68rem,2.2vw,.85rem);letter-spacing:.46em;text-indent:.46em;color:var(--faint)}.loadbar{position:relative;width:min(20rem,82%);height:3px;margin:2.6rem auto 0;background:#ffffff1a;overflow:hidden}.loadbar-net{position:absolute;left:50%;top:-3px;width:1px;height:9px;background:#ffffff47}.loadbar-fill{display:block;width:0%;height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));box-shadow:0 0 14px #ff8c3ca6;transition:width .35s ease}.loadstat{display:flex;justify-content:space-between;width:min(20rem,82%);margin:.8rem auto 0;font-size:.66rem;font-weight:300;letter-spacing:.24em;color:var(--faint);font-variant-numeric:tabular-nums}.splash-go{width:min(20rem,82%);margin:.8rem auto 0;text-align:center;font-size:.66rem;font-weight:300;letter-spacing:.24em;text-indent:.24em;color:var(--gold);animation:prompt-blink 1.4s ease-in-out infinite}.splash.is-ready{cursor:pointer}.splash-foot{font-size:.6rem;font-weight:200;letter-spacing:.4em;color:#c8d7eb47}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-rows:1fr auto;place-items:center;z-index:2;padding:1.5rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));pointer-events:none;background:linear-gradient(180deg,#02060f8c,#02060f47 40%,#02060fb8);animation:fade-in .35s ease both}.panel{pointer-events:auto;position:relative;align-self:center;width:min(24rem,100%);padding:2.1rem 1.9rem 1.9rem;text-align:center;background:var(--glass);border:1px solid var(--line);box-shadow:0 30px 80px #0000008c,inset 0 1px #ffffff0f;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:rise-in .5s cubic-bezier(.2,.8,.3,1) both}.panel-wide{width:min(30rem,100%);text-align:left}.panel-slim{width:min(19rem,100%)}.panel-rule{position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent) 28%,var(--gold) 72%,transparent)}.panel-title{font-family:Bebas Neue,sans-serif;font-size:1.9rem;letter-spacing:.14em}.panel-sub{margin-top:.35rem;font-family:Bebas Neue,sans-serif;font-size:2.2rem;letter-spacing:.12em;color:var(--muted)}.title{font-family:Bebas Neue,sans-serif;font-size:clamp(2.6rem,8vw,3.6rem);letter-spacing:.09em;line-height:.94;text-shadow:0 0 40px rgba(120,180,255,.3),0 8px 30px rgba(0,0,0,.55)}.tagline{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:.7rem}.tagline-text{font-weight:200;font-size:.68rem;letter-spacing:.38em;text-indent:.38em;color:var(--muted);white-space:nowrap}.tagline-rule{display:block;width:clamp(1.4rem,5vw,2.6rem);height:1px;background:linear-gradient(90deg,transparent,rgba(230,240,255,.7),transparent)}.record{margin-top:1.4rem;padding:.5rem 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);font-size:.66rem;font-weight:300;letter-spacing:.2em;color:var(--faint)}.record b{font-weight:400;color:var(--gold)}.badge{display:inline-block;margin-bottom:.6rem;padding:.25rem .7rem;font-size:.6rem;letter-spacing:.28em;text-indent:.28em;color:#12060a;background:var(--gold);animation:pop-in .45s cubic-bezier(.2,1.5,.4,1) both}.field{margin-top:1.5rem}.field-label{display:block;margin-bottom:.55rem;font-size:.58rem;font-weight:300;letter-spacing:.32em;text-indent:.32em;color:#c8d7eb6b}.segment{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:3px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1)}.segment-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:0;background:var(--accent-soft);border:1px solid rgba(255,107,44,.85);box-shadow:0 0 18px #ff6b2c47;transition:transform .28s cubic-bezier(.3,.9,.3,1),width .28s cubic-bezier(.3,.9,.3,1);pointer-events:none}.seg-btn{position:relative;z-index:1;border:0;background:transparent;color:var(--muted);font-family:Oswald,sans-serif;font-size:.68rem;font-weight:300;letter-spacing:.2em;text-indent:.2em;padding:.62rem .4rem;cursor:pointer;transition:color .2s ease}.seg-btn:hover{color:var(--ink)}.seg-btn.is-on{color:var(--ink);font-weight:400}.field-note{min-height:2.1rem;margin-top:.6rem;font-size:.68rem;font-weight:300;line-height:1.5;letter-spacing:.06em;color:var(--faint)}.btn{display:block;width:100%;border:1px solid rgba(255,255,255,.45);background:linear-gradient(180deg,#ffffff1f,#ffffff08);color:var(--ink);font-family:Oswald,sans-serif;font-size:.9rem;font-weight:400;letter-spacing:.3em;text-indent:.3em;padding:.85rem 1.2rem;cursor:pointer;transition:transform .18s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}.btn:hover{transform:translateY(-1px);border-color:#ffffffb3;background:#ffffff1a}.btn:active{transform:translateY(0)}.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.btn-primary{position:relative;overflow:hidden;margin-top:1.6rem;border-color:#ff6b2cbf;background:linear-gradient(180deg,#ff6b2c52,#ff6b2c14);font-size:1rem;box-shadow:0 10px 34px #ff6b2c2e}.btn-primary span{position:relative;z-index:1}.btn-primary:after{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:skew(-18deg);transition:left .5s ease}.btn-primary:hover{border-color:var(--accent);background:linear-gradient(180deg,#ff6b2c80,#ff6b2c29);box-shadow:0 14px 40px #ff6b2c4d}.btn-primary:hover:after{left:115%}.btn-ghost{border-color:#fff3;background:transparent;color:var(--muted);font-size:.72rem;letter-spacing:.26em;text-indent:.26em;padding:.7rem 1rem}.btn-row{display:flex;gap:.6rem;margin-top:.6rem}.foot-hint{pointer-events:none;font-size:.62rem;font-weight:200;letter-spacing:.16em;color:#c8d7eb4d;text-align:center}kbd{display:inline-block;margin:0 .1rem;padding:.05rem .35rem;font-family:inherit;font-size:.62rem;border:1px solid rgba(255,255,255,.18);color:#dce8f899}.guide{list-style:none;margin-top:1.5rem}.guide li{display:grid;grid-template-columns:4.6rem 1fr;gap:.9rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.07)}.guide-key{font-size:.66rem;font-weight:400;letter-spacing:.2em;color:var(--gold)}.guide-text{font-size:.8rem;font-weight:300;line-height:1.55;color:var(--muted)}.rules{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:1.2rem;font-size:.6rem;font-weight:300;letter-spacing:.18em;color:var(--faint)}.rules b{font-weight:400;color:var(--ink)}.panel-wide .btn{margin-top:1.6rem}#hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}.scoreboard{position:absolute;top:calc(1.4rem + env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:1.1rem;padding:.7rem 1.5rem;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.score-side{display:flex;flex-direction:column;align-items:center;min-width:3.2rem}.score-label{font-size:.65rem;letter-spacing:.28em;color:var(--muted)}#player-score,#cpu-score{font-family:Bebas Neue,sans-serif;font-size:2.4rem;line-height:1;letter-spacing:.04em}.score-divider{font-family:Bebas Neue,sans-serif;font-size:2rem;opacity:.45;padding-bottom:.55rem}.pause-btn{position:absolute;top:calc(1.4rem + env(safe-area-inset-top));right:1.1rem;pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:4px;width:2.6rem;height:2.6rem;border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:border-color .2s ease,background .2s ease}.pause-btn span{width:3px;height:.9rem;background:#e6f0ffcc}.pause-btn:hover{border-color:#fff6;background:#ff6b2c29}.status{position:absolute;top:calc(6.2rem + env(safe-area-inset-top));left:50%;transform:translate(-50%);font-size:.95rem;letter-spacing:.28em;color:#ffffffd9;text-shadow:0 2px 16px rgba(0,0,0,.6);min-height:1.2rem;transition:opacity .25s ease;white-space:nowrap}.controls-tip{position:absolute;bottom:calc(1.2rem + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);font-size:.72rem;font-weight:300;letter-spacing:.16em;color:var(--faint);white-space:nowrap}.result{font-family:Bebas Neue,sans-serif;font-size:clamp(2.6rem,8vw,3.8rem);letter-spacing:.09em;line-height:1;text-shadow:0 0 40px rgba(255,107,44,.35)}.result.lose{text-shadow:0 0 40px rgba(120,170,255,.3)}.final-score{margin-top:.4rem;font-family:Bebas Neue,sans-serif;font-size:1.6rem;letter-spacing:.24em;color:var(--muted)}.fps{position:absolute;top:calc(.9rem + env(safe-area-inset-top));left:.9rem;z-index:4;padding:.28rem .6rem;font-size:.72rem;font-weight:300;letter-spacing:.14em;font-variant-numeric:tabular-nums;color:#bef0c8e6;background:var(--panel);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;transition:color .2s ease}.fps.warn{color:#ffc24a}.fps.bad{color:#ff7a6b}.fps .scale{opacity:.6;font-size:.66rem;letter-spacing:.08em}.diag{position:absolute;top:calc(3.1rem + env(safe-area-inset-top));left:.9rem;z-index:4;max-width:24rem;padding:.55rem .7rem;font-family:ui-monospace,Consolas,monospace;font-size:.68rem;line-height:1.65;letter-spacing:.02em;color:#d2e1f5e6;background:#040a18b8;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;white-space:pre}.diag b{color:#ffc24a;font-weight:400}.diag .verdict{color:#7ee0a0}.diag .verdict.gpu{color:#ff7a6b}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes rise-in{0%{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}@keyframes pop-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes ball-hop{0%,to{transform:translateY(0)}50%{transform:translateY(3.6rem)}}@keyframes ball-hop-shadow{0%,to{opacity:.2;transform:scaleX(.6)}50%{opacity:.55;transform:scaleX(1)}}@keyframes prompt-blink{0%,to{opacity:1}50%{opacity:.28}}@keyframes bat-tilt{0%,to{transform:translate(-58%) rotate(14deg)}50%{transform:translate(-58%) rotate(6deg)}}@media(prefers-reduced-motion:reduce){.mark-ball,.mark-ball-shadow,.mark-bat,.panel,.overlay,.badge{animation:none!important}.splash-go{animation-duration:2.6s}.segment-thumb,.btn{transition:none}}@media(max-width:640px){.panel{padding:1.8rem 1.4rem 1.6rem}.scoreboard{top:calc(.8rem + env(safe-area-inset-top));gap:.7rem;padding:.55rem 1rem}.pause-btn{top:calc(.8rem + env(safe-area-inset-top));right:.8rem}.status{top:calc(5rem + env(safe-area-inset-top));font-size:.82rem;letter-spacing:.2em}.seg-btn{padding:.8rem .3rem;letter-spacing:.12em;text-indent:.12em}.guide li{grid-template-columns:3.8rem 1fr;gap:.7rem}.controls-tip{padding:0 .8rem;letter-spacing:.05em;font-size:.62rem}.foot-hint{display:none}}@media(max-height:480px){.overlay{padding-top:.6rem;padding-bottom:.6rem}.panel{padding:1.2rem 1.4rem;max-height:calc(100dvh - 1.2rem);overflow-y:auto}.title{font-size:2.1rem}.field,.record{margin-top:.8rem}.field-note{min-height:0}.btn-primary{margin-top:.9rem}.mark{width:6rem;height:6.6rem;margin-bottom:.8rem}.mark-bat{width:4.4rem}.mark-ball,.mark-ball-shadow{display:none}.loadbar{margin-top:1.4rem}.controls-tip,.foot-hint{display:none}}