/* ============================================================
   Vibes — spelerapp: neon
   ------------------------------------------------------------
   Laag bovenop style.css, alleen geladen door index.html (de spelerapp).
   Nachtpaarse achtergrond met neon-accenten, één dilemma tegelijk op een
   kaart die door een golf in "dit" en "dat" gesplitst wordt, en een solide
   onderlade. Merkpaars blijft de basis. Knoppen: precies één accent —
   roze→oranje voor DE hoofdactie van een scherm (en voortgang) — en schoon
   wit voor al het andere, net als het witte logo. Violet zit alleen in de
   dilemma-kaart zelf (de "dit"-kant).
   Regel: beweging alleen als ANTWOORD op iets wat de speler doet (tikken,
   kiezen, verder/terug, een scan) — niets beweegt uit zichzelf.
   host.html blijft bewust ongemoeid zolang de app-versie de oude stijl heeft.
   ============================================================ */

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  /* Gedeelde tokens (--achtergrond, --nacht-glas, --lip-*, --veer, ...)
     staan in site.css; neon-kleuren in style.css. */
}

@keyframes rijs-op {
  from { opacity: 0; transform: translateY(12px); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(.6); }
}

@keyframes ontgrendel {
  0%   { transform: scale(.94); }
  45%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ── Nachtthema ───────────────────────────────────────────── */
/* Zelfde aanpak als body.host-scherm in style.css: een paar gedeelde tokens
   omzetten, zodat de meeste componenten vanzelf meekleuren. --blauw blijft
   bewust merkpaars (veel knoppen/badges lezen 'm als vulkleur). */
body {
  background: var(--achtergrond);
  background-image:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(166, 77, 255, .28) 0%, transparent 70%),
    radial-gradient(ellipse 70% 45% at 95% 100%, rgba(255, 62, 165, .18) 0%, transparent 70%);
  background-attachment: fixed;
  color: #fff;
  --inkt: #ffffff;
  --inkt-zacht: #cdb9ee;
  --kaart: var(--nacht-glas);
  --blauw-licht: rgba(255, 255, 255, .12);
}

/* Het welkomstscherm deelt dezelfde nacht i.p.v. de oude paarse gradient
   (style.css zet die op html/body en inline op de sectie zelf). */
html:has(#scherm-welkom:not(.verborgen)),
body:has(#scherm-welkom:not(.verborgen)) {
  background: var(--achtergrond);
}

#scherm-welkom {
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(166, 77, 255, .4) 0%, transparent 70%),
    radial-gradient(ellipse 80% 45% at 50% 100%, rgba(255, 62, 165, .25) 0%, transparent 70%),
    var(--achtergrond) !important;
}

/* ── Schermovergangen ─────────────────────────────────────── */
/* Navigeren naar een ander scherm (.verborgen eraf → animatie start
   vanzelf): de inhoud komt kort omhoog. `backwards` i.p.v. `both`, zodat
   daarna weer gewoon de eigen CSS geldt. De bodembalk doet niet mee. */
.wrap > section:not(.verborgen):not(#scherm-welkom) > :not(.knop-onderaan):not(#vragen-lijst) {
  animation: rijs-op .4s var(--uit) backwards;
}

.wrap > section:not(.verborgen) > :nth-child(2) { animation-delay: .04s; }
.wrap > section:not(.verborgen) > :nth-child(3) { animation-delay: .08s; }
.wrap > section:not(.verborgen) > :nth-child(4) { animation-delay: .12s; }

/* ── Typografie & panelen ─────────────────────────────────── */
.wrap h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 8px;
}

.wrap h2 svg.lucide {
  color: #fff;
}

.wrap .stil {
  font-size: .95rem;
}

.wrap .paneel {
  border-radius: 28px;
  padding: 24px 20px;
  background: var(--nacht-glas);
  border: 1.5px solid var(--nacht-rand);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .8);
}

/* ── Felle knoppen met dikte ──────────────────────────────── */
/* Hoofdacties: roze→oranje neon. De harde onderrand (box-shadow zonder
   blur) maakt van een knop een fysiek blokje dat bij indrukken precies die
   dikte omlaag zakt. Losse selectorlijst i.p.v. :is(), zodat elke selector
   z'n eigen specificiteit houdt. */
