*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:#0f0e17;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;font-family:Arial,sans-serif}.app{display:flex;flex-direction:column;align-items:center;width:100%;max-width:440px;padding:10px 8px}.hud{display:flex;gap:8px;background:#ffffff1a;border-radius:12px;padding:8px 12px;margin-bottom:6px;width:100%;justify-content:space-around}.stat{text-align:center;min-width:52px}.sl{font-size:10px;color:#aaa;text-transform:uppercase;letter-spacing:1px}.sv{font-size:20px;font-weight:700;color:#fff;min-height:28px;line-height:1.3;transition:color .15s}.wrap{position:relative;width:100%;max-width:400px}.cvs{width:100%;height:auto;display:block;border-radius:12px;cursor:grab;touch-action:none;box-shadow:0 4px 24px #0009;user-select:none;-webkit-user-select:none}.cvs:active{cursor:grabbing}.ov{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000000c7;border-radius:12px;overflow-y:auto}.ov-inner{text-align:center;color:#fff;padding:20px;max-width:320px;width:100%}.ov-inner h1{font-size:2rem;margin-bottom:8px}.sub{color:#ccc;font-size:.9rem;margin-bottom:12px}.balls-note{color:#adf;font-size:.82rem;margin-bottom:10px}.leg{text-align:left;display:inline-block;margin:4px 0 12px}.lr{display:flex;align-items:center;gap:8px;font-size:13px;color:#eee;margin:3px 0}.ld{display:inline-block;width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:0 1px 4px #0006}.hsp{color:gold;font-size:1rem;margin-bottom:10px}.fs{font-size:1.6rem;font-weight:700;margin-bottom:6px}.nhs{color:gold;font-size:1.1rem;font-weight:700;margin-bottom:6px;animation:pulse .6s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:.8;transform:scale(1)}to{opacity:1;transform:scale(1.05)}}.grade{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 8px}.grade-letter{font-size:2.8rem;font-weight:700;line-height:1;text-shadow:0 0 16px currentColor}.grade-label{font-size:.95rem;font-weight:700;opacity:.9}.shot-history{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin:10px 0 12px}.shot-dot{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}.target-win{color:#4d6;font-size:.9rem;font-weight:700;margin-bottom:6px}.target-lose{color:#f90;font-size:.9rem;margin-bottom:6px}.mode-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.btn{background:linear-gradient(135deg,#ff8c42,#ff5722);color:#fff;border:none;padding:11px 16px;font-size:.95rem;font-weight:700;border-radius:24px;cursor:pointer;box-shadow:0 4px 16px #ff572266;transition:transform .1s,box-shadow .1s;white-space:nowrap}.btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #ff57228c}.btn:active{transform:scale(.97)}.btn-sec{background:linear-gradient(135deg,#4a4a6a,#335);box-shadow:0 4px 16px #0000004d}.btn-sec:hover{box-shadow:0 6px 20px #0006}