html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background: #06121f;
  /* Phones: no text selection, long-press callout or tap flash over the game. */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent }

/* The game fills the whole page/iframe. The portal supplies the frame and its fullscreen control. */
/* Inset by the safe area so nothing sits under a phone's notch or rounded corners (zero elsewhere). */
#unity-canvas {
  position: fixed; top: env(safe-area-inset-top, 0px); left: env(safe-area-inset-left, 0px);
  width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: block; background: #06121f; outline: none; touch-action: none
}

#gf-loader {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.5vh;
  background: radial-gradient(ellipse at 50% 40%, #12375a 0%, #081a2d 55%, #040c16 100%);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  transition: opacity 0.4s ease;
}
#gf-loader.gf-done { opacity: 0; pointer-events: none }
#gf-logo { width: min(72vw, 620px); max-height: 48vh; object-fit: contain; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55)) }
#gf-progress { width: min(60vw, 420px); height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(120, 190, 255, 0.25) }
#gf-progress-fill { width: 0%; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #2fa8ff, #ff8a1f); transition: width 0.2s ease }
#gf-status { color: #b9d3ee; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; min-height: 1.2em; text-align: center; max-width: 80vw }
/* The game is laid out for landscape; in a portrait frame, ask for landscape instead of
   showing a squeezed board. Covers the loader too, since it can appear mid-load. */
#gf-rotate {
  position: fixed; inset: 0; z-index: 20; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 3vh; padding: 24px;
  background: radial-gradient(ellipse at 50% 40%, #12375a 0%, #081a2d 55%, #040c16 100%);
  color: #dbeaf7; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-align: center;
}
#gf-rotate img { width: min(80vw, 420px) }
#gf-rotate strong { font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase }
#gf-rotate span { font-size: 16px; color: #b9d3ee }
@media (max-aspect-ratio: 1/1) { #gf-rotate { display: flex } }
#gf-loader.gf-error #gf-progress { display: none }
#gf-loader.gf-error #gf-status { color: #ffb4a8; text-transform: none; letter-spacing: 0 }