const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/firebase-BylMgSsD.js","assets/chunk-DT4yxi9n.js","assets/index.esm-DKdodk42.js"])))=>i.map(i=>d[i]);
import"./modulepreload-polyfill-CkedBBHh.js";import{t as e}from"./preload-helper-CT1Z6Pdu.js";import{r as t}from"./overlayStyle-BLOTt0xN.js";var n=1080,r=1920,i=new URLSearchParams(location.search),a=i.has(`demo`),o=(e,t,n,r)=>Math.max(n,Math.min(r,Number(i.get(e)??t)||t)),s=i.get(`uid`),c=o(`scale`,1,.4,2.5),l=o(`top`,300,0,1700),u=o(`mvps`,2,0,3),d=o(`bestof`,5,1,15);document.documentElement.style.cssText=`background:transparent;overflow:hidden`,document.body.style.cssText=`background:transparent;margin:0;overflow:hidden;height:100vh`,i.get(`bg`)===`1`&&document.body.classList.add(`preview`),i.get(`safe`)===`1`&&document.body.classList.add(`safe`);var f=document.createElement(`style`);f.textContent=`
/* Tipografías EMPAQUETADAS, no traídas de Google Fonts. Un overlay se abre en una fuente de
   navegador que puede no tener internet —o tenerlo con la salida a fonts.googleapis.com cortada, que
   en un PC de streaming pasa—, y ahí el diseño se caía a una condensada del sistema justo mientras
   se emite. Son 6 archivos y ~174 KB, servidos por la misma app que sirve el overlay.
   Las tres son SIL Open Font License, que permite redistribuirlas. */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700 900;font-display:swap;
  src:url('/fonts/big-shoulders-display-latin.woff2') format('woff2');
  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}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700 900;font-display:swap;
  src:url('/fonts/big-shoulders-display-latin-ext.woff2') format('woff2');
  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:'Chivo Mono';font-style:normal;font-weight:600 700;font-display:swap;
  src:url('/fonts/chivo-mono-latin.woff2') format('woff2');
  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}
@font-face{font-family:'Chivo Mono';font-style:normal;font-weight:600 700;font-display:swap;
  src:url('/fonts/chivo-mono-latin-ext.woff2') format('woff2');
  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:'Archivo';font-style:normal;font-weight:600 700;font-display:swap;
  src:url('/fonts/archivo-latin.woff2') format('woff2');
  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}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 700;font-display:swap;
  src:url('/fonts/archivo-latin-ext.woff2') format('woff2');
  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}

:root{
  --a1:#FF2E63; --a2:#FFB03A;   /* bando A — magma */
  --b1:#7B5CFF; --b2:#00E5FF;   /* bando B — voltio */
  --bone:#F2EEF9; --dim:#9B93B2; --line:rgba(242,238,249,.14);
  --seam:50%; --tilt:22px; --top:${l}px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.preview{background:#12121a}
body.preview::before{content:'';position:fixed;inset:0;background:linear-gradient(115deg,#1b1230,#0a0f1e 55%,#2a0f1c)}
#stage{position:absolute;top:50%;left:50%;width:${n}px;height:${r}px;transform-origin:center}
/* Guías de las zonas que TikTok tapa con su propia interfaz (?safe=1). */
.safe{display:none;position:absolute;left:0;right:0;border:1px dashed rgba(0,229,255,.45);
  font:600 20px 'Chivo Mono',monospace;color:rgba(0,229,255,.6);padding:6px 10px}
body.safe .safe{display:block}
.safe--top{top:0;height:280px}
.safe--bottom{bottom:0;height:640px}

#bar{position:absolute;top:var(--top);left:30px;width:1020px;height:232px;
  border-radius:20px;overflow:hidden;isolation:isolate;opacity:0;transition:opacity .35s ease}
#bar.on{opacity:1}

/* El FRENTE DE BATALLA: la costura diagonal se corre hacia el bando que va perdiendo, así el
   territorio de cada color enseña quién domina sin que haya que leer un número. */
.terrain{position:absolute;inset:0;z-index:0}
.terrain__side{position:absolute;inset:0;transition:clip-path .8s cubic-bezier(.22,1.2,.36,1)}
.terrain__side--a{background:
    radial-gradient(130% 160% at 0% 0%, color-mix(in srgb,var(--a2) 40%,transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb,var(--a1) 58%,#12040F) 0%, #0B060C 82%);
  clip-path:polygon(0 0, calc(var(--seam) + var(--tilt)) 0, calc(var(--seam) - var(--tilt)) 100%, 0 100%)}
.terrain__side--b{background:
    radial-gradient(130% 160% at 100% 0%, color-mix(in srgb,var(--b2) 38%,transparent), transparent 60%),
    linear-gradient(210deg, color-mix(in srgb,var(--b1) 58%,#06081A) 0%, #06070F 82%);
  clip-path:polygon(calc(var(--seam) + var(--tilt)) 0, 100% 0, 100% 100%, calc(var(--seam) - var(--tilt)) 100%)}
.seam{position:absolute;top:-14%;left:var(--seam);width:3px;height:128%;
  transform:translateX(-50%) rotate(11.6deg);
  background:linear-gradient(180deg,transparent,#fff 14%,#fff 86%,transparent);
  box-shadow:0 0 14px rgba(255,255,255,.6),0 0 36px rgba(255,255,255,.25);
  transition:left .8s cubic-bezier(.22,1.2,.36,1);z-index:2}
/* Velo oscuro: el overlay va encima de vídeo, y sin él el texto se pierde en las escenas claras. */
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,12,.34),rgba(6,6,12,.74))}
.frame{position:absolute;inset:0;z-index:6;border-radius:20px;pointer-events:none;
  border:1.5px solid rgba(242,238,249,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 44px rgba(0,0,0,.55)}
.content{position:relative;z-index:5;height:100%;display:flex;flex-direction:column}

.duel{flex:0 0 126px;display:flex;align-items:center;gap:14px;padding:0 22px}
/* El escudo lleva clip-path, así que la corona tiene que vivir fuera de él o se recorta. */
.crest{flex:0 0 62px;height:70px;position:relative}
.crown{position:absolute;top:-19px;left:50%;z-index:2;pointer-events:none;
  opacity:0;transform:translateX(-50%) scale(.4);transition:.35s cubic-bezier(.2,1.5,.4,1)}
.camp.leading .crown{opacity:1;transform:translateX(-50%) scale(1)}
.shield{width:100%;height:100%;display:grid;place-items:center;position:relative;
  clip-path:polygon(50% 0,100% 22%,100% 78%,50% 100%,0 78%,0 22%);
  font:900 34px/1 'Big Shoulders Display','Archivo Narrow','Arial Narrow',sans-serif;color:#0A0710}
.camp--a .shield{background-image:linear-gradient(150deg,var(--a2),var(--a1))}
.camp--b .shield{background-image:linear-gradient(150deg,var(--b2),var(--b1))}
.shield::after{content:'';position:absolute;inset:0;
  clip-path:polygon(50% 0,100% 22%,100% 78%,50% 100%,0 78%,0 22%);
  box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.3)}

.camp{flex:1;min-width:0;display:flex;align-items:center;gap:14px}
.camp--b{flex-direction:row-reverse}
/* El bloque del nombre se come el sobrante: así el marcador queda siempre pegado a la
   insignia VS y los dos bandos salen simétricos aunque un nombre sea mucho más largo. */
.who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.camp--b .who{text-align:right}
.team{display:block;font:900 40px/1 'Big Shoulders Display','Archivo Narrow','Arial Narrow',sans-serif;
  text-transform:uppercase;color:var(--bone);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 12px rgba(0,0,0,.65)}
/* Los vivos van donde en la maqueta iba el @: en una batalla es el dato que cambia a cada baja. */
.alive{font:600 30px/1 'Chivo Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp--a .alive{color:var(--a2)}
.camp--b .alive{color:var(--b2)}
.alive s{text-decoration:none;color:var(--dim)}

.score{font:900 82px/.82 'Big Shoulders Display','Archivo Narrow','Arial Narrow',sans-serif;
  font-variant-numeric:tabular-nums;-webkit-background-clip:text;background-clip:text;
  color:transparent;min-width:56px;text-align:center}
.camp--a .score{background-image:linear-gradient(180deg,#fff 16%,var(--a2) 60%,var(--a1))}
.camp--b .score{background-image:linear-gradient(180deg,#fff 16%,var(--b2) 60%,var(--b1))}
.score.bump{animation:bump .55s cubic-bezier(.2,1.6,.35,1)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.24)}100%{transform:scale(1)}}

.vs{flex:0 0 auto;width:60px;height:60px;display:grid;place-items:center;border-radius:50%;
  background:rgba(7,7,14,.86);border:2px solid rgba(242,238,249,.3);
  box-shadow:0 0 0 7px rgba(7,7,14,.4);position:relative;
  font:900 27px/1 'Big Shoulders Display','Archivo Narrow','Arial Narrow',sans-serif;color:var(--bone)}
.phase{position:absolute;top:66px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font:700 23px/1 'Chivo Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.phase.live{color:#FF4D6D}

.mvps{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;
  padding:0 22px 10px;border-top:1px solid var(--line);background:rgba(7,7,14,.4)}
.mvps.off{display:none}
.mvp{display:flex;align-items:center;gap:9px;min-width:0}
.mvp--b{flex-direction:row-reverse}
.tag{flex:0 0 auto;font:700 19px/1 'Chivo Mono',monospace;letter-spacing:.16em;
  color:#0A0710;padding:6px 8px;border-radius:6px}
.mvp--a .tag{background:linear-gradient(150deg,var(--a2),var(--a1))}
.mvp--b .tag{background:linear-gradient(150deg,var(--b2),var(--b1))}
.chips{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.mvp--b .chips{flex-direction:row-reverse}
.chip{display:flex;align-items:center;gap:7px;flex:0 1 auto;min-width:0;
  height:48px;padding:0 12px;border-radius:10px;
  background:rgba(242,238,249,.07);border:1px solid rgba(242,238,249,.11);
  animation:rise .4s cubic-bezier(.2,.9,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mvp--a .chip.top{border-color:color-mix(in srgb,var(--a1) 60%,transparent);background:rgba(255,46,99,.14)}
.mvp--b .chip.top{border-color:color-mix(in srgb,var(--b2) 60%,transparent);background:rgba(0,229,255,.12)}
/* Los caídos siguen listados, atenuados: el MVP se gana durante la ronda, no por sobrevivir. */
.chip.dead{opacity:.45}
.chip .u{font:600 30px/1 'Archivo',sans-serif;color:var(--bone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .w{font:700 27px/1 'Chivo Mono',monospace;color:var(--dim);flex:0 0 auto}
.mvp--a .chip.top .w{color:var(--a2)}
.mvp--b .chip.top .w{color:var(--b2)}
.chip.empty{border-style:dashed;background:none}
.chip.empty .u{color:var(--dim);font-weight:500;font-size:22px}

/* Rondas ganadas, en el borde inferior: cada lado crece hacia el centro. */
.rounds{position:absolute;left:0;right:0;bottom:0;height:6px;z-index:7;display:flex}
.rounds__half{flex:1;position:relative;background:rgba(242,238,249,.12)}
.rounds__fill{position:absolute;top:0;bottom:0;width:0;transition:width .8s cubic-bezier(.22,1.2,.36,1)}
.rounds__half--a .rounds__fill{right:0;background:linear-gradient(90deg,var(--a1),var(--a2))}
.rounds__half--b .rounds__fill{left:0;background:linear-gradient(90deg,var(--b2),var(--b1))}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
`,document.head.appendChild(f);var p=`<svg class="crown" width="28" height="19" viewBox="0 0 52 34"><path d="M4 30 L1 6 L14 15 L26 2 L38 15 L51 6 L48 30 Z" fill="#FFD24A" stroke="#7A4F00" stroke-width="2.5" stroke-linejoin="round"/></svg>`;document.body.innerHTML=`
<div id="stage">
  <div class="safe safe--top">ZONA SUPERIOR TIKTOK</div>
  <div class="safe safe--bottom">ZONA DE COMENTARIOS</div>
  <div id="bar">
    <div class="terrain">
      <div class="terrain__side terrain__side--a"></div>
      <div class="terrain__side terrain__side--b"></div>
      <div class="seam"></div>
    </div>
    <div class="scrim"></div>
    <div class="content">
      <div class="duel">
        <div class="camp camp--a" id="camp-a">
          <div class="crest">${p}<div class="shield" id="shield-a">A</div></div>
          <div class="who">
            <div class="team" id="team-a">BANDO A</div>
            <div class="alive" id="alive-a"></div>
          </div>
          <div class="score" id="score-a">0</div>
        </div>
        <div class="vs">VS<span class="phase" id="phase"></span></div>
        <div class="camp camp--b" id="camp-b">
          <div class="crest">${p}<div class="shield" id="shield-b">B</div></div>
          <div class="who">
            <div class="team" id="team-b">BANDO B</div>
            <div class="alive" id="alive-b"></div>
          </div>
          <div class="score" id="score-b">0</div>
        </div>
      </div>
      <div class="mvps${u===0?` off`:``}">
        <div class="mvp mvp--a"><div class="tag">MVP</div><div class="chips" id="mvps-a"></div></div>
        <div class="mvp mvp--b"><div class="tag">MVP</div><div class="chips" id="mvps-b"></div></div>
      </div>
    </div>
    <div class="rounds">
      <div class="rounds__half rounds__half--a"><div class="rounds__fill" id="fill-a"></div></div>
      <div class="rounds__half rounds__half--b"><div class="rounds__fill" id="fill-b"></div></div>
    </div>
    <div class="frame"></div>
  </div>
</div>`;var m=e=>document.getElementById(e),h=(e,t,n)=>Math.min(n,Math.max(t,e)),g=e=>String(e).replace(/[&<>"]/g,e=>({"&":`&amp;`,"<":`&lt;`,">":`&gt;`,'"':`&quot;`})[e]??e),_={lobby:`Preparando`,countdown:`Ya empieza`,running:`En vivo`,podium:`Fin de ronda`},v={A:null,B:null};function y(e){let t=e.side===`A`?`a`:`b`;m(`team-`+t).textContent=e.name,m(`shield-`+t).textContent=(e.name||`?`).trim().charAt(0).toUpperCase(),m(`alive-`+t).innerHTML=e.total>e.alive?`${e.alive} <s>/ ${e.total} vivos</s>`:`${e.alive} <s>vivos</s>`;let n=m(`score-`+t);n.textContent=String(e.rounds),v[e.side]!==null&&v[e.side]!==e.rounds&&(n.classList.remove(`bump`),n.offsetWidth,n.classList.add(`bump`)),v[e.side]=e.rounds;let r=Math.ceil(d/2);if(m(`fill-`+t).style.width=h(e.rounds/r,0,1)*100+`%`,u===0)return;let i=e.top.slice(0,u);m(`mvps-`+t).innerHTML=i.length?i.map((e,t)=>`<div class="chip${t===0?` top`:``}${e.alive?``:` dead`}" style="animation-delay:${t*60}ms">
         <span class="u">${g(e.name)}</span><span class="w">×${e.kills}</span></div>`).join(``):`<div class="chip empty"><span class="u">Sin bajas todavía</span></div>`}function b(e){let t=e.teams.find(e=>e.side===`A`),n=e.teams.find(e=>e.side===`B`);if(!t||!n)return;y(t),y(n);let r=m(`phase`);r.textContent=_[e.phase]??``,r.classList.toggle(`live`,e.phase===`running`);let i=t.rounds-n.rounds;m(`camp-a`).classList.toggle(`leading`,i>0),m(`camp-b`).classList.toggle(`leading`,i<0),document.documentElement.style.setProperty(`--seam`,50+h(i/d,-1,1)*15+`%`),m(`bar`).classList.add(`on`)}var x=m(`stage`),S=()=>{if(innerWidth<=0||innerHeight<=0){requestAnimationFrame(S);return}let e=Math.min(innerWidth/n,innerHeight/r)*c;x.style.transform=`translate(-50%,-50%) scale(${e})`};addEventListener(`resize`,S),S(),a?b({phase:`running`,teams:[{side:`A`,name:`Los Tigres`,alive:7,total:12,rounds:2,top:[{name:`juanky_rd`,kills:5,alive:!0},{name:`la_morena23`,kills:3,alive:!0},{name:`elvis_pty`,kills:2,alive:!1}]},{side:`B`,name:`Los Lobos`,alive:9,total:12,rounds:1,top:[{name:`kiaraaa`,kills:4,alive:!0},{name:`mr_lobo`,kills:2,alive:!0},{name:`zeta_rd`,kills:1,alive:!0}]}]}):s?e(async()=>{let{firebaseDb:e,isFirebaseConfigured:t}=await import(`./firebase-BylMgSsD.js`).then(e=>e.n);return{firebaseDb:e,isFirebaseConfigured:t}},__vite__mapDeps([0,1,2])).then(async({firebaseDb:t,isFirebaseConfigured:n})=>{if(!n||!t)return;let{ref:r,onValue:i}=await e(async()=>{let{ref:e,onValue:t}=await import(`./index.esm-DKdodk42.js`).then(e=>e.t);return{ref:e,onValue:t}},__vite__mapDeps([2,1]));i(r(t,`rooms/${s}/versusState`),e=>{let t=e.val();t?.teams&&b(t)})}):t(e=>{if(e.type!==`battle_room`)return;let t=e.data;t?.type!==`agent`||t.payload?.type!==`versus_state`||b(t.payload)});