/* ============================================================
   Vibes — Vibrant Playful Design
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  --wit: #ffffff;
  --achtergrond: #f8f9fc;
  --kaart: #ffffff;
  --inkt: #1a0a3d;
  --inkt-zacht: #6b5b95;

  /* Brand */
  --blauw: #43115B;
  --blauw-mid: #6A208F;
  --blauw-licht: #E9D8F5;

  /* Verdicts */
  --groen: #00c853;
  --groen-2: #00e676;
  --groen-licht: #d6f8e6;
  --geel: #ff9f1c;
  --geel-2: #ffca28;
  --geel-licht: #fff3d9;
  --rood: #ff3b5c;
  --rood-2: #ff6b81;
  --rood-licht: #ffe0e6;

  /* Gradients */
  --grad-blauw: linear-gradient(135deg, #6A208F 0%, #43115B 100%);
  --grad-groen: linear-gradient(135deg, #6ae368 0%, #1db954 100%);
  --grad-geel: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
  --grad-rood: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%);

  /* Shape */
  --radius: 24px;
  --radius-klein: 16px;
  --radius-pill: 999px;

  /* Shadow */
  --schaduw: 0 2px 10px rgba(0, 0, 0, 0.05);
  --schaduw-lg: 0 8px 30px rgba(0, 0, 0, 0.1);

  --display: "Space Grotesk", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Safe-area insets — één centrale definitie i.p.v. env(safe-area-inset-*)
     los in losse regels herhalen. Werkt identiek op iOS én Android (het is
     de standaard CSS Environment Variables-spec, geen iOS-specifieke API):
     0px in elke gewone browsertab (desktop of mobiel), en pas een echte
     waarde zodra de site als geïnstalleerde PWA achter een notch/statusbalk
     draait (met viewport-fit=cover, al aanwezig in elke pagina hier). Elk
     vast/sticky element dat tegen de rand van het scherm zit, hoort
     var(--safe-top)/var(--safe-bottom) mee te nemen in zijn top/bottom. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ── Reset ────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: break-word;
}

html {
  -webkit-text-size-adjust: 100%;
  /* clip i.p.v. hidden: hidden op maar één as zet de ANDERE as (overflow-y)
     stiekem om naar auto (CSS-spec gedrag), wat html/body tot een eigen
     scrollcontainer maakt en position:sticky elders op de pagina volledig
     laat stoppen met werken. clip voorkomt horizontaal overflowen zonder
     dat neveneffect. */
  overflow-x: clip;
  /* Stops a quick double-tap (e.g. flipping the card) from being read as
     Safari/Chrome's double-tap-to-zoom gesture. Pinch-zoom still works. */
  touch-action: manipulation;
  /* Achtervangkleur achter de daadwerkelijke pagina — voorkomt een wit
     randje/flits in de geïnstalleerde iOS-app (geen Safari-chrome die dat
     anders camoufleert) zodra WebKit ook maar even buiten het document
     rendert. body.host-scherm (donkere paginas) overschrijft dit hieronder. */
  background: var(--achtergrond);
}

html:has(body.host-scherm) {
  background: var(--blauw);
}

html, body {
  max-width: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: clip;
  /* iOS geeft elastic overscroll (de "rubber band" bounce) door aan het hele
     document — inclusief position:fixed-elementen, die tijdens die bounce
     even meeschuiven i.p.v. echt vast te blijven staan. In een geïnstalleerde
     PWA (geen Safari-chrome eromheen) is dat zichtbaar als een wit balkje
     onderaan en een layout die "te hoog"/verschoven oogt. Dit zet 'm voor
     alle pagina's in één keer uit; losse schermen scrollen intern prima
     door via hun eigen overflow-y (bv. .wrap, #scherm-welkom). */
  overscroll-behavior: none;
  background: var(--achtergrond);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(11, 95, 215, .12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(26, 115, 232, .10) 0%, transparent 60%);
  color: var(--inkt);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}


.wrap {
  max-width: 480px;
  margin: 0 auto;
  /* Top-clearance geldt voor elke pagina, niet alleen degene met een eigen
     vast bovenelement — anders duikt precies de pagina zónder zo'n element
     (bv. kaarten.html) alsnog onder de notch/statusbalk. host.html's eigen
     sticky #host-topbar regelt zijn eigen top-ruimte al, dus die pagina
     zet dit hieronder terug naar de gewone 20px (zie body.host-scherm .wrap
     verderop) — anders krijg je daar dubbele ruimte. */
  padding: calc(20px + var(--safe-top)) 16px calc(140px + var(--safe-bottom));
}

.wrap-breed {
  max-width: 880px;
}

/* ── Header ───────────────────────────────────────────────── */
/* Kept deliberately small and muted: this is a persistent logo mark, not the
   page's heading — the screen's own <h2> should always read as the primary
   title. The big "Vibes" treatment lives only on the welcome splash. */
header.app {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 0 8px;
  opacity: 0.6;
}

header.app h1 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--inkt-zacht);
}

header.app h1 .accent {
  color: inherit;
}

header.app .logo-icoon {
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  color: var(--inkt-zacht);
}

/* Het Vibes-beeldmerk (icons/vibes.svg) is getekend in zwart/donkerpaars —
   prima leesbaar op de lichte achtergrond van index.html/kaarten.html,
   vrijwel onzichtbaar op een donkere achtergrond (hostpanel, het donkere
   welkomstscherm). .logo-vibes regelt alleen consistente formaat/uitlijning
   voor het kleine koptekst-logo; .logo-vibes-wit is een los te combineren
   kleurmodifier (dus ook te gebruiken op een los, groter logo zoals op het
   welkomstscherm) die 'm wit maakt: brightness(0) drukt alles naar zwart
   (transparantie blijft intact), invert(1) draait dat om naar wit — zo
   hoeft het SVG-bestand zelf niet in twee kleurvarianten te bestaan. */
.logo-vibes {
  height: 1.8em;
  vertical-align: middle;
}

.logo-vibes-wit {
  filter: brightness(0) invert(1);
}

header.app .sub {
  color: var(--inkt-zacht);
  font-size: 0.85rem;
  font-weight: 600;
}

h2 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 12px;
}

.stil {
  color: var(--inkt-zacht);
  font-size: 0.9rem;
  font-weight: 500;
}

/* ── Panels ───────────────────────────────────────────────── */
.paneel {
  background: var(--kaart);
  border-radius: var(--radius);
  padding: 22px 20px;
  margin-bottom: 16px;
  box-shadow: var(--schaduw);
  border: 1px solid rgba(11, 95, 215, .08);
}

/* ── Folder Tabs ────────────────────────────────────────── */
.folder-tabs-container {
  margin-top: 16px;
}

.folder-tabs {
  display: flex;
  padding-left: 0;
  /* Align flush with the panel */
  margin-bottom: -1px;
  /* Overlap the border of the panel below */
  position: relative;
  z-index: 2;
}

