/*
  Hexa Puzzle Saga — portrait WebGL template stylesheet.

  Keep these rules together:
    1. `html, body` fill the iframe / browser window with no scroll, no margins.
    2. `#unity-container` is a flex centerer that hosts the canvas. Black bars
       are simply the body background showing through when the container is
       wider than the canvas.
    3. `#unity-canvas` declares `aspect-ratio: 9 / 16` so the canvas always
       resolves to a 9:16 box. Width/height fluidly adapt to the viewport via
       the container/min(...) math; on non-supporting browsers the inline JS in
       index.html sets explicit pixel dimensions instead.

  Aspect ratio is centralised in the CSS variable `--aspect`. If you change
  it, also update `PlayerSettings.defaultScreenWidthWeb`/`HeightWeb` so the
  Unity-side layout calculations match.
*/
:root {
  --aspect: 9 / 16;
  --bg: #000;
  --bar: #2b1e3a;
  --accent: #f5b840;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  /* Letterbox bands use the brand purple instead of bare black so wide-aspect iframes
     (CrazyGames desktop wrapper, play.unity.com, itch landscape) read as branded
     negative space rather than dead air. The canvas itself stays #000 — see #unity-canvas. */
  background: var(--bar);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

#unity-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Respect iPhone notch / Dynamic Island / home-bar so the canvas doesn't get cropped
     by the device's safe-area chrome. env() resolves to 0 on browsers without the
     intrusions, so this is a no-op cost on desktop. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

#unity-canvas {
  /* `!important` is load-bearing: Unity's WebGL runtime writes
     `canvas.style.width/height` in pixels after `createUnityInstance` runs
     (and on every fullscreen toggle), which would otherwise blow out the
     letterbox on hosts that size the iframe larger than 9:16 (play.unity.com,
     itch.io, channel3.gg). Inline styles lose to `!important` in cascade.

     The math: width = min(viewport-width, viewport-height * 9/16). Whichever
     axis runs out first becomes the limit; the other axis follows from the
     aspect. `dvw`/`dvh` keeps iOS Safari's dynamic toolbar from cropping. */
  aspect-ratio: 9 / 16;
  width:  min(100vw, calc(100vh * 9 / 16)) !important;
  height: min(100vh, calc(100vw * 16 / 9)) !important;
  width:  min(100dvw, calc(100dvh * 9 / 16)) !important;
  height: min(100dvh, calc(100dvw * 16 / 9)) !important;
  max-width:  100vw !important;
  max-height: 100vh !important;
  display: block;
  background: #000;
  outline: none;
}

/* The loading bar is visible from first paint (no `display: none`) so the FBE Games
   logo + progress pill replace the "black void" before createUnityInstance starts
   reporting progress. On completion the JS fades opacity 1 → 0 over 280ms, then
   unmounts via display: none after the transition completes. */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  opacity: 1;
  transition: opacity 280ms ease-out;
  pointer-events: none;
}

#loading-logo {
  /* FBE Games wordmark — 1203×350 (~3.4:1). Caps at 320px on desktop so it doesn't
     dominate; scales to 62vw on mobile so it reads at glance distance. White-on-
     transparent PNG, so it sits cleanly on the black canvas background. */
  width: min(62vw, 320px);
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

#unity-progress-bar-empty {
  width: 220px;
  height: 18px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--bar);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(245, 184, 64, 0.08);
}

#unity-progress-bar-full {
  /* min-width: 6px keeps the gold sliver visible the moment loading starts —
     otherwise the bar is invisible inside its empty track for the entire framework
     download phase, which reads as a frozen progress bar. */
  width: 0%;
  min-width: 6px;
  height: 100%;
  background: var(--accent);
  transition: width 120ms ease-out;
}

#unity-warning {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  display: none;
  background: #800;
  padding: 10px 14px;
  color: white;
  border-radius: 6px;
  z-index: 10;
}