/* ============================================================
   Device frame — desktop preview of the mobile app.
   ≥ 600px: app renders inside a phone frame (content ≤ 420px).
   < 600px: plain full-screen mobile layout, as designed.
   ============================================================ */

.stage { display: block; }
.phone { position: relative; width: 100%; min-height: 100dvh; background: var(--paper); }
.phone-screen { position: relative; }
/* dark screen background for dark full-screen pages (login) — hides the light
   container background revealed by overscroll inside the device frame */
.phone-screen.screen-dark { background: rgba(20, 26, 32, .97); }

@media (min-width: 600px) {
  html, body { height: 100%; }

  .stage {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background:
      radial-gradient(900px 620px at 50% -5%, rgba(255, 183, 27, .09), transparent 60%),
      radial-gradient(700px 500px at 85% 100%, rgba(255, 138, 61, .05), transparent 55%),
      radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 26px 26px,
      #12171C;
  }

  .phone {
    /* fixed content width: 420px screen + 11px bezel on each side;
       the height adapts to the window (max 840px) so the frame always fits
       without feeling overly stretched */
    --pw: 400px;
    position: relative;
    width: var(--pw);
    height: min(calc(100dvh - 24px), 840px);
    min-height: 0; /* override the mobile full-screen min-height */
    flex: none;
    padding: 11px;
    border-radius: 52px;
    /* identity transform: keeps the fixed bottom nav pinned to the frame
       (non-scrolling ancestor = containing block for position: fixed) */
    transform: translateZ(0);
    background: linear-gradient(160deg, #454C55 0%, #23282E 45%, #101317 100%);
    box-shadow:
      inset 0 0 0 1.5px rgba(255, 255, 255, .14),
      0 60px 120px -30px rgba(0, 0, 0, .75),
      0 24px 48px -20px rgba(0, 0, 0, .6);
  }

  /* Side buttons */
  .phone::before, .phone::after {
    content: "";
    position: absolute;
    width: 3.5px;
    border-radius: 3px;
    background: linear-gradient(180deg, #4A515A, #22272D);
  }
  .phone::before { /* volume */
    left: -3.5px; top: 130px; height: 116px;
    box-shadow: 0 -62px 0 0 #3A4048;
  }
  .phone::after { /* power */
    right: -3.5px; top: 176px; height: 84px;
  }

  .phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 45px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--paper);
    /* NOTE: no transform here on purpose — the scale() on .phone must stay the
       nearest transformed ancestor, so the fixed bottom nav pins to the frame
       instead of scrolling away with the screen content */
  }

  /* keep the nav 16px above the screen's bottom edge (11px bezel + 16px) */
  .hl-nav { bottom: 27px; }
}