@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rajdhani:wght@400;600;700&family=Orbitron:wght@700;900&display=swap";
.game-wrapper{--bg-dark:#0a0a0f;--bg-mid:#14141f;--accent-red:#ff1744;--accent-blue:#2979ff;--accent-yellow:#ffd600;--accent-cyan:#00e5ff;--accent-orange:#ff6d00;--hp-red:#e53935;--hp-green:#43a047;--hp-yellow:#fdd835;--text-primary:#f5f5f5;--text-dim:#9e9e9e;--scanline:#00000014}.game-wrapper,.game-wrapper *{box-sizing:border-box;margin:0;padding:0}.game-wrapper{background:var(--bg-dark);color:var(--text-primary);-webkit-user-select:none;user-select:none;z-index:50;width:100vw;height:100vh;font-family:Rajdhani,sans-serif;position:fixed;top:0;left:0;overflow:hidden}#game-container{background:var(--bg-dark);border:2px solid #222;border-radius:4px;width:1200px;height:700px;position:absolute;top:50%;left:50%;overflow:hidden;box-shadow:0 0 80px #ff174426,0 0 160px #2979ff1a}#game-container:after{content:"";background:repeating-linear-gradient(0deg,var(--scanline)0px,var(--scanline)1px,transparent 1px,transparent 3px);pointer-events:none;z-index:100;mix-blend-mode:multiply;position:absolute;inset:0}#title-screen{z-index:50;background:radial-gradient(at 50% 40%,#1a1028 0%,#0a0a0f 70%);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#title-screen .logo{letter-spacing:8px;text-transform:uppercase;background:linear-gradient(180deg,#fff 0%,var(--accent-red)60%,#880e1a 100%);-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 30px #ff174480);-webkit-background-clip:text;font-family:Orbitron,sans-serif;font-size:64px;font-weight:900;animation:3s ease-in-out infinite logoFlicker}#title-screen .subtitle{color:var(--accent-yellow);letter-spacing:6px;text-shadow:0 0 20px #ffd60066;margin-top:12px;font-family:"Press Start 2P",monospace;font-size:14px}#title-screen .start-btn{color:var(--text-primary);cursor:pointer;border:2px solid var(--accent-yellow);letter-spacing:2px;background:0 0;margin-top:60px;padding:16px 40px;font-family:"Press Start 2P",monospace;font-size:13px;transition:all .2s;animation:1.2s step-end infinite blink}#title-screen .start-btn:hover{background:var(--accent-yellow);color:var(--bg-dark)}#title-screen .controls-hint{color:var(--text-dim);text-align:center;gap:80px;margin-top:50px;font-family:"Press Start 2P",monospace;font-size:8px;line-height:2;display:flex}@keyframes blink{50%{opacity:0}}@keyframes logoFlicker{0%,to{filter:drop-shadow(0 0 30px #ff174480)}50%{filter:drop-shadow(0 0 50px #ff1744cc)brightness(1.1)}}#select-screen{z-index:40;background:radial-gradient(at 50% 30%,#0f1528 0%,#0a0a0f 70%);flex-direction:column;align-items:center;padding-top:30px;display:none;position:absolute;inset:0}#select-screen .select-title{letter-spacing:6px;color:var(--accent-cyan);text-shadow:0 0 20px #00e5ff66;margin-bottom:30px;font-family:Orbitron,sans-serif;font-size:28px;font-weight:700}.roster{gap:30px;margin-bottom:30px;display:flex}.char-card{cursor:pointer;background:linear-gradient(#1a1a2e 0%,#0d0d14 100%);border:2px solid #333;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;width:160px;height:220px;transition:all .25s;display:flex;position:relative;overflow:hidden}.char-card:hover{border-color:var(--accent-cyan);transform:translateY(-4px);box-shadow:0 0 30px #00e5ff33}.char-card.selected-p1{border-color:var(--accent-red);box-shadow:0 0 30px #ff174466,inset 0 0 30px #ff17441a}.char-card.selected-p2{border-color:var(--accent-blue);box-shadow:0 0 30px #2979ff66,inset 0 0 30px #2979ff1a}.char-card.locked{opacity:.35;cursor:not-allowed;pointer-events:auto;filter:grayscale()}.char-card.locked:hover{box-shadow:none;border-color:#333;transform:none}.char-card.locked:after{content:"COMING SOON";color:var(--text-dim);letter-spacing:1px;white-space:nowrap;font-family:"Press Start 2P",monospace;font-size:5px;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.char-card .char-sprite-preview{border-radius:8px;justify-content:center;align-items:center;width:110px;height:115px;margin-bottom:6px;display:flex;overflow:hidden}.char-card .char-name{letter-spacing:2px;color:var(--text-primary);font-family:Orbitron,sans-serif;font-size:13px;font-weight:700}.char-card .char-style{color:var(--text-dim);letter-spacing:1px;margin-top:6px;font-family:"Press Start 2P",monospace;font-size:6px}.select-instructions{gap:60px;margin-top:10px;display:flex}.select-instructions .player-inst{text-align:center;font-family:"Press Start 2P",monospace;font-size:8px;line-height:2.2}.select-instructions .p1-inst{color:var(--accent-red)}.select-instructions .p2-inst{color:var(--accent-blue)}#fight-btn{letter-spacing:6px;color:var(--bg-dark);background:var(--accent-yellow);cursor:pointer;text-shadow:none;border:none;border-radius:4px;padding:14px 60px;font-family:Orbitron,sans-serif;font-size:22px;font-weight:700;transition:all .2s;display:none;box-shadow:0 0 40px #ffd60066}#fight-btn:hover{transform:scale(1.05);box-shadow:0 0 60px #ffd60099}.fight-buttons{gap:16px;margin-top:20px;display:flex}#watch-btn{letter-spacing:6px;color:var(--bg-dark);background:var(--accent-cyan);cursor:pointer;text-shadow:none;border:none;border-radius:4px;padding:14px 50px;font-family:Orbitron,sans-serif;font-size:22px;font-weight:700;transition:all .2s;display:none;box-shadow:0 0 40px #00e5ff66}#watch-btn:hover{transform:scale(1.05);box-shadow:0 0 60px #00e5ff99}#fight-screen{z-index:30;display:none;position:absolute;inset:0}#stage{z-index:0;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;background:url(/images/edificiorojo.png) bottom/cover no-repeat;position:absolute;inset:0;overflow:hidden}#stage:after{content:"";pointer-events:none;z-index:1;background:linear-gradient(#0000 0%,#00000059 50%,#0000008c 100%);height:45%;position:absolute;bottom:0;left:0;right:0}#hud{z-index:10;background:linear-gradient(#000000b3 0%,#0000 100%);justify-content:center;align-items:flex-start;height:80px;padding-top:12px;display:flex;position:absolute;top:0;left:0;right:0}.health-section{align-items:center;gap:8px;width:420px;display:flex}.health-section.p1{flex-direction:row-reverse}.health-section.p2{flex-direction:row}.player-name-hud{letter-spacing:2px;text-align:center;min-width:60px;font-family:Orbitron,sans-serif;font-size:11px;font-weight:700}.p1 .player-name-hud{color:var(--accent-red)}.p2 .player-name-hud{color:var(--accent-blue)}.health-bar-container{background:#1a1a2a;border:2px solid #333;border-radius:2px;flex:1;height:22px;position:relative;overflow:hidden}.p1 .health-bar-container{border-radius:2px 12px 12px 2px}.p2 .health-bar-container{border-radius:12px 2px 2px 12px}.health-bar{height:100%;transition:width .3s ease-out;position:relative}.p1 .health-bar{float:right;background:linear-gradient(#ff5252 0%,#d32f2f 50%,#b71c1c 100%);border-radius:0 10px 10px 0}.p2 .health-bar{background:linear-gradient(#448aff 0%,#1565c0 50%,#0d47a1 100%);border-radius:10px 0 0}.health-bar:after{content:"";background:linear-gradient(#ffffff4d 0%,#0000 100%);border-radius:2px;height:6px;position:absolute;top:2px;left:4px;right:4px}.health-bar.low{background:linear-gradient(#ff6f00 0%,#e65100 50%,#bf360c 100%)}.health-bar.critical{background:linear-gradient(#ff1744 0%,#d50000 50%,#b71c1c 100%);animation:.5s ease-in-out infinite criticalPulse}@keyframes criticalPulse{0%,to{filter:brightness()}50%{filter:brightness(1.4)}}.health-damage{background:#ffffff80;height:100%;transition:width .8s ease-out .3s;position:absolute;top:0}.p1 .health-damage{right:0}.p2 .health-damage{left:0}.round-pips{gap:4px;margin-top:4px;display:flex}.p1 .round-pips{justify-content:flex-end}.p2 .round-pips{justify-content:flex-start}.round-pip{background:0 0;border:1px solid #555;border-radius:50%;width:10px;height:10px}.round-pip.won{background:var(--accent-yellow);border-color:var(--accent-yellow);box-shadow:0 0 6px #ffd60080}#timer-display{color:var(--accent-yellow);text-shadow:0 0 20px #ffd60066;text-align:center;min-width:70px;margin:0 12px;font-family:Orbitron,sans-serif;font-size:36px;font-weight:900;line-height:1}#timer-display.urgent{color:var(--accent-red);animation:.5s ease-in-out infinite timerUrgent}@keyframes timerUrgent{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.combo-display{pointer-events:none;opacity:0;z-index:15;text-shadow:0 0 20px;font-family:Orbitron,sans-serif;font-size:24px;font-weight:900;position:absolute}.combo-display.p1-combo{color:var(--accent-red);top:100px;left:60px}.combo-display.p2-combo{color:var(--accent-blue);top:100px;right:60px}.combo-display.active{opacity:1;animation:.3s cubic-bezier(.34,1.56,.64,1) comboPopIn}@keyframes comboPopIn{0%{opacity:0;transform:scale(.5)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.fighter{z-index:5;transform-origin:bottom;width:70px;height:120px;transition:none;position:absolute;scale:1.8}#fighter-1{filter:drop-shadow(0 0 1px #000)drop-shadow(0 0 2px #000)drop-shadow(0 0 4px #ff1744b3)drop-shadow(0 0 8px #ff174459)}#fighter-2{filter:drop-shadow(0 0 1px #000)drop-shadow(0 0 2px #000)drop-shadow(0 0 4px #2979ffb3)drop-shadow(0 0 8px #2979ff59)}.fighter-body{width:100%;height:100%;position:relative}.fighter .head{z-index:2;border-radius:50%;width:34px;height:34px;position:absolute;top:-2px;left:50%;transform:translate(-50%)}.fighter .head.face-img{border-radius:0;left:50%;overflow:visible;transform:translate(-50%);background:0 0!important;border:none!important}.fighter .head.face-img img{object-fit:contain;image-rendering:auto;filter:drop-shadow(0 1px 2px #0006);width:100%;height:100%}#fighter-1 .head.face-img{width:94px;height:94px;top:-34px}#fighter-2 .head.face-img{width:68px;height:68px;top:-20px}.fighter .neck{z-index:1;border-radius:3px;width:16px;height:12px;position:absolute;top:22px;left:50%;transform:translate(-50%)}.fighter .shoulder{z-index:2;border-radius:50% 50% 30% 30%;width:16px;height:14px;position:absolute;top:30px}.fighter .shoulder.left-shoulder{left:2px}.fighter .shoulder.right-shoulder{right:2px}.fighter .torso{z-index:1;clip-path:polygon(5% 0%,95% 0%,100% 15%,88% 100%,12% 100%,0% 15%);border-radius:4px 4px 6px 6px;width:42px;height:38px;position:absolute;top:30px;left:50%;transform:translate(-50%)}.fighter .torso:before{content:"";background:#ffffff14;border-bottom:1px solid #00000026;border-radius:50%;width:28px;height:16px;position:absolute;top:4px;left:50%;transform:translate(-50%)}.fighter .torso:after{content:"";background:#0000001f;width:2px;height:14px;position:absolute;bottom:8px;left:50%;transform:translate(-50%);box-shadow:-6px 0 #0000000f,6px 0 #0000000f}.fighter .arm{z-index:0;transform-origin:top;border-radius:8px 8px 6px 6px;width:16px;height:34px;transition:transform 60ms;position:absolute;top:32px;overflow:visible}.fighter .arm.front{z-index:3}.fighter .leg{z-index:0;transform-origin:top;border-radius:8px 8px 5px 5px;width:20px;height:44px;transition:transform 60ms;position:absolute;bottom:0;overflow:visible}.fighter .hand{z-index:4;border-radius:4px 6px 6px 4px;width:16px;height:14px;position:absolute;bottom:-10px;left:50%;transform:translate(-50%);box-shadow:inset 0 -2px #0003}.fighter .hand:before{content:"";background:#ffffff26;border-radius:2px;width:10px;height:3px;position:absolute;top:2px;left:50%;transform:translate(-50%)}.fighter .foot{z-index:1;border-radius:3px 6px 4px 4px;width:22px;height:14px;position:absolute;bottom:-10px;left:50%;transform:translate(-50%);box-shadow:inset 0 -3px #00000040}.fighter .foot:before{content:"";background:#0000004d;border-radius:0 0 4px 4px;width:100%;height:4px;position:absolute;bottom:0;left:0}.fighter-shadow{background:radial-gradient(#000000b3 0%,#0000004d 40%,#0000 70%);border-radius:50%;width:70px;height:14px;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)}#round-announce{z-index:20;pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0}#round-announce .announce-text{letter-spacing:8px;text-shadow:0 0 60px #ffd60099,0 4px #8b6914;color:var(--accent-yellow);font-family:Orbitron,sans-serif;font-size:72px;font-weight:900;animation:.6s cubic-bezier(.34,1.56,.64,1) forwards announceIn;transform:scale(0)}@keyframes announceIn{0%{opacity:0;transform:scale(3)}to{opacity:1;transform:scale(1)}}#particles{pointer-events:none;z-index:12;position:absolute;inset:0}.particle{pointer-events:none;border-radius:50%;position:absolute}.hit-flash{pointer-events:none;z-index:11;border-radius:50%;position:absolute}#victory-screen{z-index:35;background:#000000d9;flex-direction:column;justify-content:center;align-items:center;display:none;position:absolute;inset:0}#victory-screen .winner-text{letter-spacing:6px;margin-bottom:10px;font-family:Orbitron,sans-serif;font-size:48px;font-weight:900}#victory-screen .wins-text{color:var(--accent-yellow);text-shadow:0 0 20px #ffd60066;font-family:"Press Start 2P",monospace;font-size:16px}#victory-screen .rematch-btn{color:var(--text-primary);border:2px solid var(--accent-cyan);cursor:pointer;letter-spacing:2px;background:0 0;margin-top:50px;padding:14px 40px;font-family:"Press Start 2P",monospace;font-size:12px;transition:all .2s}#victory-screen .rematch-btn:hover{background:var(--accent-cyan);color:var(--bg-dark)}.damage-number{pointer-events:none;z-index:15;text-shadow:0 0 10px,0 2px #00000080;font-family:Orbitron,sans-serif;font-size:22px;font-weight:900;animation:.8s ease-out forwards dmgFloat;position:absolute}@keyframes dmgFloat{0%{opacity:1;transform:translateY(0)scale(1.3)}to{opacity:0;transform:translateY(-50px)scale(.8)}}#fight-screen.shake{animation:.15s ease-out screenShake}@keyframes screenShake{0%{transform:translate(0)}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-3px,2px)}80%{transform:translate(4px,-1px)}to{transform:translate(0)}}#fight-screen.heavy-shake{animation:.25s ease-out heavyShake}@keyframes heavyShake{0%{transform:translate(0)}15%{transform:translate(-10px,5px)}30%{transform:translate(8px,-7px)}45%{transform:translate(-6px,4px)}60%{transform:translate(7px,-3px)}75%{transform:translate(-4px,2px)}to{transform:translate(0)}}@keyframes idleBob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.fighter.idle .arm.front{transform:rotate(-20deg)}.fighter.idle .arm.back{transform:rotate(-12deg)}.fighter.idle .left-leg{transform:rotate(3deg)}.fighter.idle .right-leg{transform:rotate(-3deg)}.fighter.idle .fighter-body{animation:.8s ease-in-out infinite idleBob}.fighter.hit-stun .fighter-body{animation:.15s ease-out hitStun}@keyframes hitStun{0%{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}to{transform:translate(0)}}.fighter.blocking{filter:brightness(.8)}.fighter.blocking .fighter-body{transform:scaleX(.9)}.ko-flash{z-index:25;pointer-events:none;background:#fff;animation:.4s ease-out forwards koFlash;position:absolute;inset:0}@keyframes koFlash{0%{opacity:.8}to{opacity:0}}.special-trail{pointer-events:none;z-index:6;border-radius:50%;animation:.3s ease-out forwards trailFade;position:absolute}@keyframes trailFade{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}.projectile{z-index:15;pointer-events:none;width:50px;height:50px;position:absolute}.proj-core{background:radial-gradient(circle,#fff 0%,#00e5ff 50%,#0091ea 100%);border-radius:50%;animation:.1s infinite alternate proj-pulse;position:absolute;inset:8px}.proj-glow{background:radial-gradient(circle,#00e5ff66 0%,#0000 70%);border-radius:50%;animation:.15s infinite alternate proj-pulse;position:absolute;inset:-14px}@keyframes proj-pulse{0%{opacity:.8;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}.projectile.bullet{width:20px;height:12px}.projectile.bullet .proj-core{background:radial-gradient(#fff 0%,#ffd600 50%,#ff6d00 100%);border-radius:50%/40% 40% 60% 60%;inset:2px}.projectile.bullet .proj-glow{background:radial-gradient(#ffd60080 0%,#0000 70%);border-radius:50%;inset:-6px}.fighter .gun{z-index:5;background:#333;border-radius:2px 2px 3px 3px;width:10px;height:22px;display:none;position:absolute;bottom:-18px;left:50%;transform:translate(-50%)}.fighter .gun:after{content:"";background:#555;border-radius:0 0 2px 2px;width:5px;height:12px;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}.fighter .gun:before{content:"";background:#444;border-radius:0 2px 3px 0;width:6px;height:10px;position:absolute;top:8px;right:-5px;transform:rotate(-15deg)}.fighter.gun-out .gun{display:block}#rec-btn{z-index:15;cursor:pointer;color:#ccc;background:#14141fcc;border:2px solid #555;border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-family:"Press Start 2P",monospace;font-size:8px;transition:all .2s;display:flex;position:absolute;top:12px;right:16px}#rec-btn:hover{border-color:var(--accent-red);box-shadow:0 0 12px #ff17444d}#rec-btn.recording{border-color:var(--accent-red);color:#ff1744;background:#ff174433;animation:1s ease-in-out infinite recBlink}#rec-btn .rec-dot{background:#e53935;border-radius:50%;width:8px;height:8px}#rec-btn.recording .rec-dot{background:#ff1744;box-shadow:0 0 8px #ff1744cc}@keyframes recBlink{0%,to{opacity:1}50%{opacity:.4}}#game-container{transform-origin:50%}.touch-controls{z-index:200;pointer-events:none;display:none;position:absolute;inset:0}.touch-controls.active{display:block}.touch-dpad{bottom:calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none;width:130px;height:130px;position:absolute;left:16px}.touch-actions{bottom:calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none;width:130px;height:130px;position:absolute;right:16px}.touch-pause{bottom:calc(50px + env(safe-area-inset-bottom,0px));pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;color:#ffffff80;letter-spacing:1px;-webkit-user-select:none;user-select:none;background:#ffffff14;border:1px solid #fff3;border-radius:16px;padding:8px 18px;font-family:"Press Start 2P",monospace;font-size:7px;position:absolute;left:50%;transform:translate(-50%)}.touch-pause:active{color:var(--accent-yellow);border-color:var(--accent-yellow);background:#fff3}.touch-btn{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;color:#fff9;-webkit-user-select:none;user-select:none;background:#ffffff1a;border:2px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-family:"Press Start 2P",monospace;font-size:10px;display:flex;position:absolute}.touch-btn:active{background:#ffffff40;border-color:#ffffff80}.touch-up{top:0;left:50%;transform:translate(-50%)}.touch-down{bottom:0;left:50%;transform:translate(-50%)}.touch-left{top:50%;left:0;transform:translateY(-50%)}.touch-right{top:50%;right:0;transform:translateY(-50%)}.touch-punch{border-color:var(--accent-red);color:var(--accent-red);top:0;left:50%;transform:translate(-50%)}.touch-kick{border-color:var(--accent-blue);color:var(--accent-blue);bottom:0;left:50%;transform:translate(-50%)}.touch-block{border-color:var(--accent-cyan);color:var(--accent-cyan);top:50%;left:0;transform:translateY(-50%)}.touch-special{border-color:var(--accent-yellow);color:var(--accent-yellow);top:50%;right:0;transform:translateY(-50%)}.mobile-inst{color:var(--accent-cyan);display:none!important}@media (hover:none) and (pointer:coarse){.p1-inst,.p2-inst{display:none!important}.mobile-inst{display:block!important}#title-screen .controls-hint{display:none}#title-screen .start-btn{padding:12px 32px;font-size:11px}}