/* 1920x1080 broadcast output. Layout measured from the reference frames; every text is centred in its box. */

@font-face {
  font-family: 'PF Din Comp';
  src: url('/assets/fonts/PFDinTextCompPro-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: block;
  /* Pin vertical metrics so text sits identically on macOS, Windows and Linux (OBS/CEF). */
  ascent-override: 75%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'SB Segoe';
  src: local('Segoe UI'), local('SegoeUI'), local('Selawik');
  ascent-override: 75%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  --din: 'PF Din Comp', 'DIN Condensed', 'Arial Narrow', sans-serif;
  --sbfont: var(--din);
  /* distance from line-box top to the middle of capital letters, in em */
  --cmid: 0.402;
  --sbcmid: 0.402;
  --red: #e2231a;
  --red-dark: #a51715;
}

body.font-segoe {
  --sbfont: 'SB Segoe', 'Segoe UI', sans-serif;
  --sbcmid: 0.40;
}

html, body {
  margin: 0;
  padding: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: transparent;
}

body.bg-black { background: #000; }
body.bg-checker {
  background: repeating-conic-gradient(#2a2a2a 0 25%, #3a3a3a 0 50%) 0 0 / 40px 40px;
}
body.bg-green { background: #00b140; }

#stage {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  transform-origin: 0 0;
  font-family: var(--din);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.gfx { position: absolute; visibility: hidden; }
.gfx.on { visibility: visible; }

/* A single line of text: the middle of its capitals sits on --cy, its ink is centred on --cx.
   --dx is set by graphics.js from the real glyph bounds so side bearings never push text off centre. */
.t {
  position: absolute;
  line-height: 1;
  white-space: nowrap;
  font-size: calc(var(--fs) * 1px);
  top: calc(var(--cy) * 1px - var(--cmid) * var(--fs) * 1px);
  left: calc(var(--cx) * 1px + var(--dx, 0px));
  transform: translateX(-50%);
}
.t > span { display: inline-block; }
/* left / right anchored variants: --cx is the left edge, --rx the distance from the right edge */
.t.l { transform: none; }
.t.r { left: auto; right: calc(var(--rx) * 1px); transform: none; }

/* ================================================================ FULLSCREEN (VS / FINAL) */

.fs {
  left: 250px;
  top: 141px;
  width: 1420px;
  height: 824px;
}

.fs-head {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 187px;
  background: var(--red);
}
.fs-head img {
  position: absolute;
  left: 577.5px; top: 20px;
  width: 265px; height: 147px;
  object-fit: contain;
}

.fs-band {
  position: absolute;
  left: 0; top: 187px;
  width: 100%; height: 79px;
  background: linear-gradient(var(--red-dark) 0 77px, #a40503 77px);
  color: #fff;
}
.fs-title { --fs: 64.8; --cy: 39; --cx: 710; text-transform: uppercase; }

.fs-body {
  position: absolute;
  left: 0; top: 266px;
  width: 100%; height: 487px;
  background: #e5e6e6;
  overflow: hidden;
  color: #000;
}
.fs-body::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 1px; height: 1px;
  background: #ededed;
}
.fs-rings { position: absolute; left: 0; top: 0; width: 1420px; height: 487px; }

.fs-logo {
  position: absolute;
  top: 39px;
  width: 256px; height: 269px;
}
.fs-logo.home { left: 170px; }
.fs-logo.away { left: 994px; }
.fs-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.fs-name { --fs: 65; --cy: 386.5; text-transform: uppercase; }
.fs-name.home { --cx: 298; }
.fs-name.away { --cx: 1122; }

.fs-vs { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.fs-vs .dash { position: absolute; top: 217px; width: 22px; height: 3px; background: #000; }
.fs-vs .dash.l { left: 576px; }
.fs-vs .dash.r { left: 822px; }
.fs-vs .vs-text { --fs: 218; --cy: 216; --cx: 710; }
.fs-vs .vs-text > span { transform: scaleX(0.95); letter-spacing: -6.3px; }

.fs-score { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.fs-score .box {
  position: absolute;
  top: 157px;
  width: 123px; height: 123px;
  background: #000;
  box-shadow: 0 0 0.5px 2px rgba(255, 255, 255, 0.72);
  color: #fff;
  overflow: hidden;
}
.fs-score .box.home { left: 576px; }
.fs-score .box.away { left: 721px; }
.fs-score .box .t { --fs: 108; --cy: 61.5; --cx: 61.5; }

/* statistics variant (root class fs--stats): smaller logos at the sides, rows of figures in the middle */
.fs--stats .fs-logo { top: 107px; width: 200px; height: 210px; }
.fs--stats .fs-logo.home { left: 90px; }
.fs--stats .fs-logo.away { left: 1130px; }
.fs--stats .fs-name { --fs: 46; --cy: 365; }
.fs--stats .fs-name.home { --cx: 190; }
.fs--stats .fs-name.away { --cx: 1230; }
.fs-statrows { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.st-row { position: absolute; left: 380px; width: 660px; height: 46px; }
.st-row .t { --cy: 18; }
.st-v { --fs: 44; font-variant-numeric: tabular-nums; }
.st-v.home { --cx: 50; }
.st-v.away { --cx: 610; }
.st-label { --fs: 30; --cx: 330; color: #3c3c3c; text-transform: uppercase; letter-spacing: .02em; }
.st-bar { position: absolute; left: 0; right: 0; top: 40px; height: 6px; display: flex; gap: 2px; }
.st-bar i { display: block; height: 100%; }
.st-bar .h { background: var(--red); transform-origin: 100% 50%; }
.st-bar .a { background: #3b3b3b; transform-origin: 0 50%; }

.fs-foot {
  position: absolute;
  left: 0; top: 753px;
  width: 100%; height: 71px;
  background: linear-gradient(#adadad 0 1px, #828282 1px 2px, #787878 2px 4px, #808080 4px);
  color: #fff;
}
.fs-foot .t { --fs: 44; --cy: 37; --cx: 710; text-transform: uppercase; white-space: pre; }

/* ================================================================ SCOREBUG */

.sb { left: 0; top: 0; width: 1920px; height: 200px; font-family: var(--sbfont); --cmid: var(--sbcmid); }

.sb-top { position: absolute; left: 592px; top: 47px; width: 737px; height: 61px; }
.sb-logo {
  position: absolute; top: 0;
  width: 101px; height: 61px;
  background: #fff;
  overflow: hidden;
}
.sb-logo.home { left: 0; }
.sb-logo.away { left: 636px; }
.sb-logo img { width: 100%; height: 100%; object-fit: contain; display: block; transform-origin: 50% 50%; }

.sb-bar {
  position: absolute; left: 101px; top: 0;
  width: 535px; height: 61px;
  background: #b4b5b5 url('/assets/scorebug-texture.png') 0 0 / 535px 61px;
  color: #000;
  overflow: hidden;
}
/* bar-local x: stage x - 693, y: stage y - 47 */
.sb-name { --fs: 48; --cy: 30.5; text-transform: uppercase; }
.sb-name.home { --cx: 66.5; }
.sb-name.away { --cx: 468.5; }
.sb-score { --fs: 60.5; --cy: 30.5; font-variant-numeric: tabular-nums; }
.sb-score.home { --cx: 185; }
.sb-score.away { --cx: 350; }
.sb-league { position: absolute; left: 217.5px; top: 10.5px; width: 100px; height: 40px; object-fit: contain; }

/* lower row spans the full scorebug width (x 592..1328) so a second penalty fits under each logo */
.sb-low { position: absolute; left: 592px; top: 108px; width: 737px; height: 84px; }
.sb-pen {
  position: absolute; top: 0;
  width: 133px; height: 42px;
  background: #6d0000;
  color: #fff;
  overflow: hidden;
  transition: left .3s cubic-bezier(.16, .84, .24, 1), width .3s cubic-bezier(.16, .84, .24, 1);
}
/* one penalty: a single box under the team name */
.sb-pen.home { left: 101px; }
.sb-pen.away { left: 503px; }
/* two penalties: logo + name width (234px) split into two equal boxes, the one ending first on the inside */
.sb-pen.second { width: 117px; }
.sb-pen.home.second { left: 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .45); }
.sb-pen.away.second { left: 620px; box-shadow: inset 1px 0 0 rgba(0, 0, 0, .45); }
.two-home .sb-pen.home:not(.second) { left: 117px; width: 117px; }
.two-away .sb-pen.away:not(.second) { width: 117px; }
/* the time stays centred while the box resizes */
.sb-pen .t { --fs: 44.5; --cy: 21; left: 50%; font-variant-numeric: tabular-nums; }

.sb-clock {
  position: absolute; left: 234px; top: 0;
  width: 269px; height: 41px;
  background: #000013;
  color: #fff;
  overflow: hidden;
}
.sb-clock .t { --fs: 44.5; --cy: 20.5; }
/* period and time sit the same distance from the left / right edge of the box */
.sb-clock .per { --cx: 22; transform: none; text-transform: uppercase; }
/* game over: FINAL centred in the box, no time */
.sb-clock.final .per { --cx: 134.5; transform: translateX(-50%); }
.sb-clock .time { left: auto; right: 21px; transform: none; font-variant-numeric: tabular-nums; }

.sb-str {
  position: absolute; left: 234px; top: 41px;
  width: 269px; height: 42px;
  background: #165f0a;
  color: #d7d7d7;
  overflow: hidden;
}
.sb-str .t { --fs: 44.5; --cy: 21; }
.sb-str .h { --cx: 52; }
.sb-str .on { --cx: 134.5; }
.sb-str .a { --cx: 217; }

/* ================================================================ REFEREES */

.refs { left: 699px; top: 0; width: 522px; height: 1080px; font-family: var(--sbfont); --cmid: var(--sbcmid); }
.ref-box {
  position: absolute; left: 0;
  width: 522px; height: 52px;
  overflow: hidden;
}
.ref-head { background: #e22118; color: #fff; }
.ref-head .t { --fs: 49; --cy: 26; --cx: 261; text-transform: uppercase; }
.ref-row { background: #e5e5e5; color: #000; }
.ref-row .t { --fs: 40.2; --cy: 26; --cx: 261; }

/* ================================================================ GOAL / PENALTY (bottom left, title safe) */

.ev { left: 96px; top: 875px; width: 690px; height: 128px; font-family: var(--sbfont); --cmid: var(--sbcmid); }
.ev-logo {
  position: absolute; left: 0; top: 0;
  width: 128px; height: 128px;
  background: #fff;
  overflow: hidden;
}
.ev-logo img { position: absolute; inset: 12px; width: 104px; height: 104px; object-fit: contain; }
.ev-row { position: absolute; left: 128px; width: 562px; overflow: hidden; }
.ev-head { top: 0; height: 44px; background: var(--red); color: #fff; }
.ev.penalty .ev-head { background: #6d0000; }
.ev-head .ev-title { --fs: 36; --cy: 22; --cx: 18; text-transform: uppercase; }
.ev-head .ev-time { --fs: 30; --cy: 22; --rx: 16; color: rgba(255, 255, 255, .88); font-variant-numeric: tabular-nums; }
.ev-name { top: 44px; height: 52px; background: #e5e5e5; color: #000; }
.ev-name .t { --fs: 42; --cy: 26; --cx: 18; }
.ev-name .num { font-weight: inherit; color: var(--red); }
.ev.penalty .ev-name .num { color: #6d0000; }
.ev-detail { top: 96px; height: 32px; background: #808080; color: #fff; }
.ev-detail .t { --fs: 24; --cy: 16; --cx: 18; text-transform: uppercase; }