:root {
  --teal: #00B4C8;
  --teal-light: #4ECDC4;
  --coral: #E8473F;
  --lime: #A8C93A;
  --dark: #2D2D2D;
  --gray: #7A7A7A;
  --bg: #FFFFFF;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--dark);
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 3px solid var(--teal);
  gap: 10px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-block;
}

.brand-name {
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.06em;
  font-size: 18px;
}

/* Dempknop rechts in de balk (aangemaakt vanuit geluid.js). Zit boven de
   gecentreerde brand-sub omdat die pointer-events uit heeft staan. */
.sound-toggle {
  position: relative;
  z-index: 2;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border: 2px solid var(--teal);
  border-radius: 50%;
  background: #fff;
  color: var(--teal);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.sound-toggle:hover { transform: scale(1.08); background: #eefaf9; }
.sound-toggle:active { transform: scale(0.96); }
.sound-toggle:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Staat gecentreerd over de volle breedte van de balk, los van het merk links,
   en in dezelfde stijl als de merknaam UPGRADE ESTATE. */
.brand-sub {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.06em;
  font-size: 18px;
  pointer-events: none;
}

/* Speelveld + levelrail naast elkaar. De rail hoort bewust búiten .stage:
   alle overlays van het spel liggen op .stage en zouden hem anders bedekken. */
.playfield {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
}

.stage {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
  background: #FFFFFF;
}

/* Het speelveld vult de hele stage als één egale rechthoek — geen zwevend
   schermpje met schaduw of lege ruimte er rond, gewoon tegen de levelrail en
   het scoreboard aan. */
#gameCanvas {
  background: #FFFFFF;
  image-rendering: auto;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* ---------- Levelrail links van het speelveld ---------- */
.levelrail {
  flex: none;
  width: 224px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-right: 1px solid #E5E5E5;
  background: #FFFFFF;
  overflow-y: auto;
}

.levelrail-title {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Twee kolommen naast elkaar, zo benut de rail zijn breedte i.p.v. één
   lange sliert vierkantjes. */
.levelrail-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 8px;
  width: 100%;
  justify-items: center;
}

/* Het vierkantje zelf: grijs met een slotje zolang je het level niet hebt
   gehaald, in het lichtgroen met een vinkje zodra het binnen is. */
.level-tile {
  position: relative;
  width: 86px;
  height: 86px;
  flex: none;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 2px solid #DCE3E3;
  border-radius: 12px;
  background: #F5F7F7;
  color: var(--gray);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.level-tile:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.level-tile-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.level-tile-name {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
  /* lange teamnamen mogen afbreken, maar nooit uit het vierkantje lopen */
  max-width: 100%;
  overflow: hidden;
}

.level-tile-state {
  font-size: 12px;
  line-height: 1;
}

.level-tile.is-done {
  border-color: var(--lime);
  background: #F1F8E2;
  color: #4E7315;
}

.level-tile.is-done .level-tile-state { color: #6F8C1E; }

/* Een level dat nog gebouwd moet worden: gedempt en gestreept, geen slotje */
.level-tile.is-placeholder {
  border-style: dashed;
  opacity: 0.55;
}
.level-tile.is-placeholder:hover { transform: none; box-shadow: none; }

/* Het lintje 'UNLOCKED' over de bovenrand van een gehaald level */
.level-tile.is-done::after {
  content: "unlocked";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--lime);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.levelrail-count {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

/* Alles behaald: de teller wordt een klikbare feestknop naar het winscherm. */
.levelrail-count.is-won {
  color: #4E7315;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 12px;
  background: #F1F8E2;
  border: 1px solid #DDEBBB;
}
.levelrail-count.is-won:hover { background: #E7F2CE; }

.levelrail-hint {
  margin: 0;
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
  color: var(--gray);
}

/* ---------- Scoreboard rechts van het speelveld ---------- */
/* Spiegelt de levelrail: zelfde breedte, maar de rand zit aan de linkerkant. */
.scoreboard {
  flex: none;
  width: 224px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-left: 1px solid #E5E5E5;
  background: #FFFFFF;
  overflow-y: auto;
}

.scoreboard-title {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}

.scoreboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Eén band: medaille links, label + balkje + bereik rechts. */
.score-band {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 2px solid #DCE3E3;
  border-radius: 12px;
  background: #F5F7F7;
}

.band-medal {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  background: #ECEFEF;
}

.band-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.band-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2D2D2D;
}

.band-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

.band-bar {
  height: 6px;
  border-radius: 999px;
  background: #E2E7E7;
  overflow: hidden;
}

.band-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--teal);
  transition: width 0.4s ease;
}

.band-range {
  font-size: 9px;
  font-weight: 600;
  color: var(--gray);
}

/* Elk van de drie medailles kleurt zijn eigen medaille en balkje. */
.score-band.is-goud   { border-color: #E7C64B; background: #FBF4D8; }
.score-band.is-goud   .band-medal { background: #F4D35E; }
.score-band.is-goud   .band-fill  { background: #E0B72E; }
.score-band.is-goud   .band-pct   { color: #9A7A15; }
.score-band.is-zilver .band-medal { background: #D6DEE2; }
.score-band.is-zilver .band-fill  { background: #A9B7BE; }
.score-band.is-zilver .band-pct   { color: #5C6A71; }
.score-band.is-brons  .band-medal { background: #E6C6A8; }
.score-band.is-brons  .band-fill  { background: #C08A5A; }
.score-band.is-brons  .band-pct   { color: #8A5E38; }

.scoreboard-empty {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.4;
  text-align: center;
  color: var(--gray);
}

.scoreboard-hint {
  margin: auto 0 0;
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
  color: var(--gray);
}

/* Op een smal of laag scherm mogen de rail én het scoreboard krimpen zodat de plattegrond blijft passen */
@media (max-width: 900px), (max-height: 620px) {
  .levelrail { width: 168px; padding: 8px 10px; gap: 6px; }
  .levelrail-tiles { gap: 8px 6px; }
  .level-tile { width: 66px; height: 66px; border-radius: 10px; }
  .level-tile-num { font-size: 17px; }
  .level-tile-name { display: none; }
  .levelrail-hint { display: none; }

  .scoreboard { width: 168px; padding: 8px 10px; gap: 6px; }
  .scoreboard-hint { display: none; }
}

/* ---------- De samenvatting van één level ---------- */
.level-overlay { z-index: 20; }

.level-card {
  border-top-color: var(--lime);
  max-width: 480px;
}

.level-card.is-locked { border-top-color: #C9D2D2; }

.level-card-eyebrow {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gray);
}

.level-card .talk-name { margin: 2px 0 0; }

.level-card-state {
  margin: 6px 0 12px;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  background: #F1F8E2;
  color: #4E7315;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.level-card.is-locked .level-card-state {
  background: #F0F3F3;
  color: var(--gray);
}

.level-card .talk-tips { margin-bottom: 18px; }
.level-card .talk-tips li::before { background: var(--lime); }

.level-card .talk-ok { background: var(--lime); }
.level-card .talk-ok:hover { background: #96B62F; }

/* ---------- Beginvenster ---------- */
.intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(3px);
  overflow: auto;
}

.intro-overlay.hidden { display: none; }

.intro-card {
  position: relative;
  overflow: hidden;
  max-width: 560px;
  width: 100%;
  background: #fff;
  border-top: 4px solid var(--teal);
  border-radius: 6px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.16);
  padding: 34px 40px 26px;
  text-align: left;
}

.blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.13;
  pointer-events: none;
}

.blob-teal  { width: 190px; height: 190px; background: var(--teal);  top: -70px;    right: -60px; }
.blob-coral { width: 130px; height: 130px; background: var(--coral); bottom: -50px; right: -30px; }
.blob-lime  { width: 150px; height: 150px; background: var(--lime);  bottom: -70px; left: -60px; }

.intro-card > *:not(.blob) { position: relative; z-index: 1; }

.intro-eyebrow {
  margin: 0;
  font-size: 13px;
  color: var(--gray);
  letter-spacing: 0.04em;
}

.intro-title {
  margin: 2px 0 6px;
  font-size: 32px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.07em;
  line-height: 1.1;
}

.intro-sub {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray);
}

.intro-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dark);
}

.intro-keys {
  margin: 18px 0 22px;
  padding: 14px 18px;
  list-style: none;
  border-left: 3px solid var(--lime);
  background: #FAFCFC;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--dark);
}

.key-group {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 5px;
  border: 1px solid #D5DDDD;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  color: var(--dark);
}

.intro-start {
  display: block;
  width: 100%;
  padding: 13px 20px;
  border: 0;
  border-radius: 26px;
  background: var(--teal);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.intro-start:hover { background: #009DAE; transform: translateY(-1px); }
.intro-start:active { transform: translateY(0); }

.intro-hint {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--gray);
}

.intro-returning {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px dashed #D5DDDD;
  border-radius: 12px;
  background: #FAFCFC;
  text-align: center;
}

.intro-returning-text {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dark);
}

.intro-newplayer-yes {
  padding: 7px 14px;
  border: 0;
  border-radius: 18px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  background: var(--coral);
  color: #fff;
}
.intro-newplayer-yes:hover { background: #D63A33; transform: translateY(-1px); }

/* ---------- ISO-registratiescherm (magic link) ---------- */
.reg-gate { z-index: 40; }   /* boven intro, lift en winscherm: blokkeert de start */

.reg-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 6px;
}

.reg-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  text-align: left;
}

.reg-label input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #D5DDDD;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--dark);
}
.reg-label input:focus { outline: none; border-color: var(--teal); }

.reg-form .intro-start { margin-top: 4px; }

.reg-status {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  min-height: 1.2em;
  color: var(--gray);
}
.reg-status.is-ok  { color: #4B7A1E; font-weight: 600; }
.reg-status.is-err { color: var(--coral); font-weight: 600; }

.intro-footer {
  margin: 22px 0 0;
  text-align: right;
  font-size: 9px;
  color: var(--gray);
}

@media (max-width: 520px) {
  .intro-card { padding: 26px 22px 20px; }
  .intro-title { font-size: 25px; }
}

/* Op een laag scherm wordt de kaart eerst structureel compacter — pas als dat
   niet volstaat, zoomt fitOverlayCard() in game.js hem verder uit. */
@media (max-height: 780px) {
  .intro-overlay { padding: 14px; }
  .intro-card { padding: 22px 28px 18px; }
  .intro-title { font-size: 26px; }
  .intro-sub { margin-bottom: 12px; }
  .intro-text { margin-bottom: 8px; line-height: 1.5; }
  .intro-keys { margin: 12px 0 16px; padding: 10px 14px; line-height: 1.7; }
  .intro-start { padding: 11px 18px; }
  .intro-footer { margin-top: 14px; }
  .create-preview { margin-bottom: 12px; }
  #createPreviewCanvas { width: 96px; height: 96px; }
  .create-section { margin-bottom: 11px; }
  .create-name-input { padding: 9px 12px; }
}

/* ---------- Personage maken ---------- */
.create-preview {
  display: flex;
  justify-content: center;
  margin: 2px 0 18px;
}

#createPreviewCanvas {
  width: 120px;
  height: 120px;
}

.create-section { margin: 0 0 16px; }

.create-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
}

.create-name-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #D5DDDD;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--dark);
}

.create-name-input:focus {
  outline: none;
  border-color: var(--teal);
}

/* ---------- De lift (verdieping 0 -> 2) ---------- */
#liftOverlay.intro-overlay { padding: 18px; }

.lift-cab {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Een liftkooi is hoger dan breed: smaller kader, volle hoogte van het
     speelveld. Op 620x620 zag hij bijna vierkant uit. */
  max-width: 520px;
  /* 100% = precies de hoogte van het speelveld binnen de padding van de
     overlay, dus de hele lift (plafond tot vloerstrook) past altijd in beeld
     zonder scrollen. */
  height: min(100%, 800px);
  background: #C6D1D3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}

.lift-ceiling {
  position: relative;
  flex: none;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: linear-gradient(180deg, #EEF3F3 0%, #C6D1D3 100%);
  border-bottom: 2px solid #8A9A9D;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.lift-ceiling-light {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffef2 0%, #ffe9a8 60%, #d8b95a 100%);
  box-shadow: 0 0 10px rgba(255, 233, 168, 0.85);
}

.lift-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 16px;
  border-radius: 16px;
  background: #1C2426;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.3);
}

.lift-indicator-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7FE6C7;
}

.lift-indicator-number {
  font-family: Consolas, "Courier New", monospace;
  font-size: 19px;
  font-weight: 700;
  color: #7FE6C7;
  text-shadow: 0 0 8px rgba(127, 230, 199, 0.6);
}

/* Zolang de deuren dicht zijn, "rijdt" de lift: het display knippert zachtjes. */
.lift-cab.doors-closed .lift-indicator-number {
  animation: lift-indicator-pulse 1.1s ease-in-out infinite;
}

@keyframes lift-indicator-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.lift-room {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

.lift-wall {
  flex: none;
  width: 46px;
  position: relative;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 2px, rgba(0,0,0,0.04) 2px 14px),
    linear-gradient(90deg, #A9B7BA 0%, #C6D1D3 50%, #A9B7BA 100%);
}

.lift-wall-left { box-shadow: inset -10px 0 16px rgba(0,0,0,0.16); }
.lift-wall-right { box-shadow: inset 10px 0 16px rgba(0,0,0,0.16); }

.lift-handrail {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 56%;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, #F3F7F7, #8A9A9D);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.6);
}

.lift-panelboard {
  position: absolute;
  left: 8px;
  top: 16%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 7px 5px;
  border-radius: 8px;
  background: #7D8A8D;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 3px 8px rgba(0,0,0,0.25);
}

.lift-floor-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.3);
  background: #E7EDEE;
  color: #4A5A5D;
  font-size: 10px;
  font-weight: 700;
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.lift-floor-btn.active {
  background: #7FE6C7;
  color: #05372A;
  box-shadow: 0 0 9px rgba(127, 230, 199, 0.85);
}

.lift-card {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  margin: 16px 10px;
  max-width: 560px;
}

.lift-stage { position: relative; }

/* De sierblobjes hangen met negatieve offsets buiten hun hoek. Zonder eigen
   position + clipping rekenen ze mee in de scrollhoogte van de kaart en houd je
   altijd een restje scrollbalk over, ook als de inhoud eigenlijk past. */
.lift-panel {
  position: relative;
  overflow: hidden;
}

.lift-panel.hidden { display: none; }

.lift-transit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  gap: 14px;
}

.lift-transit-text {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gray);
}

/* Aankomstscène: Koenraad staat je op te wachten met een spreekballon. */
.lift-arrival {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 24px 26px;
  gap: 16px;
}

.lift-speech-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.lift-speech-row canvas { flex: none; }

.lift-speech {
  position: relative;
  align-self: stretch;
  background: #fff;
  border: 2px solid var(--line, #E4EDED);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(28,38,42,0.12);
  text-align: left;
}

/* Het pijltje van de ballon wijst omhoog naar Koenraad. */
.lift-speech::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 2px solid var(--line, #E4EDED);
  border-top: 2px solid var(--line, #E4EDED);
  transform: translateX(-50%) rotate(45deg);
}

.lift-speech-name {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--green, #295712);
}

.lift-speech-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--gray, #4A4A4A);
}

.lift-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 5;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 8%),
    linear-gradient(90deg, #94A3A6 0%, #D3DEE0 12%, #B7C4C6 50%, #D3DEE0 88%, #94A3A6 100%);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.25);
  transition: width 0.75s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}

.lift-door::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 46px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: linear-gradient(180deg, #6C7A7D, #4A5A5D);
  box-shadow: inset 0 0 2px rgba(0,0,0,0.4);
}

.lift-door-left { left: 0; box-shadow: inset -4px 0 10px rgba(0,0,0,0.3); }
.lift-door-left::after { right: 14px; }
.lift-door-right { right: 0; box-shadow: inset 4px 0 10px rgba(0,0,0,0.3); }
.lift-door-right::after { left: 14px; }

.lift-cab.doors-closed .lift-door {
  width: 50%;
  transition-duration: 1.3s;
}

.lift-floor-strip {
  flex: none;
  height: 12px;
  background: linear-gradient(180deg, #A9B7BA, #6C7A7D);
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.25);
}

@media (max-width: 560px) {
  .lift-wall { width: 30px; }
  .lift-panelboard { display: none; }
  .lift-card { margin: 12px 6px; }
}

/* ---------- Praatknop bij een infoblobje ---------- */
.talk-prompt {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 14px;
  border: 0;
  border-radius: 24px;
  background: var(--coral);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(232, 71, 63, 0.38);
  animation: talk-pop 0.22s ease-out, talk-float 2.4s ease-in-out 0.22s infinite;
}

.talk-prompt[hidden] { display: none; }
.talk-prompt:hover { background: #D63A32; }

.door-prompt { background: #6C7A7D; box-shadow: 0 6px 20px rgba(60,70,72,0.4); }
.door-prompt:hover { background: #57696C; }
.door-prompt .talk-prompt-dot { background: #E8473F; box-shadow: 0 0 0 4px rgba(232,71,63,0.28); }

.talk-prompt kbd {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.18);
  color: #fff;
}

.talk-prompt-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.28);
}

@keyframes talk-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes talk-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

/* ---------- Praatvenster ---------- */
/* align-items:center zou de kaart mooi midden zetten, maar bij een kaart die
   hoger is dan het venster schuift zo'n gecentreerde flexbox de bovenkant
   búiten het scrollbare gebied: je kan er dan niet meer bij. Daarom
   flex-start plus margin:auto op de kaart — dat centreert net hetzelfde
   zolang er plaats is, en klapt netjes naar boven zodra er te weinig is. */
.talk-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  background: rgba(45, 45, 45, 0.34);
  backdrop-filter: blur(2px);
  overflow: auto;
}

.talk-overlay.hidden { display: none; }

.talk-card {
  position: relative;
  overflow: hidden;
  margin: auto;   /* zie de opmerking bij .talk-overlay */
  width: 100%;
  max-width: 430px;
  padding: 26px 30px 22px;
  border-radius: 22px;
  background: #fff;
  border-top: 5px solid var(--coral);
  box-shadow: 0 16px 50px rgba(0,0,0,0.22);
  animation: talk-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes talk-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.blob-coral-lg { width: 170px; height: 170px; background: var(--coral); top: -75px; right: -55px; }
.blob-lime-sm  { width: 120px; height: 120px; background: var(--lime);  bottom: -55px; left: -45px; }

.talk-card > *:not(.blob) { position: relative; z-index: 1; }

.talk-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--gray);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}

/* Bewust geen achtergrond, cirkel of kader: gewoon een dun kruisje. Bij hover of
   focus wordt het enkel een tikje donkerder grijs — niet zwart en niet groter.
   De standaard focus-rand van de browser (een vierkant kadertje na het klikken)
   zetten we uit. */
.talk-close:hover,
.talk-close:focus-visible { background: transparent; color: #4A4A4A; }
.talk-close:focus { outline: none; }

.talk-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

/* Glanzende 3D-bol, dezelfde look als de blobjes op de plattegrond */
.talk-avatar {
  position: relative;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 88%, rgba(255,190,170,0.55) 0%, rgba(255,190,170,0) 42%),
    radial-gradient(circle at 32% 28%, #FFB3A4 0%, #E8473F 42%, #7E1A16 100%);
  box-shadow: 0 6px 14px rgba(126, 26, 22, 0.34);
  animation: talk-bob 2.6s ease-in-out infinite;
}

@keyframes talk-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.talk-shine {
  position: absolute;
  left: 11px;
  top: 10px;
  width: 20px;
  height: 12px;
  border-radius: 50%;
  transform: rotate(-32deg);
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.3) 58%, rgba(255,255,255,0) 100%);
}

