* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { width: 100%; height: 100%; overflow: hidden; }

body {
  background: radial-gradient(circle at 50% 28%, #20335c 0%, #0b1430 62%, #04070f 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

canvas { display: block; }

#info {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  color: #eaf0ff; text-align: center; z-index: 10; pointer-events: none;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
#info h1 {
  font-size: 22px; font-weight: 800; letter-spacing: .4px;
}
#info p { font-size: 13px; opacity: .6; margin-top: 4px; letter-spacing: .5px; }

#hint {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #aebbda; font-size: 12px; opacity: .75; z-index: 10; pointer-events: none;
  white-space: nowrap;
}

#loader {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; color: #cdd8f5; font-size: 14px;
  background: radial-gradient(circle at 50% 40%, #142243 0%, #06090f 100%);
  transition: opacity .6s ease;
}
#loader.hidden { opacity: 0; pointer-events: none; }
.spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: #ffd34d;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }