/* ---------- Mr. Food Coach — Calorie Challenge ---------- */

:root {
  --green: #78bc75;
  --green-dark: #5da35a;
  --orange: #ff930f;
  --bg: #faf9f5;
  --card-bg: #ffffff;
  --ink: #2b2b28;
  --ink-soft: #6b6b66;
  --red: #e0554a;
  --radius-lg: 28px;
  --radius-md: 18px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, "Avenir Next", "Century Gothic", Avenir, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #ece9e0;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
}

button {
  font-family: inherit;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

.app {
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
}

.hidden {
  display: none !important;
}

/* ---------- Generic buttons ---------- */

.btn {
  border: none;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--orange);
  color: #fff;
  font-size: 1.05rem;
  padding: 1.1rem 1.5rem;
  width: 100%;
  min-height: 60px;
  box-shadow: 0 8px 20px rgba(255, 147, 15, 0.35);
}

/* ---------- Start screen ---------- */

.screen-start {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(1.5rem + var(--safe-top)) 1.75rem calc(1.75rem + var(--safe-bottom));
}

.logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  align-self: flex-start;
  object-fit: cover;
}

.start-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.9rem;
  position: relative;
}

.title {
  font-size: 2.6rem;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--green-dark);
  margin: 0;
}

.subtitle {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}

.intro-text {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0.4rem 0 0.2rem;
}

.character-start {
  width: 130px;
  margin-top: 0.5rem;
  object-fit: contain;
}

.btn-start {
  flex-shrink: 0;
}

/* ---------- Quiz screen ---------- */

.screen-quiz {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(1rem + var(--safe-top)) 1.25rem calc(1.25rem + var(--safe-bottom));
  gap: 0.9rem;
}

.quiz-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.progress-track {
  flex: 1;
  height: 10px;
  background: #e3e0d4;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--green);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.progress-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-soft);
  min-width: 44px;
  text-align: right;
}

.product-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 0;
}

.product-name {
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0.2rem 0 0;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.product-amount {
  font-size: 1rem;
  font-weight: 700;
  color: var(--orange);
  margin: 0.15rem 0 0.5rem;
}

.product-image-wrap {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}

.product-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  animation: pop-in 0.35s ease;
}

.question-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0.4rem 0 0;
}

.answers {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.btn-answer {
  flex: 1;
  background: #fff;
  border: 2px solid #e3e0d4;
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 800;
  padding: 1.3rem 0.5rem;
  border-radius: var(--radius-md);
  min-height: 76px;
}

.btn-answer:disabled {
  cursor: default;
}

.btn-answer.is-correct {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.btn-answer.is-wrong {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn-answer.is-dimmed {
  opacity: 0.45;
}

/* ---------- Feedback ---------- */

.feedback {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  padding: 1.25rem 1.25rem calc(1.5rem + var(--safe-bottom));
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
  animation: slide-up 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.feedback-text {
  font-size: 1.3rem;
  font-weight: 900;
  margin: 0 0 0.5rem;
  color: var(--green-dark);
}

.feedback-lesson {
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 1rem;
}

.feedback.is-wrong .feedback-text {
  color: var(--red);
}

/* Food Fight "wint met X kcal": de volledige regel volgt dezelfde
   feedbackkleur als GOED!/HELAAS! (geen apart accent meer). */
#ff-feedback-lesson {
  color: var(--green-dark);
}

.feedback.is-wrong #ff-feedback-lesson {
  color: var(--red);
}

/* ---------- End screen ---------- */

.screen-end {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(1.5rem + var(--safe-top)) 1.75rem calc(1.75rem + var(--safe-bottom));
  gap: 0.35rem;
}

.character-end {
  width: 150px;
  object-fit: contain;
  margin-bottom: 0.5rem;
  animation: pop-in 0.4s ease;
}

.end-score-label {
  font-size: 1rem;
  color: var(--ink-soft);
  font-weight: 700;
  margin: 0;
}

.end-score {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--green-dark);
  margin: 0.1rem 0 0.3rem;
}

.end-message {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 1.75rem;
}

.btn-again {
  max-width: 340px;
}

.end-cta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.end-cta-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
}

.end-cta-text {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: 280px;
  line-height: 1.4;
}

.end-cta-link {
  color: var(--green-dark);
  font-weight: 700;
}

/* ---------- Home screen ---------- */

.screen-home {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(1.25rem + var(--safe-top)) 1.25rem calc(1.5rem + var(--safe-bottom));
  gap: 1.25rem;
  overflow-y: auto;
}

.home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-stats {
  display: flex;
  gap: 0.5rem;
}

.stat-chip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--card-bg);
  border: 2px solid #e3e0d4;
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink);
}

.stat-icon {
  font-size: 1rem;
  line-height: 1;
}

.home-header {
  text-align: left;
}

.home-title {
  font-size: 2.1rem;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--green-dark);
  margin: 0;
}

.home-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}

/* Cards (Dagelijkse Challenge + spelmodi) */

.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}

.card:active:not(:disabled) {
  transform: scale(0.98);
}

.card:disabled {
  cursor: default;
}

.card-daily {
  background: var(--green);
  /* #78BC75 is te licht voor witte tekst (contrast ~2.3:1). De bestaande
     donkere --ink geeft ~6.3:1 en blijft dus goed leesbaar op de FOODIKU
     Green-kaart zonder de merkkleur zelf te verdonkeren. */
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(120, 188, 117, 0.35);
}

.card-daily-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.card-eyebrow {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.card .card-sub {
  font-size: 0.88rem;
  font-weight: 600;
  opacity: 0.92;
}

.badge-soon {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.badge-cta {
  flex-shrink: 0;
  background: #fff;
  color: var(--green-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.home-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.section-title {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0;
}

.card-mode {
  flex-direction: column;
  align-items: flex-start;
  background: var(--card-bg);
  border: 2px solid #e3e0d4;
  gap: 0.3rem;
}

.card-mode-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
}

.card-mode .card-sub {
  color: var(--ink-soft);
  opacity: 1;
}

/* Homepage V2: geen dikke permanente oranje outline meer op gewone
   gamecards (oranje is energie/CTA, geen behang) — neutrale border, gelijk
   aan de al bestaande .card-mode-vol-prototypetegels. */
.card-mode-active {
  border-color: #e3e0d4;
}

.card-mode-active .card-mode-title {
  color: var(--green-dark);
}

.card-mode:disabled {
  opacity: 0.6;
}

.card-mode .badge-soon {
  margin-top: 0.15rem;
  background: #ece9e0;
  color: var(--ink-soft);
}

/* ---------- Terug-navigatie ---------- */

.btn-back {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.btn-back:active {
  background: #e3e0d4;
}

.btn-secondary {
  background: transparent;
  color: var(--green-dark);
  font-size: 1.05rem;
  padding: 1.1rem 1.5rem;
  width: 100%;
  min-height: 60px;
  border: 2px solid #e3e0d4;
  box-shadow: none;
}

.btn-home {
  max-width: 340px;
  margin-top: 0.75rem;
}

/* ---------- Animations ---------- */

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Food Fight ---------- */

.screen-foodfight {
  flex: 1;
  max-height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: calc(1rem + var(--safe-top)) 1.25rem calc(1.25rem + var(--safe-bottom));
  gap: 0.5rem;
}

.screen-foodfight #ff-feedback {
  position: static;
  margin-top: 0.15rem;
  padding-bottom: 1.25rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.ff-heading {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: center;
  margin: 0.2rem 0 0;
}

.ff-question {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 0 0.2rem;
}

.ff-arena {
  flex: 1;
  min-height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ff-card {
  flex: 1;
  min-height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 100%;
  background: var(--card-bg);
  border: 2px solid #e3e0d4;
  border-radius: var(--radius-lg);
  padding: 0.6rem;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, opacity 0.2s ease;
}

.ff-card:active:not(:disabled) {
  transform: scale(0.98);
}

.ff-card:disabled {
  cursor: default;
}

.ff-card-image {
  flex: 0 0 auto;
  width: 100%;
  height: 16vh;
  object-fit: contain;
  animation: pop-in 0.35s ease;
}

.ff-card-name {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
}

.ff-card-amount {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--orange);
}

.ff-card-kcal {
  visibility: hidden;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--ink);
}

.ff-card-kcal.is-shown {
  visibility: visible;
}

.ff-card.is-winner .ff-card-kcal {
  color: var(--green-dark);
}

.ff-card.was-chosen {
  border-color: var(--ink-soft);
}

.ff-card.is-winner {
  border-color: var(--green);
  background: rgba(120, 188, 117, 0.12);
}

.ff-card.is-loser {
  opacity: 0.55;
}

.ff-winner-badge {
  visibility: hidden;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--green-dark);
}

.ff-winner-badge.is-shown {
  visibility: visible;
}

.ff-vs {
  align-self: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(255, 147, 15, 0.35);
  z-index: 1;
  margin: -0.55rem 0;
  animation: pop-in 0.3s ease;
}

.ff-end-title {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

/* ---------- Daily Challenge eindscherm ---------- */

#screen-daily-end {
  position: relative;
}

.daily-end-title {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

/* ---------- Streak reward ---------- */

.streak-reward {
  position: relative;
  margin: 1.1rem 0 0.25rem;
}

.streak-reward-value {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--green-dark);
  margin: 0;
}

.streak-reward-value.pop {
  animation: pop-in 0.35s ease;
}

.streak-reward.is-milestone .streak-reward-value {
  font-size: 1.9rem;
  color: var(--orange);
}

.streak-reward-milestone-title {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0.35rem 0 0;
}

.streak-reward-milestone-sub {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0.3rem 0 0;
}

.confetti-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0.9;
  animation-name: confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes confetti-fall {
  from {
    transform: translateY(0) rotate(0deg);
    opacity: 0.9;
  }
  to {
    transform: translateY(280px) rotate(360deg);
    opacity: 0;
  }
}

/* ---------- Food IQ (compact eindscherm-weergave) ---------- */

.food-iq-block {
  margin: 0.9rem 0 0.25rem;
}

.food-iq-label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0 0 0.2rem;
}

.food-iq-value {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ink);
  margin: 0;
}