.talk-sparkle {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.75);
}

.talk-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--dark);
}

.talk-role {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--coral);
}

.talk-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dark);
}

.talk-tips {
  margin: 0 0 20px;
  padding: 12px 16px 12px 30px;
  list-style: none;
  border-left: 3px solid var(--lime);
  background: #FAFCFC;
  border-radius: 0 10px 10px 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--dark);
}

.talk-tips li { position: relative; }

.talk-tips li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.talk-tips:empty { display: none; }

.talk-ok {
  display: block;
  width: 100%;
  padding: 11px 20px;
  border: 0;
  border-radius: 24px;
  background: var(--teal);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.talk-ok:hover { background: #009DAE; transform: translateY(-1px); }
.talk-ok[hidden] { display: none; }
.talk-ok:disabled {
  background: #C9D2D2;
  color: #F3F6F6;
  cursor: not-allowed;
}
.talk-ok:disabled:hover { background: #C9D2D2; transform: none; }

.talk-hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--gray);
}

/* ---------- Deurvenster met de UpKot-kip ---------- */
/* De kip hangt half buiten de kaart in de linkeronderhoek: dat geeft hem meer
   nadruk en houdt de kaart zelf vrij voor de uitleg en straks de challenge.
   Daarom mag deze kaart niet clippen (de talk-card doet dat wél). */
.door-card {
  overflow: visible;
  padding-bottom: 26px;
  /* zodat de kip er ook bij weinig tekst niet bovenuit steekt */
  min-height: 258px;
}

/* let op de selector: .talk-card > *:not(.blob) hierboven zet alles binnen de
   kaart op position:relative, dus dit moet even specifiek én later staan.
   De tekening is breder dan hoog (800x568) en heeft links en rechts wat lege
   ruimte, dus het kader mag ruimer zijn dan de kip zelf oogt.
   De linkerverschuiving is niet vrij te kiezen: net onder de hoed wijkt de
   kip terug tot 31% van de tekening, en zit de kaartrand daar rechts van, dan
   schijnt er een streepje kaart door tussen de hoed en de kip. Bij -90px valt
   ook dat smalste punt nog een tiental pixels buiten de kaart. */
.door-card > .door-mascot {
  position: absolute;
  left: -90px;
  bottom: -30px;
  z-index: 2;
  width: 244px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.22));
}

