/* ============================================================
   CubeLegend — player profile + social rebuild
   Append to CubeRunnerz.css, or load AFTER it.
   Design source: "Player Profile.dc.html" (9 frames, 393x852)
   No CSS variables, hex-with-alpha, 'headers' for numerals,
   'p' for body copy — same conventions as the existing sheet.
   ============================================================ */

/* ---- 1. profile header ---------------------------------- */

/* league chips: focus / speed / awareness side by side under the
   XP bar. Replaces the single-league line. */
.profile_leagues
{
	display:flex;
	gap:5px;
	margin-top:6px;
}
.profile_leagues .profile_league
{
	flex:1;
	display:flex;
	align-items:center;
	gap:5px;
	padding:3px 6px 3px 3px;
	background:#00000059;
	border:1px solid #ffffff26;
	border-radius:7px;
}
.profile_leagues .profile_league img
{
	width:22px;
	height:22px;
	object-fit:contain;
	flex:none;
}
.profile_leagues .profile_league small
{
	font-family:'p';
	font-size:7.5px;
	letter-spacing:1px;
	opacity:.55;
	display:block;
}
.profile_leagues .profile_league span
{
	font-family:'headers';
	font-size:10.5px;
	white-space:nowrap;   /* GOLD III / SILVER IV mogen nooit afbreken */
	display:block;
	margin-top:2px;
}
/* compacte variant: alleen icoon + tier, voor de niet-summary tabs */
.profile_leagues.compact
{
	gap:8px;
}
.profile_leagues.compact .profile_league
{
	flex:none;
	background:none;
	border:0;
	padding:0;
	font-family:'p';
	font-size:9px;
}
.profile_leagues.compact .profile_league img
{
	width:16px;
	height:16px;
}

/* resource-pillen: ALLEEN op de summary-tab. De andere tabs tonen
   identiteit + XP + leagues, niets meer. */
.top_overlayed__header .profile_resources
{
	display:none;
}
.top_overlayed__header[data-tab="summary"] .profile_resources
{
	display:flex;
}
/* geen +-knop in de profielheader: hier wordt niet gekocht */
.profile_resources .inventorystat__add
{
	display:none;
}
.profile_resources .inventorystat span
{
	white-space:nowrap;   /* "6h 12m" wrapte in de vaste pilhoogte */
}

/* header krimpt op scroll — identiteit + XP blijven staan */
.top_overlayed__header.is-collapsed .profile_resources,
.top_overlayed__header.is-collapsed .booster_levels,
.top_overlayed__header.is-collapsed .profile_firstlast
{
	display:none;
}
.top_overlayed__header.is-collapsed .xp-star-outer img
{
	width:50px;
	height:50px;
}

