/* ═══════════════════════════════════════════════════════════════════
   CubeLegend — wormhole-staat op de PvP-podiumkaarten
   (design/PvP HUD Cards - Wormhole). Laad NA cubelegend-pvp-podium.css.

   Drie overlays per speler, allemaal PERMANENT in de DOM en met opacity
   geschakeld — binnenkomst en vertrek faden dan vanzelf (400ms, moet
   gelijk blijven aan FADE_MS in pvp-warp-meteors.js):

     .ppod_warp       canvas in .ppod_vlak — de stijgende meteoren
     .ppod_warp_rand  cyaan rand + gloed naar binnen op de pilaar
     .ppod_warp_ring  cyaan ring om de avatartegel (leesbaar als de
                      pilaar kort is)

   De handover mikte op .ppod_lijf/.ppod_kaart uit het podium-pakket; ons
   podium heet anders: .ppod_vlak is het geverfde kaartvlak (inset:0 in
   .ppod_lift, overflow:hidden knipt de overlays meteen af) en de
   staatklasse .warpt staat op .ppod_slot, waar ook leider/klimt/wacht
   leven. pvp-podium.js zet klasse én canvas-staat in ÉÉN setWarp() — de
   twee kunnen dus nooit van mening verschillen.

   Twee lessen uit de handover die hier bewust gevolgd worden:
     • NOOIT display:none togglen — een onzichtbaar canvas heeft
       clientWidth 0, de maatcontrole in pvp-warp-meteors.js slaat af en
       de meteoren komen na het tonen niet meer terug. Alleen opacity.
     • De zichtbaarheid nooit via een geanimeerde opacity-keyframe gaten:
       een lopende keyframe wint van de inline opacity-0 en dan gloeit
       élke kaart, warpend of niet. Kale opacity + transition dus.
   ═══════════════════════════════════════════════════════════════════ */

.ppod_vlak > .ppod_warp,
.ppod_vlak > .ppod_warp_rand
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:block;
	pointer-events:none;
	/* .ppod_vlak heeft 12px buitenradius met een 2px-border: binnenin is dat ~10px */
	border-radius:10px 10px 0 0;
	opacity:0;
	transition:opacity .4s ease;
}
.ppod_vlak > .ppod_warp
{
	z-index:2;
	/* NIET de volle kaarthoogte: .ppod_lift loopt --ppod-onder (90px) dóór
	   achter de boosterbalk en de pilaarhoogte is een translate, geen resize.
	   Op height:100% zou het canvas ~2x zo hoog zijn als er ooit zichtbaar is
	   en verdween het gros van de 16 meteoren in de begraven voet — het
	   zwakst precies op de korte pilaar van de achterligger. hmax is de band
	   die ooit boven de vloerlijn uit kan komen; meteoren die onder y=1
	   herstarten komen zo áchter de balk vandaan omhoog, precies de diepte
	   die het podium overal speelt. */
	height:var(--ppod-hmax, 110px);
	mix-blend-mode:screen;   /* meteoren als LICHT op de pilaargradiënt — zonder
	                            blend zijn het grijze krassen op de oranje leiderspilaar */
}
.ppod_vlak > .ppod_warp_rand
{
	z-index:3;
	box-sizing:border-box;
	border:1px solid #4be3ffd9;
	box-shadow:0 0 20px #4be3ff70, 0 0 22px #7a3cff52 inset;
}
/* PvpWarp schrijft de rand-opacity ook inline (samen met het canvas), maar de
   klasse-regel houdt de rand overeind als pvp-warp-meteors.js ontbreekt —
   dezelfde momenten, dus nooit strijd tussen de twee */
.ppod_slot.warpt .ppod_warp_rand { opacity:1; }

/* Avatartegel van een warpende speler: cyaan ring + licht afgekoelde avatar.
   De tegel omvat precies de foto (alle andere kinderen zijn absoluut), dus
   inset:0 volgt vanzelf ook de grotere leiderstegel. */
.ppod_warp_ring
{
	position:absolute;
	inset:0;
	box-sizing:border-box;
	border:2px solid #4be3ff;
	border-radius:14px;
	box-shadow:0 0 14px #4be3ff70;
	pointer-events:none;
	display:block;
	opacity:0;
	z-index:4;
	transition:opacity .4s ease;
}
.ppod_slot.warpt .ppod_warp_ring { opacity:1; }