.folder-tab {
  background: #f1f3f5;
  border: 1px solid rgba(11, 95, 215, .08);
  border-bottom: none;
  padding: 10px 20px 12px;
  border-radius: 16px 16px 0 0;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--inkt-zacht);
  cursor: pointer;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.02);
  margin-right: -1px;
  /* Prevent double borders between tabs */
  transition: all 0.2s ease;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto !important;
  /* Override global button width */
  flex: none !important;
  min-width: 140px;
  justify-content: center;
}

.folder-tab:hover,
.folder-tab:active {
  transform: none !important;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.02) !important;
}

.folder-tab i {
  width: 1.1em;
  height: 1.1em;
}

.folder-tab:first-child {
  border-top-left-radius: var(--radius);
}

.folder-tab.actief {
  background: var(--kaart);
  /* Same as paneel */
  color: var(--paars);
  box-shadow: none !important;
  /* No inner shadow, override hover */
  padding-top: 14px;
  /* Slight bump up */
  margin-top: -2px;
}

.folder-tab.actief:hover,
.folder-tab.actief:active {
  transform: none !important;
  box-shadow: none !important;
}

.folder-paneel {
  border-top-left-radius: 0;
  margin-top: 0;
  position: relative;
  z-index: 1;
}

.tab-content {
  display: block;
}

.tab-content.verborgen {
  display: none !important;
}

/* ── Form ─────────────────────────────────────────────────── */
label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 14px 0 5px;
  letter-spacing: .03em;
  color: var(--inkt-zacht);
  text-transform: uppercase;
}

input, select, textarea {
  /* iOS Safari zooms the page in on focus if the font-size is under 16px */
  font-size: max(1rem, 16px);
}

input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid rgba(11, 95, 215, .15);
  border-radius: var(--radius-klein);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  background: #fff;
  color: var(--inkt);
  transition: border-color .2s, box-shadow .2s;
}

input[type="text"]:focus {
  outline: none;
  border-color: var(--blauw);
  box-shadow: 0 0 0 4px rgba(11, 95, 215, .12);
}

/* ── Buttons ──────────────────────────────────────────────── */
button {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 800;
  border: none;
  border-radius: var(--radius-klein);
  padding: 14px 22px;
  cursor: pointer;
  width: 100%;
  margin-top: 14px;
  background: var(--grad-blauw);
  color: #fff;
  box-shadow: 0 4px 16px rgba(11, 95, 215, .35);
  transition: transform .15s ease, box-shadow .15s ease;
  letter-spacing: .01em;
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(11, 95, 215, .45);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

button:focus-visible {
  outline: 3px solid var(--blauw-mid);
  outline-offset: 2px;
}

button:disabled {
  opacity: .45;
  cursor: default;
}

button.rustig {
  background: var(--blauw-licht);
  color: var(--blauw);
  box-shadow: none;
}

button.rustig:hover:not(:disabled):not(.gekozen) {
  background: #ddd6fe;
  box-shadow: none;
}

button.gevaar {
  background: var(--rood-licht);
  color: var(--rood);
  box-shadow: none;
}

.tekst-knop {
  width: auto;
  background: none;
  box-shadow: none;
  border: none;
  color: var(--inkt-zacht);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 10px;
  margin-top: 0;
  opacity: 0.6;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tekst-knop svg.lucide {
  width: 0.95em;
  height: 0.95em;
}

.tekst-knop:hover:not(:disabled) {
  transform: none;
  opacity: 1;
  color: var(--inkt);
}

.tekst-knop:active:not(:disabled) {
  transform: none;
}

button.klein {
  width: auto;
  padding: 9px 16px;
  font-size: 0.82rem;
  margin-top: 0;
}

/* Knop-achtige link */
a.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 800;
  border-radius: var(--radius-klein);
  padding: 14px 22px;
  background: var(--blauw-licht);
  color: var(--blauw);
  text-decoration: none;
  margin-top: 14px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
}

a.btn-link:hover {
  background: #ddd6fe;
  transform: translateY(-2px);
}

a.btn-link:active {
  transform: translateY(0);
}

/* ── Notification toast ───────────────────────────────────── */
/* Bovenaan i.p.v. onderaan: onderaan overlapt 'm altijd met de sticky
   scan-/nav-knoppen, die op vrijwel elk scherm al de onderste strook
   innemen. */
.melding {
  position: fixed;
  left: 50%;
  top: calc(24px + var(--safe-top));
  transform: translateX(-50%);
  background: var(--inkt);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius-klein);
  font-size: 0.9rem;
  font-weight: 700;
  z-index: 100;
  max-width: 90vw;
  box-shadow: 0 6px 24px rgba(26, 10, 61, .3);
  animation: slideDown .25s ease;
}

.melding.fout {
  background: var(--rood);
}

@keyframes slideDown {
  from {
    transform: translateX(-50%) translateY(-12px);
    opacity: 0;
  }
}

.verborgen {
  display: none !important;
}

/* ── Lucide icons ─────────────────────────────────────────── */
svg.lucide {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.16em;
  flex: none;
}

button svg.lucide {
  margin-right: 5px;
}

h2 svg.lucide {
  color: var(--blauw);
}

.kaart-icoon {
  width: 52px !important;
  height: 52px !important;
  color: #fff;
  stroke-width: 1.5;
}

.rij-icoon {
  width: 22px !important;
  height: 22px !important;
  color: var(--blauw);
}

.chip svg.lucide {
  color: var(--blauw);
}

/* Preview in join-scherm */
.kaart-preview {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-klein);
  background: var(--blauw-licht);
  color: var(--inkt);
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-lucide-icoon {
  width: 1.25em !important;
  height: 1.25em !important;
  color: var(--blauw);
  vertical-align: middle;
}

/* ── Eigen kaart (Flip Container) ──────────────────────────────────────────── */
.mijn-kaart {
  perspective: 1000px;
  margin-bottom: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Without this, WebKit can grow the page's scrollable area to fit the
     3D-flipped back face, causing a stray horizontal scroll on iOS. */
  overflow: hidden;
}

.mijn-kaart.niet-klikbaar {
  cursor: default;
}

.mijn-kaart-inner {
  position: relative;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  display: grid;
}

.mijn-kaart.geflapped .mijn-kaart-inner {
  transform: rotateY(180deg);
}

.mijn-kaart-voor,
.mijn-kaart-achter {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  color: #fff;
  text-align: center;
  box-shadow: var(--schaduw-lg);
  position: relative;
  overflow: hidden;
}

/* The hidden face becomes absolute so it doesn't stretch the container's height */
.mijn-kaart:not(.geflapped) .mijn-kaart-achter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mijn-kaart.geflapped .mijn-kaart-voor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

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

.mijn-kaart-achter {
  transform: rotateY(180deg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mijn-kaart-voor::before,
.mijn-kaart-achter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .08);
  pointer-events: none;
}

.mijn-kaart-voor .codenaam {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 900;
  margin-top: 8px;
  letter-spacing: -0.01em;
}

.mijn-kaart-voor .nick {
  opacity: 0.82;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 2px;
}

