:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  --navy: #111f2c;
  --growth: #73eba0;
  --signal: #73ebf3;
  --amber: #f5b84c;
  --ink: #eaf8ed;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #071019;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  color: var(--ink);
  user-select: none;
}

#GameDiv {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

#Cocos3dGameContainer {
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  max-height: 100vh;
}

#GameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: 0;
  touch-action: none;
}

#BootScreen, #RotateLayer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  background: radial-gradient(circle at 50% 35%, #244255, var(--navy) 52%, #071019);
  transition: opacity 180ms ease, visibility 180ms ease;
}

#BootScreen.is-ready { opacity: 0; visibility: hidden; }
#BootScreen .eyebrow { color: var(--signal); letter-spacing: .2em; font-size: 12px; }
#BootScreen h1 { margin: 0; color: var(--growth); font-size: clamp(40px, 8vw, 84px); letter-spacing: .06em; }
#BootScreen p { margin: 0; font-size: clamp(16px, 2.4vw, 24px); }

.progress { width: min(360px, 70vw); height: 7px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: #304858; }
.progress span { display: block; width: 38%; height: 100%; background: var(--amber); animation: load 1.15s ease-in-out infinite alternate; }
#BootScreen.has-error .progress { display: none; }
#BootRetry { margin-top: 16px; padding: 12px 30px; border: 0; border-radius: 999px; color: #142018; background: var(--amber); font: inherit; font-weight: 800; cursor: pointer; }

#RotateLayer { display: none; z-index: 30; }
#RotateLayer strong { color: var(--amber); font-size: 24px; }
#RotateLayer span { max-width: 34ch; }

@keyframes load { to { transform: translateX(165%); } }

@media (orientation: portrait) and (max-width: 900px) {
  #RotateLayer { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .progress span { animation-duration: 2.4s; }
}