/**
 * Nexus Games, UI-laag.
 *
 * Een eigen, afhankelijkheidsvrije basislaag voor alles wat de plugin op
 * de site toont. Alles staat achter .nxg-ui zodat er niets naar het thema
 * lekt en omgekeerd.
 *
 * Twee dingen bepalen hoe dit eruitziet:
 *
 * 1. De kleuren komen uit het thema via --tg-primary-color, met een eigen
 *    terugval. Wijzigt de klant zijn accentkleur, dan volgt alles mee.
 * 2. Velden krijgen een breedte die past bij wat erin komt. Een veld van
 *    1600 pixels voor een spelersnummer van tien tekens is gewoon fout.
 */

.nxg-ui {
	--nxg-bg: #030B15;
	--nxg-surface: #0C1729;
	--nxg-surface-2: rgba( 255, 255, 255, .04 );
	--nxg-line: rgba( 164, 180, 195, .16 );
	--nxg-line-strong: rgba( 164, 180, 195, .32 );

	--nxg-text: #DCE7F3;
	--nxg-muted: #8B99AC;
	--nxg-heading: #FFFFFF;

	--nxg-accent: var( --tg-primary-color, #00C4F4 );
	--nxg-accent-2: var( --tg-secondary-color, #564DCA );
	--nxg-on-accent: #04121C;

	--nxg-ok: #12D176;
	--nxg-warn: #FF9700;
	--nxg-bad: #FF4581;

	--nxg-r: 12px;
	--nxg-r-sm: 8px;

	color: var( --nxg-text );
	font-size: 1rem;
	line-height: 1.6;
}

.nxg-ui *,
.nxg-ui *::before,
.nxg-ui *::after {
	box-sizing: border-box;
}

.nxg-ui :focus-visible {
	outline: 3px solid var( --nxg-accent );
	outline-offset: 2px;
	border-radius: 4px;
}

/* ------------------------------------------------------------- ruimte */

.nxg-ui__wrap {
	max-width: 62rem;
	margin: 0 auto;
}

.nxg-ui__wrap--smal {
	max-width: 44rem;
}

/* Bewust met gap en niet met marges. Een marge op een kind kan altijd
   overreden worden door een specifiekere regel, en dan valt de ruimte
   tussen de kaarten stilletjes weg. Gap staat op de ouder en is immuun. */
.nxg-stack {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* --------------------------------------------------------------- kop */

.nxg-ui .nxg-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem;
	margin: 0 0 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var( --nxg-line );
}

.nxg-eyebrow {
	margin: 0 0 .4rem;
	color: var( --nxg-accent );
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.nxg-ui .nxg-hero__name {
	margin: 0;
	color: var( --nxg-heading );
	font-size: clamp( 1.6rem, 4vw, 2.25rem );
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-transform: none;
}

/* ------------------------------------------------------- sectienavigatie */

/* Blijft bovenaan plakken, zodat je in een lang dashboard nooit hoeft
   terug te scrollen. */
.nxg-ui .nxg-jump {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	gap: .4rem;
	margin: 0 0 1.75rem;
	padding: .6rem .75rem;
	overflow-x: auto;
	scrollbar-width: none;
	border: 1px solid var( --nxg-line );
	border-radius: 999px;
	/* Eigen dekkende achtergrond, anders schemert de inhoud eronder door. */
	background: #0A1120;
}

.nxg-jump::-webkit-scrollbar {
	display: none;
}

.nxg-ui .nxg-jump a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: .3rem 1rem;
	border: 1px solid var( --nxg-line );
	border-radius: 999px;
	background: var( --nxg-surface-2 );
	color: var( --nxg-muted );
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.nxg-jump a:hover {
	color: var( --nxg-heading );
	border-color: var( --nxg-line-strong );
}

.nxg-jump a[aria-current="true"] {
	background: var( --nxg-accent );
	border-color: var( --nxg-accent );
	color: var( --nxg-on-accent );
}

/* ------------------------------------------------------------ kaarten */

.nxg-ui .nxg-card {
	position: relative;
	margin: 0;
	padding: 1.75rem;
	border: 1px solid var( --nxg-line );
	border-radius: var( --nxg-r );
	background: var( --nxg-surface );
	overflow: hidden;
}

/* Een kort streepje in de accentkleur linksboven. Genoeg om een kaart
   herkenbaar te maken zonder dat het een kader wordt. Het zit binnen de
   afgeronde hoek, vandaar de inzet. */
.nxg-ui .nxg-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 1.75rem;
	width: 3.5rem;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var( --nxg-card-accent, linear-gradient( 90deg, var( --nxg-accent ), var( --nxg-accent-2 ) ) );
}

.nxg-card[id] {
	/* Zodat de plakkende navigatie de titel niet bedekt na een sprong. */
	scroll-margin-top: 5rem;
}

.nxg-ui .nxg-card__title {
	margin: .4rem 0 1.1rem;
	color: var( --nxg-heading );
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.25;
	text-transform: none;
}

.nxg-card__label {
	margin: 0;
	color: var( --nxg-accent );
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.nxg-card__note {
	margin: 1rem 0 0;
	color: var( --nxg-muted );
	font-size: .9rem;
}

/* -------------------------------------------------------------- cijfers */

/* Het element staat er bewust bij. Themas zetten vaak padding op elke ul
   in de inhoud, en zo'n regel is specifieker dan één losse klasse. */
.nxg-ui ul.nxg-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 9rem, 1fr ) );
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var( --nxg-line );
	border-radius: var( --nxg-r );
	overflow: hidden;
	background: var( --nxg-surface );
}

