/* Mobile should feel like a focused app surface: immersive landing and native-feeling sheets. */
@media (max-width: 700px) {
  .home-hero {
    width: 100%;
    max-width: none;
    min-height: max(680px, calc(100svh - var(--bar) - 68px - env(safe-area-inset-bottom)));
    margin: 0;
    padding: 34px 24px calc(22px + env(safe-area-inset-bottom));
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .home-hero-art img { object-position: 58% center; }
  .home-hero-art:after {
    background: linear-gradient(0deg, #080c0af5 17%, #080c0ac7 51%, #080c0a45 100%);
  }

  .experience-dialog {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    height: min(92dvh, 860px);
    max-height: calc(100dvh - env(safe-area-inset-top));
    margin: 0;
    padding: 0 0 calc(18px + env(safe-area-inset-bottom));
    border: 1px solid #b9995d;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    overscroll-behavior: contain;
    scroll-padding-top: 18px;
    animation: mobile-sheet-rise .28s cubic-bezier(.2,.7,.2,1) both;
    view-transition-name: none;
  }
  .experience-dialog::backdrop { background: #030a07c9; backdrop-filter: blur(7px); }
  .experience-dialog .dialog-close {
    position: sticky;
    top: 12px;
    right: 12px;
    float: right;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    min-height: 46px;
    margin: 12px 12px -58px 0;
    border: 1px solid #d0b47766;
    background: #0b0d0ce8;
    color: #eee9dc;
    font-size: 25px;
  }
  .modal-art img {
    display: block;
    width: 100%;
    height: clamp(220px, 34svh, 330px);
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 52%;
  }
  .modal-copy { padding: 28px 24px 30px; }
}

@keyframes mobile-sheet-rise {
  from { opacity: .65; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .experience-dialog { animation: none; }
}

html[data-motion="reduce"] .experience-dialog { animation: none; }

.mobile-sheet-grip { display: none; }
@media (max-width: 700px) {
  html.mobile-sheet-open, html.mobile-sheet-open body { overflow: hidden; overscroll-behavior: none; }
  dialog.mobile-sheet {
    position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-width: 100%;
    height: auto; max-height: calc(94dvh - env(safe-area-inset-top));
    padding: 0 0 max(18px, env(safe-area-inset-bottom));
    border: 1px solid #b9995d66; border-bottom: 0; border-radius: 24px 24px 0 0;
    background: var(--shell-surface, #111610); color: var(--text, #eee8da);
    overflow: auto; overscroll-behavior: contain; scroll-padding-top: 36px;
    box-shadow: 0 -18px 80px #0008; view-transition-name: none;
    animation: app-sheet-in .3s cubic-bezier(.2,.8,.2,1) both;
    transform: translateY(var(--sheet-drag, 0px)); transition: transform .22s ease;
  }
  dialog.mobile-sheet::backdrop { background: #020604a6; backdrop-filter: blur(5px); }
  .mobile-sheet .mobile-sheet-grip {
    display: grid; place-items: center; position: sticky; top: 0; z-index: 5;
    width: 100%; height: 30px; padding: 0; margin: 0; border: 0;
    background: var(--shell-surface, #111610); cursor: grab; touch-action: none;
  }
  .mobile-sheet-grip span { width: 38px; height: 4px; border-radius: 99px; background: #d3c29c70; }
  .mobile-sheet .mobile-sheet-grip:focus-visible { outline: 2px solid var(--gold, #d4b477); outline-offset: -5px; }
  dialog.mobile-sheet[data-sheet-dragging] { animation: none; transition: none; }
  dialog.mobile-sheet[data-sheet-opened]:not([data-sheet-closing]) { animation: none; }
  dialog.mobile-sheet[data-sheet-closing] { animation: app-sheet-out .22s ease-in both; pointer-events: none; }
  .mobile-sheet .community-close { top: 42px; right: 16px; width: 44px; height: 44px; min-height: 44px; }
  .mobile-sheet .account-heading { padding: 18px 68px 20px 24px; gap: 16px; }
  .mobile-sheet .account-heading h2 { font-size: 24px; line-height: 1.3; }
  .mobile-sheet .account-heading .account-avatar { width: 48px; height: 48px; }
  .mobile-sheet .account-primary { padding: 0 24px 24px; gap: 20px; flex-wrap: wrap; }
  .mobile-sheet .account-group { padding: 10px 18px; }
  .mobile-sheet .account-group>a, .mobile-sheet .account-group>button, .mobile-sheet .account-language { min-height: 52px; padding: 12px 8px; font-size: 16px; }
  .mobile-sheet .account-footnote { padding: 18px 24px 10px; font-size: 12px; line-height: 1.6; }
  .mobile-sheet .economy-dialog-head { position: sticky; top: 30px; z-index: 4; padding: 12px 20px 20px; background: var(--shell-surface, #111610); }
  .mobile-sheet .economy-dialog-head .eyebrow { font-size: 10px; }
  .mobile-sheet .economy-dialog-head h2 { font-size: 25px; line-height: 1.25; }
  .mobile-sheet .economy-dialog-head .dialog-close { min-width: 44px; min-height: 44px; }
  .mobile-sheet .economy-tabs { padding: 12px 20px; flex-wrap: nowrap; overflow-x: auto; }
  .mobile-sheet .economy-tabs button { flex-shrink: 0; min-height: 44px; }
  .mobile-sheet .economy-body { padding: 24px 20px; }
  .mobile-sheet .reward-welcome { padding: 0; border: 0; background: none; gap: 24px; }
  .mobile-sheet .reward-welcome h2 { font-size: 30px; }
  .mobile-sheet .reward-welcome p { font-size: 15px; }
  .mobile-sheet .reward-welcome-action { align-items: stretch; width: 100%; }
  .mobile-sheet .reward-welcome-action small { text-align: center; }
  .mobile-sheet.settings-dialog { padding-inline: 20px; }
  .mobile-sheet.settings-dialog .mobile-sheet-grip { width: calc(100% + 40px); margin-inline: -20px; }
  .mobile-sheet.settings-dialog>header { padding-top: 18px; padding-right: 44px; }
  .mobile-sheet.more-sheet { padding-inline: 20px; }
  .mobile-sheet.more-sheet>.sheet-handle { display: none; }
  .mobile-sheet.more-sheet>.mobile-sheet-grip { width: calc(100% + 40px); margin-inline: -20px; }
}
@keyframes app-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes app-sheet-out { from { transform: translateY(var(--sheet-drag, 0px)); } to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { dialog.mobile-sheet, dialog.mobile-sheet[data-sheet-closing] { animation: none; transition: none; } }
html[data-motion="reduce"] dialog.mobile-sheet { animation: none; transition: none; }