/**
 * Nexus Games
 *
 * Alle kleuren staan als variabele met een terugval, zodat het thema of een
 * instellingenscherm ze kan overschrijven zonder dat de code aangepast moet
 * worden. De terugvalwaarden komen uit het huidige thema.
 *
 * Leesbaarheid gaat voor op effect:
 * - lopende tekst haalt minstens AA op de achtergrond
 * - op cyaan staat donkere tekst, want wit haalt daar maar 2.06
 * - alles wat aanklikbaar is, is minstens 44 pixels hoog
 * - kleur draagt nooit alleen de betekenis, er staat altijd tekst bij
 */

.nxg-calendar,
.nxg-archive,
.nxg-games,
.nxg-game,
.nxg-signup,
.nxg-account,
.nxg-release,
.nxg-releases,
.nxg-reserve,
.nxg-hours {
	--nxg-bg: var(--tg-body-bg, #030B15);
	--nxg-panel: #0B1D33;
	--nxg-panel-soft: rgba(255, 255, 255, .04);
	--nxg-line: rgba(164, 180, 195, .18);
	--nxg-line-strong: rgba(164, 180, 195, .34);

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

	--nxg-glow: var(--tg-primary-color, #00C4F4);
	--nxg-violet: var(--tg-secondary-color, #564DCA);
	--nxg-on-glow: #030B15;

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

	--nxg-radius: 10px;
	--nxg-gap: 1rem;

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

/* ------------------------------------------------------------ basis */

.nxg-calendar *,
.nxg-archive *,
.nxg-game *,
.nxg-signup *,
.nxg-account *,
.nxg-release *,
.nxg-reserve * {
	box-sizing: border-box;
}

.nxg-calendar h2,
.nxg-calendar h3,
.nxg-archive h3,
.nxg-account h2,
.nxg-release h3,
.nxg-games h3 {
	color: var(--nxg-heading);
	line-height: 1.25;
}

/* Zichtbare focus. Zonder dit is toetsenbordnavigatie op een donkere
   achtergrond vrijwel onmogelijk. */
.nxg-calendar a:focus-visible,
.nxg-calendar button:focus-visible,
.nxg-archive a:focus-visible,
.nxg-game a:focus-visible,
.nxg-signup :focus-visible,
.nxg-account :focus-visible,
.nxg-release :focus-visible,
.nxg-reserve :focus-visible {
	outline: 3px solid var(--nxg-glow);
	outline-offset: 2px;
	border-radius: 4px;
}

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

.nxg-notice {
	margin: 0 0 1.25rem;
	padding: .9rem 1.1rem;
	border-left: 3px solid var(--nxg-glow);
	border-radius: 0 var(--nxg-radius) var(--nxg-radius) 0;
	background: rgba(0, 196, 244, .10);
	color: var(--nxg-text);
	font-size: .975rem;
}

.nxg-notice--duplicate,
.nxg-notice--vol,
.nxg-notice--gesloten {
	border-left-color: var(--nxg-warn);
	background: rgba(255, 151, 0, .10);
}

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

/* ------------------------------------------------------------ legende */

.nxg-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.nxg-legend__item {
	margin: 0;
	padding: 0;
}

.nxg-legend__button {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	padding: .4rem 1rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 999px;
	background: var(--nxg-panel-soft);
	color: var(--nxg-text);
	font: inherit;
	font-size: .9rem;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

/* Het bolletje draagt de kleur, het label draagt de betekenis. */
.nxg-legend__button::before {
	content: "";
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: var(--nxg-game-color, var(--nxg-glow));
	flex: 0 0 auto;
}

.nxg-legend__button:hover {
	border-color: var(--nxg-game-color, var(--nxg-glow));
	background: rgba(255, 255, 255, .07);
}

.nxg-legend__button[aria-pressed="true"] {
	border-color: var(--nxg-game-color, var(--nxg-glow));
	background: var(--nxg-game-color, var(--nxg-glow));
	color: var(--nxg-on-glow);
	font-weight: 600;
}

.nxg-legend__button[aria-pressed="true"]::before {
	background: var(--nxg-on-glow);
}

/* ----------------------------------------------------------- kalender */

.nxg-calendar__list,
.nxg-archive__list,
.nxg-game__list,
.nxg-release__order {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-calendar__month h3,
.nxg-archive__month h3 {
	margin: 2rem 0 .75rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--nxg-line);
	font-size: 1.05rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--nxg-muted);
}

.nxg-calendar__month:first-child h3 {
	margin-top: 0;
}

.nxg-calendar__event {
	position: relative;
	margin: 0 0 .6rem;
	padding: 1rem 1.15rem 1rem 1.5rem;
	border: 1px solid var(--nxg-line);
	border-radius: var(--nxg-radius);
	background: var(--nxg-panel);
	overflow: hidden;
}

/* Gekleurde rand per spel, gezet door het script. */
.nxg-calendar__event::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--nxg-game-color, var(--nxg-line-strong));
}

.nxg-calendar__event time,
.nxg-archive__event time,
.nxg-game__event time {
	display: block;
	color: var(--nxg-glow);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .03em;
}

.nxg-archive__event > a,
.nxg-game__event > a {
	display: inline-block;
	margin-top: .15rem;
	color: var(--nxg-heading);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.nxg-archive__event > a:hover,
.nxg-game__event > a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nxg-calendar__games {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .6rem 0 0;
	padding: 0;
	list-style: none;
}

.nxg-calendar__games li {
	padding: .1rem .6rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 999px;
	font-size: .78rem;
	color: var(--nxg-text);
}

.nxg-calendar__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2rem;
	margin: .9rem 0 0;
	font-size: .875rem;
}

/* Elk paar in een eigen doosje, anders lopen de labels en de waarden
   door elkaar zodra er iets afbreekt. */
.nxg-calendar__meta > div {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.nxg-calendar__meta dt {
	margin: 0;
	color: var(--nxg-muted);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-calendar__meta dd {
	margin: 0;
	color: var(--nxg-text);
	font-weight: 600;
}

.nxg-calendar__event--cancelled {
	opacity: .7;
}

.nxg-calendar__event--cancelled > a {
	text-decoration: line-through;
}

.nxg-calendar__cancelled {
	display: inline-block;
	margin-bottom: .3rem;
	padding: .1rem .55rem;
	border-radius: 4px;
	background: var(--nxg-bad);
	color: #FFFFFF;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.nxg-calendar__empty,
.nxg-archive__empty,
.nxg-game__empty,
.nxg-releases__empty {
	padding: 1.5rem;
	border: 1px dashed var(--nxg-line-strong);
	border-radius: var(--nxg-radius);
	color: var(--nxg-muted);
	text-align: center;
}

.nxg-calendar__subscribe,
.nxg-game__subscribe {
	margin: 1.5rem 0 0;
	font-size: .9rem;
}

.nxg-calendar__subscribe a,
.nxg-game__subscribe a {
	color: var(--nxg-glow);
}

/* Wat het script verbergt bij het filteren. */
.nxg-calendar__event[hidden],
.nxg-calendar__month[hidden],
.nxg-month__event[hidden] {
	display: none;
}

/* ------------------------------------------------------------ archief */

.nxg-archive__years {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.nxg-archive__years a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .3rem .9rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 999px;
	color: var(--nxg-text);
	font-size: .9rem;
	text-decoration: none;
}

.nxg-archive__years a[aria-current="page"] {
	border-color: var(--nxg-glow);
	background: var(--nxg-glow);
	color: var(--nxg-on-glow);
	font-weight: 600;
}

.nxg-archive__event {
	padding: .7rem 0;
	border-bottom: 1px solid var(--nxg-line);
}

/* -------------------------------------------------------- spellen */

.nxg-games {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--nxg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-games__item {
	padding: 1.25rem;
	border: 1px solid var(--nxg-line);
	border-top: 3px solid var(--nxg-game-color, var(--nxg-glow));
	border-radius: var(--nxg-radius);
	background: var(--nxg-panel);
}

.nxg-games__item h3 {
	margin: 0 0 .5rem;
	font-size: 1.15rem;
}

.nxg-games__item h3 a {
	color: var(--nxg-heading);
	text-decoration: none;
}

.nxg-games__next {
	margin: 0;
	font-size: .9rem;
}

.nxg-games__next time {
	color: var(--nxg-glow);
	font-weight: 600;
}

.nxg-games__next a {
	color: var(--nxg-text);
}

.nxg-games__next--empty {
	color: var(--nxg-muted);
}

.nxg-game__event {
	padding: .85rem 0;
	border-bottom: 1px solid var(--nxg-line);
}

.nxg-game__capacity {
	color: var(--nxg-muted);
	font-size: .85rem;
}

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

.nxg-signup,
.nxg-reserve,
.nxg-release {
	margin: 2rem 0 0;
	padding: 1.5rem;
	border: 1px solid var(--nxg-line);
	border-radius: var(--nxg-radius);
	background: var(--nxg-panel);
}

.nxg-signup__field,
.nxg-reserve__field,
.nxg-release__field {
	margin: 0 0 1rem;
}

.nxg-signup__field label,
.nxg-reserve__field label,
.nxg-release__field label,
.nxg-signup label[for],
.nxg-account label[for] {
	display: block;
	margin-bottom: .35rem;
	color: var(--nxg-text);
	font-size: .9rem;
	font-weight: 600;
}

.nxg-signup abbr,
.nxg-reserve abbr {
	border: 0;
	color: var(--nxg-glow);
	text-decoration: none;
}

.nxg-signup input,
.nxg-signup textarea,
.nxg-signup select,
.nxg-reserve input,
.nxg-reserve select,
.nxg-release input,
.nxg-account input[type="text"] {
	width: 100%;
	min-height: 48px;
	padding: .65rem .85rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 8px;
	background: rgba(3, 11, 21, .6);
	color: var(--nxg-heading);
	font: inherit;
	font-size: 1rem;
}

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

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

.nxg-signup input:focus,
.nxg-signup textarea:focus,
.nxg-reserve input:focus,
.nxg-reserve select:focus,
.nxg-release input:focus {
	border-color: var(--nxg-glow);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 196, 244, .25);
}

/* Kalendericoontjes van datum- en tijdvelden zijn zwart op donker en dus
   onzichtbaar. */
.nxg-signup input[type="date"]::-webkit-calendar-picker-indicator,
.nxg-reserve input[type="time"]::-webkit-calendar-picker-indicator,
.nxg-signup input[type="datetime-local"]::-webkit-calendar-picker-indicator {
	filter: invert(1) opacity(.7);
	cursor: pointer;
}

.nxg-signup__trap,
.nxg-reserve__trap,
.nxg-release__trap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.nxg-signup__submit,
.nxg-reserve__submit,
.nxg-release__submit {
	margin: 1.5rem 0 0;
}

.nxg-signup__submit button,
.nxg-reserve__submit button,
.nxg-release__submit button {
	min-height: 48px;
	padding: .7rem 1.75rem;
	border: 0;
	border-radius: 8px;
	background: var(--nxg-glow);
	color: var(--nxg-on-glow);
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: filter .15s ease;
}

.nxg-signup__submit button:hover,
.nxg-reserve__submit button:hover,
.nxg-release__submit button:hover {
	filter: brightness(1.12);
}

.nxg-signup__seats {
	margin: 0 0 1.25rem;
	padding: .8rem 1rem;
	border-radius: 8px;
	background: rgba(18, 209, 118, .12);
	color: var(--nxg-text);
	font-weight: 600;
}

.nxg-signup__seats--full {
	background: rgba(255, 151, 0, .12);
}

.nxg-signup__payment,
.nxg-signup__closed,
.nxg-reserve__note,
.nxg-release__note,
.nxg-release__limit {
	margin: 1rem 0 0;
	color: var(--nxg-muted);
	font-size: .9rem;
}

.nxg-signup__closed {
	margin: 0;
	font-size: 1rem;
}

/* --------------------------------------------------------- account */

.nxg-account section {
	margin: 0 0 2.5rem;
}

.nxg-account h2 {
	margin: 0 0 1rem;
	font-size: 1.25rem;
}

.nxg-account ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-account li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem .75rem;
	padding: .9rem 0;
	border-bottom: 1px solid var(--nxg-line);
}

.nxg-account time {
	color: var(--nxg-glow);
	font-size: .875rem;
	font-weight: 600;
	flex: 0 0 100%;
}

.nxg-account li > a {
	color: var(--nxg-heading);
	font-weight: 600;
	text-decoration: none;
}

.nxg-account__status {
	padding: .1rem .6rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 999px;
	font-size: .78rem;
	color: var(--nxg-muted);
}

.nxg-account__cancel {
	color: var(--nxg-bad);
	font-size: .85rem;
}

.nxg-account fieldset {
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	border: 1px solid var(--nxg-line);
	border-radius: var(--nxg-radius);
}

.nxg-account legend {
	padding: 0 .5rem;
	color: var(--nxg-heading);
	font-weight: 600;
}

.nxg-account fieldset p {
	margin: 0 0 .5rem;
}

.nxg-account fieldset label {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 40px;
	cursor: pointer;
}

.nxg-account input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--nxg-glow);
}

.nxg-account button {
	min-height: 48px;
	padding: .7rem 1.75rem;
	border: 0;
	border-radius: 8px;
	background: var(--nxg-glow);
	color: var(--nxg-on-glow);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.nxg-account__login a {
	color: var(--nxg-glow);
}

/* -------------------------------------------------------- releases */

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

.nxg-releases__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--nxg-line);
}

.nxg-releases__item a {
	color: var(--nxg-heading);
	font-weight: 600;
	text-decoration: none;
}

.nxg-releases__state,
.nxg-release__state {
	padding: .15rem .7rem;
	border-radius: 999px;
	background: var(--nxg-panel-soft);
	border: 1px solid var(--nxg-line-strong);
	font-size: .8rem;
	color: var(--nxg-muted);
}

.nxg-release[data-state="open"] .nxg-release__state {
	border-color: var(--nxg-ok);
	color: var(--nxg-ok);
}

.nxg-release[data-state="drawn"] .nxg-release__state {
	border-color: var(--nxg-glow);
	color: var(--nxg-glow);
}

.nxg-release__state {
	display: inline-block;
	margin: 0 0 1rem;
}

.nxg-release__closes,
.nxg-release__count,
.nxg-release__pickup {
	margin: 0 0 .6rem;
	font-size: .95rem;
}

.nxg-release__pickup {
	padding: .8rem 1rem;
	border-left: 3px solid var(--nxg-violet);
	border-radius: 0 8px 8px 0;
	background: rgba(86, 77, 202, .14);
}

/* Het controlestuk. Codes moeten leesbaar zijn, dus vaste breedte en
   ruime letterafstand. */
.nxg-release__proof {
	margin: 2rem 0 0;
	padding: 1.25rem;
	border: 1px solid var(--nxg-line);
	border-radius: var(--nxg-radius);
	background: rgba(3, 11, 21, .5);
}

.nxg-release__proof h3 {
	margin: 0 0 .75rem;
	font-size: 1.1rem;
}

.nxg-release__proof p {
	color: var(--nxg-muted);
	font-size: .9rem;
}

.nxg-release__proof dl {
	margin: 1rem 0;
}

.nxg-release__proof dt {
	margin-top: .75rem;
	color: var(--nxg-text);
	font-size: .85rem;
	font-weight: 600;
}

.nxg-release__proof dd {
	margin: .25rem 0 0;
}

.nxg-release__proof code {
	display: block;
	padding: .5rem .7rem;
	border-radius: 6px;
	background: rgba(255, 255, 255, .05);
	color: var(--nxg-glow);
	font-size: .8rem;
	letter-spacing: .04em;
	word-break: break-all;
}

.nxg-release__order {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: .4rem;
	margin: 1rem 0 0;
	counter-reset: nxg-rank;
}

.nxg-release__order li {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .6rem;
	border: 1px solid var(--nxg-line);
	border-radius: 6px;
	counter-increment: nxg-rank;
}

/* Het nummer erbij, zodat je je eigen plaats meteen ziet. */
.nxg-release__order li::before {
	content: counter(nxg-rank);
	min-width: 2ch;
	color: var(--nxg-muted);
	font-size: .75rem;
	text-align: right;
}

.nxg-release__order li code {
	background: none;
	padding: 0;
	color: var(--nxg-text);
	font-size: .85rem;
	letter-spacing: .05em;
}

/* Wie een stuk kreeg. Niet alleen kleur: er staat ook een vinkje. */
.nxg-release__order--won {
	border-color: var(--nxg-ok) !important;
	background: rgba(18, 209, 118, .10);
}

.nxg-release__order--won::after {
	content: "\2713";
	margin-left: auto;
	color: var(--nxg-ok);
	font-weight: 700;
}

.nxg-release__order--won code {
	color: var(--nxg-heading);
	font-weight: 600;
}

/* ------------------------------------------------------ openingsuren */

.nxg-hours__status {
	margin: 0 0 1.25rem;
	padding: 1rem 1.15rem;
	border-left: 3px solid var(--nxg-bad);
	border-radius: 0 var(--nxg-radius) var(--nxg-radius) 0;
	background: rgba(255, 69, 129, .10);
	font-size: 1.05rem;
}

.nxg-hours__status[data-open="1"] {
	border-left-color: var(--nxg-ok);
	background: rgba(18, 209, 118, .10);
}

.nxg-hours__status strong {
	color: var(--nxg-heading);
}

/* Een bolletje erbij, maar de tekst zegt het al. */
.nxg-hours__status::before {
	content: "";
	display: inline-block;
	width: .6rem;
	height: .6rem;
	margin-right: .55rem;
	border-radius: 50%;
	background: var(--nxg-bad);
	vertical-align: middle;
}

.nxg-hours__status[data-open="1"]::before {
	background: var(--nxg-ok);
}

/* De uren staan bewust in een lijst en niet in een tabel: themas leggen
   hun eigen raster op tabelcellen en dat wint altijd van ons. */
.nxg-hours,
.nxg-hours *,
.nxg-hours__list,
.nxg-hours__list * {
	box-sizing: border-box;
}

.nxg-hours ul.nxg-hours__list,
ul.nxg-hours__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--nxg-line);
	border-radius: 10px;
	overflow: hidden;
}

