/**
 * 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 */

/* Ruimer dan eerst. Met een minimum van 17 rem kreeg één release een
   smalle kolom, en dan brak de naam van het spel over twee regels terwijl
   de halve pagina leeg bleef.
   
   auto-fit in plaats van auto-fill: bij één of twee releases vullen die
   de breedte in plaats van samen te drukken. Het maximum van 27 rem houdt
   ze wel binnen de perken op een breed scherm. */
.nxg-home__releases {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 20rem, 27rem ) );
	gap: 1.15rem;
	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.25rem;
	height: 100%;
	padding: 1.5rem 1.6rem;
	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: 5rem;
	height: 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: .1em;
	line-height: 1.3;
	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 */

/* Een mozaïek: de eerste foto neemt een blok van twee bij twee, de rest
   vult daarnaast op.
   
   Eerst stond hier auto-fit met een minimumbreedte, en dat liep mis zodra
   de eerste foto twee kolommen innam: het raster werd breder dan de
   pagina en de foto's ernaast bleven half leeg. Een vast aantal kolommen
   kan dat niet. */
.nxg-home__gallery {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nxg-home__gallery li {
	/* min-width nul houdt een cel binnen zijn kolom. Zonder deze regel
	   kan een brede foto de kolom oprekken en loopt het raster over. */
	min-width: 0;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--nxg-line);
	border-radius: var(--nxg-radius);
	background: var(--nxg-panel);
	list-style: none;
}

/* De foto vult zijn cel volledig. De verhouding zit op de cel, niet op
   de foto: anders bepaalt de foto de hoogte en blijft de rest van de cel
   leeg. */
.nxg-home__gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 720px) {
	.nxg-home__gallery {
		grid-template-columns: repeat( 4, 1fr );
	}

	/* Twee kolommen én twee rijen, zodat de hoge eerste foto de rijen
	   niet scheeftrekt. */
	.nxg-home__gallery li:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/* --------------------------------------------------------------- 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;
}

/* De pijl en de maandnaam horen bij elkaar, met wat lucht ertussen. */
.nxg-month__nav {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	white-space: nowrap;
}

.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( 14rem, 1fr ) );
	gap: 1.35rem;
	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. */
/* Ruimte bovenaan voor de statuspil. Die zweeft over het beeld, en zonder
   die ruimte staat hij dwars over de doos. */
.nxg-release-kaart__beeld {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	padding: 2.6rem .9rem .9rem;
	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: .8rem;
	left: .9rem;
	padding: .22rem .8rem;
	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: .35rem;
	padding: 1.1rem 1.15rem 1.2rem;
}

.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: .35rem;
	margin-top: .55rem;
	padding-top: .55rem;
	border-top: 1px solid var(--nxg-line);
}

.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: 1.1rem;
	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__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__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: .55rem;
	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,

/* 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;
	}
}

/* =============================================== de pagina van een event */

/* Geen schermbrede kopbalk meer: alles in één kaart, met het formulier
   eronder in dezelfde kaart. Wat je leest en waarvoor je tekent hoort bij
   elkaar. */
