/* ═══════════════════════════════════════════════════════════════════
   CubeLegend — in-game PvP-podium (design/PvP Enhanced Player Progress).
   Laad NA cubelegend-pvp.css. Vervangt #pvpTugBar (.ptb_*).

   PLAATSING — #pvpPodium is een fixed laag met z-index 1, dus ONDER
   <game> (z-index 2). Alles wat lager hangt dan de bovenrand van de
   free-booster-balk verdwijnt daardoor vanzelf achter die balk en het
   speelbord: de pilaren lijken er letterlijk achter vandaan omhoog te
   groeien. pvp-podium.js meet links/breedte/top/hoogte van de balk en
   zet ze als inline stijl — hier staat alleen wat niet meet-afhankelijk is.

   BEWEGING — uitsluitend transform en opacity. Geen height-, left- of
   filter-transities: het spel rendert een canvas op dezelfde main thread
   en elke layout- of paint-invalidatie per frame kost speelframes.
   ═══════════════════════════════════════════════════════════════════ */

#pvpPodium
{
	position:fixed;
	z-index:1;                    /* < game (2): de boosterbalk dekt de voeten af */
	pointer-events:none;
	/* Harde ondergrens. Alleen "z-index 1, dus <game> dekt het af" was niet
	   genoeg: <game> heeft geen achtergrond en het speelveld is een TRANSPARANT
	   canvas, dus overal waar het spel niets verft keek je dwars door naar de
	   kaartvoeten. meet() maakt de host daarom expres zo diep als de ONDERKANT
	   van de boosterbalk en knipt hier af — lager dan de balk kan er dan niets
	   meer terechtkomen, wat het spel daaronder ook doet. */
	overflow:hidden;
	/* fallbacks; pvp-podium.js overschrijft ze na de meting */
	--ppod-onder:90px;
	--ppod-hmax:110px;
	--ppod-flash:26px;
	--ppod-flashfont:12px;
	--ppod-tegel:36px;
	--ppod-teksttop:23px;
	--ppod-lift:10px;
	--ppod-pop:52%;
	--ppod-leider:6px;
	--ppod-score:17px;
	--ppod-klein:9px;
	--ppod-rang:18px;
	--ppod-rangfont:11px;
	--ppod-vlag:15px;
	/* vaste top-glans van de pilaar. Als ACHTERGRONDLAAG, niet als eigen
	   element: zie de toelichting bij .ppod_vlak. */
	--ppod-glans:linear-gradient(#ffffff2b, #ffffff00 46%, #00000038);
	/* de demping van de ingehaalde kaart (.zakt) is om dezelfde reden óók een
	   achtergrondlaag: als los element (.ppod_sluier) liet WebKit op iOS de kaart
	   achter het scoreblok ongedempt, een lichter vlak rond de score (8 nov 2026) */
}
.ppod
{
	position:absolute;
	left:0;
	right:0;
	top:0;
	/* NIET bottom:0 — de host is expres dieper dan de layout. Zie de clip bij
	   #pvpPodium: de host loopt door tot ONDER de boosterbalk om af te knippen,
	   maar de indeling moet op de oorspronkelijke strook gebaseerd blijven. */
	height:var(--ppod-hoog, 100%);
}

/* Zwevend: op een kort/smal scherm schuift <game> met boosterbalk en al boven
   de viewport uit. Dan staat het podium BOVEN het bord met een eigen
   achtergrond — beter leesbaar dan afgeknipt in een strook die er niet is. */
#pvpPodium.zweeft { z-index:5; }
.ppod.zwevend
{
	background:linear-gradient(#0b0318 0, #0b0318 74%, #0b031800 100%);
	border-radius:0 0 14px 14px;
}
/* zonder boosterbalk om achter weg te duiken hebben de pilaren een eigen
   vloerlijn nodig — anders houdt de stage ze abrupt af in het niets */
.ppod.zwevend .ppod_stage:after
{
	content:'';
	position:absolute;
	left:6px;
	right:6px;
	bottom:0;
	height:2px;
	border-radius:2px;
	background:linear-gradient(90deg, #8a5bd800, #8a5bd8, #8a5bd800);
	box-shadow:0 0 10px #8a5bd8aa;
}

/* ── takeover-melding — eigen rij, nooit over de tegels ──────────────
   Overlappen we haar op het podium, dan ligt ze 2,2s lang op het
   "You"-vaantje. Met z-index "oplossen" maakt dat alleen erger; de
   rij houdt de ruimte gewoon vrij.                                   */
.ppod_flash_rij
{
	position:relative;
	height:var(--ppod-flash);
}
.ppod_flash
{
	position:absolute;
	left:50%;
	top:0;
	z-index:80;
	display:flex;
	align-items:center;
	gap:7px;
	white-space:nowrap;
	max-width:100%;
	box-sizing:border-box;
	background:#1a0730f2;
	border:1px solid #ff9800;
	border-radius:10px;
	padding:3px 10px;
	color:#FF9800;
	text-shadow:0 1px 2px #000;
	box-shadow:0 0 22px #ff980066;
	opacity:0;
	transform:translate(-50%, 10px) scale(.88);
	transition:opacity .26s ease, transform .42s cubic-bezier(.3,1.5,.4,1);
	will-change:transform, opacity;
}
.ppod_flash.aan { opacity:1; transform:translate(-50%, 0) scale(1); }
.ppod_flash.eigen
{
	border-color:#c58bff;
	color:#DDBBFF;
	box-shadow:0 0 22px #9f61ec80;
}
.ppod_flash b
{
	font-family:'headers';
	font-size:var(--ppod-flashfont);
	letter-spacing:1.2px;
	line-height:1;
}
.ppod_flash em
{
	font-style:normal;
	font-family:p;
	font-size:calc(var(--ppod-flashfont) - 1px);
	letter-spacing:.6px;
	line-height:1;
	color:#fff;
	opacity:.85;
	overflow:hidden;
	text-overflow:ellipsis;
}
.ppod_flash em:empty { display:none; }
.ppod_flash_stip
{
	flex:0 0 auto;
	width:6px;
	height:6px;
	border-radius:50%;
	background:currentColor;
	box-shadow:0 0 8px currentColor;
	animation:ppodStip 1.1s ease-in-out infinite;
}
@keyframes ppodStip { 0%,100% { opacity:1; } 50% { opacity:.25; } }


/* ── podium ──────────────────────────────────────────────────────────
   De stage klemt de pilaarvoeten af. Dat is een dubbele beveiliging
   naast de boosterbalk: draait iemand het toestel of hangt de balk even
   ergens anders, dan steekt er alsnog niets onderuit.               */
.ppod_stage
{
	position:absolute;
	left:0;
	right:0;
	top:var(--ppod-flash);
	bottom:0;
}
/* Alleen zwevend is de clip nodig: dan ligt het podium bóven het bord en is er
   geen boosterbalk die de begraven pilaarvoeten afdekt. Ingebed knipt de balk
   ze al af, en een clip om een gekantelde laag is precies waar WebKit over
   struikelt. */
.ppod.zwevend .ppod_stage { overflow:hidden; }

/* ── ÉÉN gepromoveerde doos per kaart, en die doos is de KAART ───────
   Vier opnames verder bleek het iOS-artefact niet in de kaart te zitten maar
   in de lége doos eromheen: de vlek is in élk frame exact de border-box van
   .ppod_slot (203 CSS breed tegen 193 van de kaart, bovenrand op de stage-top,
   ~80% dekkend). WebKit vult die laag met een egale kleur waar hij transparant
   hoort te zijn, en dat viel op omdat de slot 10px breder en ~53px hoger is dan
   de ondoorzichtige kaart die erin ligt.

   Daarom draagt de slot geen transform meer en is hij dus geen laag. Álle
   beweging — rangwissel, scorehoogte én takeover-houding — zit op .ppod_lift,
   de doos die door .ppod_vlak volledig wordt volgeverfd. Wat WebKit daar ook
   in tekent, het valt per definitie achter de dekkende kaart.

   Rangwissel en hoogte hebben elk hun eigen duur nodig, dus staan ze in
   afzonderlijke CSS-eigenschappen: transform (x) tegenover translate/rotate/
   scale (y + houding). Kent de engine die losse eigenschappen niet, dan valt
   pvp-podium.js terug op het oude pad (klasse ontbreekt = .ppod_slot beweegt). */
.ppod_slot
{
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	/* Vangrail, en de duurste les van deze hele exercitie: deze doos mag NOOIT
	   verf dragen. Zes fixes lang zocht ik een WebKit-compositiefout, terwijl
	   CubeRunnerz.css een globale `.pop` heeft met background, border-radius en
	   een witte 45px-halo — en dit paneel zette precies die klassenaam 620ms op
	   de sleuf. Dat verfde de lege doos rondom de kaart. De klasse heet nu
	   ppod_pop; deze drie regels zorgen dat een volgende naamsbotsing niet
	   opnieuw ongemerkt een plaat op het scherm zet. */
	background:none;
	border-radius:0;
	box-shadow:none;
	transform:translate3d(0,0,0);
	transition:transform .78s cubic-bezier(.5,.05,.25,1), opacity .35s ease;
	will-change:transform;
}
/* De slot is de doos die vier keer als vlek op het scherm stond. In dit pad
   heeft hij geen enkele route naar een compositielaag meer: geen transform,
   geen will-change, geen animatie en ook geen opacity-overgang — het dimmen
   verhuist naar de kaart, die het enige kind is, dus pixelidentiek. */
.ppod.losse .ppod_slot { transform:none; transition:none; will-change:auto; }
.ppod.losse .ppod_slot.stil  { opacity:1; }
.ppod.losse .ppod_slot.wacht { opacity:1; }
.ppod.losse .ppod_slot.stil  .ppod_lift { opacity:.86; }
.ppod.losse .ppod_slot.wacht .ppod_lift { opacity:.72; }
.ppod_slot.wijkt { transition-delay:.08s; }   /* de ingehaalde kaart start later */
.ppod.losse .ppod_slot.wijkt { transition-delay:0s; }
.ppod.losse .ppod_lift.wijkt { transition-delay:.08s; }
.ppod_slot.stil  { opacity:.86; }             /* niet-betrokken kaarten dimmen  */
.ppod_slot.wacht { opacity:.72; }             /* verbinding hapert              */

/* Draagt de scorehoogte ÉN de takeover-houding in ÉÉN transform.
   Dat was eerst verdeeld over twee geneste elementen met elk hun eigen
   will-change. Drie lagen diep animeren tegelijk bleek op iOS te veel: de
   compositor tekende de subboom twee keer — één keer ONgetransformeerd in de
   laag van de ouder en één keer als eigen gekantelde laag. Dat is de harde
   spookkaart naast de echte tijdens het swappen. Eén element, één transform,
   één laag. pvp-podium.js schrijft hem in z'n geheel. */
.ppod_lift
{
	position:absolute;
	left:5px;
	right:5px;
	bottom:calc(-1 * var(--ppod-onder));
	height:calc(var(--ppod-hmax) + var(--ppod-onder));
	/* draaipunt op de zichtbare vloerlijn, niet op het begraven uiteinde */
	transform-origin:center calc(100% - var(--ppod-onder));
	transform:translate3d(0,0,0);
	transition:transform .4s cubic-bezier(.25,1.25,.35,1);
	will-change:transform;
}
/* ── PLAT PAD (WebKit/iOS) ───────────────────────────────────────────
   Vijf rondes compositor-analyse verder: de vlek is per meting de box van
   .ppod_slot, gevuld én geklemd (het "You"-vaantje werd op de bovenrand
   afgesneden), en hij verschijnt uitsluitend zolang er in dat kaartje een
   transform-animatie loopt. Elke ingreep die de laagindeling verplaatste,
   verplaatste ook de vlek — hij ging pas weg toen er niets meer bewoog.

   Daarom loopt het podium op WebKit helemaal buiten de compositor om: geen
   will-change, geen transform-animatie. De rangwissel gaat via `left` en de
   scorehoogte via `bottom` — precies de techniek waarmee de oude
   tug-of-war-balk hier járen probleemloos op iOS heeft gedraaid. De kanteling
   blijft een statische transform die meteen omslaat; zonder animatie promoveert
   die niet. Layout van twee absoluut gepositioneerde dozen raakt geen enkele
   sibling, dus het spel merkt er niets van.

   Chrome en Android houden het compositorpad hieronder: daar was nooit iets
   aan de hand en daar is de beweging vloeiender. */
.ppod.plat .ppod_slot,
.ppod.plat .ppod_lift { will-change:auto; }
.ppod.plat .ppod_slot { transform:none; transition:none; }
.ppod.plat .ppod_slot.stil  { opacity:1; }
.ppod.plat .ppod_slot.wacht { opacity:1; }
.ppod.plat .ppod_slot.stil  .ppod_lift { opacity:.86; }
.ppod.plat .ppod_slot.wacht .ppod_lift { opacity:.72; }
.ppod.plat .ppod_lift
{
	right:auto;
	width:calc(100% - 10px);
	translate:none;
	transition:left .78s cubic-bezier(.5,.05,.25,1),
	           bottom .4s cubic-bezier(.25,1.25,.35,1),
	           opacity .35s ease;
}
.ppod.plat .ppod_lift.wijkt { transition-delay:.08s; }
.ppod.plat.vijf .ppod_lift { width:calc(100% - 6px); }
.ppod.plat.compact .ppod_lift { width:calc(100% - 8px); }
.ppod.plat.mini .ppod_lift { width:calc(100% - 6px); }

/* En dan het sluitstuk van het platte pad: NIETS in het podium mag op WebKit
   nog een eigen laag krijgen. Slot en lift plat maken was niet genoeg — de
   pulsring en de trofee droegen nog `translateZ(0)`, de tegel en het
   "You"-vaantje een translate3d, en de flash een transform-overgang met
   will-change. Eén gecomposite KIND dwingt zijn voorouders alsnog een laag op,
   en die voorouderlaag is precies zo groot als het slot — de plaat die tijdens
   het wisselen achter de kaarten opdook. Hier gaat alles terug naar 2D,
   zonder animatie en zonder overgang: de pop, de trofee en de flash klappen
   ineens om in plaats van te veren. Dat scheelt een tikje sier op iOS en het
   is de enige stand waarin de vlek aantoonbaar niet meer kán ontstaan. */
.ppod.plat .ppod_lift
{
	transition:left .78s cubic-bezier(.5,.05,.25,1),
	           bottom .4s cubic-bezier(.25,1.25,.35,1);
}
.ppod.plat .ppod_tegel
{
	transform:translate(-50%,calc(-1 * var(--ppod-pop)));
	transition:none;
}
.ppod.plat .ppod_slot.ppod_pop .ppod_tegel
{
	transform:translate(-50%,calc(-1 * var(--ppod-pop) - 14%)) scale(1.12);
}
.ppod.plat .ppod_puls { display:none; }
.ppod.plat .ppod_trofee
{
	transform:scale(.7) rotate(-12deg);
	transition:none;
	will-change:auto;
}
.ppod.plat .ppod_slot.leider .ppod_trofee { transform:scale(1) rotate(0); }
.ppod.plat .ppod_jij { animation:none; transform:translateX(-50%); }
.ppod.plat .ppod_flash
{
	transform:translate(-50%,0) scale(1);
	transition:none;
	will-change:auto;
}
.ppod.plat .ppod_flash_stip { animation:none; }

/* losse-eigenschappen-pad: x in transform (trage rangwissel), hoogte en houding
   in translate/rotate/scale (korte, licht verende beweging) — één element, één
   laag, en die laag is precies de geverfde kaart */
.ppod.losse .ppod_lift
{
	translate:0 0;
	rotate:0deg;
	scale:1;
	transition:transform .78s cubic-bezier(.5,.05,.25,1),
	           translate .4s cubic-bezier(.25,1.25,.35,1),
	           rotate .4s cubic-bezier(.25,1.25,.35,1),
	           scale .4s cubic-bezier(.25,1.25,.35,1),
	           opacity .35s ease;
}

/* ── de kaart is ÉÉN geverfd vlak ─────────────────────────────────────
   Zolang de kaart rechtop staat, vallen alle randen op hele pixels en is er
   niets aan de hand. Zodra hij kantelt (2,5°) wordt élke rechte rand
   antialiased — en dán telt het aantal randen. Lag er een kind met inset:0
   bovenop, dan kwam zijn antialiasde rand precies op die van de pilaar en
   verschenen er verticale haarlijntjes langs de zijkanten. Op iOS is dat
   uitgesprokener dan in Chrome, omdat WebKit de gekantelde laag als textuur
   sampelt in plaats van opnieuw te rasteren.

   Daarom: de vaste glans is een ACHTERGRONDLAAG van de pilaar zelf (geen
   element, geen extra rand, en meteen één geverfde laag minder), en de twee
   overlays die wél moeten kunnen faden liggen 1px naar binnen zodat hun rand
   nooit samenvalt met die van de border.

   De transparante 1px-ring in elke box-shadow hieronder is geen versiering: hij
   maakt de laagbegrenzing één pixel groter dan het geverfde vlak. Zonder die
   marge valt de rand van de kaart samen met de rand van de textuur, en dan
   sampelt de compositor bij het kantelen buiten de textuur — precies de
   verticale lijn die we kwijt willen. */
.ppod_vlak                                     /* het geverfde kaartvlak */
{
	position:absolute;
	inset:0;
	overflow:hidden;                           /* knipt de twee faders af */
	border-radius:12px 12px 0 0;
	background:var(--ppod-dim, none), var(--ppod-glans), linear-gradient(#4a3b7e, #2c1f56 62%, #1b1238);
	border:2px solid #6b5da8;
	border-bottom:none;
	box-sizing:border-box;
	/* transparante ring: laagbegrenzing één pixel ruimer dan de verf, zodat de
	   compositor bij het kantelen niet buiten de textuur sampelt */
	box-shadow:0 0 0 1px transparent;
}
/* de faders steken bewust ietsje búiten het vlak en worden erdoor afgeknipt:
   zo hebben ze geen eigen rand die op die van de border kan vallen */
.ppod_sheen                                    /* lichtveeg bij inhalen */
{
	position:absolute;
	inset:-2px;
	background:linear-gradient(105deg, #ffffff00 32%, #ffffffb3 50%, #ffffff00 68%);
	opacity:0;
	pointer-events:none;
	/* BEWUST geen transitie: een opacity-overgang op een kaartgroot vlak
	   promoveert het tot eigen laag zolang ze loopt, en dat is precies de
	   laag-wisseling die we hier niet meer willen. Zonder transitie verft hij
	   gewoon mee in de laag van de kaart. */
}

/* De gloed hoort STRAK om de kaart te zitten, met het zwaartepunt naar binnen.
   Een wijde halo (het prototype had 18/26px) ziet er in rust prima uit, maar zodra
   de kaart kantelt blijft die zachte wolk visueel rechtop staan terwijl de rand
   meedraait — en dan lijkt er achtergrond onder de kaart vandaan te lekken,
   vooral in de wig boven de scheve bovenrand. Bedenk ook dat de pilaardoos ~90px
   dóórloopt onder de vloerlijn: de gloed loopt om die hele hoge doos heen, wat de
   wolk aan de zijkanten extra breed maakt. Strak + inset houdt de kanteling
   scherp en de kaart toch verlicht. */

/* eigen speler */
.ppod_slot.eigen .ppod_vlak
{
	background:var(--ppod-dim, none), var(--ppod-glans), linear-gradient(#b45cf5, #6a29c4 62%, #3f1183);
	border-color:#d9b3ff;
	box-shadow:0 0 0 1px transparent, 0 0 9px #9f61ec66, inset 0 0 16px #c79bff26;
}
/* leider */
.ppod_slot.leider .ppod_vlak
{
	background:var(--ppod-dim, none), var(--ppod-glans), linear-gradient(#ff9d2f, #e0620c 62%, #a13c05);
	border-color:#FFE0A3;
	box-shadow:0 0 0 1px transparent, 0 0 11px #ff980080, inset 0 0 20px #ffcf8f33;
}

/* ── takeover-houding (JS zet deze klassen ~950ms) ────────────────────
   Subtiel houden: de waarden hieronder zijn de uitgevochten eindstand
   uit het prototype. Grotere lift of rotatie leest meteen theatraal. */
.ppod_slot.klimt .ppod_sheen  { opacity:.42; }
.ppod_slot.zakt  { --ppod-dim:linear-gradient(#0b031842, #0b031842); }   /* 26 % donker, zie --ppod-glans */


/* ── avatartegel die boven de pilaar uitkomt ─────────────────────────── */
.ppod_tegel
{
	position:absolute;
	left:50%;
	top:0;
	z-index:20;
	transform:translate3d(-50%,calc(-1 * var(--ppod-pop)),0);
	transition:transform .38s cubic-bezier(.3,1.5,.4,1);
}
.ppod_slot.ppod_pop .ppod_tegel { transform:translate3d(-50%,calc(-1 * var(--ppod-pop) - 14%),0) scale(1.12); }
/* LET OP: dit moet op .ppod_foto staan en niet op '.ppod_tegel img'. De trofee
   is óók een <img> in de tegel, en '.ppod_tegel img' (0,1,1) wint het van
   '.ppod_trofee' (0,1,0) — dan krijgt de trofee de tegelmaat en ligt hij als een
   gouden deksel over de avatar van de nummer 1. */
.ppod_foto
{
	display:block;
	width:var(--ppod-tegel);
	height:var(--ppod-tegel);
	border-radius:12px;
	object-fit:cover;
	background:#1a0730;
	border:3px solid #6b5da8;
	box-shadow:0 3px 0 #00000066;
	box-sizing:border-box;
}
.ppod_slot.eigen  .ppod_foto { border-color:#d9b3ff; box-shadow:0 0 14px #9f61ecaa, 0 3px 0 #00000066; }
.ppod_slot.leider .ppod_foto
{
	width:calc(var(--ppod-tegel) + var(--ppod-leider));
	height:calc(var(--ppod-tegel) + var(--ppod-leider));
	border-color:#FFE0A3;
	box-shadow:0 0 16px #ffc46baa, 0 3px 0 #00000066;
}

/* eenmalige ring die bij de takeover van de tegel af vliegt */
.ppod_puls
{
	position:absolute;
	left:50%;
	top:50%;
	width:var(--ppod-tegel);
	height:var(--ppod-tegel);
	margin:calc(var(--ppod-tegel) / -2) 0 0 calc(var(--ppod-tegel) / -2);
	border-radius:14px;
	border:2px solid #FFE0A3;
	opacity:0;
	pointer-events:none;
	/* De laag moet er ál zijn vóór .pop en blijven ná .pop. Ontstond hij pas
	   bij de animatie, dan wijzigt de lagenboom precies terwijl er transforms
	   lopen — en dát is wat op iOS de vlek opriep: de bewegende laag kreeg dan
	   tegelijk een egale vulling én een clip (het "You"-vaantje werd op de
	   bovenrand van die laag afgesneden). translateZ(0) is in WebKit een
	   onvoorwaardelijke compositie-trigger, will-change alleen een hint. */
	transform:translateZ(0);
	will-change:transform, opacity;
}
.ppod_slot.ppod_pop .ppod_puls { animation:ppodPuls .62s cubic-bezier(.2,.8,.3,1) 1; }
.ppod_slot.eigen.ppod_pop .ppod_puls { border-color:#DDBBFF; }
@keyframes ppodPuls
{
	0%   { opacity:.95; transform:translateZ(0) scale(1); }
	100% { opacity:0;   transform:translateZ(0) scale(2.1); }
}

/* #rang naast de tegel */
.ppod_rang
{
	position:absolute;
	left:100%;
	top:52%;
	transform:translate(-32%, -50%);
	display:inline-flex;
	align-items:center;
	height:var(--ppod-rang);
	padding:0 5px;
	border-radius:7px;
	font-family:'headers';
	font-size:var(--ppod-rangfont);
	line-height:1;
	background:#1c1436;
	color:#fff;
	border:2px solid #6b5da8;
	box-shadow:0 2px 0 #00000059;
}
.ppod_slot.eigen  .ppod_rang { background:linear-gradient(#b98bff, #6631c3); border-color:#e3d0ff; }
.ppod_slot.leider .ppod_rang { background:linear-gradient(#ffd27a, #ff8a00); border-color:#fff1d4; color:#25120a; }

/* trofee op de leider — INSET in de tegel. Op right:100% klapt hij op de
   linkerpilaar buiten het paneel en wordt hij weggeklemd. */
.ppod_trofee
{
	position:absolute;
	left:calc(var(--ppod-tegel) * -0.25);
	top:calc(var(--ppod-tegel) * -0.3);
	z-index:2;
	width:calc(var(--ppod-tegel) * 0.55);
	height:calc(var(--ppod-tegel) * 0.55);
	filter:drop-shadow(0 0 8px #ffc46baa);
	opacity:0;
	transform:translateZ(0) scale(.7) rotate(-12deg);
	will-change:transform, opacity;
	transition:opacity .4s, transform .45s cubic-bezier(.3,1.6,.4,1);
}
.ppod_slot.leider .ppod_trofee { opacity:1; transform:translateZ(0) scale(1) rotate(0); }

/* "You"-vaantje */
.ppod_jij
{
	position:absolute;
	left:50%;
	bottom:100%;
	margin-bottom:3px;
	font-family:'headers2';
	font-size:var(--ppod-vlag);
	letter-spacing:.5px;
	color:#fff;
	text-shadow:0 2px 0 #2a0f5e, 0 0 10px #000;
	white-space:nowrap;
	transform:translateX(-50%);
	animation:ppodJijBob 3.2s ease-in-out infinite;
}
/* de leider draagt de trofee linksboven op zijn tegel — het vaantje schuift
   daarom een tik naar rechts, anders staat "You" er dwars doorheen */
.ppod_slot.leider .ppod_jij { margin-left:7px; }
@keyframes ppodJijBob
{
	0%,100% { transform:translate3d(-50%,0,0); }
	50%     { transform:translate3d(-50%,-3px,0); }
}


/* ── score / naam / delta in de pilaar ───────────────────────────────── */
.ppod_tekst
{
	position:absolute;
	left:0;
	right:0;
	top:var(--ppod-teksttop);
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:1px;
	padding:0 2px;
}
.ppod_tekst b
{
	font-family:'headers';
	font-size:var(--ppod-score);
	line-height:1.05;
	color:#ffffffd6;
	text-shadow:0 2px 0 #00000073;
	font-variant-numeric:tabular-nums;   /* rollende teller mag niet wiebelen */
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.ppod_slot.eigen  .ppod_tekst b { font-size:calc(var(--ppod-score) + 3px); color:#FFD27A; }
.ppod_slot.leider .ppod_tekst b { font-size:calc(var(--ppod-score) + 3px); color:#FFE7B4; text-shadow:0 2px 0 #00000073, 0 0 12px #ff980099; }
/* naam + gat delen één regel; de naam krimpt, de deltapil nooit */
.ppod_onder
{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	max-width:100%;
	min-width:0;
}
.ppod_tekst small
{
	font-family:p;
	font-size:var(--ppod-klein);
	line-height:1.2;
	letter-spacing:.8px;
	text-transform:uppercase;
	color:#ffffffa6;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.ppod_delta
{
	flex:0 0 auto;
	font-family:'headers';
	font-size:var(--ppod-klein);
	letter-spacing:.5px;
	line-height:1;
	padding:2px 5px;
	border-radius:5px;
	background:#00000045;
	color:#ffffff8c;
	white-space:nowrap;
}
.ppod_slot.leider .ppod_delta { color:#fff0d0; }
.ppod_delta.klim  { background:#4caf5033; color:#9de88f; }
.ppod_delta.wacht { background:#ffffff14; color:#ffffff7a; }

/* 4 en 5 spelers: minder ruimte per kaart. Het type schaalt al mee via
   --ppod-score (meet() klemt hem), hier alleen de maatvoering. */
.ppod.vijf .ppod_lift { left:3px; right:3px; }
.ppod.vijf .ppod_slot.leider .ppod_foto { width:var(--ppod-tegel); height:var(--ppod-tegel); }

/* ── magere inrichtingen voor korte stroken (zie MODI in pvp-podium.js) ────
   compact: geen "You"-vaantje, kleinere lift, minder tegel-uitsteek.
   mini   : bovendien score en gat op ÉÉN regel en de naam weg — de avatar
            zegt al wie het is, het scoregat niet.                          */
.ppod.compact .ppod_jij,
.ppod.mini .ppod_jij { display:none; }
.ppod.compact .ppod_lift { left:4px; right:4px; }
.ppod.mini .ppod_lift { left:3px; right:3px; }
.ppod.mini .ppod_tekst
{
	flex-direction:row;
	align-items:center;
	justify-content:center;
	gap:4px;
}
.ppod.mini .ppod_tekst small { display:none; }


/* ── toegankelijkheid + zuinigheid ────────────────────────────────────
   Bij reduced motion blijft alles staan waar het hoort; de informatie
   (rang, gat, leider) zit in de tekst en de kleuren, niet in de beweging. */
@media (prefers-reduced-motion:reduce)
{
	.ppod_slot,
	.ppod_lift,
	.ppod_tegel,
	.ppod_flash { transition-duration:.01ms !important; }
	.ppod_jij,
	.ppod_flash_stip { animation:none; }
	.ppod_slot.ppod_pop .ppod_puls { animation:none; }
}

/* ── teamkaarten (design/Ranked V2 · Teams HUD-cards) ─────────────────
   Eén pilaar per TEAM: een ledencluster i.p.v. één avatar. Elke lid-tegel
   draagt zijn eigen score (klein — §3: "do not promote member scores") en
   zijn eigen cyaan wormhole-ring; de pilaargloed loopt via de bestaande
   .warpt-route van de kaart. De grote teller is het gewogen teamgemiddelde
   met de vaste AVG-eenheid ernaast. */
.ppod_tegel_team { width:auto; min-width:var(--ppod-tegel, 34px); background:none; border:none; box-shadow:none; }
.ppod_cluster { display:flex; align-items:flex-end; justify-content:center; gap:7px; }
.ppod_cluster.druk { gap:4px; }
.ppod_lid { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; }
.ppod_lid_foto
{
	width:calc(var(--ppod-tegel, 34px) * .82);
	height:calc(var(--ppod-tegel, 34px) * .82);
	border-radius:9px;
	border:2px solid rgba(255,255,255,.35);
	background:#1a0730;
	box-shadow:0 3px 0 #00000066;
	box-sizing:border-box;
	object-fit:cover;
	transition:filter .45s ease;
}
.ppod_cluster.druk .ppod_lid_foto
{
	width:calc(var(--ppod-tegel, 34px) * .7);
	height:calc(var(--ppod-tegel, 34px) * .7);
}
.ppod_lid.eigen .ppod_lid_foto { border-color:#d9b3ff; }
/* wormhole is per SPELER: het filter + de ring wijzen wie erin zit (§5) */
.ppod_lid.warpt .ppod_lid_foto { filter:saturate(.72) brightness(.86); }
.ppod_lid_ring
{
	position:absolute; top:-2px; left:50%;
	width:calc(var(--ppod-tegel, 34px) * .82); height:calc(var(--ppod-tegel, 34px) * .82);
	transform:translateX(-50%);
	border-radius:11px; border:2px solid #4be3ff; box-sizing:border-box;
	box-shadow:0 0 14px #4be3ff70;
	opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.ppod_lid.warpt .ppod_lid_ring { opacity:1; }
.ppod_lid_score { font-family:headers; font-size:10px; line-height:1; color:#ffffffcf; }
.ppod_cluster.druk .ppod_lid_score { font-size:9px; }
.ppod_lid_jij
{
	position:absolute; left:50%; bottom:100%; margin-bottom:3px;
	transform:translateX(-50%);
	font-family:headers2, headers; font-size:10px; font-style:normal;
	color:#fff; text-shadow:0 2px 0 #2a0f5e, 0 0 8px #000;
	animation:ppodLidJij 2.6s ease-in-out infinite;
}
/* elke stop herdeclareert de centreer-translate (trap 11) */
@keyframes ppodLidJij
{
	0%, 100% { transform:translateX(-50%) translateY(0); }
	50%      { transform:translateX(-50%) translateY(-3px); }
}
.ppod_avg
{
	font-family:p; font-size:8px; font-style:normal; letter-spacing:1px;
	text-transform:uppercase; color:#ffffff70; margin-left:3px;
}
@media (prefers-reduced-motion:reduce)
{
	.ppod_lid_jij { animation:none; }
}