@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/fonts/BarlowCondensed-Bold.ttf") format("truetype");
}
:root {
  --bg: #080d0a;
  --text: #fff;
  --muted: #b9c1b3;
  --app-green: #79bd4b;
  --track: #131a12;
  --home: var(--app-green);
  --away: var(--app-green);
  --scoreboard-number-font: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  color-scheme: dark;
}
html, body { background: #080d0a; }
body { isolation: isolate; }
.hidden { display: none !important; }
body > main { position: relative; z-index: 1; }
.controls { z-index: 5; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Both views use a centred 16:5 artboard on large screens. */
.match-screen {
  min-height: 100vh; height: 100vh; padding: 0;
  display: grid; place-items: center; overflow: hidden;
}
.scoreboard {
  --arena-unit: calc(100cqw / 2560);
  width: min(100%, 320vh); max-width: none; margin: 0;
  position: relative; aspect-ratio: 16 / 5; container-type: inline-size;
  color: #fff; font-family: var(--scoreboard-number-font);
}
.score-header, .shooting-panel, .lower-stat {
  border: max(.5px, calc(1.5 * var(--arena-unit))) solid #42603a8c;
  border-radius: calc(8 * var(--arena-unit));
  box-shadow: 0 calc(9 * var(--arena-unit)) calc(22 * var(--arena-unit)) #0005,
    inset 0 1px #ffffff09, inset 0 -1px #0005;
}
.score-header {
  position: absolute; left: 8.515625%; top: 9%; width: 82.96875%; height: 23%;
  background: linear-gradient(116deg, #393b36, #343631 47%, #30342e);
}
.score-header::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 0;
  height: calc(2 * var(--arena-unit));
  background: linear-gradient(90deg, transparent, #6493477a, transparent);
}
.score-header .team { position: static; min-width: 0; }
.team-logo-plate {
  position: absolute; top: calc(-4 * var(--arena-unit));
  width: calc(192 * var(--arena-unit)); height: calc(192 * var(--arena-unit));
  display: grid; place-items: center; z-index: 2;
  background: #f4f2ec; border: max(.5px, calc(1 * var(--arena-unit))) solid #d8d7cf;
  border-radius: calc(7 * var(--arena-unit));
  box-shadow: 0 calc(8 * var(--arena-unit)) calc(16 * var(--arena-unit)) #0005, inset 0 1px #fff9;
}
.team.home .team-logo-plate { left: calc(-67.2 * var(--arena-unit)); }
.team.away .team-logo-plate { right: calc(-67.2 * var(--arena-unit)); }
.team-logo { width: 79%; height: 79%; object-fit: contain; }
.logo-placeholder {
  color: #5a6550; font-family: Arial, sans-serif; font-size: calc(24 * var(--arena-unit));
  font-weight: 700; letter-spacing: .08em;
}
.team-logo-plate:has(img:not(.hidden)) .logo-placeholder,
.player-team-logo-plate:has(img:not(.hidden)) .logo-placeholder { display: none; }
.score-header .team-name {
  position: absolute; top: 50%; transform: translateY(-50%); margin: 0;
  max-width: calc(455 * var(--arena-unit));
  font-size: calc(55 * var(--arena-unit)); line-height: 1.2; font-weight: 700;
  letter-spacing: calc(1 * var(--arena-unit)); color: #f4f3ed; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.score-header .home .team-name { left: calc(181 * var(--arena-unit)); }
.score-header .away .team-name { right: calc(181 * var(--arena-unit)); text-align: right; }
.score-value {
  position: absolute; top: 50%; transform: translateY(-53%);
  width: calc(234 * var(--arena-unit)); text-align: center;
  font-size: calc(160 * var(--arena-unit)); line-height: 1; font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: calc(1 * var(--arena-unit));
  color: #fff; text-shadow: 0 calc(3 * var(--arena-unit)) calc(3 * var(--arena-unit)) #0003;
}
.score-value.home { left: calc(667 * var(--arena-unit)); }
.score-value.away { right: calc(667 * var(--arena-unit)); }
.match-time {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(222 * var(--arena-unit)); display: grid; justify-items: center; gap: calc(8 * var(--arena-unit));
}
.match-period { font-size: calc(27 * var(--arena-unit)); line-height: 1; font-weight: 600; letter-spacing: calc(3 * var(--arena-unit)); color: var(--app-green); }
.match-clock { font-size: calc(62 * var(--arena-unit)); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: calc(2 * var(--arena-unit)); }

/* Preserve FT, 2P and 3P as three rows, with a stable team on each side. */
.shooting-panel {
  position: absolute; left: 8.515625%; top: 35%; width: 82.96875%; height: 38%; margin: 0;
  padding: calc(14 * var(--arena-unit)) calc(36 * var(--arena-unit));
  display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--arena-unit));
  background: linear-gradient(113deg, #2e312b, #292c27 58%, #2b2f29);
}
.shoot-row {
  display: grid; grid-template-columns: minmax(0,1fr) calc(112 * var(--arena-unit)) minmax(0,1fr);
  gap: calc(36 * var(--arena-unit)); align-items: center; min-height: 0;
}
.shoot-row + .shoot-row { margin-top: 0; }
.shoot-stat { min-width: 0; }
.shoot-value {
  display: flex; align-items: baseline; gap: calc(22 * var(--arena-unit)); margin-bottom: calc(7 * var(--arena-unit));
}
.away-value { justify-content: flex-end; }
.percentage {
  font-size: calc(56 * var(--arena-unit)); line-height: 1; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.made-attempted { font-size: calc(34 * var(--arena-unit)); font-weight: 600; color: #e0e2d9; white-space: nowrap; }
.shoot-label { font-size: calc(44 * var(--arena-unit)); line-height: 1; text-align: center; letter-spacing: calc(2 * var(--arena-unit)); font-weight: 700; color: #f4f2ec; }
.bar { height: calc(14 * var(--arena-unit)); width: 100%; background: var(--track); border-radius: calc(1 * var(--arena-unit)); overflow: hidden; box-shadow: inset 0 1px 2px #0005; }
.bar-fill { width: 0; height: 100%; background: var(--app-green); transition: width 550ms ease; }

.lower-stats {
  position: absolute; left: 8.515625%; top: 76%; width: 82.96875%; height: 16.5%;
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: calc(16 * var(--arena-unit));
}
.lower-stat { min-width: 0; padding: calc(12 * var(--arena-unit)) calc(24 * var(--arena-unit)); background: linear-gradient(118deg, #272a25, #232620); }
.lower-label {
  min-height: calc(34 * var(--arena-unit)); display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: calc(26 * var(--arena-unit)); line-height: 1; font-weight: 600;
  letter-spacing: calc(1.2 * var(--arena-unit)); color: #c6cabf; white-space: nowrap;
}
.lower-stat.long .lower-label { font-size: calc(24 * var(--arena-unit)); letter-spacing: calc(.6 * var(--arena-unit)); }
.lower-value { display: grid; grid-template-columns: 1fr 1fr; position: relative; margin-top: calc(4 * var(--arena-unit)); }
.lower-value::after { content: ""; position: absolute; width: 1px; height: 66%; top: 22%; left: 50%; background: #63775750; }
.lower-value .stat-number { font-size: calc(64 * var(--arena-unit)); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; color: #fff; }
.stat-separator { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.flash { animation: arena-value-change 450ms ease-out; }
@keyframes arena-value-change { from { opacity: .82; } to { opacity: 1; } }

/* Narrow displays retain the same comparisons with enough room for text. */
@media (max-width: 720px) and (max-aspect-ratio: 2 / 1) {
  .match-screen { min-height: 100vh; height: auto; padding: 22px 16px 28px; overflow: visible; }
  .scoreboard {
    --arena-unit: calc(100cqw / 1000); width: 100%; aspect-ratio: auto;
    display: grid; gap: 18px;
  }
  .score-header {
    position: relative; left: auto; top: auto; width: 100%; height: 190px;
  }
  .team-logo-plate { width: 58px; height: 58px; top: 12px; }
  .team.home .team-logo-plate { left: 12px; }
  .team.away .team-logo-plate { right: 12px; }
  .score-header .team-name { top: 81px; transform: none; width: 44%; max-width: none; font-size: 18px; text-align: center; }
  .score-header .home .team-name { left: 6px; }
  .score-header .away .team-name { right: 6px; }
  .score-value { top: 131px; transform: none; width: 40%; font-size: 48px; }
  .score-value.home { left: 4%; }
  .score-value.away { right: 4%; }
  .match-time { width: 120px; top: 28px; transform: translateX(-50%); gap: 6px; }
  .match-period { font-size: 15px; }
  .match-clock { font-size: 29px; }
  .shooting-panel { position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 245px; padding: 14px 12px; gap: 15px; }
  .shoot-row { grid-template-columns: minmax(0,1fr) 32px minmax(0,1fr); gap: 9px; }
  .shoot-value { flex-wrap: wrap; gap: 3px 7px; margin-bottom: 6px; }
  .percentage { font-size: 25px; }
  .made-attempted { font-size: 15px; }
  .shoot-label { font-size: 19px; }
  .bar { height: 7px; }
  .lower-stats { position: relative; left: auto; top: auto; width: 100%; height: auto; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .lower-stat { padding: 10px 9px; }
  .lower-label, .lower-stat.long .lower-label { min-height: 27px; font-size: 14px; white-space: normal; letter-spacing: .4px; }
  .lower-value { margin-top: 5px; }
  .lower-value .stat-number { font-size: 33px; }
  .logo-placeholder { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bar-fill { transition: none; }
  .flash { animation: none; }
}