/* De selector is bewust zwaar. Themas zetten vaak een marge op elke li
   in de inhoud, en die marge duwt de rij van de rand weg. Dan stopt de
   gekleurde strook een paar pixels voor het kader, wat je ziet als een
   niet helemaal gevuld vakje. */
.nxg-hours ul.nxg-hours__list > li,
ul.nxg-hours__list > li,
.nxg-hours__list > li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	margin: 0;
	padding: .85rem 1.25rem;
	border: 0;
	border-bottom: 1px solid var(--nxg-line);
	list-style: none;
}

/* En geen opsommingsteken dat ruimte inneemt. */
.nxg-hours ul.nxg-hours__list > li::marker,
ul.nxg-hours__list > li::marker {
	content: "";
}

.nxg-hours ul.nxg-hours__list > li:last-child,
ul.nxg-hours__list > li:last-child,
.nxg-hours__list > li:last-child {
	border-bottom: 0;
}

.nxg-hours__day {
	color: var(--nxg-text);
	font-weight: 500;
}

/* Rechts uitgelijnd met cijfers van gelijke breedte, zodat alle dubbele
   punten onder elkaar staan. */
.nxg-hours__value {
	color: var(--nxg-heading);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* De strook van vandaag.
 *
 * Bewust met een pseudo-element en niet met een inzetschaduw of een rand:
 * die tellen op bij de breedte of steken buiten de afgeronde hoek van de
 * lijst uit, en dan zie je een randje naast het kader. */
.nxg-hours ul.nxg-hours__list > li.nxg-hours__row--today,
ul.nxg-hours__list > li.nxg-hours__row--today,
.nxg-hours__row--today {
	position: relative;
	margin: 0;
	background-color: color-mix( in srgb, var(--nxg-glow) 10%, transparent );
}

.nxg-hours__row--today::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: var(--nxg-glow);
}

.nxg-hours .nxg-hours__row--today .nxg-hours__day,
.nxg-hours .nxg-hours__row--today .nxg-hours__value,
.nxg-hours__row--today .nxg-hours__day,
.nxg-hours__row--today .nxg-hours__value {
	color: var(--nxg-glow);
}

/* De gesloten dagen blijven gedempt, ook wanneer een ouder een eigen
   tekstkleur oplegt. */
.nxg-hours .nxg-hours__closed,
.nxg-reserve__aside .nxg-hours__closed,
.nxg-home__card .nxg-hours__closed {
	color: var(--nxg-muted);
}

.nxg-hours__reason {
	display: block;
	margin-top: .1rem;
	font-weight: 400;
	white-space: normal;
}

.nxg-hours__closed {
	color: var(--nxg-muted);
	font-weight: 500;
}

.nxg-hours__reason {
	color: var(--nxg-muted);
	font-size: .85rem;
	font-weight: 400;
}

.nxg-hours__heading {
	margin: 2rem 0 .75rem;
	font-size: 1.05rem;
}

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

.nxg-hours__closures li {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem .75rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--nxg-line);
	font-size: .95rem;
}

.nxg-hours__closures time {
	flex: 1 1 10rem;
	color: var(--nxg-text);
}

.nxg-hours__closures span {
	color: var(--nxg-heading);
	font-weight: 600;
}

/* ---------------------------------------------------- reservaties */

.nxg-reserve select {
	appearance: none;
	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;
	padding-right: 2.5rem;
}

/* ------------------------------------------------------------ klein */

