/* Het Altaar — groot scherm met alle vlammen (design docs/plans/2026-09-19-altaar-design.md).
   Kapel-stijl (docs/plans/2026-09-18-telefoon-kapel-brief.md), maar voor een tv/laptop op
   1920x1080 (primair) en 1280x720, niet voor een telefoon in de hand. Geen bediening: dit scherm
   wordt van een afstand bekeken, niet aangeraakt (behalve het kleine "Verlaten"-hoekje). */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* dit scherm scrollt nooit — alles past op één beeld */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0f0d1a;
  color: #eee;
  position: relative;
}

.hidden { display: none !important; }

/* ---------- scènebeeld: fullscreen achtergrond, cross-fade tussen twee lagen ---------- */

#achtergrond {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0f0d1a;
}
.scene-laag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms ease;
}
.scene-laag.scene-actief { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .scene-laag { transition: none; }
}

/* Donker verloop over de onderste helft (Stijn, scènebeelden): houdt de vlammen/tellers/namen
   leesbaar op elk sfeerbeeld. Iets donker aan de bovenrand ook, zodat de titel er altijd op wint.
   Geldt voor lobby/spel/uitslag — de intro-fase (hieronder) krijgt een veel lichter verloop. */
#scene-verloop {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 9, 18, 0.55) 0%,
    rgba(10, 9, 18, 0.35) 22%,
    rgba(10, 9, 18, 0.55) 48%,
    rgba(10, 9, 18, 0.86) 72%,
    rgba(10, 9, 18, 0.96) 100%
  );
}
/* Intro (Stijn-correctie 2026-09-19): geen vlammen te beschermen, dus de plaat op volle sterkte —
   alleen een lichte vignet aan de randen (10-15%) plus een zacht verloop dat ALLEEN het onderste
   derde bedekt (transparant tot 66%, ~70% donker onderaan), zodat de tekst daar leesbaar is zonder
   de rest van de plaat te doven. */
#scene-verloop.scene-verloop-licht {
  background:
    linear-gradient(to bottom, transparent 0%, transparent 66%, rgba(10, 9, 18, 0.72) 100%),
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.15) 100%);
}

/* ---------- layout ---------- */

#app {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.view { width: 100%; height: 100%; }

/* ---------- Verlaten + fout ---------- */

#hoek-knoppen {
  position: fixed;
  top: 1.2rem;
  right: 1.4rem;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
  /* De knoppen vervagen na 3 s zonder muisbeweging en komen terug zodra de muis beweegt (zie
     toonHoekknoppenEven in altaar.js); vóór de eerste klik blijven ze staan voor "Klik voor geluid". */
  transition: opacity 400ms ease;
}
#hoek-knoppen.stil { opacity: 0; pointer-events: none; }
#verlaten-knop, #volscherm-knop, #geluid-knop {
  background: rgba(22, 33, 62, 0.75);
  color: #aab;
  border: 1px solid rgba(170, 170, 187, 0.35);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
}
#verlaten-knop:hover, #volscherm-knop:hover, #geluid-knop:hover { color: #eee; border-color: #aab; }
/* Geluid uit: iets gedempter, zodat de stand ook zonder de tekst te lezen herkenbaar is. */
#geluid-knop.geluid-uit { color: #776b8a; border-color: rgba(119, 107, 138, 0.4); }
/* Geluidsknop: luidsprekericoon met drie standen (zie bijwerkenGeluidKnop in altaar.js). */
#geluid-knop { display: inline-flex; align-items: center; gap: 0.45rem; }
#geluid-knop .geluid-icoon { flex: none; }
#geluid-knop .geluid-icoon-kruis { display: none; }
/* Uit, én vóór de eerste klik (er klinkt dan nog niets): het icoon met kruis. */
#geluid-knop.geluid-uit .geluid-icoon-golven, #geluid-knop.geluid-wacht .geluid-icoon-golven { display: none; }
#geluid-knop.geluid-uit .geluid-icoon-kruis, #geluid-knop.geluid-wacht .geluid-icoon-kruis { display: block; }
/* Na de eerste klik alleen het icoon; het label blijft voor schermlezers. */
#geluid-knop:not(.geluid-wacht) .geluid-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#geluid-knop:not(.geluid-wacht) { padding: 0.4rem 0.7rem; }
/* Vóór de eerste klik: goud en pulserend, zodat het opvalt dat er geklikt moet worden. */
#geluid-knop.geluid-wacht { color: #f2b25a; border-color: rgba(242, 178, 90, 0.7); animation: geluid-puls 1.8s ease-in-out infinite; }
@keyframes geluid-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 178, 90, 0.45); }
  50% { box-shadow: 0 0 0 7px rgba(242, 178, 90, 0); }
}
@media (prefers-reduced-motion: reduce) { #geluid-knop.geluid-wacht { animation: none; } }

#fout-balk {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: #f4c430;
  color: #1a1a2e;
  text-align: center;
  font-weight: 600;
  padding: 0.6rem 1rem;
}

