/* ==========================================================================
   Vrenken Expedition — spelmodus bovenop het stickerboek-thema.
   Expeditiejournaal: nachtblauw, topografische lijnen, papier en stempels.
   Kleuren per streek staan hier centraal; missies verwijzen ernaar via
   data-kleur="ijs|aqua|rood".
   ========================================================================== */

/* Merkkleuren uit handoff/brand-tokens.json (VrenkenTeam Adventures). */
:root {
  --exp-nacht: #13263E;
  --exp-nacht-2: #1d3a5c;
  --exp-ijs: #3F7FA6;
  --exp-ijs-diep: #2c5c7d;
  --exp-aqua: #39A7A0;
  --exp-aqua-diep: #26746f;
  --exp-groen: #2F6E4F;
  --exp-rood: #E65C4F;
  --exp-rood-diep: #a83c20;
  --exp-geel: #FFC928;
  --exp-papier: #f8f3e6;
  --exp-papier-rand: #e2d9c2;
  --exp-lijn: rgba(255, 255, 255, 0.10);
}

/* Topografische hoogtelijnen als achtergrond van de donkere vlakken. */
.exp-donker {
  background-color: var(--exp-nacht);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420' viewBox='0 0 640 420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.4'%3E%3Cpath d='M-20 80 C 120 20 240 140 380 90 S 620 30 680 90'/%3E%3Cpath d='M-20 130 C 110 70 250 190 390 140 S 610 80 680 140'/%3E%3Cpath d='M-20 185 C 100 125 260 245 400 195 S 600 135 680 195'/%3E%3Cpath d='M-20 250 C 90 190 270 310 410 260 S 590 200 680 260'/%3E%3Cpath d='M-20 320 C 80 260 280 380 420 330 S 580 270 680 330'/%3E%3Ccircle cx='500' cy='95' r='26'/%3E%3Ccircle cx='500' cy='95' r='46'/%3E%3Ccircle cx='500' cy='95' r='68'/%3E%3Ccircle cx='128' cy='300' r='22'/%3E%3Ccircle cx='128' cy='300' r='42'/%3E%3C/g%3E%3C/svg%3E");
  color: #e8eefb;
}
.exp-donker h1, .exp-donker h2, .exp-donker h3 { color: #ffffff; }

/* --- Hero ---------------------------------------------------------------- */

.exp-held { padding: 2.6rem 0 2.2rem; position: relative; }
.exp-held .omslag { max-width: 720px; text-align: center; }
.exp-kicker {
  display: inline-block;
  font-family: var(--kop);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--exp-geel);
  margin-bottom: 0.9rem;
}
.exp-held h1 { font-size: clamp(1.9rem, 7.5vw, 3.1rem); }
.exp-held .sub { color: #b9c6e2; font-size: 1.05rem; max-width: 34ch; margin: 0.4rem auto 1.4rem; }

/* Logo is ook de (verborgen) oudertoegang: 4 seconden ingedrukt houden. */
.exp-logo {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 2.5px solid var(--exp-geel);
  background: var(--exp-nacht-2);
  color: var(--exp-geel);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.exp-logo svg, .exp-logo img { width: 52px; height: 52px; display: block; pointer-events: none; }
/* Het woordmerk is ontworpen voor een lichte ondergrond: wit plaatje eronder. */
.exp-woordmerk { margin: 0 0 0.8rem; }
.exp-woordmerk img {
  max-width: min(280px, 74vw);
  height: auto;
  display: inline-block;
  background: var(--wit);
  border: 2.5px solid var(--exp-nacht);
  border-radius: 14px;
  padding: 0.5rem 0.9rem;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}
.exp-logo:focus-visible { outline: 3px solid var(--exp-ijs); outline-offset: 3px; }
.exp-logo.houdt { transform: scale(0.94); }

/* --- Knoppen ------------------------------------------------------------- */

.exp-knop {
  display: inline-block;
  font-family: var(--kop);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.8rem 1.7rem;
  min-height: 44px;
  border-radius: 999px;
  border: 2.5px solid var(--exp-nacht);
  background: var(--exp-geel);
  color: var(--exp-nacht);
  box-shadow: var(--schaduw-min);
  text-decoration: none;
}
.exp-knop:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--exp-nacht); }
.exp-knop:focus-visible { outline: 3px solid var(--exp-ijs-diep); outline-offset: 3px; }
.exp-knop.stil { background: transparent; color: inherit; border-color: currentColor; box-shadow: none; }
.exp-donker .exp-knop { border-color: var(--exp-geel); }

/* --- Schermvlak ---------------------------------------------------------- */

.exp-vlak { padding: 1.6rem 0 2.6rem; }
.exp-vlak .omslag { max-width: 720px; }

