/* cubelegend-personal.css — het persoonlijke menu, zijn subschermen, de
   speel-drawer en de PvP-uitlegvellen (design/Personal Menu/"Personal Menu.dc.html",
   14 frames, 393x852). Laadt NA CubeRunnerz.css en NA cubelegend-auth.css
   (die bezit het knoppensysteem; hier wordt het alleen gebruikt).

   Geen CSS-variabelen, hex-met-alpha, 'headers' voor koppen en cijfers, 'p' voor
   lopende tekst. Fonts worden hier niet opnieuw gedeclareerd.

   Alle panelen volgen hetzelfde recept: een ZWART kader van 4px eromheen, en
   daarbinnen het paneel zelf met een dunnere rand. Het zwart is wat de app zijn
   uitgesneden look geeft — het is een apart element omdat een border-radius
   anders de haarlijn opeet. */


/* ---- 1. Schil — de bewezen sidepanel en drawer ---------------------------
   Het menu gebruikt het top_overlayed-recept (schuift van rechts in) net als de
   game-summary, en de speel-drawer gebruikt bottom_drawer. Beide krijgen hun
   beweging én hun sluitgebaar van addSwipeClose; hier staat alleen de
   achtergrond en de indeling, geen tweede paneelmechaniek.
-------------------------------------------------------------------------- */

/* Achtergrond volgens de designframes: basis #0b0318, cbg0 op 20%, en een
   gradientwaas — i.p.v. de standaard cbg2 + zwart .5 van .top_overlayed. */
