/* VS Studio · Broadcast motion v2. Lienzo y posiciones originales. */
* { box-sizing: border-box; }
html, body {
  margin: 0; width: 100%; height: 100%; overflow: hidden;
  background: transparent !important;
}
body { font-family: Arial, Helvetica, sans-serif; color: #fff; }
#stage {
  position: absolute; width: 1920px; height: 1080px;
  transform-origin: top left; overflow: hidden; background: transparent;
}
#graphic {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  --left: #19d3ee; --right: #ff6358;
}
[hidden] { display: none !important; }
.eyebrow {
  position: absolute; top: 175px; left: 190px; width: 1540px;
  display: flex; align-items: center; justify-content: center; gap: 25px;
  font-size: 25px; font-weight: 800; letter-spacing: 6px;
  text-shadow: 0 2px 12px #000; opacity: 0;
}
.eyebrow-line { height: 2px; width: 90px; flex-shrink: 0; background: #ffffffa0; }
#matchTitle { white-space: pre; text-align: center; }
.title-char { display: inline-block; white-space: pre; }
.matchup {
  position: absolute; left: 180px; top: 280px; width: 1560px; height: 530px;
  display: grid; grid-template-columns: 660px 240px 660px; align-items: center;
}
.team { height: 490px; position: relative; --color: var(--left); opacity: 0; }
.team.right { --color: var(--right); }
.team-body {
  position: relative; height: 100%; border-top: 3px solid var(--color);
  border-bottom: 1px solid #ffffff30; border-radius: 28px; overflow: hidden;
  background: linear-gradient(155deg, rgba(19,29,48,.97), rgba(8,13,24,.94));
  box-shadow: 0 24px 60px #0005, inset 0 1px 0 #ffffff10;
}
.team-body:after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, #ffffff09 31%, transparent 70%);
  pointer-events: none;
}
/* Luz fija pintada en un degradado: no se anima un filtro de blur. */
.orb {
  position: absolute; width: 660px; height: 410px; left: 0; top: -160px;
  background: radial-gradient(ellipse, var(--color), transparent 68%);
  opacity: .24;
}
.emblem {
  position: absolute; top: 37px; left: 205px; width: 250px; height: 250px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 15px 15px #0007); opacity: 0;
}
.emblem img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fallback {
  width: 205px; height: 230px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--color), #1b283d);
  clip-path: polygon(50% 0,95% 18%,90% 72%,50% 100%,10% 72%,5% 18%);
  font-size: 70px; font-weight: 900; color: #fff; text-shadow: 0 4px 10px #0006;
}
.crest-flare {
  position: absolute; left: 155px; top: -8px; width: 350px; height: 340px;
  background: radial-gradient(ellipse, #ffffff70, var(--color) 28%, transparent 68%);
  opacity: 0; pointer-events: none;
}
.team-copy { position: absolute; top: 314px; left: 28px; right: 28px; text-align: center; }
.role { display: inline-block; font-size: 17px; letter-spacing: 6px; color: var(--color); font-weight: 800; opacity: 0; }
h1 {
  font-size: 39px; line-height: 1.14; margin: 14px 0 20px; text-transform: uppercase;
  font-weight: 900; overflow-wrap: anywhere; min-height: 45px; opacity: 0;
}
.accent { display: block; width: 62px; height: 4px; border-radius: 4px; background: var(--color); margin: 0 auto; opacity: 0; }
.versus {
  height: 250px; position: relative; display: flex; align-items: center;
  justify-content: center; flex-direction: column; z-index: 2; opacity: 0;
}
.vs-text { font-size: 105px; font-weight: 900; font-style: italic; letter-spacing: -12px; padding-right: 12px; text-shadow: 0 6px 25px #000b; }
.versus-caption { font-size: 12px; font-weight: 800; letter-spacing: 2px; margin-top: 15px; text-shadow: 0 2px 10px #000; }
.match-footer {
  position: absolute; top: 858px; left: 300px; width: 1320px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 22px; font-weight: 700; letter-spacing: 3px;
  text-shadow: 0 3px 12px #000; opacity: 0;
}
.live-dot { width: 8px; height: 8px; background: #fff; border-radius: 100%; box-shadow: 0 0 15px #fff; flex-shrink: 0; }
/* Efectos locales: nunca hay un plano ni flash de pantalla completa. */
.center-ray {
  position: absolute; left: 220px; top: 525px; width: 1480px; height: 3px;
  z-index: 3; opacity: 0; transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--left) 23%, #fff 50%, var(--right) 77%, transparent);
  box-shadow: 0 0 12px #cdefff80, 0 0 24px #ffffff40;
}
.impact-fx { position: absolute; left: 960px; top: 525px; width: 0; height: 0; z-index: 1; }
.impact-flash {
  position: absolute; width: 240px; height: 180px; left: -120px; top: -90px;
  background: radial-gradient(ellipse, #fff 0%, #ffffffa0 15%, #d8f6ff30 38%, transparent 68%);
  opacity: 0;
}
.impact-ring {
  position: absolute; width: 120px; height: 120px; left: -60px; top: -60px;
  border: 2px solid #ffffffa0; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 12px #d7f6ff40;
}
/* JS asigna will-change solamente durante entrada/salida, y lo libera al descansar. */

/* Logo de la competición sobre el VS; sin placa ni fondo adicional. */
.cup-badge{position:absolute;left:885px;top:280px;width:150px;height:150px;display:flex;align-items:center;justify-content:center;opacity:0;z-index:4}
.cup-badge img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 5px 9px #0007)}
/* Una línea luminosa recorre exactamente el rectángulo redondeado. */
.edge-frame{position:absolute;inset:0;width:660px;height:490px;overflow:visible;pointer-events:none;z-index:3;color:var(--color)}
.edge-frame rect{fill:none;stroke:currentColor}
.edge-base{stroke-width:1.2;opacity:.28}
.edge-runner{stroke-width:3;stroke-linecap:round;stroke-dasharray:110 890;stroke-dashoffset:0;opacity:0;filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor)}

.final-score{display:flex;align-items:center;justify-content:center;gap:8px;width:236px;font-size:76px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.15;text-shadow:0 5px 20px #000b;white-space:nowrap}
.score-local{color:var(--left)}.score-visitor{color:var(--right)}
.score-separator{font-size:38px;color:#fff}