/* ══════════════════════════════════════════════════════════════════════════
   CubeLegend — Rollovers (design/Rollover_Ranked + Rollover_Classic)
   Laadt NA cubelegend-pvp.css en cubelegend-claim.css.

   Eén schil (ro_*) voor beide reeksen: lagen, kop met pillen, fase-host,
   CTA. Daarin de fasen van het seizoenseinde (sr_*) en van de weekafsluiting
   van classic (cl_*). Elke inline stijl-string van de prototypes is hier een
   klasse; wat per cue verandert zet rollover-motor.js/season-rollover.js/
   classic-rollover.js als klasse op de wortel of het element. Alleen stof
   en confetti zijn canvas.

   De tint reist als custom property: --tk (tier, season) / --dk (discipline,
   classic) plus alpha-varianten (--tk77, --tkcc, …) die de templates zetten.
   Keyframes heten ro* (roStralen ≠ pvpStralen/pvpCelStralen).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · schil en lagen ──────────────────────────────────────────────────── */

.newHighscore.pvpRankScherm.ro_scherm
{
	display:block;
	padding:0;
	color:#fff;
}
.ro_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(--rk99, #ffd70099), transparent 62%),
		radial-gradient(circle at 50% 100%, #f0c43744, transparent 58%);
}
.ro_stralen
{
	position:absolute;
	left:50%;
	top:40%;
	width:320px;
	height:320px;
	border-radius:50%;
	pointer-events:none;
	z-index:3;
	opacity:0;
	transition:opacity .8s ease;
	transform:translate(-50%, -52%);
	animation:roStralen 9s linear infinite;
	-webkit-mask-image:radial-gradient(circle, #000 0%, #0000 70%);
	mask-image:radial-gradient(circle, #000 0%, #0000 70%);
	background:repeating-conic-gradient(from 0deg, #f0c4374d 0deg, transparent 20deg, #f0c4374d 40deg, transparent 60deg);
}
.cl_scherm .ro_stralen { top:44%; width:340px; height:340px; }
.ro_stof_achter { position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; }
.ro_dim
{
	position:absolute;
	inset:0;
	z-index:6;
	pointer-events:none;
	opacity:0;
	transition:opacity .7s ease;
	background:radial-gradient(circle at 50% 40%, transparent 22%, rgba(5, 2, 14, .82) 88%);
}
.ro_confetti { position:absolute; inset:0; width:100%; height:100%; z-index:19; pointer-events:none; }
.ro_flits
{
	position:absolute;
	inset:0;
	z-index:22;
	pointer-events:none;
	opacity:0;
	mix-blend-mode:screen;
}
.ro_flits.aan { animation:roFlash .58s ease-out forwards; }
.ro_zoom
{
	position:absolute;
	inset:0;
	z-index:10;
	transform-origin:50% 42%;
	transition:transform .5s cubic-bezier(.2, .9, .2, 1);
}
.ro_shake
{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	box-sizing:border-box;
	padding:calc(16px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom));
}
.cl_scherm .ro_shake { gap:11px; padding-left:18px; padding-right:18px; }
.ro_shake.s1 { animation:roShake .34s ease-in-out; }
.ro_shake.s2 { animation:roShakeHard .42s ease-in-out; }
.ro_stof_voor { position:absolute; inset:0; width:100%; height:100%; z-index:9; pointer-events:none; }
.ro_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%);
	background:repeating-conic-gradient(from 0deg, #ffffff00 0deg, #ffffffe6 1.2deg, #ffffff00 11deg);
}
.cl_scherm .ro_streaks { top:42%; }
.ro_streaks.n1 { display:block; width:380px; height:380px; animation:roStreak .7s cubic-bezier(.15, .8, .3, 1) forwards; }
.ro_streaks.n2 { display:block; width:520px; height:520px; animation:roStreak .95s cubic-bezier(.15, .8, .3, 1) forwards; }

/* CubeRunnerz dwingt op .newHighscore élke span naar headers2/47px/oranje en
   élke img naar 50vw — de knoplabels, monogrammen en pil-iconen expliciet
   terugzetten (zelfde valkuil als de rankviering, sectie 35 van pvp.css) */
.newHighscore.ro_scherm .ro_cta .cl-btn > span,
.newHighscore.ro_scherm .ro_showcase_tekst,
.newHighscore.ro_scherm .ro_pil_ico,
.newHighscore.ro_scherm .cl_avatar > span,
.newHighscore.ro_scherm .cl_chip_ico,
.newHighscore.ro_scherm .ro_switch
{
	font-family:inherit;
	font-size:inherit;
	color:inherit;
}
.newHighscore.ro_scherm .ro_cta .cl-btn > span { font-family:headers, sans-serif; display:inline; text-shadow:none; }
.newHighscore.ro_scherm .ro_cta .cl-btn { text-shadow:none; }
.newHighscore.ro_scherm .ro_showcase_tekst { display:flex; }
.newHighscore.ro_scherm .cl_avatar img { width:100%; height:100%; }
/* de claim-tegels (cubelegend-claim.css §4) hebben drie spans: het vraagteken,
   het SEALED-zegel en de zeldzaamheidstag — dezelfde waarden als daar, alleen
   met genoeg specificiteit */
.newHighscore.ro_scherm .mys_slot span.mys_vraag { font-family:headers, sans-serif; font-size:26px; color:#ffffff21; }
.newHighscore.ro_scherm .mys_slot span.mys_zegel { font-family:headers, sans-serif; font-size:7.5px; color:#ffffff33; }
.newHighscore.ro_scherm .mys_slot span.clm_tag { font-family:headers, sans-serif; font-size:6.5px; color:#1a0730; }

/* ── 2 · kop met pillen ──────────────────────────────────────────────────── */

.ro_kop
{
	display:flex;
	align-items:center;
	gap:10px;
	width:100%;
	flex:none;
	opacity:0;
	transform:translateY(-14px);
	transition:opacity .5s ease, transform .55s cubic-bezier(.2, .9, .2, 1);
}
.ro_scherm.ro-kop .ro_kop { opacity:1; transform:translateY(0); }
.ro_kop_tekst { display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; }
.ro_kop_kicker,
.ro_eyebrow
{
	font-family:p;
	font-size:10px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:#ffffff8a;
	text-shadow:none;
	white-space:nowrap;
}
.ro_kop_titel { font-family:'headers'; font-size:17px; letter-spacing:1px; white-space:nowrap; }
.ro_pillen { margin-left:auto; display:flex; align-items:center; gap:5px; }
.ro_pil
{
	position:relative;
	display:flex;
	align-items:center;
	gap:4px;
	padding:4px 7px;
	border-radius:9px;
	border:1px solid #ffffff24;
	background:#00000042;
	transition:.3s ease;
}
.ro_pil.aan { border-color:var(--pt); background:color-mix(in srgb, var(--pt) 12%, transparent); }
.ro_pil_ico
{
	display:block;
	width:14px;
	height:15px;
	flex:none;
	background:center / contain no-repeat;
	filter:grayscale(1) opacity(.5);
}
.ro_pil.aan .ro_pil_ico { filter:none; }
.ro_pil b { font-family:'headers'; font-size:12px; color:#ffffff8a; text-shadow:none; white-space:nowrap; }
.ro_pil.aan b { color:var(--pt); }

/* ── 3 · fase-host, koppen, CTA ─────────────────────────────────────────── */

.ro_fase
{
	flex:1;
	min-height:0;
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
}
.ro_fase > div
{
	flex:1;
	min-height:0;
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
}
.ro_fasekop
{
	font-family:'headers';
	font-size:19px;
	letter-spacing:.5px;
	white-space:nowrap;
	flex:none;
	text-align:center;
	color:#FFC46B;
	opacity:0;
	transition:opacity .5s ease .1s;
}
.cl_scherm .ro_fasekop { letter-spacing:2px; }
.ro_scherm.ro-kop .ro_fasekop { opacity:1; }
.ro_scroll
{
	flex:1;
	min-height:0;
	overflow-y:auto;
	scrollbar-width:none;
	-ms-overflow-style:none;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:9px;
	width:100%;
}
.ro_scroll::-webkit-scrollbar { width:0; height:0; }
.ro_cta
{
	margin-top:auto;
	flex:0 0 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	width:100%;
	opacity:0;
	transform:translateY(16px);
	transition:opacity .55s ease, transform .55s cubic-bezier(.2, .9, .2, 1);
	pointer-events:none;
}
.ro_scherm.ro-cta .ro_cta { opacity:1; transform:translateY(0); pointer-events:auto; }
.ro_cta .cl-btn-frame { width:100%; box-sizing:border-box; }
.ro_cta .cl-btn { width:100%; box-sizing:border-box; white-space:nowrap; }
.ro_cta .cl-btn.is-af { filter:grayscale(.5); opacity:.7; pointer-events:none; }
.ro_hint
{
	display:block;
	font-style:normal;
	font-family:p;
	font-size:10px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:#ffffff8a;
	text-shadow:none;
	white-space:nowrap;
	opacity:0;
	transition:opacity .5s ease;
}
.ro_scherm.ro-hint .ro_hint { opacity:1; animation:roBlink 1.6s ease-in-out infinite; }

/* ── 4 · cadeaupaneel + showcase-schakelaar (gedeeld) ───────────────────── */

.ro_gift
{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:7px;
	width:100%;
	box-sizing:border-box;
	flex:0 0 auto;
	padding:9px 11px 11px;
	border-radius:15px;
	border:3px solid #f0c43780;
	background:linear-gradient(100deg, #f0c4371f, #17004099);
	opacity:0;
	transform:translateY(18px);
	transition:opacity .5s ease, transform .55s cubic-bezier(.2, .9, .2, 1), border-color .4s ease, background .4s ease;
}
.ro_scherm.ro-gift .ro_gift { opacity:1; transform:translateY(0); }
.ro_scherm.ro-gift .ro_gift.klaar { border-color:#00000055; background:linear-gradient(100deg, #f0c43710, #17004099); opacity:.7; }
.ro_gift_kop { display:flex; align-items:baseline; gap:7px; width:100%; }
.ro_gift_kop > small { font-family:p; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#ffffff8a; text-shadow:none; white-space:nowrap; }
.ro_gift_hint { margin-left:auto; letter-spacing:1px !important; }
.ro_gift .mys_voortgang { width:100%; padding:2px 0 0; }
.ro_gift .mys_rooster { width:100%; }
.ro_gift .mys_slot { text-shadow:none; }
.ro_gift_leeg small { font-family:p; font-size:11px; color:#ffffffb0; text-shadow:none; line-height:1.45; }
.ro_scherm.ro-gift .ro_gift_leeg { opacity:1; }

.ro_showcase
{
	display:flex;
	align-items:center;
	gap:12px;
	width:100%;
	box-sizing:border-box;
	flex:0 0 auto;
	padding:9px 12px;
	border-radius:13px;
	cursor:pointer;
	color:#fff;
	border:1px solid #ffffff1f;
	background:#00000042;
	opacity:0;
	transform:translateY(12px);
	transition:opacity .5s ease, transform .5s cubic-bezier(.2, .9, .2, 1), background .3s ease, border-color .3s ease;
}
.ro_scherm.ro-voet .ro_showcase { opacity:1; transform:translateY(0); }
.ro_showcase.aan { border-color:#f0c43777; background:#f0c4371a; }
.ro_showcase_tekst { display:flex; flex-direction:column; align-items:flex-start; gap:1px; flex:1; min-width:0; }
.ro_showcase_tekst b { font-family:'headers'; font-size:14px; letter-spacing:1px; white-space:nowrap; }
.ro_showcase_tekst small { font-family:p; font-size:10px; color:#ffffff8a; text-shadow:none; white-space:nowrap; }
.ro_switch
{
	flex:none;
	display:block;
	width:52px;
	height:29px;
	border-radius:15px;
	box-sizing:border-box;
	padding:3px;
	background:#ffffff1f;
	box-shadow:inset 0 2px 5px #00000088;
	transition:background .28s ease, box-shadow .28s ease;
}
.ro_showcase.aan .ro_switch { background:linear-gradient(#ffd700, #ff7700); box-shadow:0 0 14px #f0c43766, inset 0 -3px #b25f00; }
.ro_switch i
{
	display:block;
	width:23px;
	height:23px;
	border-radius:50%;
	background:#fff;
	box-shadow:0 2px 5px #00000088;
	transform:translateX(0);
	transition:transform .28s cubic-bezier(.3, 1.5, .5, 1);
}
.ro_showcase.aan .ro_switch i { transform:translateX(23px); }

/* ── 5 · season · fase 1 SEASON COMPLETE ────────────────────────────────── */

.sr_intro { justify-content:center; gap:16px !important; }
.sr_intro_seizoen
{
	font-family:p;
	font-size:12px;
	letter-spacing:4px;
	text-transform:uppercase;
	color:#ffffff8a;
	text-shadow:none;
	opacity:0;
	transition:opacity .6s ease .1s;
}
.sr_intro_kop
{
	font-family:'headers';
	font-size:50px;
	line-height:.94;
	text-align:center;
	letter-spacing:2px;
	color:#fff;
	text-shadow:0 0 26px #f0c43788, 0 3px 0 #000;
	opacity:0;
}
.ro_scherm.sr-stamp .sr_intro_seizoen { opacity:1; }
.ro_scherm.sr-stamp .sr_intro_kop { opacity:1; animation:roStamp .6s cubic-bezier(.2, .9, .2, 1) forwards; }
.sr_intro_lijn,
.cl_intro_lijn
{
	display:block;
	height:3px;
	border-radius:3px;
	background:linear-gradient(90deg, transparent, #f0c437, transparent);
	width:0;
	transition:width .7s cubic-bezier(.2, .9, .2, 1);
}
.ro_scherm.sr-lijn .sr_intro_lijn { width:260px; }
.sr_intro_sub,
.cl_intro_sub
{
	font-family:p;
	font-size:13px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:#ffffffb0;
	text-shadow:none;
	white-space:nowrap;
	opacity:0;
	transition:opacity .6s ease;
}
.ro_scherm.sr-sub .sr_intro_sub { opacity:1; }
.sr_intro_teller { display:flex; gap:6px; align-items:flex-end; width:100%; margin-top:14px; }
.sr_cijfer { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; }
.sr_cijfer_img
{
	width:96px;
	height:102px;
	background:center / contain no-repeat;
	filter:drop-shadow(0 8px 20px #000000aa) drop-shadow(0 0 20px var(--tkcc));
	opacity:0;
	transform:scale(.28) rotate(-22deg);
	transition:opacity .34s ease, transform .82s cubic-bezier(.34, 1.56, .64, 1);
}
.sr_cijfer.aan .sr_cijfer_img { opacity:1; transform:scale(1) rotate(0deg); animation:roBob 3.4s ease-in-out var(--bd, 0ms) infinite; }
.sr_cijfer_gloed
{
	position:absolute;
	left:50%;
	top:42px;
	width:150px;
	height:150px;
	border-radius:50%;
	transform:translate(-50%, -50%);
	pointer-events:none;
	z-index:-1;
	opacity:0;
	transition:opacity .7s ease;
	background:radial-gradient(circle, var(--tk77), transparent 66%);
}
.sr_cijfer.aan .sr_cijfer_gloed { opacity:.85; }
.sr_cijfer_ring { display:none; }
.sr_cijfer.aan .sr_cijfer_ring
{
	display:block;
	position:absolute;
	left:50%;
	top:42px;
	width:96px;
	height:96px;
	border-radius:50%;
	border:3px solid var(--tk);
	box-shadow:0 0 26px var(--tk);
	pointer-events:none;
	animation:roRing .8s ease-out forwards;
}
.sr_cijfer_spark { display:none; }
.sr_cijfer.aan .sr_cijfer_spark
{
	display:block;
	position:absolute;
	left:50%;
	top:40px;
	font-style:normal;
	letter-spacing:4px;
	font-size:12px;
	color:#fff6cf;
	text-shadow:0 0 10px #fff;
	animation:roSparkle 1.1s ease-out forwards;
	pointer-events:none;
}
.sr_cijfer_naam
{
	font-family:'headers';
	font-size:13px;
	letter-spacing:1px;
	opacity:0;
	transform:translateY(10px);
	transition:.5s ease 220ms;
}
.sr_cijfer_rang
{
	font-family:'headers';
	font-size:15px;
	letter-spacing:1px;
	color:var(--tk);
	opacity:0;
	transform:translateY(10px);
	transition:.5s ease 300ms;
}
.sr_cijfer.aan .sr_cijfer_naam,
.sr_cijfer.aan .sr_cijfer_rang { opacity:1; transform:translateY(0); }

/* ── 6 · season · fase 2 LEAGUE RESULTS ─────────────────────────────────── */

.sr_leagues { gap:10px !important; }
.sr_kaart
{
	position:relative;
	display:flex;
	align-items:center;
	gap:12px;
	width:100%;
	box-sizing:border-box;
	padding:12px 13px;
	border-radius:15px;
	border:3px solid var(--tk99);
	background:linear-gradient(100deg, var(--tk24), #17004099);
	opacity:0;
	transform:translateX(44px) scale(.94);
	transition:opacity .5s ease, transform .6s cubic-bezier(.2, .9, .2, 1);
}
.sr_kaart.aan { opacity:1; transform:translateX(0) scale(1); }
.sr_kaart_trofee
{
	width:58px;
	height:62px;
	flex:none;
	background:center / contain no-repeat;
	filter:drop-shadow(0 4px 14px #000000aa) drop-shadow(0 0 14px var(--tk88));
	animation:roBob 3.4s ease-in-out infinite;
}
.sr_kaart_tekst { display:flex; flex-direction:column; align-items:flex-start; gap:3px; flex:1; min-width:0; }
.sr_kaart_rang { font-family:'headers'; font-size:22px; letter-spacing:1px; color:var(--tk); }
.sr_kaart_plaats { font-family:p; font-size:11px; color:#ffffffb0; text-shadow:none; }
.sr_kaart_bank { flex:none; font-family:'headers'; font-size:16px; letter-spacing:1px; white-space:nowrap; color:#f0c437; }
.sr_claimhint
{
	font-family:p;
	font-size:10px;
	letter-spacing:1px;
	text-transform:uppercase;
	color:#ffffff8a;
	text-shadow:none;
	white-space:nowrap;
	opacity:0;
	transition:opacity .5s ease;
}
.ro_scherm.sr-claimhint .sr_claimhint { opacity:1; }

/* ── 7 · season · fase 3 NEW STARTING RANK ──────────────────────────────── */

.sr_disc
{
	font-family:p;
	font-size:11px;
	letter-spacing:3px;
	text-transform:uppercase;
	text-shadow:none;
	color:var(--tk);
	opacity:0;
	transition:opacity .5s ease .15s;
}
.ro_scherm.ro-kop .sr_disc { opacity:1; }
.sr_hero
{
	position:relative;
	width:100%;
	height:330px;
	flex:none;
	display:flex;
	align-items:center;
	justify-content:center;
}
.sr_heroring { display:none; }
.sr_heroring.aan
{
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	width:150px;
	height:150px;
	border-radius:50%;
	border:4px solid var(--tk);
	box-shadow:0 0 40px var(--tk);
	z-index:7;
	pointer-events:none;
	animation:roRingBig .95s ease-out forwards;
}
.sr_core,
.cl_core
{
	position:absolute;
	left:50%;
	top:50%;
	width:120px;
	height:120px;
	border-radius:50%;
	pointer-events:none;
	z-index:8;
	background:radial-gradient(circle, #ffffff, var(--tkcc) 38%, transparent 70%);
	transform:translate(-50%, -50%) scale(.05);
	opacity:0;
	transition:transform .55s cubic-bezier(.2, .9, .2, 1), opacity .55s ease;
}
.sr_core.n1, .cl_core.n1 { transform:translate(-50%, -50%) scale(.55); opacity:.95; }
.sr_core.n2, .cl_core.n2 { transform:translate(-50%, -50%) scale(2.4); opacity:0; }
.sr_trofee
{
	position:absolute;
	left:50%;
	top:44%;
	width:242px;
	height:258px;
	z-index:7;
	pointer-events:none;
	background:center / contain no-repeat;
	filter:drop-shadow(0 8px 26px #000000aa) drop-shadow(0 0 26px var(--tkcc));
	transition:transform .9s cubic-bezier(.34, 1.56, .64, 1), opacity .5s ease;
	opacity:0;
	transform:translate(-50%, -50%) scale(.3);
}
/* de bob draagt de centrering zelf, anders overschrijft de animatie translate(-50%,-50%) */
.ro_scherm.sr-reveal .sr_trofee { opacity:1; transform:translate(-50%, -50%) scale(1); animation:roBobHero 3.6s ease-in-out 1.2s infinite; }
.sr_pips
{
	position:absolute;
	left:50%;
	bottom:34px;
	transform:translateX(-50%);
	display:flex;
	gap:7px;
	z-index:8;
	opacity:0;
	transition:opacity .5s ease;
}
.ro_scherm.sr-reveal .sr_pips { opacity:1; }
.sr_pips i
{
	width:11px;
	height:11px;
	display:block;
	box-sizing:border-box;
	transform:rotate(45deg) scale(.85);
	border:1px solid var(--tk66);
	background:#00000055;
}
.sr_pips i:nth-child(1) { transition:.35s ease 90ms; }
.sr_pips i:nth-child(2) { transition:.35s ease 180ms; }
.sr_pips i:nth-child(3) { transition:.35s ease 270ms; }
.ro_scherm[data-pips="1"] .sr_pips i:nth-child(-n+1),
.ro_scherm[data-pips="2"] .sr_pips i:nth-child(-n+2),
.ro_scherm[data-pips="3"] .sr_pips i:nth-child(-n+3)
{
	border:0;
	background:var(--tk);
	box-shadow:0 0 8px var(--tk88);
	transform:rotate(45deg) scale(1);
}
.sr_rangnaam
{
	position:absolute;
	left:0;
	right:0;
	bottom:8px;
	text-align:center;
	font-family:'headers';
	font-size:22px;
	letter-spacing:1px;
	text-transform:uppercase;
	color:#FFC46B;
	z-index:8;
	opacity:0;
	transition:opacity .6s ease .15s;
}
.ro_scherm.sr-reveal .sr_rangnaam { opacity:1; }
.sr_van
{
	position:absolute;
	left:0;
	right:0;
	bottom:-8px;
	text-align:center;
	font-family:p;
	font-size:11px;
	letter-spacing:1px;
	text-transform:uppercase;
	color:#ffffff8a;
	text-shadow:none;
	z-index:8;
	opacity:0;
	transition:opacity .5s ease;
}
.ro_scherm.sr-carry .sr_van { opacity:1; }
.sr_headline,
.cl_headline
{
	flex:none;
	font-family:'headers';
	font-size:30px;
	white-space:nowrap;
	letter-spacing:9px;
	color:#f0c437;
	text-shadow:0 0 18px #f0c43788, 0 2px 0 #000;
	opacity:0;
	transform:scale(.4);
	transition:opacity .4s ease, transform .8s cubic-bezier(.34, 1.56, .64, 1), letter-spacing .8s ease;
}
.ro_scherm.sr-headline .sr_headline { opacity:1; letter-spacing:1px; transform:scale(1); }
.sr_meter
{
	position:relative;
	display:flex;
	gap:8px;
	width:min(340px, 84vw);
	height:28px;
	flex:none;
}
.sr_blok
{
	position:relative;
	flex:1;
	height:28px;
	z-index:1;
	transform:scale(1);
	opacity:0;
	transition:transform .34s cubic-bezier(.2, 1.9, .5, 1), opacity .45s ease;
}
.sr_blok:nth-child(2) { transition-delay:0s, 60ms; }
.sr_blok:nth-child(3) { transition-delay:0s, 120ms; }
.sr_blok:nth-child(4) { transition-delay:0s, 180ms; }
.ro_scherm.sr-reveal .sr_blok { opacity:1; }
.sr_blok.snap { z-index:3; transform:scale(1.13); }
.sr_put
{
	position:absolute;
	inset:0;
	border:2px solid var(--tk88);
	border-radius:8px;
	background:#0b0318d9;
	overflow:hidden;
	box-sizing:border-box;
	box-shadow:inset 0 2px 6px #00000088;
	transition:box-shadow .3s ease, border-color .3s ease;
}
.sr_blok.snap .sr_put { box-shadow:0 0 28px var(--tk), 0 0 10px #fff; }
.sr_vul
{
	display:block;
	height:100%;
	width:100%;
	transform-origin:center bottom;
	transform:translateY(-220px) scaleY(.55);
	background:linear-gradient(180deg, #fff6cf, var(--tk));
	box-shadow:0 0 16px var(--tkcc);
	opacity:0;
	transition:transform .42s cubic-bezier(.3, 1.5, .5, 1), opacity .12s linear;
}
.sr_blok.vol .sr_vul { transform:translateY(0) scaleY(1); opacity:1; }
.sr_ring,
.sr_spark { display:none; }
.sr_blok.snap .sr_ring
{
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	width:44px;
	height:44px;
	border-radius:50%;
	border:3px solid #fff6cf;
	animation:roRing .7s ease-out forwards;
	pointer-events:none;
}
.sr_blok.snap .sr_spark
{
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	font-style:normal;
	letter-spacing:3px;
	font-size:11px;
	color:#fff;
	text-shadow:0 0 8px #fff;
	animation:roSparkle 1.1s ease-out forwards;
	pointer-events:none;
}
.sr_bloktekst
{
	font-family:p;
	font-size:11px;
	letter-spacing:1px;
	text-transform:uppercase;
	color:#ffffff8a;
	text-shadow:none;
	opacity:0;
	transition:opacity .5s ease;
}
.ro_scherm.sr-bloktekst .sr_bloktekst { opacity:1; }
.sr_dots,
.cl_dots { display:flex; gap:6px; align-items:center; opacity:0; transition:opacity .5s ease; }
.ro_scherm.sr-carry .sr_dots { opacity:1; }
.sr_dots i,
.cl_dots i { display:block; width:8px; height:8px; border-radius:5px; background:#ffffff2e; transition:.4s ease; }
.sr_dots i.nu { width:26px; background:#f0c437; }
.sr_dots i.was { background:#f0c43777; }

/* ── 8 · season · fase 4 TROPHY + BANK CLAIM ────────────────────────────── */

.sr_bank
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2px;
	padding:14px 26px;
	border-radius:16px;
	border:1px solid #f0c43755;
	background:#17004099;
	opacity:0;
	transform:scale(.8);
	transition:opacity .5s ease, transform .6s cubic-bezier(.34, 1.5, .6, 1);
}
.ro_scherm.sr-bank1 .sr_bank { opacity:1; transform:scale(.92); }
.ro_scherm.sr-bank2 .sr_bank { opacity:1; transform:scale(1); }
.sr_bank b { font-family:'headers'; font-size:34px; letter-spacing:1px; color:#FFC46B; }

/* ── 9 · classic · fase 1 WEEK COMPLETE ─────────────────────────────────── */

.cl_intro { justify-content:center; gap:14px !important; }
.cl_intro_week
{
	font-family:p;
	font-size:12px;
	letter-spacing:4px;
	text-transform:uppercase;
	color:#ffffff8a;
	text-shadow:none;
	white-space:nowrap;
	opacity:0;
	transition:opacity .6s ease .1s;
}
.cl_intro_kop
{
	font-family:'headers';
	font-size:52px;
	line-height:.94;
	text-align:center;
	letter-spacing:2px;
	white-space:nowrap;
	color:#fff;
	text-shadow:0 0 26px #f0c43788, 0 3px 0 #000;
	opacity:0;
}
.ro_scherm.cl-stamp .cl_intro_week { opacity:1; }
.ro_scherm.cl-stamp .cl_intro_kop { opacity:1; animation:roStamp .6s cubic-bezier(.2, .9, .2, 1) forwards; }
.cl_intro_kop2
{
	font-family:'headers';
	font-size:34px;
	letter-spacing:6px;
	white-space:nowrap;
	color:#f0c437;
	text-shadow:0 0 20px #f0c43766, 0 2px 0 #000;
	margin-top:-6px;
	opacity:0;
	transform:scale(.6);
	transition:opacity .4s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1);
}
.ro_scherm.cl-stamp2 .cl_intro_kop2 { opacity:1; transform:scale(1); }
.ro_scherm.cl-lijn .cl_intro_lijn { width:250px; }
.ro_scherm.cl-sub .cl_intro_sub { opacity:1; }
.cl_intro_rij { display:flex; gap:10px; align-items:flex-start; width:100%; margin-top:4px; }
.cl_trofee
{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:5px;
	padding-top:18px;
	opacity:0;
	transform:translateY(22px) scale(.8);
	transition:opacity .55s ease, transform .7s cubic-bezier(.34, 1.5, .6, 1);
}
.cl_trofee.eerste { padding-top:0; }
.cl_trofee:nth-child(2) { transition-delay:150ms; }
.cl_trofee:nth-child(3) { transition-delay:300ms; }
.ro_scherm.cl-teller .cl_trofee { opacity:1; transform:translateY(0) scale(1); }
.cl_trofee_art { position:relative; width:78px; height:84px; flex:none; }
.cl_trofee_strepen { display:none; }
.cl_trofee.eerste .cl_trofee_strepen
{
	display:block;
	position:absolute;
	left:50%;
	top:44%;
	width:196px;
	height:196px;
	transform:translate(-50%, -50%);
	pointer-events:none;
	z-index:0;
	opacity:0;
	transition:opacity .8s ease 120ms;
	animation:roStralen 14s linear infinite;
	-webkit-mask-image:radial-gradient(circle, #000 30%, #0000 72%);
	mask-image:radial-gradient(circle, #000 30%, #0000 72%);
	background:repeating-conic-gradient(from 0deg, var(--dk73) 0deg, transparent 13deg, var(--dk73) 26deg, transparent 39deg);
}
.ro_scherm.cl-teller .cl_trofee.eerste .cl_trofee_strepen { opacity:.55; }
.cl_trofee_img
{
	position:absolute;
	inset:0;
	z-index:1;
	background:radial-gradient(circle at 42% 32%, #ffffff1f, #00000055);
	border-radius:50%;
	border:2px solid var(--dk66);
	box-shadow:inset 0 2px 10px #00000099;
	box-sizing:border-box;
	animation:roBob 3s ease-in-out infinite;
}
.cl_trofee:nth-child(2) .cl_trofee_img { animation-duration:3.4s; animation-delay:200ms; }
.cl_trofee:nth-child(3) .cl_trofee_img { animation-duration:3.8s; animation-delay:400ms; }
.cl_trofee.eerste .cl_trofee_img
{
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	border:0;
	border-radius:0;
	box-shadow:none;
	filter:drop-shadow(0 6px 18px #000000aa) drop-shadow(0 0 20px var(--dk99));
}
.cl_trofee_plaats
{
	position:absolute;
	left:50%;
	top:50%;
	z-index:2;
	transform:translate(-50%, -50%);
	font-family:'headers';
	font-size:26px;
	letter-spacing:1px;
	color:var(--dk);
}
.cl_trofee.eerste .cl_trofee_plaats { font-size:0; opacity:0; }
.cl_trofee_naam { font-family:'headers'; font-size:12px; letter-spacing:1px; white-space:nowrap; color:var(--dk); }
.cl_trofee_score { font-family:'headers'; font-size:17px; letter-spacing:.5px; white-space:nowrap; color:#fff; }
.cl_loon
{
	display:flex;
	align-items:center;
	gap:4px;
	padding:4px 7px;
	border-radius:8px;
	background:#00000055;
	border:1px solid #ffffff1a;
}
.cl_loon small { font-family:'headers'; font-size:11px; letter-spacing:.5px; white-space:nowrap; color:#ffffffdd; text-shadow:none; }
.cl_loon_leeg small { font-family:p; font-size:10px; color:#ffffff8a; white-space:normal; text-align:center; }
.cl_chip_ico { display:block; width:15px; height:15px; flex:none; background:center / contain no-repeat; }

/* ── 10 · classic · fase 2 FINAL STANDINGS ──────────────────────────────── */

.cl_board { gap:8px !important; }
.cl_board .ro_scroll { gap:8px; }
.cl_dots { transform:translateY(-10px); transition:opacity .45s ease, transform .5s ease; }
.ro_scherm.cl-tabs .cl_dots { opacity:1; transform:translateY(0); }
.cl_dots i { border-radius:4px; transition:width .35s cubic-bezier(.2, .9, .2, 1), background .3s ease; }
.cl_dots i.nu { width:26px; background:var(--dk); }
.cl_podium { display:flex; align-items:flex-end; gap:8px; width:100%; padding:4px 0 2px; flex:0 0 auto; }
.cl_podium_kolom
{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:5px;
	padding-top:16px;
	opacity:0;
	transform:translateY(26px) scale(.86);
	transition:opacity .45s ease, transform .6s cubic-bezier(.34, 1.5, .6, 1);
}
.cl_podium_kolom.p1 { padding-top:0; }
.cl_podium_kolom.aan { opacity:1; transform:translateY(0) scale(1); }
.cl_podium_kolom.leeg { visibility:hidden; }
.cl_podium_plek { font-family:'headers'; font-size:14px; letter-spacing:1px; color:var(--ring); }
.cl_podium_kolom.p1 .cl_podium_plek { font-size:17px; }
.cl_podium_naam { font-family:'headers'; font-size:13px; letter-spacing:.5px; color:#fff; white-space:nowrap; }
.cl_podium_kolom.p1 .cl_podium_naam { font-size:15px; }
.cl_podium_score { font-family:p; font-size:11px; color:#ffffffb0; text-shadow:none; white-space:nowrap; }
.cl_avatar
{
	position:relative;
	flex:none;
	width:var(--m);
	height:var(--m);
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	overflow:hidden;
	font-family:'headers';
	font-size:calc(var(--m) * .4);
	letter-spacing:0;
	color:#fff;
	text-shadow:0 2px #00000099;
	background:linear-gradient(150deg, #c19eff, #6631c3);
	border:max(2px, calc(var(--m) * .05)) solid var(--ring, #ffffff33);
	box-shadow:0 4px 12px #00000077;
}
.cl_avatar.ik { background:linear-gradient(150deg, #ffd700, #ff7700); border-color:#f0c437; }
.cl_avatar.glow { box-shadow:0 0 calc(var(--m) * .34) color-mix(in srgb, var(--ring, #f0c437) 67%, transparent), 0 6px 18px #00000088; }
.cl_avatar > img { position:absolute; inset:0; object-fit:cover; border-radius:50%; }
.ro_scherm .cl_avatar > span { position:relative; font-family:'headers'; font-size:calc(var(--m) * .4); }
.newHighscore.ro_scherm .cl_avatar > img + span { display:none; }	/* monogram is de terugval: onerror haalt de img weg en de span verschijnt; (0,3,2) boven CubeRunnerz' display:block */
.cl_avatar.leeg { background:#00000033; border-color:#ffffff1a; }
.cl_rijen { display:flex; flex-direction:column; gap:5px; width:100%; }
.cl_rij
{
	display:flex;
	align-items:center;
	gap:10px;
	width:100%;
	box-sizing:border-box;
	padding:8px 11px;
	border-radius:11px;
	border:1px solid #ffffff1a;
	background:#00000042;
	opacity:0;
	transform:translateX(34px);
	transition:opacity .4s ease, transform .5s cubic-bezier(.2, .9, .2, 1);
}
.cl_rij.aan { opacity:1; transform:translateX(0); }
.cl_rij.ik { border-color:#f0c437; background:#f0c4371f; box-shadow:0 0 16px #f0c43733; }
.cl_rij_plek { flex:none; width:26px; font-family:'headers'; font-size:14px; color:#ffffff8a; }
.cl_rij.ik .cl_rij_plek { color:#f0c437; }
.cl_rij_tekst { display:flex; flex-direction:column; align-items:flex-start; min-width:0; flex:1; }
.cl_rij_tekst b { font-family:'headers'; font-size:15px; letter-spacing:.5px; white-space:nowrap; color:#fff; }
.cl_rij.ik .cl_rij_tekst b { color:#f0c437; }
.cl_rij_tekst small { font-family:p; font-size:10px; color:#ffffff8a; text-shadow:none; white-space:nowrap; }
.cl_rij_score { margin-left:auto; font-family:'headers'; font-size:15px; white-space:nowrap; color:#ffffffcc; }
.cl_rij.ik .cl_rij_score { color:#f0c437; }

/* ── 11 · classic · fase 3 NEW WEEK + GIFTS ─────────────────────────────── */

.cl_newweek { gap:9px !important; }
.cl_hero
{
	position:relative;
	width:100%;
	height:142px;
	flex:none;
	display:flex;
	align-items:center;
	justify-content:center;
}
.cl_heroring { display:none; }
.cl_heroring.aan
{
	display:block;
	position:absolute;
	left:50%;
	top:46%;
	width:160px;
	height:160px;
	border-radius:50%;
	border:4px solid #ffd700;
	box-shadow:0 0 40px #ffd700;
	z-index:7;
	pointer-events:none;
	animation:roRingBig .95s ease-out forwards;
}
.cl_core { top:46%; background:radial-gradient(circle, #ffffff, #ffd700cc 38%, transparent 70%); }
.cl_avatar.held
{
	position:absolute;
	left:50%;
	top:46%;
	z-index:8;
	--ring:#f0c437;
	transform:translate(-50%, -50%) scale(.3);
	opacity:0;
	transition:transform .9s cubic-bezier(.34, 1.56, .64, 1), opacity .5s ease;
}
.ro_scherm.cl-hero .cl_avatar.held { transform:translate(-50%, -50%) scale(1); opacity:1; }
.cl_hero_trofee
{
	position:absolute;
	left:50%;
	top:46%;
	z-index:9;
	width:80px;
	height:86px;
	pointer-events:none;
	background:center / contain no-repeat;
	filter:drop-shadow(0 6px 18px #000000aa) drop-shadow(0 0 18px var(--dkcc));
	transform:translate(52px, 46px) scale(.3) rotate(18deg);
	opacity:0;
	transition:transform .8s cubic-bezier(.34, 1.56, .64, 1), opacity .45s ease;
}
.ro_scherm.cl-herotrofee .cl_hero_trofee { transform:translate(52px, 46px) scale(1) rotate(-6deg); opacity:1; }
.cl_hero_naam
{
	flex:none;
	text-align:center;
	font-family:p;
	font-size:11px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:#ffffffb0;
	text-shadow:none;
	white-space:nowrap;
	opacity:0;
	transition:opacity .6s ease .2s;
}
.ro_scherm.cl-hero .cl_hero_naam { opacity:1; }
.cl_headline { font-size:28px; letter-spacing:16px; }
.ro_scherm.cl-headline .cl_headline { opacity:1; letter-spacing:2px; transform:scale(1); }

/* ── 12 · keyframes (TIMELINE-SPEC §Keyframes, verbatim) ────────────────── */

@keyframes roFlash { 0% { opacity:0; } 12% { opacity:1; } 100% { opacity:0; } }
@keyframes roRing
{
	0%   { transform:translate(-50%, -50%) scale(.15); opacity:.95; }
	100% { transform:translate(-50%, -50%) scale(3.2); opacity:0; }
}
@keyframes roRingBig
{
	0%   { transform:translate(-50%, -50%) scale(.15); opacity:1; }
	70%  { opacity:.35; }
	100% { transform:translate(-50%, -50%) scale(4.6); opacity:0; }
}
@keyframes roShake
{
	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 roShakeHard
{
	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 roBobHero
{
	0%, 100% { transform:translate(-50%, -50%) scale(1); }
	50%      { transform:translate(-50%, calc(-50% - 7px)) scale(1); }
}
@keyframes roBob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes roBlink { 50% { opacity:.22; } }
@keyframes roStralen { to { transform:translate(-50%, -52%) rotate(360deg); } }
@keyframes roStreak
{
	0%   { opacity:0; transform:translate(-50%, -50%) scale(.15); }
	18%  { opacity:1; }
	100% { opacity:0; transform:translate(-50%, -50%) scale(3.4); }
}
@keyframes roSparkle
{
	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 roStamp
{
	0%   { opacity:0; transform:scale(2.6); filter:blur(7px); }
	60%  { opacity:1; filter:blur(0); }
	100% { opacity:1; transform:scale(1); }
}
@keyframes roPop { 0% { transform:scale(1); } 40% { transform:scale(1.32); } 100% { transform:scale(1); } }

@media (prefers-reduced-motion: reduce)
{
	.ro_shake.s1, .ro_shake.s2, .ro_streaks.n1, .ro_streaks.n2 { animation:none; }
}