/* =========================================================================
   Surprise Weekend 2026 - Scorebord
   Mobile-first. Kleurthema "Sulfuurbaden": donker petrolblauw met turquoise
   (de koepels), koper (de daken) en zwavelgeel (de bronnen) als accenten.
   Let op: dit bestand is publiek opvraagbaar, ook met het slot erop, want de
   slotpagina heeft het nodig. Geen bestemming of andere verrassing in de
   commentaren zetten.
   ========================================================================= */

:root {
    --bg:            #0a1a1e;
    --bg-glow:       #0e3a42;
    --surface:       #12282e;
    --surface-high:  #1a373f;
    --line:          #244349;

    --text:          #eef6f6;
    --text-soft:     #a7c5c7;
    /* Gedempt, maar wel leesbaar: op #6c8a8d haalde kleine tekst 3,4 tot 4,5:1
       op de donkere vlakken. Deze tint haalt overal minimaal 5:1. */
    --text-dim:      #8fa9ac;

    --turquoise:       #2dd4c5;
    --turquoise-deep:  #1a9c92;
    /* Tekst óp het accent (actieve tab, rol-badge, afgevinkt figuur). Donker
       haalt op alle vier de thema-accenten 5:1 of meer; bij eigen klantkleuren
       kiest ThemeColors::onAccent() donker of wit. */
    --on-accent:       #06231f;
    --copper:          #d98a4f;
    /* Tweede themakleur naast het accent (--turquoise): vlakken en titel mengen ermee,
       zodat niet alles in dezelfde kleur staat. Kronieken: koper; per thema overschreven. */
    --accent-2:        #e79f61;
    --copper-bright:   #e79f61;
    --copper-deep:     #a85f2c;
    --sulfur:          #e0b84c;
    --silver:          #c3d2d4;
    /* Iets lichter dan echt brons: op #b97a4a haalde het rangcijfer 4,3:1. */
    --bronze:          #c98a56;
    --green:           #46c08a;
    --red:             #ef6459;

    /* De Dragers van de Kronieken: rood, groen, blauw; los van de
       semantische --red/--green hierboven, zodat een team-kleur nooit
       verward wordt met een plus/min-punt in de historie. */
    --dragers-red:     #dd4b3e;
    --dragers-green:   #3fae6a;
    --dragers-blue:    #4c7fe0;
    --dragers-yellow:  #e6c34a;
    --dragers-orange:  #ee8a3c;
    --dragers-purple:  #9b6fe0;
    --dragers-pink:    #e879a8;
    --dragers-white:   #e8eef0;

    --radius:        16px;
    --radius-sm:     10px;
    --tap:           48px;

    --shadow:        0 10px 30px rgb(0 0 0 / 45%);

    --safe-top:      env(safe-area-inset-top, 0px);
    --safe-bottom:   env(safe-area-inset-bottom, 0px);
}

/* De kleuren van Kronieken, Heist en Missie staan niet hier: elk weekend krijgt
   sinds 4 okt 2026 een inline <style id="tenant-colors"> met zijn eigen palet,
   of zonder eigen kleuren het palet van zijn thema (ThemeColors::defaults() en
   effective(): Kronieken Middernacht, Heist Diamant, Missie Robijn). De
   tweede kleur en het jaartal volgen dan dezelfde regels als
   elk palet. De :root hierboven blijft de basis voor de pagina's zonder thema
   (klaar.php, onbekend.php). */
/* Blanco (Zelf-pakket): een rustige, neutrale grondkleur als startpunt. De
   klant maakt het eigen met de kleuren-editor (die zet deze tokens inline
   over deze waarden heen). */
[data-app-theme="blank"] {
    --turquoise:      #7c93a6;
    --turquoise-deep: #5f7688;
    --accent-2:       #b8a07f;
    --hero-year-top:  #f4efe6;
    --hero-year-mid:  var(--accent-2);
    --hero-year-deep: color-mix(in srgb, var(--accent-2), #000 30%);
    --bg:             #12161a;
    --bg-glow:        #1b232b;
    --surface:        #1a1f25;
    --surface-high:   #232a31;
    --line:           #2e363e;
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
}

/* Laadscherm (PageBoot): de inline stijl in de <head> verbergt de body en
   toont een spinner tot deze stylesheet er is. Deze twee regels zetten dat
   terug; ze staan hier en niet in PageBoot, zodat "stylesheet geladen" het
   enige signaal is. */
body { visibility: visible; }
.boot { display: none !important; }

/* Verborgen is verborgen. Zonder deze regel won elke klasse met een eigen
   display (.btn--block, .current-password) van het hidden-attribuut, en stonden
   o.a. "Wachtwoord vergeten?" vóór er een wachtwoord was, lege woord-vakjes en
   overbodige wis-knoppen gewoon in beeld. */
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100dvh;
    font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    color: var(--text);
    background:
        radial-gradient(120% 60% at 50% 0%, var(--bg-glow) 0%, transparent 60%),
        var(--bg);
    background-attachment: fixed;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Formuliervelden blijven gewoon selecteerbaar/bewerkbaar. */
input, textarea, select, [contenteditable] {
    user-select: text;
    -webkit-user-select: text;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; color: var(--heading, var(--text)); }

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

/* De kop (sinds 29 okt 2026 variant D, de eigenaar: "Ik zou het veel meer laten shinen"): het topbalkje
   als lint in een verloop van de twee themakleuren, de naam groter (op een telefoon valt het jaartal op een
   eigen regel) met om de paar seconden een glans over het jaartal, het thema tussen twee lijntjes en de plek
   met een pin. Van 19 tot 29 okt een compacte kop met het topbalkje als pil; daarvoor het jaartal groot op een
   eigen regel met de naam klein erboven. Afgewezen: een rustige kop met een streepje, links uitgelijnd, labels,
   een spotlight met sterretjes en de kop als kaart. */
.hero {
    padding: calc(var(--safe-top) + 26px) 20px 24px;
    text-align: center;
}

.hero__lustrum {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 7px 22px;
    border-radius: 6px;
    /* --lustrum-start: op een licht palet zet de server de tweede kleur donkerder, anders haalde de witte tekst 2,7:1. */
    background: linear-gradient(100deg, var(--lustrum-start, var(--accent-2)), var(--turquoise));
    /* De inkepingen van een lint, links en rechts. */
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--on-accent);
}

.hero__title {
    margin: 0;
    font-size: clamp(1.9rem, 8.2vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

/* Het jaartal volgt het thema: koper bij Kronieken (de :root-default), het
   accent bij Heist, Missie, blanco en elk klantpalet (--hero-year-* tokens).
   De eerste laag is de glans die eroverheen glijdt. */
.hero__year {
    display: inline-block;
    background:
        linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 85%) 50%, transparent 65%) no-repeat,
        linear-gradient(180deg, var(--hero-year-top, #fff3e6) 0%, var(--hero-year-mid, var(--copper-bright)) 50%, var(--hero-year-deep, var(--copper-deep)) 100%);
    background-size: 60% 100%, 100% 100%;
    background-position: 250% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@keyframes hero-shine {
    0%, 45% { background-position: 250% 0, 0 0; }
    100% { background-position: -150% 0, 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
    .hero__year { animation: hero-shine 6s ease-in-out infinite; }
}

.hero__sub {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 0.92rem;
    color: var(--text-soft);
}

.hero__theme {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
}
.hero__theme::before,
.hero__theme::after {
    content: "";
    flex: 1;
    max-width: 48px;
    height: 1px;
}
.hero__theme::before { background: linear-gradient(90deg, transparent, var(--accent-2)); }
.hero__theme::after { background: linear-gradient(90deg, var(--accent-2), transparent); }
/* De bestemming op een eigen regel (sinds 26 okt 2026, de eigenaar: "In de app subtitel wil ik graag dat de
   bestemming een eigen regel krijgt"), sinds 29 okt 2026 met een pin. */
.hero__location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.86rem;
}
.hero__location svg {
    flex: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--accent-2);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* De hoes van het weekendlied (sinds 27 okt 2026, de eigenaar: "een groepsfoto ... voor de cover van het
   weekendlied (vierkant)"): groot boven de speler, zoals een albumhoes, tot 240 px. */
.song-cover { display: block; width: min(100%, 240px); height: auto; aspect-ratio: 1; margin: 0 0 14px; border-radius: 14px; object-fit: cover; box-shadow: 0 10px 28px rgb(0 0 0 / 35%); }

/* De speelknop van het weekendlied, klein en rustig. */

.player { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / 4%); max-width: 380px; }
.player__play { flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(180deg, var(--turquoise), var(--turquoise-deep)); color: var(--on-accent); font-size: 0.85rem; display: grid; place-items: center; padding-left: 2px; box-shadow: 0 5px 14px rgb(0 0 0 / 35%); }
.player__play:hover { filter: brightness(1.06); }
.player__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.player__wave { display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; }
.player__wave span { flex: 1; min-width: 2px; border-radius: 1px; background: var(--line); transition: background .08s; }
.player__wave span.on { background: var(--sulfur); }
.player__time { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Wie je op deze telefoon bent (sinds 9 okt 2026, de eigenaar: "alsof je bent ingelogd
   bij een account"): je eigen foto rechtsboven, met een rustige rand en rechtsonder een
   stipje in de teamkleur zoals bij een account in een app (keuze 1 van de eigenaar; een
   rand in de teamkleur oogde onrustig). Sinds 17 okt 2026 de enige knop daar: de
   sfeermuziek staat in een rij onder Mini Duels (de eigenaar). */
.me-btn { position: fixed; top: calc(14px + var(--safe-top)); right: 14px; z-index: 60; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); font: inherit; font-size: 0.9rem; font-weight: 800; color: var(--text-soft); }
/* Niet aantikbaar boven een uitdaag-sheet (sinds 10 okt 2026): de knoppen rechtsboven liggen
   boven de sheets (60 tegen 50), en een tik op je foto opende "Wie ben jij?" over het rad heen.
   Sinds 26 okt 2026 bij elk venster: die staan nu in het midden, en het paneel lag anders met zijn
   kruisje onder je foto. */
body:has(.sheet:not([hidden])) .me-btn { visibility: hidden; }
.me-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.me-btn[class*="team-accent--"]::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--team-accent); box-shadow: 0 0 0 2px var(--bg); }
.me-btn:hover { filter: brightness(1.08); }
.me-btn:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; }
/* Op de telefoon kleiner (38 px, 12 px van de rand).
   De kop zakt dan een stukje (html.has-me, gezet in de <head>), anders viel het rondje
   over het labeltje bovenaan; de knopjes krijgen zo hun eigen strook. */
@media (max-width: 560px) {
    .me-btn { width: 38px; height: 38px; top: calc(12px + var(--safe-top)); right: 12px; font-size: 0.8rem; }
    .me-btn[class*="team-accent--"]::after { width: 10px; height: 10px; }
    .has-me .hero { padding-top: calc(var(--safe-top) + 58px); }
}
/* ---------- Tabbladen (sinds 19 okt 2026) ---------- */
/* De tabbladen (de eigenaar: "met tabs werken in plaats van zo'n ontzettend lange lay-out";
   daarvoor één lange pagina, en van de middag tot de avond van 19 okt tegels voor de laden): elk
   blok op de pagina hoort bij een tabblad (data-board-tab), en alleen dat van het gekozen tabblad
   staat er (html[data-board-tab]; zonder: de stand). Blokken zonder tabblad (de demobalk, de
   vuurbalk van het duel-uur, de minispeler) staan er altijd. Op een telefoon en tablet onderin,
   op de computer (boven 1200 px) bovenin onder de kop (sinds 20 okt 2026, de eigenaar: "een menu
   bovenin met dezelfde tabs als op mobiel"; op 19 okt stond daar alles onder elkaar). Niet op de
   tv: daar staat alles op één scherm (app/tabs.js). */
:root {
    --tabbar-h: 64px;
    /* De minispeler is altijd even hoog (36 px en 2 x 6 px binnenruimte en de rand): zo kan de pagina
       precies zoveel ruimte vrijhouden als hij inneemt. */
    --mini-h: 50px;
    /* Waar de vaste dingen onderin beginnen, gemeten vanaf de onderrand van het scherm: de bovenkant
       van de tabbalk (64 px, de rand, de veilige rand van een iPhone) en de onderkant van de minispeler. */
    --bar-top: calc(var(--tabbar-h) + 1px + var(--safe-bottom));
    --mini-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px);
}
/* Op een tablet zweeft de tabbalk 12 px boven de rand, met een rand eromheen; op de computer staat hij bovenin. */
@media (min-width: 720px) { :root { --bar-top: calc(var(--tabbar-h) + 14px); --mini-bottom: calc(var(--tabbar-h) + 20px); } }
@media (min-width: 1201px) { :root { --bar-top: 0px; --mini-bottom: 16px; } }
html:not(.is-tv):not([data-board-tab]) .page > [data-board-tab]:not([data-board-tab="stand"]),
html:not(.is-tv)[data-board-tab="stand"] .page > [data-board-tab]:not([data-board-tab="stand"]),
html:not(.is-tv)[data-board-tab="duels"] .page > [data-board-tab]:not([data-board-tab="duels"]),
html:not(.is-tv)[data-board-tab="titles"] .page > [data-board-tab]:not([data-board-tab="titles"]) { display: none !important; }
/* Alleen op de tv (sinds 20 okt 2026): de laatste vondsten. Op Stand staat daar nu het voorwerp. */
html:not(.is-tv) .page > .tv-only { display: none !important; }
/* Een nieuwe sectie op Stand (sinds 20 okt 2026, de eigenaar: "iets minder dicht tegen de scores",
   "professionele look"): sinds 27 okt 2026 de kop "De Meesterproef" boven het voorwerp, zoals "De score"
   boven de teamkaarten (de eigenaar: "dit lijntje weghalen en vervolgens er een titel neerzetten net
   zoals bij de rest"), met dezelfde ruimte erboven als de kop van de stand. Van 20 tot 27 okt een dunne
   lijn (.section-rule). Niet op de tv: daar heeft het voorwerp een eigen vak. */
html:not(.is-tv) .section-title--trial { margin-top: 30px; }
.is-tv .section-title--trial { display: none; }
/* De pagina houdt onderin precies vrij wat er vast staat: de tabbalk, en zolang de muziek speelt de
   minispeler erboven. De ruimte onder "Algemene voorwaarden · Privacy" komt zo alleen uit de onderkant
   van de footer, en is met en zonder muziek even groot (sinds 20 okt 2026, de eigenaar: "muziek aan of
   uit maakt niet uit"; tot dan 12 px extra zonder muziek en 76 px met, en de veilige rand van een
   iPhone telde dubbel, dus bij het scrollen versprong de ruimte). */
html:not(.is-tv) body:has(.tabbar) { padding-bottom: var(--bar-top); }
html:not(.is-tv) body.has-mini { padding-bottom: calc(var(--mini-bottom) + var(--mini-h)); }
/* Op een korte pagina (Eretitels, of Duels op de computer) staan de voorwaarden toch onderaan het scherm,
   met dezelfde ruimte eronder (de eigenaar: "op elke pagina zoveel marge"): het bord als kolom die het
   scherm vult, en de pagina neemt de rest. Alleen het bord (met de tabbladen), niet op de tv. In een
   kolom vallen de marge onder de tabbalk op de computer en die van het eerste blok niet meer samen:
   daarom daar 6 px in plaats van 10. */
html:not(.is-tv) body:has(> .tabbar) { display: flex; flex-direction: column; }
html:not(.is-tv) body:has(> .tabbar) > main.page { flex: 1 0 auto; }
/* De tabbladen en, voor wie scores bijschrijft, het paneel als vijfde knop (.tabbar__admin). */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 4px; max-width: 680px; margin: 0 auto; padding: 6px 8px calc(6px + var(--safe-bottom)); border-top: 1px solid var(--glass-rim); box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 -8px 24px rgb(0 0 0 / 14%); }
/* De tabbalk en de minispeler zijn van glas (sinds 24 okt 2026, keuze A van de eigenaar uit drie: "Mat
   glas", dezelfde vorm als eerst). Een tint van het vlak, sterk vervaagd en verzadigd, met een glans van
   boven en een rand in de tekstkleur: licht op een donker palet, donker op een licht palet. Het bord
   schemert erdoorheen als het eronder schuift. Tot dan was de balk voor 94% dicht en de minispeler helemaal. */
:is(.tabbar, .mini-player) {
    --glass-tint: color-mix(in srgb, var(--surface-high) 46%, transparent);
    --glass-rim: color-mix(in srgb, var(--text) 16%, transparent);
    background: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 0%) 60%), var(--glass-tint);
    -webkit-backdrop-filter: blur(16px) saturate(190%);
    backdrop-filter: blur(16px) saturate(190%);
}
/* Zonder glas in de browser, of met "minder transparantie" aan op het toestel: dicht, zoals eerst. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :is(.tabbar, .mini-player) { background: var(--surface-high); } }
@media (prefers-reduced-transparency: reduce) { :is(.tabbar, .mini-player) { background: var(--surface-high); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Op een breed scherm een zwevende balk onder de pagina in plaats van een rand over de hele breedte. */
@media (min-width: 720px) { .tabbar { bottom: 12px; border: 1px solid var(--glass-rim); border-radius: 18px; padding-bottom: 6px; } }
/* Drie tabbladen (sinds 20 okt 2026; daarvoor vier, met Meer): met het paneel erbij zijn alle knoppen even breed. */
.tabbar__tabs { flex: 3 1 0; min-width: 0; display: flex; gap: 4px; }
.tabbar__tab { flex: 1 1 0; min-width: 0; position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 52px; padding: 4px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--text-soft); font: inherit; font-size: 0.76rem; font-weight: 700; line-height: 1.1; cursor: pointer; }
/* Lijniconen (sinds 6 nov 2026, daarvoor emoji): dicht het icoon in de zachte tekstkleur, open in het accent. */
.tabbar__icon { display: grid; place-items: center; color: var(--text-dim); }
.tabbar__icon .ic { width: 22px; height: 22px; stroke-width: 1.7; }
.tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar__tab.is-on { color: color-mix(in srgb, var(--turquoise), var(--text) 15%); background: color-mix(in srgb, var(--turquoise) 13%, transparent); }
.tabbar__tab.is-on .tabbar__icon { color: var(--turquoise); }
.tabbar__tab:focus-visible { outline: 2px solid var(--turquoise); outline-offset: -2px; }
/* Er staat een uitdaging open, of er loopt een duel-uur (app/call.js). */
.tabbar__dot { position: absolute; top: 6px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--surface-high); }
/* Op de computer bovenin, onder de kop (sinds 20 okt 2026, de eigenaar): bij het scrollen blijft de
   balk bovenin staan (sticky; daarom staat hij in index.php tussen de kop en de pagina), even breed
   als de teamkaarten, met het icoon naast het woord en het stipje erachter. */
/* Op de computer is elk tabblad minstens een scherm hoog, min de balk bovenin (12 px, de balk van
   58 px en 6 px eronder): zo kan de balk bij een wissel naar een kort tabblad (Eretitels) bovenin
   blijven staan (showTab() in app/tabs.js, sinds 22 okt 2026). */
@media (min-width: 1201px) { html:not(.is-tv) body:has(> .tabbar) > main.page { min-height: calc(100vh - 76px); } }
@media (min-width: 1201px) {
    .tabbar { position: sticky; top: 12px; left: auto; right: auto; bottom: auto; width: min(680px, calc(100% - 28px)); margin: 0 auto 6px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 8px 22px rgb(0 0 0 / 12%); }
    .tabbar__tab { grid-auto-flow: column; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px; font-size: 0.86rem; }
    .tabbar__icon .ic { width: 20px; height: 20px; }
    .tabbar__dot { position: static; }
}
/* Op de andere tabbladen een kleinere kop: alleen de naam en het jaartal. Niet op de computer:
   daar staan de tabbladen onder de kop, en die zouden dan bij elke wissel verspringen. */
@media (max-width: 1200px) {
    html:not(.is-tv)[data-board-tab]:not([data-board-tab="stand"]) .hero__lustrum,
    html:not(.is-tv)[data-board-tab]:not([data-board-tab="stand"]) .hero__sub { display: none; }
    html:not(.is-tv)[data-board-tab]:not([data-board-tab="stand"]) .hero { padding-bottom: 12px; }
    html:not(.is-tv)[data-board-tab]:not([data-board-tab="stand"]) .hero__title { font-size: clamp(1.4rem, 6vw, 2rem); }
}
/* Mini Duels is het tabblad zelf: geen kaart eromheen. */
.legend.duels-panel { padding: 0; border: 0; background: none; box-shadow: none; }
/* De minispeler, net boven de tabbladen, zolang de sfeermuziek speelt (app/ambient.js): het nummer
   (een tik opent de speler bovenaan het Dashboard) en het ronde knopje met de equalizer om hem met één tik uit te zetten. */
.mini-player { position: fixed; left: 10px; right: 10px; bottom: var(--mini-bottom); z-index: 39; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; height: var(--mini-h); max-width: 660px; margin: 0 auto; padding: 6px 7px 6px 6px; border: 1px solid var(--glass-rim); border-radius: 14px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 8px 22px rgb(0 0 0 / 22%); }
.mini-player__open { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mini-player__cover { display: flex; }
.mini-player__cover .ambient-cover { width: 36px; height: 36px; border-radius: 6px; }
.mini-player__text { min-width: 0; display: grid; }
.mini-player__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; font-weight: 700; }
.mini-player__sub { font-size: 0.78rem; color: var(--text-soft); }
.mini-player .mini-player__play { width: 36px; height: 36px; }
.mini-player .mini-player__play svg { width: 14px; height: 14px; }
/* Het pijltje staat boven het knopje van de minispeler en wijst omlaag. */
.mini-player .music-hint { top: auto; right: 0; bottom: calc(100% + 10px); transform: none; }
.mini-player .music-hint__arrow { animation-name: music-hint-nudge-down; }
@keyframes music-hint-nudge-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.is-tv .tabbar, .is-tv .mini-player { display: none !important; }
/* Een melding onderin staat boven de tabbladen (en de minispeler). */
@media (max-width: 1200px) { html:not(.is-tv) body:has(.tabbar) .toast { bottom: calc(var(--bar-top) + 16px); } }
html:not(.is-tv) body.has-mini .toast { bottom: calc(var(--mini-bottom) + var(--mini-h) + 16px); }

/* De sfeermuziek (sinds 17 okt 2026 een rij onder Mini Duels, de eigenaar; daarvoor een
   menuutje onder een knopje rechtsboven). In de rij bovenaan de speler (hoes, titel,
   afspelen of pauzeren, stoppen), daaronder de nummers als rijen met een vierkante hoes,
   de titel en de lengte, zoals een muziekapp; het nummer dat klinkt in het accent met een
   bewegend balkje. In de kop een rond afspeelknopje (app/ambient.js). */
.legend__text.ambient-menu { padding: 0 10px 12px; }
/* Het knopje over de kopregel heen, buiten de summary: een tik erop opent of sluit de rij niet
   (pointer-events). Alleen het knopje: een titel ernaast was te druk (de eigenaar, 17 okt 2026).
   top 1px: de bovenmarge van de rij valt buiten .legend-music, alleen de rand telt. */
.legend-music { position: relative; }
.music-head { position: absolute; top: 1px; right: 12px; display: flex; align-items: center; height: var(--tap); pointer-events: none; }
/* Twee klassen: .ambient-ctl staat verderop en zou anders de maat terugzetten. */
.music-head .music-head__play { width: 34px; height: 34px; pointer-events: auto; }
.music-head .music-head__play svg { width: 14px; height: 14px; }
/* Speelt de muziek, dan een bewegende equalizer in het knopje in plaats van het pauzeteken
   (sinds 19 okt 2026 weer, de eigenaar; tot 17 okt in het knopje rechtsboven). Vier balkjes,
   elk in een eigen tempo, zodat het niet als één golf beweegt. Met de muis erop of met de
   toetsenbordfocus het pauzeteken: dan zie je wat een klik doet. */
.music-head__eq { display: none; align-items: center; gap: 2px; height: 14px; }
.music-head__eq i { width: 3px; height: 5px; border-radius: 2px; background: currentColor; animation: music-eq 0.9s ease-in-out infinite; }
.music-head__eq i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
.music-head__eq i:nth-child(3) { animation-duration: 1.05s; animation-delay: -0.55s; }
.music-head__eq i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.15s; }
@keyframes music-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
:is(.legend-music, .mini-player).is-playing .music-head__eq { display: flex; }
:is(.legend-music, .mini-player).is-playing :is(.music-head__play, .mini-player__play) .ambient-ctl__pause { display: none; }
:is(.legend-music, .mini-player).is-playing :is(.music-head__play, .mini-player__play):focus-visible .music-head__eq { display: none; }
:is(.legend-music, .mini-player).is-playing :is(.music-head__play, .mini-player__play):focus-visible .ambient-ctl__pause { display: block; }
@media (hover: hover) {
    :is(.legend-music, .mini-player).is-playing :is(.music-head__play, .mini-player__play):hover .music-head__eq { display: none; }
    :is(.legend-music, .mini-player).is-playing :is(.music-head__play, .mini-player__play):hover .ambient-ctl__pause { display: block; }
}
/* Bij "minder beweging" stil, maar nog als equalizer te herkennen. */
@media (prefers-reduced-motion: reduce) {
    .music-head__eq i { animation: none; height: 8px; }
    .music-head__eq i:nth-child(2) { height: 13px; }
    .music-head__eq i:nth-child(3) { height: 6px; }
    .music-head__eq i:nth-child(4) { height: 10px; }
}
/* De rijen die je openklapt (het verhaal, de sfeermuziek, het weekendlied, het huisje) samen in één
   blok, zoals de instellingen van een telefoon (sinds 23 okt 2026, de eigenaar: "professioneler", uit
   drie varianten koos hij A, "meer in 1 lijn" met het verhaal): ronde hoeken en een zachte gloed in de
   tweede themakleur, de rijen gescheiden door een lijn. Het verhaal is sinds 24 okt 2026 de eerste
   rij (de eigenaar: "ik vind het nog steeds te druk"), daarvoor een losse kaart erboven. Per rij een icoontje in een verloop van de
   twee themakleuren (zoals een hoes zonder plaatje), de naam, een regel over wat erin staat (met een
   slotje als iets verzegeld is) en een pijltje dat bij open een kwartslag draait. Bij de sfeermuziek
   staat daar het afspeelknopje. Het blok staat op de tv niet. Afgewezen: elke rij een eigen kaart
   met een gloed (B, ging concurreren met het verhaal) en een lage rij met een label "Verzegeld" (C).
   Tot die dag losse rijen met een pijltje en de naam in het accent. */
/* 16 px boven het blok, onder de kop van het bord (sinds 26 okt 2026, de eigenaar: "ook hier graag iets meer
   ruimte"; daarvoor 4 px). */
.drawer-list {
    --drawer-row: 64px;
    margin: 16px 0 4px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
        radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--accent-2), transparent 92%), transparent 70%),
        var(--surface);
}
/* Leeg (de spelavond zonder muziek, lied of huisje): helemaal weg, anders bleef een los lijntje staan. */
.drawer-list:not(:has(> *)) { display: none; }
.drawer-list .legend { margin: 0; border: 0; border-radius: 0; background: none; }
/* Een lijn tussen de rijen (sterker dan de regel hierboven, die de rand van een losse rij weghaalt). */
.drawer-list > :is(.legend, .legend-music) + :is(.legend, .legend-music) { border-top: 1px solid var(--line); }
.drawer-row.legend__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    min-height: var(--drawer-row);
    padding: 10px 14px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text);
}
.drawer-row.legend__summary::before { content: none; }
.drawer-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
/* Het icoon zonder tegel, groter en in de themakleur (sinds 26 okt 2026, de eigenaar koos B: "de icons
   groter en de vierkante knop eromheen verdwijnt"). Tot die dag een tegel van 34 px met het kleurverloop
   van accent naar tweede kleur en een klein donker icoon. Het kleurverloop zelf in het icoon (A) werd op
   dunne lijnen pastel. Het vak blijft 34 px breed, zodat de tekst op dezelfde plek begint. */
.drawer-row__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--turquoise);
}
.drawer-row__icon svg,
.drawer-row__end svg,
.drawer-row__lock { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.drawer-row__icon svg { width: 30px; height: 30px; stroke-width: 1.9; }
.drawer-row__text { display: grid; gap: 2px; min-width: 0; }
.drawer-row__title { font-size: 0.98rem; font-weight: 700; }
.drawer-row__sub { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; font-size: 0.8rem; color: var(--text-soft); white-space: nowrap; text-overflow: ellipsis; }
.drawer-row__lock { flex: none; width: 13px; height: 13px; stroke-width: 2.2; }
.drawer-row__end { display: grid; place-items: center; color: var(--text-dim); transition: transform 0.3s ease-in-out; }
.drawer-row__end svg { width: 18px; height: 18px; stroke-width: 2.4; }
details[open]:not(.is-closing) > .drawer-row .drawer-row__end { transform: rotate(90deg); }
/* De plek van het afspeelknopje van de sfeermuziek (.music-head, over de rij heen). */
.drawer-row__end--play { width: 34px; }
.drawer-list .music-head { top: 0; right: 14px; height: var(--drawer-row); }
/* Het pijltje naar het knopje (sinds 19 okt 2026 weer, de eigenaar; tot 17 okt bij het knopje
   rechtsboven): links ervan, midden op de kopregel, bij een eerste bezoek als de muziek
   vanzelf begint (app/ambient.js). "Tik" op een telefoon, "Klik" met een muis. */
.music-hint { position: absolute; top: calc(1px + var(--tap) / 2); right: 54px; z-index: 2; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--turquoise) 45%, var(--line)); border-radius: 999px; background: var(--surface-high); color: var(--text); font: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: var(--shadow); cursor: pointer; }
.music-hint__arrow { color: var(--turquoise); font-size: 1rem; line-height: 1; animation: music-hint-nudge 1.2s ease-in-out infinite; }
@keyframes music-hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .music-hint__arrow { animation: none; } }
.music-hint__click { display: none; }
@media (hover: hover) and (pointer: fine) {
    .music-hint__tap { display: none; }
    .music-hint__click { display: inline; }
}
/* Op een smalle telefoon alleen "Muziek uit?": anders schuift het over het woord Sfeermuziek. */
@media (max-width: 379px) { .music-hint__more { display: none; } }
.is-tv .music-hint { display: none !important; }
.ambient-now { display: flex; align-items: center; gap: 12px; padding: 6px 6px 10px; }
/* De speler (sinds 22 okt 2026, de eigenaar: "in lijn van de app zijn professionaliteit", "Het moet er meer
   uitspringen", variant B): de hoes van het nummer dat speelt, vervaagd en verdonkerd als achtergrond, met
   daarvoor de hoes groot, de titel in het midden en de knoppen. De tekst is in elk palet licht: op een
   licht palet (donkere tekst) was hij op de donkere achtergrond onleesbaar. Afgewezen: een kaart met een
   gloed (A) en de nummers als tegels (C). */
.ambient-player {
    --player-fg: #f6f8f8;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 2px 0 10px;
    padding: 18px 16px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--player-fg);
}
.ambient-now__backdrop { position: absolute; inset: -30px; z-index: -1; display: block; }
.ambient-now__backdrop .ambient-cover { width: 100%; height: 100%; border-radius: 0; filter: blur(26px) saturate(1.3) brightness(0.55); transform: scale(1.1); }
/* Een lichte hoes (De Bevroren Hal) blijft zo ook donker genoeg voor de witte tekst. */
.ambient-player::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / 12%), rgb(0 0 0 / 42%)); pointer-events: none; }
.ambient-player .ambient-now { flex-direction: column; padding: 0 0 14px; gap: 12px; text-align: center; }
.ambient-player .ambient-now__cover .ambient-cover { width: 120px; height: 120px; border-radius: 14px; box-shadow: 0 14px 30px rgb(0 0 0 / 55%); }
.ambient-player .ambient-now__text { align-items: center; }
.ambient-player .ambient-now__title { font-size: 1.2rem; font-weight: 800; color: var(--player-fg); }
.ambient-player .ambient-now__sub { color: color-mix(in srgb, var(--player-fg), transparent 25%); }
.ambient-player .ambient-progress { margin: 0; padding: 0; border: 0; }
.ambient-player .ambient-progress > .ambient-ctl--play { width: 52px; height: 52px; }
.ambient-player .ambient-progress > .ambient-ctl--play svg { width: 20px; height: 20px; }
.ambient-player .ambient-progress > .ambient-ctl:not(.ambient-ctl--play) { border-color: color-mix(in srgb, var(--player-fg), transparent 70%); color: var(--player-fg); }
.ambient-player .player__wave span { background: color-mix(in srgb, var(--player-fg), transparent 70%); }
.ambient-player .player__wave span.on { background: var(--player-fg); }
.ambient-player .player__time { color: color-mix(in srgb, var(--player-fg), transparent 30%); }
/* De golfbalk onder de speler (sinds 8 okt 2026), zoals bij het weekendlied (.player__wave). */
.ambient-progress { display: flex; align-items: center; gap: 8px; padding: 0 6px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.ambient-progress__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; margin-left: 4px; }
.ambient-now__cover { flex: none; display: flex; }
.ambient-now__cover .ambient-cover { width: 52px; height: 52px; border-radius: 6px; }
.ambient-now__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* De titel heeft de hele breedte naast de hoes (de knoppen staan bij de golfbalk); een lange titel mag over twee regels. */
.ambient-now__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-weight: 700; line-height: 1.25; color: var(--text); }
.ambient-now__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; color: var(--text-soft); }
.ambient-now__sub:empty { display: none; }
.ambient-ctl { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; }
.ambient-ctl:hover { border-color: var(--turquoise-deep); }
.ambient-ctl svg { width: 16px; height: 16px; fill: currentColor; }
.ambient-ctl--play { border: 0; background: linear-gradient(180deg, var(--turquoise), var(--turquoise-deep)); color: var(--on-accent); }
.ambient-ctl__pause, :is(.legend-music, .mini-player).is-playing .ambient-ctl__play { display: none; }
:is(.legend-music, .mini-player).is-playing .ambient-ctl__pause { display: block; }
.ambient-list { margin: 0; padding: 0; list-style: none; }
.ambient-track { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ambient-track:hover { background: var(--surface-high); }
.ambient-track__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
.ambient-track.is-current .ambient-track__title { color: var(--turquoise); font-weight: 700; }
.ambient-track__eq { display: none; align-items: flex-end; gap: 2px; height: 12px; color: var(--turquoise); }
.ambient-track.is-current .ambient-track__eq { display: flex; }
.ambient-track__eq i { width: 3px; height: 5px; border-radius: 1px; background: currentColor; }
.legend-music.is-playing .ambient-track.is-current .ambient-track__eq i { animation: ambient-eq-small 0.9s ease-in-out infinite; }
.legend-music.is-playing .ambient-track.is-current .ambient-track__eq i:nth-child(2) { animation-delay: .2s; }
.legend-music.is-playing .ambient-track.is-current .ambient-track__eq i:nth-child(3) { animation-delay: .4s; }
@keyframes ambient-eq-small { 0%, 100% { height: 4px; } 50% { height: 12px; } }
@media (prefers-reduced-motion: reduce) { .legend-music.is-playing .ambient-track.is-current .ambient-track__eq i { animation: none; height: 9px; } }
.ambient-track__time { flex: none; font-size: 0.78rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* Het nummer dat speelt in een getinte rij, en de hoesjes wat ronder (sinds 22 okt 2026, variant B). De
   kopjes "Bij een duel" met de duelmuziek zijn sinds die dag weg (de eigenaar). */
.ambient-track.is-current { background: color-mix(in srgb, var(--turquoise), transparent 86%); }
.ambient-list .ambient-track .ambient-cover { border-radius: 8px; }
/* De hoes; zonder hoes een tegel in de twee themakleuren met een muzieknoot. */
.ambient-cover { flex: none; display: block; width: 40px; height: 40px; border-radius: 4px; object-fit: cover; background: var(--surface-high); }
.ambient-cover--blank { display: grid; place-items: center; background: linear-gradient(135deg, var(--turquoise), var(--accent-2)); color: var(--on-accent); }
.ambient-cover--blank svg { width: 45%; height: 45%; fill: currentColor; }

/* De lijsten van de muziek in het paneel (sinds 12 okt 2026 per lijst de nummers en een
   kiezer voor meer mp3's tegelijk): per nummer hoes, titel (eigen nummer: een veld) en
   weghalen of terugzetten. */
.ambient-list-block { display: grid; gap: 10px; margin-bottom: 16px; }
/* De geluidjes in het paneel (sinds 28 okt 2026): per geluidje een blok met de naam en Laat horen op één regel, wat
   er nu klinkt en de bestandskiezer, met een dunne lijn erboven. */
.sound-row { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.sound-row__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* "▶ Laat horen" altijd op één regel (sinds 28 okt 2026, de eigenaar: "graag altijd deze tekst in de knop op een rij"):
   een lange titel ernaast loopt dan door op een tweede regel. */
.sound-row__head > .btn { flex: none; white-space: nowrap; }
.sound-row__title { font-size: 0.95rem; font-weight: 800; color: var(--text); }
.sound-row .hint { margin: 0; }
.ambient-list-block__label { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.ambient-list-block__add { padding: 2px 0 0; }
.ambient-list-block__free { font-size: 0.82rem; color: var(--text-dim); white-space: nowrap; }
.ambient-slots { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ambient-slots:empty { display: none; }
.ambient-slot { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-high); }
.ambient-slot__body { flex: 1; min-width: 0; display: grid; gap: 8px; }
.ambient-slot__meta { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.ambient-slot__title { margin: -4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text); }
.ambient-slot--hidden .ambient-slot__title, .ambient-slot--hidden .ambient-cover { opacity: 0.45; }
.ambient-slot__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ambient-slot__actions .field { min-width: 0; }
/* Tijdens een duel: het nummer dat speelt als een duel begint (sinds 21 okt 2026), als een pilletje in het accent. */
.ambient-slot__active { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: color-mix(in srgb, var(--turquoise) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--turquoise) 55%, transparent); color: var(--turquoise); font-size: 0.85rem; font-weight: 800; }
.ambient-slot .file-pick:not(.has-files) .file-pick__name { display: none; }

/* Pull-to-refresh-indicator (alleen in app-modus, aangemaakt vanuit app.js). */
.ptr { position: fixed; top: calc(var(--safe-top) + 6px); left: 50%; margin-left: -22px; z-index: 200; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--turquoise); border: 1px solid var(--line); box-shadow: var(--shadow); transform: translateY(-64px); opacity: 0; pointer-events: none; }
.ptr.is-ready { border-color: var(--turquoise); }
.ptr__icon { width: 22px; height: 22px; transition: transform .08s linear; }
.ptr.is-spinning .ptr__icon { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.is-spinning .ptr__icon { animation-duration: 1.4s; } }
.switch-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; font-size: 0.92rem; color: var(--text-soft); cursor: pointer; }
.switch-row input { width: 18px; height: 18px; accent-color: var(--turquoise); flex: none; }

.song-lyrics {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-soft);
    white-space: normal;
}

/* De slotpagina: alles wat een bezoeker zonder wachtwoord te zien krijgt. */

.lock-page {
    display: grid;
    justify-items: center;
    /* Bewust in de bovenste helft in plaats van dood in het midden: als een
       wachtwoordmanager of toetsenbord onder het invoerveld opklapt, scrollt
       de browser anders de kaart half uit beeld. Zo is er altijd ruimte
       onder het veld. */
    align-content: start;
    min-height: 100svh;
    padding: clamp(24px, 12vh, 120px) 20px calc(var(--safe-bottom) + 24px);
}

.lock {
    width: 100%;
    max-width: 350px;
    padding: 28px 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: center;
}

.lock__seal {
    margin: 0 0 10px;
    font-size: 2.4rem;
    line-height: 1;
}

.lock__title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    color: var(--turquoise);
}

.lock__text {
    margin: 0 0 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-soft);
}

.lock__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    text-align: left;
}

/* Een tv koppelen zonder woord (TvPairing): de code groot, leesbaar van de bank. */
.lock__pair {
    margin: 0 0 20px;
    padding: 16px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-high);
}
.lock__pair-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.lock__pair-code {
    margin: 6px 0;
    font-size: 2.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: var(--turquoise);
}
.lock__pair-hint {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-soft);
}

.lock__note {
    margin: 20px 0 0;
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Het toegangswachtwoord leesbaar in het adminpaneel, om door te geven. */

.current-password {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 10px 8px 12px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 3%);
    font-size: 0.85rem;
    color: var(--text-soft);
    word-break: break-all;
    user-select: text;
}

.current-password strong { margin-right: auto; }

.current-password strong {
    color: var(--turquoise);
    letter-spacing: 0.03em;
}

.copy-word {
    flex: none;
    margin-left: 8px;
    padding: 3px 6px;
    border: 1px solid var(--turquoise-deep);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--turquoise);
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
}

.copy-word:hover { background: rgb(45 212 197 / 12%); }

/* De Wacht van het Ei: wie het ei heeft en hoe lang nog. */

.watch {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg), transparent 55%);
    text-align: center;
}

.watch[hidden] { display: none; }

.watch__label {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--turquoise);
}

.watch__holder {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-soft);
    /* "…op zijn plek" liet anders één woord alleen op de tweede regel staan. */
    text-wrap: balance;
}

.watch__clock {
    margin: 2px 0 0;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.watch__clock[hidden] { display: none; }

.watch__clock--out {
    font-size: 1.4rem;
    color: var(--red);
}

.watch--paused .watch__clock {
    color: var(--text-dim);
}

/* Duidelijk label als de tijd is stilgezet (klok én ligteller bevriezen). */
.watch__paused {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 4px 12px;
    border: 1px solid var(--turquoise);
    border-radius: 999px;
    background: color-mix(in srgb, var(--turquoise), transparent 86%);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* Accent op zijn eigen tint: iets naar de tekstkleur voor 4,5:1 (WCAG 2.2 AA, 8 nov 2026). */
    color: color-mix(in srgb, var(--turquoise), var(--text) 25%);
}

.watch__paused[hidden] { display: none; }

.watch__teams-label {
    margin: 14px 0 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.watch__teams {
    text-align: center;
}

/* Het team dat het ei nu vasthoudt; zijn kaartje licht op in het thema-accent
   (sinds 28 sep 2026; was vast zwavelgeel, en dat vloekte bij Heist en Missie).
   Het getal kleurt bewust niet mee: dat loopt het stoplicht hieronder af, en
   bij Missie is het accent zelf al rood. De selector is bewust samengesteld:
   de losse .team-remaining__item-regel staat verderop in dit bestand en zou
   anders winnen. */
.watch__teams .team-remaining__item--holder {
    border-color: var(--turquoise);
    background: color-mix(in srgb, var(--turquoise), transparent 88%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--turquoise), transparent 60%);
}

/* De laatste minuten van de houder kleuren steeds dringender: 3 geel,
   2 oranje, 1 rood, 0 gedempt ("op is op"). Bewust niet steeds donkerder:
   dat leverde 2,7:1 en 1,3:1 op en was niet meer te lezen. */
.watch__teams .team-remaining__count[data-min="3"] { color: var(--sulfur); }
.watch__teams .team-remaining__count[data-min="2"] { color: #e07a2f; }
.watch__teams .team-remaining__count[data-min="1"] { color: var(--red); }
/* Een tegel met 0 minuten is altijd ook een "wachtend" team en wordt dus nog
   eens gedimd; deze tint houdt daarna nog 3,5:1 over. */
.watch__teams .team-remaining__count[data-min="0"] { color: #c69a92; }
/* Laatste minuut: seconden tikken nog, dus fel en met een zachte puls i.p.v.
   de donkere "op is op"-kleur van 0 minuten. */
.watch__teams .team-remaining__count[data-min="s"] {
    color: #ff6a4d;
    text-shadow: 0 0 12px rgb(255 106 77 / 50%);
}
@media (prefers-reduced-motion: no-preference) {
    .watch__teams .team-remaining__count[data-min="s"] { animation: watchSecondsPulse 1s ease-in-out infinite; }
    @keyframes watchSecondsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
}

/* De Wacht per team als ring die leegloopt als een klok (sinds 20 okt 2026, de eigenaar: "saai dat
   je nu alleen maar bars hebt"; proef A van drie, klok en stippen; van 19 tot 20 okt een balk, en
   daarvoor tegels met alleen een kleurstreep): hele minuten tegenover het halfuur
   (WatchView::ringPercent()) in de teamkleur, het getal in het midden en de naam eronder. Het raster
   per aantal teams is dat van de tegels (.team-remaining[data-count], verderop). De houder licht op
   in het accent (zonder het voorwerp erbij: de eigenaar, 20 okt 2026); een wachtend team staat wazig en de laatste
   minuten kleuren zoals hierboven (data-min). Twee klassen: de tegelregels van .team-remaining
   blijven voor de teams bij Mini Duels. */
.watch__teams .team-remaining__item { display: grid; justify-items: center; align-content: start; gap: 8px; min-width: 0; padding: 8px 4px 10px; border: 1px solid transparent; border-radius: 14px; background: transparent; }
/* Op een breder scherm dicht bij elkaar in het midden, met kolommen van hoogstens 168 px: anders
   stonden de ringen ver uit elkaar en kreeg de houder een breed, leeg kader. */
@media (min-width: 560px) {
    .team-remaining.watch__teams { --watch-cols: 3; grid-template-columns: repeat(var(--watch-cols), minmax(0, 168px)); justify-content: center; }
    .team-remaining.watch__teams[data-count="2"] { --watch-cols: 2; }
    .team-remaining.watch__teams[data-count="4"],
    .team-remaining.watch__teams[data-count="7"],
    .team-remaining.watch__teams[data-count="8"] { --watch-cols: 4; }
}
.watch__teams .team-remaining__dial { position: relative; width: 80px; height: 80px; }
.watch__teams .team-remaining__ring { display: block; width: 100%; height: 100%; fill: none; stroke-width: 7; }
.watch__teams .team-remaining__track { stroke: color-mix(in srgb, var(--text) 10%, transparent); }
.watch__teams .team-remaining__arc { stroke: var(--team-accent); stroke-linecap: round; transition: stroke-dasharray 0.6s ease-in-out; }
/* Nul minuten: geen boog (de ronde kap tekende anders een stip). */
.watch__teams .team-remaining__arc[stroke-dasharray^="0 "] { visibility: hidden; }
.watch__teams .team-remaining__value { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1; }
.watch__teams .team-remaining__count { font-size: 1.55rem; line-height: 1; }
.watch__teams .team-remaining__name { margin-top: 3px; font-size: 0.7rem; letter-spacing: 0.08em; }
/* Bij de open duels per team zegt het kleurstreepje het al (sinds 2 nov 2026, de eigenaar: "is die tekst van Rode
   Duels etc. inmiddels niet overbodig?"): de naam alleen nog voor een schermlezer. Bij De Wacht blijft hij staan. */
#challengesTeamSummary .team-remaining__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.watch__teams .team-remaining__team { max-width: 100%; font-size: 0.8rem; font-weight: 700; line-height: 1.2; text-align: center; color: var(--text); overflow-wrap: anywhere; }

/* Een team dat deze ronde al is geweest, kijkt wazig toe tot de volgende. */
.watch__teams .team-remaining__item--waiting {
    /* Wazig genoeg om te zien dat je wacht, maar leesbaar: op 0.5 haalde het
       woord "minuten" nog maar 2,9:1. */
    opacity: 0.75;
    filter: grayscale(0.35);
}
/* Wazig met een tekstschaduw in de eigen kleur, niet met filter: blur() (sinds 26 okt 2026). Safari
   tekende net buiten een wazige filter soms rommelpixels: op een iPhone stond er een paarse streep
   boven het wachtende team. Een fout in CoreGraphics, in WebKit hersteld op 21 okt 2026 (PR 77607),
   maar een iPhone heeft dat pas na een update van iOS. Een schaduw van 1,6px is even wazig als
   blur(0.8px), alleen de lege ring is nu scherp. BlurFilterTest houdt filter: blur() van het bord. */
.watch__teams .team-remaining__item--waiting :is(.team-remaining__count, .team-remaining__name, .team-remaining__team) {
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 1.6px currentColor;
}

/* Een team dat deze ronde al aan de beurt is geweest. */
.btn.is-spent {
    opacity: 0.45;
}

/* De regels van de Wacht, ingeklapt onder het ei. */

.watch-rules {
    margin-top: 12px;
}

.watch-rules__summary {
    cursor: pointer;
    /* Een tikvlak van minstens 24 px hoog (WCAG 2.2), zonder dat de regel verschuift. */
    padding-block: 4px;
    margin-block: -4px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--turquoise);
    list-style: none;
}

.watch-rules__summary::-webkit-details-marker { display: none; }

.watch-rules__summary::before {
    content: "▸ ";
}

.watch-rules[open]:not(.is-closing) .watch-rules__summary::before {
    content: "▾ ";
}

.watch-rules__lead {
    margin: 10px 0 0;
    font-size: 0.88rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--text-soft);
}

.watch-rules__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 0;
    padding-left: 18px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-soft);
}

/* De organisatierol ziet de foto-, wachtwoord- en resetknoppen niet. */
body.role-org .full-only { display: none !important; }

/* Rol-aanduiding in de paneelkop, altijd zichtbaar. */
.sheet__titlewrap { display: flex; align-items: center; gap: 10px; min-width: 0; }

.role-badge {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    /* Op het volle accent met --on-accent: op de donkere accent-tint haalde de
       kleine tekst in Missie en blanco 4,2:1 en 3,8:1. */
    background: var(--turquoise);
    color: var(--on-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.role-badge--org { background: var(--turquoise-deep); color: var(--on-accent); }

/* ---------- Layout ---------- */

.page {
    width: min(680px, 100%);
    margin: 0 auto;
    padding: 0 14px 8px;
}

/* ---------- Legende ---------- */

.legend {
    margin: 4px 0 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.legend__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--tap);
    padding: 0 14px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--turquoise);
    cursor: pointer;
    list-style: none;
}

.legend__summary::-webkit-details-marker { display: none; }

.legend__summary::before {
    content: '▸';
    flex: none;
    font-size: 1.3rem;
    color: var(--text-dim);
    transition: transform 0.3s ease-in-out;
}

.legend[open]:not(.is-closing) .legend__summary::before {
    transform: rotate(90deg);
}

.legend__text + .legend__text--tail {
    padding-top: 12px;
}

.legend__text {
    margin: 0;
    padding: 0 16px 16px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-soft);
}

.legend__image {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    border-radius: 14px;
    margin: 0 0 18px;
}

/* Het verhaal (de introtekst): groter, lichter en luchtiger dan de uitleg
   eronder, zodat het leest als het begin van een verhaal. Een sierletter in
   Fraunces (de letter van de landing) in de tweede themakleur, de eerste regel
   iets voller, ruimte tussen de alinea's en een sterretje als slot. Fraunces
   laadt pas als het verhaal opengaat. */
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/fraunces-latin.woff2") format("woff2");
}

/* 16 px tot de kop van de rij (sinds 28 okt 2026, de eigenaar: "10px meer ruimte hier"): de sierletter stond
   tegen de lijn onder "Het verhaal". */
.legend__text--story {
    padding: 16px 20px 24px;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text);
    text-wrap: pretty;
}

.legend__text--story > * { max-width: 62ch; }
.legend__text--story p { margin: 0; }
.legend__text--story p + p { margin-top: 0.9em; }
.legend__text--story strong { font-weight: 700; color: var(--accent-2); }
.legend__text--story em { color: var(--heading); }
.legend__text--story .legend__image { margin: 6px 0 20px; border-radius: 16px; box-shadow: var(--shadow); }

.legend__text--story > p:first-of-type::first-letter,
.story-pages__page:first-child > p:first-of-type::first-letter {
    float: left;
    margin: 0.06em 0.1em 0 0;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-size: 3.4em;
    font-weight: 600;
    line-height: 0.82;
    color: var(--accent-2);
}

.legend__text--story > p:first-of-type::first-line,
.story-pages__page:first-child > p:first-of-type::first-line {
    font-weight: 600;
    color: var(--heading);
}

.legend__text--story::after {
    content: "✦";
    display: block;
    margin-top: 18px;
    font-size: 0.85rem;
    text-align: center;
    color: var(--accent-2);
}

/* Zonder verhaal (leeggemaakt in het paneel) ook geen los sterretje. */
.legend__text--story:empty::after { content: none; }

/* Het verhaal in pagina's (story-pages.js, 4 okt 2026): een lang verhaal groeit niet
   verder door maar staat op pagina's naast elkaar (vegen of de pijltjes), met stipjes
   eronder. Het sterretje komt dan aan het eind van de laatste pagina. */
.legend__text--story.is-paged::after { content: none; }
.story-pages__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-radius: 6px;
}
.story-pages__track::-webkit-scrollbar { display: none; }
.story-pages__track:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 4px; }
.story-pages__page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.story-pages__page:last-child::after {
    content: "✦";
    display: block;
    margin-top: 18px;
    font-size: 0.85rem;
    text-align: center;
    color: var(--accent-2);
}
.story-pages__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.story-pages__dots { display: flex; justify-content: center; gap: 2px; }
.story-pages__dot {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.story-pages__dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text) 28%, transparent);
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.story-pages__dot[aria-current="true"]::before { background: var(--accent-2); transform: scale(1.3); }
.story-pages__arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    color: var(--text-soft);
    cursor: pointer;
}
.story-pages__arrow:not(:disabled):hover { color: var(--accent-2); border-color: var(--accent-2); }
.story-pages__arrow:disabled { opacity: 0.3; cursor: default; }
.story-pages__dot:focus-visible, .story-pages__arrow:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .story-pages__dot::before { transition: none; } }

/* Sfeerregel boven de regels van de Mini Challenges. */

/* Sinds 8 okt 2026 iets kleiner en met meer lucht eronder (de eigenaar: Mini Duels "kwam
   zo vol over"). Zelfde kleur: lichter haalde op Middernacht maar 4,0:1. */
/* De inleiding van Mini Duels, bovenaan het tabje Uitleg (sinds 22 okt 2026, de eigenaar: "veel
   opvallender en professioneler", variant A): een kaart met een zachte gloed in de themakleur, een klein
   label, een vette kop en de uitleg. Tot die dag een cursief grijs zinnetje. Sinds 27 okt 2026 zonder
   gloed buiten de kaart, net als elke kaart (de eigenaar: "Graag geen gloed buiten de cards"). */
.duel-intro {
    margin: 4px 0 22px;
    padding: 20px 22px;
    border: 1px solid color-mix(in srgb, var(--turquoise), transparent 62%);
    border-radius: 18px;
    background:
        radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--turquoise), transparent 80%), transparent 62%),
        var(--surface);
}

.duel-intro__kicker {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--turquoise);
}

.duel-intro__title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--text);
    text-wrap: balance;
}

.duel-intro__text {
    max-width: 52ch;
    margin: 8px 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-soft);
}

/* De regels van het duel onder Uitleg: een kaal lijstje. Tot 13 okt 2026 stond
   het in een kader "In het kort" (turquoise rand, lichte achtergrond), bedoeld
   als samenvatting bovenaan een lange uitleg die er sinds 10 okt niet meer is. */

.duel-rules {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    font-size: 0.88rem;
    color: var(--text-soft);
}

.challenges-public__label {
    margin: 14px 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Hoeveel challenges elk team nog te vergeven heeft. Bewust groot: dit is de
   teller waar iedereen tijdens het weekend op stuurt. */

.team-remaining {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Het aantal teams is per weekend vrij (2 tot 8); het raster volgt het
   aantal zodat er geen halve rij overblijft: 2 en 4 teams in twee kolommen,
   7 en 8 op een breed scherm in vier. */
.team-remaining[data-count="2"],
.team-remaining[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) {
    .team-remaining[data-count="7"],
    .team-remaining[data-count="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.team-remaining__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-high);
    text-align: center;
}

.team-remaining__swatch {
    width: 100%;
    height: 4px;
    margin-bottom: 8px;
    border-radius: 999px;
}

.team-remaining__count {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.team-remaining__name {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* --text-dim haalde hier maar 3,4:1 op de tegel; dit is 6,9:1. */
    color: var(--text-soft);
}

/* Wie mag wie nog uitdagen: per team een regel per speler. */
/* Lucht tussen de uitlegtekst en de eerste lade. */
#duelMatrix { margin-top: 18px; }

/* Per team een lade (.challenge-group); de naam met kleurbolletje staat in de samenvatting. */
.duel-matrix__team { margin-bottom: 8px; }
.duel-matrix__teamname { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--text); }
.duel-matrix__teamname .team-remaining__swatch { width: 10px; height: 10px; margin: 0; border-radius: 999px; }
.duel-matrix { display: grid; gap: 6px; }
/* 14 px boven het eerste kopje en 18 px onder de laatste regel (sinds 28 okt 2026, de eigenaar: "bij rode pijlen graag
   10px extra marge en bij de blauwe 5"; daarvoor 4 en 8 px). Specifieker dan .challenge-group__body, die verderop staat
   en anders wint. */
.challenge-group__body.duel-matrix { padding-top: 14px; padding-bottom: 18px; }
/* De inhoud van een team begint onder het pijltje (sinds 29 okt 2026, de eigenaar: "hier hebben we nog zo'n verhaal met
   dat het uitsteekt"): links even ver als de kop (12 px). */
.challenge-group__body.duel-matrix { padding-inline: 12px; }
/* Per team: één rij met de namen die het team nog mag uitdagen, en per speler hoeveel
   uitdagingen die nog over heeft (4 okt 2026; eerst stond de hele rij namen bij elke speler).
   Het tweede kopje 11 px boven de namen erboven, bovenop de 6 px van het raster (sinds 28 okt 2026, 5 px extra). */
.duel-matrix__label { margin: 11px 0 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.duel-matrix__label:first-child { margin-top: 0; }
.duel-matrix__chips { display: flex; flex-wrap: wrap; gap: 5px; }
/* Een eigen tint: de lade heeft zelf al de vlakkleur, dus --surface-high viel weg. */
.duel-matrix__chip { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); font-size: 0.82rem; line-height: 1.5; color: var(--text); }
.duel-matrix__chip--player b { margin-left: 2px; font-weight: 700; color: var(--turquoise); font-variant-numeric: tabular-nums; }
.duel-matrix__chip--done { opacity: 0.55; }
.duel-matrix__chip--done b { color: var(--text-dim); }
/* "geen uitdagingen meer over": 6 px dichter onder zijn kopje (sinds 28 okt 2026, de eigenaar: "hier graag minder ruimte
   tussen"). Zonder pilletje eromheen leek de ruimte groter dan bij de namen; de ruimte eronder blijft gelijk. */
.duel-matrix__op { margin-top: -6px; color: var(--text-dim); font-style: italic; font-size: 0.85rem; }
/* Hoeveel uitdagingen het team nog over heeft, rechts in de lade (4 okt 2026, variant A
   van de eigenaar: opvallender dan het grijze bolletje): een pil in de teamkleur,
   "5 over"; bij 0 een grijze pil "klaar". */
.duel-matrix__count {
    flex: none;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--team-accent) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--team-accent) 60%, transparent);
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.duel-matrix__count b { font-size: 1rem; font-weight: 800; }
.duel-matrix__count.is-done { background: color-mix(in srgb, var(--text) 6%, transparent); border-color: var(--line); color: var(--text-dim); }

/* De figuren van de fysieke puzzel: publieke voortgang naar de envelop. */
/* Eigen kader naast De Wacht (zelfde opmaak als .watch), want de eiertijd en
   de weg naar de envelop zijn twee verschillende dingen. */
.figures {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg), transparent 55%);
}
.figures[hidden] { display: none; }
/* Zonder De Wacht (geen teams, of het voorwerp is al opgelost) ook geen envelop-overzicht. */
.watch[hidden] + .figures { display: none; }
/* Het kopje boven de lijst links, net als de rijen eronder. */
/* Midden in het vak, net als de ringen erboven (sinds 20 okt 2026, de eigenaar: de lege ruimte rechts
   op de computer "ziet er niet zo mooi uit"). */
/* Hier is het kopje ook de titel van het vak, dus groter dan "Minuten resterend per team" (sinds 26 okt 2026,
   de eigenaar: "dat tussen haakjes mag weg en de tekst zelf wat groter"). */
.figures .watch__teams-label { margin-top: 0; margin-bottom: 10px; font-size: 0.78rem; text-align: center; }
/* Eén grid voor alle rijen (de <li> is display: contents), zodat de naamkolom
   zo breed is als de langste naam en alle balken op dezelfde x beginnen en
   de rest van de breedte vullen, tot aan de score. */
.figures__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto fit-content(45%) 1fr auto; align-items: center; gap: 8px 10px; }
.figures__row { display: contents; font-size: 0.9rem; }
.figures__row--done .figures__score { color: var(--turquoise); font-weight: 700; }
.figures__swatch { width: 10px; height: 10px; border-radius: 999px; }
.figures__name { min-width: 0; text-align: left; font-size: 0.9rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 15px korter dan de kolom (marge links), zodat de balk niet tegen de naam aan zit. */
.figures__bar { display: block; height: 6px; margin-left: 15px; border-radius: 999px; background: var(--line); overflow: hidden; }
.figures__fill { display: block; height: 100%; background: var(--turquoise); border-radius: 999px; }
/* Tot twaalf punten (WatchView::MAX_PIPS) een stip per punt in de teamkleur, met de envelop aan het
   eind (sinds 20 okt 2026, proef A: klok en stippen); daarboven de balk. Per team twee regels (sinds
   26 okt 2026, de eigenaar: "dat dit op twee regels valt en de rest niet ziet er slordig uit, misschien
   de dots op een volgende regel"): bovenaan de kleur en de naam, daaronder de stippen, de envelop en
   de stand, onder de naam. Alleen css, dus index.php en app/watch.js houden dezelfde opbouw. Het
   geheel in het midden, met de rijen links tegen elkaar (de breedste rij bepaalt de kolom). */
/* Links uitgelijnd, net als het kopje, en flink wat ruimte tussen de stippen (sinds 26 okt 2026, de eigenaar:
   "liever links uitgelijnd en flink meer ruimte tussen de dots"; op 20 okt was het juist naar het midden gegaan). */
.figures__list:has(.figures__pips) { grid-template-columns: max-content; justify-content: start; gap: 14px; }
.figures__list:has(.figures__pips) .figures__pips { gap: 12px; }
.figures:has(.figures__pips) .watch__teams-label { text-align: left; }
.figures__list:has(.figures__pips) .figures__row { display: grid; grid-template-columns: 10px auto auto; grid-template-areas: "swatch name name" ". pips score"; align-items: center; justify-content: start; gap: 6px 10px; }
.figures__list:has(.figures__pips) .figures__swatch { grid-area: swatch; }
.figures__list:has(.figures__pips) .figures__name { grid-area: name; white-space: normal; overflow: visible; line-height: 1.2; overflow-wrap: anywhere; }
.figures__list:has(.figures__pips) .figures__pips { grid-area: pips; }
.figures__list:has(.figures__pips) .figures__score { grid-area: score; }
.figures__pips { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.figures__pip { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--text) 12%, transparent); }
.figures__pip--on { background: var(--team-accent); }
.figures__goal { width: 16px; height: 16px; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; color: var(--text-dim); }
.figures__row--done .figures__goal { color: var(--turquoise); }
.figures__score { flex: none; font-variant-numeric: tabular-nums; color: var(--text); font-size: 0.85rem; }
.figures__envelope { margin: 12px 0 0; text-align: center; color: var(--turquoise); font-weight: 600; font-size: 0.92rem; }

/* Beheer: per team een rij knoppen om figuren af te vinken. */
.figures-admin__team { margin-bottom: 14px; }
.figures-admin__name { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-soft); }
.figures-admin__score { color: var(--text-dim); }
.figures-admin__row { display: flex; flex-wrap: wrap; gap: 6px; }
.figures-admin__btn {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-soft);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
.figures-admin__btn b { color: var(--text-dim); font-weight: 700; }
.figures-admin__btn.is-done { border-color: var(--turquoise); background: var(--turquoise); color: var(--on-accent); }
.figures-admin__btn.is-done b { color: var(--on-accent); }

/* Links in het paneel en in uitleg-tekst hadden geen eigen stijl en kregen dus
   het standaard browserblauw (#0000ee) op een donkere achtergrond: 1,9:1. */
.sheet__body a,
.hint a,
.watch-rules a {
    color: var(--turquoise);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sheet__body a:hover,
.hint a:hover,
.watch-rules a:hover { color: var(--text); }

/* Challenges gegroepeerd per categorie, met uitleg eronder. */

/* Categorieën als lades (<details>): dicht tot je erop tikt, met de naam en
   het aantal duels in de kop. Zo blijft een poule van 60 overzichtelijk. */
.challenge-group {
    margin: 0 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-high);
    overflow: hidden;
}

/* In het adminpaneel: lucht tussen de hint en de eerste categorie. */
.tabpanel .challenge-group:first-child {
    margin-top: 16px;
}

.challenge-group:last-child {
    margin-bottom: 0;
}

.challenge-group__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.challenge-group__title::-webkit-details-marker { display: none; }

.challenge-group__title:hover { background: rgb(255 255 255 / 3%); }

.challenge-group__chevron {
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--turquoise);
    border-bottom: 2px solid var(--turquoise);
    transform: rotate(-45deg);
    transition: transform 0.3s ease-in-out;
}

.challenge-group[open]:not(.is-closing) .challenge-group__chevron { transform: rotate(45deg); }

.challenge-group__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.challenge-group__count {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgb(0 0 0 / 22%);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-soft);
}

.challenge-group__body {
    padding: 4px 8px 8px;
    border-top: 1px solid var(--line);
}

/* Rust in de lades van het bord (sinds 8 okt 2026, de eigenaar: Mini Duels "kwam zo vol
   over, je weet niet waar je moet kijken"): minder kaders en meer lucht. De teamtegels
   zijn één paneel met dunne scheidingslijnen (randen links en boven, de buitenste vallen
   met -1px weg achter de rand van het paneel), met de teamkleur als kort streepje; de
   categorieën één lijst met dunne lijnen ertussen; de kopjes krijgen meer ruimte erboven.
   Alleen binnen .legend: De Wacht (.egg) en het paneel houden hun eigen tegels en blokken. */
.duel-panel .challenges-public__label { margin: 28px 0 10px; color: var(--text-soft); }
.legend .team-remaining { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-high); }
.legend .team-remaining__item { margin: -1px 0 0 -1px; padding: 14px 6px 12px; border: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
/* Alleen in de tegels: vóór een teamnaam (Wie mag wie) blijft het een rondje (.duel-matrix__teamname);
   tot 9 okt 2026 won deze regel daar ook en stond er een streepje dat als minteken las. */
.legend .team-remaining__item .team-remaining__swatch { width: 28px; height: 4px; margin-bottom: 10px; }
/* In de Poule een rondje in de teamkleur (sinds 6 nov 2026, variant B), en het getal groter. */
.legend #challengesTeamSummary .team-remaining__swatch { width: 10px; height: 10px; border-radius: 50%; }
#challengesTeamSummary .team-remaining__count { font-size: 1.9rem; }
.legend .challenge-group { margin: 0; border-radius: 0; border-bottom-width: 0; }
.legend .challenge-group:not(.challenge-group + .challenge-group) { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.legend .challenge-group:not(:has(+ .challenge-group)) { border-bottom-width: 1px; border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.legend .challenge-group__title { padding: 13px 14px; }

.challenge-group__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Het vlak in de achtergrondkleur van het palet (sinds 10 okt 2026, keuze B van de eigenaar):
   op een licht palet bijna wit, op een donker palet donker zoals voorheen. Tot dan vast
   zwart op 16%, en dat werd op een licht palet een grauw grijs vlak met slecht leesbare uitleg. */
.challenge-item {
    padding: 8px 10px;
    border-radius: calc(var(--radius-sm) - 4px);
    background: color-mix(in srgb, var(--bg) 60%, transparent);
}

.challenge-item__name {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}

.challenge-item__desc {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-dim);
}

/* Op een telefoon groter (sinds 28 okt 2026, de eigenaar: "De tekst van de uitleg graag wat groter op mobiel"), en de
   naam erboven iets mee, zodat die groter blijft dan de uitleg. */
@media (max-width: 719px) {
    .challenge-item__name { font-size: 0.98rem; }
    .challenge-item__desc { font-size: 0.9rem; line-height: 1.45; }
}

/* Zelf uitdagen (sinds 9 okt 2026): binnen het scorevenster is een duel in de poule een
   knop over het hele vlak; "⚔️ Uitdagen" staat op de regel van de naam, zodat de uitleg
   eronder de volle breedte houdt (ernaast werd hij op een telefoon een smalle kolom).
   Daarna kies je wie (call.js). */
.challenge-item--pick { padding: 0; }
.challenge-item__pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.challenge-item__pick:hover { background: color-mix(in srgb, var(--turquoise) 8%, transparent); }
.challenge-item__pick:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
/* 8 px tussen de knop en de uitleg (sinds 28 okt 2026, de eigenaar: "daar moet toch nog een tikkie meer ruimte
   tussen"): de knop is hoger dan de naam, en met 2 px stond hij bijna tegen de eerste regel. */
.challenge-item__pick .challenge-item__desc { grid-column: 1 / -1; margin-top: 8px; }
.challenge-item__go { padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--turquoise) 50%, var(--line)); border-radius: 999px; color: var(--turquoise); font-size: 0.78rem; font-weight: 800; white-space: nowrap; }

/* De Poule als speelkaarten (sinds 6 nov 2026, de eigenaar koos B uit drie: "een professioneler uiterlijk"). Elke
   categorie een icoon in een tegel met "3 duels" eronder en het pijltje rechts, elk duel een eigen kaart met een
   rand, de uitleg in de zachte tekstkleur, en "Uitdagen" als brede strook onderaan de kaart. Alleen in de Poule
   (.challenge-group--pool): het paneel en Wie mag wie houden hun lades. Daarvoor een pil "⚔️ Uitdagen" naast de
   naam, de uitleg gedimd en het aantal als getal rechts. */
.challenge-group--pool .challenge-group__title { gap: 12px; padding: 12px 14px; letter-spacing: 0; }
.challenge-group--pool .challenge-group__chevron { margin: 0 6px 0 4px; }
.challenge-group__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--turquoise) 16%, transparent); color: var(--turquoise); }
.challenge-group__icon .ic { width: 22px; height: 22px; }
.challenge-group__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.challenge-group--pool .challenge-group__name { font-size: 0.98rem; }
.challenge-group__sub { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); }
.challenge-group--pool .challenge-group__body { padding: 10px; }
.challenge-group--pool .challenge-group__list { gap: 10px; }
.challenge-group--pool .challenge-item { padding: 14px 16px 15px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.challenge-group--pool .challenge-item--pick { padding: 0; overflow: hidden; }
.challenge-group--pool .challenge-item__pick { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 0; }
.challenge-group--pool .challenge-item__name { font-size: 1.05rem; }
.challenge-group--pool .challenge-item__desc { margin-top: 6px; color: var(--text-soft); font-size: 0.9rem; line-height: 1.5; }
.challenge-group--pool .challenge-item__pick .challenge-item__desc { margin-top: 6px; }
.challenge-group--pool .challenge-item__go { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px -16px 0; padding: 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: color-mix(in srgb, var(--turquoise) 8%, transparent); font-size: 0.9rem; }
.challenge-group--pool .challenge-item__go .ic { width: 16px; height: 16px; stroke-width: 2; }
.challenge-group--pool .challenge-item__pick:hover { background: none; }
.challenge-group--pool .challenge-item__pick:hover .challenge-item__go { background: color-mix(in srgb, var(--turquoise) 16%, transparent); }
@media (max-width: 719px) {
    .challenge-group--pool .challenge-item__name { font-size: 1.05rem; }
    .challenge-group--pool .challenge-item__desc { font-size: 0.92rem; }
}

/* De lijniconen buiten de Poule (sinds 6 nov 2026, de eigenaar: "ja die ook lijn icons"): in een knop of label vóór het
   woord, in de meldingen en op de tv in een tegel, tussen twee gezichten de zwaarden. Daarvoor emoji. */
.ic { flex: none; }
.btn > .ic { width: 18px; height: 18px; margin: 0 8px 0 0; stroke-width: 2; }
.btn--icon > .ic { width: 16px; height: 16px; margin: 0 6px 0 0; }
.btn--icon > .ic:only-child { margin: 0 auto; }
.moment__badge .ic { width: 24px; height: 24px; }
.moment--event .moment__badge, .moment--round .moment__badge, .moment--challenge .moment__badge { color: var(--turquoise); }
.moment--lead .moment__badge, .moment--hour .moment__badge { color: var(--sulfur); }
.takeover__badge .ic { width: calc(16 * var(--mh)); height: calc(16 * var(--mh)); stroke-width: 1.5; }
.takeover__vs { display: grid; place-items: center; }
.takeover__vs .ic { width: calc(7 * var(--mh)); height: calc(7 * var(--mh)); stroke-width: 2; }
.duel-call__vs { display: grid; place-items: center; color: var(--turquoise); }
.duel-call__vs .ic { width: 16px; height: 16px; stroke-width: 2; }
.score-versus__vs { display: grid; place-items: center; color: var(--turquoise); }
.score-versus__vs .ic { width: 26px; height: 26px; }
.duel-call__live { display: inline-flex; align-items: center; gap: 5px; }
.duel-call__live .ic { width: 14px; height: 14px; stroke-width: 2.2; }
/* De actiefoto's van een duel in de Historie, elk met een kruisje om weg te halen (sinds 6 nov 2026). */
.log-item__photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.log-item__photo { position: relative; width: 56px; height: 56px; }
.log-item__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.log-item__photo-remove { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; padding: 0; border: 2px solid var(--surface); border-radius: 50%; background: var(--red); color: #fff; font: inherit; font-size: 0.9rem; font-weight: 800; line-height: 1; cursor: pointer; }
/* Hoeveel actiefoto's er al zijn, achter "Foto" (sinds 6 nov 2026). */
.duel-call__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--turquoise) 22%, transparent); color: var(--turquoise); font-size: 0.76rem; font-weight: 800; }
.score-hour .ic { width: 15px; height: 15px; stroke-width: 2; }
.duel-hour__flame { color: #ffb347; }
.duel-hour__flame .ic { width: 28px; height: 28px; }
.is-tv .duel-hour__flame .ic { width: 36px; height: 36px; }
.member__duels { display: inline-flex; align-items: center; gap: 3px; }
.member__duels .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.duel-intro__kicker { display: inline-flex; align-items: center; gap: 6px; }
.duel-intro__kicker .ic { width: 15px; height: 15px; stroke-width: 2.2; }

/* Welke duels meedoen (sinds 26 okt 2026): per categorie een rij met een vinkje, de naam en het aantal. Wat
   niet meedoet, is gedimd. */
.category-toggles { display: grid; gap: 8px; }
/* Evenveel lucht onder de uitleg als bij de poule eronder (de eigenaar, 29 okt 2026: "hier graag meer ruimte"). */
.hint + .category-toggles { margin-top: 16px; }
.category-toggle { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: opacity 0.3s ease-in-out; }
.category-toggle input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--turquoise); cursor: pointer; }
.category-toggle__name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.category-toggle__count { flex: none; font-size: 0.82rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.category-toggle:has(input:not(:checked)) { opacity: 0.55; }
.category-toggle:has(input:focus-visible) { outline: 2px solid var(--turquoise); outline-offset: 2px; }

/* Bewerkbare variant in het adminpaneel. */

.challenge-edit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.challenge-edit__top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.challenge-edit__name,
.challenge-edit__category,
.challenge-edit__desc {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}

.challenge-edit__name {
    flex: 1;
    font-weight: 700;
}

.challenge-edit__desc {
    line-height: 1.4;
    resize: vertical;
}

/* ---------- Het Geheime Kronieken-ei ---------- */

/* De hele kaart (rand, gloed, kopje, Wacht, houder-tegel) volgt het
   thema-accent, zodat Heist en Missie en de eigen klantkleuren hier ook
   landen; tot 28 sep 2026 stond dit vast op zwavelgeel. */
.egg {
    margin: 10px 0 4px;
    padding: 14px 16px;
    /* Rand en vlak in de tweede themakleur; de titel en teksten blijven in het accent. Sinds 27 okt 2026
       zonder gloed buiten de kaart (de eigenaar: "Graag geen gloed buiten de cards"). */
    border: 1px solid var(--accent-2);
    border-radius: var(--radius);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2), transparent 84%), color-mix(in srgb, var(--accent-2), transparent 95%));
}

/* Het ei met zijn titel; de Wacht en de regels staan eronder. */
.egg__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.egg__icon {
    flex: none;
    font-size: 2rem;
    line-height: 1;
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent-2), transparent 45%));
}

.egg__title {
    margin: 0 0 2px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--turquoise), var(--text) 20%);
}

.egg__status {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--text-soft), var(--text) 25%);
}

.egg__status strong { color: var(--text); }

/* De meesterproef voltooid: de Wacht is voorbij en het blok wordt een
   plaquette in de tweede themakleur, met zonnestralen achter het icoon,
   zwart-witte confetti die langzaam naar beneden dwarrelt, de naam groot en de
   gezichten van het team. De tinten liggen op vaste lichtheden van die kleur,
   zodat de donkere letters (een diepe tint van dezelfde kleur) op elk palet
   leesbaar blijven, ook op een licht palet waar de tweede kleur zelf donkerder
   is. Bewust wat gedempt (lichter dan het bord, maar niet feller dan het
   jaartal bovenaan): de eerste versie was te fel naast de rest. Alleen het
   streepje onder de naam heeft de teamkleur. */

.egg--solved {
    --plaque-cream: oklch(from var(--accent-2) 0.97 calc(c * 0.25) h);
    --plaque-hi: oklch(from var(--accent-2) 0.82 calc(c * 0.6) h);
    --plaque: oklch(from var(--accent-2) 0.74 calc(c * 0.8) h);
    --plaque-lo: oklch(from var(--accent-2) 0.66 calc(c * 0.8) h);
    --plaque-deep: oklch(from var(--accent-2) 0.59 calc(c * 0.8) h);
    --plaque-ink: oklch(from var(--accent-2) 0.22 calc(c * 0.5) h);
    --plaque-ink-soft: oklch(from var(--accent-2) 0.27 calc(c * 0.5) h);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 26px 18px 24px;
    border-color: var(--plaque-hi);
    background:
        linear-gradient(160deg, rgb(255 255 255 / 0%) 16%, rgb(255 255 255 / 20%) 23%, rgb(255 255 255 / 0%) 33%),
        linear-gradient(135deg, var(--plaque-hi) 0%, var(--plaque) 38%, var(--plaque-lo) 72%, var(--plaque-deep) 100%);
    /* Ook de kleur waar celebrateEgg() (app.js) de confetti-regen op afstemt. */
    background-color: var(--plaque);
    /* Alleen de lichte binnenrand: sinds 27 okt 2026 geen gloed buiten de kaart (de eigenaar: "Graag geen gloed
       buiten de cards"). Tot die dag ook een gloed eronder in de kleur van de plaquette. */
    box-shadow: 0 0 0 1px rgb(255 255 255 / 30%) inset;
    text-align: center;
}

/* Zonnestralen achter het icoon; één rondje per veertig seconden. */
.egg--solved::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -130px;
    left: 50%;
    width: 460px;
    height: 460px;
    margin-left: -230px;
    background: repeating-conic-gradient(rgb(255 255 255 / 24%) 0 7deg, transparent 7deg 20deg);
    -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 60%);
    mask: radial-gradient(circle, #000 0 18%, transparent 60%);
    animation: egg-rays 40s linear infinite;
}

/* Confetti in zwart, wit en een donkere tint van de plaquette: een tegel van 300 bij 260 die
   naadloos doorloopt (de laag schuift precies één tegel omlaag en begint
   opnieuw). Achter de naam gedempt, zodat die goed leesbaar blijft. */
.egg--solved::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -260px 0 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='260' viewBox='0 0 300 260'%3E%3Crect x='24' y='20' width='6' height='12' rx='1.5' fill='%231a1a1a' transform='rotate(28 27 26)'/%3E%3Crect x='230' y='60' width='6' height='12' rx='1.5' fill='%231a1a1a' transform='rotate(-35 233 66)'/%3E%3Crect x='120' y='170' width='6' height='12' rx='1.5' fill='%231a1a1a' transform='rotate(62 123 176)'/%3E%3Crect x='262' y='212' width='6' height='12' rx='1.5' fill='%231a1a1a' transform='rotate(12 265 218)'/%3E%3Crect x='84' y='60' width='6' height='12' rx='1.5' fill='%23fffaf0' transform='rotate(-22 87 66)'/%3E%3Crect x='272' y='140' width='6' height='12' rx='1.5' fill='%23fffaf0' transform='rotate(40 275 146)'/%3E%3Crect x='34' y='200' width='6' height='12' rx='1.5' fill='%23fffaf0' transform='rotate(-58 37 206)'/%3E%3Crect x='176' y='18' width='6' height='12' rx='1.5' fill='%23fffaf0' transform='rotate(75 179 24)'/%3E%3Crect x='180.5' y='97' width='5' height='10' rx='1.5' fill='%23000' fill-opacity='.3' transform='rotate(15 183 102)'/%3E%3Crect x='58.5' y='129' width='5' height='10' rx='1.5' fill='%23000' fill-opacity='.3' transform='rotate(-40 61 134)'/%3E%3Ccircle cx='270' cy='22' r='3' fill='%231a1a1a'/%3E%3Ccircle cx='66' cy='98' r='2.6' fill='%231a1a1a'/%3E%3Ccircle cx='196' cy='240' r='3.2' fill='%231a1a1a'/%3E%3Ccircle cx='150' cy='64' r='2.2' fill='%231a1a1a'/%3E%3Ccircle cx='150' cy='232' r='3' fill='%23fffaf0'/%3E%3Ccircle cx='214' cy='150' r='2.4' fill='%23fffaf0'/%3E%3Ccircle cx='16' cy='150' r='2.2' fill='%23fffaf0'/%3E%3Ccircle cx='110' cy='22' r='2.6' fill='%23fffaf0'/%3E%3Ccircle cx='100' cy='244' r='2.4' fill='%23000' fill-opacity='.3'/%3E%3Ccircle cx='244' cy='110' r='2.6' fill='%23000' fill-opacity='.3'/%3E%3Cpath d='M136 120q5 -7 10 0t10 0' fill='none' stroke='%231a1a1a' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M232 186q5 -7 10 0t10 0' fill='none' stroke='%23fffaf0' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M28 64q4 -6 8 0t8 0' fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M60 226l2 4 4 2-4 2-2 4-2-4-4-2 4-2z' fill='%23fffaf0'/%3E%3Cpath d='M252 30l2 4 4 2-4 2-2 4-2-4-4-2 4-2z' fill='%23fffaf0'/%3E%3C/svg%3E") 0 0 / 300px 260px repeat;
    -webkit-mask: linear-gradient(90deg, #000 0 16%, rgb(0 0 0 / 22%) 34% 66%, #000 84%);
    mask: linear-gradient(90deg, #000 0 16%, rgb(0 0 0 / 22%) 34% 66%, #000 84%);
    animation: egg-confetti 18s linear infinite;
}

@keyframes egg-rays { to { transform: rotate(1turn); } }
@keyframes egg-confetti { to { transform: translateY(260px); } }

.egg--solved .egg__head {
    flex-direction: column;
    gap: 10px;
}

.egg--solved .egg__icon {
    font-size: 3.8rem;
    filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--plaque-ink) 38%, transparent));
}

.egg--solved .egg__title {
    margin: 0 0 4px;
    font-size: 0.76rem;
    letter-spacing: 0.2em;
    color: var(--plaque-ink-soft);
}

.egg--solved .egg__status {
    font-size: 1rem;
    font-weight: 700;
    color: var(--plaque-ink-soft);
}

.egg--solved .egg__status strong {
    display: block;
    margin-top: 2px;
    font-size: clamp(1.85rem, 8.5vw, 2.5rem);
    font-weight: 900;
    line-height: 1.05;
    color: var(--plaque-ink);
    text-shadow: 0 1px 0 rgb(255 255 255 / 45%);
    text-wrap: balance;
}

/* Het streepje in de teamkleur (team-accent--*, app.js en WatchView). */
.egg--solved .egg__status strong::after {
    content: "";
    display: block;
    width: 56px;
    height: 6px;
    margin: 12px auto 0;
    border-radius: 3px;
    background: var(--team-accent, var(--plaque-ink));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--plaque-cream) 70%, transparent);
}

.egg__faces {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.egg__faces li {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 3px solid var(--plaque-cream);
    border-radius: 50%;
    background: var(--plaque-hi);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--plaque-ink) 30%, transparent);
    font-weight: 800;
    color: var(--plaque-ink);
}

.egg__faces img { width: 100%; height: 100%; object-fit: cover; }

.egg__cheer {
    margin: 14px 0 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--plaque-ink-soft);
}

/* Het moment zelf (celebrateEgg() in app.js): de plaquette springt op en er
   trekt één glans overheen. */
.egg--celebrate { animation: egg-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

.egg--celebrate .egg__head::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 60%) 50%, transparent 70%);
    transform: translateX(-100%);
    pointer-events: none;
    animation: egg-sweep 1.1s ease-in-out 0.3s both;
}

@keyframes egg-pop { from { transform: scale(0.92); } }
@keyframes egg-sweep { to { transform: translateX(100%); } }

/* De confetti-regen over het hele scherm bij dat moment: boven het paneel,
   onder de banners van de live momenten. */
.confetti-burst {
    position: fixed;
    inset: 0;
    z-index: 65;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Minder beweging: stralen en confetti staan stil, geen sprong of glans. */
@media (prefers-reduced-motion: reduce) {
    .egg--solved::before,
    .egg--solved::after,
    .egg--celebrate,
    .egg--celebrate .egg__head::after { animation: none; }
}

/* Eén rij per team: het bolletje in de teamkleur en de naam links, de tijd (of
   "wint!") rechts, en de neutrale knop (Neerleggen / Nog niet voltooid) eronder.
   Tot 14 okt 2026 stonden het pilletjes in twee kolommen, die bij een lange
   teamnaam midden in "5 min" afbraken (de eigenaar: "rommelig"). */
.egg-admin {
    display: grid;
    gap: 8px;
    margin: 10px 0 22px;
}

/* Specifieker dan .btn (dat staat verderop en centreert), anders wint die. */
.egg-admin .egg-admin__row {
    justify-content: space-between;
    gap: 12px;
    padding-inline: 16px 18px;
    text-align: left;
}

.egg-admin__name {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.egg-admin__detail {
    flex: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--text-soft), var(--text) 35%);
}

.egg-admin__row.btn--primary .egg-admin__detail { color: inherit; }
.egg-admin__name .team-remaining__swatch { flex: none; width: 10px; height: 10px; margin: 0; border-radius: 999px; }

/* Vrije eiertijd bijschrijven: per team de naam en daaronder de knoppen (sinds 22 okt 2026, de eigenaar:
   een lange naam viel onder de knoppen en een korte ernaast, "zonder dat het een wirwar wordt"). */
.egg-time-admin {
    display: grid;
    gap: 14px;
    margin: 10px 0 22px;
}

.egg-time-row {
    display: grid;
    gap: 6px;
}

.egg-time-row__name {
    font-weight: 700;
    color: var(--text-soft);
}

.egg-time-row__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.egg-admin .btn { min-width: 0; }

.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 22px 4px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.section-title__meta {
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--text-dim);
}

/* ---------- De inzet (index.php, app/board.js) ---------- */

/* De inzet: waar de groep om speelt (sinds 26 okt 2026, de eigenaar: "De prijs waar om wordt gespeeld moet
   duidelijker in beeld, ook de straf voor laatste eindigen", en van de keuzepagina koos hij een eigen kaart
   boven de stand). In de tweede themakleur, zoals het duel-uur. Op de tv twee labels onder de titel
   (.hero-stakes), want daar is geen ruimte voor een kaart. */
/* Zonder gloed buiten de kaart (sinds 27 okt 2026, de eigenaar: "graag de glow om deze borders uitzetten of
   minimaliseren. Het wordt teveel", en "Graag geen gloed buiten de cards"). */
.stakes { display: grid; gap: 12px; margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--accent-2); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 16%, var(--surface)), var(--surface)); }
/* Het kopje in het midden (sinds 27 okt 2026, de eigenaar: "centreren"), en sinds 28 okt 2026 groot (de eigenaar: "de
   titel graag groter. Het valt niet op"): 1rem in plaats van 0,72rem, met iets minder spatiëring. */
.stakes__kicker { justify-self: center; text-align: center; font-size: 1rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--turquoise); }
.stakes__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.stakes__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent-2) 22%, transparent); font-size: 1.3rem; }
.stakes__label { display: block; font-size: 0.76rem; font-weight: 700; color: var(--text-soft); }
.stakes__text { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
.stakes__row--penalty .stakes__text { font-size: 0.95rem; font-weight: 700; }
.is-tv .stakes { display: none; }
.hero-stakes { display: none; }
.is-tv .hero-stakes:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 14px 0 0; }
.hero-stakes span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 1.05rem; font-weight: 700; color: var(--text); }
.hero-stakes .is-prize { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 16%, var(--surface)); }
/* Sinds 27 okt 2026 staat de inzet onder de kop van de stand ("De Buit"), met "De score" erachter boven de
   teamkaarten (de eigenaar: "de buit komt hierboven te staan en er komt ook wat spacing tussen. Op de plek van de
   huidige titel de buit komt nu te staan: de score"). "De score" alleen met de inzet erboven, anders stonden er
   twee koppen onder elkaar, en op de tv niet (daar staat de inzet in de kop). Boven de kop van de stand meer
   ruimte, onder de rijen van het verhaal. */
.stakes[hidden] + .board__score-title,
.is-tv .board__score-title { display: none; }
html:not(.is-tv) .board > #board-title { margin-top: 30px; }
/* Met de inzet staat het aantal spelers en punten bij "De score", boven de teamkaarten, en niet in de kop van de
   stand (sinds 27 okt 2026, de eigenaar wees het met een pijl aan). Zonder inzet is er geen "De score" en blijft het
   in de kop, en op de tv ook (daar is "De score" er niet). */
html:not(.is-tv) .board:has(> .stakes:not([hidden])) > #board-title .section-title__meta { display: none; }
/* Tijdens het duel-uur staat de vuurbalk op het Dashboard op de plek van de inzet, met "Extra punten!" als kop en "De
   score" boven de teamkaarten (sinds 2 nov 2026, de eigenaar koos B, placeDuelHour() in app/call.js). */
.board__hour-title { display: none; }
.board--duel-hour > #board-title .board__ledger,
.board--duel-hour > #board-title .section-title__meta,
.board--duel-hour > .stakes { display: none; }
.board--duel-hour > #board-title .board__hour-title { display: inline; }
.board--duel-hour > .board__score-title { display: flex; }
.board--duel-hour > .duel-hour { margin: 0 0 22px; }
/* Op het tabblad Eretitels geen duel-uur (sinds 2 nov 2026, de eigenaar: "duel uur weergave bij Eretitels weghalen aub"). */
html[data-board-tab="titles"]:not(.is-tv) .duel-hour { display: none; }

/* "De prijsuitreiking volgt" (sinds 27 okt 2026, de eigenaar koos "pas na de uitreiking"): na de trip, tot de
   uitreiking, op de plek van de terugblik. Zoals de kaart van de inzet, maar in het midden en zonder gloed:
   een aankondiging, geen lijstje. */
.recap-pending { display: grid; gap: 6px; justify-items: center; margin: 0 0 18px; padding: 18px; border: 1px solid var(--accent-2); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 16%, var(--surface)), var(--surface)); text-align: center; }
.recap-pending__kicker { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--turquoise); }
.recap-pending__title { margin: 0; font-size: 1.35rem; line-height: 1.2; text-wrap: balance; }
.recap-pending__text { margin: 0; max-width: 34ch; font-size: 0.95rem; color: var(--text-soft); text-wrap: balance; }
.recap-pending__go { margin-top: 10px; }

/* ---------- Scorebord ---------- */

/* Na een vastgelegd duel springt het beeld hierheen (showBoard() in app/board.js, sinds 20 okt 2026):
   de kop vrij van de foto rechtsboven, en op de computer van de tabbalk die bovenin blijft staan. */
.board { scroll-margin-top: calc(var(--safe-top) + 70px); }
@media (min-width: 1201px) { .board { scroll-margin-top: 86px; } }

.board__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.board__empty {
    padding: 28px 16px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--text-dim);
    text-align: center;
}

.team-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    /* Gradiënt in de primaire themakleur (sterk linksboven, zacht rechtsonder; geen tweede kleur) met een
       zachte glans bovenaan; geen afhankelijkheid van wat er achter de kaart zit. */
    background:
        linear-gradient(160deg, rgb(255 255 255 / 9%), transparent 42%),
        linear-gradient(135deg, color-mix(in srgb, var(--turquoise) var(--card-tint-a, 14%), transparent), color-mix(in srgb, var(--turquoise) var(--card-tint-b, 4%), transparent)),
        color-mix(in srgb, var(--surface), transparent 12%);
    border-color: color-mix(in srgb, var(--line), rgb(255 255 255 / 30%) 30%);
    box-shadow: 0 1px 0 rgb(255 255 255 / 12%) inset;
    animation: row-in 0.35s ease both;
}

@keyframes row-in {
    from { opacity: 0; transform: translateY(6px); }
}

/* Sinds 28 okt 2026 (de eigenaar koos A uit vier varianten, met "de teamkleur links van de naam iets hoger
   maken, zodat de lijn op gelijke hoogte start als de naam"): de kleurstreep begint bij de bovenkant van de naam en
   loopt tot onder de eiertijd, en de rang staat in het midden ervan. */
.team-card__head {
    --team-bar-top: 3px;
    --team-bar-h: 46px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.team-card__rank {
    flex: none;
    width: 26px;
    height: var(--team-bar-h);
    margin-top: var(--team-bar-top);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: var(--team-bar-h);
    text-align: center;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.team-card__swatch {
    flex: none;
    width: 8px;
    height: var(--team-bar-h);
    margin-top: var(--team-bar-top);
    border-radius: 999px;
}

/* De acht vaste teamkleuren (TeamColor::ORDER, sinds 26 okt 2026 opgeslagen per team; daarvoor
   uit een kleurwoord in de naam, met koper, turquoise en zes andere als terugval). */
.team-swatch--red    { background: var(--dragers-red); }
.team-swatch--green  { background: var(--dragers-green); }
.team-swatch--blue   { background: var(--dragers-blue); }
.team-swatch--yellow { background: var(--dragers-yellow); }
.team-swatch--orange { background: var(--dragers-orange); }
.team-swatch--purple { background: var(--dragers-purple); }
.team-swatch--pink   { background: var(--dragers-pink); }
/* Een rand, anders is 'wit' onzichtbaar op een licht klantpalet. */
.team-swatch--white  { background: var(--dragers-white); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 30%); }

/* Teamkleur als accent op een hele regel (zie .history__item--team). Een los
   token, want een border-kleur kan niet uit de .team-swatch--*-regels komen. */

.team-accent--red    { --team-accent: var(--dragers-red); }
.team-accent--green  { --team-accent: var(--dragers-green); }
.team-accent--blue   { --team-accent: var(--dragers-blue); }
.team-accent--yellow { --team-accent: var(--dragers-yellow); }
.team-accent--orange { --team-accent: var(--dragers-orange); }
.team-accent--purple { --team-accent: var(--dragers-purple); }
.team-accent--pink   { --team-accent: var(--dragers-pink); }
.team-accent--white  { --team-accent: var(--dragers-white); }

/* De naam over de hele breedte bovenaan, daaronder de eiertijd links en de score rechts (sinds 28 okt 2026, de
   eigenaar koos A: "is het niet zo op te lossen dat de naam altijd op 1 regel te zien is?"). Naast de score paste een
   lange naam alleen heel klein. De opmaak is dezelfde als ervoor (de namewrap doet niet mee als blok), dus het bord van
   de server en dat van het JavaScript blijven gelijk. De sterren van de koploper staan sinds 29 okt 2026 naast het
   label "aan kop" (.score-stars). */
.team-card__info {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name name" "egg figures";
    align-items: start;
    column-gap: 10px;
    row-gap: 4px;
}

/* Teams twee en verder: de score bovenaan, rechts naast de naam (sinds 28 okt 2026, de eigenaar: "bij team twee en
   verder kunnen de punten wel boven in de card staan"). De koploper houdt hem eronder. Past de naam er
   niet voluit naast, dan zet fitTeamNames() (app/board.js) de score toch eronder (--score-below): dan houdt de naam
   zijn maat. Bovenaan krijgt de score de regelhoogte van de naam (anders zakte de eiertijd onder de kleurstreep uit),
   en 3 px omhoog staat het getal op dezelfde lijn als de naam. */
.team-card:not(.team-card--1) .team-card__info:not(.team-card__info--score-below) {
    grid-template-areas: "name figures" "egg egg";
}

.team-card:not(.team-card--1) .team-card__info:not(.team-card__info--score-below) .team-card__score {
    margin-top: -3px;
    line-height: 1.5rem;
}

.team-card__namewrap {
    display: contents;
}

.team-card__name {
    grid-area: name;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 700;
    /* Vaste regelhoogte: een grotere naam maakt de kop niet hoger. Altijd op één regel: past hij niet, dan maakt
       fitTeamNames() (app/board.js) hem kleiner, tot 0,8rem, en pas daarna komen er puntjes. */
    line-height: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-card__crown-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
    /* 10px extra tot de foto's: bij de koploper (grote foto's) raakte het label ze bijna
       (de eigenaar, 4 okt 2026). Padding en geen marge, want een marge viel samen met die
       van .team-card__body. Op elke kaart, zodat ze gelijk blijven uitlijnen. */
    padding-bottom: 10px;
}

/* De score, rechts onder de naam (bij team twee en verder ernaast, zie hierboven). */
.team-card__figures {
    grid-area: figures;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* Direct onder de naam (de eigenaar: "de ruimte tussen de naam en het ei graag kleiner"). */
/* Een pakket zonder meesterproef (de spelavond, sinds 2 nov 2026): geen De Wacht, geen voorwerp, geen figuren en geen
   minuten op de teamkaarten. De markup blijft, want app/watch.js en de spiegeltest rekenen erop. */
html.no-trial :is(#eggSection, .section-title--trial, .team-card__egg, #figuresForm) { display: none !important; }
/* Geen weekendlied bij de spelavond (sinds 2 nov 2026): het formulier en het woord in het paneel, en de rij op het bord. */
html.no-song :is(#songForm, #songPasswordForm, #songDrawer) { display: none !important; }

.team-card__egg {
    grid-area: egg;
    align-self: start;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-dim);
    white-space: nowrap;
}

/* Het team dat het ei nu vasthoudt; volgt het thema-accent, net als de ei-kaart. */
.team-card__egg--holder {
    color: color-mix(in srgb, var(--turquoise), var(--text) 20%);
}

.team-card__score {
    flex: none;
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.team-card__score span {
    margin-left: 3px;
    font-size: 0.76rem;
    font-weight: 700;
    /* Nooit hoger dan het getal: met de regelhoogte van de score maakte het kleine "KP" de regel bovenaan 4 px hoger. */
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Het getal zelf (los, zodat app.js het kan laten optellen) houdt de stijl van de score. */
.team-card__score .team-card__num {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}

/* Live (app.js, animateBoard): geen inloop-animatie bij elke nieuwe stand,
   wel even oplichten als een team punten krijgt. */
.board__list--live .team-card { animation: none; }
.board__list--live .team-card.is-scored { animation: card-scored 1.4s ease-in-out; }
@keyframes card-scored {
    0%, 100% { box-shadow: 0 1px 0 rgb(255 255 255 / 12%) inset; }
    30% { box-shadow: 0 1px 0 rgb(255 255 255 / 12%) inset, 0 0 0 2px var(--turquoise), 0 0 28px color-mix(in srgb, var(--turquoise) 45%, transparent); }
}

/* Live momenten: banners bovenin op elke telefoon (app.js, showMoment). */
.moments {
    position: fixed;
    top: calc(var(--safe-top) + 10px);
    left: 50%;
    z-index: 70;
    display: grid;
    gap: 8px;
    width: min(440px, calc(100% - 24px));
    transform: translateX(-50%);
    pointer-events: none;
}
.moment {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    animation: moment-in 0.3s ease-in-out both;
    pointer-events: auto;
    cursor: pointer;
}
.moment.is-leaving { animation: moment-out 0.3s ease-in-out both; }
@keyframes moment-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes moment-out { to { opacity: 0; transform: translateY(-12px); } }
.moment__badge {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--green) 20%, transparent);
    color: var(--green);
    font-size: 1.1rem;
    font-weight: 800;
}
.moment--minus .moment__badge { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); }
.moment--round .moment__badge,
.moment--event .moment__badge { background: color-mix(in srgb, var(--turquoise) 18%, transparent); font-size: 1.35rem; }
.moment--lead { border-color: color-mix(in srgb, var(--sulfur) 70%, transparent); }
.moment--lead .moment__badge { background: color-mix(in srgb, var(--sulfur) 22%, transparent); font-size: 1.35rem; }
/* Het duel-uur begint (sinds 8 okt 2026): in goud. */
.moment--hour { border-color: color-mix(in srgb, var(--sulfur) 70%, transparent); }
.moment--hour .moment__badge { background: color-mix(in srgb, var(--sulfur) 22%, transparent); font-size: 1.35rem; }
/* Een uitdaging uit de app (sinds 8 okt 2026): in de themakleur. */
.moment--challenge { border-color: color-mix(in srgb, var(--turquoise) 60%, transparent); }
.moment--challenge .moment__badge { background: color-mix(in srgb, var(--turquoise) 20%, transparent); font-size: 1.35rem; }
/* De uitgedaagde hield stand (sinds 26 okt 2026, de eigenaar koos A): groen, met een schild, en in de
   regel eronder de minuten van zijn team in groen en de -1 van de uitdager in rood. */
.moment--defend { border-color: color-mix(in srgb, var(--green) 60%, transparent); }
.moment--defend .moment__badge { font-size: 1.35rem; }
.moment__text .moment__gain { font-weight: 700; color: var(--green); }
.moment__text .moment__loss { font-weight: 700; color: var(--red); }
.moment__text { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.moment__text strong { font-size: 1rem; color: var(--text); }
.moment__text span { overflow: hidden; font-size: 0.85rem; color: var(--text-soft); text-overflow: ellipsis; white-space: nowrap; }
/* Een banner met een knop ("Wraak op ...?", de herinnering): de knop rechts, klein. */
.moment .moment__action { flex: none; min-height: 40px; padding: 0 14px; font-size: 0.88rem; }

/* ---------- De terugblik bovenaan het bord (index.php, Recap) ---------- */

.recap {
    margin: 0 0 22px;
    padding: 22px 18px;
    border: 1px solid color-mix(in srgb, var(--sulfur) 55%, var(--line));
    border-radius: var(--radius);
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--sulfur) 12%, transparent), transparent 70%),
        var(--surface);
    text-align: center;
    animation: row-in 0.35s ease both;
}
.recap__kicker,
.recap__subtitle { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sulfur); }
/* Het jaartal groot onder "De winnaar van ...", in hetzelfde koper als het
   jaartal bovenaan het bord (de tweede themakleur). */
/* Zelfde dikte en letterafstand als het jaartal bovenaan het bord (.hero__year,
   een h1: 700, -0,01em); met 900 stonden er twee diktes naast elkaar. */
.recap__year {
    display: block;
    margin: 6px 0 4px;
    font-size: clamp(2.8rem, 14vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    background: linear-gradient(180deg, var(--hero-year-top, #fff3e6) 0%, var(--hero-year-mid, var(--copper-bright)) 50%, var(--hero-year-deep, var(--copper-deep)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.recap__title { margin: 6px 0 0; font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.15; text-wrap: balance; }
.recap__faces { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.recap__faces li { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border: 2px solid var(--sulfur); border-radius: 50%; background: var(--surface-high); font-weight: 800; color: var(--text-soft); }
.recap__faces img { width: 100%; height: 100%; object-fit: cover; }
.recap__prize { margin: 12px 0 0; font-weight: 700; }
/* Zelf de prijsuitreiking bekijken (sinds 8 okt 2026, de eigenaar: "een makkelijke en
   duidelijke knop"): groot onder de winnaar; de regel eronder ("Alleen op jouw telefoon,
   zo vaak je wilt") is op 10 okt 2026 weg (de eigenaar). Op de tv niet: daar speelt hij
   voor iedereen tegelijk. */
.recap__play { margin-top: 16px; gap: 8px; }
.is-tv .recap__play { display: none; }
.recap__standings { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.recap__row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-high); }
.recap__rank { flex: none; width: 22px; font-weight: 800; text-align: center; color: var(--text-dim); }
.recap__row:first-child .recap__rank { color: var(--sulfur); }
.recap__swatch { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.recap__team { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.recap__score { font-weight: 800; font-variant-numeric: tabular-nums; }
.recap__score small { margin-left: 4px; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
/* "Eretitels" als gouden lint tussen twee gouden lijnen (sinds 8 okt 2026, de eigenaar:
   "veel opvallender"; was een klein goudkleurig woord, dat op een licht palet bijna
   wegviel). Sinds 27 okt 2026 open, zie hieronder. */
.recap__subtitle { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; }
.recap__subtitle::before,
.recap__subtitle::after { content: ""; flex: 1; height: 2px; border-radius: 1px; background: linear-gradient(to right, transparent, var(--sulfur)); }
.recap__subtitle::after { background: linear-gradient(to left, transparent, var(--sulfur)); }
.recap__ribbon { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 16px; border-radius: 999px; font-size: 0.95rem; letter-spacing: 0.16em; }
/* Het lint, sinds 19 okt 2026 ook boven Eretitels in de maak op het bord. Sinds 27 okt 2026 open (de eigenaar:
   "dit graag open met een gele border en de tekst kleur mag je zelf bepalen"): een gele rand in het goud van de
   lijnen ernaast, zonder vulling of gloed, de tekst in het goud gemengd met de tekstkleur, zoals --gold-ink op het
   tabblad Eretitels (lichter op een donker palet, donkerder op een licht). Tot die dag gevuld goud met donkere
   tekst en een gloed eronder. */
.recap__ribbon,
.duel-titles__ribbon { border: 1.5px solid var(--sulfur); background: transparent; color: color-mix(in srgb, var(--sulfur) 62%, var(--text)); }
/* Twee op een rij (sinds 8 okt 2026, de eigenaar; stonden onder elkaar). Een oneven
   laatste staat in het midden, even breed als de andere. Op een telefoon (tot 520 px,
   dezelfde grens als de cijfers) één per rij (sinds 9 okt 2026, de eigenaar): naast
   elkaar liep de tekst daar over drie regels. */
.recap__awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.recap__award:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 4px); }
@media (max-width: 520px) {
    .recap__awards { grid-template-columns: minmax(0, 1fr); }
    .recap__award:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
}
/* Naast een hogere kaart in het midden bij elkaar (niet uitgerekt), en de regels gelijk
   verdeeld: op een telefoon bleef anders soms één woord los staan ("naar plek / 1"). */
/* Sinds 8 okt 2026 (de eigenaar: "mooier") met een icoon per titel bovenaan en een
   warme gouden zweem op het vlak, bij het lint erboven. */
.recap__award { display: grid; align-content: center; gap: 2px; padding: 12px 12px 11px; border: 1px solid color-mix(in srgb, var(--sulfur) 38%, var(--line)); border-radius: var(--radius-sm); background: linear-gradient(180deg, color-mix(in srgb, var(--sulfur) 12%, var(--surface-high)), var(--surface-high)); text-wrap: balance; }
.recap__award-icon { margin-bottom: 4px; font-size: 1.55rem; line-height: 1; }
/* Onderin kleine foto's (sinds 8 okt 2026, de eigenaar): wie de titel kreeg, bij een team
   alle leden. Ze schuiven iets over elkaar, met een ring in de kleur van het vlak, zodat
   ook een groot team op één regel past. Zonder foto de beginletter. */
.recap__award-faces { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; margin: 8px 0 0; padding: 0 0 0 6px; }
.recap__award-faces li { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; overflow: hidden; border: 2px solid var(--surface-high); border-radius: 50%; background: var(--surface); font-size: 0.72rem; font-weight: 800; color: var(--text-soft); }
.recap__award-faces img { width: 100%; height: 100%; object-fit: cover; }
.recap__award-title { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.recap__award-name { font-size: 1.1rem; }
.recap__award-detail { font-size: 0.85rem; color: var(--text-soft); }
/* De eretitels in de kleur van hun zeldzaamheid, zoals kisten en wapens in games (sinds 23 okt 2026,
   de eigenaar: "de wat minder belangrijke worden grijs en naarmate ze beter en beter worden krijgen ze
   ook de betere kleur", uit drie varianten koos hij B, de gloed): grijs, groen, blauw, paars en geel.
   Welke titel welke kleur heeft, staat in Recap::TIERS. Een gloeiend icoon in de kleur en een gloed
   om de kaart, hoe beter hoe feller, zonder woord erbij. De tekst (--tier-ink) mengt de kleur met de
   tekstkleur: lichter op een donker palet, donkerder op een licht. Afgewezen: een label als
   "Legendarisch" (A) en een gekleurde rand met een ◆ en een kleurenschaal (C). Tot die dag was elke
   titel goud. Sinds 26 okt 2026 is de gloed een derde zachter, om de kaart, het icoon en het lint (de
   eigenaar: "Tikkie minder glow in de eretitels"). Daarvoor 42, 30, 22, 16 en 6%, het icoon 60%. Sinds 27 okt
   2026 geen gloed meer om de kaart (de eigenaar: "Graag geen gloed buiten de cards"): de kleur zit in de rand,
   de zweem in de kaart, het gloeiende icoon en de tekst. --tier-glow geldt nog voor het lint. */
[data-tier="legendary"] { --tier: #f2c94c; --tier-glow: 28%; }
[data-tier="epic"] { --tier: #b67cff; --tier-glow: 20%; }
[data-tier="rare"] { --tier: #4fa3ff; --tier-glow: 15%; }
[data-tier="uncommon"] { --tier: #4cd97b; --tier-glow: 11%; }
[data-tier="common"] { --tier: #a7b0ba; --tier-glow: 4%; }
[data-tier] { --tier-ink: color-mix(in srgb, var(--tier) 72%, var(--text)); --tier-gem: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tier) 55%, #fff), var(--tier) 55%, color-mix(in srgb, var(--tier) 65%, #000)); }

.recap__award[data-tier] {
    border-color: color-mix(in srgb, var(--tier) 65%, transparent);
    background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tier) 24%, transparent), transparent 72%), var(--surface-high);
}
.recap__award[data-tier] .recap__award-icon {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--tier-gem);
    box-shadow: 0 0 14px color-mix(in srgb, var(--tier) 40%, transparent);
    font-size: 1.4rem;
}
.recap__award[data-tier] .recap__award-title { color: var(--tier-ink); }

/* De titels in de maak op het tabblad Eretitels: dezelfde zweem, van links. */
.duel-call__title-row[data-tier] {
    border-color: color-mix(in srgb, var(--tier) 65%, transparent);
    background: radial-gradient(90% 140% at 0% 50%, color-mix(in srgb, var(--tier) 22%, transparent), transparent 70%), var(--surface-high);
}
.duel-call__title-row[data-tier] .duel-call__title-icon { background: var(--tier-gem); box-shadow: 0 0 12px color-mix(in srgb, var(--tier) 40%, transparent); }
.duel-call__title-row[data-tier] .duel-call__title-name { color: var(--tier-ink); }
.duel-call__title-row[data-tier] .duel-call__title-faces .duel-call__face { border-color: var(--tier); }

/* In de prijsuitreiking: de titel in de kleur, een gloed erachter en de foto's met een rand in de kleur. */
.finale__scene--award[data-tier] { position: relative; }
.finale__scene--award[data-tier]::before {
    content: "";
    position: absolute;
    inset: -12% -24%;
    z-index: -1;
    background: radial-gradient(50% 45% at 50% 45%, color-mix(in srgb, var(--tier) var(--tier-glow), transparent), transparent 70%);
    pointer-events: none;
}
.finale__scene--award[data-tier] .finale__title--award { color: var(--tier-ink); }
.finale__scene--award[data-tier] .finale__faces--big .finale__avatar { border-color: var(--tier); }
/* De cijfers (sinds 8 okt 2026, de eigenaar: "mooier"; was één regel tekst): een kopje
   met dunne lijnen ernaast (bescheidener dan het lint van de eretitels), dan één paneel
   met dunne scheidingslijnen: het getal groot in de themakleur, het label eronder, de
   getallen van een rij op één lijn. De lijnen zijn randen links en boven elk vakje (de
   buitenste vallen met -1px weg achter de rand van het paneel); geen kieren met de
   achtergrond erdoor, want die vielen op de tv bij het verkleinen soms weg. De vakjes
   van een onvolle rij groeien tot de rij vol is, dus nooit een leeg vak. Hoogstens drie op een rij, op een telefoon twee, en vier als twee rijen van
   twee: met zes op een rij liep een label als "spelers gebruikten alle uitdagingen" over
   drie regels (de eigenaar). */
.recap__stats-title { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.recap__stats-title::before,
.recap__stats-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.recap__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-high); }
.recap__stat { flex: 1 1 calc(33.333% - 1px); min-width: 0; margin: -1px 0 0 -1px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); display: grid; align-content: start; gap: 4px; padding: 12px 8px 11px; background: var(--surface-high); text-align: center; text-wrap: balance; }
.recap__stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--turquoise); font-variant-numeric: tabular-nums; }
.recap__stat-label { font-size: 0.78rem; line-height: 1.25; color: var(--text-soft); }
.recap__stats:has(> .recap__stat:nth-child(4):last-child) > .recap__stat { flex-basis: calc(50% - 1px); }
@media (max-width: 520px) { .recap__stat { flex-basis: calc(50% - 1px); } }
.recap__actions { margin-top: 18px; }

/* ---------- De prijsuitreiking (assets/js/finale.js) ---------- */

body.has-finale { overflow: hidden; }
.finale {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: calc(var(--safe-top) + 24px) 20px calc(var(--safe-bottom) + 24px);
    background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--turquoise) 18%, var(--bg)), var(--bg) 70%);
    color: var(--text);
    text-align: center;
    animation: fade-in 0.3s ease-in-out both;
}
.finale.is-closing { animation: fade-out 0.3s ease-in-out both; }
/* De video van de uitreiking delen (sinds 30 okt 2026), onder de foto van de eindstand. */
.share-sheet__video { display: grid; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.share-sheet__or { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--text-soft); text-align: center; }
/* De opname voor de video (FinaleVideoRenderer): geen knoppen in beeld. */
.finale--video :is(.finale__skip, .finale__sound, .finale__actions) { display: none; }
.finale__confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.finale__skip {
    position: absolute;
    top: calc(var(--safe-top) + 14px);
    right: 14px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-high);
    color: var(--text-soft);
    font-size: 1.5rem;
    cursor: pointer;
}
.finale__stage { position: relative; display: grid; width: min(680px, 100%); }
/* "Geluid aan" in de prijsuitreiking (sinds 8 okt 2026): zolang dit toestel nog geen
   geluid mag maken. Onderaan in het midden, in het accent, met de focus erop, zodat
   de OK-knop van een afstandsbediening hem indrukt (finale.js). */
.finale__sound {
    position: absolute;
    left: 50%;
    bottom: calc(var(--safe-bottom) + 24px);
    z-index: 2;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--turquoise), var(--turquoise-deep));
    color: var(--on-accent);
    font: inherit;
    font-weight: 800;
    box-shadow: var(--shadow);
    cursor: pointer;
}
.finale__sound:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.finale__scene { grid-area: 1 / 1; display: grid; justify-items: center; align-content: center; gap: 14px; animation: finale-in 0.3s ease-in-out both; }
.finale__scene.is-leaving { animation: finale-out 0.3s ease-in-out both; }
@keyframes finale-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes finale-out { to { opacity: 0; transform: translateY(-14px) scale(0.98); } }
.finale__kicker { margin: 0; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--turquoise); }
.finale__title { margin: 0; font-size: clamp(2rem, 9vw, 3.4rem); line-height: 1.08; color: var(--heading, var(--text)); text-wrap: balance; }
.finale__title--team { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; }
.finale__title--winner { font-size: clamp(2.4rem, 11vw, 4.2rem); }
.finale__title--award { color: var(--sulfur); }
.finale__team-name { display: inline-flex; align-items: center; gap: 12px; }
.finale__team-name i { flex: none; width: 16px; height: 16px; border-radius: 50%; }
.finale__amp { font-size: 0.7em; color: var(--text-dim); }
.finale__badge { margin: 0; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--sulfur) 22%, transparent); color: var(--sulfur); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.finale__badge--loser { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.finale__count { margin: 6px 0; font-size: clamp(5rem, 30vw, 9rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--turquoise); }
.finale__sub { margin: 0; max-width: 30ch; color: var(--text-soft); }
.finale__faces { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.finale__face { display: grid; justify-items: center; gap: 6px; width: 72px; }
.finale__avatar { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border: 2px solid var(--line); border-radius: 50%; background: var(--surface-high); font-weight: 800; color: var(--text-soft); }
.finale__avatar img { width: 100%; height: 100%; object-fit: cover; }
.finale__faces--big .finale__face { width: 88px; }
.finale__faces--big .finale__avatar { width: 80px; height: 80px; border-color: var(--sulfur); }
.finale__face-name { max-width: 100%; overflow: hidden; font-size: 0.8rem; color: var(--text-soft); text-overflow: ellipsis; white-space: nowrap; }
.finale__score { margin: 4px 0 0; font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.finale__score small { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.finale__score--winner { font-size: 3.2rem; color: var(--sulfur); }
.finale__prize { margin: 4px 0 0; font-size: 1.15rem; font-weight: 700; }
.finale__dots i { font-style: normal; animation: finale-dot 1.2s ease-in-out infinite; }
.finale__dots i:nth-child(2) { animation-delay: 0.2s; }
.finale__dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes finale-dot { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.finale__who { margin: 0; font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 800; }
.finale__detail { margin: 0; color: var(--text-soft); }
.finale__stats { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: var(--text-soft); }
.finale__stats b { font-size: 1.2rem; color: var(--text); }
.finale__actions { display: grid; gap: 10px; width: min(360px, 100%); margin-top: 10px; }
/* Op de tv in het slot een QR-code in plaats van de knop "Deel de eindstand" (sinds
   8 okt 2026): zwart op wit, zoals de code in de hoek, zo scant elke camera hem. */
.finale__qr { display: grid; justify-items: center; gap: 8px; margin-top: 12px; padding: 12px 12px 10px; border-radius: var(--radius-sm); background: #fff; color: #111; font-weight: 700; box-shadow: var(--shadow); }
.finale__qr-code { width: 168px; aspect-ratio: 1; }
.finale__qr-code svg { display: block; width: 100%; height: auto; }

/* ---------- Grote momenten op de tv (app/takeover.js) ---------- */

/* Grote momenten op de tv (sinds 26 okt 2026, de eigenaar koos B): zes seconden het hele scherm, met de teamkleur
   erachter, de foto's groot en de titel in hoofdletters. Faden in en uit in 0,3 s. */
.takeover { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: calc(4 * var(--mh)) calc(4 * var(--mw)); background: radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--team-accent, var(--turquoise)) 55%, #000) 0%, rgb(6 4 10 / 96%) 70%); color: #fff; text-align: center; animation: fade-in 0.3s ease-in-out both; }
/* Omlaag vegen sluit hem (takeover.js), dus de pagina eronder schuift niet mee. Tijdens het vegen volgt de
   doorzichtigheid de vinger, zonder het in- en uitfaden. */
.takeover { touch-action: none; }
.takeover.is-swiped, .takeover.is-swiped.is-leaving { animation: none; }
.takeover.is-leaving { animation: fade-out 0.3s ease-in-out both; }
.takeover__inner { display: grid; justify-items: center; gap: calc(3 * var(--mh)); max-width: calc(90 * var(--mw)); }
.takeover__faces { display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--mw)); }
.takeover__face { display: grid; place-items: center; width: calc(22 * var(--mh)); height: calc(22 * var(--mh)); overflow: hidden; border-radius: 50%; background: rgb(255 255 255 / 12%); box-shadow: 0 0 0 calc(0.5 * var(--mh)) rgb(6 4 10), 0 0 0 calc(1 * var(--mh)) var(--team-accent, #fff); font-size: calc(7 * var(--mh)); font-weight: 800; }
.takeover__face img { width: 100%; height: 100%; object-fit: cover; }
.takeover__faces:has(.takeover__face:nth-child(3)) .takeover__face { width: calc(17 * var(--mh)); height: calc(17 * var(--mh)); }
.takeover__face--lost { width: calc(15 * var(--mh)); height: calc(15 * var(--mh)); opacity: 0.5; filter: grayscale(1); }
.takeover__vs { font-size: calc(7 * var(--mh)); }
.takeover__badge { font-size: calc(16 * var(--mh)); line-height: 1; }
.takeover__title { margin: 0; font-size: calc(9 * var(--mh)); font-weight: 900; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 calc(0.6 * var(--mh)) calc(4 * var(--mh)) rgb(0 0 0 / 55%); }
.takeover__detail { margin: 0; font-size: calc(3.4 * var(--mh)); font-weight: 600; opacity: 0.9; }
.takeover__parts { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(2 * var(--mh)); margin: 0; }
.takeover__parts span { padding: calc(1.2 * var(--mh)) calc(2.6 * var(--mh)); border-radius: 999px; font-size: calc(2.8 * var(--mh)); font-weight: 800; }
.takeover__gain { border: calc(0.25 * var(--mh)) solid var(--green); background: color-mix(in srgb, var(--green) 28%, transparent); }
.takeover__loss { border: calc(0.25 * var(--mh)) solid var(--red); background: color-mix(in srgb, var(--red) 24%, transparent); }

/* ---------- Memes na een duel op de tv (app/memes.js, sinds 30 okt 2026) ----------
   Dertig scenes, elk zes seconden, alles met css-animaties die beginnen bij het invoegen. Gekozen in
   app/takeover.js, en met "minder beweging" niet: dan blijft het rustige grote moment. Alle animaties
   heten meme-*, zodat ze niets van de rest raken. */
.meme { overflow: hidden; --meme-sans: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.meme__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.meme .takeover__inner { position: relative; width: 100%; height: 100%; max-width: none; display: block; }
.meme__face { display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: rgb(255 255 255 / 12%); box-shadow: 0 0 0 calc(0.6 * var(--mh)) rgb(6 4 10), 0 0 0 calc(1.2 * var(--mh)) var(--team-accent, #fff); }
.meme__face img { width: 100%; height: 100%; object-fit: cover; }
.meme__caption { position: absolute; left: 0; right: 0; bottom: calc(6 * var(--mh)); display: grid; justify-items: center; gap: calc(2 * var(--mh)); animation: meme-up .5s ease-out both; animation-delay: var(--cap, 2.4s); }
.meme__caption .takeover__title { font-size: calc(6.4 * var(--mh)); }
@keyframes meme-up { from { opacity: 0; transform: translateY(calc(3 * var(--mh))); } to { opacity: 1; transform: none; } }
@keyframes meme-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Het eigen pakket van Kronieken op de tv (app/memes-kronieken.js, sinds 31 okt 2026) ----------
   Elke scène in een eigen vlak (.kr) over de hele tv, alles in vh, animaties vanaf het invoegen. */
.kr { position: absolute; inset: 0; overflow: hidden; --kr-serif: Georgia, "Times New Roman", serif; background: radial-gradient(70% 80% at 50% 40%, #3b2a18 0%, #0e0905 80%); }
.kr .meme__caption { --cap: 2.4s; bottom: calc(4 * var(--mh)); }
.kr .meme__caption .takeover__title { font-size: calc(5.4 * var(--mh)); }
.kr .meme__face { position: absolute; width: calc(22 * var(--mh)); height: calc(22 * var(--mh)); }
.kr-say { position: absolute; left: 0; right: 0; top: calc(6 * var(--mh)); margin: 0; font: italic 700 calc(6 * var(--mh))/1.1 var(--kr-serif); color: #f3dca0; animation: meme-kr-pop .4s 1.6s cubic-bezier(.2, 1.5, .5, 1) both; }
.kr-say--low { top: auto; bottom: calc(26 * var(--mh)); }
@keyframes meme-kr-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes meme-kr-fade { from { opacity: 0; } }
@keyframes meme-kr-drop { from { transform: translateY(calc(-110 * var(--mh))); } }

/* 1. Ridder */
.kr-knight { position: absolute; left: 50%; top: calc(22 * var(--mh)); width: calc(40 * var(--mh)); height: calc(34 * var(--mh)); transform: translateX(-50%); }
.kr-knight__face { left: calc(9 * var(--mh)); top: calc(8 * var(--mh)); animation: meme-kr-kneel .6s .3s ease-out both; }
@keyframes meme-kr-kneel { from { transform: translateY(calc(-6 * var(--mh))); } }
.kr-knight__sword { position: absolute; left: calc(22 * var(--mh)); top: calc(-6 * var(--mh)); font-size: calc(20 * var(--mh)); line-height: 1; transform-origin: 85% 85%; animation: meme-kr-tap 2s .6s ease-in-out both; }
@keyframes meme-kr-tap { 0% { transform: rotate(40deg); opacity: 0; } 15% { opacity: 1; } 30% { transform: rotate(-10deg) translate(calc(-6 * var(--mh)), calc(4 * var(--mh))); } 50% { transform: rotate(30deg); } 70% { transform: rotate(-10deg) translate(calc(4 * var(--mh)), calc(4 * var(--mh))); } 100% { transform: rotate(20deg); } }

/* 2. Draak */
.kr--draak { background: linear-gradient(#2a4a7a, #e08a4a 80%); }
.kr-mtn { position: absolute; bottom: calc(30 * var(--mh)); left: calc(var(--i) * 22% - 12%); width: calc(64 * var(--mh)); height: calc(30 * var(--mh)); background: #2b2233; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.kr-sky { position: absolute; inset: 0; }
.kr-dragon { position: absolute; top: calc(8 * var(--mh)); left: 0; width: calc(40 * var(--mh)); height: calc(30 * var(--mh)); animation: meme-kr-fly 4s .2s ease-in-out both; }
.kr-dragon__body { position: absolute; inset: 0; font-size: calc(28 * var(--mh)); line-height: 1; transform: scaleX(-1); }
.kr-dragon__rider { width: calc(12 * var(--mh)); height: calc(12 * var(--mh)); left: calc(15 * var(--mh)); top: calc(-2 * var(--mh)); }
@keyframes meme-kr-fly { 0% { transform: translate(calc(-50 * var(--mh)), calc(10 * var(--mh))); } 100% { transform: translate(calc(52 * var(--mw)), 0); } }
.kr-burnt { position: absolute; left: calc(10 * var(--mw)); bottom: calc(40 * var(--mh)); width: calc(16 * var(--mh)); height: calc(16 * var(--mh)); }
.kr-burnt__face { width: calc(16 * var(--mh)); height: calc(16 * var(--mh)); animation: meme-kr-soot 1s 1.6s both; }
@keyframes meme-kr-soot { to { filter: brightness(.35) sepia(1); } }
.kr-smoke { position: absolute; left: calc(10 * var(--mh)); top: calc(-10 * var(--mh)); font-size: calc(10 * var(--mh)); animation: meme-kr-fade .6s 1.8s both; }

/* 3. Wandtapijt */
.kr-rod { position: absolute; left: 50%; top: calc(5 * var(--mh)); width: calc(54 * var(--mh)); height: calc(2.4 * var(--mh)); transform: translateX(-50%); border-radius: calc(2 * var(--mh)); background: linear-gradient(#e6c06a, #8a6420); }
.kr-tapestry { position: absolute; left: 50%; top: calc(6.4 * var(--mh)); width: calc(48 * var(--mh)); height: calc(58 * var(--mh)); transform: translateX(-50%); transform-origin: top; animation: meme-kr-unroll 1.2s .3s ease-out both; }
.kr-tapestry__in { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: calc(2 * var(--mh)); padding: calc(3 * var(--mh)); background: repeating-linear-gradient(45deg, #7a1d26 0 calc(2 * var(--mh)), #6c1820 calc(2 * var(--mh)) calc(4 * var(--mh))); box-shadow: inset 0 0 0 calc(1.2 * var(--mh)) #c9a14a; color: #f3dca0; font: 700 calc(3 * var(--mh))/1.15 var(--kr-serif); text-align: center; }
.kr-tapestry__in p { margin: 0; }
.kr-tapestry__face { position: relative; width: calc(24 * var(--mh)); height: calc(24 * var(--mh)); filter: sepia(.5) saturate(1.3); }
.kr-fringe { position: absolute; left: 0; right: 0; bottom: calc(-2.4 * var(--mh)); height: calc(2.4 * var(--mh)); background: repeating-linear-gradient(90deg, #c9a14a 0 calc(.6 * var(--mh)), transparent calc(.6 * var(--mh)) calc(1.4 * var(--mh))); }
@keyframes meme-kr-unroll { from { transform: translateX(-50%) scaleY(0); } }

/* 4. Decreet */
.kr-scroll { position: absolute; left: 50%; top: calc(6 * var(--mh)); width: calc(110 * var(--mh)); transform: translateX(-50%); }
.kr-scroll__paper { position: relative; margin: 0 auto; padding: calc(5 * var(--mh)) calc(7 * var(--mh)); background: linear-gradient(90deg, #d9c08a, #f3e3b8 15%, #f3e3b8 85%, #d9c08a); color: #3a2410; font-family: var(--kr-serif); animation: meme-kr-open 1.1s .2s ease-out both; overflow: hidden; }
@keyframes meme-kr-open { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
.kr-scroll__head { margin: 0 0 calc(2 * var(--mh)); font: 700 calc(5 * var(--mh))/1 var(--kr-serif); text-align: center; }
.kr-scroll__text { margin: 0; font-size: calc(4.2 * var(--mh)); line-height: 1.35; text-align: center; }
.kr-scroll__seal { position: absolute; right: calc(3 * var(--mh)); bottom: calc(-3 * var(--mh)); display: grid; place-items: center; width: calc(11 * var(--mh)); height: calc(11 * var(--mh)); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d23a3a, #7e1010 70%); color: #ffcfbf; font: 700 calc(5 * var(--mh))/1 var(--kr-serif); animation: meme-kr-stamp .35s 1.6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes meme-kr-stamp { from { opacity: 0; transform: scale(3) rotate(-20deg); } }

/* 5. Zwaard in de steen */
.kr--zwaard { background: radial-gradient(60% 80% at 50% 30%, #3d4a2a 0%, #0b0d06 80%); }
.kr-rays { position: absolute; left: 50%; top: calc(-10 * var(--mh)); width: calc(80 * var(--mh)); height: calc(90 * var(--mh)); transform: translateX(-50%); background: conic-gradient(from 160deg at 50% 0, transparent, rgb(255 236 170 / 30%) 10deg, transparent 20deg, rgb(255 236 170 / 22%) 30deg, transparent 40deg); animation: meme-kr-fade 1s 1.6s both; }
.kr-stone { position: absolute; left: 50%; top: calc(40 * var(--mh)); width: calc(40 * var(--mh)); height: calc(18 * var(--mh)); transform: translateX(-50%); border-radius: 50% 50% 10% 10%; background: linear-gradient(#8a8f94, #4a4e52); }
.kr-stone__sword { position: absolute; left: 50%; top: calc(-18 * var(--mh)); font-size: calc(22 * var(--mh)); line-height: 1; transform: translateX(-50%) rotate(135deg); animation: meme-kr-pull 1.2s .6s cubic-bezier(.5, 0, .3, 1.4) both; }
@keyframes meme-kr-pull { 0%, 30% { transform: translate(-50%, calc(6 * var(--mh))) rotate(135deg); } 35% { transform: translate(-48%, calc(6 * var(--mh))) rotate(135deg); } 40% { transform: translate(-52%, calc(6 * var(--mh))) rotate(135deg); } 100% { transform: translate(-50%, calc(-16 * var(--mh))) rotate(135deg); } }
.kr-stone__face { left: calc(50% - calc(11 * var(--mh))); top: calc(12 * var(--mh)); width: calc(16 * var(--mh)); height: calc(16 * var(--mh)); margin-left: calc(3 * var(--mh)); animation: meme-kr-fade .5s 1.6s both; }

/* 6. Troon */
.kr-throne { position: absolute; left: 50%; top: calc(10 * var(--mh)); width: calc(40 * var(--mh)); height: calc(56 * var(--mh)); transform: translateX(-50%); }
.kr-throne__back { position: absolute; inset: calc(6 * var(--mh)) calc(4 * var(--mh)) 0; border-radius: calc(20 * var(--mh)) calc(20 * var(--mh)) calc(2 * var(--mh)) calc(2 * var(--mh)); background: linear-gradient(#8e1b2b, #4a0b14); box-shadow: inset 0 0 0 calc(1.4 * var(--mh)) #c9a14a; }
.kr-throne__face { left: calc(9 * var(--mh)); top: calc(16 * var(--mh)); }
.kr-throne__crown { position: absolute; left: 0; right: 0; top: 0; font-size: calc(14 * var(--mh)); line-height: 1; text-align: center; animation: meme-kr-crown 1.1s 1s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes meme-kr-crown { from { transform: translateY(calc(-60 * var(--mh))); } }
.kr-trumpet { position: absolute; top: calc(24 * var(--mh)); font-size: calc(14 * var(--mh)); animation: meme-kr-blow .3s ease-in-out infinite alternate; }
.kr-trumpet--l { left: calc(22 * var(--mw)); } .kr-trumpet--r { right: calc(22 * var(--mw)); transform: scaleX(-1); animation-name: meme-kr-blow2; }
@keyframes meme-kr-blow { to { transform: rotate(-10deg); } }
@keyframes meme-kr-blow2 { from { transform: scaleX(-1); } to { transform: scaleX(-1) rotate(-10deg); } }

/* 7. Glas-in-lood */
.kr--glas { background: radial-gradient(60% 80% at 50% 40%, #1a1830 0%, #05040a 80%); }
.kr-window { position: absolute; left: 50%; top: calc(4 * var(--mh)); width: calc(40 * var(--mh)); height: calc(62 * var(--mh)); transform: translateX(-50%); border-radius: calc(20 * var(--mh)) calc(20 * var(--mh)) 0 0; padding: calc(1.4 * var(--mh)); background: #2a2a2a; }
.kr-window__glass { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: calc(.6 * var(--mh)); height: 100%; overflow: hidden; border-radius: calc(19 * var(--mh)) calc(19 * var(--mh)) 0 0; background: #111; }
.kr-window__glass i { background: hsl(calc(var(--i) * 47) 70% 45%); animation: meme-kr-glow 2s calc(var(--i) * .1s) ease-in-out both; }
@keyframes meme-kr-glow { from { filter: brightness(.2); } }
.kr-window__face { left: calc(50% - calc(11 * var(--mh))); top: calc(18 * var(--mh)); box-shadow: 0 0 0 calc(1 * var(--mh)) #2a2a2a, 0 0 0 calc(2 * var(--mh)) #e6c06a; }
.kr-beam { position: absolute; left: 50%; top: calc(30 * var(--mh)); width: calc(70 * var(--mh)); height: calc(60 * var(--mh)); transform: translateX(-50%); background: linear-gradient(rgb(255 230 160 / 18%), transparent); clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%); animation: meme-kr-fade 1s 1.4s both; }

/* 8. Ei */
.kr-egg { position: absolute; left: 50%; top: calc(12 * var(--mh)); width: calc(34 * var(--mh)); height: calc(44 * var(--mh)); transform: translateX(-50%); }
.kr-egg__top, .kr-egg__bottom { position: absolute; left: 0; right: 0; background: radial-gradient(circle at 35% 30%, #fff8e6, #e8c98a 70%); }
.kr-egg__top { top: 0; height: 50%; border-radius: 50% 50% 0 0 / 70% 70% 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 80%, 70% 100%, 55% 80%, 40% 100%, 25% 80%, 10% 100%, 0 80%); z-index: 2; animation: meme-kr-shake .1s .3s 10 linear, meme-kr-lid .8s 1.4s ease-in both; }
.kr-egg__bottom { bottom: 0; height: 56%; border-radius: 0 0 50% 50% / 0 0 60% 60%; clip-path: polygon(0 20%, 10% 0, 25% 20%, 40% 0, 55% 20%, 70% 0, 85% 20%, 100% 0, 100% 100%, 0 100%); z-index: 2; }
.kr-egg__face { left: calc(6 * var(--mh)); top: calc(8 * var(--mh)); z-index: 1; animation: meme-kr-hatch .6s 1.6s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes meme-kr-shake { 50% { transform: rotate(4deg); } }
@keyframes meme-kr-lid { to { transform: translate(calc(14 * var(--mh)), calc(-40 * var(--mh))) rotate(60deg); } }
@keyframes meme-kr-hatch { from { opacity: 0; transform: translateY(calc(8 * var(--mh))) scale(.5); } }
.kr-spark { position: absolute; left: 50%; top: calc(30 * var(--mh)); color: #ffe08a; font-style: normal; font-size: calc(5 * var(--mh)); opacity: 0; animation: meme-kr-spark .8s 1.5s ease-out both; }
@keyframes meme-kr-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-30 * var(--mh))); } }

/* 9. Steekspel */
.kr--toernooi { background: linear-gradient(#5aa0d8 0 55%, #4b8a3a 55%); }
.kr-lists { position: absolute; left: 0; right: 0; top: calc(46 * var(--mh)); height: calc(4 * var(--mh)); background: repeating-linear-gradient(90deg, #f3e3b8 0 calc(6 * var(--mh)), #8e1b2b calc(6 * var(--mh)) calc(12 * var(--mh))); }
.kr-joust { position: absolute; top: calc(18 * var(--mh)); width: calc(30 * var(--mh)); height: calc(30 * var(--mh)); }
.kr-joust--w { left: 0; animation: meme-kr-charge 1.2s .2s ease-in both; }
.kr-horse { position: absolute; inset: 0; font-size: calc(26 * var(--mh)); line-height: 1; transform: scaleX(-1); }
.kr-joust--w .kr-joust__face { width: calc(11 * var(--mh)); height: calc(11 * var(--mh)); left: calc(11 * var(--mh)); top: calc(-4 * var(--mh)); }
.kr-joust--l { right: calc(14 * var(--mw)); animation: meme-kr-unhorse 1.4s 1.4s ease-out both; }
.kr-joust--l .kr-joust__face { position: relative; }
@keyframes meme-kr-charge { from { transform: translateX(calc(-40 * var(--mh))); } to { transform: translateX(calc(46 * var(--mw))); } }
@keyframes meme-kr-unhorse { to { transform: translate(calc(40 * var(--mh)), calc(-30 * var(--mh))) rotate(220deg); opacity: .2; } }
.kr-bang { position: absolute; left: 60%; top: calc(8 * var(--mh)); margin: 0; font: 900 calc(12 * var(--mh))/1 var(--kr-serif); color: #fff3c4; animation: meme-kr-pop .3s 1.35s both; }

/* 10. Kaart */
.kr-map { position: absolute; left: 50%; top: calc(4 * var(--mh)); width: calc(100 * var(--mh)); height: calc(62 * var(--mh)); transform: translateX(-50%) rotate(-2deg); background: #e6d3a3; box-shadow: inset 0 0 calc(6 * var(--mh)) rgb(120 80 30 / 45%); animation: meme-kr-mappop .6s .2s both; }
@keyframes meme-kr-mappop { from { opacity: 0; transform: translateX(-50%) rotate(-2deg) scale(.4); } }
.kr-map svg { position: absolute; inset: calc(4 * var(--mh)); width: calc(100% - calc(8 * var(--mh))); height: calc(100% - calc(8 * var(--mh))); }
.kr-map__x { position: absolute; left: 62%; top: 34%; font-size: calc(8 * var(--mh)); color: #a01e1e; animation: meme-kr-pop .3s 1.2s both; }
.kr-map__face { left: 68%; top: 6%; width: calc(18 * var(--mh)); height: calc(18 * var(--mh)); animation: meme-kr-pop .4s 1.5s both; }
.kr-map__label { position: absolute; left: 6%; top: 8%; margin: 0; font: italic 700 calc(4 * var(--mh))/1.2 var(--kr-serif); color: #3a2410; text-align: left; animation: meme-kr-fade .6s 1.8s both; }
.kr-map__label small { font-size: calc(2.8 * var(--mh)); }
.kr-map__dragons { position: absolute; right: 6%; bottom: 6%; margin: 0; font: italic calc(3 * var(--mh))/1 var(--kr-serif); color: #6a4a1c; }

/* 11. Standbeeld */
.kr-statue { position: absolute; left: 50%; top: calc(4 * var(--mh)); width: calc(40 * var(--mh)); height: calc(62 * var(--mh)); transform: translateX(-50%); }
.kr-statue__head { position: absolute; left: calc(9 * var(--mh)); top: 0; width: calc(22 * var(--mh)); height: calc(22 * var(--mh)); overflow: hidden; border-radius: 50%; }
.kr-statue__head img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3) brightness(1.1); }
.kr-statue__body { position: absolute; left: calc(6 * var(--mh)); top: calc(20 * var(--mh)); width: calc(28 * var(--mh)); height: calc(26 * var(--mh)); border-radius: calc(10 * var(--mh)) calc(10 * var(--mh)) 0 0; background: linear-gradient(#cfd3d6, #8f9599); }
.kr-statue__base { position: absolute; left: calc(2 * var(--mh)); right: calc(2 * var(--mh)); bottom: 0; height: calc(14 * var(--mh)); display: grid; place-items: center; background: linear-gradient(#6d5a3e, #3a2c18); color: #e6c06a; font: 700 calc(4 * var(--mh))/1 var(--kr-serif); }
.kr-cloth { position: absolute; inset: calc(-2 * var(--mh)) calc(-4 * var(--mh)) calc(12 * var(--mh)); border-radius: calc(4 * var(--mh)) calc(4 * var(--mh)) 0 0; background: linear-gradient(90deg, #6c1820, #9a2a34, #6c1820); animation: meme-kr-unveil .9s 1s ease-in both; }
@keyframes meme-kr-unveil { to { transform: translateY(calc(70 * var(--mh))); opacity: 0; } }

/* 12. Banier */
.kr-castle { position: absolute; left: 0; right: 0; bottom: calc(28 * var(--mh)); height: calc(26 * var(--mh)); background: #3a3238; clip-path: polygon(0 30%, 5% 30%, 5% 20%, 10% 20%, 10% 30%, 15% 30%, 15% 0, 25% 0, 25% 30%, 40% 30%, 40% 20%, 45% 20%, 45% 0, 55% 0, 55% 20%, 60% 20%, 60% 30%, 75% 30%, 75% 0, 85% 0, 85% 30%, 90% 30%, 90% 20%, 95% 20%, 95% 30%, 100% 30%, 100% 100%, 0 100%); }
.kr-banner { position: absolute; bottom: calc(54 * var(--mh)); left: calc(17% + var(--i) * 30%); width: calc(.8 * var(--mh)); height: calc(34 * var(--mh)); background: #2a2a2a; animation: meme-kr-drop .8s calc(.2s + var(--i) * .2s) ease-out both; }
.kr-banner__flag { position: absolute; left: calc(.8 * var(--mh)); top: 0; width: calc(18 * var(--mh)); height: calc(22 * var(--mh)); overflow: hidden; background: #8e1b2b; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); transform-origin: left; animation: meme-kr-wave 1s ease-in-out infinite alternate; }
.kr-banner__flag img { width: 70%; height: 60%; margin: calc(2 * var(--mh)) 15% 0; object-fit: cover; border-radius: 50%; }
@keyframes meme-kr-wave { to { transform: skewY(6deg) scaleX(.94); } }

/* 13. Feestmaal */
.kr-table { position: absolute; left: calc(10 * var(--mw)); right: calc(10 * var(--mw)); top: calc(46 * var(--mh)); height: calc(6 * var(--mh)); border-radius: calc(1 * var(--mh)); background: linear-gradient(#7a4a20, #4a2a10); }
.kr-feast__face { left: calc(50% - calc(11 * var(--mh))); top: calc(22 * var(--mh)); }
.kr-goblet { position: absolute; left: calc(50% + calc(12 * var(--mh))); top: calc(24 * var(--mh)); font-size: calc(12 * var(--mh)); animation: meme-kr-raise .6s 1s ease-out both; }
@keyframes meme-kr-raise { to { transform: translateY(calc(-10 * var(--mh))) rotate(-15deg); } }
.kr-leg { position: absolute; top: calc(36 * var(--mh)); font-size: calc(10 * var(--mh)); animation: meme-kr-drop .6s ease-out both; }
.kr-leg--1 { left: calc(24 * var(--mw)); animation-delay: .3s; } .kr-leg--2 { left: calc(32 * var(--mw)); animation-delay: .45s; } .kr-leg--3 { right: calc(24 * var(--mw)); animation-delay: .6s; }

/* 14. Munt */
.kr-coin { position: absolute; left: 50%; top: calc(8 * var(--mh)); width: calc(46 * var(--mh)); height: calc(46 * var(--mh)); transform: translateX(-50%); animation: meme-kr-spin 1.8s .2s cubic-bezier(.2, .6, .3, 1) both; }
.kr-coin__face { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1a8, #d4a017 60%, #8a6410); box-shadow: inset 0 0 0 calc(1.4 * var(--mh)) #b8860b; }
.kr-coin__face img { width: calc(26 * var(--mh)); height: calc(26 * var(--mh)); object-fit: cover; border-radius: 50%; filter: sepia(1) saturate(2.2) brightness(.9); }
.kr-coin__face p { margin: calc(1 * var(--mh)) 0 0; font: 700 calc(2.6 * var(--mh))/1 var(--kr-serif); color: #5a3e08; letter-spacing: .2em; }
@keyframes meme-kr-spin { from { transform: translateX(-50%) rotateY(1440deg) scale(.3); } }
.kr-coin__drop { position: absolute; top: calc(-10 * var(--mh)); font-size: calc(6 * var(--mh)); animation: meme-kr-rain 1.6s ease-in both; }
@keyframes meme-kr-rain { to { transform: translateY(calc(80 * var(--mh))) rotate(360deg); } }

/* 15. Tovenaar */
.kr--tovenaar { background: radial-gradient(60% 80% at 50% 40%, #2a1a4a 0%, #07040e 80%); }
.kr-hat { position: absolute; left: calc(50% - calc(16 * var(--mh))); top: calc(4 * var(--mh)); font-size: calc(26 * var(--mh)); line-height: 1; }
.kr-wizard__face { left: calc(50% - calc(11 * var(--mh))); top: calc(26 * var(--mh)); }
.kr-staff { position: absolute; left: calc(50% + calc(14 * var(--mh))); top: calc(22 * var(--mh)); font-size: calc(16 * var(--mh)); transform-origin: bottom left; animation: meme-kr-zap .5s .8s ease-in-out both; }
@keyframes meme-kr-zap { 0% { transform: rotate(-30deg); } 100% { transform: rotate(20deg); } }
.kr-star { position: absolute; left: calc(50% + calc(24 * var(--mh))); top: calc(22 * var(--mh)); font-style: normal; font-size: calc(5 * var(--mh)); color: #ffe08a; opacity: 0; animation: meme-kr-spark 1s ease-out both; }

/* 16. Schandpaal */
.kr-pillory { position: absolute; left: 50%; top: calc(14 * var(--mh)); width: calc(60 * var(--mh)); height: calc(56 * var(--mh)); transform: translateX(-50%); }
.kr-pillory__board { position: absolute; left: 0; right: 0; top: calc(10 * var(--mh)); height: calc(16 * var(--mh)); border-radius: calc(1 * var(--mh)); background: linear-gradient(#8a5a2a, #5a3410); z-index: 2; }
.kr-pillory__face { left: calc(50% - calc(11 * var(--mh))); top: calc(-4 * var(--mh)); z-index: 1; }
.kr-hand { position: absolute; top: calc(5 * var(--mh)); width: calc(6 * var(--mh)); height: calc(6 * var(--mh)); border-radius: 50%; background: #e8b98f; }
.kr-hand--l { left: calc(4 * var(--mh)); } .kr-hand--r { right: calc(4 * var(--mh)); }
.kr-pillory__post { position: absolute; left: calc(50% - calc(3 * var(--mh))); top: calc(26 * var(--mh)); width: calc(6 * var(--mh)); height: calc(30 * var(--mh)); background: #5a3410; }
.kr-tomato { position: absolute; right: calc(-10 * var(--mw)); top: calc(calc(18 * var(--mh)) + var(--y)); font-size: calc(8 * var(--mh)); animation: meme-kr-throw .7s ease-in both; }
@keyframes meme-kr-throw { to { transform: translateX(calc(-62 * var(--mw))) rotate(-540deg); opacity: .2; } }

/* 17. Verbannen */
.kr--verbannen { background: linear-gradient(#f0a868 0%, #c86a5a 38%, #2a4a6a 50%, #12283e 100%); }
.kr-sea { position: absolute; inset: 0; }
.kr-sun { position: absolute; left: 50%; top: calc(32 * var(--mh)); width: calc(26 * var(--mh)); height: calc(13 * var(--mh)); transform: translateX(-50%); border-radius: calc(13 * var(--mh)) calc(13 * var(--mh)) 0 0; background: #ffd27a; }
.kr-boat { position: absolute; left: 50%; top: calc(44 * var(--mh)); width: calc(30 * var(--mh)); height: calc(30 * var(--mh)); transform: translateX(-50%); transform-origin: 50% 80%; animation: meme-kr-sail 5s .4s cubic-bezier(.3, 0, .6, 1) both; }
.kr-boat__face { left: calc(7 * var(--mh)); top: 0; width: calc(16 * var(--mh)); height: calc(16 * var(--mh)); }
.kr-boat__hull { position: absolute; left: 0; right: 0; top: calc(10 * var(--mh)); font-size: calc(22 * var(--mh)); line-height: 1; text-align: center; animation: meme-kr-rock 1s ease-in-out infinite alternate; }
@keyframes meme-kr-sail { from { transform: translate(-50%, calc(6 * var(--mh))) scale(1.2); } to { transform: translate(-50%, calc(-6 * var(--mh))) scale(.6); } }
@keyframes meme-kr-rock { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.kr-quay { position: absolute; left: calc(6 * var(--mw)); bottom: calc(22 * var(--mh)); animation: meme-kr-drop .6s 1.2s cubic-bezier(.3, 1.3, .5, 1) both; }
.kr-verdict { margin: 0; display: grid; gap: calc(.6 * var(--mh)); padding: calc(2 * var(--mh)) calc(3 * var(--mh)); border: calc(.6 * var(--mh)) solid #5a3410; background: #c89a5a; color: #3a2410; font: 700 calc(5 * var(--mh))/1 var(--kr-serif); letter-spacing: .06em; transform: rotate(-5deg); }
.kr-verdict small { font: italic calc(2.6 * var(--mh))/1 var(--kr-serif); letter-spacing: 0; }

/* 18. Kikker */
.kr-frog__face { left: calc(50% - calc(11 * var(--mh))); top: calc(18 * var(--mh)); animation: meme-kr-gone .1s 1.4s both; }
@keyframes meme-kr-gone { to { opacity: 0; } }
.kr-poof { position: absolute; left: calc(50% - calc(10 * var(--mh))); top: calc(16 * var(--mh)); font-size: calc(20 * var(--mh)); line-height: 1; opacity: 0; animation: meme-kr-poof .6s 1.2s ease-out both; }
@keyframes meme-kr-poof { 0% { opacity: 0; transform: scale(.3); } 40% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.6); } }
.kr-frog { position: absolute; left: calc(50% - calc(9 * var(--mh))); top: calc(20 * var(--mh)); font-size: calc(18 * var(--mh)); line-height: 1; animation: meme-kr-pop .4s 1.5s both, meme-kr-hop .5s 2s ease-in-out infinite alternate; }
@keyframes meme-kr-hop { to { transform: translateY(calc(-4 * var(--mh))); } }

/* 19. Kerker */
.kr--kerker { background: radial-gradient(50% 60% at 50% 40%, #2a2420 0%, #050403 80%); }
.kr-cell { position: absolute; left: 50%; top: calc(12 * var(--mh)); width: calc(40 * var(--mh)); height: calc(44 * var(--mh)); transform: translateX(-50%); border-radius: calc(18 * var(--mh)) calc(18 * var(--mh)) 0 0; background: #15110e; overflow: hidden; }
.kr-cell__face { left: calc(9 * var(--mh)); top: calc(12 * var(--mh)); }
.kr-bars { position: absolute; inset: 0; display: flex; justify-content: space-evenly; animation: meme-kr-drop .5s 1s cubic-bezier(.5, 0, .5, 1.3) both; }
.kr-bars i { width: calc(1.4 * var(--mh)); height: 100%; background: linear-gradient(90deg, #555, #aaa, #555); }
.kr-rat { position: absolute; bottom: calc(26 * var(--mh)); left: calc(-10 * var(--mh)); font-size: calc(8 * var(--mh)); animation: meme-kr-rat 3s 1.6s linear both; }
@keyframes meme-kr-rat { to { transform: translateX(calc(60 * var(--mw))); } }
.kr-chain { position: absolute; left: calc(50% + calc(22 * var(--mh))); top: calc(16 * var(--mh)); font-size: calc(10 * var(--mh)); }

/* 20. Nar */
.kr-jester { position: absolute; left: 50%; top: calc(14 * var(--mh)); width: calc(22 * var(--mh)); height: calc(40 * var(--mh)); transform: translateX(-50%); }
.kr-jester__hat { position: absolute; left: calc(-6 * var(--mh)); right: calc(-6 * var(--mh)); top: calc(2 * var(--mh)); height: calc(16 * var(--mh)); background: linear-gradient(90deg, #8e1b2b 50%, #1d6a3a 50%); clip-path: polygon(0 40%, 22% 100%, 35% 0, 50% 85%, 65% 0, 78% 100%, 100% 40%, 92% 100%, 8% 100%); z-index: 2; animation: meme-kr-crown .9s 1s cubic-bezier(.3, 1.3, .5, 1) both; }
.kr-jester__face { left: 0; top: calc(14 * var(--mh)); }
.kr-bell { position: absolute; left: 50%; top: calc(30 * var(--mh)); font-size: calc(5 * var(--mh)); opacity: 0; animation: meme-kr-spark .9s ease-out both; }

/* Draak: pagodes in plaats van bergen (de eigenaar: "Kan dat niet met Chinese gebouwen?"). */
.kr-pagoda { position: absolute; bottom: calc(30 * var(--mh)); left: calc(var(--i) * 21% - 4%); width: calc(22 * var(--mh)); height: calc(30 * var(--mh)); background: #2b2233;
  clip-path: polygon(50% 0, 54% 8%, 80% 22%, 64% 22%, 64% 34%, 92% 50%, 72% 50%, 72% 64%, 100% 80%, 80% 80%, 80% 100%, 20% 100%, 20% 80%, 0 80%, 28% 64%, 28% 50%, 8% 50%, 36% 34%, 36% 22%, 20% 22%, 46% 8%); }
.kr--draak .kr-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(28 * var(--mh)); height: calc(2.4 * var(--mh)); background: #2b2233; }
/* Decreet: het zegel staat los van het perkament, op de onderrand, en valt er niet meer achter (de eigenaar). */
.kr-scroll { top: calc(12 * var(--mh)); }
.kr-scroll__paper { padding: calc(6 * var(--mh)) calc(8 * var(--mh)) calc(9 * var(--mh)); }
.kr-scroll__sign { margin: calc(3 * var(--mh)) 0 0; font: italic calc(3 * var(--mh))/1 var(--kr-serif); text-align: left; }
.kr-scroll__seal { right: calc(6 * var(--mh)); bottom: calc(-5 * var(--mh)); width: calc(14 * var(--mh)); height: calc(14 * var(--mh)); font-size: calc(6 * var(--mh)); z-index: 2; }
.kr-pagoda:nth-child(even) { height: calc(40 * var(--mh)); width: calc(26 * var(--mh)); }

/* Standbeeld als borstbeeld op een zuil (de eigenaar: "dit lijkt meer op een grafsteen"). */
.kr-statue { top: calc(3 * var(--mh)); height: calc(66 * var(--mh)); }
.kr-statue__head { left: calc(11 * var(--mh)); top: calc(2 * var(--mh)); width: calc(18 * var(--mh)); height: calc(20 * var(--mh)); border-radius: 50% 50% 46% 46%; z-index: 2; }
.kr-statue__head img { filter: grayscale(1) contrast(1.1) brightness(1.35); }
.kr-statue__body { left: calc(4 * var(--mh)); top: calc(17 * var(--mh)); width: calc(32 * var(--mh)); height: calc(15 * var(--mh)); border-radius: calc(16 * var(--mh)) calc(16 * var(--mh)) calc(2 * var(--mh)) calc(2 * var(--mh)) / calc(9 * var(--mh)) calc(9 * var(--mh)) calc(2 * var(--mh)) calc(2 * var(--mh)); background: radial-gradient(60% 80% at 50% 0, #f2f2ef, #b9bcbd); }
.kr-statue__laurel { position: absolute; left: calc(7 * var(--mh)); top: calc(-2 * var(--mh)); font-size: calc(7 * var(--mh)); transform: rotate(-30deg); z-index: 3; }
.kr-statue__pigeon { position: absolute; left: calc(20 * var(--mh)); top: calc(-6 * var(--mh)); font-size: calc(8 * var(--mh)); z-index: 4; animation: meme-kr-pigeon 1s 2s ease-out both; }
@keyframes meme-kr-pigeon { from { transform: translate(calc(40 * var(--mh)), calc(-30 * var(--mh))) rotate(20deg); opacity: 0; } 20% { opacity: 1; } }
.kr-statue__capital { position: absolute; left: calc(2 * var(--mh)); right: calc(2 * var(--mh)); top: calc(32 * var(--mh)); height: calc(4 * var(--mh)); border-radius: calc(.6 * var(--mh)); background: linear-gradient(#e6e6e2, #a9acad); }
.kr-statue__column { position: absolute; left: calc(6 * var(--mh)); right: calc(6 * var(--mh)); top: calc(36 * var(--mh)); height: calc(18 * var(--mh)); background: repeating-linear-gradient(90deg, #d8d9d6 0 calc(2.2 * var(--mh)), #a9acad calc(2.2 * var(--mh)) calc(2.8 * var(--mh))); }
.kr-statue__base { top: calc(54 * var(--mh)); bottom: auto; height: calc(10 * var(--mh)); left: 0; right: 0; }
.kr-cloth { inset: calc(-2 * var(--mh)) calc(-2 * var(--mh)) calc(12 * var(--mh)); }
/* Het ei: één eivorm, de twee helften passen in elkaar (de eigenaar: de foto kwam onder het ei uit). */
.kr-egg__top { height: 50%; border-radius: 50% 50% 0 0 / 90% 90% 0 0; clip-path: polygon(0 0, 100% 0, 100% 80%, 85% 80%, 70% 100%, 55% 80%, 40% 100%, 25% 80%, 10% 100%, 0 80%); }
.kr-egg__bottom { top: 40%; height: 60%; border-radius: 0 0 50% 50% / 0 0 75% 75%; clip-path: polygon(0 0, 10% 16.7%, 25% 0, 40% 16.7%, 55% 0, 70% 16.7%, 85% 0, 100% 0, 100% 100%, 0 100%); }
.kr-egg__top, .kr-egg__bottom { bottom: auto; }
.kr-egg__top { top: 0; }
/* Het ei: één eivorm, de twee helften passen in elkaar (de eigenaar: de foto kwam onder het ei uit). */
.kr-egg__top { top: 0; bottom: auto; height: 50%; border-radius: 50% 50% 0 0 / 90% 90% 0 0; clip-path: polygon(0 0, 100% 0, 100% 80%, 85% 80%, 70% 100%, 55% 80%, 40% 100%, 25% 80%, 10% 100%, 0 80%); }
.kr-egg__bottom { top: 40%; bottom: auto; height: 60%; border-radius: 0 0 50% 50% / 0 0 75% 75%; clip-path: polygon(0 0, 10% 16.7%, 25% 0, 40% 16.7%, 55% 0, 70% 16.7%, 85% 0, 100% 0, 100% 100%, 0 100%); }

/* 1. Deal with it: een pixelbril zakt langzaam op het gezicht van de winnaar. */
.meme--deal .meme__stage { position: absolute; left: 50%; top: calc(9 * var(--mh)); transform: translateX(-50%); }
.meme--deal .meme__face { width: calc(44 * var(--mh)); height: calc(44 * var(--mh)); }
.meme--deal .meme__shades { position: absolute; left: 50%; top: calc(18 * var(--mh)); width: calc(34 * var(--mh)); transform: translateX(-50%); animation: meme-shades-drop 1.6s linear both; animation-delay: .5s; image-rendering: pixelated; }
@keyframes meme-shades-drop { from { transform: translate(-50%, calc(-70 * var(--mh))); } to { transform: translate(-50%, 0); } }
.meme--deal .meme__deal { position: absolute; left: 0; right: 0; top: calc(56 * var(--mh)); margin: 0; font: 900 calc(9 * var(--mh))/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; color: #fff; text-shadow: calc(.5 * var(--mh)) 0 #000, calc(-.5 * var(--mh)) 0 #000, 0 calc(.5 * var(--mh)) #000, 0 calc(-.5 * var(--mh)) #000, calc(.8 * var(--mh)) calc(.8 * var(--mh)) #000; animation: meme-deal-pop .25s steps(2) both; animation-delay: 2.2s; }
@keyframes meme-deal-pop { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: none; } }
.meme--deal .meme__caption { --cap: 2.8s; bottom: calc(5 * var(--mh)); }
.meme--deal .meme__caption .takeover__title { font-size: calc(4.4 * var(--mh)); }

/* 2. K.O.: levensbalken, de verliezer tolt weg, K.O. knalt in beeld. */
.meme--ko .meme__bars { position: absolute; top: calc(6 * var(--mh)); left: calc(6 * var(--mw)); right: calc(6 * var(--mw)); display: grid; grid-template-columns: 1fr auto 1fr; gap: calc(3 * var(--mw)); align-items: center; font: 900 calc(3.6 * var(--mh))/1 var(--meme-sans); text-transform: uppercase; }
.meme--ko .meme__bar { position: relative; height: calc(4.4 * var(--mh)); border: calc(.5 * var(--mh)) solid #fff; background: #b3122a; transform: skewX(-12deg); }
.meme--ko .meme__bar i { position: absolute; inset: 0; background: linear-gradient(#ffe35a, #f2a516); }
.meme--ko .meme__bar--lose i { right: 0; left: auto; width: 100%; animation: meme-drain .9s ease-in both; animation-delay: .4s; }
@keyframes meme-drain { to { width: 0; } }
.meme--ko .meme__name { display: block; margin-top: calc(1.4 * var(--mh)); font-size: calc(3.4 * var(--mh)); letter-spacing: .04em; }
.meme--ko .meme__bars > div:last-child { text-align: right; }
.meme--ko .meme__time { font-size: calc(6 * var(--mh)); }
.meme--ko .meme__fight { position: absolute; top: calc(24 * var(--mh)); left: 0; right: 0; display: flex; justify-content: center; gap: calc(22 * var(--mw)); animation: meme-shake .4s linear both; animation-delay: 1.3s; }
.meme--ko .meme__face { width: calc(36 * var(--mh)); height: calc(36 * var(--mh)); }
.meme--ko .meme__fight .meme__face:last-child { animation: meme-knock 1s cubic-bezier(.3, .1, .6, 1) both; animation-delay: 1.3s; --team-accent: #888; }
@keyframes meme-knock { 0% { transform: none; } 100% { transform: translate(calc(70 * var(--mw)), calc(30 * var(--mh))) rotate(720deg) scale(.6); } }
@keyframes meme-shake { 0%, 100% { transform: none; } 20% { transform: translate(calc(-1.5 * var(--mh)), calc(1 * var(--mh))); } 40% { transform: translate(calc(1.5 * var(--mh)), calc(-1 * var(--mh))); } 60% { transform: translate(calc(-1 * var(--mh)), calc(-.5 * var(--mh))); } 80% { transform: translate(calc(1 * var(--mh)), calc(.5 * var(--mh))); } }
.meme--ko .meme__ko { position: absolute; left: 0; right: 0; top: calc(24 * var(--mh)); margin: 0; font: italic 900 calc(30 * var(--mh))/1 var(--meme-sans); letter-spacing: -.02em; background: linear-gradient(#fff6a8 10%, #ffcc1f 45%, #e8461c 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: calc(1 * var(--mh)) #1a0606; paint-order: stroke fill; animation: meme-slam .35s cubic-bezier(.2, 1.6, .5, 1) both; animation-delay: 1.35s; }
@keyframes meme-slam { from { opacity: 0; transform: scale(3.5); } to { opacity: 1; transform: none; } }
.meme--ko .meme__caption { --cap: 2.6s; }

/* 3. Breaking news: een nieuwsuitzending met een balk en een meme-ticker. */
.meme--news { background: radial-gradient(80% 90% at 30% 40%, #1c3a6e 0%, #0a1226 70%); }
.meme--news .meme__logo { position: absolute; top: calc(5 * var(--mh)); left: calc(5 * var(--mw)); display: flex; align-items: center; gap: calc(1.4 * var(--mh)); padding: calc(1.2 * var(--mh)) calc(2.2 * var(--mh)); background: #fff; color: #0a1226; font: 900 calc(3 * var(--mh))/1 var(--meme-sans); letter-spacing: .04em; animation: meme-in .3s both; }
.meme--news .meme__live { display: inline-flex; align-items: center; gap: calc(.8 * var(--mh)); padding: calc(.5 * var(--mh)) calc(1.2 * var(--mh)); background: #d4142a; color: #fff; font-size: calc(2.4 * var(--mh)); }
.meme--news .meme__live::before { content: ""; width: calc(1.2 * var(--mh)); height: calc(1.2 * var(--mh)); border-radius: 50%; background: #fff; animation: meme-blink 1s steps(2) infinite; }
@keyframes meme-blink { 50% { opacity: 0; } }
.meme--news .meme__cam { position: absolute; top: calc(13 * var(--mh)); left: 50%; width: calc(62 * var(--mh)); height: calc(44 * var(--mh)); margin-left: calc(-31 * var(--mh)); overflow: hidden; border: calc(.6 * var(--mh)) solid #fff; box-shadow: 0 calc(3 * var(--mh)) calc(6 * var(--mh)) rgb(0 0 0 / 50%); animation: meme-in .4s both; }
.meme--news .meme__cam img { width: 100%; height: 100%; object-fit: cover; animation: meme-kenburns 6s linear both; }
@keyframes meme-kenburns { from { transform: scale(1.05); } to { transform: scale(1.18) translateY(-2%); } }
.meme--news .meme__inset { position: absolute; top: calc(15 * var(--mh)); right: calc(7 * var(--mw)); width: calc(22 * var(--mh)); text-align: center; animation: meme-in .4s both; animation-delay: 1.8s; }
.meme--news .meme__inset img { width: calc(22 * var(--mh)); height: calc(22 * var(--mh)); object-fit: cover; border: calc(.5 * var(--mh)) solid #fff; filter: grayscale(1); }
.meme--news .meme__inset span { display: block; margin-top: calc(1 * var(--mh)); font: 700 calc(2.4 * var(--mh))/1.2 var(--meme-sans); opacity: .8; }
.meme--news .meme__lower { position: absolute; left: 0; right: 0; bottom: calc(17 * var(--mh)); display: flex; align-items: stretch; animation: meme-slide-in .5s cubic-bezier(.2, .8, .3, 1) both; animation-delay: .6s; }
@keyframes meme-slide-in { from { transform: translateX(-100%); } to { transform: none; } }
.meme--news .meme__breaking { display: grid; place-items: center; padding: 0 calc(3 * var(--mh)) 0 calc(5 * var(--mw)); background: #d4142a; font: 900 calc(4.4 * var(--mh))/1 var(--meme-sans); letter-spacing: .03em; }
.meme--news .meme__headline { flex: 1; padding: calc(2.4 * var(--mh)) calc(3 * var(--mh)); background: #fff; color: #0a1226; text-align: left; font: 900 calc(5.6 * var(--mh))/1.05 var(--meme-sans); text-transform: uppercase; }
.meme--news .meme__sub { display: block; margin-top: calc(.6 * var(--mh)); font-size: calc(2.6 * var(--mh)); font-weight: 700; text-transform: none; color: #3a4766; }
.meme--news .meme__ticker { position: absolute; left: 0; right: 0; bottom: calc(9 * var(--mh)); height: calc(6 * var(--mh)); overflow: hidden; background: #0a1226; border-top: calc(.4 * var(--mh)) solid #ffcc1f; animation: meme-in .3s both; animation-delay: 1s; }
.meme--news .meme__ticker p { position: absolute; top: 0; left: 0; margin: 0; white-space: nowrap; font: 700 calc(3.2 * var(--mh))/calc(6 * var(--mh)) var(--meme-sans); animation: meme-ticker 9s linear both; }
@keyframes meme-ticker { from { transform: translateX(calc(100 * var(--mw))); } to { transform: translateX(-100%); } }

/* 4. Gezocht: een wildwestposter met de winnaar, en een stempel. */
.meme--wanted { background: radial-gradient(70% 80% at 50% 45%, #5a3416 0%, #1c0f06 75%); }
.meme--wanted .meme__poster { position: absolute; left: 50%; top: calc(5 * var(--mh)); width: calc(56 * var(--mh)); margin-left: calc(-28 * var(--mh)); padding: calc(3.5 * var(--mh)) calc(4 * var(--mh)) calc(4 * var(--mh)); color: #3b2210; background: radial-gradient(120% 90% at 50% 40%, #f3dfb3 0%, #e2c48a 70%, #c99d5c 100%); clip-path: polygon(2% 0, 30% 1%, 55% 0, 80% 1.5%, 100% 0, 99% 30%, 100% 60%, 98.5% 100%, 70% 99%, 40% 100%, 12% 98.5%, 0 100%, 1% 70%, 0 35%); animation: meme-poster-drop .9s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: .2s; }
@keyframes meme-poster-drop { from { transform: translateY(calc(-100 * var(--mh))) rotate(-14deg); } to { transform: rotate(-2.5deg); } }
.meme--wanted .meme__wanted { margin: 0; font: 900 calc(11 * var(--mh))/1 "Fraunces", Georgia, serif; letter-spacing: .04em; }
.meme--wanted .meme__photo { width: calc(34 * var(--mh)); height: calc(34 * var(--mh)); margin: calc(2 * var(--mh)) auto; border: calc(.8 * var(--mh)) solid #3b2210; overflow: hidden; }
.meme--wanted .meme__photo img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.75) contrast(1.1); }
.meme--wanted .meme__who { margin: 0; font: 900 calc(6 * var(--mh))/1 "Fraunces", Georgia, serif; text-transform: uppercase; }
.meme--wanted .meme__why { margin: calc(1.2 * var(--mh)) 0 0; font: italic 600 calc(2.8 * var(--mh))/1.25 "Fraunces", Georgia, serif; }
.meme--wanted .meme__reward { margin: calc(2 * var(--mh)) 0 0; font: 900 calc(4 * var(--mh))/1 "Fraunces", Georgia, serif; letter-spacing: .04em; }
.meme--wanted .meme__stamp { position: absolute; left: 0; right: 0; top: calc(44 * var(--mh)); margin: 0 auto; width: max-content; padding: calc(1.4 * var(--mh)) calc(2.4 * var(--mh)); border: calc(1 * var(--mh)) solid #c4161c; border-radius: calc(1.4 * var(--mh)); color: #c4161c; font: 900 calc(6.4 * var(--mh))/1 var(--meme-sans); letter-spacing: .06em; transform: rotate(-14deg); animation: meme-stamp .3s cubic-bezier(.2, 1.4, .5, 1) both; animation-delay: 1.9s; mix-blend-mode: multiply; }
@keyframes meme-stamp { from { opacity: 0; transform: rotate(-14deg) scale(2.6); } to { opacity: .92; transform: rotate(-14deg); } }
.meme--wanted .meme__caption { display: none; }

/* 5. Regenwolkje: de verliezer krijgt een wolk met regen, de winnaar lacht in de hoek. */
.meme--cloud { background: radial-gradient(70% 80% at 50% 45%, #2e3a4a 0%, #0b0f16 75%); }
.meme--cloud .meme__stage { position: absolute; left: 50%; top: calc(22 * var(--mh)); transform: translateX(-50%); }
.meme--cloud .meme__face--lost { width: calc(38 * var(--mh)); height: calc(38 * var(--mh)); --team-accent: #7b8796; }
.meme--cloud .meme__face--lost img { filter: grayscale(.85) brightness(.9); }
.meme--cloud .meme__cloud { position: absolute; left: 50%; top: calc(-17 * var(--mh)); width: calc(44 * var(--mh)); margin-left: calc(-22 * var(--mh)); animation: meme-cloud-in .8s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: .3s; }
@keyframes meme-cloud-in { from { transform: translate(calc(-60 * var(--mw)), calc(-10 * var(--mh))); } to { transform: none; } }
.meme--cloud .meme__rain { position: absolute; left: 50%; top: calc(-3 * var(--mh)); width: calc(34 * var(--mh)); height: calc(30 * var(--mh)); margin-left: calc(-17 * var(--mh)); overflow: hidden; animation: meme-in .3s both; animation-delay: 1.1s; }
.meme--cloud .meme__rain i { position: absolute; top: calc(-6 * var(--mh)); width: calc(.7 * var(--mh)); height: calc(4 * var(--mh)); border-radius: calc(1 * var(--mh)); background: #8fc3ff; animation: meme-drop .7s linear infinite; }
.meme--cloud .meme__winner { position: absolute; top: calc(6 * var(--mh)); right: calc(6 * var(--mw)); display: grid; justify-items: center; gap: calc(1.4 * var(--mh)); animation: meme-in .4s both; animation-delay: 1.6s; }
.meme--cloud .meme__winner .meme__face { width: calc(18 * var(--mh)); height: calc(18 * var(--mh)); animation: meme-bounce .6s ease-in-out infinite alternate; animation-delay: 1.6s; }
.meme--cloud .meme__winner span { font: 900 calc(3 * var(--mh))/1 var(--meme-sans); }
.meme--cloud .meme__crown { position: absolute; top: calc(-6 * var(--mh)); font-size: calc(7 * var(--mh)); }
@keyframes meme-bounce { to { transform: translateY(calc(-1.6 * var(--mh))); } }
.meme--cloud .meme__caption { --cap: 2s; }
/* Bijgesteld na de eerste opname (de eerste vijf). */
.meme--ko .meme__fight { top: calc(17 * var(--mh)); }
.meme--ko .meme__face { width: calc(30 * var(--mh)); height: calc(30 * var(--mh)); }
.meme--ko .meme__fight .meme__face:first-child { animation: meme-to-center .6s ease-in-out both; animation-delay: 1.9s; }
@keyframes meme-to-center { to { transform: translateX(calc(calc(11 * var(--mw)) + calc(15 * var(--mh)))); } }
.meme--ko .meme__ko { top: calc(47 * var(--mh)); font-size: calc(22 * var(--mh)); }
.meme--ko .meme__caption { bottom: calc(4 * var(--mh)); }
.meme--ko .meme__caption .takeover__title { font-size: calc(5 * var(--mh)); }
.meme--wanted .meme__poster { width: calc(62 * var(--mh)); margin-left: calc(-31 * var(--mh)); }
.meme--wanted .meme__wanted { font-size: calc(9.5 * var(--mh)); }
.meme--wanted .meme__stamp { top: calc(33 * var(--mh)); }
.meme--cloud .meme__cloud { top: calc(-24 * var(--mh)); }
.meme--cloud .meme__rain { z-index: 2; top: calc(-8 * var(--mh)); height: calc(46 * var(--mh)); }
.meme--cloud .meme__rain i { background: #a9d4ff; width: calc(.8 * var(--mh)); height: calc(4.6 * var(--mh)); opacity: .9; }
@keyframes meme-drop { from { transform: translateY(0); } to { transform: translateY(calc(52 * var(--mh))); } }
.meme--cloud .meme__winner .meme__face { width: calc(22 * var(--mh)); height: calc(22 * var(--mh)); }
.meme--cloud .meme__crown { top: calc(-8 * var(--mh)); font-size: calc(9 * var(--mh)); line-height: 1; }

.meme img { display: block; }
.meme__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: meme-flash .5s ease-out both; animation-delay: var(--flash, .6s); }
@keyframes meme-flash { 0% { opacity: 0; } 10% { opacity: .9; } 100% { opacity: 0; } }
@keyframes meme-pop { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: none; } }
@keyframes meme-rise { from { transform: translateY(calc(70 * var(--mh))); } to { transform: none; } }
@keyframes meme-spin { to { transform: rotate(360deg); } }
@keyframes meme-float-y { 50% { transform: translateY(calc(-1.4 * var(--mh))); } }

/* 6. Podium */
.meme--podium { background: radial-gradient(70% 80% at 50% 30%, #2b2440 0%, #07060c 75%); }
.meme--podium .meme__spots i { position: absolute; top: calc(-5 * var(--mh)); width: calc(40 * var(--mh)); height: calc(95 * var(--mh)); background: linear-gradient(rgb(255 248 220 / 34%), rgb(255 248 220 / 0)); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); animation: meme-in .4s both; animation-delay: 1.4s; }
.meme--podium .meme__spots i:first-child { left: calc(50% + calc(1 * var(--mw))); }
.meme--podium .meme__spots i:last-child { left: calc(50% - calc(41 * var(--mh))); animation-delay: 1.1s; opacity: .5; }
.meme--podium .meme__podium { position: absolute; left: 50%; bottom: calc(25 * var(--mh)); display: flex; align-items: flex-end; gap: 0; transform: translateX(-50%); }
.meme--podium .meme__step { display: grid; justify-items: center; gap: calc(2 * var(--mh)); }
.meme--podium .meme__block { display: grid; place-items: start center; width: calc(34 * var(--mh)); padding-top: calc(2 * var(--mh)); font: 900 calc(12 * var(--mh))/1 var(--meme-sans); color: rgb(0 0 0 / 55%); animation: meme-rise .7s cubic-bezier(.2, .9, .3, 1) both; }
.meme--podium .meme__step--1 .meme__block { height: calc(30 * var(--mh)); background: linear-gradient(#ffe27a, #c9961c); animation-delay: .2s; }
.meme--podium .meme__step--2 .meme__block { height: calc(18 * var(--mh)); background: linear-gradient(#eef1f5, #9aa3ad); }
.meme--podium .meme__step .meme__face { width: calc(22 * var(--mh)); height: calc(22 * var(--mh)); animation: meme-drop-in .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: 1s; }
.meme--podium .meme__step--1 .meme__face { width: calc(26 * var(--mh)); height: calc(26 * var(--mh)); animation-delay: 1.5s; }
@keyframes meme-drop-in { from { opacity: 0; transform: translateY(calc(-40 * var(--mh))); } to { opacity: 1; transform: none; } }
.meme__face--lost { --team-accent: #7b8796; }
.meme__face--lost img { filter: grayscale(.85); }
.meme--podium .meme__caption { --cap: 2.2s; bottom: calc(5 * var(--mh)); }

/* 7. Tijdschriftcover */
.meme--magazine { background: #120c08; }
.meme--magazine .meme__cover { position: absolute; left: 50%; top: calc(4 * var(--mh)); width: calc(68 * var(--mh)); height: calc(92 * var(--mh)); margin-left: calc(-34 * var(--mh)); overflow: hidden; background: #f4ece0; box-shadow: 0 calc(4 * var(--mh)) calc(8 * var(--mh)) rgb(0 0 0 / 60%); animation: meme-cover-in .7s cubic-bezier(.2, .9, .3, 1) both; animation-delay: .1s; }
@keyframes meme-cover-in { from { transform: translateY(calc(100 * var(--mh))) rotate(8deg); } to { transform: rotate(-2deg); } }
/* De zoom naar boven, zodat hoofden op de cover blijven (9 nov 2026: op een actiefoto viel het hoofd van de springer weg). */
.meme--magazine .meme__cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 0; animation: meme-kenburns 6s linear both; }
.meme--magazine .meme__mast { position: absolute; top: calc(4 * var(--mh)); left: 0; right: 0; margin: 0; font: 900 calc(12.5 * var(--mh))/1 "Fraunces", Georgia, serif; letter-spacing: -.03em; color: #e3112c; }
.meme--magazine .meme__issue { position: absolute; top: calc(18 * var(--mh)); left: 0; right: 0; margin: 0; font: 700 calc(1.8 * var(--mh))/1 var(--meme-sans); letter-spacing: .3em; text-transform: uppercase; color: #fff; text-shadow: 0 calc(.2 * var(--mh)) calc(.6 * var(--mh)) #000; }
.meme--magazine .meme__lines { position: absolute; left: calc(3 * var(--mh)); top: calc(32 * var(--mh)); width: calc(26 * var(--mh)); margin: 0; padding: 0; list-style: none; text-align: left; display: grid; gap: calc(2.6 * var(--mh)); }
.meme--magazine .meme__lines li { font: 800 calc(2.4 * var(--mh))/1.15 var(--meme-sans); color: #fff; text-shadow: 0 calc(.2 * var(--mh)) calc(.8 * var(--mh)) #000; animation: meme-slide-in .4s cubic-bezier(.2, .8, .3, 1) both; }
.meme--magazine .meme__lines li:nth-child(1) { animation-delay: 1s; } .meme--magazine .meme__lines li:nth-child(2) { animation-delay: 1.3s; } .meme--magazine .meme__lines li:nth-child(3) { animation-delay: 1.6s; }
.meme--magazine .meme__lines b { display: block; color: #ffd400; font-size: calc(1.9 * var(--mh)); letter-spacing: .12em; text-transform: uppercase; }
.meme--magazine .meme__big { position: absolute; left: 0; right: 0; bottom: calc(4 * var(--mh)); margin: 0; font: 900 calc(11 * var(--mh))/.9 var(--meme-sans); color: #fff; text-shadow: 0 calc(.4 * var(--mh)) calc(2 * var(--mh)) rgb(0 0 0 / 70%); animation: meme-pop .35s cubic-bezier(.2, 1.5, .5, 1) both; animation-delay: 2.2s; }
.meme--magazine .meme__big span { display: block; font-size: calc(3 * var(--mh)); letter-spacing: .5em; color: #ffd400; }
.meme--magazine .meme__flash { --flash: .75s; }

/* De collages (sinds 6 nov 2026, de eigenaar: "Misschien kunnen er dan zelfs meerdere foto's in de animatie terecht
   komen als collage"): twee tot zes actiefoto's. Polaroids op een houten tafel, een strook uit een fotohokje, een
   fotoreportage in de krant. De plek van een polaroid komt uit polaroidSpot() in memes.js. */
.meme--polaroids { background: radial-gradient(ellipse at 50% 35%, #6b4a2c, #2b1a0d 75%); }
.meme--polaroids .meme__polaroid { --w: calc(28 + 14 * var(--big)); position: absolute; left: calc(50% + var(--x) * var(--mh)); top: calc(var(--y) * var(--mh)); width: calc(var(--w) * var(--mh)); margin: 0 0 0 calc(var(--w) * var(--mh) / -2); padding: calc(1.3 * var(--mh)) calc(1.3 * var(--mh)) calc(1 * var(--mh)); background: #fbf8f1; box-shadow: 0 calc(1.5 * var(--mh)) calc(3 * var(--mh)) rgb(0 0 0 / 55%); transform: rotate(var(--r)); animation: meme-photo-drop .55s cubic-bezier(.2, 1.3, .4, 1) both; }
.meme--polaroids .meme__polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.meme--polaroids .meme__polaroid figcaption { margin-top: calc(1 * var(--mh)); font: 700 calc(2.6 * var(--mh))/1.1 "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive; color: #2c2a26; text-align: center; }
@keyframes meme-photo-drop { from { opacity: 0; transform: translateY(calc(-40 * var(--mh))) rotate(calc(var(--r) * -3)) scale(1.3); } to { opacity: 1; transform: rotate(var(--r)); } }
.meme--booth { background: repeating-linear-gradient(90deg, #6b0f1a 0 calc(5 * var(--mh)), #4c0a12 calc(5 * var(--mh)) calc(10 * var(--mh))); }
.meme--booth .meme__neon { position: absolute; top: calc(3 * var(--mh)); left: 0; right: 0; margin: 0; font: 900 calc(8 * var(--mh))/1 var(--meme-sans); letter-spacing: .18em; color: #ffe3f1; text-shadow: 0 0 calc(1 * var(--mh)) #ff5ca8, 0 0 calc(3 * var(--mh)) #ff2d8a; animation: meme-pop .4s ease-out both; }
.meme--booth .meme__strips { position: absolute; top: calc(15 * var(--mh)); left: 0; right: 0; display: flex; justify-content: center; align-items: flex-start; gap: calc(7 * var(--mh)); }
.meme--booth .meme__booth-strip { width: calc(21 * var(--mh)); padding: calc(1.4 * var(--mh)); background: #fff; display: grid; gap: calc(1.2 * var(--mh)); box-shadow: 0 calc(1.5 * var(--mh)) calc(3 * var(--mh)) rgb(0 0 0 / 55%); animation: meme-print 1.4s cubic-bezier(.3, .8, .4, 1) both; }
.meme--booth .meme__booth-strip:nth-child(1) { transform: rotate(-3deg); } .meme--booth .meme__booth-strip:nth-child(2) { transform: rotate(2.5deg); }
.meme--booth .meme__booth-strip span { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #111; }
.meme--booth .meme__booth-strip img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); }
.meme--booth .meme__booth-strip p { margin: 0; font: 700 calc(1.7 * var(--mh))/1 ui-monospace, Menlo, monospace; letter-spacing: .2em; color: #444; }
@keyframes meme-print { from { opacity: 0; clip-path: inset(0 0 100% 0); translate: 0 calc(-6 * var(--mh)); } to { opacity: 1; clip-path: inset(0); translate: 0 0; } }
.meme--spread { background: #17130f; }
.meme--spread .meme__spread { position: absolute; left: 50%; top: calc(3 * var(--mh)); width: calc(140 * var(--mh)); height: calc(64 * var(--mh)); margin-left: calc(-70 * var(--mh)); padding: calc(2.4 * var(--mh)) calc(3 * var(--mh)); display: flex; flex-direction: column; background: #f1ebdd; color: #1b1914; text-align: left; box-shadow: 0 calc(2 * var(--mh)) calc(5 * var(--mh)) rgb(0 0 0 / 60%); animation: meme-cover-in .7s cubic-bezier(.2, .9, .3, 1) both; }
.meme--spread .meme__spread-mast { margin: 0; padding-bottom: calc(.8 * var(--mh)); border-bottom: calc(.4 * var(--mh)) solid #1b1914; text-align: center; font: 900 calc(6 * var(--mh))/1 "Fraunces", Georgia, serif; letter-spacing: .04em; }
.meme--spread .meme__spread-head { margin: calc(1.2 * var(--mh)) 0; font: 800 calc(3 * var(--mh))/1.1 var(--meme-sans); }
.meme--spread .meme__spread-grid { flex: 1 1 auto; min-height: 0; display: grid; gap: calc(1.2 * var(--mh)); grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 1fr; }
.meme--spread .meme__spread-grid--2 { grid-template-columns: 1fr 1fr; }
.meme--spread .meme__spread-grid--3 { grid-template-columns: 2fr 1fr; }
.meme--spread .meme__spread-grid--4 { grid-template-columns: 2fr 1fr; }
.meme--spread .meme__spread-grid--6 { grid-template-columns: 1fr 1fr 1fr; }
/* De eerste groot, zo dat er geen gat overblijft: 3 en 5 over twee rijen, 4 over drie, 6 even groot als de rest. */
.meme--spread :is(.meme__spread-grid--3, .meme__spread-grid--5) > figure:first-child { grid-row: span 2; }
.meme--spread .meme__spread-grid--4 > figure:first-child { grid-row: span 3; }
.meme--spread .meme__spread-grid figure { position: relative; margin: 0; min-height: 0; overflow: hidden; background: #ccc; animation: meme-up .45s ease-out both; }
.meme--spread .meme__spread-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meme--spread .meme__spread-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(.6 * var(--mh)) calc(1 * var(--mh)); background: rgb(0 0 0 / 62%); color: #fff; font: 600 calc(1.6 * var(--mh))/1.2 var(--meme-sans); }
/* Vijf collages erbij (sinds 6 nov 2026, de eigenaar: "en meer maken aub"): een filmrol, een prikbord, een museumzaal,
   een ansichtkaart en een stripverhaal. */
.meme--filmroll { background: radial-gradient(ellipse at 50% 40%, #2d2a26, #0c0b0a 75%); }
.meme--filmroll .meme__film-title { position: absolute; top: calc(4 * var(--mh)); left: 0; right: 0; margin: 0; font: 900 calc(5 * var(--mh))/1 var(--meme-sans); letter-spacing: .3em; color: #f6c46b; animation: meme-up .5s ease-out both; }
.meme--filmroll .meme__film { position: absolute; left: 0; right: 0; top: calc(15 * var(--mh)); height: calc(48 * var(--mh)); overflow: hidden; background: #141210; transform: rotate(-3deg); }
.meme--filmroll .meme__film::before, .meme--filmroll .meme__film::after { content: ""; position: absolute; left: 0; right: 0; height: calc(3 * var(--mh)); background: repeating-linear-gradient(90deg, transparent 0 calc(2 * var(--mh)), #e9e2d0 calc(2 * var(--mh)) calc(4 * var(--mh)), transparent calc(4 * var(--mh)) calc(6 * var(--mh))); opacity: .85; }
.meme--filmroll .meme__film::before { top: calc(1.2 * var(--mh)); } .meme--filmroll .meme__film::after { bottom: calc(1.2 * var(--mh)); }
.meme--filmroll .meme__film-strip { position: absolute; top: calc(6 * var(--mh)); left: 0; display: flex; gap: calc(3 * var(--mh)); padding-left: calc(3 * var(--mh)); width: max-content; animation: meme-film 9s linear both; }
.meme--filmroll .meme__frame { position: relative; flex: none; width: calc(52 * var(--mh)); height: calc(36 * var(--mh)); overflow: hidden; background: #000; }
.meme--filmroll .meme__frame img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.25) contrast(1.05); }
.meme--filmroll .meme__frame i { position: absolute; left: calc(1 * var(--mh)); bottom: calc(.6 * var(--mh)); font: 700 calc(1.6 * var(--mh))/1 ui-monospace, Menlo, monospace; font-style: normal; color: #f6a04b; }
@keyframes meme-film { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.meme--corkboard { background: radial-gradient(circle at 20% 30%, rgb(0 0 0 / 12%) 0 .3vh, transparent .4vh) 0 0 / 2.2vh 2.2vh, radial-gradient(circle at 70% 60%, rgb(255 255 255 / 10%) 0 .3vh, transparent .4vh) 0 0 / 1.7vh 1.7vh, #b4824e; }
.meme--corkboard .meme__pin-photo { --w: calc(28 + 14 * var(--big)); position: absolute; left: calc(50% + var(--x) * var(--mh)); top: calc(var(--y) * var(--mh) + 2 * var(--mh)); width: calc(var(--w) * var(--mh)); margin: 0 0 0 calc(var(--w) * var(--mh) / -2); padding: calc(.9 * var(--mh)); background: #fff; box-shadow: 0 calc(1 * var(--mh)) calc(2 * var(--mh)) rgb(0 0 0 / 45%); transform: rotate(var(--r)); animation: meme-photo-drop .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.meme--corkboard .meme__pin-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.meme--corkboard .meme__tack { position: absolute; top: calc(-1.4 * var(--mh)); left: 50%; width: calc(3 * var(--mh)); height: calc(3 * var(--mh)); margin-left: calc(-1.5 * var(--mh)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a80, #c62828 60%, #7f1010); box-shadow: 0 calc(.5 * var(--mh)) calc(.8 * var(--mh)) rgb(0 0 0 / 50%); }
.meme--corkboard .meme__note { position: absolute; right: calc(5 * var(--mh)); top: calc(5 * var(--mh)); margin: 0; padding: calc(1.6 * var(--mh)) calc(2 * var(--mh)); background: #ffe66d; color: #2b2b2b; font: 700 calc(2.8 * var(--mh))/1.1 "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive; transform: rotate(5deg); box-shadow: 0 calc(1 * var(--mh)) calc(2 * var(--mh)) rgb(0 0 0 / 35%); animation: meme-pop .35s cubic-bezier(.2, 1.5, .5, 1) both; animation-delay: 2.6s; }
.meme--museum { background: radial-gradient(ellipse at 50% 0%, #5b4f45, #231d18 70%); }
.meme--museum .meme__expo { position: absolute; top: calc(2.4 * var(--mh)); left: 0; right: 0; margin: 0; font: 700 calc(2.2 * var(--mh))/1 var(--meme-sans); letter-spacing: .4em; color: #e8d9b5; }
.meme--museum .meme__wall { position: absolute; top: calc(8 * var(--mh)); left: 50%; width: calc(108 * var(--mh)); margin-left: calc(-54 * var(--mh)); display: flex; flex-wrap: wrap; justify-content: center; gap: calc(3 * var(--mh)) calc(4 * var(--mh)); }
.meme--museum .meme__framed { margin: 0; width: calc((100% - (var(--cols) - 1) * 4 * var(--mh)) / var(--cols)); display: grid; justify-items: center; gap: calc(1 * var(--mh)); animation: meme-up .5s ease-out both; }
.meme--museum .meme__gold { display: block; width: 100%; padding: calc(1.4 * var(--mh)); background: linear-gradient(135deg, #f7e08a, #b8862f 40%, #f3d673 60%, #8a5f1c); box-shadow: 0 calc(1.5 * var(--mh)) calc(3 * var(--mh)) rgb(0 0 0 / 55%), inset 0 0 0 calc(.4 * var(--mh)) rgb(0 0 0 / 25%); }
.meme--museum .meme__gold img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: inset 0 0 0 calc(.6 * var(--mh)) #fff; }
.meme--museum .meme__framed figcaption { padding: calc(.4 * var(--mh)) calc(1.4 * var(--mh)); background: #f4efe4; color: #2a241d; font: 600 calc(1.5 * var(--mh))/1.2 var(--meme-sans); }
.meme--postcard { background: linear-gradient(160deg, #1f4e79, #0f2740); }
.meme--postcard .meme__card-post { position: absolute; left: 50%; top: calc(3 * var(--mh)); width: calc(120 * var(--mh)); height: calc(64 * var(--mh)); margin-left: calc(-60 * var(--mh)); padding: calc(2.4 * var(--mh)); display: grid; grid-template-rows: auto 1fr; gap: calc(1.6 * var(--mh)); background: #fdf6e3; box-shadow: 0 calc(2 * var(--mh)) calc(5 * var(--mh)) rgb(0 0 0 / 55%); transform: rotate(-2deg); animation: meme-cover-in .7s cubic-bezier(.2, .9, .3, 1) both; text-align: left; }
.meme--postcard .meme__greet { margin: 0; padding-right: calc(18 * var(--mh)); font: 400 calc(5 * var(--mh))/1 "Brush Script MT", "Snell Roundhand", cursive; color: #c2185b; }
.meme--postcard .meme__greet b { display: block; margin-top: calc(.6 * var(--mh)); font: 900 calc(3.6 * var(--mh))/1 var(--meme-sans); letter-spacing: .06em; text-transform: uppercase; color: #1f4e79; }
.meme--postcard .meme__post-grid { min-height: 0; display: grid; gap: calc(1 * var(--mh)); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.meme--postcard :is(.meme__post-grid--2, .meme__post-grid--4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.meme--postcard .meme__post-grid--5 > span:first-child { grid-row: span 2; }
.meme--postcard .meme__post-grid span { min-height: 0; overflow: hidden; border: calc(.5 * var(--mh)) solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 10%); animation: meme-up .45s ease-out both; }
.meme--postcard .meme__post-grid span:nth-child(2) { animation-delay: .9s; } .meme--postcard .meme__post-grid span:nth-child(3) { animation-delay: 1.1s; } .meme--postcard .meme__post-grid span:nth-child(4) { animation-delay: 1.3s; } .meme--postcard .meme__post-grid span:nth-child(5) { animation-delay: 1.5s; } .meme--postcard .meme__post-grid span:nth-child(6) { animation-delay: 1.7s; }
.meme--postcard .meme__post-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meme--postcard .meme__stamp-post { position: absolute; top: calc(2 * var(--mh)); right: calc(2.4 * var(--mh)); width: calc(13 * var(--mh)); height: calc(15 * var(--mh)); padding: calc(1 * var(--mh)); background: #fff; outline: calc(.5 * var(--mh)) dotted #fdf6e3; outline-offset: calc(-.25 * var(--mh)); box-shadow: 0 0 0 1px #ccc; transform: rotate(6deg); animation: meme-pop .35s cubic-bezier(.2, 1.5, .5, 1) both; animation-delay: 2.2s; }
.meme--postcard .meme__stamp-post img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.4); }
.meme--comic { background: radial-gradient(circle, rgb(0 0 0 / 18%) 22%, transparent 24%) 0 0 / 1.6vh 1.6vh, #ffd23f; }
.meme--comic .meme__comic { position: absolute; left: 50%; top: calc(3 * var(--mh)); width: calc(140 * var(--mh)); height: calc(64 * var(--mh)); margin-left: calc(-70 * var(--mh)); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: calc(1.6 * var(--mh)); }
.meme--comic .meme__panel { position: relative; min-height: 0; overflow: hidden; border: calc(.8 * var(--mh)) solid #111; background: #fff; transform: rotate(-1deg); animation: meme-pop .35s cubic-bezier(.2, 1.5, .5, 1) both; }
.meme--comic .meme__panel:nth-child(even) { transform: rotate(1.2deg); }
.meme--comic .meme__panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meme--comic .meme__pow { position: absolute; padding: calc(.6 * var(--mh)) calc(1.4 * var(--mh)); background: #fff; border: calc(.4 * var(--mh)) solid #111; border-radius: 40%; font: 900 calc(3.6 * var(--mh))/1 var(--meme-sans); font-style: italic; color: #e53935; -webkit-text-stroke: calc(.12 * var(--mh)) #111; transform: rotate(-8deg); }
.meme--comic .meme__pow--0 { top: calc(1.4 * var(--mh)); left: calc(1.4 * var(--mh)); }
.meme--comic .meme__pow--1 { right: calc(1.4 * var(--mh)); bottom: calc(1.4 * var(--mh)); transform: rotate(6deg); background: #ffd23f; }
.meme--comic .meme__pow--2 { right: calc(1.4 * var(--mh)); top: calc(1.4 * var(--mh)); color: #1e88e5; }
/* Tien collages erbij (sinds 6 nov 2026, de eigenaar: "maak er nog maar 10"): een plakboek, een camerarol, een vel
   postzegels, een diaprojector, een muur van tv's, popart, de koelkastdeur, een waslijn, een contactvel en een oud
   fotoalbum. Elke achtergrond is een verloop: de staande regel van .meme zet alleen een background-color. */
.meme--scrapbook { background: radial-gradient(ellipse at 50% 30%, #5a412e, #2a1c12 75%); }
.meme--scrapbook .meme__scrap { position: absolute; left: 50%; top: calc(3 * var(--mh)); width: calc(140 * var(--mh)); height: calc(64 * var(--mh)); margin-left: calc(-70 * var(--mh)); padding: calc(8 * var(--mh)) calc(4 * var(--mh)) calc(3 * var(--mh)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: calc(3.4 * var(--mh)) calc(4 * var(--mh)); background: radial-gradient(circle at 30% 40%, rgb(0 0 0 / 6%) 0 calc(.3 * var(--mh)), transparent calc(.5 * var(--mh))) 0 0 / calc(2 * var(--mh)) calc(2 * var(--mh)), #d2b48c; box-shadow: 0 calc(2 * var(--mh)) calc(5 * var(--mh)) rgb(0 0 0 / 55%); animation: meme-cover-in .7s cubic-bezier(.2, .9, .3, 1) both; }
.meme--scrapbook :is(.meme__scrap--2, .meme__scrap--4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.meme--scrapbook .meme__scrap--5 > figure:first-of-type { grid-row: span 2; }
.meme--scrapbook .meme__scrap figure { position: relative; margin: 0; min-height: 0; padding: calc(.9 * var(--mh)); background: #fff; box-shadow: 0 calc(.8 * var(--mh)) calc(1.6 * var(--mh)) rgb(0 0 0 / 30%); transform: rotate(var(--r)); animation: meme-photo-drop .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.meme--scrapbook .meme__scrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.meme--scrapbook .meme__washi { position: absolute; top: calc(-1.6 * var(--mh)); left: 50%; width: calc(12 * var(--mh)); height: calc(3.2 * var(--mh)); margin-left: calc(-6 * var(--mh)); background: repeating-linear-gradient(45deg, rgb(255 120 160 / 80%) 0 calc(1 * var(--mh)), rgb(255 190 205 / 80%) calc(1 * var(--mh)) calc(2 * var(--mh))); transform: rotate(-4deg); }
.meme--scrapbook .meme__washi--1 { background: repeating-linear-gradient(45deg, rgb(90 200 170 / 80%) 0 calc(1 * var(--mh)), rgb(170 235 215 / 80%) calc(1 * var(--mh)) calc(2 * var(--mh))); transform: rotate(3deg); }
.meme--scrapbook .meme__washi--2 { background: repeating-linear-gradient(90deg, rgb(255 205 60 / 85%) 0 calc(1 * var(--mh)), rgb(255 235 150 / 85%) calc(1 * var(--mh)) calc(2 * var(--mh))); }
.meme--scrapbook .meme__scrap-title { position: absolute; top: calc(1.6 * var(--mh)); left: calc(4 * var(--mh)); margin: 0; font: 700 calc(4.4 * var(--mh))/1 "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive; color: #3b2a1e; transform: rotate(-2deg); }
.meme--scrapbook .meme__sticker { position: absolute; font-style: normal; font-size: calc(6 * var(--mh)); line-height: 1; animation: meme-pop .35s cubic-bezier(.2, 1.5, .5, 1) both; animation-delay: 2.4s; }
.meme--scrapbook .meme__sticker--a { top: calc(1 * var(--mh)); right: calc(5 * var(--mh)); color: #ffb300; }
.meme--scrapbook .meme__sticker--b { top: calc(1.4 * var(--mh)); right: calc(13 * var(--mh)); color: #e53935; transform: rotate(12deg); animation-delay: 2.7s; }
.meme--cameraroll { background: radial-gradient(ellipse at 50% 30%, #3a3f5c, #101222 75%); }
.meme--cameraroll .meme__phone { position: absolute; left: 50%; top: calc(2 * var(--mh)); width: calc(42 * var(--mh)); height: calc(66 * var(--mh)); margin-left: calc(-21 * var(--mh)); padding: calc(4.4 * var(--mh)) calc(1.6 * var(--mh)) calc(2 * var(--mh)); display: flex; flex-direction: column; gap: calc(1.4 * var(--mh)); overflow: hidden; border-radius: calc(6 * var(--mh)); background: #0b0b0d; box-shadow: 0 0 0 calc(.8 * var(--mh)) #2c2c33, 0 calc(3 * var(--mh)) calc(6 * var(--mh)) rgb(0 0 0 / 60%); text-align: left; animation: meme-cover-in .7s cubic-bezier(.2, .9, .3, 1) both; }
.meme--cameraroll .meme__roll-head { margin: 0; padding: 0 calc(1 * var(--mh)); display: flex; justify-content: space-between; align-items: baseline; color: #fff; }
.meme--cameraroll .meme__roll-head b { font: 800 calc(3.4 * var(--mh))/1 var(--meme-sans); }
.meme--cameraroll .meme__roll-head span { font: 600 calc(1.6 * var(--mh))/1 var(--meme-sans); color: #9aa0b4; }
.meme--cameraroll .meme__roll { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: calc(.5 * var(--mh)); }
.meme--cameraroll .meme__roll span { min-height: 0; overflow: hidden; animation: meme-pop .3s cubic-bezier(.2, 1.5, .5, 1) both; }
.meme--cameraroll .meme__roll span:first-child { grid-column: span 2; }
.meme--cameraroll .meme__roll img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meme--cameraroll .meme__toast { align-self: center; padding: calc(1.2 * var(--mh)) calc(2.4 * var(--mh)); border-radius: calc(4 * var(--mh)); background: rgb(255 255 255 / 14%); color: #fff; font: 600 calc(1.9 * var(--mh))/1 var(--meme-sans); animation: meme-up .4s ease-out both; animation-delay: 2.2s; }
.meme--stamps { background: linear-gradient(160deg, #2e3b2f, #141a14); }
.meme--stamps .meme__sheet { position: absolute; left: 50%; top: calc(3 * var(--mh)); width: calc(120 * var(--mh)); height: calc(64 * var(--mh)); margin-left: calc(-60 * var(--mh)); padding: calc(3 * var(--mh)); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: calc(2.4 * var(--mh)); background: #efe7d4; box-shadow: 0 calc(2 * var(--mh)) calc(5 * var(--mh)) rgb(0 0 0 / 55%); animation: meme-cover-in .7s cubic-bezier(.2, .9, .3, 1) both; }
.meme--stamps .meme__stamp-tile { position: relative; min-height: 0; padding: calc(1.2 * var(--mh)) calc(1.2 * var(--mh)) calc(4 * var(--mh)); background: #fff; outline: calc(.7 * var(--mh)) dotted #efe7d4; outline-offset: calc(-.35 * var(--mh)); box-shadow: 0 0 0 1px #cfc6b2; animation: meme-pop .3s cubic-bezier(.2, 1.5, .5, 1) both; }
.meme--stamps .meme__stamp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meme--stamps .meme__stamp-tile b { position: absolute; right: calc(1.4 * var(--mh)); bottom: calc(.9 * var(--mh)); font: 900 calc(2.2 * var(--mh))/1 var(--meme-sans); color: #c62828; }
.meme--stamps .meme__stamp-tile i { position: absolute; left: calc(1.4 * var(--mh)); bottom: calc(1.1 * var(--mh)); font: 700 calc(1.3 * var(--mh))/1 var(--meme-sans); font-style: normal; letter-spacing: .15em; color: #555; }
.meme--stamps .meme__postmark { position: absolute; right: calc(6 * var(--mh)); top: calc(22 * var(--mh)); margin: 0; width: calc(22 * var(--mh)); height: calc(22 * var(--mh)); display: grid; place-content: center; border: calc(.6 * var(--mh)) solid rgb(30 40 120 / 75%); border-radius: 50%; color: rgb(30 40 120 / 85%); font: 900 calc(2.6 * var(--mh))/1.2 var(--meme-sans); letter-spacing: .1em; animation: meme-stamp .35s ease-out both; animation-delay: 2.4s; }
.meme--stamps .meme__postmark span { display: block; font-size: calc(1.6 * var(--mh)); font-weight: 600; }
.meme--slides { background: radial-gradient(ellipse at 50% 100%, #2a2a33, #050507 70%); }
.meme--slides .meme__screen { position: absolute; left: 50%; top: calc(4 * var(--mh)); width: calc(100 * var(--mh)); height: calc(60 * var(--mh)); margin-left: calc(-50 * var(--mh)); overflow: hidden; background: #f4f4f0; box-shadow: 0 0 0 calc(.6 * var(--mh)) #d9d9d2, 0 calc(2 * var(--mh)) calc(5 * var(--mh)) rgb(0 0 0 / 70%); animation: meme-in .6s ease-out both; }
.meme--slides .meme__screen span { position: absolute; inset: calc(2 * var(--mh)); overflow: hidden; animation: meme-slide-next .5s ease-out both; }
.meme--slides .meme__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meme--slides .meme__screen b { position: absolute; right: calc(1.4 * var(--mh)); top: calc(1.2 * var(--mh)); padding: calc(.5 * var(--mh)) calc(1.2 * var(--mh)); border-radius: calc(1 * var(--mh)); background: rgb(0 0 0 / 60%); color: #fff; font: 700 calc(1.8 * var(--mh))/1 ui-monospace, Menlo, monospace; }
@keyframes meme-slide-next { from { opacity: 0; transform: translateX(calc(6 * var(--mh))); } to { opacity: 1; transform: none; } }
.meme--screens { background: linear-gradient(#1a1410, #080605); }
.meme--screens .meme__live { position: absolute; top: calc(2 * var(--mh)); left: 0; right: 0; margin: 0; font: 900 calc(4 * var(--mh))/1 var(--meme-sans); letter-spacing: .3em; color: #fff; }
.meme--screens .meme__live::before { content: ""; display: inline-block; width: calc(2.4 * var(--mh)); height: calc(2.4 * var(--mh)); margin-right: calc(1.4 * var(--mh)); vertical-align: middle; border-radius: 50%; background: #e53935; animation: meme-blink 1s steps(1) infinite; }
.meme--screens .meme__tvwall { position: absolute; left: 50%; top: calc(9 * var(--mh)); width: calc(120 * var(--mh)); height: calc(58 * var(--mh)); margin-left: calc(-60 * var(--mh)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: calc(1.6 * var(--mh)); }
.meme--screens .meme__crt { position: relative; min-height: 0; padding: calc(1.6 * var(--mh)); border-radius: calc(2.4 * var(--mh)); background: linear-gradient(#3a332c, #211c17); box-shadow: inset 0 0 0 calc(.4 * var(--mh)) rgb(255 255 255 / 8%), 0 calc(1 * var(--mh)) calc(2 * var(--mh)) rgb(0 0 0 / 60%); }
.meme--screens .meme__crt img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: calc(3 * var(--mh)) / calc(2.4 * var(--mh)); animation: meme-crt-on .5s ease-out both; animation-delay: inherit; }
.meme--screens .meme__crt::after { content: ""; position: absolute; inset: calc(1.6 * var(--mh)); border-radius: calc(3 * var(--mh)) / calc(2.4 * var(--mh)); background: repeating-linear-gradient(rgb(0 0 0 / 22%) 0 calc(.25 * var(--mh)), transparent calc(.25 * var(--mh)) calc(.6 * var(--mh))), radial-gradient(ellipse, transparent 60%, rgb(0 0 0 / 45%)); pointer-events: none; }
@keyframes meme-crt-on { 0% { opacity: 0; clip-path: inset(50% 0); } 40% { opacity: 1; clip-path: inset(49% 0); } 100% { opacity: 1; clip-path: inset(0); } }
.meme:has(.meme__pop) { background: linear-gradient(#121212, #121212); }
.meme:has(.meme__pop--pastel) { background: linear-gradient(#2b2433, #2b2433); }
.meme:has(.meme__pop--dots) { background: linear-gradient(#1b1f3a, #1b1f3a); }
.meme .meme__pop { position: absolute; left: 50%; top: calc(3 * var(--mh)); width: calc(96 * var(--mh)); height: calc(64 * var(--mh)); margin-left: calc(-48 * var(--mh)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); box-shadow: 0 calc(2 * var(--mh)) calc(5 * var(--mh)) rgb(0 0 0 / 60%); }
.meme .meme__pop-tile { min-height: 0; overflow: hidden; animation: meme-pop .3s cubic-bezier(.2, 1.5, .5, 1) both; }
.meme .meme__pop-tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.6) brightness(1.1); mix-blend-mode: multiply; }
.meme__pop--neon { --c0: #ff3d7f; --c1: #ffd400; --c2: #00c2ff; --c3: #7cff4f; --c4: #ff8a00; --c5: #b45cff; }
.meme__pop--pastel { --c0: #ffb3c7; --c1: #ffe28a; --c2: #a8dcff; --c3: #b9f2c4; --c4: #ffc9a3; --c5: #d4b8ff; }
.meme__pop--seventies { --c0: #e35b1e; --c1: #f2b134; --c2: #7a8b2a; --c3: #b5442b; --c4: #d98c3f; --c5: #5e3a22; }
.meme__pop--ice { --c0: #7fe7ff; --c1: #3aa0ff; --c2: #b5f5e6; --c3: #5ac8c8; --c4: #9fb8ff; --c5: #e0f7ff; }
.meme__pop--sunset { --c0: #ff6a5c; --c1: #ffb347; --c2: #ff3f8e; --c3: #c1449b; --c4: #ffd166; --c5: #7b3fa0; }
.meme__pop--comic { --c0: #e53935; --c1: #ffd23f; --c2: #1e88e5; --c3: #ffd23f; --c4: #1e88e5; --c5: #e53935; }
.meme__pop--candy { --c0: #ff4fa3; --c1: #29c5f6; --c2: #ffe14d; --c3: #29c5f6; --c4: #ffe14d; --c5: #ff4fa3; }
.meme__pop--mint { --c0: #3ddc97; --c1: #ff6b6b; --c2: #ffd166; --c3: #ff6b6b; --c4: #ffd166; --c5: #3ddc97; }
.meme__pop--citrus { --c0: #ff7a00; --c1: #9b5cff; --c2: #00d1b2; --c3: #9b5cff; --c4: #00d1b2; --c5: #ff7a00; }
.meme__pop--redwhite { --c0: #e53935; --c1: #ffffff; --c2: #e53935; --c3: #ffffff; --c4: #e53935; --c5: #ffffff; }
.meme .meme__pop-tile--0 { background: var(--c0); }
.meme .meme__pop-tile--1 { background: var(--c1); }
.meme .meme__pop-tile--2 { background: var(--c2); }
.meme .meme__pop-tile--3 { background: var(--c3); }
.meme .meme__pop-tile--4 { background: var(--c4); }
.meme .meme__pop-tile--5 { background: var(--c5); }
.meme .meme__pop--dots .meme__pop-tile { position: relative; border: calc(.5 * var(--mh)) solid #111; }
.meme .meme__pop--dots .meme__pop-tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgb(0 0 0 / 35%) 25%, transparent 27%) 0 0 / calc(1.2 * var(--mh)) calc(1.2 * var(--mh)); mix-blend-mode: multiply; pointer-events: none; }
.meme--fridge { background: linear-gradient(#cfd8dc, #90a4ae); }
.meme--fridge .meme__fridge { position: absolute; left: 50%; top: calc(2 * var(--mh)); width: calc(120 * var(--mh)); height: calc(66 * var(--mh)); margin-left: calc(-60 * var(--mh)); padding: calc(3 * var(--mh)) calc(10 * var(--mh)) calc(4 * var(--mh)) calc(5 * var(--mh)); display: flex; flex-direction: column; gap: calc(2.4 * var(--mh)); border-radius: calc(3 * var(--mh)); background: linear-gradient(90deg, #f6f7f8, #e3e6e8); box-shadow: 0 calc(2 * var(--mh)) calc(5 * var(--mh)) rgb(0 0 0 / 35%), inset 0 0 0 calc(.3 * var(--mh)) rgb(0 0 0 / 6%); animation: meme-cover-in .7s cubic-bezier(.2, .9, .3, 1) both; }
.meme--fridge .meme__handle { position: absolute; right: calc(3 * var(--mh)); top: calc(12 * var(--mh)); width: calc(2.2 * var(--mh)); height: calc(40 * var(--mh)); border-radius: calc(1.2 * var(--mh)); background: linear-gradient(90deg, #b0b7bc, #e8ecee, #9aa2a8); }
.meme--fridge .meme__letters { margin: 0; display: flex; justify-content: center; gap: calc(.6 * var(--mh)); }
.meme--fridge .meme__letters b { font: 900 calc(6 * var(--mh))/1 "Arial Rounded MT Bold", var(--meme-sans); text-shadow: 0 calc(.4 * var(--mh)) 0 rgb(0 0 0 / 25%); transform: rotate(var(--r)); animation: meme-pop .3s cubic-bezier(.2, 1.5, .5, 1) both; }
.meme--fridge .meme__letter--0 { color: #e53935; } .meme--fridge .meme__letter--1 { color: #1e88e5; } .meme--fridge .meme__letter--2 { color: #43a047; } .meme--fridge .meme__letter--3 { color: #fb8c00; }
.meme--fridge .meme__magnets { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: calc(3 * var(--mh)); }
.meme--fridge :is(.meme__magnets--2, .meme__magnets--4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.meme--fridge .meme__magnets--5 > figure:first-child { grid-row: span 2; }
.meme--fridge .meme__magnets figure { position: relative; margin: 0; min-height: 0; padding: calc(.8 * var(--mh)); background: #fff; box-shadow: 0 calc(.8 * var(--mh)) calc(1.6 * var(--mh)) rgb(0 0 0 / 25%); transform: rotate(var(--r)); animation: meme-photo-drop .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.meme--fridge .meme__magnets img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meme--fridge .meme__magnet { position: absolute; top: calc(-1.6 * var(--mh)); left: 50%; width: calc(4 * var(--mh)); height: calc(4 * var(--mh)); margin-left: calc(-2 * var(--mh)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 55%), transparent 40%), var(--m, #e53935); box-shadow: 0 calc(.5 * var(--mh)) calc(.8 * var(--mh)) rgb(0 0 0 / 35%); }
.meme--fridge .meme__magnet--1 { --m: #1e88e5; } .meme--fridge .meme__magnet--2 { --m: #43a047; } .meme--fridge .meme__magnet--3 { --m: #fb8c00; }
.meme--clothesline { background: linear-gradient(#6fbde9, #d6f0ff 68%, #8cc985 68.1%, #5f9e58); }
.meme--clothesline .meme__lines-wrap { position: absolute; left: 50%; top: calc(5 * var(--mh)); width: calc(150 * var(--mh)); margin-left: calc(-75 * var(--mh)); display: grid; gap: calc(5 * var(--mh)); }
.meme--clothesline .meme__lines-wrap > :only-child { margin-top: calc(6 * var(--mh)); }
.meme--clothesline .meme__washline { position: relative; display: flex; justify-content: center; gap: calc(6 * var(--mh)); }
.meme--clothesline .meme__washline::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(.5 * var(--mh)); background: #fff; box-shadow: 0 calc(.3 * var(--mh)) calc(.4 * var(--mh)) rgb(0 0 0 / 25%); }
.meme--clothesline .meme__washline figure { position: relative; width: calc(27 * var(--mh)); margin: 0; padding: calc(1 * var(--mh)) calc(1 * var(--mh)) calc(3 * var(--mh)); background: #fff; box-shadow: 0 calc(1 * var(--mh)) calc(2 * var(--mh)) rgb(0 0 0 / 30%); transform-origin: 50% 0; animation: meme-hang-in .5s ease-out both, meme-sway 2.4s ease-in-out infinite alternate both; }
.meme--clothesline .meme__lines-wrap > :only-child figure { width: calc(34 * var(--mh)); }
.meme--clothesline .meme__washline img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.meme--clothesline .meme__peg { position: absolute; top: calc(-2.4 * var(--mh)); left: 50%; width: calc(1.8 * var(--mh)); height: calc(5 * var(--mh)); margin-left: calc(-.9 * var(--mh)); border-radius: calc(.4 * var(--mh)); background: linear-gradient(90deg, #c08a4b, #e2b47a, #a8733a); }
@keyframes meme-hang-in { from { opacity: 0; translate: 0 calc(-30 * var(--mh)); } to { opacity: 1; translate: 0 0; } }
@keyframes meme-sway { from { rotate: -3deg; } to { rotate: 3deg; } }
.meme--contact { background: linear-gradient(#2b2b2b, #151515); }
.meme--contact .meme__contact { position: absolute; left: 50%; top: calc(3 * var(--mh)); width: calc(130 * var(--mh)); height: calc(62 * var(--mh)); margin-left: calc(-65 * var(--mh)); padding: calc(3 * var(--mh)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: calc(1.6 * var(--mh)) calc(1.2 * var(--mh)); background: #0d0d0d; box-shadow: 0 calc(2 * var(--mh)) calc(5 * var(--mh)) rgb(0 0 0 / 60%); animation: meme-cover-in .7s cubic-bezier(.2, .9, .3, 1) both; }
.meme--contact .meme__shot { position: relative; min-height: 0; opacity: .72; animation: meme-in .3s ease-out both; }
.meme--contact .meme__shot--best { opacity: 1; }
.meme--contact .meme__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meme--contact .meme__shot i { position: absolute; left: 0; bottom: calc(-1.5 * var(--mh)); font: 700 calc(1.2 * var(--mh))/1 ui-monospace, Menlo, monospace; font-style: normal; color: #f6a04b; }
.meme--contact .meme__circle { position: absolute; left: calc(1.4 * var(--mh)); top: calc(1.4 * var(--mh)); width: calc(33 * var(--mh)); height: calc(21 * var(--mh)); border: calc(.6 * var(--mh)) solid #e8262b; border-radius: 50%; transform: rotate(-4deg); animation: meme-pop .35s cubic-bezier(.2, 1.5, .5, 1) both; animation-delay: 2s; }
.meme--contact .meme__pick { position: absolute; left: calc(35 * var(--mh)); top: calc(-1.4 * var(--mh)); margin: 0; font: 700 calc(4 * var(--mh))/1 "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive; color: #e8262b; transform: rotate(-8deg); animation: meme-pop .3s cubic-bezier(.2, 1.5, .5, 1) both; animation-delay: 2.5s; }
.meme--album { background: radial-gradient(ellipse at 50% 30%, #4a3428, #1c120c 75%); }
.meme--album .meme__album { position: absolute; left: 50%; top: calc(3 * var(--mh)); width: calc(136 * var(--mh)); height: calc(64 * var(--mh)); margin-left: calc(-68 * var(--mh)); padding: calc(4 * var(--mh)) calc(6 * var(--mh)) calc(3 * var(--mh)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: calc(3 * var(--mh)) calc(5 * var(--mh)); border-left: calc(3 * var(--mh)) solid #5a1f1f; border-radius: calc(1 * var(--mh)); background: #1b1b1b; box-shadow: 0 calc(2 * var(--mh)) calc(5 * var(--mh)) rgb(0 0 0 / 60%); transform-origin: 0 50%; animation: meme-page-open .8s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes meme-page-open { from { opacity: 0; transform: perspective(calc(200 * var(--mh))) rotateY(-70deg); } to { opacity: 1; transform: none; } }
.meme--album :is(.meme__album--2, .meme__album--4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.meme--album .meme__album--5 > figure:first-child { grid-row: span 2; }
.meme--album .meme__album figure { margin: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: calc(.8 * var(--mh)); transform: rotate(var(--r)); animation: meme-in .5s ease-out both; }
.meme--album .meme__album span { position: relative; min-height: 0; border: calc(.6 * var(--mh)) solid #f3ead8; }
.meme--album .meme__album img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.35); }
.meme--album .meme__album span i { position: absolute; width: calc(3 * var(--mh)); height: calc(3 * var(--mh)); background: #e9e0cc; }
.meme--album .meme__album span i:nth-of-type(1) { left: calc(-1.2 * var(--mh)); top: calc(-1.2 * var(--mh)); clip-path: polygon(0 0, 100% 0, 0 100%); }
.meme--album .meme__album span i:nth-of-type(2) { right: calc(-1.2 * var(--mh)); top: calc(-1.2 * var(--mh)); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.meme--album .meme__album span i:nth-of-type(3) { left: calc(-1.2 * var(--mh)); bottom: calc(-1.2 * var(--mh)); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.meme--album .meme__album span i:nth-of-type(4) { right: calc(-1.2 * var(--mh)); bottom: calc(-1.2 * var(--mh)); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.meme--album .meme__album figcaption { min-height: calc(2.4 * var(--mh)); font: 400 calc(2.2 * var(--mh))/1.1 "Bradley Hand", "Marker Felt", cursive; color: #f3ead8; text-align: center; }

/* 8. Verzamelkaart */
.meme--card { background: radial-gradient(70% 80% at 50% 45%, #3a1d5c 0%, #07060c 75%); perspective: calc(120 * var(--mh)); }
.meme--card .meme__card { position: absolute; left: 50%; top: calc(6 * var(--mh)); width: calc(54 * var(--mh)); height: calc(78 * var(--mh)); margin-left: calc(-27 * var(--mh)); animation: meme-card-flip 1.2s cubic-bezier(.2, .8, .3, 1) both; animation-delay: .2s; transform-style: preserve-3d; }
@keyframes meme-card-flip { from { transform: translateY(calc(-20 * var(--mh))) rotateY(540deg) scale(.4); } to { transform: rotateY(0) rotateZ(-3deg); } }
.meme--card .meme__card-face { position: absolute; inset: 0; overflow: hidden; padding: calc(2.4 * var(--mh)); border-radius: calc(2.4 * var(--mh)); background: linear-gradient(160deg, #ffe27a, #d29a1b 40%, #fff1a8 60%, #b8800f); display: grid; grid-template-rows: auto 1fr auto auto; gap: calc(1.6 * var(--mh)); color: #2b1a04; }
.meme--card .meme__rarity { margin: 0; font: 900 calc(2.4 * var(--mh))/1 var(--meme-sans); letter-spacing: .14em; }
.meme--card .meme__card-face > img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border: calc(.6 * var(--mh)) solid #2b1a04; border-radius: calc(1 * var(--mh)); }
.meme--card .meme__card-name { margin: 0; font: 900 calc(6 * var(--mh))/1 "Fraunces", Georgia, serif; }
.meme--card dl { display: grid; grid-template-columns: 1fr auto; gap: calc(.8 * var(--mh)) calc(2 * var(--mh)); margin: 0; padding: calc(1.6 * var(--mh)) calc(2 * var(--mh)); border-radius: calc(1 * var(--mh)); background: rgb(255 255 255 / 45%); font: 800 calc(2.6 * var(--mh))/1 var(--meme-sans); text-align: left; }
.meme--card dd { margin: 0; font-weight: 900; }
.meme--card .meme__holo { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 75%) 45%, rgb(160 255 240 / 45%) 50%, rgb(255 150 240 / 40%) 55%, transparent 70%); background-size: 300% 100%; mix-blend-mode: overlay; animation: meme-holo 2.2s ease-in-out infinite; animation-delay: 1.4s; }
@keyframes meme-holo { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.meme--card .meme__card-cap { position: absolute; left: 0; right: 0; bottom: calc(4 * var(--mh)); margin: 0; font: 900 calc(4.6 * var(--mh))/1 var(--meme-sans); text-transform: uppercase; animation: meme-up .5s both; animation-delay: 1.8s; }

/* 9. Level up */
.meme--levelup { background: #0b0a1e; background-image: repeating-linear-gradient(0deg, rgb(255 255 255 / 4%) 0 calc(.4 * var(--mh)), transparent calc(.4 * var(--mh)) calc(.8 * var(--mh))); font-family: ui-monospace, Menlo, monospace; }
.meme--levelup .meme__px { position: absolute; left: 50%; top: calc(7 * var(--mh)); width: calc(30 * var(--mh)); height: calc(30 * var(--mh)); margin-left: calc(-15 * var(--mh)); border: calc(1 * var(--mh)) solid #fff; box-shadow: 0 0 0 calc(1 * var(--mh)) #5b3fff; overflow: hidden; animation: meme-pop .3s steps(3) both; }
.meme--levelup .meme__px img { width: 16px; height: 16px; transform: scale(calc(calc(30 * var(--mh)) / 16px)); transform-origin: 0 0; image-rendering: pixelated; }
.meme--levelup .meme__lvl { position: absolute; left: 0; right: 0; top: calc(42 * var(--mh)); margin: 0; font: 900 calc(13 * var(--mh))/1 ui-monospace, Menlo, monospace; color: #ffe14d; text-shadow: calc(.8 * var(--mh)) calc(.8 * var(--mh)) 0 #d4142a, calc(1.6 * var(--mh)) calc(1.6 * var(--mh)) 0 #000; animation: meme-pop .3s steps(3) both, meme-float-y .8s steps(2) infinite; animation-delay: 1s, 1.3s; }
.meme--levelup .meme__xp { position: absolute; left: 50%; top: calc(61 * var(--mh)); width: calc(80 * var(--mh)); height: calc(5 * var(--mh)); margin-left: calc(-40 * var(--mh)); border: calc(.6 * var(--mh)) solid #fff; background: #221f46; }
.meme--levelup .meme__xp i { position: absolute; inset: 0; width: 0; background: repeating-linear-gradient(90deg, #4cff8a 0 calc(3 * var(--mh)), #2bd96a calc(3 * var(--mh)) calc(4 * var(--mh))); animation: meme-xp 1s steps(10) both; animation-delay: .3s; }
@keyframes meme-xp { to { width: 100%; } }
.meme--levelup .meme__xp span { position: relative; font: 900 calc(2.8 * var(--mh))/calc(4 * var(--mh)) ui-monospace, Menlo, monospace; color: #000; }
.meme--levelup .meme__stats { position: absolute; left: 0; right: 0; top: calc(71 * var(--mh)); margin: 0; padding: 0; list-style: none; display: grid; gap: calc(1.6 * var(--mh)); font: 900 calc(3.6 * var(--mh))/1 ui-monospace, Menlo, monospace; }
.meme--levelup .meme__stats li { animation: meme-in .01s both; }
.meme--levelup .meme__stats li:nth-child(1) { animation-delay: 1.8s; } .meme--levelup .meme__stats li:nth-child(2) { animation-delay: 2.2s; } .meme--levelup .meme__stats li:nth-child(3) { animation-delay: 2.6s; color: #4cff8a; }

/* 10. Prestatie ontgrendeld */
.meme--achievement .meme__ach-face { position: absolute; left: 50%; top: calc(10 * var(--mh)); width: calc(38 * var(--mh)); height: calc(38 * var(--mh)); margin-left: calc(-19 * var(--mh)); animation: meme-pop .4s cubic-bezier(.2, 1.5, .5, 1) both; animation-delay: 1.6s; }
.meme--achievement .meme__toast { position: absolute; left: 50%; top: calc(60 * var(--mh)); display: flex; align-items: center; gap: calc(3 * var(--mh)); width: calc(110 * var(--mh)); margin-left: calc(-55 * var(--mh)); padding: calc(2.4 * var(--mh)) calc(4 * var(--mh)) calc(2.4 * var(--mh)) calc(2.4 * var(--mh)); border-radius: calc(99 * var(--mh)); background: #1d1f24; border: calc(.4 * var(--mh)) solid rgb(255 255 255 / 20%); text-align: left; animation: meme-toast 1.4s cubic-bezier(.2, .9, .3, 1) both; animation-delay: .2s; }
@keyframes meme-toast { 0% { transform: translateY(calc(40 * var(--mh))) scale(.5); } 45% { transform: translateY(calc(26 * var(--mh))) scale(.5); } 100% { transform: none; } }
.meme--achievement .meme__trophy { display: grid; place-items: center; flex: none; width: calc(12 * var(--mh)); height: calc(12 * var(--mh)); border-radius: 50%; background: #3a8a2e; font-size: calc(7 * var(--mh)); }
.meme--achievement .meme__toast p { margin: 0 0 calc(.8 * var(--mh)); font: 700 calc(2.8 * var(--mh))/1 var(--meme-sans); opacity: .75; }
.meme--achievement .meme__toast b { font: 900 calc(4.4 * var(--mh))/1.1 var(--meme-sans); }
.meme--achievement .meme__gs { margin-left: auto; flex: none; padding: calc(1.2 * var(--mh)) calc(2.4 * var(--mh)); border-radius: calc(99 * var(--mh)); background: var(--green, #3a8a2e); font: 900 calc(3 * var(--mh))/1 var(--meme-sans); }

/* 11. Fruitautomaat */
.meme--slots { background: radial-gradient(70% 80% at 50% 40%, #6b0f1a 0%, #140306 75%); }
.meme--slots .meme__machine { position: absolute; left: 50%; top: calc(6 * var(--mh)); width: calc(110 * var(--mh)); margin-left: calc(-55 * var(--mh)); padding: calc(5 * var(--mh)) calc(4 * var(--mh)) calc(4 * var(--mh)); border-radius: calc(4 * var(--mh)); background: linear-gradient(#ffcf3a, #d1890c); box-shadow: inset 0 0 0 calc(1 * var(--mh)) #8a4a05; }
.meme--slots .meme__lights { position: absolute; top: calc(1.6 * var(--mh)); left: calc(4 * var(--mh)); right: calc(4 * var(--mh)); display: flex; justify-content: space-between; margin: 0; }
.meme--slots .meme__lights i { width: calc(2 * var(--mh)); height: calc(2 * var(--mh)); border-radius: 50%; background: #fff7c2; animation: meme-blink .5s steps(2) infinite; }
.meme--slots .meme__reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(2 * var(--mh)); }
.meme--slots .meme__reel { height: calc(30 * var(--mh)); overflow: hidden; border-radius: calc(1.6 * var(--mh)); background: #fff; box-shadow: inset 0 calc(3 * var(--mh)) calc(3 * var(--mh)) calc(-2 * var(--mh)) rgb(0 0 0 / 40%), inset 0 calc(-3 * var(--mh)) calc(3 * var(--mh)) calc(-2 * var(--mh)) rgb(0 0 0 / 40%); }
.meme--slots .meme__strip { display: grid; animation-name: meme-reel; animation-timing-function: cubic-bezier(.3, 0, .2, 1.05); animation-fill-mode: both; }
.meme--slots .meme__strip span { display: grid; place-items: center; height: calc(30 * var(--mh)); font: 900 calc(18 * var(--mh))/1 var(--meme-sans); color: #d4142a; }
.meme--slots .meme__strip img { width: calc(24 * var(--mh)); height: calc(24 * var(--mh)); border-radius: 50%; object-fit: cover; }
.meme--slots .meme__jackpot { position: absolute; left: 0; right: 0; top: calc(50 * var(--mh)); margin: 0; font: italic 900 calc(15 * var(--mh))/1 var(--meme-sans); color: #ffe14d; -webkit-text-stroke: calc(.8 * var(--mh)) #6b0f1a; paint-order: stroke fill; animation: meme-pop .3s cubic-bezier(.2, 1.6, .5, 1) both, meme-blink .4s steps(2) 4; animation-delay: 2.7s, 3s; }
.meme--slots .meme__caption { --cap: 3.2s; bottom: calc(5 * var(--mh)); }

/* 12. Weerbericht */
.meme--weather { background: #0b1a2e; }
.meme--weather .meme__wx { position: absolute; inset: 0 0 calc(18 * var(--mh)); display: grid; grid-template-columns: 1fr 1fr; }
.meme--weather .meme__wx-half { position: relative; display: grid; place-content: center; justify-items: center; gap: calc(1.4 * var(--mh)); overflow: hidden; animation: meme-in .4s both; }
.meme--weather .meme__wx-sun { background: linear-gradient(#ffb43a, #ff7a1a); }
.meme--weather .meme__wx-storm { background: linear-gradient(#3b4656, #1a2029); animation-delay: .6s; }
.meme--weather .meme__face { width: calc(26 * var(--mh)); height: calc(26 * var(--mh)); }
.meme--weather .meme__sun { position: absolute; left: 50%; top: calc(9 * var(--mh)); width: 0; height: 0; animation: meme-spin 8s linear infinite; }
.meme--weather .meme__sun i { position: absolute; left: calc(-1 * var(--mh)); top: calc(-38 * var(--mh)); width: calc(2 * var(--mh)); height: calc(18 * var(--mh)); border-radius: calc(1 * var(--mh)); background: #fff3a0; transform-origin: calc(1 * var(--mh)) calc(38 * var(--mh)); transform: rotate(var(--r)); }
.meme--weather .meme__sun { top: calc(37 * var(--mh)); }
.meme--weather .meme__temp { margin: 0; font: 900 calc(12 * var(--mh))/1 var(--meme-sans); text-shadow: 0 calc(.6 * var(--mh)) calc(2 * var(--mh)) rgb(0 0 0 / 30%); }
.meme--weather .meme__wx-name { margin: 0; font: 800 calc(4 * var(--mh))/1 var(--meme-sans); }
.meme--weather .meme__bolt { position: absolute; top: calc(6 * var(--mh)); left: 12%; width: calc(12 * var(--mh)); opacity: 0; animation: meme-bolt 1.4s steps(1) infinite; animation-delay: 1.2s; }
@keyframes meme-bolt { 0% { opacity: 1; } 8% { opacity: 0; } 14% { opacity: 1; } 22%, 100% { opacity: 0; } }
.meme--weather .meme__wx-storm::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; animation: meme-bolt-flash 1.4s steps(1) infinite; animation-delay: 1.2s; }
@keyframes meme-bolt-flash { 0% { opacity: .25; } 8%, 100% { opacity: 0; } }
.meme--weather .meme__wx-bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(18 * var(--mh)); display: flex; align-items: center; gap: calc(3 * var(--mh)); padding: 0 calc(5 * var(--mw)); background: #fff; color: #0b1a2e; animation: meme-slide-in .5s cubic-bezier(.2, .8, .3, 1) both; animation-delay: 1.4s; }
.meme--weather .meme__wx-bar b { padding: calc(1.4 * var(--mh)) calc(2.4 * var(--mh)); background: #0b63d6; color: #fff; font: 900 calc(3 * var(--mh))/1 var(--meme-sans); }
.meme--weather .meme__wx-bar span { font: 900 calc(4.6 * var(--mh))/1.1 var(--meme-sans); text-align: left; }

/* 13. Versus */
.meme--versus { background: #000; }
.meme--versus .meme__vs-side { position: absolute; top: 0; bottom: 0; width: calc(60 * var(--mw)); overflow: hidden; display: grid; place-items: end center; padding-bottom: calc(8 * var(--mh)); }
.meme--versus .meme__vs-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.meme--versus .meme__vs-side p { position: relative; margin: 0; font: italic 900 calc(10 * var(--mh))/1 var(--meme-sans); text-transform: uppercase; text-shadow: 0 calc(.6 * var(--mh)) 0 #000; }
.meme--versus .meme__vs-w { left: 0; clip-path: polygon(0 0, 100% 0, 66% 100%, 0 100%); background: var(--team-accent); animation: meme-vs-l .5s cubic-bezier(.2, .9, .3, 1) both, meme-vs-take .6s cubic-bezier(.6, 0, .3, 1) both; animation-delay: .1s, 2.4s; }
.meme--versus .meme__vs-w img { opacity: .9; mix-blend-mode: luminosity; }
.meme--versus .meme__vs-l { right: 0; clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%); background: var(--team-accent); animation: meme-vs-r .5s cubic-bezier(.2, .9, .3, 1) both, meme-vs-out .6s cubic-bezier(.6, 0, .3, 1) both; animation-delay: .3s, 2.4s; }
.meme--versus .meme__vs-l img { mix-blend-mode: luminosity; opacity: .9; }
@keyframes meme-vs-l { from { transform: translateX(calc(-60 * var(--mw))); } to { transform: none; } }
@keyframes meme-vs-r { from { transform: translateX(calc(60 * var(--mw))); } to { transform: none; } }
@keyframes meme-vs-take { to { width: calc(100 * var(--mw)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes meme-vs-out { to { transform: translateX(calc(70 * var(--mw))) rotate(8deg); } }
.meme--versus .meme__vs { position: absolute; left: 0; right: 0; top: calc(34 * var(--mh)); margin: 0; font: italic 900 calc(30 * var(--mh))/1 var(--meme-sans); color: #fff; -webkit-text-stroke: calc(1.2 * var(--mh)) #000; paint-order: stroke fill; animation: meme-slam .3s cubic-bezier(.2, 1.6, .5, 1) both, meme-in .2s reverse both; animation-delay: .9s, 2.3s; }
.meme--versus .meme__winner-txt { position: absolute; left: 0; right: 0; top: calc(10 * var(--mh)); margin: 0; font: italic 900 calc(20 * var(--mh))/1 var(--meme-sans); color: #ffe14d; -webkit-text-stroke: calc(1 * var(--mh)) #000; paint-order: stroke fill; animation: meme-slam .35s cubic-bezier(.2, 1.6, .5, 1) both; animation-delay: 3s; }

/* 14. Oorkonde */
.meme--diploma { background: radial-gradient(70% 80% at 50% 45%, #233a2a 0%, #060d08 75%); }
.meme--diploma .meme__diploma { position: absolute; left: 50%; top: calc(7 * var(--mh)); width: calc(120 * var(--mh)); height: calc(84 * var(--mh)); margin-left: calc(-60 * var(--mh)); padding: calc(7 * var(--mh)) calc(9 * var(--mh)); color: #2a2014; background: #f8f1df; outline: calc(1.2 * var(--mh)) double #9a7a2e; outline-offset: calc(-3.4 * var(--mh)); transform-origin: 50% 0; animation: meme-unroll .9s cubic-bezier(.3, .9, .3, 1) both; animation-delay: .2s; font-family: "Fraunces", Georgia, serif; }
@keyframes meme-unroll { from { transform: scaleY(.02); } to { transform: none; } }
.meme--diploma .meme__dip-title { margin: 0; font: 900 calc(12 * var(--mh))/1 "Fraunces", Georgia, serif; letter-spacing: .04em; color: #7a5a14; }
.meme--diploma .meme__dip-text { margin: calc(2.4 * var(--mh)) 0 0; font: italic 500 calc(3.6 * var(--mh))/1.3 "Fraunces", Georgia, serif; }
.meme--diploma .meme__dip-name { margin: calc(2 * var(--mh)) 0 0; font: 900 calc(11 * var(--mh))/1 "Fraunces", Georgia, serif; animation: meme-in .5s both; animation-delay: 1.2s; }
.meme--diploma .meme__dip-foot { position: absolute; left: calc(12 * var(--mh)); right: calc(30 * var(--mh)); bottom: calc(10 * var(--mh)); display: flex; justify-content: space-between; font: 600 calc(2.6 * var(--mh))/1 var(--meme-sans); }
.meme--diploma .meme__dip-foot span { padding-top: calc(1.4 * var(--mh)); border-top: calc(.3 * var(--mh)) solid #2a2014; min-width: calc(26 * var(--mh)); }
.meme--diploma .meme__seal { position: absolute; right: calc(9 * var(--mh)); bottom: calc(5 * var(--mh)); display: grid; place-items: center; width: calc(20 * var(--mh)); height: calc(20 * var(--mh)); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e0303a, #8a0d14); color: #ffd7c2; font: 900 calc(5 * var(--mh))/1 "Fraunces", Georgia, serif; box-shadow: 0 0 0 calc(1.2 * var(--mh)) #b3141d inset, 0 calc(.8 * var(--mh)) calc(1.6 * var(--mh)) rgb(0 0 0 / 35%); animation: meme-stamp2 .3s cubic-bezier(.2, 1.4, .5, 1) both; animation-delay: 2.2s; }
@keyframes meme-stamp2 { from { opacity: 0; transform: scale(2.6) rotate(-30deg); } to { opacity: 1; transform: rotate(-12deg); } }

/* 15. Medaille */
.meme--medal { background: radial-gradient(70% 80% at 50% 35%, #403010 0%, #0a0703 75%); }
.meme--medal .meme__medal { position: absolute; left: 50%; top: calc(-4 * var(--mh)); width: calc(46 * var(--mh)); margin-left: calc(-23 * var(--mh)); transform-origin: 50% 0; animation: meme-medal-in .8s cubic-bezier(.3, 1.3, .5, 1) both, meme-swing 2s ease-in-out infinite alternate; animation-delay: .2s, 1s; }
@keyframes meme-medal-in { from { transform: translateY(calc(-80 * var(--mh))); } to { transform: rotate(6deg); } }
@keyframes meme-swing { from { transform: rotate(6deg); } to { transform: rotate(-6deg); } }
.meme--medal .meme__ribbon { width: calc(16 * var(--mh)); height: calc(30 * var(--mh)); margin: 0 auto; background: linear-gradient(90deg, #d4142a 0 33%, #fff 33% 66%, #1d4fd6 66%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); }
.meme--medal .meme__disc { width: calc(46 * var(--mh)); height: calc(46 * var(--mh)); margin-top: calc(-4 * var(--mh)); padding: calc(3 * var(--mh)); border-radius: 50%; background: conic-gradient(from 30deg, #b8860b, #ffe27a, #c9961c, #fff1a8, #b8860b); box-shadow: inset 0 0 0 calc(1 * var(--mh)) #8a6208, 0 calc(2 * var(--mh)) calc(4 * var(--mh)) rgb(0 0 0 / 45%); }
.meme--medal .meme__disc img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 calc(.8 * var(--mh)) #8a6208; }
.meme--medal .meme__twinkle i { position: absolute; font-size: calc(5 * var(--mh)); color: #ffe27a; font-style: normal; animation: meme-twinkle 1.2s ease-in-out infinite both; }
@keyframes meme-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.meme--medal .meme__caption { --cap: 1.6s; bottom: calc(6 * var(--mh)); }

/* 16. Raket */
.meme--rocket { background: linear-gradient(#050816, #1b2450 80%, #3b2a5c); }
.meme--rocket .meme__stars i { position: absolute; width: calc(.5 * var(--mh)); height: calc(.5 * var(--mh)); border-radius: 50%; background: #fff; animation: meme-stars 1.2s linear infinite; animation-delay: 1.8s; }
@keyframes meme-stars { to { transform: translateY(calc(25 * var(--mh))); } }
.meme--rocket .meme__rocket { position: absolute; left: 50%; bottom: calc(14 * var(--mh)); width: calc(30 * var(--mh)); margin-left: calc(-15 * var(--mh)); animation: meme-rumble .1s linear 10 alternate, meme-launch 2.4s cubic-bezier(.6, 0, .9, .6) both; animation-delay: .6s, 1.6s; }
@keyframes meme-rumble { to { transform: translateX(calc(.6 * var(--mh))); } }
@keyframes meme-launch { to { transform: translateY(calc(-120 * var(--mh))); } }
.meme--rocket .meme__rocket svg { width: calc(30 * var(--mh)); display: block; }
.meme--rocket .meme__window { position: absolute; left: calc(7.5 * var(--mh)); top: calc(14 * var(--mh)); width: calc(15 * var(--mh)); height: calc(15 * var(--mh)); overflow: hidden; border-radius: 50%; border: calc(1 * var(--mh)) solid #9aa7b8; background: #000; }
.meme--rocket .meme__window img { width: 100%; height: 100%; object-fit: cover; }
.meme--rocket .meme__smoke i { position: absolute; left: 50%; top: calc(58 * var(--mh)); width: calc(9 * var(--mh)); height: calc(9 * var(--mh)); margin-left: calc(-4.5 * var(--mh)); border-radius: 50%; background: #e8e2d8; animation: meme-smoke 1s ease-out infinite both; animation-delay: inherit; }
@keyframes meme-smoke { from { opacity: .95; transform: translate(0, 0) scale(.4); } to { opacity: 0; transform: translate(var(--x), calc(12 * var(--mh))) scale(1.8); } }
.meme--rocket .meme__left { position: absolute; left: calc(8 * var(--mw)); bottom: calc(14 * var(--mh)); display: flex; align-items: center; gap: calc(2 * var(--mh)); animation: meme-in .4s both; animation-delay: 2.2s; }
.meme--rocket .meme__left .meme__face { width: calc(18 * var(--mh)); height: calc(18 * var(--mh)); }
.meme--rocket .meme__left span { font-size: calc(9 * var(--mh)); display: inline-block; transform-origin: 70% 90%; animation: meme-wave .3s ease-in-out infinite alternate; animation-delay: 2.2s; }
@keyframes meme-wave { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.meme--rocket .meme__caption { --cap: 2.6s; bottom: calc(5 * var(--mh)); }
.meme--rocket .meme__caption .takeover__title { font-size: calc(6 * var(--mh)); }

/* 17. Game over */
.meme--gameover { background: #000; font-family: ui-monospace, Menlo, monospace; }
.meme--gameover .meme__crt { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: calc(3 * var(--mh)); background: radial-gradient(90% 90% at 50% 50%, #121c12 0%, #000 80%); }
.meme--gameover .meme__crt::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgb(0 0 0 / 45%) 0 calc(.3 * var(--mh)), transparent calc(.3 * var(--mh)) calc(.7 * var(--mh))); pointer-events: none; }
.meme--gameover .meme__crt-face { width: calc(28 * var(--mh)); height: calc(28 * var(--mh)); overflow: hidden; border: calc(.8 * var(--mh)) solid #d4142a; animation: meme-in .01s both; }
.meme--gameover .meme__crt-face img { width: 14px; height: 14px; transform: scale(calc(calc(26.4 * var(--mh)) / 14px)); transform-origin: 0 0; image-rendering: pixelated; filter: grayscale(1) contrast(1.3); }
.meme--gameover .meme__go { margin: 0; font: 900 calc(15 * var(--mh))/1 ui-monospace, Menlo, monospace; color: #ff2a2a; letter-spacing: .06em; animation: meme-in .01s both; animation-delay: .7s; }
.meme--gameover .meme__cont { margin: 0; font: 900 calc(5 * var(--mh))/1 ui-monospace, Menlo, monospace; color: #fff; animation: meme-in .01s both; animation-delay: 1.3s; }
.meme--gameover .meme__count { display: inline-block; height: calc(5 * var(--mh)); overflow: hidden; vertical-align: top; color: #ffe14d; }
.meme--gameover .meme__count span { display: block; height: calc(5 * var(--mh)); }
.meme--gameover .meme__count { --n: 10; }
.meme--gameover .meme__count span:first-child { animation: meme-count 3s steps(9) both; animation-delay: 1.3s; }
@keyframes meme-count { to { margin-top: calc(-45 * var(--mh)); } }
.meme--gameover .meme__p1 { margin: calc(2 * var(--mh)) 0 0; font: 900 calc(5 * var(--mh))/1 ui-monospace, Menlo, monospace; color: #4cff8a; animation: meme-in .01s both; animation-delay: 2.4s; }
.meme--gameover .meme__coin { margin: 0; font: 900 calc(3.4 * var(--mh))/1 ui-monospace, Menlo, monospace; color: #fff; animation: meme-blink .8s steps(2) infinite; animation-delay: 3s; opacity: 0; }

/* 18. Beker */
.meme--trophy { background: radial-gradient(70% 80% at 50% 40%, #3a2a06 0%, #070502 75%); }
.meme--trophy .meme__rays { position: absolute; left: 50%; top: calc(38 * var(--mh)); width: 0; height: 0; animation: meme-spin 12s linear infinite, meme-in .6s both; animation-delay: 0s, 1.2s; }
.meme--trophy .meme__rays::before { content: ""; position: absolute; left: calc(-90 * var(--mh)); top: calc(-90 * var(--mh)); width: calc(180 * var(--mh)); height: calc(180 * var(--mh)); border-radius: 50%; background: repeating-conic-gradient(rgb(255 226 122 / 18%) 0 10deg, transparent 10deg 20deg); }
.meme--trophy .meme__cup { position: absolute; left: 50%; top: calc(6 * var(--mh)); width: calc(54 * var(--mh)); margin-left: calc(-27 * var(--mh)); animation: meme-rise 1s cubic-bezier(.2, .9, .3, 1) both; animation-delay: .2s; }
.meme--trophy .meme__cup svg { width: calc(54 * var(--mh)); display: block; }
.meme--trophy .meme__cup-face { position: absolute; left: 50%; top: calc(4 * var(--mh)); width: calc(26 * var(--mh)); height: calc(26 * var(--mh)); margin-left: calc(-13 * var(--mh)); overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 calc(.8 * var(--mh)) #8a6208; }
.meme--trophy .meme__cup-face img { width: 100%; height: 100%; object-fit: cover; }
.meme--trophy .meme__plate { position: absolute; left: 0; right: 0; bottom: calc(5.8 * var(--mh) - .5em); margin: 0; font: 900 calc(3.6 * var(--mh))/1 "Fraunces", Georgia, serif; color: #ffe27a; }
.meme--trophy .meme__caption { --cap: 1.6s; bottom: calc(4 * var(--mh)); }
.meme--trophy .meme__caption .takeover__title { font-size: calc(5.6 * var(--mh)); }

/* 19. Krant */
.meme--paper { background: #0e0c0a; }
.meme--paper .meme__paper { position: absolute; left: 50%; top: calc(5 * var(--mh)); width: calc(120 * var(--mh)); height: calc(90 * var(--mh)); margin-left: calc(-60 * var(--mh)); padding: calc(3 * var(--mh)) calc(4 * var(--mh)); background: #efe9dc; color: #1b1914; text-align: left; animation: meme-paper-spin 1.2s cubic-bezier(.2, .7, .3, 1) both; animation-delay: .1s; }
@keyframes meme-paper-spin { from { transform: scale(.02) rotate(-1080deg); } to { transform: rotate(-1.5deg); } }
.meme--paper .meme__paper-mast { margin: 0; padding-bottom: calc(1 * var(--mh)); border-bottom: calc(.4 * var(--mh)) solid #1b1914; text-align: center; font: 900 calc(9 * var(--mh))/1 "Fraunces", Georgia, serif; }
.meme--paper .meme__paper-date { margin: calc(.8 * var(--mh)) 0 0; padding-bottom: calc(.8 * var(--mh)); border-bottom: calc(.2 * var(--mh)) solid #1b1914; text-align: center; font: 700 calc(1.8 * var(--mh))/1 var(--meme-sans); letter-spacing: .2em; text-transform: uppercase; }
.meme--paper .meme__paper-head { margin: calc(2 * var(--mh)) 0; text-align: center; font: 900 calc(12 * var(--mh))/.95 "Fraunces", Georgia, serif; letter-spacing: -.02em; }
.meme--paper .meme__paper-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: calc(3 * var(--mh)); }
.meme--paper .meme__paper-photo img { width: 100%; height: calc(40 * var(--mh)); object-fit: cover; filter: grayscale(1) contrast(1.15); }
.meme--paper .meme__paper-photo span, .meme--paper .meme__paper-small span { display: block; margin-top: calc(.8 * var(--mh)); font: italic 600 calc(1.9 * var(--mh))/1.2 "Fraunces", Georgia, serif; }
.meme--paper .meme__paper-cols p { margin: 0 0 calc(1.6 * var(--mh)); font: 500 calc(2.4 * var(--mh))/1.3 "Fraunces", Georgia, serif; }
.meme--paper .meme__paper-cols > i { display: block; height: calc(1.3 * var(--mh)); margin-bottom: calc(1.1 * var(--mh)); background: rgb(27 25 20 / 25%); }
.meme--paper .meme__paper-small { display: flex; gap: calc(1.6 * var(--mh)); align-items: center; margin-top: calc(2 * var(--mh)); }
.meme--paper .meme__paper-small img { width: calc(11 * var(--mh)); height: calc(11 * var(--mh)); object-fit: cover; filter: grayscale(1); }

/* 20. Herhaling met tekenpen */
.meme--replay { background: #000; }
.meme--replay .meme__rp-cam { position: absolute; inset: 0; overflow: hidden; }
/* Onderaan donker, zodat de titel op elke foto te lezen is (sinds 6 nov 2026, de eigenaar: "deze animaties kunnen verbeterd"). */
.meme--replay .meme__rp-cam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / 35%), transparent 22%, transparent 55%, rgb(0 0 0 / 80%)); }
.meme--replay .meme__rp-cam img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.7) contrast(1.1); animation: meme-rewind 1.4s steps(14) both, meme-slowzoom 6s 1.4s linear both; }
/* Eerst terugspoelen (strepen, trillen, ◀◀), dan slow motion met een tijdlijn onderin, zoals bij een sportuitzending
   (9 nov 2026, de eigenaar koos A in plaats van het getekende rondje). */
@keyframes meme-rewind { 0% { transform: translateX(-1.5%) scale(1.04); filter: saturate(.3) contrast(1.4) brightness(1.2); } 50% { transform: translateX(1.5%) scale(1.04); } 100% { transform: none; filter: saturate(.7) contrast(1.1); } }
.meme--replay .meme__rp-vhs { position: absolute; inset: 0; overflow: hidden; background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 10%) 0 2px, transparent 2px 6px); animation: meme-rp-off .2s 1.4s both; }
.meme--replay .meme__rp-vhs::after { content: ""; position: absolute; left: 0; right: 0; height: calc(6 * var(--mh)); background: rgb(255 255 255 / 25%); animation: meme-rp-band .5s linear 3 both; }
@keyframes meme-rp-band { from { top: 100%; } to { top: -10%; } }
@keyframes meme-rp-off { to { opacity: 0; } }
@keyframes meme-rp-on { from { opacity: 0; } }
@property --meme-frame { syntax: '<integer>'; initial-value: 0; inherits: false; }
.meme--replay .meme__rp-bar { position: absolute; left: calc(4 * var(--mw)); right: calc(4 * var(--mw)); bottom: calc(3.4 * var(--mh)); height: calc(.7 * var(--mh)); background: rgb(255 255 255 / 30%); border-radius: 99px; }
.meme--replay .meme__rp-bar i { position: absolute; inset: 0 auto 0 0; background: #ffe14d; border-radius: inherit; animation: meme-rp-grow 7s 1.4s linear both; }
.meme--replay .meme__rp-bar b { position: absolute; top: 50%; width: calc(2 * var(--mh)); height: calc(2 * var(--mh)); margin: calc(-1 * var(--mh)) 0 0 calc(-1 * var(--mh)); background: #ffe14d; border-radius: 50%; animation: meme-rp-move 7s 1.4s linear both; }
@keyframes meme-rp-grow { from { width: 22%; } to { width: 62%; } }
@keyframes meme-rp-move { from { left: 22%; } to { left: 62%; } }
.meme--replay .meme__rp-tc { position: absolute; right: calc(4 * var(--mw)); bottom: calc(5.4 * var(--mh)); margin: 0; font: 700 calc(2.2 * var(--mh))/1 ui-monospace, Menlo, monospace; color: #fff; text-shadow: 0 calc(.2 * var(--mh)) calc(.6 * var(--mh)) #000; counter-reset: frame var(--meme-frame); animation: meme-rp-count 7s 1.4s linear both; }
.meme--replay .meme__rp-tc::after { content: "00:03:" counter(frame, decimal-leading-zero) " / 00:09:00"; }
@keyframes meme-rp-count { from { --meme-frame: 2; } to { --meme-frame: 24; } }
@keyframes meme-slowzoom { from { transform: scale(1); } to { transform: scale(1.12); } }
.meme--replay .meme__rp-tag { position: absolute; top: calc(5 * var(--mh)); left: calc(4 * var(--mw)); margin: 0; padding: calc(1.4 * var(--mh)) calc(3 * var(--mh)); background: #ffe14d; color: #000; font: italic 900 calc(4.4 * var(--mh))/1 var(--meme-sans); transform: skewX(-12deg); animation: meme-slide-in .4s both; }
.meme--replay :is(.meme__rp-slow, .meme__rp-rew) { position: absolute; top: calc(6 * var(--mh)); right: calc(4 * var(--mw)); margin: 0; font: 900 calc(3 * var(--mh))/1 var(--meme-sans); text-shadow: 0 calc(.3 * var(--mh)) calc(1 * var(--mh)) #000; }
.meme--replay .meme__rp-rew { animation: meme-rp-off .1s 1.4s both; }
.meme--replay .meme__rp-slow { animation: meme-rp-on .1s 1.4s both, meme-blink 1s 1.5s steps(2) infinite; }
/* Geen getekend rondje met pijl meer (9 nov 2026, de eigenaar: "dat rondje ook weg moet, omdat het vaker ernaast zal
   zitten dan goed. De pijl en tekst lopen daar ook door elkaar"): het stond vast in het midden, niet op de actie. */
.meme--replay .meme__rp-note { position: absolute; top: calc(4 * var(--mh)); right: calc(9 * var(--mw)); margin: calc(6 * var(--mh)) 0 0; font: italic 900 calc(6 * var(--mh))/1 "Fraunces", Georgia, serif; color: #ffe14d; text-shadow: 0 calc(.4 * var(--mh)) calc(1 * var(--mh)) #000; transform: rotate(-6deg); animation: meme-in .3s both; animation-delay: 2s; }
.meme--replay .meme__caption { --cap: 2.6s; }

/* 21. Livestream met chat */
.meme--stream { background: #0e0e10; }
.meme--stream .meme__st-cam { position: absolute; left: calc(3 * var(--mw)); top: calc(5 * var(--mh)); width: calc(62 * var(--mw)); height: calc(76 * var(--mh)); overflow: hidden; border-radius: calc(1.4 * var(--mh)); animation: meme-in .3s both; }
.meme--stream .meme__st-cam img { width: 100%; height: 100%; object-fit: cover; }
.meme--stream .meme__st-live { position: absolute; top: calc(2 * var(--mh)); left: calc(2 * var(--mh)); display: flex; gap: calc(1.4 * var(--mh)); align-items: center; margin: 0; padding: calc(.8 * var(--mh)) calc(1.4 * var(--mh)); border-radius: calc(.8 * var(--mh)); background: rgb(0 0 0 / 60%); font: 800 calc(2.4 * var(--mh))/1 var(--meme-sans); }
.meme--stream .meme__st-live b { padding: calc(.4 * var(--mh)) calc(1 * var(--mh)); border-radius: calc(.4 * var(--mh)); background: #e91916; }
.meme--stream .meme__chat { position: absolute; right: calc(3 * var(--mw)); top: calc(5 * var(--mh)); width: calc(29 * var(--mw)); height: calc(76 * var(--mh)); padding: calc(2.4 * var(--mh)); border-radius: calc(1.4 * var(--mh)); background: #18181b; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(1.6 * var(--mh)); text-align: left; }
.meme--stream .meme__chat p { margin: 0; font: 600 calc(3 * var(--mh))/1.25 var(--meme-sans); animation: meme-up .25s both; }
.meme--stream .meme__chat b { color: #bf94ff; }
.meme--stream .meme__chat p:nth-child(2n) b { color: #00d27a; } .meme--stream .meme__chat p:nth-child(3n) b { color: #ff7a59; }
.meme--stream .meme__emoji { position: absolute; left: calc(3 * var(--mw)); width: calc(62 * var(--mw)); bottom: calc(19 * var(--mh)); height: calc(60 * var(--mh)); overflow: hidden; pointer-events: none; }
.meme--stream .meme__emoji i { position: absolute; bottom: calc(-8 * var(--mh)); font-size: calc(7 * var(--mh)); font-style: normal; animation: meme-float-up 2.2s ease-out infinite both; }
@keyframes meme-float-up { from { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } to { opacity: 0; transform: translateY(calc(-62 * var(--mh))) scale(1.2) rotate(20deg); } }
.meme--stream .meme__st-title { position: absolute; left: calc(3 * var(--mw)); right: calc(3 * var(--mw)); bottom: calc(5 * var(--mh)); margin: 0; text-align: left; font: 900 calc(6 * var(--mh))/1 var(--meme-sans); text-transform: uppercase; animation: meme-up .4s both; animation-delay: 1.2s; }

/* 22. Politiefoto */
.meme--mugshot { background: #d8d6cf; color: #111; }
.meme--mugshot .meme__height { position: absolute; inset: 0 0 calc(20 * var(--mh)); display: grid; align-content: start; }
.meme--mugshot .meme__height span { display: block; height: calc(11 * var(--mh)); border-top: calc(.4 * var(--mh)) solid #555; padding-left: calc(3 * var(--mw)); text-align: left; font: 800 calc(3 * var(--mh))/1.6 var(--meme-sans); color: #444; }
.meme--mugshot .meme__mug { position: absolute; left: 50%; top: calc(10 * var(--mh)); width: calc(46 * var(--mh)); height: calc(56 * var(--mh)); margin-left: calc(-23 * var(--mh)); overflow: hidden; animation: meme-in .01s both; animation-delay: .6s; }
.meme--mugshot .meme__mug img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.9) contrast(1.15); }
.meme--mugshot .meme__board { position: absolute; left: 50%; top: calc(52 * var(--mh)); width: calc(56 * var(--mh)); margin-left: calc(-28 * var(--mh)); padding: calc(1.8 * var(--mh)); display: grid; gap: calc(1 * var(--mh)); background: #111; color: #fff; font: 800 calc(3 * var(--mh))/1 ui-monospace, Menlo, monospace; animation: meme-rise .5s cubic-bezier(.2, .9, .3, 1) both; animation-delay: 1.1s; }
.meme--mugshot .meme__board b { font-size: calc(6 * var(--mh)); }
.meme--mugshot .meme__flash { --flash: .6s; }
.meme--mugshot .meme__caption { --cap: 2.2s; bottom: calc(3 * var(--mh)); color: #111; }
.meme--mugshot .meme__caption .takeover__title { font-size: calc(5 * var(--mh)); text-shadow: none; }

/* 23. Filmposter */
.meme--movie { background: #000; }
.meme--movie .meme__poster2 { position: absolute; left: 50%; top: calc(3 * var(--mh)); width: calc(64 * var(--mh)); height: calc(94 * var(--mh)); margin-left: calc(-32 * var(--mh)); overflow: hidden; background: #0a1418; animation: meme-in .6s both; }
.meme--movie .meme__poster2 > img { position: absolute; inset: 0; width: 100%; height: 72%; object-fit: cover; filter: sepia(.35) saturate(1.4) contrast(1.15) hue-rotate(-10deg); animation: meme-kenburns 6s linear both; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.meme--movie .meme__quote { position: absolute; top: calc(2.4 * var(--mh)); left: 0; right: 0; margin: 0; font: 700 calc(2 * var(--mh))/1 var(--meme-sans); letter-spacing: .06em; color: #ffd27a; animation: meme-in .5s both; animation-delay: 1s; }
.meme--movie .meme__mv-title { position: absolute; left: 0; right: 0; top: calc(56 * var(--mh)); margin: 0; font: 900 calc(14 * var(--mh))/1 var(--meme-sans); letter-spacing: .12em; color: #f1e6d0; animation: meme-title-in 1.6s ease-out both; animation-delay: .8s; }
@keyframes meme-title-in { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .12em; } }
.meme--movie .meme__mv-sub { position: absolute; left: 0; right: 0; top: calc(71 * var(--mh)); margin: 0; font: italic 600 calc(3.4 * var(--mh))/1 "Fraunces", Georgia, serif; color: #ffb35a; animation: meme-in .5s both; animation-delay: 1.8s; }
.meme--movie .meme__mv-tag { position: absolute; left: 0; right: 0; top: calc(77 * var(--mh)); margin: 0; font: 800 calc(2.4 * var(--mh))/1 var(--meme-sans); letter-spacing: .3em; text-transform: uppercase; animation: meme-in .5s both; animation-delay: 2.4s; }
.meme--movie .meme__credits { position: absolute; left: calc(5 * var(--mh)); right: calc(5 * var(--mh)); top: calc(83 * var(--mh)); margin: 0; font: 600 calc(1.4 * var(--mh))/1.3 var(--meme-sans); letter-spacing: .06em; color: rgb(255 255 255 / 55%); transform: scaleY(1.6); animation: meme-in .5s both; animation-delay: 2.8s; }
.meme--movie .meme__soon { position: absolute; left: 0; right: 0; bottom: calc(2.4 * var(--mh)); margin: 0; font: 900 calc(2.6 * var(--mh))/1 var(--meme-sans); letter-spacing: .2em; text-transform: uppercase; color: #ffd27a; animation: meme-in .5s both; animation-delay: 3.2s; }

/* 24. Nieuw record op het grote scherm, met vuurwerk */
.meme--record { background: radial-gradient(90% 70% at 50% 100%, #1a2a50 0%, #04060e 70%); }
.meme__burst { position: absolute; width: 0; height: 0; animation: meme-in .01s both; }
.meme__burst i { position: absolute; left: calc(-.6 * var(--mh)); top: calc(-.6 * var(--mh)); width: calc(1.2 * var(--mh)); height: calc(1.2 * var(--mh)); border-radius: 50%; background: var(--c); transform: rotate(var(--r)) translateY(0); opacity: 0; animation: meme-spark 1.3s cubic-bezier(.1, .7, .3, 1) both; animation-delay: inherit; }
.meme--record .meme__tron { position: absolute; left: 50%; top: calc(22 * var(--mh)); width: calc(130 * var(--mh)); margin-left: calc(-65 * var(--mh)); display: flex; align-items: center; gap: calc(4 * var(--mh)); padding: calc(3 * var(--mh)); border: calc(1.4 * var(--mh)) solid #2a2f3a; background: #000; animation: meme-pop .4s cubic-bezier(.2, 1.4, .5, 1) both; animation-delay: .2s; }
.meme--record .meme__tron::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 35%, rgb(0 0 0 / 70%) 36%); background-size: calc(.9 * var(--mh)) calc(.9 * var(--mh)); pointer-events: none; }
.meme--record .meme__tron-face { flex: none; width: calc(34 * var(--mh)); height: calc(34 * var(--mh)); overflow: hidden; }
.meme--record .meme__tron-face img { width: 100%; height: 100%; object-fit: cover; }
.meme--record .meme__tron-big { margin: 0; font: 900 calc(13 * var(--mh))/.95 var(--meme-sans); color: #ffd23f; text-align: left; animation: meme-blink .5s steps(2) 5; animation-delay: .6s; }
.meme--record .meme__tron-sub { margin: calc(2 * var(--mh)) 0 0; font: 900 calc(4.4 * var(--mh))/1 var(--meme-sans); color: #5ce1e6; text-align: left; text-transform: uppercase; }
.meme--record .meme__caption { --cap: 2.2s; bottom: calc(6 * var(--mh)); }

/* 25. Strike */
.meme--strike { background: linear-gradient(#1a0f2e, #0a0612); }
.meme--strike .meme__lane { position: absolute; left: 50%; bottom: 0; width: calc(120 * var(--mh)); height: calc(70 * var(--mh)); margin-left: calc(-60 * var(--mh)); background: repeating-linear-gradient(90deg, #d9a35f 0 calc(6 * var(--mh)), #c98f4a calc(6 * var(--mh)) calc(6.4 * var(--mh))); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
.meme--strike .meme__pins { position: absolute; left: 50%; top: calc(24 * var(--mh)); width: 0; }
.meme--strike .meme__pin { position: absolute; width: calc(13 * var(--mh)); height: calc(13 * var(--mh)); animation: meme-pin-fly .8s cubic-bezier(.2, .6, .4, 1) both; animation-delay: 1.2s; }
.meme--strike .meme__pin--a { left: calc(-6.5 * var(--mh)); top: calc(4 * var(--mh)); --fx: calc(10 * var(--mw)); --fy: calc(-40 * var(--mh)); --fr: 540deg; }
.meme--strike .meme__pin--b { left: calc(-21 * var(--mh)); top: 0; --fx: calc(-30 * var(--mw)); --fy: calc(-30 * var(--mh)); --fr: -420deg; }
.meme--strike .meme__pin--c { left: calc(8 * var(--mh)); top: 0; --fx: calc(30 * var(--mw)); --fy: calc(-34 * var(--mh)); --fr: 400deg; }
@keyframes meme-pin-fly { to { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); opacity: 0; } }
.meme--strike .meme__ball { position: absolute; left: 50%; top: calc(70 * var(--mh)); width: calc(22 * var(--mh)); height: calc(22 * var(--mh)); margin-left: calc(-11 * var(--mh)); animation: meme-roll 1.2s cubic-bezier(.4, 0, .9, .7) both; animation-delay: .1s; }
.meme--strike .meme__ball { animation-fill-mode: both; }
.meme--strike .meme__strike { position: absolute; left: 0; right: 0; top: calc(30 * var(--mh)); margin: 0; font: italic 900 calc(22 * var(--mh))/1 var(--meme-sans); color: #fff; -webkit-text-stroke: calc(1 * var(--mh)) #d4142a; paint-order: stroke fill; animation: meme-slam .35s cubic-bezier(.2, 1.6, .5, 1) both; animation-delay: 1.5s; }
.meme--strike .meme__caption { --cap: 2.2s; }

/* 26. On fire */
.meme--fire { background: radial-gradient(70% 70% at 50% 70%, #4a1205 0%, #0b0302 75%); }
.meme--fire > .takeover__inner > .meme__face { position: absolute; left: 50%; top: calc(14 * var(--mh)); width: calc(36 * var(--mh)); height: calc(36 * var(--mh)); margin-left: calc(-18 * var(--mh)); --team-accent: #ff8a1f; animation: meme-pop .4s both; }
.meme--fire .meme__flames { position: absolute; left: 50%; top: calc(52 * var(--mh)); width: 0; animation: meme-in .4s both; animation-delay: .4s; }
.meme--fire .meme__flames i { position: absolute; bottom: 0; left: calc(var(--x) - calc(5 * var(--mh))); width: calc(10 * var(--mh)); height: var(--h); border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; background: linear-gradient(#ffe14d, #ff7a1a 50%, #d4142a); transform-origin: 50% 100%; animation: meme-flicker .35s ease-in-out infinite alternate; }
.meme--fire .meme__flames i:nth-child(odd) { background: linear-gradient(#fff3a0, #ffb43a 60%, #ff5a1a); }
@keyframes meme-flicker { from { transform: scaleY(.75) skewX(-6deg); } to { transform: scaleY(1.15) skewX(6deg); } }
.meme--fire .meme__flames { top: calc(72 * var(--mh)); }
.meme--fire .meme__onfire { position: absolute; left: 0; right: 0; top: calc(50 * var(--mh)); margin: 0; font: italic 900 calc(16 * var(--mh))/1 var(--meme-sans); color: #ffe14d; -webkit-text-stroke: calc(.8 * var(--mh)) #6b0f02; paint-order: stroke fill; animation: meme-slam .35s cubic-bezier(.2, 1.6, .5, 1) both, meme-float-y .5s ease-in-out infinite; animation-delay: 1.2s, 1.6s; }
.meme--fire .meme__caption { --cap: 2.2s; bottom: calc(4 * var(--mh)); }

/* 27. Foutmelding */
.meme--error { background: #008080; font-family: Tahoma, Verdana, sans-serif; }
.meme--error .meme__dlg { position: absolute; left: calc(calc(20 * var(--mw)) + var(--i) * calc(4 * var(--mh))); top: calc(calc(8 * var(--mh)) + var(--i) * calc(5 * var(--mh))); width: calc(84 * var(--mh)); background: #c0c0c0; color: #000; text-align: left; box-shadow: inset calc(-.3 * var(--mh)) calc(-.3 * var(--mh)) #404040, inset calc(.3 * var(--mh)) calc(.3 * var(--mh)) #fff, calc(.8 * var(--mh)) calc(.8 * var(--mh)) 0 rgb(0 0 0 / 40%); animation: meme-in .01s both; }
.meme--error .meme__dlg-bar { display: flex; justify-content: space-between; margin: calc(.4 * var(--mh)); padding: calc(.6 * var(--mh)) calc(1 * var(--mh)); background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font: 700 calc(2.4 * var(--mh))/1 Tahoma, Verdana, sans-serif; }
.meme--error .meme__dlg-bar span { padding: 0 calc(.8 * var(--mh)); background: #c0c0c0; color: #000; }
.meme--error .meme__dlg-body { display: flex; gap: calc(2.4 * var(--mh)); padding: calc(2.4 * var(--mh)); align-items: center; }
.meme--error .meme__dlg-body img { width: calc(14 * var(--mh)); height: calc(14 * var(--mh)); object-fit: cover; filter: grayscale(.6); }
.meme--error .meme__dlg-body p { margin: 0; font: 400 calc(2.6 * var(--mh))/1.35 Tahoma, Verdana, sans-serif; }
.meme--error .meme__dlg-body b { display: block; margin-bottom: calc(.6 * var(--mh)); }
.meme--error .meme__dlg-btns { display: flex; justify-content: center; gap: calc(2 * var(--mh)); margin: 0 0 calc(2 * var(--mh)); }
.meme--error .meme__dlg-btns span { min-width: calc(16 * var(--mh)); padding: calc(.8 * var(--mh)) calc(2 * var(--mh)); text-align: center; font: 400 calc(2.4 * var(--mh))/1 Tahoma, Verdana, sans-serif; box-shadow: inset calc(-.3 * var(--mh)) calc(-.3 * var(--mh)) #404040, inset calc(.3 * var(--mh)) calc(.3 * var(--mh)) #fff; }
.meme--error .meme__caption { --cap: 2.2s; bottom: calc(5 * var(--mh)); }
.meme--error .meme__caption .takeover__title { font-family: var(--meme-sans); }

/* 28. Dramatische zoom */
.meme--zoom { background: #000; }
.meme--zoom .meme__zoom { position: absolute; inset: 0; overflow: hidden; }
.meme--zoom .meme__zoom img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; animation: meme-dzoom 2.4s steps(1) both; animation-delay: .2s; filter: contrast(1.2) saturate(.8); }
.meme--zoom .meme__zoom::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 45%, transparent 40%, rgb(120 0 0 / 65%)); }
.meme--zoom .meme__letter { position: absolute; left: 0; right: 0; height: calc(12 * var(--mh)); background: #000; }
.meme--zoom .meme__letter--top { top: 0; } .meme--zoom .meme__letter--bot { bottom: 0; }
.meme--zoom .meme__z1, .meme--zoom .meme__z2 { position: absolute; left: 0; right: 0; margin: 0; font: italic 900 calc(9 * var(--mh))/1 "Fraunces", Georgia, serif; text-shadow: 0 calc(.6 * var(--mh)) calc(2 * var(--mh)) #000; }
.meme--zoom .meme__z1 { top: calc(16 * var(--mh)); animation: meme-in .2s both; animation-delay: .8s; }
.meme--zoom .meme__z2 { top: calc(66 * var(--mh)); animation: meme-in .2s both; animation-delay: 1.6s; }
.meme--zoom .meme__caption { --cap: 3s; bottom: calc(1 * var(--mh)); }
.meme--zoom .meme__caption .takeover__title { font-size: calc(5 * var(--mh)); }

/* 29. Finish: de winnaar breekt ver voor het lint (tot 30 okt 2026 een fotofinish, die klopte niet). */
.meme--finish { background: #2f7a3a; }
.meme--finish .meme__track { position: absolute; left: 0; right: 0; top: calc(14 * var(--mh)); height: calc(56 * var(--mh)); display: grid; grid-template-rows: 1fr 1fr; background: #c4462c; }
.meme--finish .meme__track i { border-bottom: calc(.8 * var(--mh)) solid #fff; }
.meme--finish .meme__runner { position: absolute; left: 0; }
.meme--finish .meme__runner .meme__face { width: calc(22 * var(--mh)); height: calc(22 * var(--mh)); }
.meme--finish .meme__runner--w { top: calc(17 * var(--mh)); animation: meme-run-w 1.6s cubic-bezier(.3, .2, .4, 1) both; animation-delay: .2s; }
.meme--finish .meme__runner--l { top: calc(45 * var(--mh)); animation: meme-run-l 5s linear both; animation-delay: .2s; }
@keyframes meme-run-w { from { transform: translateX(calc(-30 * var(--mw))); } to { transform: translateX(calc(80 * var(--mw))); } }
@keyframes meme-run-l { from { transform: translateX(calc(-30 * var(--mw))); } to { transform: translateX(calc(30 * var(--mw))); } }
.meme--finish .meme__post { position: absolute; left: calc(76 * var(--mw)); width: calc(1.4 * var(--mh)); height: calc(8 * var(--mh)); background: #fff; }
.meme--finish .meme__post--top { top: calc(10 * var(--mh)); }
.meme--finish .meme__post--bot { top: calc(66 * var(--mh)); }
.meme--finish .meme__tape { position: absolute; left: calc(calc(76 * var(--mw)) + calc(.3 * var(--mh))); width: calc(.8 * var(--mh)); height: calc(28 * var(--mh)); background: #ffe14d; }
.meme--finish .meme__tape--a { top: calc(14 * var(--mh)); transform-origin: 50% 0; animation: meme-snap-a .6s ease-out both; animation-delay: 1.45s; }
.meme--finish .meme__tape--b { top: calc(42 * var(--mh)); transform-origin: 50% 100%; animation: meme-snap-b .6s ease-out both; animation-delay: 1.45s; }
@keyframes meme-snap-a { to { transform: rotate(-70deg); } }
@keyframes meme-snap-b { to { transform: rotate(70deg); } }
.meme:is(.meme--finish, .meme--goal) .meme__ff { position: absolute; left: 0; right: 0; top: calc(2 * var(--mh)); margin: 0; font: italic 900 calc(11 * var(--mh))/1 var(--meme-sans); color: #fff; text-shadow: 0 calc(.6 * var(--mh)) 0 #0b2a10; animation: meme-pop .3s cubic-bezier(.2, 1.5, .5, 1) both; animation-delay: 1.6s; }
.meme:is(.meme--finish, .meme--goal) .meme__caption { --cap: 2.2s; bottom: calc(5 * var(--mh)); }

/* 31. Doelpunt: de winnaar schiet, de verliezer staat op doel en duikt de verkeerde kant op (30 okt 2026). */
.meme--goal { background: linear-gradient(#1f6b2c, #2f8a3c); }
.meme--goal .meme__pitch { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(12 * var(--mw)), rgb(255 255 255 / 6%) calc(12 * var(--mw)) calc(24 * var(--mw))); }
.meme--goal .meme__goalbox { position: absolute; right: calc(8 * var(--mw)); top: calc(16 * var(--mh)); width: calc(18 * var(--mw)); height: calc(52 * var(--mh)); border: calc(1.4 * var(--mh)) solid #fff; border-right: 0; }
.meme--goal .meme__net { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgb(255 255 255 / 35%) 0 calc(.3 * var(--mh)), transparent calc(.3 * var(--mh)) calc(3 * var(--mh))), repeating-linear-gradient(-45deg, rgb(255 255 255 / 35%) 0 calc(.3 * var(--mh)), transparent calc(.3 * var(--mh)) calc(3 * var(--mh))); animation: meme-net .4s ease-out both; animation-delay: 1.3s; }
@keyframes meme-net { 50% { transform: translateX(calc(2 * var(--mw))) scaleX(1.1); } }
.meme--goal .meme__keeper { position: absolute; right: calc(13 * var(--mw)); top: calc(32 * var(--mh)); width: calc(20 * var(--mh)); height: calc(20 * var(--mh)); animation: meme-dive .6s ease-out both; animation-delay: 1s; }
@keyframes meme-dive { to { transform: translate(calc(-2 * var(--mw)), calc(22 * var(--mh))) rotate(-80deg); } }
.meme--goal .meme__shooter { position: absolute; left: calc(10 * var(--mw)); top: calc(34 * var(--mh)); width: calc(22 * var(--mh)); height: calc(22 * var(--mh)); animation: meme-kick .4s ease-in both; animation-delay: .5s; }
@keyframes meme-kick { 50% { transform: translateX(calc(4 * var(--mw))) rotate(10deg); } }
.meme--goal .meme__ball { position: absolute; left: calc(24 * var(--mw)); top: calc(46 * var(--mh)); font-size: calc(8 * var(--mh)); animation: meme-shot .7s cubic-bezier(.3, .1, .6, 1) both; animation-delay: .7s; }
@keyframes meme-shot { to { transform: translate(calc(58 * var(--mw)), calc(-22 * var(--mh))) rotate(720deg); } }
.meme--goal .meme__ff { animation-delay: 1.4s; font-size: calc(16 * var(--mh)); color: #ffe14d; -webkit-text-stroke: calc(.8 * var(--mh)) #0b2a10; paint-order: stroke fill; text-shadow: none; }

/* 30. Ster op de stoep */
.meme--star { background: #1a1416; perspective: calc(100 * var(--mh)); }
.meme--star .meme__walk { position: absolute; left: 50%; top: calc(4 * var(--mh)); width: calc(110 * var(--mh)); height: calc(110 * var(--mh)); margin-left: calc(-55 * var(--mh)); background: radial-gradient(circle at 30% 30%, #4a3b40 0 calc(.4 * var(--mh)), transparent calc(.5 * var(--mh))) 0 0 / calc(3 * var(--mh)) calc(3 * var(--mh)), radial-gradient(circle at 70% 60%, #6a5a60 0 calc(.3 * var(--mh)), transparent calc(.4 * var(--mh))) 0 0 / calc(2.4 * var(--mh)) calc(2.4 * var(--mh)), #2d2427; transform: rotateX(48deg); transform-origin: 50% 30%; animation: meme-walk-in 1.2s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes meme-walk-in { from { transform: rotateX(48deg) translateY(calc(30 * var(--mh))) scale(.6); } to { transform: rotateX(48deg); } }
.meme--star .meme__star { position: absolute; left: 50%; top: calc(6 * var(--mh)); width: calc(70 * var(--mh)); margin-left: calc(-35 * var(--mh)); }
.meme--star .meme__star svg { width: calc(70 * var(--mh)); display: block; fill: #e88aa4; stroke: #c9a24a; stroke-width: 2; }
.meme--star .meme__star-name { position: absolute; left: 0; right: 0; top: calc(27 * var(--mh)); margin: 0; font: 900 calc(7 * var(--mh))/1 "Fraunces", Georgia, serif; color: #f2d58a; letter-spacing: .08em; text-transform: uppercase; animation: meme-in .5s both; animation-delay: 1s; }
.meme--star .meme__star-duel { position: absolute; left: 50%; top: calc(37 * var(--mh)); width: calc(30 * var(--mh)); margin: 0 0 0 calc(-15 * var(--mh)); font: italic 600 calc(2.8 * var(--mh))/1.15 "Fraunces", Georgia, serif; color: #7a2e44; animation: meme-in .5s both; animation-delay: 1.3s; }
.meme--star .meme__flashes i { position: absolute; width: calc(14 * var(--mh)); height: calc(14 * var(--mh)); border-radius: 50%; background: radial-gradient(circle, #fff 0 15%, rgb(255 255 255 / 0) 60%); opacity: 0; animation: meme-camflash .35s ease-out both; }
@keyframes meme-camflash { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
.meme--star .meme__caption { --cap: 1.8s; bottom: calc(6 * var(--mh)); }
/* Bijgesteld na de contactbladen. */
.meme--achievement { background-image: radial-gradient(70% 80% at 50% 40%, #1d3a24 0%, #07060c 75%); }
.meme--magazine .meme__cover::before { content: ""; position: absolute; inset: calc(28 * var(--mh)) 30% calc(18 * var(--mh)) 0; z-index: 0; background: linear-gradient(90deg, rgb(0 0 0 / 55%), transparent); }
.meme--magazine .meme__lines { z-index: 1; }
.meme--slots .meme__machine { top: calc(10 * var(--mh)); width: calc(130 * var(--mh)); margin-left: calc(-65 * var(--mh)); }
.meme--slots .meme__reel, .meme--slots .meme__strip span { height: calc(36 * var(--mh)); }
.meme--slots .meme__strip img { width: calc(29 * var(--mh)); height: calc(29 * var(--mh)); }
@keyframes meme-reel { from { transform: translateY(0); } to { transform: translateY(calc(-576 * var(--mh))); } }
.meme--slots .meme__jackpot { top: calc(58 * var(--mh)); }
.meme--weather .meme__sun { left: 15%; top: calc(16 * var(--mh)); width: calc(12 * var(--mh)); height: calc(12 * var(--mh)); margin: calc(-6 * var(--mh)) 0 0 calc(-6 * var(--mh)); border-radius: 50%; background: #fff3a0; }
.meme--weather .meme__sun i { left: calc(5 * var(--mh)); top: calc(-5 * var(--mh)); width: calc(2 * var(--mh)); height: calc(5 * var(--mh)); transform-origin: calc(1 * var(--mh)) calc(11 * var(--mh)); }
.meme--weather .meme__bolt { left: auto; right: 14%; top: calc(8 * var(--mh)); }
.meme--weather .meme__rain2 { position: absolute; inset: 0; overflow: hidden; }
.meme--weather .meme__rain2 i { position: absolute; top: calc(-6 * var(--mh)); width: calc(.5 * var(--mh)); height: calc(4 * var(--mh)); border-radius: calc(1 * var(--mh)); background: #a9d4ff; opacity: .7; animation: meme-drop2 .6s linear infinite; }
@keyframes meme-drop2 { to { transform: translateY(calc(90 * var(--mh))); } }
.meme--weather .meme__wx-half > :not(.meme__rain2, .meme__sun, .meme__bolt) { position: relative; z-index: 1; }
.meme__burst i { width: calc(1.6 * var(--mh)); height: calc(1.6 * var(--mh)); left: calc(-.8 * var(--mh)); top: calc(-.8 * var(--mh)); }
@keyframes meme-spark { 0% { opacity: 1; transform: rotate(var(--r)) translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--r)) translateY(calc(-28 * var(--mh))); } }
.meme--record .meme__tron { z-index: 1; }
.meme--replay .meme__rp-note { top: calc(8 * var(--mh)); }
.meme--stream .meme__chat { justify-content: flex-start; }
.meme--strike .meme__pin { width: calc(17 * var(--mh)); height: calc(17 * var(--mh)); }
.meme--strike .meme__pin--a { left: calc(-8.5 * var(--mh)); } .meme--strike .meme__pin--b { left: calc(-27 * var(--mh)); } .meme--strike .meme__pin--c { left: calc(10 * var(--mh)); }
@keyframes meme-roll { 0% { transform: translateY(calc(20 * var(--mh))) scale(1.3) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(calc(-46 * var(--mh))) scale(.6) rotate(-720deg); opacity: 0; } }
.meme--fire .meme__flames { top: calc(54 * var(--mh)); z-index: 0; }
.meme--fire .meme__flames i { width: calc(13 * var(--mh)); left: calc(var(--x) * 1.4 - calc(6.5 * var(--mh))); height: calc(var(--h) * 1.9); }
.meme--fire > .takeover__inner > .meme__face { z-index: 1; top: calc(12 * var(--mh)); }
.meme--fire .meme__onfire { top: calc(56 * var(--mh)); z-index: 2; }
.meme--zoom .meme__zoom img { transform-origin: 50% 42%; }
.meme__burst i { width: calc(.7 * var(--mh)); height: calc(3.6 * var(--mh)); left: calc(-.35 * var(--mh)); top: calc(-1.8 * var(--mh)); border-radius: calc(1 * var(--mh)); }
.meme--zoom .meme__zoom { inset: calc(12 * var(--mh)) auto calc(12 * var(--mh)) 50%; width: calc(120 * var(--mh)); margin-left: calc(-60 * var(--mh)); }
.meme--zoom .meme__zoom img { object-position: 50% 30%; transform-origin: 50% 40%; }
@keyframes meme-dzoom { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 60%, 100% { transform: scale(1.65); } }
.meme--zoom .meme__z1, .meme--zoom .meme__z2 { z-index: 1; }

/* Een lange naam maakt de grote letters kleiner (--meme-w en --meme-l uit memes.js). */
.meme--magazine .meme__big { font-size: calc(calc(11 * var(--mh)) * var(--meme-w, 1)); }
.meme--card .meme__card-name { font-size: calc(calc(6 * var(--mh)) * var(--meme-w, 1)); }
.meme--wanted .meme__who { font-size: calc(calc(6 * var(--mh)) * var(--meme-w, 1)); }
.meme--diploma .meme__dip-name { font-size: calc(calc(11 * var(--mh)) * var(--meme-w, 1)); }
/* De filmtitel past op de poster (64 breed): YASEMIN viel op de tv weg tot YASEMI (9 nov 2026). */
.meme--movie .meme__mv-title { font-size: min(calc(14 * var(--mh)), calc(60 * var(--mh) / var(--meme-wc, 5))); }
.meme--movie .meme__mv-sub { white-space: nowrap; font-size: min(calc(3.4 * var(--mh)), calc(112 * var(--mh) / (var(--meme-dc, 9) + 13))); }
.meme--star .meme__star-name { font-size: calc(calc(7 * var(--mh)) * var(--meme-w, 1)); }
.meme--paper .meme__paper-head { font-size: calc(calc(12 * var(--mh)) * var(--meme-w, 1) * .6 + calc(4 * var(--mh))); }
.meme--versus .meme__vs-w p { font-size: calc(calc(10 * var(--mh)) * var(--meme-w, 1)); }
.meme--versus .meme__vs-l p { font-size: calc(calc(10 * var(--mh)) * var(--meme-l, 1)); }
.meme--mugshot .meme__board b { font-size: calc(calc(6 * var(--mh)) * var(--meme-l, 1)); }
.meme--trophy .meme__plate { font-size: calc(calc(3.6 * var(--mh)) * var(--meme-w, 1)); }
.meme :is(.meme__headline, .meme__caption .takeover__title, .meme__lines li, .meme__board span, .meme__tron-sub) { overflow-wrap: anywhere; }


/* De maten van een scène (sinds 1 nov 2026): --mh en --mw in plaats van vh en vw. Op de tv is dat precies 1vh en 1vw.
   Op een staand scherm (een scène nog eens afspelen vanuit de puntenlijst) staat de scène sinds 2 nov 2026 schermvullend
   in portret (de eigenaar: "de animaties na duels op mobiel graag portret modus. Op TV mode alleen landscape", en "ik vind
   het echt belangrijk dat de animatie op mobiel schermvullend zijn"; daarvoor een liggend vlak van 16:9 als kleine tv).
   De basis: 1vh van de scène is daar --pt-mh (1,6vw, hoogstens 0,9vh), het speelvlak is het hele scherm op een rand van
   5vh na, en het onderschrift houdt zijn eigen maat. Daaronder per scène wat te breed was: een eigen schaal, een kleinere
   kop, of in de hoogte opgebouwd (het decreet, het nieuws en de jackpot). */
.takeover { --mh: 1vh; --mw: 1vw; }
@media (max-aspect-ratio: 1/1) {
    /* Bijgesteld na schermafbeeldingen van de eigenaar (6 nov 2026): de stempel viel rechts van het scherm, het woord
       RECORD was breder dan het kader en het kader viel over de titel. */
    .meme--wanted .meme__poster { box-sizing: border-box; width: calc(56 * var(--mh)); margin-left: calc(-28 * var(--mh)); }
    .meme--wanted .meme__wanted { font-size: calc(8.4 * var(--mh)); }
    .meme--wanted .meme__stamp { font-size: calc(4 * var(--mh)); letter-spacing: .02em; }
    .meme--replay :is(.meme__rp-slow, .meme__rp-rew) { top: calc(13 * var(--mh)); right: auto; left: calc(4 * var(--mw)); font-size: calc(2.4 * var(--mh)); }
    /* Staand viel de tijdcode over het label met de punten: bovenin, op de regel van SLOW MOTION. */
    .meme--replay .meme__rp-tc { top: calc(13 * var(--mh)); bottom: auto; font-size: calc(2 * var(--mh)); }
    .meme--replay .meme__rp-note { top: calc(14 * var(--mh)); right: calc(4 * var(--mw)); font-size: calc(4.4 * var(--mh)); }
    .meme--record .meme__tron { top: calc(6 * var(--mh)); width: calc(56 * var(--mh)); margin-left: calc(-28 * var(--mh)); }
    .meme--record .meme__tron-face { width: calc(30 * var(--mh)); height: calc(30 * var(--mh)); }
    .meme--record .meme__tron-big { font-size: calc(8.6 * var(--mh)); }
    .meme--record .meme__tron-sub { font-size: calc(3.4 * var(--mh)); }
    .meme { --pt-mh: min(1.6vw, .9vh); --mw: 1vw; --mh: var(--pt-mh); padding: 0; background-color: #06040a; }
    .meme .takeover__inner { width: 100vw; height: calc(100vh - 10vh); overflow: visible; }
    .meme .meme__caption { --mh: var(--pt-mh); gap: calc(1.4 * var(--mh)); }
    .meme .meme__caption .takeover__title { font-size: calc(5 * var(--mh)); max-width: 92vw; margin-inline: auto; }
    .meme .takeover__parts { flex-wrap: nowrap; gap: calc(1.4 * var(--mh)); }
    .meme .takeover__parts span { font-size: calc(2.2 * var(--mh)); padding: calc(1 * var(--mh)) calc(2 * var(--mh)); white-space: nowrap; }
    .meme:has(.kr) { background: #0e0905; }
    /* Staand ver uit elkaar (de eigenaar, 2 nov 2026): "kwaak" direct onder de kikker, de rat direct onder de cel. */
    .kr--kikker .kr-say--low { top: calc(40 * var(--mh)); bottom: auto; }
    .kr--kerker .kr-rat { top: calc(58 * var(--mh)); bottom: auto; }

    /* Te grote koppen kleiner. */
    .meme--deal .meme__deal { font-size: calc(6.2 * var(--mh)); }
    .meme--levelup .meme__lvl { font-size: calc(9 * var(--mh)); }
    .meme--levelup .meme__stats { font-size: calc(2.6 * var(--mh)); padding-inline: 4vw; }
    .meme--levelup .meme__xp { width: 86vw; margin-left: -43vw; }
    .meme--strike .meme__strike { font-size: calc(13 * var(--mh)); }
    .meme--versus .meme__winner-txt { font-size: calc(12 * var(--mh)); }
    .meme--versus .meme__vs { font-size: calc(20 * var(--mh)); }

    /* Net te breed: de scène op eigen schaal, het onderschrift houdt zijn maat. */
    .meme--magazine { --mh: calc(var(--pt-mh) * .84); }
    .meme--diploma { --mh: calc(var(--pt-mh) * .72); }
    .meme--diploma .meme__diploma { top: calc(16 * var(--mh)); width: 92vw; margin-left: -46vw; height: calc(100 * var(--mh)); padding-inline: calc(6 * var(--mh)); }
    .meme--diploma .meme__dip-foot { left: calc(6 * var(--mh)); right: calc(6 * var(--mh)); bottom: calc(24 * var(--mh)); }
    .meme--paper { --mh: calc(var(--pt-mh) * .75); }
    .meme--paper .meme__paper { width: 92vw; margin-left: -46vw; height: auto; }
    .meme--paper .meme__paper-body { grid-template-columns: 1fr; }
    .meme--paper .meme__paper-mast { font-size: calc(7.4 * var(--mh)); }
    .meme--record .meme__tron { flex-direction: column; gap: calc(2 * var(--mh)); }
    .meme--record :is(.meme__tron-big, .meme__tron-sub) { text-align: center; }
    .meme--error .meme__dlg { left: calc(3vw + var(--i) * calc(1.6 * var(--mh))); width: 84vw; }
    .meme--finish .meme__runner .meme__face { width: calc(16 * var(--mh)); height: calc(16 * var(--mh)); }
    .meme--cloud .meme__winner { right: calc(3 * var(--mw)); }
    .meme--cloud .meme__winner .meme__face { width: calc(14 * var(--mh)); height: calc(14 * var(--mh)); }
    .kr-dragon { --mh: calc(var(--pt-mh) * .8); }
    .kr-bang { left: auto; right: 4vw; font-size: calc(9 * var(--mh)); }
    .kr-staff { left: calc(50% + calc(10 * var(--mh))); font-size: calc(12 * var(--mh)); }
    .kr-map__face { left: 60%; }
    .meme--finish .meme__post, .meme--finish .meme__tape { left: calc(84 * var(--mw)); }
    .meme--finish .meme__tape { left: calc(calc(84 * var(--mw)) + calc(.3 * var(--mh))); }
    .meme--goal .meme__goalbox { right: calc(4 * var(--mw)); width: calc(22 * var(--mw)); }
    .meme--goal .meme__keeper { right: calc(8 * var(--mw)); }
    .kr-map { width: 90vw; height: calc(56 * var(--mh)); }
    .kr-banner { left: calc(8% + var(--i) * 32%); }
    .kr-banner__flag { width: calc(14 * var(--mh)); height: calc(18 * var(--mh)); }
    .kr-joust--l { right: calc(4 * var(--mw)); }
    .kr--tovenaar .kr-wand, .kr-wand { right: 8vw; }

    /* Prestatie: de melding smaller, de tekst mag over twee regels. */
    .meme--achievement .meme__toast { width: 92vw; margin-left: -46vw; gap: calc(2 * var(--mh)); padding: calc(2 * var(--mh)); }
    .meme--achievement .meme__toast b { font-size: calc(3.2 * var(--mh)); }
    .meme--achievement .meme__toast > div { flex: 1; min-width: 0; }
    .meme--achievement .meme__trophy { width: calc(8 * var(--mh)); height: calc(8 * var(--mh)); font-size: calc(4.6 * var(--mh)); }
    .meme--achievement .meme__gs { padding: calc(.8 * var(--mh)) calc(1.4 * var(--mh)); font-size: calc(2.2 * var(--mh)); }

    /* Weerbericht: de balk onderaan over twee regels. */
    .meme--weather .meme__wx-bar { padding: 0 4vw; gap: calc(2 * var(--mh)); }
    .meme--weather .meme__wx-bar span { font-size: calc(3 * var(--mh)); }

    /* In de hoogte uitgewerkt (de eigenaar): het decreet smaller en langer, het nieuws onder elkaar, de rollen van de
       jackpot onder elkaar. */
    .kr-scroll { width: 88vw; top: calc(4 * var(--mh)); }
    .kr-scroll__head { font-size: calc(5.4 * var(--mh)); }
    .kr-scroll__text { font-size: calc(4.6 * var(--mh)); }
    .meme--news .meme__cam { top: calc(16 * var(--mh)); left: 4vw; right: 4vw; width: auto; height: calc(46 * var(--mh)); margin-left: 0; }
    /* Het archiefbeeld in de hoek van de camera, boven de balk Breaking (sinds 2 nov 2026, de eigenaar: "de ZW foto
       valt erachter"; daarvoor stond hij half achter de balk). */
    .meme--news .meme__inset { top: calc(36 * var(--mh)); right: 6vw; }
    .meme--news .meme__lower { bottom: calc(30 * var(--mh)); flex-direction: column; }
    .meme--news .meme__headline { font-size: calc(5 * var(--mh)); }
    .meme--slots .meme__machine { --mh: calc(var(--pt-mh) * .6); top: calc(2 * var(--pt-mh)); width: 56vw; margin-left: -28vw; }
    .meme--slots .meme__reels { grid-template-columns: 1fr; }
    .meme--slots .meme__jackpot { top: calc(72 * var(--mh)); font-size: calc(11 * var(--mh)); }
    /* De collages staand (sinds 6 nov 2026): de polaroids in twee kolommen, de stroken naast elkaar, de krant smal. */
    .meme--polaroids .meme__polaroid { --w: 26; left: calc(50% + var(--px) * var(--mh)); top: calc(var(--py) * var(--mh)); }
    .meme--booth .meme__strips { top: calc(14 * var(--mh)); gap: calc(3 * var(--mh)); }
    .meme--booth .meme__booth-strip { width: calc(28 * var(--mh)); }
    .meme--booth .meme__neon { font-size: calc(7 * var(--mh)); }
    .meme--spread .meme__spread { width: calc(54 * var(--mh)); margin-left: calc(-27 * var(--mh)); height: calc(96 * var(--mh)); padding: calc(2 * var(--mh)); }
    .meme--spread .meme__spread-mast { font-size: calc(5.4 * var(--mh)); }
    .meme--spread .meme__spread-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
    .meme--spread .meme__spread-grid--2 { grid-template-columns: 1fr; }
    .meme--spread .meme__spread-grid > figure:first-child { grid-row: auto; }
    .meme--spread :is(.meme__spread-grid--3, .meme__spread-grid--5) > figure:first-child { grid-column: 1 / -1; grid-row: span 2; }
    .meme--filmroll .meme__film { top: calc(18 * var(--mh)); height: calc(42 * var(--mh)); }
    .meme--filmroll .meme__frame { width: calc(40 * var(--mh)); height: calc(30 * var(--mh)); }
    .meme--filmroll .meme__film-title { font-size: calc(3.6 * var(--mh)); letter-spacing: .15em; }
    .meme--corkboard .meme__pin-photo { --w: 26; left: calc(50% + var(--px) * var(--mh)); top: calc(var(--py) * var(--mh) + 8 * var(--mh)); }
    .meme--corkboard .meme__note { top: calc(1 * var(--mh)); right: calc(2 * var(--mh)); font-size: calc(2.4 * var(--mh)); }
    .meme--museum .meme__wall { --cols: 2 !important; width: calc(56 * var(--mh)); margin-left: calc(-28 * var(--mh)); top: calc(8 * var(--mh)); }
    .meme--museum .meme__expo { font-size: calc(1.8 * var(--mh)); letter-spacing: .2em; }
    .meme--postcard .meme__card-post { width: calc(54 * var(--mh)); height: calc(96 * var(--mh)); margin-left: calc(-27 * var(--mh)); }
    .meme--postcard .meme__post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .meme--postcard .meme__post-grid--3 > span:first-child, .meme--postcard .meme__post-grid--5 > span:first-child { grid-column: 1 / -1; grid-row: auto; }
    .meme--postcard .meme__greet { padding-right: calc(14 * var(--mh)); font-size: calc(4 * var(--mh)); }
    .meme--postcard .meme__stamp-post { width: calc(10 * var(--mh)); height: calc(12 * var(--mh)); }
    .meme--comic .meme__comic { --cols: 2 !important; width: calc(56 * var(--mh)); height: calc(96 * var(--mh)); margin-left: calc(-28 * var(--mh)); }
    .meme--comic :is(.meme__comic--3, .meme__comic--5) > .meme__panel:first-child { grid-column: 1 / -1; }
    /* De tien van "maak er nog maar 10" staand: smal en hoog, twee kolommen. */
    .meme--scrapbook .meme__scrap { width: calc(56 * var(--mh)); height: calc(96 * var(--mh)); margin-left: calc(-28 * var(--mh)); padding: calc(8 * var(--mh)) calc(3 * var(--mh)) calc(3 * var(--mh)); grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: calc(3 * var(--mh)); }
    .meme--scrapbook .meme__scrap--2 { grid-template-columns: minmax(0, 1fr) !important; }
    .meme--scrapbook :is(.meme__scrap--3, .meme__scrap--5) > figure:first-of-type { grid-column: 1 / -1; grid-row: auto; }
    .meme--scrapbook .meme__scrap-title { font-size: calc(3.6 * var(--mh)); left: calc(3 * var(--mh)); }
    .meme--cameraroll .meme__phone { width: calc(50 * var(--mh)); height: calc(92 * var(--mh)); margin-left: calc(-25 * var(--mh)); }
    .meme--stamps .meme__sheet { --cols: 2 !important; width: calc(56 * var(--mh)); height: calc(92 * var(--mh)); margin-left: calc(-28 * var(--mh)); padding: calc(2.4 * var(--mh)); gap: calc(2 * var(--mh)); }
    .meme--stamps .meme__stamp-tile i { display: none; }
    .meme--stamps .meme__postmark { right: calc(1 * var(--mh)); top: calc(38 * var(--mh)); width: calc(18 * var(--mh)); height: calc(18 * var(--mh)); font-size: calc(2.2 * var(--mh)); }
    .meme--slides .meme__screen { width: calc(56 * var(--mh)); height: calc(90 * var(--mh)); margin-left: calc(-28 * var(--mh)); }
            .meme--screens .meme__tvwall { width: calc(56 * var(--mh)); height: calc(86 * var(--mh)); margin-left: calc(-28 * var(--mh)); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
    .meme--screens .meme__live { font-size: calc(3 * var(--mh)); }
    .meme .meme__pop { width: calc(56 * var(--mh)); height: calc(90 * var(--mh)); margin-left: calc(-28 * var(--mh)); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
    .meme--fridge .meme__fridge { width: calc(56 * var(--mh)); height: calc(94 * var(--mh)); margin-left: calc(-28 * var(--mh)); padding: calc(3 * var(--mh)) calc(6 * var(--mh)) calc(3 * var(--mh)) calc(3 * var(--mh)); }
    .meme--fridge .meme__handle { right: calc(1.6 * var(--mh)); width: calc(1.6 * var(--mh)); }
    .meme--fridge .meme__letters b { font-size: calc(4.4 * var(--mh)); }
    .meme--fridge .meme__magnets { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: calc(2.6 * var(--mh)); }
    .meme--fridge .meme__magnets--2 { grid-template-columns: minmax(0, 1fr) !important; }
    .meme--fridge :is(.meme__magnets--3, .meme__magnets--5) > figure:first-child { grid-column: 1 / -1; grid-row: auto; }
    .meme--clothesline .meme__lines-wrap { width: calc(60 * var(--mh)); margin-left: calc(-30 * var(--mh)); top: calc(4 * var(--mh)); display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--mh)) calc(4 * var(--mh)); background: repeating-linear-gradient(#fff 0 calc(.5 * var(--mh)), transparent calc(.5 * var(--mh)) calc(28.7 * var(--mh))); }
    .meme--clothesline .meme__washline { display: contents; }
    .meme--clothesline .meme__washline figure, .meme--clothesline .meme__lines-wrap > :only-child figure { width: calc(26 * var(--mh)); padding: calc(.8 * var(--mh)) calc(.8 * var(--mh)) calc(2.4 * var(--mh)); }
    .meme--contact .meme__contact { width: calc(56 * var(--mh)); height: calc(92 * var(--mh)); margin-left: calc(-28 * var(--mh)); padding: calc(2 * var(--mh)); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
    .meme--contact .meme__circle { left: calc(.4 * var(--mh)); top: calc(.4 * var(--mh)); width: calc(19.6 * var(--mh)); height: calc(23.4 * var(--mh)); }
    .meme--contact .meme__pick { left: calc(20 * var(--mh)); top: calc(-1.2 * var(--mh)); font-size: calc(3.2 * var(--mh)); }
    .meme--album .meme__album { width: calc(56 * var(--mh)); height: calc(94 * var(--mh)); margin-left: calc(-28 * var(--mh)); padding: calc(3 * var(--mh)) calc(2.4 * var(--mh)); border-left-width: calc(2 * var(--mh)); grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: calc(2.4 * var(--mh)) calc(3 * var(--mh)); }
    .meme--album .meme__album--2 { grid-template-columns: minmax(0, 1fr) !important; }
    .meme--album :is(.meme__album--3, .meme__album--5) > figure:first-child { grid-column: 1 / -1; grid-row: auto; }
    /* De achtergrondkleur van het staande blok hierboven (.meme) won anders van het kurk en het geel. */
    .meme--corkboard { background-color: #b4824e; }
    .meme--comic { background-color: #ffd23f; }
}

/* ---------- Tv-modus (?tv=1): liggend en groot, zonder scrollen ---------- */

html.is-tv { font-size: clamp(16px, 0.95vw, 26px); }
html.is-tv body { overflow: hidden; }
/* fitTv() zet de zoom van body en meet meteen daarna de hoogte: dat mag nooit een
   overgang zijn, ook niet de 0,01 ms die "minder beweging" onderaan dit bestand elk
   element geeft. Dan mat fitTv() de oude hoogte, schaalde de tv niet en viel de
   onderkant van het scherm (15 okt 2026). */
html.is-tv body { transition-property: none !important; }
.is-tv .hero { padding: 2.4vh 20px 1.2vh; }
.is-tv .hero__title { font-size: 3rem; }
.is-tv .hero__location { display: none; }
.is-tv .page {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas:
        "recap recap"
        "hour hour"
        "standtitle ."
        "board egg"
        "board history";
    align-items: start;
    gap: 0 2.4vw;
    width: min(1800px, 94vw);
    /* Onderaan net zoveel lucht als boven de kop, anders zitten de teamkaarten
       en de laatste vondsten tegen de rand van het scherm (15 okt 2026). */
    padding-bottom: 2.4vh;
}
/* Zonder meesterproef (de spelavond, html.no-trial) staan de laatste vondsten rechts direct naast de teams. */
.is-tv.no-trial .page {
    grid-template-areas:
        "recap recap"
        "hour hour"
        "standtitle ."
        "board history";
}
.is-tv .recap,
.is-tv .recap-pending { grid-area: recap; }
/* Het duel-uur over de hele breedte onder de kop, groter: de tv staat aan de overkant
   van de kamer (sinds 15 okt 2026; daarvoor stond het op de tv nergens). */
.is-tv .duel-hour { grid-area: hour; margin-bottom: 2.2vh; padding: 16px 24px 70px; gap: 20px; }
.is-tv .duel-hour__flame { width: 64px; height: 64px; font-size: 2.1rem; }
.is-tv .duel-hour__kicker { font-size: 1rem; }
.is-tv .duel-hour__title { font-size: 1.7rem; }
.is-tv .duel-hour__sub { font-size: 1.05rem; }
.is-tv .duel-hour__x2 { font-size: 3.6rem; }
.is-tv .duel-hour__fuse { left: 24px; right: 24px; bottom: 22px; height: 8px; }
.is-tv .duel-hour__time { bottom: 38px; padding: 3px 12px; font-size: 1.1rem; }
/* Het kopje "De stand" in een eigen rij, zodat de eerste teamkaart en De Wacht
   ernaast op dezelfde hoogte beginnen (anders stond De Wacht een kopje hoger). */
.is-tv .board { display: contents; }
.is-tv .board > .section-title { grid-area: standtitle; }
.is-tv .board > .board__list { grid-area: board; }
.is-tv .egg { grid-area: egg; margin-top: 0; }
.is-tv .history { grid-area: history; }
/* Uitleg, lied, huisje, regels en de knoppen horen niet op een scherm zonder vinger.
   De lade Mini Duels valt sinds 17 okt 2026 weer onder .page > .legend (van 12 tot 17 okt
   zat hij in .legend-duels, met de uitdaagknop in de kop; op de tv was hij toen open te
   klikken, maar niet te scrollen, 15 okt 2026, de eigenaar). De rij van de sfeermuziek
   (.legend-music) ook niet: de tv heeft linksboven zijn eigen knop. */
.is-tv .page > .legend,
.is-tv .drawer-list,
.is-tv .legend-music,
.is-tv .watch-rules,
.is-tv .page-footer,
.is-tv .me-btn,
.is-tv .team-card__log,
.is-tv .recap__actions,
.is-tv .duel-call,
.is-tv .duel-titles { display: none !important; }
/* Vier teams of meer: twee kaarten naast elkaar. */
.is-tv .board__list:has(> li:nth-child(4)) { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.is-tv .history__list > li:nth-child(n + 7) { display: none; }
.is-tv .finale__stage { width: min(1200px, 100%); }
.is-tv .finale__sound { padding: 18px 32px; font-size: 1.5rem; }
/* Na de prijsuitreiking op de tv alleen de uitslag, groot en liggend (sinds 8 okt
   2026; daarvoor stond de terugblik boven de stand en De Wacht, en verkleinde fitTv()
   alles tot het op de gewone weergave leek). Sinds 8 okt 's avonds (de eigenaar:
   "professioneler") over de hele breedte in twee lagen: bovenaan links de winnaar
   met de foto's en de prijs, rechts de eindstand met de cijfers eronder; daaronder
   het lint en de eretitels, vier op een rij en in het midden. Daarvoor stond links
   alleen de winnaar in veel lege ruimte, en rechts de rest klein op elkaar.
   .recap__result doet niet mee in de opmaak (display: contents), zodat de delen
   ervan elk een eigen vak in het raster krijgen; de volgorde in de html blijft die
   van de telefoon. Is de winnaar hoger dan de eindstand en de cijfers samen, dan
   vangt de rij van de cijfers de rest op. */
.is-tv .page:has(> .recap) { grid-template-areas: "recap recap"; align-content: center; min-height: 74vh; }
.is-tv .page:has(> .recap) > :not(.recap),
.is-tv body:has(.page > .recap) .tv-sound { display: none !important; }
.is-tv .recap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
        "winner standings"
        "winner statstitle"
        "winner stats"
        "awardstitle awardstitle"
        "awards awards";
    align-items: start;
    gap: 0 4vw;
    margin: 1vh 0 0;
    padding: 4vh 3.5vw;
}
.is-tv .recap__winner { grid-area: winner; align-self: center; }
.is-tv .recap__result { display: contents; }
.is-tv .recap__stats-title { grid-area: statstitle; margin: 3vh 0 1.4vh; }
.is-tv .recap__stats { grid-area: stats; }
.is-tv .recap__subtitle { grid-area: awardstitle; margin: 4vh 0 2vh; }
.is-tv .recap__awards { grid-area: awards; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.is-tv .recap__award { flex: 0 1 calc(25% - 9px); width: auto; }
.is-tv .recap__kicker, .is-tv .recap__subtitle { font-size: 1rem; }
.is-tv .recap__title { font-size: 3.4rem; }
.is-tv .recap__faces { gap: 14px; margin-top: 3vh; }
.is-tv .recap__faces li { width: 104px; height: 104px; font-size: 2.2rem; border-width: 3px; }
.is-tv .recap__prize { margin-top: 3vh; font-size: 1.5rem; }
.is-tv .recap__standings { grid-area: standings; margin-top: 0; gap: 10px; }
.is-tv .recap__row { padding: 14px 18px; font-size: 1.35rem; }
.is-tv .recap__rank { width: 30px; }
.is-tv .recap__award-name { font-size: 1.2rem; }
.is-tv .recap__award-faces li { width: 32px; height: 32px; }
.is-tv .recap__ribbon { font-size: 1.1rem; }
.is-tv .recap__stats-title { font-size: 0.9rem; }
.is-tv .finale__title { font-size: 4.4rem; }
.is-tv .finale__title--winner { font-size: 5.6rem; }
.is-tv .finale__team-name i { width: 0.45em; height: 0.45em; }
.is-tv .finale__count { font-size: 11rem; }
.is-tv .finale__faces--big .finale__face { width: 130px; }
.is-tv .finale__faces--big .finale__avatar { width: 120px; height: 120px; }
.is-tv .finale__score--winner { font-size: 4.4rem; }
.is-tv .moments { width: min(640px, calc(100% - 48px)); }
.is-tv .moment { padding: 16px 22px; }
/* Terug naar de normale weergave en de sfeermuziek uit of aan (sinds 15 okt 2026):
   linksboven naast elkaar, weg na vier seconden stilte (html.tv-idle, app/tv.js) en
   terug bij beweging; zonder script blijft "Normale weergave" staan. */
.tv-controls {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 75;
    display: flex;
    gap: 10px;
}
.tv-exit {
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-high) 92%, transparent);
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow);
    backdrop-filter: blur(6px);
    transition: opacity 0.3s ease-in-out;
}
.tv-exit:hover,
.tv-exit:focus-visible { border-color: var(--turquoise); outline: none; }
.tv-idle .tv-exit:not(:focus-visible) { opacity: 0; pointer-events: none; }
/* De muziekknop: een echte knop met de vorm van de pil ernaast. */
.tv-music { font: inherit; font-weight: 700; cursor: pointer; }
.tv-sound {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 75;
    padding: 14px 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-high);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow);
}

/* QR-code van het bord (app/qr.js): rechtsboven op de tv, het voorbeeld in het
   paneel en de tafelkaart, die als enige naar de printer gaat. Altijd zwart op
   wit: zo scant elke camera hem, ook bij een donker thema. */
.tv-qr {
    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 70;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 10px 10px 8px;
    border-radius: var(--radius-sm);
    background: #fff;
    color: #111;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: var(--shadow);
}
.tv-qr__code { width: 112px; }
/* Weg te klikken (sinds 27 okt 2026, de eigenaar: "QR code op TV modus ook weg kunnen klikken"): een rond kruisje
   op de hoek, dat net als de knoppen linksboven wegvalt na vier seconden stilte (html.tv-idle, app/tv.js). */
.tv-qr__close {
    position: absolute;
    top: -10px;
    right: -10px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: opacity 0.3s ease-in-out;
}
.tv-qr__close:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
.tv-idle .tv-qr__close:not(:focus-visible) { opacity: 0; pointer-events: none; }
.tv-qr__code svg,
.qr-preview svg,
.qr-card__code svg { display: block; width: 100%; height: auto; }
.qr-preview { width: 168px; margin: 4px auto 14px; padding: 6px; border-radius: var(--radius-sm); background: #fff; }
.qr-preview:empty { display: none; }
.qr-card { display: none; }
/* De tafelkaart (app/qr.js): een tafelstandaard op A4, in het midden te vouwen, met op
   beide helften dezelfde kaart; de bovenste op zijn kop, zodat hij gevouwen aan twee
   kanten leesbaar op tafel staat (sinds 8 okt 2026, de eigenaar: "mooier, hij staat ten
   slotte op tafel"). Wit papier met de themakleur in de rand, de cijfers van de stappen
   en het kader om het woord; tekst die in de themakleur staat, wordt donkerder gemengd,
   zodat ook een licht accent (ijsblauw) op papier leesbaar blijft. Een eigen paginasoort
   (tafelkaart) zonder marges, dus zonder de kop- en voetregels van de browser; elke
   andere print (het draaiboek) houdt zijn marges. */
@media print {
    @page tafelkaart { size: A4 portrait; margin: 0; }
    /* Ook met "achtergronden afdrukken" aan: wit papier, geen donkere band. */
    html:has(body.is-printing-qr),
    body.is-printing-qr { background: #fff !important; margin: 0; }
    body.is-printing-qr > :not(#qrCard) { display: none !important; }
    body.is-printing-qr #qrCard {
        --card-ink: color-mix(in srgb, var(--turquoise) 72%, #000);
        page: tafelkaart;
        display: grid;
        grid-template-rows: 1fr 1fr;
        width: 100%;
        height: calc(100vh - 1px);
        overflow: hidden;
        background: #fff;
        color: #16181a;
        font-family: var(--sans, inherit);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .qr-card__half { display: flex; padding: 11mm 13mm; }
    .qr-card__half--top { transform: rotate(180deg); }
    /* De vouwlijn. */
    .qr-card__half + .qr-card__half { border-top: 0.3mm dashed #b9bec2; }
    .qr-card__panel {
        flex: 1;
        display: grid;
        grid-template-columns: 62mm 1fr;
        align-items: center;
        gap: 10mm;
        padding: 8mm 11mm;
        border: 0.9mm solid var(--turquoise);
        border-radius: 6mm;
    }
    .qr-card__side { display: grid; justify-items: center; gap: 3mm; }
    .qr-card__code { width: 62mm; }
    .qr-card__url { margin: 0; font-size: 9.5pt; font-weight: 600; color: #4a4f54; text-align: center; overflow-wrap: anywhere; }
    .qr-card__text { display: grid; align-content: center; gap: 1.6mm; text-align: left; }
    .qr-card__kicker { margin: 0; font-size: 10pt; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--card-ink); }
    .qr-card__year { margin: 0; font-size: 40pt; font-weight: 800; line-height: 0.95; letter-spacing: -0.01em; color: var(--card-ink); }
    .qr-card__theme { margin: 0; font-size: 13pt; font-weight: 700; }
    .qr-card__call { margin: 3mm 0 0; padding-top: 3mm; border-top: 0.4mm solid #e2e5e7; font-size: 17pt; font-weight: 800; }
    .qr-card__steps { list-style: none; counter-reset: step; display: grid; gap: 1.6mm; margin: 0; padding: 0; font-size: 11pt; }
    .qr-card__steps li { counter-increment: step; display: flex; align-items: center; gap: 2.5mm; }
    .qr-card__steps li::before {
        content: counter(step);
        flex: none;
        display: grid;
        place-items: center;
        width: 6mm;
        height: 6mm;
        border-radius: 50%;
        background: var(--turquoise);
        color: var(--on-accent, #fff);
        font-size: 9pt;
        font-weight: 800;
    }
    .qr-card__word { justify-self: start; margin: 2.5mm 0 0; padding: 2mm 4mm; border: 0.5mm dashed var(--turquoise); border-radius: 3mm; font-size: 11pt; }
    .qr-card__word strong { margin-left: 1.5mm; font-size: 15pt; letter-spacing: 0.04em; color: var(--card-ink); }
}

/* De eindstand delen (finale.js): boven de prijsuitreiking (80). Met .sheet erbij: de regel
   .sheet (z-index 50) staat verderop in dit bestand en wint anders van een kale .share-sheet.
   Tot 18 okt 2026 stond hierboven ook een losse } na het printblok, en die liet de browser
   deze regel helemaal overslaan; het venster opende onzichtbaar achter de uitreiking (de
   eigenaar: "Deel de eindstand werkt niet"). CssSyntaxTest let sindsdien op de haakjes. */
.sheet.share-sheet { z-index: 90; }
.share-sheet__body { display: grid; gap: 14px; padding-top: 18px; }
.share-sheet__preview { display: grid; place-items: center; min-height: 200px; }
.share-sheet__preview img { width: min(300px, 100%); border-radius: var(--radius-sm); box-shadow: var(--shadow); }

/* Mobiel (default): foto's op één rij, 3 gelijke kolommen; spellen-tags
   eronder gestapeld, want naast elkaar past de breedte niet. Vanaf tablet-
   breedte (zie media query onderaan) weer leden links, tags rechts. */

/* 18 px tussen de foto's en de lijn van de puntenlijst (sinds 28 okt 2026, daarvoor 24 px tot de balk). */
.team-card__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 4px 0 0;
}

.team-card__members {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    justify-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-card__empty {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.team-card__games {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* De regels van de puntenlijst (sinds 28 okt 2026, de eigenaar koos A uit vier varianten: "de punten eronder passen er
   ook niet bij en zijn uit formaat (veel te klein)"): regels over de hele breedte met een dunne lijn ertussen, de
   punten in een eigen kolom en de naam van de speler vet. Tot die dag kleine pilletjes van 0,78rem. */
.game-chip {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 2px;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--text-soft);
}

.game-chip:first-child { border-top: 0; }

/* Een regel die dit toestel net boekte, licht even op als het bord ernaartoe schuift (sinds 1 nov 2026, focusNewPoints()
   in app/board.js): een vlak in de themakleur binnen de kaart, dat in 2,4 s wegtrekt. De schaduw zonder vervaging
   verbreedt het vlak tot buiten de tekst, zonder dat de regel verschuift. */
.game-chip--new { border-radius: 8px; animation: chip-new 2.4s ease-out both; }
@keyframes chip-new {
    0%, 35% { background: color-mix(in srgb, var(--turquoise) 20%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--turquoise) 20%, transparent); }
    100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}

.game-chip__points {
    flex: none;
    min-width: 2.1em;
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.game-chip__points--plus  { color: var(--green); }
.game-chip__points--minus { color: var(--red); }

.game-chip__what { min-width: 0; overflow-wrap: anywhere; }

.game-chip__who { font-weight: 700; color: var(--text); }

/* De knop om de scène van een duel nog eens af te spelen (sinds 1 nov 2026, de eigenaar), alleen bij een duel met een
   actiefoto: de foto zelf in een rondje van 40 px met een rand in de themakleur en een klein ▶ in een donker rondje
   (de eigenaar koos B, de foto als knop, en B2: de regel krijgt 16 px boven en onder, zodat hij niet tegen de lijnen
   zit). */
.game-chip--replay { align-items: center; padding-block: 16px; }
.game-chip__replay {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--turquoise);
    border-radius: 50%;
    background: #000;
    color: #fff;
    cursor: pointer;
}
.game-chip__replay img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-chip__replay svg { position: relative; box-sizing: content-box; width: 12px; height: 12px; padding: 5px 4px 5px 6px; border-radius: 50%; background: rgb(0 0 0 / 55%); }

/* De tags staan in een puntenlijst (sinds 23 okt 2026, de eigenaar: "Dit graag standaard ingeklapt maken"), sinds 26 okt
   2026 open tot hij vijf regels heeft. Sinds 28 okt 2026 een rij onderaan de kaart, zoals de rijen bovenaan het
   Dashboard (de eigenaar koos A uit vier varianten: "De positie zit niet lekker, de grootte ervan is niet lekker. Het
   past gewoon niet lekker in het design"): een lijn erboven, het lijst-icoon in de themakleur, "Puntenlijst", rechts
   het aantal en een pijltje. Ook breed onder de foto's, over de hele breedte. Van 26 tot 28 okt een balk met een rand in
   de themakleur en het aantal in een gevuld bolletje, daarvoor een klein grijs pilletje. */
.team-card__log { width: 100%; min-width: 0; border-top: 1px solid var(--line); }

/* Met de knop geen lijn erboven: het vlak scheidt hem al van de foto's. */
.team-card__log:not(.team-card__log--short) { margin-top: 6px; border-top: 0; }

.team-card__log-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 16px 0 12px;
    border-radius: 12px;
    /* Een licht vlak dat er net uitsteekt (sinds 29 okt 2026, de eigenaar koos B uit drie varianten: "De kleur
       hetzelfde als tijdens selecteren, heel subtiel"). Plat, met als tikkie een haarlijn licht bovenaan en donker
       onderaan, zonder vervaging (dezelfde dag, de eigenaar: "De app is voornamelijk flat design, dus niet te veel 3D
       erin. Een tikkie kan"; eerst een zachte schaduw van 6 px). Het icoon en het pijltje staan van de rand af. */
    background: color-mix(in srgb, var(--text) 4%, transparent);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 1px 0 rgb(0 0 0 / 30%);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.3s ease-in-out;
}

.team-card__log-toggle::-webkit-details-marker { display: none; }

@media (hover: hover) {
    .team-card__log-toggle:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
}

.team-card__log-toggle:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; }

.team-card__log-icon { display: grid; place-items: center; width: 28px; color: var(--turquoise); }

.team-card__log-icon svg { display: block; }

.team-card__log-count {
    margin-left: auto;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.team-card__log-chevron {
    flex: none;
    width: 6px;
    height: 6px;
    margin: -3px 4px 0 1px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--text-dim);
    transform: rotate(45deg);
    transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
}

.team-card__log[open]:not(.is-closing) .team-card__log-chevron { margin-top: 3px; transform: rotate(225deg); }

.team-card__log > .team-card__games { padding-top: 0; }
/* Met de knop staat de lijst binnen de knop: de punten onder het icoon, het eind van de regels onder het pijltje
   (sinds 29 okt 2026, de eigenaar: "de rode lijn is het startpunt van alle content in deze sectie"). */
.team-card__log:not(.team-card__log--short) > .team-card__games { padding: 0 19px 0 15px; }
.team-card__log:not(.team-card__log--short) .game-chip { padding-inline: 0; }

/* Onder de vijf regels geen knop (sinds 26 okt 2026, de eigenaar: "de knop 'puntenlijst' moet pas komen zodra er
   vijf of meer items zijn"): dan staat de lijst gewoon open (BoardView::LOG_OPEN_BELOW). */
.team-card__log--short > .team-card__log-toggle { display: none; }
.team-card__log--short > .team-card__games { padding-top: 0; }

.member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: auto;
    min-width: 0;
}

.member__avatar {
    /* Default fotomaat = die van nummer twee; bij gelijkstand krijgt iedereen
       deze. Grote/kleine maat alleen bij een echte koploper/hekkensluiter. */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    /* Plaatsvervanger zonder foto: volgt het palet (op een licht palet geen donkere bol). */
    background: linear-gradient(150deg, var(--surface-high), color-mix(in srgb, var(--surface-high), var(--text) 12%));
    border: 2px solid var(--line);
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-soft);
}

.member__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.member__name {
    max-width: 76px;
    font-size: 0.75rem;
    line-height: 1.15;
    color: var(--text-soft);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* De open uitdagingen van een speler (sinds 8 okt 2026): klein onder de naam, zodat
   iedereen ziet wie er nog mag. Alleen binnen het scorevenster (BoardView, app/board.js). */
.member__duels { font-size: 0.72rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.02em; color: var(--accent-2, var(--turquoise)); white-space: nowrap; }

/* Podium: nummer 1 het grootst, daarna 2 en 3. */

.team-card--1 {
    padding: 20px 18px;
    border-color: var(--turquoise-deep);
    /* Geen eigen achtergrond: de koploper gebruikt dezelfde gradiënt met diagonale glans als de
       andere kaarten (30 sep 2026); alleen rand en schaduw verschillen. */
    box-shadow: var(--card-shadow, var(--shadow)), 0 0 0 1px color-mix(in srgb, var(--turquoise) 26%, transparent) inset, 0 1px 0 rgb(255 255 255 / 22%) inset;
}

.team-card--1 .team-card__name   { font-size: 1.3rem; }
.team-card--1 .team-card__score  { font-size: 2.1rem; color: var(--turquoise); }
.team-card--1 .team-card__rank   { color: var(--turquoise); font-size: 1.3rem; }
/* Echte koploper: grotere foto's, responsief zodat er altijd 3 naast elkaar
   passen (kaart-binnenbreedte 100vw - 60px, min twee gaps van 12px, / 3). */
.team-card--big .member__avatar {
    width: min(109px, calc((100vw - 84px) / 3));
    height: min(109px, calc((100vw - 84px) / 3));
}

.team-card--2 { border-color: #3a545a; }
.team-card--2 .team-card__rank  { color: var(--silver); }
.team-card--2 .team-card__score { font-size: 1.7rem; }

.team-card--3 { border-color: var(--copper-deep); }
/* Brons iets naar de tekstkleur: puur brons haalde op de donkere paletten 3,8 tot 4,2:1 (WCAG 2.2 AA, 8 nov 2026). */
.team-card--3 .team-card__rank  { color: color-mix(in srgb, var(--bronze), var(--text) 30%); }
.team-card--3 .team-card__score { font-size: 1.6rem; }
.team-card--small .member__avatar { width: 54px; height: 54px; }

/* De kleine foto's van de hekkensluiter mogen dichter op elkaar. */
.team-card--small .team-card__members { gap: 6px; }

/* Het label van de koploper ("30 uur aan kop"): sinds 20 okt 2026 in de tweede themakleur (de
   eigenaar: keuze B uit drie; daarvoor vast goud, dat niet meekleurde met het thema), als het
   pilletje bovenaan ("De 12e editie"): een rand en een lichte tint, de tekst iets naar de
   tekstkleur, zodat hij op een licht en een donker palet leesbaar blijft. */
.crown {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent-2), var(--text) 35%);
    background: color-mix(in srgb, var(--accent-2), transparent 80%);
    box-shadow: inset 0 0 0 1px var(--accent-2);
}

/* Sterren bij een uitlopende koploper (voorsprong op nummer 2), goud, want het is een prijs en geen thema-accent.
   Sinds 29 okt 2026 naast het label "aan kop", 10 px ervoor (de gap van .team-card__crown-row; de eigenaar koos B uit
   vier: "het wordt te druk met de sterren"). Daarvoor stonden ze naast de score, op 1,24rem. */
.score-stars {
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    color: var(--sulfur);
    text-shadow: 0 0 6px rgb(224 184 76 / 45%);
}

/* De hekkensluiter: in de andere themakleur, het accent, in dezelfde stijl (sinds 20 okt 2026, de
   eigenaar; daarvoor vast gedempt rood/bruin). */
.crown--loser {
    color: color-mix(in srgb, var(--turquoise), var(--text) 35%);
    background: color-mix(in srgb, var(--turquoise), transparent 80%);
    box-shadow: inset 0 0 0 1px var(--turquoise);
}

/* ---------- Historie ---------- */

.history__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* De volledige lijst onder het bord: alles staat erin, maar hij scrollt in
   zijn eigen vak zodat de pagina niet ellenlang wordt. */
/* ---------- Uitdagen in de app (app/call.js, sinds 8 okt 2026) ----------
   Sinds 12 okt 2026 (keuze C van de eigenaar): de knop "Uitdagen" in de kop van de
   lade Mini Duels; bovenin "Wie mag wie" hoeveel er open zijn, zelf een duel kiezen en
   wie je bent; op het bord, zonder rand, alleen wat er speelt (de open aankondigingen,
   onder Mini Duels; het duel-uur staat sinds 15 okt 2026 bovenaan) en de eretitels in de
   maak (een eigen kopje). Het duelrad en "Wie ben jij?" zijn sheets. Niet op de tv (daar
   geen vinger); de banners en het duel-uur wel. */
.duel-call,
.duel-titles { margin: 0 0 22px; }
/* "Willekeurig uitdagen" bovenaan het tabje Poule, onder de tabjes (sinds 20 okt 2026, de
   eigenaar: "onder het menu en boven de tekst", "alleen bij tab Poule", en "denk aan de marge
   onder en boven"; van 17 tot 20 okt boven de tabjes, van 12 tot 17 okt in de kop van de lade).
   Zelf geen marge: erboven de ruimte onder de tabjes (26 px), eronder die boven het kopje "Nog
   open duels per team" (28 px), dus even ver van allebei. */
.duel-go { margin: 0; }
/* Zonder de knop (buiten het scorevenster, of alles is gespeeld) begint het kopje bovenaan, zoals in de andere panelen. */
.duel-go[hidden] + .challenges-public__label { margin-top: 0; }
/* Een volle knop in het accent met het dobbelsteenicoon (sinds 6 nov 2026, variant B van de eigenaar; van 17 okt tot
   6 nov een open knop met rand, want "een volle knop in het accent viel te veel op"). */
.duel-go .btn { align-items: center; justify-content: center; gap: 10px; min-height: 52px; font-weight: 800; }
.duel-go .btn .ic { width: 20px; height: 20px; margin: 0; }
/* Het duel-uur (sinds 15 okt 2026, keuze A van de eigenaar uit drie): een vuurbalk
   bovenaan het bord en op de tv, met een gloed van binnenuit, "×2" groot, de tijd die
   aftelt en onderaan een balk die leegloopt. Sinds 20 okt 2026 in de themakleuren (de
   eigenaar: "graag meer in thema kleuren"; weer keuze A uit drie, de accenttint): een zachte
   tint van het accent op het vlak, een rand en gloed in het accent, "×2" en de balk van het
   accent naar de tweede themakleur, de tekst in de tekstkleuren. Tot dan vaste kleuren, een
   donkere balk met goud, die op een licht palet vloekte. Sinds 22 okt 2026 in de kleuren van het
   Ei (de eigenaar: "meer de kleuren van het ei"): rand, vlak en gloed in de tweede themakleur zoals
   .egg, de gloed van binnenuit ook; het kopje blijft in het accent, zoals de titel van het Ei.
   Daarvoor een strookje onder Mini Duels ("nog 60 min"). Sinds 27 okt 2026 is de gloed van
   binnenuit (links) in elk thema die van het palet Bos, alsof het vlammetje hem geeft (de eigenaar:
   "Ik wil graag dat het een oranje gloed wordt, alsof het lijkt dat het de gloed is van het
   vlammetje", en "graag de gloed van bos overnemen bij de rest van de thema's"): het goud van Bos
   (zijn tweede themakleur, oklch(0.82 0.14 70)) met dezelfde dekking. Het vlak en de rand blijven in
   de tweede themakleur. Sinds dezelfde dag geen gloed meer rondom, en dus ook geen ademende gloed (de
   eigenaar: "graag de glow om deze borders uitzetten of minimaliseren. Het wordt teveel", en "Graag geen
   gloed buiten de cards"). */
.duel-hour {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    /* Onderin ruimte voor de lont en de tijd erboven (sinds 27 okt 2026). */
    padding: 14px 16px 56px;
    border: 1px solid var(--accent-2);
    border-radius: var(--radius);
    background:
        radial-gradient(90% 160% at 0% 50%, color-mix(in srgb, oklch(0.82 0.14 70), transparent 76%) 0%, transparent 62%),
        linear-gradient(135deg, color-mix(in srgb, var(--accent-2), transparent 84%), color-mix(in srgb, var(--accent-2), transparent 95%));
}
/* De gloed achter het vlammetje is in elk thema geel naar oranje, de kleuren van het vuur zelf (sinds 27 okt 2026, de
   eigenaar: "Ik vind een blauwe glow niet goed passen bij de vlam", en "dat voor alle thema's"), net als de gloed links
   in de kaart (zie .duel-hour). Tot die dag ook in de tweede themakleur, en dus bij een blauw palet blauw. */
.duel-hour__flame { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; font-size: 1.65rem; background: radial-gradient(circle, rgb(255 204 77 / 55%) 0%, rgb(255 138 31 / 28%) 42%, transparent 70%); }
.duel-hour__text { display: grid; gap: 2px; min-width: 0; }
.duel-hour__kicker { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--turquoise); }
.duel-hour__title { font-size: 1rem; font-weight: 800; color: var(--text); }
.duel-hour__sub { font-size: 0.82rem; font-weight: 600; color: var(--text-soft); }
/* "×2" in één kleur, het accent (kleur 1), net als het kopje (sinds 27 okt 2026, de eigenaar: "De x2 in de duel uur
   card is nu tweekleurig. Graag 1 kleur. Denk kleur 1"). Tot die dag een verloop van het accent naar de tweede
   themakleur. */
.duel-hour__x2 {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--turquoise);
}
/* De lont (sinds 27 okt 2026, de eigenaar: "de aftelbalk van duel uur moet duidelijker, nu is het een heel
   onopvallend lijntje", en van de keuzepagina koos hij C, "maar misschien de lijn in 1 kleur ipv 2"): onderin een
   lont in de tweede themakleur, zoals de rand en de gloed van de kaart, die opbrandt naar links, met een vonk aan
   het eind en de tijd in een pilletje erboven, dat met de vonk meeloopt (app/call.js, tickDuelHour). De laatste
   vijf minuten rood, met een snellere vonk. Tot die dag een lijntje van 4 px aan de onderrand, van het accent
   naar de tweede themakleur, en de tijd klein in het kopje. */
.duel-hour__fuse { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.duel-hour__burn { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: inherit; background: var(--accent-2); transition: width 1s linear; }
.duel-hour__spark { position: absolute; top: 50%; left: 100%; width: 0; height: 0; transition: left 1s linear; }
.duel-hour__spark::before,
.duel-hour__spark::after { content: ""; position: absolute; border-radius: 50%; }
.duel-hour__spark::before { left: -9px; top: -9px; width: 18px; height: 18px; background: radial-gradient(circle, #fff 0%, #ffd27a 30%, var(--accent-2) 55%, transparent 72%); animation: duel-spark 0.35s ease-in-out infinite alternate; }
.duel-hour__spark::after { left: -16px; top: -16px; width: 32px; height: 32px; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2), transparent 55%), transparent 70%); animation: duel-spark 0.6s ease-in-out infinite alternate-reverse; }
@keyframes duel-spark { from { transform: scale(0.82); opacity: 0.85; } to { transform: scale(1.15); opacity: 1; } }
.duel-hour__time { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.82rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; transition: left 1s linear; }
.duel-hour.is-urgent .duel-hour__burn { background: var(--red); }
.duel-hour.is-urgent .duel-hour__spark::before { animation-duration: 0.18s; }
.duel-hour.is-urgent .duel-hour__time { border-color: var(--red); color: var(--red); }
/* Een oneindige animatie met de 0,01 ms van "minder beweging" zou flikkeren: dan staat de vonk stil. */
@media (prefers-reduced-motion: reduce) {
    .duel-hour__spark::before,
    .duel-hour__spark::after { animation: none; }
}
/* Hetzelfde raster als een formulier (20 px boven de knop; de hulpregel vlak onder
   het kopje), zodat de knop even ver van de tekst staat als "Ronde opslaan". */
.duel-hour-admin { display: grid; gap: 20px; margin-bottom: 18px; }
.duel-hour-admin .form__title + .hint { margin-top: -15px; }
/* Bij "Wie mag wie", onder de uitleg (sinds 19 okt 2026, de eigenaar: "overzichtelijker en
   professioneler"; daarvoor drie losse, gecentreerde regels erboven): één kaart met twee regels,
   elk links een rondje, in het midden de tekst en rechts één knop. */
.duel-status { display: grid; margin: 16px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-high); overflow: hidden; }
.duel-status__row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; }
.duel-status__row + .duel-status__row { border-top: 1px solid var(--line); }
.duel-status__face { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface); font-size: 0.82rem; font-weight: 800; color: var(--text-soft); }
.duel-status__face img { width: 100%; height: 100%; object-fit: cover; }
.duel-status__face--count { font-size: 0.98rem; color: var(--turquoise); background: color-mix(in srgb, var(--turquoise) 12%, var(--surface)); }
.duel-status__text { margin: 0; min-width: 0; font-size: 0.9rem; line-height: 1.3; color: var(--text); }
.duel-status__text strong { font-weight: 700; }
/* "Laatste dag!" achteraan op een eigen regel (de eigenaar, 29 okt 2026: niet ertussen). */
.duel-status__sub em { display: block; font-style: normal; font-weight: 800; color: var(--turquoise); }
.duel-status__sub { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--text-dim); }
.duel-status__action { padding: 7px 13px; border: 1px solid color-mix(in srgb, var(--turquoise) 55%, var(--line)); border-radius: 999px; background: transparent; color: var(--turquoise); font: inherit; font-size: 0.8rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.duel-status__action:hover { background: color-mix(in srgb, var(--turquoise) 10%, transparent); }
.link-button { padding: 0; border: 0; background: none; color: var(--turquoise); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.duel-call__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.duel-call__list:empty { display: none; }
.duel-call__item { display: grid; gap: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--turquoise) 35%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--turquoise) 7%, var(--surface-high)); animation: row-in 0.35s ease both; }
.duel-call__faces { flex: none; display: flex; align-items: center; gap: 4px; }
.duel-call__face { display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; background: var(--surface); font-size: 0.76rem; font-weight: 800; color: var(--text-soft); }
.duel-call__face img { width: 100%; height: 100%; object-fit: cover; }
.duel-call__vs { font-size: 0.8rem; }
.duel-call__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; font-size: 0.88rem; overflow-wrap: break-word; }
.duel-call__duel { font-size: 0.78rem; color: var(--text-soft); }
/* Eretitels in de maak (renderTitles). Sinds 19 okt 2026 keuze A van de eigenaar uit drie ("mag
   veel meer opvallen en professioneel"): in de taal van de terugblik, waar ze straks worden
   uitgereikt. Het gouden lint tussen twee gouden lijnen, en per titel een kaart met een gouden
   zweem, een medaille om het icoon, de naam groot, de reden als goudkleurig chipje en de foto's
   met een gouden rand. Goud als tekst (--gold-ink) is gemengd met de tekstkleur: donkerder op
   een licht palet, lichter op een donker, en zo overal leesbaar. Afgewezen: B, een prijzenkast
   met een badge-kaart per titel (de meeste ruimte), en C, een donker erebord in vaste kleuren
   (het meest opvallend, maar op een licht palet een zwaar blok naast de vuurbalk van het duel-uur). */
.duel-titles { --gold-ink: color-mix(in srgb, var(--sulfur) 62%, var(--text)); }
/* Meer ruimte boven en onder het lint, en niet overal even veel (sinds 26 okt 2026, de eigenaar: "aan beide
   kanten wat meer ruimte, misschien niet bij beide hetzelfde"): 36 px erboven, 12 eronder en 16 onder de
   zin (daarvoor 22, 6 en 12). */
.duel-titles__head { display: flex; align-items: center; gap: 12px; margin: 36px 0 12px; }
.duel-titles__head::before,
.duel-titles__head::after { content: ""; flex: 1; height: 2px; border-radius: 1px; background: linear-gradient(to right, transparent, var(--sulfur)); }
.duel-titles__head::after { background: linear-gradient(to left, transparent, var(--sulfur)); }
/* Groter sinds 29 okt 2026 (de eigenaar, bij "Eretitels in de maak": "Groter"; tot dan 0,78rem). */
.duel-titles__ribbon { flex: none; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 18px; border-radius: 999px; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.duel-titles__sub { margin: 0 0 16px; text-align: center; font-size: 0.82rem; color: var(--text-soft); }
/* Sinds 20 okt 2026 een eigen tabblad, dus nooit leeg: een zin zolang er geen titels zijn. Na de
   uitreiking de uitgereikte titels onder "Eretitels" (sinds 27 okt 2026). Van 20 tot 27 okt stond er dan
   alleen een verwijzing naar de terugblik, zonder kop. */
.duel-titles__empty { margin: 4px 0 0; text-align: center; }
.duel-call__titles-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.duel-call__title-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--sulfur) 45%, var(--line)); border-radius: var(--radius-sm); background: linear-gradient(180deg, color-mix(in srgb, var(--sulfur) 14%, var(--surface-high)), var(--surface-high)); }
.duel-call__title-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 1.35rem; line-height: 1; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--sulfur) 28%, var(--surface)), var(--surface) 72%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sulfur) 80%, transparent), 0 4px 12px color-mix(in srgb, var(--sulfur) 22%, transparent); }
.duel-call__title-text { min-width: 0; display: grid; gap: 2px; }
.duel-call__title-name { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
.duel-call__title-who { font-size: 1rem; font-weight: 800; line-height: 1.25; color: var(--text); overflow-wrap: break-word; }
/* De uitleg als gewone tekst in de zachte tekstkleur, zoals in de eindstand (sinds 27 okt 2026, de eigenaar: "niet zo
   mooi met die achtergrond van de tekst. Graag weghalen die achtergrondkleur"): het kopje in de kleur van de titel, de
   naam groot, de uitleg rustig eronder. Tot die dag een pil met een zweem van de kleur, die bij twee regels een blok werd. */
.duel-call__title-detail { margin-top: 2px; font-size: 0.85rem; font-weight: 600; line-height: 1.35; color: var(--text-soft); }
.duel-call__title-faces { display: flex; padding-left: 10px; }
.duel-call__title-faces .duel-call__face { width: 32px; height: 32px; margin-left: -10px; border: 2px solid var(--sulfur); box-shadow: 0 2px 6px rgb(0 0 0 / 25%); }
/* Op een smalle telefoon de foto's onder de tekst, en de medaille bovenaan: ernaast liep de
   reden daar over drie regels. */
@media (max-width: 380px) {
    .duel-call__title-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
    .duel-call__title-icon { grid-row: span 2; align-self: start; width: 40px; height: 40px; font-size: 1.2rem; }
    .duel-call__title-faces { grid-column: 2; }
}

/* Wie ben jij, en wie daag je uit: per team de spelers als grote ronde foto's met een ring in de
   teamkleur, alles in het midden, en jij met een vinkje (sinds 24 okt 2026, keuze C van de eigenaar:
   "professioneler", zoals "Wie kijkt er?" bij een streamingdienst). De ring laat een randje in de
   achtergrond van het venster vrij. Daarvoor tegels met een rand en de gekozen speler met een
   gekleurde rand. Afgewezen: per team een kaart met een streep (A) en een lijst zoals contacten (B). */
.call-who { display: grid; gap: 18px; }
/* Ruimte tussen de uitleg ("Zo weet het spel wie er uitdaagt.") en het eerste team (de eigenaar). */
.hint + .call-who { margin-top: 20px; }
.call-who__team { text-align: center; }
.call-who__name { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); }
.call-who__name .team-swatch { width: 10px; height: 10px; border-radius: 50%; }
.call-who__players { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; }
.call-who__player { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; width: 90px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.call-who__player:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 4px; }
.call-who__label { max-width: 100%; overflow-wrap: anywhere; line-height: 1.2; }
.call-who__avatar { display: grid; place-items: center; width: 74px; height: 74px; overflow: hidden; border-radius: 50%; background: var(--surface); font-weight: 800; color: var(--text-soft); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--team-accent, var(--line)); transition: transform 0.2s ease-in-out; }
.call-who__avatar img { width: 100%; height: 100%; object-fit: cover; }
.call-who__player:hover .call-who__avatar { transform: scale(1.05); }
.call-who__player.is-current { color: var(--turquoise); }
.call-who__player.is-current .call-who__avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--turquoise), 0 8px 22px color-mix(in srgb, var(--turquoise) 45%, transparent); }
.call-who__player.is-current::after { content: "✓"; position: absolute; top: -2px; left: calc(50% + 20px); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--turquoise); color: var(--on-accent); font-size: 0.75rem; font-weight: 900; box-shadow: 0 0 0 3px var(--bg); }

/* Het duelrad: de namen lopen langs en vertragen tot de tegenstander (een sprongetje),
   dan schuift het duel erin. Bij minder beweging meteen het eind. */
/* De uitdaag-schermen (Wie ben jij?, het duelrad, wie daag je uit) hebben geen tabsbalk
   tegen de kop, dus bovenlucht zoals de inlog-sheet; anders plakte de eerste regel
   ("... daagt uit") tegen de lijn (10 okt 2026, de eigenaar). */
.call-sheet .sheet__body { padding-top: 18px; }
/* "Wie ben jij?" en "Wie daag je uit?": de titel in het midden (sinds 27 okt 2026, de eigenaar), boven de teams
   die ook in het midden staan. Links even veel ruimte als de sluitknop rechts inneemt (40 px plus de 12 px
   ertussen), zodat hij in het midden van het venster staat. */
.call-sheet--people .sheet__title { flex: 1; padding-left: 52px; text-align: center; }
.call-sheet--people .sheet__body > .hint { text-align: center; }
.call-wheel { display: grid; gap: 14px; }
.call-wheel__me { margin: 0; font-size: 0.9rem; color: var(--text-soft); text-align: center; }
.call-wheel__reel { display: grid; place-items: center; min-height: 168px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-high); }
.call-wheel__pick { display: grid; justify-items: center; gap: 6px; }
.call-wheel__pick.is-landed { animation: call-land 0.45s cubic-bezier(.2, 1.4, .4, 1) both; }
.call-wheel__avatar { display: grid; place-items: center; width: 84px; height: 84px; overflow: hidden; border: 3px solid var(--turquoise); border-radius: 50%; background: var(--surface); font-size: 1.6rem; font-weight: 800; color: var(--text-soft); }
.call-wheel__avatar img { width: 100%; height: 100%; object-fit: cover; }
.call-wheel__name { font-size: 1.3rem; font-weight: 800; }
.call-wheel__team { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-soft); }
.call-wheel__team .team-swatch { width: 9px; height: 9px; border-radius: 50%; }
.call-wheel__duel { display: grid; gap: 4px; align-content: center; padding: 14px; border: 1px solid color-mix(in srgb, var(--sulfur) 45%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--sulfur) 8%, var(--surface-high)); text-align: center; }
.call-wheel__category { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.call-wheel__title { font-size: 1.2rem; }
.call-wheel__desc { font-size: 0.86rem; color: var(--text-soft); }
/* Tijdens het draaien (sinds 17 okt 2026, de eigenaar): lijnen die zacht aan en uit gaan. Altijd
   dezelfde vijf (sinds 18 okt 2026: de regels van de echte tekst verraadden welk duel het werd),
   en het kaartje krijgt de hoogte van het langste duel in de poule (min-height uit call.js), met
   de inhoud in het midden. Bij het landen komt de tekst er zacht in (0,3 s). */
.call-wheel__skeleton { display: grid; gap: 10px; justify-items: center; }
.call-wheel__bar { display: block; width: 92%; height: 9px; border-radius: 4px; background: color-mix(in srgb, var(--text) 16%, transparent); animation: call-skeleton 1.2s ease-in-out infinite; }
.call-wheel__bar.is-category { width: 28%; height: 7px; }
.call-wheel__bar.is-title { width: 52%; height: 14px; margin-bottom: 4px; }
.call-wheel__bar.is-last { width: 56%; }
.call-wheel__duel.is-revealed > * { animation: call-reveal 0.3s ease-in-out; }
/* De knoppen onder het rad iets dichter bij elkaar (de eigenaar, 17 okt 2026): 10 px in plaats
   van 24 (de tussenruimte plus de marge van .btn--block + .btn--block). */
.call-wheel__actions { display: grid; gap: 10px; }
.call-wheel__actions > .btn--block + .btn--block { margin-top: 0; }
@keyframes call-land { from { transform: scale(0.8); } to { transform: scale(1); } }
@keyframes call-skeleton { 50% { opacity: 0.35; } }
@keyframes call-reveal { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .call-wheel__pick.is-landed,
    .call-wheel__bar,
    .call-wheel__duel.is-revealed > *,
    .duel-call__item { animation: none; }
}

/* Een klaarstaand duel (sinds 26 okt 2026, de eigenaar koos variant E): bovenaan de foto's met het
   zwaardje, de tekst ernaast en rechts een rond knopje met een i voor de uitleg (voor iedereen).
   Daaronder de knoppen in één rij van gelijke breedte: Duel begint, Score noteren (in de themakleur)
   en Intrekken. Tot die dag stonden de knoppen onder elkaar naast de tekst, en zette een scoreschrijver
   het duel klaar door de kaart aan te tikken ("Klaarzetten ›", sinds 9 okt 2026). */
.duel-call__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Het rondje 30 px met de i even groot als eerst (20 px), en 4 px naar de rechterbovenhoek van de kaart (sinds 28 okt
   2026, de eigenaar: "het rondje graag iets kleiner en de I graag hetzelfde houden. Het rondje moet een beetje
   rechtsboven in de card gepositioneerd worden"; daarvoor 40 px, op de rand van de binnenruimte). */
.duel-call__info { flex: none; align-self: flex-start; display: grid; place-items: center; width: 30px; height: 30px; margin: -4px -4px 0 0; padding: 0; border: 1px solid color-mix(in srgb, var(--turquoise) 50%, var(--line)); border-radius: 50%; background: color-mix(in srgb, var(--turquoise) 8%, transparent); color: var(--turquoise); cursor: pointer; }
.duel-call__info:hover { background: color-mix(in srgb, var(--turquoise) 16%, transparent); }
.duel-call__info:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
.duel-call__actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.duel-call__actions .btn { width: 100%; padding: 0 6px; font-size: 0.84rem; }
/* "Duel begint" en "Nu bezig" (sinds 10 okt 2026): het duel dat loopt met een gouden rand en
   label, zoals het duel-uur. */
.duel-call__start { border-color: color-mix(in srgb, var(--turquoise) 55%, var(--line)); color: var(--turquoise); }
/* De spelleiderkaart van een quizduel (sinds 2 nov 2026): een rij onder de knoppen, alleen voor wie scoort, en een
   venster met één vraag tegelijk en het antwoord pas na een tik. */
.duel-call__card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--turquoise) 55%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--turquoise) 6%, transparent); color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.duel-call__card-icon { grid-row: span 2; width: 22px; height: 22px; fill: none; stroke: var(--turquoise); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.duel-call__card-sub { font-size: 0.78rem; font-weight: 500; color: var(--text-soft); }
.duel-call__card:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
.card-sheet__kicker { margin: 0 0 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--turquoise); }
.card-sheet__question { margin: 0 0 18px; font-size: 1.3rem; font-weight: 700; line-height: 1.4; color: var(--text); }
.card-sheet__hint { margin: -4px 0 10px; font-size: 0.86rem; color: var(--text-soft); }
/* Een raster op de kaart (de Tempelsudoku): vier bij vier vakjes, de kwarten van twee bij twee met een dikkere lijn. */
.card-grid { display: inline-grid; grid-template-rows: repeat(4, auto); border: 2px solid var(--text); border-radius: 6px; overflow: hidden; vertical-align: top; }
.card-grid__row { display: grid; grid-template-columns: repeat(4, 2.4rem); }
.card-grid__cell { display: grid; place-items: center; height: 2.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.card-grid__cell:nth-child(2) { border-right: 2px solid var(--text); }
.card-grid__cell:nth-child(4) { border-right: 0; }
.card-grid__row:nth-child(2) .card-grid__cell { border-bottom: 2px solid var(--text); }
.card-grid__row:nth-child(4) .card-grid__cell { border-bottom: 0; }
.card-sheet__answer .card-grid { display: grid; width: max-content; margin-top: 6px; }
.card-grid__empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Beelden op de spelleiderkaart (sinds 5 nov 2026, app/card-visuals.js): wat de spelleider moet leggen, tekenen of
   nadoen, getekend. Speelkaarten, papier en vlaggen zijn licht zoals echt, de rest volgt het thema. */
.card-sheet__question svg, .card-sheet__answer svg { display: block; }
.card-visual__places { display: flex; gap: 5px; margin-top: 4px; }
.card-visual__places span { flex: 1; text-align: center; font-size: 0.76rem; font-weight: 700; color: var(--text-soft); }
.card-visual__label { display: block; margin: 6px 0 4px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.card-visual__note { display: block; margin-top: 8px; font-size: 0.92rem; font-weight: 600; color: var(--text-soft); }
.card-visual__stack { display: grid; gap: 6px; margin-top: 8px; }
.card-visual__or { font-size: 0.8rem; font-weight: 700; color: var(--text-soft); }
.card-visual__figure { display: grid; place-items: center; margin-bottom: 12px; padding: 14px; border-radius: 12px; background: var(--surface-high); }
.card-visual__figure--small { margin: 10px 0 0; padding: 10px; }
.card-visual__figure--small svg { max-height: 90px; }

/* De Kaartvolgorde: wit als een echte kaart, rood en zwart zoals op tafel. */
.playing-cards { display: flex; gap: 5px; margin-top: 10px; }
.playing-card { position: relative; flex: 1; aspect-ratio: 5 / 7; border: 1px solid #c9c9c9; border-radius: 6px; background: #fff; color: #1a1a1a; box-shadow: 0 1px 2px rgb(0 0 0 / 25%); }
.playing-card--red { color: #c8102e; }
.playing-card__rank { position: absolute; top: 3px; left: 5px; font-size: 0.95rem; font-weight: 800; line-height: 1; }
.playing-card__suit { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 8px; font-size: 1.5rem; line-height: 1; }

/* De Lucifers van Archimedes: houtjes met een rode kop. */
.matches { width: 100%; max-width: 300px; height: auto; margin: 6px auto 0; padding: 12px 14px; border-radius: 12px; background: #1d3327; box-shadow: inset 0 2px 8px rgb(0 0 0 / 40%); }
.card-sheet__answer .matches { max-width: 240px; margin: 0; padding: 8px 10px; }
.match__wood { stroke: #e6c48d; stroke-width: 4.2; stroke-linecap: round; }
.match__head { fill: #d23b2c; }

/* De Runenrij: zes stenen op een rij, de rune erin gekerfd. */
.rune-row { display: flex; gap: 6px; margin-top: 10px; }
.rune-row__stone { flex: 1; display: grid; place-items: center; padding: 8px 0; border-radius: 12px 12px 10px 10px; background: var(--surface-high); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 25%); }
.rune { width: 70%; height: auto; fill: none; stroke: var(--accent-2); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }

/* De Draaiende Plattegrond: het gewone teken en vier gedraaide. */
.glyph-row { display: flex; gap: 6px; margin-top: 10px; }
.glyph-row__item { flex: 1; display: grid; gap: 4px; text-align: center; }
.glyph-row__tile { display: grid; place-items: center; aspect-ratio: 1; border: 2px solid var(--line); border-radius: 10px; background: var(--surface-high); }
.glyph-row__item--plain .glyph-row__tile { border-style: dashed; background: none; }
.glyph-row__item--right .glyph-row__tile { border-color: var(--turquoise); }
.glyph-row__glyph { font-family: system-ui, -apple-system, sans-serif; font-size: 2.2rem; font-weight: 800; line-height: 1; }
.glyph-row__label { font-size: 0.76rem; font-weight: 700; color: var(--text-soft); }
.glyph-row__item--right .glyph-row__label { color: var(--turquoise); }

/* Het Teken in Één Haal: de figuur in één lijn, met de punten waar je begint. */
.line-figure { width: 100%; max-width: 150px; height: auto; max-height: 150px; }
.line-figure__line { fill: none; stroke: var(--text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.line-figure__start { fill: var(--turquoise); }

/* Douze Points: de vlag zoals hij wappert, met een dunne rand voor het wit. */
.flag { width: 150px; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px rgb(0 0 0 / 25%), 0 2px 6px rgb(0 0 0 / 30%); }
.flag--square { width: 100px; }

/* De Kleurenval: de woorden op wit papier, in hun inktkleur. */
.color-words { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: #fbf8f1; box-shadow: 0 1px 3px rgb(0 0 0 / 30%); }
.color-words__item { display: flex; align-items: baseline; gap: 8px; }
.color-words__nr { min-width: 1.1em; font-size: 0.76rem; font-weight: 700; color: #8a8578; }
.color-words__word { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.04em; }

/* De Navigator: de straten, de route en waar je uitkomt. */
.route { width: 100%; max-width: 230px; height: auto; margin-top: 10px; }
.route__streets line { stroke: var(--line); stroke-width: 1.4; }
.route__labels text { fill: var(--text-soft); font-size: 6.5px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.route__path { fill: none; stroke: var(--turquoise); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.route__start { fill: var(--text); }
.route__end { fill: var(--accent-2); }

.card-sheet__answer { min-height: 52px; margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-high); font-size: 1.1rem; font-weight: 700; color: var(--text); }
.card-sheet__answer:has(> .btn) { padding: 0; background: none; }
.card-sheet__answer-label { display: block; margin-bottom: 2px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); }
/* Het venster met de uitleg van dat duel: groter dan in de poule (0,8rem, gedimd), om voor te lezen. */
.duel-info__kicker { margin: 0 0 6px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--turquoise); }
.duel-info__who { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 0.95rem; color: var(--text-soft); }
.duel-info__text { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--text); }
/* Score noteren (sinds 26 okt 2026, de eigenaar koos C): het duel bovenaan, de twee foto's groot (de
   tegels van "Wie daag je uit?"), en na de keuze wat er gebeurt, in de labels van Beslechte duels. Wie
   niet gekozen is, wordt grijs. */
.score-sheet .sheet__body { display: grid; gap: 18px; align-content: start; }
.score-duel { display: grid; gap: 3px; }
.score-duel__kicker { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquoise); }
.score-duel__name { font-size: 1.4rem; font-weight: 800; line-height: 1.15; }
.score-duel__who { font-size: 0.92rem; color: var(--text-soft); }
.score-q { margin: 0; font-size: 0.98rem; font-weight: 800; }
.score-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; justify-items: center; gap: 4px; padding-top: 6px; }
.score-versus .call-who__player { width: min(100%, 140px); font-size: 1.02rem; transition: opacity 0.3s ease-in-out; }
.score-versus .call-who__avatar { width: 88px; height: 88px; }
.score-versus .call-who__player.is-current::after { left: calc(50% + 26px); }
.score-versus.has-pick .call-who__player:not(.is-current) { opacity: 0.45; }
.score-versus.has-pick .call-who__player:not(.is-current) img { filter: grayscale(1); }
.score-versus__vs { font-size: 1.3rem; }
.score-versus__team { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: var(--text-soft); }
.score-versus__team .team-swatch { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.score-summary { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.score-summary__title { font-size: 1.02rem; font-weight: 800; }
/* De twee labels even breed, zodat de tekst erachter op één lijn begint. */
.score-summary__line { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-soft); }
.score-summary__line .played-pts { width: 100%; height: 40px; }
.score-time { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 40px; padding: 0 8px; border-radius: 12px; background: var(--surface-high); color: var(--text); font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
/* Tijdens het duel-uur in de tweede themakleur, zoals de vuurbalk bovenaan het bord. */
.score-hour { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--accent-2); border-radius: 999px; background: color-mix(in srgb, var(--accent-2) 16%, transparent); color: var(--text); font-size: 0.78rem; font-weight: 800; }
/* Het verborgen bestandsveld achter de knop Foto op de kaart van een lopend duel (sinds 30 okt 2026). */
.duel-photo-input { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.duel-call__item--live { border-color: color-mix(in srgb, var(--sulfur) 70%, var(--line)); background: color-mix(in srgb, var(--sulfur) 12%, var(--surface-high)); }
.duel-call__live { font-size: 0.78rem; font-weight: 800; color: var(--sulfur); }

/* De laatste punten, alleen op de tv (sinds 6 nov 2026, de eigenaar koos "B, maar met bovenaan een grotere zoals C"):
   elke boeking een tegel met een brede streep in de teamkleur, de foto van de speler en de punten groot rechts; de
   nieuwste groter met "Net binnen". Geen scrollvak: op de tv knipperde de balk bij elke zoom van fitTv(), en
   trimHistory() in app/tv.js laat al weg wat niet naast de stand past. */
.history > .history__list { gap: 10px; }
.history__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px 12px 16px;
    border: 1px solid var(--line);
    border-left: 6px solid var(--team-accent, var(--line));
    border-radius: var(--radius-sm);
    background: var(--card-fill, var(--surface));
}
.history__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    overflow: hidden;
    border-radius: 50%;
    background: color-mix(in srgb, var(--team-accent, var(--line)) 22%, var(--surface-high));
    box-shadow: inset 0 0 0 2px var(--team-accent, var(--line));
    color: var(--text);
    font-weight: 800;
}
.history__avatar img { width: 100%; height: 100%; object-fit: cover; }
.history__body { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.history__who { font-size: 1.05rem; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* De teamkleur naar de tekstkleur gemengd: puur blauw en groen haalden als tekst 2,6 tot 4,2:1 (WCAG 2.2 AA, 8 nov 2026). */
.history__team { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--team-accent, var(--text-dim)), var(--text) 40%); }
.history__what { color: var(--text-dim); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history__points { flex: none; font-size: 1.8rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.history__points--plus  { color: var(--green); }
.history__points--minus { color: var(--red); }
.history__item--new { position: relative; padding: 34px 24px 20px 22px; border-color: color-mix(in srgb, var(--team-accent, var(--line)) 60%, var(--line)); border-left-color: var(--team-accent, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--team-accent, var(--line)) 16%, var(--card-fill, var(--surface))), var(--card-fill, var(--surface))); }
.history__item--new .history__avatar { width: 4rem; height: 4rem; font-size: 1.5rem; }
.history__item--new .history__who { font-size: 1.5rem; }
.history__item--new .history__points { font-size: 3rem; }
.history__kicker { position: absolute; left: 22px; top: 11px; display: flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.history__kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

.history__empty { color: var(--text-dim); font-size: 0.9rem; padding: 4px; }

/* Beslechte duels: een tijdlijn per dag (sinds 22 okt 2026, de eigenaar koos variant C). Per duel links de
   foto's (de winnaar voorop, wie verloor gedimd) met de tijd eronder, dan de zin met de winnaar voorop en
   het duel, en rechts de punten voor het team van de uitdager in een groen of rood label. Sinds 26 okt 2026
   (de eigenaar: "dit stuk is rommelig") staan de foto's boven de tijd, zodat de tekst de breedte krijgt,
   en zijn alle labels even groot: "duel-uur" staat bij het duel, niet meer als derde regel in het label. */
.played-list { margin: 0; padding: 0; list-style: none; }
.played-day {
    margin: 18px 0 4px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.played-day:first-child { margin-top: 0; }
.played-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 64px;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.played-item:last-child, .played-item:has(+ .played-day) { border-bottom: 0; }
/* De tijd in het midden onder de foto's (sinds 26 okt 2026, de eigenaar: "mooier om de tijd te centreren"). */
.played-when { display: grid; justify-items: center; gap: 4px; }
.played-time { font-size: 0.78rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.played-faces { display: flex; }
.played-face {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border: 2px solid var(--bg);
    border-radius: 50%;
    background: var(--surface);
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--text-soft);
}
.played-face + .played-face { margin-left: -9px; }
.played-face img { width: 100%; height: 100%; object-fit: cover; }
.played-face--lost { opacity: 0.6; filter: grayscale(1); }
.played-text { display: grid; gap: 1px; min-width: 0; font-size: 0.92rem; overflow-wrap: break-word; }
.played-duel { font-size: 0.78rem; color: var(--text-soft); }
/* Hield de uitgedaagde stand, dan de minuten voor zijn team (sinds 26 okt 2026, de eigenaar koos B). */
.played-gain { font-size: 0.78rem; font-weight: 700; color: var(--green); }
.played-pts {
    display: grid;
    place-content: center;
    justify-items: center;
    width: 64px;
    height: 48px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.1;
}
.played-pts small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; opacity: 0.85; }
.played-pts--plus { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.played-pts--minus { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }

/* ---------- Footer ---------- */

/* Onderaan het bord alleen nog een stille regel (sinds 20 okt 2026, de eigenaar; tot dan een grote
   knop "Adminpaneel openen" met een zin eronder, en het paneel staat nu als tandwiel in de
   tabbladen): een kort haarlijntje, voor wie nog niet is ingelogd de knop van het thema als link
   ("Kronieken bijschrijven", #adminOpen), en de voorwaarden en het privacybeleid. */
.page-footer {
    /* Onderaan geen veilige rand meer (sinds 20 okt 2026): die zit al in de ruimte voor de tabbalk
       (--bar-top), en telde zo op een iPhone dubbel. */
    padding: 28px 16px 24px;
    text-align: center;
}
.page-footer::before { content: ""; display: block; width: 48px; height: 1px; margin: 0 auto 16px; background: var(--line); }
.page-footer__action { display: inline-block; padding: 4px 6px; border: 0; background: none; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--text-soft); cursor: pointer; }
.page-footer__action:hover, .page-footer__action:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.page-footer .legal-links { margin: 4px 0 0; }

/* Voorwaarden en privacy, onderaan elke klantpagina (LegalLinks): stil en zonder onderstreping, die
   komt bij aanwijzen, met wat meer ruimte rond het puntje (sinds 20 okt 2026, de eigenaar: "op een
   iets mooiere manier"; tot dan onderstreept). */
.legal-links { margin: 18px 0 0; text-align: center; font-size: 0.78rem; letter-spacing: 0.01em; color: var(--text-dim); }
.legal-links a { color: var(--text-dim); text-decoration: none; }
.legal-links a:hover, .legal-links a:focus-visible { color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; }
.legal-links span[aria-hidden="true"] { margin: 0 5px; opacity: 0.7; }

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

.btn {
    /* Ook als <a> gebruikt, vandaar de flex-centrering en het uitzetten van
       de onderstreping: een linkknop hoort eruit te zien als elke knop. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-high);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: default; }

.btn--primary {
    border-color: transparent;
    /* Volgt het thema-accent (was vast koper); tekst in de leesbare tint van de editor. */
    /* --primary-end: de server zet hem lichter als de leesbare tekst op het donkere eind onder 4,5:1 zakt (Robijn). */
    background: linear-gradient(135deg, var(--turquoise), var(--primary-end, var(--turquoise-deep)));
    color: var(--on-accent);
}

.btn--ghost { background: transparent; color: var(--text-soft); }
.btn--danger { border-color: #6d3320; background: transparent; color: var(--red); }

.btn--block { display: flex; width: 100%; }

/* Gestapelde volle-breedte-knoppen plakken anders tegen elkaar. */
.btn--block + .btn--block { margin-top: 10px; }

/* De uitlogknop staat los onder het actieve tabblad. */
.sheet__body > .btn--block { margin-top: 14px; }

.btn--icon {
    min-height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

/* Knop met alleen een icoon (prullenbak): vierkant en gecentreerd. */
.btn--icon svg { display: block; margin: 0 auto; }
.btn--icon:has(> svg:only-child) { padding: 0; width: 40px; }

/* ---------- Sheets (login + admin) ---------- */

.sheet[hidden] {
    display: none;
}

/* Gestylde bevestiging in plaats van de kale browser-confirm(). Boven de
   sheets (z-index 50). */
.confirm {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgb(8 3 7 / 78%);
    backdrop-filter: blur(4px);
    animation: fade-in 0.3s ease-in-out both;
}

/* Sluiten: uitfaden, daarna zet assets/js/disclose.js hem op hidden. */
.confirm.is-closing { animation: fade-out 0.3s ease-in-out both; }

.confirm[hidden] { display: none; }

/* De vraag (sinds 22 okt 2026, de eigenaar: "dit is niet mooi"): de vraag als kop, de uitleg kleiner en
   zachter eronder, en de knoppen nooit over twee regels. Passen ze niet naast elkaar, dan komt bevestigen
   over de volle breedte bovenaan en annuleren eronder (wrap-reverse: in de html staat annuleren eerst). */
.confirm__panel {
    width: 100%;
    max-width: 380px;
    padding: 26px 22px 20px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.confirm__title {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text);
}

.confirm__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-soft);
}

/* Iets wat moet opvallen, vet in de themakleur (sinds 22 okt 2026: "maar één keer" bij het wisselen
   van speler, in de vraag en in de hint bij "Wie ben jij?"). */
.em-accent { font-weight: 800; color: var(--turquoise); }

/* Zonder vraag is de tekst zelf de boodschap: gewoon in de tekstkleur. */
.confirm__title[hidden] + .confirm__text {
    font-size: 1rem;
    color: var(--text);
}

.confirm__actions {
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 10px;
    margin-top: 22px;
}

.confirm__actions .btn {
    flex: 1 1 0;
    min-width: max-content;
    white-space: nowrap;
}

/* Elk venster in het midden, ook op een telefoon (sinds 26 okt 2026, de eigenaar: "alle pop-up's hebben aan
   de onderkant geen border. Kun je alle pop-up's centreren verticaal"): met een rand rondom en ruimte
   eromheen, binnen de veilige rand van een iPhone (de notch boven, de streep onderin). Tot die dag stond
   een venster op een telefoon onderaan vast, zonder rand en ronde hoeken onderaan. Vanaf 720 px stond het
   al in het midden. */
.sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, var(--safe-top)) 12px max(12px, var(--safe-bottom));
    background: rgb(8 3 7 / 72%);
    backdrop-filter: blur(4px);
    animation: fade-in 0.3s ease-in-out both;
}

/* Alles wat open- en dichtgaat doet dat in 0,3 s ease-in-out (zie
   docs/STYLEGUIDE.md). Bij sluiten krijgt de overlay .is-closing; na de
   animatie zet assets/js/disclose.js hem op hidden. */
.sheet.is-closing { animation: fade-out 0.3s ease-in-out both; }
.sheet.is-closing .sheet__panel { animation: sheet-down 0.3s ease-in-out both; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-down { to { transform: translateY(18px); opacity: 0; } }

.sheet__panel {
    width: min(560px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    /* De opslaanbalk onderaan het paneel blijft binnen de ronde hoeken. */
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--bg);
    box-shadow: var(--shadow);
    animation: sheet-up 0.3s ease-in-out both;
}

@keyframes sheet-up { from { transform: translateY(18px); opacity: 0; } }

/* Het paneel bijna schermhoog, met boven en onder nog wat van het bord. */
.sheet--full .sheet__panel { height: min(92dvh, 100%); }
/* Op een telefoon 5 px van de zijkant, met de rand rondom (sinds 26 okt 2026, de eigenaar: "ik zei net de
   border helemaal weg bij menu, maar nu zeg ik 5px"). Even daarvoor stond het zonder rand links en rechts, met
   12 px ruimte opzij. Vanaf 720 px staat het los in beeld, met 20 px eromheen. */
@media (max-width: 719px) {
    .sheet--full { padding-inline: 5px; }
}

.sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--line);
}

.sheet__title { font-size: 1.1rem; }

.sheet__close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-high);
    color: var(--text-soft);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.sheet__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Geen bovenpadding: de tabsbalk staat sticky vlak tegen de header. Onderin geen veilige rand meer
       (sinds 26 okt 2026): het venster staat in het midden, de overlay houdt die rand vrij. */
    padding: 0 18px 26px;
}

/* ---------- Formulieren ---------- */

/* De inlog-sheet heeft geen tabsbalk tegen de header, dus de body krijgt hier wel bovenlucht. */
#loginForm.sheet__body,
#forgotForm.sheet__body { padding-top: 18px; }

.form { display: grid; gap: 20px; }
/* .form zet display: grid en wint dan van het hidden-attribuut; zonder deze regel blijft een verborgen formulier zichtbaar. */
.form[hidden] { display: none; }

/* Teams-tab: naamveld met de weg-knop ernaast, en het "team erbij"-veld. */
.team-row { display: flex; gap: 8px; align-items: stretch; }
.team-row .field__input { flex: 1 1 auto; min-width: 0; }
.team-row .btn { flex: none; }
/* De vaste kleur van een team vóór het veld met de naam (sinds 26 okt 2026, TeamColor; de eigenaar:
   "bij het invullen van het team moet de kleur niet eens in het inputfield staan, maar ergens ervoor
   of erboven"). Bij elk team even breed, zodat de velden onder elkaar beginnen. */
.team-row__color { flex: none; display: inline-flex; align-items: center; gap: 8px; min-width: 104px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--team-accent) 12%, var(--surface)); font-size: 0.95rem; font-weight: 700; color: var(--text); }
.team-row__color .team-swatch { flex: none; width: 10px; height: 10px; border-radius: 50%; }
/* "Toevoegen" onder het veld van "Team erbij" (sinds 26 okt 2026: ernaast werd het veld te smal), dichter
   bij dat veld dan de 20 px tussen de velden van het formulier. */
.form .team-add { margin-top: -10px; }

/* Twee formulieren of blokken onder elkaar in een tabblad hebben lucht nodig. De poule onder "Welke categorieën doen mee?"
   ook (de eigenaar, 29 okt 2026: "evenveel ruimte als bij de rest tussen de blokjes"). */
.tabpanel .form + .form,
.tabpanel .form + div,
.tabpanel div + .form,
#challengeCategoriesBlock + div { margin-top: 44px; }
.form__title { margin-top: 12px; font-size: 0.95rem; color: var(--text-soft); }

/* Titel en uitleg eronder strak bij elkaar; de 20px-gap is voor de velden. */
.form .form__title + .hint { margin-top: -15px; }

/* Losse sectiekoppen in een tabblad (Gespeeld, Poule) plakten tegen het blok
   erboven aan. */
.tabpanel > .form__title { margin-top: 48px; margin-bottom: 5px; }
.tabpanel > .form__title:first-child { margin-top: 0; }

.field { display: grid; gap: 6px; }

.field__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.field__input {
    width: 100%;
    min-height: var(--tap);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 1rem; /* voorkomt inzoomen op iOS */
}

/* Dropdowns: eigen pijltje, want het native pijltje plakt tegen de rand. */
select.field__input,
.player-admin__team {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a7c5c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    padding-right: 34px;
}

.field__input:focus-visible {
    outline: 2px solid var(--turquoise);
    outline-offset: 1px;
}

textarea.field__input { resize: vertical; line-height: 1.5; }
/* Een getal (het aantal deelnemers in de brief): een smal veld, geen tekstvak. */
.field__input--number { max-width: 140px; }

/* Het getal in de introregel van de demo ("zestig per thema"): vet alleen viel
   in de zachte cursieve regel niet op; in de tweede themakleur wel (de eigenaar,
   14 okt 2026). */
.legend__lead-accent { color: var(--accent-2); font-style: normal; }

/* Bestandskiezer (app.js, enhanceFilePicker): het echte veld visueel weg, een
   knop in de stijl van het paneel met de gekozen bestanden erachter. De
   omringende label opent bij een tik de kiezer. */
.field:has(.file-pick__input) { position: relative; }
.file-pick__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.file-pick { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.file-pick__btn { flex: none; min-height: 40px; padding: 0 16px; font-size: 0.9rem; }
.file-pick__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; color: var(--text-dim); }
.file-pick.has-files .file-pick__name { color: var(--text); }
.file-pick__input:focus-visible + .file-pick .file-pick__btn { outline: 2px solid var(--turquoise); outline-offset: 2px; }
.file-pick__input:disabled + .file-pick { opacity: 0.55; cursor: default; }

/* "Klaar voor vertrek" op het tabblad Start: voortgang en per stap een knop. */
.checklist-progress { display: grid; gap: 8px; margin-top: -8px; }
/* Klaar voor vertrek in twee lijsten (sinds 30 okt 2026, de eigenaar koos B uit twee varianten): verplicht met de
   voortgang, ruimte, optioneel, en delen met de groep als knop onderaan. */
.checklist-groups { display: grid; gap: 32px; }
.checklist-group { display: grid; gap: 10px; }
.checklist-group__head { display: flex; align-items: center; gap: 12px; margin: 0; }
.checklist-group__label { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--turquoise) 18%, transparent); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquoise); }
.checklist-group--optional .checklist-group__label { background: var(--surface-high); color: var(--text-soft); }
.checklist-group__count { font-size: 0.82rem; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* Optioneel: een gestippelde rand zonder vlak, zo zie je in één oogopslag wat mag en wat moet (de eigenaar koos B). */
.checklist-group--optional .checklist__item { border-style: dashed; background: transparent; }
.checklist-finish { display: grid; gap: 8px; padding-top: 4px; }
.checklist-finish__detail { margin: 0; text-align: center; }
.checklist-progress__bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-high); overflow: hidden; }
.checklist-progress__bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--turquoise-deep), var(--turquoise)); transition: width 0.3s ease-in-out; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checklist__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.checklist__item.is-done { background: transparent; }
.checklist__mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--line); border-radius: 50%; font-size: 0.8rem; font-weight: 800; color: var(--on-accent); }
.checklist__item.is-done .checklist__mark { border-color: transparent; background: var(--turquoise); }
.checklist__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.checklist__title { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.checklist__item.is-done .checklist__title { color: var(--text-soft); }
.checklist__title em { margin-left: 6px; font-size: 0.76rem; font-style: normal; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.checklist__detail { font-size: 0.82rem; line-height: 1.4; color: var(--text-dim); }
.checklist__go { flex: none; }
/* Een stille tweede knop onder de eerste, zolang de stap open staat ("Zo laten" bij "Welke duels meedoen", sinds 28
   okt 2026): zoals "Later" bij de vraag om het spel op het beginscherm te zetten. */
.checklist__actions { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.checklist__also { padding: 4px 8px; border: 0; background: none; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--text-soft); cursor: pointer; }
.checklist__also:hover, .checklist__also:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* Springen naar een blok (checklist): niet onder de vaste tabbalken laten vallen. */
.sheet__body [id] { scroll-margin-top: 120px; }

/* Hulpregel onderaan het paneel (.hint zet margin op 0, vandaar de specifiekere selector). */
.sheet__body > .panel-help { margin-top: 36px; text-align: center; }

.hint { margin: 0; font-size: 0.85rem; color: var(--text-dim); }

/* Kleuren-editor in het paneel: presets, color-pickers en contrast-badges. */
.colorsets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.colorset { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-soft); font-size: 0.82rem; cursor: pointer; }
.colorset:hover { border-color: var(--turquoise); color: var(--text); }
.colorset.is-active { border-color: var(--turquoise); color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--turquoise), transparent 70%); }
.colorset__dots { display: inline-flex; }
.colorset__dots i { width: 15px; height: 15px; border-radius: 50%; margin-left: -5px; border: 1.5px solid var(--surface); }
.colorset__dots i:first-child { margin-left: 0; }
.colorgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0 0 16px; }
@media (max-width: 440px) { .colorgrid { grid-template-columns: 1fr; } }
.colorfield { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-soft); }
.colorfield__in { flex: none; width: 42px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.colorfield__swatch { box-shadow: inset 0 0 0 2px rgb(255 255 255 / 12%); }
.colorfield__swatch.is-open { outline: 2px solid var(--turquoise); outline-offset: 2px; }
/* Eigen kleurkiezer: hue/verzadiging/helderheid met hexveld; sluit bij een klik ernaast of Escape. */
.colorpop { margin: 0 0 16px; padding: 14px; border: 1px solid var(--turquoise); border-radius: var(--radius-sm); background: var(--surface-high); }
.colorpop__title { margin: 0 0 10px; font-size: 0.85rem; font-weight: 700; color: var(--text); }
.colorpop__row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.colorpop__preview { flex: none; width: 42px; height: 34px; border-radius: 8px; border: 1px solid var(--line); }
.colorpop__hex { flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: lowercase; }
.colorpop__slider { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.82rem; color: var(--text-soft); }
.colorpop__slider input[type="range"] { width: 100%; accent-color: var(--turquoise); }
.colorpop .btn { margin-top: 6px; }
/* Eigen kleuren: eigen kader met titel, los van de paletten erboven. */
.colors-custom { margin: 18px 0 14px; padding: 14px 14px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgb(0 0 0 / 14%); }
.colors-custom__title { margin: 0 0 4px; font-size: 0.95rem; font-weight: 700; color: var(--text); }
.colors-custom .hint { margin: 0 0 14px; }
.contrast { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.contrast li { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; color: var(--text-soft); }
.contrast li b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; flex: none; }
.contrast li span { margin-left: auto; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.contrast li span em { font-style: normal; font-weight: 700; margin-right: 6px; }
.contrast .is-ok span em { color: var(--green); }
.contrast .is-meh span em { color: var(--sulfur); }
.contrast .is-bad span em { color: var(--red); }
.contrast__title { margin-top: 18px; }
.contrast .is-ok b { background: rgb(70 192 138 / 22%); color: var(--green); }
.contrast .is-meh b { background: rgb(224 184 76 / 22%); color: var(--sulfur); }
.contrast .is-bad b { background: rgb(239 100 89 / 22%); color: var(--red); }
.colors-unsaved { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgb(224 184 76 / 12%); border: 1px solid rgb(224 184 76 / 35%); color: var(--sulfur); font-size: 0.85rem; line-height: 1.45; }
.colors-unsaved b { color: var(--text); }
/* Eén opslaanknop voor het hele paneel (app.js, SAVE_STEPS): een balk onderaan
   de sheet, buiten het scrollende deel, die verschijnt zodra er iets gewijzigd is. */
.savebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 18px;
    border-top: 1px solid color-mix(in srgb, var(--sulfur) 45%, var(--line));
    background: color-mix(in srgb, var(--sulfur) 8%, var(--surface));
}
.savebar__text { flex: 1 1 200px; margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--text); }
.savebar__actions { display: flex; gap: 10px; margin-left: auto; }
.savebar__actions .btn { min-height: 44px; }

/* Levenscyclus: buiten het scorevenster een uitleg i.p.v. de score-knoppen. */
.lifecycle-notice {
    margin: 0 0 22px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--turquoise) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--turquoise) 35%, transparent);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.5;
}
#adminSheet[data-scoring="closed"] .score-only,
#adminSheet[data-scoring="closed"] [data-panel="egg"] > :not(.lifecycle-notice) { display: none !important; }
.period-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Zie landing.php: WebKit rekent date-velden als content-box, dus telt de
   padding bij width: 100% op. -webkit-fill-available voorkomt dat. */
.field__input[type="date"] { width: 100%; width: -webkit-fill-available; }
@media (max-width: 420px) { .period-fields { grid-template-columns: 1fr; } }

/* De introregel bovenaan een tabblad krijgt afstand tot wat eronder komt. */
.tabpanel > .hint:first-child { margin-bottom: 22px; }

.alert {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgb(239 91 107 / 14%);
    /* Volgt het palet: op donker een lichte roze, op een licht palet donkerrood
       (een vaste #ffc6cc was daar onleesbaar). */
    color: color-mix(in srgb, var(--red), var(--text) 45%);
    font-size: 0.88rem;
}

/* ---------- Tabs ---------- */

.tabs {
    display: flex;
    gap: 4px;
    /* Sticky tegen de bovenrand van het paneel. */
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -18px 16px;
    padding: 10px 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    /* Safari op de iPhone tekent deze vastgeplakte balk soms net iets lager dan waar het scrollvak
       begint (het paneel begint op 8dvh, vaak midden in een pixel), en door dat randje schoof de
       inhoud zichtbaar langs (de eigenaar, 26 okt 2026). Een rand in de kleur van de balk erboven
       dekt het af. Sluit de balk precies aan, dan knipt het scrollvak die rand weg. */
    box-shadow: 0 -4px 0 var(--surface);
}

.tabs::-webkit-scrollbar { display: none; }

.tabs__tab {
    flex: none;
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* Actieve tab in het thema-accent (was vast koper, en dat viel buiten de eigen kleuren van een klant). */
.tabs__tab.is-active { background: var(--turquoise); color: var(--on-accent); }

.tabpanel { display: none; }
.tabpanel.is-active { display: block; }

/* ---------- Mini Duels: publieke tabs (Uitleg / Poule / Gespeelde duels) ---------- */

.duel-tabs {
    display: flex;
    gap: 4px;
    margin: 6px 0 26px;
    padding: 3px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.duel-tabs__tab {
    flex: 1 1 auto;
    /* Geen max-content: vier tabs pasten niet op een smal scherm en een lang label
       als 'Afgehandelde duels' werd afgekapt. Nu delen ze de breedte en mag de tekst krimpen. */
    min-width: 0;
    white-space: nowrap;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.duel-tabs__tab:hover { color: var(--text-soft); }

.duel-tabs__tab.is-active {
    background: var(--turquoise);
    color: var(--on-accent);
}

/* De tabjes van Mini Duels op het bord stil (sinds 20 okt 2026, de eigenaar: het tabblad Duels was
   te druk, keuze B uit drie): tekst met een streep onder het actieve tabje, geen pil in een kader,
   zodat ze niet lijken op de tabbladen erboven. De sub-tabs van Beheer in het paneel houden de pil. */
.duels-panel .duel-tabs { gap: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.duels-panel .duel-tabs__tab { min-height: 42px; border-radius: 0; background: none; }
.duels-panel .duel-tabs__tab.is-active { background: none; color: var(--turquoise); box-shadow: inset 0 -2px 0 var(--turquoise); }
/* In de demo onder de poule: de tien voorbeeldduels, met Compleet zestig (tot 20 okt 2026 boven de tabjes). */
.duel-demo-note { margin-top: 12px; }

.duel-panel { display: none; }

/* Sub-tabs in de Beheer-tab (zelfde pil-balk als bij de mini duels). */
/* Sub-tabs van de Beheer-tab: compact en sticky onder de hoofdtabbalk (die is
   10 + 36 + 10 px plus 1 px rand = 57 px hoog), zodat je bij een lange rol niet
   terug hoeft te scrollen om van onderdeel te wisselen. Volle breedte met een
   eigen achtergrond, anders schuift de inhoud langs de ronde hoeken zichtbaar. */
.subtabs {
    position: sticky;
    top: 57px;
    z-index: 4;
    flex-wrap: nowrap;
    /* Strak tegen de hoofdtabbalk: die heeft 16px ondermarge, die halen we hier weg. */
    margin: -16px -18px 18px;
    /* Zelfde ruimte boven en onder de pil als in de hoofdtabbalk (10px). */
    padding: 10px 18px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
    /* Dezelfde dekrand als op de hoofdtabbalk (zie .tabs): die ligt erboven (z-index 5) en dekt hem
       waar de twee aansluiten. */
    box-shadow: 0 -4px 0 var(--surface);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtabs .duel-tabs__tab { flex: none; min-height: 30px; padding: 0 12px; font-size: 0.78rem; }
.subpanel { display: none; }
.subpanel.is-active { display: block; }
/* Alleen de blokken direct in de sub-tab; niet de vakjes in een raster erbinnen. */
.subpanel > .form + .form,
.subpanel > .form + div,
.subpanel > div + .form,
.subpanel > div + div { margin-top: 44px; }
.subpanel > .form__title { margin-top: 48px; margin-bottom: 5px; }
.subpanel > .form__title:first-child,
.subpanel > form:first-child,
.subpanel > .form:first-child { margin-top: 0; }
.duel-panel.is-active { display: block; }
.duel-panel > .challenges-public__label:first-child { margin-top: 0; }

/* ---------- Ronde invoeren ---------- */

.round-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

.round-row {
    display: grid;
    grid-template-columns: 1fr 96px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.round-row__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.round-row__input {
    min-height: 44px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

/* ---------- Spelersbeheer ---------- */

.player-admin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 18px 0; }

.player-admin__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.player-admin__top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-admin__bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 62px;
}

.player-admin__avatar {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-high);
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-soft);
}

.player-admin__avatar img { width: 100%; height: 100%; object-fit: cover; }

.player-admin__name {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 600;
}

.player-admin__name:focus-visible {
    border-color: var(--line);
    background: var(--bg);
    outline: none;
}

.player-admin__gender { flex: 0 0 auto; width: 9.5em; }
.player-admin__team {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    /* background-color en niet de shorthand: die zou het chevron-plaatje
       van de dropdownregel hierboven wissen. Rechts ruimte voor het pijltje. */
    padding: 6px 34px 6px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}

/* ---------- Songtekst ---------- */

/* Een refrein dat er ook als refrein uitziet, scheelt tussen meelezen en
   meezingen. Blokken komen uit src/Lyrics.php. */
.lyrics__verse + .lyrics__verse { margin-top: 16px; }

.lyrics__chorus {
    padding-left: 12px;
    border-left: 2px solid var(--turquoise-deep);
    font-style: italic;
    color: var(--text);
}

.lyrics__chorus + .lyrics__verse { margin-top: 30px; }

.lyrics__shout {
    color: var(--turquoise);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.lyrics__outro {
    font-weight: 700;
    color: var(--text);
}

.lyrics__accent {
    color: var(--turquoise);
    font-weight: 800;
}

.lyrics-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
}

/* ---------- Tekst-editors in het paneel ---------- */

/* Knopjes die markdown invoegen boven een tekstveld. Overgenomen uit
   surpriseweekend: opmaak onthouden is lastiger dan een knop aantikken, zeker
   op een telefoon waar `**` intikken al een handeling op zich is. */
.md-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
}

/* De grote tekstvelden (verhaal, draaiboek, songtekst): vaste breedte per teken,
   zodat je regels en inspringing ziet zoals ze uitkomen. */
.lyrics-editor {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    min-height: 220px;
    /* Niet te hoog worden bij lange teksten; daarboven scrollt het veld zelf. */
    max-height: 300px;
    resize: vertical;
}

.intro-image-preview {
    margin: 0 0 4px;
    display: flex;
    justify-content: center;
}

.intro-image-preview__image {
    width: 140px;
    height: 140px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: rgb(0 0 0 / 20%);
    padding: 8px;
}

/* De huidige hoes van het lied in het paneel (sinds 27 okt 2026): vierkant, zonder rand eromheen. */
.song-cover-preview { display: flex; justify-content: center; margin: 0 0 4px; }
.song-cover-preview__image { width: 140px; height: 140px; border-radius: var(--radius-sm); object-fit: cover; }

/* ---------- Challenges ---------- */

/* De bestemmingsknop los van de uitleg erboven. */
#destinationToggle { margin-top: 18px; }

.danger {
    margin: 22px 0;
    padding: 14px;
    border: 1px solid #6d3320;
    border-radius: var(--radius);
}

.danger__title { margin-bottom: 10px; font-size: 0.9rem; color: var(--red); }

/* ---------- Historie in admin ---------- */

.log-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }

.log-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 0.9rem;
}

/* De uitleg op een eigen regel onder wie wie uitdaagde of welk team punten kreeg (sinds 27 okt 2026, de eigenaar:
   "Graag de tekst (beginnend met De) op de volgende regel"). Tot die dag liep hij achter de kop door. */
.log-item__meta { display: block; margin-top: 2px; color: var(--text-dim); font-size: 0.78rem; }
/* Bij een duel twee knoppen onder elkaar (sinds 28 okt 2026, de eigenaar: "Knopje met 'aanpassen' is een goed idee"):
   Aanpassen in het accent, Undo in rood, even breed. Aanpassen opent het venster om de uitslag aan te passen. Die
   ochtend was ook de tekst van het duel een knop (.log-item__open), tot de eigenaar: "mag de klik op de card wel weg". */
.log-item__actions { display: grid; gap: 6px; }
.log-item__actions .btn--edit { border-color: color-mix(in srgb, var(--turquoise) 55%, var(--line)); background: transparent; color: var(--turquoise); }

/* ---------- Toast ---------- */

/* Geen verbinding (app.js, refresh): na drie mislukte verversingen een pil
   bovenaan in het midden, weg zodra het weer lukt. Bovenaan, want de toast
   staat onderaan en zonder verbinding komen er geen banners binnen. Boven het
   paneel (50) en de banners (70); in en uit in 0,3 s. */
/* Het demoweekend (DemoWeekend), sinds 20 okt 2026 (de eigenaar): de uitleg als pop-up bij het
   begin (.demo-intro, een sheet zoals het inlogvenster, weg te klikken) en de knoppen onderaan de
   pagina, op elk tabblad (.demo-cta): "Jullie eigen spel", en met een eigen proefversie
   (DemoSandbox) "Opnieuw beginnen". Tot die dag een balk boven de titel met de uitleg en de
   knoppen. In het paneel stond tot 20 okt 2026 nog een eigen uitleg (.demo-hint, de eigenaar: "dit
   weghalen"); wat daar niet mag, meldt de server zelf (DemoSandbox::guard). */
.demo-intro__text { margin: 16px 0 20px; font-size: 0.95rem; line-height: 1.5; color: var(--text); }
/* Zet het spel op je beginscherm (sinds 20 okt 2026, app/install.js): een sheet zoals het inlogvenster.
   Op Android "Installeren" met "Later" als stille link, op een iPhone de twee stappen met het deelicoon. */
.install-hint__text { margin: 16px 0 16px; font-size: 0.95rem; line-height: 1.5; color: var(--text); }
.install-hint__steps { display: grid; gap: 8px; margin: 0 0 12px; padding-left: 1.3em; font-size: 0.95rem; line-height: 1.4; color: var(--text); }
.install-hint__share { margin-left: 2px; vertical-align: -3px; color: var(--turquoise); }
.install-hint__note { margin: 0 0 18px; }
/* De tweede keer op een iPhone (sinds 28 okt 2026): onder de eerste zin, voor de stappen. */
.install-hint__again { margin: 0 0 16px; }
.install-hint__later { display: block; margin: 10px auto 0; padding: 4px 8px; border: 0; background: none; font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--text-soft); cursor: pointer; }
.install-hint__later:hover, .install-hint__later:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.is-tv .install-hint { display: none !important; }
/* Sinds 20 okt 2026 rustiger (de eigenaar: "professioneler, het oogt niet mooi"; eerst tekst met twee
   knoppen van ongelijke breedte, links uitgelijnd): gecentreerd, een kop en één regel, één hoofdknop
   (op een telefoon over de breedte), en "Opnieuw beginnen" als stille link eronder. */
.demo-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(680px, calc(100% - 28px));
    margin: 32px auto 0;
    padding: 24px 20px 20px;
    border: 1px solid color-mix(in srgb, var(--turquoise), transparent 60%);
    border-radius: var(--radius);
    background: linear-gradient(160deg, color-mix(in srgb, var(--surface), var(--turquoise) 12%), var(--surface) 70%);
    box-shadow: var(--card-shadow, var(--shadow));
    text-align: center;
}
.demo-cta__title { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.25; color: var(--heading); text-wrap: balance; }
.demo-cta__text { margin: 6px 0 18px; font-size: 0.9rem; line-height: 1.45; color: var(--text-soft); text-wrap: balance; }
.demo-cta__go { width: min(100%, 320px); }
.demo-cta__reset { margin: 12px 0 0; padding: 4px 8px; border: 0; background: none; font: inherit; font-size: 0.84rem; font-weight: 700; color: var(--text-soft); cursor: pointer; }
.demo-cta__reset:hover, .demo-cta__reset:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.is-tv .demo-cta, .is-tv .demo-intro { display: none !important; }

.connection {
    position: fixed;
    top: calc(var(--safe-top) + 12px);
    left: 50%;
    z-index: 72;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Naar de inhoud, anders krimpt hij vanaf left: 50% tot de halve breedte. */
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0;
    padding: 9px 16px;
    border: 1px solid color-mix(in srgb, var(--red) 55%, var(--line));
    border-radius: 999px;
    background: var(--surface-high);
    box-shadow: var(--shadow);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.connection::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
}

.connection.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--safe-bottom) + 22px);
    z-index: 100;
    transform: translateX(-50%);
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--surface-high);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    animation: toast-in 0.22s ease both;
}

.toast--error { border-color: #8a4b2a; color: #ffc6cc; }

@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- Groter scherm ---------- */

@media (min-width: 720px) {
    .hero { padding-top: 56px; }
    .page { padding-inline: 0; }
    .sheet { padding: max(20px, var(--safe-top)) 20px max(20px, var(--safe-bottom)); }
    .sheet__panel { width: min(640px, 100%); }
    /* Het adminpaneel even breed als de blokken op het bord (.page = 680px). */
    .sheet--full .sheet__panel { width: min(680px, 100%); height: min(80dvh, 760px); }

    /* Nu past leden-links/tags-rechts wél naast elkaar. Past het niet (een team van
       zes op een rij), dan mogen de leden krimpen en wikkelen, en gaan de tags
       eronder als er geen 220 px meer naast past: tot 13 okt 2026 stak de zesde
       speler buiten de kaart en stonden de tags er in een strookje naast. */
    .team-card__body {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 10px;
    }

    /* De leden krijgen minstens 360 px (drie grote foto's) en wikkelen daarin:
       zes grote foto's worden zo drie plus drie, zes kleine passen op één rij
       (de eigenaar, 13 okt 2026: "zes kleine fotootjes kunnen wel naast elkaar
       op dezelfde breedte als drie grote foto's"). */
    .team-card__members {
        display: flex;
        flex: 1 1 360px;
        max-width: 100%;
        flex-wrap: wrap;
        justify-items: initial;
    }

    /* Vijf of zes leden met de middelste fotomaat: drie plus twee of drie plus
       drie, in plaats van vier plus een of vier plus twee. Groot en klein wikkelen
       vanzelf goed (drie grote, zes kleine per rij). */
    .team-card:not(.team-card--big):not(.team-card--small) .team-card__members:has(> :nth-child(5)):not(:has(> :nth-child(7))) {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-items: center;
    }

    /* De puntenlijst onder de foto's, over de hele breedte (sinds 28 okt 2026, de eigenaar: "De positie zit niet
       lekker"). Van 23 tot 28 okt stond hij rechts naast de foto's, met de regels rechts uitgelijnd. */
    .team-card__log { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ---- Het huisje (adres, Maps-knop, fotogalerij) ---- */

/* Woordveld naast de ontgrendelknop (huisje-woord). */
.song-gate {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 12px;
}
.song-gate[hidden] { display: none; }
.song-gate .field__input { flex: 1; min-width: 0; }
@media (min-width: 520px) {
    .song-gate { flex-direction: row; }
}

/* Het adres als kaart met de knop eronder (variant C, 29 okt 2026). */
/* Lucht onder de kop van de rij: 10px sinds 30 okt 2026, 20px sinds 2 nov 2026 (de eigenaar: "hier graag nog 10px
   extra ruimte"). */
.location-card {
    display: grid;
    gap: 14px;
    margin: 20px 0 20px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-high);
}
.location-address {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    user-select: text;
}
.location-address__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--turquoise) 16%, transparent);
    color: var(--turquoise);
}
.location-address__icon svg,
.location-maps__icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.location-address__text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.location-address__label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.location-maps {
    gap: 8px;
    border-color: color-mix(in srgb, var(--turquoise) 55%, transparent);
    color: var(--turquoise);
}
.location-maps__icon { width: 18px; height: 18px; }

/* Fotogrid van het huisje: speels, met licht gekantelde polaroids. */
.house-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding: 4px;
}
.house-grid__photo {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border: 3px solid rgb(255 255 255 / 88%);
    border-radius: 4px;
    box-shadow: 0 6px 16px rgb(0 0 0 / 40%);
    transform: rotate(-1.6deg);
    transition: transform 0.15s ease;
}
.house-grid__photo:nth-child(even) { transform: rotate(1.8deg); }
.house-grid__photo:nth-child(3n)   { transform: rotate(-0.7deg); }
.house-grid__photo:first-child { transform: rotate(0.9deg); }
.house-grid--hero .house-grid__photo:first-child {
    grid-column: 1 / -1;
    height: 200px;
}
.house-grid__photo:active,
.house-grid__photo:hover { transform: rotate(0deg) scale(1.02); }
.house-grid__photo { cursor: zoom-in; }
.house-grid__photo:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; }

/* De galerij van het huisje (sinds 29 okt 2026, app/house.js): schermvullend op zwart, zoals een fotoalbum (de
   eigenaar koos C uit drie varianten: "het mag wel iets professioneler eruit zien"). Bovenin over de foto de teller en
   het kruisje, in het midden een rij foto's met scroll-snap (vegen), onderin de duimnagels. Met een muis ook de
   pijltjes. Een foto past altijd helemaal in beeld. */
.sheet.photo-viewer { padding: 0; background: #000; backdrop-filter: none; }
.photo-viewer .sheet__panel {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: none;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.photo-viewer .sheet__head {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    padding: max(14px, var(--safe-top)) 14px 24px;
    border: 0;
    background: linear-gradient(rgb(0 0 0 / 55%), transparent);
}
.photo-viewer .sheet__title { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; color: rgb(255 255 255 / 80%); font-variant-numeric: tabular-nums; }
.photo-viewer .sheet__close { background: rgb(255 255 255 / 12%); color: #fff; }
/* Opzij vegen is de rij, omlaag vegen sluit (house.js): de browser neemt zelf alleen het opzij vegen. */
.photo-viewer__stage { position: relative; touch-action: pan-x; }
.photo-viewer__track {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.photo-viewer__track::-webkit-scrollbar { display: none; }
.photo-viewer__slide {
    flex: 0 0 100%;
    display: grid;
    place-items: center;
    margin: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}
.photo-viewer__slide img {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 220px);
    object-fit: contain;
}
.photo-viewer__thumbs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: max(20px, var(--safe-bottom));
    display: flex;
    justify-content: safe center;
    gap: 6px;
    padding: 2px 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.photo-viewer__thumbs::-webkit-scrollbar { display: none; }
.photo-viewer__thumb {
    flex: none;
    width: 52px;
    height: 52px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    opacity: 0.45;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.photo-viewer__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-viewer__thumb.is-on { border-color: #fff; opacity: 1; }
.photo-viewer__thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.photo-viewer__nav {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 55%);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.3s ease-in-out;
}
.photo-viewer__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.photo-viewer__nav--prev { left: 16px; }
.photo-viewer__nav--next { right: 16px; }
.photo-viewer__nav:disabled { opacity: 0; pointer-events: none; }
@media (hover: none) { .photo-viewer__nav { display: none; } }

/* Beheer van de huisjefoto's in het paneel: thumbnails met verwijderknop. */
.house-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}
.house-admin__item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--line);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.house-admin__item.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
    outline: 2px solid var(--turquoise);
    outline-offset: -2px;
}
.house-admin__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.house-admin__badge {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgb(0 0 0 / 55%);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text);
}
.house-admin__del {
    position: absolute;
    top: 2px;
    right: 2px;
    /* Een destructieve knop van 16px was op een telefoon niet te raken. */
    width: 28px;
    height: 28px;
    min-height: 0;
    min-width: 0;
    padding: 0;
    line-height: 1;
    font-size: 0.9rem;
    font-weight: 800;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    border: 1px solid rgb(255 255 255 / 85%);
    box-shadow: 0 1px 4px rgb(0 0 0 / 55%);
}
.house-admin__del:hover { background: #d84438; }

/* Draaiboek-pagina (public/draaiboek.php), overgezet uit surpriseweekend.
   Admin-only; het draaiboek is bewerkbare Markdown en rendert via Markdown::toHtml. */
.runbook-page { padding: 0; }

.runbook {
    max-width: 640px;
    margin: 0 auto;
    /* Bovenin ook de veilige rand van een iPhone (sinds 2 nov 2026, de eigenaar: "Kan niet op terug klikken"): de
       pagina loopt met viewport-fit=cover door tot onder de klok, en daar zat de knop Terug. */
    padding: calc(env(safe-area-inset-top, 0px) + 24px) 20px calc(var(--safe-bottom) + 40px);
    /* Het draaiboek is een leespagina; tekst moet selecteerbaar/kopieerbaar
       zijn (het bord zet selectie globaal uit tijdens het spel). */
    user-select: text;
    -webkit-user-select: text;
}

.runbook__back {
    /* Een raakvlak van 44 px hoog, zoals een knop op een telefoon. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--turquoise);
    text-decoration: none;
}

.runbook__title {
    margin: 14px 0 6px;
    font-size: 1.5rem;
}

.runbook__warning {
    margin: 0 0 20px;
    padding: 10px 12px;
    border-left: 3px solid var(--sulfur);
    border-radius: var(--radius-sm);
    background: rgb(224 184 76 / 10%);
    font-size: 0.85rem;
    color: var(--text-soft);
}

.runbook__section {
    margin-bottom: 26px;
}

.runbook__section h2 {
    margin: 0 0 8px;
    font-size: 1.02rem;
    color: var(--turquoise);
}

.runbook__section p,
.runbook__section ol {
    margin: 0 0 10px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-soft);
}

.runbook__section ol { padding-left: 20px; }
.runbook__section li { margin-bottom: 4px; }

.runbook__table {
    width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse;
    font-size: 0.86rem;
    color: var(--text-soft);
}

.runbook__table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.runbook__table td:first-child {
    white-space: nowrap;
    font-weight: 700;
    color: var(--text);
}

/* Het draaiboek is nu bewerkbare Markdown; die levert losse tags op in
   plaats van .runbook__section-blokken. Dezelfde opmaak, nu op de tags. */
.runbook__body > :first-child { margin-top: 0; }

.runbook__body h2 {
    margin: 26px 0 8px;
    font-size: 1.02rem;
    color: var(--turquoise);
}

.runbook__body h1,
.runbook__body h3 {
    margin: 22px 0 8px;
    font-size: 1rem;
    color: var(--turquoise);
}

.runbook__body p,
.runbook__body ol,
.runbook__body ul {
    margin: 0 0 10px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-soft);
}

.runbook__body ol,
.runbook__body ul { padding-left: 20px; }
.runbook__body li { margin-bottom: 4px; }

.runbook__body table {
    width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse;
    font-size: 0.86rem;
    color: var(--text-soft);
}

.runbook__body td,
.runbook__body th {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    text-align: left;
}

.runbook__body td:first-child {
    white-space: nowrap;
    font-weight: 700;
    color: var(--text);
}

/* Smalle schermen: kleinere letter en minder opvulling, zodat vier tabs naast elkaar passen. */
@media (max-width: 430px) {
    .duel-tabs { gap: 2px; padding: 3px; }
    .duel-tabs__tab { padding: 0 6px; font-size: 0.78rem; }
    /* De regel .duel-tabs hierboven won op een telefoon van .subtabs (padding 3px i.p.v. 10px 18px).
       De tabs krimpen niet meer maar scrollen horizontaal, met ruimte ertussen. */
    .subtabs { gap: 6px; padding: 10px 18px; }
    .subtabs .duel-tabs__tab { padding: 0 12px; }
}