/* Hosting layer for Skyline (cf-static-sites, sites/ronaldw.com/games/hosting/),
   loaded after the game's own styles. The game sizes its canvas from #stage, so
   the sizing rules only decide how big #stage is. */

/* Results screen: share controls up with the results (host.js moves them into
   the overlay), "Tap to build again" below them, so the thumb that was tapping
   the lower screen can stay there. The game adds .top on the first results
   screen and never removes it; the overlay is hidden while building. */
.overlay > .sharebar { position: static; height: auto; padding: 0; }
.overlay.top #ovBest { order: 1; }
.overlay.top .sharebar { order: 2; }
.overlay.top .shareMsg { order: 3; }
.overlay.top #ovCta { order: 4; }

/* Phones and tablets: fill the screen. 100dvh follows the browser's toolbars as
   they slide in and out, so the street at the bottom is never hidden. */
html { height: 100%; height: 100dvh; }

/* Desktop (mouse or trackpad) in a wide window: play in a phone-shaped portrait
   frame instead of stretching across the monitor. Text inside the frame scales
   with the frame (cqw), not the window. */
@media (hover: hover) and (pointer: fine) and (min-aspect-ratio: 4/5) {
  body {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(rgba(8, 16, 48, .28), rgba(8, 16, 48, .28)), var(--sky);
  }
  #stage {
    width: min(calc((100dvh - 48px) * 9 / 16), 540px, calc(100vw - 32px));
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(8, 16, 48, .45), 0 0 0 1px rgba(255, 255, 255, .18);
    container-type: inline-size;
  }
  .score { font-size: clamp(52px, 16cqw, 88px); }
  .big { font-size: clamp(46px, 14cqw, 76px); }
}