/* -------------------------------------------------------------------------
   base.css — page reset, backdrop and the handset's outer sizing box.
   How the handset *looks* lives in phone.css; this file only decides how big
   it is and where it sits.
   ---------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: #101317;
  background-image:
    radial-gradient(120% 80% at 50% 0%, #2a3038 0%, #14171b 55%, #0b0d10 100%);
  color: #cfd6de;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;
}

.stage {
  display: grid;
  place-items: center;
  min-height: 100vh;
  /* `svh`, not `dvh`: the small viewport is the worst case, so the handset is
     sized once and does not resize as a mobile browser's toolbars slide in
     and out from under it. */
  min-height: 100svh;
  padding:
    max(0.5rem, env(safe-area-inset-top))
    max(0.5rem, env(safe-area-inset-right))
    max(0.5rem, env(safe-area-inset-bottom))
    max(0.5rem, env(safe-area-inset-left));
}

/* The handset is a fixed 100 x 200 unit canvas. `container-type: inline-size`
   turns it into a query container, so everything inside can be sized in
   `cqw` — 1% of the handset's width — and no media query is ever needed.

   Note that `.device` itself cannot use `cqw`: those units resolve against
   the nearest *ancestor* container. Its own appearance therefore lives on
   `.device__inner`, which is a descendant and can. */
.device {
  position: relative;
  width: min(94vw, calc(94vh * 100 / 200), 460px);
  width: min(94vw, calc(94svh * 100 / 200), 460px);
  aspect-ratio: 100 / 200;
  container-type: inline-size;
  border-radius: 15% / 7.5%;
  filter: drop-shadow(0 1.6rem 2.4rem rgba(0, 0, 0, 0.62));
}

.device__inner {
  position: absolute;
  inset: 0;
}