/* ============================================================
   TOPO AVONTUUR — Vera's Paardenreis
   Perkament & avonturenkaart thema
   ============================================================ */

/* ----- CSS Custom Properties ----- */
:root {
  --perkament:     #f5e6c8;
  --perkament-dk:  #e8d4a8;
  --bruin:         #8B4513;
  --bruin-dk:      #5c2d0a;
  --goud:          #DAA520;
  --goud-licht:    #f0c040;
  --groen:         #228B22;
  --rood:          #DC143C;
  --ui-bg:         #fdf6e3;
  --ui-border:     #c9a96e;
  --tekst:         #3d2000;
  --tekst-zacht:   #6b4226;

  --font-titel:    'Cinzel', serif;
  --font-tekst:    'Nunito', sans-serif;

  --radius:        8px;
  --schaduw:       0 4px 12px rgba(60, 30, 0, 0.25);
}

/* ----- Reset & basis ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-tekst);
  background: var(--bruin-dk);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(139,69,19,0.4) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(180,120,40,0.3) 0%, transparent 50%);
  min-height: 100vh;
  color: var(--tekst);
}

.app {
  max-width: 960px;
  margin: 0 auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ----- Header ----- */
.game-header {
  background: linear-gradient(135deg, var(--bruin-dk), var(--bruin));
  color: var(--goud-licht);
  border-radius: var(--radius);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--schaduw);
  border: 2px solid var(--goud);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.horse-mascot {
  font-size: 2rem;
  animation: mascotBob 3s ease-in-out infinite;
}

@keyframes mascotBob {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%       { transform: translateY(-4px) rotate(5deg); }
}

.game-header h1 {
  font-family: var(--font-titel);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}

.stats {
  display: flex;
  gap: 16px;
}

.stat {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--goud-licht);
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.2);
  padding: 4px 10px;
  border-radius: 20px;
}

/* ----- Main game area ----- */
.game-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 700px) {
  .game-main {
    grid-template-columns: 1fr 300px;
  }
}

/* ----- Kaart ----- */
.map-wrapper {
  background: var(--perkament-dk);
  border: 3px solid var(--bruin);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schaduw), inset 0 0 30px rgba(139,69,19,0.15);
}

.map-container {
  position: relative;
  width: 100%;
  user-select: none;
}

.map-image {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(15%) saturate(85%) brightness(103%);
}

/* ----- Markers ----- */
.marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--goud-licht), var(--goud));
  border: 2px solid var(--bruin-dk);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  z-index: 2;
}

.marker:hover:not(.active) {
  transform: translate(-50%, -50%) scale(1.4);
  box-shadow: 0 0 10px var(--goud);
}

.marker.active {
  animation: markerPulse 1s ease-in-out infinite;
  background: radial-gradient(circle, #fff, var(--goud-licht));
  z-index: 3;
}

@keyframes markerPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   box-shadow: 0 0 0   0   rgba(218,165,32,0.7); }
  50%       { transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 0 0 8px rgba(218,165,32,0);   }
}

