/* Media Queries for Desktop Devices */
@media only screen and (max-width: 1025px)  {
    #game-container {
        width: 100vw;
    }
    #pits-container {
        grid-template-columns: repeat(6, 80px); /* Further adjust pits size */
        gap: 5px;
    }
    .pit {
        width: 80px;
        height: 80px;
    }
   
}


    #start-btn {
        font-size: 12px;
        padding: 5px;
        width: 80px;
    }

    #player-score, #computer-score, #player1-score {
        font-size: 20px;
    }



/* Rotating marble animation */

/* CSS for rotating marble */
@keyframes rotateMarble {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.marble.rotate {
    animation: rotateMarble 0.5s linear;
}

/* CSS for highlighting pits and marbles */
.pit.highlight {
    border: 2px solid yellow;
}

.marble img.highlight-marble {
    border: 2px solid red;
}



@keyframes rotate-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}




.warning-flash {
    animation: flash 1s infinite;
}

@keyframes flash {
    0%, 100% {
        background-color: white;
    }
    50% {
        background-color: red;
    }
}




/* General styles */

body {
    width: 100vw;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
   overflow: hidden; /* Prevents scrollbars from appearing */ 
}

#game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    margin-left: -250px;
}


/* Pits layout */


#pits-container {
 display: grid;
 grid-template-columns: repeat(6, 200px);
 gap: 10px;
}


/* Styling for individual marbles within each pit */
.pit {
    width: 90px; /* Width of each pit */
    height: 90px; /* Height of each pit */
    background-color: #eee;
    background-size: cover; /* Ensure the pit background covers the pit */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}



.pit.highlight {
  animation: pitHighlight 0.5s ease;
}

.pit .stones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%; /* Full width of the pit */
    height: 100%; /* Full height of the pit */
    position: relative;
}

.pit .marble {
    transition: transform 0.5s ease-in-out; /* Smoother animation */
}


.highlight {
    border: 3px solid yellow;
    box-shadow: 0 0 10px yellow;
}



/* Styling for individual marbles */
.stones {
 position: relative;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 pointer-events: none;
 width: 10%;
 height: 10%;
}
 


/* Animation for Highlighted Marble */
@keyframes marbleHighlight {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.highlight-marble {
    animation: marbleHighlight 1s ease-in-out;
    border: 2px solid blue;
    box-shadow: 0 0 10px yellow;
}





/* Collision animation */
.collision {
    animation: marbleCollision 0.5s ease;
}

@keyframes marbleCollision {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}



#start-game-button {
    width: 100%;
    margin-left: 650px;
    margin-top: 40px;
    font-size: 30px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

#start-btn:hover {
    background-color: #0056b3;
}


/* Specific marble positioning inside each pit */
.marble1 { 
    top: 30%; 
    left: 25%;
}

.marble2 { 
    top: 30%; 
    right: 25%;
}

.marble3 { 
    bottom: 30%; 
    left: 25%;
}

.marble4 { 
    bottom: 30%; 
    right: 25%;
}

/* For the second set of marbles (after distribution) */
.marblea { 
    top: 30%; 
    left: 25%; 
}

.marbleb { 
    top: 30%; 
    right: 25%;
}

.marblec { 
    bottom: 30%; 
    left: 25%;
}

.marbled { 
    bottom: 30%; 
    right: 25%;
}

 #pit0 {
  margin-left:-0;
background-size: cover;
 position: relative;
 width: 200px; /* Width of each pit */
 height: 200px; /* Height of each pit */
 background-image: url('Buckklftp.png'); /* Background image of the pit */
 background-position: center; /* Center the background image */
 display: flex;
 align-items: center;
 justify-content: center;
}

#pit1 {
 margin-left: 0;
position: relative;
 width: 200px; /* Width of each pit */
 height: 200px; /* Height of each pit */
 background-image: url('bucketltup.png'); /* Background image of the pit */
 background-size: cover; /* Ensure background image covers the pit */
 background-position: center; /* Center the background image */
 display: flex;
align-items: center;
 justify-content: center;
}

#pit2 {
 margin-left:-0; 
position: relative;
 width: 200px; /* Width of each pit */
 height: 200px; /* Height of each pit */
 background-image: url('bucketltup.png'); /* Background image of the pit */
 background-size: cover; /* Ensure background image covers the pit */
 background-position: center; /* Center the background image */
 display: flex;