/* Het leuke omschrijvingszinnetje van de persona (bv. "Ziet elke bug als een
   puzzel...") — vooral fijn om te lezen tijdens het wachten tot het spel
   begint, dus expres wat losser/lichter dan de naam zodat het als sfeer
   leest, niet als functionele info. */
.mijn-kaart-voor .kaart-omschrijving {
  opacity: 0.85;
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  margin: 10px auto 0;
  line-height: 1.4;
  max-width: 260px;
  text-align: center;
}

.mijn-kaart-voor .qr {
  background: #fff;
  border-radius: 16px;
  display: inline-block;
  padding: 12px;
  margin-top: 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}

.mijn-kaart-voor .qr img {
  display: block;
  border-radius: 6px;
}

.mijn-kaart-voor .kaartcode {
  font-family: var(--display);
  letter-spacing: 0.18em;
  margin-top: 10px;
  font-size: 0.82rem;
  opacity: 0.85;
  font-weight: 700;
}

.qr-hint {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.75;
  margin-top: 6px;
  letter-spacing: .02em;
}

.mijn-kaart-achter h3 {
  margin: 0 0 16px 0;
  font-size: 1.2rem;
  font-family: var(--display);
}

.achter-antwoorden {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  overflow-y: auto;
}

.flip-antwoord {
  background: rgba(255, 255, 255, 0.15);
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
}

.flip-antwoord strong {
  opacity: 0.6;
  margin-right: 6px;
}

/* ── Vragen / this-or-that ────────────────────────────────── */
.vraag {
  margin-bottom: 16px;
}

.opties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
}

.opties::after {
  content: "of";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: rgba(67, 17, 91, 0.55);
  font-size: 0.7rem;
  font-weight: 700;
  font-style: italic;
  padding: 2px 7px;
  border-radius: 20px;
  pointer-events: none;
}

.optie {
  padding: 16px 10px;
  border: 2.5px solid rgba(67, 17, 91, 0.1);
  border-radius: var(--radius-klein);
  background: #fff;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 0;
  color: var(--inkt);
  transition: border-color .18s, background .18s, transform .12s;
}

.optie:hover {
  border-color: var(--blauw-mid);
  transform: translateY(-1px);
}

.optie.gekozen {
  border-color: var(--blauw);
  background: var(--blauw);
  color: #fff;
  box-shadow: 0 4px 10px rgba(67, 17, 91, 0.2);
}

/* Echt vastgepind aan de onderkant van het scherm, ongeacht of de inhoud
   lang genoeg is om te scrollen (dat is waar position: sticky pas werkt). */
.knop-onderaan {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  background: linear-gradient(to bottom, rgba(248, 249, 252, 0) 0%, rgba(248, 249, 252, 1) 40%);
  z-index: 10;
}

.knop-onderaan button {
  margin-top: 0;
}

/* ── Strikes ──────────────────────────────────────────────── */
.strikes {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 12px 0;
}

.strike {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(11, 95, 215, .15);
  transition: background .3s, transform .3s;
}

.strike.raak {
  background: var(--rood);
  transform: scale(1.15);
}

/* ── Lists / rows ─────────────────────────────────────────── */
.rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1.5px solid rgba(11, 95, 215, .08);
}

.rij:last-child {
  border-bottom: none;
}

.rij .naam {
  font-weight: 700;
}

.rij .meta {
  color: var(--inkt-zacht);
  font-size: 0.82rem;
  font-weight: 500;
}

.rij .rechts {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}

.stip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(11, 95, 215, .2);
  flex: none;
}

.stip.actief {
  background: var(--groen);
  box-shadow: 0 0 0 3px var(--groen-licht);
}

.badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-klein);
  letter-spacing: .02em;
}

.badge.groen {
  background: var(--groen-licht);
  color: var(--groen);
}

.badge.geel {
  background: var(--geel-licht);
  color: #a06000;
}

.badge.rood {
  background: var(--rood-licht);
  color: var(--rood);
}

.badge.blauw {
  background: var(--blauw-licht);
  color: var(--blauw);
}

.punten-badge {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--inkt-zacht);
  min-width: 2.6em;
  text-align: right;
}

.scan-totaal {
  text-align: right;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--inkt-zacht);
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1.5px solid rgba(11, 95, 215, .08);
}

.scan-totaal strong {
  color: var(--blauw);
}

/* ── Scanner & Scan Bar ───────────────────────────────────── */
#scanner-video {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}

.sticky-scan-card {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  /* Aligned with .wrap */
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-groot) var(--radius-groot) 0 0;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  box-shadow: 0 -8px 32px rgba(11, 95, 215, .12);
  border-top: 1px solid rgba(11, 95, 215, .15);
}

.sticky-scan-card .strikes-rij {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}

.sticky-scan-card .strikes-rij .tekst {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--inkt-zacht);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sticky-scan-card .strikes {
  margin: 0;
}

/* .knoppen/.of-text (scan-of-typen knoppenpaar) zijn bewust niet aan
   .sticky-scan-card gebonden — de host gebruikt hetzelfde paar inline
   (niet fixed) op zijn eigen speelscherm, naast de al-vaste hoofdknop
   onderaan de pagina. */
.knoppen {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
}

.knoppen button {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 12px 10px;
  font-size: 0.95rem;
}

.of-text {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--inkt-zacht);
  margin: 0 10px;
  text-transform: uppercase;
  flex: none;
  opacity: 0.6;
}

/* ── Reveal groups ────────────────────────────────────────── */
.groep {
  margin-bottom: 20px;
}

.groep h3 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--blauw);
}

/* ── Expandable Instructies ────────────────────────────────── */
.uitleg-details {
  background: var(--wit);
  border-radius: var(--radius-klein);
  border: 1px solid rgba(11, 95, 215, 0.1);
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(11, 95, 215, 0.05);
}

.uitleg-details summary {
  padding: 14px;
  font-weight: 700;
  color: var(--blauw);
  cursor: pointer;
  list-style: none;
  /* Hide default arrow */
  display: flex;
  align-items: center;
  gap: 8px;
}

.uitleg-details summary::-webkit-details-marker {
  display: none;
}

.uitleg-details summary i {
  opacity: 0.8;
}

.uitleg-content {
  padding: 0 14px 14px;
  font-size: 0.9rem;
  color: var(--inkt);
}

.uitleg-content p {
  margin: 0 0 10px;
}

.uitleg-content p:last-child {
  margin-bottom: 0;
}

.groep .leden {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blauw-licht);
  border-radius: var(--radius-klein);
  padding: 7px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--blauw);
}

/* ── ═══ FULL-SCREEN VIBE RESULT ═══ ─────────────────────── */
#scherm-resultaat {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

#scherm-resultaat.verborgen {
  display: none !important;
}

.resultaat-bg {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: background .4s ease;
  overflow: hidden;
}

.resultaat-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 20px;
}

.resultaat-footer {
  flex: 0 0 auto;
  padding: 16px 20px calc(32px + var(--safe-bottom));
  display: flex;
  justify-content: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
}

