/* Deep-navy tactical starmap background (style_spec §3.1 `space`).
 * External, not inline, so the served app can enforce a strict CSP
 * (style-src 'self') without weakening it. */
:root {
  /* The viewport meta sets `viewport-fit=cover`, so the canvas paints under
   * the notch, the status bar and the home indicator. CSS is the only thing
   * that can evaluate `env()`, so copy the four insets onto custom properties
   * for `ui/safeArea.ts` to read back (ROADMAP Phase 137). */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0b0e1b;
  overflow: hidden;
}
#game-container {
  width: 100%;
  height: 100%;
  /* The game owns all touch gestures (pan / tap / pinch); never let the
   * mobile browser scroll, zoom or cancel them (P-020 touch fix — without
   * this, Safari/Chrome intercept touch and Phaser never sees the taps). */
  touch-action: none;
}
canvas {
  display: block;
  touch-action: none;
}
#game-information { position: fixed; inset: 0; z-index: 20; box-sizing: border-box; overflow: auto; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: #0b0e1b; color: #e1edf2; font: 16px/1.6 system-ui, sans-serif; touch-action: auto; }
#game-information > * { max-width: 680px; margin-inline: auto; }
#game-information h1 { font-size: clamp(32px, 6vw, 60px); }
#game-information a { display: block; color: #52e7ff; }
#game-information[hidden] { display: none; }
#game-information { text-align: center; }
#game-information h1 { margin-block: clamp(16px, 7vh, 64px) 24px; letter-spacing: -.04em; }
#game-information details { margin-top: 32px; text-align: left; }
#game-information summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: center; color: #a7b8c9; }
#game-information a { min-height: 44px; display: inline-flex; align-items: center; }
#game-information a:focus-visible, #game-information summary:focus-visible { outline: 2px solid #52e7ff; outline-offset: 4px; }
#game-information .loading-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
#game-information [data-loading-status] { margin-block: 24px 8px; }
.loading-orbit { position: relative; width: 88px; height: 88px; border: 1px solid #347b8d; border-radius: 50%; animation: orbit-loading 3s linear infinite; }
.loading-orbit::before { content: ""; position: absolute; width: 34px; height: 34px; inset: 26px; border-radius: 50%; background: #123744; border: 1px solid #52e7ff; box-shadow: 0 0 24px #52e7ff26; }
.loading-orbit span { position: absolute; left: 36px; top: -4px; width: 14px; height: 7px; background: #52e7ff; clip-path: polygon(0 0,100% 50%,0 100%,25% 50%); }
#game-information[data-loading="failed"] .loading-orbit { animation: none; opacity: .5; }
@keyframes orbit-loading { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce), (scripting: none) { .loading-orbit { animation: none; } }
@media (max-height: 450px) { #game-information h1 { font-size: 32px; margin-block: 0 12px; } .loading-orbit { width: 48px; height: 48px; } .loading-orbit::before { width: 20px; height: 20px; inset: 13px; } .loading-orbit span { left: 17px; } #game-information [data-loading-status] { margin-top: 12px; } #game-information details { margin-top: 12px; } }