/* ============================================================================
   Guardiões da Via Láctea — estilos da casca da aplicação
   O jogo é desenhado inteiramente em Canvas; o CSS apenas garante que a tela
   ocupe toda a viewport, sem barras de rolagem, seleção de texto ou zoom.
   ========================================================================== */

:root {
  --brand: #38e1ff;
  --bg: #05070f;
  --font-display: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  color: #dbe7ff;
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #0b1430 0%, #05070f 60%, #010206 100%);
}

/* Conteúdo semântico inicial para buscadores e leitores de tela; o jogo continua fullscreen. */
.seo-content {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

canvas#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;              /* impede scroll/zoom durante o toque */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  image-rendering: auto;
  cursor: crosshair;
}

/* --------------------------------------------------------------------------
   Overlay de boot: cobre o canvas até o jogo assumir o controle.
   Também é reutilizado para exibir erros fatais de inicialização.
   -------------------------------------------------------------------------- */
.boot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(100% 80% at 50% 45%, rgba(20, 40, 90, 0.85) 0%, rgba(5, 7, 15, 0.98) 70%);
  transition: opacity 420ms ease;
  z-index: 10;
}

.boot.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.boot__wordmark {
  font-size: clamp(18px, 4.4vw, 42px);
  letter-spacing: 0.28em;
  font-weight: 700;
  color: #eaf6ff;
  text-shadow: 0 0 24px rgba(56, 225, 255, 0.55), 0 0 60px rgba(56, 225, 255, 0.25);
  max-width: 22ch;
  line-height: 1.25;
}

.boot__status {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.6vw, 15px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7fb6d8;
}

.boot__error {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #ff9aa2;
  max-width: 60ch;
  line-height: 1.6;
}