/* Native HTML/CSS/SVG broadcast chrome. Dimensions follow the existing picture frame. */
.broadcast-layer { container-type: size; container-name: livo-picture; }
.scorebug {
  position: absolute;
  top: var(--ov-pad); left: var(--ov-pad);
  width: clamp(210px, 42cqw, 560px); max-width: calc(100% - 72px);
  height: clamp(29px, 4.6cqw, 62px);
  display: grid; grid-template-columns: 17% 28% 24% 31%;
  background: #07101b; border: 1px solid #64778b;
  border-radius: 5px 3px 7px 8px;
  box-shadow: 0 3px 10px #0008, inset 0 1px 0 #ffffff40;
  isolation: isolate; font-family: var(--font-bug); font-variant-numeric: tabular-nums;
}
.scorebug::after {
  content: ''; position: absolute; bottom: -1px; left: 22%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, #c7eaff, transparent); pointer-events: none;
}
.scorebug__clock-wrap {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 2px 3px; background: linear-gradient(180deg, #e9edf2 0 32%, #111c29 34% 100%);
  border-radius: 4px 0 0 7px;
}
.scorebug__phase {
  height: 36%; color: #14202b; font-size: clamp(7px, .82cqw, 12px);
  font-weight: 800; letter-spacing: .04em; line-height: 1; white-space: nowrap;
}
.scorebug__clock {
  display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0; height: 60%; color: #f6f9ff;
  font-size: clamp(12px, 2cqw, 28px); font-weight: 800;
}
/* A single compact strip, anchored to the clock column rather than the whole bug. */
.scorebug__clock-wrap { position: relative; }
.scorebug .scorebug__clock-wrap .scorebug__stoppage {
  position: absolute; top: calc(100% + 4px); bottom: auto; left: 0;
  display: flex; align-items: stretch; box-sizing: border-box;
  min-width: 86px; width: 155%; height: auto; margin: 0; padding: 0;
  font-size: clamp(10px, 1.15cqw, 16px); line-height: 1.7; font-weight: 800;
  color: white; background: #071424; border: 1px solid #66778b; border-radius: 2px;
  box-shadow: 0 2px 5px #0006; font-variant-numeric: tabular-nums;
}
.scorebug__stoppage b { background: linear-gradient(#e33246,#b00e26); padding: 0 .35em; }
.scorebug__stoppage span { flex: 1; text-align: center; padding: 0 .3em; white-space: nowrap; }
.scorebug__stoppage[hidden] { display: none !important; }
.scorebug__team, .scorebug__team--away {
  position: relative; display: flex; align-items: center; overflow: hidden; gap: 6%; padding: 0 10%; min-width: 0; color: #fff;
  background: linear-gradient(110deg, #063b76, #071b33 78%);
  font-size: clamp(12px, 2.25cqw, 31px); font-weight: 800; font-style: italic;
  gap: 4%; padding-inline: 6%;
}
/* Follow the outer frame's inner curve without clipping the scorebug's external badges. */
.scorebug__team--away { background: linear-gradient(110deg, #101b29, #19101b); padding-left: 8%; border-radius: 0 2px 6px 0; }
/* Keep the home crest clear of the skewed team-colour accent. */
.scorebug__team--home { padding-left: 12%; }
.scorebug__accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5%;
  transform: skew(-15deg); opacity: .9;
}
.scorebug__team--away .scorebug__accent { left: auto; right: 3%; }
.scorebug__logo {
  width: 26%; height: auto; aspect-ratio: 1; max-width: 40px;
  object-fit: contain; border-radius: 50%; background: transparent;
  box-shadow: 0 0 0 1px #d2e6fa66; flex: 0 0 auto;
}
.scorebug__identity { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; line-height: 1; }
.scorebug__name { max-width: none; min-width: 2.4em; flex: 0 0 auto; padding: 0 2px; letter-spacing: .025em; white-space: nowrap; overflow: visible; }
.bug-reds { position: absolute; left: 2px; bottom: calc(100% + 1px); display: flex; gap: 2px; width: max-content; max-width: 100%; height: clamp(4px, .65cqw, 7px); }
.bug-reds[hidden] { display: none !important; }
.bug-red-icon { display: block; flex: 0 1 5px; min-width: 2px; width: clamp(3px, .45cqw, 5px); height: 100%; border-radius: 1px; background: #e51b2b; }
.scorebug__score {
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; color: white; font-weight: 800; gap: 9%; padding: 0 7%; font-size: clamp(17px, 3.5cqw, 46px);
  background: linear-gradient(160deg, #0c1721, #03090f); box-shadow: inset 1px 0 #ffffff20;
}
.scorebug__n { min-width: 0; }
.scorebug__div { width: 1px; flex: 0 0 1px; height: 60%; margin: 0; background: #b1bdc7; }
.scorebug .bug-cards { position: absolute; right: 3%; bottom: 1px; gap: 2px; }
.scorebug .bug-card { min-width: 11px; height: 12px; font-size: 10px; padding: 0 1px; }

/* Player events share one bottom-centre slot; lineup and match-wide cues retain their renderer. */
.lt.lt--tv {
  --tv-accent: #e6334c;
  --tv-sponsor-reserve: min(14%, 120px);
  top: auto; left: 50%; bottom: max(7%, 52px);
  width: min(72%, 760px); max-width: calc(100% - 2 * (var(--tv-sponsor-reserve) + 20px)); height: auto; overflow: visible;
  border-radius: 6px; box-shadow: none;
  opacity: 0; transform: translateX(-50%); translate: 0 13px;
  transition: opacity 280ms ease, translate 360ms cubic-bezier(.2,.8,.3,1);
}
.lt.lt--tv.is-in { max-width: calc(100% - 2 * (var(--tv-sponsor-reserve) + 20px)); opacity: 1; translate: 0 0; }
.player.is-pseudo-fs .lt.lt--tv,
.player:fullscreen .lt.lt--tv,
.player:-webkit-full-screen .lt.lt--tv {
  --tv-sponsor-reserve: min(28%, 200px);
  /* Override legacy fullscreen anchors as a complete coordinate set, on the picture root. */
  position: absolute; top: auto; right: auto; left: 50%; bottom: max(7%, 52px);
  transform: translateX(-50%);
}
/* 52px reserves the existing 40px controls, their 6px inset and a 6px gap, including offline mode. */
.lt.lt--tv:not(.lt--sub):not(.lt--substitution) { width: min(65%, 660px); }
.tv-panel {
  position: relative; display: flex; align-items: center; gap: 3%;
  width: 100%; min-width: 0; height: clamp(43px, 6.5cqw, 88px);
  padding: 0 5%; color: #fff; box-sizing: border-box; overflow: hidden;
  background: linear-gradient(112deg, #09131eee 8%, #0a2034ed 65%, #080f19f5);
  border: 1px solid var(--tv-accent); border-radius: 9px;
  box-shadow: 0 6px 20px #0006, inset 0 1px #ffffff15;
  font-family: var(--font-bug); font-variant-numeric: tabular-nums;
}
/* A continuous contour with restrained inset light: no cut-off polygon corners or side bars. */
.tv-panel::before {
  content: ''; position: absolute; inset: 3px; border-radius: 5px;
  border: 1px solid #ffffff09; pointer-events: none;
}
.tv-panel--yellow { --tv-accent: #ffe119; }
.tv-panel--red { --tv-accent: #ff1b39; }
.tv-panel--yellow-red { --tv-accent: #fa3548; }
.tv-panel--goal { --tv-accent: #27ed65; }
.tv-panel--sub { justify-content: space-between; gap: 0; }
.lt.is-team-event .tv-panel { --tv-accent: var(--event-team-color); }
.tv-panel--board { justify-content: space-between; --tv-accent: #869bb1; }
.tv-board-score { font-size: clamp(20px, 3.5cqw, 46px); white-space: nowrap; }
.tv-board-team { font-size: clamp(12px, 2cqw, 28px); font-weight: 700; }
.tv-message { font-size: clamp(11px, 1.8cqw, 25px); line-height: 1.15; }
.tv-panel--announcement .tv-number { font-size: clamp(18px, 3cqw, 40px); }
.tv-panel--announcement .tv-last { font-size: clamp(12px, 2cqw, 28px); }
.lt.is-team-event .lt__panel, .lt.is-team-event .tv-lineup { border-color: var(--event-team-color); }
.lt.is-team-event .lt__accent { background: var(--event-team-color) !important; }
.lt.is-team-event .tv-lineup { box-shadow: 0 5px 14px #0007; }
.tv-offside-flag { height: 100%; width: auto; max-width: 100%; }
.tv-event-label { font-size: clamp(12px, 2cqw, 28px); font-style: italic; line-height: 1; }
.tv-panel--offside .tv-number { font-size: clamp(20px, 3.4cqw, 46px); }
.tv-panel--offside .tv-last { font-size: clamp(12px, 2.1cqw, 29px); }
.tv-number {
  flex: 0 0 auto; font-size: clamp(23px, 4.6cqw, 60px); font-weight: 800; line-height: 1;
}
.tv-player {
  min-width: 0; display: flex; flex-direction: column; justify-content: center;
  padding-left: 3%; border-left: 1px solid #c8d3dc80; overflow: hidden;
  line-height: 1.03; text-transform: uppercase; flex: 1 1 auto;
}
.tv-first { font-size: clamp(10px, 1.6cqw, 22px); font-weight: 600; letter-spacing: .02em; color: #d2dae2; }
.tv-last { font-size: clamp(14px, 2.5cqw, 35px); font-weight: 800; }
.tv-first, .tv-last { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-side { display: flex; align-items: center; gap: 7%; width: 37%; min-width: 0; }
.tv-side--out { padding-right: 1%; }.tv-side--in { padding-left: 1%; }
.tv-side .tv-number { font-size: clamp(20px, 3.7cqw, 50px); }
.tv-side .tv-first { font-size: clamp(9px, 1.3cqw, 18px); }
.tv-side .tv-last { font-size: clamp(12px, 2cqw, 28px); }
.tv-arrow { width: 12%; min-width: 12px; height: auto; flex: 0 0 12%; }
.tv-arrow--out { color: #ff2446; }.tv-arrow--in { color: #32f36c; }
.tv-change {
  align-self: stretch; flex: 0 0 24%; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 2px; background: linear-gradient(120deg, #052b53, #0a192c);
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
  font-size: clamp(7px, 1.05cqw, 15px); font-weight: 700;
}
.tv-swap { width: 39%; max-height: 54%; }
.tv-emblem { display: flex; justify-content: center; align-items: center; flex: 0 0 12%; height: 76%; }
.tv-card { display: block; width: 65%; height: 90%; border-radius: 4px; background: linear-gradient(145deg, #fff552, #ebbd00); box-shadow: inset 1px 1px #ffffff88; }
.tv-panel--red .tv-card { background: linear-gradient(145deg, #ff304a, #d60026); }
.tv-panel--yellow-red .tv-card { background: linear-gradient(90deg, #ffe119 50%, #f51b39 50%); }
.tv-ball { height: 100%; width: auto; max-width: 100%; }
.tv-goal { flex: 0 0 auto; font-size: clamp(28px, 5.2cqw, 72px); font-style: italic; letter-spacing: -.02em; line-height: 1; }
.tv-panel--goal .tv-number { font-size: clamp(20px, 3.4cqw, 46px); }
.tv-panel--goal .tv-last { font-size: clamp(13px, 2.15cqw, 30px); }
.tv-tag { position: absolute; right: 7%; top: 3%; font-size: clamp(7px, .85cqw, 12px); }
@media (prefers-reduced-motion: reduce) { .lt.lt--tv { transition: opacity 100ms linear; translate: 0 0; } }

/* Startelf is anchored only to measured scoreboard/picture coordinates. */
.player .broadcast-layer .lt.lt--tv.lt--lineup,
.player .broadcast-layer .lt.lt--tv.lt--lineup.is-in {
  position: absolute; top: var(--lineup-top); left: var(--lineup-left); right: auto; bottom: auto;
  width: var(--lineup-width); max-width: var(--lineup-width); max-height: none;
  transform: none; translate: none; transition: opacity 280ms ease;
  scale: var(--lineup-fit, 1); transform-origin: top left;
}
.tv-lineup {
  container-type: inline-size; width: 100%; box-sizing: border-box; overflow: hidden;
  color: #f5f8ff; background: linear-gradient(115deg,#090f17,#071e38 65%,#070d16);
  border: 1px solid #59748e; border-top: 2px solid #3c9be2; border-radius: 5px;
  box-shadow: 0 5px 14px #0007;
  font-family: var(--font-bug);
}
.tv-lineup header {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  min-height: calc(24px * var(--lineup-density, 1)); box-sizing: border-box; padding: calc(3px * var(--lineup-density, 1)) 5%;
  background: linear-gradient(110deg,#0b3d70,#071727); border-bottom: 1px solid #4887b4;
}
.tv-lineup header strong { text-transform: uppercase; letter-spacing: .08em; font-size: clamp(9px,calc(4.5cqw * var(--lineup-density, 1)),14px); line-height: 1.1; }
.tv-lineup header span { grid-row: 2; grid-column: 1 / -1; font-size: clamp(8px,calc(3.5cqw * var(--lineup-density, 1)),11px); line-height: 1.1; overflow-wrap: anywhere; }
.tv-lineup header small { grid-row: 1; grid-column: 2; font-size: clamp(7px,3cqw,10px); color: #b0c8dc; }
.tv-lineup__row {
  display: flex; align-items: center; gap: 4%; min-height: clamp(15px,calc(10cqw * var(--lineup-density, 1)),32px);
  padding: calc(2px * var(--lineup-density, 1)) 5%; box-sizing: border-box; border-bottom: 1px solid #ffffff12;
}
.tv-lineup__row:last-child { border: 0; }
.tv-lineup__row > b { flex: 0 0 1.6em; font-size: clamp(10px,calc(6cqw * var(--lineup-density, 1)),18px); line-height:1; color: #8ed1ff; }
.tv-lineup__identity { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tv-lineup__identity strong { font-size: clamp(9px,calc(4.8cqw * var(--lineup-density, 1)),14px); line-height: 1.1; overflow-wrap: anywhere; }
.tv-lineup__identity small { font-size: clamp(7px,calc(3.2cqw * var(--lineup-density, 1)),10px); line-height: 1.1; color: #a4b9ca; overflow-wrap: anywhere; }

/* Desktop fullscreen: enlarge the complete squad, including capped text sizes.
   Existing measured height fitting still keeps every player above the controls. */
@media (min-width: 1024px) and (min-height: 600px) and (hover: hover) and (pointer: fine) {
  .player:is(:fullscreen, :-webkit-full-screen, .is-pseudo-fs) .broadcast-layer .lt.lt--lineup {
    scale: calc(1.25 * var(--lineup-fit, 1)); transform-origin: top left;
  }
}

/* Narrow pictures cannot fit a wide fullscreen sponsor beside a readable squad.
   Only while this lineup occupies the slot, retain the normal sponsor footprint. */
@container livo-picture (max-width: 600px) {
  .lt.lt--tv.lt--lineup,
  .player.is-pseudo-fs .lt.lt--tv.lt--lineup,
  .player:fullscreen .lt.lt--tv.lt--lineup,
  .player:-webkit-full-screen .lt.lt--tv.lt--lineup { --tv-sponsor-reserve: min(14%, 120px); }
  .lt.lt--lineup.is-in ~ .adslot { max-width: 14%; }
}

/* Anchor to the picture corner; only visible overlapping controls lift the mark. */
.player .broadcast-layer .adslot {
  right:var(--ov-pad-sm,6px); bottom:var(--sponsor-bottom,var(--ov-pad-sm,6px));
}

/* At half-bug phone widths, retain 9px names and all text; remove spare vertical spacing. */
@container (max-width: 150px) {
  .tv-lineup header { min-height: 18px; padding-block: 1px; }
  .tv-lineup header strong, .tv-lineup header span, .tv-lineup header small { line-height: 1; }
  .tv-lineup__row { min-height: calc(22px * var(--lineup-density, 1)); padding-block: 1px; }
  .tv-lineup__identity { gap: 0; }
  .tv-lineup__identity small { line-height: 1; }
}

/* Short pictures omit optional position labels; names/numbers stay complete. */
.lt--lineup.is-lineup-tight .tv-lineup__identity small { display: none; }

.lt--lineup.is-lineup-tight .tv-lineup header { min-height: 18px; padding-block: 0; }
.lt--lineup.is-lineup-tight .tv-lineup__row { min-height: 0; padding-block: 0; }
.lt--lineup.is-lineup-tight .tv-lineup__identity strong { line-height: 1; }
.lt--lineup.is-lineup-tight.is-lineup-short .tv-lineup__identity strong,
.lt--lineup.is-lineup-tight.is-lineup-short .tv-lineup__row > b { font-size:8px; }

/* Formation has its own fixed canvas: inline-size containment must never shrink a flex item to zero. */
.player .broadcast-layer .lt.lt--tv.lt--formation,
.player .broadcast-layer .lt.lt--tv.lt--formation.is-in {
  display:block; top:var(--formation-top,50px); bottom:auto; right:auto; left:50%;
  width:var(--formation-width,56%); max-width:none; height:var(--formation-height,0px); max-height:none; overflow:hidden; contain:layout size;
  transform:translateX(-50%); translate:none; transition:opacity 280ms ease;
}
.tv-formation {
  position:absolute; left:0; top:0; width:1100px; min-width:0; container-type:inline-size; box-sizing:border-box; transform:scale(var(--formation-scale,1)); transform-origin:top left;
  border:1px solid var(--event-team-color,#6ab7ed); border-radius:10px; overflow:hidden;
  color:#fff; background:transparent;
  font-family:var(--font-bug); box-shadow:0 9px 28px #0009,0 0 16px color-mix(in srgb,var(--event-team-color,#6ab7ed) 12%,transparent);
}
.tv-formation header {
  display:grid; grid-template-columns:minmax(0,1fr) 31%; align-items:stretch;
  height:var(--formation-header-height,52px); gap:0; border-bottom:1px solid #b4c9d333;
  background:linear-gradient(110deg,#0b1824,#050a10);
}
.tv-formation__team {
  display:flex; align-items:center; gap:2.5%; min-width:0; padding:1% 6% 1% 3%; position:relative;
  background:linear-gradient(110deg,color-mix(in srgb,var(--event-team-color,#6ab7ed) 42%,#07131c),#091b20);
  clip-path:polygon(0 0,100% 0,94% 100%,0 100%);
}
.tv-formation__team::after {
  content:''; position:absolute; right:3%; top:-10%; height:120%; width:2px;
  background:var(--event-team-color,#6ab7ed); transform:skewX(-23deg);
}
.tv-formation header img { width:clamp(26px,5.5cqw,64px); height:82%; object-fit:contain; flex-shrink:0; }
.tv-formation header strong { font-size:clamp(13px,3.3cqw,36px); font-weight:800; line-height:1.05; text-transform:uppercase; overflow-wrap:anywhere; }
.tv-formation__title { display:flex; flex-direction:column; align-items:center; justify-content:center; padding-right:5%; }
.tv-formation__title b { font-size:clamp(14px,3.5cqw,38px); line-height:1.05; letter-spacing:.02em; }
.tv-formation__title span { color:var(--event-team-color,#6ab7ed); font-size:clamp(12px,2.4cqw,27px); font-weight:800; letter-spacing:.14em; line-height:1.1; }
.tv-formation__body { display:grid; grid-template-columns:23% minmax(0,1fr); height:var(--formation-field-height,300px); min-height:0; }
.tv-formation aside { padding:6% 8%; min-width:0; box-sizing:border-box; border-right:1px solid #b4c9d326; background:linear-gradient(120deg,#02090de6,#09171c80); overflow-wrap:anywhere; }
.tv-formation aside h3 { margin:0 0 .7em; font-size:clamp(10px,1.9cqw,21px); line-height:1.2; letter-spacing:.03em; }
.tv-formation aside p { margin:0 0 .45em; display:flex; gap:.45em; font-size:clamp(9px,1.65cqw,18px); line-height:1.18; }
.tv-formation aside p b { color:var(--event-team-color,#6ab7ed); min-width:1.25em; }
.tv-formation aside .tv-formation__empty { color:#a9b9c6; }
.tv-formation__pitch { position:relative; min-width:0; margin:2% 3% 3%; container-type:size; --formation-marker-size:40px; }
.tv-formation__pitch > svg { position:absolute; inset:0; width:100%; height:100%; }
.tv-pitch__lines, .tv-pitch__goals { fill:none; stroke:#d3ddc7c9; stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; }
.tv-pitch__goals { stroke:#d9e1d4a6; stroke-width:1.8; }
.tv-pitch__spot { fill:#d3ddc7c9; }
.tv-pitch__grass { opacity:.86; }
.tv-pitch__texture { opacity:.055; }
.tv-formation__player { position:absolute; transform:translate(-50%,calc(var(--formation-marker-size) / -2)); display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
.tv-formation__player > b {
  display:grid; place-items:center; box-sizing:border-box;
  width:var(--formation-marker-size); height:var(--formation-marker-size);
  border:2px solid var(--event-team-color,#6ab7ed); border-radius:50%;
  background:linear-gradient(#203c30,#030b09); box-shadow:0 2px 6px #0008,inset 0 1px 2px #ffffff40;
  font-size:clamp(13px,min(3.3cqw,8cqh),30px); font-weight:800; line-height:1;
}
.tv-formation__player > span {
  box-sizing:border-box; max-width:100%; padding:0; border:0; border-radius:0;
  background:transparent; box-shadow:none; color:#fff; text-shadow:0 1px 2px #000,0 0 5px #0009;
  font-size:20px; font-weight:600; line-height:1.08; overflow-wrap:anywhere;
}
.player .broadcast-layer .adslot[data-broadcast-cue="formation"] {
  width:min(14%,120px); max-width:14%;
}

/* Event sponsorship is independent of rotation. One compact picture-relative
   footprint keeps every cue clear of the centre graphic and the controls. */
.player .broadcast-layer #adslot {
  width:min(12%,96px); max-width:12%; right:var(--ov-pad-sm,8px);
  bottom:var(--sponsor-bottom,var(--ov-pad-sm,6px)); transition:opacity 180ms ease;
}
.player .broadcast-layer #adslot .adslot__mark {
  width:auto; height:auto; max-width:100%; max-height:44px;
}
.player .broadcast-layer #adslot .adslot__by {
  font-size:clamp(6px,1cqw,9px); line-height:1.15; letter-spacing:.04em;
}
.player:is(:fullscreen, :-webkit-full-screen, .is-pseudo-fs) .broadcast-layer #adslot {
  width:min(12%,144px);
}
.player:is(:fullscreen, :-webkit-full-screen, .is-pseudo-fs) .broadcast-layer #adslot .adslot__mark {
  max-height:66px;
}

/* Phone picture chrome stays proportional rather than hitting desktop floors. */
@container livo-picture (max-width: 600px) {
  .scorebug { width:clamp(168px,46cqw,240px); height:clamp(23px,6.2cqw,32px); }
  .scorebug__phase { font-size:clamp(5.5px,1.45cqw,8px); }
  .scorebug__clock { font-size:clamp(10px,3cqw,17px); }
  .scorebug__team { font-size:clamp(10px,3.1cqw,17px); }
  .scorebug__score { font-size:clamp(14px,4.3cqw,23px); }
  .scorebug .bug-card { min-width:8px; height:9px; font-size:7px; }
  .channel-bug img { height:clamp(9px,2.7cqw,14px); }
  .channel-bug__live { font-size:clamp(8px,2.3cqw,11px); }
}