.exp-kaartje {
  background: var(--wit);
  border: var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.2rem;
}

/* Papieren dossier-look voor missieteksten. */
.exp-papieren {
  background: var(--exp-papier);
  border: 2px solid var(--exp-papier-rand);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin: 0.9rem 0;
}
.exp-papieren p:last-child { margin-bottom: 0; }

/* --- Spelerkeuze ---------------------------------------------------------- */

.exp-spelers { display: grid; gap: 0.8rem; margin-top: 1.2rem; }
.exp-speler {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 64px;
  padding: 0.8rem 1rem;
  border: var(--rand);
  border-radius: 16px;
  background: var(--wit);
  box-shadow: var(--schaduw-min);
  font-family: var(--kop);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--nacht);
  text-align: left;
}
.exp-speler:focus-visible { outline: 3px solid var(--exp-ijs-diep); outline-offset: 2px; }
.exp-speler .stempelrand {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2.5px dashed var(--nacht);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  flex: none;
}
.exp-speler small { display: block; font-family: var(--tekst); font-weight: 700; color: var(--inkt-zacht); font-size: 0.85rem; }

/* --- Missieoverzicht ------------------------------------------------------ */

.exp-kop-regel { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.exp-chip {
  display: inline-block;
  font-family: var(--kop);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  border: 2px solid var(--nacht);
  background: var(--wit);
}
.exp-chip.geel { background: var(--exp-geel); }

.exp-module { border-left: 10px solid var(--exp-ijs); }
.exp-module[data-kleur="aqua"] { border-left-color: var(--exp-aqua); }
.exp-module[data-kleur="rood"] { border-left-color: var(--exp-rood); }
.exp-module .status {
  font-family: var(--kop);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.exp-module .status.voltooid { color: var(--den); }
.exp-module .status.vergrendeld { color: var(--inkt-zacht); }
.exp-module .status.beschikbaar { color: var(--exp-ijs-diep); }

.exp-voortgang { display: flex; gap: 5px; margin: 0.6rem 0; }
.exp-voortgang span {
  height: 10px;
  flex: 1;
  border-radius: 6px;
  border: 2px solid var(--nacht);
  background: var(--wit);
}
.exp-voortgang span.af { background: var(--exp-geel); }

.exp-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.5rem 0; }
.exp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.83rem;
  font-weight: 800;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 2px dashed var(--nacht);
  background: var(--exp-papier);
}
.exp-badge.dicht { opacity: 0.38; border-style: dotted; }
.exp-badge.dicht img { filter: grayscale(1); }
.exp-badge img { display: block; flex: none; }
.exp-badge .bolletje { width: 10px; height: 10px; border-radius: 50%; background: var(--exp-geel); border: 1.5px solid var(--nacht); }

/* Gestileerde routekaart (SVG) op het overzicht. */
.exp-route { margin: 0.4rem 0 1.2rem; }
.exp-route svg { width: 100%; height: auto; display: block; }

/* --- Missiescherm --------------------------------------------------------- */

.exp-missiekop .waar {
  font-weight: 800;
  color: var(--inkt-zacht);
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}
.exp-terug { margin-bottom: 0.9rem; }

.exp-audio { margin: 0.9rem 0; }
.exp-audio audio { width: 100%; }
.exp-transcript {
  font-size: 0.92rem;
  color: var(--inkt-zacht);
  border-left: 4px solid var(--exp-geel);
  padding-left: 0.8rem;
  margin: 0.6rem 0 0;
}

/* Digitale kluis: grote cijfervakken, één hand bedienbaar. */
.exp-kluis { display: flex; gap: 0.6rem; justify-content: center; margin: 1.1rem 0; }
.exp-kluis input {
  width: clamp(52px, 16vw, 72px);
  height: clamp(64px, 20vw, 88px);
  font-family: var(--kop);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 700;
  text-align: center;
  border: var(--rand);
  border-radius: 14px;
  background: var(--wit);
  color: var(--nacht);
  box-shadow: var(--schaduw-min);
}
.exp-kluis input:focus-visible { outline: 3px solid var(--exp-ijs-diep); outline-offset: 2px; }

.exp-invoer input[type="text"] {
  width: 100%;
  min-height: 52px;
  font: inherit;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 0.6rem 0.9rem;
  border: var(--rand);
  border-radius: 14px;
}