/* de tekst schuift naar rechts op, zodat de kip niets overlapt */
.door-body { margin-left: 112px; }

.door-card .talk-name { margin-bottom: 6px; }
.door-card .talk-text { margin-bottom: 16px; }

.door-challenge {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--lime);
  border-radius: 0 10px 10px 0;
  background: #FAFCFC;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--dark);
}

.door-challenge[hidden] { display: none; }

/* Een challenge heeft meer te vertellen dan een gewoon deurtje, dus die kaart
   krijgt wat meer ademruimte — de kip blijft gewoon staan. */
.door-card.has-challenge { max-width: 600px; }
.door-card.has-challenge.has-mail { max-width: 740px; }

/* ---------- Level 7: dezelfde kaart, maar in alarmstand ---------- */
/* De ring zit op een ::after en niet op de kaart zelf: .talk-card gebruikt zijn
   animation-eigenschap al voor het inklappen, en die willen we niet overschrijven. */
.door-card.is-alarm { border-top-color: #C6362D; }
.door-card.is-alarm .talk-name { color: #C6362D; }
.door-card.is-alarm .blob-coral-lg { background: #C6362D; }
.door-card.is-alarm .door-challenge {
  border-left-color: #C6362D;
  background: #FDF5F4;
}
.door-card.is-alarm .challenge-progress { color: #B4433C; }

.door-card.is-alarm::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid #C6362D;
  border-radius: 27px;
  pointer-events: none;
  animation: alarm-ring 1.5s ease-in-out infinite;
}

@keyframes alarm-ring {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .door-card.is-alarm::after { animation: none; opacity: 0.6; }
}

/* ---------- Level 10: het nagemaakte ransomware-scherm ---------- */
.ransom-screen {
  margin: 12px 0;
  padding: 22px 18px;
  border-radius: 10px;
  border: 1px solid #3A0B08;
  background: radial-gradient(120% 120% at 50% 0%, #3A0F0B 0%, #1A0605 100%);
  color: #F6E9E8;
  text-align: center;
  font-family: "Consolas", "Courier New", monospace;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
}

.ransom-lock {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 8px;
  animation: ransom-lock-pulse 1.6s ease-in-out infinite;
}

@keyframes ransom-lock-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.12); opacity: 1; }
}

.ransom-title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FF6B60;
  text-shadow: 0 0 12px rgba(232,71,63,0.55);
}