/* Verdict-specifieke achtergronden */
.resultaat-bg.groen {
  background: var(--grad-groen);
}

.resultaat-bg.geel {
  background: var(--grad-geel);
}

.resultaat-bg.rood {
  background: var(--grad-rood);
}

/* Grote pct cirkel bovenaan */
.resultaat-hero {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 32px;
  width: 100%;
  text-align: center;
}

.resultaat-pct {
  font-family: var(--display);
  font-size: clamp(90px, 28vw, 160px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .2);
  letter-spacing: -0.04em;
}

.resultaat-punten {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-pill);
  padding: 6px 18px;
  margin-top: 12px;
  letter-spacing: -0.01em;
}

.resultaat-verdict-tekst {
  font-family: var(--display);
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  margin-top: 10px;
}

.resultaat-wie-tekst {
  color: rgba(255, 255, 255, .85);
  font-size: 1rem;
  font-weight: 700;
  margin-top: 8px;
}

.resultaat-totaal {
  color: rgba(255, 255, 255, .7);
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 4px;
}

/* Antwoorden kaart */
.resultaat-antwoorden-wrap {
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 20px;
  width: 100%;
  max-width: 440px;
  margin-bottom: 20px;
}

.resultaat-antwoorden-titel {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 12px;
}

.antwoord-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
}

.antwoord-rij:last-child {
  border-bottom: none;
}

.antwoord-icoon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  flex: none;
  font-weight: 900;
}

.antwoord-rij.match .antwoord-icoon {
  background: rgba(255, 255, 255, .4);
}

.antwoord-rij.miss .antwoord-icoon {
  background: rgba(0, 0, 0, .2);
  opacity: .7;
}

.antwoord-rij.miss {
  opacity: .7;
}

.resultaat-terug-btn {
  width: 100%;
  max-width: 440px;
  background: rgba(255, 255, 255, .25) !important;
  backdrop-filter: blur(10px);
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15) !important;
  border: 1.5px solid rgba(255, 255, 255, .4) !important;
}

.resultaat-terug-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, .35) !important;
}

/* ── Host: donker thema ───────────────────────────────────────
   Host-pagina's krijgen een effen donkerpaarse achtergrond zodat "host-modus"
   in één oogopslag anders aanvoelt dan de lichte spelerschermen. In plaats
   van elke component apart te herstijlen, hertekenen we een paar gedeelde
   tokens binnen dit scope — vrijwel elke component hierboven leest al uit
   deze variabelen, dus ze themen zichzelf automatisch mee. */
body.host-scherm {
  /* Letterlijke hex i.p.v. var(--blauw): hieronder wordt --blauw zelf
     herbruikt als "witte accentkleur" voor icoontjes/tekst binnen dit
     donkere thema, dus var(--blauw) zou hier ook wit worden i.p.v. de
     bedoelde donkerpaarse achtergrond. */
  background: #43115B;
  background-image: none;
  color: #fff;
  --inkt-zacht: rgba(255, 255, 255, .68);
  --kaart: rgba(255, 255, 255, .08);
  --blauw-licht: rgba(255, 255, 255, .16);
  --blauw: #ffffff;
}

body.host-scherm .paneel {
  border-color: rgba(255, 255, 255, .16);
}

/* De hostpagina's sticky-nav kan tijdens het scannen een extra rij krijgen
   (de scanknop bovenop terug/volgende) — iets meer ruimte onderaan zodat
   die tweede rij nooit content bedekt. */
body.host-scherm .wrap {
  padding-top: 20px;
  padding-bottom: calc(210px + var(--safe-bottom));
}

/* .folder-tab's inactieve staat is hardcoded lichtgrijs (voor het witte
   thema) — op deze donkere achtergrond anders een lichte vlek die niet bij
   de rest past. Actieve tab blijft var(--kaart), dat is hier al donker. */
body.host-scherm .folder-tab {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .68);
}

body.host-scherm .folder-tab.actief {
  color: #fff;
}

/* .optie.gekozen (dit-of-dat-antwoordknop) vult zichzelf opaak met
   var(--blauw) — op de rest van deze pagina is dat inmiddels wit, wat een
   wit-op-wit onleesbare geselecteerde knop zou geven. Hier dus de echte
   donkerpaarse kleur terug, net als bij de achtergrond hierboven. */
body.host-scherm .optie.gekozen {
  border-color: var(--blauw-mid);
  background: var(--blauw-mid);
}

body.host-scherm input[type="text"]:focus {
  border-color: rgba(255, 255, 255, .5);
}

body.host-scherm .rij,
body.host-scherm .vraag-rij {
  border-bottom-color: rgba(255, 255, 255, .14);
}

body.host-scherm h2 svg.lucide {
  color: #fff;
}

/* .uitleg-details/summary/label lean on --wit/--blauw/--inkt-zacht for a
   light page — on the dark host theme --blauw and --inkt-zacht are already
   flipped to white for other components, which would otherwise leave the
   summary/labels white-on-white against the (unchanged) white box. */
body.host-scherm .uitleg-details {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
}

body.host-scherm .uitleg-details summary {
  color: #fff;
}

body.host-scherm .uitleg-content {
  color: rgba(255, 255, 255, .85);
}

body.host-scherm .uitleg-content label {
  color: rgba(255, 255, 255, .68);
}

/* .join-check-tekst strong leunt op --inkt (vaste donkere inkt, geen deel
   van het donkere-thema-overrideset) — op de effen donkerpaarse achtergrond
   van de host geeft dat te weinig contrast. */
body.host-scherm .join-check-tekst strong {
  color: #fff;
}

body.host-scherm button.rustig:hover:not(:disabled):not(.gekozen) {
  background: rgba(255, 255, 255, .24);
}

body.host-scherm button.rustig.gekozen {
  background: #fff;
  color: var(--blauw-mid);
}

body.host-scherm button.rustig.thema-knop.gekozen {
  background: #fff;
  border: 1px solid #fff;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  color: var(--blauw-mid);
  box-shadow: none;
}

body.host-scherm #thema-vragen-details.verbonden-met-knop {
  background: #fff;
  border: 1px solid #fff;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -8px !important; /* Cancel the flex gap to touch the button */
  margin-bottom: 12px !important;
}

body.host-scherm #thema-vragen-details.verbonden-met-knop summary {
  color: var(--blauw-mid);
}

body.host-scherm #thema-vragen-details.verbonden-met-knop .uitleg-content {
  color: var(--inkt);
}

body.host-scherm #thema-vragen-details.verbonden-met-knop label {
  color: rgba(13, 20, 44, 0.68); /* Darker version of inkt for labels on white */
}

body.host-scherm #thema-vragen-details.verbonden-met-knop button.rustig {
  color: var(--blauw-mid);
  border-color: rgba(11, 95, 215, 0.2);
}

body.host-scherm #thema-vragen-details.verbonden-met-knop button.rustig:hover {
  background: rgba(11, 95, 215, 0.05);
}

body.host-scherm input[type="text"]:focus {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .18);
}