/* Echte randen tussen de vakken in plaats van een raster met gaten. Dat
   laatste laat aan de buitenrand altijd een streepje zien. */
.nxg-ui .nxg-stats > li {
	margin: 0;
	padding: 1.4rem 1.6rem;
	border-left: 1px solid var( --nxg-line );
	background: none;
	list-style: none;
}

.nxg-ui .nxg-stats > li:first-child {
	border-left: 0;
}

.nxg-ui .nxg-stats b {
	display: block;
	margin-bottom: .3rem;
	color: var( --nxg-heading );
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}

.nxg-ui .nxg-stats span {
	display: block;
	color: var( --nxg-muted );
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Op smalle schermen worden het rijen, dus dan hoort de rand boven. */
@media (max-width: 560px) {
	.nxg-ui .nxg-stats > li {
		border-left: 0;
		border-top: 1px solid var( --nxg-line );
	}

	.nxg-ui .nxg-stats > li:first-child {
		border-top: 0;
	}
}

/* ---------------------------------------------------------- formulieren */

.nxg-form {
	max-width: 34rem;
}

/* Staat er tekst boven het formulier, dan hoort daar een scheiding
   tussen. Anders lopen de uitleg en de invulvelden in elkaar over. */
.nxg-punten + .nxg-form,
.nxg-card > p + .nxg-form {
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var( --nxg-line );
}

.nxg-form--breed {
	max-width: none;
}

.nxg-field {
	margin: 0 0 1.1rem;
}

.nxg-ui .nxg-field label,
.nxg-ui .nxg-label {
	display: block;
	margin-bottom: .4rem;
	color: var( --nxg-muted );
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-ui .nxg-field input,
.nxg-ui .nxg-field select,
.nxg-ui .nxg-field textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: .65rem .85rem;
	border: 1px solid var( --nxg-line-strong );
	border-radius: var( --nxg-r-sm );
	background: rgba( 3, 11, 21, .55 );
	color: var( --nxg-heading );
	font: inherit;
	font-size: 1rem;
}

/* Velden krijgen een breedte die past bij hun inhoud. */
.nxg-field--kort input,
.nxg-field--kort select {
	max-width: 9rem;
}

.nxg-field--half input,
.nxg-field--half select {
	max-width: 18rem;
}

.nxg-ui .nxg-field textarea {
	min-height: 6rem;
	line-height: 1.55;
	resize: vertical;
}

.nxg-ui .nxg-field input::placeholder,
.nxg-ui .nxg-field textarea::placeholder {
	color: var( --nxg-muted );
}

.nxg-ui .nxg-field input:focus,
.nxg-ui .nxg-field select:focus,
.nxg-ui .nxg-field textarea:focus {
	border-color: var( --nxg-accent );
	outline: none;
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --nxg-accent ) 28%, transparent );
}

.nxg-field__hint {
	margin: .4rem 0 0;
	color: var( --nxg-muted );
	font-size: .85rem;
}

