body { padding: 0; margin: 0; overflow: hidden; background: #000; }

/*
  Funzee is a portrait phone screen. Stretched to the width of a desktop window
  it does not get bigger, it gets wrong - every control blows up to the width of
  the monitor and the layout reads as broken. So the canvas keeps the shape the
  UI was laid out for, the same 402x874 the Windows client opens at, and the
  window letterboxes around it. On a phone, already about that shape, it fills
  the screen as before.
*/
#unity-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/*
  A phone: fill whatever space there is. That includes the half a screen left when
  the soft keyboard is up - the canvas shrinking with it is what the APK does too,
  and Unity lays the screen out for the size it is given.
*/
#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #ff3030;   /* Rush Red, so the frame matches before the first draw */
}

/*
  Wide enough to be a desktop window: hold the phone shape and letterbox.

  The switch is on width, not on aspect ratio, and that is the whole point. By
  aspect, a phone with the keyboard up looks exactly like a short wide desktop
  window, so it would letterbox to the height left over and squeeze the game into
  a thin strip down the middle at the moment someone is trying to type. Width
  tells a phone from a monitor whatever the keyboard is doing.
*/
@media (min-width: 700px) {
  #unity-canvas {
    /*
      The width is calculated, not left to aspect-ratio with width:auto. A canvas
      is a replaced element: it has an intrinsic size from its width/height
      attributes, which Unity keeps writing to match the window, and width:auto
      resolves against that intrinsic size rather than against the ratio here. The
      result was a canvas that filled the window and looked exactly like no rule
      had been applied at all. An explicit width leaves nothing to resolve.
    */
    height: 100dvh;
    width: calc(100dvh * 402 / 874);
    max-width: 100vw;
  }
}

/*
  The loading screen is Funzee's, not Unity's: Rush Red with the Funzee mark,
  which is what the brand guideline says loading looks like. It stays
  display:block because the template's script toggles it with
  style.display = "block", and that would overwrite a flex rule here.
*/
#unity-loading-bar {
  position: fixed;
  inset: 0;
  display: none;
  box-sizing: border-box;
  padding-top: 42vh;
  background: #ff3030;
  text-align: center;
}

#unity-logo {
  width: 108px;
  height: 108px;
  margin: 0 auto;
  background: url('icons/funzee-192.png') no-repeat center / contain;
}

/* Drawn rather than the four Unity PNGs it replaces: fewer files, and a loading
   bar is one place that should not be someone else's colour. */
#unity-progress-bar-empty {
  width: 168px;
  height: 6px;
  margin: 22px auto 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}

#unity-progress-bar-full {
  width: 0%;
  height: 6px;
  border-radius: 3px;
  background: #fff;
  transition: width .2s ease-out;
}

#funzee-version {
  margin-top: 18px;
  font: 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.55);
}

#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }