/* Fixed 1920x1080 stage scaled to the window, so content changes never move
   the layout. In OBS set the browser source to 1920x1080. */
:root {
  --navy: #0d1640;
  --navy-2: #16245e;
  --panel: rgba(20, 34, 96, 0.6);
  --line: rgba(255, 255, 255, 0.18);
  --label: linear-gradient(90deg, #6a4bb0, #c06ad0);
  --yellow: #ffd23f;
  --blue: #4fb3ff;
  --green: #4caf50;
  --red: #c0392b;
  --text: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  color: var(--text);
}

#stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  display: grid;
  grid-template-rows: 230px 90px 80px 210px 1fr;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(80, 110, 230, 0.35), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 55%, #2a2f7a 100%);
  border: 6px solid #0a0f2c;
}

/* Optional uploaded background image/video, behind every row */
#stage > section, #stage > header { position: relative; z-index: 1; }
.bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bg-media, .bg-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: center / cover no-repeat;
}
.bg-dim { position: absolute; inset: 0; background: #000; opacity: 0; }

.ellipsis, .team-name, .team-score, .card-name, .sponsor, .ticker, .fact-box b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- header */
.top {
  display: grid;
  grid-template-columns: 1fr 360px 1fr;
  align-items: center;
  padding: 0 30px;
  border-bottom: 2px solid var(--line);
}
.team { display: flex; align-items: center; gap: 30px; min-width: 0; }
.team.right { justify-content: flex-end; text-align: right; }
.team-text { min-width: 0; }
.team-name { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: 2px; }
.team-score { font-size: 84px; font-weight: 700; line-height: 1.05; }
.team-score small { font-size: 52px; }

.logo {
  flex: 0 0 180px;
  height: 180px;
  border-radius: 22px;
  border: 5px solid #0a0f2c;
  background: #e0652b center / cover no-repeat;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  font-size: 64px;
  font-weight: 700;
}
.team.right .logo { background-color: #2b73e0; }

.centre { text-align: center; }
.last-ball {
  font-size: 170px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}
.last-ball.wicket { color: #ff5a4f; }
.last-ball.flash { animation: pop 0.6s ease-out; }
@keyframes pop {
  0% { transform: scale(1.5); opacity: 0.2; }
  100% { transform: scale(1); opacity: 1; }
}

.indicators { display: flex; justify-content: center; gap: 10px; min-height: 40px; }
.pill {
  font-size: 26px;
  font-weight: 700;
  padding: 2px 14px;
  border-radius: 8px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.pill.free_hit { background: var(--red); animation: blink 1s steps(2, start) infinite; }
.pill.powerplay { background: #7b3fe4; }
.pill.drs { background: #0a8f6c; }
.pill.drinks { background: #1f6fd1; }
@keyframes blink { to { opacity: 0.45; } }

/* ----------------------------------------------------------- info rows */
.rates, .facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 40px;
  border-bottom: 2px solid var(--line);
}
.rate-box { font-size: 58px; font-weight: 700; }
.equation { font-size: 54px; font-weight: 700; text-align: right; white-space: nowrap; }
.equation .y { color: var(--yellow); }
.equation .b { color: var(--blue); }

.fact-box { display: flex; gap: 60px; font-size: 32px; font-weight: 500; min-width: 0; }
.fact-box span { min-width: 0; display: flex; gap: 10px; }

.win {
  display: flex;
  height: 54px;
  font-size: 32px;
  font-weight: 700;
  border-radius: 6px;
  overflow: hidden;
}
.win > div { display: flex; align-items: center; padding: 0 18px; white-space: nowrap; }
.win-a { background: var(--green); }
.win-b { background: var(--red); justify-content: flex-end; flex: 1; }

/* ----------------------------------------------------------- middle strip */
.strip {
  display: grid;
  grid-template-columns: 1fr 640px 1fr;
  border-bottom: 2px solid var(--line);
}
.sponsor, .ticker {
  align-self: center;
  padding: 0 40px;
  font-size: 54px;
  font-weight: 700;
}
.ticker { font-size: 40px; color: #bff28a; text-align: center; }
.vs {
  position: relative;
  background: #2b4fd8 center / cover no-repeat;
  border-left: 3px solid var(--line);
  border-right: 3px solid var(--line);
  display: grid;
  place-items: center;
}
.vs-text {
  font-size: 140px;
  font-weight: 700;
  font-style: italic;
  color: #ff6a1a;
  text-shadow: 0 0 20px rgba(255, 140, 40, 0.9), 4px 4px 0 #2a0d00;
}
.vs.has-image .vs-text { display: none; }

/* --------------------------------------------------------------- players */
.players { display: grid; grid-template-columns: repeat(3, 1fr); }
.col {
  display: grid;
  grid-template-rows: 70px 1fr 78px;
  border-right: 3px solid var(--line);
  min-width: 0;
}
.col:last-child { border-right: 0; }
.col.empty > * { visibility: hidden; }

.col-label {
  background: var(--label);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 3px;
  display: grid;
  place-items: center;
}
.card {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 24px;
  padding: 16px 28px;
  background: var(--panel);
  min-width: 0;
}
.photo {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: #2c3c8c center top / cover no-repeat;
  border: 4px solid rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  font-size: 80px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}
.card-info { min-width: 0; }
.card-name { font-size: 48px; font-weight: 700; line-height: 1.1; }
.card-main { font-size: 64px; font-weight: 700; line-height: 1.1; display: flex; align-items: center; gap: 18px; }
.bat-icon { width: 54px; height: 54px; }

.col-stats {
  background: rgba(10, 16, 51, 0.8);
  font-size: 40px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 20px;
}