html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Mind Shift Specific Styles */

body {
  font-family: "Patrick Hand", cursive;
  background-color: #dddddd; /* Creamy color - Linen */
  color: #2a4759; /* Dark grey for text */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  min-height: 100vh;
  padding: 15px;
}

.game-header {
  width: 100%;
  max-width: 600px; /* Adjusted for 6x6 game */
  text-align: center;
  margin-bottom: 20px;
  padding: 10px 0;
}

.game-header h1 {
  font-size: 3em;
  margin: 0;
  color: #2a4759; /* Slate Blue for Mind Shift */
}

.back-to-lobby-btn {
  font-family: "Patrick Hand", cursive;
  display: inline-block;
  margin-top: 10px;
  padding: 8px 15px;
  border: 2px solid #2a4759;
  border-radius: 12px;
  color: #2a4759;
  background-color: transparent;
  text-decoration: none;
  font-size: 1.2em;
  transition: background-color 0.2s, color 0.2s;
}

.back-to-lobby-btn:hover {
  background-color: #2a4759;
  color: #fdf5e6;
}

.game-content {
  background-color: #fdf5e6;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 0 0 5px #f79b72;
  text-align: center;
  width: 100%;
  max-width: 550px; /* Adjusted for 6x6 game area */
  margin-bottom: 25px;
}

#gameInfo {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center items horizontally */
  text-align: center; /* Ensure text is centered within each p tag */
}

#gameInfo p {
  margin: 5px 0; /* Smaller vertical margin, no horizontal */
  font-size: 1.4em;
}

#scoreDisplay {
  font-weight: bold;
  color: #2a4759; /* Slate Blue */
  margin-bottom: 10px; /* Add some space below score */
}

#turnInfo {
  font-style: italic;
  color: #2a4759;
}

#turnTimerDisplay {
  font-weight: bold;
  color: #d9534f; /* Muted red for timer */
  font-size: 1.2em;
}

#boardContainer {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 columns, equal width */
  grid-template-rows: repeat(6, 1fr); /* 6 rows, equal height */
  gap: 8px; /* Gap between cards */
  margin: 20px auto;
  width: 100%; /* Take full width of game-content */
  /* max-width: 100%; /* Adjusted to ensure it fits parent container */
  aspect-ratio: 1 / 1; /* Keep it square for 6x6 */
  padding: 8px; /* Inner padding for the board */
  perspective: 1000px; /* Added for 3D transform context */
  border-radius: 10px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.card {
  background-color: #87ceeb; /* Sky Blue for card back */
  border: 2px solid #4682b4; /* Steel Blue border */
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px; /* Adjusted Emoji size for 6x6 */
  cursor: pointer;
  user-select: none; /* Prevent text selection */
  transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  position: relative; /* For animations */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.card.revealed {
  background-color: #ffffff; /* White for revealed cards */
  border-color: #f79b72; /* Slate Blue border for revealed */
  /* transform: rotateY(180deg); */ /* Let card-inner handle the flip */
  /* transition: transform 0.5s ease; */ /* Transition is on card-inner */
}

.card.matched {
  opacity: 0; /* Fade out matched cards */
  pointer-events: none; /* Disable clicks on matched cards */
  transform: scale(0); /* Shrink matched cards */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.card.selected {
  border-color: #ffd700; /* Gold border for selected cards */
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}

/* Front of the card (emoji) */
.card .card-inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  transform: translateZ(0); /* Promote to its own layer */
}

.card.revealed .card-inner {
  transform: rotateY(180deg);
}

.card .card-front,
.card .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateZ(0); /* Promote to their own layers */
}

.card .card-back {
  background-color: #87ceeb; /* Sky Blue */
  border-radius: 8px;
  /* You can add a question mark or logo here */
  content: "?"; /* Example, better to use a div with text or image */
  font-size: 1em;
  color: #4682b4;
}

