body {
  font-family: "Jersey 10", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #e8fde6;
  color: #2e1501;
  margin: 0;
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
}

.game-header {
  width: 100%;
  max-width: 600px;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px 0;
}

.game-header h1 {
  font-size: 3em;
  margin: 0;
  color: #2e1501; /* A slightly muted red */
  font-weight: 400;
}

.back-to-lobby-btn,
.game-button {
  font-family: "Jersey 10", sans-serif;
  display: inline-block;
  margin-top: 10px;
  padding: 8px 15px;
  border: 2px solid #2e1501;
  color: #2e1501;
  background-color: transparent;
  text-decoration: none;
  font-size: 1.35em;
  transition: background-color 0.2s, color 0.2s;
  border-radius: 0;
}

.back-to-lobby-btn:hover,
.game-button:hover {
  background-color: #2e1501;
  color: #e8fde6;
}
.game-content {
  background-color: rgba(
    255,
    255,
    255,
    0.6
  ); /* Slight transparency for paper feel */
  padding: 25px;
  /* box-shadow: 0 0 0 5px #3a3a3a, 0 0 0 10px #fdf5e6, 0 0 0 12px #3a3a3a; /* Doodle-like border */
  box-shadow: 0 0 0 5px #2e1501;
  text-align: center;
  width: 100%;
  max-width: 450px; /* Max width for game area */
  margin-bottom: 25px; /* Added margin to prevent shadow overlap with footer */
}

#ccGameInfo {
  margin-bottom: 20px;
}

#ccGameInfo p {
  margin: 8px 0;
  font-size: 28px; /* Larger text for game info */
}

#ccGameResult {
  font-size: 28px;
  margin: 10px auto;
}

#ccPlayerScore,
#ccOpponentScore {
  font-weight: bold;
}

.game-controls-row {
  display: flex;
  justify-content: space-evenly;
  width: 360px;
  align-items: center;
  margin: 8px 0; /* Or match other p margins */
  font-size: 1.4em; /* Consider adjusting if 1.4em from #ccGameInfo p is too large */
}

#ccTurnTimerDisplay {
  margin: 0; /* Remove default p margins for better alignment in flex row */
}

#ccPatternToggleContainer {
  display: flex;
  align-items: center;
}

#ccPatternToggleContainer label {
  margin-right: 5px;
  font-size: 1.4em;
}

#ccPatternToggle {
  /* checkbox size */
  height: 20px;
  width: 20px;
}

/* Styles for cell patterns (initially hidden, shown when body has .cell-patterns-enabled) */
.cell-patterns-enabled .pastelGreen.pattern-1 {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.07) 1px,
    transparent 1px,
    transparent 3px,
    rgba(0, 0, 0, 0.07) 3px,
    transparent 4px
  );
  background-size: 100% 4px; /* Horizontal lines */
}

.cell-patterns-enabled .pastelYellow.pattern-2 {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.07) 1px,
    transparent 1px,
    transparent 3px,
    rgba(0, 0, 0, 0.07) 3px,
    transparent 4px
  );
  background-size: 4px 100%; /* Vertical lines */
}

.cell-patterns-enabled .pastelPink.pattern-3 {
  background-image: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.1) 75%,
    transparent 75%,
    transparent
  );
  background-size: 6px 6px; /* Diagonal lines */
}

.cell-patterns-enabled .pastelLavender.pattern-4 {
  background-image: radial-gradient(rgba(0, 0, 0, 0.15) 1px, transparent 1.5px);
  background-size: 5px 5px; /* Dots */
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#ccGridContainer {
  display: grid;
  grid-template-columns: repeat(12, 36px); /* 12 columns, each 36px wide */
  grid-template-rows: repeat(12, 36px); /* 12 rows, each 36px high */
  /* border: 2px solid #333;*/
  /* margin-bottom: 20px; */
  /* background-color: #ddd; /* Add a background to see the grid area */
  /* box-shadow: 0px 0px 3px 0px green; */
}

.cc-cell {
  /* A general class for cells, might be used or replaced by direct styling */
  width: 36px;
  height: 36px;
  /* border: 1px solid #ccc; */
  box-shadow: 0 0 1px inset black;
  /* box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* Player and Neutral Game Colors */
.brightBlue {
  background-color: #007bff;
  color: white;
}
.brightOrange {
  background-color: #fd7e14;
  color: white;
}

.pastelGreen {
  background-color: #90ee90;
}
.pastelYellow {
  background-color: #ffffba;
}
.pastelPink {
  background-color: #ffb6c1;
}
.pastelLavender {
  background-color: #c8c8f7;
}

/* Default neutral for cells if no specific color is assigned initially */
/* Styles for selectable cells */
.selectable-cell {
  border: 1mm outset rgba(0, 0, 0, 0.7);
  /* box-shadow: 0 0 2px 1px inset #2e1501; */
  cursor: pointer;
}

.selectable-cell:hover {
  /* box-shadow: 0 0 10px gold, 0 0 15px darkorange; /* More prominent glow on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}
.default-neutral {
  background-color: #e9e9e9;
  border: 1px solid #d0d0d0;
}

/* Specific styles for the Rematch button */
.cc-rematch-btn {
  display: none; /* Initially hidden */
}

/* Specific styles for the Share Streak button */
.cc-share-streak-btn {
  display: none; /* Initially hidden */
  margin-top: 10px;
  background-color: gold;
  border: 2px solid gold;
}

.cc-share-streak-btn:hover {
  border: 2px solid #2e1501;
  color: gold;
}

/* Party Info Display Area */
.cc-party-info {
  display: none;
  margin-top: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 5px;
  text-align: center;
  font-size: 1.4em;
}

.cc-party-active-message {
  font-weight: bold;
  margin-bottom: 5px;
}

.cc-party-id-display {
  /* No specific style needed here, just a placeholder for the strong tag */
}

.cc-party-link-input {
  width: 80%;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ddd;
}

.cc-party-status-message {
  font-style: italic;
  margin-top: 5px;
  margin-bottom: 10px;
}

.party-actions {
  margin-top: 10px;
}

/* Specific Party Button Styles */
.share-button {
  /* Extends .game-button or a new base party-button class if needed */
  color: #28a745; /* Green */
  border: 2px solid #28a745;
}

.share-button:hover {
  background-color: #e9f7ec; /* Very light green */
  color: #1e7e34; /* Darker green */
}

.leave-button {
  /* Extends .game-button or a new base party-button class if needed */
  color: #dc3545; /* Red */
  border: 2px solid #dc3545;
  margin-left: 10px;
}

.leave-button:hover {
  background-color: #fbebec; /* Very light red */
  color: #b02a37; /* Darker red */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
  .game-header h1 {
    font-size: 2.5em;
  }
  .game-content {
    padding: 10px 0px;
  }
  #ccGridContainer {
    grid-template-columns: repeat(12, 30px); /* 12 columns, each 40px wide */
    grid-template-rows: repeat(12, 30px); /* 12 rows, each 40px high */
  }
  .cc-cell {
    width: 30px;
    height: 30px;
  }

  body {
    padding: 0px;
  }
  
  #gameInfo p {
    font-size: 1.3em;
  }
  #gameResult {
    font-size: 1.8em;
  }
  button#rematchBtn {
    font-size: 1.3em;
    padding: 10px 20px;
  }
}