/* ============================================================
   FLITSKAARTEN – SCHOON & GECENTREERD
   ============================================================ */
#card {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* Wrapper rond de kaart */
.flip-wrapper {
  perspective: 1200px;
  width: 100%;
  margin-top: 10px;
}

/* De kaart zelf */
.flip-card {
  width: 100%;
  height: clamp(110px, 16vw, 180px);
  background: transparent;
  border-radius: 16px;
  position: relative;
  transform-style: preserve-3d;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

  /* bounce-achtige flip-animatie */
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Flip-state */
.flip-card.flip {
  transform: rotateY(180deg);
}

/* Voor- en achterkant vullen precies de kaart */
.flip-card .front,
.flip-card .back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: clamp(16px, 3vw, 28px);
  font-size: clamp(1.4rem, 3.8vw, 2.5rem);
  color: #033e8c;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 2px dashed #2563eb;
}

/* voorkant */
.flip-card .front {
  background: #e0efff;
}

/* achterkant */
.flip-card .back {
  background: #fff4cc;
  transform: rotateY(180deg);
}

/* kleine voortgangstekst boven de kaart */
.progress-small {
  text-align: center;
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  margin-bottom: 8px;
  color: #033e8c;
}

/* hide-mode: keuzepaneel weg, oefenpaneel fullscreen */
body.hide-mode .grid {
  grid-template-columns: 1fr !important;
}

body.hide-mode .panel:nth-of-type(1) {
  display: none !important;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */

.progress-container {
  width: 100%;
  height: 14px;
  background: #dce9ff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: #2563eb;
  transition: width 0.4s ease;
}

/* ============================================================
   RESPONSIVE — FLITSKAART
============================================================ */

@media (max-width: 600px) {
  body {
    background-size: cover;
  }

  .flip-wrapper {
    margin-top: 4px;
  }

  .flip-card {
    height: clamp(120px, 45vw, 190px);
  }

  .flip-card .front,
  .flip-card .back {
    font-size: clamp(1.2rem, 5vw, 2rem);
    padding: clamp(12px, 4vw, 22px);
  }

  .progress-container {
    height: 10px;
  }

  .progress-small {
    font-size: 0.85rem;
  }
}

/* Mobiel/tablet: kaart is tap-gestuurd, dus knoppen verbergen */
@media (max-width: 900px) {
  #showAnswerBtn,
  #nextBtn {
    display: none !important;
  }
}