/* --- Import Poppins Extra Bold from your local font folder --- */
@font-face {
  font-family: 'PoppinsExtraBold';
  src: url('font/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

/* --- Import Poppins SemiBold from your local font folder --- */
@font-face {
  font-family: 'PoppinsSemiBold';
  src: url('font/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

/* --- Import Poppins Bold from your local font folder --- */
@font-face {
  font-family: 'PoppinsBold';
  src: url('font/Poppins-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* --- Import Poppins Regular for batter's name --- */
@font-face {
  font-family: 'PoppinsRegular';
  src: url('font/Poppins-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

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

/* Ensure no overflow for a pixel‑perfect layout */
html, body {
  overflow: hidden;
}

/* Center the fixed-size container (exactly 1080x1920) */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

/* Fixed container */
.container {
  width: 1080px;
  height: 1920px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --------------------------- */
/* Section A: gamescore         */
/* --------------------------- */
.gamescore {
  height: 275px;
  width: 1080px;
  display: flex;
  flex-direction: row;
}

.visitor-logo,
.home-logo {
  width: 270px;
  padding: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.visitor-logo img,
.home-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.score-middle {
  width: 540px;
  display: flex;
  flex-direction: column;
}

.score-header {
  height: 55px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.score-header .score-cell {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'PoppinsSemiBold', sans-serif;
  font-weight: 600;
  font-size: 50px;
  color: black;
}

.visitor-score,
.home-score {
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.visitor-score .score-cell,
.home-score .score-cell {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'PoppinsExtraBold', sans-serif;
  font-weight: 800;
  font-size: 90px;
  color: white;
}

/* --------------------------- */
/* Section B: line-score       */
/* --------------------------- */
.line-score {
  height: 285px;
  width: 1080px;
  display: flex;
  flex-direction: column;
}

.line-score-heading {
  height: 45px;
  background-color: #464646;
  display: flex;
}

.line-score-heading .line-score-left {
  width: 325px;
}

.line-score-heading .line-score-right {
  width: 755px;
  display: flex;
}

.line-score-heading .score-cell {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'PoppinsSemiBold', sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: white;
}

.away-line-score,
.home-line-score {
  height: 120px;
  display: flex;
}

.away-line-score .line-score-left,
.home-line-score .line-score-left {
  width: 325px;
  display: flex;
  align-items: center;
}

.line-score-logo {
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
}

.line-score-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.line-score-buffer {
  width: 20px;
  height: 100%;
}

.line-score-abbrev {
  width: 205px;
  font-family: 'PoppinsExtraBold', sans-serif;
  font-weight: 800;
  font-size: 65px;
  color: black;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8px;
}

.away-line-score .line-score-right,
.home-line-score .line-score-right {
  width: 755px;
  display: flex;
}

.away-line-score .line-score-right .score-cell,
.home-line-score .line-score-right .score-cell {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'PoppinsBold', sans-serif;
  font-weight: bold;
  font-size: 66px;
  color: black;
}

/* --------------------------- */
/* Section C: at-bat           */
/* --------------------------- */
.at-bat {
  position: relative;
  height: 540px;
  background: linear-gradient(to right, #0000ff 75%, black 100%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#batting-team-logo-img {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 540px;
  max-height: 540px;
  object-fit: contain;
  opacity: 0.45;
  z-index: 1;
}

#batting-headshot-img {
  position: absolute;
  right: 500px;
  bottom: 0;
  height: 550px;
  width: auto;
  object-fit: contain;
  opacity: 1;
  z-index: 3;
}

#batting-overlay {
  position: absolute;
  left: calc(50% - 50px);
  right: 40px;
  top: 40px;
  bottom: 40px;
  border: 6px solid white;
  box-shadow: 0 0 0 14px var(--outer-border-color);
  z-index: 2;
  --outer-border-color: #000;
  --overlay-primary-color: #000;
  display: flex;
  flex-direction: column;
}

#batting-overlay .overlay-top {
  flex: 0 0 60px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  transform: translateY(-2px);
}

#batting-overlay .overlay-top-text {
  font-family: 'PoppinsRegular', sans-serif;
  font-weight: 600;
  font-size: 50px;
  color: inherit;
  text-transform: uppercase;
}

#batting-overlay .overlay-top-right {
  display: flex;
  align-items: center;
}

#batting-overlay .overlay-top-right .uniform-number {
  font-family: 'PoppinsRegular', sans-serif;
  font-weight: 600;
  font-size: 45px;
  color: var(--overlay-primary-color);
  margin-right: 15px;
}

#batting-overlay .overlay-top-right .position-box {
  background-color: var(--overlay-primary-color);
  padding: 3px 8px;
  border-radius: 4px;
}

#batting-overlay .overlay-top-right .position-box .position-text {
  font-family: 'PoppinsRegular', sans-serif;
  font-weight: 600;
  font-size: 45px;
  color: white;
  text-transform: uppercase;
}

#batting-overlay .overlay-mid {
  flex: 0 0 85px;
  background-color: transparent;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

#batting-overlay .overlay-mid-text {
  font-family: 'PoppinsExtraBold', sans-serif;
  font-weight: 800;
  font-size: 60px;
  color: white !important;
  text-transform: uppercase;
}

#batting-overlay .overlay-third {
  flex: 0 0 125px;
  background-color: #464646;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 8px;
  gap: 0;
  justify-content: center;
}

#batting-overlay .overlay-third-line1,
#batting-overlay .overlay-third-line2 {
  margin: 0;
  line-height: 1;
  padding-left: 0;
}

#batting-overlay .overlay-third-line1 {
  font-family: 'PoppinsSemiBold', sans-serif;
  font-weight: 600;
  font-size: 45px;
  color: white;
  text-transform: uppercase;
  padding-left: 8px;
}

#batting-overlay .overlay-third-line2 {
  font-family: 'PoppinsSemiBold', sans-serif;
  font-weight: 600;
  font-size: 55px;
  color: white;
  text-transform: uppercase;
  padding-left: 8px;
}

