:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #070914; color: #f7f7ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: radial-gradient(circle at 50% 15%, #24204d 0, #0b0d20 35%, #05060d 80%); }
button { font: inherit; }
.shell { width: min(100% - 28px, 680px); margin: auto; padding: 16px 0 12px; }
.hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.eyebrow { margin: 0; color: #65f5e5; font: 700 .68rem/1.5 ui-monospace, monospace; letter-spacing: .22em; }
h1 { margin: 3px 0 2px; font-size: clamp(1.9rem, 6vw, 3rem); line-height: .95; letter-spacing: -.06em; text-transform: uppercase; }
h1 span { color: transparent; -webkit-text-stroke: 1px #bd91ff; text-shadow: 0 0 24px #8d49ff99; }
.hero p:last-child { max-width: 500px; margin: 5px 0 0; color: #aaaac4; font-size: .9rem; }
.help { flex: 0 0 auto; padding: 8px 10px; border: 1px solid #ad78ff; border-radius: 9px; color: #d8c5ff; background: #16132c; font-size: .68rem; font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.help:hover { background: #292049; }
.game { margin-top: 10px; padding: clamp(12px, 3vw, 18px); border: 1px solid #3c3f62; border-radius: 20px; background: #0d1024cc; box-shadow: 0 24px 80px #0009, inset 0 0 50px #6c4aff0c; backdrop-filter: blur(12px); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.stats div { padding: 7px; border: 1px solid #2e3150; border-radius: 10px; background: #090b1a; text-align: center; }
.stats span { display: block; color: #747895; font: 700 .6rem ui-monospace, monospace; letter-spacing: .12em; }
.stats strong { display: block; margin-top: 4px; font-size: clamp(.85rem, 3vw, 1.2rem); }
.progress { height: 4px; margin-bottom: 10px; border-radius: 8px; overflow: hidden; background: #262943; }
.progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #65f5e5, #b16dff); transition: width .25s; box-shadow: 0 0 14px #65f5e5; }
.board { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(7px, 2vw, 13px); aspect-ratio: 1; touch-action: none; user-select: none; }
.node { position: relative; border: 1px solid currentColor; border-radius: 50%; background: #101329; color: #65f5e5; cursor: pointer; transition: transform .12s, box-shadow .12s, opacity .12s; }
.node::before { content: ''; position: absolute; inset: 24%; border-radius: 50%; background: currentColor; box-shadow: 0 0 13px currentColor; }
.node::after { content: ''; position: absolute; inset: 8%; border: 1px solid currentColor; border-radius: 50%; opacity: .28; }
.node.violet { color: #ad78ff; }.node.amber { color: #ffc857; }.node.pink { color: #ff5ca8; }
.node:hover:not(:disabled), .node.selected { transform: scale(1.12); box-shadow: 0 0 22px currentColor; background: currentColor; }
.node.selected::before { background: #fff; }.node:disabled { cursor: default; opacity: .62; }
.status { min-height: 22px; margin: 8px 0 7px; color: #b9bad1; text-align: center; }
.start { width: 100%; padding: 11px; border: 1px solid #65f5e5; border-radius: 10px; color: #07100f; background: #65f5e5; font-weight: 900; letter-spacing: .1em; cursor: pointer; box-shadow: 0 0 24px #65f5e544; }
.start:hover { background: #9cfff4; }
footer { margin-top: 8px; color: #62657f; text-align: center; font-size: .68rem; }
.instructions { width: min(92vw, 480px); padding: 0; border: 1px solid #4b4f75; border-radius: 18px; color: #f7f7ff; background: #0d1024; box-shadow: 0 24px 90px #000; }
.instructions::backdrop { background: #02030bcc; backdrop-filter: blur(5px); }
.instructions-card { position: relative; padding: 24px; }
.instructions h2 { margin: 5px 0 14px; font-size: 1.8rem; text-transform: uppercase; }
.instructions ol { margin: 0 0 20px; padding-left: 22px; color: #c7c8dc; line-height: 1.5; }
.instructions li + li { margin-top: 8px; }
.close-help { position: absolute; top: 10px; right: 12px; border: 0; color: #b9bad1; background: transparent; font-size: 1.8rem; cursor: pointer; }
@media (max-width: 480px) { .shell { width: min(100% - 16px, 680px); padding-top: 8px; }.hero { gap: 8px; }.hero p:last-child { display: none; }.help { margin-top: 1px; padding: 7px 8px; }.game { margin-top: 7px; border-radius: 14px; }.stats { gap: 4px; }.stats div { padding: 5px 2px; }.board { gap: 6px; }.status { font-size: .86rem; } footer { display: none; } }
@media (max-height: 760px) and (min-width: 481px) { .hero p:last-child, footer { display: none; }.shell { padding-top: 8px; }.game { margin-top: 7px; }.board { max-width: 56vh; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }