/* =====================================================================
   De Tijdmachine van het Schooljaar — Kawaii upgrade
   Vaste 16:9 "stage" (1672 x 941) met de geïllustreerde machine als frame.
   Inhoud wordt in px ontworpen t.o.v. die basis en in zijn geheel geschaald.
   ===================================================================== */

:root {
  --ink: #5a3a2a;            /* warme bruine tekst (zoals de vraag in de mockup) */
  --ink-purple: #4f2d86;
  --purple: #7e57c9;
  --purple-deep: #5b349d;
  --pink: #ee5d7e;
  --pink-deep: #d8456b;
  --blue: #5cc0e6;
  --gold: #f0a93e;
  --gold-deep: #d98a22;
  --cream: #fff7e8;

  /* Pastel kaartkleuren uit de mockup */
  --card-blue: #c9e9fb;   --card-blue-sh: #8fc2e6;
  --card-pink: #fcd4dd;   --card-pink-sh: #e7a6b6;
  --card-gold: #ffe6b0;   --card-gold-sh: #e6bf6e;
  --card-green: #d6edb4;  --card-green-sh: #a7cd78;

  --stroke-soft: rgba(255, 255, 255, .85);

  --font: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  color: var(--ink);
  /* Warme letterbox-kleur rond de stage */
  background: #e7b487 radial-gradient(circle at 50% 38%, #f0cba6, #d99c72 75%);
  overflow: hidden;
}

button { font: inherit; }

/* ---------- Viewport + geschaalde stage ---------- */
#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1672px;
  height: 941px;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  background: url("Algemeenscherm.png") center/cover no-repeat;
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(70, 38, 60, .45);
  overflow: hidden;
  user-select: none;
}

/* ---------- Schermen (gestapeld op de stage) ---------- */
.app-shell, .screen { position: absolute; inset: 0; }

.screen { display: none; }
.screen.is-active { display: block; }

/* ============================================================
   TITELBANNER (bovenin, over de koepel van de machine)
   ============================================================ */
.title-banner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 6;
}

.title-banner--hero {
  top: 24px;
  width: 60%;
  padding: 18px 40px 22px;
  border-radius: 38px;
  background: linear-gradient(#fffaf0, #ffeccc);
  border: 6px solid #fff;
  box-shadow: 0 7px 0 var(--gold-deep), 0 18px 34px rgba(86, 49, 70, .34);
}

.title-banner--bar {
  top: 26px;
  min-width: 44%;
  max-width: 64%;
  padding: 14px 54px 16px;
  border-radius: 30px;
  background: linear-gradient(#8a63d6, #6c41b8);
  border: 5px solid #fff;
  box-shadow: 0 6px 0 #4d2c8a, 0 16px 30px rgba(70, 38, 86, .36);
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--pink);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.title-banner--bar .eyebrow { color: #ffd6e6; }

h1, h2, h3, p { text-wrap: balance; }

/* Chunky, omlijnde Kawaii-titel */
h1 {
  margin: 0;
  font-weight: 800;
  font-size: 5.1rem;
  line-height: .9;
  color: var(--purple-deep);
  letter-spacing: .005em;
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(120, 80, 160, .25), 0 9px 10px rgba(70, 40, 90, .25);
}
h1 span { display: block; }
h1 small {
  display: block;
  margin-top: 6px;
  font-size: .46em;
  color: var(--pink);
  -webkit-text-stroke: 5px #fff;
  paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(190, 90, 120, .22);
}

.subtitle {
  margin: 10px 0 0;
  color: #7a4fae;
  font-size: 1.25rem;
  font-weight: 700;
}

.title-banner--bar h2 {
  margin: 0;
  color: #fff;
  font-size: 2.9rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 3px 0 rgba(60, 30, 90, .45);
}
.title-banner--bar #mode-instruction {
  margin: 6px 0 0;
  color: #fdeaff;
  font-size: 1.12rem;
  font-weight: 600;
}

/* ============================================================
   MACHINE-SCHERM (inhoudszone over het cream-ovaal)
   Cream-ovaal in de art: ~x 27–73%, y 25–72%
   ============================================================ */
.machine-content {
  position: absolute;
  left: 50%;
  top: 49.5%;
  transform: translate(-50%, -50%);
  width: 48%;
  display: grid;
  place-items: center;
  z-index: 5;
}
.machine-content--grid { width: 49%; top: 50.5%; }
.machine-content--question { width: 47%; top: 49.5%; }

/* ---------- Modus-kaarten (startscherm) ---------- */
.mode-grid {
  display: grid;
  gap: 22px;
  width: 100%;
}

.mode-card, .icon-card, .action-button, .nav-button {
  cursor: pointer;
  border: 0;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  touch-action: manipulation;
}

.mode-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  color: #fff;
  text-align: left;
  border: 5px solid var(--stroke-soft);
  border-radius: 28px;
  box-shadow: 0 8px 0 rgba(75, 39, 83, .26), 0 16px 30px rgba(70, 38, 68, .26);
  animation: card-breathe 4.5s ease-in-out infinite;
}
.mode-card.future { animation-delay: -2.25s; }
.mode-card.memories { background: linear-gradient(150deg, #6fcded, #3ba2d4); }
.mode-card.future { background: linear-gradient(150deg, #f497b0, #e0688c); }

.mode-icon {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  filter: drop-shadow(0 5px 4px rgba(68, 37, 67, .2));
}
.mode-icon img { width: 116%; height: 116%; object-fit: cover; }

.mode-copy { display: grid; gap: 5px; }
.mode-copy strong { font-size: 1.9rem; font-weight: 800; line-height: 1.02; }
.mode-copy small { font-size: 1.02rem; font-weight: 600; line-height: 1.2; opacity: .96; }
.arrow { font-size: 2.8rem; line-height: 1; opacity: .9; }

.mode-card:hover, .icon-card:hover, .action-button:hover, .nav-button:hover {
  transform: translateY(-5px) scale(1.02);
  filter: brightness(1.05);
}
.mode-card:active, .icon-card:active, .action-button:active, .nav-button:active {
  transform: translateY(2px) scale(.98);
}

button:focus-visible {
  outline: 5px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 9px rgba(102, 55, 152, .8);
}

/* ============================================================
   NAVIGATIE + TELLER (hoeken van de stage)
   ============================================================ */
.nav-corner { position: absolute; top: 28px; z-index: 7; }
.nav-left { left: 30px; }
.nav-right { right: 30px; }

.nav-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  border: 5px solid #fff;
  border-radius: 999px;
  background: linear-gradient(#f5789c, #e2547d);
  box-shadow: 0 6px 0 var(--pink-deep), 0 10px 18px rgba(120, 50, 75, .3);
}
.nav-button span { font-size: 1.3em; line-height: 1; }

.counter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 22px;
  color: #6a3a86;
  font-weight: 800;
  font-size: 1.08rem;
  border: 5px solid #fff;
  border-radius: 999px;
  background: rgba(255, 248, 235, .96);
  box-shadow: 0 6px 0 rgba(180, 150, 120, .5), 0 10px 18px rgba(90, 60, 70, .22);
}
.counter span { color: var(--gold); font-size: 1.2em; }

/* ---------- Volledig-scherm-knop (linksonder, op elk scherm) ---------- */
.fs-button {
  position: absolute;
  left: 26px;
  bottom: 28px;
  z-index: 8;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  color: #7a4f9e;
  cursor: pointer;
  border: 5px solid #fff;
  border-radius: 50%;
  background: rgba(255, 248, 235, .94);
  box-shadow: 0 5px 0 rgba(180, 150, 120, .5), 0 10px 18px rgba(90, 60, 70, .22);
  transition: transform .16s ease, filter .16s ease;
}
.fs-button:hover { transform: translateY(-4px) scale(1.04); filter: brightness(1.04); }
.fs-button:active { transform: translateY(2px) scale(.97); }
.fs-button svg { width: 30px; height: 30px; }
.fs-button .fs-exit { display: none; }
.fs-button[data-fs="on"] .fs-enter { display: none; }
.fs-button[data-fs="on"] .fs-exit { display: block; }

/* ============================================================
   PICTOGRAM-RASTER
   ============================================================ */
.icon-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.icon-card {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink-purple);
  border: 5px solid #fff;
  border-radius: 26px;
  background: var(--card-blue);
  box-shadow: 0 7px 0 var(--card-blue-sh), 0 14px 22px rgba(65, 38, 68, .2);
  animation: card-breathe 5s ease-in-out infinite;
}
.icon-card:nth-child(5n+1) { animation-delay: -0.0s; }
.icon-card:nth-child(5n+2) { animation-delay: -0.6s; }
.icon-card:nth-child(5n+3) { animation-delay: -1.2s; }
.icon-card:nth-child(5n+4) { animation-delay: -1.8s; }
.icon-card:nth-child(5n+5) { animation-delay: -2.4s; }

.icon-card.has-image {
  padding: 0;
  overflow: hidden;
  border: 5px solid #fff;
}

.icon-card-image {
  width: 78%;
  height: 78%;
  margin-top: 6%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 6px 5px rgba(67, 37, 59, .22));
}

.icon-card .icon-name {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--ink-purple);
}
.icon-card.has-image .icon-name {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  padding: 3px 14px;
  border-radius: 999px;
  background: rgba(255, 250, 240, .82);
  white-space: nowrap;
}

.icon-emoji { font-size: 3.4rem; filter: drop-shadow(0 6px 3px rgba(67, 37, 59, .16)); }

/* Pastel-rotatie van kaartkleuren (5n+1 = standaard hierboven) */
.icon-card:nth-child(5n+2) { background: var(--card-pink);  box-shadow: 0 7px 0 var(--card-pink-sh),  0 14px 22px rgba(65, 38, 68, .2); }
.icon-card:nth-child(5n+3) { background: var(--card-gold);  box-shadow: 0 7px 0 var(--card-gold-sh),  0 14px 22px rgba(65, 38, 68, .2); }
.icon-card:nth-child(5n+4) { background: var(--card-green); box-shadow: 0 7px 0 var(--card-green-sh), 0 14px 22px rgba(65, 38, 68, .2); }
.icon-card:nth-child(5n+5) { background: #e6dcfb;           box-shadow: 0 7px 0 #b9a6e6,               0 14px 22px rgba(65, 38, 68, .2); }

.icon-card.is-done {
  cursor: default;
  filter: grayscale(.35) brightness(.72);
  animation: none;
}
.icon-card.is-done:hover, .icon-card.is-done:active { transform: none; filter: grayscale(.35) brightness(.72); }
.icon-card.is-done .icon-name { opacity: 0; }

.done-badge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  text-shadow: 0 2px 5px rgba(54, 26, 62, .5);
  background: rgba(77, 41, 91, .32);
  border-radius: 21px;
}
.done-badge span {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #69b86f;
  box-shadow: 0 5px 12px rgba(50, 32, 61, .3);
}
.done-badge strong { font-size: 1.18rem; }

/* ============================================================
   ACTIEKNOPPEN (onderin, over het tapijt)
   ============================================================ */
.screen-actions {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 6;
}

.action-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 180px;
  justify-content: center;
  padding: 15px 26px;
  color: #fff;
  font-weight: 800;
  font-size: 1.18rem;
  border: 5px solid rgba(255, 255, 255, .8);
  border-radius: 20px;
  box-shadow: 0 6px 0 rgba(67, 36, 77, .32), 0 12px 20px rgba(58, 33, 67, .2);
}
.action-button span { font-size: 1.2em; line-height: 1; }
.action-button.primary { background: linear-gradient(#9a68dc, #7142b8); box-shadow: 0 6px 0 #5b329e, 0 12px 20px rgba(58, 33, 67, .22); }
.action-button.accent { background: linear-gradient(#f497b0, #df567f); box-shadow: 0 6px 0 #c33f64, 0 12px 20px rgba(58, 33, 67, .22); }
.action-button.secondary { color: #7a4458; background: linear-gradient(#fff8ec, #f3ddc9); box-shadow: 0 6px 0 #d8b48e, 0 12px 20px rgba(58, 33, 67, .18); }

.action-button:disabled {
  cursor: not-allowed;
  opacity: .5;
  filter: grayscale(.5);
  transform: none;
  box-shadow: 0 6px 0 rgba(67, 36, 77, .2);
}

/* ============================================================
   VRAAGSCHERM
   ============================================================ */
.mode-badge {
  position: absolute;
  left: 50%;
  top: 26px;
  transform: translateX(-50%);
  padding: 14px 46px;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 800;
  border: 5px solid #fff;
  border-radius: 30px;
  background: linear-gradient(#8a63d6, #6c41b8);
  box-shadow: 0 6px 0 #4d2c8a, 0 16px 30px rgba(70, 38, 86, .34);
  z-index: 6;
}

.question-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 46px 56px 40px;
  text-align: center;
  border: 7px solid #fff;
  border-radius: 40px;
  background: linear-gradient(#fffaf0, #fdeccb);
  box-shadow: 0 10px 0 var(--gold-deep), 0 24px 46px rgba(69, 36, 69, .3);
}
.question-card::after {
  content: "";
  position: absolute;
  inset: 13px;
  pointer-events: none;
  border: 3px dashed #efb084;
  border-radius: 28px;
}

.card-label {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 24px;
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  border: 4px solid #fff;
  border-radius: 999px;
  background: linear-gradient(#8a63d6, #6c41b8);
  box-shadow: 0 4px 0 #4d2c8a;
  white-space: nowrap;
}

.question-icon-wrap {
  position: relative;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffe3dc, #ffd0c6);
  box-shadow: inset 0 -8px 0 rgba(218, 124, 118, .14), 0 8px 16px rgba(150, 90, 90, .2);
  overflow: hidden;
  animation: icon-bob 3.4s ease-in-out infinite;
}
#question-icon { font-size: 5rem; filter: drop-shadow(0 7px 3px rgba(74, 36, 74, .16)); }
#question-icon-image { width: 84%; height: 84%; object-fit: contain; }

.question-card h3 {
  margin: 16px 0 2px;
  color: #b1607a;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.question-card p {
  max-width: 660px;
  margin: 8px 0 0;
  color: #6a4636;
  font-size: 2.45rem;
  font-weight: 800;
  line-height: 1.16;
}
.question-card p.is-compact { font-size: 1.95rem; line-height: 1.18; }
.card-stars { margin-top: 14px; color: var(--gold); font-size: 1.3rem; letter-spacing: .1em; }
.card-counter {
  color: #7a4458;
  background: rgba(255, 248, 235, .96);
}

.question-card.is-changing { animation: time-travel .55s ease both; }

/* ============================================================
   IDLE-SFEER: antennes, sterren, zwevende figuurtjes
   ============================================================ */
.ambient, .deco-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

.antenna-glow {
  position: absolute;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  filter: blur(3px);
  animation: glow-pulse 2.4s ease-in-out infinite;
}
.antenna-left {
  left: 27.4%; top: 13.5%;
  background: radial-gradient(circle, rgba(214, 132, 255, .95) 0%, rgba(178, 92, 255, .5) 38%, transparent 70%);
}
.antenna-right {
  right: 27.2%; top: 14.5%;
  background: radial-gradient(circle, rgba(126, 224, 255, .95) 0%, rgba(86, 184, 236, .5) 38%, transparent 70%);
  animation-delay: -1.2s;
}

.spark {
  position: absolute;
  color: #ffd25e;
  font-size: 1.9rem;
  text-shadow: 0 0 14px #fff, 0 0 6px #ffd25e;
  animation: float 4.5s ease-in-out infinite;
}
.spark-one   { top: 20%;  left: 20%; }
.spark-two   { top: 16%;  right: 22%; animation-delay: -1s; }
.spark-three { top: 60%;  left: 17%; animation-delay: -2s; }
.spark-four  { top: 64%;  right: 18%; animation-delay: -3s; }
.spark-five  { top: 38%;  left: 12%; animation-delay: -1.6s; font-size: 1.4rem; }
.spark-six   { top: 42%;  right: 11%; animation-delay: -2.6s; font-size: 1.4rem; }

.deco {
  position: absolute;
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(70, 40, 60, .3));
  animation: wobble 5s ease-in-out infinite;
}
.deco-1 { left: 3.5%;  top: 46%;  width: 96px;  animation-delay: -0.4s; }
.deco-2 { left: 7%;    top: 78%;  width: 78px;  animation-delay: -1.4s; }
.deco-3 { right: 3.4%; top: 44%;  width: 100px; animation-delay: -0.9s; }
.deco-4 { right: 6.5%; top: 77%;  width: 80px;  animation-delay: -2.1s; }
.deco-5 { left: 12%;   top: 21%;  width: 66px;  animation-delay: -1.7s; }
.deco-6 { right: 12%;  top: 22%;  width: 70px;  animation-delay: -2.7s; }

/* ============================================================
   TIJDREIS-OVERGANG (portaalflits per scherm)
   ============================================================ */
.warp-flash {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  border-radius: 26px;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95) 0%, rgba(190, 120, 255, .65) 18%, rgba(120, 70, 220, .25) 38%, transparent 62%);
}
.screen.is-active .warp-flash { animation: warp .62s ease-out both; }
.screen.is-active .machine-content { animation: content-pop .55s cubic-bezier(.2, 1.3, .5, 1) both; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes screen-in { from { opacity: 1; } to { opacity: 1; } }

@keyframes card-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes icon-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}
@keyframes glow-pulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.25); opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-14px) rotate(12deg); }
}
@keyframes wobble {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-12px) rotate(5deg); }
}
@keyframes warp {
  0% { opacity: 0; transform: scale(.35); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.4); }
}
@keyframes content-pop {
  0% { transform: translate(-50%, -50%) scale(.82); }
  60% { transform: translate(-50%, -50%) scale(1.03); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes time-travel {
  0% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
  45% { opacity: .25; transform: scale(.8) rotate(-2deg); filter: blur(6px) hue-rotate(40deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}