/* The page around the game: a full-window canvas and, until the game has
   started, an on-brand loading screen (Schedulo palette, Montserrat, Route
   Violet #7A4DFF; see docs/BRAND.md). */
@font-face {
  font-family: "Montserrat";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Montserrat-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat Logo";
  font-weight: 900;
  font-display: block;
  src: url("fonts/Montserrat-Black-Logo.ttf") format("truetype");
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #071433;
  color: #ffffff;
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
}
canvas#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}
#loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 70% 46%, rgba(122, 77, 255, 0.28), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(30, 75, 255, 0.18), transparent 55%),
    #071433;
  z-index: 2;
}
#loading .card {
  text-align: center;
  padding: 0 24px;
}
#loading img {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
#loading .product {
  margin-top: 22px;
  font-family: "Montserrat Logo", "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: 0.06em;
}
#loading .label {
  margin-top: 4px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: #9b7bff;
}
#loading .bar {
  position: relative;
  width: 220px;
  height: 4px;
  margin: 30px auto 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
#loading .bar span {
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: #7a4dff;
  animation: run 1.3s ease-in-out infinite;
}
@keyframes run {
  to { left: 100%; }
}
#loading p {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: #c9d1ea;
  max-width: 420px;
}
#loading footer {
  position: absolute;
  bottom: 22px;
  font-size: 11px;
  color: #8a93b5;
}
#loading.failed .bar span {
  animation: none;
  left: 0;
  width: 100%;
  background: #e5484d;
}
@media (prefers-reduced-motion: reduce) {
  #loading .bar span { animation: none; left: 0; width: 100%; }
}