.food-iq-sub {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0.25rem 0 0;
}

.daily-message-box {
  background: var(--card-bg);
  border: 2px solid #e3e0d4;
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0 1rem;
  text-align: center;
}

.daily-message-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}

.daily-message-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.4;
}

.daily-end-outro {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

@media (min-width: 480px) {
  body {
    background: #ece9e0;
    padding: 2rem 0;
  }
  .app {
    min-height: calc(100dvh - 4rem);
    border-radius: 32px;
  }
}

/* =====================================================================
   VOL! PROTOTYPE — tijdelijk, zelfstandig, veilig te verwijderen.
   Alles hieronder (vanaf de #screen-vol/.vol-*-regels) is uitsluitend voor
   die markup uit index.html en js/vol.js. Raakt geen bestaande stijlen aan.

   `.card-mode-vol` hieronder is een uitzondering: die klasse is inmiddels
   een gedeelde "prototype-tegel"-borderreset voor meerdere homepage-tegels
   (Higher/Lower, Spot On!, Brain Bite), niet meer specifiek voor VOL! zelf
   — VOL! staat sinds Homepage V2 niet meer op de homepage (geparkeerd,
   opvolger wordt de toekomstige game "Calorie Match", zie CLAUDE.md), maar
   deze klasse blijft actief in gebruik en mag niet verwijderd worden.
   ===================================================================== */

.card-mode-vol {
  border-color: #e3e0d4;
}

.badge-proto {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
  background: var(--orange);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
}

.screen-vol {
  flex: 1;
  max-height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: calc(1rem + var(--safe-top)) 1.25rem calc(1.5rem + var(--safe-bottom));
  gap: 0.5rem;
}

.vol-phase {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- Vraagfase ---------- */

.vol-eyebrow {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--green-dark);
  margin: 0.2rem 0 0;
}

.vol-question {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
  margin: 0.5rem 0 1.25rem;
}

.vol-choices {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
}

.vol-choice {
  flex: 1;
  min-height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  background: var(--card-bg);
  border: 2px solid #e3e0d4;
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, opacity 0.2s ease;
}

.vol-choice:active:not(:disabled) {
  transform: scale(0.98);
}

.vol-choice:disabled {
  cursor: default;
}

.vol-choice-image {
  width: 100%;
  height: 18vh;
  object-fit: contain;
  animation: pop-in 0.35s ease;
}

.vol-choice-name {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.vol-choice.is-correct {
  border-color: var(--green);
  background: rgba(120, 188, 117, 0.12);
}

.vol-choice.is-correct .vol-choice-name {
  color: var(--green-dark);
}

.vol-choice.is-wrong {
  border-color: var(--red);
  background: rgba(224, 85, 74, 0.08);
}

.vol-choice.is-dimmed {
  opacity: 0.55;
}

.vol-choice-vs {
  align-self: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(255, 147, 15, 0.35);
  z-index: 1;
  margin: -0.55rem 0;
}

.screen-vol #vol-feedback {
  position: static;
  margin-top: 0.5rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.screen-vol #vol-feedback .btn-primary {
  width: 100%;
  margin-top: 0.25rem;
}

/* ---------- Revealfase ---------- */

.vol-phase-reveal {
  align-items: stretch;
  padding: 0 0.15rem;
}

.vol-kcal-label {
  text-align: center;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--orange);
  margin: 0.1rem 0 0.6rem;
  letter-spacing: 0.02em;
}

/* De magen zijn de hero van dit scherm: zo groot mogelijk, direct naast elkaar. */
.vol-arena {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  justify-content: center;
}

.vol-stomach-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vol-stomach-wrap {
  width: 100%;
  aspect-ratio: 240 / 260;
}

.vol-stomach-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.vol-stomach-outline {
  fill: rgba(255, 255, 255, 0.75);
  stroke: var(--ink-soft);
  stroke-width: 6;
  stroke-linejoin: round;
}

.vol-amounts {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.vol-amount-col {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.vol-stomach-name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.vol-stomach-amount {
  margin: 0.05rem 0 0;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--green-dark);
  line-height: 1.1;
  opacity: 0;
  transform: scale(0.85);
}

.vol-stomach-amount.is-shown {
  animation: vol-pop-emphasis 0.5s cubic-bezier(0.3, 1.4, 0.4, 1) both;
}

@keyframes vol-pop-emphasis {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  70% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Olijfolie: klein laagje vloeistof, groeit vanaf de bodem van de maag omhoog
   met een licht gebogen vloeistofoppervlak en een zachte "settle"-overshoot. */
.vol-oil-fill {
  fill: #b8c93a;
  fill-opacity: 0.9;
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 1s cubic-bezier(0.32, 1.3, 0.45, 1);
}

.vol-oil-stream {
  fill: #b8c93a;
  fill-opacity: 0.9;
  transition: opacity 0.25s ease 0.1s;
}

/* Aardbeien: grote, elkaar overlappende stukjes die vallen en de maag vullen
   (zie volStrawberryPositions in js/vol.js voor de vooraf bepaalde stapeling). */
.vol-strawberry {
  opacity: 0;
  transform: translateY(-300px) rotate(0deg);
}

.vol-is-filled .vol-strawberry {
  animation: vol-strawberry-fall 0.65s cubic-bezier(0.4, 0.4, 0.35, 1) both;
}

@keyframes vol-strawberry-fall {
  0% {
    opacity: 0;
    transform: translateY(-300px) rotate(var(--vol-rot, 0deg));
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--vol-rot, 0deg));
  }
}