.card .card-front {
  background-color: #ffffff; /* White */
  border-radius: 8px;
  transform: rotateY(180deg);
}

/* Swap animation */
.card.swapping {
  animation: cardSwapScale 0.5s ease-in-out forwards;
  border-color: #ff4500; /* OrangeRed for swapping cards */
  background-color: #e77247;
  box-shadow: 0 0 20px rgba(255, 69, 0, 0.8);
}

@keyframes cardSwapScale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

#gameResult {
  margin-top: 20px;
  font-size: 1.8em;
  font-weight: bold;
  min-height: 1.8em;
  color: #2a4759;
}

/* General Game Button Style (from Tic-Tac-Oh) */
.game-button {
  font-family: "Patrick Hand", cursive;
  padding: 12px 25px;
  font-size: 1.5em;
  cursor: pointer;
  background-color: transparent;
  color: #2a4759;
  border: 3px solid #2a4759;
  border-radius: 20px;
  margin-top: 15px;
  display: block; /* Make it a block element */
  margin: 15px auto 0 auto; /* Center horizontally, keep top margin */
  transition: background-color 0.2s, color 0.2s, transform 0.1s;
  box-shadow: 2px 2px 0px #2a4759;
}

.game-button:hover {
  background-color: #2a4759;
  color: #fdf5e6;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #2a4759;
}

.game-button:disabled {
  background-color: #e0e0e0;
  color: #a0a0a0;
  border-color: #a0a0a0;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

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

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

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

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

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

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

/* Specific Party Button Styles */
.party-button {
  font-family: "Patrick Hand", cursive;
  padding: 10px 20px;
  font-size: 1.2em;
  cursor: pointer;
  border-radius: 15px;
  background-color: transparent;
  transition: background-color 0.2s, color 0.2s, transform 0.1s;
  box-shadow: 1px 1px 0px #777;
}

.ms-share-streak-btn {
  display: none;
  background-color: gold;
  box-shadow: 2px 2px 0px gold;
  border: 3px solid gold;
}

.ms-share-streak-btn:hover {
  color: gold;
  box-shadow: 1px 1px 0px #2a4759;
  border: 3px solid #2a4759;
}

.party-button:hover {
  transform: translate(0.5px, 0.5px);
  box-shadow: 0.5px 0.5px 0px #777;
}

.share-button {
  color: #28a745;
  border: 2px solid #28a745;
}

.share-button:hover {
  background-color: #e9f7ec;
  color: #1e7e34;
}

.leave-button {
  color: #dc3545;
  border: 2px solid #dc3545;
  margin-left: 10px;
}

.leave-button:hover {
  background-color: #fbebec;
  color: #b02a37;
}

.party-actions .party-button {
  display: inline-block;
  vertical-align: middle;
}

.game-footer {
  margin-top: auto;
  text-align: center;
  font-size: 0.9em;
  color: #5a5a5a;
  width: 100%;
  max-width: 600px; /* Adjusted for 6x6 game */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .game-content {
    padding: 10px; /* Increased padding */
  }
  #boardContainer {
    gap: 6px; /* Increased gap */
    padding: 6px; /* Increased padding */
  }
  .card {
    font-size: 6vw; /* Increased font size */
  }
  .card .card-back {
    font-size: 6vw; /* Increased font size */
  }
}

@media (max-width: 480px) {
  body {
    padding: 0px;
  }

  .game-header h1 {
    font-size: 2.5em;
  }
  #gameInfo p {
    font-size: 1.5em;
    margin: 5px 10px;
  }
  #boardContainer {
    gap: 4px; /* Increased gap */
    padding: 4px; /* Increased padding */
  }
  .card {
    font-size: 6vw; /* Increased font size */
    border-radius: 5px;
  }
  .card .card-back {
    font-size: 6vw; /* Increased font size */
  }
  .game-button {
    font-size: 1.3em;
    padding: 10px 20px;
  }
  .party-button {
    font-size: 1em;
    padding: 8px 15px;
  }
}