body {
	margin: 0;
	height: 100vh;
	background: #1e3a5c;
	display: flex;
	align-items: center;
	justify-content: center;
}
#wall {
	width: min(92vw, 920px);
	height: calc(min(92vw, 920px) * 0.65);
	background: radial-gradient(180px 140px at 50% 40%, rgba(255,255,255,0.6), rgba(255,255,255,0) 60%), linear-gradient(180deg, #4fc3f7 0%, #1565c0 100%);
	border-radius: 16px;
	box-shadow: 0 0 40px #90caf9, inset 0 0 60px rgba(255,255,255,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 2rem;
	cursor: pointer;
	transition: box-shadow 0.3s;
	position: relative;
	user-select: none;
}
.reduce-motion * { transition: none !important; animation: none !important; }
.wall-label { pointer-events: none; position: relative; z-index: 1; text-shadow: 0 2px 8px rgba(0,0,0,0.35); }

/* Click hint */
#hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 1rem; color: #e2f9ff; letter-spacing: 0.04em; opacity: 0.85; background: rgba(0, 234, 255, 0.08); border: 1px solid rgba(0,234,255,0.25); padding: 6px 10px; border-radius: 8px; text-shadow: 0 0 8px rgba(0,234,255,0.5); box-shadow: 0 0 12px rgba(0,234,255,0.15) inset; animation: hint-pulse 1.8s ease-in-out infinite; z-index: 2; }
@keyframes hint-pulse { 0%,100% { opacity: 0.5; transform: translateX(-50%) scale(0.98); } 50% { opacity: 1; transform: translateX(-50%) scale(1.02); } }
.wall-label { pointer-events: none; position: relative; z-index: 1; text-shadow: 0 2px 8px rgba(0,0,0,0.35); }
/* Hide lighter by default */
#lighter {
	width: 48px;
	height: 80px;
	position: fixed;
	left: 50%;
	top: 80%;
	transform: translate(-50%, -50%);
	z-index: 10;
	display: none;
	align-items: flex-end;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.5s, top 0.5s, left 0.5s;
	opacity: 0;
	background: none;
	border-radius: 0;
}
#lighter.visible {
	display: flex;
	opacity: 1;
	animation: lighter-pop 0.6s cubic-bezier(.68,-0.55,.27,1.55);
}

#lighter img {
	width: 48px;
	height: 80px;
	display: block;
	background: none;
}
@keyframes lighter-pop {
	0% { transform: scale(0.2) translate(-50%, -50%); opacity: 0; }
	60% { transform: scale(1.2) translate(-50%, -50%); opacity: 1; }
	100% { transform: scale(1) translate(-50%, -50%); opacity: 1; }
}
#lighter.flame::after {
	content: '';
	display: block;
	width: 16px;
	height: 32px;
	background: radial-gradient(circle at 50% 60%, #ffeb3b 40%, #ff9800 80%, transparent 100%);
	position: absolute;
	left: 50%;
	top: -28px;
	transform: translateX(-50%);
	border-radius: 50% 50% 40% 40%;
	animation: flame-flicker 0.7s infinite alternate;
}
@keyframes flame-flicker {
	0% { opacity: 0.8; }
	100% { opacity: 1; filter: blur(2px); }
}
#cooling {
	display: none;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(180deg, rgba(6, 24, 40, 0.96), rgba(9, 34, 53, 0.96));
	color: #00eaff;
	font-size: 1.5rem;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	flex-direction: column;
	padding: 16px;
	overflow: hidden;
}
#wall.revealed {
	box-shadow: 0 0 80px #00eaff, inset 0 0 120px rgba(0,234,255,0.25);
}
#cooling.revealed {
	display: flex;
}

.cooling-header {
	font-size: 1.1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a9f6ff;
	opacity: 0.9;
	margin-bottom: 8px;
	text-shadow: 0 0 8px rgba(0,234,255,0.5);
}

.system-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1fr 1fr auto; gap: 14px; width: 100%; height: 100%; padding: 10px 16px 16px; box-sizing: border-box; }

