body, html {
    overflow: hidden;
   
}
body{
    
    position: absolute;
   
   padding: 0%;
   margin: 0%;
   left:0%;
   top:0%;
   
   height:100%;
   width:100%;
   background-repeat: no-repeat; /* Prevents the background from repeating */
   background-attachment: fixed; /* Ensures the background stays fixed when scrolling */
   background-size: 100%;
}
body *{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
#gameBody{
    background-color: rgb(0, 0, 0);
    
}
body > .b  .bg{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:2300px;
    height:2000px;
    background-repeat: no-repeat; /* Prevents the background from repeating */
   background-attachment: fixed; /* Ensures the background stays fixed when scrolling */
   background-size: 100%;
    background-image: url("../../assets/gameBg.png");
    background-position: center center;
}
#gameBody > .b  .bg{
  width:10000px;
  height:5000px;
  background-size: 20%;
  background-color: rgb(51, 68, 93);
}
#ground{
    
    width:1500px;
    aspect-ratio: 103/53;
    background-color:rgb(22, 56, 0);
    
    box-shadow: 0px 0px 10px rgba(0, 22, 43, 0.7);
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    
}
#ground #field {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 97%;  /* 100% - 10% × 2 */
    aspect-ratio: 2/1;
    
    background-image: url("../../assets/fieldImg.png");
    background-size: cover;
    
    z-index: -1;
  }
  .player,.predPlr{
    z-index: 2;
    width:5%;
    aspect-ratio: 1/1;
    background-color:rgb(4, 255, 155);
    
    min-height: 0;
    min-width: 0;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    border-radius: 100%;
    transition: background-color 0.2s ,opacity 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.player::before,.predPlr::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80%;  /* 100% - 10% × 2 */
    aspect-ratio: 1/1;
    border-radius: 100%;
    
    background: rgb(24, 46, 34);
    
    z-index: -1;
  }
  .predPlr::before {
    background: rgb(0, 0, 0);
  }
  .predPlr{
    left:auto;
right:0;
height:100%;
width:auto;
transform: translate(50%,-50%);
background: rgb(255, 255, 255);
  }
  .player:hover {
    background-color: yellow;
    font-size: 18px;
  }

body > .b{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width:2000px;
   height:1000px;
   left:0%;
   top:0%;
   transform-origin: top left;
    
    
}
#ball,.predictBall{
    display: flex;
    align-items: center;
    justify-content: center;
    width:5%;
    aspect-ratio: 1/1;
    background-color:rgb(255, 255, 255) !important;
    
    min-height: 0;
    min-width: 0;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    border-radius: 100%;
    z-index: 1;
    pointer-events: auto !important;
    
}
.predictBall{
  z-index: 999;
}
#ball svg{
  transition: opacity 0.2s;
  opacity: 0;
}
.predictBall svg{
  
  opacity: 0;
}

#ball::before,.predictBall::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80%;  /* 100% - 10% × 2 */
    aspect-ratio: 1/1;
    border-radius: 100%;
    
    background: rgb(139, 139, 139);
    
    z-index: -1;
  }
  #statusSelect{
    width:12%;
    aspect-ratio: 78/25;
    background-color: rgb(236, 255, 179);
    position: absolute;
    visibility: hidden;
    flex-direction: row;
    gap:2%;
    display: flex;
    z-index: 20;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    padding:0.3%;
  }
  #statusSelect div p{
width:100%;
margin: 0%;
  }
  #statusSelect > div{
    cursor: pointer;
background-color: rgb(71, 17, 0);
width:calc(100% / 3);
display: flex;
align-items: center;
justify-content: center;
min-width: none;
min-height: 0;
color: rgb(255, 233, 173);
text-align: center;

font-family: Arial, Helvetica, sans-serif;
font-weight: 1000;
  }
  .selectedPlr{
background-color: aliceblue !important;
  }
  .unselectedPlr{
    opacity: 0.5;
    
  }
  .disablePointer{
    pointer-events: none;
  }
  
  .actSelected{
    background-color: rgb(255, 153, 0) !important;
    opacity: 1 !important;
    pointer-events: none;
  }
  .opponent{
    pointer-events: none;
    background-color:rgb(255, 67, 67);
  }
  #goala,#goalb{
