:root{--pitch-color: #81c784;--line-color: rgba(255, 255, 255, .85);--goal-width: 180px;--wall-color: #388e3c;--wall-thickness: 15px}body,html{margin:0;padding:0;background-color:#f2fbe0;color:#2e7d32;font-family:Nunito,Segoe UI,system-ui,sans-serif;width:100vw;min-height:100vh;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column}#game-container{width:100%;height:100vh;min-height:100vh;flex-shrink:0;position:relative}#game-area{position:relative;width:100%;height:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}#game-area canvas{display:block;width:100%!important;height:100%!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}#ui-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}.player-score{position:absolute;text-align:center;background:#ffffffbf;padding:6px 16px;border-radius:20px;border:2px solid rgba(255,255,255,1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto;transform:translate(-50%,-50%);box-shadow:0 8px 24px #0000001a;min-width:70px;transition:all .5s cubic-bezier(.34,1.56,.64,1)}.player-score.punch{transform:translate(-50%,-50%) scale(1.3)}.player-score div:first-child{font-size:.7em;text-transform:uppercase;letter-spacing:1px;font-weight:900;transition:color .3s}.score-value{font-size:24px;font-weight:900;color:#333}.lives-bar{display:flex;gap:4px;justify-content:center;margin-top:4px}.life-dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.2;transition:opacity .2s}.life-dot.active{opacity:1}#p1-score-box{bottom:50px;left:50%;border-bottom:4px solid #4fc3f7;color:#0288d1}#p2-score-box{top:50px;left:50%;border-top:4px solid #ff8a80;color:#c62828}#p3-score-box{top:110px;left:55px;transform:translateY(-50%);border-left:4px solid #ffb74d;color:#e65100}#p4-score-box{top:110px;right:55px;left:auto;transform:translateY(-50%);border-right:4px solid #ba68c8;color:#6a1b9a}#top-bar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:center;align-items:center;padding:10px 15px;pointer-events:auto}#match-timer{font-size:1.2em;font-weight:900;letter-spacing:1px;color:#2e7d32;background:#fffc;padding:6px 20px;border-radius:24px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 12px #0000000d;font-variant-numeric:tabular-nums;border:2px solid #fff}#charge-meter-container{position:absolute;bottom:120px;left:50%;transform:translate(-50%);width:160px;height:12px;background:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid #fff;box-shadow:0 4px 12px #0000001a;border-radius:6px;overflow:hidden;opacity:0;transition:opacity .2s}#charge-meter-fill{height:100%;width:0%;background:linear-gradient(90deg,#4fc3f7,#ba68c8);border-radius:4px;transition:width .05s linear}#controls-hint{position:absolute;bottom:140px;left:50%;transform:translate(-50%);background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid #fff;box-shadow:0 4px 12px #0000001a;padding:10px 24px;border-radius:24px;pointer-events:auto;text-align:center;font-size:.9em;font-weight:900;color:#388e3c;opacity:1;transition:opacity .5s}.floating-text{position:absolute;font-weight:900;font-size:28px;text-shadow:0 4px 8px rgba(0,0,0,.15),0 2px 2px #fff;pointer-events:none;z-index:100;top:0;left:0;will-change:transform,opacity;color:#fff}@keyframes shake{0%{transform:translate(3px,3px) rotate(0)}20%{transform:translate(-5px,-3px) rotate(-1deg)}40%{transform:translate(5px,3px) rotate(1deg)}60%{transform:translate(-3px,-2px) rotate(0)}80%{transform:translate(3px,-3px) rotate(-1deg)}to{transform:translate(0) rotate(0)}}.shake-screen{animation:shake .4s cubic-bezier(.36,.07,.19,.97) both}@keyframes flash{0%{background:#fff9}to{background:transparent}}.flash-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50;animation:flash .15s ease-out forwards}