/* Radiator with spinning fan */
.radiator {
	background: linear-gradient(180deg, #0c2a3e, #0b2434);
	border-radius: 12px;
	position: relative;
	box-shadow: inset 0 0 0 2px rgba(0,234,255,0.15), inset 0 0 20px rgba(0,234,255,0.08);
	overflow: hidden;
}
.radiator { grid-column: 1 / 2; grid-row: 1 / 3; }
.radiator .fins {
	position: absolute; inset: 10px; 
	background: repeating-linear-gradient(90deg, rgba(0,234,255,0.15) 0 3px, rgba(0,234,255,0.03) 3px 7px);
	filter: drop-shadow(0 0 6px rgba(0,234,255,0.2));
}
.fan { position: absolute; width: 90px; height: 90px; right: 14px; bottom: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #061b29, #0a2a3f); box-shadow: inset 0 0 0 2px rgba(0,234,255,0.2); overflow: hidden; transition: transform 0.2s ease; }
.fan .blades { position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(0,234,255,0.2), rgba(0,234,255,0) 20% 40%, rgba(0,234,255,0.2) 60% 80%, rgba(0,234,255,0)); animation: spin 2.3s linear infinite; filter: blur(0.6px); }
/* Fan boost state */
.fan.boost .blades { animation-duration: 1.1s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Pipes with flowing coolant */
.pipes { position: relative; background: linear-gradient(180deg,#0b2434,#0d2e44); border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(0,234,255,0.15); overflow: hidden; }
.pipes.cover { grid-column: 1 / 4; grid-row: 1 / 3; }
.pipe { position: absolute; background: #0e2f47; box-shadow: inset 0 0 0 2px rgba(0,234,255,0.25), 0 0 10px rgba(0,234,255,0.08); }
.pipe.vertical { width: 18px; top: 14px; bottom: 14px; }
.pipe.horizontal { height: 18px; left: 14px; right: 14px; }
.pipe.left { left: 22px; }
.pipe.right { right: 22px; }
.pipe.top { top: 22px; }
.pipe.bottom { bottom: 22px; }
.pipe.center { left: calc(50% - 9px); }
.pipe.horizontal.mid { top: 50%; transform: translateY(-50%); }
.pipe.horizontal.mid2 { top: calc(50% + 44px); }
.pipe .coolant { position: absolute; inset: 2px; border-radius: 8px; filter: drop-shadow(0 0 10px rgba(0,234,255,0.95)); opacity: 0.98; background:
	repeating-linear-gradient(180deg, rgba(255,255,255,0.95) 0 6px, rgba(255,255,255,0.25) 6px 12px),
	linear-gradient(180deg, #00eaff, #66fff6);
}
.pipe .coolant::after { content: ""; position: absolute; inset: 0; border-radius: inherit; mask: repeating-conic-gradient(#000 0 4deg, transparent 4deg 12deg); background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.85) 0 20%, rgba(255,255,255,0) 22%); mix-blend-mode: screen; opacity: 0.55; animation: arrows 0.9s linear infinite; }
.pipe.horizontal .coolant::after { transform: rotate(90deg); }
@keyframes arrows { from { background-position: 0 0; } to { background-position: 48px 0; } }
/* Frost burst visuals */
body.frost #wall { box-shadow: 0 0 110px #aaf6ff, inset 0 0 160px rgba(0,234,255,0.35); }
body.frost #cooling { background: linear-gradient(180deg, rgba(5, 20, 32, 0.98), rgba(7, 30, 48, 0.98)); }
body.frost .display .toggle.on { background: rgba(180, 245, 255, 0.2); }
body.frost .pipe .coolant { filter: drop-shadow(0 0 14px rgba(190,255,255,1)); }

/* Dye themes */
body.dye-cyber .pipe .coolant { background:
	repeating-linear-gradient(180deg, rgba(255, 170, 255,0.95) 0 6px, rgba(255, 170, 255,0.2) 6px 12px),
	linear-gradient(180deg, #ff66ff, #ff99cc);
	filter: drop-shadow(0 0 12px rgba(255, 64, 255, 0.9));
}
body.dye-cyber .pipe .coolant.return { background: linear-gradient(180deg, #ff99cc, #ff66ff); opacity: 0.85; }

/* Reservoir ripple */
.reservoir .glass { position: relative; overflow: hidden; }
.reservoir .glass .ripple { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; pointer-events: none; border-radius: 50%; border: 2px solid rgba(229,255,255,0.9); transform: translate(-50%,-50%) scale(1); opacity: 0.75; animation: ripple 900ms ease-out forwards; filter: drop-shadow(0 0 8px rgba(229,255,255,0.7)); }
@keyframes ripple { 0% { transform: translate(-50%,-50%) scale(1); opacity: 0.85; } 100% { transform: translate(-50%,-50%) scale(8); opacity: 0; } }
.pipe.vertical .coolant { animation: flow-vertical 1.8s linear infinite; background-size: 100% 36px, 100% 100%; }
.pipe.horizontal .coolant { animation: flow-horizontal 1.8s linear infinite; background-size: 36px 100%, 100% 100%; }
.pipe .coolant.return { background: linear-gradient(180deg, #2dd4ff, #00bcd4); opacity: 0.7; }
@keyframes flow-vertical { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 36px, 0 0; } }
@keyframes flow-horizontal { 0% { background-position: 0 0, 0 0; } 100% { background-position: 36px 0, 0 0; } }

/* Pump/flow states */
.pipes.cover.boost .coolant { animation-duration: 1s; }
.pipes.cover.reverse .coolant { animation-direction: reverse; }
.pump.boost .impeller { animation-duration: 0.7s; }

/* Pump with LED */
.pump { position: relative; background: linear-gradient(180deg,#0a2c42,#0d3752); border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(0,234,255,0.15); grid-column: 2 / 3; grid-row: 1 / 2; }
.pump::before { content: ''; position: absolute; inset: 10px; border-radius: 10px; background: radial-gradient(circle at 40% 40%, rgba(0,234,255,0.2), rgba(0,234,255,0) 60%); }
.impeller { position: absolute; width: 60px; height: 60px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: conic-gradient(from 0deg, rgba(0,234,255,0.25), rgba(0,234,255,0) 30% 60%, rgba(0,234,255,0.25)); animation: spin 1.4s linear infinite; }
.pump .led { position: absolute; width: 10px; height: 10px; right: 10px; top: 10px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.pump .led.on { color: #1df2ff; background: currentColor; }
.pump .led.warn { color: #ffb74d; background: currentColor; }

/* Gauge */
.gauge { position: relative; background: linear-gradient(180deg,#0b2434,#0d2e44); border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(0,234,255,0.15); }
.gauge.psi { grid-column: 2 / 3; grid-row: 2 / 3; }
.gauge.temp { grid-column: 3 / 4; grid-row: 2 / 3; }
.gauge .ticks { position: absolute; inset: 16px; border-radius: 50%; background: conic-gradient(rgba(0,234,255,0.2) 0 5deg, transparent 5deg 10deg); mask: radial-gradient(circle at 50% 50%, transparent 52%, #000 53%); }
.gauge .needle { position: absolute; left: 50%; bottom: 16px; width: 2px; height: 52%; background: #ff7043; transform-origin: bottom center; transform: rotate(-40deg); box-shadow: 0 0 8px rgba(255,112,67,0.6); }

/* Display toggle polish */
.display .toggle { transition: filter 0.15s ease, background 0.2s ease; }
.display .toggle:active { filter: brightness(1.2); }

/* Display */
.display { grid-column: 1 / 4; grid-row: 3 / 4; background: #071a28; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(0,234,255,0.15), inset 0 0 20px rgba(0,234,255,0.08); padding: 10px 12px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.display .row { display: flex; align-items: baseline; justify-content: space-between; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1rem; color: #a9f6ff; text-shadow: 0 0 6px rgba(0,234,255,0.5); }
.display .row.small { font-size: 0.85rem; opacity: 0.85; }
.display .label { opacity: 0.7; margin-right: 8px; }
.display .toggle { font: inherit; border: 1px solid rgba(0,234,255,0.3); background: rgba(0,234,255,0.08); color: #a9f6ff; padding: 2px 10px; border-radius: 6px; cursor: pointer; box-shadow: 0 0 8px rgba(0,234,255,0.2) inset; }
.display .toggle.on { background: rgba(29, 242, 255, 0.15); color: #e9feff; }

/* Steam overlay */
#steamOverlay { position: absolute; inset: -20px; pointer-events: none; background: radial-gradient(200px 140px at 50% 110%, rgba(255,255,255,0.08), rgba(255,255,255,0) 70%); mix-blend-mode: screen; opacity: 0; transition: opacity 0.8s ease; z-index: 0; }
#cooling.revealed #steamOverlay { opacity: 1; }

/* Connected Scenes navigation */
.connected-scenes { display: none; width: 100%; box-sizing: border-box; padding: 8px 16px 16px; gap: 12px; }
#cooling.revealed + .connected-scenes, #cooling .connected-scenes { display: none; }
#cooling.revealed .connected-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
.connected-scenes .scene { display: flex; flex-direction: column; gap: 6px; text-decoration: none; background: #071a28; border-radius: 10px; padding: 12px; border: 1px solid rgba(0,234,255,0.25); box-shadow: inset 0 0 0 2px rgba(0,234,255,0.08), 0 6px 22px rgba(0,0,0,0.25); transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease; color: #c8f8ff; outline: none; }
.connected-scenes .scene:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px rgba(0,234,255,0.12), 0 10px 28px rgba(0,0,0,0.35); background: #082032; }
.connected-scenes .scene:focus-visible { box-shadow: 0 0 0 3px rgba(0,234,255,0.45), 0 0 0 6px rgba(0,234,255,0.15); }
.connected-scenes .scene-title { font-size: 0.95rem; color: #e9feff; letter-spacing: 0.02em; text-shadow: 0 0 6px rgba(0,234,255,0.35); }
.connected-scenes .scene-desc { font-size: 0.8rem; opacity: 0.9; color: #a9f6ff; }

/* Heat spot follows lighter */
#heatSpot { position: absolute; width: 180px; height: 180px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at center, rgba(255,120,0,0.45), rgba(255,0,0,0.25) 35%, rgba(255,255,255,0) 70%); filter: blur(8px); opacity: 0; transition: opacity 0.2s ease-out; transform: translate(-50%, -50%); z-index: 0; }
#wall.heating #heatSpot { opacity: 0.9; }

/* Reservoir */
.reservoir { position: relative; background: linear-gradient(180deg,#0b2434,#0d2e44); border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(0,234,255,0.15); grid-column: 3 / 4; grid-row: 1 / 2; display: grid; place-items: center; }
.reservoir .glass { position: relative; width: 80%; height: 70%; border-radius: 10px; background: linear-gradient(180deg, rgba(173, 255, 255, 0.12), rgba(173,255,255,0.02)); box-shadow: inset 0 0 0 2px rgba(0,234,255,0.25), inset 0 0 30px rgba(0,234,255,0.1); overflow: hidden; }
.reservoir .fluid { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(180deg,#39e0ff,#00ccff); filter: drop-shadow(0 0 6px rgba(0,234,255,0.8)); }
.reservoir .fluid::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px; background: radial-gradient(100% 60% at 50% 100%, rgba(255,255,255,0.45), rgba(255,255,255,0) 70%); opacity: 0.6; animation: wave 2.4s ease-in-out infinite; }
.reservoir .fluid::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 18px; background: radial-gradient(100% 60% at 50% 100%, rgba(255,255,255,0.25), rgba(255,255,255,0) 70%); opacity: 0.5; animation: wave 3.1s ease-in-out infinite reverse; }
@keyframes wave { 0%,100% { transform: translateY(2px); } 50% { transform: translateY(-2px); } }
.reservoir .bubbles { position: absolute; left: 0; right: 0; bottom: 0; top: 0; overflow: hidden; }
.reservoir .bubbles span { position: absolute; bottom: -12px; width: 10px; height: 10px; background: radial-gradient(circle, #e5ffff, rgba(255,255,255,0.0)); border-radius: 50%; opacity: 0.95; box-shadow: 0 0 12px rgba(229,255,255,0.9); animation: bubble 3.2s linear infinite; }
.reservoir .bubbles span:nth-child(2){ left: 20%; animation-duration: 3.2s; width: 6px; height: 6px; }
.reservoir .bubbles span:nth-child(3){ left: 35%; animation-duration: 3.6s; }
.reservoir .bubbles span:nth-child(4){ left: 50%; animation-duration: 3.0s; width: 7px; height: 7px; }
.reservoir .bubbles span:nth-child(5){ left: 65%; animation-duration: 4.2s; }
.reservoir .bubbles span:nth-child(6){ left: 80%; animation-duration: 3.4s; width: 5px; height: 5px; }
@keyframes bubble { 0% { transform: translateY(0) translateX(0) scale(0.9); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-150%) translateX(-10px) scale(1); opacity: 0; } }

/* Valve */
.valve { position: relative; background: linear-gradient(180deg,#0b2434,#0d2e44); border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(0,234,255,0.15); grid-column: 2 / 3; grid-row: 2 / 3; cursor: pointer; }
.valve:hover, .fan:hover, .display .toggle:hover { filter: brightness(1.05); }

/* Reservoir slosh effect */
.reservoir .glass.slosh { animation: slosh 0.6s ease; }
@keyframes slosh { 0% { transform: rotate(0deg) translateX(0); } 25% { transform: rotate(0.6deg) translateX(1px); } 50% { transform: rotate(-0.6deg) translateX(-1px); } 100% { transform: rotate(0deg) translateX(0); } }
.valve .handle { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%,-50%); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0,234,255,0.2), 0 0 0 4px rgba(0,234,255,0.05); background: conic-gradient(from 0deg, rgba(0,234,255,0.25), rgba(0,234,255,0) 25% 50%, rgba(0,234,255,0.25) 75%); animation: spin 6s linear infinite; }
.valve.closed .handle { animation-duration: 12s; filter: saturate(0.7); }
.valve .led { position: absolute; width: 8px; height: 8px; right: 10px; top: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.valve .led.on { color: #1df2ff; background: currentColor; }
.valve.closed .led.on { color: #ffb74d; }