.vol-message {
  text-align: center;
  margin-top: 0.9rem;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.3, 1.3, 0.4, 1);
}

.vol-message.is-shown {
  opacity: 1;
  transform: scale(1);
}

.vol-message-title {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--green-dark);
  margin: 0 0 0.4rem;
}

.vol-message-sub {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}

.vol-btn-again {
  margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .vol-oil-fill {
    transition-duration: 0.01ms !important;
  }
  .vol-is-filled .vol-strawberry {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
  .vol-stomach-amount.is-shown {
    animation-duration: 0.01ms !important;
  }
  .vol-message {
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   HIGHER OR LOWER PROTOTYPE — tijdelijk, zelfstandig, veilig te verwijderen.
   Alles hieronder is uitsluitend voor de #screen-hl / .hl-* markup uit
   index.html en js/higherlower.js. Raakt geen bestaande stijlen aan.
   ===================================================================== */

.screen-hl {
  flex: 1;
  max-height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: calc(1rem + var(--safe-top)) 1.25rem calc(1.25rem + var(--safe-bottom));
  gap: 0.4rem;
}

.hl-phase {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hl-title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0.1rem 0 0;
}

/* ---------- Mode-selectie ---------- */

#hl-phase-select {
  gap: 0.75rem;
  justify-content: center;
}

.hl-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  width: 100%;
  text-align: left;
  background: var(--card-bg);
  border: 2px solid #e3e0d4;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}

.hl-mode-card:active {
  transform: scale(0.98);
}

.hl-mode-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--green-dark);
}

.hl-mode-sub {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.hl-sub {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0.15rem 0 0.4rem;
}

.hl-streak {
  align-self: center;
  background: var(--card-bg);
  border: 2px solid #e3e0d4;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-weight: 900;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.hl-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  background: var(--card-bg);
  border: 2px solid #e3e0d4;
  border-radius: var(--radius-lg);
  padding: 0.5rem;
}

.hl-card-image {
  flex: 1;
  min-height: 0;
  max-width: 100%;
  object-fit: contain;
}

.hl-card-name {
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0.1rem 0 0;
  text-align: center;
}

.hl-card-kcal {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--green-dark);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.hl-card-kcal.is-revealed {
  animation: pop-in 0.3s ease;
}

/* Subtiele landing na de kcal-count-up (hlAnimateKcalCountUp in
   higherlower.js): alleen een lichte scale-pop op het getal zelf, geen
   bounce/glow. */
@keyframes hl-kcal-land {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

.hl-card-kcal.hl-kcal-land {
  animation: hl-kcal-land 0.22s ease;
}

.hl-card-unit {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0;
}

.hl-card-next.hl-pop {
  animation: pop-in 0.3s ease;
}

.hl-vs {
  align-self: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(255, 147, 15, 0.35);
  z-index: 1;
  margin: -0.6rem 0;
}

.hl-buttons {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.6rem;
  flex-shrink: 0;
}

.hl-btn {
  flex: 1;
  background: #fff;
  border: 2px solid #e3e0d4;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  padding: 1.1rem 0.5rem;
  border-radius: var(--radius-md);
  min-height: 64px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}

.hl-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.hl-btn:disabled {
  cursor: default;
}

.hl-btn.is-correct {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.hl-btn.is-wrong {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.hl-feedback {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--green-dark);
  margin: 0.5rem 0 0;
  animation: pop-in 0.25s ease;
}

/* ---------- Game over ---------- */

.hl-phase-over {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3rem;
}

.hl-over-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--red);
  margin: 0 0 0.75rem;
}

.hl-over-compare {
  display: flex;
  gap: 0.6rem;
  width: 100%;
}

.hl-over-item {
  flex: 1;
  background: var(--card-bg);
  border: 2px solid #e3e0d4;
  border-radius: var(--radius-md);
  padding: 0.6rem;
}

.hl-over-name {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink-soft);
  margin: 0 0 0.2rem;
}

.hl-over-kcal {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
  margin: 0;
}

.hl-over-portion {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0.2rem 0 0;
}

.hl-over-explain {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0.6rem 0 0.5rem;
}

.hl-over-score-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}

.hl-over-score {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--green-dark);
  margin: 0;
}

.hl-over-best {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}

#hl-btn-play-again {
  width: 100%;
  max-width: 340px;
}

