:root {
  color-scheme: dark;
  --bg: #05070d;
  --ink-2: #a7aebb;
  --accent-strong: #5eead4;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: #eef1f5;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/*
 * Aurora backdrop, same as the dashboard's AuroraBackground: glows that drift,
 * lean away from the pointer and light a soft spotlight under it.
 * --aurora-x/y are the pointer position (0-1), set by aurora.js.
 */
.aurora {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  --aurora-x: 0.5;
  --aurora-y: 0.3;
  transition: --aurora-x 900ms ease-out, --aurora-y 900ms ease-out;
}
.aurora-glows {
  position: absolute; inset: -6vmax;
  transform: translate(calc((var(--aurora-x) - 0.5) * -48px), calc((var(--aurora-y) - 0.5) * -48px));
}
.aurora-blob {
  position: absolute; border-radius: 9999px; will-change: transform;
  animation: aurora-drift 30s ease-in-out infinite alternate;
}
.aurora-blob-1 {
  top: -12vmax; left: -6vmax; width: 62vmax; height: 48vmax;
  background: radial-gradient(closest-side, rgb(16 185 129 / 0.32), transparent);
}
.aurora-blob-2 {
  top: -10vmax; right: -10vmax; width: 52vmax; height: 46vmax;
  background: radial-gradient(closest-side, rgb(139 92 246 / 0.3), transparent);
  animation-duration: 38s; animation-direction: alternate-reverse;
}
.aurora-blob-3 {
  bottom: -18vmax; left: 30vmax; width: 50vmax; height: 42vmax;
  background: radial-gradient(closest-side, rgb(14 165 233 / 0.2), transparent);
  animation-duration: 46s;
}
.aurora-spotlight {
  position: absolute; inset: 0;
  background: radial-gradient(
    560px circle at calc(var(--aurora-x) * 100%) calc(var(--aurora-y) * 100%),
    rgb(52 211 153 / 0.13),
    transparent 70%
  );
}

@property --aurora-x { syntax: "<number>"; inherits: true; initial-value: 0.5; }
@property --aurora-y { syntax: "<number>"; inherits: true; initial-value: 0.3; }

@keyframes aurora-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vmax, 4vmax) scale(1.12); }
  100% { transform: translate(-4vmax, 7vmax) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none; }
}

.center { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; }

h1 {
  margin: 0;
  padding: 0 0.08em; /* keeps the clipped gradient from cutting off the last glyph */
  font-size: clamp(88px, 20vw, 220px); line-height: 1; font-weight: 700; letter-spacing: -0.05em;
  background: linear-gradient(120deg, #ffffff 20%, var(--accent-strong) 60%, #a78bfa 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.home { color: var(--ink-2); text-decoration: none; font-size: 18px; }
.home:hover { color: #fff; }

/* Mirrors the profile chip in the dashboard's top bar. */
.login {
  position: fixed; top: 16px; right: 16px;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 10px;
  border: 1px solid rgb(255 255 255 / 0.08);
  background: rgb(17 20 28 / 0.6); backdrop-filter: blur(12px);
  color: #eef1f5; text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.login:hover { border-color: rgb(52 211 153 / 0.4); background: rgb(17 20 28 / 0.8); }
.login:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.login-avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 16px rgb(52 211 153 / 0.35);
}
.login-avatar svg { width: 16px; height: 16px; fill: none; stroke: #04140d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.login-text { display: flex; flex-direction: column; line-height: 1.15; }
.login-title { font-size: 14px; font-weight: 600; }
.login-sub { font-size: 12px; color: var(--ink-2); }

/* Game link: same chip, top left. */
.play-link { right: auto; left: 16px; }
.play-link .login-avatar svg { fill: #04140d; stroke: none; }