@font-face {
  font-family: 'Khand';
  src: url('../Images/Fonts/Khand-Regular.txt') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Khand';
  src: url('../Images/Fonts/Khand-Bold.txt') format('truetype');
  font-weight: bold;
  font-style: normal;
}

:root {
  --player-in-color: #00FF00;
  --player-out-color: #FF0000;
  --player-border: #ffffff;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Khand', sans-serif;
  
  /* Layer 1 (top): Texture overlay | Layer 2 (bottom): Blue base background */
  background-image: url('../Images/texture.png'), url('../Images/blue-bg.png');
  
  /* Position both layers relative to top-left */
  background-position: top left, center center;
  background-repeat: no-repeat, no-repeat;
  
  /* Force the texture image to fit 100% width and 100% height without cropping */
  background-size: 100% 100%, cover;
  
  overflow: hidden;
}

/* Splash Screen */
.splash {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  animation: blink 6.5s infinite;
}

.splash h1 {
  font-size: 10rem;
  font-weight: 900;
  margin: 0;
}

.hideMain {
  display: none !important;
}

/* 3-Column Layout Base */
.layout-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  padding: 2rem; /* Optional outer border spacing */
  gap: 2rem; /* Creates explicit spacing between each div */  
  position: relative;
}

/* Common Section Container */
.stacked-div {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: white;
  background: transparent;
}

/* Left Team Section (Div 1 Polygon) */
.div1 {
  width: 28%; /* Fixed proportions to allow space in middle */
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 8rem 1rem;
  --div1neon-color: #FFF;
}

/* Center Display Section (Div 2) */
.div2 {
  flex: 1; /* Automatically expands to take remaining center space */
  background: transparent;
  text-align: center;
  display: flex; 
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0rem 27rem;
  min-width: 40%;
}

/* Right Team Section (Div 3 Polygon) */
.div3 {
  width: 28%; /* Fixed proportions to match left side */
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  --div3neon-color: #FFF;
  padding: 8rem 1rem;
}

.stack-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 86%;
  width: 100%;
}


/* Logos & Graphics - Enlarged for Big Screens */
.logo-img {
  width: 240px;  /* Increased from 180px */
  height: 240px; /* Increased from 180px */
  object-fit: contain;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.4))
  drop-shadow(0 0 15px rgba(0, 0, 0, 0.4));
}

.raid-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  margin-top: 83px;
}

/* Equal width wrappers on both sides to keep the video perfectly centered */
.pointer-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
}

.pointer-wrapper.left {
  justify-content: flex-end; /* Align left mascot adjacent to video */
  padding-right: 15px;
}

.pointer-wrapper.right {
  justify-content: flex-start; /* Align right mascot adjacent to video */
  padding-left: 15px;
}

/* Mascot Pointer Image Sizing & Mirroring */
.pointer-img {
  height: 250px; /* Adjust height to match your desired mascot scale */
  width: auto;
  object-fit: contain;
}

.hide-element {
  opacity: 0 !important;
  pointer-events: none;
}

.show-element {
  opacity: 1 !important;
}

.Main_logo-img {
  width: 380px;
  height: auto;
  object-fit: contain;
}
.Main_logo-img2 {
  width: 800px;
  height: auto;
  margin-top: auto; /* Anchors the logo to the bottom */
  margin-bottom: 0rem;
}

/* Center Header & Timer */
#Part {
  background: linear-gradient(to bottom, #35a1e6 0%, #0d355f 100%);
  color: white;
  padding: 0.3rem 3rem;
  border-radius: 50px;
  font-size: 5rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;

  /* Top-Left Extra Dark Box Shadow */
  box-shadow: 
    -8px -8px 12px rgba(0, 0, 0, 1),
    -16px -16px 28px rgba(0, 0, 0, 0.95),
    -24px -24px 40px rgba(0, 0, 0, 0.85);
}

.timer-text {
  color: #ffffff;
  font-size: 11.5rem;
  font-weight: 900;
  line-height: 1;
}

/* Team Scores - Enlarged for Long-Distance Viewing */
.score {
  font-size: 14rem; /* Increased from 11rem */
  font-weight: 900;
  line-height: 0.9;
  margin: 0.2rem 0;
}

/* Team Names - Scaled Up */
.team-name-home,
.team-name-away {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 900;
  font-size: 4.8rem; /* Increased from 3.5rem */
  text-transform: uppercase;
  line-height: 1;
}

.team-Fname,
.team-Lname {
  display: block;
  text-align: center;
}

/* Player Indicator Strips - Enlarged Indicators */
.player-row-home,
.player-row-away {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0;
}

.player-strip-border,
.tie-breaker-strip-border {
  background: #000;
  padding: 6px;
  border-radius: 8px;
  border: 2px solid #444;
}

.Homeplayer-strip,
.Awayplayer-strip,
.TieBreaker-Homestrip,
.TieBreaker-Awaystrip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #000000;
  padding: 8px 16px;
}

.player-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 36px;  /* Increased scale */
  height: 48px; /* Increased scale */
  justify-content: center;
}

.head {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.body {
  width: 28px;
  height: 24px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  margin-top: 2px;
}

.player-icon.in .head,
.player-icon.in .body {
  background-color: var(--player-in-color);
}

.player-icon.out .head,
.player-icon.out .body {
  background-color: var(--player-out-color);
}

#TieBreakerScore {
  color: #FFFFFF;
  font-size: 9rem;
  font-weight: 1000;
  text-align: center;
  white-space: nowrap !important;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
  align-items: center;

  font-size: 11.5rem;
  font-weight: 900;
  line-height: 1;  
}

.tie-player-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.tie-player-icon.in {
  background-color: var(--player-in-color);
}

.tie-player-icon.out {
  background-color: var(--player-out-color);
}

.HomeTieBreakScore,
.AwayTieBreakScore {
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
}

/* Team-Specific Text Overrides */
.home-team-u_mumba, .away-team-u_mumba { color: #fff; }
.home-team-puneri_paltan, .away-team-puneri_paltan { color: #fff; }