/* =====================================================================
   FOOD QUIZ — UX/DESIGN V2 ("Apple-clean × game-feel × FOODIKU-eigen"),
   zelfstandig, veilig te verwijderen. Alles hieronder is uitsluitend voor
   de #screen-foodquiz*-markup uit index.html en js/foodquiz.js. Raakt geen
   bestaande gedeelde klassen of andere schermen aan — FOOD QUIZ heeft haar
   eigen fq- en #fq-selectors i.p.v. de gedeelde .quiz-header/.progress-track/
   .feedback/.food-iq-block-taal, juist om hier vrij te kunnen herontwerpen
   zonder Calorie Challenge/Food Fight/Daily Challenge te raken.

   Ontwerpprincipe: "FOODIKU is rustig wanneer je denkt, speels wanneer je
   kiest en uitbundig wanneer je iets verdient." Kleur is functioneel, niet
   decoratief: groen = correct/succes/primaire actie, rood = uitsluitend
   fout, "reward" (afgeleid van FOODIKU Green) = uitsluitend voor verdiende
   mijlpalen (streak-milestone, 10/10) — nooit voor gewone UI-chrome.
   Containers/pills alleen waar iets echt interactief of gegroepeerd moet
   zijn; de vraag, voortgang en Food IQ mogen vrij op het canvas staan.

   BRAND SEPARATION (V2.2): FOODIKU is vanaf nu visueel losgekoppeld van de
   Mr. Food Coach/MRFC-huisstijl hierboven (--green/--orange/etc.). Alle
   FOOD QUIZ-kleuren lopen via de --fq-*-tokens hieronder, gedefinieerd op de
   drie #screen-foodquiz*-hosts. #2E8B57 is een VOORLOPIGE merkkleur (nog
   niet definitief bevroren) — wijzig hem hier centraal zodra FOODIKU's
   definitieve kleur vaststaat; geen losse hardcoded FOODIKU-hex elders in
   dit bestand.

   Motion-taal (bewust consistent hergebruikt, geen losse eenmalige CSS):
   - "fq-fade-up" (260-320ms, ease-out): entrance van vraag/antwoorden.
   - "fq-pop-in" (300ms, lichte overshoot): correcte reveal, streak-update,
     Food IQ-delta — een kleine, bevredigende "klik", geen cartoon-bounce.
   - "fq-shake" (320ms): controlled wrong-feedback, kort en subtiel.
   - "fq-sheet-up" (340ms, ease-out): de feedback/learning-sheet.
   Alles hieronder valt terug op ~0ms via de reduced-motion-media query
   onderaan; vertragingen (reveal, confetti) worden in foodquiz.js zelf al
   op 0 gezet wanneer reduced motion actief is.
   ===================================================================== */

#screen-foodquiz-intro,
#screen-foodquiz,
#screen-foodquiz-end {
  --fq-brand: #2e8b57;
  --fq-brand-dark: #132a20;
  --fq-canvas: var(--bg);
  --fq-surface: var(--card-bg);
  --fq-text: var(--ink);
  --fq-text-muted: var(--ink-soft);
  --fq-success: var(--fq-brand);
  --fq-error: var(--red);
  --fq-reward: #3fa372;
  --fq-neutral: #e4dfd1;
}

.fq-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* ---------- Introscherm ---------- */

.screen-fq-intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(1rem + var(--safe-top)) 1.75rem calc(1.75rem + var(--safe-bottom));
}

.fq-intro-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 14vh;
  gap: 0.85rem;
}

.fq-eyebrow {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fq-text-muted);
  margin: 0;
}

.fq-intro-title {
  font-size: 2.3rem;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--fq-text);
  margin: 0;
}

.fq-intro-text {
  font-size: 1.05rem;
  color: var(--fq-text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 36ch;
}

#screen-foodquiz-intro .btn-primary {
  background: var(--fq-brand);
  box-shadow: 0 8px 20px rgba(46, 139, 87, 0.28);
}

/* ---------- Quizscherm ---------- */

.screen-fq {
  flex: 1;
  max-height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: calc(1rem + var(--safe-top)) 1.5rem calc(1.25rem + var(--safe-bottom));
}

.screen-fq .fq-header {
  margin-bottom: 1.75rem;
}

.fq-progress-dots {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
}

.fq-progress-dot {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--fq-neutral);
  transition: background 0.25s ease;
}

.fq-progress-dot.is-current {
  background: var(--fq-text-muted);
}

.fq-progress-dot.is-correct {
  background: var(--fq-success);
}

.fq-progress-dot.is-wrong {
  background: var(--fq-error);
}

.fq-streak-inline {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--fq-success);
  white-space: nowrap;
}

.fq-streak-inline.is-milestone {
  color: #fff;
  background: var(--fq-reward);
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
}

.fq-topic {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fq-text-muted);
  margin: 0;
}

.fq-question {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fq-text);
  margin: 0.4rem 0 1.5rem;
}

/* Polish V2.2: lange vragen worden een te massief blok op deze zware
   typografie. Deterministisch op tekstlengte (fqApplyQuestionLength() in
   foodquiz.js zet deze modifier-klassen), geen DOM-meethacks. Korte vragen
   blijven ongewijzigd op volle impact. */
.fq-question.fq-question--long {
  font-size: 1.4rem;
  line-height: 1.28;
}

.fq-question.fq-question--xlong {
  font-size: 1.22rem;
  line-height: 1.36;
}

