/* ── Quiz-scherm (#101 Routekaart-refresh) ─────────────────────────────
   Top-bar (score-bar) in sky-gradient; map in ink-frame; question-box
   als RkDialog; opties als chunky paper-buttons met A/B/C/D badges;
   feedback als yellow banner (correct) of rode frame-pulse (wrong). */

/* Body-scope tijdens quiz — paper bg, ink kleur. */
body.in-quiz {
  background: var(--color-bg);
  color: var(--color-ink);
}

/* Title-bar styling tijdens quiz zit in app.css (gedeeld met
   body.on-mode-select). Alleen de body-scope voor bg + ink kleur
   hierboven voor de rest van de quiz-elementen. */

/* ── Score-bar (top-bar met HP/XP-indicatoren) ── */
#score-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--color-sky), var(--color-sky-deep));
  border: var(--border-hero);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--fs-14);
}
#score-bar > span { white-space: nowrap; }

/* Progress-bar — grass in ink-frame */
#progress-wrap {
  flex: 1;
  background: var(--color-paper);
  border: var(--border-thin);
  border-radius: var(--radius-8);
  height: 14px;
  overflow: hidden;
  min-width: 60px;
}
#progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-grass), var(--color-grass-dark));
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}
.sc-mastered, .sc-ok { color: var(--color-grass-dark); font-weight: 700; }
.sc-err { color: var(--color-red); font-weight: 700; }
#phase-label {
  color: var(--color-ink-soft) !important;
  font-size: var(--fs-11) !important;
  font-weight: 700;
}

/* ── Map ── */
#map-wrap {
  /* width + max-width zitten in app.css zodat de 768+ media-query override wint. */
  border: var(--border-hero);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ── Question-box (RkDialog) ── */
#question-box {
  background: var(--color-paper);
  border: var(--border-hero);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  width: 100%;
  text-align: center;
  color: var(--color-ink);
}
#question-text {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  letter-spacing: var(--letter-display);
  color: var(--color-ink);
  margin-bottom: 12px;
  line-height: 1.1;
  font-weight: 400;
}
#map-click-hint {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--color-ink-soft);
  margin-bottom: 8px;
  display: none;
}
.map-click-mode #map-click-hint { display: block; }

/* ── Opties (2x2 met A/B/C/D badges) ── */
#options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.opt {
  position: relative;
  background: var(--color-paper);
  border: var(--border-hero);
  border-radius: var(--radius-10);
  box-shadow: var(--shadow-sm);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-18);
  padding: 16px 12px 16px 42px;  /* extra left-padding voor badge */
  min-height: 64px;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
  text-align: center;
  line-height: 1.2;
}
.opt::before {
  content: attr(data-badge);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-6);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
@media (hover: hover) {
  .opt:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--color-ink);
  }
}
.opt:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--color-ink); }
.opt.correct {
  background: var(--color-grass);
  color: var(--color-paper);
  animation: correct-pop 0.4s ease-out;
}
.opt.correct::before { background: var(--color-paper); color: var(--color-grass-dark); }
.opt.wrong {
  background: var(--color-red);
  color: var(--color-paper);
  animation: wrong-shake 0.4s ease-out;
}
.opt.wrong::before { background: var(--color-paper); color: var(--color-red-dark); }
.opt:disabled { cursor: default; }

@keyframes correct-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes wrong-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ── Typ-modus ── */
#text-input-wrap { display: none; margin-bottom: 10px; }
#hint-display {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: var(--color-yellow-dark);
  min-height: 20px;
  margin-bottom: 6px;
  font-weight: 700;
}
#text-row { display: flex; gap: 8px; }
#city-input {
  flex: 1;
  padding: 12px 14px;
  background: var(--color-paper);
  border: var(--border-hero);
  border-radius: var(--radius-10);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 600;
}
#city-input:focus { outline: none; box-shadow: var(--shadow-sm); }
#city-input:disabled { opacity: 0.6; }
#hint-btn {
  padding: 12px 14px;
  background: var(--color-yellow);
  border: var(--border-hero);
  border-radius: var(--radius-10);
  box-shadow: var(--shadow-sm);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-12);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.08s, box-shadow 0.08s;
}
@media (hover: hover) {
  #hint-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--color-ink);
  }
}
#hint-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Feedback ── */
#feedback {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 700;
  min-height: 22px;
  margin-bottom: 8px;
  color: var(--color-ink);
  padding: 0;
  border-radius: var(--radius-8);
  text-align: center;
}
.fb-ok {
  background: var(--color-yellow);
  color: var(--color-ink) !important;
  padding: 6px 12px;
  border: var(--border-thin);
  animation: sparkle 0.5s ease-out;
}
.fb-close {
  background: var(--color-sky);
  color: var(--color-ink) !important;
  padding: 6px 12px;
  border: var(--border-thin);
}
.fb-err {
  background: var(--color-red);
  color: var(--color-paper) !important;
  padding: 6px 12px;
  border: var(--border-thin);
}

@keyframes sparkle {
  0%   { transform: scale(0.9); opacity: 0; }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Next-button ── */
#next-btn {
  display: none;
  background: var(--color-grass);
  border: var(--border-hero);
  border-radius: var(--radius-10);
  box-shadow: var(--shadow-sm);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: var(--fs-16);
  letter-spacing: var(--letter-display);
  padding: 10px 20px;
  cursor: pointer;
  margin: 4px auto 0;
  transition: transform 0.08s, box-shadow 0.08s;
}
@media (hover: hover) {
  #next-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--color-ink);
  }
}
#next-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--color-ink); }

/* ── Hard-panel (nog even oefenen) ── */
#hard-panel {
  display: none;
  background: var(--color-paper);
  border: var(--border-hero);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-sm);
  padding: 10px 14px;
  width: 100%;
}
#hard-panel h3 {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-size: var(--fs-14);
  letter-spacing: var(--letter-display);
  margin-bottom: 6px;
  font-weight: 400;
}
#hard-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
#hard-list li {
  background: var(--color-red);
  color: var(--color-paper);
  border: var(--border-thin);
  padding: 3px 10px;
  border-radius: var(--radius-10);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 700;
}
#hard-list li b { color: var(--color-paper); }

/* ── Streak-teller ── */
#sc-streak-wrap { font-weight: 700; color: var(--color-red); }
@keyframes streak-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.streak-bump { animation: streak-bump 0.3s ease-out; }

/* ── Tablet split-view (#105) ────────────────────────────────────────────
   ≥768px (én viewport-hoogte ≥600 om iPhone-landscape uit te sluiten):
   body.in-quiz wordt een 2-koloms CSS-grid. Kaart komt links (1.25fr),
   question-box rechts (1fr). score-bar, title-bar en hard-panel spannen
   beide kolommen. Op mobile blijft de bestaande flex-column-layout (score
   boven kaart, kaart boven vraag).

   app.css zet body als flex-column; wij overrijden dat hier met display:
   grid alleen tijdens `body.in-quiz`. Home/mode-select/end blijven flex.

   De max-widths op #title-bar, #map-wrap, #question-box, #score-bar en
   #hard-panel uit app.css zijn in split-view onnodig (kolommen bepalen de
   breedte) en moeten daarom op `none`. Body krijgt zelf een max-width
   voor de container.

   Desktop-dashboard (#106) zal deze layout op ≥1280px overrijden met een
   3-koloms variant zodra #104 XP/badges levert.
*/
@media (min-width: 768px) and (min-height: 600px) {
  body.in-quiz {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "title    title"
      "score    score"
      "map      question"
      "hard     hard";
    column-gap: 14px;
    row-gap: 12px;
    max-width: 1140px;
    margin: 0 auto;
    align-items: start;
    justify-items: stretch;
  }
  body.in-quiz #title-bar    { grid-area: title;    max-width: none; width: 100%; }
  body.in-quiz #score-bar    { grid-area: score;    max-width: none; width: 100%; }
  body.in-quiz #map-wrap     { grid-area: map;      max-width: none; width: 100%; align-self: stretch; }
  body.in-quiz #question-box { grid-area: question; max-width: none; width: 100%; align-self: start; }
  body.in-quiz #hard-panel   { grid-area: hard;     max-width: none; width: 100%; }

  /* Map cel vult de 1fr row-hoogte; zonder deze override zou #leaflet-map
     via de app.css clamp-regel op een vaste hoogte springen en de kolom
     onder-/overlopen. */
  body.in-quiz #leaflet-map { height: 100%; }
}