/* Hydro Wolves web shell — muted chart palette (mirrors ChartPalette: slate, cream, ink, rust). */
:root {
	--hw-slate: #1c242e;
	--hw-slate-deep: #0f141a;
	--hw-cream: #ebdebf;
	--hw-cream-dim: rgba(235, 222, 191, 0.72);
	--hw-ink: #1f2126;
	--hw-rust: #ab592b;
	--hw-line: rgba(235, 222, 191, 0.28);
	color-scheme: dark;
}
html, body { margin: 0; padding: 0; height: 100%; background: var(--hw-slate-deep); color: var(--hw-cream); }
body { font: 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; overflow: hidden; touch-action: none; }
#canvas { display: block; width: 100vw; height: 100vh; outline: none; }
body.hw-loading #canvas { visibility: hidden; }

.hw-shell {
	position: fixed; inset: 0; overflow: auto;
	background: var(--hw-slate-deep) url("/assets/shell-backdrop-960.2b12ff2764.webp") center / cover no-repeat;
	display: flex; align-items: center; justify-content: flex-start;
	padding: 6vh 6vw; box-sizing: border-box;
}
.hw-shell::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,20,26,0.92) 0%, rgba(15,20,26,0.82) 45%, rgba(15,20,26,0.35) 100%); }
.hw-sheet { position: relative; max-width: 34rem; width: 100%; }
.hw-kicker { margin: 0 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hw-cream-dim); }
h1 { margin: 0 0 1rem; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 800; }
.hw-lead { margin: 0 0 1rem; font-size: 1.05rem; }
.hw-how { margin: 0 0 1.4rem; padding-left: 1.2rem; color: var(--hw-cream-dim); }
.hw-how li { margin-bottom: 0.35rem; }
.hw-status { border-top: 1px solid var(--hw-line); padding-top: 1rem; }
.hw-status p { margin: 0 0 0.5rem; }
.hw-status-detail { font-size: 0.85rem; color: var(--hw-cream-dim); }
.hw-progress { display: block; width: 100%; height: 6px; -webkit-appearance: none; appearance: none; border: 0; background: rgba(235,222,191,0.18); }
.hw-progress::-webkit-progress-bar { background: rgba(235,222,191,0.18); }
.hw-progress::-webkit-progress-value { background: var(--hw-rust); }
.hw-progress::-moz-progress-bar { background: var(--hw-rust); }
.hw-error { border: 1px solid var(--hw-rust); background: rgba(171,89,43,0.16); padding: 0.8rem 1rem; margin-top: 1rem; }
.hw-error p { margin: 0 0 0.4rem; }
.hw-noscript { border: 1px solid var(--hw-line); padding: 0.8rem 1rem; margin-top: 1rem; }
.hw-footer { margin-top: 1.4rem; font-size: 0.8rem; color: var(--hw-cream-dim); }
.hw-footer p { margin: 0; }
.hw-about-toggle {
	position: fixed; right: 10px; bottom: 10px; z-index: 5;
	background: rgba(28,36,46,0.86); color: var(--hw-cream); border: 1px solid var(--hw-line);
	font: 12px/1 inherit; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 12px; cursor: pointer;
}
.hw-about-toggle:focus-visible { outline: 2px solid var(--hw-cream); outline-offset: 2px; }
body.hw-running .hw-shell { background-image: none; }
.hw-shell[hidden] { display: none; }
@media (max-width: 600px) {
	.hw-shell { padding: 5vh 6vw; align-items: flex-start; }
	.hw-shell::before { background: rgba(15,20,26,0.88); }
	.hw-how { padding-left: 1rem; font-size: 0.95rem; }
}