html, body {
  margin: 0;
  height: 100vh;
  overflow: hidden; /* Layar dikunci, tidak bisa scroll */
  font-family: "Poppins", sans-serif;
}

body {
  background: linear-gradient(135deg, #8929ff 30%, #ff419b 100%);
  display: flex;
  flex-direction: column;
}

/* --- TOPBAR --- */
.topbar {
  width: 100%;
  height: 60px; /* Tinggi fix */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 2px solid rgba(0,0,0,0.1);
  z-index: 50;
  flex-shrink: 0;
}

.back-btn { font-size: 26px; border: none; background: none; cursor: pointer; color: #222; }
.right-info { display: flex; gap: 10px; }
.pill {
  display: flex; align-items: center; gap: 5px; padding: 5px 15px;
  background: white; border-radius: 20px; border: 1px solid #ccc;
  color: #003366; font-weight: 600; font-size: 15px;
}
.icon { font-size: 18px; }

/* --- GAMEBOARD (FULL SCREEN) --- */
.gameboard {
  /* Memenuhi sisa tinggi layar */
  height: calc(100vh - 60px);
  /* Memenuhi seluruh lebar layar */
  width: 100%;
  max-width: none; 
  
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 Kolom */
  grid-template-rows: repeat(5, 1fr);    /* 5 Baris */
  
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

/* --- KARTU --- */
.card {
  width: 100%;
  height: 100%;
  perspective: 1000px;
  cursor: pointer;
  min-height: 0;
  min-width: 0;
}

.inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s;
  border-radius: 12px;
}

/* Settingan Umum Depan & Belakang */
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  /* Border putih transparan biar cantik */
  border: 2px solid rgba(255,255,255,0.5); 
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* --- BAGIAN DEPAN (Tanda Tanya) --- */
.front {
  background: linear-gradient(135deg, #7a28ff 20%, #eb2bbf 80%);
  color: #ff6a4d;
  font-size: 5vh; 
  font-weight: 800;
}

/* --- BAGIAN BELAKANG (Gambar) --- */
.back {
  /* INI PERUBAHANNYA: Background dibuat gradient juga, bukan putih lagi */
  background: linear-gradient(135deg, #7a28ff 20%, #eb2bbf 80%);
  transform: rotateY(180deg);
}

/* Gambar di dalam kartu */
.back img {
  width: 70%; 
  height: 70%;
  object-fit: contain; 
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3)); /* Efek bayangan pada buah */
}

/* Efek Balik */
.card.flipped .inner { transform: rotateY(180deg); }

/* Efek Cocok (Matched) - Bersinar Hijau */
.card.matched .front, .card.matched .back {
  border-color: #7affd6;
  box-shadow: 0 0 15px #7affd6, inset 0 0 10px rgba(122, 255, 214, 0.5);
}

/* --- LAINNYA --- */
#countdown-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); display: none;
  justify-content: center; align-items: center; z-index: 1000;
  color: white; font-size: 100px; font-weight: 800;
}
.pulse-anim { animation: pulse 1s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

.combo-popup {
  position: absolute; padding: 8px 16px;
  background: linear-gradient(135deg, #ff5f6d, #ffc371);
  border-radius: 14px; color: white; font-weight: 800;
  font-size: 18px; z-index: 999; border: 2px solid white; pointer-events: none;
  animation: comboFade 1.2s ease forwards;
}
@keyframes comboFade { to { transform: translateY(-50px); opacity: 0; } }

.end-screen {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
  display: none; justify-content: center; align-items: center; z-index: 200;
}
.end-box {
  width: 90%; max-width: 400px; background: white;
  border-radius: 16px; padding: 25px; text-align: center;
}
.end-btn {
  width: 100%; padding: 12px; border-radius: 10px; border: none;
  font-size: 16px; margin-top: 10px; cursor: pointer; font-weight: 600;
}
.play-again { background: #b700ff; color: white; }
.back-menu { background: #444; color: white; }

.music-control {
  position: fixed; bottom: 20px; right: 20px; z-index: 100;
  background: white; width: 45px; height: 45px; border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); font-size: 20px;
}