/* Fortune Spin web shell: the game fills the whole window on every device. */
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0f172a;
  color: #f8fafc;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* The stage fills the visible viewport (dvh follows mobile browser bars) and keeps clear of notches. */
#stage {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
  background: #0f172a;
}

/* ---- loading screen ---- */
#loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(circle at 50% 40%, #312e81 0%, #0f172a 70%);
  transition: opacity 0.4s ease;
  z-index: 10;
}
#loader.done { opacity: 0; pointer-events: none; }
#loader .brand { font-size: clamp(28px, 6vw, 56px); font-weight: 800; letter-spacing: 0.04em; color: #fbbf24; }
#loader .brand span { color: #f8fafc; }
#loader .bar { width: min(420px, 70vw); height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
#loader-fill { width: 0; height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width 0.2s ease; }
#loader-text { font-size: 14px; color: #94a3b8; }

/* ---- rotate prompt: phones and tablets must be turned to landscape to use the platform ---- */
#rotate {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: #0f172a;
  z-index: 20;
}
#rotate svg { width: 96px; height: 96px; fill: none; stroke: #fbbf24; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#rotate svg circle { fill: #fbbf24; stroke: none; }
#rotate .phone { transform-origin: 32px 28px; animation: turn 2.2s ease-in-out infinite; }
#rotate p { margin: 8px 0 0; font-size: 22px; font-weight: 700; }
#rotate small { font-size: 15px; color: #94a3b8; }
@keyframes turn { 0%, 25% { transform: rotate(0deg); } 55%, 100% { transform: rotate(-90deg); } }

body.rotate-required #rotate { display: flex; }
body.rotate-required #unity-canvas { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  #rotate .phone { animation: none; transform: rotate(-90deg); }
}

#error {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: min(520px, 90vw);
  padding: 18px 22px;
  border-radius: 12px;
  background: #7f1d1d;
  color: #fff;
  font-size: 16px;
  text-align: center;
  z-index: 30;
}
#error[hidden] { display: none; }