.fq-answers {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.fq-answer {
  text-align: left;
  background: var(--fq-surface);
  border: none;
  color: var(--fq-text);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 1.05rem 1.2rem;
  border-radius: 20px;
  min-height: 60px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 0 rgba(43, 43, 40, 0.04), 0 2px 10px rgba(43, 43, 40, 0.05);
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s ease, background 0.18s ease,
    opacity 0.2s ease;
}

.fq-answer:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(43, 43, 40, 0.06);
}

.fq-answer:disabled {
  cursor: default;
}

.fq-answer.is-correct,
.fq-answer.is-wrong {
  color: #fff;
}

.fq-answer.is-correct::before,
.fq-answer.is-wrong::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0 0.55rem -4px 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  font-size: 0.7rem;
  font-weight: 900;
}

.fq-answer.is-correct {
  background: var(--fq-success);
  box-shadow: 0 6px 18px rgba(46, 139, 87, 0.35);
}

.fq-answer.is-correct::before {
  content: "✓";
}

.fq-answer.is-wrong {
  background: var(--fq-error);
  box-shadow: 0 6px 18px rgba(224, 85, 74, 0.3);
}

.fq-answer.is-wrong::before {
  content: "✕";
}

.fq-answer.is-dimmed {
  opacity: 0.4;
}

/* ---------- Feedback / learning-moment ---------- */

.fq-feedback {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  padding: 1.5rem 1.5rem calc(1.75rem + var(--safe-bottom));
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.08);
  text-align: left;
  animation: fq-sheet-up 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.fq-feedback-text {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
  color: var(--fq-success);
}

.fq-feedback.is-wrong .fq-feedback-text {
  color: var(--fq-error);
}

.fq-explanation {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--fq-text);
  margin: 0 0 1.15rem;
}

.fq-source {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--fq-text-muted);
  margin: -0.35rem 0 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--fq-neutral);
}

.fq-foodiq-delta {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--fq-text-muted);
  margin: -0.5rem 0 1.25rem;
}

.fq-foodiq-delta.is-up {
  color: var(--fq-success);
}

.fq-foodiq-delta.is-down {
  color: var(--fq-error);
}

/* Polish V2.1: de CTA in de learning-sheet mag klikbaar en prettig blijven,
   maar niet zwaarder wegen dan de explanation erboven — kleiner, rustiger
   dan de start-/replay-knoppen, met behoud van een ruim touch target. */
.fq-feedback .btn-primary {
  background: var(--fq-brand);
  min-height: 50px;
  padding: 0.8rem 1.5rem;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(46, 139, 87, 0.22);
  margin-top: 0.15rem;
}

/* ---------- Resultaatscherm ---------- */

.screen-fq-end {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(1.5rem + var(--safe-top)) 2rem calc(1.75rem + var(--safe-bottom));
  position: relative;
}

/* V2.2: het Mr. Food Coach-mannetje is hier definitief weg (brand
   separation, zie CLAUDE.md/sectie hierboven). `#fq-brandmark-slot` is een
   bewust LEGE, verborgen plek voor het toekomstige, nog niet definitieve
   FOODIKU brain-bite-beeldmerk — geen tijdelijk logo, mascotte of emoji. */
.fq-brandmark-slot {
  display: none;
}

.fq-end-score {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fq-text);
  margin: 0;
  transition: color 0.3s ease;
}

.screen-fq-end.is-perfect .fq-end-score {
  color: var(--fq-success);
}

.fq-end-message {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fq-text);
  margin: 0.6rem 0 0;
  max-width: 30ch;
}

.fq-end-stats-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 1.1rem;
}

.fq-end-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.fq-end-stat-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fq-text-muted);
}

.fq-end-stat-value {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--fq-success);
}

.fq-end-stat-sub {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fq-text-muted);
}

#screen-foodquiz-end .btn-primary {
  background: var(--fq-brand);
  box-shadow: 0 8px 20px rgba(46, 139, 87, 0.28);
  max-width: 340px;
  margin-top: 2rem;
}

.fq-btn-quiet {
  background: none;
  border: none;
  color: var(--fq-text-muted);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  margin-top: 0.15rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fq-btn-quiet:active {
  opacity: 0.55;
}

/* ---------- Confetti-anker (zelfde patroon als #screen-daily-end) ---------- */

#screen-foodquiz {
  position: relative;
}

/* ---------- Motion: vraag komt tot leven ---------- */

.fq-topic.fq-enter,
.fq-question.fq-enter {
  animation: fq-fade-up 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fq-answer.fq-answer-enter {
  animation: fq-fade-up 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fq-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fq-sheet-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Motion: tap-lock + reveal ---------- */

.fq-answer.fq-is-chosen {
  transform: scale(0.97);
  background: #f2f0e9;
  box-shadow: 0 1px 2px rgba(43, 43, 40, 0.05);
}

.fq-answer.fq-shake {
  animation: fq-shake 0.32s ease;
}

@keyframes fq-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-3px);
  }
}

