/* Site 001 · Mobile layout v1 · Created/updated 2026-11-05 12:58:50 (UTC+7).
   Compact content first; keep real overflow reachable on short screens and with a keyboard. */
.mobile-info-launch { display: none; }
#mobile-info { width: min(94vw, 720px); max-height: min(90dvh, calc(var(--mobile-height, 100dvh) - 16px)); margin: auto; padding: 16px; border: 1px solid #41566f; border-radius: 18px; background: #080f20; color: #f4f7fc; overflow: auto; }
#mobile-info::backdrop { background: #020617cc; }
.mobile-info-close { display: block; margin: 0 0 12px auto; min-width: 44px; min-height: 44px; padding: 8px 16px; border: 1px solid #41566f; border-radius: 10px; }
#mobile-info #seo-about { display: block !important; padding: 0 0 16px; }
#mobile-info footer > div { flex-direction: column; text-align: center; }
@media (max-width: 999px) {
  :root { --mobile-gutter: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  html { height: 100%; scroll-padding-top: 60px; }
  body.mobile-app, body.mobile-guide { height: var(--mobile-height, 100dvh); min-height: 0; overflow: hidden; }
  body.mobile-app > .site-header { flex: 0 0 auto; position: relative; }
  .site-header-inner { padding: 5px var(--mobile-gutter); }
  .site-navigation { left: 12px; right: 12px; max-height: calc(var(--mobile-height, 100dvh) - 70px); }
  .site-navigation .mobile-info-launch { display: inline-flex; justify-content: center; align-items: center; }
  body.mobile-app > #seo-about, body.mobile-app > footer { display: none; }
  body.mobile-app #app-root, body.mobile-app #app-root.home-root {
    flex: 1 1 0%; min-height: 0; width: 100%; height: auto; max-width: 760px; padding: 8px var(--mobile-gutter) max(8px, env(safe-area-inset-bottom));
    justify-content: flex-start; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scroll-padding: 8px;
  }
  #app-root > * { flex-shrink: 0; min-width: 0; }
  #app-root button:not(.kh-tw):not(.eg-tile), #app-root input:not(.gap-input), .site-navigation button, #mobile-info button, #mobile-info a { min-height: 44px; }
  #app-root button:not(.kh-tw):not(.eg-tile) { touch-action: manipulation; }

  /* Home: three destinations are visible together, with a full-size action in each row. */
  #app-root .home-landing { flex: 1 0 auto; min-height: 0; height: 100%; display: flex; flex-direction: column; gap: 10px; margin: 0; }
  #app-root .home-intro { flex: 0 0 auto; margin: 0; }
  #app-root .home-intro h1 { max-width: 680px; font-size: clamp(20px, 5.6vw, 28px); line-height: 1.24; letter-spacing: -.6px; }
  #app-root .home-free { margin-top: 8px; font-size: 13px; gap: 7px; }
  #app-root .home-free svg { width: 20px; height: 20px; flex-basis: 20px; }
  #app-root .home-destinations { flex: 1 0 auto; min-height: 0; max-width: none; width: 100%; margin: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(100px, 1fr)); gap: 8px; }
  #app-root .home-destination, #app-root .home-sniper { display: grid; grid-template-columns: clamp(58px, 22vw, 105px) minmax(0, 1fr) clamp(80px, 24vw, 120px); grid-template-rows: auto; gap: 8px; padding: 10px; text-align: left; border-radius: 16px; order: initial; }
  #app-root .home-sniper { padding: 9px; }
  #app-root .home-illustration { width: 100%; max-width: none; }
  #app-root .home-destination h2 { margin: 0 0 5px; font-size: clamp(16px, 4.5vw, 21px); line-height: 1.17; white-space: normal; letter-spacing: -.5px; }
  #app-root .home-destination p { font-size: clamp(12px, 3.2vw, 15px); line-height: 1.35; min-height: 0; }
  #app-root .home-action { grid-column: 3; grid-row: 1; min-height: 52px; margin: 0; padding: 8px 5px; border-radius: 10px; font-size: clamp(12px, 3.3vw, 15px); line-height: 1.3; }
  #app-root .home-action svg { display: none; }

  /* Sniper introduction and exercises. */
  #app-root .nl-word-intro { margin: auto; width: 100%; }
  #app-root .nl-word-intro > div:first-child { margin-bottom: 8px; }
  #app-root .nl-word-intro > .glass-card { padding: 14px; border-radius: 18px; }
  #app-root .nl-word-intro h1 { font-size: clamp(28px, 7vw, 40px); overflow-wrap: anywhere; }
  #app-root .nl-word-intro .mb-6 { margin-bottom: 10px; }
  #app-root .nl-word-intro .nl-word-emoji { width: 48px; height: 48px; margin-top: 10px; margin-bottom: 4px; }
  #app-root .nl-word-emoji > span { font-size: 28px; }
  #app-root .nl-word-intro .max-w-sm { padding: 10px; }
  #app-root .nl-word-intro .max-w-sm > p { max-height: min(180px, 26dvh); overflow: auto; }
  #app-root #intro-start-btn { margin-top: 12px; padding: 10px; }
  #app-root .nl-listening { display: flex; flex-direction: column; gap: 6px; margin: 0 auto; padding-bottom: 0; }
  #app-root .nl-listening > * { margin-top: 0; margin-bottom: 0; }
  #app-root .nl-mode-caption { display: none; }
  #app-root .nl-mode-description { font-size: 12px; line-height: 1.35; }
  #app-root .mobile-practice-controls { border: 1px solid #334155; border-radius: 12px; background: #0b1423; }
  #app-root .mobile-practice-controls > summary { min-height: 44px; padding: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
  #app-root .mobile-practice-controls > div { margin: 0; }
  #app-root .nl-listening [data-click="setInputMode"] { font-size: 12px; flex-direction: row; gap: 4px; transform: none; }
  #app-root .nl-exercise-card { padding: 8px; gap: 8px; }
  #app-root .nl-play-row { display: flex; align-items: center; justify-content: space-between; padding: 0; min-height: 48px; gap: 8px; }
  #app-root #dictation-play-btn { position: static; transform: none; width: 48px; height: 48px; flex: 0 0 48px; }
  #app-root .nl-play-row > .group { display: none; }
  #app-root [data-speed] { min-width: 44px; min-height: 44px; padding: 4px; font-size: 12px; }
  #app-root #exercise-form { margin: 0; padding: 8px; max-height: max(140px, calc(var(--mobile-height, 100dvh) - 375px)); overflow-y: auto; overscroll-behavior: contain; }
  #app-root #exercise-form > div:first-child { font-size: 15px; line-height: 1.8; }
  #app-root .gap-input { font-size: 16px; min-height: 40px; }
  #app-root .nl-exercise-actions { margin-top: 0; }
  #app-root #feedback-panel { margin-top: 0; font-size: 13px; max-height: 110px; overflow-y: auto; }
  #app-root .nl-exercise-card:has(#feedback-panel:not(.hidden)) #exercise-form { max-height: max(100px, calc(var(--mobile-height, 100dvh) - 470px)); }
  #app-root .mg-nudge { margin-top: 8px; font-size: 12px; }

  /* Secondary screens: compact summaries, with long lists/details independently scrollable. */
  #app-root .nl-auth { margin-top: 0; margin-bottom: auto; }
  #app-root .nl-auth > .glass-card { padding: 16px; border-radius: 18px; }
  #app-root .nl-auth h2 { margin-bottom: 12px; font-size: 24px; }
  #app-root .nl-auth form > * + * { margin-top: 10px; }
  #app-root .nl-auth form { display: flex; flex-direction: column; gap: 8px; }
  #app-root .nl-auth form > * { margin: 0 !important; }
  #app-root .nl-auth input { padding: 9px 12px; }
  #app-root .nl-auth > .glass-card > .text-center { margin-top: 8px; }
  #app-root .nl-auth > .glass-card > .text-center { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
  #app-root .nl-summary, #app-root .nl-profile { padding: 14px; border-radius: 18px; margin: auto; }
  #app-root .nl-summary > * + *, #app-root .nl-profile > * + * { margin-top: 12px; }
  #app-root .nl-summary > * + * { margin-top: 8px; }
  #app-root .nl-summary > .w-16 { width: 44px; height: 44px; }
  #app-root .nl-summary .p-4 { padding: 10px; }
  #app-root .nl-summary button { padding-top: 10px; padding-bottom: 10px; }
  #app-root .nl-profile .p-5 { padding: 12px; }
  #app-root .nl-profile span { overflow-wrap: anywhere; min-width: 0; }
  #app-root .nl-daily-result { padding: 14px; border-radius: 18px; }
  #app-root .nl-daily-result > * + * { margin-top: 8px; }
  #app-root .nl-daily-result button { padding-top: 10px; padding-bottom: 10px; }
  #app-root .nl-review { display: flex; flex-direction: column; gap: 12px; min-height: 0; height: 100%; }
  #app-root .nl-review > * { margin-top: 0; }
  #app-root .nl-review h2 { font-size: 22px; }
  #app-root .nl-review > .grid { flex: 1; min-height: 0; overflow-y: auto; grid-auto-rows: min-content; gap: 8px; }
  #app-root .nl-review > .grid > div { padding: 10px; }
  #app-root .nl-review > .grid > div > div { font-size: 16px; overflow-wrap: anywhere; min-width: 0; }
  #app-root .nl-review > .grid button { flex-shrink: 0; }
  #app-root .nl-progress { padding-bottom: 0; }
  #app-root .nl-progress > * + * { margin-top: 8px; }
  #app-root .nl-progress > .glass-card { padding: 10px; }
  #app-root .nl-progress h1 { font-size: 23px; }
  #app-root .nl-progress > .glass-card > div:first-child { flex-wrap: wrap; gap: 6px; }
  #app-root .nl-progress > .glass-card > div:first-child > div:last-child { margin-left: auto; }
  #app-root [id^="pg-detail-"]:not(.hidden) { max-height: 38dvh; overflow-y: auto; overscroll-behavior: contain; }

  /* Echo Grid: board size responds to available height, not just phone width. */
  #app-root .eg-wrap { max-width: 600px; width: 100%; margin: 0 auto; }
  #app-root .eg-card { padding: 12px; border-radius: 18px; }
  #app-root .eg-lvlist { margin-top: 10px; gap: 8px; }
  #app-root .eg-lvcard { padding: 6px 8px; gap: 2px 6px; grid-template-columns: minmax(0, 1fr) 74px; }
  #app-root .eg-hero { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 0; }
  #app-root .eg-title { font-size: 26px; margin: 0; }
  #app-root .eg-strip { flex-basis: 100%; margin-top: 0; }
  #app-root .eg-pill { padding: 4px 7px; font-size: 11px; letter-spacing: .04em; }
  #app-root .eg-lvbest { grid-column: 2; grid-row: 3; font-size: 11px; line-height: 1.3; margin-top: 0; text-align: center; white-space: nowrap; align-self: center; }
  #app-root .eg-lvgo { grid-row: 1 / 3; padding: 8px; min-height: 44px; display: grid; place-items: center; }
  #app-root .eg-gridbox { width: min(100%, max(244px, calc(var(--mobile-height, 100dvh) - 350px))); max-width: 440px; }
  #app-root .eg-play { padding: 8px; }
  #app-root .eg-status { font-size: 18px; min-height: 26px; margin: 6px 0; line-height: 1.3; }
  #app-root .eg-timer { height: 4px; margin-bottom: 4px; }
  #app-root .eg-foot { margin-top: 6px; }
  #app-root .eg-howto { margin-top: 6px; }
  #app-root .eg-grid { gap: 8px; }
  #app-root .eg-tile { min-height: 44px; border-radius: 12px; }
  #app-root .eg-emo { font-size: clamp(21px, 6vw, 30px); }
  #app-root .eg-ctrl { margin-top: 8px; gap: 8px; }
  #app-root .eg-tip { margin-top: 8px; font-size: 12px; }
  #app-root .eg-demo { margin-top: 8px; }

  /* Kids: fixed summary/actions; only the photo catalogue or long sentence needs scrolling. */
  #app-root .kh { max-width: 640px; min-height: 0; max-height: 100%; padding: 6px; gap: 6px; border-radius: 18px; flex: 1; }
  #app-root .kh-top { padding: 3px; flex-shrink: 0; }
  #app-root .kh-setup { flex: 1; min-height: 0; gap: 6px; }
  #app-root .kh-guide { padding: 8px; gap: 6px; border-radius: 14px; }
  #app-root .kh-grid { min-height: 0; overflow-y: auto; align-content: start; gap: 6px; padding: 2px; }
  #app-root .kh-item { min-height: 92px; padding: 6px; }
  #app-root .kh-thumb { width: 44px; height: 44px; aspect-ratio: 1; font-size: 27px; }
  #app-root .kh-item-n { flex-shrink: 0; font-size: 12px; }
  #app-root .kh-play { min-height: 0; flex: 1; gap: 6px; }
  #app-root .mobile-kids-controls { flex-shrink: 0; border: 1px solid #bae6fd; background: #fff; border-radius: 12px; }
  #app-root .mobile-kids-controls > summary { min-height: 44px; padding: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
  #app-root .kh-bar { padding: 3px; gap: 4px; }
  #app-root .kh-seg { padding: 2px; }
  #app-root .kh-seg-lbl { font-size: 11px; padding: 0 2px; }
  #app-root .kh-segbtn { padding: 5px; min-width: 44px; font-size: 12px; }
  #app-root .kh-card { padding: 8px; gap: 6px; border-radius: 16px; min-height: 0; overflow-y: auto; }
  #app-root .kh-card.idle { padding: 12px; }
  #app-root .kh-hero { font-size: 36px; }
  #app-root .kh-mission2 .kh-photo { width: 64px; height: 64px; border-radius: 12px; }
  #app-root .kh-sent { font-size: 18px; line-height: 1.45; }
  #app-root .kh-req.hard .kh-sent { font-size: 17px; }
  #app-root .kh-dock { position: sticky; bottom: 0; margin-top: auto; padding: 5px; gap: 8px; flex-shrink: 0; }
  .kh-modal .kh-sheet { max-height: calc(var(--mobile-height, 100dvh) - 16px); padding: 10px; gap: 8px; }
  .kh-modal .kh-editor { padding-top: 6px; }
  .kh-modal .kh-photorow .kh-prevpic { width: 72px; height: 72px; }
  #donate-modal, #contact-modal { padding: 8px; }
  #donate-modal > div, #contact-modal > div { max-height: calc(var(--mobile-height, 100dvh) - 16px); overflow: auto; padding: 16px; }

  /* The guides become an overview with expandable sections; all original content remains. */
  body.mobile-guide > header { flex-shrink: 0; }
  body.mobile-guide > main { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
  body.mobile-guide > main > * { margin: 0 !important; flex-shrink: 0; }
  body.mobile-guide main > section:first-child { padding: 12px; }
  body.mobile-guide main h1 { font-size: 24px; line-height: 1.25; }
  body.mobile-guide main > section:first-child > p { font-size: 14px; margin-top: 8px; }
  body.mobile-guide main > section:first-child > div { margin-bottom: 8px; }
  body.mobile-guide main > section:first-child > a { margin-top: 8px; padding: 10px 16px; min-height: 44px; }
  .mobile-guide-intro { margin-top: 8px; }
  .mobile-guide-intro > p { padding: 8px 12px; font-size: 14px; line-height: 1.5; text-align: left; }
  body.mobile-guide > footer { display: none; }
  .mobile-guide-section { padding: 0; border: 1px solid #334155; border-radius: 12px; background: #0b1423; }
  .mobile-guide-section > summary { min-height: 44px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
  .mobile-guide-section > section, .mobile-guide-section > footer { padding: 12px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
}
@media (max-width: 559px) and (max-height: 520px) {
  #app-root .home-landing { gap: 6px; }
  #app-root .home-intro h1 { font-size: 20px; line-height: 1.2; }
  #app-root .home-free { margin-top: 6px; font-size: 12px; }
  #app-root .home-destinations { grid-template-rows: repeat(3, minmax(80px, 1fr)); gap: 6px; }
  #app-root .home-destination, #app-root .home-sniper { padding: 6px; gap: 6px; grid-template-columns: 54px minmax(0, 1fr) 80px; }
  #app-root .home-sniper { padding: 5px; }
  #app-root .home-destination h2 { font-size: 16px; margin-bottom: 3px; }
  #app-root .home-destination p { font-size: 12px; line-height: 1.2; }
  #app-root .home-action { min-height: 44px; font-size: 12px; padding: 6px 4px; }
  #app-root .nl-word-intro > .glass-card { padding: 10px; }
  #app-root .nl-word-intro .nl-word-emoji { width: 36px; height: 36px; margin-top: 6px; }
  #app-root .nl-word-intro .max-w-sm > p { max-height: 74px; }
  #app-root .nl-word-intro h1 { font-size: 28px; }
  #app-root #intro-start-btn { margin-top: 8px; }
  #app-root .nl-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  #app-root .nl-summary > * { margin: 0; }
  #app-root .nl-summary h2 { font-size: 20px; }
  #app-root .nl-summary > .w-16 { justify-self: center; }
  #app-root .nl-summary > .p-4 { align-self: center; }
  #app-root .nl-summary button { font-size: 12px; }
  #app-root .nl-summary #daily-teaser { grid-column: 1 / -1; }
  #app-root .eg-lobby { padding: 6px; }
  #app-root .eg-lobby .eg-strip { display: none; }
  #app-root .eg-lvcard { padding-top: 4px; padding-bottom: 4px; row-gap: 0; }
  #app-root .eg-lvsub { display: none; }
  #app-root .eg-lvlist { gap: 6px; margin-top: 6px; }
  #app-root .eg-howto summary { padding: 10px; min-height: 44px; }
  #app-root .eg-gridbox { width: min(100%, 244px); }
  #app-root .eg-tip { margin-top: 4px; padding: 4px; }
  #app-root .nl-progress > .glass-card { padding: 6px; }
  #app-root .nl-progress > * + * { margin-top: 6px; }
  #app-root .nl-progress > .glass-card > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  #app-root .nl-progress > .glass-card > div:first-child > div:last-child { flex-direction: row; gap: 8px; }
  #app-root .nl-progress > .glass-card > div:first-child > div:last-child > button:not([data-click="toggleProgressDetail"]) { display: none; }
  #app-root .nl-progress > .glass-card > div:first-child > div:first-child { gap: 4px; }
  #app-root .nl-progress > .glass-card > div:first-child > div:first-child > div:first-child { display: none; }
  #app-root .nl-progress > .glass-card .truncate { white-space: normal; font-size: 11px; }
  #app-root .nl-progress h1 { font-size: 20px; }
  #app-root .nl-progress > div:first-child > div > p { display: none; }
  #app-root .nl-auth > .glass-card { padding: 12px; }
  #app-root .nl-auth h2 { margin-bottom: 8px; font-size: 22px; }
  #app-root .nl-auth form > * + * { margin-top: 6px; }
  #app-root .nl-auth input { padding-top: 7px; padding-bottom: 7px; }
  #app-root .nl-auth form > div:has(input) { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: center; }
  #app-root .nl-auth label { margin: 0; font-size: 11px; }
  #app-root #exercise-form { max-height: 108px; }
  #app-root .nl-exercise-card:has(#feedback-panel:not(.hidden)) #exercise-form { max-height: 80px; }
  #app-root .mobile-practice-controls { border: 1px solid #334155; border-radius: 12px; background: #0b1423; }
  #app-root .mobile-practice-controls > summary { min-height: 44px; padding: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
  #app-root .mobile-practice-controls > div { margin: 0; }
  #app-root .eg-gridbox { width: 100%; }
  #app-root .eg-tile { aspect-ratio: auto; height: 48px; min-height: 48px; }
  #app-root .eg-emo { display: block; font-size: 16px; line-height: 1; margin: 0; }
  #app-root .eg-word { font-size: 12px; }
  #app-root .eg-badge { min-width: 16px; height: 16px; font-size: 10px; top: 0; right: 2px; }
  #app-root .eg-play { padding: 6px; }
  #app-root .eg-status { margin: 4px 0; }
  #app-root .eg-slots { min-height: 26px; margin-bottom: 4px; }
  #app-root .eg-slot { padding-top: 3px; padding-bottom: 3px; }
  /* Repeated help is available in the level picker's How to play; keep live status and controls. */
  #app-root .eg-tip { display: none; }
}
@media (max-width: 999px) and (min-width: 560px) and (max-height: 480px) {
  #app-root .home-destinations { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(150px, 1fr); }
  #app-root .home-destination, #app-root .home-sniper { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 1fr auto; }
  #app-root .home-action { grid-column: 1 / -1; grid-row: 2; min-height: 44px; }
  #app-root .home-intro h1 { font-size: 22px; max-width: none; }
  #app-root .home-destination h2 { font-size: 18px; }
  #app-root .home-destination p { font-size: 13px; }
  #app-root .nl-word-intro { max-width: none; }
  #app-root .nl-word-intro > .glass-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
  #app-root .nl-word-intro > .glass-card > * { margin: 0; grid-column: 1; }
  #app-root .nl-word-intro > .glass-card > .max-w-sm { grid-column: 2; grid-row: 1 / 4; }
  #app-root .nl-word-intro #intro-start-btn { grid-column: 1 / -1; margin: 0; }
  #app-root .nl-listening { max-width: none; display: grid; grid-template-columns: 190px minmax(0, 1fr); }
  #app-root .nl-listening > div:first-child { grid-column: 1 / -1; }
  #app-root .nl-listening > div:nth-child(2) { grid-column: 1; }
  #app-root .nl-listening > div:nth-child(2) > .grid { grid-template-columns: 1fr; gap: 4px; }
  #app-root .nl-exercise-card { grid-column: 2; grid-row: 2 / 4; }
  #app-root #exercise-form { max-height: max(80px, calc(var(--mobile-height, 100dvh) - 270px)); }
  #app-root .nl-auth { max-width: none; }
  #app-root .nl-auth form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #app-root .nl-auth form > * + * { margin: 0; }
  #app-root .nl-summary { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  #app-root .nl-summary > * { margin: 0; }
  #app-root .nl-summary > .w-16 { justify-self: center; }
  #app-root .nl-summary > .p-4 { align-self: center; }
  #app-root .nl-progress { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #app-root .nl-progress > * { margin: 0; }
  #app-root .nl-progress > :first-child, #app-root .nl-progress > :last-child:not(.glass-card) { grid-column: 1 / -1; }
  #app-root .eg-lobby { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px 16px; }
  #app-root .eg-lobby .eg-hero { grid-column: 1; align-content: center; }
  #app-root .eg-lobby .eg-lvlist { grid-column: 2; grid-row: 1 / 4; margin: 0; }
  #app-root .eg-lobby .eg-howto, #app-root .eg-lobby .eg-foot { grid-column: 1; margin: 0; }
  #app-root .eg-play { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(200px, 1fr); gap: 4px 12px; }
  #app-root .eg-play > * { grid-column: 2; margin: 0; }
  #app-root .eg-play > .eg-gridbox { grid-column: 1; grid-row: 1 / 8; width: min(100%, calc(var(--mobile-height, 100dvh) - 110px)); max-width: 280px; align-self: center; }
}
@media (max-width: 380px) and (min-height: 521px) and (max-height: 650px) {
  #app-root .home-intro h1 { font-size: 20px; }
  #app-root .home-destination p { font-size: 12px; }
  #app-root .home-destinations { grid-template-rows: repeat(3, minmax(96px, 1fr)); }
}