#btn-claim,
#btn-vragen-klaar,
#btn-scan,
#btn-custom-vragen-verstuur,
#host-mini-actie,
.confirm-knoppen button:not(.confirm-annuleer) {
  position: relative;
  border-radius: var(--knop-radius);
  padding: 16px 22px;
  background: var(--grad-neon);
  color: #fff;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 5px 0 var(--lip-neon), 0 14px 30px -10px rgba(255, 62, 165, .65);
  transition: transform .35s var(--veer), box-shadow .35s var(--veer), opacity .2s, filter .2s;
}

/* Al het andere (terug, spelcode scannen): schoon wit met merkpaarse tekst. */
.vraag-terug,
.spelcode-scan-knop {
  background: #fff;
  color: #43115B;
  box-shadow: 0 5px 0 var(--lip-licht), 0 14px 30px -14px rgba(0, 0, 0, .6);
  transition: transform .35s var(--veer), box-shadow .35s var(--veer), opacity .2s, filter .2s;
}

/* Rustige knoppen (aanpassen, printen, terug in de scanner): glas. */
.wrap button.rustig {
  border-radius: var(--knop-radius);
  padding: 15px 22px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  box-shadow: 0 4px 0 var(--lip-nacht);
  transition: transform .35s var(--veer), box-shadow .35s var(--veer), background-color .2s;
}

@media (hover: hover) {
  #btn-claim:hover:not(:disabled),
  #btn-vragen-klaar:hover:not(:disabled),
  #btn-scan:hover:not(:disabled),
  #btn-custom-vragen-verstuur:hover:not(:disabled),
  #host-mini-actie:hover:not(:disabled),
  .confirm-knoppen button:not(.confirm-annuleer):hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 7px 0 var(--lip-neon), 0 18px 34px -10px rgba(255, 62, 165, .7);
  }

  .vraag-terug:hover:not(:disabled),
  .spelcode-scan-knop:hover:not(:disabled) {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 7px 0 var(--lip-licht), 0 18px 34px -14px rgba(0, 0, 0, .6);
  }

  .wrap button.rustig:hover:not(:disabled) {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 6px 0 var(--lip-nacht);
  }
}

#btn-claim:active:not(:disabled),
#btn-vragen-klaar:active:not(:disabled),
#btn-scan:active:not(:disabled),
#btn-custom-vragen-verstuur:active:not(:disabled),
#host-mini-actie:active:not(:disabled),
.confirm-knoppen button:not(.confirm-annuleer):active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--lip-neon), 0 6px 14px -8px rgba(255, 62, 165, .6);
  transition-duration: .06s;
}

.vraag-terug:active:not(:disabled),
.spelcode-scan-knop:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--lip-licht), 0 6px 14px -8px rgba(0, 0, 0, .5);
  transition-duration: .06s;
}

.wrap button.rustig:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--lip-nacht);
  transition-duration: .06s;
}

/* Uitgeschakeld = duidelijk "nog niet", maar de knop houdt z'n eigen kleur
   (gedimd, zonder gloed) — zo blijft de balk fel en zie je al wélke knop
   straks verder gaat. */
#btn-claim:disabled,
#btn-scan:disabled,
#btn-custom-vragen-verstuur:disabled,
.vraag-terug:disabled,
#btn-vragen-klaar:disabled {
  opacity: .38;
  transform: none;
  filter: saturate(.8);
  cursor: default;
}

#btn-claim:disabled,
#btn-scan:disabled,
#btn-custom-vragen-verstuur:disabled,
#btn-vragen-klaar:disabled {
  box-shadow: 0 5px 0 var(--lip-neon);
}

.vraag-terug:disabled {
  box-shadow: 0 5px 0 var(--lip-licht);
}

/* Springt even op op het moment dat 'ie bruikbaar wordt — de animatie start
   precies wanneer de selector gaat matchen (disabled → actief). */