@keyframes fq-pop-in {
  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  60% {
    transform: scale(1.03);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.fq-answer.fq-pop,
.fq-feedback-text.fq-pop,
.fq-streak-inline.fq-pop,
.fq-foodiq-delta.fq-pop,
.fq-end-stat-value.fq-pop {
  animation: fq-pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Motion: 10/10-viering (los van de kleine streak-confetti) ----------
   Eigen animatienaam op de gedeelde .confetti-piece-basis (kleur/vorm), met
   een val over vrijwel de volledige viewporthoogte (100vh i.p.v. 280px) en
   een lichte horizontale drift (--fq-x-drift, per stukje willekeurig gezet
   door fqLaunchBigConfetti() in foodquiz.js) voor dieptesuggestie. */

.confetti-piece.fq-confetti-piece-big {
  animation-name: fq-confetti-fall-big;
}

@keyframes fq-confetti-fall-big {
  0% {
    transform: translate(0, -10px) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--fq-x-drift, 0px), 100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .fq-topic.fq-enter,
  .fq-question.fq-enter,
  .fq-answer.fq-answer-enter,
  .fq-answer.fq-shake,
  .fq-answer.fq-pop,
  .fq-feedback-text.fq-pop,
  .fq-streak-inline.fq-pop,
  .fq-foodiq-delta.fq-pop,
  .fq-end-stat-value.fq-pop,
  .fq-feedback {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}

/* =====================================================================
   SPOT ON! — zelfstandige V1-game, veilig te verwijderen. Alles hieronder
   is uitsluitend voor de #screen-spoton / .spo-* markup uit index.html en
   js/spoton.js. Raakt geen bestaande stijlen aan. Alle animaties hier
   worden volledig door spoton.js zelf gestuurd (rAF + prefers-reduced-motion
   check), daarom is er bewust geen aparte reduced-motion media query nodig:
   onder reduced motion voegt de JS de animatieklassen simpelweg nooit toe.
   ===================================================================== */

.screen-spoton {
  /* FOODIKU color system V1 — bewust uitsluitend hier gedefinieerd (scoped
     aan .screen-spoton), niet op :root: dit is een geïsoleerde kleurpolish
     van SPOT ON!, geen appbrede tokenwijziging. Kleurgrammatica: donkergroen
     = merk/primaire handeling, oranje = energie/voortgang/puntenverlies,
     fris groen = bijzonder positief (exact SPOT ON!), rood = werkelijk
     gevaar (budget <=500 of op), crème = rust/speelveld. */
  --spo-green: #1f6b4f;
  --spo-ink: #17251f;
  --spo-cream: #f3f0e7;
  --spo-surface: #fffefa;
  --spo-border: #ddd7c8;
  --spo-orange: #ff8a1f;
  --spo-success: #35a66f;
  --spo-danger: #d9584c;
  --spo-muted: #6f716b;

  background: var(--spo-cream);
  flex: 1;
  max-height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: calc(1rem + var(--safe-top)) 1.25rem calc(1.25rem + var(--safe-bottom));
  gap: 0.6rem;
}

.spo-phase {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* .screen-spoton scrollt (net als Food Fight/VOL!) i.p.v. een vaste hoogte
   te hebben, dus het gedeelde .feedback-paneel wordt hier een normaal
   meestromend flex-kind i.p.v. een absoluut overlay-paneel — anders overlapt
   het met de nog zichtbare invoer/kaart erboven. */
.screen-spoton #spo-reveal {
  position: static;
  margin-top: 0.6rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.spo-title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--spo-green);
  margin: 0.1rem 0 0;
}

.spo-stats {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.6rem 0;
}

.spo-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--spo-surface);
  border: 2px solid var(--spo-border);
  border-radius: var(--radius-md);
  padding: 0.4rem 1rem;
  min-width: 110px;
}

/* BUDGET is de levensvoorraad van SPOT ON! en krijgt daarom bewust iets
   meer visueel gewicht dan SCORE: een subtiele groene tint i.p.v. een
   nieuwe layout/health bar/icoon. */
.spo-stat-budget {
  background: rgba(31, 107, 79, 0.08);
  border-color: rgba(31, 107, 79, 0.28);
}

.spo-stat-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--spo-muted);
}

.spo-stat-value {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--spo-ink);
  font-variant-numeric: tabular-nums;
}

.spo-stat-budget .spo-stat-value {
  font-size: 1.3rem;
}

/* Dynamische budgetkleur (puur presentatie over de bestaande spoState.budget,
   toegepast door spoUpdateBudgetColor() in spoton.js): 1001-2000 groen,
   501-1000 oranje, 1-500 en 0 rood. */
#spo-budget-value.spo-budget-green {
  color: var(--spo-green);
}

#spo-budget-value.spo-budget-orange {
  color: var(--spo-orange);
}

#spo-budget-value.spo-budget-danger {
  color: var(--spo-danger);
}

.spo-stat-value.spo-pop {
  animation: spo-land-pop 0.22s ease;
}

.spo-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  background: var(--spo-surface);
  border: 2px solid var(--spo-border);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
}

.spo-card-image {
  flex: 1;
  min-height: 0;
  max-width: 100%;
  object-fit: contain;
}

.spo-card-name {
  font-size: 1.15rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--spo-ink);
  text-align: center;
  margin: 0.1rem 0 0;
}

.spo-card-unit {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--spo-muted);
  margin: 0;
}