#batting-overlay .overlay-bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 5px 8px 16px 8px;
  gap: 1px;
}

#batting-overlay .stats-header,
#batting-overlay .stats-value {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
}

#batting-overlay .stats-header .stat-col,
#batting-overlay .stats-value .stat-col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  margin: 0;
  line-height: 1;
}

/* Apply 2px bottom padding for header cells */
#batting-overlay .stats-header .stat-col {
  font-family: 'PoppinsSemiBold', sans-serif;
  font-weight: 600;
  font-size: 28px;
  color: white;
  text-transform: uppercase;
  padding-bottom: 2px;
}

/* Apply 4px bottom padding for stat values */
#batting-overlay .stats-value .stat-col {
  font-family: 'PoppinsSemiBold', sans-serif;
  font-weight: 600;
  font-size: 36px;
  color: white;
  text-transform: uppercase;
  padding-bottom: 4px;
}

/* Add a 10px gap between the first stat group and the second stat group */
#batting-overlay .overlay-bottom > div:nth-child(3) {
  margin-top: 9px;
}

/* --------------------------- */
/* Section D: Split Section    */
/* --------------------------- */
.section-d {
  display: flex;
  width: 1080px;
  height: 820px;
}

.section-d .column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Left column (live mode baseline) */
.left-column {
  background-color: black;
}

/* Logo row in Section D (baseline for live mode) */
.left-column .logo-row {
  height: 110px;
  background-color: #abaaaa;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-column .logo-row img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Stats rows baseline for live mode */
.left-column .stats-rows {
  display: flex;
  flex-direction: column;
}

.left-column .stat-row {
  height: 65px;
  background-color: white;
  border-bottom: 2px solid black;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-family: 'PoppinsSemiBold', sans-serif;
  font-weight: 600;
  font-size: 40px;
  color: black;
  text-transform: uppercase;
}

/* Each stat row is a flex container */
.stat-row {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background-color: white;
  border-bottom: 2px solid black;
  font-family: 'PoppinsSemiBold', sans-serif;
  font-weight: 600;
  font-size: 40px;
  color: black;
  text-transform: uppercase;
}

/* Define column widths and alignment so the same category is aligned across rows */
.player-number {
  width: 50px;        /* fixed width for jersey numbers */
  text-align: left;
  font-size: 30px;
  font-weight: 500;   /* you can set a different weight if desired */
  margin-right: 12px;
}

.player-name {
  flex: 1;            /* names take up the remaining space */
  text-align: left;
  font-size: 38px;
  font-weight: 600;    /* adjust the size if needed */
  margin-right: 12px;
}

.player-pos {
  width: 40px;        /* fixed width for position */
  text-align: left;
  font-weight: 500;
  font-size: 30px;
  margin-right: 12px;
}

.player-avg {
  width: 70px;        /* fixed width for batting average */
  text-align: left;
  font-weight: 500;
  font-size: 30px;
  margin-right: 12px;
}

.player-game-stats {
  width: 60px;        /* fixed width for game stats */
  text-align: left;
  font-size: 30px;
  font-weight: 500;
}