.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Georgia, 'Times New Roman', serif;
  background: #f5f0e8;
  min-height: 100vh;
  padding: 30px 10px;
  margin: 0;
}

/* Title */
.game-container .title {
  font-size: 42px;
  letter-spacing: 4px;
  color: #2c2c2c;
  text-align: center;
  margin: 0;
}
.game-container .title-line {
  width: 200px;
  height: 2px;
  background: #2c2c2c;
  margin: 8px auto 24px;
}

/* Difficulty */
.game-container .difficulty {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.game-container .diff-btn {
  padding: 10px 24px;
  border: 2px solid #888;
  border-radius: 5px;
  font-size: 18px;
  font-family: Georgia, serif;
  color: #555;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.game-container .diff-btn:hover {
  border-color: #2c2c2c;
  color: #2c2c2c;
}
.game-container .diff-btn.active {
  border: 3px solid #2c2c2c;
  color: #2c2c2c;
  font-weight: bold;
  background: #e8e0d0;
}

/* Stats */
.game-container .stats {
  display: flex;
  gap: 48px;
  margin-bottom: 28px;
}
.game-container .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.game-container .stat-label {
  font-size: 16px;
  color: #555;
}
.game-container .stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #2c2c2c;
}

/* Board */
.game-container .board {
  display: grid;
  gap: 10px;
  justify-content: center;
}
.game-container .board.cols-4 {
  grid-template-columns: repeat(4, 90px);
}
.game-container .board.cols-6 {
  grid-template-columns: repeat(6, 90px);
}

/* Card */
.game-container .card {
  width: 90px;
  height: 100px;
  perspective: 600px;
  cursor: pointer;
}
.game-container .card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.4s;
  transform-style: preserve-3d;
}
.game-container .card.flipped .card-inner {
  transform: rotateY(180deg);
}
.game-container .card.matched .card-inner {
  transform: rotateY(180deg);
}
.game-container .card-front,
.game-container .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-container .card-front {
  background: #d4c8a8;
  border: 3px solid #2c2c2c;
}
.game-container .card-front::after {
  content: '?';
  font-size: 36px;
  font-weight: bold;
  color: #8a7e66;
}
.game-container .card-back {
  background: #fff;
  border: 3px solid #2c2c2c;
  transform: rotateY(180deg);
  font-size: 42px;
}
.game-container .card.matched .card-back {
  background: #e8f0e0;
  border-color: #5a8a3c;
}
.game-container .card.matched {
  cursor: default;
}

/* Buttons */
.game-container .buttons {
  margin-top: 28px;
}
.game-container .newgame-btn {
  padding: 12px 28px;
  border: 2px solid #2c2c2c;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
  background: #fff;
  cursor: pointer;
  font-family: Georgia, serif;
  color: #2c2c2c;
  transition: all 0.1s;
}
.game-container .newgame-btn:hover {
  background: #f0ebe0;
}

/* Win overlay */
.game-container .win-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  justify-content: center;
  align-items: center;
  z-index: 100;
}
.game-container .win-overlay.show {
  display: flex;
}
.game-container .win-box {
  background: #f5f0e8;
  border: 3px solid #2c2c2c;
  border-radius: 10px;
  padding: 40px 50px;
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
}
.game-container .win-box h2 {
  font-size: 32px;
  color: #2c2c2c;
  margin-bottom: 12px;
}
.game-container .win-box p {
  font-size: 18px;
  color: #555;
  margin-bottom: 24px;
}
.game-container .win-box button {
  padding: 12px 32px;
  font-size: 18px;
  font-family: Georgia, serif;
  font-weight: bold;
  border: 2px solid #2c2c2c;
  border-radius: 6px;
  background: #fff;
  color: #2c2c2c;
  cursor: pointer;
}
.game-container .win-box button:hover {
  background: #f0ebe0;
}