.nxg-ev {
	margin: 1.25rem 0 0;
	padding: 1.75rem;
	border: 1px solid var(--nxg-line);
	border-left: 4px solid var(--nxg-game-color, var(--nxg-glow));
	border-radius: 18px;
	background:
		radial-gradient( 60% 110% at 100% 0%, color-mix( in srgb, var(--nxg-game-color, #00C4F4) 12%, transparent ), transparent 70% ),
		var(--nxg-panel);
}

.nxg-ev__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

.nxg-ev__datum {
	flex: 0 0 auto;
	width: 4.75rem;
	padding: .75rem .4rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 12px;
	background: rgba( 3, 11, 21, .5 );
	text-align: center;
}

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

.nxg-ev__maand {
	display: block;
	margin-top: .2rem;
	color: var(--nxg-game-color, var(--nxg-glow));
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.nxg-ev__titel {
	flex: 1 1 14rem;
	min-width: 0;
}

.nxg-ev__spel {
	margin: 0 0 .2rem;
	color: var(--nxg-game-color, var(--nxg-glow));
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-ev__titel h1 {
	margin: 0 0 .3rem;
	color: var(--nxg-heading);
	font-size: clamp( 1.5rem, 3.5vw, 2rem );
	line-height: 1.15;
}

.nxg-ev__wanneer {
	margin: 0;
	color: var(--nxg-text);
	font-size: .98rem;
	text-transform: capitalize;
}

.nxg-ev__beeld {
	flex: 0 0 auto;
	width: 7rem;
	padding: .3rem;
	border: 1px solid var(--nxg-line);
	border-radius: 12px;
	background: rgba( 3, 11, 21, .5 );
}

.nxg-ev__beeld img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 9px;
}

.nxg-ev__staat {
	display: inline-block;
	margin: 1.25rem 0 0;
	padding: .3rem 1rem;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nxg-ev__staat[data-staat="af"] {
	background: rgba( 255, 69, 129, .18 );
	color: var(--nxg-bad);
}

.nxg-ev__staat[data-staat="voorbij"] {
	background: rgba( 255, 255, 255, .08 );
	color: var(--nxg-muted);
}

/* De gegevens als kleine kaartjes onder de kop. */
.nxg-ev__feiten {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 8rem, 1fr ) );
	gap: .75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.nxg-ev__feiten li {
	margin: 0;
	padding: .75rem .95rem;
	border: 1px solid var(--nxg-line);
	border-radius: 10px;
	background: rgba( 255, 255, 255, .025 );
	list-style: none;
}

.nxg-ev__feiten span {
	display: block;
	margin-bottom: .2rem;
	color: var(--nxg-muted);
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-ev__feiten strong {
	color: var(--nxg-heading);
	font-size: 1rem;
}

.nxg-ev__feiten li[data-vol] strong {
	color: var(--nxg-warn);
}

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

/* Het formulier zit in de kaart, dus geen tweede kader eromheen. */
.nxg-ev__inhoud .nxg-signup {
	margin-top: 1.75rem;
	padding: 1.5rem 0 0;
	border: 0;
	border-top: 1px solid var(--nxg-line);
	border-radius: 0;
	background: none;
}

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

	.nxg-ev__kop {
		gap: 1rem;
	}

	.nxg-ev__beeld {
		width: 5rem;
	}
}

/* ================================================ het inschrijfformulier */

.nxg-signup {
	margin: 2.5rem 0 0;
	padding: 1.75rem;
	border: 1px solid var(--nxg-line);
	border-radius: 16px;
	background:
		radial-gradient( 70% 120% at 100% 0%, color-mix( in srgb, var(--nxg-game-color, #00C4F4) 10%, transparent ), transparent 70% ),
		var(--nxg-panel);
}

.nxg-signup__kop {
	margin: 0 0 .35rem;
	color: var(--nxg-heading);
	font-size: 1.35rem;
	line-height: 1.2;
}

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

/* De vrije plaatsen als balkje: dat leest sneller dan een getal. */
.nxg-signup__plaatsen {
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--nxg-line);
	border-radius: 12px;
	background: rgba( 255, 255, 255, .025 );
}

.nxg-signup__plaatsen-kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem 1rem;
	margin: 0 0 .6rem;
}

.nxg-signup__plaatsen-kop strong {
	color: var(--nxg-heading);
	font-size: 1.05rem;
}

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

.nxg-signup__balk {
	height: .45rem;
	overflow: hidden;
	border-radius: 999px;
	background: rgba( 0, 0, 0, .35 );
}

.nxg-signup__balk span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--nxg-ok);
}

.nxg-signup__balk[data-druk] span {
	background: var(--nxg-warn);
}

.nxg-signup__seats--full {
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	border: 1px solid rgba( 255, 151, 0, .35 );
	border-radius: 12px;
	background: rgba( 255, 151, 0, .08 );
	color: var(--nxg-heading);
	font-weight: 600;
}

.nxg-signup__closed {
	margin: 0;
	padding: 1rem 1.15rem;
	border: 1px solid var(--nxg-line);
	border-radius: 12px;
	background: rgba( 255, 255, 255, .03 );
	color: var(--nxg-muted);
}

/* Twee velden naast elkaar waar dat past. */
.nxg-signup__rij {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
	gap: 0 1rem;
}

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

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

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

.nxg-signup__field textarea {
	min-height: auto;
	line-height: 1.5;
	resize: vertical;
}

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

.nxg-signup__field input::placeholder,
.nxg-signup__field textarea::placeholder {
	color: rgba( 139, 153, 172, .55 );
}

.nxg-signup__payment {
	margin: 0 0 1.25rem;
	padding: .9rem 1.1rem;
	border-left: 3px solid var(--nxg-glow);
	border-radius: 0 8px 8px 0;
	background: rgba( 0, 196, 244, .07 );
	color: var(--nxg-text);
	font-size: .9rem;
	line-height: 1.6;
}

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

.nxg-signup__submit button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: .8rem 2rem;
	border: 0;
	border-radius: 999px;
	background: var(--nxg-glow);
	color: var(--nxg-on-glow);
	font: inherit;
	font-size: 1.05rem;
	font-weight: 800;
	cursor: pointer;
}

.nxg-signup__submit button:hover {
	filter: brightness( 1.1 );
}

/* De val voor bots blijft onzichtbaar. */
.nxg-signup__trap {
	position: absolute;
	left: -9999px;
}


/* ============================== de lijst onder de maandweergave */

/* De kaarten in een raster in plaats van over de volle breedte. Een kaart
   van duizend pixels breed met drie regels tekst erin heeft een half
   scherm lege ruimte rechts. */
.nxg-calendar__list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 20rem, 1fr ) );
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Een maandkop loopt wel over de volle breedte. */
.nxg-calendar__month {
	grid-column: 1 / -1;
}