align-items: center;
 justify-content: center;
}

#pit3 {
  margin-left: 0;
position: relative;
 width: 200px; /* Width of each pit */
 height: 200px; /* Height of each pit */
 background-image: url('bucketltup.png'); /* Background image of the pit */
 background-size: cover; /* Ensure background image covers the pit */
 background-position: center; /* Center the background image */
 display: flex;
align-items: center;
 justify-content: center;
}

#pit4 {
  margin-left: 0;
position: relative;
 width: 200px; /* Width of each pit */
 height: 200px; /* Height of each pit */
 background-image: url('bucketltup.png'); /* Background image of the pit */
 background-size: cover; /* Ensure background image covers the pit */
 background-position: center; /* Center the background image */
 display: flex;
align-items: center;
 justify-content: center;
}

#pit5 {
  margin-left: 0;
position: relative;
 width: 200px; /* Width of each pit */
 height: 200px; /* Height of each pit */
 background-image: url('BucketRttpBrd.png'); /* Background image of the pit */
 background-size: cover; /* Ensure background image covers the pit */
 background-position: center; /* Center the background image */
 display: flex;
 align-items: center;
 justify-content: center;
 
}

 

#pit6 {
 margin-left:1050px;
background-size: cover;
 position: relative;
 width: 200px; /* Width of each pit */
 height: 200px; /* Height of each pit */
 background-image: url('BuckRtbtm.png'); /* Background image of the pit */
 background-position: center; /* Center the background image */
 display: flex;
 align-items: center;
 justify-content: center;
}



#pit7 {
 margin-left:630px;
position: relative;
 width: 200px; /* Width of each pit */
 height: 200px; /* Height of each pit */
 background-image: url('bucketltbtm.png'); /* Background image of the pit */
 background-size: cover; /* Ensure background image covers the pit */
 background-position: center; /* Center the background image */
 display: flex;
align-items: center;
 justify-content: center;
}

#pit8 {
margin-left:210px; 
position: relative;
 width: 200px; /* Width of each pit */
 height: 200px; /* Height of each pit */
 background-image: url('bucketltbtm.png'); /* Background image of the pit */
 background-size: cover; /* Ensure background image covers the pit */
 background-position: center; /* Center the background image */
 display: flex;
align-items: center;
 justify-content: center;
}

#pit9 {
 margin-left:-210px;
position: relative;
 width: 200px; /* Width of each pit */
 height: 200px; /* Height of each pit */
 background-image: url('bucketltbtm.png'); /* Background image of the pit */
 background-size: cover; /* Ensure background image covers the pit */
 background-position: center; /* Center the background image */
 display: flex;
align-items: center;
 justify-content: center;
}

#pit10 {
 margin-left:-630px;
position: relative;
 width: 200px; /* Width of each pit */
 height: 200px; /* Height of each pit */
 background-image: url('bucketltbtm.png'); /* Background image of the pit */
 background-size: cover; /* Ensure background image covers the pit */
 background-position: center; /* Center the background image */
 display: flex;
align-items: center;
 justify-content: center;
}

#pit11 {
margin-left:-1050px; 
position: relative;
 width: 200px; /* Width of each pit */
 height: 200px; /* Height of each pit */
 background-image: url('Buckltbtm.png'); /* Background image of the pit */
 background-size: cover; /* Ensure background image covers the pit */
 background-position: center; /* Center the background image */
 display: flex;
 align-items: center;
 justify-content: center;
 
}

.PrvyPolcy{
         max-width: 100%;
         height: 100%;
         font-size: 8px;
         margin-left: -750px;
}




.PrvcyHPolcy {
             height: auto;
              width: auto;
              margin-left: -1150px;
              margin-bottom: -450px;
              margin-top: 150px;
              z-index:100;
                    } 

.PrvcyPolcy {
             height: auto;
              width: auto;
              margin: -10px;
              margin-bottom: -600px;
              margin-top: 100px;
              z-index:100;
                    } 


.footer {
              height: auto;
              width: auto;
              margin-left: 200px;
              margin-bottom: 200px;
              margin-top: 100px;
              z-index:100;
                    }