/* Above mobile widths, keep the app at its intended 390px reading width.
   The screen owns scrolling; the header and overlays stay inside the phone. */
@media (min-width: 761px) {
  body {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
      radial-gradient(ellipse at 50% 35%, #f8f7fc, transparent 65%),
      linear-gradient(145deg, #e7e7f1, #d9daea);
  }

  .phone {
    width: 414px;
    max-width: 100%;
    margin: 0;
    padding: 12px;
    border-radius: 46px;
    background: #26273b;
    box-shadow:
      inset 0 0 0 2px #4b4d66,
      inset 0 0 0 5px #1c1d2d,
      0 32px 70px -28px rgba(35, 36, 58, .5),
      0 8px 24px -12px rgba(35, 36, 58, .3);
  }

  .screen {
    height: min(844px, calc(100dvh - 72px));
    min-height: 0;
    border-radius: 34px;
    overflow: hidden;
    background: var(--screen-bg);
  }

  .screen::before { display: none; }
  .hdr { position: relative; background-size: 100% min(844px, calc(100dvh - 72px)); }
  .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  .lang { min-height: 0; overflow-y: auto; justify-content: safe center; }
  .lang > * { flex-shrink: 0; }
  .grid-reveal { min-height: 100%; }
  #mosaic { scroll-margin-top: 0; }

  .snow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .gate, .lightbox { position: absolute; }
  .lightbox__short { height: min(533px, calc(100% - 32px)); width: auto; max-width: 78%; }

  /* Viewport-based type must follow the phone width on a desktop monitor. */
  .intro__title { font-size: 39px; }
  .contains__txt { font-size: 10.5px; }
}