/* De lettertypen staan hier ÓÓK, en niet alleen in CubeRunnerz.css. De
   mail-pagina's (Sync/Reset, Mail/preferences, Sync/Account, Support) draaien
   buiten de SPA om en laden via Server\Classes\Page enkel dit bestand — zonder
   deze @font-face-regels bestaan 'headers' en 'p' daar niet en viel alles terug
   op het systeemlettertype. Dubbel declareren kost niets: de browser haalt een
   bestand met dezelfde URL maar één keer op. */
@font-face
{
	font-family: headers;
	src: url("/public/fonts/SSD.ttf");
	font-display: swap;
}
@font-face
{
	font-family: p;
	src: url("/public/fonts/Acme-Regular.ttf");
	font-display: swap;
}
@font-face
{
	font-family: 'font3';
	src: url("/public/fonts/Rheiborn.otf");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* cubelegend-auth.css — de zeven auth-schermen (design/Auth/"Auth Screens.dc.html",
   393x852) plus het app-brede knoppensysteem uit design/Auth/README.md en de
   schil van de losstaande pagina's (wachtwoord herstellen, mailvoorkeuren,
   apparaten, help). Laadt NA CubeRunnerz.css.

   Geen CSS-variabelen, hex-met-alpha, 'headers' voor koppen en cijfers, 'p' voor
   lopende tekst — dezelfde afspraken als de rest van de sheet. De @font-face
   voor die twee (plus font3) staat bovenaan dit bestand: in de app declareert
   CubeRunnerz.css ze ook, maar op de mail-pagina's is dit de enige sheet.

   Deze sheet wordt ook los ingeladen door Server\Classes\Page (de pagina's die
   vanuit een mail geopend worden en dus zonder de SPA draaien). Alles onder
   sectie 1 en 6 moet daarom overeind blijven zonder CubeRunnerz.css. */


/* ---- 1. Knoppensysteem (app-breed) ---------------------------------------
   De README noemt deze twee expliciet het nieuwe systeem voor de HELE app, niet
   alleen voor auth. Primair = goud, één per scherm; secundair = donkere ghost,
   voor de uitweg. Nooit twee primairen naast elkaar: een paar is altijd
   secundair + primair, in die leesvolgorde.
-------------------------------------------------------------------------- */

.cl-btn-frame
{
	border: 4px solid #000;
	border-radius: 15px;
	display: block;
	text-decoration: none;
}
.cl-btn-frame--sm { border-radius: 14px; }

.cl-btn
{
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 13px;
	border: 3px solid #ffe07a;
	border-radius: 11px;
	background: linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	overflow: hidden;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-family: headers, sans-serif;
	font-size: 18px;
	letter-spacing: 1.5px;
	color: #3a1c00;
}
/* De glans ligt ONDER het label: vandaar ::before en niet ::after. */
.cl-btn::before
{
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: calc(100% - 6px);
	height: 44%;
	background: #fff;
	opacity: .32;
	border-radius: 6px;
	pointer-events: none;
}
.cl-btn > * { position: relative; }
.cl-btn:active { transform: translateY(1px); }
.cl-btn[disabled],
.cl-btn.is-disabled,
.cl-btn.inactive
{
	filter: grayscale(.7);
	opacity: .55;
	pointer-events: none;
}
.cl-btn--sm { padding: 12px; font-size: 15px; letter-spacing: 1px; border-radius: 10px; }