/* ── Host: stap-wizard ────────────────────────────────────── */
/* Zonder dit hangt korte content (bv. "Scannen is open!") bovenin geplakt
   met een dode leegte eronder tot aan de sticky nav — met weinig content
   voelt de pagina dan topzwaar/onaf. min-height + centreren lost dat op;
   bij lange content (bv. stap-modus) heeft het simpelweg geen effect. */
.host-stap-centrum {
  text-align: center;
  min-height: calc(100dvh - 260px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Fun duwtje richting de "Meespelen"-knop in de sticky topbar, zodat een host
   niet zelf hoeft te onthouden dat die ook nog een eigen speler-taak heeft
   (bv. eigen vragen invullen of het dilemma beantwoorden). Positioneert zich
   bovenin de stap, met een pijl die naar de topbar boven 'm wijst. */
.host-speler-hint {
  order: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 20px;
  padding: 10px 18px;
  max-width: fit-content;
  background: var(--geel);
  color: var(--inkt);
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: var(--schaduw-lg);
}

.host-speler-hint svg.lucide {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}

.host-keuzekaarten {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}

.host-keuzekaart {
  width: 100%;
  margin-top: 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .14);
  color: #fff;
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: none;
}

.host-keuzekaart:hover:not(:disabled):not(.gekozen) {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-2px);
  box-shadow: none;
}

.host-keuzekaart-icoon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .14);
}

.host-keuzekaart-icoon svg.lucide {
  width: 22px;
  height: 22px;
  margin: 0;
}

.host-keuzekaart-tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.host-keuzekaart-titel {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 800;
}

.host-keuzekaart-sub {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .68);
}

.host-keuzekaart.gekozen {
  background: #fff;
  border-color: #fff;
  color: var(--blauw-mid);
}

.host-keuzekaart.gekozen .host-keuzekaart-sub {
  color: rgba(106, 32, 143, .75);
}

.host-keuzekaart.gekozen .host-keuzekaart-icoon {
  background: rgba(106, 32, 143, .12);
  color: var(--blauw-mid);
}

.host-pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.host-pil {
  width: auto;
  margin-top: 0;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  box-shadow: none;
  font-weight: 700;
  font-size: 0.92rem;
}

.host-pil.gekozen {
  background: #fff;
  color: var(--blauw-mid);
}

/* Grote CTA-knop: effen wit, voor de ene hoofdactie per stap — steekt sterk
   af tegen de effen donkere achtergrond, in plaats van het gebruikelijke
   paarse gradient-knopje dat er hier juist in zou verdwijnen. */
.host-cta {
  background: #fff;
  color: var(--blauw-mid);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
}

.host-cta:hover:not(:disabled) {
  background: #fff;
  box-shadow: 0 10px 36px rgba(0, 0, 0, .34);
  transform: translateY(-2px);
}

/* Kolom van rijen i.p.v. één rij: zo kan de scanknop (alleen zichtbaar
   tijdens het scannen) als eigen rij bóven de terug/volgende-rij staan,
   zonder dat ze samen in één krappe rij hoeven te vechten om ruimte. */
.host-sticky-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  background: linear-gradient(to top, rgba(26, 8, 38, .95) 40%, rgba(26, 8, 38, 0) 100%);
  z-index: 40;
}

.host-sticky-nav-rij {
  display: flex;
  gap: 10px;
}

/* Duidelijk andere kleur dan de knop ernaast (Volgende/Uitslag, altijd wit
   via .host-cta) — in één oogopslag te onderscheiden welke knop scant en
   welke de voortgang stuurt. Dezelfde paarse gradient als de standaard
   knopkleur bij de speler (--grad-blauw), voor een consistente "scan"-kleur
   door de hele app heen. */
.btn-scan-paars {
  background: var(--grad-blauw);
  color: #fff;
  box-shadow: 0 4px 16px rgba(11, 95, 215, .35);
}

/* Op de donkere hostpagina versmelt het donkere uiteinde van de gradient
   (#43115B) met de paarse achtergrond zelf — hier dus een lichtere, egale
   kleur met een zichtbare rand, zodat de knop altijd goed afsteekt. */
body.host-scherm .btn-scan-paars {
  background: var(--blauw-mid);
  border: 2px solid rgba(255, 255, 255, .4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}

body.host-scherm .btn-scan-paars:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, .6);
}

.btn-scan-paars:hover:not(:disabled) {
  box-shadow: 0 6px 24px rgba(11, 95, 215, .45);
}

.host-sticky-nav .host-cta,
.host-sticky-nav button {
  margin-top: 0;
}

.host-sticky-nav .host-cta {
  flex: 1;
}

.host-sticky-nav .host-terug {
  flex: none;
  width: auto;
}

.host-qr-box {
  background: #fff;
  display: inline-block;
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, .3);
  margin: 8px auto 4px;
}

.host-qr-box img {
  display: block;
  border-radius: 8px;
}

.spelcode-groot.op-donker {
  background: none;
  -webkit-text-fill-color: unset;
  color: #fff;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

/* ── Host: sticky topblok (hoekpillen + tabtoggle) ───────────────────── */
/* Altijd sticky vanaf het laden van de pagina — één rij, altijd dezelfde
   opmaak. Effen achtergrond + schaduw zodat 'm duidelijk als vaste navbalk
   oogt zodra er inhoud onderdoor scrolt. De "Vibes"-titel leeft los
   hieronder, gewoon in de paginaflow (zie host.html) — die scrolt heel
   normaal mee weg, geen speciale logica voor nodig. */
.host-topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  padding: calc(10px + var(--safe-top)) 16px 10px;
  background: #43115B;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

.host-topbar-rij {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  gap: 8px;
}

/* Verlaat-knop: icoon-only, zelfde ronde-knop-taal als .speler-hoek-link op
   index.html, maar hier gewoon een rij-item i.p.v. los fixed element. Vaste
   maat (flex-shrink:0) — dit en .host-topbar-groep zijn de twee "ankers"
   links/rechts; alleen de toggle-knop ertussen mag meebewegen/krimpen, zodat
   niets ooit hoeft te wrappen naar een tweede regel. */
.host-topbar-hoekknop {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  text-decoration: none;
  transition: background .15s ease;
}

.host-topbar-hoekknop:hover {
  background: rgba(255, 255, 255, .22);
}

.host-topbar-hoekknop svg.lucide {
  width: 1.05em;
  height: 1.05em;
  margin: 0;
  color: inherit;
}

.host-topbar-groep {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

#host-tab-toggle {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* .tally-pill wordt op zowel <div>s (qr-pil, spelertelling) als een
   <button> (de tab-toggle) gebruikt — reset hier eens en voorgoed de
   globale button-stijl (margin-top:14px, width:100%, zie de algemene
   `button`-regel verderop) zodat een pil er nooit anders/lager uitziet
   puur omdat het toevallig een <button> i.p.v. een <div> is. */
.tally-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  margin-top: 0;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-pill);
  min-width: 40px;
  min-height: 40px;
  padding: 8px 12px;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background .15s ease;
}