#btn-claim:not(:disabled),
#btn-vragen-klaar[data-stand="klaar"] {
  animation: ontgrendel .6s var(--veer);
}

/* ── Onderste lade ────────────────────────────────────────── */
/* De spelnavigatie zit in een dichte lade die aan de onderrand vastzit:
   volle breedte, afgeronde bovenhoeken, een handgreepje — geen glas, niets
   dat erdoorheen schemert. Zelfde lade als op host.html (style.css). Bij een
   open toetsenbord laat style.css 'm meeschuiven als gewoon blok; daar
   blijven we af. */
body:not(.keyboard-actief) .knop-onderaan {
  max-width: none;
  padding: 22px max(16px, calc((100% - 448px) / 2)) max(16px, var(--safe-bottom));
  background: var(--balk);
  border-top: 1.5px solid rgba(255, 255, 255, .14);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .45);
}

body:not(.keyboard-actief) .knop-onderaan::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .25);
}

.vragen-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vragen-nav button {
  height: 60px;
  margin: 0;
}

.vragen-nav button svg.lucide {
  width: 26px;
  height: 26px;
  margin: 0;
  stroke-width: 2.75;
}

.vraag-terug {
  flex: none;
  width: 60px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--knop-radius);
}

.vraag-teller {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  transition: flex-grow .45s var(--veer-zacht), opacity .2s;
}

#btn-vragen-klaar {
  flex: 0 0 60px;
  min-width: 60px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
  transition: flex-grow .45s var(--veer-zacht), transform .35s var(--veer), box-shadow .35s var(--veer), background-color .2s;
}

/* Overzicht bereikt: de teller wijkt en de verder-knop schuift open tot
   de brede "Klaar!" — dezelfde knop, op dezelfde plek onder je duim. */
.vragen-nav[data-stand="klaar"] .vraag-teller {
  flex-grow: 0;
  opacity: 0;
}

#btn-vragen-klaar[data-stand="klaar"] {
  flex-grow: 1;
  padding: 0 22px;
}

/* ── Dit of dat: één dilemma tegelijk ─────────────────────── */
.vragen-kop {
  padding: 0 4px 16px;
}

.vragen-kop h2 {
  font-size: 1.6rem;
  margin-bottom: 4px;
}

.vragen-kop .stil {
  margin: 0;
}

/* Op het overzicht heeft dat z'n eigen kop en uitleg. */
#scherm-vragen:has(.overzicht) .vragen-kop .stil {
  display: none;
}

/* Eén streepje per dilemma: neon = gekozen, hoger = waar je nu bent. */
.vragen-voortgang {
  display: flex;
  gap: 5px;
  margin-top: 16px;
}

.vragen-voortgang i {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .14);
  transition: background-color .3s, box-shadow .3s, transform .4s var(--veer);
}

.vragen-voortgang i.vol {
  background: var(--grad-neon);
  box-shadow: 0 0 10px rgba(255, 62, 165, .55);
}

.vragen-voortgang i.nu {
  transform: scaleY(1.7);
  background: rgba(255, 255, 255, .45);
}

.vragen-voortgang i.vol.nu {
  background: var(--grad-neon);
}

/* Het duel: één hoge kaart, door een golf gesplitst in een violette
   "dit"-helft en een roze "dat"-helft. Kiezen = jouw helft licht op in neon
   en groeit (de golf schuift dus naar de andere kant), de andere helft
   dooft; daarna schuift het volgende paar binnen. */
.duel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(340px, calc(100svh - 285px - var(--safe-top) - var(--safe-bottom)), 600px);
  border-radius: 32px;
  box-shadow:
    0 8px 0 #0a0119,
    0 0 0 1.5px rgba(255, 255, 255, .1),
    0 30px 60px -24px rgba(166, 77, 255, .55);
  --a1: #34146b;
  --a2: #4f1c97;
  --b1: #6e1766;
  --b2: #3a0b3d;
  transition: --a1 .35s, --a2 .35s, --b1 .35s, --b2 .35s;
}