/* ---- 2. activity heatmap (vervangt #activitychart) ------- */
.activity_heatmap
{
	display:grid;
	grid-template-columns:22px repeat(7, 1fr);
	gap:4px;
	align-items:center;
}
.activity_heatmap b,
.activity_heatmap i
{
	font-family:'p';
	font-size:8px;
	font-style:normal;
	font-weight:normal;
	opacity:.55;
}
.activity_heatmap i
{
	text-align:center;
}
.activity_heatmap u
{
	height:14px;
	border-radius:3px;
	text-decoration:none;
	background:#2a1348;
}
.activity_heatmap u[data-bucket="1"] { background:#3d1a68; }
.activity_heatmap u[data-bucket="2"] { background:#6a2bb0; }
.activity_heatmap u[data-bucket="3"] { background:#8a3ae0; }
.activity_heatmap u[data-bucket="4"] { background:#b464ff; }
.activity_heatmap u[data-bucket="peak"] { background:#FFC107; }

/* ---- 3. sub-tabs (SOCIAL: given | received) -------------- */
/* zelfde patroon als de bestaande range-tabs (This week / All time),
   maar als volle pill-rij binnen de tab-inhoud. */
.subtabs
{
	display:flex;
	position:relative;
	padding:3px;
	background:#00000059;
	border:1px solid #11004c;
	border-radius:20px;
}
.subtabs .tab-btn
{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	padding:6px 2px;
	text-align:center;
	border-radius:16px;
	font-family:'headers';
	font-size:11.5px;
	letter-spacing:.5px;
	color:#ffffffa8;
}
.subtabs .tab-btn.active
{
	background:linear-gradient(to bottom, #ffd700 0%, rgb(255 119 0) 100%);
	color:#fff;
	text-shadow:0 1px black;
}
.subtabs .badge-alert
{
	min-width:14px;
	height:14px;
	padding:0 3px;
	border-radius:8px;
	background:#ff2d55;
	font-family:'p';
	font-size:8.5px;
	line-height:14px;
	color:#fff;
	text-shadow:none;
}

/* tab-badges inline i.p.v. absoluut: op een 3-koloms balk overlapte de
   absolute badge de laatste glyphs van het label */
.tabs-full .tab-full-btn .badge-alert
{
	position:static;
	display:inline-block;
	vertical-align:middle;
	margin-left:4px;
}

/* ---- 4. social rows (given / received) ------------------- */
.social-profile-row__badges span.active
{
	color:#ff5c8a;
}
/* ongelezen ontvangen reactie */
.social-profile-list .dashboard_section__rank.is-unseen
{
	background:linear-gradient(#251043, #170830);
	border-color:#ff2d5566;
	box-shadow:0 0 18px #ff2d5522;
	position:relative;
}
.social-profile-list .dashboard_section__rank.is-unseen:before
{
	content:'';
	position:absolute;
	left:-1px;
	top:12px;
	bottom:12px;
	width:3px;
	border-radius:3px;
	background:#ff2d55;
	animation:profileGlowPulse 2.2s ease-in-out infinite;
}
.social-profile-list__divider
{
	display:flex;
	align-items:center;
	gap:8px;
	margin:4px 2px;
	font-family:'p';
	font-size:9px;
	letter-spacing:1px;
	opacity:.4;
}
.social-profile-list__divider:before,
.social-profile-list__divider:after
{
	content:'';
	flex:1;
	height:1px;
	background:#ffffff1f;
}
@keyframes profileGlowPulse
{
	0%,100% { opacity:.35 }
	50%     { opacity:.75 }
}

/* ---- 5. social hub: friends / search / inbox / chat ------ */
.social_row
{
	display:flex;
	align-items:center;
	gap:10px;
	padding:9px 10px;
	background:#170830;
	border:1px solid #ffffff17;
	border-radius:12px;
}
.social_row.is-offline
{
	opacity:.82;
}
.social_row__avatar
{
	position:relative;
	flex:none;
}
.social_row__avatar img
{
	width:40px;
	height:40px;
	border-radius:50%;
	object-fit:cover;
	background:#12042a;
}
/* Periodekeuze van de trendgrafiek. Eigen rij onder de kop: naast de
   disciplinetoggle wordt het op 390px te smal en breken de labels. */
.periode_toggle
{
	margin:8px 0 2px;
	align-self:stretch;
}

/* ── RECENT GAMES: tweede statregel, missiechip en duel-recap ──────────────
   De kaart droeg alleen xp/focus/speed/aware. Deze blokken komen daaronder en
   blijven leeg als er niets te melden is (geen wormholes = geen kolom), zodat
   een classic game niet ineens hoger wordt dan hij hoeft te zijn.           */
.recent_kaart__extra
{
	display:flex;
	gap:14px;
	margin-top:6px;
	flex-wrap:wrap;
}
.recent_kaart__extra > div
{
	display:flex;
	align-items:baseline;
	gap:4px;
}
.recent_kaart__extra b
{
	font-family:'headers';
	font-size:11px;
	color:#ffffffc4;
	font-weight:normal;
}
.recent_kaart__extra span
{
	font-family:p;
	font-size:9px;
	color:#ffffff5c;
	letter-spacing:.3px;
}
.recent_missie
{
	font-family:'headers';
	font-size:9px;
	letter-spacing:.5px;
	color:#C58BFF;
}
/* Duel-recap in de geest van de chatkaart: uitslag, tegenstander, beide cijfers
   en een doorstart naar de volledige samenvatting. */
.recent_kaart__duel
{
	display:flex;
	align-items:center;
	gap:7px;
	margin-top:7px;
	padding-top:7px;
	border-top:1px solid #ffffff14;
}
.recent_duel__wl
{
	width:19px;
	height:19px;
	line-height:19px;
	border-radius:5px;
	font-family:'headers';
	font-size:10px;
	font-weight:normal;
	text-align:center;
	flex:0 0 auto;
}
.recent_duel__wl.is-w { background:#4CAF50; color:#06230a; }
.recent_duel__wl.is-l { background:#f34336; color:#fff; }
.recent_duel__wl.is-d { background:#4a3f66; color:#fff; }
.recent_duel__tegen
{
	font-family:p;
	font-size:10px;
	color:#ffffff8a;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	min-width:0;
	flex:1;
}
.recent_duel__score
{
	font-family:'headers';
	font-size:12px;
	font-weight:normal;
	color:#fff;
	flex:0 0 auto;
}
.recent_kaart__duel small
{
	font-family:p;
	font-size:9px;
	color:#ffffff5c;
}
.recent_kaart__duel a
{
	font-family:'headers';
	font-size:9px;
	color:#FFC46B;
	flex:0 0 auto;
}
/* Voetregel van de oneindige lijst: alleen zichtbaar zolang er meer te halen is */
.recent_meer
{
	text-align:center;
	padding:12px 0 20px;
	font-family:p;
	font-size:10px;
	color:#ffffff3d;
}

.social_row__presence
{
	position:absolute;
	right:0;
	bottom:1px;
	width:11px;
	height:11px;
	border-radius:50%;
	background:#5c5470;
	border:2px solid #170830;
}
.social_row__presence.is-online
{
	background:#7CFC00;
}
/* ORANJE = speelt nu (classic, missie of duel), GROEN = online maar niet in een
   game, grijs = offline. De klasse hangt aan .social_row__presence en is dus
   gescoped; een kale .is-ingame zou app-breed kunnen botsen. */
.social_row__presence.is-ingame
{
	background:#FF9800;
	box-shadow:0 0 6px #ff980099;
}
/* Wat de speler doet. Leest als bijschrift, niet als knop — vandaar geen vlak
   maar alleen kleur, en dezelfde maat als de andere <small> op die rij. */
.social_row__act
{
	font-family:p;
	font-size:10px;
	letter-spacing:.2px;
	color:#ffffff8a;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	min-width:0;
}
.social_row__act.is-ingame
{
	color:#FFC46B;
}
.social_row__body
{
	flex:1;
	min-width:0;
}
.social_row__actions
{
	display:flex;
	gap:6px;
	flex:none;
}
.social_row__actions .icon_btn
{
	width:34px;
	height:34px;
	border-radius:9px;
	background:#00000059;
	border:1px solid #ffffff26;
	display:flex;
	align-items:center;
	justify-content:center;
}
.social_row__actions .icon_btn.is-spent
{
	opacity:.45;
}
.social_row__actions .icon_btn img
{
	width:20px;
	height:20px;
	object-fit:contain;
}
/* actieknop: exact de tab-active gradient, niet een eigen oranje */
.btn_action
{
	height:34px;
	padding:0 11px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	border-radius:9px;
	background:linear-gradient(to bottom, #ffd700 0%, rgb(255 119 0) 100%);
	border:1px solid #11004c;
	font-family:'headers';
	font-size:11px;
	color:#fff;
	text-shadow:0 2px black;
}
.btn_action.is-secondary
{
	background:#00000059;
	border:1px solid #ffffff26;
	color:#ffffffb5;
	text-shadow:none;
}
.btn_action.is-pending
{
	background:#00000059;
	border:1px dashed #ffffff40;
	color:#ffffff8a;
	text-shadow:none;
}
.btn_action.is-done
{
	background:#00000059;
	border:1px solid #ffffff26;
	color:#7CFC00;
	text-shadow:none;
}

/* zoekveld in de social-header */
.social_search
{
	display:flex;
	align-items:center;
	gap:9px;
	padding:9px 12px;
	background:#00000073;
	border:1px solid #ffffff33;
	border-radius:11px;
	font-family:'p';
	font-size:13px;
}
.social_search input
{
	flex:1;
	min-width:0;
	background:none;
	border:0;
	outline:0;
	color:#fff;
	font-family:'p';
	font-size:13px;
}
.social_search mark
{
	background:none;
	color:#FFC107;
}
.social_recents
{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
}
.social_recents span
{
	font-family:'p';
	font-size:10px;
	padding:4px 10px;
	background:#00000059;
	border:1px solid #ffffff26;
	border-radius:14px;
	color:#ffffffb5;
}

/* friend request card */
.friend_request
{
	padding:11px 12px;
	background:linear-gradient(#251043, #170830);
	border:1px solid #ff2d5566;
	border-radius:14px;
}
.friend_request.is-new
{
	box-shadow:0 0 18px #ff2d5522;
}
.friend_request__actions
{
	display:flex;
	gap:8px;
	margin-top:10px;
}
.friend_request__actions .btn_action
{
	height:36px;
	font-size:12px;
}
.friend_request__actions .btn_action:first-child { flex:1; }
.friend_request__actions .btn_action:last-child  { flex:2; }

/* ---- 6. chat --------------------------------------------
   De tekstmaten in dit blok zijn in aug 2026 over de hele linie een slag
   omhoog gegaan: het gesprek was op een telefoon te klein om comfortabel te
   lezen. De verhoudingen onderling zijn gebleven (bel > invoer > snelantwoord
   > tijdstip), alleen de basis ligt hoger. De bel kreeg er ook wat padding bij,
   anders komt grotere tekst tegen de rand te staan. */
.chat_list__row.is-unread
{
	background:linear-gradient(#251043, #170830);
	border-color:#ff2d5566;
	position:relative;
}
.chat_list__row.is-unread:first-of-type
{
	box-shadow:0 0 18px #ff2d5522;
}
.chat_list__row.is-unread:before
{
	content:'';
	position:absolute;
	left:-1px;
	top:12px;
	bottom:12px;
	width:3px;
	border-radius:3px;
	background:#ff2d55;
}
.chat_list__row__preview
{
	font-family:'p';
	font-size:12.5px;
	margin-top:3px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	opacity:.55;
}
.chat_list__row.is-unread .chat_list__row__preview
{
	opacity:1;
}
.chat_list__row__count
{
	flex:none;
	min-width:19px;
	height:19px;
	padding:0 5px;
	border-radius:10px;
	background:#ff2d55;
	font-family:'p';
	font-size:11.5px;
	line-height:19px;
	text-align:center;
}
.chat_list__clan
{
	width:42px;
	height:42px;
	border-radius:12px;
	background:#2a1348;
	border:1px solid #ffffff26;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:'headers';
	font-size:12.5px;
	color:#FFC107;
	flex:none;
}

/* thread: nieuwste bericht staat ALTIJD tegen de composer aan */
.chat_thread
{
	flex:1;
	overflow-y:auto;
	scrollbar-width:none;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	gap:9px;
	padding:14px 14px 12px;
}
.chat_thread::-webkit-scrollbar { display:none; }
.chat_thread__day
{
	align-self:center;
	font-family:'p';
	font-size:10.5px;
	letter-spacing:1px;
	opacity:.36;
}
.chat_bubble
{
	max-width:80%;
	padding:10px 13px;
	font-family:'p';
	font-size:14.5px;
	text-wrap:pretty;
}
.chat_bubble.them
{
	align-self:flex-start;
	background:#1d0b38;
	border:1px solid #ffffff1f;
	border-radius:14px 14px 14px 4px;
}
.chat_bubble.me
{
	align-self:flex-end;
	background:linear-gradient(#8a3ae0, #6a1fb8);
	border:1px solid #c05fff66;
	border-radius:14px 14px 4px 14px;
}
/* duel-uitnodiging in de thread: volle breedte, eigen padding — NIET
   width:100% (dat telde bij content-box de padding erbovenop) */
.chat_card
{
	align-self:stretch;
	padding:11px 12px;
	background:#170830;
	border:1px solid #FFC10740;
	border-radius:14px;
}
.chat_card__stakes
{
	display:flex;
	gap:6px;
	margin-top:9px;
}
.chat_typing
{
	align-self:flex-start;
	display:flex;
	gap:5px;
	padding:10px 13px;
	background:#1d0b38;
	border:1px solid #ffffff1f;
	border-radius:14px;
}
.chat_typing span
{
	width:6px;
	height:6px;
	border-radius:50%;
	background:#ffffffb5;
	animation:profileGlowPulse 1.2s ease-in-out infinite;
}
.chat_typing span:nth-child(2) { animation-delay:.2s; }
.chat_typing span:nth-child(3) { animation-delay:.4s; }
/* lazy laden (8 nov 2026): bovenaan de thread zolang er oudere berichten
   zijn — stil als hint, pulserend terwijl de vorige pagina onderweg is */
.chat_ouder
{
	align-self:center;
	display:flex;
	gap:5px;
	padding:4px 0 6px;
	opacity:.3;
	transition:opacity .2s;
}
.chat_ouder span
{
	width:6px;
	height:6px;
	border-radius:50%;
	background:#ffffffb5;
}
.chat_ouder.is-laden { opacity:1; }
.chat_ouder.is-laden span { animation:profileGlowPulse 1.2s ease-in-out infinite; }
.chat_ouder.is-laden span:nth-child(2) { animation-delay:.2s; }
.chat_ouder.is-laden span:nth-child(3) { animation-delay:.4s; }

.chat_composer
{
	flex:none;
	padding:10px 12px 14px;
	background:#12042a;
	border-top:1px solid #ffffff1f;
}
.chat_quick
{
	display:flex;
	gap:6px;
	overflow-x:auto;
	scrollbar-width:none;
	padding-bottom:9px;
}
.chat_quick::-webkit-scrollbar { display:none; }
.chat_quick span
{
	font-family:'p';
	font-size:12px;
	padding:6px 12px;
	background:#00000059;
	border:1px solid #ffffff26;
	border-radius:14px;
	color:#ffffffcc;
	white-space:nowrap;
}
.chat_composer__row
{
	display:flex;
	align-items:center;
	gap:8px;
}
.chat_composer__row input
{
	flex:1;
	min-width:0;
	height:38px;
	padding:0 12px;
	border-radius:11px;
	background:#00000073;
	border:1px solid #ffffff33;
	color:#fff;
	font-family:'p';
	font-size:14px;
	outline:0;
}
.chat_composer__row .icon_btn,
.chat_composer__row .btn_send
{
	width:38px;
	height:38px;
	border-radius:11px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:none;
}
.chat_composer__row .icon_btn
{
	background:#00000059;
	border:1px solid #ffffff26;
}
.chat_composer__row .btn_send
{
	background:linear-gradient(to bottom, #ffd700 0%, rgb(255 119 0) 100%);
	border:1px solid #11004c;
	color:#fff;
}

/* ---- 7. app-integratie (overlays + hub-chrome) ------------ */

/* statregel boven de vriendenlijst: 24 friends / 5 online / 7 lives to give */
.social_hub__stats
{
	display:flex;
	gap:8px;
	margin:14px 20px 0;
}
.social_hub__stat
{
	flex:1;
	text-align:center;
	padding:8px 4px;
	background:#00000059;
	border:1px solid #ffffff26;
	border-radius:11px;
}
.social_hub__stat b
{
	display:block;
	font-family:'headers';
	font-size:16px;
}
.social_hub__stat small
{
	font-family:'p';
	font-size:8.5px;
	letter-spacing:.5px;
	opacity:.55;
}
.color-positive { color:#7CFC00; }
.color-warn     { color:#FFC107; }
/* inbox-blokken: roze = vriendschapsverzoek (zelfde accent als de
   FRIEND REQUESTS-scheiding in de lijst eronder), paars = duel (hetzelfde
   #c05fff dat 'ranked' overal in de app draagt). Levens houden het amber van
   'lives to give' op de FRIENDS-tab — het gaat om hetzelfde ding. */
.color-request  { color:#ff5c8a; }
.color-duel     { color:#c05fff; }

/* hub-panes scrollen zelf, nooit de pagina */
#social .social_hub__lijst
{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:14px 20px 30px;
	overflow-y:auto;
	scrollbar-width:none;
}
#social .social_hub__lijst::-webkit-scrollbar { display:none; }

/* chatthread-overlay (scherm 09): header vast, berichten scrollen,
   composer tegen de onderkant */
#chatthread .top_overlayed
{
	display:flex;
	flex-direction:column;
}
#chatthread .chat_thread__scroll
{
	flex:1;
	overflow-y:auto;
	scrollbar-width:none;
	display:flex;
	flex-direction:column;
}
#chatthread .chat_thread__scroll::-webkit-scrollbar { display:none; }
#chatthread .chat_thread
{
	/* De buitenste .chat_thread__scroll is de scroller; deze kolom groeit mee
	   met zijn inhoud. Met flex:1 + overflow:auto uit de basisregel was hij
	   precies vensterhoog en liep een lang gesprek over de BOVENrand van een
	   justify-content:flex-end-kolom — daar scrollt geen browser naartoe: je
	   zag alleen het einde van wat geladen was en kon niet teruglezen
	   (8 nov 2026). Korte gesprekken blijven onderaan staan (min-height +
	   flex-end). */
	flex:1 0 auto;
	overflow:visible;
	min-height:100%;
	box-sizing:border-box;
	/* Meer lucht onder het laatste bericht: met de 12px uit .chat_thread plakte
	   de laatste bubbel (en zijn tijdstempel) tegen de snelle antwoorden en de
	   composer aan. */
	padding-bottom:26px;
}
#chatthread .chat_thread__kop
{
	display:flex;
	align-items:center;
	gap:10px;
	padding:0 14px 10px;
}
#chatthread .chat_thread__kop h2
{
	margin:0;
	font-size:16px;
}
#chatthread .chat_thread__kop .btn_action
{
	margin-left:auto;
}

/* ============================================================
   Design-pass (visuele 1-op-1 met "Player Profile.dc.html")
   Alle waardes komen letterlijk uit de design-frames.
   ============================================================ */

/* ---- 8. ondergrond: effen donker i.p.v. de stadsfoto ------ */
/* design: cbg0 op 22% onder een #0b0318-gradient — de generieke
   .top_overlayed:after toont cbg2 vol; hier per overlay overschreven */
#gamerprofile .top_overlayed:after,
#social .top_overlayed:after,
#chatthread .top_overlayed:after
{
	background:linear-gradient(#0b0318cc, #0b0318f5), url(/public/img/cubelegend/cbg0.jpeg) center/cover no-repeat #0b0318;
}
#gamerprofile .top_overlayed:before,
#social .top_overlayed:before,
#chatthread .top_overlayed:before
{
	background:none;
}

/* ---- 9. profielheader (frame 01/02) ----------------------- */
#gamerprofile .profiel_header
{
	align-items:stretch;
	text-align:left;
	padding:14px 16px 16px;
	padding-top:calc(14px + env(safe-area-inset-top));
	gap:0;
}
.profiel_header__knoppen
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}
.profiel_header__knoppen__rechts
{
	display:flex;
	align-items:center;
	gap:8px;
	/* De rij staat op space-between voor de ADD FRIEND-pil links. Op je EIGEN
	   profiel is er geen pil, en dan schoof deze groep — met het kruisje erin —
	   helemaal naar links. margin-left:auto duwt hem in beide gevallen rechts. */
	margin-left:auto;
}
/* Al bevriend: dezelfde pil, maar in de positieve kleur — hij bevestigt iets
   in plaats van iets aan te bieden. Tikken vraagt om de vriendschap op te
   zeggen, dus geen alarmrood: dat hoort bij de bevestigingsdialoog. */
.profiel_pill.is-vriend
{
	background:#1c7a3a3d;
	border-color:#5ce08a5c;
	color:#9cf0bb;
}

.profiel_pill
{
	display:flex;
	align-items:center;
	gap:7px;
	background:#00000059;
	border:1px solid #ffffff2b;
	border-radius:20px;
	padding:5px 12px 5px 8px;
	font-family:'p';
	font-size:12px;
	letter-spacing:.5px;
	color:#fff;
}
.profiel_rond
{
	display:flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border-radius:50%;
	background:#00000059;
	border:1px solid #ffffff2b;
	color:#fff;
}
.profiel_ident
{
	display:flex;
	align-items:center;
	gap:14px;
	margin-top:12px;
}
.profiel_avatar
{
	position:relative;
	flex:none;
	width:82px;
	height:82px;
}
.profiel_avatar__ring
{
	position:absolute;
	inset:-6px;
	border-radius:50%;
	background:conic-gradient(#FFC107, #ff7ae3, #45adff, #FFC107);
	opacity:.85;
}
.profiel_avatar__img
{
	position:absolute;
	inset:2px;
	width:calc(100% - 4px);
	height:calc(100% - 4px);
	border-radius:50%;
	object-fit:cover;
	background:#12042a;
}
.profiel_avatar__ster
{
	position:absolute;
	right:-8px;
	bottom:-6px;
	width:40px;
	height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.profiel_avatar__ster img
{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:contain;
}
.profiel_avatar__ster span
{
	position:relative;
	font-family:'headers';
	font-size:15px;
	text-shadow:0 2px black, 0 -1px black, 1px 0 black, -1px 0 black;
}
.profiel_ident__info
{
	flex:1;
	min-width:0;
}
.profiel_naam
{
	display:flex;
	align-items:center;
	gap:8px;
}
.profiel_naam h1
{
	margin:0;
	font-family:'headers';
	font-size:26px;
	line-height:26px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	text-shadow:0 2px black;
}
.profiel_vip
{
	font-family:'p';
	font-size:10px;
	letter-spacing:1px;
	background:#FFC107;
	color:#3a1c00;
	padding:2px 6px;
	border-radius:4px;
	flex:none;
}
.profiel_xpbar
{
	margin-top:8px;
	height:10px;
	border-radius:6px;
	background:#00000073;
	border:1px solid #ffffff2e;
	overflow:hidden;
	position:relative;
}
.profiel_xpbar i
{
	position:absolute;
	inset:0 auto 0 0;
	background:linear-gradient(90deg, #FFC107, #ffe680);
	box-shadow:0 0 12px #ffc10788;
}
.profiel_xplabels
{
	display:flex;
	justify-content:space-between;
	margin-top:4px;
	font-family:'p';
	font-size:10px;
	color:#ffffff8a;
}
#gamerprofile .profile_resources
{
	display:flex;
	gap:8px;
	margin-top:14px;
}
#gamerprofile .profile_resources .inventorystat
{
	flex:1;
	width:auto;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:7px;
	height:30px;
	padding:0 11px 0 5px;
	background:#38255a;
	border:1px solid #000;
	border-radius:20px;
	box-shadow:inset 0 8px 4px #000000a1;
}
#gamerprofile .profile_resources .inventorystat img
{
	width:28px;
	height:28px;
	object-fit:contain;
	flex:none;
	margin:0;
}
#gamerprofile .profile_resources .inventorystat span
{
	font-family:'headers';
	font-size:14px;
	white-space:nowrap;
	text-shadow:0 1px black, 0 -1px black, 1px 0 black, -1px 0 black;
}
#gamerprofile .profiel_boosters
{
	display:flex;
	gap:5px;
	margin-top:10px;
	overflow:hidden;
	flex-wrap:nowrap;
	justify-content:stretch;
}
#gamerprofile .profiel_boosters__booster
{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2px;
	background:#00000047;
	border-radius:7px;
	padding:5px 2px;
}
#gamerprofile .profiel_boosters__booster img
{
	width:22px;
	height:22px;
	object-fit:contain;
}
#gamerprofile .profiel_boosters__booster span
{
	font-family:'p';
	font-size:8px;
	color:#ffffffad;
	white-space:nowrap;
}
#gamerprofile .profile_firstlast
{
	display:flex;
	justify-content:center;
	gap:14px;
	margin-top:10px;
	font-family:'p';
	font-size:9.5px;
	color:#ffffff7a;
	letter-spacing:.5px;
}
#gamerprofile .profile_firstlast b
{
	color:#fff;
	font-weight:normal;
}

/* compact: op de GAMES/SOCIAL-tab of gescrold — kleine avatar, dunne balk,
   mini-chips; knoppen/resources/boosters/labels verdwijnen (frame 02/03/04) */
.profiel_header .profiel_chips_compact { display:none; }
.profiel_header[data-tab]:not([data-tab="summary"]) .profiel_header__knoppen,
.profiel_header.is-collapsed .profiel_header__knoppen,
.profiel_header[data-tab]:not([data-tab="summary"]) .profiel_chips_vol,
.profiel_header.is-collapsed .profiel_chips_vol,
.profiel_header[data-tab]:not([data-tab="summary"]) .profiel_xplabels,
.profiel_header.is-collapsed .profiel_xplabels,
.profiel_header[data-tab]:not([data-tab="summary"]) .profiel_vip,
.profiel_header.is-collapsed .profiel_vip,
.profiel_header[data-tab]:not([data-tab="summary"]) .profile_resources,
.profiel_header.is-collapsed .profile_resources,
.profiel_header[data-tab]:not([data-tab="summary"]) .profiel_boosters,
.profiel_header.is-collapsed .profiel_boosters,
.profiel_header[data-tab]:not([data-tab="summary"]) .profile_firstlast,
.profiel_header.is-collapsed .profile_firstlast
{
	display:none;
}
.profiel_header[data-tab]:not([data-tab="summary"]) .profiel_chips_compact,
.profiel_header.is-collapsed .profiel_chips_compact
{
	display:block;
	margin-top:6px;
}
.profiel_chips_compact .profile_leagues.compact
{
	margin-top:0;
	gap:8px;
	font-family:'p';
	font-size:9px;
	color:#ffffffb5;
}
.profiel_header[data-tab]:not([data-tab="summary"]) .profiel_ident,
.profiel_header.is-collapsed .profiel_ident
{
	margin-top:0;
	gap:12px;
}
.profiel_header[data-tab]:not([data-tab="summary"]) .profiel_avatar,
.profiel_header.is-collapsed .profiel_avatar
{
	width:52px;
	height:52px;
}
.profiel_header[data-tab]:not([data-tab="summary"]) .profiel_avatar__ring,
.profiel_header.is-collapsed .profiel_avatar__ring
{
	inset:-3px;
}
.profiel_header[data-tab]:not([data-tab="summary"]) .profiel_avatar__ster,
.profiel_header.is-collapsed .profiel_avatar__ster
{
	width:26px;
	height:26px;
	right:-6px;
	bottom:-4px;
}
.profiel_header[data-tab]:not([data-tab="summary"]) .profiel_avatar__ster span,
.profiel_header.is-collapsed .profiel_avatar__ster span
{
	font-size:10px;
}
.profiel_header[data-tab]:not([data-tab="summary"]) .profiel_naam h1,
.profiel_header.is-collapsed .profiel_naam h1
{
	font-size:20px;
	line-height:20px;
}
.profiel_header[data-tab]:not([data-tab="summary"]) .profiel_xpbar,
.profiel_header.is-collapsed .profiel_xpbar
{
	margin-top:6px;
	height:8px;
}
.profiel_header[data-tab]:not([data-tab="summary"]),
.profiel_header.is-collapsed
{
	padding-bottom:12px !important;
}

/* ---- 10. kaart-panelen + statregels (frame 01) ------------ */
#gamerprofile .tabs
{
	padding:14px 14px 30px;
	box-sizing:border-box;
}
.profiel_kaart
{
	background:#170830;
	border:1px solid #ffffff17;
	border-radius:14px;
	padding:12px;
	margin-bottom:12px;
	text-align:left;
}
.profiel_kaart__kop
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-bottom:10px;
}
.profiel_kaart__kop h2
{
	margin:0 !important;
	padding:0 !important;
	font-family:'headers';
	font-size:14px !important;
	letter-spacing:.5px;
}
.profiel_kaart__nb
{
	font-family:'p';
	font-size:10px;
	color:#ffffff70;
}
.range_toggle
{
	display:flex;
	background:#00000059;
	border-radius:20px;
	padding:2px;
	font-family:'p';
	font-size:10px;
	flex:none;
}
.range_toggle span
{
	padding:4px 10px;
	border-radius:14px;
	color:#ffffffa8;
	white-space:nowrap;
}
.range_toggle span.active
{
	background:linear-gradient(to bottom, #ffd700 0%, rgb(255 119 0) 100%);
	color:#fff;
	text-shadow:0 1px black;
}
.heatmap_legende
{
	display:flex;
	align-items:center;
	gap:6px;
	margin-top:9px;
	font-family:'p';
	font-size:9px;
	color:#ffffff8a;
}
.heatmap_legende span
{
	width:9px;
	height:9px;
	border-radius:2px;
	background:#FFC107;
	flex:none;
}
.profiel_stats
{
	display:none;
}
.profiel_stats.active
{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:8px;
}
.profiel_stat
{
	background:#00000047;
	border-radius:9px;
	padding:8px 4px;
	text-align:center;
}
.profiel_stat b
{
	display:block;
	font-family:'headers';
	font-size:17px;
	font-weight:normal;
	white-space:nowrap;
}
.profiel_stat span
{
	font-family:'p';
	font-size:9px;
	color:#ffffff8a;
}
.profiel_sectiekop
{
	margin:2px 0 8px !important;
	padding:0 !important;
	font-family:'headers';
	font-size:14px !important;
	letter-spacing:.5px;
	text-align:left;
}

/* ---- 11. games-tab (frame 02) ----------------------------- */
.grafiek_pane
{
	display:none;
}
.grafiek_pane.active
{
	display:block;
}
.grafiek_holder
{
	position:relative;
	height:104px;
}
.grafiek_voet
{
	display:flex;
	justify-content:space-between;
	margin-top:6px;
	font-family:'p';
	font-size:9px;
	color:#ffffff70;
}
.recent_kaart
{
	display:flex;
	align-items:center;
	gap:10px;
	background:#170830;
	border:1px solid #ffffff17;
	border-radius:12px;
	padding:9px 10px;
	margin-bottom:8px;
	text-align:left;
}
.recent_kaart__avatar
{
	flex:none;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2px;
}
.recent_kaart__avatar img
{
	width:34px;
	height:34px;
	border-radius:9px;
	object-fit:cover;
	background:#12042a;
}
.recent_kaart__avatar span
{
	font-family:'p';
	font-size:9px;
	color:#ffffff70;
}
.recent_kaart__avatar b
{
	font-weight:normal;
}
.recent_kaart__info
{
	flex:1;
	min-width:0;
}
.recent_kaart__kop
{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
}
.recent_kaart__kop b
{
	font-family:'headers';
	font-size:13px;
	font-weight:normal;
}
.recent_kaart__kop b span
{
	color:#ffffff70;
	font-family:'p';
	font-size:10px;
}
.recent_kaart__kop small
{
	font-family:'p';
	font-size:9px;
	color:#ffffff70;
}
.recent_kaart__stats
{
	display:flex;
	gap:12px;
	margin-top:5px;
}
.recent_kaart__stats b
{
	display:block;
	font-family:'headers';
	font-size:12px;
	font-weight:normal;
	white-space:nowrap;
}
.recent_kaart__stats span
{
	font-family:'p';
	font-size:8.5px;
	color:#ffffff70;
}

/* ---- 12. social-tab (frame 03/04) ------------------------- */
.social_sorteer
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin:10px 0;
}
.social_sorteer__nb
{
	font-family:'p';
	font-size:10px;
	color:#ffffff8a;
}
.social_sorteer__nb .color-alert
{
	color:#ff2d55;
	font-weight:normal;
}
#gamerprofile [tabcontent="social"] .subtabs
{
	margin:0;
}
#gamerprofile .social-profile-list
{
	text-align:left;
}
.social_rij
{
	display:flex;
	align-items:center;
	gap:10px;
	background:#170830;
	border:1px solid #ffffff17;
	border-radius:12px;
	padding:9px 10px;
	margin-bottom:8px;
	position:relative;
}
.social_rij__avatar
{
	width:38px;
	height:38px;
	border-radius:50%;
	object-fit:cover;
	background:#12042a;
	flex:none;
}
.social_rij__info
{
	flex:1;
	min-width:0;
}
.social_rij__naam
{
	display:flex;
	align-items:center;
	gap:7px;
}
.social_rij__naam b
{
	font-family:'headers';
	font-size:14px;
	font-weight:normal;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.social_type_chip
{
	font-family:'p';
	font-size:8px;
	letter-spacing:1px;
	border-radius:4px;
	padding:1px 5px;
	flex:none;
}
.social_type_chip.is-ranked    { color:#c05fff; border:1px solid #c05fff66; }
.social_type_chip.is-adventure { color:#FFC46B; border:1px solid #FFC46B66; }
.social_type_chip.is-classic   { color:#ffffff8a; border:1px solid #ffffff33; }
.social_tellers
{
	display:flex;
	align-items:center;
	gap:12px;
	margin-top:4px;
	font-family:'p';
	font-size:10px;
	color:#ffffff8a;
}
.social_tellers span
{
	display:flex;
	align-items:center;
	gap:4px;
}
.social_tellers .is-hart    { color:#ff5c8a; }
.social_tellers .is-comment { color:#45adff; }
.social_rij__tijd
{
	font-family:'p';
	font-size:9px;
	color:#ffffff70;
	flex:none;
}
.social_rij__zin
{
	font-family:'p';
	font-size:11.5px;
	color:#ffffffd6;
}
.social_rij__zin b
{
	font-family:'headers';
	font-size:12.5px;
	font-weight:normal;
}
.social_rij__soort.is-ranked    { color:#c05fff; }
.social_rij__soort.is-adventure { color:#FFC46B; }
.social_rij__soort.is-classic   { color:#ffffffb5; }
.social_rij.is-unseen
{
	background:linear-gradient(#251043, #170830);
	border-color:#ff2d5566;
	box-shadow:0 0 18px #ff2d5522;
}
.social_rij.is-unseen:before
{
	content:'';
	position:absolute;
	left:-1px;
	top:12px;
	bottom:12px;
	width:3px;
	border-radius:3px;
	background:#ff2d55;
	animation:profileGlowPulse 2.2s ease-in-out infinite;
}

/* ---- 13. social-hub-header + lijsten (frame 05-08) -------- */
#social .top_overlayed__header.hub_header
{
	align-items:stretch;
	text-align:left;
	padding:10px 16px 10px;
	padding-top:calc(10px + env(safe-area-inset-top));
	max-height:unset;
	margin-bottom:0;
	gap:0;
}
#social .hub_header h1
{
	font-size:22px;
	text-shadow:0 2px black;
}
/* De titelregel droeg een vaste height:35px. Met de mascotte erin moet hij op
   inhoud kunnen groeien, en de titel hoort dan onderaan uit te lijnen — op
   dezelfde grondlijn als de voeten van de pose. */
#social .hub_header__top
{
	align-items:flex-end;
	min-height:35px;
}
#social .hub_header__top > a
{
	padding-bottom:4px;
}
/* Zelfde gids-component als op de dashboardkoppen, maar lager: die 168px zou
   deze kop bijna verdubbelen, en juist boven de tabbalk is verticale ruimte
   schaars (daar is eerder expliciet op gesneden). 104px geeft het artwork nog
   ruim genoeg body om als artwork te lezen. */
/* De pose is object-fit:contain, dus hij rendert op de KLEINSTE maat van het
   vak — breder maken alleen doet niets, de hoogte moet mee. Beide dus omhoog:
   132x104 → 172x150. De titel breekt daardoor over twee regels ("LEGENDARY" is
   op 22px zo'n 130px breed en er blijft er 159 over), en dat mag hier: het
   artwork is het zwaarste element van deze kop, zoals op de dashboardkoppen.

   De verticale lucht om de mascotte zat NIET in de opmaak maar in het BESTAND:
   gemeten aan de alpha van cubelegend-social-2 is 7,5% van het vierkant leeg
   boven de tekening en 17% eronder — de tekening zelf is maar 75,5% hoog. In
   een vak van 150px is dat 11px lucht boven en 26px onder, en die duwden de
   hele kop 37px uit elkaar zonder dat er iets te zien was.

   Vandaar negatieve marges precies ter grootte van die lucht: de tekening
   blijft even groot, maar zijn voetafdruk in de kop is nog maar de tekening
   zelf. position:absolute zou dit niet oplossen — dan verdwijnt de mascotte uit
   de flow, komt de titel op één regel en zakt de kop verder in, maar hangt hij
   over de statistiekblokken heen. Zolang die blokken de volle breedte houden,
   is wegsnijden van de lucht de winst die er te halen valt. */
#social .hub_header__gids
{
	width:172px;
	min-height:150px;
	align-self:flex-end;
	margin-top:-11px;
	margin-bottom:-26px;
}
/* De onderste 26px van dat vak zijn doorzichtig en liggen nu ÓVER de
   statistiekblokken. Onzichtbaar, maar wel een tikvanger die daar niets te
   zoeken heeft — de blokken eroverheen. */
#social .social_hub__kop
{
	position:relative;
	z-index:2;
}
/* Het vraagteken staat in CubeRunnerz.css op left:120/top:56 — gemikt op de
   opgestoken hand van de 'informative'-pose in een 156x168-vak. Andere pose,
   ander vak, dus hier opnieuw gemikt.

   Gemeten aan de alpha van cubelegend-social-2 (op een 100x100-raster): de
   groene vriend steekt zijn hand op tot (94, 44) — het meest rechtse punt van
   de hele plaat. Tussen y=24% en y=40% loopt de rechterrand niet verder dan
   x=80%, dus dáár is lucht. De pose vult 150x150 vanaf x=11 in dit vak, dus
   (143, 36) valt precies in dat gat, vlak boven de zwaaiende hand. */
#social .hub_header__gids span
{
	left:143px;
	top:36px;
}

.social_hub__kop
{
	margin-top:8px;
}
.social_hub__kop:empty
{
	display:none;
}
.social_hub__kop .social_hub__stats
{
	margin:0;
}
.social_hub__stat
{
	border-radius:9px;
	padding:7px 4px;
}
.social_hub__kop .social_search
{
	margin:0;
}
.social_search__telling
{
	margin-left:auto;
	font-family:'p';
	font-size:10px;
	color:#ffffff8a;
	white-space:nowrap;
}
.social_hub__kop__nb
{
	font-family:'p';
	font-size:11px;
	color:#ffffffb5;
	margin-top:-2px;
}
#social .social_hub__lijst
{
	padding:12px 14px 30px;
}
#social .social-profile-list__divider
{
	font-size:9px;
	letter-spacing:1px;
	opacity:1;
	color:#ffffff66;
}
#social [tabcontent="friends"] .social-profile-list__divider:first-child
{
	color:#7CFC00;
}
.social_duel_chip
{
	font-family:'p';
	font-size:8px;
	letter-spacing:.5px;
	color:#fff;
	background:#ff2d55;
	border-radius:4px;
	padding:1px 5px;
	flex:none;
}
.social_recents
{
	align-items:center;
}
.social_recents__label
{
	font-family:'p';
	font-size:9px;
	letter-spacing:1px;
	color:#ffffff66;
	background:none;
	border:0;
	padding:0;
}
/* legacy [tabcontent="inbox"] [datetime]-regel zette tijden absoluut
   rechtsboven het pane — hier hoort hij gewoon in de regel */
#social [tabcontent="inbox"] [datetime]
{
	position:static;
	right:auto;
	top:auto;
	color:inherit;
}

/* ---- 14. chatthread (frame 09) ---------------------------- */
#chatthread .top_overlayed__header.chat_header
{
	align-items:stretch;
	text-align:left;
	padding:12px 14px;
	padding-top:calc(12px + env(safe-area-inset-top));
	max-height:unset;
	margin-bottom:0;
	gap:0;
}
#chatthread .chat_thread__kop
{
	padding:0;
}
.chat_thread__terug
{
	color:#fff;
	flex:none;
	display:flex;
	align-items:center;
}
.chat_thread__wie
{
	flex:1;
	min-width:0;
}
.chat_thread__wie h2
{
	margin:0 !important;
	padding:0 !important;
	font-family:'headers';
	font-size:18px !important;
	text-shadow:0 2px black;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.chat_thread__wie .profile_leagues.compact
{
	margin-top:3px;
	gap:7px;
	font-size:10px;
	color:#ffffffcc;
	flex-wrap:nowrap;
	overflow:hidden;
}
.chat_thread__wie .profile_leagues.compact .profile_league img
{
	width:14px;
	height:14px;
}
#chatthread .chat_card .inventorystat
{
	flex:1;
	width:auto;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	background:#00000059;
	border:1px solid #ffffff26;
	border-radius:8px;
	padding:5px;
	height:auto;
	box-shadow:none;
}
#chatthread .chat_card .inventorystat img
{
	width:16px;
	height:16px;
	object-fit:contain;
	margin:0;
}
#chatthread .chat_card .inventorystat span
{
	font-family:'headers';
	font-size:12px;
	text-shadow:none;
}
#chatthread .chat_card h3
{
	font-family:'headers';
	font-size:13px !important;
	margin:0 !important;
	padding:0 !important;
}
.chat_plus_menu
{
	display:flex;
	gap:8px;
	padding-bottom:9px;
}
.chat_plus_menu .btn_action
{
	flex:1;
}

/* ---- 15. correcties na de eerste vergelijkronde ----------- */
/* de generieke [tabcontent].active zet display:block !important —
   de stat-tegels moeten desondanks een 4-koloms grid blijven */
.profiel_stats.active
{
	display:grid !important;
	grid-template-columns:repeat(4, 1fr);
	gap:8px;
	height:auto;
}
.grafiek_pane.active
{
	display:block !important;
	height:auto;
}
/* tabbalk op de donkere strip, volle breedte (frame 01-04) */
#gamerprofile .tabs-wrapper,
#social .tabs-wrapper
{
	background:#12042a;
	border-bottom:2px solid #00000080;
	padding:9px 12px 11px;
	width:100%;
	box-sizing:border-box;
	z-index: 9999;
}
#gamerprofile .tabs-parent,
#social .tabs-parent
{
	margin:0;
	padding:0;
	width:100%;
}

/* ---- 16. tweede correctieronde ---------------------------- */
/* geneste panes (stats/grafiek) dragen [tabcontent] en erven daar
   position:absolute + height:100% van — binnen hun kaart horen ze
   gewoon in de flow te staan */
.profiel_stats,
.grafiek_pane
{
	position:static !important;
	height:auto !important;
	max-height:none !important;
	overflow:visible !important;
}
/* Chart.js meet zijn ouder op een laat moment — de canvas mag nooit
   groter worden dan de 104px-holder uit het design */
.grafiek_holder
{
	overflow:hidden;
}
.grafiek_holder canvas
{
	width:100% !important;
	height:104px !important;
}
/* tabbalk vult de donkere strip volledig (frame 01-04) */
#gamerprofile .tabs-full,
#social .tabs-full
{
	width:100%;
	margin:0;
}
/* compacte header: de #gamerprofile-regels voor resources/boosters wonnen
   op ID-specificiteit van de verbergregels — hier expliciet hernomen */
#gamerprofile .profiel_header[data-tab]:not([data-tab="summary"]) .profile_resources,
#gamerprofile .profiel_header.is-collapsed .profile_resources,
#gamerprofile .profiel_header[data-tab]:not([data-tab="summary"]) .profiel_boosters,
#gamerprofile .profiel_header.is-collapsed .profiel_boosters,
#gamerprofile .profiel_header[data-tab]:not([data-tab="summary"]) .profile_firstlast,
#gamerprofile .profiel_header.is-collapsed .profile_firstlast,
#gamerprofile .profiel_header[data-tab]:not([data-tab="summary"]) .profiel_header__knoppen,
#gamerprofile .profiel_header.is-collapsed .profiel_header__knoppen
{
	display:none !important;
}

/* ---- 17. derde correctieronde ----------------------------- */
/* de standaard overlay-font is caps-only display-schrift: alles zonder
   expliciete 'p' rendert als KAPITALEN — bodytekst in hub/profiel/chat
   expliciet op 'p' (het design gebruikt overal Acme voor lopende tekst) */
#social .social_row,
#social .friend_request,
#social .social_hub__kop,
#gamerprofile .social_rij,
#gamerprofile .profiel_kaart,
#chatthread .chat_thread__wie
{
	font-family:'p';
	text-transform:none;
	text-align:left;
}
#social .social_row .username,
#social .friend_request .username
{
	font-family:'headers';
}
#social .tabs,
#gamerprofile .tabs
{
	text-align:left;
}
/* subtab-badge hoorde ín de RECEIVED-knop, niet er los boven */
.subtabs .badge-alert
{
	position:static;
	display:inline-block;
}
/* het gekleurde run-woord blijft onderkast, wat een ouder ook afdwingt */
.social_rij__soort
{
	text-transform:lowercase;
}
/* legacy [tabcontent="inbox"]-opmaak (padding 30, paarse blokken, oranje
   spans, 100px-afbeeldingen) hoort bij het oude inbox-pane — neutraliseren */
#social [tabcontent="inbox"]
{
	padding:0;
}
#social [tabcontent="inbox"] > .social_hub__lijst
{
	background:none;
	border-radius:0;
	padding:12px 14px 30px;
	gap:9px;
}
#social [tabcontent="inbox"] span
{
	color:inherit;
}
#social [tabcontent="inbox"] img
{
	width:auto;
	height:auto;
}
#social [tabcontent="inbox"] .social_row__avatar img
{
	width:40px;
	height:40px;
}

/* ---- 18. vierde correctieronde ---------------------------- */
/* globale span/b-regels zetten font3 (caps-only display-schrift) — binnen
   de nieuwe schermen erven lopende-tekst-elementen gewoon 'p'; namen en
   knoppen her-bevestigen 'headers' */
#social .social_row span,
#social .social_row small,
#social .friend_request span,
#social .friend_request small,
#social .social_hub__kop span,
#social .social_hub__kop small,
#social .social-profile-list__divider span,
#gamerprofile .social_rij span,
#gamerprofile .social_rij small,
#gamerprofile .social_sorteer span,
#gamerprofile .social_sorteer b,
#gamerprofile .profile_firstlast b,
#gamerprofile .profiel_xplabels span,
#gamerprofile .recent_kaart span,
#gamerprofile .recent_kaart small,
#gamerprofile .profiel_kaart .grafiek_voet span,
#gamerprofile .heatmap_legende,
#chatthread .chat_card span,
#chatthread .chat_card small,
#chatthread .chat_thread small
{
	/* niet 'inherit': de globale *:not(input)-regel zet font3 op élke
	   tussenlaag, dus erven levert alsnog kapitalen op */
	font-family:'p';
	text-transform:none;
}
#social mark
{
	background:none;
	color:#FFC107;
}
#social .social_row b,
#social .friend_request b,
#social .social_hub__kop b,
#gamerprofile .social_rij__naam b,
#gamerprofile .social_rij__zin b
{
	font-family:'headers';
	font-weight:normal;
}
/* de tellers/toggles die bewust 'headers' of eigen font hebben blijven dat */
#social .social_row .username,
#social .friend_request .username,
#social .range_toggle span
{
	font-family:'headers';
}
#social .social_hub__kop .range_toggle span,
#gamerprofile .range_toggle span,
.range_toggle span
{
	font-family:'p';
}
#chatthread .chat_card .inventorystat span
{
	font-family:'headers';
}
/* naamregels in hub-rijen horen links, niet gecentreerd */
#social .social_row__body .flex-row
{
	justify-content:flex-start;
	flex-wrap:nowrap;
}
#social .social_row__body .flex-row .username
{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
/* vriendenlijst-dividers: label links, lijn rechts (frame 05) */
#social [tabcontent="friends"] .social-profile-list__divider:before
{
	display:none;
}

/* ---- 19. vijfde correctieronde ---------------------------- */
/* subtab-badge als klein inline-pilletje — de basis .badge-alert geeft
   'm een rand + schaduw + absolute positie mee */
.subtabs .badge-alert
{
	position:static !important;
	border:0;
	box-shadow:none;
	transform:none;
	margin:0 0 0 2px;
	width:auto;
}
#gamerprofile [tabcontent="social"] .subtabs
{
	margin:0 0 10px;
}
/* chatlijst: tijd hoort rechtsboven in de rij (frame 08) */
#social .chat_list__row .social_row__body .flex-row
{
	justify-content:space-between;
}
/* LVL/laatst-gezien breekt nooit binnen een vriendenrij */
#social .social_row__body small
{
	white-space:nowrap;
}
/* threadkop: naam + chips links uitgelijnd naast de avatar (frame 09) */
#chatthread .chat_thread__wie h2
{
	text-align:left;
}

/* ---- 20. laatste microfixes ------------------------------- */
.subtabs .badge-alert
{
	margin:0 0 0 2px !important;
	line-height:14px !important;
	height:14px !important;
	min-width:14px !important;
	border-radius:8px !important;
	font-size:8.5px !important;
	top:auto !important;
	right:auto !important;
	align-self:center;
}
/* reactietijd rechtsboven in de rij (frame 03/04) */
.social_rij__tijd
{
	align-self:flex-start;
	margin-top:2px;
}

/* ---- 21. tabs + collapse + sluitknop ---------------------- */
/* de generieke .tabs-wrapper draagt margin:10px 20px — daardoor sprong de
   balk links in en liep hij rechts uit beeld; en de celfont is 16px waar
   het design 13px zet */
#gamerprofile .tabs-wrapper,
#social .tabs-wrapper
{
	margin:0 !important;
	width:100% !important;
}
#gamerprofile .tabs-full,
#social .tabs-full
{
	font-size:13px;
	letter-spacing:.5px;
}
#gamerprofile .tabs-full .tab-full-btn,
#social .tabs-full .tab-full-btn
{
	padding:8px 2px;
	min-width:0;
	/* Geen overflow: deze ID-regel won op specificiteit van de app-brede
	   tabregel en knipte de zwevende rode tag af. Ook de x-as-only-variant
	   sneuvelde: WebKit knipt bij een clip op één as ook verticaal. Zie de
	   uitleg bij .tabs-full .tab-full-btn in cubelegend-personal.css §6;
	   white-space:nowrap houdt de labels hier op één regel. */
	overflow:visible;
	white-space:nowrap;
}
/* de sluitknop (✕) blijft ALTIJD zichtbaar: in de compacte header zweeft
   hij rechtsboven; de ADD FRIEND-pill en de ⋮ verdwijnen daar wél */
#gamerprofile .profiel_header[data-tab]:not([data-tab="summary"]) .profiel_header__knoppen,
#gamerprofile .profiel_header.is-collapsed .profiel_header__knoppen
{
	display:flex !important;
	position:absolute;
	top:calc(10px + env(safe-area-inset-top));
	right:12px;
	z-index:4;
}
#gamerprofile .profiel_header[data-tab]:not([data-tab="summary"]) .profiel_header__knoppen .profiel_pill,
#gamerprofile .profiel_header.is-collapsed .profiel_header__knoppen .profiel_pill,
#gamerprofile .profiel_header[data-tab]:not([data-tab="summary"]) .profiel_header__knoppen [social-privacy-toggle],
#gamerprofile .profiel_header.is-collapsed .profiel_header__knoppen [social-privacy-toggle]
{
	display:none !important;
}
#gamerprofile .profiel_header
{
	position:relative;
}
/* identiteit niet onder de zwevende sluitknop laten schuiven */
#gamerprofile .profiel_header[data-tab]:not([data-tab="summary"]) .profiel_ident__info,
#gamerprofile .profiel_header.is-collapsed .profiel_ident__info
{
	padding-right:40px;
}
/* de headerkrimp mag zacht verlopen */
#gamerprofile .profiel_header .profiel_avatar,
#gamerprofile .profiel_header .profiel_avatar__ster,
#gamerprofile .profiel_header .profiel_naam h1
{
	transition:all .18s ease;
}

/* ---- 22. chatthread: uitlijning + bubbels ----------------- */
/* bodytekst in de thread hoort links (de overlay centreert globaal);
   lange woorden breken binnen de bubbel i.p.v. eruit te lopen */
#chatthread .chat_thread
{
	text-align:left;
	font-family:'p';
}
#chatthread .chat_bubble
{
	overflow-wrap:anywhere;
	min-width:0;
	text-align:left;
}
/* de bubbelhoeken uit het design (staartje onderaan) — expliciet her-
   bevestigd zodat geen generieke radius ze rond maakt */
#chatthread .chat_bubble.them
{
	border-radius:14px 14px 14px 4px;
}
#chatthread .chat_bubble.me
{
	border-radius:14px 14px 4px 14px;
}
#chatthread .chat_thread__day
{
	text-align:center;
}

/* ---- 23. feedbackronde 2 ---------------------------------- */
/* 4. de hub-tabbalk staat nu als eigen strip ONDER de header — zelfde
   donkere laag als het profiel (frame 05-08) */
#social .tabs-wrapper,
#gamerprofile .tabs-wrapper
{
	background:#12042a;
	border-bottom:2px solid #00000080;
	padding:9px 12px 11px !important;
	position:relative;
	z-index: 9999;
}
/* 8. tabs + highlight in het design-font: labels in 'headers', en het
   geel gemarkeerde zoekdeel erft gewoon het naam-font */
#gamerprofile .tabs-full .tab-full-btn,
#social .tabs-full .tab-full-btn
{
	font-family:'headers';
}
#social mark
{
	font-family:inherit;
	background:#FFC107;
	color:#3a1c00;
	border-radius:3px;
	padding:0 1px;
}
/* 5. zoekvelden exact naar het design: hoogte, rand, glas-icoon */
#social .social_hub__kop .social_search
{
	display:flex;
	align-items:center;
	gap:9px;
	background:#00000073 !important;
	border:1px solid #ffffff33 !important;
	border-radius:11px !important;
	padding:10px 12px !important;
	margin:0;
}
#social .social_hub__kop .social_search svg
{
	width:18px;
	height:18px;
	flex:none;
	opacity:.7;
}
#social .social_hub__kop .social_search input
{
	flex:1 !important;
	min-width:0;
	width:auto !important;
	height:auto !important;
	margin:0 !important;
	padding:0 !important;
	background:none !important;
	border:0 !important;
	box-shadow:none !important;
	outline:0;
	color:#fff;
	font-family:'p';
	font-size:14px;
	text-align:left;
}
/* 5. statregel-tegels strakker naar frame 05 */
#social .social_hub__stats
{
	display:flex;
	gap:8px;
}
#social .social_hub__stat
{
	flex:1;
	background:#00000059 !important;
	border:1px solid #ffffff26 !important;
	border-radius:9px !important;
	padding:7px 4px !important;
	text-align:center;
}
#social .social_hub__stat b
{
	display:block;
	font-family:'headers';
	font-size:17px;
	font-weight:normal;
}
#social .social_hub__stat small
{
	font-family:'p';
	font-size:9px;
	color:#ffffff8a;
}
/* 5. chatkop + duelkaart-titels links */
#chatthread .chat_card,
#chatthread .chat_card h3,
#chatthread .chat_card small
{
	text-align:left;
}
#chatthread .chat_thread__kop
{
	text-align:left;
}
/* 7. de DUEL-knop in de threadkop mag steviger */
#chatthread .chat_thread__kop .btn_action
{
	height:40px;
	padding:0 18px;
	font-size:13px;
	border-radius:10px;
}
/* 9. content in het profiel: zelfde breedte als de tabbalk erboven
   (strip-padding 12px), kaarten vullen die breedte volledig */
#gamerprofile .tabs
{
	padding:0;
	/* De tabstrook is het LAATSTE flex-kind van .top_overlayed en moet dus
	   doorlopen tot de onderrand van het scherm — in béide headerstanden.
	   Twee dingen stonden dat in de weg:
	   1. CubeRunnerz.css:6365 reserveerde margin-bottom: 40px + safe-area voor
	      een balk die er niet meer is; die 40px bleef als zwarte strook staan.
	   2. height/max-height: -webkit-fill-available rekende zichzelf uit t.o.v.
	      de container i.p.v. de RESTruimte, wat buiten Chrome anders uitpakt.
	   Echte flex-groei doet allebei in één keer goed. De safe-area zit nu in de
	   bodempadding van de pane hieronder, zodat de inhoud er vrij van scrollt
	   maar de container gewoon tot onderaan doorloopt. */
	margin-bottom:0;
	flex:1 1 auto;
	min-height:0;
	height:auto;
	max-height:none;
}
#gamerprofile [tabcontent][tabgroup="main"]
{
	padding:14px 12px calc(30px + env(safe-area-inset-bottom));
	box-sizing:border-box;
	left:0;
}
#gamerprofile .profiel_kaart,
#gamerprofile .recent_kaart,
#gamerprofile .social_rij
{
	width:100%;
	box-sizing:border-box;
	margin-left:0;
	margin-right:0;
}
/* recente-games-subtabs: zelfde motief, kleine marge onder de grafiekkaart */
.recent_subtabs
{
	margin:0 0 10px;
}
/* uitslagkaart in de chat */
.chat_card--result.is-won  { border-color:#7CFC0055; }
.chat_card--result.is-lost { border-color:#ff6b6b55; }
.chat_card--result.is-draw { border-color:#FFC10740; }
.chat_card__uitslag
{
	display:flex;
	align-items:center;
	justify-content:space-around;
	gap:10px;
	margin-top:9px;
}
.chat_card__uitslag div
{
	text-align:center;
}
.chat_card__uitslag b
{
	display:block;
	font-family:'headers';
	font-size:15px;
	font-weight:normal;
}
.chat_card__uitslag span
{
	font-family:'p';
	font-size:9px;
	color:#ffffff8a;
}
.chat_card__uitslag i
{
	font-family:'headers';
	font-style:normal;
	font-size:11px;
	color:#ffffff70;
}

/* ---- 24. feedbackronde 2: avatar, passen, uitslagkaart ---- */
/* 10. avatar: ring → zwarte schijf → afbeelding onderaan uitgelijnd met
   een dun zwart randje uit de schijf */
.profiel_avatar__schijf
{
	position:absolute;
	inset:-1px;
	border-radius:50%;
	background:#0b0318;
}
#gamerprofile .profiel_avatar__img
{
	top:auto;
	left:4px;
	right:4px;
	bottom:3px;
	width:calc(100% - 8px);
	height:calc(100% - 8px);
	object-fit:cover;
	object-position:center bottom;
}
/* 11. avatar-uitvergroting */
#avatarLightbox
{
	position:fixed;
	inset:0;
	z-index:99;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#0b0318e6;
	opacity:0;
	transition:opacity .25s ease;
}
#avatarLightbox.actief
{
	opacity:1;
}
#avatarLightbox img
{
	width:78vw;
	height:78vw;
	max-width:420px;
	max-height:420px;
	border-radius:50%;
	object-fit:cover;
	object-position:center bottom;
	background:#12042a;
	box-shadow:0 0 0 6px #46027466, 0 30px 80px #000000b3;
}
/* 3. pas-badges: goud (vip) / paars (factory) wanneer actief déze maand,
   grijs-doorschijnend zodra ooit geactiveerd */
.profiel_factory
{
	font-family:'p';
	font-size:10px;
	letter-spacing:1px;
	background:#bc1fd6;
	color:#fff;
	padding:2px 6px;
	border-radius:4px;
	flex:none;
}
.profiel_vip.is-uit,
.profiel_factory.is-uit
{
	background:#ffffff26;
	color:#ffffff8a;
}
/* tickets-drawer */
#passenDrawer .passen_lijst
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	padding:10px 20px 40px;
	overflow-y:auto;
	scrollbar-width:none;
}
#passenDrawer .passen_lijst::-webkit-scrollbar { display:none; }
#passenDrawer [view-content]
{
	display:none;
}
#passenDrawer [view-wrapper="1"] [view-content="1"],
#passenDrawer [view-wrapper="2"] [view-content="2"]
{
	display:flex;
}
/* factory-tickets in het paarse thema (zelfde gradient als [id=factoryPass]) */
#passenDrawer .passen_factory .ticket
{
	background: radial-gradient(ellipse farthest-corner at right bottom, #f2a3ff 0%, #be23d8 8%, #8c07a3 30%, #6b007e 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #f2a3ff 8%, #bc1fd6 25%, #9d00b7 62.5%, #7d0092 100%);
	box-shadow: 0 2px 5px #000000, inset 0 -4px #79038d, inset 0 -5px #f8c8ff;
}
/* 6. uitslagkaart naar de mock */
.color-bad { color:#ff6b6b; }
.chat_card__resultkop
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
}
.chat_card__resultkop h3
{
	font-family:'headers';
	font-size:12.5px !important;
	margin:0 !important;
}
.chat_card__verdict
{
	font-family:'headers';
	font-size:13px;
	font-weight:normal;
	flex:none;
}
.chat_card--result.is-won  .chat_card__verdict { color:#7CFC00; }
.chat_card--result.is-lost .chat_card__verdict { color:#ff2d55; }
.chat_card--result.is-draw .chat_card__verdict { color:#FFC107; }
.chat_card__spelers
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-top:10px;
}
.chat_card__speler
{
	display:flex;
	align-items:center;
	gap:8px;
	min-width:0;
}
.chat_card__speler img
{
	width:38px;
	height:38px;
	border-radius:50%;
	object-fit:cover;
	background:#12042a;
	flex:none;
}
/* De <b> draagt sinds de omwisseling het RESULTAAT en niet de naam: dat is waar
   de kaart over gaat, dus groter en in het koplettertype. De naam zakt naar de
   span eronder. */
.chat_card__speler b
{
	display:block;
	font-family:'headers';
	font-size:16px;
	font-weight:normal;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.chat_card__speler span
{
	display:block;
	font-family:'p';
	font-size:10px;
	color:#ffffff8a;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.chat_card__speler.is-tegen
{
	text-align:right;
}
.chat_card__ronden
{
	text-align:center;
	flex:none;
}
.chat_card__ronden b
{
	display:block;
	font-family:'headers';
	font-size:18px;
	font-weight:normal;
}
.chat_card--result.is-won  .chat_card__ronden b { color:#7CFC00; }
.chat_card--result.is-lost .chat_card__ronden b { color:#ff2d55; }
.chat_card__ronden span
{
	font-family:'p';
	font-size:10px;
	letter-spacing:1px;
	color:#ffffff8a;
}
.chat_card__shield
{
	display:flex;
	align-items:center;
	gap:6px;
	margin-top:8px;
	font-family:'p';
	font-size:9.5px;
	color:#ffffff8a;
}
.chat_card__shield img
{
	width:14px;
	height:14px;
	object-fit:contain;
}

/* ---- 25. SOCIAL-tabbreedte (feedback) --------------------- */
/* de geneste GIVEN/RECEIVED-panes dragen zelf [tabcontent] en kregen daar
   position:absolute + fill-available van — ze negeerden de pane-padding
   waardoor alleen de SOCIAL-tab breder liep dan de andere tabs */
#gamerprofile [tabcontent="socialOut"][tabgroup="social"],
#gamerprofile [tabcontent="socialIn"][tabgroup="social"]
{
	position:static !important;
	width:auto !important;
	height:auto !important;
	max-height:none !important;
	overflow:visible !important;
	padding:0 !important;
	margin:0 !important;
}
#gamerprofile .social-profile-list
{
	padding:0;
	margin:0;
	width:100%;
	box-sizing:border-box;
}

/* ---- 26. threadkop-naam links ----------------------------- */
/* een generieke h2-regel zet display:flex + justify-content:center —
   text-align:left had daar geen vat op; de naam hoort links naast de
   avatar (design frame 09/10) */
#chatthread .chat_thread__wie h2
{
	display:flex;
	justify-content:flex-start;
	text-align:left;
	width:100%;
}

/* ---- 27. invite-kaartkop links (zelfde flex-centreringskwaal) --- */
#chatthread .chat_card__invitekop
{
	display:flex;
	align-items:center;
	gap:10px;
	text-align:left;
}
#chatthread .chat_card__invitekop img
{
	flex:none;
}
#chatthread .chat_card__invitekop > div
{
	flex:1;
	min-width:0;
}
#chatthread .chat_card h3,
#chatthread .chat_card__resultkop h3
{
	display:flex;
	justify-content:flex-start;
	width:100%;
	text-align:left;
}

/* ---- 28. zoekvelden + statregel (feedback) ---------------- */
/* de globale input::placeholder is cursief donkerpaars (onzichtbaar op
   donker) en een globale input-regel dimt naar opacity .5 — binnen de
   nieuwe schermen gelden de designwaardes */
#social .social_hub__kop input,
#chatthread .chat_composer__row input
{
	opacity:1 !important;
	font-style:normal;
}
#social .social_hub__kop input::placeholder,
#chatthread .chat_composer__row input::placeholder
{
	color:#ffffff70 !important;
	font-style:normal !important;
	font-family:'p' !important;
	opacity:1 !important;
}
/* composer-veld zelf naar het design (hoogte/rand stonden op de globale
   input-stijl) */
#chatthread .chat_composer__row input
{
	height:38px !important;
	padding:0 12px !important;
	margin:0 !important;
	border-radius:11px !important;
	background:#00000073 !important;
	border:1px solid #ffffff33 !important;
	box-shadow:none !important;
	width:auto !important;
	flex:1 !important;
	color:#fff;
	font-family:'p';
	/* deze regel wint van .chat_composer__row input in §6 — beide bijhouden,
	   anders lijkt een maatwijziging daar te werken en doet ze niets */
	font-size:14px;
}
/* statregel: container niet in font3 laten erven; labels enkelvoudig
   gedimd zoals het design (#ffffff8a), nummers in 'headers' */
#social .social_hub__stat
{
	font-family:'p';
	text-transform:none;
}
#social .social_hub__stat b
{
	font-family:'headers';
	font-size:17px;
	font-weight:normal;
}
#social .social_hub__stat small
{
	font-family:'p';
	font-size:9px;
	color:#ffffff8a;
	opacity:1;
}

/* ---- 29. tijden + leescues in de thread ------------------- */
.chat_meta
{
	display:flex;
	align-items:center;
	gap:4px;
	font-family:'p';
	font-size:10px;
	color:#ffffff59;
	margin-top:-5px;
	line-height:1;
}
.chat_meta.me
{
	align-self:flex-end;
	justify-content:flex-end;
}
.chat_meta.them
{
	align-self:flex-start;
}
.chat_meta__cue
{
	display:inline-flex;
	align-items:center;
	color:#ffffff59;
}
.chat_meta__cue svg + svg
{
	margin-left:-6px;
}
/* Drie standen: één grijze vink = verstuurd, twee grijze = bezorgd (de ander
   kreeg hem onder ogen), twee groene = gelezen. .is-bezorgd staat er ook op een
   gelezen bericht — de kleur is wat de twee uit elkaar houdt, niet het aantal. */
.chat_meta__cue.is-gelezen
{
	color:#7CFC00;
}

/* ---- 23 · chatkop: aanwezigheid in woorden -----------------------------
   Het groene bolletje zegt alleen "nu wel/niet"; wie een dag niet keek wil
   weten hoe lang geleden. Staat onder de league-chips zodat de naamregel
   ongemoeid blijft. */
#chatthread .chat_thread__online
{
	display: block;
	margin-top: 2px;
	font-family: p, sans-serif;
	font-size: 10.5px;
	letter-spacing: .5px;
	color: #ffffff70;
}
#chatthread .chat_thread__online.is-online { color: #5ce08a; }

/* ---- 24 · FACTORY op het profiel --------------------------------------
   Design "Player Profile.dc.html", frame 01. Twee toevoegingen:
   (a) de boosterrij in de kop markeert de cube die NU in een machine ligt —
       "6 → 7" met een draaiend badge i.p.v. een kaal "LVL 7";
   (b) de SUMMARY-tab opent met een FACTORY-kaart: machine(s), het tweede-
       machine-slot en de eilandenstrip.
   De kaart is read-only; elke tik opent de bestaande factory-view, waar de
   acties (collect / evolve / claim) al leven. */
@keyframes profielFabriekSpin { to { transform:rotate(360deg); } }

#gamerprofile .profiel_boosters__booster
{
	position:relative;
}
#gamerprofile .profiel_boosters__booster.is-upgrading
{
	background:#170830;
	border:1px solid #7CFC0066;
	box-shadow:0 0 10px #7CFC0033;
	padding:4px 1px;
}
#gamerprofile .profiel_boosters__booster.is-upgrading span { color:#7CFC00; }
#gamerprofile .profiel_boosters__booster.is-klaar
{
	background:#170830;
	border:1px solid #FFC10777;
	box-shadow:0 0 10px #ffc10733;
	padding:4px 1px;
}
#gamerprofile .profiel_boosters__booster.is-klaar span { color:#FFC107; }
#gamerprofile .profiel_boosters__merk
{
	position:absolute;
	top:-4px;
	right:-3px;
	width:13px;
	height:13px;
	border-radius:50%;
	background:#7CFC00;
	border:1.5px solid #0b0318;
	color:#0b0318;
	display:flex;
	align-items:center;
	justify-content:center;
}
/* de rij knipt af (overflow:hidden); op de laatste tegel schuift het badge naar
   binnen zodat het bolletje niet half wegvalt */
#gamerprofile .profiel_boosters__booster:last-child .profiel_boosters__merk { right:0; }
#gamerprofile .profiel_boosters__booster.is-upgrading .profiel_boosters__merk svg
{
	animation:profielFabriekSpin 2.6s linear infinite;
}
#gamerprofile .profiel_boosters__booster.is-klaar .profiel_boosters__merk { background:#FFC107; }

/* de kaart zelf */
#gamerprofile .profiel_fabriek__pass
{
	font-family:'p';
	font-size:9.5px;
	letter-spacing:1px;
	color:#FFC107;
	border:1px solid #ffc10759;
	border-radius:8px;
	padding:2px 7px;
	flex:none;
}
#gamerprofile .factory_rij
{
	display:flex;
	align-items:center;
	gap:10px;
	margin-top:8px;
	background:#00000059;
	border:1px solid #7CFC0040;
	border-radius:12px;
	padding:9px 10px;
}
/* eerste regel hangt onder de kaartkop (design: 11px), volgende regels 8px */
#gamerprofile .profiel_kaart__kop + .factory_rij { margin-top:11px; }
#gamerprofile .factory_rij.is-klaar { border-color:#ffc10777; }
#gamerprofile .factory_rij.is-leeg
{
	background:#00000047;
	border:1px dashed #ffffff2b;
}
#gamerprofile .factory_rij.is-stil { justify-content:center; }
#gamerprofile .factory_rij__cube
{
	position:relative;
	flex:none;
	width:44px;
	height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:12px;
	background:#7CFC0017;
	border:1px solid #7CFC0040;
}
#gamerprofile .factory_rij.is-klaar .factory_rij__cube
{
	background:#ffc1071a;
	border-color:#ffc10759;
}
#gamerprofile .factory_rij__cube img
{
	width:28px;
	height:28px;
	object-fit:contain;
}
#gamerprofile .factory_rij__cube.is-leeg
{
	background:none;
	border:1px dashed #ffffff2b;
	color:#ffffff70;
}
#gamerprofile .factory_rij__body
{
	flex:1;
	min-width:0;
}
#gamerprofile .factory_rij__kop
{
	display:flex;
	align-items:baseline;
	gap:6px;
}
#gamerprofile .factory_rij__kop b
{
	font-family:'headers';
	font-size:13px;
	font-weight:normal;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
#gamerprofile .factory_rij__kop small
{
	font-family:'p';
	font-size:9px;
	color:#7CFC00;
	flex:none;
}
#gamerprofile .factory_rij.is-klaar .factory_rij__kop small { color:#FFC107; }
#gamerprofile .factory_rij__nb
{
	display:block;
	font-family:'p';
	font-size:9px;
	color:#ffffff8a;
	margin-top:3px;
}
#gamerprofile .factory_rij__balk
{
	margin-top:6px;
	height:8px;
	border-radius:5px;
	background:#00000073;
	border:1px solid #ffffff26;
	overflow:hidden;
}
#gamerprofile .factory_rij__balk span
{
	display:block;
	height:100%;
	background:linear-gradient(90deg, #4a8f00, #7CFC00);
}
#gamerprofile .factory_rij.is-klaar .factory_rij__balk span
{
	background:linear-gradient(90deg, #b07d00, #FFC107);
}
#gamerprofile .factory_rij__meta
{
	display:flex;
	justify-content:space-between;
	gap:8px;
	margin-top:4px;
	font-family:'p';
	font-size:9px;
	color:#ffffff8a;
}
/* de universele *:not(input){font-family:font3}-regel uit CubeRunnerz.css zet
   caps-only display-schrift op élke tussenlaag; lopende tekst her-bevestigt 'p'
   (zelfde valkuil als sectie 18 hierboven) */
#gamerprofile .factory_rij__meta span,
#gamerprofile .factory_rij__meta b,
#gamerprofile .profiel_fabriek__strip small,
#gamerprofile .profiel_fabriek__strip span,
#gamerprofile .profiel_eiland__naam i
{
	font-family:'p';
	text-transform:none;
}
#gamerprofile .factory_rij__meta b
{
	color:#fff;
	font-weight:normal;
	white-space:nowrap;
}
#gamerprofile .factory_rij__meta b.is-klaar { color:#FFC107; }

/* eilandenstrip */
#gamerprofile .profiel_fabriek__strip
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-top:13px;
	font-family:'p';
	font-size:9px;
	letter-spacing:1px;
	color:#ffffff5c;
}
#gamerprofile .profiel_fabriek__strip small
{
	/* <small> schaalt standaard naar 0.83em — de striplabel blijft op 9px */
	font-size:9px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
#gamerprofile .profiel_fabriek__strip span
{
	font-size:9.5px;
	letter-spacing:0;
	color:#ffffff8a;
	flex:none;
}
#gamerprofile .profiel_fabriek__strip span.is-vol { color:#ff6b6b; }
#gamerprofile .profiel_fabriek__eilanden
{
	display:flex;
	gap:6px;
	margin-top:8px;
}
#gamerprofile .profiel_eiland
{
	flex:1;
	min-width:0;
	background:#170830;
	border:1px solid #ffffff17;
	border-radius:10px;
	padding:6px 4px 7px;
	text-align:center;
}
#gamerprofile .profiel_eiland.is-vol { border-color:#ff2d5566; }
#gamerprofile .profiel_eiland.is-locked
{
	background:#12042a;
	border:1px dashed #ffffff2b;
}
#gamerprofile .profiel_eiland img
{
	width:100%;
	height:30px;
	object-fit:contain;
}
#gamerprofile .profiel_eiland.is-locked img
{
	filter:grayscale(1);
	opacity:.4;
}
#gamerprofile .profiel_eiland__naam
{
	font-family:'p';
	font-size:7.5px;
	color:#ffffff8a;
	margin-top:3px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
#gamerprofile .profiel_eiland__naam i
{
	font-style:normal;
	color:#FFC107;
}
#gamerprofile .profiel_eiland.is-locked .profiel_eiland__naam { color:#ffffff70; }
#gamerprofile .profiel_eiland__balk
{
	margin-top:4px;
	height:5px;
	border-radius:3px;
	background:#00000073;
	overflow:hidden;
}
#gamerprofile .profiel_eiland__balk span
{
	display:block;
	height:100%;
	background:#7CFC00;
}
#gamerprofile .profiel_eiland.is-vol .profiel_eiland__balk span { background:#ff2d55; }

/* ============================================================
   FRIENDLY-DUEL-RIVALITEIT + MILESTONES (design/PvP Friendly Duel)
   Seriebalk in de chatkop, rivaliteitsbalk + cue in de chatlijst,
   milestone-kaarten in de thread en het head-to-head-scherm
   (OVERVIEW / ALL DUELS / RECORDS / MILESTONES + tier-pagina's).
   Kleuren en maten 1-op-1 uit het design-canvas; tegels dragen de
   discipline (nooit league-trofeeën in friendly-context).
   ============================================================ */

/* -- animaties (canvas: clShimmer / clGlow / clDot) ------------ */
@keyframes clShimmer
{
	0%   { transform:translateX(-170%) skewX(-18deg); }
	100% { transform:translateX(420%) skewX(-18deg); }
}
@keyframes clGlow
{
	0%, 100% { box-shadow:0 0 14px #ffc10726; }
	50%      { box-shadow:0 0 26px #ffc1074d; }
}

/* -- bouwstenen ------------------------------------------------ */
.h2h_tegel
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:none;
}
.h2h_tegel_wrap
{
	display:inline-flex;
	flex-direction:column;
	align-items:center;
	gap:3px;
	flex:none;
}
.h2h_dots { display:inline-flex; gap:3px; }
.h2h_dots i
{
	width:4px;
	height:4px;
	border-radius:50%;
}
.h2h_dots.is-groot i { width:7px; height:7px; }
.h2h_chip
{
	display:inline-block;
	font-family:headers;
	font-size:8.5px;
	letter-spacing:.5px;
	border:1px solid;
	border-radius:7px;
	padding:2px 6px;
	line-height:1;
	vertical-align:middle;
}
.h2h_pillen { display:flex; gap:8px; margin-top:8px; }
.h2h_pil
{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	background:#00000059;
	border:1px solid #ffffff26;
	border-radius:9px;
	padding:8px;
}
.h2h_pil.is-geclaimd { border-color:#7CFC0033; }
.h2h_pil img { width:18px; height:18px; object-fit:contain; }
.h2h_pil span { font-family:headers; font-size:13px; }
.h2h_rivbalk_rij { display:flex; align-items:center; gap:8px; margin-top:6px; }
.h2h_rivbalk
{
	flex:1;
	display:flex;
	border-radius:3px;
	background:#00000073;
	overflow:hidden;
}
.h2h_rivbalk i { display:block; height:100%; }
.h2h_rivbalk_telling { font-family:headers; font-size:9px; color:#ffffffcc; flex:none; }
.h2h_vorm { display:inline-flex; gap:3px; align-items:center; }
.h2h_vorm i { border-radius:50%; display:inline-block; }
.h2h_cue { display:flex; align-items:center; gap:6px; margin-top:5px; }
.h2h_cue__naam
{
	font-family:headers;
	font-size:9px;
	letter-spacing:.3px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width:150px;
	flex:none;
}
.h2h_cue__balk
{
	flex:1;
	height:4px;
	border-radius:2px;
	background:#00000073;
	overflow:hidden;
	display:block;
	min-width:24px;
}
.h2h_cue__balk i { display:block; height:100%; }
.h2h_cue__claim
{
	font-family:headers;
	font-size:8.5px;
	color:#0b0318;
	background:#7CFC00;
	border-radius:5px;
	padding:2px 5px;
	flex:none;
}
.chat_list__row.is-claimbaar { border:1px solid #FFC10759; border-radius:12px; }
.chat_list__row.is-race { border:1px solid #ff9c3d59; border-radius:12px; }
.chat_list__row__badge
{
	position:absolute;
	top:-3px;
	left:-4px;
	min-width:17px;
	height:17px;
	border-radius:9px;
	background:#FFC107;
	color:#2a1a00;
	border:2px solid #170830;
	font-family:headers;
	font-size:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 3px;
	z-index:2;
}
.chat_list__row .social_row__avatar { position:relative; }

/* -- seriebalk in de chatkop (scherm 09) ----------------------- */
.h2h_seriebalk
{
	display:flex;
	align-items:center;
	gap:7px;
	margin:12px -14px 0;
	padding:9px 14px;
	background:#0000008a;
	border-top:1px solid #ffffff1f;
	cursor:pointer;
}
.h2h_seriebalk .h2h_serie__avatar
{
	width:20px;
	height:20px;
	border-radius:50%;
	border:1px solid #ffffff40;
	object-fit:cover;
	flex:none;
}
.h2h_seriebalk .h2h_serie__avatar.is-ik { border-color:#7CFC0080; }
.h2h_serie__w, .h2h_serie__l { font-family:headers; font-size:16px; }
.h2h_serie__w { color:#7CFC00; }
.h2h_serie__l { color:#ff2d55; }
.h2h_serie__streep { color:#ffffff59; font-size:12px; }
.h2h_serie__divider { width:1px; height:16px; background:#ffffff26; flex:none; }
.h2h_serie__mid { flex:1; display:flex; align-items:center; gap:6px; min-width:0; }
.h2h_serie__nb, .h2h_serie__klaar { font-family:p; font-size:10px; color:#ffffffa8; }
.h2h_serie__klaar { color:#FFC107; }
.chat_card__friendly_nb
{
	font-family:p;
	font-size:9.5px;
	color:#ffffff8a;
	align-self:center;
}

/* -- milestone-kaarten in de thread ---------------------------- */
.h2h_kaart { align-self:stretch; position:relative; }
.h2h_kaart.is-klaar
{
	border:1px solid #FFC107;
	animation:clGlow 2.6s ease-in-out infinite;
	overflow:hidden;
}
.h2h_kaart.is-klaar::after, .h2h_viering__badge .h2h_shimmer
{
	content:'';
	position:absolute;
	inset:0;
	width:34%;
	background:linear-gradient(105deg, transparent, #ffffff29, transparent);
	animation:clShimmer 2.8s ease-in-out infinite;
	pointer-events:none;
}
.h2h_kaart.is-geclaimd { border:1px solid #ffffff26; }
.h2h_kaart.is-voorbij { opacity:.85; border:1px solid #ffffff17; }
.h2h_kaart.is-voortgang { border:1px solid #ffffff17; }
.h2h_kaart__kop { display:flex; gap:10px; align-items:flex-start; }
.h2h_kaart__kop > div { flex:1; min-width:0; }
.h2h_kaart__label
{
	display:inline-block;
	font-family:p;
	font-size:9px;
	letter-spacing:1px;
	margin-right:6px;
}
.h2h_kaart__naam { margin:2px 0 0; font-family:headers; font-size:14px; }
.h2h_kaart__naam.is-gedempt { color:#ffffffb5; font-size:12px; }
.h2h_kaart__sub { display:block; font-family:p; font-size:9.5px; color:#ffffff8a; margin-top:2px; }
.h2h_kaart__voetnoot { display:block; font-family:p; font-size:9.5px; color:#ffffff8a; margin-top:6px; }
.h2h_kaart__hun { width:26px; height:26px; border-radius:50%; border:2px solid #ff9c3d; flex:none; }
.h2h_avatarpaar { display:flex; margin-top:8px; }
.h2h_avatarpaar img
{
	width:26px;
	height:26px;
	border-radius:50%;
	border:2px solid #ffffff40;
	object-fit:cover;
}
.h2h_avatarpaar img + img { margin-left:-9px; }
.h2h_avatarpaar.is-groot { justify-content:center; }
.h2h_avatarpaar.is-groot img { width:38px; height:38px; }
.h2h_avatarpaar.is-groot img + img { margin-left:-10px; }
.h2h_nudge
{
	align-self:stretch;
	display:flex;
	align-items:center;
	gap:8px;
	padding:7px 11px;
	background:#00000073;
	border:1px solid;
	border-radius:10px;
}
.h2h_nudge__copy { flex:1; font-family:p; font-size:10.5px; color:#ffffffa8; min-width:0; }
.h2h_nudge__copy b { font-family:headers; font-size:10px; }
.h2h_nudge__balk
{
	width:40px;
	height:5px;
	border-radius:3px;
	background:#00000073;
	overflow:hidden;
	flex:none;
}
.h2h_nudge__balk i { display:block; height:100%; }

/* -- head-to-head-overlay -------------------------------------- */
#h2hOverlay .top_overlayed { display:flex; flex-direction:column; }
#h2hOverlay .h2h_kop { padding-bottom:0; }
.h2h_kop__titel { flex:1; margin:0; font-size:18px; }
.h2h_kop__hero { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; }
.h2h_kop__avatar
{
	width:46px;
	height:46px;
	border-radius:50%;
	border:2px solid #ffffff40;
	object-fit:cover;
}
.h2h_kop__avatar.is-ik { border-color:#7CFC0080; }
.h2h_kop__record { font-family:headers; font-size:30px; display:flex; align-items:center; gap:6px; }
.h2h_kop__record i { color:#ffffff70; font-size:18px; font-style:normal; }
.h2h_kop__caption
{
	display:block;
	text-align:center;
	font-family:p;
	font-size:9.5px;
	letter-spacing:1px;
	color:#ffffffa8;
	margin-top:4px;
}
.h2h_tabs { display:flex; margin-top:10px; }
.h2h_tabs .h2h_tab
{
	flex:1;
	text-align:center;
	font-family:headers;
	font-size:10px;
	letter-spacing:.5px;
	color:#ffffff8a;
	padding:9px 2px;
	border-bottom:3px solid transparent;
	cursor:pointer;
}
.h2h_tabs .h2h_tab.active { color:#fff; border-bottom-color:#FFC107; }
.h2h_tabs.is-states { margin:8px 0 0; }
.h2h_scroll { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.h2h_body { padding:12px 14px 20px; display:flex; flex-direction:column; gap:8px; }
.h2h_voet
{
	background:#12042a;
	border-top:1px solid #ffffff1f;
	padding:10px 14px calc(16px + env(safe-area-inset-bottom));
}
.h2h_voet .btn_action { width:100%; height:44px; display:flex; align-items:center; justify-content:center; }
.h2h_pilrij { display:flex; gap:6px; flex-wrap:wrap; }
.h2h_pilknop
{
	font-family:headers;
	font-size:10px;
	padding:6px 12px;
	border-radius:9px;
	background:#00000059;
	border:1px solid #ffffff26;
	color:#ffffffb5;
	cursor:pointer;
}
.h2h_pilknop.active
{
	background:linear-gradient(to bottom, #ffd700 0%, rgb(255 119 0) 100%);
	border-color:#11004c;
	color:#2a1a00;
	text-shadow:none;
}
.h2h_lijst_caption { font-family:p; font-size:9.5px; color:#ffffff70; letter-spacing:.5px; }
.h2h_lijst_caption h3 { margin:0; font-size:12px; color:#fff; }
.h2h_sorteerhint { text-align:right; font-family:p; font-size:9px; color:#ffffff5c; }
.h2h_ov_summary { display:flex; align-items:center; gap:10px; margin-top:4px; }
.h2h_ov_summary > div:first-of-type { flex:1; min-width:0; }
.h2h_ov_summary h3 { margin:0; font-size:15px; }
.h2h_ov_summary small { display:block; font-family:p; font-size:9.5px; color:#ffffff8a; }
.h2h_ov_wl { text-align:right; }
.h2h_ov_wl b { font-family:headers; font-size:22px; display:block; }
.h2h_ov_wl small { font-family:p; font-size:8.5px; color:#ffffff70; }
.h2h_kaartvlak
{
	background:#170830;
	border:1px solid #ffffff26;
	border-radius:14px;
	padding:13px 13px 11px;
}
.h2h_kaartvlak__label { font-family:p; font-size:9px; letter-spacing:1px; color:#ffffff70; }
.h2h_kaartvlak__waarde { display:block; font-family:headers; font-size:26px; }
.h2h_legend { display:flex; gap:12px; margin:4px 0 8px; }
.h2h_legend span { font-family:p; font-size:9px; color:#ffffff8a; display:flex; align-items:center; gap:4px; }
.h2h_legend i { width:8px; height:8px; border-radius:2px; display:inline-block; }
.h2h_chart
{
	display:flex;
	align-items:flex-end;
	justify-content:space-around;
	height:132px;
	border-bottom:1px solid #ffffff33;
	background:repeating-linear-gradient(to top, transparent 0 32px, #ffffff14 32px 33px);
}
.h2h_chart__paar { display:flex; align-items:flex-end; gap:3px; }
.h2h_chart__paar i { width:13px; border-radius:3px 3px 0 0; display:block; }
.h2h_marge { margin-top:8px; }
.h2h_marge small { font-family:p; font-size:9px; color:#ffffff70; }
.h2h_marge__band
{
	position:relative;
	height:38px;
	display:flex;
	align-items:center;
	justify-content:space-around;
}
.h2h_marge__band::before
{
	content:'';
	position:absolute;
	left:0; right:0; top:19px;
	height:1px;
	background:#ffffff59;
}
.h2h_marge__band i { width:18px; display:block; position:relative; }
.h2h_marge__band i.is-plus { background:#4CAF50; align-self:flex-start; margin-top:auto; margin-bottom:19px; }
.h2h_marge__band i.is-min { background:#f34336; align-self:flex-start; margin-top:19px; }
.h2h_statrij { display:flex; margin-top:10px; border-top:1px solid #ffffff1f; padding-top:8px; }
.h2h_statrij > div { flex:1; text-align:center; }
.h2h_statrij > div + div { border-left:1px solid #ffffff1f; }
.h2h_statrij small { display:block; font-family:p; font-size:8.5px; letter-spacing:.5px; color:#ffffff70; }
.h2h_statrij b { font-family:headers; font-size:15px; }
.h2h_serieblok h3 { margin:0; font-size:11.5px; }
.h2h_vormblokken { display:flex; gap:4px; margin:8px 0; }
.h2h_vormblokken i { flex:1; height:20px; border-radius:4px; display:block; }
.h2h_serieblok__voet { font-family:p; font-size:9.5px; color:#ffffff8a; }
.h2h_duelrij, .h2h_recordrij, .h2h_ledgerrij
{
	display:flex;
	align-items:center;
	gap:9px;
	padding:10px;
	background:#170830;
	border:1px solid #ffffff17;
	border-radius:12px;
	cursor:pointer;
}
.h2h_recordrij, .h2h_ledgerrij
{
	background:none;
	border:none;
	border-bottom:1px solid #ffffff17;
	border-radius:0;
	padding:11px 0;
}
.h2h_duelrij.is-nieuwste-winst { border-color:#7CFC0055; }
.h2h_wl
{
	width:26px;
	height:26px;
	border-radius:7px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:headers;
	font-size:12px;
	flex:none;
}
.h2h_duelrij__mid { flex:1; min-width:0; }
.h2h_duelrij__mid b { font-family:headers; font-size:12px; display:block; }
.h2h_duelrij__mid small { font-family:p; font-size:9.5px; color:#ffffff8a; display:block; }
.h2h_duelrij__tijd { font-family:p; font-size:9.5px; color:#ffffff5c; flex:none; }
.h2h_record__waarde { text-align:right; flex:none; }
.h2h_record__waarde b { font-family:headers; font-size:15px; display:block; }
.h2h_record__waarde small { font-family:p; font-size:9px; color:#ffffff70; }
.h2h_ledgerrij__label { flex:1; font-family:p; font-size:11px; color:#ffffffcc; }
.h2h_ledgerrij__label small { display:block; font-size:9px; color:#ffffff5c; }
.h2h_ledgerrij b { font-family:headers; font-size:14px; min-width:52px; text-align:right; }
.h2h_chevron_leeg { width:16px; flex:none; }
.h2h_ms_avatars { display:flex; align-items:center; justify-content:space-between; }
.h2h_ms_avatars span { display:flex; align-items:center; gap:6px; }
.h2h_ms_avatars img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.h2h_ms_avatars b { font-family:headers; font-size:15px; }
.h2h_ms_avatars small { font-family:p; font-size:9px; color:#ffffff8a; }
.h2h_ms_avatars__mid { font-family:p; font-size:9.5px; letter-spacing:1px; color:#ffffffa8; }
.h2h_tierkop { margin-top:10px; }
.h2h_tierkop b { font-family:p; font-size:9px; letter-spacing:1.5px; }
.h2h_tierkop small { font-family:p; font-size:9px; color:#ffffff70; }
.h2h_msrij
{
	display:flex;
	align-items:center;
	gap:11px;
	padding:11px 0;
	border-bottom:1px solid #ffffff17;
}
.h2h_msrij.is-gedempt { opacity:.8; }
.h2h_msrij__mid { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.h2h_msrij__naam { font-family:headers; font-size:11.5px; color:#ffffffb5; }
.h2h_msrij.is-klaar .h2h_msrij__naam { color:#fff; }
.h2h_msrij__xp { margin-left:auto; font-family:headers; font-size:9px; color:#63b7ff; }
.h2h_msrij small { font-family:p; font-size:9px; color:#ffffff8a; }
.h2h_msrij__claim { height:36px; padding:0 14px; display:flex; align-items:center; flex:none; }
.h2h_dubbelbalk { display:flex; flex-direction:column; gap:3px; }
.h2h_dubbelbalk > div { display:flex; align-items:center; gap:6px; }
.h2h_dubbelbalk img
{
	width:14px;
	height:14px;
	border-radius:50%;
	border:1px solid;
	object-fit:cover;
	flex:none;
}
.h2h_dubbelbalk .h2h_cue__balk { height:6px; }
.h2h_dubbelbalk small { min-width:46px; text-align:right; }
.h2h_showall
{
	height:34px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:4px;
	margin:6px 0 2px;
}
.h2h_sectielabel { font-family:p; font-size:9px; letter-spacing:1.5px; color:#ffffff70; margin-top:8px; }
.h2h_tierpagina_kop b { font-family:headers; font-size:12px; letter-spacing:.5px; }
.h2h_terugknop { height:30px; padding:0 10px; display:flex; align-items:center; gap:2px; }
.h2h_terugknop svg { transform:rotate(180deg); }
.h2h_modus { display:flex; gap:6px; }
.h2h_modus span
{
	flex:1;
	text-align:center;
	font-family:headers;
	font-size:10px;
	padding:7px;
	border-radius:9px;
	background:#00000059;
	border:1px solid #ffffff26;
	color:#ffffffb5;
	cursor:pointer;
}
.h2h_modus span.active { background:#00000073; border-color:#ffffff59; color:#fff; }
.h2h_ladderstrip { display:flex; gap:6px; }
.h2h_ladderstrip > div
{
	flex:1;
	background:#170830;
	border:1px solid #ffffff26;
	border-radius:10px;
	padding:8px 9px;
}
.h2h_ladderstrip small { display:block; font-family:p; font-size:8px; color:#ffffff70; letter-spacing:.5px; }
.h2h_ladderstrip b { font-family:headers; font-size:10px; }
.h2h_ladderstrip img { width:12px; height:12px; vertical-align:-2px; }
.h2h_seriekaart
{
	background:#170830;
	border:1px solid #ffffff26;
	border-radius:14px;
	padding:11px;
}
.h2h_seriekaart__kop { display:flex; align-items:center; gap:9px; }
.h2h_seriekaart__kop > div { flex:1; min-width:0; }
.h2h_seriekaart__kop b { font-family:headers; font-size:12px; display:block; }
.h2h_seriekaart__kop small { font-family:p; font-size:9px; color:#ffffff8a; }
.h2h_seriekaart__tag { font-family:headers; font-size:8.5px; flex:none; }
.h2h_stagetegels { display:flex; gap:6px; margin-top:9px; }
.h2h_stagetegel
{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	background:#00000059;
	border:1px solid #ffffff26;
	border-radius:10px;
	padding:8px 5px;
}
.h2h_stagetegel b { font-family:headers; font-size:11px; }
.h2h_stagetegel small { font-family:p; font-size:8.5px; color:#ffffff8a; }
.h2h_stagetegel img { width:12px; height:12px; border-radius:50%; }
.h2h_stagetegel__reward
{
	border-top:1px solid #ffffff14;
	padding-top:4px;
	margin-top:2px;
	width:100%;
	text-align:center;
	font-family:headers !important;
	font-size:8.5px !important;
	color:#ffffffb5 !important;
}
.h2h_stagetegel__reward img { width:10px; height:10px; border-radius:0; }
.h2h_lijst_legenda { display:flex; align-items:center; gap:12px; padding:0 2px; }
.h2h_lijst_legenda span { display:flex; align-items:center; gap:4px; font-family:p; font-size:9px; color:#ffffff70; }
.h2h_lijst_legenda i { width:8px; height:5px; border-radius:2px; display:inline-block; }
.h2h_lijst_legenda b { margin-left:auto; font-family:p; font-size:9px; color:#ffffff70; font-weight:normal; }

/* -- visuele pass t.o.v. het canvas (frame-per-frame vergelijk) -------- */
/* de app centreert tekst in overlays; het h2h-scherm is links uitgelijnd */
#h2hOverlay .top_overlayed, .h2h_body { text-align:left; }
/* kop: één rij (terug | titel | CHAT), caption + tabs binnen het paars */
#h2hOverlay .top_overlayed__header { height:auto; min-height:0; }
.h2h_kop .chat_thread__kop { flex-wrap:nowrap; align-items:center; }
.h2h_kop__titel
{
	min-width:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	text-align:left;
}
.h2h_kop .chat_thread__kop .btn_action
{
	flex:none;
	height:34px;
	padding:0 16px;
	display:flex;
	align-items:center;
	width:auto;
}
/* flex-kolomkinderen met overflow:hidden krimpen onder hun inhoud
   (min-height:auto-regel) — de glow/shimmer-kaarten werden in de thread
   tot een strookje geknepen */
.h2h_kaart, .h2h_nudge { flex-shrink:0; }
/* kaart: avatars rechtsboven in de kop (design 15c), niet als eigen rij */
.h2h_kaart__kop .h2h_avatarpaar { margin-top:0; margin-left:auto; flex:none; }
.h2h_kaart__kop .h2h_avatarpaar img { width:22px; height:22px; }
.h2h_kaart__next
{
	border-top:1px solid #ffffff14;
	margin-top:9px;
	padding-top:8px;
	display:flex;
	align-items:center;
	gap:8px;
}
.h2h_kaart__next b { font-family:headers; font-size:11px; color:#ffffffb5; flex:none; }
.h2h_kaart__next .h2h_cue__balk { height:6px; }
.h2h_kaart__next small { font-family:p; font-size:9px; color:#ffffff8a; flex:none; }
/* milestone-rijen: uitlegregel + xp-pil rechtsboven (design 15a) */
.h2h_msrij__uitleg { font-family:p; font-size:9.5px; color:#ffffff8a; }
.h2h_msrij__xp
{
	margin-left:auto;
	display:inline-flex;
	align-items:center;
	gap:4px;
	background:#00000059;
	border:1px solid #FFC10759;
	border-radius:8px;
	padding:3px 7px;
	font-family:headers;
	font-size:9px;
	color:#FFC107;
	flex:none;
}
.h2h_msrij__xp img { width:11px; height:11px; }
.h2h_balkrij { display:flex; align-items:center; gap:6px; }
.h2h_balkrij .h2h_avatarpaar img { width:14px; height:14px; border-width:1px; }
.h2h_balkrij small { min-width:44px; text-align:right; flex:none; }
.h2h_balkrij .h2h_klaartekst { min-width:0; }
/* duel-daggroepen (design 8a) */
.h2h_daggroep { font-family:p; font-size:9px; letter-spacing:1.5px; color:#ffffff70; margin-top:4px; }
/* overview: as-labels + delta + marge-gemiddelde (design 7b) */
.h2h_chart_wrap { display:flex; gap:6px; }
.h2h_chart_y
{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	font-family:p;
	font-size:8.5px;
	color:#ffffff5c;
	padding-bottom:14px;
	flex:none;
	width:26px;
	text-align:right;
}
.h2h_chart_kolom { flex:1; min-width:0; }
.h2h_chart_x { display:flex; justify-content:space-around; font-family:p; font-size:8.5px; color:#ffffff5c; margin-top:3px; }
.h2h_kaartvlak__delta { font-family:headers; font-size:12px; color:#7CFC00; margin-left:8px; }
.h2h_kaartvlak__scorerij { display:flex; align-items:baseline; }
.h2h_kaartvlak__scorerij .h2h_legend { margin:0 0 0 auto; }
.h2h_marge__kop { display:flex; align-items:center; justify-content:space-between; }
.h2h_marge__avg { font-family:headers; font-size:11px; color:#7CFC00; }
/* stage-tegels: twee spelersrijen (design 20b) + race-leiderregel (19c) */
.h2h_stagetegel__rij
{
	display:flex;
	align-items:center;
	gap:4px;
	font-family:p;
	font-size:8px;
	color:#ffffff8a;
}
.h2h_stagetegel__rij img { width:12px; height:12px; border-radius:50%; border:1px solid #ffffff40; }
.h2h_seriekaart__note
{
	display:flex;
	align-items:center;
	gap:8px;
	background:#170830;
	border:1px solid #ffffff26;
	border-radius:11px;
	padding:9px 11px;
	font-family:p;
	font-size:10px;
	color:#ffffffa8;
}
.h2h_seriekaart__note img { width:20px; height:20px; border-radius:50%; }
.h2h_seriekaart__note img + img { margin-left:-7px; }
/* de kop-rij-flex is #chatthread-gebonden — het h2h-scherm heeft z'n eigen kopie */
#h2hOverlay .chat_thread__kop
{
	display:flex;
	align-items:center;
	gap:10px;
	padding:0 14px 10px;
}
.h2h_kaart.is-eigen-klaar { border:1px solid #7CFC0080; overflow:hidden; position:relative; }
.h2h_kaart.is-eigen-klaar::after
{
	content:'';
	position:absolute;
	inset:0;
	width:34%;
	background:linear-gradient(105deg, transparent, #ffffff29, transparent);
	animation:clShimmer 2.8s ease-in-out infinite;
	pointer-events:none;
}
.h2h_kaart__miniclaim { height:32px; padding:0 14px; margin-left:auto; flex:none; display:flex; align-items:center; }

/* -- device-pass (feedbackronde): eigen kop, app-tabbalk, grotere types -- */
/* eigen paarse kop (design-tokens) — géén chat_header meer: die draagt
   chat-hoogtes/paddings die de caption en tabs onder het paars uit duwden */
.h2h_paneel { display:flex; flex-direction:column; }
.h2h_kop_blok
{
	background:linear-gradient(1deg, rgba(88,0,147,1) 0%, rgba(154,0,255,1) 100%);
	border-bottom:1px solid #c05fff;
	box-shadow:0 0 0 5px #460274;
	padding:calc(14px + env(safe-area-inset-top)) 14px 14px;
	flex:none;
}
.h2h_kop__rij
{
	display:flex;
	align-items:center;
	gap:10px;
	width:100%;
}
.h2h_kop__rij .h2h_kop__titel { flex:1; }
.h2h_kop__rij .btn_action { flex:none; height:38px; padding:0 18px; font-size:13px; }
.h2h_kop__aantal { font-family:headers; font-size:20px; flex:none; }
.h2h_kop__titel { font-size:21px; }
.h2h_kop__caption { font-size:11.5px; margin-top:6px; }
/* de tabbalk is de app-eigen strip; alleen wat ruimte eromheen */
.h2h_paneel .tabs-wrapper { flex:none; }
.h2h_paneel .h2h_scroll { flex:1; min-height:0; }
/* CHALLENGE-voet: native grote CTA (btn-orange draagt zelf de witte
   glans-strip via ::after); border-box tegen de rechter-overloop */
.h2h_voet .h2h_cta, .h2h_board__voet .btn-orange
{
	box-sizing:border-box;
	width:100%;
	font-size:17px;
	padding:12px 15px 15px;
}
.h2h_board__voet .btn-orange { width:auto; flex:1; font-size:15px; white-space:nowrap; }
/* typografie ruimer: het canvas is 390px-af, de app leest groter */
.h2h_body { padding:14px 14px 22px; gap:10px; }
.h2h_pilknop { font-size:12.5px; padding:8px 15px; border-radius:11px; }
.h2h_lijst_caption { font-size:11px; }
.h2h_lijst_caption h3 { font-size:14px; }
.h2h_sorteerhint { font-size:10.5px; }
.h2h_daggroep { font-size:10.5px; }
.h2h_tierkop b { font-size:10.5px; }
.h2h_tierkop small { font-size:10.5px; }
.h2h_sectielabel { font-size:10.5px; }
.h2h_msrij__naam { font-size:14px; }
.h2h_msrij.is-klaar .h2h_msrij__naam { font-size:14px; }
.h2h_msrij__uitleg { font-size:11.5px; }
.h2h_msrij small { font-size:10.5px; }
.h2h_msrij__xp { font-size:10.5px; padding:4px 8px; }
.h2h_msrij__xp img { width:13px; height:13px; }
.h2h_chip { font-size:10px; padding:3px 7px; }
.h2h_duelrij__mid b { font-size:14px; }
.h2h_duelrij__mid small { font-size:11.5px; }
.h2h_duelrij__tijd { font-size:11px; }
.h2h_record__waarde b { font-size:17px; }
.h2h_record__waarde small { font-size:10.5px; }
.h2h_ledgerrij__label { font-size:12.5px; }
.h2h_ledgerrij__label small { font-size:10.5px; }
.h2h_ledgerrij b { font-size:16px; }
.h2h_kaartvlak__label { font-size:10.5px; }
.h2h_kaartvlak__waarde { font-size:30px; }
.h2h_kaartvlak__delta { font-size:13px; }
.h2h_legend span { font-size:10.5px; }
.h2h_chart_y { font-size:10px; width:32px; }
.h2h_chart_x { font-size:10px; }
.h2h_marge small { font-size:10.5px; }
.h2h_marge__avg { font-size:12.5px; }
.h2h_statrij small { font-size:10px; }
.h2h_statrij b { font-size:17px; }
.h2h_serieblok h3 { font-size:13.5px; }
.h2h_serieblok__voet { font-size:11px; }
.h2h_ms_avatars b { font-size:17px; }
.h2h_ms_avatars small { font-size:10.5px; }
.h2h_ms_avatars__mid { font-size:11px; }
.h2h_showall { height:40px; font-size:12.5px; }
.h2h_modus span { font-size:12px; padding:9px; }
.h2h_ladderstrip small { font-size:9.5px; }
.h2h_ladderstrip b { font-size:12px; }
.h2h_seriekaart__kop b { font-size:14px; }
.h2h_seriekaart__kop small { font-size:10.5px; }
.h2h_seriekaart__tag { font-size:10px; }
.h2h_stagetegel b { font-size:13px; }
.h2h_stagetegel small { font-size:10px; }
.h2h_stagetegel__reward { font-size:10px !important; }
.h2h_seriekaart__note { font-size:11.5px; }
.h2h_ov_summary h3 { font-size:17px; }
.h2h_ov_summary small { font-size:11px; }
.h2h_ov_wl b { font-size:24px; }
.h2h_ov_wl small { font-size:10px; }
.h2h_kop__record { font-size:34px; }
.h2h_kop__avatar { width:52px; height:52px; }
.h2h_dubbelbalk img { width:16px; height:16px; }
.h2h_dubbelbalk small { font-size:10.5px; min-width:50px; }
.h2h_balkrij small { font-size:10.5px; }
/* seriebalk in de chatkop: iets ruimer op device */
.h2h_seriebalk .h2h_serie__avatar { width:24px; height:24px; }
.h2h_serie__w, .h2h_serie__l { font-size:18px; }
.h2h_serie__nb, .h2h_serie__klaar { font-size:12px; }
.h2h_cue__naam { font-size:10.5px; max-width:170px; }
.h2h_cue__claim { font-size:10px; padding:3px 7px; }
.h2h_rivbalk_telling { font-size:10.5px; }
.h2h_lijst_legenda span, .h2h_lijst_legenda b { font-size:10.5px; }
.h2h_nudge__copy { font-size:12px; }
.h2h_nudge__copy b { font-size:11.5px; }
.h2h_kaart__naam { font-size:16px; }
.h2h_kaart__naam.is-gedempt { font-size:13.5px; }
.h2h_kaart__label { font-size:10px; }
.h2h_kaart__sub, .h2h_kaart__voetnoot { font-size:11px; }
.h2h_pil span { font-size:14px; }

/* -- feedback: rails vol breed + shop-ondergrond ----------------------- */
/* CubeRunnerz geeft .tabs-full zelf `calc(100% - 2rem)` + `margin:0 1rem`
   (zelfde valkuil als in de pm-lades): binnen het h2h-paneel is dat een
   inspringing en hangt de rail los van de randen. Vol breed, knoppen in
   vier gelijke segmenten. */
.h2h_paneel .tabs-wrapper { margin:0; width:100%; flex:none; }
.h2h_paneel .tabs-full { width:100%; margin:0; border-radius:0; }
.h2h_paneel .tab-full-btn
{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:11px 4px 12px;
	font-size:12.5px;
	letter-spacing:.5px;
}
/* Dezelfde ondergrond als de shop (cubelegend-shop.css §0a): cbg0 onder een
   #0b0318-gradient met de paarse gloed bovenin — de generieke cbg2-foto met
   zwarte laag is te bont en vlekte dwars door de kaarten en balken heen. */
#h2hOverlay .top_overlayed:after, #h2hTier .top_overlayed:after
{
	background:
		radial-gradient(ellipse at 50% 8%, #9a00ff55, transparent 62%),
		linear-gradient(#0b0318cc, #0b0318f2),
		url(/public/img/cubelegend/cbg0.jpeg) center/cover no-repeat,
		#0b0318;
}
#h2hOverlay .top_overlayed:before, #h2hTier .top_overlayed:before { background:none; }
/* -- feedback: nóg een maat groter (types + stippen bij de grotere tegels) */
.h2h_msrij__naam, .h2h_msrij.is-klaar .h2h_msrij__naam { font-size:16px; }
.h2h_msrij__uitleg { font-size:13px; }
.h2h_msrij small { font-size:12px; }
.h2h_msrij__xp { font-size:12px; padding:5px 9px; }
.h2h_msrij__xp img { width:15px; height:15px; }
.h2h_chip { font-size:11px; }
.h2h_dots i { width:6px; height:6px; }
.h2h_duelrij__mid b { font-size:15.5px; }
.h2h_duelrij__mid small { font-size:13px; }
.h2h_duelrij__tijd { font-size:12px; }
.h2h_record__waarde b { font-size:19px; }
.h2h_record__waarde small { font-size:12px; }
.h2h_ledgerrij__label { font-size:14px; }
.h2h_ledgerrij__label small { font-size:12px; }
.h2h_ledgerrij b { font-size:18px; }
.h2h_sectielabel, .h2h_daggroep, .h2h_tierkop b, .h2h_tierkop small { font-size:12px; }
.h2h_lijst_caption { font-size:12px; }
.h2h_lijst_caption h3 { font-size:15.5px; }
.h2h_sorteerhint { font-size:11.5px; }
.h2h_pilknop { font-size:14px; padding:9px 17px; }
.h2h_modus span { font-size:13.5px; }
.h2h_showall { height:44px; font-size:14px; }
.h2h_kaartvlak__label { font-size:12px; }
.h2h_kaartvlak__waarde { font-size:32px; }
.h2h_kaartvlak__delta { font-size:14px; }
.h2h_legend span { font-size:11.5px; }
.h2h_chart_y, .h2h_chart_x { font-size:11px; }
.h2h_marge small { font-size:11.5px; }
.h2h_marge__avg { font-size:13.5px; }
.h2h_statrij small { font-size:11px; }
.h2h_statrij b { font-size:19px; }
.h2h_serieblok h3 { font-size:15px; }
.h2h_serieblok__voet { font-size:12.5px; }
.h2h_ov_summary h3 { font-size:19px; }
.h2h_ov_summary small { font-size:12.5px; }
.h2h_ov_wl b { font-size:26px; }
.h2h_ms_avatars b { font-size:19px; }
.h2h_ms_avatars small, .h2h_ms_avatars__mid { font-size:12px; }
.h2h_seriekaart__kop b { font-size:16px; }
.h2h_seriekaart__kop small { font-size:12px; }
.h2h_seriekaart__tag { font-size:11px; }
.h2h_stagetegel b { font-size:15px; }
.h2h_stagetegel small { font-size:11.5px; }
.h2h_stagetegel__reward { font-size:11px !important; }
.h2h_stagetegel__rij { font-size:10px; }
.h2h_stagetegel__rij img { width:15px; height:15px; }
.h2h_seriekaart__note { font-size:13px; }
.h2h_ladderstrip small { font-size:10.5px; }
.h2h_ladderstrip b { font-size:13.5px; }
.h2h_dubbelbalk img { width:18px; height:18px; }
.h2h_dubbelbalk small, .h2h_balkrij small { font-size:12px; min-width:56px; }
.h2h_balkrij .h2h_avatarpaar img { width:17px; height:17px; }
/* chat-kant: kaarten en balken lezen mee omhoog */
.h2h_kaart__naam { font-size:18px; }
.h2h_kaart__naam.is-gedempt { font-size:15px; }
.h2h_kaart__label { font-size:11px; }
.h2h_kaart__sub, .h2h_kaart__voetnoot { font-size:12.5px; }
.h2h_kaart__next b { font-size:12.5px; }
.h2h_kaart__next small { font-size:11px; }
.h2h_nudge__copy { font-size:13.5px; }
.h2h_nudge__copy b { font-size:12.5px; }
.h2h_serie__nb, .h2h_serie__klaar { font-size:13.5px; }
.h2h_cue__naam { font-size:12px; max-width:190px; }
.h2h_cue__claim { font-size:11px; }
.h2h_rivbalk_telling { font-size:12px; }
.h2h_pil span { font-size:15px; }
/* de grotere types passen niet altijd meer op één regel: naam blijft heel,
   de beloningspil mag naar een eigen regel zakken i.p.v. uit de kaart lopen */
.h2h_msrij__mid > .flex-row { flex-wrap:wrap; row-gap:4px; }
.h2h_msrij__naam { white-space:nowrap; }
.h2h_msrij__xp { max-width:100%; }

/* -- feedback: profiel-social-subtabs voor de secundaire wissels + ruimte,
   milestone-titel links en de tegel bovenaan uitgelijnd ------------------ */
.h2h_subtabs { margin:2px 0; }
.h2h_subtabs .tab-btn { font-size:12.5px; padding:9px 2px; }
.h2h_msrij { align-items:flex-start; }
.h2h_msrij .h2h_tegel_wrap, .h2h_msrij > .h2h_tegel { margin-top:2px; }
.h2h_msrij__mid > .flex-row { justify-content:flex-start; text-align:left; }
.h2h_msrij__mid { text-align:left; }
.h2h_msrij__claim { align-self:center; }
/* -- feedback: de primaire rail EXACT als op het social-zijpaneel --------
   Zelfde recept als #social (§21/§23): wrapper = eigen donkere strip met
   9/12/11-padding en ondergrensje; de rail zelf houdt zijn CubeRunnerz-
   basismaat (calc(100% - 2rem) + 1rem marge, radius 5) met het 13px-font.
   Mijn eerdere edge-to-edge-override maakte de strip padding-loos. */
.h2h_paneel .tabs-wrapper
{
	background:#12042a;
	border-bottom:2px solid #00000080;
	padding:9px 12px 11px;
	margin:0;
	width:100%;
}
.h2h_paneel .tabs-full
{
	width:calc(100% - 2rem);
	margin:0 1rem;
	border-radius:5px;
	font-size:13px;
	letter-spacing:.5px;
}
.h2h_paneel .tab-full-btn
{
	padding:8px 2px;
	font-size:inherit;
	font-family:'headers';
	min-width:0;
	overflow:visible;
	white-space:nowrap;
}

/* -- feedbackronde 3 ----------------------------------------------------- */
/* 1. de rail hing scheef (rechts geen marge): margin:0 auto centreert hem
   onafhankelijk van parent-eigenaardigheden; labels iets kleiner zodat
   vier stuks passen zonder rechts uit te steken */
.h2h_paneel .tabs-full { width:calc(100% - 24px); margin:0 auto; }
.h2h_paneel .tab-full-btn { flex:1 1 0; font-size:12px; letter-spacing:.3px; }
/* 2. de W-L-D-cijfers: de universele font3-regel (element > overerving)
   vergiftigde de binnenste spans met het blok-cijferfont — expliciet het
   titelfont + dezelfde omlijnings-schaduw als de koppen */
.h2h_kop__record span, .h2h_kop__record i
{
	font-family:'headers';
	text-shadow:0 2px black, 0 -1px #0000007a, 1px 0 #0000007a, -1px 0 #0000007a;
}
/* 4. naam + prijs op één hoogte; de tag wikkelt eronder */
.h2h_msrij__koprij
{
	display:flex;
	align-items:center;
	gap:8px;
	width:100%;
}
.h2h_msrij__koprij .h2h_msrij__naam { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.h2h_msrij__koprij .h2h_msrij__xp { margin-left:auto; flex:none; }
/* 5. gespiegeld avatarblok: rechts naam→teller→avatar */
.h2h_ms_avatars span { display:flex; align-items:center; gap:6px; }
/* -- feedbackronde 4 ----------------------------------------------------- */
/* De app kent GEEN universele border-box: width:100% + padding 12px maakte
   de wrapper 24px breder dan het paneel — de rail liep daardoor rechts uit
   beeld en oogde links te ruim ingesprongen. */
.h2h_paneel .tabs-wrapper { box-sizing:border-box; }
/* Paneeltitel links: de globale kopregel zet h2 op flex + gecentreerd —
   als blok met eigen uitlijning wint de titel het weer. */
.h2h_kop__titel { display:block; text-align:left; justify-content:flex-start; }
/* de naam mag over twee regels lopen (geen "HALF …"): de prijs blijft
   rechtsboven op de eerste titelregel hangen */
.h2h_msrij__koprij { align-items:flex-start; }
.h2h_msrij__koprij .h2h_msrij__naam { white-space:normal; overflow:visible; text-overflow:clip; }
/* -- feedbackronde 5: rails exact zo breed als de inhoud eronder ---------
   De body loopt op 14px zijruimte; de rail zat op 12px wrapper-padding +
   12px automarge = 24px. Wrapper op 14px zijpadding en de rail vult hem
   volledig — linker- en rechterrand vallen nu samen met de inhoud. */
.h2h_paneel .tabs-wrapper { padding:9px 14px 11px; }
.h2h_paneel .tabs-full { width:100%; margin:0 auto; }

/* -- feedbackronde 6 ----------------------------------------------------- */
/* 1. de seriebalk sluit de chatkop AF (design 15c): de 12px onderpadding
   van de header liet er een paarse strook onder staan */
#chatthread .h2h_seriebalk { margin:12px -14px -12px; }
/* 2. primaire .btn_action-knoppen (DUEL, REMATCH, CLAIM REWARD…) dragen
   dezelfde witte glans-strip als alle andere primaire knoppen — exact het
   .btn-orange::after-recept uit CubeRunnerz */
.btn_action { position:relative; z-index:0; }
.btn_action:not(.is-secondary):not(.is-pending):not(.is-done)::after
{
	/* LET OP: niet het zachte 20%-gradient-basisrecept — CubeRunnerz
	   overschrijft dat verderop (14108) voor .btn-orange met het blok dat
	   je op PLAY/CHALLENGE écht ziet: massief wit, 45% hoog, opacity .45 */
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:calc(100% - 10px);
	height:45%;
	margin:5px;
	border-radius:5px;
	background:#fff;
	opacity:.45;
	pointer-events:none;
	/* onder de tekst: de knop vormt een stacking context (z-index:0) en de
	   band duikt op -1 — dan schildert hij ná de gele achtergrond maar vóór
	   niets anders, dus het label blijft er leesbaar bovenop */
	z-index:-1;
}
/* avatar/naam tikbaar naar het profiel */
.h2h_profiel_tap { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.h2h_ms_avatars .h2h_profiel_tap { gap:6px; }

/* -- claimstrip in de chatkop + READY-sectie op de milestones-tab -------- */
.h2h_claimstrip
{
	margin:0 -14px -12px;
	background:#12042a;
	border-top:1px solid #ffffff1f;
	padding:8px 14px 10px;
	display:flex;
	flex-direction:column;
	gap:7px;
}
/* de claimstrip neemt de kop-afsluiting over van de seriebalk */
#chatthread .h2h_seriebalk_slot:has(.h2h_claimstrip) .h2h_seriebalk { margin-bottom:0; }
.h2h_claimstrip__rij
{
	display:flex;
	align-items:center;
	gap:9px;
	background:#170830;
	border:1px solid #FFC107;
	border-radius:12px;
	padding:7px 9px;
	animation:clGlow 2.6s ease-in-out infinite;
}
.h2h_claimstrip__mid { flex:1; min-width:0; }
.h2h_claimstrip__mid b
{
	font-family:headers;
	font-size:13.5px;
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.h2h_claimstrip__mid small { font-family:p; font-size:11px; }
.h2h_claimstrip__mid small img { width:12px; height:12px; vertical-align:-2px; }
.h2h_claimstrip__knop { height:32px; padding:0 14px; flex:none; font-size:12px; }
.h2h_claimstrip__meer
{
	align-self:center;
	font-family:headers;
	font-size:11px;
	color:#FFC107;
	display:flex;
	align-items:center;
	gap:2px;
	cursor:pointer;
}

/* milestone-/invitekaarten in de chat: de disciplinetegel linksboven mag
   NOOIT meekrimpen met lange teksten — vaste maat, zodat hij afsteekt tegen
   de recap- en invite-kaarten (device-feedbackronde) */
.h2h_kaart__kop > .h2h_tegel,
.h2h_kaart__kop > .h2h_tegel_wrap,
.chat_card__invitekop > .h2h_tegel { flex:none; }

/* prijzen overal in het koplettertype + wat lucht tussen de chips en de
   prijs-pil op de thread-kaarten (device-feedbackronde) */
.h2h_pil span,
.h2h_msrij__xp { font-family:'headers', sans-serif; }
.h2h_kaart .h2h_msrij__koprij { margin-top:7px; }
/* balken op volle kaartbreedte, criteria eronder */
.h2h_kaart > .h2h_dubbelbalk { margin-top:10px; }
.h2h_kaart > .h2h_kaart__sub { display:block; margin-top:7px; }

/* ── device-ronde chat-milestonekaarten ─────────────────────────────────────
   1. #chatthread .chat_card span/small dwong 'p' af (1,1,1) en versloeg de
      pil-regels — de prijzen dragen nu ook ín de thread het koplettertype.
   2. NEXT STEP als kolom: tegel vóór de titel, balk op volle breedte, de
      haal-instructie eronder.
   3. Prijs-pil rechtsboven op de voortgangs-/voorbij-kaarten; de kop-tekst
      krijgt rechts lucht zodat er niets onder de pil doorschuift. */
#chatthread .chat_card .h2h_pil span,
#chatthread .chat_card .h2h_msrij__xp,
#chatthread .chat_card .h2h_kaart__next b { font-family:'headers', sans-serif; }
.h2h_kaart__next { flex-direction:column; align-items:stretch; gap:7px; }
.h2h_kaart__next_kop { display:flex; align-items:center; gap:8px; }
/* flex:1 uit de basisregel = basis 0, en in een KOLOM stuurt de basis de
   hoogte — de balk viel daardoor plat naar 0px */
.h2h_kaart__next .h2h_cue__balk { flex:none; width:100%; height:6px; box-sizing:border-box; }
.h2h_kaart.is-voortgang, .h2h_kaart.is-voorbij { position:relative; }
.h2h_kaart.is-voortgang .h2h_msrij__xp, .h2h_kaart.is-voorbij .h2h_msrij__xp
{
	position:absolute;
	top:12px;
	right:12px;
	margin-left:0;
}
.h2h_kaart.is-voortgang .h2h_kaart__kop > div,
.h2h_kaart.is-voorbij .h2h_kaart__kop > div { padding-right:104px; box-sizing:border-box; }
/* de balken lopen tot de rand: het spoor flext, de teller blijft compact */
#chatthread .h2h_kaart .h2h_dubbelbalk > div { width:100%; }
#chatthread .h2h_kaart .h2h_dubbelbalk .h2h_cue__balk { flex:1; }

/* chatthread: dezelfde ondergrond als de shop en de milestone-panelen
   (cbg0 onder de #0b0318-gradient met paarse gloed — zie #h2hOverlay) */
#chatthread .top_overlayed:after
{
	background:
		radial-gradient(ellipse at 50% 8%, #9a00ff55, transparent 62%),
		linear-gradient(#0b0318cc, #0b0318f2),
		url(/public/img/cubelegend/cbg0.jpeg) center/cover no-repeat,
		#0b0318;
}
#chatthread .top_overlayed:before { background:none; }

/* verticale lucht in de thread-kaarten (device-feedback: "everything is
   compacted down and sticks to each other") + ruimte tussen de chips */
.h2h_kaart__label { display:inline-block; margin-bottom:6px; }
.h2h_kaart .h2h_chip { margin:0 5px 0 0; }
.h2h_kaart__kop .h2h_kaart__naam { margin-top:6px; }
.h2h_kaart > .h2h_dubbelbalk { margin-top:12px; }
.h2h_kaart .h2h_dubbelbalk { gap:6px; }
.h2h_kaart > .h2h_kaart__sub { margin-top:9px; }
.h2h_kaart__next { margin-top:12px; padding-top:12px; }

/* ── Factory v2: eiland in een lane (bouwt / gebouwd) op de profielstrip ──── */
#gamerprofile .profiel_eiland.is-bouw { border-color:#35c7ff80; }
#gamerprofile .profiel_eiland.is-bouw img { opacity:.55; filter:saturate(.7); }
#gamerprofile .profiel_eiland.is-bouw .profiel_eiland__naam i { color:#7fdcff; font-style:normal; }
#gamerprofile .profiel_eiland.is-bouw .profiel_eiland__balk span { background:linear-gradient(90deg, #9ae9ff, #1591e0); }
#gamerprofile .profiel_eiland.is-gebouwd { border-color:#7CFC0080; box-shadow:0 0 14px #7CFC001f; }
#gamerprofile .profiel_eiland.is-gebouwd .profiel_eiland__balk span { background:linear-gradient(90deg, #b8ff7a, #7CFC00); }
#gamerprofile .profiel_eiland__sub
{
	display:block;
	margin-top:4px;
	font-family:'p';
	font-size:9px;
	color:#7fdcff;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-variant-numeric:tabular-nums;
}
#gamerprofile .profiel_eiland__sub.is-klaar { color:#7CFC00; }