.tally-pill:hover {
  background: rgba(255, 255, 255, .22);
}

.tally-pill svg.lucide {
  width: 1.05em;
  height: 1.05em;
  margin: 0;
}

/* Genest in #host-topbar (die zelf de position:sticky/relative context is),
   dus deze volgen altijd hun eigen pil — of de balk nu gewoon in de
   paginaflow staat of na scrollen vastzit. */
.tally-overlay {
  position: absolute;
  top: 100%;
  right: 14px;
  z-index: 5;
  width: min(280px, 78vw);
  margin-top: 8px;
}


.tally-overlay .mijn-kaart {
  margin-bottom: 0;
}

.tally-flipcard .mijn-kaart-voor,
.tally-flipcard .mijn-kaart-achter {
  background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .25);
}

.tally-flipcard .achter-antwoorden {
  max-height: 220px;
}

.tally-naam-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .15);
  border-radius: var(--radius-klein);
  padding: 8px 10px;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: left;
}

.tally-naam-chip .vrijgeven-knop {
  margin-left: auto;
  color: #fff !important;
}

.host-hoek-link {
  position: fixed;
  top: calc(14px + var(--safe-top));
  left: 14px;
  z-index: 70;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
}

.host-hoek-link:hover {
  background: rgba(255, 255, 255, .18);
}

.host-hoek-link svg.lucide {
  margin: 0;
}

.host-toggle-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  cursor: pointer;
}

.host-toggle-rij input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: #fff;
}

/* ── Speler: hoek-linkje terug naar start ─────────────────────────── */
.speler-hoek-link {
  position: fixed;
  top: calc(14px + var(--safe-top));
  left: 14px;
  z-index: 70;
  width: 40px;
  height: 40px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(11, 95, 215, .12);
  border-radius: 50%;
  color: var(--inkt-zacht);
  box-shadow: var(--schaduw);
}

.speler-hoek-link:hover:not(:disabled) {
  transform: none;
  color: var(--blauw);
}

.speler-hoek-link svg.lucide {
  margin: 0;
}

.speler-hoek-link-rechts {
  left: auto;
  right: 14px;
  color: var(--blauw);
}

/* De host-knop toont ook een live telling (aantal spelers), dus die krijgt
   een pil-vorm i.p.v. de vaste ronde 40x40 van de andere hoekknop. */
#btn-host-hoek {
  width: auto;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  gap: 6px;
  font-weight: 800;
  font-size: 0.85rem;
}

#btn-host-hoek svg.lucide {
  margin: 0;
}

.host-mini-overlay {
  position: fixed;
  top: calc(60px + var(--safe-top));
  right: 14px;
  z-index: 69;
  width: min(300px, 82vw);
}

.host-mini-overlay .paneel h2 {
  font-size: 1rem;
}

/* ── Join: spelcode-invoer + inline scanknop ──────────────────────
   Nu er nog maar één ding nodig is om mee te doen (de spelcode — de kaart
   is niet meer nodig sinds persona's willekeurig toegewezen worden), is een
   los flip-vakje overkill. Gewoon een open invoerveld, met de scanner als
   klein icoontje ernaast: meteen duidelijk dat typen én scannen allebei kan. */
.spelcode-invoer-rij {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.spelcode-invoer-rij input[type="text"] {
  flex: 1;
  min-width: 0;
}

.spelcode-scan-knop {
  flex: none;
  width: auto;
  min-width: 64px;
  margin-top: 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-blauw);
  color: #fff;
  border-radius: var(--radius-klein);
}

.spelcode-scan-knop svg.lucide {
  width: 28px;
  height: 28px;
  margin-right: 0;
}

/* ── Join: checklist (spelcode + kaart mogen in elke volgorde) ─────
   Twee losse regels i.p.v. één subtiele statustekst, zodat meteen duidelijk
   is dat er twee losse dingen nodig zijn én dat scannen ergens iets heeft
   opgeleverd (groen vinkje + de gevonden waarde in plaats van de vage hint). */
.join-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.join-check-item {
  /* Nu puur een layout-container — de zichtbare stijl (achtergrond, rand,
     padding) zit op .check-flip-voor/-achter hieronder, want dit vakje kan
     nu ook omdraaien naar een invoerveld (zie .check-flip). */
}

/* ── Flip-vakjes: tik om te typen i.p.v. een aparte "typ het in"-knop ──
   Zelfde omdraai-mechaniek als .mijn-kaart elders in de app (perspective +
   rotateY + backface-visibility), alleen compact genoeg voor een rij in een
   checklist. Gebruikt door zowel de speler-joinflow als de host die zelf
   een kaart claimt. */
.check-flip {
  perspective: 1000px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.check-flip-inner {
  position: relative;
  width: 100%;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  transform-style: preserve-3d;
  display: grid;
}

.check-flip.geflapped .check-flip-inner {
  transform: rotateY(180deg);
}

.check-flip-voor,
.check-flip-achter {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-klein);
  box-sizing: border-box;
}

.check-flip:not(.geflapped) .check-flip-achter {
  position: absolute;
  inset: 0;
}

.check-flip.geflapped .check-flip-voor {
  position: absolute;
  inset: 0;
}

.check-flip-voor {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--blauw-licht);
  border: 1.5px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}

.check-flip-achter {
  transform: rotateY(180deg);
  background: var(--blauw-licht);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  cursor: default;
}

.check-flip-achter label {
  margin: 0;
  font-size: 0.68rem;
}

.check-flip-achter input[type="text"] {
  padding: 8px 10px;
  font-weight: 700;
}

.check-flip-tip {
  font-size: 0.72rem;
  color: var(--inkt-zacht);
  font-weight: 600;
}

.join-check-item .join-check-icoon-leeg {
  color: var(--inkt-zacht);
  opacity: .6;
  flex: none;
  width: 24px;
  height: 24px;
}

.join-check-item .join-check-icoon-vol {
  display: none;
  color: var(--groen);
  flex: none;
  width: 24px;
  height: 24px;
}

.join-check-item.klaar .check-flip-voor {
  background: var(--groen-licht);
  border-color: rgba(0, 200, 83, .35);
}

.join-check-item.klaar .join-check-icoon-leeg {
  display: none;
}

.join-check-item.klaar .join-check-icoon-vol {
  display: block;
}

.join-check-tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  text-align: left;
}

.join-check-tekst strong {
  font-size: 0.92rem;
  color: var(--inkt);
}

.join-check-tekst span {
  font-size: 0.8rem;
  color: var(--inkt-zacht);
  font-weight: 600;
}

.join-check-item.klaar .join-check-tekst span {
  color: var(--groen);
  font-weight: 800;
}

/* "Jouw kaart" is anders: zodra 'm gevonden is, vervangt een mini-kaart in
   de eigen kleur (zelfde ontwerptaal als de echte kaart, alleen zonder QR)
   de lege rij — dat IS de succesmelding, in plaats van er nog een losse
   previewbox onder te zetten. */
