/*
 * Only what the browser needs before Compose takes over: a full-bleed canvas and a splash
 * screen that paints in the first frame, long before the WebAssembly has downloaded.
 */
:root {
  --bg: #fbfcfd;
  --fg: #0f1b22;
  --muted: #5d6870;
  --track: #e2e8ec;
  --petrol: #143d51;
  --green: #3dbe7e;
  color-scheme: light dark;
}

/* Dark: by system setting unless the visitor chose light, or always when they chose dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b141a;
    --fg: #e3e9ed;
    --muted: #a9bcc8;
    --track: #1b2830;
    --petrol: #ddeaf0;
  }
}

:root[data-theme="dark"] {
  --bg: #0b141a;
  --fg: #e3e9ed;
  --muted: #a9bcc8;
  --track: #1b2830;
  --petrol: #ddeaf0;
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
}

/* Compose clears and fills this container; the splash is a sibling so it survives. */
#app {
  position: fixed;
  inset: 0;
}

canvas {
  display: block;
  outline: none;
}

#splash {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
  transition: opacity 360ms ease-out, visibility 360ms;
}

#splash.done {
  opacity: 0;
  visibility: hidden;
}

/* The logo, tinted through a mask so it follows the light and dark palettes. */
#splash .logo {
  width: min(220px, 56vw);
  aspect-ratio: 774 / 206;
  background: var(--petrol);
  -webkit-mask: url("gms-logo.png") center / contain no-repeat;
  mask: url("gms-logo.png") center / contain no-repeat;
}

#splash a {
  color: var(--petrol);
}

#splash .track {
  width: min(200px, 60vw);
  height: 3px;
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}

#splash .track::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--petrol), var(--green));
  animation: slide 1.1s ease-in-out infinite;
}

#splash .error {
  display: none;
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

#splash.failed .track {
  display: none;
}

#splash.failed .error {
  display: block;
}

@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  #splash .track::after { animation: none; width: 100%; opacity: 0.5; }
  #splash { transition: none; }
}

/* Readable by crawlers, which cannot see into the canvas. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}