.exp-keuze { display: grid; gap: 0.7rem; margin: 1rem 0; }
.exp-keuze button {
  min-height: 52px;
  padding: 0.7rem 1rem;
  border: var(--rand);
  border-radius: 14px;
  background: var(--wit);
  font: inherit;
  font-weight: 800;
  text-align: left;
  box-shadow: var(--schaduw-min);
}
.exp-keuze button[aria-pressed="true"] { background: var(--exp-geel); }
.exp-keuze button:focus-visible { outline: 3px solid var(--exp-ijs-diep); outline-offset: 2px; }
.exp-keuze .volgnr {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  margin-right: 0.55rem;
  border-radius: 50%;
  border: 2px solid var(--nacht);
  background: var(--exp-papier);
  font-size: 0.9rem;
}

/* Ingedrukt-houden-knop voor ouderbevestiging. */
.exp-houdknop {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 56px;
  border: var(--rand);
  border-radius: 999px;
  background: var(--wit);
  font-family: var(--kop);
  font-weight: 600;
  font-size: 1.02rem;
}
.exp-houdknop .vulling {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--exp-geel);
  transition: width 0.1s linear;
}
.exp-houdknop .tekst { position: relative; }

/* Status- en feedbackregels: tekst + vorm, niet alleen kleur. */
.exp-terugkoppeling {
  min-height: 1.6em;
  font-weight: 800;
  margin: 0.7rem 0 0;
}
.exp-terugkoppeling.wacht { color: var(--inkt-zacht); }
.exp-terugkoppeling.goed { color: var(--den); }

.exp-hintblok { margin-top: 0.9rem; }
.exp-hint {
  background: var(--exp-papier);
  border: 2px dashed var(--exp-papier-rand);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  margin-top: 0.5rem;
  font-size: 0.95rem;
}

/* Stempel bij een voltooide missie. */
.exp-stempel {
  display: inline-block;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--exp-rood-diep);
  border: 3px solid var(--exp-rood-diep);
  border-radius: 10px;
  padding: 0.3rem 1rem;
  transform: rotate(-6deg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: exp-stempel-klap 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes exp-stempel-klap {
  0% { transform: rotate(-6deg) scale(2.1); opacity: 0; }
  100% { transform: rotate(-6deg) scale(1); opacity: 1; }
}

.exp-verdieping { margin-top: 1.1rem; }
.exp-verdieping a { display: block; padding: 0.35rem 0; font-weight: 700; }

/* --- Oudermodus ----------------------------------------------------------- */

.exp-ouder-achter {
  position: fixed;
  inset: 0;
  background: rgba(11, 23, 48, 0.65);
  z-index: 120;
}
.exp-ouder {
  position: fixed;
  inset: auto 0 0 0;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--grond);
  border-top: var(--rand);
  border-radius: 22px 22px 0 0;
  padding: 1.2rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom));
  z-index: 121;
}
@media (min-width: 700px) {
  .exp-ouder { inset: 8vh 50% auto auto; transform: translateX(50%); width: min(560px, 92vw); border: var(--rand); border-radius: 22px; }
}
.exp-ouder h2 { font-size: 1.3rem; }
.exp-ouder table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.exp-ouder th, .exp-ouder td { text-align: left; padding: 0.35rem 0.4rem; border-bottom: 1px solid #d5deea; }
.exp-ouder .rij-knoppen { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.7rem 0 1.1rem; }
.exp-ouder .rij-knoppen .exp-knop { font-size: 0.9rem; padding: 0.5rem 1rem; }
.exp-ouder select, .exp-ouder input[type="number"] {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 2px solid var(--nacht);
  border-radius: 10px;
  min-height: 44px;
}

/* --- Certificaat ----------------------------------------------------------- */

.exp-certificaat {
  background: var(--exp-papier);
  border: 3px solid var(--exp-nacht);
  border-radius: 14px;
  padding: 1.6rem 1.4rem;
  text-align: center;
}
.exp-certificaat .rand-binnen {
  border: 2px dashed var(--exp-rood-diep);
  border-radius: 8px;
  padding: 1.4rem 1rem;
}
.exp-certificaat h2 { font-size: 1.6rem; }
.exp-certificaat .naam { font-family: var(--kop); font-size: 2rem; font-weight: 700; color: var(--exp-nacht); margin: 0.4rem 0; }
.exp-certificaat .cijferregel { font-weight: 800; margin: 0.8rem 0; }

@media print {
  body.exp-print > *:not(.exp-printgebied) { display: none !important; }
  body.exp-print { padding: 0; background: #fff; }
  .exp-printgebied { display: block !important; }
  .exp-certificaat { border-radius: 0; }
}
.exp-printgebied { display: none; }
.exp-printgebied.toon { display: block; }

/* --- Toegankelijkheid en beweging ----------------------------------------- */

.exp-alleen-lezen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .exp-stempel { animation: none; }
  .exp-houdknop .vulling { transition: none; }
  .exp-logo.houdt { transform: none; }
}