.spo-guess-area {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.spo-guess-label {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--spo-muted);
}

.spo-guess-input {
  width: 100%;
  max-width: 280px;
  text-align: center;
  font-family: inherit;
  font-size: 2rem;
  font-weight: 900;
  color: var(--spo-ink);
  font-variant-numeric: tabular-nums;
  background: var(--spo-surface);
  border: 2px solid var(--spo-border);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  -webkit-tap-highlight-color: transparent;
}

.spo-guess-input:focus {
  outline: none;
  border-color: var(--spo-orange);
}

.spo-guess-error {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--spo-danger);
  text-align: center;
  margin: 0;
}

#spo-guess-area .btn {
  max-width: 280px;
}

/* CHECK = primaire spelhandeling (keuze bevestigen) -> donkergroen, geen
   oranje gloed meer. Vorm/grootte/positie ongewijzigd (zelfde .btn.btn-primary). */
#spo-btn-check {
  background: var(--spo-green);
  color: #fff;
  box-shadow: 0 6px 16px rgba(31, 107, 79, 0.25);
}

#spo-btn-check:active {
  background: #17573f;
}

/* VOLGENDE = verder spelen -> blijft oranje, nu op de exacte FOODIKU-tint. */
#spo-btn-next {
  background: var(--spo-orange);
  box-shadow: 0 8px 20px rgba(255, 138, 31, 0.35);
}

/* ---------- Reveal (hergebruikt de gedeelde .feedback-shell) ---------- */

.spo-reveal-actual-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--spo-muted);
  margin: 0;
}

.spo-reveal-actual-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--spo-ink);
  font-variant-numeric: tabular-nums;
  margin: 0.1rem 0 0.4rem;
}

.spo-reveal-actual-value.spo-pop {
  animation: spo-land-pop 0.22s ease;
}

.spo-reveal-guess {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--spo-muted);
  margin: 0 0 0.6rem;
}

/* SPOT ON! is geen goed/fout-quiz: een normale afwijking blijft neutraal
   donker, niet rood — de speler heeft niets "fout" gedaan. */
.spo-reveal-diff {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--spo-ink);
  margin: 0;
}

.spo-reveal-diff.is-exact {
  color: var(--spo-success);
}

.spo-reveal-diff.spo-pop {
  animation: spo-land-pop 0.22s ease;
}

/* Het puntenverlies zelf mag wel oranje: dat is waar het echte budgetverlies
   zichtbaar wordt, niet de afwijking op zich. */
.spo-reveal-points {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--spo-orange);
  margin: 0.2rem 0 1rem;
}

/* Zeer subtiele, rustige groene wash bij exact SPOT ON! — geen glow, geen
   confetti, geen nieuwe animatie, uitsluitend een lichte achtergrondtint. */
.screen-spoton #spo-reveal.is-exact {
  background: rgba(53, 166, 111, 0.07);
}

@keyframes spo-land-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

/* ---------- Game over ---------- */

.spo-phase-over {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3rem;
}

.spo-over-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--spo-danger);
  margin: 0 0 0.2rem;
}

.spo-over-score-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--spo-muted);
  margin: 0.2rem 0 0;
}

/* De run-score is de hero van het game-over-scherm: nadrukkelijk groter dan
   .spo-over-title hierboven. */
.spo-over-score-value {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--spo-green);
  margin: 0 0 1rem;
  font-variant-numeric: tabular-nums;
}

.spo-over-stats {
  display: flex;
  gap: 0.6rem;
  width: 100%;
}

.spo-over-stat {
  flex: 1;
  background: var(--spo-surface);
  border: 2px solid var(--spo-border);
  border-radius: var(--radius-md);
  padding: 0.6rem;
}

.spo-over-stat-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--spo-muted);
  margin: 0 0 0.3rem;
}

.spo-over-stat-product {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--spo-ink);
  margin: 0;
}

.spo-over-stat-diff {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--spo-muted);
  margin: 0.15rem 0 0;
}

.spo-over-best {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--spo-muted);
  margin: 0.9rem 0 0.75rem;
}

#spo-btn-play-again {
  width: 100%;
  max-width: 340px;
}

/* ---------- Exact-guess celebration (uitsluitend difference === 0) ----------
   Eigen, geïsoleerde SPOT ON!-implementatie, geen externe library. Zelfde
   bewezen CSS-techniek als FOOD QUIZ's fq-confetti-fall-big (vallende
   stukjes met horizontale drift via een custom property, afgehandeld door
   spoLaunchExactConfetti()/spoClearConfetti() in spoton.js), maar met een
   eigen regenboogpalet en position:fixed i.p.v. absolute: dit laagje moet
   over de VOLLEDIGE viewport vallen, niet alleen binnen het feedbackpaneel,
   ook wanneer #screen-spoton zelf scrollt. */
.spo-confetti-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 999;
}

.spo-confetti-piece {
  position: absolute;
  top: -12px;
  border-radius: 2px;
  opacity: 0.95;
  animation-name: spo-confetti-fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes spo-confetti-fall {
  0% {
    transform: translate(0, -12px) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--spo-x-drift, 0px), 100vh) rotate(720deg);
    opacity: 0;
  }
}