body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Poppins, sans-serif;
	background-color: rgb(1, 16, 30);
}

@font-face {
    font-family: 'Poppins';
    src: url('Poppins-Regular.woff2') format('woff2'),
        url('Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


#game-container {
    width: 95%; /* Full width of the viewport */
    height: 95vh; /* Full height of the viewport */
    overflow: hidden;
    position: relative;
}

#game-board {
    width: 2400px; /* Larger board size for zoom effect */
    height: 2400px; /* Larger board size for zoom effect */
    background-image: url('board.webp');
    background-size: cover;
    position: absolute; /* Change to absolute for better positioning */
    transform: scale(0.8); /* Adjusted zoom level */
    transform-origin: top left; /* Center scaling from top left */
	transition: transform 1s; /* Smooth transition for rotation */
}

#controls {
    margin-top: 20px;
}

#dice-result {
    margin-top: 10px;
}

#player-info {
    margin-top: 10px;
}

#player-piece {
    width: 80px; /* Adjust size as needed */
    height: 80px; /* Adjust size as needed */
    position: absolute;
	display: none; /* Initially hide the player piece */
}

#roll-dice {
  height: 80%;
  width: auto;
  background-color: rgba(1, 16, 30, 0.8);
  color: white;
  font-size: 20px;
  border: 1px solid white;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin: 20px;
}

#roll-dice:hover {
	color: #18141c;
    background-color: white; /* Darker shade of the background color */
}

#tries-left {
  height: 30%;
  background-color: rgba(1, 16, 30, 0.8);
  color: white;
  font-size: 20px;
  border: 1px solid white;
  padding: 10px 20px;
  cursor: pointer;
}

#coin-balance {
  height: 30%;
  background-color: rgba(1, 16, 30, 0.8);
  color: white;
  font-size: 20px;
  border: 1px solid white;
  padding: 10px 20px;
  cursor: pointer;
}

#coin-amount {
  margin-right: 10px; /* Space between the number and the image */
}

#coin-image {
  width: 20px; /* Adjust size as needed */
  height: 20px; /* Adjust size as needed */
}

#special-card, #community-cards, #mystery-cards {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px; /* Adjust the width as needed */
    height: 480px; /* Adjust the height as needed */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    z-index: 10; /* Ensure it's above other elements */
}


.dice {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-right: 10px;
    background-size: cover; /* Ensure proper sizing of background image */
    background-position: center; /* Center the background image */
	margin: 20px;
}

#rulesButton {
  height: 80%;
  width: auto;
  background-color: rgba(1, 16, 30, 0.8);
  color: white;
  font-size: 20px;
  border: 1px solid white;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin: 20px;
}

#rulesButton:hover {
	color: #18141c;
    background-color: white; /* Darker shade of the background color */
}

#clashButton {
  height: 80%;
  width: auto;
  background-color: rgba(1, 16, 30, 0.8);
  color: white;
  font-size: 20px;
  border: 1px solid white;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin: 20px;
}

#clashButton:hover {
	color: #18141c;
    background-color: white; /* Darker shade of the background color */
}

#resetButton {
  height: 80%;
  width: auto;
  background-color: rgba(1, 16, 30, 0.8);
  color: white;
  font-size: 20px;
  border: 1px solid white;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin: 20px;
}

.confirmation-dialog {
    position: absolute;
    top: 20%; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* Adjust the width as needed */
    max-width: 400px; /* Adjust the maximum width as needed */
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    z-index: 1000; /* Ensure it's above other elements */
    display: none; /* Initially hide the dialog */
}

/* Styling for the buttons */
.confirmation-dialog button {
  height: 80%;
  width: auto;
  background-color: rgba(1, 16, 30, 0.8);
  color: white;
  font-size: 20px;
  border: 1px solid white;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin: 20px;
}

.confirmation-dialog button:hover {
    background-color: #45a049;
}

.confirmation-dialog button.no {
    background-color: rgba(1, 16, 30, 0.8);
}

.confirmation-dialog button.no:hover {
    background-color: red;
}

#resetButton:hover {
	color: #18141c;
    background-color: white; /* Darker shade of the background color */
}

#rulesModal {
  display: none; /* Initially hidden */
  background-color: #132234;
  color: white;
  font-size: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 700px;
  text-align: left;
  padding: 20px;
}


#controls {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px; /* Adjust height as needed */
    background-color: rgba(1, 16, 30, 0.8); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3); /* Optional: Add shadow for better visibility */
    z-index: 1000; /* Ensure it is above other elements */
}

.cards-container {
    position: absolute;
    top: 50%; /* Adjust top position as needed */
    left: 50%; /* Align to the left side of the game container */
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Align cards to the left */
    align-items: flex-start; /* Align cards to the top */
    transform: translate(-50%, -50%); /* Center the cards container */
    padding: 10px; /* Optional: Add padding around the cards */
}

.card {
    width: 200px; /* Adjust width as needed */
    height: 300px; /* Adjust height as needed */
    perspective: 1000px;
    position: relative;
    cursor: pointer; /* Add cursor pointer to indicate it's clickable */
    margin: 0 10px; /* Adjust margin for spacing between cards */
}

.card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    transform: rotateY(180deg); /* Initially flipped */
}

.card.flipped .card-inner {
    transform: rotateY(0deg); /* Unflip when flipped class is added */
}

.card-front,
.card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    background-size: cover; /* Ensure the image covers the entire card */
    background-position: center; /* Center the image */
}

.card-front {
    transform: rotateY(0deg); /* Initially hidden */
}

.card-back {
    transform: rotateY(180deg); /* Initially visible */
}