.nxg-calendar__next span {
	color: var(--nxg-muted);
	font-weight: 400;
	text-transform: capitalize;
}

/* De kaartjes zelf wat compacter. */
.nxg-event-kaart {
	gap: 1rem;
	padding: 1rem;
}

.nxg-event-kaart__datum {
	width: 3.75rem;
	padding: .6rem .35rem;
}

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

.nxg-event-kaart__maand {
	font-size: .68rem;
}

.nxg-event-kaart__titel {
	font-size: 1.05rem;
	line-height: 1.3;
}

.nxg-event-kaart .nxg-deelname__feiten {
	gap: .35rem .9rem;
}

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

/* ================================ drukke dagen in de maandweergave */

/* Drie evenementen passen los in een dagvakje; de rest komt achter een
   klapje. Zonder die grens wordt één drukke zaterdag twee keer zo hoog
   als de rest van de maand. */
.nxg-month__meer {
	margin-top: .2rem;
}

.nxg-month__meer > summary {
	display: block;
	padding: .2rem .35rem;
	border-radius: 5px;
	background: rgba( 255, 255, 255, .06 );
	color: var(--nxg-muted);
	font-size: .68rem;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	list-style: none;
}

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

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

.nxg-month__meer[open] > summary {
	margin-bottom: .2rem;
	color: var(--nxg-heading);
}

/* Lange titels breken het raster niet meer op. */
.nxg-month__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* ============================== wie al ingeschreven is */

/* Geen formulier meer voor wie er al op staat. Een knop die niets doet is
   verwarrender dan geen knop. */
.nxg-alop {
	padding: 1.25rem 1.4rem;
	border: 1px solid rgba( 18, 209, 118, .35 );
	border-left: 3px solid var(--nxg-ok);
	border-radius: 12px;
	background: rgba( 18, 209, 118, .07 );
}

.nxg-alop[data-wacht] {
	border-color: rgba( 255, 151, 0, .35 );
	border-left-color: var(--nxg-warn);
	background: rgba( 255, 151, 0, .07 );
}

.nxg-alop__kop {
	margin: 0 0 .35rem;
	color: var(--nxg-ok);
	font-size: 1.1rem;
	font-weight: 800;
}

.nxg-alop[data-wacht] .nxg-alop__kop {
	color: var(--nxg-warn);
}

.nxg-alop__uitleg {
	margin: 0;
	color: var(--nxg-text);
	font-size: .95rem;
	line-height: 1.6;
}

.nxg-alop__actie {
	margin: .9rem 0 0;
}

.nxg-alop__actie a {
	color: var(--nxg-glow);
	font-size: .9rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Het balkje met de bezetting, op de kaarten en de eventpagina. */
.nxg-plaatsen {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-width: 6rem;
}

.nxg-plaatsen__balk {
	flex: 1 1 3.5rem;
	height: .38rem;
	min-width: 2.5rem;
	overflow: hidden;
	border-radius: 999px;
	background: rgba( 0, 0, 0, .4 );
}

.nxg-plaatsen__balk > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--nxg-ok);
}

