/* ==========================================================================
   WDlab — pixel wall
   The band between the page's closing CTA and the footer. Idle it reads
   as a piece of type; pressing Play turns it into a board in place.
   Uses the theme's existing tokens, so light/dark needs no extra rules.
   ========================================================================== */

.pixel-wall{
	border-top:1px solid var(--line);
	background:var(--bg);
	padding:58px 0 48px;
	overflow:hidden;
}
.pixel-wall .pw-inner{
	max-width:var(--content-max);
	margin:0 auto;
	padding:0 var(--pad-inline);
	position:relative;
}

#pixelWallCanvas{
	display:block;
	width:100%;
	/* height is set from JS — it grows when the board opens */
	transition:height .35s cubic-bezier(.16,1,.3,1);
	touch-action:auto;
}
.pixel-wall[data-state="playing"] #pixelWallCanvas{
	touch-action:none;
	cursor:none;
}

/* --- scoreboard -------------------------------------------------------- */
.pw-hud{
	display:flex;
	gap:22px;
	margin-bottom:16px;
	font-family:var(--font-mono);
	font-size:11px;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--text-dim);
	opacity:0;
	transform:translateY(4px);
	transition:opacity .3s,transform .3s;
	pointer-events:none;
}
.pixel-wall[data-state="playing"] .pw-hud,
.pixel-wall[data-state="over"] .pw-hud{
	opacity:1;
	transform:none;
}
.pw-hud b{color:var(--mint);font-weight:700;}

/* --- play / close ------------------------------------------------------ */
.pw-controls{
	margin-top:26px;
	display:flex;
	align-items:center;
	gap:18px;
	flex-wrap:wrap;
}
.pw-btn{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:11px 24px;
	border:1px solid var(--line);
	border-radius:999px;
	background:transparent;
	color:var(--text-dim);
	font-family:var(--font-mono);
	font-size:11px;
	letter-spacing:.18em;
	text-transform:uppercase;
	cursor:pointer;
	transition:border-color .25s,color .25s;
}
.pw-btn:hover,
.pw-btn:focus-visible{border-color:var(--mint);color:var(--mint);}

/* triangle idle, square once it is running */
.pw-icon{
	width:0;height:0;
	border-left:7px solid currentColor;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	transition:border-color .2s;
}
.pixel-wall[data-state="playing"] .pw-icon{
	width:8px;height:8px;
	border:0;
	background:currentColor;
}

.pw-msg{
	font-family:var(--font-mono);
	font-size:10.5px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--text-dim);
	opacity:.75;
}

@media(max-width:700px){
	.pixel-wall{padding:44px 0 38px;}
	.pw-controls{margin-top:20px;gap:12px;}
	.pw-msg{width:100%;}
}

/* A wall that cannot animate is still a nice piece of type — leave it. */
@media(prefers-reduced-motion:reduce){
	#pixelWallCanvas{transition:none;}
}