height:53%;
aspect-ratio: 59/159;
background-color: rgb(80, 136, 91);
position: absolute;

  }
  #goala::before,#goalb::before {
    content: "";
    position: absolute;
    top: 50%;
    
    height: 94%;  /* 100% - 10% × 2 */
    aspect-ratio: 1/3;
    
    
    background: rgb(4, 29, 19);
    
    z-index: -1;
  }
  #goalb::before {
    left: 0;
    transform: translate(0%,-50%);
  }
  #goala::before {
    right: 0;
    transform: translate(0%,-50%);
  }
  #goala{
    left:0;
    top:50%;
    transform: translate(-100%,-50%);
  }
  #goalb{
    left:100%;
    top:50%;
    transform: translate(0%,-50%);
  }
  #stick{
    pointer-events: none;
  }
  .predictStick{
    pointer-events: none;
  }
  .scores{
    
    height:5%;
    aspect-ratio: 2/0.2;
    position: absolute;
    left:50%;
    top:2.5%;
    transform: translate(-50%,-50%);
    background-color: black;
    z-index: 5;
    display: flex;
    justify-content: center;
    
  }
  .scores > div{
    
    width:50%;
    height:100%;
    display: flex;
    color: aliceblue;
    
  }
  
  .scores > .a{justify-content: end;}
  .scores > div >h1,.scores > div > p{
    height:100%;
   font-family: Arial, Helvetica, sans-serif;
    margin:0;
    
  }
  #cover{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    margin:0;
    width:116.67%;
    height:100%;
    background-color: rgba(0, 0, 0, 1);
    opacity: 0;
    transition: 0.2s;
    pointer-events: none;
    z-index: 100;
    clip-path: polygon(
      0% 0%,
      92.856% 0%,
      92.856% 25%,
      100% 25%,
      100% 75%,
      92.856% 75%,
      92.856% 100%,
      7.144% 100%,
      7.144% 75%,
      0% 75%,
      0% 25%,
      7.144% 25%,
      7.144% 0%
    );
  }
  .ready{
   
    
    opacity: 0.5 !important;
    pointer-events: auto !important;
  }
  .predictStick{
    opacity: 0.5 !important;
    
  }
  .player > svg{
    z-index: 0;
  }
  #timeline {
    position: absolute;

height:1.7%;
aspect-ratio: 2/0.07;
left:50%;
bottom:2.5%;
transform: translate(-50%,50%);
z-index: 12;
}

  #timeline .bar {
    position: absolute;
width:100%;
height:100%;
left:0%;
bottom:0%;

background-color: rgba(0, 0, 0, 0.2);

border-radius: 100%;
overflow: hidden;
z-index: 0;
  }
  #timeline .bar div{
    position: absolute;
width:100%;
height:100%;
left:0%;
top:0;

background-color: rgb(124, 150, 114);
z-index: 12;
  }
  #timeline h1{
   margin:0%;
   padding:0%;
   position: absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
height: 300%;
z-index: 1;
font-family: Arial, Helvetica, sans-serif;
color: rgb(255, 255, 255);
  }
  #winnerPanel{
    position: absolute;
    width:100%;
    height:100%;
    background-image: linear-gradient(rgba(255, 0, 106, 0.5), rgba(255, 255, 0, 0.5));
    z-index: 100;
    -webkit-backdrop-filter: blur(0.5vh);
    backdrop-filter: blur(0.5vh);
    opacity: 0;
    pointer-events: none;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
  }
  #winnerPanel .n{
    position: absolute;
    
font-size: 200px;
color: rgb(255, 186, 158);
z-index: 3;
text-align: center;
width:100%;
height:auto;
margin-top: 150px;
left:50%;
    top:50%;
    transform: translate(-50%,-200%);
  }
  #winnerPanel .scores{
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    background-color: rgba(49, 36, 0, 0.25);
    width:100%;
    height: 90px;
    
  }
  #winnerPanel .scores .t{
    color: rgb(255, 156, 120);
  }
  #winnerPanel button{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,350%);
    width:300px;
    height:30px;
    border: none;
    outline: none;
    background-color: antiquewhite;
    cursor: pointer;
    transition: 0.2s;
    line-height: 0px !important;
  }
  #winnerPanel button:hover{
    background-color: rgb(255, 145, 0);
    color: aliceblue;
    
  }
  #blackscreen{
    position: absolute;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    margin:0;
    padding:0;
    background-color: black;
    z-index: 999;
  }
  .area1{
    position: absolute;
width:15%;
height:100%;
background-color: rgba(255, 110, 110, 0.2);
mix-blend-mode: overlay;
transition: background-color 0.5s ease;
  }
  .area2{
    position: absolute;
width:15%;
height:100%;
background-color: rgba(255, 141, 141, 0.6);
mix-blend-mode: overlay;
transition: background-color 0.5s ease;
  }
  
  .area1.a{
    left:15%;
    top:0;
  }
  .area2.a{
    left:0;
    top:0;
  }
  .area1.b{
    right:15%;
    top:0;
  }
  .area2.b{
    right:0%;
    top:0;
  }
  .areaWarning{
    background-color: rgba(255, 0, 0, 0.5);
  }
  #black1,#black2{
    position: absolute;
    background-color: rgb(4, 29, 19);
    width:100%;
    height:5%;
    z-index: 1;
  }
  #black1{
    position: absolute;
    top:0;
  }
  #black2{
    position: absolute;
    bottom:0;
  }