/* Hookah WebGL shell. The loading screen is only the in-game splash's backdrop (indigo sky) and a
   download bar — the branded splash itself is HookahSplashScreen in MainMenu, shown once.
   System fonts only: this page must render before anything else has downloaded. */
:root {
  color-scheme: dark;
  --violet: #4338d8;
  --night: #0b0c33;
  --neon: #8cff3f;
  --lilac: #e4e5ff;
  --ink: #12103f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--night); }
body { overscroll-behavior: none; touch-action: none; }
#stage {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: radial-gradient(circle at 50% 30%, #3530b0 0, #15155a 48%, #080a26 100%);
}
#frame { position: relative; aspect-ratio: 9 / 16; max-width: 100%; max-height: 100%; overflow: hidden; background: var(--night); box-shadow: 0 0 60px #000c; container-type: size; }
#unity-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: var(--night); }

/* ---------------------------------------------------------------- loading */
#loading, #error {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  background: linear-gradient(180deg, var(--violet) 0%, var(--night) 100%);
}
/* Only the download bar, low on the screen where the splash's own bar sits. */
#loading { justify-content: flex-end; gap: 1.6cqh; padding: 0 8% 16cqh; }
#loading[hidden], #error[hidden] { display: none; }

#bar { position: relative; width: min(56cqw, 360px); }
#progress-track {
  position: relative; height: 2cqw; min-height: 8px; border-radius: 99px; overflow: hidden;
  background: var(--ink); box-shadow: inset 0 0 0 2px #e6dcff40;
}
#progress-fill {
  width: 0; height: 100%; border-radius: 99px;
  background: var(--neon); transition: width .15s linear;
}
#progress-text { color: var(--lilac); font-size: 3cqw; font-weight: 700; letter-spacing: .12em; opacity: .8; }

/* ---------------------------------------------------------------- error */
#error { gap: 18px; padding: 12%; }
#error strong { color: #fff; font-size: 22px; font-weight: 900; letter-spacing: .04em; }
#error span { color: var(--lilac); line-height: 1.45; }
#error small { display: block; margin-top: 10px; font-size: 11px; opacity: .7; overflow-wrap: anywhere; word-break: break-word; }
button { border: 0; border-radius: 99px; color: var(--ink); background: var(--neon); cursor: pointer; box-shadow: 0 6px 0 #4aa81a, 0 0 18px #8cff3f66; }
#retry { padding: 13px 34px; font-weight: 900; letter-spacing: .12em; }
#retry:active { transform: translateY(4px); box-shadow: 0 2px 0 #4aa81a; }
#warning { position: absolute; z-index: 5; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; pointer-events: none; }
#warning div { margin-bottom: 6px; padding: 9px 12px; border-radius: 10px; color: var(--ink); background: #ffd24a; font-size: 13px; font-weight: 700; }
#warning .error { color: white; background: #b0204a; }

@media (prefers-reduced-motion: reduce) {
  #progress-fill { transition: none; }
}