/* Presentación de partida (carga) y presentación breve al aparecer */
#matchIntro{position:fixed;inset:0;z-index:95;overflow:hidden;background:#05080b;color:#f1ece2;font-family:var(--body,system-ui,sans-serif)}
#matchIntro[hidden]{display:none}
.mi{--t:#ff8a3d;--ct:#4aa3ff}
.mi-bg{position:absolute;inset:-4%;background:#0b0f12 var(--bg) center/cover no-repeat;filter:brightness(.55) saturate(1.05);opacity:1;transform:scale(1.08);transition:transform 9s ease-out}   /* visible desde el primer fotograma: sin pantallazo negro */
.mi.in .mi-bg{transform:scale(1.02)}
.mi-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,#0b0602e6 0%,#0b060270 24%,transparent 42%,transparent 58%,#02070d70 76%,#02070de6 100%),
  radial-gradient(ellipse at 50% 40%,transparent 30%,#03060acc 100%),linear-gradient(0deg,#03060af2 0%,transparent 32%)}
.mi-shade::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 4px);opacity:.4}
.mi-dust i{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:#ffd9a6;opacity:0;filter:blur(.5px);animation:miDust 9s linear infinite}
.mi-dust i:nth-child(odd){width:2px;height:2px}
.mi-dust i:nth-child(1){left:6%;animation-delay:0s}.mi-dust i:nth-child(2){left:14%;animation-delay:2.1s}.mi-dust i:nth-child(3){left:23%;animation-delay:4.3s}.mi-dust i:nth-child(4){left:31%;animation-delay:1.2s}
.mi-dust i:nth-child(5){left:39%;animation-delay:6s}.mi-dust i:nth-child(6){left:47%;animation-delay:3.3s}.mi-dust i:nth-child(7){left:55%;animation-delay:7.4s}.mi-dust i:nth-child(8){left:62%;animation-delay:.7s}
.mi-dust i:nth-child(9){left:70%;animation-delay:5.1s}.mi-dust i:nth-child(10){left:77%;animation-delay:2.8s}.mi-dust i:nth-child(11){left:84%;animation-delay:6.6s}.mi-dust i:nth-child(12){left:91%;animation-delay:1.7s}
.mi-dust i:nth-child(13){left:96%;animation-delay:4.8s}.mi-dust i:nth-child(14){left:3%;animation-delay:8s}
@keyframes miDust{0%{opacity:0;transform:translate(0,0)}15%{opacity:.5}100%{opacity:0;transform:translate(60px,-70vh)}}

/* cabecera */
.mi-top{position:absolute;left:4vw;right:4vw;top:4vh;display:flex;justify-content:space-between;align-items:flex-start;z-index:2}
.mi-brand{height:clamp(46px,8vh,84px);width:auto;filter:drop-shadow(0 6px 16px #000c);opacity:0;transform:translateY(-10px);transition:opacity .6s .35s,transform .6s .35s}
.mi.in .mi-brand{opacity:1;transform:none}
.mi-myrank{display:flex;align-items:center;gap:12px;text-align:right;opacity:0;transition:opacity .6s .5s}
.mi.in .mi-myrank{opacity:1}
.mi-myrank img{width:clamp(48px,7vh,70px);height:auto;filter:drop-shadow(0 4px 10px #000)}
.mi-myrank small{display:block;font:700 10px var(--title);letter-spacing:.22em;text-transform:uppercase;color:#cdb98e}
.mi-myrank b{display:block;font:800 clamp(16px,1.6vw,22px) var(--title);letter-spacing:.04em;text-transform:uppercase}
.mi-myrank span{color:#aab4bb;font:700 13px var(--num)}

/* centro: mapa y modo */
.mi-center{position:absolute;left:50%;top:7vh;transform:translateX(-50%);width:min(560px,40vw);display:grid;justify-items:center;text-align:center;z-index:2}
.mi-center>*{opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s}
.mi.in .mi-center>*{opacity:1;transform:none}
.mi.in .mi-center>:nth-child(1){transition-delay:.6s}.mi.in .mi-center>:nth-child(2){transition-delay:.68s}.mi.in .mi-center>:nth-child(3){transition-delay:.8s}
.mi.in .mi-center>:nth-child(4){transition-delay:.9s}.mi.in .mi-center>:nth-child(5){transition-delay:.95s}.mi.in .mi-center>:nth-child(6),.mi.in .mi-center>:nth-child(7){transition-delay:1.05s}
.mi-k{font:700 11px var(--title);letter-spacing:.38em;text-transform:uppercase;color:#d8cdb5}
.mi-center h1{margin:2px 0 6px;font:900 italic clamp(40px,5.6vw,86px)/.95 var(--title);letter-spacing:.02em;text-transform:uppercase;text-shadow:0 6px 30px #000,0 0 40px #ff9a4a33}
.mi-emb{width:clamp(34px,5vh,52px);height:auto;margin:2px 0 6px;filter:drop-shadow(0 0 12px #f2b54488)}
.mi-dia{display:block;width:16px;height:16px;margin:6px 0 10px;border:2px solid #f2b544;transform:rotate(45deg);box-shadow:0 0 14px #f2b544aa}
.mi-center h2{margin:2px 0 4px;font:800 clamp(16px,1.6vw,22px) var(--title);letter-spacing:.12em;text-transform:uppercase}
.mi-format{margin:4px 0 0;color:#cfd6db;font-size:13px}
.mi-obj{margin:8px 0 0;padding:6px 12px;border-top:1px solid #ffffff22;color:#e6dcc4;font-size:13px;max-width:460px}

/* equipos enfrentados */
.mi-teams{position:absolute;left:3vw;right:3vw;top:clamp(170px,27vh,260px);bottom:clamp(120px,17vh,160px);display:flex;justify-content:space-between;gap:20px;z-index:2;pointer-events:none}
.mi-gap{flex:1}
.mi-team{width:clamp(300px,27vw,440px);display:flex;flex-direction:column;min-height:0;opacity:0;transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.2,1)}
.mi-team.tT{transform:translateX(-60px)}.mi-team.tCT{transform:translateX(60px)}
.mi.has-teams .mi-team{opacity:1;transform:none}
.mi-team header{display:flex;align-items:center;gap:12px;padding:0 4px 10px;border-bottom:2px solid var(--tc)}
.mi-team.tT{--tc:var(--t)}.mi-team.tCT{--tc:var(--ct)}.mi-team.ffa{--tc:#f2b544;width:min(920px,80vw);margin:0 auto}
.mi-team.tCT header{flex-direction:row-reverse;text-align:right}
.mi-team header img{width:38px;height:38px;filter:drop-shadow(0 0 10px var(--tc))}
.mi-team header b{display:block;font:800 clamp(16px,1.5vw,21px) var(--title);letter-spacing:.06em;text-transform:uppercase;color:var(--tc)}
.mi-team header small{font:700 10.5px var(--title);letter-spacing:.16em;text-transform:uppercase;color:#aab4bb}
.mi-team ol{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:clamp(4px,.9vh,10px);grid-auto-rows:clamp(46px,7.4vh,72px);align-content:start;flex:1;min-height:0}
.mi-team.ffa ol{grid-template-columns:repeat(2,minmax(0,1fr))}
.mi-pl{position:relative;display:flex;align-items:center;gap:12px;min-height:0;max-height:76px;padding:6px 12px 6px 6px;border-radius:4px;overflow:hidden;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 22%,#0a0f14e6),#0a0f14b8 70%,#0a0f1480);border-left:3px solid var(--tc);
  opacity:0;transform:translateX(-28px);transition:opacity .45s,transform .5s cubic-bezier(.2,.9,.2,1);transition-delay:calc(.25s + var(--i)*.12s)}
.mi-team.tCT .mi-pl{flex-direction:row-reverse;text-align:right;padding:6px 6px 6px 12px;border-left:0;border-right:3px solid var(--tc);transform:translateX(28px);
  background:linear-gradient(270deg,color-mix(in srgb,var(--tc) 22%,#0a0f14e6),#0a0f14b8 70%,#0a0f1480)}
.mi.has-teams .mi-pl{opacity:1;transform:none}
.mi-pl.me{box-shadow:inset 0 0 0 1px #f2c86a,0 0 22px -6px #f2b544}
.mi-pl.me::after{content:'TÚ';position:absolute;top:4px;right:8px;font:800 9px var(--title);letter-spacing:.14em;color:#ffd77a}
.mi-team.tCT .mi-pl.me::after{right:auto;left:8px}
.mi-av{flex:0 0 auto;height:100%;max-height:64px;aspect-ratio:1;border-radius:4px;overflow:visible;border:0;background:transparent}
.mi-av-img{width:100%;height:100%;object-fit:cover;display:block}
.mi-id{flex:1;min-width:0;display:grid;gap:2px}
.mi-id b{font:800 clamp(14px,1.25vw,19px) var(--title);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-id small{display:flex;align-items:center;gap:5px;color:#aab4bb;font-size:12.5px;white-space:nowrap}
.mi-team.tCT .mi-id small{justify-content:flex-end}
.mi-pl.bot .mi-id small{color:#8794a0;font:700 10.5px var(--title);letter-spacing:.18em}
.mi-rk-s{width:16px;height:16px}.mi-rk{flex:0 0 auto;width:clamp(36px,5.4vh,52px);height:auto;filter:drop-shadow(0 0 10px var(--rc))}

/* consejo y carga */
.mi-tip{position:absolute;left:50%;bottom:clamp(74px,11vh,104px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:min(760px,70vw);padding:8px 16px;border-radius:4px;background:#05080bcc;border:1px solid #ffffff1c;font-size:14px;color:#e2dccf;z-index:2;opacity:0;transition:opacity .6s 1.3s}
.mi.in .mi-tip{opacity:1}
.mi-tip i{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e7e1d3;color:#0b0f12;font:900 italic 13px Georgia,serif}
.mi-tip span.sw{animation:miSw .5s ease}
@keyframes miSw{from{opacity:0;transform:translateY(5px)}}
.mi-load{position:absolute;left:4vw;right:4vw;bottom:4vh;z-index:2;opacity:0;transition:opacity .6s 1.4s}
.mi.in .mi-load{opacity:1}
.mi-load-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px}
.mi-phase{font:800 13px var(--title);letter-spacing:.2em;text-transform:uppercase}
.mi-steps{display:flex;gap:14px;margin:0;padding:0;list-style:none}
.mi-steps li{font:700 10px var(--title);letter-spacing:.12em;text-transform:uppercase;color:#6f7b84}
.mi-steps li::before{content:'○ ';color:#6f7b84}.mi-steps li.ok{color:#cfe6d4}.mi-steps li.ok::before{content:'● ';color:#5fc77a}
.mi-bar{position:relative;height:4px;border-radius:2px;background:#ffffff1f;overflow:hidden}
.mi-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,#f2b544,#ff8a3d);box-shadow:0 0 12px #ff8a3d;transition:width .5s ease}
.mi-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff55,transparent);width:30%;animation:miScan 1.4s linear infinite}
@keyframes miScan{from{transform:translateX(-100%)}to{transform:translateX(400%)}}

/* salida: los paneles se retiran, el centro se apaga y el fondo se abre hacia el escenario */
.mi.out .mi-team.tT{opacity:0;transform:translateX(-80px);transition:opacity .45s,transform .5s ease-in}
.mi.out .mi-team.tCT{opacity:0;transform:translateX(80px);transition:opacity .45s,transform .5s ease-in}
.mi.out .mi-team.ffa{opacity:0;transform:translateY(30px)}
.mi.out .mi-pl{transition-delay:0s}
.mi.out .mi-center>*,.mi.out .mi-tip,.mi.out .mi-load,.mi.out .mi-top>*{opacity:0;transition:opacity .35s .15s}
.mi.out{animation:miOut .55s .4s ease forwards}
.mi.out .mi-bg{transform:scale(1.14);filter:brightness(1.1) blur(6px);transition:transform .9s ease-in,filter .9s}
@keyframes miOut{to{opacity:0}}

/* el HUD entra de forma progresiva al terminar la carga */
#game.hud-in #hud{animation:hudIn .9s ease both}
#game.hud-in #hTop{animation:hudTop .7s .15s cubic-bezier(.2,.9,.2,1) both}
@keyframes hudIn{from{opacity:0}}
@keyframes hudTop{from{opacity:0;transform:translateY(-24px)}}

/* presentación breve al aparecer */
#matchBanner{position:fixed;left:50%;top:15vh;z-index:40;transform:translateX(-50%);display:grid;justify-items:center;gap:2px;padding:12px 30px;pointer-events:none;text-align:center;
  background:linear-gradient(90deg,transparent,#05080bd0 18%,#05080bd0 82%,transparent);color:#fff}
#matchBanner[hidden]{display:none}
#matchBanner small{font:700 10.5px var(--title);letter-spacing:.3em;text-transform:uppercase;color:#d8cdb5}
#matchBanner b{font:900 italic clamp(26px,3vw,40px)/1 var(--title);letter-spacing:.03em;text-transform:uppercase;text-shadow:0 4px 18px #000}
#matchBanner span{display:flex;align-items:center;gap:8px;font:800 13px var(--title);letter-spacing:.14em;text-transform:uppercase}
#matchBanner.tT span{color:#ff9a55}#matchBanner.tCT span{color:#6db6ff}
#matchBanner span img{width:20px;height:20px}
#matchBanner em{font:700 11px var(--title);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:#f2c86a}
#matchBanner em.warn{color:#ffb08f;letter-spacing:.04em;text-transform:none}
#matchBanner.mb-in{animation:mbIn .5s cubic-bezier(.2,.9,.2,1) both}
#matchBanner.mb-out{animation:mbOut .5s ease both}
@keyframes mbIn{from{opacity:0;transform:translate(-50%,-14px) scale(1.05)}}
@keyframes mbOut{to{opacity:0;transform:translate(-50%,-10px)}}

/* pantallas más pequeñas */
@media(max-width:1100px){.mi-center{width:min(520px,60vw)}.mi-team{width:clamp(260px,34vw,360px)}.mi-obj{display:none}}
@media(max-width:820px),(max-height:620px){
  #matchIntro{overflow:auto}.mi-teams{position:relative;top:auto;bottom:auto;left:auto;right:auto;flex-direction:column;padding:250px 16px 150px}.mi-gap{display:none}
  .mi-team{width:100%}.mi-team.tCT header,.mi-team.tCT .mi-pl{flex-direction:row;text-align:left}.mi-team.tCT .mi-pl{border-right:0;border-left:3px solid var(--tc)}
  .mi-center{width:90vw;top:12vh}.mi-tip{display:none}.mi-load{position:fixed}.mi-myrank{display:none}}
/* movimiento reducido: solo fundidos */
.mi.rm *,.mi.rm{animation:none!important;transition-duration:.2s!important;transition-delay:0s!important}
.mi.rm .mi-team,.mi.rm .mi-pl,.mi.rm .mi-center>*{transform:none!important}
.mi.rm .mi-dust{display:none}
@media(prefers-reduced-motion:reduce){#game.hud-in #hud,#game.hud-in #hTop,#matchBanner.mb-in,#matchBanner.mb-out{animation:none}}
body.rm #game.hud-in #hud,body.rm #game.hud-in #hTop,body.rm #matchBanner.mb-in{animation:none}
.mi.ffa .mi-teams{top:clamp(320px,40vh,420px)}