:root {
  --night: #140a2e; --dune: #2a1250; --ink: #efe6ff; --dim: #b8a9dc; --cyan: #22e5ff; --magenta: #ff2e88; --amber: #ffb341;
  --sheet: #170b35; --line: rgba(34, 229, 255, 0.22);
  --cut: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --display: "Michroma", "Eurostile", "Square 721", sans-serif;
  --body: "Chakra Petch", system-ui, sans-serif;
  --measure: 68ch;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--night); color: var(--ink); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: #8ff3ff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.2; margin: 0 0 0.7em; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
h3 { font-size: 1rem; color: var(--amber); }
p { margin: 0 0 1em; }
kbd { font: 600 0.85em var(--body); border: 1px solid var(--line); padding: 0.05em 0.45em; background: rgba(34, 229, 255, 0.06); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--amber); color: #1a0830; padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* buttons: the border is drawn by the element, the fill by ::before, so clipped corners keep a clean edge */
.btn { position: relative; display: inline-block; isolation: isolate; padding: 0.6rem 1.2rem; color: var(--ink); text-decoration: none;
  font-weight: 600; background: var(--cyan); clip-path: var(--cut); border: 0; cursor: pointer; }
.btn::before { content: ""; position: absolute; inset: 1px; background: var(--night); clip-path: var(--cut); z-index: -1; transition: background .15s; }
.btn:hover { color: var(--ink); }
.btn:hover::before { background: #20114a; }
.btn.primary { background: var(--amber); color: #1a0830; }
.btn.primary::before { background: var(--amber); }
.btn.primary:hover::before { background: #ffc86e; }
.btn.big { padding: 0.85rem 1.6rem; font-size: 1.05rem; }

/* header */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 24px 14px; background: linear-gradient(rgba(20, 10, 46, 0.85), rgba(20, 10, 46, 0)); }
.brand { font-family: var(--display); letter-spacing: 0.14em; color: var(--ink); text-decoration: none; font-size: 1.05rem; }
.top nav { display: flex; gap: 22px; align-items: center; }
.top nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 600; }
.top nav a:not(.btn):hover { color: var(--cyan); }
@media (max-width: 640px) { .top nav a:not(.btn) { display: none; } }

/* hero: the live 3D world is the one loud thing on the page */
#hero-canvas { position: fixed; inset: 0; width: 100%; height: 100vh; display: block; z-index: 0; }
.hero-fallback { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(#0b0520 0%, #2a0f4a 48%, #ff2e88 60%, #2a0f4a 61%); }
.has-hero-3d .hero-fallback { display: none; }
.hero-fallback .sun { position: absolute; left: 50%; top: 22%; width: min(52vw, 440px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: repeating-linear-gradient(transparent 0 62%, rgba(20, 10, 46, 1) 62% 66%, transparent 66% 72%), linear-gradient(#ffdb4d, #ff2e88 80%);
  -webkit-mask: linear-gradient(#000 55%, transparent 55.1%, transparent 57%, #000 57.1%, #000 64%, transparent 64.1%, transparent 67%, #000 67.1%, #000 73%, transparent 73.1%, transparent 77%, #000 77.1%);
          mask: linear-gradient(#000 55%, transparent 55.1%, transparent 57%, #000 57.1%, #000 64%, transparent 64.1%, transparent 67%, #000 67.1%, #000 73%, transparent 73.1%, transparent 77%, #000 77.1%); }
.hero-fallback .floor { position: absolute; left: -50%; right: -50%; top: 60%; bottom: -40%; transform: perspective(300px) rotateX(62deg); transform-origin: top;
  background: linear-gradient(var(--cyan) 1px, transparent 1px) 0 0 / 60px 60px, linear-gradient(90deg, var(--cyan) 1px, transparent 1px) 0 0 / 60px 60px, #1a0836; }

main { position: relative; z-index: 1; }
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 0 24px max(9vh, 48px); }
.hero-copy { max-width: 1120px; width: 100%; margin: 0 auto; }
.hero h1 { font-size: clamp(2.1rem, 6.2vw, 5rem); letter-spacing: -0.01em; max-width: 14ch; margin-bottom: 0.4em;
  text-shadow: 0 0 28px rgba(20, 10, 46, 0.9), 0 2px 0 rgba(20, 10, 46, 0.6); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 46ch; text-shadow: 0 1px 12px rgba(20, 10, 46, 0.95); }
.hero .lede, .hero .fine { background: rgba(20, 10, 46, 0.45); box-shadow: 0 0 40px 20px rgba(20, 10, 46, 0.45); }
.cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 1.6rem 0 1.2rem; }
.fine { font-size: 0.88rem; color: var(--dim); max-width: 60ch; }
.hero .fine { color: #d6cbf2; }

/* everything below the hero sits on a solid sheet that scrolls up over the world */
.sheet { background: var(--sheet); border-top: 1px solid var(--line); box-shadow: 0 -40px 80px rgba(20, 10, 46, 0.9); padding-bottom: 40px; }
section.wrap { padding-top: 88px; }

.live { background: linear-gradient(90deg, rgba(255, 179, 65, 0.1), transparent 60%); border-bottom: 1px solid var(--line); padding: 28px 0; }
.live h2 { font-size: 1rem; color: var(--amber); margin-bottom: 0.4em; }
.livebar { margin: 0; font-size: 1.05rem; }
.livebar .num { font-family: var(--display); color: var(--ink); }
.livebar .net { color: var(--dim); font-size: 0.92rem; display: block; margin-top: 4px; }
.hunts h3 { margin: 18px 0 8px; font-size: 0.9rem; }
.hunts ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hunts li { border-left: 2px solid var(--magenta); padding: 6px 12px; display: grid; }
.hunts li span { color: var(--dim); font-size: 0.9rem; }
.hunts li em { font-style: normal; color: var(--amber); font-size: 0.85rem; }

.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 820px) { .tracks { grid-template-columns: 1fr; gap: 32px; } }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 22px 56px; max-width: 52ch; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; display: grid; place-items: center;
  font-family: var(--display); font-size: 0.9rem; color: var(--night); background: var(--cyan); clip-path: var(--cut); }
.track#host .steps li::before { background: var(--magenta); color: var(--ink); }
.steps li::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps strong { display: block; color: var(--ink); }
.note { margin-top: 18px; color: var(--dim); max-width: var(--measure); }

.custody { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.custody h2 { grid-column: 1 / -1; margin-bottom: 0; }
.prose p { max-width: var(--measure); }
.facts { margin: 0; border: 1px solid var(--line); clip-path: var(--cut); padding: 8px 22px; background: rgba(34, 229, 255, 0.04); }
.facts > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--cyan); font-weight: 700; }
.facts dd { margin: 2px 0 0; color: var(--dim); }
@media (max-width: 820px) { .custody { grid-template-columns: 1fr; gap: 28px; } }

.controls table { border-collapse: collapse; width: 100%; max-width: 760px; }
.controls th, .controls td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.controls th { font-weight: 600; width: 34%; padding-right: 20px; white-space: nowrap; }
.controls td { color: var(--dim); }

.faq details { border-bottom: 1px solid var(--line); max-width: 820px; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cyan); font-family: var(--display); }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--dim); max-width: var(--measure); }

.closer { text-align: center; padding-bottom: 40px; }
.closer h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
.foot { padding-top: 64px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; border-top: 1px solid var(--line); margin-top: 48px; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot .fine { flex-basis: 100%; }

/* long-form pages (help, legal) */
.page { position: relative; z-index: 1; background: var(--sheet); min-height: 100vh; padding: 110px 0 60px; }
.page .wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
.page aside nav { position: sticky; top: 90px; display: grid; gap: 6px; font-size: 0.95rem; }
.page aside a { color: var(--dim); text-decoration: none; }
.page aside a:hover { color: var(--cyan); }
.page article { max-width: 760px; }
.page article h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page article h2 { margin-top: 2.2em; font-size: 1.3rem; scroll-margin-top: 90px; }
.page article h3 { margin-top: 1.6em; }
.page article li { margin-bottom: 0.5em; }
.page article table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; }
.page article th, .page article td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.callout { border-left: 3px solid var(--amber); background: rgba(255, 179, 65, 0.08); padding: 14px 18px; margin: 0 0 1.2em; }
.callout.warn { border-color: var(--magenta); background: rgba(255, 46, 136, 0.08); }
.page .top { background: rgba(20, 10, 46, 0.95); border-bottom: 1px solid var(--line); }
@media (max-width: 820px) { .page .wrap { grid-template-columns: 1fr; } .page aside { display: none; } }