html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

#game-board {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(50, 1fr);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 4px solid #2a2a2a; /* Thicker border around the entire game board */
}

.cell {
  background-color: #151515; /* Darker gray for cells */
  border: 2px solid #2a2a2a; /* Darker gray for grid lines */
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.1s ease;
}

.top-row {
  background-color: #65807e;
}

.bottom-row {
  background-color: #47525c;
}

.popup {
  position: absolute;
  background-color: #151515;
  border: 4px solid #2a2a2a; /* Match the game board border width and color */
  font-family: 'Silkscreen', cursive;
  font-size: 12px;
  color: #2a2a2a;
  padding: 8px;
  box-sizing: border-box; /* Include border in the width/height calculations */
  z-index: 100;
  text-align: left;
  pointer-events: auto; /* Allow interaction with the popup */
}


.selection-header {
  width: 100%;
  text-align: center;
  margin-bottom: 8px;
  font-weight: bold;
  color: #65807e;
}


.points-info {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 12px;
  font-weight: bold;
  color: #2a2a2a;
}

.points-remaining {
  font-size: 12px;
  color: #2a2a2a;
}

/* Removed pieces-label class */

.error-msg {
  color: #ff5050;
  font-weight: bold;
  padding: 5px;
  font-size: 12px;
  border: 1px solid #ff5050;
  background-color: rgba(255, 80, 80, 0.1);
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  z-index: 110;
}

.shape-options {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 100%;
  gap: 8px;
  flex-wrap: wrap;
  padding: 5px;
  box-sizing: border-box;
  margin: 0 10px; /* Add equal horizontal margins */
  width: calc(100% - 20px); /* Adjust width to account for margins */
}

.shape-option {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 4px;
  border: 2px solid transparent;
  min-width: 30px;
  min-height: 30px;
  flex-basis: calc(25% - 8px); /* For 1 row of 4 */
}

/* Layout modes based on data attributes instead of media queries */
.shape-options[data-layout="row"] {
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
}

.shape-options[data-layout="row"] .shape-option {
  flex-basis: calc(25% - 8px); /* For 1 row of 4 */
  min-width: 0; /* Allow items to shrink below their content size */
}

.shape-options[data-layout="grid"] {
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}

.shape-options[data-layout="grid"] .shape-option {
  flex-basis: calc(50% - 8px); /* For 2 rows of 2 */
  max-width: calc(50% - 8px);
}

.shape-options[data-layout="column"] {
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
}

.shape-options[data-layout="column"] .shape-option {
  flex-basis: auto; /* For 1 column of 4 */
  width: 100%;
  margin-bottom: 4px;
}

.shape-option:hover {
  border-color: currentColor;
}

.shape-option.selected {
  border-color: currentColor;
  background-color: rgba(128, 128, 128, 0.2);
}



.restriction-msg {
  color: #a05050;
  font-size: 10px;
  margin-top: 5px;
}

.shape {
  display: flex;
  justify-content: center;
  align-items: center;

/* Timer container */
.timer-container {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  width: calc(100% - 20px);
  z-index: 110; /* Ensure timers appear above other elements */
}

/* Game timer styles */
.game-timer {
  font-size: 12px;
  font-weight: bold;
  font-family: 'Silkscreen', cursive;
  text-align: left;
}

/* Turn timer styles */
.turn-timer {
  font-size: 12px;
  font-weight: bold;
  font-family: 'Silkscreen', cursive;
  text-align: right;
}

/* Game over screen */
.game-over-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #151515;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 1s ease-out;
}

.game-over-message {
  font-family: 'Silkscreen', cursive;
  font-size: 24px;
  text-align: center;
  padding: 20px;
  border: 4px solid #2a2a2a;
  background-color: #151515;
}

  background-color: #2a2a2a;
  border-radius: 4px; /* Slightly rounded corners for shapes in menu */
}

.circle {
  border-radius: 50%;
}

.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: scale(1.15); /* Increase triangle size */
}

.square {
  /* Default shape is square */
}

.diamond {
  transform: rotate(45deg) scale(0.85); /* Increase diamond size from 0.7 to 0.85 */
}

/* Styles for shapes placed in cells */
.cell-shape {
  position: absolute;
  border-radius: 4px; /* Slightly rounded corners for all shapes */
}

/* Team colors */
.cell-shape.red-team {
  background-color: #a05050; /* Muted red color */
}

.cell-shape.purple-team {
  background-color: #805080; /* Muted purple color */
}

.cell-shape.circle {
  border-radius: 50%; /* Circles keep their full roundness */
}

.cell-shape.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: scale(1.15); /* Increase triangle size */
}

.cell-shape.triangle-flipped {
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%); /* Rotated 180 degrees */
  transform: scale(1.15); /* Increase triangle size */
}

.cell-shape.diamond {
  transform: rotate(45deg) scale(0.7);
}

/* Bullet styles */
.bullet {
  position: absolute;
  border-radius: 50%;
  z-index: 50;
}

.bullet.red-team {
  background-color: #a05050; /* Match the red team color */
}

.bullet.purple-team {
  background-color: #805080; /* Match the purple team color */
}

.centering-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let clicks pass through to elements underneath */
  padding: 30px 0 10px 0; /* Make room for the points info at top, remove horizontal padding */
  box-sizing: border-box;
}

.centering-wrapper * {
  pointer-events: auto; /* Re-enable pointer events for children */
}

.popup-close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 18px;
  font-size: 18px;
  cursor: pointer;
  color: #2a2a2a;
  font-weight: bold;
  z-index: 110; /* Ensure it's above other elements */
}