/* Streak-level van de warpende speler: klein cyaan chipje in de linkerboven-
   hoek van de PILAAR, ín het gebied dat de wormhole-rand toch al laat
   gloeien. Op de tegel was geen plek: de rangchip hangt rechts op 52% en
   overlapte op elke niet-leider-tegel precies de hoek rechtsboven (3-6px,
   het ergst in compact/mini — doorgerekend op de echte meet()-maten); de
   pilaartop is wél vrij, want de tegel staat gecentreerd en de leiders-
   trofee zweeft volledig bóven de pilaarrand. Bewust piepklein — de staat
   zelf vertellen de meteoren al, dit is alleen het getal erbij.

   Zichtbaar zolang .warpt aan staat ÉN er een écht level bekend is (.aan,
   gezet zodra pvp-podium.js een getal schrijft): het verschijnt dus precies
   op het moment dat de animatie start (level 10) en telt live mee omhoog.
   Het element blijft ALTIJD gerenderd — geen display:none/:empty-pad, want
   een element dat uit display:none komt slaat zijn allereerste opacity-fade
   over en dan popte de chip terwijl ring en rand rustig invaden. */
.ppod_warp_lvl
{
	position:absolute;
	left:3px;
	top:3px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:calc(var(--ppod-rang) * 0.8);
	height:calc(var(--ppod-rang) * 0.8);
	box-sizing:border-box;
	padding:0 3px;
	border-radius:6px;
	font-family:'headers';
	font-size:calc(var(--ppod-rangfont) - 1px);
	line-height:1;
	color:#c9f6ff;
	background:#07202ce6;
	border:1px solid #4be3ffb3;
	box-shadow:0 0 10px #4be3ff59;
	text-shadow:0 0 6px #4be3ff99;
	opacity:0;
	transition:opacity .4s ease;
	pointer-events:none;
	z-index:4;
}
.ppod_slot.warpt .ppod_warp_lvl.aan { opacity:1; }

/* Op .ppod_foto en niet op de tegel of '.ppod_tegel img': de tegel bevat ook
   de trofee, de rangchip en het You-vaantje — die houden hun kleur (zelfde
   les als de avatarmaat-regels in de podium-sheet). De filter-overgang is
   een korte, gebeurtenisgedreven fade op een tegelgrote afbeelding — niet de
   per-frame filtertransitie die het podium verbiedt. */
.ppod_foto { transition:filter .45s; }
.ppod_slot.warpt .ppod_foto { filter:saturate(.72) brightness(.86); }

/* Actieve magic cubes (design/PvP HUD Cards - Magic Cubes): canvas over de
   pilaar, getekend door dezelfde rAF-lus als de meteoren (harde eis uit de
   handover §7). De groep staat GECENTREERD OP DE PILAARVOET, zoals het
   ontwerp — maar niet op een vaste canvaspositie: de kaart schuift met de
   score omhoog en omlaag (translateY), dus pvp-podium.js geeft per kaart de
   zichtbare pilaarhoogte door (fxVloer) en de module ankert de cubes ~5px
   boven de vloerlijn van DÍE kaart. Op de kortste pilaar schuiven ze
   daarmee achter de naam/delta-regel (de tekst tekent erbóven en blijft
   leesbaar) — de eigenaar koos onderaan boven de bovenband, aug 2026.
   Geen gereserveerde ruimte (die kost op de smalle strook één pixel
   hoogtezwaai per pixel band) en geen opacity-gating: een leeg canvas is
   onzichtbaar en kost niets. */
.ppod_vlak > .ppod_fx
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:var(--ppod-hmax, 110px);   /* zelfde band als het meteoren-canvas */
	display:block;
	pointer-events:none;
	z-index:6;
}

/* Plat pad (iOS/WebKit): dezelfde discipline als de rest van het platte pad —
   geen overgangen, de staat klapt om in plaats van te faden. Elke lopende
   transitie is daar een tijdelijke compositielaag, en dit paneel heeft al
   eens bewezen wat WebKit daarvan bakt. */
.ppod.plat .ppod_vlak > .ppod_warp,
.ppod.plat .ppod_vlak > .ppod_warp_rand,
.ppod.plat .ppod_warp_ring,
.ppod.plat .ppod_warp_lvl,
.ppod.plat .ppod_foto { transition:none; }

@media (prefers-reduced-motion:reduce)
{
	/* staat blijft leesbaar (rand + ring), de beweging vervalt: geen meteoren.
	   display:none mag hier wél — deze stand is permanent, het canvas hoeft
	   nooit meer terug te komen. */
	.ppod_vlak > .ppod_warp { display:none; }
}