.duel.koos-a {
  --a1: #7a2bff;
  --a2: #c04bff;
  --b1: #2a0c33;
  --b2: #1b0824;
}

.duel.koos-b {
  --a1: #1d0a38;
  --a2: #2a0d4a;
  --b1: #ff3ea5;
  --b2: #ff8a3d;
}

/* Ruimte boven de kaart voor het label, zodat het niet tegen de voortgang plakt. */
.duel:has(.duel-tag) {
  margin-top: 8px;
}

.duel-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #43115B;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .5);
}

.duel-tag svg.lucide {
  width: 13px;
  height: 13px;
}

.duel-optie {
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  padding: 24px 24px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 32px 32px 0 0;
  background: linear-gradient(to bottom, var(--a1), var(--a2));
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
  box-shadow: none;
  transition: flex-grow .45s var(--veer-zacht), filter .2s;
}

.duel-optie[data-c="b"] {
  border-radius: 0 0 32px 32px;
  background: linear-gradient(to bottom, var(--b1), var(--b2));
}

.duel-optie span {
  display: block;
  transition: transform .35s var(--veer), opacity .3s, text-shadow .3s;
}

@media (hover: hover) {
  .duel-optie:hover {
    filter: brightness(1.12);
    transform: none;
    box-shadow: none;
  }
}

.duel-optie:active {
  filter: brightness(1.2);
  transform: none;
  box-shadow: none;
}

.duel-optie:active span {
  transform: scale(.93);
  transition-duration: .08s;
}

.duel-optie.gekozen {
  flex-grow: 1.55;
}

.duel-optie.gekozen span {
  transform: scale(1.08);
  text-shadow: 0 0 22px rgba(255, 255, 255, .55);
}

.duel.beantwoord .duel-optie:not(.gekozen) span {
  opacity: .45;
}

/* De naad: een golf tussen de helften (hoogte 0 in de flow, de SVG
   overlapt beide kanten een stukje) met een gloeiende neonlijn en de
   of-munt op het middelpunt. Vullingen volgen de helften via --a2/--b1,
   zodat de golf naadloos in beide kleurvlakken overloopt. */
.duel-naad {
  position: relative;
  z-index: 2;
  height: 0;
  pointer-events: none;
}

.duel-naad svg {
  position: absolute;
  left: 0;
  top: -20px;
  width: 100%;
  height: 40px;
  overflow: visible;
}

.naad-onder {
  fill: var(--b1);
}

.naad-boven {
  fill: var(--a2);
}

.naad-lijn {
  fill: none;
  stroke: #ffd6f0;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(255, 62, 165, .9)) drop-shadow(0 0 10px rgba(166, 77, 255, .7));
}

.duel-naad::after {
  content: "of";
  position: absolute;
  left: 50%;
  top: 0;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--achtergrond);
  color: #fff;
  font-family: var(--display);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 0 0 3px #ffd6f0, 0 0 18px rgba(255, 62, 165, .8);
  transition: background .3s, transform .4s var(--veer);
}

html[lang="en"] .duel-naad::after {
  content: "or";
}

.duel.koos-a .duel-naad::after {
  background: var(--grad-violet);
  transform: translateY(-50%) scale(.88);
}

.duel.koos-b .duel-naad::after {
  background: var(--grad-neon);
  transform: translateY(-50%) scale(.88);
}

/* Paar wisselen: het oude schuift weg in de looprichting, het nieuwe komt
   van de andere kant binnen — vooruit naar links, terug naar rechts. */
.duel.weg-links,
.overzicht.weg-links {
  animation: weg-links .16s ease-in forwards;
}

.duel.weg-rechts,
.overzicht.weg-rechts {
  animation: weg-rechts .16s ease-in forwards;
}

@keyframes weg-links {
  to { opacity: 0; transform: translateX(-44px) scale(.97); }
}

@keyframes weg-rechts {
  to { opacity: 0; transform: translateX(44px) scale(.97); }
}

#vragen-lijst.vooruit > * {
  animation: van-rechts .42s var(--veer-zacht) backwards;
}

#vragen-lijst.terug > * {
  animation: van-links .42s var(--veer-zacht) backwards;
}

