/* ============================================================
   CubeLegend — factory v2 (UPGRADE + ENERGY tab surfaces)
   Loads AFTER CubeRunnerz.css.
   Design source: design/Factory_v2/handoff/design/Factory Update.dc.html
   (frames 2a/2b/ENERGY, 393x852) + SPEC.md §4-§6.

   Sections: A header (title · pass pill · mascot · saldi) — B assembly
   line (lane cards, 4 states) — C filter pills + mixed list — 3 energy
   dashboard + island tiles (with building/built states) — 4 island
   ladder — 5 wiring — 7 island card — 8/9 pass badges + live tick —
   D cube-card level ladder — E motion (belt, halo, sparks; all off
   under prefers-reduced-motion).
   ============================================================ */


/* ---- A. header: title · pass pill · mascot · saldi ------------ */
/* De generieke .top_overlayed__header centreert en klemt op max-height:10vw;
   hier stretchen en op inhoud laten groeien (zelfde recept als .hub_header). */
#social .top_overlayed__header.factory_header
{
	position:relative;
	align-items:stretch;
	text-align:left;
	padding:13px 14px 12px;
	padding-top:calc(13px + env(safe-area-inset-top));
	max-height:unset;
	margin-bottom:0;
	gap:0;
	overflow:visible;
	background:linear-gradient(1deg, #580093 0%, #9a00ff 100%);
	border-bottom:1px solid #c05fff;
	box-shadow:0 14px 30px #00000080;
	z-index:3;
}
.factory_header h1
{
	font-size:21px;
	text-shadow:0 2px black;
	min-width:0;
}
.factory_header__titelrij
{
	display:flex;
	align-items:center;
	min-height:30px;
	gap:6px;
}
/* mascotte rechtsboven, overlapt de kop-rand licht (design: 124px, -52px onder) */
.factory_mascotte
{
	width:124px;
	height:124px;
	object-fit:contain;
	flex:0 0 auto;
	margin:-4px -8px -52px auto;
	filter:drop-shadow(0 3px 6px #00000080);
	pointer-events:none;
	position:relative;
	z-index:2;
}
/* de twee-regelige pass-pil: zelfde plek en maat in alle drie de staten */
.factory_pass_houder
{
	margin-top:1px;
	width:calc(100% - 146px);
	justify-content:flex-start;
}
.factory_pass_pil
{
	position:relative;
	overflow:hidden;
	display:inline-flex;
	align-items:center;
	width:100%;
	box-sizing:border-box;
	height:52px;
	padding:0 12px;
	border-radius:9px;
	border:1px solid #000000c2;
	font-family:'headers';
	font-size:13px;
	letter-spacing:.5px;
	white-space:nowrap;
	color:#fff;
	text-shadow:0 2px #463500, 0 -1px #463500, 1px 0 #463500, -1px 0 #463500;
	background:radial-gradient(at right bottom, #f2a3ff 0%, #be23d8 8%, #8c07a3 30%, #6b007e 40%, transparent 80%),
	           radial-gradient(at left top, #fff 0%, #f2a3ff 8%, #bc1fd6 25%, #9d00b7 62.5%, #7d0092 100%);
	box-shadow:0 2px 5px #000, inset 0 -4px #79038d, inset 0 -5px #f8c8ff;
	cursor:pointer;
}
.factory_pass_pil > svg
{
	flex:0 0 auto;
	margin-right:8px;
	filter:drop-shadow(0 2px 2px #00000099);
}
.factory_pass_pil__tekst
{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	line-height:1.15;
	min-width:0;
}
.factory_pass_pil__kop
{
	display:flex;
	align-items:center;
	/* de globale `:not(input) { font-family:font3 }` won het van de overerving
	   op deze span — de titel hoort in het hoofdtitel-font (headers), net als
	   THE FACTORY ernaast; feedback: een maat groter dan het design (13px) */
	font-family:'headers';
	font-size:16px;
	letter-spacing:.5px;
}
.factory_pass_pil__kop .pass-check
{
	margin-left:4px;
	filter:drop-shadow(0 1px 1px #000);
	flex:0 0 auto;
}
.factory_pass_pil small
{
	margin-top:3px;
	font-family:'p';
	font-size:9.5px;
	letter-spacing:0;
	opacity:.85;
	text-shadow:0 1px #463500;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width:100%;
}
.factory_pass_pil.is-expiring small
{
	color:#ffe08a;
	opacity:1;
}
.factory_pass_pil__glans
{
	position:absolute;
	top:-50%;
	left:0;
	width:200%;
	height:100%;
	opacity:.3;
	background:#fff;
	border-radius:100%;
	pointer-events:none;
}
/* saldo-pillen: EXACT de gemeten drawer-maat (island-/boosterkaart) */
.factory_header_saldi
{
	display:flex;
	width:100%;
	box-sizing:border-box;
	margin-top:14px;
	gap:10px;
	justify-content:space-between;
	position:relative;
	z-index:3;
}
.factory_header_saldi .inventorystat
{
	width:auto;
	flex:0 1 auto;
	min-width:0;
	justify-content:space-between;
	padding:0;
}
.factory_header_saldi .inventorystat img
{
	width:40px;
	height:40px;
	object-fit:contain;
	flex:none;
	margin-left:-10px;
}
.factory_header_saldi .inventorystat span
{
	font-family:font3;
	font-size:20px;
	white-space:nowrap;
	padding:0 4px;
	text-shadow:0 1px black, 0 -1px black, 1px 0 black, -1px 0 black;
}
@media (max-width:380px)
{
	.factory_header_saldi { gap:6px; }
	.factory_header_saldi .inventorystat span { font-size:16px; }
	.factory_header_saldi .inventorystat img { width:32px; height:32px; margin-left:-8px; }
	.factory_mascotte { width:104px; height:104px; margin-bottom:-40px; }
	.factory_pass_houder { width:calc(100% - 120px); }
}
/* Ondergrond van beide tabs = de shop (cubelegend-shop.css §0a): cbg0 onder
   een #0b0318-gradient met de paarse gloed bovenin. De generieke cbg2-foto
   met zwarte laag (.top_overlayed:after/:before) is te bont; zelfde ingreep
   als #shop / #gamerprofile. De tabs zelf zijn transparant. */
#social.factory_view .top_overlayed:after
{
	background:
		radial-gradient(ellipse at 50% 8%, #9a00ff55, transparent 62%),
		linear-gradient(#0b0318cc, #0b0318f2),
		url(/public/img/cubelegend/cbg0.jpeg) center/cover no-repeat,
		#0b0318;
}
#social.factory_view .top_overlayed:before
{
	background:none;
}
#social.factory_view .factory_tabs
{
	background:transparent;
}

/* ---- B. assembly line (SPEC §4.2) ----------------------------- */
.assembly_kop
{
	display:flex;
	align-items:baseline;
	gap:8px;
	margin:0 2px 8px;
	font-family:'p';
	font-size:9px;
	letter-spacing:1.5px;
	color:#ffffff8c;
}
.assembly_kop b
{
	margin-left:auto;
	letter-spacing:0;
	font-size:9.5px;
	font-weight:normal;
	color:#fff;
}
.assembly_line
{
	display:flex;
	flex-direction:column;
	gap:9px;
	margin-bottom:11px;
}
.lane
{
	position:relative;
	overflow:hidden;
	padding:10px 11px 24px;
	border-radius:16px;
	background:linear-gradient(#1f0d3d, #170830);
	border:1px solid #ffffff1f;
}
.lane.is-bezig
{
	border-color:#e3a44880;
	box-shadow:0 0 22px #e3a4481f;
}
.lane.is-klaar
{
	border-color:#7CFC0099;
	box-shadow:0 0 22px #7CFC0026;
	animation:laneKlaarPop .5s ease-out 1;
}
.lane.is-idle
{
	border-color:#be23d866;
}
.lane.is-locked
{
	border:1px dashed #ffffff40;
	background:#12042a;
}
.lane.is-locked .lane__art,
.lane.is-locked .lane__titel,
.lane.is-locked .lane__kicker
{
	opacity:.55;
}
.lane__rij
{
	display:flex;
	gap:11px;
	align-items:center;
	position:relative;
	z-index:2;
}
.lane__body
{
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:7px;
}
.lane__kop
{
	display:flex;
	align-items:baseline;
	gap:6px;
}
.lane__kicker
{
	font-family:'p';
	font-size:9px;
	letter-spacing:1.5px;
	opacity:.5;
	display:flex;
	align-items:center;
	gap:6px;
}
.lane__pass_tag
{
	margin-left:auto;
	font-family:'p';
	font-style:normal;
	font-size:8.5px;
	letter-spacing:1px;
	color:#f2a3ff;
	background:#9d00b71f;
	border:1px solid #be23d866;
	border-radius:20px;
	padding:3px 8px;
	flex:0 0 auto;
	opacity:1;
}
.lane__titel
{
	font-family:'headers';
	font-size:15px;
	margin-top:-3px;
}
.lane__copy
{
	margin:0;
	font-family:'p';
	font-size:10.5px;
	opacity:.7;
	text-wrap:pretty;
}
.lane__klok
{
	font-family:'headers';
	font-size:22px;
	color:#e3a448;
	text-shadow:0 2px black;
	line-height:22px;
	font-variant-numeric:tabular-nums;
}
.lane__klok.is-klaar
{
	color:#7CFC00;
}
.lane__progress
{
	height:7px;
	border-radius:4px;
	background:#00000073;
	border:1px solid #ffffff26;
	overflow:hidden;
}
.lane__progress span
{
	position:relative;
	display:block;
	height:100%;
	overflow:hidden;
	background:linear-gradient(90deg, #ffd05a, #ff7a1a);
	transition:width 1s linear;
}
.lane.is-klaar .lane__progress span
{
	background:linear-gradient(90deg, #b8ff7a, #7CFC00);
}
.lane__progress span i
{
	position:absolute;
	top:0;
	bottom:0;
	width:26%;
	background:linear-gradient(90deg, #ffffff00, #ffffffa6, #ffffff00);
	animation:barShimmer 1.8s linear infinite;
}
.lane__knop
{
	height:30px;
	border-radius:9px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	font-family:'headers';
	font-size:11px;
	position:relative;
	z-index:2;
}
.lane__speedup
{
	background:#00000059;
	border:1px solid #ffffff26;
	color:#fff;
	cursor:pointer;
}
.lane__speedup b
{
	font-weight:normal;
}
.lane__speedup:active
{
	background:#ffffff1f;
}
.ic_diamond
{
	width:14px;
	height:14px;
	object-fit:contain;
}
.lane__grace
{
	font-family:'p';
	font-size:9px;
	letter-spacing:1px;
	color:#ffb347;
	opacity:.9;
}
.lane__hint
{
	font-family:'p';
	font-size:9px;
	opacity:.45;
}
.lane__hint.is-leeg
{
	opacity:.7;
	text-wrap:pretty;
}
/* de drie goedkoopste volgende stappen */
.lane__suggesties
{
	display:flex;
	gap:6px;
}
.lane__suggestie
{
	flex:1;
	min-width:0;
	padding:7px 4px 6px;
	border-radius:11px;
	background:#12042a;
	border:1px solid #7CFC0040;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:3px;
	cursor:pointer;
}
.lane__suggestie.is-island
{
	border-color:#35c7ff59;
}
.lane__suggestie:active
{
	background:#ffffff14;
}
.lane__suggestie img
{
	width:30px;
	height:30px;
	object-fit:contain;
}
.lane__suggestie span
{
	font-family:'headers';
	font-size:9.5px;
	text-align:center;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width:100%;
}
.lane__suggestie small
{
	font-family:'p';
	font-size:8.5px;
	color:#7CFC00;
	white-space:nowrap;
}
.lane__suggestie.is-island small
{
	color:#7fdcff;
}
/* machine art: platform PNG + glazen buis; --charge = vloeistofhoogte */
.lane__art
{
	position:relative;
	display:flex;
	justify-content:center;
	flex:0 0 auto;
}
.lane__platform
{
	width:auto;
	height:128px;
	display:block;
	position:relative;
	z-index:2;
}
.lane__tube
{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	top:13%;
	height:72%;
	width:32%;
	border-radius:8px;
	overflow:hidden;
	z-index:0;
}
.lane__glas
{
	position:absolute;
	inset:0;
	z-index:1;
	background:linear-gradient(90deg, #00000080 0%, #00000024 16%, transparent 38%, #ffffff47 50%, transparent 62%, #00000024 84%, #00000080 100%),
	           linear-gradient(#3b2a63 0%, #2a1b4c 100%);
	box-shadow:inset 0 10px 16px #ffffff1f;
}
.lane__tube.is-bezig .lane__glas
{
	background:linear-gradient(90deg, #00000080 0%, #00000024 16%, transparent 38%, #ffffff47 50%, transparent 62%, #00000024 84%, #00000080 100%),
	           linear-gradient(#9a6cf0 0%, #6b3fc0 100%);
}
.lane__vloeistof
{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:var(--charge, 0%);
	min-height:8%;
	z-index:2;
	background:linear-gradient(#ffe89c 0%, #f6981f 55%, #e07a15 100%);
	box-shadow:0 0 16px #ffd76b;
	mask-image:linear-gradient(transparent 0, #000 11%);
	transition:height 1s linear;
}
.lane__tube.is-klaar .lane__vloeistof
{
	background:linear-gradient(#d9ffb0 0%, #7CFC00 55%, #4fb800 100%);
	box-shadow:0 0 16px #7CFC00;
}
.lane__bubbels
{
	position:absolute;
	inset:0;
	z-index:3;
}
.lane__bubbels i
{
	position:absolute;
	bottom:0;
	left:28%;
	width:6px;
	height:6px;
	border-radius:50%;
	background:radial-gradient(circle at 32% 30%, #fff, #ffe6b0 60%, transparent);
	opacity:0;
	animation:bubbleRise 2.6s ease-in infinite;
}
.lane__bubbels i:nth-child(2) { left:60%; width:8px; height:8px; animation-duration:3.2s; animation-delay:.6s; }
.lane__bubbels i:nth-child(3) { left:44%; width:5px; height:5px; animation-duration:2.9s; animation-delay:1.3s; }
.lane__cube
{
	position:absolute;
	left:50%;
	top:17%;
	width:28px;
	z-index:4;
	filter:drop-shadow(0 0 9px #ffe6b0);
	animation:boosterSway 3.6s ease-in-out infinite;
	transform:translate(-50%, 0);
}
/* eiland-bouw in een lane: het energie-icoon zweeft in de buis */
.lane__cube.is-eiland
{
	width:30px;
	top:16%;
	filter:drop-shadow(0 0 9px #7CFC00);
}
.lane__slot
{
	position:absolute;
	left:50%;
	top:42%;
	transform:translate(-50%, -50%);
	z-index:4;
	color:#FFC107;
	filter:drop-shadow(0 2px 3px #000);
}

/* ---- C. filter pills + mixed list (SPEC §4.3) ------------------ */
.factory_filters
{
	display:flex;
	gap:6px;
	margin:11px 0 9px;
}
.factory_filter
{
	flex:1;
	text-align:center;
	padding:7px 0;
	border-radius:9px;
	font-family:'headers';
	font-size:11px;
	background:#00000059;
	border:1px solid #ffffff1f;
	color:#ffffffb5;
	cursor:pointer;
}
.factory_filter.is-actief
{
	background:#ffffff1f;
	border-color:#ffffff40;
	color:#fff;
}
.factory_filter small
{
	font-family:'p';
	font-size:9px;
	opacity:.6;
}
.evolve_list
{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.evolve_row
{
	display:flex;
	align-items:center;
	gap:10px;
	padding:9px 10px;
	background:#170830;
	border:1px solid #ffffff17;
	border-radius:12px;
	position:relative;
}
.evolve_row.is-affordable { border-color:#7CFC0040; }
.evolve_row.is-island.is-affordable,
.evolve_row.is-island.is-building
{
	border-color:#35c7ff59;
}
/* eiland-rijen dragen het blauwe accentstreepje links (design) */
.evolve_row.is-island:not(.is-maxed):before
{
	content:'';
	position:absolute;
	left:0;
	top:9px;
	bottom:9px;
	width:3px;
	border-radius:0 3px 3px 0;
	background:#35c7ff;
}
.evolve_row.is-built
{
	background:linear-gradient(#1f0d3d, #170830);
	border-color:#7CFC0066;
	box-shadow:0 0 20px #7CFC0016;
}
.evolve_row.is-built:before { background:#7CFC00; }
.evolve_row.is-short,
.evolve_row.is-maxed
{
	opacity:.85;
}
.evolve_row.is-needs-lane
{
	opacity:.55;
}
.evolve_row > img
{
	width:40px;
	height:40px;
	object-fit:contain;
	flex:none;
}
.evolve_row.is-island > img { width:44px; height:44px; }
.evolve_row__body
{
	flex:1;
	min-width:0;
}
.evolve_row__kop
{
	display:flex;
	align-items:baseline;
	gap:5px;
	min-width:0;
}
.evolve_row__kop .username
{
	font-family:'headers';
	font-size:14px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.evolve_row__level
{
	font-family:'p';
	font-size:10px;
	opacity:.5;
	white-space:nowrap;
}
.evolve_row__level i
{
	font-style:normal;
	color:#7CFC00;
}
.evolve_row.is-island .evolve_row__level { color:#7fdcff; opacity:1; }
.evolve_row.is-island .evolve_row__level i { color:#7CFC00; }
.evolve_row__level.is-built
{
	color:#7CFC00;
	opacity:1;
}
.evolve_row__timer
{
	margin-left:auto;
	font-family:'headers';
	font-size:12px;
	font-weight:normal;
	color:#7fdcff;
	font-variant-numeric:tabular-nums;
}
.evolve_row__sub
{
	font-family:'p';
	font-size:9.5px;
	opacity:.55;
	margin-top:3px;
}
.evolve_row__progress
{
	margin-top:6px;
	height:6px;
	border-radius:4px;
	background:#00000073;
	border:1px solid #ffffff26;
	overflow:hidden;
}
.evolve_row__progress span
{
	display:block;
	height:100%;
	background:linear-gradient(90deg, #9ae9ff, #1591e0);
	transition:width 1s linear;
}
.evolve_row__costs
{
	display:flex;
	gap:5px;
	margin-top:5px;
	align-items:center;
	flex-wrap:wrap;
}
.evolve_row__costs span
{
	display:flex;
	align-items:center;
	gap:4px;
	font-family:'headers';
	font-size:10.5px;
	color:#7CFC00;
}
.evolve_row__costs span.is-short { color:#ff6b6b; }
.evolve_row__costs span img
{
	width:16px;
	height:16px;
	object-fit:contain;
}
.evolve_row__costs em
{
	font-family:'p';
	font-size:9.5px;
	font-style:normal;
	opacity:.45;
	margin-left:2px;
}
.evolve_row__costs em.is-short { color:#ff6b6b; opacity:1; }
.evolve_row__costs em.is-site  { color:#7fdcff; opacity:1; }
.evolve_row__costs em.is-wait  { color:#ffb347; opacity:1; }
.evolve_row__knop
{
	height:32px;
	padding:0 12px;
	border-radius:9px;
	display:flex;
	align-items:center;
	gap:4px;
	font-family:'headers';
	font-size:11px;
	flex:none;
}
.evolve_row__knop.is-secondary
{
	background:#00000059;
	border:1px solid #ffffff26;
	color:#ffffffb5;
	text-shadow:none;
	box-shadow:none; /* geen oranje 3D-rand van .btn-orange op de secundaire knop */
}
.evolve_row__knop.is-wait
{
	pointer-events:none;
}
.evolve_row__knop.is-speedup
{
	background:#00000059;
	border:1px solid #ffffff26;
	color:#fff;
	padding:0 10px;
	cursor:pointer;
}
.evolve_row__knop.is-speedup img { width:13px; height:13px; }
/* maxed items collapse into one row of icons — alleen de iconen zijn tikdoel */
.evolve_row.is-maxed > img
{
	pointer-events:auto;
	box-sizing:content-box;
	width:34px;
	height:34px;
	padding:6px;
	margin:-6px;
	border-radius:10px;
	cursor:pointer;
}
.evolve_row.is-maxed > img:active { background:#ffffff1f; }
.evolve_leeg
{
	font-family:'p';
	opacity:.6;
	text-align:center;
	padding:30px 10px;
}
.factory_voetnoot
{
	margin:14px 2px 0;
	font-family:'p';
	font-size:9.5px;
	text-align:center;
	opacity:.45;
	text-wrap:pretty;
}

/* ---- 3. energy dashboard (ENERGY tab) ------------------- */
/* Δ CHANGE: one production summary above the island grid — claimable
   total, production rate, CLAIM ALL, and a warning when islands sit
   full and have stopped producing. */
.energy_dashboard
{
	padding:11px 12px;
	background:linear-gradient(#1f0d3d, #170830);
	border:1px solid #ffffff1f;
	border-radius:14px;
}
.energy_dashboard__figure
{
	display:flex;
	align-items:center;
	gap:7px;
	margin-top:3px;
}
.energy_dashboard__figure img
{
	width:30px;
	height:30px;
	object-fit:contain;
	flex:none;
}
.energy_dashboard__figure span
{
	font-family:'headers';
	font-size:26px;
	line-height:26px;
	color:#FFC107;
	text-shadow:0 2px black;
}
.energy_dashboard .btn-orange
{
	height:38px;
	margin-top:10px;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	font-family:'headers';
	font-size:13px;
}
.energy_dashboard__warning
{
	display:flex;
	align-items:center;
	gap:5px;
	margin-top:8px;
	font-family:'p';
	font-size:9.5px;
	color:#ff6b6b;
}
.energy_dashboard__warning:before
{
	content:'';
	width:7px;
	height:7px;
	border-radius:50%;
	background:#ff2d55;
	animation:factoryGlowPulse 1.8s ease-in-out infinite;
	flex:none;
}
@keyframes factoryGlowPulse
{
	0%,100% { opacity:.35 }
	50%     { opacity:.8 }
}

/* island grid — Δ sorted fullest-buffer first, so "what needs me now"
   is the first thing read. Full islands carry the alert treatment. */
.energy_islands__grid
{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:9px;
}
.energy_island
{
	position:relative;
	padding:8px;
	background:#170830;
	border:1px solid #ffffff17;
	border-radius:14px;
}
.energy_island.is-full
{
	background:linear-gradient(#2a1043, #170830);
	border-color:#ff2d5566;
	box-shadow:0 0 18px #ff2d5522;
}
.energy_island.is-locked
{
	background:#12042a;
	border:1px dashed #ffffff2b;
}
.energy_island__art
{
	display:flex;
	align-items:center;
	justify-content:center;
	height:78px;
}
.energy_island__art img
{
	max-width:96%;
	max-height:78px;
	object-fit:contain;
}
.energy_island.is-locked .energy_island__art img
{
	filter:grayscale(1);
	opacity:.4;
}
.energy_island__badge
{
	position:absolute;
	top:8px;
	left:8px;
	padding:1px 6px;
	border-radius:8px;
	font-family:'p';
	font-size:8.5px;
}
.energy_island__badge.is-full     { background:#ff2d55; }
.energy_island__badge.is-evolve   { background:#4CAF50; border:1px solid #000; box-shadow:inset 0 4px 3px #b0ffb3c7; }
.energy_island__badge.is-building { background:#1591e0; border:1px solid #000; box-shadow:inset 0 4px 3px #b0e9ffc7; }
.energy_island__badge.is-built    { background:#4CAF50; border:1px solid #000; box-shadow:inset 0 4px 3px #b0ffb3c7; }
/* bouwend eiland: blauwe rand, gedimde kunst met scanlijn, bouwbalk + klok */
.energy_island.is-building
{
	border-color:#35c7ff80;
}
.energy_island.is-building .energy_island__art
{
	position:relative;
	overflow:hidden;
	border-radius:10px;
}
.energy_island.is-building .energy_island__art img
{
	opacity:.5;
}
.energy_island__scan
{
	position:absolute;
	left:0;
	right:0;
	height:26px;
	background:linear-gradient(#35c7ff00, #35c7ff66, #35c7ff00);
	animation:buildScan 2.6s linear infinite;
	pointer-events:none;
}
.energy_island__head small.is-building { color:#7fdcff; }
.energy_island__head small.is-built    { color:#7CFC00; }
.energy_island__buffer.is-building span
{
	background:linear-gradient(90deg, #9ae9ff, #1591e0);
}
.energy_island__timer
{
	color:#7fdcff !important;
	font-variant-numeric:tabular-nums;
}
/* gebouwd, wacht op herstart: groene gloed, kunst ontkleurd, RESTART-knop */
.energy_island.is-built
{
	background:linear-gradient(#1f0d3d, #170830);
	border-color:#7CFC0066;
	box-shadow:0 0 20px #7CFC0016;
}
.energy_island.is-built .energy_island__art img
{
	filter:saturate(.4) brightness(.8);
}
.energy_island__restart
{
	display:flex;
	margin-top:6px;
	height:28px;
	border-radius:8px;
	align-items:center;
	justify-content:center;
	font-family:'headers';
	font-size:11px;
}
.energy_dashboard__bouw
{
	display:flex;
	align-items:center;
	gap:5px;
	margin-top:8px;
	font-family:'p';
	font-size:9.5px;
	color:#7fdcff;
}
.energy_dashboard__bouw:before
{
	content:'';
	width:7px;
	height:7px;
	border-radius:50%;
	background:#35c7ff;
	animation:factoryGlowPulse 1.8s ease-in-out infinite;
	flex:none;
}
.energy_dashboard__bouw.is-hidden { display:none; }
.energy_island__head
{
	display:flex;
	align-items:center;
	gap:5px;
}
.energy_island__head b
{
	font-family:'headers';
	font-size:12px;
	font-weight:normal;
}
.energy_island__head small
{
	font-family:'p';
	font-size:9px;
	color:#FFC107;
}
.energy_island__pips
{
	display:flex;
	gap:2px;
	margin-left:auto;
}
.energy_island__pips i
{
	width:5px;
	height:5px;
	border-radius:50%;
	background:#ffffff2b;
}
.energy_island__pips i.on
{
	background:#FFC107;
}
/* buffer bar: amber while filling, red once full and stalled */
.energy_island__buffer
{
	margin-top:6px;
	height:8px;
	border-radius:5px;
	background:#00000073;
	border:1px solid #ffffff26;
	overflow:hidden;
}
.energy_island__buffer span
{
	display:block;
	height:100%;
	background:linear-gradient(90deg, #ffd05a, #ff9d2e);
}
.energy_island.is-full .energy_island__buffer span
{
	background:linear-gradient(90deg, #ff9d2e, #ff2d55);
}
.energy_island__meta
{
	display:flex;
	justify-content:space-between;
	margin-top:4px;
	font-family:'p';
	font-size:9px;
	color:#ffffffb5;
}
.energy_island__meta b
{
	font-weight:normal;
	color:#fff;
}

/* ---- 4. island drawer: evolve ladder -------------------- */
/* The ONLY drawer change. Δ replaces the four repeated per-property
   progress bars with one 18-step ladder across the whole plant chain,
   so a player sees where this island sits in the whole progression. */
.island_ladder__head
{
	display:flex;
	align-items:baseline;
	gap:8px;
	font-family:'p';
	font-size:9px;
	letter-spacing:1.5px;
	opacity:.55;
}
.island_ladder__head span
{
	margin-left:auto;
	letter-spacing:0;
	font-size:9.5px;
}
.island_ladder__head span b
{
	color:#fff;
	font-weight:normal;
}
.island_ladder
{
	display:flex;
	gap:2px;
	margin-top:6px;
}
.island_ladder u
{
	flex:1;
	height:11px;
	border-radius:2px;
	text-decoration:none;
	background:#2a1348;      /* not reached */
}
.island_ladder u.done
{
	background:#8a3ae0;
}
.island_ladder u.next
{
	background:#ffb300;
	box-shadow:0 0 10px #ffb30099;
}
.island_ladder__legend
{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	margin-top:5px;
	font-family:'p';
	font-size:8px;
	letter-spacing:.5px;
	text-align:center;
	opacity:.36;
}
.island_ladder__legend b
{
	color:#FFC107;
	opacity:1;
	font-weight:normal;
}
/* property rows: one line each, current → next */
.island_props
{
	display:flex;
	flex-direction:column;
}
.island_props__row
{
	display:flex;
	align-items:center;
	gap:10px;
	padding:9px 2px;
	border-bottom:1px solid #ffffff14;
}
.island_props__row svg
{
	flex:none;
	opacity:.55;
}
.island_props__row span
{
	flex:1;
	font-family:'p';
	font-size:12px;
	color:#ffffffd6;
}
.island_props__row b
{
	font-family:'headers';
	font-size:13px;
	font-weight:normal;
}
.island_props__row b i
{
	font-style:normal;
	color:#7CFC00;
}
.island_props__row b u
{
	text-decoration:none;
	opacity:.45;
}

/* ---- 5. wiring additions (niet uit de handover-sheet) ---- */
/* CLAIM ALL in het dashboard: de oude #energy_claim_all was een vaste
   onderknop (btn-bot-patroon: inline-flex, left:50% + translate) — in het
   dashboard is hij een gewone volle-breedte-rij van 38px (canvas frame 02) */
.energy_dashboard #energy_claim_all
{
	position:relative;
	left:auto;
	translate:none;
	display:flex;
	width:100%;
	box-sizing:border-box;
	height:38px;
	padding:0;
	margin:10px 0 0;
	border-radius:10px;
	align-items:center;
	justify-content:center;
	gap:7px;
	font-family:'headers';
	font-size:13px;
}
/* dashboard-kop: de layout-utilities uit de handover-markup bestaan niet
   als globale classes (zelfde valkuil als bij de PvP-rebuild) — hier
   gescoped aanleveren: linksonder de oogst-figure, rechtsonder PRODUCTION */
.energy_dashboard .flex-row.align-end
{
	display:flex;
	align-items:flex-end;
}
.energy_dashboard .flex-1
{
	flex:1;
	min-width:0;
}
.energy_dashboard .text-right
{
	text-align:right;
	flex:none;
}
.energy_dashboard small
{
	font-family:'p';
	font-size:9px;
	letter-spacing:1.5px;
}
.energy_dashboard .text-right div small
{
	letter-spacing:.5px;
	font-size:9.5px;
}
.energy_dashboard .font-headers
{
	font-family:'headers';
	font-size:15px;
	font-weight:normal;
}
/* de "?"-hulpknop als kalm flex-lid in de dashboard-kop (de generieke
   absolute rechtsboven-positie overlapte de PRODUCTION-kolom) */
.energy_dashboard .tutorial_help
{
	position:static;
	width:24px;
	height:24px;
	min-width:24px;
	font-size:14px;
	margin-left:8px;
	align-self:flex-start;
}
#energy_islands > .tutorial_help
{
	display:none; /* vangnet: mocht hij toch nog los gerenderd worden */
}
/* GET-variant (short on resources): gedimde secundaire knop, opent de shop */
.evolve_row .btn-orange
{
	height:32px;
	padding:0 12px;
	border-radius:9px;
	display:flex;
	align-items:center;
	font-family:'headers';
	font-size:11px;
	flex:none;
}
.evolve_row .btn-orange.is-secondary
{
	background:#00000059;
	border:1px solid #ffffff26;
	color:#ffffffb5;
	text-shadow:none;
}
/* de eiland-tegels vervangen het oude .energy_eilanden-grid; de onderste rij
   moet vrij van de home-nav kunnen scrollen (zelfde ruimte als voorheen) */
.energy_islands__grid
{
	padding-bottom:130px;
}
/* de tab-oppervlakken droegen hun randruimte vroeger via .factory_machines
   (16px 20px) en .energy_eilanden (16px); de nieuwe surfaces dragen hem zelf
   (canvas: 12px 14px). tabcontent="gold" / #energy_islands bestaan alleen in
   de factory-view. NB: [tabcontent] wisselt met display:none/block !important
   — dus marges op de kinderen, geen flex-gap op de pane zelf. */
[tabcontent="gold"]
{
	padding:12px 14px 40px;
}
[tabcontent="gold"] .social-profile-list__divider
{
	margin:11px 2px 8px;
}
#energy_islands
{
	padding:12px 14px 0;
	display:flex;
	flex-direction:column;
	gap:11px;
}
/* ---- 7. eiland-kaart: ladder boven de stats + vaste EVOLVE NOW ---- */
/* De spiegel-set in CubeRunnerz.css zet #energyIslandCard .properties_container
   nog als 2-koloms grid (voor de vier oude property-tegels) — de ladder en de
   nu→straks-regels stonden daardoor naast elkaar geperst. Ladder hoort vol-
   breed BOVEN de stats (canvas frame 03). */
#energyIslandCard .properties_container
{
	display:flex;
	flex-direction:column;
	gap:10px;
	padding:14px 16px 6px;
}
#energyIslandCard .properties_container .island_props__row
{
	margin:0;
}
#energyIslandCard .island_props__row span
{
	text-align:left;
}
#energyIslandCard .island_props__row b
{
	white-space:nowrap;
}
/* EVOLVE NOW altijd bereikbaar: sticky onderin het scrollvak, met een
   donkere halo zodat content er leesbaar onderdoor scrollt */
#energyIslandCard .upgradeStats .propertyUpgrade + .btn-orange
{
	position:sticky;
	bottom:8px;
	z-index:5;
	margin:14px auto 12px;
	box-shadow:0 0 0 7px #12042a, 0 -12px 26px #12042a;
}
/* ---- 8. pass-eilanden + live groeitik (feedback aug 2026) ---- */
/* PASS-badge naast de status-badge: ook mét een actieve pass blijft
   zichtbaar wélke eilanden van de factory pass komen (eiland 3..5).
   De badges staan nu in een rij-container — de basis-.energy_island__badge
   was zelf absoluut gepositioneerd. */
.energy_island__badges
{
	position:absolute;
	top:8px;
	left:8px;
	z-index:2;
	display:flex;
	gap:4px;
}
.energy_island__badges .energy_island__badge
{
	position:static;
	top:auto;
	left:auto;
}
.energy_island__badge.is-pass
{
	background:#9d00b7;
	border:1px solid #000;
	box-shadow:inset 0 4px 3px #f2a3ff80;
}
/* subtiele paarse rand op een ontgrendeld pass-eiland — herkenbaar op één
   blik, maar de FULL-staat (rood) blijft altijd voorgaan */
.energy_island.is-pass:not(.is-full)
{
	border-color:#be23d866;
}
/* de groeitik zet CLAIM ALL en de vol-waarschuwing aan/uit zonder her-render;
   dubbele klasse-specificiteit omdat #energy_claim_all zelf display:flex zet */
.energy_dashboard #energy_claim_all.is-hidden,
.energy_dashboard__warning.is-hidden
{
	display:none;
}
/* ---- 9. live-teller: vloeiende groei-animatie ---------------- */
/* De opgebouwde energie loopt zichtbaar op (rAF-lus, ~8 updates/s). Elke
   wijziging krijgt een korte tik-puls, zodat de teller leeft i.p.v. per
   seconde te verspringen. scale() vraagt een inline-block; transform-origin
   links houdt het linksuitgelijnde cijfer op zijn plek. */
.energy_dashboard__figure span,
.energy_island__meta b
{
	display:inline-block;
	transform-origin:left center;
	will-change:transform;
}
.energy_dashboard__figure span.tikt
{
	animation:energyTik .3s ease-out;
}
@keyframes energyTik
{
	0%   { transform:scale(1);    text-shadow:0 2px black; }
	30%  { transform:scale(1.06); text-shadow:0 2px black, 0 0 14px #ffc107b3; color:#ffe08a; }
	100% { transform:scale(1);    text-shadow:0 2px black; }
}
.energy_island__meta b.tikt
{
	animation:energyTikKlein .3s ease-out;
}
@keyframes energyTikKlein
{
	0%   { transform:scale(1);    color:#fff; }
	30%  { transform:scale(1.12); color:#ffd76b; }
	100% { transform:scale(1);    color:#fff; }
}
/* de bufferbalk kruipt mee i.p.v. per update te springen */
.energy_island__buffer span
{
	transition:width .22s linear;
}

/* ---- C2. kaarten: de bouwduur-tegel (klok) naast de kosten-tegels ---- */
/* Cube-kaart ("12h · in the lane") én eiland-kaart ("5d · on site") delen
   dezelfde tegel; de caption zegt waar de tijd verstrijkt. */
.propertyUpgrade div.time
{
	color:#ffe08a;
}
.propertyUpgrade div.time small
{
	font-family:'p';
	font-size:9px;
	letter-spacing:.5px;
	opacity:.6;
	margin-top:2px;
	color:#fff;
	white-space:nowrap;
}

/* ---- D. cube card: LEVEL X OF Y ------------------------------- */
/* Boven de property-tegels in PROPERTIES én UPGRADE: het huidige level
   tegenover het totaal, plus een segment per upgrade-stap (done · next). */
.cube_level
{
	display:flex;
	align-items:baseline;
	gap:6px;
	padding:10px 16px 0;
	font-family:'p';
	font-size:9px;
	letter-spacing:1.5px;
	opacity:.9;
}
.cube_level__kop { opacity:.55; }
.cube_level b
{
	font-family:'headers';
	font-size:18px;
	letter-spacing:0;
	color:#FFC107;
	text-shadow:0 1px black;
}
.cube_level small
{
	font-size:9.5px;
	letter-spacing:0;
	opacity:.6;
}
.cube_level.is-maxed small { color:#7CFC00; opacity:1; }
.cube_level__ladder
{
	margin-left:auto;
	display:flex;
	gap:3px;
	align-self:center;
	min-width:96px;
}
.cube_level__ladder u
{
	flex:1;
	height:9px;
	border-radius:2px;
	text-decoration:none;
	background:#2a1348;
}
.cube_level__ladder u.done { background:#8a3ae0; }
.cube_level__ladder u.next { background:#ffb300; box-shadow:0 0 10px #ffb30099; }

/* ---- E. motion (SPEC §6) — decoratie, uit onder reduced-motion -- */
/* lopende band onderaan een werkende lane: amber/zwarte treden die
   verschuiven, met een lichtere veeg eroverheen */
.lane__belt
{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:12px;
	overflow:hidden;
	background:#00000080;
	box-shadow:inset 0 6px 8px -7px #000;
	pointer-events:none;
	z-index:1;
}
.lane__treads
{
	position:absolute;
	inset:0 -40px;
	background:repeating-linear-gradient(45deg, #6b5a3f 0px, #6b5a3f 10px, #0d0700 10px, #0d0700 20px);
}
.lane__belt.is-actief .lane__treads
{
	background:repeating-linear-gradient(45deg, #e3a448 0px, #e3a448 10px, #140a00 10px, #140a00 20px);
	animation:beltMove 1s linear infinite;
}
/* de lichtveeg loopt van links buiten beeld tot voorbij de rechterrand — met
   een percentage-translate op zijn eigen 64px kwam hij nooit verder dan ~330px */
.lane__sweep
{
	position:absolute;
	top:0;
	bottom:0;
	left:-64px;
	width:64px;
	background:linear-gradient(90deg, #ffb34700, #ffe6b099, #ffb34700);
	animation:beltSweep 2.4s linear infinite;
}
@keyframes beltSweep { from { transform:translateX(0) } to { transform:translateX(calc(100vw + 64px)) } }
.lane__belt:before
{
	content:'';
	position:absolute;
	left:0;
	right:0;
	top:0;
	height:1px;
	background:linear-gradient(90deg, transparent, #ffd76bb5 30%, #ffd76bb5 70%, transparent);
}
/* reactor-halo achter de machine-art + een paar vonken vanaf de band */
.lane__halo
{
	position:absolute;
	left:34px;
	top:58%;
	width:86px;
	height:86px;
	margin:-43px 0 0 -43px;
	border-radius:50%;
	background:radial-gradient(closest-side, #ffb34766, transparent 70%);
	animation:reactorPulse 1.8s ease-in-out infinite;
	pointer-events:none;
	z-index:1;
}
.lane__vonk
{
	position:absolute;
	left:26px;
	top:46%;
	width:6px;
	height:6px;
	border-radius:50%;
	background:#ffe6b0;
	box-shadow:0 0 8px #ffb347;
	opacity:0;
	animation:sparkFly 1.6s linear infinite;
	pointer-events:none;
	z-index:1;
}
.lane__vonk--2 { left:52px; top:52%; width:4px; height:4px; background:#fff3d0; box-shadow:0 0 8px #ffd76b; --dx:-12px; animation-duration:2.1s; animation-delay:.7s; }
.lane__vonk--3 { left:40px; top:40%; width:5px; height:5px; --dx:16px; animation-duration:1.9s; animation-delay:1.2s; }
@keyframes beltMove      { from { transform:translateX(0) } to { transform:translateX(28.284px) } }
@keyframes barShimmer    { 0% { transform:translateX(-120%) } 100% { transform:translateX(420%) } }
@keyframes reactorPulse  { 0%,100% { opacity:.35; transform:scale(1) } 50% { opacity:.7; transform:scale(1.06) } }
@keyframes sparkFly      { 0% { transform:translate(0,0) scale(.6); opacity:0 } 20% { opacity:1 } 100% { transform:translate(var(--dx,10px),-26px) scale(.2); opacity:0 } }
@keyframes buildScan     { 0% { transform:translateY(-100%) } 100% { transform:translateY(600%) } }
@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) } }
@keyframes boosterSway   { 0% { transform:translate(-50%,0) rotate(-9deg) } 50% { transform:translate(-50%,-6px) rotate(9deg) } 100% { transform:translate(-50%,0) rotate(-9deg) } }
@keyframes laneKlaarPop  { 0% { transform:scale(1); box-shadow:0 0 0 #7CFC0000 } 40% { transform:scale(1.02); box-shadow:0 0 34px #7CFC0059 } 100% { transform:scale(1); box-shadow:0 0 22px #7CFC0026 } }
/* tik-flits op een tegel/lane die net van staat wisselde (één keer) */
.net-gestart
{
	animation:laneKlaarPop .5s ease-out 1;
}
/* goedkope toestellen / voorkeur: band statisch, halo statisch, geen vonken */
@media (prefers-reduced-motion: reduce)
{
	.lane__belt.is-actief .lane__treads,
	.lane__sweep,
	.lane__halo,
	.lane__progress span i,
	.lane__bubbels i,
	.lane__cube,
	.energy_island__scan,
	.lane.is-klaar,
	.net-gestart
	{
		animation:none !important;
	}
	.lane__vonk { display:none; }
	.lane__halo { opacity:.35; }
	.lane__progress span, .lane__vloeistof, .evolve_row__progress span, .energy_island__buffer span { transition:none !important; }
}

/* ── eiland-kaart: bouw in een lane (3 nov 2026) ─────────────────────────── */
.island_build { margin:14px 20px 12px; padding:14px 16px; border-radius:14px; background:#00000059; border:1px solid #ffffff1f; display:flex; flex-direction:column; gap:6px; text-align:left; }
.island_build__kicker { font-family:p, sans-serif; font-size:11px; letter-spacing:1.5px; color:#ffc107; }
.island_build__titel { font-family:headers; font-size:18px; letter-spacing:.5px; color:#fff; }
.island_build__klok { font-family:headers; font-size:30px; line-height:1.1; color:#fff; letter-spacing:1px; }
.island_build.is-klaar .island_build__klok { color:#5ce08a; }
.island_build__progress { height:10px; border-radius:6px; background:#00000099; border:1px solid #ffffff1f; overflow:hidden; }
.island_build__progress span { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, #e09b00, #ffc107); transition:width .5s linear; }
.island_build.is-klaar .island_build__progress span { background:linear-gradient(90deg, #2fa85a, #5ce08a); }
.island_build small { font-family:p, sans-serif; font-size:12px; color:#ffffffb3; line-height:1.35; }
/* FINISH NOW-pil met diamant (CLAUDE.md §6: kosten in de .price_tag-pil) */
.price_tag.diamond::before { content:''; background:url('/public/img/cubelegend/diamonds.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; }