:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #e8e8ee;
  --muted: #8a8a99;
  --accent: #2f8cff;
  --error-bg: rgba(40, 6, 14, 0.94);
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* The game's canvas fills the screen at the game's aspect ratio (black bars on the longer side), centred in a
   fixed box that covers the whole screen. Sizes come from that box (container units), not from vh/dvh, which
   iOS home-screen apps get wrong under the status bar. Touch input maps through the canvas's bounding rect, so
   letterboxing doesn't affect it. */
#screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  container-type: size;
}
#screen canvas {
  display: block;
  aspect-ratio: var(--aspect, 320 / 568);
  width: min(100cqw, calc(100cqh * (var(--aspect, 320 / 568))));
  height: auto;
  touch-action: none;
}

#loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 16px;
}
#loading[hidden] { display: none; }
#loading .bar {
  width: min(240px, 70vw);
  height: 4px;
  border-radius: 2px;
  background: #222;
  overflow: hidden;
}
#loading-fill {
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.2s;
}
#loading.indeterminate #loading-fill {
  width: 30%;
  animation: slide 1.1s ease-in-out infinite;
}
@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}
#loading-text {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

#error {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--error-bg);
}
#error p { margin: 0 0 8px; }
#error-text {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
#error button {
  font: inherit;
  color: var(--fg);
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
}

.noscript { padding: 16px; }

@media (prefers-reduced-motion: reduce) {
  #loading.indeterminate #loading-fill { animation: none; width: 100%; opacity: 0.5; }
}