.nxg-plaatsen[data-staat="bijna"] .nxg-plaatsen__balk > span {
	background: var(--nxg-warn);
}

.nxg-plaatsen[data-staat="vol"] .nxg-plaatsen__balk > span {
	background: var(--nxg-bad);
}

.nxg-plaatsen__tekst {
	flex: 0 0 auto;
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}

.nxg-plaatsen[data-staat="vol"] .nxg-plaatsen__tekst {
	color: var(--nxg-bad);
	font-weight: 700;
}

/* Op de eventpagina staat het balkje onder het kopje, over de breedte. */
.nxg-ev__feit--plaatsen .nxg-plaatsen {
	display: flex;
	width: 100%;
	margin-top: .15rem;
}

/* ====================== dezelfde velden als in het account =========== */

/* Het aanmeldformulier en de opt-in gebruiken dezelfde onderdelen als
   "Mijn voorkeuren": pillen voor de spellen en een schakelaar voor de
   nieuwsbrief. Zonder deze regels vallen ze buiten het account terug op
   gewone vinkjes. */
.nxg-vk__kop {
	margin: 0 0 1rem;
	color: var(--nxg-heading);
	font-size: 1.05rem;
	font-weight: 700;
}

.nxg-vk__kop span {
	display: block;
	margin-top: .2rem;
	color: var(--nxg-muted);
	font-size: .85rem;
	font-weight: 400;
	line-height: 1.5;
}

.nxg-vk__legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

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

