/* ═══════════════════════════════════════════════════════════════════════════
   CLAIM REWARDS (design/Claim_Rewards) — één claim-motor voor elk
   beloningsmoment: PvP-payout, challenges (dag/week/maand), kluis
   (seizoensbank), weekly digest, giftway/XP-rewards, missies, wiel en de
   nieuwe WEEKLY MYSTERY in de shop.

   Drie bouwstenen:
     §1  de "claimbaar"-jas: statische topglans + roterende conic-rand
         (.clm_host > .clm_shine + .clm_rim). De rand is een GPU-transform
         van een overmaats conic-kind, geknipt met mask + clip-path — op iOS
         knipt overflow:hidden een gecomposite kind NIET (handoff §4), en een
         geanimeerde @property-hoek repaint per element per frame.
     §2  het YOU RECEIVED-overnamescherm (#rewardsReceived.clm_reveal):
         held-kaart + 2-koloms rooster, wacht op een tik, laadt op, dan
         vliegen de tokens naar hun pil in de header.
     §3  de vlucht: tokens (.clm_token, alleen transform/opacity, GEEN
         filter), pil-flits (.clm_pop), zwevend "+N" (.clm_float), confetti.
     §4  de WEEKLY MYSTERY-pane in de shop (.mys_*).

   Laadt ná cubelegend-shop.css (de mystery-pane leent .shop-sectie) en ná
   cubelegend-auth.css (.cl-btn).
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes clm_trace     { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes clm_breathe   { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.03); } }
@keyframes clm_shake     { 0%,100% { transform: translate(0,0) rotate(0deg); } 20% { transform: translate(-5px,2px) rotate(-3deg); } 40% { transform: translate(6px,-3px) rotate(3deg); } 60% { transform: translate(-6px,-1px) rotate(-4deg); } 80% { transform: translate(5px,3px) rotate(2deg); } }
@keyframes clm_pop       { 0% { transform: scale(.2) rotate(-16deg); opacity: 0; } 55% { transform: scale(1.22) rotate(4deg); opacity: 1; } 75% { transform: scale(.94) rotate(-2deg); } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes clm_bigpop    { 0% { transform: scale(.15) rotate(-24deg); opacity: 0; } 50% { transform: scale(1.3) rotate(6deg); opacity: 1; } 72% { transform: scale(.92) rotate(-3deg); } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes clm_ring      { 0% { transform: scale(.35); opacity: .95; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes clm_bigring   { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes clm_spark     { 0% { transform: rotate(var(--a,0deg)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a,0deg)) translateY(-46px) scale(0); opacity: 0; } }
@keyframes clm_bigspark  { 0% { transform: rotate(var(--a,0deg)) translateY(0) scale(1.4); opacity: 1; } 100% { transform: rotate(var(--a,0deg)) translateY(-130px) scale(0); opacity: 0; } }
@keyframes clm_flash     { 0% { opacity: 0; } 12% { opacity: .8; } 100% { opacity: 0; } }
@keyframes clm_glowpulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes clm_rise      { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes clm_fade      { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes clm_impact    { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes clm_drop      { 0% { transform: translateX(-50%) translateY(-6px) scale(.7); opacity: 0; } 22% { transform: translateX(-50%) translateY(2px) scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(-50%) translateY(26px) scale(1); opacity: 0; } }
@keyframes clm_confetti  { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(760px) rotate(var(--r,540deg)); opacity: 0; } }
@keyframes clm_idleglow  { 0%,100% { opacity: .35; } 50% { opacity: .95; } }
@keyframes clm_bloom     { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .95; transform: scale(1.14); } }
@keyframes clm_edge      { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes clm_bubble    { 0% { transform: translateY(0) translateX(0) scale(.4); opacity: 0; } 12% { opacity: 1; } 72% { opacity: .8; } 100% { transform: translateY(-520px) translateX(var(--bx,0px)) scale(1.05); opacity: 0; } }
@keyframes clm_shimmer   { 0%,100% { opacity: .3; transform: scale(1); } 50% { opacity: .85; transform: scale(1.12); } }
@keyframes clm_charge    { 0% { opacity: 0; transform: scale(1); } 30% { opacity: 1; } 100% { opacity: .9; transform: scale(1.045); } }
@keyframes clm_pillbump  { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes clm_hearts    { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.25); filter: brightness(1.8); } 100% { transform: scale(1); filter: brightness(1); } }


/* ══ 1 · DE CLAIMBAAR-JAS ══════════════════════════════════════════════════
   Gebruik: ClaimRewards.dress(el, {tint}) → el krijgt .clm_host, een
   .clm_shine en een .clm_rim als eerste kinderen en --clm-tint. Geclaimd:
   ClaimRewards.undress(el) → rand weg (.clm_claimed), glans blijft.        */

