* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #1a1a1a;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  min-height: 100vh;
  width: 100vw;
  touch-action: manipulation;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.sound-toggle {
  position: fixed;
  top: calc(15px + env(safe-area-inset-top));
  right: calc(15px + env(safe-area-inset-right));
}

.sound-button {
  background: none;
  border: none;
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  cursor: pointer;
  color: white;
  transition: color 0.3s;
}

.sound-button:hover {
  color: #FFD700;
}

h1 {
  font-family: 'Bungee', cursive;
  font-size: clamp(1.6rem, 5.5vw, 2.3rem);
  background: linear-gradient(to right, #4CAF50, #FFD700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  margin: clamp(20px, 5vw, 30px) 0 clamp(8px, 2vw, 10px); /* More top margin */
}

.game-stats {
  display: flex;
  gap: clamp(12px, 3vw, 16px);
  margin-bottom: clamp(8px, 2vw, 10px);
  font-size: clamp(0.9rem, 3.5vw, 1.1rem);
}

.new-game-button, .play-again-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 16px);
  border-radius: 5px;
  font-size: clamp(0.85rem, 2.8vw, 0.95rem);
  cursor: pointer;
  margin-bottom: clamp(8px, 2vw, 10px);
  transition: background-color 0.3s, transform 0.2s;
}

.new-game-button:hover, .play-again-button:hover {
  background-color: #45a049;
}

.new-game-button:active, .play-again-button:active {
  transform: scale(0.95);
}

.game-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 1.5vw, 10px);
  width: min(90vw, 500px);
  max-width: 100%;
  padding: clamp(4px, 1vw, 8px);
  flex: 0 0 auto;
}

.card {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 10px;
  cursor: pointer;
  perspective: 1000px;
}

.card-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
  transform-style: preserve-3d;
}

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

.card-back, .card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  image-rendering: -webkit-optimize-contrast;
}

.card-back {
  background: url('../img/card-back.png') center/cover no-repeat;
  border: 1px solid #4CAF50;
}

.card-front {
  transform: rotateY(180deg);
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(3px, 0.8vw, 5px);
  border: 1px solid #ccc;
}

.card-logo {
  width: 68%;
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.strain-name {
  margin-top: clamp(3px, 0.8vw, 5px);
  font-size: clamp(0.6rem, 2vw, 0.8rem);
  color: black;
  text-align: center;
  font-family: Arial, sans-serif;
  word-wrap: break-word;
  line-height: 1.2;
}

.card.matched {
  opacity: 0.6;
  cursor: default;
}

.leaderboard {
  margin-top: clamp(10px, 2vw, 15px);
  margin-bottom: clamp(10px, 2vw, 15px); /* Add bottom margin */
  text-align: center;
  width: min(90vw, 500px);
  flex: 0 0 auto;
}

.leaderboard h2 {
  font-size: clamp(0.95rem, 3.5vw, 1.1rem);
  margin-bottom: clamp(6px, 1.5vw, 8px);
}

.leaderboard ul {
  list-style: none;
  padding: 0;
}

.leaderboard li {
  font-size: clamp(0.75rem, 2.8vw, 0.95rem);
  margin: 4px 0;
}

.win-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  gap: clamp(12px, 2.5vw, 16px);
}

.win-message {
  background: white;
  color: black;
  padding: clamp(12px, 2.5vw, 16px);
  border-radius: 10px;
  text-align: center;
  font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  white-space: pre-line;
  font-family: 'Bungee', cursive;
  border: 3px solid #4CAF50;
  animation: fadeIn 0.5s ease-in;
  max-width: min(90vw, 360px);
}

@keyframes fadeIn {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

.thrown-card {
  position: fixed;
  width: clamp(36px, 9vw, 48px);
  height: clamp(50px, 12.6vw, 67px);
  background: url('../img/card-back.png') center/cover no-repeat;
  animation: throw 3s ease-in-out;
}

@keyframes throw {
  0% {
      transform: translateY(100vh) rotate(0deg);
      opacity: 1;
  }
  50% {
      opacity: 1;
  }
  100% {
      transform: translateY(-100vh) rotate(720deg);
      opacity: 0;
  }
}

@media (max-width: 600px) {
  body {
    padding: 20px 10px;
  }
  h1 {
      font-size: clamp(1.4rem, 4.8vw, 1.7rem);
      margin-top: clamp(25px, 6vw, 35px); /* More top space on small screens */
  }
  .game-board {
      width: min(92vw, 340px);
  }
  .strain-name {
      font-size: clamp(0.55rem, 1.9vw, 0.65rem);
  }
  .game-stats {
      font-size: clamp(0.85rem, 3.2vw, 0.95rem);
      gap: clamp(8px, 2.5vw, 12px);
  }
  .leaderboard h2 {
      font-size: clamp(0.85rem, 3.2vw, 0.95rem);
  }
  .leaderboard li {
      font-size: clamp(0.65rem, 2.4vw, 0.85rem);
  }
  .win-message {
      font-size: clamp(0.95rem, 4vw, 1.15rem);
      padding: clamp(10px, 2vw, 12px);
  }
  .new-game-button, .play-again-button {
      font-size: clamp(0.75rem, 2.8vw, 0.85rem);
      padding: clamp(5px, 1.5vw, 7px) clamp(10px, 2.5vw, 14px);
  }
}

.safe-area-inset {
  padding-top: max(env(safe-area-inset-top), 15px);
  padding-bottom: max(env(safe-area-inset-bottom), 15px);
  padding-left: max(env(safe-area-inset-left), 10px);
  padding-right: max(env(safe-area-inset-right), 10px);
}

@media (max-width: 400px) {
  h1 {
      font-size: clamp(1.2rem, 4.2vw, 1.5rem);
      margin-top: clamp(30px, 7vw, 40px); /* Even more top space */
  }
  .game-board {
      width: min(94vw, 300px);
  }
  .sound-button {
      font-size: clamp(0.95rem, 3.2vw, 1.15rem);
  }
  .strain-name {
      font-size: clamp(0.5rem, 1.7vw, 0.6rem);
  }
}

@media (max-height: 600px) {
  body {
      padding-bottom: clamp(20px, 5vw, 30px);
  }
  .game-board {
      width: min(90vw, 280px);
  }
  h1 {
      font-size: clamp(1.2rem, 4vw, 1.4rem);
      margin-top: clamp(20px, 5vw, 30px);
  }
  .game-stats {
      font-size: clamp(0.8rem, 3vw, 0.9rem);
      gap: clamp(6px, 2vw, 10px);
  }
  .new-game-button, .play-again-button {
      font-size: clamp(0.7rem, 2.5vw, 0.8rem);
      padding: clamp(4px, 1.2vw, 6px) clamp(8px, 2vw, 12px);
  }
  .leaderboard {
      margin-top: clamp(6px, 1.5vw, 8px);
      margin-bottom: clamp(6px, 1.5vw, 8px);
  }
  .leaderboard h2 {
      font-size: clamp(0.8rem, 3vw, 0.9rem);
  }
  .leaderboard li {
      font-size: clamp(0.6rem, 2.2vw, 0.8rem);
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card-back, .card-front, .card-logo {
      image-rendering: -webkit-optimize-contrast;
  }
}

/* iPad-specific spacing */
@media (min-width: 768px) and (max-width: 1024px) {
  h1 {
      margin-top: clamp(30px, 4vh, 40px); /* More top space for iPad */
  }
  .game-board {
      width: min(80vw, 500px);
  }
}