/* ---------- Start ---------- */

#start-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 2rem;
}
#start-view h1 {
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 600;
  font-size: 3.4rem;
  color: #f2b25a;
  text-shadow: 0 0 20px rgba(255, 220, 150, 0.4);
}
.start-blokken {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.start-blok {
  background: rgba(22, 33, 62, 0.72);
  border: 1px solid rgba(242, 178, 90, 0.18);
  border-radius: 14px;
  padding: 1.8rem 2.2rem;
  width: 22rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.start-blok h2 {
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: #eee;
}
.start-blok select,
.start-blok input {
  min-height: 48px;
  border-radius: 8px;
  border: 1px solid #3a3552;
  background: #14121f;
  color: #eee;
  padding: 0.6rem 0.8rem;
  font-size: 1.05rem;
}
.start-blok input::placeholder { color: #6e6485; }
.knop-primair,
.knop-secundair {
  min-height: 48px;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
/* Contrast-fix (design critique 2026-09-20 punt 5): #eee op #e94560 kwam niet aan WCAG AA
   (4.5:1); crème-goud (#fff3d0) op een iets donkerder duivel-rood (#b8323f) haalt ≈5.3:1. */
.knop-primair { background: #b8323f; color: #fff3d0; }
.knop-primair:hover { background: #9c2735; }
.knop-primair:disabled { background: #7a1f2b; color: #cfc9dd; cursor: default; }
.knop-secundair { background: #0f3460; color: #eee; }
.knop-secundair:hover { background: #133e73; }
.fout-tekst { color: #ff6b6b; font-size: 0.95rem; text-align: center; }

/* ---------- Intro: scènebeeld zonder vlammen ---------- */

#intro-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Onderste derde van het scherm (Stijn-correctie 2026-09-19): laat het bovenste tweederde van de
     plaat vrij; titel + instructie staan op het lichte verloop hierboven, niet in het midden. */
  justify-content: flex-end;
  text-align: center;
  padding: 2rem 4rem 4.5rem;
  gap: 1.1rem;
  animation: altaar-fade-in 900ms ease both;
}
@media (prefers-reduced-motion: reduce) { #intro-view { animation: none; } }
#intro-titel {
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 600;
  /* Leesbaar van 3-4 meter (tv), Stijn: ≈7vw (≈134px op 1920) — clamp houdt 1280 en 1920 beide
     kloppend zonder een losse media-query. */
  font-size: clamp(7.5rem, 11vw, 13.5rem);
  line-height: 1.05;
  max-width: 92%;
  text-wrap: balance;
  color: #f2b25a;
  text-shadow: 0 0 26px rgba(255, 220, 150, 0.5);
}
#intro-tekst {
  font-size: clamp(1.9rem, 2.4vw, 2.9rem);
  color: #f5ecd7;
  max-width: 70%;
  /* Max 2 regels (Stijn): een derde regel wordt afgekapt met "…" i.p.v. het onderste derde te vullen. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---------- Voortgang: finale-beschuldiging (intro) en stemfase (spel) ----------
   Gedeelde stijl (design critique 2026-09-20 punt 1) voor "9 van 13 hebben gewezen."/"7 van 11
   hebben gestemd.": onder de intro-titel, of in het vlammen-scherm op de plek waar anders de
   klok staat (zie .klok-blok, hergebruikt via #vlammen-voortgang-blok). */
.voortgang-tekst {
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 3vw, 3.6rem);
  color: #f2b25a;
  text-shadow: 0 0 20px rgba(255, 220, 150, 0.4);
}

@keyframes altaar-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Regisseur: titel-binnenkomst bij een scènewissel (design
   2026-09-21-altaar-geluid-design.md, "Regisseur") ----------
   altaar.js zet deze klassen (na een reflow, zodat de animatie altijd opnieuw start) op de titel
   die van scène wisselt, en op de instructietekst 300ms later. */
/* De titel vliegt van rechts in op de whoosh (Stijn 2026-09-21), ease-out-quint, geen overshoot. */
@keyframes regisseur-titel-in {
  from { opacity: 0; transform: translateX(55vw) scale(1.12); letter-spacing: 0.18em; }
  to { opacity: 1; transform: translateX(0) scale(1); letter-spacing: normal; }
}
.regisseur-titel-anim {
  animation: regisseur-titel-in 850ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.regisseur-tekst-anim {
  animation: regisseur-titel-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 300ms;
}
/* Respecteer prefers-reduced-motion (design: "dan alleen fade, geen schaal"). */
@media (prefers-reduced-motion: reduce) {
  .regisseur-titel-anim { animation: altaar-fade-in 400ms ease both; }
  .regisseur-tekst-anim { animation: altaar-fade-in 400ms ease both; animation-delay: 200ms; }
}

/* ---------- Lobby ---------- */

#lobby-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  padding: 2rem 3rem;
}
#lobby-titel {
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 600;
  font-size: clamp(3.2rem, 4vw, 4.8rem);
  color: #f2b25a;
  text-shadow: 0 0 18px rgba(255, 220, 150, 0.4);
  text-align: center;
}
.lobby-rij {
  display: flex;
  align-items: flex-start;
  gap: 3.5rem;
  background: rgba(15, 13, 26, 0.55);
  border-radius: 18px;
  padding: 2rem 2.6rem;
}
.lobby-qr-blok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}
#lobby-qr {
  width: 300px;
  height: 300px;
  border-radius: 10px;
  background: #16213e;
  border: 1px solid rgba(242, 178, 90, 0.25);
}
#lobby-code {
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', serif;
  font-weight: 600;
  font-size: clamp(4.6rem, 6vw, 7.3rem);
  letter-spacing: 0.15em;
  color: #f5ecd7;
}
#lobby-url {
  font-size: 0.85rem;
  color: #9a93aa;
}
.lobby-spelers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  max-width: 46rem;
  align-content: flex-start;
}
.speler-chip {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: #16213e;
  border: 1px solid #3a3552;
  border-radius: 999px;
  /* em, niet rem: schaalt automatisch mee met de vw-gebaseerde font-size hieronder ("bijpassende
     padding", Stijn). */
  padding: 0.45em 1em;
  font-size: clamp(1.2rem, 1.6vw, 2rem);
  color: #9a93aa;
  transition: color 400ms ease, border-color 400ms ease, background 400ms ease;
}
.speler-chip.verbonden {
  color: #f5e8c8;
  border-color: #f2b25a;
  background: #221f33;
}
.speler-bolletje {
  width: 0.5em;
  height: 0.5em;
  border-radius: 999px;
  background: #6a6478;
  flex-shrink: 0;
}
.speler-chip.verbonden .speler-bolletje {
  background: #3fd47a;
  box-shadow: 0 0 8px rgba(63, 212, 122, 0.7);
}
#lobby-overname {
  font-size: clamp(1.2rem, 1.6vw, 2rem);
  color: #f5e8c8;
  text-align: center;
}
#lobby-overname strong {
  color: #f2b25a;
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', serif;
  font-size: 1.3em;
  letter-spacing: 0.1em;
}

