/* styles.css */

body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: #282c34;*/
    background-image: url('https://files.wewinmeta.com/storage/v1/object/public/img/metaverse-2d.png');
    background-size: cover;
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat; /* Prevent tiling */
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000000;
}

#game-container {
    display: grid;
    grid-template-columns: repeat(8, 50px);
    grid-template-rows: repeat(8, 50px);
}


#grid {
    display: grid;
    grid-template-columns: repeat(8, 50px); /* Creates 8 columns */
    grid-template-rows: repeat(8, 50px); /* Creates 8 rows */
    gap: 5px; /* Adds space between the tiles */
    justify-content: center; /* Center grid in the game container if there's extra space */
    width: auto; /* Removed the fixed width */
}

.title {
    text-align: center;
    color: #fff;
    font-size: 1.5em;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000000;
}


.score-container {
    position: absolute; 
    top: 10px; /* Adjusted from 0 to give some space from the top */
    right: 10px; /* Adjusted from 0 to give some space from the right */
    padding: 10px; 
    z-index: 10; /* Ensures the score is above other elements */
    background: rgba(0, 0, 0, 0.5); /* Optional: adds a semi-transparent background to the score for better visibility */
    border-radius: 10px; /* Optional: rounds the corners of the score container */
    color: #fff;
    font-size: 1.2em;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000000;
}



.shape {
    width: calc(100% - 4px); /* Slightly smaller than the tile */
    height: calc(100% - 4px);
    margin: 2px; /* Centers the shape in the tile */
    /* Apply the 3D effect styles here */
}


.tile {

    /*width: 50px;
    height: 50px;*/

    width: 10vw; /* Use viewport width to scale tiles */
    height: 10vw; /* Keep tiles square */
    max-width: 50px; /* Set a max-width to ensure they don't get too large on bigger screens */
    max-height: 50px; /* Set a max-height to match */

    padding: 2px; /* creates a 2px space inside each tile */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #333;
    cursor: pointer;
    position: relative; /* make it a stacking context for shadows */
    transition: background-color 0.3s;
}



/* Apply 3D shadow to all tiles */
.tile:before {
    content: '';
    position: absolute;
    top: -5px; 
    left: -5px;
    width: 100%;
    height: 100%;
    box-shadow:
        5px 5px 8px rgba(0, 0, 0, 0.6),
        inset 1px 1px 2px rgba(255, 255, 255, 0.2),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2);
    background: linear-gradient(
        145deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(0, 0, 0, 0.15) 100%
    );
    z-index: -1; /* Put the shadow under the tile content */
    border-radius: inherit; /* Make sure it matches the tile shape */
    clip-path: inherit; /* Make sure it matches the specific tile clip-path */
}

/* Simulated border to create a "thickness" effect */
.tile::after {
    box-shadow: inset 0 0 0 2px white;
    margin: 2px; /* Small space to simulate the tile "side" */
}



/* Downward-pointing Orange Triangle */
.tile.orange {
    position: relative;
    width: 50px; /* Adjust width as needed */
    height: 50px; /* Adjust height as needed */
    background-color: orange;
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}


/* 5-pointed Star for Red Tiles */
.tile.red {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: red; /* Temporarily set a background color to see the shape */
    clip-path: polygon(
        50% 0%,    /* top */
        61% 35%,   /* right top */
        100% 35%,  /* right */
        67% 57%,   /* right bottom */
        75% 100%,  /* bottom right */
        50% 80%,   /* bottom */
        25% 100%,  /* bottom left */
        33% 57%,   /* left bottom */
        0% 35%,    /* left */
        39% 35%    /* left top */
    );
}


/* Green Ball */
/* Perfect Circle for Green Tiles */
.tile.green {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: green;
    border-radius: 50%;
}

/* Blue ARROW */
/* 5-pointed Star for BLUE STARS */
.tile.blue {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: blue; /* Temporarily set a background color to see the shape */
    clip-path: polygon(
        50% 0%,    /* top */
        61% 35%,   /* right top */
        100% 35%,  /* right */
        67% 57%,   /* right bottom */
        75% 100%,  /* bottom right */
        50% 80%,   /* bottom */
        25% 100%,  /* bottom left */
        33% 57%,   /* left bottom */
        0% 35%,    /* left */
        39% 35%    /* left top */
    );
}

/* Upward-pointing Yellow Triangle */
.tile.yellow {
    position: relative;
    width: 50px; /* Adjust width as needed */
    height: 50px; /* Adjust height as needed */
    background-color: yellow;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}