.marker[data-category="water"]      { background: radial-gradient(circle at 35% 35%, #66aaff, #0055cc); }
.marker[data-category="natuur"]     { background: radial-gradient(circle at 35% 35%, #88dd66, #228B22); }
.marker[data-category="provincies"] { background: radial-gradient(circle at 35% 35%, #cc99ff, #6600cc); }
.marker[data-category="luchthaven"] { background: radial-gradient(circle at 35% 35%, #ffaaff, #990099); }

/* ----- Paard sprite ----- */
.horse-sprite {
  position: absolute;
  font-size: 1.8rem;
  transform: translate(-50%, -100%);
  z-index: 10;
  pointer-events: none;
  transition: left 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              top  1.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.4));
}

.horse-sprite.galloping {
  animation: horseGallop 0.25s steps(2) infinite;
}

@keyframes horseGallop {
  0%   { transform: translate(-50%, -100%) scaleX(1)  translateY(0); }
  25%  { transform: translate(-50%, -100%) scaleX(1)  translateY(-3px); }
  50%  { transform: translate(-50%, -100%) scaleX(-1) translateY(0); }
  75%  { transform: translate(-50%, -100%) scaleX(-1) translateY(-3px); }
  100% { transform: translate(-50%, -100%) scaleX(1)  translateY(0); }
}

.horse-sprite.arrived {
  animation: horseBounce 0.5s ease-out;
}

@keyframes horseBounce {
  0%   { transform: translate(-50%, -100%); }
  30%  { transform: translate(-50%, -130%) rotate(-10deg); }
  60%  { transform: translate(-50%, -95%); }
  80%  { transform: translate(-50%, -110%); }
  100% { transform: translate(-50%, -100%); }
}

.horse-sprite.shake {
  animation: horseShake 0.4s ease-in-out;
}

@keyframes horseShake {
  0%, 100% { transform: translate(-50%, -100%) rotate(0deg); }
  20%       { transform: translate(-50%, -100%) rotate(-15deg); }
  40%       { transform: translate(-50%, -100%) rotate(15deg); }
  60%       { transform: translate(-50%, -100%) rotate(-10deg); }
  80%       { transform: translate(-50%, -100%) rotate(10deg); }
}

/* ----- Klik-feedback op kaart ----- */
.click-feedback {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 20;
}

.click-feedback.correct {
  background: rgba(34,139,34,0.6);
  animation: clickRing 0.6s ease-out forwards;
}

.click-feedback.wrong {
  background: rgba(220,20,60,0.6);
  animation: clickRing 0.6s ease-out forwards;
}

@keyframes clickRing {
  0%   { transform: translate(-50%,-50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; }
}

/* ----- Vraagpaneel ----- */
.question-panel {
  background: var(--ui-bg);
  border: 2px solid var(--ui-border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--schaduw);
}

.question-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tekst);
  line-height: 1.5;
  min-height: 52px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.q-emoji { font-size: 1.5rem; flex-shrink: 0; }

/* ----- Typeer input ----- */
.typing-area { display: flex; flex-direction: column; gap: 8px; }

.name-input {
  font-family: var(--font-tekst);
  font-size: 1.3rem;
  font-weight: 700;
  padding: 10px 14px;
  border: 2px solid var(--ui-border);
  border-radius: var(--radius);
  background: var(--perkament);
  color: var(--tekst);
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}

.name-input:focus { border-color: var(--bruin); }
.name-input.correct { border-color: var(--groen); background: #e8f5e9; }
.name-input.wrong   { border-color: var(--rood);  background: #fce8ec; }

.letter-feedback {
  font-family: var(--font-tekst);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  min-height: 24px;
  color: var(--tekst-zacht);
}

.letter-feedback .letter-ok    { color: var(--groen); }
.letter-feedback .letter-wrong { color: var(--rood); text-decoration: underline; }
.letter-feedback .letter-rest  { color: var(--perkament-dk); }

/* ----- Meerkeuze ----- */
.choice-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.choice-btn {
  font-family: var(--font-tekst);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 8px;
  border: 2px solid var(--ui-border);
  border-radius: var(--radius);
  background: var(--perkament);
  color: var(--tekst);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  text-align: center;
}

.choice-btn:hover:not(:disabled) {
  background: var(--perkament-dk);
  border-color: var(--bruin);
  transform: translateY(-1px);
}

.choice-btn.correct { background: #d4edda; border-color: var(--groen); color: var(--groen); }
.choice-btn.wrong   { background: #f8d7da; border-color: var(--rood);  color: var(--rood);  }

/* ----- Feedback tekst ----- */
.feedback {
  font-size: 1rem;
  font-weight: 700;
  min-height: 28px;
  text-align: center;
  transition: opacity 0.3s;
}
.feedback.correct { color: var(--groen); }
.feedback.wrong   { color: var(--rood); }

/* ----- Voortgangsbalk ----- */
.progress-bar {
  height: 12px;
  background: var(--perkament-dk);
  border-radius: 6px;
  border: 1px solid var(--ui-border);
  position: relative;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--goud), var(--goud-licht));
  border-radius: 6px;
  transition: width 0.4s ease;
  width: 0%;
}

.progress-text {
  position: absolute;
  right: 6px;
  top: -1px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--tekst-zacht);
  line-height: 12px;
}

/* ----- Control paneel ----- */
.control-panel {
  background: var(--ui-bg);
  border: 2px solid var(--ui-border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  box-shadow: var(--schaduw);
}

.mode-selector, .action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mode-btn {
  font-family: var(--font-tekst);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 8px 14px;
  border: 2px solid var(--ui-border);
  border-radius: 20px;
  background: var(--perkament);
  color: var(--tekst-zacht);
  cursor: pointer;
  transition: all 0.2s;
}

.mode-btn.active, .mode-btn:hover {
  background: var(--bruin);
  color: var(--goud-licht);
  border-color: var(--bruin);
}

.category-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.category-selector label {
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ----- Knoppen ----- */
.btn {
  font-family: var(--font-tekst);
  font-size: 1rem;
  font-weight: 700;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 3px 0 rgba(0,0,0,0.3);
}

.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.3); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--bruin), var(--goud));
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--bruin-dk), var(--bruin)); }

.btn-secondary {
  background: var(--perkament-dk);
  color: var(--tekst);
  border: 2px solid var(--ui-border);
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
.btn-secondary:hover:not(:disabled) { background: var(--perkament); border-color: var(--bruin); }

/* ----- Stal ----- */
.stable {
  background: var(--ui-bg);
  border: 2px solid var(--ui-border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--schaduw);
}

.stable h3 {
  font-family: var(--font-titel);
  font-size: 1rem;
  color: var(--bruin);
  margin-bottom: 10px;
}

.horse-collection {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.collected-horse {
  font-size: 2rem;
  cursor: help;
  transition: transform 0.2s;
}
.collected-horse:hover { transform: scale(1.3) rotate(5deg); }

.horse-slot {
  width: 36px;
  height: 36px;
  border: 2px dashed var(--ui-border);
  border-radius: 6px;
  opacity: 0.4;
}

/* ----- Modals ----- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(60,30,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(3px);
}

.modal.hidden { display: none; }

.modal-content {
  background: var(--perkament);
  border: 3px solid var(--goud);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: modalPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

.modal-content h2 {
  font-family: var(--font-titel);
  font-size: 1.6rem;
  color: var(--bruin);
  margin-bottom: 16px;
}

.new-horse-emoji { font-size: 4rem; margin: 10px 0; animation: horseBounce 0.6s ease-out; }
.horse-name-display { font-size: 1.4rem; font-weight: 700; color: var(--bruin); }
.horse-desc-display { font-size: 0.95rem; color: var(--tekst-zacht); margin: 8px 0 16px; }
.level-up-horse { font-size: 3rem; margin: 12px 0; }

.end-stars { font-size: 2rem; margin: 8px 0; letter-spacing: 4px; }
.end-stats p { margin: 6px 0; font-size: 1rem; }
.end-horse { font-size: 2.5rem; margin: 12px 0; }

/* ----- Confetti ----- */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}

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

/* ----- Utility ----- */
.hidden { display: none !important; }