/* ---------- Klok bij stemming-overleg ("Klok bij stemming") ----------
   Vervangt tijdens het overleg van een stemming de scènetitel: groot, gecentreerd boven het
   (gedimde) vlammenraster. `position: fixed` zodat de plek onafhankelijk is van `.scene-kop`
   (die de titel normaal bovenaan houdt) en de klok altijd in het midden van het scherm staat. */
.klok-blok {
  position: fixed;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  opacity: 1;
  transition: opacity 700ms ease;
}
.klok-blok.klok-verdwijnen { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .klok-blok { transition: none; }
}
.klok {
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 600;
  /* ≈12vw (Stijn: "groot de timer in beeld") — clamp houdt 1280 en 1920 beide kloppend. */
  font-size: clamp(9rem, 12vw, 14.5rem);
  line-height: 1;
  color: #f2b25a;
  text-shadow: 0 0 34px rgba(255, 220, 150, 0.55);
  font-variant-numeric: tabular-nums;
  transition: color 400ms ease, text-shadow 400ms ease;
}
/* Laatste 10 seconden: duivel-rood met een lichte puls (uit bij reduced motion). */
.klok.klok-kritiek {
  color: #e94560;
  text-shadow: 0 0 34px rgba(233, 69, 96, 0.6);
  animation: klok-puls 1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .klok.klok-kritiek { animation: none; }
}
@keyframes klok-puls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.klok-tekst {
  /* Gelijk aan de intro-instructie (design critique 2026-09-20 punt 5, Stijn: zelfde grootte). */
  font-size: clamp(1.9rem, 2.4vw, 2.9rem);
  color: #f5ecd7;
  max-width: 60vw;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
/* Gepauzeerde punten-timer (design 2026-09-21 "punten-timer-bediening"): dezelfde klok, gedempt en
   stilstaand — geen kritiek-puls, geen aftellen. */
.klok.klok-gepauzeerd { opacity: 0.6; }
.klok-gepauzeerd-label {
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
  color: #cfc9dd;
  opacity: 0.8;
  letter-spacing: 0.04em;
}

/* ---------- Vlammen + Uitslag: gedeeld raster ---------- */

#vlammen-view,
#uitslag-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.scene-kop {
  /* Design critique 2026-09-20 punt 4: 50% liet een lege band tussen titel en vlammen — 38% geeft
     `.vlammen-blok` (flex: 1, de rest, hieronder) meer ruimte om de nu grotere vlammen verticaal
     te centreren zonder dat er onder de titel een leeg gat overblijft. */
  flex: 0 0 38%;
  padding: 2.4rem 3rem 0;
  text-align: center;
}
#vlammen-titel {
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 600;
  font-size: clamp(3.2rem, 4vw, 4.8rem);
  color: #f2b25a;
  text-shadow: 0 0 20px rgba(255, 220, 150, 0.4);
}
#uitslag-oordeel {
  padding: 2.2rem 4rem 0;
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 2.4vw, 2.9rem);
  color: #f5ecd7;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