/* Purple Rhombus */
.tile.purple {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: purple;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}


/* Selected tile style */
.tile.selected {
    /*animation: blink-animation 1s linear infinite; /* Blinking animation */
    border-color: gold; /* Gold color for the border */
}

/* Keyframes for blinking animation */
@keyframes blink-animation {
    0% { border: 3px solid gold; }
    50% { border: 3px solid transparent; }
    100% { border: 3px solid gold; }
}


.button-container {
    display: flex;
    margin-top: 20px; /* Spacing between grid and buttons */
    width: 100%; /* Match the width of the game container */
    justify-content: space-between; /* Evenly spaces the buttons across the container */
}

.game-button {
    padding: 10px 20px; /* Padding inside buttons */
    margin: 0 10px; /* Margin between buttons */
    border: none; /* No border */
    border-radius: 20px; /* Rounded corners */
    background-color: #333; /* Button color */
    color: white; /* Text color */
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    text-transform: uppercase; /* Capitalize button text */
    font-weight: bold; /* Make text bold */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s; /* Transition for background color */
}

.game-button:hover {
    background-color: #555; /* Slightly lighter color on hover */
}


.gold-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: black;
    color: gold;
    padding: 20px;
    border-radius: 10px;
    z-index: 10;
    font-size: 2rem;
    text-align: center;
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: gold;
    padding: 20px;
    border-radius: 10px;
    font-size: 2em;
    z-index: 1000;
}


.instructions {
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    border-radius: 10px; /* Rounded corners */
    color: #fff; /* White text */
    margin: 20px 0; /* Margin above and below the instructions */
    padding: 15px; /* Padding inside the instructions box */
    text-align: center; /* Center the text */
    font-size: 0.9em; /* Slightly smaller font size */
    max-width: 600px; /* Maximum width of the instructions box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Box shadow for depth */
}

.instructions p {
    margin: 10px 0; /* Margin between paragraphs */
}


#timer {
    position: absolute;
    top: 60px; /* Adjust as needed */
    right: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    color: #fff;
    font-size: 1em;
    z-index: 10;
}



/* Responsive adjustments */
@media (max-width: 600px) { /* Adjust max-width as needed */
  
    /* Reduce the size of the candies further for very small screens */
    /*
    .tile {
        width: 3vw;
        height: 3vw;
    }
    */

    .tile {
        width: 12%; /* Use percentage to ensure all 8 fit into the screen width */
        height: auto; /* Maintain aspect ratio */
        padding: 1%; /* Adjust padding proportionally */
        max-width: 40px; /* Ensure tiles don't get too large */
        max-height: 40px; /* Match height to the new max-width */
    }


    .score-container {
        top: 5%; /* Moves the score up a bit on small screens */
        right: 5%; /* Moves the score from the right edge to avoid overlapping */
        font-size: 0.9em; /* Reduces the font size to prevent overlapping */
    }

    /* Other styles like .instructions and .title might need adjustment too */
    .instructions {
        font-size: 0.6em; /* Adjust font size for mobile */
        padding: 5px; /* Adjust padding to save space */
    }


    /* Adjust the font size and margins for small screens */
    .instructions p {
        font-size: 0.6em; /* Slightly smaller text */
        margin: 5px 0; /* Reduce the margin */
    }

     /* Adjust the timer for small screens */
     #timer {
        position: absolute; 
        top: 5%; /* Place the timer below the score container */
        left: 50%; /* Center the timer horizontally */
        transform: translateX(-50%); /* Adjust for exact centering considering the element's width */
        font-size: 0.8em; /* Smaller font size for the timer */
        padding: 5px; /* Smaller padding to fit the area */
        width: 80%; /* Max width to prevent overflow */
        text-align: center; /* Center the text within the timer */
    }

}

@media only screen and (max-width: 768px) {
    #grid {
      grid-template-columns: repeat(8, 1fr); /* Use 1fr to equally distribute the space */
      gap: 2vw; /* Use viewport width to determine gap size */
    }
  
    .tile {
        width: 12.5%; /* Set width to a fixed percentage */
        height: 12.5%; /* Maintain aspect ratio */
        padding: 1%; /* Adjust padding */
    }

    /*
    .tile {
      width: 6vw; 
      height: 6vw; 
      padding: 1vw; 
    }
    */
  }
  

/* You can also consider adding a media query for landscape orientations */
@media (max-height: 500px) {
    .tile {
        width: 15vh; /* Use viewport height to scale tiles, as width is larger in landscape */
        height: 15vh;
    }
}