.clm_host
{
	position: relative;
	isolation: isolate;
	--clm-tint: #FFC107;
	--clm-r: 7px;
}
.clm_host.clm_vip { --clm-tint: #c49bff; }
.adventureClaimable.clm_host { --clm-r: 10px; }
.reward_wrapper.clm_host { --clm-r: 8px; }
.xpPathRewards.clm_host { --clm-r: 8px; }
.clm_host.clm_glow
{
	box-shadow: 0 0 12px color-mix(in srgb, var(--clm-tint) 30%, transparent), 0 2px 0 #00000059;
}
/* de statische topglans (ontwerp: 177deg, wit 30% → 12% → niets op 31%) */
.clm_shine
{
	position: absolute;
	inset: 0;
	border-radius: var(--clm-r);
	pointer-events: none;
	z-index: -1;
	background: linear-gradient(177deg, #ffffff30 0%, #ffffff12 30%, transparent 31%);
}
/* de roterende rand: een ring-masker (content-box uitgesneden) over een
   overmaats conic-kind dat alleen via transform draait */
.clm_rim
{
	position: absolute;
	inset: 0;
	border-radius: var(--clm-r);
	padding: 2px;
	box-sizing: border-box;
	pointer-events: none;
	overflow: hidden;
	clip-path: inset(0 round var(--clm-r));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	z-index: 5;
}
.clm_rim::before
{
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 260%;
	aspect-ratio: 1 / 1;
	will-change: transform;
	background: conic-gradient(from 0deg,
		transparent 0deg, var(--clm-tint) 22deg, #ffffff 32deg, var(--clm-tint) 42deg, transparent 66deg,
		transparent 180deg, color-mix(in srgb, var(--clm-tint) 65%, transparent) 202deg, transparent 232deg);
	animation: clm_trace var(--clm-spin, 3.6s) linear var(--clm-delay, 0s) infinite;
}
/* een zwakke basisrand zodat de ring ook "stil" leesbaar is */
.clm_rim::after
{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: color-mix(in srgb, var(--clm-tint) 22%, transparent);
}
.clm_host.clm_claimed .clm_rim,
.claimed .clm_rim,
.is-af .clm_rim,
.geclaimd .clm_rim,
.adventureClaimed .clm_rim
{
	display: none;
}
.clm_host.clm_claimed.clm_glow { box-shadow: 0 2px 0 #00000059; }
/* een tegel die de motor met .clm_dim markeert (bv. PvP-tegels na de claim) */
.clm_host.clm_claimed .clm_dim { position: absolute; inset: 0; background: #0b031899; border-radius: inherit; z-index: 4; pointer-events: none; }

/* de bestaande daily-streak-tegels droegen vier lopende balken; die maken
   plaats voor de rand */
.clm_host > .reward_animated_bar { display: none; }

@media (prefers-reduced-motion: reduce)
{
	.clm_rim::before { animation: none; }
}


/* ══ 2 · YOU RECEIVED ══════════════════════════════════════════════════════ */

#rewardsReceived.clm_reveal
{
	position: fixed;
	inset: 0;
	z-index: 2147483100;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #0b0318;
	color: #fff;
	font-family: p, sans-serif;
	-webkit-font-smoothing: antialiased;
	cursor: pointer;
	animation: clm_fade .18s ease-out both;
	transition: opacity .38s ease;
	--held: #FFC107;
}
#rewardsReceived.clm_reveal.clm_weg { opacity: 0; pointer-events: none; }

.clm_kop
{
	position: relative;
	flex: none;
	padding: calc(env(safe-area-inset-top) + 16px) 14px 14px;
	background: linear-gradient(180deg, #5b3596 0%, #3d1f6b 100%);
	box-shadow: 0 3px 0 #00000059;
	overflow: hidden;
}
.clm_kop > .clm_bloom_l,
.clm_kop > .clm_bloom_r
{
	position: absolute;
	top: -120%;
	width: 60%;
	height: 260%;
	border-radius: 50%;
	/* géén filter:blur meer: een geblurde, geanimeerde laag van deze maat kost
	   op iOS per frame een offscreen-textuur op 3x; bovenop de rollover (twee
	   stofcanvassen + confetti) crashte WebKit precies op het YOU RECEIVED-
	   moment (14 sep). De zachtheid zit nu in de gradient zelf. */
	pointer-events: none;
}
.clm_kop > .clm_bloom_l { left: -10%; background: radial-gradient(circle, #ffc10761 0%, #ffc10738 30%, #ffc10714 55%, transparent 72%); animation: clm_bloom 7s ease-in-out infinite; }
.clm_kop > .clm_bloom_r { right: -10%; background: radial-gradient(circle, #c49bff54 0%, #c49bff30 30%, #c49bff12 55%, transparent 72%); animation: clm_bloom 9s ease-in-out 1.2s infinite; }
.clm_kop > .clm_edge
{
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, #ffd67a, transparent);
	opacity: .3;
	animation: clm_edge 4s ease-in-out infinite;
	pointer-events: none;
}
.clm_kop_rij
{
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
}
.clm_kop_rij > img
{
	height: 56px;
	flex: none;
	object-fit: contain;
	animation: clm_breathe 2.8s ease-in-out infinite;
	filter: drop-shadow(0 4px 8px #00000073);
}
.clm_kop_tekst { flex: 1; min-width: 0; }
.clm_kop_tekst h1
{
	margin: 0;
	font-family: headers, sans-serif;
	font-size: 25px;
	letter-spacing: 1.5px;
	line-height: 1;
	text-shadow: 0 3px #00000080;
	color: #fff;
}
.clm_kop_tekst small
{
	display: block;
	font-size: 9px;
	letter-spacing: 2px;
	color: #ffffffa8;
	margin-top: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
}
.clm_kop_teller
{
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #ffffff2b;
	border-radius: 9px;
	background: #00000059;
	padding: 5px 9px;
}
.clm_kop_teller b { font-family: headers, sans-serif; font-size: 17px; font-weight: normal; line-height: 1; color: #FFC107; }
.clm_kop_teller span { font-size: 7px; letter-spacing: 1.5px; color: #ffffff8a; margin-top: 2px; }

.clm_lijf
{
	position: relative;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: radial-gradient(90% 55% at 50% 22%, #3a1a63 0%, #1d0836 46%, #0b0318 82%);
	-webkit-overflow-scrolling: touch;
}
/* de drie kleurwolken + bokeh — géén straalwaaiers (expliciet afgekeurd) */
.clm_wolken { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.clm_wolken > i
{
	position: absolute;
	border-radius: 50%;
	/* zonder filter:blur (zie .clm_bloom_*): drie schermgrote geblurde wolken
	   die pulseren waren de zwaarste laag van het scherm */
	animation: clm_bloom 9s ease-in-out infinite;
}
.clm_wolken > i:nth-child(1) { left: -18%; top: -14%; width: 78%; height: 52%; background: radial-gradient(circle, #7b3fd166 0%, #7b3fd140 28%, #7b3fd118 52%, transparent 72%); }
.clm_wolken > i:nth-child(2) { right: -22%; top: 8%; width: 72%; height: 46%; background: radial-gradient(circle, #c9861f4d 0%, #c9861f30 28%, #c9861f12 52%, transparent 72%); animation-duration: 11s; animation-delay: 1.4s; }
.clm_wolken > i:nth-child(3) { left: 8%; bottom: -16%; width: 84%; height: 48%; background: radial-gradient(circle, #4a2b7d80 0%, #4a2b7d50 28%, #4a2b7d1e 52%, transparent 74%); animation-duration: 13s; animation-delay: .8s; }
.clm_bokeh { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.clm_bokeh > span
{
	position: absolute;
	bottom: -6%;
	border-radius: 50%;
	animation: clm_bubble 6s linear infinite;
}

.clm_held_wrap { position: relative; flex: none; padding: 16px 16px 6px; }

/* elke kaart: een frame (rand + burst) om een dekkende binnenkaart */
.clm_kaart
{
	position: relative;
	padding: 2px;
	border-radius: 7px;
	--clm-r: 7px;
	background: color-mix(in srgb, var(--clm-tint) 16%, transparent);
	box-shadow: 0 0 10px color-mix(in srgb, var(--clm-tint) 27%, transparent), 0 2px 0 #00000059;
	animation: clm_pop .5s cubic-bezier(.2,1.4,.4,1) var(--clm-in, 0s) both;
}
.clm_kaart.clm_held
{
	/* zelfde randbreedte als de tegels en de rest van de haul (design/
	   Rollover_*: het uitgelichte item draagt een 2px-rand, niet dikker) */
	padding: 2px;
	border-radius: 10px;
	--clm-r: 10px;
	background: color-mix(in srgb, var(--clm-tint) 22%, transparent);
	box-shadow: 0 0 22px color-mix(in srgb, var(--clm-tint) 36%, transparent), 0 3px 0 #00000073;
	animation: clm_bigpop .62s cubic-bezier(.2,1.5,.4,1) .12s both;
}
.clm_kaart_in
{
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 9px;
	padding: 9px 10px;
	border-radius: 5px;
	overflow: hidden;
	background:
		linear-gradient(177deg, #ffffff30 0%, #ffffff12 26%, transparent 27%),
		linear-gradient(180deg, #2e1450 0%, #180628 100%);
	box-shadow: inset 0 1px 0 #ffffff59, inset 0 -8px 12px #00000040;
}
.clm_held .clm_kaart_in
{
	gap: 14px;
	padding: 14px;
	border-radius: 8px;
	background:
		linear-gradient(177deg, #ffffff29 0%, #ffffff0f 22%, transparent 23%),
		linear-gradient(180deg, color-mix(in srgb, var(--clm-tint) 12%, transparent) 0%, color-mix(in srgb, var(--clm-tint) 4%, transparent) 40%, transparent 100%),
		linear-gradient(180deg, #2d1152 0%, #150525 100%);
	box-shadow: inset 0 1px 0 #ffffff59, inset 0 -10px 16px #00000040;
}
/* de ademende binnengloed; bij het opladen (na de tik) slaat hij door */
.clm_lading
{
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 14px color-mix(in srgb, var(--clm-tint) 22%, transparent);
	animation: clm_idleglow 2.4s ease-in-out var(--clm-in, 0s) infinite;
}
/* de tik op TAP TO COLLECT laadt de kaarten op: elke rand draait van zijn
   rustige eigen tempo naar één omwenteling per .85s (design/Rollover_*) */
.clm_reveal.clm_charging .clm_rim::before { animation-duration: .85s; }
.clm_reveal.clm_charging .clm_lading
{
	background: radial-gradient(circle, color-mix(in srgb, var(--clm-tint) 36%, transparent) 0%, transparent 72%);
	box-shadow: inset 0 0 20px color-mix(in srgb, var(--clm-tint) 60%, transparent);
	animation: clm_charge .4s ease-out var(--clm-in, 0s) both;
}
.clm_kaart_beeld
{
	position: relative;
	flex: none;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.clm_held .clm_kaart_beeld { width: 104px; height: 104px; }
.clm_aura
{
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, color-mix(in srgb, var(--clm-tint) 24%, transparent) 0%, transparent 66%);
	animation: clm_shimmer 2.4s ease-in-out var(--clm-in, 0s) infinite;
}
.clm_held .clm_aura { inset: -14px; }
.clm_kaart_beeld img
{
	position: relative;
	width: 42px;
	height: 42px;
	object-fit: contain;
	filter: drop-shadow(0 0 10px color-mix(in srgb, var(--clm-tint) 54%, transparent)) drop-shadow(0 4px 6px #000000a6);
}
.clm_held .clm_kaart_beeld img
{
	width: 96px;
	height: 96px;
	filter: drop-shadow(0 0 20px color-mix(in srgb, var(--clm-tint) 77%, transparent)) drop-shadow(0 8px 10px #000000a6);
}
/* tekstkolom links uitgelijnd naast het icoon (de app zet body op center) */
.clm_kaart_tekst { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.clm_kaart_tekst > * { text-align: left; max-width: 100%; }
.clm_held .clm_kaart_tekst { gap: 4px; }
.clm_tag
{
	align-self: flex-start;
	padding: 3px 8px 4px;
	border-radius: 6px;
	font-family: headers, sans-serif;
	font-size: 8px;
	letter-spacing: 1.5px;
	color: #1a0730;
	background: var(--clm-tint);
}
.clm_kaart .reward_count
{
	position: static;
	font-family: headers, sans-serif;
	font-size: 16px;
	line-height: 1;
	text-shadow: 0 2px 0 #000;
	z-index: auto;
}
.clm_held .reward_count { font-size: 34px; text-shadow: 0 4px 0 #000, 0 0 16px #ffd67a99; }
.clm_naam
{
	font-family: headers, sans-serif;
	font-size: 8px;
	letter-spacing: 1.2px;
	color: var(--clm-tint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
}
.clm_held .clm_naam { font-size: 12px; letter-spacing: 1.5px; }
.clm_doel { font-size: 9.5px; color: #ffffff8a; }
/* burst-ring + vonken bij het verschijnen */
.clm_burst
{
	position: absolute;
	left: 50%; top: 50%;
	width: 56px; height: 56px;
	margin: -28px 0 0 -28px;
	border-radius: 50%;
	border: 3px solid var(--clm-tint);
	animation: clm_ring .6s ease-out var(--clm-in, 0s) both;
	pointer-events: none;
	z-index: 3;
}
.clm_held .clm_burst { width: 120px; height: 120px; margin: -60px 0 0 -60px; border-width: 4px; animation: clm_bigring .95s ease-out .12s both; }
.clm_vonk
{
	position: absolute;
	left: 50%; top: 50%;
	width: 4px; height: 12px;
	margin: -6px 0 0 -2px;
	border-radius: 2px;
	background: var(--clm-tint);
	animation: clm_spark .62s ease-out var(--clm-in, 0s) both;
	pointer-events: none;
	z-index: 3;
}
.clm_held .clm_vonk { width: 5px; height: 18px; margin: -9px 0 0 -2.5px; animation: clm_bigspark .95s ease-out .22s both; }

.clm_ook
{
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 16px 8px;
}
.clm_ook span { font-family: headers, sans-serif; font-size: 9.5px; letter-spacing: 2px; color: #ffffff8a; }
.clm_ook i { flex: 1; height: 1px; background: #ffffff1a; }
.clm_rooster
{
	position: relative;
	flex: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px;
	padding: 3px 16px 22px;
}
.clm_rooster > .clm_kaart.clm_alleen { grid-column: 1 / -1; }

.clm_voet
{
	flex: none;
	padding: 13px 12px calc(env(safe-area-inset-bottom) + 20px);
	background: linear-gradient(0deg, #3d1f6b 0%, #4a2b7d 100%);
	box-shadow: 0 -3px 0 #00000059;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}
.clm_voet b
{
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 16px;
	letter-spacing: 1.5px;
	text-shadow: 0 2px #00000080;
	animation: clm_glowpulse 1.5s ease-in-out infinite;
}
.clm_voet small { font-size: 8.5px; letter-spacing: 1.5px; color: #ffffff70; }
.clm_reveal.clm_charging .clm_voet b { animation: none; opacity: .5; }

.clm_flash
{
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 2147483150;
	background: radial-gradient(60% 40% at 50% 42%, #fff 0%, #ffd67a 40%, transparent 72%);
	animation: clm_flash .55s ease-out forwards;
}


/* ══ 3 · DE VLUCHT ═════════════════════════════════════════════════════════ */

.clm_flyers
{
	position: fixed;
	inset: 0;
	z-index: 2147483200;
	pointer-events: none;
	overflow: hidden;
}
/* alleen transform + opacity: een filter op 40 bewegende plaatjes repaint
   elk frame; elk token verdwijnt op zijn eigen transitionend */
.clm_token
{
	position: absolute;
	width: 34px;
	height: 34px;
	object-fit: contain;
	pointer-events: none;
	will-change: transform, opacity;
	transition: transform .9s cubic-bezier(.5,-0.4,.35,1), opacity .9s ease-in;
	transform: translate(var(--sx, 0px), -18px) scale(1.3);
	opacity: 1;
}
.clm_token.clm_gaat
{
	transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.35);
	opacity: .1;
}

/* pil-flits: een ring die uit de pil groeit (de pil zelf stuitert even) */
.clm_pop
{
	position: absolute;
	inset: -4px;
	border-radius: 20px;
	pointer-events: none;
	border: 2px solid var(--clm-tint, #FFC107);
	box-shadow: 0 0 14px var(--clm-tint, #FFC107);
	animation: clm_impact .55s ease-out forwards;
	z-index: 30;
}
.clm_bump { animation: clm_pillbump .45s ease-out; }
.clm_bump_hart img { animation: clm_hearts .6s ease-out; }

/* zwevend "+12.400" onder de pil — op body, want de header is een
   stacking-context (translateY) waar niets uit ontsnapt */
.clm_float
{
	position: fixed;
	z-index: 2147483250;
	transform-origin: 50% 100%;
	font-family: headers, sans-serif;
	font-size: 15px;
	font-weight: normal;
	white-space: nowrap;
	pointer-events: none;
	color: var(--clm-tint, #FFC107);
	text-shadow: 0 2px 0 #000, 0 0 12px var(--clm-tint, #FFC107);
	animation: clm_drop 1s cubic-bezier(.2,1.2,.4,1) forwards;
}

.clm_confetti
{
	position: fixed;
	top: -20px;
	z-index: 2147483120;
	border-radius: 2px;
	opacity: 0;
	pointer-events: none;
	animation: clm_confetti 2.2s cubic-bezier(.35,.6,.5,1) forwards;
}


/* ══ 4 · WEEKLY MYSTERY (shop-tab) ═════════════════════════════════════════ */

.mys
{
	position: relative;
	padding: 4px 14px 0;
	color: #fff;
}
.mys_kop
{
	position: relative;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mys_kop > i
{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, #ffc10745 0%, transparent 66%);
	animation: clm_glowpulse 2.4s ease-in-out infinite;
}
.mys_kop > img
{
	position: relative;
	height: 140px;
	object-fit: contain;
	animation: clm_breathe 3.2s ease-in-out infinite;
	filter: drop-shadow(0 12px 18px #00000073);
}
.mys.is-opening .mys_kop > i { background: radial-gradient(circle, #ffd67a5c 0%, transparent 62%); animation-duration: .5s; }
.mys.is-opening .mys_kop > img { animation: clm_shake .16s linear infinite; filter: drop-shadow(0 0 26px #ffd67a); }
.mys.is-revealing .mys_kop > img { animation-duration: 1.6s; filter: drop-shadow(0 0 24px #ffd67a80); }

.mys_titel
{
	margin: 0;
	text-align: center;
	font-family: headers, sans-serif;
	font-size: 24px;
	letter-spacing: 1px;
	text-shadow: 0 3px #000;
	color: #fff;
}
.mys_sub
{
	margin: 5px 10px 0;
	text-align: center;
	font-size: 11.5px;
	line-height: 1.5;
	color: #ffffff9c;
	text-wrap: pretty;
}
.mys_voortgang
{
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 2px 9px;
}
.mys_balk
{
	flex: 1;
	height: 7px;
	border-radius: 5px;
	background: #00000073;
	border: 1px solid #ffffff1f;
	overflow: hidden;
}
.mys_balk > i
{
	display: block;
	height: 100%;
	width: 0;
	border-radius: 5px;
	background: linear-gradient(90deg, #e09b00, #FFC107);
	box-shadow: 0 0 10px #ffc10799;
	transition: width .35s ease;
}
.mys_voortgang > b
{
	font-family: headers, sans-serif;
	font-size: 10px;
	font-weight: normal;
	letter-spacing: 1.5px;
	color: #FFC46B;
	white-space: nowrap;
}

.mys_rooster
{
	display: grid;
	/* minmax(0, …): een lange itemnaam mag zijn kolom niet breder duwen */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 7px;
}
.mys_slot
{
	position: relative;
	min-width: 0;
	padding: 2px;
	border-radius: 7px;
	--clm-r: 7px;
	background: #000;
	box-shadow: 0 2px 0 #00000059;
	cursor: pointer;
}
.mys_slot.is-open { background: color-mix(in srgb, var(--clm-tint) 17%, transparent); }
.mys_slot_in
{
	position: relative;
	z-index: 1;
	min-width: 0;
	aspect-ratio: 1 / 1.16;
	border-radius: 5px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background:
		linear-gradient(177deg, #ffffff30 0%, #ffffff12 30%, transparent 31%),
		linear-gradient(180deg, #2e1450 0%, #180628 100%);
	box-shadow: inset 0 1px 0 #ffffff59, inset 0 -8px 12px #00000040;
}
.mys_slot.is-dicht .mys_slot_in::before { content: ''; position: absolute; inset: 0; background: #00000059; }
.mys_vraag
{
	position: relative;
	font-family: headers, sans-serif;
	font-size: 26px;
	color: #ffffff21;
	text-shadow: 0 2px #000;
}
.mys_zegel
{
	position: relative;
	font-family: headers, sans-serif;
	font-size: 7.5px;
	letter-spacing: 1.5px;
	color: #ffffff33;
}
.mys_gloed
{
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--clm-tint) 22%, transparent) 0%, transparent 68%);
}
.mys_slot_prijs
{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 100%;
	box-sizing: border-box;
	padding: 0 4px;
	animation: clm_pop .5s cubic-bezier(.2,1.4,.4,1) both;
}
.mys_slot_prijs img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 3px 4px #000000a6); }
.mys_slot_prijs b
{
	font-family: headers, sans-serif;
	font-weight: normal;
	font-size: 12px;
	line-height: 1;
	text-shadow: 0 2px 0 #000, 0 0 5px #000000cc;
}
.mys_slot_prijs small
{
	font-family: headers, sans-serif;
	font-size: 7px;
	letter-spacing: 1px;
	color: var(--clm-tint);
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
}
.mys_slot .clm_tag
{
	position: absolute;
	top: 0; left: 0;
	padding: 2px 5px 3px;
	border-radius: 0 0 6px 0;
	font-size: 6.5px;
	letter-spacing: 1px;
	z-index: 2;
}
.mys_slot .clm_burst { top: 46%; }
.mys_slot .clm_vonk { top: 46%; height: 10px; margin-top: -5px; }
/* geclaimde roosters: prijzen blijven staan, rand weg, gedimd */
.mys_rooster.is-klaar .mys_slot { background: #000; }
.mys_rooster.is-klaar .mys_slot_in { opacity: .82; }

.mys_voet
{
	position: sticky;
	bottom: 0;
	padding: 14px 0 calc(12px + env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: linear-gradient(0deg, #1a0730 55%, #1a073000);
	z-index: 3;
}
/* De CTA's dragen de titelfont (headers) — óók de naamloze span/em waarin de
   letters zitten: brede afstammelingsregels van het shop-paneel winnen daar
   anders van de overerving (bugpatronen: "knoplabel-span verliest z'n font"). */
.mys_voet .cl-btn,
.mys_voet .cl-btn > span,
.mys_voet .cl-btn > em,
.mys_voet .cl-btn-secondary,
.mys_voet .cl-btn-secondary > span
{
	font-family: headers, sans-serif;
}
.mys_voet .cl-btn { font-size: 16px; padding: 12px; letter-spacing: 1.5px; }
.mys_voet .cl-btn-secondary { padding: 12px; }
.mys_voet small { text-align: center; font-size: 9.5px; color: #ffffff70; }
.mys_extra
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.mys_extra em { font-style: normal; color: #7a3b00; font-family: headers, sans-serif; letter-spacing: 1px; margin-left: 6px; }
.mys_klok { color: #FFC46B; }

.mys_eerder { margin-top: 18px; }
.mys_eerder .shop-sectie { padding-left: 0; padding-right: 0; }
.mys_eerder .mys_rooster { margin-bottom: 14px; }