.join-check-item.kaart-gevonden .check-flip-voor {
  background: none;
  border-color: transparent;
  padding: 0;
}

.join-mini-kaart {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-klein);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.join-mini-kaart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .08);
  pointer-events: none;
}

.join-mini-kaart .join-mini-kaart-icoon {
  width: 28px;
  height: 28px;
  flex: none;
  stroke-width: 1.5;
  position: relative;
}

.join-mini-kaart-tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
  flex: 1;
  text-align: left;
  position: relative;
}

.join-mini-kaart-tekst strong {
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 800;
}

.join-mini-kaart-tekst span {
  font-size: 0.78rem;
  opacity: .85;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.join-mini-kaart-vinkje {
  flex: none;
  opacity: .9;
  position: relative;
}

.vraag-rij {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1.5px solid rgba(11, 95, 215, .08);
}

.vraag-rij input {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-klein);
}

.vraag-rij .pijlen {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vraag-rij .pijlen button {
  padding: 3px 7px;
  margin: 0;
  width: auto;
  background: var(--blauw-licht);
  color: var(--blauw);
  line-height: 0;
  box-shadow: none;
}

.vraag-rij .pijlen svg.lucide {
  width: 14px;
  height: 14px;
  margin: 0;
}

.vraag-rij .klein svg.lucide {
  margin: 0;
}

.spelcode-groot {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  background: var(--grad-blauw);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  margin: 8px 0;
}

.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.knoppenrij button,
.knoppenrij .btn-link {
  width: auto;
  flex: 1;
  min-width: 130px;
  margin-top: 0;
}

/* Claim-rij */
.claim-rij {
  padding: 8px 8px 8px 12px;
  border-left-width: 3px !important;
  border-left-style: solid;
}

.vrijgeven-knop {
  color: var(--rood) !important;
  background: transparent !important;
  padding: 4px 6px !important;
  box-shadow: none !important;
}

/* ── Print cards ──────────────────────────────────────────── */
.print-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.print-kaart {
  border-radius: 18px;
  color: #fff;
  padding: 20px 16px;
  text-align: center;
  break-inside: avoid;
  page-break-inside: avoid;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

.print-kaart .codenaam {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 6px 0 2px;
}

.print-kaart .omschrijving {
  font-size: 0.82rem;
  opacity: 0.86;
  min-height: 2.6em;
  line-height: 1.4;
}

.print-kaart .qr {
  background: #fff;
  display: inline-block;
  padding: 8px;
  border-radius: 10px;
  margin-top: 10px;
}

.print-kaart .kaartcode {
  font-family: var(--display);
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  margin-top: 6px;
  opacity: 0.85;
  font-weight: 700;
}

@media print {
  body {
    background: #fff;
  }

  .geen-print {
    display: none !important;
  }

  .wrap {
    max-width: none;
    padding: 0;
  }

  .print-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8mm;
  }
}

/* ── Print recap (uitslag delen/printen vanuit host.js & app.js) ────────
   Gebruikt door printvenster.js: een los popup-venster dat deze stylesheet
   linkt, dus hergebruikt dezelfde kleuren/fonts als de rest van de app i.p.v.
   een losse, dubbele stijl-set te onderhouden. */
.pr-pagina {
  max-width: 640px;
  margin: 24px auto;
  padding: 0 16px 48px;
}

.pr-print-knop {
  position: fixed;
  top: 16px;
  right: 16px;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

.pr-kop {
  background: var(--grad-blauw);
  border-radius: var(--radius);
  padding: 28px 26px 22px;
  text-align: center;
  color: #fff;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pr-kop img { height: 2rem; display: block; margin: 0 auto; }
.pr-kop-sub {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 12px 0 0;
  opacity: 0.95;
}
.pr-kop-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  opacity: 0.9;
}
.pr-spelcode {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .1em;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: 3px 12px;
}

.pr-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.pr-stat {
  background: var(--kaart, #fff);
  border-radius: var(--radius-klein);
  box-shadow: var(--schaduw);
  padding: 14px 8px;
  text-align: center;
}
.pr-stat-cijfer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--blauw);
}
.pr-stat-cijfer svg { width: 18px; height: 18px; stroke-width: 2.25; }
.pr-stat-label { display: block; font-size: 0.68rem; color: var(--inkt-zacht); margin-top: 3px; }

.pr-paneel {
  background: var(--kaart, #fff);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 22px 24px 16px;
  margin-top: 14px;
}
.pr-paneel h2, .pr-paneel h3.pr-titel {
  font-family: var(--display);
  font-size: 1.15rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pr-paneel h2 svg, .pr-titel svg { width: 20px; height: 20px; color: var(--blauw); stroke-width: 2; }
.pr-sub { color: var(--inkt-zacht); font-size: 0.82rem; margin: 4px 0 14px; }

.pr-lijst-2col { column-count: 2; column-gap: 22px; }
.pr-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #eee2f5;
  break-inside: avoid;
}
.pr-rank { width: 20px; flex: none; font-family: var(--display); font-weight: 700; color: var(--inkt-zacht); font-size: 0.82rem; }
.pr-rank.pr-medaille { font-size: 1.05rem; }
.pr-rij-icoon { width: 19px !important; height: 19px !important; color: var(--blauw); stroke-width: 1.75; flex: none; }
.pr-wie { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1 1 auto; }
.pr-nick { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-persona-naam { font-size: 0.66rem; color: var(--inkt-zacht); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-chip-streak {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.6rem; background: var(--blauw-licht); color: var(--blauw);
  border-radius: 999px; padding: 2px 7px; flex: none; white-space: nowrap;
}
.pr-chip-streak svg { width: 10px; height: 10px; stroke-width: 2.5; }
.pr-score { font-family: var(--display); font-weight: 700; font-size: 0.92rem; color: var(--blauw); flex: none; margin-left: auto; }
.pr-score small { font-size: 0.58rem; font-weight: 500; }

.pr-match-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #eee2f5;
  break-inside: avoid;
}
.pr-match-persoon {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.88rem; font-weight: 600;
  flex: 1 1 0; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-match-koppel { flex: none; color: var(--inkt-zacht); font-size: 0.78rem; }
.pr-match-pct { font-family: var(--display); font-weight: 700; font-size: 0.82rem; border-radius: 999px; padding: 3px 11px; flex: none; }

.pr-persona-hero {
  background: var(--grad-blauw);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
  color: #fff;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pr-persona-icoon-groot { width: 56px; height: 56px; color: #fff; stroke-width: 1.5; margin: 0 auto; display: block; }
.pr-persona-nick-groot { font-family: var(--display); font-weight: 700; font-size: 1.6rem; margin-top: 6px; }
.pr-rang-chips { display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pr-rang-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px; padding: 5px 13px; font-size: 0.76rem; font-weight: 600;
}
.pr-rang-chip svg { width: 12px; height: 12px; stroke-width: 2.5; }

.pr-beste-match { margin-top: 16px; background: var(--blauw-licht); border-radius: var(--radius-klein); padding: 12px 16px; text-align: center; }
.pr-beste-match .pr-label {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 0.72rem; color: var(--blauw-mid); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.pr-beste-match .pr-label svg { width: 12px; height: 12px; stroke-width: 2.5; }
.pr-beste-match .pr-waarde { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--blauw); margin-top: 4px; }

.pr-voet {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--grad-blauw);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 14px;
  color: #fff;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pr-voet img { width: 80px; height: 80px; display: block; background: #fff; border-radius: 10px; padding: 6px; }
.pr-voet-titel { font-family: var(--display); font-weight: 700; margin: 0 0 4px; font-size: 0.95rem; display: flex; align-items: center; gap: 7px; }
.pr-voet-titel svg { width: 16px; height: 16px; stroke-width: 2; }
.pr-voet-url { font-family: monospace; font-size: 0.8rem; opacity: 0.9; margin: 0; }

@media (max-width: 560px) {
  .pr-stats { grid-template-columns: repeat(2, 1fr); }
  .pr-lijst-2col { column-count: 1; }
}

@media print {
  @page { margin: 12mm; }
  .pr-pagina { margin: 0; max-width: none; padding: 0; }
  .pr-paneel, .pr-voet { break-inside: avoid; page-break-inside: avoid; }
  .pr-kop, .pr-voet, .pr-persona-hero { box-shadow: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .resultaat-pct {
    animation: popIn .4s cubic-bezier(.34, 1.56, .64, 1) both;
  }

  .resultaat-verdict-tekst {
    animation: popIn .4s .1s cubic-bezier(.34, 1.56, .64, 1) both;
  }

  @keyframes popIn {
    from {
      transform: scale(.7);
      opacity: 0;
    }

    to {
      transform: scale(1);
      opacity: 1;
    }
  }
}

/* ── Instructie Box (Details) ────────────────────────────── */
.ronde-instructie-box {
  background: var(--blauw-licht);
  color: var(--blauw);
  border-radius: var(--radius-klein);
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.ronde-instructie-box[open] {
  background: #f0f4ff;
  /* Lighter when open */
  box-shadow: inset 0 0 0 2px var(--blauw-licht);
}

.ronde-summary {
  list-style: none;
  /* Verbergt de standaard driehoek */
  padding: 14px 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.ronde-summary::-webkit-details-marker {
  display: none;
}

.ronde-summary span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ronde-summary .chevron {
  transition: transform 0.3s ease;
  opacity: 0.7;
}

.ronde-instructie-box[open] .ronde-summary .chevron {
  transform: rotate(180deg);
}

.ronde-uitleg-content {
  padding: 0 16px 16px 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #334155;
}

/* ── Taal-toggle ──────────────────────────────────────────
   Solide donkerpaarse achtergrond (i.p.v. transparant) zodat 'm zowel op de
   donkere welkomstsplash als op de lichte speler-schermen erna altijd goed
   leesbaar blijft — fixed, dus zichtbaar ongeacht welk scherm net toont. */
.taal-toggle {
  position: fixed;
  top: calc(12px + var(--safe-top));
  right: calc(12px + var(--safe-right));
  z-index: 300;
  display: flex;
  gap: 2px;
  background: var(--blauw);
  border-radius: var(--radius-pill);
  padding: 3px;
  box-shadow: var(--schaduw-lg);
}

.taal-toggle button {
  flex: none;
  width: auto;
  margin-top: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.taal-toggle button.actief {
  background: #fff;
  color: var(--blauw);
}

/* ── Site-footer ──────────────────────────────────────────
   Gebruikt currentColor/opacity i.p.v. vaste kleuren, zodat 'm zowel op de
   donkere welkomstsplash (wit op paars) als op lichte pagina's (donker op
   wit) er vanzelf goed uitziet zonder aparte thema-varianten. */
.site-footer {
  padding: 20px 16px;
  opacity: 0.55;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Body als flex-kolom zodat .wrap de resterende ruimte opvult en de footer
   altijd onderaan het scherm blijft staan bij korte content, i.p.v. er met
   een gat onder te blijven hangen — bij lange content schuift 'm gewoon
   normaal mee met de rest. */
body.footer-onderaan {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

body.footer-onderaan .wrap {
  flex: 1 0 auto;
}

.ronde-uitleg-content p {
  margin-top: 0;
  margin-bottom: 12px;
}

/* =========================================================================
   AI-modus (Beta) — host.html stap 1
   ========================================================================= */

/* Beta badge on the keuzekaart */
.host-keuzekaart-beta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 1px 6px rgba(168, 85, 247, 0.45);
}

.host-keuzekaart.gekozen .host-keuzekaart-beta {
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  box-shadow: 0 1px 6px rgba(124, 58, 237, 0.4);
}

/* AI config panel: API key + prompt inputs */
.ai-config-veld {
  margin-bottom: 14px;
}

.ai-config-veld a {
  color: var(--wit);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 2px;
}

.ai-config-veld a:hover {
  text-decoration-color: var(--wit);
}

.ai-config-veld label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 5px;
}

.ai-config-veld input[type="text"],
.ai-config-veld input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}

/* Preview box: generated question pairs before game start */
.ai-preview-box {
  margin-top: 16px;
  border-radius: var(--radius);
  background: rgba(168, 85, 247, 0.1);
  border: 1.5px solid rgba(168, 85, 247, 0.25);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: ai-fade-in 0.35s ease both;
}

.ai-preview-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
}

.ai-preview-pair .ai-opt {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .09);
  text-align: center;
  color: #fff;
}

.ai-preview-pair .ai-vs {
  font-size: 0.7rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .45);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

@keyframes ai-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Shimmer loading state while Gemini is thinking */
@keyframes ai-shimmer {
  0%   { background-position: -300px 0; }
  100% { background-position:  300px 0; }
}

.ai-shimmer-box {
  border-radius: var(--radius);
  height: 100px;
  margin-top: 16px;
  background: linear-gradient(
    90deg,
    rgba(168, 85, 247, 0.08) 25%,
    rgba(168, 85, 247, 0.22) 50%,
    rgba(168, 85, 247, 0.08) 75%
  );
  background-size: 600px 100%;
  animation: ai-shimmer 1.4s infinite linear;
  border: 1.5px solid rgba(168, 85, 247, 0.2);
}

/* Daily cap warning banner */
.ai-cap-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(251, 191, 36, 0.12);
  border: 1.5px solid rgba(251, 191, 36, 0.3);
  color: rgba(255, 255, 255, .85);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
  margin-top: 12px;
}

.ai-cap-banner svg.lucide {
  flex-shrink: 0;
  color: rgb(251, 191, 36);
  margin-top: 1px;
}

/* Generate button */
.btn-ai-genereer {
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.35) 0%, rgba(236, 72, 153, 0.25) 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  color: #fff;
}

.btn-ai-genereer:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.5) 0%, rgba(236, 72, 153, 0.4) 100%);
  border-color: rgba(168, 85, 247, 0.7);
  transform: translateY(-1px);
}

.btn-ai-genereer:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}