.ransom-sub {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D79A95;
}

.ransom-text {
  margin: 0 auto 14px;
  max-width: 380px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #EAD3D1;
}

.ransom-timer {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 14px;
  border: 1px solid #E8473F;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FFC7C2;
  background: rgba(232,71,63,0.12);
}

.ransom-pay {
  margin: 0 auto 12px;
  padding: 8px 12px;
  max-width: 320px;
  border-radius: 6px;
  background: rgba(0,0,0,0.35);
  font-size: 12.5px;
  color: #F4B942;
  word-break: break-all;
}

.ransom-files {
  margin: 0;
  font-size: 11px;
  color: #B98B87;
}

.ransom-caption { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .ransom-lock { animation: none; }
}

.challenge-progress {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
}

.challenge-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
}

.challenge-text { margin: 0; line-height: 1.6; }

.challenge-list {
  margin: 10px 0 0;
  padding: 12px 16px 12px 30px;
  list-style: none;
  border-left: 3px solid var(--lime);
  background: #FAFCFC;
  border-radius: 0 10px 10px 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--dark);
}

.challenge-list li { position: relative; }

.challenge-list li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.challenge-steps {
  counter-reset: challenge-step;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.challenge-steps li {
  position: relative;
  padding: 12px 12px 12px 40px;
  background: #FAFCFC;
  border: 1px solid #E4EEEE;
  border-radius: 10px;
}

.challenge-steps li::before {
  counter-increment: challenge-step;
  content: counter(challenge-step);
  position: absolute;
  left: 12px;
  top: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lime);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.challenge-steps h4 {
  margin: 0 0 3px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dark);
}