@media (max-width: 600px) {
	.nxg-calendar__event {
		padding: .9rem 1rem .9rem 1.2rem;
	}

	.nxg-calendar__event > a {
		font-size: 1rem;
	}

	.nxg-signup,
	.nxg-reserve,
	.nxg-release {
		padding: 1.1rem;
	}

	.nxg-release__order {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.nxg-legend__button,
	.nxg-signup__submit button,
	.nxg-reserve__submit button,
	.nxg-release__submit button {
		transition: none;
	}
}

/* Voor wie meer contrast heeft ingesteld. */
@media (prefers-contrast: more) {
	.nxg-calendar,
	.nxg-archive,
	.nxg-games,
	.nxg-game,
	.nxg-signup,
	.nxg-account,
	.nxg-release,
	.nxg-releases,
	.nxg-reserve,
	.nxg-hours {
		--nxg-text: #FFFFFF;
		--nxg-muted: #C3CEDB;
		--nxg-line: rgba(255, 255, 255, .35);
		--nxg-line-strong: rgba(255, 255, 255, .55);
	}
}

/* Afdrukken: de deelnemerslijst en de kalender moeten op papier kunnen. */
@media print {
	.nxg-calendar,
	.nxg-archive,
	.nxg-game,
	.nxg-release {
		--nxg-text: #000000;
		--nxg-muted: #444444;
		--nxg-heading: #000000;
		--nxg-panel: #FFFFFF;
		--nxg-line: #BBBBBB;
		--nxg-line-strong: #888888;
		--nxg-glow: #0B5F76;
	}

	.nxg-legend,
	.nxg-signup__form,
	.nxg-reserve__form,
	.nxg-calendar__subscribe {
		display: none;
	}
}

/* ========================================================== STARTPAGINA */

.nxg-home {
	--nxg-bg: var(--tg-body-bg, #030B15);
	--nxg-panel: #0B1D33;
	--nxg-line: rgba(164, 180, 195, .18);
	--nxg-line-strong: rgba(164, 180, 195, .34);
	--nxg-text: #DCE7F3;
	--nxg-muted: #8B99AC;
	--nxg-heading: #FFFFFF;
	--nxg-glow: var(--tg-primary-color, #00C4F4);
	--nxg-violet: var(--tg-secondary-color, #564DCA);
	--nxg-on-glow: #030B15;
	--nxg-ok: #12D176;
	--nxg-bad: #FF4581;
	--nxg-radius: 12px;

	color: var(--nxg-text);
	line-height: 1.65;

	background-color: var(--nxg-bg);

	/* Een zachte gloed bovenaan, zoals de rest van het thema. */
	background-image:
		radial-gradient( 60rem 30rem at 15% 0%, rgba( 86, 77, 202, .22 ), transparent 70% ),
		radial-gradient( 50rem 26rem at 85% 8%, rgba( 0, 196, 244, .14 ), transparent 70% );
	background-repeat: no-repeat;
}

/* Over de volle breedte, ook wanneer het thema de inhoud in een smalle
   kolom zet. Uit te zetten met [nexus_home breed="nee"]. */
.nxg-home--breed {
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	padding: 3.5rem max( 1.25rem, calc( 50vw - 37rem ) ) 4.5rem;
}

.nxg-home:not(.nxg-home--breed) {
	padding: 2.5rem 1.5rem 3.5rem;
	border-radius: var(--nxg-radius);
}

.nxg-home * {
	box-sizing: border-box;
}

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

/* ------------------------------------------------------------- hero */

.nxg-home__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: min( 66vh, 34rem );
	padding: 5rem 1.5rem;
	text-align: center;
}

.nxg-home__now {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 1.5rem;
	padding: .35rem 1.1rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.nxg-home__now::before {
	content: "";
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--nxg-bad);
}

.nxg-home__now[data-open="1"] {
	border-color: rgba(18, 209, 118, .5);
	color: var(--nxg-ok);
}

.nxg-home__now[data-open="1"]::before {
	background: var(--nxg-ok);
}

.nxg-home__title {
	margin: 0 0 1rem;
	color: var(--nxg-heading);
	font-size: clamp( 2.2rem, 6vw, 3.6rem );
	line-height: 1.1;
}

.nxg-home__intro {
	max-width: 46rem;
	margin: 0 auto 2rem;
	color: var(--nxg-text);
	font-size: 1.1rem;
}

.nxg-home__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin: 0;
}

.nxg-home__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: .7rem 1.9rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 999px;
	color: var(--nxg-text);
	font-weight: 700;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.nxg-home__button:hover {
	border-color: var(--nxg-glow);
	color: var(--nxg-heading);
}

/* Donkere tekst op cyaan. Wit haalt daar maar 2.06. */
.nxg-home__button--primary {
	border-color: var(--nxg-glow);
	background: var(--nxg-glow);
	color: var(--nxg-on-glow);
}

.nxg-home__button--primary:hover {
	color: var(--nxg-on-glow);
	filter: brightness( 1.1 );
}

/* ------------------------------------------------------------ blokken */

/* Elk blok loopt over de volle breedte en houdt zijn eigen inhoud in een
   kolom van vaste breedte. Zo kan een band met achtergrond doorlopen tot
   de rand terwijl de tekst netjes uitgelijnd blijft. */
.nxg-home__block {
	padding: 4.5rem 0;
}

.nxg-home__hero + .nxg-home__block {
	border-top: 0;
}

.nxg-home__block + .nxg-home__block {
	border-top: 1px solid rgba( 164, 180, 195, .08 );
}

/* Om de beurt een iets lichtere band, zodat je oog de blokken uit
   elkaar houdt zonder dat er lijnen nodig zijn. */
.nxg-home__block--band {
	background: linear-gradient( 180deg, rgba( 255, 255, 255, .022 ), rgba( 255, 255, 255, .045 ) );
	border-top-color: transparent;
}

.nxg-home__inner {
	max-width: 74rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.nxg-home--breed .nxg-home__block {
	margin-left: calc( -1 * max( 1.25rem, calc( 50vw - 37rem ) ) );
	margin-right: calc( -1 * max( 1.25rem, calc( 50vw - 37rem ) ) );
}

.nxg-home .nxg-home__h2 {
	margin: 0 0 1.25rem;
	color: var(--nxg-heading);
	font-size: clamp( 1.75rem, 3.4vw, 2.5rem );
	line-height: 1.15;
	letter-spacing: -.02em;
	text-transform: none;
}

/* Streepje in de accentkleur onder elke titel. */
.nxg-home__h2::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3px;
	margin-top: 1rem;
	border-radius: 3px;
	background: linear-gradient( 90deg, var(--nxg-glow), var(--nxg-violet) );
}

.nxg-home__lead {
	max-width: 46rem;
	margin: 0 0 2rem;
	color: var(--nxg-muted);
	font-size: 1.05rem;
}

.nxg-home__h2 + *:not(.nxg-home__lead) {
	margin-top: 2rem;
}

/* -------------------------------------------------------- deze week */

.nxg-home__week {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-home__event {
	display: flex;
	gap: 1rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--nxg-line);
	border-left: 3px solid var(--nxg-game-color, var(--nxg-glow));
	border-radius: var(--nxg-radius);
	background: var(--nxg-panel);
}

.nxg-home__event time {
	flex: 0 0 3.2rem;
	text-align: center;
	line-height: 1.2;
}

.nxg-home__day {
	display: block;
	color: var(--nxg-game-color, var(--nxg-glow));
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.nxg-home__date {
	display: block;
	color: var(--nxg-heading);
	font-size: 1.05rem;
	font-weight: 700;
}

.nxg-home__event-body a {
	color: var(--nxg-heading);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.nxg-home__event-body a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nxg-home__event-meta {
	margin: .3rem 0 0;
	color: var(--nxg-muted);
	font-size: .88rem;
}

.nxg-home__more {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1.25rem 0 0;
	font-size: .95rem;
}

.nxg-home__more a {
	color: var(--nxg-glow);
}

/* ----------------------------------------------------------- spellen */

.nxg-home__games {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-home__games a {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 52px;
	padding: .6rem 1.4rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 999px;
	background: var(--nxg-panel);
	color: var(--nxg-text);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease;
}

.nxg-home__games a::before {
	content: "";
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: var(--nxg-game-color, var(--nxg-glow));
}

.nxg-home__games a:hover {
	border-color: var(--nxg-game-color, var(--nxg-glow));
	color: var(--nxg-heading);
}

/* ---------------------------------------------------------- releases */

.nxg-home__releases {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 17rem, 1fr ) );
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-home__release {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-home__release-link {
	display: flex;
	gap: 1.15rem;
	height: 100%;
	padding: 1.35rem 1.4rem;
	overflow: hidden;
	border: 1px solid var(--nxg-line);
	border-radius: 14px;
	background:
		radial-gradient( 80% 130% at 100% 0%, color-mix( in srgb, var(--nxg-game-color, #00C4F4) 14%, transparent ), transparent 70% ),
		var(--nxg-panel);
	color: var(--nxg-text);
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease;
}

.nxg-home__release-link:hover {
	transform: translateY( -2px );
	border-color: var(--nxg-game-color, var(--nxg-glow));
	color: var(--nxg-text);
}

/* De foto klein en vierkant naast de tekst. Op de startpagina staat dit
   blok tussen andere blokken: het mag opvallen, niet domineren. */
.nxg-home__release-beeld {
	flex: 0 0 auto;
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	padding: .3rem;
	overflow: hidden;
	border: 1px solid var(--nxg-line);
	border-radius: 10px;
	background: rgba( 3, 11, 21, .55 );
}

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

.nxg-home__release-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) 32%, transparent ), transparent 70% ),
		rgba( 86, 77, 202, .28 );
}

.nxg-home__release-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .3rem;
	min-width: 0;
}

.nxg-home__release-spel {
	color: var(--nxg-game-color, var(--nxg-glow));
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.nxg-home__release-titel {
	color: var(--nxg-heading);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.nxg-home__release-meta {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin-top: .5rem;
}

.nxg-home__release-meta > span {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	color: var(--nxg-text);
	font-size: .82rem;
	white-space: nowrap;
}

.nxg-home__release-meta i {
	flex: 0 0 auto;
	color: var(--nxg-muted);
	font-size: .62rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-home__release-actie {
	margin-top: auto;
	padding-top: 1rem;
	color: var(--nxg-heading);
	font-size: .85rem;
	font-weight: 700;
}

.nxg-home__release-actie::after {
	content: " \2192";
	color: var(--nxg-game-color, var(--nxg-glow));
}

/* De teller onder de gegevens. Rechtsboven zwevend botste hij op de naam
   van het spel, en die twee stonden dan door elkaar. */
.nxg-home__release-teller {
	align-self: flex-start;
	margin-top: .6rem;
}

@media (prefers-reduced-motion: reduce) {
	.nxg-home__release-link {
		transition: none;
	}

	.nxg-home__release-link:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------- café */

.nxg-home__cafe {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 2.5rem;
	align-items: start;
}

.nxg-home .nxg-home__cafe-text {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.7;
}

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

.nxg-home__points li {
	position: relative;
	padding: .55rem 0 .55rem 1.9rem;
	border-bottom: 1px solid var(--nxg-line);
	color: var(--nxg-text);
}

.nxg-home__points li:first-child {
	padding-top: 0;
}

.nxg-home__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.1rem;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--nxg-glow);
}

.nxg-home__points li:first-child::before {
	top: .55rem;
}

.nxg-home__buttons--left {
	grid-column: 1 / -1;
	justify-content: flex-start;
	margin-top: .5rem;
}

@media (max-width: 720px) {
	.nxg-home__cafe {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* --------------------------------------------------------- praktisch */

.nxg-home__practical {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 1rem;
	align-items: stretch;
}

@media (max-width: 720px) {
	.nxg-home__practical {
		grid-template-columns: 1fr;
	}
}

.nxg-home__card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	border: 1px solid var(--nxg-line);
	border-radius: var(--nxg-radius);
	background: rgba( 3, 11, 21, .5 );
}

.nxg-home .nxg-home__card h3 {
	margin: 0 0 1rem;
	color: var(--nxg-muted);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Zelfde behandeling als naast het reservatieformulier: een eigen kader
   met rijen erin. Zonder dat kader zweefde de lijst los in de kaart. */
.nxg-home__card ul.nxg-hours__list > li,
.nxg-home__card .nxg-hours__list > li {
	padding: .7rem 1rem;
}

.nxg-home__card .nxg-hours__badge {
	display: none;
}

.nxg-home__address {
	margin: 0 0 1rem;
	color: var(--nxg-heading);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
}

.nxg-home__where a {
	color: var(--nxg-glow);
}

@media (max-width: 600px) {
	.nxg-home__hero {
		padding-top: 0;
		text-align: left;
	}

	.nxg-home__buttons {
		justify-content: flex-start;
	}

	.nxg-home__intro {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nxg-home__button,
	.nxg-home__games a {
		transition: none;
	}
}

/* ------------------------------- de pagina eromheen donker maken */

/* Het thema geeft de inhoudscontainer een witte achtergrond, die boven
   en onder de sectie doorschijnt als een streep. We maken de containers
   doorzichtig en zetten de kleur op de body zelf. */
body:has( .nxg-home ) {
	background-color: #030B15;
}

body:has( .nxg-home ) :where(
	#content,
	#primary,
	.site-content,
	.main-content,
	.content-area,
	.entry-content,
	.page-content,
	.elementor,
	.tg-page-area,
	.tg-page-content,
	#header-fixed-height,
	main,
	article
) {
	background-color: transparent;
}

/* Terugval voor browsers zonder :has(). */
body.nxg-donkere-pagina {
	background-color: #030B15;
}

body.nxg-donkere-pagina :where(
	#content,
	#primary,
	.site-content,
	.main-content,
	.content-area,
	.entry-content,
	.page-content,
	.elementor,
	.tg-page-area,
	.tg-page-content,
	#header-fixed-height,
	main,
	article
) {
	background-color: transparent;
}

/* Het thema zet vaak een marge onder de kop. Die geeft ook een streep. */
body.nxg-donkere-pagina .nxg-home {
	margin-top: 0;
}

/* -------------------------------------------- koppen en tekstkleur */

/* Het thema en Elementor zetten allebei een eigen kleur op koppen. Twee
   klassen diep is genoeg om daarvan te winnen, zonder !important. */
.nxg-home .nxg-home__title,
.nxg-home .nxg-home__section h2,
.nxg-home .nxg-home__event-body a,
.nxg-home .nxg-home__release a,
.nxg-home .nxg-home__address,
.nxg-home .nxg-hours__value,
.nxg-home .nxg-hours__status strong {
	color: var(--nxg-heading);
}

.nxg-home .nxg-home__title {
	/* Sommige thema's zetten hier hoofdletters of kapitalen op. */
	text-transform: none;
	letter-spacing: -.01em;
}

.nxg-home .nxg-home__intro,
.nxg-home .nxg-home__cafe p,
.nxg-home .nxg-hours__day {
	color: var(--nxg-text);
}

.nxg-home .nxg-home__lead,
.nxg-home .nxg-home__event-meta,
.nxg-home .nxg-hours__closed,
.nxg-home .nxg-hours__reason {
	color: var(--nxg-muted);
}

.nxg-home .nxg-home__more a,
.nxg-home .nxg-home__where a {
	color: var(--nxg-glow);
}

.nxg-home .nxg-home__button--primary {
	color: var(--nxg-on-glow);
}

/* De lijst in het praktische blok staat al op een donkere achtergrond. */
.nxg-home .nxg-hours__list > li {
	border-bottom-color: var(--nxg-line);
}

/* De kaart eromheen heeft al een kader, dus de lijst mag daarbinnen wat
   rustiger staan. */
.nxg-home__card .nxg-hours__list {
	border-color: var(--nxg-line);
	background: rgba( 255, 255, 255, .02 );
}

/* ------------------------------------------------ ademruimte boven */

/* Het logo zweeft over de pagina, dus de kop mag niet te hoog beginnen. */
.nxg-home--breed {
	padding-top: 4.5rem;
}

@media (max-width: 991px) {
	.nxg-home--breed {
		padding-top: 3rem;
	}
}

/* ------------------------------------------------ kop met achtergrond */

.nxg-home__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--nxg-radius);
	padding: 5rem 1.5rem 4rem;
	margin-bottom: 1rem;
}

.nxg-home__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--nxg-hero);
	background-size: cover;
	background-position: center;
}

/* Een donkere sluier eroverheen, anders is de tekst op een foto niet
   leesbaar. Dit is het verschil tussen mooi en onleesbaar. */
.nxg-home__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient( 180deg, rgba( 3, 11, 21, .55 ) 0%, rgba( 3, 11, 21, .82 ) 100% ),
		radial-gradient( 40rem 20rem at 50% 40%, rgba( 3, 11, 21, .45 ), transparent 70% );
}

.nxg-home--breed .nxg-home__hero {
	margin-left: calc( -1 * max( 1.25rem, calc( 50vw - 37rem ) ) );
	margin-right: calc( -1 * max( 1.25rem, calc( 50vw - 37rem ) ) );
	margin-top: -4.5rem;
	border-radius: 0;
	padding-top: 8rem;
}

/* Bij een echte foto mag de sluier iets sterker, want foto's van een
   café zijn zelden egaal. */
.nxg-home__hero--foto::after {
	background:
		linear-gradient( 180deg, rgba( 3, 11, 21, .62 ) 0%, rgba( 3, 11, 21, .88 ) 100% );
}

/* --------------------------------------------------------- sfeerfoto's */

.nxg-home__gallery {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-home__gallery li {
	margin: 0;
	overflow: hidden;
	border-radius: var(--nxg-radius);
	border: 1px solid var(--nxg-line);
	background: var(--nxg-panel);
}

.nxg-home__gallery img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* De eerste foto krijgt twee kolommen, dat oogt minder als een raster
   en meer als een pagina. */
@media (min-width: 720px) {
	.nxg-home__gallery li:first-child {
		grid-column: span 2;
	}

	.nxg-home__gallery li:first-child img {
		aspect-ratio: 16 / 9;
	}
}

/* --------------------------------------------------------------- kaart */

.nxg-map {
	margin: 1rem 0 0;
	overflow: hidden;
	border: 1px solid var(--nxg-line);
	border-radius: var(--nxg-radius);
	background: var(--nxg-panel);
}

.nxg-map__placeholder {
	padding: 2.5rem 1.5rem;
	text-align: center;
	background-image:
		radial-gradient( 30rem 14rem at 30% 20%, rgba( 86, 77, 202, .22 ), transparent 70% ),
		radial-gradient( 26rem 12rem at 75% 80%, rgba( 0, 196, 244, .16 ), transparent 70% );
}

.nxg-map__address {
	margin: 0 0 1.25rem;
	color: var(--nxg-heading);
	font-size: 1.1rem;
	font-weight: 600;
}

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

.nxg-map iframe {
	display: block;
	width: 100%;
	height: 22rem;
	border: 0;
}

/* --------------------------------------------- beheerscherm foto's */

.nxg-media__preview img,
.nxg-media__grid img {
	max-width: 220px;
	height: auto;
	border-radius: 6px;
}

.nxg-media__grid {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .5rem 0;
}

.nxg-media__grid img {
	max-width: 110px;
}

/* ============================================== eigen paginasjablonen */

.nxg-page {
	--nxg-bg: #030B15;
	--nxg-panel: #0B1D33;
	--nxg-line: rgba(164, 180, 195, .18);
	--nxg-line-strong: rgba(164, 180, 195, .34);
	--nxg-text: #DCE7F3;
	--nxg-muted: #8B99AC;
	--nxg-heading: #FFFFFF;
	--nxg-glow: var(--tg-primary-color, #00C4F4);
	--nxg-violet: var(--tg-secondary-color, #564DCA);
	--nxg-on-glow: #030B15;
	--nxg-ok: #12D176;
	--nxg-bad: #FF4581;
	--nxg-radius: 12px;

	color: var(--nxg-text);
	line-height: 1.65;
}

.nxg-page * {
	box-sizing: border-box;
}

.nxg-page :focus-visible {
	outline: 3px solid var(--nxg-glow);
	outline-offset: 3px;
}

.nxg-page__inner {
	max-width: 74rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.nxg-page__inner--smal {
	max-width: 56rem;
}

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

.nxg-page__head {
	position: relative;
	padding: 5rem 0 3.5rem;
	background:
		radial-gradient( 55rem 26rem at 12% 0%, rgba( 86, 77, 202, .26 ), transparent 70% ),
		radial-gradient( 45rem 22rem at 88% 20%, rgba( 0, 196, 244, .16 ), transparent 70% );
	border-bottom: 1px solid var(--nxg-line);
}

/* Geen streep meer over de volle breedte. Die eindigde vlak onder de
   gescheurde rand van het thema, en dan zie je twee randen op elkaar. De
   kleur van het spel zit nu in de kicker en in het streepje eronder. */
.nxg-page__kicker::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: .7rem;
	border-radius: 3px;
	background: var(--nxg-game-color, linear-gradient( 90deg, var(--nxg-glow), var(--nxg-violet) ));
}

/* Wanneer het thema de titel al toont, hoeft onze kop enkel de inleiding
   en de kerngegevens te dragen. Krap aansluiten op de banner erboven,
   want anders staat er een leeg vlak tussen. */
.nxg-page__head--slank {
	padding-top: 2rem;
	padding-bottom: 2rem;
	background: none;
	border-bottom: 0;
}

.nxg-page__head--slank + .nxg-page__body {
	padding-top: 0;
}

.nxg-page__kicker {
	margin: 0 0 .75rem;
	color: var(--nxg-game-color, var(--nxg-glow));
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.nxg-page .nxg-page__title {
	margin: 0 0 1rem;
	color: var(--nxg-heading);
	font-size: clamp( 2rem, 5vw, 3.2rem );
	line-height: 1.1;
	letter-spacing: -.02em;
	text-transform: none;
}

.nxg-page .nxg-page__lead {
	max-width: 46rem;
	margin: 0;
	color: var(--nxg-muted);
	font-size: 1.05rem;
}

.nxg-page__cancelled {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: .35rem 1rem;
	border-radius: 999px;
	background: var(--nxg-bad);
	color: #FFFFFF;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* -------------------------------------------------------- kerngegevens */

.nxg-page__facts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
	gap: 1px;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--nxg-line);
	border-radius: var(--nxg-radius);
	overflow: hidden;
	background: var(--nxg-line);
}

.nxg-page__facts li {
	margin: 0;
	padding: 1.25rem 1.4rem;
	background: rgba( 3, 11, 21, .72 );
}

.nxg-page__facts span {
	display: block;
	margin-bottom: .35rem;
	color: var(--nxg-muted);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-page__facts strong {
	color: var(--nxg-heading);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.35;
}

/* ------------------------------------------------------------ inhoud */

.nxg-page__body {
	padding: 3.5rem 0 5rem;
}

.nxg-page .nxg-page__h2 {
	margin: 0 0 1.5rem;
	color: var(--nxg-heading);
	font-size: clamp( 1.4rem, 3vw, 1.9rem );
	line-height: 1.2;
	text-transform: none;
}

.nxg-page__content {
	font-size: 1.05rem;
}

.nxg-page__content p {
	color: var(--nxg-text);
}

.nxg-page__content h2,
.nxg-page__content h3 {
	color: var(--nxg-heading);
}

.nxg-page__content a {
	color: var(--nxg-glow);
}

.nxg-page__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--nxg-radius);
}

/* ------------------------------ de kop van een detailpagina, verfijnd */

.nxg-page__labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1rem;
}

/* De categorie als pil in de kleur van het spel, en aanklikbaar naar de
   spelpagina. Dat maakt er meteen navigatie van in plaats van decoratie. */
.nxg-page__spel {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .3rem 1rem;
	border: 1px solid var(--nxg-game-color, var(--nxg-glow));
	border-radius: 999px;
	color: var(--nxg-game-color, var(--nxg-glow));
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .15s ease, color .15s ease;
}

.nxg-page__spel::before {
	content: "";
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: currentColor;
}

.nxg-page__spel:hover {
	background: var(--nxg-game-color, var(--nxg-glow));
	color: #04121C;
}

.nxg-page__soort {
	color: var(--nxg-muted);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Een producttitel is geen paginatitel. Kleiner, want eronder staat het
   verhaal en dat moet de aandacht krijgen. */
.nxg-page .nxg-page__title--product {
	max-width: 20ch;
	margin-bottom: 0;
	font-size: clamp( 1.7rem, 3.4vw, 2.6rem );
	line-height: 1.05;
	letter-spacing: -.025em;
}

/* Zonder streepje onder de kicker, dat zat er dubbel met de pil erboven. */
.nxg-page--release .nxg-page__kicker::after {
	content: none;
}

@media (prefers-reduced-motion: reduce) {
	.nxg-page__spel {
		transition: none;
	}
}


/* ============================================ de kop van een release */

.nxg-hero-release {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 16rem );
	gap: 2.5rem;
	align-items: center;
	margin: 0 0 2.5rem;
	padding: 2.25rem;
	overflow: hidden;
	border: 1px solid var(--nxg-line);
	border-radius: 18px;
	background:
		radial-gradient( 70% 120% at 85% 10%, color-mix( in srgb, var(--nxg-game-color, #00C4F4) 22%, transparent ), transparent 70% ),
		radial-gradient( 60% 100% at 10% 90%, rgba( 86, 77, 202, .22 ), transparent 70% ),
		var(--nxg-panel);
}

/* Een streep in de kleur van het spel bovenaan. Genoeg om de kaart te
   verankeren zonder er een kader van te maken. */
.nxg-hero-release::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient( 90deg, var(--nxg-game-color, var(--nxg-glow)), transparent 70% );
}

@media (max-width: 820px) {
	.nxg-hero-release {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		padding: 1.5rem;
	}
}

.nxg-hero-release__labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1rem;
}

.nxg-hero-release__staat {
	padding: .3rem 1rem;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .08 );
	color: var(--nxg-muted);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-hero-release__staat[data-state="open"] {
	background: var(--nxg-ok);
	color: #04120A;
}

.nxg-hero-release__staat[data-state="drawn"] {
	background: var(--nxg-glow);
	color: var(--nxg-on-glow);
}

.nxg-hero-release__spel {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--nxg-game-color, var(--nxg-glow));
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-decoration: none;
	text-transform: uppercase;
}

.nxg-hero-release__spel::before {
	content: "";
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: currentColor;
}

.nxg-hero-release__spel:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.nxg-page .nxg-hero-release__titel {
	max-width: 18ch;
	margin: 0 0 .75rem;
	color: var(--nxg-heading);
	font-size: clamp( 1.8rem, 3.6vw, 2.7rem );
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -.03em;
	text-transform: none;
}

.nxg-hero-release__intro {
	max-width: 42ch;
	margin: 0 0 1.5rem;
	color: var(--nxg-text);
	font-size: 1.02rem;
	line-height: 1.6;
}

/* Losse cijfers zonder kader. Een tabel in een kaart in een kaart wordt
   te veel doos. */
.nxg-hero-release__cijfers {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin: 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--nxg-line);
}

.nxg-hero-release__cijfers dt {
	margin: 0 0 .2rem;
	color: var(--nxg-muted);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-hero-release__cijfers dd {
	margin: 0;
	color: var(--nxg-heading);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

.nxg-hero-release__actie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 1.5rem 0 0;
}

.nxg-hero-release__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: .7rem 2rem;
	border-radius: 999px;
	background: var(--nxg-glow);
	color: var(--nxg-on-glow);
	font-size: 1rem;
	font-weight: 800;
	text-decoration: none;
	transition: filter .15s ease;
}

.nxg-hero-release__knop:hover {
	color: var(--nxg-on-glow);
	filter: brightness( 1.12 );
}

.nxg-hero-release__actie span {
	color: var(--nxg-muted);
	font-size: .88rem;
}

.nxg-hero-release__beeld {
	position: relative;
	margin: 0;
}

/* Een gloed in de kleur van het spel in plaats van een kader. Zo zweeft
   het product in plaats van in een doos te zitten. */
.nxg-hero-release__beeld img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow:
		0 18px 40px rgba( 0, 0, 0, .45 ),
		0 0 0 1px rgba( 255, 255, 255, .06 ),
		0 0 60px -10px color-mix( in srgb, var(--nxg-game-color, #00C4F4) 55%, transparent );
}

@media (max-width: 820px) {
	.nxg-hero-release__beeld {
		max-width: 13rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nxg-hero-release__knop {
		transition: none;
	}
}

/* ====================================================== maandkalender */

.nxg-month {
	margin: 0 0 2.5rem;
}

.nxg-month__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1rem;
}

.nxg-calendar .nxg-month__title {
	margin: 0;
	color: var(--nxg-heading);
	font-size: clamp( 1.2rem, 3vw, 1.6rem );
	line-height: 1.2;
	text-align: center;
	text-transform: capitalize;
}

.nxg-month__nav {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 44px;
	padding: .35rem .9rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 999px;
	color: var(--nxg-text);
	font-size: .85rem;
	text-decoration: none;
	text-transform: capitalize;
	white-space: nowrap;
}

.nxg-month__nav:hover {
	border-color: var(--nxg-glow);
	color: var(--nxg-heading);
}

.nxg-month__weekdays,
.nxg-month__days {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	gap: 4px;
}

.nxg-month__weekdays {
	margin-bottom: 4px;
}

.nxg-month__weekdays span {
	padding: .4rem 0;
	color: var(--nxg-muted);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
}

.nxg-month__day {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 7rem;
	padding: .45rem;
	border: 1px solid var(--nxg-line);
	border-radius: 8px;
	background: rgba( 11, 29, 51, .55 );
}

.nxg-month__day--buiten {
	opacity: .35;
}

/* Gesloten dagen horen bij het ritme van de zaak, niet bij de kalender. */
.nxg-month__day--dicht {
	background: rgba( 3, 11, 21, .5 );
	border-style: dashed;
}

.nxg-month__day--vandaag {
	border-color: var(--nxg-glow);
	box-shadow: inset 0 0 0 1px var(--nxg-glow);
}

.nxg-month__number {
	color: var(--nxg-muted);
	font-size: .8rem;
	font-weight: 700;
	text-align: right;
}

.nxg-month__day--vandaag .nxg-month__number,
.nxg-month__day--vol .nxg-month__number {
	color: var(--nxg-heading);
}

.nxg-month__closed {
	margin-top: auto;
	color: var(--nxg-muted);
	font-size: .7rem;
	letter-spacing: .04em;
	opacity: .65;
}

.nxg-month__event {
	display: block;
	padding: .3rem .45rem;
	border-radius: 5px;
	border-left: 3px solid var(--nxg-game-color, var(--nxg-glow));
	background: rgba( 255, 255, 255, .06 );
	color: var(--nxg-text);
	font-size: .74rem;
	line-height: 1.3;
	text-decoration: none;
}

.nxg-month__event:hover {
	background: rgba( 255, 255, 255, .12 );
	color: var(--nxg-heading);
}

.nxg-month__time {
	display: block;
	color: var(--nxg-game-color, var(--nxg-glow));
	font-weight: 700;
}

.nxg-month__name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nxg-month__tag {
	display: inline-block;
	margin-top: .2rem;
	padding: .05rem .4rem;
	border-radius: 3px;
	background: var(--nxg-bad);
	color: #FFFFFF;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .03em;
}

.nxg-month__event--af {
	opacity: .55;
}

.nxg-month__event--af .nxg-month__name {
	text-decoration: line-through;
}

.nxg-calendar .nxg-calendar__next {
	margin: 2.5rem 0 1rem;
	color: var(--nxg-muted);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Op een telefoon is een raster van zeven kolommen onleesbaar. Dan tonen
   we alleen de dagen met iets erin, als een strook. */
@media (max-width: 720px) {
	.nxg-month__weekdays {
		display: none;
	}

	.nxg-month__days {
		grid-template-columns: 1fr;
		gap: .4rem;
	}

	.nxg-month__day {
		flex-direction: row;
		align-items: flex-start;
		gap: .75rem;
		min-height: 0;
		padding: .6rem .75rem;
	}

	.nxg-month__day:not(.nxg-month__day--vol) {
		display: none;
	}

	.nxg-month__number {
		flex: 0 0 2.5rem;
		text-align: left;
		font-size: 1rem;
	}

	.nxg-month__day > .nxg-month__event {
		flex: 1 1 auto;
	}

	.nxg-month__name {
		white-space: normal;
	}
}

/* -------------------------------------------- welkom in de kalender */

.nxg-calendar__welkom {
	margin: 0 0 1.5rem;
	padding: 1rem 1.2rem;
	border-left: 3px solid var(--nxg-glow);
	border-radius: 0 10px 10px 0;
	background: rgba( 0, 196, 244, .09 );
}

.nxg-calendar__hallo {
	margin: 0;
	color: var(--nxg-heading);
	font-weight: 600;
}

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

.nxg-calendar__uitleg a {
	color: var(--nxg-glow);
}

.nxg-month__event[hidden] {
	display: none;
}

/* ====================================================== datumkalender */

/* De keuzelijst blijft in de code staan voor schermlezers, maar wordt
   niet meer getoond zodra de kalender er is. */
.nxg-verborgen {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
}

.nxg-datumkiezer {
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	margin-top: .35rem;
	padding: .9rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 10px;
	background: rgba( 3, 11, 21, .55 );
}

.nxg-datumkiezer * {
	box-sizing: border-box;
	min-width: 0;
}

.nxg-datumkiezer__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .75rem;
}

.nxg-datumkiezer__titel {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--nxg-heading);
	font-size: .95rem;
	font-weight: 700;
	text-align: center;
	text-transform: capitalize;
}

.nxg-datumkiezer__nav {
	flex: 0 0 auto;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 8px;
	background: none;
	color: var(--nxg-text);
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.nxg-datumkiezer__nav:hover:not(:disabled) {
	border-color: var(--nxg-glow);
	color: var(--nxg-heading);
}

.nxg-datumkiezer__nav:disabled {
	opacity: .3;
	cursor: default;
}

/* minmax( 0, 1fr ) en niet 1fr. Een kolom van 1fr mag krimpen tot de
   inhoud maar niet daaronder, en bij zeven kolommen op een smal scherm
   loopt het raster dan buiten beeld. */
.nxg-datumkiezer__dagen,
.nxg-datumkiezer__raster {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	gap: 3px;
	width: 100%;
}

.nxg-datumkiezer__dagen {
	margin-bottom: 3px;
}

.nxg-datumkiezer__dagen span {
	padding: .25rem 0;
	color: var(--nxg-muted);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
}

.nxg-datumkiezer__dag {
	aspect-ratio: 1;
	width: 100%;
	min-width: 0;
	min-height: 2.25rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 8px;
	background: rgba( 255, 255, 255, .04 );
	color: var(--nxg-text);
	font: inherit;
	font-size: .92rem;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.nxg-datumkiezer__dag:hover:not(:disabled) {
	border-color: var(--nxg-glow);
	color: var(--nxg-heading);
}

/* Gesloten dagen blijven staan maar zijn niet aanklikbaar. Weglaten zou
   verwarren: dan mis je gewoon een dag in de maand. */
.nxg-datumkiezer__dag:disabled {
	background: none;
	color: var(--nxg-muted);
	opacity: .35;
	cursor: default;
}

.nxg-datumkiezer__dag--gekozen {
	border-color: var(--nxg-glow);
	background: var(--nxg-glow);
	color: var(--nxg-on-glow);
	font-weight: 700;
}

@media (max-width: 480px) {
	.nxg-datumkiezer {
		padding: .6rem;
	}

	.nxg-datumkiezer__dagen,
	.nxg-datumkiezer__raster {
		gap: 2px;
	}

	.nxg-datumkiezer__dag {
		font-size: .85rem;
	}

	.nxg-datumkiezer__dagen span {
		font-size: .62rem;
		letter-spacing: 0;
	}
}

/* ------------------------------------------- keuzelijsten in het thema */

.nxg-signup select,
.nxg-reserve select,
.nxg-release 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-signup select option,
.nxg-reserve select option,
.nxg-release select option {
	background-color: #0B1D33;
	color: #DCE7F3;
}

.nxg-signup select option:checked,
.nxg-reserve select option:checked,
.nxg-release select option:checked {
	background-color: #123255;
}

/* ================================================= tafel reserveren */

.nxg-reserve-blok {
	--nxg-bg: #030B15;
	--nxg-panel: #0B1D33;
	--nxg-line: rgba(164, 180, 195, .18);
	--nxg-line-strong: rgba(164, 180, 195, .34);
	--nxg-text: #DCE7F3;
	--nxg-muted: #8B99AC;
	--nxg-heading: #FFFFFF;
	--nxg-glow: var(--tg-primary-color, #00C4F4);
	--nxg-violet: var(--tg-secondary-color, #564DCA);
	--nxg-on-glow: #030B15;
	--nxg-radius: 12px;

	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 1.5rem;
	align-items: start;
	color: var(--nxg-text);
}

@media (max-width: 860px) {
	.nxg-reserve-blok {
		grid-template-columns: 1fr;
	}
}

.nxg-reserve-blok .nxg-reserve {
	margin: 0;
	padding: 2rem;
	min-width: 0;
}

@media (max-width: 600px) {
	.nxg-reserve-blok .nxg-reserve,
	.nxg-reserve__aside {
		padding: 1.15rem;
	}
}

.nxg-reserve-blok .nxg-reserve__title {
	margin: 0 0 1.5rem;
	color: var(--nxg-heading);
	font-size: 1.4rem;
	line-height: 1.2;
	text-transform: none;
}

.nxg-reserve-blok .nxg-reserve__sub {
	margin: 2rem 0 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--nxg-line);
	color: var(--nxg-muted);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Twee velden naast elkaar waar dat logisch is. Een formulier van acht
   volle regels onder elkaar leest als een belastingaangifte. */
.nxg-reserve__rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

@media (max-width: 520px) {
	.nxg-reserve__rij {
		grid-template-columns: 1fr;
	}
}

.nxg-reserve__rij > * {
	min-width: 0;
	max-width: 100%;
}

.nxg-reserve__aside {
	padding: 2rem;
	border: 1px solid var(--nxg-line);
	border-radius: var(--nxg-radius);
	background: rgba( 3, 11, 21, .55 );
}

.nxg-reserve__aside h3 {
	margin: 0 0 1rem;
	color: var(--nxg-muted);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-reserve__aside h3 + ul + h3 {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--nxg-line);
}

/* Bewust alleen deze lijst. Zonder de eigen naam kreeg de urenlijst
   eronder ook overal bolletjes. */
.nxg-reserve__aside ul.nxg-reserve__punten {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-reserve__punten > li {
	position: relative;
	margin-bottom: .85rem;
	padding-left: 1.6rem;
	color: var(--nxg-text);
	font-size: .95rem;
	line-height: 1.55;
	list-style: none;
}

.nxg-reserve__punten > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--nxg-glow);
}

.nxg-reserve__aside ul.nxg-hours__list > li,
.nxg-reserve__aside .nxg-hours__list > li {
	padding: .7rem 1rem;
	font-size: .92rem;
}

.nxg-reserve__aside .nxg-hours__badge {
	display: none;
}

/* ================================================ releases als raster */

.nxg-releases__filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.nxg-releases__filters li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-releases__filter {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	padding: .35rem 1.1rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 999px;
	color: var(--nxg-text);
	font-size: .9rem;
	text-decoration: none;
}

.nxg-releases__filter[style*="--nxg-game-color"]::before {
	content: "";
	width: .65rem;
	height: .65rem;
	border-radius: 50%;
	background: var(--nxg-game-color, var(--nxg-glow));
}

.nxg-releases__filter:hover {
	border-color: var(--nxg-game-color, var(--nxg-glow));
	color: var(--nxg-heading);
}

.nxg-releases__filter[aria-current="true"] {
	border-color: var(--nxg-game-color, var(--nxg-glow));
	background: var(--nxg-game-color, var(--nxg-glow));
	color: var(--nxg-on-glow);
	font-weight: 700;
}

.nxg-releases__filter[aria-current="true"]::before {
	background: var(--nxg-on-glow);
}

.nxg-releases__raster {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 13rem, 1fr ) );
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-release-kaart {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-release-kaart__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--nxg-line);
	border-radius: 14px;
	background: var(--nxg-panel);
	color: var(--nxg-text);
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.nxg-release-kaart__link:hover {
	transform: translateY( -3px );
	border-color: var(--nxg-game-color, var(--nxg-glow));
	box-shadow: 0 12px 28px rgba( 0, 0, 0, .35 );
}

/* Laag en breed, met het product volledig in beeld. Met cover werd de
   doos aangesneden en zag je van een boosterbox alleen het midden. */
.nxg-release-kaart__beeld {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	padding: .8rem;
	overflow: hidden;
	background: #0A1120;
}

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

/* Zonder foto een vlak in de kleur van het spel, zodat de kaarten even
   hoog blijven en het raster niet rafelt. */
.nxg-release-kaart__leeg {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient( 60% 80% at 30% 20%, color-mix( in srgb, var(--nxg-game-color, #00C4F4) 32%, transparent ), transparent 70% ),
		radial-gradient( 70% 90% at 80% 90%, rgba( 86, 77, 202, .35 ), transparent 70% ),
		#0A1120;
}

.nxg-release-kaart__staat {
	position: absolute;
	top: .55rem;
	left: .55rem;
	padding: .2rem .7rem;
	border-radius: 999px;
	background: rgba( 3, 11, 21, .78 );
	color: var(--nxg-muted);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.nxg-release-kaart[data-state="open"] .nxg-release-kaart__staat {
	background: var(--nxg-ok);
	color: #04120A;
}

.nxg-release-kaart[data-state="drawn"] .nxg-release-kaart__staat {
	background: var(--nxg-glow);
	color: var(--nxg-on-glow);
}

.nxg-release-kaart__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .3rem;
	padding: .95rem 1.05rem 1.05rem;
}

.nxg-release-kaart__spel {
	color: var(--nxg-game-color, var(--nxg-glow));
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.nxg-release-kaart__titel {
	color: var(--nxg-heading);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Elk gegeven op een eigen regel, met het label klein ervoor. Zo breekt
   een datum nooit halverwege af. */
.nxg-release-kaart__meta {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	margin-top: .2rem;
}

.nxg-release-kaart__meta > span {
	display: flex;
	align-items: baseline;
	gap: .45rem;
	color: var(--nxg-text);
	font-size: .85rem;
	line-height: 1.4;
	white-space: nowrap;
}

.nxg-release-kaart__meta i {
	flex: 0 0 auto;
	color: var(--nxg-muted);
	font-size: .68rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* De actie onderaan vastgezet, zodat hij bij elke kaart op dezelfde
   hoogte staat ook al is de ene titel langer dan de andere. */
.nxg-release-kaart__actie {
	margin-top: auto;
	padding-top: .85rem;
	color: var(--nxg-heading);
	font-size: .9rem;
	font-weight: 700;
}

.nxg-release-kaart__actie::after {
	content: " \2192";
	color: var(--nxg-game-color, var(--nxg-glow));
}

.nxg-release-kaart[data-state="closed"] .nxg-release-kaart__link,
.nxg-release-kaart[data-state="drawn"] .nxg-release-kaart__link {
	opacity: .82;
}

@media (prefers-reduced-motion: reduce) {
	.nxg-release-kaart__link {
		transition: none;
	}

	.nxg-release-kaart__link:hover {
		transform: none;
	}
}

/* ============================================== hoe de verdeling werkt */

.nxg-uitleg {
	margin: 0 0 2.5rem;
	padding: 0 0 2.5rem;
	border-bottom: 1px solid var(--nxg-line);
}

.nxg-uitleg .nxg-uitleg__titel {
	margin: 0 0 .75rem;
	color: var(--nxg-heading);
	font-size: clamp( 1.4rem, 3vw, 1.9rem );
	line-height: 1.2;
	text-transform: none;
}

.nxg-uitleg__lead {
	max-width: 46rem;
	margin: 0 0 2rem;
	color: var(--nxg-muted);
	font-size: 1.02rem;
}

/* Vier stappen horen op één rij. Met auto-fit worden dat er drie en dan
   één, en die eenzame vierde leest als een bijzaak. */
.nxg-uitleg__stappen {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1100px) {
	.nxg-uitleg__stappen {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media (max-width: 620px) {
	.nxg-uitleg__stappen {
		grid-template-columns: 1fr;
	}
}

.nxg-uitleg__stap {
	position: relative;
	margin: 0;
	padding: 1.5rem 1.4rem 1.4rem;
	border: 1px solid var(--nxg-line);
	border-radius: var(--nxg-radius);
	background: var(--nxg-panel);
	list-style: none;
}

/* Het nummer groot en gedempt op de achtergrond. Het geeft de volgorde
   aan zonder de tekst te verdringen. */
.nxg-uitleg__nummer {
	position: absolute;
	top: .4rem;
	right: .9rem;
	color: var(--nxg-glow);
	font-size: 3.2rem;
	font-weight: 800;
	line-height: 1;
	opacity: .16;
}

.nxg-uitleg .nxg-uitleg__stap h3 {
	position: relative;
	margin: 0 0 .5rem;
	padding-right: 2rem;
	color: var(--nxg-heading);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
}

.nxg-uitleg .nxg-uitleg__stap p {
	margin: 0;
	color: var(--nxg-muted);
	font-size: .92rem;
	line-height: 1.6;
}

.nxg-uitleg__stap::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 1.4rem;
	width: 2.5rem;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient( 90deg, var(--nxg-glow), var(--nxg-violet) );
}

.nxg-uitleg__slot {
	margin: 1.5rem 0 0;
	padding: 1rem 1.2rem;
	border-left: 3px solid var(--nxg-violet);
	border-radius: 0 var(--nxg-radius) var(--nxg-radius) 0;
	background: rgba( 86, 77, 202, .12 );
	color: var(--nxg-text);
	font-size: .95rem;
}

/* ===================================================== sociale kanalen */

.nxg-social {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.nxg-social__item a {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	height: 100%;
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--nxg-line);
	border-radius: var(--nxg-radius);
	background: var(--nxg-panel);
	color: var(--nxg-text);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

/* De huiskleur komt pas bij hover naar voren. Drie volvlakken in blauw,
   paars en roze naast elkaar vechten met de rest van de pagina. */
.nxg-social__item a:hover {
	border-color: var(--nxg-merk, var(--nxg-glow));
	background: rgba( 255, 255, 255, .05 );
}

.nxg-social__icoon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: color-mix( in srgb, var(--nxg-merk, #00C4F4) 18%, transparent );
	color: var(--nxg-merk, var(--nxg-glow));
}

.nxg-social__icoon svg {
	width: 1.4rem;
	height: 1.4rem;
	display: block;
}

.nxg-social__tekst {
	display: block;
	min-width: 0;
}

.nxg-social__tekst strong {
	display: block;
	margin-bottom: .2rem;
	color: var(--nxg-heading);
	font-size: 1.05rem;
	font-weight: 700;
}

.nxg-social__tekst span {
	display: block;
	color: var(--nxg-muted);
	font-size: .9rem;
	line-height: 1.5;
}

.nxg-social__item a:focus-visible {
	outline: 3px solid var(--nxg-glow);
	outline-offset: 3px;
}

/* ------------------------------------------- de adreskaart op de home */

.nxg-home__contact {
	margin: 1.25rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--nxg-line);
	list-style: none;
}

.nxg-home__contact li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem .75rem;
	margin: 0 0 .6rem;
	padding: 0;
	list-style: none;
}

.nxg-home__contact li:last-child {
	margin-bottom: 0;
}

.nxg-home__contact span {
	flex: 0 0 4rem;
	color: var(--nxg-muted);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-home__contact a {
	color: var(--nxg-glow);
	font-weight: 600;
	word-break: break-word;
}

.nxg-home__onderweg {
	margin: 1.25rem 0 0;
	color: var(--nxg-muted);
	font-size: .92rem;
	line-height: 1.6;
}

/* De routeknop onderaan, zodat de twee kaarten even hoog blijven. */
.nxg-home__route {
	margin-top: auto;
	padding-top: 1.5rem;
}

.nxg-home__route .nxg-home__button {
	min-height: 46px;
	padding: .55rem 1.4rem;
	font-size: .95rem;
}

.nxg-home__card ul.nxg-hours__list > li,
.nxg-home__card .nxg-hours__list > li {
	padding: .7rem 1rem;
}

.nxg-home__card .nxg-hours__badge {
	display: none;
}

.nxg-home__card .nxg-hours__list {
	border-color: var(--nxg-line);
	background: rgba( 255, 255, 255, .02 );
}

/* ---------------------------------------- de terugweg op een detail */

/* Zonder broodkruimel moet je zelf een weg terug aanbieden. De
   browserknop is geen antwoord: wie via een mail binnenkomt heeft die
   niet. */
.nxg-page__terug,
.nxg-page__back {
	margin: 0 0 1.25rem;
	font-size: .9rem;
}

.nxg-page__back {
	margin: 3rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--nxg-line);
}

.nxg-page__terug a,
.nxg-page__back a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 40px;
	color: var(--nxg-muted);
	font-weight: 600;
	text-decoration: none;
}

.nxg-page__back a {
	color: var(--nxg-glow);
}

.nxg-page__terug a:hover {
	color: var(--nxg-glow);
}

.nxg-page__terug span {
	font-size: 1.05rem;
	line-height: 1;
}

/* ------------------------------------ melding voor de beheerder */

.nxg-uit {
	margin: 2rem 0;
	padding: 1.5rem 1.75rem;
	border: 1px dashed rgba( 255, 151, 0, .5 );
	border-radius: 12px;
	background: rgba( 255, 151, 0, .08 );
	color: #DCE7F3;
}

.nxg-uit p {
	margin: 0 0 .5rem;
}

.nxg-uit strong {
	color: #FF9700;
}

.nxg-uit a {
	color: var(--tg-primary-color, #00C4F4);
	font-weight: 600;
}

/* --------------------------------------------- beheerscherm foto's */

.nxg-media__preview img,
.nxg-media__grid img {
	max-width: 220px;
	height: auto;
	border-radius: 6px;
}

.nxg-media__grid {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .5rem 0;
}

.nxg-media__grid img {
	max-width: 110px;
}

/* --------------------------------------------------------- restjes */

/* Containers die alleen als haakje dienen, maar wel hun breedte moeten
   kunnen prijsgeven binnen een raster. */
.nxg-hero-release__tekst,
.nxg-release__form,
.nxg-month__grid {
	min-width: 0;
}

.nxg-release__form {
	margin-top: 1.5rem;
}

/* Het verdeelvak in de beheerder. */
.nxg-draw {
	margin: 1em 0;
	padding: 1em;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fff;
}

.nxg-draw p {
	margin-top: 0;
}

.nxg-media__single,
.nxg-media__multi {
	margin: .5em 0 2em;
}

/* De omschrijving binnen de kop. */
.nxg-hero-release__tekstblok {
	max-width: 46ch;
	margin: 0 0 1.5rem;
	color: var(--nxg-text);
	font-size: 1rem;
	line-height: 1.65;
}

.nxg-hero-release__tekstblok > *:first-child {
	margin-top: 0;
}

.nxg-hero-release__tekstblok > *:last-child {
	margin-bottom: 0;
}

.nxg-hero-release__tekstblok p {
	margin: 0 0 .85rem;
}

.nxg-hero-release__tekstblok ul,
.nxg-hero-release__tekstblok ol {
	margin: 0 0 .85rem 1.2rem;
	padding: 0;
}

.nxg-hero-release__tekstblok li {
	margin: 0 0 .35rem;
	color: var(--nxg-text);
}

/* =============================================== het deelnameformulier */

.nxg-release {
	margin: 2.5rem 0 0;
	padding: 2rem 2.25rem 2.25rem;
	border: 1px solid var(--nxg-line);
	border-radius: 18px;
	background:
		radial-gradient( 80% 140% at 100% 0%, rgba( 86, 77, 202, .16 ), transparent 65% ),
		var(--nxg-panel);
}

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

.nxg-release__state {
	display: inline-block;
	margin: 0 0 1rem;
	padding: .3rem 1rem;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .08 );
	color: var(--nxg-muted);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Afhalen is het enige wat hier nog uitleg nodig heeft. De rest staat al
   in de kop van de pagina. */
.nxg-release__pickup {
	margin: 0 0 1.75rem;
	padding: .9rem 1.1rem;
	border-left: 3px solid var(--nxg-violet);
	border-radius: 0 10px 10px 0;
	background: rgba( 86, 77, 202, .12 );
	color: var(--nxg-text);
	font-size: .95rem;
	line-height: 1.55;
}

.nxg-release__pickup strong {
	display: inline-block;
	margin-right: .4rem;
	color: var(--nxg-heading);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-release .nxg-release__title {
	margin: 0 0 1.25rem;
	color: var(--nxg-heading);
	font-size: 1.3rem;
	line-height: 1.2;
	text-transform: none;
}

.nxg-release__field {
	margin: 0 0 1rem;
}

.nxg-release__field label {
	display: block;
	margin-bottom: .35rem;
	color: var(--nxg-muted);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-release__field input,
.nxg-release__field select {
	width: 100%;
	min-height: 48px;
	padding: .7rem .9rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 10px;
	background: rgba( 3, 11, 21, .6 );
	color: var(--nxg-heading);
	font: inherit;
}

.nxg-release__field input:focus,
.nxg-release__field select:focus {
	border-color: var(--nxg-glow);
	outline: none;
	box-shadow: 0 0 0 3px rgba( 0, 196, 244, .18 );
}

/* Twee velden naast elkaar waar dat past. */
.nxg-release__rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

@media (max-width: 520px) {
	.nxg-release__rij {
		grid-template-columns: 1fr;
	}
}

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

.nxg-release__submit {
	margin: 1.5rem 0 0;
}

.nxg-release__submit button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: .75rem 2.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--nxg-glow);
	color: var(--nxg-on-glow);
	font: inherit;
	font-size: 1rem;
	font-weight: 800;
	cursor: pointer;
	transition: filter .15s ease;
}

.nxg-release__submit button:hover {
	filter: brightness( 1.12 );
}

.nxg-release__note,
.nxg-release__hint {
	margin: .75rem 0 0;
	color: var(--nxg-muted);
	font-size: .88rem;
	line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
	.nxg-release__submit button {
		transition: none;
	}
}

/* =============================================== het bewijs vooraf */

/* De vingerafdruk van het geheime getal, zichtbaar zolang er nog
   deelgenomen kan worden. Beloven dat het lot vooraf vastligt en het
   bewijs pas achteraf tonen, is geen bewijs. */
.nxg-bewijs {
	margin: 2rem 0 0;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--nxg-line);
	border-radius: 12px;
	background: rgba( 3, 11, 21, .55 );
}

.nxg-bewijs__titel {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .5rem;
	color: var(--nxg-heading);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-bewijs__titel::before {
	content: "";
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--nxg-ok);
}

.nxg-bewijs__uitleg {
	margin: 0 0 .9rem;
	color: var(--nxg-muted);
	font-size: .9rem;
	line-height: 1.6;
}

/* De vingerafdruk zelf: te lang voor één regel, dus hij mag breken. Wel
   in een vaste breedte, want je moet hem teken voor teken kunnen
   vergelijken. */
.nxg-bewijs__code,
.nxg-release__proof code {
	display: block;
	padding: .7rem .85rem;
	border: 1px solid var(--nxg-line);
	border-radius: 8px;
	background: rgba( 0, 0, 0, .35 );
	color: var(--nxg-glow);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .8rem;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.nxg-release__proof {
	margin: 2rem 0 0;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--nxg-line);
	border-radius: 12px;
	background: rgba( 3, 11, 21, .55 );
}

.nxg-release__proof h3 {
	margin: 0 0 .5rem;
	color: var(--nxg-heading);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-release__proof p {
	margin: 0 0 .9rem;
	color: var(--nxg-muted);
	font-size: .9rem;
	line-height: 1.6;
}

/* Het uitklapje met de technische uitleg.
 *
 * Dicht bij het openen, want de meeste mensen hebben er niets aan. Wie
 * hem openklikt is precies degene die anders zou vragen of het wel
 * eerlijk verlopen is. */
.nxg-uitleg__meer {
	margin: 1.5rem 0 0;
	padding: 0;
	border: 1px solid var(--nxg-line);
	border-radius: var(--nxg-radius);
	background: rgba( 3, 11, 21, .45 );
}

.nxg-uitleg__meer summary {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.25rem;
	color: var(--nxg-text);
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

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

.nxg-uitleg__meer summary::before {
	content: "+";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 6px;
	color: var(--nxg-glow);
	font-size: 1rem;
	line-height: 1;
}

.nxg-uitleg__meer[open] summary::before {
	content: "\2212";
}

.nxg-uitleg__meer summary:hover {
	color: var(--nxg-heading);
}

.nxg-uitleg__meer p {
	margin: 0 1.25rem 1rem;
	color: var(--nxg-muted);
	font-size: .93rem;
	line-height: 1.65;
}

.nxg-uitleg__meer[open] summary {
	border-bottom: 1px solid var(--nxg-line);
	margin-bottom: 1rem;
}

/* De echte formule, voor wie ermee aan de slag wil. */
.nxg-uitleg__vaktaal {
	padding: .75rem 1rem;
	margin: 0 1.25rem 1.25rem !important;
	border-left: 3px solid var(--nxg-line-strong);
	background: rgba( 0, 0, 0, .25 );
	font-size: .85rem !important;
}

/* De reeksen achter een uitklapje. Prominent getoond ziet zo'n reeks
   eruit als iets dat je moet bewaren, en dan maak je mensen ongerust in
   plaats van gerust. */
.nxg-bewijs__meer {
	margin: 0;
}

.nxg-bewijs__meer summary {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .3rem 0;
	color: var(--nxg-muted);
	font-size: .85rem;
	cursor: pointer;
	list-style: none;
}

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

.nxg-bewijs__meer summary::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 4px;
	font-size: .85rem;
	line-height: 1;
}

.nxg-bewijs__meer[open] summary::before {
	content: "\2212";
}

.nxg-bewijs__meer summary:hover {
	color: var(--nxg-heading);
}

.nxg-bewijs__meer > code,
.nxg-bewijs__meer dl {
	margin-top: .6rem;
}

.nxg-bewijs__meer dt {
	margin: .6rem 0 .25rem;
	color: var(--nxg-muted);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-bewijs__meer dd {
	margin: 0;
}

/* ============================================================ aftellen */

.nxg-aftellen {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: .35rem;
	padding: .2rem .65rem;
	border-radius: 999px;
	background: color-mix( in srgb, var(--nxg-game-color, #00C4F4) 16%, transparent );
	color: var(--nxg-game-color, var(--nxg-glow));
	font-size: .78rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	white-space: nowrap;
}

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

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

/* In de kop van de releasepagina mag hij groter en opvallender. */
.nxg-aftellen--groot {
	margin: 1.25rem 0 0;
	padding: .5rem 1.1rem;
	font-size: .95rem;
}

.nxg-aftellen--groot::before {
	width: .5rem;
	height: .5rem;
}

/* Een teller is beweging op het scherm. Wie dat heeft uitgezet, ziet de
   datum erboven en dat volstaat. */
@media (prefers-reduced-motion: reduce) {
	.nxg-aftellen {
		display: none !important;
	}
}

/* ================================================= je gegevens vast */

/* De gegevens komen uit het account en zijn hier niet aan te passen.
   Anders schrijft iemand zich in met een tweede mailadres, en dan is de
   controle op één deelname per persoon waardeloos. */
.nxg-gast {
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--nxg-line);
	border-radius: 12px;
	background: rgba( 3, 11, 21, .45 );
}

.nxg-gast__label {
	margin: 0 0 .85rem;
	color: var(--nxg-muted);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

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

.nxg-gast__gegevens dt {
	margin: 0 0 .2rem;
	color: var(--nxg-muted);
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-gast__gegevens dd {
	margin: 0;
	color: var(--nxg-heading);
	font-size: .98rem;
	font-weight: 700;
	overflow-wrap: anywhere;
}

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

.nxg-gast__wijzig a {
	color: var(--nxg-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nxg-gast__wijzig a:hover {
	color: var(--nxg-glow);
}

/* ----------------------------------------- aanmelden om mee te doen */

.nxg-aanmelden-nodig__form {
	max-width: 22rem;
	margin: 0 auto;
	text-align: left;
}

.nxg-aanmelden-nodig__form .nxg-field {
	margin: 0 0 .9rem;
}

.nxg-aanmelden-nodig__form label {
	display: block;
	margin-bottom: .35rem;
	color: var(--nxg-muted);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-aanmelden-nodig__form input {
	width: 100%;
	min-height: 48px;
	padding: .7rem .9rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 10px;
	background: rgba( 3, 11, 21, .6 );
	color: var(--nxg-heading);
	font: inherit;
}

.nxg-aanmelden-nodig__form input:focus {
	border-color: var(--nxg-glow);
	outline: none;
	box-shadow: 0 0 0 3px rgba( 0, 196, 244, .18 );
}

.nxg-aanmelden-nodig__acties {
	margin: 1.25rem 0 0;
}

.nxg-aanmelden-nodig button.nxg-aanmelden-nodig__knop {
	width: 100%;
	border: 0;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.nxg-aanmelden-nodig__links {
	margin: 1.25rem 0 0;
	color: var(--nxg-muted);
	font-size: .88rem;
}

.nxg-aanmelden-nodig__links a {
	color: var(--nxg-muted);
}

.nxg-aanmelden-nodig__links a:hover {
	color: var(--nxg-glow);
}

.nxg-deelnames__alles {
	margin-top: 1.25rem;
}

/* ================================================= je doet al mee */

/* Het formulier opnieuw tonen zou suggereren dat je nog iets moet doen,
   en een tweede poging levert alleen een foutmelding op. */
.nxg-al-mee {
	padding: 1.75rem;
	border: 1px solid rgba( 18, 209, 118, .35 );
	border-radius: 14px;
	background: rgba( 18, 209, 118, .08 );
	text-align: center;
}

.nxg-al-mee__titel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	margin: 0 0 1rem;
	color: var(--nxg-heading);
	font-size: 1.15rem;
	font-weight: 800;
}

.nxg-al-mee__titel::before {
	content: "";
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: #12D176;
}

.nxg-al-mee__code {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	margin: 0 0 1rem;
	padding: .6rem 1.1rem;
	border: 1px solid var(--nxg-line);
	border-radius: 10px;
	background: rgba( 3, 11, 21, .5 );
}

.nxg-al-mee__code span {
	color: var(--nxg-muted);
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-al-mee__code code {
	color: var(--nxg-glow);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .08em;
}

.nxg-al-mee__uitleg {
	max-width: 46ch;
	margin: 0 auto 1.5rem;
	color: var(--nxg-muted);
	font-size: .95rem;
	line-height: 1.6;
}

.nxg-al-mee__acties {
	margin: 0;
}

.nxg-al-mee__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .65rem 1.75rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 999px;
	color: var(--nxg-heading);
	font-weight: 700;
	text-decoration: none;
}

.nxg-al-mee__knop:hover {
	border-color: var(--nxg-glow);
	color: var(--nxg-glow);
}

/* ============================================ kopjes in eigen inhoud */

/* Het thema is voor een lichte achtergrond gemaakt en zet koppen op een
   donkere kleur. Overal waar de plugin inhoud toont, staat die op een
   donkere achtergrond, en dan is zwart op donkerblauw niet te lezen.
   
   Alle zes de niveaus, want een klant zet net zo goed een h4 in zijn
   tekst. Dit stond alleen op h2 en h3 in één container. */
.nxg-page h1,
.nxg-page h2,
.nxg-page h3,
.nxg-page h4,
.nxg-page h5,
.nxg-page h6,
.nxg-page__content h1,
.nxg-page__content h2,
.nxg-page__content h3,
.nxg-page__content h4,
.nxg-page__content h5,
.nxg-page__content h6,
.nxg-hero-release h1,
.nxg-hero-release h2,
.nxg-hero-release h3,
.nxg-hero-release__tekstblok h1,
.nxg-hero-release__tekstblok h2,
.nxg-hero-release__tekstblok h3,
.nxg-hero-release__tekstblok h4,
.nxg-home h1,
.nxg-home h2,
.nxg-home h3,
.nxg-home h4,
.nxg-release h2,
.nxg-release h3,
.nxg-release h4,
.nxg-releases h2,
.nxg-releases h3,
.nxg-calendar h2,
.nxg-calendar h3,
.nxg-hours h2,
.nxg-hours h3,
.nxg-reserve h2,
.nxg-reserve h3,
.nxg-signup h2,
.nxg-signup h3,
.nxg-social h3 {
	color: var(--nxg-heading);
}

/* Vetgedrukte tekst en aanhalingen kregen dezelfde donkere kleur mee. */
.nxg-page__content strong,
.nxg-page__content b,
.nxg-hero-release__tekstblok strong,
.nxg-hero-release__tekstblok b {
	color: var(--nxg-heading);
}

.nxg-page__content li,
.nxg-page__content blockquote,
.nxg-page__content td,
.nxg-page__content th,
.nxg-page__content dd,
.nxg-page__content dt,
.nxg-hero-release__tekstblok li {
	color: var(--nxg-text);
}

.nxg-page__content blockquote {
	margin: 1.5rem 0;
	padding: .75rem 1.25rem;
	border-left: 3px solid var(--nxg-glow);
	background: rgba( 255, 255, 255, .03 );
}


/* ================================ kopjes, met het gewicht om te winnen */

/* Het thema zet koppen met een selector van hetzelfde gewicht als de
   onze. Wie dan wint hangt af van de vololgorde waarin de stylesheets
   laden, en dat is niets om op te bouwen.
   
   Met de klasse op de body erbij wegen deze regels zwaarder, en dan is
   het geen kwestie van geluk meer. */
.nxg-plugin-pagina .nxg-page h1,
.nxg-plugin-pagina .nxg-page h2,
.nxg-plugin-pagina .nxg-page h3,
.nxg-plugin-pagina .nxg-page h4,
.nxg-plugin-pagina .nxg-page h5,
.nxg-plugin-pagina .nxg-page h6,
.nxg-plugin-pagina .nxg-reserve h2,
.nxg-plugin-pagina .nxg-reserve h3,
.nxg-plugin-pagina .nxg-reserve h4,
.nxg-plugin-pagina .nxg-release h2,
.nxg-plugin-pagina .nxg-release h3,
.nxg-plugin-pagina .nxg-releases h2,
.nxg-plugin-pagina .nxg-releases h3,
.nxg-plugin-pagina .nxg-calendar h2,
.nxg-plugin-pagina .nxg-calendar h3,
.nxg-plugin-pagina .nxg-signup h2,
.nxg-plugin-pagina .nxg-signup h3,
.nxg-plugin-pagina .nxg-hours h2,
.nxg-plugin-pagina .nxg-hours h3,
.nxg-plugin-pagina .nxg-home h2,
.nxg-plugin-pagina .nxg-home h3,
.nxg-plugin-pagina .nxg-home h4,
.nxg-plugin-pagina .nxg-uitleg h2,
.nxg-plugin-pagina .nxg-uitleg h3,
.nxg-donkere-pagina .nxg-page h1,
.nxg-donkere-pagina .nxg-page h2,
.nxg-donkere-pagina .nxg-page h3,
.nxg-donkere-pagina .nxg-page h4,
.nxg-donkere-pagina .nxg-home h2,
.nxg-donkere-pagina .nxg-home h3,
.nxg-donkere-pagina .nxg-home h4,
.nxg-donkere-pagina .nxg-reserve h2,
.nxg-donkere-pagina .nxg-reserve h3,
.nxg-donkere-pagina .nxg-release h2,
.nxg-donkere-pagina .nxg-release h3,
.nxg-donkere-pagina .nxg-releases h2,
.nxg-donkere-pagina .nxg-releases h3,
.nxg-donkere-pagina .nxg-calendar h2,
.nxg-donkere-pagina .nxg-calendar h3,
.nxg-donkere-pagina .nxg-uitleg h2,
.nxg-donkere-pagina .nxg-uitleg h3 {
	color: var(--nxg-heading);
}

/* De labels in de zijkolom blijven bewust gedempt: dat zijn opschriften
   boven een lijst, geen koppen in een verhaal. */
.nxg-plugin-pagina .nxg-reserve__aside h3,
.nxg-donkere-pagina .nxg-reserve__aside h3,
.nxg-plugin-pagina .nxg-reserve .nxg-reserve__sub,
.nxg-donkere-pagina .nxg-reserve .nxg-reserve__sub {
	color: var(--nxg-muted);
}

.nxg-plugin-pagina .nxg-page__content strong,
.nxg-plugin-pagina .nxg-page__content b,
.nxg-donkere-pagina .nxg-page__content strong,
.nxg-donkere-pagina .nxg-page__content b {
	color: var(--nxg-heading);
}

/* ================================================ kopjes in zinsvorm */

/* Een kop is een zin, geen opschrift: alleen de eerste letter een
   hoofdletter. Het thema zet koppen in kapitalen, en bij een titel als
   "The Hobbit Collector Booster Display" wordt dat een muur.
   
   Kleine labels boven een blok blijven wel in kapitalen. Dat zijn geen
   koppen maar wegwijzers, en daar helpt het onderscheid juist. */
.nxg-plugin-pagina h1,
.nxg-plugin-pagina h2,
.nxg-plugin-pagina h3,
.nxg-plugin-pagina h4,
.nxg-plugin-pagina h5,
.nxg-plugin-pagina h6,
.nxg-donkere-pagina h1,
.nxg-donkere-pagina h2,
.nxg-donkere-pagina h3,
.nxg-donkere-pagina h4,
.nxg-donkere-pagina h5,
.nxg-donkere-pagina h6,
.nxg-page h1,
.nxg-page h2,
.nxg-page h3,
.nxg-page h4,
.nxg-page h5,
.nxg-page h6,
.nxg-ui h1,
.nxg-ui h2,
.nxg-ui h3,
.nxg-ui h4,
.nxg-ui h5,
.nxg-ui h6 {
	text-transform: none;
	letter-spacing: normal;
}

/* De twee koppen die als label bedoeld waren, worden nu ook gewone
   kopjes. Kleiner en gedempt blijven ze wel. */
.nxg-plugin-pagina .nxg-reserve__aside h3,
.nxg-donkere-pagina .nxg-reserve__aside h3,
.nxg-plugin-pagina .nxg-reserve__sub,
.nxg-donkere-pagina .nxg-reserve__sub {
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

/* De titel van een pagina en van een release: ook gewoon een zin. */
.nxg-page__title,
.nxg-hero-release__titel,
.nxg-juridisch__titel {
	text-transform: none;
}

/* ============================================ evenementen als kaarten */

/* Dezelfde opbouw als een releasekaart: een blok met een kleurstreep in
   de kleur van het spel, de gegevens met een klein label ervoor, en de
   actie onderaan. Alleen staat hier een datum waar bij een release een
   foto staat: een toernooi heeft geen product om te tonen, maar wel een
   moment dat je in één blik wil zien. */
.nxg-calendar .nxg-calendar__event {
	position: relative;
	margin: 0 0 .85rem;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

.nxg-calendar .nxg-calendar__event::before {
	content: none;
}

.nxg-calendar__event > a.nxg-event-kaart,
.nxg-event-kaart {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 1.15rem 1.3rem;
	overflow: hidden;
	border: 1px solid var(--nxg-line);
	border-radius: 14px;
	background:
		radial-gradient( 80% 130% at 100% 0%, color-mix( in srgb, var(--nxg-game-color, #00C4F4) 12%, transparent ), transparent 70% ),
		var(--nxg-panel);
	color: var(--nxg-text);
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease;
}

.nxg-event-kaart:hover {
	transform: translateY( -2px );
	border-color: var(--nxg-game-color, var(--nxg-glow));
	color: var(--nxg-text);
}

/* ------------------------------------------------------------ datum */

.nxg-event-kaart__datum {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.75rem;
	padding: .75rem .4rem;
	border: 1px solid var(--nxg-line);
	border-radius: 10px;
	background: rgba( 3, 11, 21, .5 );
	text-align: center;
}

.nxg-event-kaart__datum time {
	display: block;
}

.nxg-event-kaart__dag {
	display: block;
	color: var(--nxg-heading);
	font-size: 1.65rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.nxg-event-kaart__maand {
	display: block;
	margin-top: .1rem;
	color: var(--nxg-game-color, var(--nxg-glow));
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-event-kaart__uur {
	display: block;
	margin-top: .35rem;
	padding-top: .35rem;
	border-top: 1px solid var(--nxg-line);
	color: var(--nxg-muted);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ tekst */

.nxg-event-kaart__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .3rem;
	min-width: 0;
}

.nxg-event-kaart__spel {
	display: block;
	color: var(--nxg-game-color, var(--nxg-glow));
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.nxg-event-kaart__titel {
	display: block;
	color: var(--nxg-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

.nxg-event-kaart__staat {
	align-self: flex-start;
	margin-top: .35rem;
	padding: .2rem .75rem;
	border-radius: 999px;
	background: rgba( 255, 69, 129, .18 );
	color: var(--nxg-bad);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* De gegevens in kolommen met een vaste minimumbreedte. Op één rij
   geplakt lopen de labels en de waarden door elkaar; in kolommen staat
   elk label boven zijn eigen waarde en scan je ze in één blik. */
.nxg-event-kaart__meta {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 6.5rem, max-content ) );
	gap: .6rem 1.75rem;
	margin-top: .75rem;
	padding-top: .75rem;
	border-top: 1px solid var(--nxg-line);
}

.nxg-event-kaart__meta > span {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
	color: var(--nxg-heading);
	font-size: .95rem;
	font-weight: 700;
}

.nxg-event-kaart__meta i {
	color: var(--nxg-muted);
	font-size: .62rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-event-kaart__actie {
	margin-top: auto;
	padding-top: .85rem;
	color: var(--nxg-heading);
	font-size: .88rem;
	font-weight: 700;
}

.nxg-event-kaart__actie::after {
	content: " \2192";
	color: var(--nxg-game-color, var(--nxg-glow));
}

/* Een geannuleerd evenement blijft staan, maar rustiger. */
.nxg-calendar__event--cancelled .nxg-event-kaart {
	opacity: .7;
}

.nxg-calendar__event--cancelled .nxg-event-kaart__titel {
	text-decoration: line-through;
}

@media (max-width: 520px) {
	.nxg-event-kaart {
		gap: .9rem;
		padding: 1rem;
	}

	.nxg-event-kaart__datum {
		width: 3.6rem;
	}

	.nxg-event-kaart__dag {
		font-size: 1.35rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nxg-event-kaart {
		transition: none;
	}

	.nxg-event-kaart:hover {
		transform: none;
	}
}