:root{--bg-deep:#050b13;--bg-panel:#0e2a35;--bg-panel-2:#0a1f28;--border-soft:#1c4a5c;--cyan:#5ad1ff;--cyan-dim:#2f6fed;--azul-a:#8fb4ff;--azul-b:#1c46a8;--rojo-a:#ffb08a;--rojo-b:#b8401a;--gold:#f4c542;--gold-deep:#c98a12;--danger:#ff5d7a;--text-soft:#bfeaf5;--text-dim:#9fd6e8}*{box-sizing:border-box}body{background: repeating-linear-gradient(0deg, #5ad1ff06 0px, #5ad1ff06 1px, transparent 1px, transparent 42px), repeating-linear-gradient(90deg, #5ad1ff06 0px, #5ad1ff06 1px, transparent 1px, transparent 42px), radial-gradient(1200px 700px at 50% -10%, #5ad1ff1a, transparent 60%), radial-gradient(900px 600px at 90% 100%, #ff5d7a17, transparent 55%), linear-gradient(180deg, #030710, var(--bg-deep) 40%, #030710);color:var(--text-soft);min-height:100vh;margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow-x:hidden}.wrap{flex-direction:column;gap:16px;width:100%;max-width:900px;margin:0 auto;padding:22px 18px 48px;animation:.5s ease-out page-in;display:flex}@keyframes page-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.wrap h1{text-align:center;letter-spacing:1px;color:#eaf8ff;text-shadow:0 0 8px #5ad1ff8c,0 0 22px #5ad1ff40;margin:4px 0 2px;font-size:clamp(20px,4vw,30px);font-weight:800}.sub{text-align:center;color:var(--text-dim);font-size:13px}.logo-wrap{text-align:center;margin:4px 0}.logo-img{filter:drop-shadow(0 0 18px #5ad1ff73)drop-shadow(0 0 34px #5ad1ff2e);max-width:min(420px,82%);height:auto;margin:0 auto;animation:.6s cubic-bezier(.34,1.56,.64,1) both logo-in,3.6s ease-in-out .6s infinite logo-float;display:block}@keyframes logo-in{0%{opacity:0;transform:translateY(-18px)scale(.85)}60%{opacity:1;transform:translateY(3px)scale(1.03)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes logo-float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.logo-sub{text-align:center;color:var(--text-dim);letter-spacing:3px;text-transform:uppercase;margin:2px 0 20px;font-size:12px}.hud{border:1px solid var(--border-soft);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:linear-gradient(#0e2a35eb,#0a181feb);border-radius:14px;flex-wrap:wrap;justify-content:center;align-self:center;align-items:center;gap:10px;width:fit-content;max-width:100%;padding:8px 100px 8px 12px;display:flex;position:relative;box-shadow:0 6px 22px #00000059,inset 0 1px #ffffff0a}.badge{letter-spacing:.5px;color:#eaf8ff;white-space:nowrap;background:linear-gradient(90deg,#5ad1ff2e,#2f6fed2e);border:1px solid #5ad1ff59;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;animation:2.4s ease-in-out infinite badge-idle}@keyframes badge-idle{0%,to{box-shadow:0 0 #5ad1ff00}50%{box-shadow:0 0 14px #5ad1ff59}}.stat{flex-wrap:wrap;align-items:center;gap:4px;font-size:13px;display:flex}.stat span{transition:opacity .25s}.health-group{border:1px solid #5ad1ff6b;border-left:3px solid var(--cyan);background:#05121b9e;border-radius:7px;flex:0 160px;min-width:150px;max-width:100%;padding:5px 6px;overflow:hidden}.health-group.team-b{border-color:#ff9d3d6b #ff9d3d6b #ff9d3d6b #ff9d3d}.health-group h2{color:#a9eaff;text-transform:uppercase;margin:0 0 5px;font-size:10px;font-weight:900;line-height:1.2}.health-group.team-b h2{color:#ffc08d}.health-players{gap:4px;display:grid}.health-player{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px;min-width:0;min-height:20px;font-size:11px;display:grid}.health-player-self .health-player-name{color:#fff;font-weight:800}.health-player-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.health-player-role{color:var(--text-dim);text-transform:uppercase;white-space:nowrap;background:#ffffff14;border-radius:3px;padding:2px 4px;font-size:8px;font-weight:800}.health-lives{color:#ff6680;letter-spacing:0;text-align:right;white-space:nowrap;text-shadow:0 0 8px #ff5d7a73;min-width:0;font-size:12px}.health-lives.health-defeated{color:#9aa7ad;text-shadow:none}.push-meter{min-height:26px;color:var(--text-dim);background:#05121b7a;border:1px solid #5ad1ff33;border-radius:5px;flex:none;align-items:center;gap:4px;padding:3px 5px;display:inline-flex}.push-meter-icon{filter:saturate(.85);font-size:14px;line-height:1}.push-meter-track{background:#071923;border:1px solid #5ad1ff38;border-radius:999px;width:34px;height:5px;overflow:hidden}.push-meter-fill{border-radius:inherit;background:linear-gradient(90deg,#547885,#88aeb3);height:100%;transition:width .12s linear}.push-meter-fill.push-meter-ready{background:linear-gradient(90deg,#47c9e8,#5ad1ff);box-shadow:0 0 7px #5ad1ff8c}.push-meter-state{color:#a9dce8;text-align:right;text-transform:uppercase;min-width:18px;font-size:8px;font-weight:800}.hud .hud-pause{justify-content:center;align-items:center;min-width:40px;min-height:38px;margin:0;padding:8px 11px;font-size:14px;display:inline-flex;position:absolute;top:50%;right:10px;translate:0 -50%}.hud .hud-fullscreen{right:56px}.controls-keyboard{vertical-align:middle;grid-template-rows:repeat(2,22px);grid-template-columns:repeat(3,22px);gap:2px;margin:2px 3px;display:inline-grid}.controls-keyboard .keycap-top{grid-area:1/2}.controls-keyboard .keycap:nth-child(2){grid-area:2/1}.controls-keyboard .keycap:nth-child(3){grid-area:2/2}.controls-keyboard .keycap:nth-child(4){grid-area:2/3}.keycap{color:#eaf8ff;vertical-align:middle;white-space:nowrap;background:linear-gradient(#17414f,#0a1f28);border:1px solid #5ad1ff85;border-bottom-width:3px;border-radius:4px;justify-content:center;align-items:center;min-width:22px;height:22px;padding:0 5px;font:800 11px/1 Segoe UI,system-ui,sans-serif;display:inline-flex;box-shadow:0 2px 7px #00000047,inset 0 1px #ffffff1f}.keycap-space{min-width:66px;height:20px;font-size:9px}.btn{isolation:isolate;border:1px solid var(--border-soft);color:var(--text-soft);text-transform:uppercase;letter-spacing:1px;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);background:linear-gradient(#17414f,#0c2530);padding:11px 18px;font-size:13px;font-weight:800;transition:transform .12s,box-shadow .18s,background .18s,color .15s;position:relative;overflow:hidden}.btn:before{content:"";z-index:1;pointer-events:none;background:linear-gradient(115deg,#0000,#ffffff59,#0000);width:40%;height:100%;transition:left .5s;position:absolute;top:0;left:-60%;transform:skew(-20deg)}.btn:hover:before{left:130%}.btn:hover{background:linear-gradient(#1d4f5f,#0f303c);transform:translateY(-2px);box-shadow:0 8px 20px #5ad1ff38,inset 0 0 0 1px #5ad1ff4d}.btn:active{transform:translateY(0)scale(.97)}.btn:disabled{opacity:.55;cursor:default;box-shadow:none!important;transform:none!important}.btn:disabled:before{display:none}.bot-controls{border:1px solid var(--border-soft);background:#05121bb8;border-radius:6px;flex-wrap:wrap;align-self:center;align-items:center;gap:5px;padding:5px;display:inline-flex}.bot-controls-label{color:var(--text-dim);text-transform:uppercase;padding:0 5px;font-size:10px;font-weight:800}.btn.bot-option{clip-path:none;letter-spacing:0;border-radius:3px;padding:6px 9px;font-size:10px}.btn.bot-option-active{color:#eaf8ff;background:linear-gradient(#27677b,#124253);border-color:#5ad1ffb3;box-shadow:inset 0 0 0 1px #5ad1ff33,0 0 9px #5ad1ff26}.btn.primary{color:#04141b;background:linear-gradient(#4fc3ff,#2f6fed);border-color:#5ad1ff99;box-shadow:0 0 0 1px #5ad1ff59,0 8px 22px #2f6fed59}.btn.primary:hover{background:linear-gradient(#6fd2ff,#3f7dff);box-shadow:0 0 0 1px #5ad1ff8c,0 10px 26px #2f6fed73}.btn.team-red{color:#1c0a02;background:linear-gradient(#ff9d3d,#b8401a);border-color:#ff9d3d8c;box-shadow:0 0 0 1px #ff9d3d59,0 8px 22px #b8401a59}.btn.team-red:hover{background:linear-gradient(#ffb562,#cf4b1f);box-shadow:0 0 0 1px #ff9d3d8c,0 10px 26px #b8401a73}.btn.gold{color:#2a1c02;background:linear-gradient(#ffe27a,#c98a12);border-color:#f4c54299;box-shadow:0 0 0 1px #f4c54259,0 8px 22px #c98a1259}.btn.gold:hover{background:linear-gradient(#ffe995,#dfa01a);box-shadow:0 0 0 1px #f4c5428c,0 10px 26px #c98a1273}.game-stage{isolation:isolate;position:relative}.game-canvas{border:1px solid var(--border-soft);background:radial-gradient(120% 90% at 50% 0,#0e3543,#04141b 75%);border-radius:16px;width:100%;height:auto;display:block;box-shadow:0 12px 40px #0000008c,0 0 0 1px #5ad1ff0f,inset 0 0 60px #00000059}.toast{color:#eaf8ff;letter-spacing:.2px;opacity:0;pointer-events:none;z-index:5;background:linear-gradient(#0e2a35f5,#08141af5);border:1px solid #5ad1ff66;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;transition:opacity .18s,transform .18s;position:absolute;top:10px;left:50%;transform:translate(-50%,-14px);box-shadow:0 6px 20px #0006}.toast.show{opacity:1;animation:.22s cubic-bezier(.34,1.56,.64,1) toast-pop;transform:translate(-50%)}.inactivity-alerts{z-index:8;pointer-events:none;gap:5px;width:min(420px,100% - 24px);display:grid;position:absolute;top:48px;left:50%;transform:translate(-50%)}.inactivity-alert{color:#ffe0a0;text-align:center;text-shadow:0 1px 5px #000c;background:#1f170bf0;border:1px solid #ffbe4ab8;border-left:3px solid #ffbd4a;border-radius:5px;padding:7px 11px;font-size:12px;font-weight:800;line-height:1.25;animation:.22s ease-out inactivity-in;box-shadow:0 5px 18px #0006,0 0 14px #ffbd4a2e}@keyframes inactivity-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-pop{0%{transform:translate(-50%,-10px)scale(.9)}60%{transform:translate(-50%,2px)scale(1.03)}to{transform:translate(-50%)scale(1)}}.round-message{text-align:center;color:var(--gold);text-shadow:0 0 16px #f4c5428c;font-size:clamp(18px,3.4vw,26px);font-weight:900;animation:.5s cubic-bezier(.34,1.56,.64,1) round-banner}@keyframes round-banner{0%{opacity:0;transform:scale(.7)translateY(8px)}60%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.clash-panels{z-index:6;pointer-events:none;position:absolute;inset:0}.clash-panel{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:linear-gradient(150deg,#0c222df5,#050e17f0);border:1px solid #f4c542c7;border-radius:7px;width:min(180px,100% - 24px);padding:6px 8px 7px;animation:.24s cubic-bezier(.2,.85,.25,1.2) qte-pop;position:absolute;transform:translateY(-50%);box-shadow:0 0 0 1px #5ad1ff29,0 5px 16px #00000094,0 0 14px #f4c54229}@keyframes qte-pop{0%{opacity:0;transform:translateY(-50%)scale(.78)}72%{opacity:1;transform:translateY(-50%)scale(1.04)}to{opacity:1;transform:translateY(-50%)scale(1)}}.panel-label{color:#d9f5ff;text-align:center;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;letter-spacing:.5px;text-shadow:0 0 8px #5ad1ff8c;margin-bottom:4px;font-size:9px;font-weight:800;overflow:hidden}.tug-wrap{background:#0a1f28;border:1px solid #ffffff0f;border-radius:999px;height:8px;position:relative;overflow:hidden}.tug-mid{z-index:2;background:#ffffff59;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-1px)}.tug-fill{background:linear-gradient(90deg, var(--rojo-b), var(--rojo-a), var(--azul-a), var(--azul-b));background-size:260% 100%;border-radius:999px;transition:width 80ms linear,left 80ms linear;position:absolute;top:0;bottom:0;box-shadow:0 0 10px #5ad1ff40}.prompt-text{letter-spacing:0;text-align:center;color:#fff3b0;-webkit-text-stroke:.4px #fffc;text-shadow:0 0 6px #f4c542e6,0 0 14px #ff9d3d73;min-height:18px;margin-top:4px;font-size:18px;font-weight:1000;line-height:1;animation:.62s ease-in-out infinite prompt-pulse}@keyframes prompt-pulse{0%,to{opacity:.88;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}.timing-track{background:#0a1f28;border:1px solid #ffffff14;border-radius:999px;height:6px;margin-top:3px;overflow:visible}.hit-line{background:linear-gradient(180deg, #fff, var(--cyan), var(--cyan-dim));z-index:2;border-radius:3px;width:4px;position:absolute;top:-2px;bottom:-2px;transform:translate(-50%);box-shadow:0 0 8px 2px #5ad1ffb3}.hit-line.perfect-flash{animation:.3s ease-out hit-flash}@keyframes hit-flash{0%{transform:translate(-50%)scaleY(1);box-shadow:0 0 6px 2px #5ad1ffb3}40%{transform:translate(-50%)scaleY(1.6);box-shadow:0 0 26px 10px #fffffff2}to{transform:translate(-50%)scaleY(1);box-shadow:0 0 6px 2px #5ad1ffb3}}.remate-line.perfect-flash{animation:.3s ease-out remate-flash}@keyframes remate-flash{0%{filter:brightness()}40%{filter:brightness(2.4)saturate(1.4);box-shadow:0 0 22px 8px #f4c542,0 0 4px #fff}to{filter:brightness()}}.remate-line{animation:1.1s ease-in-out infinite remate-shimmer}@keyframes remate-shimmer{0%,to{box-shadow:0 0 10px 2px #f4c542d9,0 0 2px #ffffffe6}50%{box-shadow:0 0 16px 5px #f4c542,0 0 4px #fff}}.timing-marker{z-index:3;background:#fff;border-radius:2px;width:3px;position:absolute;top:-5px;bottom:-5px;transform:translate(-50%);box-shadow:0 0 6px #ffffffe6}@media (max-width:520px){.clash-panel{padding:5px 7px 6px}.prompt-text{min-height:17px;font-size:17px}}.panel{border:1px solid var(--border-soft);background:linear-gradient(#0e2a35e6,#08141ae6);border-radius:14px;flex-direction:column;gap:10px;padding:18px 20px;animation:.35s ease-out panel-in;display:flex;position:relative;box-shadow:0 8px 24px #00000059}.panel:before,.panel:after{content:"";border:2px solid var(--cyan);opacity:.55;pointer-events:none;width:18px;height:18px;position:absolute}.panel:before{border-bottom:none;border-right:none;border-radius:6px 0 0;top:-1px;left:-1px}.panel:after{border-top:none;border-left:none;border-radius:0 0 6px;bottom:-1px;right:-1px}.panel h2{color:#eaf8ff;letter-spacing:.6px;text-transform:uppercase;margin:0;font-size:15px}.panel input{border:1px solid var(--border-soft);color:var(--text-soft);background:#0a1f28;border-radius:8px;outline:none;padding:10px 12px;font-size:14px;transition:border-color .15s,box-shadow .15s}.panel input::placeholder{color:#bfeaf566}.panel input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #5ad1ff26}.error{color:var(--danger);font-size:13px;font-weight:600}.join-form{gap:8px;display:flex}.join-form input{flex:1}code{color:var(--cyan);background:#ffffff0f;border-radius:4px;padding:1px 6px;font-size:12px}.site-footer{color:var(--text-dim);border-top:1px solid #ffffff12;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:22px;padding-top:14px;font-size:12px;display:flex}.footer-link{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;-webkit-text-decoration:underline #9fd6e866;text-decoration:underline #9fd6e866;transition:color .15s}.footer-link:hover{color:var(--cyan)}.footer-dot{opacity:.4}.footer-credit b{color:var(--gold);font-weight:700}.modal-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:50;background:#030710bf;justify-content:center;align-items:center;padding:20px;animation:.18s ease-out fade-in;display:flex;position:fixed;inset:0}.modal-panel{background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));border:1px solid var(--border-soft);border-radius:14px;width:100%;max-width:520px;max-height:80vh;padding:22px 24px;animation:.25s cubic-bezier(.34,1.56,.64,1) modal-in;overflow-y:auto;box-shadow:0 20px 60px #0000008c}.modal-panel h2{color:var(--gold);margin:0 0 4px;font-size:17px}.modal-body{color:var(--text-soft);font-size:13px;line-height:1.65}.modal-body h3{color:#eaf8ff;margin:14px 0 4px;font-size:13px}.modal-panel .btn{width:100%;margin-top:16px}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:scale(.92)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}@media (max-width:560px){.wrap{gap:12px;padding:14px 10px 36px}.hud{gap:8px;padding:8px 88px 8px 10px}.stat{font-size:12px}.health-group{flex-basis:calc(50% - 4px);min-width:140px;padding:5px 6px}.health-player{grid-template-columns:minmax(0,1fr) auto auto;gap:4px;font-size:11px}.health-player-role{padding:2px 4px;font-size:8px}.health-lives{min-width:0;font-size:12px}.push-meter{gap:4px;padding:4px 6px}.push-meter-track{width:32px}.hud .hud-pause{min-width:38px;min-height:36px;padding:7px 10px}.hud .hud-fullscreen{right:50px}.btn{padding:10px 14px;font-size:12px}}@media (max-width:430px){.hud{flex-direction:column;align-items:stretch;gap:6px;width:100%;max-width:100%;padding:10px 54px 10px 10px}.hud>div:first-child{align-self:center}.health-group{flex-basis:auto;width:100%;min-width:0}.health-player{grid-template-columns:minmax(0,1fr) auto auto}.health-player-role{display:none}.push-meter{justify-content:center;width:100%}.push-meter-track{width:60px}.hud .hud-pause,.hud .hud-fullscreen{min-width:36px;min-height:36px;padding:6px 9px;font-size:13px;top:8px;right:8px;translate:none}.hud .hud-fullscreen{top:50px;right:8px}}