.challenge-steps p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--dark);
}

@media (max-width: 560px) {
  .challenge-steps { grid-template-columns: 1fr; }
}

.challenge-question {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dark);
}

.challenge-hint {
  margin: 0 0 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--gray);
}

.challenge-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 0;
}

.challenge-option {
  text-align: left;
  padding: 9px 14px;
  border: 1.5px solid #E0E4E4;
  border-radius: 10px;
  background: #fff;
  color: var(--dark);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.challenge-option:hover { border-color: var(--teal); }

/* Bij een vraag met meerdere juiste antwoorden zie je eerst alleen wát je
   aangevinkt hebt — pas na 'Controleer' welke goed en fout zijn. Anders verklapt
   de eerste klik meteen de rest van de antwoorden. */
.challenge-option.is-picked {
  border-color: var(--teal);
  background: #E9F8FA;
  font-weight: 700;
}

.challenge-option.is-picked::before {
  content: "✓ ";
  color: var(--teal);
}

/* na 'Controleer' staat het antwoord vast: geen klik en geen hover meer */
.challenge-option.is-locked { cursor: default; pointer-events: none; }

.challenge-option.is-correct {
  border-color: var(--lime);
  background: #F1F8E2;
  font-weight: 700;
}

.challenge-option.is-wrong {
  border-color: var(--coral);
  background: #FCEEED;
}

.challenge-option.is-missed {
  border-color: var(--lime);
  border-style: dashed;
}

.challenge-feedback {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
}

.challenge-feedback.is-correct { color: #5C8A1E; }
.challenge-feedback.is-wrong { color: var(--coral); }

/* Een uitleg per antwoord is een paar regels lang; vetgedrukt leest dat als
   geschreeuw, dus die variant wordt wat rustiger. */
.challenge-feedback.is-why {
  font-weight: 500;
  line-height: 1.6;
}

/* ---------- Level 6: de nagemaakte phishingmail ---------- */
/* Het lint bovenaan Outlook. Bewust breekbaar (flex-wrap): op een smal scherm
   vallen de knoppen onder elkaar in plaats van weg te schuiven. */
.mail-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 7px 8px;
  border: 1px solid #E4EEEE;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(#FBFDFD, #F2F7F7);
}

.ribbon-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1.5px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--dark);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ribbon-btn:hover { background: #E6F5F7; border-color: #CDE7EA; }

/* de OutKept-knop staat in het echte lint ook een eind van de rest af */
.ribbon-btn.is-outkept { margin-left: auto; font-weight: 700; }

.ribbon-btn.is-correct {
  border-color: var(--lime);
  background: #F1F8E2;
  font-weight: 700;
}

.ribbon-btn.is-wrong {
  border-color: var(--coral);
  background: #FCEEED;
}

.ribbon-btn.is-missed {
  border-color: var(--lime);
  border-style: dashed;
}

.ribbon-icon {
  flex: none;
  width: 17px;
  height: 17px;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
}

/* De OutKept-knop uit Outlook nagetekend: een blokletter-C in het zwart met
   een koraalrood blokje ernaast. Als data-URI zodat er geen extra bestand
   bij hoeft en het spel ook los van een server blijft werken. */
.ribbon-icon.is-outkept-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M17 4H3v16h14v-4H7.6V8H17z' fill='%231D1D1B'/%3E%3Crect x='18.6' y='9.6' width='5.4' height='4.8' fill='%23E8473F'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (max-width: 560px) {
  .ribbon-btn.is-outkept { margin-left: 0; }
}

/* De mail zelf. Staat er een lint boven, dan sluiten ze op elkaar aan. */
.mail-mock {
  margin: 0;
  border: 1px solid #E4EEEE;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.mail-ribbon + .mail-mock { border-top: 0; border-radius: 0 0 10px 10px; }
.challenge-question + .mail-mock,
.challenge-hint + .mail-mock { margin-top: 10px; }

.mail-extern {
  margin: 0;
  padding: 6px 12px;
  background: #FFF6DA;
  border-bottom: 1px solid #EFE2B4;
  font-size: 11.5px;
  font-weight: 700;
  color: #8A6A00;
}

.mail-head {
  padding: 11px 12px 10px;
  border-bottom: 1px solid #EDF3F3;
}

.mail-from-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.mail-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
}

/* Elk stuk van de mail. In de zoek-de-vlaggen-dia is dit een knop, en dan
   moeten de knop-standaardwaarden (font, rand, midden uitlijnen) weg. */
.mail-part {
  margin: 0;
  padding: 3px 6px;
  border: 1.5px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  text-align: left;
  color: var(--dark);
}

.mail-part.is-pickable { cursor: pointer; }
.mail-part.is-pickable:hover { border-color: #CDE7EA; background: #F4FBFC; }

.mail-part.is-picked {
  border-color: var(--teal);
  background: #E9F8FA;
}

.mail-part.is-correct {
  border-color: var(--lime);
  background: #F1F8E2;
}

.mail-part.is-wrong {
  border-color: var(--coral);
  background: #FCEEED;
}

/* niet aangeklikt, maar het was wél een vlag */
.mail-part.is-missed {
  border-color: var(--lime);
  border-style: dashed;
}

.mail-line { margin: 0; font-size: 13px; line-height: 1.5; }
.mail-line.mail-strong { font-weight: 700; }
.mail-line.mail-dim { color: var(--gray); font-size: 12px; }

.mail-subject .mail-line {
  font-size: 15px;
  font-weight: 700;
}

.mail-from { flex: 1 1 auto; min-width: 0; }
.mail-from .mail-line { word-break: break-word; }
.mail-date { flex: none; }

.mail-text .mail-line { line-height: 1.6; }

.mail-link .mail-line {
  color: #1155CC;
  text-decoration: underline;
  word-break: break-all;
  font-size: 12.5px;
}

/* de bijlage krijgt een paperclip mee, net als in Outlook */
.mail-attach {
  display: flex;
  align-items: center;
  gap: 6px;
  border-color: #E4EEEE;
  background: #F7FAFA;
}

.mail-attach::before {
  content: "📎";
  flex: none;
  font-size: 13px;
}

.mail-attach .mail-line { font-size: 12.5px; font-weight: 700; }

/* Dia 2 van level 8 (zoek-de-vlaggen): daar staat de mail centraal, dus die
   krijgt grotere letters om goed leesbaar te zijn. De mail zelf scrollt niet
   apart — de hele popup scrollt als geheel (zie .door-card.is-scrollcard). */
.mail-mock.mail-zoom .mail-part { padding: 5px 8px; }
.mail-mock.mail-zoom .mail-line { font-size: 15px; line-height: 1.55; }
.mail-mock.mail-zoom .mail-line.mail-dim { font-size: 13.5px; }
.mail-mock.mail-zoom .mail-subject .mail-line { font-size: 17px; }
.mail-mock.mail-zoom .mail-text .mail-line { line-height: 1.65; }
.mail-mock.mail-zoom .mail-link .mail-line { font-size: 14px; }
.mail-mock.mail-zoom .mail-attach .mail-line { font-size: 14px; }
.mail-mock.mail-zoom .mail-extern { font-size: 13px; }

.spot-tally {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gray);
}

