:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.arena{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;background:radial-gradient(ellipse at center,#1a1020,#0a0a0a 70%);overflow:hidden}.title{font-size:2rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#f44;text-shadow:0 0 20px rgba(255,68,68,.5);margin-bottom:.5rem}.subtitle{color:#fff6;font-size:.85rem;margin-bottom:1.5rem;text-transform:uppercase;letter-spacing:.15em}.battlefield{display:flex;align-items:center;gap:3rem;margin-bottom:1.5rem}.fighter{display:flex;flex-direction:column;align-items:center;width:180px;transition:transform .1s}.fighter.slapping{animation:lunge .25s ease-out}.fighter.getting-hit{animation:recoil .3s ease-out}.fighter.knocked-out{animation:fallOver .5s ease-out forwards}@keyframes lunge{0%{transform:translate(0)}50%{transform:translate(40px)}to{transform:translate(0)}}@keyframes recoil{0%{transform:translate(0) rotate(0)}30%{transform:translate(-20px) rotate(-8deg)}60%{transform:translate(10px) rotate(3deg)}to{transform:translate(0) rotate(0)}}@keyframes fallOver{0%{transform:rotate(0);opacity:1}to{transform:rotate(90deg) translateY(30px);opacity:.4}}.face{font-size:5rem;line-height:1;cursor:default;-webkit-user-select:none;user-select:none;transition:filter .2s;filter:drop-shadow(0 0 10px rgba(255,255,255,.1))}.fighter.knocked-out .face{filter:grayscale(1) drop-shadow(0 0 10px rgba(255,0,0,.3))}.fighter-name{font-weight:700;font-size:1.1rem;margin-top:.5rem;letter-spacing:.05em}.health-bar-container{width:100%;height:14px;background:#222;border-radius:7px;overflow:hidden;margin-top:.4rem;border:1px solid rgba(255,255,255,.1);position:relative}.health-bar{height:100%;border-radius:7px;transition:width .3s ease,background .3s}.health-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.6rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.8)}.vs-badge{font-size:1.8rem;font-weight:900;color:#f44;text-shadow:0 0 15px rgba(255,68,68,.6)}.controls{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-bottom:1rem}.slap-btn{padding:.85rem 2.5rem;font-size:1.2rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;border:none;border-radius:.5rem;cursor:pointer;transition:transform .1s,box-shadow .2s;color:#fff;background:linear-gradient(135deg,#f44,#c00);box-shadow:0 4px 20px #ff44444d}.slap-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 6px 30px #ff444480}.slap-btn:active:not(:disabled){transform:scale(.95)}.slap-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.turn-indicator{font-size:.95rem;color:#ffffffb3;font-weight:600}.turn-indicator span{color:#f66;font-weight:800}.log-container{width:100%;max-width:440px;max-height:140px;overflow-y:auto;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:.5rem;padding:.75rem;font-size:.8rem;color:#ffffff80;margin-bottom:1rem}.log-entry{padding:.15rem 0;border-bottom:1px solid rgba(255,255,255,.04)}.log-entry:last-child{border-bottom:none}.log-entry.critical{color:#f44;font-weight:700}.log-entry.miss{color:#68a;font-style:italic}.log-entry.heal{color:#4c6}.powerup-bar{display:flex;gap:.5rem;margin-bottom:.75rem}.powerup-btn{padding:.4rem .85rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border:1px solid rgba(255,255,255,.15);border-radius:.35rem;cursor:pointer;background:#ffffff0d;color:#ffffffb3;transition:all .15s}.powerup-btn:hover:not(:disabled){background:#ffffff1f;color:#fff;border-color:#ffffff4d}.powerup-btn:disabled{opacity:.3;cursor:not-allowed}.powerup-btn.cooldown{color:#888;border-color:#6464644d}.winner-banner{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000d9;z-index:10;animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.winner-banner h2{font-size:2.5rem;color:#fc0;text-shadow:0 0 30px rgba(255,204,0,.5);margin-bottom:.5rem}.winner-banner p{font-size:1.1rem;color:#fff9;margin-bottom:1.5rem}.restart-btn{padding:.75rem 2rem;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;border:none;border-radius:.5rem;cursor:pointer;background:linear-gradient(135deg,#fc0,#f90);color:#111;box-shadow:0 4px 20px #ffcc004d}.restart-btn:hover{transform:scale(1.05)}.slap-effect{position:fixed;pointer-events:none;font-size:3rem;z-index:20;animation:slapFloat .7s ease-out forwards}@keyframes slapFloat{0%{opacity:1;transform:scale(.5) translateY(0)}50%{opacity:1;transform:scale(1.2) translateY(-30px)}to{opacity:0;transform:scale(.8) translateY(-60px)}}.screen-shake{animation:shake .2s ease-out}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,4px)}to{transform:translate(0)}}.combo-text{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;font-weight:900;color:#f44;text-shadow:0 0 20px rgba(255,68,68,.7);z-index:15;animation:comboFlash .8s ease-out forwards;pointer-events:none}@keyframes comboFlash{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}to{opacity:0;transform:translate(-50%,-50%) scale(1.5) translateY(-40px)}}