/* The web player's page (shell.html, gw-shell.js). System fonts only: the CSP loads no others. */
html,
body,
#canvas {
  margin: 0;
  padding: 0;
  border: 0;
}

html,
body,
#gw-main {
  height: 100%;
}

body {
  background: #000;
  color: #e8e6e3;
  overflow: hidden;
  touch-action: none;
  font:
    16px / 1.5 system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
}

#canvas {
  display: block;
  /* A finger on the game is the game's (its touch controls): no callout, selection or tap flash. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#canvas:focus {
  outline: none;
}

#gw-shell {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: #0d0f12;
}

#gw-shell[hidden] {
  display: none;
}

#gw-start {
  font: inherit;
  font-size: 1.25rem;
  padding: 0.75rem 2rem;
  color: #0d0f12;
  background: #e8e6e3;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}

#gw-start:focus-visible {
  outline: 3px solid #7fb2ff;
  outline-offset: 3px;
}

#gw-start:disabled {
  cursor: progress;
  opacity: 0.6;
}

#gw-start[hidden] {
  display: none;
}

#gw-title {
  margin: 0 1rem;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
}

#gw-title[hidden],
#gw-step[hidden],
#gw-bar[hidden],
#gw-spinner[hidden] {
  display: none;
}

#gw-step {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 1rem;
  color: #b9b6b1;
  font-size: 0.95rem;
  text-align: center;
}

/* Spun by the compositor (transform only): it keeps turning while the engine holds the page's
   thread. */
#gw-spinner {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid rgb(232 230 227 / 0.25);
  border-top-color: #e8e6e3;
  border-radius: 50%;
  animation: gw-spin 0.9s linear infinite;
}

@keyframes gw-spin {
  to {
    transform: rotate(1turn);
  }
}

#gw-bar {
  width: min(22rem, 72vw);
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgb(232 230 227 / 0.14);
}

#gw-fill {
  height: 100%;
  background: linear-gradient(90deg, #7fb2ff, #e8e6e3);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease-out;
}

/* While a step holds the thread with no word until it ends, the bar eases toward its end. */
#gw-fill.creep {
  transition: transform 40s cubic-bezier(0.08, 0.6, 0.2, 1);
}

/* Once the game's first frame is drawn (its shaders warming), it shows: its own title screen is
   on it, so the page's title goes and the step and bar sit in a strip along the bottom. */
#gw-shell.over-game {
  justify-content: flex-end;
  gap: 0.75rem;
  padding-bottom: max(1.5rem, 7vh);
  background: linear-gradient(to top, rgb(13 15 18 / 0.9), rgb(13 15 18 / 0) 45%);
}

#gw-shell.over-game #gw-title {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #gw-spinner {
    animation-duration: 3s;
  }

  #gw-fill,
  #gw-fill.creep {
    transition: none;
  }
}

#gw-notice {
  max-width: min(36rem, 90vw);
  margin: 0;
  padding: 1rem 1.25rem;
  text-align: center;
  background: #2a1f24;
  border: 1px solid #7a3a4a;
  border-radius: 0.5rem;
  white-space: pre-line;
}