.nxg-spel {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .55rem 1rem .55rem .75rem;
	border: 1px solid var(--nxg-line-strong);
	border-radius: 999px;
	background: rgba( 255, 255, 255, .02 );
	color: var(--nxg-text);
	font-size: .92rem;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

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

.nxg-spel input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.nxg-spel__vink {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid var(--nxg-line-strong);
	border-radius: 6px;
}

.nxg-spel__vink::after {
	content: "";
	width: .3rem;
	height: .55rem;
	margin-top: -.15rem;
	border: solid #08111C;
	border-width: 0 2px 2px 0;
	opacity: 0;
	transform: rotate( 45deg );
}

.nxg-spel input:checked + .nxg-spel__vink {
	border-color: var( --nxg-game-color, var(--nxg-glow) );
	background: var( --nxg-game-color, var(--nxg-glow) );
}

.nxg-spel input:checked + .nxg-spel__vink::after {
	opacity: 1;
}

.nxg-spel:has( input:checked ) {
	border-color: var( --nxg-game-color, var(--nxg-glow) );
	background: color-mix( in srgb, var( --nxg-game-color, #00C4F4 ) 12%, transparent );
	color: var(--nxg-heading);
	font-weight: 600;
}

.nxg-spel:has( input:focus-visible ) {
	outline: 2px solid var( --nxg-game-color, var(--nxg-glow) );
	outline-offset: 2px;
}

/* De schakelaar voor de nieuwsbrief. */
.nxg-schakel {
	display: inline-flex;
	align-items: flex-start;
	gap: .75rem;
	cursor: pointer;
}

.nxg-schakel input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.nxg-schakel__knop {
	flex: 0 0 auto;
	position: relative;
	width: 2.75rem;
	height: 1.5rem;
	margin-top: .15rem;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .12 );
	transition: background .15s;
}

.nxg-schakel__knop::after {
	content: "";
	position: absolute;
	top: .2rem;
	left: .2rem;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: #FFFFFF;
	transition: transform .15s;
}

.nxg-schakel input:checked + .nxg-schakel__knop {
	background: var(--nxg-glow);
}

.nxg-schakel input:checked + .nxg-schakel__knop::after {
	transform: translateX( 1.25rem );
}

.nxg-schakel input:focus-visible + .nxg-schakel__knop {
	outline: 2px solid var(--nxg-glow);
	outline-offset: 2px;
}

.nxg-schakel__tekst strong {
	display: block;
	color: var(--nxg-heading);
	font-size: 1rem;
}

.nxg-schakel__tekst > span {
	display: block;
	margin-top: .2rem;
	color: var(--nxg-muted);
	font-size: .88rem;
	line-height: 1.5;
}

.nxg-optin {
	margin: 1.25rem 0;
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--nxg-line);
	border-radius: 12px;
	background: rgba( 255, 255, 255, .02 );
}

/* ================================= de kalender op een telefoon */

/* Op een breed scherm staan het maandraster en de lijst naast elkaar in de
   tijd: het raster geeft het overzicht, de lijst de details. Op een
   telefoon zijn zeven kolommen van veertig pixels onleesbaar, en dan staat
   alles er twee keer.
   
   Daarom: op smalle schermen enkel de lijst, met de maandnavigatie erboven
   zodat je nog steeds kan bladeren. */
@media (max-width: 700px) {
	.nxg-month__grid {
		display: none;
	}

	.nxg-month {
		margin-bottom: 1.25rem;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.nxg-month__head {
		margin-bottom: 0;
		padding: .5rem .6rem;
		border: 1px solid var(--nxg-line);
		border-radius: 999px;
		background: var(--nxg-panel);
		gap: .5rem;
	}

	.nxg-month__title {
		flex: 1;
		min-width: 0;
		font-size: 1.05rem;
	}

	/* De maandnamen naast de pijlen passen niet in het pilletje; dan
	   stonden de knoppen buiten beeld. Op een telefoon blijven enkel de
	   pijlen over, als ronde knoppen die groot genoeg zijn om te raken. */
	.nxg-month__nav-naam {
		display: none;
	}

	.nxg-month__nav {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.4rem;
		height: 2.4rem;
		border: 1px solid var(--nxg-line);
		border-radius: 50%;
		background: rgba( 255, 255, 255, .04 );
		font-size: 1rem;
	}

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

	/* De kop van de lijst is dan overbodig: de maand staat er al boven. */
	.nxg-calendar__next {
		margin-top: 1.25rem;
		font-size: 1rem;
	}

	.nxg-calendar__next span {
		display: none;
	}
}

/* Op een heel smal scherm ook de pijltekst korter, zodat de balk niet
   over twee regels valt. */
@media (max-width: 420px) {
	.nxg-month__nav {
		font-size: .78rem;
	}
}

/* ============================== wat deelnemers krijgen */

/* Dit stond nergens op de pagina, dus niemand wist het tot hij aan de
   toog stond. Nu staat het tussen de gegevens en de omschrijving, met de
   foto ernaast wanneer er een is. */
.nxg-ev__beloning {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-top: 1.5rem;
	padding: 1.15rem 1.25rem;
	border: 1px solid rgba( 18, 209, 118, .3 );
	border-left: 3px solid var(--nxg-ok);
	border-radius: 12px;
	background: rgba( 18, 209, 118, .06 );
}

.nxg-ev__beloning-foto {
	flex: 0 0 auto;
	width: 6rem;
}

.nxg-ev__beloning-foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

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

.nxg-ev__beloning-kop {
	margin: 0 0 .2rem;
	color: var(--nxg-ok);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nxg-ev__beloning-wat {
	margin: 0 0 .35rem;
	color: var(--nxg-heading);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.35;
}

.nxg-ev__beloning-klein {
	margin: 0;
	color: var(--nxg-muted);
	font-size: .85rem;
	line-height: 1.5;
}

@media (max-width: 520px) {
	.nxg-ev__beloning-foto {
		width: 4.5rem;
	}
}

/* Een kaart die meteen laadt: dan is er geen knop en staat het kadertje
   er gewoon. */
.nxg-map--auto {
	overflow: hidden;
	border: 1px solid var(--nxg-line);
	border-radius: var(--nxg-radius);
}

.nxg-map--auto iframe {
	display: block;
	width: 100%;
	height: 24rem;
	border: 0;
	filter: grayscale( .25 ) contrast( 1.05 );
}

@media (max-width: 640px) {
	.nxg-map--auto iframe {
		height: 18rem;
	}
}

/* De kaart van OpenStreetMap is licht van zichzelf. Omkeren en de kleur
   een halve draai geven maakt er een donkere van waarin blauw blauw
   blijft, zodat ze bij de rest van de site past. */
.nxg-map--osm iframe {
	filter: invert( 1 ) hue-rotate( 180deg ) brightness( .92 ) contrast( .92 ) saturate( .85 );
}

/* De bronvermelding is verplicht bij OpenStreetMap, en terecht: het is
   werk van vrijwilligers. */
.nxg-map__bron {
	margin: .6rem 0 0;
	color: var(--nxg-muted);
	font-size: .78rem;
	text-align: right;
}

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

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

/* ==================================== de huisregels */

.nxg-signup__regels {
	margin: 1.25rem 0 0;
	color: var(--nxg-muted);
	font-size: .88rem;
	line-height: 1.55;
}

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

.nxg-ev__regels {
	margin: 1.25rem 0 0;
	text-align: center;
}

.nxg-ev__regels a {
	color: var(--nxg-muted);
	font-size: .88rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.nxg-huisregels__datum {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--nxg-line);
	color: var(--nxg-muted);
	font-size: .85rem;
}

/* ============================ de sociale kanalen bovenaan */

/* Kleine iconen achteraan het menu. Ze mogen opvallen zonder te
   concurreren met de navigatie zelf. */
/* Een eigen strook helemaal onderaan, over de volle breedte. Eerder werd
   dit in de voettekst van het thema geschoven; waar het dan belandde, hing
   af van hoe die opgebouwd is. */
.nxg-voetsocial {
	padding: 1.75rem 1.25rem;
	border-top: 1px solid rgba( 164, 180, 195, .12 );
	background: #080E18;
	text-align: center;
}

.nxg-voetsocial__binnen {
	max-width: 74rem;
	margin: 0 auto;
}

.nxg-voetsocial__kop {
	margin: 0 0 .9rem;
	color: #8B99AC;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.nxg-voetsocial__rij {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .65rem;
}

/* In hun eigen kleur, niet grijs: dan staan ze er bewust en niet als
   restje. */
.nxg-voetsocial__rij a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid rgba( 164, 180, 195, .18 );
	border-radius: 50%;
	background: color-mix( in srgb, var(--nxg-merk, #00C4F4) 14%, transparent );
	color: var(--nxg-merk, #00C4F4);
	transition: background .15s, color .15s, transform .15s;
}

.nxg-voetsocial__rij a:hover {
	border-color: var(--nxg-merk, #00C4F4);
	background: var(--nxg-merk, #00C4F4);
	color: #FFFFFF;
	transform: translateY( -2px );
}

.nxg-voetsocial__rij svg {
	width: 19px;
	height: 19px;
}

/* De knoppen op de startpagina, nu zonder uitleg eronder. */



/* ======================================= de sociale kanalen als tegels */

/* Tegels met het logo groot en de naam eronder. Eerder stond hier een
   lijst met per kanaal drie zinnen uitleg; niemand leest die om op een
   knop te klikken die hij toch herkent aan zijn logo. */
.nxg-social {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 9rem, 1fr ) );
	gap: .85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.nxg-social__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .65rem;
	height: 100%;
	padding: 1.5rem 1rem;
	border: 1px solid var(--nxg-line);
	border-radius: 14px;
	background:
		radial-gradient( 80% 100% at 50% 0%, color-mix( in srgb, var(--nxg-merk, #00C4F4) 14%, transparent ), transparent 70% ),
		var(--nxg-panel);
	color: var(--nxg-text);
	text-align: center;
	text-decoration: none;
	transition: border-color .15s, transform .15s;
}

.nxg-social__item a:hover {
	border-color: var(--nxg-merk, var(--nxg-glow));
	color: var(--nxg-heading);
	transform: translateY( -2px );
}

/* Het logo in de kleur van het kanaal, in een rond vlak. */
.nxg-social__icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	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: 28px;
	height: 28px;
}

.nxg-social__item a:hover .nxg-social__icoon {
	background: var(--nxg-merk, #00C4F4);
	color: #FFFFFF;
}

.nxg-social__naam {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .01em;
}

@media (max-width: 480px) {
	.nxg-social {
		grid-template-columns: repeat( 2, 1fr );
	}

	.nxg-social__item a {
		padding: 1.15rem .75rem;
	}

	.nxg-social__icoon {
		width: 2.75rem;
		height: 2.75rem;
	}
}

/* De onderste regel van de strook: het jaartal en de juridische links.
   Zo kan de voettekst van het thema helemaal weg. */
.nxg-voetsocial__slot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .4rem 1.5rem;
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba( 164, 180, 195, .1 );
	color: #6E7C8F;
	font-size: .82rem;
}

.nxg-voetsocial__links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .4rem 1.25rem;
	justify-content: center;
}

.nxg-voetsocial__links a {
	color: #8B99AC;
	text-decoration: none;
}

.nxg-voetsocial__links a:hover {
	color: var(--nxg-glow, #00C4F4);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ======================= wat niet bij je spellen hoort */

/* Vervagen in plaats van verbergen. Zo zie je nog altijd dat er iets te
   doen is, zonder dat het je aandacht wegneemt van wat jij speelt. Het
   blijft gewoon aanklikbaar. */
.nxg-calendar__event.is-gedimd,
.nxg-month__event.is-gedimd {
	opacity: .38;
	filter: saturate( .55 );
	transition: opacity .18s, filter .18s;
}

/* Bij het aanwijzen komt het weer helemaal terug: wie er belangstelling
   voor heeft, hoort niet tegen een half onleesbaar kaartje aan te kijken. */
.nxg-calendar__event.is-gedimd:hover,
.nxg-calendar__event.is-gedimd:focus-within,
.nxg-month__event.is-gedimd:hover,
.nxg-month__event.is-gedimd:focus-within {
	opacity: 1;
	filter: none;
}

/* Wie liever geen bewegende overgangen heeft, krijgt ze niet. */
@media (prefers-reduced-motion: reduce) {
	.nxg-calendar__event.is-gedimd,
	.nxg-month__event.is-gedimd {
		transition: none;
	}
}

/* Wie de site gemaakt heeft. Kleiner en rustiger dan de rest van de
   voettekst: het hoort er te staan zonder aandacht weg te nemen. */
.nxg-voetsocial__maker {
	margin: .9rem 0 0;
	color: #5F6C7D;
	font-size: .76rem;
	text-align: center;
}

.nxg-voetsocial__maker a {
	color: #7C8A9C;
	text-decoration: none;
}

.nxg-voetsocial__maker a:hover {
	color: var(--nxg-glow, #00C4F4);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ================================== de inschrijfpagina van de nieuwsbrief */



.nxg-inschrijf__intro {
	margin: 0 0 1.5rem;
	color: var(--nxg-muted);
	font-size: 1.02rem;
	line-height: 1.65;
}

/* Wat je krijgt, met een vinkje ervoor. */
.nxg-ui .nxg-inschrijf__punten {
	display: grid;
	gap: .6rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.nxg-ui .nxg-inschrijf__punten li {
	position: relative;
	margin: 0;
	padding-left: 2.15rem;
	color: var(--nxg-text);
	font-size: 1rem;
	line-height: 1.35rem;
	list-style: none;
}

/* Het vinkje in een rond vlakje. Eerder waren het twee randen die het
   thema wegpoetste, en dan stond er niets voor de regel. */
.nxg-ui .nxg-inschrijf__punten li::before {
	content: "✓";
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: rgba( 0, 196, 244, .16 );
	color: #00C4F4;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1;
}

/* Het veld dat enkel een robot invult. */
.nxg-inschrijf__val {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* De kleine letters onder de knop op de inschrijfpagina. */
.nxg-inschrijf__klein {
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--nxg-line);
	color: var(--nxg-muted);
	font-size: .84rem;
	line-height: 1.7;
}

.nxg-inschrijf__klein a {
	display: inline-block;
	margin-top: .35rem;
	color: var(--nxg-glow);
}

.nxg-inschrijf__melding {
	margin: 0 0 1.25rem;
	padding: .9rem 1.15rem;
	border: 1px solid var(--nxg-line);
	border-left: 3px solid var(--nxg-glow);
	border-radius: 10px;
	background: rgba( 0, 196, 244, .07 );
	color: var(--nxg-text);
}

.nxg-inschrijf__melding[data-soort="let"] {
	border-left-color: #E5484D;
	background: rgba( 229, 72, 77, .1 );
}

/* De melding wanneer iemand bij het registreren de nieuwsbrief aanvinkte
   terwijl hij er al op stond. */
.nxg-brief__al {
	margin: 0 0 1rem;
	padding: .75rem 1rem;
	border: 1px solid var(--nxg-line);
	border-left: 3px solid var(--nxg-glow);
	border-radius: 10px;
	background: rgba( 0, 196, 244, .07 );
	color: var(--nxg-text);
	font-size: .9rem;
}