/* ══════════════════════════════════════════════════════════════════════════
   CubeLegend — Ranked PvP rebuild
   Laadt NA CubeRunnerz.css (bevat overrides).

   Conventies volgen de bestaande sheet: geen CSS-variabelen, hex met alpha-
   suffix, 'headers' voor cijfers/labels, 'p' voor lopende tekst. Klassen die
   al in CubeRunnerz.css bestaan zijn gemarkeerd met "OVERRIDE".

   LET OP: nooit een geneste commentaar-opening in dit blok zetten — de
   oorspronkelijke header bevatte letterlijk "slash-ster OVERRIDE ster-slash",
   waardoor de commentaar daar al sloot en de parser de EERSTE regel van het
   bestand (.pvp_div_blokken) opslokte: de divisieblokken stapelden als
   volle-breedte-balken in de duel-picker.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1 · Division blocks ──────────────────────────────────────────────────
   4 blocks fill one division. Replaces the 3-pip .pvp_rank_pips row.       */

.pvp_div_blokken
{
	display:flex;
	gap:8px;
	width:min(340px, 84vw);
}
.pvp_div_blok
{
	flex:1;
	height:24px;
	border:1px solid #c19eff88;
	border-radius:7px;
	background:#0b0318b8;
	overflow:hidden;
	position:relative;
	box-sizing:border-box;
}
.pvp_div_blok .vulling
{
	display:block;
	height:100%;
	width:0%;
	background:linear-gradient(90deg, #6ee87c, #4CAF50);
	box-shadow:0 0 12px #4caf5088;
	transition:width 1.2s ease;
}
.pvp_div_blok.vol .vulling { width:100%; }
.pvp_div_blok.rood .vulling { background:linear-gradient(90deg, #ff7a6e, #f34336); box-shadow:0 0 12px #f3433688; }
.pvp_div_blok.knipper .vulling { animation:pvpBlokKnipper .5s ease-in-out 5; }
.pvp_div_blok.leegloop .vulling { width:0%; }
/* sterrenvulling zoals het experience-pad */
.pvp_div_blok.sterren::after
{
	content:'\2726 \2726 \2726';
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-size:11px;
	text-shadow:0 0 8px #fff;
	animation:pvpSterren 1.4s ease-out forwards;
	pointer-events:none;
}
/* compacte variant onder een divisienaam (duel-keuze, screen 01) */
.pvp_div_blokken.klein { gap:3px; width:98px; }
.pvp_div_blokken.klein .pvp_div_blok { height:8px; border-radius:2px; border-color:#ffffff66; }

/* sub-niveau binnen de tier: het cijfer NA de divisienaam (gold "1") */
.pvp_sub_pips { display:flex; gap:7px; }
.pvp_sub_pips i
{
	width:11px;
	height:11px;
	transform:rotate(45deg);
	display:block;
	border:1px solid #ffffff44;
	box-sizing:border-box;
}
.pvp_sub_pips i.vol { border:0; }


/* ── 2 · Season bank ──────────────────────────────────────────────────────
   Kluis-chip (top right van elk resultaatscherm) + het bank-paneel.        */

.pvp_bank_chip
{
	margin-left:auto;
	display:inline-flex;
	align-items:center;
	gap:5px;
	background:#00000059;
	border:1px solid #ffc46b55;
	border-radius:12px;
	padding:3px 9px 3px 6px;
	cursor:pointer;
}
.pvp_bank_chip svg { width:15px; height:15px; flex:0 0 auto; }
.pvp_bank_chip b { font-family:'headers'; font-size:13px; color:#FFC46B; }
.pvp_bank_chip small
{
	font-family:p;
	font-size:8px;
	color:#ffffff8a;
	text-transform:uppercase;
	letter-spacing:1px;
}
.pvp_bank_chip .delta_op   { font-family:'headers'; font-size:13px; color:#7CFC00; }
.pvp_bank_chip .delta_af   { font-family:'headers'; font-size:13px; color:#ff5a5a; }
/* disciplinekleuren (disciplines.js): focus groen, speed rood, awareness blauw */
.pvp_bank_chip.focus       { border-color:#f5c54255; }
.pvp_bank_chip.focus b     { color:#f5c542; }
.pvp_bank_chip.speed       { border-color:#4bb4ff55; }
.pvp_bank_chip.speed b     { color:#4bb4ff; }
.pvp_bank_chip.awareness   { border-color:#c56cff55; }
.pvp_bank_chip.awareness b { color:#c56cff; }

/* widget-variant in de championship-view */
.pvp_bank_widget
{
	margin:0 14px 8px;
	display:flex;
	align-items:center;
	gap:10px;
	background:#00000042;
	border:1px solid #6631c3;
	border-radius:8px;
	padding:7px 10px;
	cursor:pointer;
}
.pvp_bank_widget .kluis
{
	width:26px;
	height:26px;
	border-radius:6px;
	background:#00000059;
	border:1px solid #ffc46b55;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
}
.pvp_bank_widget b { font-family:'headers'; font-size:15px; line-height:1.1; color:#FFC46B; }

.pvp_bank_kaart_rij
{
	display:flex;
	align-items:center;
	gap:9px;
	padding:7px 10px;
	border-radius:8px;
	background:#00000042;
	border:1px solid #6631c3;
	flex:0 0 auto;
}
.pvp_bank_kaart_rij img { width:22px; flex:0 0 auto; }
/* volledige reset: CubeRunnerz.css kent een legacy globale .label-chip
   (position:absolute, 40px breed, donkere gradient) die de rijlabels anders
   uit de rij trekt naar linksboven */
.pvp_bank_kaart_rij span.label
{
	font-family:p;
	font-size:12px;
	flex:1;
	text-align:left;
	opacity:.7;
	position:static;
	width:auto;
	height:auto;
	line-height:normal;
	background:none;
	border:none;
	box-shadow:none;
	text-shadow:none;
	font-weight:normal;
	color:#fff;
	border-radius:0;
}
.pvp_bank_kaart_rij .doorgestreept { font-family:'headers'; font-size:13px; color:#ffffff8a; text-decoration:line-through; }
.pvp_bank_kaart_rij .factor { font-family:p; font-size:11px; color:#FFC46B; }
.pvp_bank_kaart_rij b { font-family:'headers'; font-size:16px; width:64px; text-align:right; }
.pvp_bank_kaart_rij b.op { color:#7CFC00; }
.pvp_bank_kaart_rij b.af { color:#ff5a5a; }
.pvp_bank_kaart_rij b.xp { color:#9f61ec; }


/* ── 3 · Beloningen / verliezen op het eindscherm ─────────────────────────
   Scrollbare lijst, knop blijft ALTIJD zichtbaar.                          */

.pvp_uitslag_blok
{
	width:100%;
	margin-top:14px;
	display:flex;
	flex-direction:column;
	gap:5px;
	min-height:0;
	flex:1;
}
.pvp_uitslag_blok h3
{
	margin:0;
	font-family:'headers';
	font-size:17px;
	letter-spacing:1px;
	text-shadow:0 2px black, 0 -2px black, 2px 0px black, -2px 0 black;
}
.pvp_uitslag_blok h3.verlies { color:#ff9d95; }
.pvp_uitslag_lijst
{
	flex:1;
	min-height:0;
	overflow-y:auto;
	scrollbar-width:none;              /* geen grijze systeem-scrollbar */
	display:flex;
	flex-direction:column;
	gap:5px;
	padding-right:2px;
}
.pvp_uitslag_lijst::-webkit-scrollbar { width:0; height:0; }
.pvp_uitslag_voet
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	width:100%;
	padding-top:10px;
	flex:0 0 auto;                     /* knop krimpt nooit weg */
}


/* ── 4 · Duel-keuze (screen 01) ───────────────────────────────────────────
   Missie-kaart-idioom: 5px zwarte buitenrand, gekleurde binnenrand,
   radial gradient, zwarte onderbalk.                                       */

.pvp_keuze_kaart_outer { border:5px solid #000; border-radius:15px; }
.pvp_keuze_kaart
{
	border:4px solid #FFC107;
	border-radius:10px;
	background:radial-gradient(ellipse at center right, rgba(254,222,0,1) 0%, rgb(222 120 0) 100%);
	position:relative;
	overflow:hidden;
	box-shadow:inset 0 0 20px #00000055;
}
/* disciplinekleuren (Disciplines - harde regels §2): focus groen, speed rood, awareness blauw */
.pvp_keuze_kaart.focus, .pvp_keuze_kaart.score
{
	border-color:#f5c542;
	background:radial-gradient(ellipse at center right, #f5c542 0%, #a35f00 100%);
}
.pvp_keuze_kaart.speed
{
	border-color:#4bb4ff;
	background:radial-gradient(ellipse at center right, #4bb4ff 0%, #0b3f80 100%);
}
.pvp_keuze_kaart.awareness
{
	border-color:#c56cff;
	background:radial-gradient(ellipse at center right, #c56cff 0%, #4a0f8f 100%);
}
.pvp_keuze_top
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:8px;
	gap:8px;
	position:relative;
	z-index:3;
}
.pvp_keuze_divisie
{
	background:#00000091;
	padding:4px 10px 4px 4px;
	display:flex;
	align-items:center;
	gap:8px;
	border-radius:5px;
}
.pvp_keuze_divisie img { width:32px; height:32px; object-fit:contain; }
.pvp_keuze_divisie b { font-family:'headers'; font-size:16px; line-height:1; }
.pvp_keuze_mid { margin:2px 10px 10px; text-align:left; position:relative; z-index:3; }
.pvp_keuze_mid h2
{
	margin:0;
	font-family:'headers';
	font-size:20px;
	line-height:22px;
	text-shadow:0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
/* CubeRunnerz.css draagt `*:not(input){font-family:font3}` — die regel raakt
   deze span RECHTSTREEKS en wint dus van wat hij van zijn h2 zou erven. Vandaar
   het lettertype hier expliciet: "FOCUS" en "highest score wins" horen
   hetzelfde te lezen. Alleen de kleur verschilt. */
/* 13px en niet 16: in het koplettertype is "HIGHEST ACCURACY WINS" breder dan
   in font3 en brak de regel in tweeen naast "AWARENESS". */
.pvp_keuze_mid h2 span { color:#FFC107; font-size:13px; font-family:'headers'; }
.pvp_keuze_onder
{
	background:#000;
	border-top:#FFC107 2px solid;
	border-radius:0 0 7px 7px;
	padding:8px 10px;
	display:flex;
	align-items:center;
	gap:10px;
	position:relative;
	z-index:4;
}
/* de LOSS PREVENTION-kaart (renderKaartBlok): het oude blauw, géén discipline */
.pvp_keuze_kaart.is-kaart-blauw { border-color:#4bb4ff; background:radial-gradient(ellipse at center right, #4bb4ff 0%, rgb(0 77 138) 100%); }
.pvp_keuze_kaart.is-kaart-blauw .pvp_keuze_onder { border-top-color:#4bb4ff; }
.pvp_keuze_kaart.focus     .pvp_keuze_onder, .pvp_keuze_kaart.score .pvp_keuze_onder { border-top-color:#f5c542; }
.pvp_keuze_kaart.speed     .pvp_keuze_onder { border-top-color:#4bb4ff; }
.pvp_keuze_kaart.awareness .pvp_keuze_onder { border-top-color:#c56cff; }
.pvp_keuze_kaart.focus .pvp_keuze_mid h2 span, .pvp_keuze_kaart.score .pvp_keuze_mid h2 span { color:#f5c542; }
.pvp_keuze_kaart.speed .pvp_keuze_mid h2 span { color:#4bb4ff; }
.pvp_keuze_kaart.awareness .pvp_keuze_mid h2 span { color:#c56cff; }
.pvp_keuze_inzet { display:flex; align-items:center; gap:8px; font-family:'headers'; font-size:14px; color:#FFC46B; }
/* zelfde valkuil: de bedragen staan in eigen spans en pakken font3 op */
.pvp_keuze_inzet span { display:inline-flex; align-items:center; gap:3px; font-family:'headers'; }
.pvp_keuze_inzet img { width:15px; }
.pvp_keuze_factor { margin-left:auto; display:flex; flex-direction:column; align-items:center; gap:1px; }
.pvp_keuze_factor b { font-family:'headers'; font-size:18px; color:#7CFC00; text-shadow:0 0 12px #7cfc0066; }

/* info-badge naast "win pays" */
.pvp_info_badge
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:15px;
	height:15px;
	border-radius:50%;
	background:#00000091;
	border:1px solid #7fd3ff88;
	box-shadow:0 0 6px #7fd3ff44;
}

/* sparticles-achtige achtergronddrift (adventure-modus gevoel) */
.pvp_spark
{
	position:absolute;
	border-radius:50%;
	background:#fff;
	pointer-events:none;
	animation:pvpSparkDrift 8s linear infinite;
}
@keyframes pvpSparkDrift
{
	0%   { transform:translate(0,0) scale(.6); opacity:0; }
	15%  { opacity:.85; }
	60%  { opacity:.5; }
	100% { transform:translate(70px,-100px) scale(1.25); opacity:0; }
}


/* ── 5 · Winstreak-vlam ───────────────────────────────────────────────────
   Gebruikt het ECHTE vlam-asset streaks_streak.png (niet extra_streak.png,
   dat is een booster-flesje).                                              */

.pvp_streak_blok_outer { border:4px solid #000; border-radius:16px; margin-top:12px; }
.pvp_streak_blok
{
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px 16px 10px 10px;
	border:3px solid #ff1100;
	border-radius:12px;
	background:radial-gradient(ellipse at center right, #ff0000 0%, #910000 100%);
	box-shadow:inset 0 0 20px #00000075, 0 0 26px #ff2d0055;
	position:relative;
	overflow:hidden;
}
.pvp_streak_blok.verloren
{
	border-color:#55575e;
	background:linear-gradient(180deg, #2a2c33 0%, #16171c 100%);
	box-shadow:inset 0 0 20px #00000075;
}
.pvp_streak_vlam { position:relative; display:flex; align-items:center; justify-content:center; width:58px; height:58px; flex:0 0 auto; }
.pvp_streak_vlam img { width:58px; position:relative; z-index:1; animation:pvpFlameFlicker 1.15s ease-in-out infinite; }
.pvp_streak_blok.verloren .pvp_streak_vlam img { animation:none; filter:grayscale(1) brightness(.7); }
.pvp_streak_blok > b { font-family:'headers'; font-size:44px; line-height:1; color:#fff; text-shadow:0 0 22px #ffb300, 0 3px 0 #000; }
.pvp_streak_blok.verloren > b { color:#8b8d95; text-shadow:0 3px 0 #000; text-decoration:line-through; text-decoration-color:#f34336; }
.pvp_streak_hitte
{
	position:absolute;
	width:120px;
	height:120px;
	border-radius:50%;
	background:radial-gradient(circle, #ffb30066 0%, transparent 68%);
	animation:pvpHeatGlow 2.2s ease-in-out infinite;
	pointer-events:none;
}
.pvp_streak_ember
{
	position:absolute;
	width:4px;
	height:4px;
	border-radius:50%;
	background:#ffd000;
	box-shadow:0 0 8px #ffb300;
	animation:pvpEmberRise 1.8s ease-out infinite;
}
@keyframes pvpFlameFlicker
{
	0%,100% { transform:scale(1) translateY(0);      filter:drop-shadow(0 0 12px #ff6a00) drop-shadow(0 0 26px #ff2d00aa); }
	25%     { transform:scale(1.07) translateY(-3px); filter:drop-shadow(0 0 18px #ffb300) drop-shadow(0 0 34px #ff2d00cc); }
	55%     { transform:scale(.96) translateY(1px);   filter:drop-shadow(0 0 10px #ff6a00) drop-shadow(0 0 22px #ff2d0099); }
	78%     { transform:scale(1.04) translateY(-2px); filter:drop-shadow(0 0 16px #ffd000) drop-shadow(0 0 30px #ff4d00bb); }
}
@keyframes pvpEmberRise
{
	0%   { transform:translateY(6px) scale(.5); opacity:0; }
	25%  { opacity:1; }
	100% { transform:translateY(-46px) scale(1.1); opacity:0; }
}
@keyframes pvpHeatGlow
{
	0%,100% { opacity:.45; transform:scale(1); }
	50%     { opacity:.85; transform:scale(1.12); }
}

/* mini-vlam op het VS-scherm — bestaande .pvp_vlam blijft ongewijzigd,
   alleen de bron wisselt naar streaks_streak.png */


/* ── 6 · VS-scherm: ready-state en scrollbare cube-rij ────────────────────*/

.pvp_ready_rij
{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:14px;
	width:calc(100% - 40px);
	background:#00000042;
	border:1px solid #6631c3;
	border-radius:8px;
	padding:7px 12px;
	box-sizing:border-box;
}
.pvp_ready_rij.beide
{
	background:#4caf501f;
	border-color:#4CAF50;
	animation:pvpReadyPulse 1.8s ease-in-out infinite;
}
.pvp_ready_rij span.kant
{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-family:p;
	font-size:11px;
	color:#ffffff8a;
	text-transform:uppercase;
	letter-spacing:1px;
}
.pvp_ready_rij span.kant.klaar { color:#4CAF50; }
.pvp_ready_rij i.stip
{
	width:9px;
	height:9px;
	border-radius:50%;
	background:#ffffff33;
	border:1px solid #ffffff66;
	display:block;
}
.pvp_ready_rij span.kant.klaar i.stip
{
	background:#4CAF50;
	border:0;
	box-shadow:0 0 8px #4CAF50;
	animation:pvpLivePulse 1.6s ease-in-out infinite;
}
@keyframes pvpReadyPulse { 0%,100%{ box-shadow:0 0 0 #4caf5000; } 50%{ box-shadow:0 0 16px #4caf5088; } }
@keyframes pvpLivePulse  { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }

/* OVERRIDE — .pvp_cube_rij mag horizontaal scrollen zonder scrollbar.
   min-width:0 op de flex-keten: zonder dat krimpt een flex-item nooit onder
   zijn contentbreedte en liep de cube-rij dwars over beide spelerkaarten. */
.pvp_player { min-width:0; }
.pvp_player .pvp_cubes { width:100%; min-width:0; }
.pvp_cube_wrap { position:relative; display:block; width:100%; min-width:0; }
.pvp_cube_rij
{
	display:flex;
	gap:5px;
	overflow-x:auto;
	scrollbar-width:none;
	padding:0 12px 0 2px;
	box-sizing:border-box;
	justify-content:flex-start;
}
.pvp_cube_rij::-webkit-scrollbar { width:0; height:0; }
.pvp_cube_rij .pvp_cube { flex:0 0 auto; }
.pvp_scroll_pijl
{
	position:absolute;
	top:50%;
	margin-top:-7px;
	width:14px;
	height:14px;
	filter:drop-shadow(0 0 3px #000);
	pointer-events:none;
}
.pvp_scroll_pijl.rechts { right:-2px; animation:pvpPijlRechts 1.2s ease-in-out infinite; }
.pvp_scroll_pijl.links  { left:-2px;  animation:pvpPijlLinks  1.2s ease-in-out infinite; }
.pvp_scroll_pijl.verborgen { display:none; }   /* JS zet dit op scrollLeft === 0 */
@keyframes pvpPijlRechts { 0%,100%{ opacity:.2; transform:translateX(0); } 50%{ opacity:1; transform:translateX(3px); } }
@keyframes pvpPijlLinks  { 0%,100%{ opacity:.2; transform:translateX(0); } 50%{ opacity:1; transform:translateX(-3px); } }

/* de vroegere .pvp_tunnel-stralen zijn verwijderd (feedback aug 2026): de
   hyperspace-canvas-achtergrond van het zoekscherm loopt door en volstaat.
   countdown-cijfer + balk in .pvp_vs blijven verborgen tot de countdown loopt */
.pvp_vs #pvpCountdownNr.verborgen,
.pvp_vs .pvp_cd_bar.verborgen { display:none !important; }


/* ── 7 · In-game running score ─────────────────────────────────────────────
   De tug-of-war-balk (#pvpTugBar / .ptb_*) is vervangen door het podium uit
   design/PvP Enhanced Player Progress. De stijlen daarvan staan in een eigen
   sheet: public/css/cubelegend-pvp-podium.css (laadt ná deze).             */


/* ── 8 · Duel-historie ────────────────────────────────────────────────────
   Hergebruikt .history_rij (css:16641). Alleen de extra's staan hier.      */

.pvp_hist_kaart_badge { width:14px; height:14px; object-fit:contain; }     /* ingezette card */
.pvp_hist_dag
{
	font-family:p;
	font-size:10px;
	color:#ffffff8a;
	text-transform:uppercase;
	letter-spacing:1px;
	text-align:left;
	padding-top:4px;
}
.pvp_vorm_strip { display:flex; gap:3px; }
.pvp_vorm_strip i { width:13px; height:13px; border-radius:3px; display:block; background:#ffffff33; }
.pvp_vorm_strip i.w { background:#4CAF50; }
.pvp_vorm_strip i.l { background:#f34336; }
.pvp_vorm_strip i.laatste { box-shadow:0 0 8px #4caf50aa; }

.pvp_stat_grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; }
.pvp_stat_grid > div
{
	background:#00000042;
	border:1px solid #6631c3;
	border-radius:8px;
	padding:6px 5px;
	display:flex;
	flex-direction:column;
	gap:1px;
}
.pvp_stat_grid small { font-family:p; font-size:8px; color:#ffffff8a; text-transform:uppercase; letter-spacing:1px; }
.pvp_stat_grid b { font-family:'headers'; font-size:15px; }


/* ── 9 · Info-sheets (screens 12/15/16/17) ────────────────────────────────
   Zelfde paarse gamepop als .mission_objective_card__content.             */

.pvp_info_sheet
{
	position:fixed;
	left:2.5vw;
	right:2.5vw;
	bottom:calc(2.5vw + env(safe-area-inset-bottom));
	background:linear-gradient(0deg, rgba(88,0,147,1) 70%, rgba(154,0,255,1) 100%);
	border-radius:5px;
	padding:10px;
	box-shadow:0 0 40px #000;
	box-sizing:border-box;
	z-index:14;
	display:flex;
	flex-direction:column;
	max-height:calc(100vh - 86px);
	max-height: calc(var(--vh100) - 86px);
}
.pvp_info_sheet h3:first-child
{
	margin:10px;
	font-family:'headers';
	font-size:26px;
	text-shadow:0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
	filter:drop-shadow(0 2px black);
	display:flex;
	align-items:center;
	gap:8px;
}
.pvp_info_scroll
{
	flex:1;
	min-height:0;
	overflow-y:auto;
	scrollbar-width:none;
	display:flex;
	flex-direction:column;
	gap:9px;
	padding-right:2px;
}
.pvp_info_scroll::-webkit-scrollbar { width:0; height:0; }
.pvp_info_sheet .btn-orange { margin-top:10px; flex:0 0 auto; }

.pvp_info_kaart_outer { border:4px solid #000; border-radius:14px; }
.pvp_info_kaart
{
	border:3px solid #6631c3;
	border-radius:10px;
	background:linear-gradient(0deg, #2a0b5e 70%, #3d1183 100%);
	padding:10px 12px;
	display:flex;
	flex-direction:column;
	gap:5px;
}
.pvp_info_kaart.win    { border-color:#4CAF50; background:linear-gradient(0deg, #0d3d18 70%, #175c25 100%); }
.pvp_info_kaart.verlies{ border-color:#f34336; background:linear-gradient(0deg, #4a0f0b 70%, #6e1a14 100%); }
.pvp_info_kaart.legend { border-color:#ff8c1a; background:linear-gradient(0deg, #4a2400 70%, #7a3d00 100%); }
.pvp_info_kaart h2
{
	margin:0;
	font-family:'headers';
	font-size:16px;
	letter-spacing:1px;
	text-align:left;
	text-shadow:0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.pvp_info_kaart p
{
	margin:0;
	font-family:p;
	font-size:12px;
	color:#ffffffcc;
	text-align:left;
	text-wrap:pretty;
}


/* ── 10 · Divisie-populatie paneel (screens 03/07) ────────────────────────*/

.pvp_pop_paneel_outer { width:100%; border:4px solid #000; border-radius:15px; }
.pvp_pop_paneel
{
	border:3px solid #6631c3;
	border-radius:11px;
	background:linear-gradient(0deg, rgba(88,0,147,1) 70%, rgba(154,0,255,1) 100%);
	overflow:hidden;
}
.pvp_pop_kop { padding:8px 12px; display:flex; align-items:center; gap:8px; }
.pvp_pop_kop b { font-family:'headers'; font-size:15px; letter-spacing:1px; text-shadow:0 2px black, 0 -1px black, 1px 0px black, -1px 0 black; }
.pvp_pop_lijst
{
	background:#000;
	border-top:#6631c3 2px solid;
	display:flex;
	flex-direction:column;
	gap:6px;
	padding:10px;
	border-radius:0 0 8px 8px;
}
.pvp_pop_rij
{
	display:flex;
	align-items:center;
	gap:10px;
	background:#00000042;
	border:1px solid #6631c3;
	border-radius:8px;
	padding:7px 10px;
	opacity:.65;
}
.pvp_pop_rij img { width:30px; height:30px; object-fit:contain; flex:0 0 auto; }
.pvp_pop_rij b { font-family:'headers'; font-size:14px; }
.pvp_pop_rij small { font-family:p; font-size:10px; color:#ffffffb0; }
.pvp_pop_rij .aantal { margin-left:auto; font-family:'headers'; font-size:15px; }
.pvp_pop_rij.eigen
{
	opacity:1;
	background:#f0c4371f;
	border-color:#f0c437;
	box-shadow:0 0 14px #f0c43733;
}
.pvp_pop_rij.eigen.verlies { background:#f343361f; border-color:#f34336; box-shadow:0 0 14px #f3433633; }


/* ── 11 · Live multiplayer-balk (screen 05) ───────────────────────────────*/

.pvp_live_balk
{
	margin:0 14px 8px;
	display:flex;
	align-items:center;
	gap:10px;
	background:linear-gradient(90deg, #2a0b5e, #170040);
	border:1px solid #c19eff55;
	border-radius:12px;
	padding:8px 10px;
}
.pvp_live_balk i.stip
{
	width:8px;
	height:8px;
	border-radius:50%;
	background:#4CAF50;
	box-shadow:0 0 10px #4CAF50;
	animation:pvpLivePulse 1.6s ease-in-out infinite;
	flex:0 0 auto;
	display:block;
}
.pvp_live_avatars { display:flex; align-items:center; margin-right:4px; }
.pvp_live_avatars img
{
	width:24px;
	height:24px;
	border-radius:50%;
	border:2px solid #0b0318;
	box-sizing:border-box;
}
.pvp_live_avatars img + img { margin-left:-9px; }
.pvp_live_balk b { font-family:'headers'; font-size:15px; line-height:1.1; }
.pvp_live_balk small
{
	font-family:p;
	font-size:10px;
	color:#ffffff8a;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width:150px;
}

/* land-rang chip in de league-rijen */
.pvp_land_chip
{
	font-family:p;
	font-size:10px;
	color:#7fd3ff;
	background:#7fd3ff1f;
	border:1px solid #7fd3ff55;
	border-radius:20px;
	padding:2px 7px;
	display:inline-flex;
	align-items:center;
	gap:5px;
}
.pvp_land_chip .vlag
{
	display:inline-block;
	width:14px;
	height:10px;
	border:1px solid #00000099;
	box-sizing:border-box;
}
/* placeholder tot er een echte vlaggen-sprite is; NL als voorbeeld */
.pvp_land_chip .vlag.nl { background:linear-gradient(#AE1C28 33%, #FFFFFF 33%, #FFFFFF 66%, #21468B 66%); }


/* ── 12 · Championship-view (scherm 05) & duelhistorie (09) ─────────────
   Live wachtrijbalk, seizoensbank-widget, PvP-rank-rijen en duelrijen.    */

.pvp_live_balk
{
	margin:0 14px 8px;
	display:flex;
	align-items:center;
	gap:10px;
	background:linear-gradient(90deg,#2a0b5e,#170040);
	border:1px solid #c19eff55;
	border-radius:12px;
	padding:8px 10px;
}
.pvp_live_balk .stip
{
	width:8px;
	height:8px;
	border-radius:50%;
	background:#4CAF50;
	box-shadow:0 0 10px #4CAF50;
	animation:pvpLivePulse 1.6s ease-in-out infinite;
	flex:0 0 auto;
}
.pvp_live_balk b
{
	font-family:'headers';
	font-size:15px;
	line-height:1.1;
	text-align:left;
}
.pvp_live_balk small
{
	font-family:p;
	font-size:10px;
	color:#ffffff8a;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width:180px;
	text-align:left;
}
.pvp_bank_widget
{
	margin:0 14px 8px;
	display:flex;
	align-items:center;
	gap:10px;
	background:#00000042;
	border:1px solid #6631c3;
	border-radius:8px;
	padding:7px 10px;
	cursor:pointer;
}
.pvp_bank_widget .kluis
{
	width:26px;
	height:26px;
	border-radius:6px;
	background:#00000059;
	border:1px solid #ffc46b55;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
}
.pvp_bank_widget small
{
	font-family:p;
	font-size:9px;
	color:#ffffff8a;
	text-transform:uppercase;
	letter-spacing:1px;
}
.pvp_bank_widget b
{
	font-family:'headers';
	font-size:15px;
	line-height:1.1;
	color:#FFC46B;
}
.pvp_bank_widget .pijl
{
	margin-left:auto;
	display:inline-flex;
	align-items:center;
	gap:4px;
	font-family:p;
	font-size:11px;
	color:#7fd3ff;
}

.pvp_champ_rij
{
	display:flex;
	align-items:center;
	gap:10px;
	border-bottom:#11004c 1px solid;
	padding:10px 12px;
	position:relative;
	text-align:left;
}
.pvp_champ_rij .trofee { width:62px; flex:0 0 auto; }
.pvp_champ_rij h3
{
	margin:0;
	font-family:'headers';
	font-size:17px;
	text-align:left;
	display:flex;
	align-items:center;
	gap:6px;
}
.pvp_champ_rij .chip
{
	font-family:p;
	font-size:10px;
	color:#ffffff8a;
	background:#ffffff14;
	border:1px solid #ffffff22;
	border-radius:20px;
	padding:2px 7px;
}
.pvp_champ_rij .chip.op
{
	color:#4CAF50;
	background:#4caf5022;
	border-color:#4caf5055;
}
.pvp_champ_rij .vlam
{
	margin-left:auto;
	display:inline-flex;
	align-items:center;
	gap:3px;
	font-family:'headers';
	font-size:13px;
}
.pvp_champ_rij .vlam img { width:17px; animation:pvpFlameFlicker 1.15s ease-in-out infinite; }
.pvp_champ_rij .vlam.uit { opacity:.5; }
.pvp_champ_rij .vlam.uit img { filter:grayscale(1); animation:none; }
.pvp_champ_rij .divisie
{
	font-family:'headers';
	font-size:20px;
	text-align:left;
	flex:1;
	min-width:0;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
.pvp_champ_rij .dagwaarde
{
	font-family:'headers';
	font-size:20px;
	background:#5a3367;
	padding:5px 40px 5px 10px;
	border-radius:5px;
	border:1px solid black;
	display:flex;
	position:relative;
	align-items:center;
	height:20px;
	white-space:nowrap;
	box-shadow:inset 0 8px 4px #000000a1;
}
.pvp_champ_rij .dagwaarde img
{
	width:35px;
	height:38px;
	position:absolute;
	right:0;
	border-radius:0;
}
.pvp_champ_rij .blokregel
{
	font-size:13px;
	font-family:p;
	color:#ffffffb0;
	display:flex;
	align-items:center;
	gap:6px;
	text-align:left;
	flex-wrap:wrap;
}

.pvp_history_rij
{
	display:flex;
	align-items:center;
	gap:12px;
	padding:8px 12px;
	border-radius:8px;
	background:#00000042;
	border:1px solid #6631c3;
	cursor:pointer;
}
.pvp_history_rij .rij_avatar
{
	width:34px;
	height:34px;
	border-radius:50%;
	flex-shrink:0;
	object-fit:cover;
	background:#00000066;
}
.pvp_history_rij .rij_titel
{
	font-family:p;
	font-weight:bold;
	font-size:14px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width:170px;
	text-align:left;
}
.pvp_history_rij .rij_detail
{
	font-family:p;
	font-size:11px;
	opacity:.7;
	white-space:nowrap;
	display:flex;
	align-items:center;
	gap:5px;
	text-align:left;
}
.pvp_history_rij .uitkomst
{
	margin-left:auto;
	flex-shrink:0;
	display:flex;
	align-items:center;
	gap:4px;
	font-family:'headers';
	font-size:15px;
}

.pvp_hist_filter
{
	font-family:'headers';
	font-size:17px;
	padding:5px 0;
	border-bottom:4px solid transparent;
	opacity:.55;
	cursor:pointer;
}
.pvp_hist_filter.aan
{
	border-bottom-color:#FF9800;
	opacity:1;
}


/* ── 13 · Overlay-lagen ─────────────────────────────────────────────────
   OVERRIDE: de in-game HUD (topClaims 55, bonusWrapperInfo 222,
   ojectivesWrapper 333) prikte door de eindsequentie-schermen heen; het
   uitslagscherm stond op z-index 12 en de felicitatieschermen op 3. De hele
   PvP-eindsequentie hoort boven ALLES van de afgelopen game. Achtergrond
   naar het bijna-dekkende schermdonker van het ontwerp (#0b0318).           */

#pvpResult                                   /* OVERRIDE */
{
	z-index:400;
	background:linear-gradient(#0b0318f0, #0b0318fb);
}
.newHighscore.pvpRankScherm                  /* OVERRIDE */
{
	z-index:400;
	background:linear-gradient(#0b0318e8, #0b0318fb);
}
.pvp_info_sheet { z-index:401; }


/* ── 14 · Device-fixes (screenshots 2026-08-08) ─────────────────────────
   OVERRIDE: .dashboard_section.section_league img (CubeRunnerz:5175) dwingt
   ELKE img in de championship-view naar 80×80 — de PvP-rank-trofeeën bliezen
   de rijen op en de streak-vlam (17px breed) rekte tot een capsule van 80px
   hoog. Specificiteit-bump + expliciete maten per afbeelding.               */

.dashboard_section.section_league .pvp_champ_rij img,
.dashboard_section.section_league .pvp_history_rij img,
.dashboard_section.section_league .pvp_live_balk img,
.dashboard_section.section_league .pvp_bank_widget img
{
	width:auto;
	height:auto;
	border-radius:0;
}
.dashboard_section.section_league .pvp_champ_rij img.trofee
{
	width:62px;
	height:62px;
	object-fit:contain;
}
.dashboard_section.section_league .pvp_champ_rij .vlam img
{
	width:17px;
	height:17px;
	object-fit:contain;
}
.dashboard_section.section_league .pvp_champ_rij .dagwaarde img
{
	width:35px;
	height:38px;
	object-fit:cover;
}
.dashboard_section.section_league .pvp_history_rij img.rij_avatar
{
	width:34px;
	height:34px;
	border-radius:50%;
	object-fit:cover;
}
.dashboard_section.section_league .pvp_history_rij .rij_detail img
{
	width:14px;
	height:14px;
	object-fit:contain;
}
.dashboard_section.section_league .pvp_history_rij .uitkomst img { height:1em; width:auto; }

/* de vaste rechter-actierail (.sideBoxes, 50px breed) hangt over de rij-
   inhoud: dagwaarde-chips krijgen vrije ruimte rechts                       */
.pvp_champ_rij { padding-right:54px; }


/* ── 15 · Slide-from-bottom voor informatieve sheets ────────────────────
   Zelfde presentatie als de adventure-missiekaart (CubeRunnerz:753-774):
   vanaf 150% onder beeld omhoog glijden; sluiten glijdt terug (swipeClose
   haalt .active weg en verwijdert pas na closeTime).                        */

.pvp_info_sheet
{
	transform:translate3d(0, 150%, 0);
	transition:transform .38s cubic-bezier(.22, .9, .36, 1);
}
.pvp_info_sheet.active { transform:translate3d(0, 0, 0); }


/* ── 16 · Duel-picker: adventure-missiekaart-effect ─────────────────────
   OVERRIDE van de fade in CubeRunnerz:8710 — de hele kolom komt van onder
   het beeld omhoog en de drie kaarten volgen elk nét iets later.            */

#pvpMetricKeuze                              /* OVERRIDE */
{
	opacity:1;
	transform:translate3d(0, 130%, 0);
	transition:transform .45s cubic-bezier(.22, .9, .36, 1);
}
#pvpMetricKeuze.active { opacity:1; transform:translate3d(0, 0, 0); }
#pvpMetricKeuze .pvp_keuze_kaart_outer
{
	opacity:0;
	transform:translate3d(0, 46px, 0);
	transition:opacity .4s ease, transform .45s cubic-bezier(.22, .9, .36, 1);
}
#pvpMetricKeuze .pvp_keuze_kaart_outer:nth-child(2) { transition-delay:.07s; }
#pvpMetricKeuze .pvp_keuze_kaart_outer:nth-child(3) { transition-delay:.14s; }
#pvpMetricKeuze.active .pvp_keuze_kaart_outer
{
	opacity:1;
	transform:translate3d(0, 0, 0);
}


/* ── 17 · Visuele pas (design-vergelijking 2026-08-08) ──────────────────
   1. Volledig dekkende ontwerp-achtergronden (cbg0-textuur + donker) op de
      eindsequentie- en VS-schermen: er lekte dashboard/HUD doorheen.
   2. De globale home-knop (z 99999, top-center) overlapte de titels: alle
      volledige PvP-schermen krijgen top-clearance.
   3. Championship-rij: divisienaam werd tot "i…" geknepen door de brede
      dagwaarde-chip.                                                        */

.newHighscore.pvpRankScherm                  /* OVERRIDE */
{
	background:linear-gradient(#0b0318cc, #0b0318f5), url(/public/img/cubelegend/cbg0.jpeg) center/cover, #0b0318;
	padding-top:calc(58px + env(safe-area-inset-top));
}
#pvpResult                                   /* OVERRIDE */
{
	background:linear-gradient(#0b0318d9, #0b0318f2), url(/public/img/cubelegend/cbg0.jpeg) center/cover, #0b0318;
	padding-top:calc(14px + env(safe-area-inset-top));
	box-sizing:border-box;
}
#pvpVersus                                   /* OVERRIDE */
{
	background:linear-gradient(#29004dd9, #29004df2), url(/public/img/cubelegend/cbg0.jpeg) center/cover, #29004d;
	padding-top:calc(env(safe-area-inset-top) + 56px);
	justify-content:flex-start;
	overflow-y:auto;
	scrollbar-width:none;
}
#pvpVersus::-webkit-scrollbar { width:0; height:0; }
#pvpVersus .pvp_opponent_found
{
	display:flex;
	align-items:center;
	gap:7px;
	font-family:p;
	font-size:11px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:#7CFC00;
	margin-bottom:-12px;
}
#pvpVersus .pvp_opponent_found i
{
	width:7px;
	height:7px;
	border-radius:50%;
	background:#7CFC00;
	box-shadow:0 0 8px #7CFC00;
	animation:pvpLivePulse 1.6s ease-in-out infinite;
}

.pvp_champ_rij .divisie { min-width:96px; }
.pvp_champ_rij .dagwaarde
{
	font-size:16px;
	max-width:calc(100% - 104px);
	overflow:hidden;
	text-overflow:ellipsis;
	flex:0 1 auto;
}

/* duel-picker: eigen kop + wachtrij-notitie (ontwerp 01) */
#pvpMetricKeuze .pvp_picker_kop
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2px;
	padding-bottom:2px;
}
#pvpMetricKeuze .pvp_picker_kop h1
{
	/* de "?" staat naast de titel (zoals op Daily Spin), dus de kop is een rij */
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	margin:0;
	font-family:'headers';
	font-size:34px;
	letter-spacing:1px;
	color:#FFC46B;
	text-shadow:0 3px black, 0 -2px black, 2px 0 black, -2px 0 black, 0 0 26px #ff980055;
}
#pvpMetricKeuze .pvp_picker_kop small
{
	font-family:p;
	font-size:12px;
	color:#ffffff8a;
	letter-spacing:1px;
}
#pvpMetricKeuze .pvp_picker_wachtrij
{
	display:flex;
	align-items:center;
	gap:8px;
	justify-content:center;
	font-family:p;
	font-size:11px;
	color:#ffffffb0;
	background:#00000042;
	border:1px solid #6631c3;
	border-radius:20px;
	padding:7px 14px;
}
#pvpMetricKeuze .pvp_picker_wachtrij i
{
	width:7px;
	height:7px;
	border-radius:50%;
	background:#4CAF50;
	box-shadow:0 0 8px #4CAF50;
	animation:pvpLivePulse 1.6s ease-in-out infinite;
	flex:0 0 auto;
}

/* VS-scherm: vorm-percentages + laatste-uitslag-chip (ontwerp 13) */
.pvp_vorm_pct
{
	margin-left:auto;
	font-family:'headers';
	font-size:13px;
	color:#7CFC00;
}
.pvp_h2h_laatste
{
	font-family:p;
	font-size:10px;
	color:#ffffff8a;
	text-transform:uppercase;
	letter-spacing:1px;
}

/* picker-kolom: onder de home-knop beginnen, binnen het scherm blijven en
   zelf scrollen als de drie kaarten + notitie niet passen                   */
#pvpMetricKeuze
{
	max-height:100%;
	overflow-y:auto;
	scrollbar-width:none;
	padding:calc(50px + env(safe-area-inset-top)) 4px 14px;
	box-sizing:border-box;
}
#pvpMetricKeuze::-webkit-scrollbar { width:0; height:0; }

/* QA-checklist: de onder-CTA is ALTIJD bereikbaar — de inhoudskolom klemt op
   de schermhoogte zodat de REWARDS/LOSSES-lijst scrollt en de knop blijft   */
#pvpResult .pvp_result_inhoud { max-height:100%; min-height:0; }


/* ── 18 · Picker: volle breedte + vanaf de top (device-feedback) ────────
   OVERRIDE van CubeRunnerz:8710 (width min(340px)) — de kolom hangt nu als
   absolute laag bovenin het zoekscherm i.p.v. mee te centreren, en pakt de
   ontwerp-breedte (16px zijmarge). De slide-animatie blijft: translate3d-Y
   botst niet met de horizontale centrering via margin auto.                 */

#pvpMetricKeuze                              /* OVERRIDE */
{
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:0 auto;
	width:min(430px, calc(100vw - 24px));
	height:100%;
	max-height:100%;
	padding-top:calc(52px + env(safe-area-inset-top));
	padding-bottom:calc(14px + env(safe-area-inset-bottom));
}


/* ── 19 · Device-feedback ronde 2 ───────────────────────────────────────
   1. Compacte championship-kop (frame 05): één regel, geen geboxte cursor.
   2. De drijvende sparks zweefden ÓVER de chips van de duel-kaarten heen
      (witte vlekken achter trofee/vlam) → strikt achter de inhoud + zachter.
   3. Win-pays-infobadge: 6×11px was ontikbaar — 30px raakvlak, en de
      duel-tap negeert hem (aparte handler opent de uitleg).                 */

.pvp_champ_kop
{
	display:flex;
	align-items:center;
	gap:10px;
	justify-content:space-between;
	padding:16px 14px 8px;
}
.pvp_champ_kop h3
{
	margin:0;
	padding:0;
	font-family:'headers';
	font-size:24px;
	white-space:nowrap;
	display:flex;
	align-items:center;
	gap:8px;
	text-shadow:0 2px black, 0 -2px black, 2px 0 black, -2px 0 black;
}
.pvp_kop_info
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:30px;
	height:30px;
	border-radius:50%;
	color:#7fd3ff;
	opacity:.8;
	cursor:pointer;
	flex:0 0 auto;
}
.pvp_dag_cursor
{
	display:flex;
	flex-direction:column;
	align-items:center;
	margin-top:-4px;
	flex:0 0 auto;
}
.pvp_dag_rij { display:flex; align-items:center; gap:6px; }
.pvp_dag_rij h1
{
	margin:0;
	font-family:'headers';
	font-size:22px;
	text-shadow:0 2px black, 0 -2px black, 2px 0 black, -2px 0 black;
}
.pvp_dag_pijl
{
	display:inline-flex;
	color:#fff;
	opacity:.25;
	cursor:default;
}
.pvp_dag_pijl.aan { opacity:.55; cursor:pointer; }
.pvp_dag_cursor small
{
	opacity:.5;
	font-family:p;
	font-size:10px;
	letter-spacing:1px;
	margin-top:-3px;
}

/* sparks: subtiel en ALTIJD onder de kaartinhoud */
.pvp_spark { z-index:1; }
.pvp_keuze_top, .pvp_keuze_mid, .pvp_keuze_onder { position:relative; z-index:3; }

/* win-pays-infobadge: royaal raakvlak zonder de layout te verschuiven */
.pvp_info_badge
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:30px;
	height:30px;
	margin:-10px -8px -10px -4px;
	border-radius:50%;
	cursor:pointer;
}

/* de streak-badge-plaat (het asset is een cirkel): rustiger op de duel-
   kaarten — kleiner, zonder extra gloed, grijs dooft echt uit op streak 0  */
.pvp_keuze_divisie img[src*="streaks_streak"]
{
	width:26px;
	height:26px;
	filter:drop-shadow(0 1px 2px #00000088);
}


/* ── 20 · Championship één-pagina + seizoenscursor + vrienden ───────────
   Tabs afgeschaft; alle blokken pakken exact dezelfde breedte (14px inzet)
   en de rechter-actierail schuift weg zolang de view open staat.           */

/* de rechter-actierail blijft zichtbaar op de championship (feedback r6) */

[pvp-champ-rijen]
{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:0 14px;
	margin-bottom:8px;
}
.pvp_champ_rij                               /* OVERRIDE — kaartvorm, uniforme breedte */
{
	padding:10px 12px;
	border:1px solid #6631c3;
	border-radius:8px;
	background:#00000042;
	border-bottom:1px solid #6631c3;
}
.pvp_champ_rij.historie { margin:0 14px 8px; }
.pvp_champ_rij .dagwaarde { max-width:calc(100% - 108px); }

.pvp_sectie_kop
{
	display:flex;
	align-items:center;
	gap:8px;
	padding:12px 14px 6px;
}
.pvp_sectie_kop h3
{
	margin:0;
	font-family:'headers';
	font-size:18px;
	text-shadow:0 2px black, 0 -2px black, 2px 0 black, -2px 0 black;
}
.pvp_leeg_p
{
	font-family:p;
	font-size:12px;
	color:#ffffff8a;
	text-align:left;
	padding:0 14px 10px;
	margin:0;
}
.pvp_vriend_rij
{
	display:flex;
	align-items:center;
	gap:12px;
	padding:9px 12px;
	border:1px solid #6631c3;
	border-radius:8px;
	background:#00000042;
	margin:0 14px 8px;
}
.pvp_vriend_rij .rij_avatar
{
	width:38px;
	height:38px;
	border-radius:50%;
	object-fit:cover;
	background:#00000066;
	flex:0 0 auto;
}
.pvp_vriend_rij .naam
{
	font-family:p;
	font-weight:bold;
	font-size:14px;
	text-align:left;
}
.pvp_vriend_rij .dis_rij
{
	display:flex;
	gap:6px;
	width:100%;
	min-width:0;
	flex-wrap:wrap;
}
.pvp_vriend_rij .dis
{
	display:inline-flex;
	align-items:center;
	gap:4px;
	background:#00000059;
	border:1px solid #ffffff22;
	border-radius:6px;
	padding:3px 7px 3px 4px;
	font-family:p;
	font-size:10px;
}
.pvp_vriend_rij .dis img { width:20px; height:20px; object-fit:contain; }
.pvp_vriend_rij .dis b { font-family:'headers'; font-size:11px; }
.pvp_vriend_rij .dis i { font-style:normal; color:#ffffff8a; }
.pvp_vriend_rij .dis em { font-style:normal; display:inline-flex; align-items:center; gap:2px; font-family:'headers'; font-size:11px; color:#FFC46B; }
.pvp_vriend_rij .dis em img { width:12px; height:12px; }


/* ── 21 · Sheet-underlay + ontwerp-opmaak informatieschermen ───────────── */

.pvp_sheet_underlay
{
	position:fixed;
	inset:0;
	background:#00000073;
	z-index:400;
	opacity:0;
	transition:opacity .3s ease;
}
.pvp_sheet_underlay.active { opacity:1; }

.pvp_sheet_titel
{
	margin:4px 0 2px;
	font-family:'headers';
	font-size:22px;
	letter-spacing:1px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	position:relative;
	text-shadow:0 2px black, 0 -2px black, 2px 0 black, -2px 0 black;
	flex:0 0 auto;
}
.pvp_sheet_kruis
{
	position:absolute;
	right:0;
	top:-2px;
	color:#fff;
	opacity:.85;
	cursor:pointer;
	display:inline-flex;
}
.pvp_sheet_sub
{
	font-family:p;
	font-size:11px;
	color:#ffffffb0;
	margin:0 0 8px;
	flex:0 0 auto;
}
.pvp_sheet_tabs
{
	display:flex;
	gap:8px;
	margin:2px 2px 10px;
	flex:0 0 auto;
}
.pvp_sheet_tab
{
	flex:1;
	border:2px solid #00000073;
	border-radius:9px;
	background:#00000038;
	color:#e9d8a6;
	font-family:'headers';
	font-size:12px;
	letter-spacing:.5px;
	padding:9px 4px;
	text-align:center;
	cursor:pointer;
	text-shadow:0 1px black;
}
.pvp_sheet_tab.aan
{
	background:linear-gradient(to bottom, #ffd700 0%, #ff7700 100%);
	box-shadow:inset 0 -3px #b25f00;
	color:#fff;
	border-color:#000;
	text-shadow:0 2px black, 0 -1px #0000007a, 1px 0 #0000007a, -1px 0 #0000007a;
}

.pvp_sectie_kaart_outer
{
	border:4px solid #000;
	border-radius:14px;
	margin-bottom:10px;
	flex:0 0 auto;
}
.pvp_sectie_kaart
{
	border:3px solid #6631c3;
	border-radius:10px;
	padding:10px 12px;
	text-align:left;
	overflow:hidden;
}
.pvp_sectie_kaart.goud
{
	border-color:#FFC107;
	background:linear-gradient(to bottom, #ffd700 0%, #ff9000 100%);
}
.pvp_sectie_kaart h4
{
	margin:0 0 5px;
	font-family:'headers';
	font-size:16px;
	letter-spacing:1px;
	text-shadow:0 2px black, 0 -1px black, 1px 0 black, -1px 0 black;
}
.pvp_sectie_kaart.goud h4 { text-shadow:0 2px #7a4c00; }
.pvp_sectie_p
{
	margin:0;
	font-family:p;
	font-size:12px;
	line-height:1.45;
	color:#ffffffd9;
}
.pvp_sectie_kaart.goud .pvp_sectie_p { color:#3d2600; }
.pvp_sectie_klein
{
	display:block;
	font-family:p;
	font-size:9px;
	letter-spacing:1px;
	text-transform:uppercase;
	color:#ffffff8a;
	margin:10px 2px 4px;
}
.pvp_mini_kaart
{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:#00000059;
	border-radius:7px;
	padding:6px 10px;
	font-family:p;
	font-size:11px;
	color:#fff;
}
.pvp_mini_kaart img { width:20px; }
.pvp_kaart_band
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	background:#000000d9;
	border-radius:8px;
	margin-top:9px;
	padding:7px 10px;
	font-family:'headers';
	font-size:12px;
	letter-spacing:.5px;
}
.pvp_ladder_rij
{
	display:flex;
	align-items:center;
	gap:9px;
	background:#00000059;
	border:1px solid #ffffff1f;
	border-radius:9px;
	padding:7px 10px;
	margin-top:6px;
}
.pvp_ladder_rij img { width:22px; height:22px; object-fit:contain; flex:0 0 auto; }
.pvp_ladder_rij span
{
	flex:1;
	min-width:0;
	text-align:left;
	font-family:p;
	font-size:12px;
	display:flex;
	flex-direction:column;
	gap:1px;
}
.pvp_ladder_rij span b { font-family:'headers'; font-size:13px; letter-spacing:.5px; }
.pvp_ladder_rij span small { font-family:p; font-size:10px; color:#ffffff8a; }
.pvp_ladder_rij > b { font-family:'headers'; font-size:14px; flex:0 0 auto; color:#7CFC00; }
.pvp_ladder_rij.eigen
{
	border-color:#FFC107;
	background:#3d2f00b8;
	box-shadow:0 0 12px #ffc10744;
}
.pvp_ladder_rij.hoog { border-color:#ffffff40; }

.pvp_tier_rij
{
	display:flex;
	align-items:center;
	gap:9px;
	background:#00000042;
	border:1px solid #6631c3;
	border-radius:10px;
	padding:6px 10px;
	margin-bottom:7px;
}
.pvp_tier_rij img.trofee { width:34px; height:34px; object-fit:contain; flex:0 0 auto; }
.pvp_tier_rij b
{
	font-family:'headers';
	font-size:14px;
	letter-spacing:.5px;
	text-align:left;
	display:flex;
	flex-direction:column;
	line-height:1.15;
}
.pvp_tier_rij b small { font-family:p; font-size:9px; color:#ffffff8a; text-transform:none; letter-spacing:0; }
.pvp_tier_rij .pillen
{
	margin-left:auto;
	display:inline-flex;
	align-items:center;
	gap:5px;
	flex:0 0 auto;
}
.pvp_stake_pil
{
	background:#ffffff14;
	border:1px solid #ffffff26;
	border-radius:14px;
	padding:3px 8px;
	font-family:'headers';
	font-size:11px;
	display:inline-flex;
	align-items:center;
	gap:4px;
}
.pvp_stake_pil.goud { border-color:#FFC107; background:#3d2f00; }
.pvp_stake_pil img { width:13px; }
.pvp_tier_rij .pil_munt { width:16px; }
.pvp_tier_rij.eigen
{
	border-color:#FFC107;
	box-shadow:0 0 12px #ffc10744;
	background:#241a00b8;
}
.pvp_tier_rij.legendary { border-color:#ff8c1a; }

/* win-pays-badge op de duel-kaart: adventure-(?)-look.
   Kleiner dan voorheen (24px naast een label van 9px was een bal naast een
   muis) en op de tekstregel uitgelijnd. Het RAAKVLAK lijdt er niet onder: het
   hele stake- en win-pays-blok is al tikbaar (.pvp_info_vlak), de badge is
   alleen de aanwijzing dat daar uitleg achter zit. */
.pvp_info_badge
{
	background:#00000059;
	border:1px solid #ffffff66;
	color:#fff;
	font-size:9px;
	line-height:1;
	font-family:'headers';
	width:14px;
	height:14px;
	margin:0 0 0 3px;
	vertical-align:middle;
	flex:none;
}

/* DUEL rechts uitlijnen en iets breder — hij is de actie van de kaart en hoort
   niet tegen de multiplier aan te plakken. */
.pvp_keuze_onder .btn-orange
{
	margin-left:auto;
	min-width:104px;
	text-align:center;
}

/* vriendenrij binnen section_league: zelfde 80×80-img-override neutraliseren */
.dashboard_section.section_league .pvp_vriend_rij img.rij_avatar
{
	width:38px;
	height:38px;
	border-radius:50%;
	object-fit:cover;
}
.dashboard_section.section_league .pvp_vriend_rij .dis img { width:20px; height:20px; border-radius:0; }
.dashboard_section.section_league .pvp_vriend_rij .dis em img { width:12px; height:12px; }
/* sheet-titel nooit onder het sluitkruisje */
.pvp_sheet_titel { padding:0 34px; }
/* onderaan ademruimte boven de bottom-nav */
[pvp-champ-vrienden] { padding-bottom:4px; }
.dashboard_section.section_league { padding-bottom:90px; }


/* ── 22 · Feedback ronde 4 ─────────────────────────────────────────────── */

/* cube-rij op het VS-scherm: uitsluitend horizontaal scrollen */
.pvp_cube_rij
{
	overflow-y:hidden;
	touch-action:pan-x;
	overscroll-behavior-x:contain;
}

/* duel-summary: de generieke tabcontent-regel (CubeRunnerz:7101) rekte élke
   .btn-orange tot volle breedte — WATCH REPLAY hoort een compacte rijknop
   te zijn (het onderste PLAY AGAIN/REVENGE blijft wél vol) */
[tabcontent_wrapper] .pvp_social_rij .btn-orange
{
	min-width:0 !important;
	width:auto;
}


/* eindscherm: VS-scheiding + voorsprong-onderschrift + verlies-hint (02/06) */
.pvp_result_vs
{
	align-self:center;
	font-family:'headers';
	font-size:22px;
	color:#FF9800;
	text-shadow:0 0 16px #ff980088, 0 2px black;
	flex:0 0 auto;
}
.pvp_result_speler .pvp_uitslag_diff
{
	font-family:p;
	font-size:10px;
	text-transform:uppercase;
	letter-spacing:1px;
	color:#ffffff8a;
}
.pvp_result_speler .pvp_uitslag_diff.voor   { color:#4CAF50; }
.pvp_result_speler .pvp_uitslag_diff.achter { color:#ff5a5a; }
.pvp_verlies_hint
{
	color:#FFC46B;
	font-family:p;
	font-size:11px;
	border:1px solid #FFC46B66;
	border-radius:12px;
	padding:4px 12px;
}


/* ── 23 · Feedback ronde 5 ─────────────────────────────────────────────── */

/* championship: bredere content — alle blokken op 8px zijmarge */
.pvp_champ_kop { padding:16px 8px 8px; }
.pvp_live_balk, .pvp_bank_widget { margin-left:8px; margin-right:8px; }
[pvp-champ-rijen] { padding:0 8px; }
.pvp_vriend_rij { margin-left:8px; margin-right:8px; }
.pvp_champ_rij.historie { margin-left:8px; margin-right:8px; }
.pvp_sectie_kop { padding-left:8px; padding-right:8px; }
.pvp_leeg_p { padding-left:8px; padding-right:8px; }

/* divisie-topscore-chip: label + trofee-icoon */
.pvp_champ_rij .dagwaarde .top_label
{
	position:absolute;
	top:-14px;
	right:6px;
	font-family:p;
	font-size:8px;
	letter-spacing:1px;
	text-transform:uppercase;
	color:#ffffff8a;
}
.dashboard_section.section_league .pvp_champ_rij .dagwaarde img
{
	width:26px;
	height:26px;
	object-fit:contain;
	right:6px;
}

/* vrienden: ingeklapte rijen + toon-meer-knop */
.pvp_vriend_rij.verborgen { display:none; }
.pvp_meer_vrienden
{
	display:block;
	margin:2px 8px 10px;
	text-align:center;
	font-size:14px;
	padding:9px 12px 11px;
}


/* ── 24 · Classic-dashboard-idioom voor de championship-lijsten (r6) ─────
   Referentie .dashboard_section__rank: volle breedte, geen rand/achtergrond
   (alleen border-bottom #11004c), met een top-edge-schaduw als overlay.     */

[pvp-champ-rijen] { padding:0; gap:0; margin-bottom:0; }
.pvp_champ_rij                               /* OVERRIDE — classic-rijvorm */
{
	margin:0;
	width:100%;
	box-sizing:border-box;
	border:none;
	border-radius:0;
	background:#00000014;
	border-bottom:#11004c 1px solid;
	box-shadow:inset 0 16px 14px -14px #00000073;
	padding:12px 10px;
}
.pvp_champ_rij.historie { margin:0; }
.pvp_vriend_rij                              /* OVERRIDE — classic-rijvorm */
{
	margin:0;
	width:100%;
	box-sizing:border-box;
	border:none;
	border-radius:0;
	background:#00000014;
	border-bottom:#11004c 1px solid;
	box-shadow:inset 0 16px 14px -14px #00000073;
	padding:11px 10px;
}
.pvp_vriend_rij.verborgen { display:none; }
[pvp-champ-duellijst] .pvp_history_rij
{
	border:none;
	border-radius:0;
	background:#00000014;
	border-bottom:#11004c 1px solid;
	box-shadow:inset 0 16px 14px -14px #00000073;
}
[pvp-champ-duellijst] { gap:0 !important; padding:0 !important; }
.pvp_meer_vrienden { margin:10px 8px; }

/* seizoens-cursor: geboxt zoals classic, namen wrappen i.p.v. overlopen */
.pvp_seizoen_cursor { max-width:190px; flex:0 0 auto; }
.pvp_seizoen_cursor .league-day-cursor { min-width:0; gap:4px; }
.pvp_seizoen_cursor .league-day-cursor h1
{
	white-space:normal;
	overflow-wrap:anywhere;
	text-align:center;
	line-height:1.05;
	min-width:0;
}
.pvp_seizoen_cursor .league-day-cursor h1.seizoen { font-size:15px; letter-spacing:1px; }
.pvp_seizoen_cursor .free-button-active,
.pvp_seizoen_cursor .free-button-inactive { width:40px; height:40px; flex:0 0 auto; }
.pvp_seizoen_cursor .free-button-inactive { opacity:.3; }
.pvp_champ_kop {padding: 0;gap: 10px;}
.pvp_champ_kop h3 { white-space:normal; text-align:left; min-width:0; }


/* ── 25 · Duelhistorie-sheet (r7): marges tussen tabs en inhoud ────────── */
[pvp-hist-metric] { margin-bottom:12px; }
[pvp-hist-kop] { margin-top:2px; }
[pvp-hist-filter] { margin:12px 2px 10px !important; }
[pvp-hist-lijst] { margin-top:2px; }


/* ── 26 · Challenges-idioom voor de championship (r8) ───────────────────
   Referentie: de Rewarded-Challenges-kaarten — volle wrapper-breedte,
   afgeronde kaarten met ruime tussenmarge en de witte top-reflectie
   (zelfde techniek als .cube:before — ::before, 50% hoog, wit → transparant). */

.pvp_champ_kop h3 { flex-wrap:wrap; row-gap:2px; }

.pvp_live_balk, .pvp_bank_widget { margin-left:0; margin-right:0; }
.pvp_vriend_rij { margin:0 0 14px; }
.pvp_champ_rij.historie { margin:0 0 14px; }
.pvp_meer_vrienden { margin:18px 0 14px; }
.pvp_sectie_kop { padding-left:2px; padding-right:2px; }
.pvp_leeg_p { padding-left:2px; padding-right:2px; }
[pvp-champ-rijen] {gap:14px;margin: 1rem;width: calc(100% - 2rem);}
[pvp-champ-duellijst] { gap:10px !important; }
.pvp_live_balk { margin-bottom:14px; }
.pvp_bank_widget { margin-bottom:14px; }

.pvp_champ_rij,
.pvp_vriend_rij,
[pvp-champ-duellijst] .pvp_history_rij
{
	border:none;
	border-bottom:none;
	border-radius:12px;
	background:#00000030;
	box-shadow:0 3px 10px #00000040;
	position:relative;
	overflow:hidden;
}
/* EXACT het challenges-gloss-recept (CubeRunnerz ~4699 + .personal_quests:
   after): ingesprongen strip van 20% hoog, wit .5 → transparant, met de
   gebogen onderrand (border-radius 4px 4px 100% 100%) — dat is de glans die
   op de rest van de app zit. */
.pvp_champ_rij::before,
.pvp_vriend_rij::before,
[pvp-champ-duellijst] .pvp_history_rij::before,
.pvp_live_balk::before,
.pvp_bank_widget::before
{
	content:'';
	display:block;
	width:calc(100% - 10px);
	height:20%;
	margin:5px;
	top:0;
	left:0;
	position:absolute;
	background:linear-gradient(to bottom, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 100%);
	border-radius:4px 4px 100% 100%;
	z-index:2;
	pointer-events:none;
}
.pvp_live_balk, .pvp_bank_widget { position:relative; overflow:hidden; }
/* chips en inhoud boven de glans */
.pvp_champ_rij > *, .pvp_vriend_rij > *, [pvp-champ-duellijst] .pvp_history_rij > *,
.pvp_live_balk > *, .pvp_bank_widget > * { position:relative; z-index:3; }


/* ── 27 · Divisieschermen 03/07/04/08 exact naar ontwerp (r9) ───────────
   Het scherm spreidde zich over de volle hoogte (space-between) waardoor
   "+1 DIVISION BLOCK" gigantisch en tweeregelig het gat vulde; het ontwerp
   heeft een compacte kolom van boven naar beneden met de knop onderaan.    */

.newHighscore.pvpRankScherm                  /* OVERRIDE */
{
	justify-content:flex-start;
	gap:14px;
}
.newHighscore.pvpRankScherm h2               /* OVERRIDE — kleine grijze caps zoals frame 03 */
{
	font-family:p;
	font-size:13px;
	letter-spacing:2px;
	color:#ffffff8a;
	text-transform:uppercase;
	text-shadow:none;
}
.pvpRankScherm .pvp_rank_uitslag             /* OVERRIDE — één regel, ontwerp-maat; !important
   omdat CubeRunnerz:6525 .newHighscore h1 op 18vw !important dwingt */
{
	font-size:min(26px, 6.2vw) !important;
	min-height:0;
	line-height:1.15;
	letter-spacing:1px;
	white-space:nowrap;
	max-width:100%;
}
.pvpRankScherm .pvp_rank_uitslag.winst   { text-shadow:0 0 14px #4caf5066, 0 2px black; }
.pvpRankScherm .pvp_rank_uitslag.verlies { text-shadow:0 0 14px #f3433666, 0 2px black; }
/* CONTINUE onderaan vastpinnen; SHARE/CONTINUE-paar op het moment-scherm ook */
.pvpRankScherm > .btn-orange { margin-top:auto; flex:0 0 auto; }
.pvpRankScherm > .btn-orange + .btn-purple { margin-top:0; }


/* ── 28 · Frame 14 (sparring bot) + grotere actieknoppen (r10) ─────────── */

.pvp_opponent_found.bot { color:#FFC46B; }
.pvp_opponent_found.bot i { background:#FFC46B; box-shadow:0 0 8px #FFC46B; }
.pvp_player.bot .pvp_bot_match
{
	font-family:p;
	font-size:10px;
	letter-spacing:1px;
	text-transform:uppercase;
	color:#bfe3ff;
}
.pvp_player.bot .pvp_bot_handicap
{
	font-family:'headers';
	font-size:11px;
	letter-spacing:1px;
	color:#7fd3ff;
	border:1px solid #7fd3ff66;
	border-radius:12px;
	padding:4px 12px;
	background:#0b2c4d80;
}
.pvp_bot_banner
{
	display:flex;
	align-items:center;
	gap:10px;
	background:#1b1246d9;
	border:1px solid #7fd3ff55;
	border-radius:10px;
	padding:9px 12px;
	max-width:min(420px, calc(100vw - 28px));
}
.pvp_bot_banner i
{
	font-style:normal;
	font-family:'headers';
	flex:0 0 auto;
	width:22px;
	height:22px;
	border-radius:50%;
	background:#2f7fd3;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
}
.pvp_bot_banner span
{
	font-family:p;
	font-size:11px;
	color:#e7f2ff;
	text-align:left;
	line-height:1.4;
}

/* actieknoppen minstens zo groot als PLAY in de onderbalk */
.pvp_live_balk .btn-orange { font-size:24px !important; padding:9px 18px 12px !important; }
.pvp_meer_vrienden { font-size:24px !important; padding:11px 12px 14px !important; }


/* ── 29 · VS-scherm: vaste READY-voet + zoekscherm-achtergrond (r11) ────
   1. De ready-rij + READY-knop plakken als sticky voet aan de onderkant van
      het scherm — de rest van de inhoud scrollt eronderdoor.
   2. De achtergrond is weer transparant: het VS-scherm leeft ín
      searchingOpponent, dus de hyperspace-animatie van het zoekscherm loopt
      gewoon door (het dekkende cbg-vlak verstopte hem).                     */

#pvpVersus                                   /* OVERRIDE */
{
	background:transparent;
	padding-bottom:0;
}
#pvpVersus > div.flex-col:last-child
{
	position:sticky;
	bottom:0;
	z-index:6;
	margin-top:auto !important;
	width:100%;
	padding:12px 0 calc(env(safe-area-inset-bottom) + 12px);
	background:linear-gradient(to top, #29004d 62%, rgba(41, 0, 77, 0) 100%);
}

/* streak-chip in de rank-rijen: links in de titelrij (stond achter de
   rechter-actierail), met het woord 'streak'; alleen zichtbaar bij >= 2 */
.pvp_champ_rij .vlam
{
	margin-left:2px;
	background:#00000059;
	border:1px solid #ffc46b44;
	border-radius:20px;
	padding:2px 9px 2px 5px;
}
.pvp_champ_rij .vlam small
{
	font-family:p;
	font-size:9px;
	letter-spacing:1px;
	text-transform:uppercase;
	color:#ffe0b8;
	margin-left:2px;
}


/* bank-chip: disciplinecontext ("awareness bank") naast de netto-stand */
.pvp_bank_chip .chip_label
{
	font-family:p;
	font-size:8px;
	color:#ffffff8a;
	text-transform:uppercase;
	letter-spacing:1px;
	margin-right:2px;
}


/* ── 30 · Divisiescherm-ladder + uitslagregel-maat (r15) ────────────────
   1. .align-end bestond niet als utility — de zijtrofeeën en verbindings-
      lijnen bleven bovenaan hangen i.p.v. uit te lijnen met de grote
      middentrofee (frame 03).
   2. De uitslagregel is groter, zoals in het ontwerp (~34px), en past nog
      steeds op één regel.                                                  */

.pvpRankScherm .flex-row.align-end { align-items:flex-end; }
.pvpRankScherm .pvp_rank_uitslag
{
	font-size:min(34px, 8.4vw) !important;
}


/* ── 31 · Uitslagscherm: hele inhoud scrollt, voet blijft staan (r16) ────
   De LOSSES/REWARDS-lijst kreeg soms maar een sliver — nu scrollt de hele
   kolom boven de knoppen en plakt de voet (hint + REVENGE/CLAIM) onderaan.  */

#pvpResult .pvp_result_inhoud
{
	overflow-y:auto;
	/* overflow-y:auto maakt overflow-x impliciet óók auto — een paar px
	   te brede inhoud gaf daardoor een zijwaarts panbaar victory-scherm */
	overflow-x:hidden;
	scrollbar-width:none;
	height:100%;
}
#pvpResult .pvp_result_inhoud::-webkit-scrollbar { width:0; height:0; }
.pvp_uitslag_blok { flex:0 0 auto; }
.pvp_uitslag_lijst
{
	overflow:visible;
	flex:0 0 auto;
	min-height:auto;
}
.pvp_uitslag_voet
{
	position:sticky;
	bottom:0;
	z-index:5;
	margin-top:auto;
	background:linear-gradient(to top, #0b0318 62%, rgba(11, 3, 24, 0) 100%);
	padding-bottom:calc(env(safe-area-inset-bottom) + 6px);
}


/* ── 32 · Opgepoetst wachtscherm (r17) ─────────────────────────────────── */

.pvp_wachten_scherm { justify-content:center; gap:18px; }
.pvp_wacht_spinner
{
	display:flex;
	gap:8px;
	justify-content:center;
	padding:6px 0 2px;
}
.pvp_wacht_spinner i
{
	width:12px;
	height:12px;
	border-radius:50%;
	background:#FF9800;
	box-shadow:0 0 12px #ff980088;
	animation:pvpWachtStuiter 1.2s ease-in-out infinite;
}
.pvp_wacht_spinner i:nth-child(2) { animation-delay:.15s; background:#FFC46B; }
.pvp_wacht_spinner i:nth-child(3) { animation-delay:.3s; background:#9C27B0; box-shadow:0 0 12px #9c27b088; }
@keyframes pvpWachtStuiter
{
	0%, 100% { transform:translateY(0) scale(1); opacity:.6; }
	50%      { transform:translateY(-10px) scale(1.15); opacity:1; }
}
.pvp_wacht_sub
{
	font-family:p;
	font-size:11px;
	color:#ffffff8a;
	letter-spacing:.5px;
	margin-top:-10px;
}
.pvp_result_speler.wachtend { opacity:.85; }
.pvp_wacht_dots { display:inline-flex; gap:4px; align-items:center; height:22px; }
.pvp_wacht_dots i
{
	width:6px;
	height:6px;
	border-radius:50%;
	background:#ffffff8a;
	animation:pvpWachtStuiter 1.2s ease-in-out infinite;
}
.pvp_wacht_dots i:nth-child(2) { animation-delay:.15s; }
.pvp_wacht_dots i:nth-child(3) { animation-delay:.3s; }
.pvp_wacht_shimmer
{
	width:min(300px, 70vw);
	height:6px;
	border-radius:4px;
	background:#ffffff14;
	overflow:hidden;
	position:relative;
}
.pvp_wacht_shimmer i
{
	position:absolute;
	top:0;
	left:-40%;
	width:40%;
	height:100%;
	border-radius:4px;
	background:linear-gradient(90deg, transparent, #FF9800, transparent);
	animation:pvpWachtSchuif 1.6s ease-in-out infinite;
}
@keyframes pvpWachtSchuif
{
	0%   { left:-40%; }
	100% { left:100%; }
}


/* ── 33 · Moment-scherm 04/08 (r18) ────────────────────────────────────── */

/* sub-pips ALTIJD horizontaal gecentreerd — een generieke span-regel dwong
   ze op dit scherm naar display:block (verticale stapel) */
.pvpRankScherm .pvp_sub_pips,
#pvpResult .pvp_sub_pips
{
	display:flex !important;
	flex-direction:row !important;
	justify-content:center;
}
/* inzet-tegels: even breed over de volle rij */
.pvp_moment_inzetten
{
	gap:10px;
	margin-top:6px;
	width:min(420px, calc(100vw - 32px));
}
.pvp_moment_inzetten .pvp_result_speler
{
	flex:1;
	max-width:none;
}


/* ── 34 · Duel-summary-verbouwing (r19): payout & rank, klassieke detail-tabs,
      volwaardige social-laag, sticky PLAY PVP-voet ───────────────────────── */

/* PAYOUT & RANK — één kaart per kant, de settle-JSON van die speler */
.pvp_sum_titel
{
	margin:14px 0 8px;
	text-align:center;
	font-size:15px;
}
.pvp_sum_kaarten
{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	width:100%;
}
@media (max-width:380px) { .pvp_sum_kaarten { grid-template-columns:1fr; } }
.pvp_sum_kaart
{
	background:rgba(255,255,255,.045);
	border-radius:12px;
	padding:10px;
	min-width:0;
}
.pvp_sum_kaart.winnaar   { border:1px solid rgba(76,175,80,.35); }
.pvp_sum_kaart.verliezer { border:1px solid rgba(243,67,54,.3); }
.pvp_sum_kaart.gelijk    { border:1px solid rgba(255,196,107,.25); }
.pvp_sum_kop
{
	display:flex;
	align-items:center;
	gap:7px;
	margin-bottom:8px;
	min-width:0;
}
.pvp_sum_kop .pvp_avatar.klein { flex:0 0 auto; }
.pvp_sum_kop b { font-size:13px; min-width:0; }
.pvp_sum_kop small { margin-left:auto; opacity:.55; font-size:10px; text-transform:uppercase; letter-spacing:1px; flex:0 0 auto; }
.pvp_sum_rank
{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:6px;
	margin-bottom:8px;
}
.pvp_sum_rank_stap { display:flex; align-items:center; gap:4px; min-width:0; }
/* scoped reset: .section_league img-regels mogen deze trofeeën nooit oprekken */
.pvp_sum_rank_stap img { width:30px !important; height:30px !important; object-fit:contain; }
.pvp_sum_rank_stap small { font-size:10px; text-transform:capitalize; white-space:nowrap; }
.pvp_sum_pijl { width:16px; height:16px; color:#8BC34A; flex:0 0 auto; }
.pvp_sum_pijl.omlaag { color:#ff7a70; transform:rotate(90deg); }
.pvp_sum_blokjes { display:inline-flex; gap:3px; margin-left:2px; }
.pvp_sum_blokjes i
{
	width:10px;
	height:10px;
	border-radius:2px;
	background:rgba(255,255,255,.14);
	display:block;
}
.pvp_sum_blokjes i.vol { background:#8BC34A; }
.pvp_sum_chip
{
	font-size:9px;
	letter-spacing:1px;
	padding:2px 7px;
	border-radius:20px;
	text-transform:uppercase;
}
.pvp_sum_chip.op { background:rgba(76,175,80,.2); color:#8BC34A; }
.pvp_sum_chip.af { background:rgba(243,67,54,.18); color:#ff7a70; }
.pvp_sum_rijen { display:flex; flex-direction:column; gap:5px; }
.pvp_sum_rij
{
	display:flex;
	align-items:center;
	gap:7px;
	font-size:11px;
}
.pvp_sum_rij img { width:16px !important; height:16px !important; object-fit:contain; flex:0 0 auto; }
.pvp_sum_rij span { flex:1; min-width:0; opacity:.75; text-align:left; display:inline; }
.pvp_sum_rij b { flex:0 0 auto; font-size:12px; }
.pvp_sum_rij b.op { color:#8BC34A; }
.pvp_sum_rij b.af { color:#ff7a70; }

/* detail-tabs: klassieke game_stat-trio + per-tap-lijst op volle breedte */
.gamepop [tabcontent] .pvp_stats_rij { width:100%; }
.gamepop .pvp_stats_rij .game_stat { width:100%; }
.pvp_elim_rij
{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:center;
	width:100%;
}
/* de klassieke tegenhanger is #taps_overview_wrapper (id, dáár maar 1x op een
   scherm) — hier per kant een class; de [tabcontent]-pane zelf scrollt al,
   dus géén genest scroll-venster */
.pvp_taps_wrapper { width:100%; }

/* social-tab: kant-blokken op volle breedte, replay-knop nooit uitgerekt */
.pvp_social_kant
{
	width:100%;
	margin-bottom:16px;
	padding-bottom:14px;
	border-bottom:1px solid rgba(255,255,255,.07);
}
.pvp_social_kant:last-child { border-bottom:none; margin-bottom:0; }
.pvp_social_kant .pvp_social_rij { width:100%; box-sizing:border-box; }
.pvp_social_kant .social-actions { justify-content:flex-start; }

/* voet met PLAY PVP / PLAY AGAIN: laatste flex-kind van de gamepop (die is
   een vaste flex-kolom; de tab-panes scrollen) — dus altijd onderaan in beeld */
.pvp_summary_voet
{
	flex:0 0 auto;
	padding:8px 0 2px;
	display:flex;
	justify-content:center;
}
.pvp_summary_voet .btn-orange
{
	min-width:min(300px, 78vw) !important;
	text-align:center;
	font-size:16px;
}
/* grafiek-pane: het canvas heeft een echte hoogte nodig in de flex-kolom */
.pvp_duel_grafiek
{
	height:min(46vh, 420px);
	width:100%;
	position:relative;
}
/* vijf tab-knoppen op 393px (alleen déze summary — het klassieke scherm
   heeft er vier en houdt zijn eigen maat): compacte labels, geen overloop */
[dom-removable="pvpMatchSummary"] .tabs-full .tab-full-btn
{
	font-size:11px;
	padding-left:2px;
	padding-right:2px;
	position:relative;
}
[dom-removable="pvpMatchSummary"] .tab-full-btn .badge-alert
{
	position:absolute;
	right:0;
	top:-4px;
	transform:scale(.85);
}
/* .tabs mag de voet nooit uit de gamepop duwen: neem de rest-hoogte, de voet
   (laatste flex-kind) houdt zijn eigen ruimte */
[dom-removable="pvpMatchSummary"] .tabs
{
	flex:1 1 auto;
	min-height:0;
	height:auto;
	max-height:none;
}

/* duel-picker: stake-/win-pays-infovlakken — royaal tikdoel zonder layout-
   verschuiving, het hele blok opent de uitleg (nooit per ongeluk een duel) */
.pvp_info_vlak
{
	padding:6px 8px;
	margin:-6px -8px;
	border-radius:10px;
	cursor:pointer;
}
.pvp_info_vlak:active { background:rgba(255,255,255,.08); }


/* ── 35 · Season-bank-kluisfoto (r20): overal waar de bank verschijnt ──── */
.pvp_kluis_img
{
	border-radius:50%;
	object-fit:contain;
	vertical-align:middle;
	flex:0 0 auto;
	margin-right:5px;
}
/* chips en widget zijn flex met eigen gap — daar geen extra marge */
.pvp_bank_chip .pvp_kluis_img,
.pvp_bank_widget .pvp_kluis_img { margin-right:0; }
/* het widget-doosje had een vierkant kadertje om de lijn-glyph; de foto is
   zelf al een rond badge-beeld, dus kader weg en iets groter tonen */
.pvp_bank_widget .kluis
{
	background:none;
	border:none;
	border-radius:50%;
}
.pvp_bank_widget .kluis .pvp_kluis_img { width:26px !important; height:26px !important; }


/* ── 36 · Championship-herindeling: bank-knop in de kop, brede cursor,
   sectie-tabs (personal/friends/duels) en de bank-drawer ─────────────── */

/* seizoensbank-knop rechtsboven — giftway-knop-idioom, maar half zo breed
   (de kop-h3 staat ernaast) dus compactere titel/afbeelding */
.pvp_bank_btn
{
	width: 100%;
	position:relative;
}
.pvp_bank_btn [pvp-champ-bank]
{
	font-family:'headers';
	font-size:12px;
	line-height:1.1;
	color:#FFC46B;
	text-align:left;
	text-shadow:0 1px black;
}
.pvp_bank_btn > .align-center > .align-center{
	justify-content:flex-start !important
}
/* seizoens-cursor: onder de kop, volle breedte */
.pvp_seizoen_cursor.breed
{
	max-width:none;
	width: calc(100% - 2rem);
	/* margin:0 8px 6px; */
	box-sizing:border-box;
	margin: 1rem;
}
.pvp_live_balk.in_cursor:before{
	display:none
}
/* de bank-drawer leent de eiland-kaart-vormgeving; de kluisfoto in de
   gamepop-header is rond en de reward-pillen zijn puur informatief */
#seasonBankCard .propertyUpgrade__resource.resource__available,
#weeklyBankCard .propertyUpgrade__resource.resource__available { cursor:default; }
#seasonBankCard .gamepop_header > .flex-col > img,
#weeklyBankCard .gamepop_header > .flex-col > img {/* border-radius:50%; */}
#seasonBankCard .btn-orange,
#weeklyBankCard .btn-orange { margin:14px 20px 20px; display:block; text-align:center; }

/* property-rijen + stappenbalk in de bank-drawer: zelfde beeldtaal als de
   eiland-kaart — de CubeRunnerz-regels zijn id-gebonden (#itemPicker /
   #energyIslandCard), dus hier het #seasonBankCard-equivalent */
#seasonBankCard .properties_container,
#weeklyBankCard .properties_container
{
	width:100%;
	font-size:16px;
	grid-template-columns:1fr 1fr;
	text-align:left;
	gap:0 30px;
	padding:25px;
	box-sizing:border-box;
	display:grid;
}
#seasonBankCard .properties_container div,
#weeklyBankCard .properties_container div
{
	margin:5px 0;
	gap:5px;
}
#seasonBankCard .properties_container div div div.property_step,
#weeklyBankCard .properties_container div div div.property_step
{
	flex:1 1 0;
	min-width:0;
	height:5px;
	background:#fff6;
}
#seasonBankCard .property > .flex-row:last-child,
#weeklyBankCard .property > .flex-row:last-child { gap:2px; }
#seasonBankCard .properties_container div div div.active.property_step,
#weeklyBankCard .properties_container div div div.active.property_step
{
	background:linear-gradient(to bottom, #ffd700 0%, rgb(255 119 0) 100%);
}

/* ── 37 · Cursor + live-wachtrij in één blok, tabs boven de sectie ─────── */
/* de brede cursor staat nu bovenin de scrollbare sectie */
.pvp_seizoen_cursor.breed {/* margin:8px auto 4px; */}
.pvp_seizoen_cursor.breed .league-day-cursor h1.seizoen { font-size:20px; letter-spacing:1px; }
/* halve-breedte-scheiding tussen cursor en wachtrij-regel */
.pvp_cursor_hr
{
	width:50%;
	border:none;
	border-top:1px solid #ffffff2e;
	margin:8px auto;
}
/* wachtrij-/countdown-regel zonder eigen doos — hij leent de cursor-
   wrapper-box; gecentreerd, met de groene stip vlak vóór de titel */
.pvp_live_balk.in_cursor
{
	margin:0;
	background:none;
	border:none;
	border-radius:0;
	padding:0;
	width:100%;
	box-sizing:border-box;
	flex-direction:column;
	align-items:center;
	gap:3px;
	text-align:center;
}
.pvp_live_balk.in_cursor .wachtrij_titel
{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-width:0;
}
.pvp_live_balk.in_cursor small { text-align:center; }
/* countdown-klok in het cursor-blok: compact i.p.v. de 20%-kolommen */
.pvp_seizoen_cursor .cd_clock
{
	width:auto;
	margin:0;
	gap:8px;
}
.pvp_seizoen_cursor .cd_clock > div
{
	min-width:0;
	max-width:none;
	display:flex;
	align-items:baseline;
	gap:2px;
}
.pvp_seizoen_cursor .cd_clock h1 { font-size:22px !important; }

/* stripes-wrapper uit de flow (zelfde fix als #energyIslandCard): anders
   rekt de radial_stripes-div de header op én bloedt hij buiten de header,
   waardoor de claim-knop op lage schermen onbereikbaar werd */
#seasonBankCard .gamepop_header,
#weeklyBankCard .gamepop_header
{
	position:relative;
	overflow:hidden;
}
#seasonBankCard .gamepop_header .overflow_hidden,
#weeklyBankCard .gamepop_header .overflow_hidden
{
	position:absolute;
	inset:0;
	overflow:hidden;
	pointer-events:none;
}

/* ── 38 · Duel-onderhandeling: één tegenvoorstel, daarna accept/decline ──
   .vast legt de chips vast; het oude voorstel blijft doorgestreept zichtbaar
   naast het tegenvoorstel. */
.pvp_invite_metrics.vast .pvp_invite_metric { pointer-events:none; }
.pvp_invite_metrics.vast .pvp_invite_metric:not(.aan):not(.gestreept) { opacity:.3; }
.pvp_invite_metric.gestreept { opacity:.6; border-color:#ff5a5a66; }
.pvp_invite_metric.gestreept small { text-decoration:line-through; color:#ff9d95; }
.pvp_invite_hint s { color:#ff9d95; }
.pvp_invite_hint b { color:#FFC46B; }

/* ============================================================
   FRIENDLY DUEL — PROGRESS-BOARD 21a + VIERINGSSLIDES 21b-21f
   (design/PvP Friendly Duel). Het board hergebruikt de bestaande
   resultaatklassen (.pvp_result_rij / .pvp_result_speler /
   .pvp_bank_kaart_rij); hier staan alleen de friendly-toevoegingen:
   bewogen-milestone-rijen met twee-toon-balken, de rivaliteitsstrip
   en de voet, plus de volledige vieringsslide.
   ============================================================ */
.h2h_board { overflow-y:auto; overflow-x:hidden; }
.h2h_board__label
{
	display:block;
	text-align:center;
	font-family:p;
	font-size:11px;
	letter-spacing:2px;
	color:#ffffff8a;
	text-transform:uppercase;
}
.h2h_board__kop
{
	text-align:center;
	font-family:headers;
	font-size:44px;
	margin:2px 0 10px;
}
.h2h_board__resultkop { margin-top:14px; }
.h2h_board__resultkop h3 { margin:0; font-family:headers; font-size:17px; }
.h2h_board__resultkop small { font-family:p; font-size:10px; color:#ffffff8a; }
.h2h_board .pvp_bank_kaart_rij b.af { color:#ff5a5a; }
.h2h_board .pvp_bank_kaart_rij b.xp { color:#9f61ec; }
.h2h_board__mkop { display:flex; align-items:center; gap:8px; margin-top:14px; }
.h2h_board__mkop img { width:20px; height:20px; border-radius:50%; object-fit:cover; }
.h2h_board__mkop small { display:block; font-family:p; font-size:9px; letter-spacing:1.5px; color:#ffffff70; }
.h2h_board__mkop small.opacity-05 { letter-spacing:0; font-size:9.5px; }
.h2h_bewogen
{
	display:flex;
	align-items:center;
	gap:11px;
	padding:12px 0;
	border-bottom:1px solid #ffffff17;
}
.h2h_bewogen__mid { flex:1; min-width:0; }
.h2h_bewogen__mid b { font-family:headers; font-size:12px; }
.h2h_bewogen__mid b small { font-family:headers; font-size:8.5px; letter-spacing:.5px; }
.h2h_tweetoon
{
	position:relative;
	display:block;
	height:7px;
	border-radius:4px;
	background:#00000073;
	overflow:hidden;
	margin-top:6px;
}
.h2h_tweetoon i { position:absolute; top:0; bottom:0; display:block; }
.h2h_board__strip
{
	display:flex;
	align-items:center;
	gap:9px;
	background:#170830;
	border:1px solid #ffffff26;
	border-radius:12px;
	padding:10px 12px;
	margin-top:12px;
}
.h2h_board__strip span { font-family:p; font-size:10px; color:#ffffffa8; flex:none; }
.h2h_board__strip .h2h_rivbalk_rij { flex:1; margin-top:0; }
.h2h_board__voet { display:flex; gap:8px; margin-top:14px; }
.h2h_board__voet .btn_action { flex:1; height:44px; display:flex; align-items:center; justify-content:center; }

/* -- vieringsslide --------------------------------------------- */
#h2hViering
{
	position:fixed;
	inset:0;
	z-index:400;
	/* volledig dekkend: op f2-alpha scheen de dashboard-tekst door de slide */
	background:#0b0318;
	opacity:0;
	transition:opacity .35s ease;
	overflow-y:auto;
	overflow-x:hidden;
}
#h2hViering.active { opacity:1; }
.h2h_viering
{
	min-height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:9px;
	padding:28px 22px calc(24px + env(safe-area-inset-bottom));
	text-align:center;
}
.h2h_viering__que { font-family:p; font-size:9px; letter-spacing:1.5px; color:#ffffff8a; }
.h2h_viering__pips { display:flex; gap:5px; }
.h2h_viering__pips i { width:6px; height:6px; border-radius:3px; background:#ffffff33; display:block; }
.h2h_viering__pips i.is-actief { width:16px; background:#FFC107; }
.h2h_viering__pips i.is-klaar { background:#FFC107; }
.h2h_viering__tags { display:flex; gap:6px; }
.h2h_viering__kop { font-family:headers; font-size:24px; margin:2px 0 4px; }
.h2h_viering__badge
{
	position:relative;
	width:132px;
	height:132px;
	border-radius:36px;
	border:2px solid #00000080;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.h2h_viering__naam { font-family:headers; font-size:21px; margin:4px 0 0; }
.h2h_viering__uitleg { font-family:p; font-size:11.5px; color:#ffffffa8; margin:0; max-width:280px; }
.h2h_viering__cap { font-family:p; font-size:9.5px; color:#ffffff8a; }
.h2h_race_avatars { display:flex; align-items:center; gap:10px; }
.h2h_race_avatars img
{
	width:40px;
	height:40px;
	border-radius:50%;
	border:2px solid #ff9c3d;
	object-fit:cover;
}
.h2h_race_avatars img.is-hun
{
	width:34px;
	height:34px;
	opacity:.5;
	filter:grayscale(1);
	border-color:#ffffff40;
}
.h2h_race_avatars b { font-family:headers; font-size:11px; color:#ff9c3d; }
.h2h_viering__yours { text-align:left; }
.h2h_viering__yours b { display:block; font-family:headers; font-size:10px; color:#7CFC00; }
.h2h_viering__yours small { font-family:p; font-size:9.5px; color:#ffffff8a; }
.h2h_viering .h2h_pillen { width:100%; max-width:320px; }
.h2h_viering .h2h_board__voet { width:100%; max-width:320px; margin-top:8px; }
/* board-rijen: vol breed + links uitgelijnd binnen het (gecentreerde)
   resultaatscherm — anders klonteren naam en status in het midden */
.h2h_bewogen, .h2h_board__mkop, .h2h_board__strip, .h2h_board__resultkop { width:100%; text-align:left; }
.h2h_bewogen__mid > .flex-row { display:flex; justify-content:space-between; align-items:center; }

/* -- visuele pass 21a-f t.o.v. het canvas ------------------------------ */
/* .pvp_result_inhoud h1 (0-1-1) versloeg .h2h_board__kop (0-1-0): de
   VICTORY!-kop kromp — zelfde specificiteitsklasse als de section_league-
   img-les. Ook: de bankregel-labels erfden de caps-only font3. */
.pvp_result_inhoud .h2h_board__kop { font-size:44px; }
.h2h_board .pvp_bank_kaart_rij span { font-family:p; font-size:12px; opacity:.7; }
.h2h_board__resultkop small, .h2h_board__strip span { font-family:p; }
.h2h_board .pvp_result_speler .pvp_avatar img { border:2px solid #FF9800; border-radius:50%; }
.h2h_board .pvp_result_speler.winnaar .pvp_avatar img { border-color:#4CAF50; }
.h2h_bewogen { padding:9px 0; }
.h2h_bewogen__voet
{
	display:flex;
	justify-content:space-between;
	font-family:p;
	font-size:9px;
	color:#ffffff8a;
	margin-top:4px;
}
.h2h_bewogen__voet b { font-family:headers; font-size:9.5px; color:#ffffffcc; }
.h2h_board__strip span { flex:1; min-width:0; }
.h2h_board__strip .h2h_rivbalk_rij { flex:none; width:120px; margin-top:0; }
.h2h_board__mkop { margin-top:10px; }
.h2h_board__strip { margin-top:10px; }
.h2h_board__voet { margin-top:10px; }
/* vieringsslide: canvas-achtergrond + scrim, pips op de queue-regel,
   voet tegen de onderrand, glans op de badge (design 21b-f) */
#h2hViering { background:#0b0318 url(/public/img/cubelegend/cbg2.jpeg) center/cover no-repeat; }
#h2hViering::before { content:''; position:fixed; inset:0; background:#000000c9; }
.h2h_viering { position:relative; z-index:1; justify-content:flex-start; }
.h2h_viering__querij { display:flex; align-items:center; gap:8px; margin-top:7vh; }
.h2h_viering__badge::before
{
	content:'';
	position:absolute;
	inset:0;
	background:linear-gradient(135deg, #ffffff45, transparent 48%);
	pointer-events:none;
}
.h2h_viering .h2h_board__voet { margin-top:auto; padding-top:14px; }
.h2h_viering__next
{
	width:100%;
	max-width:340px;
	display:flex;
	align-items:center;
	gap:9px;
	background:#170830;
	border:1px solid #ffffff26;
	border-radius:12px;
	padding:9px 11px;
	text-align:left;
}
.h2h_viering__next b { font-family:headers; font-size:10.5px; color:#ffffffb5; flex:none; }
.h2h_viering__next b img { width:11px; height:11px; vertical-align:-2px; }
.h2h_viering__next .h2h_cue__balk { height:6px; }
.h2h_viering__next small { font-family:headers; font-size:9px; flex:none; }
.h2h_race_avatars { position:relative; }
.h2h_avatar_tick
{
	position:absolute;
	left:26px;
	bottom:-2px;
	width:16px;
	height:16px;
	border-radius:50%;
	background:#0b0318;
	display:flex;
	align-items:center;
	justify-content:center;
}
/* font3 is caps-only en globaal — voetregels expliciet op 'p' zetten */
.h2h_bewogen__voet small { font-family:p; }
.h2h_board__strip .h2h_tegel { flex:none; }
.h2h_board__strip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.h2h_board__strip .h2h_rivbalk_rij { width:96px; }
.h2h_board__voet .btn_action { white-space:nowrap; font-size:12px; }
.h2h_viering { box-sizing:border-box; }
/* xp/leven-resultaatregels op het friendly-board even breed als de
   milestone-rijen eronder (feedbackronde) */
.h2h_board .pvp_bank_kaart_rij { width:100%; box-sizing:border-box; }

/* ── verbindingspil (rechtsboven in het spelscherm) ──────────────────────────
   De actuele ping, gekleurd naar de route van de tegenstander-HUD:
   groen = direct P2P-datachannel, oranje = via de TURN-relay,
   rood = de hudSync-terugval over de server. Verschijnt pas zodra de route
   bekend is; z-index boven <game> (2) maar onder de pauze/einde-overlays. */
.pvp_net_pil
{
	position:fixed;
	top:calc(env(safe-area-inset-top, 0px) + 4rem + 8px);
	right:10px;
	z-index:6;
	display:none;
	align-items:center;
	gap:5px;
	padding:3px 9px;
	border-radius:999px;
	background:#0a0518cc;
	border:1px solid #ffffff1f;
	font-family:'headers', sans-serif;
	font-size:11px;
	letter-spacing:.04em;
	color:#fff;
	pointer-events:none;
}
.pvp_net_pil.is-zichtbaar { display:inline-flex; }
.pvp_net_pil i
{
	width:7px;
	height:7px;
	border-radius:50%;
	background:#9aa0b5;
}
.pvp_net_pil.is-p2p    { color:#7dffab; }
.pvp_net_pil.is-p2p i  { background:#35e977; box-shadow:0 0 6px #35e97788; }
.pvp_net_pil.is-turn   { color:#ffcf8a; }
.pvp_net_pil.is-turn i { background:#ffa53d; box-shadow:0 0 6px #ffa53d88; }
.pvp_net_pil.is-relay   { color:#ff9d9d; }
.pvp_net_pil.is-relay i { background:#ff5d5d; box-shadow:0 0 6px #ff5d5d88; }

/* chatkop: DUEL met de ms-pil eronder (zelfde kleurtaal; de chat zet
   hetzelfde P2P/TURN-kanaal op als een duel zou doen, dus de pil is meteen
   een voorproefje van de matchkwaliteit). De kolom neemt de margin-left:auto
   van de knop over; binnen de kolom is de pil gewoon in de flow. */
.chat_kop__duelkolom
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	margin-left:auto;
}
.chat_net_pil
{
	position:static;
	top:auto;
	right:auto;
	z-index:auto;
}

/* friendly-zoekscherm: de mascotte met zijn vrienden i.p.v. de
   eligible-trofeeën (er valt niets te matchmaken) */
searchingOpponent .info img.zoek_mascotte
{
	width:170px;
	height:auto;
	transform:translateX(100vw) rotate(0);
	filter:drop-shadow(0 6px 20px #00000085);
}
searchingOpponent .info.active img.zoek_mascotte
{
	transform:translateX(0) rotate(0);
}

/* ── post-friendly-duel (device-feedback) ───────────────────────────────────
   1. De CTA-voet plakt onderaan de scrollbox (sticky) met een uitloopvlak
      en grotere knoppen — nooit meer scrollen om REMATCH/OPEN CHAT te raken.
   2. De 7-van-75-strip kreeg zijn zijranden en padding terug: width:100% +
      border/padding zónder border-box duwde de zijkanten precies de
      overflow-x:hidden-clip van de scrollbox in. */
.h2h_bewogen, .h2h_board__mkop, .h2h_board__strip, .h2h_board__resultkop { box-sizing:border-box; }
.h2h_board .h2h_board__voet
{
	position:sticky;
	bottom:0;
	z-index:3;
	width:100%;
	box-sizing:border-box;
	padding:16px 0 calc(12px + env(safe-area-inset-bottom, 0px));
	background:linear-gradient(180deg, #13082400 0%, #130824 45%);
}
.h2h_board .h2h_board__voet .btn_action { height:56px; font-size:15px; }
/* de vieringsslides delen de voet-klasse maar zijn geen scrollbox: daar
   blijft hij gewoon in de flow, zonder uitloopvlak */
.h2h_viering .h2h_board__voet { position:static; background:none; padding:0; }

/* ── friendly-lobby (design-mock-ronde) ─────────────────────────────────────
   titelrij, IN REACH-paneel, twee-rijen-inzetblok en de even-brede ready-
   kanten met ellipsis voor lange namen. */
.pvp_opponent_found.vriend { color:#7CFC00; }
.pvp_opponent_found.vriend i { background:#7CFC00; box-shadow:0 0 8px #7CFC00; }
.pvp_titelrij
{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	width:100%;
}
.pvp_titelrij .pvp_metric { margin:0; }
.pvp_friendly_chip
{
	font-family:'headers', sans-serif;
	font-size:11px;
	color:#7CFC00;
	border:1px solid #7CFC0059;
	border-radius:999px;
	padding:4px 10px;
}
.pvp_reach_paneel
{
	width:100%;
	box-sizing:border-box;
	background:#ffffff08;
	border:1px solid #FFC1073d;
	border-radius:12px;
	padding:12px;
	display:flex;
	flex-direction:column;
	gap:10px;
	text-align:left;
}
.pvp_reach_kop { display:flex; align-items:center; justify-content:space-between; }
.pvp_reach_kop b { font-family:'headers', sans-serif; font-size:12px; color:#FFC107; letter-spacing:.5px; }
.pvp_reach_chip
{
	font-family:'headers', sans-serif;
	font-style:normal;
	font-size:10px;
	color:#FFC107;
	border:1px solid #FFC10759;
	border-radius:999px;
	padding:3px 8px;
}
.pvp_reach_rij { display:flex; gap:10px; align-items:flex-start; }
.pvp_reach_rij .h2h_tegel_wrap, .pvp_reach_rij .h2h_tegel { flex:none; }
.pvp_reach_mid { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.pvp_reach_koprij { display:flex; align-items:center; gap:7px; }
.pvp_reach_koprij b { font-family:'headers', sans-serif; font-size:13px; }
.pvp_reach_tier
{
	font-family:'headers', sans-serif;
	font-style:normal;
	font-size:8.5px;
	color:#63b7ff;
	border:1px solid #63b7ff59;
	border-radius:999px;
	padding:2px 7px;
}
.pvp_reach_telling { margin-left:auto; font-family:'headers', sans-serif; font-size:11px; color:#ffffffcc; }
.pvp_reach_mid .pvp_reach_balk
{
	/* dubbele klasse-specificiteit: profile.css laadt ná pvp.css en zijn
	   .h2h_cue__balk-basis (flex:1 = basis 0) drukte de balk in deze kolom
	   anders plat naar 0px hoogte */
	flex:none;
	display:block;
	width:100%;
	height:6px;
	box-sizing:border-box;
}
.pvp_reach_copy { font-family:p; font-size:10.5px; color:#ffffff8a; }
.pvp_reach_voet
{
	display:flex;
	align-items:center;
	gap:8px;
	font-family:p;
	font-size:9.5px;
	color:#ffffff73;
	border-top:1px solid #ffffff14;
	padding-top:9px;
}
.pvp_reach_voet b { margin-left:auto; font-family:'headers', sans-serif; font-size:10px; color:#FFC107; white-space:nowrap; }
.pvp_friendly_bank { display:flex; flex-direction:column; gap:8px; }
.pvp_friendly_bank__rij { display:flex; gap:8px; width:100%; }
.pvp_friendly_bank__rij span
{
	flex:1 1 0;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	background:#00000040;
	border:1px solid #ffffff1f;
	border-radius:10px;
	padding:10px;
	font-family:'headers', sans-serif;
	font-size:13px;
	white-space:nowrap;
}
.pvp_friendly_bank__rij img { width:20px; height:20px; flex:none; }
.pvp_friendly_bank > small { font-family:p; font-size:10px; color:#ffffff8a; letter-spacing:1px; }
.pvp_ready_rij span.kant { flex:1 1 0; min-width:0; justify-content:center; }
.pvp_ready_rij span.kant em
{
	font-style:normal;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.pvp_ready_deler { flex:none; width:1px; height:14px; background:#ffffff22; }


/* ── 35 · Ranked celebrations (design/Ranked_Celebrations) ───────────────
   De blok-/divisie-/rank-vieringen op 03/07 en 04/08. Alles behalve de
   stofnevel en de confetti is CSS-transform/opacity: PvpCelebration zet per
   cue alleen klassen + een handvol inline waarden; de overgangen hier doen
   de rest. De tier-kleur reist mee als custom properties op .pvp_cel
   (--celK + alpha-varianten, gezet door renderCelebratie). Eigen keyframe-
   namen (pvpCel*) — pvpStralen bestaat al met een andere transform.       */

/* wortel: de lagen vullen het hele scherm, de shake-wrapper draagt de
   flex-kolom + padding die .newHighscore normaal zelf droeg               */
.newHighscore.pvpRankScherm.pvp_cel
{
	display:block;
	padding:0;
}
.pvp_cel_wash
{
	position:absolute;
	inset:0;
	z-index:2;
	pointer-events:none;
	opacity:0;
	transition:opacity .9s ease;
	background:radial-gradient(circle at 50% 34%, var(--celK99), transparent 62%),
		radial-gradient(circle at 50% 100%, var(--celWash2), transparent 58%);
}
.pvp_cel_dust_achter { position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; }
.pvp_cel_confetti    { position:absolute; inset:0; width:100%; height:100%; z-index:16; pointer-events:none; }
.pvp_cel_dust_voor   { position:absolute; inset:0; width:100%; height:100%; z-index:9; pointer-events:none; }
.pvp_cel_streaks
{
	display:none;
	position:absolute;
	left:50%;
	top:40%;
	z-index:17;
	pointer-events:none;
	border-radius:50%;
	transform:translate(-50%, -50%);
	-webkit-mask-image:radial-gradient(circle, #0000 26%, #000 52%, #0000 82%);
	mask-image:radial-gradient(circle, #0000 26%, #000 52%, #0000 82%);
}
.pvp_cel_streaks.n1
{
	display:block;
	width:380px;
	height:380px;
	animation:pvpCelStreak .7s cubic-bezier(.15, .8, .3, 1) forwards;
	background:repeating-conic-gradient(from 0deg, #ffffff00 0deg, #7CFC00cc 1.2deg, #ffffff00 11deg);
}
.pvp_cel.verlies .pvp_cel_streaks.n1
{
	background:repeating-conic-gradient(from 0deg, #ffffff00 0deg, #ff8f8fcc 1.2deg, #ffffff00 11deg);
}
.pvp_cel_streaks.n2
{
	display:block;
	width:520px;
	height:520px;
	animation:pvpCelStreak .95s cubic-bezier(.15, .8, .3, 1) forwards;
	background:repeating-conic-gradient(from 0deg, #ffffff00 0deg, #ffffffe6 1.2deg, #ffffff00 11deg);
}
.pvp_cel_dim
{
	position:absolute;
	inset:0;
	z-index:18;
	pointer-events:none;
	opacity:0;
	transition:opacity .7s ease;
	background:radial-gradient(circle at 50% 40%, transparent 22%, rgba(5, 2, 14, .82) 88%);
}
.pvp_cel_flash
{
	position:absolute;
	inset:0;
	z-index:22;
	pointer-events:none;
	opacity:0;
	mix-blend-mode:screen;
}
.pvp_cel_flash.aan { animation:pvpCelFlash .58s ease-out forwards; }

/* camera: zoom rond 50% 42%, shake als keyframe op de wrapper erin */
.pvp_cel_zoom
{
	position:absolute;
	inset:0;
	z-index:10;
	transform-origin:50% 42%;
	transition:transform .5s cubic-bezier(.2, .9, .2, 1);
}
.pvp_cel_shake
{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	box-sizing:border-box;
	padding:calc(58px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom));
}
.pvp_cel_shake.s1 { animation:pvpCelShake .34s ease-in-out; }
.pvp_cel_shake.s2 { animation:pvpCelShakeHard .42s ease-in-out; }

/* de twee schermen liggen op elkaar in het toneel: zo blijft de wegzakkende
   trofee zichtbaar terwijl het blokscherm van de nieuwe divisie opkomt     */
.pvp_cel_toneel
{
	position:relative;
	flex:1;
	min-height:0;
	width:100%;
}
.pvp_cel_scherm
{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	opacity:1;
	visibility:visible;
	transition:opacity .45s ease;
}
/* het verborgen scherm moet ECHT inert zijn: pointer-events:none op de laag
   werd door de eigen CTA (pointer-events:auto in .cel-chrome) weer AANgezet,
   en de onzichtbare moment-CONTINUE ving zo in fase 2 elke tik op de voet af
   (de gouden CONTINUE leek dood). visibility dekt óók de hit-test van de
   kinderen; het uitgestelde visibility-flipje houdt de crossfade intact. */
.pvp_cel.toon-moment .pvp_cel_blok,
.pvp_cel.toon-blok .pvp_cel_moment
{
	opacity:0;
	pointer-events:none;
	visibility:hidden;
	transition:opacity .45s ease, visibility 0s linear .45s;
}
.pvp_cel_ruimte { flex:1; }

/* ── meter: wrap + put + vulling, referentie-poses via inline transform ── */
.pvp_cel_meter_rij,
.pvp_cel_hero_meter_rij
{
	position:relative;
	width:min(340px, 84vw);
	height:34px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:none;
}
.pvp_cel_hero_meter_rij
{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	height:auto;
}
.pvp_cel .pvp_div_blokken.pvp_cel_meter
{
	position:relative;
	display:flex;
	gap:8px;
	width:min(340px, 84vw);
	opacity:0;
	transform:translateY(120px) scale(1.18);
	transition:transform .62s cubic-bezier(.2, .85, .2, 1), opacity .4s ease;
}
.pvp_cel_meter .pvp_div_blok
{
	position:relative;
	flex:1;
	height:24px;
	z-index:1;
	border:0;
	background:none;
	overflow:visible;
	transform:scale(1);
	transition:transform .32s cubic-bezier(.34, 1.7, .5, 1);
}
.pvp_cel_meter .pvp_div_blok.snap { z-index:3; transform:scale(1.13); }
.pvp_cel_put
{
	position:absolute;
	inset:0;
	border:1px solid #c19eff88;
	border-radius:7px;
	background:#0b0318b8;
	overflow:hidden;
	box-sizing:border-box;
	box-shadow:none;
	transition:box-shadow .3s ease;
}
.pvp_cel[data-fillmode="red"] .pvp_cel_put { border-color:#f3433699; }
.pvp_cel_meter .vulling
{
	display:block;
	height:100%;
	width:100%;
	transform-origin:left;
	transform:scaleX(0);
	background:linear-gradient(90deg, #6ee87c, #4CAF50);
	box-shadow:0 0 12px #4caf5088;
	transition:transform .4s cubic-bezier(.2, 1.35, .4, 1), background .3s ease;
}
.pvp_cel[data-fillmode="red"] .pvp_cel_meter .vulling
{
	background:linear-gradient(90deg, #ff7a6e, #f34336);
	box-shadow:0 0 12px #f3433688;
}
.pvp_cel[data-fillmode="white"] .pvp_cel_meter .vulling
{
	background:linear-gradient(90deg, #ffffff, #d9ffe6);
	box-shadow:0 0 12px #ffffffcc;
}
.pvp_cel.cel-blink .pvp_cel_meter .vulling.aan { animation:pvpCelBlink .5s ease-in-out infinite; }
.pvp_cel_meter .pvp_div_blok.snap .pvp_cel_put { box-shadow:0 0 26px #4caf5088, 0 0 8px #fff; }
.pvp_cel[data-fillmode="red"] .pvp_cel_meter .pvp_div_blok.snap .pvp_cel_put { box-shadow:0 0 26px #f3433688, 0 0 8px #fff; }
.pvp_cel[data-fillmode="white"] .pvp_cel_meter .pvp_div_blok.snap .pvp_cel_put { box-shadow:0 0 26px #ffffffcc, 0 0 8px #fff; }

/* snap-ring + sterretjes per blok (one-shots, herstart via klasse) */
.pvp_cel_ring
{
	display:none;
	position:absolute;
	left:50%;
	top:50%;
	width:44px;
	height:44px;
	border-radius:50%;
	border:3px solid #7CFC00;
	pointer-events:none;
}
.pvp_cel.verlies .pvp_cel_ring { border-color:#ff8f8f; }
.pvp_cel_ring.aan { display:block; animation:pvpCelRing .7s ease-out forwards; }
.pvp_cel_spark
{
	display:none;
	position:absolute;
	left:50%;
	top:50%;
	font-style:normal;
	letter-spacing:3px;
	font-size:11px;
	color:#fff;
	text-shadow:0 0 8px #fff;
	pointer-events:none;
}
.pvp_cel_spark.aan { display:block; animation:pvpCelSparkle 1.1s ease-out forwards; }

/* lichtsweep over de meter */
.pvp_cel_sweep
{
	display:none;
	position:absolute;
	top:-6px;
	bottom:-6px;
	left:0;
	width:42px;
	pointer-events:none;
	border-radius:8px;
	background:linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
}
.pvp_cel.cel-sweep .pvp_cel_sweep { display:block; animation:pvpCelSweep 1.15s linear infinite; }

/* ── heldenlaag (04/08) — vaste referentie-geometrie ───────────────────── */
.pvp_cel_hero
{
	position:relative;
	width:100%;
	height:352px;
	flex:none;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.pvp_cel_stralen
{
	position:absolute;
	left:50%;
	top:50%;
	width:300px;
	height:300px;
	border-radius:50%;
	pointer-events:none;
	z-index:3;
	opacity:0;
	transition:opacity .8s ease;
	transform:translate(-50%, -52%);
	animation:pvpCelStralen 9s linear infinite;
	-webkit-mask-image:radial-gradient(circle, #000 0%, #0000 70%);
	mask-image:radial-gradient(circle, #000 0%, #0000 70%);
	background:conic-gradient(var(--celStraal) 0deg, transparent 20deg, var(--celStraal) 40deg,
		transparent 60deg, var(--celStraal) 80deg, transparent 100deg, var(--celStraal) 120deg,
		transparent 140deg, var(--celStraal) 160deg, transparent 180deg, var(--celStraal) 200deg,
		transparent 220deg, var(--celStraal) 240deg, transparent 260deg, var(--celStraal) 280deg,
		transparent 300deg, var(--celStraal) 320deg, transparent 340deg, var(--celStraal) 360deg);
}
.pvp_cel.verlies .pvp_cel_stralen { animation-duration:26s; }
.pvp_cel_kolom
{
	position:absolute;
	left:50%;
	top:44%;
	width:190px;
	height:330px;
	z-index:4;
	pointer-events:none;
	transform:translate(-50%, -50%);
	opacity:0;
	transition:opacity .8s ease;
	-webkit-mask-image:linear-gradient(#0000, #000 34%, #000 62%, #0000);
	mask-image:linear-gradient(#0000, #000 34%, #000 62%, #0000);
	background:radial-gradient(ellipse 46% 52% at 50% 50%, var(--celKb3), var(--celK3d) 52%, transparent 74%);
}
.pvp_cel.cel-onthuld .pvp_cel_kolom { opacity:.55; animation:pvpCelKolom 4.2s ease-in-out infinite; }
.pvp_cel_heroring
{
	display:none;
	position:absolute;
	left:50%;
	top:44%;
	width:150px;
	height:150px;
	border-radius:50%;
	border:4px solid var(--celK);
	box-shadow:0 0 40px var(--celK);
	z-index:8;
	pointer-events:none;
}
.pvp_cel_heroring.aan { display:block; animation:pvpCelRingBig .95s ease-out forwards; }
.pvp_cel_core
{
	position:absolute;
	left:50%;
	top:50%;
	width:120px;
	height:120px;
	border-radius:50%;
	pointer-events:none;
	z-index:9;
	background:radial-gradient(circle, #ffffff, var(--celKcc) 38%, transparent 70%);
	transform:translate(-50%, -50%) scale(.05);
	opacity:0;
	transition:transform .55s cubic-bezier(.2, .9, .2, 1), opacity .55s ease;
}
.pvp_cel_core.n1 { transform:translate(-50%, -50%) scale(.55); opacity:.95; }
.pvp_cel_core.n2 { transform:translate(-50%, -50%) scale(2.4); opacity:0; }

/* oude + nieuwe trofee: swap op de onthulling */
/* img-selector erbij: CubeRunnerz dwingt .newHighscore img naar 50vw en zou
   de vaste 200px van het ontwerp anders per toeval (390px-frame) benaderen */
.pvp_cel img.pvp_cel_trofee_oud
{
	position:absolute;
	left:50%;
	top:44%;
	width:200px;
	z-index:6;
	pointer-events:none;
	filter:drop-shadow(0 8px 26px #000000aa);
	transition:transform .7s cubic-bezier(.3, .9, .2, 1), opacity .55s ease, filter .6s ease;
	opacity:0;
	transform:translate(-50%, -50%) scale(.62);
}
.pvp_cel img.pvp_cel_trofee_oud.in   { opacity:1; transform:translate(-50%, -50%) scale(1); }
.pvp_cel img.pvp_cel_trofee_oud.uit  { opacity:0; transform:translate(-50%, -50%) scale(1.85); filter:drop-shadow(0 8px 26px #000000aa) blur(16px); }
.pvp_cel img.pvp_cel_trofee_oud.neer { opacity:0; transform:translate(-50%, -50%) translateY(90px) scale(.62); filter:drop-shadow(0 8px 26px #000000aa) saturate(.25); }
.pvp_cel img.pvp_cel_trofee_nieuw
{
	position:absolute;
	left:50%;
	top:44%;
	width:200px;
	z-index:7;
	pointer-events:none;
	filter:drop-shadow(0 8px 26px #000000aa) drop-shadow(0 0 26px var(--celKcc));
	transition:transform .9s cubic-bezier(.34, 1.56, .64, 1), opacity .5s ease;
	opacity:0;
	transform:translate(-50%, -50%) scale(.3);
}
.pvp_cel.verlies .pvp_cel_trofee_nieuw { filter:drop-shadow(0 8px 26px #000000aa) saturate(.7); }
.pvp_cel img.pvp_cel_trofee_nieuw.reveal { opacity:1; transform:translate(-50%, -50%) scale(1); }
/* de staart: de trofee licht op en vervaagt (TIMELINE-SPEC fase 2, 240ms) */
.pvp_cel img.pvp_cel_trofee_nieuw.weg { opacity:0; transform:translate(-50%, -50%) translateY(-38px) scale(.72); }
.pvp_cel.cel-chrome img.pvp_cel_trofee_nieuw.reveal { animation:pvpCelZweef 4.6s ease-in-out infinite; }

/* pips + rangnaam onder de trofee — pas zichtbaar op de onthulling */
.pvp_cel_pips
{
	position:absolute;
	left:50%;
	bottom:52px;
	transform:translateX(-50%);
	display:flex;
	gap:7px;
	z-index:8;
	opacity:0;
	transition:opacity .5s ease;
}
.pvp_cel.cel-onthuld .pvp_cel_pips { opacity:1; }
.pvp_cel_pips i
{
	width:11px;
	height:11px;
	transform:rotate(45deg) scale(.85);
	display:block;
	box-sizing:border-box;
	border:1px solid var(--celK66);
	background:#00000055;
}
.pvp_cel_pips i:nth-child(1) { transition:.35s ease 90ms; }
.pvp_cel_pips i:nth-child(2) { transition:.35s ease 180ms; }
.pvp_cel_pips i:nth-child(3) { transition:.35s ease 270ms; }
.pvp_cel[data-pips="1"] .pvp_cel_pips i:nth-child(-n+1),
.pvp_cel[data-pips="2"] .pvp_cel_pips i:nth-child(-n+2),
.pvp_cel[data-pips="3"] .pvp_cel_pips i:nth-child(-n+3)
{
	border:0;
	background:var(--celK);
	box-shadow:0 0 8px var(--celK88);
	transform:rotate(45deg) scale(1);
}
.pvp_cel_rangnaam
{
	position:absolute;
	left:0;
	right:0;
	bottom:16px;
	text-align:center;
	font-family:'headers';
	font-size:20px;
	letter-spacing:1px;
	text-transform:uppercase;
	color:#FFC46B;
	z-index:8;
	opacity:0;
	transition:opacity .6s ease .15s;
}
.pvp_cel.verlies .pvp_cel_rangnaam { color:#ffb0a8; }
.pvp_cel.cel-onthuld .pvp_cel_rangnaam { opacity:1; }

/* ── koppen: knallen naar binnen (letter-spacing + schaal) ─────────────── */
.pvp_cel .pvp_rank_uitslag.pvp_cel_kop_blok       /* OVERRIDE r15-maat: het
   vieringsontwerp zet de blokkop op 24px met een spacing-knal              */
{
	font-size:min(24px, 6.2vw) !important;
	opacity:0;
	letter-spacing:12px;
	transform:scale(.45);
	transition:opacity .4s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1), letter-spacing .7s ease;
}
.pvp_cel.cel-kop .pvp_cel_kop_blok
{
	opacity:1;
	letter-spacing:1px;
	transform:scale(1);
}
.pvp_cel_kop_moment
{
	font-family:'headers';
	font-size:44px;
	line-height:1;
	color:#4CAF50;
	text-shadow:0 0 18px #4caf5088, 0 2px 0 #000;
	opacity:0;
	letter-spacing:18px;
	transform:scale(.3);
	transition:opacity .4s ease, transform .8s cubic-bezier(.34, 1.56, .64, 1), letter-spacing .8s ease;
}
.pvp_cel.verlies .pvp_cel_kop_moment
{
	font-size:40px;
	color:#f34336;
	text-shadow:0 0 18px #f3433688, 0 2px 0 #000;
}
.pvp_cel.cel-kop .pvp_cel_kop_moment
{
	opacity:1;
	letter-spacing:1px;
	transform:scale(1);
}

/* inzet-tegels glijden omhoog op hun cue */
.pvp_cel_inzetten
{
	opacity:0;
	transform:translateY(22px);
	transition:opacity .5s ease, transform .6s cubic-bezier(.2, .9, .2, 1);
}
.pvp_cel.cel-stakes .pvp_cel_inzetten { opacity:1; transform:translateY(0); }

/* ── chrome: kop / ladder / teller / paneel / CTA landen gestaggerd ────── */
.pvp_cel_chrome { opacity:0; transition:opacity .55s ease; }
.pvp_cel.cel-chrome .pvp_cel_chrome { opacity:1; }
.pvp_cel_chr_top { transition:opacity .5s ease; }
.pvp_cel_chr_ladder
{
	transform:translateY(-14px);
	transition:opacity .55s ease 60ms, transform .55s cubic-bezier(.2, .9, .2, 1) 60ms;
}
.pvp_cel.cel-chrome .pvp_cel_chr_ladder { transform:translateY(0); }
.pvp_cel_chr_count
{
	font-family:p;
	font-size:11px;
	color:#ffffff8a;
	letter-spacing:1px;
	text-transform:uppercase;
	margin-top:-8px;
	text-shadow:none;
	transition:opacity .5s ease 120ms;
}
.pvp_cel_chr_paneel
{
	width:100%;
	transform:translateY(20px);
	transition:opacity .55s ease 180ms, transform .55s cubic-bezier(.2, .9, .2, 1) 180ms;
}
.pvp_cel.cel-chrome .pvp_cel_chr_paneel { transform:translateY(0); }
.pvp_cel_chr_cta
{
	transform:translateY(16px);
	transition:opacity .55s ease 280ms, transform .55s cubic-bezier(.2, .9, .2, 1) 280ms;
	/* onzichtbaar = ontikbaar: vóór de chrome-landing mag niets de reeks
	   voorbij tikken ("nothing advances without a tap" geldt ook per ongeluk) */
	pointer-events:none;
}
.pvp_cel.cel-chrome .pvp_cel_chr_cta { transform:translateY(0); pointer-events:auto; }

/* CTA-kolom: primair goud (dock-PLAY-systeem), ghost-secundair eronder */
.pvp_cel_cta
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	width:min(340px, 84vw);
	margin-top:auto;
	flex:0 0 auto;
}
.pvp_cel_cta .cl-btn-frame { width:100%; box-sizing:border-box; }
.pvp_cel_cta .cl-btn,
.pvp_cel_cta .cl-btn-secondary { width:100%; box-sizing:border-box; }
.pvp_cel_hint
{
	display:block;
	font-style:normal;
	font-family:p;
	font-size:10px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:#ffffff8a;
	text-shadow:none;
	opacity:0;
	transition:opacity .5s ease;
}
.pvp_cel.cel-advance .pvp_cel_hint { opacity:1; animation:pvpCelBlink 1.6s ease-in-out infinite; }

/* ladder-bob op de middelste trofee (referentie pvpBob) */
.pvp_cel_bob { animation:pvpCelBob 3.2s ease-in-out infinite; }

/* ── keyframes (TIMELINE-SPEC §Keyframes, verbatim uit de referentie) ──── */
@keyframes pvpCelFlash { 0% { opacity:0; } 12% { opacity:1; } 100% { opacity:0; } }
@keyframes pvpCelRing
{
	0%   { transform:translate(-50%, -50%) scale(.15); opacity:.95; }
	100% { transform:translate(-50%, -50%) scale(3.2); opacity:0; }
}
@keyframes pvpCelRingBig
{
	0%   { transform:translate(-50%, -50%) scale(.15); opacity:1; }
	70%  { opacity:.35; }
	100% { transform:translate(-50%, -50%) scale(4.6); opacity:0; }
}
@keyframes pvpCelSweep
{
	0%   { transform:translateX(-120%) skewX(-16deg); opacity:0; }
	18%  { opacity:1; }
	82%  { opacity:1; }
	100% { transform:translateX(1100%) skewX(-16deg); opacity:0; }
}
@keyframes pvpCelBlink { 50% { opacity:.22; } }
@keyframes pvpCelStralen { to { transform:translate(-50%, -52%) rotate(360deg); } }
@keyframes pvpCelShake
{
	0%, 100% { transform:translate(0, 0); }
	20% { transform:translate(-5px, 2px); }
	40% { transform:translate(4px, -3px); }
	60% { transform:translate(-3px, -1px); }
	80% { transform:translate(3px, 2px); }
}
@keyframes pvpCelShakeHard
{
	0%, 100% { transform:translate(0, 0); }
	15% { transform:translate(-11px, 5px); }
	30% { transform:translate(10px, -7px); }
	45% { transform:translate(-8px, -4px); }
	60% { transform:translate(7px, 5px); }
	80% { transform:translate(-4px, 2px); }
}
@keyframes pvpCelBob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes pvpCelSparkle
{
	0%   { opacity:0; transform:translate(-50%, -50%) scale(.4); }
	40%  { opacity:1; transform:translate(-50%, -50%) scale(1.15); }
	100% { opacity:0; transform:translate(-50%, -50%) scale(1.6); }
}
@keyframes pvpCelStreak
{
	0%   { opacity:0; transform:translate(-50%, -50%) scale(.15); }
	18%  { opacity:1; }
	100% { opacity:0; transform:translate(-50%, -50%) scale(3.4); }
}
@keyframes pvpCelZweef
{
	0%, 100% { transform:translate(-50%, -50%) scale(1); }
	50%      { transform:translate(-50%, calc(-50% - 9px)) scale(1.012); }
}
@keyframes pvpCelKolom
{
	0%, 100% { opacity:.42; transform:translate(-50%, -50%) scaleY(1) scaleX(1); }
	50%      { opacity:.72; transform:translate(-50%, -50%) scaleY(1.06) scaleX(1.14); }
}

/* de root-overlay dwingt een zwarte text-shadow op alles; het knoppensysteem
   (goud + ghost) is er juist zonder ontworpen — zelfde ingreep als .pm_pop */
.pvp_cel_cta .cl-btn,
.pvp_cel_cta .cl-btn > span,
.pvp_cel_cta .cl-btn-secondary { text-shadow:none; }
/* CubeRunnerz' generieke .newHighscore-span-regel (headers2, 47px, oranje)
   slokte het knoplabel op — zelfde valkuil als de sub-pips in sectie 33 */
.pvp_cel .pvp_cel_cta .cl-btn > span
{
	font-family:headers, sans-serif;
	font-size:inherit;
	color:inherit;
	display:inline;
}
/* idem de lege effect-spans (stralen/kolom/kern/ladder-lijnen/ruimte): geen
   geërfde tekstopmaak nodig, wél hun eigen display behouden */
.pvp_cel .pvp_cel_ruimte { display:block; }