#vragen-lijst.in > * {
  animation: rijs-op .4s var(--uit) .06s backwards;
}

@keyframes van-rechts {
  from { opacity: 0; transform: translateX(48px) scale(.97); }
}

@keyframes van-links {
  from { opacity: 0; transform: translateX(-48px) scale(.97); }
}

/* Overzicht na het laatste paar: gekozen kant vet, de andere doorgestreept;
   tik = terug naar dat paar om te wisselen. */
.overzicht h2 {
  margin-bottom: 2px;
}

.overzicht .stil {
  margin-bottom: 14px;
}

.overzicht-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 8px;
  padding: 13px 14px;
  border: 1.5px solid var(--nacht-rand);
  border-radius: 18px;
  background: var(--nacht-glas);
  color: #fff;
  text-align: left;
  box-shadow: 0 4px 0 var(--lip-nacht);
  transition: transform .3s var(--veer), box-shadow .3s var(--veer), border-color .2s;
}

.overzicht-rij:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--lip-nacht);
  transition-duration: .06s;
}

@media (hover: hover) {
  .overzicht-rij:hover {
    border-color: rgba(255, 62, 165, .6);
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--lip-nacht);
  }
}

.overzicht-nr {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-neon);
  color: #fff;
  font-family: var(--display);
  font-size: .85rem;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(255, 62, 165, .5);
}

.overzicht-tekst {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.overzicht-tekst strong {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.overzicht-tekst s {
  color: var(--inkt-zacht);
  font-size: .85rem;
  font-weight: 500;
  opacity: .6;
}

.overzicht-rij svg.lucide {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  color: var(--inkt-zacht);
}

/* ── Persona-kaart ────────────────────────────────────────── */
/* Glans linksboven + lichte schaduw onderin: oogt als een verzamelkaart.
   De schaduw staat op de buitenste .mijn-kaart, omdat die overflow:hidden
   heeft (nodig voor de 3D-flip) en een schaduw op de vlakken zou afknippen. */
.mijn-kaart {
  border-radius: 28px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .12), 0 28px 50px -24px rgba(0, 0, 0, .9);
}

.mijn-kaart-voor,
.mijn-kaart-achter {
  border-radius: 28px;
  box-shadow: none;
}

.mijn-kaart-voor::before,
.mijn-kaart-achter::before {
  background:
    radial-gradient(130% 90% at 90% -10%, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 55%),
    linear-gradient(to top, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0) 50%);
}

.mijn-kaart-voor .codenaam {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.kaart-icoon {
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .22));
}

/* Tikbare kaart (omdraaien) geeft mee onder je vinger. */
.mijn-kaart-inner {
  transition: transform .7s var(--veer-zacht), scale .2s var(--veer);
}

.mijn-kaart:not(.niet-klikbaar):active .mijn-kaart-inner {
  scale: .98;
}

/* ── Wachtschermen ────────────────────────────────────────── */
#scherm-wachten:not(.verborgen) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 230px - var(--safe-top) - var(--safe-bottom));
}

.wacht-paneel {
  text-align: center;
}

/* Status, geen knop: daarom zachte gloed i.p.v. een dikte-rand. */
.wacht-signaal {
  width: 60px;
  height: 60px;
  margin: 2px auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-neon);
  box-shadow: 0 0 24px rgba(255, 62, 165, .55);
}

.wacht-signaal svg.lucide {
  width: 26px;
  height: 26px;
  margin: 0;
  color: #fff;
}

/* ── Spelen & scannen ─────────────────────────────────────── */
/* style.css zet deze uitlegbox in vaste lichte kleuren (deels !important). */
.ronde-instructie-box,
.ronde-instructie-box[open] {
  background: var(--nacht-glas);
  color: #fff;
  border: 1.5px solid var(--nacht-rand);
  border-radius: 20px;
  box-shadow: none;
}

#scherm-spel .ronde-summary,
#scherm-spel .ronde-summary span {
  color: #fff !important;
}

#scherm-spel .ronde-summary svg.lucide {
  color: var(--neon-roze) !important;
}

