:root {
  color-scheme: dark;
  font-family: system-ui, "Microsoft YaHei", sans-serif;
  background: #8fe4ff;
}

* { box-sizing: border-box; }
html, body, #GameRoot { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { touch-action: none; user-select: none; }
#GameRoot { position: relative; background: #a0e7ff; }
#GameCanvas { display: block; width: 100%; height: 100%; outline: none; }
#GameSplash, #GameError {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  color: #24445a;
  background: linear-gradient(180deg, #9fe8ff 0%, #d9f7ff 100%);
  z-index: 20;
}
#GameSplash[hidden], #GameError[hidden] { display: none; }
.spinner { width: 36px; height: 36px; border: 4px solid rgb(36 68 90 / 18%); border-top-color: #24445a; border-radius: 50%; animation: spin 0.8s linear infinite; }
#GameError pre { max-width: min(90vw, 680px); white-space: pre-wrap; user-select: text; }
@keyframes spin { to { transform: rotate(360deg); } }