/* Mobile-only framing of the existing 1920x1080 scene. Media/auth stay native. */
@media (max-width: 900px) and (orientation: portrait),
       (max-width: 960px) and (max-height: 600px) and (pointer: coarse) {
  #entrance {
    --entrance-view-height: 100dvh;
    top: var(--entrance-view-top, 0px);
    bottom: auto;
    height: var(--entrance-view-height);
  }

  /* Cover without stretching; both the artwork and its hit targets share a plane. */
  #plane {
    left: 50%;
    top: 50%;
    width: max(100%, calc(var(--entrance-view-height) * 1.777777778));
    height: max(100%, calc(100vw * .5625));
    transform: translate(-50%, -50%);
    transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
  }

  /* Focus the right page, bounded by the scene edge in landscape/keyboard layouts. */
  #entrance[data-phase="form"] #plane {
    transform: translate(clamp(-69.75%, calc(50vw - 100%), -50%), -50%);
  }

  #bookHotspot {
    left: 43%;
    top: 19%;
    width: 14%;
    height: 28%;
    touch-action: manipulation;
  }

  #bookEnter {
    left: 50%;
    top: 49%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    min-height: 48px;
    padding: 10px 18px;
    font-size: 22px;
    line-height: 1.15;
    border-color: #c4a16a99;
    background: #091b2ad9;
    box-shadow: 0 3px 14px #0004;
    touch-action: manipulation;
  }

  #loginPanel {
    left: clamp(50%, calc(100% - 50vw), 69.75%);
    top: calc(50% + (env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .5);
    transform: translate(-50%, -50%);
    width: min(410px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    height: calc(var(--entrance-view-height) - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    justify-content: flex-start;
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ad8d55 #f2e8d5;
    border: 1px solid #b9945770;
    border-radius: 12px;
    background: #f5edddf5;
    box-shadow: 0 8px 30px #24180725, inset 0 0 0 3px #fffbf233;
  }

  #loginForm { flex: 0 0 auto; width: 100%; margin-block: auto; gap: 8px; }
  .login-crest { height: 40px; margin-bottom: 2px; }
  #loginTitle { font-size: 30px; line-height: 1.1; white-space: normal; }
  .ornament { font-size: 13px; margin: 2px 0 6px; }
  .field { gap: 6px; }
  .field label { font-size: 18px; line-height: 1.15; }
  .field input { height: 48px; padding-inline: 12px; font-size: 16px; }
  .password-wrap input { padding-right: 48px; }
  #passwordEye { width: 44px; }
  #passwordEye svg { width: 22px; }
  .text-button { min-height: 44px; padding: 6px 0; font-size: 18px; line-height: 1.2; }
  .primary { width: 100%; min-height: 48px; padding: 8px 16px; font-size: 24px; }
  #formMessage { flex: 0 0 auto; min-height: 2.2em; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
  #mediaNotice { bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: calc(100% - 32px); max-width: 380px; }
  #retry { min-height: 44px; margin: 8px 0 0; }
  .utility { left: max(12px, env(safe-area-inset-left, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  #entrance #plane { transition: none; }
}