#scherm-spel .ronde-uitleg-content,
#scherm-spel .ronde-uitleg-content strong {
  color: #fff;
}

.scan-totaal {
  border: none;
  margin-bottom: 2px;
  font-size: .9rem;
}

.scan-totaal strong {
  font-family: var(--display);
  font-size: 1.15rem;
  color: #fff;
}

.wrap .rij-icoon {
  color: #e2d2ff;
}

.rij-herbekijk,
.rij-herbekijk:last-child {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1.5px solid var(--nacht-rand);
  border-radius: 18px;
  background: var(--nacht-glas);
  box-shadow: 0 4px 0 var(--lip-nacht);
  transition: transform .3s var(--veer), box-shadow .3s var(--veer), background-color .2s;
}

.rij-herbekijk:hover:not(:disabled),
.rij-herbekijk:focus-visible {
  background: rgba(255, 255, 255, .12);
}

.rij-herbekijk:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--lip-nacht);
  transition-duration: .06s;
}

.rij-herbekijk .naam {
  font-family: var(--display);
}

/* ── Scanresultaat ────────────────────────────────────────── */
/* Het antwoord op je scan: het percentage stempelt binnen terwijl app.js
   'm optelt, daarna volgen punten en uitleg. Confetti alleen bij groen. */
.resultaat-pct {
  font-variant-numeric: tabular-nums;
}

#scherm-resultaat:not(.verborgen) .resultaat-pct {
  animation: stempel .7s var(--veer) backwards;
}

@keyframes stempel {
  0%  { opacity: 0; transform: scale(.4); }
  60% { opacity: 1; }
}

.resultaat-punten {
  font-size: 1.25rem;
  padding: 7px 20px;
  background: rgba(255, 255, 255, .28);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .08);
}

#scherm-resultaat:not(.verborgen) .resultaat-punten          { animation: pop-in .5s var(--veer) .7s backwards; }
#scherm-resultaat:not(.verborgen) .resultaat-verdict-tekst   { animation: rijs-op .45s var(--uit) .8s backwards; }
#scherm-resultaat:not(.verborgen) .resultaat-wie-tekst,
#scherm-resultaat:not(.verborgen) .resultaat-totaal          { animation: rijs-op .45s var(--uit) .85s backwards; }
#scherm-resultaat:not(.verborgen) .resultaat-antwoorden-wrap { animation: rijs-op .45s var(--uit) .9s backwards; }

#scherm-resultaat:not(.verborgen) .antwoord-rij {
  animation: rijs-op .4s var(--uit) backwards;
  animation-delay: calc(.95s + var(--i, 0) * 50ms);
}

.resultaat-antwoorden-wrap {
  border-radius: 28px;
}

/* "Verder spelen" als stevige witte knop i.p.v. een glazen pil — beter
   zichtbaar op alle drie de verdict-kleuren. */
.resultaat-terug-btn {
  background: #fff !important;
  color: #1a0a3d !important;
  font-family: var(--display);
  font-size: 1.1rem !important;
  border: none !important;
  border-radius: var(--knop-radius) !important;
  padding: 16px 24px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .18), 0 18px 30px -14px rgba(0, 0, 0, .45) !important;
  transition: transform .35s var(--veer), box-shadow .35s var(--veer);
}

.resultaat-terug-btn:hover:not(:disabled) {
  background: #fff !important;
}

.resultaat-terug-btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 6px 12px -8px rgba(0, 0, 0, .4) !important;
  transition-duration: .06s;
}

/* ── Einduitslag ──────────────────────────────────────────── */
.score-kaart {
  margin-bottom: 0;
}

.score-kaart .mijn-kaart-voor,
.score-kaart .mijn-kaart-achter {
  background: linear-gradient(135deg, #7a2bff 0%, #c43dd6 55%, #ff3ea5 100%);
}

.score-kaart .mijn-kaart-voor {
  padding: 26px 22px 20px;
}

.score-label {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}

.score-getal {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1;
  margin: 6px 0 14px;
}

.score-getal span {
  font-size: 4.5rem;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(255, 255, 255, .45);
}

.score-getal small {
  font-size: 1.1rem;
  margin-left: 6px;
  opacity: .85;
}

.score-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.score-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: .82rem;
  font-weight: 600;
}

