*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg:        #0a0b0d;
  --ink:       #f2f4f8;
  --ink-quiet: #7c8496;
  --amber:     #f5a524;
  --amber-warm:#f4b860;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  opacity: 0;
  transition: opacity .8s ease;
}
body.ready { opacity: 1; }

/* --------------------------------------------------------------- canvas -- */
#field {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
  touch-action: none; /* taps and drags make ripples, not scroll */
}

/* -------------------------------------------------------------- sr-only -- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ------------------------------------------------------------------ hub -- */
.hub {
  position: fixed; z-index: 3;
  top: max(1.4rem, env(safe-area-inset-top));
  right: max(1.5rem, env(safe-area-inset-right));
  font-size: .68rem;
  letter-spacing: .28em; text-indent: .28em;
  color: var(--ink-quiet);
  text-decoration: none;
  padding: .6em .7em;
  border-radius: 3px;
  /* Stays legible even when a bright logo cell or ring passes behind it. */
  background: rgba(10, 11, 13, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: color .35s ease, background .35s ease;
}
body.ready .hub { animation: fade 1s ease 1.5s both; }
@keyframes fade { to { opacity: 1; } }
.hub span { display: inline-block; transition: transform .35s ease; }
.hub:hover, .hub:focus-visible { color: var(--amber-warm); background: rgba(18,20,25,.72); }
.hub:hover span, .hub:focus-visible span { transform: translateX(3px); }

:focus-visible { outline: 1px solid var(--amber); outline-offset: 4px; }

/* ------------------------------------------------------------- noscript -- */
.noscript {
  position: fixed; inset: 0; z-index: 4;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.6rem;
  background: var(--bg);
}
.noscript-mark {
  margin: 0;
  font-size: clamp(1.6rem, 9vw, 3rem); font-weight: 200;
  letter-spacing: .3em; text-indent: .3em;
  color: var(--ink);
}
.noscript a { font-size: .7rem; letter-spacing: .28em; color: var(--ink-quiet); }

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  body.ready .hub { animation-duration: 1ms; animation-delay: 0ms; }
}