/* Final de partida: tres fases sobre fondo oscuro. Colores de la marca con respaldo por si faltan los tokens. */
.fin-ov{position:fixed;inset:0;z-index:90;background:radial-gradient(120% 90% at 50% 40%,#1a1f24 0%,#07090b 70%);color:#f2efe8;font-family:var(--body,system-ui,sans-serif);overflow:hidden;opacity:0;transition:opacity .45s ease}
.fin-ov.on{opacity:1}
.fin-ov [hidden]{display:none!important}
.fin-ov button:disabled{opacity:.45;cursor:default}
.fin-ov .btn{opacity:0;transform:translateY(14px) scale(.96);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.fin-ov .btn.show{opacity:1;transform:none}
.fin-p1,.fin-p2,.fin-p3{position:absolute;inset:0;display:flex;flex-direction:column;transition:opacity .45s ease,transform .45s ease}
.fin-p1.out,.fin-p2.out{opacity:0;transform:scale(1.02)}

/* Fase 1 */
.fin-h1{position:absolute;top:4vh;left:0;right:0;text-align:center;z-index:2;pointer-events:none;animation:finIn 1.2s ease both}
.fin-h1 small{letter-spacing:.2em;text-transform:uppercase;opacity:.7;font-size:12px}
.fin-h1 h1{margin:4px 0 0;font-size:clamp(34px,6vw,72px);letter-spacing:.06em;font-weight:800;text-shadow:0 4px 30px #000}
.fin-h1 h2{margin:6px 0 0;font-size:clamp(13px,1.6vw,18px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#d8d2c4}
/* imagen del mapa jugado: oscurecida y con un acercamiento muy lento, detrás de los personajes */
.fin-bg{position:absolute;inset:-3%;background:#0b0f12 center/cover no-repeat;filter:brightness(.42) saturate(.85) blur(1.5px);animation:finKen 22s ease-out both}
.fin-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(85% 70% at 50% 55%,transparent 0%,rgba(7,9,11,.55) 60%,#07090b 100%),linear-gradient(180deg,rgba(7,9,11,.65) 0%,transparent 30%,transparent 62%,rgba(7,9,11,.9) 100%)}
@keyframes finKen{from{transform:scale(1.08)}to{transform:scale(1)}}
.fin-gear{display:block;margin-top:2px;font-style:normal;font-size:11px;letter-spacing:.06em;opacity:.7}
.fin-gear.skin{color:#ffe29a;opacity:.9}
.fin-cvwrap{position:absolute;inset:0}
.fin-cv{width:100%;height:100%;display:block}
.fin-tags{position:absolute;inset:0;pointer-events:none;z-index:2}
.fin-tag{position:absolute;left:0;top:0;min-width:120px;text-align:center;opacity:0;transition:opacity .6s ease;will-change:transform}
.fin-tag.on{opacity:1}
.fin-tag span{display:block;font-weight:700;font-size:15px;text-shadow:0 2px 10px #000}
.fin-tag small{display:block;font-size:11px;opacity:.75;letter-spacing:.04em}
.fin-tag.tCT span{color:#8fc2ff}
.fin-tag.tT span{color:#f0c879}
.fin-tag.mvp span{font-size:17px;color:#fff3cf}
.fin-mvpb{display:inline-block;margin-bottom:4px;padding:3px 10px;border-radius:3px;background:linear-gradient(180deg,#ffe29a,#c9911f);color:#1b1407;font-size:11px;letter-spacing:.18em;box-shadow:0 0 18px rgba(242,181,68,.55)}
.fin-f1,.fin-f2,.fin-f3{position:absolute;bottom:4vh;left:0;right:0;display:flex;justify-content:center;z-index:3}

/* Fase 2 */
.fin-p2{padding:4vh 4vw 0;overflow:hidden;animation:finIn .6s ease both}
.fp2-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12)}
.fp2-head small{letter-spacing:.14em;text-transform:uppercase;opacity:.65;font-size:12px}
.fp2-head h1{margin:2px 0 0;font-size:clamp(26px,3.6vw,44px);letter-spacing:.05em}
.fp2-score{display:flex;align-items:center;gap:12px;font-size:clamp(28px,3.4vw,42px);font-weight:800}
.fp2-score small{font-size:11px;letter-spacing:.2em;opacity:.6;font-weight:600}
.fp2-score .tCT{color:#8fc2ff}.fp2-score .tT{color:#f0c879}
.fp2-body{flex:1;min-height:0;overflow:auto;padding:12px 0 90px;display:grid;gap:14px;align-content:start}
.fp2-team h3{margin:8px 0 6px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.fp2-team h3 b{font-size:18px;margin-left:6px}
.fp2-team.won h3{color:#fff3cf}
.fp2-team.won{background:linear-gradient(90deg,rgba(242,181,68,.08),transparent 60%);border-radius:6px}
.fwin{margin-left:8px;padding:2px 8px;font-size:10px;letter-spacing:.2em;border:1px solid rgba(242,181,68,.6);color:#f2b544;border-radius:2px}
.fp2-team table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.fp2-team th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;text-align:right;padding:6px 8px;font-weight:600}
.fp2-team th:nth-child(-n+2){text-align:left}
.fp2-team td{padding:9px 8px;border-top:1px solid rgba(255,255,255,.06);text-align:right;font-size:clamp(13px,1.3vw,16px)}
.fp2-team td.pos{text-align:left;opacity:.5;width:28px}
.fp2-team td.pn2{text-align:left;font-weight:700;white-space:nowrap}
.fp2-team td.num{font-weight:700}
.fp2-team tr{opacity:0;animation:finRow .5s ease forwards}
.fp2-team tr.dead td{opacity:.6}
.fp2-team tr.me td{background:rgba(255,255,255,.05)}
.fp2-team tr.mvp td{background:linear-gradient(90deg,rgba(242,181,68,.22),rgba(242,181,68,.04));color:#fff}
.fp2-team tr.mvp td.num{color:#ffe29a}
.fpic{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:10px;border-radius:50%;background:#55606b;font-size:12px;vertical-align:middle}
.fpic.tCT{background:#2f6fb3}.fpic.tT{background:#a7782a}
.fmvp{margin-left:8px;padding:1px 6px;font-size:10px;letter-spacing:.16em;background:#f2b544;color:#1b1407;border-radius:2px;vertical-align:middle}
.fp2-body .mut{opacity:.6}

/* Fase 3 */
.fp3-wrap{flex:1;display:grid;grid-template-columns:minmax(260px,1fr) minmax(260px,1.1fr);gap:4vw;align-items:center;padding:6vh 6vw 14vh;overflow:auto}
.fp3-main{position:relative}
.fp3-lvl{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.fp3-lvl small{letter-spacing:.2em;opacity:.6;font-size:12px}
.fp3-lvl .fLvl{font-size:clamp(70px,10vw,130px);font-weight:900;line-height:.9;text-shadow:0 0 30px rgba(242,181,68,.25);display:inline-block}
.fp3-lvl .fLvl.pop{animation:finPop .7s cubic-bezier(.2,.9,.3,1.4)}
.fp3-lvl .fRank{font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:#ffe29a}
.fp3-meter{margin-top:18px}
.fp3-bar{height:14px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fp3-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c9911f,#ffe29a);box-shadow:0 0 14px rgba(242,181,68,.6);transition:none}
.fp3-xp{display:flex;justify-content:space-between;margin-top:10px;font-size:14px;font-variant-numeric:tabular-nums}
.fp3-xp .fGain{color:#ffe29a;font-weight:700}
.fin-flash{margin-top:22px;font-size:clamp(20px,2.6vw,30px);font-weight:900;letter-spacing:.12em;color:#ffe29a;opacity:0;text-shadow:0 0 24px rgba(242,181,68,.7)}
.fin-flash.on{animation:finFlash 1.4s ease both}
.fp3-rw{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-content:start}
.fin-rw{position:relative;padding:14px 14px 16px;border:1px solid rgba(242,181,68,.45);border-radius:4px;background:linear-gradient(180deg,rgba(242,181,68,.12),rgba(0,0,0,.25));opacity:0;transform:translateY(12px) scale(.96);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.fin-rw small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.fin-rw b{display:block;margin:6px 0 4px;font-size:16px}
.fin-rw span{font-size:12px;opacity:.75}
.fin-rw.reveal{opacity:1;transform:none}
.fin-rw.locked{border-color:rgba(255,255,255,.14);background:rgba(0,0,0,.25);filter:grayscale(.8)}
.fin-rw.locked.in{opacity:.55;transform:none}
.fin-rw.locked::after{content:'🔒';position:absolute;top:10px;right:12px;font-size:14px;opacity:.6}

/* Animaciones compartidas */
@keyframes finIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes finRow{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes finPop{0%{transform:scale(.7);opacity:.2}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes finFlash{0%{opacity:0;transform:scale(.9)}15%{opacity:1;transform:scale(1.04)}70%{opacity:1}100%{opacity:0;transform:scale(1)}}

/* Pantallas pequeñas y panorámicas */
@media (max-width:760px){
  .fp3-wrap{grid-template-columns:1fr;gap:26px;padding:4vh 16px 14vh}
  .fp2-team th:nth-child(n+6),.fp2-team td:nth-child(n+6){display:none}
}
@media (max-height:620px){
  .fin-h1 h1{font-size:30px}
  .fp3-wrap{padding-top:3vh}
}
@media (prefers-reduced-motion:reduce){
  .fin-ov,.fin-p1,.fin-p2,.fin-p3,.fp2-team tr,.fin-rw,.fin-flash,.fp3-lvl .fLvl{animation:none!important;transition:none!important}
  .fp2-team tr{opacity:1}
}

/* ---------- v2: transiciones, sonido visual y decoración ---------- */
/* fondo del mapa en todas las fases: nítido con el equipo, más oscuro y desenfocado en tabla y progresión */
.fin-ov>.fin-bg{transition:filter 1s ease}
.fin-ov.ph2>.fin-bg,.fin-ov.ph3>.fin-bg{filter:brightness(.22) saturate(.6) blur(6px)}
.fin-grain{position:absolute;inset:0;pointer-events:none;opacity:.07;background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.fin-ov.leave{opacity:0;transition:opacity .5s ease}
/* marco táctico en las esquinas */
.fin-frame{position:absolute;inset:18px;pointer-events:none;z-index:4}
.fin-frame i{position:absolute;width:38px;height:38px;border:2px solid rgba(242,181,68,.55)}
.fin-frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.fin-frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.fin-frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.fin-frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.fin-frame::before,.fin-frame::after{content:'';position:absolute;left:50%;width:min(420px,40vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(242,181,68,.45),transparent)}
.fin-frame::before{top:0}.fin-frame::after{bottom:0}
.fin-logo{width:22px;height:22px;object-fit:contain;vertical-align:-5px;margin-right:8px;filter:drop-shadow(0 0 6px rgba(0,0,0,.8))}
.fin-h1{animation:finIn 1s ease 1.9s both}
.fin-h1 h2 .fin-logo{width:26px;height:26px}

/* introducción: fundido a negro con franjas de cine y el resultado en grande */
.fin-intro{position:absolute;inset:0;z-index:20;background:#05070a;display:grid;place-items:center;transition:background .8s ease}
.fin-intro.out{background:transparent;pointer-events:none}
.fin-bar{position:absolute;left:0;right:0;height:12vh;background:#000;transition:transform .8s cubic-bezier(.7,0,.2,1)}
.fin-bar.top{top:0}.fin-bar.bot{bottom:0}
.fin-intro.out .fin-bar.top{transform:translateY(-100%)}
.fin-intro.out .fin-bar.bot{transform:translateY(100%)}
.fin-intro-txt{text-align:center;animation:finIntro 1.9s cubic-bezier(.2,.8,.2,1) both;transition:opacity .5s ease,transform .6s ease}
.fin-intro.out .fin-intro-txt{opacity:0;transform:scale(1.08)}
.fin-intro-txt small{display:block;letter-spacing:.5em;font-size:12px;opacity:.7}
.fin-intro-txt b{display:block;font-size:clamp(48px,9vw,120px);font-weight:900;letter-spacing:.08em;line-height:1;margin:10px 0;text-shadow:0 0 40px rgba(0,0,0,.8)}
.fin-intro-txt span{font-size:clamp(22px,2.6vw,34px);font-weight:800;letter-spacing:.2em}
.fin-intro-txt span i{font-style:normal;margin:0 .5em;opacity:.5}
@keyframes finIntro{0%{opacity:0;letter-spacing:.6em;transform:scale(.94)}35%{opacity:1}100%{opacity:1;letter-spacing:.08em;transform:scale(1)}}

/* barrido dorado entre fases */
.fin-wipe{position:absolute;inset:0;z-index:15;pointer-events:none;transform:translateX(-110%) skewX(-12deg);background:linear-gradient(90deg,transparent 0,#0b0f12 12%,#0b0f12 88%,transparent 100%);box-shadow:inset 6px 0 0 rgba(242,181,68,.7),inset -6px 0 0 rgba(242,181,68,.7)}
.fin-wipe.go{animation:finWipe .85s cubic-bezier(.7,0,.3,1) both}
@keyframes finWipe{0%{transform:translateX(-120%) skewX(-12deg)}48%,52%{transform:translateX(0) skewX(-12deg)}100%{transform:translateX(120%) skewX(-12deg)}}
.fin-p2,.fin-p3{animation:finIn .7s ease both}

/* tabla: emblema del mapa, logos de facción y marca de agua del ganador */
.fp2-head{position:relative;align-items:center}
.fp2-emblem{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.7));margin-right:14px}
.fp2-head>div:not(.fp2-score){flex:1}
.fp2-score .fin-logo{width:30px;height:30px;margin:0 6px}
.fp2-mark{position:absolute;right:3vw;bottom:6vh;width:min(38vw,460px);opacity:.05;pointer-events:none;filter:grayscale(.3)}
.fp2-team h3{display:flex;align-items:center;gap:6px}
.fp2-team h3::after{content:'';flex:1;height:1px;margin-left:10px;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent)}
.fp2-team.won h3::after{background:linear-gradient(90deg,rgba(242,181,68,.5),transparent)}
.fme{margin-left:6px;padding:1px 5px;font-size:9px;letter-spacing:.14em;border:1px solid rgba(255,255,255,.35);border-radius:2px;opacity:.8}

/* progresión: insignia de rango, desglose de XP y monedas */
.fp3-top{display:flex;align-items:center;gap:22px}
.fp3-badge{width:clamp(76px,8vw,108px);aspect-ratio:1;display:grid;place-items:center;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);background:linear-gradient(160deg,#ffe29a,#8a5f14);box-shadow:0 0 30px rgba(242,181,68,.35)}
.fp3-badge b{display:grid;place-items:center;width:86%;height:86%;clip-path:inherit;background:linear-gradient(160deg,#1c1710,#0b0906);color:#ffe29a;font-size:clamp(22px,2.4vw,32px);font-weight:900;letter-spacing:.05em}
.fp3-main.lvlup .fp3-badge{animation:finGlow 1.2s ease}
@keyframes finGlow{0%,100%{box-shadow:0 0 30px rgba(242,181,68,.35)}30%{box-shadow:0 0 80px rgba(255,226,154,.95)}}
.fp3-parts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px;max-width:520px}
.fp3-parts li{display:flex;justify-content:space-between;padding:8px 12px;background:linear-gradient(90deg,rgba(255,255,255,.06),transparent);border-left:2px solid rgba(242,181,68,.6);font-size:14px;opacity:0;animation:finRow .5s ease .3s forwards}
.fp3-parts b{color:#ffe29a;font-variant-numeric:tabular-nums}
.fp3-coins{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 14px;border:1px solid rgba(242,181,68,.4);border-radius:3px;font-weight:700;color:#ffe29a;animation:finIn .6s ease 1s both}
.fp3-coins img{width:20px;height:20px}
.fp3-rw h3{grid-column:1/-1;margin:0 0 4px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.75}

/* emergente de subida de nivel: entra con rebote, rayos que giran y se retira solo */
.fin-lvpop{position:absolute;inset:0;z-index:12;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(7,9,11,.55),transparent 60%);opacity:0}
.fin-lvpop.on{animation:finPopWrap 1.3s ease both}
.fin-lvpop-card{position:relative;display:grid;justify-items:center;gap:10px;padding:30px 54px 26px;border:1px solid rgba(242,181,68,.7);border-radius:6px;background:linear-gradient(180deg,rgba(32,26,16,.96),rgba(10,9,7,.96));box-shadow:0 0 60px rgba(242,181,68,.35),0 20px 60px rgba(0,0,0,.6)}
.fin-lvpop.on .fin-lvpop-card{animation:finPopIn 1.3s cubic-bezier(.2,1.4,.3,1) both}
.fin-lvpop .fp3-badge{width:96px}
.fin-lvpop .fp3-badge b{font-size:40px}
.fPopTitle{font-size:clamp(22px,2.6vw,32px);font-weight:900;letter-spacing:.12em;color:#ffe29a;text-shadow:0 0 24px rgba(242,181,68,.7)}
.fPopSub{font-size:14px;letter-spacing:.06em;opacity:.85}
.fin-rays{position:absolute;left:50%;top:78px;width:340px;height:340px;margin:-170px 0 0 -170px;z-index:-1;border-radius:50%;background:repeating-conic-gradient(rgba(255,226,154,.22) 0 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 70%);mask:radial-gradient(circle,#000 20%,transparent 70%)}
.fin-lvpop.on .fin-rays{animation:finRays 1.3s linear both}
@keyframes finPopWrap{0%{opacity:0}12%,80%{opacity:1}100%{opacity:0}}
@keyframes finPopIn{0%{transform:scale(.4) translateY(20px);opacity:0}22%{transform:scale(1.06);opacity:1}32%{transform:scale(1)}80%{transform:scale(1);opacity:1}100%{transform:scale(.92) translateY(-10px);opacity:0}}
@keyframes finRays{from{transform:rotate(0) scale(.6);opacity:0}25%{opacity:1}to{transform:rotate(40deg) scale(1.15);opacity:0}}
@media (prefers-reduced-motion:reduce){.fin-lvpop.on .fin-lvpop-card,.fin-lvpop.on .fin-rays{animation:none}}

/* avatares en la pantalla final */
.fpic{width:34px!important;height:34px!important;border-radius:7px!important;overflow:visible;padding:0;border:0;background:transparent!important}
.fpic-img{width:100%;height:100%}
.fp2-team tr.mvp .fpic{border-color:#f2b544;box-shadow:0 0 10px rgba(242,181,68,.5)}
.fin-tag-av{width:48px;height:48px;margin:0 auto 5px;border-radius:9px;border:2px solid rgba(255,255,255,.25);box-shadow:0 6px 16px rgba(0,0,0,.6)}
.fin-tag.mvp .fin-tag-av{width:56px;height:56px;border-color:#f2b544;box-shadow:0 0 18px rgba(242,181,68,.55)}
/* tabla de estadísticas sin scroll: la altura de cada fila se adapta a la pantalla (hasta 10 jugadores) */
.fin-p2{--fr:clamp(26px,calc((100vh - 4vh - 330px) / 10),48px)}
.fp2-head{padding-bottom:8px}
.fp2-emblem{width:clamp(40px,7vh,64px);height:clamp(40px,7vh,64px)}
.fp2-body{gap:6px;padding:6px 0 calc(4vh + 64px)}
.fp2-team h3{margin:4px 0 2px}
.fp2-team th{padding:3px 8px}
.fp2-team td{padding:0 8px;height:var(--fr);font-size:clamp(12px,min(1.3vw,calc(var(--fr) * .4)),16px)}
.fpic{width:calc(var(--fr) - 8px)!important;height:calc(var(--fr) - 8px)!important;max-width:34px;max-height:34px}