*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent}body{font-family:'Arial Narrow',Impact,Arial,sans-serif}#stage{position:absolute;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;color:#fff;opacity:1;transition:opacity .45s;--left:#fa3745;--right:#40b5ff;--gold:#ffe296;--duration:1.8s}#stage.is-hidden{opacity:0}.arena{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 25%,#303342 0%,#121421 40%,#05070c 80%);overflow:hidden}.arena #background-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}.custom-dim{position:absolute;inset:0;display:none;background:#000}.arena.has-custom #background-image,.arena.has-custom .custom-dim{display:block}.arena.has-custom .arena-grid,.arena.has-custom .crowd,.arena.has-custom .roof,.arena.has-custom .ring,.arena.has-custom .spotlights{display:none}.arena.transparent{display:none}.haze{position:absolute;top:160px;width:1040px;height:850px;filter:blur(38px);opacity:.55;animation:haze 11s ease-in-out infinite alternate}.red-haze{left:-420px;background:radial-gradient(ellipse,#881c28aa,transparent 65%)}.blue-haze{right:-420px;background:radial-gradient(ellipse,#115a98aa,transparent 65%);animation-delay:-5s}.arena-grid{position:absolute;inset:0;opacity:.12;background:repeating-linear-gradient(90deg,transparent 0 94px,#687a9830 95px 96px),repeating-linear-gradient(0deg,transparent 0 95px,#74849a30 96px 97px);mask-image:linear-gradient(#000,transparent)}.roof{position:absolute;left:-10%;top:50px;width:120%;height:90px;background:repeating-linear-gradient(45deg,transparent 0 75px,#1b1f2a 76px 90px,transparent 91px 150px),repeating-linear-gradient(-45deg,transparent 0 75px,#1e222e 76px 90px,transparent 91px 150px);border-top:6px solid #343b4b;border-bottom:5px solid #343b4b;transform:perspective(600px) rotateX(-25deg)}.beam{position:absolute;top:96px;width:480px;height:1000px;clip-path:polygon(49% 0,51% 0,100% 100%,0 100%);background:linear-gradient(#d8efff70,#b8d6fb03);mix-blend-mode:screen;transform-origin:50% 0;filter:blur(12px);opacity:.25;animation:sweep 15s ease-in-out infinite alternate}.beam1{left:40px;transform:rotate(-30deg)}.beam2{right:10px;animation-delay:-7s;transform:rotate(30deg)}.beam3{left:370px;animation-delay:-3s;background:linear-gradient(#ffaf8460,#ff435600)}.beam4{right:300px;animation-delay:-11s;background:linear-gradient(#4abaff70,#1548ff00)}.spotlights{position:absolute;left:120px;right:120px;top:106px;height:18px;background:radial-gradient(circle,#edf5ff 0 3px,#ffffff80 4px 6px,transparent 12px) 0 0/130px 18px;filter:drop-shadow(0 0 14px #bed3ff)}.crowd{position:absolute;left:-50px;right:-50px;bottom:400px;height:130px;background:radial-gradient(ellipse at 50% 100%,#010207 0 38%,transparent 41%) 0 0/38px 42px,radial-gradient(circle,#020309 0 35%,transparent 40%) 10px 14px/44px 45px;opacity:.85;mask-image:linear-gradient(transparent,#000)}.ring{position:absolute;left:-10%;right:-10%;top:650px;height:350px;opacity:.65;transform:perspective(900px) rotateX(15deg)}.rope{position:absolute;left:0;right:0;height:6px;background:linear-gradient(90deg,#8b323b,#798596,#2581b4);box-shadow:0 2px 4px #000}.rope1{top:0}.rope2{top:70px}.rope3{top:140px}.ring-floor{position:absolute;left:0;right:0;top:215px;height:350px;background:repeating-linear-gradient(90deg,transparent 0 140px,#b8bdcf13 141px 143px),repeating-linear-gradient(0deg,transparent 0 120px,#bdc4d312 121px 123px),linear-gradient(#262b37,#090c14);transform:perspective(500px) rotateX(50deg);transform-origin:50% 0;border-top:12px solid #3e4558}.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 25%,#0006 75%,#000b)}.edge{position:absolute;width:14px;top:210px;bottom:160px;background:var(--left);box-shadow:0 0 40px var(--left);transform:skewY(-25deg)}.edge-left{left:0}.edge-right{right:0;background:var(--right);box-shadow:0 0 40px var(--right)}.diagonal-divider{position:absolute;top:185px;left:956px;width:2px;height:700px;transform:rotate(13deg);background:linear-gradient(transparent,#fff5,transparent);opacity:.5}.heading{position:absolute;top:30px;left:120px;right:120px;text-align:center;z-index:6}.game-label{font-family:Arial,sans-serif;font-size:24px;font-weight:800;letter-spacing:4px;color:#e0e6f2;display:flex;justify-content:center;align-items:center;gap:14px}.game-label b{font-size:36px;font-style:italic;color:var(--gold)}.game-label span{color:#acb5c6;font-size:19px;font-weight:400;border-left:1px solid #667085;padding-left:18px;letter-spacing:6px}h1{font-size:64px;line-height:1.05;letter-spacing:4px;margin:8px 0;color:#fff;max-height:135px;text-shadow:0 4px 0 #10131f,0 0 32px #000;font-family:Impact,'Arial Narrow',sans-serif;font-weight:400}header p{font-size:24px;letter-spacing:4px;color:#d4d9e3;font-family:Arial,sans-serif;font-weight:700;margin:9px 0}.side{position:absolute;inset:0;--accent:var(--left);pointer-events:none}.right-side{--accent:var(--right)}.character-enter{position:absolute;left:-35px;top:200px;width:540px;height:665px;z-index:1;transform-origin:50% 80%}.right-side .character-enter{left:auto;right:-35px}.character-image{width:100%;height:100%;object-fit:contain;object-position:50% 0;opacity:.88;filter:drop-shadow(0 0 20px #000a);mask-image:linear-gradient(#000 0 78%,transparent 100%)}.character-label{position:absolute;left:60px;top:266px;z-index:2;transform:rotate(-90deg);transform-origin:0 100%;color:#ffffff90;font-size:28px;letter-spacing:5px;font-family:Arial,sans-serif;font-weight:800}.right-side .character-label{left:auto;right:27px;transform:rotate(90deg);transform-origin:100% 100%}.photo-enter{position:absolute;left:275px;top:255px;width:535px;height:570px;z-index:3;transform-origin:50% 100%}.right-side .photo-enter{left:auto;right:275px}.player-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;filter:drop-shadow(0 0 9px #000a);mask-image:linear-gradient(transparent,#000 4% 80%,transparent 100%);mask-composite:intersect}.photo-aura{position:absolute;inset:-35px;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--accent) 33%,transparent),transparent 65%);filter:blur(20px);z-index:-1;animation:aura 7s ease-in-out infinite alternate}.vs-center{position:absolute;top:340px;left:795px;width:330px;text-align:center;z-index:5}.versus{font:italic 238px/.98 Impact,'Arial Narrow',sans-serif;letter-spacing:-8px;color:#ffe69e;-webkit-text-stroke:2px #795322;text-shadow:1px 1px #fff3c7,3px 3px #9b6925,6px 6px #9b6925,9px 9px #684620,12px 12px #2b1c0b,0 0 50px #ffc86550;filter:drop-shadow(0 14px 9px #0008)}.ft{display:inline-block;font:48px/1.05 Impact,'Arial Narrow',sans-serif;margin:30px 0 0;color:#fff5d1;letter-spacing:5px;padding:10px 27px;background:linear-gradient(90deg,transparent,#171b27e8 18% 82%,transparent);border-top:2px solid #bba064;border-bottom:2px solid #bba064;max-width:340px;overflow-wrap:anywhere}.match-tag{font:16px Arial,sans-serif;letter-spacing:7px;color:#b0b7c5;margin-top:23px}.orbit{position:absolute;left:-30px;top:-58px;width:390px;height:390px;border:1px solid #d6b46644;border-radius:50%;transform:rotateX(55deg);z-index:-1;box-shadow:0 0 45px #faaf3212}.orbit1{animation:orbit 20s linear infinite}.orbit2{width:330px;height:330px;left:0;top:-25px;border-style:dashed;animation:orbit 30s linear infinite reverse;opacity:.6}.player-card{position:absolute;left:65px;top:790px;width:750px;min-height:230px;max-height:250px;padding:14px 27px 13px;z-index:7;background:linear-gradient(115deg,#111722f8 0 65%,#290f1ef0);border-top:3px solid var(--left);box-shadow:0 15px 30px #0007,inset 0 1px 0 #ffffff1a;clip-path:polygon(0 0,96% 0,100% 24px,100% 100%,0 100%)}.card-right{left:auto;right:65px;background:linear-gradient(245deg,#111722f8 0 65%,#09263cf0);border-top-color:var(--right);clip-path:polygon(4% 0,100% 0,100% 100%,0 100%,0 24px)}.team{font:700 20px Arial,sans-serif;letter-spacing:4px;color:#e4bd73;white-space:nowrap;overflow:hidden}.name{font:58px/1.07 Impact,'Arial Narrow',sans-serif;letter-spacing:1px;margin:6px 0 10px;white-space:nowrap;max-width:100%;text-shadow:0 3px #000}.identity{display:flex;align-items:center;gap:17px;font-family:Arial,sans-serif}.flag{width:86px;height:57px;object-fit:cover;border:2px solid #c6cad25e;box-shadow:0 2px 7px #0005;flex-shrink:0}.geo{flex:1;min-width:0}.country{font:700 24px/1.1 Arial,sans-serif;color:#f1f3f8}.locality{font:23px/1.25 Arial,sans-serif;color:#c3ccdc;margin-top:5px;overflow-wrap:anywhere}.age-box{border-left:1px solid #68738378;padding-left:17px;text-align:center;width:108px;flex-shrink:0}.age-box span{font:14px Arial,sans-serif;letter-spacing:2px;color:#aeb8ca;display:block}.age-box b{font:34px Arial,sans-serif;display:block;margin-top:2px}.card-bottom{display:flex;align-items:center;gap:15px;justify-content:space-between;border-top:1px solid #9aa2b021;margin-top:12px;padding-top:9px;font-family:Arial,sans-serif;min-height:27px}.description{font-size:18px;color:#c7cfdd;line-height:1.15;overflow-wrap:anywhere;flex:1}.statistics{font-size:18px;color:#ffe6ac;white-space:nowrap}.statistics:empty{display:none}footer{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:22px;color:#d3d9e5;font:700 18px Arial,sans-serif;letter-spacing:5px;white-space:nowrap;z-index:7}.footer-line{width:220px;height:1px;background:linear-gradient(90deg,transparent,#75839a)}.footer-line:last-child{transform:rotate(180deg)}#particles{position:absolute;inset:0;z-index:8;pointer-events:none}#impact-flash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 47%,#fff5c3,transparent 70%);opacity:0;z-index:9;pointer-events:none}#impact-ring{position:absolute;width:140px;height:140px;border:4px solid #ffde97;border-radius:50%;top:460px;left:890px;opacity:0;z-index:9;pointer-events:none}.impact #impact-flash{animation:flash .25s ease-out}.impact #impact-ring{animation:shock .6s ease-out}.enter .left-side .character-enter,.enter .left-side .character-label{animation:slide-left var(--duration) cubic-bezier(.08,.78,.12,1) both}.enter .right-side .character-enter,.enter .right-side .character-label{animation:slide-right var(--duration) cubic-bezier(.08,.78,.12,1) both}.enter .left-side .photo-enter{animation:slide-left var(--duration) cubic-bezier(.08,.82,.14,1) .1s both}.enter .right-side .photo-enter{animation:slide-right var(--duration) cubic-bezier(.08,.82,.14,1) .1s both}.enter .player-card{animation:card-in .65s ease-out .35s both}.enter .versus{animation:vs-impact .85s cubic-bezier(.1,.75,.2,1) .28s both}.no-effects .beam,.no-effects .haze,.no-effects .orbit,.no-effects .photo-aura{animation:none}.no-effects #particles{display:none}img[src=""],img:not([src]){visibility:hidden}
@keyframes slide-left{from{transform:translateX(-1150px);opacity:0}10%{opacity:1}to{transform:translateX(0);opacity:1}}@keyframes slide-right{from{transform:translateX(1150px);opacity:0}10%{opacity:1}to{transform:translateX(0);opacity:1}}@keyframes card-in{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes vs-impact{from{transform:scale(2.4);opacity:0}40%{opacity:1}to{transform:scale(1);opacity:1}}@keyframes flash{0%{opacity:.75}100%{opacity:0}}@keyframes shock{0%{opacity:.8;transform:scale(.2)}100%{opacity:0;transform:scale(6)}}@keyframes haze{to{transform:translate(70px,-60px);opacity:.8}}@keyframes sweep{from{transform:rotate(-25deg)}to{transform:rotate(25deg)}}@keyframes aura{to{opacity:.5;transform:scale(1.07)}}@keyframes orbit{to{transform:rotateX(55deg) rotateZ(360deg)}}
.character-transform,.character-clip{position:relative;width:100%;height:100%;transform-origin:50% 60%}.character-clip{overflow:hidden}.character-clip.sprite-left .character-image,.character-clip.sprite-right .character-image{position:absolute;width:200%;height:auto;max-width:none;left:0;top:0;object-fit:initial}.character-clip.sprite-right .character-image{left:-100%}
[hidden]{display:none!important}
.arena{background:#070a12 url('/demo/vs/assets/arena.png') center/cover no-repeat}.arena:not(.has-custom) .roof,.arena:not(.has-custom) .crowd,.arena:not(.has-custom) .ring,.arena:not(.has-custom) .spotlights{display:none}.arena:not(.has-custom) .arena-grid{opacity:.04}
@font-face{font-family:SF6Display;src:url('/demo/vs/fonts/display-ext.woff2') format('woff2');font-weight:400;font-style:normal;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:SF6Display;src:url('/demo/vs/fonts/display.woff2') format('woff2');font-weight:400;font-style:normal;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}h1,.name,.ft{font-family:SF6Display,Impact,sans-serif}.versus{font-family:SF6Display,Impact,sans-serif;font-size:280px;letter-spacing:-2px}.character-label{left:70px;top:710px;transform:none;transform-origin:center;font-family:SF6Display,Impact,sans-serif;font-size:38px;color:#e5cf9d;letter-spacing:3px;text-shadow:0 2px 5px #000}.right-side .character-label{right:70px;left:auto;top:710px;transform:none;transform-origin:center}.character-enter{top:205px;left:-5px;width:530px}.right-side .character-enter{right:-5px;left:auto}
/* Entrada de textos desde su propio centro, con frenado gradual. */
.heading,.ft{transform-origin:50% 50%}
.enter .heading{animation:center-text var(--duration) cubic-bezier(.08,.82,.14,1) both}
.enter .ft{animation:center-text var(--duration) cubic-bezier(.08,.82,.14,1) .18s both}
@keyframes center-text{from{transform:scale(.18);opacity:0}12%{opacity:1}to{transform:scale(1);opacity:1}}
/* Datos más grandes; las tarjetas crecen hacia arriba para conservar el pie. */
.player-card{top:auto;bottom:40px;left:45px;width:790px;min-height:295px;max-height:330px;padding:15px 27px}
.card-right{left:auto;right:45px}
.country{font-size:30px;line-height:1.12;color:#fff}
.locality{font-size:32px;line-height:1.12;color:#edf2fa;margin-top:7px}
.age-box{width:110px}.age-box span{font-size:18px;color:#dbe3f1}.age-box b{font-size:40px}
.card-bottom{display:block;margin-top:12px;padding-top:11px;border-top-color:#9aa2b055}
.description{display:block;font-size:24px;line-height:1.15;color:#edf2fa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.description:empty{display:none}
.statistics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;white-space:normal;width:100%;min-height:38px}
.description:not(:empty)+.statistics{margin-top:7px}
.stat-item{display:flex;align-items:baseline;gap:9px;min-width:0}
.stat-label{color:#ffe4a2;font:700 26px/1.2 Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.stat-value{color:#fff;font:700 30px/1.2 Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;flex-shrink:0}
.character-label,.right-side .character-label{top:655px}
/* Emblema plateado de la referencia; conserva la animación vs-impact. */
.versus{width:330px;height:274.4px;background:var(--vs-art) center/contain no-repeat;font-size:0;color:transparent;-webkit-text-stroke:0;text-shadow:none;filter:drop-shadow(0 12px 8px #0009)}
/* VS central aproximadamente un 40 % más grande, manteniendo su centro. */
.vs-center{top:287.2px}
.versus{width:450px;height:380px;margin-left:-60px}
.orbit1{top:-5.2px}.orbit2{top:27.8px}
/* Metal claro con capas de relieve nítidas, sin filtros ni sombras difuminadas. */
@font-face{font-family:SF6MetalSharp;src:url('/demo/vs/fonts/title-sharp-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:SF6MetalSharp;src:url('/demo/vs/fonts/title-sharp.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.heading .metal-title{position:relative;display:grid;font-family:SF6MetalSharp,'Arial Black',Arial,sans-serif;font-weight:400;font-style:normal;line-height:1.15;text-transform:uppercase;letter-spacing:2px;transform:skewX(-11deg);transform-origin:center;max-height:none;text-shadow:none;filter:none;color:#edf2fa}
.heading h1.metal-title{font-size:78px;margin:8px 0 7px}
.heading p.metal-title{font-size:40px;margin:5px 0 0;letter-spacing:1.5px}
.metal-title>span{grid-area:1/1;min-width:0;font:inherit;letter-spacing:inherit;white-space:nowrap;filter:none}
.metal-title .metal-extrusion{z-index:0;color:#172232;-webkit-text-stroke:2px #080d14;text-shadow:1px 1px 0 #8995a5,2px 2px 0 #273446,3px 3px 0 #172232,4px 4px 0 #080d14;transform:translateY(1px)}
.metal-title .metal-ink{z-index:1;color:#f0f4fa;background:linear-gradient(180deg,#fff 0%,#eef3fa 40%,#b1becf 44%,#f8fbff 48%,#fff 57%,#dbe3ee 82%,#a4b3c6 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.6px #708098;paint-order:stroke fill;text-shadow:none}
/* Impacto localizado en el emblema; la luz no cubre títulos ni fichas. */
#impact-flash,#impact-ring{display:none}

#impact-atmosphere{position:absolute;inset:0;z-index:2;pointer-events:none}.no-effects #impact-atmosphere{display:none}

/* Emblema original sin la capa de brillo rectangular enmascarada. */
#stage{--vs-art:url('/demo/vs/assets/vs-metal.png')}
.versus::after{content:none!important;display:none!important}