:root {
	--bg: #0a1525;
	--surface: #13243d;
	--accent: #00bfff;
	--accent-hi: #33ddff;
	--text: #e6f1ff;
	--muted: #8aa3c2;
	--mono: ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; }
body {
	position: relative;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font-family: Inter, system-ui, sans-serif;
	display: grid;
	place-items: center;
	overflow-x: hidden;
	padding: 32px 16px;
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background: radial-gradient(circle at 50% 42%, rgba(0, 191, 255, 0.16), transparent 55%);
	pointer-events: none;
	z-index: 1;
	animation: breathe 6s ease-in-out infinite;
}
main { position: relative; z-index: 2; text-align: center; max-width: 760px; width: 100%; pointer-events: none; }
/* main passes clicks through to the hex field; everything you can click in it opts back in. */
main form, main #turnstile, main .hunt { pointer-events: auto; }
[hidden] { display: none !important; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; font-size: 1.1rem; margin-bottom: 28px; }
.brand img { width: 32px; height: 32px; }

.core { width: min(420px, 86vw); aspect-ratio: 1; margin: 0 auto 32px; position: relative; }
.core svg { width: 100%; height: 100%; overflow: visible; }
.housing { fill: #0b1830; stroke: #1d3657; stroke-width: 6; }
.rim { fill: none; stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 0 8px var(--accent)); opacity: 0.85; }
.orbit { fill: none; stroke: var(--accent-hi); stroke-width: 1; stroke-dasharray: 2 10; opacity: 0.5; transform-origin: 200px 200px; animation: spin 40s linear infinite; }
.lattice { fill: none; stroke: rgba(0, 191, 255, 0.10); stroke-width: 1; }

.rod .shell { fill: #0e1f38; stroke: #24476e; stroke-width: 2; transition: stroke 0.6s, fill 0.6s; }
.rod .fuel { fill: #13314f; transition: fill 0.6s, filter 0.6s; }
.rod .ring { fill: none; stroke: #1d3a5c; stroke-width: 2; transition: stroke 0.6s; }
.rod.on .shell { stroke: var(--accent); fill: #0f2744; }
.rod.on .ring { stroke: rgba(51, 221, 255, 0.6); }
.rod.on .fuel { fill: var(--accent-hi); filter: drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 22px rgba(0, 191, 255, 0.6)); }
.rod.center .glyph { font: 700 26px var(--mono); fill: #4b6a8f; transition: fill 0.4s; }
.rod.center.flicker .shell { stroke: var(--accent); animation: flicker 2.4s steps(1) infinite; }
.rod.center.flicker .glyph { fill: var(--accent-hi); animation: flicker 2.4s steps(1) infinite; }

.wire { stroke: #1d3a5c; stroke-width: 2; transition: stroke 0.6s; }
.wire.on { stroke: rgba(0, 191, 255, 0.55); stroke-dasharray: 4 6; animation: flow 1.2s linear infinite; }

.status { font: 500 0.85rem var(--mono); color: var(--accent-hi); letter-spacing: 0.04em; min-height: 1.4em; margin-bottom: 18px; }
.status .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; box-shadow: 0 0 10px var(--accent); animation: blink 1s steps(1) infinite; }

h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 14px; }
h1 span { color: var(--accent-hi); text-shadow: 0 0 24px rgba(0, 191, 255, 0.5); }
.eyebrow { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 10px; }
p.sub { font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
p.lead { color: var(--muted); font-size: 1.1rem; line-height: 1.6; max-width: 60ch; margin: 0 auto 28px; }

form { display: flex; gap: 8px; max-width: 440px; margin: 0 auto; }
input { flex: 1; min-width: 0; background: var(--surface); border: 1px solid #24476e; color: var(--text); border-radius: 8px; padding: 12px 14px; font: inherit; font-size: 1rem; }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.2); }
button { background: var(--accent); color: var(--bg); border: 0; border-radius: 8px; padding: 12px 18px; font: inherit; font-weight: 700; cursor: pointer; transition: box-shadow 0.2s; white-space: nowrap; }
button:hover { box-shadow: 0 0 12px rgba(0, 191, 255, 0.45), 0 0 32px rgba(0, 191, 255, 0.2); }

/* find-the-five hex field */
#field { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; overflow: hidden; }
.hex {
	position: absolute;
	width: var(--w);
	height: var(--h);
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	background: #10213a;
	transition: background 0.5s, transform 0.5s;
	display: grid;
	place-items: center;
	font: 600 0.62rem var(--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: transparent;
	isolation: isolate;
}
.hex::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: var(--bg); z-index: -1; }
.hex.secret { cursor: pointer; }
.hex.found { background: var(--accent); color: var(--bg); transform: scale(1.04); }
.hex.found::before { background: var(--accent-hi); }

.hunt { margin-top: 28px; }
.slots { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.slot { font: 600 0.64rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 7px; border-radius: 4px; border: 1px dashed #24476e; color: #3d5a7d; min-width: 64px; background: rgba(10, 21, 37, 0.8); transition: all 0.4s; }
.slot.on { border-style: solid; border-color: var(--accent); color: var(--accent-hi); box-shadow: 0 0 10px rgba(0, 191, 255, 0.35); }
.arrow { color: #2a4568; align-self: center; font-size: 0.8rem; }
.hint { font: 0.75rem var(--mono); color: #4b6a8f; margin-top: 10px; }
.reveal { display: none; color: var(--text); font-weight: 600; margin-top: 12px; }
.reveal.show { display: block; animation: rise 0.6s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: 0.6; } }
@keyframes flow { to { stroke-dashoffset: -20; } }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes flicker { 0%, 62%, 70%, 100% { opacity: 1; } 60%, 68% { opacity: 0.25; } }

@media (max-width: 480px) { form { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) {
	*, *::before { animation: none !important; transition: none !important; }
}

.form-msg { min-height: 1.4em; margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
.form-msg.error { color: #f87171; }
.form-msg.ok { color: var(--accent-hi); }
#turnstile { display: flex; justify-content: center; margin-top: 10px; }
#turnstile:empty { display: none; }
button:disabled { opacity: 0.6; cursor: wait; box-shadow: none; }