.cl-btn-secondary
{
	display: block;
	box-sizing: border-box;
	padding: 12px 16px;
	border: 2px solid #ffffff2b;
	border-radius: 10px;
	background: #00000073;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-family: headers, sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	color: #ffffffab;
}
.cl-btn-secondary:hover { border-color: #ffffff45; color: #fff; }
.cl-btn-secondary:active { transform: translateY(1px); }

/* Secundair hugt zijn inhoud, primair neemt de rest. */
.cl-btn-row { display: flex; gap: 9px; }
.cl-btn-row > .cl-btn-frame:first-child { flex: none; }
.cl-btn-row > .cl-btn-frame:last-child  { flex: 1; }

/* Wachtstand op de primaire knop terwijl er een verzoek loopt. */
.cl-btn.is-busy { pointer-events: none; opacity: .8; }
.cl-btn.is-busy > span { visibility: hidden; }
.cl-btn.is-busy::after
{
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 18px; height: 18px;
	margin: -9px 0 0 -9px;
	border: 3px solid #3a1c0055;
	border-top-color: #3a1c00;
	border-radius: 50%;
	animation: clAuthSpin .7s linear infinite;
}
@keyframes clAuthSpin { to { transform: rotate(360deg); } }


/* ---- 2. Bestaande knoppen naar hetzelfde goud ----------------------------
   De README wil dit goud app-breed. Een echte migratie van ~92 call-sites naar
   .cl-btn-frame + <span> is een aparte, risicovolle ingreep: .btn-orange is op
   51 plekken óók een layouthaak (flex:1, !important-lettergroottes, margins).
   Daarom hier alleen de SKIN overgezet, en met box-shadow in plaats van border
   zodat er geen enkele pixel aan de doosafmetingen verandert.
-------------------------------------------------------------------------- */

login button,
landing button,
tutorial button,
.btn-orange
{
	background: linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	box-shadow: 0 0 0 4px #000, inset 0 0 0 3px #ffe07a;
	color: #3a1c00;
	text-shadow: none;
	border-radius: 11px;
}
login button:not(.inactive):active,
landing button:not(.inactive):active,
tutorial button:not(.inactive):active,
.btn-orange:not(.inactive):active
{
	background: linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	transform: translateY(1px);
}

/* De oude glans is een witte band over de bovenste 20% op .5; het ontwerp
   vraagt 44% op .32. Zelfde element, andere maten. */
tutorial .buttons button:after,
landing button:after,
.btn-orange::after,
.btn.btn-gold::after
{
	width: calc(100% - 6px);
	height: 44%;
	margin: 3px;
	background: #fff;
	opacity: .32;
	border-radius: 6px;
}

/* .btn_action is de kleinere primair uit profiel/social/chat (DUEL, REMATCH,
   SEND LIFE, …) — 26 call-sites, en hij droeg nog het oude #ffd700 → #ff7700.
   Zelfde goud, maar met een dunner kader: op 34px hoogte oogt de volle 4px
   zwarte rand log, dus 3px + 2px binnenrand. */
.btn_action
{
	background: linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	box-shadow: 0 0 0 3px #000, inset 0 0 0 2px #ffe07a;
	border: 0;
	color: #3a1c00;
	text-shadow: none;
	margin: 3px;
}
.btn_action:active { transform: translateY(1px); }
/* De niet-primaire varianten volgen de ghost, met hun eigen signaalkleur. */
.btn_action.is-secondary,
.btn_action.is-pending,
.btn_action.is-done
{
	background: #00000073;
	box-shadow: 0 0 0 3px #000, inset 0 0 0 2px #ffffff2b;
	text-shadow: none;
}
.btn_action.is-secondary { color: #ffffffab; }
.btn_action.is-pending	{ color: #ffffff8a; box-shadow: 0 0 0 3px #000, inset 0 0 0 2px #ffffff26; }
.btn_action.is-done		{ color: #5ce08a; box-shadow: 0 0 0 3px #000, inset 0 0 0 2px #5ce08a5c; }

/* .btn-gold was een aparte goudverloop-knop (VIP-geschenk); hij hoort nu bij
   hetzelfde systeem, anders staan er twee soorten goud naast elkaar. */
.btn-gold
{
	/* position is DRAGEND, geen opmaak: de glans-:after hierboven is
	   position:absolute met top/left:0 en een hoogte in PROCENTEN. Zonder een
	   gepositioneerde knop pakt die de dichtstbijzijnde gepositioneerde
	   voorouder als kader — in de duel-summary is dat .summary_pop, en dan
	   wordt "44%" ineens 44% van het hele paneel: een witte band van 32% over
	   de kop en de tabs. .btn-orange draagt daarom al position:relative
	   (CubeRunnerz.css); .btn-gold kwam pas in de glansregel terecht toen die
	   werd uitgebreid, en miste hem nog. */
	position: relative;
	background: linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	box-shadow: 0 0 0 4px #000, inset 0 0 0 3px #ffe07a;
	color: #3a1c00;
	text-shadow: none;
}

/* De paarse bevel is geen knop meer maar een containerbehandeling (README).
   Waar hij nog als actie gebruikt wordt, leest hij nu als de ghost-variant. */
.btn-purple
{
	background: #00000073;
	box-shadow: 0 0 0 4px #000, inset 0 0 0 2px #ffffff2b;
	color: #ffffffab;
	border-radius: 10px;
	font-size: 15px;
	text-shadow: none;
}
.btn-purple:active { background: #00000073; transform: translateY(1px); }
.btn-purple::after { display: none; }


/* ---- 3. Schermschil ------------------------------------------------------ */

.cl_auth
{
	position: fixed;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	background: #0b0318;
	font-family: p, sans-serif;
	color: #fff;
	-webkit-tap-highlight-color: transparent;
}
/* CubeRunnerz.css bevat `*:not(input) { font-family: font3 }` — een universele
   regel die op elk kind hier wint van de font-family op .cl_auth zelf. Vandaar
   deze even brede, maar zwaardere tegenhanger: binnen auth is 'p' de lopende
   tekst, en alles wat 'headers' hoort te zijn zet dat zelf. */
.cl_auth *:not(input) { font-family: p, sans-serif; }
.cl_auth .cl_auth__titel,
.cl_auth .cl_auth__merk b,
.cl_auth .cl_auth__groot,
.cl_auth .cl_auth__scheiding,
.cl_auth .cl_auth__passkey_tekst b,
.cl_auth .cl_auth__bevel_tekst b,
.cl_auth .cl_auth__teller b,
.cl_auth .cl_auth__voet a,
.cl_auth .cl_auth__vel h2,
.cl_auth .cl-btn,
.cl_auth .cl-btn > span,
.cl_auth .cl-btn-secondary,
.cl_auth .cl_auth__code input { font-family: headers, sans-serif; }

.cl_auth__bg
{
	position: absolute;
	inset: 0;
	/* Dezelfde receptvolgorde als pvp/profile/summary. De dekking van de
	   middelste laag is cc→f2 en niet donkerder: bij d9→f7 verdwijnt de
	   cbg0-textuur volledig en blijft er een egale paarse vlek over. */
	background:
		radial-gradient(ellipse at 50% 8%, #9a00ff55, transparent 62%),
		linear-gradient(#0b0318cc, #0b0318f2),
		url(/public/img/cubelegend/cbg0.jpeg) center/cover,
		#0b0318;
	pointer-events: none;
}
.cl_auth__scherm
{
	position: relative;
	height: 100%;
	max-width: 393px;
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 0 20px 22px;
	padding-bottom: calc(22px + env(safe-area-inset-bottom));
}

.cl_auth__merk
{
	flex: none;
	padding: 58px 0 22px;
	text-align: center;
}
.cl_auth__merk b
{
	display: block;
	font-family: headers, sans-serif;
	font-size: 42px;
	line-height: 38px;
	letter-spacing: 2px;
	font-weight: normal;
	text-shadow: 0 4px 0 #000, 0 0 26px #9a00ff88;
}
.cl_auth__merk b i { font-style: normal; color: #FFC107; }
.cl_auth__merk small
{
	display: block;
	margin-top: 8px;
	font-size: 11px;
	letter-spacing: 3px;
	color: #ffffff7a;
}

/* Kop met terugknop, voor de schermen die uit een ander scherm komen. */
.cl_auth__kop
{
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 52px 0 16px;
	padding-top: calc(52px + env(safe-area-inset-top));
}
.cl_auth__terug
{
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #00000073;
	border: 1px solid #ffffff26;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
}
.cl_auth__titel
{
	font-family: headers, sans-serif;
	font-size: 26px;
	letter-spacing: 1px;
	text-shadow: 0 3px 0 #000;
	text-align: left;
}
.cl_auth__sub { font-size: 10.5px; color: #ffffff7a; margin-top: 2px; text-align: left; }

.cl_auth__body
{
	flex: 1;
	min-height: 0;
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 13px;
	-webkit-overflow-scrolling: touch;
}
/* Schermen met weinig inhoud (login, wachtwoord vergeten) centreren; schermen
   die kunnen overlopen (registreren) beginnen bovenaan. */
.cl_auth__body.is-gecentreerd { justify-content: center; gap: 14px; }

.cl_auth__voet
{
	flex: none;
	padding-top: 14px;
	margin-top: 12px;
	border-top: 1px solid #ffffff14;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-size: 11px;
	color: #ffffff70;
	flex-wrap: wrap;
}
.cl_auth__voet a
{
	font-family: headers, sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	text-decoration: none;
	color: #FFC46B;
	cursor: pointer;
}


/* ---- 4. Velden ----------------------------------------------------------- */

.cl_auth__veld { display: block; }
.cl_auth__label
{
	display: block;
	font-size: 9px;
	letter-spacing: 1.5px;
	color: #ffffff70;
	margin-bottom: 5px;
	text-align: left;
}
.cl_auth__input
{
	display: flex;
	align-items: center;
	gap: 9px;
	background: #00000073;
	border: 1px solid #ffffff26;
	border-radius: 10px;
	padding: 11px 12px;
	box-sizing: border-box;
}
.cl_auth__input svg { flex: none; }
/* De globale input-regel in CubeRunnerz.css geeft elk veld een lichte vulling,
   een vaste hoogte en een oranje focusgloed. Binnen dit scherm moet daar niets
   van overblijven — vandaar de expliciete reset, inclusief !important voor de
   breedte die daar op calc(100% - 40px) staat. */
.cl_auth__input input
{
	flex: 1;
	min-width: 0;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: none;
	box-shadow: none !important;
	color: #fff;
	font-family: p, sans-serif;
	/* 16px, niet de 14px van het ontwerp: iOS zoomt onder de 16px alsnog in bij
	   focus, en de viewport staat app-breed op user-scalable=no — dan komt de
	   speler daar niet meer uit. */
	font-size: 16px;
}
.cl_auth__input input::placeholder { color: #ffffff45; }
.cl_auth__input.is-fout { border-color: #ff5a5a8a; }
.cl_auth__input.is-goed { border-color: #5ce08a6b; }

.cl_auth__toon
{
	flex: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: p, sans-serif;
	font-size: 9px;
	letter-spacing: 1px;
	color: #FFC46B;
}
.cl_auth__vrij
{
	flex: none;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 9px;
	color: #5ce08a;
	white-space: nowrap;
}
.cl_auth__vrij.is-bezet { color: #ff8a8a; }

.cl_auth__fout
{
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	color: #ff8a8a;
	text-align: left;
}
.cl_auth__fout:empty { display: none; }


/* ---- 5. Sterktemeter + eisenlijst (scherm 2 en 6) ------------------------- */

.cl_auth__sterkte { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.cl_auth__sterkte i
{
	flex: 1;
	height: 5px;
	border-radius: 3px;
	background: #ffffff1f;
	transition: background .2s;
}
.cl_auth__sterkte span { font-size: 9px; letter-spacing: .5px; color: #ffffff70; }
.cl_auth__sterkte.is-1 i:nth-child(1) { background: #ff8a5b; }
.cl_auth__sterkte.is-1 span { color: #ff8a5b; }
.cl_auth__sterkte.is-2 i:nth-child(-n+2) { background: #5ce08a; }
.cl_auth__sterkte.is-2 span { color: #5ce08a; }
.cl_auth__sterkte.is-3 i { background: #5ce08a; }
.cl_auth__sterkte.is-3 span { color: #5ce08a; }

.cl_auth__eisen
{
	border: 1px solid #ffffff1f;
	border-radius: 11px;
	background: #00000047;
	padding: 12px 13px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.cl_auth__eis
{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 10.5px;
	color: #ffffff70;
	text-align: left;
}
.cl_auth__eis.is-ok { color: #5ce08a; }
.cl_auth__eis i { flex: none; width: 12px; height: 12px; display: block; border: 2px solid currentColor; border-radius: 50%; }
.cl_auth__eis.is-ok i
{
	border: 0;
	background: none;
	/* Vinkje in plaats van cirkel zodra de eis gehaald is. */
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5.5 5.5L20 6.5'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5.5 5.5L20 6.5'/></svg>") center/contain no-repeat;
	background-color: currentColor;
}


/* ---- 6. Losse blokken ---------------------------------------------------- */

/* De passkey-kaart bovenaan scherm 1: de eerste keus, dus met een puls die
   zegt "begin hier". */
.cl_auth__passkey
{
	position: relative;
	border: 4px solid #000;
	border-radius: 15px;
	animation: clKeyPulse 2.6s ease-out infinite;
	cursor: pointer;
}
@keyframes clKeyPulse
{
	0%, 100% { box-shadow: 0 0 0 0 #ffc10744; }
	50% { box-shadow: 0 0 0 10px #ffc10700; }
}
.cl_auth__passkey_binnen
{
	border: 3px solid #ffca4d;
	border-radius: 11px;
	background: linear-gradient(0deg, #3a1c00 0%, #6b3a00 100%);
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.cl_auth__passkey_icoon
{
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #0000005e;
	border: 1px solid #ffffff2e;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cl_auth__passkey_tekst { flex: 1; min-width: 0; text-align: left; }
.cl_auth__passkey_tekst b
{
	display: block;
	font-family: headers, sans-serif;
	font-size: 15px;
	font-weight: normal;
	letter-spacing: .5px;
	text-shadow: 0 2px black;
}
.cl_auth__passkey_tekst small { display: block; font-size: 10px; color: #ffe6b0b8; margin-top: 2px; }

/* Paarse bevel als CONTAINER — de rol die hij volgens de README overhoudt. */
.cl_auth__bevel
{
	border: 4px solid #000;
	border-radius: 15px;
	cursor: pointer;
}
.cl_auth__bevel_binnen
{
	border: 3px solid #6631c3;
	border-radius: 11px;
	background: linear-gradient(0deg, rgba(88,0,147,1) 68%, rgba(154,0,255,1) 100%);
	box-shadow: inset 0 0 20px #00000055;
	padding: 11px 13px;
	display: flex;
	align-items: center;
	gap: 11px;
}
.cl_auth__bevel_binnen svg { flex: none; }
.cl_auth__bevel_tekst { flex: 1; min-width: 0; text-align: left; }
.cl_auth__bevel_tekst b
{
	display: block;
	font-family: headers, sans-serif;
	font-size: 13px;
	font-weight: normal;
	letter-spacing: .5px;
	text-shadow: 0 2px black;
}
.cl_auth__bevel_tekst small { display: block; font-size: 9.5px; color: #ffffff8a; margin-top: 2px; }

.cl_auth__of
{
	display: flex;
	align-items: center;
	gap: 10px;
}
.cl_auth__of i { flex: 1; height: 1px; background: #ffffff1f; }
.cl_auth__of span { font-size: 9px; letter-spacing: 2px; color: #ffffff5c; }

/* auto-fit i.p.v. vaste 4 kolommen: met Apple erbij zijn het er vijf, en een
   provider zonder sleutels valt weg — het rooster vult zich met wat er is */
.cl_auth__providers { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 9px; }
.cl_auth__provider { border: 3px solid #000; border-radius: 13px; cursor: pointer; text-decoration: none; display: block; }
.cl_auth__provider > div
{
	border: 2px solid #ffffff2b;
	border-radius: 9px;
	background: linear-gradient(0deg, #1b0b2e 0%, #2c1348 100%);
	padding: 13px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.cl_auth__provider span { font-size: 8px; letter-spacing: .5px; color: #ffffff8a; }
.cl_auth__provider:active { transform: translateY(1px); }

.cl_auth__regel
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1px;
	gap: 10px;
}
.cl_auth__link
{
	font-size: 10.5px;
	text-decoration: none;
	color: #FFC46B;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	font-family: p, sans-serif;
}

.cl_auth__check
{
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
	font-size: 10.5px;
	line-height: 15px;
	color: #ffffff9e;
	text-align: left;
}
.cl_auth__check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cl_auth__vink
{
	flex: none;
	margin-top: 1px;
	width: 15px;
	height: 15px;
	border-radius: 4px;
	border: 1px solid #ffffff3d;
	background: #00000073;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cl_auth__check input:checked + .cl_auth__vink { background: #FFC107; border-color: #FFC107; }
.cl_auth__check input:checked + .cl_auth__vink::after
{
	content: "";
	width: 10px;
	height: 10px;
	background: #3a1c00;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5.5 5.5L20 6.5'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5.5 5.5L20 6.5'/></svg>") center/contain no-repeat;
}
.cl_auth__check a { color: #FFC46B; text-decoration: none; }

.cl_auth__kader
{
	border: 1px solid #ffffff1f;
	border-radius: 11px;
	background: #00000047;
	padding: 12px 13px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 10.5px;
	line-height: 16px;
	color: #ffffff8a;
	text-align: left;
}
.cl_auth__kader svg { flex: none; margin-top: 1px; }
.cl_auth__kader b, .cl_auth__kader em { color: #FFC46B; font-style: normal; font-weight: normal; }
.cl_auth__kader.is-goud { border-color: #ffc1073d; background: #ffc1070f; color: #ffffffab; }

.cl_auth__voorwaarden
{
	margin: 2px 0 0;
	font-size: 9.5px;
	line-height: 15px;
	color: #ffffff5c;
	text-align: center;
}
.cl_auth__voorwaarden a { color: #FFC46B; text-decoration: none; }


/* ---- 7. Wachten op mail (scherm 5) --------------------------------------- */

.cl_auth__midden
{
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
	text-align: center;
}
.cl_auth__ring { position: relative; width: 104px; height: 104px; }
.cl_auth__ring::before
{
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: conic-gradient(#FFC107, #ff7ae3, #45adff, #FFC107);
	animation: clRingSpin 7s linear infinite;
	opacity: .75;
}
.cl_auth__ring > span
{
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #2a0b46;
	display: flex;
	align-items: center;
	justify-content: center;
}
@keyframes clRingSpin { to { transform: rotate(360deg); } }
.cl_auth__groot
{
	margin: 0;
	font-family: headers, sans-serif;
	font-size: 24px;
	letter-spacing: 1px;
	text-shadow: 0 3px 0 #000;
}
.cl_auth__tekst
{
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	color: #ffffffab;
	max-width: 290px;
	text-align: center;
}
.cl_auth__tekst em { font-style: normal; color: #FFC46B; }
.cl_auth__teller
{
	border: 1px solid #ffffff1f;
	border-radius: 11px;
	background: #00000047;
	padding: 10px 14px;
	font-size: 10.5px;
	color: #ffffff8a;
}
.cl_auth__teller b { font-family: headers, sans-serif; font-weight: normal; color: #fff; }
.cl_auth__onder { flex: none; display: flex; flex-direction: column; gap: 10px; }


/* ---- 8. Code-invoer (scherm 7) ------------------------------------------- */

.cl_auth__code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.cl_auth__code input
{
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	box-sizing: border-box;
	border: 1px solid #ffffff26 !important;
	border-radius: 10px !important;
	background: #00000073 !important;
	box-shadow: none !important;
	padding: 14px 0 !important;
	text-align: center;
	font-family: headers, sans-serif;
	font-size: 22px;
	color: #fff;
	outline: none;
	-moz-appearance: textfield;
}
.cl_auth__code input::-webkit-outer-spin-button,
.cl_auth__code input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cl_auth__code input:focus
{
	border: 2px solid #FFC107 !important;
	background: #ffc1071a !important;
	color: #FFC46B;
	padding: 13px 0 !important;
}


/* ---- 9. Passkey-vel (scherm 3) ------------------------------------------- */

.cl_auth__vel_onder
{
	position: absolute;
	inset: 0;
	background: #0b031899;
	z-index: 1;
}
.cl_auth__vel
{
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	bottom: calc(14px + env(safe-area-inset-bottom));
	max-width: 365px;
	margin: 0 auto;
	border: 4px solid #000;
	border-radius: 22px;
	z-index: 2;
}
.cl_auth__vel_binnen
{
	border: 3px solid #6631c3;
	border-radius: 18px;
	background: linear-gradient(0deg, rgba(88,0,147,1) 72%, rgba(154,0,255,1) 100%);
	box-shadow: inset 0 0 26px #00000066;
	padding: 22px 20px 20px;
	padding-bottom: calc(20px + env(safe-area-inset-bottom));
	text-align: center;
}
.cl_auth__greep { width: 38px; height: 4px; border-radius: 3px; background: #ffffff40; margin: 0 auto 18px; }
.cl_auth__vel_ring { position: relative; width: 88px; height: 88px; margin: 0 auto 16px; }
.cl_auth__vel_ring::before
{
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: conic-gradient(#FFC107, #ff7ae3, #45adff, #FFC107);
	animation: clRingSpin 4s linear infinite;
	opacity: .9;
}
.cl_auth__vel_ring > span
{
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #2a0b46;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cl_auth__vel h2
{
	margin: 0;
	font-family: headers, sans-serif;
	font-size: 20px;
	letter-spacing: 1px;
	text-shadow: 0 3px black;
}
.cl_auth__vel p
{
	margin: 8px 0 18px;
	font-size: 11.5px;
	line-height: 17px;
	color: #ffffffab;
}
.cl_auth__vel p em { font-style: normal; color: #FFC46B; }


/* ---- 10. Losstaande pagina's (Server\Classes\Page) ------------------------
   Wachtwoord herstellen, mailvoorkeuren, apparaten, help. Zelfde chroom, maar
   scrollend in plaats van schermvullend, want ze kunnen langer zijn dan 852px.
-------------------------------------------------------------------------- */

body.cl_auth_page { margin: 0; background: #0b0318; }
.cl_auth[data-standalone] { position: relative; min-height: 100vh; overflow: visible; }
.cl_auth[data-standalone] .cl_auth__scherm { height: auto; min-height: 100vh; }
.cl_auth[data-standalone] .cl_auth__body { overflow: visible; gap: 14px; padding-bottom: 20px; }

.cl_auth__melding
{
	border: 1px solid #ffffff1f;
	border-radius: 11px;
	background: #00000047;
	padding: 12px 13px;
	font-size: 11.5px;
	line-height: 17px;
	color: #ffffffab;
	text-align: left;
}
.cl_auth__melding.is-ok { border-color: #5ce08a6b; }
.cl_auth__melding.is-fout { border-color: #ff5a5a8a; color: #ffc9c9; }
.cl_auth__melding.is-info { border-color: #ffffff1f; }

.cl_auth__klein { font-size: 10px; line-height: 15px; color: #ffffff5c; margin: 0; text-align: left; }

.cl_auth__scheiding
{
	font-family: headers, sans-serif;
	font-size: 11px;
	letter-spacing: 2.5px;
	color: #FFC46B;
	margin-top: 6px;
	text-align: left;
}
.cl_auth__lijst { display: flex; flex-direction: column; gap: 8px; }
.cl_auth__rij
{
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid #ffffff1f;
	border-radius: 11px;
	background: #00000047;
	padding: 12px 13px;
}
.cl_auth__rij_tekst { flex: 1; min-width: 0; text-align: left; }
.cl_auth__rij_tekst b { display: block; font-size: 12.5px; color: #EDE7F6; }
.cl_auth__rij_tekst small { display: block; font-size: 10px; line-height: 15px; color: #ffffff70; margin-top: 3px; }
.cl_auth__rij form { flex: none; margin: 0; }

.cl_auth__toggle
{
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
	border: 1px solid #ffffff1f;
	border-radius: 11px;
	background: #00000047;
	padding: 13px;
}
.cl_auth__toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cl_auth__toggle .cl_auth__vink { margin-top: 2px; }
.cl_auth__toggle input:checked + .cl_auth__vink { background: #FFC107; border-color: #FFC107; }
.cl_auth__toggle input:checked + .cl_auth__vink::after
{
	content: "";
	width: 10px;
	height: 10px;
	background: #3a1c00;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5.5 5.5L20 6.5'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5.5 5.5L20 6.5'/></svg>") center/contain no-repeat;
}
.cl_auth__toggle_tekst { flex: 1; text-align: left; }
.cl_auth__toggle_tekst b { display: block; font-size: 13px; color: #EDE7F6; }
.cl_auth__toggle_tekst small { display: block; font-size: 10.5px; line-height: 15px; color: #ffffff70; margin-top: 3px; }

.cl_auth_page a { color: #FFC46B; }
.cl_auth_page form { margin: 0; display: flex; flex-direction: column; gap: 13px; }


/* ---- 11. Kleine schermen ------------------------------------------------- */

@media (max-height: 700px)
{
	.cl_auth__merk { padding: 34px 0 14px; }
	.cl_auth__merk b { font-size: 34px; line-height: 32px; }
	.cl_auth__kop { padding-top: calc(30px + env(safe-area-inset-top)); }
	.cl_auth__body.is-gecentreerd { justify-content: flex-start; }
}


/* ---- 2b. De laatste plekken met het oude goud ---------------------------
   Deze sheet laadt ná pvp/profile/summary/showcase, maar die hebben eigen,
   specifiekere selectors — vandaar dat ze hier bij naam terugkomen. Het gaat
   telkens om hetzelfde: het oude #ffd700 → #ff7700 met een witte, zwart
   omlijnde letter, terwijl het systeem vraagt om
   linear-gradient(0deg, #e09b00, #FFC107) met #3a1c00.

   Ook de actieve pillen en subtabs staan hierbij: de README zet tabs en
   knoppen expliciet in één systeem.
-------------------------------------------------------------------------- */

.summary_pop .btn-gold,
.chat_composer__row .btn_send
{
	background: linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	box-shadow: 0 0 0 3px #000, inset 0 0 0 2px #ffe07a;
	color: #3a1c00;
	text-shadow: none;
}

.subtabs .tab-btn.active,
.range_toggle span.active,
.pvp_sheet_tab.aan,
.summary_subtabs__btn.active,
.summary_chips__chip.active,
.summary_sort span.is-active,
.collectie_telling span.is-active
{
	background: linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	box-shadow: none;
	color: #3a1c00;
	text-shadow: none;
}

/* De actieve view-tab binnen een drawer (Boosters / Extenders / Perks in het
   prelaunch-scherm). Staat in CubeRunnerz.css met !important, dus die moet hier
   terug — anders wint het oude oranje van deze regel. */
[view-wrapper="1"] [view-change="1"],
[view-wrapper="2"] [view-change="2"],
[view-wrapper="3"] [view-change="3"],
[view-wrapper="4"] [view-change="4"]
{
	background: linear-gradient(0deg, #e09b00 0%, #FFC107 100%) !important;
	color: #3a1c00 !important;
	text-shadow: none !important;
}

/* Bewust NIET omgezet: dit zijn geen knoppen maar gevulde voortgangssegmenten
   (bank-/energie-/itemPicker-balken, .property_step.active) en de gouden
   accentkaart .pvp_sectie_kaart.goud. Die mogen hun eigen oranje houden. */

/* ── spelen zonder account (13 sep) ───────────────────────────────────────── */
.cl_auth__gast { display:block; margin-top:2px; }
.cl_auth__gast .cl-btn-secondary { width:100%; }
.cl_auth__gast_nb
{
	margin:8px 6px 0;
	font-size:11px;
	line-height:1.4;
	color:#ffffff8a;
	text-align:center;
	text-wrap:pretty;
}
.cl-btn-secondary.is-busy { opacity:.6; pointer-events:none; }