.top_overlayed.pm_pop { background: #0b0318; }
.top_overlayed.pm_pop:after
{
	background: url(/public/img/cubelegend/cbg0.jpeg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	opacity: .2;
}
.top_overlayed.pm_pop:before { background: linear-gradient(#0b0318cc, #0b0318f2); opacity: 1; }

.pm_pop
{
	font-family: p, sans-serif;
	color: #fff;
	-webkit-tap-highlight-color: transparent;
}

/* De speel-drawer: het vel binnen bottom_drawer__content — hetzelfde recept als
   de missie-drawer (cubelegend-animals.css .an_lade_vel): zwarte bovenrand,
   28px-hoeken, tint die naar de nachtkleur loopt, lichte glanslijn — hier in
   paars i.p.v. de disciplinekleur (feedback 2 nov 2026). */
.bottom_drawer__content.pm_drawer
{
	border-top: 4px solid #000;
	border-radius: 28px 28px 0 0;
	background: linear-gradient(180deg, #2a0650, #14062a 48%);
	box-shadow: 0 -20px 50px #000000aa, inset 0 3px 0 #b04dff55;
	font-family: p, sans-serif;
	color: #fff;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
}
/* de generieke greep van .bottom_drawer__content (::before) uit: de lade tekent
   er zelf één, exact als de missie-drawer */
.bottom_drawer__content.pm_drawer::before, .bottom_drawer__content.pm_drawer::after { display: none; }
.pm_drawer .pm_greep { flex: none; padding: 10px 0 0; text-align: center; }
.pm_drawer .pm_greep i { display: inline-block; width: 44px; height: 5px; border-radius: 3px; background: #ffffff40; }
.pm_drawer .pm_greep + .pm_mode_kop { padding-top: 8px; }

.pm_greep
{
	flex: none;
	padding: 10px 0 0;
	text-align: center;
}
.pm_greep i
{
	display: inline-block;
	width: 44px;
	height: 4px;
	border-radius: 3px;
	background: #ffffff33;
}

/* Verborgen scrollbar — elke scrollende zone in een vel draagt dit. */
.sheet-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.sheet-scroll::-webkit-scrollbar { display: none; }

.pm_body
{
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 0 14px 18px;
	padding-bottom: calc(18px + env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	gap: 12px;
	-webkit-overflow-scrolling: touch;
}

/* Zwart kader; de radius is telkens die van het paneel + 4. */
.pm_kader			{ border: 4px solid #000; border-radius: 16px; }
.pm_kader--groot	{ border-radius: 18px; }
.pm_kader--tegel	{ border-radius: 17px; }
.pm_kader--klein	{ border-radius: 13px; }

/* Verhoogd paneel: de standaard drager van inhoud. */
.pm_paneel
{
	border: 2px solid #ffffff21;
	border-radius: 12px;
	background: linear-gradient(160deg, #3d1a63, #240f3d);
	padding: 14px;
	box-sizing: border-box;
}
.pm_paneel--groot { border-radius: 14px; }
.pm_paneel--tegel { border-radius: 13px; }

/* Verzonken paneel: lijsten en secundaire informatie. */
.pm_verzonken
{
	border: 2px solid #ffffff1c;
	border-radius: 12px;
	background: #00000047;
	overflow: hidden;
}

/* Positief (groen) en informatief (blauw) — voor klaar-badges en uitleg. */
.pm_paneel--positief
{
	border-color: #5ce08a5c;
	background: linear-gradient(160deg, #26502f, #14291b);
}
.pm_paneel--info
{
	border-color: #7ad4ff45;
	background: linear-gradient(160deg, #1d3d5c, #12233a);
}

.pm_rij
{
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 14px;
	border-bottom: 1px solid #00000073;
	cursor: pointer;
}
.pm_rij:last-child { border-bottom: 0; }
.pm_rij svg { flex: none; }
.pm_rij__label
{
	flex: 1;
	min-width: 0;
	font-family: headers, sans-serif;
	font-size: 13px;
	letter-spacing: .5px;
	color: #ffffffd6;
}
.pm_rij__extra { font-size: 9.5px; color: #7ad4ff; }


/* ---- 2. Typografie ------------------------------------------------------ */

/* CubeRunnerz.css bevat `*:not(input) { font-family: font3 }` — een universele
   regel die elk kind hier zou overnemen. Deze even brede tegenhanger zet de
   lopende tekst terug op 'p'. LET OP de specificiteit: dit is (0,1,2), dus een
   losse `.klasse b` (0,1,1) verliest ervan. Vandaar !important op de koppen —
   die lijst is anders niet te winnen zonder elk selectorpad te verdubbelen. */
.pm_pop *:not(input):not(textarea),
.pm_drawer *:not(input):not(textarea) { font-family: p, sans-serif; }
.pm_pop .pm_kop,
.pm_pop .pm_rij__label,
.pm_pop .pm_tegel__titel,
.pm_pop .pm_sectie,
.pm_pop .pm_getal,
.pm_pop .pm_chip,
.pm_pop .pm_herkomst,
.pm_pop .pm_kosten,
.pm_pop .pm_inzet__kop,
.pm_pop .pm_tegel__badge,
.pm_pop .pm_inv_item__level,
.pm_pop .pm_pil,
.pm_pop .pm_league_rij__naam,
.pm_pop .pm_hist_rij__bedrag,
.pm_pop .pm_hist_rij__tekst b,
.pm_pop .pm_toggle b,
.pm_pop .pm_saldo__mid b,
.pm_pop .pm_saldo__delta b,
.pm_pop .pm_tegel_binnen .pm_waarde,
.pm_pop .pm_tegel_binnen .pm_naam,
.pm_pop .pm_kaart_binnen b,
.pm_pop .pm_chip_aantal,
.pm_pop .pm_uitleg_blok h4,
.pm_pop .pm_kaart__aantal,
.pm_pop .pm_profiel__tekst b,
.pm_pop .pm_showcase__slot b,
.pm_pop .pm_inv_item b,
.pm_pop .pm_mode__tekst b,
.pm_pop .pm_kaart__tekst b,
.pm_pop .pm_streak b,
.pm_pop .pm_noti_banner b,
.pm_pop .pm_ask_kaart b,
.pm_pop .pm_ask_rij b,
.pm_pop .cl-btn,
.pm_pop .cl-btn > span,
.pm_pop .cl-btn-secondary,
.pm_pop .tab-full-btn { font-family: headers, sans-serif !important; }
.pm_drawer .pm_kop,
.pm_drawer .pm_rij__label,
.pm_drawer .pm_tegel__titel,
.pm_drawer .pm_sectie,
.pm_drawer .pm_getal,
.pm_drawer .pm_chip,
.pm_drawer .pm_herkomst,
.pm_drawer .pm_kosten,
.pm_drawer .pm_inzet__kop,
.pm_drawer .pm_tegel__badge,
.pm_drawer .pm_inv_item__level,
.pm_drawer .pm_pil,
.pm_drawer .pm_league_rij__naam,
.pm_drawer .pm_hist_rij__bedrag,
.pm_drawer .pm_hist_rij__tekst b,
.pm_drawer .pm_toggle b,
.pm_drawer .pm_saldo__mid b,
.pm_drawer .pm_saldo__delta b,
.pm_drawer .pm_tegel_binnen .pm_waarde,
.pm_drawer .pm_tegel_binnen .pm_naam,
.pm_drawer .pm_kaart_binnen b,
.pm_drawer .pm_chip_aantal,
.pm_drawer .pm_uitleg_blok h4,
.pm_drawer .pm_kaart__aantal,
.pm_drawer .pm_profiel__tekst b,
.pm_drawer .pm_showcase__slot b,
.pm_drawer .pm_inv_item b,
.pm_drawer .pm_mode__tekst b,
.pm_drawer .pm_kaart__tekst b,
.pm_drawer .pm_streak b,
.pm_drawer .pm_noti_banner b,
.pm_drawer .pm_ask_kaart b,
.pm_drawer .pm_ask_rij b,
.pm_drawer .cl-btn,
.pm_drawer .cl-btn > span,
.pm_drawer .cl-btn-secondary,
.pm_inzet__bedragen span,
.social_hub__stat span,
.pm_drawer .tab-full-btn { font-family: headers, sans-serif !important; }

.pm_kop			{ font-size: 19px; letter-spacing: 1px; text-shadow: 0 2px black; }
.pm_sectie		{ font-size: 9.5px; letter-spacing: 2.5px; color: #FFC46B; }
.pm_muted		{ font-size: 10.5px; color: #ffffff8a; }
.pm_klein		{ font-size: 9.5px; color: #ffffff70; }
.pm_versie		{ text-align: center; font-size: 9.5px; color: #ffffff45; padding: 2px 0; }


/* ---- 3. Identiteitskop -------------------------------------------------- */

.pm_ident
{
	flex: none;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 16px 18px 14px;
}
.pm_ident__avatar { position: relative; flex: none; width: 58px; height: 58px; }
/* De ring is de league-kleur; hij zit op een eigen laag zodat de avatar er
   rond in past zonder dat de rand meeschaalt. */
.pm_ident__ring
{
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid #FFC107;
	box-shadow: 0 0 18px #ffc10755;
}
.pm_ident__avatar img
{
	position: absolute;
	inset: 3px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	background: #150829;
}
.pm_ident__mid { flex: 1; min-width: 0; }
.pm_ident__naam { display: flex; align-items: center; gap: 7px; }
.pm_chip
{
	font-size: 8.5px;
	letter-spacing: 1px;
	padding: 2px 5px;
	border-radius: 4px;
	white-space: nowrap;
}
.pm_chip--vip	{ color: #3a1c00; background: #FFC107; }
.pm_chip--pass	{ color: #ffffffab; border: 1px solid #ffffff33; }

.pm_xp
{
	margin-top: 7px;
	height: 7px;
	border-radius: 4px;
	background: #00000073;
	border: 1px solid #ffffff1a;
	overflow: hidden;
}
.pm_xp i { display: block; height: 100%; background: linear-gradient(90deg, #e09b00, #FFC107); }
.pm_xp_regel
{
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-size: 9px;
	color: #ffffff70;
}

.pm_sluit
{
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: #00000073;
	border: 1px solid #ffffff26;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}


/* ---- 4. Showcase-blok (vervangt het oude valutablok) -------------------- */

.pm_showcase { flex: none; padding: 0 14px 14px; }
.pm_showcase__kop
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 11px;
}
.pm_showcase__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pm_showcase__slot
{
	border: 1px solid #ffffff21;
	border-radius: 11px;
	background: #00000059;
	padding: 9px 5px 8px;
	text-align: center;
}
.pm_showcase__slot img { width: 42px; height: 42px; object-fit: contain; display: block; margin: 0 auto; }
.pm_showcase__slot b
{
	display: block;
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 9px;
	letter-spacing: .5px;
	margin-top: 5px;
}
.pm_showcase__slot small
{
	display: block;
	font-size: 7.5px;
	letter-spacing: 1px;
	color: #ffffff70;
	margin-top: 1px;
}
/* Een lege pin blijft een slot, geen gat: dan is zichtbaar dat er nog plek is. */
.pm_showcase__slot.is-leeg { border-style: dashed; border-color: #ffffff21; opacity: .55; }
.pm_showcase__slot.is-leeg b { color: #ffffff70; }


/* ---- 5. Bestemmingen ---------------------------------------------------- */

.pm_profiel { display: flex; align-items: center; gap: 12px; }
.pm_profiel__tekst { flex: 1; min-width: 0; }
.pm_profiel__tekst b
{
	display: block;
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 16px;
	letter-spacing: .5px;
}
.pm_profiel__tekst small { display: block; font-size: 10.5px; color: #ffffff8a; margin-top: 2px; }

.pm_tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pm_tegel
{
	position: relative;
	min-height: 104px;
	padding: 14px 13px 13px;
	cursor: pointer;
}
.pm_tegel__titel { font-size: 14px; letter-spacing: .5px; margin-top: 12px; display: block; }
.pm_tegel__sub { font-size: 9.5px; color: #ffffff8a; margin-top: 2px; display: block; }
.pm_tegel__badge
{
	position: absolute;
	top: 9px;
	right: 9px;
	font-family: headers, sans-serif;
	font-size: 8.5px;
	letter-spacing: 1px;
	color: #14291b;
	background: #5ce08a;
	padding: 2px 6px;
	border-radius: 7px;
}


/* ---- 6. Tabs — de app-eigen .tabs-full, hergekleurd --------------------
   README §2: de actieve pil gebruikt niet langer het oude #ffd700 → #ff7700
   maar het gradiënt van de primaire knop, zodat tabs en knoppen als één
   systeem lezen. Die regel geldt APP-BREED — vandaar geen .pm_-scope, en
   vandaar dat dit de enige tabstijl is die dit bestand toevoegt. De markup
   (.tabs-wrapper > .tabs-parent > .flex-row.tabs-full > .tab-full-btn) komt
   ongewijzigd uit CubeRunnerz.css; er is geen tweede tab-engine.
------------------------------------------------------------------------- */

.tabs-full .tab-full-btn-active
{
	background: linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	color: #3a1c00;
	text-shadow: none;
}

/* De rode attentie-badges op een tab (aantal te claimen challenges) ERFDEN de
   letterkleur van hun tab: op een inactieve tab wit, maar op de ACTIEVE tab het
   donkere label — een bruin cijfer op rood. Ze horen altijd wit te zijn, want
   ze staan op hun eigen rode vlak en niet op het goud. */
.tabs-full .tab-full-btn .day-claimable,
.tabs-full .tab-full-btn .week-claimable,
.tabs-full .tab-full-btn .month-claimable,
.tabs-full .tab-full-btn .badge-new,
.tabs-full .tab-full-btn .badge-alert
{
	color: #fff;
	text-shadow: none;
}
/* GEEN ::before-glans meer op de actieve tab. Die legde een wit vlak over het
   label van precies de knop waar je toch niets meer mee kunt — hij is al actief
   — en gaf hem daarmee de meeste nadruk van de hele rail. Weg, overal.
   (Ook de variant in CubeRunnerz.css onder .tutorialPop is verwijderd.) */
.tabs-full .tab-full-btn-active .color-purple { color: #3a1c00; }

/* Elke tabrail draagt het koplettertype, niet alleen die in het menu. Zonder
   deze regel viel de rail buiten .pm_pop/.pm_drawer terug op de lopende tekst
   en las hij als een zin in plaats van als navigatie. */
.tabs-full .tab-full-btn,
.tabs-full .tab-full-btn span,
.subtabs .tab-btn,
.summary_subtabs__btn,
.pvp_sheet_tab { font-family: headers, sans-serif; }

/* De rail vult de volle breedte en verdeelt zich in gelijke stukken; de
   LETTERGROOTTE zakt met het aantal tabs mee, zodat het label binnen zijn eigen
   padding blijft in plaats van eroverheen te lopen.

   GEEN containerqueries hier meer. min(13px, N cqi) was eleganter — echt
   vloeiend meeschalen met de railbreedte — maar op iOS renderde dat de labels
   verkeerd: de actieve tab kwam als een leeg vlak op het scherm en de buren
   werden middenin een woord afgekapt, terwijl exact dezelfde pagina in Chrome
   headless correct meet. Een layout die op één browser stukgaat is geen betere
   layout; vaste stappen doen het overal hetzelfde. */
.tabs-full .tab-full-btn
{
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	font-size: 13px;
	letter-spacing: 0;
	padding-left: 4px;
	padding-right: 4px;
	white-space: nowrap;
	/* GEEN overflow op de tabknop — op geen enkele as.
	   De claim-badges (.day-claimable en zusjes) staan absoluut op top:-2px en
	   stijgen met bounce2up nog eens ~7px verder, dus ze steken bewust bóven de
	   knop uit. Twee eerdere pogingen sneuvelden allebei op Safari:
	     1. overflow:clip + overflow-clip-margin:12px — iOS kent clip-margin
	        niet en knipte strak op de padding-box;
	     2. overflow-x:clip + overflow-y:visible — geldig volgens spec, maar
	        WebKit knipt bij een clip op één as in de praktijk ook verticaal.
	   Gemeten met een pixelscan op de WEEKLY-tab (badge bevroren op het hoogste
	   punt van zijn bounce): onder iOS-condities verdween de bovenste 6px van
	   de tag, met overflow:visible blijft hij heel.
	   Daarmee vervalt ook text-overflow:ellipsis — dat werkt per definitie
	   alleen mét een knippende overflow en deed op iOS dus toch al niets. Wat
	   labels binnen hun vak houdt is de lettergrootte-ladder hieronder;
	   tests/e2e/tabbreedtes.e2e.js bewaakt dat van 320 tot 461px. Zet hier dus
	   nooit een overflow terug om "het beletselteken te laten werken": dan
	   onthoofd je de rode tag opnieuw, en alleen op de toestellen van spelers. */
	overflow: visible;
}
/* De challenge-lade heeft maar TWEE tabs, dus de ladder hieronder (die pas bij
   drie tabs zakt) laat hem op 13px staan — en "CHALLENGE INFORMATION" is met
   21 tekens veel langer dan de korte labels waarop die maat is gekozen. Bij
   13px vroeg het label 179px in een vak van 152px; het beletselteken ving dat
   wel op, maar een half woord in een rail van twee is geen goede leesbaarheid.
   Eén stap kleiner en beide labels passen voluit, op elke telefoonbreedte
   (gemeten 320-461px). Alleen deze lade, zodat korte rails hun maat houden. */
#questDetails .tabs-full .tab-full-btn { font-size: min(10.5px, 2.5vw); }

/* min(<max>, <vw>) — precies wat gevraagd was: een bovengrens, en daaronder
   meeschalen met de beschikbare ruimte. vw en niet cqi: containerqueries gaven
   op iOS een verkeerde eerste layout, terwijl vw overal hetzelfde doet.

   De rail is een vast deel van het scherm, dus vw is een goede maat voor de
   ruimte per tab. De getallen komen uit de smalste telefoon die we bedienen
   (320px): daar heeft een tab van vier ~59px binnenruimte en "RESOURCES" is
   ~6.5x de lettergrootte breed, dus 9px past net. Op 430px+ zit hij tegen zijn
   maximum en verandert er niets. */
/* Het beletselteken hoort op de TEKST, niet op de knop.
   Sinds de knop zelf overflow:visible draagt (anders onthoofdt iOS de rode
   claim-tag, zie hierboven) kan text-overflow daar per definitie niet meer
   werken: dat vraagt een knippende overflow. Een rail van twee tabs zakt
   bovendien niet in lettergrootte — de ladder hieronder begint pas bij drie —
   dus een lang label als CHALLENGE INFORMATION liep gewoon zijn vak uit en
   schoof onder de buurtab.
   Deze binnenlaag knipt alleen horizontaal; verticaal blijft de knop open, dus
   de badge houdt zijn vrije baan. Bewust op een EIGEN klasse en niet op elke
   span in de knop: de claim-tags (.day-claimable en zusjes) zijn óók spans en
   zouden door een min-width:0 hierboven in elkaar klappen. */
.tabs-full .tab-full-btn .tab-full-btn__label
{
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	/* font-size en white-space moeten hier expliciet terug: de tabrail van de
	   challenge-lade zit ín .gamepop_header, en die heeft een oude, brede regel
	   `.gamepop_header span { font-size:20px; white-space:wrap !important }`
	   voor de ondertitel van die kop. Elke span in die kop erft dat — dus ook
	   een tablabel: 20px in plaats van 13px, en woordafbreking naar twee regels
	   die onder de knop uit zakten. Vandaar inherit (= de 13px van de knop, en
	   dus ook de ladder verderop) en een nowrap die het !important verslaat. */
	font-size: inherit;
	white-space: nowrap !important;
}
.tabs-full .tab-full-btn:nth-last-child(n+3),
.tabs-full .tab-full-btn:nth-last-child(n+3) ~ .tab-full-btn { font-size: min(12px, 2.8vw); }
.tabs-full .tab-full-btn:nth-last-child(n+5),
.tabs-full .tab-full-btn:nth-last-child(n+5) ~ .tab-full-btn { font-size: min(10px, 2.2vw); padding-left: 2px; padding-right: 2px; }
.tabs-full .tab-full-btn:nth-last-child(n+6),
.tabs-full .tab-full-btn:nth-last-child(n+6) ~ .tab-full-btn { font-size: min(8.5px, 1.9vw); letter-spacing: -.2px; }

/* ---- 6b. De rail vult zijn ruimte -----------------------------------------
   (Deze regels waren bij een eerdere herschrijving van dit blok gesneuveld;
   zonder hen kromp de rail in een lade weer tot een pil van 111px.)

   .tabs-wrapper en .tabs-parent staan van huis uit op flex:0 1 auto en krimpen
   dus om hun inhoud. De wrapper mag alleen in de BREEDTE meegaan — flex-grow
   erop liet hem in een kolom ook in de hoogte groeien (het gat op het klassieke
   dashboard). De parent zit in een rij en moet daar juist wel opvullen.
-------------------------------------------------------------------------- */
.tabs-wrapper
{
	flex: 0 1 auto;
	width: 100%;
	min-width: 0;
	align-self: stretch;
}
.tabs-wrapper .tabs-parent,
.tabs-parent
{
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	align-self: stretch;
}
/* De kolom waarin een rail in een popup- of ladekop hangt (titel + ondertitel +
   tabs) kromp mee om zijn inhoud. Alleen kolommen MET een rail worden opgerekt. */
.gamepop_header .flex-col:has(.tabs-wrapper),
.bottom_drawer__content .flex-col:has(.tabs-wrapper),
.top_overlayed .flex-col:has(.tabs-wrapper)
{
	width: 100%;
	align-self: stretch;
	min-width: 0;
}

/* ---- 6c. Rail in lades ----------------------------------------------------
   Hier stond een hoogte-ophoging naar 44px (de gangbare maat voor een tikdoel).
   Die is teruggedraaid: de rail werd er log van en paste niet meer bij de rest
   van het scherm. De BREEDTE blijft wel opgerekt (6b) — dat was het echte
   probleem; hoogte was mijn eigen toevoeging. Alleen de rondere hoek blijft.
-------------------------------------------------------------------------- */
.bottom_drawer__content .tabs-full,
.gamepop_header .tabs-full,
.pm_drawer .tabs-full { border-radius: 8px; }

/* De rail zelf volgt het ontwerp: spoor #4a3f66, rand #11004c, zwarte
   scheidingen tussen de knoppen. */
.pm_pop .tabs-full,
.pm_drawer .tabs-full { background: #4a3f66; }
.pm_pop .tabs-wrapper,
.pm_drawer .tabs-wrapper { width: calc(100% - 28px); margin: 0 14px 12px; flex: none; }
/* CubeRunnerz geeft .tabs-full zelf nog eens `calc(100% - 2rem)` + `margin:0 1rem`;
   binnen deze wrapper is dat een tweede inspringing en wordt de rail smaller
   dan de inhoud eronder. */
.pm_pop .tabs-full,
.pm_drawer .tabs-full { width: 100%; margin: 0; }
.pm_pop .tabs-full .tab-full-btn,
.pm_drawer .tabs-full .tab-full-btn { font-size: 11px; letter-spacing: .5px; padding: 9px 4px 10px; }


/* ---- 7. Kop, sectiekop en voetbalk -------------------------------------- */

/* Kopbalk van elk subscherm: titel links, sluitchip rechts. De terugpijl staat
   er in het ontwerp niet; hij blijft hier wél, omdat dit paneel een stapel
   schermen draagt en een swipe het hele paneel sluit in plaats van één stap
   terug te gaan. */
.pm_mode_kop
{
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px 12px;
	padding-top: calc(14px + env(safe-area-inset-top));
}
.pm_mode_kop .pm_kop { flex: 1; min-width: 0; font-size: 19px; letter-spacing: 1.5px; }
.pm_mode_kop .pm_klein { margin-top: 2px; font-size: 10.5px; color: #ffffff70; }

/* In een LADE geldt de veilige zone bovenaan niet: die staat tegen de onderrand
   van het scherm, er is geen statusbalk boven deze kop. Op een toestel met een
   notch is env(safe-area-inset-top) ~47-59px, en dat gaapte daar als lege ruimte
   boven "GAMEMODE" (in een headless browser is de inset 0, vandaar dat het daar
   nooit opviel). De sidepanel-variant hierboven houdt de inset wél nodig.
   Meteen ook de kop over de volle breedte: .bottom_drawer__content centreert
   zijn kinderen, waardoor een kop die niet stretcht z'n eigen breedte hield en
   de titel naar het midden schoof.

   30px en niet 14px: het sleephandvat (::before) draagt margin-top:-20px en
   trekt de hele kolom mee omhoog, zodat de kop 11px BOVEN de bovenrand van de
   lade begint. Van 14px bleef er dan 3px zichtbaar over en plakte "GAMEMODE"
   tegen het handvat aan. Zelfde rekensom als in de trofee-detaillade. */
.pm_drawer .pm_mode_kop
{
	padding-top: 30px;
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}

.pm_sectie_kop
{
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 4px 9px;
}
.pm_sectie_kop i { flex: 1; height: 1px; background: #ffffff1c; }
.pm_sectie_kop .pm_klein { flex: none; }

/* Gedokte voetbalk: de primaire actie hoort niet mee te scrollen. */
.pm_voet
{
	flex: none;
	padding: 14px 14px 20px;
	padding-bottom: calc(20px + env(safe-area-inset-bottom));
	border-top: 1px solid #ffffff14;
}
.pm_voet .cl-btn { font-size: 17px; }


/* ---- 8. Tegels ---------------------------------------------------------- */

.pm_inv_groep { display: flex; flex-direction: column; }
.pm_inv_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pm_inv_grid--2 { grid-template-columns: 1fr 1fr; }

.pm_tegel_binnen
{
	position: relative;
	padding: 13px 6px 11px;
	text-align: center;
	border: 2px solid #ffffff21;
	border-radius: 12px;
	background: linear-gradient(160deg, #3d1a63, #240f3d);
}
.pm_tegel_binnen img { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto; }
/* boosters + perks (item-art op een grid of lichtring, breder dan hoog): groter,
   met negatieve marges zodat de tegel even hoog blijft */
.pm_inv_grid--art .pm_tegel_binnen img { width: 62px; height: 62px; margin: -10px auto -8px; }
/* Waarde-regel van een grondstof: de kleur is de grondstof zelf. */
.pm_tegel_binnen .pm_waarde
{
	display: block;
	font-family: headers, sans-serif;
	font-size: 14px;
	margin-top: 5px;
}
.pm_tegel_binnen .pm_eenheid
{
	display: block;
	font-size: 8px;
	letter-spacing: 1.5px;
	color: #ffffff70;
}
/* Booster: naam groot, staat klein. */
.pm_tegel_binnen .pm_naam
{
	display: block;
	font-family: headers, sans-serif;
	font-size: 10.5px;
	letter-spacing: .5px;
	margin-top: 6px;
}
.pm_tegel_binnen .pm_staat
{
	display: block;
	font-size: 8px;
	letter-spacing: 1px;
	color: #ffffff70;
}
/* Niet in bezit: wél tonen — het is de enige plek waar zichtbaar is wát er te
   halen valt — maar gedempt en zonder telling. */
.pm_tegel_binnen.is-leeg { opacity: .55; }
.pm_tegel_binnen.is-vol { border-color: #5ce08a5c; background: linear-gradient(160deg, #26502f, #14291b); }

.pm_chip_aantal
{
	position: absolute;
	top: 6px;
	right: 6px;
	font-family: headers, sans-serif;
	font-size: 9px;
	color: #3a1c00;
	background: #FFC107;
	padding: 1px 6px;
	border-radius: 7px;
}

/* Duelkaart: breder, met eigen kleur per kaart. */
.pm_kaart_binnen
{
	position: relative;
	padding: 13px 12px 12px;
	border: 2px solid #FFC10745;
	border-radius: 12px;
	background: linear-gradient(160deg, #4a2c0e, #241505);
	height: 100%;
	box-sizing: border-box;
}
.pm_kaart_binnen.is-blauw
{
	border-color: #7ad4ff45;
	background: linear-gradient(160deg, #1d3d5c, #12233a);
}
.pm_kaart_binnen.is-blauw .pm_chip_aantal { color: #0b2436; background: #7ad4ff; }
.pm_kaart_binnen img { width: 38px; height: 38px; object-fit: contain; display: block; }
.pm_kaart_binnen b
{
	display: block;
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 12.5px;
	letter-spacing: .5px;
	margin-top: 10px;
}
.pm_kaart_binnen small
{
	display: block;
	font-size: 9.5px;
	line-height: 14px;
	color: #ffffff8a;
	margin-top: 3px;
}


/* ---- 9. Historie -------------------------------------------------------- */

.pm_saldo { display: flex; align-items: center; gap: 12px; }
.pm_saldo img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.pm_saldo__mid { flex: 1; min-width: 0; }
.pm_saldo__mid b
{
	display: block;
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 22px;
	color: #FFC107;
}
.pm_saldo__mid small { display: block; font-size: 10px; letter-spacing: 1.5px; color: #ffffff70; }
.pm_saldo__delta { flex: none; text-align: right; }
.pm_saldo__delta b { display: block; font-family: headers, sans-serif; font-weight: normal; font-size: 14px; }
.pm_saldo__delta small { display: block; font-size: 9.5px; color: #ffffff70; }

.pm_hist_rij
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid #00000073;
}
.pm_hist_rij:last-child { border-bottom: 0; }
.pm_hist_rij.klikbaar { cursor: pointer; }
.pm_hist_rij img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.pm_hist_rij__tekst { flex: 1; min-width: 0; }
.pm_hist_rij__tekst b
{
	/* De bronlabels staan in zinsvorm in één map (goudLabel). Hoofdletters zijn
	   opmaak, geen tweede set strings. */
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 12.5px;
	letter-spacing: .5px;
	color: #fff;
}
.pm_hist_rij__meer { font-family: p, sans-serif; font-size: 9.5px; letter-spacing: 0; color: #FFC46B; }
.pm_hist_rij__tekst small { display: block; font-size: 9.5px; color: #ffffff70; margin-top: 1px; }
.pm_hist_rij__bedrag
{
	flex: none;
	font-family: headers, sans-serif;
	font-size: 14px;
	white-space: nowrap;
}
.pm_hist_rij__bedrag.is-plus { color: #5ce08a; }
.pm_hist_rij__bedrag.is-min { color: #ff8a8a; }

.pm_leeg
{
	padding: 26px 16px;
	text-align: center;
	font-size: 11px;
	line-height: 17px;
	color: #ffffff70;
}


/* ---- 10. Schakelrijen (notificaties) ------------------------------------ */

.pm_toggle
{
	position: relative;
	padding: 13px 14px;
	border: 2px solid #ffffff1c;
	border-radius: 12px;
	background: #00000047;
	cursor: pointer;
}
.pm_toggle.is-aan
{
	border: 3px solid #FFC107;
	background: linear-gradient(160deg, #3d1a63, #240f3d);
	box-shadow: inset 0 0 22px #ffc10726;
}
.pm_toggle b
{
	display: block;
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: .5px;
	color: #ffffffd6;
	padding-right: 28px;
}
.pm_toggle.is-aan b { color: #fff; }
.pm_toggle small { display: block; font-size: 10.5px; line-height: 16px; color: #ffffff70; margin-top: 4px; }
.pm_toggle.is-aan small { color: #ffffff8a; }
/* Het vinkje staat rechtsboven, niet links: dan blijft de tekst links uitgelijnd
   en leest de rij als een kaart in plaats van als een formulierregel. */
.pm_vinkje
{
	position: absolute;
	top: 11px;
	right: 11px;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: #00000073;
	border: 2px solid #ffffff2b;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.pm_toggle.is-aan .pm_vinkje { background: #FFC107; border: 2px solid #000; }
.pm_toggle.is-aan .pm_vinkje::after
{
	content: "";
	width: 11px;
	height: 11px;
	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;
}

/* ---- 10b. Push geblokkeerd + de push-vraag (design/Push Notifications) ---
   3a: het OS weigert push — banner in amber, rijen op slot (gedimd, slotje in
   het vinkvak, geen tik), MAIL-hint onderaan en OPEN SETTINGS in de voet.
   2a/2b: het vraagvel en de vraaglade met de vijf redenen.
-------------------------------------------------------------------------- */

.pm_toggle--slot
{
	border: 2px solid #ffffff14;
	opacity: .55;
	cursor: not-allowed;
}
.pm_toggle--slot .pm_vinkje svg { display: block; }

.pm_noti_banner
{
	border: 2px solid #FFC10745;
	border-radius: 12px;
	background: linear-gradient(160deg, #4a2c0e, #241505);
	padding: 13px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 11px;
}
.pm_noti_banner__icoon
{
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: #00000059;
	border: 1px solid #FFC10745;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pm_noti_banner b
{
	display: block;
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: .5px;
	color: #FFC46B;
}
.pm_noti_banner small
{
	display: block;
	font-size: 10px;
	line-height: 15px;
	color: #ffffff9c;
	margin-top: 3px;
}

.pm_noti_hint
{
	border: 1px solid #ffffff1f;
	border-radius: 11px;
	background: #00000047;
	padding: 12px 13px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.pm_noti_hint svg { flex: none; margin-top: 1px; }
.pm_noti_hint p { margin: 0; font-size: 10.5px; line-height: 16px; color: #ffffff8a; }
/* Alleen een span die ook echt iets doet oogt als link; de naamsvermelding
   van GET NOTIFIED in het 2a-voetnootje is goud maar niet tikbaar. */
.pm_noti_hint p span { color: #FFC46B; }
.pm_noti_hint p span[data-pm-actie] { cursor: pointer; text-decoration: underline; }

/* De mascotte in de gecentreerde kop (verving de inline bel-SVG). */
.pm_kop_midden .pm_kop_mascotte
{
	position: relative;
	display: block;
	width: 148px;
	margin: 2px auto 0;
	filter: drop-shadow(0 6px 12px #00000073);
}
.pm_kop_midden .pm_kop_mascotte--groot { width: 158px; }
.pm_drawer .pm_kop_midden .pm_kop_mascotte { width: 132px; }
.pm_kop_midden .pm_ask_lede
{
	position: relative;
	font-size: 11px;
	line-height: 17px;
	color: #ffffff8a;
	margin: 6px auto 0;
	max-width: 280px;
}

/* 2a: redenkaarten. */
.pm_ask_kaart
{
	border: 2px solid #ffffff21;
	border-radius: 12px;
	background: linear-gradient(160deg, #3d1a63, #240f3d);
	padding: 12px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
}
.pm_ask_kaart__icoon
{
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: #00000059;
	border: 1px solid #FFC10745;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pm_ask_kaart__icoon img { width: 24px; height: 24px; object-fit: contain; }
.pm_ask_kaart b
{
	display: block;
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: .5px;
	color: #fff;
}
.pm_ask_kaart small { display: block; font-size: 10.5px; line-height: 16px; color: #ffffff8a; margin-top: 3px; }

/* 2b: compacte redenlijst in de lade. */
.pm_ask_lijst
{
	border: 2px solid #ffffff1c;
	border-radius: 12px;
	background: #00000047;
	overflow: hidden;
}
.pm_ask_rij
{
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 13px;
	border-bottom: 1px solid #ffffff14;
}
.pm_ask_rij.is-laatste { border-bottom: 0; }
.pm_ask_rij__icoon { flex: none; width: 22px; display: flex; justify-content: center; }
.pm_ask_rij__icoon img { width: 22px; height: 22px; object-fit: contain; }
.pm_ask_rij b
{
	flex: 1;
	min-width: 0;
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 12.5px;
	letter-spacing: .5px;
	color: #ffffffd6;
}
.pm_ask_noot { margin: 2px 2px 0; font-size: 10.5px; line-height: 16px; color: #ffffff70; }
.pm_ask_noot span { color: #FFC46B; }

/* Voetvarianten: twee gestapelde knoppen (3a) of NOT NOW naast TURN THEM ON.
   Drie klassen diep: §17 zet .pm_voet .cl-btn-frame later in dit bestand op
   width:100%, en met gelijke specificiteit zou die regel de rij weer breken. */
.pm_voet_stapel { display: flex; flex-direction: column; gap: 9px; }
.pm_voet_rij { display: flex; gap: 9px; align-items: stretch; }
.pm_voet .pm_voet_rij .cl-btn-frame { flex: 1; width: auto; }
.pm_voet .pm_voet_rij .cl-btn-frame--sm { flex: none; width: auto; display: block; }
.pm_voet .pm_voet_rij .cl-btn-secondary { height: 100%; box-sizing: border-box; padding: 12px 16px; }


/* ---- 11. Speel-drawer (5-9 / 5-10 / 5-11) -------------------------------
   Kaarten liggen HORIZONTAAL: icoon, tekst, knop. Precies één kaart is primair
   — die van het scherm waar de speler vandaan kwam — en die krijgt de gouden
   rand en de gloed. De achtergrondkleur volgt de MODUS, niet de primair-staat.
-------------------------------------------------------------------------- */

.pm_herkomst_rij { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.pm_herkomst
{
	flex: none;
	font-size: 8.5px;
	letter-spacing: 1.5px;
	color: #0b0318;
	background: #FFC46B;
	padding: 2px 6px;
	border-radius: 5px;
}
.pm_herkomst_rij .pm_klein { font-size: 10px; }

.pm_levens
{
	flex: none;
	display: flex;
	align-items: center;
	gap: 5px;
	background: #00000073;
	border: 1px solid #ffffff26;
	border-radius: 11px;
	padding: 5px 9px;
	font-family: headers, sans-serif;
	font-size: 12px;
	color: #ff8a8a;
}
.pm_levens img { width: 16px; height: 16px; object-fit: contain; }

.pm_kader--mode { border: 4px solid #000; border-radius: 18px; }
.pm_mode_kaart
{
	position: relative;
	border: 2px solid #ffffff21;
	border-radius: 14px;
	padding: 15px 14px 13px;
	box-sizing: border-box;
}
/* Kleur per modus — ook wanneer de kaart secundair is. */
.pm_mode_kaart.is-classic	{ border-color: #FFC10745; background: linear-gradient(160deg, #4a2c0e, #241505); }
.pm_mode_kaart.is-ranked	{ border-color: #7ad4ff45; background: linear-gradient(160deg, #1d3d5c, #12233a); }
.pm_mode_kaart.is-adventure	{ border-color: #c58bff45; background: linear-gradient(160deg, #3d1a63, #240f3d); }
/* De primaire kaart: gouden rand en gloed, ongeacht welke modus het is. */
.pm_mode_kaart.is-primair
{
	border: 3px solid #ffe07a;
	box-shadow: 0 0 22px #ffc10733;
}

/* Kostbadge hangt over de bovenrand van de kaart. */
.pm_kost
{
	position: absolute;
	top: -2px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 3px;
	font-family: headers, sans-serif;
	font-size: 10px;
	color: #ff8a8a;
	background: #2a0b46;
	border: 2px solid #000;
	border-radius: 9px;
	padding: 2px 7px;
}
.pm_kost img { width: 12px; height: 12px; object-fit: contain; }

.pm_mode { display: flex; align-items: center; gap: 12px; }
.pm_mode__icoon
{
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #00000059;
	border: 1px solid #ffffff1c;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* De maskers komen uit CubeRunnerz.css (.modeX div); alleen maat en kleur. */
.pm_mode__icoon > div
{
	width: 24px;
	height: 24px;
	background: #FFC107;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.pm_mode__icoon.modeRanked > div { background: #7ad4ff; }
.pm_mode__icoon.modeMissions > div { background: #c58bff; }

.pm_mode__tekst { flex: 1; min-width: 0; }
.pm_mode__tekst b
{
	display: block;
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 17px;
	letter-spacing: 1px;
	text-shadow: 0 2px black;
}
.pm_mode__tekst small { display: block; font-size: 10px; line-height: 15px; color: #ffffff8a; margin-top: 2px; }

/* De knop staat RECHTS in de kaart en hugt zijn tekst. */
.pm_mode__knop { flex: none; border-radius: 13px; }
.pm_mode__knop .cl-btn { width: auto; padding: 10px 15px; font-size: 13px; letter-spacing: 1px; border-radius: 9px; }
.pm_mode__knop .cl-btn::before { top: 2px; left: 2px; width: calc(100% - 4px); border-radius: 5px; }
.pm_mode__knop .cl-btn-secondary { padding: 11px 15px; font-size: 13px; letter-spacing: 1px; border-radius: 9px; }

.pm_vlaggen { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.pm_vlag
{
	font-size: 9px;
	letter-spacing: 1px;
	padding: 3px 8px;
	border-radius: 8px;
	color: #ffffff5c;
	background: #00000047;
	border: 1px solid #ffffff1c;
}
.pm_vlag.is-goud	{ color: #FFC107; background: #FFC1071f; border-color: #FFC10745; }
.pm_vlag.is-paars	{ color: #c58bff; background: #c58bff1f; border-color: #c58bff45; }
.pm_vlag.is-blauw	{ color: #7ad4ff; background: #7ad4ff1f; border-color: #7ad4ff45; }

.pm_inzet
{
	margin-top: 12px;
	border: 1px solid #7ad4ff33;
	border-radius: 10px;
	background: #00000059;
	padding: 9px 11px;
}
.pm_inzet__kop
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 7px;
}
.pm_inzet__kop b
{
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 9px;
	letter-spacing: 2px;
	color: #7ad4ff;
}
.pm_inzet__kop span { font-size: 9px; color: #ffffff70; }
.pm_inzet__bedragen { display: flex; align-items: center; gap: 14px; }
.pm_inzet__bedragen span
{
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: headers, sans-serif;
	font-size: 13px;
	white-space: nowrap;
}
.pm_inzet__bedragen img { width: 17px; height: 17px; object-fit: contain; }
.pm_inzet__goud		{ color: #FFC107; }
.pm_inzet__energie	{ color: #5ce08a; }
.pm_inzet__diamant	{ color: #7ad4ff; }
.pm_inzet__entry
{
	margin-left: auto;
	font-family: p, sans-serif !important;
	font-size: 9px !important;
	color: #ffffff70;
}
.pm_inzet__entry img { width: 12px !important; height: 12px !important; }
/* De twee uiteinden van het bereik, met een lijn ertussen — zo is te zien dát
   het een bereik is en waar het vandaan komt. */
.pm_inzet__bereik
{
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 8px;
	font-size: 9px;
	color: #ffffff70;
}
.pm_inzet__bereik i { flex: 1; height: 1px; background: #ffffff1c; }
.pm_inzet__bereik b { color: #ffffffc4; font-weight: normal; }

.pm_voetnoot
{
	border: 1px solid #ffffff1f;
	border-radius: 11px;
	background: #00000047;
	padding: 12px 13px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.pm_voetnoot svg { flex: none; margin-top: 1px; }
.pm_voetnoot p { margin: 0; font-size: 10.5px; line-height: 16px; color: #ffffff8a; }
.pm_voetnoot span { color: #FFC46B; }
.pm_voetnoot button
{
	background: none;
	border: 0;
	padding: 0;
	font-family: p, sans-serif;
	font-size: 10.5px;
	color: #FFC46B;
	cursor: pointer;
}


/* ---- 12. PvP-uitleg ----------------------------------------------------- */

.pm_uitleg_blok h4
{
	margin: 0 0 6px;
	font-family: headers, sans-serif;
	font-size: 12.5px;
	letter-spacing: .5px;
	color: #FFC46B;
}
.pm_uitleg_blok p { margin: 0; font-size: 11px; line-height: 17px; color: #ffffff8a; }
.pm_uitleg_blok b { color: #fff; font-weight: normal; }

.pm_streak_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.pm_streak
{
	border: 1px solid #ffffff21;
	border-radius: 10px;
	background: #00000059;
	padding: 9px 4px;
	text-align: center;
}
.pm_streak b
{
	display: block;
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 15px;
	color: #FFC107;
}
.pm_streak small { display: block; font-size: 8px; letter-spacing: .5px; color: #ffffff70; margin-top: 2px; }

.pm_league_rij
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-bottom: 1px solid #00000073;
}
.pm_league_rij:last-child { border-bottom: 0; }
.pm_league_rij.is-jij { background: #ffc1070f; }
.pm_league_rij img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.pm_league_rij__mid { flex: 1; min-width: 0; }
.pm_league_rij__naam
{
	font-family: headers, sans-serif;
	font-size: 11.5px;
	letter-spacing: .5px;
}
.pm_league_rij__naam em { font-style: normal; color: #FFC107; }
.pm_league_rij__energie { font-size: 8.5px; color: #5ce08a; margin-top: 2px; }
.pm_league_rij__pillen { flex: none; display: flex; gap: 4px; width: 122px; }
.pm_pil
{
	flex: 1;
	text-align: center;
	font-family: headers, sans-serif;
	font-size: 9.5px;
	color: #3a1c00;
	background: #FFC107;
	border-radius: 5px;
	padding: 3px 2px;
}

.pm_kaart { display: flex; align-items: center; gap: 12px; }
.pm_kaart img { width: 54px; height: 76px; object-fit: contain; flex: none; }
.pm_kaart__tekst { flex: 1; min-width: 0; }
.pm_kaart__tekst b
{
	display: block;
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: .5px;
}
.pm_kaart__tekst small { display: block; font-size: 10px; line-height: 15px; color: #ffffff8a; margin-top: 3px; }
.pm_band { display: flex; gap: 8px; margin-top: 11px; }
.pm_band span
{
	flex: 1;
	text-align: center;
	padding: 6px;
	font-size: 8.5px;
	letter-spacing: .5px;
	color: #ffffffab;
	border: 1px solid #ffffff26;
	background: #00000047;
	border-radius: 6px;
}
.pm_band b { font-family: headers, sans-serif; font-weight: normal; color: #FFC107; }


/* ---- 13. Uitloggen ------------------------------------------------------ */

/* Uitloggen is de enige rij die iets ONGEDAAN maakt. Hij staat in een eigen
   blok en draagt de negatieve kleur — niet als waarschuwing, maar zodat hij
   niet meescant met de navigatierijen erboven. */
.pm_rij--uitloggen { border-bottom: 0; }
.pm_rij--uitloggen .pm_rij__label { color: #ff8a8a; }
.pm_rij--uitloggen:active { background: #ff8a8a12; }

/* Gekozen avatar in het random-raster. */
.pm_tegel_binnen.is-gekozen { border-color: #FFC107; background: #ffc1071a; }


/* ---- 14. Kleine schermen ------------------------------------------------ */

@media (max-height: 700px)
{
	.pm_ident { padding: 12px 16px 10px; }
	.pm_tegel { min-height: 92px; }
}


/* ---- 15. Avatarkiezer (5-3 / 5-4) ---------------------------------------
   Dit scherm blijft renderAvatarChange() uit de app — inclusief zijn
   canvas-cropper, die opnieuw bouwen alleen maar zou dupliceren. Hier staat
   wat het naar de designframes trekt: de gouden actieve tab, het raster van
   vier en de gouden primair. De .gamepop-schil zelf blijft ongemoeid.
-------------------------------------------------------------------------- */

/* De prijs achter PICK AVATAR / SAVE AS AVATAR is de app-brede .price_tag-pil
   (CLAUDE.md §6) — de "vlakke suffix" (· free) van het ontwerp is op 3 nov 2026
   door de eigenaar afgekeurd ten gunste van de PLAY NOW-pil. */

/* Vier avatars in een 2x2-raster met het tegelrecept van dit ontwerp.

   flex:0 0 auto is hier geen detail. .avatar_tab_inner is een flexkolom en het
   raster erfde daar `flex:1 1 0%` — als flexrij viel dat niet op, maar als GRID
   rekt datzelfde stretchen de rijen mee: het raster werd 463px hoog voor vier
   tegels van ~160px en er gaapte een gat boven én onder de avatars. Het raster
   krijgt nu zijn natuurlijke hoogte; de losse ruimte gaat naar beneden, waar de
   knop hoort. */
.gamepop .avatar_tab_inner .avatars_grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px;
	padding: 0 4px;
	flex: 0 0 auto;
	align-content: start;
}
/* De overgebleven ruimte in één keer opnemen, zodat "generate" en de knop
   onderaan blijven plakken in plaats van halverwege te zweven. */
.gamepop .avatar_tab_inner .randomise_avatars { margin-top: auto; }

/* NIET doen: .gamepop:has(.avatar_change_tabs){height:auto}. De schil is bewust
   90% van het scherm hoog (CubeRunnerz.css ~4341) en alles erbinnen rekent in
   procenten — .avatar_tab_inner staat op min-height:100%. Tegen een auto-hoge
   ouder wordt dat 0 en klapt de hele kiezer dicht tot alleen de tabs. De
   overblijvende ruimte onder de knop hoort bij de schil; die laten we staan. */
.gamepop .avatar_tab_inner .avatars_grid__avatar
{
	border: 2px solid #ffffff21;
	border-radius: 12px;
	background: linear-gradient(160deg, #3d1a63, #240f3d);
	padding: 12px;
	box-shadow: 0 0 0 4px #000;
	margin: 4px;
}
.gamepop .avatar_tab_inner .avatars_grid__avatar.selected
{
	border-color: #FFC107;
	background: #ffc1071a;
}
.gamepop .avatar_tab_inner .avatars_grid__avatar svg { width: 100%; height: auto; display: block; }

.gamepop .randomise_avatars
{
	display: block;
	text-align: center;
	font-family: p, sans-serif;
	font-size: 11px;
	color: #FFC46B;
	text-transform: uppercase;
	letter-spacing: .5px;
}


/* ---- 16. Uitlijning -----------------------------------------------------
   .top_overlayed en .bottom_drawer__content erven een text-align:center uit de
   basissheet. In deze ontwerpen is ALLES links uitgelijnd behalve wat expliciet
   gecentreerd is (de kop van het notificatiescherm, de statblokken, de knoppen).
-------------------------------------------------------------------------- */

.pm_pop, .pm_drawer { text-align: left; }
.pm_pop .cl-btn, .pm_drawer .cl-btn,
.pm_pop .cl-btn-secondary, .pm_drawer .cl-btn-secondary,
.pm_pop .tab-full-btn, .pm_drawer .tab-full-btn,
.pm_pop .pm_tegel_binnen, .pm_drawer .pm_tegel_binnen,
.pm_pop .pm_streak, .pm_drawer .pm_streak,
.pm_pop .pm_pil, .pm_drawer .pm_pil,
.pm_pop .pm_band span, .pm_drawer .pm_band span,
.pm_pop .pm_leeg, .pm_drawer .pm_leeg { text-align: center; }

/* Gecentreerde kop met illustratie — alleen het notificatiescherm heeft die. */
.pm_kop_midden
{
	flex: none;
	position: relative;
	padding: 6px 18px 16px;
	padding-top: calc(6px + env(safe-area-inset-top));
	text-align: center;
	overflow: hidden;
}
.pm_kop_midden::before
{
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 30%, #9a00ff4d, transparent 65%);
	pointer-events: none;
}
.pm_kop_midden .pm_sluit { position: absolute; top: 8px; right: 14px; z-index: 2; }
.pm_kop_midden .pm_kop
{
	position: relative;
	font-size: 22px;
	letter-spacing: 2px;
	margin-top: 6px;
}
.pm_kop_midden svg { position: relative; margin-top: 6px; }


/* ---- 17. Correcties na de vergelijkronde -------------------------------- */

/* De gedokte knop vult de balk; .cl-btn is width:100% maar zijn kader kreeg
   zijn breedte van een flex-parent die hem liet krimpen. */
.pm_voet .cl-btn-frame { display: block; width: 100%; }

/* Tablabels blijven op één regel — "LEAGUES & DIVISIONS" brak anders in tweeën
   en dan staat de rail twee keer zo hoog als in het ontwerp. */
.pm_pop .tabs-full .tab-full-btn,
.pm_drawer .tabs-full .tab-full-btn
{
	white-space: nowrap;
	letter-spacing: .3px;
	padding: 8px 7px 9px;
}
/* Drie brede labels op 393px: iets kleiner in plaats van afbreken. */
.pm_pop .tabs-full .tab-full-btn:nth-child(3):last-child,
.pm_pop .tabs-full .tab-full-btn:nth-child(3):last-child ~ .tab-full-btn { font-size: 10px; }
/* Het zwarte kader telt zijn 4px border mee in de breedte; zonder border-box
   steekt de gedokte knop 8px buiten zijn balk. */
.cl-btn-frame { box-sizing: border-box; }

/* Kopregel van de speelkeuze: links de toernooidag, rechts de levens — de twee
   dingen die bepalen of je nú kunt spelen. */
.pm_dagregel
{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 18px 10px;
	font-size: 9.5px;
	color: #ffffff70;
}


/* ---- 18. Leaderboard-wissel: de tekst in het midden -----------------------
   .separator-text stond op width:120% met white-space:nowrap en 30px. Bij een
   lange regel ("AWARENESS, UP 1 PLACE" boven "WEEKLY FRIENDLY LEADERBOARD")
   liep hij daardoor aan beide kanten van het scherm af — de eerste letters en
   het staartje waren gewoon weg. Hij blijft nu binnen het scherm en mag
   afbreken; de schuine stand en de animatie veranderen niet.
-------------------------------------------------------------------------- */
.separator-text
{
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0 14px;
	/* Iets hoger dan de 49% van het origineel: met twee of drie regels tekst
	   raakte de onderste regel anders de avatar eronder. */
	top: 45%;
	white-space: normal;
	/* 18px i.p.v. 30: bij 22px liep de regel over drie regels en kwam de
	   onderste over de avatar eronder te liggen. */
	font-size: 18px !important;
	gap: 4px;
}
.separator-text > div
{
	min-width: 0;
	line-height: 1.1;
}
/* De pijlen naast de tekst mogen krimpen als de regel de ruimte nodig heeft. */
.separator-text svg { width: 34px; flex: none; }
/* .underline schaalde 1.3x en duwde de groene regel extra breed. */
.separator-text .underline { transform: none; margin: 0 4px; }


/* ---- 19. Beveiligingsschermen (7-1 t/m 7-4) ------------------------------
   Zelfde recept als de rest: pm_kader + pm_paneel, met de kleurvarianten die
   het ontwerp toevoegt. Nieuw zijn alleen het rode paneel, het waarschuwende
   paneel, de kleine chips, de ontwerpschakelaar, de sterktemeter, de donkere
   invoerkaarten en het bevestigingsvel — de rest is hergebruik.
-------------------------------------------------------------------------- */

/* De koplettertypes van de nieuwe elementen. Aparte regel en niet in de twee
   grote lijsten van sectie 2: dat scheelt merge-pijn, en het patroon (scope +
   !important tegen de universele font3-reset) is identiek. */
.pm_pop .pm_banner b, .pm_drawer .pm_banner b,
.pm_pop .pm_sec_kaart__tekst b, .pm_drawer .pm_sec_kaart__tekst b,
.pm_pop .pm_sessie b, .pm_drawer .pm_sessie b,
.pm_pop .pm_chipje, .pm_drawer .pm_chipje,
.pm_pop .pm_feiten b, .pm_drawer .pm_feiten b,
.pm_pop .pm_confirm__naam, .pm_drawer .pm_confirm__naam,
.pm_pop .pm_schakel_rij b, .pm_drawer .pm_schakel_rij b,
.pm_pop .pm_gevaar_kop, .pm_drawer .pm_gevaar_kop,
.pm_pop .cl-btn-danger, .pm_drawer .cl-btn-danger { font-family: headers, sans-serif !important; }

/* Rood paneel (gevaar en verdachte sessies) en het waarschuwende goudtinten
   paneel voor de niet-groene statusbanner — zelfde familie als --positief. */
.pm_paneel--negatief
{
	border-color: #ff5a5a4d;
	background: linear-gradient(160deg, #4a1c1c, #2a0f0f);
}
.pm_paneel--waarschuw
{
	border-color: #FFC10745;
	background: linear-gradient(160deg, #4a2c0e, #241505);
}

/* Statusbanner (7-1) en sessierijen (7-3) delen het icoontegel-recept. */
.pm_banner { display: flex; align-items: center; gap: 12px; }
.pm_icoontegel
{
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: #00000059;
	border: 1px solid #5ce08a4d;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pm_icoontegel.is-let	{ border-color: #FFC10745; }
.pm_icoontegel.is-rood	{ border-color: #ff5a5a4d; }
.pm_banner__tekst { flex: 1; min-width: 0; }
.pm_banner b
{
	display: block;
	font-weight: normal;
	font-size: 15px;
	letter-spacing: .5px;
}
.pm_banner small { display: block; font-size: 10px; color: #ffffff9c; margin-top: 2px; }

/* Kaartrij op het overzicht: titel + subregel links, chip of knop rechts. */
.pm_sec_kaart { display: flex; align-items: center; gap: 11px; }
.pm_sec_kaart__tekst { flex: 1; min-width: 0; }
.pm_sec_kaart__tekst b
{
	display: block;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: .5px;
}
.pm_sec_kaart__tekst small
{
	display: block;
	font-size: 9.5px;
	color: #ffffff8a;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Twee knoppen naast elkaar in de passkeys-kaart, elk de halve breedte. */
.pm_knoprij { display: flex; gap: 8px; margin-top: 11px; }
.pm_knoprij .cl-btn-frame { flex: 1; display: block; border-radius: 13px; }
.pm_knoprij .cl-btn { padding: 10px; font-size: 12px; letter-spacing: 1.1px; border-radius: 9px; }
.pm_knoprij .cl-btn::before { border-radius: 5px; }
.pm_knoprij .cl-btn-secondary { width: 100%; padding: 11px 10px; font-size: 12px; border-radius: 9px; }

/* Kleine chips: gevuld groen (actief/eigen), omlijnd (neutraal), gevuld
   oranje (verdachte sessie). Bewust een eigen maat naast .pm_chip — deze
   staan op kaarten, niet naast de gebruikersnaam. */
.pm_chipje
{
	flex: none;
	font-size: 8.5px;
	letter-spacing: 1px;
	padding: 3px 7px;
	border-radius: 7px;
	white-space: nowrap;
}
.pm_chipje--groen	{ color: #14291b; background: #5ce08a; }
.pm_chipje--omlijnd	{ color: #ffffffab; border: 1px solid #ffffff33; }
.pm_chipje--oranje	{ color: #2a0505; background: #ff8a5b; }

/* Gevarenkaart (7-1). */
.pm_gevaar_kop
{
	display: block;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: .5px;
	color: #ff8a5b;
}
.pm_gevaar_tekst
{
	margin: 3px 0 0;
	font-size: 9.5px;
	line-height: 1.6;
	color: #ffffff9c;
}

/* Rode gevaarknop, in het cl-btn-frame-recept naast .cl-btn en
   .cl-btn-secondary. Geen glans: dit is een noodrem, geen beloning. */
.cl-btn-danger
{
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 11px;
	border: 2px solid #ff8a8a;
	border-radius: 9px;
	background: linear-gradient(0deg, #b8262f 0%, #ff5a5a 100%);
	cursor: pointer;
	text-align: center;
	font-size: 13px;
	letter-spacing: 1.2px;
	color: #2a0505;
}
.cl-btn-danger:active { transform: translateY(1px); }
.cl-btn-danger--groot { padding: 14px; font-size: 15px; border-radius: 11px; }

/* Ontwerpschakelaar: groene track, donkere knop rechts wanneer aan. */
.pm_schakel_rij { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.pm_schakel_rij__tekst { flex: 1; min-width: 0; }
.pm_schakel_rij b
{
	display: block;
	font-weight: normal;
	font-size: 13.5px;
	letter-spacing: .5px;
}
.pm_schakel_rij small { display: block; font-size: 9.5px; color: #ffffff8a; margin-top: 2px; }
.pm_schakel
{
	flex: none;
	position: relative;
	width: 46px;
	height: 26px;
	box-sizing: border-box;
	border-radius: 14px;
	background: #00000073;
	border: 2px solid #000;
	transition: background .15s ease;
}
.pm_schakel i
{
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ffffff8a;
	transition: transform .15s ease, background .15s ease;
}
.pm_schakel.is-aan { background: #5ce08a; }
.pm_schakel.is-aan i { transform: translateX(20px); background: #0b0318; }

/* Donkere invoerkaart (7-2): echte inputs, dus de fontreset van sectie 2
   raakt ze niet — het lettertype staat hier expliciet. */
.pm_invoer
{
	border: 2px solid #ffffff21;
	border-radius: 12px;
	background: #00000073;
	padding: 13px;
	transition: border-color .15s ease;
}
.pm_invoer label
{
	display: block;
	font-size: 9px;
	letter-spacing: 2px;
	color: #ffffff70;
}
.pm_invoer__rij { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pm_invoer input
{
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	outline: 0;
	padding: 0;
	font-family: headers, sans-serif;
	font-size: 17px;
	letter-spacing: 4px;
	color: #ffffffd6;
}
.pm_invoer.is-focus { border-color: #FFC10780; }
.pm_invoer.is-focus label { color: #FFC46B; }
.pm_invoer.is-fout { border-color: #ff8a8a; }
.pm_invoer__oog { flex: none; display: flex; cursor: pointer; opacity: .85; }
.pm_invoer__oog.is-open { opacity: 1; }
.pm_invoer__check { flex: none; display: none; }
.pm_invoer__check.is-zichtbaar { display: flex; }
.pm_invoer__fout { display: none; font-size: 9.5px; color: #ff8a8a; margin-top: 7px; }
.pm_invoer__fout.is-zichtbaar { display: block; }

/* Sterktemeter: vier segmenten; kleur volgt het oordeel, niet de vulling. */
.pm_sterkte { display: flex; gap: 4px; margin-top: 11px; }
.pm_sterkte i { flex: 1; height: 5px; border-radius: 3px; background: #ffffff26; }
.pm_sterkte i.is-vol { background: #5ce08a; }
.pm_sterkte.is-zwak i.is-vol { background: #ff8a8a; }
.pm_sterkte.is-matig i.is-vol { background: #FFC46B; }
.pm_sterkte_tekst { font-size: 9.5px; margin-top: 6px; color: #5ce08a; min-height: 12px; }
.pm_sterkte_tekst.is-zwak { color: #ff8a8a; }
.pm_sterkte_tekst.is-matig { color: #FFC46B; }

/* Informatienotitie (7-2). */
.pm_notitie
{
	border: 2px solid #ffffff21;
	border-radius: 12px;
	background: #00000059;
	padding: 13px;
	font-size: 10.5px;
	line-height: 1.65;
	color: #ffffff9c;
}

/* Sessierijen (7-3). */
.pm_sessie { display: flex; align-items: center; gap: 11px; }
.pm_sessie__tekst { flex: 1; min-width: 0; }
.pm_sessie b
{
	display: block;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: .5px;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pm_sessie--rood b { color: #ff8a5b; }
.pm_sessie small { display: block; font-size: 9.5px; color: #ffffff8a; margin-top: 2px; }
.pm_sessie_waarschuwing
{
	margin: 9px 0 0;
	font-size: 9.5px;
	line-height: 1.6;
	color: #ffffff9c;
}

/* Bevestigingsvel (7-4): waas over het hele paneel, kaart tegen de onderrand.
   Bewust ín .top_overlayed gemonteerd (position:absolute op de schil), zodat
   het vel meesluit wanneer de schil dichtgaat. */
.pm_confirm { position: absolute; inset: 0; z-index: 6; }
.pm_confirm__waas { position: absolute; inset: 0; background: #040109cc; }
.pm_confirm__kaart
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-top: 4px solid #000;
	border-radius: 26px 26px 0 0;
	background: linear-gradient(#2c1348, #1b0b2e);
	box-shadow: 0 -20px 50px #00000080;
	padding: 10px 14px 22px;
	padding-bottom: calc(22px + env(safe-area-inset-bottom));
	transform: translateY(24px);
	opacity: 0;
	transition: transform .2s ease, opacity .2s ease;
}
.pm_confirm.is-open .pm_confirm__kaart { transform: none; opacity: 1; }
.pm_confirm__kop { text-align: center; padding: 0 8px 4px; }
.pm_confirm__kicker { font-size: 10px; letter-spacing: 3px; color: #ff8a5b; }
.pm_confirm__naam { font-size: 24px; letter-spacing: 1px; margin-top: 8px; }
.pm_confirm__tekst
{
	margin: 8px 0 0;
	font-size: 11px;
	line-height: 1.6;
	color: #ffffff9c;
	text-wrap: pretty;
}
.pm_confirm__knoppen
{
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 16px;
}

/* Feitenkaart in het bevestigingsvel. */
.pm_feiten
{
	display: flex;
	flex-direction: column;
	gap: 9px;
	border: 2px solid #ffffff21;
	border-radius: 9px;
	background: #00000059;
	padding: 13px;
}
.pm_feiten__rij
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 11px;
}
.pm_feiten__rij span { color: #ffffff8a; }
.pm_feiten b { font-weight: normal; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; }
.pm_feiten__lijn { height: 1px; background: #ffffff14; }

/* ── gastaccount (13 sep): waarschuwingsblok + koppelen ───────────────────── */
.pm_chip--gast { color:#fff; background:#d3323e; }
.pm_gast { padding:0 14px; margin-top:-2px; }
.pm_gast__paneel .pm_banner { align-items:flex-start; }
.pm_gast__paneel .pm_banner small { line-height:1.45; text-wrap:pretty; }
.pm_gast__acties { margin-top:12px; }
.pm_gast__of
{
	display:flex; align-items:center; gap:8px; margin:9px 0 7px;
	font-size:10px; letter-spacing:1.5px; color:#ffffff73; text-transform:uppercase;
}
.pm_gast__of:before, .pm_gast__of:after { content:''; flex:1; height:1px; background:#ffffff1f; }
.pm_gast__providers { display:flex; gap:8px; justify-content:center; }
.pm_gast__provider
{
	display:flex; align-items:center; justify-content:center;
	width:44px; height:44px; border-radius:12px;
	background:#00000059; border:1px solid #ffffff2b; text-decoration:none;
}
.pm_gast__provider b { font-family:headers,sans-serif; color:#fff; }
.pm_gast__provider:active { background:#ffffff1f; }
/* het rode uitroepteken op de avatar in de kop: rechtsBOVEN, los van de
   social-teller linksboven. Rechtsonder (de eerste versie) viel hij over de
   level-ster van de XP-balk heen, en in het titelfont las het "!" als een "1"
   (screenshot 14 sep) — dus een echte cirkel met een vet schreefloos teken. */
header .playerStats .badge-alert.pm_gast_badge
{
	top:-3px; left:auto; right:-5px; bottom:auto;
	box-sizing:border-box;
	width:1.35rem; min-width:0; height:1.35rem; min-height:0; line-height:calc(1.35rem - 2px);
	padding:0;
	border-radius:100%;
	background:linear-gradient(#ff5a5a, #c81e2b);
	font-family:Arial, Helvetica, sans-serif; font-weight:900; font-size:15px;
	box-shadow:0 0 0 2px #1a0a2e, 0 0 12px #ff5a5a99;
}
.pm_invoer input[type="text"], .pm_invoer input[type="email"] { font-family:inherit; }
/* fabriek/eilanden op slot tot XP-level 10: gedimd icoon, grijze LVL 10-badge */
.pm_tegel--slot img, .pm_tegel--slot svg { opacity:.4; filter:grayscale(1); }
.pm_tegel--slot .pm_tegel__badge { background:#3b2a5f; color:#ffffffb8; }

/* ── DELETE ACCOUNT (okt 2026, App Store 5.1.1(v) / Google Play) ───────────
   De menurij onder LOG OUT (zelfde rode toon), de lijsten "what is deleted /
   what we keep" op het verwijderscherm en de rode knop in zijn wacht- en
   bezigstand. */
.pm_rij--verwijder .pm_rij__label { color: #ff8a8a; }
.pm_rij--verwijder:active { background: #ff8a8a12; }
/* LOG OUT is hier niet meer de laatste rij; zijn border-bottom:0 laat dan geen
   naad over — die komt boven de verwijderrij */
.pm_rij--uitloggen + .pm_rij--verwijder { border-top: 1px solid #00000073; }

.pm_verwijder_rij
{
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 11px 14px;
	border-bottom: 1px solid #00000073;
}
.pm_verwijder_rij:last-child { border-bottom: 0; }
.pm_verwijder_rij > i { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; }
.pm_verwijder_rij > div { flex: 1; min-width: 0; }
.pm_verwijder_rij b
{
	display: block;
	font-weight: normal;
	font-size: 12.5px;
	letter-spacing: .5px;
	color: #ffffffd6;
}
.pm_verwijder_rij small { display: block; font-size: 10px; line-height: 1.55; color: #ffffff8a; margin-top: 2px; text-wrap: pretty; }
.pm_pop .pm_verwijder_rij b, .pm_drawer .pm_verwijder_rij b { font-family: headers, sans-serif !important; }

/* de ghostknop in de gevarenzone van het beveiligingsoverzicht: rood omlijnd,
   bewust NIET de volle rode knop — dat is LOCK MY ACCOUNT erboven */
.pm_verwijder_knop { width: 100%; font-size: 12.5px; letter-spacing: 1.1px; color: #ff8a8a; border-color: #ff8a8a59; }
.pm_verwijder_knop:hover { color: #ffb3b3; border-color: #ff8a8a8c; }

.cl-btn-danger:disabled { opacity: .45; cursor: default; }
.cl-btn-danger.is-busy { opacity: .6; pointer-events: none; }

/* BLOCKED PLAYERS (moderatie.js, App Store 1.2) */
.pm_blok_avatar{width:38px;height:38px;border-radius:50%;flex:none;background:#170040;object-fit:cover}