/* Datum- en tijdvelden hebben een zwart icoontje, onzichtbaar op donker. */
.nxg-ui input[type="date"]::-webkit-calendar-picker-indicator,
.nxg-ui input[type="time"]::-webkit-calendar-picker-indicator,
.nxg-ui input[type="datetime-local"]::-webkit-calendar-picker-indicator {
	filter: invert( 1 ) opacity( .65 );
	cursor: pointer;
}

.nxg-row {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
	gap: 0 1rem;
}

.nxg-row > * {
	min-width: 0;
}

/* Selectievakjes zijn geen invulvelden en horen niet in hoofdletters. */
.nxg-ui .nxg-check label {
	display: flex;
	align-items: center;
	gap: .7rem;
	min-height: 42px;
	margin: 0;
	color: var( --nxg-text );
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.nxg-ui .nxg-check input {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	accent-color: var( --nxg-accent );
}

.nxg-checks {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
	gap: .1rem 1.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.nxg-ui .nxg-checks legend {
	padding: 0;
	margin-bottom: .6rem;
	color: var( --nxg-muted );
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------- knoppen */

.nxg-ui .nxg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 48px;
	padding: .65rem 1.6rem;
	border: 1px solid var( --nxg-line-strong );
	border-radius: var( --nxg-r-sm );
	background: var( --nxg-surface-2 );
	color: var( --nxg-text );
	font: inherit;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nxg-ui .nxg-btn:hover {
	border-color: var( --nxg-accent );
	color: var( --nxg-heading );
}

/* Donkere tekst op de accentkleur. Wit haalt daar geen leesbaar
   contrast, hoe mooi het ook lijkt. */
.nxg-ui .nxg-btn--primair {
	border-color: var( --nxg-accent );
	background: var( --nxg-accent );
	color: var( --nxg-on-accent );
}

.nxg-ui .nxg-btn--primair:hover {
	color: var( --nxg-on-accent );
	filter: brightness( 1.12 );
}

.nxg-ui .nxg-btn--stil {
	min-height: 40px;
	padding: .35rem 1rem;
	border-color: transparent;
	background: none;
	color: var( --nxg-muted );
	font-size: .85rem;
}

.nxg-ui .nxg-btn--stil:hover {
	color: var( --nxg-heading );
}

.nxg-ui .nxg-btn--gevaar:hover {
	border-color: var( --nxg-bad );
	color: var( --nxg-bad );
}

.nxg-acties {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.5rem 0 0;
}

/* -------------------------------------------------------------- lijsten */

.nxg-ui ul.nxg-lijst,
.nxg-ui ol.nxg-lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-lijst > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem 1rem;
	padding: .95rem 0;
	border-bottom: 1px solid var( --nxg-line );
}

.nxg-ui .nxg-lijst > li {
	list-style: none;
}

.nxg-ui .nxg-lijst > li:first-child {
	padding-top: 0;
}

.nxg-ui .nxg-lijst > li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.nxg-lijst time {
	flex: 0 0 100%;
	color: var( --nxg-accent );
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.nxg-ui .nxg-lijst__naam {
	color: var( --nxg-heading );
	font-size: 1.02rem;
	font-weight: 700;
	text-decoration: none;
}

.nxg-ui .nxg-lijst__naam:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nxg-lijst__extra {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: .75rem;
}

/* ----------------------------------------------------------- opsomming */

/* Voor voordelen en korte punten. Bewust anders dan .nxg-lijst, die voor
   rijen met gegevens is en daarom scheidingslijnen heeft. */
.nxg-ui ul.nxg-punten {
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-punten > li {
	position: relative;
	margin: 0 0 .6rem;
	padding: 0 0 0 1.9rem;
	border: 0;
	color: var( --nxg-text );
	font-size: .98rem;
	line-height: 1.55;
	list-style: none;
}

.nxg-ui .nxg-punten > li:last-child {
	margin-bottom: 0;
}

/* Een vinkje, geen bolletje. Dit zijn dingen die je krijgt. */
.nxg-ui .nxg-punten > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .42em;
	width: .85rem;
	height: .48rem;
	border-left: 2px solid var( --nxg-accent );
	border-bottom: 2px solid var( --nxg-accent );
	transform: rotate( -45deg );
}

/* --------------------------------------------------------------- labels */

.nxg-badge {
	display: inline-block;
	padding: .15rem .7rem;
	border: 1px solid var( --nxg-line-strong );
	border-radius: 999px;
	color: var( --nxg-muted );
	font-size: .74rem;
	font-weight: 700;
	white-space: nowrap;
}

.nxg-badge--ok {
	border-color: rgba( 18, 209, 118, .5 );
	color: var( --nxg-ok );
}

.nxg-badge--wacht {
	border-color: rgba( 255, 151, 0, .5 );
	color: var( --nxg-warn );
}

.nxg-badge--af {
	border-color: rgba( 255, 69, 129, .5 );
	color: var( --nxg-bad );
}

/* ------------------------------------------------------------ meldingen */

.nxg-melding {
	margin: 0 0 1.5rem;
	padding: .95rem 1.2rem;
	border-left: 3px solid var( --nxg-accent );
	border-radius: 0 var( --nxg-r-sm ) var( --nxg-r-sm ) 0;
	background: color-mix( in srgb, var( --nxg-accent ) 12%, transparent );
	font-size: .96rem;
}

.nxg-melding--ok {
	border-left-color: var( --nxg-ok );
	background: rgba( 18, 209, 118, .10 );
}

.nxg-melding--fout {
	border-left-color: var( --nxg-bad );
	background: rgba( 255, 69, 129, .10 );
}

.nxg-leeg {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed var( --nxg-line-strong );
	border-radius: var( --nxg-r-sm );
	color: var( --nxg-muted );
	text-align: center;
}

@media (max-width: 600px) {
	.nxg-card {
		padding: 1.35rem;
	}

	.nxg-card::before {
		left: 1.35rem;
	}

	.nxg-lijst__extra {
		margin-left: 0;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nxg-ui * {
		transition: none !important;
	}
}

/* Het verborgen veld tegen bots. Onzichtbaar, maar wel in de code, want
   een bot leest de code en geen scherm. */
.nxg-trap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* --------------------------------------------------------- nieuwsbrief */

/* Het vinkje staat bewust apart van de rest van het formulier, met een
   lijn erboven. Zo is meteen duidelijk dat het los staat van waar je je
   voor inschrijft, en dat het geen voorwaarde is. */
.nxg-optin {
	margin: 1.5rem 0 0;
	padding: 1rem 1.1rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
	border-radius: 8px;
	background: rgba( 255, 255, 255, .03 );
}

/* Verticaal gecentreerd. Bij een label van twee regels hing het vakje
   anders bovenaan te zweven. */
.nxg-optin label {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 0;
	color: var( --nxg-text, #DCE7F3 );
	font-size: .92rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.nxg-optin input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	accent-color: var( --nxg-accent, #00C4F4 );
}

/* De tekst mag niet breder worden dan nodig, anders breekt hij af op een
   plek waar de zin nog makkelijk op één regel had gekund. */
.nxg-optin label span {
	max-width: 44rem;
}

/* De snelle contactregels boven het formulier. */
.nxg-contact__snel {
	margin-bottom: 1.5rem;
}

.nxg-ui .nxg-contact__snel a {
	color: var( --nxg-accent );
	font-weight: 700;
}

/* -------------------------------------------------------- keuzelijsten */

/* Het uitklapmenu wordt door het besturingssysteem getekend, niet door de
   pagina. In Chrome en Edge kan je de opties wel kleuren, en zonder dat
   krijg je een grijze lijst midden in een donkere site. */
.nxg-ui .nxg-field select {
	appearance: none;
	padding-right: 2.5rem;
	background-image:
		linear-gradient( 45deg, transparent 50%, var( --nxg-muted ) 50% ),
		linear-gradient( 135deg, var( --nxg-muted ) 50%, transparent 50% );
	background-position: calc( 100% - 20px ) 55%, calc( 100% - 14px ) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.nxg-ui select option {
	background-color: #0B1D33;
	color: #DCE7F3;
}

.nxg-ui select option:checked {
	background-color: #123255;
}

/* ------------------------------------------------------- selecteren */

/* Zonder dit gebruikt de browser zijn eigen grijsblauw, dat op een
   donkere achtergrond als een vlek oogt. */
.nxg-ui ::selection,
.nxg-reserve ::selection,
.nxg-calendar ::selection,
.nxg-home ::selection,
.nxg-page ::selection,
.nxg-hours ::selection {
	background: color-mix( in srgb, var( --nxg-accent, #00C4F4 ) 35%, transparent );
	color: #FFFFFF;
}

/* =================================================== mijn deelnames */

.nxg-ui .nxg-deelnames {
	display: grid;
	gap: .85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Nadrukkelijk grid en niet flex. Het thema maakt van elke li in de
   inhoud een flexregel, en dan vallen de foto, de kop en de gegevens
   naast elkaar op één lijn. */
.nxg-ui ul.nxg-deelnames > li.nxg-deelname,
.nxg-ui .nxg-deelname {
	position: relative;
	display: grid;
	grid-template-columns: 5.5rem minmax( 0, 1fr );
	gap: 1.1rem;
	align-items: start;
	margin: 0;
	padding: 1.1rem 1.25rem 1.1rem 1.1rem;
	overflow: hidden;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-radius: 14px;
	background:
		radial-gradient( 70% 130% at 100% 0%, color-mix( in srgb, var( --nxg-game-color, #00C4F4 ) 10%, transparent ), transparent 70% ),
		rgba( 255, 255, 255, .025 );
	list-style: none;
}

@media (max-width: 560px) {
	.nxg-ui ul.nxg-deelnames > li.nxg-deelname,
	.nxg-ui .nxg-deelname {
		grid-template-columns: 3.75rem minmax( 0, 1fr );
		gap: .85rem;
		padding: 1rem;
	}
}

/* Een streepje links in de kleur van de toestand. Genoeg om in één blik
   te zien welke deelname nog iets van je vraagt. */
.nxg-ui .nxg-deelname::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var( --nxg-muted, #8B99AC );
}

/* Oranje zolang er niets beslist is, groen zodra er iets voor je
   klaarligt. Groen tijdens het wachten zou suggereren dat je al iets
   hebt. */
.nxg-ui .nxg-deelname[data-tone="wacht"]::before {
	background: #FF9700;
}

.nxg-ui .nxg-deelname[data-tone="ok"]::before {
	background: #12D176;
}

.nxg-ui .nxg-deelname[data-tone="af"] {
	opacity: .72;
}

/* -------------------------------------------------------------- beeld */

.nxg-deelname__beeld {
	display: block;
	aspect-ratio: 1;
	padding: .35rem;
	overflow: hidden;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
	border-radius: 10px;
	background: rgba( 3, 11, 21, .55 );
}

.nxg-deelname__beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Zonder foto een gekleurd vlak, zodat elk blok even hoog blijft en de
   rij niet rafelt. */
.nxg-deelname__leeg {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	background:
		radial-gradient( 70% 90% at 30% 20%, color-mix( in srgb, var( --nxg-game-color, #00C4F4 ) 30%, transparent ), transparent 70% ),
		rgba( 86, 77, 202, .25 );
}

/* De titel van een reservatie is een datum, en die mag wat rustiger dan
   een producttitel. */
.nxg-ui span.nxg-deelname__titel {
	display: block;
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: capitalize;
}

/* --------------------------------------------------------------- kop */

.nxg-deelname__body {
	min-width: 0;
}

.nxg-deelname__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-bottom: .9rem;
}

.nxg-deelname__spel {
	display: block;
	margin-bottom: .15rem;
	color: var( --nxg-game-color, var( --nxg-accent, #00C4F4 ) );
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.nxg-ui .nxg-deelname__titel {
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}

.nxg-ui .nxg-deelname__titel:hover {
	color: var( --nxg-game-color, var( --nxg-accent, #00C4F4 ) );
}

.nxg-deelname__staat {
	flex: 0 0 auto;
	padding: .22rem .8rem;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .08 );
	color: var( --nxg-muted, #8B99AC );
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nxg-deelname__staat::before {
	content: "";
	display: inline-block;
	width: .42rem;
	height: .42rem;
	margin-right: .45rem;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

.nxg-deelname[data-tone="wacht"] .nxg-deelname__staat {
	background: rgba( 255, 151, 0, .16 );
	color: #FF9700;
}

.nxg-deelname[data-tone="ok"] .nxg-deelname__staat {
	background: #12D176;
	color: #04120A;
}

/* ---------------------------------------------------------- gegevens */

.nxg-deelname__cijfers {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem 2rem;
	margin: 0;
}

.nxg-deelname__cijfers > div {
	min-width: 0;
}

.nxg-deelname__cijfers dt {
	margin: 0 0 .25rem;
	color: var( --nxg-muted, #8B99AC );
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-deelname__cijfers dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0;
	color: var( --nxg-heading, #FFFFFF );
	font-size: .96rem;
	font-weight: 700;
}

.nxg-deelname__cijfers code {
	padding: .12rem .5rem;
	border-radius: 6px;
	background: rgba( 0, 0, 0, .35 );
	color: var( --nxg-accent, #00C4F4 );
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9rem;
	letter-spacing: .06em;
}

.nxg-ui .nxg-deelname__actie {
	margin: .9rem 0 0;
	color: #12D176;
	font-size: .86rem;
	font-weight: 600;
	line-height: 1.5;
}

/* ============================================ aanmelden om mee te doen */

.nxg-aanmelden-nodig {
	padding: 1.75rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-radius: 14px;
	background: rgba( 0, 196, 244, .07 );
	text-align: center;
}

.nxg-aanmelden-nodig__titel {
	margin: 0 0 .5rem;
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.15rem;
	font-weight: 700;
}

.nxg-aanmelden-nodig__uitleg {
	max-width: 44ch;
	margin: 0 auto 1.5rem;
	color: var( --nxg-muted, #8B99AC );
	font-size: .95rem;
	line-height: 1.6;
}

.nxg-aanmelden-nodig__knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0;
}

.nxg-aanmelden-nodig__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: .7rem 2rem;
	border-radius: 999px;
	background: var( --nxg-accent, #00C4F4 );
	color: #030B15;
	font-weight: 800;
	text-decoration: none;
}

.nxg-aanmelden-nodig__knop:hover {
	color: #030B15;
	filter: brightness( 1.12 );
}

.nxg-aanmelden-nodig__link {
	color: var( --nxg-muted, #8B99AC );
	font-size: .92rem;
}

/* De teller in een deelnameblok. */
.nxg-ui .nxg-aftellen {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .12rem .6rem;
	border-radius: 999px;
	background: rgba( 255, 151, 0, .16 );
	color: #FF9700;
	font-size: .74rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.nxg-ui .nxg-aftellen::before {
	content: "";
	width: .35rem;
	height: .35rem;
	border-radius: 50%;
	background: currentColor;
}

.nxg-ui .nxg-aftellen--voorbij {
	background: rgba( 255, 255, 255, .08 );
	color: var( --nxg-muted, #8B99AC );
}

@media (prefers-reduced-motion: reduce) {
	.nxg-ui .nxg-aftellen {
		display: none;
	}
}

/* ================================================ even bevestigen */

/* Eén klik mag nooit iets ongedaan maken wat je niet terugkrijgt. Deze
   tussenstap is bewust een echte pagina en geen javascript-venster: die
   zijn te blokkeren, en op een telefoon verschijnen ze soms boven het
   scherm. */
.nxg-ui .nxg-bevestig {
	border-color: rgba( 255, 151, 0, .4 );
	background: rgba( 255, 151, 0, .07 );
}

.nxg-ui .nxg-bevestig .nxg-card__label {
	color: #FF9700;
}

.nxg-ui .nxg-btn--gevaar {
	background: #FF4581;
	color: #FFFFFF;
	border-color: #FF4581;
}

.nxg-ui .nxg-btn--gevaar:hover {
	color: #FFFFFF;
	filter: brightness( 1.1 );
}

.nxg-ui .nxg-btn--stil {
	background: none;
	border-color: var( --nxg-line-strong, rgba( 164, 180, 195, .34 ) );
	color: var( --nxg-text, #DCE7F3 );
}

.nxg-ui .nxg-btn--stil:hover {
	border-color: var( --nxg-accent, #00C4F4 );
	color: var( --nxg-heading, #FFFFFF );
}

/* De intrekknop in een deelnameblok blijft klein. Het is een uitweg, geen
   uitnodiging. */
.nxg-ui .nxg-deelname__stop {
	margin: .9rem 0 0;
}

.nxg-ui .nxg-deelname__stop a {
	color: var( --nxg-muted, #8B99AC );
	font-size: .84rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nxg-ui .nxg-deelname__stop a:hover {
	color: #FF4581;
}

/* Kopjes en vette tekst in het account en de andere schermen die op de
   ui-laag draaien. Het thema zet die donker, en dat is hier onleesbaar. */
.nxg-ui h1,
.nxg-ui h2,
.nxg-ui h3,
.nxg-ui h4,
.nxg-ui h5,
.nxg-ui h6 {
	color: var( --nxg-heading, #FFFFFF );
}

.nxg-ui strong,
.nxg-ui b {
	color: var( --nxg-heading, #FFFFFF );
}

.nxg-ui li,
.nxg-ui dd,
.nxg-ui dt,
.nxg-ui blockquote {
	color: var( --nxg-text, #DCE7F3 );
}

/* Zelfde verhaal als in de hoofdstijl: met de klasse op de body erbij
   wegen deze regels zwaarder dan die van het thema. */
.nxg-plugin-pagina .nxg-ui h1,
.nxg-plugin-pagina .nxg-ui h2,
.nxg-plugin-pagina .nxg-ui h3,
.nxg-plugin-pagina .nxg-ui h4,
.nxg-plugin-pagina .nxg-ui h5,
.nxg-plugin-pagina .nxg-ui h6,
.nxg-donkere-pagina .nxg-ui h1,
.nxg-donkere-pagina .nxg-ui h2,
.nxg-donkere-pagina .nxg-ui h3,
.nxg-donkere-pagina .nxg-ui h4 {
	color: var( --nxg-heading, #FFFFFF );
}

/* Behalve de opschriften boven een kaart, die horen gedempt te blijven. */
.nxg-plugin-pagina .nxg-ui .nxg-card__label,
.nxg-donkere-pagina .nxg-ui .nxg-card__label {
	color: var( --nxg-muted, #8B99AC );
}

/* ============================================ voorwaarden en privacy */

/* Lange leesteksten. Smallere regels en meer lucht tussen de alinea's,
   want dit leest niemand vrijwillig en dan helpt elke rustpunt. */
.nxg-juridisch .nxg-card {
	padding: 2.5rem;
}

@media (max-width: 600px) {
	.nxg-juridisch .nxg-card {
		padding: 1.5rem;
	}
}

.nxg-ui .nxg-juridisch__titel {
	margin: 0 0 2rem;
	color: var( --nxg-heading, #FFFFFF );
	font-size: clamp( 1.6rem, 4vw, 2.1rem );
	line-height: 1.15;
}

.nxg-ui .nxg-juridisch h2 {
	margin: 2.25rem 0 .85rem;
	padding-top: 1.5rem;
	border-top: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
	color: var( --nxg-heading, #FFFFFF );
	font-size: 1.15rem;
	line-height: 1.3;
}

.nxg-ui .nxg-juridisch h2:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.nxg-ui .nxg-juridisch p {
	max-width: 68ch;
	margin: 0 0 1rem;
	color: var( --nxg-text, #DCE7F3 );
	line-height: 1.7;
}

.nxg-ui .nxg-juridisch ul {
	max-width: 68ch;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-juridisch li {
	position: relative;
	margin: 0 0 .85rem;
	padding-left: 1.4rem;
	color: var( --nxg-text, #DCE7F3 );
	line-height: 1.7;
}

.nxg-ui .nxg-juridisch li::before {
	content: "";
	position: absolute;
	top: .72em;
	left: 0;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var( --nxg-accent, #00C4F4 );
}

.nxg-ui .nxg-juridisch a {
	color: var( --nxg-accent, #00C4F4 );
}

.nxg-ui .nxg-juridisch__datum {
	margin: 2.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
	color: var( --nxg-muted, #8B99AC );
	font-size: .85rem;
}

/* Koppen in zinsvorm, ook hier. Alleen de eerste letter een hoofdletter,
   want een kop is een zin. De kleine labels boven een kaart blijven in
   kapitalen: dat zijn wegwijzers, geen koppen. */
.nxg-ui h1,
.nxg-ui h2,
.nxg-ui h3,
.nxg-ui h4,
.nxg-ui h5,
.nxg-ui h6,
.nxg-ui .nxg-card__title,
.nxg-ui .nxg-hero__titel {
	text-transform: none;
	letter-spacing: normal;
}

/* De regel over de nieuwsbrief bij de voorkeuren. */
.nxg-ui .nxg-nieuwsbrief {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
	color: var( --nxg-muted, #8B99AC );
	font-size: .92rem;
}

.nxg-ui .nxg-nieuwsbrief a {
	color: var( --nxg-accent, #00C4F4 );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==================================================== de lidkaart */

.nxg-lidkaart__blok {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

/* De code op wit, altijd. Een QR-code op een donkere achtergrond met
   lichte vlakjes lezen veel scanners niet: die verwachten donker op
   licht. */
.nxg-lidkaart__qr {
	flex: 0 0 auto;
	width: 9.5rem;
	padding: .5rem;
	border-radius: 10px;
	background: #FFFFFF;
}

.nxg-lidkaart__qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.nxg-lidkaart__tekst {
	flex: 1 1 12rem;
	min-width: 0;
}

.nxg-ui .nxg-lidkaart__saldo {
	margin: 0 0 .35rem;
	color: var( --nxg-heading, #FFFFFF );
	line-height: 1;
}

.nxg-lidkaart__saldo strong {
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

.nxg-lidkaart__saldo span {
	color: var( --nxg-muted, #8B99AC );
	font-size: .95rem;
	font-weight: 600;
}

.nxg-ui .nxg-lidkaart__nummer {
	margin: 0 0 .75rem;
	color: var( --nxg-muted, #8B99AC );
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-lidkaart__nummer code {
	margin-left: .4rem;
	padding: .15rem .5rem;
	border-radius: 6px;
	background: rgba( 0, 0, 0, .3 );
	color: var( --nxg-accent, #00C4F4 );
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1rem;
	letter-spacing: .1em;
}

.nxg-ui .nxg-lidkaart__uitleg {
	margin: 0;
	color: var( --nxg-muted, #8B99AC );
	font-size: .88rem;
	line-height: 1.55;
}

.nxg-ui .nxg-lidkaart__kop {
	margin: 1.75rem 0 .85rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --nxg-line, rgba( 164, 180, 195, .16 ) );
	font-size: .95rem;
}

/* --------------------------------------------------- de beloningen */

.nxg-ui .nxg-beloningen {
	display: grid;
	gap: .6rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-beloning {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 0;
	padding: .75rem .9rem;
	border: 1px solid var( --nxg-line, rgba( 164, 180, 195, .18 ) );
	border-radius: 10px;
	background: rgba( 255, 255, 255, .025 );
	list-style: none;
}

.nxg-ui .nxg-beloning[data-kan="ja"] {
	border-color: rgba( 18, 209, 118, .4 );
	background: rgba( 18, 209, 118, .07 );
}

.nxg-beloning__foto img {
	display: block;
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: 8px;
}

.nxg-beloning__info {
	flex: 1 1 auto;
	min-width: 0;
}

.nxg-beloning__naam {
	display: block;
	color: var( --nxg-heading, #FFFFFF );
	font-weight: 700;
}

.nxg-beloning__kost {
	display: block;
	color: var( --nxg-accent, #00C4F4 );
	font-size: .85rem;
	font-weight: 700;
}

.nxg-beloning__staat {
	flex: 0 0 auto;
	color: var( --nxg-muted, #8B99AC );
	font-size: .8rem;
	text-align: right;
}

.nxg-beloning[data-kan="ja"] .nxg-beloning__staat {
	color: #12D176;
	font-weight: 700;
}

/* ------------------------------------------------------ het logboek */

.nxg-ui .nxg-punt__log {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-punt__log li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: .6rem 0;
	border-bottom: 1px solid var( --nxg-line, rgba( 164, 180, 195, .12 ) );
	color: var( --nxg-text, #DCE7F3 );
	font-size: .9rem;
}

.nxg-ui .nxg-punt__log li:last-child {
	border-bottom: 0;
}

.nxg-punt__log strong {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

.nxg-punt__log strong[data-teken="plus"] {
	color: #12D176;
}

.nxg-punt__log strong[data-teken="min"] {
	color: #FF9700;
}