@font-face {
    font-family: headers;
    src: url("/public/fonts/SSD.ttf");
}
@font-face {
    font-family: headers2;
    src: url("/public/fonts/Bangers-Regular.ttf");
}
@font-face {
    font-family: p;
    src: url("/public/fonts/Acme-Regular.ttf");
}
@font-face {
    font-family: typewriter;
    src: url("/public/fonts/typewriter.ttf");
}


@font-face {
    font-family: font2;
    src: url("/public/fonts/Nurom.ttf");
}
@font-face {
    font-family: 'font3';
    src: url("/public/fonts/Rheiborn.otf") ;
	  font-weight: normal;
	  font-style: normal;
}
@font-face {
    font-family: font4;
    src: url("/public/fonts/theBoldFont.otf") format('opentype');
}
@font-face {
    font-family: font5;
    src: url("/public/fonts/Cano.otf");
}
[id="shop"] h3
{
	font-size: 24px;
	margin-bottom:0;
	text-shadow: 0 2px black, 0 -2px black, 2px 0px black, -2px 0 black;
	grid-column: 1 / -1;
}
[dom-removable="factoryPass"] .tns-nav,
[dom-removable="vipPass"] .tns-nav
{
	right:0 !important;
	transform:unset;
	left:  unset !important;
}
.overflow-shimmer
{
	overflow:hidden;
	border-radius:5px;
	position: relative;
}
.fireworks,
[id="ga-container"],
[id="ga-container"] > div,
[id="ga-container"] canvas
{
	pointer-events:none;
	min-height:100vh;
	min-height: var(--vh100);
	min-width:100vw;
	height:100vh;
	height: var(--vh100);
	width:100vw;
	position:fixed;
	z-index: 4;
	top:0;
	left:0;
}
[pi]
{
	min-width: 300px;
	min-height: 135px;
	height: 135px;
	width: 300px;
	max-width: 300px;
	max-height: 135px;
	margin-bottom:30px;
	position:relative;
}
[pi] .progressbar-text
{
	font-family:headers;
	font-size:24px !important;
	white-space:nowrap;
	display:flex;
	transform: translate(-50%, 10%) !important;
	align-items:center;
	justify-content:center;
	white-space: normal;
	width: 100%;
	margin-bottom: -40px !important;
}
[pi] .progressbar-text span,
[pi] .progressbar-text p
{
	color: #fff !important;
	top: -101px;
	position:absolute;
}

[pi] .progressbar-text h2 
{
	top: -62px;
	font-size:50px;
	color: #FF9800;
	position:absolute;
}
[pi] .progressbar-text p
{
	top: -130px;
	right: 0px;
	border-radius: 50px;
	border-bottom: 1px solid #fff;
	box-shadow: 10px 10px 10px #00000040;
	background: #03A9F4;
	padding:10px;
	transform: scale(0.95) rotate(39deg);
}
[pi]:nth-child(2) .progressbar-text p
{
	
	right: unset;
	left:0;
	transform: scale(0.95) rotate(-39deg);
	box-shadow: -10px 10px 10px #00000040;
}
.ojectivesWrapper
{
	z-index:333;
	position: relative;
	width: 100vw;
	padding: 12px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 5px;
	box-sizing:border-box;
	display: none;
}

.ojectivesWrapperMainContainer,
.bonusWrapperOuter
{
	background:#000;
	border-radius:5px;
	padding:2px;
	position:relative;
	width: 100%;
}
/* geen schaduw: de magic-iconen dragen hun eigen gloed (eigenaar, 8 nov 2026) */
#bonus, #objective
{
	position:absolute !important;
	right: 10px;
	top: -24px;
	transform: rotate(5deg);
}
.bonusWrapperInfo
{
	position:absolute;
	right:0;
	z-index: 222;
	  --f: 10px; /* control the folded part*/
  --r: 5px; /* control the ribbon shape */
  --t: -14px; /* the top offset */
	inset: var(--t) calc(-1*var(--f)) auto auto;
	padding: 3px 95px var(--f) calc(10px + var(--r));
	padding-bottom:12px;
	clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
	background: #ff1100;
	box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
	text-shadow: 0 1px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.bonusWrapperOuter
{
	margin:0 12px;
	width:calc(100% - 24px);
	box-sizing:border-box;
	z-index: 2222;
}
.objectivesWrapper
{
	display:none;
}
.campaignmode .freeBonusWrapper
{
	display:none;
}
.campaignmode .objectivesWrapper
{
	display:block;
}
.objectivesWrapper .bonusWrapperInfo
{
	padding-right: 200px;
}
.ojectivesWrapperMainContainer:after
{
	content:'';
	left:3px;
	top:3px;
	width:calc(100% - 6px);
	background:#ffffff42;
	position:absolute;
	z-index:2;
	border-radius:4px;
	height:30%;
}
.ojectivesWrapperMain,
.ojectivesWrapperSecundary,
.bonusWrapper
{
	display:flex;
	align-items:center;
	position:relative;
	gap:10px;
	background:#4e357a;
	background: linear-gradient(to bottom, rgb(152 0 251) 0%,rgb(93 0 156) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	padding:10px;
	border-radius:5px;
	border: 1px solid #c05fff;
	overflow:hidden;
}

.bonusWrapper
{
}
.ojectivesWrapperMain:after
{
	content:'';
	animation:infinite objglow 5s alternate;
	position:absolute;
	z-index:0;
	bottom:-90px;
	left:0;
	width:100%;
	border-radius:100%;
	height:100px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100&1+0,0+100;Blue+to+Transparent */
	background: radial-gradient(ellipse at center, rgb(255 255 255) 0%,rgb(255 255 255 / 0%) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
@keyframes objglow
{
	from
	{
		transform:translate3d(0,0,0)
	}
	to{
		transform:translate3d(0,-20px,0)
		
	}
}
.ojectivesWrapperSecundary
{
	height: 40px;
}
.ojectivesWrapperMainObjective
{
	z-index:2;
}
.ojectivesWrapperMainObjective
{
	position:relative;
	width:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	height:40px;
}
.ojectivesWrapperMain img 
{
	filter:grayscale();
	margin-top:2px;
	width:36px;
	height:36px;
	position:absolute;
	
}
#bonusBarInfo
{
	color:#ff1100;
	font-size:20px;
}
.closeBtnTop
{
	right:calc(10px + env(safe-area-inset-right));
	top:calc(10px + env(safe-area-inset-top));
	position:absolute;
	/* background:red; */
	border-radius:2px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:headers;
	width:35px;
	height:35px;
	font-size: 30px;
	color: red;
}
*:not(input)
{
	user-select:none;
	-webkit-user-select: none;
	font-family:font3;
}
.searchingHolder
{
	transform:scale(0);
	opacity:0;
	transition:.5s cubic-bezier(0.25, 0.1, 0.29, 1.69);
	position:relative;
}
.active .searchingHolder
{
	transition-delay: .75s;
	transform:scale(1);
	opacity:1;
}
.searchingHolder svg:first-child
{
	width:150px;
	height:150px;
	color:#4a0790;
	filter:drop-shadow(0 0 15px #fff);
}
.searchingHolder svg:last-child
{
	position:absolute;
	right:0;
	color:#FF9800;
	bottom:0;
	width:40px;
	height:40px;
    -webkit-animation: circle 3s infinite ease-in-out;    
    -webkit-transform-origin: 50% 50%;
}

@-webkit-keyframes circle {
    from 
	{-webkit-transform: translate(-30px, -30px)}
	25%
	{-webkit-transform: translate(30px, -30px) rotate(90deg)}
	50%
	{-webkit-transform: translate(30px, 30px)  rotate(90deg)}
	75%
	{-webkit-transform: translate(-30px, 30px)}
	to
	{-webkit-transform: translate(-30px, -30px)}
}
.promotional-offers-wrapper
{
	padding:20px;
}
.promotional-offers-wrapper .splide__pagination
{
	bottom:-20px
}
.promotional-offers-wrapper .limited_offer_wrapper
{
	box-shadow:none;
	height: fit-content;
}
[swipe-close]
{
	filter: drop-shadow(0 2px #000);
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.grid__propery
{
	border: 1px solid #00000094;
	border-radius:4px;
	padding-right: 10px;
	display: flex;
	align-items: center;
	background: #00000038;
	gap: 10px;
	text-shadow: 0 1px black, 0 -1px black, 1px 0px black, -1px 0 black;
	/* box-shadow: 0 0 10px #fff; */
}

.grid__propery svg 
{
	background: #00000094;
	color: #ffffff;
	padding:5px;
}
.mission_objective_card__mid
{
	margin: 10px;
	z-index:3;
	position:relative;
}
.objectives__progress
{
	display:flex;
	:;: 5px;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
	max-height: 39px;
	margin-top: -10px;
	z-index: 999;
}
.objective__wrapper
{
	display:flex;
	flex-direction:column;
	position:relative;
	transition:.3s ease
}
.objective__wrapper span
{
	margin-top:-10px;
	z-index:2;
	
}
.objectives__progress img
{
	width:40px;
}

.objectives__progress.objectives_completed_1 .objective__wrapper:nth-child(1) img
{
	opacity:0;
}

.objectives__progress.objectives_completed_2 .objective__wrapper:nth-child(1) img,
.objectives__progress.objectives_completed_2 .objective__wrapper:nth-child(2) img
{
	opacity:0;
}
.objectives__progress.objectives_completed_3 .objective__wrapper:nth-child(1) img,
.objectives__progress.objectives_completed_3 .objective__wrapper:nth-child(2) img,
.objectives__progress.objectives_completed_3 .objective__wrapper:nth-child(3) img
{
	opacity:0;
}
.objectives__progress.objectives_completed_4 .objective__wrapper:nth-child(1) img,
.objectives__progress.objectives_completed_4 .objective__wrapper:nth-child(2) img,
.objectives__progress.objectives_completed_4 .objective__wrapper:nth-child(3) img,
.objectives__progress.objectives_completed_4 .objective__wrapper:nth-child(4) img
{
	opacity:0;
}
.objectives__progress .objective__wrapper:after 
{
	display: inline-block;
	width: 1em;
	height: 1em;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-shadow:inset 0 2px 1px #000,inset 0 -2px 1px #bf5ffe;
	background:#3c0164;
	border-Radius:100%;
	width:20px;
	padding:7px;
	z-index:-1;
	height:20px;
	content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='rgb(4 228 13)' d='m484.065 66.324l-71.534-41.759c-8.811-5.143-20.123-2.17-25.266 6.641L211.883 331.642L96.414 264.236c-7.143-4.17-16.314-1.76-20.484 5.384l-45.284 77.573c-4.17 7.143-1.76 16.314 5.384 20.484l205.968 120.235c7.143 4.17 16.314 1.76 20.484-5.384l1.669-2.86c.034-.056.074-.106.107-.163L490.706 91.59c5.143-8.811 2.17-20.123-6.641-25.266'/%3E%3C/svg%3E");
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%)
}
.objective__achived img
{
	filter:unset;
}
.mission_objective_card__mid .mission_objective_card__top__cards__card
{
	margin-top: 20px;
	width:100%;
	box-sizing:border-box;
	padding: 10px;
	background: #ffffff38;
}
.mission_objective_card__bottom__list
{
	display:flex;
	flex-direction:column;
	gap:5px;
	min-width:100%;
	overflow:auto;
	/* rekt uit tot de beschikbare ruimte in de kaart (i.p.v. een vaste
	   max-height-magic-number die met de reward-count/banner-marges kon
	   meebewegen en dan weer te klein bleek): .mission_objective_card__bottom
	   en de actieve [tabcontent] zijn beide flex-column, dus flex:1 hier vult
	   gewoon wat er nog over is, met de claim-all-knop erna als vaste voet.
	   overflow:auto blijft staan als vangnet, mocht een missie ooit meer dan
	   3 beloningstrappen krijgen. */
	flex:1;
	min-height:0;
	/* headroom voor de TAP TO CLAIM-overlay van rij 1: die steekt max ~17px
	   boven zijn rij uit (top:-12px + 5px bounce) en zou anders door deze
	   container z'n eigen overflow:auto afgeknipt worden — content die in de
	   padding-box overlapt blijft wél zichtbaar */
	padding-top:18px;
}
.mission_objective_card__bottom__list__rewards
{
	display:flex;
	align-items:center;
	margin-left:auto;
	gap:5px;
}
.mission_objective_card__bottom__list__reward
{
	display:flex;
	flex-direction:column;
	position:relative;
	align-items:center;
	margin-top:-7px
}

.mission_objective_card__bottom__list__reward img 
{
	width:40px !important;
	height:40px !important;
}
.mission_objective_card__bottom__list__reward span
{
	position:absolute;
	bottom:-5px;
	font-size:20px;
}
/* de rij zelf blijft op .adventureClaimable overflow:hidden houden (voor de
   shimmer op __rewards), dus de TAP TO CLAIM-banner (die er met een negatieve
   top bovenuit steekt) hangt op deze buitenste wrapper i.p.v. als kind van de
   rij — anders werd hij afgesneden door diezelfde overflow:hidden. */
.mission_objective_card__bottom__list__row_wrapper
{
	position:relative;
	min-width:100%;
	display:flex;
	justify-content:center;
}
/* Spec 2026-07-22: de banner neemt GEEN layoutruimte meer in — rijen houden
   dezelfde afstand als in geclaimde staat (gap:5px van de lijst). De banner
   zweeft als compacte overlay op de bovenrand van zijn eigen rij; de kleine
   bounce (−5px) houdt de uitsteek beperkt zodat hij hooguit de onderrand van
   de rij erboven raakt i.p.v. het hele scherm uit elkaar te duwen. */
.mission_objective_card__bottom__list .claim_activate_attention
{
	top:-12px;
	height:30px;
	animation:infinite 2.4s bounceBannerKlein;
}
.mission_objective_card__bottom__list .claim_activate_attention_body
{
	font-size:16px;
	line-height:24px;
}
@keyframes bounceBannerKlein
{
	from { transform:translate3d(0,0,0); }
	50%  { transform:translate3d(0,-5px,0); }
	to   { transform:translate3d(0,0,0); }
}
.mission_objective_card__bottom__list > div > div:not(.claim_activate_attention)
{
	min-width:100%;
	display: flex;
	justify-content:space-between;
	align-items:center;
	box-sizing:border-box;
	padding:8px;
	border-radius:5px;
	gap:10px;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
	font-size:15px
}
.streaks .mission_objective_card__bottom__list > div > div:not(.claim_activate_attention)
{
	#background: #d80000;
}
.magic .mission_objective_card__bottom__list > div > div:not(.claim_activate_attention)
{
	#background: #942ab1;
}
.taps .mission_objective_card__bottom__list > div > div:not(.claim_activate_attention)
{
	#background: #FFC107;
	min-height: 62px;
}
.mission_objective_card__bottom__list > div > div:not(.claim_activate_attention)
{
	background: linear-gradient(-5deg, rgba(154, 0, 255, 1) 0%, rgb(53 1 87) 55%, rgba(154, 0, 255, 1) 55%, rgba(154, 0, 255, 1) 100%);
	border:2px solid rgba(154, 0, 255, 1);
}
.mission_objective_card__bottom__list > div > div:not(.claim_activate_attention) h4
{
	font-size:25px;
	margin:0;

}
.mission_objective_card__bottom__progress_bar 
{
	border-radius:10px;
	height:10px;
	left:2px;
	position:relative;
	top:0;
}
.completedState_0
.mission_objective_card__bottom__progress_bar 
{
	width:0%;
}
.completedState_1
.mission_objective_card__bottom__progress_bar 
{
	width:20%;
}
.completedState_2
.mission_objective_card__bottom__progress_bar 
{
	width:50%;
}
.completedState_3
.mission_objective_card__bottom__progress_bar 
{
	width:100%;
}


.completedState_1
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(2) img
{
	filter:grayscale();
}
.completedState_2
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(2) img,
.completedState_2
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(3) img
{
	filter:grayscale();
}
.completedState_3
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(2) img,
.completedState_3
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(3) img,
.completedState_3
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(4) img
{
	filter:grayscale();
}



.completedState_1
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(2):before
{
	width:25px;
	height:25px;    
	background: linear-gradient(-35deg, rgba(88, 0, 147, 1) 0%,rgba(88, 0, 147, 1) 50%,rgba(154, 0, 255, 1) 50%, rgba(154, 0, 255, 1) 100%);
	border:1px solid #fff;
	border-radius:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:2;
	position:absolute;
	top:-5px;
	right:-5px;
	content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.5 2L6 9.5L2.5 6L0 8.5l6 6l10-10z'/%3E%3C/svg%3E");
}

.completedState_2
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(2):before,
.completedState_2
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(3):before
{
	width:25px;
	height:25px;    
	background: linear-gradient(-35deg, rgba(88, 0, 147, 1) 0%,rgba(88, 0, 147, 1) 50%,rgba(154, 0, 255, 1) 50%, rgba(154, 0, 255, 1) 100%);
	border:1px solid #fff;
	border-radius:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:2;
	position:absolute;
	top:-5px;
	right:-5px;
	content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.5 2L6 9.5L2.5 6L0 8.5l6 6l10-10z'/%3E%3C/svg%3E");
}


.completedState_3
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(2):before,
.completedState_3
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(3):before,
.completedState_3
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(4):before
{
	width:25px;
	height:25px;    
	background: linear-gradient(-35deg, rgba(88, 0, 147, 1) 0%,rgba(88, 0, 147, 1) 50%,rgba(154, 0, 255, 1) 50%, rgba(154, 0, 255, 1) 100%);
	border:1px solid #fff;
	border-radius:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	z-index:2;
	top:-5px;
	right:-5px;
	content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.5 2L6 9.5L2.5 6L0 8.5l6 6l10-10z'/%3E%3C/svg%3E");
}



.streaks .mission_objective_card__bottom__progress_bar 
{
	background:red; 
}
.taps .mission_objective_card__bottom__progress_bar 
{
	background:#ffc107; 
}
.time .mission_objective_card__bottom__progress_bar 
{
	background:#2196F3; 
}
.mission_objective_card__wrapper .info-wrapper
{
	top:-15px;
	right:-10px;
}
.mission_objective_card__underlay
{
	background:#00000073;
	position:fixed;
	left:0;
	top:0;
	height:100vh;
	height: var(--vh100);
	width:100vw
}
.active .mission_objective_card__underlay
{
	transition:.3s ease;
}
.active .mission_objective_card__content
{
	transform:translate3d(0,0,0);
}
.mission_objective_card__content
{
	z-index:2;
	position:fixed;
	bottom:calc(2.5vw + env(safe-area-inset-bottom));
	transform:translate3d(0,150%,0);
	background: #9a00ff;
	width:95vw;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6e3ec3+0,805dc1+50,580093+50,9a00ff+100 */
	background: linear-gradient(135deg, rgba(110,62,195,1) 0%,rgba(128,93,193,1) 50%,rgba(88,0,147,1) 50%,rgba(154,0,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background: linear-gradient(0deg, rgba(88,0,147,1) 70%,rgba(154,0,255,1) 100%);
	left:2.5vw;
	border-radius:5px;
	transition:.3s ease;
	padding:10px;
	box-sizing:border-box;
	box-shadow: 0 0 40px #000;
}
.mission_objective_card.main .mission_objective_card__content
{
	width:100vw;
	height:100vh;
	height: var(--vh100);
	left:0;
	top:0;
	z-index:3;
	padding:0;
	display:flex;
	flex-direction:column;
	padding-top:calc(3.5vw + env(safe-area-inset-top)) !important;
}
.mission_objective_card.main .tabs-parent
{
	margin: 20px;
	margin-top: 0;
	box-sizing: border-box;
}
.mission_objective_card.main .tab-full-btn-active.active
{
	background:#fff;
	text-shadow:none;
	color:#000;
}
.mission_objective_card h3:first-child
{
	margin:10px;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
	font-size:30px;
	filter: drop-shadow(0  2px black);
}

.mission_objective_card__wrapper_outer
{
	border:5px solid #000;
	border-radius:15px;
}
/* de wrapper is een flex-kolom met align-items:stretch, waardoor de
   fixed/absolute play/claim-knop op de linkerrand belandde — expliciet centreren */
.mission_objective_card .btn-orange.btn-bot,
.mission_objective_card .btn-purple.btn-bot,
.mission_objective_card [swipe-close].btn-bot
{
	left:0;
	right:0;
	margin-inline:auto;
	width:fit-content;
}

.main .mission_objective_card__wrapper_outer,
.main .mission_objective_card__wrapper
{
	box-sizing:border-box;
	border-radius:0;
	height: 100%;
	display:flex;
	flex-direction:column;
	border-left-width:0 !important;
	border-right-width:0 !important;
	border-bottom-width:0 !important;
}
.mission_objective_card__wrapper
{
	position:relative;
	border-radius:10px;
}
.mission_objective_card__wrapper.taps 
{	
	border:4px solid #FFC107;
	background: radial-gradient(ellipse at center right, rgba(254,222,0,1) 0%,rgb(222 120 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.taps .mission_objective_card__bottom
{	
	border-top: #FFC107 2px solid;
}
.mission_objective_card__wrapper.magic 
{
	border: 4px solid #a400ff;
	background: radial-gradient(ellipse at center right, #9C27B0 0%,#673AB7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.magic .mission_objective_card__bottom
{
	border-top: #a400ff 2px solid;
}
.mission_objective_card__wrapper.time
{	
	border:4px solid #45adff;
	background: radial-gradient(ellipse at center right, #45adff 0%,rgb(0 77 138) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.time .mission_objective_card__bottom
{	
	border-top: #45adff 2px solid;
}

.mission_objective_card__wrapper.streaks 
{
	border:4px solid #ff1100;
	background: radial-gradient(ellipse at center right, #ff0000 0%,#910000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	box-shadow: inset 0 0 20px #00000075;
}
.streaks .mission_objective_card__bottom
{	
	border-top: #ff1100 2px solid;
}
.mission_objective_card__bottom__progress_wrapper
{
	border:1px solid #ffffff;
}
.mission_objective_card__wrapper canvas
{
	position:absolute;
	left:0;
	top: 0;
	z-index:0;
}
.mission_objective_card__bottom
{
	overflow:hidden;
	background: #000000;
	box-shadow: inset 0 5px 5px #0000002b;
	/* Spec 2026-07-22: rij 1 hoort DIRECT onder de gele sectie en de rij-afstand
	   mag niet verspringen tussen claimbaar en geclaimd. De TAP TO CLAIM-banner
	   is daarom een compacte overlay (top:-12px + kleine bounce); zijn headroom
	   zit als padding-top op de __list zelf — binnen de padding-box knipt diens
	   overflow:auto niet, deze sectie-padding blijft gewoon uniform 10px. */
	padding:10px;
	border-radius: 0 0 7px 7px;
	/* hoger dan .mission_objective_card__mid (z-index:3, ervoor in de DOM) —
	   anders wint de gele sectie het van de banner ondanks dat deze visueel
	   "boven" moet zweven. */
	z-index: 4;
	gap:20px;
	position: relative;
}
.main .mission_objective_card__bottom
{
	/* background: #00000085; */
}
.mission_objective_card__bottom,
.mission_objective_card__top,
.mission_objective_card__bottom__progress_wrapper,
.mission_objective_card__top__cards
{
	box-sizing:border-box;
	width:100%;
	display:flex;
	align-items:center;
	z-index: 3;
	position: relative;
}
.mission_objective_card__bottom__progress_wrapper
{
	border-radius:10px;
	height:15px;
}
/* de gecombineerde regel hierboven zet .mission_objective_card__bottom's
   z-index terug op 3 (gelijk aan .mission_objective_card__mid) — deze latere,
   specifiek-op-.bottom-gerichte regel wint weer terug naar 4, zie de
   toelichting bij de eerste .mission_objective_card__bottom-regel hierboven. */
.mission_objective_card__bottom
{
	z-index: 4;
}
.main .mission_objective_card__bottom
{
	width:100%;
	box-sizing:border-box;
	display:flex;
	overflow: hidden;
	flex-direction:column;
	/* was height:100% — als flex-item ernaast .top/.mid (die niet krimpen) is
	   "100% van de kaart" een onmogelijke aanvraag die de browser oplost door
	   dit element te laten krimpen; flex:1 vraagt gewoon "wat er nog over is"
	   en min-height:0 laat de __list-kind daarbinnen wél nog verder krimpen/
	   scrollen i.p.v. op zijn content-hoogte te blijven staan. */
	flex:1;
	min-height:0;
	position: relative;
	padding-bottom:calc(2.5vw + env(safe-area-inset-bottom)) !important;
}
.main .mission_objective_card__bottom img 
{
	width:40px;
	filter: drop-shadow(0px 2px 3px black);
}
.main .mission_objective_card__bottom img 
.mission_objective_card__mid
{
	margin: 20px 10px;
	margin-top: 5px;
	z-index: 3;
	position: relative;
}
.main .mission_objective_card__mid
{
	/* padding:20px; */
}
.mission_objective_card__mid h2
{
	font-size:23px;
	line-height:27px;
	
}
.mission_objective_card__mid h2,
.mission_objective_card__mid h3
{
	text-align:left !important;
	display:block;
	margin:0;
	z-index:4;
}
.main .mission_objective_card__mid h2,
.main .mission_objective_card__mid h3
{
	text-align:center !important;
	
}
.mission_objective_card__mid h2 span 
{
	font-family:headers;
	color:#FFC107;
}



.mission_objective_card__mid h3
{
	font-family:font3 !important;
	font-size:18px;
	/* color: #4c3404; */
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
	opacity: .8;
	/* margin-top:5px; */
}
.mission_objective_card__top__cards
{
	justify-content:space-between;
	padding:10px;
}
.mission_objective_card__top__cards__cards__wrapper
{
	display:flex;
	gap:10px;
}
.mission_objective_card__top__cards__card
{
	background:#00000091;
	padding:5px;
	display:flex;
	align-items:center;
	gap:5px;
	border-radius:5px;
}
.mission_objective_card__top__cards__card h2 
{
	font-size: 19px;
}
.mission_objective_card__top__cards__card img 
{
	width:42px;
	height:42px;
}
.mission_objective_card__top__cards__card svg
{
	width:15px;
	height:15px;
}

.mission_objective_card__bottom__progress_bar__objective
{
	position:absolute;
	border-radius:100%;
	filter:drop-shadow(0 0 5px #4d3804);
	display:flex;
	flex-direction:column;
	align-items:center;
	
	
}

.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective span
{
	position:absolute;
	bottom:-7px;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(2)
{
	width:35px;
	left:10px
}
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(3)
{
	width:40px;
	left:60px;
}
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(4)
{
	width:50px;
	right:-5px;
}
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(2) img
{
	width:35px;
	left:10px
}
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(3) img
{
	width:40px;
	left:60px;
}
.mission_objective_card__bottom__progress_wrapper .mission_objective_card__bottom__progress_bar__objective:nth-child(4) img
{
	width:50px;
	right:-5px;
}
.mission_objective_card .close
{
	right:10px;
	top:10px;
	position:absolute;
}
.main.mission_objective_card .close
{
	top:calc(10px + env(safe-area-inset-top));
}
.inlineHeader
{
	font-size:40px;
	font-family:headers;
	color:#FF9800;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black, 0 0 30px white;
}

.gamepop_header span
{
	font-size: 20px;
	/* margin-top: 10px; */
	white-space: wrap !important;
	/* text-shadow: 0 1px black, 0 -1px black, 1px 0px black, -1px 0 black; */
	max-width: 80vw;
}
.limited_offers__item__body__img__description
{
	display:none;
}
.bottom_drawer__content .lives 
{
	opacity:.5
}
.inv_highlight h2,
.inv_highlight .inventory_grid
{
	display:none !important;
}
h2.inv_highlight_this ,
.inv_highlight_this.inventory_grid
{
	display:flex !important;
	align-items:center;
	justify-content:center;
	
}
.bb svg 
{
	
	position:absolute;
	left:-10px;
	top:-10px;
	width:var(--clipMe_1);
	height:var(--clipMe_1);
}
.loading_shape
{
	min-width:var(--clipMe_1);
	min-height:var(--clipMe_1);
	width:var(--clipMe_1);
	height:var(--clipMe_1);
	fill: transparent;
	stroke: #fff;
	stroke-dasharray: var(--clipMe_1);
	border-bottom: 5px solid black;
	transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
	animation: rotatingsvgborder infinite 3s linear;
}
@keyframes rotatingsvgborder
{
  from
  {
    
	    stroke-width: 5px;
	  stroke-dashoffset: var(--clipMe_1);
  }
  50%
  {
    
    stroke-width: 1px;
  }
  to
  {
    stroke-width: 5px;
  stroke-dashoffset: calc(var(--clipMe_1) * -1);
  }
}
.topClaims,
.botClaims
{
	position: absolute;
	z-index:55;
	background:#7134d5de;
	font-size:20px;
	display: flex;
	justify-content: space-around;
	align-items:center;
	padding:20px;
	left:50%;
	width:100%;
	transform:translate(-50%, 0);
	border:2px solid #c09eff;
	transition:.2s ease;
	display: none;
}
.botClaims
{
	bottom:0;
	border-bottom:0;
	transform: translate(-50%, 100px);
}

.botClaims.active
{
	padding-bottom: calc(10px + calc(env(safe-area-inset-bottom) * 2));
}
.topClaims
{
	top: 125px;
	border-top: 0;
	padding-top: 40px;
	transform:translate(-50%, -100px);
}
.monthly_challenge_steps .topClaims 
{
	top: calc(250px + env(safe-area-inset-top));
}
.botClaims.active,
.topClaims.active
{
	transform:translate(-50%, 0);
}
.experienceGain
{
	    margin-bottom:10px;
	    min-width: 100vw;
	    overflow: auto;
	    display: flex;
	    height: -webkit-fill-available;
	    flex-direction: column;
	    align-items: center;
	    gap: 25px;
	    padding-top: 6px;
	    flex-shrink: 9999999;
	    box-sizing: border-box;
}
.xpPath
{
	overflow:auto;
	overflow-x: hidden;
	width: 100vw;
	height: 100%;
	overscroll-behavior: none;
	border-top: 2px solid #000;
	box-shadow: -2px -9px 20px #9916ff;
}
.xpPathItem
{
	display:flex;
	position:relative;
	align-items:center;
	justify-content:space-evenly;
	border-bottom: 3px solid #1a0048;
	border-top: 1px solid #c19eff;
	background: linear-gradient(to bottom, #ac00ca 0%,rgb(62 10 155) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	padding: 10px;
	padding-top:40px;
	padding-bottom: 30px;
	/* gap: 30px; */
	height: 126px;
	box-shadow: inset 0 -10px 10px #c2a0fe;
}
.xpPathItem h3
{
	font-family:font3 !important;
	font-Size:50px;
	margin:0;
	padding-bottom:20px;
}

.claimReward
{
	position:absolute;
}
.xpPathItem *
{
	z-index:4;
}
.xpPathLevel
{
	position:absolute;
	font-size:25px;
	background:#c19fff;
	border-radius:0 0 10px 0;
	left:0;
	display:flex;
	align-items:center;
	gap:10px;
	padding: 3px 10px;
	top:0;
}
.xpPathItem.locked
{
	background:none;
}

.unlocked .xpPathLevel:before
{
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" viewBox="0 0 20 20"%3E%3Cpath fill="white" d="m0 11l2-2l5 5L18 3l2 2L7 18z"%2F%3E%3C%2Fsvg%3E');
	width:22px;
	display:block;
	height:22px;
	border-radius:5px;
	line-height:5px;
	background:#4CAF50;
	border:1px solid #ffffff;
	z-index:3
	
}
.locked .xpPathLevel:before
{
	width:25px;
	line-height:20px;
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30" viewBox="0 0 20 20"%3E%3Cpath fill="currentColor" d="M15 9h-1V6c0-2.2-1.8-4-4-4S6 3.8 6 6v3H5c-.5 0-1 .5-1 1v7c0 .5.5 1 1 1h10c.5 0 1-.5 1-1v-7c0-.5-.5-1-1-1zm-4 7H9l.4-2.2c-.5-.2-.9-.8-.9-1.3c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5c0 .6-.3 1.1-.9 1.3L11 16zm1-7H8V6c0-1.1.9-2 2-2s2 .9 2 2v3z"%2F%3E%3C%2Fsvg%3E')

}
.xpPathLevel:after
{
	content:'';
	background:#fff;
	opacity:.3;
	width:90%;
	height:50%;
	position:absolute;
	left:0;
	top:0;
	border-radius:4px;
	margin:5%;
}
@keyframes glowBottom
{
	from
	{
		
	box-shadow: inset 0 -5px 10px #9052ff, inset 0 5px 10px #1b004c8f;
	}
	to
	{
		
	box-shadow: inset 0 -15px 20px #9052ff, inset 0 15px 15px #1b004c8f;
	}
}
@keyframes starGlow
{
	from
	{
		
	background:#9c27b0ad;
	}
	to
	{
		
	background:#af85fa87;
	}
}
.xpPathItem .xpPathBG,
.reward_step_bg
{
	overflow:hidden;
	width:100%;
	height:100%;
	position:absolute;
	top: 0;
	left: 0;
}
.monthly_challenge_step:nth-child(odd) .reward_step_bg:before,
.monthly_challenge_step.odd .reward_step_bg:before,
.xpPathItem:nth-child(odd) .xpPathBG:before
{
	rotate:-45deg;

}
.xpProgressHolder:before
{
	-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="25" height="20" viewBox="0 0 24 24"%3E%3Cpath fill="rgba(102, 49, 195, 0.4)" d="M9.153 5.408C10.42 3.136 11.053 2 12 2c.947 0 1.58 1.136 2.847 3.408l.328.588c.36.646.54.969.82 1.182c.28.213.63.292 1.33.45l.636.144c2.46.557 3.689.835 3.982 1.776c.292.94-.546 1.921-2.223 3.882l-.434.507c-.476.557-.715.836-.822 1.18c-.107.345-.071.717.001 1.46l.066.677c.253 2.617.38 3.925-.386 4.506c-.766.582-1.918.051-4.22-1.009l-.597-.274c-.654-.302-.981-.452-1.328-.452c-.347 0-.674.15-1.329.452l-.595.274c-2.303 1.06-3.455 1.59-4.22 1.01c-.767-.582-.64-1.89-.387-4.507l.066-.676c.072-.744.108-1.116 0-1.46c-.106-.345-.345-.624-.821-1.18l-.434-.508c-1.677-1.96-2.515-2.941-2.223-3.882c.293-.941 1.523-1.22 3.983-1.776l.636-.144c.699-.158 1.048-.237 1.329-.45c.28-.213.46-.536.82-1.182l.328-.588Z"%2F%3E%3C%2Fsvg%3E');

}
.xpPathItem:after
{
	    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
    content: '';
    opacity: .35;
    background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%);
}

.xpPathItem:nth-child(odd):before
{
	rotate:-45deg;
}
.xpPathRewards,
.xpPathUnlocks
{
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	gap: 10px;
	padding-bottom: 25px;
	min-width: 45%;
}
.xpPathItem .xpPathRewards:before,
.xpPathItem .xpPathUnlocks:before
{
	position:absolute;
	bottom: 0;
	content:'rewards'
}

.xpPathItem .xpPathUnlocks:before
{
	content:attr(data-title);
	z-index: 33;
}
.xpPathItem:first-child 
{
	padding-top:40px
}
.info-sign:after
{
	
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="11" height="14px" viewBox="0 0 11 24"%3E%3Cpath fill="white" d="M8.436.006a2.24 2.24 0 0 1 2.408 2.354v-.006a3.156 3.156 0 0 1-3.151 3.01l-.065-.001h.003a2.151 2.151 0 0 1-2.367-2.398l-.001.01A3.087 3.087 0 0 1 8.44.004h-.005zM3.489 24c-1.268 0-2.199-.783-1.311-4.226l1.456-6.108c.254-.978.295-1.369 0-1.369a9.57 9.57 0 0 0-3.035 1.359l.033-.021l-.633-1.057c3.086-2.622 6.638-4.159 8.158-4.159c1.268 0 1.48 1.526.845 3.874l-1.666 6.421c-.296 1.135-.168 1.526.126 1.526a6.553 6.553 0 0 0 2.863-1.456l-.008.007l.72.979c-3.004 3.052-6.281 4.232-7.549 4.232z"%2F%3E%3C%2Fsvg%3E');
    font-size: 16px;
    position: absolute;
    right: 8px;
    top: 8px;
    background: #2196F3;
    display: block;
    width: 25px;
    height: 25px;
    box-shadow: inset 0 2px 2px #ffffff6b, inset 0 -3px 1px #0064b4;
    border-radius: 4px;
    text-align: center;
    line-height: 26px;
    border: 1px solid #000000;
	z-index:22;
}
.xpPathReward 
{
	position:relative;
	/* overflow:hidden; */
	position:relative;
	display: flex;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
	justify-content:center;
	width: 18vw;
	height: 100%;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+7,e1ffff+12,fdffff+12,e6f8fd+30,c8eefb+54,bee4f8+75,b1d8f5+100;Blue+Pipe+%232 */
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feffff+0,ddf1f9+35,a0d8ef+100;Blue+3D+%2318 */
	padding: 14px;
	 /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-radius: 5px;
	border: 1px solid #ffffff8f;
	box-shadow: 0 0px 15px #ffffffad, inset 0 0px 25px #000000;
}
.xpPathReward span 
{
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
	position:absolute;
	font-size:30px;
	bottom: 10px;
	right: 10px;
}
.xpPath img
{
	width: 70px !important;
	height: 70px ! important;
	filter:drop-shadow(0 0 5px white)
}
.xpPath [data-title] img
{
	filter:none
}
.xpPath [id-unlock="factory"] img,
.xpPath [id-unlock="challenges"] img,
.xpPath [id-unlock="ranked"] img
{
	filter:drop-shadow(0 0 10px #ff6600);
	width:50px;
	height:50px;
}
.playerStatsLvl
{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:4;
}
.playerStatsLvl p 
{
	margin:0;
	padding:0;
	position:absolute;
	z-index:44;
	margin-bottom: 2px;
	margin-left:-10px;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.xpProgressHolder .playerStatsLvl p 
{
	margin-left:0;
	
}
.playerStatsLvl img 
{
	width:40px !important;
	margin-bottom:5px;
}
.xpProgressHolder .playerStatsLvl img 
{
	width:59px !important;
	height:59px !important;
}

.xpProgressHolder .playerStatsLvl:last-child
{
	filter:grayscale();
	opacity:.5;
}
[render="experienceRewards"]
{
	margin-left: -35px;
	max-width: 100px;
	margin-right: 13px;
	position:relative;
}
[render="experienceRewards"]
{
	box-shadow:none !important;
}


[render="experienceRewards"] .badge-new
{
	left:10px;
	right:unset;
	z-index:22;
	top:-15px;
}
[render="experienceRewards"] span:not(.badge-new)
{
	position:absolute;
	z-index:1;
	width: 100%;
	display: block;
	text-align: center;
	padding-left: 10px;
	font-size: 13px;
	text-shadow: 0 1px black, 0 -1px black, 1px 0px black, -1px 0 black;
}

[render="experienceRewards"] .progress
{
	background: rgb(33,150,243); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(33,150,243,1) 0%, rgba(5,171,224,1) 44%, rgba(5,171,224,1) 44%, rgba(83,203,241,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(33,150,243,1) 0%,rgba(5,171,224,1) 44%,rgba(5,171,224,1) 44%,rgba(83,203,241,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to left,rgb(0 193 255) 0%,rgb(53 151 255) 100%);
	border-radius: 0 20px 20px 0;
	height:calc(100% - 4px);
	max-width: calc(100% - 24px) !important;
	position:absolute;
	left: 20px;
}
[render="experienceRewards"] .progress:after,
[render="experienceRewards"]:after
{
	content:'';
	width:calc(100% - 2px);
	height:40%;
	background:#ffffff26;
	border-radius:0 30px;
	left:0;
	position:absolute;
	top:2px;
}
[render="experienceRewards"] .progress:after
{
	height:45%;
	background:#ffffff61;
	
}

[color="orange"]
{
	color: #ffbc00;
	/* background-image: linear-gradient(to bottom, #ffd700 0%,rgb(255 119 0) 100%); */
	/* -webkit-background-clip: text; */
	-moz-background-clip: text;
	/* -webkit-text-fill-color: transparent; */
	-moz-text-fill-color: transparent;
}
.m_remaining_power
{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	width: 88%;
	margin: 12px;
}
.m_remaining_power .info-wrapper
{
	position:relative;
	right:unset;
	top:unset;
	min-width:25px;
	min-height:25px;
	max-width:25px;
	max-height:25px;
}
.m_remaining_power .bonusBarWrapper
{
	width:100%;
	display:flex;
	border:none;
	background: #392658;
	align-items:center;
	justify-content:center;
	box-shadow: inset 0 2px 7px #000;
}
.m_remaining_power .bonusBarWrapper span
{
	font-size:14px;
	position: absolute;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.m_remaining_power .bonusBar
{
	left:0 !important;
	
}
.new_challenges_in
{
	position:absolute;
	font-size:14px;
	left: 15px;
	bottom:5px;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.new_challenges_in .cd_clock span 
{
	opacity:1;
	font-size:17px;
}
.ticket_wrapper
{
	position:relative;
}
.badge-new,
.week-claimable,
.day-claimable,
.month-claimable
{
	position:absolute;
	right:10px;
	top:0px;
	background: #ff1400;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100 */
	background: linear-gradient(to bottom, rgb(255 26 0) 0%,rgb(205 0 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	text-align:center;
	line-height:1.35rem;
	min-width:1.35rem;
	z-index: 2;
	min-height:1.35rem;
	box-shadow: 0 5px 5px #00000052;
	border-radius: 4px;
	animation: bounce2up 2s ease infinite;
	border: 1px solid #fff;
	text-shadow: none;
}
.week-claimable,
.day-claimable,
.month-claimable
{
	top: -2px;
	right: 2px;
}
/* WP7/WP11: rode "!"-actie-badge op de nav (factory-upgrade klaar / eilanden vol).
   Zelfde variant als de generieke .badge-new (afgeronde vierkant, geen cirkel —
   dat is de bestaande conventie in de app) zodat beide badge-soorten er
   consistent uitzien. */
.badge-alert
{
	position:absolute;
	top:-8px;
	left:-8px;
	z-index:3;
	min-width:1.35rem;
	min-height:1.35rem;
	line-height:1.35rem;
	text-align:center;
	font-weight:bold;
	font-size:14px;
	color:#fff;
	background: linear-gradient(to bottom, rgb(255 26 0) 0%,rgb(205 0 0) 100%);
	border:1px solid #fff;
	border-radius:4px;
	box-shadow: 0 5px 5px #00000052;
	animation: bounce2up 2s ease infinite; /* zelfde duur als .badge-new, anders lopen ze zichtbaar uit fase */
	pointer-events:none;
}
/* Consistentie op de hele rechter-knoppenstack (sideBoxes: factory/energy/wheel/
   dagelijkse-beloningen/social): alle badges — of ze nu een aantal of "!" tonen —
   krijgen dezelfde variant (afgeronde vierkant, zoals .badge-new elders in de
   app) en dezelfde positionering (top-links, buiten de knop zodat niets
   overlapt met het icoon zelf). Scoped op .sideBox zodat badge-new elders
   (personalLevel, quests-tab, profiel-tabs) ongemoeid blijft. */
.sideBox .badge-new
{
	top:-8px;
	right:auto;
	left:-8px;
}
/* Spec juli 2026: actie-badges óók op tab-knoppen (factory UPGRADE/ENERGY,
   game-summary SOCIAL) — rechtsboven ín de tab i.p.v. buiten de hoek, zodat
   niets wegvalt achter de overflow van de tab-balk. */
.tab-full-btn
{
	position:relative;
}
.tab-full-btn .badge-alert,
.tab-full-btn .badge-new
{
	top:1px;
	left:auto;
	right:4px;
	font-size:12px;
	min-width:1.2rem;
	min-height:1.2rem;
	line-height:1.2rem;
}
/* Zelfde reden, andere plek: de socialUnseen-teller op de header-avatar
   (syncSocialBadges → 'header .playerStats'). Die stond op de generieke
   -8px/-8px, dus buiten de linkerbovenhoek — en .playerStats staat maar 7,5px
   onder de bovenrand van de vaste header. Met de bounce2up-piep erbij kwam de
   tag op y = -7,58 te staan: een derde van de badge viel bóven het scherm en
   was op geen enkele manier terug te halen (geknipt door de schermrand zelf,
   niet door een overflow — html/body/header op visible zetten verandert
   aantoonbaar niets).
   Verraderlijk device-afhankelijk, en precies andersom dan de tabrail-bug:
   header.active krijgt padding-top:env(safe-area-inset-top), dus op een
   iPhone mét notch (~47-59px) zweeft de tag ruim vrij, terwijl hij op Android,
   desktop en notchloze toestellen (inset 0) onthoofd werd.
   Daarom naar binnen, exact zoals de tab-knoppen hierboven. */
header .playerStats .badge-alert
{
	top:1px;
	left:1px;
}
/* actie-badges op de personal-menu-rijen (THE FACTORY / ENERGY ISLANDS) */
#personal_menu .flex-row[render]
{
	position:relative;
}
#personal_menu .badge-alert
{
	top:6px;
	left:2px;
}
/* Spec: prominente rode melding vóór een vrije machine wanneer er cubes te
   evolven zijn — zweeft midden op het machineplatform, tikken opent gewoon de
   bestaande booster-drawer (pointer-events:none laat de tik doorvallen). */
.factory_machine__actie
{
	position:absolute;
	top:38%;
	left:50%;
	/* losse translate-property i.p.v. transform: bounce2up animeert transform
	   en zou de centrering anders elke frame overschrijven */
	translate:-50% -50%;
	z-index:4;
	background:linear-gradient(to bottom, rgb(255 26 0) 0%, rgb(205 0 0) 100%);
	border:1px solid #fff;
	border-radius:8px;
	padding:7px 12px;
	font-size:13px;
	font-weight:bold;
	color:#fff;
	white-space:nowrap;
	box-shadow:0 5px 12px #000000a3;
	animation:bounce2up 2s ease infinite;
	pointer-events:none;
}
/* Spec: zwevend pijltje-omhoog op betaalbare boosters in de evolve-drawer */
.factory_boosters .avatars_grid__avatar
{
	position:relative;
}
.badge-alert--pijl
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	top:-7px;
	left:auto;
	right:-7px;
}
.bonusBarWrapper
{
	background:#000;
	border-radius:10px;
	border: 1px solid #ffffff9e;
	position:relative;
	padding:1px;
	width: 100%;
	height: 14px;
}

.day_streak_grid .striped .bonusBar:after
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 20px 20px;
  animation: move 1s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}
.day_streak_grid .inProgress .bonusBar,
.day_streak_grid .completed .bonusBar,
.day_streak_grid .failed .bonusBar
{
	position:ralative;
	width:100%;  
}
.day_streak_grid .completed .bonusBar
{
    background: linear-gradient(to right, #00de10 0%,#00ff8b 100%);
}
@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 20px;
  }
}


.bonusBarWrapper p 
{
	overflow: hidden;
	white-space: nowrap;
	text-overflow:ellipsis;
	width:90%;
	position:absolute;
	padding:0;
	margin:0;
	top: 50%;
	font-size: 14px;
	left:50%;
	text-align: center;
	overflow: hidden;
	transform: translate(-50%, -50%);
	text-shadow: 0 1px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
[id="newLiveCountDown"]
{
	margin:0;
	margin-right: -6px;
	white-space: nowrap;
	font-size: 13px;
}
[dom-removable="questDetails"] .overflow-container
{
	padding-bottom: 0px !important;
}
[tabcontent="briefing"]  
{
	text-align:left;
}
[tabcontent="briefing"] .mission_description 
{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	text-align:left;
	margin:10px 0;
	gap:10px;
	padding: 0;
	font-family:system-ui;
}
[tabcontent="briefing"] .mission_underline
{
	text-decoration:underline;
}
[tabcontent="briefing"] img 
{
	width:40px;
}
.mission_booster_starters
{
	gap: 15px;
	margin: 20px;
	justify-content: space-evenly !important;
}
.mission_booster_starters img
{
	width: 25vw;
	max-width: 100px;
}

.obj_imgs,
.newHighscore .incomplete_holder
{
	position:relative;
}
.obj_imgs img.full_obj_img,
.newHighscore img.full_obj_img
{
	position:absolute;
}
.obj_imgs img.full_obj_img:nth-child(4)
{
	left:0;
}
.obj_imgs img.full_obj_img:nth-child(5)
{
	left:40px;
}
.obj_imgs img.full_obj_img:nth-child(6)
{
	left:80px;
}
.newHighscore img.full_obj_img
{
	transition:.45s cubic-bezier(0.25, 0.1, 0.55, 2.63) ;
	transform:scale(0)
}

.tutorialPop
{
	position:relative;
	align-items: center;
}
.tutorialPop video 
{
	width:90%;
	padding:5px;
	border:1px solid #fff;
}
.tutorialPop h2,
.tutorialPop h1
{
	color:orange;
	text-align: center;
	display: inline-block;
	margin: 0;
	margin-top: 15px;
}
.tutorialPop p 
{
	margin:5px;
}
.tutorialPop .gamepop_header
{
	width:100%;
	
}
.next-btn,
.prev-btn
{
	background:#ffffff;
	width:60px;
	height:60px;
	position:absolute;
	bottom:150px;;
	z-index:999;
}
.next-btn
{
	clip-path: polygon(64% 50%, 0 0, 0 100%);
	right:-34px;
}
.prev-btn
{
	left:-34px;
	clip-path: polygon(36% 50%, 100% 0, 100% 100%);
}
.btn-inner:after
{
	content:'';
	position:absolute;
	width:100%;
	height:50%;
    background: #ffdb6e;
	opacity:.53;
	left:0;
	top:0;
	z-index:3
}

.btn-border,
.btn-inner
{
	z-index:2;
	background:#875100;
	width: 54px;
	height: 54px;
	position:absolute;
	top:3px;
}
.next-btn .btn-border,
.next-btn .btn-inner
{
	left:1px;
	clip-path: polygon(64% 50%, 0 0, 0 100%);
}
.prev-btn .btn-border,
.prev-btn .btn-inner 
{
	right:1px;
	clip-path: polygon(36% 50%, 100% 0, 100% 100%);
}
.btn-inner
{
	background:#ff8c2b;
	width: 48px;
	height: 48px;
	top:3px;
}
.prev-btn .btn-inner
{
	right:2px;
}
.next-btn .btn-inner
{
	left:2px;
}
.gamepop *,
.bottom_drawer *
{
	overscroll-behavior-y: none;
}
.gamepop_header description
{
	font-size:15px;
	opacity: .9;
}
.packItems span:before
{
	content:'x';
}
.packItems span 
{
	font-size:22px;
	position:absolute;
	bottom:10px;
	font-family:headers;	
	z-index:2;
	text-shadow: 0 2px black, 0 -2px black, 2px 0px black, -2px 0 black;

}
.packItems img 
{
	transform:scale(.9)
}
.no-overscroll-y
{
	overscroll-behavior-y: none !important;
}
[id="gamerprofile"]
{
	height:100vh
	height: var(--vh100)
}
.tutorialPop h4 
{
	margin:0;
	display: inline-block;
}
.biome 
{
	position:relative;
}
.campaign_friends img
{
	min-width:25px;
	height:25px;
}
.campaign_friends:before
{
	/* content:''; */
	width:10px;
	height:10px;
	border-left:1px solid #000;
	border-bottom:1px solid #000;
	left:-5px;
	background: #fff;
	position:absolute;
	rotate:45deg;
}
.campaign_friends
{
	display:flex;
	align-items:center;
	/* border:1px solid #000; */
	background:#fff;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0.5+100;White+to+Transparent */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#80ffffff',GradientType=0 ); /* IE6-9 */
	border-radius:10px;
	padding:10px;
	position:absolute;
	bottom: 3px;
	/* opacity: 0.85; */
	gap:5px;
	box-shadow:0 10px 10px #0000003b;
	left: 54px;
}
.mission_holder:nth-child(4) .campaign_friends
{
	left:unset;
	right: 53px;
}
.mission_holder:nth-child(4) .campaign_friends:before
{
	left:unset;
	right:-5px;
	border-right:1px solid #000;
	border-top:1px solid #000;
	border-left:unset;
	border-bottom:unset;
}
.campaignmap
{
	height: 100vh;
	height: var(--vh100);
	position:fixed;
	overflow: hidden;
	left:0;
	top:0;
	list-style-type: none;
}

.hidden_campaign_friends
{
	background: #673ab7;
	min-width:25px;
	height:25px;
	align-items:center;
	justify-content:center;
	display:flex;
	border-radius:100%;
}

.biome__mission
{
	display:flex;
	align-items:center;
	justify-content:center;
	height: 40px;
	width: 40px;
	border-radius:100%;
	background: #673AB7;
	border: 3px solid #fff;
	font-family: headers;
	border-radius: 100%;
	box-shadow: 0 -2px 0 2px #240063 inset, 0 5px 5px rgba(3, 25, 41, 0.17), 0 10px rgba(255, 255, 255, 0.25) inset;
	cursor: pointer;
}
.mission_holder
{
	position:absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.biome__mission.mission_locked
{
	
	background: #c0c0c0ba;
	color:#6b6673;
	box-shadow: 0 -2px 0 2px #4f4f4f91 inset, 0 5px 5px rgba(3, 25, 41, 0.17), 0 10px rgba(255, 255, 255, 0.25) inset;
}
.biome__mission.mission_unlocked
{
	
	background: #FF9800;
	box-shadow: 0 -2px 0 2px #b26a00 inset, 0 5px 5px rgba(3, 25, 41, 0.17), 0 10px rgba(255, 255, 255, 0.25) inset;
}
.mission_holder:nth-child(1)
{
	left:50%;
	bottom:10%;
}
.mission_holder:nth-child(2)
{
	left: 22%;
	bottom: 25%;
}
.mission_holder:nth-child(3)
{
	left: 14%;
	bottom: 56%;
}
.mission_holder:nth-child(4)
{
	left: 75%;
	bottom: 68%;
}
.mission_holder:nth-child(5)
{
	left: 35%;
	bottom:82%;
}
.mission_holder .personal_result
{
	height: 40px;
	width: 40px !important;
	margin-left: -5px;
}
.complete_holder img.new1,
.complete_holder img.new2,
.complete_holder img.new3
{
	opacity:0
}

.campaignmap_scroller
{
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;
	height: var(--vh100);
	display: flex;
	width: 100vw;
	flex-direction: column-reverse;
	position:relative;
	overscroll-behavior: none;
}

.campaignmap_scroller:before
{
		content:'';
	top: 0;
	left:0;
	width:100%;
	height:150px;
	position:fixed;
	pointer-events: none;
	z-index:2;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
	background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgb(0 0 0 / 50%) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgb(0 0 0 / 50%) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to top, rgba(0,0,0,0) 20%,rgb(0 0 0 / 50%) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.campaignmap_scroller:after
{
	content:'';
	bottom: 0;
	left:0;
	width:100%;
	height:150px;
	position:fixed;
	pointer-events: none;
	z-index:2;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 20%,rgba(0,0,0,.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.campaignmap .biome img
{
	width:100%;
	padding: 0;
}
/* WP9: reserveer de exacte tegelhoogte (bron 2048×2732) vóór de afbeelding laadt.
   Zonder deze reservering heeft een nog-niet-geladen <img> hoogte 0 → in de
   column-reverse scroller verschuift dat de layout en toont het een stitch-lijn
   of snijdt een deel af. Layout-neutraal: het is exact de ruimte die de tegel
   sowieso inneemt. */
.campaignmap .biome .section_img
{
	aspect-ratio: 2048 / 2732;
	height: auto;
	display: block;
}
.campaignmap .biome 
{
	display:block;
	margin: 0;
	padding: 0;
	margin-bottom: -4px;
	position: relative;
}
input::placeholder
{
	font-style: italic;
	color:#1e002d8a;
}
.space-around
{
	justify-content:space-around;
	width:100%;
}
.corner-right,
.corner-left
{
	position:fixed;
	top: env(safe-area-inset-top);
	color:#fff;
	width:40px;
	padding:5px;
	height:40px;
	border-radius:100%;
}
.color-orange
{
	color:orange !important
}
.color-red
{
	color: #ff1100 !important;
}
.color-green
{
	color:#4CAF50 !important;
}
.recent_top_corner_datetime
{
	color: white;
	right:10px;
	opacity: .5;
	top:10px;
	font-size:14px;
	position:absolute;
}
.corner-right
{
	right:0;
}
#confetti
{
	pointer-events: none;
	z-index: 5;
	left: 0;
	top: 0;
	position: fixed;
	height: 100vh;
	height: var(--vh100);
	width: 100vw;
}
.corner-left
{
	left: 0;
	display: flex;
	width: 120px;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.corner-right svg,
.corner-left svg
{
	width:40px;
	height:40px;
}
.link-white
{
	color:#ffffff;
	font-familly:'typewriter';
	display:block;
	font-size:30px;
	text-Decoration:none;
	padding:10px;
	padding-bottom:0;
}
.tap_correct
{
	color:lime;
}
.tap_incorrect
{
	color:red;
}
#gameID
{
	opacity:.4
}
#gameID:before
{
	content:'# '
}
[tabcontent]
{
	display: none !important;
	height: 100%;
	max-height: -webkit-fill-available;
	width: -webkit-fill-available;
	overflow: auto;
	position: absolute;
	width: -moz-available;
	box-sizing: border-box;
}
[tabcontent="inbox"] .btn-gray
{
	background:none;margin-left:auto;
}

[tabcontent="inbox"] .btn-gray:after
{
	content:initial
}
[tabcontent].active
{
	display: block !important;
}
[tabcontent="details"].active
{
	display: flex;
	flex-direction: column;
}
[tabcontent="highlights"] > .flex-row
{
	justify-content:space-between;
	margin-bottom:20px;
	gap:10px;
}
[tabcontent="highlights"] h3
{
	margin-top:0;
	margin-bottom:10px;
	background: #673AB7;
	padding:10px;
	font-size: 20px;
	font-family: 'font3' !important;
}
	
[tabcontent="highlights"] .flex-row .game_stat
{
	width:100%
}
.tablewrapper
{
	overflow:auto;
	padding: 0;
}
.tablewrapper table 
{
	border-collapse:collapse
}
.tablewrapper th 
{
	position:sticky;
	left: -1px;
	min-width: 102px;
	padding: 0 5px;
	text-align: start;
	background: #1e004f;
	border-bottom: 1px solid #50357a;
}

.tablewrapper table td 
{
	padding:5px 10px;
	border-bottom: 1px solid #50357a;
}
.tabs-full
{
	display:flex;
	border-radius: 5px;
	background: #6e3ec300;
	border: 1px solid #11004c;
	font-size:16px;
	width: calc(100% - 2rem);
	margin: 0 1rem;
}
.tabs-full .tab-full-btn
{
	padding:8px;
	border-right: 1px solid #000;
	width: 100%;
	text-align: center;
	position: relative;
	text-shadow: 0 1px black, 0 -1px black, 1px 0px black, -1px 0 black;
	/* background: #38255a; */
}
.tabs-full .tab-full-btn:last-child
{
	border-right:0px;
}
.tabs-full
{
	position:relative;
}
.giftway_btn
{
	width:100%;
	position:relative;
}
.cursor-wrapper.challenges
{
	position:relative;
}

.cursor-wrapper.challenges:before
{
	content:'';
	position:absolute;
	z-index:-1;
	height:100%;
	transition: .4s;
	transform: skew(-12deg, 0);
	width: calc(var(--progress) + 16px);
	background: #5928ab;
	background: linear-gradient(1deg, rgba(88,0,147,1) 0%,rgba(154,0,255,1) 100%);
	left: -8px;
	top:0;
}
.cursor-wrapper.challenges:after
{
}
.cursor-wrapper.challenges .relative
{
	/* margin-top:-10px; */
}
.cursor-wrapper.challenges .starShine:before
{
	top:-10px;
	left:20px;
	z-index:2;
}
.cursor-wrapper.challenges h4
{
	margin:0;
	font-size: 25px;
	opacity: 1;
	/* text-align: center; */
	font-family: 'font3' !important;
	/* text-wrap: nowrap; */
	text-shadow: 0 1px #2c0166, 0 -1px #2c0166, 1px 0px #2c0166, -1px 0 #2c0166;
}

.cursor-wrapper.challenges .bonusBar
{
	background:#2196F3;
}
.tabs-full:after,
.cursor-wrapper.challenges:after
{
	width:calc(100% - 6px);
	height:50%;
	content:'';
	top:3px;
	left:3px;
	position:absolute;
	background:#fff;
	opacity:.3;
	border-radius:3px;
	pointer-events: none;
}
.tutorialPop .tabs-full:after
{
	content:none;
}

.tabs-full .tab-btn
{
	border-radius:0
}
.loading .hideOnLoading
{
	display:none !important;
}

.tabs-full .tab-full-btn-active
{
    background: linear-gradient(to bottom, rgba(255,168,76,1) 0%,rgba(255,123,13,1));
    background: linear-gradient(to bottom, #ffd700 0%,rgb(255 119 0) 100%);
    text-shadow: 0px 1px #091c39;
    text-shadow: 0 2px black, 0 -1px #0000007a, 1px 0px #0000007a, -1px 0 #0000007a;
    z-index: 2;
}
.tabs-full .tab-full-btn-active
{
	border-radius:5px 
}
.tabs-full .tab-full-btn-active .color-purple 
{
	color:#fff;
}
.gamerLevel
{
	font-size:12px;
	background:#FFC107;
	color:#000;
	border-radius:10px;
	text-align:center;
	min-width:30px;
	padding:1px 5px;
	display: flex;
	gap:2px;
	align-items: center;
	justify-content:center;
}
.gamerLevel svg 
{
	width:10px;
	min-width:10px;
	height:10px;
	min-height:10px;
}

gamestats
{
	position:fixed;
	top:5rem;
	height: -webkit-fill-available;
	width: 100vw;
	left:0;
	background: #130150;
	padding: 20px;
	box-sizing: border-box;
}
gamestats .progressbar
{
	margin-bottom:40px
}
gamestats h3
{
	justify-content:space-between;
	margin: 8px 0;
}
gamestats h3 span.green
{
	margin-left:10px;
	color:#fff;
	background:#4CAF50;
	padding:1px 10px;
	border-radius:15px;
	overflow:hidden;
	position:relative;
}

gamestats h3 span.green:after 
{
	content:'';
	left:0;
	margin-left:4px;
	top:0;
	height:12px;
	border-radius:15px;
	opacity:.2;
	width:calc(100% - 8px);
	background:#fff;
	position:absolute;
}
.liveRemoveAnimation .removable
{
	transform: translateY(80px) scale(3);
	opacity: 0;
}
.dashboard_section__rank__number
{
	background: #9400f4;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
	width: 20px;
	min-width: 20px;
	height:30px;
	justify-content:center;
	border-radius: 0 15px 15px 0;
	align-items:center;
	display:flex;
	margin-left:-10px;
	border: 1px solid #11004c;
	border-left: 0;
	position:relative;
	overflow:hidden;
}
.dashboard_section__rank__number:before
{
	content:'';
	width:100%;
	height:50%;
	position:absolute;
	left:0;
	top:0;
	background:#fff6;
}
  
@keyframes removeLive 
{to{transform:scale(3) translateY(50px)}

}
[id="forceField"]
{
	position:fixed;
	top:0;
	left:0;
	display:block;
	transition:.5s ease;
	z-index:2;
	pointer-events: none;
}
.hidden
{
	display: none !important;
}
.o-w
{
	overflow: hidden;
	margin: 20px 0;
}
login .o-w
{
	padding:10px;
}
tutorial .slide,
.slide
{
	    overflow: hidden;
	    flex-direction: column;
	    display: flex;
	    min-width: calc(100vw - 40px);
	    max-width: calc(100vw - 40px);
	    width: calc(100vw - 40px);
	    height: -webkit-fill-available;
	    min-height: -webkit-fill-available;
	    max-width: -webkit-fill-available;
	    overflow: hidden;
}
input,
tutorial .slide input,
login .slide input 
{
	width:calc(100% - 40px);
	height:40px;
	margin:0 5px;
	border-radius:10px;
	background:#ffffff63;
	padding:10px;
	font-size:18px;
	border:none;
	color: #fff;
}
input
{
	font-family:verdana
}
input[debounce-remote-fetch="Social/search"]
{
	border:1px solid #fff0;
	opacity:.5;
	width:85vw !important;
	outline: none;
}
input[debounce-remote-fetch="Social/search"]:focus
{
	border:1px solid #fff;
	opacity:1;
}
tutorial .slide input:focus,
login .slide input:focus
{
	outline: 1px solid #fff;
	box-shadow: 0 2px 10px #ff7f15,0 -2px 10px #ff7f15,-2px 0 10px #ff7f15,2px 0 10px #ff7f15;
}
.o-w h1 
{
	margin-top:0;
}
.league-day-cursor h1 
{
	white-space: nowrap;
	margin: 0;
	font-size: 25px;
}
header,
gameheader
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding: 0;
	position:fixed;
	min-width:100vw;
	top:0;
	left:0;
	width:100vw;
	gap: 20px;
	box-shadow: 0 5px 5px #000;
	max-width:100vw;
	box-sizing:border-box;
	height: calc(env(safe-area-inset-top) + 5rem);
	background: rgb(110 62 195);
	background: linear-gradient(359deg, rgb(119 0 199) 1%,rgb(158 99 255) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background: linear-gradient(1deg, rgba(88,0,147,1) 0%,rgba(154,0,255,1) 100%);
	border-bottom: 1px solid #c05fff;
	outline: #460274 5px solid;
	z-index: 3;
	transform: translateY(-9rem);
}
gameheader
{
	height: calc(env(safe-area-inset-top) + 4rem);
}
header.active,
gameheader.active
{
	transform:translateY(0);
	padding: 0 15px;
	padding-top: env(safe-area-inset-top);
}
.campaignmode dashboard .buttons
{
	background:none;
}

.campaignmode header
{
	background: none; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	outline: none;
	box-shadow: none;
	border: none;
}
dashboard .buttons
{
	transition:.5s;
}
header img 
{
	width:8vmin;
	border-radius:100%;
}
:root
{--s: 60s;
	  --g: 10px;
	  --clipMe_1:0;
	--clipMe_2:0;
	--clipMe_3:0;
	  }
/* Schilhoogte via --vh100 (één schakelaar) mét 100vh-fallback op elke regel:
   in Safari is 100vh de GROTE viewport (werkbalken ingeklapt), terwijl een app
   die zelf nooit scrolt de werkbalken nooit inklapt — alles wat op de onderrand
   hing (SPIN, CLAIM ALL, de mystery-voet) stond dus onder de werkbalk, en het
   te hoge document liet het venster meescrollen zonder weg terug. Daar is
   100dvh (dynamic viewport height) het juiste antwoord.
   MAAR: in de thuisschermapp (PWA, display-mode standalone) en in een webview
   zijn er géén werkbalken en rekent WebKit 100dvh tóch alsof ze er zijn →
   een dikke zwarte band onderaan (feedback 14 sep). Daar is 100vh exact.
   Vandaar de variabele: dvh alleen in een echte browser; viewport-guard.js
   meet bovendien innerHeight tegen 100dvh en zet html.dvh-uit wanneer ze
   uiteenlopen (vangnet voor webviews die 'browser' rapporteren). */
:root { --vh100: 100vh; }
@supports (height: 100dvh)
{
	:root { --vh100: 100dvh; }
}
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui)
{
	:root { --vh100: 100vh; }
}
html.dvh-uit { --vh100: 100vh; }
html
{
	width: 100%;
	height: 100vh;
	height: var(--vh100);
	background-color: black;
	overflow:hidden;
	overscroll-behavior: none;
}
.bg_img
{
	width: 100vw;
	height: 100vh;
	height: var(--vh100);
	position:fixed;
	top: 0;
	left: 0;
	opacity: .5;
	background: url(/public/img/cubelegend/cbg0.jpeg);
	background-size:cover;
	background-repeat: no-repeat;
	transition:.25s;
	overflow: hidden;
	contain: strict;
}
.bg_img.gb1
{
	background:url(/public/img/cubelegend/campaign/GB_1.png);
	background-size:cover;
	background-position:center bottom;
	filter: blur(0);
}
.tabs
{
	overflow: hidden;
	position: relative;
	height: 100%;
	margin-top: -5px;
	height: -webkit-fill-available;
	max-height: -webkit-fill-available;
}
td.high
{
	background: #673AB7;
}
body 
{
	font-family: 'headers', 'font3';
	text-align:center;
	color:#fff;
	background:#000;
	width: 100vw;
	min-width:100vw;
	max-width:100vw;
	height: 100vh;
	height: var(--vh100);
	min-height:100vh;
	min-height: var(--vh100);
	max-height:100vh;
	max-height: var(--vh100);
	padding: 0;
	position: relative;
	margin: 0;
	overflow: hidden;
	overscroll-behavior: none;
}
.propertyInfoSlide
{
	width: 80% !important;
	margin: 0 10%  !important;
	background: #00000070;
	border-radius: 5px;
	border: 1px solid #000;
	padding:10px;
	box-sizing:border-box;
	text-align:left;
	font-size:14px;
}
.propertyInfoSlide h2 
{
	display:flex !important;
	text-align:left;
	align-items:center;
	justify-content:flex-start;
	padding-bottom:10px;
}

h1
{
	font-family: 'headers';
	display:inline-block;
	/*animation: rainbowtxt 20s infinite;*/
	font-size: 22px !important;
}

h1,h2,h3,h4,.btn-orange *
{
	font-family: headers !important;
	/* font-size: 30px; */
}
@media only screen and (max-height: 670px) {
    h1 {
       /* display: none;*/
    }
}
[id="classicResults"] .gift h3 
{
	margin:0;
	right:0;
	bottom:0;
	position:absolute
}
[id="classicResults"] .gift
{
	position:relative;
}

[id="classicResults"] .quest_reward 
{
	max-height:90px;
}
#myCanvas,
#thegrid
{
    display: inline-flex;
    /* animation: rainbow 20s infinite; */
    left:0;
    right:0;
    width:auto;
    z-index: 3;
    position: relative;
    padding: 2px;
    overflow: hidden;
    margin: 3vmin;
    aspect-ratio: auto;
    image-rendering: pixelated;
}
.col
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.cube,
.bcube
{
    /* background:#eee; */
    width: 11vmin;
    height: 11vmin;
    min-height: 11vmin;
    transition: height .1s, box-shadow .01s;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: solid  #00000069;
    border-left: solid #00000069;
    border-top: solid #ffffff69;
    border-right: solid #ffffff69;
    border-width: 3px;
    justify-content: center;
    position:relative;
    font-size:7vmin;
}
.cube .border,
.bcube .border
{
	box-sizing:border-box;
	width:100%;
	height:100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-bottom: solid  #00000069;
	border-left: solid #00000069;
	border-top: solid #ffffff69;
	border-right: solid #ffffff69;
	border-width: 3px;
	pointer-events: none;
}
.cube:before,
.bcube:before 
{
	content:'';
	display:block;
	width:100%;
	height:50%;
	top:0;
	left:0;
	position:absolute;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
.cube:after ,
.bcube:after
{
	content:'';
	display:block;
	width:100%;
	height:50%;
	bottom:0;
	left:0;
	position:absolute;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
.cube.red
{
    background:#F44336;
}
.cube.green
{
    background:#4CAF50;
}
.cube.orange
{
    background:#FFC107;
}
.cube.purple
{
    background:#9C27B0;
    
}
.cube.blue
{
    background:#2196F3;
}
.cube[rbomb],
.cube[bbomb],
.bcube[rbomb],
.bcube[bbomb]
{
	background:none;
	overflow:hidden;
	border-width:0;
	width:calc(11vmin + 6px);
	height:calc(11vmin + 6px);
}
#bonusBarWrapper
{
	width:100%;
	background:#ffffff36;
	border-radius:10px;
}
.bcube[rbomb],
.bcube[bbomb]
{
	position:absolute;
	transition: .5s ease-in-out;
}
.cube[rbomb]:after,
.bcube[rbomb]:after
{
	z-index:-1;
	position:absolute;
	left:-25%;
	top:-25%;
	content:'';
	will-change: transform;
	height:150%;
	transform: translateZ(0);
	width:150%;
    /*animation: rotate 10s linear infinite;*/
    background:url('/public/img/rainbow.jpg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position:center;
}

.cube[bbomb]:after,
.bcube[bbomb]:after
{
	z-index:-1;
	position:absolute;
	left:-25%;
	top:-25%;
	content:'';
	will-change: transform;
	transform: translateZ(0);
	height:150%;
	width:150%;
    /*animation: rotate 10s linear infinite;*/
	background:#000;


}

  
@keyframes rotate 
{

  0% { transform: rotateZ(0deg) }
  100% { transform: rotateZ(360deg) }

}
.personal_rank 
{
	width:100%;
	gap: 10px;
}
.personal_quests,
.personal_rank > div
{
	gap: 5px;
	width: 100%;
	align-items:center;
	background:#11004c80;
	/* border: 1px solid #11004c; */
	border-radius:5px;
	justify-content: space-between !important;
}
.personal_rank > div
{
    box-shadow: 0 0 30px #9900fe;
	padding:10px;
}

.personal_quests h1 
{
	display:none;
}
.personal_quests
{
	position:relative;
}

.personal_quests .overflow-shimmer
{
	display:flex;
	transition:.25s;
	width: auto;
	padding:10px;
	gap:10px;
	text-align:left !important;
	align-items: flex-start;
}
.month .personal_quests .overflow-shimmer
{
	flex-direction:column;
	width:-webkit-fill-available;
	align-items:center;
	justify-content:center;
}
.personal_quests .flex-col > span
{
	padding-right:25px;
}

.personal_quests .flex-col span
{
	white-space:wrap;
}
.personal_quests.vip
{
            /* background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37, #FDB931, #9f7928, #8A6E2F, transparent 80%), 
            radial-gradient(ellipse farthest-corner at left top, #FFFFFF, #FFFFAC, #D1B464, #5d4a1f 62.5%, #5d4a1f); */
            }

.personal_quests h3
{
	margin:0;
    text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.personal_quests.vip:before
{
	left: 0;
}
.vip-enabled .vip:after
{
	display:none;
}

.personal_quests.vip span
{
    text-shadow: 0 1px #000;
}
.personal_quests.vip .gamemodes span
{
	
    text-shadow: none !important;
}
.personal_quests.vip span .highlight
{
	color: #fff;
	text-decoration:underline;
}
.personal_quests.claimable.vip .bonusBarWrapper
{
	display:block;
}
.personal_quests.claimable .gamemodes,
.personal_quests.claimable .bonusBarWrapper,
.vip-enabled .personal_quests.claimable.vip .bonusBarWrapper
{
	display:none;
}
.month .personal_quests.claimable .bonusBarWrapper
{
	/* display:block; */
	/* overflow: hidden; */
}
.personal_quests:active
{
	transform:scale(.9);
}
/* spec juli 2026: claimbare vip-challenges dragen exact dezelfde achtergrond
   als gewone claimbare challenges (de :not(.vip)-uitzondering liet vip-rijen
   op de lichte basisachtergrond staan) */
.personal_quests.claimable
{
    text-shadow: 0 1px black, 0 -1px black, 1px 0px black, -1px 0 black;
    background: linear-gradient(0, rgba(88,0,147,1) 0%,rgba(154,0,255,1) 100%);
}
.month .personal_quests.claimable
{
	/* background: #11004c80; */
}
.month .personal_quests.claimable h1
{
	/* display:none; */
}
.vip.claimable .q_cube
{
	
	background: #70ff00 !important;
}
.claimable .highlight,
.complete .highlight
{
	text-decoration:underline;
	color: #fff !important;
}

.claimed .bonusBar,
.personal_quests.complete .bonusBar,
.bonusBarWrapper.complete .bonusBar
{
	background: linear-gradient(to right, #00de10 0%,#00ff8b 100%);
	width:100% !important;
}
.personal_quests.complete:not(.claimable) .quest_reward
{
	opacity:.5;
	filter:grayscale(1);
}
.personal_quests.vip.claimable h1
{
	display:none;
}
.quest_avatar
{
	min-width: 65px;
	min-height: 65px;
	/* background: #ffffff4f; */
	/* border: 1px solid #000; */
	border-radius:5px;
	display:flex;
	align-items:center;
	color:#fff;
	justify-content:center;
	position:relative;
	top: 0;
}
.quest_avatar img 
{
	min-width: 60px;
	min-height: 60px;
	filter: drop-shadow(0 0 5px #000);
	border-radius:0px !important;
}
.quest_avatar > div
{
	width: 30px;
	height: 30px;
}
.personal_quests.complete .quest_avatar > div,
.personal_quests.claimable.vip .quest_avatar > div 
{
	background-color: #70ff00 !important;
	font-size:4px !important;
	-webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30px" height="30px" viewBox="0 0 512 512"%3E%3Cpath fill="%232B3B47" d="m484.065 66.324l-71.534-41.759c-8.811-5.143-20.123-2.17-25.266 6.641L211.883 331.642L96.414 264.236c-7.143-4.17-16.314-1.76-20.484 5.384l-45.284 77.573c-4.17 7.143-1.76 16.314 5.384 20.484l205.968 120.235c7.143 4.17 16.314 1.76 20.484-5.384l1.669-2.86c.034-.056.074-.106.107-.163L490.706 91.59c5.143-8.811 2.17-20.123-6.641-25.266z"%2F%3E%3C%2Fsvg%3E')
}
.q_cube
{
	background-color: #ffffff;
	-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30px" height="30px" viewBox="0 0 24 24"%3E%3Cpath fill="white" d="M13.409 2.511a3.75 3.75 0 0 0-2.818 0l-7.498 3.04A1.75 1.75 0 0 0 2 7.173v9.653a1.75 1.75 0 0 0 1.093 1.621l7.498 3.04a3.75 3.75 0 0 0 2.818 0l7.498-3.04A1.75 1.75 0 0 0 22 16.826V7.173a1.75 1.75 0 0 0-1.093-1.622l-7.498-3.04Zm-7.36 5.472a.75.75 0 0 1 .967-.435L12 9.438l4.984-1.89a.75.75 0 1 1 .532 1.402l-4.766 1.81v5.49a.75.75 0 1 1-1.5 0v-5.49L6.484 8.95a.75.75 0 0 1-.435-.967Z"%2F%3E%3C%2Fsvg%3E')
}

.vip .q_cube
{    
	background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
	-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30px" height="30px" viewBox="0 0 24 24"%3E%3Cg fill="none"%3E%3Cpath d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"%2F%3E%3Cpath fill="currentColor" d="M12.987 5.74a2 2 0 1 0-1.97.002l-.01.018c-.655 1.367-1.565 3.325-2.97 4.06c-1.154.603-2.81.3-4.04.074a1.5 1.5 0 1 0-1.772 1.58l2.948 7.61A3 3 0 0 0 7.97 21h8.06a3 3 0 0 0 2.797-1.916l2.947-7.61a1.5 1.5 0 1 0-1.767-1.624c-1.259.163-2.882.371-4.044-.236c-1.377-.72-2.3-2.543-2.976-3.874Z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}

.vip claimable.vip .quest_avatar > div 
{
	
	background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}
.personal_rank span 
{
	opacity:.5;
}
.personal_rank h3 
{
	margin:0;
	font-size: 30px;
	padding:0;
	display: flex;
	gap: 10px;
	align-items: center;
	filter: drop-shadow(0 1px 1px black);
}
.dashboard_section__rank__self
{
	background:#673AB7;
	background: linear-gradient(0, rgba(88,0,147,1) 0%,rgba(154,0,255,1) 100%);
	position: sticky !important;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 100%;
	width: -webkit-fill-available;
}
.cd_clock
{
	align-items: baseline;
	gap:1rem;
	justify-content: center;
	margin-left:auto;
	width: 100%;
}
.time_remaining .cd_clock
{
	gap:0;
	font-size:15px;
}
.time_remaining img 
{
	max-width:35px !important;
	max-height:35px !important;
}
.time_remaining .cd_clock span
{
	font-size:15px;
	opacity:1;
	margin-left:6px;
	color:#fff !important;
	padding: 0;
}
.time_remaining .cd_clock span:first-child
{
	margin-left:0;
}
.cd_clock > div 
{text-align: center;min-width: 20%;max-width: 20%;}
.cd_clock  h1  
{
	margin:0;
	padding:0;
	font-size: 29px !important;
	font-family: 'font3' !important;
}
.cd_clock  span
{
	opacity: 1 !important;
	font-size: 60%;
	padding-top: 40%;
}
.gap-5
{
	gap:5px;
}
.gap-10
{
	gap:10px;
}
.gap-20
{
	gap:20px;
}
.recent-game
{
	min-width: 100%;
}
.flex-row,
.flex-col
{
    display:flex;
}
.transaction-item
{
	padding:20px;
	border-top:1px solid #ffffff52;
	box-sizing:border-box;
	gap: 20px;
}
.transaction-item h3
{
	font-size:16px;
}
.transaction-item div:last-child
{
	text-align:right;
}
.transaction-item div:last-child span
{
	opacity:.55
}
.baught-items
{
	align-items:center;
	justify-content:flex-end
}
.baught-items img 
{
	max-width:50px;
	max-height:50px;
	
}
.baught-items div 
{
	position:relative;
}
.baught-items div span
{
	position:absolute;
	left:-5px;
	bottom:-5px;
	background: #00000059;
	min-width:20px;
	text-align:center;
	padding:2px;
	opacity:1 !important;
}
.transaction-change
{
	position:relative;
	height: fit-content;
}
.transaction-change span
{
	position:absolute;
	right: -5px;
	bottom: -5px;
	min-width: 30px;
	padding: 5px;
	border:4px solid #320053;
	background:#4caf50;
}
.transaction-change.positive span:before
{
	content:'+';
	
}
.transaction-change.negative span
{
	background:red;
}
.flex-wrap
{
	flex-wrap:wrap
}
.flex-wrap.anime
{
	padding-bottom:15px;
	display:flex;
	flex-wrap:wrap;
	gap:5px;
	justify-content:center;
	font-size:12px;
}

.flex-wrap.anime div
{
	border-radius:3px;
	transform:scale(2);
	opacity:0;
	background: #8403d5;
	color:#fff;
	padding:3px 7px;
	display: flex;
	align-items: center;
	gap: 4px;
	transition: .4s;
}
.flex-wrap.anime div img
{
	width:20px;
	height:20px;
}
.tabs-wrapper,
.tabs-parent
{
	align-items:center;
	gap:10px;
	width: 100%;
	display: flex;
}
.tabs-wrapper
{
	width: calc(100% - 2rem);
	justify-content: space-between !important;
	z-index: 3;
}
.align-center
{align-items:center;
}
.flex-col
{
	flex-direction:column
}
.cursor-wrapper
{
	background: #4e357a38;
	box-shadow: 0 0 30px #9900fe;
	padding: 10px;
	text-shadow: 0 1px #2c0166, 0 -1px #2c0166, 1px 0px #2c0166, -1px 0 #2c0166;
	border: 1px solid #11004c;
	border-radius: 5px;
	overflow: hidden;
}
.roundRewardsProgressBar
{
	height: 62px;
	width: 62px;
	rotate: 90deg;
}
.cursor-wrapper img 
{
	top: 8px;
	left: 8px;
	/* width: 55px; */
	height: 55px;
	filter: drop-shadow(0 0 5px #fff);
	transition: .3s;
}
.flex-row.align-center
{
    justify-content:center;
    align-items: center;
}

[id="lives"] div:nth-child(1),
[id="lives"].unlimited div:nth-child(2),
[id="lives"].unlimited div:nth-child(3),
[id="lives"].unlimited div:nth-child(4),
[id="lives"].unlimited div:nth-child(5),
[id="lives"].unlimited div:nth-child(6)
{
	display:none;
}
[id="lives"].unlimited div:nth-child(1)
{
	display:block;
}
.limited_offers__item__body__img
{
	gap: 20px 0;
	flex-wrap: wrap;
	margin-top: auto;
}
.gap-10
{
	gap:10px;
}
.context_header
{
	    width: calc(100% - 2rem);
	    gap: 10px;
	    justify-content:space-between !important;
	    margin-bottom: 5px;
	    margin-top: 10px;
}
/* De paginakop is contextuele duiding, geen inhoud: elke pixel die hier
   weggaat komt bij de lijst eronder terecht. Krapper dus, aan alle drie de
   naden — boven de titel, tussen titel en knop, en onder de knop. */
.context_header.pagina_kop
{
	margin-top:2px;
	/* De pose is hoger dan titel+knop samen en bepaalt dus de kophoogte. De
	   onderste strook daarvan is bijna helemaal z'n voeten en lege ruimte, dus
	   die mag de tabs eronder overlappen — dat scheelt zo'n 14px echte inhoud
	   zonder de mascotte kleiner te maken. */
	margin-bottom:-14px;
	gap:6px;
}
/* titel en knop bovenaan, niet gecentreerd: gecentreerd viel de slack van de
   pose vóór de titel en dat las als een gat onder de app-header */
.pagina_kop__kolom
{
	justify-content:flex-start;
	gap:5px;
}
.secundary_highlights
{
	gap:5px;
}
.secundary_highlights .flex-row
{
	justify-content:space-between;
	align-items:center;
	border-bottom:1px solid #673ab7
}
.secundary_highlights .flex-row h3
{
	font-size: 16px;
	padding: 4px 10px;
	margin:0;
}
.context_header h3 
{
	margin:0;
	padding:0;
	font-size: 24px;
	/* word-spacing: 100vw; */
	position: relative;
}
.context_header h3 span 
{
	font-family:headers !important
}

.flex-row.space-between
{
    justify-content: space-between;
	width:-webkit-fill-available
}
.flex-row.space-around
{
	
    justify-content: space-around;
}
.dashboard
{
	margin: 3vmin 5vmin;
	align-items:flex-end;
	padding: 1vmin;
}
.dashboard small
{
	font-size:11px;
	opacity:.75;
}
.dashboard > div 
{
	width:10%;
}
.active_cubes_slider_wrapper
{
	overflow:hidden;
	margin:12px;
}
.opacity-0
{
	opacity:0;
}
.width-0
{
	width:0;
}
.active_cubes_wrapper
{
	display:flex;
	transform:translate3d(0, 0, 0);
	align-items:center;
	transition: .2s cubic-bezier(0.09, 0.37, 0.25, 1);
	gap:5px;
	width: 200vw;
}
.active_cube_wrapper
{
	display:flex;
	width:100px;
	max-width:100px;
	align-items:center;
	background:#4e357a;
	position:relative;
	transform: translate3d(100vw,0,0);
	transition: .25s cubic-bezier(0.09, 0.37, 0.25, 1);
}
.active_cube_wrapper.active
{
	transform:translate3d(0,0,0);
}
.active_cube_wrapper .bonusBar
{
	width:100%;
	height:100%;
	border-radius:0;
	transition-timing-function: linear;
}

.active_cube_wrapper.active .bonusBar
{
	width:0;
}

.active_cube_wrapper:after
{
	content:'';
	position:absolute;
	width: 100%;
	height:50%;
	background: #ffffff57;
	top: 0;
	left: 0;
}
.active_cube_wrapper img
{
	width:34px;
}

.active_cube_wrapper .bonusBarWrapper
{
	border-radius:0;
	height:30px;
}
.dashboard > div:nth-child(2)
{
	width:60%
}
.board_wrapper
{
	width: 100%;
	z-index: 2;
}
/* Het speelveld is een <canvas> en dat is inline-level. In een blok met
   regelhoogte krijgt het daardoor ruimte boven EN onder zich: gemeten stond de
   wrapper op 326-916 terwijl het canvas op 339-903 zat — 13px lege, DOORZICHTIGE
   strook tussen de onderkant van de free-booster-balk en de eerste rij kubussen.
   <game> verft daar niets, dus keek je daar dwars doorheen op wat eronder ligt:
   precies daar staken de voeten van de PvP-spelerkaarten eruit.
   display:block haalt de regelruimte weg zodat de grid op de balk aansluit;
   margin:0 auto houdt de horizontale centrering die eerst van text-align kwam.
   Tikken blijven kloppen: gameInterface.top komt uit canvas.getBoundingClientRect(). */
#board_wrapper > canvas { display: block; margin: 0 auto; }

@keyframes rainbow {
	from, to { box-shadow: 0 0 75px 20px red }
	16% { box-shadow: 0 0 75px 20px  yellow }
	32% { box-shadow: 0 0 75px 20px  green }
	48% { box-shadow: 0 0 75px 20px  aqua }
	64% { box-shadow: 0 0 75px 20px  blue }
	80% { box-shadow: 0 0 75px 20px  fuchsia }

}

@keyframes rainbowtxt {
	from, to { text-shadow: 0 2px red }
	16% { text-shadow: 0  2px  yellow }
	32% { text-shadow: 0 2px  green }
	48% { text-shadow: 0 2px  aqua }
	64% { text-shadow: 0 2px  blue }
	80% { text-shadow: 0 2px  fuchsia }

}

#bonus,
#objective{
	position: relative;
	height: auto;
	padding: 2px 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: 1s cubic-bezier(0.75, -0.42, 0.64, 1.99);
}

#bonus img,
#objective img
{
	width: 60px;
}
#bonus.transitioning 
{
    transform: scale(1.5) translate3d(-9px, 10px, 0);
}

#bonus.spinning img
{
    animation: incommingMC .5s;
}
@keyframes incommingMC
{
	from
	{
		opacity:1
	}
	50%
	{
		opacity:0
	}
	to
	{
		opacity:1
	}
}

#bonus:before, #bonus:after {
	content: '';
	position: absolute;
	background: linear-gradient(90deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
		#0000ff, #00ff00,#ffff00, #ff0000);
	background-size: 1000%;
	width: calc(100% + 4px);
	height: calc(100% + 0px);
	z-index: -1;
	animation: steam var(--s) linear infinite;
}
#bonus:before, #bonus:after
{
	content:none;
}
@keyframes steam {
	0% {
		background-position: 0% 0;
	}
	100% {
		background-position: 1000% 0;
	}
}

#bonus:after {
	filter: blur(var(--g));
}
#bonusBlock
{
	background:#ffffff38;
	border:3px solid #000;
	margin:auto;
	margin-top: 4vmin;
	margin-bottom:4vmin;
	z-index:2;
	display: flex;
	align-items: center;
	width: calc(77vmin + 42px);
	justify-content: space-between;
	position:relative;
}
#bonusBarWrapper,
#objectiveBarWrapper,
#timeBlock
{
	height: 25px;
	background: #0000007a;
	box-shadow: inset 0 2px 2px black,inset 0 -1px 1px #f2b6ff;
	margin:0 auto;
	width: 100%;
	border-radius: 5px;
	/* border:3px solid #000; */
	overflow: hidden;
	position: relative;
	margin-right: 70px;
}
.objectivesWrapper #bonusBarWrapper
{
	margin-right:170px
}

#objectiveBarWrapper
{
	margin:0;
}
#objectiveBar,
#bonusBar
{
	width:100% !important;
	transform:translate3d(-100%, 0, 0);
}
#bonusBar,
#objectiveBar,
.bonusBar
{
	height: 21px;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2196f3+0,05abe0+44,05abe0+44,53cbf1+100 */
	top: 2px;
	background: rgb(33,150,243); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(33,150,243,1) 0%, rgba(5,171,224,1) 44%, rgba(5,171,224,1) 44%, rgba(83,203,241,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(33,150,243,1) 0%,rgba(5,171,224,1) 44%,rgba(5,171,224,1) 44%,rgba(83,203,241,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(33,150,243,1) 0%,rgba(5,171,224,1) 44%,rgba(5,171,224,1) 44%,rgba(83,203,241,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2196f3', endColorstr='#53cbf1',GradientType=1 ); /* IE6-9 */
	border-radius: 5px;
	transition: .4s linear;
	position:relative;
	overflow:hidden;
	margin-top: auto;
	width: 0;
	max-width: 100%;
}

.bonusBar
{
	top:0;
	height:14px;
		border-radius: 20px;
}
.bonusBar.purple
{
	background: linear-gradient(to right, rgb(104 0 255) 0%,#6b27e4 44%,#6216e8 44%,rgb(152 22 255) 100%);
}
#timeBar
{
	height: 25px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#28cc1c+0,06d656+47,14ff07+100 */
	background: rgb(40,204,28); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(40,204,28,1) 0%, rgba(6,214,86,1) 47%, rgba(20,255,7,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(40,204,28,1) 0%,rgba(6,214,86,1) 47%,rgba(20,255,7,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(40,204,28,1) 0%,rgba(6,214,86,1) 47%,rgba(20,255,7,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28cc1c', endColorstr='#14ff07',GradientType=1 ); /* IE6-9 */
	border-radius: 25px;
	position:relative;
	overflow:hidden;
	margin-top: auto;
	transition: 60s linear;
	width: 100%;
}
#timeBar.red
{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c61b1b+0,ff0000+100 */
background: rgb(198,27,27); /* Old browsers */
background: -moz-linear-gradient(left, rgba(198,27,27,1) 0%, rgba(255,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(198,27,27,1) 0%,rgba(255,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(198,27,27,1) 0%,rgba(255,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c61b1b', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
}
.bonusBar:before,
#bonusBar:before,
#objectiveBar:before,
#timeBar:before
{
	content:'';
	display:block;
	width: 200%;
	height: 100%;
	border-radius:25px;
	top: -55%;
	left: -50%;
	position:absolute;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background: #fff;
	opacity: .3;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
#bonusBlock
{
	height:calc(11vmin + 6px);
}
#bonusItem
{
	position:absolute;
	left:0;
}
.FlamingBorder {
    position: relative;
    filter: url(#fire) blur(1px);
    left: -5px;
    top:-5px;
    position: fixed;
    background:none;
    width:100%;
    min-width:100vw;
    min-height:100vh;
    min-height: var(--vh100);
    min-height: -webkit-fill-available;
    opacity:0;
    pointer-events: none;
    transform: translateZ(0);
    transition: 1.5s ease-in-out;
}

.FlamingBorder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0px;
    right: 0;
    bottom: 0;
    /* border: 20px solid white; */
    box-shadow: 0 0 50px #0f0, inset 0 0 50px #0f0;
    animation: animation 5s linear infinite;
}

.FlamingBorder::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    /* border: 20px solid white; */
    box-shadow: 0 0 50px #fff, inset 0 0 50px #fff;
}
.board_wrapper svg
{
	display:none;
}


@keyframes animation {
    0% {
        box-shadow: 0 0 50px #0f0, inset 0 0 50px #0f0;
        filter: hue-rotate(0deg);
    }
    20% {
        box-shadow: 0 0 50px #0f0, inset 0 0 60px #0f0;
    }
    40% {
        box-shadow: 0 0 50px #0f0, inset 0 0 40px #0f0;
    }
    60% {
        box-shadow: 0 0 50px #0f0, inset 0 0 80px #0f0;
    }
    100% {
        box-shadow: 0 0 50px #0f0, inset 0 0 50px #0f0;
        filter: hue-rotate(360deg);
    }
}
.bonusWrapper
{
	display:flex;
	align-items:center;
	/* margin: 0 3.5vmin; */
	gap: .5rem;
}
.bonusWrapper img 
{
	width: 40px;
	height: 40px;
	/* position: absolute; */
}
#progressBonus
{
	width:30%
}

.pulsable
{
    transition: .5s;
}

.pulsable.pulse
{
    transform: scale(1.3);
}
.dashboard_section__rank
{
	display:flex;
	align-items:center;
	gap:10px;
	border-bottom:#11004c 1px solid;
	padding: 10px;
	position: relative;
	width: 100%;
	width: -webkit-fill-available;
	margin: 0 1rem;
}
.life_send
{
	font-size: 20px;
	margin-left: auto;
	padding: 0;
	white-space: nowrap;
	flex-shrink: 0;
}
.life_send.sent
{
	opacity: .35;
	pointer-events: none;
}
.tab-btn 
{
	font-size:18px;
	padding:5px ;
	border-bottom:4px solid transparent;
}
[remote-fetch]
{
	transition:.25s;
}
[remote-fetch]:active 
{
	transform:scale(.9)
	
}
.tab-btn.active
{
	opacity:1;
	border-bottom: 4px solid #ffa700;
	text-shadow: 0 0 5px #ffd500;
}
landing, tutorial, login, dashboard
{
	position:fixed;
	top: 0;
	width:100vw;
	min-height: 100vh;
	min-height: var(--vh100);
	text-align:center;
	padding: 20px;
	padding-top: calc(20px + env(safe-area-inset-top));
	box-sizing: border-box;
	text-align: left;
}
.gamepop_header
{
	border-bottom:2px solid #FF9800;
	padding:15px 0;
	font-size:25px;
	border-image: linear-gradient(to left, rgba(255,255,255,0) 0%,rgb(255 255 255) 50%,rgba(255,255,255,0) 100%) 1;
	display:flex;
	justify-content: space-between;
	align-items: flex-start;
}
.gamepop .gamepop_header
{
	border-image:none;
	border:none;
	
}
.gamepop_header a
{
	color:#fff;
	text-decoration:none;
	/* width: 50px; */
	/* height: 50px; */
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'headers';
	right: 10px;
	top: 10px;
}

.gamepop_header > div 
{
	align-items:center;
	justify-content: center;
	gap:10px;
	/* width: 100%; */
}
game 
{
	transform: scale(.5);
	opacity: 0;
	transition: .5s cubic-bezier(0.93, -0.29, 0.58, 1);
}
game.incomming
{
	transform: translateY(0);
	opacity: 1;
	animation: initial;
	z-index: 2;
}

.gamepop_header > div  p 
{
	white-space: break-spaces;
	font-size: 16px;
}
.gamepop .gamepop_header .flex-row
{
	justify-content:flex-start !important;
}
.flex-start
{
	align-items:flex-start !important;
}
.gamepop_header div img 
{
	width: 49px;
	height: 49px;
}
.gamepop_header .flex-col
{
	font-family:headers;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
	filter: drop-shadow(0 2px black);
}
.gamepop_header.day div img 
{
	filter: drop-shadow(0px 0px 20px #c136bb);
}
.gamepop_header.week div img 
{
	filter: drop-shadow(0px 0px 20px #00cce3);
}
.gamepop_header.month div img 
{
	filter: drop-shadow(0px 0px 20px #FF5722);
}
.gamepop_header svg 
{
	width:30px;
	height:30px;
}
.gamepop .tabs-wrapper
{
	min-width:100% !important;
}
.gamepop .tab-full-btn
{
	width:100%;
}
.gamepop .tabs-full
{
	box-sizing:border-box;
	background:#4f357a;
	min-width:100% !important;
	border-radius:0;
}
.tutorialPop .tabs-full
{
	background:none;
	border:none;
	width: fit-content;
	min-width: unset !important;
}

.tutorialPop  .tabs-full .tab-full-btn
{
	border-radius:100%;
	font-size:20px;
	width:30px;
	height:30px;
	display:flex;
	margin-right:60px;
	align-items:center;
	justify-content:center;
	min-width:30px;
	min-height:30px;
	color:#ffffffc2;
	background:#513385;
	border:1px solid #fff;
	box-shadow:inset 1px 0 2px #000,inset 0 1px 2px #000,inset 0 -1px 2px #000,inset 1px 0 2px #000;
}

.tutorialPop  .tabs-full .tab-full-btn:after
{
	content:'---';
	letter-spacing:4px;
	position:absolute;
	left:34px;
	width:200%;
	font-Size:30px;
	color:#fff;
	z-index:-1;
	
}
.tutorialPop  .tabs-full .tab-full-btn:last-child
{
	margin:0;
}

.tutorialPop  .tabs-full .tab-full-btn:last-child:after
{
	content:'';
}

.tutorialPop  .tabs-full .tab-full-btn span
{
	font-family:headers;
	z-index:2;
	
}
.tutorialPop  .tabs-full .tab-full-btn-active
{
	color:#fff;
	position:relative;
    background: linear-gradient(to bottom, rgba(255,168,76,1) 0%,rgba(255,123,13,1));
}
/* De lichtvlek op de actieve tab is verwijderd (zie cubelegend-personal.css):
   hij benadrukte juist de knop waar niets meer mee te doen valt. */

.gamepop_wrapper
{
	width:100%;
	height:100%;
	left:0;
	top:0;
	position:fixed;
	display:flex;
	z-index: 3;
	align-items:center;
	justify-content:center;
}
.gamepop_underlay,
.top_overlayed_underlay,
.bottom_drawer__underlay
{
	position: fixed;
	width: 100vw;
	height: 100vh;
	height: var(--vh100);
	left:0;
	z-index: 3;
	top:0;
	opacity:0;
	transition:.5s ease;
	will-change: auto;
	background: #000000b3;
	contain: strict;
}

.top_overlayed_underlay {}
.active .gamepop_underlay,
.active .top_overlayed_underlay,
.active .bottom_drawer__underlay
{
	opacity:1;
}
.tutorialPop .tabs
{
	/* padding:20px; */
	width: 90%;
	box-sizing:border-box;
	margin-top: 10px;
}
.gamepop
{
	width: 90%;
	max-height: 90%;
	height: 90%;
	top: 5%;
	left: 5%;
	position: relative;
	z-index: 4;
	box-shadow: inset 0 0 5px #000;
	background: #2f1d4b;
	border-width: 2px;
	border-style: solid;
	border-image: linear-gradient(to top, #ff7c10, #FF9800) 1;
	padding: 1rem;
	padding-top:0;
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	transform: scale(0);
	opacity: 0;
	transition: .25s cubic-bezier(0.39, -0.38, 0.82, 1.83);
}
.active .gamepop
{
	
	transform: scale(1);
	opacity: 1;
}
.gamepop small 
{
	opacity:.5;
}
.gamepop:after
{
	content:' ';
	position: absolute;
	width: calc(90% - 4px);
	height: 5px;
	left: 5%;
	bottom: -9px;
	z-index: -1;
	background: #2f1d4b;
	border:#ff7c10 2px solid;
	border-top: 0;
}

.gamepop .playerStatsLvl > img 
{
	width:80px;
}
.gamepop .playerStatsLvlCount img 
{
	width:20px;
	height:20px
}
dashboard
{
	flex-direction:column;
	margin-top: calc(env(safe-area-inset-top) + 5rem);
	padding: 0;
	contain: strict;
}
landing
{
	overflow:auto;
	text-align: center;
	gap: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
tutorial img,
login img 
{
	width:200px;
	
}

tutorial
{
	gap:20px;
	display:flex;
	
}
tutorial p 
{
	opacity:.8;
	padding:0;
	margin:0;
	margin-bottom:15px;
	font-family: typewriter;
	font-style:italic;
}
.btn-dock
{
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	padding: 4px;
	position:relative;
	width: 100%;
	margin-bottom: 5px;
}
.btn-dock svg 
{
	opacity:.7;
}
.btn-dock-active svg
{
	opacity:1;
}


.btn-dock-active:after
{
	content:'';
	width:7px;
	height:7px;
	border-radius:50%;
	bottom:0px;
	left:50%;
	transform:translateX(-50%);
	position:absolute;
	background:#ff831f;
}

.btn-dock-active svg
{

  filter: drop-shadow(0px 0px 5px #ff831f);
}

.btn-dock svg 
{
	width:50px;
	height:30px;
}
landing img
{
	width:250px;
	height:250px;
}
landing p 
{
	font-family: typewriter;
	opacity:.5;
	font-style:italic;
}
.claim-big-reward
{
	display:none !important;
	animation:bounce infinite 1.5s;
	font-size:30px !important;
	padding:7px !important;
}
.claimable .claim-big-reward
{
	display:block !important;
}
.week .claim-big-reward
{
	background: linear-gradient(to top, rgb(180 226 229) 0%,rgb(33 150 243) 100%);
}
.day .claim-big-reward
{
	background: linear-gradient(to bottom, #9C27B0 0%,rgb(229 33 92) 100%);
}
.week 
login button ,
landing button ,
tutorial button ,
.btn-orange,
.btn-gray
{
	text-shadow: 0px 2px #091c39;
	position:relative;
	font-family: 'headers';
	font-size: 24px;
	justify-content:center;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	padding-bottom: 13px;
	transition: .5s;
	border-radius: 5px;
	/* margin: 10px; */
	border: none;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffa84c+0,ff7b0d+100;Orange+3D */
	background: rgb(255,168,76); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffd700 0%,rgb(255 119 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */
	color: #fff;
	box-shadow: inset 0 -4px #b25f00, inset 0 -5px #ffa548;
	transition:.2s cubic-bezier(0.25, 0.1, 0, 1.01);
	text-shadow: 0 2px black, 0 -1px #0000007a, 1px 0px #0000007a, -1px 0 #0000007a;
	/* overflow:hidden; */
}

.btn-gray
{
	background: #80808059;
}
.btn-gray:after
{
	content:'';
	position:absolute;
	top:5px;
	left:5px;
	width:calc(100% - 10px);
	border-radius:5px;
	background:#fff;
    height: 45%;
    opacity: .45;
}
.btn-orange:active
{
	transform:scale(.8);
}
.btn-gold,
.gift .gift-vip
{
	background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
	box-shadow: 0 2px 5px #000000, inset 0 -4px #9e7928, inset 0 -5px #ffffb6;
}
.btn-disabled
{
	color:#f4f4f4;
	background: linear-gradient(to bottom, rgb(137 137 137) 0%,rgb(194 194 194) 100%);
}
a.btn-orange
{
	text-decoration:none
}
.btn-orange:not(.inactive):active
{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff7b0d+0,ffa84c+100 */
	background: rgb(255,123,13); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,123,13,1) 0%, rgba(255,168,76,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,123,13,1) 0%,rgba(255,168,76,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,123,13,1) 0%,rgba(255,168,76,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7b0d', endColorstr='#ffa84c',GradientType=0 ); /* IE6-9 */
}
/* "complete inventory" is de terugweg uit de uitgelichte weergave (alleen de
   groep waar je op gestuurd werd, bv. LIVES) naar de volledige inventaris.
   Vroeger een .btn-orange die hier tot een onderstreept tekstlinkje werd
   uitgekleed — donkergoud op paars, nauwelijks leesbaar. Nu dezelfde grijze
   secundaire knop als in de gamemode-lade (cl-btn-frame + cl-btn-secondary),
   want het is een nevenactie naast de hoofdkeuze erboven. */
/* .cl-btn-frame zet zelf display:block en staat in cubelegend-auth.css, dus
   NA dit bestand: bij gelijke specificiteit (één klasse) wint die. Vandaar
   beide selectors met de frame-klasse erbij — anders bleef de knop staan
   nadat hij zijn eigen uitgelichte weergave had opgeheven. */
.cl-btn-frame.inv_compleet
{
	display:none;
}
.inv_highlight .cl-btn-frame.inv_compleet
{
	display:block;
	width:calc(100% - 40px);
	max-width:320px;
	box-sizing:border-box;
	margin:16px auto calc(12px + env(safe-area-inset-bottom));
}
.upgradeStats .btn-orange
{
	width: calc(100% - 40px);
	box-sizing: border-box;
	margin: 0 20px;
}

.btn-orange:active:after,
.btn-orange:active:after
{
	content:none
}
.btn-purple
{
	text-shadow: 0px 2px #091c39;
	position:relative;
	font-family: 'headers';
	font-size: 38px;
	justify-content:center;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border-radius: 5px;
	margin: 10px;
	border: none;
	color: #fff;
	background: linear-gradient(to bottom, #9C27B0 0%,#673AB7 100%);
}
.btn-purple:not(.inactive):active
{
	background: linear-gradient(to top, #9C27B0 0%,#673AB7 100%);
}
.pop .f-c 
{
	padding:10px;
	gap:10px;
}
.f-c
{
	display:flex;
	flex-direction:column;
}
button.no-styling
{
	background:none;
	font-size: 18px;
	font-family: 'typewriter';	
}

button.no-styling:after
{
	display:none !important;
}
tutorial, login, dashboard
{
	display:flex;
	overflow: hidden;
	box-sizing: border-box;
	height: calc(100% - calc(env(safe-area-inset-top) + 5rem));
	min-height: calc(100% - calc(env(safe-area-inset-top) + 5rem));
	max-height: calc(100% - calc(env(safe-area-inset-top) + 5rem));
}

tutorial .slides,
.slides
{
	display:flex !important;
	gap: 40px;
	min-width:100vw;
	max-height: -webkit-fill-available;
	height: -webkit-fill-available;
	min-height: -webkit-fill-available;
	transition: cubic-bezier(0.4, 0, 1, 1) .2s;
}
tutorial .buttons button,
login .buttons button 
{
	margin: 0;
}
tutorial .buttons,
login .buttons 
{
	bottom:0;
	max-width: 100%;
	border-top:1px solid #673ab7;
	height: auto;
	display:flex;
	align-items: center;
	gap: 20px;
	padding: 20px 0;
	width:100%;
}

.btn.btn-gold:after,inventory_grid > div::after, .personal_quests::after, .vip-enabled .personal_quests.vip::after, tutorial .buttons button:after, landing button:after, .btn-orange::after, .btn-purple::after, .dashboard_section__rank:not(.nobucket):after, .dashboard_section__item:after,  .campaign_story_telling a:after, .limited_offers__item:after
{
	content:'';
	display:block;
	width:calc(100% - 10px);
	height:20%;
	margin:5px;
	top: 0;
	left:0;
	border-radius:5px;
	position:absolute;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
.personal_quests:after
{
	border-radius: 4px 4px 100% 100%;
	z-index:2;
}
.personal_quests.claimable:after
{
	border-radius:5px !important;
	width: calc(100% - 10px) !important;
	left: 5px!important;
	top: 5px!important;
	margin:0;
	height:50%;
	background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%,rgba(255,255,255,.05) 100%) !important;
}
/* vip-claimable: exact dezelfde glans-band als gewone claimable — de bredere
   basisregel .vip-enabled .personal_quests.vip::after won qua specificiteit
   op height/margin en gaf vip-tegels een kleinere, ingesprongen band */
.vip-enabled .personal_quests.vip.claimable:after
{
	height:50%;
	margin:0;
}

button.inactive
{
	background:#444;
	opacity:.85
}
landing button::before,
.starShine .limited_offers__item__body__img__wrapper::before,
.main_logo_holder::before,
.cursor-wrapper .starShine:before
{
	
	    animation: glitter 6s linear 0s infinite normal;
    -webkit-animation: glitter 6s linear 0s infinite normal;
	left: -25px;top: -25px;width: 50px;height: 50px;content:'';position:absolute;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAJYCAMAAACJuGjuAAADAFBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+/LkhhAAAA/3RSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1O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);background-repeat: no-repeat;background-position: center;background-size: 100% 100%;
}
tutorial .tutorial__header,
login .tutorial__header
{
	border-bottom:1px solid #673AB7;
}

landing button::before
{
	opacity:0;
	animation-delay:3s;
}
.main_logo_holder
{
	position:relative;
	width: fit-content;
	width: 250px;
	height: 250px;
	display: inline-block;
	margin-top: 20px;
}
.starShine .limited_offers__item__body__img__wrapper::before,
/* de draaiende ster: zijn middelpunt precies op de rechterbovenhoek van de
   kubus in loading_top_artwork (op 250 px: x 196, y 46 — gemeten, okt 2026).
   Nieuwe logo-art → opnieuw meten. */
.main_logo_holder::before
{
	right: 1.6%;
	top: -1.6%;
	left:unset;
	position:absolute;
	width:100px;
	height:100px;
	z-index: 2;
}
tutorial .tutorial__header,
tutorial .tutorial__header div,
login .tutorial__header,
login .tutorial__header div
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px
}
tutorial .tutorial__header div img,
login .tutorial__header div img 
{
	width:40px;
	height:40px;
}

.dissapear
{
	animation: dissapear .4s cubic-bezier(1, -0.94, 0.78, 1.66);
}
.pop
{
	width: calc(100vw - 40px);
	position: absolute;
	top: 20%;
	left: 20px;
	background: #170040b8;
	border-radius: 5px;
	box-shadow: 0 0 45px 15px #ffffff80;
}
.pop.error
{
	box-shadow: 0 0 45px 15px #ff1100;
	
}
.pop.success
{
	box-shadow: 0 0 45px 15px #4CAF50;
	
}
.pop__header
{
	bordeR-bottom:1px solid #673ab7;
	font-size:30px;
	padding:10px;
}
.pop__body
{
	padding:10px;
	font-family:'typewriter'
}
game
{left: 0;bottom: 0;width: 100vw;position: fixed;z-index: 2;}
.incomming
{
	opacity:0;
	transform:scale(.5);
	animation: incomming forwards .4s cubic-bezier(1, -0.94, 0.78, 1.66);
}
@-webkit-keyframes glitter {
  0% {
    -webkit-transform: scale(0.3) rotate(0deg);
    opacity: 0;
  }
  25% {
    -webkit-transform: scale(1) rotate(360deg);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(0.3) rotate(720deg);
  }
  75% {
    opacity: 0;
}
  100% {
    -webkit-transform: scale(0.3) rotate(0deg);
    opacity: 0;
  }
}

@-webkit-keyframes dissapear {
  to
	{
	opacity:0;
	transform:scale(.5);
  }
}
@-webkit-keyframes incomming {
  to
	{
	opacity:1;
	transform:scale(1);
  }
}
.magic_cubes
{
	display:flex;
	gap: 15px;
	margin-bottom:20px;
	flex-wrap: wrap;
}


.magic_cubes img {
	width: 75px;
}
.input_container__status
{
	color:white;
	padding:10px;
	text-decoration:underline #E91E63;
}
.loader .loadicon {
    display: none;

}

.loader.loading .loadicon {
    z-index: 999999;
    display: inline-block;
}
.pop_holder
{
	width:100%;
	height: 100vh;
	height: var(--vh100);
	min-height: -webkit-fill-available;
	position: absolute;
}
.pop_underlay
{
	width:100%;
	height: 100vh;
	height: var(--vh100);
	min-height: -webkit-fill-available;
	background: #00000040;
	backdrop-filter: blur(20px);
	z-index: 2;
}


.inventorystat
{
	background: #38255a;
	width: 100%;
	height:21px;
	border:1px solid black;
	display:flex;
	box-shadow:inset 0 8px 4px #000000a1;
	align-items:center;
	border-radius:20px;
	position: relative;
	justify-content: space-between;
}

gameheader
.inventorystat
{
	width:50px;
	text-align:center;
	justify-content: center;
}
gameheader
.flex-col:nth-child(2)
{
	transform:scale(1.2);
}
gameheader
.flex-col:nth-child(2)
.inventorystat
{
	
	width:150px;
}
.inventorystat img 
{
	margin-left: -10px;
	width: 33px;
	z-index:22;
	transition: 1s;
}	

.inventorystat .playerLiveCount
{
	position:relative;
}

.inventorystat .playerLiveCount p 
{
	position:absolute;
	top: -5px;
}

.inventorystat.right img 
{
	margin-left:unset;
	margin-right: -14px;
}

.playerStats
{
	display:flex;
	position:relative;
	align-items: center;
	height: 4rem;
}
.bottom_drawer__content.shop .tab-full-btn
{
	background:none;
}
.playerStats.vip:after
{
	position:absolute;
	left:0;
	bottom:0;
	width:1.5rem;
	border:1px solid #fff;
	background:#2196F3;
	background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
	line-height:1.5rem;
	border-radius:100%;
	height:1.5rem;
	color:#fff;
	text-shadow: 0 1px black, 0 -1px black, 1px 0px black, -1px 0 black;
	content:'vip'
}

.playerStats > img
{
	--size: 3.5rem;
	width: var(--size);
	height:  var(--size);
	min-width:  var(--size);
	min-height:  var(--size);
	max-width:  var(--size);
	max-height:  var(--size);
	transition: .3s;
}

.playerStats svg
{
	width: 3.5rem;
	height: 3.5rem;
}

.playerStats div 
{
	display:flex;
	align-items:center;
	justify-content:center;
	height:50px;
	right:-20px;
	bottom:0px;
	width:45px;
}

.playerStats div p 
{
	padding-top:5px;
	position:absolute;
	text-shadow: 0 1px black, 0 -1px black, 1px 0px black, -1px 0 black;
}

.playerStats div img
{
	width:45px;
	height:unset;
	border:none;
}
.inventorystat__add
{
	background: #4CAF50;
	box-shadow: inset 0 5px 3px #b0ffb3c7;
	font-size: 12px;
	font-family: system-ui;
	text-align:center;
	border-radius:100%;
	font-weight: 900;
	display: flex;
	border: 1px solid #000;
	justify-content: center;
	width: 17px;
	height: 17px;
	margin-right: 1px;
	transition:.2s
}
.inventorystat:active
{
	border-color:#4CAF50;
	
}

.inventorystat:active .inventorystat__add
{
	box-shadow:inset 0 3px 5px #0c540f, inset 0 -2px 1px #b0ffb3c7;
}

.inventorystat:active img 
{
	transform:scale(1.1)
}
dashboard
{
	gap:1rem;
}

dashboard .o-w
{
	/* padding: 1rem !important; */
	padding-bottom: 0 !important;
}

.dashboard_section
{
	position:relative;
	background: #2b004c80;
	border: 1px solid #11004c;
	border-radius: 5px;
	width: -webkit-fill-available;
	/* height: 100%; */
	overflow: auto;
	overflow-x: hidden;
	touch-action: pan-y;
	will-change: transform; /* or scroll-position */
	overflow-y: scroll;
	gap: 10px;
	flex-direction: column;
}
.dashboard_section .btn-orange
{
	font-size:22px;
}
.dashboard_section__quests
{
	border:none;
	background:none;
	gap:10px;
	display:flex;
	flex-direction:column;
	width: calc(100% - 2rem);
}

.dashboard_section__quests.month
{
	display:grid;
	grid-template-columns: 1fr 1fr 
}
.dashboard_section__quests.month .quest_avatar img
{
	width: 90px;
	height: 90px;
}
.dashboard_section__quests.month .info-wrapper
{
	left: 8px;
	top: 8px;
}

.dashboard_section__quests.month .personal_quests
{
	flex-direction:column;
	align-items:center;
	gap: 10px;
}
.dashboard_section__quests.month .flex-col span
{
	display:none;
}
.dashboard_section__quests.month .time_remaining span
{
	display:inline-block;
}
.dashboard_section img
{
	width: 50px;
	height: 50px;
	border-radius:100%;
	position: relative;
}
.dashboard_section img:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 50px;
    width: 50px;
    top: 0;
    left: 0;
    background-image: url(/public/img/avatars/standard.png);
    background-size: contain;
}

.dashboard_section.section_league img
{
	width: 80px;
	height: 80px;
	border-radius:0%;
}
.dashboard_section.section_league .diamond_personal
{
	width:28px;
	height:28px;
	margin-bottom: -6px;
}

.dashboard_section__misc
{
	display:flex;
	flex-direction:column;
	align-items: baseline;
	overflow: hidden;
	width: 100%;
}
.dashboard_section__misc__principal
{
	font-size:20px;
	display:flex;
	align-items: flex-start;
	flex-direction: column;
	margin-left: 10px;
}
.section_league .dashboard_section__misc__principal
{
	margin-left:0
}
.elipsis
{
	overflow:hidden;
	white-space:nowrap;
	text-overflow: ellipsis;
	padding-right: 2px;
}
.dashboard_section__misc__secondary
{
	opacity: .7;
	font-size: 12px;
	text-align: left;
}
.dashboard_section__misc__secondary span 
{
	opacity:.7
}
.dashboard_section__principal
{
	font-size:20px;
	background: #5a3367;
	padding:5px 10px;
	padding-right:40px;
	border-radius:5px;
	border: 1px solid black;
	display: flex;
	position:relative;
	align-items:center;
	height: 20px;
	white-space: nowrap;
	margin-left:auto;
	box-shadow: inset 0 8px 4px #000000a1;
}
.dashboard_section__principal img 
{
	width:35px !important;
	height:38px!important;
	position:absolute;
	border-radius:0px;
	right:0px;
}
game 
{
	padding-bottom: calc(1em + env(safe-area-inset-bottom));
	will-change:auto;
	contain:layout paint;
}
/* De WebGL-laag (#gridfx) reikt boven het vak van <game> uit: wat van buiten het grid komt
   (meteoriet, inslag, het licht van de engel) is dan ook buiten het grid te zien. Alleen het
   afknippen vervalt; layout-containment blijft (grid-fx.js, plaats()). */
game.gridfx_ruim
{
	contain:layout;
}
/* …en in die stand ligt de HUD op het niveau van <game> (dat later in de DOM staat en er dus
   overheen tekent): het licht van de guardian angel komt dan óp de streakteller aan in plaats van
   erachter te verdwijnen, en een meteoriet of inslag komt van de bovenrand van het scherm
   (eigenaar 12 nov 2026: "nog mooier als het een hogere z-index heeft dan de HUD"). Alleen de
   deeltjes van de laag liggen erboven; het aftellen en TIME UP (gamestartanim, 3) blijven boven
   alles. De klasse komt en gaat met de laag (grid-fx.js, plaats()/verberg()). */
gameheader.gridfx_onder
{
	z-index:2;
}
dashboard .buttons
{
	box-sizing: border-box;
	/* border-top: 1px solid #ff9c3e; */
	padding-top: 10px;
	/* background: #4e357a8f; */
	bottom: 0;
	left: 0;
	width: -webkit-fill-available;
	box-sizing: border-box;
	display: flex;
	margin-top: auto;
	flex-direction: row;
	padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.slide .header 
{
	margin-top:-10px;
	border-bottom:1px solid #673ab7;
	padding:10px 0;
	width:100%;
}
.slide .header svg 
{
	width:35px;
	height:35px;
}
dashboard .o-w
{
	padding:0;
	margin: 0;
	gap:10px;
	box-sizing: border-box;
	display:flex;
	flex-direction:column;
	align-items: center;
	height: -webkit-fill-available;
	max-height: 100%;
}
.campaignmode dashboard
{
	contain:initial;
}
h2
{
	display:flex;
	align-items:center;
	justify-content: center;
	gap:10px;
	text-shadow: 0px 2px #000, 0px -1px #000, -1px 0px #000, 1px 0px #000;
}
h2 .highlight
{
	font-family:headers;
	font-size:130%;
	color:#ff9300;
}
h2 img 
{
	width:30px
}
brandanim,
searchingOpponent
{
	z-index:99;
	left:0;
	top:0;
	opacity:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	position:fixed;
	pointer-events:none;
	transition:.4s;
	background:#29004d;
}
searchingOpponent
{
	flex-direction: column;
	justify-content:start;
	gap:20px;
	/* titel onder de notch + de globale home-knop houden */
	padding-top:calc(env(safe-area-inset-top) + 64px);
	box-sizing:border-box;
}
searchingopponent h1
{
	font-size:40px !important;
	opacity:0;
	transform:translateY(-50vh);
	transition:.3s cubic-bezier(0.25, 0.1, 0.47, 1.55)
}

searchingopponent.active h1
{
	transition-delay: .5s;
	opacity:1;
	transform:translateY(0%);
}
brandanim .info,
searchingOpponent .info
{
	position: absolute;
	bottom: 0;
	padding: 30px;
	padding-bottom: calc(30px + env(safe-area-inset-bottom));
	box-sizing: border-box;
	width: 100vw;
	background: #50089dd4;
	z-index: 2;
	display:flex;
	align-items:center;
	justify-content: space-between;
	font-size:18px;
	gap:30px;
	border-top: 2px solid #8b44e2;
	text-shadow: 0px 2px #000, 0px -1px #000, -1px 0px #000, 1px 0px #000;
	transition: .5s ease;
	transform: translate3d(0,100%, 0);
}
searchingopponent .info
{
	flex-direction:column
}
searchingopponent .info h2 
{
	margin:0;
	font-size:24px;
	text-shadow:none;
	color:#9f61ec;
}
brandanim .info.active,
searchingOpponent .info.active
{
	transform: translate3d(0,0, 0);
}
brandanim .info img,
searchingOpponent .info img
{
	width:60px;	
	filter:drop-shadow(0 0 20px #00000085);
	transform:rotate(15deg)
}
searchingOpponent .info img
{
	width:80px;
	transform:translateX(100vw);
	height:80px;
}
searchingOpponent .info.active img
{
	transform:translateX(0);
	transition:.25s cubic-bezier(0.25, 0.1, 0.52, 1.34);
}

searchingOpponent .info.active.pickleague img
{
	animation:pickLeague infinite 1s alternate;
}
searchingOpponent .info.active img:nth-child(1)
{
	transition-delay:1.25s;
}
searchingOpponent .info.active  img:nth-child(2)
{
	transition-delay:1.35s;
}
searchingOpponent .info.active  img:nth-child(3)
{
	transition-delay:1.40s;
}
searchingOpponent .info.active.pickleague img:nth-child(1)
{
	animation-delay:.3s;
}
searchingOpponent .info.active.pickleague  img:nth-child(2)
{
	animation-delay:.6s;
}
searchingOpponent .info.active.pickleague  img:nth-child(3)
{
	animation-delay:.9s;
}

brandanim .info svg,
searchingOpponent .info svg
{
	min-width:60px;
	max-width:60px;
	color: #be8aff;
	height:60px;
	filter:drop-shadow(0 0 20px #00000085);
}

brandanim .info span,
searchingOpponent .info span
{
	color:#ffa629;
	font-size:150%;
	white-space: nowrap;
}
@keyframes rotate { 
  0% {
    transform: rotate(0deg);
  }  
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pickLeague { 
  0% {
    transform: scale(1);
	  opacity:.2
  }  
  100% {
    transform: scale(1.15);
	  opacity:1
  }
}
brandanim:after,searchingOpponent:after {
	content:'';
	position:absolute;
	z-index:-1;
  --size: 350px;
  --speed: 2s;
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
  width: var(--size);
  height: var(--size);
  filter: blur(calc(var(--size) / 5));
  background-image: linear-gradient(#9f3cff, #5f00ff);
  animation: rotate var(--speed) var(--easing) alternate infinite;
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
}


brandanim .main_logo_holder,
searchingOpponent .main_logo_holder
{
	margin-top:-40%;
	transform:scale(0.5);
	position:relative;
	transition:.4s cubic-bezier(0.5, -0.24, 0.49, 1.57);
	z-index: 3;
}
brandanim img,
searchingOpponent img
{
	filter:drop-shadow(0 0 10px white);
	width:100%;
}
brandanim.active,
searchingOpponent.active
{
	pointer-events:initial;
	opacity:1;
}
searchingOpponent .info 
{
	transition-delay:.5s;
}

brandanim.active .main_logo_holder,
searchingOpponent.active .main_logo_holder
{
	
	transform:scale(1);
}

gamestartanim {width:100%;height:100%;display: flex;align-items: center;justify-content: center;left:0;top:0;font-size: 50px;position: fixed;z-index: 3;transition: .4s;text-shadow: 0 0px 30px #000;}

/* WP8b: 3-2-1-GO! en de "…up!"-teksten in dezelfde taal als de focus-score-
   pop — headers-font, groene 3D-outline + gloed, squash-stretch-entrance.
   Elk cijfer is een vers <b> en herstart zo zijn eigen animatie; .blijft
   (GO! / Time up!) popt in en blijft staan tot de wrapper zelf verdwijnt. */
gamestartanim b
{
	display:block;
	font-family:headers;
	font-weight:normal;
	font-size:84px;
	line-height:1;
	color:#b6ff5a;
	text-shadow:0 4px black, 0 -3px black, 3px 0 black, -3px 0 black, 0 10px 0 #2f7a00, 0 0 34px #7CFC00cc;
	animation:aftelPop 1s cubic-bezier(.16,.94,.2,1) both;
}
gamestartanim b.blijft
{
	animation:aftelPopVast .8s cubic-bezier(.16,.94,.2,1) both;
}
@keyframes aftelPop
{
	0%   { opacity:0; transform:translateY(26px) scale(.4, .7); filter:blur(5px); }
	12%  { opacity:1; transform:translateY(4px) scale(1.45, .84); filter:blur(0); }
	22%  { transform:translateY(0) scale(.9, 1.18); }
	32%  { transform:translateY(0) scale(1.08, .95); }
	45%  { transform:translateY(-3px) scale(1); }
	72%  { opacity:1; transform:translateY(-14px) scale(1.02); }
	100% { opacity:0; transform:translateY(-46px) scale(1.05); }
}
@keyframes aftelPopVast
{
	0%   { opacity:0; transform:translateY(26px) scale(.4, .7); filter:blur(5px); }
	14%  { opacity:1; transform:translateY(4px) scale(1.45, .84); filter:blur(0); }
	28%  { transform:translateY(0) scale(.9, 1.18); }
	42%  { transform:translateY(0) scale(1.08, .95); }
	100% { opacity:1; transform:translateY(0) scale(1); }
}
.avatar
{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	top:10px;
	z-index:3;
	width:50px;
}

.transparant
{
	opacity:0;
}

.wormhole {
  background-color: #340468;
  height: 100vh;
  height: var(--vh100);
  width: 100vw;
  margin: 0;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 3.125vmin;
  position: fixed;
  left: 0;
  top: 0;
will-change:opacity;
  transition:1s;
  pointer-events: none;
}

.wormhole::after {
	will-change: transform;
  background-color: #340468;
  border-radius: 50%;
  box-shadow: 0 0 2.5vmin 2.5vmin #340468;
  content: "";
  height: 2.5vmin;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.5vmin;
}

.polygon {
	will-change: transform;
	-webkit-animation: 4s linear infinite polygon;
	animation: 4s linear infinite polygon;
	left: 50%;
	position: fixed;
	z-index:3;
	top: 50%;
	transform-style: preserve-3d;
	transform: rotatex(90deg) rotatey(0) translatey(-25vmin);
	}
  
  @-webkit-keyframes polygon {
	100% {
	  transform: rotatex(90deg) rotatey(360deg) translatey(0);
	}
  }
  
  @keyframes polygon {
	100% {
	  transform: rotatex(90deg) rotatey(360deg) translatey(0);
	}
  }
  .side {
	will-change: transform;
	background-image: url(/public/img/cubelegend/wormhole.jpeg);
	background-size: 159.12989vmin 3.6%;
	filter: hue-rotate(-10deg);
	height: 100vmin;
	position: absolute;
	transform-origin: 0;
	-webkit-animation: recolor 11s infinite;
			animation: recolor 11s infinite;
	width: calc(9.94562vmin + 1px);
  }
  .side:nth-child(1) {
	background-position: -9.94562vmin 0;
	transform: rotatey(22.5deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(2) {
	background-position: -19.89124vmin 0;
	transform: rotatey(45deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(3) {
	background-position: -29.83686vmin 0;
	transform: rotatey(67.5deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(4) {
	background-position: -39.78247vmin 0;
	transform: rotatey(90deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(5) {
	background-position: -49.72809vmin 0;
	transform: rotatey(112.5deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(6) {
	background-position: -59.67371vmin 0;
	transform: rotatey(135deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(7) {
	background-position: -69.61933vmin 0;
	transform: rotatey(157.5deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(8) {
	background-position: -79.56495vmin 0;
	transform: rotatey(180deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(9) {
	background-position: -89.51057vmin 0;
	transform: rotatey(202.5deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(10) {
	background-position: -99.45618vmin 0;
	transform: rotatey(225deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(11) {
	background-position: -109.4018vmin 0;
	transform: rotatey(247.5deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(12) {
	background-position: -119.34742vmin 0;
	transform: rotatey(270deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(13) {
	background-position: -129.29304vmin 0;
	transform: rotatey(292.5deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(14) {
	background-position: -139.23866vmin 0;
	transform: rotatey(315deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(15) {
	background-position: -149.18428vmin 0;
	transform: rotatey(337.5deg) translate3d(-50%, -50%, 25vmin);
  }
  .side:nth-child(16) {
	background-position: -159.12989vmin 0;
	transform: rotatey(360deg) translate3d(-50%, -50%, 25vmin);
  }
  

  

@-webkit-keyframes recolor {
	0%, 100% {
	  filter: hue-rotate(0deg);
	}
	25%, 75% {
	  filter: hue-rotate(-20deg);
	}
	50% {
	  filter: hue-rotate(-90deg);
	}
  }
  
  @keyframes recolor {
	0%, 100% {
	  filter: hue-rotate(0deg);
	}
	25%, 75% {
	  filter: hue-rotate(-20deg);
	}
	50% {
	  filter: hue-rotate(-90deg);
	}
  }
  
  gamestats
  {
	display: none;
  }
  .progressbar{
	  position:relative;
	  display:block;
	  width: 100%;
	  height: 22px;
	  border-radius:16px;
	 }
  .progressbar:before{
	  position:absolute;
	  display:block;
	  content:"";
	  width: 100%;
	  height:18px;
	  top: 0;
	  -webkit-border-radius:20px;
	  border-radius:20px;
	  background:#222;
	  -webkit-box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.85);
	  box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.85), 0px 2px 0px #444;
	  border:1px solid rgba(0,0,0,0.8);
	 }
  .bar {
	  position:absolute;
	  display:block;
	  width:70%;
	  height:16px;
	  top: 3px;
	  left: 2px;
	  background: rgb(126,234,25);
	  background: -moz-linear-gradient(top,  rgba(126,234,25,1) 0%, rgba(83,173,0,1) 100%);
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(126,234,25,1)), color-stop(100%,rgba(83,173,0,1)));
	  background: -webkit-linear-gradient(top,  rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
	  background: -o-linear-gradient(top,  rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
	  background: -ms-linear-gradient(top,  rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
	  background: linear-gradient(to bottom,  rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7eea19', endColorstr='#53ad00',GradientType=0 );
	  -webkit-border-radius:16px;
	  border-radius:16px;
	  -webkit-box-shadow: 0px 0px 12px 0px rgba(126, 234, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
	  box-shadow: 0px 0px 12px 0px rgba(126, 234, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
	  overflow:hidden;
	 }
  .bar.color2 {
	  background: rgb(229,195,25);
	  background: -moz-linear-gradient(top,  rgba(229,195,25,1) 0%, rgba(168,140,0,1) 100%);
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,195,25,1)), color-stop(100%,rgba(168,140,0,1)));
	  background: -webkit-linear-gradient(top,  rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
	  background: -o-linear-gradient(top,  rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
	  background: -ms-linear-gradient(top,  rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
	  background: linear-gradient(to bottom,  rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5c319', endColorstr='#a88c00',GradientType=0 );
	  -webkit-box-shadow: 0px 0px 12px 0px rgba(229, 195, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
	  box-shadow: 0px 0px 12px 0px rgba(229, 195, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
  }
  .bar.color3 {
	  background: rgb(232,25,87);
	  background: -moz-linear-gradient(top,  rgba(232,25,87,1) 0%, rgba(170,0,51,1) 100%);
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,25,87,1)), color-stop(100%,rgba(170,0,51,1)));
	  background: -webkit-linear-gradient(top,  rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
	  background: -o-linear-gradient(top,  rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
	  background: -ms-linear-gradient(top,  rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
	  background: linear-gradient(to bottom,  rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e81957', endColorstr='#aa0033',GradientType=0 );
	  -webkit-box-shadow: 0px 0px 12px 0px rgba(232, 25, 87, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
	  box-shadow: 0px 0px 12px 0px rgba(232, 25, 87, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
  }
  .bar.color4 {
	  background: rgb(24,109,226);
	  background: -moz-linear-gradient(top,  rgba(24,109,226,1) 0%, rgba(0,69,165,1) 100%);
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(24,109,226,1)), color-stop(100%,rgba(0,69,165,1)));
	  background: -webkit-linear-gradient(top,  rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
	  background: -o-linear-gradient(top,  rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
	  background: -ms-linear-gradient(top,  rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
	  background: linear-gradient(to bottom,  #30bfff 0%,#0076d4 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#186de2', endColorstr='#0045a5',GradientType=0 );
	  -webkit-box-shadow: 0px 0px 12px 0px rgba(24, 109, 226, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
	  box-shadow: 0px 0px 12px 0px rgba(24, 109, 226, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
	 }
  .bar:before {
	  position:absolute;
	  display:block;
	  content:"";
	  width:606px;
	  height:150%;
	  top:-25%;
	  left:-25px;
	  background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.01) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
	  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.35)), color-stop(50%,rgba(255,255,255,0.01)), color-stop(51%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
	  background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	  background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	  background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	  background: radial-gradient(ellipse at center,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ffffff', endColorstr='#00ffffff',GradientType=1 );
  }
  .bar:after {
	  position:absolute;
	  display:block;
	  content:"";
	  width:64px;
	  height:16px;
	  right:0;
	  top:0;
	  -webkit-border-radius: 0px 16px 16px 0px;
	  border-radius: 0px 16px 16px 0px;
	  background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 98%, rgba(255,255,255,0) 100%);
	  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(98%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,0)));
	  background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
	  background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
	  background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
	  background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
	 }

  .bar span {
	  position:absolute;
	  display:block;
	  width:100px;
	  height:64px;
	  -webkit-border-radius:16px;
	  border-radius:16px;
	  top:0;
	  right:0;
	  transform:rotate(-90deg);
	  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABACAYAAAD7/UK9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjdFQ0M2MzdDQThBMTFFMUE3NzJFNzY4M0ZDMTA3MTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjdFQ0M2MzhDQThBMTFFMUE3NzJFNzY4M0ZDMTA3MTIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyN0VDQzYzNUNBOEExMUUxQTc3MkU3NjgzRkMxMDcxMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyN0VDQzYzNkNBOEExMUUxQTc3MkU3NjgzRkMxMDcxMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoTG0pMAABr+SURBVHjavJ1nj1zX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") 0 0;
	  -webkit-animation: sparkle 1500ms linear infinite;
	  -moz-animation: sparkle 1500ms linear infinite;
	  -o-animation: sparkle 1500ms linear infinite;
	  animation: sparkle 1500ms linear infinite;
	  opacity: .4;
	 }
  .label {
	  font-family: 'Aldrich', sans-serif;
	  position:absolute;
	  display:block;
	  width:40px;
	  height:30px;
	  line-height:30px;
	  top:38px;
	  left:0px;
	  background: rgb(76,76,76);
	  background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(38,38,38,1) 100%);
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(100%,rgba(38,38,38,1)));
	  background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
	  background: -o-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
	  background: -ms-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
	  background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#262626',GradientType=0 );
	  font-weight:bold;
	  font-size:12px;
	  color:#fff;
	  text-align:center;
	  -webkit-border-radius:6px;
	  border-radius:6px;
	  border:1px solid rgba(0,0,0,0.2);
	  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
	  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
	  text-shadow: 0px -1px 0px #000000,0px 1px 1px #000000;
	  filter: dropshadow(color=#000000, offx=0, offy=-1);
  }
  .label span {
	  position:absolute;
	  display:block;
	  width:12px;
	  height:9px;
	  top:-9px;
	  left:14px;
	  background:transparent;
	  overflow:hidden;
  }
  .label span:before {
	  position:absolute;
	  display:block;
	  content:"";
	  width:8px;
	  height:8px;
	  top:4px;
	  left:2px;
	  border:1px solid rgba(0,0,0,0.5);
	  background: rgb(86,86,86);
	  background: -moz-linear-gradient(-45deg,  rgba(86,86,86,1) 0%, rgba(76,76,76,1) 50%);
	  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(86,86,86,1)), color-stop(50%,rgba(76,76,76,1)));
	  background: -webkit-linear-gradient(-45deg,  rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
	  background: -o-linear-gradient(-45deg,  rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
	  background: -ms-linear-gradient(-45deg,  rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
	  background: linear-gradient(135deg,  rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#4c4c4c',GradientType=1 );
	  -webkit-box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.15);
	  box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.15);
	  -moz-transform:rotate(45deg);
	  -webkit-transform:rotate(45deg);
	  -o-transform:rotate(45deg);
	  -ms-transform:rotate(45deg);
	  transform:rotate(45deg);
  }
  @-webkit-keyframes sparkle {
	  from {background-position: 0 0;}
	  to {background-position: 0 -64px;}
  }
  @-moz-keyframes sparkle {
	  from {background-position: 0 0;}
	  to {background-position: 0 -64px;}
  }
  @-o-keyframes sparkle {
	  from {background-position: 0 0;}
	  to {background-position: 0 -64px;}
  }
  @keyframes sparkle {
	  from {background-position: 0 0;}
	  to {background-position: 0 -64px;}
  }
[rendergamemodeselector]
{
	outline:none;
	min-width:90px;
	max-width:90px;
	height:55px;
}
.top_overlayed
{
	z-index: 3;
	height: -webkit-fill-available;
	display: flex;
	position: absolute;
	width: 100vw;
	max-width: 100vw;
	overflow: hidden;
	top: 0;
	left: 0;
	will-change: transform;
	flex-flow: column;
	transition: transform .2s ease;
	transform: translate3d(150%,0, 0);
	padding-bottom: calc(0 + env(safe-area-inset-bottom));
	content-visibility: auto;
	contain: strict;
}

.active .top_overlayed
{
	transform: translate3d(0,0, 0);
}
.top_overlayed:after
{
	content:'';
	width: 100vw;
	height: 100vh;
	height: var(--vh100);
	position: fixed;
	top: 0;
	left:0;
	z-index:-2;
	background: url(/public/img/cubelegend/cbg2.jpeg);
	background-size:cover;
	background-repeat: no-repeat;
}
.top_overlayed:before
{
	content:'';
	width:110%;
	position:fixed;
	top:-5%;
	left:-5%;
	z-index:-1;
	height:110%;
	background:black;
	opacity:.5;
}



.top_overlayed .tabs-wrapper
{
	width: calc(100% - 40px);
	margin: 10px 20px;
}
	


.top_overlayed .tab-full-btn
{
	width:100%;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 5px;
	justify-content: center;
}
	
.top_overlayed .tabs-full
{
	/* background:#4e357a; */
}
.recent-game-wrapper
{
	width:-webkit-fill-available;
}
.top_overlayed__header
{
	background:#4e357a;
	/* resources/knoppen niet achter de notch (was buiten beeld op iPhone) */
	padding-top: env(safe-area-inset-top);
	/* border-radius:0   0 20px 20px; */
	background: linear-gradient(359deg, rgb(119 0 199) 1%,rgb(158 99 255) 100%);
	border-bottom: 1px solid #c05fff;
	outline: #6105a0 5px solid;
	background: linear-gradient(1deg, rgba(88,0,147,1) 0%,rgba(154,0,255,1) 100%);
	/* border-radius: 0 0 25px 25px; */
	border-bottom: 1px solid #c05fff;
	outline: #460274 5px solid;
	justify-content:center;
	align-items:center;
	padding-top: calc(25vw + env(safe-area-inset-top));
	max-height: 10vw;
	margin-bottom: 25vw;
	gap: 5px;
}
[id="social"] .dashboard_section
{
	padding: 10px;
	height: calc(100% - calc(100px + env(safe-area-inset-bottom)));
	overflow: auto;
}

[id="social"]
{
    left: 0;
    top: 0;
    position: absolute;
    overflow:hidden;
    height: 100vh;
    height: var(--vh100);
    width: 100vw;
}
[id="social"] h4 
{
	z-index:3;
	padding:10px;
	margin:0;
	font-size: 15px;
	text-shadow: 0px 2px #000, 0px -1px #000, -1px 0px #000, 1px 0px #000;
}

[id="shop"] h2 ,
[id="social"] h2
{
	padding:0 20px;
}
[id="social"] h3
{
	color: #fe7c14;
	font-size: 25px;
	margin:0;
	margin-left: 15px;
	text-shadow: 0px 1px #000, 0px -1px #000, -1px 0px #000, 1px 0px #000;
}
[id="shop"] .inventorystat,
[id="social"] .inventorystat
{
	width:auto;
	padding:0 10px;
	gap:10px;
	padding-right: 0;
}
[id="classicResults"] .tabs-wrapper,
[id="classicResults"] h1
{
	z-index:4;
	width: 83vw;
}

[id="classicResults"] .classic_top_3
{
	/* align-items:center; */
	z-index: 3;
	justify-content:center;
	gap:10px;
	position:relative;
	margin-top:30px;
}
[id="classicResults"] .classic_top_3 .radial_stripes
{
	z-index:1;
	animation:rotate 10s linear infinite;
	pointer-events:none;
}

[id="classicResults"] .classic_top_3 .classic_top_3__user 
{
	z-index:3;
	position: relative;
}
[id="classicResults"] .classic_top_3 .classic_top_3__user .slider__row
{
	align-items:center;
}
[id="classicResults"] .classic_top_3 .classic_top_3__user .winnerCrown
{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	top:-35px;
	
}
[id="classicResults"] .top_overlayed img
{
	width: 80px;
	height: 80px;
}
[id="classicResults"] .top_overlayed img:not(.trophy):nth-child(2)
{
	width:150px ;
	height:150px ;
}
[id="classicResults"] .top_overlayed .trophy:nth-child(3)
{
	bottom:20px;
	left: 20px
}
[id="classicResults"] .classic_top_3__user:nth-child(2)
{
	font-size:25px;
}
[id="classicResults"] .classic_top_3__user .trophy
{
	z-index:3;
	width:50px;
	height:50px;
	filter:drop-shadow(0 0 3px #000);
}
[id="xpJourney"] .top_overlayed__header,
[id="classicResults"] .top_overlayed__header,
[id="gamerprofile"] .top_overlayed__header
{
	max-height:unset;
	padding-top:20px;
	padding-top: calc(20px + env(safe-area-inset-top));
	margin-bottom: 0px;
	box-shadow: 0 10px 10px #00000078;
}
/* spec juli 2026: wat ademruimte onder de laatste headerregel van het profiel */
[id="gamerprofile"] .top_overlayed__header
{
	padding-bottom:18px;
}
/* resource-pillen in de profielheader: op inhoud i.p.v. uitgerekt over de
   volle breedte (de generieke .inventorystat is width:100% + space-between,
   wat hier rechts van elk getal een groot leeg vlak vóór het icoon liet) */
.profile_resources .inventorystat
{
	width:auto;
	justify-content:center;
	gap:8px;
	padding:0 8px 0 14px;
}
.profile_resources .inventorystat img
{
	margin-left:0;
}
/* HIGHSCORES/AVARAGES compacter: 2×2-grid i.p.v. vier gestapelde rijen
   (.active zet elders display:flex !important, vandaar ook hier !important) */
[id="gamerprofile"] [tabcontent] .dashboard_section[tabgroup="range"].active
{
	display:grid !important;
	grid-template-columns:1fr 1fr;
	gap:4px 12px;
	padding:8px !important;
}
[id="gamerprofile"] [tabcontent] .dashboard_section[tabgroup="range"] .dashboard_section__item
{
	gap:2px;
}
[id="gamerprofile"] [tabcontent] .dashboard_section[tabgroup="range"] .dashboard_section__item h4
{
	font-size:20px;
}
[id="gamerprofile"] [tabcontent] .dashboard_section[tabgroup="range"] .dashboard_section__item span
{
	font-size:12px;
}
[id="gamerprofile"] [tabcontent] .dashboard_section[tabgroup="range"] .dashboard_section__item:after
{
	content:none;
}
[id="classicResults"] .top_overlayed__header
{
	border-radius:0 0 100% 100%;
	overflow:hidden;
	min-height: 370px;
	max-height: 370px;
	padding-top:0;
	padding-top: calc(10px + env(safe-area-inset-top));
	width:200%;
	position:absolute;
	left:-50% !important;
	box-shadow: 0 10px 10px #00000078, inset 0px -20px 30px #673AB7;
}

[id="classicResults"] .tabs 
{
	top: calc(385px + env(safe-area-inset-top));
}
[id="classicResults"] .tabs [tabcontent]
{
	padding: 0 20px;
	box-sizing: border-box;
	padding: 0 20px;
	box-sizing: border-box;
	
}
[id="xpJourney"],
[id="classicResults"]
{
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
[id="shop"] .top_overlayed__header,
[id="social"] .top_overlayed__header
{
	margin-bottom: 0;
	padding:0;
	padding-top: calc(40px + env(safe-area-inset-top));
	padding-bottom: 40px;
	z-index: 9999;
	box-shadow: 0 10px 20px #00000078;
	position: relative;
}
.seasonalQuestBG,
.xpJourneyBG
{
	position:relative;
	height: 175px;
	max-height: 175px !important;
}
.seasonalQuestBG
{
	height: 252px;
	max-height: 252px !important;
	
}
.seasonalQuestBG:after,
.xpJourneyBG:after
{
	z-index: 0;
	position:absolute;
	left:0;
	top:0;
	content:'';
	height:100%;
	width:100vw;
	border-radius:0 0 20px 20px;
}
.seasonalQuestBG *,
.xpJourneyBG *
{
	z-index:3;
	font-size: 25px;
}
.xpJourneyBG h2 
{
	padding: 0 20px;
	margin-bottom: 0;
	font-size: 15px;
}
.seasonalQuestBG:after
{
    background: url(/public/img/cubelegend/challenges/september.jpg);
	
}
.xpJourneyBG:after
{
    background: linear-gradient(to bottom, rgba(78,53,122,1) 0%,rgb(110 62 195) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /* background: url(/public/img/cubelegend/xpjourney.jpeg); */
    background-size:cover;
    background-position-y: bottom;
}
.no-transition *
{
	touch-action: none;
}
[id="gamerprofile"] h3
{
	margin:0;
}
.color-purple
{
	color:#FF9800;
}
.color-blue
{
	color:#00b0ff;
}
.opacity-05
{
	opacity:.5
}
.recent-game > div
{
	padding: 0 8px;
	border: 1px solid;
	margin-top: 8px;
	width: 100%;
	gap: 2px;
	border-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%) 1;
}
.add-friend
{
	margin-top:5px;
	color: #ffa500;
}
[id="gamerprofile"] h1 
{
	margin:0;
}

.top_overlayed__header .flex-row .flex-row > img 
{
	width:40vw;
	filter: drop-shadow(0px 10px 10px rgb(0 0 0 / 0.4));
}
.top_overlayed__header .flex-row .flex-row img
{
	width: 10vw;
}
[id="gamerprofile"] [tabcontent] h2 
{
	margin:0;
	margin-bottom:10px;
	display: flex;
	justify-content: space-between;
}
[id="gamerprofile"] [tabcontent]
{
	padding: 10px 20px;
}
[tabgroup="charts"].dashboard_section
{
	padding:5px !important;
	height: 200px !important;
	margin-bottom:10px !important;
	width: calc(100% - 10px);
}
[tabgroup="charts"].dashboard_section canvas 
{
	width: 100% !important;
}
[id="gamerprofile"] .tabs 
{
	overflow: hidden;
	margin-bottom: calc(40px + env(safe-area-inset-bottom));
}
[id="gamerprofile"] [tabcontent]:not([tabcontent="recent"]) .dashboard_section
{
	display:none !important;
	margin-bottom:20px;
	display:flex;
	padding:10px;
	/* border-color: #ffffff8c; */
	height: fit-content;
}
[id="gamerprofile"] [tabcontent] .dashboard_section.active
{
	
	display:flex !important;
}
[id="gamerprofile"] [tabcontent] .dashboard_section__item
{
	width:100%;
	gap:7px;
	display:flex;
	flex-direction:column
}
[id="gamerprofile"] [tabcontent] .dashboard_section__item h4 
{
	margin:0;
	font-size: 18px;
	white-space: nowrap;
}
[id="gamerprofile"] [tabcontent] .dashboard_section__item span 
{
	opacity: .5;
}
[id="gamerprofile"] [tabcontent] .dashboard_section__item
{
	border: 1px solid;
	border-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%) 1;
}
[id="gamerprofile"] [tabcontent] .dashboard_section__item:after
{
	opacity:.5;
}
.relative
{
	position:relative;
}
.absolute
{
	position:absolute;
}
.x-center
{
	left:50%;
	transform:translateY(-50%);
}
.y-center
{
	top:50%;
	transform:translateX(-50%);
}
.x-right
{
	right:0;
}
.xp-star-outer
{
	position:relative;
}
.xp-star-outer > img
{
	width:28vw;
	height:28vw;
	border-radius:100%;
	object-fit:cover;
	border:3px solid #ffd76b;
	box-shadow:0 0 20px #6631c399;
	background:#38255a;
}
.profile_resources .inventorystat
{
	width:auto;
	padding:0 14px 0 6px;
	gap:6px;
}
.profile_resources .inventorystat img
{
	margin-left:0;
}
.xp-star-inner
{
	right:0px;
	bottom:0px;
	position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;
}
.xp-star-inner > img 
{
	width:15vw;
	height:15vw;
	
}
.xp-star-inner span
{
	font-size:18px;
	text-shadow:0px 1px #000, 0px -1px #000, -1px 0px #000, 1px 0px #000;
	position:absolute;

}

.newHighscore
{
	width: 100vw;
	height: 100vh;
	height: var(--vh100);
	max-height:100vh;
	max-height: var(--vh100);
	left:0;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
	top:0;
	position:fixed;
	z-index: 3;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4e357a+0,258dc8+100 */
	background: rgb(78,53,122); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(78,53,122,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(78,53,122,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(78,53,122,1) 0%,rgb(110 62 195) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e357a', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
	padding: 30px;
	text-align:center;
	align-items:center;
	overflow: hidden;
	justify-content: space-between;
	display:flex;
	flex-direction:column;
	box-Sizing:border-box;
	padding-top: calc(10px + env(safe-area-inset-top));
	padding-bottom: calc(30px + env(safe-area-inset-bottom));
}
.newHighscore .incomplete_holder img 
{
	width: 25vw;
}
a[swipe-close]
{
	z-index:999
}
[swipe-close="xp"]
{
	margin-bottom: env(safe-area-inset-bottom);
}
.newHighscore.green 
{
	
	background: linear-gradient(to bottom, #4CAF50 0%,rgb(0 0 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.newHighscore.red 
{
	
	background: linear-gradient(to bottom, #ff0000 0%,rgb(0 0 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.newHighscore h1 
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18vw !important;
	margin: 0;
	font-family: 'headers2' ! important;
}
.newHighscore h2 
{
	justify-content:center;
	font-size: 35px;
	margin-top: 0;
	display: block;
	z-index: 3;
	max-width: 85vw;
	font-family: 'headers2' !important;
}
.newHighscore .btn-orange
{
	margin-top:auto
}
.newHighscore h3 
{
	font-family: 'font3' !important;
}
[dom-removable="weeklyLeaderBoard"] *
{
	font-family:headers !important;
}
.newHighscore:not([dom-removable="weeklyLeaderBoard"]) span 
{
	color: #ffa64a;
	font-family: headers2;
	font-size: 47px;
	display: block;
}
.newHighscore img 
{
	width:50vw
}
body .radial_stripes { /* Radial Stripes elements in the "body" part of the page */
	position: absolute;
	z-index:-1;
	margin: auto;
	width: 500%;
	height: 500%;
	left: -200%;
	top: -200%;
	opacity:0.4;
	}

.newHighscore .radial_stripes
{
	    animation: rotate infinite 8s linear;
}

.radial_stripes {background:url('/public/img/cubelegend/radial-stripes.svg');background-repeat: no-repeat;background-position: center;position: absolute;z-index: 2;}
@keyframes rotate {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.progressbarHolder
{
	width:100%;
	background:#ffffff61;
	height:8px;
	border-radius:5px;
}
[tabcontent="leagues"] h2 
{
	display:block;
	margin:0;
	margin-top:10px
}
[tabcontent="leagues"] .league h3 
{
	margin:0;
}
[tabcontent="leagues"] .league
{
	align-items:center
}
[tabcontent="leagues"].active
{
	display:flex !important;
	flex-direction:column;
	gap:30px !important;
}
[tabcontent="leagues"] .league > img
{
	width:180px
}

.tiers div img 
{
	width: 16vmin;
	max-width:150px;
	height: 16vmin;
	margin-bottom:5px;
}
.tiers
{
	display:flex;
	gap:10px;
	width:100%;
	margin-top: 10px;
}
.tiers div 
{
	background:#50357a;
	box-shadow:inset 0 2px 2px black,inset 0 -1px 1px #ffffff63;
	border-radius:10px;
	padding:10px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:10px;
	width:100%;
}
.division_promotion
{
	color:#8BC34A;
	
}
.division_demotion
{
	color:red;
}
.secundary_div_styling
{
	padding: 10px;
    gap: 5px;
    align-items: center;
    background: #11004c80;
    border: 1px solid #11004c;
    border-radius: 5px;
}
.dashboard_section > span 
{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:15px 0 ;
	padding-top:30px;
	gap:8px;
}
.dashboard_section > span:first-child
{
	padding-top:15px;
	
}
.leaderboard_promo
{
	color: hsl(121.19deg 100% 50.39%);
}
.leaderboard_demotion
{
	color:hsl(0deg 100% 50%);
}

.leaderboard_promo:before,
.leaderboard_promo:after
{
	  animation: bounce2up 2s ease infinite;
	content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 256 256"%3E%3Cpath fill="hsl(121.19deg 100% 50.39%)" d="M184 216a8 8 0 0 1-8 8H80a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8Zm45.66-101.66l-96-96a8 8 0 0 0-11.32 0l-96 96A8 8 0 0 0 32 128h40v24a8 8 0 0 0 8 8h96a8 8 0 0 0 8-8v-24h40a8 8 0 0 0 5.66-13.66ZM176 176H80a8 8 0 0 0 0 16h96a8 8 0 0 0 0-16Z"%2F%3E%3C%2Fsvg%3E')
}

.leaderboard_promo.past:before,
.leaderboard_promo.past:after
{
	animation:none;
}

.leaderboard_demotion:before,
.leaderboard_demotion:after
{
	animation: bounce2down 2s ease infinite;
	content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 256 256"%3E%3Cpath fill="hsl(0deg 100% 50%)" d="M72 40a8 8 0 0 1 8-8h96a8 8 0 0 1 0 16H80a8 8 0 0 1-8-8Zm159.39 92.94A8 8 0 0 0 224 128h-40v-24a8 8 0 0 0-8-8H80a8 8 0 0 0-8 8v24H32a8 8 0 0 0-5.66 13.66l96 96a8 8 0 0 0 11.32 0l96-96a8 8 0 0 0 1.73-8.72ZM80 80h96a8 8 0 0 0 0-16H80a8 8 0 0 0 0 16Z"%2F%3E%3C%2Fsvg%3E')
}	
.leaderboard_demotion.past:before,
.leaderboard_demotion.past:after
{
	animation:none;
}

.dashboard_promo,

.dashboard_neutral,
.dashboard_demote
{
	position:absolute;
	left:0;
	bottom:5px;
	width:100%;
	display:none;
	text-align:center;
	font-size:90%;
	align-items:center;
	justify-content:center;
	gap:5px;
	color: hsl(87.77deg 50.21% 52.75%);
}

.dashboard_demote
{
	color:hsl(0deg 100% 50%);
}
.dashboard_neutral
{
	color: hsl(201.04deg 100% 69.8%);
}
.dashboard_promo:before,
.dashboard_promo:after
{
	fill:#8BC34A;
	content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 256 256"%3E%3Cpath fill="hsl(87.77deg 50.21% 52.75%)" d="M184 216a8 8 0 0 1-8 8H80a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8Zm45.66-101.66l-96-96a8 8 0 0 0-11.32 0l-96 96A8 8 0 0 0 32 128h40v24a8 8 0 0 0 8 8h96a8 8 0 0 0 8-8v-24h40a8 8 0 0 0 5.66-13.66ZM176 176H80a8 8 0 0 0 0 16h96a8 8 0 0 0 0-16Z"%2F%3E%3C%2Fsvg%3E')
}
.tag-blue:before
{
	content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 256 256"%3E%3Cpath fill="hsl(0deg 0% 100%)" d="M48 80v96a8 8 0 0 1-16 0V80a8 8 0 0 1 16 0Zm24-8a8 8 0 0 0-8 8v96a8 8 0 0 0 16 0V80a8 8 0 0 0-8-8Zm165.66 50.34l-96-96A8 8 0 0 0 128 32v40h-24a8 8 0 0 0-8 8v96a8 8 0 0 0 8 8h24v40a8 8 0 0 0 13.66 5.66l96-96a8 8 0 0 0 0-11.32Z"%2F%3E%3C%2Fsvg%3E')
}

.dashboard_neutral:after
{
	content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 256 256"%3E%3Cpath fill="hsl(0deg 0% 100%)" d="M160 80v96a8 8 0 0 1-8 8h-24v40a8 8 0 0 1-13.66 5.66l-96-96a8 8 0 0 1 0-11.32l96-96A8 8 0 0 1 128 32v40h24a8 8 0 0 1 8 8Zm24-8a8 8 0 0 0-8 8v96a8 8 0 0 0 16 0V80a8 8 0 0 0-8-8Zm32 0a8 8 0 0 0-8 8v96a8 8 0 0 0 16 0V80a8 8 0 0 0-8-8Z"%2F%3E%3C%2Fsvg%3E')
}
.tag-red:before,
.dashboard_demote:after
{
  animation: bounce2down 2s ease infinite;
	content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 256 256"%3E%3Cpath fill="hsl(0deg 100% 50%)" d="M72 40a8 8 0 0 1 8-8h96a8 8 0 0 1 0 16H80a8 8 0 0 1-8-8Zm159.39 92.94A8 8 0 0 0 224 128h-40v-24a8 8 0 0 0-8-8H80a8 8 0 0 0-8 8v24H32a8 8 0 0 0-5.66 13.66l96 96a8 8 0 0 0 11.32 0l96-96a8 8 0 0 0 1.73-8.72ZM80 80h96a8 8 0 0 0 0-16H80a8 8 0 0 0 0 16Z"%2F%3E%3C%2Fsvg%3E')

}
.section_league > div 
{
	position:relative;
}
.section_league .flex-row
{
	gap:10px;
}
.tag-green,
.tag-red,
.tag-blue
{
	font-size:14px;
	color: hsl(121.19deg 100% 50.39%);
	border-Radius:10px;
	margin: 5px 0;
	text-align: left;
	display:flex;
	align-items:center;
	gap:5px;
	width:auto;
	text-decoration:underline;
}


.tag-green:before
{
  animation: bounce2up 2s ease infinite;
	content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 256 256"%3E%3Cpath fill="hsl(121.19deg 100% 50.39%)" d="M184 216a8 8 0 0 1-8 8H80a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8Zm45.66-101.66l-96-96a8 8 0 0 0-11.32 0l-96 96A8 8 0 0 0 32 128h40v24a8 8 0 0 0 8 8h96a8 8 0 0 0 8-8v-24h40a8 8 0 0 0 5.66-13.66ZM176 176H80a8 8 0 0 0 0 16h96a8 8 0 0 0 0-16Z"%2F%3E%3C%2Fsvg%3E')
}
.tag-red.past:before,
.tag-green.past:before
{
	animation:none;
}

.tag-red
{
	
	color:hsl(0deg 100% 50%);
}
.tag-blue
{
	opacity:.5;
	color:hsl(0deg 0% 100%);
}
.championship_explained
{
	font-size:15px;
	align-items:center;	
	justify-content:end;
	text-decoration:underline;
	color:hsl(201.04deg 100% 69.8%);
}
.championship_explained:before
{
	content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" viewBox="0 0 11 24"%3E%3Cpath fill="hsl(201.04deg 100% 69.8%)" d="M8.436.006a2.24 2.24 0 0 1 2.408 2.354v-.006a3.156 3.156 0 0 1-3.151 3.01l-.065-.001h.003a2.151 2.151 0 0 1-2.367-2.398l-.001.01A3.087 3.087 0 0 1 8.44.004h-.005zM3.489 24c-1.268 0-2.199-.783-1.311-4.226l1.456-6.108c.254-.978.295-1.369 0-1.369a9.57 9.57 0 0 0-3.035 1.359l.033-.021l-.633-1.057c3.086-2.622 6.638-4.159 8.158-4.159c1.268 0 1.48 1.526.845 3.874l-1.666 6.421c-.296 1.135-.168 1.526.126 1.526a6.553 6.553 0 0 0 2.863-1.456l-.008.007l.72.979c-3.004 3.052-6.281 4.232-7.549 4.232z"%2F%3E%3C%2Fsvg%3E');

}

.championship_explained svg
{
	display:none;
	height:20px;
	align-items:center;	
	
}
.league_day_cd
{
	position:absolute;
	right:15px;
	top:10px;
	font-size: 16px;
}

.wobble {
  animation: wobble 2s ease infinite;
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}


.bounce {
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}
.bounce2 {
  animation: bounce2 2s ease infinite;
}
@keyframes bounce2up {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30%);}
	60% {transform: translateY(-15%);}
}
@keyframes bounce2down {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(30%);}
	60% {transform: translateY(15%);}
}

.center-body {
	display: flex;
	justify-content: center;
	align-items: center;
	position:fixed;
	flex-direction: column;
	width: 100vw;
	background: #4300b900;
	z-index:3;
	transition:.1s ease;
	height: 100vh;
	height: var(--vh100);
}
.center-body.active
{
	background: linear-gradient(to bottom, rgba(78,53,122,.9) 0%,rgba(110,62,195,.9) 100%);
	top: 0;
	z-index:999;
	left: 0;
	position: fixed;
}
.center-body h2
{
	margin-top:5px;
	font-size:30px
}
.loader-square-11 {
	width: 70px;
	height: 70px;
	position: relative;
	transform: rotate(45deg);
}
.loader-square-11 div {
	width: 20px;
	height: 20px;
	position: absolute;
}
.loader-square-11 > div::after {
	content: "";
	width: 100%;
	height: 100%;
	background-color: #ff7800;
	display: inline-block;
}
.loader-square-11 .ld1 {
	transform: translate(0, 0);
	animation: anm-sq-11-l1-rise 3s ease 0s infinite;
}
.loader-square-11 .ld2 {
	transform: translate(0, 32px);
	animation: anm-sq-11-l2-rise 3s ease 0s infinite;
}
.loader-square-11 .ld3 {
	transform: translate(32px, 0px);
	animation: anm-sq-11-l3-rise 3s ease 0s infinite;
}
.loader-square-11 .ld4 {
	transform: translate(32px, 32px);
	animation: anm-sq-11-l4-rise 3s ease 0s infinite;
}
.loader-square-11 .ld1:after,
.loader-square-11 .ld4:after {
	animation: anm-sq-11-rot1 3s ease 0s infinite, color 3s linear 0s infinite;
}
.loader-square-11 .ld2:after,
.loader-square-11 .ld3:after {
	animation: anm-sq-11-rot2 3s ease 0s infinite, color 3s linear 0s infinite;
}
@keyframes anm-sq-11-rot1 {
	0% {
		transform: rotate(0deg);
	}
	40% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(0deg);
	}
	60% {
		transform: rotate(90deg);
	}
	100% {
		transform: rotate(90deg);
	}
}
@keyframes anm-sq-11-rot2 {
	0% {
		transform: rotate(0deg);
	}
	40% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(0deg);
	}
	60% {
		transform: rotate(-90deg);
	}
	100% {
		transform: rotate(-90deg);
	}
}
@keyframes anm-sq-11-rot3 {
	0% {
		transform: rotate(45deg);
	}
	35% {
		transform: rotate(45deg);
	}
	65% {
		transform: rotate(405deg);
	}
	100% {
		transform: rotate(405deg);
	}
}
@keyframes anm-sq-11-l1-rise {
	0% {
		transform: translate(0px, 0px);
	}
	30% {
		transform: translate(-8px, -8px);
	}
	70% {
		transform: translate(-8px, -8px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}
@keyframes anm-sq-11-l2-rise {
	0% {
		transform: translate(0, 20px);
	}
	30% {
		transform: translate(-8px, 30px);
	}
	70% {
		transform: translate(-8px, 30px);
	}
	100% {
		transform: translate(0, 20px);
	}
}
@keyframes anm-sq-11-l3-rise {
	0% {
		transform: translate(20px, 0px);
	}
	30% {
		transform: translate(30px, -8px);
	}
	70% {
		transform: translate(30px, -8px);
	}
	100% {
		transform: translate(20px, 0px);
	}
}
@keyframes anm-sq-11-l4-rise {
	0% {
		transform: translate(20px, 20px);
	}
	30% {
		transform: translate(30px, 30px);
	}
	70% {
		transform: translate(30px, 30px);
	}
	100% {
		transform: translate(20px, 20px);
	}
}
.leaderboard .top_overlayed__header .flex-row
{
	align-items:center;
}
.leaderboard .top_overlayed__header
{
	padding-top: calc(5px + env(safe-area-inset-top));
	max-height: unset;
	margin-bottom: 10px;
}
.leaderboard .top_overlayed__header .img
{
	width:15vw;
	height:15vw		
}
.leaderboard .top_overlayed__header .img:nth-child(2) 
{
	width:35vw;
	height:35vw		
}
.leaderboard .top_overlayed__header h1 
{
	font-size:25px
}

.leaderboard .o-w
{
    padding: 1rem !important;
    margin: 0;
    overflow: hidden;
}
.leaderboard h4 
{
	width: 35%;
	padding-left:20px;
	text-align:left;
}

.leaderboard h4:last-child
{
	padding-left:0;
	padding-right:20px;
	text-align:right;
}
.avatars_grid
{
	margin-top:20px;
	display:grid;
	grid-template: 1fr 1fr / 1fr 1fr;
	gap:40px;
	overflow: auto;
}
.avatars_grid__avatar.selected
{
	border:2px solid #ff9800;
	position:relative;
	padding:10px;
}
[tabcontent_wrapper="true"] .btn-orange
{
	min-width:-webkit-fill-available !important;
}
.mission_booster_starters .avatars_grid__avatar.selected
{
	border:none !important;
	padding:0;
}
.mission_booster_starters .avatars_grid__avatar
{
	position:relative;
	display: flex;
	flex-direction: column;
	transition:.4s ease;
	transform: translateY(100vh);
	opacity: 0;
	
}
.active .mission_booster_starters .avatars_grid__avatar
{	
	transform: translateY(0);
	opacity: 1;
}
.mission_booster_starters.perks .avatars_grid__avatar img
{
	filter:drop-shadow(0 0px 2px);
}

.mission_booster_starters .avatars_grid__avatar:not(.locked):active
{
	transition-delay:unset!important;
	scale:.8;
}
.mission_booster_starters .avatars_grid__avatar:before
{
	scale:2;
	opacity:0;
	transition:.5s;
	content:'\2713';
	left:0;
	top:0;
	width:30px;
	height:30px;
	position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
	border-radius:100%;
}

.mission_booster_starters .avatars_grid__avatar.locked img,
.mission_booster_starters .avatars_grid__avatar[extender-locked] img,
.mission_booster_starters .avatars_grid__avatar[extender-mismatch] img
{
	opacity:.35 !important;
	filter:grayscale()
}

.mission_booster_starters .avatars_grid__avatar.locked .inventory_count 
{
	background:red;
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="10px" height="10px" viewBox="0 0 20 20"%3E%3Cpath fill="white" d="M15 9h-1V6c0-2.2-1.8-4-4-4S6 3.8 6 6v3H5c-.5 0-1 .5-1 1v7c0 .5.5 1 1 1h10c.5 0 1-.5 1-1v-7c0-.5-.5-1-1-1zm-4 7H9l.4-2.2c-.5-.2-.9-.8-.9-1.3c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5c0 .6-.3 1.1-.9 1.3L11 16zm1-7H8V6c0-1.1.9-2 2-2s2 .9 2 2v3z"%2F%3E%3C%2Fsvg%3E')
}

.mission_booster_starters .avatars_grid__avatar.selected:before
{
	background:#FF9800;
	border-radius:100%;
	border:1px solid #fff;
	scale:1;
	opacity:1;
	left:0;
	top:0;
	box-shadow:0 0px 10px 10px #00000082, inset 0px 1px 0px #ffffff, inset 0px -1px 0px #0000008f;
}
.avatars_grid__avatar.selected:before
{
	content:'\2713';
	background:#ff9800;
	left:0;
	top:0;
	position:absolute;
	width:30px;
	height:30px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
}

.price_tag
{
	font-size: 22px !important;
	border-radius:5px;
	color: #fff !important;
	box-shadow: inset 0 8px 4px #000000a1;
	background: #5a3367;
	padding: 5px 10px;
	margin-left:auto;
	margin-right:-5px;
	position:relative;
	display:flex;
	border: 1px solid #000;
	align-items:center;
	padding-left:32px;
	font-family: font3 !important;
}
.price_tag:before
{
	content:'';
	background:url('/public/img/cubelegend/gold.png');
	height:100%;
	background-position:center;
	background-repeat:no-repeat;
	width:24px;
	background-size:100%;
	display:block;
	position:absolute;
	z-index:222;
	left:5px;
	top:0;
}
.price_tag.eu
{
	padding-left:10px;
}
.price_tag.eu:before
{
	content:initial;
}
.price_tag.day_card:before
{
	background:url('/public/img/cubelegend/card_challenge_day.png');
}
.price_tag.week_card:before
{
	background:url('/public/img/cubelegend/card_challenge_week.png');
}
.price_tag.month_card:before
{
	background:url('/public/img/cubelegend/card_challenge_month.png');
}
.price_tag.xp:before
{
	content:'';
	background:url('/public/img/cubelegend/xp.png');
	height:100%;
	background-position:center;
	background-repeat:no-repeat;
	width:24px;
	background-size:100%;
	display:block;
	position:absolute;
	z-index:222;
	left:5px;
	top:0;
}
.price_tag.live:before
{
	content:'';
	background:url('/public/img/cubelegend/lives_1.png');
	height:100%;
	background-position:center;
	background-repeat:no-repeat;
	width:24px;
	background-size:100%;
	display:block;
	position:absolute;
	z-index:0;
	left:5px;
	top:0;
}
.randomise_avatars
{
	font-size:20px;
	padding:10px;
	align-items:center;
	display:flex;
	justify-content:center;
	position:relative;
	gap:5px
}
.randomise_avatars:before
{
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1.5em" height="1.5em" viewBox="0 0 24 24"%3E%3Cpath fill="hsl(0deg 0% 100%)" d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6c0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6c0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4l-4-4v3z"%2F%3E%3C%2Fsvg%3E')
	
}
img
{
	pointer-events:none;
}
.m_slot
{
}

/* WP7: factory upgrade-tab — machines + boostergrid + profiel-boosterlevels */
.factory_machines
{
	display:flex;
	flex-direction:column;
	gap:16px;
	padding:16px 20px;
}
.factory_machine
{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	padding:12px;
	border-radius:14px;
	background:rgba(0,0,0,.35);
	border:1px solid #6631c3;
}
.factory_machine__platform
{
	max-width:180px;
	width:60%;
	position:relative;
	z-index:2; /* vóór de buis → de boven/onderring occluderen de vloeistof-uiteinden (pierce) */
}
.factory_machine__booster
{
	position:absolute;
	top:8px;
	width:54px;
	filter:drop-shadow(0 0 8px #c19eff);
}
/* WP7: reactor-tube — de transparante buis van het platform. Tijdens een upgrade is
   hij gevuld met borrelende reactorvloeistof: opstijgende bubbels, een deinend
   oppervlak en de booster die er heen en weer in zweeft. --charge (0→1) laat de
   reactie-gloed traag omhoog kruipen over de upgradeduur. */
.factory_machine
{
	cursor:pointer;
}
.factory_machine__tube
{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	/* langer dan de glazen cilinder: de vloeistof loopt achter de boven- én
	   onderring door (platform staat ervóór) → lijkt dwars door de platformen
	   te piercen. De transparante glascilinder van het PNG tint de vloeistof. */
	top:13%;
	height:72%;
	width:19%;
	max-width:48px;
	border-radius:8px;
	overflow:hidden;
	z-index:0; /* achter het platform (z-index:2) */
	pointer-events:none;
}
/* de vloeistof vult de héle buis (geen luchtlaag/zwarte plek bovenaan) en wordt
   door de sterk afgeronde buis boven én onder mooi afgerond geklipt */
.factory_machine__liquid
{
	position:absolute;
	inset:0;
	/* Basis = de nog "niet-gereageerde" reactor-vloeistof — een duidelijk zichtbare
	   medium-violette liquid (niet te donker, anders lijkt de buis leeg). De heldere
	   amber-voortgangsvulling (:after) stijgt hier zichtbaar doorheen omhoog.
	   Laag 1 = cilindrische shading (rond 3D-volume), laag 2 = de basis-vloeistof. */
	background:
		linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.14) 16%, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%, rgba(0,0,0,.14) 84%, rgba(0,0,0,.5) 100%),
		linear-gradient(180deg,#9a6cf0 0%,#6b3fc0 100%);
	box-shadow:inset 0 10px 16px rgba(255,255,255,.28), inset 0 -12px 18px rgba(40,15,90,.5);
	z-index:1;
}
/* zachte glans-cap bovenaan (afgeronde meniscus i.p.v. een harde vlakke lijn) */
.factory_machine__liquid:before
{
	content:'';
	position:absolute;
	left:8%; right:8%; top:5%;
	height:16%;
	border-radius:50%;
	background:radial-gradient(closest-side, rgba(255,246,208,.7), transparent 75%);
	filter:blur(1px);
	z-index:2;
	pointer-events:none;
}
/* voortgangsvulling: een heldere, gloeiende amber-kolom die met --charge van
   onderen omhoog stijgt door de dimme basis-vloeistof → duidelijk zichtbare
   evolve-voortgang. De top is via een mask gefeatherd (geen harde scheidingslijn). */
.factory_machine__liquid:after
{
	content:'';
	position:absolute;
	left:0; right:0; bottom:0;
	height:calc(var(--charge,0) * 100%);
	background:
		linear-gradient(90deg, rgba(0,0,0,.4) 0%, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%, rgba(0,0,0,.4) 100%),
		linear-gradient(180deg,#ffe89c 0%,#f6981f 55%,#e07a15 100%);
	box-shadow:0 0 16px #ffd76b, 0 -2px 12px #ffb347;
	-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 11%);
	mask-image:linear-gradient(180deg, transparent 0, #000 11%);
	z-index:2;
	pointer-events:none;
}
/* opstijgende bubbels */
.factory_machine__bubbles
{
	position:absolute;
	inset:0;
	z-index:3;
	pointer-events:none;
}
.factory_machine__bubbles i
{
	position:absolute;
	bottom:0;
	width:6px; height:6px;
	border-radius:50%;
	background:radial-gradient(circle at 32% 30%,#fff,#ffe6b0 60%,transparent);
	opacity:0;
	animation:bubbleRise 2.8s ease-in infinite;
}
.factory_machine__bubbles i:nth-child(1){ left:22%; animation-delay:0s;   animation-duration:2.6s; }
.factory_machine__bubbles i:nth-child(2){ left:52%; animation-delay:.5s;  animation-duration:3.2s; width:8px;height:8px; }
.factory_machine__bubbles i:nth-child(3){ left:71%; animation-delay:.9s;  animation-duration:2.3s; width:4px;height:4px; }
.factory_machine__bubbles i:nth-child(4){ left:37%; animation-delay:1.4s; animation-duration:3.4s; }
.factory_machine__bubbles i:nth-child(5){ left:62%; animation-delay:1.9s; animation-duration:2.7s; width:5px;height:5px; }
.factory_machine__bubbles i:nth-child(6){ left:30%; animation-delay:2.3s; animation-duration:3.0s; width:7px;height:7px; }
@keyframes bubbleRise
{
	0%   { bottom:2%;  opacity:0; transform:scale(.5); }
	15%  { opacity:.95; }
	50%  { transform:translateX(3px) scale(1); }
	85%  { opacity:.7; }
	100% { bottom:84%; opacity:0; transform:translateX(-2px) scale(1); }
}
.factory_machine.bezig { border-color:#e3a448; }
/* de booster zweeft in het zichtbare glasvenster, vóór het platform (z-index:4 >
   platform 2), en gaat heen en weer (+ deint en kantelt) */
.factory_machine__cube
{
	position:absolute;
	left:50%; top:40%;
	width:34px;
	z-index:4;
	filter:drop-shadow(0 0 9px #ffe6b0);
	animation:boosterSway 3.6s ease-in-out infinite;
	pointer-events:none;
}
@keyframes boosterSway
{
	0%   { transform:translate(-50%,0) rotate(-9deg); }
	25%  { transform:translate(calc(-50% - 5px),-3px) rotate(-3deg); }
	50%  { transform:translate(-50%,-6px) rotate(9deg); }
	75%  { transform:translate(calc(-50% + 5px),-3px) rotate(3deg); }
	100% { transform:translate(-50%,0) rotate(-9deg); }
}
.factory_machine.vrij:active { transform:scale(.98); }
.factory_machine__lock
{
	position:absolute;
	top:38%;
	color:#ffd76b;
	filter:drop-shadow(0 2px 4px #000);
	z-index:2;
}
.factory_machine.klaar
{
	border-color:#7CFC00;
	box-shadow:0 0 16px #7cfc0055;
}
.factory_machine.geblokkeerd
{
	opacity:.55;
	filter:grayscale(.6);
}
.factory_machine__timer
{
	font-size:22px;
	letter-spacing:2px;
	text-shadow:0 1px #000;
}
.factory_machine__label
{
	font-size:12px;
	opacity:.75;
	text-align:center;
}
.factory_loading
{
	padding:40px;
	text-align:center;
	opacity:.6;
}
/* Spec juli 2026: energie-bedragen zijn langer geworden ("475.9 MWh") — de
   resource-pillen op de boosterkaart mogen nooit over twee regels wrappen
   (.gamepop_header span forceert elders juist white-space:wrap !important,
   vandaar ook hier !important). */
.inventory_snippet .inventorystat,
.inventory_snippet .inventorystat span
{
	white-space: nowrap !important;
}

/* Spec juli 2026: EVOLVE/EVOLVED-tabs in de booster-drawer. De generieke
   [tabcontent]-panes zijn position:absolute binnen .tabs — in een bottom_drawer
   heeft .tabs geen natuurlijke hoogte, dus expliciet zetten; de panes scrollen
   zelf (base [tabcontent] heeft al overflow:auto). */
#factoryPicker .factory_picker_tabs
{
	position:relative;
	height:52vh;
	margin-top:8px;
	/* de drawer-content is een centrerende flex-kolom en de panes zijn absoluut
	   gepositioneerd → zonder expliciete breedte klapt de container naar 0px */
	width:100%;
	box-sizing:border-box;
}
#factoryPicker .tabs-wrapper
{
	padding:0 14px;
	box-sizing:border-box;
}

/* WP7: eigen compacte grid — de generieke .avatars_grid (2×2, 40px gap) maakte de
   boosters te groot en veroorzaakte x-overscroll. Nu een net raster dat past. */
.factory_boosters.avatars_grid
{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-template-rows:none;
	gap:12px;
	margin-top:16px;
	padding:0 16px calc(30px + env(safe-area-inset-bottom));
	overflow:visible;
	width:100%;
	box-sizing:border-box;
}
.factory_boosters .avatars_grid__avatar
{
	width:auto;
	max-width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
}
.factory_boosters .avatars_grid__avatar img
{
	width:100%;
	max-width:66px;
	height:auto;
}
.factory_boosters .avatars_grid__avatar .magic_power
{
	font-size:10px;
	text-align:center;
	line-height:1.15;
	opacity:.85;
}
.profiel_boosters
{
	padding:8px 0 2px;
}
.profiel_boosters__booster
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2px;
}
.profiel_boosters__booster img
{
	width:34px;
	height:34px;
}
.profiel_boosters__booster span
{
	font-size:10px;
	opacity:.8;
}

/* WP8b: in-game perk-rail (boven de grid) + tap-to-deploy overlay.
   Vervangt de oude .perk_bar__perk-tegels. Zelfde chrome-taal als de
   free-booster-balk: zwarte buitenrand, paarse binnenplaat, lint links. */
[id="perk_bar"]
{
	position:fixed;
	left:12px;
	right:12px;
	background:#000;
	border-radius:5px;
	padding:2px;
	box-sizing:border-box;
	z-index:2; /* onder de eindschermen/overlays */
}
body:not(.inGame) [id="perk_bar"],
body:not(.inGame) [id="perk_overlay"]
{
	display:none; /* nooit over de after-game schermen heen */
}
/* laatste perk verschoten: de rail heeft geen functie meer en glijdt — na een
   korte adempauze (perkRailSpend) — als een leeg magazijn het beeld uit */
[id="perk_bar"].wegglijden
{
	transition:transform .45s cubic-bezier(.55,0,.85,.36), opacity .45s ease-in;
	transform:translateX(-112%);
	opacity:.85;
	pointer-events:none;
}
/* het lint is de gespiegelde variant van .bonusWrapperInfo: vouw links,
   driehoekige inkeping rechts */
.perk_rail__ribbon
{
	position:absolute;
	z-index:9;
	inset:-14px auto auto -10px;
	padding:3px 46px 12px 24px;
	clip-path:
	polygon(100% 0,0 0,0 calc(100% - 10px),10px 100%,10px calc(100% - 10px),
		100% calc(100% - 10px),calc(100% - 5px) calc(50% - 5px));
	background:#00b7ff;
	box-shadow:0 -10px 0 inset #0005;
	font-family:headers;
	font-size:12px;
	text-shadow:0 1px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.perk_rail__ribbon.armed
{
	background:#00b7ff;
}
.perk_rail__ribbon.leeg
{
	background:#7a5a12; /* laatste perk verschoten */
}
.perk_rail__plate
{
	display:flex;
	align-items:stretch;
	gap:8px;
	position:relative;
	overflow:hidden;
	padding:16px 10px 10px;
	border-radius:5px;
	border:1px solid #c05fff;
	background: linear-gradient(to bottom, rgb(152 0 251) 0%,rgb(93 0 156) 100%);
}
.perk_rail__plate.armed
{
	border-color:#7fe6ff;
	box-shadow:0 0 22px #35d2ff77;
}
/* glans: ligt ONDER de cartridges (z-index 0) zodat de art schoon blijft */
.perk_rail__shine
{
	position:absolute;
	inset:0;
	z-index:0;
	overflow:hidden;
	border-radius:5px;
	pointer-events:none;
}
.perk_rail__shine:before
{
	content:'';
	position:absolute;
	left:0;
	right:0;
	top:0;
	height:42%;
	background:linear-gradient(to bottom, rgba(255,255,255,.24), rgba(255,255,255,0));
}
.perk_rail__shine:after
{
	content:'';
	position:absolute;
	inset:0;
	background:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, rgba(255,255,255,0) 2px 9px);
}
.perk_rail__bloom
{
	position:absolute;
	inset:0;
	background:radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.30), rgba(255,255,255,0) 62%);
	animation:railBloom 2.8s linear infinite;
}
.perk_rail__lip
{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:3px;
	background:linear-gradient(90deg, rgba(255,255,255,0), rgba(199,150,255,.6), rgba(255,255,255,0));
	animation:railLip 2.8s linear infinite;
}
.perk_rail__glint
{
	position:absolute;
	top:-35%;
	bottom:-35%;
	left:-60%;
	width:60%;
	transform:skewX(-24deg);
	animation:railGlint 2.8s linear infinite;
	will-change:transform;
	background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(180,235,255,.10) 40%, rgba(255,255,255,.28) 70%, rgba(255,255,255,0) 100%);
}
.perk_rail__glint:before
{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	right:22%;
	width:6px;
	background:rgba(255,255,255,.98);
	box-shadow:0 0 18px 6px rgba(255,255,255,.55);
}
.perk_rail__glint:after
{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	right:14%;
	width:3px;
	background:rgba(180,240,255,.9);
	box-shadow:0 0 16px 5px rgba(127,230,255,.5);
}
@keyframes railGlint
{
	0%        { transform:translateX(0) skewX(-24deg); }
	62%, 100% { transform:translateX(300%) skewX(-24deg); }
}
@keyframes railBloom
{
	0%, 16% { opacity:0; }
	34%     { opacity:1; }
	52%,100%{ opacity:0; }
}
@keyframes railLip
{
	0%       { opacity:.25; transform:translateX(-40%) scaleX(.5); }
	40%      { opacity:1;   transform:translateX(30%) scaleX(.9); }
	70%,100% { opacity:.25; transform:translateX(60%) scaleX(.5); }
}
/* Replay-viewer: zwevende play/pause/exit-balk bovenaan (i.p.v. onderaan zoals
   de perk-bar, om niet te overlappen met de perk-bar-positie/bonusbalk).
   body.replaying is een APARTE klasse van body.inGame (die laatste staat ook
   aan tijdens een replay, initGame() wordt hergebruikt) — dit voorkomt dat de
   balk ooit tijdens een ECHTE game zichtbaar zou zijn als de replay-opruiming
   ooit zou falen. */
[id="replay_controls"]
{
	position:fixed;
	left:50%;
	transform:translateX(-50%);
	/* gameheader zelf is env(safe-area-inset-top) + 4rem hoog (CubeRunnerz.css
	   ~2694/2705) — hier ONDER blijven, anders overlapt deze balk de FOCUS/SPEED/
	   AWARENESS-score-HUD die al in gameheader zit. */
	top:calc(4rem + env(safe-area-inset-top) + 10px);
	display:flex;
	align-items:center;
	gap:14px;
	padding:8px 16px;
	border-radius:30px;
	background:#000000cc;
	border:1px solid #ffffff33;
	z-index:5;
}
body:not(.replaying) [id="replay_controls"]
{
	display:none;
}
.replay_controls__avatar
{
	width:26px;
	height:26px;
	border-radius:100%;
	flex-shrink:0;
}
.replay_controls__label
{
	font-size:13px;
	letter-spacing:.5px;
	opacity:.85;
	white-space:nowrap;
}
.replay_controls__buttons
{
	display:flex;
	align-items:center;
	gap:10px;
}
[id="replay_controls"] [replay-action]
{
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}
/* spec: snelheidsknoppen 1×/½×/¼× — vertragen mag, versnellen bestaat niet */
.replay_controls__speed
{
	display:flex;
	align-items:center;
	gap:2px;
	margin-right:4px;
}
.replay_controls__speed [replay-action="speed"]
{
	font-size:13px;
	font-weight:bold;
	opacity:.45;
	padding:4px 6px;
	border-radius:6px;
	transition:opacity .2s, background .2s;
}
.replay_controls__speed [replay-action="speed"].actief
{
	opacity:1;
	color:#ffd76b;
	background:#ffffff1f;
}
/* de cartridge zelf; --accent komt per perk uit PERK_META (cubelegend.js) */
.perk_bar__perk
{
	position:relative;
	z-index:1;
	flex:1;
	display:flex;
	align-items:center;
	gap:9px;
	min-width:0;
	padding:8px 9px;
	border-radius:8px;
	border:1px solid var(--accent, #c19eff);
	background:linear-gradient(160deg, #2a1548 0%, #12081f 100%);
	box-shadow:0 0 14px var(--glow, #6631c388), inset 0 2px 4px #ffffff22;
	transition:transform .15s ease, box-shadow .15s ease, opacity .2s;
}
.perk_bar__perk:active
{
	transform:scale(.97);
}
/* eén perk in de rail: meer ruimte voor art en tekst, maar de cartridge rekt
   NIET edge-to-edge uit — gecentreerd met een vaste maximumbreedte, zodat de
   plaat rondom ademruimte houdt */
[id="perk_bar"].solo .perk_rail__plate
{
	justify-content:center;
}
[id="perk_bar"].solo .perk_bar__perk
{
	flex:0 1 340px;
	box-sizing:border-box; /* basis mét padding/rand — anders rekt hij naar 360px */
}
[id="perk_bar"].solo .perk_bar__perk img
{
	width:52px;
	height:52px;
}
[id="perk_bar"].solo .perk_bar__perk__naam
{
	font-size:16px;
}
.perk_bar__perk__art
{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}
.perk_bar__perk__tekst
{
	display:flex;
	flex-direction:column;
	gap:3px;
	min-width:0;
	flex:1;
	text-align:left; /* de app centreert tekst globaal — naam/uitleg horen
	                    tegen de art aan te liggen (design 3a/3b), niet los
	                    zwevend in het midden van een brede cartridge */
}
.perk_bar__perk__naam
{
	font-family:headers;
	font-size:13px;
	color:var(--accent, #c19eff);
}
.perk_bar__perk__uitleg
{
	font-family:p;
	font-size:9px;
	color:#ffffffa8;
}
.perk_bar__perk__targeted
{
	font-family:p;
	font-size:8px;
	letter-spacing:1px;
	color:var(--accent, #c19eff);
}
.perk_bar__perk__pips
{
	display:flex;
	gap:3px;
}
.perk_bar__perk__pips span
{
	width:16px;
	height:4px;
	border-radius:2px;
	background:#ffffff2e;
}
.perk_bar__perk__pips span.vol
{
	background:var(--accent, #c19eff);
}
.perk_bar__perk__count
{
	position:absolute;
	right:-6px;
	bottom:-4px;
	min-width:20px;
	height:20px;
	padding:0 4px;
	box-sizing:border-box;
	border-radius:10px;
	background:#000;
	border:1px solid var(--accent, #c19eff);
	font-family:headers;
	font-size:12px;
	color:var(--accent, #c19eff);
	display:flex;
	align-items:center;
	justify-content:center;
}
.perk_bar__perk__halo
{
	position:absolute;
	width:46px;
	height:46px;
	border-radius:100%;
	background:radial-gradient(circle, var(--glow, #6631c388) 0%, transparent 70%);
	animation:haloBreathe 2.4s ease-in-out infinite;
	pointer-events:none;
}
@keyframes haloBreathe
{
	0%, 100% { opacity:.35; transform:scale(.92); }
	50%      { opacity:.9;  transform:scale(1.08); }
}
/* gewapend: cartridge komt omhoog, rest dimt */
.perk_bar__perk.armed
{
	border-width:2px;
	border-color:#7fe6ff;
	background:linear-gradient(160deg, #0f3550 0%, #071726 100%);
	box-shadow:0 0 22px #35d2ffbb, inset 0 2px 4px #ffffff33;
	animation:armedLift 1.4s ease-in-out infinite;
}
.perk_bar__perk.dimmed
{
	opacity:.4;
	filter:grayscale(.5);
}
@keyframes armedLift
{
	0%, 100% { transform:translateY(-6px) scale(1.04); }
	50%      { transform:translateY(-11px) scale(1.08); }
}
/* gratie-timer op de gewapende cartridge: loopt lineair leeg over de tijd
   die de inzet nog heeft om de lopende streak te redden (perkGrace) */
.perk_bar__perk__gratie
{
	position:absolute;
	left:8px;
	right:8px;
	bottom:3px;
	height:3px;
	border-radius:2px;
	background:#ffffff2e;
	overflow:hidden;
	pointer-events:none;
}
.perk_bar__perk__gratie i
{
	display:block;
	height:100%;
	border-radius:2px;
	background:linear-gradient(90deg, #ff5c5c, #ffd76b 35%, #7fe6ff);
	transform:scaleX(1);
	transform-origin:left;
	transition:transform 0ms linear;
}
/* verschoten (eigenaar, 8 nov 2026): de cartridge krimpt weg en verdwijnt
   uit de rail — geen SPENT-staat meer (perkRailSpend) */
.perk_bar__perk.weg
{
	opacity:0;
	transform:scale(.86);
	transition:opacity .2s ease, transform .22s ease;
	pointer-events:none;
}
/* WP6: MP-tekort — bar flitst en toont het +100 MP-potentieel van de factory pass */
.m_remaining_power .bonusBarWrapper.mp-tekort .bonusBar
{
	background:#d33 !important;
	animation: mpTekortFlits .4s ease-in-out 3;
}
.m_remaining_power .bonusBarWrapper.mp-tekort:after
{
	content:'+100 MP with factory pass';
	position:absolute;
	right:4px;
	top:50%;
	transform:translateY(-50%);
	font-size:10px;
	color:#ffd76b;
	text-shadow:0 1px #000;
	pointer-events:none;
}
@keyframes mpTekortFlits
{
	50% { opacity:.35; }
}
/* Onthouden loadout (eigenaar, 8 nov 2026): wat van de vorige keuze niet meer
   gezet kon worden, net boven de MP-regel en dus in beide tabs zichtbaar.
   Rood mag hier: dit is geen disciplinecontext (CLAUDE.md, regel 2) */
.m_loadout_meldingen
{
	display:flex;
	flex-direction:column;
	gap:6px;
	width:88%;
	margin:10px auto 0;
}
.m_loadout_melding
{
	display:flex;
	align-items:center;
	gap:10px;
	padding:8px 10px;
	border-radius:12px;
	background:#2a0614b8;
	border:1.5px solid #ff5c6a8c;
	box-shadow:inset 0 2px 6px #00000080;
	text-align:left;
	animation:loadoutMeldingIn .35s ease-out both;
}
.m_loadout_iconen
{
	display:flex;
	gap:4px;
	flex:0 0 auto;
}
.m_loadout_item
{
	position:relative;
	width:30px;
	height:30px;
}
.m_loadout_item img
{
	width:100%;
	height:100%;
	object-fit:contain;
	filter:grayscale(.55) brightness(.9);
}
.m_loadout_item b
{
	position:absolute;
	right:-5px;
	bottom:-4px;
	font-size:10px;
	line-height:14px;
	padding:0 3px;
	border-radius:7px;
	background:#ff2d3b;
	color:#fff;
}
.m_loadout_tekst
{
	flex:1 1 auto;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:2px;
}
.m_loadout_tekst b
{
	font-family:headers;
	font-size:12px;
	letter-spacing:.4px;
	color:#ff9aa4;
}
.m_loadout_tekst span
{
	font-size:12px;
	line-height:15px;
	color:#ffffffd0;
}
.m_loadout_actie
{
	flex:0 0 auto;
	font-family:headers;
	font-size:11px;
	color:#fff;
	padding:7px 9px;
	border-radius:9px;
	background:#ffffff1a;
	border:1px solid #ffffff40;
	white-space:nowrap;
}
@keyframes loadoutMeldingIn
{
	from { opacity:0; transform:translateY(6px); }
}
.perk_bar__perk img
{
	width:44px;
	height:44px;
	pointer-events:none;
}
/* fuel-extender ingezet: "+20"-popje onder de teller rechtsboven */
.extender_pop
{
	position:fixed;
	transform:translateX(-50%);
	font-family:headers;
	font-size:22px;
	color:#7CFC00;
	text-shadow:0 2px black, 0 -1px black, 1px 0 black, -1px 0 black;
	pointer-events:none;
	z-index:50;
	animation:extenderPop 1.4s ease-out forwards;
}
@keyframes extenderPop
{
	0%   { opacity:0; margin-top:6px; }
	15%  { opacity:1; }
	100% { opacity:0; margin-top:26px; }
}
/* tap-to-deploy: dim over het bord, kop boven de grid, reticle op het doel */
[id="perk_overlay"]
{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.66);
	z-index:1;
	pointer-events:none;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	padding-top:14vh;
	text-align:center;
	color:#fff;
	text-shadow:0 1px #000;
	animation:overlayBreathe 2.2s ease-in-out infinite;
}
[id="perk_overlay"] p
{
	font-family:headers;
	font-size:24px;
	margin:0 0 6px;
	text-shadow:0 2px #000, 0 0 18px #35d2ff;
}
[id="perk_overlay"] span
{
	font-family:p;
	font-size:11px;
	opacity:.85;
	max-width:70vw;
}
@keyframes overlayBreathe
{
	0%, 100% { opacity:.75; }
	50%      { opacity:1; }
}
.perk_reticle
{
	position:fixed;
	width:51px;
	height:51px;
	z-index:2;
	pointer-events:none;
}
.perk_reticle:before
{
	content:'';
	position:absolute;
	inset:0;
	border:2px solid #7fe6ff;
	border-radius:6px;
	box-shadow:0 0 16px #35d2ffcc, inset 0 0 12px #35d2ff88;
	animation:reticle 1.1s ease-in-out infinite;
}
.perk_reticle:after
{
	content:'';
	position:absolute;
	inset:9px;
	border:2px dashed #ffffffcc;
	border-radius:100%;
	animation:reticleSpin 6s linear infinite;
}
@keyframes reticle
{
	0%, 100% { transform:scale(.88); opacity:.7; }
	50%      { transform:scale(1.06); opacity:1; }
}
@keyframes reticleSpin
{
	to { transform:rotate(360deg); }
}
/* focus-score pop op de inslagplek (perk-deploys én nieuwe beste focus-tap) */
.perk_focus_pop
{
	position:fixed;
	z-index:50;
	text-align:center;
	pointer-events:none;
}
.perk_focus_pop b
{
	display:block;
	font-family:headers;
	font-weight:normal;
	font-size:38px;
	line-height:1;
	color:var(--pop-tekst, #b6ff5a);
	text-shadow:0 3px black, 0 -2px black, 2px 0 black, -2px 0 black, 0 6px 0 var(--pop-diep, #2f7a00), 0 0 26px var(--pop-gloed-cc, #7CFC00cc);
	animation:scorePop 2s cubic-bezier(.16,.94,.2,1) forwards;
}
.perk_focus_pop i
{
	display:block;
	margin-top:3px;
	font-family:p;
	font-style:normal;
	font-size:11px;
	letter-spacing:3px;
	color:var(--pop-licht, #d9ffb8);
	text-shadow:0 1px #000;
	animation:scoreTag 2s ease-out forwards;
}
.perk_focus_pop u
{
	position:absolute;
	left:50%;
	top:60%;
	width:150px;
	height:150px;
	margin:-75px 0 0 -75px;
	border-radius:100%;
	border:2px solid var(--pop-gloed-a8, #7CFC00a8);
	box-shadow:0 0 26px var(--pop-gloed-66, #7CFC0066), inset 0 0 26px var(--pop-gloed-40, #7CFC0040);
	animation:scoreBurst 2s ease-out forwards;
}
/* extra lagen uit het design (2a FIRED): tweede ring, witte kernflits, vonken */
.perk_focus_pop__ring2
{
	position:absolute;
	left:50%;
	top:60%;
	width:110px;
	height:110px;
	margin:-55px 0 0 -55px;
	border-radius:100%;
	border:1px solid #ffffff8a;
	opacity:0;
	animation:scoreBurst 2s ease-out .14s forwards;
}
.perk_focus_pop__kern
{
	position:absolute;
	left:50%;
	top:56%;
	width:96px;
	height:96px;
	margin:-48px 0 0 -48px;
	border-radius:100%;
	background:radial-gradient(circle, #ffffffcc 0%, transparent 60%);
	opacity:0;
	animation:scoreFlashBg 2s ease-out forwards;
}
.perk_focus_pop__vonk
{
	position:absolute;
	top:22px;
	width:5px;
	height:5px;
	border-radius:100%;
	background:var(--pop-licht, #d9ffb8);
	box-shadow:0 0 8px var(--pop-gloed, #7CFC00);
	opacity:0;
	animation:sparkFly 2s ease-out forwards;
}
.perk_focus_pop__vonk:nth-of-type(2)
{
	background:var(--pop-gloed, #7CFC00);
	animation-delay:.22s;
}
.perk_focus_pop__vonk:nth-of-type(3)
{
	background:#ffffff;
	animation-delay:.42s;
}
@keyframes scoreFlashBg
{
	0%       { opacity:0; transform:scale(.2); }
	8%       { opacity:.85; }
	30%,100% { opacity:0; transform:scale(1.15); }
}
@keyframes sparkFly
{
	0%   { opacity:0; transform:translate(0,10px) scale(.4); }
	15%  { opacity:1; }
	100% { opacity:0; transform:translate(0,-52px) scale(.2); }
}
/* de SCORE-teller in de gameheader flitst groen mee met de pop */
[id="valueScore"].scoreflits
{
	animation:scoreFlash .95s ease-out 2;
}
@keyframes scoreFlash
{
	0%, 100% { color:#7CFC00; }
	40%      { color:#eaffdb; text-shadow:0 0 16px #7CFC00cc; }
}
@keyframes scorePop
{
	0%   { opacity:0; transform:translateY(22px) scale(.4, .7); filter:blur(4px); }
	10%  { opacity:1; transform:translateY(4px) scale(1.42, .86); filter:blur(0); }
	20%  { transform:translateY(0) scale(.9, 1.16); }
	30%  { transform:translateY(0) scale(1.06, .96); }
	40%  { transform:translateY(-4px) scale(1); }
	72%  { opacity:1; transform:translateY(-18px) scale(1); }
	100% { opacity:0; transform:translateY(-52px) scale(1.04); }
}
@keyframes scoreTag
{
	0%, 8% { opacity:0; transform:translateY(6px); }
	22%    { opacity:1; transform:translateY(0); }
	70%    { opacity:.9; transform:translateY(-14px); }
	100%   { opacity:0; transform:translateY(-40px); }
}
@keyframes scoreBurst
{
	0%       { opacity:0; transform:scale(.15); }
	12%      { opacity:.95; }
	70%,100% { opacity:0; transform:scale(1); }
}

.m_slot img
{
	width: 90%;
	height: 90%;
}
.btn-dock.btn-dock-active .tripple-badge
{
	display:none;
}
.tripple-badge
{
	
	position:absolute;
	top:0;
	gap:7px;
}
.boolean-badge
{
	width:5px;
	height:5px;
	background: #5d5d5d;
	border-radius:100%;
}

.boolean-badge.inactive,
.boolean-badge.demotion
{
	background:#ff0000;
}
.boolean-badge.promo 
{
	background: #5cff00;
}
.general_block
{
    background: #11004c80;
    border: 1px solid #11004c;
    width:100%;
    border-radius: 5px;
}
.league-day-cursor
{
	align-items:center;
	justify-content:space-between;
	min-width:100%;
	gap:10px
}
.free-button-active,
.free-button-inactive 
{
	width: 55px;
	height: 55px;
	display: flex;
	align-items: center;
	position:relative;
	justify-content: center;
}
.free-button-active
{
	color:#ffa144;
	border-top:none;
}
.free-button-inactive
{
	opacity:.25
}
.day_cd 
{
	background: #ff7c0e;
	text-shadow: 0 1px black;
	padding: 0 10px;
	margin-left: 5px;
	border-radius: 20px;
	display: inline-block;
	width: auto;
}
.eliminated_cube
{
	position:relative;
	padding:15px 0;
}
.eliminated_cube img 
{
	height:80px;
	width:80px;
}
.eliminated_cube span
{
	background: #fe7c14;
	border: 1px solid;
	width:30px;
	color: #fff !important;
	text-shadow: 0 1px BLACK;
	box-shadow:0 0px 25px black;
	height:30px;
	border-radius:100%;
	right:0;
	top:5px;
	display:flex;
	animation:bounce 3s infinite;
	align-items:center;
	justify-content:center;
	position:absolute;
}
.gamepop_wrapper [data-action="stop"],
.gamepop_wrapper [data-action="start"],
.gamepop_wrapper .tns-controls,


.custom_tns [data-action="stop"],
.custom_tns [data-action="start"],
.custom_tns .tns-controls
{
	display:none;
}
.gamepop_wrapper .tns-outer,
.custom_tns .tns-outer
{
	position:relative;
}
.gamepop_wrapper .tns-nav,
.custom_tns .tns-nav
{
	gap: 5px;
	flex-wrap: wrap;
	padding:0;
	position:absolute;
	display:flex;
	left: 50%;
	top: -15px;
	transform: translateX(-50%);
	align-items:center;
	justify-content:center;
}

.custom_tns .tns-nav
{
	top:20px !important;
}
.gamepop_wrapper .tns-nav button ,
.custom_tns .tns-nav button 
{
	width:7px;
	height:7px;
	background:#ffffff2b;
	border:none;
	min-height:5px;
	padding: 0;
	transition:.5s;
}
.gamepop_wrapper button.tns-nav-active,
.custom_tns button.tns-nav-active
{
	background:#ff7e15;
}
.custom_tns button.tns-nav-active
{
	background:radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
	
}
.tap_overview_detail
{
	background:#4f357a;
	border-radius:5px;
	display: flex;
	justify-content:space-between;
	align-items:space-between;
	padding:10px;
}
.tap_overview_detail div 
{
	display: flex;
	flex-direction:column;
	height:100%;
	align-items:center;
	
	
}

.tap_overview_detail div h3 
{
	margin:0;
	margin-bottom:5px;
	font-size: 20px;
	font-family: 'font3' !important;
}
.tap_overview_detail span 
{
	opacity: .3;
	font-size:12px;
}
.tap_overview h2 
{
	margin-bottom: 7px;
	font-size:18px;
	display:flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 5px;
	align-items: center;
	padding-right: 1px;
	position: relative;
}
[tabcontent="details"] .tns-nav
{
	display:none;
}
#taps_overview_wrapper
{
	height:-webkit-fill-available;
	overflow: auto;
}
.tap_overview .tap_nr:before
{
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="15" height="15" viewBox="0 0 26 26"%3E%3Cpath fill="hsl(122.42deg 100% 50%)" d="m22.567 4.73l-1.795-1.219a1.09 1.09 0 0 0-1.507.287l-8.787 12.959l-4.039-4.039a1.09 1.09 0 0 0-1.533 0l-1.533 1.536a1.084 1.084 0 0 0 0 1.534L9.582 22c.349.347.895.615 1.387.615s.988-.31 1.307-.774l10.58-15.606a1.085 1.085 0 0 0-.289-1.505z"%2F%3E%3C%2Fsvg%3E');
	margin-right:4px;
}
.tap_overview .tap_nr.miss_tap:before
{
	content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="15" height="15" viewBox="0 0 1216 1312"%3E%3Cpath fill="hsl(4.11deg 100% 50%)" d="M1202 1066q0 40-28 68l-136 136q-28 28-68 28t-68-28L608 976l-294 294q-28 28-68 28t-68-28L42 1134q-28-28-28-68t28-68l294-294L42 410q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294l294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68L880 704l294 294q28 28 28 68z"%2F%3E%3C%2Fsvg%3E');
		margin-right:4px;
}
.tap_overview h2:nth-child(2)
{
	font-size:15px;
}
.tap_overview h2:nth-child(2) div
{
    background: #8403d5;
	border-radius:5px;
	color:#fff;
	display:flex;
	align-items:center;
	padding:2px 5px 0px 5px;
}

.tap_multipliera:before
{
	margin-right:4px;
	
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" viewBox="0 0 512 512"%3E%3Cpath fill="white" d="M166 121c0 90 90 105 90 180c0 30-30 75-75 75s-75-45-45-120c-45 30-60 60-60 90c0 75 75 150 180 150s180-45 180-135c.67-133.125-153.4-177.596-195-240c-30-45-15-75 15-105c-60 15-90 57-90 105z"%2F%3E%3C%2Fsvg%3E')
}

.tap_multiplierb:before
{
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" viewBox="0 0 512 512"%3E%3Cpath fill="white" d="M294.516 25.71C180.128 26.863-4.977 170.06 93.084 346.96l37.771-37.77l3.333-3.333C83.773 134.282 237.561 38.977 324.773 29.287c-8.483-2.313-17.749-3.481-27.568-3.576a136.22 136.22 0 0 0-2.69 0zm9.365 68.081c-26.796-.226-53.08 9.468-72.885 29.273c-22.421 22.478-24.678 64.162-4.935 83.905l-69.098 49.357l98.71 98.711l49.358-69.098c19.743 19.743 61.425 17.532 83.905-4.935C429.823 240.116 427.614 171.614 384 128c-22.488-22.488-51.594-33.969-80.12-34.209zm-42.744 39.766c12.123.02 26.301 10.85 31.554 21.59c7.372 15.071 3.104 38.718-9.87 49.355c-10.18 8.344-30.862 9.943-39.485 0c-15.244-17.577-10.738-58.3 9.871-69.098c2.444-1.28 5.132-1.852 7.93-1.847zm221.576 53.67c-9.69 87.21-104.995 241-276.57 190.585l-41.104 41.104c193.631 107.335 346.882-124.591 317.674-231.69zm-143.565 28.486c6.331-.098 12.525 1.062 17.706 3.596c13.218 6.465 26.571 26.45 19.742 39.484c-10.798 20.61-51.521 25.115-69.098 9.871c-9.943-8.623-8.344-29.306 0-39.484c6.98-8.515 19.564-13.28 31.65-13.467zm-43.988 1.127l-19.744 39.486l-19.742-19.742zm-85.334 13.379l12.727 12.728l-3.506 3.506l16.885 16.887l3.507-3.508l12.729 12.729l-3.508 3.507l16.887 16.885l3.506-3.506l12.728 12.727l-29.613 29.613l-12.729-12.726l13.38-13.38l-16.887-16.886l-13.38 13.379l-12.726-12.727l13.38-13.379l-16.888-16.886l-13.379 13.379l-12.726-12.729zm-42.994 68.449l-16.885 16.885l46.5 46.5l16.885-16.887zm-29.611 29.613L18 447.502v33.771l136.105-136.105zm29.611 29.614L30.727 494H64.5l119.219-119.219z"%2F%3E%3C%2Fsvg%3E');
	margin-right:4px;
}
.tap_multiplierc:before
{
	margin-right:4px;
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" viewBox="0 0 64 64"%3E%3Cpath fill="white" d="M61.338 41.881c-1.663-3.873-5.663-4.015-11.069-3.241c.041-9.028 1.562-17.65 4.452-27.072c1.344-3.374-8.67-9.501-22.72-9.567c-14.05.066-24.065 6.192-22.721 9.566c2.873 9.365 4.384 18.047 4.438 27.07c-5.399-.771-9.394-.627-11.057 3.243C-.961 49.077 10.487 62 32 62c21.514 0 32.961-12.923 29.338-20.119m-48.856 5.962s1.357-4.745 1.14-7.254c11.804 10.624 24.954 10.624 36.757 0c.045 2.56 1.139 7.254 1.139 7.254c-11.62 11.057-27.415 11.057-39.036 0"%2F%3E%3C%2Fsvg%3E')

}
.tap_multiplierd:before
{
	margin-right:4px;
	content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" viewBox="0 0 512 512"%3E%3Cpath fill="white" d="M156.6 384.9L125.7 354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9 7-20.5 11.8-33.8H24c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7.2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3H200c2.4-4 4.8-7.7 7.2-11.3C289.1-4.1 411.1-8.1 483.9 5.3c11.6 2.1 20.6 11.2 22.8 22.8c13.4 72.9 9.3 194.8-111.4 276.7c-3.5 2.4-7.3 4.8-11.3 7.2v82.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1.2S224 496.7 224 488V380.8c-14.1 4.9-26.4 8.9-35.7 11.9c-11.2 3.6-23.4.5-31.8-7.8zM384 168a40 40 0 1 0 0-80a40 40 0 1 0 0 80z"%2F%3E%3C%2Fsvg%3E')
}
.tap_multipliere:before
{
	margin-right:4px;
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" viewBox="0 0 1200 1200"%3E%3Cpath fill="white" d="M600 0C308.74 0 66.009 207.555 11.499 482.812h166.553C229.37 297.756 398.603 161.719 600 161.719c121.069 0 230.474 49.195 309.668 128.613l-192.48 192.48H1200V0l-175.781 175.781C915.653 67.181 765.698 0 600 0zM0 717.188V1200l175.781-175.781C284.346 1132.819 434.302 1200 600 1200c291.26 0 533.991-207.555 588.501-482.812h-166.553C970.631 902.243 801.396 1038.281 600 1038.281c-121.069 0-230.474-49.195-309.668-128.613l192.48-192.48H0z"%2F%3E%3C%2Fsvg%3E')


}
.tap_cubes_summary
{
	display:flex;
	align-items:center;
	gap:8px;
	flex-wrap:wrap;
	padding:10px 0;
	border-bottom:1px solid #673AB7;
}

.tap_cubes_summary div 
{
	display:flex;
	align-items:center;
	gap:4px;
	
}
.tap_cubes_summary img 
{
	width:15px;
	height:15px;
}
.tap_nr
{
	white-space:nowrap;
	margin-bottom:auto;
	font-size: 22px;
	font-family: 'headers';
}
/* ── Coach-tutorial: overlay ──────────────────────────────────────────────
   Eén persistente overlay per walkthrough: vier dim-panelen rond een
   spotlight-uitsnede plus een COMPACTE callout-kaart die naast het doel wordt
   vastgepind, met een pijltje erin. De mascotte + schuine tekstwolk uit de
   eerste versie zijn vervallen (design/Tutorial/Adventure Map Coach.dc.html):
   de kaart dekte het doel af en moest op negen schermen dezelfde vorm krijgen.
   Alle maten (kaartpositie, pijl, spotlight-radius) worden in JS gemeten en
   inline gezet — hier staat enkel de vorm.                                  */
.campaign_story_telling
{
	--coach-dim: rgba(8,2,20,.78);
	left:0;
	top:0;
	position:fixed;
	width:100vw;
	height:100vh;
	height: var(--vh100);
	height:var(--vh100);
	box-sizing: border-box;
	/* boven ALLES van het scherm eronder. Losse hoge z-indexen die anders door
	   de dim heen prikken: .tierUnlockRequirements (55555555, campaign-map, en
	   .campaignmap maakt géén stacking context), .loader .loadicon (999999),
	   #gamerprofile .tabs-parent (9999) en de iziToast-laag (99999). */
	z-index: 999999999;
	opacity:0;
	pointer-events:none;
	transition: opacity .45s ease;
}
.campaign_story_telling.active
{
	opacity:1;
	pointer-events:auto;
}

/* ── dim-panelen rond de uitsnede ──
   vier gewone divs i.p.v. één 200vmax-box-shadow: zulke enorme shadow-spreads
   worden door iOS/Blink afgekapt waardoor schermranden ongedimd bleven */
.coach_dim
{
	position:fixed;
	z-index:1;
	background: var(--coach-dim);
	pointer-events:none;
	transition: all .55s cubic-bezier(.5,.15,.2,1);
}
/* hoekwiggen van de uitsnede: de panelen sparen een rechthoek uit, de wiggen
   dimmen wat buiten de afgeronde hoek valt (gradient + maat uit coachZetHoeken) */
.coach_hoek
{
	position:fixed;
	z-index:1;
	pointer-events:none;
	transition: left .55s cubic-bezier(.5,.15,.2,1), top .55s cubic-bezier(.5,.15,.2,1),
	            width .55s cubic-bezier(.5,.15,.2,1), height .55s cubic-bezier(.5,.15,.2,1);
}

/* ── spotlight-uitsnede (enkel de rand + pulsring) ──
   border-radius wordt per stap uit getComputedStyle van het DOEL gekopieerd
   (alle vier de hoeken, ook asymmetrische zoals .time_remaining) — een vaste
   radius gaf een blokkige ring om een ronde avatar of een pil-knop. */
.coach_spotlight
{
	position:fixed;
	z-index:2;
	pointer-events:none;
	outline: 3px solid #FF9800;
	outline-offset: 2px;
	transition: all .55s cubic-bezier(.5,.15,.2,1), opacity .3s ease;
}
.coach_spotlight.off
{
	opacity:0;
}
.coach_spotlight:after
{
	content:'';
	position:absolute;
	inset:-3px;
	border-radius:inherit;
	border:3px solid #FFC46B;
	animation: coachPulse 1.6s ease-out infinite;
}
@keyframes coachPulse
{
	0%   { transform: scale(1);    opacity:.9; }
	70%  { transform: scale(1.14); opacity:0;  }
	100% { transform: scale(1.14); opacity:0;  }
}

/* ── callout-kaart ──
   vaste breedte zodat de typewriter-hoogtemeting klopt; left/top komen uit
   coachRepositionSpot() en glijden mee wanneer de spotlight verspringt */
.coach_card
{
	position:fixed;
	z-index:4;
	width: min(300px, calc(100vw - 28px));
	max-height: calc(var(--vh100) - 24px);
	overflow-y:auto;
	box-sizing:border-box;
	padding:12px 14px 11px;
	border-radius:12px;
	text-align:left;
	background: linear-gradient(1deg, rgba(88,0,147,1) 0%, rgba(154,0,255,1) 100%);
	border:2px solid #ffffff5c;
	box-shadow: 0 12px 28px #000000b3;
	transition: left .45s cubic-bezier(.34,1.2,.64,1),
	            top  .45s cubic-bezier(.34,1.2,.64,1),
	            opacity .22s ease, transform .22s ease;
}
.campaign_story_telling:not(.active) .coach_card
{
	opacity:0;
	transform: scale(.94);
}
/* korte inhouds-wissel tussen stappen (terwijl de spotlight glijdt): kaart,
   mascotte-pose en scene-band faden samen uit, anders staat de nieuwe pose een
   frame lang nog op de plek van de oude kaart */
.campaign_story_telling.coach_wissel .coach_card,
.campaign_story_telling.coach_wissel .coach_scene,
.campaign_story_telling.coach_wissel .coach_mascotte
{
	opacity:0;
}
.coach_card.coach_nudge
{
	animation: coachNudge .4s ease;
}
@keyframes coachNudge
{
	0%,100% { transform: translateX(0); }
	25%     { transform: translateX(-8px); }
	65%     { transform: translateX(8px); }
}
/* De coach zelf gebruikt deze twee niet meer (de mascotte is vervallen), maar
   de PvP-rank-trofee en de league-badges bobben en poppen er nog op — laten
   staan, anders bevriezen die animaties. */
@keyframes coachBob
{
	0%,100% { transform: translateY(0); }
	50%     { transform: translateY(-7px); }
}
@keyframes coachPop
{
	0%   { transform: scale(.72); }
	60%  { transform: scale(1.07); }
	100% { transform: scale(1); }
}
/* tijdens scrollen/roteren volgt alles het doel per frame: transitions dan
   uit, anders loopt de spotlight zichtbaar achter op het element */
.campaign_story_telling.coach_snap .coach_dim,
.campaign_story_telling.coach_snap .coach_hoek,
.campaign_story_telling.coach_snap .coach_spotlight,
.campaign_story_telling.coach_snap .coach_arrow,
.campaign_story_telling.coach_snap .coach_card,
.campaign_story_telling.coach_snap .coach_mascotte
{
	transition:none !important;
}

/* ── paginakop van een dashboardview ──
   Twee kolommen: links de titel met de knop eronder, rechts de mascotte die
   over de VOLLE hoogte van allebei staat.

       ┌──────────────────────────────┬────────┐
       │ CLASSIC 2026            [i]  │  (?)   │
       ├──────────────────────────────┤ MASCOT │
       │ [   WEEKLY REWARDS       ]   │        │
       └──────────────────────────────┴────────┘

   Twee dingen zijn hiermee opgelost. De knop deelde eerst één rij met de
   titel terwijl hij width:100% is — hij werd platgeknepen; nu krijgt hij de
   volle breedte van z'n kolom. En de gidsknop was een frommeltje naast de
   titel; over de volle hoogte is de pose echt artwork.                       */
/* Twee klassen diep (0,2,0): cubelegend-pvp.css laadt NA dit bestand en zet
   .pvp_champ_kop terug op een flex-row met space-between. Specificiteit wint
   dat terug zonder van laadvolgorde af te hangen. */
.context_header.pagina_kop
{
	display:flex;
	flex-direction:row;
	align-items:stretch;
	gap:10px;
	justify-content:flex-start !important;
}
.pagina_kop__kolom
{
	flex:1 1 auto;
	min-width:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:8px;
}
.pagina_kop__titel
{
	display:flex;
	align-items:center;
	gap:10px;
	width:100%;
	min-width:0;
}
.pagina_kop__knoppen
{
	width:100%;
	min-width:0;
}
/* Ook hier twee klassen diep: .pvp_champ_kop h3 (cubelegend-pvp.css, laadt
   later) zet white-space:nowrap en zou de titel de kolom uit duwen. */
.pagina_kop .pagina_kop__titel h3
{
	min-width:0;
	flex:1 1 auto;
	white-space:normal;
}

/* ── gidsknop: de mascotte met een zwevend vraagteken ──
   Vult de hele rechterkolom. De pose staat op z'n voeten onderaan uitgelijnd
   (object-position) zodat hij op de knop lijkt te staan in plaats van te
   zweven, en het vraagteken hangt rechtsboven naast z'n hoofd. */
.pagina_kop__gids
{
	position:relative;
	flex:0 0 auto;
	align-self:stretch;
	width:156px;
	/* De pose is object-fit:contain, dus z'n grootte volgt de KLEINSTE maat van
	   het vak. Alleen breder maken doet dus niets — de hoogte moet mee. Deze
	   min-height trekt de hele kop wat hoger op, en dat is precies de bedoeling:
	   het artwork mag hier het zwaarste element van de kop zijn. */
	min-height:168px;
	cursor:pointer;
	transition: transform .15s ease;
}
.pagina_kop__gids:active
{
	transform:scale(.93);
}
.pagina_kop__gids img
{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	top:0;
	width:100%;
	height:100%;
	object-fit:contain;
	object-position: bottom center;
	filter: drop-shadow(0 3px 6px #000000a8);
	pointer-events:none;
}
/* Het vraagteken hangt bij de OPGESTOKEN HAND van de pose, niet in de verre
   hoek van het vak — zo leest het als iets wat hij vasthoudt in plaats van als
   een los badge-je. De pose staat onderaan gecentreerd in een 156x168-vak en
   is vierkant, dus hij vult 156x156 vanaf y=12; de vinger zit rond 27% breed
   en 25% hoog. Daar net links-boven van. */
.pagina_kop__gids span
{
	position:absolute;
	/* Gemeten aan de alpha van de pose: z'n LINKERhand (rechts in beeld)
	   begint in dit 156x168-vak op (137, 88). Het vraagteken zweeft daar vlak
	   boven, zodat het leest als iets wat hij omhoog houdt. */
	left:120px;
	top:56px;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
	width:24px;
	height:24px;
	border-radius:50%;
	background:#FF9800;
	border:2px solid #2a0040;
	color:#2a0040;
	font-family:'headers';
	font-size:14px;
	line-height:1;
	box-shadow:0 2px 5px #00000099;
	animation: coachBob 2.4s ease-in-out infinite;
	pointer-events:none;
}

/* ── mascotte-pose (design/Tutorial V2) ──
   Bewust een BROERTJE van de kaart en geen kind: .coach_card heeft
   overflow-y:auto als vangnet voor een extreem lange stap, en dat zou de pose
   die er half naast hangt wegknippen. left/top/afmeting komen per stap uit
   coachZetMascotte(); die zorgt dat de pose de kaart én de uitsnede vrijlaat. */
.coach_mascotte
{
	position:fixed;
	z-index:6;
	pointer-events:none;
	background-repeat:no-repeat;
	background-size:contain;
	filter: drop-shadow(0 6px 14px #000000a8);
	transition: left .45s cubic-bezier(.34,1.2,.64,1),
	            top  .45s cubic-bezier(.34,1.2,.64,1),
	            opacity .22s ease;
}
/* geen pose op deze stap (scene-band, of geen art opgegeven) */
.coach_mascotte.off
{
	display:none;
}
/* wél een pose, maar geen enkele maat past naast de kaart zonder de uitsnede
   te dekken — dan liever niets dan een pose over het doel heen */
.coach_mascotte.geen_plek
{
	opacity:0;
}

/* ── schermbrede scene-band ──
   Alleen op de hub-stappen die naar een BESTEMMING wijzen: de art plakt tegen
   de boven- of onderrand en bevat de mascotte al. Hoogte zet
   coachRepositionSpot() (vierkant in het ontwerp, geknepen op korte schermen). */
.coach_scene
{
	position:fixed;
	left:0;
	right:0;
	top:0;
	z-index:3;
	pointer-events:none;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	filter: drop-shadow(0 12px 22px #000000c4);
	transition: opacity .22s ease;
}
.coach_scene.onder
{
	top:auto;
	bottom:0;
	filter: drop-shadow(0 -12px 22px #000000c4);
}
.coach_scene.off
{
	display:none;
}

/* pijltje van de kaart naar het doel — enkel zichtbaar wanneer de kaart het
   doel écht raakt (bij een geklemde positie is er geen lijn om te wijzen).
   Bewust een BROERTJE van de kaart en niet een kind: .coach_card heeft
   overflow-y:auto als vangnet voor een extreem lange stap, en dat knipte het
   uitstekende puntje er precies af. Het staat vóór de kaart in de DOM, dus de
   helft die ónder de kaart hoort te vallen wordt netjes afgedekt. */
.coach_arrow
{
	position:fixed;
	z-index:4;
	width:14px;
	height:14px;
	transform: rotate(45deg);
	display:none;
	transition: left .45s cubic-bezier(.34,1.2,.64,1),
	            top  .45s cubic-bezier(.34,1.2,.64,1);
}

/* de kop draagt sinds V2 alleen nog de STEP-pil (de skip-knop is bewust
   geschrapt); coachZetMascotte() zet justify-content naar de kant wég van de
   mascotte, zodat pil en pose elkaar niet in de weg zitten */
.coach_card__top
{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:10px;
	margin-bottom:8px;
}
.coach_counter
{
	font-family:'headers';
	font-size:11px;
	letter-spacing:.8px;
	background:#FF9800;
	color:#2a0040;
	padding:3px 9px;
	border-radius:10px;
	white-space:nowrap;
}
.coach_card h1
{
	margin:0 0 6px;
	font-family:'headers';
	font-size:16px;
	letter-spacing:.5px;
	color:#fff;
	text-shadow:0 2px #000;
	line-height:1.15;
}
.coach_card p
{
	margin:0;
	font-size:13.5px;
	line-height:1.5;
	color:#ffffffde;
}
.coach_card p span
{
	color:#FF9800;
	font-weight:700;
}

/* ── kaart-art (de in-game stappen zonder doel dragen de echte cube-art) ── */
.coach_art
{
	display:flex;
	align-items:flex-end;
	justify-content:center;
	gap:14px;
	margin-top:11px;
	padding:9px 8px;
	border-radius:9px;
	background:#00000038;
}
.coach_art > div
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
}
.coach_art img
{
	display:block;
	width:54px;
	height:auto;
	filter: drop-shadow(0 3px 6px #0009);
}
.coach_art.breed img
{
	width:150px;
}
.coach_art span
{
	font-size:10px;
	letter-spacing:.5px;
	text-transform:uppercase;
	color:#ffffffa8;
}

/* ── de negen objective-types als chips (map-stap 3) ──
   Bewust alleen opacity/transform en géén display-wissel: de chips houden hun
   ruimte, zodat de kaarthoogte die coachAdvance vóór het typen meet meteen de
   definitieve is en de kaart niet halverwege verspringt. */
.coach_chips
{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:6px;
	margin-top:11px;
	padding:9px 8px;
	border-radius:9px;
	background:#00000038;
}
.coach_chips > div
{
	display:flex;
	align-items:center;
	gap:5px;
	padding:3px 8px;
	border-radius:20px;
	background:#ffffff14;
	font-size:10px;
	letter-spacing:.3px;
	text-transform:uppercase;
	color:#ffffffc4;
	white-space:nowrap;
	opacity:0;
	transform:scale(.7);
	transition: opacity .28s ease, transform .28s cubic-bezier(.34,1.4,.64,1);
}
.coach_chips > div.in
{
	opacity:1;
	transform:scale(1);
}
.coach_chips svg,
.coach_chips img
{
	width:14px;
	height:14px;
	display:block;
	flex:0 0 auto;
	color:#FFC46B;
}

.coach_card__foot
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-top:11px;
}
.coach_progress
{
	display:flex;
	gap:5px;
}
.coach_progress i
{
	width:6px;
	height:6px;
	border-radius:50%;
	background: rgba(255,255,255,.26);
	transition: .3s ease;
}
.coach_progress i.nu
{
	background:#FF9800;
	transform:scale(1.35);
}
.coach_progress i.af
{
	background: rgba(255,152,0,.55);
}
.coach_hint
{
	font-size:10px;
	letter-spacing:.6px;
	text-transform:uppercase;
	color:#ffffff8a;
	white-space:nowrap;
}

/* ── tips-lade ──
   de "?"-knop opent niet meer een dialog met één alinea, maar élke stap van
   de walkthrough als genummerde regel + een knop om de rondleiding opnieuw
   te spelen (design/Tutorial, "TROPHY TIPS"-frame)                          */
.coach_tips
{
	position:fixed;
	inset:0;
	z-index: 999999999;
	background: rgba(8,2,20,.72);
	display:flex;
	align-items:flex-end;
	opacity:0;
	pointer-events:none;
	transition: opacity .3s ease;
}
.coach_tips.active
{
	opacity:1;
	pointer-events:auto;
}
/* De sheet mag NIET clippen: de mascotte breekt met haar voeten over de
   bovenrand heen. De tippenlijst is daarom de scroller, niet de sheet. */
.coach_tips__sheet
{
	position:relative;
	width:100%;
	overflow:visible;
	box-sizing:border-box;
	padding: 16px 16px calc(env(safe-area-inset-bottom) + 26px);
	background: linear-gradient(1deg, rgba(88,0,147,1) 0%, rgba(154,0,255,1) 100%);
	border-top:1px solid #c05fff;
	border-radius:18px 18px 0 0;
	box-shadow: 0 -12px 30px #000000a8;
	text-align:left;
	transform: translateY(100%);
	transition: transform .35s cubic-bezier(.34,1.1,.64,1);
}
.coach_tips.active .coach_tips__sheet
{
	transform: translateY(0);
}
/* mascotte boven de sheet: alleen haar voeten (26px) vallen ín de lade */
.coach_tips__mascotte
{
	position:absolute;
	left:50%;
	bottom: calc(100% - 26px);
	transform: translateX(-50%);
	width: min(208px, 26dvh);
	height: min(208px, 26dvh);
	z-index:2;
	pointer-events:none;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:bottom center;
	filter: drop-shadow(0 6px 12px #000000a8);
}
.coach_tips__lijst
{
	max-height: min(520px, 46dvh);
	overflow-y:auto;
	overscroll-behavior:contain;
}
.coach_tips__kop
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-bottom:12px;
}
.coach_tips__kop span:first-child
{
	font-family:'headers';
	font-size:17px;
	letter-spacing:.5px;
	text-shadow:0 2px #000;
}
.coach_tips__sluit
{
	color:#ffffff8c;
	font-size:12px;
	background:#ffffff1f;
	padding:4px 9px;
	border-radius:10px;
	cursor:pointer;
	white-space:nowrap;
}
.coach_tips__rij
{
	display:flex;
	gap:11px;
	align-items:flex-start;
	padding:9px 0;
	border-top:1px solid #ffffff26;
}
.coach_tips__nr
{
	font-family:'headers';
	font-size:12px;
	min-width:22px;
	height:22px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:#FF9800;
	color:#2a0040;
	flex:0 0 auto;
}
.coach_tips__rij div
{
	display:flex;
	flex-direction:column;
	gap:2px;
}
.coach_tips__rij b
{
	font-family:'headers';
	font-size:13px;
	font-weight:normal;
	letter-spacing:.4px;
}
.coach_tips__rij small
{
	font-size:12px;
	line-height:1.4;
	color:#ffffffc4;
}
.coach_tips__replay
{
	display:block;
	margin-top:12px;
	text-align:center;
	padding:11px 20px;
	border-radius:8px;
	color:#fff;
	font-family:'headers';
	font-size:16px;
	text-shadow:0 1px #000;
	background: linear-gradient(to bottom, rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%);
	cursor:pointer;
}


/* ── PvP pre-match VS-scherm (spelers + countdown + cards) ──────────────── */
#pvpVersus
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:18px;
	padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 14px);
	box-sizing:border-box;
	opacity:0;
	transition: opacity .45s ease;
	z-index:3;
}
#pvpVersus.active
{
	opacity:1;
}
.pvp_metric
{
	font-family:'headers';
	color:#fff;
	font-size: clamp(22px, 6vw, 30px);
	text-transform:uppercase;
	letter-spacing:1px;
	text-shadow: 0 2px 0 #00000088;
	margin:0;
}
.pvp_arena
{
	display:flex;
	align-items:stretch;
	justify-content:center;
	gap:10px;
	width:100%;
	max-width:520px;
}
.pvp_player
{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	background:#170040b8;
	border:1px solid #c19eff55;
	border-radius:16px;
	padding:14px 8px;
	min-width:0;
	transform: translateY(24px);
}
#pvpVersus.active .pvp_player
{
	transform: translateY(0);
	transition: transform .5s cubic-bezier(.34,1.3,.64,1);
}
.pvp_player h3
{
	margin:0;
	color:#fff;
	font-size:15px;
	max-width:100%;
}
.pvp_avatar
{
	position:relative;
	width:74px;
	height:74px;
}
.pvp_avatar img
{
	width:74px;
	height:74px;
	border-radius:50%;
	border:3px solid #FF9800;
	object-fit:cover;
	background:#00000066;
	box-sizing:border-box;
}
.pvp_lvl
{
	position:absolute;
	right:-6px;
	bottom:-6px;
	background:linear-gradient(to bottom, #ffa84c, #ff7b0d);
	color:#fff;
	text-shadow:0 1px #000;
	border-radius:50%;
	min-width:26px;
	height:26px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
	border:2px solid #ffffff33;
	box-sizing:border-box;
}
.pvp_league
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2px;
}
.pvp_league img
{
	width:44px;
}
.pvp_league small
{
	color:#ffffffcc;
	font-size:11px;
	text-transform:uppercase;
}
.pvp_league small img.diamond_personal
{
	width:12px;
}
.pvp_cubes
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
}
.pvp_cubes small
{
	color:#ffffff8a;
	font-size:11px;
	letter-spacing:.5px;
}
.pvp_cube_rij
{
	display:flex;
	gap:5px;
	justify-content:center;
}
.pvp_cube
{
	position:relative;
	width:30px;
	height:30px;
}
.pvp_cube img
{
	width:100%;
	height:100%;
	object-fit:contain;
}
.pvp_cube i
{
	position:absolute;
	right:-4px;
	bottom:-4px;
	font-style:normal;
	background:#8403d5;
	color:#fff;
	border-radius:8px;
	font-size:10px;
	padding:1px 4px;
}
.pvp_vs
{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;
	min-width:64px;
}
.pvp_vs span
{
	font-family:'headers';
	color:#FF9800;
	font-size:26px;
	text-shadow:0 2px 0 #00000088;
}
#pvpCountdownNr
{
	font-family:'headers';
	color:#fff;
	font-size:34px;
}
.pvp_cd_bar
{
	width:56px;
	height:6px;
	border-radius:3px;
	background:#ffffff26;
	overflow:hidden;
}
.pvp_cd_bar u
{
	display:block;
	height:100%;
	width:100%;
	background:linear-gradient(to right, #ffa84c, #ff7b0d);
	text-decoration:none;
	transition: width 1s linear;
}
.pvp_cards
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	width:100%;
}
#pvpCardHint
{
	color:#ffffffcc;
	font-size:13px;
	text-align:center;
	padding:0 20px;
}
.pvp_card_rij
{
	display:flex;
	gap:12px;
	justify-content:center;
}
.pvp_card
{
	position:relative;
	width:96px;
	border-radius:14px;
	background:linear-gradient(160deg, #2a1548 0%, #12081f 100%);
	border:1px solid #c19eff;
	box-shadow:0 0 14px #6631c388;
	padding:10px 8px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	transition:.25s ease;
	cursor:pointer;
}
.pvp_card img
{
	width:64px;
	height:64px;
	object-fit:contain;
}
.pvp_card small
{
	color:#fff;
	font-size:11px;
	text-transform:uppercase;
	text-align:center;
}
.pvp_card_count
{
	position:absolute;
	top:-7px;
	right:-7px;
	background:#8403d5;
	border:2px solid #ffffff33;
	color:#fff;
	border-radius:50%;
	min-width:24px;
	height:24px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:12px;
	box-sizing:border-box;
}
.pvp_card.leeg
{
	filter:grayscale(1);
	opacity:.5;
}
.pvp_card.geblokkeerd
{
	/* geen pointer-events:none — een tik wisselt naar deze card (toggle) */
	filter:grayscale(1);
	opacity:.35;
}
.pvp_card.ingezet
{
	border-color:#FF9800;
	box-shadow:0 0 18px #ff980088;
	transform:scale(1.05);
}
.pvp_card.bezig
{
	opacity:.7;
}

/* ── PvP wachttijd-indicator + duel-uitnodiging + bot-notitie ───────────── */
#pvpWait
{
	color:#ffffffb3;
	font-size:15px;
	letter-spacing:.5px;
	text-shadow:0 1px 2px #000;
	z-index:2;
}
#pvpWait b
{
	color:#FF9800;
	font-family:'headers';
	font-size:18px;
}
.duel_send
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:50%;
	background:#4e357a;
	color:#FFC46B;
	margin-right:6px;
	flex:0 0 auto;
	cursor:pointer;
}
.duel_send:active
{
	transform:scale(.9);
}
.pvp_bot_note
{
	color:#ffffff8a;
	font-size:13px;
	font-style:italic;
}

/* ── PvP duel-doel-keuze (vóór matchmaking) ─────────────────────────────── */
#pvpMetricKeuze
{
	display:flex;
	flex-direction:column;
	gap:14px;
	width:min(340px, calc(100vw - 48px));
	opacity:0;
	transform:translateY(30px);
	transition:.35s ease;
	z-index:3;
}
#pvpMetricKeuze.active
{
	opacity:1;
	transform:translateY(0);
}
.pvp_metric_knop
{
	display:flex;
	align-items:center;
	gap:14px;
	padding:14px 18px;
	border-radius:14px;
	background:#170040b8;
	border:1px solid #c19eff55;
	color:#fff;
	cursor:pointer;
	transition:.2s ease;
}
.pvp_metric_knop:active
{
	transform:scale(.96);
	border-color:#FF9800;
}
.pvp_metric_knop img, .pvp_metric_knop svg
{
	width:38px;
	height:38px;
}
.pvp_metric_knop b
{
	font-family:'headers';
	font-size:18px;
	letter-spacing:.5px;
}
.pvp_metric_knop small
{
	margin-left:auto;
	color:#ffffff8a;
	font-size:11px;
	text-align:right;
	max-width:110px;
}

/* de in-game tug-of-war-balk (#pvpTugBar / .ptb_*) is vervallen — zie
   public/css/cubelegend-pvp-podium.css voor het podium dat haar vervangt */

/* ── PvP-eindscherm ─────────────────────────────────────────────────────── */
#pvpResult
{
	position:fixed;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	height: var(--vh100);
	height:var(--vh100);
	display:flex;
	align-items:center;
	justify-content:center;
	background:#0b0318e6;
	z-index:12;
	opacity:0;
	transition:opacity .4s ease;
	padding:20px;
	box-sizing:border-box;
}
/* PvP-rang-voortgangsscherm (stap 1 van de eindsequentie): grote trofee,
   4 onderbroken promotie-blokken met sterrenvulling; winst = groene flits +
   volgend blok vult, verlies = rode flits + blok loopt leeg en de rest
   knippert rood */
.pvpRankScherm
{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:16px;
	text-align:center;
	padding:20px;
	box-sizing:border-box;
}
.pvpRankScherm.winst::before, .pvpRankScherm.verlies::before
{
	content:'';
	position:absolute;
	inset:0;
	pointer-events:none;
	animation:pvpRankFlits 1.2s ease-out 2;
}
.pvpRankScherm.winst::before  { background:radial-gradient(circle at 50% 40%, #4caf5055, transparent 70%); }
.pvpRankScherm.verlies::before{ background:radial-gradient(circle at 50% 40%, #f3433655, transparent 70%); }
@keyframes pvpRankFlits
{
	0% { opacity:0; }
	30% { opacity:1; }
	100% { opacity:0; }
}
.pvpRankScherm h2
{
	margin:0;
	color:#ffffff8a;
	font-size:16px;
	text-transform:uppercase;
	letter-spacing:1px;
}
.pvp_rank_scherm_trofee
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
}
.pvp_rank_scherm_trofee img
{
	width:min(44vw, 190px);
	filter:drop-shadow(0 8px 26px #00000088);
	transition:transform .4s ease;
}
.pvp_rank_scherm_trofee.promo img   { animation:pvpTrofeePromo .9s cubic-bezier(.2,1.6,.4,1); }
.pvp_rank_scherm_trofee.demotie img { animation:pvpTrofeeDemotie .9s ease; }
@keyframes pvpTrofeePromo   { 0%{transform:scale(.4);} 60%{transform:scale(1.15);} 100%{transform:scale(1);} }
@keyframes pvpTrofeeDemotie { 0%{transform:scale(1.2); filter:saturate(.2);} 100%{transform:scale(1);} }
.pvp_rank_scherm_trofee small { color:#fff; font-family:'headers'; font-size:18px; }
.pvp_rank_blokken
{
	display:flex;
	gap:8px;
	width:min(340px, 84vw);
}
.pvp_rank_blok
{
	flex:1;
	height:22px;
	border:1px solid #c19eff88;
	border-radius:7px;
	background:#0b0318b8;
	overflow:hidden;
	position:relative;
}
.pvp_rank_blok .vulling
{
	display:block;
	height:100%;
	width:0%;
	background:linear-gradient(90deg, #6ee87c, #4CAF50);
	box-shadow:0 0 12px #4caf5088;
	transition:width 1.2s ease;
}
.pvp_rank_blok.rood .vulling { background:linear-gradient(90deg, #ff7a6e, #f34336); box-shadow:0 0 12px #f3433688; }
.pvp_rank_blok.knipper .vulling { animation:pvpBlokKnipper .5s ease-in-out 5; }
@keyframes pvpBlokKnipper { 50% { opacity:.25; } }
/* sterrenvulling zoals het experience-pad: fonkel over het vullende blok */
.pvp_rank_blok.sterren::after
{
	content:'✦ ✦ ✦';
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-size:11px;
	text-shadow:0 0 8px #fff;
	animation:pvpSterren 1.4s ease-out forwards;
	pointer-events:none;
}
@keyframes pvpSterren
{
	0%   { opacity:0; transform:scale(.4); }
	40%  { opacity:1; transform:scale(1.15); }
	100% { opacity:0; transform:scale(1.5); }
}
.pvp_rank_uitslag { margin:0; font-family:'headers'; font-size:40px; min-height:44px; }
.pvp_rank_uitslag.winst   { color:#4CAF50; text-shadow:0 0 24px #4caf5088; }
.pvp_rank_uitslag.verlies { color:#f34336; text-shadow:0 0 24px #f3433688; }
.pvp_rank_uitslag.gelijk  { color:#FF9800; text-shadow:0 0 24px #ff980088; }
.pvp_rank_status { margin:0; color:#fff; font-size:15px; max-width:320px; }
.pvp_rank_verder { padding:12px 34px; }

/* Duel summary: VS-kop (winnaar groen / verliezer rood) + samengevoegde grafiek */
.pvp_duel_kop
{
	display:flex;
	align-items:stretch;
	justify-content:center;
	gap:10px;
	margin:12px auto 4px;
	width:calc(100% - 30px);
}
.pvp_duel_vs
{
	align-self:center;
	font-family:'headers';
	font-size:24px;
	color:#FF9800;
	text-shadow:0 0 16px #ff980088;
}
.pvp_duel_kant
{
	flex:1;
	max-width:150px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	background:#170040b8;
	border:1px solid #c19eff55;
	border-radius:14px;
	padding:12px 10px;
	color:#fff;
}
.pvp_duel_kant small { color:#ffffff8a; text-transform:uppercase; font-size:11px; text-align:center; }
.pvp_duel_kant b { font-family:'headers'; font-size:22px; }
.pvp_duel_kant b small { font-size:11px; text-transform:none; }
.pvp_duel_kant.winnaar   { border-color:#4CAF50; box-shadow:0 0 14px #4caf5055; }
.pvp_duel_kant.winnaar .pvp_avatar img   { border-color:#4CAF50; }
.pvp_duel_kant.verliezer { border-color:#f34336; box-shadow:0 0 14px #f3433655; }
.pvp_duel_kant.verliezer .pvp_avatar img { border-color:#f34336; }
.pvp_duel_grafiek
{
	height:160px;
	margin:8px 15px;
	position:relative;
}

/* Friendly-duel-popup: voorstel met beide avatars, disciplines + VS,
   30s-countdown en PLAY NOW / PLAY LATER (met berichtje-composer) */
#pvpInvitePop
{
	position:fixed;
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	height: var(--vh100);
	height:var(--vh100);
	display:flex;
	align-items:center;
	justify-content:center;
	background:#0b0318e6;
	z-index:13;
	opacity:0;
	transition:opacity .4s ease;
	padding:20px;
	box-sizing:border-box;
}
#pvpInvitePop.active { opacity:1; }
.pvp_invite_inhoud
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	width:min(400px, 100%);
	text-align:center;
	background:#170040b8;
	border:1px solid #c19eff55;
	border-radius:18px;
	padding:22px 16px;
}
.pvp_invite_inhoud h2
{
	margin:0;
	color:#ffffff8a;
	font-size:16px;
	text-transform:uppercase;
	letter-spacing:1px;
}
.pvp_invite_rij
{
	display:flex;
	gap:10px;
	width:100%;
	justify-content:center;
	align-items:stretch;
}
.pvp_invite_speler
{
	flex:1;
	max-width:110px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;
	color:#fff;
}
.pvp_invite_speler small { color:#ffffff8a; text-transform:uppercase; font-size:11px; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.pvp_invite_midden
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	min-width:120px;
}
.pvp_invite_metrics
{
	display:flex;
	flex-direction:column;
	gap:4px;
	width:100%;
}
.pvp_invite_metrics.toon .pvp_invite_metric { opacity:.45; pointer-events:none; }
.pvp_invite_metric
{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	padding:5px 8px;
	border:1px solid #c19eff55;
	border-radius:10px;
	color:#fff;
	font-size:11px;
	cursor:pointer;
	transition:border-color .2s ease, background .2s ease;
}
.pvp_invite_metric svg { width:16px; height:16px; }
.pvp_invite_metric.aan
{
	border-color:#FF9800;
	background:#ff980022;
	box-shadow:0 0 10px #ff980044;
}
.pvp_invite_vs
{
	font-family:'headers';
	font-size:26px;
	color:#FF9800;
	text-shadow:0 0 18px #ff980088;
}
.pvp_invite_hint { color:#ffffff8a; font-size:10px; }
.pvp_invite_teller
{
	font-family:'headers';
	font-size:34px;
	color:#fff;
	animation:coachBob 2s ease-in-out infinite;
}
.pvp_invite_knoppen
{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	justify-content:center;
}
#pvpInvitePop .btn-orange, #pvpInvitePop .btn-purple { padding:12px 26px; }
.pvp_invite_tekst
{
	width:100%;
	min-height:84px;
	resize:none;
	background:#0b0318b8;
	border:1px solid #c19eff55;
	border-radius:12px;
	color:#fff;
	padding:10px 12px;
	box-sizing:border-box;
	font-family:inherit;
	font-size:14px;
}
.pvp_invite_bericht
{
	margin:0;
	color:#fff;
	font-size:15px;
	line-height:1.45;
	background:#0b0318b8;
	border:1px solid #c19eff55;
	border-radius:12px;
	padding:12px 14px;
	width:100%;
	box-sizing:border-box;
	word-break:break-word;
}
#pvpResult.active
{
	opacity:1;
}
.pvp_result_inhoud
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	width:min(400px, 100%);
	text-align:center;
}
.pvp_result_inhoud h2
{
	margin:0;
	color:#ffffff8a;
	font-size:16px;
	text-transform:uppercase;
	letter-spacing:1px;
}
.pvp_result_inhoud h1
{
	margin:0;
	font-family:'headers';
	font-size:44px;
}
.pvp_result_inhoud h1.winst   { color:#4CAF50; text-shadow:0 0 24px #4caf5088; }
.pvp_result_inhoud h1.verlies { color:#f34336; text-shadow:0 0 24px #f3433688; }
.pvp_result_inhoud h1.gelijk  { color:#FF9800; text-shadow:0 0 24px #ff980088; }
.pvp_result_wachten
{
	color:#fff;
	font-size:16px;
	animation:coachBob 2s ease-in-out infinite;
}
.pvp_result_rij
{
	display:flex;
	gap:18px;
	width:100%;
	justify-content:center;
}
.pvp_result_speler
{
	flex:1;
	max-width:150px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	background:#170040b8;
	border:1px solid #c19eff55;
	border-radius:14px;
	padding:14px 10px;
	color:#fff;
}
.pvp_result_speler small { color:#ffffff8a; text-transform:uppercase; font-size:11px; }
.pvp_result_speler b { font-family:'headers'; font-size:24px; }
.pvp_result_speler b small { font-size:11px; text-transform:none; }
.pvp_avatar.klein, .pvp_avatar.klein img { width:54px; height:54px; }
.pvp_avatar.klein img { border-radius:50%; border:2px solid #FF9800; object-fit:cover; background:#00000066; box-sizing:border-box; }
.pvp_result_card
{
	color:#FFC46B;
	font-size:13px;
	border:1px solid #FFC46B66;
	border-radius:12px;
	padding:5px 12px;
}
#pvpResult .btn-orange, #pvpResult .btn-purple
{
	margin-top:6px;
	padding:12px 34px;
}
/* rank-trofee prominent bovenaan het eindscherm; bij promotie een
   rank-up-viering met roterende stralenkrans en overshoot-pop */
.pvp_rank_holder
{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	padding:10px 0 2px;
}
.pvp_result_rank
{
	width:clamp(100px, 28vw, 150px);
	filter:drop-shadow(0 8px 18px #00000088);
	animation: coachBob 3.2s ease-in-out infinite;
	position:relative;
	z-index:1;
}
.pvp_rank_naam
{
	color:#FFC46B;
	font-family:'headers';
	font-size:15px;
	text-transform:uppercase;
	letter-spacing:1px;
	z-index:1;
}
.pvp_rank_naam img.diamond_personal
{
	width:14px;
}
.pvp_rank_holder.promo .pvp_result_rank
{
	animation: pvpRankPop .9s cubic-bezier(.34,1.56,.64,1) both, coachBob 3.2s .9s ease-in-out infinite;
	filter:drop-shadow(0 0 26px #ffc46bcc);
}
.pvp_rank_stralen
{
	position:absolute;
	top:50%;
	left:50%;
	width:240px;
	height:240px;
	transform:translate(-50%, -55%);
	background: conic-gradient(#ffc46b33 0deg, transparent 20deg, #ffc46b33 40deg, transparent 60deg, #ffc46b33 80deg, transparent 100deg, #ffc46b33 120deg, transparent 140deg, #ffc46b33 160deg, transparent 180deg, #ffc46b33 200deg, transparent 220deg, #ffc46b33 240deg, transparent 260deg, #ffc46b33 280deg, transparent 300deg, #ffc46b33 320deg, transparent 340deg, #ffc46b33 360deg);
	border-radius:50%;
	animation: pvpStralen 9s linear infinite;
	-webkit-mask-image: radial-gradient(circle, #000 0%, #0000 70%);
	mask-image: radial-gradient(circle, #000 0%, #0000 70%);
	pointer-events:none;
}
.pvp_rank_promo
{
	font-family:'headers';
	color:#4CAF50;
	font-size:22px;
	letter-spacing:1px;
	text-shadow:0 0 18px #4caf5088, 0 2px 0 #000;
	animation: pvpRankPop 0.7s .5s cubic-bezier(.34,1.56,.64,1) both;
	z-index:1;
}
@keyframes pvpRankPop
{
	0%   { transform:scale(.2); opacity:0; }
	60%  { transform:scale(1.15); opacity:1; }
	100% { transform:scale(1); opacity:1; }
}
@keyframes pvpStralen
{
	to { transform:translate(-50%, -55%) rotate(360deg); }
}

/* eigen inzet op het VS-scherm */
.pvp_stake_regel
{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 14px;
	border-radius:14px;
	background:#00000059;
	border:1px solid #ffc46b55;
	color:#FFC46B;
	font-family:'headers';
	font-size:15px;
	letter-spacing:.5px;
}
.pvp_stake_regel img
{
	width:18px;
	height:18px;
}
.pvp_stake_regel small
{
	color:#ffffff8a;
	font-family:system-ui;
	font-size:10px;
	text-transform:uppercase;
	margin-left:4px;
}

/* PvP-match-summary (via gold-history) */
.history_rij.klikbaar
{
	cursor:pointer;
}
.history_rij__meer
{
	color:#FF9800;
	font-size:11px;
}
.pvp_summary_diff
{
	text-align:center;
	color:#ffffff8a;
	font-size:14px;
	margin:0 0 6px;
}
.pvp_summary_diff b
{
	color:#FFC46B;
	font-family:'headers';
}
.pvp_detail_lijst
{
	display:flex;
	flex-direction:column;
	gap:4px;
	padding:12px 18px;
}
.pvp_detail_rij
{
	display:flex;
	justify-content:space-between;
	align-items:center;
	background:#00000033;
	border-radius:8px;
	padding:8px 12px;
	color:#fff;
}
.pvp_detail_rij span
{
	color:#ffffff8a;
	font-size:13px;
	text-transform:uppercase;
	letter-spacing:.5px;
}
.pvp_detail_rij b
{
	font-family:'headers';
	font-size:16px;
}
.pvp_social_rij
{
	display:flex;
	align-items:center;
	gap:12px;
	background:#00000033;
	border-radius:12px;
	padding:10px 14px;
	margin:8px 18px;
	color:#fff;
}
.pvp_social_rij .btn-orange
{
	margin-left:auto;
	padding:8px 14px;
	font-size:13px;
	flex:0 0 auto;
}

/* XP-gift bij winst */
.pvp_xp_gift
{
	display:inline-flex;
	align-items:center;
	gap:6px;
	color:#9f61ec;
	font-family:'headers';
	font-size:16px;
	text-shadow:0 1px 2px #000;
}
.pvp_xp_gift img
{
	width:20px;
	height:20px;
}

/* leagues-tab: divisies als volle rijen ONDER elkaar (de horizontale strip
   liep op smalle schermen uit beeld) met een grote, leesbare stake-cel */
.league .tiers
{
	flex-direction:column;
}
.league .tiers div
{
	flex-direction:row;
	justify-content:flex-start;
	gap:14px;
	padding:10px 14px;
	box-sizing:border-box;
}
.league .tiers div img
{
	width:12vmin;
	height:12vmin;
	max-width:90px;
	margin-bottom:0;
	flex:0 0 auto;
}
.tiers .pvp_stake_cel
{
	margin-left:auto;
	background:#00000044;
	padding:8px 12px;
	flex:0 0 auto;
}

/* stake-tabel in de championship-uitleg */
.pvp_stake_tabel
{
	display:flex;
	flex-direction:column;
	gap:5px;
	margin:10px 0;
}
.pvp_stake_rij
{
	display:flex;
	align-items:center;
	gap:6px;
	background:#00000033;
	border-radius:8px;
	padding:5px 8px;
}
.pvp_stake_rij b
{
	font-family:'headers';
	font-size:13px;
	text-transform:uppercase;
	width:78px;
	text-align:left;
	flex:0 0 auto;
}
.pvp_stake_cel
{
	flex:1;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	color:#fff;
	font-family:'headers';
	font-size:16px;
	background:#ffffff0d;
	border-radius:6px;
	padding:5px 4px;
}
.pvp_stake_cel img
{
	width:20px;
	height:20px;
}

/* nederlaag: de hoogste gevulde sub-cube gaat zichtbaar verloren */
.pvp_rank_pip.verlies
{
	animation: pvpPipVerlies 1.6s .6s ease-in forwards;
}
/* de VULLING dooft (rood → leeg) maar de placeholder-rand blijft staan */
@keyframes pvpPipVerlies
{
	0%   { transform:rotate(45deg) scale(1); }
	25%  { transform:rotate(45deg) scale(1.3); background:#f34336; box-shadow:0 0 16px #f34336; }
	60%  { transform:rotate(45deg) scale(.92); background:#f3433699; box-shadow:none; }
	100% { transform:rotate(45deg) scale(.85); background:transparent; box-shadow:none; border-color:#ffffff44; opacity:1; }
}
.pvp_demotie_warn
{
	color:#ffb0a8;
	font-size:13px;
	text-align:center;
	padding:0 20px;
}
.pvp_demotie_warn b
{
	color:#f34336;
	text-transform:uppercase;
}
.pvp_rank_stralen.rood
{
	background: conic-gradient(#f3433626 0deg, transparent 20deg, #f3433626 40deg, transparent 60deg, #f3433626 80deg, transparent 100deg, #f3433626 120deg, transparent 140deg, #f3433626 160deg, transparent 180deg, #f3433626 200deg, transparent 220deg, #f3433626 240deg, transparent 260deg, #f3433626 280deg, transparent 300deg, #f3433626 320deg, transparent 340deg, #f3433626 360deg);
}
.pvp_rank_holder.treur .pvp_result_rank
{
	filter:drop-shadow(0 8px 18px #00000088) saturate(.7);
	animation:none;
}
.pvp_rank_promo.af
{
	color:#f34336;
	text-shadow:0 0 18px #f3433688, 0 2px 0 #000;
}

/* sub-niveau binnen de tier: vullende cubes in het tier-kleurthema */
.pvp_rank_pips
{
	display:flex;
	gap:7px;
	justify-content:center;
	z-index:1;
}
.pvp_rank_pip
{
	width:14px;
	height:14px;
	border-radius:4px;
	border:2px solid #ffffff33;
	background:#00000055;
	box-sizing:border-box;
	transform:rotate(45deg) scale(.85);
	transition:.3s ease;
}
.pvp_rank_pip.vol
{
	border-color:#ffffff88;
	transform:rotate(45deg) scale(1);
}

/* vuurwerk bij winst/promotie: uitdijende vonkenringen op vaste posities */
.pvp_vuurwerk
{
	position:absolute;
	width:6px;
	height:6px;
	border-radius:50%;
	pointer-events:none;
	opacity:0;
	animation: pvpVuurwerk 1.7s ease-out infinite;
}
.pvp_vuurwerk.vw1 { left:12%; top:8%;  color:#ffd35c; animation-delay:.1s; }
.pvp_vuurwerk.vw2 { left:82%; top:14%; color:#7cf08a; animation-delay:.55s; }
.pvp_vuurwerk.vw3 { left:22%; top:64%; color:#7cb8ff; animation-delay:1s; }
.pvp_vuurwerk.vw4 { left:78%; top:58%; color:#ff8ca5; animation-delay:1.35s; }
.pvp_vuurwerk.vw5 { left:50%; top:2%;  color:#ffb35c; animation-delay:.8s; }
.pvp_vuurwerk.vw6 { left:8%;  top:38%; color:#d78cff; animation-delay:1.55s; }
@keyframes pvpVuurwerk
{
	0%
	{
		opacity:0;
		transform:scale(.2);
		box-shadow: 0 0 0 0 currentColor, 0 0 0 0 currentColor, 0 0 0 0 currentColor, 0 0 0 0 currentColor, 0 0 0 0 currentColor, 0 0 0 0 currentColor;
	}
	12%
	{
		opacity:1;
	}
	60%
	{
		opacity:.9;
		transform:scale(1);
		box-shadow: 22px -30px 0 -1px currentColor, -26px -22px 0 -1px currentColor, 30px 14px 0 -2px currentColor, -22px 26px 0 -2px currentColor, 2px -38px 0 -2px currentColor, -4px 34px 0 -1px currentColor;
	}
	100%
	{
		opacity:0;
		transform:scale(1.25);
		box-shadow: 34px -46px 0 -3px transparent, -40px -34px 0 -3px transparent, 46px 22px 0 -3px transparent, -34px 40px 0 -3px transparent, 3px -58px 0 -3px transparent, -6px 52px 0 -3px transparent;
	}
}

/* winstreeks: vlam-badge met teller */
.pvp_streak_badge
{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:5px 14px;
	border-radius:16px;
	background:#3a160a99;
	border:1px solid #ff7b0d88;
}
.pvp_streak_badge img
{
	width:26px;
	height:26px;
	animation: pvpVlam 1s ease-in-out infinite alternate;
}
.pvp_streak_badge b
{
	font-family:'headers';
	font-size:22px;
	color:#ffb35c;
	text-shadow:0 0 12px #ff7b0dcc;
}
.pvp_streak_badge small
{
	color:#ffffff8a;
	font-size:11px;
	text-transform:uppercase;
}
@keyframes pvpVlam
{
	from { transform:scale(1) rotate(-4deg);  filter:drop-shadow(0 0 4px #ff7b0d88); }
	to   { transform:scale(1.15) rotate(4deg); filter:drop-shadow(0 0 12px #ff7b0dcc); }
}
/* mini-vlam op het VS-scherm naast de avatar */
.pvp_vlam
{
	position:absolute;
	left:-8px;
	bottom:-6px;
	display:inline-flex;
	align-items:center;
}
.pvp_vlam img
{
	width:22px !important;
	height:22px !important;
	border:none !important;
	border-radius:0 !important;
	background:none !important;
	animation: pvpVlam 1s ease-in-out infinite alternate;
}
.pvp_vlam b
{
	font-family:'headers';
	font-size:13px;
	color:#ffb35c;
	text-shadow:0 1px 2px #000;
	margin-left:-4px;
}
.pvp_result_speler.winnaar
{
	border-color:#4CAF50;
	box-shadow:0 0 18px #4caf5055;
}
.pvp_claim_knop
{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-family:'headers';
	animation: coachPop .45s ease;
}
.pvp_claim_knop img
{
	width:24px;
	height:24px;
}
.pvp_claim_knop.geclaimd
{
	filter:grayscale(.4);
	opacity:.75;
	pointer-events:none;
}
.pvp_gold_verlies
{
	display:inline-flex;
	align-items:center;
	gap:6px;
	color:#f34336;
	font-family:'headers';
	font-size:18px;
}
.pvp_gold_verlies img
{
	width:20px;
	height:20px;
	filter:grayscale(.6);
}
/* munt die van de claim-knop naar de goud-teller (linksboven) vliegt */
.pvp_claim_vlieg
{
	position:fixed;
	width:34px;
	height:34px;
	z-index:99999;
	pointer-events:none;
	transition: all .85s cubic-bezier(.4,.1,.3,1);
}
.pvp_claim_vlieg.weg
{
	left:60px !important;
	top:calc(env(safe-area-inset-top) + 14px) !important;
	transform:scale(.4) rotate(360deg);
	opacity:.4;
}

/* ── "?"-hulpknop: uitleg opnieuw ontvangen ─────────────────────────────── */
.tutorial_help
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:24px;
	height:24px;
	min-width:24px;
	border-radius:50%;
	background:#00000059;
	border:2px solid #ffffff66;
	color:#fff;
	font-size:15px;
	line-height:1;
	font-family:'headers';
	vertical-align:middle;
	cursor:pointer;
	flex:0 0 auto;
	box-sizing:border-box;
	transition: transform .15s ease;
}
.tutorial_help:active
{
	transform:scale(.88);
}
/* Adventure-kaart: mascotte rechtsboven met het zwevende vraagteken, hetzelfde
   blok als in de koppen van classic/challenges/ranked. Verving de kale
   .tutorial_help-knop die hier stond.

   pointer-events staat UIT op het vak en alleen AAN op het vraagteken: dit
   zweeft over een sleepbare kaart met missieknopen, en een aanraakvlak van
   156x168 zou daar tikken én veegbewegingen opslokken. Op de andere pagina's
   zit het blok in een kop en mag het juist wél in z'n geheel aantikbaar zijn. */
.campaignmap > .campaign_gids
{
	position:absolute;
	/* De pose heeft 18% doorzichtige lucht boven zich, dus de tekening begint
	   pas 30px onder de bovenrand van dit vak: op +42px zit hij strak in de
	   hoek zonder dat z'n kruin achter de vaste app-header (80px) verdwijnt. */
	top: calc(env(safe-area-inset-top) + 42px);
	right:2px;
	z-index:5;
	width:156px;
	min-height:168px;
	pointer-events:none;
}
.campaignmap > .campaign_gids span
{
	pointer-events:auto;
	/* zelfde middelpunt als het 24px-vraagteken op de dashboardkoppen
	   (132, 68), maar dan als 32px-knop — even groot als de knop die hier
	   stond, want op een kaart vol knopen mag het doel niet krimpen */
	width:32px;
	height:32px;
	left:116px;
	top:52px;
	font-size:19px;
}
/* zwevend op de energy-eilanden-tab */
#energy_islands
{
	position:relative;
}
#energy_islands > .tutorial_help
{
	position:absolute;
	top:10px;
	right:12px;
	z-index:5;
	width:30px;
	height:30px;
	min-width:30px;
	font-size:18px;
}
/* losse in-game "?" wanneer er geen perk-bar is (speler zonder perks): links
   onderin, tegenover de gecentreerde bar zodat ze elkaar nooit raken */
#ingame_help
{
	position:fixed;
	left:12px;
	bottom: calc(env(safe-area-inset-bottom) + 10px);
	z-index:2; /* zelfde laag als de perk-bar: onder de eindschermen */
	width:30px;
	height:30px;
	min-width:30px;
	font-size:18px;
}
body:not(.inGame) #ingame_help,
body.replaying #ingame_help
{
	display:none; /* nooit over de eindschermen of de replay-balk heen */
}

.objective_holder
{
	position: absolute;
	bottom: 70px;
	margin-left: -100px;
	z-index: 2;
}

.objective_holder > div 
{
	display:flex;
	position:absolute;
	left: -5px;
	top: -10px;
	gap: 4px;
}
.mission_commander img 
{
	border-radius:100%;
}
.mission_commander
{
	box-shadow:0 0 15px #000;
	position:absolute;
	background:#fff;
	padding:5px;
	width:50px;
	padding-top:59px;
	border-radius:35px;
	z-index:1;
	top:-6px !important;
	background:rgb(0 0 0 / 75%);
	border:1px solid #fff;
	transform-origin: center 30px; /* Rotate around the top edge */
	/* animation:sling cubic-bezier(0.72, -0.48, 0.39, 1.82) infinite 2s; */
}
@keyframes sling
{
	0%
	{
	    transform: rotate(4deg);
		
	}
	50%
	{
	    transform: rotate(-2deg);
		
	}
	100%
	{
	    transform: rotate(4deg);
		
	}
}
.mission_commander.self
{
	background:rgb(255 255 255 / 75%);
	border:1px solid #000;
}
.biome__mission
{
	z-index:2;
}
.complete_holder img:nth-child(1)
{
	z-index:3;
}
.complete_holder img:nth-child(2)
{
	z-index:2;
}
.complete_holder img:nth-child(3)
{
	z-index:1;
}

.incomplete_holder img:nth-child(2),
.complete_holder img:nth-child(2):not(.new2)
{
	    transform: translateY(-15px) !important;
}
.bottom_drawer__content
{
	bottom:0;
	position:fixed;
	background: rgb(110 62 195);
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cb60b3+0,c146a1+50,a80077+51,db36a4+100;Pink+Gloss */
	 /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6e3ec3+0,805dc1+50,580093+50,9a00ff+100 */
	background: linear-gradient(105deg ,#580093 30%,rgba(154,0,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#580093+1,9a00ff+100 */
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#580093+1,9a00ff+100 */
	background: linear-gradient(1deg, rgba(88,0,147,1) 70%,rgba(154,0,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/* border-radius:20px 20px 0 0; */
	z-index:3;
	width:-webkit-fill-available;
	align-items: center;
	display: flex;
	max-height: 90vh;
	flex-direction: column;
	background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	/*! background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); */ /* Chrome10-25,Safari5.1-6 */
	/*! background: linear-gradient(to bottom, #4e357a 0%,rgba(0,0,0,0) 100%); */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	width: -moz-available;
	will-change: auto;
	contain: style layout;
}

.bottom_drawer__content .block 
{
	padding: 10px;
	padding-top: 20px;
	width:100%;
	box-sizing: border-box;
	border-top: 2px solid #ffffff4f;
	border-bottom: 2px solid #000;
	position: relative;
	overflow: hidden;
}
.bottom_drawer__content .block:last-child
{
	padding-bottom:calc(env(safe-area-inset-bottom) + 20px)
}
.bottom_drawer__content .block.locked .btn-orange
{
	filter:grayscale();
	opacity: .5;
}
.bottom_drawer__content:after 
{
	margin-top: -35px;
	width:100vw;
	height: 35px;
	position:absolute;
	content:''
}
.bottom_drawer__content:before 
{
	content:'';
	width: 100px;
	min-height: 5px;
	border-radius: 5px;
	background: #fff;
	opacity:.5;
	left:50%;
	margin-top: -20px;
	top:0;
	display: block;
	transition:.3s;
	box-sizing: border-box;
}
.no-transition.bottom_drawer__content:before
{
	opacity:1;
}
.bottom_drawer h2
{
	display:block;
	text-align:center;
	color: #ffffff;
	width: 100%;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
	margin-bottom: 0;
	font-size: 25px;
	margin-top: 5px;
}

[id="modepicker"] h2 
{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:15px;
	margin-bottom: 10px;
	/* font-size: 18px; */
}

.btn-wrapper,.limited_offer_wrapper
{
	border:1px solid #ffffff8f;
	box-shadow: 0 0px 30px #9c91b2,inset 0 -5px 25px #000000a1;
	display:inline-block;
	border-radius:10px;
	z-index: 2;
	margin: 10px;
	width: -webkit-fill-available;
	position: relative;
	box-sizing: border-box;
}
.permanent_offer
{
	display:flex;
	flex-wrap:wrap;
	gap:5px;
	align-items: stretch;
}
.permanent_offer > div
{
	width: calc(50% - 5px);
}
.permanent_offer > div:last-child:nth-child(odd) 
	{
		width:100%;
	}
.permanent_offer .limited_offers__item__body__title
{
	
	font-size:18px !important;
}
.btn-wrapper
{
	width:unset;
}
[id="modepicker"] svg
{
  filter: drop-shadow(0px 2px 1px #000000);
	
}

[id="goldstore"] svg,
[id="lifestore"] svg
{
  filter: drop-shadow(0px 0px 2px #000000);
}
[id="personal_menu"] img 
{
	width:50px;

}
[id="personal_menu"] .menu_icon 
{
	width:30px;
	max-width:30px;
	height:30px;
	max-height:30px;
	box-sizing:border-box;
	border-radius:5px;
	margin-left:10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding:5px;
	margin-right:10px;
}

[id="personal_menu"] .overflow-container .flex-row:nth-child(2) .menu_icon
{	
	background:#00bfff;
}

[id="personal_menu"] .overflow-container .flex-row:nth-child(3) .menu_icon
{	
	background:#ff1200;
}

[id="personal_menu"] .overflow-container .flex-row:nth-child(4) .menu_icon,
[id="personal_menu"] .overflow-container .flex-row:nth-child(6) .menu_icon
{	
	background:#77de00;
}
[id="personal_menu"] .overflow-container .flex-row:nth-child(5) .menu_icon
{	
	background:#ffbe00;
}
[id="personal_menu"] .overflow-container .flex-row
{
	align-items:center;
	margin-left:15px;
}
.bottom_drawer
{
	pointer-events:none;
	position: fixed;
	z-index: 3;
	left: 0;
	will-change:auto;
	top: 0;
}
[id="itemPicker"] .splide__track
{
	margin:10px;
	margin-top:0;
	
}
[id="itemPicker"] .splide__pagination
{
	display:block !important;
}
[dom-removable="questDetails"] .btn-orange
{
	font-size:20px;
}
.bottom_drawer.active
{
	pointer-events:auto;
}
.active .bottom_drawer__content
{
	transform: translate3d(0,0, 0);
}
.bottom_drawer__content
{
	transition: .25s ease;
	transform: translate3d(0, 150%, 0);
}
.no-transition
{
	will-change: auto;
	transition:none;
}
.bottom_drawer .hideOnLoading
{
	display:flex;
	gap: 10px;
	width: 100%;
	align-items: center;
}
.bottom_drawer .gamepop_header
{
	font-size: 30px;
	width: -webkit-fill-available;
	margin: 20px 0;
	margin-bottom: 0;
	margin-top: 16px;
	position: relative;
	padding: 20px;
	z-index: 2;
	border-radius: 20px 20px 0 0;
	box-sizing: border-box;
	border-height: 2px;
	border-image: linear-gradient(to left, rgba(255,255,255,0) 0%,rgb(255 255 255) 50%,rgba(255,255,255,0) 100%) 1;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
	box-shadow: 0px 10px 10px #0000005c;
	width: -moz-available;
}
.gamepop_header .highlight
{
	color:#ff7c10;
}

.bottom_drawer .gamepop_header
{
	justify-content:center;
	color: #fff;
	text-align: center;
}
[id="modepicker"] .gamepop_header svg
{
	filter:none;
	/* width:40px; */
	/* height:40px; */
}
.limited_offers
{
	width:100%;
	text-shadow:1px 0px #00000073,-1px 0px #00000073,0 -1px #00000073,  0 2px #000000ba;
	display: grid;
	grid-template-columns:repeat(auto-fit, minmax(calc(50% - 5px), 1fr));
	padding: 10px;
	gap:5px;
	box-sizing: border-box;
}
.limited_offers.wide
{
	grid-template-columns:1fr;
	
}
.limited_offers img 
{
	width: 80px;
}
.limited_offers__item
{
	position:relative;
	cursor:pointer; /* de hele tile is klikbaar (remote-fetch), niet enkel de prijsknop */
	border:1px solid #000;
	border-radius: 5px;
	overflow:hidden;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
	height: auto;
	width: 100%;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */
	 /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	display: flex;
	flex-direction: column;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100&0.5+0,0.5+100;Black+Gloss+%231 */
	/* background: linear-gradient(135deg, rgba(76,76,76,0.5) 0%,rgba(89,89,89,0.5) 12%,rgba(102,102,102,0.5) 25%,rgba(71,71,71,0.5) 39%,rgba(44,44,44,0.5) 50%,rgba(0,0,0,0.5) 51%,rgba(17,17,17,0.5) 60%,rgba(43,43,43,0.5) 76%,rgba(28,28,28,0.5) 91%,rgba(19,19,19,0.5) 100%); */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#aebcbf+0,6e7774+50,0a0e0a+51,0a0809+100&0.5+0,0.5+100;Black+Gloss */
	 /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a9e4f7+0,0fb4e7+100;Ble+3D+%235 */
	/* background: radial-gradient(ellipse at center, rgb(171 67 255) 0%,rgb(40 0 68) 100%); */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.limited_offers__item.black .limited_offers__item__body__img img
{
	width: 80px;
}
.limited_offers__item.red
{
	border-radius:5px;
	overflow:hidden;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff7c19+0,ff7c19+23,cf0404+100 */
	background: rgb(255,124,25); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, rgba(255,124,25,1) 0%, rgba(255,124,25,1) 23%, rgba(207,4,4,1) 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255,124,25,1) 0%,rgba(255,124,25,1) 23%,rgba(207,4,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center, rgba(255,124,25,1) 0%,rgba(255,124,25,1) 23%,rgba(207,4,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7c19', endColorstr='#cf0404',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.limited_offers__item.green
{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#76ff07+0,00cc99+78 */
background: rgb(118,255,7); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(118,255,7,1) 0%, rgba(0,204,153,1) 78%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(118,255,7,1) 0%,rgba(0,204,153,1) 78%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(118,255,7,1) 0%,rgba(0,204,153,1) 78%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76ff07', endColorstr='#00cc99',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.limited_offers__item.blue
{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e659ff+22,6207ff+100 */
background: rgb(230,89,255); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(230,89,255,1) 22%, rgba(98,7,255,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(230,89,255,1) 22%,rgba(98,7,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(230,89,255,1) 22%,rgba(98,7,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e659ff', endColorstr='#6207ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.limited_offers__item.yellow
{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffff07+0,ffaa00+78 */
background: rgb(255,255,7); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,7,1) 0%, rgba(255,170,0,1) 78%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,7,1) 0%,rgba(255,170,0,1) 78%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(255,255,7,1) 0%,rgba(255,170,0,1) 78%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff07', endColorstr='#ffaa00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.limited_offers__item.red 
.limited_offers__item__header
{
	position:relative;
	background: #0000005c;
	padding: 10px 0 ;
}
.limited_offers__item__body
{
	padding: 20px 10px;
	position:relative;
	padding-top: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}
.limited_offers__item__body__title
{
	font-size:25px;
	margin-bottom: 5px;
	font-family: headers;
}
.red 
.limited_offers__item__body__title
{
	color:#ffd8ba;
}
.limited_offers__item__footer 
{
	gap:8px;
	display:flex;
	font-size:20px;
	align-items:center;
	justify-content:center;
	padding:8px;
	min-height: 30px;
	margin-top: auto;
}
.limited_offers__item__footer img 
{
	width:30px;
}
.limited_offers__item.black 
.limited_offers__item__footer
{
	border-top:1px solid #000000;
	background:#0f0;
	box-shadow:inset 0 -5px #0000003d;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.limited_offers__item.green 
.limited_offers__item__footer
{
	border-top:1px solid #91290e;
	background:#7aff35;
	box-shadow:inset 0 -5px #0000003d;
}
.limited_offers__item.red 
.limited_offers__item__footer
{
	border-top:1px solid #91290e;
	background:#ff7c17;
	box-shadow:inset 0 -5px #0000003d;
}
.limited_offers__item.blue 
.limited_offers__item__footer
{
	border-top:1px solid #2b0073;
	background:#6d0dff;
	box-shadow:inset 0 -5px #0000003d
}
.limited_offers__item.yellow 
.limited_offers__item__footer
{
	border-top:1px solid #705400;
	background:#d8a200;
	box-shadow:inset 0 -5px #0000003d
}
.tag p {
  transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  position: absolute;
  padding:4px 20px;
  background: #a600ff;
  border:1px solid #260069;
  border-radius:5px;
  left:-5px;
  font-Size:19px;
  bottom:-25px;
  box-shadow:0 4px 10px #00000080;
  z-index:2;
}
.blue .tag p
{
	background:#ff0000;
}
[id="modepicker"] .overflow-container
{
	padding:0 !important;
}

.overflow-container
{
	height:100%;
	flex-shrink: 50;
	overflow: auto !important;
	width: -webkit-fill-available;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.5+30,0.5+51,0.5+70,0+100 */
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.5) 51%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.5) 51%,rgba(0,0,0,0.5) 70%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 30%,rgba(0,0,0,0.4) 51%,rgba(0,0,0,0.25) 70%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
	box-sizing: border-box;
	background:lch(0 0 0 / 0.3);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.3+0,0.5+50,0.3+100 */
	background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.3) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgb(0 0 0 / 60%) 0%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#4d000000',GradientType=1 ); /* IE6-9 */
	padding-bottom: calc(20px + env(safe-area-inset-bottom));
	}
.fading-border-top:before
{
	content:'';
	width:100%;
	height:50px;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgb(54 37 84) 100%);
	position:absolute;
	left:0;
	top:-52px;
	pointer-events: none;
}

[dom-removable="missionPreLaunch"] .overflow-container
{
	padding-bottom:0;
}
.limited_offers__item__header
{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:5px;
}
.limited_offers__item__header__title
{
	text-shadow:none;
}
.limited_offers__item__header__cd 
{
	color:red;
}
.limited_offers__item:after
{
	opacity:.55;
}

.heartbeat .limited_offers__item__body__img__wrapper img
{
	animation: 2.5s ease 0s infinite beat;
}	

@keyframes beat 
{
  0%, 25%,50%, 100% { transform: scale(1, 1); }
  12.5%, 37.5% {  transform: scale(1.2, 1.2); }
}
.menu_button_wrapper
{
	padding: 18px;
	padding-left: 0;
	text-align:left;
	border-bottom: 1px solid #ffffff29;
	font-size:25px;
	margin-left: 15px;
	display:flex;
	justify-content:space-between;
	width: -webkit-fill-available;
	align-items:center;
	/* background: #ffffff17; */
}
.menu_button
{
	display:flex;
	width:100%;
	width: -webkit-fill-available;
	align-items: center;
	justify-content: space-between;
}
.menu_button:after
{
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30" viewBox="0 0 16 16"%3E%3Cpath fill="white" d="M5.646 3.146a.5.5 0 0 0 0 .708L9.793 8l-4.147 4.146a.5.5 0 0 0 .708.708l4.5-4.5a.5.5 0 0 0 0-.708l-4.5-4.5a.5.5 0 0 0-.708 0Z"%2F%3E%3C%2Fsvg%3E');
	margin-right:-7px;
}
.inventory_grid
{
	display:grid;
	grid-template-columns:1fr 1fr 1fr ;
	padding:20px;
	justify-content:center;
	align-items:center;
	gap:15px;
}
.inventory_grid > div 
{
	border-radius:5px;
	padding:5px;
	max-height:100%;
	background:#ffffff17;
	aspect-ratio: 1;
	position:relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.inventory_grid > div img 
{
	width:100%;
	width: 80%;
	animation:none;
}
.inventory_item_count
{
	position:absolute;
	right:5px;
	bottom:5px;
	background:#00000061;
	padding: 2px 15px;
	z-index:2;
	border-radius:5px;
	text-shadow:0 2px #000,0 -1px #000,-1px 0 #000,1px 0 #000
}
.inventory_item_count.buy 
{
	background:#8BC34A;
}


.lds-ring {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
  }
  .lds-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 64px;
	height: 64px;
	margin: 8px;
	border: 8px solid #fff;
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: #fff transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
	animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
	animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
	animation-delay: -0.15s;
  }
  @keyframes lds-ring {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }

.dialog_wrapper
{
	left:0;
	top:0;
	min-height:100vh;
	min-height: var(--vh100);
	width:100vw;
	z-index:9999;
	position: fixed;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	contain: strict;
}

.dialog_underlay
{
	position:absolute;
	min-height:100vh;
	min-height: var(--vh100);
	width:100vw;
	background:#0000006e;
}


.dialog_wrapper .dialog 
{
	z-index:2;
	border-radius: 0;
	width:80%;
	background: #4e357a;
	background: linear-gradient(1deg, rgba(88,0,147,1) 0%,rgba(154,0,255,1) 100%);
	border: 1px solid #c05fff;
	overflow:hidden;
	transition:.15s cubic-bezier(0.67, 0.21, 0.77, 1.48);
	box-shadow:0 15px 30px #000;
}

.dialog_wrapper .dialog h1 
{
	margin:20px;
	text-shadow: 0 3px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.dialog_wrapper .dialog p
{
	margin-top:0;
	font-size:20px;
	padding:16px 22px 20px;
	display:flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	/* opacity:.7; */
}
.dialog_wrapper .dialog p img
{
	height:90px;
	filter:drop-shadow(0px 0px 40px white);
}
/* resource-iconen in de body (kosten-dialoog) mogen niet 90px worden én moeten
   hun aspect ratio behouden — de base .inventorystat img forceert 33px breed,
   waardoor ze bij height:1em geplet werden */
.dialog_wrapper .dialog p .inventorystat img,
.dialog_wrapper .dialog p img[style*="1em"]
{
	width:auto;
	height:1.3em;
	margin:0;
	filter:none;
}
.dialog_wrapper .dialog p .factory_cost
{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:10px;
	width:100%;
	margin:2px 0;
}
/* zelfstandige pil-opmaak, los van de #social/#shop-cascade, zodat beide
   dialogen (factory-kost én energy-shortage) er identiek en netjes uitzien */
.dialog_wrapper .dialog p .factory_cost .inventorystat
{
	width:auto;
	height:auto;
	flex:0 0 auto;
	padding:7px 14px;
	gap:9px;
	font-size:18px;
	justify-content:center;
	box-shadow:inset 0 3px 6px #00000080;
}
.dialog_wrapper .dialog p small
{
	font-size:13px;
	opacity:.65;
}
/* bèta-poort van payment-flow.js: item + prijs, de code-invoer en de foutregel
   staan als flex-kinderen in de dialoog-p */
.dialog_wrapper .dialog p .pay_poort__item
{
	margin-top:10px;
	font-size:15px;
	opacity:.85;
}
.dialog_wrapper .dialog p .pay_poort__item b
{
	color:#ffb74d;
}
.dialog_wrapper .dialog p .pay_poort__invoer
{
	display:block;
	width:100%;
	max-width:260px;
	margin:12px auto 0;
}
.dialog_wrapper .dialog p .pay_poort__invoer input
{
	width:100%;
	box-sizing:border-box;
	padding:12px 14px;
	border-radius:12px;
	border:1px solid #c05fff;
	background:#1b1230;
	color:#fff;
	font:inherit;
	font-size:18px;
	letter-spacing:2px;
	text-align:center;
	outline:none;
}
.dialog_wrapper .dialog p .pay_poort__invoer input:focus
{
	box-shadow:0 0 0 3px #c05fff55;
}
.dialog_wrapper .dialog p .pay_poort__fout
{
	color:#ff6b6b;
	opacity:1;
	margin-top:8px;
}
.dialog_wrapper .dialog .dialog_buttons
{
	display:flex;
	justify-content:center;
	width:100%;
	gap:1px;
	border-top: 1px solid #c05fff;
	box-sizing:border-box;
	background: #c05fff;
}

.dialog_wrapper .dialog .dialog_buttons > div 
{
	width:100%;
	font-size: 20px;
	padding:20px;
	background:#2d1e46;
}
.dialog_wrapper .dialog .dialog_buttons .orange
{
	color:orange;
}
.dialog_wrapper .dialog .dialog_buttons .red
{
	color:#ff6b6b;
}

/* melden/blokkeren (moderatie.js, App Store 1.2): reden-chips, toelichting,
   foutregel. Links uitgelijnd — de app centreert tekst globaal. */
.dialog_wrapper .dialog p .mod_venster
{
	display:flex;
	flex-direction:column;
	gap:12px;
	width:100%;
	text-align:left;
}
.mod_uitleg { display:block; font-size:15px; line-height:1.35; }
.mod_uitleg.mod_klein { font-size:13px; opacity:.7; }
.mod_redenen
{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}
.mod_reden
{
	padding:9px 12px;
	border-radius:999px;
	border:1px solid #6631c3;
	background:#38255a;
	font-size:14px;
	cursor:pointer;
}
.mod_reden.is-gekozen
{
	border-color:#ffb74d;
	background:#ffb74d26;
	color:#ffb74d;
}
.mod_toelichting
{
	width:100%;
	box-sizing:border-box;
	padding:10px 12px;
	border-radius:12px;
	border:1px solid #6631c3;
	background:#1b1230;
	color:#fff;
	font:inherit;
	font-size:15px;
	resize:none;
	outline:none;
}
.mod_toelichting:focus { box-shadow:0 0 0 3px #c05fff55; }
.mod_fout { display:block; min-height:1em; color:#ff6b6b; font-size:13px; }

.dialog-animated .dialog
{
	transform:scale(1.2);
	opacity:0;
}

.toast
{
	transition:.15s cubic-bezier(0.67, 0.21, 0.77, 1.48);
}
.toast-animated 
{
	transform:translateY(-100%);
	opacity:0;
}

.limited_offers__item__body__img__wrapper
{
	position:relative;
	width: min-content;
}
.limited_offers__item__body__img__wrapper .item_ammount
{
	font-size: 22px;
	position:absolute;
	right: 0;
	bottom: 10px;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
	z-index: 2;
}

[id="itemPicker"] h2
{
	margin:0;
	font-size: 25px;
}

[id="itemPicker"] p 
{
	padding:0;
	margin:0;
	opacity: .75;
}[id="itemPicker"] img 
{
	width:70px;
	height:70px;
}
[id="itemPicker"] .gamepop_header img 
{
	width:120px;
	height:120px;
	filter:drop-shadow(0 0px 20px white)
}
[id="itemPicker"] .item 
{
	width:100%;
	padding: 20px 15px;
	border-top:1px solid #ffffff8c;
	box-sizing:border-box;
	align-items:center;
	position:relative;
	gap:20px;
}
[id="itemPicker"] .item h3
{
	font-size:24px;
	display:flex;
	flex-direction:column;
	text-align:left;
	align-itemst:flex-start;
	margin:0;
	position:absolute;
	text-shadow: 0 2px black, 0 -2px black, 2px 0px black, -2px 0 black;
	left: 85px;
}
[id="itemPicker"] .item  .packTag 
{
	background:linear-gradient(to bottom, rgba(255,168,76,1) 0%,rgba(255,123,13,1));;
	padding:5px 20px ;
	border-radius: 0 0 5px 0;
	text-shadow: 0 1px #000;
	font-size:16px;
	white-space:nowrap;
	box-shadow: 5px 5px 20px #000000c4;
	position:absolute;
	top:0;
	left:0;
}

[id="itemPicker"] .item h3 span:after 
{
	content:'';
	min-width:100vw;
	position:absolute;
	top:0;
	left:0;
	height:1px;
	background:rgba(255,168,76,1);
}
[id="itemPicker"] .item a
{
	margin-left:auto;
}

[id="itemPicker"] .item .btn-wrapper
{
	margin-left:auto;
}
/* Booster/perk-drawer verkoopt beide varianten (eigenaar, 8 nov 2026): een kop per
   groep met het variant-icoon (neon-grid = booster, lichtring = perk) */
[id="itemPicker"] .koop_variant
{
	display:flex;
	align-items:center;
	gap:10px;
	width:100%;
	box-sizing:border-box;
	padding:18px 15px 8px;
	border-top:1px solid #ffffff8c;
	text-align:left;
}
[id="itemPicker"] .koop_variant img
{
	width:40px;
	height:40px;
}
[id="itemPicker"] .koop_variant b
{
	font-family:headers, sans-serif;
	font-size:17px;
	letter-spacing:1px;
}
[id="itemPicker"] .koop_variant small
{
	font-size:11px;
	letter-spacing:.5px;
	opacity:.7;
}
[id="itemPicker"] .koop_variant + .item
{
	border-top:0;
}
[id="itemPicker"] .tab-full-btn
{
	width:100%;
}
[id="itemPicker"] .gamepop_header
{
	/* overflow:hidden; */
	height: 100%;
}
[id="itemPicker"] [tabcontent]
{
	position:relative;
}
[id="itemPicker"] .properties_container
{
	width:100%;
	font-size: 16px;
	grid-template-columns: 1fr 1fr;
	text-align:left;
	gap: 0 30px;
	padding: 25px;
	box-sizing: border-box;
	display:grid;
}
[id="itemPicker"] .properties_container div
{
	margin:5px 0 ;
	gap:5px;
}
[id="itemPicker"] .properties_container div div div.property_step 
{
	width:33%;
	height:5px;
	background:#fff6;
}
[id="itemPicker"] .properties_container div div div.active.property_step
{
	background: linear-gradient(to bottom, #ffd700 0%,rgb(255 119 0) 100%);
}
.propertyUpgrade
{
	display:flex;
	gap:5px;
	margin:20px;
}

.propertyUpgrade div:before
{
	content:'';
	position:absolute;
	left:5px;
	top:5px;
	width:calc(100% - 10px);
	height:40%;
	border-radius:5px;
	background: #ffffff3d;
}
.propertyUpgrade div
{
	position:relative;
	width: 100%;
	background:#00000070;
	border-radius:5px;
	border:1px solid #000;
	padding:10px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.propertyUpgrade div.resource__available
{
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.propertyUpgrade div.resource__unavailable
{
}
.propertyUpgrade div img
{
	width:50px;
	height:50px;
	z-index:2;
}
.propertyUpgrade div svg
{	
	width:40px;
	filter:drop-shadow(0 0 3px black);
	height:50px;
	
}
[id="itemPicker"] .properties .shop_container
{
	display:none;
}
[id="itemPicker"] .gamepop_header
{
	position:relative;
}
[id="itemPicker"] .overflow_hidden
{
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width:100%;
	overflow:hidden;
}

html
{
	--glowNegative: -10px;
	--glowPositive: 10px;
}
@keyframes colorRotate {


	0%
	{
		color:red;
	}
	20%
	{
		color:#9C27B0;
	}
	40%
	{
		color:#2196F3;
	}
	60%
	{
		color:#4CAF50;
	}
	80%
	{
		color:#FFEB3B;
	}
	100%
	{
		color:red;
	}
}

@keyframes glowPulse {

	from
	{
		
	    box-shadow: 0 0 0px ;
	}
	50%
	{
	    box-shadow: 0 0 50px ;
	}
	to
	{
	    box-shadow: 0 0 0px ;
	
	}

}

@keyframes glowRotate {

	0%
	{
		
	    box-shadow: 0 var(--glowNegative) 50px ;
	}
	12.5%
	{
		
	    box-shadow: var(--glowPositive)  var(--glowNegative)  50px;
	}
	25%
	{
		
	    box-shadow: var(--glowPositive)  0 50px;
	}
	37.5%
	{
		
	    box-shadow: var(--glowPositive)  var(--glowPositive)  50px ;
	}
	50%
	{
		
	    box-shadow: 0 var(--glowPositive)  50px ;
	}
	62.5%
	{
		
	    box-shadow: var(--glowNegative)  var(--glowPositive)  50px ;
	}
	75%
	{
		
	    box-shadow: var(--glowNegative)  0 50px ;
	}
	87.5%
	{
		
	    box-shadow: var(--glowNegative)  var(--glowNegative)  50px ;
	}
	100%
	{
		
	    box-shadow: 0 var(--glowNegative)  50px ;
	}
}
[view-wrapper="1"]
[view-change="1"],
[view-wrapper="2"]
[view-change="2"],
[view-wrapper="3"]
[view-change="3"],
[view-wrapper="4"]
[view-change="4"]
{
    background: linear-gradient(to bottom, rgba(255,168,76,1) 0%,rgba(255,123,13,1)) !important;
    background: linear-gradient(to bottom, #ffd700 0%,rgb(255 119 0) 100%) ! important;
    text-shadow: 0px 1px #091c39;
    text-shadow: 0 2px black, 0 -1px #0000007a, 1px 0px #0000007a, -1px 0 #0000007a;
    z-index: 2;
    border-radius: 5px;
}

[view-wrapper="1"]
[view-change="1"].m_slots,
[view-wrapper="2"]
[view-change="2"].m_slots,
[view-wrapper="3"]
[view-change="3"].m_slots,
[view-wrapper="4"]
[view-change="4"].m_slots
{

	box-shadow: 0 2px 5px black;
	transform:scale(1.1)
}

.tab-full-btn {}
[view-content]
{
	display:none !important;
}
[view-wrapper="1"]
[view-content="1"],
[view-wrapper="2"]
[view-content="2"],
[view-wrapper="3"]
[view-content="3"],
[view-wrapper="4"]
[view-content="4"]
{
	display:block !important;
}
.inventory_snippet
{
	width:100%;
	display:flex;
	gap: 15px;
	margin-top:10px;
}
.inventory_snippet .inventorystat
{
	margin-left:10px
}
.inventory_snippet span
{
	margin:0 10px;
}

.inventory_snippet img 
{
	width:40px !important;
	height:40px !important;
	filter:none !important;
}
.overflow-container.upgradeStats .property:last-child .upgradeableStep
{
	background: #ff9c11;
}
.overflow-container.upgradeStats .active
{
	background:#000000 !important;
}
[id="itemPicker"] .radial_stripes
{
	top:-230%;
}
[id="itemPicker"] [view-content="3"] p 
{
	border-top: 2px solid #fff;
	border-image: linear-gradient(to left, rgba(255,255,255,0) 0%,rgb(255 255 255) 50%,rgba(255,255,255,0) 100%) 2;
	padding: 20px;
	opacity: 1;
	background: #4e357a;
}
.cs-summary
{
	padding: 20px  0;
	padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.cs-summary-top
{
	background:#0000007a;
	min-width:100vw;
	color:#00ff0a;
	border-top:2px solid;
	border-bottom:2px solid;
	position:relative;
	z-index:2;
	padding:20px;
	/* box-shadow: 0 0  70px #00ff0a; */
	/* gap:10px; */
}
.red 
.cs-summary-top
{
	color:#ff0000;
	
}
.cs-summary-top img 
{
	transition: 2s ease;
}

.cs-summary-top img.scaled
{

    transform: scale(4); opacity:0;
}

.cs-summary-top img.downscaled
{

    transform: scale(.7);
}


.cs-summary-top div:nth-child(1)
{
	color:#fff;
	font-size:10vw;
}
.cs-summary-top div:nth-child(2)
{
	font-size:13vw;
	color:#00ff0a;
	margin-bottom: 20px;
}
.red .cs-summary-top div:nth-child(2)
{
	font-size:13vw;
	color:#ff0000;
}
.cs-summary .dashboard_section
{
	height:auto;
	padding:0;
	margin:20px;
	margin-top: 38px;
	/* margin-top: 120px; */
	width: 80%;
	background: #0000002b;
	border: none;
	box-shadow: 0 0 40px #02ff07d9;
	overflow:visible
}

.cs-summary.red .dashboard_section
{
	box-shadow: 0 0 40px #ff1100;
}
.cs-summary .dashboard_section:after,
.cs-summary .dashboard_section:before
{
	content:'';
	height: 40px;
	width: 1px;
	top: -40px;
	left:20%;
	background: #ffffffd9;
	position:absolute;
}
.cs-summary .dashboard_section:after
{
	left:unset;
	right:20%
}

.cs-summary 
.dashboard_section__rank
{
	border:none;
	background:none;
}
.cs-summary 
.dashboard_section__principal
{
	background:none;
}
.cs-summary-top img 
{
	height:31vw;
	width:31vw;
}
.cs-summary-top .newDivision img
{
	height:35vw;
	width:35vw
}
.cs-summary.green .btn-orange
{
	background: linear-gradient(to bottom, #4CAF50 0%,#02ff07 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	position: absolute;
	z-index: 2;
	bottom: calc(1em + env(safe-area-inset-bottom));
}

.cs-summary.red .btn-orange
{
	background: linear-gradient(to bottom, #d00000 0%,#ff1100 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.cs-summary.red .wiggle
{
	rotate:180deg
}
.cs-summary.red .progress_trophys
{
	flex-direction:row-reverse
}

.wiggle
{
	animation: wiggle infinite 1s alternate cubic-bezier(0.4, 0, 1, 1)
}
@keyframes wiggle
{
	from
	{
		transform:translateX(20px) scale(.7);
		
	}
	to
	{
		transform:translateX(-40px) scale(.7);
	}
}
.cs-summary-snippet
{
	padding:10px;
}
.cs-summary-snippet-body
{
	font-Size:20px;
	text-align:left;
	color:#02ff07;
}
.red .cs-summary-snippet-body
{
	color:#ff1100;
}
.cs-summary-snippet-body h3
{
	font-Size:30px;
	color:#fff;
}
.cs-summary-snippet-body .green
{
	color:#fff;
}
.star {
	--size: 20vmin;
	--holes: calc(var(--size)*.495);
	--animationTime: 1s;
	--rotation: 1s;
	width: var(--size);
	pointer-events:none;
	aspect-ratio: 1/1;
	position: absolute;
	contain:strict;
	background: white;  
	--mask: radial-gradient(var(--holes) at var(--holes) var(--holes), #0000 99%,#000) calc(var(--holes)*-1) calc(var(--holes)*-1);
	-webkit-mask: var(--mask);
	mask: var(--mask);
	border-radius: 50%;
	animation: sparkle var(--animationTime) linear forwards;
  }
  @keyframes sparkle {
	0% { transform: scale(0); }
	25% { opacity: 1; }
	100% { opacity: 0; rotate:var(--rotation)}
  }
.newDivision
{
	position:relative;
}


.leaderBoardOthers
{
	padding:0 20px;
	--size: 30%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	flex-direction: row;
	gap: 5px;
}

.avatar_wrapper img
{
	/* vul de wrapper — width:auto liet foto-avatars (jpg-upload) op hun
	   natuurlijke formaat renderen en blies de inhaal-animatie op */
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:100%;
}
.avatar_wrapper
{
	width: var(--size);
	min-width: 0;
	/* nooit hoger dan de animatierij (--height op .orderable_y) — avatars
	   schalen naar de beschikbare ruimte i.p.v. een vast percentage */
	max-width: min(55%, calc(var(--height, 35vh) - 30px));
	aspect-ratio: 1;
}

.leaderBoardOthers .avatar_wrapper img
{
	width:100%
}
.orderable_y {
	--height:3rem;
	width: 100%;
	position:relative;
	display: flex;
	flex-direction: column;
	transition:.5s ease;
	align-items: center;
}
.orderable_y__placeholder {
	width: 100%;
	min-height: var(--height);
}
.orderable_y__item {
	position: absolute;
	top: 0;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: var(--height);
	transition: transform 0.5s ease;
	transform: translateY(calc(var(--order) * 100%));
	overflow: auto;
	overflow-x: hidden;
	align-items: center;
	align-content: baseline;
	justify-content: center;
	padding: 10px;
	box-sizing: border-box;
	gap:10px;
}

.animation__upsize
{
	animation: keyframes_upsize .5s linear;
}
@keyframes keyframes_upsize
{
	from
	{
		scale: 1;
	}
	50%
	{
		scale:2
	}
	to
	{
		scale: 1;
	}
}

.animation__downsize
{
	animation: keyframes_downsize .5s linear;
}
@keyframes keyframes_downsize
{
	from
	{
		scale: 1;
		opacity:1;
	}
	50%
	{
		scale: .5;
		opacity:.5;
	}
	to
	{
		scale: 1;
		opacity:1;
	}
}
.avatar_wrapper
{
	position:relative;
}


.position_label
{
	background:#FF9800;
	width:1.5rem;
	height:1.5rem;
	position:absolute;
	border-radius:100%;
	color:#fff;
	line-height:1.5rem;
	text-align:center;
	right:0;
	box-shadow:0 0px 10px ;
	text-shadow:0 1px #000;
	border:1px solid ;
	bottom:0;
	transform:scale(2);
	transition:.5s ease;
	opacity:0;
}

.leaderBoardMe
{
	display:flex;
}
.position_label.big
{
	width:4rem;
	line-height:4rem;
	height:4rem;
	text-shadow:0 2px #000;
	font-size:40px;
}
.position_label_in_place
{
	
	transform:scale(1);
	opacity:1;

}


.separator-text
{
    justify-content: space-around;
    position: absolute;
    top: 49%;
    font-size: 30px !important;
    margin: 0;
    white-space: nowrap;
    padding: 0;
    width: 120%;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0) scale(2);
    opacity:0;
    text-shadow: 0 4px #5f3aa1, 0 -4px #5f3aa1, -4px 0px hsl(261.55deg 47.03% 42.94%), 4px 0px #5f3aa1;
    z-index: 2;
    transition:1s ease;
    display:flex;
    align-items:center;
}
.separator-text_in_place
{
	opacity:1;
	transform: translate(-50%, -50%) rotate(-3deg) scale(.8);
}
.underline
{
	display: inline-block;
	margin: 0 10px;
	transform: scale(1.3);
	color: #00ff0a !important;
}
.negative .underline
{
	color: #ff0000 !important;
}
.close.right_top
{
	position:fixed;
	top:10px;
	right:10px;
	background:#00000080;
	border-radius:100%;
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="none" stroke="rgb(255,255,255)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 7L7 17M7 7l10 10"%2F%3E%3C%2Fsvg%3E');
	color:#fff;
	width:40px;
	height:40px;
	padding:4px;
	z-index:999999;
	transition:.5s;
}
.separator-text svg
{
	width:50px;
}

.sideBoxes
{
	right:0;
	bottom: calc(13vh + env(safe-area-inset-bottom));
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: end;
	box-sizing: border-box;
	width:50px;
	height: auto;
	z-index: 2;
	/* vier knoppen i.p.v. acht: er is ruimte zat, en meer lucht maakt ze
	   makkelijker te raken zonder de buur te treffen */
	gap: 32px;
	transition:.4s ease;
}
.inGame .sideBoxes
{
	transform:translate3d(70px, 0,0);
}
.sideBox {
	--radius: 5px;
	position: relative;
	height: 60px;
	line-height: 72px;
	color: #ffffff;
	text-align: center;
	background: #4e357a8a;
	border-radius: var(--radius) 0 0 var(--radius);
	box-shadow:0 5px 20px #311561;
}
.sideBox.new
{
	background: #570090;
	background: linear-gradient(1deg, rgba(88,0,147,1) 0%,rgba(154,0,255,1) 100%);
}
.sideBox:after
{
	    content: '';
    display: block;
    width: calc(100% - 10px);
    height: 20%;
    margin: 5px;
    top: 0;
    left: 0;
    border-radius: 5px;
    position: absolute;
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%);
}
/* Fabriek op slot tot XP-level 10 (feedback 14 sep): gedimd icoon + slot-pil
   met het vereiste level op de plek van de actie-badge; een tik geeft de
   XP LEVEL 10 REQUIRED-dialoog (renderFactory) */
.sideBox.locked
{
	background:#2a1d428a;
}
.sideBox.locked svg
{
	opacity:.35;
}
.sideBox__slot
{
	position:absolute;
	top:-8px;
	left:-8px;
	z-index:3;
	display:inline-flex;
	align-items:center;
	gap:3px;
	height:1.35rem;
	padding:0 6px;
	border-radius:4px;
	border:1px solid #fff;
	background:linear-gradient(#6a48b8, #2d1b52);
	color:#fff;
	font-size:12px;
	font-weight:bold;
	line-height:1;
	box-shadow:0 5px 5px #00000052;
	pointer-events:none;
}
.sideBox__slot svg
{
	width:11px;
	height:11px;
	opacity:1;
}
/* De SOCIAL-knop draagt als enige van de rail een tweede regel: hoeveel
   vrienden zitten er NU in de app. De rest blijft icoon-only, dus de afwijking
   is bewust en strak gescoped.

   line-height:72px centreert het icoon in een doos van 60px — een truc die
   precies één regel aankan. Met een teller eronder moet dat een echte kolom
   worden, en mag de hoogte meegroeien. */
.sideBox[render="social"]
{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:2px;
	line-height:1;
	height:auto;
	min-height:60px;
	padding:6px 0 5px;
}
.sideBox__vrienden
{
	display:inline-flex;
	align-items:center;
	gap:3px;
	position:relative;
	z-index:1;
	font-family:headers, sans-serif;
	font-size:11px;
	letter-spacing:.5px;
	color:#cbb6ee;
}
/* is er iemand, dan mag het getal ook echt oplichten */
.sideBox__vrienden.is-live { color:#fff; }
.sideBox__van { opacity:.55; }
.sideBox__stip
{
	width:6px;
	height:6px;
	border-radius:50%;
	background:#2bd94b;
	box-shadow:0 0 6px #2bd94b;
	animation:sideBoxStip 1.4s ease-in-out infinite;
}
@keyframes sideBoxStip
{
	0%, 100% { opacity:1; transform:scale(1); }
	50%      { opacity:.25; transform:scale(.72); }
}
/* een knipperend bolletje is precies het soort beweging waar deze voorkeur
   over gaat; de kleur draagt de boodschap ook zonder de puls */
@media (prefers-reduced-motion: reduce)
{
	.sideBox__stip { animation:none; }
}

.w-100
{
	width:100%;
}
.perfect-stack 
{
	position:relative;
	width: 40px;
	top: -17px;
	margin-left: -19px;
}
.perfect-stack img 
{
	position:absolute;
}
.removable.in 
{
	scale:3;
	opacity:0;
}
.inline-xp
{
	position:relative;
	
}
.inline-xp-holder
{
	right: -25px;
	top: 0px;
	scale:.8;
	position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;
}

.inline-xp-level
{
	position:absolute;
	z-index:2;
	top: 55%;
	padding:0;
	margin:0;
	transform: translate(-50%, -50%);
	left: 50%;
	color: #fff;
	text-shadow: 0 1px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.gamemodes
{
	display:flex;
	gap:5px;
}
.gamemode
{
	color: #ffffff6e;
	font-size: 14px;
}
.quest_reward
{
	position:relative;
}
.quest_reward img 
{
	width: 40px;
	height: 40px;
}
.quest_reward:not(.xpPathReward) h2
{
	position:absolute;
	bottom: -25px;
	font-size: 21px;
	white-space:nowrap;
	width: 100%;
	justify-content: center;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
/* Maand-gifts/daily-gifts: bedragen pasten op 21px niet binnen de tegels
   ("1.998" stak buiten de rand — amateuristisch); kleiner + strakker én de
   box hard op het icoon-voetspoor geklemd (sommige bedragen kregen anders een
   gebruikte breedte groter dan de tegel en staken er rechts uit) */
.reward_free .quest_reward h2,
.reward_vip .quest_reward h2,
.gift .quest_reward h2
{
	font-size:14px;
	bottom:-20px;
	letter-spacing:-0.3px;
	left:0;
	right:auto;
	width:44px;
	min-width:0;
	max-width:44px;
	justify-content:center;
	/* generieke h2-padding maakte de box anders 44+40=84px breed (content-box)
	   en duwde het bedrag de tegel uit */
	padding:0;
	box-sizing:border-box;
	margin:0;
}
[title="giftcoins"]
{
	font-family:font3 !important
}
.xpPathItem .quest_reward h2
{
	position:absolute;
	right:5px;
	bottom:5px;
	margin:0;
	padding:0;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.quests_complete_reward
{
	width: auto;
	position:relative;
	border-radius:5px;
	min-height: 170px;
	padding-left:10px;
	height: 170px;
	border:2px solid #ffffff;
	background:#4f357a9c;
	margin-bottom: 20px;
	display: flex;
	justify-content: flex-start;
}
.day .quests_complete_reward
{
	min-height: 243px;
	padding:0;
	justify-content: space-evenly;
}
.quests_complete_reward .time_remaining
{
	position:absolute;
	right: 5px;
	transform:translateY(-50%);
	top: 50%;
}
.day .quests_complete_reward .time_remaining
{
	right: unset;
	top: unset;
	left: 5px;
	bottom:5px;
	transform: unset;
}
.quests_complete_reward.claimable span:not(.quests_complete_reward_info),
.quests_complete_reward.claimable .bonusBarWrapper
{
	display:none;
}
.quests_complete_reward_bg
{
	width:100%;
	height:100%;
	background-image: url(/public/img/cubelegend/challenges/september.jpg);
	background-size: auto;
	background-position:center;
	position: absolute;
	left: 0;
	border-radius: 4px;
	contain:strict;
}
.week .quests_complete_reward_bg
{
	background-position:500px;
}
.profile .quests_complete_reward_bg
{
	background-position:bottom;
}
.skipped .quest_reward h2,
.claimed .quest_reward h2
{
	
	opacity:.5;
}
.skipped .quest_reward img,
.claimed .quest_reward img 
{
	filter:grayscale();
	opacity:.5;
}
.skipped .quest_reward:after,
.claimed .quest_reward:after,
.monthly_challenge_step .claimed:after,
.resource__available:after
{
	position:absolute;
	right:0;
	bottom:-10px;
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" stroke="black" width="50" height="50" viewBox="0 0 24 24"%3E%3Cpath fill="hsl(122.42deg 100% 50%)" d="m9 20.42l-6.21-6.21l2.83-2.83L9 14.77l9.88-9.89l2.83 2.83L9 20.42Z"%2F%3E%3C%2Fsvg%3E')
}
.resource__unavailable
{
	opacity:.45
}

.resource__available:after
{
	bottom:-10px;
	right:-15px;
	z-index:2;
}
.skipped .bonusBarWrapper
{
	display:none;
}
.skipped
{
	background:#000;
}
[id="seasonBankCard"] .propertyUpgrade__resource:after,
[id="weeklyBankCard"] .propertyUpgrade__resource:after{
	display:none;
}
.skipped .flex-row:nth-child(3):before
{
	font-family:headers;
	padding-left:40px;
	height:40px;
	align-items:center;
	display:flex;
	content: 'skipped';
	font-size:22px;
	width:100%;
}
.month .skipped .flex-row:nth-child(3):before
{
	content:''
}
.day .skipped .flex-row:nth-child(3):before
{
	background: url('/public/img/cubelegend/card_challenge_day.png');
	background-size:40px;
	background-repeat:no-repeat;
}
.week .skipped .flex-row:nth-child(3):before
{
	background: url('/public/img/cubelegend/card_challenge_week.png');
	background-size:40px;
	background-repeat:no-repeat;
}
.month .skipped .flex-row:nth-child(3):before
{
	background: url('/public/img/cubelegend/card_challenge_month.png');
	background-size:40px;
	background-repeat:no-repeat;
}
.monthly_challenge_step .claimed:after,
.xpPathRewards.claimed .quest_reward:after
{
	
	right:-17px;
	bottom:unset;
	top:-17px;
}
.monthly_challenge_step .claimed .quest_reward:after
{
	content:none;
}
.quests_complete_reward:after
{
	content:'';
	width:100%;
	height:2px;
	background:#11004c;
	bottom: -20px;
	position:absolute;
}
.quests_complete_reward_info
{
	bottom:5px;
	right: 10px;
	text-shadow: 0 1px black, 0 -1px black, 1px 0px black, -1px 0 black;
	position:absolute;
	font-size: 15px;
}
.quests_complete_reward_banner h1 
{
	margin:0;
	color: #ef346c;
	text-shadow: 0 5px 40px #ffffff2b, 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
}

.quests_complete_reward_banner [title="giftcoins"]
{
	font-family:headers !important;
}
.skipped .highlight
{
	color:#fff !important;
}

.skipped span
{
	
  text-decoration: line-through;
}
.day_streak_grid 
{
	display:flex;
	flex-wrap:wrap;
	gap:5px;
	justify-content:center;
}
.claimable .day_streak_grid 
{
	display:none;
}
.failed .bonusBar
{
	background:#000;
}
.day_streak_grid .bonusBarWrapper
{
	width:44%;
}
.inProgress .bonusBar
{
	animation: fadeBlink infinite 1s alternate;
}
@keyframes fadeBlink
{
	from
	{
		opacity:0
	}
	to
	{
		opacity:1
	}
}
.quests_complete_reward_banner span
{
	font-size: 12px;
	opacity:.55
}
.quests_complete_reward_banner h1 
{
	line-height:12px;
	padding-bottom:18px;
	margin-bottom:10px;
	margin-top:10px;
	position:relative;
	font-size: 25px !important;
}

.claimable .quests_complete_reward_banner  h1,
.claimable.quests_complete_reward_banner  h1
{
	
	padding-bottom:0 !important;
	margin-bottom:5px !important;
}
.quests_complete_reward_banner h1 span
{
	color:#fff;
	opacity:.7;
	z-index:-1;
	position:absolute;
	transform:  translateX(-50%);
	bottom:0;
	left:50%;
	font-family:headers;
	font-size: 18px !important;
}
.quests_complete_reward_banner
{
  margin-top:-2px;
  height: 165px;
  --col-gap: 2rem;
  --barH: 1rem;
  --roleH: 2rem;
  --flapH: 2rem;
  background: #160146;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255, 0.25), rgba(255,255,255, 0.25) 1px, transparent 1px, transparent 6px);
  background-size: 7px 5px;
  padding:15px;
  /* padding-bottom:40px; */
  position: relative;
  padding-top: 5px;
  position:relative;
  width: 137px;
  overflow: hidden;
  clip-path: polygon(
	    calc(var(--col-gap) / -2 - 5px) 0,
	    calc(100% + var(--col-gap) / 2 + 5px) 0,
	    calc(100% + var(--col-gap) / 2 + 5px ) calc(100% - var(--flapH)),
	    50% 100%,
	    calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH))
	  );
  }


.quests_complete_reward_banner:nth-child(3)
{
	min-height:238px !important
}
.month .quests_complete_reward_banner
{
  width: 160px;
}
.quests_complete_reward_banner_content
{
	z-index:1;
	display:flex;
	flex-direction:column;
	gap: 10px;
	position:relative;
	text-align:center;
	padding: 0 10px;
	box-sizing:border-box;
}
/* De claim-opmaak hing volledig aan 'claimable' OP de banner zelf. Bij BIG en
   STREAK (dag) staat die klasse daar inderdaad, maar bij MEGA (week) en
   ULTIMATE (maand) staat 'ie op de omhullende .quests_complete_reward — die
   banners bleven daardoor donker-gestreept i.p.v. paars zodra ze claimbaar
   waren. Elke claim-regel hieronder accepteert nu béide plaatsen. (Bewust in
   CSS opgelost: 'claimable' ook op de banner zetten zou closest('.claimable')
   in de claim-afhandeling naar een ánder element laten wijzen.) */
.quests_complete_reward_banner.claimable,
.quests_complete_reward.claimable .quests_complete_reward_banner
{
	background: linear-gradient(1deg, rgba(88,0,147,1) 0%,rgba(154,0,255,1) 100%);
}
.quests_complete_reward_banner.claimable .bonusBarWrapper,
.quests_complete_reward_banner.claimable span
{
	display:none;
}
.quests_complete_reward_banner.claimable *,
.quests_complete_reward.claimable .quests_complete_reward_banner *
{
	color:#fff !important;
	border-color: #fff !important;
}
.quests_complete_reward_banner.claimable:after,
.quests_complete_reward.claimable .quests_complete_reward_banner:after
{
	content:'';
	width:100%;
	height:60px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%,rgba(255,255,255,.05) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	left:0px;
	z-index:2;
	top:0;
	position:absolute;
	
}
.quests_complete_reward_banner_lints
{
	width:calc(100% - 20px);
	left:0;
	top:-10px;
	margin:10px;
	box-sizing:border-box;
	position:absolute;
	height:100%;
	border-left: solid 3px #ef346c;
	border-right: solid 3px #ef346c;
}

.day .time_remaining h5
{
	color:#ef346c;
	
}

.week .quests_complete_reward_banner h1,
.week .time_remaining h5
{
	color: #2196F3;
}
.week .quests_complete_reward_banner_lints
{
	border-color: #2196F3;
}
.month .quests_complete_reward_banner h1,
.month .time_remaining h5
{
	color: #ffa244;
}
.month .quests_complete_reward_banner_lints
{
	border-color: #ffa244;
}
.profile .quests_complete_reward_banner h1
{
	color: #4CAF50;
}
.profile .quests_complete_reward_banner_lints
{
	border-color: #4CAF50;
}
.quests_complete_totals_overview
{
	position:absolute;
	left:190px;
	top:15px;
	width: calc(100% - 200px);
	gap:20px;
}

.quests_complete_totals_overview > div 
{
	gap:5px;
}

.quests_complete_totals_overview_item .bonusBarWrapper p 
{
	width: 85%;
    display: flex;
    justify-content: space-between;
	
}
.personal_quests .highlight 
{
	color: #ff0057;
	display:inline-block;
}
.week .personal_quests .highlight 
{	
	color:#2196f3;
}
.month .personal_quests .highlight 
{	
	color:#ff7f15;
}
.ticking img,
.ticking span
{
	transform:scale(1.2);           
	animation-name: ticking;
	animation-duration: .01s;
	animation-timing-function: ease-out;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-play-state: running;
}


  
@keyframes ticking {
	from
	{	
		transform:scale(1.25);
	}
	to
	{

		transform:scale(1);
	}
}

[render-order]
{
	white-space:nowrap;
}
.hide-scroll {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.hide-scroll::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.diamond_personal
{
	width:20px;
}
.fading-border-top
{
	    border-top: 2px solid #fff;
	    border-image: linear-gradient(to left, rgba(255,255,255,0) 0%,rgb(255 255 255) 50%,rgba(255,255,255,0) 100%) 2;
	    margin: 0;
	    padding: 20px;
	    padding-bottom: calc(20px + env(safe-area-inset-bottom));
	    box-sizing: border-box;
	    width: 100%;
	    position: relative;
}

.personal_quests.vip .info-wrapper
{	
	display:none !important;
}

.vip-enabled .personal_quests.vip .info-wrapper
{
	display:block !important;
}
.friendsQuestProgress
{
	height:50px;
	border-bottom:1px solid #ffffff36;
	padding:15px;
	
}
.friendsQuestProgress  .inline-xp > img
{
	width:50px;
}

.friendsQuestProgress  .inline-xp-holder > img
{
	width:50px;
}
h3 
.info-wrapper
{
	top:-2px;
	right:0;
}
.info-wrapper
{
	font-size: 16px;
	position:absolute;
	right: 8px;
	top: 8px;
	background:#2196F3;
	display: block;
	width:25px;
	height:25px;
	box-shadow: inset 0 2px 2px #ffffff6b, inset 0 -3px 1px #0064b4;
	border-radius: 4px;
	text-align:center;
	line-height:26px;
	border: 1px solid #000000;
}
.info-wrapper svg
{
  filter: drop-shadow(0px 0px 2px #673AB7);
}
.claimable .info-wrapper
{
	display:none !important;
}

.ph-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 15px 0 0 0;
  /* margin-bottom: 30px; */
  overflow: hidden;
  direction: ltr;
  /* background-color: #fff; */
  border-radius: 2px;
  border-bottom: 1px solid #ffffff47;
}
.ph-item,
.ph-item *,
.ph-item ::after,
.ph-item ::before {
  box-sizing: border-box;
}
.ph-item > * {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 15px;
}

.ph-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5px;
}
.ph-row div:not(.empty),
.ph-avatar,
.ph-experience{
	height:10px;
  margin-top: 7.5px;
  border-radius: 10px;	
-webkit-animation-duration: 1.25s;
animation-duration: 1.25s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: jsSkeletonLoader;
animation-name: jsSkeletonLoader;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background: #DFDFDF;
background: linear-gradient(to right, #72589a 8%, #9172c5 18%, #72589a 33%);
background-size: 800px 104px;

    position: relative;
}
.ph-row .big, .ph-row.big div {
  height: 20px;
}
.ph-row .medium {
	
  min-height: 15px;
}

.ph-row .empty {

	height:10px;
}

.ph-col-2 {
	position:relative;
  flex: 0 0 16.6666666667%;
}

.ph-col-4 {
  flex: 0 0 33.3333333333%;
}

.ph-col-6 {
  flex: 0 0 50%;
}

.ph-col-8 {
  flex: 0 0 66.6666666667%;
}

.ph-col-10 {
  flex: 0 0 83.3333333333%;
}

.ph-col-12 {
  flex: 0 0 100%;
}

[class*=ph-col] {
  direction: ltr;
}
[class*=ph-col] > * + .ph-row {
  margin-top: 0;
}
[class*=ph-col] > * + * {
  margin-top: 7.5px;
}

.ph-avatar {
  position: relative;
  width: 4rem;
	height:4rem;
  border-radius: 50%;
}
.ph-experience
{
	
background: linear-gradient(to right, #6948a0 8%, #af8fe3 18%, #6948a0 33%);
background: linear-gradient(to right, #8467b0 8%, #c2a6f2 18%, #8467b0 33%);
	background-size: 800px 104px;
	z-index:2;
	right:-10px;
	top:45%;
	transform:translateY(-50%);
	height:50px;
	width:50px;
	position:absolute;
	clip-path: polygon(50% 0%, 65% 29%, 98% 35%, 74% 59%, 79% 91%, 50% 78%, 21% 91%, 26% 59%, 2% 35%, 35% 29%);
}

.ph-picture {
  width: 100%;
  height: 120px;
  background-color: #ced4da;
}

@-webkit-keyframes ph-animation {
  0% {
    transform: translate3d(-30%, 0, 0);
  }
  100% {
    transform: translate3d(30%, 0, 0);
  }
}

@keyframes ph-animation {
  0% {
    transform: translate3d(-30%, 0, 0);
  }
  100% {
    transform: translate3d(30%, 0, 0);
  }
}


@-webkit-keyframes jsSkeletonLoader {
  from {
    background-position: -500px 0;
  }
  to {
    background-position: 500px 0;
  }
}
@keyframes jsSkeletonLoader {
  from {
    background-position: -500px 0;
  }
 to {
    background-position: 500px 0;
  }
}

:root {
	--border-color: #d43b39;
	--red: #fff;
	--text-black: #322523;
}

.ticket {
	filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.2)) blur(0.2px);
	position: relative;
	background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
	clip-path: path(
		"M4.3542 116.355C17.3259 117.282 20.7794 127.838 20.8847 133C91.2186 132.93 235.192 132.79 248.417 132.79C250.733 118.568 264.421 116.04 265.263 115.829C266.106 115.619 265.263 113.512 265.263 112.985C265.263 112.458 263.263 111.931 263.263 110.141C263.263 108.35 264.632 106.875 265.263 106.453C265.895 106.032 265.895 102.872 265.895 102.134C265.895 101.397 262.842 99.7112 262.842 97.7096C262.842 95.708 265.158 94.4438 265.895 91.5994C266.632 88.7551 263.263 87.8069 262.842 84.9626C262.42 82.1182 265.895 82.2235 265.895 79.0631C265.895 75.9027 262.842 76.1134 262.842 73.269C262.842 70.4247 265.369 70.3193 265.895 67.0535C266.421 63.7878 262.842 63.261 262.842 60.522C262.842 57.783 265.369 58.099 265.895 54.4119C266.421 50.7247 262.842 49.9873 262.842 47.9857C262.842 45.9841 265.79 43.2451 265.895 41.8756C265.895 39.5 263.263 38.9258 262.842 36.3975C262.42 33.8692 265.369 32.605 265.369 29.6553C265.369 26.7055 262.526 25.7574 262.526 23.9665C262.315 21.9649 267.369 19.4366 261.999 17.3296C253.66 15.6441 249.259 5.7409 248.101 1H22.6751C22.6751 1 21.7275 1.00095 21.7275 1.63208C17.9371 18.2769 6.77635 17.3286 6.03932 17.3286C5.30229 17.3286 5.51287 16.4859 3.72294 18.3821C1.93301 20.2784 4.3542 22.8067 4.3542 27.3366C4.3542 31.8665 1.61708 33.4467 2.14359 35.027C2.6701 36.6072 4.3542 37.1339 4.3542 40.821C4.3542 44.5082 1.82766 43.3494 1.09063 45.7724C0.353596 48.1954 4.3542 48.5114 4.3542 52.3039C4.3542 56.0964 1.61708 54.0948 1.61708 57.9927C1.61708 61.8905 4.3542 60.3103 4.3542 63.9975C4.3542 67.6846 1.61708 67.6846 1.61708 70.845C1.61708 74.0054 4.3542 74.1108 4.3542 77.1659C4.3542 80.2209 1.61708 79.7995 1.61708 82.3279C1.61708 84.8562 4.3542 86.9632 4.3542 89.1754C4.3542 91.3877 1.61708 92.5466 1.61708 94.8642C1.61708 97.1818 4.3542 100.132 4.3542 101.712C4.3542 103.292 2.03824 106.242 2.03824 108.033C2.03824 109.465 3.23125 111.86 3.82775 112.879C3.82775 113.511 4.35457 114.986 4.3542 116.355Z"
	);
	width:265px;
	height:132px;
	transform:scale(.9) rotate(-3deg);
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	box-shadow: 10px 10px 30px #000;
}

.monthly_challenge_step .ticket
{
	/* clip-path:unset; */
	border-radius:25px;
	height: 122px;
	width: 100%;
	transform: scale(.7) rotate(-3deg);
	box-shadow: none;
	z-index: 3;
}
.monthly_challenge_step .ticket p span
{
	font-size: 20px !important;
	line-height: 20px;
	top: 50%;
	margin: 0;
}
.monthly_challenge_step .ticket:first-child
{
	background:#8c8c8c;
}

.ticket p 
{
	box-sizing:border-box;
	height:95%;
	position:relative;
	width:88%;
	border:4px solid #ffffff;
	border-radius:20px;
}
.ticket p span 
{
	width:50%;
	left:50%;
	font-family: headers;
	top: 36%;
	transform:translate(-50%, -50%);
	display:block;
	position:absolute;
	font-size: 40px;
	margin-top: 10px;
	line-height:40px;
	text-shadow: 0 3px #000, 0 -1px #000, 1px 0px #000, -1px 0 #000;
}

.ticket p::after,
.ticket p::before {
	content:attr(data-pass);
	font-size:20px;
	position:absolute;
	width:20px;
	height:100%;
	line-height:40px;
	letter-spacing: 1px;
    text-shadow: 0 1px #000, 0 -1px #000, 1px 0px #000, -1px 0 #000;
}
.ticket p::after {
	border-right: 3.5px solid #ffffff;
	writing-mode: vertical-rl;
	left:20px;
}

.ticket p::before {
	right:20px;
	border-left: 3.5px solid #ffffff;
	writing-mode: vertical-lr;
}
.vip-labels
{
	padding: 20px;
	padding-top: 30px;
}
.vip-label
{
	display:inline-flex !important;
	flex-direction:column;
	align-items:center;
	gap:10px;
	font-size:22px !important;
	justify-content:center;
}

.vip-label .icon
{
	width:30px;
	height:30px;
	display:inline-block;
	background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #ffbe2c 62.5%, #5d4a1f 100%);
	-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30px" height="30px" viewBox="0 0 24 24"%3E%3Cg fill="none"%3E%3Cpath d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"%2F%3E%3Cpath fill="currentColor" d="M12.987 5.74a2 2 0 1 0-1.97.002l-.01.018c-.655 1.367-1.565 3.325-2.97 4.06c-1.154.603-2.81.3-4.04.074a1.5 1.5 0 1 0-1.772 1.58l2.948 7.61A3 3 0 0 0 7.97 21h8.06a3 3 0 0 0 2.797-1.916l2.947-7.61a1.5 1.5 0 1 0-1.767-1.624c-1.259.163-2.882.371-4.044-.236c-1.377-.72-2.3-2.543-2.976-3.874Z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}

.checkbox-grid
{

	padding:20px;
	display:flex;
	flex-direction:column;
	gap:10px;
}
.checkbox-grid > div
{
	padding-left:50px !important;
	text-align:left !important;
	position:relative;
}
.checkbox-grid > div:not(.selected)
{
	padding:10px;
	border:2px solid;
	opacity:.25;
}

.checkbox-grid h2
{
	text-align:left;
	margin:0;
	margin-bottom:5px;
}
.checkbox-grid span
{
	opacity:.7
}
/* APP ICON (instellingen → OTHER): twee tegels naast elkaar, het icoon erin, geen radio-rondje */
.checkbox-grid.app_icon_grid
{
	flex-direction:row;
}
.checkbox-grid.app_icon_grid > div
{
	flex:1 1 0;
	padding:10px !important;
	text-align:center !important;
}
.checkbox-grid.app_icon_grid > div::before,
.checkbox-grid.app_icon_grid > div::after
{
	display:none !important;
}
.checkbox-grid.app_icon_grid img
{
	display:block;
	width:72px;
	height:72px;
	margin:4px auto 8px;
}
.checkbox-grid.app_icon_grid h2
{
	text-align:center;
}

.checkbox-grid > div:not(.selected)::before
{
	content: '';
    background: #fff;
    left: 0;
    top: 0;
    position: absolute;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.bb::before, .bb::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}
  
  .bb {
	  position:relative;
	  display:flex;
	  align-items:center;
	  justify-content:center;
	  box-shadow: inset 0 0 10px #ffffff;
	  background: #ffffff26;
	  height: 100%;
	  aspect-ratio: 1;
	}
.multipleRewards .bb
{
	width: 150px;
	height: 150px;
}

  @keyframes colorRotateOranges {
	0%, 100% {
		color:#FF5722
	}
	30% {
		color:#FFC107
	}
	60% {
	  color:#FF9800
	}
  }
  @keyframes clipMe {
	0%, 100% {
	  clip: rect(0px, var(--clipMe_1), var(--clipMe_3), 0px);
	}
	25% {
	  clip: rect(0px, var(--clipMe_3), var(--clipMe_1), 0px);
	}
	50% {
	  clip: rect(var(--clipMe_2), var(--clipMe_1), var(--clipMe_1), 0px);
	}
	75% {
	  clip: rect(0px, var(--clipMe_1), var(--clipMe_1), var(--clipMe_2));
	}
  }
  @keyframes clipMeSmall {
	0%, 100% {
	  clip: rect(0px, 165px, 2px, 0px);
	}
	25% {
	  clip: rect(0px, 2px, 165px, 0px);
	}
	50% {
	  clip: rect(164px, 165px, 165px, 0px);
	}
	75% {
	  clip: rect(0px, 165px, 165px, 164px);
	}
  }
  
  .bb img
{
	width:80%;
	height:80%;
	z-index: 2222;
}
.intransition:not(.intransition-out) .bb img 
{
	transform:scale(2);
}

.glowingblock {
	position: relative;
	background: #000000;
	height: 80px;
	transition:1s;
	display: flex;
	align-items: center;
	justify-content: center;
	}


  .glowingblock:before, .glowingblock:after {
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
	background: linear-gradient(45deg, #FF5722,#ffeeba, #FF9800, #FF5722, 
   #ffeeba, #FF9800, #FF5722,#ffeeba, #FF9800, #FF5722);
	background-size: 400%;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	z-index: -1;
	animation: steam 20s linear infinite;
	}
  
  @keyframes steam {
	0% {
	  background-position: 0 0;
	}
	50% {
	  background-position: 400% 0;
	}
	100% {
	  background-position: 0 0;
	}
  }
  
  .glowingblock:after {
	filter: blur(40px);
  }

.rewardsReceived h1,
.rewardsReceived h3
{
	/* position:absolute; */
	opacity:1;
	transition-delay:4s;
	transition: .75s;
	margin:0;
	display: block;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
}
.rewardsReceived h1
{
	font-size:30px !important;
}
.rewardsReceived h3
{
	font-size:20px !important;
}
.rewardsReceived
{
	background: #000000c7;
	height:100vh;
	height: var(--vh100);
	width:100vw;
	transition:2s;
	font-size:20px;
	z-index: 4;
	position:fixed;
	/* background:#000000bf; */
	flex-direction: column;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
}
.purpleGradientBlock{
	transition:.5s;
	height:80px;
	background:rgba(78,53,122,1);
	border-image: linear-gradient(to left, rgba(255,255,255,0) 0%,rgb(255 255 255) 50%,rgba(255,255,255,0) 100%) 1;
}
.purpleGradientBlock:first-child
{	
	border-bottom:2px solid ;
	padding-top: env(safe-area-inset-top);
}
.intransition .purpleGradientBlock
{
	height:50%;
}
.purpleGradientBlock:last-child
{	
	border-top:2px solid ;
	padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}
.rewardsReceived.intransition h1
{
	transform:translateY(-100%);
	opacity:0;
}
.rewardsReceived.intransition h3
{
	transform:translateY(100%);
	opacity:0;
}

.rewards
{
	position:absolute;
	top: calc(82px + env(safe-area-inset-top));
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	/* meerdere rijen als blok verticaal centreren — zonder align-content
	   stapelden rijen vanaf de bovenkant en vielen onderste tegels bij veel
	   beloningen buiten beeld (overflow:hidden) */
	align-content:center;
	justify-content:center;
	gap: 20px;
	padding:20px;
	height: calc(100vh - 174px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
	height: calc(var(--vh100) - 174px - env(safe-area-inset-bottom) - env(safe-area-inset-top));
	overflow:hidden;
	width: 100%;
	box-sizing: border-box;
	z-index: 2;
}

.reward_title
{
	text-shadow: 0 3px black, 0 -3px black, 3px 0px black, -3px 0 black;
	font-size: 18px;
}

.reward_count
{
	position:absolute;
	right: 15px;
	bottom: 10px;
	font-size: 30px;
	text-shadow: 0 3px black, 0 -3px black, 3px 0px black, -3px 0 black;
	z-index: 9999;
}
.multipleRewards .reward_count
{
	right:-15px;
	bottom:-15px;
	font-size:30px
}

.rewardsReceived.intransition .glowingblock:first-child
{
	padding-bottom:50%;
}
.rewardsReceived.intransition .glowingblock:last-child
{
	padding-top:50%;
}


.intro.reward_animated_bars
{
	opacity: 0;
	animation: rewardIncomming .5s linear forwards;
}

.intro .reward_count
{
	animation: countIncomming 1s linear forwards;
	font-family:headers;
	opacity:0;
	transform: translate(-50%,-50%) 
	
}


  @keyframes countIncomming {
	0% {
		opacity: 0;
		transform: translate(50%,-50%) scale(2)
	}
	  50%
	  {
		  
		opacity: 0;
		transform: translate(-50%,-50%) scale(2)
	  }
	  100%
	  {
		opacity: 1;
		transform: translate(0,0) scale(1)
	  }
  }
  @keyframes rewardIncomming {
	0% {
		opacity: 0;
		transform: scale(.2)
	}
	50% {
		opacity: 1;
		transform: scale(1.1)
	}
	80% {
		opacity: 1;
		transform: scale(1.15)
	}
	  100%
	  {
		opacity: 1;
		transform: scale(.8)
	  }
  }
.cookie-wrapper
{
	height:100vh;
	height: var(--vh100);
	width:100vw;
	pointer-events: none;
}
.cookie-wrapper.active
{
	pointer-events: initial;
	
}
.cookie-wrapper.active .cookie-underlay
{
	opacity: .95;
}
.cookie-wrapper .cookie-underlay
{
	background: linear-gradient(to bottom, rgba(78,53,122,1) 0%,rgb(110 62 195) 100%);
	opacity:0;
	transition:.5s ease-in;
	height:100%;
	width:100%;
	z-index:6;
	position:absolute;
	backdrop-filter:blur(50px);
	-webkit-backdrop-filter: blur(20px);
}
[id="cookie-notice"]
{
	position:fixed;
	transform:translateY(150%);
	transition: .5s cubic-bezier(0.27, -0.14, 0.58, 1.47);
	border:2px #11004c solid;
	z-index:33;
	bottom:0;
	margin:20px;
	background:#000000;
	padding:20px;
	font-size:20px;
	display:flex;
	flex-direction:column;
	text-align:left;
}
.cookie-wrapper.active [id="cookie-notice"]
{
	transform:translateY(0);
}
[id="cookie-notice"] svg 
{
	width:75px;
	height:75px;
}
[id="cookie-notice"] p ,
[id="cookie-notice"] p  a
{
	font-family:system-ui;
	font-size:18px;
}
[id="cookie-notice"] a 
{
	color:#fff;
}
[id="cookie-notice"] h2 
{
	color:#ff9738;
	margin:0;
}
[id="cookie-notice"] a.btn 
{
	width:100%;
	box-sizing:border-box;
	font-size:25px;
	text-align:center;
	border:2px solid ;
	border-color:#ff9838;
	margin-top:15px;
	padding:10px;
}
[id="wormhole_holder"],
[id="hyperspace_holder"]
{
	pointer-events:none;
	position:fixed;
	left:0;
	top:0;
	z-index: 0;
	transition:1s
}

[id="hyperspace_holder"]
{
	z-index: 1 !important;
}
[id="wormhole_holder"].transparant,
[id="hyperspace_holder"].transparant 
{
	opacity: 0;
}

.animated-border
{
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content: center;
	position: relative;
}

.day .highlight
{
	white-space:nowrap;
}

.grade2text
{
	font-size:32px;
	white-space:pre-line;
}
.badgeObtained
{
	font-size:18px;
	padding:10px 15px;
	border-radius:20px;
	display: none;
	text-align:center !important;
}
.badgeObtained.ch-r
{
	background:#0000002e;
}
.badgeObtained.ch-r:after
{

	margin-left:10px;
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" viewBox="0 0 12 12"%3E%3Cpath fill="white" d="M4.7 10c-.2 0-.4-.1-.5-.2c-.3-.3-.3-.8 0-1.1L6.9 6L4.2 3.3c-.3-.3-.3-.8 0-1.1c.3-.3.8-.3 1.1 0l3.3 3.2c.3.3.3.8 0 1.1L5.3 9.7c-.2.2-.4.3-.6.3Z"%2F%3E%3C%2Fsvg%3E')
}
.wrap {
	position: relative;
	}
  
  .slider {
	height: auto;
	overflow: hidden;
	}
  .slider__row {
	display: flex;
	flex-direction: column;
	position: relative;
	top: 0;
	left: 0;
	height: auto;
	overflow: hidden;
	text-align: right;
	transition: 0.5s;
}
.badgesBook
{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	padding: 10px;
}
.badgesBook  img 
{
	width:100%;
}
.badgesBook .empty
{
	position:relative;
}
.badgesBook .empty img {
	opacity:.6;
	filter:contrast(.1);
}

.badgesBook .empty.badgesLoading:after
{
	position:absolute;
	left:0;
	top:0;
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="110" height="110" viewBox="0 0 24 24"%3E%3Cpath fill="none" stroke="white" stroke-dasharray="15" stroke-dashoffset="15" stroke-linecap="round" stroke-width="2" d="M12 3C16.9706 3 21 7.02944 21 12"%3E%3Canimate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15%3B0"%2F%3E%3CanimateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12%3B360 12 12"%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E')
}

[badgesinterface="type:next"],
[badgesinterface="type:back"]
{
	width:50px;
	height:50px;
	max-width:50px;
	max-height:50px;
	min-width:50px;
	min-height:50px;
	align-items:center;
	display:flex;
	border:1px solid #fff;
	background:#ffffff30;
	border-radius:100%;
	justify-content:center;
	transition:.2s cubic-bezier(0.25, 0.1, 0, 1.01);
}
[badgesinterface="type:next"]:active,
[badgesinterface="type:back"]:active
{
	transform:scale(.8)
}
[id="badgesBookType"]
{
	color: #FF9800;
	font-family: 'headers';
}
[swipe-close="seasonalQuest"]
{
	z-index:4;
	text-shadow: 0px 2px #000, 0px -1px #000, -1px 0px #000, 1px 0px #000;
}
.top-degrade:before
{
	content:'';
	top:0;
	left:0;
	width:100%;
	z-index:3;
	height:120px;
	position:absolute;
	background: linear-gradient(to bottom, rgba(78,53,122,1) 0%,rgba(78,53,122,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
[dom-removable="seasonalQuest"] h4
{
	z-index:4;
	padding:0 10px;
	margin-top: 25px;
	margin-bottom: 15px;
	font-size: 26px;
	text-shadow: 0 2px #000000, 0 -1px #000000, 1px 0px #000000, -1px 0 #000000;
}
.time_remaining
{
	display:flex;
	text-align:left;
	align-items:center;
	gap:5px;
	height: 50px;
	background: #0000006e;
	border-radius: 50px 5px 5px 50px;
	width: fit-content;
	padding: 0 10px;
	box-shadow: inset 0 -1px #ffffff6e, inset 0 1px #000;
	text-shadow: 0 2px #180042, 0 -1px #180042, 1px 0px #180042, -1px 0 #180042;
}
.time_remaining svg
{
	height:35px;
	width:35px;
	filter: drop-shadow(0px 0px 3px #000000);
}
.time_remaining h5
{
	display:inline-block;
	color:#b286ff;
	margin:0;
	font-size: 13px;
}
.monthly_challenge_vip_pass
{
	transition:.2s;
	overflow:hidden;
	font-family: headers;
	position:relative;
	box-shadow:inset 0 -3px #00000073,inset 0 -4px 4px #ffffff78;
	border:1px solid #000000c2;
	font-size: 20px;
	display:flex;
	text-shadow: 0 2px #463500, 0 -1px #463500, 1px 0px #463500, -1px 0 #463500;
	align-items:center;
	padding:10px;
	border-radius:5px;
	background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}
.monthly_challenge_vip_pass:active
{
	scale:.8;
}
.monthly_challenge_vip_pass:after
{
	position:absolute;
	top:-50%;
	left:0;
	width:200%;
	height:100%;
	opacity:.3;
	background:#fff;
	z-index:2;
	content:'';
	border-radius:100%;
}
.monthly_challenge_vip_pass:before
{
  	filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 40%));
	width:30px;
	display:block;
	margin-right:5px;
	content:'';
	height:32px;
	background-color:#463500;
	-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30px" height="30px" viewBox="0 0 24 24"%3E%3Cg fill="none"%3E%3Cpath d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"%2F%3E%3Cpath fill="currentColor" d="M12.987 5.74a2 2 0 1 0-1.97.002l-.01.018c-.655 1.367-1.565 3.325-2.97 4.06c-1.154.603-2.81.3-4.04.074a1.5 1.5 0 1 0-1.772 1.58l2.948 7.61A3 3 0 0 0 7.97 21h8.06a3 3 0 0 0 2.797-1.916l2.947-7.61a1.5 1.5 0 1 0-1.767-1.624c-1.259.163-2.882.371-4.044-.236c-1.377-.72-2.3-2.543-2.976-3.874Z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}
.challenge_progress_wrapper
{
	margin-top:-5px;
	display:flex;
	gap:15px;
	align-items:center;
	border-top: 2px solid #ffffffa8;
	width:-webkit-fill-available;
	background:#4e357a;
	/* background:
	linear-gradient(63deg, #4e357a 23%, transparent 23%) 7px 0,
	linear-gradient(63deg, transparent 74%, #4e357a 78%),
	linear-gradient(63deg, transparent 34%, #4e357a 38%, #4e357a 58%, transparent 62%)#60488b; */
	background-size: 16px 48px;
	border-radius: 0 0 20px 20px;
	padding: 10px 30px;
}
.challenge_progress_wrapper img 
{
	width:40px;
}
.challenge_progress_wrapper .pre,
.challenge_progress_wrapper .post,
.monthly_challenge_step .pre,
.cursor-wrapper .pre
{
	scale:.7;
	display:flex;
	align-items:center;
	border-radius:3px;
	justify-content:center;
	transform:rotate(-45deg);
	border:4px solid;
	border-top-color:#fce475;
	border-bottom-color:#fce475;
	border-right-color:#dc8b2d;
	border-left-color:#dc8b2d;
	box-shadow:inset -1px 1px 2px #00000073,inset 0 1px 2px #00000073, 0px 0px  5px #0009;
	width: 30px;
	height: 30px;
	max-width: 30px;
	max-height: 30px;
	min-width: 30px;
	min-height: 30px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e39c31+0,e2ac5a+50,e0942f+51,e0942f+100 */
	background: linear-gradient(-135deg, #e39c31 0%,#e2ac5a 50%,#e0942f 51%,#e0942f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.cursor-wrapper .pre
{
	transform: rotate(315deg) scale(.9);
	filter:grayscale();
}
.cursor-wrapper .pre span 
{
	rotate:45deg;
	font-size:28px;
}

.monthly_challenge_step:not(.completed) .pre
{
	filter:grayscale();
}

.monthly_challenge_step:not(.completed)
{
}

.monthly_challenge_step .pre
{
	scale: 1.1;
	position:relative;
	z-index: 3;
}
.monthly_challenge_step:before
{
	border: 3px #a09aa3 solid;
	left:calc(50% - 3px);
	content:'';
	height: calc(100% - 3px);
	top: 0px;
	position:absolute;
	z-index: 2;
}
.monthly_challenge_step:nth-child(102):before,
.monthly_challenge_step.laatste:before
{
	height: calc(50% - 3px);
}
.monthly_challenge_step.completed:after
{
	left:calc(50% - 3px);
	height: 100%;
	top: -50%;
	width:6px;
	background: #e3a448;
	position:absolute;
	content:'';
	z-index: 2;
}
.monthly_challenge_step
{
	position:relative;
	display:flex;
	/* Symmetrisch: de beloningsdoos hoort even veel lucht boven als onder te
	   hebben. Stond op 8px, maar de (kapotte) :first-child-regel legde er
	   bovenop 20px top-padding op ELKE rij — vandaar de scheve verdeling.
	   14+14 houdt de rijhoogte precies gelijk aan wat 20+8 gaf, zodat de
	   VirtualList-itemHeight klopt zonder herberekening. */
	padding: 14px 0;
	align-items:center;
	min-height: auto;
	justify-content:space-evenly;
	border-top: 1px solid #c8c1d8;
	border-bottom: 2px solid #000000;
	/* content-visibility: auto; */
	/* animation: glowBottom infinite 2s alternate; */
	box-shadow: inset 0 -10px 10px #c19fff82;
	border-bottom: 3px solid #1a0048;
	border-top: 1px solid #c19eff;
}

.monthly_challenge_step:nth-child(102),
.monthly_challenge_step.laatste
{
	padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
}
.monthly_challenge_step.completed
{
	
	background: linear-gradient(to bottom, #6600ca 0%,rgb(10 16 155) 100%);
}
.monthly_challenge_step:after
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100px;
	content:'';
	opacity:.35;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
	background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
/* GEEN :first-child/:last-child meer op een stap. VirtualList zet elke rij in
   een EIGEN wrapper-div (public/js/virtualList.js), dus élke stap is zowel het
   eerste als het laatste kind van zijn wrappertje: de 20px top-padding en het
   weggehaalde randje golden daardoor voor de hele ladder. Zichtbaar gevolg:
   boven de beloningsdoos stond 20px en eronder 8px — de rij zag er scheef uit.
   Dezelfde valkuil waarvoor de renderer al 'odd'/'laatste' als expliciete
   klassen meegeeft (zie seasonalQuestStepHTML); 'eerste' hoort in dat rijtje.
   De rijhoogte blijft gelijk (20+8 = 14+14) zodat VirtualList, die met één
   vaste itemHeight rekent, niet uit de pas gaat lopen. */
.monthly_challenge_step.eerste
{
	border-top: none;
}
.monthly_challenge_step.laatste
{
	border-bottom: none;
}
.monthly_challenge_step .pre span,
.challenge_progress_wrapper .pre span,
.challenge_progress_wrapper .post span
{text-shadow: 0 2px #463500, 0 -1px #463500, 1px 0px #463500, -1px 0 #463500;color:#463500;color:#fff;transform:rotate(45deg);font-size: 150%;}

[dom-removable="seasonalQuest"] .top_overlayed:after
{
}
.monthly_challenge_steps
{
	overflow:auto;
	/* padding-bottom: calc(1em + env(safe-area-inset-bottom)); */
	/* position: relative; */
	overflow: hidden;
	overflow-y: scroll;
	position: fixed;
	contain: strict;
	margin-top: calc(252px + env(safe-area-inset-top));
	 /* or scroll-position */
	height: calc(100vh - 252px - env(safe-area-inset-top));
	height: calc(var(--vh100) - 252px - env(safe-area-inset-top));
	width: 100vw;
	max-width: 100vw;
	touch-action: pan-y;
	overscroll-behavior: none;
}
.reward_wrapper
{
	position:relative;
	z-index: 2;
	display: flex;
	justify-content: center;
}
/* Uniforme pass-lock (spec juli 2026): zelfde stijl als de vergrendelde
   energy-islands — donkere cirkel met gouden slot, gecentreerd op de tegel,
   inhoud gedimd (zie .energy_eiland.vergrendeld). De oude gouden hoek-padlock
   (content-url hieronder) is vervangen door een background-image in de cirkel. */
.reward_wrapper.locked:before,
.gift.locked:before,
.personal_quests.vip:before
{
	z-index:3;
	content:'';
	position:absolute;
	/* Linksboven i.p.v. gecentreerd: midden op de tegel dekte het slot precies
	   de beloning af, en dan is niet te zien WAT er op slot zit. Kleiner ook —
	   52px vulde de halve tegel. */
	left:6px;
	top:6px;
	right:auto;
	translate:none;
	width:34px;
	height:34px;
	border-radius:50%;
	background-color:rgba(0,0,0,.55);
	background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23ffd257" d="M12 17a2 2 0 0 0 2-2a2 2 0 0 0-2-2a2 2 0 0 0-2 2a2 2 0 0 0 2 2m6-9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2h1V6a5 5 0 0 1 5-5a5 5 0 0 1 5 5v2h1M12 3a3 3 0 0 0-3 3v2h6V6a3 3 0 0 0-3-3Z"/%3E%3C/svg%3E');
	background-repeat:no-repeat;
	background-position:center;
	background-size:21px;
	box-shadow:0 2px 10px rgba(0,0,0,.6);
}
/* inhoud gedimd zoals het vergrendelde eiland (::before is geen element-kind,
   het slot zelf blijft dus scherp) */
.reward_wrapper.locked > *,
.gift.locked > *
{
	filter:grayscale(1) brightness(.55);
}
.dashboard_section__quests:not(.vip-enabled) .personal_quests.vip > *
{
	filter:grayscale(1) brightness(.6);
}
/* mét actieve vip-pass géén slot meer op de vip-challenges — de oude
   verbergregel richtte zich op :after terwijl het slot een :before is,
   waardoor het slot na activatie bleef staan */
.vip-enabled .personal_quests.vip:before
{
	display:none;
}
/* kleinere slot-cirkel op de compacte daily-streak-tegels */
.daily_rewards_wrapper .locked:before
{
	width:40px;
	height:40px;
	background-size:24px;
}
.reward_free,
.reward_vip
{
	/* overflow zichtbaar: de getallen staan op bottom:-25px onder de icoontjes en
	   brede bedragen liepen anders buiten de kaart → werden weggeknipt ("…268").
	   VASTE hoogte (niet min-height) blijft bewust: deze rijen worden
	   gevirtualiseerd (VirtualList, zie virtualList.js) met ÉÉN vaste rijhoogte
	   voor de hele lijst — een rij die door wrappende content hoger/lager uitvalt
	   dan die vaste hoogte overlapt de volgende stap of laat een gat vallen.
	   flex-wrap staat WEL weer aan (content mag wrappen): de hoogte is nu
	   gedimensioneerd op het echte worst-case (2 icoonregels, zie hieronder) i.p.v.
	   content geforceerd op één te smalle regel te persen. Productie-data (juli-
	   snapshot): 82x 1 item, 65x 2 items, 23x 3 items per tier — bij 44px-icoontjes
	   passen 2 items naast elkaar (geen wrap nodig), enkel 3-item-tiers wrappen
	   naar een 2e regel. */
	overflow:visible;
	position:relative;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content:center;
	width: 30vw;
	height: 146px;
	box-sizing: border-box;
	padding: 10px 8px 26px; /* extra onder: ruimte voor de bedragen onder de icoontjes */
	border-radius: 5px;
	border: 1px solid #ffffff8f;
	box-shadow: 0 0px 15px #ffffffad, inset 0 0px 25px #000000;
}
.reward_free:after,
.reward_vip:after
{
	    content: '';
	    display: block;
	    width: calc(100% - 10px);
	    height: 30px;
	    margin: 5px;
	    top: 0;
	    left: 0;
	    pointer-events: none;
	    border-radius: 5px;
	    position: absolute;
	    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	    background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
.reward_free img,
.reward_vip img
{width: 44px;height: 44px;flex-shrink:0;filter: drop-shadow(0 0 5px white);}
.reward_vip
{
	/* background: radial-gradient(ellipse at center, #feffff 0%,#e0942f 100%); */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/* border-radius:10px; */
	/* border: 3px solid #ffb300; */
}
.claim_activate_attention
{
	border-radius:3px;
	position:absolute;
	top: -25px;
	width: 140px;
	white-space: nowrap;
	/* animation: bounce3up 2s ease infinite; */
	animation:infinite 3s bounce4up;
	height:40px;
	padding:1px;
	background: #000;
	text-shadow: 0 2px #463500, 0 -1px #463500, 1px 0px #463500, -1px 0 #463500;
	transform: translate3d(-50%,0,0);
	z-index: 3;
	clip-path: polygon(50% 100%, 100% 80%, 100% 0, 0 0, 0 80%);
	box-shadow: 0 0px 40px #000;
	z-index: 8;
	contain: strict;
}
.day .claim_activate_attention,
.week .claim_activate_attention,
.month .claim_activate_attention
{
	display:none;
}
.claimable .claim_big
{
	display:block;
	top:unset;
	bottom:40px !important;
	clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 0 100%, 0 20%) !important
}
.claimable .claim_big .claim_activate_attention_body
{
	line-height:45px;
	clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 0 100%, 0 20%) !important;
}

.month .claimable:not(.vip) .claim_activate_attention,
.vip-enabled .personal_quests.vip.claimable .claim_activate_attention
{
	display:inline-block;
	margin-top:5px;
	
}
@keyframes bounce4up {
	
	from
	{
		transform: translate3d(0, 0,0);
	}
	50%
	{
		transform: translate3d(0, -15px,0);	
	}
	to
	{
		transform: translate3d(0, 0,0);
	}
}
@keyframes bounce3up {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0)translateX(-50%)scaleY(.95);}
	40% {transform: translateY(-30%)translateX(-50%)scaleY(1.05);}
	60% {transform: translateY(-15%)translateX(-50%);}
}
.claim_activate_attention_body
{
	overflow:hidden;
	font-size:20px;
	border-radius:3px;
	line-height:35px;
	padding: 0 10px;
	box-sizing: border-box;
	width:100%;
	text-align: center;
	height:100%;
	background: #00e914;
	clip-path: polygon(50% 100%, 100% 80%, 100% 0, 0 0, 0 80%);
}
.streak_cursor_wrapper .claim_activate_attention_body
{
	background:#890be6;
}

.claim_activate_attention_body:after
{
	position:absolute;
	width:200%;
	height:100%;
	content:'';
	border-radius:100%;
	background:#fff;
	opacity:.5;
	left:-50%;
	top:-50%;
	
}
.justify-center
{
	justify-content:center;
}
.position-relative
{
	position:relative;
}
.shiny
{
	position:absolute;
	height:100%;
	opacity:.75;
	width:70px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+50,ffffff+100&0+0,1+50,0+100 */
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	transform:skewX(-20deg);
	animation:shine infinite 5s;
}


@keyframes shine {
	from
	{
		transform: translateX(-300%)skewX(-20deg);
	}
	20%
	{
		transform: translateX(300%)skewX(-20deg);
	}
	to
	{
		transform: translateX(300%)skewX(-20deg);
		
	}
}



.clockEl
{
	width:30px;
	height:30px;
	border: 0px solid #fff;
	border-radius:100%;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
}
.clockLegLong,
.clockLegShort
{
	width:3px;
	height:100%;
	padding-bottom:0%;
	position:absolute;
	display:flex;
	
	transform:rotate(45deg);
}
.clockLegLong
{
	align-items:baseline;
	animation: rotate 8s infinite linear;
	will-change: transform;
}
.clockLegShort
{
	align-items: unset;
	animation: rotate 10s infinite linear;
	will-change: transform;
}
.clockLegLong:after,
.clockLegShort:after
{
	width:3px;
	height: 50%;
	border-radius:4px;
	position:absolute;
	content:'';
	box-sizing:border-box;
	background:#fff;
}
.clockLegShort:after
{
	height: 35%;
	top: 20%;
}


@keyframes rotate {
	from
	{
	transform:rotate(0);
	}

	to
	{
	transform:rotate(360deg);
		
	}
}
.boosters 
{
	display:flex;
	justify-content: center;
	gap: 5px;
	font-size: 18px;
	position:relative;
	text-shadow: 0 2px black, 0 -1px black, 1px 0px black, -1px 0 black;
	z-index:3;
}
.modelocked:before
{
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" viewBox="0 0 20 20"%3E%3Cpath fill="white" d="M15 9h-1V6c0-2.2-1.8-4-4-4S6 3.8 6 6v3H5c-.5 0-1 .5-1 1v7c0 .5.5 1 1 1h10c.5 0 1-.5 1-1v-7c0-.5-.5-1-1-1zm-4 7H9l.4-2.2c-.5-.2-.9-.8-.9-1.3c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5c0 .6-.3 1.1-.9 1.3L11 16zm1-7H8V6c0-1.1.9-2 2-2s2 .9 2 2v3z"%2F%3E%3C%2Fsvg%3E')

}
.boosters > div
{
	
	border-radius:5px;
	padding: 3px 15px;
	gap:5px;
	opacity:1 !important;
	display:flex;
	align-items:center;
}
.boosters > div.active
{
}
.boosters > div.active:before
{
  filter: drop-shadow(0px 2px 1px rgb(0 0 0));
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="15" height="15" viewBox="0 0 16 16"%3E%3Cpath fill="lime" d="M13.5 2L6 9.5L2.5 6L0 8.5l6 6l10-10z"%2F%3E%3C%2Fsvg%3E')
}

.boosters > div.inactive
{
}
.boosters > div.inactive:before
{
  filter: drop-shadow(0px 2px 1px rgb(0 0 0));
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="15" height="15" viewBox="0 0 16 16"%3E%3Cpath fill="red" d="M15.854 12.854L11 8l4.854-4.854a.503.503 0 0 0 0-.707L13.561.146a.499.499 0 0 0-.707 0L8 5L3.146.146a.5.5 0 0 0-.707 0L.146 2.439a.499.499 0 0 0 0 .707L5 8L.146 12.854a.5.5 0 0 0 0 .707l2.293 2.293a.499.499 0 0 0 .707 0L8 11l4.854 4.854a.5.5 0 0 0 .707 0l2.293-2.293a.499.499 0 0 0 0-.707z"%2F%3E%3C%2Fsvg%3E')
}
.block_bg
{
	display:flex;
	gap: 5px 20%;
	position:absolute;
	left:0;
	top:0;
	max-width:100%;
	max-height:100%;
	z-index: 0;
	flex-wrap:wrap;
}
.block_bg:after
{
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#de47ac+0,3c295d+47,3c295d+100&0.5+0,1+100 */
	background: linear-gradient(to right, rgba(222,71,172,0.5) 0%,rgba(60,41,93,1) 50%, rgba(222,71,172,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background: linear-gradient(to right,rgba(60,41,93,.95) 0%, rgb(156 39 176 / 59%) 50%, rgba(60,41,93,.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	
}
.block_bg div 
{
	min-width: 24px;
	min-height: 24px;
	max-width: 24px;
	max-height: 24px;
	rotate:45deg;
    background-color: #b6a4d4;
	position:relative;
}
.block_bg div:nth-child(odd)
{
	rotate:-45deg;
}

.block_bg div:nth-child(3n+2)
{
	min-width: 50px;
	min-height: 50px;
	max-width: 50px;
	max-height: 50px;
}

.btn-orange .modeRanked,
.btn-orange .modeMissions,
.btn-orange .modeClassic
{
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="100%" height="100%" viewBox="0 0 24 24"%3E%3Cg fill="white"%3E%3Cpath d="M22 8.162v.073c0 .86 0 1.291-.207 1.643c-.207.352-.584.561-1.336.98l-.793.44c.546-1.848.729-3.834.796-5.532l.01-.221l.002-.052c.651.226 1.017.395 1.245.711c.283.393.283.915.283 1.958Zm-20 0v.073c0 .86 0 1.291.207 1.643c.207.352.584.561 1.336.98l.794.44c-.547-1.848-.73-3.834-.797-5.532l-.01-.221l-.001-.052c-.652.226-1.018.395-1.246.711C2 6.597 2 7.12 2 8.162Z"%2F%3E%3Cpath fill-rule="evenodd" d="M12 2c1.784 0 3.253.157 4.377.347c1.139.192 1.708.288 2.184.874c.476.586.45 1.219.4 2.485c-.172 4.349-1.11 9.78-6.211 10.26V19.5h1.43a1 1 0 0 1 .98.804l.19.946H18a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1 0-1.5h2.65l.19-.946a1 1 0 0 1 .98-.804h1.43v-3.534c-5.1-.48-6.038-5.912-6.21-10.26c-.051-1.266-.076-1.9.4-2.485c.475-.586 1.044-.682 2.183-.874A26.374 26.374 0 0 1 12 2Zm.952 4.199l-.098-.176C12.474 5.34 12.284 5 12 5c-.284 0-.474.34-.854 1.023l-.098.176c-.108.194-.162.29-.246.354c-.085.064-.19.088-.4.135l-.19.044c-.738.167-1.107.25-1.195.532c-.088.283.164.577.667 1.165l.13.152c.143.167.215.25.247.354c.032.104.021.215 0 .438l-.02.203c-.076.785-.114 1.178.115 1.352c.23.174.576.015 1.267-.303l.178-.082c.197-.09.295-.135.399-.135c.104 0 .202.045.399.135l.178.082c.691.319 1.037.477 1.267.303c.23-.174.191-.567.115-1.352l-.02-.203c-.021-.223-.032-.334 0-.438c.032-.103.104-.187.247-.354l.13-.152c.503-.588.755-.882.667-1.165c-.088-.282-.457-.365-1.195-.532l-.19-.044c-.21-.047-.315-.07-.4-.135c-.084-.064-.138-.16-.246-.354Z" clip-rule="evenodd"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	width:32px;
  filter: drop-shadow(0px 1px 1px rgb(0 0 0));
	
}

.btn-orange .modeMissions
{
	content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="100%" height="100%" viewBox="0 0 512 512"%3E%3Cpath fill="white" d="M507.31 84.69L464 41.37c-6-6-14.14-9.37-22.63-9.37H288V16c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v16H56c-13.25 0-24 10.75-24 24v80c0 13.25 10.75 24 24 24h385.37c8.49 0 16.62-3.37 22.63-9.37l43.31-43.31c6.25-6.26 6.25-16.38 0-22.63zM224 496c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V384h-64v112zm232-272H288v-32h-64v32H70.63c-8.49 0-16.62 3.37-22.63 9.37L4.69 276.69c-6.25 6.25-6.25 16.38 0 22.63L48 342.63c6 6 14.14 9.37 22.63 9.37H456c13.25 0 24-10.75 24-24v-80c0-13.25-10.75-24-24-24z"%2F%3E%3C%2Fsvg%3E')

}
.btn-orange .modeClassic
{
	 content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="100%" height="100%" viewBox="0 0 24 24"%3E%3Cpath fill="white" d="M6.5 21H3c-.55 0-1-.45-1-1V10c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1zm7.25-18h-3.5c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h3.5c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM21 11h-3.5c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1H21c.55 0 1-.45 1-1v-8c0-.55-.45-1-1-1z"%2F%3E%3C%2Fsvg%3E')

}
.modeRanked div
{	
	 -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="100%" height="100%" viewBox="0 0 24 24"%3E%3Cg fill="currentColor"%3E%3Cpath d="M22 8.162v.073c0 .86 0 1.291-.207 1.643c-.207.352-.584.561-1.336.98l-.793.44c.546-1.848.729-3.834.796-5.532l.01-.221l.002-.052c.651.226 1.017.395 1.245.711c.283.393.283.915.283 1.958Zm-20 0v.073c0 .86 0 1.291.207 1.643c.207.352.584.561 1.336.98l.794.44c-.547-1.848-.73-3.834-.797-5.532l-.01-.221l-.001-.052c-.652.226-1.018.395-1.246.711C2 6.597 2 7.12 2 8.162Z"%2F%3E%3Cpath fill-rule="evenodd" d="M12 2c1.784 0 3.253.157 4.377.347c1.139.192 1.708.288 2.184.874c.476.586.45 1.219.4 2.485c-.172 4.349-1.11 9.78-6.211 10.26V19.5h1.43a1 1 0 0 1 .98.804l.19.946H18a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1 0-1.5h2.65l.19-.946a1 1 0 0 1 .98-.804h1.43v-3.534c-5.1-.48-6.038-5.912-6.21-10.26c-.051-1.266-.076-1.9.4-2.485c.475-.586 1.044-.682 2.183-.874A26.374 26.374 0 0 1 12 2Zm.952 4.199l-.098-.176C12.474 5.34 12.284 5 12 5c-.284 0-.474.34-.854 1.023l-.098.176c-.108.194-.162.29-.246.354c-.085.064-.19.088-.4.135l-.19.044c-.738.167-1.107.25-1.195.532c-.088.283.164.577.667 1.165l.13.152c.143.167.215.25.247.354c.032.104.021.215 0 .438l-.02.203c-.076.785-.114 1.178.115 1.352c.23.174.576.015 1.267-.303l.178-.082c.197-.09.295-.135.399-.135c.104 0 .202.045.399.135l.178.082c.691.319 1.037.477 1.267.303c.23-.174.191-.567.115-1.352l-.02-.203c-.021-.223-.032-.334 0-.438c.032-.103.104-.187.247-.354l.13-.152c.503-.588.755-.882.667-1.165c-.088-.282-.457-.365-1.195-.532l-.19-.044c-.21-.047-.315-.07-.4-.135c-.084-.064-.138-.16-.246-.354Z" clip-rule="evenodd"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}
.modeClassic div
{
	 -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="100%" height="100%" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M6.5 21H3c-.55 0-1-.45-1-1V10c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1zm7.25-18h-3.5c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h3.5c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM21 11h-3.5c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1H21c.55 0 1-.45 1-1v-8c0-.55-.45-1-1-1z"%2F%3E%3C%2Fsvg%3E')
}
.modeMissions div
{
	 -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="100%" height="100%" viewBox="0 0 512 512"%3E%3Cpath fill="currentColor" d="M507.31 84.69L464 41.37c-6-6-14.14-9.37-22.63-9.37H288V16c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v16H56c-13.25 0-24 10.75-24 24v80c0 13.25 10.75 24 24 24h385.37c8.49 0 16.62-3.37 22.63-9.37l43.31-43.31c6.25-6.26 6.25-16.38 0-22.63zM224 496c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V384h-64v112zm232-272H288v-32h-64v32H70.63c-8.49 0-16.62 3.37-22.63 9.37L4.69 276.69c-6.25 6.25-6.25 16.38 0 22.63L48 342.63c6 6 14.14 9.37 22.63 9.37H456c13.25 0 24-10.75 24-24v-80c0-13.25-10.75-24-24-24z"%2F%3E%3C%2Fsvg%3E')
}
.launchBlocks .btn-wrapper,
.launchBlocks .btn-orange
{
	min-width: 80%;
}
.launchBlocks .btn-orange
{
	width:-webkit-fill-available;
	align-items: center;
}

.launchBlocks .btn-orange::after, [id="missionPreLaunch"] .btn-orange::after, [swipe-close].btn-orange::after, .btn-orange::after
{
	background:#fff;
	height:45%;
	opacity:.45
}
.inventory_grid > div
{
	box-shadow:inset 0 4px 44px #000000;
	border:1px solid #00093e;
}
.inventory_grid > div::after
{
	height:45%;
	z-index:-1;
}
.m_slots
{
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:10px;
	position:relative;
	gap:1px;
	background:#9701f9;
	background: linear-gradient(-5deg, rgba(154, 0, 255, 1) 0%, rgb(53 1 87) 55%, rgba(154, 0, 255, 1) 55%, rgba(154, 0, 255, 1) 100%);
	padding:2px;
	padding-top:20px;
	transition:.25s;
	border-radius: 0 !important;
}

.m_slots:before
{
	content:'EXTEND';
	position:absolute;
	top:2px;
}
.m_slots:first-child:before
{
	content:'boosters';
}
.m_slots:last-child:before
{
	content:'perks';
}
.m_slot
{
	background:#392658;
	box-shadow:inset 0 5px 15px #000;
	height: calc(20vw - 16px);
	width: calc(20vw - 16px);
	max-height: 70px;
	max-width: 70px;
	position:relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.inventory_count
{
	position:absolute;
	background:#7a5fa8;
	border:1px solid #ffffff;
	border-radius:100%;
	width:25px;
	height:25px;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 5px 5px #000;
	text-align:center;
	z-index: 2;
}
.inventory_count.empty
{
	content:'0';
	position:absolute;
	background:#ff1100;
}

[booster-remove]:before
{
	content:'-';
	position:absolute;
	right:-5px;
	top:-5px;
	font-size:18px;
	background:red;
	box-shadow:0 2px 7px #000;
	border-radius:100%;
	width:20px;
	height:20px;
	z-index: 3;
}

[id="factoryPass"] .ticket,
[id="factoryPass"] .btn-gold,
.gift .gift-factory
{
		background: radial-gradient(ellipse farthest-corner at right bottom, #f2a3ff 0%, #be23d8 8%, #8c07a3 30%, #6b007e 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #f2a3ff 8%, #bc1fd6 25%, #9d00b7 62.5%, #7d0092 100%);
		box-shadow: 0 2px 5px #000000, inset 0 -4px #79038d, inset 0 -5px #f8c8ff;
}
[id="factoryPass"] .custom_tns button.tns-nav-active
{
	background:#8e00a6;
}
[id="factoryPass"]  .vip-label .icon
{
	background:#8e00a6;
	-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M2 22V9.975L9 7v2l5-2v3h8v12H2Zm9-4h2v-4h-2v4Zm-4 0h2v-4H7v4Zm8 0h2v-4h-2v4Zm6.8-9.5h-4.625l.85-6.5H21l.8 6.5Z"%2F%3E%3C%2Fsvg%3E')
}
[id="factoryPass"] h2,
[id="factoryPass"] .ticket span
{
	font-size: 25px !important;
}

.m_slot.fp:after
{
	content:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" viewBox="0 0 512 512"%3E%3Cpath fill="%23B1B4B5" d="M376.749 349.097c-13.531 0-24.5-10.969-24.5-24.5V181.932c0-48.083-39.119-87.203-87.203-87.203c-48.083 0-87.203 39.119-87.203 87.203v82.977c0 13.531-10.969 24.5-24.5 24.5s-24.5-10.969-24.5-24.5v-82.977c0-75.103 61.1-136.203 136.203-136.203s136.203 61.1 136.203 136.203v142.665c0 13.531-10.969 24.5-24.5 24.5z"%2F%3E%3Cpath fill="%23FFB636" d="M414.115 497.459H115.977c-27.835 0-50.4-22.565-50.4-50.4V274.691c0-27.835 22.565-50.4 50.4-50.4h298.138c27.835 0 50.4 22.565 50.4 50.4v172.367c0 27.836-22.565 50.401-50.4 50.401z"%2F%3E%3Cpath fill="%23FFD469" d="M109.311 456.841h-2.525c-7.953 0-14.4-6.447-14.4-14.4V279.309c0-7.953 6.447-14.4 14.4-14.4h2.525c7.953 0 14.4 6.447 14.4 14.4v163.132c0 7.953-6.447 14.4-14.4 14.4z"%2F%3E%3C%2Fsvg%3E')
}
.xpProgressHolder
{
	width:-webkit-fill-available;
	display:flex;
	align-items:center;
	padding:10px 20px;
	box-sizing:border-box;
	/* margin: 8px; */
	border-Radius:20px;
	position: relative;
	overflow: hidden;
	/* border: 1px solid #a463e6; */
}
.arrow{
	position:relative;
	width:30px;
	height: 30px;
	cursor:pointer;
	/* border:solid 1px white; */
	transition:0.5s;
	overflow:hidden;
	background: #2e1950;
	box-shadow: 2px 0px 1px #000, -2px 0px 1px #000, 0px 2px 1px #000, 0 -2px 1px #000;
	}
  
  .arrow{
  /*  animation:borderAni 5s cubic-bezier(0, 0.6, 1, 0.4); */
		border:solid 2px white; 
	  border-radius:50%;
  }
  .arrow:after{
	position:absolute;
	display:block;
	content:"";
	color:white;
	width: 20px;
	height: 15px;
  /*   border:solid 1px;  */
	top:-1px;
	border-bottom:solid 2px;
	transform:translatex(4px);
  }
  
  .arrow:before{
	position:absolute;
	display:block;
	content:"";
	color:white;
	width: 8px;
	height: 8px;
  /*   border:solid 1px;  */
	border-top:solid 2px;
	border-left:solid 2px;
	top:50%;
	left:2px;
	transform-origin:0% 0%;
	transform:rotatez(-45deg);
  
  }
  .arrow:before{
   animation: aniArrow01 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
  }
  
  .arrow:after{
   animation: aniArrow02 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.5s;
  }
  
  
  @keyframes aniArrow01 {
	0% {
	  transform:rotatez(-45deg) translateY(30px) translateX(30px);
	}
	100% {
	  transform: rotatez(-45deg) translateY(-35px) translateX(-35px);
	}
  }
  
  
  @keyframes aniArrow02 {
	0% {
	  transform:translateX(45px);
	}
	100% {
	  transform:translateX(-44px);
	}
  }
  
  @keyframes borderAni{
	 0% {
	  border:solid 2px white;
	}
	100% {    
	  border:solid 2px white; 
	  border-radius:50%;
	}
  }
[scrollcontainer]
{
	touch-action: none !important;
	overflow: hidden;
	transition: 0.2s;
	box-sizing: border-box;
	position:relative;
	min-height: auto;
	max-height: -webkit-fill-available;
}
[scrollcontent]
{
	position:absolute;
	width: -webkit-fill-available;
	left:0;
	top: 0;
	transition: transform 0.2s cubic-bezier(0, 0.93, 0.25, 1);
}
.bottom_drawer.active .radial_stripes
{
	animation:rotate 20s infinite linear;
}
.reward_animated_bar {
  --delay: .5s;
  --timing: 1s;
  position: absolute;
  background: #fff;
	box-shadow:0 0px 20px #fff;
  transition: all var(--timing) linear;
  -webkit-animation-duration: var(--timing);
  animation-duration: var(--timing);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  }
  .reward_animated_bar.delay {
	animation-delay: var(--delay);
	-webkit-animation-delay: var(--delay);
  }
  .reward_animated_bar.top {
	top: 0;
	left: 0;
	width: 50%;
	height: 5px;
	}
  .reward_animated_bar.right {

	right:0;
	top:0;	
	width: 5px;
	height: 50%;
  }
  .reward_animated_bar.bottom {left: 10px;bottom:0;width: 50%;height: 5px;}
  .reward_animated_bar.left {
	left:0;
	top:0;	
	width: 5px;
	height: 50%;
	}
  @-webkit-keyframes h-move {
	0% {
		transform:translateX(-200%);
	}
	100% {
		transform:translateX(200%);
	}
  }
  @keyframes h-move {
	0% {
		transform:translateX(-200%);
	}
	100% {
		transform:translateX(200%);
	}
  }
  .reward_animated_bar.top,
  .reward_animated_bar.bottom {
	-webkit-animation-name: h-move ;
	animation-name: h-move;
  }
  @-webkit-keyframes v-move {
	0% {
		transform:translateY(-200%);
	}
	100% {
		transform:translateY(200%);
	}
  }
  @keyframes v-move {
	0% {
		transform:translateY(-200%);
	}
	100% {
		transform:translateY(200%);
	}
  }
  .reward_animated_bar.right,
  .reward_animated_bar.left {
	-webkit-animation-name: v-move;
	animation-name: v-move;
  }

.reward_animated_bars
{
	position:relative;
	overflow:hidden;
}
.distributionFrame
{
	left:0;
	top:0;
	position:fixed;
	width:100vw;
	height:100vh;
	height: var(--vh100);
	z-index: 3;
	pointer-events:none;
}
.distributionFrame .imgwrapper 
{
	position:fixed;
}
.distributionFrame .imgwrapper img
{
	width:100%;
	height:100%;
}
.distributionFrame .imgwrapper 
{
	transition: .9s cubic-bezier(0.8, 0.19, 0.7, 0.72);
}
.distributionFrame .imgwrapper img
{
	transition: .9s cubic-bezier(0.7, 0.28, 1, 1);
	
}

    .stardust {
		z-index:-1;
      width: 5px;
		border-radius:100%;
      height: 5px;
      background-color: gold;
      position: absolute;
      animation: trailAnimation 4s linear infinite; /* Should match the duration of the moveAnimation */
    }
  @keyframes trailAnimation {
    0% {
      opacity: 1;
      transform: translate3d(0,0,0);
    }
    100% {
      opacity: 0;
      transform: translate3d(var(--xDir),550px,0) scale(5); /* Adjust the height of the trail */
    }
  }
.dropcircle
{
	position:absolute;
	transform:translate3d(-50%,-50%,0) scale(0);
	top: 50%;
	left: 50%;
	border-radius:100%;
	z-index: -1;
	opacity:.75;
	transition: 1s;
	background:#fff;
}
.dropcircle.active
{
	opacity:0;
	transform: translate3d(-50%,-50%,0) scale(4);
}
.c_slidercontainer
{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap: 10px;
	padding-top: 30px;
}
.c_sliderwrapper
{
	gap:10px;
	display: flex;
	flex-direction: column;
}
.c_sliderwrapper > div
{
	align-items:center;
}
.v_value
{
	color:orange;
	font-size:30px
}
.daily_rewards *
{
	box-sizing:border-box;
}
.daily_rewards
{
	padding: 20px 0;
	width: 100vw;
}
.daily_rewards > div 
{
	gap:10px;
}
.daily_rewards h2 
{
	margin:0;
	margin-bottom:10px
}
.daily_rewards h3
{
	position:absolute;
	margin:0;
	padding:0;
	right:0;
	text-shadow: 0 2px black, 0 -2px black, 2px 0px black, -2px 0 black;
	bottom:0;
}

.daily_rewards .gift 
{
	width: 35vw;
	position:relative;
	align-items:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
	margin-bottom:10px;
}
.daily_rewards .gift .reward_free 
{
	width:100%;
	
}
.daily_rewards_wrapper
{
	overflow:auto;
	padding-top: 30px;
	/* flex-kind van .safetyWrapper: zonder min-height:0 krimpt hij nooit en
	   knipt de kolom in plaats van te scrollen; de onderruimte houdt de laatste
	   rij boven de vaste CLAIM ALL-knop */
	flex:1 1 auto;
	min-height:0;
	padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
.day_reward 
{
	width: 45vw !important;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	opacity:.5;
	transition:.25s ease;
	filter:grayscale()
}
.day_reward.is-active
{
	opacity:1;
	filter:initial;
}

.gift .reward_free
{
	padding:5px;
	width: 35vw !important;
	border-radius:0;
	flex-direction: column;
}
.gift .gift-vip,
.gift .gift-factory
{
	padding-top:5px;
	width: 100%;
	font-size:13px;
	border-top:1px solid #c5a2b0;
	background:none;
	box-shadow: none;
}

.gift .gift-free
{
	display:none;
}
.collectingMode .top_overlayed
{
	transform:translate3d(100%, 0, 0)
}
.collectingMode .top_overlayed_underlay
{
	transform:translate3d(0, calc(5rem + env(safe-area-inset-top)), 0)
}

.rewardsBorder
{
	box-sizing:border-box;
	position: fixed;
	top:0;
	left:0;
	/* content:''; */
	height:100vh;
	height: var(--vh100);
	contain: strict;
	width:100%;
	background: url(/public/img/cubelegend/rewardsBorder.png);
	background-size:cover;
	z-index: -1;
	background-size: 100% 100%; /* Cover the entire container */
	background-position: center center;
	background-repeat: no-repeat;
}
[dom-removable="vipPass"] .overflow-container,
[dom-removable="factoryPass"] .overflow-container
{
	padding:0;
}
.streak_cursor_wrapper
{
	left:-200px;
	position: fixed;
	z-index: 1;
	pointer-events: none;
	transition: .25s ease;
	contain:layout;
}
.day_reward h2 
{
	color:#ffffff78;
}
h2.current_day_streak
{
	transform:scale(1.4);
	color:#ffffff;	
}

.gift .reward_free:after
{
	content:initial;
}
.daily_rewards_wrapper .splide__arrow
{
	height:100%;
	width:25vw;
	border-radius:0;
	background:none;
	color:#fff;
    -webkit-tap-highlight-color: transparent;
}
.daily_rewards_wrapper .splide__arrow svg
{
	width:40px;
	height:40px;
	border-radius:100%;
	background:#fff;
	padding:10px;
}
.daily_rewards_wrapper .splide__arrow--prev
{
	left:0;
}
.daily_rewards_wrapper .splide__arrow--next
{
	right:0;
}

.personal_quests.claimable h1,
.vip-enabled .personal_quests.vip.claimable h1
{
	display:block;
	margin:0;
	width: 100%;
	text-shadow:none;
	text-align: left !important;
	text-shadow: 0 2px black, 0 -1px #0000007a, 1px 0px #0000007a, -1px 0 #0000007a;
}
.personal_quests
{
	/* border-radius:0; */
}
.claimable.quests_complete_reward_banner:before,
.quests_complete_reward.claimable .quests_complete_reward_banner:before,
.personal_quests.claimable h1:before,
.adventureClaimable .mission_objective_card__bottom__list__rewards:before
{
    position: absolute;
    height: 100%;
    content:'';
    opacity: .75;
    top:0;
    width: 250px;
    z-index:0;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,#ffffff 50%,rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: shimmer 2s infinite ease-out;
}
/* mission-kaart tabs: content vloeit in de kaart mee (base [tabcontent] is
   absoluut gepositioneerd voor full-screen lay-outs — hier ongewenst) */
.mission_objective_card__bottom [tabcontent]
{
	position:static;
	height:auto;
	overflow:visible;
}
/* de actieve rewards-tab moet zelf een flex-column zijn die de resterende
   hoogte van .mission_objective_card__bottom (ook flex-column) doorgeeft aan
   .mission_objective_card__bottom__list — anders heeft "flex:1" op de lijst
   niks om ten opzichte van te groeien en blijft ze op haar content-hoogte. */
.mission_objective_card__bottom [tabcontent="rewards"].active
{
	display:flex;
	flex-direction:column;
	flex:1;
	min-height:0;
}
.mission_tab_lijst
{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:6px 4px 70px; /* onder: ruimte voor de play/claim-knop */
	max-height:40vh;
	overflow-y:auto;
}
.mission_tab_leeg
{
	opacity:.65;
	text-align:center;
	padding:26px 12px;
	display:block;
}
/* de tabs gebruiken de klassieke leaderboard-rijen (.dashboard_section__rank);
   alleen de buitenste lijst scrollt, dus de sectie zelf niet */
.mission_tab_lijst .dashboard_section
{
	overflow:visible;
	flex-shrink:0;
}
/* stats-regel op één lijn houden; de staart mag afkappen, timeago staat vooraan */
.mission_tab_lijst .dashboard_section__misc__secondary
{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width:100%;
}

.adventureClaimable
{
	overflow:hidden !important;
	position: relative;
	background: linear-gradient(-5deg, rgba(88,0,147,1) 0%,rgba(154,0,255,1) 100%) !important;
	/* 2px zoals de basisrij — met 1px was een claimbare rij 2px lager dan een
	   geclaimde en verschoof alles eronder alsnog subtiel */
	border:2px solid #ffd76b !important;
	box-shadow:0 0 14px #ffd76b66;
	/* Spec 2026-07-22: GEEN extra padding-top meer — claimbare rijen moeten
	   exact even hoog zijn als geclaimde (rij-afstand mag niet verspringen).
	   De compacte TAP TO CLAIM-overlay (30px, top:-12px) dipt bewust een paar
	   pixel in de lege middenzone van de rij i.p.v. ruimte af te dwingen. */
}
.adventureClaimed
{
	background:#000000 !important;
	position: relative;
	overflow:hidden;
}
.adventureClaimed:before
{

		width:45px;
	height:45px;    
	background: linear-gradient(-42deg, rgba(88, 0, 147, 1) 0%,rgba(88, 0, 147, 1) 50%,rgba(154, 0, 255, 1) 50%, rgba(154, 0, 255, 1) 100%);
	border-radius:0 0 0 40px !important;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:2;
	position:absolute;
	top:-11px;
	right:-10px;
	content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.5 2L6 9.5L2.5 6L0 8.5l6 6l10-10z'/%3E%3C/svg%3E");

}
.adventureClaimed .mission_objective_card__bottom__list__rewards img
{
	filter:grayscale();
}
@keyframes shimmer {
	0% {
		transform: translate3d(-250%,0,0) skewX(-20deg);
	}
	70% {
		transform: translate3d(350%,0,0) skewX(-20deg);
	}
	100% {
		transform: translate3d(350%,0,0) skewX(-20deg);
	}
}
.quests_complete_reward_banner_content h3 
{
	display:none;
	margin:0;
	font-size:25px;
	margin-top: 5px;
	line-height: 25px;
}

.claimable .quests_complete_reward_banner_content h3 
{
	display:block;
	text-shadow: 0 2px black, 0 -1px #0000007a, 1px 0px #0000007a, -1px 0 #0000007a;
}
.number-spinner
{
	display:flex;
	margin:0 20px;
	height:100%;
	box-sizing:border-box;
}

.number-spinner input
{
	text-align:center;
	border-radius:0;
	background:#ffffff21;
	opacity:1 !important;
	border:1px solid #9383ae;
}
.number-spinner button 
{
	width:50px;
	background:none;
	border:1px solid #9383ae;
	color:#fff;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:40px;
}
.wheel__wrapper{
  margin: 10px auto 0;
  width: 90vw;
  height: 90vw;
  /* lage toestellen (feedback 14 sep): het wiel krimpt mee zodat kop, tabs,
     wiel én de voet (SPIN + SPIN ALL) samen in de zichtbare hoogte passen */
  --wiel: min(90vw, calc(var(--vh100) - 345px));
  width: var(--wiel);
  height: var(--wiel);
  padding: 0 5vw;
  position:relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 2s;
  border-radius: 100%;
}
.wheel__wrapper.outOfScreen
{
	transform: translateX(120vw) rotate(300deg);
}

.wheel__outer{
  width: calc(90vw - 16px);
  height: calc(90vw - 16px);
  width: calc(var(--wiel, 90vw) - 16px);
  height: calc(var(--wiel, 90vw) - 16px);
  border-radius:50%;
  position:relative;
  overflow:hidden;
  border:8px solid #fff;
  box-shadow:rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;
  transform: rotate(0deg);
}


.wheel__inner{
  width:100%;
  height:100%;
  background-size:cover;
  transition:transform 8s cubic-bezier(0.32, -0.15, 0, 0.86);
}

/* tier-eigen looks: factory = rood-paarse glans, vip = gouden glans */
[wheel="factory"] .wheel__outer
{
	border-color:#b0186a;
	box-shadow:0 0 22px #e02c8a99, 0 0 60px #7a1fb066, inset 0 0 30px #b0186a55;
	background:linear-gradient(135deg,#e02c8a33,#7a1fb033);
}
[wheel="factory"].wheel__wrapper
{
	background:radial-gradient(circle at 50% 42%, #e02c8a2e 0%, transparent 62%);
}
[wheel="vip"] .wheel__outer
{
	border-color:#e3a448;
	box-shadow:0 0 22px #ffd76b99, 0 0 60px #e3a44866, inset 0 0 30px #e3a44855;
	background:linear-gradient(135deg,#ffd76b33,#b8860b33);
}
[wheel="vip"].wheel__wrapper
{
	background:radial-gradient(circle at 50% 42%, #ffd76b2e 0%, transparent 62%);
}

/* €-bundels in de out-of-spins-dialoog; de 3-spin-bundel is uitgelicht */
.dialog_wrapper .dialog p .spin_bundles
{
	display:flex;
	gap:12px;
	justify-content:center;
	width:100%;
	margin-top:4px;
}
.spin_bundle
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:3px;
	padding:13px 20px;
	border-radius:10px;
	background:#38255a;
	border:1px solid #6631c3;
	cursor:pointer;
	position:relative;
}
.spin_bundle b { font-size:17px; }
.spin_bundle i { font-style:normal; font-size:14px; opacity:.85; }
.spin_bundle.best
{
	background:linear-gradient(to bottom,#ffa84c,#ff7b0d);
	border-color:#ffd76b;
	color:#000;
	box-shadow:0 0 18px #ffd76b88;
	transform:scale(1.08);
}
.spin_bundle.best em
{
	position:absolute;
	top:-11px;
	left:50%;
	transform:translateX(-50%);
	font-style:normal;
	font-size:10px;
	font-weight:bold;
	letter-spacing:.5px;
	background:#d10000;
	color:#fff;
	padding:2px 8px;
	border-radius:8px;
	border:1px solid #fff;
	white-space:nowrap;
}

/* Kansen-onthulling (App Store 3.1.1, Google Play): de ODDS-knop bij het rad,
   de koopdialoog en de mystery-box, en het kansenvenster zelf. De app
   centreert tekst globaal — de lijsten zetten links expliciet. */
.kansen_knop
{
	display:inline-flex;
	align-items:center;
	padding:3px 10px;
	margin-left:6px;
	border-radius:999px;
	border:1px solid #ffffff59;
	background:#ffffff14;
	font-size:11px;
	font-weight:700;
	letter-spacing:.08em;
	color:#fff;
	cursor:pointer;
	vertical-align:middle;
}
.kansen
{
	display:flex;
	flex-direction:column;
	gap:8px;
	width:100%;
	text-align:left;
}
.kansen_uitleg { display:block; font-size:13px; opacity:.85; }
.kansen_lijst
{
	display:flex;
	flex-direction:column;
	gap:2px;
	max-height:42vh;
	overflow-y:auto;
}
.kansen_rij
{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	gap:12px;
	padding:5px 8px;
	border-radius:6px;
	background:#ffffff0d;
	font-size:13px;
	text-align:left;
}
.kansen_rij b { font-weight:600; }
.kansen_rij small { margin-left:4px; font-weight:400; opacity:.65; }
.kansen_rij i { font-style:normal; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kansen_rij--groep { margin-top:6px; background:#6631c355; }
.kansen_regel { display:block; margin-top:12px; font-size:12px; opacity:.85; }

.wheel__prize{
  width: 120px;
  height: 120px;
  position:absolute;
  top:50%;
  display: flex;
  align-items: center;
  justify-content: center;
  left:50%;
  border-radius:50%;
  box-shadow:rgba(0,0,0,0.1) 0px 3px 0px;
  z-index:1000;
  background:#fff;
  transition:.1s;
  cursor:pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  transform: translate(-50%, -50%);
}

.wheel__prize.slicePassed
{
  transform: translate(-50%, -50%) rotate(10deg);
}

.wheel__prize img 
{
	width:80px;
	height:80px;
}
.wheel__prize:after{
  text-align:center;
  line-height:68px;
  color:#CCC;
  text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0,0,0,0.3);
  position: relative;
  z-index: 100000;
  width:68px;
  height:68px;
  display:block;
}

.wheel__prize:before{
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 28px 20px;
  border-color: transparent transparent #ffffff transparent;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
}
.wheel__prize__inner{
  width: 90%;
  height: 90%;
  border-radius:50%;
  background: #0a0022;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100 */
background: radial-gradient(ellipse at center, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  z-index:999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset,  rgba(0,0,0,0.4) 0px 0px 5px;
  /* background: rgb(255,255,255); */ /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
  /* background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); */ /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
  /* background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); */ /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.wheel__prize.primeGift .wheel__prize__inner
{
	background:#9C27B0
}


.wheel__prize__inner h2
{
	position:absolute;
	bottom:0;
}

.wheel__prize:active .wheel__prize__inner{
  box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset;
}


.wheel__shine{
  width: 80vw;
  height: 80vw;
  position:absolute;
  top:0;
  left:0;
  background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0.91) 9%, rgba(255,255,255,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(9%,rgba(255,255,255,0.91)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* IE10+ */
  background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  opacity:0.1;
  pointer-events: none;
}

:root {
  --theme-color-one: #025ba0;
  --theme-color-two: #9bc72b;
  --theme-color-three: #f0c517;
  --theme-color-four: #bf1724;
  --theme-color-five: #5cc9f4;
  --white: #fff;
  --black: #000;
  --grey: #999;
  background: var(--black);
  color: var(--white);
}


.light-bulbs {
  display: flex;
  justify-content: space-between;
  /* padding: 20px; */
  width: 500px;
}

.light-bulb {
  border-radius: 50%;
  height: 30px;
  width: 30px;
}

.light-bulb.theme-color-one {
  background: var(--theme-color-one);
}

.light-bulb.theme-color-two {
  background: var(--theme-color-two);
}

.light-bulb.theme-color-three {
  background: var(--theme-color-three);
}

.light-bulb.theme-color-four {
  background: var(--theme-color-four);
}

.light-bulb.theme-color-five {
  background: var(--theme-color-five);
}
.light-bulb {
  /* prior styles go here */
  position: relative;
}

.light-bulb::before {
  content: '';
  position: absolute;
  border: 2px solid #222;
  width: 10px;
  height: 10px;
  background: #222;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  left: 25%;
  top: -12px;
  z-index: 2;
}.light-bulb::after {
  content: '';
  top: -20px;
  left: 60%;
  position: absolute;
  width: 90px;
  height: 28px;
  border-bottom: 4px solid #222;
  border-radius: 50%;
  z-index: -1;
}

.light-bulb:last-of-type::after {
  border: none;
}
@keyframes light-up-theme-color-one {
  0% {
    box-shadow: 0 1px 10px 5px var(--theme-color-one);
  }
  25% {
    box-shadow: 0 1px 15px 5px var(--theme-color-one);
  }
  50% {
    box-shadow: 0 1px 20px 5px var(--theme-color-one);
  }
  75% {
	  background:var(--theme-color-one);
    box-shadow: 0 1px 25px 5px var(--theme-color-one);
  }
  100% {
	  background:#5e5e5e;
    box-shadow: none;
  }
}

@keyframes light-up-theme-color-two {
  0% {
    box-shadow: 0 1px 10px 5px var(--theme-color-two);
  }
  25% {
    box-shadow: 0 1px 15px 5px var(--theme-color-two);
  }
  50% {
    box-shadow: 0 1px 20px 5px var(--theme-color-two);
  }
  75% {
	  background:var(--theme-color-two);
    box-shadow: 0 1px 25px 5px var(--theme-color-two);
  }
  100% {
	  background:#5e5e5e;
    box-shadow: none;
  }
}

@keyframes light-up-theme-color-three {
  0% {
    box-shadow: 0 1px 10px 5px var(--theme-color-three);
  }
  25% {
    box-shadow: 0 1px 15px 5px var(--theme-color-three);
  }
  50% {
    box-shadow: 0 1px 20px 5px var(--theme-color-three);
  }
  75% {
	  background:var(--theme-color-three);
    box-shadow: 0 1px 25px 5px var(--theme-color-three);
  }
  100% {
	  background:#5e5e5e;
    box-shadow: none;
  }
}

@keyframes light-up-theme-color-four {
  0% {
    box-shadow: 0 1px 10px 5px var(--theme-color-four);
  }
  25% {
    box-shadow: 0 1px 15px 5px var(--theme-color-four);
  }
  50% {
    box-shadow: 0 1px 20px 5px var(--theme-color-four);
  }
  75% {
	  background:var(--theme-color-four);
    box-shadow: 0 1px 25px 5px var(--theme-color-four);
  }
  100% {
	  background:#5e5e5e;
    box-shadow: none;
  }
}

@keyframes light-up-theme-color-five {
  0% {
	  
    box-shadow: 0 1px 10px 5px var(--theme-color-five);
  }
  25% {
    box-shadow: 0 1px 15px 5px var(--theme-color-five);
  }
  50% {
    box-shadow: 0 1px 20px 5px var(--theme-color-five);
  }
  75% {
	  background:var(--theme-color-five);
    box-shadow: 0 1px 25px 5px var(--theme-color-five);
  }
  100% {
	  background:#5e5e5e;
    box-shadow: none;
  }
}
.light-bulb {
  /* prior styles go here */
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.light-bulb.theme-color-one {
	animation-delay:.2s;
  animation-name: light-up-theme-color-one;
}

.light-bulb.theme-color-two {
	animation-delay:.4s;
  animation-name: light-up-theme-color-two;
}

.light-bulb.theme-color-three {
	animation-delay:.6s;
  animation-name: light-up-theme-color-three;
}

.light-bulb.theme-color-four {
	animation-delay:.8s;
  animation-name: light-up-theme-color-four;
}

.light-bulb.theme-color-five {
	animation-delay:1s;
  animation-name: light-up-theme-color-five;
}


.light-bulb-shine
{
	background:#fff;
	width:18px;
	height:10px;
	z-index:0;
	opacity:.3;
	border-radius:100%;
	left:6px;
	top:0px;
	position:absolute;
}
.wheels 
{
	display:flex;
	align-items: flex-start;
	justify-content: flex-start;
	left: 0;
	position: relative;
	transition: 2s;
	margin-bottom: 120px;
	margin-top: 20px;
}
.btn-orange.spin
{
	position:absolute;
	bottom:50px;
	transition:.5s cubic-bezier(0.86, -0.7, 0.58, 1);
	transform:translate3d(0,200px,0);
}

.btn-orange.spin.active
{
	transform:translate3d(0,0,0);
}

/* Voet van het wiel: primaire spin-knop, daaronder SPIN ALL (ghost-ontwerp
   van de DUEL/CONTINUE-knoppen) en tijdens het draaien SPEED UP ×3 in de
   plek van de primaire. De voet zelf laat tikken door (pointer-events). */
.wheel_voet
{
	position:absolute;
	left:0;
	right:0;
	bottom:calc(14px + env(safe-area-inset-bottom));
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	pointer-events:none;
}
.wheel_voet>*{pointer-events:auto}
.wheel_voet .btn-orange.spin
{
	position:relative;
	bottom:auto;
}
.wheel_alles,
.wheel_versnel
{
	display:none;
	align-items:center;
	justify-content:center;
	gap:8px;
	box-sizing:border-box;
	padding:11px 26px;
	background:#00000073;
	border:2px solid #ffffff2b;
	border-radius:10px;
	box-shadow:0 0 0 4px #000;
	font-family:'headers';
	font-size:13px;
	letter-spacing:1px;
	text-transform:uppercase;
	color:#ffffffab;
	text-shadow:0 1px black;
	transition:opacity .25s;
}
.wheel_voet.wheel_voet_alles:not(.wheel_voet_draait) .wheel_alles{display:inline-flex}
.wheel_voet.wheel_voet_draait .wheel_versnel
{
	display:inline-flex;
	position:absolute;
	bottom:0;
	animation:wheelVersnelIn .35s cubic-bezier(0.25, 0.1, 0, 1.01) both;
}
.wheel_versnel i
{
	font-style:normal;
	font-size:15px;
	color:#FFC107;
	filter:drop-shadow(0 0 4px #ffc10799);
}
.wheel_versnel.aan
{
	opacity:.55;
	pointer-events:none;
}
@keyframes wheelVersnelIn
{
	from{opacity:0;transform:translate3d(0,14px,0)}
	to{opacity:1;transform:translate3d(0,0,0)}
}
/* korte aantallen (1 GWh, 50) blijven op één regel in het taartpunt en de naaf */
.wheel__inner__gift span,
.wheel__prize__inner h2{white-space:nowrap}
[swipe-close="wheels"],
[swipe-close="xpJourney"]
{
	font-family:headers;
	position:absolute;
	right:0;
	top:0;
	margin:10px;
	margin-top:calc(10px + env(safe-area-inset-top));
	background:red;
	padding:10px;
	width:20px;
	height:20px;
	border-radius:2px;
}
.wheel__inner__gift
{
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 50%;
	/* border:1px solid; */
	transform-origin: 0% 100%;
	text-shadow: 0 2px black, 0 -2px black, 2px 0px black, -2px 0 black;
	display: flex;
	box-shadow: inset 1px 1px 1px white, inset 0px 0px 10px black;
}
.wheel__inner__gift.prime
{
	background: linear-gradient(225deg, #541bba 60%,#9C27B0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background: linear-gradient(225deg, rgba(88,0,147,1) 0%,rgba(154,0,255,1) 100%);
}
.wheel__inner__gift span 
{
	font-family:headers;
	position:absolute;
	font-size: 20px;
	bottom: 0px;
	margin-bottom: -10px;
	height: 70px;
	width: 70px;
	display: flex;
	flex-direction: column;
	justify-content: end;
}
.wheel__inner__gift__wrapper img 
{
	width: 60px;
}

.wheel__inner__gift:nth-child(1){
  transform: rotate(0deg) skewY(-45deg) ;
  -webkit-transform: rotate(0deg) skewY(-45deg);
  -moz-transform: rotate(0deg) skewY(-45deg) ;
  -o-transform: rotate(0deg) skewY(-45deg);
  -ms-transform: rotate(0deg) skewY(-45deg);
}
.wheel__inner__gift:nth-child(2){
  transform: rotate(45deg) skewY(-45deg);
  -webkit-transform: rotate(45deg) skewY(-45deg);
  -moz-transform: rotate(45deg) skewY(-45deg);
  -o-transform: rotate(45deg) skewY(-45deg);
  -ms-transform: rotate(45deg) skewY(-45deg);
}
.wheel__inner__gift:nth-child(3){
  transform: rotate(90deg) skewY(-45deg);
  -webkit-transform: rotate(90deg) skewY(-45deg);
  -moz-transform: rotate(90deg) skewY(-45deg);
  -o-transform: rotate(90deg) skewY(-45deg);
  -ms-transform: rotate(90deg) skewY(-45deg);
}
.wheel__inner__gift:nth-child(4){
  transform: rotate(135deg) skewY(-45deg);
  -webkit-transform: rotate(135deg) skewY(-45deg);
  -moz-transform: rotate(135deg) skewY(-45deg);
  -o-transform: rotate(135deg) skewY(-45deg);
  -ms-transform: rotate(135deg) skewY(-45deg);
}
.wheel__inner__gift:nth-child(5){
  transform: rotate(180deg) skewY(-45deg);
  -webkit-transform: rotate(180deg) skewY(-45deg);
  -moz-transform: rotate(180deg) skewY(-45deg);
  -o-transform: rotate(180deg) skewY(-45deg);
  -ms-transform: rotate(180deg) skewY(-45deg);
}
.wheel__inner__gift:nth-child(6){
  transform: rotate(225deg) skewY(-45deg);
  -webkit-transform: rotate(225deg) skewY(-45deg);
  -moz-transform: rotate(225deg) skewY(-45deg);
  -o-transform: rotate(225deg) skewY(-45deg);
  -ms-transform: rotate(225deg) skewY(-45deg);
}
.wheel__inner__gift:nth-child(7){
  transform: rotate(270deg) skewY(-45deg);
  -webkit-transform: rotate(270deg) skewY(-45deg);
  -moz-transform: rotate(270deg) skewY(-45deg);
  -o-transform: rotate(270deg) skewY(-45deg);
  -ms-transform: rotate(270deg) skewY(-45deg);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e0e0e+0,7d7e7d+100 */
}
.wheel__inner__gift:nth-child(8){
  transform: rotate(315deg) skewY(-45deg);
  -webkit-transform: rotate(315deg) skewY(-45deg);
  -moz-transform: rotate(315deg) skewY(-45deg);
  -o-transform: rotate(315deg) skewY(-45deg);
  -ms-transform: rotate(315deg) skewY(-45deg);
}
.wheel__inner__gift__wrapper 
{
	transform: skewY(45deg) rotate(22.5deg);
	font-family:headers;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content: flex-end;
	width: 30vw;
	margin-left: 1vw;
	margin-bottom: 6vw;
}
/*
[id="wheels"] h1,
[id="dailyRewards"] h1
{
	color:#FF9800;
	font-size:40px !important;
	display:flex;
	flex-direction:column;
	margin-top:0 !important;
	line-height:28px;
	margin-bottom:20px !important;;
}
[id="wheels"] h1 span,
[id="dailyRewards"] h1 span
{
	color:#fff;
	font-family:headers;
	text-shadow: 0 7px black, 0 -7px black, 7px 0px black, -7px 0 black;
	
	font-size:20px;
	transform:rotate(-2deg)
}*/

.levelup__stars__holder
{
	display:flex;
	align-items:center;
	justify-content:center;
	width: 150px;
	z-index: 9;
	height: 150px;
	min-height: 150px;
	position: relative;
}
.levelup__star__holder
{
	position:absolute;
	font-family:headers !important;
	font-size:50px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.levelup__star__holder.oldLevel img
{
	filter:grayscale();
}

.levelup__star__holder.newLevel
{
	transform:scale(4);
	opacity:0;
	transition:1s ease-in;
	z-index: 9;
}

.levelup__star__holder.newLevel.shown
{
	
	transform:scale(1); 
	opacity:1;
	transition-delay:1.8s;
}
.levelup__star__holder img 
{
	width:50vw;
	height:50vw;
}
.levelup__star__holder span 
{
	position:absolute;
	font-family:headers;
	
	text-shadow: 0 5px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
.levelup__progress__wrapper
{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a359ff+0,7300ff+50,5b00bc+51,7300ff+100 */
	background: linear-gradient(to bottom, rgba(163,89,255,1) 0%,rgba(115,0,255,1) 50%,rgba(91,0,188,1) 51%,rgba(115,0,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	width:80vw;
	box-shadow:inset 0 1px 1px #ffffff5c, inset 0 -1px 1px #ffffffa3, inset -1px 0px 1px #ffffff5c;
	border-radius:5px;
	display:flex;
	align-items:center;
	padding:10px;
	height:50px;
	position:relative;
	padding-left:50px;
	box-sizing:border-box;
	margin-top:40px;
	left: 0;
	margin: 40px auto;
}
.levelup__progress__starHolder
{
	position:absolute;
	left:-22px;
	top:-32px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.levelup__progress__starHolder span
{
	position:absolute;
	z-index:3;
	font-family:headers;
	margin-top:10px;
	font-size:35px;
}
.btn-orange.btn-bot
{
	transform:translate3d(0,40vh,0);
	transition:.4s;
	position:fixed;
	bottom:calc(10px + env(safe-area-inset-bottom))
}
.btn-orange.btn-bot.exposed
{
	transform:translate3d(0,0,0);
}
/* PLAY NEXT MISSION-duo op de missiekaart: de paarse her-speelknop stapelt
   boven de oranje hoofdknop — zelfde fixed-bottom-patroon en expose-animatie
   als .btn-orange.btn-bot, iets kleiner zodat de hiërarchie leesbaar blijft */
.btn-purple.btn-bot
{
	transform:translate3d(0,40vh,0);
	transition:.4s;
	position:fixed;
	font-size:24px;
	bottom:calc(75px + env(safe-area-inset-bottom));
}
.btn-purple.btn-bot.exposed
{
	transform:translate3d(0,0,0);
}
.levelup__progress__starHolder svg
{
	position:absolute;
	z-index:2;
	width:40px;
	color:white;
	filter:drop-shadow(0 1px 1px black);
	animation:hover alternate infinite 1s;
}
@keyframes hover
{
	from{
		transform:translate3d(0,-5px,0);
	}
	to{
		transform:translate3d(0,7px,0);
	}
}

.levelup__progress__wrapper img 
{
	width:100px;
	height:100px;
	z-index:2;
	position:relative;
}
.levelup__progress__wrapper .levelup__progress__bar 
{
	width:100%;
	background:#310038;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:5px;
	box-shadow:inset 0 1px 5px black, 0 1px 1px #ffffffa3;
	height: 30px;
	overflow: hidden;
	border-right:3px solid #2c0033
}
.levelup__progress__bar p
{
	position:absolute;
	
}
.levelup__progress__wrapper .levelup__progress__bar__inner 
{
	background: #FFC107;
	border-radius:2px;
	height:24px;
	position:relative;
	overflow:hidden;
	transition: 2s ease-in;
}

.levelup__progress__wrapper .levelup__progress__bar__inner:after
{
	position:absolute;
	content:'';
	left:0;
	top:0;
	width:100%;
	height:10px;
	background:#ffffff91;
}
[id="xpJourney"] span:first-child,
[id="levelUp"] span:first-child,
.headerTop
{
	color: #FFC107;
    font-size: 23px;
	margin-bottom:-5px;	text-shadow: 0 1px black, 0 -1px black, 1px 0px black, -1px 0 black;

}
[id="levelUp"] span.levelup__item__reward_count
{
	color:#fff;
	position:absolute;
	top: -10px;
	left: -10px;
	background: #000;
	border-radius: 10px;
	padding: 5px 10px;
	box-shadow: 0 0 10px;
	font-size: 20px;
	opacity:1;
	text-shadow: 0 1px black, 0 -1px black, 1px 0px black, -1px 0 black;
}
[swipe-close].btn-bot
{
	position:absolute;
	bottom:calc(20px + env(safe-area-inset-bottom));
}

.levelup__progress__bar__inner canvas 
{
	width:100% !important;
}
.levelup__item
{
	display:flex;
	text-align:left;
	gap:10px;
	font-size:20px;
	background: #00000085;
	border:1px solid #fff6;
	margin: 10px 35px;
	border-radius: 5px;
	padding: 15px;
}
.levelup__item img 
{
	width:50px;
	height:50px;
}

.levelup__item,
.levelup__progress__unlocks h2,
.levelup__progress__rewards h2
{
	transition:.5s ease-in;
	opacity:0;
	transform: translate3d(0, 50px, 0);
}

.finalTransition .levelup__item,
.finalTransition .levelup__progress__unlocks h2,
.finalTransition .levelup__progress__rewards h2
{
	opacity:1;
	transform:translate3d(0, 0, 0)
}
.levelup__item h4 
{
	margin:0;
	font-size: 22px;
}
.levelup__item span
{
	font-size: 18px;
	opacity:.85;
}
[id="levelUp"] span.info-wrapper
{
	opacity:1;
	color:#fff;
	right:-7px;
	top:-7px;
	line-height:20px;
}
.safetyWrapper
{
	max-height:100vh;
	max-height: var(--vh100);
	display:flex;
	flex-direction:column;
	align-items: center;
	overflow:hidden;
	padding-top: calc(20px + env(safe-area-inset-top));
	/* padding-bottom: calc(100px + env(safe-area-inset-bottom)); */
}
.friendshipFelicitation h1 
{
	transform: translate3d(0, -100%,0);
	transition:.5s cubic-bezier(0.21, 0.23, 0.25, 1.38)
}
.friendshipFelicitation img 
{
	transform:scale(0);
	transition:.5s cubic-bezier(0.21, 0.23, 0.25, 1.38);
	transition-delay:.5s;
}

.friendshipFelicitation.animation-start h1 
{
	transform: translate3d(0, 0,0);
}

.friendshipFelicitation.animation-start img 
{
	transform:scale(1);
}
.property svg
{
	max-width:20px;
	max-height:20px;
}
.fflag:before
{
	content:'';
	width:100%;
	height:50%;
	background:#fff;
	position:absolute;
	left:0;
	top:0;
	opacity:.3
}
.fflag {
    background-image:url(/public/img/cubelegend/flagSprite42.png);
    background-repeat:no-repeat;
    background-size: 100% 49494%;
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
	width:24px;
	height:18px;
    box-sizing: content-box;
    box-shadow: 0 0 0 1px rgb(197 197 197);
}
.fflag-CH,
.fflag-NP {box-shadow: none!important}
.fflag-DZ {background-position:center 0.2287%}
.fflag-AO {background-position:center 0.4524%}
.fflag-BJ {background-position:center 0.6721%}
.fflag-BW {background-position:center 0.8958%}
.fflag-BF {background-position:center 1.1162%}
.fflag-BI {background-position:center 1.3379%}
.fflag-CM {background-position:center 1.5589%}
.fflag-CV {background-position:center 1.7805%}
.fflag-CF {background-position:center 2.0047%}
.fflag-TD {background-position:center 2.2247%}
.fflag-CD {background-position:left 2.4467%}
.fflag-DJ {background-position:left 2.6674%}
.fflag-EG {background-position:center 2.8931%}
.fflag-GQ {background-position:center 3.1125%}
.fflag-ER {background-position:left 3.3325%}
.fflag-ET {background-position:center 3.5542%}
.fflag-GA {background-position:center 3.7759%}
.fflag-GM {background-position:center 4.0015%}
.fflag-GH {background-position:center 4.2229%}
.fflag-GN {background-position:center 4.441%}
.fflag-GW {background-position:left 4.66663%}
.fflag-CI {background-position:center 4.8844%}
.fflag-KE {background-position:center 5.1061%}
.fflag-LS {background-position:center 5.3298%}
.fflag-LR {background-position:left 5.5495%}
.fflag-LY {background-position:center 5.7712%}
.fflag-MG {background-position:center 5.994%}
.fflag-MW {background-position:center 6.2156%}
.fflag-ML {background-position:center 6.4363%}
.fflag-MR {background-position:center 6.658%}
.fflag-MU {background-position:center 6.8805%}
.fflag-YT {background-position:center 7.1038%}
.fflag-MA {background-position:center 7.3231%}
.fflag-MZ {background-position:left 7.5448%}
.fflag-NA {background-position:left 7.7661%}
.fflag-NE {background-position:center 7.98937%}
.fflag-NG {background-position:center 8.2099%}
.fflag-CG {background-position:center 8.4316%}
.fflag-RE {background-position:center 8.6533%}
.fflag-RW {background-position:right 8.875%}
.fflag-SH {background-position:center 9.0967%}
.fflag-ST {background-position:center 9.32237%}
.fflag-SN {background-position:center 9.5426%}
.fflag-SC {background-position:left 9.7628%}
.fflag-SL {background-position:center 9.9845%}
.fflag-SO {background-position:center 10.2052%}
.fflag-ZA {background-position:left 10.4269%}
.fflag-SS {background-position:left 10.6486%}
.fflag-SD {background-position:center 10.8703%}
.fflag-SR {background-position:center 11.0945%}
.fflag-SZ {background-position:center 11.3135%}
.fflag-TG {background-position:left 11.5354%}
.fflag-TN {background-position:center 11.7593%}
.fflag-UG {background-position:center 11.9799%}
.fflag-TZ {background-position:center 12.2005%}
.fflag-EH {background-position:center 12.4222%}
.fflag-YE {background-position:center 12.644%}
.fflag-ZM {background-position:center 12.8664%}
.fflag-ZW {background-position:left 13.0873%}
.fflag-AI {background-position:center 13.309%}
.fflag-AG {background-position:center 13.5307%}
.fflag-AR {background-position:center 13.7524%}
.fflag-AW {background-position:left 13.9741%}
.fflag-BS {background-position:left 14.1958%}
.fflag-BB {background-position:center 14.4175%}
.fflag-BQ {background-position:center 14.6415%}
.fflag-BZ {background-position:center 14.8609%}
.fflag-BM {background-position:center 15.0826%}
.fflag-BO {background-position:center 15.306%}
.fflag-VG {background-position:center 15.528%}
.fflag-BR {background-position:center 15.7496%}
.fflag-CA {background-position:center 15.9694%}
.fflag-KY {background-position:center 16.1911%}
.fflag-CL {background-position:left 16.4128%}
.fflag-CO {background-position:left 16.6345%}
.fflag-KM {background-position:center 16.8562%}
.fflag-CR {background-position:center 17.0779%}
.fflag-CU {background-position:left 17.2996%}
.fflag-CW {background-position:center 17.5213%}
.fflag-DM {background-position:center 17.743%}
.fflag-DO {background-position:center 17.968%}
.fflag-EC {background-position:center 18.1864%}
.fflag-SV {background-position:center 18.4081%}
.fflag-FK {background-position:center 18.6298%}
.fflag-GF {background-position:center 18.8515%}
.fflag-GL {background-position:left 19.0732%}
.fflag-GD {background-position:center 19.2987%}
.fflag-GP {background-position:center 19.518%}
.fflag-GT {background-position:center 19.7383%}
.fflag-GY {background-position:center 19.96%}
.fflag-HT {background-position:center 20.1817%}
.fflag-HN {background-position:center 20.4034%}
.fflag-JM {background-position:center 20.6241%}
.fflag-MQ {background-position:center 20.8468%}
.fflag-MX {background-position:center 21.0685%}
.fflag-MS {background-position:center 21.2902%}
.fflag-NI {background-position:center 21.5119%}
.fflag-PA {background-position:center 21.7336%}
.fflag-PY {background-position:center 21.9553%}
.fflag-PE {background-position:center 22.177%}
.fflag-PR {background-position:left 22.4002%}
.fflag-BL {background-position:center 22.6204%}
.fflag-KN {background-position:center 22.8421%}
.fflag-LC {background-position:center 23.0638%}
.fflag-PM {background-position:center 23.2855%}
.fflag-VC {background-position:center 23.5072%}
.fflag-SX {background-position:left 23.732%}
.fflag-TT {background-position:center 23.9506%}
.fflag-TC {background-position:center 24.1723%}
.fflag-US {background-position:center 24.392%}
.fflag-VI {background-position:center 24.6157%}
.fflag-UY {background-position:left 24.8374%}
.fflag-VE {background-position:center 25.0591%}
.fflag-AB {background-position:center 25.279%}
.fflag-AF {background-position:center 25.5025%}
.fflag-AZ {background-position:center 25.7242%}
.fflag-BD {background-position:center 25.9459%}
.fflag-BT {background-position:center 26.1676%}
.fflag-BN {background-position:center 26.3885%}
.fflag-KH {background-position:center 26.611%}
.fflag-CN {background-position:left 26.8327%}
.fflag-GE {background-position:center 27.0544%}
.fflag-HK {background-position:center 27.2761%}
.fflag-IN {background-position:center 27.4978%}
.fflag-ID {background-position:center 27.7195%}
.fflag-JP {background-position:center 27.9412%}
.fflag-KZ {background-position:center 28.1615%}
.fflag-LA {background-position:center 28.3846%}
.fflag-MO {background-position:center 28.6063%}
.fflag-MY {background-position:center 28.829%}
.fflag-MV {background-position:center 29.0497%}
.fflag-MN {background-position:left 29.2714%}
.fflag-MM {background-position:center 29.4931%}
.fflag-NP {background-position:left 29.7148%}
.fflag-KP {background-position:left 29.9365%}
.fflag-MP {background-position:center 30.1582%}
.fflag-PW {background-position:center 30.3799%}
.fflag-PG {background-position:center 30.6016%}
.fflag-PH {background-position:left 30.8233%}
.fflag-SG {background-position:left 31.045%}
.fflag-KR {background-position:center 31.2667%}
.fflag-LK {background-position:right 31.4884%}
.fflag-TW {background-position:left 31.7101%}
.fflag-TJ {background-position:center 31.9318%}
.fflag-TH {background-position:center 32.1535%}
.fflag-TL {background-position:left 32.3752%}
.fflag-TM {background-position:center 32.5969%}
.fflag-VN {background-position:center 32.8186%}
.fflag-AX {background-position:center 33.0403%}
.fflag-AL {background-position:center 33.25975%}
.fflag-AD {background-position:center 33.4837%}
.fflag-AM {background-position:center 33.7054%}
.fflag-AT {background-position:center 33.9271%}
.fflag-BY {background-position:left 34.1488%}
.fflag-BE {background-position:center 34.3705%}
.fflag-BA {background-position:center 34.5922%}
.fflag-BG {background-position:center 34.8139%}
.fflag-HR {background-position:center 35.0356%}
.fflag-CY {background-position:center 35.2555%}
.fflag-CZ {background-position:left 35.479%}
.fflag-DK {background-position:center 35.7007%}
.fflag-EE {background-position:center 35.9224%}
.fflag-FO {background-position:center 36.1441%}
.fflag-FI {background-position:center 36.3658%}
.fflag-FR {background-position:center 36.5875%}
.fflag-DE {background-position:center 36.8092%}
.fflag-GI {background-position:center 37.0309%}
.fflag-GR {background-position:left 37.2526%}
.fflag-GG {background-position:center 37.4743%}
.fflag-HU {background-position:center 37.696%}
.fflag-IS {background-position:center 37.9177%}
.fflag-IE {background-position:center 38.1394%}
.fflag-IM {background-position:center 38.3611%}
.fflag-IT {background-position:center 38.5828%}
.fflag-JE {background-position:center 38.8045%}
.fflag-XK {background-position:center 39.0262%}
.fflag-LV {background-position:center 39.2479%}
.fflag-LI {background-position:left 39.4696%}
.fflag-LT {background-position:center 39.6913%}
.fflag-LU {background-position:center 39.913%}
.fflag-MT {background-position:left 40.1347%}
.fflag-MD {background-position:center 40.3564%}
.fflag-MC {background-position:center 40.5781%}
.fflag-ME {background-position:center 40.7998%}
.fflag-NL {background-position:center 41.0215%}
.fflag-MK {background-position:center 41.2432%}
.fflag-NO {background-position:center 41.4649%}
.fflag-PL {background-position:center 41.6866%}
.fflag-PT {background-position:center 41.9083%}
.fflag-RO {background-position:center 42.13%}
.fflag-RU {background-position:center 42.3517%}
.fflag-SM {background-position:center 42.5734%}
.fflag-RS {background-position:center 42.7951%}
.fflag-SK {background-position:center 43.0168%}
.fflag-SI {background-position:center 43.2385%}
.fflag-ES {background-position:left 43.4602%}
.fflag-SE {background-position:center 43.6819%}
.fflag-CH {background-position:center 43.9036%}
.fflag-TR {background-position:center 44.1253%}
.fflag-UA {background-position:center 44.347%}
.fflag-GB {background-position:center 44.5687%}
.fflag-VA {background-position:right 44.7904%}
.fflag-BH {background-position:center 45.0121%}
.fflag-IR {background-position:center 45.2338%}
.fflag-IQ {background-position:center 45.4555%}
.fflag-IL {background-position:center 45.6772%}
.fflag-KW {background-position:left 45.897%}
.fflag-JO {background-position:left 46.1206%}
.fflag-KG {background-position:center 46.3423%}
.fflag-LB {background-position:center 46.561%}
.fflag-OM {background-position:left 46.7857%}
.fflag-PK {background-position:center 47.0074%}
.fflag-PS {background-position:center 47.2291%}
.fflag-QA {background-position:center 47.4508%}
.fflag-SA {background-position:center 47.6725%}
.fflag-SY {background-position:center 47.8942%}
.fflag-AE {background-position:center 48.1159%}
.fflag-UZ {background-position:left 48.3376%}
.fflag-AS {background-position:right 48.5593%}
.fflag-AU {background-position:center 48.781%}
.fflag-CX {background-position:center 49.002%}
.fflag-CC {background-position:center 49.2244%}
.fflag-CK {background-position:center 49.4445%}
.fflag-FJ {background-position:center 49.6678%}
.fflag-PF {background-position:center 49.8895%}
.fflag-GU {background-position:center 50.1112%}
.fflag-KI {background-position:center 50.3329%}
.fflag-MH {background-position:left 50.5546%}
.fflag-FM {background-position:center 50.7763%}
.fflag-NC {background-position:center 50.998%}
.fflag-NZ {background-position:center 51.2197%}
.fflag-NR {background-position:left 51.4414%}
.fflag-NU {background-position:center 51.6631%}
.fflag-NF {background-position:center 51.8848%}
.fflag-WS {background-position:left 52.1065%}
.fflag-SB {background-position:left 52.3282%}
.fflag-TK {background-position:center 52.5499%}
.fflag-TO {background-position:left 52.7716%}
.fflag-TV {background-position:center 52.9933%}
.fflag-VU {background-position:left 53.215%}
.fflag-WF {background-position:center 53.4385%}
.fflag-TD.ff-sphere,
.fflag-GN.ff-sphere,
.fflag-CI.ff-sphere,
.fflag-ML.ff-sphere,
.fflag-NG.ff-sphere,
.fflag-BE.ff-sphere,
.fflag-FR.ff-sphere,
.fflag-IE.ff-sphere,
.fflag-IT.ff-sphere,
.fflag-RO.ff-sphere {background-size:100%  50000%}

.fflag.ff-sm {width: 18px;height: 11px}
.fflag.ff-md {width: 27px;height: 17px}
.fflag.ff-lg {width: 42px;height: 27px}
.fflag.ff-xl {width: 60px;height: 37px}

/* ff-sphere = spherical with specular highlight */
.ff-sphere {
	background-size: 160%;
	background-clip: content-box;
	border-radius: 50%;
}
.ff-sphere:before {
	content: '';
	display: inline-block;
	width: inherit;
	height: inherit;
	position:absolute;
	top: 0;
	left: 0;
	background: radial-gradient(circle at 13% 58%, rgba(255,255,255,0) 68%, rgba(255,255,255,0.6) 82%, rgba(255,255,255,1) 100%),radial-gradient(circle at 50% -34%, rgba(0,0,0,0) 85%, rgba(0,0,0,.5) 94%, rgba(0,0,0,.4) 100%), radial-gradient(circle at 26% 26%, rgba(255,255,255,1) 7%, rgba(255,263,252,.6) 7%, rgba(255,255,255,0.8) 7%, rgba(255,255,255,.1) 29%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.45) 68%, rgba(0,0,0,1) 78%)
}
.ff-sphere:after {
	content: '';
	display: inline-block;
	width: inherit;
	height: inherit;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
}
.ff-sphere.ff-sm {width: 12px; height: 12px}
.ff-sphere.ff-md {width: 18px; height: 18px}
.ff-sphere.ff-lg {width: 24px; height: 24px}
.ff-sphere.ff-xl {width: 32px; height: 32px}

[tabcontent="inbox"]
{
	padding:30px
}

[tabcontent="inbox"] > div
{
	background: #4e357a3d;
	border-radius:5px;
	padding: 18px;
	gap: 20px;
}
[tabcontent="inbox"] > div [datetime]
{
	position:absolute;
	right:10px;
	top:10px;
	color: #fff;
}
[tabcontent="inbox"]  h2
{
	padding:0;
	margin: 0;
}
[tabcontent="inbox"]  span
{
	color: #FF9800;
}
[tabcontent="inbox"]  u 
{
	color:#fff;
	display:block;
	margin-top: 15px;
}
[tabcontent="inbox"] img 
{
	width: 100px;
	height: 100px;
}
.clouds 
{
	position: absolute;
	z-index: 99999;
	height: 100%;
	width: 100%;
}
.clouds:nth-child(7) img
{
	top:unset !important;
	bottom:0 !important
}
.clouds:nth-child(8) img
{
	top:unset !important;
	bottom:20% !important;
	margin-left:50%
}
.clouds:nth-child(9) img
{
	top:unset !important;
	bottom:40% !important;
}
.clouds:nth-child(10) img
{
	top:unset !important;
	margin-left:50%
}
.clouds img 
{
	top:0px;
	position:absolute;
	left:0;
	z-index:3;
	animation:hover 2s infinite alternate;
}
.clouds img:nth-child(1)
{
	left:-50vw;
	animation-delay:.3s
}
.clouds img:nth-child(2)
{
	top:-25vw;
	left:-25vw;
	animation-delay:.6s
}
.clouds img:nth-child(3)
{
	top:-25vw;
	left:-25vw;
	animation-delay:.9s

}
.clouds img:nth-child(4)
{
	right:25vw;
	animation-delay:.1.2s
}
.tierUnlockRequirements
{
	/*background:#aaaaaa1f;*/
	padding:15px;
	margin:20px;
	position:absolute;
	z-index:55555555;
	display:flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	top:50%;
	transform:translateY(-50%);
	text-align: center;
}
.tierUnlockRequirements h2
{
	font-size:30px;
	display:flex;
	flex-direction:column;
}
.tierUnlockRequirements h2:after
{
	font-size:20px;
	font-family:font3;
}

.tierUnlockRequirements a
{
	margin-top:20px;
}
.tierUnlockRequirements img
{
	width:50px !important;
	height:50px;
}
.tierUnlockRequirement 
{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
}
.tierUnlockRequirement span
{
	bottom:-10px;
	position:absolute;
	background:#000000;
	padding:2px 7px;
	border-radius:10px;
}
.tierUnlockRequirementProgressBar
{
	width:62px;
	top: -11px;
	position:absolute;
	transform: scale(-1);
}
.startTransition .growGridBG.succeed > div > div
{
	transform:scale(1.5) rotate(0);
}


.startTransition .growGridBG.failed > div > div
{
	transform:scale(1.5) rotate(90deg);
}

.growGridBG:before
{
	left:0;
	top:0;
	width:100vw;
	height:100vh;
	height: var(--vh100);
	content:'';
	position:fixed;
	z-index:0;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
	background: linear-gradient(0, rgb(0 0 0 / 48%) 0%,rgba(255,255,255,0) 50%, rgb(0 0 0 / 48%) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.growGridBG > div > div
{
	width:10vw;
	height:10vw;
	transform:scale(0) rotate(45deg);
	transition: 1s cubic-bezier(0.73, 0.08, 1, 1);
}
.growGridBG.failed > div > div
{
	background:red;
}
.growGridBG.succeed > div > div
{
	background:#4CAF50;
}
.growGridBG
{
	position:absolute;
	left:0;
	top:0;
	display:flex;
	flex-direction:column;
}
.growGridBG > div 
{
	display:flex;
	z-index:-1;
	flex-wrap:wrap;
	margin-top: .75vw;
}
.growGridBG > div:nth-child(2)
{
	transform: scale(-1);
}
.objectiveResult h2 
{
	transition-delay:.55s;
	transform:translateY(-80vw);
	transition:cubic-bezier(0.25, 0.1, 0.48, 1.78) .55s;
	font-size:17vw !important
}
.startTransition.objectiveResult h2 
{
	transform:translateY(0) skew(0);
}
.startTransition img.full_obj_img
{
	transform:scale(1);
}
.newHighscore img.full_obj_img:nth-child(4)
{
	left:0;
	transition-delay:.75s
}
.newHighscore img.full_obj_img:nth-child(5)
{
	left:calc(25vw + 5px);
	bottom: 18px;
	transition-delay:.85s;
}
.newHighscore img.full_obj_img:nth-child(6)
{
	right:0;
	transition-delay:.95s;
}
.objectiveResult.newHighscore
{
	justify-content: flex-start;
}
.objectiveResult p 
{
	transform: scale(0);
	transition: .5s cubic-bezier(0.62, 1.89, 1, 1);
	transition-delay: 1.2s;
	opacity: 0;
	font-size:20px;
	text-align:center;
	box-sizing: border-box;
	padding: 0 20px;
}
.startTransition.objectiveResult p 
{
	transform: scale(1);
	opacity: 1;
}
.allcompleted small
{
	display:none;
}
/* het te-halen getal springt eruit t.o.v. het bijschrift — zelfde behandeling
   als de klassieke "10 correct taps required" (#bonusBarInfo) */
#objectiveBarInfo
{
	color:#ff1100;
	font-size:20px;
}
/* in de "alles gehaald"-staat is de tekst een mededeling, geen getal meer */
.allcompleted #objectiveBarInfo
{
	color:#11d219;
	font-size:inherit;
}
/* VASTE regelhoogte: het getal (20px) en de "alles gehaald"-melding (kleiner)
   wisselen elkaar tijdens een speed-missie voortdurend af — zonder vaste
   hoogte duwde dat de zwarte balk telkens op een andere hoogte (zichtbaar
   getoggel). De rij houdt nu één hoogte, ongeacht wat erin staat. */
.objectivesWrapper > .flex-row.align-center
{
	min-height:24px;
	justify-content:center;
}
.allcompleted #objectiveBarInfo:before
{
	content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='rgb(4 228 13)' d='m484.065 66.324l-71.534-41.759c-8.811-5.143-20.123-2.17-25.266 6.641L211.883 331.642L96.414 264.236c-7.143-4.17-16.314-1.76-20.484 5.384l-45.284 77.573c-4.17 7.143-1.76 16.314 5.384 20.484l205.968 120.235c7.143 4.17 16.314 1.76 20.484-5.384l1.669-2.86c.034-.056.074-.106.107-.163L490.706 91.59c5.143-8.811 2.17-20.123-6.641-25.266'/%3E%3C/svg%3E");
	color:#11d219;
	width:12px;
	height:12px
}
.allcompleted #objectiveBarInfo
{
	display:flex;
	gap:10px;
}
/* UX: globale home-knop — terug naar het dashboard vanaf elk scherm */
/* WP11: interactieve 3D energy islands */
[id="energy_islands_3d"]
{
	position:relative;
	width:100%;
	height:46vh;
	min-height:320px;
	touch-action:none;
	cursor:grab;
}
/* Spec juli 2026: CLAIM ALL — oogst alle eilanden in één tik; zweeft rechtsboven
   over de 3D-view (de eiland-container is daarvoor relative gepositioneerd). */
[id="energy_islands"]
{
	position:relative;
}
/* CLAIM ALL onderaan de ENERGY-tab: zelfde btn-bot-patroon als de
   daily-rewards-claim; boven de drawer-inhoud */
#energy_claim_all
{
	z-index:6;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	left:50%;
	translate:-50% 0;
}
#energy_claim_all img
{
	width:22px;
	height:18px;
	object-fit:contain;
}

/* WP12: zwevende energie-badge per eiland — vervangt zowel de oude
   COLLECT ALL-knop als de losse HARVEST-knop: toont het live opgebouwde
   bedrag en harvest bij een tik. In de 3D-view wordt de positie elk frame
   herberekend (energyIslands3d.js projecteert de wereld-positie naar
   scherm-coördinaten), hier enkel de basisstijl. */
.energy_island_badge
{
	position:absolute;
	left:0;
	top:0;
	z-index:5;
	display:inline-flex;
	flex-direction:column;
	align-items:center;
	gap:3px;
	white-space:nowrap;
	padding:5px 12px 6px;
	font-size:13px;
	font-weight:bold;
	border-radius:14px;
	background:#000000cc;
	border:1px solid #3ddc8455;
	box-shadow:0 3px 10px #0009;
	pointer-events:auto;
	cursor:pointer;
	transition:background .2s, border-color .2s;
	/* ankerpunt (onderkant-midden boven het eiland). De SCHERMPOSITIE komt via de
	   losse translate-property uit JS — niet via transform, want de vol-puls-
	   animatie hieronder animeert transform en zou de positie dan elke frame
	   overschrijven (de "badge blijft linksboven hangen"-bug). */
	transform:translate(-50%,-100%);
}
/* spec: energie-icoon vóór het opgebouwde bedrag */
.energy_island_badge__rij
{
	display:inline-flex;
	align-items:center;
	gap:5px;
}
.energy_island_badge__rij img
{
	width:14px;
	height:14px;
	object-fit:contain;
}
/* spec: vulbalk die toont hoe vol de buffer zit */
.energy_island_badge__bar
{
	display:block;
	width:100%;
	min-width:48px;
	height:4px;
	border-radius:2px;
	background:#ffffff2b;
	overflow:hidden;
}
.energy_island_badge__bar i
{
	display:block;
	height:100%;
	width:0%;
	border-radius:2px;
	background:linear-gradient(90deg, #2aa9ff, #3ddc84);
	transition:width .25s linear;
}
.energy_island_badge.vol .energy_island_badge__bar i
{
	background:#3ddc84;
}
/* buffer vol: nadrukkelijker dan het oude "amper zichtbare groene rondje" —
   dit IS de nieuwe, veel opvallendere "actieve staat"-indicator. */
.energy_island_badge.vol
{
	background:#0d3d1ecc;
	border-color:#3ddc84;
	box-shadow:0 0 14px #3ddc8488, 0 3px 10px #0009;
	animation:energyBadgePuls 1.4s ease-in-out infinite;
}
@keyframes energyBadgePuls
{
	/* het -50%/-100%-anker MOET in elke keyframe mee: een animatie op transform
	   vervangt de volledige property, niet enkel de scale-component */
	0%, 100% { transform:translate(-50%,-100%) scale(1); }
	50%      { transform:translate(-50%,-100%) scale(1.08); }
}

/* WP: kleurenblind-modus — versterkt het onderscheid tussen de cube-kleuren op de
   speelgrid. De modus staat als data-colorblind op <html>. */
:root[data-colorblind="deuteranopia"] #board_wrapper,
:root[data-colorblind="deuteranopia"] #thegrid { filter:saturate(1.55) contrast(1.12) hue-rotate(-14deg); }
:root[data-colorblind="protanopia"] #board_wrapper,
:root[data-colorblind="protanopia"] #thegrid { filter:saturate(1.6) contrast(1.12) hue-rotate(-26deg); }
:root[data-colorblind="tritanopia"] #board_wrapper,
:root[data-colorblind="tritanopia"] #thegrid { filter:saturate(1.5) contrast(1.12) hue-rotate(32deg); }
/* De WebGL-renderer (#gridfx, grid-fx.js) tekent de cubes in een eigen canvas naast
   #board_wrapper. #thegrid krijgt het filter twee keer (zelf én via de wrapper), dus
   hier dezelfde keten dubbel: de kleuren zijn dan gelijk aan die van de klassieke grid. */
:root[data-colorblind="deuteranopia"] #gridfx { filter:saturate(1.55) contrast(1.12) hue-rotate(-14deg) saturate(1.55) contrast(1.12) hue-rotate(-14deg); }
:root[data-colorblind="protanopia"] #gridfx { filter:saturate(1.6) contrast(1.12) hue-rotate(-26deg) saturate(1.6) contrast(1.12) hue-rotate(-26deg); }
:root[data-colorblind="tritanopia"] #gridfx { filter:saturate(1.5) contrast(1.12) hue-rotate(32deg) saturate(1.5) contrast(1.12) hue-rotate(32deg); }
/* instellingen-UI voor de kleurenblind-modus */
.colorblind_settings { padding:16px 20px; }
.colorblind_settings h3 { margin:0 0 4px; }
.colorblind_settings .cb_sub { font-size:12px; opacity:.7; display:block; margin-bottom:12px; }
.colorblind_settings .checkbox-grid { padding:0; }
[id="energy_islands_3d"]:active
{
	cursor:grabbing;
}
[id="energy_island_panel"]
{
	margin:0 16px calc(20px + env(safe-area-inset-bottom));
	opacity:0;
	transition:opacity .2s ease;
}
[id="energy_island_panel"].zichtbaar
{
	opacity:1;
}
/* Harvest-reis: bedrag vliegt claim-punt → schermmidden → (na 1,5s) naar het
   energie-saldo; de trail zelf hergebruikt .distributionFrame. Positionering
   via left/top-transitie, schaal via de losse scale-property (transform blijft
   vrij voor de vaste -50%/-50%-centrering via translate). */
.energy_reis
{
	position:fixed;
	z-index:4; /* boven .top_overlayed (3); de trail-frame wint als later DOM-sibling */
	translate:-50% -50%;
	display:flex;
	align-items:center;
	gap:8px;
	font-family:headers;
	font-size:26px;
	color:#d8ff9a;
	text-shadow:0 2px black, 0 -1px black, 1px 0 black, -1px 0 black;
	pointer-events:none;
	transition:left .4s cubic-bezier(.22,.9,.36,1), top .4s cubic-bezier(.22,.9,.36,1), scale .4s cubic-bezier(.34,1.56,.64,1), opacity .4s;
}
.energy_reis img
{
	width:34px;
	height:34px;
	filter:drop-shadow(0 0 10px #9dff3faa);
}
.energy_reis.centrum
{
	scale:1.35;
}
.energy_reis.centrum:not(.vertrokken)
{
	animation:energy_reis_puls 1s ease-in-out .4s infinite;
}
@keyframes energy_reis_puls
{
	0%, 100% { scale:1.35; }
	50%      { scale:1.5; }
}
.energy_reis.vertrokken
{
	animation:none;
	opacity:0;
	scale:.6;
	transition:opacity .35s, scale .35s;
}
.energy_effect
{
	position:absolute;
	left:50%;
	top:0;
	transform:translateX(-50%);
	font-size:26px;
	font-weight:bold;
	color:#ffd76b;
	text-shadow:0 2px 4px #000;
	pointer-events:none;
	z-index:10;
	display:flex;
	align-items:center;
	gap:6px;
	animation: energyFloat 1.8s ease-out forwards;
}
.energy_effect img { height:1em; }
.energy_effect__evolve { color:#7CFC00; font-size:30px; }
/* wegwerp-laag voor de XP-achtige sterren-burst bij het collecten */
.energy_stars
{
	position:absolute;
	inset:0;
	overflow:visible;
	pointer-events:none;
	z-index:6;
}
/* WP7: viering bij het collecten van een geëvolueerde booster */
.booster_collect
{
	position:fixed;
	inset:0;
	z-index:10000;
	display:flex;
	align-items:center;
	justify-content:center;
	pointer-events:none;
	transition:opacity .4s;
}
.booster_collect.leaving { opacity:0; }
.booster_collect__cube
{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	animation:boosterCollectPop 1.9s cubic-bezier(.2,1.3,.4,1) forwards;
}
.booster_collect__cube img
{
	width:130px;
	filter:drop-shadow(0 0 30px #ffd76b) drop-shadow(0 0 60px #e3a44888);
}
.booster_collect__level
{
	font-size:28px;
	font-weight:bold;
	color:#ffd76b;
	text-shadow:0 2px 6px #000, 0 0 12px #e3a448;
}
@keyframes boosterCollectPop
{
	0%   { transform:scale(.2) translateY(40px); opacity:0; }
	20%  { transform:scale(1.15) translateY(0);  opacity:1; }
	35%  { transform:scale(1); }
	80%  { transform:scale(1) translateY(0);     opacity:1; }
	100% { transform:scale(1.05) translateY(-30px); opacity:0; }
}
@keyframes energyFloat
{
	0%   { opacity:0; transform:translate(-50%, 10px) scale(.8); }
	20%  { opacity:1; transform:translate(-50%, -6px) scale(1.1); }
	80%  { opacity:1; transform:translate(-50%, -40px) scale(1); }
	100% { opacity:0; transform:translate(-50%, -70px) scale(1); }
}
.inventorystat.tekort
{
	color:#ff5a5a;
	filter:drop-shadow(0 0 4px #ff000055);
}

/* Pass-status-knoppen (gift-journey-stijl, ook in de factory-header): actieve
   pas = "… PASS" + vinkje, zonder ACTIVATE-wimpel. */
.pass-check
{
	vertical-align:middle;
	margin-left:4px;
	filter:drop-shadow(0 1px 1px #000);
}
/* pass-knop in de factory-header: minstens even groot als de VIP-pass-knop op
   de gift-journey (feedback: de gekrompen variant oogde te klein); de
   marge-top geeft de zwevende ACTIVATE-wimpel ruimte boven de knop */
.factory_pass_houder
{
	margin-top:14px;
}
.factory_pass_houder .monthly_challenge_vip_pass
{
	white-space:nowrap;
}
/* factory-pass-kleurthema: hetzelfde paars-metallic als het ticket/de knop in
   de factory-pass-drawer ([id="factoryPass"] .ticket) */
.monthly_challenge_vip_pass.factory-metal
{
	background: radial-gradient(ellipse farthest-corner at right bottom, #f2a3ff 0%, #be23d8 8%, #8c07a3 30%, #6b007e 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #f2a3ff 8%, #bc1fd6 25%, #9d00b7 62.5%, #7d0092 100%);
	box-shadow: 0 2px 5px #000000, inset 0 -4px #79038d, inset 0 -5px #f8c8ff;
}

/* Energy islands 3D-wereld: de PNG-eilanden als billboards boven zee, met
   pan/zoom; het paneel eronder toont het geselecteerde eiland. */
#energy_islands_3d
{
	position:relative;
	width:100%;
	/* wereld + paneel + vaste CLAIM ALL passen samen in beeld: de knop is
	   position:fixed en mag het paneel (met de EVOLVE-knop) niet bedekken */
	height:calc(var(--vh100) - 470px);
	min-height:300px;
	overflow:hidden;
}
#energy_island_panel.paneel3d
{
	display:none;
	/* onderruimte = hoogte van de vaste CLAIM ALL + safe-area */
	margin:10px 16px calc(84px + env(safe-area-inset-bottom));
}
#energy_island_panel.paneel3d.zichtbaar
{
	display:flex;
}
/* geprojecteerde overlays in de 3D-wereld (pips onder het eiland, slot op
   pass-eilanden): positie komt élk frame via de losse translate-property */
.eiland3d_overlay
{
	position:absolute;
	left:0;
	top:0;
	z-index:4;
	pointer-events:none;
}
.eiland3d_overlay .energy_eiland__pips
{
	position:static;
	translate:-50% -50%;
	display:flex;
}
.eiland3d_overlay .energy_eiland__lock
{
	position:static;
	translate:-50% -50%;
	display:flex;
	width:44px;
	height:44px;
}

/* Energy islands (rework juli 2026): PNG-eilanden uit /public/img/energyIslands,
   2 kolommen × 3 rijen; tier = pips op het eiland, pass-eilanden dragen een slot. */
.energy_eilanden
{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
	/* extra ruimte onderaan: de vaste CLAIM ALL-onderknop mag de laatste
	   eilandrij niet bedekken */
	padding:16px 16px 120px;
}
.energy_eiland
{
	position:relative; /* anker voor de zwevende +energy-tekst en sterren-burst */
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	padding:12px 10px;
	border-radius:14px;
	background:rgba(0,0,0,.35);
	border:1px solid #6631c3;
}
.energy_eiland__visual
{
	position:relative;
	display:flex;
	align-items:flex-end;
	justify-content:center;
	width:100%;
	min-height:110px;
}
.energy_eiland__img
{
	display:block;
	max-width:100%;
	animation:eiland_zweef 5.5s ease-in-out infinite;
}
/* de illustratie is per TYPE één beeld; de tier groeit het eiland zichtbaar mee */
.energy_eiland__visual.tier-1 .energy_eiland__img { width:76%; }
.energy_eiland__visual.tier-2 .energy_eiland__img { width:88%; }
.energy_eiland__visual.tier-3 .energy_eiland__img { width:100%; }
/* buur-eilanden niet synchroon laten deinen */
.energy_eiland:nth-child(2n) .energy_eiland__img  { animation-delay:-1.8s; }
.energy_eiland:nth-child(3n) .energy_eiland__img  { animation-delay:-3.6s; }
@keyframes eiland_zweef
{
	0%, 100% { transform:translateY(0); }
	50%      { transform:translateY(-6px); }
}
.energy_eiland__pips
{
	position:absolute;
	bottom:2px;
	left:50%;
	translate:-50% 0; /* losse translate: transform blijft vrij voor animaties */
	display:flex;
	gap:5px;
}
.energy_eiland__pips i
{
	width:8px;
	height:8px;
	border-radius:50%;
	background:rgba(255,255,255,.22);
	border:1px solid rgba(255,255,255,.45);
}
.energy_eiland__pips i.aan
{
	background:#ffd257;
	border-color:#ffb300;
	box-shadow:0 0 6px #ffb30088;
}
/* factory-pass-eiland zonder actieve pass */
.energy_eiland.vergrendeld
{
	border-style:dashed;
	opacity:.9;
}
.energy_eiland.vergrendeld .energy_eiland__img
{
	filter:grayscale(1) brightness(.55);
	animation:none;
}
.energy_eiland__lock
{
	position:absolute;
	top:50%;
	left:50%;
	translate:-50% -50%;
	display:flex;
	align-items:center;
	justify-content:center;
	width:52px;
	height:52px;
	border-radius:50%;
	background:rgba(0,0,0,.55);
	color:#ffd257;
}
/* net geëvolveerd: lokale opbouw-pop (schaal met overshoot) op enkel dát eiland */
.energy_eiland.net-geevolveerd .energy_eiland__img
{
	animation:eiland_opbouw .9s cubic-bezier(.34,1.56,.64,1), eiland_zweef 5.5s ease-in-out .9s infinite;
}
@keyframes eiland_opbouw
{
	0%   { transform:scale(.05); opacity:0; }
	60%  { opacity:1; }
	100% { transform:scale(1); }
}
.energy_eiland h3
{
	margin:0;
}
.energy_eiland__stats
{
	font-size:12px;
	opacity:.75;
}
.energy_eiland__tier
{
	font-size:12px;
	opacity:.7;
	letter-spacing:1px;
}
.energy_eiland__maxed
{
	font-size:12px;
	opacity:.6;
	letter-spacing:.5px;
}
.energy_eiland__evolve
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:2px;
}
/* 2D-fallback: de badge hoort hier gewoon in de flex-flow van de kaart i.p.v.
   geprojecteerd te worden zoals in de 3D-view (die heeft geen rAF-loop om de
   positie elk frame opnieuw te berekenen). */
.energy_eiland .energy_island_badge
{
	position:static;
	transform:none !important;
}
/* WP12: productie-toename-regel bovenaan de evolve-bevestigingsdialoog */
.energy_evolve__gain
{
	display:block;
	font-size:13px;
	color:#3ddc84;
	margin-bottom:8px;
}
/* Eiland-kaart-drawer (EVOLVE): zelfde opzet als de booster-kaart, maar met de
   eiland-PNG + tier-pips in de header i.p.v. de cube-afbeelding. De kaart-
   basisstijlen van #itemPicker zijn id-gebonden en gelden hier dus niet —
   hieronder de spiegel-set voor #energyIslandCard. */
#energyIslandCard p
{
	padding:0;
	margin:0;
	opacity:.75;
}
#energyIslandCard .tab-full-btn
{
	width:100%;
}
#energyIslandCard .gamepop_header
{
	height:100%;
	position:relative;
	overflow:hidden;
}
/* de stripes-wrapper is standaard een in-flow flex-kind van .gamepop_header
   (display:flex + >div{width:100%}) en kneep de content-kolom naar rechts —
   uit de flow halen zodat de flex-col als enige kind echt centreert */
#energyIslandCard .gamepop_header .overflow_hidden
{
	position:absolute;
	inset:0;
	overflow:hidden;
	pointer-events:none;
}
#energyIslandCard .properties_container
{
	width:100%;
	font-size:16px;
	grid-template-columns:1fr 1fr;
	text-align:left;
	gap:0 30px;
	padding:25px;
	box-sizing:border-box;
	display:grid;
}
#energyIslandCard .properties_container div
{
	margin:5px 0;
	gap:5px;
}
/* 18 segmenten (één per evolve-stap over de hele ladder) — smaller en dichter
   op elkaar dan de 8 van de cube-kaart, zodat ze in de halve gridkolom passen */
#energyIslandCard .properties_container div div div.property_step
{
	flex:1 1 0;
	min-width:0;
	height:5px;
	background:#fff6;
}
#energyIslandCard .property > .flex-row:last-child
{
	gap:2px;
}
#energyIslandCard .properties_container div div div.active.property_step
{
	background:linear-gradient(to bottom, #ffd700 0%, rgb(255 119 0) 100%);
}
/* EVOLVE-tab: één oranje tegel markeert de stap die deze evolve oplevert —
   zelfde beeldtaal als de cube-upgrade-tab (de generieke upgradeableStep-regel
   verliest het daar van onze id-gebonden segment-achtergrond, dus expliciet) */
#energyIslandCard .upgradeStats .properties_container div div div.property_step.upgradeableStep
{
	background:#ff9c11;
}
#energyIslandCard .energy_card__visual
{
	position:relative;
	display:flex;
	justify-content:center;
	width:170px;
	margin:6px auto 10px;
}
#energyIslandCard .energy_card__visual img
{
	/* .gamepop_header div img dwingt 49x49 af (avatar-regel) — hier wint de
	   id-specificiteit en behoudt de eiland-PNG zijn eigen verhouding */
	width:100%;
	height:auto;
	filter:drop-shadow(0 0 20px #ffffff66);
	animation:eiland_zweef 5.5s ease-in-out infinite;
}
#energyIslandCard .energy_card__visual .energy_eiland__pips
{
	bottom:-4px; /* net onder het zwevende eiland, binnen de header */
}
#energyIslandCard .energy_eiland__tier
{
	font-size:16px;
	opacity:.7;
	letter-spacing:1px;
}
#energyIslandCard .propertyUpgrade + .btn-orange
{
	margin:14px auto 24px;
}
#energyIslandCard [view-content="1"] .splide
{
	margin-bottom:20px;
}
/* de header-wissel (huidig vs volgend eiland) is een view-content-blok in een
   flex-kolom — gecentreerd houden zoals de rest van de header */
#energyIslandCard .gamepop_header [view-content="1"],
#energyIslandCard .gamepop_header [view-content="2"]
{
	text-align:center;
}
.property_icoon
{
	width:18px;
	height:18px;
	margin-right:6px;
}
/* giftway CLAIM ALL: vaste onderknop boven de trail; de stappenlijst krijgt
   onderaan lucht zodat de laatste stap er vrij van scrollt */
#giftway_claim_all
{
	z-index:6;
	left:50%;
	translate:-50% 0;
}
/* challenges CLAIM ALL: zelfde onderknop, maar boven de dashboard-navbalk */
#challenges_claim_all
{
	z-index:6;
	left:50%;
	translate:-50% 0;
	bottom:calc(120px + env(safe-area-inset-bottom));
}
#social .monthly_challenge_steps
{
	padding-bottom:100px;
}

/* PERSONAL MENU > GOLD/PURCHASE HISTORY */
.history_lijst
{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:16px 20px 40px;
}
.history_rij
{
	display:flex;
	align-items:center;
	gap:12px;
	padding:8px 12px;
	border-radius:8px;
	background:#00000042;
	border:1px solid #6631c3;
}
.history_rij img
{
	width:34px;
	height:34px;
	flex-shrink:0;
}
.history_rij__midden
{
	display:flex;
	flex-direction:column;
	gap:2px;
	overflow:hidden;
}
.history_rij__bron
{
	font-weight:bold;
	font-size:14px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.history_rij__tijd
{
	font-size:11px;
	opacity:.7;
}
.history_rij__bedrag
{
	margin-left:auto;
	flex-shrink:0;
	display:flex;
	align-items:center;
	gap:4px;
	font-weight:bold;
	font-size:15px;
}
.history_rij__bedrag img { height:1em; }
.history_rij__bedrag.positief { color:#7CFC00; }
.history_rij__bedrag.negatief { color:#ff5a5a; }

/* WP13: like/comment/views in de REPLAY-tab van rendergameSummary() */
.social-actions
{
	display:flex;
	align-items:center;
	gap:16px;
	margin:14px 0;
}
.social-like-btn
{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 14px;
	border-radius:14px;
	background:#0000004d;
	border:1px solid #ffffff22;
	font-weight:bold;
	transition:background .2s, border-color .2s, color .2s;
}
.social-like-btn svg { transition:transform .2s; }
.social-like-btn.active
{
	color:#ff5a7a;
	background:#ff5a7a1a;
	border-color:#ff5a7a55;
}
.social-like-btn.active svg { transform:scale(1.15); }
.social-view-count
{
	display:inline-flex;
	align-items:center;
	gap:5px;
	opacity:.65;
	font-size:14px;
}
.social-comments-wrap { margin-top:18px; }
.social-comments-wrap h3
{
	font-size:15px;
	margin:0 0 8px;
}
.social-comments-wrap h3 span { opacity:.6; }
.social-comment-list
{
	display:flex;
	flex-direction:column;
	max-height:260px;
	overflow-y:auto;
}
.social-comment
{
	display:flex;
	align-items:flex-start;
	gap:10px;
	padding:10px 0;
	border-bottom:#11004c 1px solid;
}
.social-comment img
{
	width:32px;
	height:32px;
	border-radius:50%;
	flex-shrink:0;
	object-fit:cover;
}
.social-comment__meta
{
	display:block;
	font-size:12px;
	opacity:.6;
	margin-bottom:2px;
}
.social-comment__text
{
	font-size:14px;
	word-break:break-word;
}
.social-comment-form
{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin-top:12px;
}
.social-comment-form textarea
{
	resize:none;
	min-height:60px;
	border-radius:10px;
	border:1px solid #ffffff22;
	background:#00000033;
	color:inherit;
	padding:10px;
	font-family:inherit;
	/* 16px = de iOS-drempel waaronder Safari bij focus automatisch inzoomt;
	   samen met user-scalable=no in de viewport-meta blijft het beeld stil */
	font-size:16px;
}
.social-comment-form .btn-orange
{
	align-self:flex-end;
	padding:8px 20px;
}

/* WP13: profiel-tabs SOCIAL OUT/SOCIAL IN */
.social-profile-list .dashboard_section__rank img
{
	width:40px;
	height:40px;
	border-radius:50%;
	object-fit:cover;
	flex-shrink:0;
}
.social-profile-row__badges
{
	display:flex;
	align-items:center;
	gap:12px;
	margin-left:auto;
	flex-shrink:0;
	font-size:13px;
	opacity:.55;
}
.social-profile-row__badges span
{
	display:inline-flex;
	align-items:center;
	gap:4px;
	transition:color .2s, opacity .2s;
}
.social-profile-row__badges span.active
{
	opacity:1;
	color:#ff5a7a;
}

/* Spec juli 2026: avatar-editor. Tabs RANDOM AVATAR / YOUR PHOTO zitten in de
   gamepop-header (huispatroon: tabs onder de titel); de generieke [tabcontent]-
   panes zijn position:absolute binnen .tabs, dus de container krijgt expliciete
   hoogte/breedte (zelfde valkuil als #factoryPicker .factory_picker_tabs). */
.avatar_change_tabbar
{
	width:100%;
	padding:0 34px 0 14px; /* rechts ruimte laten voor het absolute sluitkruis */
	box-sizing:border-box;
}
.avatar_change_tabs
{
	position:relative;
	flex:1;
	min-height:0;
	width:100%;
	box-sizing:border-box;
}
.avatar_change_tabs [tabcontent].active
{
	display:flex !important;
	flex-direction:column;
}
.avatar_tab_inner
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	min-height:100%;
	box-sizing:border-box;
	padding:4px 2px 10px;
}
/* de centrerende flex-kolom van .avatar_tab_inner zou de grid anders tot
   content-breedte laten krimpen (en de maatloze Avataaars-svg's tot 0px) —
   expliciet uitrekken en de svg's de cel laten vullen */
.avatar_tab_inner .avatars_grid
{
	margin-top:10px;
	align-self:stretch;
	flex:1;
	min-height:0;
	/* rijen niet tot 1fr uitrekken: cellen omsluiten de avatar (selectiekader + ✓
	   hangen dan strak rond het poppetje) en het geheel centreert verticaal */
	grid-template-rows:auto auto;
	align-content:center;
}
.avatar_tab_inner .avatars_grid__avatar
{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:0;
	min-height:0;
	box-sizing:border-box;
}
.avatar_tab_inner .avatars_grid__avatar svg
{
	width:100%;
	height:auto; /* vierkante viewBox → hoogte volgt de breedte */
	max-width:38vw;
	max-height:38vw;
}

/* fototab: intro (upload/camera-knoppen) en daarna de crop-editor */
.foto_editor__intro
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:16px;
	margin:auto 0;
	width:100%;
}
.foto_editor__huidig
{
	width:32vw;
	max-width:170px;
	border-radius:100%;
	border:2px solid #ff980055;
	background:#00000033;
}
.foto_editor__intro .btn-orange
{
	margin-top:0;
	min-width:60% !important;
	text-align:center;
}
.foto_editor__hint
{
	font-size:13px;
	opacity:.55;
	text-align:center;
	padding:0 18px;
	line-height:1.5;
}
.foto_editor__crop
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	width:100%;
	margin:auto 0;
}
.foto_editor__stage
{
	position:relative;
	width:64vw;
	max-width:320px;
	aspect-ratio:1 / 1;
	touch-action:none; /* pan/pinch zijn van de editor, niet van de browser */
	overflow:hidden;
	border-radius:6px;
	background:#00000055;
	box-shadow:inset 0 0 8px #000;
}
.foto_editor__canvas
{
	width:100%;
	height:100%;
	display:block;
}
/* ronde uitsnede-preview: alles buiten de cirkel gedimd (avatars tonen overal rond) */
.foto_editor__mask
{
	position:absolute;
	inset:0;
	border-radius:100%;
	box-shadow:0 0 0 200px #1d1233b8;
	border:2px dashed #ffffff59;
	box-sizing:border-box;
	pointer-events:none;
}
.foto_editor__zoomrij
{
	display:flex;
	align-items:center;
	gap:10px;
	width:64vw;
	max-width:320px;
	color:#ffffffb0;
}
.foto_editor__zoomrij svg
{
	flex-shrink:0;
}
.foto_editor__zoom
{
	flex:1;
	accent-color:#ff9800;
	min-height:28px; /* royaal tikdoel op touch */
}
.foto_editor__opnieuw
{
	color:#ffb74d;
	text-decoration:underline;
	font-size:14px;
}

/* ── Grid-artwork (preview, eigenaar 4 nov 2026): PERSONAL SETTINGS → OTHER →
   GRID ARTWORK — cube-set/badge-tegels met een strookje voorbeelden en EFFECT
   ENGINE (klassiek of WebGL). De twaalf effect-schakelaars en hun overlay-canvas
   zijn op 10 nov 2026 vervallen. ─────────────────────────────────────────── */
.gridart_settings h4 { margin:14px 0 4px; font-size:12px; letter-spacing:.6px; opacity:.85; }
.gridart_settings .checkbox-grid { padding:0; gap:8px; }
.gridart_settings .gridart_strip { display:flex; gap:4px; align-items:center; height:32px; margin-bottom:6px; }
.gridart_settings .gridart_strip img { height:32px; width:auto; }
.gridart_settings img.gridart_strip { height:32px; width:auto; display:block; margin-bottom:6px; }
/* WebGL-renderer (EFFECT ENGINE, 10 nov 2026): één canvas over de grid met een cel
   marge rondom, zodat effecten buiten het grid kunnen uitlopen. Plaats en maat zet
   grid-fx.js zelf (als broer van #thegrid, zodat hij meeschuift met <game>); taps
   gaan er dwars doorheen naar #thegrid. Eén trede boven #thegrid (z-index 3). */
/* Boven de bonusbalk en de objectives-balk (.bonusWrapperOuter, 2222): die liggen net boven het
   grid en dekten de marge van de laag af — een meteoriet of inslag werd daardoor pas aan de rand
   van het grid zichtbaar (eigenaar 11 nov 2026). Cubes tekent de laag alleen bínnen het grid;
   daarbuiten staan alleen deeltjes. Alles buiten <game> (aftellen, lades) blijft erboven; de HUD
   ligt in deze stand op het niveau van <game> (gameheader.gridfx_onder), dus onder de deeltjes. */
[id="gridfx"]
{
	z-index:2223;
	pointer-events:none;
}
/* NEW BADGE (5 nov 2026): de level-badges als losse laag met marge rond de grid,
   zodat ze half buiten de cube kunnen vallen (ook op de randrijen) */
[id="gridart_badges"]
{
	position:fixed;
	display:none;
	z-index:2;
	pointer-events:none;
}