:root{--gold: #FFD700;--red: #FF6B6B;--teal: #4ECDC4;--purple: #A855F7;--bg: #1a1a2e;--card: #16213e;--accent: #e94560}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:#fff;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app{max-width:480px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;align-items:center;min-height:100vh;background:linear-gradient(180deg,#1a1a2e,#16213e,#0f3460)}.header{text-align:center;margin-bottom:1rem}.title{font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,var(--gold),var(--red));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;letter-spacing:-.02em}.subtitle{color:#fff9;font-size:.9rem;margin-top:.25rem}.scoreboard{display:flex;gap:1rem;width:100%;max-width:360px;margin-bottom:1rem}.score-item{flex:1;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:.75rem;padding:.6rem .5rem;text-align:center;display:flex;flex-direction:column;gap:.2rem}.score-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;color:#ffffff73;font-weight:600}.score-value{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}.combo-value{color:var(--gold)}.high-score{color:var(--teal)}.combo-message{font-size:1.4rem;font-weight:800;color:var(--gold);text-align:center;margin-bottom:.5rem;animation:comboPopIn .4s ease-out;text-shadow:0 0 20px rgba(255,215,0,.5)}@keyframes comboPopIn{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.3)}to{transform:scale(1);opacity:1}}.bag-container{position:relative;width:200px;height:260px;margin:.5rem auto 1rem;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.punching-bag{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;transition:transform .1s}.punching-bag.shake{animation:bagShake .2s ease-in-out}@keyframes bagShake{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-8px) rotate(-3deg)}50%{transform:translate(8px) rotate(3deg)}75%{transform:translate(-4px) rotate(-1deg)}}.bag-chain{width:4px;height:30px;background:linear-gradient(180deg,#888,#666);border-radius:2px}.bag-body{width:120px;height:180px;background:linear-gradient(135deg,#e94560,#c0392b);border-radius:20px 20px 40px 40px;position:relative;box-shadow:0 8px 30px #e945604d,inset 0 -20px 40px #0003;display:flex;align-items:center;justify-content:center;overflow:hidden}.bag-highlight{position:absolute;top:15px;left:20px;width:30px;height:60px;background:#ffffff26;border-radius:50%;transform:rotate(-15deg)}.bag-face{font-size:3rem;z-index:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));transition:font-size .1s}.punching-bag.shake .bag-face{font-size:2.8rem}.punch-effect{position:absolute;pointer-events:none;display:flex;flex-direction:column;align-items:center;animation:punchFloat .8s ease-out forwards;z-index:10;transform:translate(-50%,-50%)}.punch-emoji{font-size:2rem;animation:punchSpin .4s ease-out}.punch-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}@keyframes punchFloat{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-120%) scale(1.5)}}@keyframes punchSpin{0%{transform:rotate(0) scale(.5)}50%{transform:rotate(180deg) scale(1.3)}to{transform:rotate(360deg) scale(1)}}.punch-buttons{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;width:100%;max-width:320px;margin-bottom:1rem}.punch-btn{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.75rem .5rem;border:2px solid transparent;border-radius:.75rem;cursor:pointer;font-family:inherit;font-weight:700;transition:all .15s;-webkit-tap-highlight-color:transparent;color:#fff}.punch-btn:active{transform:scale(.95)}.punch-jab{background:linear-gradient(135deg,#ffd70033,#ffd7000d);border-color:#ffd7004d}.punch-cross{background:linear-gradient(135deg,#ff6b6b33,#ff6b6b0d);border-color:#ff6b6b4d}.punch-hook{background:linear-gradient(135deg,#4ecdc433,#4ecdc40d);border-color:#4ecdc44d}.punch-uppercut{background:linear-gradient(135deg,#a855f733,#a855f70d);border-color:#a855f74d}.punch-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #ffffff1a}.btn-emoji{font-size:1.5rem}.btn-name{font-size:.75rem;text-transform:capitalize;letter-spacing:.05em}.btn-points{font-size:.65rem;opacity:.6;font-weight:600}.reset-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#fff9;padding:.5rem 1.5rem;border-radius:2rem;cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:600;transition:all .15s;margin-bottom:1.5rem}.reset-btn:hover{background:#ffffff1a;color:#fff}.tips{width:100%;max-width:360px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:.75rem;padding:1rem 1.25rem;margin-bottom:1rem}.tips h3{font-size:.9rem;font-weight:700;margin-bottom:.5rem;color:var(--gold)}.tips ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}.tips li{font-size:.8rem;color:#ffffff8c;padding-left:1rem;position:relative}.tips li:before{content:"•";position:absolute;left:0;color:var(--teal)}