.score-chip svg.lucide {
  width: 15px;
  height: 15px;
}

.score-kaart .qr-hint {
  margin-top: 16px;
}

/* Tabs als segmented control; de witte "duim" schuift mee met je tik. */
.folder-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 12px;
  padding: 5px;
  border-radius: var(--radius-pill);
  background: var(--nacht-glas);
  border: 1.5px solid var(--nacht-rand);
  z-index: auto;
}

.folder-tabs::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 3px 0 var(--lip-licht);
  transition: transform .45s var(--veer);
}

.folder-tabs:has(.folder-tab:nth-child(2).actief)::before {
  transform: translateX(100%);
}

.folder-tab,
.folder-tab.actief {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  padding: 11px 10px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--inkt-zacht);
  font-weight: 700;
  transition: color .25s;
}

.folder-tab.actief {
  color: #43115B;
}

.folder-paneel {
  border-top-left-radius: 28px;
}

/* Bij het openen van de uitslag (of een andere tab) lopen de rijen van
   boven naar beneden binnen — de ranglijst wordt "bekendgemaakt". */
.bord-rij,
.bord-rij:last-child {
  gap: 12px;
  margin: 0 -8px;
  padding: 11px 12px;
  border: none;
  border-radius: 16px;
  animation: rijs-op .4s var(--uit) backwards;
  animation-delay: calc(.1s + var(--i, 0) * 50ms);
}

.bord-rij + .bord-rij {
  margin-top: 4px;
}

.bord-rij .rang {
  flex: none;
  width: 28px;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  color: var(--inkt-zacht);
}

.bord-rij.top1 .rang,
.bord-rij.top2 .rang,
.bord-rij.top3 .rang {
  font-size: 1.35rem;
}

.bord-rij .naam {
  font-family: var(--display);
}

.bord-rij .rechts strong {
  font-family: var(--display);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.bord-rij.ik {
  background: rgba(255, 62, 165, .16);
  box-shadow: inset 0 0 0 2px rgba(255, 62, 165, .55), 0 0 18px rgba(255, 62, 165, .25);
}

.bord-rij.niet-gescand {
  opacity: .55;
}

/* ── Meedoen ──────────────────────────────────────────────── */
#scherm-join .paneel h2 {
  font-size: 1.65rem;
}

.wrap input[type="text"] {
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  box-shadow: none;
  transition: border-color .2s, box-shadow .3s var(--uit);
}

.wrap input[type="text"]:focus {
  border-color: var(--neon-roze);
  box-shadow: 0 0 0 4px rgba(255, 62, 165, .22), 0 0 20px rgba(255, 62, 165, .3);
}

.wrap .veld-float input:focus::placeholder,
.wrap .veld-float input:not(:placeholder-shown)::placeholder {
  color: rgba(255, 255, 255, .35);
}

.wrap .veld-float input:focus + label,
.wrap .veld-float input:not(:placeholder-shown) + label {
  color: #ff8fcb;
}

/* Lichte meldingsbalkjes (groen/rood) houden donkere tekst. */
.join-status-ok,
.join-status-fout {
  color: #1a0a3d;
}

.join-status:not(:empty) {
  animation: pop-in .4s var(--veer) backwards;
}

#btn-claim {
  margin-top: 18px;
}

.spelcode-scan-knop {
  padding: 0 18px;
  border-radius: var(--knop-radius);
}

/* ── Eigen dilemma's ──────────────────────────────────────── */
.eigen-kop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 2px;
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--inkt-zacht);
}

.eigen-paar {
  gap: 12px;
}

.wrap input.eigen-optie {
  min-height: 72px;
  padding: 16px 12px;
  border-radius: 20px;
  text-align: center;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 4px 0 var(--lip-nacht);
}

.wrap input.eigen-optie::placeholder {
  color: rgba(255, 255, 255, .3);
  font-weight: 600;
}

/* Zelfde of-munt als in het duel; neon zodra beide kanten ingevuld zijn. */
.eigen-paar::after {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--achtergrond);
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: var(--display);
  font-size: .72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .3);
  z-index: 2;
  transition: background .25s, box-shadow .25s;
}

.eigen-paar.compleet::after {
  background: var(--grad-neon);
  box-shadow: 0 0 0 2px #ffd6f0, 0 0 14px rgba(255, 62, 165, .7);
}

#btn-custom-vragen-verstuur {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Welkom ───────────────────────────────────────────────── */
.welkom-inhoud {
  width: 100%;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welkom-logo {
  margin-bottom: 16px;
}

.welkom-logo img {
  display: inline-block;
  height: 5.4rem;
  filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(166, 77, 255, .8));
}

.welkom-badge {
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.welkom-intro {
  max-width: 320px;
  margin-bottom: 28px;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: rgba(255, 255, 255, .82);
}

.welkom-cta {
  width: 100%;
  max-width: 320px;
  margin-bottom: 16px;
  padding: 19px 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--knop-radius);
  background: var(--grad-neon);
  color: #fff;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 0 var(--lip-neon), 0 16px 36px -10px rgba(255, 62, 165, .7);
  transition: transform .35s var(--veer), box-shadow .35s var(--veer);
}

@media (hover: hover) {
  .welkom-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--lip-neon), 0 20px 40px -10px rgba(255, 62, 165, .75);
  }
}

.welkom-cta:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--lip-neon), 0 6px 16px -10px rgba(255, 62, 165, .6);
  transition-duration: .06s;
}

/* width/max-width expliciet: de globale `button { width:100% }` uit
   style.css zou deze anders edge-to-edge uitrekken. */
#btn-ga-naar-join.welkom-secundair {
  width: 100%;
  max-width: 320px;
  margin-top: 0;
  padding: 15px 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--knop-radius);
  background: #fff;
  color: #43115B;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 5px 0 var(--lip-licht), 0 14px 30px -14px rgba(0, 0, 0, .6);
  transition: transform .35s var(--veer), box-shadow .35s var(--veer);
}

#btn-ga-naar-join.welkom-secundair:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 7px 0 var(--lip-licht), 0 18px 34px -14px rgba(0, 0, 0, .6);
}

#btn-ga-naar-join.welkom-secundair:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--lip-licht);
  transition-duration: .06s;
}

.welkom-link-hwh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.welkom-link-hwh i,
.welkom-link-hwh svg {
  width: 15px;
  height: 15px;
  transition: transform .2s ease;
}

@media (hover: hover) {
  .welkom-link-hwh:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
  }
  .welkom-link-hwh:hover i,
  .welkom-link-hwh:hover svg {
    transform: translateX(3px);
  }
}

.welkom-link-hwh:active {
  transform: scale(.97);
}

.welkom-recent {
  width: 100%;
  max-width: 320px;
  margin-top: 32px;
  text-align: left;
}

.welkom-recent-titel {
  margin-bottom: 12px;
  padding-left: 4px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

/* ── Overige kleine dingen ────────────────────────────────── */
.melding {
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  background: #2b0d55;
  border: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--display);
  font-weight: 700;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6);
  animation: melding-in .45s var(--veer);
}

@keyframes melding-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(.9); }
}

/* Het host-minipaneel ligt óver de content: solide i.p.v. glas. */
#host-mini-overlay .paneel {
  background: #2b0d55;
}

.speler-topbar-exit {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .3s var(--veer), box-shadow .2s;
}

.speler-topbar-exit:hover {
  background: rgba(255, 255, 255, .16);
}

.speler-topbar-exit svg.lucide {
  color: #fff;
}

.speler-topbar-exit:active {
  transform: scale(.95);
  transition-duration: .06s;
}

.fx-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  pointer-events: none;
}

/* ── Beweging beperken ────────────────────────────────────── */
/* Respecteer de systeeminstelling: alles staat meteen op z'n eindpositie.
   fx.js slaat confetti en optellen dan ook over. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}