/* The page is only a frame for the canvas; the game draws everything, themed, inside it.
   The loader text is English-only: the portal is a development tool, not the shipped game. */
:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  /* Set by host.js from the visual viewport; see fitPage. */
  height: var(--visible-height, 100dvh);
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  background: Canvas;
}

main { width: 100%; height: 100%; position: relative; }

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

canvas:focus, canvas:focus-visible { outline: none; }

#status {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
  background: Canvas;
  color: CanvasText;
}
#status[hidden] { display: none; }
#status-detail { white-space: pre-wrap; font-size: 12px; opacity: 0.7; max-width: 32em; }
#retry { justify-self: center; font: inherit; padding: 8px 16px; }
@media (prefers-reduced-motion: no-preference) {
  #status:not(.failed) #status-message { animation: pulse 1.2s ease-in-out infinite alternate; }
}
@keyframes pulse { from { opacity: 1; } to { opacity: 0.4; } }