.challenge-check {
  margin: 8px 0 0;
  padding: 9px 18px;
  border: 1.5px solid var(--teal);
  border-radius: 24px;
  background: #fff;
  color: var(--teal);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.challenge-check:hover { background: #E9F8FA; }

.challenge-check:disabled {
  border-color: #DCE3E3;
  color: var(--gray);
  cursor: default;
  background: #fff;
}

.spot-reveal {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.spot-reveal li {
  padding: 9px 12px;
  border-left: 3px solid var(--lime);
  border-radius: 0 8px 8px 0;
  background: #FAFCFC;
  font-size: 12.5px;
  line-height: 1.6;
}

/* de twee dingen die níets bewijzen: apart gemarkeerd, want dat is juist het
   punt van die dia */
.spot-reveal li.is-decoy {
  border-left-color: var(--gray);
  background: #F6F7F7;
  color: #5A5A5A;
}

.spot-reveal strong { color: var(--dark); }

.challenge-nav {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.challenge-nav .challenge-next { flex: 1; margin: 0; }

.challenge-back {
  flex: none;
  padding: 11px 16px;
  border: 1.5px solid #E0E4E4;
  border-radius: 24px;
  background: #fff;
  color: var(--dark);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.challenge-back:hover { border-color: var(--teal); }

/* Op een smal scherm past de kip er niet half naast: hij komt dan gewoon
   binnen de kaart te staan en de tekst loopt over de volle breedte. */
@media (max-width: 560px) {
  /* zelfde verhouding als hierboven: de kaartrand blijft achter de kip */
  .door-card > .door-mascot { left: -70px; bottom: -24px; width: 190px; }
  .door-body { margin-left: 86px; }
}

@media (max-width: 520px) {
  .talk-card { padding: 22px 20px 18px; }
}

.legend {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  border-top: 1px solid #E5E5E5;
  font-size: 12.5px;
  color: var(--dark);
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.15);
}

.swatch.utility-green { background: #295712; border-color: #1D3F0D; }
.swatch.utility-blue { background: #033761; border-color: #022848; }
.swatch.visited { background: #A8C93A; border-color: #8AA72E; }
.swatch.npc {
  border-radius: 50%;
  border-color: rgba(126,26,22,0.5);
  background: radial-gradient(circle at 32% 28%, #FFB3A4 0%, #E8473F 45%, #7E1A16 100%);
}
.swatch.door { background: var(--teal); border-color: var(--teal); }

/* ---------- Winscherm ---------- */
/* Dezelfde kaart-taal als het praatvenster, maar feestelijk: de kip staat er
   trots naast, met wat confetti erachter. Ligt bovenop alle andere overlays. */
.win-overlay { z-index: 30; }

.win-card {
  overflow: visible;          /* de kip mag half buiten de kaart hangen */
  max-width: 560px;
  text-align: center;
  border-top: 4px solid var(--lime);
  padding-bottom: 30px;
}

/* Het kruisje linksboven i.p.v. rechtsboven — daar hangt op deze kaart de kip.
   position:absolute moet hier expliciet: anders wint .talk-card > *:not(.blob)
   (zelfde specificiteit) en blijft het kruisje in de flow bovenaan het midden staan. */
.win-card > .talk-close {
  position: absolute;
  left: 12px;
  right: auto;
  top: 10px;
}

.win-card > .win-mascot {
  position: absolute;
  right: -78px;
  bottom: -26px;
  z-index: 2;
  width: 220px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.22));
  animation: win-mascot-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes win-mascot-pop {
  0%   { transform: translateY(30px) scale(0.6) rotate(-8deg); opacity: 0; }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}

.win-eyebrow {
  margin: 0 0 2px;
  font-size: 13px;
  color: #6F8C1E;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.win-title {
  margin: 2px 0 8px;
  font-size: 30px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.win-sub {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--dark);
  font-weight: 600;
}

.win-stats {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}

.win-stat {
  flex: 1 1 0;
  min-width: 96px;
  padding: 12px 8px;
  border-radius: 12px;
  background: #F1F8E2;
  border: 1px solid #DDEBBB;
}

.win-stat-num {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #4E7315;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.win-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 0.02em;
}

.win-text {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--dark);
  text-align: center;
}

/* Auto-breed en gecentreerd (de kaart is text-align:center), zodat de knop niet
   over de volle breedte loopt en netjes vrij blijft van de kip rechtsonder. */
.win-ok {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  background: var(--lime);
}
.win-ok:hover { background: #96B62F; }

/* De confetti: een handvol gekleurde snippers die naar beneden dwarrelen. De
   losse .win-piece-elementen worden in JS bijgezet met eigen kleur/positie. */
.win-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.win-piece {
  position: absolute;
  top: -24px;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: win-fall linear forwards;
}

@keyframes win-fall {
  0%   { transform: translateY(-10vh) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .win-card > .win-mascot { animation: none; }
  .win-piece { display: none; }
}

/* Smal scherm: de kip wat kleiner, de titel wat compacter. */
@media (max-width: 560px) {
  .win-card > .win-mascot { right: -56px; bottom: -20px; width: 168px; }
  .win-title { font-size: 26px; }
}