#uitslag-oordeel .oordeel-winnaar { color: #f2b25a; }
#uitslag-oordeel .oordeel-winnaar-duivel { color: #e94560; }

/* ---------- Uitslag: held(en) in het midden (design 2026-09-21, "finale-winnaar-in-het-licht")
   ----------
   Spiegelt de mockup (scratchpad mock-oordeel-ref, .alt .held): de winnaar(s) groot tussen de
   oordeelzin en het bestaande vlammenraster (dat nu alleen de OVERIGE finalisten + geesten toont,
   zie renderUitslag in altaar.js) — .vlammen-blok blijft flex:1 en meet zijn eigen beschikbare
   hoogte, dus die krimpt vanzelf mee als deze rij ruimte inneemt; geen aparte JS-fit nodig voor
   maximaal twee, altijd-aanwezige held-items. De verkoling gebruikt dezelfde brandrand-mask-
   klassen (.vlam-goud/.vlam-verkoold/.vlam-verkoold-clip/.vlam-verkoold-brand) als de kleine
   vlammen hieronder, alleen op een grotere, in JS berekende maat (altaar.js#heldVlamHoogte). */
#uitslag-helden {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}
.helden-rij {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3rem;
  padding: 0.6rem 3rem 0;
}
.helden-rij-duo { gap: 2.2rem; }
.held-item { display: flex; flex-direction: column; align-items: center; }
.held-vlam-wrap { position: relative; isolation: isolate; }
/* lichtkrans achter de vlam: goud bij een morele winst, rood bij een strategische — precies de
   twee kleuren uit de mockup (.held .vlam::before/.held.duivel .vlam::before). */
.held-vlam-wrap::before {
  content: '';
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 220, 150, 0.42), transparent 70%);
  z-index: -1;
}
.held-item-duivel .held-vlam-wrap::before {
  background: radial-gradient(closest-side, rgba(233, 69, 96, 0.3), transparent 70%);
}
.held-vlam-scene { isolation: isolate; }
/* strategische held: de klauw achter de vlam, groter en prominenter dan het kleine dienaar-badge
   op de vlammen hieronder (.vlam-klauw-badge) — zelfde aanpak als de mockup se .held .klauw. */
.held-klauw {
  position: absolute;
  left: 50%;
  top: 78%;
  width: 118%;
  height: 52%;
  object-fit: contain;
  object-position: top center;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, black 0, black 45%, transparent 85%);
  mask-image: linear-gradient(to bottom, black 0, black 45%, transparent 85%);
  z-index: -1;
  pointer-events: none;
}
.held-naam {
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 3.2vw, 4rem);
  color: #fff3d0;
  margin-top: 0.5rem;
  text-shadow: 0 0 20px rgba(255, 220, 150, 0.45);
  text-align: center;
  max-width: 26vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.helden-rij-duo .held-naam { font-size: clamp(1.8rem, 2.5vw, 3.1rem); }
.held-item-duivel .held-naam { color: #e94560; text-shadow: 0 0 20px rgba(233, 69, 96, 0.5); }
.held-rol {
  font-size: clamp(1rem, 1.3vw, 1.6rem);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  color: #f2b25a;
  margin-top: 0.35rem;
}
.held-item-duivel .held-rol { color: #e94560; }

.vlammen-blok {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Gecentreerd binnen de onderste helft (Stijn: "lager-midden"), niet tegen de onderrand geplakt
     — er is nu ruimte voor de twee getallen onder elke vlam. */
  justify-content: center;
  padding: 1rem 3rem 2.4rem;
  min-height: 0;
}

.vlammen-raster {
  /* CSS grid i.p.v. flex-wrap (design critique 2026-09-20 punt 4): met een vast aantal kolommen
     verdeelt de browser de laatste rij automatisch evenwichtig (bv. 13 spelers over 2 rijen van 7 kolom
     -> 7+6, niet de ongelijke 12+1 die flex-wrap gaf). JS (altaar.js `vlammenKolomAantal`) berekent
     het aantal kolommen dat past en zet dat als --vlam-kolommen; bij genoeg breedte is dat gewoon
     het aantal spelers (alles op één rij, zoals altijd op 1920). */
  display: grid;
  grid-template-columns: repeat(var(--vlam-kolommen, 20), max-content);
  justify-content: center;
  align-items: end;
  gap: 1.1rem 0.9rem;
  max-width: 100%;
  /* --vlam-h komt van JS: 190px (≤8 spelers) of 150px (design §Vlammen) — vaste stand, geen
     JS-fitting van de hoogte zelf. */
}

.vlam-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Geen vaste breedte: de kolom is zo breed als de vlam óf de getallen eronder nodig hebben
     (welke van de twee breder is, via het gewone box-model) — bij vw-gebaseerde tekst is dat niet
     langer vooraf te berekenen. */
}
.vlam-scene {
  position: relative;
  height: var(--vlam-h);
  /* Expliciet, NIET 100% van `.vlam-item` — die kolom is soms breder dan de vlam zelf (min-width
     voor de getallen eronder); een 100%-breedte zou de vlam-afbeelding uitrekken. */
  width: calc(var(--vlam-h) * 250 / 480);
  filter: drop-shadow(0 0 18px rgba(255, 220, 150, 0.35));
}
/* Design critique 2026-09-20 punt 4: volledig verkleurd (grayscale 1) en iets minder gedimd dan
   voorheen (.55 i.p.v. .45) — het grijze bolletje-badge is vervangen door een rookwolkje boven de
   vlam (.vlam-geest-rook) plus het label "geest" onder de getallen/naam (.vlam-geest-label). */
.vlam-scene.vlam-geest {
  opacity: 0.55;
  filter: grayscale(1) drop-shadow(0 0 6px rgba(200, 200, 210, 0.25));
}
.vlam-goud,
.vlam-verkoold {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Zelfde temperende filter als op de telefoon (public/player/index.html,
   #zb-vlam-verkoold/.zielen-vlam-verkoold): zonder dit oogt het verkoolde deel feller rood dan het
   kaarslicht-register toestaat. */
.vlam-verkoold {
  filter: brightness(0.46) contrast(1.28) saturate(0.55);
}
.vlam-verkoold-clip {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('/play/assets/kapel/ziel-goud.png');
  mask-image: url('/play/assets/kapel/ziel-goud.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.vlam-verkoold-brand {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('/play/assets/kapel/brandrand.png');
  mask-image: url('/play/assets/kapel/brandrand.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  transition: -webkit-mask-position 600ms ease-out, mask-position 600ms ease-out, opacity 600ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .vlam-verkoold-brand { transition: none; }
}

/* Geest-rookwolkje (design critique 2026-09-20 punt 4, vervangt het grijze bolletje): drie zachte
   overlappende cirkels boven de vlam, geen nieuwe afbeelding (design "Niet doen"). Correctieronde
   2026-09-20: minder ver naar boven (-12% i.p.v. -22%) — dit is een `position: absolute`-overlay
   die NIET meetelt in de flex-hoogte van `.vlam-item`, dus bij een te grote uitsteek kon hij bij
   een strak gecentreerd raster over `.scene-kop` (de titel/scèneplaat) heen steken. */
.vlam-geest-rook {
  position: absolute;
  top: -12%;
  left: 50%;
  transform: translateX(-50%);
  width: 56%;
  height: 26%;
  pointer-events: none;
}
.vlam-geest-rook span {
  position: absolute;
  bottom: 0;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(215, 210, 228, 0.6), rgba(215, 210, 228, 0) 72%);
}
.vlam-geest-rook span:nth-child(1) { left: 2%; width: 52%; height: 52%; }
.vlam-geest-rook span:nth-child(2) { left: 28%; width: 68%; height: 68%; bottom: 22%; }
.vlam-geest-rook span:nth-child(3) { left: 12%; width: 42%; height: 42%; bottom: 44%; }

/* Geest-label: kleine kapitalen onder de getallen (fase 'spel') of onder de naam (fase 'uitslag'). */
.vlam-geest-label {
  display: block;
  margin-top: 0.3rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: #b7b2c4;
  font-size: clamp(0.7rem, 1vw, 1.2rem);
}

.vlam-klauw-badge {
  position: absolute;
  right: -24%;
  bottom: -16%;
  width: 62%;
  height: auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.9));
}

.vlam-naam {
  margin-top: 0.6rem;
  font-size: clamp(1rem, 1.3vw, 1.6rem);
  color: #cfc9dd;
  text-align: center;
  max-width: clamp(7rem, 9vw, 11rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Extra ruimte boven de naam bij een Dienaar: de klauw-badge hangt onder-rechts van de vlam uit
   (zie .vlam-klauw-badge) en botste anders met de nu grotere naam-tekst. */
.vlam-item-dienaar .vlam-naam { color: #f5e8c8; margin-top: 2rem; }
.vlam-dienaar-label {
  font-size: clamp(0.7rem, 1vw, 1.2rem);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: #e94560;
  font-weight: 600;
}

/* ---------- Groepsvlam (fase 'spel', design 2026-09-21-altaar-groepsvlam-design.md) ----------
   Vervangt het vlammenraster tijdens het spel: één grote vlam (maat in JS, `groepsvlamHoogte` in
   altaar.js, hergebruikt de brandrand-verkoling van .vlam-scene/.vlam-verkoold-brand hierboven),
   daaronder de twee groepstotalen groot en gestapeld — zelfde stapelpatroon als de vroegere
   per-vlam-getallen (waarde erboven, label eronder in kleine kapitalen), alleen op groepsschaal. */
.groepsvlam {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.groepsvlam-getallen {
  margin-top: 1.6rem;
  display: flex;
  gap: 3.2rem;
  justify-content: center;
}
.groepsvlam-getal-groep {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}
.groepsvlam-getal-waarde {
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 600;
  font-size: clamp(3rem, 4.6vw, 6rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.groepsvlam-getal-label {
  font-size: clamp(1rem, 1.5vw, 1.9rem);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: #cfc9dd;
  opacity: 0.85;
  white-space: nowrap;
}
.groepsvlam-getal-goud { color: #f2b25a; text-shadow: 0 0 14px rgba(255, 220, 150, 0.45); }
.groepsvlam-getal-rood { color: #e94560; text-shadow: 0 0 14px rgba(233, 69, 96, 0.45); }

/* ---------- kleinere stand: 1280x720 en smaller ----------
   De meeste tekst schaalt inmiddels met vw/clamp hierboven (Stijn: "letters mogen groter", op
   3-4 meter tv-afstand) en heeft dus geen losse override meer nodig op deze breedte. Wat overblijft
   is puur layout (QR-pixelgrootte, gaps, paddings) — geen font-size-regels meer. */

@media (max-width: 1366px), (max-height: 800px) {
  .start-blok { width: 19rem; padding: 1.4rem 1.7rem; }
  #lobby-qr { width: 220px; height: 220px; }
  .lobby-rij { gap: 2.2rem; padding: 1.4rem 1.8rem; }
  .lobby-spelers { max-width: 34rem; }
  #uitslag-oordeel { padding: 1.5rem 2.5rem 0; }
  .helden-rij { gap: 2rem; padding: 0.4rem 2rem 0; }
  .helden-rij-duo { gap: 1.4rem; }
  .vlammen-raster { gap: 0.9rem 1.1rem; }
  .vlammen-blok { padding: 1rem 1.5rem 1.8rem; }
}

/* ---------- Onthulling als ceremonie op het altaar (design 2026-09-21-onthulling-ceremonie-design.md) ----------
   Vervangt tijdelijk #vlammen-view (fase 'spel' + beeld.onthulling): de namen komen één voor één
   groot in het midden, de veilige rij bouwt zich onderaan op, een stilte met een donker pulserend
   scherm, dan de afvaller(s) in rood met een klauw — zie renderOnthulling in altaar.js. */

#onthulling-view { position: relative; }

/* Kleine, gedimde groepsvlam op de achtergrond (design: "de groepsvlam flakkert" bij een afvaller).
   Hergebruikt dezelfde groepsvlamHtml als #vlammen-view, alleen kleiner en vaster gepositioneerd. */
.onthulling-vlam-achter {
  position: fixed;
  top: 6%;
  left: 50%;
  transform: translateX(-50%) scale(0.4);
  transform-origin: top center;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}
.onthulling-vlam-achter.onthulling-vlam-flicker {
  animation: onthulling-vlam-flikker 500ms ease-out;
}
@keyframes onthulling-vlam-flikker {
  0%, 100% { opacity: 0.5; }
  20% { opacity: 0.1; }
  40% { opacity: 0.75; }
  60% { opacity: 0.2; }
  80% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .onthulling-vlam-achter.onthulling-vlam-flicker { animation: none; }
}

/* Donkerrode flits (design: "het scherm flitst kort donkerrood") bij elke afvaller-reveal. */
.onthulling-flits {
  position: fixed;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(233, 69, 96, 0.5) 0%, rgba(90, 8, 20, 0.4) 55%, transparent 85%);
}
.onthulling-flits.onthulling-flits-actief {
  animation: onthulling-flits-anim 600ms ease-out;
}
@keyframes onthulling-flits-anim {
  0% { opacity: 0; }
  15% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .onthulling-flits.onthulling-flits-actief { animation: altaar-fade-in 200ms ease; opacity: 0.4; }
}

/* Stilte-fase (design: "een donker pulserend scherm"): dekt de achtergrondplaat + groepsvlam af,
   onder de tekst maar boven de flits/vlam-achter. */
#onthulling-view.onthulling-stilte-actief::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  background: #05040a;
  animation: onthulling-donker-puls 2s ease-in-out infinite;
}
@keyframes onthulling-donker-puls {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
  #onthulling-view.onthulling-stilte-actief::before { animation: none; opacity: 0.6; }
}

.onthulling-midden {
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: min(90vw, 64rem);
  text-align: center;
}

.onthulling-naam {
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 600;
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: 1.1;
}
.onthulling-naam-veilig {
  color: #f2b25a;
  text-shadow: 0 0 34px rgba(255, 220, 150, 0.55);
}
.onthulling-naam-afvaller {
  color: #e94560;
  text-shadow: 0 0 34px rgba(233, 69, 96, 0.6);
}
/* Klauw achter de naam (design), zelfde badge-plaatje als de Dienaar-vlam elders — genegeerd zonder
   drama als het bestand ontbreekt (leeg pseudo-element, geen kapotte-afbeelding-icoon). */
.onthulling-naam-afvaller::after {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.35em;
  vertical-align: middle;
  background-image: url('/play/assets/kapel/klauw-onder.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* Zelfde keyframe als de regisseur-titel (design: "zelfde keyframes, kortere duur 500 ms"). */
.onthulling-naam-anim {
  animation: regisseur-titel-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .onthulling-naam-anim { animation: altaar-fade-in 300ms ease both; }
}

.onthulling-stilte {
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 4vw, 4rem);
  color: #d8d0e6;
  animation: onthulling-stilte-tekst-puls 2s ease-in-out infinite;
}
@keyframes onthulling-stilte-tekst-puls {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .onthulling-stilte { animation: none; }
}

.onthulling-rij {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  width: min(92vw, 72rem);
}
/* Veilige rij: kleine naamplaatjes onderaan, bouwt zich stap voor stap op — zelfde pil-stijl als de
   lobby-spelerchips. */
.onthulling-rij-veilig {
  bottom: 4%;
}
.onthulling-rij-veilig .onthulling-pil {
  display: inline-flex;
  align-items: center;
  background: #16213e;
  border: 1px solid #f2b25a;
  border-radius: 999px;
  padding: 0.4em 1em;
  font-size: clamp(1.1rem, 1.5vw, 1.8rem);
  color: #f5e8c8;
}
/* Afvallers-rij: alleen gevuld in het eindbeeld met meer dan één afvaller (elke afvaller komt er
   tijdens zijn eigen stap al los bij te staan als .onthulling-naam) — dan groot en rood, in het
   midden waar de laatste naam net stond. */
.onthulling-rij-afvallers {
  top: 42%;
  transform: translate(-50%, -50%);
  gap: 1.2rem 2rem;
}
.onthulling-rij-afvallers .onthulling-afvaller-groot {
  font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 600;
  font-size: clamp(3rem, 6vw, 6rem);
  color: #e94560;
  text-shadow: 0 0 34px rgba(233, 69, 96, 0.6);
}
.onthulling-rij-afvallers .onthulling-afvaller-groot::after {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.3em;
  vertical-align: middle;
  background-image: url('/play/assets/kapel/klauw-onder.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---------- De Kroniek (design docs/plans/2026-10-03-kroniek-design.md) ----------
   Eén fullscreen canvas boven de kapelachtergrond (#achtergrond, z 0) en #app (z 1), onder de
   hoekknoppen (z 10) en de foutbalk (z 20): verlaten en geluid blijven bedienbaar. Het donkere vlak
   tekent de canvas zelf, zodat de lijnen erop gloeien. */
#kroniek {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 5;
}